/* ============================================================================
   IndicesPro Monitor — Design System v1.1.0
   Inspiration : Linear, Stripe, Vercel.
   Palette neutre + accent indigo unique. Mode sombre natif.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Webfont (Inter Variable, embarqué local — DA-022)
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------------------------------------------------------------------------
   2. Design tokens (CSS variables)
   --------------------------------------------------------------------------- */
:root {
    /* === Couleurs sémantiques (mode clair par défaut) === */
    --bg-primary:    #ffffff;
    --bg-secondary:  #fafafa;
    --bg-tertiary:   #f4f4f5;
    --bg-elevated:   #ffffff;
    --bg-input:      #ffffff;
    --bg-code:       #f4f4f5;
    --bg-code-block: #18181b;
    --fg-code-block: #e4e4e7;

    --text-primary:   #18181b;
    --text-secondary: #52525b;
    --text-muted:     #a1a1aa;
    --text-on-accent: #ffffff;
    --text-link:      var(--accent);

    --border-subtle:   #e4e4e7;
    --border-default:  #d4d4d8;
    --border-strong:   #a1a1aa;

    /* Accent — indigo Linear-like — réservé à l'action et au focus */
    --accent:        #4f46e5;
    --accent-hover:  #4338ca;
    --accent-active: #3730a3;
    --accent-bg:     rgba(79, 70, 229, 0.08);
    --accent-border: rgba(79, 70, 229, 0.32);

    /* Couleur de données (graphique, valeurs numériques) — bleu froid neutre */
    --data:          #0284c7;
    --data-bg:       rgba(2, 132, 199, 0.08);
    --data-bg-grad:  rgba(2, 132, 199, 0.20);

    /* États */
    --success:    #16a34a;
    --success-bg: rgba(22, 163, 74, 0.08);
    --warning:    #d97706;
    --warning-bg: rgba(217, 119, 6, 0.08);
    --danger:     #dc2626;
    --danger-bg:  rgba(220, 38, 38, 0.08);
    --info:       #0284c7;
    --info-bg:    rgba(2, 132, 199, 0.08);

    /* === Typographie === */
    --font-sans: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;

    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;
    --fs-md:   14px;
    --fs-lg:   16px;
    --fs-xl:   20px;
    --fs-2xl:  24px;

    --lh-tight: 1.3;
    --lh-base:  1.5;

    /* === Espacement === */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* === Rayons === */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* === Transitions === */
    --t-fast:   100ms ease;
    --t:        150ms ease;
    --t-slow:   250ms ease;

    /* === Ombres === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.10);

    /* === Layout === */
    --header-height: 56px;
    --content-max:   1400px;
}

[data-theme="dark"] {
    --bg-primary:    #0a0a0a;
    --bg-secondary:  #141416;
    --bg-tertiary:   #1c1c1f;
    --bg-elevated:   #18181b;
    --bg-input:      #18181b;
    --bg-code:       #1c1c1f;
    --bg-code-block: #050507;
    --fg-code-block: #e4e4e7;

    --text-primary:   #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted:     #71717a;

    --border-subtle:  #27272a;
    --border-default: #3f3f46;
    --border-strong:  #52525b;

    --accent:        #818cf8;
    --accent-hover:  #a5b4fc;
    --accent-active: #6366f1;
    --accent-bg:     rgba(129, 140, 248, 0.12);
    --accent-border: rgba(129, 140, 248, 0.40);

    --data:          #38bdf8;
    --data-bg:       rgba(56, 189, 248, 0.12);
    --data-bg-grad:  rgba(56, 189, 248, 0.25);

    --success:    #4ade80;
    --success-bg: rgba(74, 222, 128, 0.12);
    --warning:    #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --danger:     #f87171;
    --danger-bg:  rgba(248, 113, 113, 0.12);
    --info:       #38bdf8;
    --info-bg:    rgba(56, 189, 248, 0.12);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------------
   3. Reset + base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
    margin: 0; padding: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
}
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    transition: background-color var(--t), color var(--t);
}

table, .num, .value, .kpi-value, code, .indice-meta-line, .data-table {
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3) 0;
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--space-3) 0; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--t);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, kbd, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
}
code {
    background: var(--bg-code);
    color: var(--text-primary);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
}
kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
pre {
    margin: 0;
    background: var(--bg-code-block);
    color: var(--fg-code-block);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    overflow: auto;
    line-height: var(--lh-base);
    font-size: var(--fs-sm);
}
hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-6) 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
button:focus, input:focus, select:focus, textarea:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
}

