/* Dark Mode Icon Fixes */
/* ==================== */

/* Bottom Navigation Dark Mode Fixes */
[data-theme="dark"] .bottom-nav {
    background: var(--ak-surface);
    border-top: 1px solid var(--ak-border);
}

[data-theme="dark"] .bottom-nav-item {
    color: var(--ak-text);
}

[data-theme="dark"] .bottom-nav-item:hover,
[data-theme="dark"] .bottom-nav-item.active {
    color: var(--ak-primary);
}

[data-theme="dark"] .bottom-nav-item svg {
    fill: var(--ak-text);
    color: var(--ak-text);
}

[data-theme="dark"] .bottom-nav-item:hover svg,
[data-theme="dark"] .bottom-nav-item.active svg {
    fill: var(--ak-primary);
    color: var(--ak-primary);
}

/* Navigation Bar Dark Mode Fixes */
[data-theme="dark"] .nav-bar {
    background: var(--ak-surface);
    border-bottom: 1px solid var(--ak-border);
}

[data-theme="dark"] .nav-actions svg {
    fill: var(--ak-text);
    color: var(--ak-text);
}

[data-theme="dark"] .nav-actions svg:hover {
    fill: var(--ak-primary);
    color: var(--ak-primary);
}

/* Icon Dark Mode Fixes */
[data-theme="dark"] .icon,
[data-theme="dark"] .large-icon,
[data-theme="dark"] .info-icon,
[data-theme="dark"] .success-icon,
[data-theme="dark"] .donate-icon {
    fill: var(--ak-text) !important;
    color: var(--ak-text) !important;
}

/* Button Icon Dark Mode Fixes */
[data-theme="dark"] .app-button--icon svg,
[data-theme="dark"] .app-tile-icon svg,
[data-theme="dark"] .app-tile-icon img {
    fill: var(--ak-text) !important;
    color: var(--ak-text) !important;
    stroke: var(--ak-text) !important;
}

[data-theme="dark"] .app-button--icon:hover svg,
[data-theme="dark"] .app-tile-icon:hover svg,
[data-theme="dark"] .app-tile-icon:hover img {
    fill: var(--ak-primary) !important;
    color: var(--ak-primary) !important;
    stroke: var(--ak-primary) !important;
}

/* Specific fix for app tiles */
[data-theme="dark"] .app-tile {
    color: var(--ak-text);
}

[data-theme="dark"] .app-tile .app-tile-icon {
    color: var(--ak-text);
}

/* Ensure SVG icons inherit text color in dark mode */
[data-theme="dark"] svg {
    fill: currentColor !important;
    color: inherit !important;
    stroke: currentColor !important;
}

/* Specific fix for all IMG elements containing SVGs in dark mode */
[data-theme="dark"] img[src*=".svg"] {
    filter: invert(1) brightness(0.8) !important;
}

/* Override for primary colored elements */
[data-theme="dark"] .app-tile:hover img[src*=".svg"] {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg) brightness(1.2) !important;
}

/* Override specific icon colors for better visibility */
[data-theme="dark"] .bottom-nav svg,
[data-theme="dark"] .nav-bar svg,
[data-theme="dark"] .icon svg {
    fill: var(--ak-text);
    stroke: var(--ak-text);
}

/* Active state for navigation icons */
[data-theme="dark"] .bottom-nav-item.active svg,
[data-theme="dark"] .nav-actions.active svg {
    fill: var(--ak-primary);
    stroke: var(--ak-primary);
}

/* Donation icon specific fixes */
[data-theme="dark"] .donate-icon svg {
    fill: var(--ak-success);
    color: var(--ak-success);
}

[data-theme="dark"] .donate-icon:hover svg {
    fill: var(--ak-success-hover);
    color: var(--ak-success-hover);
}

/* Ensure button text and icons are visible */
[data-theme="dark"] button,
[data-theme="dark"] .ak-button,
[data-theme="dark"] .app-button {
    color: var(--ak-text) !important;
}

[data-theme="dark"] button svg,
[data-theme="dark"] .ak-button svg,
[data-theme="dark"] .app-button svg {
    fill: currentColor;
    color: currentColor;
}

/* Chat specific button fixes */
[data-theme="dark"] .chat-input button,
[data-theme="dark"] .chat-header button,
[data-theme="dark"] .chat-header .app-button {
    color: var(--ak-text) !important;
    background: var(--ak-surface) !important;
    border: 1px solid var(--ak-border) !important;
}

[data-theme="dark"] .chat-input button:hover,
[data-theme="dark"] .chat-header button:hover,
[data-theme="dark"] .chat-header .app-button:hover {
    background: var(--ak-primary) !important;
    color: var(--ak-primary-contrast) !important;
}

/* Specific fix for white buttons in dark mode */
[data-theme="dark"] .app-button:not(.app-button--icon),
[data-theme="dark"] button:not(.app-button--icon) {
    background: var(--ak-surface) !important;
    color: var(--ak-text) !important;
    border: 1px solid var(--ak-border) !important;
}

[data-theme="dark"] .app-button:not(.app-button--icon):hover,
[data-theme="dark"] button:not(.app-button--icon):hover {
    background: var(--ak-primary) !important;
    color: var(--ak-primary-contrast) !important;
}

