/* SimpleSL base app.css
   Ce fichier sert de point d'entrée CSS statique (pas de build Vite/Node).
   Ajouter/concaténer ici les règles essentielles ou importer d'autres fichiers via @import si besoin.
*/

/* --- Navigation (primary + submenu .smn) -------------------------------------------------- */
nav.mn .primary-nav { list-style:none; margin:0; padding:0; display:flex; gap:.75rem; align-items:center; }
nav.mn .primary-nav > li { position:relative; line-height:1; }
nav.mn .primary-nav > li > a { --_pad-y:.55rem; --_pad-x:.85rem; display:inline-block; padding:var(--_pad-y) var(--_pad-x); border-radius:8px; text-decoration:none; color:var(--fg-body); font-weight:500; background:linear-gradient(180deg, color-mix(in oklab,var(--bg-elevated) 92%, black 8%), var(--bg-elevated)); border:1px solid color-mix(in oklab,var(--border) 85%, transparent); box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset; transition:.18s background,.18s color,.18s border-color; }
nav.mn .primary-nav > li > a:hover { background:color-mix(in oklab,var(--accent) 18%, var(--bg-elevated)); color:var(--accent); }
nav.mn .primary-nav > li.active > a { background:color-mix(in oklab,var(--accent) 26%, var(--bg-elevated)); color:var(--accent); border-color:color-mix(in oklab,var(--accent) 45%, var(--border)); }
nav.mn .primary-nav > li > a:focus-visible { outline:2px solid color-mix(in oklab,var(--accent) 70%, transparent); outline-offset:2px; }
/* Submenu hidden by default (no layout shift); using visibility+opacity for smoother reveal */
nav.mn .primary-nav ul.smn { list-style:none; margin:0; padding:.5rem; position:absolute; top:calc(100% + .06rem); left:0; min-width:12rem; background:linear-gradient(180deg,var(--bg-elevated),color-mix(in oklab,var(--bg-elevated) 80%, black 20%)); border:1px solid color-mix(in oklab,var(--border) 70%, transparent); border-radius:10px; display:flex; flex-direction:column; gap:.2rem; box-shadow:0 4px 16px -4px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.4); z-index:60; visibility:hidden; opacity:0; transform:translateY(4px); transition:.18s opacity,.18s transform; pointer-events:none; }
nav.mn .primary-nav > li:hover > ul.smn,
nav.mn .primary-nav > li:focus-within > ul.smn { visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
nav.mn .primary-nav > li.open > ul.smn { visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
nav.mn .primary-nav ul.smn > li { position:relative; }
nav.mn .primary-nav ul.smn > li > a { display:block; padding:.5rem .65rem .55rem; border-radius:6px; text-decoration:none; font-size:.85rem; line-height:1.15; background:transparent; color:color-mix(in oklab,var(--fg-body) 92%, var(--accent) 8%); border:1px solid transparent; transition:.16s background,.16s color; }
nav.mn .primary-nav ul.smn > li > a:hover { background:color-mix(in oklab,var(--accent) 16%, transparent); color:var(--accent); }
nav.mn .primary-nav ul.smn > li.active > a { background:color-mix(in oklab,var(--accent) 26%, transparent); color:var(--accent); border-color:color-mix(in oklab,var(--accent) 40%, transparent); }
@media (max-width: 880px){ nav.mn .primary-nav { flex-wrap:wrap; } }


:root {
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bg-body: #0f1115;
    --fg-body: #f5f7fa84;
    --muted: #9aa4b2;
    --accent: #3b82f6;
--alert: #5f0612b7;
--adm_bright: #993010e3;
    --accent-contrast: #ffffff;
    --bg-surface: #151a22;
    --bg-elevated: #1d2732;
    --border: #243041;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    /* Semantic colors for alerts */
    --warn-bg: #3c2f0a;
    --warn-border: #9a7b28;
    --error-bg: #341316;
    --error-border: #6e2314;
}

/* Mode clair automatique selon les préférences système */
@media (prefers-color-scheme: light) {
    :root {
        --bg-body: #f7f9fc;
        --fg-body: #0a0c10;
        --muted: #4b5563;
        --accent: #2563eb;
        --accent-contrast: #ffffff;
        --bg-surface: #ffffff;
        --bg-elevated: #f3f6fb;
        --border: #d4dde8;
        --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
    }
}

/* DigiRelik brand palette integrated (no separate CSS needed) */
html[data-app="digirelik"] {
    --accent: #00e6ff;
    --accent-contrast: #061b1b;
    /* dark text on cyan */
    --bg-body: #0d0d0d;
    --bg-surface: #1a1a1a;
    --bg-elevated: #121619;
    /* slightly darker panels */
    --border: #203036;
    /* subtle teal-ish border */
}

/* Reset léger & accessibilité */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Aside tree menu minimal styles */
.mnl .ctx-nav details {
    margin: 0.25rem 0;
}

.mnl .ctx-nav summary {
    list-style: none;
    cursor: pointer;
}

.mnl .ctx-nav summary::-webkit-details-marker {
    display: none;
}

.mnl .ctx-nav summary::before {
    content: '▸';
    display: inline-block;
    width: 1em;
    margin-right: .25rem;
    transition: transform .15s ease-in-out;
}

.mnl .ctx-nav details[open] summary::before {
    transform: rotate(90deg);
}

.mnl .ctx-nav ul.ctx-list {
    padding-left: 0;
}

.mnl .ctx-nav ul.ctx-list.small {
    padding-left: 1.25rem;
}

.mnl .ctx-nav li[role="treeitem"] {
    margin: .125rem 0;
}

.mnl .ctx-nav a[aria-current="page"] {
    font-weight: 600;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;

}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in oklab, var(--accent) 30%, transparent);
}

