/* Podlipnik Desk - web admin (prijava + nadzorna plošča).
   Samostojen list: admin stran ga naloži namesto site.css. Ena nevtralna površina, ena barva poudarka;
   zelena / oranžna / rdeča pomenijo samo stanje. Razmiki in višine so povsod enaki (4 px mreža). */

:root,
html[data-theme="light"] {
  --bg: #f3f5f8; --rail: #ffffff; --surface: #ffffff; --surface-2: #f7f8fa; --hover: #eef1f5;
  --line: rgba(15, 23, 42, .08); --line-2: rgba(15, 23, 42, .15);
  /* Besedilo: vsaj 4,5 : 1 na belem, sivem in hover ozadju (WCAG AA). */
  --text: #161b26; --muted: #4e5869; --faint: #5e6a7f;
  --accent: #3f5bd8; --accent-hover: #3349bf; --on-accent: #ffffff; --accent-soft: rgba(63, 91, 216, .10);
  --btn-grad: linear-gradient(135deg, #4a5ce0 0%, #3f5bd8 55%, #3a52cc 100%);
  --btn-grad-hover: linear-gradient(135deg, #5569e8 0%, #4a62dd 55%, #4159d2 100%);
  --focus-ring: rgba(63, 91, 216, .32);
  --ok: #1a7a4f; --on-ok: #ffffff; --ok-soft: rgba(26, 122, 79, .12);
  --warn: #94570a; --warn-soft: rgba(148, 87, 10, .11);
  --bad: #b83232; --bad-soft: rgba(184, 50, 50, .09);
  --shadow: 0 22px 50px -26px rgba(15, 23, 42, .38);
  --r: 12px; --r-sm: 8px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #262a34; --rail: #2d313c; --surface: #333844; --surface-2: #3b4150; --hover: #434a5a;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --text: #eef1f6; --muted: #b4bccb; --faint: #a9b1c0;
  --accent: #7d93ff; --accent-hover: #95a7ff; --on-accent: #0b1020; --accent-soft: rgba(125, 147, 255, .14);
  --btn-grad: linear-gradient(135deg, #8a9bff 0%, #7d93ff 55%, #7187f5 100%);
  --btn-grad-hover: linear-gradient(135deg, #9aaaff 0%, #8ca0ff 55%, #7d93ff 100%);
  --focus-ring: rgba(125, 147, 255, .42);
  --ok: #4cc48d; --on-ok: #04140d; --ok-soft: rgba(76, 196, 141, .13);
  --warn: #ecb35a; --warn-soft: rgba(236, 179, 90, .13);
  --bad: #f07a7a; --bad-soft: rgba(240, 122, 122, .12);
  --shadow: 0 22px 50px -24px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 14.5px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--accent); }
.mono { font-family: ui-monospace, Consolas, "SFMono-Regular", monospace; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.grow { flex: 1 1 auto; min-width: 0; }
.meta { font-size: 12.5px; color: var(--faint); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pad { padding: 12px 18px 0; }
.plain { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 650; font-size: 15px; }
.mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.mark img { width: 34px; height: 34px; display: block; }

.spin {
  width: 16px; height: 16px; flex: none; display: inline-block; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--accent); animation: a-spin .8s linear infinite;
}
@keyframes a-spin { to { transform: rotate(360deg); } }
.boot {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: var(--bg); color: var(--text);
}
.boot b { font-size: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; line-height: 1.2;
  white-space: normal; text-align: center; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.sm { min-height: 31px; padding: 5px 11px; font-size: 13px; }
.btn.lg { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--hover); }
.btn.ok { background: var(--ok); color: var(--on-ok); }
.btn.ok:hover { background: color-mix(in srgb, var(--ok) 86%, #000); }
.btn.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.btn.bad:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.btn svg { width: 16px; height: 16px; flex: none; }
.linkish {
  display: block; margin: 6px auto 0; padding: 6px 0; border: 0; background: none;
  color: var(--accent); font-size: 13.5px; font-weight: 600; text-align: center; cursor: pointer;
}
.linkish:hover { text-decoration: underline; }
/* A device's name in the list: a real button (keyboard), looks like text. */
.dev-open { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dev-open b { font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.dev-open:hover b, .dev-open:focus-visible b { text-decoration-color: currentColor; }
.icon-btn {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- inputs ---------- */
.field { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > .help-wrap > label { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.35; }
.input {
  display: block; width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
select.input { padding-right: 10px; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.input:disabled { opacity: .6; }
.code-input { font-size: 22px; font-weight: 600; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.check {
  display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px;
  color: var(--muted); font-size: 14px; cursor: pointer; user-select: none;
}
.check input[type="checkbox"] { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.check small { font-size: 12.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- form layout: one grid, aligned bottoms, buttons never stretched ---------- */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; align-items: end; padding: 16px 18px; }
.form-row > .field { margin: 0; }
.form-row:not(:has(> .field)) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form-row:has(> .grow) { grid-template-columns: minmax(0, 1fr) auto; }
.form-row > .btn { justify-self: start; }
.form-row > .field > .btn { justify-self: stretch; }
.form-row > .btn.lg { min-width: 180px; }

/* ---------- login ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.auth-card {
  width: min(400px, 100%); display: flex; flex-direction: column; padding: 32px 30px 26px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.auth-card .brand { margin-bottom: 24px; }
.auth-card h1 { font-size: 22px; line-height: 1.2; margin-bottom: 4px; }
.auth-card .sub { color: var(--muted); margin-bottom: 22px; }
.auth-card #step-pw, .auth-card #step-mfa, .auth-card #step-change, .auth-card #step-forgot { display: flex; flex-direction: column; }
.auth-card .btn { width: 100%; margin-top: 8px; }
.auth-card .btn.ghost { margin-top: 10px; }
.auth-card .linkish { width: 100%; }
.auth-card .check { margin-top: 0; }
#login-note { margin-top: 18px; text-align: center; font-size: 13px; }
.auth-card .faint.center, .center { text-align: center; }

/* ---------- feedback (inline) ---------- */
.err, .ok-msg {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 10px 12px;
  border: 1px solid; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.45;
}
.err { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.ok-msg { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.err::before, .ok-msg::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; font-weight: 700; line-height: 1; }
.ok-msg::before { content: "✓"; }

/* ---------- toasts ---------- */
.toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: grid; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 12px 12px 12px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--ok);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); pointer-events: auto;
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.toast.bad { border-left-color: var(--bad); }
.toast.show { opacity: 1; transform: none; }
.toast-icon {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700;
  color: var(--ok); background: var(--ok-soft);
}
.toast.bad .toast-icon { color: var(--bad); background: var(--bad-soft); }
.toast-body { display: grid; gap: 2px; min-width: 0; }
.toast-body b { font-size: 14px; font-weight: 650; }
.toast-body span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.toast-close {
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer;
}
.toast-close:hover { background: var(--hover); color: var(--text); }

/* ---------- modals ---------- */
.ui-modal-backdrop {
  position: fixed; inset: 0; z-index: 1100; display: grid; justify-items: center; align-items: safe center; overflow: auto; padding: 16px;
  background: rgba(8, 10, 16, .48);
}
.ui-modal {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 22px 22px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.ui-modal-content { display: grid; gap: 8px; justify-items: start; padding-right: 26px; }
.ui-modal-icon {
  width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 18px; font-weight: 700;
}
.ui-modal-icon.danger { background: var(--bad-soft); color: var(--bad); }
.ui-modal h2, .ui-modal .ui-modal-title { font-size: 17px; line-height: 1.3; }
.ui-modal-text { color: var(--muted); white-space: pre-line; line-height: 1.6; }
.ui-modal-input { margin-top: 6px; }
.ui-modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--faint); font-size: 20px; line-height: 1; cursor: pointer;
}
.ui-modal-close:hover { background: var(--hover); color: var(--text); }
.ui-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ui-modal .btn.bad { background: var(--bad); color: #fff; border-color: transparent; }
.ui-modal .btn.bad:hover { background: color-mix(in srgb, var(--bad) 86%, #000); }
.ui-form { width: min(560px, 100%); padding: 0; }
/* the session report (app.js openSessionReport) */
.report-modal { width: min(760px, 100%); }
.report-head { display: grid; gap: 2px; margin-bottom: 14px; }
.report-dl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 6px 16px; margin: 0 0 14px; }
.report-dl dt { color: var(--muted); }
.report-dl dd { margin: 0; font-weight: 600; }
.report-notes { width: 100%; resize: vertical; min-height: 84px; font: inherit; }
.report-notes-print { display: none; white-space: pre-wrap; }
.report-sub { margin: 16px 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.report-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.report-table td, .report-table td:last-child { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.report-table td.t { width: 78px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table td.k { width: 92px; color: var(--muted); font-size: 13px; }
.report-to { width: auto; max-width: 260px; margin-right: auto; }
@media (max-width: 560px) {
  .report-table, .report-table tbody { display: block; min-width: 0; }
  .report-table tr { display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--line); }
  .report-table td { border-bottom: 0; white-space: normal; overflow-wrap: anywhere; }
  .report-table td:last-child { grid-column: 1 / -1; padding-top: 0; }
  .report-dl { grid-template-columns: 1fr; gap: 0; }
  .report-dl dd { margin-bottom: 8px; }
  .report-to { max-width: none; width: 100%; }
}
.row-actions { white-space: nowrap; }
/* five figures (the overview with "Ocena strank") stay on one row on a wide screen */
@media (min-width: 1181px) { #v-app .stats:has(> .stat:nth-child(5):not(.hidden)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.help-panel { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.help-panel .panel-h { flex-wrap: wrap; gap: 4px 12px; }
.help-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--line); }
.help-main { min-width: 0; display: grid; gap: 2px; }
.help-text { overflow-wrap: anywhere; }
.help-row .acts { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 560px) { .help-row { flex-direction: column; align-items: stretch; } }
/* Ukazna vrstica (device page): a dark console whatever the theme */
.shell { display: grid; gap: 10px; }
.shell-snips { display: flex; flex-wrap: wrap; gap: 6px; }
.shell-snips .chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.shell-snips .chip:hover { border-color: var(--accent); color: var(--accent); }
.shell-out { background: #0d1117; color: #d6deeb; border-radius: 12px; padding: 12px 14px; min-height: 260px; max-height: 56vh; overflow: auto;
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace; }
.shell-hint { color: #7d8799; margin-bottom: 8px; font-family: inherit; }
.shell-entry { margin-top: 10px; }
.shell-line { color: #7fd1ff; white-space: pre-wrap; overflow-wrap: anywhere; }
.shell-res { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.shell-res.running { color: #7d8799; }
.shell-res.bad { color: #ff9b9b; }
.shell-meta { color: #7d8799; font-size: 12px; margin-top: 2px; }
.shell-in { display: flex; gap: 8px; align-items: flex-start; background: #0d1117; border-radius: 12px; padding: 8px 10px; }
.shell-ps { color: #7fd1ff; font: 13px/34px ui-monospace, Consolas, monospace; }
.shell-cmd { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: #f0f4fa; min-height: 34px; padding: 7px 0;
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; }
html #v-app .shell .shell-in .btn.ghost { color: #c9d1e0; border-color: #2c3442; background: #161c27; }
html #v-app .shell .shell-in .btn.ghost:hover { color: #fff; border-color: #4a5568; }
@media (max-width: 560px) { .shell-in { flex-wrap: wrap; } .shell-cmd { flex: 1 1 calc(100% - 44px); } }
.account-push-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.account-push-list { display: grid; gap: 6px; margin-top: 8px; }
.push-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.history-list { display: grid; gap: 12px; }
.hist-card { padding: 16px 20px; display: grid; gap: 8px; }
.hist-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.hist-card > .btn { justify-self: start; }
.hist-notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hist-rate { display: grid; gap: 8px; }
.hist-stars { display: flex; gap: 2px; }
.hist-star { border: 0; background: none; font-size: 30px; line-height: 1; color: var(--line-2); cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.hist-star.on { color: #e9a400; }
.hist-star:focus-visible { outline: 2px solid var(--accent); }
.hist-rate .acts { display: flex; gap: 8px; }
#sum-panel .panel-h { gap: 10px 16px; flex-wrap: wrap; }
.sum-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
#v-app .sum-tools .sum-month { width: 170px; min-height: 0; height: 34px; padding: 4px 10px; }
#v-app #sum-table th.num { text-align: right; }
.sum-tools .btn { white-space: nowrap; flex-shrink: 0; }
.sum-total td { font-weight: 700; border-top: 2px solid var(--line-2); }
.toast-action { display: inline-flex; margin-top: 8px; justify-self: start; }
.rating-badge { color: #e9a400; letter-spacing: 1px; font-size: 13px; }
.rating-badge span { color: var(--line-2); }
@media print {
  /* #v-app's own narrow-screen rule (site.css) is an id rule: name it here too so it loses */
  body.printing-report > *:not(.modal-host), body.printing-report > #v-app:not(.hidden) { display: none !important; }
  body.printing-report .ui-modal-backdrop { position: static; padding: 0; background: none; overflow: visible; animation: none !important; opacity: 1 !important; }
  body.printing-report .report-modal { width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; animation: none !important; opacity: 1 !important; transform: none !important; }
  body.printing-report .ui-modal-actions, body.printing-report .report-notes { display: none; }
  body.printing-report .report-notes-print { display: block; }
  /* paper is white whatever theme the screen uses */
  body.printing-report .report-modal, body.printing-report .report-modal * { color: #111 !important; background: transparent !important; }
  body.printing-report .report-modal .faint, body.printing-report .report-dl dt, body.printing-report .report-table td.t, body.printing-report .report-table td.k { color: #555 !important; }
}
.ui-form > .ui-modal-title { padding: 18px 22px 0; }
.ui-form > .ui-modal-text { padding: 6px 22px 0; }
.ui-form > .field, .ui-form > .check-groups, .ui-form > .check, .ui-form > .form-row { margin: 0; padding: 14px 22px 0; }
.ui-form > .ui-modal-actions { padding: 18px 22px; margin: 0; border-top: 1px solid var(--line); }
.ui-form .check-groups { display: grid; gap: 10px; max-height: 320px; overflow: auto; }
.check-group { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.check-group legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* A user's roles: one tick box per role (an account can have several). */
.role-field { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.role-field legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.role-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; padding: 2px 0; }
.role-checks .check { margin: 0; }

/* ---------- app shell ---------- */
#v-app:not(.hidden) { display: grid; }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px 12px; overflow-y: auto; scrollbar-width: thin;
  background: var(--rail); border-right: 1px solid var(--line);
}
.rail .brand { padding: 4px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.rail .nav-label { padding: 14px 10px 4px; font-size: 12px; font-weight: 600; color: var(--faint); }
button.nav-i {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px;
  padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .15s, color .15s;
}
button.nav-i svg { width: 17px; height: 17px; flex: none; opacity: .9; }
button.nav-i:hover { background: var(--hover); color: var(--text); }
button.nav-i.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
button.nav-i.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
button.nav-i.on svg { color: var(--accent); }
.badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 700; text-align: center; }
.me {
  margin-top: auto; position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.me .icon-btn { width: 30px; height: 30px; }
.me .icon-btn svg { width: 15px; height: 15px; }
.av2 {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700;
}
.me .who { min-width: 0; flex: 1; }
.me .who b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .who span { display: block; font-size: 12px; color: var(--faint); }

.content { position: relative; min-width: 0; padding: 26px clamp(16px, 3vw, 36px) 64px; }
.menu-btn { display: none; margin-bottom: 14px; }
.page { min-width: 0; }
.head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; }
.head > div:first-child { min-width: 0; flex: 1 1 340px; }
.head h1 { font-size: 24px; line-height: 1.2; }
.head p { margin-top: 4px; font-size: 14px; color: var(--muted); max-width: 72ch; }
.head .acts, .head .inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.head .check { margin: 0; }
.rail-scrim { display: none; }

/* live indicator */
.live {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px;
}
.live .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); }
.live.on .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.live.off .dot { background: var(--bad); }

/* ---------- stats & health ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.stat span { font-size: 13px; font-weight: 500; color: var(--muted); }
.stat b { font-size: 24px; line-height: 1.25; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat.ok b, .stat b.st-on { color: var(--ok); }
.stat.warn b, .stat b.st-wait { color: var(--warn); }
.stat b.st-bad { color: var(--bad); }
.health-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.hs {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.hs:hover { background: var(--hover); }
.hs b { font-size: 13.5px; font-weight: 600; }
.hs small { max-width: 100%; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs.wait { border-left-color: var(--warn); }
.hs.bad { border-left-color: var(--bad); }
.hs.wait small, .hs.bad small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- panels ---------- */
.panel { min-width: 0; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.panel > div:not(.panel-h):not(.empty):not(.join-card) { min-width: 0; overflow-x: auto; }
.panel-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 54px; padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-h > div:first-child { min-width: 0; flex: 1 1 220px; }
.panel-h h2, .panel-h h3 { font-size: 15px; font-weight: 650; }
.panel-h p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.panel-h > :last-child:not(:first-child) { margin-left: auto; }
.panel-h .input { width: 260px; max-width: 100%; min-height: 34px; padding: 6px 10px; }
.panel-h .st { margin-left: 2px; }
.panel-h .icon-btn { margin-left: auto; }
.sub-block { border-top: 1px solid var(--line); }
.sub-block > .panel-h { border-bottom: 1px solid var(--line); }
.empty { padding: 26px 18px; text-align: center; font-size: 14px; color: var(--faint); }
.hidden.panel { display: none !important; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 > .panel { margin-bottom: 0; }

/* ---------- tables ---------- */
#v-app table { width: 100%; border-collapse: separate; border-spacing: 0; }
#v-app th, #v-app td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 14px; }
#v-app th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
#v-app tbody tr:last-child td { border-bottom: 0; }
#v-app tbody tr:hover td { background: var(--hover); }
#v-app tr.clickable { cursor: pointer; }
#v-app td b { font-weight: 600; }
#v-app td .faint { font-size: 12.5px; }
#v-app td .btn { margin: 2px 4px 2px 0; }
#v-app td .btn:last-child { margin-right: 0; }
#v-app td.row-act, #v-app th.row-act { text-align: right; white-space: nowrap; }
#v-app td.num { font-variant-numeric: tabular-nums; text-align: right; }
.data-list { display: grid; gap: 8px; padding: 12px; }
.data-card { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.data-card .row { gap: 10px; }
.pcard { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.pcard .st { margin-top: 4px; }

/* ---------- status ---------- */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--text); }
.st i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); }
.st.on i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.st.busy i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.st.wait i { background: var(--warn); }
.st.bad i { background: var(--bad); }
.st-why { margin: 2px 0 0 15px; font-size: 12.5px; color: var(--faint); white-space: normal; }

/* ---------- chips ---------- */
.pill, .tag, .perm-chip, .user-cap, .verified-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; line-height: 1.6;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.user-cap { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }
.verified-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.permission-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; }
.perm-chip { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.codes span { padding: 7px 10px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); text-align: center; font: 14px ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.keybox { padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); font: 15px ui-monospace, Consolas, monospace; letter-spacing: .1em; word-break: break-all; }
.qr { display: block; margin: 10px 0; padding: 10px; border-radius: 10px; background: #fff; }

/* ---------- account / access ---------- */
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-card { display: flex; align-items: center; gap: 16px; min-height: 130px; padding: 18px; margin-bottom: 0; }
.account-avatar { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 700; }
.account-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 22px; font-weight: 700; }
.account-main { min-width: 0; display: grid; gap: 2px; }
.account-main h2 { font-size: 18px; }
.account-main .btn { justify-self: start; margin-top: 8px; }
.account-console { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

.access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.access-card { display: block; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
label.access-card { cursor: pointer; }
label.access-card:hover { border-color: var(--line-2); }
.access-option { display: flex; align-items: flex-start; gap: 10px; }
.access-option input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.access-option span { min-width: 0; display: grid; gap: 2px; }
.access-option b { font-size: 13.5px; font-weight: 600; }
.access-option small { font-size: 12.5px; line-height: 1.4; color: var(--faint); }
.access-card:has(input:disabled) { opacity: .6; cursor: default; }
/* Access cards sit directly inside the user forms: give them the same inset as the field rows, and let a lone card span the row. */
#f-user .access-grid, #f-edit .access-grid, #f-edit .user-access-grid, #f-edit > .scope-warning { margin-left: 0; margin-right: 0; padding: 0 18px; }
#f-user .access-grid > :only-child, #f-edit .user-access-grid > :only-child { grid-column: 1 / -1; }
#f-user > .form-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
#f-edit > .scope-warning { display: block; }
.user-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
.access-card-scope, .access-card-console { display: flex; flex-direction: column; gap: 10px; }
.access-card-head { display: flex; align-items: flex-start; gap: 10px; }
.access-card-head strong { display: block; font-size: 14px; }
.access-card-head p { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.access-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.scope-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scope-mode-option { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.scope-mode-option:hover { background: var(--hover); }
.scope-mode-option input { margin: 0; accent-color: var(--accent); flex: none; }
.scope-selection-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.scope-selection-head > span { font-size: 12.5px; color: var(--muted); }
.scope-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.scope-search-field { margin: 0; }
.scope-list { display: grid; gap: 2px; max-height: 240px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.scope-list.dim { opacity: .6; }
.scope-choice { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.scope-choice:hover { background: var(--hover); }
.scope-choice input { margin: 0; accent-color: var(--accent); flex: none; }
.scope-choice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-empty { padding: 12px; text-align: center; color: var(--faint); }
.scope-warning {
  margin: 0 0 12px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: 13px;
}
.switch-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; user-select: none; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px; background: var(--line-2); transition: background-color .16s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .16s; }
.switch-row input:checked + .switch { background: var(--accent); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row b, .switch-row small { display: block; }
.switch-row b { font-size: 13.5px; font-weight: 600; }
.switch-row small { font-size: 12.5px; color: var(--faint); margin-top: 1px; }
.update-force-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--faint); }

/* ---------- groups of settings ---------- */
.settings-grid { display: grid; gap: 12px; padding: 16px; }
.settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 16px; padding: 16px 18px; }
.settings-fields .field { margin: 0; }
.setting-card .panel-h > div:first-child { min-width: 240px; }
.settings-advanced summary { cursor: pointer; padding: 12px 18px; color: var(--muted); font-weight: 600; }
.pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.user-cap.scope { color: var(--accent); }

/* ---------- device details ---------- */
#dv { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.dv-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; padding: 16px 18px; }
.dv-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; align-content: start; min-width: 0; }
.dv-info > div { display: grid; gap: 2px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.dv-info > div > span { font-size: 12px; color: var(--faint); }
.dv-info > div > b { font-weight: 600; overflow-wrap: anywhere; }
.dv-actions { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dv-actions .field { margin: 0; }
.dv-actions .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-actions .inline-actions .input { width: auto; flex: 1 1 200px; }
.dv-actions > .btn { justify-self: start; }
.dv-actions .check { margin: 0; }
.inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.inline-actions .grow { flex: 1 1 200px; }
.connect-box { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.dv-tools { padding: 16px 18px; border-top: 1px solid var(--line); }
.dv-tools > .panel-h { padding: 0 0 12px; min-height: 0; border-bottom: 0; }
.dv-tabpane { margin-top: 12px; min-width: 0; }
.dv-tabpane.hidden { display: none; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tool-tab {
  padding: 8px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tool-tab:hover { color: var(--text); }
.tool-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.history-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.history-tabs .tool-tab { margin-bottom: -1px; }
.history-pane.hidden { display: none; }
.tool-toolbar, .file-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.tool-toolbar > .faint, .file-toolbar > .faint { font-size: 12.5px; }
.file-toolbar #dv-file-path { margin-left: auto; padding: 4px 10px; border-radius: 6px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.action-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.action-group { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.action-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.action-group-head h3 { font-size: 13.5px; font-weight: 650; }
.action-group-head > span { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface); color: var(--faint); font-size: 12px; text-align: center; line-height: 20px; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.action-grid .btn { width: 100%; justify-content: flex-start; font-weight: 500; }
.action-grid.compact { grid-template-columns: 1fr; }
.tool-result { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.tool-result.hidden { display: none; }
.tool-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.tool-output { max-height: 460px; overflow: auto; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-sm); font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.tool-output.hidden { display: none; }
.tool-output.rich { max-height: 560px; padding: 0; background: transparent; border-radius: 0; font-size: 13.5px; line-height: 1.5; font-family: inherit; white-space: normal; }
.tool-text { margin: 0; padding: 10px 14px; white-space: pre-wrap; font: 12.5px/1.45 ui-monospace, Consolas, monospace; }
.res-kv { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 12px 14px; }
.res-kv dt { color: var(--muted); font-weight: 500; }
.res-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.res-kv .res-kv { padding: 6px 0 6px 12px; border-left: 2px solid var(--line); }
.res-table { overflow: auto; }
.res-table td { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.res-list { margin: 0; padding: 10px 14px 10px 30px; }
.preview-fig { margin: 0; padding: 12px; display: grid; gap: 8px; }
.preview-fig img, .screen-preview { display: block; width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: #000; cursor: zoom-in; }
.preview-fig.big img { max-height: none; cursor: zoom-out; }
.preview-fig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--faint); }
.command-center { display: grid; gap: 12px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.command-center-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.command-center-head h3 { font-size: 14.5px; margin-bottom: 2px; }
.command-center-form { display: grid; gap: 12px; }
.command-center-form .field { margin: 0; }
.command-center-meta { font-size: 12.5px; }
.command-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.command-fields.hidden { display: none; }
.command-center-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-tabpane .command-center + .tool-output { margin-top: 0; }
.chat-bubble { max-width: 74%; margin: 6px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow-wrap: anywhere; }
.chat-bubble.outgoing { margin-left: auto; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.chat-bubble.incoming { margin-right: auto; }
#dv-chat { display: flex; flex-direction: column; max-height: 320px; overflow: auto; padding: 2px 2px 6px; }
.join-pop { position: fixed; right: 20px; bottom: 96px; z-index: 1150; width: min(360px, calc(100vw - 32px)); }
.join-card { padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.join-card b { font-size: 15px; }
.join-card p { margin-top: 6px; color: var(--muted); font-size: 13.5px; }
.join-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- monitoring charts ---------- */
.mcharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; padding: 14px; }
.mchart { position: relative; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); min-width: 0; }
.mchart figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mc-now { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mchart svg { display: block; width: 100%; height: auto; }
.mchart .mc-grid { stroke: var(--line-2); stroke-width: 1; }
.mchart .mc-axis { fill: var(--faint); font-size: 11px; }
.mchart .mc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.mchart .mc-area { fill: var(--accent-soft); }
.mchart .mc-cross { stroke: var(--faint); stroke-dasharray: 3 3; opacity: 0; }
.mchart .mc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; opacity: 0; }
.mchart .mc-hit { fill: transparent; cursor: crosshair; }
.mchart:hover .mc-cross, .mchart:hover .mc-dot { opacity: 1; }
.mc-tip { position: absolute; top: 8px; right: 10px; padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2); font-size: 12px; pointer-events: none; }
.mc-tip[hidden] { display: none; }
.mc-table { margin: 0 14px 12px; }
.mc-table summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0; }

/* ---------- releases & packages ---------- */
.release-hero, .release-summary, .release-meta, .release-files, .release-blocked, .release-preview { padding: 14px 18px; }
.release-summary { display: grid; gap: 4px; }
.release-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.release-step {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--faint); font-size: 13.5px;
}
.release-step.done { color: var(--text); }
.release-step.current { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); font-weight: 600; }
.step-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--line-2); }
.release-step.done .step-dot { background: var(--ok); }
.release-step.current .step-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.release-state { font-weight: 600; }
.release-state.live { color: var(--ok); }
.release-blocked { margin: 12px 18px 0; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--text); }
.release-howto { margin: 12px 0 4px; padding: 0; list-style: none; display: grid; gap: 8px; }
.release-howto .btn { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
.release-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px 16px; }
.release-actions .btn { min-width: 150px; }
.release-files { font-size: 12.5px; color: var(--muted); }
.release-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.release-history { display: grid; gap: 8px; padding: 12px 18px 16px; }
.release-history-card { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); }
.release-history-card.verified { border-left-color: var(--ok); }
.release-history-head, .release-history-main, .release-history-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.release-history-title { font-weight: 600; }
.release-history-meta { font-size: 12.5px; color: var(--faint); }
.release-history-list { display: grid; gap: 8px; }
.update-force-note { margin-top: 8px; }
.updates-package-surface { margin-top: 12px; }
#p-releases .head { margin-top: 0; }
#package-summary { padding: 12px 18px; display: grid; gap: 8px; }
#package-summary .row { padding: 6px 0; border-bottom: 1px solid var(--line); }
#package-summary .row:last-child { border-bottom: 0; }

/* ---------- mail ---------- */
.mail-manager #mail-recipient-list { display: grid; gap: 8px; padding: 14px 18px 4px; }
.mail-recipient { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.mail-recipient-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mail-recipient-main > div { min-width: 0; }
.mail-recipient-main b, .mail-recipient-main span { display: block; overflow-wrap: anywhere; }
.mail-recipient-main span { font-size: 12.5px; color: var(--faint); }
.mail-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.mail-add { display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.mail-add .field { flex: 1 1 auto; margin: 0; }
.mail-add .btn { flex: none; }
.mail-remove { flex: none; }
#mail-prefs { display: grid; gap: 10px; padding: 14px 18px 4px; }
.mail-pref-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.mail-pref-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-weight: 600; }
.mail-pref-list, .mail-pref-options { display: grid; gap: 6px; }
.mail-pref-option { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.mail-pref-option input { margin: 0; accent-color: var(--accent); }
#mail-note { padding: 0 18px 16px; font-size: 12.5px; color: var(--faint); }
.mail-manager + .panel > .form-row, .panel > .form-row:last-child { border-top: 0; }
#p-mail .panel > .form-row { padding: 14px 18px 18px; }

/* ---------- download / install cards ---------- */
.dlcard { display: grid; gap: 12px; padding: 18px; align-content: start; }
.dl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dl-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--faint); }
.dlcard h3 { font-size: 17px; margin-top: 2px; }
.dl-state { padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; white-space: nowrap; }
.dlcard > p.muted { font-size: 13.5px; line-height: 1.55; }
.dl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.dl-version { font-size: 12.5px; }
.dlcard .btn.lg { min-width: 200px; }

/* ---------- inline help ---------- */
.help-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; }
.help-tip {
  display: inline-grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface-2); color: var(--muted);
  font: 700 11px/1 system-ui, sans-serif; cursor: pointer;
}
.help-tip:hover, .help-tip:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); outline: none; }
.help-center-button {
  position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font: 700 19px/1 system-ui, sans-serif; cursor: pointer; box-shadow: var(--shadow);
}
.help-center-button:hover { background: var(--accent-hover); }
body.modal-open .help-center-button { display: none; }

/* ---------- received remote print jobs ---------- */
.remote-print-modal { width: min(760px, calc(100vw - 32px)); max-height: 88vh; overflow: auto; }
.remote-print-job-list { display: grid; gap: 8px; max-height: min(52vh, 480px); overflow: auto; margin-top: 14px; }
.remote-print-job { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.remote-print-job-info { display: grid; gap: 2px; min-width: 0; }
.remote-print-job-info b { overflow-wrap: anywhere; }
.remote-print-job-info span, .remote-print-empty { font-size: 12.5px; color: var(--muted); }

/* ---------- phones & narrow windows ---------- */
@media (max-width: 1100px) {
  .grid2, .account-grid, .access-grid, .user-access-grid { grid-template-columns: 1fr; }
  .dv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: 272px; height: 100dvh;
    padding-top: calc(16px + env(safe-area-inset-top)); transform: translateX(-102%);
    transition: transform .25s ease; box-shadow: var(--shadow);
  }
  .rail.open { transform: none; }
  .rail-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 10, 16, .4); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .rail-scrim.on { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-grid; }
  .content { padding-top: calc(16px + env(safe-area-inset-top)); }
}
@media (max-width: 760px) {
  .head h1 { font-size: 21px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 21px; }
  #v-app th, #v-app td { padding: 9px 12px; }
  #v-app .hide-sm { display: none; }
  .panel-h .input { width: 100%; }
  .scope-mode { grid-template-columns: 1fr; }
  .form-row:has(> .grow) { grid-template-columns: 1fr; }
  .health-strip { grid-template-columns: 1fr 1fr; }
  .toast-stack { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (max-width: 600px) {
  /* 16px or more: iOS Safari zooms the page when a smaller text field gets focus. */
  .input, #v-login input[type="text"], #v-login input[type="password"], #v-login input[type="email"] { font-size: 16px; }
  .auth { padding: 16px; }
  .auth-card { padding: 26px 22px 22px; border-radius: 14px; }
  .ui-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 20px 18px 16px; border-radius: 14px; }
  .ui-modal-actions { display: grid; grid-template-columns: 1fr; }
  .ui-modal-actions > .btn { width: 100%; min-height: 42px; }
  .ui-form > .ui-modal-actions { padding: 16px 18px; }
  .ui-form > .field, .ui-form > .check-groups, .ui-form > .check, .ui-form > .form-row { padding-left: 18px; padding-right: 18px; }
  .ui-form > .ui-modal-title, .ui-form > .ui-modal-text { padding-left: 18px; padding-right: 18px; }
  .form-row { padding: 14px; }
  .dv-tools { padding: 14px; }
  .dv-grid { padding: 14px; }
  .release-actions .btn { width: 100%; }
  .file-toolbar #dv-file-path { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- remote screen (oddaljeni zaslon, nespremenjeno vedenje) ---------- */
/* Remote screen in the browser (app.js openRemote): immersive, responsive and touch-safe. */
#rv{position:fixed;inset:0;z-index:9999;background:#0b0f19;display:flex;flex-direction:column;color:#e6e9f2;font:13px system-ui,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;--rv-vh:100dvh}
#rv .bar{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;background:#121825;border-bottom:1px solid #222b3d;z-index:4}
#rv .bar b{margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
#rv .bar .sp{flex:1}
#rv .tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* The session's own controls only: the dialogs and notices raised during a session (they live inside #rv) keep their normal look. */
#rv > .bar button,#rv > .bar select,#rv > button,#rv > .rv-keyboard-panel button,#rv > .rv-keyboard-panel select{background:#1b2333;color:inherit;border:1px solid #2c3750;border-radius:8px;padding:7px 10px;font:inherit;min-height:34px}
#rv > .bar button:hover,#rv > button:hover,#rv > .rv-keyboard-panel button:hover{border-color:#4d5d7a;background:#222c40}
#rv > .bar button:focus-visible,#rv > .bar select:focus-visible,#rv > button:focus-visible,#rv > .rv-keyboard-panel button:focus-visible,#rv > .rv-keyboard-panel select:focus-visible{outline:2px solid #7fa7ff;outline-offset:2px}
#rv > .bar button.end{background:#e54343;border-color:#e54343;color:#fff}
#rv > .bar button.more{display:none}
#rv .st{opacity:.75;font-size:12px;white-space:nowrap}
#rv .rv-notice{display:none;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border:1px solid #3f4f6a;border-radius:7px;background:#1b2333;color:#f1f4fa;font-size:12px}
#rv .rv-notice.show{display:inline-flex}
#rv .stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;background:#000;contain:layout paint}
#rv canvas{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;outline:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;transform-origin:center center;will-change:transform}
#rv .rv-touch-indicator{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #1118,0 3px 12px #0008;pointer-events:none;opacity:0;transform:scale(.85);transition:opacity .12s,transform .12s;z-index:8}
#rv .rv-touch-indicator.show{opacity:.72;transform:scale(1)}
#rv .rv-keyboard-panel{position:absolute;left:8px;right:8px;bottom:8px;z-index:12;display:none;padding:8px;border:1px solid #34415a;border-radius:12px;background:#121825f2;box-shadow:0 16px 40px #0009;backdrop-filter:blur(8px);max-height:min(46%,420px);overflow:auto}
#rv .rv-keyboard-panel.open{display:block}
#rv .rv-kb-head{display:flex;align-items:center;gap:6px;margin-bottom:7px;position:sticky;top:0}
#rv .rv-kb-head b{margin-right:auto}
#rv .rv-kb-input{width:100%;min-height:38px;margin:0 0 7px;padding:8px 10px;border:1px solid #34415a;border-radius:8px;background:#0b0f19;color:#e6e9f2;font:inherit;outline:none}
#rv .rv-kb-input:focus{border-color:#7fa7ff;box-shadow:0 0 0 2px #7fa7ff33}
#rv .rv-kb-rows{display:grid;gap:6px}
#rv .rv-kb-row{display:flex;gap:5px}
#rv .rv-key{flex:1 1 0;min-width:0;min-height:36px;padding:6px 7px;font-size:12px}
#rv .rv-key.active{background:#40557e;border-color:#7fa7ff}
#rv:fullscreen,#rv:-webkit-full-screen{width:100vw;height:100vh;background:#0b0f19}
#rv.web-fullscreen{position:fixed;inset:0;width:100vw;height:var(--rv-vh,100dvh);z-index:2147483647}
html.remote-web-fullscreen,body.remote-web-fullscreen{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
#rv.fullscreen-mode .bar{position:absolute;top:0;left:0;right:0;transform:translateY(-115%);opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease;padding-top:calc(6px + env(safe-area-inset-top));padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
#rv.fullscreen-mode.fs-bar-visible .bar{transform:translateY(0);opacity:1;pointer-events:auto}
#rv .fs-float{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:6;display:none;width:42px;height:42px;padding:0;border-radius:12px;background:#121825e8;border:1px solid #34415a;box-shadow:0 6px 24px #0006;font-size:22px;line-height:1}
#rv.fullscreen-mode .fs-float{display:block}
#rv .zoom-reset{position:absolute;right:calc(62px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:6;display:none;min-width:52px;padding:7px 9px;background:#121825e8;border:1px solid #34415a;box-shadow:0 6px 24px #0006}
#rv .zoom-reset.active{display:block}
#rv .ov{position:absolute;padding:14px 20px;border-radius:10px;background:#141b2ce0;text-align:center;max-width:85%;pointer-events:none;box-shadow:0 8px 34px #0005}
#rv input.kb{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* site.css gives .stage the website's mock-window margin and width: the session's picture uses the whole screen. */
#rv .stage{margin:0;max-width:none;perspective:none}
/* Dialogs and notices raised during a session sit inside #rv (app.js moveUiLayers): they keep the page's text and selection. */
#rv > .modal-host,#rv > .toast-stack,#rv > .join-pop{color:var(--text);font:14.5px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}
#rv > .modal-host,#rv > .modal-host *,#rv > .toast-stack,#rv > .toast-stack *,#rv > .join-pop,#rv > .join-pop *{user-select:text;-webkit-user-select:text}
@media (max-width:760px),(pointer:coarse) and (max-height:560px){
  #rv .bar{flex-wrap:nowrap;min-height:44px;padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
  #rv .bar b{max-width:34vw}
  #rv > .bar button.more{display:inline-flex;align-items:center;justify-content:center}
  #rv .tools{display:none;position:absolute;top:100%;left:6px;right:6px;z-index:7;background:#121825;border:1px solid #2c3750;border-radius:10px;padding:8px;box-shadow:0 14px 36px #0007}
  #rv.open .tools{display:flex}
  #rv .tools button,#rv .tools select{flex:1 1 40%}
  #rv .fs-float{right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom))}
  #rv .zoom-reset{right:calc(62px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media (max-width:760px),(pointer:coarse) and (max-height:560px){
  #rv .rv-keyboard-panel{left:6px;right:6px;bottom:6px;max-height:58%;padding:7px}
  #rv .rv-key{min-height:38px;font-size:11px}
  #rv .rv-kb-row{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  #rv.fullscreen-mode .bar{transition:none}
}

/* ---------- pregled po straneh: poravnava ---------- */
.live:empty { display: none; }
.mail-recipient-main .mail-avatar { display: grid; place-items: center; }
form.panel > .field { margin: 14px 18px 0; }
form.panel > .btn { margin: 14px 18px 18px; }
form.panel { padding-bottom: 0; }
.grid2 { margin-bottom: 16px; }
.grid2 > .panel { margin-bottom: 0; }

/* =====================================================================
   Sodobna plast (v2): prijava in nadzorna plošča. Nalaga se zadnja in
   samo dopolnjuje zgornje sloge; barve prihajajo iz istih tokenov.
   ===================================================================== */

/* ---------- prijava: ozadje z lučmi, steklena kartica ---------- */
.auth {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(900px 540px at 12% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(760px 520px at 105% 110%, color-mix(in srgb, #a25bf0 16%, transparent), transparent 60%),
    var(--bg);
}
.auth::before, .auth::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .5;
  width: 48vmax; height: 48vmax; pointer-events: none;
}
.auth::before { left: -16vmax; top: -18vmax; background: color-mix(in srgb, var(--accent) 45%, transparent); animation: a-float 22s ease-in-out infinite alternate; }
.auth::after { right: -18vmax; bottom: -22vmax; background: color-mix(in srgb, #22b8e8 40%, transparent); animation: a-float 28s ease-in-out infinite alternate-reverse; }
@keyframes a-float { to { transform: translate3d(5vw, 4vh, 0) scale(1.08); } }

.auth-card {
  position: relative; width: min(420px, 100%); padding: 36px 34px 30px; border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--line-2) 80%, transparent);
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: a-pop .55s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes a-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.auth-card.shake { animation: a-shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes a-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.auth-card .brand { margin-bottom: 26px; }
.auth-card .brand .mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #7c8cff, var(--accent) 45%, #22b8e8); box-shadow: 0 10px 24px -10px var(--accent); display: grid; place-items: center; }
.auth-card .brand .mark img { width: 40px; height: 40px; border-radius: 12px; }
.auth-card .brand::after {
  content: "ADMIN"; margin-left: auto; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); background: var(--accent-soft);
}
.auth-card h1 { font-size: 26px; letter-spacing: -.025em; }
.auth-card .sub { margin-bottom: 24px; font-size: 14.5px; }

/* polja z ikonami */
.iw { position: relative; display: flex; align-items: center; min-width: 0; }
.iw > .ico, .iw > svg:first-child { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; transition: color .2s; }
.iw > .input { padding-left: 42px; }
.iw > .input:focus ~ .ico, .iw:focus-within > .ico { color: var(--accent); }
.iw > .input[type="password"], .iw > .input[type="text"] { padding-right: 44px; }
.iw > .input[type="text"]:not(#u):not(#fl) { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer;
}
.pw-toggle:hover { color: var(--text); background: var(--hover); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle.on svg { color: var(--accent); }
.pw-toggle.on svg path:first-child { opacity: .45; }
.auth-card .input { min-height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 85%, transparent); }
.auth-card .field { margin-bottom: 16px; }
.auth-card .field > label { font-size: 13px; }

/* gumb: gradient, lebdenje ob kazalcu */
.auth-card .btn.lg {
  min-height: 48px; border-radius: 13px; font-size: 15px; margin-top: 6px;
  background: var(--btn-grad);
  color: var(--on-accent); box-shadow: 0 14px 30px -14px var(--accent); border: 0;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.auth-card .btn.lg:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px var(--accent); filter: brightness(1.04); }
.auth-card .btn.lg:active { transform: translateY(0) scale(.99); }
.auth-card .btn.lg.ghost { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--line-2); }
.auth-card .btn.lg.ghost:hover { background: var(--hover); }
.auth-card .check { margin: 0 0 4px; }
.auth-card .check input[type="checkbox"] { border-radius: 5px; }
.auth-card .linkish { font-size: 13.5px; }
#login-note { font-size: 12.5px; color: var(--faint); line-height: 1.5; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- nadzorna plošča: globina in poudarki ---------- */
.content {
  background:
    radial-gradient(1100px 380px at 80% -160px, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
.head h1 { font-size: 26px; letter-spacing: -.025em; }
.head p { font-size: 14.5px; }

.rail {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rail) 100%, transparent), color-mix(in srgb, var(--rail) 96%, var(--accent) 4%));
}
.rail .brand .mark { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #7c8cff, var(--accent) 45%, #22b8e8); box-shadow: 0 8px 18px -8px var(--accent); display: grid; place-items: center; }
.rail .brand .mark img { width: 34px; height: 34px; border-radius: 11px; }
button.nav-i { border-radius: 10px; }
button.nav-i.on { background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent) 4%, transparent)); }
button.nav-i:hover { transform: translateX(2px); }
button.nav-i { transition: background-color .18s, color .18s, transform .18s; }

.panel {
  border-radius: 16px; border-color: color-mix(in srgb, var(--line) 100%, transparent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -24px rgba(15, 23, 42, .22);
  transition: box-shadow .25s, border-color .25s;
}
.panel:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -26px rgba(15, 23, 42, .3); }
.panel-h { min-height: 58px; }
.panel-h h2 { font-size: 15.5px; }

.stat {
  position: relative; overflow: hidden; border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -22px rgba(15, 23, 42, .25);
}
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); opacity: .7; }
.stat.ok::before { background: var(--ok); }
.stat.warn::before { background: var(--warn); }
.stat span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--faint); }
.stat b { font-size: 28px; }

.btn {
  border-radius: 10px; transition: background-color .18s, transform .15s, box-shadow .18s, border-color .18s;
}
.btn:not(.ghost):not(.bad):not(.ok) {
  background: var(--btn-grad);
  box-shadow: 0 8px 18px -10px var(--accent);
}
.btn:not(.ghost):not(.bad):not(.ok):hover { background: var(--btn-grad-hover); box-shadow: 0 12px 22px -10px var(--accent); transform: translateY(-1px); }
.btn.ghost { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.btn.ghost:hover { transform: translateY(-1px); }

.input { border-radius: 10px; }
.toast {
  border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ui-modal { border-radius: 18px; }
.dv-info > div { border-radius: 12px; }
.chat-bubble { border-radius: 14px; }

/* tabela: bolj zrak, sveža glava */
#v-app th { background: color-mix(in srgb, var(--surface-2) 90%, transparent); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
#v-app td { padding-top: 11px; padding-bottom: 11px; }

@media (prefers-reduced-motion: reduce) {
  .auth::before, .auth::after, .auth-card, .auth-card.shake { animation: none !important; }
}
.auth-card .btn.lg:not(.ghost) { color: var(--on-accent); }
.auth-card .btn.lg.ghost { font-size: 14px; font-weight: 600; min-height: 46px; line-height: 1.25; }

/* =====================================================================
   Poravnava v3: pravila z višjo specifičnostjo, ker admin/index.html
   najprej naloži site.css (zahteva release gate). Nič ne prekriva vsebine.
   ===================================================================== */
#v-app .rail { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; }
#v-app .rail > * { flex-shrink: 0; }
#v-app .rail .brand {
  display: flex; align-items: center; gap: 10px; min-height: 0; margin: 0 0 6px; padding: 4px 8px 14px;
  font-size: 15px; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--line);
}
#v-app .rail .brand .mark { width: 34px; height: 34px; flex: none; }
#v-app .rail .brand::after { font-size: 10px; padding: 2px 7px; margin-left: auto; }
#v-app .rail .nav-label { margin: 0; padding: 14px 10px 4px; font-size: 12px; font-weight: 600; }
#v-app .rail button.nav-i {
  min-height: 38px; padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; gap: 10px;
}
#v-app .rail button.nav-i.on { font-weight: 600; }
#v-app .rail .me {
  position: relative; inset: auto; margin: auto 0 0; padding: 10px; flex: none;
  display: flex; align-items: center; gap: 8px; box-shadow: none; background: var(--surface);
}
#v-app .rail .me .av2 { width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: none; font-size: 13px; }
#v-app .rail .me .who { flex: 1; min-width: 0; }
#v-app .rail .me .who b, #v-app .rail .me .who span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#v-app .rail .me .icon-btn { width: 30px; height: 30px; flex: none; }

/* stran z nastavitvami in tabelami: ena širina, nič ne seka robov */
#v-app .content { min-width: 0; }
#v-app .page { min-width: 0; }
#v-app .head h1 { font-size: 24px; }
#v-app .panel > div:not(.panel-h) { min-width: 0; }

/* ---------- zložljivi paneli (ui.js) ---------- */
.panel-h.fold-head { cursor: pointer; user-select: none; position: relative; }
/* The fold button sits in a strip at the right edge: the header keeps that strip clear whatever padding the theme or the phone layout sets. */
#v-app .panel-h.fold-head { padding-right: 52px !important; }
.panel-h.fold-head:hover { background: color-mix(in srgb, var(--hover) 70%, transparent); }
.fold-toggle {
  position: absolute; right: 9px; top: 50%; width: 34px; height: 34px; padding: 0; transform: translateY(-50%);
  border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer;
}
.fold-toggle:hover { background: var(--hover); }
.fold-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fold-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s ease;
}
.panel.is-collapsed > .panel-h .fold-toggle::after { transform: translate(-50%, -30%) rotate(-135deg); }
.panel.is-collapsed > :not(.panel-h) { display: none !important; }
.panel.is-collapsed > .panel-h { border-bottom: 0; }

/* =====================================================================
   Sodobna plast v4: čitljivost in stanja. Pravila so zadnja v datoteki in
   imajo specifičnost, ki je enaka ali višja od site.css, zato veljajo v obeh temah.
   ===================================================================== */
/* Poravnava: prvi in zadnji stolpec tabele sledita robu glave panela (20 px). */
#v-app table th:first-child, #v-app table td:first-child { padding-left: 20px; }
#v-app table th:last-child, #v-app table td:last-child { padding-right: 20px; }
/* Število v meniju (čakajoče odobritve, posodobitve) uporablja barve opozorila v obeh temah. */
#v-app .rail .badge { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
/* Pritisnjen gumb: rahla vdolbina, ne samo premik. */
#v-app .btn:not(:disabled):active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16); }
/* Prazno stanje: tiha pikčasta oznaka nad besedilom. */
#v-app .empty::before {
  content: ""; display: block; width: 36px; height: 36px; margin: 0 auto 12px;
  border: 1.5px dashed var(--line-2); border-radius: 50%;
}

/* ---------- custom date calendar ---------- */
.cal { position: relative; }
.cal-show { width: 100%; text-align: left; cursor: pointer; }
.cal-pop { position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0; width: 280px; padding: 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.cal-pop[hidden] { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; text-transform: capitalize; }
.cal-head button { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-day { height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; }
.cal-day:hover { background: var(--hover); }
.cal-day.today { outline: 1px solid var(--accent); }
.cal-day.on { background: var(--accent); color: var(--on-accent); }
.cal-clear { margin-top: 8px; width: 100%; height: 30px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; }

/* ---------- subscriptions: filters and rows ---------- */
.subs-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); }
.seg button { border: 0; border-radius: 9px; padding: 7px 12px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.subs-search { max-width: 280px; }
.subs-list { display: grid; gap: 8px; }
.sub-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(90px, 1fr) minmax(200px, 1.5fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.sub-who, .sub-until { display: grid; gap: 4px; min-width: 0; }
.sub-fee { font-weight: 700; }
.sub-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 860px) {
  .sub-row { grid-template-columns: 1fr; }
  .sub-actions { justify-content: flex-start; }
  .subs-search { max-width: none; width: 100%; }
}

/* ---------- overview: attention chips ---------- */
.attn { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.attn-chip { border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; background: var(--surface-2); color: var(--text); font-weight: 600; cursor: pointer; }
.attn-chip.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft, var(--surface-2)); }
.attn-chip:hover { border-color: var(--accent); }

/* ---------- nav groups (site.css rules that the admin page still needs) ---------- */
.nav-group { margin: 14px 0 4px; padding: 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nav-group:first-of-type { margin-top: 6px; }
.tool-tabs-main { gap: 5px; padding: 4px 0 12px; }
body.menu-open { overflow: hidden; }

/* ---------- site.css still loads first (the release gate checks for it): its hard-coded dark page backgrounds are overridden here,
   and the remote-session toolbar keeps light text on its dark bar in both themes ---------- */
#v-app, #v-login { background: var(--bg) !important; }
#rv { color: #e6e9f2; }
#rv .bar, #rv .bar b, #rv .bar span, #rv .bar label { color: #e6e9f2; }
#rv .bar button, #rv .bar select { color: #e6e9f2; background: #1d2433; border-color: #2c3850; }
#rv .bar button:hover { background: #26304a; }

/* Remote viewer toolbar: dark native controls (the light selects hid their text), larger text, every control visible. */
#rv { color-scheme: dark; }
#rv .bar { font-size: 14px; gap: 8px; padding: 8px 10px; min-height: 52px; background: #121825 !important; }
#rv .bar > *, #rv .tools > * { flex: 0 0 auto; }
#rv .bar button, #rv .bar select, #rv .tools button, #rv .tools select { min-height: 36px; font-size: 14px; color: #eef2fa !important; background-color: #1d2536 !important; border: 1px solid #34405c !important; border-radius: 8px; padding: 6px 12px; }
#rv .bar select option, #rv .tools select option { background: #1d2536; color: #eef2fa; }
#rv .bar button.primary, #rv .bar button#rv-fs { background-color: #3f5bd8 !important; border-color: #5a74ea !important; color: #fff !important; }
#rv .bar span, #rv .bar b, #rv .st { color: #eef2fa !important; }
/* Session toolbar menus: each function has one place (Pogled, Slika, Vnos, Tiskanje, Napajanje). */
#rv .rv-menu{position:relative}
#rv .rv-menu>summary{list-style:none;cursor:pointer;background:#1b2333;border:1px solid #2c3750;border-radius:8px;padding:7px 12px;min-height:34px;box-sizing:border-box;display:flex;align-items:center;gap:6px}
#rv .rv-menu>summary::-webkit-details-marker{display:none}
#rv .rv-menu>summary::after{content:"▾";opacity:.7}
#rv .rv-menu[open]>summary{border-color:#4a6fe8;background:#222c40}
#rv .rv-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:10;min-width:220px;display:flex;flex-direction:column;gap:4px;padding:8px;background:#121825;border:1px solid #2c3750;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
#rv .rv-pop button{text-align:left;width:100%}
#rv .rv-pop button.on{border-color:#4a6fe8;background:#243b7a}
#rv .rv-pop label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#9aa4b8}
#rv #rv-side{border-color:#4a6fe8}

/* ---------- Session toolbar in the page's theme (light by default): the fixed dark bar was hard to read. The picture's
   surroundings stay black; only the bar, its menus and the chat panel follow the theme. ---------- */
html[data-theme="light"] #rv .bar, html[data-theme="light"] #rv .rv-chat { color-scheme: light; }
#rv .bar { background: var(--surface) !important; border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
#rv .bar, #rv .bar b, #rv .bar span, #rv .bar label { color: var(--text) !important; }
#rv .bar .st { color: var(--muted) !important; opacity: 1; font-variant-numeric: tabular-nums; }
#rv .bar .st[data-q]:not([data-q=""])::before { content: "●"; margin-right: 6px; font-size: 10px; vertical-align: 1px; }
#rv .bar .st[data-q="good"]::before { color: #3ddc97; }
#rv .bar .st[data-q="fair"]::before { color: #f5b942; }
#rv .bar .st[data-q="poor"]::before { color: #ff6b7a; }
#rv .bar button, #rv .bar select, #rv .tools button, #rv .tools select, #rv .rv-menu > summary { color: var(--text) !important; background-color: var(--surface-2) !important; border: 1px solid var(--line-2) !important; }
#rv .bar button:hover, #rv .bar select:hover, #rv .rv-menu > summary:hover { background-color: var(--hover) !important; border-color: var(--accent) !important; }
#rv .bar select option, #rv .tools select option { background: var(--surface); color: var(--text); }
#rv .rv-menu[open] > summary, #rv .bar button.on, #rv .rv-pop button.on { background-color: var(--accent-soft) !important; border-color: var(--accent) !important; }
/* ---------- the customers' sign-in (podlipnik.si/pomoc/stranke/): the website's night sky, whatever theme the app uses ---------- */
html.portal.portal.portal #v-login.auth { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: center; justify-items: center; padding: 40px 18px;
  background: radial-gradient(120% 90% at 50% 0%, #0b1024 0%, #05070f 55%, #020308 100%) !important; color: #eef1fb; }
html.portal.portal.portal #v-login .portal-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
html.portal.portal.portal #v-login .portal-glow { position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .55;
  background: radial-gradient(38% 34% at 18% 22%, rgba(96, 112, 255, .55), transparent 70%), radial-gradient(34% 30% at 84% 14%, rgba(40, 190, 255, .42), transparent 70%), radial-gradient(40% 36% at 62% 88%, rgba(150, 90, 255, .30), transparent 72%); }
html.portal.portal.portal #v-login .portal-words, html.portal.portal.portal #v-login .auth-card { position: relative; z-index: 1; }
html.portal.portal.portal #v-login .portal-words { max-width: 460px; width: 100%; }
html.portal.portal.portal #v-login .portal-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #36c6ff; }
html.portal.portal.portal #v-login .portal-words h2 { margin: 0 0 14px; font-size: clamp(30px, 6vw, 46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: #fff; text-shadow: 0 0 60px rgba(90, 120, 255, .35); }
html.portal.portal.portal #v-login .portal-words h2 span { background: linear-gradient(100deg, #8f9cff, #4fd0ff 55%, #b9ffe9); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.portal.portal.portal #v-login .portal-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #b9c2dd; }
html.portal.portal.portal #v-login .portal-words ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
html.portal.portal.portal #v-login .portal-words li { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: #a6b0cc; border: 1px solid rgba(140, 160, 255, .2); background: rgba(255, 255, 255, .04); }
html.portal.portal.portal #v-login .portal-words li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #36c6ff; box-shadow: 0 0 10px #36c6ff; vertical-align: 2px; }
html.portal.portal.portal #v-login .auth-card { width: 100%; max-width: 420px; border-radius: 24px; border: 1px solid rgba(140, 160, 255, .22); color: #eef1fb;
  background: linear-gradient(160deg, rgba(30, 38, 66, .78), rgba(12, 16, 30, .82)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(127, 143, 255, .06); }
html.portal.portal.portal #v-login .auth-card .brand { color: #fff; }
html.portal.portal.portal #v-login .auth-card h1 { color: #fff; }
html.portal.portal.portal #v-login .auth-card .sub, html.portal.portal.portal #v-login .auth-card .faint, html.portal.portal.portal #v-login .auth-card .check, html.portal.portal.portal #v-login .auth-card small { color: #a6b0cc; }
html.portal.portal.portal #v-login .auth-card label, html.portal.portal.portal #v-login .auth-card .field label { color: #cfd6f0; }
html.portal.portal.portal #v-login .auth-card .input { background: rgba(4, 7, 16, .6); border-color: rgba(150, 170, 255, .26); color: #fff; }
html.portal.portal.portal #v-login .auth-card .input:focus { border-color: #7f8fff; box-shadow: 0 0 0 3px rgba(127, 143, 255, .28); }
html.portal.portal.portal #v-login .auth-card .input::placeholder { color: #6f7a99; }
html.portal.portal.portal #v-login .auth-card .iw button, html.portal.portal.portal #v-login .auth-card .iw .ico { color: #a6b0cc; }
html.portal.portal.portal #v-login .auth-card .btn.lg:not(.ghost) { border: 0; color: #040714; font-weight: 700; background: linear-gradient(120deg, #6f7dff, #3cb7ff 60%, #7ff3d6 130%); box-shadow: 0 14px 40px -14px rgba(70, 120, 255, .9); }
html.portal.portal.portal #v-login .auth-card .btn.lg:not(.ghost):hover { transform: translateY(-1px); box-shadow: 0 22px 60px -16px rgba(70, 140, 255, 1); }
html.portal.portal.portal #v-login .auth-card .btn.ghost { background: rgba(255, 255, 255, .05); border-color: rgba(150, 170, 255, .26); color: #eef1fb; }
html.portal.portal.portal #v-login .auth-card .linkish, html.portal.portal.portal #v-login .portal-back { color: #9fb0ff; }
html.portal.portal.portal #v-login .portal-back { display: block; margin-top: 18px; text-align: center; font-size: 13px; text-decoration: none; }
html.portal.portal.portal #v-login .portal-back:hover { color: #fff; }
html.portal.portal.portal #v-login.auth::before, html.portal.portal.portal #v-login.auth::after, html.portal.portal.portal #v-login .auth-card::before { display: none; }
html.portal.portal.portal #v-login .auth-card .brand::after { content: "OD DOMA"; color: #9fdcff; border-color: rgba(54, 198, 255, .3); background: rgba(54, 198, 255, .08); }
@media (min-width: 980px) {
  html.portal.portal.portal #v-login.auth { grid-template-columns: minmax(0, 460px) minmax(0, 420px); justify-content: center; align-items: center; gap: 72px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.portal.portal.portal #v-login .portal-glow { animation: portal-drift 26s ease-in-out infinite alternate; }
  @keyframes portal-drift { from { transform: translate3d(-3%, -2%, 0) rotate(-4deg); } to { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.1); } }
  html.portal.portal.portal #v-login .portal-words, html.portal.portal.portal #v-login .auth-card { animation: portal-in .8s cubic-bezier(.2, .8, .2, 1) both; }
  html.portal.portal.portal #v-login .auth-card { animation-delay: .12s; }
  @keyframes portal-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}
/* Fields and tabs only a technician can use are not shown to a customer account (see enterApp). */
.is-customer [data-staff] { display: none !important; }
body:not(.is-customer) .customer-only { display: none !important; }
/* A switched-on tool says so in its text too, not only by its colour. */
#rv .bar button.on::before, #rv .rv-pop button.on::before, #rv .tools button.on::before { content: "✓ "; }
#rv .rv-pop { background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); max-height: min(72vh, 560px); overflow: auto; }
#rv .rv-pop label, #rv .rv-pop .rv-sep { color: var(--muted) !important; }
#rv .rv-pop .rv-sep { margin: 6px 2px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#rv .rv-combos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#rv .rv-combos button { text-align: center; padding: 6px 8px; }
#rv .rv-notice { background: var(--accent-soft); border-color: var(--accent); color: var(--text) !important; }
#rv .bar button.end { background-color: #d93a3a !important; border-color: #d93a3a !important; color: #fff !important; font-weight: 600; }
#rv .bar button.end:hover { background-color: #c22f2f !important; border-color: #c22f2f !important; }
#rv .bar button#rv-fs { color: #fff !important; }
#rv .bar button.rec { background-color: #d93a3a !important; border-color: #d93a3a !important; color: #fff !important; }
/* Chat with the customer: beside the picture on a wide screen, over its lower part on a phone. */
#rv .rv-chat { position: absolute; right: 10px; bottom: 10px; z-index: 11; width: min(320px, calc(100vw - 20px)); height: min(440px, 62%); display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); user-select: text; -webkit-user-select: text; font-size: 14px; }
#rv .rv-chat[hidden] { display: none; }
#rv .rv-chat-head { display: flex; align-items: center; justify-content: space-between; }
#rv .rv-chat button { min-height: 34px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
#rv .rv-chat-form button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
#rv .rv-chat-lines { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
#rv .rv-chat-line { align-self: flex-start; max-width: 88%; padding: 6px 9px; border-radius: 9px; background: var(--surface-2); overflow-wrap: anywhere; }
#rv .rv-chat-line.mine { align-self: flex-end; background: var(--accent-soft); }
#rv .rv-chat-line small { display: block; font-size: 11px; color: var(--muted); }
#rv .rv-chat-form { display: flex; gap: 6px; }
#rv .rv-chat-form input { flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }
#rv .rv-chat-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Files on the PC: the chat panel's frame, on the left. */
#rv .rv-pull { right: auto; left: 10px; width: min(380px, calc(100vw - 20px)); }
#rv .rv-pull-path { font-size: 12px; overflow-wrap: anywhere; }
#rv .rv-pull-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; }
#rv .rv-pull-row small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
/* Command line on the PC: a dark console panel, left of the chat. */
#rv .rv-term { position: absolute; left: 10px; bottom: 10px; z-index: 11; width: min(720px, calc(100vw - 20px)); height: min(420px, 60%); display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #2a3346; border-radius: 12px; background: #0d1117; color: #d7e0ee; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); user-select: text; -webkit-user-select: text; }
#rv .rv-term[hidden] { display: none; }
#rv .rv-term-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
#rv .rv-term-head b { flex: 1; }
#rv .rv-term-head small { color: #8b98ad; }
#rv .rv-term button { min-height: 30px; padding: 4px 10px; border: 1px solid #2a3346; border-radius: 8px; background: #161c27; color: #d7e0ee; font: inherit; cursor: pointer; }
#rv .rv-term pre { flex: 1; min-height: 0; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; }
#rv .rv-term pre .cmd { color: #7ee2a8; }
#rv .rv-term pre .sys { color: #8b98ad; }
#rv .rv-term form { display: flex; gap: 6px; align-items: center; font: 12.5px ui-monospace, "Cascadia Mono", Consolas, monospace; }
#rv .rv-term form span { color: #7ee2a8; }
#rv .rv-term input { flex: 1; min-width: 0; min-height: 32px; padding: 4px 8px; border: 1px solid #2a3346; border-radius: 8px; background: #161c27; color: #d7e0ee; font: inherit; }
#rv .rv-term input:focus { outline: 2px solid #3d8bfd; outline-offset: 1px; }
@media (max-width:760px),(pointer:coarse) and (max-height:560px) {
  #rv .tools { background: var(--surface); border-color: var(--line-2); max-height: 70vh; overflow: auto; }
  #rv .rv-pop { position: static; box-shadow: none; margin-top: 6px; }
  #rv .rv-menu { flex: 1 1 100%; }
}

#rv .stage.rv-drop::after { content: "Spustite datoteke – poslane bodo na namizje stranke"; position: absolute; inset: 12px; z-index: 9; display: flex; align-items: center; justify-content: center; border: 2px dashed #7fa7ff; border-radius: 14px; background: rgba(18, 24, 37, .72); color: #fff; font-size: 17px; pointer-events: none; }
/* 1:1 view: the picture keeps its own size and the stage scrolls (start-aligned, otherwise the top-left part could not be reached). */
#rv .stage.rv-one { overflow: auto; align-items: flex-start; justify-content: flex-start; }
#rv .stage.rv-one canvas { max-width: none; max-height: none; flex: none; }
/* Drawing on the customer's screen: a crosshair instead of the remote pointer's shape, so it is clear that the mouse draws. */
#rv canvas.rv-drawing { cursor: crosshair !important; }
/* Session on a phone: it should feel like an app, not like a page. Nothing behind the session moves (no pull-to-refresh, which
   would end the session, no rubber band), a tap is never a double-tap zoom, and nothing flashes under the finger. */
html.rv-open, html.rv-open body { overflow: hidden; overscroll-behavior: none; }
#rv { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#rv .kb-float { position: absolute; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6; display: none; width: 46px; height: 46px; padding: 0; border-radius: 14px; background: #121825e8; border: 1px solid #34415a; box-shadow: 0 6px 24px #0006; color: #e6e9f2; font-size: 22px; line-height: 1; opacity: .8; }
#rv .kb-float:active { opacity: 1; transform: scale(.94); }
@media (pointer:coarse) {
  #rv .kb-float { display: block; }
  #rv .bar button, #rv .bar select, #rv .tools button, #rv .tools select, #rv .rv-menu > summary { min-height: 44px; }
  #rv .rv-key { min-height: 44px; }
  #rv .fs-float { width: 46px; height: 46px; }
}
@media (max-width:760px),(pointer:coarse) and (max-height:560px) {
  /* The notice had a third of the bar and cut its text off: on a phone it is a line of its own under the bar. */
  #rv .rv-notice { position: absolute; top: calc(100% + 8px); left: 8px; right: 8px; max-width: none; white-space: normal; z-index: 5; background: var(--surface); padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); pointer-events: none; }
  #rv .bar { padding-top: 6px; padding-bottom: 6px; min-height: 48px; }
}
/* Session settings: a panel under the toolbar on a PC, the whole screen on a phone. */
#rv .rv-sheet { position: absolute; top: 64px; right: 12px; z-index: 30; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 84px); display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); font-size: 14px; }
#rv .rv-sheet[hidden] { display: none; }
#rv .rv-sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
#rv .rv-sheet-head b { font-size: 15px; }
#rv .rv-sheet-head span { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#rv .rv-sheet-head button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
#rv .rv-sheet-body { overflow: auto; overscroll-behavior: contain; padding: 4px 14px 14px; touch-action: pan-y; }
#rv .rv-sheet h3 { margin: 14px 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
#rv .rv-field { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
#rv .rv-field[hidden], #rv .rv-row[hidden] { display: none; }
#rv .rv-field > span { color: var(--muted); font-size: 12.5px; }
#rv .rv-seg { display: flex; padding: 3px; gap: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
#rv .rv-seg button { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
#rv .rv-seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
#rv .rv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
#rv .rv-row > span { flex: 1; min-width: 0; }
#rv .rv-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.3; }
#rv .rv-switch { flex: none; position: relative; width: 50px; height: 30px; padding: 0; border: 0; border-radius: 15px; background: var(--line-2); cursor: pointer; transition: background .15s; }
#rv .rv-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .15s; }
#rv .rv-switch[aria-checked="true"] { background: var(--accent); }
#rv .rv-switch[aria-checked="true"]::after { transform: translateX(20px); }
#rv .rv-switch:focus-visible, #rv .rv-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#rv .rv-backdrop, #rv .rv-fab { display: none; }
/* Phone: no toolbar. The picture has the whole screen; one round button opens the actions around itself. */
/* z-index: #rv is a flex box, so the bar is a stacking context of its own even without a position. */
#rv.rv-app .bar { z-index: 21; position: static; display: block; height: 0; min-height: 0; padding: 0; border: 0; box-shadow: none; background: none !important; transform: none; opacity: 1; pointer-events: auto; }
#rv.rv-app .bar > b, #rv.rv-app .bar > .st, #rv.rv-app .bar > .sp, #rv.rv-app .bar > .more, #rv.rv-app .bar > .end, #rv.rv-app .fs-float, #rv.rv-app .kb-float { display: none !important; }
#rv.rv-app .rv-notice { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; max-width: none; white-space: normal; z-index: 25; background: var(--surface); padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); pointer-events: none; }
#rv.rv-app .tools { display: none; position: absolute; top: auto; left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 21; flex-wrap: wrap; gap: 6px; max-height: 72%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
#rv.rv-app.open .tools { display: flex; }
#rv.rv-app .tools > * { flex: 1 1 40%; }
#rv.rv-app .tools > .rv-menu { flex: 1 1 100%; }
#rv.rv-app .rv-pop { position: static; box-shadow: none; margin-top: 6px; max-height: none; }
#rv.rv-app #rv-settings { display: none; }
#rv.rv-app.open .rv-backdrop, #rv.rv-app.fab-open .rv-backdrop { display: block; position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .35); touch-action: none; }
#rv.rv-app .rv-sheet { inset: 0; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); font-size: 16px; }
#rv.rv-app .rv-sheet-head b { font-size: 17px; }
#rv.rv-app .rv-seg button { min-height: 42px; }
#rv.rv-app .rv-row { padding: 14px 0; }
#rv.rv-app .rv-fab { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 22; }
#rv .rv-fab button { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#rv .rv-fab-main { left: -29px; top: -29px; width: 58px; height: 58px; background: var(--accent); opacity: .72; touch-action: none; transition: opacity .15s, transform .15s; }
#rv.fab-open .rv-fab-main { opacity: 1; transform: scale(1.08); background: #10141d; }
#rv .rv-fab-item { left: -26px; top: -26px; width: 52px; height: 52px; background: var(--accent); opacity: 0; pointer-events: none; transform: scale(.2); transition: transform .18s cubic-bezier(.2, .9, .3, 1.2), opacity .12s; }
#rv .rv-fab-item[hidden] { display: none; }
#rv.fab-open .rv-fab-item { opacity: 1; pointer-events: auto; }
#rv .rv-fab-item.on { background: #fff; color: var(--accent); }
#rv .rv-fab-item[data-act="end"] { background: #d93a3a; }
@media (prefers-reduced-motion: reduce) { #rv .rv-fab-item, #rv .rv-fab-main, #rv .rv-switch, #rv .rv-switch::after { transition: none; } }
#rv.rv-app.open .rv-fab { display: none; }
/* Phone: the actions page (shortcuts, clipboard, printing, power). */
#rv .rv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 6px; }
#rv .rv-acts button { min-height: 48px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; text-align: center; cursor: pointer; }
#rv .rv-acts button:active { background: var(--accent-soft); border-color: var(--accent); }
#rv.rv-app .tools { display: none !important; }
/* A tapped key answers under the finger. */
#rv .rv-key:active, #rv .rv-fab-item:active { background: #40557e; border-color: #7fa7ff; transform: scale(.95); }
/* Notices never sit in the toolbar (a long one pushed the buttons out of it): they hang under the bar, over the picture. */
#rv .rv-notice { position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: min(760px, calc(100% - 32px)); white-space: normal; text-align: center; z-index: 5; background: var(--surface); padding: 9px 14px; border-radius: 10px; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); pointer-events: none; }
#rv.rv-app .rv-notice { top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; max-width: none; }

/* Simple menu: the pages a technician rarely needs wait behind "Več možnosti" (app.js tidyNav). */
body:not(.menu-full) #rail .nav-i[data-adv]:not(.on):not(:has(.badge:not(.hidden))) { display: none; }
.rail .nav-more { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0 4px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; background: transparent; color: var(--muted, var(--faint)); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rail .nav-more:hover { color: var(--text, inherit); border-color: var(--accent); }
.rail .nav-more svg { width: 16px; height: 16px; margin-left: auto; transition: transform .2s; }
.rail .nav-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.rail .nav-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Service orders */
.so-acc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.so-acc label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.so-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--hover); color: var(--text); }
.so-st.Received, .so-st.Diagnosis, .so-st.InProgress { background: var(--accent-soft); color: var(--accent); }
.so-st.AwaitingApproval { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.so-st.Done { background: var(--ok-soft); color: var(--ok); }
.so-st.HandedOver, .so-st.Cancelled { background: var(--hover); color: var(--muted); }
.so-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.so-head h2 { margin: 0 auto 0 0; font-size: 18px; }
.so-body { display: grid; gap: 4px; padding: 6px 18px 16px; }
.so-body h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.so-kv { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.so-kv dt { color: var(--muted); }
.so-kv dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.so-box { white-space: pre-wrap; background: var(--hover); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.so-items { width: 100%; border-collapse: collapse; table-layout: fixed; }
.so-items td { padding: 4px; vertical-align: middle; }
.so-items .input { min-width: 0; width: 100%; }
.so-items td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.so-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.so-photos figure { margin: 0; position: relative; }
.so-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--hover); cursor: zoom-in; }
.so-photos figcaption { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-photos .btn { position: absolute; top: 4px; right: 4px; }
.so-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.so-tl time { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.so-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.so-actions select.input { width: auto; flex: 0 1 220px; }
.so-card { padding: 16px 20px; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.so-items .c-kind { width: 124px; } .so-items .c-qty { width: 76px; } .so-items .c-price { width: 104px; } .so-items .c-total { width: 92px; }
.so-items input[type="number"] { padding-left: 8px; padding-right: 4px; } .so-items .c-del { width: 44px; }
.so-total { margin-left: auto; font-weight: 700; }
.so-gap { margin-top: 8px; }
@media (max-width: 640px) {
  .so-kv { grid-template-columns: 1fr; }
  .so-kv dd { margin-bottom: 6px; }
  .so-items { table-layout: auto; }
  .so-items, .so-items tbody, .so-items tr, .so-items td { display: block; width: auto !important; }
  .so-items tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .so-items td.n { text-align: left; }
}

/* Customer networks */
.nw-bar { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: var(--hover); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.nw-bar i { display: block; height: 100%; background: var(--ok); }
.nw-bar.low i { background: var(--bad); }
/* Network diagram: a white sheet (it is saved and printed as it is), tools above it, drag to pan, drag a device onto another to link. */
.nw-wrap { margin-bottom: 8px; min-width: 0; max-width: 100%; }
.nw-wrap:fullscreen { background: var(--bg); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.nw-wrap:fullscreen .nw-diagram { flex: 1; max-height: none; }
.nw-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.nw-tgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nw-zv { min-width: 52px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.nw-find { flex: 1 1 220px; min-width: 0; max-width: 360px; min-height: 34px; padding: 6px 10px; }
.nw-mac { margin: 0 4px; align-items: center; }
.nw-diagram { overflow: auto; max-height: 72vh; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; padding: 8px; margin-bottom: 8px;
  cursor: grab; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.nw-diagram.panning { cursor: grabbing; user-select: none; }
.nw-diagram.linking { cursor: copy; user-select: none; }
.nw-diagram svg { display: block; margin: 0 auto; max-width: none; }
.nw-diagram g[data-nw-dev], .nw-diagram g[data-nw-inet] { cursor: pointer; }
.nw-diagram.linking g[data-nw-dev], .nw-diagram.linking g[data-nw-inet] { cursor: copy; }
.nw-diagram g[data-nw-dev]:hover > rect:first-of-type, .nw-diagram g[data-nw-dev]:focus > rect:first-of-type { fill-opacity: 1; fill: #eef3fd; stroke: #3f5bd8; stroke-width: 1.5; }
.nw-diagram g.nw-target > rect:first-of-type { fill-opacity: 1; fill: #e3f5e8; stroke: #2e9d55; stroke-width: 2.5; }
.nw-diagram g[data-nw-dev]:focus { outline: none; }
.nw-diagram svg.nw-searching g[data-nw-dev]:not(.nw-hit) { opacity: .28; }
.nw-diagram svg.nw-searching path[data-nw-line] { opacity: .35; }
.nw-diagram g.nw-hit > rect:first-of-type { fill-opacity: 1; fill: #fff6d6; stroke: #d39b00; stroke-width: 2.5; }
.nw-howto { margin: 0; }
@media (max-width: 720px) { .nw-diagram { max-height: 60vh; } .nw-find { max-width: none; flex-basis: 100%; } }
#nw-print { display: none; }
@media print {
  body.printing-diagram > *:not(#nw-print) { display: none !important; }
  body.printing-diagram #nw-print { display: block; }
  body.printing-diagram #nw-print svg { display: block; width: 100%; height: auto; }
}
.nw-bar.p0 i { width: 0; } .nw-bar.p10 i { width: 10%; } .nw-bar.p20 i { width: 20%; } .nw-bar.p30 i { width: 30%; } .nw-bar.p40 i { width: 40%; }
.nw-bar.p50 i { width: 50%; } .nw-bar.p60 i { width: 60%; } .nw-bar.p70 i { width: 70%; } .nw-bar.p80 i { width: 80%; } .nw-bar.p90 i { width: 90%; } .nw-bar.p100 i { width: 100%; }
.nw-doc textarea { width: 100%; }

/* Wizard (service intake) and order progress */
.wz-steps { list-style: none; margin: 0; padding: 14px 18px 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wz-steps li { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.wz-steps li::before { content: ""; height: 5px; border-radius: 99px; background: var(--hover); }
.wz-steps li.done::before, .wz-steps li.on::before { background: var(--accent); }
.wz-steps li.done { cursor: pointer; }
.wz-steps li.on { color: var(--text); font-weight: 650; }
.wz-steps i { display: none; }
.wz-pane { padding: 4px 18px 0; }
.wz-h { margin: 14px 0 10px; font-size: 18px; }
.wz-hint { display: block; margin-top: 5px; font-size: 12.5px; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wz-chips .chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.wz-chips .chip:hover { border-color: var(--accent); color: var(--accent); }
.wz-chips .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.wz-sum { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 8px 14px; margin: 0 0 14px; padding: 14px 16px; background: var(--hover); border-radius: 12px; font-size: 14px; }
.wz-sum dt { color: var(--muted); }
.wz-sum dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.wz-sum dd .btn { margin-left: 8px; vertical-align: baseline; }
.wz-notify { display: block; padding: 4px 0 10px; }
.wz-err { margin: 6px 18px 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); font-weight: 600; font-size: 14px; }
.wz-nav { display: flex; align-items: center; gap: 10px; padding: 14px 18px 18px; position: sticky; bottom: 0; background: var(--surface); }
.wz-nav .wz-pos { margin-right: auto; }
.wz-nav #so-back { margin-right: 0; }
#f-so .input { min-height: 44px; }
#f-so textarea.input { min-height: 96px; }
.so-prog { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.so-prog li { display: grid; gap: 5px; font-size: 12px; color: var(--muted); text-align: center; }
.so-prog i { height: 6px; border-radius: 99px; background: var(--hover); }
.so-prog li.done i { background: var(--ok); }
.so-prog li.on i { background: var(--accent); }
.so-prog li.on { color: var(--text); font-weight: 650; }
.so-cancel { margin: 4px 0 8px; color: var(--muted); font-weight: 600; }
.so-stats { margin: 0 0 14px; }
.so-stat { text-align: left; font: inherit; cursor: pointer; }
.so-stat:hover { border-color: var(--accent); }
@media (max-width: 640px) {
  .wz-steps span { font-size: 12px; }
  .wz-sum { grid-template-columns: 1fr; gap: 2px; }
  .wz-sum dd { margin-bottom: 8px; }
  .so-prog span { font-size: 10.5px; }
  .wz-nav .btn { flex: 1; }
  .wz-nav .wz-pos { display: none; }
}

/* Alerts / software helpers */
.pad { padding-left: 18px; padding-right: 18px; }
#al-stats { margin-bottom: 14px; }
.stat.bad::before { background: var(--bad); }
.stat.bad b { color: var(--bad); }
.wz-sum dd .btn { border: 0; background: none; padding: 0 4px; min-height: 0; height: auto; font-size: 12.5px; font-weight: 500; color: var(--accent); text-decoration: underline; box-shadow: none; }

.so-hint { margin: 0 0 8px; padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px; }
.nw-prog { grid-template-columns: repeat(5, 1fr); }
#sc-tpl { display: flex; align-items: center; margin-top: 10px; }
#sc-stats, #nw-stats, #sw-stats { margin-bottom: 14px; }
#sw-stats:empty { display: none; }

/* The guide ("Vodnik"): a side panel, not a modal; on a phone it covers the screen. */
.guide { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(760px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: -18px 0 48px rgba(15, 23, 42, .18);
  transform: translateX(104%); transition: transform .2s ease; }
.guide.show { transform: none; }
.guide[hidden] { display: none; }
.guide-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.guide-h h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.25; }
.guide-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.guide-b { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr; }
.guide-nav { overflow: auto; padding: 14px 10px 20px 14px; border-right: 1px solid var(--line); background: var(--surface-2); }
.guide-q { min-height: 36px; padding: 7px 10px; margin-bottom: 8px; }
.guide-g { margin: 12px 6px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.guide-t { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.guide-t:hover { background: var(--hover); }
.guide-t.on { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.guide-body { overflow: auto; padding: 18px 24px 28px; font-size: 14.5px; line-height: 1.6; outline: none; }
.guide-body h3 { margin: 20px 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.guide-what { margin: 0; font-size: 15.5px; }
.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: gs; display: grid; gap: 8px; }
.guide-steps li { counter-increment: gs; position: relative; padding: 10px 12px 10px 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.guide-steps li::before { content: counter(gs); position: absolute; left: 12px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 700; }
.guide-tips { margin: 0; padding-left: 20px; }
.guide-tips li { margin: 4px 0; }
.guide-body p { margin: 0; }
.guide-body > .btn { margin-top: 20px; }
body.guide-open .help-center-button { display: none; }
@media (max-width: 760px) {
  .guide-b { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .guide-nav { max-height: 34vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .guide-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .guide { transition: none; } }
@media print { .guide { display: none !important; } }

/* Quick search (Ctrl+K). */
.qs-open { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.qs-open:hover { border-color: var(--accent); color: var(--text); }
.qs-open svg { width: 16px; height: 16px; flex: none; }
.qs-open span { flex: 1; }
.qs-open kbd, .qs kbd { font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 3px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--muted); }
.qs-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; background: rgba(15, 23, 42, .38); backdrop-filter: blur(3px); }
.qs-backdrop[hidden] { display: none; }
.qs { width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 64px rgba(15, 23, 42, .3); overflow: hidden; }
.qs-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qs-in svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.qs-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; padding: 6px 0; }
.qs-list { overflow: auto; padding: 6px; }
.qs-it { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.qs-it.on, .qs-it:hover { background: var(--accent-soft); }
.qs-k { flex: none; width: 86px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.qs-it.on .qs-k { color: var(--accent); }
.qs-l { display: grid; min-width: 0; }
.qs-l b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-l small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-empty { padding: 22px 12px; text-align: center; color: var(--faint); font-size: 14px; }
.qs-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
@media (max-width: 600px) { .qs-backdrop { padding-top: 12px; } .qs-k { width: 70px; } .qs-foot { display: none; } }

/* ---- Modern session toolbar (2026-10-18): one row, our own line icons, »Prekini« always at the right end. */
@media (min-width:761px) and (pointer:fine), (min-width:1024px) {
  #rv .bar { flex-wrap: nowrap !important; gap: 10px; padding: 8px 12px; background: var(--surface) !important; border-bottom: 1px solid var(--line-2) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
  #rv .bar > b { font-size: 15px; letter-spacing: .1px; }
  #rv .bar .st { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted) !important; white-space: nowrap; }
  #rv .bar .sp { display: none; }
  #rv .tools { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap !important; overflow: visible; gap: 2px; padding: 2px 0; }
  #rv .tools > button, #rv .tools > .rv-menu > summary, #rv .tools > select { min-height: 34px !important; padding: 5px 10px !important; font-size: 13px !important; border-radius: 9px !important; background-color: transparent !important; border-color: transparent !important; color: var(--text) !important; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color .12s, border-color .12s; }
  #rv .tools > button:hover, #rv .tools > .rv-menu > summary:hover { background-color: var(--surface-2) !important; border-color: var(--line-2) !important; }
  #rv .tools > button.on, #rv .tools > .rv-menu[open] > summary { background-color: var(--accent-soft) !important; border-color: var(--accent) !important; }
  #rv .tools > select { background-color: var(--surface-2) !important; border-color: var(--line-2) !important; color: var(--text) !important; }
  #rv .tools > button::before, #rv .tools > .rv-menu > summary::before { content: none; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  #rv .tools > #rv-end { margin-left: auto; background-color: #d93a3a !important; border-color: #d93a3a !important; color: #fff !important; font-weight: 600; }
  #rv .tools > #rv-end:hover { background-color: #c22f2f !important; }
  #rv .rv-pop { border-radius: 12px !important; box-shadow: 0 18px 44px #000a !important; }
  #rv .rv-menu:has(#rv-fit)>summary::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
  #rv .rv-menu:has(#rv-q)>summary::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E"); }
  #rv .rv-menu:has(#rv-viewonly)>summary::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10'/%3E%3C/svg%3E"); }
  #rv .rv-menu:has(#rv-draw)>summary::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-settings::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-sound::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 010 7M19 5a10 10 0 010 14'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-voice::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v1a7 7 0 0014 0v-1M12 18v4M8 22h8'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-term-btn::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-6-6-6M12 19h8'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-chat::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-pull::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-files::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-rec::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E"); }
  #rv .rv-menu:has(#rv-printer)>summary::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
  #rv .rv-menu:has(#rv-restart)>summary::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.4 6.6a9 9 0 11-12.8 0M12 2v10'/%3E%3C/svg%3E"); }
  #rv .tools > #rv-end::before { content: ''; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
}
/* Narrower screens: the one-click tools show only their icon (the name stays for screen readers and in the tooltip). */
@media (min-width:761px) and (max-width:1599px) {
  #rv .tools > :is(#rv-sound, #rv-voice, #rv-term-btn, #rv-chat, #rv-pull, #rv-files, #rv-rec, #rv-settings) { font-size: 0 !important; padding: 5px 9px !important; }
}
@media (min-width:761px) and (max-width:1199px) {
  #rv .tools > .rv-menu > summary { font-size: 0 !important; padding: 5px 9px !important; }
  #rv .bar .st { display: none; }
}
/* Session recording player: as wide as the screen allows, the picture scaled to fit. */
.ui-modal:has(.rec-canvas) { width: min(1180px, 96vw); max-width: 96vw; }
.rec-canvas { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; background: #0b0f17; border-radius: 10px; }
.rec-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rec-bar input[type=range] { flex: 1 1 240px; }

/* ---------- Videz 2026-10-18: zbitejše kartice, stanje kot tablete, tabele brez odreza ---------- */
.stat { padding: 14px 16px; border-radius: 14px; }
.stat span { font-size: 11.5px; }
.stat b { font-size: 26px; line-height: 1.15; margin-top: 4px; }
.health-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.hs {
  flex: 0 1 auto; flex-direction: row; align-items: baseline; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.hs .st { font-size: 13px; font-weight: 600; }
.hs small { font-size: 12.5px; }
.hs.wait { border-color: var(--warn); background: var(--warn-soft); }
.hs.bad { border-color: var(--bad); background: var(--bad-soft); }
.panel > #recent, .panel > div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel table td:last-child { white-space: nowrap; }
@media (max-width: 900px) {
  .menu-btn { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .25); }
}
@media (max-width: 760px) {
  .stat { padding: 12px 14px; }
  .stat b { font-size: 22px; }
  .health-strip { flex-direction: column; gap: 6px; }
  .hs { justify-content: space-between; border-radius: 12px; padding: 8px 12px; }
}

/* Phone keyboard bar: F-keys and numpad only after "Več". */
.rv-kb-rows:not(.more) .rv-kb-row.extra { display: none; }

/* Wall thumbnail at full size (fleet.js bigShot). */
#p-wall img[data-wall-img], #p-wall img[data-wd-img] { cursor: zoom-in; }
dialog.shot-big { padding: 0; border: 0; background: #000; max-width: 95vw; max-height: 95vh; cursor: zoom-out; }
dialog.shot-big::backdrop { background: rgba(0,0,0,.75); }
dialog.shot-big img { display: block; max-width: 95vw; max-height: 95vh; object-fit: contain; }