/* ---------------------------------------------------------------------------
   4. Header & layout
   --------------------------------------------------------------------------- */
.app-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .app-header {
    background: rgba(10, 10, 10, 0.85);
}
.app-header-inner {
    height: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex; align-items: center; gap: var(--space-6);
}
.app-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex; align-items: center; gap: var(--space-2);
}
.app-title-icon { font-size: 18px; }

.app-nav {
    flex: 1;
    display: flex; align-items: center; gap: var(--space-1);
    overflow-x: auto;
}
.app-nav-link {
    display: inline-flex; align-items: center;
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius);
    transition: background var(--t), color var(--t);
    white-space: nowrap;
}
.app-nav-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}
.app-nav-link.active {
    background: var(--accent-bg);
    color: var(--accent);
}

.theme-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    width: 32px; height: 32px;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: all var(--t);
}
.theme-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.app-main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}
.app-footer {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-6);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    display: flex; gap: var(--space-3); align-items: center;
}
.app-footer code { background: transparent; padding: 0; }

/* ---------------------------------------------------------------------------
   5. Sections génériques
   --------------------------------------------------------------------------- */
.section { margin-bottom: var(--space-8); }
.section:last-child { margin-bottom: 0; }
.section-title {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.section-desc {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    margin: 0 0 var(--space-4) 0;
}

.block {
    background: var(--bg-secondary);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.block:last-child { margin-bottom: 0; }
.block h2 {
    font-size: var(--fs-md);
    font-weight: 600;
    margin: 0 0 var(--space-3) 0;
}

.help, .hint { color: var(--text-muted); font-size: var(--fs-sm); }
.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info    { color: var(--info); }
.text-mono    { font-family: var(--font-mono); }
.num          { text-align: right; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-24 { margin-top: var(--space-6); }   /* compat */

/* ---------------------------------------------------------------------------
   6. Boutons
   --------------------------------------------------------------------------- */
.btn {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
    text-decoration: none;
}
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
}
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); }
.btn-danger {
    background: var(--danger); color: #fff; border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) { opacity: 0.9; color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--bg-tertiary); border-color: transparent; }
.btn-small { padding: 3px 8px; font-size: var(--fs-xs); }
.btn-large { padding: 8px 16px; font-size: var(--fs-md); }

.btn-link {
    background: transparent; border: none;
    color: var(--text-link);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: background var(--t), color var(--t);
}
.btn-link:hover:not(:disabled) {
    background: var(--accent-bg);
    text-decoration: none;
}
.btn-link.btn-danger { background: transparent; color: var(--danger); border: none; }
.btn-link.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }

/* ---------------------------------------------------------------------------
   7. Form controls
   --------------------------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="url"],
select, textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 6px 10px;
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.4;
    transition: border-color var(--t), box-shadow var(--t);
    width: 100%;
}
input::placeholder, textarea::placeholder {
    color: var(--text-muted); opacity: 1;
}
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M3 4.5l3 3 3-3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
    cursor: pointer;
}
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M3 4.5l3 3 3-3z'/%3E%3C/svg%3E");
}

label {
    display: inline-block;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 500;
    margin-bottom: 4px;
}

.search-input { width: 100%; padding: 8px 12px; font-size: var(--fs-base); }

/* ---------------------------------------------------------------------------
   8. Tableaux
   --------------------------------------------------------------------------- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    color: var(--text-primary);
}
.data-table th, .data-table td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.data-table thead th {
    position: sticky; top: 0;
    background: var(--bg-primary);
    z-index: 1;
    font-weight: 500;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:nth-child(even) { background: var(--bg-secondary); }
.data-table tbody tr:hover { background: var(--accent-bg); }
.data-table td.num { text-align: right; }
.data-table td code {
    background: transparent; padding: 0;
    font-size: 0.94em;
    color: var(--text-secondary);
}
.data-table tr.row-revised { background: var(--warning-bg) !important; }

.query-table-wrap {
    overflow-x: auto; overflow-y: auto;
    max-height: 70vh;
    border-radius: var(--radius);
    background: var(--bg-secondary);
}

/* ---------------------------------------------------------------------------
   9. Badges, chips
   --------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.6;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-muted   { background: var(--bg-tertiary); color: var(--text-secondary); }
.badge-accent  { background: var(--accent-bg);   color: var(--accent); }

.chip {
    display: inline-flex; align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 500;
    transition: background var(--t);
}
.chip-label { font-weight: 600; opacity: 0.8; }
.chip-remove {
    appearance: none; border: 0; background: transparent;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    color: inherit;
    font-size: 11px; line-height: 1;
    transition: background var(--t);
}
.chip-remove:hover { background: var(--accent-border); }

/* ---------------------------------------------------------------------------
   10. Alerts
   --------------------------------------------------------------------------- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border-left: 3px solid;
    margin-bottom: var(--space-3);
}
.alert strong { display: block; margin-bottom: var(--space-1); }
.alert p:last-child { margin-bottom: 0; }
.alert-success { background: var(--success-bg); border-color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger); }
.alert-info    { background: var(--info-bg);    border-color: var(--info); }

/* ---------------------------------------------------------------------------
   11. Modal
   --------------------------------------------------------------------------- */
.modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    padding: var(--space-4);
}
.modal.is-open { display: flex; }
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 15, 20, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-dialog {
    position: relative;
    background: var(--bg-elevated);
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    animation: modal-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-in {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 { margin: 0; font-size: var(--fs-md); }
.modal-close {
    appearance: none; border: 0; background: transparent;
    color: var(--text-muted);
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t), color var(--t);
}
.modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.modal-body { padding: var(--space-5); }
.modal-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    display: flex; justify-content: flex-end; gap: var(--space-2);
}
.modal-dialog.modal-danger { border-top: 3px solid var(--danger); }
.modal-dialog.modal-danger .modal-header h3 { color: var(--danger); }

.confirm-sql {
    background: var(--bg-code-block);
    color: var(--fg-code-block);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    max-height: 240px; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
}

.toast {
    position: fixed;
    bottom: var(--space-5); left: 50%; transform: translateX(-50%);
    padding: 10px 16px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 9998;
    opacity: 1;
    transition: opacity var(--t-slow);
}
.toast-success { border-left: 3px solid var(--success); }
.toast-fade { opacity: 0; }

/* ---------------------------------------------------------------------------
   12. Page Indices
   --------------------------------------------------------------------------- */
.indices-toolbar { margin-bottom: var(--space-5); }
.search-wrap input { font-size: var(--fs-md); padding: 10px 14px; }
.filter-row {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    align-items: end;
    margin-top: var(--space-4);
}
.filter-group { display: flex; flex-direction: column; min-width: 160px; }
.filter-actions { margin-left: auto; }

.filter-chips {
    margin-top: var(--space-3);
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 28px; align-items: center;
}

.presets-bar {
    display: flex; align-items: center; gap: 10px;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
}
.presets-label { color: var(--text-muted); font-weight: 500; }

.indices-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-5);
}
@media (max-width: 1024px) { .indices-layout { grid-template-columns: 1fr; } }

.sidebar {
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    height: fit-content;
    position: sticky;
    top: calc(var(--header-height) + var(--space-3));
}
.sidebar-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
    padding: 0 var(--space-2);
}

.tree { list-style: none; margin: 0; padding: 0; }
.tree-item { margin: 1px 0; }
.tree-toggle {
    appearance: none;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    display: flex; justify-content: space-between; align-items: center;
    transition: background var(--t-fast);
}
.tree-toggle:hover { background: var(--bg-tertiary); }
.tree-item.tree-active .tree-toggle {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 500;
}
.tree-name { font-family: var(--font-mono); font-size: var(--fs-sm); }
.tree-count {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0 6px;
    border-radius: 999px;
}
.tree-item.tree-active .tree-count {
    background: var(--accent-border);
    color: var(--accent);
}