body {
    font-family: var(--font-stack);
    margin: 0;
    background: var(--bg-body);
    color: var(--fg-body);
    line-height: 1.5;
}

/* Reduce global type scale: adjust base rem unit */
html {
    font-size: 15px;
}

/* Sticky layout baseline (tunable) */
:root {
    /* Approximate height of nav.mn including padding; adjust if theme changes */
    --sticky-nav: 56px;
}

header.hd,
nav.mn,
footer.ft {
    padding: .75rem 1rem;
}

.ctx-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: var(--space-3);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
}

.footer-links a:hover {
    text-decoration: underline;
}

header.hd {
    /* Keep header background and border consistent with theme; inherit default text size (1rem) */
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
}

.branding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brandmark {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.brandmark__logo {
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 1rem;
    background: color-mix(in oklab, var(--accent) 75%, black 25%);
    color: var(--accent-contrast);
    font-size: 1.1rem;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}

.brandmark__title {
    letter-spacing: .04em;
}

.brandmark__tagline {
    margin: 0;
    font-size: .95rem;
    color: var(--muted);
}

nav.mn {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000; /* stay above content and aside */
}

main.ct {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 1rem;
    padding: 1rem;
}

aside.mnl,
aside.mnr {
    background: var(--bg-elevated);
    padding: .75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    min-height: 200px;
}

/* Keep left aside visible while scrolling (desktop) */
@media (min-width: 901px) {
    aside.mnl {
        position: sticky;
        top: calc(var(--sticky-nav, 56px) + .5rem);
        align-self: start; /* prevent stretching in grid */
        overflow: auto; /* allow internal scroll if content exceeds viewport */
        max-height: calc(100vh - var(--sticky-nav, 56px) - 1rem);
    }
}

section#home h1 {
    margin-top: 0;
    font-size: 2rem;
}

.concepts ul {
    list-style: disc;
    margin-left: 1.25rem;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: color-mix(in oklab, var(--accent) 75%, white 25%);
}

/* Utilitaires */
.lead {
    font-size: 1.05rem;
    opacity: .9;
}

.muted,
.text-muted {
    color: var(--muted);
}

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mb-3 {
    margin-bottom: .9rem;
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.gap-2 {
    gap: .5rem;
}

.p-5 {
    padding: 1.25rem 1.5rem;
}

/* Flash container — collapse when empty */
#flash:empty {
    display: none;
}
#flash {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    max-width: min(420px, 90vw);
    display: grid;
    gap: .5rem;
}
#flash .alert { box-shadow: var(--shadow); }

/* --- Contextual Admin Panels (ctx-*) --- */
.ctx-nav .ctx-list,
.ctx-sub-list,
.ctx-shortcuts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ctx-sub-list li {
    margin: 0 0 .25rem;
}

.ctx-sub-link {
    display: inline-block;
    padding: .15rem .35rem;
    border-radius: 3px;
    font-size: .8rem;
}

.ctx-sub-link.active {
    background: var(--accent);
    color: var(--accent-contrast);
    text-decoration: none;
}

.ctx-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ctx-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: .75rem .9rem;
    border-radius: 6px;
    box-shadow: var(--shadow, none);
}

