/* ==========================================================================
   Notiria — sistem de design (sept 2026)
   Tokens → shell (sidebar/topbar) → componente → dashboard → compat legacy
   Fără framework extern; fonturile sunt self-hosted în static/fonts.
   ========================================================================== */

:root{
  --ground:#f5f7fa; --surface:#ffffff; --surface-2:#eef2f6; --surface-3:#e4eaf1;
  --line:#dfe5ec; --line-strong:#c6cfda;
  --ink:#14213d; --ink-2:#4a5568; --ink-3:#7b8794;
  --brand:#0b5394; --brand-ink:#ffffff; --brand-soft:#e3eefa; --brand-soft-ink:#0b4a85;
  --side:#0e2a4d; --side-ink:#c9d6e6; --side-ink-strong:#ffffff; --side-active:#1a4b80; --side-line:#1c3a5f;
  --crit:#b42318; --crit-soft:#fde8e6; --crit-ink:#8f1d14;
  --warn:#b54708; --warn-soft:#fdf0d8; --warn-ink:#8a3706;
  --good:#067647; --good-soft:#dcf5e8; --good-ink:#05603a;
  --info:#175cd3; --info-soft:#e0ebfb; --info-ink:#124aa8;
  --shadow:0 1px 2px rgba(20,33,61,.06),0 8px 24px -12px rgba(20,33,61,.18);
  --shadow-pop:0 4px 12px rgba(20,33,61,.10),0 16px 40px -16px rgba(20,33,61,.28);
  --radius:8px; --radius-sm:6px;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --side-w:236px; --top-h:56px; --drawer-w:400px;

}
:root[data-theme="dark"]{
  --ground:#0f141c; --surface:#161d28; --surface-2:#1c2533; --surface-3:#243040;
  --line:#273244; --line-strong:#354357;
  --ink:#e6eaf0; --ink-2:#aeb8c6; --ink-3:#7f8b9b;
  --brand:#3d8de0; --brand-ink:#0b1524; --brand-soft:#17304d; --brand-soft-ink:#9cc6f2;
  --side:#0b1420; --side-ink:#a9b8cb; --side-ink-strong:#ffffff; --side-active:#173254; --side-line:#182739;
  --crit:#f27b72; --crit-soft:#3a1a18; --crit-ink:#f8a29c;
  --warn:#f0a548; --warn-soft:#3a2a12; --warn-ink:#f5c07a;
  --good:#4ccb8f; --good-soft:#12321f; --good-ink:#7fdcae;
  --info:#6aa4f0; --info-soft:#172a48; --info-ink:#9fc3f6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-pop:0 4px 12px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.7);
}

/* ---------- reset & baze ---------- */
*{box-sizing:border-box}
html{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;font-weight:600;text-wrap:balance}
h1{font-size:21px;letter-spacing:-.01em} h2{font-size:17px} h3{font-size:15px} h4{font-size:14px}
p{margin:0 0 .75em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
svg.i.sm{width:15px;height:15px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.muted{color:var(--ink-3)}
.sub{color:var(--ink-3);font-size:12px;display:block;margin-top:1px}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-ink);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--side-line)}
.side-brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--side-line);color:inherit}
.side-brand:hover{text-decoration:none}
.side-brand img{height:34px;width:auto;flex:none}
.side-brand b{color:var(--side-ink-strong);font-size:14.5px;font-weight:600;display:block;line-height:1.15}
.side-brand small{font-size:11.5px;color:var(--side-ink);opacity:.8;display:block;line-height:1.2}
.nav{padding:10px 10px;overflow:auto;flex:1}
.nav-group{margin-bottom:12px}
.nav-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--side-ink);opacity:.6;padding:6px 10px 4px;font-weight:600}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-sm);color:var(--side-ink);font-weight:500;font-size:13.5px}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--side-ink-strong);text-decoration:none}
.nav a.on{background:var(--side-active);color:var(--side-ink-strong);box-shadow:inset 3px 0 0 var(--brand)}
.nav a.danger{color:#f5a6a0}
.nav a .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.12);padding:1px 7px;border-radius:999px;color:var(--side-ink-strong)}
.nav a .cnt.hot{background:var(--warn)}
.side-foot{border-top:1px solid var(--side-line);padding:12px 12px;display:flex;align-items:center;gap:10px}
.side-foot a.me{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;flex:1}
.side-foot a.me:hover{text-decoration:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--side-active);display:grid;place-items:center;font-weight:600;font-size:12.5px;color:var(--side-ink-strong);flex:none}
.side-foot b{display:block;color:var(--side-ink-strong);font-weight:600;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot small{font-size:11.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.side-foot .out{color:var(--side-ink);padding:6px;border-radius:6px;flex:none}
.side-foot .out:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}

.main{min-width:0;display:flex;flex-direction:column;transition:margin-right .22s ease}
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 20px}
.top .burger{display:none}
.crumb{color:var(--ink-3);font-size:13px;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.crumb b{color:var(--ink);font-weight:600}
.gsearch{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 10px;height:36px;width:min(420px,38vw);color:var(--ink-3)}
.gsearch:focus-within{border-color:var(--brand);background:var(--surface)}
.gsearch input{flex:1;background:none;border:0;outline:0;min-width:0;color:var(--ink)}
.gsearch input::placeholder{color:var(--ink-3)}
.gsearch kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line-strong);border-radius:4px;padding:0 5px;color:var(--ink-3)}
.top .spacer{margin-left:auto}
.icon-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--ink-2);border:1px solid transparent;position:relative;flex:none}
.icon-btn:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.icon-btn .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--warn);border:2px solid var(--surface)}

