/* ═══════════════════════════════════════════════════════════════════════════
   ServiceHub · Design 2026 — direcția „Diagnostic" (albastru + chihlimbar)
   GLOBAL: încărcat pe toată aplicația (după servicehub.css, override de tokeni).
   Comutator light/dark în topbar, default light, persistat per-user în DB.
   Dark = grafit cald inspirat din direcția „Garaj".
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  /* palette — override peste tokenii shell-ului, deci se propagă pe toată pagina de avize */
  --sh-primary:#2F55F7; --sh-primary-hover:#2544D8; --sh-primary-soft:#E8EDFF;
  --sh-bg:#EDF1F7; --sh-surface:#FFFFFF; --sh-surface-2:#F5F8FC; --sh-border:#E4E9F2;
  --sh-text:#0D1526; --sh-muted:#5B6577;
  --sh-success:#12A150; --sh-warning:#E8890C; --sh-danger:#E5484D; --sh-info:#0A9BD8;
  --sh-radius:12px;
  /* --sh-amber = accent pe fundaluri/grafic; --sh-amber-text = varianta AA pt. text pe surface */
  --sh-amber:#FF7A00; --sh-amber-text:#B45400; --sh-amber-ink:#3a1c00; --sh-amber-soft:#FFF0E1;
  --sh-1:0 1px 2px rgba(13,21,38,.07);
  --sh-2:0 8px 20px -8px rgba(13,21,38,.16), 0 2px 6px -3px rgba(13,21,38,.08);
  --sh-3:0 22px 48px -14px rgba(13,21,38,.24);
  --sh-ring:0 0 0 4px rgba(47,85,247,.18);
  --sh-brand-grad:linear-gradient(180deg,#3a60ff,#2F55F7);
  --sh-amber-grad:linear-gradient(180deg,#ff8f26,#FF7A00);
  --sh-ease:cubic-bezier(.4,0,.2,1);
  --sh-spring:cubic-bezier(.3,1.15,.35,1);
  --sh-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,monospace;
  --sh-glow:transparent;
}

/* ── DARK CALD (identitatea A + căldura din B) ── */
[data-theme="dark"]{
  color-scheme:dark;
  --sh-primary:#6E8AFF; --sh-primary-hover:#8AA0FF; --sh-primary-soft:#232B44;
  --sh-bg:#17150F; --sh-surface:#211E17; --sh-surface-2:#2A261D; --sh-border:#39332A;
  --sh-text:#F2EDE3; --sh-muted:#A99E8C;
  --sh-success:#4FC98A; --sh-warning:#F0A93C; --sh-danger:#F26A6F; --sh-info:#43BEE8;
  --sh-amber:#FFAE52; --sh-amber-text:#FFAE52; --sh-amber-ink:#2a1a04; --sh-amber-soft:#3A2C15;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 12px 26px -10px rgba(0,0,0,.66), 0 2px 6px -3px rgba(0,0,0,.5);
  --sh-3:0 26px 52px -14px rgba(0,0,0,.72);
  --sh-ring:0 0 0 4px rgba(110,138,255,.3);
  --sh-brand-grad:linear-gradient(180deg,#7f98ff,#6E8AFF);
  --sh-amber-grad:linear-gradient(180deg,#ffbf6f,#FFAE52);
  --sh-glow:radial-gradient(680px 300px at 92% -8%, rgba(255,122,0,.10), transparent 60%);
}

/* ── Punte tokeni → variabile Bootstrap 5.3 ──
   data-bs-theme="dark" e setat împreună cu data-theme="dark" (base.html), deci
   componentele Bootstrap (list-group, dropdown, modal, form-select, alerts,
   btn-close) își iau singure varianta dark; aici le aliniem la paleta noastră.
   Selectorul dublu bate [data-bs-theme=dark] din bootstrap.min.css (același
   scor de specificitate, fișierul nostru se încarcă după). */
:root, [data-bs-theme]{
  --bs-body-bg:var(--sh-bg); --bs-body-color:var(--sh-text);
  --bs-border-color:var(--sh-border);
  --bs-secondary-color:var(--sh-muted); --bs-tertiary-color:var(--sh-muted);
  --bs-secondary-bg:var(--sh-surface-2); --bs-tertiary-bg:var(--sh-surface-2);
  --bs-emphasis-color:var(--sh-text);
}

body{transition:background .35s var(--sh-ease), color .35s var(--sh-ease)}
.sh-main{background-image:var(--sh-glow)}
.sh-content{color:var(--sh-text)}

/* ── Utilitare readout ── */
.sh-num{font-family:var(--sh-mono); font-variant-numeric:tabular-nums}

/* ── Sidebar ── */
.sh-sidebar{transition:width .32s var(--sh-spring), flex-basis .32s var(--sh-spring),
  background .35s var(--sh-ease), border-color .35s var(--sh-ease)}
.sh-nav a{transition:background .18s var(--sh-ease), color .18s var(--sh-ease)}
.sh-nav a i{transition:transform .2s var(--sh-spring)}
.sh-nav a:hover i{transform:translateX(1px) scale(1.12)}
.sh-rail-btn i{transition:transform .32s var(--sh-spring)}
/* LED-ul glisant — același limbaj cu pastilele de status „în lucru" */
.sh-nav a.active::before{content:""; position:absolute; left:-.6rem; top:50%; margin-top:-11px;
  height:22px; width:3px; border-radius:0 3px 3px 0; background:var(--sh-primary);
  view-transition-name:sh-nav-led;
  animation:sh-nav-led 2s var(--sh-ease) infinite}
@keyframes sh-nav-led{
  0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--sh-primary) 25%,transparent)}
  50%{box-shadow:0 0 10px 3px color-mix(in srgb,var(--sh-primary) 38%,transparent)}}
