/* Cabinet — CSS component styles
 * Loaded by cabinet.html.twig (embedded in site layout)
 * @font-face and body{} are handled by the goubs-net theme.
 */

:root{
  --cab-accent:var(--color-primary);
  --cab-accent-hover:var(--color-primary-darker);
  --cab-accent-fg:#fff;
  --cab-bg:var(--color-white);
  --cab-accent-30:color-mix(in srgb,var(--cab-accent) 30%,var(--cab-bg));
  --cab-surface:var(--color-zinc-100);
  --cab-surface-alt:color-mix(in oklch,var(--color-zinc-100),var(--color-zinc-200));
  --cab-border:var(--color-zinc-200);
  --cab-text:var(--color-zinc-700);
  --cab-text-sec:var(--color-zinc-500);
  --cab-text-dim:var(--color-zinc-400);
}
:root.dark{
  --cab-accent:var(--color-primary-lighter);
  --cab-accent-hover:var(--color-primary);
  --cab-accent-fg:#fff;
  --cab-bg:var(--color-zinc-900);
  --cab-surface:var(--color-zinc-800);
  --cab-surface-alt:var(--color-zinc-700);
  --cab-border:var(--color-zinc-700);
  --cab-text:var(--color-zinc-200);
  --cab-text-sec:var(--color-zinc-400);
  --cab-text-dim:var(--color-zinc-500);
}

