/* ════════════════════════════════════════════════════════════════
   VECTIA — Overrides custom (au-delà de Tailwind)
   ════════════════════════════════════════════════════════════════ */

/* État actif de la sidebar */
.nav-item.active {
    background: rgba(201, 123, 31, 0.15);   /* secondary à 15% */
    color: #FFFFFF;
    border-left: 3px solid #C97B1F;
    padding-left: calc(0.75rem - 3px);
}

/* Scrollbar personnalisée pour les zones sombres */
.nav-item:focus-visible {
    outline: 2px solid #C97B1F;
    outline-offset: 2px;
}

/* Animation d'apparition des vues */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
#view-root > * {
    animation: fade-in 0.25s ease-out;
}

/* Cards génériques */
.v-card {
    background: white;
    border: 1px solid #E5E3DC;
    transition: border-color 0.15s;
}
.v-card:hover {
    border-color: #C97B1F;
}

/* KPI cards */
.kpi-card {
    background: white;
    border: 1px solid #E5E3DC;
    border-left: 3px solid #1E3A5F;
    padding: 1.25rem 1.5rem;
}
.kpi-card.kpi-warn { border-left-color: #C97B1F; }
.kpi-card.kpi-bad  { border-left-color: #B03A2E; }
.kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555555;
    margin-bottom: 0.5rem;
}
.kpi-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2rem;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.kpi-foot {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: #555555;
}

/* Tableaux */
.v-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.v-table thead th {
    background: #F4F3EE;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555555;
    border-bottom: 1px solid #E5E3DC;
    white-space: nowrap;
}
.v-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #E5E3DC;
    vertical-align: top;
}
.v-table tbody tr:hover {
    background: #F4F3EE;
}
.v-table .num {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Badges plans */
.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid #E5E3DC;
    border-radius: 2px;
    background: #F4F3EE;
    color: #555555;
    margin-right: 4px;
}
.badge-essentiel     { border-color: #777; color: #555; }
.badge-affaires      { border-color: #1E3A5F; color: #1E3A5F; background: #EEF3F9; font-weight: 600; }
.badge-professionnel { border-color: #6A4C93; color: #6A4C93; background: #F3EEF9; font-weight: 600; }
.badge-elite         { border-color: #B8860B; color: #8A6608; background: #FFF8E1; font-weight: 700; }

/* Alertes (Master Admin) */
.alert {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid #E5E3DC;
    background: white;
    align-items: center;
    margin-bottom: 0.5rem;
}
.alert-high   { background: #FBEAE8; border-color: #B03A2E; }
.alert-medium { background: #FDF5E6; border-color: #C97B1F; }
.alert-low    { background: #EEF4F3; border-color: #2D6A4F; }
.alert-severity {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.alert-high .alert-severity   { color: #B03A2E; }
.alert-medium .alert-severity { color: #C97B1F; }
.alert-low .alert-severity    { color: #2D6A4F; }

/* ─── Agent widget : chat bubbles ─── */
.msg-bubble {
    max-width: 88%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.45;
    border-radius: 0.5rem;
    word-wrap: break-word;
}
.msg-user {
    background: #1E3A5F;
    color: white;
    align-self: flex-end;
    margin-left: auto;
}
.msg-agent {
    background: white;
    border: 1px solid #E5E3DC;
    color: #1A1A1A;
}
.msg-tool {
    background: #F4F3EE;
    border: 1px dashed #C97B1F;
    color: #555555;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
}
.msg-error {
    background: #FBEAE8;
    border: 1px solid #B03A2E;
    color: #B03A2E;
    font-size: 0.8rem;
}
.msg-bubble pre {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(0,0,0,0.04);
    border-radius: 0.25rem;
    font-size: 0.72rem;
    overflow-x: auto;
    max-height: 240px;
}
.msg-bubble code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}
.msg-bubble strong { font-weight: 600; }
.msg-bubble table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.78rem; }
.msg-bubble th, .msg-bubble td { padding: 4px 8px; border-bottom: 1px solid #E5E3DC; text-align: left; }
.msg-bubble th { background: #F4F3EE; font-weight: 500; }

/* Loading dots */
.typing {
    display: inline-flex;
    gap: 4px;
    padding: 0.5rem 0.875rem;
}
.typing span {
    width: 6px; height: 6px;
    background: #999;
    border-radius: 50%;
    animation: typing-bounce 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #999999;
    font-size: 0.875rem;
}
.empty-state-title {
    font-family: 'Fraunces', serif;
    font-size: 1.125rem;
    color: #555555;
    margin-bottom: 0.5rem;
}

/* Utilitaire : H pages */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #1A1A1A;
    margin-bottom: 2rem;
}
.page-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
}
.page-title em {
    font-style: italic;
    color: #555555;
}
.page-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #555555;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   FIX MODE CLAIR — Sidebar lisible v2
   ────────────────────────────────────────────────────────────────
   • Sidebar en thème sombre Vectia permanent (pattern SaaS pro)
   • 2ème zone (modules + tenant card) en fond gris-bleu doux
     pour distinguer visuellement sans casser la cohérence
   • Tous les badges (plan, role) lisibles
   ──────────────────────────────────────────────────────────────── */

html[data-theme="light"] body aside.w-64,
html[data-theme="light"] aside.w-64 {
    background-color: #1e3a5f !important;  /* bleu Vectia primary */
    color: #ffffff !important;
}

/* La 2ème partie (modules nav + carte tenant) en gris-bleu plus profond */
html[data-theme="light"] aside.w-64 > *:not(:first-child) {
    background-color: #182d49 !important;  /* +15% plus sombre */
}

html[data-theme="light"] aside.w-64 * {
    color: inherit;
}

/* ─── Logo + tenant header ────────────────────────────────────── */
html[data-theme="light"] aside.w-64 .font-serif,
html[data-theme="light"] aside.w-64 #sidebar-tenant {
    color: #ffffff !important;
}

/* ─── Badges plan + role (le bug en rouge !) ──────────────────── */
html[data-theme="light"] aside.w-64 #sidebar-plan,
html[data-theme="light"] aside.w-64 #sidebar-role,
html[data-theme="light"] aside.w-64 [class*="bg-vectia-secondary"],
html[data-theme="light"] aside.w-64 [class*="bg-white\\/10"] {
    background-color: rgba(201, 123, 31, 0.25) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(201, 123, 31, 0.4) !important;
}

html[data-theme="light"] aside.w-64 #sidebar-role {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ─── Opacity helpers white ───────────────────────────────────── */
html[data-theme="light"] aside.w-64 .text-white\/60 { color: rgba(255, 255, 255, 0.7) !important; }
html[data-theme="light"] aside.w-64 .text-white\/50 { color: rgba(255, 255, 255, 0.6) !important; }
html[data-theme="light"] aside.w-64 .text-white\/40 { color: rgba(255, 255, 255, 0.5) !important; }
html[data-theme="light"] aside.w-64 .text-white\/10 { background-color: rgba(255, 255, 255, 0.08) !important; }

/* ─── Section labels (COCKPIT, COMMERCIAL, FINANCE, etc.) ─────── */
html[data-theme="light"] aside.w-64 [class*="uppercase"][class*="tracking"] {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ─── Carte "Vectia · SaaS QC" (mini hero tenant) ─────────────── */
html[data-theme="light"] aside.w-64 [class*="rounded"]:not(button):not(a) {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ─── Sous-section "Forfait Vectia" + super admin badge ──────── */
html[data-theme="light"] aside.w-64 .bg-vectia-secondary {
    background-color: rgba(201, 123, 31, 0.20) !important;
    color: #fbbf24 !important;
}

/* ─── Items de navigation ─────────────────────────────────────── */
html[data-theme="light"] aside.w-64 a.nav-item,
html[data-theme="light"] aside.w-64 a[data-route] {
    color: rgba(255, 255, 255, 0.78) !important;
    transition: all 0.2s ease;
}
html[data-theme="light"] aside.w-64 a.nav-item:hover,
html[data-theme="light"] aside.w-64 a[data-route]:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
html[data-theme="light"] aside.w-64 a.nav-item.active,
html[data-theme="light"] aside.w-64 a.nav-item[data-active="true"],
html[data-theme="light"] aside.w-64 a[data-route].active,
html[data-theme="light"] aside.w-64 a[data-route][data-active="true"] {
    background-color: rgba(0, 210, 255, 0.12) !important;
    color: #00d2ff !important;
    box-shadow: inset 2px 0 0 #00d2ff;
}

/* ─── Footer sidebar ──────────────────────────────────────────── */
html[data-theme="light"] aside.w-64 .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX MODE CLAIR — Sidebar v4 : kill du fond blanc forcé sur <nav>
   ──────────────────────────────────────────────────────────────── */

html[data-theme="light"] aside.w-64 nav.vectia-sidebar-root,
html[data-theme="light"] aside.w-64 .vectia-sidebar-root {
    background-color: #1a2f4a !important;
    background: #1a2f4a !important;
}

/* Tous les enfants de la nav (sections, items) restent transparents
   pour laisser le fond bleu-marine traverser */
html[data-theme="light"] aside.w-64 .vectia-sidebar-root > *,
html[data-theme="light"] aside.w-64 .vectia-sidebar-root section,
html[data-theme="light"] aside.w-64 .vectia-sidebar-root div {
    background-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX MODE CLAIR — Section labels en cyan néon LED
   ────────────────────────────────────────────────────────────────
   Sélecteur exact identifié : <h3 class="vectia-sidebar-section-title">
   Texte natif en casse mixte ("Cockpit"), affiché en MAJUSCULES via
   text-transform CSS hérité.
   ──────────────────────────────────────────────────────────────── */

html[data-theme="light"] aside.w-64 .vectia-sidebar-section-title,
html[data-theme="light"] aside.w-64 h3.vectia-sidebar-section-title {
    color: #00d2ff !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.45);
    letter-spacing: 0.20em;
    font-weight: 600;
    opacity: 0.92;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* Petit voyant LED cyan pulsant à gauche de chaque label */
html[data-theme="light"] aside.w-64 .vectia-sidebar-section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #00d2ff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.7);
    flex-shrink: 0;
    animation: vectia-led-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes vectia-led-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.7); }
}