/* Nabu follows the Apollo style guide: one blue does the primary work, neutrals
   are Tailwind gray (not slate), status is a small tinted pill, cards get a 1px
   border and no shadow, and only floating surfaces (menus, dialogs, the login
   card) carry a shadow. Dark mode is gray-900 / gray-800, not a blue theme. */
:root {
  color-scheme: light;
  /* Brand — blue-600 does every primary job */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;        /* hover on filled brand controls */
  --primary-bright: #3b82f6;      /* unread dots, count badges, focus ring */
  --primary-light: #dbeafe;       /* blue-100 wash behind blue text */
  --primary-text: #1d4ed8;        /* text that sits on --primary-light */
  --link: #2563eb;
  --link-hover: #1e40af;
  --on-primary: #ffffff;
  /* Sidebar stays charcoal in both themes */
  --sidebar-bg: #111827;
  --sidebar-text: #d1d5db;
  --sidebar-muted: #6b7280;
  --sidebar-hover: #1f2937;
  --sidebar-line: #374151;
  --sidebar-active-bg: #2563eb;
  --sidebar-active-text: #ffffff;
  /* Surfaces */
  --bg: #ffffff;                  /* page canvas */
  --card-bg: #ffffff;
  --bg-alt: #f9fafb;              /* gray-50: table heads, bulk bars, quiet fills */
  --bg-muted: #f3f4f6;            /* gray-100: inactive chips, neutral pills */
  --hover-bg: #f9fafb;            /* row hover */
  --hover-strong: #f3f4f6;        /* icon-button hover */
  --select-bg: #eff6ff;           /* selected row, blue-50 */
  --input-bg: #ffffff;
  --bg-secondary: var(--bg-alt);
  --bg-subtle: var(--bg-muted);
  --bg-input: var(--input-bg);
  --bg-card: var(--card-bg);
  --surface: var(--card-bg);
  --card: var(--card-bg);
  /* Text and lines */
  --text: #111827;
  --text-strong: #1f2937;
  --text-muted: #6b7280;
  --text-btn: #4b5563;
  --text-faint: #9ca3af;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --ring: #3b82f6;
  /* Status — solid fill, tint, and text-on-tint */
  --danger: #dc2626;
  --danger-dark: #b91c1c;
  --danger-bg: #fee2e2;
  --danger-border: #fca5a5;
  --success: #059669;
  --success-dark: #047857;
  --success-bg: #d1fae5;
  --success-border: #a7f3d0;
  --warning: #f59e0b;
  --warning-dark: #b45309;
  --warning-bg: #fef3c7;
  --warning-border: #fcd34d;
  --info-bg: #dbeafe;
  --info-text: #1d4ed8;
  /* Elevation: cards are flat; only floating surfaces cast a shadow */
  /* Printer variants: violet tint from the guide's calendar palette, used only for markers */
  --variant: #7c3aed;
  --variant-bg: #ede9fe;
  --variant-text: #4c1d95;
  --shadow: none;
  --shadow-md: none;
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-card: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --scrim: rgba(0,0,0,.5);
  /* Shape */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius: 8px;
  /* Layout */
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 64px;
  --header-height: 56px;
  --tabbar-height: 56px;
  /* Type — the OS sans; no webfont */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --mono: var(--font-mono);
}

/* ── Dark Mode ─────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827;
  --card-bg: #111827;
  --bg-alt: #1f2937;
  --bg-muted: #1f2937;
  --hover-bg: #1f2937;
  --hover-strong: #374151;
  --select-bg: rgba(59,130,246,.24);
  --input-bg: #111827;
  --text: #f3f4f6;
  --text-strong: #e5e7eb;
  --text-muted: #9ca3af;
  --text-btn: #9ca3af;
  --text-faint: #9ca3af;
  --border: #374151;
  --border-strong: #4b5563;
  --link: #60a5fa;
  --link-hover: #93c5fd;
  --primary-light: rgba(30,58,138,.55);
  --primary-text: #60a5fa;
  --danger-bg: rgba(127,29,29,.35);
  --danger-border: #7f1d1d;
  --danger-dark: #fca5a5;
  --success-bg: rgba(6,78,59,.35);
  --success-border: #064e3b;
  --success-dark: #6ee7b7;
  --warning-bg: rgba(120,53,15,.35);
  --warning-border: #78350f;
  --warning-dark: #fcd34d;
  --info-bg: rgba(30,58,138,.55);
  --info-text: #60a5fa;
  --variant: #a78bfa;
  --variant-bg: rgba(76,29,149,.45);
  --variant-text: #c4b5fd;
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.5);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.55), 0 8px 10px -6px rgba(0,0,0,.55);
  --shadow-card: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px -1px rgba(0,0,0,.5);
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: var(--input-bg);
  color: var(--text-strong);
  border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6b7280; }
[data-theme="dark"] .alert-error  { background: var(--danger-bg); color: #fca5a5; border-color: var(--danger-border); }
[data-theme="dark"] .alert-success { background: var(--success-bg); color: #6ee7b7; border-color: var(--success-border); }
[data-theme="dark"] .badge-success { background: var(--success-bg); color: #6ee7b7; }
[data-theme="dark"] .badge-warn    { background: var(--warning-bg); color: #fcd34d; }
[data-theme="dark"] .badge-error   { background: var(--danger-bg); color: #fca5a5; }
[data-theme="dark"] .tree-location > .tree-row { background: var(--bg-alt); }
[data-theme="dark"] .btn-icon.danger { color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .btn-icon.danger:hover { background: rgba(220,38,38,.15); color: #fca5a5; border-color: #dc2626; }
[data-theme="dark"] .comp-more-menu button.danger:hover { background: rgba(220,38,38,.15); color: #f87171; }
[data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: var(--hover-strong); color: var(--text); }
[data-theme="dark"] code { background: var(--bg-alt); border-color: var(--border); color: #93c5fd; }
[data-theme="dark"] .upload-area:hover,
[data-theme="dark"] .upload-area.drag-over { background: rgba(30,58,138,.55); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}

/* One focus treatment everywhere: a 2px blue ring, never the browser outline. */
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .5; }
/* iOS zooms into any control under 16px */
@media (max-width: 639px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }
  .btn:not(.btn-sm), a.btn:not(.btn-sm) { min-height: 40px; }
  .comp-actions .btn, .comp-printer-actions .btn, .tree-actions .btn { min-height: 0; }
}

/* ── Utilities ─────────────────────────────── */
.hidden { display: none !important; }
.page { min-height: 100vh; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-sm { font-size: 12px; }
.text-danger { color: var(--danger); }
.flex { display: flex; flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.gap-1 { gap: 4px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }

/* ── Auth Pages ─────────────────────────────── */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  min-height: 100vh;
  padding: 16px;
}

.auth-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 24rem;
  box-shadow: var(--shadow-card);
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
/* Logo tile: brand-blue square, corner radius 18.75% of the tile */
.auth-logo svg {
  width: 56px; height: 56px; padding: 13px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 18.75%;
}

.auth-card h1 {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.auth-subtitle {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .025em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.auth-form { margin-top: 24px; }

.qr-container {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}
.qr-container img {
  border: 4px solid var(--border);
  border-radius: var(--radius);
}

.totp-input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: .1em;
  font-weight: 700;
}

.totp-secret-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 12px;
}
.totp-secret-label {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.totp-secret-code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text);
  word-break: break-all;
  user-select: all;
}
.totp-secret-copy {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color .15s;
}
.totp-secret-copy:hover { color: var(--link); }

/* ── App Layout ─────────────────────────────── */
#page-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 16px;
  border-bottom: 1px solid var(--sidebar-line);
  flex-shrink: 0;
}
.sidebar-brand-name {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -.025em;
  color: #ffffff;
}
.sidebar-brand-mark {
  display: none;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  color: #60a5fa;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--sidebar-hover); color: #ffffff; }
.nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }

/* ── Nav dropdown (Computers → Groups) ──────── */
.nav-dropdown { position: relative; }
.nav-dropdown .nav-item { position: relative; }
.nav-dropdown-toggle {
  display: flex; align-items: center; justify-content: center;
  margin-left: auto;
  padding: 4px;
  background: none; border: none; cursor: pointer;
  border-radius: 4px;
  color: inherit; opacity: .5;
  transition: opacity .15s, background .15s;
}
.nav-dropdown-toggle:hover { opacity: 1; background: var(--sidebar-hover); }
.nav-dropdown-arrow {
  width: 14px !important; height: 14px !important;
  transition: transform .2s;
}
.nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  padding: 2px 0 2px 30px;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-dropdown-item:hover { background: var(--sidebar-hover); color: #ffffff; }
.sidebar.collapsed .nav-dropdown-toggle { display: none; }
.sidebar.collapsed .nav-dropdown-menu { display: none; }

/* ── Groups page ────────────────────────────── */
.group-member-list {
  display: flex; flex-direction: column; gap: 2px;
}
.group-member-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-md);
  transition: background .15s;
}
.group-member-item:hover { background: var(--bg-secondary); }
.group-checkbox-list {
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.group-checkbox-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer;
  font-size: 14px; transition: background .15s;
}
.group-checkbox-row:hover { background: var(--bg-secondary); }
.group-checkbox-row input[type="checkbox"] { flex-shrink: 0; }

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--sidebar-line);
}

/* ── Collapsible sidebar ────────────────────────── */
.sidebar { transition: width .2s ease; overflow: hidden; }

.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.sidebar.collapsed .sidebar-brand-name { display: none; }
.sidebar.collapsed .sidebar-brand-mark { display: block; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 8px 0; gap: 0; }
.sidebar.collapsed .sidebar-collapse-btn .collapse-icon-close { display: none; }
.sidebar.collapsed .sidebar-collapse-btn .collapse-icon-open  { display: block; }
.sidebar-collapse-btn .collapse-icon-open { display: none; }

.sidebar-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  margin-bottom: 4px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: #9ca3af;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.sidebar-collapse-btn:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-collapse-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.app-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
@media (min-width: 640px) { .main-content { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); } }
@media (min-width: 768px) { .main-content { padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); } }

.view {
  min-height: 100%;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
body.kiosk-mode .view { max-width: none; }

/* ── Page Header ─────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.page-header h2 { font-size: 24px; line-height: 32px; font-weight: 600; }

/* ── Cards ─────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.card-body { padding: 16px; }
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h3 { font-size: 14px; font-weight: 500; color: var(--text-strong); }

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }

.btn-danger {
  background: transparent;
  color: var(--danger-dark);
  border: 1px solid var(--danger-border);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  color: var(--danger-dark);
  border-color: var(--danger-border);
}
[data-theme="dark"] .btn-danger { border-color: #7f1d1d; color: #f87171; }
[data-theme="dark"] .btn-danger:hover:not(:disabled) { background: rgba(220,38,38,.12); color: #fca5a5; border-color: #dc2626; }

.btn-ghost {
  background: transparent;
  color: var(--text-btn);
  border: 1px solid var(--border);
  padding: 6px 10px;
}
.btn-ghost:hover:not(:disabled) { background: var(--hover-bg); color: var(--text); }

.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon {
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-btn);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon:hover { background: var(--hover-strong); color: var(--text); }
.btn-icon.danger { color: var(--danger-dark); border-color: var(--danger-border); }
.btn-icon.danger:hover { background: var(--danger-bg); color: var(--danger-dark); border-color: var(--danger-border); }
.comp-more-menu button.danger:hover { background: var(--danger-bg); color: var(--danger-dark); }

/* Konica account-track key icon next to a Konica printer row.
   Subtle gray by default; blue-filled once credentials are stored so the
   admin can see at a glance which printers are already configured. */
.comp-konica-key { color: var(--text-muted); }
.comp-konica-key:hover { color: var(--link); border-color: var(--link); }
.comp-konica-key.comp-konica-key-set { color: var(--primary-text); border-color: #93c5fd; background: var(--primary-light); }
.comp-konica-key.comp-konica-key-set:hover { background: #bfdbfe; }
[data-theme="dark"] .comp-konica-key.comp-konica-key-set { color: #60a5fa; border-color: #1e40af; background: rgba(30,58,138,.55); }

/* Leader line on Computers > Installed Printers rows.
   Each row has a left-aligned printer name+IP and right-aligned action
   buttons; on wide screens the space between is large, making it hard to
   visually associate a printer with its action cluster. A thin border
   line filling the gap acts as a "leader" connecting them. The border
   uses var(--border) so it picks up the right shade for light/dark mode
   automatically. The line lives on a pseudo-element with flex:1 so it
   only ever fills the unused horizontal space — no overlap with badges,
   sublabels, or status dots. */
.comp-printer-info::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
  margin: 0 6px;
  align-self: center;
  min-width: 16px;
}
/* Hide the leader line on narrow viewports where the info+actions stack. */
@media (max-width: 520px) {
  .comp-printer-info::after { display: none; }
}

/* ── Forms ─────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Generic form-control (catch-all for selects/inputs not inside .form-group) */
.form-control {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
}
.form-control:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }

/* ── Alerts ─────────────────────────────── */
.alert {
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  margin-top: 12px;
}
.alert-error { background: var(--danger-bg); color: var(--danger-dark); border: 1px solid var(--danger-border); }
.alert-success { background: var(--success-bg); color: var(--success-dark); border: 1px solid #d1fae5; }

/* ── Client Tree ─────────────────────────────── */
.tree { }

.tree-client {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.tree-row:hover { background: var(--bg-alt); }

.tree-toggle {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.tree-toggle.open { transform: rotate(90deg); }
.tree-toggle svg { width: 12px; height: 12px; }

.tree-icon { flex-shrink: 0; }
.tree-icon svg { width: 16px; height: 16px; }

.tree-label { flex: 1; font-weight: 600; font-size: 14px; }
.tree-meta { font-size: 12px; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
.tree-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.tree-row:hover .tree-actions { opacity: 1; }

.tree-children { padding-left: 0; border-top: 1px solid var(--border); }
.tree-location { border-bottom: 1px solid var(--border); }
.tree-location:last-child { border-bottom: none; }

.tree-location > .tree-row { padding-left: 32px; background: var(--bg-alt); }
.tree-sublocation > .tree-row { padding-left: 52px; }
.tree-printer-row { padding-left: 72px; }
.tree-add-row { padding-left: 72px; border-bottom: none; }

.tree-printer {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px 8px 72px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* prevent iOS long-press callout */
}
.tree-printer:last-child { border-bottom: none; }
.tree-printer:hover { background: var(--bg-alt); }
.tree-printer .tree-label { font-weight: 500; }
.tree-printer .tree-actions { opacity: 0; transition: opacity .15s; }
.tree-printer:hover .tree-actions { opacity: 1; }
.tree-printer-group.dragging .tree-printer {
  opacity: 0.18;
  background: var(--primary-light) !important;
  outline: 2px dashed var(--primary, #2563eb);
  outline-offset: -2px;
  border-radius: 4px;
}

/* ── Drag handle (printer reorder) ──────────────────────────────── */
.drag-handle {
  cursor: grab;
  touch-action: none;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity .15s;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.tree-printer:hover .drag-handle { opacity: 1; }

/* Drop indicator when dragging within a folder */
.drag-placeholder {
  height: 34px;
  background: var(--primary-light);
  border: 2px dashed var(--primary, #2563eb);
  border-radius: 4px;
  margin: 2px 8px;
  pointer-events: none;
}

/* Cross-folder drag-and-drop: highlight target folder header */
.tree-row.folder-drop-target {
  background: var(--primary-light) !important;
  outline: 2px dashed var(--primary, #2563eb);
  outline-offset: -2px;
  border-radius: 4px;
}

.printer-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-text);
  font-weight: 500;
}

.add-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--link);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  border-top: 1px dashed var(--border);
  transition: background .1s;
}
.add-row:hover { background: var(--primary-light); }
.add-row svg { width: 14px; height: 14px; }

/* ── Recovery Zone (soft-deleted clients) ─────── */
.recovery-zone {
  margin-top: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
  overflow: hidden;
}
.recovery-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted);
  transition: background .1s;
}
.recovery-header:hover { background: var(--hover-strong); }
.recovery-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.recovery-hint {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-left: 4px;
}
.recovery-body {
  border-top: 1px solid var(--border);
}
.recovery-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.recovery-item:last-child { border-bottom: none; }
.recovery-item:hover { background: var(--hover-strong); }
.recovery-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recovery-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recovery-item-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.recovery-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .recovery-header { padding: 10px 12px; gap: 6px; }
  .recovery-hint { display: none; }
  .recovery-item {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }
  .recovery-item-actions {
    flex: 0 0 100%;
    gap: 4px;
  }
  .recovery-item-actions .btn { font-size: 12px; }
}

/* ── Drivers Toolbar ──────────────────────────── */
.drivers-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.drivers-search {
  flex: 1;
  max-width: 380px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
}
.drivers-search:focus { box-shadow: 0 0 0 2px var(--ring); }
.drivers-company {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text);
  max-width: 220px;
}
.driver-usedby {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── Drivers — Manufacturer Groups ───────────── */
.drivers-mfr-group { margin-bottom: 24px; }
.drivers-mfr-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 2px;
}
.drivers-mfr-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.drivers-mfr-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

/* ── Drivers Grid ─────────────────────────────── */
.drivers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.driver-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.driver-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.driver-name { font-weight: 600; font-size: 14px; color: var(--text-strong); }
.driver-wname { font-size: 12px; color: var(--text-muted); }
.driver-file { font-size: 12px; color: var(--text-muted); }
.driver-size { font-size: 12px; background: var(--bg-muted); padding: 2px 8px; border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; }
.driver-adopted-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.driver-row { cursor: pointer; padding-left: 46px; }
.driver-row:hover { background: var(--hover-bg); }
.driver-row-open { background: var(--hover-bg); }
.driver-nofile-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger-dark);
  border: 1px solid transparent;
}
.driver-os-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.driver-os-win {
  background: rgba(59,130,246,0.12);
  color: var(--link);
  border-color: rgba(59,130,246,0.25);
}
.driver-os-win-ver {
  background: rgba(59,130,246,0.07);
  color: #3b82f6;
  border-color: rgba(59,130,246,0.18);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.driver-os-mac {
  background: rgba(124,58,237,0.10);
  color: #7c3aed;
  border-color: rgba(124,58,237,0.22);
}
[data-theme="dark"] .driver-os-win {
  background: rgba(96,165,250,0.12);
  color: #93c5fd;
  border-color: rgba(96,165,250,0.25);
}
[data-theme="dark"] .driver-os-win-ver {
  background: rgba(96,165,250,0.08);
  color: #60a5fa;
  border-color: rgba(96,165,250,0.18);
}
[data-theme="dark"] .driver-os-mac {
  background: rgba(167,139,250,0.12);
  color: #a78bfa;
  border-color: rgba(167,139,250,0.25);
}

/* ── Driver Printers Panel ────────────────── */
.driver-printers-panel {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}
.driver-printers-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.driver-printers-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.driver-printers-folder {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 8px 2px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.driver-printers-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .1s;
  font-size: 14px;
}
.driver-printers-item:hover {
  background: var(--bg-alt);
}
.driver-printers-name {
  font-weight: 500;
  color: var(--text);
}
.driver-printers-name:hover {
  color: var(--link);
}
.driver-printers-model {
  font-size: 11px;
  color: var(--text-muted);
}
.driver-printers-ip {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  font-family: var(--font-mono, monospace);
}
.driver-printers-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
  font-style: italic;
}

