/* =========================================================================
   Design system Modal Group - Composants standardises
   =========================================================================
   Charge APRES style.css pour override les anciens composants par les
   nouveaux. Approche: on garde les selectors existants (.btn, .card,
   .badge, etc.) mais on les redefinit avec les tokens du design-tokens.css.

   Inspire du livraisons design dans C:/repo/_Ressources/styles.css.
   Big bang refonte etape 2/9. Le HTML reste inchange dans cette etape:
   les anciens markups utilisent automatiquement les nouveaux styles.

   Ordre de chargement (cf app_start.php):
   1. design-tokens.css   (variables CSS, themes, densites)
   2. style.css           (legacy, encore necessaire pour les regles non-migrees)
   3. design-system.css   (nouveau, override les composants standard)
   ========================================================================= */

/* ============== Body refonte (override style.css legacy) =================
   style.css legacy contient:
     body { background: radial-gradient(...); font-family: "Trebuchet MS",...; }
   On override ici pour utiliser les tokens du theme. C'est le changement le
   plus visible: l'arriere-plan et la police de TOUTES les pages basculent
   sur le theme courant. */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Page de login: garde le centrage flex existant + utilise bg theme */
.login-body {
    background: var(--bg);
}

/* ============== Sidebar refondue (etape 3) ==============================
   Refonte CSS sans changer le HTML existant. Mapping vers le design cible:
   .brand            -> sidebar-head
   .brand-logo       -> sidebar-logo (avec gradient accent diagonal)
   .brand-title      -> sidebar-title b
   .brand-sub        -> sidebar-title span
   .nav-link         -> nav-item
   .nav-link.active  -> nav-item.active
   .nav-config       -> nav-group (details/summary)
   .nav-config-items -> wrapper enfants
   .nav-config-item  -> nav-item.sub
   .sidebar-footer   -> sidebar-foot
*/

.app-shell {
    grid-template-columns: var(--sidebar-w) 1fr;
    background: var(--bg);
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    color: var(--text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* En-tete sidebar (brand) */
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border-bottom: 1px solid var(--border-soft);
    min-height: var(--header-h);
    background: var(--surface);
}
.sidebar .brand-logo {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primary-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
}
.sidebar .brand-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 50%, var(--accent) 50% 60%, transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}
.sidebar .brand-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.2;
}
.sidebar .brand-sub {
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.3;
}

.sidebar-toggle {
    margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-3);
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
}
.sidebar-toggle:hover {
    background: var(--surface-3);
    color: var(--text);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Nav */
.sidebar .nav {
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    white-space: nowrap;
    width: 100%;
    text-decoration: none;
    transition: background .12s, color .12s;
    line-height: 1.4;
    cursor: pointer;
}
.sidebar .nav-link:hover {
    background: var(--surface-3);
    color: var(--text);
}
.sidebar .nav-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}
.theme-dark .sidebar .nav-link.active {
    color: var(--primary-2);
}

/* Groupes repliables (details/summary) */
.sidebar .nav-config {
    margin: 0;
    padding: 0;
}
.sidebar .nav-config-summary {
    cursor: pointer;
    list-style: none;
    position: relative;
}
.sidebar .nav-config-summary::-webkit-details-marker { display: none; }
.sidebar .nav-config-summary::after {
    content: "›";
    margin-left: auto;
    font-size: 16px;
    opacity: 0.6;
    transition: transform .18s ease;
    transform: rotate(0deg);
    line-height: 1;
}
.sidebar .nav-config[open] > .nav-config-summary::after {
    transform: rotate(90deg);
}
.sidebar .nav-config-icon {
    font-size: 16px;
    opacity: 0.85;
    line-height: 1;
}
.sidebar .nav-config-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px 0;
}
.sidebar .nav-config-item,
.sidebar a.nav-link.nav-config-item {
    padding-left: 36px;
    font-size: 13px;
    color: var(--text-3);
}
.sidebar .nav-config-item.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

/* Footer sidebar */
.sidebar-footer {
    border-top: 1px solid var(--border-soft);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
}

/* Toggle Options CMDB */
.sidebar-advanced-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--surface-3);
    border: none;
    border-radius: var(--r-md);
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
}
.sidebar-advanced-switch:hover { color: var(--text); }
.sidebar-advanced-switch-track {
    width: 32px;
    height: 18px;
    background: var(--border-strong);
    border-radius: 999px;
    position: relative;
    transition: background .18s;
    display: inline-block;
    flex-shrink: 0;
}
.sidebar-advanced-switch[aria-pressed="true"] .sidebar-advanced-switch-track {
    background: var(--success);
}
.sidebar-advanced-switch-thumb {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    transition: left .18s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.sidebar-advanced-switch[aria-pressed="true"] .sidebar-advanced-switch-thumb {
    left: 16px;
}

/* Selecteur de langue (locale) */
.sidebar .locale-form {
    margin: 0;
}
.sidebar .locale-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 4px 8px;
    transition: border-color .15s;
}
.sidebar .locale-select-wrap:focus-within { border-color: var(--primary); }
.sidebar .locale-select-wrap select {
    background: transparent;
    border: none;
    outline: none;
    padding: 2px 0;
    font-size: 12.5px;
    color: var(--text);
    flex: 1;
    font-family: inherit;
}
.sidebar .locale-flag {
    width: 18px;
    height: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--border);
    flex-shrink: 0;
}

/* Ligne utilisateur */
.sidebar .user-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
}
.sidebar .user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.sidebar .user-role {
    font-size: 11.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Bouton deconnexion */
.sidebar-footer .btn-full {
    width: 100%;
    justify-content: center;
}

/* ============== Topbar (header central avec brand + trigger sidebar) =====
   La topbar contient le logo + titre + un bouton qui replie/deplie la
   sidebar. Sticky en haut du main-content. */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    flex-shrink: 0;
}

.topbar-sidebar-trigger {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    color: var(--text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    flex-shrink: 0;
}
.topbar-sidebar-trigger:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border-strong);
}
.topbar-sidebar-trigger-icon {
    transition: transform .18s ease;
}
body.app-sidebar-collapsed .topbar-sidebar-trigger-icon {
    transform: rotate(180deg);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.topbar-brand:hover { text-decoration: none; }
.topbar-brand .brand-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primary-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
}
.topbar-brand .brand-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 50%, var(--accent) 50% 60%, transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}
.topbar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.topbar-brand-text b {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.topbar-brand-text span {
    font-size: 11.5px;
    color: var(--text-3);
}

.topbar-spacer { flex: 1; min-width: 16px; }

/* Breadcrumbs (fil d'Ariane) dans la topbar */
.topbar-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    padding: 0 8px;
    border-left: 1px solid var(--border-soft);
    margin-left: 4px;
}
.topbar-crumbs b {
    color: var(--text);
    font-weight: 600;
}
.topbar-crumbs-sep {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
}

/* Search globale dans la topbar */
.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-3);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 6px 10px;
    width: 320px;
    max-width: 40vw;
    transition: border-color .15s, background .15s;
    margin: 0;
    flex-shrink: 0;
}
.topbar-search:focus-within {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.topbar-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
    min-width: 0;
}
.topbar-search input::placeholder {
    color: var(--text-muted);
}
.topbar-search-shortcut {
    font-size: 10.5px;
    padding: 2px 5px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 4px;
    color: var(--text-3);
    font-family: var(--font-mono);
    flex-shrink: 0;
    line-height: 1.2;
}
.topbar-search:focus-within .topbar-search-shortcut {
    display: none;
}

/* Responsive: sur petit ecran on cache les breadcrumbs, la search devient
   plus compacte (icone seulement). */
@media (max-width: 900px) {
    .topbar-crumbs { display: none; }
    .topbar-search { width: 220px; }
}
@media (max-width: 640px) {
    .topbar-brand-text { display: none; }
    .topbar-search-shortcut { display: none; }
    .topbar-search { width: auto; min-width: 40px; }
}

/* La sidebar n'a plus son brand interne, on masque la version compacte
   (qui ne contient plus que le bouton mobile sidebar-toggle) sur desktop */
.sidebar .brand-compact {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-soft);
    min-height: 0;
}
.sidebar .brand-compact .sidebar-toggle {
    margin: 0;
    width: 100%;
    justify-content: center;
}
/* En desktop normal, on masque carrement le brand-compact (le burger
   est dans la topbar). On le garde affiche en mobile (media query). */
@media (min-width: 769px) {
    .sidebar .brand-compact { display: none; }
}

/* ============== Sidebar applicative repliable (refonte propre) ==========
   Approche: sidebar collapsed = 0px (disparait totalement, slide-out).
   Le main-content prend toute la largeur. La sidebar est reaccessible
   via le bouton .topbar-sidebar-trigger. */

/* Layout normal: grid 2 colonnes (sidebar + main) */
.app-shell {
    grid-template-columns: var(--sidebar-w) 1fr;
    transition: grid-template-columns 0.22s cubic-bezier(.4,0,.2,1);
}

/* Mode collapsed: la sidebar disparait, le main prend 100% */
body.app-sidebar-collapsed .app-shell {
    grid-template-columns: 0 1fr;
}
body.app-sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-right: none;
}
body.app-sidebar-collapsed .sidebar > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}

