/* =====================================================================
   AEHI · control-center-promax.css  —  Theme 2 "Pro Max"
   ---------------------------------------------------------------------
   Loaded AFTER control-center-v9.css.

   Scoping strategy (measured, not guessed):
   - bundle.css ships ~1100 !important rules; 194 of them carry raw colour
     literals, and the strongest reach specificity 132–153
     (`body:not(.theme-dark) #deviceTabContent form.settings-form ...`).
   - v7.css adds light-mode !important rules around specificity 31.
   So this file does NOT rely on being last: every component rule is
   prefixed with the id hook `#uiPromax`, which is written onto <html>
   before first paint. An id gives us a=1, i.e. value 100+, which beats
   everything except the two device-settings families — those are
   mirrored explicitly at the bottom of this file.

   Token strategy:
   - v9.css maps every legacy name (--bg, --surface, --text, --primary,
     --line, --aehi-*, --v4-*) onto --v9-*. But bundle defines the legacy
     names on `body:not(.theme-dark)` (specificity 11), which outranks
     v9's `:root` mapping (10) in light mode — two palettes render at
     once. This file therefore re-declares BOTH families on body with
     specificity 22 so exactly one palette is in charge.

   Direction: "Porcelain & Deep Teal" (light) / "Obsidian & Emerald" (dark)
   Theme 1 is never touched: nothing here applies without the hook.
   ===================================================================== */

/* ---------------------------------------------------------------
   1) Palette — LIGHT  (html attribute hook, works even without the id)
   --------------------------------------------------------------- */
html[data-ui-theme="promax"] {
  --v9-bg: #f2f5f4;
  --v9-bg-grad: radial-gradient(1100px 560px at 100% -12%, rgba(13, 148, 136, .10), transparent 60%),
                radial-gradient(820px 460px at 0% 0%, rgba(8, 145, 178, .07), transparent 58%);
  --v9-surface: #ffffff;
  --v9-surface-2: #eef3f2;
  --v9-surface-3: #e2eae8;
  --v9-line: #dbe6e4;
  --v9-line-strong: #c2d2cf;
  --v9-text: #0d1a18;
  --v9-text-2: #3f514d;
  --v9-text-3: #74857f;
  --v9-primary: #0f766e;
  --v9-primary-2: #0d9488;
  --v9-primary-soft: rgba(15, 118, 110, .11);
  --v9-info: #0369a1;
  --v9-cyan: #0e7490;
  --v9-success: #16794a;
  --v9-success-soft: rgba(22, 121, 74, .12);
  --v9-danger: #c53030;
  --v9-danger-soft: rgba(197, 48, 48, .11);
  --v9-warning: #a15c07;
  --v9-warning-soft: rgba(161, 92, 7, .12);
  --v9-purple: #5b21b6;
  --v9-pink: #9d174d;
  --v9-shadow-sm: 0 1px 2px rgba(9, 30, 27, .06), 0 1px 1px rgba(9, 30, 27, .04);
  --v9-shadow: 0 10px 26px -14px rgba(9, 30, 27, .28), 0 2px 6px -2px rgba(9, 30, 27, .08);
  --v9-shadow-lg: 0 30px 70px -32px rgba(9, 30, 27, .38);
  --v9-radius: 16px;
  --v9-radius-sm: 11px;
}

/* ---------------------------------------------------------------
   2) Palette — DARK
   --------------------------------------------------------------- */