.ctx-block-title {
    margin: 0 0 .5rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    opacity: .75;
    text-transform: uppercase;
}

.ctx-shortcuts li {
    margin: 0 0 .25rem;
    font-size: .75rem;
}

.ctx-shortcuts a {
    color: var(--accent);
}

.ctx-shortcuts a:hover {
    text-decoration: underline;
}

.ctx-table {
    width: 100%;
    border-collapse: collapse;
}

.ctx-table th,
.ctx-table td {
    padding: .25rem .4rem;
    font-size: .65rem;
    border-bottom: 1px solid var(--border);
}

.ctx-table th {
    text-align: left;
    font-weight: 600;
    opacity: .8;
}

.ctx-table .badge {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 2px;
    font-size: .6rem;
    background: #666;
    color: #fff;
}

.ctx-table .badge.on {
    background: #15803d;
}

.ctx-table .badge.off {
    background: #b91c1c;
}

.ctx-frag .muted {
    opacity: .7;
}

/* subtle timestamp label for panels */
.last-updated {
    opacity: .8;
}

.h1-compact {
    margin: 0 0 .5rem;
}

.row-center {
    display: flex;
    align-items: center;
}

.lbl {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}

.lbl-inline {
    margin: 0;
    font-weight: 500;
}

.container-narrow {
    max-width: 640px;
    margin: 0 auto;
}

.form-elevated {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* local hint box */
.hint.local-hint {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    padding: .5rem .75rem;
    border-radius: 4px;
}

.mb-2 {
    margin-bottom: var(--space-2);
}

/* .mb-4 defined below in utilities; avoid duplicate */

.p-2 {
    padding: var(--space-2);
}

.p-4 {
    padding: var(--space-4);
}

/* Contenu principal et sections */
.ct section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-6);
    display: block;
    width: 100%;
}

/* When using in-page anchors, avoid sticky nav overlap */
.ct section[id] { scroll-margin-top: calc(var(--sticky-nav, 56px) + .5rem); }

.ct section h1,
.ct section h2,
.ct section h3 {
    margin-top: 0;
}

/* Navigation principale & sous-menu SimpleSL */
.mn ul,
.mn ol,
ul.mn,
ol.mn {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: .5rem;
    align-items: center;
}

.mn li {
    position: relative;
}

.mn a {
    display: block;
    padding: .5rem .75rem;
    border-radius: .5rem;
}

/* Indicateur pour items avec sous-menu (top-level uniquement) */
.mn > ul > li:has(> .smn) > a::after,
ul.mn > li:has(> .smn) > a::after {
    content: '▾';
    margin-left: .35rem;
    font-size: .85em;
    opacity: .8;
}

/* Hover/focus sur top-level items seulement */
.mn > ul > li:hover > a,
.mn > ul > li:focus-within > a,
ul.mn > li:hover > a,
ul.mn > li:focus-within > a {
    background: color-mix(in oklab, var(--accent) 12%, transparent);
}

.mn li.active>a,
.mn a[aria-current="page"] {
    background: color-mix(in oklab, var(--accent) 20%, transparent);
    color: var(--accent-contrast);
}

/* Sous-menu (dropdown) */
.mn .smn {
    list-style: none;
    padding: .35rem;
    margin: 0;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    display: none;
    flex-direction: column;
    gap: .15rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: .6rem;
    box-shadow: var(--shadow);
    z-index: 60;
}

/* Afficher dropdown pour top-level uniquement */
.mn > ul > li:hover > .smn,
.mn > ul > li:focus-within > .smn,
ul.mn > li:hover > .smn,
ul.mn > li:focus-within > .smn {
    display: flex;
}

.mn .smn a {
    font-size: 1rem;
    /* revert to previous base size */
    opacity: .95;
    padding: .45rem .6rem;
}

.mn .smn a:hover,
.mn .smn a:focus-visible {
    background: color-mix(in oklab, var(--accent) 14%, transparent);
    text-decoration: none;
}

/* Sections (troisième niveau) à l'intérieur du dropdown: pas de flyout, layout statique */
.mn .smn .smn {
    position: static;
    left: auto;
    top: auto;
    min-width: unset;
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
    margin-top: .25rem;
}

.mn .smn .smn li {
    margin: 0;
}

.mn .smn .smn a {
    font-size: .95rem;
    padding: .3rem .5rem;
    opacity: .9;
}

/* Composants */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--shadow);
}

.card-hero {
    padding: var(--space-6);
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, transparent), var(--bg-surface));
    border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border) 70%);
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ctx-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}