/* Animation a l'ouverture (slide-in depuis la gauche) */
.sidebar { transition: width 0.22s cubic-bezier(.4,0,.2,1); }
.sidebar > * { transition: opacity .18s ease .06s; }

/* ============== Tree-sidebar (arborescence) replie ===================== */
.tree-sidebar-pane.is-collapsed {
    /* La pane garde sa box (border, header) mais le contenu est masque
       et la largeur reduite. Le grid 3 colonnes s'adapte: la colonne
       arbo passe de 260px a 40px, le centre absorbe la difference. */
    min-width: 40px;
    max-width: 40px;
    overflow: hidden;
}
.tree-sidebar-pane.is-collapsed .tree-sidebar-content,
.tree-sidebar-pane.is-collapsed .tree-sidebar-title {
    display: none;
}
.tree-sidebar-pane.is-collapsed .tree-sidebar-head {
    padding: 8px 4px;
    justify-content: center;
}
.tree-sidebar-pane.is-collapsed .tree-sidebar-head-actions {
    margin: 0;
}
.tree-sidebar-pane.is-collapsed .tree-sidebar-toggle {
    padding: 4px 6px;
    font-size: 12px;
}

/* ============== Resize handles entre colonnes ========================== */

/* Col-resizer: handle 10px de large dans le gap entre 2 panes
   (attache au workspace-grid, pas au pane). Visible en permanence
   pour discoverabilite (ligne grise fine au milieu), surligne au
   hover/drag. */
.col-resizer {
    background: transparent;
    transition: background .12s ease;
    user-select: none;
    touch-action: none;
}
.col-resizer:hover,
.col-resizer:active,
body.is-col-resizing .col-resizer[data-col-resizer-index] {
    background: var(--primary-soft);
}
/* Ligne centrale visuelle - TOUJOURS visible (opacity 0.5) pour que
   l'utilisateur voie qu'il peut grab. Au hover/drag elle passe a 1
   et change de couleur. */
.col-resizer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 32px;
    background: var(--border-strong, #94a3b8);
    border-radius: 1px;
    opacity: 0.55;
    transition: opacity .12s, background .12s, height .12s;
    pointer-events: none;
}
.col-resizer:hover::before {
    opacity: 1;
    height: 48px;
    background: var(--primary, #2563eb);
}
body.is-col-resizing .col-resizer[data-col-resizer-index]::before {
    opacity: 1;
    background: var(--primary, #2563eb);
}
/* Theme dark: ligne plus visible sur fond sombre */
.theme-dark .col-resizer::before {
    background: rgba(226, 232, 240, 0.45);
}
.theme-dark .col-resizer:hover::before {
    background: var(--primary, #60a5fa);
}
.col-resizer:hover::before,
.col-resizer:active::before {
    opacity: 1;
    background: var(--primary);
}

/* Quand on est en train de resize, le curseur reste col-resize partout
   pour eviter le flash et on bloque la selection texte */
body.is-col-resizing {
    cursor: col-resize !important;
    user-select: none;
}
body.is-col-resizing * {
    cursor: col-resize !important;
}

/* ============== Main content / Topbar (etape 4) =========================
   La structure actuelle a un <main class="main-content"> qui contient
   directement le contenu de chaque page. Pas de topbar dedie - on style
   donc la zone principale + le premier element h1/h2 comme page-head. */

/* Conteneur principal: maintenant compose d'une <header class="topbar">
   (sticky) + d'un <div class="main-content-inner"> (scrollable padding).
   Le main-content lui-meme est flex column sans padding (porte par l'inner). */
.main-content {
    flex: 1;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.main-content-inner {
    flex: 1;
    overflow: auto;
    padding: 22px 26px 60px 26px;
    min-width: 0;
}

/* Page heading - applique automatiquement aux h1.h-title qui suivent
   le pattern du design cible. Les pages refondues (etapes 5+) auront
   <div class="page-head"><h1 class="h-title">...</h1><p class="h-sub">...</p>...</div> */
.main-content h1.h-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--text);
}
.main-content .h-sub {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 4px 0 0;
}

/* Alertes flash en haut de la page */
.main-content > .alert {
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
}
.main-content > .alert-success,
.main-content > .alert.alert-success {
    background: var(--success-soft);
    color: var(--success);
    border-color: transparent;
}
.main-content > .alert-error,
.main-content > .alert.alert-error {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: transparent;
}

/* ============== Accessibilite : focus-visible ring global ===============
   Pattern moderne (:focus-visible) qui ne montre le ring qu'au focus clavier
   (Tab), pas au clic souris. Cohrence visuelle pour navigation clavier. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
/* Pas de double ring sur les inputs qui ont deja leur shadow ring */
.input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.topbar-search input:focus-visible {
    outline: none;
}
/* Skip link visible au focus seulement (sr-only par defaut) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Container flash messages (a11y region) */
.flash-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

/* ============== Loading overlay (App.UI.Busy) =========================== */
.app-busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    z-index: 9999;
    animation: appBusyFadeIn .12s ease;
}
.app-busy-overlay[hidden] { display: none; }
@keyframes appBusyFadeIn { from { opacity: 0; } to { opacity: 1; } }

.app-busy-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    min-width: 200px;
}
.app-busy-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    animation: appBusySpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes appBusySpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.app-busy-label {
    line-height: 1.4;
}

/* ============== Tables responsives ====================================== */

/* Wrapper a placer autour des <table> qui peuvent depasser en largeur.
   Permet le scroll horizontal au lieu de casser le layout. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
}
.table-scroll table {
    min-width: 100%;
    width: max-content;
}

/* Auto-wrap des <table> nues dans .main-content-inner avec overflow */
.main-content-inner > table,
.main-content-inner .card .table {
    /* Note: pour la migration progressive, les pages migrent une par
       une vers <div class="table-scroll"><table>...</table></div>.
       Cette regle minimaliste garantit qu'aucune table existante ne
       provoque de scroll horizontal de toute la page. */
}

/* Mobile: les tables principales (utilisateurs, types, etc.) deviennent
   des stacks verticales avec labels devant les valeurs */
@media (max-width: 720px) {
    .table-stack-mobile thead {
        display: none;
    }
    .table-stack-mobile,
    .table-stack-mobile tbody,
    .table-stack-mobile tr,
    .table-stack-mobile td {
        display: block;
        width: 100%;
    }
    .table-stack-mobile tr {
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        margin-bottom: 10px;
        padding: 10px 12px;
        background: var(--surface);
    }
    .table-stack-mobile td {
        padding: 6px 0;
        border-bottom: 1px solid var(--border-soft);
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .table-stack-mobile td:last-child {
        border-bottom: none;
    }
    .table-stack-mobile td::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-3);
        font-weight: 600;
        flex: 0 0 110px;
    }
}

/* ============== Help tooltips metier (HelpHint) ========================
   Pattern: <span class="help-hint" data-help="..." tabindex="0">?</span>
   Au hover OU au focus, affiche un tooltip flottant accessible. Le
   pseudo aria-describedby est gere via aria-label sur le span lui-meme. */

.help-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
    cursor: help;
    border: 1px solid var(--border);
    position: relative;
    line-height: 1;
    flex-shrink: 0;
}
.help-hint:hover,
.help-hint:focus {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary);
    outline: none;
}
.help-hint::after {
    content: attr(data-help);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--surface);
    padding: 8px 12px;
    border-radius: var(--r-md);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 1000;
    box-shadow: var(--shadow-2);
    text-align: left;
}
.help-hint::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.help-hint:hover::after,
.help-hint:focus::after,
.help-hint:hover::before,
.help-hint:focus::before {
    opacity: 1;
}

/* Crumbs (fil d'Ariane) - styles disponibles pour qu'on l'ajoute
   progressivement dans les pages refondues */
.crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    font-size: 13px;
    margin-bottom: 14px;
}
.crumbs b {
    color: var(--text);
    font-weight: 600;
}
.crumbs .sep {
    color: var(--text-muted);
    margin: 0 2px;
}

/* ============== Boutons =================================================== */

/* Reset du .btn pour assurer une base nette avant l'override. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: background .12s, border-color .12s, transform .04s, box-shadow .12s;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.4;
    text-decoration: none;
    font-family: inherit;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled], .btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variantes - alignees avec le style cible. Les anciennes classes
   (.btn-primary, .btn-secondary) sont preservees pour la retrocompat. */
.btn.primary,
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-ink);
}
.btn.primary:hover,
.btn-primary:hover {
    background: var(--primary-2);
    border-color: var(--primary-2);
    color: var(--primary-ink);
}

.btn.secondary,
.btn-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn.secondary:hover,
.btn-secondary:hover {
    background: var(--surface-3);
}

.btn.accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.btn.accent:hover {
    filter: brightness(0.95);
}

.btn.ghost,
.btn-ghost,
.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--text-2);
    padding: 6px 10px;
}
.btn.ghost:hover,
.btn-ghost:hover,
.btn-link:hover {
    background: var(--surface-3);
    color: var(--text);
}

