/* CLA Логистика — умумий услублар. Ранглар: йўл белгиси яшили + қаҳрабо */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=PT+Sans:wght@400;700&family=PT+Mono&display=swap");
:root{
  --bg:#EEF2EF; --surface:#FFFFFF; --sunk:#F5F8F6; --ink:#16201B; --muted:#5A6960; --line:#D2DBD5;
  --accent:#0E6A46; --accent-ink:#FFFFFF; --amber:#C98204; --ok:#2E7D4F; --warn:#B7791F; --bad:#B23A1C; --info:#3B6E93; --chip:#E3ECE6;
  --nav:#0C3B29; --nav-ink:#DCEBE2; --nav-muted:#8FB2A0;
  --f-display:"Oswald","Arial Narrow",Arial,sans-serif; --f-body:"PT Sans","Segoe UI",Arial,sans-serif; --f-num:"PT Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0E1411; --surface:#161F1B; --sunk:#121a16; --ink:#E3ECE6; --muted:#97A79E; --line:#29352F;
  --accent:#2FA874; --accent-ink:#06130D; --amber:#EBAA2E; --ok:#4CC27E; --warn:#E0A53C; --bad:#E5734F; --info:#6FA6CF; --chip:#202D27;
  --nav:#09110D; --nav-ink:#D7E6DD; --nav-muted:#7E9A8B; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:15px;line-height:1.45}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:.02em;margin:0;text-wrap:balance}
h1{font-size:1.6rem} h2{font-size:1.15rem} h3{font-size:1.05rem}
a{color:var(--accent)}
.btn{font:inherit;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:5px;padding:8px 13px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:3px 9px;font-size:.85rem;font-weight:400}
.btn:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.link{font:inherit;background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-align:left}
input,select,textarea{font:inherit;color:var(--ink);background:var(--sunk);border:1px solid var(--line);border-radius:5px;padding:8px 9px;width:100%;min-width:0}
input[type=number]{font-family:var(--f-num)} input[type=checkbox]{width:auto}
textarea{min-height:70px;resize:vertical}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field>span{font-size:.76rem;color:var(--muted);font-weight:700;letter-spacing:.03em}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.phead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.sub,.note{font-size:.82rem;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:11px 13px;display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;color:inherit}
button.kpi{cursor:pointer}
.kpi .l{font-size:.78rem;color:var(--muted)} .kpi .v{font-family:var(--f-num);font-size:1.5rem;line-height:1.2} .kpi .s{font-size:.78rem;color:var(--muted)}
.kpi.alert{border-color:var(--bad)} .kpi.alert .v{color:var(--bad)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--sunk);white-space:nowrap}
td.n,th.n{text-align:right;font-family:var(--f-num);white-space:nowrap}
tr.click{cursor:pointer} tr.click:hover td{background:var(--sunk)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;border-radius:999px;padding:1px 8px;white-space:nowrap;background:var(--chip)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)} .pill.info{color:var(--info)} .pill.mute{color:var(--muted)}
.bar{height:10px;border-radius:2px;background:var(--chip);overflow:hidden} .bar i{display:block;height:100%}
.msg{font-size:.88rem;padding:8px 10px;border-radius:5px;background:var(--chip)} .msg.bad{color:var(--bad);border:1px solid var(--bad);background:transparent}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 15px;border-radius:5px;font-size:.92rem;z-index:50;max-width:92vw}
.modal-bg{position:fixed;inset:0;background:rgba(5,12,9,.55);display:flex;align-items:flex-start;justify-content:center;padding:calc(18px + env(safe-area-inset-top,0px)) 12px 18px;z-index:40;overflow-y:auto}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:9px;width:min(720px,100%);padding:16px;display:flex;flex-direction:column;gap:12px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.thumbs{display:flex;gap:6px;flex-wrap:wrap} .thumbs img{width:84px;height:84px;object-fit:cover;border-radius:5px;border:1px solid var(--line);cursor:zoom-in}
.alerts{list-style:none;margin:0;padding:0} .alerts li{display:grid;grid-template-columns:4px 1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)} .alerts li:last-child{border-bottom:0}
.sev{border-radius:2px} .sev.bad{background:var(--bad)} .sev.warn{background:var(--warn)} .sev.info{background:var(--info)}
.mono{font-family:var(--f-num)}
/* чат */
.chat{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow-y:auto;padding:4px}
.bubble{max-width:82%;padding:7px 10px;border-radius:9px;background:var(--chip);align-self:flex-start;white-space:pre-wrap;word-break:break-word}
.bubble.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.bubble small{display:block;opacity:.7;font-size:.72rem;margin-top:2px}
.map{height:min(60vh,520px);border-radius:7px;border:1px solid var(--line)}