/* ==========================================================================
   COQUILLE DE L'APPLICATION — mode sombre, notifications, recherche
   ==========================================================================

   Ces règles vivaient dans le <style> en ligne de templates/partials/head.html,
   renvoyé avec CHAQUE page sans jamais être mis en cache. Elles ne dépendent
   d'aucun réglage : seuls les jetons tirés de GlobalSettings (`:root` et
   `:root[data-theme="light"]`) restent en ligne.

   ORDRE : chargée JUSTE APRÈS ce <style>. Le `@media (prefers-color-scheme:
   dark) :root` ci-dessous a la même spécificité que le `:root` en ligne : il
   doit venir après lui pour l'emporter en mode sombre.
   ========================================================================== */
/* === DARK MODE ===
   S'active soit via la préférence système (prefers-color-scheme), soit via le
   sélecteur du header (templates/partials/header.html + scripts.html) qui pose
   data-theme sur <html> et le persiste en localStorage. Les couleurs de marque
   (--primary-color etc.) ne sont volontairement PAS réécrites ici : ce sont des
   choix de l'administrateur (thème blanc-marque), valables dans les deux modes. */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #14161b;
        --text-color: #e8eaed;
        --text-secondary-color: #9aa0ac;
        --surface-color: #1e2128;
        --surface-alt-color: #262a33;
        --border-color: #383e4a;
        --header-background-color: var(--surface-color);
        /* Même logique que --header-background-color juste au-dessus : la paire
           couleur de texte/icônes choisie par l'admin est pensée pour SON fond
           header (ex: texte blanc sur vert foncé) — mais ce fond est ignoré en
           mode sombre au profit de --surface-color. Réutiliser malgré tout la
           couleur de texte admin la rendrait potentiellement illisible (ex: texte
           foncé pensé pour un header clair, sur un fond de surface sombre). */
        --header-text-color: var(--text-color);
        --header-hover-color: var(--surface-alt-color);
        /* Sidebar : même traitement que le header ci-dessus. GlobalSettings.sidebar_*
           reste la référence en clair (y compris quand l'admin choisit une sidebar
           claire, cas réel vu en capture — texte vert sur fond blanc), mais un rail
           resté clair à côté d'un contenu sombre casserait le mode sombre. Palette
           ardoise fixe (indépendante de la marque) plutôt que --surface-color : la
           sidebar doit rester un rail visuellement distinct du contenu, comme en
           clair (rail sombre / contenu clair, ici rail encore plus profond / contenu
           --surface-color). */
        --sidebar-background-color: #10131a;
        --sidebar-hover-color: #1f242e;
        --sidebar-active-color: #04050a;
        --sidebar-text-color: #e8eaed;
    }
}
:root[data-theme="dark"] {
    --background-color: #14161b;
    --text-color: #e8eaed;
    --text-secondary-color: #9aa0ac;
    --surface-color: #1e2128;
    --surface-alt-color: #262a33;
    --border-color: #383e4a;
    --header-background-color: var(--surface-color);
    --header-text-color: var(--text-color);
    --header-hover-color: var(--surface-alt-color);
    --sidebar-background-color: #10131a;
    --sidebar-hover-color: #1f242e;
    --sidebar-active-color: #04050a;
    --sidebar-text-color: #e8eaed;
}

/* AG Grid (table_detail.html, module embarqué) : thème alpine construit sur
   des variables CSS (--ag-*) — pas besoin du fichier ag-theme-alpine-dark
   séparé, on réutilise les tokens de surface déjà définis ci-dessus. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ag-theme-alpine {
        --ag-background-color: var(--surface-color);
        --ag-foreground-color: var(--text-color);
        --ag-header-background-color: var(--surface-alt-color);
        --ag-header-foreground-color: var(--text-color);
        --ag-border-color: var(--border-color);
        --ag-secondary-border-color: var(--border-color);
        --ag-row-hover-color: var(--surface-alt-color);
        --ag-control-panel-background-color: var(--surface-alt-color);
        --ag-chip-background-color: var(--surface-alt-color);
        --ag-input-border-color: var(--border-color);
        --ag-disabled-foreground-color: var(--text-secondary-color);
        --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.55);
        --ag-odd-row-background-color: var(--surface-alt-color);
        --ag-tooltip-background-color: var(--surface-alt-color);
        --ag-subheader-background-color: var(--surface-color);
    }
}
:root[data-theme="dark"] .ag-theme-alpine {
    --ag-background-color: var(--surface-color);
    --ag-foreground-color: var(--text-color);
    --ag-header-background-color: var(--surface-alt-color);
    --ag-header-foreground-color: var(--text-color);
    --ag-border-color: var(--border-color);
    --ag-secondary-border-color: var(--border-color);
    --ag-row-hover-color: var(--surface-alt-color);
    --ag-control-panel-background-color: var(--surface-alt-color);
    --ag-chip-background-color: var(--surface-alt-color);
    --ag-input-border-color: var(--border-color);
    --ag-disabled-foreground-color: var(--text-secondary-color);
    --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.55);
    --ag-odd-row-background-color: var(--surface-alt-color);
    --ag-tooltip-background-color: var(--surface-alt-color);
    --ag-subheader-background-color: var(--surface-color);
}

/* Notifications — badge d'icône par niveau et rangées façon Odoo (rangée
   plate, accent de 3px à gauche pour le non-lu au lieu d'un fond teinté
   plein, cohérent avec .task-card-priority::before de theme.css).
   .notif-icon-* est partagé entre le dropdown (templates/partials/header.html
   + scripts.html) et la page complète (index/templates/index/notifications.html)
   pour une identité visuelle unique entre les deux affichages. Tokens de
   surface (var(--surface-color) etc.) plutôt que couleurs en dur : seul
   moyen de suivre le dark mode (voir tête de fichier, § DARK MODE). */