.btn.danger,
.btn-danger,
.btn-link.danger {
    color: var(--danger);
    background: transparent;
    border-color: transparent;
}
.btn.danger:hover,
.btn-danger:hover,
.btn-link.danger:hover {
    background: var(--danger-soft);
}

/* Tailles */
.btn.sm,
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.btn.lg { padding: 10px 16px; font-size: 14px; }
.btn.icon {
    padding: 6px;
    width: 32px;
    height: 32px;
    justify-content: center;
}

/* ============== Cards ===================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.card .hd,
.card .card-head {
    padding: var(--density-card);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}
.card .hd h3,
.card .card-head h3,
.card .hd > h2,
.card .card-head > h2 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
}
.card .hd .sub,
.card .card-head .sub {
    color: var(--text-3);
    font-size: 12.5px;
}
.card .bd,
.card .card-body {
    padding: var(--density-card);
    color: var(--text);
}
.card .bd.tight { padding: 6px; }
.card .bd.flat,
.card .card-body.flat { padding: 0; }
.card .ft,
.card .card-foot {
    padding: var(--density-card);
    border-top: 1px solid var(--border-soft);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============== Inputs ==================================================== */

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="url"],
.field select,
.field textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 13.5px;
    color: var(--text);
    outline: none;
    transition: border .15s, box-shadow .15s;
    font-family: inherit;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-muted);
}
.input:disabled,
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    background: var(--surface-3);
    color: var(--text-3);
    cursor: not-allowed;
}

/* Field wrapper */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.field > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.01em;
}
.field .req { color: var(--danger); }
.field .hint { font-size: 11.5px; color: var(--text-3); }

/* ============== Badges ==================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.5;
    border: 1px solid transparent;
}
.badge.success,
.badge-success { background: var(--success-soft); color: var(--success); }
.badge.warn,
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger,
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge.info,
.badge-info { background: var(--info-soft); color: var(--info); }
.badge.dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Status badges (existants depuis commit 1c2a789) - alignement sur le
   nouveau design system. On garde les classes status-XXX qui sont
   utilisees dans home.php et views/icons.php. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
    background: var(--surface-3);
    color: var(--text-2);
}
.status-badge.status-ACTIF { background: var(--success-soft); color: var(--success); }
.status-badge.status-EN_STOCK { background: var(--info-soft); color: var(--info); }
.status-badge.status-EN_MAINTENANCE { background: var(--warn-soft); color: var(--warn); }
.status-badge.status-EN_PANNE { background: var(--danger-soft); color: var(--danger); }
.status-badge.status-RETIRE { background: var(--accent-soft); color: var(--accent-ink); }
.status-badge.status-INACTIF { background: var(--surface-3); color: var(--text-3); }

/* ============== Tabs ====================================================== */

.tabs {
    display: inline-flex;
    background: var(--surface-3);
    padding: 3px;
    border-radius: 8px;
    gap: 2px;
}
.tabs button,
.tabs a {
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-3);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.tabs button.active,
.tabs a.active,
.tabs button[aria-selected="true"],
.tabs a[aria-selected="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-1);
}
.tabs button:hover:not(.active),
.tabs a:hover:not(.active) { color: var(--text); }

/* Sub-tabs (underline style pour les vues secondaires) */
.subtabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.subtabs button,
.subtabs a {
    padding: 10px 14px;
    background: none;
    border: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .12s;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.subtabs button.active,
.subtabs a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.subtabs button:hover:not(.active),
.subtabs a:hover:not(.active) { color: var(--text); }

/* ============== KPI ======================================================= */

.kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--density-card);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    position: relative;
    min-width: 0;
    box-shadow: var(--shadow-1);
}
.kpi .l,
.kpi .kpi-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    font-weight: 600;
}
.kpi .v,
.kpi .kpi-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
}
.kpi .d,
.kpi .kpi-sub {
    font-size: 12px;
    color: var(--text-3);
}
.kpi .icn,
.kpi .kpi-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    opacity: .7;
    color: var(--primary);
}
.kpi.accent .icn { color: var(--accent); }
.kpi.success .icn { color: var(--success); }
.kpi.warn .icn { color: var(--warn); }
.kpi.danger .icn { color: var(--danger); }

/* ============== Tables ==================================================== */

.table-card .table,
.card .table,
table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.card .table th,
.table-card .table th,
table.table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--text-3);
    padding: var(--density-cell);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    position: sticky;
    top: 0;
}
.card .table td,
.table-card .table td,
table.table td {
    padding: var(--density-cell);
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    vertical-align: middle;
}
.card .table tr:hover td,
.table-card .table tr:hover td { background: var(--surface-2); }
.card .table tr.selected td,
.table-card .table tr.selected td { background: var(--primary-soft); }
.card .table tr:last-child td,
.table-card .table tr:last-child td { border-bottom: none; }

/* ============== Modal (design moderne) ===================================
   Compatible avec les structures existantes type-modal-overlay / modal /
   .modal-backdrop. Style harmonise via tokens. */
.modal-backdrop,
.type-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 24px;
    backdrop-filter: blur(2px);
    animation: ds-modal-fade .15s ease;
}
@keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.modal,
.type-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
    animation: ds-modal-pop .18s ease;
}
@keyframes ds-modal-pop { from { transform: translateY(6px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============== Scrollbars (modernisees, harmonisees avec le theme) ====== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============== Utilitaires de layout ===================================== */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.grow { flex: 1; }

/* ============== Typo de pages ============================================ */
.h-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--text);
}
.h-sub {
    font-size: 13.5px;
    color: var(--text-3);
    margin: 4px 0 0;
}
.page-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}
.page-head .actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* ============== Mono =================================================== */
.mono,
code,
kbd {
    font-family: var(--font-mono);
}

/* Animations utilitaires */
.fade-in { animation: ds-fade-in .2s ease; }
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
.slide-up { animation: ds-slide-up .25s ease; }
@keyframes ds-slide-up { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================================
   Page Home (etape 5) - Tableau de bord CMDB
   =========================================================================
   Cible: views/home.php (workspace 3 colonnes arbo / liste objets / detail).
   Reference visuelle: _Ressources/screens/dashboard.jsx
   Override des regles legacy de style.css (specificite egale; cascade gagne
   car design-system.css est charge APRES style.css).
   ========================================================================= */

/* Grille 3 colonnes alignee sur le mockup (arbo 260 / liste 1fr / detail 360+).
   La colonne centrale (liste objets) prend tout l'espace residuel pour
   eliminer la "place perdue" entre la liste et la fiche detail.
   Min-width 0 sur les 3 colonnes pour permettre la contraction au resize.
   Les largeurs precises peuvent etre overridees au runtime par le user
   via le drag des col-resizer (persiste en localStorage par ui-layout.js). */
.workspace-grid.home-workspace {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(320px, 380px);
    /* IMPORTANT: sans grid-template-rows explicite, la ligne grid est
       auto-sized = sized to max content. Resultat: les panes avec
       'height: 100%' resolvent leur hauteur a leur propre contenu
       (cycle), ce qui defait l'overflow scroll. En forcant un track
       row explicite (minmax 0/1fr), la ligne prend la hauteur du
       container et les panes 'height: 100%' s'y conforment,
       permettant overflow-y: auto de fonctionner. */
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
    /* Pas de height fixe: la grid prend l'espace restant via flex: 1
       dans le main-content-inner (flex column). Les stats + toolbar
       au-dessus prennent leur taille naturelle (flex-shrink: 0).
       min-height: 0 indispensable pour autoriser la contraction sous
       flex-basis: auto. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Le main-content-inner devient un flex column pour partager la
   hauteur entre stats + toolbar + workspace. Sans cela, le workspace
   etait calc(100dvh - 116px) ce qui faisait deborder les stats +
   toolbar par le haut quand inner est overflow:hidden. */
.main-content-inner:has(.workspace-grid.home-workspace) {
    overflow: hidden;
    padding-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Pour que la chaine flex/grid fonctionne sur la home, le body + app-shell
   doivent etre bornes a la hauteur du viewport. Sans cela:
   - body est content-sized
   - app-shell {min-height: 100vh} grandit avec le contenu
   - main-content (grid cell) = content height
   - inner {flex: 1} ne trouve pas de parent borne -> auto height
   - workspace-grid {flex: 1} a la meme chose -> auto height
   - le grid-template-rows: minmax(0, 1fr) ne fonctionne plus
   On scope cette regle a body.home-page uniquement pour ne pas casser
   les autres pages (login, users, error pages) qui ont besoin de
   pouvoir grandir au-dela du viewport. */
body.home-page,
body.home-page .app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Les panels d'en-tete (stats + toolbar) au-dessus du workspace gardent
   leur taille naturelle, ne se compriment pas. Le workspace en dessous
   absorbe l'espace restant via flex: 1 1 auto. */
.main-content-inner:has(.workspace-grid.home-workspace) > .panel:not(.pane) {
    flex: 0 0 auto;
}

/* Note: les regles de scroll independant par pane sont definies APRES
   le bloc .panel.pane (plus bas dans ce fichier) pour gagner en cascade.
   Voir "Scrolls independants par pane (override post .panel.pane)". */

/* Pane arbo quand collapsed: largeur minimale, override des regles ci-dessus */
.workspace-grid.home-workspace .tree-sidebar-pane.is-collapsed {
    min-width: 40px !important;
    max-width: 40px !important;
}

/* Quand la pane detail est cachee (panel=attributes), la liste prend tout */
.workspace-grid.home-workspace .home-detail-pane.is-panel-hidden,
.workspace-grid.home-workspace .home-list-pane.is-panel-hidden {
    display: none;
}
.workspace-grid.home-workspace .home-detail-pane.is-wide {
    /* mode attributs etendus: pas de pane separe, fusion avec la liste */
    grid-column: 2 / -1;
}

/* Assure que les object-row prennent toute la largeur du pane (fix place perdue) */
.workspace-grid .object-list,
.workspace-grid .object-list-wrap {
    width: 100%;
    box-sizing: border-box;
}
.workspace-grid .object-row {
    width: 100%;
    box-sizing: border-box;
}

/* ============== Objets lies regroupes par categorie/type ================
   Section "Objets lies" dans la fiche detail. Chaque objet lie est rendu
   avec l'icone de son type devant, et les objets sont groupes par type
   pour faciliter le scan visuel. */

.linked-objects-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.linked-objects-group {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}
.linked-objects-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-3);
    border-bottom: 1px solid var(--border-soft);
}
.linked-objects-group-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--primary);
    flex-shrink: 0;
}
.linked-objects-group-icon .icon-svg,
.linked-objects-group-icon svg,
.linked-objects-group-icon .icon-img {
    width: 18px;
    height: 18px;
    color: currentColor;
}
.linked-objects-group-name {
    flex: 1;
    letter-spacing: 0.01em;
}
.linked-objects-group-count {
    background: var(--surface);
    color: var(--text-3);
    font-size: 11px;
    padding: 2px 7px;
}