html[data-ui-theme="promax"][data-theme="dark"],
html[data-ui-theme="promax"] body.theme-dark {
  --v9-bg: #070c0c;
  --v9-bg-grad: radial-gradient(1150px 600px at 100% -12%, rgba(45, 212, 191, .14), transparent 62%),
                radial-gradient(900px 520px at 0% 0%, rgba(34, 211, 238, .09), transparent 58%);
  --v9-surface: #0f1615;
  --v9-surface-2: #151e1d;
  --v9-surface-3: #1b2625;
  --v9-line: #243130;
  --v9-line-strong: #354643;
  --v9-text: #e9f3f1;
  --v9-text-2: #b0c1be;
  --v9-text-3: #7b8b88;
  --v9-primary: #2dd4bf;
  --v9-primary-2: #5eead4;
  --v9-primary-soft: rgba(45, 212, 191, .14);
  --v9-info: #38bdf8;
  --v9-cyan: #22d3ee;
  --v9-success: #4ade80;
  --v9-success-soft: rgba(74, 222, 128, .14);
  --v9-danger: #f87171;
  --v9-danger-soft: rgba(248, 113, 113, .14);
  --v9-warning: #fbbf24;
  --v9-warning-soft: rgba(251, 191, 36, .14);
  --v9-purple: #a78bfa;
  --v9-pink: #f472b6;
  --v9-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --v9-shadow: 0 14px 34px -18px rgba(0, 0, 0, .75), 0 2px 8px -3px rgba(0, 0, 0, .5);
  --v9-shadow-lg: 0 36px 80px -36px rgba(0, 0, 0, .85);
  --v9-radius: 16px;
  --v9-radius-sm: 11px;
}

/* ---------------------------------------------------------------
   3) Legacy name mapping on <body> — one palette, not two
   --------------------------------------------------------------- */
html[data-ui-theme="promax"] body:not(.theme-dark),
#uiPromax body:not(.theme-dark),
html[data-ui-theme="promax"] body.theme-dark,
#uiPromax body.theme-dark {
  --bg: var(--v9-bg);
  --surface: var(--v9-surface);
  --surface-2: var(--v9-surface-2);
  --surface-3: var(--v9-surface-3);
  --text: var(--v9-text);
  --ink: var(--v9-text);
  --muted: var(--v9-text-3);
  --border: var(--v9-line);
  --border-strong: var(--v9-line-strong);
  --line: var(--v9-line);
  --line-strong: var(--v9-line-strong);
  --primary: var(--v9-primary);
  --primary-strong: var(--v9-primary-2);
  --primary-soft: var(--v9-primary-soft);
  --green: var(--v9-success);
  --success: var(--v9-success);
  --red: var(--v9-danger);
  --danger: var(--v9-danger);
  --amber: var(--v9-warning);
  --warning: var(--v9-warning);
  --cyan: var(--v9-cyan);
  --aqua: var(--v9-cyan);
  --ok-ink: var(--v9-success);
  --danger-ink: var(--v9-danger);
  --warn-ink: var(--v9-warning);
  --ok-soft: var(--v9-success-soft);
  --danger-soft: var(--v9-danger-soft);
  --warn-soft: var(--v9-warning-soft);
  --aehi-bg: var(--v9-bg);
  --aehi-surface: var(--v9-surface);
  --aehi-surface-2: var(--v9-surface-2);
  --aehi-text: var(--v9-text);
  --aehi-text-muted: var(--v9-text-3);
  --aehi-border: var(--v9-line);
  --aehi-accent: var(--v9-primary);
  --aehi-accent-2: var(--v9-cyan);
  --v4-accent: var(--v9-primary);
  --v4-mint: var(--v9-success);
  --v4-danger: var(--v9-danger);
  --v4-warn: var(--v9-warning);
  --v4-bg: var(--v9-bg);
  --v4-surface: var(--v9-surface);
  --v4-surface-2: var(--v9-surface-2);
  --v4-surface-3: var(--v9-surface-3);
  --v4-line: var(--v9-line);
  --v4-line-strong: var(--v9-line-strong);
  --v4-text: var(--v9-text);
  --v4-muted: var(--v9-text-3);
  --v4-subtle: var(--v9-text-3);
  --v4-soft: var(--v9-surface-2);
  --v4-shadow: var(--v9-shadow);
  --shadow: var(--v9-shadow);
  --shadow-soft: var(--v9-shadow-sm);
  --shadow-elevated: var(--v9-shadow-lg);
  --radius-lg: var(--v9-radius);
  --radius-md: var(--v9-radius-sm);
  --radius-xl: 22px;
  --r: var(--v9-radius-sm);
  --r-sm: 9px;
  --r-lg: var(--v9-radius);
  --focus: 0 0 0 3px var(--v9-primary-soft);
  --o9-border: var(--v9-line);
  --o9-border-soft: var(--v9-line);
  --o9-surface: var(--v9-surface);
  --o9-surface-2: var(--v9-surface-2);
  --o9-text: var(--v9-text);
  --o9-text-muted: var(--v9-text-3);
  --o9-accent: var(--v9-primary);
  --o9-accent-soft: var(--v9-primary-soft);
  --o9-ok: var(--v9-success);
  --o9-warn: var(--v9-warning);
  --o9-shadow: var(--v9-shadow);
  --o9-bg: var(--v9-bg);
}

