/* Smart Stay Facturi — design system. Mobile-first. */
:root{
  --brand:#1a6fce;
  --bg:#f4f6fa; --surface:#fff; --surface-2:#f8fafc;
  --text:#121a2a; --muted:#64708a; --line:#e3e7ef;
  --empty:#eef1f6; --empty-ink:#9aa5b8;
  --recv:#fef3c7; --recv-line:#f0b429; --recv-ink:#8a5a00;
  --paid:#dcfce7; --paid-line:#22a06b; --paid-ink:#116140;
  --red:#fee2e2; --red-line:#dc2626; --red-ink:#9b1c1c;
  --r:16px; --r-sm:10px; --r-lg:20px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.05);
  --shadow-lg:0 8px 32px rgba(16,24,40,.14);
  --nav-w:242px; --topbar-h:56px; --bottom-h:62px;
  --font:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.25}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .5rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}
.txt-red{color:var(--red-line)}
.grow{flex:1;min-width:0}
.nowrap{white-space:nowrap}
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
[hidden]{display:none !important}

/* ---------------------------------------------------------------- shell */
.main{padding:16px 16px calc(var(--bottom-h) + 24px);max-width:1180px;margin:0 auto}
body.wide .main{max-width:1480px}
body.has-nav .main{padding-top:calc(var(--topbar-h) + 16px)}
body.no-nav .main{padding:0}

.sidebar{display:none}
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:0 14px;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text);min-width:0}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px;object-fit:cover}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#111));color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.04em}
.brand-mark-lg{width:56px;height:56px;border-radius:14px;font-size:1.1rem}

.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px;
  color:var(--muted);font-size:.68rem;font-weight:500}
.bottomnav a:hover{text-decoration:none}
.bottomnav a i{font-size:1.2rem}
.bottomnav a.on{color:var(--brand)}