.linked-objects-group .linked-objects-list {
    padding: 0;
    background: var(--surface);
    border-radius: 0 0 var(--r-md) var(--r-md);
}

/* Object-row clickable enveloppe entiere (utilise <a> au lieu de <div>) */
.linked-object-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    text-decoration: none;
    color: var(--text);
    transition: background .12s;
    cursor: pointer;
}
.linked-object-row:last-child {
    border-bottom: none;
}
.linked-object-row:hover {
    background: var(--surface-2);
}
.linked-object-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--text-3);
    flex-shrink: 0;
    background: var(--surface-3);
    border-radius: var(--r-sm);
}
.linked-object-icon .icon-svg,
.linked-object-icon svg,
.linked-object-icon .icon-img {
    width: 16px;
    height: 16px;
    color: currentColor;
}
.linked-object-body {
    flex: 1;
    min-width: 0;
}
.linked-object-body .obj-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.linked-object-body .obj-meta {
    font-size: 11.5px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.linked-object-body .obj-key {
    font-size: 10.5px;
    color: var(--text-3);
    letter-spacing: 0.02em;
}
.linked-direction {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-3);
}
.linked-direction.is-out {
    background: var(--primary-soft);
    color: var(--primary);
}
.linked-direction.is-in {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* Cards de pane: surface + bordure tokens, padding densite */
.workspace-grid .panel.pane {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* === Scrolls independants par pane (override post .panel.pane) ============
   IMPORTANT: les 3 panes doivent etre contraints en hauteur par leur cell
   grid. Sans min-height: 0 + max-height: 100%, le pane grossit avec son
   contenu et le scroll ne s'applique pas (le pane sort de la grid).
   On combine min-height: 0 (autorise contraction sous content) + height
   100% (fill du track grid) + max-height 100% (cap absolu). */
.workspace-grid .panel.pane.tree-sidebar-pane,
.workspace-grid .panel.pane.home-list-pane,
.workspace-grid .panel.pane.home-detail-pane {
    min-height: 0;
    max-height: 100%;
    height: 100%;
    /* Indispensable: align-self: stretch est default mais on l'expose pour
       documenter que le pane doit remplir la cell grid en hauteur */
    align-self: stretch;
}

/* Pane detail (mode normal, hors .is-wide): scroll au niveau du pane
   lui-meme (pas de wrapper interne). On force aussi un max-height
   absolu (calc viewport) en defense en profondeur, au cas ou la
   cascade des hauteurs parentes serait cassee par un autre layout
   ancestor (ex: navigation modale, sidebar collapsed, etc.). */
.workspace-grid .panel.pane.home-detail-pane:not(.is-wide) {
    overflow-y: auto !important;
    overflow-x: hidden;
    /* Pas de max-height fixe en dvh ici: la grid parente gere la hauteur
       via grid-template-rows: minmax(0, 1fr) + height: 100% sur le pane.
       Un cap dvh creerait du dead space en bas quand le viewport est
       plus grand que la zone disponible (stats + toolbar en haut). */
    /* Empeche le scroll de cascader vers le parent en bout de course */
    overscroll-behavior: contain;
    /* Force un BFC propre + positioning context pour les sticky enfants */
    position: relative;
    /* Display block (pas flex) car flex container avec overflow:auto et
       enfants ayant flex-grow=1 cassent le scroll: le child grandit a
       l'infini. Le pane-head reste sticky donc pas besoin de flex. */
    display: block;
}

/* Pane detail mode .is-wide (panel = attributes): le pane garde flex
   column + overflow hidden, son enfant .attributes-table-scroll porte
   le scroll. Hauteur heritee de la grid (pas de max-height dvh). */
.workspace-grid .panel.pane.home-detail-pane.is-wide {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    position: relative;
}
.workspace-grid .panel.pane.home-detail-pane.is-wide > .attributes-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: auto;
    overscroll-behavior: contain;
}

/* === Mode normal (objet detail): la zone Attributs ne doit PAS avoir
   son propre scroll. Le scroll est porte par le pane parent.
   Sinon on a un mini-ascenseur a l'interieur d'un pane scrollable =
   double scroll illisible (cf. screenshot user).

   Override:
   - style.css:2358 .table-scroll { overflow: auto } -> visible
   - style.css:2737 .attributes-table-scroll { height: 100%; min-height: 0 }
     -> height: auto pour laisser la table prendre sa taille naturelle
   - style.css:2365 .table-scroll table { min-width: 620px } -> 0 pour
     ne pas forcer un scroll horizontal dans le pane etroit (~380px).
*/
.workspace-grid .panel.pane.home-detail-pane:not(.is-wide) .object-attributes-table-scroll {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 1px solid var(--border, var(--line, #d8e0ee));
    border-radius: 8px;
    background: var(--surface, #fff);
}

.workspace-grid .panel.pane.home-detail-pane:not(.is-wide) .object-attributes-table-scroll > table {
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
}

/* Idem pour le th sticky de la table interne: il reste sticky par
   rapport au pane scrollable parent (pas la table elle-meme). Le
   pane-head reste sticky a son top, les th de la table s'empilent
   en-dessous. */
.workspace-grid .panel.pane.home-detail-pane:not(.is-wide) .object-attributes-table-scroll thead th {
    /* sticky desactive ici: cree des problemes de stacking avec le
       pane-head sticky du pane. Le th defile normalement avec le
       contenu, le pane-head reste visible. */
    position: static;
    top: auto;
}

.workspace-grid .panel.pane.home-detail-pane > .pane-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border-soft);
}

/* Panes arbo + liste: contenu interne scrollable (wrapper present).
   Le pane garde flex column car son enfant scrollable doit flex:1
   pour occuper l'espace restant sous le pane-head sticky.
   Hauteur heritee de la grid (height: 100% deja set plus haut). */
.workspace-grid .panel.pane.tree-sidebar-pane,
.workspace-grid .panel.pane.home-list-pane {
    overflow: hidden;
}
.workspace-grid .panel.pane.tree-sidebar-pane .tree-sidebar-content,
.workspace-grid .panel.pane.home-list-pane .object-list-wrap,
.workspace-grid .panel.pane.home-list-pane > .object-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Override du pane-head blanc hardcode (style.css:563 'background: #fff')
   pour mode dark + brand */
.theme-dark .home-page .home-detail-pane .pane-head,
.theme-dark .workspace-grid .panel.pane.home-detail-pane > .pane-head {
    background: var(--surface) !important;
    color: var(--text);
    border-bottom-color: var(--border-soft);
}

.workspace-grid .pane-head {
    padding: var(--density-card);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.workspace-grid .panel-title-small {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
    margin: 0;
}

.workspace-grid .tree-sidebar-content,
.workspace-grid .object-list-wrap {
    padding: var(--density-pad);
}

/* Arborescence: items plus aerees, surface soft pour actif */
.workspace-grid .tree-link {
    border-radius: var(--r-sm);
    color: var(--text-2);
    transition: background .12s ease, color .12s ease;
}
.workspace-grid .tree-link:hover {
    background: var(--surface-3);
    color: var(--text);
}
.workspace-grid .tree-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}
.workspace-grid .tree-count {
    color: var(--text-3);
    font-size: 11px;
    font-weight: 500;
}

/* Liste d'objets: card par objet (override .object-row) */
.workspace-grid .object-list {
    gap: 8px;
}
.workspace-grid .object-row {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--r-md);
    padding: var(--density-cell);
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
    box-shadow: var(--shadow-1);
}
.workspace-grid .object-row:hover {
    border-color: var(--primary-2);
    background: var(--surface-2);
}
.workspace-grid .object-row.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.workspace-grid .obj-key {
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.workspace-grid .obj-label {
    color: var(--text);
    font-weight: 600;
    font-size: 13.5px;
}
.workspace-grid .obj-meta {
    color: var(--text-3);
    font-size: 12px;
}
.workspace-grid .object-row.active .obj-label,
.workspace-grid .object-row.active .obj-key {
    color: var(--primary);
}

/* Detail panel: titres et tableau attributs */
.workspace-grid .panel-subtitle {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
}
.workspace-grid .attribute-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.workspace-grid .attribute-table th,
.workspace-grid .attribute-table td {
    padding: var(--density-cell);
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: top;
}
.workspace-grid .attribute-table th {
    color: var(--text-3);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-2);
}
.workspace-grid .attribute-table tr:last-child td {
    border-bottom: none;
}

/* =========================================================================
   Espace RH dashboard (etape 6)
   =========================================================================
   Cible: views/hr_dashboard.php + hr_users.php (body.hr-page).
   Reference visuelle: _Ressources/screens/rh.jsx (hero gradient bleu->violet,
   4 KPIs, donut + listes).
   Override des definitions hardcodees de style.css (--hr-* en hex) pour
   alignement total sur les design tokens et compatibilite theme-dark.
   ========================================================================= */

/* Realiase les --hr-* sur les tokens du design system. La specificite reste
   identique (.hr-page) mais notre regle vient apres dans la cascade. */
.hr-page {
    --hr-indigo: var(--primary);
    --hr-indigo-soft: var(--primary-soft);
    --hr-indigo-strong: var(--primary-2);
    --hr-green: var(--success);
    --hr-green-soft: var(--success-soft);
    --hr-amber: var(--warn);
    --hr-amber-soft: var(--warn-soft);
    --hr-rose: var(--danger);
    --hr-rose-soft: var(--danger-soft);
    --hr-bg: var(--bg);
    --hr-line: var(--border);
    --hr-line-strong: var(--border-strong);
    --hr-text: var(--text);
    --hr-muted: var(--text-3);
}

/* Hero: gradient brand -> accent, conforme charte */
.hr-page .hr-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 55%, var(--accent) 100%);
    border-radius: var(--r-xl);
    padding: var(--density-page);
    box-shadow: var(--shadow-2);
    color: var(--primary-ink);
}
.hr-page .hr-hero-title {
    color: var(--primary-ink);
    font-size: 24px;
    letter-spacing: -0.015em;
}
.hr-page .hr-hero-sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
}
.hr-page .hr-hero-actions .hr-btn-ghost {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: var(--primary-ink);
}
.hr-page .hr-hero-actions .hr-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.26);
}