.results-header { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.results-loading { padding: var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

.icon-btn,
a.icon-btn,
a.icon-btn:visited {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    appearance: none;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: 13px; line-height: 1;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.icon-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-default);
    color: var(--text-primary);
    text-decoration: none;
}
.actions-col, .actions-cell {
    text-align: right; white-space: nowrap; width: 90px;
}
.actions-cell { display: flex; gap: 4px; justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   13. Page Indice (fiche détail)
   --------------------------------------------------------------------------- */
.breadcrumb {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    display: flex; gap: var(--space-2); align-items: center;
}
.breadcrumb-sep { color: var(--text-muted); opacity: 0.4; }
.breadcrumb-current { color: var(--text-primary); }

.indice-header {
    display: flex; justify-content: space-between; align-items: start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.indice-title-block { flex: 1; min-width: 0; }
.indice-title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.indice-meta-line {
    display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.indice-idbank {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}
.indice-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.indice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.def-list {
    margin: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px var(--space-3);
}
.def-list dt {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 4px;
}
.def-list dd { margin: 0; padding: 2px 0; font-size: var(--fs-sm); }
.big-value {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--data);
    letter-spacing: -0.01em;
}

.chart-wrap {
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}
.chart-wrap canvas {
    width: 100% !important;
    height: 300px !important;
    max-height: 320px;
    display: block;
}
.chart-controls {
    display: flex; flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.chart-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
    color: var(--text-secondary);
    margin: 0;
}
.chart-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.chart-help { margin-left: auto; font-size: var(--fs-xs); }

/* ---------------------------------------------------------------------------
   14. Page Requête SQL
   --------------------------------------------------------------------------- */
.query-page {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-5);
}
@media (max-width: 1100px) { .query-page { grid-template-columns: 1fr; } }

.query-sidebar {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    height: fit-content;
    max-height: calc(100vh - var(--header-height) - var(--space-6));
    overflow-y: auto;
    position: sticky;
    top: calc(var(--header-height) + var(--space-3));
}
.lib-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-2);
}
.lib-toggle {
    display: flex; gap: 6px; align-items: center;
    padding: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    cursor: pointer; user-select: none;
    margin: 0;
}
.lib-divider {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-3) 0;
}

.lib-list { padding: var(--space-1) 0; }
.lib-group { margin-bottom: var(--space-3); }
.lib-group-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-2) 4px;
    font-weight: 600;
}
.lib-items { list-style: none; margin: 0; padding: 0; }
.lib-item {
    position: relative;
    display: flex; align-items: center;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast);
}
.lib-item:hover { background: var(--bg-tertiary); }
.lib-item.lib-active { background: var(--accent-bg); }
.lib-item.lib-active .lib-btn { color: var(--accent); font-weight: 500; }
.lib-item.lib-muted .lib-btn { opacity: 0.5; font-style: italic; }

.lib-btn {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 0;
    cursor: pointer;
    padding: 6px var(--space-2);
    text-align: left;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}
.lib-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-badge { color: var(--warning); font-size: 12px; flex-shrink: 0; }
.lib-params {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    font-family: var(--font-mono);
}
.lib-actions { display: none; gap: 1px; padding-right: 2px; }
.lib-item:hover .lib-actions { display: flex; }
.lib-action {
    appearance: none; border: 0; background: transparent;
    cursor: pointer;
    padding: 4px 5px;
    border-radius: var(--radius-sm);
    font-size: 13px; line-height: 1;
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.lib-action:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.lib-action.lib-action-danger:hover { background: var(--danger-bg); color: var(--danger); }

.lib-section { margin-top: var(--space-3); }
.lib-section-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: var(--space-2);
    font-weight: 600;
}
.preset-btn {
    appearance: none;
    display: block; width: 100%;
    text-align: left;
    background: transparent; border: 0;
    padding: 5px var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-family: inherit;
    line-height: 1.4;
    transition: background var(--t-fast), color var(--t-fast);
}
.preset-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.preset-list { list-style: none; margin: 0; padding: 0; }

.query-main { min-width: 0; }

.editor-header {
    display: flex; justify-content: space-between; align-items: start;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
    flex-wrap: wrap;
}
.editor-status .badge { font-size: var(--fs-xs); padding: 2px 8px; }
.editor-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.editor-meta code { font-size: 11px; }

.editor-meta-fields {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.meta-field { display: flex; flex-direction: column; }
.meta-field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.sql-editor {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: var(--space-3);
    background: var(--bg-code-block);
    color: var(--fg-code-block);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    resize: vertical;
    line-height: 1.55;
    tab-size: 2;
}
.sql-editor:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
    outline: none;
}