.content{padding:22px 24px 40px;max-width:1440px;width:100%}
.site-foot{margin-top:auto;padding:14px 24px 18px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.site-foot a{color:var(--ink-3)}
.site-foot .ver{margin-left:auto;font-family:var(--mono)}

/* pagini neautentificate (login, 2FA) */
.auth-main{min-height:100vh}

/* ---------- flash / notice ---------- */
.flash-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.notice{display:flex;align-items:flex-start;gap:10px;border:1px solid transparent;border-radius:var(--radius);padding:10px 12px;font-size:13px}
.notice svg.i{margin-top:2px}
.notice b{font-weight:600}
.notice p{margin:0}
.notice .body{flex:1;min-width:0}
.notice .x{margin-left:auto;opacity:.7;padding:2px;border-radius:4px;flex:none;color:inherit}
.notice .x:hover{opacity:1;background:rgba(0,0,0,.06)}
.notice.info{background:var(--info-soft);color:var(--info-ink);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.notice.warn{background:var(--warn-soft);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.notice.crit{background:var(--crit-soft);color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.notice.good{background:var(--good-soft);color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.notice .meta{font-size:12px;opacity:.8;margin-top:4px;display:flex;gap:12px;align-items:center}

/* ---------- butoane ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 13px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);font-weight:500;font-size:13.5px;color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1}
.btn:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{background:var(--brand);color:var(--brand-ink);filter:brightness(1.08)}
.btn.good{background:var(--good);border-color:var(--good);color:#fff}
.btn.good:hover{background:var(--good);color:#fff;filter:brightness(1.08)}
.btn.crit{background:var(--crit);border-color:var(--crit);color:#fff}
.btn.crit:hover{background:var(--crit);color:#fff;filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn .badge-n{font-family:var(--mono);font-size:11px;background:var(--brand);color:var(--brand-ink);border-radius:999px;padding:0 6px;line-height:16px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- pagină ---------- */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.phead h1{margin:0}
.phead p{margin:2px 0 0;color:var(--ink-3);font-size:13px}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi .l{font-size:12px;color:var(--ink-3);font-weight:500;letter-spacing:.02em}
.kpi .v{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--ink-3)}
.kpi.crit{box-shadow:inset 3px 0 0 var(--crit)} .kpi.crit .v{color:var(--crit)}
.kpi.warn{box-shadow:inset 3px 0 0 var(--warn)} .kpi.warn .v{color:var(--warn)}
.kpi.good{box-shadow:inset 3px 0 0 var(--good)} .kpi.good .v{color:var(--good)}

/* ---------- filtre ---------- */
.filters{position:sticky;top:var(--top-h);z-index:15;background:var(--ground);padding:4px 0 12px;margin:0 0 4px}
.fbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px}
.fbar .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{height:30px;padding:0 11px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--surface-2)}
.chip.on{background:var(--brand-soft);color:var(--brand-soft-ink);border-color:color-mix(in srgb,var(--brand) 35%,transparent)}
.chip .n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.chip.on .n{color:inherit;opacity:.8}
.chip .sw{width:8px;height:8px;border-radius:50%;flex:none}
.fbar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.fbar .sort{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:13px}
.select{height:30px;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius-sm);padding:0 8px;font-size:13px;color:var(--ink)}
.adv{display:none;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;padding:10px 0 2px;border-top:1px solid var(--line);margin-top:8px}
.fbar.adv-open .adv{display:grid}
.field label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:3px;font-weight:500}
.field input,.field select{width:100%;height:32px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 9px;background:var(--surface);font-size:13px;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.adv .act{display:flex;align-items:flex-end;gap:6px}

/* ---------- panel + tabel ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.panel-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{font-size:14px;font-weight:600;margin:0}
.panel-h .meta{color:var(--ink-3);font-size:12.5px}
.panel-h .right{margin-left:auto;display:flex;gap:6px}
.panel-empty{padding:36px 16px;text-align:center;color:var(--ink-3)}
.tw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:980px}
.tbl th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:left;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}

tbody.dosar>tr.g{cursor:pointer}
tbody.dosar>tr.g:hover td{background:var(--surface-2)}
tbody.dosar>tr.g td:first-child{padding-left:8px;padding-right:0;width:28px}
.tg{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3);transition:transform .15s}
tbody.dosar.open .tg{transform:rotate(90deg);color:var(--brand)}
tbody.dosar.ex>tr.g td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
.ctr{font-family:var(--mono);font-weight:600;font-size:13.5px}
tbody.dosar tr.s{display:none;background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
tbody.dosar.open tr.s{display:table-row}
tbody.dosar tr.s td{padding:8px 12px;font-size:13px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
tbody.dosar tr.s td:first-child{padding:0}
tbody.dosar tr.s td:first-child::before{content:"";display:block;width:2px;height:100%;margin-left:19px;background:var(--line-strong)}
tbody.dosar tr.s.last td{border-bottom:1px solid var(--line)}
tbody.dosar tr.sh td{background:var(--surface-2);color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:5px 12px}
tbody.dosar tr.g td{border-bottom:1px solid var(--line)}
.who b{font-weight:600;display:block}
.cnp{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);letter-spacing:.02em}

.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.crit{background:var(--crit-soft);color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 35%,transparent)}
.pill.warn{background:var(--warn-soft);color:var(--warn-ink)}
.pill.good{background:var(--good-soft);color:var(--good-ink)}
.pill.info{background:var(--info-soft);color:var(--info-ink)}
.pill.mute{background:var(--surface-3);color:var(--ink-2)}
.pill.mute::before{display:none}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--surface-3);color:var(--ink-2);letter-spacing:.02em;line-height:1.5}
.tag.g{background:var(--warn-soft);color:var(--warn-ink)}
.tag.i{background:var(--brand-soft);color:var(--brand-soft-ink)}
.pills{display:flex;gap:4px;flex-wrap:wrap}

.acts{display:flex;gap:2px;justify-content:flex-end;position:relative}
.ab{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--ink-2);position:relative;border:1px solid transparent;text-decoration:none}
.ab:hover{background:var(--surface-3);color:var(--ink);border-color:var(--line);text-decoration:none}
.ab.note.has{color:var(--brand)}
.ab .b{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-family:var(--mono);font-size:10px;font-weight:600;display:grid;place-items:center}
.ab.star.on{color:var(--warn)} .ab.star.on svg{fill:currentColor}
.ab.is-loading{pointer-events:none;opacity:.6}
.ab.is-loading svg{animation:spin 1s linear infinite}
.ab.is-ok{color:var(--good);background:var(--good-soft)}
.ab.is-err{color:var(--crit);background:var(--crit-soft)}
@keyframes spin{to{transform:rotate(360deg)}}
.menu{position:absolute;right:0;top:34px;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);min-width:240px;padding:6px;display:none;text-align:left}
.menu.open{display:block}
.menu.up{top:auto;bottom:34px}
.menu button,.menu a{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border-radius:6px;font-size:13px;color:var(--ink);text-align:left;text-decoration:none;background:none;border:0;cursor:pointer}
.menu button:hover,.menu a:hover{background:var(--surface-2);text-decoration:none}
.menu .del{color:var(--crit)}
.menu .ok{color:var(--good-ink)}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 3px}
.menu .k{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu form{margin:0}

.pager{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13px;flex-wrap:wrap}
.pager .pg{margin-left:auto;display:flex;gap:3px;align-items:center}
.pager .pg a,.pager .pg span.cur,.pager .pg span.gap{min-width:30px;height:30px;border-radius:6px;padding:0 8px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.pager .pg a:hover{background:var(--surface-2)}
.pager .pg span.cur{background:var(--brand);color:var(--brand-ink)}
.pager .pg span.gap{min-width:auto;color:var(--ink-3)}

/* ---------- panou lateral (drawer generic; DosarChat îl folosește) ---------- */
@media (min-width:1400px){body.drawer-open .main{margin-right:var(--drawer-w)}}

/* ---------- responsive ---------- */
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.adv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:260px;z-index:50;transform:translateX(-100%);transition:transform .22s}
  .app.nav-open .side{transform:none}
  .app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45}
  .top .burger{display:grid}
  .gsearch{width:100%}
  .content{padding:16px 14px 32px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){.kpis{grid-template-columns:1fr 1fr}.adv{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- selecție în masă ---------- */
.chk{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0;vertical-align:middle}
.tbl td.sel,.tbl th.sel{width:36px;text-align:center;padding-left:6px;padding-right:6px}
tbody.dosar tr.s td.sel{padding:8px 6px}
.seltool{display:none;align-items:center;gap:10px;padding:8px 16px;background:var(--brand-soft);color:var(--brand-soft-ink);border-bottom:1px solid var(--line);font-size:13px}
.seltool.on{display:flex}
.seltool b{font-family:var(--mono)}
.seltool .right{margin-left:auto;display:flex;gap:6px}

/* ---------- modal generic ---------- */
.modal-bg{position:fixed;inset:0;z-index:800;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-bg[hidden]{display:none}
.modal-box{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);width:min(640px,100%);max-height:min(85vh,760px);display:flex;flex-direction:column;overflow:hidden}
.modal-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:15px;flex:1;min-width:0}
.modal-h small{color:var(--ink-3);font-size:12px}
.modal-b{padding:16px;overflow:auto;flex:1;background:var(--ground)}
.modal-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.modal-f textarea{width:100%;resize:vertical;min-height:64px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:8px 10px}
.modal-f .row{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:12px}
.modal-f .row .btn{margin-left:auto}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-strong)}
.tl-day{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:14px 0 8px}
.tl-day:first-child{margin-top:0}
.tl-ev{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:8px;font-size:13px}
.tl-ev::before{content:"";position:absolute;left:-22px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)}
.tl-ev.note::before{border-color:var(--warn)}
.tl-ev.sent_mail::before{border-color:var(--good)}
.tl-ev.regenerated::before{border-color:var(--info)}
.tl-ev .m{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--ink-3);margin-bottom:2px}
.tl-ev .m i{font-style:normal;color:var(--ink-3)}
.tl-ev a{font-size:12px}
.tl-empty{text-align:center;color:var(--ink-3);padding:28px 12px}
.ab.tl-btn .b{background:var(--info)}

