/* FinChronicle - Dark Mode Styles */
/* Version: 3.10.3 */
/* Audited: redundant token-reapplying rules removed (57% reduction) */

/* ==========================================================================
   Dark mode token overrides
   All elements using var(--color-*) tokens automatically adapt via cascade.
   Only rules that remap to a DIFFERENT token or use hardcoded values remain.
   ========================================================================== */
body.dark-mode {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-text: #ffffff;
    --color-text-muted: #aeaeb2;
    --color-text-subtle: #8e8e93;
    --color-border: #38383a;
    --color-primary: #0053AD;
    --color-primary-hover: #409CFF;
    --color-primary-strong: #409CFF;
    --color-disabled-bg: #2c2c2e;
    --color-disabled-text: #8e8e93;
    --color-status: #30d158;
    --color-primary-soft: #1a2a3a;
    --color-toggle-bg: #2c2c2e;
    --color-toggle-active-bg: #1c1c1e;

    /* Semantic colors optimized for #1c1c1e surface */
    --color-success: #32D74B;
    --color-success-strong: #30E85D;
    --color-danger: #FF453A;
    --color-danger-strong: #FF6B6B;
    --color-warning-text: #FCD34D;

    /* Brand wordmark — brighter for dark backgrounds */
    --color-fin: #5B8DEF;
    --color-chronicle: #7EE847;

    --shadow-sm: 0 var(--space-2xs) var(--space-sm) rgba(0, 0, 0, 0.4);
    --shadow-md: 0 var(--space-2xs) var(--space-md) rgba(0, 0, 0, 0.4);

    /* Mobile amount chips — override light-mode pastel backgrounds */
    --color-chip-negative-bg: #3a1a1a;
    --color-chip-positive-bg: #1a3a23;
}

/* ==========================================================================
   Pagination — custom glow (base uses --shadow-primary token)
   ========================================================================== */

body.dark-mode .pagination-btn:hover:not(:disabled) {
    box-shadow: 0 var(--space-2xs) var(--space-md) rgba(0, 97, 245, 0.4);
}

body.dark-mode .pagination-btn:active:not(:disabled) {
    box-shadow: 0 var(--space-2xs) var(--space-xs) rgba(0, 97, 245, 0.3);
}

/* ==========================================================================
   Token remap overrides (different token than light-mode base)
   ========================================================================== */

/* Summary labels: muted → full contrast */
body.dark-mode .summary-label {
    color: var(--color-text);
}

/* Filter buttons: full → muted (inactive only) */
body.dark-mode .filter-btn {
    color: var(--color-text-muted);
}

/* Active filter button must keep white text on primary background */
body.dark-mode .filter-btn.active {
    color: var(--color-on-primary);
}

/* Active nav item: primary → on-primary */
body.dark-mode .nav-item.active {
    color: var(--color-on-primary);
}

/* Version badge: bg → toggle-bg */
body.dark-mode .version {
    background: var(--color-toggle-bg);
    color: var(--color-text-muted);
}

/* Type toggle active: custom dark shadow */
body.dark-mode .type-option.active {
    background: var(--color-toggle-active-bg);
    color: var(--color-text);
    box-shadow: 0 var(--space-2xs) var(--space-2xs) rgba(255, 255, 255, 0.05);
}

/* Transaction separator: --color-bg → --color-border */
body.dark-mode .transaction-item {
    border-bottom-color: var(--color-border);
}

/* ==========================================================================
   Hardcoded dark colors (no token equivalent)
   ========================================================================== */

/* Transaction icons (display: none in base, styled for future use) */
body.dark-mode .transaction-icon.income {
    background: #1a3a23;
    color: #30d158;
}

body.dark-mode .transaction-icon.expense {
    background: #3a1a1a;
    color: #ff453a;
}

/* ==========================================================================
   Modal overrides
   ========================================================================== */

body.dark-mode .modal-btn-cancel {
    background: var(--color-border);
    color: var(--color-on-primary);
}

body.dark-mode .close-btn:hover {
    background: var(--color-toggle-bg);
}

/* ==========================================================================
   Interactive hover/active — bg → toggle-bg or surface swap
   ========================================================================== */

