/* ===========================================================
   Sistem de design Vital ERP.
   Culorile sunt cele reale ale brandului, extrase din logo, si
   sunt definite intr-un singur loc (:root) - o schimbare aici
   se aplica automat in toata aplicatia.
   =========================================================== */
:root {
    /* Culori Vital */
    --color-primary: #3CB448;          /* verde Vital viu - logo, accente decorative */
    --color-primary-dark: #27752F;     /* verde Vital, folosit pt. text/fundaluri cu contrast garantat pe alb */
    --color-primary-hover: #2D8736;    /* stare hover pe elemente verzi */
    --color-primary-soft: #EAF7EC;     /* fundal foarte deschis, tenta verde */
    --color-secondary: #E31E24;        /* rosu Vital - accent, din cocosul din logo */
    --color-secondary-soft: #FDECEC;

    /* Neutre */
    --color-bg: #F5F7F6;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F8F9FA;
    --color-text: #1C1E1C;
    --color-text-muted: #6B7280;
    --color-text-faint: #9CA3AF;
    --color-border: #E5E7EB;
    --color-border-strong: #D1D5DB;

    /* Semantice */
    --color-danger: #C0392B;
    --color-danger-bg: #FCEEEC;
    --color-success: var(--color-primary-dark);
    --color-success-bg: #E9F7EA;
    --color-warning: #B9770E;
    --color-warning-bg: #FDF3E3;

    /* Spatiere (scala 8/16/24/32) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;

    /* Radius */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;

    /* Umbre */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .10);
    --shadow-lg: 0 20px 48px rgba(16, 24, 40, .18);

    --transition: 180ms ease;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Tema intunecata ----------
   Comutata din butonul din footer-ul sidebar-ului (layout.js), atribut
   data-theme="dark" pe <html>, persistat in localStorage. Ca cerut
   explicit: alb -> negru (fundaluri/suprafete) si verde -> rosu Vital
   (culoarea "primary" - butoane, sidebar, accente, INCLUSIV starile de
   succes, care in mod normal ar fi verzi - e o alegere de brand
   deliberata, nu o eroare de contrast). Restul aplicatiei mosteneste
   automat aceste schimbari fiindca fiecare regula foloseste variabilele
   de mai sus, nu culori fixe - nu a fost nevoie sa se retuseze fiecare
   selector in parte. */
:root[data-theme="dark"] {
    --color-primary: #FF5A56;          /* rosu Vital, mai deschis - accente decorative pe fundal negru */
    --color-primary-dark: #E31E24;     /* rosu Vital - butoane/sidebar/text cu accent, unde inainte era verde inchis */
    --color-primary-hover: #C81820;
    --color-primary-soft: #3A1416;     /* fundal inchis, tenta rosie - echivalentul lui --color-primary-soft pe negru */
    --color-secondary: #FF5A56;
    --color-secondary-soft: #3A1416;

    --color-bg: #0B0B0C;
    --color-surface: #17181A;
    --color-surface-alt: #1F2023;
    --color-text: #F2F2F3;
    --color-text-muted: #A1A1A6;
    --color-text-faint: #6B6B70;
    --color-border: #2A2B2E;
    --color-border-strong: #3A3B3E;

    --color-danger: #FF6B6B;
    --color-danger-bg: #3A1414;
    --color-success: var(--color-primary-dark);
    --color-success-bg: #3A1416;
    --color-warning: #E0A94E;
    --color-warning-bg: #3A2E14;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
}

:root[data-theme="dark"] .error-msg { color: #FFD4D0; }

/* Documentele tiparite raman mereu deschise la culoare, indiferent de
   tema din UI - o factura tiparita/PDF cu fundal negru ar fi absurda
   si ar consuma cerneala degeaba. */
@media print {
    :root, :root[data-theme="dark"] {
        --color-bg: #F5F7F6;
        --color-surface: #FFFFFF;
        --color-surface-alt: #F8F9FA;
        --color-text: #1C1E1C;
        --color-text-muted: #6B7280;
        --color-border: #E5E7EB;
        --color-primary-dark: #27752F;
        --color-primary-soft: #EAF7EC;
    }
}

/* ---------- Reset & fundamente ---------- */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* FIX: fara aceasta regula, o imagine fara dimensiuni CSS aplicate
   (ex. logo, daca style.css nu s-a incarcat/e in cache) se afiseaza
   la rezolutia ei nativa si poate depasi containerul. */
img {
    max-width: 100%;
    display: block;
}

a { color: inherit; }

/* ---------- Tipografie ---------- */

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 8px;
}