/* KPIs: card + border-left semantique */
.hr-page .hr-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--r-lg);
    padding: var(--density-card);
    box-shadow: var(--shadow-1);
}
.hr-page .hr-kpi-success { border-left-color: var(--success); }
.hr-page .hr-kpi-warning { border-left-color: var(--warn); }
.hr-page .hr-kpi-info    { border-left-color: var(--accent); }

.hr-page .hr-kpi-icon {
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: var(--r-md);
}
.hr-page .hr-kpi-success .hr-kpi-icon { background: var(--success-soft); color: var(--success); }
.hr-page .hr-kpi-warning .hr-kpi-icon { background: var(--warn-soft);    color: var(--warn); }
.hr-page .hr-kpi-info    .hr-kpi-icon { background: var(--accent-soft);  color: var(--accent-ink); }

.hr-page .hr-kpi-value {
    color: var(--text);
    font-size: 28px;
    letter-spacing: -0.02em;
}
.hr-page .hr-kpi-label {
    color: var(--text-3);
}
.hr-page .hr-kpi-meta {
    color: var(--primary);
}

/* Cards RH: surface + tokens */
.hr-page .hr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: var(--density-page);
}
.hr-page .hr-card-flat {
    box-shadow: none;
}
.hr-page .hr-card-title {
    color: var(--text);
    font-size: 15px;
    letter-spacing: -0.005em;
}
.hr-page .hr-card-sub {
    color: var(--text-3);
}

/* Donut: hole en surface, label en text */
.hr-page .hr-donut-hole {
    background: var(--surface);
}
.hr-page .hr-donut-center-value { color: var(--text); }
.hr-page .hr-donut-center-label { color: var(--text-3); }
.hr-page .hr-legend li          { color: var(--text-2); }
.hr-page .hr-legend-value       { color: var(--text); }

/* Listes (derniers onboardings, sans materiel) */
.hr-page .hr-list-link {
    color: var(--text);
}
.hr-page .hr-list-link:hover {
    background: var(--primary-soft);
}
.hr-page .hr-list-avatar {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: var(--primary-ink);
}
.hr-page .hr-list-avatar-warn {
    background: linear-gradient(135deg, var(--warn), var(--accent));
}
.hr-page .hr-list-meta {
    color: var(--text-3);
}
.hr-page .hr-stock li {
    background: var(--surface-2);
    color: var(--text);
}
.hr-page .hr-stock-badge {
    background: var(--success-soft);
    color: var(--success);
}

/* Boutons RH dans le contexte hero (hors hero ils gardent leur style) */
.hr-page .hr-btn {
    border-radius: var(--r-md);
    font-family: var(--font-sans);
}
.hr-page .hr-btn-primary {
    background: var(--primary);
    color: var(--primary-ink);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.22);
}
.hr-page .hr-btn-primary:hover {
    background: var(--primary-2);
}
.hr-page .hr-btn-link {
    color: var(--primary);
}
.hr-page .hr-btn-link:hover {
    color: var(--primary-2);
}

/* =========================================================================
   Onboarding wizard (etape 7)
   =========================================================================
   Cible: views/onboarding.php (body.hr-page, wizard 3 etapes).
   Reference visuelle: _Ressources/screens/onboarding.jsx (hero gradient,
   stepper moderne, formulaire 2 colonnes, recap card).
   Le HTML inclut un <style> inline (legacy) qu'on override avec
   specificite +1 via le scope .hr-page.
   ========================================================================= */

/* Wizard container: garde hr-card padding mais marge top */
.hr-page [data-onboarding-wizard] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--density-page);
    box-shadow: var(--shadow-1);
}

/* Stepper: 3 etapes, alignement design system */
.hr-page .ob-steps {
    gap: 12px;
    margin: 0 0 20px;
}
.hr-page .ob-step {
    background: var(--surface-2);
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13.5px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hr-page .ob-step-num {
    background: var(--surface-3);
    color: var(--text-3);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.hr-page .ob-step.is-active {
    background: linear-gradient(135deg, var(--primary), var(--primary-2), var(--accent));
    color: var(--primary-ink);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.25);
}
.hr-page .ob-step.is-active .ob-step-num {
    background: rgba(255, 255, 255, 0.22);
    color: var(--primary-ink);
}
.hr-page .ob-step.is-done {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-soft);
}
.hr-page .ob-step.is-done .ob-step-num {
    background: var(--success);
    color: #fff;
}

/* Formulaire: champs alignes design system */
.hr-page .ob-field label {
    color: var(--text-2);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.hr-page .ob-field input,
.hr-page .ob-field select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font-sans);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.hr-page .ob-field input:focus,
.hr-page .ob-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    outline: none;
}
.hr-page .ob-required {
    color: var(--danger);
}
.hr-page .ob-hint {
    color: var(--text-3);
}
.hr-page .ob-hint.is-error {
    color: var(--danger);
}

/* Catalogue materiel: card par type */
.hr-page .ob-type-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hr-page .ob-type-row:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-1);
}
.hr-page .ob-type-row.is-checked {
    border-color: var(--success);
    background: var(--success-soft);
}
.hr-page .ob-type-row .ob-type-name {
    color: var(--text);
}
.hr-page .ob-type-row .ob-type-schema {
    color: var(--text-3);
}
.hr-page .ob-type-row input[type="checkbox"] {
    accent-color: var(--primary);
}
.hr-page .ob-type-row input[type="number"] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

/* Feedback */
.hr-page .ob-feedback {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-soft);
    border-radius: var(--r-md);
}
.hr-page .ob-feedback.is-success {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-soft);
}