.notif-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--border-radius-small, 6px);
    flex-shrink: 0; font-size: 0.85rem;
}
.notif-icon-info { background: rgba(var(--bs-primary-rgb, 13, 110, 253), .12); color: var(--bs-primary, #0d6efd); }
.notif-icon-success { background: rgba(var(--bs-success-rgb, 25, 135, 84), .14); color: var(--bs-success, #198754); }
.notif-icon-warning { background: rgba(var(--bs-warning-rgb, 255, 193, 7), .18); color: var(--bs-warning, #ffc107); }
.notif-icon-error { background: rgba(var(--bs-danger-rgb, 220, 53, 69), .12); color: var(--bs-danger, #dc3545); }

.notif-dropdown-menu { width: 340px; max-width: 90vw; border-radius: var(--border-radius-medium, 8px); overflow: hidden; }
.notif-dropdown-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border-color);
}
.notif-dropdown-header strong { font-size: 0.85rem; }
.notif-dropdown-list { max-height: 360px; overflow-y: auto; }
.notif-dropdown-item {
    position: relative;
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.6rem 0.9rem 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: inherit; text-decoration: none;
    transition: background .12s ease;
}
.notif-dropdown-list .notif-dropdown-item:last-child { border-bottom: none; }
.notif-dropdown-item:hover { background-color: var(--surface-alt-color); color: inherit; }
.notif-dropdown-item > div { min-width: 0; } /* laisse notif-message tronquer (line-clamp) plutôt que d'étirer le dropdown */
.notif-dropdown-item::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; }
.notif-dropdown-item.unread::before { background: var(--primary-color); }
.notif-dropdown-item .notif-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-color); }
.notif-dropdown-item.unread .notif-title { font-weight: 700; }
.notif-dropdown-item .notif-message {
    font-size: 0.75rem; color: var(--text-secondary-color); margin: 0.15rem 0 0;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-dropdown-item .notif-time { font-size: 0.68rem; color: var(--text-secondary-color); margin-top: 0.25rem; } /* contraste WCAG AA vérifié via var(--text-secondary-color) */
.notif-dropdown-empty { padding: 2rem 1rem; text-align: center; color: var(--text-secondary-color); }
.notif-dropdown-empty i { font-size: 1.4rem; display: block; margin-bottom: 0.5rem; }
.notif-dropdown-footer {
    display: block; text-align: center; font-size: 0.78rem; padding: 0.55rem;
    border-top: 1px solid var(--border-color); color: var(--text-secondary-color);
    text-decoration: none; transition: background .12s ease, color .12s ease;
}
.notif-dropdown-footer:hover { background: var(--surface-alt-color); color: var(--color-primary-text); }

/* Recherche transverse (voir index/views/search.py). Topbar claire
   (var(--color-surface)) depuis le passage au layout sidebar+topbar —
   ces styles étaient pensés pour l'ancien header plein `--primary-color`
   (texte blanc sur fond translucide blanc), remplacés par un champ
   gris clair classique lisible sur fond clair. */
.header-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; margin: 0 1rem; }
/* min-width empêche le champ (et son dropdown, qui hérite de sa largeur) de se faire compresser à quelques pixels par flex-shrink entre 768px et ~1024px, rendant les résultats quasi impossibles à cliquer avant même le repli mobile (breakpoint remonté à 992px ci-dessous). */
.header-search-form { position: relative; width: 100%; max-width: 380px; min-width: 220px; }
.header-search-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary-color); font-size: 0.8rem; pointer-events: none; }
.header-search-input {
    width: 100%;
    padding: 0.3125rem 0.75rem 0.3125rem 2rem;
    border-radius: var(--radius, 6px);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-alt-color, #f1f5f9);
    color: var(--text-color);
    font-size: 0.8125rem;
    transition: background var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease);
}
.header-search-input::placeholder { color: var(--text-secondary-color); }
.header-search-input:focus { outline: none; background: var(--surface-color, #fff); border-color: var(--accent-color); box-shadow: var(--focus-ring); }
.header-search-mobile-btn { display: none; }

/* Dropdown de résultats live (recherche transverse, voir index/views/search.py
   + templates/partials/scripts.html pour l'affichage/masquage) */
.header-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface-color, #fff);
    color: var(--text-color, #1f2937);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-md);
    z-index: 1050;
    text-align: left;
    font-size: 0.875rem;
}
.header-search-dropdown.show { display: block; }
.header-search-dropdown .section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary-color); padding: 0.5rem 0.9rem 0.25rem; margin: 0; }
.header-search-dropdown .list-group-item { border-left: none; border-right: none; font-size: 0.85rem; background: var(--surface-color); color: var(--text-color); }
.header-search-dropdown .list-group-item:first-of-type { border-top: none; }
.search-dropdown-hint { padding: 1rem; color: var(--text-secondary-color); font-size: 0.85rem; margin: 0; }
.search-dropdown-seeall { display: block; text-align: center; padding: 0.55rem; font-size: 0.8125rem; font-weight: 600; border-top: 1px solid var(--border-color); text-decoration: none; }
@media (max-width: 992px) {
    .header-center { display: none; }
    .header-search-mobile-btn { display: inline-flex; align-items: center; }
}