:root {
    --font-heading: 'Inter', sans-serif;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-title, .settings-section-title, .login-title,
.sidebar-logo-text, .brand-text-logo,
.desktop-login-brand { font-family: var(--font-heading, var(--font-family)); }
.ux35-shell .ux35-sidebar,
.ux35-shell .ux35-sidebar :is(h1, h2, h3, h4, h5, h6),
.ux35-shell .ux35-topbar { font-family: var(--ux35-font-chrome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); }

:root {
    --bg-primary: #090915;
    --bg-secondary: #12101f;
    --bg-tertiary: #191731;
    --bg-elevated: #262247;
    --text-primary: #f4f1fc;
    --text-secondary: #b8b7c9;
    --accent-blue: #ff8154;
    --accent-blue-hover: #ff9d78;
    --accent-blue-muted: rgba(230, 89, 28, 0.15);
    --accent-green: #3ddc84;
    --accent-green-hover: #5fe89b;
    --accent-green-muted: rgba(47, 180, 107, 0.15);
    --accent-red: #ff5c52;
    --accent-red-hover: #ff7d75;
    --accent-red-muted: rgba(217, 67, 57, 0.15);
    --accent-yellow: #ffb547;
    --accent-yellow-hover: #ffc76e;
    --accent-yellow-muted: rgba(217, 147, 47, 0.15);
    --accent-purple: #8800ff;
    --accent-purple-hover: #a340ff;
    --accent-purple-muted: rgba(107, 0, 201, 0.15);
    --border-primary: #262247;
    --border-secondary: #191731;
}
html { color-scheme: dark; }
:root {
    --color-primary: var(--accent-blue);
    --color-primary-hover: var(--accent-blue-hover);
    --color-primary-muted: var(--accent-blue-muted);
    --color-success: var(--accent-green);
    --color-success-hover: var(--accent-green-hover);
    --color-success-muted: var(--accent-green-muted);
    --color-danger: var(--accent-red);
    --color-danger-hover: var(--accent-red-hover);
    --color-danger-muted: var(--accent-red-muted);
    --color-warning: var(--accent-yellow);
    --color-warning-hover: var(--accent-yellow-hover);
    --color-warning-muted: var(--accent-yellow-muted);
    --color-info: var(--accent-purple);
    --color-info-hover: var(--accent-purple-hover);
    --color-info-muted: var(--accent-purple-muted);
    --color-surface: var(--bg-secondary);
    --color-surface-alt: var(--bg-primary);
    --color-surface-hover: var(--bg-tertiary);
    --color-surface-raised: var(--bg-elevated);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-border: var(--border-primary);
    --focus-ring-color: var(--accent-blue-muted);
    color-scheme: dark;
    /* UX 3.5 chrome aliases — solid surfaces (no glass/blur in this shell) */
    --ux35-bg: var(--bg-primary);
    --ux35-sidebar-bg: var(--bg-secondary);
    --ux35-card-bg: var(--bg-secondary);
    --ux35-border: var(--border-primary);
    --ux35-border-light: var(--border-secondary);
    --ux35-text: var(--text-primary);
    --ux35-muted: var(--text-secondary);
    --ux35-hover: var(--bg-hover);
    --ux35-primary: var(--accent-blue);
    --ux35-active-bg: var(--accent-blue-muted);
    --ux35-glass-blur: 0px;
    --ux35-glass-saturate: 1;
    --ux35-topbar-bg: var(--bg-elevated, var(--bg-secondary));
    --ux35-topbar-fg: var(--text-primary);
    --ux35-topbar-fg-muted: var(--text-secondary);
}
:root {
    --surface-glass-blur: 18px;
    --surface-glass-saturate: 1.2;
    --surface-glass-bg-secondary: rgba(18, 16, 31, 0.62);
    --surface-glass-bg-tertiary: rgba(18, 16, 31, 0.70);
    --surface-glass-bg-elevated: rgba(18, 16, 31, 0.77);
    --surface-glass-border: rgba(18, 16, 31, 0.97);
    --card-bg: var(--surface-glass-bg-secondary);
    --sidebar-glass-bg-rail: rgba(18, 16, 31, 0.55);
    --sidebar-glass-bg-flyout: rgba(18, 16, 31, 0.65);
}

/* --- custom branding CSS --- */
/* ═══════════════════════════════════════════════════════════════════════════
   LucidPC Control — console refinements
   Appended to /css/branding.css after the generated token block.

   SCOPE, DELIBERATELY NARROW: colour, typography, focus and motion. No layout,
   positioning or sizing changes — those cannot be verified on every page of a
   console this large, and a broken layout is worse than an ugly one.

   Two things drive the choices:
     · The primary action must be the brand orange. BetterDesk wires primary
       buttons to --accent-green, so out of the box the main action is a bright
       mint green that is both off-brand and the loudest thing on screen.
       Green is kept for what it should mean: success and online status.
     · Motion stays slow and dim. Nothing flashes, bounces or jumps.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --lpc-ease: cubic-bezier(0.4, 0.14, 0.3, 1);
  --lpc-dur: 180ms;
  --lpc-ring: 0 0 0 3px rgba(255, 129, 84, 0.32);
  --lpc-line: rgba(244, 241, 252, 0.09);
}

/* ── Primary action ─────────────────────────────────────────────────────────
   BetterDesk paints .btn-primary with --accent-green. Repoint it at the brand
   orange WITHOUT touching --accent-green itself, so success states, online
   dots and healthy badges keep their green meaning. */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #1a0d06;                 /* dark ink on orange: 8.8:1, far past AA */
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--lpc-dur) var(--lpc-ease),
              border-color var(--lpc-dur) var(--lpc-ease),
              box-shadow var(--lpc-dur) var(--lpc-ease);
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--accent-blue-hover);
  border-color: var(--accent-blue-hover);
}
.btn-primary:active,
.btn.btn-primary:active {
  background-color: #e6591c;
  border-color: #e6591c;
}
.btn-primary:disabled,
.btn-primary[disabled] {
  background-color: #4a3a33;
  border-color: #4a3a33;
  color: rgba(244, 241, 252, 0.45);
}