/* Recap (etape 3) */
.hr-page .ob-recap-person {
    background: linear-gradient(135deg, var(--primary), var(--primary-2), var(--accent));
    color: var(--primary-ink);
    border-radius: var(--r-lg);
    padding: var(--density-card);
}
.hr-page .ob-recap-table {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.hr-page .ob-recap-table thead {
    background: var(--primary-soft);
}
.hr-page .ob-recap-table th {
    color: var(--primary);
    font-weight: 700;
}
.hr-page .ob-recap-table td {
    color: var(--text);
    border-top: 1px solid var(--border-soft);
}

/* Boutons ghost dark dans le wizard (specifique au scope) */
.hr-page .hr-btn-ghost-dark {
    background: var(--surface);
    color: var(--primary);
    border: 1px solid var(--border);
}
.hr-page .hr-btn-ghost-dark:hover {
    background: var(--primary-soft);
    color: var(--primary-2);
}

/* =========================================================================
   THEME-DARK OVERRIDES - corrections de couleurs hardcodees du style.css
   legacy. Le CSS historique utilise massivement #fff / #fbfdff / #f5f9ff /
   #fafafa qui restent BLANCHES en mode sombre, creant des zones lumineuses
   et un contraste texte casse. On force ici les tokens du theme.
   ========================================================================= */

/* ===== Inputs / selects / textareas - tous formulaires =================== */
.theme-dark input[type="text"],
.theme-dark input[type="email"],
.theme-dark input[type="password"],
.theme-dark input[type="number"],
.theme-dark input[type="search"],
.theme-dark input[type="tel"],
.theme-dark input[type="url"],
.theme-dark input[type="date"],
.theme-dark input[type="datetime-local"],
.theme-dark input[type="time"],
.theme-dark input[type="month"],
.theme-dark input[type="week"],
.theme-dark input:not([type]),
.theme-dark select,
.theme-dark textarea {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: var(--text-muted);
}
.theme-dark select option {
    background: var(--surface);
    color: var(--text);
}
.theme-dark input:disabled,
.theme-dark select:disabled,
.theme-dark textarea:disabled {
    background: var(--surface-3);
    color: var(--text-3);
}
.theme-dark input:focus,
.theme-dark select:focus,
.theme-dark textarea:focus {
    border-color: var(--primary);
}

/* ===== Tables - zebra striping + headers + wrappers ===================== */
.theme-dark table {
    background: var(--surface);
    color: var(--text);
}
.theme-dark table th {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border-bottom-color: var(--border) !important;
}
.theme-dark table td {
    background: transparent;
    border-bottom-color: var(--border-soft);
    color: var(--text);
}
/* Wrapper .table-scroll a un background blanc hardcode (style.css:2362).
   On force surface en mode dark. */
.theme-dark .table-scroll,
.theme-dark .object-attributes-table-scroll,
.theme-dark .attributes-table-scroll {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
.theme-dark .table-scroll th,
.theme-dark .object-attributes-table-scroll th,
.theme-dark .attributes-table-scroll th {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
}
.theme-dark .table-scroll tbody tr:nth-child(even),
.theme-dark table.striped tbody tr:nth-child(even),
.theme-dark .object-attributes-table-scroll tr:nth-child(even),
.theme-dark .attributes-table-scroll tr:nth-child(even) {
    background: var(--surface-2) !important;
}
.theme-dark .table-scroll tbody tr:hover,
.theme-dark table tbody tr:hover {
    background: var(--surface-3) !important;
}
/* Editable value hover: legacy met #f5f9ff (bleu clair). On force surface-3. */
.theme-dark .editable-value.is-editable:hover {
    background: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
}
/* Border-bottom des cells: legacy utilise var(--line) qui pointe vers
   une couleur claire. On force border-soft. */
.theme-dark th,
.theme-dark td {
    border-bottom-color: var(--border-soft) !important;
}

/* ===== Cards / boxes / panels avec fond hardcode blanc ================== */
.theme-dark .card,
.theme-dark .object-card,
.theme-dark .object-row,
.theme-dark .group-card,
.theme-dark .hr-card,
.theme-dark .hr-card-flat,
.theme-dark .kpi,
.theme-dark .home-list-pane,
.theme-dark .home-detail-pane,
.theme-dark .tree-sidebar-pane,
.theme-dark .panel,
.theme-dark .alert {
    background: var(--surface);
    color: var(--text);
}
.theme-dark .card .hd,
.theme-dark .panel .pane-head,
.theme-dark .card-head {
    background: var(--surface);
    border-bottom-color: var(--border-soft);
}

/* ===== Object-row hover + active dans le pane liste ===================== */
.theme-dark .workspace-grid .object-row {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.theme-dark .workspace-grid .object-row:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}
.theme-dark .workspace-grid .object-row.active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text);
}
.theme-dark .obj-key,
.theme-dark .obj-meta {
    color: var(--text-3);
}
.theme-dark .obj-label {
    color: var(--text);
}

/* ===== Selecteur "A - Z" + "Filtrer" + champs Schema/Recherche ========== */
.theme-dark .filter-bar,
.theme-dark .panel-head,
.theme-dark .pane-head,
.theme-dark .tree-sidebar-head {
    background: var(--surface);
    color: var(--text);
}

/* ===== Modal (overlays) ================================================== */
.theme-dark .modal,
.theme-dark .type-modal {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.theme-dark .modal-backdrop,
.theme-dark .type-modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}

/* ===== Code / mono blocks ================================================ */
.theme-dark code,
.theme-dark pre,
.theme-dark kbd {
    background: var(--surface-3);
    color: var(--text);
}

/* ===== Badges qui avaient fond clair hardcode ============================ */
.theme-dark .badge {
    background: var(--surface-3);
    color: var(--text-2);
}

/* ===== Editable values inline (clic pour editer un attribut) ============ */
.theme-dark .editable-value {
    color: var(--text);
}
.theme-dark .editable-value.is-editable:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}
.theme-dark .inline-edit-input {
    background: var(--surface);
    color: var(--text);
    border-color: var(--primary);
}

/* ===== Filter actif (le bandeau "FILTRE ACTIF") ========================= */
.theme-dark .object-filter-summary,
.theme-dark .filter-active-banner {
    background: var(--primary-soft);
    color: var(--text);
    border-color: var(--primary);
}

/* ===== KPI cards (Schemas/Categories/Objets/References en haut) ========= */
.theme-dark .kpi-card,
.theme-dark [class*="kpi-"] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

/* ===== Tabs / segmented controls ======================================== */
.theme-dark .tabs,
.theme-dark .panel-segmented {
    background: var(--surface-3);
}
.theme-dark .tabs button,
.theme-dark .panel-segmented a {
    color: var(--text-3);
}
.theme-dark .tabs button.active,
.theme-dark .panel-segmented a.active,
.theme-dark .tabs button[aria-selected="true"] {
    background: var(--surface);
    color: var(--text);
}

/* ===== Workspace grid - panels qui doivent rester surface ================ */
.theme-dark .workspace-grid .panel.pane {
    background: var(--surface);
}
.theme-dark .workspace-grid .pane-head {
    background: var(--surface);
    border-bottom-color: var(--border-soft);
}

/* ===== Linked objects groups (etape 7) - deja en tokens mais on force ==== */
.theme-dark .linked-objects-group {
    background: var(--surface-2);
    border-color: var(--border-soft);
}
.theme-dark .linked-objects-group-head {
    background: var(--surface-3);
    border-bottom-color: var(--border-soft);
}
.theme-dark .linked-object-row {
    background: transparent;
    color: var(--text);
}
.theme-dark .linked-object-row:hover {
    background: var(--surface);
}
.theme-dark .linked-object-icon {
    background: var(--surface);
    color: var(--text-2);
}

/* ===== Pagination + boutons ghost / link ================================ */
.theme-dark .pagination-link,
.theme-dark .btn-link {
    color: var(--text-2);
}
.theme-dark .pagination-link:hover,
.theme-dark .btn-link:hover {
    background: var(--surface-3);
    color: var(--text);
}
.theme-dark .pagination-link.is-active {
    background: var(--primary);
    color: var(--primary-ink);
}

/* ===== Tree-sidebar items =============================================== */
.theme-dark .tree-row,
.theme-dark .tree-item {
    color: var(--text-2);
}
.theme-dark .tree-row:hover,
.theme-dark .tree-item:hover {
    background: var(--surface-3);
    color: var(--text);
}
.theme-dark .tree-row.active,
.theme-dark .tree-item.active {
    background: var(--primary-soft);
    color: var(--primary);
}

/* ===== Override des couleurs hardcodees jaune-clair (alertes douces) === */
.theme-dark [style*="background: #fff8e8"],
.theme-dark [style*="background:#fff8e8"],
.theme-dark [style*="background: #fffdf4"],
.theme-dark [style*="background:#fffdf4"],
.theme-dark [style*="background: #fff0ed"],
.theme-dark [style*="background:#fff0ed"],
.theme-dark [style*="background: #fff5df"],
.theme-dark [style*="background:#fff5df"] {
    background: var(--warn-soft) !important;
    color: var(--warn) !important;
}

/* ===== Override des sections "is-wide" attributes en mode dark ========= */
.theme-dark .attributes-table-scroll,
.theme-dark .object-attributes-table-scroll {
    background: var(--surface);
    color: var(--text);
}

/* ===== Le fond global de la home en mode sombre ========================= */
.theme-dark body,
.theme-dark .main-content,
.theme-dark .main-content-inner {
    background: var(--bg);
    color: var(--text);
}

/* =========================================================================
   THEME-BRAND OVERRIDES - corrections plus legeres car le theme brand
   reste majoritairement clair, juste plus contraste. On corrige certains
   tableaux qui ont des bleus clairs trop saturés sur fond brand.
   ========================================================================= */