/* glisarea LED-ului între pagini: cross-document view transitions (Chrome/Edge);
   pe alte browsere pur și simplu nu animează. Root-ul nu face crossfade —
   doar grupul LED se mișcă. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:0s}
::view-transition-group(sh-nav-led){animation-duration:.38s; animation-timing-function:var(--sh-spring)}
/* intrarea eșalonată a meniului — o singură dată, după login (clasa vine din JS) */
.sh-nav-enter .sh-nav>*{animation:sh-nav-in .45s var(--sh-ease) both;
  animation-delay:calc(var(--i,0)*34ms)}
@keyframes sh-nav-in{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
/* contorul din meniu urmează tranziția de temă */
.sh-nav-badge{transition:background .3s var(--sh-ease), color .3s var(--sh-ease)}

/* ── Calendar programări ── */
.cal-item{transition:transform .15s var(--sh-spring), box-shadow .2s var(--sh-ease)}
.cal-item:hover{transform:translateY(-1px); box-shadow:var(--sh-2); z-index:2}
.cal-add{transition:background .15s var(--sh-ease), color .15s var(--sh-ease)}

/* ── Topbar (glass) ── */
.sh-topbar{background:color-mix(in srgb, var(--sh-surface) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .35s var(--sh-ease), border-color .35s var(--sh-ease)}

/* ── Theme toggle ── */
.sh-theme-btn{display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--sh-surface); color:var(--sh-text); border:1px solid var(--sh-border);
  border-radius:999px; padding:.35rem .75rem; font-size:.82rem; font-weight:600; line-height:1;
  box-shadow:var(--sh-1); transition:transform .12s var(--sh-ease), box-shadow .2s var(--sh-ease)}
.sh-theme-btn:hover{transform:translateY(-1px); box-shadow:var(--sh-2)}
.sh-theme-btn:focus-visible{outline:none; box-shadow:var(--sh-ring)}

/* ── Cards ── */
.sh-card{box-shadow:var(--sh-1); transition:background .35s var(--sh-ease), border-color .35s var(--sh-ease), box-shadow .28s var(--sh-ease)}

/* ── Buttons — tactile ── */
.btn, .sh-topbar .btn, .sh-theme-btn{
  transition:transform .12s var(--sh-ease), box-shadow .22s var(--sh-ease), background .2s, border-color .2s, color .2s}
.btn{border-radius:9px; font-weight:600}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--sh-ring); outline:none}

.btn-primary{background:var(--sh-brand-grad); border-color:transparent; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), var(--sh-1)}
.btn-primary:hover{background:var(--sh-brand-grad); filter:brightness(1.03);
  transform:translateY(-1px); box-shadow:0 8px 18px -6px color-mix(in srgb,var(--sh-primary) 60%,transparent), var(--sh-1)}

.btn-success{background:var(--sh-amber-grad); border-color:transparent; color:var(--sh-amber-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), var(--sh-1); font-weight:700}
.btn-success:hover{transform:translateY(-1px);
  box-shadow:0 8px 18px -6px color-mix(in srgb,var(--sh-amber) 55%,transparent), var(--sh-1); filter:brightness(1.02)}

.btn-outline-secondary, .btn-outline-primary,
.btn-outline-info, .btn-outline-success{
  background:var(--sh-surface); color:var(--sh-text); border-color:var(--sh-border); box-shadow:var(--sh-1)}
