/* ═══════════════════════════════════════════════════════════════════════
   ALFA THEME — surcharge visuelle « console d'atelier » (v2)
   ---------------------------------------------------------------------
   À charger EN DERNIER, après le CSS existant :
       <link rel="stylesheet" href="alfa-theme.css">
   (à placer juste avant </head>, après la balise <style> existante)
   Réversible : retirer cette ligne = retour au look d'origine.
   Ne touche QUE l'apparence — aucune mécanique (drag-drop, flex, grilles)
   n'est modifiée.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── 1. Jetons (variables) : la nouvelle identité ──────────────────────── */
:root{
  /* Surfaces plus profondes et layered */
  --bg:#080a0e;
  --surface:#14181f;
  --surface2:#1a1f28;
  --surface3:#212734;
  --border:rgba(255,255,255,.055);
  --border-strong:rgba(255,255,255,.11);

  /* ALFA orange affiné + bleu électrique */
  --brand:#ff6a2b;  --brand-d:#e85618;  --brand-mid:#ff8a3d;
  --brand-l:rgba(255,106,43,.14);
  --accent:#ff6a2b; --accent-l:rgba(255,106,43,.13); --accent-d:#e85618;
  --ice:#38bdf8;    --ice-d:#0ea5e9;   --ice-l:rgba(56,189,248,.13);

  /* Statuts alignés v2 */
  --green:#37c26b;  --green-l:rgba(55,194,107,.13);
  --orange:#ff6a2b; --orange-l:rgba(255,106,43,.13);
  --red:#f0475e;    --red-l:rgba(240,71,94,.13);
  --purple:#8b7cf0; --purple-l:rgba(139,124,240,.13);
  --cyan:#38bdf8;   --cyan-l:rgba(56,189,248,.13);
  --yellow:#f5a524; --yellow-l:rgba(245,165,36,.13);

  --text:#eef2f8; --text2:#98a3b4; --muted:#5c6675; --metal:#8b95a5;

  --mono:'JetBrains Mono',monospace;
  --r:16px;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.6);
  --sh-lg:0 20px 50px -20px rgba(0,0,0,.7);

  --alfa-hi:rgba(255,255,255,.045);
}

