/* =====================================================================
   DYAD ERP — Design System „Industrial Luxury / Enterprise Operations"
   Portocaliul e ACCENT (≈5%), nu culoarea dominantă. 80% light, 15% dark.
   Numele claselor sunt neschimbate: paginile nu se ating.
   ===================================================================== */
:root {
    /* brand */
    --or:      #F58220;   /* DYAD orange (accent) */
    --or-d:    #D9650B;   /* orange dark */
    --amber:   #FFB13B;
    --or-l:     #FEF3E7;  /* orange foarte deschis (fundal iconuri) */
    --or-l2:    #FEF8F1;

    /* dark (sidebar) — charcoal, mai blând decât negru pur */
    --dark:    #23272E;
    --dark2:   #2A2F36;

    /* neutrale */
    --bg:      #F5F6F7;   /* fundal aplicație */
    --surface: #FFFFFF;
    --bd:      #E5E7EB;   /* border */
    --bd2:     #D0D5DD;   /* border inputuri */
    --ink:     #17191C;   /* text primary */
    --txt:     #344054;   /* text body */
    --mut:     #667085;   /* text secondary */

    /* semantice */
    --ok:      #16A34A;
    --warn:    #F59E0B;
    --bad:     #DC2626;
    --info:    #2563EB;

    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
    --sh-sm: 0 1px 2px rgba(16,24,40,.05);
    --sh-md: 0 4px 16px rgba(16,24,40,.08);
    --sh-lg: 0 16px 48px rgba(16,24,40,.18);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, "Manrope", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }

/* =====================================================================
   TOPBAR — alb, 64px, foarte clean
   ===================================================================== */
.appbar {
    height: 64px;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 30;
}
.appbar .burger {
    width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
    color: var(--mut); transition: background .15s, color .15s;
}
.appbar .burger:hover { background: var(--bg); color: var(--ink); }
.appbar .burger svg { width: 19px; height: 19px; }

.crumb { color: var(--mut); font-size: 14px; display: flex; align-items: center; }
.crumb b { color: var(--ink); font-weight: 600; }
.crumb .sep { margin: 0 8px; color: var(--bd2); }
.appbar .sp { flex: 1; }

/* global search */
.topsearch { position: relative; width: 360px; max-width: 34vw; }
.topsearch svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--mut); }
.topsearch input {
    width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--bd);
    border-radius: 8px; font-size: 13.5px; background: var(--bg); color: var(--ink); transition: .15s;
}
.topsearch input::placeholder { color: #98A2B3; }
.topsearch input:focus { outline: none; border-color: var(--or); background: #fff; box-shadow: 0 0 0 3px rgba(245,130,32,.12); }

.topicons { display: flex; align-items: center; gap: 2px; }
.iconbtn {
    width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
    color: var(--mut); transition: background .15s, color .15s; position: relative;
}
.iconbtn:hover { background: var(--bg); color: var(--ink); }
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--or); border: 2px solid #fff; }

/* company switch DST/DCG */
.co-sw { display: flex; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; height: 34px; }
.co-sw button { padding: 0 13px; font-size: 12.5px; font-weight: 600; color: var(--mut); transition: .15s; }
.co-sw button.active { background: var(--dark); color: #fff; }
.co-sw button:hover:not(.active) { background: var(--bg); }

.ava {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--or), var(--or-d)); color: #fff;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.user-box { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.user-nume { font-size: 13px; color: var(--ink); font-weight: 500; }
.btn-logout {
    width: 34px; height: 34px; border-radius: 8px; color: var(--mut);
    display: grid; place-items: center; transition: .15s;
}
.btn-logout:hover { background: #FBEAE8; color: var(--bad); }

/* =====================================================================
   SHELL + SIDEBAR — dark premium, categorii, collapsible
   ===================================================================== */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 64px); transition: grid-template-columns .18s ease; }
.shell.collapsed { grid-template-columns: 72px 1fr; }
/* Fundalul sertarului nu există decât pe ecran mic — acolo meniul e sertar. */
.side-fundal { display: none; }

.side {
    background: linear-gradient(180deg, #2A2F36 0%, #202329 100%);
    color: rgba(255,255,255,.74);
    padding: 14px 0 26px;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(0,0,0,.25);
}
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }

.logo { display: flex; align-items: center; padding: 8px 18px 4px; min-height: 44px; }
.logo-full { max-width: 172px; max-height: 42px; width: auto; height: auto; display: block; }
.logo-sym { display: none; width: 30px; height: 30px; }
.shell.collapsed .logo { justify-content: center; padding: 10px 0 6px; }
.shell.collapsed .logo-full { display: none; }
.shell.collapsed .logo-sym { display: block; }
.logo-sub {
    font-size: 9.5px; letter-spacing: .16em; color: rgba(255,255,255,.38);
    padding: 0 20px 14px; text-transform: uppercase; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 10px; white-space: nowrap;
}
.shell.collapsed .logo b, .shell.collapsed .logo-sub { display: none; }

