/* ===== Fonturi self-hosted (Sora + Inter, latin + latin-ext) ===== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sora-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sora-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/sora-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/sora-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sora-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sora-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sora-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sora-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== Design system extras din design/prototype.html (read-only, nu edita sectiunea) ===== */
:root{
  --ink:#0E1F1C;
  --ink-soft:#1E332E;
  --bg:#F6F7F4;
  --card:#FFFFFF;
  --line:#E4E8E4;
  --line-soft:#EFF1EE;
  --accent:#1B9C6E;
  --accent-dark:#157A56;
  --accent-deep:#137655;
  --accent-soft:#E3F4EC;
  --amber:#C77B14;
  --amber-dark:#8A5B12;
  --amber-soft:#FAF0DF;
  --amber-tint:#FDF8EE;
  --danger:#C93B3B;
  --danger-dark:#AE2F2F;
  --danger-soft:#FAE7E7;
  --muted:#6B7671;
  --muted-2:#9AA5A0;
  --text-2:#3C4A45;
  --field:#DDE3DD;
  --col:#EDF0EB;
  --col-amber:#F8F0E1;
  --nav-idle:#A9B8B2;
  --nav-label:#63776F;
  --sora:"Sora",system-ui,sans-serif;
  --inter:"Inter",system-ui,sans-serif;
  --r-lg:16px;
  --r:14px;
  --r-sm:12px;
  --shadow:0 1px 2px rgba(14,31,28,.04);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--inter);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
