/* Gestionale Cloud: sistema visivo. I colori del marchio arrivano da /app/tema.css (personalizzabili per azienda). */
:root{
  --paper:#F3F5F4; --surface:#FFFFFF; --sunk:#EEF1F0; --ink:#172126; --ink-2:#36444A; --muted:#5E6B70; --line:#DDE3E1; --line-2:#C9D2CF;
  --ok:#1E7D4F; --ok-soft:#E5F3EB; --warn:#9A5A0B; --warn-soft:#FBF0DE; --bad:#B42335; --bad-soft:#FBE9EB; --info-soft:#E8EEF6;
  --brand:#0E5E6F; --brand-hover:#0C5362; --brand-ink:#FFFFFF; --brand-text:#0E5E6F; --brand-soft:#E7EFF1; --brand-line:#B7CFD4;
  --accent:#B8862B; --accent-text:#8F6821;
  --side-bg:#0E4956; --side-ink:#F1F4F5; --side-muted:#A8BDC2; --side-hover:rgba(255,255,255,.08); --side-active:rgba(255,255,255,.14);
  --side-active-ink:#FFFFFF; --side-mark:#B8862B; --side-line:rgba(255,255,255,.10);
  --font:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-s:8px; --r-m:12px; --row-y:.7rem; --gap:1.1rem; --fs-base:15px;
  --shadow:0 1px 2px rgba(23,33,38,.06), 0 2px 8px rgba(23,33,38,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#101517; --surface:#161B1D; --sunk:#1C2326; --ink:#E6ECEA; --ink-2:#C3CDCA; --muted:#93A09D; --line:#283134; --line-2:#36423F;
  --ok:#5CC48E; --ok-soft:#14291F; --warn:#E3A452; --warn-soft:#2E2312; --bad:#F07A88; --bad-soft:#331A1E; --info-soft:#18222C;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
}}
:root[data-theme=dark]{
  --paper:#101517; --surface:#161B1D; --sunk:#1C2326; --ink:#E6ECEA; --ink-2:#C3CDCA; --muted:#93A09D; --line:#283134; --line-2:#36423F;
  --ok:#5CC48E; --ok-soft:#14291F; --warn:#E3A452; --warn-soft:#2E2312; --bad:#F07A88; --bad-soft:#331A1E; --info-soft:#18222C;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
}

*{box-sizing:border-box}
html{font-size:var(--fs-base);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:450;line-height:1.5;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
a{color:var(--brand-text);text-decoration:none;font-weight:550}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1{font-size:1.6rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;margin:0}
h2{font-size:1.05rem;font-weight:650;margin:0 0 .9rem;letter-spacing:-.005em}
h3{font-size:.95rem;font-weight:650;margin:0 0 .5rem}
p{margin:0 0 .75rem}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.i{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--sunk);padding:.1rem .35rem;border-radius:5px}
[hidden]{display:none!important}