/* ---------------------------------------------------------------
   4) Global canvas
   --------------------------------------------------------------- */
html[data-ui-theme="promax"] body,
#uiPromax body {
  background: var(--v9-bg) !important;
  background-image: var(--v9-bg-grad) !important;
  background-attachment: fixed !important;
  color: var(--v9-text) !important;
  -webkit-font-smoothing: antialiased;
}
#uiPromax ::selection { background: var(--v9-primary-soft); color: var(--v9-text); }
#uiPromax ::-webkit-scrollbar { width: 11px; height: 11px; }
#uiPromax ::-webkit-scrollbar-thumb {
  background: var(--v9-line-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
#uiPromax ::-webkit-scrollbar-thumb:hover { background: var(--v9-primary); background-clip: content-box; }
#uiPromax ::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------
   5) Sidebar + navigation
   --------------------------------------------------------------- */
#uiPromax .sidebar {
  background: var(--v9-surface) !important;
  background-image: none !important;
  border-inline-end: 1px solid var(--v9-line) !important;
  box-shadow: none !important;
}
#uiPromax .brand { border-bottom: 1px solid var(--v9-line) !important; padding-bottom: 16px !important; }
#uiPromax .brand b { letter-spacing: .04em !important; font-weight: 800 !important; color: var(--v9-text) !important; }
#uiPromax .brand small { color: var(--v9-text-3) !important; letter-spacing: .14em !important; }
#uiPromax .brand-icon { border-radius: 12px !important; box-shadow: var(--v9-shadow-sm) !important; }

#uiPromax .nav-item {
  position: relative !important;
  border: 1px solid transparent !important;
  border-radius: var(--v9-radius-sm) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--v9-text-2) !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
#uiPromax .nav-item span { color: var(--v9-text-3) !important; }
#uiPromax .nav-item:hover {
  background: var(--v9-surface-2) !important;
  border-color: var(--v9-line) !important;
  color: var(--v9-text) !important;
  transform: translateX(-2px) !important;
}
#uiPromax .nav-item.active {
  background: var(--v9-primary-soft) !important;
  border-color: color-mix(in srgb, var(--v9-primary) 34%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--v9-primary) !important;
}
#uiPromax .nav-item.active i { color: var(--v9-primary) !important; font-weight: 700 !important; }
#uiPromax .nav-item.active span { color: var(--v9-primary) !important; }
#uiPromax .nav-item.permission-hidden { display: none !important; }

#uiPromax .sidebar-footer { border-top: 1px solid var(--v9-line) !important; padding-top: 14px !important; }
#uiPromax .agent-status { color: var(--v9-text-3) !important; font-size: 11px !important; }
#uiPromax .agent-status i { background: var(--v9-success) !important; box-shadow: 0 0 0 3px var(--v9-success-soft) !important; }
#uiPromax .apk-link {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-surface-2) !important;
  background-image: none !important;
  color: var(--v9-text-2) !important;
}
#uiPromax .apk-link:hover { border-color: var(--v9-primary) !important; color: var(--v9-primary) !important; }

/* ---------------------------------------------------------------
   6) Topbar
   --------------------------------------------------------------- */