/* ---------- bară de unelte în panel (ex. expediere) ---------- */
.toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.toolbar .field{flex:1 1 320px;min-width:0}
.toolbar .field .hint{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.toolbar .btn-group{margin-left:auto}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.seg a{padding:0 12px;height:30px;display:inline-flex;align-items:center;font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none}
.seg a+a{border-left:1px solid var(--line-strong)}
.seg a:hover{background:var(--surface-2);text-decoration:none}
.seg a.on{background:var(--brand-soft);color:var(--brand-soft-ink)}

/* ---------- formulare & grile ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.panel-b{padding:16px}
.panel-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:12.5px;color:var(--ink-2);font-weight:500;margin-bottom:4px}
.form-row label .req{color:var(--crit)}
.form-row input,.form-row select,.form-row textarea{width:100%;height:36px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 10px;background:var(--surface);color:var(--ink);font-size:13.5px}
.form-row textarea{height:auto;padding:8px 10px;resize:vertical;min-height:72px}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.form-row input:disabled{background:var(--surface-2);color:var(--ink-3)}
.form-row .hint{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.section-t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.section-t:first-child{margin-top:0;padding-top:0;border-top:0}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:13px}
.dl dt{color:var(--ink-3)} .dl dd{margin:0}
.prose{max-width:68ch;font-size:14px}
.prose ul{padding-left:20px;margin:6px 0}
.big{font-family:var(--mono);font-size:22px;font-weight:600}
.article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.article.crit{box-shadow:inset 3px 0 0 var(--crit),var(--shadow)}
.article.warn{box-shadow:inset 3px 0 0 var(--warn),var(--shadow)}
.article.info{box-shadow:inset 3px 0 0 var(--info),var(--shadow)}
.article h3{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.article .body{white-space:pre-wrap;font-size:13.5px}
.article .meta{font-size:12px;color:var(--ink-3);margin-top:8px}
.row-off td{opacity:.55}

/* ---------- documente lungi (manual, termeni, confidențialitate) ---------- */
.doc{max-width:820px}
.doc .panel-b{padding:24px 28px}
.doc h1{font-size:24px;margin-bottom:4px}
.doc .last-updated{color:var(--ink-3);font-size:13px;margin-bottom:22px}
.doc h2{font-size:17px;margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);color:var(--ink)}
.doc h3{font-size:14.5px;margin:18px 0 6px}
.doc h4{font-size:13.5px;margin:14px 0 4px;color:var(--ink-2)}
.doc p,.doc li{line-height:1.65;font-size:14px}
.doc ul,.doc ol{padding-left:22px;margin:6px 0 12px}
.doc li{margin-bottom:4px}
.doc table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:13.5px}
.doc th,.doc td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--surface-2);font-weight:600;color:var(--ink-2)}
.doc code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);padding:1px 5px;border-radius:4px}
.doc .toc{background:var(--surface-2);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px}
.doc .toc h3{margin:0 0 8px}
.doc .toc ol{margin:0;padding-left:20px;columns:2;column-gap:24px}
.doc .toc a{color:var(--brand)}
.doc .important-notice,.doc .gdpr-highlight{border-radius:var(--radius);padding:12px 14px;margin:16px 0;font-size:13.5px}
.doc .important-notice{background:var(--warn-soft);color:var(--warn-ink);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.doc .gdpr-highlight{background:var(--brand-soft);color:var(--brand-soft-ink);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.doc .important-notice strong,.doc .gdpr-highlight strong{color:inherit}
.doc .legal-section{margin-bottom:8px}
.doc .kbd{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);border-radius:5px;padding:0 6px;font-size:12px;background:var(--surface);vertical-align:middle}
.doc .kbd svg.i{width:14px;height:14px}

/* ---------- autentificare (login, 2FA) ---------- */
.auth-main{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;gap:12px;
  background:radial-gradient(900px 500px at 15% -10%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),
             radial-gradient(700px 400px at 110% 110%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 60%),var(--ground)}
.auth-main .flash-stack{width:min(420px,100%);margin:0}
.auth{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:28px 28px 22px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;text-align:center}
.auth-brand img{height:44px;width:auto}
.auth-brand h1{font-size:19px;margin:4px 0 0}
.auth-brand p{color:var(--ink-3);font-size:13px;margin:0}
.auth .form-row{margin-bottom:14px}
.auth .iw{position:relative}
.auth .iw svg.i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.auth .iw input{padding-left:36px;height:40px}
.auth .iw:focus-within svg.i{color:var(--brand)}
.auth .btn.primary{width:100%;height:40px;margin-top:4px;font-size:14px}
.auth-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink-3);font-size:12px}
.auth-foot a{color:var(--ink-3)}
.otp{font-family:var(--mono);font-size:28px;letter-spacing:.35em;text-align:center;height:56px!important;padding-left:.35em!important}
.otp::placeholder{letter-spacing:.35em;color:var(--line-strong)}
.auth-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:13px}
.auth-actions form{margin:0}
.auth-actions .link{background:none;border:0;padding:0;color:var(--brand);cursor:pointer;font:inherit;font-size:13px}
.auth-actions .link:hover{text-decoration:underline}
.auth-actions .link.crit{color:var(--crit)}
.countdown{text-align:center;color:var(--ink-3);font-size:13px;margin-top:12px}
.countdown b{font-family:var(--mono);color:var(--ink)}
.auth-theme{position:fixed;top:12px;right:12px}