/* Layout: D365-style app shell — dark app header, grouped sitemap on the left, command bar + record canvas on the right */
:root{
  --bg:#f3f3f2; --surface:#ffffff; --surface2:#f8f8f7; --hover:#f0f0ef; --line:#e1dfdd; --line2:#c8c6c4;
  --fg:#242424; --fg2:#5f5e5c; --fg3:#8a8886;
  --accent:#0f6cbd; --accent-h:#0c5a9e; --accent-bg:#e8f1fb; --accent-fg:#ffffff;
  --hdr:#0b2a4a; --hdr2:#123a63; --hdr-fg:#ffffff;
  --ok:#107c10; --ok-bg:#e9f6e9; --warn:#a4570a; --warn-bg:#fff2d6; --bad:#c50f1f; --bad-bg:#fde8ea; --info:#005b9e; --info-bg:#e5f1fb; --mute-bg:#efefee;
  --c1:#0f6cbd; --c2:#2aa0a4; --c3:#d08a1f; --c4:#8764b8; --c5:#c4314b;
  --shadow:0 1px 2px rgba(0,0,0,.10),0 0 1px rgba(0,0,0,.08);
  --shadow2:0 8px 24px rgba(0,0,0,.16),0 0 2px rgba(0,0,0,.12);
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --nav-w:236px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#151515; --surface:#1f1f1f; --surface2:#262626; --hover:#2c2c2c; --line:#333333; --line2:#474747;
  --fg:#ebebeb; --fg2:#b3b3b3; --fg3:#8c8c8c;
  --accent:#4ba0f0; --accent-h:#6db2f3; --accent-bg:#14304d; --accent-fg:#0b1a2a;
  --hdr:#0a1928; --hdr2:#13283e; --hdr-fg:#ffffff;
  --ok:#5fbf5f; --ok-bg:#16301a; --warn:#f0a85a; --warn-bg:#3a2a12; --bad:#ff7a85; --bad-bg:#3d161b; --info:#6cb4f5; --info-bg:#132c45; --mute-bg:#2c2c2c;
  --c1:#4ba0f0; --c2:#3fc2c6; --c3:#e9a640; --c4:#a98ad8; --c5:#ec6a82;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.6); --shadow2:0 8px 24px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#151515; --surface:#1f1f1f; --surface2:#262626; --hover:#2c2c2c; --line:#333333; --line2:#474747;
  --fg:#ebebeb; --fg2:#b3b3b3; --fg3:#8c8c8c;
  --accent:#4ba0f0; --accent-h:#6db2f3; --accent-bg:#14304d; --accent-fg:#0b1a2a;
  --hdr:#0a1928; --hdr2:#13283e; --hdr-fg:#ffffff;
  --ok:#5fbf5f; --ok-bg:#16301a; --warn:#f0a85a; --warn-bg:#3a2a12; --bad:#ff7a85; --bad-bg:#3d161b; --info:#6cb4f5; --info-bg:#132c45; --mute-bg:#2c2c2c;
  --c1:#4ba0f0; --c2:#3fc2c6; --c3:#e9a640; --c4:#a98ad8; --c5:#ec6a82;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.6); --shadow2:0 8px 24px rgba(0,0,0,.6);
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.42;overflow:hidden}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ---------- shell ---------- */
#app{display:grid;grid-template-rows:48px 1fr;height:100%}
.hdr{background:var(--hdr);color:var(--hdr-fg);display:flex;align-items:center;gap:4px;padding:0 max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px));min-width:0}
.hbtn{background:none;border:0;color:inherit;height:48px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:0 10px;position:relative}
.hbtn:hover{background:var(--hdr2)}
.hbtn svg.i{width:18px;height:18px}
.brand{font-weight:600;font-size:16px;display:flex;align-items:baseline;gap:10px;white-space:nowrap;padding:0 6px}
.brand small{font-weight:400;opacity:.75;font-size:13px;border-left:1px solid rgba(255,255,255,.3);padding-left:10px}
.hsearch{flex:1;display:flex;justify-content:center;min-width:0;position:relative}
.hsearch input{width:min(440px,100%);height:32px;border-radius:4px;border:0;background:rgba(255,255,255,.12);color:#fff;padding:0 12px 0 34px}
.hsearch input::placeholder{color:rgba(255,255,255,.7)}
.hsearch input:focus{background:#fff;color:#242424;outline:none}
.hsearch .si{position:absolute;left:calc(50% - min(220px,50%) + 10px);top:8px;opacity:.8;pointer-events:none}
.badge{position:absolute;top:8px;right:6px;background:#d13438;color:#fff;font-size:10px;font-weight:700;border-radius:9px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:#5c6bc0;flex:none}
.who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;font-size:12px;text-align:left}
.who b{font-size:13px}
.who span{opacity:.75}
#results{position:absolute;top:40px;width:min(440px,100%);background:var(--surface);color:var(--fg);box-shadow:var(--shadow2);border-radius:4px;z-index:60;max-height:60vh;overflow:auto}
#results a{display:flex;gap:10px;padding:8px 12px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line);cursor:pointer}
#results a:hover{background:var(--hover)}
#results small{color:var(--fg3)}

.body{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:0}
.body.collapsed{--nav-w:52px}
nav.side{background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;padding:6px 0 24px}
.ng{padding:14px 16px 4px;font-size:12px;font-weight:700;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collapsed .ng{font-size:0;padding:6px 0;border-top:1px solid var(--line);margin:6px 10px 0}
.ni{display:flex;align-items:center;gap:12px;height:36px;padding:0 16px;color:var(--fg);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;border:0;background:none;width:100%;text-align:left}
.ni:hover{background:var(--hover)}
.ni.on{background:var(--accent-bg);font-weight:600}
.ni.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--accent)}
.ni svg.i{color:var(--fg2)}
.collapsed .ni span{display:none}
.ni .cnt{margin-left:auto;font-size:11px;background:var(--mute-bg);color:var(--fg2);padding:0 6px;border-radius:8px}
main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cmdbar{display:flex;align-items:center;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:0 12px;min-height:44px;flex-wrap:wrap;box-shadow:var(--shadow);z-index:2}
.cmd{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:0;background:none;border-radius:4px;cursor:pointer;white-space:nowrap}
.cmd:hover{background:var(--hover)}
.cmd svg.i{color:var(--accent)}
.cmd.danger svg.i{color:var(--bad)}
.cmd:disabled{opacity:.45;cursor:not-allowed}
.cmd:disabled:hover{background:none}
.cmdsep{width:1px;height:22px;background:var(--line);margin:0 4px}
.scroll{flex:1;overflow:auto;min-height:0}
.page{padding:16px 24px 48px;display:flex;flex-direction:column;gap:16px;max-width:1600px}

/* ---------- headings ---------- */
.ph{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ph h1{font-size:20px;font-weight:600;margin:0;text-wrap:balance}
.ph .sub{color:var(--fg2);font-size:13px}
.eicon{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.eicon svg.i{width:20px;height:20px}
.viewsel{display:inline-flex;align-items:center;gap:6px;font-size:20px;font-weight:600;background:none;border:0;cursor:pointer;padding:2px 6px;border-radius:4px}
.viewsel:hover{background:var(--hover)}
select.viewsel{appearance:none;-webkit-appearance:none;padding-right:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") right 6px center no-repeat}
select.viewsel option{font-size:14px;font-weight:400}
.spacer{flex:1}

/* ---------- cards & sections ---------- */
.sec{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:16px;min-width:0}
.sec h2{font-size:15px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.sec h2 .spacer{flex:1}
.sec h2 small{font-weight:400;color:var(--fg2);font-size:12px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;border-top:3px solid var(--kc,var(--accent))}
.kpi .l{font-size:12px;color:var(--fg2);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d{font-size:12px;color:var(--fg3)}
.kpi.ok{--kc:var(--ok)} .kpi.warn{--kc:var(--warn)} .kpi.bad{--kc:var(--bad)}

/* ---------- grid ---------- */
.gridwrap{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);overflow:auto;max-width:100%}
table.tbl{border-collapse:collapse;width:100%;font-size:13.5px}
.tbl th{position:sticky;top:0;background:var(--surface);text-align:left;font-weight:600;color:var(--fg);padding:0 12px;height:40px;border-bottom:1px solid var(--line2);white-space:nowrap;cursor:pointer;user-select:none;z-index:1}
.tbl th:hover{background:var(--hover)}
.tbl th.num{text-align:right}
.tbl th .ar{color:var(--fg3);font-size:10px;margin-left:4px}
.tbl td{padding:0 12px;height:40px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--hover)}
.tbl tr.static{cursor:default}
.tbl tfoot td{font-weight:700;border-top:2px solid var(--line2);background:var(--surface2)}
.tbl a.lnk,.lnk{color:var(--accent);text-decoration:none;cursor:pointer;background:none;border:0;padding:0}
.tbl a.lnk:hover,.lnk:hover{text-decoration:underline}
.tbl.compact td{height:34px}
.gridfoot{display:flex;justify-content:space-between;padding:8px 12px;color:var(--fg2);font-size:12px;border-top:1px solid var(--line);background:var(--surface)}
.empty{padding:36px 16px;text-align:center;color:var(--fg2)}
.filterbox{position:relative}
.filterbox input{height:32px;border:1px solid var(--line2);border-radius:4px;padding:0 10px 0 30px;background:var(--surface);width:240px;max-width:100%}
.filterbox svg{position:absolute;left:9px;top:8px;color:var(--fg3)}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:1px 9px;border-radius:10px;white-space:nowrap;background:var(--mute-bg);color:var(--fg2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.info{background:var(--info-bg);color:var(--info)}
.tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg3)}

/* ---------- form ---------- */
.fhead{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fhead .t{flex:1;min-width:200px}
.fhead h1{font-size:20px;margin:0;font-weight:600;overflow-wrap:anywhere}
.fhead .sub{color:var(--fg2);font-size:13px}
.hfields{display:flex;gap:0;flex-wrap:wrap}
.hf{padding:0 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:110px}
.hf b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.hf span{font-size:12px;color:var(--fg2)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;padding:10px 12px;cursor:pointer;color:var(--fg2);font-weight:600;position:relative;white-space:nowrap}
.tab.on{color:var(--fg)}
.tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:2px;background:var(--accent)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
.fld{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:8px;min-height:38px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{color:var(--fg2);font-size:13px}
.fld label .rq{color:var(--bad);margin-left:2px}
.inp{height:32px;border:1px solid transparent;border-bottom-color:var(--line2);background:var(--surface2);border-radius:4px;padding:0 8px;width:100%;min-width:0}
.inp:hover{border-color:var(--line2)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.inp:disabled,.inp[readonly]{background:transparent;border-color:transparent;color:var(--fg);opacity:1;cursor:default}
textarea.inp{height:auto;min-height:72px;padding:6px 8px;resize:vertical}
.ro{padding:0 8px;min-height:32px;display:flex;align-items:center;overflow-wrap:anywhere}
.chk{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px}
.chk input{width:16px;height:16px;accent-color:var(--accent)}
.msel{display:flex;flex-wrap:wrap;gap:4px 14px;padding:4px 8px}
.msel label{display:flex;gap:6px;align-items:center;color:var(--fg);font-size:13px}

/* ---------- business process flow ---------- */
.bpf{display:flex;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);overflow-x:auto;padding:10px 12px;gap:0}
.stg{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 22px;position:relative;white-space:nowrap;font-size:13px;color:var(--fg2);flex:1;min-width:max-content;background:var(--surface2);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);margin-right:-6px}
.stg:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-left:12px}
.stg .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:11px;background:var(--surface)}
.stg.done{color:var(--fg)} .stg.done .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.stg.cur{background:var(--accent-bg);color:var(--fg);font-weight:600} .stg.cur .dot{border-color:var(--accent);color:var(--accent)}
.stg.stop{background:var(--bad-bg);color:var(--bad)} .stg.stop .dot{border-color:var(--bad)}

/* ---------- misc ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:4px;font-size:13.5px}
.banner.bad{background:var(--bad-bg);color:var(--bad)} .banner.warn{background:var(--warn-bg);color:var(--warn)} .banner.ok{background:var(--ok-bg);color:var(--ok)} .banner.info{background:var(--info-bg);color:var(--info)}
.banner b{color:inherit}
.banner svg.i{margin-top:2px}
.list{display:flex;flex-direction:column}
.li{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.li:last-child{border-bottom:0}
.li:hover{background:var(--hover)}
.li .m{flex:1;min-width:0}
.li .m div{overflow-wrap:anywhere}
.li small{color:var(--fg3);display:block}
.sev{width:8px;align-self:stretch;border-radius:4px;flex:none;background:var(--info)}
.sev.bad{background:var(--bad)} .sev.warn{background:var(--warn)} .sev.ok{background:var(--ok)}
.bar{height:8px;border-radius:4px;background:var(--mute-bg);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar i.warn{background:var(--warn)} .bar i.bad{background:var(--bad)}
.chartbox{position:relative;height:260px}
.chk-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.chk-row:last-child{border-bottom:0}
.ic-ok{color:var(--ok)} .ic-bad{color:var(--bad)} .ic-warn{color:var(--warn)}
.timeline{display:flex;flex-direction:column;gap:0}
.tl{display:grid;grid-template-columns:18px 1fr;gap:10px;padding-bottom:12px;position:relative}
.tl::before{content:"";position:absolute;left:8px;top:16px;bottom:0;width:1px;background:var(--line2)}
.tl:last-child::before{display:none}
.tl .d{width:11px;height:11px;border-radius:50%;background:var(--accent);margin:4px 0 0 3px}
.tl small{color:var(--fg3)}
.docbox{border:1px solid var(--line2);background:var(--surface2);padding:22px 26px;border-radius:4px;font-family:Georgia,"Times New Roman",serif;line-height:1.6;max-height:60vh;overflow:auto}
.docbox h3{text-align:center;margin:0 0 12px;font-size:16px;letter-spacing:.04em}
.sig{margin-top:16px;border:1px dashed var(--ok);color:var(--ok);padding:8px 12px;font-family:var(--font);font-size:12px;border-radius:4px}

/* scheduling board */
.board{display:grid;min-width:880px}
.board .bh{position:sticky;top:0;background:var(--surface);font-weight:600;font-size:12.5px;padding:8px;border-bottom:1px solid var(--line2);z-index:1}
.board .bh.today{color:var(--accent)}
.board .rh{padding:10px 8px;font-weight:600;font-size:13px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:var(--surface)}
.board .rh small{display:block;font-weight:400;color:var(--fg3)}
.board .cell{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:4px;min-height:74px;cursor:pointer}
.board .cell:hover{background:var(--hover)}
.board .cell.today{background:var(--accent-bg)}
.bk{border-radius:3px;padding:3px 6px;font-size:11.5px;line-height:1.3;border-left:3px solid var(--accent);background:var(--surface2);box-shadow:var(--shadow);cursor:pointer;overflow:hidden}
.bk b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk.st-kontraktuar{border-left-color:var(--ok)} .bk.st-kerkese{border-left-color:var(--warn)} .bk.st-realizuar{border-left-color:var(--fg3);opacity:.8} .bk.st-anuluar{border-left-color:var(--bad);text-decoration:line-through;opacity:.6}

/* heatmap */
.heat{display:grid;grid-template-columns:28px repeat(5,1fr);gap:4px;max-width:440px}
.heat div{aspect-ratio:1.5;border-radius:4px;display:grid;place-items:center;font-weight:700;font-size:13px;max-width:100%}
.heat .ax{color:var(--fg3);font-size:11px;font-weight:600;aspect-ratio:auto}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;z-index:100;padding:16px}
.dlg{background:var(--surface);border-radius:8px;box-shadow:var(--shadow2);width:min(560px,100%);max-height:calc(100% - 32px);display:flex;flex-direction:column}
.dlg.wide{width:min(820px,100%)}
.dlg header{padding:18px 22px 6px;font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px}
.dlg .db{padding:8px 22px 12px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.dlg footer{padding:12px 22px 18px;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.dlg .fld{grid-template-columns:140px 1fr}
.b{height:32px;padding:0 16px;border-radius:4px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;font-weight:600;white-space:nowrap}
.b:hover{background:var(--hover)}
.b.p{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.b.p:hover{background:var(--accent-h)}
.b.d{background:var(--bad);border-color:var(--bad);color:#fff}
.err{color:var(--bad);font-size:13px;min-height:18px}
#toasts{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--surface);box-shadow:var(--shadow2);border-left:4px solid var(--ok);padding:10px 14px;border-radius:4px;max-width:360px;font-size:13.5px}
.toast.bad{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
.menu{position:fixed;background:var(--surface);color:var(--fg);box-shadow:var(--shadow2);border-radius:6px;z-index:90;min-width:280px;max-height:80vh;overflow:auto;padding:6px 0}
.menu .mi{display:flex;gap:10px;align-items:center;padding:8px 14px;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.menu .mi:hover{background:var(--hover)}
.menu .mi.on{background:var(--accent-bg)}
.menu .mh{padding:8px 14px 4px;font-size:12px;color:var(--fg3);font-weight:700}
.diagram{width:100%;height:auto;max-width:900px}
.muted{color:var(--fg2)}
.small{font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mobonly{display:none}

@media (max-width:860px){
  .brand small,.who,.hsearch .si{display:none}
  .body{grid-template-columns:1fr}
  nav.side{position:fixed;top:48px;bottom:0;left:0;width:280px;z-index:50;box-shadow:var(--shadow2);transform:translateX(-105%);transition:transform .2s}
  .body.mobopen nav.side{transform:none}
  .body.collapsed .ni span{display:inline} .body.collapsed .ng{font-size:12px;padding:14px 16px 4px;border:0;margin:0}
  .page{padding:16px 16px 48px}
  .fgrid{grid-template-columns:1fr}
  .fld{grid-template-columns:1fr;gap:2px;padding-block:4px}
  .dlg .fld{grid-template-columns:1fr}
  .hf{padding:0 12px 0 0;border-left:0;min-width:45%}
  .cmd .lb{display:none}
  .mobonly{display:inline-flex}
  .filterbox input{width:100%}
  .hsearch input{padding-left:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- login ---------- */
#login{min-height:100%;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));background:var(--bg)}
.lcard{background:var(--surface);border-radius:8px;box-shadow:var(--shadow2);padding:28px;width:min(420px,100%);display:flex;flex-direction:column;gap:12px}
.lcard h1{font-size:20px;margin:6px 0 0;font-weight:600}
.lcard p{margin:0;line-height:1.5}
.lcard form{display:flex;flex-direction:column;gap:6px}
.lcard .fld{grid-template-columns:1fr;gap:4px}
.lcard .b{height:36px;margin-top:6px}
.lbrand{display:flex;gap:12px;align-items:center}
.lbrand b{display:block;font-size:17px}
.lbrand small{color:var(--fg2)}
.qr{display:flex;justify-content:center;background:#fff;padding:8px;border-radius:6px;align-self:center}
.qr svg{width:200px;height:200px}
code.sel{user-select:all;word-break:break-all;background:var(--surface2);padding:2px 6px;border-radius:4px}
body.busy,body.busy *{cursor:progress!important}
html,body{height:100%}
body{overflow:auto}
#app{height:100%}
#app[hidden],#login[hidden]{display:none!important}
@media print{
  body.printing #app,body.printing #toasts,body.printing .dlg header,body.printing .dlg footer,body.printing .dlg .err{display:none!important}
  body.printing .scrim{position:static;background:none;padding:0;display:block}
  body.printing .dlg{box-shadow:none;width:100%;max-height:none}
  body.printing .docbox{max-height:none;border:0;background:#fff;color:#000}
}