h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; margin-bottom: 4px; }
h4 {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

p { margin: 0 0 var(--space-2); }

.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: 0.875rem; }

/* ---------- Shell aplicatie (sidebar + continut) ----------
   Structura comuna pentru toate paginile autentificate (nu login.html,
   care e ecran de intrare separat, fara navigare). Sidebar-ul e
   randat de layout.js in <nav id="sidebar"></nav> - vezi CONVENTIONS.md
   pt. cum se adauga un link nou de meniu cand se construieste un modul. */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    flex: 0 0 auto;
    background: linear-gradient(165deg, var(--color-primary-hover), var(--color-primary-dark));
    color: white;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width var(--transition);
    z-index: 30;
}

.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .app-name,
.sidebar.collapsed .user-chip .nav-label { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; }
.sidebar.collapsed .sidebar-collapse-btn { justify-content: center; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: var(--space-2) 0; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--space-3) var(--space-2);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.sidebar-logo .logo-badge {
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    line-height: 0;
    flex: 0 0 auto;
}

.sidebar-logo img.logo-img {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.sidebar-nav { flex: 1 1 auto; padding: var(--space-1) 0; }

.nav-section { margin-bottom: var(--space-2); }

.nav-section-label {
    padding: var(--space-1) var(--space-2);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* .logout-item e un <button>, nu un <a> - resetam explicit ce vine
   din stilul global de buton (fundal verde, umbra/lift la hover),
   ca sa se comporte identic cu celelalte linkuri din meniu. */
.nav-item {
    background: transparent;
    border: none;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}

.nav-item:hover, .nav-item:active {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    transform: none;
    box-shadow: none;
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.18);
    color: white;
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: var(--space-2) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 24px);
    margin: 2px 12px 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.12); color: white; transform: none; box-shadow: none; }
.sidebar-collapse-btn svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform var(--transition); }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-footer .user-chip { padding: 8px 12px; margin: 0 12px 4px; }
.sidebar-footer .logout-item { color: rgba(255, 255, 255, 0.7); cursor: pointer; background: transparent; border: none; font-family: var(--font); }

.main-content { flex: 1 1 auto; min-width: 0; }

.mobile-topbar {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: 12px var(--space-2);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 25;
}

.mobile-topbar .logo-badge {
    background: var(--color-primary-soft);
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 0;
}

.mobile-topbar img.logo-img { height: 20px; width: auto; object-fit: contain; }

/* .icon-btn e folosit si pt. "elimina din cos" (POS), unde hover rosu
   are sens - aici, pe butonul de meniu, il resetam la un hover neutru. */
.mobile-topbar .icon-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 29;
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: -240px;
        height: 100vh;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.mobile-open { left: 0; }
    .sidebar-backdrop.visible { display: block; }
    .mobile-topbar { display: flex; }
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

/* ---------- Layout ---------- */

.container {
    max-width: 960px;
    margin: var(--space-4) auto;
    padding: 0 var(--space-2);
}

/* Container la scara de dashboard - folosit pe orice pagina de lista,
   formular complex sau ecran de start, spre deosebire de .container
   (960px), rezervat ecranelor cu un singur scop ingust (login,
   quick-add). Vezi CONVENTIONS.md #5.1. */
.container-wide {
    max-width: 1440px;
    margin: var(--space-3) auto;
    padding: 0 var(--space-3);
}

/* Antet de pagina: breadcrumb + titlu in stanga, actiuni (search,
   buton principal) in dreapta - inlocuieste tiparul vechi in care
   primul .card era o bara de search fara niciun titlu de pagina. */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.page-header h1 { margin-bottom: 4px; }
.page-header .page-subtitle { color: var(--color-text-muted); margin: 0; }

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 6px;
}

.breadcrumb:hover { color: var(--color-primary-dark); }

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.page-header > div:first-child {
    flex: 1 1 auto;
    min-width: 240px;
}