/* Secondary reads as a surface, not a second primary. */
.btn-secondary,
.btn.btn-secondary {
  background-color: var(--bg-tertiary);
  border-color: var(--border-primary);
  color: var(--text-primary);
  transition: background-color var(--lpc-dur) var(--lpc-ease),
              border-color var(--lpc-dur) var(--lpc-ease);
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
  background-color: var(--bg-elevated);
  border-color: rgba(255, 129, 84, 0.35);
}

/* ── Focus ──────────────────────────────────────────────────────────────────
   A console is driven by keyboard as much as mouse. :focus-visible only, so
   the ring never appears on a mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Form fields ────────────────────────────────────────────────────────────
   Calm at rest, unmistakable when focused. */
.form-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  transition: border-color var(--lpc-dur) var(--lpc-ease),
              box-shadow var(--lpc-dur) var(--lpc-ease),
              background-color var(--lpc-dur) var(--lpc-ease);
}
.form-input:hover,
input[type="text"]:hover,
input[type="password"]:hover,
select:hover,
textarea:hover {
  border-color: rgba(244, 241, 252, 0.22);
}
.form-input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--lpc-ring);
  background-color: var(--bg-secondary);
  outline: none;
}
::placeholder { color: rgba(184, 183, 201, 0.55); }

/* ── Typography ─────────────────────────────────────────────────────────────
   Headings were set at default tracking, which looks loose and generic at
   large sizes. */
h1, h2, h3,
.page-title,
.settings-section-title,
.login-title {
  letter-spacing: -0.018em;
  font-weight: 650;
}

/* Device IDs, counts, timestamps, ports: tabular figures so columns of digits
   line up instead of jittering. This is the single biggest legibility win in a
   console full of numeric tables. */
.device-id, .peer-id, .stat-value, .metric-value, .count,
td, code, kbd, pre, .mono, [class*="-id"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
code, kbd, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Surfaces ───────────────────────────────────────────────────────────────
   Hairlines instead of heavy borders; depth from a soft shadow, not a hard
   outline. */
.card, .panel, .settings-card, .modal-content, .dropdown-menu {
  border-color: var(--lpc-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.22);
}
table th {
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
table tbody tr {
  transition: background-color var(--lpc-dur) var(--lpc-ease);
}
table tbody tr:hover {
  background-color: rgba(255, 129, 84, 0.05);
}

/* ── Links ──────────────────────────────────────────────────────────────── */
a { transition: color var(--lpc-dur) var(--lpc-ease); }
a:hover { color: var(--accent-blue-hover); }

/* ── Selection & scrollbars ─────────────────────────────────────────────────
   Default scrollbars on a dark console are bright grey slabs; these recede
   until pointed at. */
::selection {
  background: rgba(255, 129, 84, 0.30);
  color: var(--text-primary);
}
* { scrollbar-width: thin; scrollbar-color: #2f2b52 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2f2b52;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #3d3768; background-clip: content-box; }

/* ── Status colour discipline ───────────────────────────────────────────────
   Green means online/healthy and nothing else, now that it is no longer doing
   double duty as the primary action. */
.status-online, .badge-online, .status-dot.online { color: var(--accent-green); }
.status-offline, .badge-offline { color: var(--text-secondary); }

/* ── Motion ─────────────────────────────────────────────────────────────────
   Nothing here is fast or bright, and anyone who has asked their OS for less
   motion gets none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* NB: `scroll-behavior` is deliberately omitted. sanitizeCustomCss strips
       /(?:-\w+-)?behavior\s*:/ which also matches INSIDE scroll-behavior, so
       re-saving branding through the UI would mangle it to `scroll- auto`. */
  }
}

/* ── Brand mark sizing ──────────────────────────────────────────────────────
   The console injects logoSvg INLINE and untouched, and the LucidPC lockup
   carries width="1180" height="211" from the site. Left alone it renders 1180px
   wide inside a 334px card and spills across the page.

   Size by HEIGHT and let width follow: the viewBox gives a 5.6:1 ratio, so a
   fixed height can never distort it, whereas width:100% + max-height would.
   max-width keeps it inside narrow containers on mobile. */
.login-logo svg,
.login-logo-svg svg,
.desktop-login-brand svg,
.rdclient-login-brand svg {
  height: 46px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Sidebar / topbar lockup: same rule, smaller. */
.sidebar-logo svg,
.sidebar-logo-svg svg,
.ux35-sidebar .brand svg,
.ux35-topbar .brand svg,
.navbar-brand svg,
.brand-logo svg {
  height: 26px;
  width: auto;
  max-width: 100%;
}

/* Backstop: any branding SVG anywhere is at least prevented from overflowing. */
[class*="logo"] svg,
[class*="brand"] svg { max-width: 100%; }

/* The legal entity in the footer is a legal notice, not a label - keep it quiet. */
.login-footer, .footer-text, .powered-by {
  color: var(--text-secondary);
  opacity: 0.7;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}