#uiPromax .topbar {
  background: color-mix(in srgb, var(--v9-surface) 88%, transparent) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--v9-line) !important;
  backdrop-filter: saturate(140%) blur(10px);
}
#uiPromax .breadcrumb h1 { color: var(--v9-text) !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
#uiPromax .breadcrumb span { color: var(--v9-primary) !important; font-weight: 800 !important; letter-spacing: .16em !important; }
#uiPromax .clock span { color: var(--v9-text) !important; font-variant-numeric: tabular-nums !important; font-weight: 700 !important; }
#uiPromax .clock small { color: var(--v9-text-3) !important; }
#uiPromax .language-button,
#uiPromax .icon-button,
#uiPromax .user-button {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-surface) !important;
  background-image: none !important;
  color: var(--v9-text-2) !important;
  transition: border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#uiPromax .language-button:hover,
#uiPromax .icon-button:hover,
#uiPromax .user-button:hover {
  border-color: var(--v9-primary) !important;
  color: var(--v9-primary) !important;
  box-shadow: var(--v9-shadow-sm) !important;
}
#uiPromax .avatar {
  background: var(--v9-primary-soft) !important;
  color: var(--v9-primary) !important;
  font-weight: 800 !important;
  border: 1px solid color-mix(in srgb, var(--v9-primary) 30%, transparent) !important;
}

/* ---------------------------------------------------------------
   7) Panels, cards, dashboard metrics
   --------------------------------------------------------------- */
#uiPromax .panel,
#uiPromax .metric-card,
#uiPromax .data-row,
#uiPromax .device-card,
#uiPromax .skeleton-card {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius) !important;
  background: var(--v9-surface) !important;
  background-image: none !important;
  box-shadow: var(--v9-shadow-sm) !important;
}
#uiPromax .panel::after,
#uiPromax .metric-card::after,
#uiPromax .data-row::after {
  display: none !important;
  content: none !important;
  filter: none !important;
}
#uiPromax .panel-head { border-bottom: 1px solid var(--v9-line) !important; padding-bottom: 12px !important; }
#uiPromax .panel-head h3,
#uiPromax .view-heading h2,
#uiPromax .hero-row h2 {
  color: var(--v9-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
#uiPromax .view-heading .eyebrow,
#uiPromax .hero-row .eyebrow,
#uiPromax .panel-head p,
#uiPromax .muted { color: var(--v9-text-3) !important; }

#uiPromax .metric-card { position: relative !important; overflow: hidden !important; }
#uiPromax .metric-card::before {
  content: "" !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline: 0 !important;
  height: 3px !important;
  background: var(--v9-primary) !important;
  opacity: .9 !important;
}
#uiPromax .metric-card:nth-child(2)::before { background: var(--v9-cyan) !important; }
#uiPromax .metric-card:nth-child(3)::before { background: var(--v9-success) !important; }
#uiPromax .metric-card:nth-child(4)::before { background: var(--v9-warning) !important; }
#uiPromax .metric-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#uiPromax .metric-card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--v9-primary) 36%, var(--v9-line)) !important;
  box-shadow: var(--v9-shadow) !important;
}
#uiPromax .metric-card b,
#uiPromax .metric-card strong { color: var(--v9-text) !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
#uiPromax .metric-card span,
#uiPromax .metric-card small { color: var(--v9-text-3) !important; }

#uiPromax .health-bars .health-bar,
#uiPromax .attention-list .attention-item {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-surface-2) !important;
  background-image: none !important;
}

/* ---------------------------------------------------------------
   8) Buttons
   --------------------------------------------------------------- */
#uiPromax .primary-button {
  border: 1px solid transparent !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-primary) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: var(--v9-shadow-sm) !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
#uiPromax body.theme-dark .primary-button { color: #05201c !important; }
#uiPromax .primary-button:hover { transform: translateY(-1px) !important; box-shadow: var(--v9-shadow) !important; filter: brightness(1.06); color: #fff !important; }
#uiPromax body.theme-dark .primary-button:hover { color: #05201c !important; }
#uiPromax .primary-button:active { transform: translateY(0) !important; }
#uiPromax .primary-button:disabled { opacity: .5 !important; transform: none !important; }