button,input,select,textarea{font-family:inherit;color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none !important}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex:none;background:var(--ink);display:flex;flex-direction:column;padding:22px 14px 16px;position:sticky;top:0;height:100vh}
.brand{padding:0 8px 22px}
.brand b{display:block;font:600 17px/1 var(--sora);color:#fff;letter-spacing:-.01em}
.brand span{display:block;margin-top:5px;font:400 11.5px var(--inter);color:#7C8F88}
.nav-label{padding:0 8px 8px;font:600 10.5px var(--inter);letter-spacing:.1em;color:var(--nav-label)}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group+.nav-label{padding-top:22px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--nav-idle);font:500 13.5px var(--inter);text-align:left;cursor:pointer}
.nav-item svg{flex:none}
.nav-item:hover{color:#fff}
.nav-item.active{background:var(--accent);color:#fff}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 0;border-top:1px solid var(--ink-soft)}
.side-foot .who{flex:1;min-width:0}
.side-foot .who b{display:block;font:500 13px var(--inter);color:#fff}
.side-foot .who span{font:400 11px var(--inter);color:#7C8F88}
.logout{padding:5px 8px;border:0;background:transparent;color:#7C8F88;font:500 11.5px var(--inter);cursor:pointer}
.logout:hover{color:#fff}
.content{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{display:none;position:sticky;top:0;z-index:20;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--field);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.topbar .tb-title{flex:1;min-width:0;font:600 17px/1.1 var(--sora);letter-spacing:-.01em}
.scrim{display:none;position:fixed;inset:0;z-index:40;background:rgba(14,31,28,.5)}
.scrim.open{display:block}

.screen{display:none;padding:30px 36px 44px}
.screen.active{display:block}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-title{font:600 27px/1.15 var(--sora);letter-spacing:-.015em}
.page-sub{margin-top:6px;font:400 13.5px var(--inter);color:var(--muted)}

/* ---------- atoms ---------- */
.btn{padding:10px 16px;border:1px solid var(--field);border-radius:10px;background:#fff;font:500 13px var(--inter);cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{padding:10px 16px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:600 13.5px var(--inter);cursor:pointer}
.btn-primary:hover{background:var(--accent-dark)}
.btn-danger{padding:10px 16px;border:0;border-radius:10px;background:var(--danger);color:#fff;font:600 13.5px var(--inter);cursor:pointer}
.btn-danger:hover{background:var(--danger-dark)}
.btn-link{padding:0;border:0;background:transparent;color:var(--accent);font:500 12.5px var(--inter);cursor:pointer}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pill{display:inline-block;padding:4px 10px;border:1px solid transparent;border-radius:999px;font:600 11.5px var(--inter);white-space:nowrap}
.pill--backlog{background:var(--col);color:var(--muted)}
.pill--todo{background:var(--ink);color:#fff}
.pill--progress{background:transparent;border-color:var(--accent);color:var(--accent)}
.pill--waiting{background:var(--amber-soft);color:var(--amber)}
.pill--done{background:var(--accent);color:#fff}
.pill--green{background:var(--accent-soft);color:var(--accent-deep)}
.pill--amber{background:var(--amber-soft);color:var(--amber)}
.pill--danger{background:var(--danger-soft);color:var(--danger)}
.pill--gray{background:var(--col);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:#F3F5F2;font:500 11px var(--inter);color:var(--text-2);white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.sep{width:3px;height:3px;border-radius:50%;background:#C6D0CA;flex:none}
.avatar{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font:600 10.5px var(--inter);color:#fff}
.avatar--lg{width:30px;height:30px;font-size:12.5px}
.av-a{background:var(--accent)}
.av-r{background:#4A5BA8}
.due{font:500 12px var(--inter);color:var(--muted);white-space:nowrap}
.due--late{color:var(--danger);font-weight:600}
.cat-onpage{background:#17796F}
.cat-content{background:#4A5BA8}
.cat-link{background:#8B4C86}
.cat-tehnic{background:#5A6B7B}
.cat-raport{background:#6E8A2F}
.cat-admin{background:#8A7A5C}
.bell{flex:none;color:var(--muted)}
.check{width:18px;height:18px;flex:none;padding:0;border:1.5px solid #C6D0CA;border-radius:5px;background:#fff;cursor:pointer;display:grid;place-items:center;color:#fff}
.check svg{opacity:0}
.check:hover{border-color:var(--accent);background:var(--accent-soft)}
.check[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.check[aria-checked="true"] svg{opacity:1}
.is-done .row-title{text-decoration:line-through;color:var(--muted)}

/* ---------- counters ---------- */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.counter{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.counter .lbl{font:400 12.5px var(--inter);color:var(--muted)}
.counter .num{margin-top:10px;font:600 34px/1 var(--sora);font-variant-numeric:tabular-nums}
.num--danger{color:var(--danger)}
.num--amber{color:var(--amber)}
.counter--amber{background:var(--amber-soft);border-color:#F0E2C8}
.counter--amber .lbl{color:var(--amber-dark)}

/* ---------- panels / rows ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px}
.panel-head h2{font:600 15px var(--sora)}
.panel-head .meta{font:500 12px var(--inter);color:var(--muted)}
.row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--line-soft)}
.row-main{flex:1;min-width:0}
.row-title{font:500 13.5px/1.3 var(--inter);overflow-wrap:anywhere}
.row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;font:400 12px var(--inter);color:var(--muted)}
.empty{padding:26px 18px 30px;border-top:1px solid var(--line-soft);text-align:center}
.empty b{display:block;font:500 13.5px var(--inter)}
.empty p{margin-top:6px;font:400 12.5px var(--inter);color:var(--muted)}
.q-row{padding:12px 18px;border-top:1px solid var(--line-soft)}
.q-row .q-title{font:500 13.5px/1.4 var(--inter)}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:flex;padding:3px;background:var(--col);border-radius:10px}
.seg button{padding:6px 14px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:500 12.5px var(--inter);cursor:pointer}
.seg button.active{background:#fff;color:var(--ink)}
.spacer{flex:1}
.search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#fff;border:1px solid var(--field);border-radius:10px;width:230px;max-width:100%}
.search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:400 13px var(--inter)}
.sel{height:36px;padding:0 10px;border:1px solid var(--field);border-radius:10px;background:#fff;font:500 12.5px var(--inter);cursor:pointer}

/* ---------- kanban ---------- */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.kcol{flex:1 1 0;min-width:246px;background:var(--col);border-radius:var(--r);display:flex;flex-direction:column}
.kcol--waiting{background:var(--col-amber)}
.khead{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;font:600 13px var(--sora)}
.khead .n{font:500 12px var(--inter);color:var(--muted);font-variant-numeric:tabular-nums}
.kcol--waiting .khead{color:var(--amber-dark)}
.kcol--waiting .khead .n{color:#A97F30}
.klist{display:flex;flex-direction:column;gap:10px;padding:0 11px 14px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;box-shadow:var(--shadow);cursor:pointer}
.kcard:hover{border-color:#C6D0CA}
.kcol--waiting .kcard{border-color:#F0E2C8}
.kcol--waiting .kcard:hover{border-color:#DDBE85}
.kcard .t{font:500 13px/1.35 var(--inter)}
.kcard .c{margin-top:7px;font:400 12px var(--inter);color:var(--muted)}
.kcard .mid{margin-top:9px}
.kcard .foot{margin-top:11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kcard .foot .right{display:flex;align-items:center;gap:6px}

/* ---------- tables ---------- */
.table{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.thead,.trow{display:grid;gap:12px;align-items:center}
.tasks-grid{grid-template-columns:32px minmax(0,1fr) 150px 150px 120px 140px 100px}
.exp-grid{grid-template-columns:minmax(0,1fr) 140px 120px 110px 150px 90px 40px}
.thead{padding:12px 18px;background:#FBFCFA;border-bottom:1px solid var(--line);font:600 11px var(--inter);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.trow{padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.trow:last-child{border-bottom:0}
.trow:hover{background:#FBFCFA}
.trow .name{font:500 13.5px var(--inter);display:flex;align-items:center;gap:8px;min-width:0}
.trow .sub{font:400 13px var(--inter);color:var(--text-2)}
.trow .who{display:flex;align-items:center;gap:7px;font:400 12.5px var(--inter);color:var(--text-2)}
.trow .amount{text-align:right;font:600 13.5px var(--inter);font-variant-numeric:tabular-nums}
.trow--renew{background:var(--amber-tint)}
.tcell-label{display:none}
.switch{position:relative;width:38px;height:22px;padding:0;border:0;border-radius:999px;background:#D6DCD7;cursor:pointer}
.switch span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(14,31,28,.2);transition:transform .16s ease}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"] span{transform:translateX(16px)}
.trash{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted-2);cursor:pointer}
.trash:hover{background:var(--danger-soft);color:var(--danger)}

/* ---------- clients ---------- */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.client-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);cursor:pointer;text-align:left;width:100%}
.client-card:hover{border-color:var(--accent)}
.client-card--paused{opacity:.62}
.client-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.client-card .cname{font:600 17px/1.2 var(--sora);letter-spacing:-.01em}
.client-card .fee{margin-top:16px;font:600 20px/1 var(--sora);font-variant-numeric:tabular-nums}
.client-card .bill{margin-top:7px;font:400 12.5px var(--inter);color:var(--muted)}
.client-card .foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 12.5px var(--inter);color:var(--text-2)}
.client-card .foot em{font-style:normal;color:var(--accent)}

/* ---------- client page ---------- */
.back{margin-bottom:16px;padding:0;border:0;background:transparent;font:500 12.5px var(--inter);color:var(--muted);cursor:pointer}
.back:hover{color:var(--accent)}
.client-head{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.client-head .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 26px 20px}
.client-head h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:600 26px/1.15 var(--sora);letter-spacing:-.015em}
.client-head .facts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font:400 13px var(--inter);color:var(--muted)}
.client-head .facts b{font:600 15px var(--sora);color:var(--ink);font-variant-numeric:tabular-nums}
.client-head .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tabs{display:flex;gap:22px;padding:0 26px;border-top:1px solid var(--line-soft);overflow-x:auto}
.tab{padding:13px 2px;border:0;background:transparent;color:var(--muted);font:500 13.5px var(--inter);white-space:nowrap;cursor:pointer;box-shadow:inset 0 -2px 0 0 transparent}
.tab.active{color:var(--ink);box-shadow:inset 0 -2px 0 0 var(--accent)}
.tabpane{display:none;margin-top:20px;max-width:920px}
.tabpane.active{display:block}
.info-grid{display:grid;grid-template-columns:150px minmax(0,1fr);row-gap:14px;column-gap:20px;font:400 13.5px var(--inter);padding:24px 26px}
.info-grid dt{color:var(--muted)}
.info-grid dd{margin:0;font-weight:500}
.info-grid dd.note{font-weight:400;line-height:1.55;color:var(--text-2)}
.months{display:flex;flex-direction:column;gap:12px}
.month{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.month-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;padding:16px 20px;border:0;background:#fff;text-align:left;cursor:pointer}
.month-head:hover{background:#FBFCFA}
.month-head .lb{font:600 16px var(--sora);letter-spacing:-.01em}
.month-head .n{margin-left:auto;font:400 13px var(--inter);color:var(--muted);font-variant-numeric:tabular-nums}
.chev{flex:none;display:grid;place-items:center;width:18px;height:18px;color:var(--muted);transition:transform .16s ease}
.month.open .chev{transform:rotate(90deg)}
.month-body{display:none;padding:0 20px 8px}
.month.open .month-body{display:block}
.cat-group{padding:16px 0;border-top:1px solid var(--line-soft)}
.cat-group .gh{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:600 11px var(--inter);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cat-group .gh .cnt{font:400 11.5px var(--inter);letter-spacing:0;text-transform:none;color:var(--muted-2)}
.hist-list{display:flex;flex-direction:column;gap:9px}
.hist-item{display:flex;align-items:center;gap:12px}
.hist-item .t{flex:1;min-width:0;font:400 13.5px var(--inter)}
.hist-item .avatar{width:22px;height:22px;font-size:10px}

/* ---------- calendar ---------- */
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.cal-week,.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-dow{background:#FBFCFA;border-bottom:1px solid var(--line)}
.cal-dow div{padding:10px 12px;font:600 11px var(--inter);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cal-week{border-bottom:1px solid var(--line-soft)}
.cal-week:last-child{border-bottom:0}
.cal-day{min-height:104px;padding:9px 10px;border-left:1px solid var(--line-soft)}
.cal-day:first-child{border-left:0}
.cal-day .d{font:600 12.5px var(--sora);font-variant-numeric:tabular-nums}
.cal-day--out{background:#FBFCFA}
.cal-day--out .d{color:#C6D0CA}
.cal-day--today{background:var(--accent-soft)}
.cal-day--today .d{color:var(--accent-deep)}
.cal-chips{margin-top:7px;display:flex;flex-direction:column;gap:5px}
.cal-chip{display:flex;align-items:center;gap:5px;padding:3px 6px;border-radius:6px;background:#F3F5F2;font:500 10.5px/1.3 var(--inter);color:var(--text-2)}
.cal-chip span.txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-more{font:500 10.5px var(--inter);color:var(--muted-2)}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav .lbl{min-width:120px;text-align:center;font:600 14px var(--sora)}

/* ---------- questions / templates / settings ---------- */
.qcards{display:flex;flex-direction:column;gap:12px;max-width:920px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.qcard .top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.qcard .qt{font:500 14px/1.45 var(--inter)}
.qcard .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;font:400 12.5px var(--inter);color:var(--muted)}
.qcard .answer{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);font:400 13px/1.55 var(--inter);color:var(--text-2)}
.tpl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.tpl .top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tpl h3{font:600 15px var(--sora)}
.tpl .meta{margin-top:6px;font:400 12.5px var(--inter);color:var(--muted)}
.tpl .items{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.tpl .items span{padding:5px 10px;border-radius:999px;background:#F3F5F2;font:500 11.5px var(--inter);color:var(--text-2)}
.form{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px}
.field label{display:block;margin-bottom:7px;font:500 12.5px var(--inter);color:var(--text-2)}
.field input,.field select,.field textarea{width:100%;padding:0 12px;height:38px;border:1px solid var(--field);border-radius:10px;background:#fff;font:400 13.5px var(--inter);outline:none}
.field textarea{height:auto;padding:10px 12px;line-height:1.5;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.switch-row b{display:block;font:500 13.5px var(--inter)}
.switch-row span{display:block;margin-top:4px;font:400 12.5px var(--inter);color:var(--muted)}
.form-actions{display:flex;gap:10px}

/* ---------- modal / toast ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(14,31,28,.44);display:grid;place-items:center;padding:24px}
.modal{width:580px;max-width:100%;max-height:90vh;overflow:auto;background:#fff;border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(14,31,28,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 26px 18px;border-bottom:1px solid var(--line-soft)}
.modal-head h2{font:600 19px var(--sora);letter-spacing:-.01em}
.modal-x{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.modal-x:hover{background:var(--col)}
.modal-body{padding:22px 26px;display:flex;flex-direction:column;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px 22px;border-top:1px solid var(--line-soft)}
.remind{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r-sm);background:var(--accent-soft);font:500 13px var(--inter);color:#0F5F45}
.remind .check{border-color:var(--accent)}
.remind input{width:52px;height:32px;padding:0 8px;border:1px solid #B6DFCC;border-radius:8px;background:#fff;font:600 13px var(--inter);font-variant-numeric:tabular-nums;text-align:center;outline:none}
.confirm{width:420px;max-width:100%;background:#fff;border-radius:var(--r-lg);padding:26px;box-shadow:0 30px 70px rgba(14,31,28,.3)}
.confirm h2{font:600 17px var(--sora)}
.confirm p{margin-top:10px;font:400 13.5px/1.55 var(--inter);color:var(--muted)}
.confirm .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.toast{position:fixed;left:50%;bottom:26px;z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-sm);background:var(--ink);color:#fff;font:500 13px var(--inter);box-shadow:0 14px 34px rgba(14,31,28,.28)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .counters{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .tasks-grid{grid-template-columns:32px minmax(0,1fr) 130px 130px 110px 130px 92px}
}
@media (max-width:980px){
  .sidebar{position:fixed;z-index:50;top:0;left:0;transform:translateX(-100%);transition:transform .2s ease;width:282px;padding-top:26px}
  .sidebar.open{transform:none}
  .topbar{display:flex}
  .screen{padding:20px 18px 32px}
  .page-title{font-size:23px}
  .page-head{align-items:flex-start}
  .counters{gap:10px;margin-bottom:18px}
  .counter{padding:14px 16px;border-radius:var(--r)}
  .counter .num{margin-top:7px;font-size:26px}
  .search{width:100%}
  .toolbar .spacer{display:none}
  .toolbar .sel{flex:1 1 46%}
  .kanban{margin:0 -18px;padding:0 18px 8px}
  .kcol{min-width:270px;flex:0 0 270px}
  .thead{display:none}
  .trow,.thead{gap:8px}
  .trow{grid-template-columns:1fr !important;padding:14px 16px;row-gap:8px}
  .trow>*{min-width:0}
  .tcell-label{display:inline;font:600 10.5px var(--inter);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:8px}
  .trow .amount{text-align:left}
  .trow .cell-check{position:absolute;opacity:0;pointer-events:none}
  .trow .cell-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .client-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr;row-gap:6px;padding:20px}
  .info-grid dt{margin-top:10px}
  .client-head .hd{padding:20px}
  .tabs{padding:0 20px;gap:16px}
  .cal{overflow-x:auto}
  .cal-inner{min-width:760px}
  .grid-2{grid-template-columns:1fr}
  .month-head{padding:14px 16px}
  .month-head .n{margin-left:0}
  .month-body{padding:0 16px 8px}
}
@media (max-width:560px){
  .page-head .btn-primary,.page-head .btn{width:auto}
  .counters{grid-template-columns:repeat(2,1fr)}
  .modal-body,.modal-head,.modal-foot{padding-left:18px;padding-right:18px}
  .overlay{padding:12px}
  .client-head h1{font-size:22px}
}

/* ===== Extensii produs (acelasi limbaj vizual; componentele noi de aici in jos) ===== */
/* pagina de login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:24px}
.login-card{width:400px;max-width:100%;padding:34px 32px 30px;display:flex;flex-direction:column;gap:18px}
.login-brand b{display:block;font:600 20px/1 var(--sora);color:var(--ink);letter-spacing:-.01em}
.login-brand span{display:block;margin-top:5px;font:400 12px var(--inter);color:var(--muted)}
.field .err{display:block;margin-top:6px;font:500 12px var(--inter);color:var(--danger)}
.login-err{padding:10px 14px;border-radius:10px;background:var(--danger-soft);font:500 12.5px var(--inter);color:var(--danger)}
/* nav-item ca link real */
a.nav-item{text-decoration:none}
a.nav-item:hover{color:#fff}
.tab{text-decoration:none;display:inline-block}
.tab:hover{color:var(--ink)}
/* indicator de loading HTMX */
.htmx-indicator{opacity:0;transition:opacity .15s ease}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
/* carduri + butoane ca link-uri reale */
a.client-card{display:block;color:inherit}
a.client-card:hover{color:inherit;border-color:var(--accent)}
a.btn{display:inline-flex;align-items:center;color:var(--ink)}
a.btn:hover{color:var(--accent)}
a.btn-primary{display:inline-flex;align-items:center;color:#fff}
a.btn-primary:hover{color:#fff}
/* segmentul Lista/Kanban ca link-uri reale */
.seg a{padding:6px 14px;border-radius:8px;color:var(--muted);font:500 12.5px var(--inter);text-decoration:none}
.seg a.active{background:#fff;color:var(--ink)}
.seg a:hover{color:var(--ink)}
/* strikethrough si pe numele din lista de taskuri */
.is-done .name{text-decoration:line-through;color:var(--muted)}
.name a{color:inherit}
.name a:hover{color:var(--accent)}
/* kcard draggable */
.kcard.sortable-ghost{opacity:.4}
.kcard.sortable-drag{box-shadow:0 14px 34px rgba(14,31,28,.18)}
/* banda de avertizare (generare duplicata) */
.warn-band{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 16px;border:1px solid #F0E2C8;border-radius:var(--r-sm);background:var(--amber-soft);font:500 13px var(--inter);color:var(--amber-dark)}
/* chips de calendar ca link-uri + chip de facturare discret */
a.cal-chip{color:var(--text-2);text-decoration:none}
a.cal-chip:hover{background:#E9EEE9;color:var(--ink)}
.cal-chip--bill{background:transparent;border:1px dashed var(--line);color:var(--muted)}
a.cal-more{display:inline-block;text-decoration:none}
a.cal-more:hover{color:var(--accent)}
a.icon-btn{text-decoration:none}
/* stare de incarcare discreta pe cererile HTMX */
.htmx-request .sel,.htmx-request.search,.htmx-request .check,.htmx-request.switch{opacity:.55;pointer-events:none}
/* X de stergere, fixat in coltul cardurilor de intrebari / notite */
.qcard{position:relative}
.qcard .top{padding-right:26px}
.card-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:var(--danger-soft);color:var(--danger);cursor:pointer;opacity:.8;transition:background .15s ease,color .15s ease,opacity .15s ease}
.qcard:hover .card-x{opacity:1}
.card-x:hover{background:var(--danger);color:#fff;opacity:1}
.card-x:active{transform:scale(.92)}
/* Modale pe ecrane mici: .modal/.confirm sunt grid items in .overlay, iar min-width:auto
   le impiedica sa coboare sub latimea continutului — asa scapau in dreapta pe telefon. */
.modal,.confirm{min-width:0}
.modal-head,.modal-body,.modal-foot,.modal .field,.modal .grid-2,.modal .remind,.modal form{min-width:0}
.modal input,.modal select,.modal textarea,.confirm input{min-width:0;max-width:100%}
/* Cheia problemei: .overlay e grid cu coloana implicita `auto`, care se dimensioneaza
   dupa continut (580px). Astfel `max-width:100%` de pe .modal se raporta la propria
   latime si nu limita nimic — modalul iesea din ecran pe telefon. Coloana limitata
   la minmax(0,1fr) face procentul sa se raporteze la spatiul real disponibil. */
.overlay{grid-template-columns:minmax(0,1fr);overflow:auto}
@media (max-width:560px){
  .overlay{padding:10px;align-items:start}
  .modal{max-height:calc(100vh - 20px)}
}
/* randurile de itemi din editorul de template au 5 coloane pe desktop — pe telefon
   selecturile nu incap si impingeau pagina in lateral */
@media (max-width:700px){
  .tpl-item{grid-template-columns:1fr 1fr !important;row-gap:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
  .tpl-item .field{min-width:0}
  .tpl-item .field:first-of-type{grid-column:1 / -1}
  .tpl-item .trash{justify-self:end}
}
/* textul liber scris de utilizator pastreaza randurile noi */
.answer,.hist-item .t,.row-title{white-space:pre-line;overflow-wrap:anywhere}
/* bara de filtre active — arata ce filtre sunt puse si cate rezultate sunt */
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filter-count{font:600 12.5px var(--inter);color:var(--text-2)}
/* comentarii: actiuni discrete, vizibile la hover pe rand */
.comment-row{align-items:flex-start}
.comment-acts{display:flex;align-items:center;gap:6px;flex:none;opacity:0;transition:opacity .15s ease}
.comment-row:hover .comment-acts,.comment-row:focus-within .comment-acts{opacity:1}
.comment-acts .card-x{position:static}
/* nota din coada coloanei Done */
.kdone-more{display:block;padding:8px 2px;text-align:center;font:500 12px var(--inter);color:var(--muted);text-decoration:none}
a.kdone-more:hover{color:var(--accent)}
/* badge de noutati in meniu (taskuri noi/comentate de celalalt utilizator) */
.nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font:600 10.5px/18px var(--inter);text-align:center}
.nav-item.active .nav-badge{background:#fff;color:var(--accent-deep)}
/* prioritatea, vizibila fara sa intri in task */
.trow--prio-high,.kcard--prio-high{box-shadow:inset 3px 0 0 0 var(--danger)}
.kcard--prio-high{border-color:#EBC9C9}
.trow--prio-low .name,.kcard--prio-low .t{color:var(--muted)}
/* maner de tragere pentru reordonarea itemilor de template */
.drag-handle{cursor:grab;color:var(--muted-2);font-size:15px;line-height:1;user-select:none;text-align:center}
.drag-handle:active{cursor:grabbing}
.tpl-item.sortable-ghost{opacity:.4}
/* paginarea listei de taskuri */
.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.pager-info{font:500 12.5px var(--inter);color:var(--muted)}