/* ---- struttura ---- */
.shell{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.side{background:var(--side-bg);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--side-line)}
.side-brand{display:flex;flex-direction:column;gap:.7rem;padding:1.25rem 1.1rem 1.1rem;border-bottom:1px solid var(--side-line)}
.side-brand .logo{display:block;max-width:100%;max-height:52px;width:auto;object-fit:contain;object-position:left center}
.side-brand .plate{background:#fff;border-radius:var(--r-s);padding:.55rem .7rem;align-self:flex-start;max-width:100%}
.side-brand .plate .logo{max-height:40px}
.side-brand .who{display:flex;gap:.65rem;align-items:center;min-width:0}
.monogram{width:2.4rem;height:2.4rem;border-radius:var(--r-s);display:grid;place-items:center;background:var(--side-mark);color:#fff;font-weight:750;font-size:.95rem;flex:none;letter-spacing:.02em}
.side-brand .name{font-weight:700;font-size:.98rem;line-height:1.25;overflow-wrap:anywhere}
.side-brand .meta{font-size:.76rem;color:var(--side-muted);font-weight:500}
.side nav{padding:.6rem .6rem 1rem;display:flex;flex-direction:column;gap:1px;flex:1}
.side .sec{font-size:.74rem;font-weight:600;color:var(--side-muted);padding:1rem .7rem .3rem;letter-spacing:.01em}
.side nav a{color:var(--side-ink);font-weight:520;font-size:.92rem;display:flex;gap:.7rem;align-items:center;padding:.48rem .7rem;border-radius:var(--r-s);position:relative;text-decoration:none}
.side nav a .i{opacity:.8}
.side nav a:hover{background:var(--side-hover)}
.side nav a.on{background:var(--side-active);color:var(--side-active-ink);font-weight:650}
.side nav a.on .i{opacity:1}
.side nav a.on::before{content:"";position:absolute;left:-.6rem;top:.45rem;bottom:.45rem;width:3px;border-radius:0 3px 3px 0;background:var(--side-mark)}
.side-foot{border-top:1px solid var(--side-line);padding:.6rem;display:flex;flex-direction:column;gap:1px}
.side-foot details summary{list-style:none;cursor:pointer}
.side-foot details summary::-webkit-details-marker{display:none}
.side-foot a,.side-foot summary,.side-foot button.link{color:var(--side-ink);font:inherit;font-size:.9rem;font-weight:520;display:flex;gap:.7rem;align-items:center;padding:.48rem .7rem;border-radius:var(--r-s);background:none;border:0;width:100%;text-align:left;cursor:pointer;text-decoration:none}
.side-foot a:hover,.side-foot summary:hover,.side-foot button.link:hover{background:var(--side-hover)}
.side-foot a.on{background:var(--side-active);color:var(--side-active-ink)}
.side-foot .sub{padding-left:.4rem;display:flex;flex-direction:column;gap:1px}
.side-foot .user{display:flex;gap:.6rem;align-items:center;padding:.5rem .7rem;font-size:.85rem}
.side-foot .user .av{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--side-active);font-weight:700;font-size:.75rem}
.side-foot .user .em{color:var(--side-muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mobilebar{display:none}
.main{padding:1.75rem 2.25rem 3rem;max-width:1360px;width:100%}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.top .sub{color:var(--muted);font-size:.9rem;margin-top:.3rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.banner{background:var(--warn-soft);color:var(--warn);padding:.6rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.88rem;font-weight:550;border-bottom:1px solid var(--line)}

/* ---- superfici ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:1.15rem 1.3rem;margin-bottom:var(--gap);box-shadow:var(--shadow)}
.card > h2:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.card.flush{padding:0}
.card.flush > h2{padding:1.1rem 1.3rem 0}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid > .card{margin-bottom:0}
.grid + .card,.grid + .grid,.card + .grid{margin-top:var(--gap)}

/* striscia di indicatori: un unico pannello diviso, non quattro schede uguali */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);margin-bottom:var(--gap);overflow:hidden}
.stats > div{padding:1.05rem 1.3rem;border-left:1px solid var(--line)}
.stats > div:first-child{border-left:0}
.stats .l,.kpi .l{color:var(--muted);font-size:.82rem;font-weight:550}
.stats .v,.kpi .v{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:.2rem}
.stats .s{font-size:.8rem;color:var(--muted);margin-top:.15rem}
.kpi .v{font-size:1.45rem}

/* ---- tabelle ---- */
.tbl{overflow-x:auto}
.card.tbl{padding:.35rem 0}
.card.tbl > h2,.card.tbl > p,.card.tbl > .flash,.card.tbl > form,.card.tbl > button,.card.tbl > details{margin-left:1.3rem;margin-right:1.3rem}
.card.tbl > h2{margin-top:.8rem}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:var(--row-y) .75rem;border-bottom:1px solid var(--line);vertical-align:top}
th:first-child,td:first-child{padding-left:1.3rem}
th:last-child,td:last-child{padding-right:1.3rem}
.card:not(.tbl) th:first-child,.card:not(.tbl) td:first-child{padding-left:.25rem}
.card:not(.tbl) th:last-child,.card:not(.tbl) td:last-child{padding-right:.25rem}
th{font-size:.78rem;color:var(--muted);font-weight:600;background:var(--surface);position:sticky;top:0}
tbody tr:hover td{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
td.n,th.n{text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:0}
td a{font-weight:600}

/* ---- controlli ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:.52rem .95rem;border-radius:var(--r-s);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none!important;white-space:nowrap;line-height:1.2;transition:background-color .12s,border-color .12s}
.btn:hover{border-color:var(--muted);background:var(--sunk)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:.3rem .6rem;font-size:.82rem}
.btn.full,.full{width:100%;justify-content:center}
form.inline{display:inline}
label{display:block;font-size:.82rem;color:var(--ink-2);font-weight:600;margin-bottom:.3rem}
input,select,textarea{width:100%;font:inherit;font-size:.93rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s);padding:.52rem .65rem;transition:border-color .12s,box-shadow .12s}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
input[type=checkbox],input[type=radio]{width:1.05rem;height:1.05rem;margin:0 .5rem 0 0;accent-color:var(--brand);flex:none}
input[type=color]{padding:.15rem;height:2.4rem;width:3.2rem;cursor:pointer}
input[type=file]{padding:.4rem}
.check{display:flex;align-items:center;color:var(--ink);font-size:.92rem;font-weight:500}
.f{margin-bottom:.95rem}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1rem}
.span2{grid-column:span 2}.span4{grid-column:1/-1}
.err{color:var(--bad)}
.flash{padding:.75rem 1rem;border-radius:var(--r-s);margin-bottom:1rem;border:1px solid;font-size:.92rem;font-weight:500}
.flash.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
.flash.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.flash.info{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text)}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:99px;font-size:.75rem;font-weight:650;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.badge::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor;opacity:.85}
.badge.confirmed,.badge.trial{background:var(--brand-soft);color:var(--brand-text)}
.badge.sent{background:var(--warn-soft);color:var(--warn)}
.badge.paid,.badge.active{background:var(--ok-soft);color:var(--ok)}
.badge.cancelled,.badge.suspended,.badge.past_due{background:var(--bad-soft);color:var(--bad)}
.muted{color:var(--muted)}.small{font-size:.84rem}.right{text-align:right}.mt{margin-top:1rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.filters input,.filters select{width:auto;min-width:190px}
.pager{display:flex;gap:.3rem;margin-top:1rem;flex-wrap:wrap}
.pager a,.pager span{padding:.35rem .7rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);font-size:.88rem;text-decoration:none}
.pager .cur{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.empty{padding:1.75rem 1.3rem;color:var(--muted);text-align:center}
.empty strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:.3rem}
dl.kv{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:.45rem 1.2rem;margin:0;font-size:.92rem}
dl.kv dt{color:var(--muted);font-weight:550}dl.kv dd{margin:0}
details summary{cursor:pointer}

/* ---- documenti ---- */
.lines input,.lines select{padding:.38rem .45rem;font-size:.88rem}
.lines td{padding:.35rem .3rem}
.totals{margin:.75rem 1.3rem .5rem auto;max-width:360px}
.card:not(.tbl) .totals{margin-right:0}
.totals td{padding:.32rem .25rem!important;border:0}
.totals tr:hover td{background:none}
.totals .grand td{font-weight:750;font-size:1.08rem;border-top:2px solid var(--ink);padding-top:.5rem!important}
select.nature{margin-top:.25rem;font-size:.78rem;padding:.2rem .3rem}
.w-amount{width:7.5rem}.w-date{width:9.8rem}
.aging{grid-template-columns:repeat(5,minmax(0,1fr))}
.modlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem}
.mod{border:1px solid var(--line);border-radius:var(--r-m);padding:.9rem 1rem;background:var(--surface);display:flex;flex-direction:column;gap:.35rem;cursor:pointer}
.mod:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.mod.off{opacity:.55;cursor:not-allowed}
.mod strong{display:flex;gap:.5rem;align-items:center}

/* ---- accesso ---- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.auth-side{background:var(--side-bg);color:var(--side-ink);padding:3rem;display:flex;flex-direction:column;justify-content:space-between}
.auth-side .mark{font-weight:750;font-size:1.15rem;display:flex;gap:.6rem;align-items:center}
.auth-side h2{font-size:1.9rem;line-height:1.2;font-weight:700;letter-spacing:-.02em;max-width:18ch;margin:0 0 1rem;color:#fff}
.auth-side p{color:var(--side-muted);max-width:42ch}
.auth-side ul{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.6rem;color:var(--side-ink);font-size:.93rem}
.auth-side li{display:flex;gap:.6rem;align-items:center}
.auth-main{display:grid;place-items:center;padding:2rem 1rem}
.auth-main .card{width:100%;max-width:430px;padding:2rem;box-shadow:none;border:0;background:transparent}
.auth h1{margin-bottom:.35rem}
.qr svg{max-width:200px;height:auto;background:#fff;padding:8px;border-radius:var(--r-s)}

/* ---- personalizzazione ---- */
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line-2);border-radius:var(--r-s);padding:.35rem .6rem .35rem .4rem;background:var(--surface);font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer}
.swatch i{width:1.4rem;height:1.4rem;border-radius:5px;display:inline-block}
.swatch i + i{margin-left:-.65rem;border:2px solid var(--surface)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-s);overflow:hidden;flex-wrap:wrap}
.seg label{margin:0;padding:.45rem .8rem;font-weight:550;font-size:.88rem;cursor:pointer;border-left:1px solid var(--line-2);display:flex;align-items:center;color:var(--ink)}
.seg label:first-child{border-left:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--brand);color:var(--brand-ink)}
.seg label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:-2px}
.fontpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.5rem}
.fontpick label{margin:0;border:1px solid var(--line-2);border-radius:var(--r-s);padding:.6rem .75rem;cursor:pointer;display:flex;flex-direction:column;gap:.1rem;color:var(--ink)}
.fontpick label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.fontpick input{position:absolute;opacity:0}
.fontpick .sample{font-size:1.15rem;font-weight:650}
.fontpick .nm{font-size:.76rem;color:var(--muted);font-weight:500}
.logo-box{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.logo-box .prev{min-width:180px;min-height:72px;border:1px dashed var(--line-2);border-radius:var(--r-s);display:grid;place-items:center;padding:.6rem;background:repeating-conic-gradient(var(--sunk) 0 25%,var(--surface) 0 50%) 0 0/14px 14px}
.logo-box .prev img{max-height:60px;max-width:240px}
.preview{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;display:grid;grid-template-columns:150px 1fr;min-height:230px;box-shadow:var(--shadow);position:sticky;top:1rem}
.preview .pv-side{background:var(--side-bg);color:var(--side-ink);padding:.9rem .6rem;display:flex;flex-direction:column;gap:3px;font-size:.78rem}
.preview .pv-side b{font-size:.85rem;padding:0 .4rem .6rem}
.preview .pv-side span{padding:.35rem .45rem;border-radius:var(--r-s);display:flex;gap:.4rem;align-items:center}
.preview .pv-side span.on{background:var(--side-active);color:var(--side-active-ink);font-weight:650}
.preview .pv-main{background:var(--paper);padding:1rem;display:flex;flex-direction:column;gap:.7rem;font-size:.85rem}
.preview .pv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:.75rem}
.preview .pv-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}