/* ── Settings ─────────────────────────────── */
.settings-section { margin-bottom: 28px; }
.settings-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }

/* Binary status row wraps badge + info + button on mobile */
.binary-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ── Printer row more-menu ───────────────────── */
.comp-more-wrap {
  position: relative;
  display: inline-flex;
}
.comp-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  min-width: 160px;
  padding: 4px 0;
  animation: pop-confirm-in .1s ease;
}
.comp-more-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
}
.comp-more-menu button:hover { background: var(--hover-bg); }
.comp-more-menu button.danger { color: var(--danger); }

/* ── Pop Confirm ─────────────────────────────── */
.pop-confirm {
  position: fixed;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-xl);
  z-index: 9500;
  min-width: 200px;
  max-width: 280px;
  font-size: 14px;
  color: var(--text);
  animation: pop-confirm-in .12s ease;
}
@keyframes pop-confirm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pop-confirm-msg {
  margin: 0 0 11px;
  line-height: 1.45;
  color: var(--text);
}
.pop-confirm-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
/* Caret arrow pointing down toward the trigger */
.pop-confirm::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: var(--caret-left, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* When popping below the trigger, caret is on top */
.pop-confirm.pop-below::after {
  bottom: auto;
  top: -6px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* ── Modal ─────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.modal.modal-wide { max-width: 560px; }
/* Extra-wide variant used by the Konica account-track modal — the Verify
   diagnostic dump (DEVMODE hex + extracted strings) needs the space. */
.modal.modal-xwide { max-width: 760px; }
.modal.modal-ref { max-width: min(1100px, 96vw); }
.driver-ref-stage {
  background: #1f2937;
  border-radius: 8px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  max-height: 70vh;
}
.driver-ref-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: default;
  background: #111827;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
  outline: none;
}
.driver-ref-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── Toast ─────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}
.toast {
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn .15s ease;
  max-width: 320px;
}
.toast.success { background: #059669; }
.toast.error { background: #dc2626; }
.toast.info { background: #2563eb; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Short and flat: a 150ms fade for dialogs. No springs, no scale, no entrance
   animation on lists. The class names stay because app.js waits on them. */

@keyframes modalIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes overlayFadeIn {
  from { background: rgba(0,0,0,0); }
  to   { background: var(--scrim); }
}
@keyframes treeExpand { from { opacity: 0; } to { opacity: 1; } }

.modal-anim-in  { animation: modalIn  .15s ease both; }
.modal-anim-out { animation: modalOut .15s ease forwards; }
.overlay-anim-in { animation: overlayFadeIn .15s ease forwards; }
.tree-expand-anim { animation: treeExpand .15s ease both; }

/* Honour the explicit disable toggle */
body.no-animations .modal-anim-in,
body.no-animations .modal-anim-out,
body.no-animations .tree-expand-anim,
body.no-animations .toast { animation: none !important; }

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .modal-anim-in, .modal-anim-out, .tree-expand-anim, .toast { animation: none !important; }
}

/* ── Settings toggle switch (iOS-style) ──────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 2px 0;
}
.toggle-row > span { flex: 1; min-width: 0; }
.toggle-row strong { display: block; margin-bottom: 2px; font-weight: 600; }
.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: background-color .15s ease;
  cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary, #2563eb); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
[data-theme="dark"] .toggle-slider { background: #4b5563; }
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider { background: var(--primary, #2563eb); }

/* ── API Key display ─────────────────────────────── */
.api-key-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
  flex: 1;
}

/* ── Empty State ─────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  font-size: 14px;
}
.empty-state svg { width: 32px; height: 32px; margin-bottom: 12px; opacity: .5; }
.empty-state p { font-size: 14px; }

/* ── Upload area ─────────────────────────────── */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-area:hover, .upload-area.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.upload-area input[type=file] { display: none; }
.upload-area-icon { font-size: 24px; margin-bottom: 8px; }
.upload-area-text { font-size: 14px; color: var(--text-muted); }
.upload-link {
  color: var(--link);
  cursor: pointer;
  font-weight: 500;
}

/* ── Badges ─────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}
.badge-success { background: var(--success-bg); color: var(--success-dark); }
.badge-warn    { background: var(--warning-bg); color: var(--warning-dark); }
.badge-error   { background: var(--danger-bg); color: var(--danger-dark); }

/* ── Spacing utilities ─────────────────────────────── */
.mb-3  { margin-bottom: 12px; }
.mt-3  { margin-top: 12px; }
.ml-2  { margin-left: 8px; }

/* ── Progress bar ─────────────────────────────── */
.progress-bar-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width .15s ease;
}

/* ── Spinner ─────────────────────────────── */
.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Binary status row ─────────────────────────────── */
.binary-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

/* ── Code inline ─────────────────────────────── */
code {
  font-family: var(--font-mono);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: var(--primary-text);
}

/* ── Modal Tabs ─────────────────────────────── */
.modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.tab-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--link); border-bottom-color: var(--primary); }
.tab-panel { }

/* ── Deployment list ─────────────────────────────── */
.deploy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.deploy-item:last-child { border-bottom: none; }