@media (max-width: 700px) {
    .page-header-actions { flex-wrap: wrap; }
}

/* Utilitate pentru coloane numerice in tabele (cantitate/pret/total) -
   inlocuieste style="text-align:right" inline repetat pe fiecare pagina. */
.text-right { text-align: right; }

/* Semnaleaza vizual ca numele dintr-un rand de tabel e clickabil
   (afordanta clara, nu doar "tot randul e clickabil fara niciun semn"). */
.cell-link { color: var(--color-primary-dark); font-weight: 600; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    transition: box-shadow var(--transition);
}

.card.elevated { box-shadow: var(--shadow-md); }
.card.table-card { padding: 0; overflow: hidden; }

/* Layout in doua coloane (continut principal + panou lateral de
   actiuni/info) - folosit pe formulare lungi (produs), la fel ca
   .pos-layout de mai jos, ca sa nu se limiteze la o coloana ingusta. */
.side-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-2);
    align-items: start;
}

.sticky-col { position: sticky; top: var(--space-2); }

@media (max-width: 900px) {
    .side-layout { grid-template-columns: 1fr; }
    .sticky-col { position: static; }
}

/* ---------- Formulare ---------- */

.field { margin-bottom: var(--space-2); }

label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-surface);
    margin-bottom: var(--space-2);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

input:hover, select:hover, textarea:hover { border-color: var(--color-border-strong); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(60, 180, 72, 0.18);
}

/* Cantitate ceruta peste stocul disponibil (ex. transfer intre
   magazine) - semnal vizual imediat, inainte sa incerci sa salvezi. */
.field-invalid { border-color: var(--color-danger) !important; }
.field-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18) !important; }

.input-icon { position: relative; }

.input-icon svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
    pointer-events: none;
    transition: color var(--transition);
}

.input-icon input { padding-left: 42px; }
.input-icon:focus-within svg { color: var(--color-primary-dark); }

.search-wrap { position: relative; flex: 1; }

.search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
    pointer-events: none;
}

.search-wrap input { padding-left: 42px; }

/* Dropdown de rezultate cautare produs (ex. NIR - adaugare linie
   prin cautare de nume, nu doar scan EAN) - ancorat sub inputul
   parinte, care trebuie sa aiba position:relative. */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 15;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.search-result-item:hover { background: var(--color-surface-alt); }
.search-result-item:last-child { border-bottom: none; }

/* ---------- Butoane ---------- */

button, .btn {
    background: var(--color-primary-dark);
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--font);
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

button:hover, .btn:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

button:active, .btn:active {
    transform: translateY(0);
    box-shadow: none;
}

button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-block { width: 100%; }

.secondary {
    background: transparent;
    color: var(--color-primary-dark);
    border: 1px solid var(--color-border-strong);
}

.secondary:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-primary-dark);
}

/* ---------- Badge-uri ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.badge.incomplete { background: var(--color-warning-bg); color: var(--color-warning); }
.badge.complete { background: var(--color-success-bg); color: var(--color-primary-dark); }
.badge.inactive { background: var(--color-surface-alt); color: var(--color-text-muted); }
.badge.warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* ---------- Tabel produse ---------- */

table { width: 100%; border-collapse: collapse; }

/* Pentru tabele cu putine coloane si continut scurt (liste de
   clienti/furnizori/magazine/utilizatori) - fara latimi fixe pe coloane,
   layout-ul implicit "auto" al browserului imprastie spatiul liber
   aproape la intamplare intre coloane scurte, lasand goluri uriase
   intre valori pe un container lat. `table-layout:fixed` + o latime
   explicita pe coloanele secundare (`.col-fixed`) tine layout-ul
   compact si predictibil - coloana principala (fara latime) ia tot
   spatiul ramas. */
.table-fixed { table-layout: fixed; }
.table-fixed .col-fixed { width: 160px; }
.table-fixed .col-fixed-sm { width: 120px; }

th, td {
    text-align: left;
    padding: 14px var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

th:first-child, td:first-child { padding-left: var(--space-3); }
th:last-child, td:last-child { padding-right: var(--space-3); }

th {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-surface-alt);
}

tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--color-surface-alt); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.row-clickable { cursor: pointer; }

.prod-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.prod-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-faint);
}

