:root{
  --bg:#F2F6F7; --surface:#FFFFFF; --ink:#14252B; --muted:#5A6D74; --line:#D6DFE2; --line-soft:#E8EEF0;
  --primary:#0F6373; --primary-dark:#0A4753; --water:#2A9DB5; --water-soft:#DCEFF3;
  --ok:#1F7A4D; --warn:#9A5A00; --warn-bg:#FFF2D9; --danger:#B3261E; --danger-bg:#FDE8E6; --info-bg:#E9F1F3;
  --radius:6px;
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.45}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:.87rem}

/* karkas */
.shell{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.side{background:var(--primary-dark);color:#DCEBEE;padding:18px 0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{padding:0 20px 18px;font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:-.01em}
.brand span{display:block;font-weight:400;font-size:.8rem;color:#9FC3CA;margin-top:2px}
.side nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 20px;color:#DCEBEE;border-left:3px solid transparent}
.side nav a:hover{background:rgba(255,255,255,.07);text-decoration:none}
.side nav a.on{background:rgba(255,255,255,.12);border-left-color:#7FD3E3;color:#fff;font-weight:600}
.badge{background:#F3B33D;color:#3A2600;border-radius:10px;padding:0 7px;font-size:.78rem;font-weight:700}
.side .foot{margin-top:auto;padding:12px 20px;font-size:.85rem}
.side .foot a{color:#9FC3CA}
main{padding:26px 32px 60px;max-width:1240px;width:100%}
h1{font-size:1.55rem;margin:0 0 4px;letter-spacing:-.015em}
h2{font-size:1.08rem;margin:0 0 12px}
.lead{color:var(--muted);margin:0 0 20px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}

/* bloklar */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px}
.panel.flush{padding:0;overflow:hidden}
.panel.flush>h2{padding:16px 20px 0}
.cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:18px}
.figures div{padding:14px 18px;border-right:1px solid var(--line-soft)}
.figures div:last-child{border-right:0}
.figures b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.figures span{color:var(--muted);font-size:.87rem}

/* jadval */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
th{font-size:.82rem;font-weight:600;color:var(--muted);background:#F7FAFB;border-bottom:1px solid var(--line);white-space:nowrap}
th.num{text-align:right}
tbody tr:hover{background:#F8FBFC}
tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0;background:#F7FAFB}
td.act{white-space:nowrap;text-align:right}
td.act form{display:inline}

/* shartnoma qoldig'i — idishdagi suv sathi */
.gauge{position:relative;height:14px;min-width:120px;background:#fff;border:1px solid #B9C9CE;border-radius:3px;overflow:hidden}
.gauge i{position:absolute;inset:0 auto 0 0;background:var(--water)}
.gauge.g-low i{background:#E0A021}
.gauge.g-empty,.gauge.g-over{border-color:var(--danger);background:repeating-linear-gradient(135deg,#fff 0 5px,var(--danger-bg) 5px 10px)}
.levels{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(110px,1fr) auto;gap:8px 14px;align-items:center}
.levels .sub{color:var(--muted);font-size:.85rem;white-space:nowrap;text-align:right}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:.8rem;font-weight:600;white-space:nowrap}
.tag.ok{background:#E2F3EA;color:var(--ok)} .tag.low{background:var(--warn-bg);color:var(--warn)}
.tag.over,.tag.empty,.tag.danger{background:var(--danger-bg);color:var(--danger)} .tag.closed,.tag.info{background:var(--info-bg);color:var(--muted)}
.neg{color:var(--danger)} .pos{color:var(--ok)}

/* ogohlantirishlar */
.alerts{list-style:none;margin:0;padding:0}
.alerts li{padding:9px 12px 9px 14px;border-left:4px solid var(--line);background:var(--info-bg);margin-bottom:6px;border-radius:0 4px 4px 0}
.alerts li.danger{border-left-color:var(--danger);background:var(--danger-bg)}
.alerts li.warn{border-left-color:#E0A021;background:var(--warn-bg)}
.alerts li b{font-weight:600}
.flash{padding:10px 14px;border-radius:4px;margin-bottom:10px;background:#E2F3EA;color:#14532F;border:1px solid #BFE3CF}
.flash.err{background:var(--danger-bg);color:var(--danger);border-color:#F3C2BD}
.flash.warn{background:var(--warn-bg);color:#6B3F00;border-color:#F1D59A}

.agroup{border-left:4px solid var(--line);margin-bottom:8px;border-radius:0 4px 4px 0;background:var(--info-bg)}
.agroup.danger{border-left-color:var(--danger);background:var(--danger-bg)} .agroup.warn{border-left-color:#E0A021;background:var(--warn-bg)}
.agroup>summary{cursor:pointer;padding:9px 12px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.agroup>summary .count{font-size:.85rem;color:var(--muted);white-space:nowrap}
.agroup .alerts{padding:0 10px 8px} .agroup .alerts li{background:rgba(255,255,255,.65);border-left:0;border-radius:4px;margin-bottom:4px;padding:7px 10px}

/* forma */
form.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);padding:7px 9px;border:1px solid #B9C9CE;border-radius:4px;background:#fff;min-width:0}
input[type=number]{width:104px} input[type=date]{width:150px} textarea{min-height:70px;width:100%}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.span2{grid-column:span 2} .span3{grid-column:1/-1}
button,.btn{font:inherit;font-weight:600;padding:8px 16px;border-radius:4px;border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer;display:inline-block}
button:hover,.btn:hover{background:var(--primary-dark);text-decoration:none}
.btn.ghost,button.ghost{background:#fff;color:var(--primary)}
button.link{background:none;border:0;color:var(--danger);padding:0;font-weight:400}
button.link:hover{text-decoration:underline;background:none}
details.add{margin-bottom:18px}
details.add>summary{cursor:pointer;color:var(--primary);font-weight:600;margin-bottom:10px}
pre.report{white-space:pre-wrap;font-size:.85rem;background:#F7FAFB;border:1px solid var(--line);border-radius:4px;padding:12px;max-height:420px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace}
.checkline{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}

/* kirish */
.login{max-width:340px;margin:12vh auto;padding:0 16px}
.login .panel{padding:26px}
.login label{margin-bottom:12px}
.login button{width:100%}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;padding:8px 6px;overflow-x:auto}
  .brand{padding:0 12px;white-space:nowrap} .brand span{display:none}
  .side nav{display:flex} .side nav a{padding:8px 12px;border-left:0;border-bottom:3px solid transparent;white-space:nowrap;gap:6px}
  .side nav a.on{border-bottom-color:#7FD3E3}
  .side .foot{margin:0;padding:0 12px;white-space:nowrap}
  main{padding:18px 14px 50px}
  .cols,.grid2,.grid3{grid-template-columns:1fr} .span2{grid-column:auto}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figures div:nth-child(2){border-right:0} .figures div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .levels{grid-template-columns:minmax(0,1fr) 90px}
  .levels .sub{grid-column:1/-1;text-align:left;margin:-4px 0 6px}
}