.ctx-metrics dl {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
    margin: 0;
}

.ctx-metrics dt {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: .25rem;
}

.ctx-metrics dd {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg-body);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .02s ease;
}

.btn:hover {
    background: color-mix(in oklab, var(--bg-elevated) 85%, var(--accent) 15%);
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: color-mix(in oklab, var(--accent) 60%, black 40%);
}

.btn-primary:hover {
    background: color-mix(in oklab, var(--accent) 85%, white 15%);
}

.btn-outline {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

/* semantic button aliases (backwards-compatible) */
.btn.secondary {
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.btn.secondary:hover { background: color-mix(in oklab, var(--accent) 20%, transparent); }

.btn.ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--fg-body);
}
.btn.ghost:hover { background: color-mix(in oklab, var(--bg-elevated) 85%, var(--accent) 15%); }

/* tiny variant for anchor nav links */
.small-anchor {
    padding: .35rem .6rem;
    font-size: .9rem;
}

/* active state for anchor toolbar buttons */
.toolbar .btn.active,
.btn-outline.active,
.small-anchor.active {
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: color-mix(in oklab, var(--accent) 60%, black 40%);
    text-decoration: none;
}

.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 25%, transparent);
    color: var(--accent-contrast);
    font-size: .75rem;
}

/* Simple row helpers */
.row {
    display: flex;
    align-items: center;
}

.row-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-end {
    justify-content: flex-end;
}

/* flex grow utility for spacers */
.flex-1 {
    flex: 1 1 auto;
}

/* Standard toolbar (nav rows, quick actions) */
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Grid panels wrapper for admin system */
.grid-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

.panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 80px;
}

/* Formulaires */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    background: var(--bg-elevated);
    color: var(--fg-body);
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .5rem .75rem;
}

/* Improve focus styles for form controls (brand aware) */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Placeholder legibility on both dark/light */
::placeholder {
    color: color-mix(in oklab, var(--muted) 85%, transparent);
}

/* Baseline buttons (for raw <button> and <input type=submit|button|reset>) */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background: var(--bg-elevated);
    color: var(--fg-body);
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .5rem .9rem;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background: color-mix(in oklab, var(--bg-elevated) 85%, var(--accent) 15%);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
    transform: translateY(1px);
}

button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled] {
    opacity: .6;
    cursor: not-allowed;
}

/* Checkbox & radio use theme accent color */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

label {
    display: inline-block;
    margin-bottom: .25rem;
}

.form-row {
    display: grid;
    gap: .75rem;
}

/* Tableaux */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: .5rem .75rem;
    border: 1px solid var(--border);
}

.table thead th {
    background: var(--bg-elevated);
    text-align: left;
    color: var(--accent);
}

.table tbody tr:nth-child(odd) {
    background: color-mix(in oklab, var(--bg-surface) 80%, black 20%);
}

/* Admin tables polish (SimpleSL-aligned) */
.table-responsive {
    overflow: auto;
    max-width: 100%;
}

.table th,
.table td {
    vertical-align: middle;
}

/* Sticky header inside scroll container */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* ensure header remains opaque when sticky */
    background: var(--bg-elevated);
}

/* Header sort links inherit color and keep subtle underline on hover */
.table thead th a {
    color: inherit;
    text-decoration: none;
}

.table thead th a:hover {
    text-decoration: underline;
}

/* Actions column should not wrap to keep row height compact */
body.admin-scope .table td:last-child {
    white-space: nowrap;
}

/* Buttons inside tables: slightly denser */
.table td .btn,
.table td button,
.table td a.btn {
    padding: .35rem .6rem;
    font-size: .85rem;
    border-radius: .4rem;
}

/* Row hover to improve scanability */
.table tbody tr:hover {
    background: color-mix(in oklab, var(--bg-surface) 70%, black 30%);
}

/* Compact table variant for tight spaces (aside, mini panels) */
.tbl {
    width: 100%;
    border-collapse: collapse;
}