.prod-thumb-placeholder svg { width: 18px; height: 18px; }

.state-cell { padding: 0 !important; }

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    gap: 10px;
}

.spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary-dark);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    color: var(--color-text-muted);
    text-align: center;
}

.empty-state svg {
    width: 52px;
    height: 52px;
    color: var(--color-text-faint);
    margin-bottom: 14px;
}

.empty-state strong {
    display: block;
    color: var(--color-text);
    font-size: 1rem;
    margin-bottom: 4px;
}

/* ---------- Cod scanare (quick-add) ---------- */

.scan-input {
    font-size: 1.5rem;
    padding: 18px;
    text-align: center;
    border: 2px solid var(--color-primary-dark);
    letter-spacing: 0.03em;
    font-weight: 600;
}

.scan-input:focus {
    box-shadow: 0 0 0 4px rgba(60, 180, 72, 0.18);
}

/* ---------- Taburi (rapoarte) ---------- */

.tab-nav {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-2);
}

.tab-btn {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 10px 18px;
    font-weight: 600;
}

.tab-btn:hover {
    background: var(--color-surface-alt);
    transform: none;
    box-shadow: none;
    color: var(--color-text);
}

.tab-btn.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* ---------- Statistici (rapoarte) ---------- */

/* Placuri compacte, NU intinse pe toata latimea - pe un monitor lat,
   3 carduri fortate la 1fr fiecare se umflau cu spatiu gol in jurul
   unei singure cifre. minmax(200px,260px) le tine la o latime fixa,
   rezonabila, indiferent cat de lat e containerul. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
    justify-content: start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.stat-card .stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    letter-spacing: -0.01em;
}

/* Cifra-cheie de business (Vanzari, pe Dashboard) trebuie sa se gaseasca
   instant din priviri - fara asta era identica ca marime cu un contor
   secundar (Documente azi, Stoc scazut), pierduta in acelasi "nivel"
   vizual cu restul. Selector cu specificitate mai mare decat
   ".stat-card .stat-value" de mai sus (altfel regula de baza castiga si
   marimea nu se schimba deloc - bug confirmat vizual la prima incercare,
   corectat aici). */
.stat-card .stat-value.stat-value-hero { font-size: 2.75rem; }
@media (max-width: 700px) {
    .stat-card .stat-value.stat-value-hero { font-size: 2.1rem; }
}

@media (max-width: 700px) {
    .stat-row { grid-template-columns: 1fr; }
}

/* ---------- Grafic simplu cu bare (rapoarte) - fara librarii
   externe, la fel ca restul aplicatiei. ---------- */

.bar-chart-wrap { overflow-x: auto; }

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 200px;
    padding-top: 24px;
    min-width: min-content;
}

.bar-chart-col {
    flex: 1 0 auto;
    min-width: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.bar-chart-value {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
}

.bar-chart-bar {
    width: 100%;
    background: var(--color-primary-dark);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height var(--transition);
}

.bar-chart-label {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    white-space: nowrap;
}

/* ---------- Dashboard - widgete rezumat (Panou general) ---------- */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    /* align-items:stretch (implicit) - incercat start (inaltime dupa
       continut), dar cu 3 carduri usor diferite pe rand a produs margini
       de jos inegale (verificat vizual, live), mai degraba un defect nou
       decat un castig. Ierarhia reala vine din widget-wide (latime), nu
       de aici - stretch ramane, randul arata uniform. */
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* Widget-urile operationale (Stoc scazut, De comandat curand) cer atentie
   si actiune - le dam mai mult loc decat contoarelor pur informative
   (Documente azi, Top produse), ca sa iasa in evidenta la o privire
   rapida, nu doar sa fie "un card printre altele" de aceeasi marime. */
.widget-wide { grid-column: span 2; }
@media (max-width: 700px) {
    .widget-wide { grid-column: span 1; }
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.widget-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
    white-space: nowrap;
}
.widget-link:hover { text-decoration: underline; }

.widget-list { list-style: none; margin: 0; padding: 0; }

.widget-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
}
.widget-list-item:first-child { border-top: none; padding-top: 0; }
.widget-list-item:last-child { padding-bottom: 0; }

