/* Amorce v2 — CSS complémentaire à Tailwind */

/* Reset body */
body {
    font-family: 'Inter', 'Roboto', sans-serif;
    color: #1A2332;
    background-color: #F8FAFB;
}

/* Scrollbar discrète */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: #B0BEC5;
    border-radius: 3px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* Cartes KPI */
.kpi-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Tables */
.q-table th {
    font-weight: 600;
    color: #1A2332;
    background: #F8FAFB;
}

/* Bouton login gradient (dynamique via --q-primary / --q-accent) */
.login-btn {
    background: linear-gradient(135deg, var(--q-primary) 0%, var(--q-accent) 100%) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--q-primary) 30%, transparent);
}

/* ── Responsive : éléments visibles partout par défaut ── */
.mobile-nav-btn { display: none !important; }
.mobile-spacer { display: none !important; }
.desktop-nav { display: flex !important; }
.desktop-nav-label { display: block !important; }

/* ── Dialogues : scroll interne si contenu dépasse l'écran ── */
/* Note : la règle doit être dans @layer utilities pour surcharger
   la classe Tailwind v4 .overflow-hidden qui est dans ce même layer. */
@layer utilities {
    .q-dialog .q-card,
    .q-dialog .q-card.overflow-hidden {
        max-height: 85vh !important;
        overflow: hidden auto !important;
    }
}
.q-dialog__inner--minimized {
    padding: 16px !important;
}

/* ── Couleurs Quasar pré-chargées ── */
/* Les variables --q-* sont injectées dynamiquement par le middleware
   anti-FOUC (main.py) en fonction de la palette active. */

