/* ── Dual theme: Atelier (light, default :root) + Rust (dark, [data-theme="dark"]) ──
   The boot script in each base template sets document.documentElement[data-theme]
   from localStorage 'millarde-theme' (default dark); the toggle in the sidebar
   footer switches it. All rules reference var(--token), so they follow the theme. */

:root {
  /* Surfaces */
  --bg:          #faf7f0;
  --sidebar:     #f3efe3;
  --card:        #ffffff;
  --elev:        #efeadb;
  --border:      rgba(38,34,26,.10);
  --border-soft: rgba(38,34,26,.07);

  /* Text */
  --text:        #26221a;
  --text-body:   #3c372c;
  --text-2:      #5c5646;
  --text-3:      #8a8270;
  --text-muted:  #a49b85;

  /* Accent (refined gold) */
  --accent:        #8f7420;
  --accent-bright: #c9a227;
  --accent-deep:   #6f5a12;
  --accent-tint:   #ece2c6;
  --accent-grad:   linear-gradient(135deg,#c9a227,#8f7420);
  --accent-50:     #fdf8ec;
  --accent-100:    #f6edd6;
  --accent-border:        rgba(143,116,32,.3);
  --accent-border-strong: rgba(143,116,32,.4);
  --accent-hover:         rgba(143,116,32,.35);
  --accent-halo:          rgba(236,226,198,.55);
  --accent-glow:          rgba(143,116,32,0.18);

  /* Status */
  --green:      #3a9e6e;
  --green-tint: #e7f3ec;
  --rose:       #b23a6b;
  --rose-tint:  #fdf3f5;
  --away:       #dd9a26;
  --away-text:  #b07a14;
  --away-tint:  rgba(221,154,38,.14);
  --info:       #0284c7;
  --info-tint:  rgba(2,132,199,.1);

  /* Status variants */
  --green-300: #6fbf9a;
  --green-700: #277350;
  --green-deep: #2f8a5e;
  --green-badge: rgba(58,158,110,0.12);
  --green-border: rgba(58,158,110,.3);
  --green-border-soft: rgba(58,158,110,0.25);
  --green-border-strong: rgba(58,158,110,.4);
  --green-hover: rgba(58,158,110,0.18);
  --rose-300: #c96b93;
  --rose-deep: #9c2f5c;
  --rose-badge: rgba(178,58,107,0.12);
  --rose-border: rgba(178,58,107,.3);
  --rose-border-heavy: rgba(178,58,107,.6);
  --rose-border-soft: rgba(178,58,107,.25);
  --rose-border-strong: rgba(178,58,107,.4);
  --rose-haze: rgba(178,58,107,.15);
  --rose-hover: rgba(178,58,107,0.16);
  --rose-wash: rgba(178,58,107,.08);
  --rose-10: rgba(178,58,107,.1);
  --rose-20: rgba(178,58,107,.2);
  --rose-70: rgba(178,58,107,.7);
  --green-70: rgba(58,158,110,.7);
  --away-border: rgba(221,154,38,.3);
  --amber: #f59e0b;
  --blue-300: #4ea8de;
  --blue-600: #0369a1;
  --info-badge: rgba(2,132,199,0.12);
  --info-border: rgba(2,132,199,0.3);
  --info-border-soft: rgba(2,132,199,0.25);
  --info-hover: rgba(2,132,199,.18);
  --info-wash: rgba(2,132,199,.1);
  --purple: #7c3aed;
  --purple-600: #6d28d9;
  --purple-800: #5b21b6;

  /* Lines, borders, scrims */
  --border-faint:  rgba(38,34,26,.07);
  --border-wash:   rgba(38,34,26,.08);
  --border-haze:   rgba(38,34,26,.09);
  --border-lite:   rgba(38,34,26,.1);
  --border-strong: rgba(38,34,26,.12);
  --border-solid:  #d9d4bf;
  --line-faint:    rgba(38,34,26,.05);
  --line-soft:     rgba(38,34,26,.06);
  --surface-hover: rgba(38,34,26,.04);
  --gray-200:      #e8e2d2;
  --gray-300:      #d9d2bc;
  --handle:        #ddd6c0;
  --dim:           rgba(38,34,26,.3);
  --dim-soft:      rgba(38,34,26,.25);
  --dim-mid:       rgba(38,34,26,.18);
  --dim-heavy:     rgba(38,34,26,.38);
  --scrim:         rgba(20,18,13,.88);
  --popover-solid: rgba(255,255,255,0.95);

  /* Effects */
  --focus-ring:     rgba(201,162,39,.15);
  --pulse-ring:     rgba(201,162,39,0.35);
  --pulse-ring-end: rgba(201,162,39,0);
  --grid-line:      rgba(143,116,32,0.04);
  --shadow-deep:    rgba(38,34,26,.15);
  --shadow-deeper:  rgba(38,34,26,.3);
  --shadow-lite:    rgba(38,34,26,.15);
  --shadow-strong:  rgba(38,34,26,.06);

  /* Shadows */
  --shadow-card:     0 2px 8px rgba(38,34,26,.06);
  --shadow-composer: 0 4px 16px rgba(38,34,26,.06);
  --shadow-btn:      0 2px 8px rgba(143,116,32,.3);
  --shadow-popover:  0 12px 40px rgba(38,34,26,.15);
  --shadow-modal:    0 24px 64px rgba(38,34,26,.3);

  /* RGB channels (Tailwind /opacity-modifier colors in base.html) */
  --bg-rgb: 250 247 240;
  --sidebar-rgb: 243 239 227;
  --border-rgb: 38 34 26;
  --accent-rgb: 143 116 32;
  --accent-bright-rgb: 201 162 39;
  --green-rgb: 58 158 110;
  --rose-rgb: 178 58 107;
  --rose-300-rgb: 201 107 147;
  --away-rgb: 221 154 38;
  --info-rgb: 2 132 199;

  /* Fonts */
  --font-display: "Sora", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ── Rust dark theme ── */
:root[data-theme="dark"] {
  /* Surfaces */
  --bg:          #1E2020;
  --sidebar:     #171919;
  --card:        #262A2A;
  --elev:        #2E3333;
  --border:      rgba(246,234,224,.12);
  --border-soft: rgba(246,234,224,.08);

  /* Text */
  --text:        #F6EAE0;
  --text-body:   #E9DCCF;
  --text-2:      #B8AEA2;
  --text-3:      #8F887C;
  --text-muted:  #6E6A62;

  /* Accent (rust orange) */
  --accent:        #CE422B;
  --accent-bright: #E8573C;
  --accent-deep:   #F0704F;
  --accent-tint:   rgba(206,66,43,.18);
  --accent-grad:   linear-gradient(135deg,#CE422B,#B03622);
  --accent-50:     rgba(206,66,43,.18);
  --accent-100:    rgba(206,66,43,.30);
  --accent-border:        rgba(206,66,43,.3);
  --accent-border-strong: rgba(206,66,43,.4);
  --accent-hover:         rgba(206,66,43,.35);
  --accent-halo:          rgba(206,66,43,.3);
  --accent-glow:          rgba(206,66,43,0.18);

  /* Status */
  --green:      #5FA36F;
  --green-tint: rgba(95,163,111,.15);
  --rose:       #D64541;
  --rose-tint:  rgba(214,69,65,.14);
  --away:       #E0A030;
  --away-text:  #E8B04A;
  --away-tint:  rgba(224,160,48,.14);
  --info:       #4A9EDB;
  --info-tint:  rgba(74,158,219,.14);

  /* Status variants */
  --green-300: #5FA36F;
  --green-700: #5FA36F;
  --green-deep: #5FA36F;
  --green-badge: rgba(95,163,111,0.12);
  --green-border: rgba(95,163,111,.3);
  --green-border-soft: rgba(95,163,111,0.25);
  --green-border-strong: rgba(95,163,111,.4);
  --green-hover: rgba(95,163,111,0.18);
  --rose-300: #E0655B;
  --rose-deep: #D64541;
  --rose-badge: rgba(214,69,65,0.12);
  --rose-border: rgba(214,69,65,.3);
  --rose-border-heavy: rgba(214,69,65,.6);
  --rose-border-soft: rgba(214,69,65,.25);
  --rose-border-strong: rgba(214,69,65,.4);
  --rose-haze: rgba(214,69,65,.15);
  --rose-hover: rgba(214,69,65,0.16);
  --rose-wash: rgba(214,69,65,.08);
  --rose-10: rgba(214,69,65,.1);
  --rose-20: rgba(214,69,65,.2);
  --rose-70: rgba(214,69,65,.7);
  --green-70: rgba(95,163,111,.7);
  --away-border: rgba(224,160,48,.3);
  --amber: #E0A030;
  --blue-300: #4A9EDB;
  --blue-600: #4A9EDB;
  --info-badge: rgba(74,158,219,0.12);
  --info-border: rgba(74,158,219,0.3);
  --info-border-soft: rgba(74,158,219,0.25);
  --info-hover: rgba(74,158,219,.18);
  --info-wash: rgba(74,158,219,.1);
  --purple: #9B7EDE;
  --purple-600: #9B7EDE;
  --purple-800: #9B7EDE;

  /* Lines, borders, scrims */
  --border-faint:  rgba(246,234,224,.07);
  --border-wash:   rgba(246,234,224,.08);
  --border-haze:   rgba(246,234,224,.09);
  --border-lite:   rgba(246,234,224,.1);
  --border-strong: rgba(246,234,224,.12);
  --border-solid:  rgba(246,234,224,.12);
  --line-faint:    rgba(246,234,224,.05);
  --line-soft:     rgba(246,234,224,.06);
  --surface-hover: rgba(246,234,224,.04);
  --gray-200:      rgba(246,234,224,.12);
  --gray-300:      #6E6A62;
  --handle:        #3A3F3F;
  --dim:           rgba(0,0,0,.5);
  --dim-soft:      rgba(0,0,0,.45);
  --dim-mid:       rgba(0,0,0,.38);
  --dim-heavy:     rgba(0,0,0,.58);
  --scrim:         rgba(0,0,0,.6);
  --popover-solid: #2E3333;

  /* Effects */
  --focus-ring:     rgba(206,66,43,.15);
  --pulse-ring:     rgba(206,66,43,0.35);
  --pulse-ring-end: rgba(206,66,43,0);
  --grid-line:      rgba(206,66,43,0.04);
  --shadow-deep:    rgba(0,0,0,.5);
  --shadow-deeper:  rgba(0,0,0,.6);
  --shadow-lite:    rgba(246,234,224,.15);
  --shadow-strong:  rgba(0,0,0,.35);

  /* Shadows */
  --shadow-card:     0 2px 8px rgba(0,0,0,.35);
  --shadow-composer: 0 4px 16px rgba(0,0,0,.35);
  --shadow-btn:      0 2px 8px rgba(206,66,43,.35);
  --shadow-popover:  0 12px 40px rgba(0,0,0,.5);
  --shadow-modal:    0 24px 64px rgba(0,0,0,.6);

  /* RGB channels (Tailwind /opacity-modifier colors in base.html) */
  --bg-rgb: 30 32 32;
  --sidebar-rgb: 23 25 25;
  --border-rgb: 246 234 224;
  --accent-rgb: 206 66 43;
  --accent-bright-rgb: 232 87 60;
  --green-rgb: 95 163 111;
  --rose-rgb: 214 69 65;
  --rose-300-rgb: 224 101 91;
  --away-rgb: 224 160 48;
  --info-rgb: 74 158 219;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use the Sora display face */
h1, h2, h3 { font-family: var(--font-display); }

::selection { background: var(--accent-tint); color: var(--accent); }

/* Scrollbar (global + .custom-scrollbar variant) — 8px */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Sidebar (216px) ────────────────────────────────────────────────── */
#sidebar { background: var(--sidebar); }
.sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 500;
    color: var(--text-2);
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.sidebar-link svg { width: 16px; height: 16px; opacity: .75; flex-shrink: 0; }
.sidebar-link:hover {
    color: var(--text);
    background: var(--surface-hover);
}
.sidebar-active {
    color: var(--accent-deep) !important;
    background: var(--accent-tint) !important;
    font-weight: 600;
}
.sidebar-active svg { opacity: 1; }

/* Sidebar footer sync dot — 1.6s ease-in-out pulse */
@keyframes atelier-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sync-dot {
    width: 8px; height: 8px; border-radius: 9999px;
    background: var(--green);
    animation: atelier-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.cyber-card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease;
}
.cyber-card:hover { border-color: var(--accent-hover); }
.cyber-card-static {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}
/* Standard card pattern used across templates gets the theme card shadow */
.bg-surface-2.rounded-xl { box-shadow: var(--shadow-card); }

/* ── Popover shadows (legacy glow-* names kept) ─────────────────────── */
.glow-accent { box-shadow: var(--shadow-popover); }
.glow-blue { box-shadow: 0 12px 40px var(--info-badge); }
.glow-pink { box-shadow: 0 12px 40px var(--rose-badge); }
.glow-green { box-shadow: 0 12px 40px var(--green-badge); }
.glow-text { text-shadow: 0 1px 2px var(--accent-glow); }
.glow-box { box-shadow: var(--shadow-popover); }

/* ── Inputs ─────────────────────────────────────────────────────────── */
.cyber-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cyber-input:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.cyber-input::placeholder { color: var(--text-muted); }

.cyber-select {
    width: 100%;
    padding: 8px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    cursor: pointer;
}
.cyber-select:focus { border-color: var(--accent-bright); }

/* Pill filter controls (search pill / select pills on filter cards) */
.pill-input, .pill-select {
    padding: 8px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pill-input::placeholder { color: var(--text-muted); }
.pill-input:focus, .pill-select:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.pill-select { cursor: pointer; padding-right: 28px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-accent {
    padding: 8px 18px;
    background: var(--accent-grad);
    border: none;
    color: #ffffff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-display);
    box-shadow: var(--shadow-btn);
    cursor: pointer;
    transition: filter 0.15s ease;
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-blue {
    padding: 8px 16px;
    background: var(--info-tint);
    border: 1px solid var(--info-border);
    color: var(--info);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.btn-blue:hover { background: var(--info-hover); }

.btn-pink {
    padding: 8px 16px;
    background: var(--rose-tint);
    border: 1px solid var(--rose-border);
    color: var(--rose);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.btn-pink:hover { background: var(--rose-hover); }

.btn-green {
    padding: 8px 16px;
    background: var(--green-tint);
    border: 1px solid var(--green-border);
    color: var(--green);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.btn-green:hover { background: var(--green-hover); }

.btn-ghost {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-ghost:hover { border-color: var(--text-muted); color: var(--text); background: var(--surface-hover); }

.btn-sm { padding: 4px 10px; font-size: 11px; }

/* Accent action buttons across templates pair bg-brand-600 with dark text — force white */
.bg-brand-600 { color: #ffffff; }

/* ── Status badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-accent { background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-border); }
.badge-blue { background: var(--info-tint); color: var(--info); border: 1px solid var(--info-border-soft); }
.badge-green { background: var(--green-tint); color: var(--green); border: 1px solid var(--green-border-soft); }
.badge-pink { background: var(--rose-tint); color: var(--rose); border: 1px solid var(--rose-border-soft); }
.badge-gray { background: var(--elev); color: var(--text-2); border: 1px solid var(--border); }

/* ── Stat card (Sora KPI values) ────────────────────────────────────── */
.stat-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}
.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Grid background ────────────────────────────────────────────────── */
.grid-bg {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ── Table ──────────────────────────────────────────────────────────── */
.cyber-table { width: 100%; font-size: 13px; }
.cyber-table th {
    text-align: left; padding: 8px 12px;
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cyber-table td {
    padding: 8px 12px; border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
    white-space: nowrap;
}

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-out; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--pulse-ring); }
    50% { box-shadow: 0 0 0 8px var(--pulse-ring-end); }
}
.pulse-glow { animation: pulse-glow 3s infinite; }

/* ── Pipeline SVG styles (accent current / rose backward) ──────────── */
.pipeline-svg .stage-box {
    fill: var(--card);
    stroke: var(--border);
    stroke-width: 1.5;
}
.pipeline-svg .stage-box.current {
    fill: var(--accent-tint);
    stroke: var(--accent-bright);
    stroke-width: 2;
}
.pipeline-svg .stage-name {
    fill: var(--text-2);
    font-size: 11px;
    font-family: var(--font-body);
    font-weight: 500;
}
.pipeline-svg .stage-name.current {
    fill: var(--accent-deep);
    font-weight: 700;
}
.pipeline-svg .node-dot {
    fill: var(--gray-300);
    stroke: var(--text-muted);
    stroke-width: 2;
}
.pipeline-svg .node-dot.current {
    fill: var(--accent-bright);
    stroke: var(--accent);
    stroke-width: 2;
}
.pipeline-svg .duration-label {
    fill: var(--text-3);
    font-size: 10px;
    font-family: var(--font-mono);
}
.pipeline-svg .duration-label.backward {
    fill: var(--rose);
}
.pipeline-svg .date-label {
    fill: var(--text-muted);
    font-size: 10px;
    font-family: var(--font-mono);
    text-anchor: middle;
}

/* Pipeline container */
.pipeline-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 80vh;
}

/* Smooth transitions */
tr { transition: background-color 0.15s ease; }

/* ── Theme toggle (sidebar footer; icon set by inline script in base.html) ── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-hover); }
.theme-toggle svg { width: 16px; height: 16px; }