.widget-thumb, .widget-thumb-placeholder {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.widget-thumb { object-fit: cover; }
.widget-thumb-placeholder {
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-faint);
}
.widget-thumb-placeholder svg { width: 14px; height: 14px; }

.widget-list-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-list-sub {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.widget-list-value {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- Mesaje ---------- */

.error-msg, .success-msg {
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    margin-bottom: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
}

.error-msg { color: #8B1E13; background: var(--color-danger-bg); }
.success-msg { color: var(--color-primary-dark); background: var(--color-success-bg); }

.error-msg::before, .success-msg::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: white;
    font-size: 0.68rem;
    font-weight: 800;
    margin-right: 8px;
    vertical-align: -4px;
}

.error-msg::before { content: "!"; background: var(--color-danger); }
.success-msg::before { content: "\2713"; background: var(--color-primary-dark); }

.success-msg.pop { animation: successPop 320ms ease; }

/* Mesaj "flotant" (toast) - ramane vizibil indiferent de cat de mult
   a scrolat userul intr-un formular lung (produs), spre diferenta de
   un mesaj simplu inserat in flux, care poate aparea in afara ecranului. */
.toast {
    position: fixed;
    bottom: var(--space-3);
    right: var(--space-3);
    max-width: 360px;
    z-index: 50;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 600px) {
    .toast { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); max-width: none; }
}

@keyframes successPop {
    0% { transform: scale(0.95); opacity: 0; }
    60% { transform: scale(1.01); opacity: 1; }
    100% { transform: scale(1); }
}

/* ---------- Modal (input rapid, inlocuieste prompt()) ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    z-index: 100;
}

.modal-card {
    width: 100%;
    max-width: 360px;
    margin-bottom: 0;
}

.modal-card input { margin-bottom: var(--space-2); }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ---------- Lista sesiune (quick-add) ---------- */

#sessionList { list-style: none; margin: 0; padding: 0; }

#sessionList li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

#sessionList li:last-child { border-bottom: none; }

#sessionList li::before {
    content: "\2713";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-success-bg);
    color: var(--color-primary-dark);
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#sessionList li.enter { animation: slideIn 220ms ease; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Login (split-screen) ---------- */

.login-screen {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.10), transparent 42%),
        radial-gradient(circle at 85% 88%, rgba(227, 30, 36, 0.22), transparent 46%),
        linear-gradient(160deg, var(--color-primary-hover), var(--color-primary-dark));
}

.login-brand-inner { text-align: center; max-width: 360px; }

.login-brand .logo-badge {
    background: white;
    display: inline-flex;
    padding: 20px 28px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-3);
    line-height: 0;
}

.login-brand img {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.login-brand h2 { color: white; font-size: 1.3rem; margin-bottom: 8px; }
.login-brand p { color: rgba(255, 255, 255, 0.92); font-size: 1rem; margin: 0; }

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: var(--color-surface);
}

.login-form-wrap { width: 100%; max-width: 360px; }

.login-logo-mobile {
    display: none;
    height: 44px;
    width: auto;
    object-fit: contain;
    margin: 0 auto var(--space-3);
}

.login-form-wrap h1 { font-size: 1.5rem; margin-bottom: 4px; }
.login-form-wrap .text-muted { margin-bottom: var(--space-3); }

@media (max-width: 860px) {
    .login-screen { grid-template-columns: 1fr; }
    .login-brand { display: none; }
    .login-logo-mobile { display: block; }
    .login-form-panel { padding: var(--space-3) var(--space-2); }
}

/* ---------- POS (vanzare) ---------- */

.pos-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-2);
    align-items: start;
}

.pos-summary {
    position: sticky;
    top: var(--space-2);
}

.pos-total {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary-dark);
    margin: 4px 0 var(--space-2);
}

/* Grila tactila de produse (alternativa la scanare cod de bare) -
   placi mari, cu poza, gandite pentru atins direct cu degetul pe un
   ecran tactil, nu pentru citit text mic ca intr-un tabel. */
.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: var(--space-2);
    max-height: 340px;
    overflow-y: auto;
    padding-top: 2px;
}

/* Tila umple spatiul cu poza produsului (nu un thumbnail mic centrat) -
   nume+pret+stoc suprapuse jos, pe un gradient, ca sa fie citibile
   direct pe poza, indiferent de culoarea ei. */