.tbl th,
.tbl td {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.tbl thead th {
    background: var(--bg-elevated);
    color: var(--accent);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Smaller density when .tbl-compact is present */
.tbl.tbl-compact th,
.tbl.tbl-compact td {
    padding: .2rem .35rem;
    font-size: .8rem;
}

.tbl.tbl-compact .btn,
.tbl.tbl-compact button,
.tbl.tbl-compact a.btn {
    padding: .2rem .4rem;
    font-size: .75rem;
    border-radius: .4rem;
}

.tbl tr:nth-child(odd) {
    background: color-mix(in oklab, var(--bg-surface) 85%, black 15%);
}

/* Subtle row hover for .tbl */
.tbl tbody tr:hover {
    background: color-mix(in oklab, var(--bg-surface) 75%, black 25%);
}

/* Header sort links inside .tbl */
.tbl thead th a {
    color: inherit;
    text-decoration: none;
}

.tbl thead th a:hover {
    text-decoration: underline;
}

/* Actions column nowrap for admin scope (.tbl variant) */
body.admin-scope .tbl td:last-child {
    white-space: nowrap;
}

/* Button variants used in Users table */
.btn.compact {
    padding: .35rem .6rem;
    font-size: .85rem;
    border-radius: .4rem;
}

.btn.danger {
    background: #7f1d1d;
    color: #fff;
    border-color: #b91c1c;
}

.btn.compact.danger {
    padding: .3rem .55rem;
}

/* Badge success/danger used in tables */
.badge.success {
    background: #15803d;
    color: #fff;
}

.badge.danger {
    background: #b91c1c;
    color: #fff;
}

/* Fragment card status variants */
.badge.ok { background:#166534; color:#fff; }
.badge.missing-in-views { background:#7f1d1d; color:#fff; }
.badge.missing-in-index { background:#1d4ed8; color:#fff; }
.badge.partial { background:#92400e; color:#fff; }

/* Alertes */
.alert {
    padding: .75rem 1rem;
    border-radius: .6rem;
    border: 1px solid var(--border);
}

.alert-info {
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    border-color: color-mix(in oklab, var(--accent) 45%, var(--border) 55%);
}

/* success variant (distinct from info) */
.alert-success {
    background: color-mix(in oklab, #16a34a 22%, transparent);
    border-color: color-mix(in oklab, #16a34a 55%, var(--border) 45%);
}

.alert-warn {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}

.alert-error {
    background: var(--error-bg);
    border-color: var(--error-border);
}

/* Lightweight loading placeholder shown before HTMX swap */
.loading-placeholder {
    background: color-mix(in oklab, var(--bg-surface) 70%, black 30%);
    border: 1px dashed var(--border);
    border-radius: .4rem;
    padding: .35rem .5rem;
    margin: .35rem 0;
    opacity: .85;
}

/* --- SimpleSL section-scoped rules for Admin > System --- */
.ct section#admin-system header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.ct section#admin-system h1 {
    margin: 0 0 .5rem 0;
}

.ct section#admin-system header nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ct section#admin-system header nav button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}

.ct section#admin-system header nav button:hover {
    background: color-mix(in oklab, var(--bg-elevated) 85%, var(--accent) 15%);
}

.ct section#admin-system #panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

.ct section#admin-system #panels>div {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 80px;
}

/* --- SimpleSL section-scoped rules for Admin > Monitoring and Dashboard --- */
.ct section#admin-monitoring header,
.ct section#admin-dashboard header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.ct section#admin-monitoring h1,
.ct section#admin-dashboard h1 {
    margin: 0 0 .5rem 0;
}

.ct section#admin-monitoring header nav,
.ct section#admin-dashboard header nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ct section#admin-monitoring header nav button,
.ct section#admin-dashboard header nav button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}

.ct section#admin-monitoring header nav button:hover,
.ct section#admin-dashboard header nav button:hover {
    background: color-mix(in oklab, var(--bg-elevated) 85%, var(--accent) 15%);
}

.ct section#admin-monitoring #panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

.ct section#admin-monitoring #panels>div,
.ct section#admin-monitoring #matrix-output {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 80px;
}

.ct section#admin-monitoring #matrix-output {
    margin-top: 1rem;
}

/* Admin Monitoring: KPI ETag styles */
.ct section#admin-monitoring #kpi-etag {
    padding: .5rem .75rem;
}

.ct section#admin-monitoring #kpi-etag .kpi-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

.ct section#admin-monitoring #kpi-etag .badge {
    padding: .25rem .5rem;
    border-radius: .375rem;
    border: 1px solid var(--border);
}

.ct section#admin-monitoring #kpi-etag .badge--hits {
    background: #e6f4ea;
    color: #1e7e34;
    border-color: #b7dfc7;
}

.ct section#admin-monitoring #kpi-etag .badge--misses {
    background: #fde8e8;
    color: #c53030;
    border-color: #f6b3b3;
}

.ct section#admin-monitoring #kpi-etag .badge--total {
    background: #eef2ff;
    color: #3730a3;
    border-color: #c7d2fe;
}