/* ---- stampa documenti ---- */
.print{max-width:840px;margin:2rem auto;background:#fff;color:#172126;padding:2.75rem 3rem;border:1px solid #DDE3E1;border-radius:4px}
.print .muted{color:#5E6B70}.print th,.print td{border-color:#DDE3E1;background:#fff}.print th{color:#5E6B70;position:static}
.print tbody tr:hover td{background:none}
.print .totals .grand td{border-color:var(--brand)}
.print-head{display:flex;justify-content:space-between;gap:2rem;margin-bottom:2.25rem;padding-bottom:1.25rem;border-bottom:3px solid var(--brand)}
.print-head .logo{max-height:64px;max-width:240px;display:block;margin-bottom:.6rem}
.print-name{font-size:1.15rem;font-weight:700}
.print-title{font-size:1.5rem;font-weight:750;color:var(--brand)}
.print-to{margin:0 0 1.75rem auto;max-width:330px;padding:.9rem 1rem;background:#F3F5F4;border-radius:6px}
.print th:first-child,.print td:first-child{padding-left:.25rem}.print th:last-child,.print td:last-child{padding-right:.25rem}
@media print{body{background:#fff}.print{margin:0;border:0;padding:0;max-width:none}.noprint{display:none}}

/* ---- telefono ---- */
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:30;transform:translateX(-100%);transition:transform .2s ease;height:100%}
  .shell.open .side{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .mobilebar{display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:20;background:var(--side-bg);color:var(--side-ink);padding:.6rem 1rem}
  .mobilebar button{background:none;border:0;color:inherit;padding:.3rem;cursor:pointer;display:flex}
  .mobilebar .i{width:1.5rem;height:1.5rem}
  .mobilebar strong{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .main{padding:1.1rem 1rem 2.5rem}
  .g2,.g3,.g4,.aging{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}.span2{grid-column:auto}
  .stats > div{border-left:0;border-top:1px solid var(--line)}.stats > div:first-child{border-top:0}
  .auth{grid-template-columns:1fr}.auth-side{display:none}
  .filters input,.filters select{min-width:0;flex:1 1 140px}
  .preview{grid-template-columns:110px 1fr;position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.side-brand a{color:inherit;text-decoration:none}
td:first-child > a,.nowrap{white-space:nowrap}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .side-brand .plate-dark{background:#fff;border-radius:var(--r-s);padding:.55rem .7rem;align-self:flex-start}}
:root[data-theme=dark] .side-brand .plate-dark{background:#fff;border-radius:var(--r-s);padding:.55rem .7rem;align-self:flex-start}
@media (max-width:600px){.hide-sm{display:none}th,td{padding-left:.5rem;padding-right:.5rem}.card.tbl th:first-child,.card.tbl td:first-child{padding-left:1rem}.card.tbl th:last-child,.card.tbl td:last-child{padding-right:1rem}h1{font-size:1.35rem}.stats .v{font-size:1.35rem}}
.shell > div{min-width:0}

/* ---- grafici ---- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .zero{stroke:var(--ink-2);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:11px;font-weight:500}
.chart .bar,.hbars .bar{fill:var(--brand)}
.chart .bar-dim{fill:var(--brand-line)}
.chart .bar-out{fill:var(--muted)}
.chart .hit{fill:transparent}
.chart .mark:hover .bar,.chart .mark:hover .bar-dim{fill:var(--brand-hover)}
.chart .mark:hover .bar-out{fill:var(--ink-2)}
.chart .mark:hover .hit{fill:color-mix(in srgb,var(--brand-soft) 60%,transparent)}
.legend{display:flex;gap:1.1rem;font-size:.8rem;color:var(--muted);margin-top:.4rem;font-weight:550}
.legend span{display:flex;gap:.4rem;align-items:center}
.legend i{width:.75rem;height:.75rem;border-radius:3px;display:inline-block}
.lg-in{background:var(--brand)}.lg-out{background:var(--muted)}
.hbars{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.hbars .hb-top{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;margin-bottom:.25rem}
.hbars .hb-top span{font-weight:650;white-space:nowrap}
.hbars svg{width:100%;height:6px;display:block;background:var(--sunk);border-radius:3px}
.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.todo li:last-child{border-bottom:0}
.todo .n{margin-left:auto;font-weight:700;font-size:1.05rem}
.todo .ic{width:2rem;height:2rem;border-radius:var(--r-s);display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-text);flex:none}
.todo .ic.warn{background:var(--warn-soft);color:var(--warn)}
.todo .ic.bad{background:var(--bad-soft);color:var(--bad)}
.todo a{color:var(--ink);font-weight:600}
.delta{font-size:.8rem;font-weight:600}
.delta.up{color:var(--ok)}.delta.down{color:var(--bad)}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:960px){.g-2-1{grid-template-columns:1fr}}
.welcome{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem;align-items:start;border-color:var(--brand-line)}
.welcome .steps{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.welcome-demo{background:var(--brand-soft);border-radius:var(--r-m);padding:1rem 1.1rem}
@media (max-width:960px){.welcome{grid-template-columns:1fr}}
.sample-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.side-search{position:relative;margin:.75rem .75rem 0;display:flex;align-items:center}
.side-search > .i{position:absolute;left:.65rem;color:var(--side-muted);pointer-events:none}
.side-search input{background:var(--side-hover);border-color:var(--side-line);color:var(--side-ink);padding-left:2.1rem;padding-right:2rem;font-size:.88rem}
.side-search input::placeholder{color:var(--side-muted)}
.side-search input:focus{background:var(--surface);color:var(--ink);border-color:var(--brand)}
.side-search kbd{position:absolute;right:.55rem;font:inherit;font-size:.72rem;color:var(--side-muted);border:1px solid var(--side-line);border-radius:4px;padding:0 .3rem}
.search-pop{position:absolute;top:calc(100% + .35rem);left:0;width:min(420px,calc(100vw - 2rem));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 8px 30px rgba(23,33,38,.18);z-index:40;padding:.4rem;max-height:70vh;overflow:auto}
.search-pop .grp{font-size:.74rem;color:var(--muted);font-weight:600;padding:.5rem .6rem .2rem}
.search-pop a{display:block;padding:.45rem .6rem;border-radius:var(--r-s);color:var(--ink);text-decoration:none}
.search-pop a small{display:block;color:var(--muted);font-weight:500}
.search-pop a.sel,.search-pop a:hover{background:var(--brand-soft)}
.search-pop .all{border-top:1px solid var(--line);margin-top:.3rem;color:var(--brand-text)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:1rem;top:.5rem;bottom:.5rem;width:1px;background:var(--line)}
.timeline li{display:flex;gap:.85rem;padding:.55rem 0;position:relative}
.tl-ic{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--brand-text);flex:none;z-index:1}
.tl-body{flex:1;min-width:0}
.tl-top{display:flex;justify-content:space-between;gap:1rem}
.tl-amt{font-weight:650;white-space:nowrap}
/* ---- CRM ---- */
.board{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:.75rem;overflow-x:auto;padding-bottom:.5rem}
.board .col{background:var(--sunk);border-radius:var(--r-m);padding:.6rem;display:flex;flex-direction:column;gap:.55rem;min-height:180px}
.board .col header{display:flex;flex-direction:column;padding:.2rem .3rem .3rem}
.board .col-closed{opacity:.85}
.deal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:.65rem .7rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.2rem}
.deal-title{color:var(--ink);font-weight:650}
.deal-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:.2rem}
.deal-move select{padding:.25rem .4rem;font-size:.78rem;margin-top:.3rem}
.col-empty{padding:.5rem .3rem}
.seg-a{padding:.42rem .8rem;font-weight:550;font-size:.88rem;color:var(--ink);border-left:1px solid var(--line-2);text-decoration:none!important}
.seg-a:first-child{border-left:0}.seg-a.on{background:var(--brand);color:var(--brand-ink)}
.stage-track{display:flex;gap:.3rem;margin-bottom:var(--gap);flex-wrap:wrap}
.stage-track .step{font:inherit;font-size:.85rem;font-weight:600;padding:.5rem 1rem;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);border-radius:var(--r-s);cursor:pointer}
.stage-track .step.past{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand-line)}
.stage-track .step.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
form.lost{display:inline-flex;gap:.4rem}form.lost input{width:12rem}
.acts{list-style:none;margin:0;padding:0}
.act{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--line)}
.act:last-child{border-bottom:0}
.act-body{flex:1;min-width:0}
.act.done strong{text-decoration:line-through;color:var(--muted);font-weight:550}
.act.late .act-body > .small{color:var(--bad)}
.tick{width:1.35rem;height:1.35rem;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:0;margin-top:.1rem;color:var(--brand-ink)}
.tick:hover{border-color:var(--brand)}
.act.done .tick{background:var(--brand);border-color:var(--brand)}
.tick .i{width:.85rem;height:.85rem}
.quick-activity{display:grid;gap:.5rem}
.qa-row{display:flex;gap:.5rem;flex-wrap:wrap}
.qa-row > select{width:auto}.qa-row > input[name=subject]{flex:1;min-width:200px}.qa-row > input[type=date]{width:auto}.qa-row > input[type=time]{width:auto}
.pv-row{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;padding:.3rem 0}
dl.kv dd{overflow-wrap:anywhere;min-width:0}