@media(min-width:1000px){
  .topbar,.bottomnav{display:none}
  body.has-nav .main{padding:28px 28px 48px;margin-left:var(--nav-w)}
  .sidebar{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--nav-w);z-index:40;
    background:var(--surface);border-right:1px solid var(--line);padding:18px 14px}
  .sidebar .brand{padding:0 8px 18px;font-size:1rem}
  .sidebar nav{display:flex;flex-direction:column;gap:3px;flex:1}
  .sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
    color:var(--muted);font-weight:500}
  .sidebar nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
  .sidebar nav a.on{background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand);font-weight:600}
  .sidebar nav a i{font-size:1.05rem}
  .sidebar nav .count{margin-left:auto;background:var(--red-line);color:#fff;font-size:.68rem;font-weight:700;
    border-radius:99px;padding:1px 7px}
  .sidebar-foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
  .me{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .me strong{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .me small{color:var(--muted);font-size:.74rem}
}

/* --------------------------------------------------------------- blocks */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.page-head p{margin:2px 0 0}
.head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs{margin-bottom:10px;font-size:.88rem}
.crumbs a{color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.panel-red{border-color:var(--red-line);background:linear-gradient(180deg,#fff6f6,#fff)}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cols2{display:grid;gap:16px}
@media(min-width:900px){.cols2{grid-template-columns:1fr 1fr}}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.anchors{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.anchors a{flex:none;padding:6px 13px;border-radius:99px;background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-size:.85rem;font-weight:500}
.anchors a:hover{color:var(--brand);border-color:var(--brand);text-decoration:none}

/* ------------------------------------------------------------------ kpi */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:760px){.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.kpis-sm{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.kpi{display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow);color:var(--text)}
a.kpi:hover{border-color:var(--brand);text-decoration:none}
.kpi small{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.kpi strong{font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.kpi span{font-size:.8rem}
.kpi-sm strong{font-size:1.2rem}
.kpi-warn{border-color:var(--recv-line);background:linear-gradient(180deg,#fffbeb,#fff)}
.kpi-red{border-color:var(--red-line);background:linear-gradient(180deg,#fff5f5,#fff)}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-weight:500;
  font-size:.9rem;cursor:pointer;transition:.14s;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:color-mix(in srgb,var(--brand) 86%,#000);color:#fff}
.btn-ghost{background:transparent}
.btn-sm{padding:6px 11px;font-size:.84rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;transition:.14s}
.icon-btn:hover{background:var(--surface-2);color:var(--brand)}
.icon-btn[disabled]{opacity:.3;pointer-events:none}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;margin-top:12px}
.actions-left{justify-content:flex-start}
.inline-form{display:inline-flex;gap:2px}
.sticky-actions{position:sticky;bottom:calc(var(--bottom-h) + 8px);background:rgba(244,246,250,.94);
  backdrop-filter:blur(8px);padding:10px;border-radius:var(--r);z-index:5}
@media(min-width:1000px){.sticky-actions{bottom:12px}}
.link{font-size:.86rem;font-weight:500}

/* --------------------------------------------------------------- inputs */
label{display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:500;color:var(--muted);min-width:0}
label small{font-weight:400}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font:inherit;font-size:16px}
@media(min-width:760px){input,select,textarea{font-size:.92rem}}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 35%,#fff);outline-offset:1px;border-color:var(--brand)}
input[type=color]{padding:3px;height:40px;cursor:pointer}
input[type=file]{padding:7px;background:var(--surface-2)}
input[type=range]{padding:0;accent-color:var(--brand)}
textarea{resize:vertical;min-height:64px;line-height:1.45}
fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;margin:0}
legend{font-size:.82rem;font-weight:600;color:var(--muted);padding:0 6px}
.grid2,.grid3,.grid4{display:grid;gap:12px}
@media(min-width:620px){.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}}
.span2{grid-column:span 2}.span3{grid-column:span 2}.span4{grid-column:1/-1}
@media(min-width:980px){.span3{grid-column:span 3}}
@media(max-width:619px){.span2,.span3{grid-column:1/-1}}
.checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.check{flex-direction:row;align-items:center;gap:7px;font-weight:400;color:var(--text);cursor:pointer}
.check input{width:auto;flex:none}
.switch{flex-direction:row;align-items:flex-start;gap:10px;cursor:pointer;font-weight:400;color:var(--text)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.sw{flex:none;width:38px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:.18s;margin-top:1px}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .sw{background:var(--brand)}
.switch input:checked + .sw::after{transform:translateX(16px)}
.switch input:focus-visible + .sw{outline:2px solid var(--brand);outline-offset:2px}
.sw-l{display:flex;flex-direction:column;font-size:.9rem}
.sw-l small{color:var(--muted);font-size:.78rem}
.radio-cards{display:grid;gap:8px;margin-bottom:12px}
@media(min-width:760px){.radio-cards{grid-template-columns:repeat(3,1fr)}}
.rc{flex-direction:row;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font-weight:400;color:var(--text)}
.rc input{width:auto;flex:none;margin-top:3px}
.rc:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,#fff)}
.rc span{display:flex;flex-direction:column}
.rc small{color:var(--muted);font-size:.78rem}
.range-field{gap:8px}
.dropzone{align-items:center;justify-content:center;gap:8px;padding:22px;border:2px dashed var(--line);
  border-radius:var(--r);background:var(--surface-2);text-align:center;cursor:pointer;color:var(--muted)}
.dropzone i{font-size:1.5rem;color:var(--brand)}
.dropzone input{max-width:280px}
.field-note{display:flex;flex-direction:column;gap:5px;justify-content:center}
.copy-input{margin-top:6px;font-size:.8rem}
.filters-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filters-bar select,.filters-bar input{width:auto;min-width:130px;flex:1 1 150px}
.search-field{position:relative;flex:2 1 230px;display:flex;align-items:center}
.search-field i{position:absolute;left:11px;color:var(--muted);pointer-events:none}
.search-field input{padding-left:33px;width:100%}
.segment{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:3px;overflow-x:auto}
.segment a{flex:none;padding:5px 13px;border-radius:99px;font-size:.84rem;font-weight:500;color:var(--muted)}
.segment a.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow)}
.segment a:hover{text-decoration:none}

/* --------------------------------------------------------------- badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:.74rem;
  font-weight:600;background:var(--empty);color:var(--empty-ink);white-space:nowrap}
.badge-received{background:var(--recv);color:var(--recv-ink)}
.badge-paid{background:var(--paid);color:var(--paid-ink)}
.badge-red{background:var(--red);color:var(--red-ink)}
.badge-warn{background:var(--recv);color:var(--recv-ink)}
.badge-muted{background:var(--empty);color:var(--empty-ink)}
.badge-role{background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:.76rem;font-weight:600;
  background:color-mix(in srgb,var(--c,#64708a) 14%,#fff);color:color-mix(in srgb,var(--c,#64708a) 78%,#000);white-space:nowrap}
.chip-ghost{background:var(--empty);color:var(--empty-ink)}
.chips-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.chip-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font-size:.84rem;font-weight:500;color:var(--muted)}
.chip-btn b{font-weight:700;opacity:.65}
.chip-btn:hover{text-decoration:none;border-color:var(--c,var(--brand));color:var(--c,var(--brand))}
.chip-btn.on{background:color-mix(in srgb,var(--c,var(--brand)) 13%,#fff);border-color:var(--c,var(--brand));color:color-mix(in srgb,var(--c,var(--brand)) 80%,#000)}
.meter{display:inline-block;width:52px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;vertical-align:middle}
.meter span{display:block;height:100%;background:var(--brand)}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand);font-weight:700}

/* --------------------------------------------------------------- alerts */
/* Bloc, nu flex: într-un container flex fiecare <b> devine coloană separată,
   iar textul alertei se rupe în bucăți. */
.alert{display:block;padding:11px 14px;border-radius:var(--r-sm);margin-bottom:14px;font-size:.9rem;line-height:1.5}
.alert > i:first-child{margin-right:7px}
.alert .copy-input{display:block;width:100%;margin-top:7px}
.alert-red{background:var(--red);color:var(--red-ink)}
.alert-warn{background:var(--recv);color:var(--recv-ink)}
.alert-ok{background:var(--paid);color:var(--paid-ink)}
.alert-info{background:color-mix(in srgb,var(--brand) 9%,#fff);color:color-mix(in srgb,var(--brand) 80%,#000)}
.toast{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--r-sm);margin-bottom:14px;
  background:var(--paid);color:var(--paid-ink);font-weight:500;font-size:.9rem;animation:slide .24s ease}
.toast-err{background:var(--red);color:var(--red-ink)}
@keyframes slide{from{opacity:0;transform:translateY(-6px)}}
.empty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:36px 18px;text-align:center;color:var(--muted)}
.empty i{font-size:2rem;opacity:.4}
.empty h3{color:var(--text)}

/* ---------------------------------------------------------- invoice row */
.inv-list{display:flex;flex-direction:column;gap:8px}
.inv{display:flex;align-items:stretch;gap:11px;padding:11px;border:1px solid var(--line);border-left:4px solid var(--empty-ink);
  border-radius:var(--r-sm);background:var(--surface);transition:.14s}
.inv:hover{box-shadow:var(--shadow);border-color:var(--line)}
.inv-received{border-left-color:var(--recv-line)}
.inv-paid{border-left-color:var(--paid-line)}
.inv-red{border-left-color:var(--red-line)}
.inv-file{display:grid;place-items:center;width:38px;flex:none;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:1.15rem}
.inv-file:hover{color:var(--brand);text-decoration:none}
.inv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;color:var(--text)}
.inv-main:hover{text-decoration:none}
.inv-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.inv-unit{font-weight:700}
.inv-prov{font-size:.8rem;color:var(--muted)}
.inv-sub{font-size:.89rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.78rem;color:var(--muted)}
.inv-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;flex:none}
.inv-amount{font-weight:700;white-space:nowrap}
@media(max-width:560px){
  .inv{flex-wrap:wrap}
  .inv-side{flex-direction:row;align-items:center;width:100%;justify-content:space-between;
    border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
}

/* ------------------------------------------------------------- mail/inbox */
.tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:1px}
.tabs a{flex:none;display:flex;align-items:center;gap:6px;padding:8px 13px;color:var(--muted);font-size:.88rem;
  font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.tabs b{background:var(--empty);color:var(--empty-ink);border-radius:99px;padding:0 6px;font-size:.7rem}
.tabs a.on b{background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand)}
.inbox-search{position:relative;display:flex;align-items:center;margin-bottom:12px}
.inbox-search i{position:absolute;left:12px;color:var(--muted)}
.inbox-search input{padding-left:34px}
.mail{display:grid;gap:14px}
@media(min-width:1100px){.mail{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}}
.mail-list{display:flex;flex-direction:column;gap:6px;max-height:none}
@media(min-width:1100px){.mail-list{max-height:calc(100vh - 230px);overflow-y:auto;padding-right:4px}}
.bulk-bar{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);position:sticky;top:0;z-index:2}
.bulk-bar select{flex:1;min-width:0}
.mail-item{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border:1px solid var(--line);
  border-left:4px solid var(--empty-ink);border-radius:var(--r-sm);background:var(--surface)}
.mail-item.on{border-color:var(--brand);box-shadow:var(--shadow)}
.mi-received{border-left-color:var(--recv-line)}
.mi-paid{border-left-color:var(--paid-line)}
.mi-red{border-left-color:var(--red-line)}
.mi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--text)}
.mi-body:hover{text-decoration:none}
.mi-top{display:flex;align-items:center;gap:6px}
.mi-date{margin-left:auto;font-size:.75rem;color:var(--muted);white-space:nowrap}
.mi-subject{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-meta{display:flex;align-items:center;gap:7px;font-size:.78rem}
.mi-amount{margin-left:auto;font-weight:600}
.mail-preview{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.mp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.mp-head h2{font-size:1rem}
.mail-body{max-height:260px;overflow:auto;padding:12px;background:var(--surface-2);border-radius:var(--r-sm);font-size:.86rem;white-space:pre-wrap}
.pdf-frame{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);height:380px}
.pdf-tall{height:min(78vh,860px)}
.pdf-frame iframe{width:100%;height:100%;border:0;display:block}
.quick-map{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.quick-map h3{margin-bottom:10px}
.why{margin-top:10px;font-size:.84rem}
.why summary{cursor:pointer;color:var(--muted);font-weight:500}
.why ul{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.why li{margin-bottom:3px}

/* ----------------------------------------------------------- unit cards */
.unit-grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.ucard{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-top:3px solid var(--empty-ink);border-radius:var(--r);box-shadow:var(--shadow);
  color:var(--text);transition:.14s}
.ucard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);text-decoration:none}
.ucard-received{border-top-color:var(--recv-line)}
.ucard-paid{border-top-color:var(--paid-line)}
.ucard-red{border-top-color:var(--red-line)}
.is-archived{opacity:.6}
.ucard-head{display:flex;align-items:center;gap:10px}
.ucard-code{display:grid;place-items:center;min-width:46px;height:38px;padding:0 8px;border-radius:10px;flex:none;
  background:color-mix(in srgb,var(--brand) 11%,#fff);color:var(--brand);font-weight:700}
.ucard-id{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ucard-id strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard-id small{font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard-strip{display:flex;flex-wrap:wrap;gap:5px;min-height:26px;align-items:center}
.ustrip{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-size:.78rem;
  background:color-mix(in srgb,var(--c) 15%,#fff);color:color-mix(in srgb,var(--c) 80%,#000)}
.ustrip.miss{background:var(--empty);color:var(--empty-ink);border:1px dashed var(--line)}
.ucard-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:.8rem;
  border-top:1px solid var(--line);padding-top:9px}
.ucard-flag{position:absolute;top:-9px;right:12px;background:var(--red-line);color:#fff;font-size:.68rem;
  font-weight:600;padding:2px 9px;border-radius:99px;display:flex;align-items:center;gap:4px}

/* ------------------------------------------------------------ unit head */
.unit-head{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
@media(min-width:1000px){.unit-head{grid-template-columns:1fr auto;align-items:start}
  .uh-actions{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}}
.uh-main{display:flex;gap:13px;align-items:flex-start}
.uh-code{display:grid;place-items:center;min-width:58px;height:48px;padding:0 10px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#111));color:#fff;font-size:1.1rem;font-weight:700}
.uh-stats{display:flex;gap:10px;flex-wrap:wrap}
.uh-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ----------------------------------------------------------- Excel grid */
.sheet-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);-webkit-overflow-scrolling:touch}
.sheet{border-collapse:separate;border-spacing:0;width:100%;font-size:.84rem;min-width:860px}
.sheet th,.sheet td{padding:7px 9px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center}
.sheet thead th{background:var(--surface-2);font-weight:600;color:var(--muted);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:2}
.sheet thead th.is-now{background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand)}
.sheet tbody th,.sheet td:nth-child(2),.sheet td:nth-child(3){text-align:left}
.sticky-col{position:sticky;left:0;z-index:3;background:var(--surface);min-width:132px}
.sheet thead .sticky-col{z-index:4;background:var(--surface-2)}
.sheet tbody tr:hover td{background:color-mix(in srgb,var(--brand) 4%,#fff)}
.cell{font-weight:600;min-width:52px}
.cell a{display:block;padding:1px;color:inherit}
.cell a:hover{text-decoration:none;opacity:.75}
.cell sup{font-size:.6em;opacity:.7;margin-left:1px}
.cell-empty{background:var(--empty)}
.cell-empty .cell-empty,.cell .cell-empty{color:var(--empty-ink);font-weight:400}
.cell-received{background:var(--recv);color:var(--recv-ink)}
.cell-paid{background:var(--paid);color:var(--paid-ink)}
.cell-red{background:var(--red);color:var(--red-ink)}
.sheet-total{background:var(--surface-2);font-weight:700}
.sheet tfoot th,.sheet tfoot td{background:var(--surface-2);font-weight:700;border-top:2px solid var(--line)}
/* Pe telefon contează lunile: furnizorul și codul client se văd în secțiunea Contracte,
   așa că ies din grid ca să nu împingă lunile în afara ecranului. */
@media(max-width:760px){
  .sheet thead th:nth-child(2),.sheet thead th:nth-child(3),
  .sheet tbody td:nth-child(2),.sheet tbody td:nth-child(3),
  .sheet tfoot td:nth-child(2){display:none}
  .sheet{min-width:0}
  .sticky-col{min-width:98px}
  .sheet th,.sheet td{padding:7px 6px}
}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:10px;font-size:.8rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}
.lg{width:13px;height:13px;border-radius:4px;display:inline-block}
.lg-empty{background:var(--empty)} .lg-received{background:var(--recv);border:1px solid var(--recv-line)}
.lg-paid{background:var(--paid);border:1px solid var(--paid-line)} .lg-red{background:var(--red);border:1px solid var(--red-line)}

/* --------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.87rem}
.table th,.table td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.table thead th{background:var(--surface-2);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:600;white-space:nowrap}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table small{display:block;color:var(--muted);font-size:.76rem}
.td-actions{text-align:right;white-space:nowrap}
.row-muted{opacity:.6}
.row-red{background:color-mix(in srgb,var(--red) 36%,#fff)}
.row-warn{background:color-mix(in srgb,var(--recv) 40%,#fff)}
.row-form td{background:var(--surface-2)}
.was{color:var(--muted);font-size:.72rem}
@media(max-width:860px){
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:9px;padding:5px;background:var(--surface)}
  .table td{border:0;display:flex;justify-content:space-between;gap:12px;padding:6px 8px;text-align:right}
  .table td::before{content:attr(data-l);font-size:.74rem;color:var(--muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:none}
  .table td:empty{display:none}
  .table .num{text-align:right}
}

/* ------------------------------------------------------------ list bits */
.gap-list,.contract-list,.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gap-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 11px;background:var(--surface-2);border-radius:var(--r-sm)}
.gap-unit{display:flex;flex-direction:column;line-height:1.25;color:var(--text);min-width:92px}
.gap-unit small{color:var(--muted);font-size:.76rem}
.gap-types{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}
.contract-list li{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-sm)}
.ct-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.ct-main small{font-size:.78rem}
.doc-list li{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm)}
.doc-list li > i{font-size:1.2rem;color:var(--muted)}
.doc-list a{color:var(--text);display:flex;flex-direction:column;line-height:1.3;min-width:0}
.doc-list a strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.timeline{list-style:none;margin:0;padding:0 0 0 16px;position:relative;display:flex;flex-direction:column;gap:12px}
.timeline::before{content:'';position:absolute;left:4px;top:5px;bottom:5px;width:2px;background:var(--line)}
.timeline li{display:flex;align-items:flex-start;gap:10px;position:relative}
.tl-dot{position:absolute;left:-16px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid var(--surface)}
.timeline div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.timeline small{color:var(--muted);font-size:.78rem}
.tl-sm{font-size:.88rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0 0 10px;font-size:.88rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500;text-align:right}

/* -------------------------------------------------------- invoice view */
.invoice-view{display:grid;gap:16px}
@media(min-width:1100px){.invoice-view{grid-template-columns:1fr minmax(340px,400px);align-items:start}}
.iv-side{display:flex;flex-direction:column}
.paybox{text-align:center}
.paybox h3{margin-bottom:8px}
.pay-amount{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;margin:0}
.paybox.paid{background:linear-gradient(180deg,#f0fdf4,#fff);border-color:var(--paid-line)}
.paybox.paid h3{color:var(--paid-ink)}
.paybox .kv{text-align:left}

/* ------------------------------------------------------------- settings */
.settings{display:grid;gap:16px}
@media(min-width:1000px){.settings{grid-template-columns:232px 1fr;align-items:start}}
.subnav{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:6px;box-shadow:var(--shadow)}
@media(min-width:1000px){.subnav{flex-direction:column;overflow:visible;position:sticky;top:20px}}
.subnav a{flex:none;display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--muted);font-size:.87rem;font-weight:500;white-space:nowrap}
.subnav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.subnav a.on{background:color-mix(in srgb,var(--brand) 11%,#fff);color:var(--brand);font-weight:600}
.settings-body{min-width:0}
.sb-head{margin-bottom:14px}
.sb-head p{margin:3px 0 0;font-size:.88rem}
details.panel > summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:.95rem}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary::after{content:'\F282';font-family:bootstrap-icons;margin-left:auto;color:var(--muted);font-size:.8rem;transition:.2s}
details.panel[open] > summary::after{transform:rotate(180deg)}
details.panel > summary small{display:block;color:var(--muted);font-size:.78rem;font-weight:400}
details.panel > summary .grow{display:flex;flex-direction:column;line-height:1.3}
details.panel[open] > summary{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.add-summary{color:var(--brand);font-weight:600}
.reorder{display:flex;gap:1px;margin-left:auto}
.type-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 78%,#000)}
.init-types{display:flex;flex-direction:column;gap:9px}
.init-row{display:grid;gap:8px;align-items:center}
@media(min-width:760px){.init-row{grid-template-columns:1fr 1fr 1fr}}
.month-locks{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.ml{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.ml-locked{background:color-mix(in srgb,var(--brand) 6%,#fff);border-color:color-mix(in srgb,var(--brand) 30%,#fff)}
.ml-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ml form{margin-top:6px}
.ml .btn{width:100%}
.prio-list{list-style:none;counter-reset:p;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.prio-list li{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.prio-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--brand) 13%,#fff);color:var(--brand);font-weight:700;font-size:.82rem}
.prio-list strong{display:block;font-size:.9rem}
.prio-list small{display:block;font-size:.78rem}
.export-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(222px,1fr))}
.export-card{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);color:var(--text)}
.export-card:hover{border-color:var(--brand);text-decoration:none;background:#fff}
.export-card i{font-size:1.4rem;color:var(--brand)}
.export-card small{color:var(--muted);font-size:.78rem}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.swatch{align-items:center;gap:5px;cursor:pointer;width:72px}
.swatch input{position:absolute;opacity:0;width:0;height:0}
.swatch span{width:48px;height:34px;border-radius:9px;border:2px solid transparent;display:block}
.swatch input:checked ~ span{border-color:var(--text);box-shadow:0 0 0 2px #fff inset}
.swatch small{font-size:.72rem;color:var(--muted);text-align:center}
.swatch-custom input[type=color]{position:static;opacity:1;width:48px;height:34px}
.brand-preview{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2)}
.logo-preview{width:56px;height:56px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.switch-box{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.switch-box summary{cursor:pointer;color:var(--brand);font-size:.86rem;font-weight:500}
.switch-box form{margin-top:10px}
.unit-pick .checks{max-height:190px;overflow:auto}
.hide-sm{display:none}
@media(min-width:1000px){.hide-sm{display:block}}

/* ------------------------------------------------------------- auth/dialog */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:100%;max-width:382px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-lg)}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.auth-brand div{display:flex;flex-direction:column;line-height:1.3}
.auth-brand small{color:var(--muted);font-size:.78rem}
.auth-foot{margin:14px 0 0;text-align:center;font-size:.86rem}
/* Dialogul de plată. Clasă proprie: „.sheet" e tabelul-grid, iar o regulă comună
   i-ar impune gridului max-width-ul dialogului. */
.modal{border:0;border-radius:var(--r-lg);padding:0;max-width:430px;width:calc(100% - 28px);box-shadow:var(--shadow-lg)}
.modal::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(2px)}
.modal form{padding:20px}
.modal header{margin-bottom:14px}
.modal header p{margin:3px 0 0;font-size:.86rem}
.modal footer{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:.86rem}

@media print{
  .sidebar,.topbar,.bottomnav,.head-actions,.actions-row,.filters-bar,.tabs,.anchors,.subnav{display:none !important}
  body.has-nav .main{margin:0;padding:0;max-width:none}
  .panel{box-shadow:none;break-inside:avoid}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}