.pos-product-tile {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.pos-product-tile:hover,
.pos-product-tile.active {
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.pos-product-tile .tile-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-product-tile .tile-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-faint);
}

.pos-product-tile .tile-photo-placeholder svg { width: 28px; height: 28px; }

.pos-product-tile .tile-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    color: #fff;
    text-align: left;
}

.pos-product-tile .tile-name {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-product-tile .tile-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
    font-size: 0.72rem;
}

.pos-product-tile .tile-price { font-weight: 700; white-space: nowrap; }
.pos-product-tile .tile-stock { opacity: .85; white-space: nowrap; }

.payment-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.payment-btn {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 10px;
    font-weight: 600;
}

.payment-btn:hover {
    background: var(--color-surface-alt);
    transform: none;
    box-shadow: none;
    color: var(--color-text);
}

.payment-btn.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.qty-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.qty-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
    transform: none;
    box-shadow: none;
}

.qty-input {
    width: 56px;
    text-align: center;
    padding: 6px 4px;
    margin-bottom: 0;
}

.icon-btn {
    background: transparent;
    color: var(--color-text-faint);
    padding: 6px;
    border-radius: var(--radius-sm);
}

.icon-btn svg { width: 18px; height: 18px; }

.icon-btn:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    transform: none;
    box-shadow: none;
}

/* ---------- Bonuri in asteptare (POS) ---------- */

.held-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.held-ticket-row:last-child { border-bottom: none; }

/* ---------- Bon (receipt) ---------- */

.receipt-wrap { max-width: 420px; margin: 0 auto; }

.receipt-actions {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.receipt-actions button { flex: 1; }

.receipt-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px dashed var(--color-border);
}

.receipt-head strong { font-size: 1.1rem; }
.receipt-head span { font-size: 0.8rem; color: var(--color-text-muted); }

.receipt-table { width: 100%; border-collapse: collapse; }
.receipt-table td { padding: 8px 0; border-bottom: 1px dashed var(--color-border); vertical-align: top; }
.receipt-table tr:last-child td { border-bottom: none; }
.receipt-amount { text-align: right; white-space: nowrap; }

.receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px dashed var(--color-border);
    font-size: 1.2rem;
}

.receipt-total strong { color: var(--color-primary-dark); }

.receipt-payment {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: var(--space-1);
}

@media print {
    body * { visibility: hidden; }
    .receipt, .receipt *, .document-print, .document-print * { visibility: visible; }
    .receipt, .document-print {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: none;
        border: none;
    }
}

/* ---------- Document printabil (factura/aviz/proforma) - singurul
   lucru din aplicatie vazut de clientii finali, tratat cu atentie
   separata de restul UI-ului intern. ---------- */

.document-print {
    max-width: 840px;
    margin: 0 auto;
    padding: var(--space-4);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.document-print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-primary-dark);
}

.document-print-logo { max-width: 220px; max-height: 88px; object-fit: contain; }

.document-print-company-name { font-size: 1.3rem; margin: 10px 0 2px; }

.document-print-doctype { text-align: right; flex: 0 0 auto; }

.document-print-doctype .doc-type-label {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    margin: 0 0 4px;
}

.document-print-doctype .doc-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 2px;
}

.document-print-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.document-print-party {
    padding-right: var(--space-3);
}

.document-print-party + .document-print-party {
    padding-right: 0;
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
}

.document-print-party .party-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.document-print-party .party-name { font-size: 1.05rem; }

.document-print-party .party-detail { color: var(--color-text-muted); font-size: 0.85rem; margin: 4px 0 0; line-height: 1.5; }

.document-print-meta {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    padding-top: var(--space-2);
    margin-bottom: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.document-print table { margin-bottom: var(--space-3); }

.document-print table thead th {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 12px var(--space-2);
}

.document-print table tbody td { padding: 14px var(--space-2); }
.document-print table tbody tr:nth-child(even) { background: var(--color-surface-alt); }

.document-print-totals {
    margin-left: auto;
    width: 100%;
    max-width: 300px;
}

.document-print-totals .totals-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.document-print-totals .totals-row.grand-total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid var(--color-primary-dark);
    color: var(--color-text);
    font-size: 1.4rem;
    font-weight: 800;
}