.btn-outline-secondary:hover, .btn-outline-primary:hover,
.btn-outline-info:hover, .btn-outline-success:hover{
  border-color:var(--sh-primary); color:var(--sh-primary); background:var(--sh-surface);
  transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn-outline-danger{background:var(--sh-surface); color:var(--sh-danger); border-color:var(--sh-border); box-shadow:var(--sh-1)}
.btn-outline-danger:hover{border-color:var(--sh-danger); color:#fff; background:var(--sh-danger); transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn-danger{background:var(--sh-danger); border-color:transparent}
.btn-group .btn{box-shadow:none}
.btn-group .btn:hover{transform:none; box-shadow:none; z-index:2}

/* ── Inputs — fill + focus ring ──
   background-COLOR, nu shorthand-ul background: acesta ar reseta background-image
   și ar șterge săgeata SVG a select-ului (Bootstrap o pune ca background-image). */
.form-control, .form-select{
  background-color:var(--sh-surface-2); border:1.5px solid var(--sh-border); color:var(--sh-text); border-radius:9px;
  transition:border-color .16s var(--sh-ease), box-shadow .22s var(--sh-ease), background-color .2s}
.form-control::placeholder{color:color-mix(in srgb,var(--sh-muted) 78%,transparent)}
.form-control:focus, .form-select:focus{
  background-color:var(--sh-surface); border-color:var(--sh-primary); box-shadow:var(--sh-ring); color:var(--sh-text)}

/* ── Tables ── */
.table{--bs-table-bg:transparent; color:var(--sh-text)}
.table tbody tr{transition:background .15s var(--sh-ease)}
.table.table-hover tbody tr:hover{background:var(--sh-surface-2)}
.table tbody td, .table thead th{border-color:var(--sh-border)}
.table td.text-end{font-variant-numeric:tabular-nums}

/* ── Status pills — indicator LED ── */
.sh-pill{transition:background .3s var(--sh-ease), color .3s var(--sh-ease)}
.sh-pill::before{box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent)}
.sh-pill-in_lucru::before{animation:sh-led 1.8s var(--sh-ease) infinite}
@keyframes sh-led{
  0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,currentColor 22%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,currentColor 6%,transparent)}}
/* varianta „facturat" pe chihlimbar vine acum din sistemul de pastile pe
   tokeni din servicehub.css (--pill-c:var(--sh-amber)) */

/* ── Sticky bar & totaluri (readout chihlimbar) ── */
.aviz-sticky-bar{background:linear-gradient(180deg,var(--sh-surface),var(--sh-surface-2));
  box-shadow:var(--sh-2); border-color:var(--sh-border)}
.aviz-sticky-total #total-plata-sticky{font-family:var(--sh-mono); color:var(--sh-amber-text)}
.totals-box .total-row #total-plata-display{font-family:var(--sh-mono); color:var(--sh-amber-text)}

/* ── Auth (login pe identitatea 2026: accent chihlimbar, fundal cu glow) ── */
.sh-auth{background-image:var(--sh-glow)}
.sh-auth .sh-card{border-top:3px solid var(--sh-amber); box-shadow:var(--sh-2)}
.sh-auth-brand i{color:var(--sh-amber)}

/* ── KPI (dacă apar pe avize/rapoarte) ── */
.sh-kpi{transition:transform .2s var(--sh-ease), box-shadow .28s var(--sh-ease)}
.sh-kpi:hover{transform:translateY(-4px); box-shadow:var(--sh-3)}
.sh-kpi .sh-kpi-value{font-family:var(--sh-mono)}

/* ── Dark: ce NU acoperă data-bs-theme nativ (dropdown/modal/alerts/btn-close
   vin acum din Bootstrap; rămân doar variantele de buton/utilitare/table-*,
   care în BS 5.3 nu sunt theme-aware) ── */
[data-theme="dark"] .btn-light{background:var(--sh-surface-2); border-color:var(--sh-border); color:var(--sh-text)}
[data-theme="dark"] .badge.bg-light{background-color:var(--sh-surface-2)!important}
[data-theme="dark"] .text-dark{color:var(--sh-text)!important}
[data-theme="dark"] .modal-content{background:var(--sh-surface); color:var(--sh-text); border:1px solid var(--sh-border)}
[data-theme="dark"] .table-light{--bs-table-bg:var(--sh-surface-2); --bs-table-color:var(--sh-muted)}
[data-theme="dark"] .table-secondary{--bs-table-bg:var(--sh-surface-2); --bs-table-color:var(--sh-text)}

/* Ctrl+P din tema dark: fără reset, tokenii dark rămân activi și textul aproape
   alb devine invizibil pe hârtie albă. Suprascriem cu paleta light. */
@media print{
  :root, [data-theme="dark"]{
    color-scheme:light;
    --sh-bg:#fff; --sh-surface:#fff; --sh-surface-2:#f5f5f5;
    --sh-border:#c9c9c9; --sh-text:#000; --sh-muted:#444;
    --sh-primary:#000; --sh-amber:#B45400; --sh-amber-text:#7a3900;
    --sh-1:none; --sh-2:none; --sh-3:none; --sh-glow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){
    animation:none !important}
  /* spinnerele rămân animate: sunt feedback funcțional („se salvează"), nu decor */
  .spinner-border{animation:.75s linear infinite spinner-border !important}
}