.theme-brand .table-scroll tbody tr:nth-child(even),
.theme-brand .object-attributes-table-scroll tr:nth-child(even),
.theme-brand .attributes-table-scroll tr:nth-child(even) {
    background: var(--surface-2);
}
.theme-brand .table-scroll thead th,
.theme-brand .object-attributes-table-scroll thead th,
.theme-brand .attributes-table-scroll thead th {
    background: var(--surface-2);
    color: var(--text-2);
}

/* =========================================================================
   BOUTON COPIER ([data-copy-value])
   ========================================================================= */

.attr-value-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.attr-value-cell > :first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-value-btn {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease;
    padding: 0;
    flex-shrink: 0;
}
.attr-value-cell:hover .copy-value-btn,
.copy-value-btn:focus-visible {
    opacity: 1;
}
.copy-value-btn:hover {
    background: var(--surface-3);
    color: var(--primary);
    border-color: var(--border);
}
.copy-value-btn:active {
    transform: scale(0.92);
}
.copy-value-btn.is-copied {
    opacity: 1;
    color: var(--success);
    background: var(--success-soft);
    border-color: var(--success);
}
.copy-value-btn svg {
    pointer-events: none;
}
.theme-dark .copy-value-btn {
    color: var(--text-3);
}
.theme-dark .copy-value-btn:hover {
    background: var(--surface-3);
    color: var(--primary-2);
    border-color: var(--border);
}

/* Mobile: bouton toujours visible (pas de hover sur touch) */
@media (hover: none) {
    .copy-value-btn { opacity: 0.7; }
    .copy-value-btn:hover { opacity: 1; }
}

/* =========================================================================
   MASS OVERRIDES THEME-DARK - selectors hardcodes en blanc/clair
   60+ regles legacy avec background #fff/#fafafa/#fbfdff/etc.
   On force surface/surface-2 sur les conteneurs principaux.
   ========================================================================= */

/* Wrappers + containers principaux qui ont background hardcode clair */
.theme-dark .schema-switcher,
.theme-dark .schema-switcher-current,
.theme-dark .schema-switcher-dropdown,
.theme-dark .group-tree,
.theme-dark .group-tree-toolbar,
.theme-dark .group-detail,
.theme-dark .group-detail-content,
.theme-dark .entity-card,
.theme-dark .entity-card-header,
.theme-dark .entity-card-body,
.theme-dark .attribute-row,
.theme-dark .attribute-cell,
.theme-dark .attribute-row-inherited-hidden,
.theme-dark .filter-input-wrap,
.theme-dark .filter-popover,
.theme-dark .filter-popover-body,
.theme-dark .reference-select,
.theme-dark .reference-pill,
.theme-dark .ref-pill,
.theme-dark .nfc-input-wrap,
.theme-dark .mac-input-wrap,
.theme-dark .alert,
.theme-dark .alert-info,
.theme-dark .alert-success,
.theme-dark .alert-warning,
.theme-dark .alert-error,
.theme-dark .toolbar,
.theme-dark .actions-inline,
.theme-dark .object-action-row,
.theme-dark .schema-create-form,
.theme-dark .type-form,
.theme-dark .attribute-form,
.theme-dark .filter-bar,
.theme-dark .object-detail,
.theme-dark .object-detail-card,
.theme-dark .object-meta,
.theme-dark .object-attributes,
.theme-dark .related-objects,
.theme-dark .attachments-list,
.theme-dark .attachment-item,
.theme-dark .attachment-card,
.theme-dark .document-import-modal,
.theme-dark .document-line-item,
.theme-dark .document-lines-list,
.theme-dark .references-card,
.theme-dark .references-list,
.theme-dark .ref-row,
.theme-dark .object-comments-list,
.theme-dark .object-comment-item,
.theme-dark .object-create-modal,
.theme-dark .type-create-modal,
.theme-dark .attribute-create-modal,
.theme-dark .schema-create-modal,
.theme-dark .icon-create-modal,
.theme-dark .icon-edit-modal,
.theme-dark .clone-object-modal,
.theme-dark .restore-confirm-modal,
.theme-dark .trash-empty-confirm,
.theme-dark .object-edit-modal,
.theme-dark .value-editor-modal,
.theme-dark .reference-modal,
.theme-dark .ocr-status-row,
.theme-dark .ocr-status-card,
.theme-dark .saved-view-card,
.theme-dark .webhook-row,
.theme-dark .webhook-form,
.theme-dark .upgrade-status,
.theme-dark .upgrade-status-row,
.theme-dark .upgrade-detail,
.theme-dark .upgrade-card,
.theme-dark .upgrade-list-item,
.theme-dark .history-compact-row,
.theme-dark .history-card,
.theme-dark .history-row {
    background: var(--surface) !important;
    color: var(--text);
    border-color: var(--border);
}

/* Headers / sub-titles  */
.theme-dark .panel-title-small,
.theme-dark .panel-subtitle,
.theme-dark .h-section,
.theme-dark .section-title,
.theme-dark .form-section-title {
    background: var(--surface) !important;
    color: var(--text);
}

/* Zones alternees / hover des listes */
.theme-dark .object-list .object-row,
.theme-dark .entity-list-item,
.theme-dark .pop-list-item,
.theme-dark .group-item,
.theme-dark .history-list .history-item,
.theme-dark .references-list .reference-item,
.theme-dark .attachments-list .attachment-item,
.theme-dark .object-comments-list .comment-row,
.theme-dark .saved-views-list .saved-view-item,
.theme-dark .ocr-runs-list .ocr-run-row,
.theme-dark .webhook-list .webhook-row,
.theme-dark .upgrade-list .upgrade-row,
.theme-dark .ref-list-item {
    background: var(--surface) !important;
    color: var(--text);
    border-color: var(--border-soft);
}
.theme-dark .object-list .object-row:hover,
.theme-dark .entity-list-item:hover,
.theme-dark .reference-item:hover,
.theme-dark .attachment-item:hover,
.theme-dark .saved-view-item:hover,
.theme-dark .ocr-run-row:hover,
.theme-dark .webhook-row:hover,
.theme-dark .history-item:hover {
    background: var(--surface-3) !important;
}

/* Lignes paires (zebra striping) */
.theme-dark .history-compact-row:nth-child(even),
.theme-dark .references-list .reference-item:nth-child(even),
.theme-dark tbody tr:nth-child(even) {
    background: var(--surface-2) !important;
}

/* Tags chip / pills inline (legacy avec bg jaune-creme) */
.theme-dark .tag-chip,
.theme-dark .pill,
.theme-dark .badge-muted,
.theme-dark .badge-secondary {
    background: var(--surface-3) !important;
    color: var(--text-2);
}

/* Inputs hardcoded en blanc - on a deja un override generique pour
   input/select/textarea, ici on cible aussi des wrappers specifiques */