.nav-cat {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.34); padding: 14px 22px 6px; white-space: nowrap;
}
.shell.collapsed .nav-cat { text-align: center; padding: 12px 0 6px; color: transparent; height: 1px; overflow: hidden; }
.shell.collapsed .nav-cat::before { content: ""; display: block; width: 20px; height: 1px; background: rgba(255,255,255,.1); margin: 6px auto; }

.nav-list { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; list-style: none; margin: 0; }
.nav-item a {
    display: flex; align-items: center; gap: 11px; padding: 0 12px; height: 42px; border-radius: 8px;
    color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px; font-weight: 500;
    transition: background .13s, color .13s; white-space: nowrap; overflow: hidden;
}
.nav-item a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.nav-sub a { padding-left: 44px; font-size: 12px; opacity: .85; }
.nav-item a.active { background: var(--or); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(245,130,32,.35); }
.nav-item a.active .ic { color: #fff; }
.nav-item .ic { flex: 0 0 18px; width: 18px; height: 18px; color: rgba(255,255,255,.55); display: grid; place-items: center; }
.nav-item .ic svg { width: 18px; height: 18px; }
.shell.collapsed .nav-item a { justify-content: center; padding: 0; }
.shell.collapsed .nav-item .tx { display: none; }
.nav-sep { display: none; }

/* =====================================================================
   MAIN + PAGE HEADER
   ===================================================================== */
/* min-width:0 e esenţial: ca element de grilă, <main> altfel se lărgeşte cât
   cel mai lat tabel din el şi TOATĂ pagina capătă derulare orizontală — antetul
   lipit, bara de sus şi cardurile ies din ecran. Cu el, tabelul lat derulează
   singur, în containerul lui, iar pagina rămâne cât fereastra. */
main { padding: 20px 22px 48px; max-width: 100%; min-width: 0; }

/* Antetul paginii rămâne lipit sub bara de sus. Motivul nu e estetic: acolo stau
   butonul principal (Salvează, Trimite) ŞI mesajul de rezultat. Pe ecranele lungi
   — ofertă, fişă client, fişă furnizor — antetul ieşea din ecran, aşa că omul
   apăsa un buton de jos şi confirmarea apărea unde nu se uita. Raportat de cinci
   ori: taxa de zonă, punct nou, salvare hartă, trimitere ofertă, bulina de traseu. */
.phead {
    display: flex; align-items: center; gap: 12px;
    /* Pe ecran mic butoanele din dreapta (Înapoi, PDF client, PDF intern, Vezi
       oferta…) nu mai încap pe un rând. Fără wrap ele lărgeau PAGINA, nu doar
       antetul: apărea derulare orizontală pe tot ecranul, iar bara de sus şi
       meniul plecau lateral. Aşa, trec pe rândul următor. (Corina, 9 sep 2026) */
    flex-wrap: wrap; row-gap: 8px;
    position: sticky;
    top: 64px;                       /* exact sub .appbar, care are 64px */
    z-index: 25;
    /* Bară plină, pe toată lăţimea zonei de conţinut: se întinde peste
       marginile lui <main> ca să nu rămână o fâşie gri cu conţinut care
       „iese" pe lângă ea când se derulează. */
    background: var(--surface);
    border-bottom: 1px solid var(--bd);
    margin: -20px -22px 14px;
    padding: 12px 22px;
}
.phead h1 { line-height: 1.2; }
/* Umbra e permanentă, nu comandată din JS: se vede că textul trece pe sub antet,
   şi nu depinde de niciun eveniment de derulare ca să apară. */
.phead h1 { font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.4px; color: var(--ink); }
.phead .sub { font-size: 13.5px; color: var(--mut); margin-top: 3px; }
.phead .lead { display: flex; flex-direction: column; }

/* Antet de secţiune ÎN pagină (a doua, a treia zonă a unui ecran). Arată ca
   .phead, dar nu e lipit de bara de sus: două bare lipite la acelaşi top:64px
   se acoperă una pe alta, iar a doua stă peste ultimele rânduri ale tabelului
   de deasupra — nu se mai vedea ultimul utilizator din listă.
   (Raportat de Cosmin pe ecranul Utilizatori, 5 oct 2026.) */
.shead {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; row-gap: 8px;
    margin: 22px 0 12px;
}
.shead h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; }

/* =====================================================================
   KPI CARDS — premium, simple
   ===================================================================== */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 232px)); gap: 12px; margin-bottom: 18px; justify-content: start; }
