/* static/ui-anim.css — micro-animațiile panoului (04.10.2026), pereche cu ui-anim.js.
   Idei din componentele de pe 21st.dev, refăcute în CSS simplu: comutatoare cu arc,
   indicatorul care alunecă sub file, butoanele de salvare cu stare, pastila de
   status care trece lin dintr-o culoare în alta. Totul se oprește cu
   „reducere mișcare” din sistem. */

/* ── Comutatoarele (.toggle-switch din Setări și Setări Gestiune) ──
   Bulina sare cu un mic arc, se lățește cât e apăsată și lasă o lumină
   discretă când e pornit. */
.toggle-switch .slider { transition: background-color .25s ease, box-shadow .25s ease !important; }
.toggle-switch .slider::before {
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), width .18s ease, background-color .2s ease !important;
}
.toggle-switch:active .slider::before { width: 22px !important; }
.toggle-switch:active input:checked + .slider::before { transform: translateX(14px) !important; }
.toggle-switch input:checked + .slider {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4e54c8) 22%, transparent);
}
.toggle-switch input:focus-visible + .slider { outline: 2px solid var(--accent, #4e54c8); outline-offset: 2px; }

/* ── Indicatorul care alunecă sub file ──
   ui-anim.js pune `.ui-file-anim` pe bară și o linie `.ui-file-ind`; linia
   proprie a filei active (border-bottom) se ascunde, ca să nu apară dublu. */
.ui-file-anim { position: relative; }
.ui-file-anim > .active, .ui-file-anim > .activ { border-bottom-color: transparent !important; }
.ui-file-ind {
  position: absolute; top: 0; left: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0;
  background: var(--accent, #4e54c8); pointer-events: none; z-index: 1;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), width .32s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}
.tabs-nav.ui-file-anim .ui-file-ind { height: 2px; }

/* ── Butoane de salvare cu stare (UIAnim.buton) ── */
.ui-btn-lucru { cursor: progress !important; }
.ui-btn-lucru .ui-btn-spin {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; animation: uiSpin .7s linear infinite;
}
.ui-btn-ok { background: var(--success, #22c55e) !important; border-color: var(--success, #22c55e) !important; color: #fff !important; }
.ui-btn-ok .ti { animation: uiPop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.ui-btn-eroare { animation: uiScutura .42s ease; }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@keyframes uiPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes uiScutura { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* ── Pastila de status: culoarea trece lin, iar la schimbare „respiră” o dată ── */
.status-pill { transition: background-color .35s ease, border-color .35s ease, color .35s ease, opacity .2s !important; }
.status-pill .sp-dot { transition: background-color .35s ease; }
.status-pill.sp-schimbat { animation: uiPastila .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes uiPastila { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ── Intrarea conținutului (09.10.2026): copiii unui container cu `data-ui-intrare`
   apar pe rând, cu o mică ridicare — fișa reparației, fișa clientului, pagina de status.
   Doar CSS, decalajul după poziție: nu așteaptă scriptul, deci nu clipește. ── */
[data-ui-intrare] > * { animation: uiIntra .42s cubic-bezier(.2, .7, .3, 1) both; }
[data-ui-intrare] > :nth-child(2) { animation-delay: .06s; }
[data-ui-intrare] > :nth-child(3) { animation-delay: .12s; }
[data-ui-intrare] > :nth-child(4) { animation-delay: .18s; }
[data-ui-intrare] > :nth-child(5) { animation-delay: .24s; }
[data-ui-intrare] > :nth-child(6) { animation-delay: .30s; }
[data-ui-intrare] > :nth-child(n+7) { animation-delay: .34s; }
@keyframes uiIntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Cardurile mici cu cifre se ridică ușor la trecerea mouse-ului. */
.repair-stat-card { transition: transform .18s ease, box-shadow .18s ease; }
.repair-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }

@media (prefers-reduced-motion: reduce) {
  [data-ui-intrare] > * { animation: none !important; }
  .repair-stat-card { transition: none !important; }
  .toggle-switch .slider::before, .ui-file-ind, .status-pill { transition: none !important; }
  .status-pill.sp-schimbat, .ui-btn-eroare, .ui-btn-ok .ti { animation: none !important; }
}