/* ── Shared utilities ── */
.cab-section *{box-sizing:border-box;margin:0;padding:0}
.section-label{font-size:11px;font-weight:600;color:var(--cab-text-sec);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12px;color:var(--cab-text-sec)}
.field input,.field textarea,.field select{font-size:13px;padding:7px 10px;border-radius:8px;border:1px solid var(--cab-border);background:var(--cab-bg);color:var(--cab-text);resize:none;font-family:inherit;outline:none;transition:border-color .15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cab-accent)}
.field textarea{min-height:70px}
.field-full{grid-column:1/-1}
.field-hint{font-size:11px;color:var(--cab-text-sec);margin-top:4px}
.btn-save{background:var(--cab-accent);color:var(--cab-accent-fg);border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;margin-top:4px;transition:background .15s}
.btn-save:hover{background:var(--cab-accent-hover)}
.btn-ghost{background:transparent;color:var(--cab-text-sec);border:1px solid var(--cab-border);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.btn-ghost:hover{background:var(--cab-surface);color:var(--cab-text)}
.btn-row{display:flex;gap:10px;align-items:center}
.btn-sm{font-size:12px;padding:4px 10px}
.obs-label{font-size:11px;color:var(--cab-text-sec);margin-bottom:3px;margin-top:10px}
.obs-label:first-child{margin-top:0}
.obs-text{font-size:13px;white-space:pre-wrap;line-height:1.5}
.pill-ex{display:inline-block;background:var(--cab-surface);border:1px solid var(--cab-border);border-radius:20px;padding:2px 8px;font-size:11px;color:var(--cab-text-sec);margin:2px}
.internal-badge{display:inline-flex;align-items:center;gap:5px;background:#fff8e1;border:1px solid #ffe082;border-radius:6px;padding:5px 10px;font-size:11px;color:#7b5800;margin-bottom:14px}
.dark .internal-badge{background:#2a1f00;border-color:#5a4200;color:#f5c842}

/* ── Toasts ── */
.cab-toast-stack{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.cab-toast{max-width:360px;padding:10px 12px;border-radius:8px;border:1px solid var(--cab-border);background:var(--cab-bg);color:var(--cab-text);box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);font-size:13px;line-height:1.35}
.cab-toast.is-success{border-color:color-mix(in srgb,#3B6D11 35%,var(--cab-border));background:color-mix(in srgb,#3B6D11 9%,var(--cab-bg))}
.cab-toast.is-error{border-color:color-mix(in srgb,var(--cab-accent) 45%,var(--cab-border));background:color-mix(in srgb,var(--cab-accent) 9%,var(--cab-bg))}
.cab-toast.is-warning{border-color:color-mix(in srgb,#d97706 45%,var(--cab-border));background:color-mix(in srgb,#d97706 10%,var(--cab-bg));color:color-mix(in srgb,#92400e 75%,var(--cab-text))}

/* ── Session cards ── */
.session-head-primary{background:color-mix(in srgb,var(--cab-accent) 33%,transparent)}
.session-border-primary{border-color:color-mix(in srgb,var(--cab-accent) 22%,transparent)}
.dark .session-head-primary{background:color-mix(in srgb,var(--cab-accent) 11%,transparent)}
.dark .session-border-primary{border-color:color-mix(in srgb,var(--cab-accent) 18%,transparent)}

/* ── Energie chips ── */
.energie-chip{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500}
.e-plein{background:color-mix(in srgb,#be011d 10%,transparent);color:var(--cab-accent);border:1px solid color-mix(in srgb,#be011d 25%,transparent)}
.e-vide{background:#e8f4fd;color:#185FA5;border:1px solid #b5d4f4}
.e-stase{background:#fff8e1;color:#7b5800;border:1px solid #ffe082}
.e-ok{background:#eaf3de;color:#3B6D11;border:1px solid #c0dd97}
.e-nd{background:var(--cab-surface);color:var(--cab-text-sec);border:1px solid var(--cab-border)}
.dark .e-vide{background:#0d2136;color:#64b5f6;border-color:#1e4d7b}
.dark .e-stase{background:#2a1f00;border-color:#5a4200;color:#f5c842}
.dark .e-ok{background:#0d2306;color:#81c784;border-color:#2e5e1e}

/* ── SMS template (grav sections) ── */
.sms-template{border-top:1px solid var(--cab-border);padding:10px 12px;background:var(--cab-bg)}
.sms-template-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:11px;font-weight:600;color:var(--cab-text-sec);text-transform:uppercase;letter-spacing:.4px}
.sms-copy-btn{padding:4px 8px;font-size:11px}
.sms-template textarea{width:100%;min-height:210px;padding:8px 9px;border:1px solid var(--cab-border);border-radius:8px;background:var(--cab-surface);color:var(--cab-text);font-size:12px;line-height:1.45;resize:vertical;font-family:inherit}
.grav-section .sms-template{border-top:1px dashed var(--cab-border);padding:10px 0 0;background:transparent}

/* ── Grav sections ── */
.grav-section{border:1px solid var(--cab-border);border-radius:8px;padding:14px;margin-bottom:20px;background:var(--cab-surface)}
.grav-section-title{font-size:11px;font-weight:600;color:var(--cab-text-sec);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.grav-section-link{justify-content:space-between;text-decoration:none;border:1px solid var(--cab-border);border-radius:8px;padding:10px 12px;color:var(--cab-text);background:var(--cab-bg);transition:border-color .15s,background .15s}
.grav-section-link:hover{border-color:var(--cab-accent);background:var(--cab-surface)}
.grav-section-open{margin-left:auto;color:var(--cab-accent);font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}
.grav-dot{width:7px;height:7px;border-radius:50%;background:var(--cab-border);flex-shrink:0}
.grav-dot.found{background:#3B6D11}
.grav-dot.searching{background:#BA7517;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Highlight des champs auto-remplis par SIRENE / API tierces ──
   Appliqué pendant ~1.5s pour signaler visuellement la modification.
   Utilisation : :class="{ 'pulse-autofill': sireneAutofilled.foo }" */
@keyframes pulse-autofill{0%{background-color:#fef3c7;box-shadow:0 0 0 3px rgba(245,158,11,.25)}100%{background-color:transparent;box-shadow:0 0 0 0 transparent}}
.pulse-autofill{animation:pulse-autofill 1.5s ease-out}
.dark .pulse-autofill{animation:pulse-autofill-dark 1.5s ease-out}
@keyframes pulse-autofill-dark{0%{background-color:rgba(180,83,9,.35);box-shadow:0 0 0 3px rgba(245,158,11,.35)}100%{background-color:transparent;box-shadow:0 0 0 0 transparent}}
.grav-link{display:inline-flex;align-items:center;gap:6px;background:var(--cab-accent);color:var(--cab-accent-fg);text-decoration:none;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:500;margin-top:8px;transition:background .15s}
.grav-link:hover{background:var(--cab-accent-hover)}
.btn-grav{background:transparent;color:var(--cab-accent);border:1px solid var(--cab-accent);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}
.btn-grav:hover{background:var(--cab-accent);color:var(--cab-accent-fg)}
.btn-grav:disabled{opacity:.4;cursor:not-allowed}
.grav-uuid-display{font-family:ui-monospace,monospace;font-size:11px;color:var(--cab-text-sec);background:var(--cab-bg);border:1px solid var(--cab-border);border-radius:4px;padding:3px 7px;margin-top:4px;display:inline-block}
.settings-btn{background:none;border:1px solid var(--cab-border);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--cab-text-sec);cursor:pointer;margin-left:auto;transition:background .12s}
.settings-btn:hover{background:var(--cab-surface-alt)}

/* ── Import: dynamic action-class colors (applied via JS actionClass()) ── */
.imp-create{color:#2a7a2a}
.imp-update{color:#1a5fa0}
.imp-skip{color:var(--cab-text-sec)}
.imp-error{color:#c0392b}
.dark .imp-create{color:#81c784}
.dark .imp-update{color:#64b5f6}
.dark .imp-error{color:#ef9a9a}

/* ── Verif: dynamic state colors (applied via JS :class binding) ── */
.verif-ok{color:var(--cab-accent)!important}
.verif-warn{color:#f59e0b!important}
.verif-footer-ok{color:var(--cab-accent)!important}
.verif-footer-warn{color:#f59e0b!important}

/* ── Initial load splash screen ── */
#cab-splash{position:fixed;inset:0;z-index:9998;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .3s ease}
.dark #cab-splash{background:#111827}
.cab-splash__logo{display:flex;flex-direction:column;align-items:center;gap:10px}
.cab-splash__logo .site-logo{position:static!important;transform:none!important;height:48px!important}
.cab-splash__logo .site-logo img,.cab-splash__logo .site-logo svg{height:48px!important;width:auto!important;display:block!important}
.cab-splash__track{width:180px;height:3px;background:#e5e7eb;border-radius:2px;overflow:hidden;position:relative}
.dark .cab-splash__track{background:#374151}
.cab-splash__bar{position:absolute;inset-block:0;left:-50%;width:45%;background:var(--color-primary,#114b5f);border-radius:2px;animation:cab-splash-slide 1.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cab-splash-slide{0%{left:-50%}100%{left:105%}}

/* ── Page transition overlay ── */
#mainArea{position:relative}
.cab-page-overlay{position:absolute;inset:0;z-index:30;background:var(--cab-bg);display:flex;align-items:center;justify-content:center;pointer-events:none}
.cab-overlay-content{display:flex;flex-direction:column;align-items:center;gap:20px}
.cab-page-overlay .site-logo{position:static;transform:none;width:auto;height:52px;margin:0}
.cab-page-overlay .site-logo svg,.cab-page-overlay .site-logo img{height:52px;width:auto;display:block}
.cab-spinner-ring{width:24px;height:24px;border:2px solid var(--cab-border);border-top-color:var(--cab-accent);border-radius:50%;animation:cab-spin .65s linear infinite}
@keyframes cab-spin{to{transform:rotate(360deg)}}

/* ── Aide : masque le sub-sidebar et l'ancien contenu du main ──────────
   La vue Aide a son propre layout plein-écran : on cache la colonne
   sub-sidebar (260px) et tous les autres panneaux frères dans #mainArea
   pour éviter qu'ils débordent / clignotent derrière le panneau d'aide. */
/* ⚠ Breakpoint aligné sur Tailwind `md` (48rem = 768px), PAS 769px : le
   layout (#app grid, nav `md:flex`, #mainArea `max-md:hidden`,
   `md:grid-cols-[…]`) bascule desktop/mobile à 48rem. Utiliser 769px créait
   une zone morte à exactement 768px où Tailwind rendait la grille desktop 3
   colonnes tandis que ces overrides (et les règles mobile ci-dessous)
   restaient inactifs/actifs à contretemps → sidebar vide + contenu empilé,
   visible en mobile paysage / tablette portrait pile à 768px. */
@media (min-width:48rem){
  #app.help-open,#app.sub-empty,#app.sub-collapsed{grid-template-columns:220px minmax(0,1fr)!important}
  #app.help-open.nav-collapsed,#app.sub-empty.nav-collapsed,#app.sub-collapsed.nav-collapsed{grid-template-columns:64px minmax(0,1fr)!important}
  #app.help-open .sidebar,#app.sub-empty .sidebar,#app.sub-collapsed .sidebar{display:none}
  /* Rail d'icônes : colonnes de sous-nav (Réglages, Mon espace) repliées.
     La colonne reste visible mais rétrécie à 64px ; sidebar.html.twig bascule
     son rendu en icônes-seules via $store.cab.subRailActive. */
  #app.sub-rail{grid-template-columns:220px 64px minmax(0,1fr)!important}
  #app.sub-rail.nav-collapsed{grid-template-columns:64px 64px minmax(0,1fr)!important}
}
#app.help-open #mainArea > *:not(.cab-help-panel):not(.cab-page-overlay){display:none!important}
/* Alertes / tâches : même logique plein-écran que l'aide — le panneau des
   tâches masque tous les frères de #mainArea (dont la vue sidebarView
   précédente : imports, factures…) pour ne pas la laisser derrière lui. */
#app.tasks-open #mainArea > *:not(.cab-tasks-panel):not(.cab-page-overlay){display:none!important}

/* ── Responsive ──
   Borne haute = 47.999rem, strictement complémentaire du `min-width:48rem`
   ci-dessus et identique à la borne de Tailwind `max-md` (< 48rem) : mobile
   et desktop ne se chevauchent plus jamais (fin de la zone morte à 768px). */
@media (max-width:47.999rem){
  /* Mobile: toggle sidebar/main via client-open, main-open, invoice-open or pane-main class on #app.
     pane-main = bascule générique pilotée par $store.cab.mobilePane (sub-nav clic, sélection
     devis/recue, navigation inSpace/inSettings). Voir sidebar.js setView() pour la logique. */
  #app.client-open .sidebar,#app.main-open .sidebar,#app.invoice-open .sidebar,#app.pane-main .sidebar{display:none}
  #app.client-open .main,#app.main-open .main,#app.invoice-open .main,#app.pane-main .main{display:flex!important}
  #app.dash-sidebar-open .sidebar{display:flex!important}
  #app.dash-sidebar-open .main{display:none!important}
  /* Toast: décaler au-dessus de la barre de navigation mobile */
  .cab-toast-stack{bottom:calc(3.5rem + 16px)}
  /* Forms */
  .field-grid{grid-template-columns:1fr}
  .field-full{grid-column:1}
  /* Barre d'action : wrap autorisé, CTA primaire pleine largeur sur mobile */
  .btn-row{flex-wrap:wrap;gap:8px}
  .btn-row .btn-save{flex:1 1 100%;order:-1}
  /* 2-col stats on small screens */
  .stats-row{grid-template-columns:1fr 1fr}
  .stats-row .stat-card:last-child{grid-column:unset}
  /* Popup paramètres en plein écran sur mobile */
  .cab-modal-fs{height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
  /* Onglets des paramètres défilables horizontalement sur mobile */
  .cab-settings-tabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cab-settings-tabs::-webkit-scrollbar{display:none}
  .cab-settings-tabs>*{min-width:max-content;flex-shrink:0}
}