/* ── Responsive mobile + tablette (<1280px) ── */
@media (max-width: 1279px) {
    /* Afficher hamburger + spacer, masquer tabs desktop */
    .mobile-nav-btn { display: inline-flex !important; }
    .mobile-spacer { display: flex !important; }
    .desktop-nav { display: none !important; }
    .desktop-nav-label { display: none !important; }
    /* Dialogues plein écran sur mobile */
    .q-dialog__inner--minimized > div {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* Drawer notifications plein écran */
    .q-drawer--right {
        width: 100vw !important;
    }
    /* Masquer complètement le volet notifications quand fermé sur mobile,
       évite le micro-flash lors du toggle du hamburger menu. */
    .q-drawer--right.q-layout--prevent-focus {
        display: none !important;
    }
    /* Tables : scroll horizontal */
    .q-table__container {
        overflow-x: auto !important;
    }
    /* Réduire le padding header */
    .q-header .q-toolbar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ── Responsive tablette (768-1279px) — dialogues ajustés ── */
@media (max-width: 1279px) and (min-width: 768px) {
    .q-dialog__inner--minimized > div {
        max-width: 90vw !important;
    }
    /* Drawer notifications : largeur réduite sur tablette */
    .q-drawer--right {
        width: 380px !important;
    }
}

/* ── Animation fade-in pour le contenu de page ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-content {
    animation: fadeIn 0.2s ease-out;
}

/* ── Composants light-only (hors layer) ── */
.login-logo-title {
    color: #1A2332;
}
.comment-quote {
    background: #F3F4F6;
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    cursor: default;
}
.comment-quote-text {
    color: #6B7280;
}
.date-sep-line {
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}
.date-sep-label {
    color: #9CA3AF;
    white-space: nowrap;
}
.progress-bar-container {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    background: #E0E0E0;
}
.reply-banner {
    border-left: 3px solid currentColor;
    background: #F9FAFB;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — Palette Slate (cohérente avec la palette active)
   Fond principal : #0f172a (slate-900)
   Surface :        #1e293b (slate-800)
   Surface hover :  #334155 (slate-700)
   Texte principal : #e2e8f0 (slate-200)
   Texte secondaire : #94a3b8 (slate-400)
   Bordures :       #334155 (slate-700)

   IMPORTANT : toutes les règles dark mode avec !important doivent
   être dans @layer utilities pour surcharger Tailwind v4 (CSS Cascade
   Layers : les !important dans un layer battent ceux hors layer).
   ══════════════════════════════════════════════════════════════════ */

@layer utilities {

    /* ── Base ── */
    body.body--dark {
        background-color: #0f172a !important;
        color: #e2e8f0 !important;
    }
    body.body--dark .q-header {
        background-color: #1e293b !important;
        border-bottom: 1px solid #334155;
    }
    body.body--dark .q-footer {
        background-color: #1e293b !important;
        border-top-color: #334155 !important;
    }
    body.body--dark .q-page-container {
        background-color: #0f172a !important;
    }

    /* ── Surfaces Tailwind ── */
    body.body--dark .bg-white {
        background-color: #1e293b !important;
    }
    body.body--dark .bg-\[\#F8FAFB\] {
        background-color: #0f172a !important;
    }
    body.body--dark .bg-gray-50 {
        background-color: #1e293b !important;
    }
    body.body--dark .bg-gray-100 {
        background-color: #334155 !important;
    }
    body.body--dark .bg-gray-200 {
        background-color: #334155 !important;
    }

    /* ── Textes Tailwind ── */
    body.body--dark .text-dark {
        color: #e2e8f0 !important;
    }
    body.body--dark .text-gray-300 {
        color: #64748b !important;
    }
    body.body--dark .text-gray-400 {
        color: #94a3b8 !important;
    }
    body.body--dark .text-gray-500 {
        color: #94a3b8 !important;
    }
    body.body--dark .text-gray-600 {
        color: #cbd5e1 !important;
    }
    body.body--dark .text-gray-700 {
        color: #cbd5e1 !important;
    }
    body.body--dark .text-gray-800 {
        color: #e2e8f0 !important;
    }

    /* ── Bordures Tailwind ── */
    body.body--dark .border-gray-100 {
        border-color: #334155 !important;
    }
    body.body--dark .border-gray-200 {
        border-color: #334155 !important;
    }
    body.body--dark .border-gray-300 {
        border-color: #475569 !important;
    }
    body.body--dark .border-t {
        border-color: #334155 !important;
    }

    /* ── Hover Tailwind ── */
    body.body--dark .hover\:bg-gray-50:hover {
        background-color: #334155 !important;
    }
    body.body--dark .hover\:bg-gray-100:hover {
        background-color: #334155 !important;
    }
    body.body--dark .hover\:bg-red-50:hover {
        background-color: rgba(239, 68, 68, 0.15) !important;
    }
    body.body--dark .hover\:bg-blue-50:hover {
        background-color: rgba(59, 130, 246, 0.15) !important;
    }
    body.body--dark .hover\:bg-indigo-50:hover {
        background-color: rgba(99, 102, 241, 0.15) !important;
    }
    body.body--dark .hover\:bg-purple-50:hover {
        background-color: rgba(168, 85, 247, 0.15) !important;
    }
    body.body--dark .hover\:bg-teal-50:hover {
        background-color: rgba(20, 184, 166, 0.15) !important;
    }
    body.body--dark .hover\:bg-green-50:hover {
        background-color: rgba(34, 197, 94, 0.15) !important;
    }
    body.body--dark .hover\:bg-amber-50:hover {
        background-color: rgba(245, 158, 11, 0.15) !important;
    }
    body.body--dark .hover\:bg-orange-50:hover {
        background-color: rgba(249, 115, 22, 0.15) !important;
    }

    /* ── Fonds colorés -100 (icônes notifications, etc.) ── */
    body.body--dark .bg-teal-100 {
        background-color: rgba(20, 184, 166, 0.2) !important;
    }
    body.body--dark .bg-red-100 {
        background-color: rgba(239, 68, 68, 0.2) !important;
    }
    body.body--dark .bg-orange-100 {
        background-color: rgba(249, 115, 22, 0.2) !important;
    }
    body.body--dark .bg-green-100 {
        background-color: rgba(34, 197, 94, 0.2) !important;
    }
    body.body--dark .bg-blue-100 {
        background-color: rgba(59, 130, 246, 0.2) !important;
    }
    body.body--dark .bg-purple-100 {
        background-color: rgba(168, 85, 247, 0.2) !important;
    }
    body.body--dark .bg-indigo-100 {
        background-color: rgba(99, 102, 241, 0.2) !important;
    }
    body.body--dark .bg-amber-100 {
        background-color: rgba(245, 158, 11, 0.2) !important;
    }

    /* ── Fonds sémantiques (alertes, badges) ── */
    body.body--dark .bg-amber-50 {
        background-color: rgba(245, 158, 11, 0.15) !important;
    }
    body.body--dark .bg-orange-50 {
        background-color: rgba(249, 115, 22, 0.15) !important;
    }
    body.body--dark .bg-red-50 {
        background-color: rgba(239, 68, 68, 0.15) !important;
    }
    body.body--dark .bg-green-50 {
        background-color: rgba(34, 197, 94, 0.15) !important;
    }
    body.body--dark .bg-blue-50 {
        background-color: rgba(59, 130, 246, 0.15) !important;
    }
    body.body--dark .bg-teal-50 {
        background-color: rgba(20, 184, 166, 0.15) !important;
    }

    /* ── Textes alertes (lisibilité dark) ── */
    body.body--dark .text-amber-800,
    body.body--dark .text-amber-600 {
        color: #fbbf24 !important;
    }
    body.body--dark .text-orange-800,
    body.body--dark .text-orange-500 {
        color: #fb923c !important;
    }
    body.body--dark .text-red-600,
    body.body--dark .text-red-700 {
        color: #f87171 !important;
    }
    body.body--dark .text-green-600,
    body.body--dark .text-green-700 {
        color: #4ade80 !important;
    }
    body.body--dark .text-teal-600,
    body.body--dark .text-teal-700 {
        color: #2dd4bf !important;
    }
    body.body--dark .text-blue-600,
    body.body--dark .text-blue-700 {
        color: #60a5fa !important;
    }

    /* ── Bordures alertes ── */
    body.body--dark .border-amber-200,
    body.body--dark .border-amber-300 {
        border-color: rgba(245, 158, 11, 0.4) !important;
    }
    body.body--dark .border-orange-200 {
        border-color: rgba(249, 115, 22, 0.4) !important;
    }
    body.body--dark .border-red-200 {
        border-color: rgba(239, 68, 68, 0.4) !important;
    }
    body.body--dark .border-green-200 {
        border-color: rgba(34, 197, 94, 0.4) !important;
    }
    body.body--dark .border-blue-200 {
        border-color: rgba(59, 130, 246, 0.4) !important;
    }

    /* ── Composants Quasar ── */
    body.body--dark .q-table th {
        background: #1e293b !important;
        color: #e2e8f0 !important;
    }
    body.body--dark .q-card {
        background-color: #1e293b !important;
    }
    body.body--dark .q-separator {
        background-color: #334155 !important;
    }
    body.body--dark .q-field--outlined .q-field__control:before {
        border-color: #475569 !important;
    }
    body.body--dark .q-field__control {
        color: #e2e8f0 !important;
    }
    body.body--dark .q-tabs .q-tab {
        color: #94a3b8 !important;
    }
    body.body--dark .q-tabs .q-tab--active {
        color: var(--q-primary) !important;
    }
    body.body--dark .q-expansion-item__container {
        background-color: #1e293b !important;
    }
    body.body--dark .q-menu {
        background-color: #1e293b !important;
        color: #e2e8f0 !important;
    }
    body.body--dark .q-item {
        color: #e2e8f0 !important;
    }
    body.body--dark .q-item:hover,
    body.body--dark .q-item--active {
        background-color: #334155 !important;
    }
    body.body--dark .q-popup-proxy .q-card {
        background-color: #1e293b !important;
    }
    body.body--dark .q-dialog .q-card {
        background-color: #1e293b !important;
        color: #e2e8f0 !important;
    }
    body.body--dark .q-drawer {
        background-color: #1e293b !important;
    }
    body.body--dark .q-field__label {
        color: #94a3b8 !important;
    }
    body.body--dark .q-field__native,
    body.body--dark .q-field__input {
        color: #e2e8f0 !important;
    }
    body.body--dark .q-field--filled .q-field__control {
        background-color: #334155 !important;
    }
    body.body--dark .q-select__dropdown-icon {
        color: #94a3b8 !important;
    }
    body.body--dark .q-chip {
        background-color: #334155 !important;
        color: #e2e8f0 !important;
    }
    body.body--dark .q-badge {
        color: white !important;
    }
    body.body--dark .q-toggle__inner {
        color: #94a3b8 !important;
    }
    body.body--dark .q-table__container {
        background-color: #1e293b !important;
    }
    body.body--dark .q-table tbody td {
        color: #e2e8f0 !important;
    }
    body.body--dark .q-table--horizontal-separator tbody tr:not(:last-child) > td {
        border-bottom-color: #334155 !important;
    }
    body.body--dark .q-table thead tr {
        border-bottom-color: #334155 !important;
    }
    body.body--dark .q-table__bottom {
        color: #94a3b8 !important;
        border-top-color: #334155 !important;
    }
    body.body--dark .q-checkbox__inner {
        color: #94a3b8 !important;
    }
    body.body--dark .q-btn-dropdown__arrow {
        color: #94a3b8 !important;
    }
    body.body--dark .q-tooltip {
        background-color: #0f172a !important;
        color: #e2e8f0 !important;
    }
    body.body--dark .q-notification {
        background-color: #1e293b !important;
        color: #e2e8f0 !important;
    }
    body.body--dark .q-select .q-field__append .q-icon {
        color: #94a3b8 !important;
    }
    body.body--dark .q-textarea .q-field__native {
        color: #e2e8f0 !important;
    }
    body.body--dark .q-btn--flat:not(.text-primary):not(.text-red-500):not(.text-green-500):not(.text-orange-500) {
        color: #cbd5e1 !important;
    }

    /* ── KPI cards ── */
    body.body--dark .kpi-card {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }
    body.body--dark .kpi-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    }

    /* ── Scrollbar ── */
    body.body--dark ::-webkit-scrollbar-thumb {
        background: #475569 !important;
    }

    /* ── Login ── */
    body.body--dark .login-btn {
        box-shadow: 0 2px 8px rgba(46, 184, 160, 0.15) !important;
    }
    body.body--dark .login-logo-title {
        color: #e2e8f0 !important;
    }

    /* ── Navigation drawer active ── */
    body.body--dark .bg-teal-50.text-teal-700 {
        background-color: rgba(20, 184, 166, 0.15) !important;
        color: #2dd4bf !important;
    }

    /* ── Commentaires : bloc citation ── */
    body.body--dark .comment-quote {
        background: #334155 !important;
    }
    body.body--dark .comment-quote-text {
        color: #94a3b8 !important;
    }

    /* ── Séparateur de date ── */
    body.body--dark .date-sep-line {
        background: #334155 !important;
    }
    body.body--dark .date-sep-label {
        color: #64748b !important;
    }

    /* ── Barre de progression (checklist) ── */
    body.body--dark .progress-bar-container {
        background: #475569 !important;
    }

    /* ── Chat bubbles (commentaires) ── */
    body.body--dark .q-message-text-content {
        color: #e2e8f0 !important;
    }
    body.body--dark .q-message-text {
        background-color: #1e293b !important;
        color: #1e293b !important;
    }
    body.body--dark .q-message-text--sent {
        background-color: #1e3a5f !important;
        color: #1e3a5f !important;
    }
    body.body--dark .q-message-text:last-child:before {
        border-bottom-color: #1e293b !important;
    }
    body.body--dark .q-message-text--sent:last-child:before {
        border-bottom-color: #1e3a5f !important;
    }

    /* ── Reply banner ── */
    body.body--dark .reply-banner {
        background: #1e293b !important;
    }

    /* ── Timeline (SAV) ── */
    body.body--dark .tl-line {
        border-left-color: #334155 !important;
    }

} /* fin @layer utilities */