#uiPromax .secondary-button,
#uiPromax .text-button,
#uiPromax .filter-button {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-surface) !important;
  background-image: none !important;
  color: var(--v9-text-2) !important;
  font-weight: 600 !important;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
#uiPromax .secondary-button:hover,
#uiPromax .text-button:hover,
#uiPromax .filter-button:hover {
  border-color: var(--v9-primary) !important;
  color: var(--v9-primary) !important;
  background: var(--v9-primary-soft) !important;
}
#uiPromax .danger-button {
  border: 1px solid color-mix(in srgb, var(--v9-danger) 40%, transparent) !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-danger-soft) !important;
  background-image: none !important;
  color: var(--v9-danger) !important;
  font-weight: 700 !important;
}
#uiPromax .danger-button:hover { background: var(--v9-danger) !important; color: #fff !important; }
#uiPromax .danger-text { color: var(--v9-danger) !important; }

/* ---------------------------------------------------------------
   9) Badges / status pills (success = green, failed = red)
   --------------------------------------------------------------- */
#uiPromax .badge,
#uiPromax .pill,
#uiPromax .state-chip {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}
#uiPromax .badge.online, #uiPromax .badge.ok, #uiPromax .is-ok {
  background: var(--v9-success-soft) !important;
  color: var(--v9-success) !important;
  border-color: color-mix(in srgb, var(--v9-success) 34%, transparent) !important;
}
#uiPromax .badge.offline, #uiPromax .badge.failed, #uiPromax .is-bad {
  background: var(--v9-danger-soft) !important;
  color: var(--v9-danger) !important;
  border-color: color-mix(in srgb, var(--v9-danger) 34%, transparent) !important;
}
#uiPromax .badge.rooted, #uiPromax .badge.pending, #uiPromax .is-wait {
  background: var(--v9-warning-soft) !important;
  color: var(--v9-warning) !important;
  border-color: color-mix(in srgb, var(--v9-warning) 34%, transparent) !important;
}
#uiPromax .is-mute, #uiPromax .badge.muted {
  background: var(--v9-surface-2) !important;
  color: var(--v9-text-3) !important;
  border-color: var(--v9-line) !important;
}

/* ---------------------------------------------------------------
   10) Forms, inputs, selects
   --------------------------------------------------------------- */
#uiPromax input,
#uiPromax select,
#uiPromax textarea,
#uiPromax .settings-input,
#uiPromax .search-box {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-surface-2) !important;
  background-image: none !important;
  color: var(--v9-text) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#uiPromax input::placeholder,
#uiPromax textarea::placeholder { color: var(--v9-text-3) !important; }
#uiPromax input:focus,
#uiPromax select:focus,
#uiPromax textarea:focus,
#uiPromax .settings-input:focus {
  outline: none !important;
  background: var(--v9-surface) !important;
  border-color: var(--v9-primary) !important;
  box-shadow: 0 0 0 3px var(--v9-primary-soft) !important;
}
#uiPromax input[type="checkbox"],
#uiPromax input[type="radio"] { accent-color: var(--v9-primary) !important; }

/* ---------------------------------------------------------------
   11) Tables — hairline separators, tinted hover row
   --------------------------------------------------------------- */
#uiPromax .fleet-table thead th {
  background: var(--v9-surface-2) !important;
  background-image: none !important;
  color: var(--v9-text-3) !important;
  border-bottom: 1px solid var(--v9-line) !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}
#uiPromax .fleet-table td {
  border-top: 1px solid var(--v9-line) !important;
  border-bottom: 0 !important;
  color: var(--v9-text) !important;
}
#uiPromax .fleet-table tbody tr { transition: background .14s ease; }
#uiPromax .fleet-table tbody tr:hover { background: var(--v9-primary-soft) !important; }
#uiPromax .fleet-table tbody tr:last-child td { border-bottom: 1px solid var(--v9-line) !important; }
#uiPromax .table-scroll { border-radius: var(--v9-radius) !important; }
#uiPromax .table-panel { padding: 0 !important; overflow: hidden !important; }

/* ---------------------------------------------------------------
   12) Modals, toasts, overlays
   --------------------------------------------------------------- */