/* Chat header specific button fixes */
[data-theme="dark"] .chat-header-actions .app-button {
    background: var(--ak-surface) !important;
    color: var(--ak-text) !important;
    border: 1px solid var(--ak-border) !important;
}

[data-theme="dark"] .chat-header-actions .app-button:hover {
    background: var(--ak-primary) !important;
    color: var(--ak-primary-contrast) !important;
}

/* New Chat Button specific fix */
[data-theme="dark"] #newChatButton {
    background: var(--ak-surface) !important;
    color: var(--ak-text) !important;
    border: 1px solid var(--ak-border) !important;
}

[data-theme="dark"] #newChatButton:hover {
    background: var(--ak-primary) !important;
    color: var(--ak-primary-contrast) !important;
}

/* Donation Page Dark Mode Fixes */
[data-theme="dark"] .donation-container {
    background: var(--ak-background);
    color: var(--ak-text);
}

/* Fix donation page CSS variables */
[data-theme="dark"] {
    --bg-card: var(--ak-surface);
    --dark-card: var(--ak-surface);
    --text-primary: var(--ak-text);
    --text-secondary: var(--ak-text-muted);
    --dark-text: var(--ak-text);
    --dark-input: var(--ak-surface);
    --dark-border: var(--ak-border);
    --bg-light: var(--ak-surface);
    --primary-color: var(--ak-primary);
}

[data-theme="dark"] .donation-container h1,
[data-theme="dark"] .donation-container h2,
[data-theme="dark"] .donation-container h3 {
    color: var(--ak-text) !important;
}

[data-theme="dark"] .donation-container p,
[data-theme="dark"] .donation-container span,
[data-theme="dark"] .donation-container div {
    color: var(--ak-text) !important;
}

/* Donation form elements */
[data-theme="dark"] .donation-form {
    background: var(--ak-surface);
    border: 1px solid var(--ak-border);
}

[data-theme="dark"] .donation-form input,
[data-theme="dark"] .donation-form button {
    background: var(--ak-surface);
    color: var(--ak-text);
    border: 1px solid var(--ak-border);
}

[data-theme="dark"] .donation-form input::placeholder {
    color: var(--ak-text-muted);
}

/* Amount buttons */
[data-theme="dark"] .amount-buttons button {
    background: var(--ak-surface);
    color: var(--ak-text);
    border: 1px solid var(--ak-border);
}

[data-theme="dark"] .amount-buttons button:hover,
[data-theme="dark"] .amount-buttons button.selected {
    background: var(--ak-primary);
    color: var(--ak-primary-contrast);
}

/* Help sections */
[data-theme="dark"] .help-section {
    background: var(--ak-surface);
    border: 1px solid var(--ak-border);
}

[data-theme="dark"] .help-section h3,
[data-theme="dark"] .help-section p {
    color: var(--ak-text) !important;
}

/* Stats and info text */
[data-theme="dark"] .stats-container,
[data-theme="dark"] .stat-item {
    color: var(--ak-text) !important;
}

[data-theme="dark"] .stat-label {
    color: var(--ak-text-muted) !important;
}

/* Security note */
[data-theme="dark"] .security-note,
[data-theme="dark"] .security-info {
    color: var(--ak-text-muted) !important;
    background: var(--ak-surface);
    border: 1px solid var(--ak-border);
}

/* Specific donation page elements */
[data-theme="dark"] .donation-stats,
[data-theme="dark"] .donation-form-container,
[data-theme="dark"] .info-item {
    background: var(--ak-surface) !important;
    color: var(--ak-text) !important;
}

[data-theme="dark"] .stat-value {
    color: var(--ak-primary) !important;
}

[data-theme="dark"] .info-item h4,
[data-theme="dark"] .donation-info h3 {
    color: var(--ak-text) !important;
}

[data-theme="dark"] .info-item p {
    color: var(--ak-text-muted) !important;
}

/* Make sure all text in donation container is visible */
[data-theme="dark"] .donation-container * {
    color: inherit;
}

[data-theme="dark"] .donation-container h1,
[data-theme="dark"] .donation-container h2,
[data-theme="dark"] .donation-container h3,
[data-theme="dark"] .donation-container h4 {
    color: var(--ak-text) !important;
}

[data-theme="dark"] .donation-container p,
[data-theme="dark"] .donation-container span,
[data-theme="dark"] .donation-container small {
    color: var(--ak-text-muted) !important;
}

/* Mobile navigation specific fixes */
@media (max-width: 768px) {
    [data-theme="dark"] .ak-nav--mobile {
        background: var(--ak-surface);
        border-top: 1px solid var(--ak-border);
    }
    
    [data-theme="dark"] .ak-nav__item {
        color: var(--ak-text);
    }
    
    [data-theme="dark"] .ak-nav__item svg {
        fill: var(--ak-text);
        color: var(--ak-text);
    }
    
    [data-theme="dark"] .ak-nav__item--active {
        color: var(--ak-primary);
    }
    
    [data-theme="dark"] .ak-nav__item--active svg {
        fill: var(--ak-primary);
        color: var(--ak-primary);
    }
}