.theme-dark .reference-pill input,
.theme-dark .nfc-input-wrap input,
.theme-dark .mac-input-wrap input,
.theme-dark .filter-input-wrap input,
.theme-dark .filter-input-wrap select {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Specifiquement les containers de la fiche utilisateur (le cas RAHAMEFY) */
.theme-dark .object-meta-card,
.theme-dark .user-card,
.theme-dark .user-details,
.theme-dark .person-card,
.theme-dark .person-card-body,
.theme-dark .panel.pane,
.theme-dark section.panel,
.theme-dark .pane,
.theme-dark .pane-body,
.theme-dark .pane-content {
    background: var(--surface) !important;
    color: var(--text);
}

/* Texte dans les conteneurs nettoyes */
.theme-dark .panel.pane,
.theme-dark .panel.pane * {
    /* Override conditionne aux enfants directs problematiques. Note:
       les colors specifiques (badges, etc.) gardent leur color via leurs
       propres regles plus specifiques. */
}
.theme-dark .panel.pane .muted,
.theme-dark .panel.pane .obj-key,
.theme-dark .panel.pane .obj-meta {
    color: var(--text-3) !important;
}
.theme-dark .panel.pane .obj-label,
.theme-dark .panel.pane td,
.theme-dark .panel.pane th {
    color: var(--text);
}
.theme-dark .panel.pane th {
    color: var(--text-2) !important;
}

/* Schema switcher dropdown items */
.theme-dark .schema-switcher-current {
    background: var(--surface) !important;
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.theme-dark .schema-switcher-current:hover {
    background: var(--surface-3) !important;
    border-color: var(--primary);
}

/* Boutons "Creer" "Cloner objet" qui ont peut-etre des bg legacy */
.theme-dark .object-action-row .btn,
.theme-dark .actions-inline .btn {
    /* Heriter du theme via .btn deja defini, juste rappel */
}

/* Form fields avec bg hardcode */
.theme-dark .field,
.theme-dark .field-compact,
.theme-dark .form-field {
    background: transparent;
    color: var(--text);
}
.theme-dark .field label,
.theme-dark .field > label {
    color: var(--text-2);
}

/* Documents / fichiers / pieces jointes (zone avec drop) */
.theme-dark .file-drop-zone,
.theme-dark .attachment-drop-zone,
.theme-dark .icon-dropzone {
    background: var(--surface-2) !important;
    border-color: var(--border-strong);
    color: var(--text-2);
}
.theme-dark .file-drop-zone.is-over,
.theme-dark .attachment-drop-zone.is-over,
.theme-dark .icon-dropzone.is-over {
    background: var(--primary-soft) !important;
    border-color: var(--primary);
}

/* Object warning banner (alerte sur l'objet selectionne) */
.theme-dark .object-warning-banner {
    background: var(--warn-soft) !important;
    color: var(--warn);
    border-color: var(--warn);
}

/* Trash / corbeille items */
.theme-dark .trash-card,
.theme-dark .trash-row,
.theme-dark .trash-list-item {
    background: var(--surface) !important;
    color: var(--text);
}

/* ===========================================================
   Combobox custom - dropdown contrôlé (entites + listes longues)
   ===========================================================
   Remplace <select> natif pour les longues listes (entites)
   afin de:
   - forcer ouverture vers le bas (sauf si pas de place)
   - limiter la hauteur (max-height + scroll interne)
   - permettre une recherche live
   - rester accessible (clavier + ARIA + focus visible)
   =========================================================== */

.combobox-root {
    position: relative;
    width: 100%;
    --combobox-item-height: 36px;
    --combobox-max-items: 8;
}

.combobox-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    height: 36px;
    background: var(--surface, #ffffff);
    color: var(--text, #0f172a);
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 8px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.combobox-trigger:hover {
    border-color: var(--primary, #2563eb);
}

.combobox-trigger:focus,
.combobox-trigger:focus-visible {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.combobox-trigger[aria-expanded="true"] {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.combobox-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.2;
}

.combobox-label-placeholder {
    color: var(--muted, #94a3b8);
    font-style: italic;
}

.combobox-caret {
    flex: 0 0 auto;
    color: var(--muted, #64748b);
    display: inline-flex;
    transition: transform 150ms ease;
}

.combobox-trigger[aria-expanded="true"] .combobox-caret {
    transform: rotate(180deg);
}

/* Panel - positionne en absolu sous le trigger (ou au-dessus si .combobox-open-up) */
.combobox-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1000;
    background: var(--surface, #ffffff);
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.combobox-root.combobox-open-up .combobox-panel {
    top: auto;
    bottom: calc(100% + 4px);
}

.combobox-search {
    flex: 0 0 auto;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--line, #e2e8f0);
    background: var(--bg, #f8fafc);
    color: var(--text, #0f172a);
    font: inherit;
    font-size: 13px;
    outline: none;
}

.combobox-search:focus {
    background: var(--surface, #fff);
}

.combobox-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: calc(var(--combobox-item-height) * var(--combobox-max-items) + 8px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.combobox-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text, #0f172a);
    user-select: none;
    transition: background 80ms ease;
    line-height: 1.3;
    min-height: var(--combobox-item-height);
    display: flex;
    align-items: center;
}

.combobox-option:hover,
.combobox-option.is-active {
    background: var(--bg, #eef2f7);
}

.combobox-option.is-selected {
    background: rgba(37, 99, 235, 0.08);
    font-weight: 600;
    color: var(--primary, #2563eb);
}

.combobox-empty {
    padding: 14px 12px;
    color: var(--muted, #94a3b8);
    text-align: center;
    font-style: italic;
    font-size: 13px;
}

/* Theme dark */
.theme-dark .combobox-trigger {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text, #e2e8f0);
}

.theme-dark .combobox-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(96, 165, 250, 0.6);
}

.theme-dark .combobox-trigger[aria-expanded="true"],
.theme-dark .combobox-trigger:focus,
.theme-dark .combobox-trigger:focus-visible {
    border-color: var(--primary, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.theme-dark .combobox-label-placeholder {
    color: rgba(226, 232, 240, 0.55);
}

.theme-dark .combobox-caret {
    color: rgba(226, 232, 240, 0.75);
}

.theme-dark .combobox-panel {
    background: var(--surface, #1e293b);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.35);
}

.theme-dark .combobox-search {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: var(--text, #e2e8f0);
}

.theme-dark .combobox-search::placeholder {
    color: rgba(226, 232, 240, 0.45);
}

.theme-dark .combobox-option {
    color: var(--text, #e2e8f0);
}

.theme-dark .combobox-option:hover,
.theme-dark .combobox-option.is-active {
    background: rgba(255, 255, 255, 0.08);
}

.theme-dark .combobox-option.is-selected {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
}

.theme-dark .combobox-empty {
    color: rgba(226, 232, 240, 0.55);
}

/* Compact density */
.compact-ui .combobox-root {
    --combobox-item-height: 32px;
}

.compact-ui .combobox-trigger {
    height: 32px;
    padding: 4px 9px;
    font-size: 13px;
}

.compact-ui .combobox-option {
    padding: 6px 10px;
    font-size: 13px;
}

.compact-ui .combobox-search {
    padding: 6px 10px;
    font-size: 12px;
}

/* ===========================================================
   Toolbar Home - schema gauche + grande searchbox droite
   ===========================================================
   Layout demande user: schema rarement change a gauche, vraie
   barre de recherche large a droite avec icone loupe + bouton
   clear. Recherche globale (cle, label, attributs) avec '*'.
   =========================================================== */

/* Override .home-page .toolbar (style.css) qui force padding:6px, gap:6px */
.home-page .toolbar.toolbar-home,
.toolbar.toolbar-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 12px;
}

.toolbar.toolbar-home .toolbar-schema-field {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 320px;
}

.toolbar.toolbar-home .toolbar-schema-field label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Wrapper de la search box + bouton submit, a droite */
.toolbar-search-wrap {
    flex: 1 1 420px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-left: auto;
    min-width: 320px;
    max-width: 720px;
}

/* La "vraie" barre de recherche - input + icone integres */
.toolbar-search-box {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 999px;
    height: 40px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
    cursor: text;
    position: relative;
}

.toolbar-search-box:hover {
    border-color: var(--primary, #2563eb);
}

.toolbar-search-box:focus-within {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    background: #fff;
}

.toolbar-search-icon {
    flex: 0 0 auto;
    color: var(--muted, #64748b);
    opacity: 0.85;
}

.toolbar-search-box:focus-within .toolbar-search-icon {
    color: var(--primary, #2563eb);
    opacity: 1;
}

.toolbar-search-box input[type="search"] {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text, #0f172a);
    font-size: 14px;
    line-height: 1.2;
    padding: 0;
    height: 100%;
    min-width: 0;
}

.toolbar-search-box input[type="search"]::placeholder {
    color: var(--muted, #94a3b8);
    opacity: 0.9;
    font-style: italic;
}

/* Cache la croix native du input type=search dans WebKit */
.toolbar-search-box input[type="search"]::-webkit-search-cancel-button,
.toolbar-search-box input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Croix clear personnalisee - n'apparait que si search rempli */
.toolbar-search-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--muted, #64748b);
    background: transparent;
    text-decoration: none;
    transition: background 100ms ease, color 100ms ease;
}

.toolbar-search-clear:hover {
    background: var(--bg, #f1f5f9);
    color: var(--text, #0f172a);
}

/* Bouton submit "Rechercher" a droite de la searchbox.
   Specificite renforcee pour battre les .home-page .btn legacy
   (padding/font-size/border-radius). */
.toolbar-search-wrap .toolbar-search-submit,
.home-page .toolbar-search-submit {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1;
}

/* Idem pour l'input search - bat .home-page input (padding/border-radius) */
.toolbar.toolbar-home .toolbar-search-box input[type="search"],
.home-page .toolbar-search-box input[type="search"] {
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
}

/* Responsive: passer en pile sur mobile / small viewport */
@media (max-width: 720px) {
    .toolbar.toolbar-home {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar.toolbar-home .toolbar-schema-field {
        max-width: none;
    }

    .toolbar-search-wrap {
        margin-left: 0;
        max-width: none;
    }
}

/* ----- Theme dark - searchbox lisible sur fond sombre ----- */
.theme-dark .toolbar-search-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.theme-dark .toolbar-search-box:hover {
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

.theme-dark .toolbar-search-box:focus-within {
    border-color: var(--primary, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    background: rgba(255, 255, 255, 0.07);
}

.theme-dark .toolbar-search-box input[type="search"] {
    color: var(--text, #e2e8f0);
}

.theme-dark .toolbar-search-box input[type="search"]::placeholder {
    color: rgba(226, 232, 240, 0.55);
}

.theme-dark .toolbar-search-icon {
    color: rgba(226, 232, 240, 0.75);
}

.theme-dark .toolbar-search-clear {
    color: rgba(226, 232, 240, 0.7);
}

.theme-dark .toolbar-search-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Compact density - reduit la hauteur de la searchbox */
.compact-ui .toolbar-search-box,
.compact-ui .toolbar-search-submit {
    height: 34px;
}

.compact-ui .toolbar.toolbar-home {
    padding: 6px 8px;
    gap: 10px;
}

.compact-ui .toolbar-search-box {
    padding: 0 10px;
}

.compact-ui .toolbar-search-box input[type="search"] {
    font-size: 13px;
}

.compact-ui .toolbar-search-submit {
    padding: 0 14px;
    font-size: 12px;
}