/*
 * ═══════════════════════════════════════════════════════════════════
 *  NhaBex App v3 — Material Design 3 Dark Theme
 *  app-v2/assets/css/md3-dark.css
 *
 *  Dark mode via:
 *  1. System preference: @media (prefers-color-scheme: dark)
 *  2. Manual toggle: [data-bs-theme="dark"]
 *
 *  Loaded AFTER md3-tokens.css and md3-components.css
 * ═══════════════════════════════════════════════════════════════════
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    /* ── Primary (#02A586 — same in dark for brand consistency) ── */
    --md-sys-color-primary:              #02A586;
    --md-sys-color-on-primary:           #00382A;
    --md-sys-color-primary-container:    #1A4D40;
    --md-sys-color-on-primary-container: #E8F7F3;
    --md-sys-color-primary-hover:        #49D2B6;
    --md-sys-color-primary-10:           rgba(60, 189, 161, 0.10);
    --md-sys-color-primary-20:           rgba(60, 189, 161, 0.20);

    /* ── Secondary ── */
    --md-sys-color-secondary:              #8CC5B5;
    --md-sys-color-on-secondary:           #0A2E24;
    --md-sys-color-secondary-container:    #2B5A4C;
    --md-sys-color-on-secondary-container: #D1ECE5;

    /* ── Tertiary ── */
    --md-sys-color-tertiary:              #82c8f0;
    --md-sys-color-on-tertiary:           #00344e;
    --md-sys-color-tertiary-container:    #004b6f;
    --md-sys-color-on-tertiary-container: #c4e4fb;

    /* ── Error ── */
    --md-sys-color-error:                #ffb4ab;
    --md-sys-color-on-error:             #690005;
    --md-sys-color-error-container:      #93000a;
    --md-sys-color-on-error-container:   #ffdad6;

    /* ── Warning ── */
    --md-sys-color-warning:              #ffc670;
    --md-sys-color-on-warning:           #422b00;
    --md-sys-color-warning-container:    #5f3f00;
    --md-sys-color-on-warning-container: #ffddb4;

    /* ── Success ── */
    --md-sys-color-success:              #6dd9b9;
    --md-sys-color-on-success:           #003828;
    --md-sys-color-success-container:    #005e44;
    --md-sys-color-on-success-container: #8af5d4;

    /* ── Surface (slate dark) ── */
    --md-sys-color-surface:                  #0F172A;
    --md-sys-color-on-surface:               #F1F5F9;
    --md-sys-color-on-surface-variant:       #94A3B8;
    --md-sys-color-surface-dim:              #0F172A;
    --md-sys-color-surface-bright:           #475569;
    --md-sys-color-surface-container-lowest: #0B1120;
    --md-sys-color-surface-container-low:    #141C2F;
    --md-sys-color-surface-container:        #1E293B;
    --md-sys-color-surface-container-high:   #263548;
    --md-sys-color-surface-container-highest:#334155;
    --md-sys-color-inverse-surface:          #F1F5F9;
    --md-sys-color-inverse-on-surface:       #1E293B;
    --md-sys-color-inverse-primary:          #02A586;

    /* ── Surface variant ── */
    --md-sys-color-surface-variant:      #334155;

    /* ── Primary RGB (for rgba() usage) ── */
    --md-sys-color-primary-rgb:          60, 189, 161;

    /* ── Outline (neutral slate) ── */
    --md-sys-color-outline:              #64748B;
    --md-sys-color-outline-variant:      #334155;

    /* ── Scrim ── */
    --md-sys-color-scrim:               rgba(0, 0, 0, 0.5);
    --md-sys-color-shadow:              rgba(0, 0, 0, 0.3);

    /* ── Elevation (dark uses tint overlay instead of shadow) ── */
    --md-sys-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.6);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.6);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.6);
    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.3), 0 2px 3px rgba(0,0,0,0.6);
    --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.3), 0 4px 4px rgba(0,0,0,0.6);
    --md-sys-elevation-premium: 0 1px 4px rgba(0,0,0,0.12);

    /* ── Accent (dark) ── */
    --md-sys-color-accent-vivid:         #49D2B6;
    --md-sys-color-accent-vivid-light:   #6EDCC8;
    --md-sys-color-accent-blue:          #60A5FA;
    --md-sys-color-accent-blue-container:#1E3A5F;
    --md-sys-gradient-primary:   var(--md-sys-color-primary);
    --md-sys-gradient-primary-r: var(--md-sys-color-primary);
    --md-sys-gradient-icon-bg:   var(--md-sys-color-primary-container);
  }
}