/* ── 2. Ambiance : halos + trame circuit derrière toute l'app ──────────── */
body{ background:var(--bg); }
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 460px at 88% -8%, rgba(255,106,43,.10), transparent 60%),
    radial-gradient(680px 520px at -6% 108%, rgba(56,189,248,.08), transparent 62%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 60% 20%, #000 0%, transparent 78%);
          mask-image:radial-gradient(circle at 60% 20%, #000 0%, transparent 78%);
}
/* La zone de contenu devient transparente pour laisser voir l'ambiance */
.content{ background:transparent !important; position:relative; z-index:1; }
.main{ position:relative; z-index:1; }

/* Titres en Space Grotesk (le corps reste sur ta police actuelle) */
.page-title, .dash-widget-hdr, .m-title, .modal-title, h1, h2, h3,
.section-title, .card-title{
  font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif !important;
  letter-spacing:-.01em;
}

/* ── 3. Rail latéral ───────────────────────────────────────────────────── */
.sidebar{
  background:linear-gradient(180deg,#12161d,#0e1116) !important;
  border-right:1px solid var(--border) !important;
  box-shadow:1px 0 0 rgba(255,255,255,.02) !important;
}
.sidebar::before{ opacity:.85 !important; height:1px !important;
  background:linear-gradient(90deg,var(--brand),var(--ice)) !important; }
.logo-badge{
  border:none !important; border-radius:13px !important;
  background:linear-gradient(145deg,var(--brand),#d9430f) !important;
  box-shadow:0 8px 22px -8px var(--brand), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.nav-item{ border-radius:12px !important; color:rgba(255,255,255,.32) !important; }
.nav-item:hover{ background:rgba(255,255,255,.05) !important; color:#fff !important; }
.nav-item.active{
  background:var(--brand-l) !important; color:var(--brand) !important;
  box-shadow:none !important;
}
.nav-item.active::before{
  content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--brand);
}
.nav-item.active .nav-icon{ filter:none !important; }

/* ── 4. Topbar : barre translucide floutée ─────────────────────────────── */
.topbar{
  background:linear-gradient(180deg, rgba(8,10,14,.92), rgba(8,10,14,.6)) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border) !important;
  box-shadow:none !important;
}
.topbar::after{ opacity:0 !important; }        /* on retire la barre dégradée dure */
.page-crumb{ font-family:var(--mono); }

/* ── 5. Tuiles bento (KPI, widgets) : biseau + profondeur ──────────────── */
.dash-kpi-card, .dash-widget-card, .kpi-chip, .dash-urgent, .card, .panel{
  border-radius:var(--r) !important;
  border:1px solid var(--border) !important;
  background:linear-gradient(160deg,#151a22,#10141b) !important;
  position:relative;
}
.dash-kpi-card::before, .dash-widget-card::before, .kpi-chip::after{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--alfa-hi); border-radius:var(--r) var(--r) 0 0; pointer-events:none;
}
.dash-kpi-card:hover, .dash-widget-card:hover{
  border-color:var(--border-strong) !important;
  box-shadow:var(--sh) !important; transform:translateY(-2px);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.dash-widget-hdr{ border-bottom:1px solid var(--border) !important; padding:14px 16px !important; }
.dash-kpi-val{
  font-family:var(--mono) !important; font-weight:700 !important;
  font-size:32px !important; letter-spacing:-.02em !important;
  font-variant-numeric:tabular-nums;
}
.dash-kpi-lbl{ text-transform:none !important; letter-spacing:0 !important; color:var(--text2) !important; }

/* ── 6. Bandeau KPI (kpi-chip) ─────────────────────────────────────────── */
.kpi-chip{ border-radius:var(--r) !important; box-shadow:none !important; }
.kpi-chip::before{ height:3px !important; border-radius:var(--r) var(--r) 0 0 !important; top:0; bottom:auto; }
.kpi-val{
  font-family:var(--mono) !important; font-weight:700 !important; letter-spacing:-.02em !important;
  font-variant-numeric:tabular-nums;
}
.kpi-lbl{ text-transform:none !important; letter-spacing:.01em !important; font-family:var(--font) !important; color:var(--text2) !important; }
.kpi-blue .kpi-val{ color:var(--ice) !important; }

/* ── 7. Boutons ────────────────────────────────────────────────────────── */
.btn{ border-radius:11px !important; font-weight:600 !important; }
.btn-primary{
  background:linear-gradient(145deg,var(--brand-mid),var(--brand)) !important; color:#fff !important;
  box-shadow:0 6px 18px -9px var(--brand), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 11px 26px -9px var(--brand) !important; background:linear-gradient(145deg,var(--brand),var(--brand-d)) !important; }
.btn-ghost{ background:rgba(255,255,255,.04) !important; border:1px solid var(--border) !important; }
.btn-ghost:hover{ background:rgba(255,255,255,.08) !important; }

/* ── 8. Actions rapides ────────────────────────────────────────────────── */
.qa-btn{ border-radius:12px !important; border:1px solid var(--border) !important; background:var(--surface2) !important; }
.qa-btn:hover{ border-color:var(--border-strong) !important; background:var(--surface3) !important; color:var(--text) !important; transform:translateY(-2px); }
.qa-btn.qa-primary{
  background:linear-gradient(145deg,var(--brand-mid),var(--brand)) !important; border-color:transparent !important; color:#fff !important;
  box-shadow:0 8px 20px -10px var(--brand) !important;
}

/* ── 9. Badges de statut : voyant LED ──────────────────────────────────── */
.badge{
  border-radius:8px !important; text-transform:none !important; font-weight:600 !important;
  font-family:var(--font) !important; letter-spacing:0 !important; padding:4px 10px 4px 9px !important;
  font-size:11.5px !important; gap:6px !important;
}
.badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex-shrink:0; box-shadow:0 0 6px currentColor;
}

/* ── 10. Champs & recherche ────────────────────────────────────────────── */
.linput, input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=number], textarea, select{
  border-radius:11px !important; background:#0f131a !important;
  border:1px solid var(--border) !important; transition:.18s !important;
}
.linput:focus, input:focus, textarea:focus, select:focus{
  border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-l) !important; outline:none !important;
}
.topbar-search{ border-radius:11px !important; background:#0f131a !important; border:1px solid var(--border) !important; }
.topbar-search:hover{ border-color:var(--brand) !important; }

/* ── 11. Modales ───────────────────────────────────────────────────────── */
.modal, .m-box, .modal-box, [class*="modal-content"]{
  border-radius:18px !important; border:1px solid var(--border) !important;
  background:linear-gradient(160deg,#161b23,#11151b) !important; box-shadow:var(--sh-lg) !important;
}

/* ── 12. Détails ───────────────────────────────────────────────────────── */
::selection{ background:var(--brand-l); color:#fff; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#2a323f; border-radius:8px; border:2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:#3a4451; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   FLUX ATELIER — widget « db-flux » (Phase 2, élément signature)
   ═══════════════════════════════════════════════════════════════════════ */
.alfa-flux{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; padding:14px 16px 16px;
}
.afcol{
  background:var(--surface2); border:1px solid var(--border); border-radius:14px;
  padding:12px; position:relative; min-height:130px;
}
.afcol-bar{ position:absolute; left:0; top:0; height:3px; width:100%; border-radius:14px 14px 0 0; }
.afcol-h{ display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:2px; }
.afdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.afnm{ font-size:12px; font-weight:600; color:var(--text); }
.afq{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--text2);
  background:rgba(255,255,255,.05); padding:1px 8px; border-radius:7px; }
.afmach{
  display:flex; align-items:center; gap:9px; padding:8px; border-radius:10px;
  background:rgba(255,255,255,.03); margin-bottom:8px; cursor:pointer;
  border:1px solid transparent; transition:.15s;
}
.afmach:hover{ background:rgba(255,255,255,.07); border-color:var(--border); transform:translateY(-1px); }
.afmach:last-child{ margin-bottom:0; }
.afmach .avatar{ flex-shrink:0; border-radius:8px !important; }
.afmi{ min-width:0; flex:1; }
.afmi b{ font-size:12.5px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.afmi span{ font-size:11px; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.afled{ width:7px; height:7px; border-radius:50%; margin-left:auto; flex-shrink:0; box-shadow:0 0 6px currentColor; }
.afmore{ font-size:11px; color:var(--muted); text-align:center; padding:6px; }

/* ═══════════════════════════════════════════════════════════════════════
   ICÔNES SVG (Phase 3) — alignement & couleurs
   ═══════════════════════════════════════════════════════════════════════ */
.alfa-ico{ display:block; }
.nav-icon{ display:flex !important; align-items:center; justify-content:center; }
.nav-icon svg{ display:block; }
.nav-item.active .nav-icon{ filter:none !important; }
/* Icône dans l'en-tête d'un widget */
.wh-ico{ display:inline-flex; align-items:center; vertical-align:-3px; margin-right:3px; color:var(--brand); }
.wh-ico svg{ display:block; }
.db-wcard-hdr > span{ display:inline-flex; align-items:center; gap:2px; }
/* Icône dans les boutons d'action rapide */
.qa-ico{ display:inline-flex; align-items:center; justify-content:center; }
.qa-ico svg{ display:block; }

/* Icônes d'états vides (widgets sans données) — calmes et discrètes */
.empty .ei{ display:flex !important; justify-content:center; margin-bottom:6px; }
.empty .ei svg{ color:var(--faint); opacity:.7; width:30px; height:30px; }

/* ═══════════════════════════════════════════════════════════════════════
   BARRE DE RECHERCHE — plus large & plus visible
   ═══════════════════════════════════════════════════════════════════════ */
.topbar-search-field{
  padding:9px 16px !important;
  border-radius:13px !important;
  background:#0f131a !important;
  border:1px solid var(--border) !important;
}
.topbar-search-field input{ font-size:13.5px !important; }
.topbar-search-field:hover{ border-color:var(--brand) !important; }
.topbar-search-field:focus-within{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 3px var(--brand-l) !important;
  background:#0f131a !important;
}
/* Élargissement uniquement sur écran large (mobile/tablette restent compacts) */
@media (min-width:900px){
  .topbar-center{ max-width:640px !important; margin:0 24px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ATL-07 — File d'atelier priorisée + limite de charge
   Ajouté le 22/07/2026. Styles des 4 zones (banc / file / attente / bloqué),
   des emplacements du banc et du badge de score.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Titres de zone ─────────────────────────────────────────────────── */
.at-zone-tete{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:26px 0 12px; padding-bottom:7px;
  border-bottom:1px solid var(--border-strong);
}
.at-zone-tete:first-child{ margin-top:4px; }
.at-zone-titre{
  margin:0; font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}
.at-zone-cnt{
  font-family:var(--mono); font-size:11px; font-weight:700;
  color:var(--brand); background:var(--brand-l);
  padding:2px 8px; border-radius:20px;
}
.at-zone-note{ font-size:12px; color:var(--muted); }
.at-zone-vide{
  padding:14px 2px; font-size:13px; color:var(--muted); font-style:italic;
}

/* ── Le banc : emplacements physiques ───────────────────────────────── */
.at-banc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:6px;
}
.at-slot{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:12px; min-height:120px;
  display:flex; flex-direction:column;
}
.at-slot-actif{
  border-color:var(--brand);
  box-shadow:inset 3px 0 0 var(--brand), var(--sh);
}
.at-slot-alerte{ border-color:var(--red); border-style:dashed; }
.at-slot-num{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  color:var(--muted); margin-bottom:9px;
}
.at-slot-actif .at-slot-num{ color:var(--brand); }
.at-slot-alerte .at-slot-num{ color:var(--red); }
.at-slot-vide{ margin:auto 0; font-size:12.5px; color:var(--muted); font-style:italic; }
/* Une carte dans un emplacement : pas de double cadre */
.at-slot .at-card{ margin:0; border:none; background:transparent; box-shadow:none; padding:0; }

/* ── Badge de score ─────────────────────────────────────────────────── */
.at-badge-score{
  display:inline-flex; flex-direction:column; align-items:center;
  font-family:var(--mono); line-height:1;
  padding:5px 9px; border-radius:8px;
  background:var(--brand-l); border:1px solid var(--brand);
  cursor:help;
}
.at-score-val{ font-size:17px; font-weight:700; color:var(--brand); }
.at-score-lbl{ font-size:8px; letter-spacing:.14em; color:var(--muted); margin-top:2px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:820px){
  .at-banc-grid{ grid-template-columns:1fr; }
}

/* ── ATL-07 : état vide auto-diagnostique ───────────────────────────── */
.at-diag-vide{
  max-width:520px; margin:18px auto 0; padding:14px 16px; text-align:left;
  background:var(--surface2); border:1px solid var(--border-strong); border-radius:var(--r);
}
.at-diag-titre{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:10px;
}
.at-diag-ligne{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.at-diag-ligne:last-of-type{ border-bottom:none; }
.at-diag-ligne code{
  font-family:var(--mono); font-size:12px; color:var(--brand);
  background:var(--brand-l); padding:2px 7px; border-radius:5px;
}
.at-diag-ligne span{ font-size:12px; color:var(--muted); }
.at-diag-note{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.5; }

/* ── ATL-07 : badge d'ancienneté des dossiers en suivi administratif ── */
.at-badge-age-admin{
  display:inline-flex; flex-direction:column; align-items:center;
  font-family:var(--mono); line-height:1;
  padding:5px 9px; border-radius:8px;
  background:rgba(167,139,250,.13); border:1px solid #a78bfa;
  cursor:help;
}
.at-badge-age-admin .at-score-val{ font-size:17px; font-weight:700; color:#a78bfa; }
.at-badge-age-admin .at-score-val small{ font-size:10px; font-weight:500; }

/* ── ATL-07 : planification de la file ──────────────────────────────── */
.apl-wrap{ display:grid; grid-template-columns:290px 1fr; gap:22px; }
.apl-col-reglages{ border-right:1px solid var(--border); padding-right:20px; }
.apl-titre{ font-family:var(--mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
.apl-aide{ font-size:11.5px; color:var(--muted); line-height:1.5; margin-bottom:12px; }

.apl-jour{ display:flex; align-items:center; gap:6px; padding:6px 8px; margin-bottom:4px;
  border-radius:8px; border:1px solid var(--border); background:var(--surface2); opacity:.5; }
.apl-jour-on{ opacity:1; border-color:var(--brand); }
.apl-jour-nom{ flex:1; display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; }
.apl-jour-nom input{ accent-color:var(--brand); width:14px; height:14px; }
.apl-jour input[type=time]{ width:74px; padding:3px 5px; font-size:11.5px; font-family:var(--mono);
  background:var(--bg); border:1px solid var(--border); border-radius:5px; color:var(--text); }
.apl-sep{ color:var(--muted); font-size:11px; }
.apl-marge{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.apl-marge label{ font-size:12.5px; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.apl-marge select{ padding:4px 7px; background:var(--bg); border:1px solid var(--border);
  border-radius:5px; color:var(--text); font-size:12px; }

.apl-col-planning{ max-height:60vh; overflow-y:auto; }
.apl-bloc{ margin-bottom:14px; }
.apl-bloc-tete{ display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:5px; margin-bottom:6px; border-bottom:1px solid var(--border-strong); }
.apl-bloc-jour{ font-weight:700; font-size:13.5px; }
.apl-bloc-charge{ font-family:var(--mono); font-size:11px; color:var(--brand); }
.apl-item{ display:flex; align-items:baseline; gap:10px; padding:5px 0; font-size:13px; }
.apl-heure{ font-family:var(--mono); font-size:12px; color:var(--brand); min-width:44px; }
.apl-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apl-objet{ color:var(--muted); }
.apl-duree{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.apl-item-min{ font-size:12px; color:var(--text2); padding:2px 0; }
.apl-vide{ font-size:13px; color:var(--muted); font-style:italic; padding:14px 0; }

.apl-alerte{ margin-top:16px; padding:12px 14px; border-radius:var(--r);
  background:var(--yellow-l); border:1px solid var(--yellow); }
.apl-alerte-rouge{ background:var(--red-l); border-color:var(--red); }
.apl-alerte-titre{ font-size:12.5px; font-weight:700; margin-bottom:6px; }
.apl-actions{ display:flex; justify-content:flex-end; gap:8px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }

@media (max-width:820px){ .apl-wrap{ grid-template-columns:1fr; }
  .apl-col-reglages{ border-right:none; padding-right:0;
    border-bottom:1px solid var(--border); padding-bottom:16px; } }

/* Durée reposant sur une valeur par défaut, pas sur une estimation réelle */
.apl-duree-est{ color:var(--yellow) !important; font-style:italic; cursor:help; }