#uiPromax .modal,
#uiPromax .alert-card {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius) !important;
  background: var(--v9-surface) !important;
  background-image: none !important;
  box-shadow: var(--v9-shadow-lg) !important;
  color: var(--v9-text) !important;
}
#uiPromax .modal-layer,
#uiPromax .alert-layer {
  background: color-mix(in srgb, #05100e 62%, transparent) !important;
  backdrop-filter: blur(3px);
}
#uiPromax .toast {
  border: 1px solid var(--v9-line) !important;
  border-inline-start: 3px solid var(--v9-primary) !important;
  border-radius: var(--v9-radius-sm) !important;
  background: var(--v9-surface) !important;
  background-image: none !important;
  box-shadow: var(--v9-shadow) !important;
  color: var(--v9-text) !important;
}
#uiPromax .toast.error { border-inline-start-color: var(--v9-danger) !important; }

/* ---------------------------------------------------------------
   13) Login + studio + owner settings
   --------------------------------------------------------------- */
#uiPromax .login-card,
#uiPromax .login-panel,
#uiPromax .v7-login {
  border: 1px solid var(--v9-line) !important;
  border-radius: 22px !important;
  background: var(--v9-surface) !important;
  background-image: none !important;
  box-shadow: var(--v9-shadow-lg) !important;
  color: var(--v9-text) !important;
}
#uiPromax #loginLayer {
  background: var(--v9-bg) !important;
  background-image: var(--v9-bg-grad) !important;
}
#uiPromax .studio-tabs .segment,
#uiPromax .fleet-workspace-tabs button {
  border: 1px solid transparent !important;
  border-radius: var(--v9-radius-sm) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--v9-text-2) !important;
}
#uiPromax .studio-tabs .segment.active,
#uiPromax .fleet-workspace-tabs button.active {
  background: var(--v9-primary-soft) !important;
  border-color: color-mix(in srgb, var(--v9-primary) 32%, transparent) !important;
  color: var(--v9-primary) !important;
}
#uiPromax .o9-shell,
#uiPromax .o9-card,
#uiPromax .o9-status,
#uiPromax .o9-panel {
  border-color: var(--v9-line) !important;
  border-radius: var(--v9-radius) !important;
  background: var(--v9-surface) !important;
  background-image: none !important;
}

/* ---------------------------------------------------------------
   14) High-specificity mirrors (bundle's strongest !important rules)
   --------------------------------------------------------------- */
#uiPromax body:not(.theme-dark) #deviceTabContent form.settings-form .settings-input,
#uiPromax body.theme-dark #deviceTabContent form.settings-form .settings-input,
#uiPromax #deviceTabContent form.settings-form .settings-input {
  background: var(--v9-surface-2) !important;
  border: 1px solid var(--v9-line) !important;
  color: var(--v9-text) !important;
  border-radius: var(--v9-radius-sm) !important;
}
#uiPromax body:not(.theme-dark) #deviceTabContent form.settings-form .switch-row,
#uiPromax body.theme-dark #deviceTabContent form.settings-form .switch-row,
#uiPromax #deviceTabContent form.settings-form .switch-row {
  background: var(--v9-surface-2) !important;
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius-sm) !important;
  color: var(--v9-text) !important;
}
#uiPromax body:not(.theme-dark) #deviceTabContent form.settings-form > section,
#uiPromax body.theme-dark #deviceTabContent form.settings-form > section {
  background: var(--v9-surface) !important;
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius) !important;
}
#uiPromax body:not(.theme-dark) #deviceTabContent form.settings-form > section > h3,
#uiPromax body.theme-dark #deviceTabContent form.settings-form > section > h3 {
  color: var(--v9-text) !important;
}
#uiPromax body:not(.theme-dark) #deviceTabContent form.settings-form > section p,
#uiPromax body.theme-dark #deviceTabContent form.settings-form > section p,
#uiPromax body:not(.theme-dark) #deviceTabContent form.settings-form > section small,
#uiPromax body.theme-dark #deviceTabContent form.settings-form > section small,
#uiPromax #deviceTabContent .muted {
  color: var(--v9-text-3) !important;
}
#uiPromax #view-fleet .fleet-table .fleet-row:last-child td,
#uiPromax .fleet-table .fleet-row:last-child td {
  border-bottom: 1px solid var(--v9-line) !important;
}