.params-panel {
    margin: var(--space-3) 0;
    padding: var(--space-4);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
}
.params-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
    flex-wrap: wrap;
}
.params-header h3 {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.param-row { display: flex; flex-direction: column; gap: 4px; }
.param-label { display: flex; flex-direction: column; gap: 0; }
.param-name {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    font-weight: 600;
}
.param-help { font-size: 11px; color: var(--text-muted); }
.param-input.param-missing {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 2px var(--danger-bg);
    animation: shake 0.4s;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.query-actions {
    display: flex; gap: var(--space-2); align-items: center;
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.query-meta {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.query-result-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
    flex-wrap: wrap;
}
.query-result-actions { display: flex; gap: var(--space-2); }
.query-cols-info {
    margin-bottom: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    display: flex; gap: 4px;
    flex-wrap: wrap; align-items: center;
}
.col-chip {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 4px 1px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    transition: background var(--t-fast);
}
.col-chip:hover { background: var(--border-subtle); }
.col-chip.col-hidden { opacity: 0.4; text-decoration: line-through; }
.col-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    font-size: 9px;
}

.query-pagination {
    display: flex; justify-content: space-between; align-items: center;
    margin: var(--space-3) 0;
    font-size: var(--fs-sm);
}
.query-pagination[hidden] { display: none; }
.pager { display: flex; align-items: center; gap: var(--space-2); }

.sql-result-table { background: var(--bg-elevated); }

/* ---------------------------------------------------------------------------
   15. Page Audit / KPIs
   --------------------------------------------------------------------------- */
.audit-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.kpi-card {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
}
.kpi-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: var(--space-1);
}
.kpi-value {
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Diagnostic — panel logs SQL */
details > summary {
    cursor: pointer;
    padding: var(--space-2) 0;
    font-weight: 500;
}
details > summary:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   16. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .app-main { padding: var(--space-4); }
    .filter-row { flex-direction: column; align-items: stretch; }
    .filter-group { min-width: 0; }
    .filter-actions { margin-left: 0; }
    .indice-header { flex-direction: column; }
    .indice-actions { width: 100%; }
    .def-list { grid-template-columns: 100px 1fr; }
    .editor-meta-fields { grid-template-columns: 1fr; }
    .params-grid { grid-template-columns: 1fr; }
    .editor-header { flex-direction: column; align-items: stretch; }
    .chart-help { margin-left: 0; }
    .chart-wrap canvas { height: 240px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Logs SQL — diagnostic */
.logs-sql {
    max-height: 400px;
    overflow: auto;
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.log-err  { color: #f87171; }
.log-slow { color: #fbbf24; }
.log-ok   { color: var(--text-muted); }
[data-theme="light"] .log-err  { color: #b91c1c; }
[data-theme="light"] .log-slow { color: #b45309; }

/* KPI grid (page overview, audit) — ajout v1.1.0 */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.kpi-detail {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.kpi-card.kpi-warning {
    background: var(--warning-bg);
}
.kpi-card.kpi-warning .kpi-value {
    color: var(--warning);
}

/* ============================================================================
   17. Compat — pages secondaires (audit, versions, export, patterns, coherence)
   Rend cohérent avec le design system ce qui n'a pas été refait individuellement.
   ============================================================================ */

/* Layout général : ce sont presque tous des "blocs" sur fond neutre */
.audit-event, .audit-stats-block, .audit-table-mini,
.cron-card, .version-card, .stat-card,
.health-block, .health-result, .config-meta, .diagnostic,
.tool-result, .backfill-result, .payload-preview,
.versions-form-grid, .wp-config-form,
.coverage-table, .titles-table, .obs-table, .info-table {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

/* Sous-tableaux : appliquer les styles data-table */
.audit-table-mini table, .obs-table, .titles-table, .info-table, .coverage-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
}
.audit-table-mini th, .audit-table-mini td,
.obs-table th, .obs-table td,
.titles-table th, .titles-table td,
.info-table th, .info-table td,
.coverage-table th, .coverage-table td {
    padding: 6px 10px;
    text-align: left;
    border: 0;
}
.audit-table-mini thead th, .obs-table thead th,
.titles-table thead th, .info-table thead th, .coverage-table thead th {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 500;
}

/* Headers dans les blocs spéciaux */
.cron-header, .version-header, .audit-event-head, .diag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/* Méta lignes (cron, version, etc.) */
.cron-meta, .version-dates, .audit-time,
.meta-help, .audit-source, .audit-record,
.bf-result-meta, .version-save-meta {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* IDs et codes */
.cron-id, .audit-field, .version-num, .audit-record code, .source-tag,
.token, .diag-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

/* Audit op badges (insert / update / delete) */
.audit-op {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 500;
    background: var(--bg-tertiary);
}
.audit-op-update { background: var(--info-bg); color: var(--info); }
.audit-op-insert { background: var(--success-bg); color: var(--success); }
.audit-op-delete { background: var(--danger-bg); color: var(--danger); }

/* Audit timeline */
.audit-timeline { display: flex; flex-direction: column; gap: var(--space-2); }
.audit-day-marker {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--space-3) 0 var(--space-1);
    font-weight: 600;
}
.audit-changes { margin-top: var(--space-2); }
.audit-change-line {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--fs-sm);
    padding: 2px 0;
}
.audit-arrow { color: var(--text-muted); }
.audit-old { color: var(--danger); text-decoration: line-through; opacity: 0.7; }
.audit-new { color: var(--success); font-weight: 500; }

/* Stats */
.stat-card { text-align: center; }
.stat-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: var(--space-1);
}
.stat-value {
    font-size: var(--fs-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Audit stats grid (déjà partiellement défini, on complète) */
.audit-stats-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: 4px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.audit-stats-row:last-child { border-bottom: 0; }

/* Coverage / progress bars (export, audit) */
.coverage-bar, .progress-bar {
    display: block;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
    min-width: 80px;
}
.coverage-bar-fill, .progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width var(--t);
}
.coverage-bar-cell { width: 120px; }
.progress-text {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Source filter tabs (logs page) */
.source-filter-tabs {
    display: flex;
    gap: var(--space-1);
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    overflow-x: auto;
}
.source-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    font: inherit;
    transition: background var(--t), color var(--t);
}
.source-tab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.source-tab.active { background: var(--accent); color: var(--text-on-accent); }

/* Token cloud (page patterns) */
.token-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}
.token-count {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 4px;
    opacity: 0.7;
}
.unused {
    opacity: 0.4;
    font-style: italic;
}

/* Versions */
.version-card { position: relative; }
.version-num { font-weight: 600; font-size: var(--fs-md); }
.version-stats {
    display: flex;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
}
.version-edit-btn, .version-save-btn, .version-cancel-btn {
    margin-left: var(--space-1);
}
.versions-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.versions-list { display: flex; flex-direction: column; gap: var(--space-2); }
.versions-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}
.version-display { display: flex; align-items: center; gap: var(--space-2); }
.version-edit { display: flex; flex-direction: column; gap: var(--space-2); }
.version-released-input,
.version-title-input,
.version-desc-input { font-size: var(--fs-sm); }
.version-desc-text { color: var(--text-secondary); margin-top: var(--space-2); }
.version-badge {
    font-size: var(--fs-xs);
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Export */
.export-mode { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.export-mode label {
    flex: 1;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t);
}
.export-mode label:has(input:checked) {
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1px var(--accent-border);
}
.export-mode input[type="radio"] { margin-right: var(--space-2); }
.export-options, .export-filters { margin-top: var(--space-3); }
.exec-actions, .exec-progress, .exec-log,
.tool-actions, .pattern-filters, .audit-filters,
.select-actions, .selection-list,
.backfill-builder, .backfill-controls,
.wp-config-actions, .opt-checkbox, .opt-sub,
.health-result, .info-grid {
    margin: var(--space-3) 0;
}
.info-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
}

/* Diag */
.diag-header { font-weight: 600; }
.diag-icon { font-size: 16px; margin-right: var(--space-1); }
.diag-step {
    display: flex; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    margin-bottom: var(--space-1);
}
.diag-step-name { font-weight: 500; flex: 1; }
.diag-detail { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.diag-message { color: var(--text-secondary); font-size: var(--fs-sm); }

/* Misc */
.checkbox { display: inline-flex; align-items: center; gap: var(--space-1); }
.inline-form { display: inline-flex; gap: var(--space-2); align-items: center; }
.title-cell { font-weight: 500; }
.count { color: var(--text-muted); font-size: var(--fs-xs); margin-left: 4px; }
.filter-select { width: 100%; }
.theme-toggle-icon { display: block; line-height: 1; }
.meta-field-wide { grid-column: span 1; }

/* Status helpers (wrapper texte) */
.ok       { color: var(--success); }
.warn     { color: var(--warning); }
.error    { color: var(--danger); }
.modal-danger { /* déjà défini plus haut, pas de redéfinition */ }

/* ============================================================================
   18. Nav dropdown (Outils ▾) + badge anomalies — v1.2.0
   ============================================================================ */

/* Le dropdown ne doit pas être tronqué par overflow:auto de la nav */
.app-nav { overflow: visible; }
.app-header { overflow: visible; }

/* Bouton trigger : aligné sur les .app-nav-link normaux mais avec un caret */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    /* hérite de .app-nav-link */
}
.nav-dropdown-caret {
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.6;
    transition: transform var(--t);
    display: inline-block;
}
.nav-dropdown.open .nav-dropdown-caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* Menu déroulant */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    display: none;
    z-index: 200;
    animation: dropdown-in 150ms ease;
}
@keyframes dropdown-in {
    from { transform: translateY(-4px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 8px 12px 4px;
    font-weight: 600;
}
.nav-dropdown-divider {
    border-top: 1px solid var(--border-subtle);
    margin: 4px 0;
}
.nav-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 12px;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--t-fast);
}
.nav-dropdown-item:hover {
    background: var(--bg-tertiary);
    text-decoration: none;
    color: var(--text-primary);
}
.nav-dropdown-item.is-active {
    background: var(--accent-bg);
    color: var(--accent);
}
.nav-dropdown-item.is-active .nav-dropdown-label {
    font-weight: 500;
}
.nav-dropdown-label {
    font-size: var(--fs-sm);
    line-height: 1.2;
}
.nav-dropdown-desc {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.2;
}
.nav-dropdown-item.is-active .nav-dropdown-desc {
    color: var(--accent);
    opacity: 0.7;
}

/* Badge sur Anomalies */
.nav-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.app-nav-link.active .nav-badge {
    background: var(--accent-bg);
    color: var(--accent);
}

/* ============================================================================
   19. Page État (v1.2.0) — KPI + cron timeline + alertes + plage + distribution
   ============================================================================ */

.etat-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}
@media (max-width: 1024px) {
    .etat-grid { grid-template-columns: 1fr; }
}

/* === Cron timeline === */
.cron-row {
    display: grid;
    grid-template-columns: 28px 80px 1fr auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
    transition: background var(--t-fast);
}
.cron-row:last-child { border-bottom: 0; }
.cron-row:hover { background: var(--bg-tertiary); }

.cron-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
}
.cron-status-dot.ok   { background: var(--success); }
.cron-status-dot.warn { background: var(--warning); }
.cron-status-dot.err  { background: var(--danger); }

.cron-id {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}
.cron-summary {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cron-summary code {
    background: transparent;
    padding: 0;
    font-size: 0.92em;
    color: var(--text-secondary);
}
.cron-time {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    white-space: nowrap;
}
.cron-stats {
    display: flex;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}
.cron-stats strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Responsive : sur petit écran, on simplifie l'affichage cron */
@media (max-width: 720px) {
    .cron-row {
        grid-template-columns: 16px 1fr auto;
        gap: var(--space-2);
    }
    .cron-id, .cron-stats { display: none; }
}

/* === Anomalie cards (utilisée aussi sur la page Anomalies) === */
.anomalie-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    background: var(--bg-secondary);
}
.anomalie-card:last-child { margin-bottom: 0; }
.anomalie-card.warning {
    background: var(--warning-bg);
    border-left: 3px solid var(--warning);
}
.anomalie-card.critical {
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
}
.anomalie-card.ok {
    background: var(--success-bg);
    border-left: 3px solid var(--success);
}

.anomalie-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.anomalie-head strong { font-size: var(--fs-md); }
.anomalie-count {
    font-size: var(--fs-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ============================================================================
   20. Page Anomalies (v1.2.0) — Reprise n8n mise en valeur + builder backfill
   ============================================================================ */

/* === Section Reprise (en haut, valorisée en accent) === */
.reprise-section {
    background: linear-gradient(135deg, var(--accent-bg), transparent 80%);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
}
.reprise-head {
    margin-bottom: var(--space-4);
}
.reprise-title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--fs-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.reprise-desc {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.reprise-desc code {
    background: var(--bg-elevated);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 0.9em;
}

/* === Backfill builder === */
.backfill-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.backfill-controls {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 720px) {
    .backfill-controls { grid-template-columns: 1fr; }
}

.bf-control-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: end;
}
.bf-control-group > .bf-checkbox {
    grid-column: 1 / -1;
}
.bf-control-group > .btn-primary {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--space-1);
}
@media (max-width: 720px) {
    .bf-control-group { grid-template-columns: 1fr; }
}

.bf-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;   /* override du label margin-bottom global */
}
.bf-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}
.bf-control select,
.bf-control input[type="text"],
.bf-control input[type="number"] {
    width: 100%;
}
.bf-control .help {
    font-size: 11px;
    color: var(--text-muted);
}

.bf-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.bf-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* === Résultat backfill (textarea + actions) === */
.backfill-result {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.bf-result-meta {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.bf-result-meta strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.backfill-result textarea {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background: var(--bg-code-block);
    color: var(--fg-code-block);
    border: 1px solid var(--border-subtle);
    padding: var(--space-2) var(--space-3);
    resize: vertical;
    line-height: 1.5;
    word-break: break-all;
}
.bf-result-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================================
   21. Accordéon obs par cron (v1.3.0) — page État
   ============================================================================ */

/* Wrapper qui contient row + panel */
.cron-entry {
    border-bottom: 1px solid var(--border-subtle);
}
.cron-entry:last-child {
    border-bottom: 0;
}

/* La row devient un bouton plein-largeur cliquable */
.cron-entry .cron-row {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-bottom: 0;   /* le border est sur le wrapper maintenant */
    /* la grille héritée de .cron-row (sect. 19) ajoute une colonne caret au bout */
    grid-template-columns: 28px 80px 1fr auto auto auto 20px;
}

.cron-entry .cron-row:hover {
    background: var(--bg-tertiary);
}
.cron-entry.open > .cron-row {
    background: var(--bg-tertiary);
}

.cron-caret {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform var(--t);
    line-height: 1;
}
.cron-entry.open .cron-caret {
    transform: rotate(180deg);
    color: var(--accent);
}

/* Panel accordéon */
.cron-panel {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    animation: cron-panel-in 200ms ease;
}
@keyframes cron-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.cron-panel-head {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}
.cron-panel-head strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cron-panel-loading {
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-align: center;
}
.cron-panel-empty p { margin: 0 0 var(--space-2) 0; }
.cron-panel-empty p:last-child { margin-bottom: 0; }

.cron-panel-table-wrap {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    overflow-x: auto;
    overflow-y: auto;
    max-height: 460px;
}
.cron-panel-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.cron-panel-table th {
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    z-index: 1;
}
.cron-panel-title {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}
.cron-panel-source {
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: nowrap;
}
.text-strike {
    text-decoration: line-through;
    opacity: 0.6;
    font-size: 0.9em;
}

/* ============================================================================
   22. Page Logs — accordéon par cron (v1.4.0)
   ============================================================================ */

/* Ligne principale cliquable */
tr.log-row {
    cursor: pointer;
    transition: background var(--t-fast);
}
tr.log-row:hover {
    background: var(--bg-tertiary);
}
tr.log-row.open {
    background: var(--bg-tertiary);
}
tr.log-row.open .cron-caret {
    transform: rotate(180deg);
    color: var(--accent);
}
tr.log-row .cron-caret {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform var(--t);
    display: inline-block;
    line-height: 1;
}
.log-caret-cell {
    text-align: center;
    width: 18px;
    padding-left: var(--space-2);
    padding-right: 0;
}

/* Ligne du panel (cellule unique avec colspan="11") */
tr.log-panel-row > td.log-panel-cell {
    padding: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}
tr.log-panel-row > td.log-panel-cell > .cron-panel {
    /* Le .cron-panel hérite des styles de la section 21 (padding, animation, etc.) */
    margin: 0;
    border-top: 1px solid var(--border-subtle);
}

/* Espacement réduit dans le panel pour s'intégrer au tableau */
tr.log-panel-row .cron-panel-table-wrap {
    max-height: 380px;   /* un peu moins que sur État pour ne pas dominer la page */
}

/* v1.4.1 — Bandeau info "fenêtre temporelle" dans panel accordéon */
.cron-panel-banner {
    background: var(--warning-bg);
    color: var(--warning);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-xs);
    margin-bottom: var(--space-3);
    border-left: 3px solid var(--warning);
    line-height: 1.5;
}
.cron-panel-banner code {
    background: rgba(0,0,0,0.05);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.95em;
}
[data-theme="dark"] .cron-panel-banner code {
    background: rgba(255,255,255,0.08);
}

/* ============================================================================
   23. Page login + menu user header (v1.5.0, DA-043)
   ============================================================================ */

.login-body {
    margin: 0;
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    padding: var(--space-4);
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-7) var(--space-6);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .login-card {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.4);
}

.login-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.login-logo-icon {
    font-size: 18px;
    color: var(--accent);
    line-height: 1;
}
.login-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.login-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.login-error {
    background: var(--danger-bg);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    border-left: 3px solid var(--danger);
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.login-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}
.login-field input[type="text"],
.login-field input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--fs-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    transition: border-color var(--t), background var(--t);
}
.login-field input[type="text"]:focus,
.login-field input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.login-remember input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.login-submit {
    width: 100%;
    padding: 10px 16px;
    font-size: var(--fs-md);
    font-weight: 600;
    margin-top: var(--space-2);
}

.login-footer {
    margin: var(--space-5) 0 0 0;
    text-align: center;
    font-size: var(--fs-xs);
}

/* === Menu user dans le header (v1.5.0) === */
.user-menu {
    margin-left: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid var(--border-subtle);
}
.user-menu-name {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.user-menu-logout {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
    text-decoration: none;
}
.user-menu-logout:hover {
    color: var(--danger);
    background: var(--danger-bg);
}