/* Manual dark mode toggle via data-theme attribute */
[data-bs-theme="dark"] {
  /* ── Primary (#02A586 — same in dark for brand consistency) ── */
  --md-sys-color-primary:              #02A586;
  --md-sys-color-on-primary:           #00382A;
  --md-sys-color-primary-container:    #1A4D40;
  --md-sys-color-on-primary-container: #E8F7F3;
  --md-sys-color-primary-hover:        #49D2B6;
  --md-sys-color-primary-10:           rgba(60, 189, 161, 0.10);
  --md-sys-color-primary-20:           rgba(60, 189, 161, 0.20);

  /* ── Secondary ── */
  --md-sys-color-secondary:              #8CC5B5;
  --md-sys-color-on-secondary:           #0A2E24;
  --md-sys-color-secondary-container:    #2B5A4C;
  --md-sys-color-on-secondary-container: #D1ECE5;

  /* ── Tertiary ── */
  --md-sys-color-tertiary:              #82c8f0;
  --md-sys-color-on-tertiary:           #00344e;
  --md-sys-color-tertiary-container:    #004b6f;
  --md-sys-color-on-tertiary-container: #c4e4fb;

  /* ── Error ── */
  --md-sys-color-error:                #ffb4ab;
  --md-sys-color-on-error:             #690005;
  --md-sys-color-error-container:      #93000a;
  --md-sys-color-on-error-container:   #ffdad6;

  /* ── Warning ── */
  --md-sys-color-warning:              #ffc670;
  --md-sys-color-on-warning:           #422b00;
  --md-sys-color-warning-container:    #5f3f00;
  --md-sys-color-on-warning-container: #ffddb4;

  /* ── Success ── */
  --md-sys-color-success:              #6dd9b9;
  --md-sys-color-on-success:           #003828;
  --md-sys-color-success-container:    #005e44;
  --md-sys-color-on-success-container: #8af5d4;

  /* ── Surface (slate dark) ── */
  --md-sys-color-surface:                  #0F172A;
  --md-sys-color-on-surface:               #F1F5F9;
  --md-sys-color-on-surface-variant:       #94A3B8;
  --md-sys-color-surface-dim:              #0F172A;
  --md-sys-color-surface-bright:           #475569;
  --md-sys-color-surface-container-lowest: #0B1120;
  --md-sys-color-surface-container-low:    #141C2F;
  --md-sys-color-surface-container:        #1E293B;
  --md-sys-color-surface-container-high:   #263548;
  --md-sys-color-surface-container-highest:#334155;
  --md-sys-color-inverse-surface:          #F1F5F9;
  --md-sys-color-inverse-on-surface:       #1E293B;
  --md-sys-color-inverse-primary:          #02A586;

  /* ── Surface variant ── */
  --md-sys-color-surface-variant:      #334155;

  /* ── Primary RGB (for rgba() usage) ── */
  --md-sys-color-primary-rgb:          60, 189, 161;

  /* ── Outline (neutral slate) ── */
  --md-sys-color-outline:              #64748B;
  --md-sys-color-outline-variant:      #334155;

  /* ── Scrim & Elevation ── */
  --md-sys-color-scrim:               rgba(0, 0, 0, 0.5);
  --md-sys-color-shadow:              rgba(0, 0, 0, 0.3);
  --md-sys-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.6);
  --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.6);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.6);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.3), 0 2px 3px rgba(0,0,0,0.6);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.3), 0 4px 4px rgba(0,0,0,0.6);
  --md-sys-elevation-premium: 0 1px 4px rgba(0,0,0,0.12);

  /* ── Accent (dark) ── */
  --md-sys-color-accent-vivid:         #49D2B6;
  --md-sys-color-accent-vivid-light:   #6EDCC8;
  --md-sys-color-accent-blue:          #60A5FA;
  --md-sys-color-accent-blue-container:#1E3A5F;
  --md-sys-gradient-primary:   var(--md-sys-color-primary);
  --md-sys-gradient-primary-r: var(--md-sys-color-primary);
  --md-sys-gradient-icon-bg:   var(--md-sys-color-primary-container);
}

/* ── Dark bottom area ── */
[data-bs-theme="dark"] .md3-bottom-area {
  background-color: rgba(30, 41, 59, 0.88);
  border-top-color: var(--md-sys-color-outline-variant);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .md3-bottom-area {
    background-color: rgba(30, 41, 59, 0.88);
    border-top-color: var(--md-sys-color-outline-variant);
  }
}

/* ── Dark mode card borders for better visual separation ── */
[data-bs-theme="dark"] .md3-card--filled {
  border: 1px solid var(--md-sys-color-outline-variant);
}
[data-bs-theme="dark"] .web-service-card {
  border: 1px solid var(--md-sys-color-outline-variant);
}
[data-bs-theme="dark"] .dash-stat-card,
[data-bs-theme="dark"] .dash-ticket-item,
[data-bs-theme="dark"] .dash-chart,
[data-bs-theme="dark"] .dash-fav-card,
[data-bs-theme="dark"] .dash-eval-item {
  border: 1px solid var(--md-sys-color-outline-variant);
}
/* ── Dark cascade cards: border instead of shadow for separation ── */
[data-bs-theme="dark"] .md3-card.web-cascade-card {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .md3-card.web-cascade-card {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* ── Dark mode subtitle override (solid color in light, token in dark) ── */
[data-bs-theme="dark"] .web-cascade-card__subtitle {
  color: var(--md-sys-color-on-surface-variant);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .web-cascade-card__subtitle {
    color: var(--md-sys-color-on-surface-variant);
  }
}