body.dark-mode .currency-item:hover {
    background: var(--color-toggle-bg);
    border-color: var(--color-primary);
}

body.dark-mode .toolbar-btn:active {
    background: var(--color-toggle-bg);
}

body.dark-mode .faq-question:hover {
    background: var(--color-surface);
}

body.dark-mode .faq-answer {
    background: var(--color-surface);
}

body.dark-mode .faq-answer code {
    background: var(--color-bg);
}

/* ==========================================================================
   Primary → Primary-strong for better dark contrast
   ========================================================================== */

body.dark-mode .faq-header h2 {
    color: var(--color-text);
}

body.dark-mode .backup-header .backup-icon,
body.dark-mode .faq-header i,
body.dark-mode .faq-section-title i,
body.dark-mode .faq-item-icon {
    color: var(--color-primary-strong);
}

body.dark-mode .backup-faq-button {
    color: var(--color-primary-strong);
}

body.dark-mode .backup-faq-button:focus {
    outline-color: var(--color-primary-strong);
}

/* ==========================================================================
   Backup status — hardcoded dark palette
   ========================================================================== */

body.dark-mode .backup-status-good {
    background: #1e4620;
    color: #a8e6a3;
}

body.dark-mode .backup-status-good i {
    color: #a8e6a3;
}

body.dark-mode .backup-status-warning {
    background: #4a3d1a;
    color: #ffd54f;
}

body.dark-mode .backup-status-warning i {
    color: #ffd54f;
}

body.dark-mode .backup-status-danger {
    background: #4a1a1f;
    color: #ff9aa2;
}

body.dark-mode .backup-status-danger i {
    color: #ff9aa2;
}

/* ==========================================================================
   Recurring Transactions (v3.11.0)
   ========================================================================== */

body.dark-mode .recurring-frequency-chip {
    background: var(--color-primary-soft);
    color: var(--color-text); /* white on #1a2a3a = 13:1, vs #409CFF = 4.9:1 at 11px */
}

body.dark-mode .recurring-title i {
    color: var(--color-primary-strong);
}

body.dark-mode .recurring-empty i {
    color: var(--color-border);
}

/* ==========================================================================
   Reports Charts (v3.12.0)
   ========================================================================== */

/* Heat colour for the day-of-month heatmap — danger orange-red on dark bg */
body.dark-mode {
    --chart-heat: 255, 80, 68;
}