/* Aside submenu polish (left menu) */
aside.mnl nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .25rem;
}

aside.mnl nav li a {
    display: block;
    padding: .35rem .5rem;
    border-radius: .375rem;
    color: inherit;
    text-decoration: none;
}

aside.mnl nav li a[aria-current="page"],
aside.mnl nav li a:hover {
    background: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* HTMX états */
.htmx-indicator {
    display: none;
}

/* Avoid globally showing all indicators when htmx adds .htmx-request on <body> */
body.htmx-request .htmx-indicator {
    display: none;
}

/* Show indicators when their nearest requesting ancestor (not body) is loading */
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
    display: inline-block;
}

/* Force show when non-body requester is active, even if body also has .htmx-request */
:not(body).htmx-request .htmx-indicator {
    display: inline-flex;
    align-items: center;
}

.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* Réactivité */
@media (max-width: 1200px) {
    main.ct {
        grid-template-columns: 200px 1fr 200px;
    }
}

@media (max-width: 1024px) {
    main.ct {
        grid-template-columns: 1fr 260px;
        grid-template-areas: 'main mnr';
    }

    aside.mnl {
        display: none;
    }
}

@media (max-width: 768px) {
    main.ct {
        grid-template-columns: 1fr;
    }

    aside.mnr {
        display: none;
    }

    .mn ul,
    .mn ol,
    ul.mn,
    ol.mn {
        flex-wrap: wrap;
    }
}

/* --- Global utilities and components (SimpleSL-aligned) --- */
.inline {
    display: inline;
}

.flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-row.wrap {
    flex-wrap: wrap;
}

.flex-row.align-center {
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-xs {
    gap: .25rem;
}

.gap-sm {
    gap: .5rem;
}

.gap-md {
    gap: .75rem;
}

.gap-lg {
    gap: 1rem;
}

.wrap {
    flex-wrap: wrap;
}

.align-start {
    align-items: start;
}

.mt-1 {
    margin-top: .25rem;
}


.ml-1 {
    margin-left: 1rem;
}

.tight {
    margin: 0;
}



.label-upper {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-lg {
    font-size: 1.4rem;
    font-weight: 600;
}

.min-line {
    min-height: 1.2rem;
}

.list-plain {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* grid helpers */
.grid {
    display: grid;
}

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/* simple 1fr 2fr two-column grid */
.grid-1-2 {
    grid-template-columns: 1fr 2fr;
}

.grid-min-120 {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.grid-min-180 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.grid-min-280 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-min-320 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* simple fixed-count grid helpers */
.grid-1 {
    grid-template-columns: 1fr;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.align-end {
    align-items: end;
}

.w-6rem {
    width: 6rem;
}

/* Ensure narrow inputs don't expand to 100% when utility width is set */
input.w-6rem {
    width: 6rem;
}

/* Optional compact input height (can be applied if fields look too tall in tables/forms) */
.input-compact {
    padding: .35rem .5rem;
    border-radius: .5rem;
}

/* cards */
.card--elevated {
    background: var(--bg-elevated);
}

.card--pad-md {
    padding: .75rem;
}

.card--compact {
    padding: .5rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
}

/* multi-column helper */
.cols-2 {
    columns: 2;
}

/* modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 50;
}

.modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 51;
    padding: 1rem;
}

.modal-card {
    background: var(--bg-surface);
    color: var(--fg-body);
    max-width: min(960px, 95vw);
    max-height: 90vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: .5rem;
    box-shadow: var(--shadow);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.modal-close {
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    padding: .25rem;
    cursor: pointer;
}

.modal-body {
    padding: .75rem;
}

/* pre formatting for matrix */
.pre-scroll {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow: auto;
}

/* code pane for logs/json dumps */
.code-pane {
    background: #0b1021;
    color: #e3e7ff;
    padding: .5rem;
    border-radius: .25rem;
}

/* zero margin utility */
.m-0 {
    margin: 0;
}

/* max-height helpers */
.mh-50vh {
    max-height: 50vh;
}

/* Probes grid and summary grid */
.probes-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* soft hr */
hr.soft {
    border-color: var(--border);
    opacity: .4;
}

/* in-page toggle panels */
[hidden] {
    display: none !important;
}

/* --- Extra utilities (post base) --- */
/* padding-left utility */
.pl-4 {
    padding-left: var(--space-4);
}

/* pill chip */
.pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}

/* full grid span helper */
.span-all {
    grid-column: 1 / -1;
}