.document-print-totals .totals-row.grand-total span:last-child { color: var(--color-primary-dark); }

.document-print-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

@media print {
    @page { margin: 16mm; }
}

@media (max-width: 900px) {
    .pos-layout { grid-template-columns: 1fr; }
    .pos-summary { position: static; }
    .document-print-parties { grid-template-columns: 1fr; gap: var(--space-2); }
    .document-print-party + .document-print-party { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
}

/* ---------- POS - shell dedicat (fara sidebar-ul general al
   aplicatiei) - un POS se foloseste pe ecran plin, la casa, nu ca o
   pagina de navigat printre altele. Bara de sus intunecata (identica
   indiferent de tema luminos/intunecat aleasa - un POS de casierie
   are mereu acelasi look profesional, nu se schimba cu preferinta de
   tema a fiecarui utilizator). ---------- */

.pos-shell { min-height: 100vh; background: var(--color-bg); }

.pos-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    background: #14161A;
    color: #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 40;
}

.pos-topbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    font-weight: 800;
    flex: 0 0 auto;
}

.pos-topbar-logo img { height: 24px; width: auto; }

.pos-topbar-nav { display: flex; gap: 4px; flex: 1 1 auto; }

.pos-topbar-navitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    color: #9CA3AF;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    transition: color var(--transition), background var(--transition);
}

.pos-topbar-navitem svg { width: 20px; height: 20px; }
.pos-topbar-navitem:hover { color: white; background: rgba(255, 255, 255, 0.08); transform: none; box-shadow: none; }
.pos-topbar-navitem.active { color: var(--color-primary); }

.pos-topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.pos-topbar-user .user-chip { color: #E5E7EB; font-size: 0.85rem; }
.pos-topbar-user .user-avatar { background: rgba(255, 255, 255, 0.15); }

.pos-topbar-icon-btn {
    background: transparent;
    border: none;
    color: #9CA3AF;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
}

.pos-topbar-icon-btn svg { width: 18px; height: 18px; }
.pos-topbar-icon-btn:hover { color: white; background: rgba(255, 255, 255, 0.1); transform: none; box-shadow: none; }

.pos-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px var(--space-3) 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.pos-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    font-family: var(--font);
}

.pos-tab.active { background: var(--color-bg); color: var(--color-text); border-bottom: 2px solid var(--color-primary-dark); }
.pos-tab .pos-tab-close { display: flex; opacity: 0.6; }
.pos-tab .pos-tab-close:hover { opacity: 1; color: var(--color-danger); }
.pos-tab-add {
    padding: 8px 12px;
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    font-family: var(--font);
    cursor: pointer;
}
.pos-tab-add:hover { color: var(--color-primary-dark); background: transparent; transform: none; box-shadow: none; }

.pos-body { padding: var(--space-2) var(--space-3) var(--space-3); }

.pos-recent {
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: var(--space-2);
}

.pos-recent .recent-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-dark);
}

.pos-recent-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.pos-recent-row .icon-btn { padding: 4px; }

.pos-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: var(--space-2) 0;
}

.pos-keypad-key {
    padding: 14px 0;
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.pos-keypad-key:hover { background: var(--color-border); color: var(--color-text); transform: none; box-shadow: none; }

.pos-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 8px;
    margin-top: var(--space-2);
}

.pos-action-row button { padding: 14px 8px; font-size: 0.9rem; margin: 0; }

.operatiuni-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.operatiuni-tile {
    display: block;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    cursor: pointer;
    font-family: var(--font);
}

.operatiuni-tile:hover { border-color: var(--color-primary-dark); box-shadow: var(--shadow-sm); transform: none; }
.operatiuni-tile strong { display: block; color: var(--color-primary-dark); margin-bottom: 4px; font-size: 0.92rem; }
.operatiuni-tile span { color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.4; }

@media (max-width: 900px) {
    .pos-topbar-navitem span { display: none; }
    .pos-action-row { grid-template-columns: 1fr 1fr; }
    .pos-action-row .btn { grid-column: span 2; }
    .operatiuni-grid { grid-template-columns: 1fr; }
}