/* Legacy device-detail hard-coded colours in bundle.css */
#uiPromax .switch-row,
#uiPromax .time-note,
#uiPromax .phone-number { color: var(--v9-text-2) !important; }
#uiPromax .screenshot-card,
#uiPromax .hero-shot-button,
#uiPromax .screenshot-card .open-image span,
#uiPromax .hero-shot-button .time-note {
  background: var(--v9-surface-2) !important;
  background-image: none !important;
  border-color: var(--v9-line) !important;
  color: var(--v9-text-2) !important;
}
#uiPromax .screenshot-card .open-image span b { color: var(--v9-text) !important; }
#uiPromax .screenshot-card .open-image span time,
#uiPromax .hero-shot-button .time-note { color: var(--v9-primary) !important; }
#uiPromax .screenshot-card .open-image img,
#uiPromax .hero-shot-button img { background: var(--v9-surface-3) !important; }

/* ---------------------------------------------------------------
   15) Avatar menu (theme switcher + sign out)
   --------------------------------------------------------------- */
.avatar-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 900;
  width: 274px;
  padding: 14px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-radius);
  background: var(--v9-surface);
  box-shadow: var(--v9-shadow-lg);
  animation: avatarMenuIn .18s ease both;
}
@keyframes avatarMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.avatar-menu-head { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--v9-line); }
.avatar-menu-head b { font-size: 13px; font-weight: 800; color: var(--v9-text); }
.avatar-menu-head small { font-size: 11px; color: var(--v9-text-3); direction: ltr; text-align: left; }
.avatar-menu-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--v9-text-3);
}
.avatar-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avatar-theme-card {
  display: grid;
  gap: 8px;
  padding: 9px;
  cursor: pointer;
  text-align: right;
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-radius-sm);
  background: var(--v9-surface-2);
  color: var(--v9-text-2);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.avatar-theme-card:hover { transform: translateY(-2px); border-color: var(--v9-line-strong); }
.avatar-theme-card.active {
  border-color: var(--v9-primary);
  color: var(--v9-primary);
  box-shadow: 0 0 0 2px var(--v9-primary-soft);
}
.avatar-theme-swatch {
  display: flex;
  height: 30px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--v9-line);
}
.avatar-theme-swatch i { flex: 1; }
.avatar-theme-swatch i:nth-child(1) { background: var(--v9-bg); }
.avatar-theme-swatch i:nth-child(2) { background: var(--v9-surface-3); }
.avatar-theme-swatch i:nth-child(3) { background: var(--v9-primary); }
.avatar-theme-swatch.is-classic i:nth-child(1) { background: #f5f6f9; }
.avatar-theme-swatch.is-classic i:nth-child(2) { background: #ffffff; }
.avatar-theme-swatch.is-classic i:nth-child(3) { background: #5b5bd6; }
.avatar-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-radius-sm);
  background: var(--v9-surface-2);
  color: var(--v9-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .16s ease, color .16s ease;
}
.avatar-menu-row:hover { border-color: var(--v9-primary); color: var(--v9-primary); }
.avatar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--v9-danger) 38%, transparent);
  border-radius: var(--v9-radius-sm);
  background: var(--v9-danger-soft);
  color: var(--v9-danger);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  transition: background .16s ease, color .16s ease;
}
.avatar-logout:hover { background: var(--v9-danger); color: #fff; }
.top-actions { position: relative; }

/* ---------------------------------------------------------------
   16) Motion
   --------------------------------------------------------------- */
@keyframes promaxViewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
#uiPromax .view.active { animation: promaxViewIn .26s ease both; }

@media (prefers-reduced-motion: reduce) {
  #uiPromax *,
  #uiPromax *::before,
  #uiPromax *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}