/* Pe ecran lat, patru pe rând: opt KPI-uri ies 4+4, nu 5+3. */
@media (min-width: 1080px) { .kpis { grid-template-columns: repeat(4, 232px); } }
/* Nota de sub KPI-uri: puncte scurte, nu paragraf. */
.note { margin: 0; padding-left: 16px; list-style: none; }
.note li { position: relative; font-size: 12.5px; line-height: 1.65; }
.note li::before { content: "•"; position: absolute; left: -13px; color: var(--or); font-weight: 700; }
.kpi {
    background: var(--surface); border: 1px solid var(--bd); border-radius: 10px; padding: 14px 16px;
    box-shadow: var(--sh-sm); transition: box-shadow .15s, border-color .15s;
}
.kpi:hover { box-shadow: var(--sh-md); }
.kpi .l { font-size: 11.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.kpi .v { font-family: var(--mono); font-size: 25px; font-weight: 600; margin-top: 6px; line-height: 1.05; color: var(--ink); letter-spacing: -.5px; }
.kpi .s { font-size: 11.5px; color: var(--mut); margin-top: 5px; }
.kpi.hot { border-color: #F5C69B; }
.kpi.clic { cursor: pointer; }
.kpi.clic:hover { border-color: var(--or); box-shadow: var(--sh-md); }
.kpi .ico {
    width: 36px; height: 36px; border-radius: 9px; background: var(--or-l); color: var(--or-d);
    display: grid; place-items: center; float: right; margin-left: 10px;
}
.kpi .ico svg { width: 19px; height: 19px; }
.trend-up { color: var(--ok); font-weight: 600; }
.trend-dn { color: var(--bad); font-weight: 600; }

/* =====================================================================
   CARD & TABLE — ERP enterprise
   ===================================================================== */
.card { background: var(--surface); border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; box-shadow: var(--sh-sm); }
.gap { margin-bottom: 16px; }
h2.sec { font-size: 14px; font-weight: 600; margin: 0; padding: 12px 15px; border-bottom: 1px solid var(--bd); color: var(--ink); }
.two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1160px) { .two { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; }
/* Celulă care se scurtează cu „…" în loc să lăţească tabelul. Era folosită în
   cinci ecrane fără să fie definită — un link Google lipit într-un obiectiv
   împingea toată lista de oferte în afara ecranului. Textul întreg e în title. */
td.trunc, th.trunc {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
th {
    font-size: 11px; font-weight: 600; color: var(--mut); text-align: left; padding: 8px 11px;
    border-bottom: 1px solid var(--bd); background: #F8F9FA; white-space: nowrap;
    text-transform: uppercase; letter-spacing: .03em;
}
/* „r” înseamnă la dreapta, şi în capul tabelului şi în corp. Regula pentru td
   lipsea, aşa că antetul stătea la dreapta iar cifrele la stânga — nu se aliniau.
   Cifrele primesc şi tabular-nums, ca să cadă unele sub altele. */
th.r, td.r { text-align: right; }
td.r { font-variant-numeric: tabular-nums; }
td { padding: 8px 11px; border-bottom: 1px solid #F1F2F4; color: var(--txt); font-size: 13px; }
td.num, td.mono, td .mono { white-space: nowrap; }
tbody tr { transition: background .1s; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FAFAFA; }
tbody td:first-child { color: var(--ink); font-weight: 500; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; letter-spacing: -.2px; }
.clic { cursor: pointer; }

/* =====================================================================
   BADGES / STATUS PILLS
   ===================================================================== */
.tag { font-size: 11.5px; padding: 3px 9px; border-radius: 6px; font-weight: 600; display: inline-block; line-height: 1.5; letter-spacing: .01em; }
.t-liv  { background: #DCFCE7; color: #15803D; }   /* verde  */
.t-curs { background: #DBEAFE; color: #1D4ED8; }   /* albastru */
.t-init { background: #F2F4F7; color: #475467; }   /* gri */
.t-dif  { background: #FEE2E2; color: #B91C1C; }   /* roșu */
.t-conf { background: #FEF0D9; color: #B45309; }   /* portocaliu/amber */
.t-grup { background: #EDE9FE; color: #6D28D9; }   /* mov */
.warn { color: var(--warn); }
.red  { color: var(--bad); }
.mut  { color: var(--mut); }

/* semafor acte flotă */
.s-ok      { background: #DCFCE7; color: #15803D; }
.s-atentie { background: #FEF0D9; color: #B45309; }
.s-critic  { background: #FFE4D5; color: var(--or-d); }
.s-expirat { background: #FEE2E2; color: #B91C1C; font-weight: 700; }
.pilbloc   { background: var(--bad); color: #fff; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; font-weight: 700; letter-spacing: .3px; }

/* =====================================================================
   BUTOANE
   ===================================================================== */
.btn-p {
    background: var(--or); color: #fff; height: 40px; padding: 0 16px; border-radius: 8px;
    font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: .15s;
    box-shadow: 0 1px 2px rgba(245,130,32,.25);
}
.btn-p:hover:not(:disabled) { background: var(--or-d); }
.btn-p:disabled { opacity: .5; cursor: default; box-shadow: none; }
.btn-s {
    border: 1px solid var(--bd2); height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px;
    color: var(--txt); background: #fff; display: inline-flex; align-items: center; gap: 7px; transition: .15s; font-weight: 500;
}
.btn-s:hover { background: var(--bg); border-color: var(--mut); }
.phead .btn-p, .phead .btn-s,
.shead .btn-p, .shead .btn-s { margin-left: 10px; }
.salvat { font-size: 13px; color: var(--ok); font-weight: 500; margin-right: 6px; }
.eroare { font-size: 13px; color: var(--bad); font-weight: 500; margin-right: 6px; }

/* =====================================================================
   TOOLBAR + SEARCH + FILTRE
   ===================================================================== */
.tools { display: flex; align-items: center; gap: 9px; padding: 11px 15px; flex-wrap: wrap; }
.srch { position: relative; flex: 0 0 260px; }
.srch input { width: 100%; height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--bd2); border-radius: 8px; font-size: 13.5px; background: #fff; transition: .15s; }
.srch input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(245,130,32,.12); }
.srch .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--mut); font-size: 14px; }
.tools .sp { flex: 1; }

/* =====================================================================
   PAGINARE
   ===================================================================== */
/* Subsolul unei fişe e aproape întotdeauna o explicaţie, nu o bară de butoane.
   Cât a fost display:flex, orice <b> sau <a> din mijlocul frazei devenea element
   de flex şi textul se rupea în coloane, de nu se mai înţelegea ce scrie — se
   vedea la harta taxei de zonă. Şapte locuri îşi puneau deja display:block pe
   style ca să scape. Acum proza e implicitul, iar barele cer .bara.
   (Cosmin, 5 oct 2026.) */
.foot { display: block; line-height: 1.6; padding: 10px 15px; font-size: 12.5px; color: var(--mut); border-top: 1px solid var(--bd); }
.foot.bara { display: flex; align-items: center; line-height: normal; }
.foot .sp { flex: 1; }
.pg { display: flex; gap: 3px; align-items: center; }
.pg button { min-width: 30px; height: 30px; border-radius: 7px; color: var(--txt); font-size: 13px; border: 1px solid transparent; background: none; }
.pg button[aria-current="true"] { border-color: var(--or); color: var(--or-d); background: var(--or-l); font-weight: 600; }
.pg button:hover:not([disabled]) { background: var(--bg); }
.pg button:disabled { opacity: .4; cursor: default; }

/* =====================================================================
   FORMULARE + INPUTURI
   ===================================================================== */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px 18px; padding: 18px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--txt); font-weight: 500; }
/* Casetele stau pe aceeaşi linie, oricât de lung ar fi textul de deasupra lor.
   Fără asta, un câmp cu explicaţie pe două rânduri îşi împinge caseta mai jos
   decât vecinele şi rândul arată strâmb (Cosmin, 28 sep 2026). */
.form label > :last-child { margin-top: auto; }
.form label.lat { grid-column: 1 / -1; }
.form input, .form select, .form textarea, .sel {
    height: 40px; padding: 0 11px; border: 1px solid var(--bd2); border-radius: 8px; font-size: 13.5px;
    color: var(--ink); background: #fff; transition: .15s;
}
.form textarea { height: auto; padding: 9px 11px; }
.form input:focus, .form select:focus, .form textarea:focus, .sel:focus {
    outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(245,130,32,.12);
}
.form input::placeholder, .sel::placeholder { color: #98A2B3; }
.form .sufix { font-size: 12px; color: var(--mut); }

/* Datele se introduc cu MAJUSCULE (cerinţă Corina). Se exclud e-mailurile,
   linkurile, parolele şi numerele — acolo majusculele strică valoarea. */
.form input[type="text"], .form input:not([type]), .form textarea,
table.edit input[type="text"], table.edit input:not([type]) {
    text-transform: uppercase;
}
.form input[type="email"], .form input[type="url"], .form input[type="password"],
.form input[type="number"], .form input[type="date"], .form input.num,
.form input.nocaps, table.edit input.num, table.edit input.nocaps,
.form input[placeholder*="@"], table.edit input[placeholder*="@"],
.form input[placeholder*="http"], .form input[placeholder*="link"],
.form input::placeholder { text-transform: none; }
.sel { display: inline-flex; align-items: center; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--txt); }
.chk input { margin: 0; accent-color: var(--or); width: 15px; height: 15px; }
.lbl { font-size: 12px; color: var(--mut); margin-bottom: 3px; font-weight: 500; }

/* tabel editabil — inputurile şi butoanele rămân pe o linie (fără wrap) */
/* 8px lăsau casetele lipite una de alta: două câmpuri alăturate, amândouă gri,
   se citeau ca un singur bloc. Cu 12px se văd ca două câmpuri. */
table.edit td { padding: 6px 12px; white-space: nowrap; }
table.edit th { padding-left: 12px; padding-right: 12px; }
table.edit input, table.edit select {
    height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; font-size: 13px;
    background: #F8F9FA; color: var(--ink);
}
table.edit input:hover, table.edit select:hover { border-color: var(--bd2); }
table.edit input:focus, table.edit select:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(245,130,32,.1); background: #fff; }
table.edit input.num { text-align: right; font-family: var(--mono); }
.w-full { width: 100%; } .w-6 { width: 100px; } .w-5 { width: 80px; } .w-4 { width: 64px; }
td.calc { color: var(--mut); font-style: italic; }
td.total { font-weight: 600; color: var(--ink); }
button.mic, a.mic {
    font-size: 12px; color: var(--txt); border: 1px solid var(--bd2); border-radius: 7px;
    padding: 4px 9px; margin-left: 4px; text-decoration: none; display: inline-block; background: #fff; transition: .15s; font-weight: 500;
}
button.mic:hover, a.mic:hover { border-color: var(--or); color: var(--or-d); background: var(--or-l); }
button.mic.rm:hover { border-color: var(--bad); color: var(--bad); background: #FEE2E2; }
button.mic.activ { border-color: var(--or); color: var(--or-d); background: var(--or-l); }
button.mic:disabled { opacity: .4; cursor: default; }
button.mic:disabled:hover { border-color: var(--bd2); color: var(--txt); background: #fff; }

/* =====================================================================
   MODAL / DRAWER
   ===================================================================== */
.modal-fundal { position: fixed; inset: 0; background: rgba(17,19,21,.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); animation: fadein .15s ease; }
.modal-cutie { background: #fff; border-radius: 14px; padding: 22px 24px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-lg); border-top: 3px solid var(--or); animation: pop .16s ease; }
@keyframes fadein { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }

/* căutare type-ahead */
.cauta-pop { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: var(--sh-md); max-height: 300px; overflow-y: auto; margin-top: 4px; }
.cauta-item { padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13.5px; border-bottom: 1px solid #F1F2F4; }
.cauta-item:last-child { border-bottom: 0; }
.cauta-item:hover { background: var(--or-l); }
.cauta-item b { font-weight: 600; }

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-fundal { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, #2C313A 0%, #1E2126 100%); padding: 20px; }
.login-card { background: #fff; border-radius: 16px; box-shadow: var(--sh-lg); padding: 34px; width: 380px; border-top: 3px solid var(--or); }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.login-camp { display: block; font-size: 12.5px; color: var(--txt); margin-bottom: 14px; font-weight: 500; }
.login-camp input { display: block; width: 100%; margin-top: 5px; height: 42px; padding: 0 12px; border: 1px solid var(--bd2); border-radius: 8px; font-size: 14px; }
.login-camp input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(245,130,32,.12); }
/* ochiul de pe câmpul de parolă */
.parola-wrap { position: relative; display: block; }
.parola-wrap input { padding-right: 40px; }
.ochi {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: 0; background: none; cursor: pointer; font-size: 16px;
    line-height: 1; padding: 6px; color: var(--mut); border-radius: 6px;
}
.ochi:hover { background: var(--or-l2); }

/* =====================================================================
   ALERTE / PANOURI (păstrate, retușate)
   ===================================================================== */
.alerta { background: #FEF0D9; border: 1px solid #FADFB0; border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0; padding: 12px 16px; font-size: 13px; color: #7A4E11; line-height: 1.6; }
.alerta a, .alerta-linie a { color: var(--or-d); }
.alerta-linie { background: var(--or-l2); border-top: 1px solid var(--bd); padding: 9px 16px; font-size: 12.5px; color: #7A4E11; }
.alerta-rea { background: #FEE2E2; border: 1px solid #F5C6C2; border-left: 3px solid var(--bad); border-radius: 0 10px 10px 0; padding: 13px 16px; font-size: 13px; color: #7F1D1D; line-height: 1.6; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.model-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding: 10px 16px; border-top: 1px solid var(--bd); background: #F8F9FA; font-size: 12.5px; color: var(--mut); }
.model-bar b { color: var(--ink); font-weight: 600; }
.model-bar .sp { flex: 1; }
.draft-stare { font-size: 12.5px; color: var(--mut); margin-right: 6px; font-style: italic; }
.perioada { border-left: 3px solid var(--or); }
.perioada .tools { gap: 9px; }
.harta { border-top: 1px solid var(--bd); background: #F8F9FA; }
.harta-cap { display: flex; align-items: center; gap: 9px; padding: 10px 16px; font-size: 12.5px; color: var(--txt); border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.harta-cap .sageata { color: var(--or); font-weight: 600; }
.harta-cap .sp { flex: 1; }
.harta img { display: block; width: 100%; height: auto; }
/* Hărţile Leaflet îşi pun straturile pe z-index 400–800. Fără un context de
   stivuire propriu, ar trece peste antetul lipit de mai sus. */
.leaflet-container { position: relative; z-index: 0; }

/* Rândul de autofiltru de sub capul de tabel (nomenclator): compact, gri,
   vizibil ca unealtă, nu ca date. Rămâne lipit sub antetul tabelului. */
tr.filtre td { padding: 4px 6px; background: #F1F2F4; border-bottom: 2px solid var(--bd2); }

/* Tabel cu capul (şi rândul de filtre) lipit sus cât se derulează. Containerul
   e cel care derulează, cu înălţime cât ecranul; thead rămâne vizibil în el. */
.tabel-fix { overflow: auto; max-height: calc(100vh - 230px); }
/* Aceeaşi bară de derulare orizontală, repetată deasupra tabelului lat: fără
   ea, ca să vezi coloanele din dreapta trebuie să cobori la capătul listei.
   Se leagă de tabel din App.razor, după id. */
.bara-sus { overflow-x: auto; overflow-y: hidden; }
.bara-sus > div { height: 1px; }
.tabel-fix thead { position: sticky; top: 0; z-index: 3; }
.tabel-fix thead th, .tabel-fix thead td { box-shadow: inset 0 -1px 0 var(--bd); }

/* Celule care nu se lăbărţează: textul lung se taie cu trei puncte, iar
   întregul rămâne în tooltip, la hover. Lăţimea se dă pe coloană, cu .lat-N. */
.taie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-90 { max-width: 90px; }   .lat-120 { max-width: 120px; }
.lat-150 { max-width: 150px; } .lat-190 { max-width: 190px; }
tr.filtre input, tr.filtre select {
    width: 100%; min-width: 0; font-size: 11.5px; padding: 3px 6px;
    border: 1px solid var(--bd); border-radius: 5px; background: var(--surface);
}

tr.selectat > td { background: var(--or-l2); }
.panou { border-top: 1px solid var(--bd); background: var(--or-l2); }
.panou-cap { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--bd); font-size: 13.5px; }
.panou-cap .sp { flex: 1; }
.panou .mut { color: var(--mut); font-size: 12px; }
.panou .form { background: transparent; }
.istoric { border-top: 1px solid var(--bd); background: #FAFAFA; }
.istoric-cap { display: flex; align-items: center; gap: 9px; padding: 10px 16px; font-size: 13px; color: var(--txt); border-bottom: 1px solid var(--bd); }
.istoric-cap .sp { flex: 1; }
.anaf { border-left: 3px solid var(--or); }
.anaf-cap { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--bd); font-size: 13.5px; flex-wrap: wrap; }
.anaf-cap .sp { flex: 1; }
.anaf-corp { padding: 12px 16px; font-size: 13px; line-height: 1.6; }
.anaf-corp .mut { color: var(--mut); font-size: 12px; margin-top: 4px; }

/* buline de ajustare traseu (Leaflet waypoints) */
.wp-dot div { width: 16px; height: 16px; border-radius: 50%; background: var(--amber);
    border: 3px solid var(--or-d); box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: grab; }
.wp-dot div:active { cursor: grabbing; }

/* chart minimalist (bare verticale) */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 18px 22px 10px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.chart-bar { width: 100%; max-width: 48px; background: linear-gradient(180deg, var(--amber), var(--or)); border-radius: 6px 6px 0 0; min-height: 4px; transition: filter .15s; }
.chart-col:hover .chart-bar { filter: brightness(.92); }
.chart-lbl { font-size: 11.5px; color: var(--mut); margin-top: 9px; white-space: nowrap; font-weight: 500; }

/* empty state */
.empty { text-align: center; padding: 44px 20px; color: var(--mut); }
.empty svg { width: 40px; height: 40px; color: var(--bd2); margin-bottom: 12px; }
.empty .t { font-size: 14px; color: var(--txt); font-weight: 500; }

/* responsive — sub 900px meniul nu mai ia din lăţimea paginii: iese peste
   conţinut, ca un sertar, şi se deschide din butonul cu trei linii. Înainte
   coloana lui se făcea 0 şi nu exista nimic care să pună clasa mobile-open,
   deci pe ecran mic meniul rămânea inaccesibil. */
@media (max-width: 900px) {
    /* O singură coloană, nu „0 1fr": sertarul e position:fixed, deci iese din
       flux şi nu mai e element de grilă. Cu două coloane, <main> aluneca în
       prima — cea de 0px — şi rămânea lat cât marginile lui, 44px. De-acolo
       veneau titlurile scrise un cuvânt pe rând şi butoanele una peste alta pe
       telefon. (Costel, 5 oct 2026: „nu pot aproba de pe telefon".) */
    .shell, .shell.collapsed { grid-template-columns: 1fr; }
    .side {
        position: fixed; top: 64px; left: 0; width: 248px; height: calc(100vh - 64px);
        transform: translateX(-100%); transition: transform .18s ease; z-index: 40;
    }
    .shell.mobile-open .side { transform: none; box-shadow: var(--sh-lg); }
    /* meniul restrâns la iconuri n-are sens în sertar: textul rămâne */
    .shell.collapsed .logo-full { display: block; }
    .shell.collapsed .logo-sym { display: none; }
    .shell.collapsed .logo b, .shell.collapsed .logo-sub { display: block; }
    .shell.collapsed .nav-item a { justify-content: flex-start; padding: 0 16px; }
    .shell.collapsed .nav-item .tx { display: inline; }
    .shell.collapsed .nav-cat { text-align: left; padding: 12px 16px 6px; color: rgba(255,255,255,.38); height: auto; }
    .shell.collapsed .nav-cat::before { display: none; }
    .topsearch { display: none; }
    /* numele lung al omului nu mai împinge bara de sus în afara ecranului */
    .user-nume { display: none; }
    .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Antetul paginii nu mai stă lipit pe telefon. Pe editorul de ofertă are
       şapte butoane, care pe 375px cad pe cinci rânduri: 292px, adică 36% din
       ecran blocaţi permanent, peste cei 64 ai barei de sus. Sus rămâne doar
       bara aplicaţiei; antetul se derulează odată cu pagina. */
    .phead { position: static; margin-top: 0; }
    /* Fundalul de sub sertar: o apăsare lângă el îl închide, ca peste tot. */
    .side-fundal { display: block; position: fixed; inset: 64px 0 0 0; background: rgba(14, 20, 28, .45); z-index: 39; }
    /* Marginile mari ale paginii mâncau 44 din 375px. */
    main { padding: 14px 14px 40px; }
    /* Titlul unei fişe stătea pe acelaşi rând cu butoanele ei şi se strângea
       până la lăţimea celui mai lung cuvânt: „Produse ofertate" ajungea lat de
       52px şi ieşea rupt pe două rânduri — de-aici impresia de scris pus
       alandala. Pe telefon titlul ia rândul lui, butoanele trec dedesubt. */
    /* !important fiindcă titlurile astea au `flex:0` scris pe style, în 42 de
       locuri din 16 ecrane. Pe monitor lat e corect — titlul nu trebuie să
       crească. Pe telefon e exact ce le strânge. */
    .tools .sec { flex: 1 0 100% !important; }
    /* Distanţierul împinge butoanele la dreapta pe monitor lat. Când totul cade
       pe rânduri, nu mai are ce separa şi lasă doar o gaură. */
    .tools .sp { display: none; }
    .phead { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}

/* ── Taburi de modul (Stocuri DCG) ─────────────────────────────────────── */
.taburi { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--bd); }
.taburi button {
    border: 0; background: none; padding: 9px 14px; font-size: 13px; font-weight: 600;
    color: var(--mut); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.taburi button:hover { color: var(--ink); }
.taburi button.activ { color: var(--or); border-bottom-color: var(--or); }

/* stoc negativ: imposibil de ratat */
tr.neg > td { background: #FEF3F2; }
.neg-val { color: #B42318; font-weight: 700; }
.neg-avert { color: #B42318; font-size: 11px; font-weight: 600; }

/* bara de randament din fişa de test */
.bar-test { height: 8px; background: #EDF0F2; border-radius: 8px; overflow: hidden; margin-top: 6px; max-width: 220px; }
.bar-test span { display: block; height: 100%; background: var(--or); }

/* ── Reconectarea Blazor: vizibilă, în română ──────────────────────────── */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center;
    background: rgba(14, 20, 28, .55); backdrop-filter: blur(2px);
}
.reconectare-cutie {
    background: #fff; border-radius: 14px; padding: 26px 30px; max-width: 420px;
    text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.reconectare-titlu { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.reconectare-text { font-size: 13px; color: var(--mut); margin-bottom: 16px; }

/* ── Încărcare cu progres (uploader.js) ────────────────────────────────── */
.up-bara { height: 8px; background: #EDF0F2; border-radius: 8px; overflow: hidden; margin-top: 8px; display: none; }
.up-bara span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #F5821F, #E2611A); transition: width .2s; }
.up-status { font-size: 11.5px; color: var(--mut); margin-top: 4px; min-height: 15px; }


/* ===== Panoul şoferului (telefon + fişa de la birou) ===== */
    /* Panoul şoferului: ecran de telefon, în afara meniului ERP */
    .pn{--navy:#1B2438;--or:#F5821F;--or2:#FDA94F;--bg:#F1F2F6;--card:#fff;--txt:#181C24;
        --mut:#707888;--bd:#E7E9EF;--ok:#1E8F55;--okb:#E6F6ED;--wr:#B9760A;--wrb:#FCF1DC;--bad:#C63A3A;--badb:#FBE9E9;
        font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--txt);background:var(--bg);
        min-height:100vh;max-width:520px;margin:0 auto;padding-bottom:26px}
    .pn *{box-sizing:border-box}
    .pn-top{background:var(--navy);color:#fff;padding:16px 18px 20px}
    .pn-brand{font-weight:800;letter-spacing:.5px;font-size:13px;opacity:.85}
    .pn-nume{font-weight:800;font-size:19px;margin-top:12px}
    .pn-sub{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px}
    .pn-plac{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
             border-radius:6px;padding:1px 7px;font-weight:700;font-size:11.5px;margin-left:6px}
    .pn-luni{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:999px;padding:4px;margin-top:16px}
    .pn-luni button{flex:1;padding:9px 6px;border:0;background:transparent;color:rgba(255,255,255,.65);
                    font:inherit;font-weight:700;font-size:12.5px;border-radius:999px;cursor:pointer}
    .pn-luni button.on{background:#fff;color:var(--navy)}
    .pn-body{padding:16px 14px}
    .pn-tit{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin:20px 2px 9px}
    .pn-tit:first-child{margin-top:0}
    .pn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .pn-k{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:13px 14px}
    .pn-k .v{font-size:21px;font-weight:800;line-height:1}
    .pn-k .v small{font-size:12px;font-weight:700;color:var(--mut);margin-left:2px}
    .pn-k .l{font-size:11.5px;color:var(--mut);font-weight:700;margin-top:5px}
    .pn-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden}
    .pn-rand{display:flex;gap:11px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--bd)}
    .pn-rand:last-child{border-bottom:0}
    .pn-rand .b{flex:1;min-width:0}
    .pn-rand .t{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .pn-rand .s{font-size:11.5px;color:var(--mut);margin-top:2px}
    .pn-rand .r{text-align:right;flex-shrink:0;font-size:12.5px;font-weight:800}
    .pn-st{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}
    .pn-ok{background:var(--okb);color:var(--ok)} .pn-wr{background:var(--wrb);color:var(--wr)} .pn-bad{background:var(--badb);color:var(--bad)}
    .pn-sub2{display:flex;gap:8px;margin-bottom:12px}
    .pn-sub2 button{flex:1;padding:9px;border-radius:10px;border:1px solid var(--bd);background:#fff;
                    font:inherit;font-weight:700;font-size:12.5px;color:var(--mut);cursor:pointer}
    .pn-sub2 button.on{background:var(--navy);border-color:var(--navy);color:#fff}
    .pn-nota{background:#EFF1F6;border:1px dashed #C9CDD9;border-radius:10px;padding:10px 12px;
             font-size:11.5px;color:var(--mut);line-height:1.5;margin-top:10px}
    .pn-pin{max-width:340px;margin:64px auto;background:#fff;border:1px solid var(--bd);border-radius:16px;padding:22px}
    .pn-pin h2{margin:0 0 4px;font-size:17px}
    .pn-pin p{margin:0 0 16px;font-size:12.5px;color:var(--mut);line-height:1.5}
    .pn-pin input{width:100%;padding:12px;font-size:22px;letter-spacing:8px;text-align:center;
                  border:1px solid var(--bd);border-radius:10px;font-family:inherit}
    .pn-pin button{width:100%;margin-top:12px;padding:12px;border:0;border-radius:10px;background:var(--or);
                   color:#fff;font:inherit;font-weight:800;font-size:14px;cursor:pointer}
    .pn-er{color:var(--bad);font-size:12.5px;font-weight:700;margin-top:10px}

/* Randul de trimitere pe mail: adresa si butonul stau la distanta unul de
   altul, nu lipite. Fara regula asta divul era nestilizat. */
.trimite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.trimite .w-mail { min-width: 320px; }

/* Clopoţelul din bara de sus: ce e de rezolvat, pe scurt, cu legătură
   către fişa unde se rezolvă. */
.topicons { position: relative; }
.notif { position: absolute; top: 52px; right: 0; width: 340px; max-height: 60vh; overflow-y: auto;
         background: var(--surface); border: 1px solid var(--bd); border-radius: 10px;
         box-shadow: var(--sh-lg); z-index: 60; }
.notif-cap { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
             border-bottom: 1px solid var(--bd); font-size: 13px; }
.notif-gol { padding: 18px 14px; font-size: 12.5px; color: var(--mut); }
.notif-rand { display: block; padding: 10px 14px; border-bottom: 1px solid var(--bd);
              text-decoration: none; color: inherit; }
.notif-rand:hover { background: var(--bg); }
.notif-rand:last-child { border-bottom: 0; }
.notif-ce { font-size: 13px; font-weight: 600; color: var(--ink); }
.notif-sub { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.notif-cand { font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.notif-cand.rau { color: var(--bad); }
.notif-cand.atentie { color: #8A5A00; }