.deploy-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── Deploy button feedback states ────────────────── */
.deploy-btn-working {
  background: var(--primary) !important;
  opacity: 0.8;
  pointer-events: none;
  min-width: 100px;
  justify-content: center;
}
.deploy-btn-done {
  background: var(--success, #059669) !important;
  border-color: var(--success, #059669) !important;
  color: #fff !important;
  pointer-events: none;
  min-width: 100px;
  justify-content: center;
}

/* ── Computers card list ─────────────────────────── */
.comp-list { }

.comp-folder-chevron { width: 12px; height: 12px; flex-shrink: 0; }
.comp-folder-header.collapsed .comp-folder-chevron { transform: rotate(-90deg); }
.comp-folder-header:hover { background: var(--bg-secondary) !important; }

.comp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.comp-item:last-child { border-bottom: none; }
.comp-item:hover { background: var(--bg-alt); }
.comp-item-highlight { animation: comp-highlight-fade 2s ease-out; }
@keyframes comp-highlight-fade {
  0%   { background: rgba(37,99,235,.18); }
  100% { background: transparent; }
}
.deploy-hostname-link:hover { color: var(--link-hover); }

/* Pulse ring keyframe — triggered when a computer checks in */
@keyframes dot-ring-out {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}

.comp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.comp-dot.online  { background: #059669; box-shadow: 0 0 0 2px #d1fae5; }
.comp-dot.offline { background: #d1d5db; }

/* Expanding ring that plays once when the .pulsing class is added */
.comp-dot.pulsing::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #059669;
  animation: dot-ring-out 0.65s ease-out forwards;
  pointer-events: none;
}
[data-theme="dark"] .comp-dot.pulsing::after { background: #34d399; }

.os-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}
.os-icon-mac { color: var(--text-muted); }
.os-icon-win { color: #0078d4; }
[data-theme="dark"] .os-icon-mac { color: #9ca3af; }
[data-theme="dark"] .os-icon-win { color: #60a5fa; }

.comp-info { flex: 1; min-width: 0; }

.comp-name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.comp-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color .15s, border-color .15s;
}
.comp-name-link:hover {
  color: var(--primary, var(--link));
  border-bottom-color: currentColor;
}

.comp-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Active console user — slightly stronger than the rest of the meta line so
   the admin can pick it out at a glance. Theme-aware via --text. */
.comp-active-user {
  color: var(--text);
  font-weight: 500;
}

.comp-ver-badge {
  font-size: 11px;
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  background: var(--primary-light);
  color: var(--link);
}
.comp-ver-badge.outdated,
.pr-sticker.comp-ver-badge.outdated { background: var(--warning-bg); color: var(--warning-dark); }

/* ── Driver Errors worklist (Logs page tab) ──────────────────────────────── */
.de-loading, .de-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 40px 16px; color: var(--text-muted); font-size: 14px;
  flex-direction: column; text-align: center;
}
.de-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.de-count { font-size: 14px; font-weight: 600; }
.de-list { display: flex; flex-direction: column; }
.de-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.de-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.de-printer {
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--link);
}
.de-printer:hover { color: var(--link-hover); }
.de-site { font-size: 12px; color: var(--text-muted); cursor: pointer; }
.de-site:hover { color: var(--link-hover); }
.de-machines {
  font-size: 12px; padding: 1px 5px; border-radius: 4px;
  background: var(--bg-subtle, var(--bg-muted)); color: var(--text-muted);
}
/* The error text is the diagnosis — allow it to wrap rather than truncate, but
   keep it visually secondary to the printer name. */
.de-error {
  font-size: 12px; color: var(--danger-dark); font-family: var(--mono, ui-monospace, monospace);
  word-break: break-word; line-height: 1.45;
}
.de-fix { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.de-fix-label { font-size: 12px; color: var(--text-muted); }
.de-select { max-width: 340px; font-size: 12px; padding: 3px 6px; height: auto; }
.de-hint { font-size: 12px; color: var(--text-muted); }
.de-hint-warn { color: var(--warning-dark); }
[data-theme="dark"] .de-error { color: #fca5a5; }
[data-theme="dark"] .de-hint-warn { color: #fcd34d; }
[data-theme="dark"] .de-machines { background: #1f2937; }

.comp-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.comp-action-overflow { display: inline-flex; }

/* ── Computer card header stats (badge + online count + install btn) ─── */
.comp-header-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.comp-header-online {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.comp-header-install-btn {
  font-size: 12px;
  gap: 4px;
}

/* ── Multi-select circles (slide in from left when select mode enabled) ── */
.comp-select-circle,
.comp-org-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s;
}
.comp-select-circle:hover,
.comp-org-circle:hover {
  border-color: #2563eb;
}
.comp-select-circle.checked,
.comp-org-circle.checked {
  background: #2563eb;
  border-color: #2563eb;
}
.comp-select-circle.checked::after,
.comp-org-circle.checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

/* ── Installed printers panel (expandable per computer) ──── */
.comp-printers-panel {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
[data-theme="dark"] .comp-printers-panel { background: #1f2937; }

.comp-printers-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.comp-printers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.comp-printers-list { padding: 0 12px 10px; }

.comp-printer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background .1s;
}
.comp-printer-row:hover { background: var(--bg-alt); }

/* Wrapper around name + IP/conn-type so they stack on mobile */
.comp-printer-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-printer-name {
  font-size: 14px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-printer-ip {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.comp-printer-sublabel {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Clickable printer name links (Computers + Clients trees) */
.comp-printer-name-link,
.tree-printer-name-link {
  cursor: pointer;
  transition: color .15s;
}
.comp-printer-name-link:hover,
.tree-printer-name-link:hover {
  color: var(--link);
}
.comp-printer-actions { display: flex; gap: 4px; flex-shrink: 0; }

.comp-printers-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Deploy Printer modal */
.deploy-folder-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.deploy-printer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.deploy-printer-row:last-child { border-bottom: none; }
.deploy-printer-row:hover { background: var(--bg-alt); }
.deploy-printer-deployed { opacity: .7; }
.deploy-printer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.deploy-printer-info .conn-type-badge {
  align-self: flex-start; /* prevent the badge from stretching to full column width */
  font-size: 11px;
  padding: 0 4px;
}
.deploy-printer-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deploy-printer-model {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deploy-variant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  transition: background .1s;
}
.deploy-variant-row:last-child { border-bottom: none; }
.deploy-variant-row:hover { background: var(--hover-strong); }
.deploy-variant-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deploy-variant-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* ══════════════════════════════════════════════════════
   MOBILE — comprehensive small-screen optimisations
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Global overflow prevention ─────────────────── */
  .main-content { overflow-x: hidden; max-width: 100vw; }
  .comp-list, .card { max-width: 100%; overflow: hidden; }

  /* ── Cards & headers ────────────────────────────── */
  .card-header {
    flex-direction: column;
    align-items: stretch !important;
    padding: 12px 14px;
    gap: 6px;
  }
  .card-header h3 {
    font-size: 14px;
    flex: none !important;  /* override inline flex:1 */
  }

  /* ── Computers — card header (company name + stats) ── */
  .card-header h3 span { white-space: normal !important; word-break: break-word; }
  .comp-header-stats {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    flex-shrink: 1;
  }
  .comp-header-online { font-size: 12px; }
  .comp-header-install-btn { font-size: 12px; padding: 3px 7px; }
  .badge { font-size: 11px; padding: 2px 7px; }

  /* ── Computer list item: stack info + actions ──── */
  .comp-item {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 8px 10px 6px;
    gap: 3px 6px;
  }
  .comp-info { flex: 1; min-width: 0; }
  .comp-name { font-size: 14px; }
  .comp-meta { white-space: normal; font-size: 12px; }
  .comp-ver-badge { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .comp-actions {
    flex: 0 0 100%;
    padding-top: 6px;
    margin-left: 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 4px;
  }
  .comp-btn-text { display: inline; }
  .comp-actions .btn { font-size: 12px; padding: 4px 8px; }

  /* ── Installed printers panel ───────────────────── */
  .comp-printers-header {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 4px;
  }
  .comp-printers-list { padding: 0 4px 8px; }

  /* Printer row: STACK vertically so nothing overflows */
  .comp-printer-row {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 8px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .comp-printer-row:last-child { border-bottom: none; }

  /* Name + IP info: take full width of the row */
  .comp-printer-info {
    flex: 1 1 calc(100% - 24px); /* full width minus printer icon */
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    overflow: hidden;
  }
  .comp-printer-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 12px;
  }
  .comp-printer-ip { display: block; font-size: 12px; color: var(--text-muted); }
  .comp-printer-info .conn-type-badge { font-size: 11px; padding: 0 4px; }

  /* Shared badge */
  .comp-printer-shared-badge { font-size: 11px; padding: 1px 5px; }

  /* Actions: wrap onto their own line below the printer name */
  .comp-printer-actions {
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 3px;
    padding-top: 4px;
    margin-left: 21px; /* align under printer name, past icon */
  }
  .comp-printer-actions .btn { font-size: 12px; padding: 3px 6px; gap: 3px; }
  .comp-printer-actions .btn svg { width: 10px; height: 10px; }
  /* Managed badge: keep inline */
  .comp-printer-actions .badge { font-size: 11px; padding: 2px 6px; }

  /* ── Sticky toolbar ─────────────────────────────── */
  #comp-sticky-bar { padding: 20px 8px 6px !important; margin: -20px -8px 8px !important; }
  #comp-sticky-bar h2 { font-size: 14px; }
  #comp-sticky-bar .comp-btn-text { display: none; }
  #comp-select-actions { margin-left: 0 !important; width: 100%; margin-top: 4px; }

  /* ── Deploy modal ───────────────────────────────── */
  .deploy-printer-row { padding: 8px 10px; gap: 6px; }
  .deploy-printer-name { font-size: 12px; }
  .deploy-variant-row { padding: 6px 10px 6px 20px; }
  .deploy-variant-name { font-size: 12px; }

  /* ── Install command block ──────────────────────── */
  .client-install-row { gap: 6px; padding: 8px 10px; }
  .install-code { font-size: 12px; word-break: break-all; }
  .client-install-block { overflow: hidden; }

  /* ── Page header ────────────────────────────────── */
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
  .page-header h2 { font-size: 18px; line-height: 28px; }
  .page-header-actions { width: 100%; justify-content: flex-start; }

  /* ── Modals — bottom-sheet on mobile ─────────────── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-header { padding: 14px 14px; }
  .modal-header h3 { font-size: 14px; }
  .modal-body {
    padding: 14px;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-footer {
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Clients page — tree ────────────────────────── */

  /* Folder rows: wrap actions below the folder name */
  .tree-row {
    padding: 8px 10px;
    gap: 4px 6px;
    flex-wrap: wrap;
  }
  .tree-row .tree-actions {
    flex: 0 0 100%;
    padding-top: 4px;
    margin-left: 30px; /* align under label, past toggle+icon */
    border-top: 1px solid var(--border);
  }

  /* Client-level rows: keep Edit/Delete icons inline on the right */
  .tree-client > .tree-row {
    flex-wrap: nowrap;
  }
  .tree-client > .tree-row .tree-actions {
    flex: 0 0 auto;
    padding-top: 0;
    margin-left: 0;
    border-top: none;
  }

  .tree-label { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Hide the spacer that reserves variant-toggle width — wastes space on mobile */
  .variant-toggle-spacer { display: none; }
  /* Make drag handles always visible on mobile (no hover state) with a
     comfortable touch target — pointer events already handle touch via
     setPointerCapture so no extra touch handlers needed.
     Horizontal padding kept small so the icon sits close to the printer name;
     min-width intentionally omitted (the old 32px content + 6px*2 padding = 44px total was
     pushing everything far apart). */
  .drag-handle { opacity: 1 !important; padding: 6px 4px; min-height: 32px; }
  .tree-meta { display: inline; font-size: 12px; margin-left: 0; }
  .tree-actions { gap: 3px; }
  .tree-actions .btn-icon { padding: 6px; min-width: 36px; min-height: 36px; width: auto; height: auto; }
  .tree-actions .btn-icon svg { width: 14px; height: 14px; }
  .tree-actions .btn { font-size: 12px; padding: 3px 6px; gap: 2px; }
  .tree-actions .btn svg { width: 10px !important; height: 10px !important; }

  /* Reduce deep indentation on mobile — cap left padding */
  .tree-printer {
    padding-left: 20px !important;
    flex-wrap: wrap;
    gap: 3px;
  }
  .tree-printer .tree-actions {
    gap: 3px;
    flex: 0 0 100%;
    padding-top: 3px;
    margin-left: 19px; /* align under printer name (past 16px icon + 3px gap) */
    border-top: 1px solid var(--border);
  }
  .tree-actions .tree-action-label { display: none; }
  .tree-model-meta { display: none; }
  .tree-folder .tree-row { padding-left: 10px !important; }
  .tree-folder .tree-folder .tree-row { padding-left: 16px !important; }

  /* Variant rows: less indent on mobile */
  .tree-variant { padding-left: 26px !important; }

  /* Printer badges: keep compact */
  .printer-badge { font-size: 11px; padding: 0 4px; }

  /* Add-row: less indent */
  .add-row { padding-left: 16px !important; font-size: 12px; }

  /* ── Printer detail ─────────────────────────────── */
  .pd-header { padding: 10px 12px 0; gap: 10px; }
  .pd-title { font-size: 18px; }
  .pd-tabs {
    padding: 4px 0 0;
    position: relative;
  }
  .pd-tabs::after {
    content: '';
    position: sticky;
    right: 0;
    flex-shrink: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--card-bg, #fff));
    pointer-events: none;
  }
  .pd-tab { padding: 6px 10px; font-size: 12px; }
  .pd-panel { padding: 12px 10px; }

  /* Computer overflow menu stays visible on mobile as the primary action hub */
  .comp-action-overflow { display: inline-flex !important; }

  /* ── Drivers page ───────────────────────────────── */
  .driver-card-header { flex-wrap: wrap; gap: 6px; }
  .driver-card-header .btn { font-size: 11px; }

  /* ── Settings page ──────────────────────────────── */
  .upload-area { padding: 16px; }
  .upload-area p { font-size: 12px; }

  /* ── Gorelo mapping ─────────────────────────────── */
  .g-map-row    { flex-wrap: wrap; row-gap: 4px; }
  .g-map-name   { width: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
  .g-map-gorelo-name { flex: 1; font-size: 12px; }
  .g-map-folder-row  { padding-left: 16px; }
  .g-map-empty       { padding-left: 16px; }

  /* ── Tables / logs ──────────────────────────────── */
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; }
  table th, table td { padding: 6px 8px; }

  /* ── Toast: ensure not clipped ──────────────────── */
  .toast { max-width: 90vw; font-size: 12px; }

  /* ── Forms: full-width on mobile ────────────────── */
  .form-group select, .form-group input, .form-group textarea { width: 100%; }
  .form-row { flex-direction: column; gap: 8px; }

  /* ── Buttons: compact on mobile ─────────────────── */
  .btn-sm { font-size: 12px; padding: 4px 8px; }
}

/* ── Install command block ────────────────────────── */
.install-cmd-block {
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.install-cmd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.install-cmd-row:last-child { border-bottom: none; }
.install-cmd-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.install-cmd-code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  padding: 0;
  user-select: all;
  cursor: text;
  min-width: 0;
}
.install-cmd-copy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.install-cmd-copy:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.install-cmd-copy svg { width: 13px; height: 13px; }
.install-cmd-copy .icon-check { display: none; }
.install-cmd-copy.copied { background: #065f46; border-color: #059669; color: #6ee7b7; }
.install-cmd-copy.copied .icon-copy  { display: none; }
.install-cmd-copy.copied .icon-check { display: block; }

/* ── Dual-platform install block (Windows + macOS) ── */
.client-install-block { overflow: hidden; }
.client-install-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.client-install-row:first-child { border-top: none; }
.install-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  white-space: nowrap;
  width: 52px;
  flex-shrink: 0;
}
.install-code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  padding: 0;
  user-select: all;
  cursor: text;
  min-width: 0;
}

/* ── Folder tree node ─────────────────────────────── */
.tree-folder { border-bottom: 1px solid var(--border); }
.tree-folder:last-child { border-bottom: none; }
.tree-folder > .tree-children { border-top: 1px solid var(--border); }

/* ── mb-3 already exists, add extra utilities ─────── */
.mb-3 { margin-bottom: 12px; }

/* ── Page-header action group (wraps on mobile) ────── */
.page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Tab bar (used by printer detail) ─────── */
.tab-bar {
  display: flex;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* Firefox */
  gap: 0;
}
.tab-bar::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════
   Integrations hub
   ══════════════════════════════════════════════════════ */
.int-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: -4px 0 20px;
  max-width: 75ch;
}

/* Segmented tab bar */
.int-tabbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  max-width: 100%;
}
.int-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.int-tab-ico { display: inline-flex; }
.int-tab-ico svg { width: 16px; height: 16px; }
.int-tab:hover { color: var(--text); background: var(--hover-bg); }
.int-tab.active {
  background: var(--card-bg);
  color: var(--link);
  box-shadow: var(--shadow);
}
.int-tab-soon {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-text);
}
[data-theme="dark"] .int-tab-soon { color: #60a5fa; }

.int-panel { animation: int-fade .2s ease; }
@keyframes int-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Per-tab intro header */
.int-intro {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.int-intro-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-text);
}
[data-theme="dark"] .int-intro-icon { color: #60a5fa; }
.int-intro-icon svg { width: 22px; height: 22px; }
.int-intro h3 { font-size: 16px; font-weight: 600; margin: 1px 0 4px; }
.int-intro p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  max-width: 70ch;
  line-height: 1.5;
}

/* Cards */
.int-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.int-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.int-card-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.int-card-body { padding: 18px; }
.int-card-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
  max-width: 80ch;
}
.int-card-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.int-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.int-hint { font-size: 12px; color: var(--text-muted); margin: 5px 0 0; line-height: 1.4; }
.int-bullets {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.int-bullets li { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.int-bullets li strong { color: var(--text); font-weight: 600; }
.int-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  cursor: pointer;
  margin-bottom: 16px;
}
.int-toggle input { margin-top: 2px; flex-shrink: 0; }
.int-toggle strong { font-size: 14px; display: block; }
.int-toggle .int-hint { margin-top: 2px; }
.int-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.int-test-result { font-size: 14px; }
.int-copy-row { display: flex; gap: 6px; }
.int-copy-row input { flex: 1; min-width: 0; }
.int-mono { font-family: var(--font-mono); font-size: 12px; }

/* Status chips */
.int-status {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}
.int-status-on   { background: var(--success-bg); color: var(--success-dark); border-color: var(--success-border); }
.int-status-warn { background: var(--warning-bg); color: var(--warning-dark); border-color: var(--warning-border); }
.int-status-off  { background: var(--bg-alt); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .int-status-on   { background: rgba(5,150,105,.15);  color: #34d399; border-color: rgba(5,150,105,.3); }
[data-theme="dark"] .int-status-warn { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.3); }

/* Create-key button */
.int-btn-create {
  padding: 10px 18px;
  font-size: 14px;
  transition: background-color .15s;
}
.int-btn-create svg { width: 16px; height: 16px; }

/* Coming-soon placeholder (Apollo) */
.int-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
}
.int-coming-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-text);
  margin-bottom: 18px;
}
[data-theme="dark"] .int-coming-icon { color: #60a5fa; }
.int-coming-icon svg { width: 32px; height: 32px; }
.int-coming-soon h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.int-coming-soon p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
  max-width: 46ch;
  line-height: 1.5;
}
.int-coming-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-text);
}
[data-theme="dark"] .int-coming-badge { color: #60a5fa; }

/* ══════════════════════════════════════════════════════
   MOBILE — hamburger sidebar drawer
   ══════════════════════════════════════════════════════ */

.side-search {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 12px; margin-bottom: 4px;
  background: var(--sidebar-hover); border: 1px solid var(--sidebar-line);
  border-radius: var(--radius-md); color: var(--sidebar-muted);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.side-search:hover { color: var(--sidebar-text); }
.side-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-search-text { flex: 1; }
.side-search .nav-search-kbd { margin: 0; padding: 0 6px; font-size: 11px; line-height: 18px; background: transparent; }
.sidebar.collapsed .side-search { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .side-search-text, .sidebar.collapsed .side-search .nav-search-kbd { display: none; }
.tabbar, .search-fab { display: none; }

/* Account menu — lives in the sidebar footer; the menu opens inline above the button */
.user-menu { margin-bottom: 4px; }
.user-menu-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 12px;
  background: none; border: none; border-radius: var(--radius-md); cursor: pointer;
  color: var(--sidebar-text); font: inherit; font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.user-menu-btn:hover { background: var(--sidebar-hover); color: #fff; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar.collapsed .user-menu-btn { justify-content: center; padding: 6px 0; }
.sidebar.collapsed .user-menu-btn .nav-label { display: none; }
.sidebar.collapsed .dropdown-menu { display: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #ffffff;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.dropdown-menu {
  margin-bottom: 4px; padding: 4px 0;
  background: var(--sidebar-hover); border: 1px solid var(--sidebar-line);
  border-radius: var(--radius-lg);
}
.dropdown-label {
  padding: 6px 12px 2px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sidebar-muted);
}
.dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 12px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--sidebar-text); text-align: left;
}
.dropdown-item:hover { background: var(--sidebar-line); color: #fff; }
.dropdown-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.dropdown-item.current { color: #60a5fa; font-weight: 500; }
.dropdown-sep { height: 1px; margin: 4px 0; background: var(--sidebar-line); }

/* Sidebar overlay backdrop */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 299;
  opacity: 0;
  transition: opacity .25s;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

@media (max-width: 768px) {
  /* Prevent the page from scrolling horizontally */
  html, body { overflow-x: hidden; }

  /* Prevent iOS from auto-zooming into small inputs (any input < 16px triggers zoom) */
  input, select, textarea { font-size: max(16px, 1em) !important; }


  /* Replace the flex+fixed-height desktop layout with natural document flow.
     The body handles vertical scrolling on mobile; the sidebar is a fixed overlay. */
  #page-app {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Never edge to edge: 16px gutters, more where the screen curves or has a notch */
  .main-content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }


  /* Universal search: blue button at the bottom right, above the bar */
  .search-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 250;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 16px);
    width: 52px; height: 52px; border: none; border-radius: 9999px;
    background: var(--primary); color: #fff; cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: background .15s;
  }
  .search-fab:hover, .search-fab:active { background: var(--primary-dark); }
  .search-fab svg { width: 24px; height: 24px; }
  body.kiosk-mode .search-fab, body.pd-embed .search-fab { display: none !important; }

  /* Page search boxes are replaced by the universal search */
  .fleet-search, .drivers-search { display: none !important; }

  /* Search as a bottom sheet: results above, search bar at the bottom */
  #palette-root { z-index: 500; }
  /* The root tracks the visible area (above the keyboard); the sheet sits at its bottom */
  html #palette-root { inset: auto; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100%); }
  #palette-root .palette {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: auto; margin: 0;
    display: flex; flex-direction: column;
    max-height: calc(100% - 40px);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html.kb-open #palette-root .palette { padding-bottom: 0; }
  body.palette-open { overflow: hidden; }
  /* No bottom bar or search button floating over the search or the keyboard */
  body.palette-open .tabbar, body.palette-open .search-fab,
  html.kb-open .tabbar, html.kb-open .search-fab { display: none !important; }
  #palette-root .palette-list { order: 1; flex: 1; min-height: 0; max-height: none; overflow-y: auto; padding-top: 4px; }
  #palette-root .palette-input {
    order: 2; flex-shrink: 0;
    border-bottom: none; border-top: 1px solid var(--border);
    padding: 14px max(16px, env(safe-area-inset-left));
  }
  #palette-root .palette-foot { display: none; }
  #palette-root .palette-item { padding-left: max(16px, env(safe-area-inset-left)); }

  /* Full menu: a sheet that slides up above the bottom bar, items in a grid */
  .sidebar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    top: auto;
    width: auto !important;
    max-height: calc(100vh - var(--tabbar-height) - env(safe-area-inset-bottom) - 64px);
    z-index: 300;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(calc(100% + var(--tabbar-height) + 40px));
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateY(0); visibility: visible; transition: transform .25s ease; }
  .sidebar-brand { display: none; }
  .sidebar-nav {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 12px 8px;
  }
  .sidebar-nav .side-search, .sidebar-nav .nav-group-label { grid-column: 1 / -1; }
  .sidebar-nav .nav-group-label { margin: 8px 4px 0; }
  .sidebar .nav-item,
  .sidebar.collapsed .nav-item {
    flex-direction: column; justify-content: center; gap: 6px;
    padding: 14px 4px; min-height: 76px; text-align: center;
    background: var(--sidebar-hover); font-size: 12px;
  }
  .sidebar .nav-item.active { background: var(--sidebar-active-bg); }
  .sidebar .nav-item svg { width: 22px; height: 22px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-group-label .nav-label,
  .sidebar.collapsed .side-search-text { display: inline; }
  .sidebar.collapsed .nav-group-label { justify-content: flex-start; margin: 8px 4px 0; }
  .sidebar.collapsed .side-search { justify-content: flex-start; padding: 8px 12px; }
  .sidebar.collapsed .side-search .nav-search-kbd { display: none; }
  .sidebar .side-search .nav-search-kbd { display: none; }
  .sidebar.collapsed .user-menu-btn { justify-content: flex-start; padding: 6px 12px; }
  .sidebar.collapsed .dropdown-menu { display: block; }
  .dropdown-menu.hidden { display: none !important; }
  .sidebar-collapse-btn { display: none; }
  .sidebar-footer { padding: 8px 12px 12px; }

  /* Bottom bar */
  .tabbar {
    display: grid;
    grid-template-columns: 1fr 1fr 76px 1fr 1fr;
    /* lift labels off the bottom curve */
    align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    /* Side padding keeps the outer tabs clear of the rounded screen corners */
    padding: 0 max(20px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px, env(safe-area-inset-left));
    background: var(--sidebar-bg);   /* dark in both themes, like the desktop sidebar */
    border-top: 1px solid var(--sidebar-line);
  }
  .tabbar .nav-item {
    flex-direction: column; justify-content: center; align-items: center; gap: 2px;
    padding: 0; border-radius: 0; background: none;
    color: var(--sidebar-text); font-size: 11px; font-weight: 500;
  }
  .tabbar .nav-item svg { width: 22px; height: 22px; }
  .tabbar .nav-item:hover { background: none; color: var(--sidebar-text); }
  .tabbar .nav-item.active, .tabbar .nav-item.active:hover { background: none; color: #60a5fa; }
  .btn-hamburger {
    justify-self: center; align-self: start;
    width: 64px; height: 64px; margin-top: -20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff;
    border: 4px solid var(--sidebar-bg); border-radius: 9999px;
    box-shadow: var(--shadow-lg); cursor: pointer;
    transition: background .15s;
  }
  .btn-hamburger:hover, .btn-hamburger[aria-expanded="true"] { background: var(--primary-dark); }
  .btn-hamburger svg { width: 28px; height: 28px; }
  .btn-hamburger .icon-close { display: none; }
  .btn-hamburger[aria-expanded="true"] .icon-close { display: block; }
  .btn-hamburger[aria-expanded="true"] .icon-menu { display: none; }

  .main-content {
    margin-left: 0;
    padding-top: 12px;
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 20px);
    overflow: visible;   /* body handles scrolling on mobile */
  }

  /* Tighten page headers on mobile */
  .page-header { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .page-header h2 { font-size: 18px; }

  /* Printer detail — reduce top breathing room on small screens */
  .pd-header { padding: 12px 16px 0; }
  .pd-tabs   { padding: 8px 16px 0; margin-top: 8px; }
  .pd-panel  { padding: 16px; }

  /* Card headers wrap their right-side content on small screens */
  .card-header { flex-wrap: wrap; gap: 8px; }

  /* Stack form rows vertically */
  .form-row { flex-direction: column; }

  /* On mobile/touch, always show tree actions (hover doesn't work on touch screens) */
  .tree-actions,
  .tree-printer .tree-actions { opacity: 1 !important; }

  /* Let printer rows wrap on small screens */
  .tree-printer { flex-wrap: wrap; }

  /* drag-handle visibility + touch sizing handled in the main 600px breakpoint */

  /* ── Touch targets — minimum 36px for comfortable tapping ── */
  .btn-icon { min-width: 36px; min-height: 36px; padding: 8px; }
  .btn-icon svg { width: 16px; height: 16px; }
  .btn.btn-sm, .btn.btn-ghost.btn-sm { min-height: 36px; }
}

/* ══════════════════════════════════════════════════════
   PRINTER DETAIL PAGE
   ══════════════════════════════════════════════════════ */

/* Header */
.pd-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px 0;
}
.btn-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.btn-back:hover { background: var(--bg-alt,var(--bg-alt)); color: var(--text); }
.btn-back svg { width: 16px; height: 16px; }
.pd-title-block { min-width: 0; }
.pd-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-subtitle { font-size: 12px; color: var(--text-muted); }

/* Tabs */
.pd-tabs {
  display: flex;
  gap: 0;
  padding: 16px 24px 0;
  border-bottom: 1px solid var(--border);
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.pd-tab.active { color: var(--link); border-bottom-color: #2563eb; }
.pd-tab:hover:not(.active) { color: var(--text); }

/* Panels */
.pd-panel { padding: 24px; }
.pd-panel.hidden { display: none; }

/* Status grid */
.pd-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .pd-status-grid { grid-template-columns: 1fr; } }

.pd-status-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.pd-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.pd-connectivity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}
.pd-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Gentle breathing glow for the online printer status dot */
@keyframes pd-dot-breathe {
  0%, 100% { box-shadow: 0 0 4px rgba(5,150,105,0.4); }
  50%       { box-shadow: 0 0 10px rgba(5,150,105,0.75), 0 0 0 4px rgba(5,150,105,0.12); }
}

.pd-connectivity.online .pd-status-dot  {
  background: #059669;
  animation: pd-dot-breathe 2s ease-in-out infinite;
}
.pd-connectivity.offline .pd-status-dot { background: #dc2626; }
.pd-connectivity.online  .pd-status-text { color: var(--success-dark); }
.pd-connectivity.offline .pd-status-text { color: var(--danger-dark); }
[data-theme="dark"] .pd-connectivity.online  .pd-status-text { color: #34d399; }
[data-theme="dark"] .pd-connectivity.offline .pd-status-text { color: #f87171; }

.pd-meta-row { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.pd-stale-badge {
  display: inline-block;
  background: var(--warning-bg);
  color: var(--warning-dark);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}
[data-theme="dark"] .pd-stale-badge { background: #78350f; color: #fbbf24; }
.pd-fresh-badge {
  display: inline-block;
  background: var(--success-bg);
  color: var(--success-dark);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}
[data-theme="dark"] .pd-fresh-badge { background: #064e3b; color: #34d399; }

/* Toner bars (per-colour) */
.pd-toner-item {
  margin-bottom: 10px;
}
.pd-toner-item:last-child { margin-bottom: 0; }
.pd-toner-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.pd-toner-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: capitalize;
}
.pd-toner-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 32px;
  text-align: right;
}
.pd-toner-item.pd-toner-low    .pd-toner-pct { color: var(--warning); }
.pd-toner-item.pd-toner-critical .pd-toner-pct { color: var(--danger); }
.pd-toner-track {
  height: 10px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pd-toner-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width .5s;
}
/* Per-colour toner fills — data-color attr lets CSS handle dark/light theming */
.pd-toner-fill[data-color="cyan"]     { background: #06b6d4; }
.pd-toner-fill[data-color="magenta"]  { background: #d946ef; }
.pd-toner-fill[data-color="yellow"]   { background: #eab308; }
.pd-toner-fill[data-color="black"]    { background: #374151; }
.pd-toner-fill[data-color="toner"]    { background: #2563eb; }
.pd-toner-fill[data-color="low"]      { background: #f59e0b; }
.pd-toner-fill[data-color="critical"] { background: #dc2626; }
/* Dark mode: lighter variants for colours that are hard to see on dark backgrounds */
[data-theme="dark"] .pd-toner-fill[data-color="black"]   { background: #9ca3af; }
[data-theme="dark"] .pd-toner-fill[data-color="yellow"]  { background: #fbbf24; }
[data-theme="dark"] .pd-toner-fill[data-color="magenta"] { background: #e879f9; }
.pd-toner-unknown { font-size: 14px; color: var(--text-muted); }
/* legacy label kept for fallback */
.pd-toner-label { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 8px; }

/* Alerts */
.pd-alerts-card { }
.pd-no-alerts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--success-dark);
}
[data-theme="dark"] .pd-no-alerts { color: #34d399; }
.pd-alert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.pd-alert-row:first-child { border-top: none; }

/* Deploy tab */
.pd-section-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.pd-deploy-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--card-bg);
}
.pd-deploy-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pd-deploy-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-deploy-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pd-btn-deploy {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.pd-btn-deploy:hover { background: var(--bg-alt); }
.pd-btn-set-default {
  border-color: var(--primary);
  color: var(--link);
}
.pd-btn-set-default:hover { background: var(--primary-light); }
.pd-btn-remove {
  border-color: var(--danger-border);
  color: var(--danger);
}
.pd-btn-remove:hover { background: var(--danger-bg); }
[data-theme="dark"] .pd-btn-remove { border-color: #7f1d1d; }
[data-theme="dark"] .pd-btn-remove:hover { background: #7f1d1d; color: #fca5a5; }
.pd-default-badge {
  font-size: 11px;
  background: var(--success-bg);
  color: var(--success-dark);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .pd-default-badge { background: #064e3b; color: #34d399; }
@media (max-width: 520px) {
  .pd-btn-deploy { flex: 1 1 auto; text-align: center; justify-content: center; }
}

.pd-deploy-add {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-deploy-add select,
.pd-deploy-add input {
  flex: 1;
  min-width: 120px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-alt);
  color: var(--text);
}
.pd-or { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Settings tab — Sharing section */
.pd-sharing-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Settings tab */
.pd-danger-zone {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--danger-border);
}
[data-theme="dark"] .pd-danger-zone { border-top-color: #7f1d1d; }
/* .btn-danger is defined globally above — local override for settings danger zone sizing */
.pd-danger-zone .btn-danger {
  border-radius: 8px;
  padding: 8px 20px;
}

.pd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
  gap: 12px;
  color: var(--text-muted);
}
.pd-loading-sm { font-size: 14px; color: var(--text-muted); padding: 8px 0; }
.pd-error { padding: 24px; color: var(--danger); }
.pd-error-sm { font-size: 14px; color: var(--danger); }
.pd-empty { font-size: 14px; color: var(--text-muted); font-style: italic; }


/* ── Alerts view ─────────────────────────────────────────────────────────── */
.alerts-loading {
  padding: 20px;
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alerts-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-muted);
}
.alerts-empty svg {
  width: 40px;
  height: 40px;
  opacity: .35;
  margin-bottom: 12px;
}
.alerts-empty-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.alerts-empty-sub   { font-size: 14px; }
.alerts-list { display: flex; flex-direction: column; }
.alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.alert-row:last-child { border-bottom: none; }
.alert-row-badges { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.alert-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.alert-row-printer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.alert-printer-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: color .15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-printer-link:hover {
  color: var(--link);
}
.alert-printer-loc {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-row-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .alert-row      { flex-wrap: wrap; gap: 6px; }
  .alert-row-time { width: 100%; }
}

/* ── Printer preferences tab ──────────────────────────────────────────────── */

/* ── Preferences toolbar (section label + action buttons) ──────────────────── */
.pref-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pref-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pref-toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.pref-common-sel {
  flex: 1;
  min-width: 180px;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
}

/* ── Preferences list ─────────────────────────────────────────────────────── */
.pref-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 4px;
}

/* Each row: [Badge | PropertyName | Value | ×] fused into one pill */
.pref-row {
  display: grid;
  grid-template-columns: 38px 185px 1fr 32px;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 38px;
}
.pref-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
/* Brief amber flash when a duplicate preset is selected */
.pref-row-highlight {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Platform badge (Win / Mac) — leftmost column */
.pref-os-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
  user-select: none;
}
.pref-os-win {
  background: rgba(0,120,212,0.09);
  color: #0078d4;
}
.pref-os-mac {
  background: rgba(52,199,89,0.09);
  color: #1c8534;
}
[data-theme="dark"] .pref-os-win { color: #60a5fa; background: rgba(96,165,250,0.12); }
[data-theme="dark"] .pref-os-mac { color: #34d399; background: rgba(52,211,153,0.10); }

/* Property name — muted monospace left column */
.pref-row input.pref-name {
  width: 100%;
  padding: 8px 11px;
  font-size: 12px;
  font-family: var(--font-mono);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--hover-bg);
  color: var(--text-muted);
  outline: none;
}
.pref-row input.pref-name:focus { color: var(--text); }
.pref-row input.pref-name::placeholder { opacity: 0.55; }

/* Value column */
.pref-value-cell { min-width: 0; display: flex; align-items: stretch; }
.pref-value-cell input,
.pref-value-cell select {
  width: 100%;
  padding: 8px 11px;
  font-size: 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  outline: none;
}
.pref-value-cell input::placeholder { opacity: 0.45; }

/* Delete button — subtle, danger on hover */
.pref-del {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: color 0.15s, background 0.15s;
  width: 32px;
}
.pref-del:hover { color: var(--danger); background: rgba(220,38,38,0.07); }
[data-theme="dark"] .pref-del:hover { background: rgba(220,38,38,0.12); }

.pref-save-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.pd-settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 520px) {
  .pref-toolbar { flex-direction: column; align-items: stretch; }
  .pref-row {
    grid-template-columns: 30px 1fr 32px;
    grid-template-rows: auto auto;
  }
  .pref-os-badge { grid-column: 1; grid-row: 1 / 3; font-size: 11px; }
  .pref-row input.pref-name {
    grid-column: 2; grid-row: 1;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .pref-value-cell { grid-column: 2; grid-row: 2; }
  .pref-del { grid-column: 3; grid-row: 1 / 3; border-left: 1px solid var(--border); }
}

/* ── Variant banner & cards ─────────────────────────────────────────────── */
.variant-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: 6px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.variant-banner svg { flex-shrink: 0; color: var(--variant); }
.variant-banner-link { color: var(--variant); font-weight: 600; text-decoration: none; }
.variant-banner-link:hover { color: var(--link-hover); }
.variant-banner-note { color: var(--text-muted); font-weight: 400; }

.variant-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.variant-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.variant-card:hover { border-color: var(--primary); }
.variant-card-main { flex: 1; min-width: 0; }
.variant-card-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.variant-card-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.variant-pref-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(37,99,235,0.1);
  color: var(--link);
  white-space: nowrap;
}
.variant-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Capabilities hint */
.pref-caps-hint {
  font-size: 12px;
  color: var(--link);
  padding: 4px 0 2px;
  font-style: italic;
}

/* Variant count badge on folder printer list */
.variant-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(99,102,241,0.1);
  color: var(--variant);
  margin-left: 2px;
}
.variant-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: background 0.15s;
  flex-shrink: 0;
  min-width: 28px;
}
/* Spacer that holds the same horizontal space as .variant-toggle for printers with no variants,
   keeping the printer icon horizontally aligned whether or not a toggle is present. */
.variant-toggle-spacer {
  display: inline-block;
  flex-shrink: 0;
  min-width: 28px;
}
.variant-toggle:hover { background: rgba(99,102,241,0.08); }
.variant-toggle svg {
  transition: transform 0.2s;
  color: #4f46e5;
}
.variant-toggle.open svg { transform: rotate(90deg); }
.tree-variants { padding-left: 0; }
.tree-variant {
  border-left: 2px solid rgba(139,92,246,0.2);
  margin-left: 0;
  opacity: 0.85;
}
.tree-variant:hover { opacity: 1; }

.btn-danger-text { color: var(--danger) !important; }
.btn-danger-text:hover { color: var(--danger) !important; background: rgba(220,38,38,0.08) !important; }

.btn-icon-danger {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.btn-icon-danger:hover { color: var(--danger); }

/* Connection type badge (installed printers panel) */
.conn-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.conn-type-tcpip { background: var(--primary-light); color: var(--info-text); }
.conn-type-usb   { background: var(--success-bg); color: var(--success-dark); }
.conn-type-wsd   { background: var(--warning-bg); color: var(--warning-dark); }
.conn-type-local { background: var(--bg-muted); color: var(--text-muted); }
[data-theme="dark"] .conn-type-tcpip { background: #1e3a8a; color: #93c5fd; }
[data-theme="dark"] .conn-type-usb   { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .conn-type-wsd   { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .conn-type-local { background: #374151; color: #9ca3af; }

/* Shared printer badge */
.comp-printer-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--warning-dark);
  border: 1px solid var(--warning-border);
  flex-shrink: 0;
  letter-spacing: .01em;
}
[data-theme="dark"] .comp-printer-shared-badge { background: #78350f; color: #fcd34d; border-color: #78350f; }

/* Remote shared badge — printer is connected FROM another host (blue tint) */
.comp-printer-shared-remote {
  background: var(--select-bg);
  color: var(--info-text);
  border-color: #bfdbfe;
}
[data-theme="dark"] .comp-printer-shared-remote { background: #1e3a8a; color: #93c5fd; border-color: #1d4ed8; }

/* "Hosted on X" note — replaces Adopt button for remote-shared printers */
.comp-printer-remote-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

/* ── Compact "Add common property" dropdown ───────────────────────────────── */
.pref-common-sel-compact {
  width: auto;
  max-width: 185px;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
@media (max-width: 520px) { .pref-common-sel-compact { max-width: 100%; flex: 1 1 auto; } }

/* ── Template picker on printer Preferences ──────────────────────────────── */
.pref-template-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  margin-bottom: 18px;
}
.pref-template-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pref-template-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  color: var(--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pref-template-card-icon svg { width: 18px; height: 18px; }
.pref-template-card-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pref-template-card-current {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.pref-template-sel-full {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
}
.pref-template-sel-full:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pref-template-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tmpl-tree-item {
  cursor: default;
  align-items: flex-start;
  gap: 10px;
}
.tmpl-tree-item:hover { background: var(--hover-bg); }
.tmpl-tree-main { flex: 1; min-width: 0; }
.tmpl-tree-actions {
  opacity: 1;
  align-self: center;
}
.tmpl-group-empty {
  padding: 12px 16px 14px 42px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Templates page ───────────────────────────────────────────────────────── */
.tmpl-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  margin-bottom: 10px;
  flex-wrap: wrap;
  transition: border-color 0.15s;
}
.tmpl-card:hover { border-color: var(--primary); }
.tmpl-card-main { flex: 1; min-width: 0; }
.tmpl-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tmpl-card-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.tmpl-card-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; align-self: center; }
@media (max-width: 520px) {
  .tmpl-card { flex-direction: column; align-items: stretch; }
  .tmpl-card-actions { justify-content: flex-end; }
}

/* Printer chips inside template cards */
.tmpl-card-printers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.tmpl-printer-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  background: rgba(37,99,235,0.1);
  color: var(--link);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
[data-theme="dark"] .tmpl-printer-chip {
  background: rgba(37,99,235,0.18);
}
.tmpl-no-printers {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 5px;
}

/* ── Template editor modal ─────────────────────────────────────────────────── */
.tmpl-modal-body { display: flex; flex-direction: column; gap: 4px; }
.tmpl-modal-body .form-group { margin-bottom: 12px; }

/* ── Log Viewer ─────────────────────────────────────────────────────────────── */
.logs-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px); /* fill viewport minus top padding */
  gap: 0;
}
.logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.logs-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.logs-title svg { width: 18px; height: 18px; color: var(--link); }

.logs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Search */
.logs-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.logs-search-icon {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.logs-search {
  padding: 5px 28px 5px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  width: 220px;
  outline: none;
  transition: border-color .15s;
}
.logs-search:focus { border-color: var(--primary); }
.logs-search-clear {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
}
.logs-search-clear:hover { color: var(--text); }

/* Auto-scroll toggle — highlighted when active */
.logs-toggle { transition: background .15s, color .15s; }
.logs-toggle.active {
  background: var(--primary-light);
  color: var(--link);
  border-color: var(--primary);
}
[data-theme="dark"] .logs-toggle.active {
  background: #1e3a8a;
  color: #60a5fa;
  border-color: #2563eb;
}

/* Connection status */
.logs-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.logs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background .3s;
}
.logs-dot-connected   { background: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,.25); }
.logs-dot-connecting  { background: #f59e0b; animation: logs-pulse 1.2s ease-in-out infinite; }
.logs-dot-error       { background: #dc2626; }

@keyframes logs-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* Color legend */
.logs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 10px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.ll-item { opacity: .85; }
[data-theme="light"] .logs-legend { background: #1f2937; border-color: #374151; }

/* Terminal panel */
.logs-panel {
  flex: 1;
  overflow-y: auto;
  background: #111827;
  border: 1px solid #1f2937;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 10px 14px;
  min-height: 0; /* needed for flex child to scroll */
  scroll-behavior: smooth;
}
[data-theme="light"] .logs-panel { background: #1a2332; border-color: #374151; }

.logs-output {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

.logs-empty {
  color: var(--text-btn);
  font-style: italic;
  padding: 20px 0;
  text-align: center;
}

/* Log lines */
.log-line {
  display: block;
  padding: 1px 0;
  border-radius: 2px;
}
.log-line:hover { background: rgba(255,255,255,.04); }

.log-ts {
  color: var(--text-btn);
  user-select: none;
  font-size: 12px;
}

.log-msg { word-break: break-all; }

/* New-line flash animation */
.log-line-new {
  animation: log-flash .55s ease-out forwards;
}
@keyframes log-flash {
  0%   { background: rgba(37,99,235,.28); }
  100% { background: transparent; }
}

/* Separator between buffer and live */
.log-separator {
  color: var(--text-strong);
  font-size: 12px;
  margin: 6px 0;
  user-select: none;
  letter-spacing: .05em;
}

/* Search highlight */
.log-mark {
  background: rgba(251,191,36,.35);
  color: #fef3c7;
  border-radius: 2px;
  padding: 0 1px;
}

/* Scrollbar styling for the terminal panel */
.logs-panel::-webkit-scrollbar       { width: 6px; }
.logs-panel::-webkit-scrollbar-track { background: transparent; }
.logs-panel::-webkit-scrollbar-thumb { background: #374151; border-radius: var(--radius-sm); }
.logs-panel::-webkit-scrollbar-thumb:hover { background: #4b5563; }

@media (max-width: 520px) {
  .logs-search { width: 140px; }
  .logs-legend { display: none; }
  .logs-header { flex-direction: column; align-items: flex-start; }
}

/* ── Logs view: sub-tabs ─────────────────────────────────────────────────────── */
.logs-tab-bar {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
}
.logs-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.logs-tab:hover { color: var(--text); }
.logs-tab.active {
  color: var(--link);
  border-bottom-color: var(--primary);
  background: var(--card-bg);
}
.log-tab-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.log-tab-panel.hidden { display: none; }

/* Adjust logs-page to work within the tab layout */
.logs-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  overflow: hidden;
}

/* ── Server logs: filter chips ───────────────────────────────────────────────── */
.logs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
}
.logs-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--chip-color, #9ca3af) 40%, transparent);
  background: color-mix(in srgb, var(--chip-color, #9ca3af) 12%, transparent);
  color: var(--chip-color, var(--text-faint));
  cursor: pointer;
  opacity: 0.38;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.logs-filter-chip.active { opacity: 1; }
.logs-filter-chip:hover { opacity: .7; }
[data-theme="dark"] .logs-filter-chip {
  border-color: color-mix(in srgb, var(--chip-color, #9ca3af) 30%, transparent);
  background: color-mix(in srgb, var(--chip-color, #9ca3af) 10%, transparent);
}

/* ── User activity log ───────────────────────────────────────────────────────── */
.ulogs-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.ulogs-header {
  padding: 14px 16px 8px;
  flex-shrink: 0;
}
.ulogs-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}
.ulogs-title svg { color: var(--link); flex-shrink: 0; width: 18px; height: 18px; }
.ulogs-subtitle { font-size: 12px; margin: 0; }

.ulogs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ulogs-type-select {
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.ulogs-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px 12px;
}
.ulogs-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.ulogs-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 32px 20px;
  font-style: italic;
}
.ulogs-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  flex-shrink: 0;
}

/* ── Single audit log row ────────────────────────────────────────────────────── */
.ulog-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  margin-bottom: 2px;
  transition: background .1s, border-color .1s;
}
.ulog-row:hover {
  background: var(--bg-alt);
  border-color: var(--border);
}
.ulog-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
.ulog-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.ulog-user {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  color: var(--text);
}
.ulog-date { color: var(--text-muted); white-space: nowrap; }

/* Action badges */
.ulog-action {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.ulog-action-create       { background: var(--success-bg); color: var(--success-dark); }
.ulog-action-update       { background: var(--primary-light); color: var(--info-text); }
.ulog-action-delete       { background: var(--danger-bg); color: var(--danger-dark); }
.ulog-action-deploy       { background: var(--primary-light); color: var(--info-text); }
.ulog-action-undeploy     { background: var(--warning-bg); color: var(--warning-dark); }
.ulog-action-login        { background: #ede9fe; color: #5b21b6; }
.ulog-action-login-failed { background: var(--danger-bg); color: var(--danger-dark); }
.ulog-action-other        { background: var(--bg-alt); color: var(--text-muted); }
[data-theme="dark"] .ulog-action-create       { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .ulog-action-update       { background: #1e3a8a; color: #93c5fd; }
[data-theme="dark"] .ulog-action-delete       { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .ulog-action-deploy       { background: #1e3a8a; color: #60a5fa; }
[data-theme="dark"] .ulog-action-undeploy     { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .ulog-action-login        { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .ulog-action-login-failed { background: #7f1d1d; color: #fca5a5; }

.ulog-ip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.ulog-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-transform: capitalize;
  flex-shrink: 0;
}
.ulog-entity-link {
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
}
.ulog-entity-link:hover { color: var(--link-hover); }
.ulog-entity-name { font-weight: 500; color: var(--text); }
.ulog-details {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── User management in Settings ─────────────────────────────────────────────── */
.users-list { display: flex; flex-direction: column; gap: 4px; }
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.user-row-info { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.user-row-name { font-weight: 500; font-size: 14px; }
.user-row-actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.badge-primary { background: var(--primary-light); color: var(--info-text); }
.badge-gray    { background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); }
[data-theme="dark"] .badge-primary { background: #1e3a8a; color: #93c5fd; }
.btn-danger { color: var(--danger) !important; }
.btn-danger:hover { background: var(--danger-bg) !important; }
[data-theme="dark"] .btn-danger:hover { background: #7f1d1d !important; }

/* Mobile: user logs toolbar wraps */
@media (max-width: 520px) {
  .ulogs-toolbar { flex-wrap: wrap; }
  .ulogs-type-select { flex: 1 1 auto; }
  .logs-filter-bar { padding: 4px 8px; }
  .logs-filter-chip { font-size: 11px; padding: 1px 6px; }
  .ulog-row { flex-direction: column; gap: 6px; }
  .ulog-meta { align-items: flex-start; flex-direction: row; gap: 8px; }
}
.tmpl-modal-body .pref-toolbar { margin-bottom: 8px; }

/* ── API Keys ──────────────────────────────────────────────────────────────── */
.api-keys-grid { display: flex; flex-direction: column; gap: 10px; }
.api-key-card { padding: 14px 16px; }
.api-key-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.api-key-meta { display: flex; flex-direction: column; gap: 4px; }
.api-key-prefix { font-size: 14px; padding: 2px 8px; border-radius: 4px; background: var(--bg-input); }
.api-key-reveal { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border); overflow-x: auto; }
.api-key-reveal code { font-size: 14px; word-break: break-all; flex: 1; user-select: all; }
.api-endpoints-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.api-endpoints-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.api-endpoints-table td:first-child { font-weight: 600; white-space: nowrap; width: 40px; }
.api-endpoints-table td:nth-child(2) { white-space: nowrap; }
.badge-ghost { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-muted); }

/* ── Groups responsive ─────────────────────────── */
@media (max-width: 520px) {
  [data-group-detail] > div { grid-template-columns: 1fr !important; }
}
.api-doc-section { padding: 16px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 10px; }
.api-doc-h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; font-family: var(--font-mono, monospace); color: var(--text); }
.api-doc-pre { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); font-size: 12px; font-family: var(--font-mono, monospace); white-space: pre; overflow-x: auto; color: var(--text); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
 * Net graph (dashboard view) — unified, glow-first
 * ════════════════════════════════════════════════════════════════════════ */

#view-dashboard {
  padding: 4px 0 10px;
}

.dash-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.dash-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.dash-title::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-bright);
}

/* ── Dashboard overview tiles (alerts / offline / versions) ──────────────── */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.dash-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: 340px;
  overflow: hidden;
  position: relative;
}
.dash-tile-alerts   { --dash-accent: #3b82f6; }
.dash-tile-offline  { --dash-accent: #dc2626; }
.dash-tile-outdated { --dash-accent: #059669; }

.dash-tile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dash-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--dash-accent, #9ca3af) 14%, transparent);
  color: var(--dash-accent, var(--text-muted));
  flex-shrink: 0;
}
.dash-tile-icon svg { width: 16px; height: 16px; }
[data-theme="dark"] .dash-tile-icon {
  background: color-mix(in srgb, var(--dash-accent, #9ca3af) 22%, transparent);
}
.dash-tile-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-strong);
}
.dash-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--dash-accent, var(--text-muted));
  background: color-mix(in srgb, var(--dash-accent, #9ca3af) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--dash-accent, #9ca3af) 24%, transparent);
  padding: 3px 11px;
  border-radius: 999px;
  min-width: 32px;
  text-align: center;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .dash-count {
  background: color-mix(in srgb, var(--dash-accent, #9ca3af) 20%, transparent);
  border-color: color-mix(in srgb, var(--dash-accent, #9ca3af) 36%, transparent);
}
.dash-count:empty { display: none; }

.dash-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 14px;
  color: var(--text);
}
.dash-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted);
}
.dash-empty {
  padding: 32px 12px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
}
.dash-empty-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dash-accent, var(--success)) 12%, transparent);
  color: var(--dash-accent, var(--success));
}
.dash-empty-icon svg { width: 24px; height: 24px; }
.dash-empty-msg { font-weight: 500; }
.dash-empty-err { color: var(--danger); }

.dash-list { display: flex; flex-direction: column; gap: 3px; }
.dash-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, padding-left 160ms ease;
}
.dash-row::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 3px; height: 0;
  border-radius: 2px;
  background: var(--dash-accent, var(--primary));
  transform: translateY(-50%);
  transition: height 180ms ease;
}
.dash-row:hover {
  background: color-mix(in srgb, var(--dash-accent, var(--primary)) 6%, var(--bg-alt));
  border-color: color-mix(in srgb, var(--dash-accent, var(--primary)) 20%, var(--border));
  padding-left: 14px;
}
.dash-row:hover::before { height: 60%; }
[data-theme="dark"] .dash-row:hover {
  background: color-mix(in srgb, var(--dash-accent, var(--primary)) 14%, var(--bg-alt));
}
.dash-row-main { display: flex; flex-direction: column; min-width: 0; }
.dash-row-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-row-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-row-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.dash-row-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Alert rows use a stacked layout so badges never squeeze the printer name —
 * title + time share the top row, sub-line and badges each get their own row. */
.dash-alert-row {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title  time"
    "sub    sub"
    "badges badges";
  row-gap: 3px;
  column-gap: 8px;
}
.dash-alert-row > .dash-row-title  { grid-area: title; min-width: 0; }
.dash-alert-row > .dash-row-time   { grid-area: time;  }
.dash-alert-row > .dash-row-sub    { grid-area: sub;   min-width: 0; }
.dash-alert-row > .dash-row-badges { grid-area: badges; }

.dash-alert-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
}
.dash-alert-badge::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
}
.dash-alert-low_toner     { background: rgba(245,158,11,.13); color: var(--warning-dark); border-color: rgba(245,158,11,.28); }
.dash-alert-paper_jam     { background: rgba(249,115,22,.13); color: #c2410c; border-color: rgba(249,115,22,.28); }
.dash-alert-offline       { background: rgba(220,38,38,.13);  color: var(--danger-dark); border-color: rgba(220,38,38,.28); }
.dash-alert-generic_error { background: rgba(220,38,38,.13);  color: var(--danger-dark); border-color: rgba(220,38,38,.28); }
[data-theme="dark"] .dash-alert-low_toner     { color: #fbbf24; }
[data-theme="dark"] .dash-alert-paper_jam     { color: #fb923c; }
[data-theme="dark"] .dash-alert-offline       { color: #fca5a5; }
[data-theme="dark"] .dash-alert-generic_error { color: #fca5a5; }

/* ── Versions pie chart ──────────────────────────────────────────────────── */
.dash-versions {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
  padding: 4px 2px;
}
.dash-pie { display: flex; align-items: center; justify-content: center; }
.dash-pie-svg {
  display: block;
}
.dash-pie-total {
  font-size: 24px;
  font-weight: 700;
  fill: var(--text);
}
.dash-pie-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dash-legend-row {
  display: grid;
  grid-template-columns: 10px auto auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  padding: 3px 6px;
  border-radius: 6px;
  transition: background 150ms ease;
}
.dash-legend-row:hover {
  background: color-mix(in srgb, var(--primary) 5%, var(--bg-alt));
}
.dash-legend-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent);
}
.dash-legend-ver { font-weight: 600; white-space: nowrap; }
.dash-legend-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.dash-legend-pct { opacity: 0.7; }
.dash-ver-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(5,150,105,.15);
  color: var(--success-dark);
}
[data-theme="dark"] .dash-ver-tag { color: #34d399; }

/* ── Responsive — stack tiles on mobile ──────────────────────────────────── */
@media (max-width: 900px) {
  .dash-tiles { grid-template-columns: 1fr; }
  .dash-tile { min-height: 200px; max-height: 260px; }
}
@media (max-width: 520px) {
  .dash-versions { grid-template-columns: 110px 1fr; gap: 10px; }
  .dash-pie-svg { width: 110px; height: 110px; }
}

/* ── Server Status sub-tab (Logs → Server Status) ─────────────────────────── */
.srv-status { display: flex; flex-direction: column; padding: 14px 14px 18px; flex: 1; min-height: 0; overflow-y: auto; }
.srv-status-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.srv-status-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 600; color: var(--text);
}
.srv-status-title svg { width: 18px; height: 18px; color: var(--link); }
.srv-status-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.srv-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.srv-dot-live  { background: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,.25); }
.srv-dot-error { background: #dc2626; }

.srv-body { flex: 1; }
.srv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.srv-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.srv-card-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 600;
}
.srv-card-value {
  font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1;
}
.srv-card-value-sm { font-size: 14px; font-weight: 600; }
.srv-card-sub { font-size: 12px; color: var(--text-muted); }
.srv-bar {
  height: 6px; background: var(--border); border-radius: var(--radius-sm);
  overflow: hidden; margin-top: 4px; margin-bottom: 2px;
}
.srv-bar-fill { height: 100%; background: #059669; transition: width .3s; }
.srv-bar-fill.srv-bar-warn { background: #f59e0b; }
.srv-bar-fill.srv-bar-crit { background: #dc2626; }
.srv-empty {
  padding: 24px; color: var(--text-muted); text-align: center; font-size: 14px;
}
.srv-empty.srv-error { color: var(--danger); }

/* ── 10-minute metrics graph block ──────────────────────────────────────── */
.srv-graphs { margin-top: 18px; }
.srv-graphs-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.srv-graphs-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.srv-graphs-sub { font-size: 12px; color: var(--text-muted); }
.srv-graphs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.srv-graph-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.srv-graph-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.srv-graph-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 600;
}
.srv-graph-current {
  font-size: 14px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.srv-graph-svg-wrap { position: relative; }
.srv-graph-svg {
  width: 100%; height: 90px; display: block;
  color: var(--text);
}
.srv-graph-ymax {
  position: absolute; top: 0; right: 4px;
  font-size: 12px; color: var(--text-muted);
  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
  padding: 0 3px; border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.srv-graph-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap;
}
.srv-graph-legend { display: flex; gap: 10px; }
.srv-graph-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.srv-graph-swatch {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}

/* ── Printer row redesign (Clients tree) ──────────────────────────────────── */
.tree-printer.pr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 52px;
}
.pr-row .pr-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--link);
  flex-shrink: 0;
}
.pr-row .pr-icon svg { width: 16px; height: 16px; }
.pr-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.pr-line1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pr-name {
  font-weight: 600; font-size: 14px; color: var(--text);
  cursor: pointer;
}
.pr-name:hover { color: var(--link); }
.pr-line2 {
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pr-sticker {
  display: inline-flex; align-items: center; padding: 2px 8px;
  background: var(--bg-muted); color: var(--text-btn);
  border-radius: 6px; font-size: 11px; font-weight: 500;
  font-family: var(--font-mono);
  cursor: pointer;
}
[data-theme="dark"] .pr-sticker { background: #1f2937; color: #d1d5db; }
.pr-sticker:hover { background: #e5e7eb; }
[data-theme="dark"] .pr-sticker:hover { background: #374151; }

/* Stacked "pages" variants badge */
.pr-variants-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--link);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  line-height: 1;
  transition: background .15s;
}
.pr-variants-btn:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.pr-variants-btn.open {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.pr-variants-btn svg { flex-shrink: 0; }
.pr-variants-count { font-size: 11px; font-weight: 600; }

/* Right side: toner / status / deps / deploy / menu */
.pr-right {
  display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0;
}
.pr-toner {
  display: flex; align-items: center; gap: 8px; min-width: 150px;
}
.pr-toner-label {
  font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.pr-toner-bar {
  flex: 1;
  height: 6px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden;
  min-width: 60px;
}
.pr-toner-fill {
  height: 100%; background: #059669;
  transition: width .3s, background .3s;
}
.pr-toner-fill.warn { background: #f59e0b; }
.pr-toner-fill.crit { background: #dc2626; }
.pr-toner-pct {
  font-size: 12px; font-weight: 600; color: var(--text); min-width: 32px; text-align: right;
}
.pr-toner-pct.warn { color: #d97706; }
.pr-toner-pct.crit { color: var(--danger); }

.pr-status-pill {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 600;
  line-height: 1.2;
}
.pr-status-online  { background: var(--success-bg); color: var(--success-dark); }
.pr-status-offline { background: var(--danger-bg); color: var(--danger-dark); }
.pr-status-unknown {
  background: var(--warning-bg);
  color: var(--warning-dark);
  box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.55);
  animation: pr-status-unknown-pulse 2.4s ease-in-out infinite;
}
.pr-status-driver-error {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  animation: pr-status-driver-error-pulse 2s ease-in-out infinite;
}
[data-theme="dark"] .pr-status-online  { background: #064e3b; color: #34d399; }
[data-theme="dark"] .pr-status-offline { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .pr-status-unknown { background: #78350f; color: #fde68a; }
[data-theme="dark"] .pr-status-driver-error { background: #b91c1c; color: #fff5f5; }
@keyframes pr-status-driver-error-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}
@keyframes pr-status-unknown-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(234, 179, 8, 0); }
}

.pr-op-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease;
}
.pr-op-pill:hover { opacity: .8; }
.pr-op-pill-linked {
  background: var(--primary-light); color: var(--info-text);
}
.pr-op-pill-unlinked {
  background: var(--border); color: var(--text-muted);
}
[data-theme="dark"] .pr-op-pill-linked   { background: #1e3a8a; color: #93c5fd; }
[data-theme="dark"] .pr-op-pill-unlinked { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.pr-op-pill .pr-op-slash {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pr-deps {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.pr-deps:hover { background: var(--hover-bg, rgba(0,0,0,0.04)); color: var(--text); }
[data-theme="dark"] .pr-deps:hover { background: rgba(255,255,255,0.06); }
.pr-deps-count { font-weight: 600; font-size: 12px; }

.pr-deploy-btn {
  border: 1px solid var(--border);
  font-weight: 500;
}
.pr-deploy-btn:hover { border-color: var(--primary); color: var(--link); }

.pr-menu-wrap { position: relative; }
.pr-menu-btn {
  width: 30px; height: 30px; padding: 0 !important;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.pr-menu {
  /* Positioned via JS (viewport coords) and reparented to <body> when open so
     no ancestor overflow/transform/stacking context can clip or cover it. */
  position: fixed;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 180px;
  padding: 4px;
  box-shadow: var(--shadow-lg);
  z-index: 4000;
}
.pr-menu.hidden { display: none; }
.pr-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--text);
  border-radius: 6px;
}
.pr-menu-item:hover { background: var(--hover-bg, rgba(0,0,0,0.05)); }
[data-theme="dark"] .pr-menu-item:hover { background: rgba(255,255,255,0.06); }
.pr-menu-item.danger { color: var(--danger); }
.pr-menu-item.danger:hover { background: var(--danger-bg); }
[data-theme="dark"] .pr-menu-item.danger:hover { background: #7f1d1d; }
.pr-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }

.pr-meta-archived { color: var(--danger); font-size: 12px; }
.pr-meta-deleted  { color: #d97706; font-size: 12px; }

/* Hide the old right-side actions for printer rows — we redesigned to pr-right */
.tree-printer.pr-row .tree-actions { display: none; }
.tree-printer.pr-row .tree-label,
.tree-printer.pr-row .tree-icon,
.tree-printer.pr-row .printer-badge:not(.pr-sticker):not(.pr-variants-btn),
.tree-printer.pr-row .tree-meta {
  display: none;  /* body renders these separately */
}
/* But keep the shared-printer badge (it's a printer-badge inside pr-line1) */
.tree-printer.pr-row .pr-line1 .printer-badge { display: inline-flex; }

@media (max-width: 900px) {
  .pr-toner { display: none; }
}
@media (max-width: 700px) {
  .pr-deps  { display: none; }
  .pr-status-pill { display: none; }
  .pr-op-pill { display: none; }
}

/* ── Printer detail redesign: top-bar back button + header card + tabs ────── */
.pd-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px 0;
}
.pd-topbar-back { font-size: 12px; }

.pd-topbar-client {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pd-topbar-client:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
  border-color: var(--primary);
  color: var(--link);
}
.pd-topbar-client svg { color: var(--link); }

.pd-topbar-sep {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.6;
}
.pd-topbar-sep svg { width: 12px; height: 12px; }

.pd-topbar-folder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pd-topbar-folder:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
  border-color: var(--primary);
  color: var(--link);
}
.pd-topbar-folder svg { color: var(--link); }

@media (max-width: 520px) {
  .pd-topbar { flex-wrap: wrap; }
}

/* Subtle "thinking" pulse on the Clients search input while it debounces +
   hydrates collapsed clients; cleared once the filter actually runs. */
#clients-search.searching {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.pd-header-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 8px 0 14px;
  position: sticky; top: 0; z-index: 20;
}
.pd-h-icon {
  width: 54px; height: 54px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--link);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pd-h-icon svg { width: 28px; height: 28px; }
.pd-h-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pd-h-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-h-name { font-size: 24px; font-weight: 600; color: var(--text); margin: 0; }
.pd-h-pill {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; line-height: 1.2;
  background: var(--bg-muted); color: var(--text-muted);
}
.pd-h-pill-ok      { background: var(--success-bg); color: var(--success-dark); }
.pd-h-pill-off     { background: var(--danger-bg); color: var(--danger-dark); }
.pd-h-pill-error   { background: var(--danger-bg); color: var(--danger-dark); }
.pd-h-pill-unknown {
  background: var(--warning-bg); color: var(--warning-dark);
  animation: pr-status-unknown-pulse 2.4s ease-in-out infinite;
}
.pd-h-pill-archived { background: var(--danger-bg); color: var(--danger-dark); }
.pd-h-pill-deleted  { background: var(--warning-bg); color: var(--warning-dark); }
[data-theme="dark"] .pd-h-pill { background: #1f2937; color: #9ca3af; }
[data-theme="dark"] .pd-h-pill-ok      { background: #064e3b; color: #34d399; }
[data-theme="dark"] .pd-h-pill-off     { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .pd-h-pill-error   { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .pd-h-pill-unknown { background: #78350f; color: #fde68a; }

.pd-h-pill-error::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: currentColor; border-radius: 50%; margin-right: 6px;
}

.pd-h-sticker {
  display: inline-flex; align-items: center; padding: 2px 10px;
  background: var(--bg-muted); color: var(--text-btn);
  border-radius: 6px; font-size: 12px; font-weight: 500;
  font-family: var(--font-mono);
}
[data-theme="dark"] .pd-h-sticker { background: #1f2937; color: #d1d5db; }

.pd-h-row2 {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--text);
}
.pd-h-model  { font-weight: 500; }
.pd-h-ip     { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.pd-h-driver { color: var(--text-muted); }

.pd-h-row3 { font-size: 12px; color: var(--text-muted); }

.pd-h-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

@media (max-width: 768px) {
  .pd-header-card { flex-wrap: wrap; position: static; }
  .pd-h-actions { width: 100%; justify-content: flex-end; }
}

/* ── Printer detail: Overview tab ────────────────────────────────────────── */
.pd-ov-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .pd-ov-grid { grid-template-columns: 1fr; }
}

.pd-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.pd-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.pd-card-title { font-size: 14px; font-weight: 600; color: var(--text); }
.pd-card-sub   { font-size: 12px; color: var(--text-muted); }

.pd-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: color-mix(in srgb, #059669 12%, transparent);
  color: var(--success-dark);
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
}
[data-theme="dark"] .pd-live-pill { color: #34d399; }
.pd-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5,150,105,.22);
}

.pd-ov-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px; margin-bottom: 16px;
}
.pd-ov-stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 600;
  margin-bottom: 4px;
}
.pd-ov-stat-value {
  font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.15;
}
.pd-ov-status-ok   { color: var(--success-dark); }
.pd-ov-status-err  { color: var(--danger); }
.pd-ov-status-warn { color: #a16207; }
[data-theme="dark"] .pd-ov-status-ok   { color: #34d399; }
[data-theme="dark"] .pd-ov-status-err  { color: #fca5a5; }
[data-theme="dark"] .pd-ov-status-warn { color: #fde68a; }
.pd-ov-uptime { color: var(--text); font-size: 18px; }
/* MAC address: monospace so the hex groups line up, and smaller than the other
   stats because 17 characters at 22px blows the grid column apart. */
.pd-ov-mac {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer;
}
.pd-ov-mac:hover { color: var(--link); }
/* A MAC is ~17 unbreakable characters, far wider than "Online" or "Up 3d". At
   phone widths auto-fit still packs three 100px columns in, and a nowrap MAC
   would spill across the Uptime column — so drop to two columns and shrink it. */
@media (max-width: 520px) {
  .pd-ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-ov-mac { font-size: 14px; }
}
.pd-ov-witnesses {
  margin-top: 4px; font-size: 12px; color: var(--text-muted);
}

.pd-ov-supplies-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 10px;
}
.pd-ov-supplies { display: flex; flex-direction: column; gap: 8px; }

.pd-ov-meta { margin-top: 12px; font-size: 12px; color: var(--text-muted); }

.pd-ov-deploys .pd-ov-empty {
  padding: 16px 0; color: var(--text-muted); font-size: 14px; text-align: center;
}
.pd-ov-dep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-ov-dep-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease;
}
.pd-ov-dep-row:hover { background: var(--hover-bg, rgba(0,0,0,0.04)); }
.pd-ov-dep-row:hover .pd-ov-dep-host { color: var(--link); }
[data-theme="dark"] .pd-ov-dep-row:hover { background: rgba(255,255,255,0.06); }
.pd-ov-dep-host { flex: 1; font-family: var(--font-mono); color: var(--text); font-weight: 500; }
.pd-ov-dep-default {
  font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--link); font-weight: 600;
}
.pd-ov-dep-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #9ca3af;
  flex-shrink: 0;
}
.pd-ov-dep-dot.on  { background: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.22); }
.pd-ov-dep-dot.off { background: #d1d5db; }
[data-theme="dark"] .pd-ov-dep-dot.off { background: #4b5563; }

/* ── Printer detail: Logs tab ─────────────────────────────────────────────── */
/* Toolbar: search + exact-type + time range. Wraps to stacked rows on narrow
   viewports rather than overflowing the card. */
.pd-log-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pd-log-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0 8px;
}
.pd-log-search {
  flex: 1 1 240px; min-width: 180px;
  padding: 6px 10px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--text);
}
.pd-log-search:focus { outline: none; border-color: var(--primary); }
.pd-log-select {
  padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--text);
}
.pd-log-custom-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-log-custom-range.hidden { display: none; }
.pd-log-custom-range label {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-muted);
}
.pd-log-custom-range input {
  padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--text);
}

/* Category chips */
.pd-log-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.pd-log-chip {
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.pd-log-chip:hover { color: var(--text); border-color: var(--text-muted); }
.pd-log-chip.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.pd-log-chip-count { opacity: .7; font-variant-numeric: tabular-nums; }
.pd-log-summary {
  font-size: 12px; color: var(--text-muted);
  padding: 0 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

/* Live indicator + "n new entries" banner */
.pd-log-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--text-muted); text-transform: uppercase; cursor: default;
}
.pd-log-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  animation: pd-log-pulse 2s ease-in-out infinite;
}
@keyframes pd-log-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(5,150,105,.5); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(5,150,105,0); }
}
.pd-log-live-banner { padding: 0 0 6px; }
.pd-log-live-banner.hidden { display: none; }
.pd-log-live-btn {
  width: 100%; padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  color: #fff; background: var(--primary);
  border: none; border-radius: 8px; cursor: pointer;
  transition: filter .15s;
}
.pd-log-live-btn:hover { filter: brightness(1.08); }

/* Stream */
.pd-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* Rows that arrived on a live refresh get a brief wash of colour so the change
   is noticeable without the list visibly reflowing. */
.pd-log-fresh { animation: pd-log-fresh-fade 3s ease-out 1; }
@keyframes pd-log-fresh-fade {
  0%   { background: rgba(37,99,235,.18); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-log-live-dot { animation: none; }
  .pd-log-fresh { animation: none; }
}
.pd-log-day {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 12px 6px;
  position: sticky; top: 0; background: var(--card-bg); z-index: 1;
}
.pd-log-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  position: relative; transition: background .15s;
}
.pd-log-row:hover { background: var(--hover-bg); }
[data-theme="dark"] .pd-log-row:hover { background: rgba(255,255,255,0.04); }
.pd-log-row.expandable { cursor: pointer; }
.pd-log-icon { font-size: 14px; line-height: 1.5; flex-shrink: 0; width: 16px; text-align: center; }
.pd-log-body { flex: 1; min-width: 0; }
.pd-log-detail {
  font-size: 14px; color: var(--text); font-weight: 500;
  overflow-wrap: anywhere;
}
.pd-log-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pd-log-caret {
  font-size: 12px; color: var(--text-muted); flex-shrink: 0;
  transition: transform .15s; margin-top: 4px;
}
.pd-log-row.open .pd-log-caret { transform: rotate(180deg); }

/* Left accent bar keyed to severity — cheaper to scan than reading each icon. */
.pd-log-t-offline, .pd-log-t-error, .pd-log-t-probe_offline { box-shadow: inset 2px 0 0 #dc2626; }
.pd-log-t-online, .pd-log-t-error_cleared, .pd-log-t-probe_online,
.pd-log-t-toner_replenished { box-shadow: inset 2px 0 0 #059669; }
.pd-log-t-toner_low, .pd-log-t-status_conflict { box-shadow: inset 2px 0 0 #f59e0b; }
.pd-log-t-status_unknown { box-shadow: inset 2px 0 0 #9ca3af; }
.pd-log-t-print_job { box-shadow: inset 2px 0 0 var(--primary); }
.pd-log-admin { box-shadow: inset 2px 0 0 #7c3aed; }

/* The lock-up verdicts are the point of the tab when a printer is wedged, so
   they get a full tint rather than just an edge stripe. */
.pd-log-t-job_stalled,
.pd-log-t-printer_not_printing,
.pd-log-o-stalled {
  box-shadow: inset 3px 0 0 #dc2626;
  background: rgba(220,38,38,.07);
}
.pd-log-t-job_stalled .pd-log-detail,
.pd-log-t-printer_not_printing .pd-log-detail { font-weight: 600; }
.pd-log-o-printed,
.pd-log-o-vanished { box-shadow: inset 2px 0 0 var(--success); }

/* Expanded print-job detail grid */
.pd-log-fields { display: none; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 18px; margin-top: 8px; }
.pd-log-row.open .pd-log-fields { display: grid; }
.pd-log-field { display: flex; gap: 6px; font-size: 12px; min-width: 0; }
.pd-log-field-k { color: var(--text-muted); flex-shrink: 0; }
.pd-log-field-v { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.pd-log-link { color: var(--link); text-decoration: none; font-weight: 500; }
.pd-log-link:hover { color: var(--link-hover); }

/* ══════════════════════════════════════════════════════
   Computer detail page (.cd-*)
   Mirrors the printer detail pattern — reuses .pd-header-card,
   .pd-tabs, .pd-panel, .pd-h-pill, .pd-card-head, .pd-toner-*
   so the two detail pages stay visually consistent.
   ══════════════════════════════════════════════════════ */

.cd-loading, .cd-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; color: var(--text-muted); gap: 10px;
}
.cd-loading-sm {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 14px; padding: 12px 0;
}
.cd-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.cd-h-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.cd-h-dot.on  { background: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.15); }
.cd-h-dot.off { background: #9ca3af; }
.cd-h-ver {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-alt); padding: 2px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Printer List tab */
.cd-printer-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cd-printer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  transition: background .15s;
}
.cd-printer-row:hover { background: var(--hover-bg, rgba(0,0,0,.03)); }
[data-theme="dark"] .cd-printer-row:hover { background: rgba(255,255,255,.04); }
.cd-printer-unmanaged { opacity: .85; }
.cd-printer-main { flex: 1; min-width: 0; }
.cd-printer-name {
  font-size: 14px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cd-printer-name a { color: var(--primary, var(--link)); text-decoration: none; }
.cd-printer-name a:hover { color: var(--link-hover); }
.cd-printer-meta {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.cd-printer-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.cd-sticker {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  background: #e0f2fe; color: #075985;
  padding: 1px 6px; border-radius: var(--radius-sm);
}
[data-theme="dark"] .cd-sticker { background: #083344; color: #7dd3fc; }
.cd-default-badge {
  font-size: 11px; font-weight: 600;
  background: var(--success-bg); color: var(--success-dark);
  padding: 1px 6px; border-radius: var(--radius-sm); white-space: nowrap;
}
[data-theme="dark"] .cd-default-badge { background: #064e3b; color: #6ee7b7; }
.cd-shared-badge {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  background: var(--bg-alt); padding: 1px 6px; border-radius: var(--radius-sm);
}

/* Printing Status tab */
.cd-status-summary { margin-bottom: 14px; }
.cd-status-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 10px 0 2px;
}
.cd-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg-alt);
}
.cd-stat-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted); text-transform: uppercase;
}
.cd-stat-value { font-size: 18px; font-weight: 700; color: var(--text); }
.cd-stat-ok   { color: var(--success-dark); }
.cd-stat-err  { color: var(--danger-dark); }
.cd-stat-warn { color: var(--warning-dark); }
.cd-page-note {
  margin-top: 10px; padding: 8px 10px;
  border-radius: 6px; background: var(--bg-alt);
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
}

.cd-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.cd-status-card { display: flex; flex-direction: column; gap: 8px; }
.cd-status-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.cd-status-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0;
}
.cd-status-title a { color: var(--text); text-decoration: none; }
.cd-status-title a:hover { color: var(--link); }
.cd-status-model { font-size: 12px; color: var(--text-muted); margin-top: -4px; }
.cd-status-supplies-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted); text-transform: uppercase; margin-top: 2px;
}
.cd-status-supplies { display: flex; flex-direction: column; gap: 6px; }
.cd-toner-empty {
  font-size: 12px; color: var(--text-muted); font-style: italic;
  padding: 4px 0;
}
.cd-status-meta {
  font-size: 12px; color: var(--text-muted); margin-top: 4px;
}

/* Header action buttons (Sync / Update / Reset Spooler / Deploy Printer) don't
   fit one row on a phone — let them wrap instead of overflowing the card. */
@media (max-width: 768px) {
  #view-computer-detail .pd-h-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 520px) {
  .cd-status-stats { grid-template-columns: repeat(2, 1fr); }
  .cd-status-grid { grid-template-columns: 1fr; }
  .cd-printer-actions { gap: 2px; }

  /* Tidy 2-up grid of full-width buttons on phones. */
  #view-computer-detail .pd-h-actions { gap: 8px; }
  #view-computer-detail .pd-h-actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
}

/* ── Print Queue tab (Windows-only live spool viewer) ────────────────────── */
.cd-q-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 0 4px 12px;
  font-size: 12px; color: var(--text-muted);
}
.cd-q-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.cd-q-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
}
.cd-q-status-live { color: var(--success-dark); }
.cd-q-status-live::before {
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5,150,105, .18);
  animation: cd-q-pulse 1.6s ease-in-out infinite;
}
.cd-q-status-warn { color: var(--warning-dark); }
.cd-q-status-warn::before { background: #f59e0b; }
@keyframes cd-q-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105, .35); }
  50%      { box-shadow: 0 0 0 5px rgba(5,150,105, 0); }
}

.cd-q-card {
  padding: 0;
  overflow: hidden;
  margin-bottom: 10px;
}
.cd-q-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  cursor: pointer; user-select: none;
}
.cd-q-head:hover { background: var(--hover-bg, rgba(0,0,0,.03)); }
.cd-q-name {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px; color: var(--text);
  min-width: 0;
}
.cd-q-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-q-name svg { color: var(--text-muted); flex-shrink: 0; }
.cd-q-meta-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cd-q-count-pill {
  display: inline-block; padding: 2px 8px;
  background: var(--warning-bg); color: var(--warning-dark);
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
[data-theme="dark"] .cd-q-count-pill { background: #78350f; color: #fde68a; }
.cd-q-empty-pill {
  display: inline-block; padding: 2px 8px;
  background: var(--bg-muted); color: var(--text-muted);
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
}
[data-theme="dark"] .cd-q-empty-pill { background: #1f2937; color: #9ca3af; }
.cd-q-chev { color: var(--text-muted); transition: transform .15s; }
.cd-q-card.open .cd-q-chev { transform: rotate(180deg); }

.cd-q-body { display: none; border-top: 1px solid var(--border); }
.cd-q-card.open .cd-q-body { display: block; }
.cd-q-no-jobs {
  padding: 12px 16px;
  font-size: 12px; color: var(--text-muted); font-style: italic;
}
.cd-q-jobs { display: flex; flex-direction: column; }
.cd-q-job {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.cd-q-job:last-child { border-bottom: none; }
.cd-q-job-main { min-width: 0; flex: 1; }
.cd-q-job-doc {
  font-size: 14px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-q-job-sub {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 3px;
  font-size: 12px; color: var(--text-muted);
}
.cd-q-job-status {
  display: inline-block; padding: 1px 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text);
}
.cd-q-cancel-btn {
  flex-shrink: 0;
  color: var(--danger-dark) !important;
  border-color: var(--border) !important;
}
.cd-q-cancel-btn:hover {
  background: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
}
[data-theme="dark"] .cd-q-cancel-btn:hover { background: #7f1d1d !important; }

@media (max-width: 520px) {
  .cd-q-job { flex-direction: column; align-items: stretch; }
  .cd-q-cancel-btn { align-self: flex-end; }
}

/* ── Documentation tab ─────────────────────────────────────────────────────── */
.docs-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.docs-search {
  flex: 1;
  max-width: 380px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-alt);
  color: var(--text);
  outline: none;
}
.docs-cat-filter {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-alt);
  color: var(--text);
}

.docs-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  min-height: calc(100vh - 200px);
}
@media (max-width: 768px) {
  .docs-layout { grid-template-columns: 1fr; }
}

.docs-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.docs-cat-group { border-bottom: 1px solid var(--border); }
.docs-cat-group:last-child { border-bottom: 0; }
.docs-cat-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.docs-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.docs-item:last-child { border-bottom: 0; }
.docs-item:hover { background: var(--bg-alt); }
.docs-item.active {
  background: var(--bg-alt);
  border-left: 3px solid #2563eb;
  padding-left: 9px;
}
.docs-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.docs-item-snippet {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.docs-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.docs-detail {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.docs-welcome {
  text-align: center;
  padding: 60px 20px;
}

.docs-article-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.docs-article-actions { display: flex; gap: 6px; flex-shrink: 0; }
.docs-article-body { font-size: 14px; line-height: 1.65; color: var(--text); }
.docs-loading { padding: 40px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Markdown rendered output */
.markdown-body .md-h1 { font-size: 24px; margin: 18px 0 10px; }
.markdown-body .md-h2 { font-size: 18px; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.markdown-body .md-h3 { font-size: 16px; margin: 14px 0 6px; }
.markdown-body .md-h4 { font-size: 14px; margin: 12px 0 4px; }
.markdown-body .md-h5,
.markdown-body .md-h6 { font-size: 14px; margin: 10px 0 4px; color: var(--text-muted); }
.markdown-body .md-p { margin: 8px 0; }
.markdown-body .md-ul,
.markdown-body .md-ol { margin: 8px 0; padding-left: 24px; }
.markdown-body .md-ul li,
.markdown-body .md-ol li { margin: 3px 0; }
.markdown-body .md-blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 4px solid #2563eb;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-style: italic;
}
.markdown-body .md-pre {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  font-family: var(--font-mono);
}
.markdown-body .md-pre code { background: none; padding: 0; }
.markdown-body .md-code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-mono);
}
.markdown-body .md-a { color: var(--link); text-decoration: underline; }
.markdown-body .md-img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.markdown-body .md-hr { margin: 18px 0; border: 0; border-top: 1px solid var(--border); }

/* Editor */
.docs-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 540px;
}
.docs-editor-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.docs-editor-toolbar input[type="text"] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-alt);
  color: var(--text);
}
#doc-title { flex: 2; min-width: 240px; font-weight: 600; }
#doc-category { flex: 1; min-width: 160px; }
.docs-editor-hint {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.docs-editor-hint code {
  font-size: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: var(--radius-sm);
}
.docs-editor-textarea-wrap {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 420px;
}
.docs-editor-textarea {
  flex: 1;
  min-height: 420px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.docs-editor-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235, 0.15);
}
.docs-drop-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235, 0.10);
  border: 2px dashed #2563eb;
  border-radius: 6px;
  pointer-events: none;
  color: var(--link);
  font-weight: 600;
  font-size: 14px;
  z-index: 5;
}
.docs-drop-overlay.active { display: flex; }
.docs-drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.docs-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Lightbox for clicked images */
.docs-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
  padding: 30px;
}
.docs-lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

/* PIP popout body styling */
body.pip-light, body.pip-dark {
  padding: 14px;
  font-family: inherit;
}


/* ── Remote UI tab ────────────────────────────────────────────────────── */
.ru-launcher {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ru-launcher-info { flex: 1; min-width: 0; }
.ru-launcher-info h3 { color: var(--text); font-size: 16px; }
.ru-launcher .btn { white-space: nowrap; }

.ru-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  margin-left: 4px;
}
.ru-status-on  { background: rgba(5,150,105, 0.15); color: #16a34a; }
.ru-status-off { background: rgba(220,38,38, 0.15); color: var(--danger); }
[data-theme="dark"] .ru-status-on  { background: rgba(5,150,105, 0.25); color: #34d399; }
[data-theme="dark"] .ru-status-off { background: rgba(220,38,38, 0.25); color: #fca5a5; }

.ru-backups-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--card-bg);
}
.ru-backups-table th, .ru-backups-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ru-backups-table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  background: var(--bg-alt);
}
.ru-backups-table tbody tr:hover { background: var(--hover-bg); }
.ru-bk-source { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ru-bk-by { color: var(--text-muted); font-size: 12px; }
.ru-bk-note {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 12px;
}
.ru-bk-note:hover, .ru-bk-note:focus {
  border-color: var(--border);
  background: var(--input-bg);
  outline: none;
}
.ru-bk-actions { white-space: nowrap; text-align: right; }

@media (max-width: 520px) {
  .ru-launcher { flex-direction: column; align-items: stretch; }
  .ru-backups-table th:nth-child(4), .ru-backups-table td:nth-child(4) { display: none; }
}

/* ── Argus source pill ─────────────────────────────────────────────────────── */
/* Sits to the right of the headline state. Tells the operator at a glance
   whether the visible Online/Offline value comes from the Argus probe (blue)
   or one of the Nabu clients (orange). */
.pd-h-source-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.pd-h-source-probe  { background: var(--primary-light); color: var(--info-text); }   /* blue */
.pd-h-source-client { background: #ffedd5; color: #c2410c; }   /* orange */
[data-theme="dark"] .pd-h-source-probe  { background: #1e3a8a; color: #60a5fa; }
[data-theme="dark"] .pd-h-source-client { background: #431407; color: #fdba74; }

/* Detection-method pill: how a Nabu client confirmed the printer is reachable.
   SNMP = full Host-Resources monitoring (indigo); TCP = SNMP-silent print-port
   reachability probe, online-state only (gray). Sits next to the source pill. */
.pd-h-method-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.pd-h-method-snmp { background: #e0e7ff; color: #4338ca; }   /* indigo */
.pd-h-method-tcp  { background: var(--bg-muted); color: var(--text-btn); }   /* slate  */
[data-theme="dark"] .pd-h-method-snmp { background: #312e81; color: #c7d2fe; }
[data-theme="dark"] .pd-h-method-tcp  { background: #374151; color: #d1d5db; }

/* Remote UI tab — per-printer connection overrides (entry path + scheme). */
.ru-conn-row {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.ru-conn-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.ru-conn-field input, .ru-conn-field select {
  min-width: 220px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--input-bg); color: var(--text);
  font: inherit; font-weight: 400;
}
.ru-conn-field small { font-weight: 400; color: var(--text-muted); }
@media (max-width: 520px) {
  .ru-conn-field input, .ru-conn-field select { min-width: 0; width: 100%; }
  .ru-conn-field { width: 100%; }
}

/* ── Probe-offline tab (single bottom-right panel) ─────────────────────────── */
.argus-alerts-container {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 9000;
  pointer-events: none;
  width: min(360px, calc(100vw - 24px));
}
.argus-alert-tab {
  pointer-events: auto;
  background: var(--card-bg, #fff);
  border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  animation: argus-alert-in 200ms ease-out;
  overflow: hidden;
}
@keyframes argus-alert-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.argus-alert-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
}
.argus-alert-icon { color: #f97316; font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.argus-alert-body { flex: 1; min-width: 0; }
.argus-alert-title { font-weight: 600; color: var(--text); }
.argus-alert-sub   { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.argus-alert-dismiss {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.argus-alert-dismiss:hover { color: var(--text); }
.argus-alert-list {
  border-top: 1px solid #fed7aa;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.argus-alert-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 14px;
  padding: 7px 14px 7px 42px;
  cursor: pointer;
}
.argus-alert-item:hover { background: rgba(249, 115, 22, 0.08); }
[data-theme="dark"] .argus-alert-tab {
  background: var(--card-bg, #1f2937);
  border-color: #7c2d12;
}
[data-theme="dark"] .argus-alert-list { border-top-color: #7c2d12; }
[data-theme="dark"] .argus-alert-item:hover { background: rgba(249, 115, 22, 0.15); }
@media (max-width: 520px) {
  .argus-alerts-container { bottom: 10px; right: 10px; left: 10px; width: auto; }
  .argus-alert-list { max-height: 40vh; }
}

/* ── Kiosk mode (wall-monitor status board at /kiosk) ──────────────────────── */
/* The kiosk serves the SPA shell with all chrome stripped and renders its own
   purpose-built view (js/views/kiosk.js) — big numbers, problems first,
   readable from across the room. Forced dark theme. */
body.kiosk-mode .sidebar,
body.kiosk-mode .sidebar-overlay,
body.kiosk-mode .tabbar { display: none !important; }
body.kiosk-mode .main-content { padding: 22px 26px; }

.kiosk-wrap { display: flex; flex-direction: column; gap: 20px; min-height: calc(100vh - 44px); }

/* State colors used across stats, badges, dots, and bars */
.kiosk-ok   { --kiosk-state: #059669; }
.kiosk-warn { --kiosk-state: #f59e0b; }
.kiosk-bad  { --kiosk-state: #dc2626; }

/* Headline stat cards */
.kiosk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kiosk-stat {
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 5px solid var(--kiosk-state); border-radius: var(--radius-lg);
  padding: 16px 22px;
}
.kiosk-stat-label { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.kiosk-stat-value { font-size: 46px; font-weight: 700; line-height: 1.1; color: var(--kiosk-state); }
.kiosk-stat-sub   { font-size: 18px; font-weight: 500; color: var(--text-muted); margin-left: 8px; }

/* Needs-attention strip */
.kiosk-panel-title {
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px;
}
.kiosk-attn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kiosk-attn-card {
  background: rgba(220,38,38, 0.10); border: 1px solid rgba(220,38,38, 0.45);
  border-radius: var(--radius-lg); padding: 12px 14px;
}
.kiosk-attn-title { font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.kiosk-attn-count { font-size: 14px; font-weight: 600; color: #dc2626; white-space: nowrap; }
.kiosk-attn-sub { font-size: 14px; color: var(--text-muted); margin-top: 3px; }
.kiosk-attn-printer { font-size: 14px; color: var(--text); opacity: .9; margin-top: 5px; }
.kiosk-attn-more { color: var(--text-muted); font-style: italic; }
.kiosk-attn-overflow { background: var(--card-bg); border-color: var(--border); }
.kiosk-allclear {
  background: rgba(5,150,105, 0.10); border: 1px solid rgba(5,150,105, 0.4);
  color: #059669; border-radius: var(--radius-lg); padding: 14px 18px;
  font-size: 16px; font-weight: 600; text-align: center;
}

/* Three-column panels */
.kiosk-cols { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; flex: 1; align-items: start; }
.kiosk-panel {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 18px;
}
.kiosk-panel-body { display: flex; flex-direction: column; gap: 10px; }
.kiosk-empty { font-size: 14px; color: var(--text-muted); padding: 8px 0; }

.kiosk-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kiosk-row-title { font-size: 14px; font-weight: 600; }
.kiosk-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.kiosk-row-badges { display: flex; gap: 6px; flex-shrink: 0; }
.kiosk-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-sm); white-space: nowrap; }
.kiosk-badge-warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.kiosk-badge-bad  { background: rgba(220,38,38, 0.15); color: #dc2626; }

/* Toner rows */
.kiosk-toner-row { display: flex; flex-direction: column; gap: 3px; }
.kiosk-toner-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kiosk-toner-pct { font-size: 14px; font-weight: 600; color: var(--kiosk-state); }
.kiosk-toner-track { height: 7px; border-radius: 4px; background: var(--border); margin-top: 3px; }
.kiosk-toner-fill { height: 7px; border-radius: 4px; background: var(--kiosk-state); }

/* Events feed */
.kiosk-event { display: flex; align-items: baseline; gap: 9px; font-size: 14px; }
.kiosk-event-time { color: var(--text-muted); min-width: 64px; font-size: 12px; flex-shrink: 0; }
.kiosk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kiosk-state); flex-shrink: 0; align-self: center; }
.kiosk-event-text { line-height: 1.4; }

/* Footer: freshness · clock · totals */
.kiosk-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--text-muted); padding: 0 4px;
}
.kiosk-clock { font-size: 24px; font-weight: 700; color: var(--text); }
.kiosk-stale { color: #f59e0b; font-weight: 600; }

/* Connection badge — only visible while the server is unreachable. */
#kiosk-conn {
  position: fixed; top: 12px; right: 12px; z-index: 10000;
  display: none; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  background: #7c2d12; color: #fed7aa;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
}
#kiosk-conn.visible { display: flex; }
#kiosk-conn::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: #fb923c; animation: kiosk-conn-pulse 1.2s ease-in-out infinite;
}
@keyframes kiosk-conn-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .3; }
}

/* Full-screen notice when the kiosk key has been revoked. */
.kiosk-revoked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh; text-align: center; padding: 24px;
}
.kiosk-revoked h1 { color: #60a5fa; font-size: 24px; margin-bottom: 12px; }
.kiosk-revoked p { color: var(--text-muted); max-width: 420px; line-height: 1.6; }

/* Settings → Kiosk Mode controls */
.kiosk-url-row { display: flex; gap: 8px; margin-top: 6px; }
.kiosk-url-row input {
  flex: 1; font-family: var(--font-mono); font-size: 12px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-alt); color: var(--text);
}
.kiosk-btn-row { display: flex; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
 * Kevin/Klyde UI pass — giant list, install sheet, dashboard glance
 * Existing tokens only. Does not change /kiosk.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Giant list (Printers tree + Computers groups) ───────────────────────── */
.giant-list {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.giant-list .tree-client {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  overflow: visible;
}
.giant-list .tree-row {
  height: 40px;
  min-height: 40px;
  padding: 8px 12px;
  gap: 8px;
  box-shadow: inset 0 -1px 0 var(--border);
}
.giant-list .tree-folder > .tree-row,
.giant-list .tree-add-row {
  height: 36px;
  min-height: 36px;
}
.giant-list .tree-toggle {
  width: 12px;
  height: 12px;
}
.giant-list .tree-toggle svg { width: 12px; height: 12px; }
.giant-list .tree-icon svg { width: 16px; height: 16px; }
.giant-list .tree-client > .tree-row .tree-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.giant-list .tree-folder > .tree-row .tree-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.giant-list .folder-address {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.giant-list .tree-actions {
  opacity: 1;
  align-items: center;
}
.giant-list .tree-action-label {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 8px;
  gap: 4px;
}
.giant-list .btn-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  justify-content: center;
  box-sizing: border-box;
}
.giant-list .tree-children { border-top: none; }
.giant-list .tree-folder { border-bottom: none; }
.giant-list .tree-folder > .tree-children { border-top: none; }
.giant-list .tree-location { border-bottom: none; }
.giant-list .add-row {
  height: 36px;
  min-height: 36px;
  padding: 8px 12px;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Printer rows: 36px, 13px/500, actions always visible */
.giant-list .tree-printer,
.giant-list .tree-printer.pr-row {
  height: 36px;
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 12px;
  gap: 8px;
  box-shadow: inset 0 -1px 0 var(--border);
}
.giant-list .tree-printer .pr-name,
.giant-list .tree-printer .tree-label {
  font-size: 14px;
  font-weight: 500;
}
.giant-list .pr-row .pr-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: none;
}
.giant-list .pr-body {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.giant-list .pr-line1 { flex-wrap: nowrap; min-width: 0; }
.giant-list .pr-line2 {
  flex-shrink: 1;
  min-width: 0;
}
.giant-list .pr-right { gap: 8px; }
.giant-list .pr-toner { min-width: 90px; }
.giant-list .drag-handle { opacity: 0.45; }
.giant-list .tree-printer .tree-actions { opacity: 1; }

/* Ghost Add Client row */
.ghost-client-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}
.ghost-client-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235, .15);
}
.ghost-client-input::placeholder {
  font-weight: 400;
  color: var(--text-muted);
}

/* Computers groups inside the same panel.
 * Two-line machine rows need min-height, not a fixed 36px clip.
 * Printers tree (.tree-*) is intentionally untouched. */
.giant-list .comp-group { background: transparent; }
.giant-list .comp-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  box-shadow: inset 0 -1px 0 var(--border);
}
.giant-list .comp-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.giant-list .comp-group-header .tree-toggle {
  width: 12px;
  height: 12px;
}
.giant-list .comp-group-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--link);
}
.giant-list .comp-group-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.giant-list .comp-header-stats {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 8px;
}
.giant-list .comp-header-online {
  font-size: 14px;
  white-space: nowrap;
}
.giant-list .comp-online-n { color: var(--success); font-weight: 600; }
.giant-list .comp-offline-n { color: var(--text-muted); font-weight: 400; }
.giant-list .comp-group-header .btn,
.giant-list .comp-group-header .tree-action-label {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
}
.giant-list .comp-folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px 10px 28px;
  background: var(--bg-alt);
  box-shadow: inset 0 -1px 0 var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.giant-list .comp-folder-header:hover { background: var(--hover-bg); }
.giant-list .comp-folder-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Machine row: real columns so actions never sit on the hostname */
.giant-list .comp-item {
  display: grid;
  grid-template-columns: 10px 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  height: auto;
  padding: 10px 16px;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
}
.giant-list .comp-item.comp-item-selecting {
  grid-template-columns: 20px 10px 16px minmax(0, 1fr);
}
.giant-list .comp-item.comp-item-selecting:has(.comp-actions) {
  grid-template-columns: 20px 10px 16px minmax(0, 1fr) auto;
}
.giant-list .comp-item:hover { background: var(--bg-alt); }
.giant-list .comp-item .comp-dot {
  width: 10px;
  height: 10px;
}
.giant-list .comp-item .os-icon {
  width: 16px;
  height: 16px;
}
.giant-list .comp-info { min-width: 0; }
.giant-list .comp-name {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.giant-list .comp-name-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.giant-list .comp-ver-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.giant-list .comp-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.giant-list .comp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: auto;
  border-top: none;
  padding-top: 0;
  margin-left: 0;
}
.giant-list .comp-actions .btn {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
}

/* ── Install sheet ───────────────────────────────────────────────────────── */
.modal.install-sheet { max-width: 560px; }
.modal.install-sheet .modal-header h3 {
  font-size: 18px;
  font-weight: 600;
}
.install-sheet-body { display: flex; flex-direction: column; gap: 12px; }
.install-lede {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin: 0;
}
.install-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.install-key-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.install-key-code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.install-key-copy {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
}
.install-key-copy svg { width: 14px; height: 14px; }
.install-key-copy .icon-check { display: none; }
.install-key-copy.copied { background: #065f46; border-color: #059669; color: #6ee7b7; }
.install-key-copy.copied .icon-copy { display: none; }
.install-key-copy.copied .icon-check { display: block; }

.install-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.install-tab {
  height: 32px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.install-tab.active {
  color: var(--link);
  border-bottom-color: var(--primary);
}
.install-cmd-block {
  position: relative;
  padding: 12px;
  padding-right: 56px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
}
.install-cmd-code {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}
.install-cmd-copy-abs {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 28px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.install-cmd-copy-abs.copied {
  background: #065f46;
  border-color: #059669;
  color: #6ee7b7;
}
.install-rmm-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin: 0;
}
.install-rmm-note code {
  font-size: 12px;
}

/* ── Dashboard glance (Home — not /kiosk) ────────────────────────────────── */
.dash-glance {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-glance-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dash-glance-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.dash-glance-updated {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.dash-glance-ok   { --glance-state: #059669; }
.dash-glance-warn { --glance-state: #f59e0b; }
.dash-glance-bad  { --glance-state: #dc2626; }

.dash-glance-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dash-glance-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--glance-state);
  border-radius: 8px;
  padding: 12px 16px;
}
.dash-glance-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.dash-glance-stat-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin-top: 2px;
}
.dash-glance-stat-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dash-glance-attn-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.dash-glance-attn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.dash-glance-attn-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
}
.dash-glance-attn-card[data-client-id]:hover { background: var(--hover-bg); }
.dash-glance-attn-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.dash-glance-attn-count {
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  white-space: nowrap;
}
.dash-glance-attn-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.dash-glance-attn-printer {
  font-size: 14px;
  color: var(--text);
  margin-top: 4px;
}
.dash-glance-attn-more { color: var(--text-muted); font-style: italic; }
.dash-glance-attn-overflow { cursor: default; }
.dash-glance-allclear {
  font-size: 14px;
  font-weight: 600;
  color: #059669;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dash-glance-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.dash-glance-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.dash-glance-panel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.dash-glance-panel-body { display: flex; flex-direction: column; gap: 8px; }
.dash-glance-empty { font-size: 14px; color: var(--text-muted); }

.dash-glance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.dash-glance-row:hover .dash-glance-row-title { color: var(--link); }
.dash-glance-row-title { font-size: 14px; font-weight: 600; color: var(--text); }
.dash-glance-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.dash-glance-row-badges { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.dash-glance-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.dash-glance-badge-warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.dash-glance-badge-bad  { background: rgba(220,38,38, 0.15); color: #dc2626; }

.dash-glance-toner { cursor: pointer; }
.dash-glance-toner-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dash-glance-toner-pct { font-size: 14px; font-weight: 600; color: var(--glance-state); }
.dash-glance-toner-track { height: 6px; border-radius: 4px; background: var(--border); margin-top: 4px; }
.dash-glance-toner-fill { height: 6px; border-radius: 4px; background: var(--glance-state); }

.dash-glance-event {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.dash-glance-event:hover .dash-glance-event-text { color: var(--link); }
.dash-glance-event-time { color: var(--text-muted); min-width: 56px; font-size: 12px; flex-shrink: 0; }
.dash-glance-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--glance-state); flex-shrink: 0; align-self: center;
}
.dash-glance-event-text { line-height: 1.4; }

.dash-network {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 14px;
}
.dash-network summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  list-style: none;
}
.dash-network summary::-webkit-details-marker { display: none; }
.dash-network summary:hover { color: var(--text); }
.dash-network[open] summary { margin-bottom: 10px; }
.dash-network .dash-versions { margin-top: 8px; }

/* Phone: 2×2 stats, stacked columns, list rows stay 36–40px, folders indent */
@media (max-width: 520px) {
  .dash-glance-stats { grid-template-columns: 1fr 1fr; }
  .dash-glance-cols { grid-template-columns: 1fr; }
  .dash-glance-stat-value { font-size: 24px; }

  .giant-list .tree-row,
  .giant-list .tree-client > .tree-row {
    flex-wrap: nowrap;
    height: 40px;
    min-height: 40px;
    padding: 8px 12px;
  }
  .giant-list .tree-folder > .tree-row,
  .giant-list .tree-printer,
  .giant-list .tree-printer.pr-row {
    flex-wrap: nowrap;
    height: 36px;
    min-height: 36px;
  }
  .giant-list .tree-row .tree-actions,
  .giant-list .tree-client > .tree-row .tree-actions {
    flex: 0 0 auto;
    padding-top: 0;
    margin-left: 0;
    border-top: none;
  }
  .giant-list .btn-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
  }
  .giant-list .pr-toner-label { display: none; }
  .giant-list .pr-toner { min-width: 56px; }
}

@media (max-width: 600px) {
  .giant-list .tree-row,
  .giant-list .tree-client > .tree-row {
    flex-wrap: nowrap !important;
    height: 40px;
    min-height: 40px;
    padding: 8px 12px;
  }
  .giant-list .tree-folder > .tree-row,
  .giant-list .tree-printer,
  .giant-list .tree-printer.pr-row {
    flex-wrap: nowrap !important;
    height: 36px;
    min-height: 36px;
  }
  .giant-list .tree-client > .tree-row {
    height: 40px;
    min-height: 40px;
  }
  .giant-list .tree-row .tree-actions,
  .giant-list .tree-client > .tree-row .tree-actions {
    flex: 0 0 auto !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    border-top: none !important;
  }
  .giant-list .btn-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
  }
}

/* Computers phone: keep the column grid. Actions stay right. Never force 36px. */
@media (max-width: 719px) {
  .giant-list .comp-item {
    display: grid;
    grid-template-columns: 10px 16px minmax(0, 1fr) auto;
    align-items: center;
    flex-wrap: nowrap;
    height: auto;
    min-height: 56px;
    padding: 10px 16px;
    gap: 12px;
  }
  .giant-list .comp-item.comp-item-selecting {
    grid-template-columns: 20px 10px 16px minmax(0, 1fr);
  }
  .giant-list .comp-item.comp-item-selecting:has(.comp-actions) {
    grid-template-columns: 20px 10px 16px minmax(0, 1fr) auto;
  }
  .giant-list .comp-actions {
    flex: 0 0 auto;
    width: auto;
    border-top: none;
    padding-top: 0;
    margin-left: 0;
  }
  .giant-list .comp-btn-text { display: none; }
  .giant-list .comp-name { font-size: 14px; }
  .giant-list .comp-meta {
    white-space: nowrap;
    font-size: 12px;
  }
  .giant-list .comp-group-header {
    flex-wrap: nowrap;
    height: auto;
    min-height: 48px;
  }
  .giant-list .comp-folder-header {
    flex-wrap: nowrap;
    height: auto;
    min-height: 40px;
  }
}

/* ── Sidebar groups, search, badges ─────────── */
.nav-group-label {
  margin: 16px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  display: flex; align-items: center; gap: 6px;
}
.sidebar.collapsed .nav-group-label .nav-label { display: none; }
.sidebar.collapsed .nav-group-label { justify-content: center; margin-left: 0; margin-right: 0; }
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .nav-search-kbd,
.sidebar.collapsed .nav-badge { display: none; }
.nav-search-kbd {
  margin: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--sidebar-line);
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--primary-bright);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.nav-item.active .nav-badge { background: #fff; color: var(--primary-text); }

/* ── Command palette ────────────────────────── */
#palette-root, #peek-root { position: fixed; inset: 0; z-index: 80; }
.palette-backdrop, .peek-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.palette {
  position: relative;
  width: min(72vw, 920px);
  margin: 6vh auto 0;
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border);
}
.palette-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--text);
  outline: none;
}
.palette-list { max-height: 68vh; overflow: auto; }
.palette-hint { padding: 16px; color: var(--text-muted); font-size: 14px; }
.palette-label { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.palette-sep { height: 1px; margin: 4px 12px; background: var(--border); }
.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.palette-item.active, .palette-item:hover { background: var(--select-bg); }
.palette-kind {
  flex: 0 0 16px;
  display: flex;
  color: var(--text-muted);
}
.palette-kind.palette-status-online { color: #16a34a; }
.palette-kind.palette-status-offline { color: var(--danger); }
.palette-kind.palette-status-error { color: #ca8a04; }
.palette-crumb {
  margin-left: 12px;
  max-width: 42%;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.palette-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.palette-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.palette-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.palette-actions button {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius-md);
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
}
.palette-actions button:hover { border-color: var(--primary); color: var(--primary-text); }
.palette-foot { padding: 8px 14px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); }

/* ── Printer quick look ─────────────────────── */
.peek-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  background: var(--card-bg);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  overflow: auto;
}
.peek-head { display: flex; align-items: center; gap: 8px; }
.peek-kicker { flex: 1; font-size: 12px; color: var(--text-muted); }
.peek-close {
  border: none; background: none; font-size: 24px; line-height: 1;
  cursor: pointer; color: var(--text-muted);
}
.peek-title { font-size: 18px; margin: 8px 0 6px; }
.peek-meta { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.peek-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.peek-empty { font-size: 14px; color: var(--text-muted); }

.pref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.pref-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
}
.pref-chip-k { font-weight: 500; color: var(--text-muted); }

.variant-name { cursor: pointer; }
.variant-job {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--variant-bg);
  color: var(--variant-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pd-more { position: relative; margin-left: auto; display: flex; align-items: stretch; }
.pd-more-toggle {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 16px; font-size: 14px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
}
.pd-more-toggle.active { color: var(--link); border-bottom-color: #2563eb; }
.pd-more-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  min-width: 160px; padding: 4px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.pd-more-menu .pd-tab { text-align: left; border-bottom: none; border-radius: 6px; }
.pd-more-menu .pd-tab.active { background: var(--primary-light); }

.dash-queue { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dash-queue-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card-bg);
  cursor: pointer; color: inherit; font: inherit;
}
.dash-queue-row:hover { background: var(--hover-bg); }
.dash-queue-text { min-width: 0; display: flex; flex-direction: column; }
.dash-queue-pill { flex-shrink: 0; }
.dash-queue-pill-driver { background: #dc2626; color: #fff; }
.dash-queue-pill-offline { background: var(--danger-bg); color: var(--danger-dark); }
.dash-queue-pill-toner { background: var(--warning-bg); color: var(--warning-dark); }
.dash-queue-pill-clients { background: #e0e7ff; color: #3730a3; }
[data-theme="dark"] .dash-queue-pill-offline { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .dash-queue-pill-toner { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .dash-queue-pill-clients { background: #1e1b4b; color: #c7d2fe; }
.comp-outdated-banner {
  width: 100%;
  margin-top: 8px;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  font-size: 14px;
  cursor: pointer;
}
[data-theme="dark"] .comp-outdated-banner { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }

/* ── Fleet lists and management pages ───────── */
.fleet-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 0 16px;
  padding: 2px 0 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.fleet-bar-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fleet-bar-title p {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}
.fleet-bar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.fleet-search {
  flex: 1;
  min-width: 220px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.fleet-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fleet-menu { position: relative; }
.fleet-menu > summary,
.mgmt-more > summary {
  list-style: none;
  cursor: pointer;
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.fleet-menu > summary::-webkit-details-marker,
.mgmt-more > summary::-webkit-details-marker { display: none; }
.fleet-menu[open] > summary,
.mgmt-more[open] > summary { border-color: var(--primary); color: var(--primary-text); }
.fleet-menu-panel,
.mgmt-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 180px;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.fleet-menu-panel button,
.mgmt-more-panel button {
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.fleet-menu-panel button:hover,
.mgmt-more-panel button:hover { background: var(--hover-bg); }
.fleet-select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-muted);
}
.comp-outdated-banner { margin-top: 10px; }

.giant-list {
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.giant-list .tree-client > .tree-row {
  height: auto;
  min-height: 48px;
  background: color-mix(in srgb, var(--primary) 5%, var(--card-bg));
}
.giant-list .tree-printer,
.giant-list .tree-printer.pr-row {
  height: auto;
  min-height: 48px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.giant-list .tree-printer .pr-name,
.giant-list .tree-printer .tree-label {
  font-size: 14px;
  font-weight: 600;
}
.giant-list .pr-row .pr-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.giant-list .tree-printer.pr-row:hover,
.giant-list .comp-item:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--card-bg));
}
.pr-status-unknown,
.pr-status-driver-error { animation: none; }

.pd-header-card {
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: none;
  align-items: flex-start;
}
.pd-h-name { letter-spacing: -0.02em; }
.pd-h-parent {
  display: inline-block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--primary-text);
  text-decoration: none;
}
.pd-h-parent:hover { color: var(--link-hover); }
.pd-simple { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 8px; }
.pd-simple-lead { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.pd-simple-meta { margin: -6px 0 0; font-size: 14px; color: var(--text-muted); }
.pd-simple-meta .pd-ov-mac {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: underline;
}
.pd-simple-deps {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pd-h-actions { align-items: center; }
.pd-admin-divider {
  margin: 22px 0 16px;
  border: none;
  border-top: 1px solid var(--border);
}
.pd-ip-line { display: flex; align-items: center; gap: 8px; }
.pd-ip-line input { flex: 1; min-width: 0; }
.pd-usb-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
}
.pd-usb-btn.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pd-driver-pick { position: relative; }
.pd-driver-results {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: calc(100% - 8px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow: auto;
}
.pd-driver-results button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.pd-driver-results button:last-child { border-bottom: none; }
.pd-driver-results button:hover { background: var(--hover-bg); }
.pd-driver-results button span { font-size: 12px; color: var(--text-muted); }

#view-printer-detail { transition: max-width .42s ease; }
#view-printer-detail.vx-open { max-width: min(1440px, calc(100vw - 32px)); }
/* A printer variant keeps the one brand blue. It is marked with a violet-tinted
   pill and the bridge glyph, not a recoloured page (one brand colour only). */

body.pd-embed .sidebar,
body.pd-embed .tabbar,
body.pd-embed .sidebar-overlay { display: none !important; }
body.pd-embed #page-app { display: block; height: auto; min-height: 100vh; overflow: visible; }
body.pd-embed .main-content { height: 100vh; overflow: auto; padding: 16px; }
body.pd-embed .view { max-width: none; }

.pd-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0px minmax(0, 0fr);
  column-gap: 0;
  align-items: start;
  transition: grid-template-columns .42s ease, column-gap .42s ease;
}
.pd-stage > .pd-topbar { grid-column: 1 / -1; }
.pd-stage > .pd-stage-parent { grid-column: 1; min-width: 0; }
.pd-stage > .pd-bridge {
  grid-column: 2;
  align-self: center;
  justify-self: center;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .42s ease, transform .42s ease;
}
.pd-stage > .pd-stage-variant {
  grid-column: 3;
  min-width: 0;
  opacity: 0;
  transform: translateX(72px);
  transition: opacity .42s ease, transform .42s ease;
}
.pd-stage.split {
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  column-gap: 8px;
}
.pd-stage.split > .pd-stage-variant,
.pd-stage.split > .pd-bridge {
  opacity: 1;
  transform: translateX(0);
}
.pd-stage .pd-header-card { height: auto; align-items: flex-start; }
.pd-stage .pd-h-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.pd-stage-parent { min-width: 0; }
.pd-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--variant);
}
.pd-stage-variant {
  min-width: 0;
  overflow: auto;
  background: transparent;
  border: none;
  color: var(--text);
}
.pd-stage-variant .pd-header-card,
.pd-stage-variant .pd-tabs,
.pd-stage-variant .pd-panel { margin-left: 0; margin-right: 0; }
.pd-stage-variant .pd-tab.active,
.pd-stage-variant .pd-h-name { color: var(--primary-text); }
.pd-stage-variant .pd-settings-actions { justify-content: flex-start; }
.vx-deploy-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vx-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vx-list-head h3 { margin: 0; font-size: 16px; }
.vx-list-head p { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }
.vx-list { display: flex; flex-direction: column; gap: 8px; }
.variant-card { border-radius: var(--radius-lg); padding: 14px 16px; margin: 0; background: var(--card-bg); }
.variant-card.editing { border-color: var(--variant); box-shadow: 0 0 0 2px var(--variant); }
.variant-card-name { font-size: 14px; }
.variant-pref-chip { background: var(--variant-bg); color: var(--variant-text); }
.vx-edit { color: var(--variant-text); border-color: var(--variant-bg); }
.vx-empty-prefs { font-size: 12px; color: var(--text-muted); }
.nv-deploy-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  cursor: pointer;
}
.nv-deploy-choice input { margin-top: 3px; }
.nv-deploy-choice strong { display: block; font-size: 14px; }
.nv-deploy-choice span span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 900px) {
  .pd-stage.split { grid-template-columns: 1fr; }
  .pd-bridge { min-height: 0; position: static; }
}
.pd-h-actions .pd-h-btn,
.pd-h-actions .mgmt-more > summary.pd-h-btn {
  box-sizing: border-box;
  height: 36px;
  min-width: 112px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
}
.ru-advanced { margin-top: 16px; }
.ru-advanced > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ru-advanced-note {
  margin: 8px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.mgmt-more { position: relative; }
.pd-tabs {
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 14px;
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-alt) 80%, var(--card-bg));
  overflow: visible;
}
.pd-tab {
  border-bottom: none;
  border-radius: 8px;
  padding: 7px 14px;
}
.pd-tab.active {
  background: var(--card-bg);
  color: var(--text);
  border-bottom-color: transparent;
  box-shadow: none;
}
.pd-more { position: relative; margin-left: 2px; align-items: center; }
.pd-more-menu {
  z-index: 30;
  min-width: 180px;
}
.pd-more-menu .pd-tab {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
}
.pd-more-toggle {
  border-bottom: none;
  border-radius: 8px;
  height: 100%;
}
.pd-more-toggle.active {
  background: var(--card-bg);
  color: var(--text);
  border-bottom-color: transparent;
  box-shadow: none;
}
.pd-panel { padding-top: 8px; }
@media (max-width: 720px) {
  .fleet-bar { top: 0; box-shadow: -16px 0 0 var(--bg), 16px 0 0 var(--bg); }
}

/* Desktop: main has 24px padding; pull the bar over it so rows can't show above it. */
@media (min-width: 768px) {
  .fleet-bar { top: -24px; margin-top: -24px; padding-top: 24px; }
}