body.dark-mode .range-pill {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

body.dark-mode .range-pill:hover {
    color: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
}

body.dark-mode .range-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

body.dark-mode .week-bar-track {
    background: var(--color-bg);
}

body.dark-mode .heatmap-cell {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark-mode .heatmap-cell.active {
    background: rgba(var(--chart-heat), calc(0.15 + var(--cell-intensity, 0) * 0.80));
    border-color: transparent;
}

body.dark-mode .chart-empty-sm {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Budget Management (v3.13.0)
   ========================================================================== */

body.dark-mode .budget-card {
    border-left-color: var(--color-primary-strong);
}

body.dark-mode .budget-card:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

body.dark-mode .budget-title h3 {
    color: var(--color-text-primary);
}

body.dark-mode .budget-status {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

body.dark-mode .budget-status.budget-warning {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

body.dark-mode .budget-status.budget-exceeded {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

body.dark-mode .icon-btn {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

body.dark-mode .icon-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
}

body.dark-mode .progress-bar {
    background: var(--color-bg-secondary);
}

body.dark-mode .progress-fill {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong));
}

body.dark-mode .budget-card.budget-warning .progress-fill {
    background: linear-gradient(90deg, var(--color-warning), var(--color-warning-strong));
}

body.dark-mode .budget-card.budget-exceeded .progress-fill {
    background: linear-gradient(90deg, var(--color-danger), var(--color-danger-strong));
}

body.dark-mode .progress-text {
    color: var(--color-text-secondary);
}

body.dark-mode .budget-details {
    border-top-color: var(--color-border);
}

body.dark-mode .detail-label {
    color: var(--color-text-subtle);
}

body.dark-mode .detail-value {
    color: var(--color-text-primary);
}

body.dark-mode .budget-alert {
    background: var(--color-warning-soft);
    border-left-color: var(--color-warning);
}

body.dark-mode .budget-alert.alert-danger {
    background: var(--color-danger-soft);
    border-left-color: var(--color-danger);
}

body.dark-mode .budget-alert i {
    color: var(--color-warning-strong);
}

body.dark-mode .budget-alert.alert-danger i {
    color: var(--color-danger-strong);
}

body.dark-mode .alert-content {
    color: var(--color-text-primary);
}

body.dark-mode .form-group label {
    color: var(--color-text-primary);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 81, 213, 0.15);
}

body.dark-mode .form-group small {
    color: var(--color-text-subtle);
}
/* ── Budget Collapsible dark mode (v3.13.0) ── */
body.dark-mode .budget-collapse-title { color: var(--color-text); }
body.dark-mode .budget-mini-bar       { background: var(--color-border); }
body.dark-mode .budget-row-name       { color: var(--color-text); }

/* ── Budget Alert Banners dark mode (v3.13.0) ── */
body.dark-mode .budget-alert.alert-warning {
    background: rgba(255, 193, 7, 0.12);
    border-color: var(--color-warning-border);
    color: #ffc107;
}

body.dark-mode .budget-alert.alert-danger {
    background: rgba(255, 59, 48, 0.12);
    border-color: var(--color-danger);
    color: #ff6b60;
}

body.dark-mode .budget-alert-badge.badge-danger {
    background: rgba(255, 59, 48, 0.15);
    color: #ff6b60;
    border-color: var(--color-danger);
}

body.dark-mode .budget-alert-badge.badge-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: #d97706;
}

/* ── Search Bar dark mode (v3.14.0) ── */
body.dark-mode .search-input {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark-mode .search-input:focus {
    border-color: var(--color-primary-strong);
}

body.dark-mode .search-clear-btn:hover {
    background: var(--color-toggle-bg);
}

/* ── Tag chips dark mode (v3.14.0) ── */
body.dark-mode .tag-chip,
body.dark-mode .tx-tag {
    background: rgba(0, 81, 213, 0.2);
    color: #6aabff;
}

body.dark-mode .tx-tag:hover {
    background: var(--color-primary);
    color: #fff;
}

body.dark-mode .tag-chip-remove {
    color: #6aabff;
}

body.dark-mode .tag-input-wrapper {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark-mode .tag-input {
    color: var(--color-text);
}

/* ── Tag suggestions dark mode (v3.14.0) ── */
body.dark-mode .tag-suggestions {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.dark-mode .tag-suggestion-item {
    color: var(--color-text);
}

body.dark-mode .tag-suggestion-item:hover,
body.dark-mode .tag-suggestion-item.active {
    background: rgba(0, 81, 213, 0.2);
    color: #6aabff;
}

/* ── Tag management dark mode (v3.14.0) ── */
body.dark-mode .tag-manage-row {
    border-color: var(--color-border);
}

body.dark-mode .tag-manage-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .tag-manage-count {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .tag-color-dot {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .tag-manage-name {
    color: var(--color-text);
}

body.dark-mode .tag-manage-btn-rename {
    background: rgba(179, 212, 255, 0.1);
    color: #6aabff;
    border-color: rgba(179, 212, 255, 0.2);
}

body.dark-mode .tag-manage-btn-rename:hover {
    background: rgba(179, 212, 255, 0.2);
}

body.dark-mode .tag-manage-btn-delete {
    background: rgba(255, 59, 48, 0.1);
    color: #ff6b60;
    border-color: rgba(255, 59, 48, 0.2);
}

body.dark-mode .tag-manage-btn-delete:hover {
    background: rgba(255, 59, 48, 0.2);
}

/* ── Tag picker dark mode (v3.14.0) ── */
body.dark-mode .tag-picker-chip {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

body.dark-mode .tag-picker-chip:hover:not(.active) {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ── Color dot in Settings dark mode (v3.14.0) ── */
body.dark-mode .tag-color-dot {
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .tag-color-dot:hover {
  border-color: rgba(255, 255, 255, 0.35);
}