/* ---------- POS - zona principala (cos + panou lateral) si bara de
   jos fixa. Totalul si Incaseaza trebuie sa ramana mereu vizibile,
   fara sa fie nevoie de scroll pana jos de pagina - de-aia bara e
   position:fixed (nu sticky: sticky s-ar "desprinde" de indata ce
   scrollam mai jos de propriul ei container parinte, ex. cand se
   deruleaza "Vanzari de azi"). ---------- */

.pos-main {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-2);
    align-items: start;
    margin-bottom: var(--space-2);
}

.pos-cart-card {
    max-height: 60vh;
    overflow-y: auto;
}

.pos-cart-card thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pos-summary {
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

/* Randul din cos in care tocmai s-a adaugat/crescut cantitatea -
   puls scurt de culoare, nu o animatie lenta care ar incetini
   scanarea rapida a mai multor produse la rand. */
.pos-row-flash { animation: rowFlash 220ms ease; }

@keyframes rowFlash {
    0% { background: var(--color-primary-soft); }
    100% { background: transparent; }
}

/* Spatiu jos, cat sa nu fie ascuns continutul (in special "Vanzari
   de azi") sub bara fixa de jos. */
.pos-body { padding-bottom: 190px; }

.pos-draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: 10px var(--space-2);
    margin-bottom: var(--space-2);
    font-size: 0.88rem;
    font-weight: 600;
}

/* Indicator onest de stare hardware - NU pretinde o conexiune care nu
   exista (fara casa de marcat fiscala certificata, fara terminal
   EFTPOS conectate la acest cont). Punctul e gri, nu rosu-alarma:
   e o informatie, nu o eroare a aplicatiei. */
.pos-hw-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #9CA3AF;
    flex: 0 0 auto;
    white-space: nowrap;
}

.hw-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6B6B70;
    flex: 0 0 auto;
}

.pos-shortcut-hint {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-faint);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: 1px;
}

/* ---------- Bara de jos fixa: client / plata / total, apoi Storno +
   Incaseaza. Doua randuri, ca sa incapa confortabil toate campurile
   fara sa devina ilizibile pe o singura linie. ---------- */

.pos-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, 0.10);
    padding: 12px var(--space-3);
}

.pos-bottombar-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr auto;
    gap: var(--space-3);
    align-items: start;
}

.pos-client-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
}

.pos-client-chip:hover { background: var(--color-surface-alt); }
.pos-client-chip > svg { width: 22px; height: 22px; color: var(--color-text-faint); flex: 0 0 auto; }
.pos-client-chip-name { font-weight: 700; font-size: 0.92rem; }

.pos-payment-block { min-width: 0; }

.pos-total-block { text-align: right; min-width: 190px; }
.pos-total-block .pos-total { margin: 2px 0 0; font-size: 1.9rem; }

.pos-bottombar-actions {
    display: grid;
    grid-template-columns: 1fr 2.4fr;
    gap: 10px;
    margin-top: 10px;
}

.pos-bottombar-actions button { padding: 15px 8px; font-size: 1rem; margin: 0; }
.pos-bottombar-actions #finalizeBtn { font-size: 1.1rem; font-weight: 800; }
.pos-bottombar-actions #finalizeBtn:disabled {
    background: var(--color-border-strong);
    color: var(--color-text-faint);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------- Modal alegere client ---------- */

.pos-client-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 4px 0;
}

.pos-client-list-row {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.pos-client-list-row:hover { background: var(--color-surface-alt); }
.pos-client-list-row:last-child { border-bottom: none; }

@media (max-width: 1100px) {
    .pos-bottombar-row { grid-template-columns: 1fr; gap: 10px; }
    .pos-total-block { text-align: left; }
}

@media (max-width: 900px) {
    .pos-main { grid-template-columns: 1fr; }
    .pos-summary { position: static; max-height: none; }
    .pos-cart-card { max-height: none; }
    .pos-body { padding-bottom: 260px; }
    .pos-hw-status span:not(.hw-dot) { display: none; }
    #undoToast { bottom: 250px; }
}

/* Toast-ul de Undo (eliminare produs din cos) trebuie sa apara deasupra
   barei fixe de jos, nu suprapus peste ea - .toast implicit sta la
   bottom:24px, potrivit pe restul paginilor (fara bara fixa), dar pe
   POS ar acoperi Subtotal/Discount din .pos-bottombar. */
#undoToast { bottom: 180px; }