/* Toner Monitor — application stylesheet.
   One family (IBM Plex Sans) for the UI, IBM Plex Mono only for codes, IPs and
   figures that get typed into an order. Restrained product palette; the accent
   is reserved for the current selection, primary actions and indicators.
   Semantic state colors are separate from the accent. */

/* ---------- tokens ---------- */
:root{
  --bg:#f3f6f8; --bg-2:#e9eef2; --surface:#ffffff; --surface-2:#f8fafb;
  --ink:#16283a; --ink-2:#3b4c5c; --muted:#5f6f7e; --faint:#8a99a8;
  --line:#dfe6ec; --line-2:#cfd8e0;
  --nav:#163d5c; --nav-ink:#e8f1f8; --nav-muted:#9dbdd5; --nav-line:rgba(255,255,255,.1); --nav-active:rgba(126,197,241,.16);
  --brand:#184868; --primary:#206697; --primary-hover:#1a5680; --on-primary:#ffffff; --accent:#7ec5f1; --accent-soft:#e6f2fb; --accent-line:#b9dbf1;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#a16207; --warn-soft:#fef3c7; --crit:#b91c1c; --crit-soft:#fee2e2; --off:#64748b; --off-soft:#eef2f6;
  --f-ok:#1f9d5a; --f-low:#d9463e; --f-warn:#e39b18; --f-down:#a2231b; --f-off:#a7b3bf;
  --c-k:#243447; --c-c:#0e9ab8; --c-m:#d0348a; --c-y:#e0a800; --c-drum:#5b5fd6; --c-belt:#0f8f82; --c-fuser:#8d4fd0; --c-waste:#7a6f66; --c-maint:#a3580b; --c-ink:#2f7fb8;
  --shadow-1:0 1px 2px rgba(22,40,58,.06),0 1px 1px rgba(22,40,58,.04);
  --shadow-2:0 6px 18px rgba(22,40,58,.10),0 2px 6px rgba(22,40,58,.06);
  --shadow-3:0 24px 60px rgba(22,40,58,.28);
  --r-1:6px; --r-2:10px; --r-3:14px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-fast:120ms; --t-base:180ms; --t-slow:240ms;
  --sidebar:232px; --topbar:56px;
  --font:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0f1a24; --bg-2:#15222e; --surface:#172634; --surface-2:#1c2d3d;
  --ink:#e6eef5; --ink-2:#c3d1dc; --muted:#98aab9; --faint:#6f8393;
  --line:#26394a; --line-2:#33495c;
  --nav:#0c1a26; --nav-ink:#e6eef5; --nav-muted:#8fa9bd; --nav-line:rgba(255,255,255,.08); --nav-active:rgba(126,197,241,.14);
  --primary:#7ec5f1; --primary-hover:#9ad3f5; --on-primary:#0c2438; --accent:#7ec5f1; --accent-soft:#1a3448; --accent-line:#2b5573;
  --ok:#5cc48d; --ok-soft:#173327; --warn:#f0b04a; --warn-soft:#3a2c12; --crit:#f08a8a; --crit-soft:#3d1c1c; --off:#9fb1c1; --off-soft:#233240;
  --f-ok:#2e9e67; --f-low:#d4574f; --f-warn:#cf9a2a; --f-down:#8f2b25; --f-off:#4f6376;
  --c-k:#c9d4de;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 18px rgba(0,0,0,.45); --shadow-3:0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:#0c2438}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-1)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
code,.mono{font-family:var(--mono);font-size:.93em}
[hidden]{display:none!important}
/* every icon has a sane size by default; contexts below override */
.ic{width:1em;height:1em;vertical-align:-.15em;flex:none}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-rows:var(--topbar) 1fr;min-height:100vh;min-height:100dvh}
.side{grid-row:1/3;background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;overflow:auto}
.brand{display:flex;align-items:center;gap:11px;padding:16px 18px 14px;border-bottom:1px solid var(--nav-line);color:inherit;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
.brand .name{font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.15}
.brand .name span{display:block;font-weight:400;font-size:11.5px;color:var(--nav-muted);letter-spacing:.02em}
.nav{padding:10px 10px;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-2);color:var(--nav-ink);font-weight:500;font-size:13.5px;text-decoration:none;transition:background var(--t-fast) ease}
.nav a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.nav a.on{background:var(--nav-active);color:#fff}
.nav a .ic{width:18px;height:18px;flex:none;opacity:.85}
.nav a.on .ic{opacity:1;color:var(--accent)}
.nav a .cnt{margin-left:auto;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-variant-numeric:tabular-nums}
.nav a .cnt.crit{background:var(--crit);color:#fff}
.nav .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--nav-muted);padding:14px 10px 4px;font-weight:600}
.side .foot{margin-top:auto;padding:12px 18px 16px;font-size:11.5px;color:var(--nav-muted);border-top:1px solid var(--nav-line);line-height:1.5}
.side .foot a{color:var(--accent)}
.top{grid-column:2;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line);height:var(--topbar)}
.top .menu{display:none}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);min-width:0;overflow:hidden;white-space:nowrap}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--ink)}
.crumbs .cur{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--faint)}
.top .grow{flex:1}
.gsearch{position:relative;width:min(360px,34vw)}
.gsearch input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface-2);font-size:13.5px;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.gsearch input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-soft)}
.gsearch .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint);pointer-events:none}
.gsearch kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:11px var(--mono);color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:0 5px;background:var(--surface)}
.user{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;border-radius:var(--r-2);border:1px solid transparent;background:transparent;max-width:240px}
.user:hover{border-color:var(--line);background:var(--surface-2)}
.user .av{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
:root[data-theme="dark"] .user .av{background:var(--accent);color:#0c2438}
.user .nm{font-size:13px;font-weight:600;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user .rl{font-size:11px;color:var(--muted);line-height:1.1}
.pop{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-2);min-width:200px;padding:6px;transform-origin:top right;animation:pop var(--t-base) var(--ease-out)}
.pop button,.pop a{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:var(--r-1);text-align:left;font-size:13px;color:var(--ink)}
.pop button:hover,.pop a:hover{background:var(--surface-2);text-decoration:none}
.pop .ic{width:16px;height:16px;color:var(--muted)}
.pop hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.pop .popsel{display:flex;flex-direction:column;gap:6px;padding:6px 10px 8px;font-size:11.5px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.pop .popsel select{width:100%;min-height:32px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
main{grid-column:2;padding:22px 24px 60px;min-width:0;overflow-x:clip}
.page{max-width:1480px;margin:0 auto}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.ph h1{font-size:22px;line-height:1.2;margin:0;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.ph h1[tabindex]:focus,.ph h1[tabindex]:focus-visible{outline:none}
.ph .sub{color:var(--muted);font-size:13px;margin:4px 0 0}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
h2{font-size:15px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
h2 .n{color:var(--muted);font-weight:500;margin-left:6px;font-variant-numeric:tabular-nums}
.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-1)}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px 0}
.card .hd h2{margin:0}
.card .bd{padding:12px 16px 14px}
.card .ft{padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---------- buttons & inputs ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);user-select:none}
.btn:hover{background:var(--surface-2);border-color:var(--faint);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn .ic{width:15px;height:15px;color:var(--muted)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.pri .ic{color:inherit}
.btn.pri:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.danger{color:var(--crit)} .btn.danger:hover{border-color:var(--crit);background:var(--crit-soft)}
.btn.sm{padding:5px 9px;font-size:12px;border-radius:8px}
.btn.icon{padding:7px;width:34px;justify-content:center}
#themebtn .ic{width:16px;height:16px;color:var(--ink-2)}
#themebtn:hover .ic{color:var(--primary)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:default;transform:none}
.btn .spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);padding:3px;gap:2px}
.seg button{border:0;background:none;padding:5px 10px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--muted);transition:background var(--t-fast),color var(--t-fast)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--brand);color:#fff}
:root[data-theme="dark"] .seg button.on{background:var(--accent);color:#0c2438}
.seg button .cnt{margin-left:5px;font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.input,select.input{padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);font-size:13px;min-height:34px;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-soft)}
.field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2)}
.field .input{font-weight:400;min-width:180px}
.field .help{font-weight:400;color:var(--muted);font-size:11.5px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.toolbar .grow{flex:1}

/* ---------- status vocabulary ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.6}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.ready{background:var(--ok-soft);color:var(--ok)} .pill.warning{background:var(--warn-soft);color:var(--warn)}
.pill.down{background:var(--crit-soft);color:var(--crit)} .pill.offline{background:var(--off-soft);color:var(--off)} .pill.low{background:var(--crit-soft);color:var(--crit)}
.pill.plain::before{display:none}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.dot.off{background:var(--faint)} .dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.crit{background:var(--crit-soft);color:var(--crit);border-color:transparent} .tag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} .tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}

/* health strip: one stacked bar + legend, the summary of the whole fleet */
.strip{display:flex;gap:2px;height:10px;margin:4px 0 10px}
.strip i{display:block;height:100%;min-width:0;border-radius:3px}
.strip i:first-child{border-radius:6px 3px 3px 6px} .strip i:last-child{border-radius:3px 6px 6px 3px}
.strip .s-ready{background:var(--f-ok)} .strip .s-low{background:var(--f-low)} .strip .s-warning{background:var(--f-warn)} .strip .s-down{background:var(--f-down)} .strip .s-offline{background:var(--f-off)}
.legend .sw.s-ready{background:var(--f-ok)} .legend .sw.s-low{background:var(--f-low)} .legend .sw.s-warning{background:var(--f-warn)} .legend .sw.s-down{background:var(--f-down)} .legend .sw.s-offline{background:var(--f-off)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.legend button{border:0;background:none;padding:4px 6px;margin:-4px -6px;border-radius:6px;display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.legend button:hover{background:var(--surface-2)}
.legend button.on{background:var(--accent-soft);color:var(--ink)}
.legend b{font-variant-numeric:tabular-nums;font-weight:600}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}

/* ---------- supply bars ---------- */
.sup{display:flex;align-items:center;gap:7px;margin:3px 0;min-width:0}
.sup .l{font-size:10.5px;color:var(--muted);width:22px;flex:none;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup .l.wide{width:96px;font-weight:500}
.sup .bar{flex:1;height:7px;border-radius:5px;background:var(--bg-2);overflow:hidden;min-width:40px;position:relative}
.sup .bar i{display:block;height:100%;border-radius:5px;width:var(--w,0%);background:var(--c,var(--primary))}
.sup .bar i.unk{width:100%;background:repeating-linear-gradient(45deg,var(--line) 0 4px,var(--bg-2) 4px 8px)}
.sup .p{font-size:11.5px;width:34px;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;flex:none}
.sup .p.lo{color:var(--crit);font-weight:600} .sup .p.mid{color:var(--warn);font-weight:600}
.sup.big{margin:0;gap:12px}
.sup.big .l{width:150px;font-size:12.5px;color:var(--ink);font-weight:500}
.sup.big .bar{height:10px;border-radius:6px}
.sup.big .p{width:44px;font-size:13px}
.nodata{color:var(--faint);font-size:12px}

/* order codes: mono because they get typed into an order form */
.pn{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:nowrap}
.pn+.pn{margin-top:2px}
.pn .sw{width:8px;height:8px;border-radius:2px;flex:none;background:var(--c,var(--primary))}
.pn.cat .code{border-bottom:1px dotted var(--faint)}
.pn.svc{font-family:var(--font);color:var(--muted);font-style:italic}
.pn .src{font:10px var(--font);color:var(--faint);letter-spacing:.02em}
.copy{border:0;background:none;padding:2px;color:var(--faint);border-radius:4px;display:inline-flex}
.copy:hover{color:var(--primary);background:var(--accent-soft)}
.copy .ic{width:13px;height:13px}

/* ---------- tables ---------- */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);box-shadow:var(--shadow-1)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--ink)}
th .ar{display:inline-block;width:0;height:0;margin-left:5px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--faint);opacity:0;vertical-align:middle;transition:transform var(--t-fast),opacity var(--t-fast)}
th.on .ar{opacity:1;border-bottom-color:var(--primary)} th.on.desc .ar{transform:rotate(180deg)}
tbody td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.row{cursor:pointer;transition:background var(--t-fast)}
tbody tr.row:hover{background:var(--surface-2)}
tbody tr.row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.k-act .btn{margin:2px 0}
.pname{font-weight:600;line-height:1.3}
.psub{color:var(--muted);font-size:11.5px;line-height:1.3;margin-top:1px}
.psub.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sitecell{display:inline-flex;align-items:center;gap:6px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.sitecell .dot{flex:none}
td.c-name{min-width:200px;max-width:340px}
.ip{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.ip a{color:var(--faint)} .ip a:hover{color:var(--primary)}
.ip .ic{width:12px;height:12px;vertical-align:-2px}
.upd{color:var(--muted);font-size:12px;white-space:nowrap}
.tbl.compact td{padding:7px 12px}
.pager{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 4px 0;font-size:12.5px;color:var(--muted)}
.pager .pg{display:flex;gap:4px}
.pager button{min-width:32px}
.empty{text-align:center;color:var(--muted);padding:44px 20px}
.empty .ic{width:36px;height:36px;color:var(--line-2);margin:0 auto 10px}
.empty h3{margin:0 0 4px;font-size:14px;color:var(--ink)}
.empty p{margin:0;font-size:13px;max-width:44ch;margin-inline:auto}
.skel{background:linear-gradient(90deg,var(--bg-2) 25%,var(--surface-2) 37%,var(--bg-2) 63%);background-size:400% 100%;animation:shimmer 1.2s ease infinite;border-radius:6px;height:14px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skel-rows>div{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.skel-rows>div:last-child{border-bottom:0}
.skel-rows .skel:nth-child(1){width:70px}.skel-rows .skel:nth-child(2){flex:1}.skel-rows .skel:nth-child(3){width:120px}.skel-rows .skel:nth-child(4){width:160px}

/* attention list (overview) */
.att{list-style:none;margin:0;padding:0}
.att li{display:grid;grid-template-columns:10px minmax(0,1fr) minmax(0,42%);gap:8px 12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.att .st{width:10px;height:10px;border-radius:50%;background:var(--f-ok)}
.att .st.down{background:var(--f-down)} .att .st.low{background:var(--f-low)} .att .st.warning{background:var(--f-warn)} .att .st.offline{background:var(--f-off)}
.att li:last-child{border-bottom:0}
.att .who{min-width:0}
.att .who .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .who .s{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .what{font-size:12.5px;color:var(--ink-2);text-align:right;min-width:0;line-height:1.35}
.att .what .tx{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .what .tx.crit{color:var(--crit)} .att .what .tx.warn{color:var(--warn)}
.att .what .code{font-family:var(--mono);font-size:11.5px;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att a{color:inherit} .att a:hover{text-decoration:none;color:var(--primary)}

/* site rows (overview + sites page) */
.sites{list-style:none;margin:0;padding:0}
.sites li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,50%);gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sites li:last-child{border-bottom:0}
.sites .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sites .s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sites .cnts{display:flex;gap:4px 10px;flex-wrap:wrap;justify-content:flex-end;font-size:12px;font-weight:500;white-space:nowrap}
.sites .cnts .c{display:inline-flex;align-items:center;gap:5px}
.sites .cnts .c::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--f-ok)}
.sites .cnts .c.crit{color:var(--crit)} .sites .cnts .c.crit::before{background:var(--f-low)} .sites .cnts .c.down::before{background:var(--f-down)}
.sites .cnts .c.warn{color:var(--warn)} .sites .cnts .c.warn::before{background:var(--f-warn)}
.sites .cnts .c.ok{color:var(--muted)}
.sites a{color:inherit} .sites a:hover{text-decoration:none;color:var(--primary)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;font-size:13px}
.facts .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.facts .v{margin-top:2px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note{padding:10px 14px;border-radius:var(--r-2);font-size:13px;display:flex;gap:10px;align-items:flex-start}
.note .ic{width:16px;height:16px;flex:none;margin-top:2px}
.note.crit{background:var(--crit-soft);color:var(--crit)} .note.warn{background:var(--warn-soft);color:var(--warn)} .note.info{background:var(--accent-soft);color:var(--brand)}
:root[data-theme="dark"] .note.info{color:var(--accent)}

/* printer page */
.sups{display:flex;flex-direction:column;gap:12px}
.sups .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sups .row:last-child{border-bottom:0}
.sups .meta{grid-column:1/3;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.sups .meta b{color:var(--ink);font-weight:500}
.fc{color:var(--muted)} .fc.warn{color:var(--warn);font-weight:600} .fc.crit{color:var(--crit);font-weight:600}
#chart svg{width:100%;height:auto;display:block}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:12px;color:var(--ink-2)}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* orders */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.shop .it{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface-2)}
.shop .it .qty{font-weight:600;font-variant-numeric:tabular-nums;width:28px;text-align:right}
.shop .it .code{font-family:var(--mono);font-size:12.5px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.shop .it .sw{width:10px;height:10px;border-radius:3px;flex:none;background:var(--c)}

/* events */
.ev{list-style:none;margin:0;padding:0}
.ev li{display:grid;grid-template-columns:150px auto minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:start}
.ev li:last-child{border-bottom:0}
.ev .t{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12.5px}
.ev .d .k{font-weight:600} .ev .d .s{color:var(--muted);font-size:12px}

/* settings */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px}
.tabs button{border:0;background:none;padding:9px 12px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:0}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--primary)}
.frm{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2);margin-top:14px}
.tokbox{margin:12px 0 0;padding:12px 14px;border:1px dashed var(--primary);border-radius:var(--r-2);background:var(--accent-soft);font-family:var(--mono);font-size:12.5px;word-break:break-all;color:var(--ink)}
.tokbox .h{font-family:var(--font);font-size:12px;color:var(--muted);margin-top:6px}
.hint{font-size:12.5px;color:var(--muted);margin:0 0 12px;max-width:80ch}

/* dialogs & toasts */
dialog.dlg{border:0;border-radius:var(--r-3);padding:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3);width:min(440px,calc(100vw - 32px))}
dialog.dlg::backdrop{background:rgba(12,26,38,.5)}
dialog.dlg[open]{animation:dlgin var(--t-base) var(--ease-out)}
@keyframes dlgin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.dlg .in{padding:18px 20px}
.dlg h3{margin:0 0 6px;font-size:16px}
.dlg p{margin:0 0 14px;color:var(--ink-2);font-size:13.5px}
.dlg .acts{display:flex;justify-content:flex-end;gap:8px}
.toasts{position:fixed;bottom:18px;right:18px;z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:var(--brand);color:#fff;padding:10px 14px;border-radius:var(--r-2);font-size:13px;box-shadow:var(--shadow-2);display:flex;gap:10px;align-items:center;animation:toastin var(--t-base) var(--ease-out);max-width:min(420px,calc(100vw - 36px))}
:root[data-theme="dark"] .toast{background:var(--surface-2);border:1px solid var(--line)}
.toast.err{background:var(--crit)}
.toast .ic{width:16px;height:16px;flex:none}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.out{animation:toastout 160ms ease-in forwards}
@keyframes toastout{to{opacity:0;transform:translateY(6px)}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:920px){
  .app{grid-template-columns:minmax(0,1fr)}
  #live{display:none}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);z-index:40;transform:translateX(-100%);transition:transform var(--t-slow) var(--ease-out);box-shadow:none}
  .side.open{transform:none;box-shadow:var(--shadow-3)}
  .scrim{position:fixed;inset:0;background:rgba(12,26,38,.45);z-index:39;display:none}
  .scrim.on{display:block}
  .top{grid-column:1;padding:0 10px;gap:8px;min-width:0;overflow:hidden}
  .top .menu{display:inline-flex}
  .crumbs{display:none}
  .gsearch{flex:1 1 120px;width:auto;min-width:0}
  .gsearch kbd{display:none}
  .user .nm,.user .rl{display:none}
  main{grid-column:1;padding:14px 12px 80px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:10.5px;font-weight:500;color:var(--muted);border-radius:8px;text-decoration:none}
  .tabbar a .ic{width:20px;height:20px}
  .tabbar a.on{color:var(--primary)}
  .tabbar a:hover{text-decoration:none}
  .tbl.cards{overflow:visible;border:0;background:transparent;box-shadow:none}
  .tbl.cards thead{display:none}
  .tbl.cards table,.tbl.cards tbody{display:block}
  .tbl.cards tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:10px 12px;margin:0 0 8px;box-shadow:var(--shadow-1)}
  .tbl.cards tbody td{display:block;border:0;padding:1px 0}
  .tbl.cards td.c-status{order:1} .tbl.cards td.c-site{order:2;flex:1;font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tbl.cards td.c-upd{order:3;text-align:right} .tbl.cards td.c-name{order:4;flex:1 1 100%;padding-top:4px}
  .tbl.cards td.c-ip{order:5;font-size:12px} .tbl.cards td.c-sup{order:6;flex:1 1 100%;padding-top:4px}
  .tbl.cards td.c-order{order:7;flex:1 1 100%} .tbl.cards td.c-pages{order:8;font-size:12px;color:var(--muted);text-align:left;padding-top:4px}
  .tbl.cards td.c-pages::before{content:"Strany: "}
  .tbl.cards td.c-sup::before,.tbl.cards td.c-order::before{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 0 1px}
  .tbl.cards td.c-sup::before{content:attr(data-l)} .tbl.cards td.c-order::before{content:"Objednať"}
  .tbl.cards td:has(> .nodata){display:none}
  .att li{grid-template-columns:10px minmax(0,1fr)} .att .what{grid-column:2;text-align:left}
  .sites li{grid-template-columns:auto minmax(0,1fr)} .sites .cnts{grid-column:2;justify-content:flex-start}
  .ev li{grid-template-columns:1fr} .ev .t{font-size:11.5px}
}
@media (max-width:560px){
  /* phone: page actions become an even grid instead of a ragged wrap */
  .ph{flex-direction:column;align-items:stretch;gap:12px}
  .ph .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ph .acts .btn{justify-content:center;white-space:normal;text-align:center}
  .ph .acts .btn.pri:last-child:nth-child(odd){grid-column:1/-1}
  .ph .acts .seg{grid-column:1/-1;justify-content:center}
  .ph .acts .input{grid-column:1/-1;min-width:0}
  .toolbar .seg{width:100%;flex-wrap:wrap}
  .toolbar .seg button{flex:1 1 auto}
  .toolbar .input{flex:1 1 100%;min-width:0}
  .strip{height:8px}
  .legend{font-size:12px;gap:4px 12px}
  /* printer detail: code and forecast go under the bar instead of squeezing the percentage */
  .sups .row{grid-template-columns:minmax(0,1fr);gap:6px 0}
  .sups .meta{grid-column:1}
  .sup.big{gap:10px}
  .sup.big .l{width:auto;flex:0 1 42%;min-width:0}
  .sup.big .p{width:auto;min-width:40px}
  /* tables become compact rows: title and time on top, facts below, actions last */
  .tbl.stack thead{display:none}
  .tbl.stack table,.tbl.stack tbody{display:block}
  .tbl.stack tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;padding:11px 14px;border-bottom:1px solid var(--line)}
  .tbl.stack tbody tr:last-child{border-bottom:0}
  .tbl.stack tbody tr::after{content:"";order:2;flex-basis:100%}
  .tbl.stack tbody td{display:block;padding:0;border:0;min-width:0;max-width:none;text-align:left}
  .tbl.stack td.k-main{order:1;flex:1 1 0}
  .tbl.stack td.k-strong{font-weight:600}
  .tbl.stack td.k-side{order:2;flex:none;margin-left:auto;text-align:right;white-space:nowrap}
  .tbl.stack td.k-full{order:3;flex-basis:100%}
  .tbl.stack td.k-meta{order:4;font-size:12px;color:var(--muted)}
  .tbl.stack td.k-meta .mono{color:var(--ink)}
  .tbl.stack td[data-l]::before{content:attr(data-l) ": ";font-family:var(--font)}
  .tbl.stack td.k-tail{order:5;margin-left:auto;display:flex;gap:6px}
  .tbl.stack td.k-note{order:6;flex-basis:100%;font-size:12.5px;color:var(--ink-2)}
  .tbl.stack td.k-act{order:7;flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;padding-top:6px}
  .tbl.stack td.k-empty{display:none}
  #psize{display:none}
}
@media (min-width:921px){ .tabbar,.scrim{display:none!important} }
@media print{ .side,.top,.tabbar,.toasts,.pager,.btn{display:none!important} main{padding:0} .app{display:block} }