:root{
  --ink:#12263F; --muted:#4A5A6A; --faint:#5F6E7B; --line:#D5DEE5; --line2:#E6ECF0;
  --ground:#F3F6F8; --card:#FFFFFF; --brand:#0E4D64; --brand2:#0B3E51; --accent:#0E4D64; --mint:#2E9E6B; --mint-negativ:#47C08A; --inel:#B4C2CD;
  --ok:#2F7A4A; --ok-fg:#22603A; --warn:#E3A21A; --warn-fg:#7A5200; --warn-bg:#FDF6E7;
  --late:#A8231C; --late-fg:#8E1D17; --late-bg:#FBF1EF;
}
*{box-sizing:border-box}
body{margin:0;font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--ground);font-variant-numeric:tabular-nums}
a{color:var(--accent)} a:hover{color:#08303F}
h1{margin:0;font-size:28px;letter-spacing:-.01em} h2{margin:0;font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:var(--brand);color:#fff}
.top .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px;color:#fff;text-decoration:none}
.top .org{font-size:13px;color:#CFE3EA;font-weight:400;padding-left:12px;border-left:1px solid rgba(255,255,255,.25)}
.top .user{display:flex;align-items:center;gap:12px;font-size:14px}
.top .user small{display:block;color:#CFE3EA;font-size:12px}
.top button{font:inherit;font-size:13px;background:var(--brand2);color:#fff;border:0;border-radius:8px;padding:8px 12px;cursor:pointer}

.wrap{display:flex;flex-wrap:wrap;align-items:flex-start}
nav.side{flex:1 1 200px;max-width:240px;padding:24px 16px;display:flex;flex-direction:column;gap:4px}
nav.side a{display:flex;justify-content:space-between;padding:11px 14px;border-radius:8px;color:#3D4C55;font-size:14px;text-decoration:none}
nav.side a.on{background:var(--card);color:var(--brand);font-weight:600;box-shadow:0 1px 2px rgba(20,49,58,.08)}
main{flex:999 1 560px;min-width:0;padding:24px 28px 40px 12px;display:flex;flex-direction:column;gap:20px}

.card{background:var(--card);border-radius:12px;box-shadow:0 1px 2px rgba(20,49,58,.08)}
.pad{padding:18px 20px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.sub{margin:6px 0 0;font-size:14px;color:var(--muted)}
.counts{display:flex;gap:10px;flex-wrap:wrap}
.count{display:flex;align-items:center;gap:10px;padding:10px 16px}
.count b{font-size:22px} .count span{font-size:13px;color:var(--muted)}

.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)} .dot.atentie{background:var(--warn)} .dot.depasit{background:var(--late)}
.st{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.st.ok{color:var(--ok-fg)} .st.atentie{color:var(--warn-fg)} .st.depasit{color:var(--late-fg)}
.fg-ok{color:var(--faint)} .fg-atentie{color:var(--warn-fg)} .fg-depasit{color:var(--late-fg)}

.alerts{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.alert{flex:1 1 260px;display:flex;gap:12px;padding:12px 14px;border-radius:10px}
.alert.atentie{background:var(--warn-bg)} .alert.depasit{background:var(--late-bg)}
.alert .dot{margin-top:5px} .alert strong{font-size:14px;display:block} .alert span{font-size:13px;color:#4A5860}

.bar-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.pills{display:flex;gap:6px}
.pill{font-size:13px;height:34px;padding:0 12px;border-radius:17px;border:1px solid #C3CED7;background:#fff;color:var(--ink);display:inline-flex;align-items:center;text-decoration:none}
.pill.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;padding:10px 8px}
td{padding:14px 8px;border-top:1px solid var(--line2);vertical-align:top}
th:first-child,td:first-child{padding-left:20px} th:last-child,td:last-child{padding-right:20px}
td.num,th.num{text-align:right}
.small{font-size:12px;color:var(--faint);margin-top:2px}
.meter{display:flex;align-items:center;gap:8px;min-width:120px}
.meter .track{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter .fill{height:6px}
.fill.ok{background:var(--ok)} .fill.atentie{background:var(--warn)} .fill.depasit{background:var(--late)}
.empty{padding:28px 20px;color:var(--muted);font-size:14px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kv small{display:block;font-size:12px;color:var(--muted)} .kv b{font-size:16px}
.cols{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.cols>.card{flex:1 1 380px;min-width:0}
.label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.banner{padding:18px 20px;border-radius:12px 12px 0 0}
.banner.atentie{background:var(--warn-bg)} .banner.depasit{background:var(--late-bg)} .banner.ok{background:#EEF5F0}
.banner ul{margin:8px 0 0;padding-left:18px;font-size:14px}
.log{display:flex;flex-direction:column;gap:10px;font-size:13px}
.log div{display:flex;gap:12px} .log time{color:var(--faint);flex:none;width:130px}
.btn{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:0 16px;border-radius:8px;border:0;background:var(--accent);color:#fff;display:inline-flex;align-items:center;text-decoration:none}
.btn.sec{background:#fff;color:var(--ink);border:1px solid #C3CED7}

.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login form{width:100%;max-width:380px;padding:32px}
.login label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
.login input{width:100%;font:inherit;height:44px;padding:0 12px;border:1px solid #C3CED7;border-radius:8px}
.login .btn{width:100%;justify-content:center;margin-top:20px}
.err{color:var(--late-fg);font-size:14px;margin-top:12px}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field.wide{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:#3D4C55}
.field input:not([type=checkbox]),.field select,.field textarea,.formset input:not([type=checkbox]){font:inherit;font-size:14px;min-height:44px;padding:8px 12px;border:1px solid #C3CED7;border-radius:8px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus,.formset input:focus{outline:2px solid var(--accent);outline-offset:1px}
.field.check label{display:flex;align-items:center;gap:10px;font-weight:500;min-height:44px}
.field.check input{width:20px;height:20px}
.field small{font-size:12px;color:var(--faint)}
.msg{padding:12px 16px;border-radius:10px;background:#EEF5F0;color:var(--ok-fg);font-size:14px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.sm{min-height:36px;font-size:13px;padding:0 12px}
.edit{font-size:12px;margin-left:6px}
.btn:hover{color:#fff;filter:brightness(1.08)} .btn.sec:hover{color:var(--ink);background:#F3F6F8;filter:none}

/* tablou de bord */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{padding:16px 18px}.kpi small{display:block;font-size:13px;color:var(--muted)}
.kpi b{display:block;font-size:30px;margin-top:6px}.kpi span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.row-item{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line2);font-size:14px}
.buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.bucket{border-radius:10px;padding:12px;background:#F1F4F2}.bucket b{display:block;font-size:26px}.bucket span{font-size:12px;color:#4A5860}
.bucket.depasit{background:var(--late-bg)}.bucket.depasit b{color:var(--late-fg)}
.bucket.atentie{background:var(--warn-bg)}.bucket.atentie b{color:var(--warn-fg)}
.dept{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:14px}
.dept-name{flex:0 0 170px;font-weight:600;font-size:14px}
.stack{flex:1 1 200px;display:flex;height:22px;border-radius:4px;overflow:hidden;background:var(--line)}
.stack .fill{height:22px}
.dept-meta{flex:0 0 190px;font-size:13px;color:#4A5860}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#4A5860;margin-top:4px}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.legend i.ok{background:var(--ok)}.legend i.atentie{background:var(--warn)}.legend i.depasit{background:var(--late)}
.kvrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line2);font-size:14px}

/* preluare SEAP */
.seapbox{background:#F1F6F6;border:1px solid #D5E4E3;border-radius:10px;padding:14px 16px;margin-bottom:20px}
.seapbox label{display:block;font-size:13px;font-weight:600;color:#3D4C55;margin-bottom:8px}
.seaprow{display:flex;gap:8px;flex-wrap:wrap}
.seaprow input{flex:1 1 220px;font:inherit;font-size:14px;min-height:44px;padding:8px 12px;border:1px solid #C3CED7;border-radius:8px;text-transform:uppercase}
.seapok{font-size:14px;margin:10px 0 0;color:#22603A}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;color:#0E4D64;background:#DCE9EE;border-radius:4px;padding:1px 5px;vertical-align:middle}
.opt{display:block;padding:14px 16px;border:1px solid #C3CED7;border-radius:10px;margin-bottom:10px;text-decoration:none;color:var(--ink)}
.opt:hover{border-color:var(--accent);background:#F7FAFA;color:var(--ink)}

/* identitate OmniMonitor */
.wordmark{font-size:20px;letter-spacing:-.02em;font-weight:400}.wordmark b{font-weight:700}
.login-logo{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.login-logo .wm{font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink)}.login-logo .wm b{font-weight:700}
.login{background:var(--ground)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

.top .org{display:inline-flex;align-items:center;gap:10px}
.org-sigla{height:30px;max-width:120px;object-fit:contain;background:#fff;border-radius:6px;padding:3px 6px}

/* versiunea demonstrativă */
.demo-banda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 28px;background:#FDF6E7;color:#5C3E00;font-size:13px;border-bottom:1px solid #F0DDB0}
.demo-banda b{font-weight:700}
.demo-banda a{margin-left:auto;color:#5C3E00;font-weight:600}
.demo-banda form{margin:0}
.demo-banda button{font:inherit;font-size:13px;font-weight:600;background:#fff;color:#5C3E00;border:1px solid #E3C985;border-radius:8px;padding:6px 12px;cursor:pointer}
.demo-login{min-height:auto;padding:32px 16px}
.demo-card{width:100%;max-width:760px;padding:32px}
.demo-titlu{font-size:22px;margin:20px 0 4px}
.demo-grup{font-size:14px;margin:22px 0 10px;color:var(--muted);font-weight:600}
.demo-grup small{font-weight:400;color:var(--faint)}
.demo-roluri{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.demo-login form,.demo-roluri form{margin:0;padding:0;max-width:none}
.demo-rol{width:100%;height:100%;text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.demo-rol b{font-size:15px}
.demo-rol span{font-size:13px;color:var(--muted)}
.demo-rol:hover{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,77,100,.12)}
@media (max-width:560px){.demo-banda{padding:8px 16px}.demo-banda a{margin-left:0}.demo-card{padding:20px}}