/* UI font: Iranian Sans, served locally from /public/fonts (no CDN). */
@font-face {
  font-family: "Iranian Sans";
  src: url("/fonts/IranianSans.woff") format("woff"), url("/fonts/IranianSans.ttf") format("truetype");
  font-weight: 100 900; font-display: swap;
  /* This font draws 0-9 as Persian digits; leave digits (Latin and Persian) to the fallback font so numbers stay English. */
  unicode-range: U+0000-002F, U+003A-065F, U+066A-06EF, U+06FA-FFFF;
}

/* ---------- theme tokens: light (default), dark via [data-theme=dark] or the OS setting ---------- */
:root {
  color-scheme: light;
  --bg: #f4f6f8; --panel: #fff; --panel-2: #f7f9fb; --text: #1d2733; --muted: #66727f; --line: #dde3e9; --line-strong: #c3cfdc;
  --hover: #f0f4f8; --row-hover: #fafcff; --sel-bg: #eef4ff; --input-bg: #fff; --th-ink: #3c4855;
  --primary: #1f6feb; --primary-fill: #1f6feb; --primary-ink: #fff; --danger: #c62828; --warn: #995a00; --ok: #2e7d32;
  --ok-bg: #e6f5e9; --warn-bg: #fff3dc; --err-bg: #fdecec; --info-bg: #eaf2ff; --info-ink: #1f4fbf;
  --ok-line: #bfe3c6; --warn-line: #f0dcb4; --err-line: #f3c6c6;
  --purple-bg: #efe7fb; --purple-ink: #5b2ca0; --teal-bg: #e0f4f4; --teal-ink: #0f6b6b; --bar: #cfe0ff;
  --chip: #eef2f6; --mono: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  --fa: "Iranian Sans", Tahoma, "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1319; --panel: #161d25; --panel-2: #1b232d; --text: #e2e8ef; --muted: #93a1b0; --line: #283340; --line-strong: #3b4957;
  --hover: #212b36; --row-hover: #1b2430; --sel-bg: #1b2f4d; --input-bg: #10171e; --th-ink: #c4cfda;
  --primary: #4b8df8; --primary-fill: #2563d0; --primary-ink: #fff; --danger: #f07171; --warn: #e6a748; --ok: #5ec46c;
  --ok-bg: #16301f; --warn-bg: #352812; --err-bg: #3a1c1f; --info-bg: #172a45; --info-ink: #93bbff;
  --ok-line: #2b5a36; --warn-line: #5e4520; --err-line: #66313a;
  --purple-bg: #2a2040; --purple-ink: #c5a8f7; --teal-bg: #10302f; --teal-ink: #72d6d2; --bar: #2d4c7d;
  --chip: #232e3a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1319; --panel: #161d25; --panel-2: #1b232d; --text: #e2e8ef; --muted: #93a1b0; --line: #283340; --line-strong: #3b4957;
    --hover: #212b36; --row-hover: #1b2430; --sel-bg: #1b2f4d; --input-bg: #10171e; --th-ink: #c4cfda;
    --primary: #4b8df8; --primary-fill: #2563d0; --primary-ink: #fff; --danger: #f07171; --warn: #e6a748; --ok: #5ec46c;
    --ok-bg: #16301f; --warn-bg: #352812; --err-bg: #3a1c1f; --info-bg: #172a45; --info-ink: #93bbff;
    --ok-line: #2b5a36; --warn-line: #5e4520; --err-line: #66313a;
    --purple-bg: #2a2040; --purple-ink: #c5a8f7; --teal-bg: #10302f; --teal-ink: #72d6d2; --bar: #2d4c7d;
    --chip: #232e3a;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--fa); font-size: 14px; line-height: 1.6; }
body { -webkit-tap-highlight-color: rgba(31, 111, 235, .15); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 12px 0 6px; }

/* ---------- app shell: sidebar (desktop) / drawer (phone) + slim top bar ---------- */
:root { --side-w: 252px; --side-bg: #111a24; --side-ink: #b8c4d1; --side-hover: #1c2836; --side-line: #233142; }
.ic { flex: none; display: block; }
.skip { position: absolute; top: -60px; inset-inline-start: 12px; z-index: 400; padding: 8px 14px; border-radius: 8px; background: var(--primary-fill); color: #fff; }
.skip:focus { top: 10px; }
.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; width: var(--side-w);
  display: flex; flex-direction: column; background: var(--side-bg); color: var(--side-ink);
  padding: max(14px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); padding-inline-start: max(10px, env(safe-area-inset-right));
  border-inline-end: 1px solid var(--side-line);
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: #fff; font-weight: 700; font-size: 13px; line-height: 1.5; }
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand img { height: 28px; width: auto; background: #fff; border-radius: 6px; padding: 3px 5px; }
#nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2b3a4c transparent; margin-inline: -4px; padding-inline: 4px; }
#nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 9px; color: var(--side-ink); font-size: 14px; transition: background .12s, color .12s; }
#nav a .ic { opacity: .8; }
#nav a:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
#nav a:focus-visible { outline: 2px solid #4b8df8; outline-offset: -2px; }
/* containers focused from script (page change, dialogs) need no ring; real controls keep theirs */
#app:focus, dialog:focus { outline: none; }
#nav a.active { background: #1d3150; color: #fff; font-weight: 600; }
#nav a.active .ic { opacity: 1; color: #7fb0ff; }
#nav a.active::before { content: ''; position: absolute; inset-inline-start: -4px; inset-block: 8px; width: 3px; border-radius: 3px; background: #4b8df8; }
#nav .nbadge { margin-inline-start: auto; }
.nav-label { padding: 16px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #8394a8; }
.side-foot { display: flex; align-items: center; gap: 8px; padding: 12px 6px 2px; margin-top: 8px; border-top: 1px solid var(--side-line); }
.who-box { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2a78d6, #5b2ca0); color: #fff; font-weight: 700; font-family: Tahoma, sans-serif; }
.who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.who strong { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { font-size: 11px; color: #8394a8; }
.side-actions { display: flex; gap: 2px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 9px; background: none; color: inherit; cursor: pointer; }
.sidebar .icon-btn:hover { background: var(--side-hover); color: #fff; }
.icon-btn:focus-visible { outline: 2px solid #4b8df8; outline-offset: 1px; }
.backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(8, 13, 19, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .icon-btn { color: var(--muted); }
.topbar .icon-btn:hover { background: var(--hover); color: var(--text); }
.menu-btn, .brand-mini { display: none; }
.brand-mini img { display: block; height: 26px; width: auto; background: #fff; border-radius: 6px; padding: 3px 5px; border: 1px solid var(--line); }
.cmd-trigger {
  display: flex; align-items: center; gap: 10px; flex: 0 1 460px; min-width: 0; min-height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 13px; cursor: text;
  box-shadow: 0 1px 2px rgba(20, 32, 46, .04); transition: border-color .15s, box-shadow .15s;
}
.cmd-trigger:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(20, 32, 46, .07); }
.cmd-ph { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }
kbd { display: inline-block; padding: 0 6px; min-width: 20px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--panel-2); color: var(--muted); font: 11px/18px var(--mono); text-align: center; direction: ltr; white-space: nowrap; }

@media (min-width: 1100px) {
  body.has-shell { padding-inline-start: var(--side-w); }
}
@media screen and (max-width: 1099px) {
  .menu-btn, .brand-mini { display: inline-grid; }
  .brand-mini { display: block; }
  .sidebar { transform: translateX(105%); transition: transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s .22s; visibility: hidden; box-shadow: none; width: min(300px, 86vw); }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .7, .2, 1); box-shadow: -12px 0 40px rgba(0, 0, 0, .35); }
  body.nav-open { overflow: hidden; }
  #nav a { padding: 11px 12px; font-size: 15px; }
  .topbar { padding-inline: max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-left)); }
  .cmd-trigger { flex: 1 1 auto; }
}
@media screen and (max-width: 560px) {
  .cmd-trigger kbd { display: none; }
  #helpBtn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, body.nav-open .sidebar { transition: none; } }

main {
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  max-width: 1400px; margin: 0 auto;
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.grid > * { min-width: 0; }
.panel { overflow-x: auto; }
.desc { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; align-items: center; }
.desc .v { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.desc .name { white-space: normal; overflow-wrap: anywhere; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.ltr, code, .code { direction: ltr; unicode-bidi: isolate; font-family: var(--mono); }
.ltr .fa { direction: rtl; display: block; font-family: var(--fa); text-align: right; }
.name { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.bigname { font-size: 26px; }
pre.code { background: #0f1720; color: #d7e2ee; padding: 10px 12px; border-radius: 8px; text-align: left; white-space: pre-wrap; margin: 4px 0; }

label.f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); min-width: 120px; }
label.f.wide { flex: 1 1 260px; }
input, select, textarea, button { font: inherit; }
input, select, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--input-bg); color: var(--text); min-height: 32px; max-width: 100%; }
/* same-looking select on Safari/iOS (no glossy native style), arrow on the left for RTL */
select {
  -webkit-appearance: none; appearance: none; padding-left: 26px;
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2366727f'/%3E%3C/svg%3E") no-repeat left 9px center;
}
select:disabled { background-color: var(--bg); color: var(--muted); }
input[type=checkbox], input[type=radio] { min-height: 0; width: 16px; height: 16px; accent-color: var(--primary); vertical-align: middle; }
input.code, input.ltr, textarea.code { text-align: left; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9cc0ff; border-color: var(--primary); }
.err-field input, .err-field select { border-color: var(--danger); }
.fielderr { color: var(--danger); font-size: 11px; }
.fields { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.row.nowrap { flex-wrap: nowrap; gap: 4px; }
.locpath { flex-basis: 100%; font-size: 12px; color: var(--muted); min-height: 18px; }

.locgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: start; }
.loccol { margin-bottom: 0; }
ul.loclist { list-style: none; margin: 8px 0 0; padding: 0; max-height: 65vh; overflow: auto; }
ul.loclist li { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; padding: 6px 8px; }
ul.loclist li.active { border-color: var(--primary); background: var(--sel-bg); }
.locitem { display: flex; gap: 8px; align-items: baseline; color: var(--text); }
a.locitem:hover { text-decoration: none; }
a.locitem:hover .lname { color: var(--primary); }
.locitem .name { min-width: 36px; }
.locitem .lname { flex: 1; }
.locmeta { display: flex; gap: 6px; align-items: center; margin-top: 2px; flex-wrap: wrap; }

button, .btn { border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 5px 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
button:hover, .btn:hover { background: var(--hover); text-decoration: none; }
button.primary, .btn.primary { background: var(--primary-fill); color: var(--primary-ink); border-color: var(--primary-fill); }
button.primary:hover { background: #1a5fd0; }
button.danger { color: var(--danger); border-color: var(--err-line); }
button.link { background: none; border: 0; color: var(--primary); padding: 0 4px; min-height: 0; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.copy { font-size: 12px; padding: 2px 8px; min-height: 24px; }

table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: right; vertical-align: top; }
th { background: var(--panel-2); font-weight: 700; font-size: 12px; color: var(--th-ink); position: sticky; top: 0; white-space: nowrap; }
th.sort { cursor: pointer; user-select: none; }
th.sort:hover { background: var(--hover); }
.th-btn { all: unset; cursor: pointer; white-space: nowrap; border-radius: 4px; }
.th-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
tr:hover td { background: var(--row-hover); }
td.num { text-align: center; }
td.ltr, td .ltr { white-space: nowrap; }
.tablewrap { overflow: auto; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); border: 1px solid var(--line); border-radius: 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }

.badge { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 12px; background: var(--chip); white-space: nowrap; }
.badge.Active { background: var(--ok-bg); color: var(--ok); }
.badge.Spare { background: var(--info-bg); color: var(--info-ink); }
.badge.Repair { background: var(--warn-bg); color: var(--warn); }
.badge.Retired { background: var(--chip); color: var(--muted); text-decoration: line-through; }
.badge.kept { background: var(--ok-bg); color: var(--ok); }
.badge.reserved { background: var(--warn-bg); color: var(--warn); font-size: 11px; }
.badge.fixed { background: var(--purple-bg); color: var(--purple-ink); }
.badge.mobile { background: var(--teal-bg); color: var(--teal-ink); }
.badge.overdue { background: var(--err-bg); color: var(--danger); font-weight: 700; }

.msg { padding: 8px 12px; border-radius: 8px; margin: 6px 0; }
.msg.err { background: var(--err-bg); color: var(--danger); }
.msg.warn { background: var(--warn-bg); color: var(--warn); }
.msg.ok { background: var(--ok-bg); color: var(--ok); }
.msg.info { background: var(--info-bg); color: var(--info-ink); }
ul.errs { margin: 0; padding-inline-start: 18px; }

.preview { font-size: 28px; padding: 12px; border: 2px dashed var(--line); border-radius: 10px; text-align: center; background: var(--panel-2); }
.preview.ok { border-color: var(--ok); }
.preview.bad { border-color: var(--danger); color: var(--danger); }

.decode td:first-child { color: var(--muted); width: 110px; }
.decode tr.bad td { background: var(--err-bg); }
.part-chips { display: flex; gap: 4px; justify-content: center; direction: ltr; font-family: var(--mono); font-size: 20px; margin: 8px 0; flex-wrap: wrap; }
.part-chips span { padding: 2px 8px; border-radius: 6px; background: var(--chip); }
.part-chips span.bad { background: var(--err-bg); color: var(--danger); }

.check { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.check input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin-top: 2px; }
.check.done .title { text-decoration: line-through; color: var(--muted); }
.check .body { flex: 1; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.tabs a { padding: 6px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--text); }
.tabs a.active { background: var(--panel); border-color: var(--line); font-weight: 700; }

.toasts { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 10px 8px 10px 14px; padding-inline: 14px 8px;
  border-radius: 12px; background: #172230; color: #eef3f8; box-shadow: 0 10px 30px rgba(10, 18, 28, .28); border: 1px solid #2a394b;
  animation: toast-in .22s cubic-bezier(.2, .8, .2, 1);
}
.toast > .ic { color: #6fd08a; }
.toast.err { background: #3a1519; border-color: #6b2a31; }
.toast.err > .ic { color: #ff8b8b; }
.toast > span { flex: 1; }
.toast-x { min-height: 0; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: inherit; opacity: .6; }
.toast-x:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- command palette ---------- */
dialog.palette { width: min(640px, calc(100vw - 24px)); max-width: none; margin-top: min(12vh, 110px); padding: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 24px 70px rgba(5, 12, 20, .4); }
dialog.palette::backdrop, dialog.shortcuts::backdrop { background: rgba(8, 14, 22, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pal-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pal-input { flex: 1; min-width: 0; border: 0 !important; outline: none !important; background: none !important; box-shadow: none !important; font-size: 16px; padding: 4px 0; color: var(--text); min-height: 36px; }
.pal-input::-webkit-search-cancel-button { display: none; }
.pal-list { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.pal-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.pal-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); text-align: start; font-size: 14px; cursor: pointer; }
.pal-item.on { background: var(--sel-bg); }
.pal-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--chip); color: var(--muted); }
.pal-ic.device { background: var(--info-bg); color: var(--info-ink); }
.pal-item.on .pal-ic { color: var(--primary); }
.pal-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.pal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-hint { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; font-family: var(--mono); }
.pal-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; text-align: center; color: var(--text); }
.pal-empty .ic { color: var(--muted); opacity: .6; }
.pal-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--panel-2); }
.pal-foot kbd { margin-inline-end: 3px; }
dialog.shortcuts { max-width: 480px; border-radius: 14px; }
.dlg-title { display: flex; align-items: center; gap: 10px; }
dl.keys { margin: 0 0 8px; display: flex; flex-direction: column; }
dl.keys > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
dl.keys dt { display: flex; gap: 4px; align-items: center; order: 2; }
dl.keys dd { margin: 0; }
@media screen and (max-width: 760px) {
  dialog.palette { margin-top: max(10px, env(safe-area-inset-top)); width: calc(100vw - 16px); }
  .pal-foot { display: none; }
  .pal-item { padding: 10px; }
  .toasts { left: 10px; right: 10px; align-items: stretch; }
  .toast { max-width: none; }
}
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); color: var(--text); max-width: 760px; width: 95vw; }
dialog::backdrop { background: rgba(10, 20, 30, .4); }

/* ---------- Shamsi date field + calendar ---------- */
.jdate-box { position: relative; display: flex; gap: 4px; align-items: stretch; }
.jdate-input { flex: 1; min-width: 0; width: 120px; text-align: center !important; letter-spacing: .5px; }
.jdate-input.bad { border-color: var(--danger); background: var(--err-bg); }
.jdate-btn { min-height: 0; padding: 0 8px; font-size: 15px; line-height: 1; }
.jdate { white-space: nowrap; }
.jpicker {
  position: fixed; z-index: 450; top: 0; left: 0; width: 264px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 28px rgba(20, 32, 46, .18); color: var(--text); font-size: 13px;
}
.jp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.jp-title { flex: 1; display: flex; gap: 4px; }
.jp-title select { flex: 1; min-height: 30px; padding-top: 2px; padding-bottom: 2px; font-size: 13px; }
.jp-title input { width: 62px; min-height: 30px; padding: 2px 4px; text-align: center; font-size: 13px; }
.jp-nav { min-height: 30px; width: 30px; padding: 0; justify-content: center; font-size: 18px; }
.jp-week, .jp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.jp-week span { color: var(--muted); font-size: 11px; padding: 2px 0; }
.jp-day { min-height: 32px; padding: 0; justify-content: center; border: 0; border-radius: 8px; background: none; font-family: Tahoma, sans-serif; font-size: 13px; }
.jp-day:hover { background: var(--sel-bg); }
.jp-day.today { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.jp-day.sel { background: var(--primary-fill); color: #fff; }
.jp-grid > :nth-child(7n) { color: var(--danger); } /* Friday */
.jp-day.sel:nth-child(7n) { color: #fff; }
.jp-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.jp-foot button { min-height: 30px; font-size: 12px; padding: 2px 10px; }
@media screen and (max-width: 760px), screen and (pointer: coarse) {
  .jpicker { width: min(300px, calc(100vw - 32px)); }
  .jp-day { min-height: 38px; font-size: 15px; }
  .jdate-btn { min-height: 42px; padding: 0 12px; }
}

/* ---------- report charts (palette validated for #fff and the dark panel #161d25) ---------- */
:root {
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-other: #b9bec6;
  --st-good: #0ca30c; --st-warning: #fab219; --st-serious: #ec835a; --st-critical: #d03b3b;
  --viz-grid: #e6e9ee; --viz-axis: #c3cad3; --viz-ink: #52514e;
}
:root[data-theme="dark"] { --viz-1: #3987e5; --viz-2: #d95926; --viz-other: #4a5563; --viz-grid: #26313c; --viz-axis: #3a4856; --viz-ink: #c3c2b7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --viz-1: #3987e5; --viz-2: #d95926; --viz-other: #4a5563; --viz-grid: #26313c; --viz-axis: #3a4856; --viz-ink: #c3c2b7; }
}
.report-head { align-items: center; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; position: relative; overflow: hidden; }
a.kpi:hover { text-decoration: none; border-color: var(--line-strong); }
.kpi::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--viz-1); }
.kpi.good::before { background: var(--st-good); }
.kpi.warn::before { background: var(--st-warning); }
.kpi.bad::before { background: var(--st-critical); }
.kpi-v { font-size: 30px; font-weight: 700; line-height: 1.15; font-family: Tahoma, "Segoe UI", sans-serif; }
.kpi-l { font-size: 13px; font-weight: 700; }
.kpi-s { font-size: 12px; color: var(--muted); }
.viz-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); margin-bottom: 16px; align-items: start; }
.viz-grid .panel { margin: 0; }
.hbars { display: flex; flex-direction: column; gap: 6px; }
.hb-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 40px; gap: 10px; align-items: center; border-radius: 6px; padding: 2px 4px; }
.hb-row:hover, .hb-row:focus-visible { background: var(--row-hover); outline: none; }
.hb-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-code { color: var(--muted); font-size: 12px; }
.hb-track { height: 12px; display: flex; }
.hb-bar, .hb-stack { height: 100%; border-radius: 4px 0 0 4px; display: flex; gap: 2px; overflow: hidden; }
.hb-seg { height: 100%; }
.hb-seg:focus-visible { outline: 2px solid var(--text); }
.hb-val { font-size: 13px; font-weight: 700; text-align: left; font-family: Tahoma, sans-serif; }
.stack { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; margin: 6px 0 10px; }
.st-seg { height: 100%; }
.st-seg:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.legend { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend strong { font-family: Tahoma, sans-serif; }
svg.columns { width: 100%; height: auto; display: block; overflow: visible; }
svg.columns .grid { stroke: var(--viz-grid); stroke-width: 1; }
svg.columns .axis { stroke: var(--viz-axis); stroke-width: 1; }
svg.columns .tick, svg.columns .xlab { fill: var(--muted); font-size: 11px; font-family: var(--fa); }
svg.columns .xlab.yr { font-size: 10px; }
svg.columns .vlab { fill: var(--viz-ink); font-size: 11px; font-weight: 700; font-family: Tahoma, sans-serif; }
svg.columns .hit { fill: transparent; }
svg.columns .col:hover .hit, svg.columns .col:focus .hit { fill: var(--row-hover); }
svg.columns .col { outline: none; }
.viz-table { margin-top: 8px; font-size: 13px; }
.viz-table summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.viz-table table { margin-top: 6px; }
.viz-tip { position: fixed; z-index: 200; pointer-events: none; background: #14202e; color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.6; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: 260px; }
:root[data-theme="dark"] .viz-tip { background: #e2e8ef; color: #0e1319; }
@media print {
  .kpis { grid-template-columns: repeat(3, 1fr); padding: 0 8mm; }
  .viz-grid { grid-template-columns: 1fr 1fr; padding: 0 8mm; }
  .viz-table, .viz-tip { display: none !important; }
  .report-head { padding: 8mm 8mm 0; }
}

/* ---------- loading bar ---------- */
.loadbar { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 300; overflow: hidden; background: transparent; }
.loadbar::after { content: ''; position: absolute; inset-block: 0; width: 35%; background: var(--primary-fill); border-radius: 3px; animation: loadbar 1s ease-in-out infinite; }
@keyframes loadbar { 0% { right: -35%; } 100% { right: 100%; } }
@media (prefers-reduced-motion: reduce) { .loadbar::after { animation: none; width: 100%; opacity: .6; } }


/* ---------- home ---------- */
.home-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.home-head h1 { margin: 0 0 2px; }
.home-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.home-stats a { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); }
.home-stats a:hover { text-decoration: none; border-color: var(--line-strong); }
.home-stats strong { font-size: 22px; font-family: Tahoma, sans-serif; }
.home-stats span { font-size: 12px; color: var(--muted); }
.home-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: start; }
ul.queue, ul.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.q-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--panel); border-inline-start: 4px solid var(--viz-1); }
.q-item:hover { text-decoration: none; background: var(--row-hover); }
.q-item.bad { border-inline-start-color: var(--st-critical); }
.q-item.warn { border-inline-start-color: var(--st-warning); }
.q-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--info-bg); color: var(--info-ink); }
.q-item.bad .q-icon { background: var(--err-bg); color: var(--danger); }
.q-item.warn .q-icon { background: var(--warn-bg); color: var(--warn); }
.q-text { flex: 1; display: flex; flex-direction: column; }
.q-n { font-size: 20px; font-weight: 700; font-family: Tahoma, sans-serif; min-width: 36px; text-align: center; }
.q-item.bad .q-n { color: var(--danger); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; text-align: center; }
.empty-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--chip); color: var(--muted); margin-bottom: 6px; }
.empty-ic.ok { background: var(--ok-bg); color: var(--ok); }
.actions-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; transition: border-color .15s, background .15s, transform .15s; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); font-size: 13px; text-align: center; }
.action .ic { color: var(--primary); }
.action.primary .ic { color: #fff; }
.action:hover { text-decoration: none; border-color: var(--primary); background: var(--sel-bg); }
.action.primary { background: var(--primary-fill); color: #fff; border-color: var(--primary-fill); }
.action.primary:hover { background: #1a5fd0; }

ul.recent li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
ul.recent li:last-child { border-bottom: 0; }

/* ---------- device list ---------- */
tr.rowlink { cursor: pointer; }
.mobile-only { display: none; }
.sortsel { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.sortsel select { min-height: 32px; }

/* ---------- new-device form ---------- */
h3.step { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 15px; }
h3.step > span:first-child { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-fill); color: #fff; font-size: 13px; font-family: Tahoma, sans-serif; flex: none; }
.type-tiles { display: flex; flex-direction: column; gap: 10px; }
.tile-gt { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tiles { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tile { flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 6px; border-radius: 10px; background: var(--panel-2); text-align: center; }
.tile-code { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.tile-name { font-size: 12px; color: var(--muted); line-height: 1.3; }
.tile:hover { border-color: var(--primary); background: var(--sel-bg); }
.tile.on { border-color: var(--primary); background: var(--primary-fill); color: #fff; box-shadow: 0 0 0 3px var(--sel-bg); }
.tile.on .tile-name { color: #e8f0ff; }
.fgroup { margin: 4px 0 12px; }
.fgroup h4 { margin: 8px 0 6px; font-size: 13px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fgroup h4::after { content: ''; flex: 1; border-bottom: 1px dashed var(--line); }
.stickybar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px -16px -16px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: 0 -6px 16px rgba(0, 0, 0, .06); }
.sb-label { color: var(--muted); font-size: 13px; }
#sbname { font-size: 16px; }
#sbname.ok { color: var(--ok); }
#sbname.bad { color: var(--danger); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .55; }

/* ---------- device page section chips ---------- */
.secnav { position: sticky; top: var(--topbar-h, 52px); z-index: 12; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin: -6px 0 10px; background: var(--bg); scrollbar-width: none; }
.secnav::-webkit-scrollbar { display: none; }
.secnav a { flex: none; padding: 4px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); font-size: 13px; }
.secnav a:hover { text-decoration: none; border-color: var(--primary); }
.panel[id] { scroll-margin-top: calc(var(--topbar-h, 52px) + 52px); }

/* ---------- toolbars, search, compact buttons ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.toolbar.actions { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
button.sm, .btn.sm { min-height: 30px; padding: 3px 12px; font-size: 13px; border-radius: 8px; }
.filters { padding-bottom: 6px; }
.filters details.fold { margin: 10px 0 4px; background: transparent; }
.searchrow { display: flex; gap: 8px; }
.searchrow input { flex: 1; min-width: 0; font-size: 15px; min-height: 40px; border-radius: 8px; padding-inline: 12px; }
.searchrow button { min-width: 96px; justify-content: center; border-radius: 8px; }
.checkline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); min-height: 32px; cursor: pointer; }
dl.kv { grid-template-columns: minmax(110px, max-content) 1fr; }
.panel > h2:first-child { letter-spacing: -.1px; }
@media screen and (max-width: 760px), screen and (pointer: coarse) {
  button.sm, .btn.sm { min-height: 40px; padding: 6px 12px; }
  .toolbar .sm { flex: 1 1 auto; justify-content: center; }
  .searchrow input { min-height: 44px; font-size: 16px; }
}

/* ---------- collapsible panels ---------- */
.panel.foldable > h2:first-child { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; border-radius: 6px; }
.panel.foldable > h2:first-child::before { content: '▾'; color: var(--muted); font-size: 13px; transition: transform .15s; }
.panel.foldable > h2:first-child:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.panel.collapsed { padding-top: 12px; padding-bottom: 12px; }
.panel.collapsed > h2:first-child { margin: 0; }
.panel.collapsed > h2:first-child::before { transform: rotate(90deg); }
.panel.collapsed > :not(h2:first-child) { display: none !important; }
details.fold { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--panel-2); }
details.fold[open] { padding-bottom: 12px; }
details.fold > summary { cursor: pointer; padding: 10px 0; font-weight: 700; list-style: none; display: flex; gap: 8px; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '▾'; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
details.fold[open] > summary::before { transform: none; }

/* menu badge (inspections due) */
.nbadge { display: inline-block; min-width: 20px; padding: 0 6px; margin-inline-start: 4px; border-radius: 10px; background: #e6a748; color: #14202e; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; font-family: Tahoma, sans-serif; }
.nbadge.red { background: #f07171; color: #fff; }

/* inspection checklist */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 4px 16px; margin: 8px 0; }
.checkrow { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.checkrow:has(input:not(:checked)) { border-color: var(--err-line); background: var(--err-bg); }
strong.neg { color: var(--danger); }
a.stat { text-decoration: none; }
a.stat:hover { border-color: var(--line-strong); }
.print-only { display: none; }
dl.kv.specs dd .ltr { white-space: normal; }

/* printable minutes (always paper-white) */
.minutes { background: #fff; color: #111; max-width: 190mm; margin: 0 auto; padding: 14mm 12mm; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.min-head { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid #2e3192; padding-bottom: 10px; margin-bottom: 14px; }
.min-head h1 { margin: 0; font-size: 20px; color: #2e3192; }
.min-head > div:nth-child(2) { flex: 1; }
.min-no { font-size: 12px; text-align: left; }
.min-table { width: 100%; border: 1px solid #ccc; margin: 8px 0 12px; background: #fff; }
.min-table th, .min-table td { border: 1px solid #ccc; padding: 6px 10px; color: #111; background: #fff; position: static; }
.min-table th { width: 32%; background: #f3f5f8; }
.min-desc { border: 1px solid #ccc; border-radius: 4px; padding: 10px 12px; min-height: 30mm; line-height: 1.9; }
.min-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 12px; text-align: center; }
.min-sign > div { display: flex; flex-direction: column; gap: 6px; }
.min-sign .line { border-bottom: 1px dotted #555; min-height: 18mm; display: flex; align-items: flex-end; justify-content: center; }
.minutes footer { border-top: 1px solid #ddd; padding-top: 6px; color: #666; }
/* label sheet is paper too */
.sheet { color: #111; }

.cli-inline { margin: 12px 0 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cli-inline h3 { margin-top: 0; }
.cli-inline .grid { gap: 8px; }

/* ---------- login (hotspot style) ---------- */
:root { --brand-blue: #2e3192; --brand-red: #ed1c24; }
body.login-page { background: #fff; }
body.login-page main { max-width: none; padding: 0; }
.login-wrap {
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.pg-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-box { position: relative; z-index: 1; width: 100%; max-width: 440px; text-align: center; margin-top: 2vh; }
.login-logo { display: block; width: 150px; height: auto; margin: 0 auto 4px; }
.login-title { font-size: 17px; font-weight: 700; color: #14202e; margin: 0 0 6px; }
.login-hint { color: #8a6d3b; font-size: 13px; margin: 0 0 16px; }
.login-panel { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); text-align: right; }
.login-head { background: #f5f5f5; border-bottom: 1px solid #ddd; border-radius: 6px 6px 0 0; padding: 10px 15px; text-align: center; font-size: 15px; color: #333; }
.login-body { padding: 26px 18px 18px; display: flex; flex-direction: column; gap: 18px; }
.igroup { display: flex; direction: ltr; align-items: stretch; border: 1px solid #ccc; border-radius: 4px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.igroup:focus-within { border-color: #66afe9; box-shadow: 0 0 0 3px rgba(102, 175, 233, .25); }
.iaddon { display: flex; align-items: center; justify-content: center; width: 42px; flex: none; background: #eee; color: #555; border-right: 1px solid #ccc; border-radius: 4px 0 0 4px; }
.iaddon svg { width: 18px; height: 18px; }
.igroup input { flex: 1; min-width: 0; border: 0; border-radius: 0 4px 4px 0; padding: 8px 12px; min-height: 40px; background: transparent; outline: none; font-size: 15px; text-align: left; color: #000; caret-color: #000; color-scheme: light; }
/* the login panel is always light: black text even in dark mode and with browser autofill */
.igroup input:-webkit-autofill { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0 40px #fff inset; }
.igroup input:focus { outline: none; box-shadow: none; }
.igroup input::placeholder { text-align: right; direction: rtl; color: #999; }
.iaddon.eye { order: 3; border-right: 0; border-left: 1px solid #ccc; border-radius: 0 4px 4px 0; background: #fafafa; cursor: pointer; padding: 0; min-height: 0; color: #888; }
.iaddon.eye.on { color: var(--brand-blue); }
.igroup:has(.eye) input { border-radius: 0; }
.login-submit { width: 100%; justify-content: center; min-height: 42px; font-size: 15px; font-weight: 700; color: #fff; background: var(--brand-blue); border: 1px solid #262981; border-radius: 4px; }
.login-submit:hover { background: #262981; }
.login-submit:disabled { opacity: .7; }
.login-err { color: #a94442; font-size: 13px; text-align: center; min-height: 0; }
.login-err:not(:empty) { padding-top: 10px; border-top: 1px solid #eee; }
.login-foot { color: #31708f; font-size: 13px; margin: 16px 0 0; }
@media screen and (max-width: 760px), screen and (pointer: coarse) {
  .igroup input { font-size: 16px; min-height: 46px; }
  .login-submit { min-height: 48px; font-size: 16px; }
}
@media screen and (max-width: 400px) {
  .login-logo { width: 120px; }
  .login-body { padding: 20px 14px 14px; }
}

/* ---------- device picker (search by name / asset tag) ---------- */
.picker { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.picker-box { position: relative; }
.picker-input { width: 100%; }
.picker-results {
  position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; left: 0; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 32, 46, .14); padding: 4px; -webkit-overflow-scrolling: touch;
}
.pick { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; border-radius: 8px; background: none; padding: 7px 10px; text-align: right; gap: 1px; min-height: 0; color: var(--text); }
.pick:hover, .pick.on { background: var(--sel-bg); }
.pick .name { font-size: 14px; }
.pick-meta { font-size: 12px; color: var(--muted); }
.pick-empty { padding: 10px; }
.lk-chosen { margin-top: 8px; padding: 10px; border: 1px solid var(--line-strong); background: var(--info-bg); border-radius: 10px; }
.chosen-dev { color: var(--text); font-size: 14px; padding: 6px 0; }
.lk-table { margin-top: 8px; }
.lk-table td { vertical-align: middle; }
.lk-table td.lk-dev { width: 55%; }
.lk-table select { width: 100%; }

/* ---------- import / export ---------- */
.pagehead { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.pagehead h1 { margin: 0; }
.io-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); align-items: start; }
.ficon { width: 30px; height: 36px; flex: none; }
.btn .ficon { width: 18px; height: 22px; }
.fmt-grid { display: grid; gap: 10px; margin-top: 14px; }
.fmt { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--panel); transition: border-color .15s, box-shadow .15s, transform .15s; }
.fmt:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(20, 32, 46, .08); transform: translateY(-1px); }
.fmt-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fmt-dl { font-weight: 700; font-size: 13px; white-space: nowrap; }
.steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; counter-reset: st; flex-wrap: wrap; }
.steps li { counter-increment: st; flex: 1 1 120px; padding: 6px 10px; border-radius: 8px; background: var(--chip); color: var(--muted); font-size: 13px; }
.steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line-strong); color: #fff; font-size: 12px; margin-inline-end: 6px; font-family: Tahoma, sans-serif; }
.steps li.on { background: var(--info-bg); color: var(--info-ink); }
.steps li.on::before { background: var(--primary-fill); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--panel-2); cursor: pointer; text-align: center; transition: background .15s, border-color .15s; }
.drop:hover, .drop:focus { border-color: var(--primary); outline: none; }
.drop.over { background: var(--info-bg); border-color: var(--primary); }
.drop.has { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.drop-icons { display: flex; gap: 8px; margin-bottom: 4px; }
.drop-icons .ficon { width: 36px; height: 44px; }
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 12px 0; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); color: var(--text); }
.stat .n { font-size: 24px; font-weight: 700; font-family: Tahoma, "Segoe UI", sans-serif; line-height: 1.2; }
.stat.ok { border-color: var(--ok-line); } .stat.ok .n { color: var(--ok); }
.stat.bad { border-color: var(--err-line); } .stat.bad .n { color: var(--danger); }
.stat.warn { border-color: var(--warn-line); } .stat.warn .n { color: var(--warn); }
.chips { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.chip { border-radius: 16px; padding: 3px 12px; font-size: 13px; min-height: 30px; }
.chip.on { background: var(--text); color: var(--panel); border-color: var(--text); }
tr.row-bad td { background: var(--err-bg); }

/* ---------- tablet & phone ---------- */
@media screen and (max-width: 760px) {
  .mobile-only { display: inline-flex; }
  .stickybar { margin: 12px -12px -12px; padding-inline: 12px; }
  .stickybar #save { flex: 1 1 100%; justify-content: center; min-height: 46px; }
  .home-stats a { flex: 1 1 calc(50% - 10px); }
}

@media screen and (max-width: 760px), screen and (pointer: coarse) {
  /* iOS zooms into inputs below 16px: keep form controls at 16px on touch devices */
  input, select, textarea { font-size: 16px; min-height: 42px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; }
  button, .btn { min-height: 42px; padding: 6px 14px; }
  button.copy { min-height: 34px; padding: 4px 10px; font-size: 13px; }
  .pick { padding: 11px 12px; }
  .picker-results { max-height: 55vh; }
  .chip { min-height: 36px; }
  th.sort { padding-top: 10px; padding-bottom: 10px; }
}

@media screen and (max-width: 760px) {
  html, body { font-size: 15px; }
  main { padding-top: 10px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .panel { padding: 12px; border-radius: 10px; margin-bottom: 12px; }
  .grid, .io-grid { gap: 12px; }
  h1 { font-size: 18px; }
  .bigname { font-size: 20px; overflow-wrap: anywhere; white-space: normal; }
  .preview { font-size: 20px; overflow-wrap: anywhere; }
  .preview .name { white-space: normal; }
  label.f, label.f.wide { flex: 1 1 calc(50% - 6px); min-width: 0; }
  label.f.wide { flex-basis: 100%; }
  label.f select, label.f input, label.f textarea { width: 100%; }
  label.f .row.nowrap select { flex: 1; min-width: 0; }
  .fields > button, .fields > .btn { flex: 1 1 auto; justify-content: center; }
  dl.kv { grid-template-columns: minmax(84px, max-content) 1fr; gap: 6px 10px; }
  dl.kv dd { overflow-wrap: anywhere; }
  pre.code { font-size: 12px; overflow-x: auto; white-space: pre; }
  .tablewrap { max-height: none; }
  dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 40px); padding: 14px; }
  .desc { grid-template-columns: 1fr; }
  .desc .v { justify-content: flex-start; }

  /* tables marked .cards become stacked cards */
  table.cards thead, table.cards tr:has(> th) { display: none; }
  table.cards, table.cards tbody { display: block; width: 100%; }
  table.cards tr {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px;
    border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 10px 12px; background: var(--panel); position: relative;
    box-shadow: 0 1px 2px rgba(20, 32, 46, .04);
  }
  table.cards tr[hidden] { display: none; }
  table.cards tr:hover td { background: transparent; }
  table.cards tr.picked { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--sel-bg); }
  table.cards tr.picked td { background: transparent !important; }
  table.cards td { display: block; border: 0; padding: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
  table.cards td.ltr { direction: rtl; text-align: right; white-space: normal; }
  table.cards td .ltr, table.cards td .name { white-space: normal; overflow-wrap: anywhere; }
  table.cards td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; font-family: var(--fa); line-height: 1.4; }
  table.cards td:empty, table.cards td.num:empty { display: none; }
  table.cards td[colspan] { grid-column: 1 / -1; }
  table.cards td pre, table.cards td .fielderr { grid-column: 1 / -1; }
  .tablewrap:has(table.cards) { border: 0; overflow: visible; }
  tr.row-bad { border-color: var(--err-line) !important; }
  /* device list card: name as the title across the card, checkbox + status top-left */
  .devtable td.c-name { grid-column: 1 / -1; font-size: 16px; padding-left: 96px; min-height: 26px; }
  .devtable td.c-sel { position: absolute; top: 10px; left: 12px; }
  .devtable td.c-status { position: absolute; top: 10px; left: 42px; }
  table.cards.devtable td.c-status[data-label]::before { display: none; }

  .locgrid { gap: 10px; }
  ul.loclist { max-height: none; }
  .steps li { flex-basis: 30%; font-size: 12px; padding: 6px; }
  .fmt { padding: 10px; }
}

@media screen and (max-width: 400px) {
  label.f { flex-basis: 100%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- labels (A4) ---------- */
/* scroll sideways on screens narrower than A4 instead of cutting the sheet off */
.sheets-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.sheet { background: #fff; width: 210mm; min-height: 297mm; margin: 0 0 16px; margin-inline: max(0px, calc((100% - 210mm) / 2)); padding: var(--sheet-pad-top, 13mm) var(--sheet-pad-side, 0mm) 0; align-content: start; display: grid; grid-template-columns: repeat(var(--cols, 3), var(--lw, 70mm)); grid-auto-rows: var(--lh, 37mm); justify-content: center; box-shadow: 0 0 0 1px var(--line); }
.label { overflow: hidden; display: flex; align-items: center; gap: 2mm; padding: 2mm 3mm; border: 1px dashed #ccd; direction: rtl; }
.label .qr { width: var(--qr, 24mm); height: var(--qr, 24mm); flex: none; }
.label .qr svg { width: 100%; height: 100%; }
.label .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1mm; }
.label .lname { font-family: var(--mono); font-weight: 700; direction: ltr; text-align: left; white-space: nowrap; line-height: 1.1; overflow: hidden; }
.label .lname span { display: block; }
.label .lfa { font-size: 7.5pt; color: #222; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.label.empty { border-color: transparent; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff; margin: 0; }
  .no-print, .topbar, .sidebar, .backdrop, .toasts, .skip, .loadbar, dialog { display: none !important; }
  body.has-shell { padding: 0 !important; }
  main { padding: 0; margin: 0; max-width: none; }
  /* exactly one A4 page per sheet: fixed height, page break only between sheets (no blank last page) */
  .sheet { box-shadow: none; margin: 0; height: 297mm; min-height: 0; overflow: hidden; break-inside: avoid; }
  .sheet + .sheet { break-before: page; }
  .sheets-wrap { overflow: visible; margin: 0; padding: 0; }
  .label { border-color: transparent; }
  .label.show-border { border: 0.2mm solid #999; }
  /* other printed pages (minutes, inspection list, reports) on paper colours with page margins */
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: #fff; --panel: #fff; --panel-2: #f7f9fb; --text: #111; --muted: #555; --line: #ccc; }
  .print-only { display: revert; }
  th.print-only, td.print-only { display: table-cell; }
  .minutes { border: 0; padding: 12mm 14mm; max-width: none; }
  .panel { border: 0; padding: 0 8mm; break-inside: avoid; }
  .panel.collapsed > :not(h2:first-child) { display: revert !important; }
  .panel.foldable > h2:first-child::before { content: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* sticky children need a panel that is not a scroll container */
.panel.form-panel { overflow: visible; }


/* ---------- device list: type icon, selection, bulk bar ---------- */
.tcell { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px; }
.tico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--chip); color: var(--muted); }
tr.picked td { background: var(--sel-bg) !important; }
.bulkbar {
  position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px 8px 8px; padding-inline: 14px 8px; width: max-content; max-width: calc(100vw - 24px);
  background: #14202e; color: #eef3f8; border: 1px solid #2a394b; border-radius: 14px; box-shadow: 0 14px 40px rgba(10, 18, 28, .3);
}
.bulkbar .bulk-n { font-size: 13px; margin-inline-end: 6px; }
.bulkbar .bulk-n strong { font-family: Tahoma, sans-serif; font-size: 15px; }
.bulkbar button.sm, .bulk-st { background: #1f2d3e; border: 1px solid #33465c; color: #eef3f8; }
.bulkbar button.sm:hover { background: #283a50; }
.bulk-st { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 0; padding-inline: 8px 2px; border-radius: 6px; min-height: 32px; }
.bulk-st select { background: transparent; border: 0; color: inherit; min-height: 30px; padding-inline: 2px 6px; }
.bulk-st select option { color: var(--text); background: var(--panel); }
.bulkbar .icon-btn { color: #aebccb; width: 32px; height: 32px; }
.bulkbar .icon-btn:hover { background: #283a50; color: #fff; }
.bulkbar .spacer { flex: 0 0 4px; }
@media screen and (max-width: 760px) {
  .bulkbar { left: 8px; right: 8px; transform: none; width: auto; max-width: none; }
  .bulkbar button.sm { flex: 1 1 auto; justify-content: center; }
}

/* ---------- loading skeleton & error state ---------- */
.skel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.skel-row { display: flex; gap: 14px; align-items: center; }
.skel-row i, .skel-h { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--chip) 0%, var(--hover) 40%, var(--chip) 80%); background-size: 300% 100%; animation: skel 1.3s ease-in-out infinite; }
.skel-row i:nth-child(1) { flex: 0 0 22%; height: 14px; } .skel-row i:nth-child(2) { flex: 0 0 14%; }
.skel-row i:nth-child(3) { flex: 1; } .skel-row i:nth-child(4) { flex: 0 0 10%; }
.skel-h { width: 220px; height: 22px; margin: 4px 0 16px; }
.skel-page { animation: fade-in .3s .15s both; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (min-width: 1100px) { body.has-shell .bulkbar { left: calc(50% - var(--side-w) / 2); } }
main:has(.bulkbar:not([hidden])) { padding-bottom: 90px; }
@media (prefers-reduced-motion: reduce) { .skel-row i, .skel-h { animation: none; } }
.errstate { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; }
.errstate .row { justify-content: center; margin-top: 6px; }
.empty-ic.err { background: var(--err-bg); color: var(--danger); }

/* ---------- device page header ---------- */
.dev-hero { padding-bottom: 12px; }
.hero-top { display: flex; align-items: center; gap: 14px; }
.hero-ic { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--info-bg); color: var(--info-ink); }
.dev-hero.retired .hero-ic { background: var(--chip); color: var(--muted); }
.dev-hero.retired .bigname { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }
.hero-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-name .bigname { font-size: 24px; line-height: 1.25; }
.hero-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.facts { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.fact-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--chip); color: var(--muted); }
.fact-l { font-size: 11px; color: var(--muted); line-height: 1.3; }
.fact-v { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-v.ltr { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.fact.good .fact-ic { background: var(--ok-bg); color: var(--ok); }
.fact.warn { border-color: var(--warn-line); } .fact.warn .fact-ic { background: var(--warn-bg); color: var(--warn); } .fact.warn .fact-v { color: var(--warn); }
.fact.bad { border-color: var(--err-line); background: var(--err-bg); } .fact.bad .fact-ic { background: var(--panel); color: var(--danger); } .fact.bad .fact-v { color: var(--danger); }
.fact.muted .fact-v { color: var(--muted); }
@media screen and (max-width: 760px) {
  .hero-ic { width: 46px; height: 46px; border-radius: 12px; }
  .hero-name .bigname { font-size: 19px; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media screen and (pointer: coarse) { .action kbd, .cmd-trigger kbd { display: none; } }

/* ---------- batch entry ---------- */
.pagehead h1 { display: flex; align-items: center; gap: 8px; }
.kits { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); margin-bottom: 10px; }
.kit { justify-content: flex-start; gap: 10px; min-height: 54px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); text-align: start; }
.kit > span { display: flex; flex-direction: column; line-height: 1.4; }
.kit .ic { color: var(--primary); }
.kit:hover { border-color: var(--primary); background: var(--sel-bg); }
.qadd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.qadd .chip { gap: 6px; }
.qadd .chip .ic { color: var(--muted); }
.qadd select.chip { width: auto; min-height: 30px; }
.batch-wrap { overflow-x: auto; }
.batch-table { width: 100%; }
.batch-table td { vertical-align: middle; padding: 4px; }
.batch-table td input:not([type=radio]), .batch-table td select { width: 100%; min-width: 90px; }
.batch-table .b-type { display: flex; align-items: center; gap: 6px; min-width: 180px; }
.batch-table .b-type select { min-width: 140px; }
.batch-table .b-n { color: var(--muted); font-family: Tahoma, sans-serif; width: 28px; text-align: center; }
.batch-table .b-main { text-align: center; width: 48px; }
.batch-table .b-out { min-width: 150px; font-size: 13px; }
.batch-table .b-act { white-space: nowrap; width: 76px; }
.batch-table .b-act .icon-btn { color: var(--muted); }
.batch-table .b-act .icon-btn:hover { background: var(--hover); color: var(--text); }
.batch-table tr.r-ok td { background: var(--ok-bg); }
.batch-table tr.r-bad td { background: var(--err-bg); }
.batch-table input[aria-invalid=true] { border-color: var(--danger); }
.name.ok { color: var(--ok); }
.ok-text { color: var(--ok); font-size: 13px; }
.batch-done .done-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.batch-done .done-head .empty-ic { margin: 0; flex: none; }
.batch-done h2 { margin: 0; }
.done-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.done-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
@media screen and (max-width: 760px) {
  .batch-wrap { overflow: visible; }
  table.cards.batch-table tr { grid-template-columns: 1fr 1fr; }
  table.cards.batch-table td.b-type { grid-column: 1 / -1; display: flex; }
  table.cards.batch-table td.b-type::before { display: none; }
  table.cards.batch-table td.b-n { display: none; }
  table.cards.batch-table td.b-act { grid-column: 1 / -1; text-align: end; }
  .batch-table td input:not([type=radio]) { min-width: 0; }
}
.batch-table [data-col=model] { min-width: 150px; } .batch-table [data-col=mac] { min-width: 150px; } .batch-table [data-col=ip], .batch-table [data-col=serial] { min-width: 115px; }
@media screen and (max-width: 760px) { .batch-table [data-col] { min-width: 0 !important; } }
.f-hint { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
h4.sub { margin: 14px 0 6px; font-size: 13px; color: var(--th-ink); }
.batch-table th .th-in { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.th-fill { min-height: 0; width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.th-fill:hover { color: var(--primary); border-color: var(--primary); }
.batch-table [data-col=vendor] { min-width: 100px; }
.batch-table td.c-purchase_date, .batch-table td.c-warranty_end { min-width: 150px; }
.batch-table .jdate-box .jdate-input { width: 100%; min-width: 0; }
ul.hints { margin: 8px 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
ul.hints .ic { display: inline; vertical-align: -2px; }
/* batch table, compact: device cell holds type, "main" and the issued name */
.batch-table td { padding: 3px; }
.batch-table td input:not([type=radio]), .batch-table td select { min-height: 32px; padding: 3px 6px; font-size: 13px; min-width: 0; }
.batch-table .b-type { display: table-cell; min-width: 175px; max-width: 230px; }
.batch-table .b-top { display: flex; align-items: center; gap: 6px; }
.batch-table .b-top select { flex: 1; min-width: 0; }
.batch-table .b-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; }
.batch-table .b-sub:empty { display: none; }
.batch-table .b-main { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.batch-table .b-main input { width: 15px; height: 15px; min-height: 0; margin: 0; }
.batch-table.no-main .b-main { display: none; }
.batch-table .b-out { min-width: 0; font-size: 12px; }
.batch-table .b-out:empty { display: none; }
.batch-table [data-col=vendor] { min-width: 80px; }
.batch-table [data-col=model] { min-width: 115px; }
.batch-table [data-col=serial] { min-width: 95px; }
.batch-table [data-col=asset_tag] { min-width: 80px; }
.batch-table [data-col=ip] { min-width: 100px; }
.batch-table [data-col=mac] { min-width: 120px; }
.batch-table td.c-purchase_date, .batch-table td.c-warranty_end { min-width: 0; }
.batch-table [data-col=purchase_date], .batch-table [data-col=warranty_end] { min-width: 96px; }
.batch-table .b-act { width: 64px; }
@media (pointer: fine) { .batch-table .jdate-btn { display: none; } }
@media screen and (max-width: 760px) {
  table.cards.batch-table td.b-type { max-width: none; display: block; }
  table.cards.batch-table td.b-type::before { display: block; }
}
/* batch page, roomier: the table grows with the page (no inner scroll box) and its header stays in view */
.batch-wrap { max-height: none; }
.batch-table td { padding: 5px 4px; }
.batch-table td input:not([type=radio]), .batch-table td select { min-height: 38px; font-size: 14px; padding: 4px 8px; }
.batch-table tbody tr + tr td { border-top: 1px solid var(--line); }
.batch-table thead th { background: var(--panel-2); font-size: 12.5px; padding: 8px 4px; }
@media (min-width: 1240px) {
  .batch-wrap { overflow: visible; border: 0; }
  .batch-table { border: 1px solid var(--line); border-radius: 10px; border-collapse: separate; border-spacing: 0; }
  .batch-table thead th { position: sticky; top: var(--topbar-h, 54px); z-index: 3; box-shadow: 0 1px 0 var(--line); }
  .batch-table thead th:first-child { border-start-start-radius: 10px; }
  .batch-table thead th:last-child { border-start-end-radius: 10px; }
}
.btools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 12px; }
.bt-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bt-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-inline-end: 2px; }
.btools .kit { min-height: 40px; padding: 4px 12px; border-radius: 20px; gap: 8px; }
.btools .kit > span { flex-direction: row; align-items: baseline; gap: 6px; }
.kit-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.btools .qadd { margin: 0; }
.add-row { margin-top: 8px; width: 100%; justify-content: center; gap: 6px; min-height: 40px; border: 1px dashed var(--line-strong); border-radius: 10px; background: none; color: var(--muted); }
.add-row:hover { border-color: var(--primary); color: var(--primary); background: var(--sel-bg); }
@media screen and (max-width: 760px) {
  .btools { flex-direction: column; align-items: stretch; }
  .bt-group { gap: 6px; }
  .btools .kit { flex: 1 1 auto; }
}
.inline-ic .ic { display: inline; vertical-align: -2px; margin-inline-end: 2px; }
.link-btn { background: none; border: 0; color: var(--primary); gap: 6px; padding: 4px 6px; min-height: 32px; font-size: 13px; }
.link-btn:hover { text-decoration: underline; background: none; }
.btools #netToggle { order: 3; margin-inline-start: auto; }
.batch-table [data-col=vendor] { min-width: 90px; }
.batch-table [data-col=model] { min-width: 140px; }
.batch-table [data-col=serial] { min-width: 105px; }
@media (min-width: 761px) {
  .batch-table { table-layout: fixed; }
  .batch-table th.c-dev { width: 19%; }
  .batch-table th.c-vendor { width: 11%; }
  .batch-table th.c-model { width: 19%; }
  .batch-table th.c-serial { width: 14%; }
  .batch-table th.c-asset_tag { width: 10%; }
  .batch-table th.c-ip { width: 11%; }
  .batch-table th.c-mac { width: 13%; }
  .batch-table th.c-purchase_date, .batch-table th.c-warranty_end { width: 10.5%; }
  .batch-table th:last-child { width: 82px; }
  .batch-table td input:not([type=radio]), .batch-table td select { min-width: 0 !important; }
  .batch-table .b-type { min-width: 0; max-width: none; }
}
/* with IP and MAC there are ten columns: scroll sideways instead of squeezing dates and models */
@media (min-width: 761px) {
  .batch-table.with-net { min-width: 1180px; }
  .batch-wrap:has(.with-net) { overflow-x: auto; }
  .batch-table .jdate-input { padding-inline: 4px !important; letter-spacing: 0; }
}
.jdate-input::placeholder { font-size: 12px; letter-spacing: 0; }

/* ---------- phone tab bar ---------- */
:root { --tabbar-h: 0px; }
.tabbar { display: none; }
@media screen and (max-width: 760px) {
  body.has-shell:not(.no-tabbar) { --tabbar-h: calc(60px + env(safe-area-inset-bottom)); }
  body.has-shell:not(.no-tabbar) .tabbar:not([hidden]) {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(10, 18, 28, .08);
  }
  body.typing .tabbar { display: none !important; }
  .tabbar > a, .tabbar > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 0; padding: 4px 2px;
    border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 11px; text-decoration: none;
  }
  .tabbar > [hidden] { display: none; }
  .tabbar > a.active { color: var(--primary); }
  .tabbar > a.active .ic { transform: translateY(-1px); }
  .tabbar .tab-search .ic { color: var(--primary); }
  body.has-shell:not(.no-tabbar) main { padding-bottom: calc(var(--tabbar-h) + 16px); }
  body.has-shell .toasts { bottom: calc(var(--tabbar-h) + 10px); }
  body.has-shell .bulkbar { bottom: calc(var(--tabbar-h) + 10px); }
}
.chip-n:not(:empty) { display: inline-block; min-width: 20px; margin-inline-start: 6px; padding: 0 6px; border-radius: 10px; background: var(--chip); color: var(--muted); font-size: 11.5px; line-height: 18px; text-align: center; font-family: Tahoma, sans-serif; }
.chip.on .chip-n { background: rgba(255, 255, 255, .18); color: inherit; }
mark { background: #ffe58a; color: #1d2733; border-radius: 3px; padding: 0 1px; }
:root[data-theme="dark"] mark { background: #6b5a14; color: #fff3c4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) mark { background: #6b5a14; color: #fff3c4; } }
dialog.scanner { width: min(420px, calc(100vw - 16px)); padding: 12px; border-radius: 14px; }
dialog.scanner::backdrop { background: rgba(8, 14, 22, .7); }
.scan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.scan-head strong { display: inline-flex; align-items: center; gap: 6px; }
.scan-view { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 62vh; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
/* previous / next device within the list */
.hero-top { flex-wrap: wrap; }
.hero-nav { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.hero-nav .hn { width: 34px; height: 34px; border: 1px solid var(--line); color: var(--text); }
.hero-nav .hn:hover { background: var(--hover); text-decoration: none; }
.hero-nav .hn[aria-disabled] { opacity: .35; pointer-events: none; }
.hero-nav .hn-next .ic { transform: scaleX(-1); }
.hn-pos { min-width: 64px; text-align: center; font-size: 12.5px; color: var(--muted); font-family: Tahoma, sans-serif; }
@media screen and (max-width: 760px) {
  .hero-nav { width: 100%; justify-content: space-between; margin-top: 4px; }
  .hn-l { display: none; }
}
/* saved views */
.views-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; }
.views-row:empty { display: none; }
.views-l { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.view-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); overflow: hidden; }
.view-chip a { padding: 3px 4px 3px 10px; padding-inline: 12px 4px; font-size: 13px; color: var(--text); }
.view-chip a:hover { text-decoration: none; color: var(--primary); }
.view-chip button { min-height: 0; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 50%; margin-inline-end: 3px; }
.view-chip button:hover { color: var(--danger); background: var(--err-bg); }
.view-chip.on { border-color: var(--primary); background: var(--sel-bg); }
@media (min-width: 761px) { .batch-table th.c-extension { width: 7%; } }
/* ---------- phonebook ---------- */
.pb-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.pb-search { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--input-bg); color: var(--muted); }
.pb-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--sel-bg); }
.pb-search input { flex: 1; border: 0 !important; background: none !important; outline: none !important; box-shadow: none !important; min-height: 42px; font-size: 15px; padding: 0; }
.pb-tools select { min-height: 44px; }
.pb-wrap { max-height: none; }
.pb-table td { vertical-align: middle; }
.pb-name { display: flex; flex-direction: column; line-height: 1.4; }
.pb-name .muted { font-size: 12px; }
.pb-ext a.ext { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 14px; background: var(--info-bg); color: var(--info-ink); font-family: var(--mono); font-size: 15px; font-weight: 700; direction: ltr; }
.pb-ext a.ext:hover { text-decoration: none; background: var(--sel-bg); }
.pb-act { white-space: nowrap; width: 80px; }
.pb-act .icon-btn { color: var(--muted); }
.pb-act .icon-btn:hover { color: var(--text); background: var(--hover); }
@media screen and (max-width: 760px) {
  table.cards.pb-table td.pb-name { grid-column: 1 / -1; }
  table.cards.pb-table td.pb-name::before { display: none; }
  table.cards.pb-table td.pb-act { grid-column: 1 / -1; text-align: end; }
}
@media print {
  .pb-table { font-size: 10pt; }
  .pb-table th, .pb-table td { padding: 3px 6px; }
  .pb-ext a.ext { background: none; padding: 0; font-size: 11pt; }
  .pb-ext .ic { display: none; }
  .pb-wrap { border: 0; }
}

/* ---------- public phonebook (/phonebook) ---------- */
body.pub { min-height: 100vh; display: flex; flex-direction: column; }
.pub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left)); background: var(--side-bg); color: #fff; }
.pub-brand { display: flex; align-items: center; gap: 14px; }
.pub-brand img { height: 36px; width: auto; background: #fff; border-radius: 8px; padding: 4px 6px; }
.pub-brand h1 { margin: 0; font-size: 20px; color: #fff; }
.pub-brand .muted { color: #9fb0c2; }
.pub-actions { display: flex; gap: 6px; align-items: center; }
.pub-actions .icon-btn { color: #cfd8e3; }
.pub-actions .icon-btn:hover { background: var(--side-hover); color: #fff; }
.pub-actions > button:not(.icon-btn) { background: transparent; color: #eef3f8; border-color: #33465c; }
.pub-actions > button:not(.icon-btn):hover { background: var(--side-hover); }
.pub-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
.pub-main:focus { outline: none; }
.pub-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; position: sticky; top: 0; z-index: 5; padding: 10px 0; background: var(--bg); }
.pub-search input { min-height: 50px; font-size: 17px; }
.pub-tools select { min-height: 52px; min-width: 160px; }
.pub-group { margin-bottom: 20px; }
.pub-group h2 { display: flex; align-items: baseline; gap: 8px; font-size: 15px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); color: var(--th-ink); }
.pub-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.pub-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.pub-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.pub-who strong { font-size: 15px; }
.pub-who .muted { font-size: 12.5px; }
.pub-ext { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
.pub-ext a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 16px; background: var(--info-bg); color: var(--info-ink); font-family: var(--mono); font-size: 18px; font-weight: 700; direction: ltr; }
.pub-ext a:hover { text-decoration: none; background: var(--sel-bg); }
.pub-foot { text-align: center; padding: 14px 16px max(14px, env(safe-area-inset-bottom)); font-size: 13px; }
@media screen and (max-width: 760px) {
  .pub-brand h1 { font-size: 17px; }
  .pub-brand img { height: 30px; }
  .pub-tools select { flex: 1 1 100%; }
  #pubPrint { display: none; }
}
@media print {
  body.pub { display: block; }
  .pub-head { background: none; color: #000; padding: 0 0 6mm; border-bottom: 1px solid #000; }
  .pub-brand h1 { color: #000; }
  .pub-main { padding: 4mm 0 0; max-width: none; }
  .pub-cards { grid-template-columns: repeat(3, 1fr); gap: 1mm 4mm; }
  .pub-card { border: 0; border-bottom: 1px solid #ccc; border-radius: 0; padding: 1mm 0; background: none; break-inside: avoid; }
  .pub-ext a { background: none; padding: 0; font-size: 11pt; color: #000; }
  .pub-ext .ic { display: none; }
  .pub-group { break-inside: auto; }
  .pub-group h2 { break-after: avoid; border-color: #000; }
}

/* ---------- public device card (QR scan, not logged in) ---------- */
body.pub-device main#app { max-width: 560px; padding-top: max(16px, env(safe-area-inset-top)); }
.pd-wrap { display: flex; flex-direction: column; gap: 14px; }
.pd-head { display: flex; align-items: center; gap: 12px; }
.pd-head img { height: 32px; width: auto; background: #fff; border-radius: 7px; padding: 3px 5px; border: 1px solid var(--line); }
.pd-head div { display: flex; flex-direction: column; line-height: 1.4; }
.pd-head strong { font-size: 16px; }
.pd-head span { font-size: 12px; color: var(--muted); }
.pd-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 6px 24px rgba(20, 32, 46, .06); }
.pd-top { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pd-type { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 16px; background: var(--info-bg); color: var(--info-ink); }
.pd-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-title h1 { margin: 0; font-size: 20px; overflow-wrap: anywhere; line-height: 1.3; }
.pd-title > span { color: var(--muted); font-size: 13px; }
.pd-status { flex: none; padding: 3px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; background: var(--chip); }
.pd-status.good { background: var(--ok-bg); color: var(--ok); }
.pd-status.warn { background: var(--warn-bg); color: var(--warn); }
.pd-status.info { background: var(--info-bg); color: var(--info-ink); }
.pd-status.muted { color: var(--muted); }
.pd-rows { display: flex; flex-direction: column; }
.pd-row { display: grid; grid-template-columns: 34px 120px 1fr; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pd-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--chip); color: var(--muted); }
.pd-l { color: var(--muted); font-size: 13px; }
.pd-v { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pd-mono { font-family: var(--mono); font-size: 15px; }
.pd-ext { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 1px 10px; border-radius: 12px; background: var(--info-bg); color: var(--info-ink); font-family: var(--mono); font-weight: 700; }
.pd-ext:hover { text-decoration: none; }
.pd-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--muted); }
.pd-note .ic { flex: none; margin-top: 3px; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-actions > * { flex: 1 1 180px; justify-content: center; min-height: 44px; }
.pd-missing { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
@media screen and (max-width: 420px) { .pd-row { grid-template-columns: 34px 1fr; } .pd-row .pd-v { grid-column: 2; } }

/* ---------- management documents (monthly report, asset register): white paper, also in dark mode ---------- */
.rep-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.rep-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; }
.rep-month { display: flex; align-items: center; gap: 4px; }
.rep-month select { min-width: 150px; font-weight: 600; }
.rep-month .icon-btn { border: 1px solid var(--line); color: var(--text); }
.rep-month .icon-btn.flip .ic { transform: scaleX(-1); }
.paper {
  --bg: #fff; --panel: #fff; --panel-2: #f6f8fa; --text: #1b2430; --muted: #5d6874; --line: #dfe4ea; --line-strong: #c5ced8; --chip: #eef2f6; --hover: #f2f5f8;
  --info-bg: #eaf2ff; --info-ink: #1f4fbf; --ok-bg: #e6f5e9; --ok: #2e7d32; --warn-bg: #fff3dc; --warn: #995a00; --err-bg: #fdecec; --danger: #c62828; --th-ink: #3c4855;
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-other: #b9bec6; --viz-grid: #e6e9ee; --viz-axis: #c3cad3; --viz-ink: #52514e;
  color-scheme: light; color: var(--text); background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba(10, 20, 30, .18); margin: 0 auto 24px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.paper .muted { color: var(--muted); }

/* monthly report */
.mr-doc { max-width: 920px; padding: 30px 36px 26px; }
.mr-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding-bottom: 16px; border-bottom: 3px solid #1d3150; }
.mr-head img { height: 56px; width: auto; }
.mr-titles { display: flex; flex-direction: column; gap: 2px; }
.mr-org { font-size: 12px; color: var(--muted); letter-spacing: .01em; }
.mr-titles h1, .ar-titles h1 { margin: 0; font-size: 22px; color: #1d3150; }
.mr-period { display: inline-block; width: fit-content; margin-top: 4px; padding: 2px 12px; border-radius: 14px; background: #1d3150; color: #fff; font-size: 13px; font-weight: 600; }
.mr-meta { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 0; font-size: 12px; }
.mr-meta dt { color: var(--muted); }
.mr-meta dd { margin: 0; font-weight: 600; }
.mr-summary { margin: 18px 0; padding: 14px 18px; border-radius: 10px; background: #f3f7fd; border-inline-start: 4px solid var(--viz-1); }
.mr-summary h2 { margin: 0 0 6px; font-size: 15px; color: #1d3150; }
.mr-summary ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.8; }
.mr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.mr-kpi { position: relative; display: flex; flex-direction: column; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mr-kpi::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--viz-1); }
.mr-kpi.good::before { background: var(--st-good); } .mr-kpi.warn::before { background: var(--st-warning); } .mr-kpi.bad::before { background: var(--st-critical); }
.mr-kv { font-size: 26px; font-weight: 800; font-family: Tahoma, sans-serif; line-height: 1.2; }
.mr-kl { font-size: 13px; font-weight: 600; }
.mr-ks { font-size: 11.5px; color: var(--muted); }
.mr-delta.good { color: var(--ok); } .mr-delta.bad { color: var(--danger); } .mr-delta.same { color: var(--muted); }
.mr-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
.mr-chart { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; break-inside: avoid; }
.mr-chart h3, .mr-sec h3 { margin: 0 0 8px; font-size: 14px; color: #1d3150; }
.mr-sec { margin-top: 18px; }
.mr-sec h3 { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); break-after: avoid; }
.mr-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1d3150; color: #fff; font-size: 12px; font-family: Tahoma, sans-serif; }
.mr-count { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.mr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mr-table th { text-align: start; font-size: 11.5px; color: var(--th-ink); background: var(--panel-2); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.mr-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mr-table tr { break-inside: avoid; }
.mr-mono, .ar-mono { font-family: var(--mono); font-size: 12px; }
.mr-empty { margin: 4px 0; color: var(--muted); font-size: 13px; }
.mr-more { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; }
.mr-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; break-inside: avoid; }
.mr-sign div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 44px; border-top: 1px dashed var(--line-strong); font-size: 12px; }
.mr-sign span { font-weight: 700; }
.mr-sign em { font-style: normal; color: var(--muted); }

/* asset register */
.ar-filters .fields { align-items: flex-end; }
.ar-views { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.ar-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ar-stat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.ar-stat.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.ar-stat.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.ar-stat.bad { color: var(--danger); border-color: var(--err-line); background: var(--err-bg); }
.ar-doc { padding: 24px 26px 22px; }
.ar-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 3px solid #0f6b6b; }
.ar-head img { height: 48px; width: auto; }
.ar-titles { display: flex; flex-direction: column; gap: 2px; }
.ar-titles h1 { color: #0f4f4f; font-size: 20px; }
.ar-filter { font-size: 12px; color: var(--muted); }
.ar-h { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; font-size: 15px; color: #0f4f4f; }
.ar-h span { font-size: 12px; font-weight: 400; color: var(--muted); }
.ar-h.ar-warn { color: var(--danger); }
.ar-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ar-table th { text-align: start; background: #0f4f4f; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 6px; white-space: nowrap; }
.ar-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ar-table tbody tr:nth-child(even) td { background: #f6f9f9; }
.ar-table tr { break-inside: avoid; }
.ar-table .c-n { width: 28px; text-align: center; color: var(--muted); font-family: Tahoma, sans-serif; }
.ar-tag { font-family: var(--mono); font-size: 13px; font-weight: 800; white-space: nowrap; }
.ar-sub { display: block; font-size: 10.5px; color: var(--muted); }
.ar-ext { display: inline-block; padding: 0 6px; border-radius: 8px; background: var(--info-bg); color: var(--info-ink); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.ar-place { min-width: 140px; }
.ar-dim { color: var(--muted); }
.ar-st { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 11px; background: var(--chip); white-space: nowrap; }
.ar-st.st-Active { background: var(--ok-bg); color: var(--ok); } .ar-st.st-Repair { background: var(--warn-bg); color: var(--warn); } .ar-st.st-Spare { background: var(--info-bg); color: var(--info-ink); }
tr.ar-retired td { color: var(--muted); text-decoration: line-through; text-decoration-color: #c5ced8; }
.ar-block { margin-bottom: 18px; break-inside: auto; }
.ar-bh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; padding: 8px 10px; margin-bottom: 4px; border-radius: 8px; background: #edf5f5; break-after: avoid; }
.ar-bh strong { font-size: 15px; color: #0f4f4f; }
.ar-bm { font-size: 12px; color: var(--muted); }
.ar-ack { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 12px; break-inside: avoid; }
.ar-ack span { white-space: nowrap; }
@media screen and (max-width: 760px) {
  .mr-doc, .ar-doc { padding: 16px 12px; border-radius: 0; margin-inline: -10px; }
  .mr-head, .ar-head { grid-template-columns: 1fr; gap: 10px; }
  .mr-kpis { grid-template-columns: 1fr 1fr; }
  .mr-charts { grid-template-columns: 1fr; }
  .mr-table, .ar-table { display: block; overflow-x: auto; }
  .mr-sign { grid-template-columns: 1fr; }
}

/* print / PDF: monthly report A4 portrait, asset register A4 landscape, page numbers at the bottom */
@page mr { size: A4 portrait; margin: 12mm 11mm 14mm; @bottom-center { content: "صفحه " counter(page) " از " counter(pages); font-family: Tahoma, sans-serif; font-size: 8pt; color: #888; } }
@page ar { size: A4 landscape; margin: 9mm 9mm 12mm; @bottom-center { content: "صفحه " counter(page) " از " counter(pages); font-family: Tahoma, sans-serif; font-size: 8pt; color: #888; } }
@media print {
  .mr-doc { page: mr; }
  .ar-doc { page: ar; }
  .paper { box-shadow: none; border-radius: 0; max-width: none; margin: 0; padding: 0; }
  .mr-kpis { grid-template-columns: repeat(3, 1fr); }
  .mr-charts { grid-template-columns: 1fr 1fr; }
  .mr-table, .ar-table { display: table; overflow: visible; }
  .ar-table thead { display: table-header-group; }
  .ar-page + .ar-page { break-before: page; }
  .viz-tip { display: none !important; }
}
.rep-month .rep-ph { visibility: hidden; }

/* ---------- users: roles and section rights ---------- */
.role-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin: 10px 0; }
.role-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.role-card:has(input:checked) { border-color: var(--primary); background: var(--sel-bg); box-shadow: 0 0 0 1px var(--primary); }
.role-card input { margin-top: 4px; }
.role-card span { display: flex; flex-direction: column; line-height: 1.5; }
.role-card small { color: var(--muted); font-size: 12px; }
.perm-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.perm-table { width: 100%; border-collapse: collapse; }
.perm-table th { text-align: start; font-size: 12px; color: var(--th-ink); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.perm-table th:not(:first-child), .perm-table td:not(:first-child) { text-align: center; width: 80px; }
.perm-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.perm-desc { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.perm-desc em { font-style: normal; color: var(--warn); }
.perm-box { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }
.perm-box:hover { background: var(--hover); }
.perm-box input { width: 18px; height: 18px; min-height: 0; margin: 0; }
.perm-sum { line-height: 2; }
.perm-chip { display: inline-block; margin: 1px 2px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; background: var(--chip); color: var(--text); }
.perm-chip.edit { background: var(--warn-bg); color: var(--warn); }
.users-table td.nowrap { white-space: nowrap; }
dialog.access-dlg { max-width: 720px; }
dialog.access-dlg .perm-wrap { max-height: 55vh; overflow-y: auto; }

/* ---------- help ---------- */
.help-layout { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.help-toc { position: sticky; top: calc(var(--topbar-h, 54px) + 10px); display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.help-toc a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 13.5px; }
.help-toc a:hover { background: var(--hover); text-decoration: none; }
.help-lock { margin-inline-start: auto; font-size: 11px; opacity: .7; }
.help-sec { scroll-margin-top: calc(var(--topbar-h, 54px) + 12px); }
.help-sec h2 { display: flex; align-items: center; gap: 8px; }
.help-sec ul, .help-sec ol { padding-inline-start: 20px; line-height: 1.95; margin: 6px 0; }
.help-code { display: inline-block; font-family: var(--mono); background: var(--chip); padding: 2px 8px; border-radius: 6px; }
.help-faq dt { font-weight: 700; margin-top: 10px; }
.help-faq dd { margin: 2px 0 0; color: var(--muted); }
@media screen and (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; flex-direction: row; flex-wrap: wrap; } }
@media print { .help-layout { display: block; } .help-sec { break-inside: avoid; border: 0; box-shadow: none; } }