/* =====================================================================
   MediAssist design system  -  styles.css
   Mobile-first, WCAG 2.1 AA, CSP-safe (system fonts, no remote URLs).
   Every class / id the app.js renderer produces is styled here.

   Sections
   0.  Design tokens (light) + dark theme remap
   1.  Reset & base elements
   2.  App shell, top bar, brand, nav actions, role nav
   3.  Page, hero variants
   4.  12-col grid + span-* (mobile-first)
   5.  Cards, section head, typography utilities
   6.  Buttons
   7.  Forms & fields
   8.  Status chips / badges (all complaint + machine states)
   9.  Metrics / KPI tiles
   10. Lists, complaint cards, mini devices
   11. Machines directory & rows
   12. Machine Home, identity, warranty, health
   13. Trackers, timelines, activity feed
   14. Tabs
   15. Toast, empty state, skeleton, search results
   16. Executive chart
   17. Dealer master, priorities, operations, mobile panel
   18. Routing box, transparency strip
   19. QR & sticker preview
   20. Photo drop / preview / uploaders
   21. Splash screen
   22. Accessibility: focus-visible, reduced motion, print
   23. Keyframes
   24. Responsive scale-up (min-width)
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 0. DESIGN TOKENS (LIGHT)
 * ------------------------------------------------------------------ */
:root {
  /* Brand: calm medical teal, blue as informational accent */
  --primary: #0f766e;            /* teal-700  - white text passes AA   */
  --primary-hover: #115e59;
  --primary-active: #134e4a;
  --primary-soft: #0d9488;       /* teal-600  - graphic accent         */
  --primary-rgb: 15, 118, 110;   /* drives brand washes/glows          */
  --on-primary: #ffffff;

  --accent: #1d4ed8;             /* blue-700  - links / info accent     */
  --accent-rgb: 29, 78, 216;

  /* Neutral surfaces */
  --bg: #f6f7f7;
  --bg-top: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f4f3;
  --surface-3: #e8ebea;
  --surface-alt: #fafbfa;
  --tile-grad: linear-gradient(180deg, var(--surface), var(--surface-2));

  /* Text */
  --ink: #0b0f0e;                /* headings                            */
  --text: #262d2b;               /* body                                */
  --text-2: #414a48;             /* lead / secondary paragraphs         */
  --muted: #5d6664;              /* captions / .subtle  (AA on tiles)   */

  /* Lines / borders */
  --border: #e6e9e8;             /* decorative card & section borders   */
  --border-strong: #cdd3d1;      /* dividers                            */
  --field-border: #8d9493;       /* form control edge (>=3:1 on white)  */

  /* Radius */
  --radius-sm: 9px;
  --radius: 13px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Elevation (soft, layered, slate-tinted) */
  --shadow-xs: 0 1px 2px rgba(11, 15, 14, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 15, 14, 0.05), 0 1px 1px rgba(11, 15, 14, 0.03);
  --shadow-md: 0 12px 28px -12px rgba(11, 15, 14, 0.10), 0 2px 6px -3px rgba(11, 15, 14, 0.05);
  --shadow-lg: 0 32px 64px -24px rgba(11, 15, 14, 0.16), 0 10px 24px -16px rgba(11, 15, 14, 0.10);

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Focus ring (high contrast, works over any surface) */
  --ring: #1d4ed8;
  --ring-glow: rgba(29, 78, 216, 0.28);

  /* Status chip palette (bg / fg) - each pair >= 5:1 */
  --st-neutral-bg: #e9edf3;  --st-neutral-fg: #384456;
  --st-brand-bg:   #d6f3ee;  --st-brand-fg:   #0f5b53;
  --st-info-bg:    #dbe7ff;  --st-info-fg:    #1c3ca0;
  --st-warn-bg:    #fceccb;  --st-warn-fg:    #855107;
  --st-success-bg: #d3efdc;  --st-success-fg: #14653a;
  --st-danger-bg:  #fbdad9;  --st-danger-fg:  #a41f1f;
  --st-violet-bg:  #e7e2fb;  --st-violet-fg:  #4c33ab;

  /* Health surfaces (tile fills for health-score / transparency) */
  --health-green-fill: linear-gradient(180deg, #ffffff, #ecfdf5);
  --health-amber-fill: linear-gradient(180deg, #ffffff, #fffbeb);
  --health-red-fill:   linear-gradient(180deg, #ffffff, #fef2f2);
  --health-green-line: #86efac;
  --health-amber-line: #facc15;
  --health-red-line:   #fca5a5;
  --health-green-ink:  #047857;
  --health-amber-ink:  #92620a;
  --health-red-ink:    #b91c1c;

  --motion: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  color-scheme: light dark;
  font-family: var(--font-sans);
}

/* ------------------------------------------------------------------ *
 * 0b. DARK THEME  -  remap the same tokens
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #2dd4bf;          /* teal-400 - vivid on dark            */
    --primary-hover: #5eead4;
    --primary-active: #99f6e4;
    --primary-soft: #5eead4;
    --primary-rgb: 45, 212, 191;
    --on-primary: #062a25;       /* dark ink on bright teal (AA)        */

    --accent: #93b4ff;
    --accent-rgb: 147, 180, 255;

    --bg: #0a111d;
    --bg-top: #0d1626;
    --surface: #121c2c;
    --surface-2: #1a2536;
    --surface-3: #223046;
    --surface-alt: #16202f;
    --tile-grad: linear-gradient(180deg, var(--surface), var(--surface-2));

    --ink: #f1f5f9;
    --text: #dde5ee;
    --text-2: #c3cedb;
    --muted: #9fb0c4;

    --border: #29344a;
    --border-strong: #45566f;
    --field-border: #64718a;   /* >=3:1 vs dark input surface (UI border AA) */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.6), 0 3px 8px -4px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 28px 60px -18px rgba(0, 0, 0, 0.72), 0 10px 24px -12px rgba(0, 0, 0, 0.55);

    --ring: #7dd3fc;
    --ring-glow: rgba(125, 211, 252, 0.32);

    --st-neutral-bg: #26303f;  --st-neutral-fg: #c6d0dd;
    --st-brand-bg:   #10403b;  --st-brand-fg:   #7fe9d9;
    --st-info-bg:    #1b2c52;  --st-info-fg:    #bcd2ff;
    --st-warn-bg:    #3c2f11;  --st-warn-fg:    #f4d081;
    --st-success-bg: #123726;  --st-success-fg: #86e5ab;
    --st-danger-bg:  #40201f;  --st-danger-fg:  #f6a9a3;
    --st-violet-bg:  #292350;  --st-violet-fg:  #cabff7;

    --health-green-fill: linear-gradient(180deg, var(--surface), #10241c);
    --health-amber-fill: linear-gradient(180deg, var(--surface), #241d0d);
    --health-red-fill:   linear-gradient(180deg, var(--surface), #241413);
    --health-green-line: #14663f;
    --health-amber-line: #6d5410;
    --health-red-line:   #6e2725;
    --health-green-ink:  #6ee7a4;
    --health-amber-ink:  #f4d081;
    --health-red-ink:    #f7a8a2;
  }
}

/* ------------------------------------------------------------------ *
 * 1. RESET & BASE ELEMENTS
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 30rem at 18% -8%, rgba(var(--primary-rgb), 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0, var(--bg) 22rem);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: 750;
}

::selection {
  background: rgba(var(--primary-rgb), 0.24);
  color: var(--ink);
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Headings ------------------------------------------------------- */
h1, h2, h3, h4, p {
  margin-top: 0;
}

h1, h2, h3, h4 {
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  margin-bottom: 12px;
  max-width: 20ch;
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1.04;
  font-weight: 820;
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(20px, 3.4vw, 27px);
  line-height: 1.18;
  font-weight: 780;
  letter-spacing: -0.01em;
}

h3 {
  margin-bottom: 8px;
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1.3;
  font-weight: 760;
}

h4 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 740;
}

p {
  margin-bottom: 12px;
  line-height: 1.62;
}

small {
  color: var(--muted);
  font-size: 0.82em;
  line-height: 1.5;
}

/* Typography utilities ------------------------------------------- */
.lead {
  color: var(--text-2);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.62;
  max-width: 62ch;
}

.subtle {
  color: var(--muted);
}

.small {
  font-size: 12.5px;
}

.brand-line {
  margin: 8px 0 12px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ *
 * 2. APP SHELL / TOP BAR / NAV
 * ------------------------------------------------------------------ */
.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(14px, 4vw, 40px);
  background: var(--surface);                  /* fallback if color-mix unsupported */
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}

/* Fallback when backdrop-filter unsupported */
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--surface); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  min-height: 44px;
  color: var(--ink);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--primary-soft), var(--primary-hover));
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 8px 18px -6px rgba(var(--primary-rgb), 0.55);
}

.nav-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Role navigation (horizontal scroll pills) */
.role-nav {
  position: static;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 10px clamp(14px, 4vw, 40px);
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  scroll-snap-type: x proximity;
}

.role-nav::-webkit-scrollbar { height: 6px; }
.role-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

.role-nav-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-2);
  font-weight: 640;
  font-size: 14px;
  scroll-snap-align: start;
  transition: color 0.16s var(--motion), border-color 0.16s var(--motion),
    background 0.16s var(--motion), box-shadow 0.16s var(--motion);
}

.role-nav-item:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow-xs);
  text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 3. PAGE + HERO
 * ------------------------------------------------------------------ */
.page {
  width: min(1180px, 100% - 32px);
  margin: 0 auto;
  padding: 22px 0 72px;
  animation: page-in 0.36s var(--motion);
}

.hero,
.compact-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
  padding: 20px 0 8px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* ------------------------------------------------------------------ *
 * 4. GRID + SPAN-*  (mobile-first: everything full width)
 * ------------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.span-3, .span-4, .span-5,
.span-6, .span-7, .span-8, .span-12 {
  grid-column: 1 / -1;   /* full width on small screens */
}

/* fields laid out inside a grid should not add their own bottom gap */
.grid > .field { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * 5. CARDS + SECTION HEAD
 * ------------------------------------------------------------------ */
.card {
  position: relative;
  padding: clamp(16px, 2.2vw, 22px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 88px;
  transition: transform 0.18s var(--motion), box-shadow 0.18s var(--motion),
    border-color 0.18s var(--motion);
}

.card:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-md);
}

.card > :last-child { margin-bottom: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head h2,
.section-head h3 { margin-bottom: 4px; }

.section-head .subtle { max-width: 60ch; }

.compact-meta { margin-top: 7px; }

/* ------------------------------------------------------------------ *
 * 6. BUTTONS  -  hierarchy: default(secondary) / primary / ghost / danger
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 640;
  font-size: 14.5px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: transform 0.14s var(--motion), box-shadow 0.14s var(--motion),
    border-color 0.14s var(--motion), background 0.14s var(--motion),
    color 0.14s var(--motion);
}

.btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active { transform: translateY(0); }

.btn svg,
.brand svg,
.status svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Primary */
.btn.primary {
  border-color: transparent;
  background: var(--primary);                 /* fallback if color-mix unsupported */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 88%, #fff 12%), var(--primary));
  color: var(--on-primary);
  box-shadow: 0 10px 22px -8px rgba(var(--primary-rgb), 0.6);
}

.btn.primary:hover {
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  border-color: transparent;
}

.btn.primary:active { background: var(--primary-active); }

/* Secondary (explicit alias of default filled look) */
.btn.secondary {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--primary-hover);
}

/* Ghost */
.btn.ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
}

.btn.ghost:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

/* Danger */
.btn.danger {
  border-color: color-mix(in srgb, var(--st-danger-fg) 45%, var(--border));
  background: var(--st-danger-bg);
  color: var(--st-danger-fg);
}

.btn.danger:hover {
  background: color-mix(in srgb, var(--st-danger-fg) 14%, var(--surface));
  border-color: var(--st-danger-fg);
}

.btn:disabled,
.btn[disabled],
.is-loading {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

.is-loading { cursor: progress; }

/* ------------------------------------------------------------------ *
 * 7. FORMS & FIELDS
 * ------------------------------------------------------------------ */
.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.field label {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 680;
}

.field input,
.field select,
.field textarea,
.field-input {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
  outline: none;
  transition: border-color 0.16s var(--motion), box-shadow 0.16s var(--motion),
    background 0.16s var(--motion);
}

.field textarea {
  min-height: 112px;
  padding-top: 12px;
  line-height: 1.5;
  resize: vertical;
}

.field select,
.field-input {
  -webkit-appearance: none;
  appearance: none;
}

.field select,
select.field-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234b5768' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.field-input:hover {
  border-color: var(--border-strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.field-input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--ring-glow);
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.field-input:disabled {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--border);
  opacity: 1;                 /* keep disabled text readable */
  cursor: not-allowed;
}

.field input[readonly] {
  color: var(--text-2);
  background: var(--surface-2);
}

/* ------------------------------------------------------------------ *
 * 8. STATUS CHIPS & BADGES
 *    Base = brand tint; modifiers below carry semantic meaning.
 *    Colour is reinforced by the text label + dot (never colour-only).
 * ------------------------------------------------------------------ */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  max-width: 100%;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--st-brand-bg);
  color: var(--st-brand-fg);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.status::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.status svg { width: 14px; height: 14px; }

/* Neutral / passive */
.status.registered,
.status.manufactured {
  background: var(--st-neutral-bg);
  color: var(--st-neutral-fg);
}

/* In-progress (dealer + engineer working the job) */
.status.dealer_accepted,
.status.engineer_assigned,
.status.engineer_travelling,
.status.engineer_arrived,
.status.diagnosis,
.status.repair {
  background: var(--st-info-bg);
  color: var(--st-info-fg);
}

/* Waiting / attention */
.status.waiting_for_parts,
.status.warranty_pending,
.status.warranty_activation_pending,
.status.pm_due,
.status.calibration_due {
  background: var(--st-warn-bg);
  color: var(--st-warn-fg);
}

/* Awaiting the customer */
.status.customer_confirmation {
  background: var(--st-violet-bg);
  color: var(--st-violet-fg);
}

/* Success / complete / healthy */
.status.repair_completed,
.status.closed,
.status.active,
.status.warranty_active,
.status.service_available,
.status.installed {
  background: var(--st-success-bg);
  color: var(--st-success-fg);
}

/* Danger */
.status.overdue,
.status.under_service {
  background: var(--st-danger-bg);
  color: var(--st-danger-fg);
}

/* Health badge (layout tweak; colour comes from health-* classes) */
.status.health-badge {
  margin-top: 6px;
  width: -moz-fit-content;
  width: fit-content;
}

.status.health-green { background: var(--st-success-bg); color: var(--st-success-fg); }
.status.health-amber { background: var(--st-warn-bg);    color: var(--st-warn-fg); }
.status.health-red   { background: var(--st-danger-bg);  color: var(--st-danger-fg); }

/* ------------------------------------------------------------------ *
 * 9. METRICS / KPI TILES
 * ------------------------------------------------------------------ */
.metric {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 118px;
}

.metric > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric .subtle {
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metric-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-bottom: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary-hover);
}

.metric-icon svg { width: 19px; height: 19px; fill: currentColor; }

.metric-value {
  color: var(--ink);
  font-size: clamp(30px, 6vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* settings cards also use .metric-icon standalone with a margin */
.settings-card .metric-icon { margin-bottom: 14px; }

/* ------------------------------------------------------------------ *
 * 10. LISTS / COMPLAINT CARDS / DEVICE THUMBS
 * ------------------------------------------------------------------ */
.list {
  display: grid;
  gap: 12px;
}

.list-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 0.16s var(--motion), border-color 0.16s var(--motion),
    box-shadow 0.16s var(--motion);
}

.list-item:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  box-shadow: var(--shadow-sm);
}

.list-item p { margin-bottom: 6px; }
.list-item p:last-child { margin-bottom: 0; }

.list-item > div { min-width: 0; }

.mini-device {
  float: left;
  width: 46px;
  height: 46px;
  margin: 0 12px 6px 0;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
}

.detail-device-photo {
  display: block;
  width: min(280px, 100%);
  max-height: 170px;
  margin: 12px 0;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.complaint-main { min-width: 0; }

.complaint-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 8px;
}

.complaint-title strong { font-size: 15px; }

.complaint-actions {
  display: flex;
  justify-content: flex-start;
}

.complaint-actions .button-row { margin-top: 0; width: 100%; }

/* ------------------------------------------------------------------ *
 * 11. MACHINES DIRECTORY & ROWS
 * ------------------------------------------------------------------ */
.machine-visual {
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 12%, rgba(var(--primary-rgb), 0.12), transparent 70%),
    var(--tile-grad);
}

.machine-visual img {
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(15, 23, 42, 0.14));
  transition: transform 0.24s var(--motion);
}

.machine-visual:hover img { transform: translateY(-3px); }

.machine-directory { overflow: hidden; }

.machine-table { display: grid; gap: 10px; }

.machine-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--tile-grad);
  transition: border-color 0.18s var(--motion), transform 0.18s var(--motion),
    box-shadow 0.18s var(--motion);
}

.machine-row:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: var(--shadow-sm);
}

.machine-row > div { min-width: 0; }

.machine-row strong { display: block; color: var(--ink); }

.machine-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.machine-row .status { display: inline-flex; }

.machine-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.machine-row-actions .btn { flex: 1 1 auto; }

.machine-family-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.machine-family-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 680;
}

.machine-family-pills strong { color: var(--ink); }

/* Profile & settings cards share a soft brand accent corner */
.profile-card,
.settings-card { overflow: hidden; }

.profile-card h3 { font-size: 20px; }

.settings-card::after {
  content: "";
  position: absolute;
  inset: auto -22% -48% auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.08);
  pointer-events: none;
}

.help-card { min-height: 168px; }

/* Getting-started workflow steps */
.help-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.help-steps div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--tile-grad);
}

.help-steps strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--on-primary);
  background: var(--primary);
  font-weight: 780;
}

.help-steps span { color: var(--text-2); font-weight: 640; }

/* Login panel (public sign-in) */
.login-panel {
  max-width: 460px;
  margin: clamp(24px, 6vw, 56px) auto;
}

.login-panel h1 {
  font-size: clamp(28px, 6vw, 44px);
  margin-bottom: 10px;
}

.login-panel .status { margin-bottom: 16px; }
.login-panel form { margin-top: 20px; }

/* ------------------------------------------------------------------ *
 * 12. MACHINE HOME (QR flow) - hero, identity, warranty, health
 * ------------------------------------------------------------------ */
.machine-home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 5vw, 48px);
  align-items: center;
  padding: clamp(22px, 5vw, 44px);
  margin: 16px 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(48% 60% at 84% 18%, rgba(var(--primary-rgb), 0.16), transparent 70%),
    var(--tile-grad);
  box-shadow: var(--shadow-md);
}

.machine-copy h1 { margin-top: 10px; }

.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.identity-grid div {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.identity-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.identity-grid strong { color: var(--ink); font-size: 15px; }

.quick-actions { margin-top: 18px; }

.machine-stage {
  display: grid;
  place-items: center;
  min-height: 240px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--primary-rgb), 0.16), transparent 62%),
    var(--tile-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.machine-stage img {
  width: min(92%, 480px);
  filter: drop-shadow(0 28px 30px rgba(15, 23, 42, 0.16));
  animation: float-device 4.6s var(--motion) infinite alternate;
}

.live-card { overflow: hidden; }

.warranty-card { overflow: hidden; text-align: center; }

.warranty-ring {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin: 14px auto 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--surface) 54%, transparent 55%),
    conic-gradient(var(--st-success-fg) 0 78%, var(--surface-3) 78% 100%);
}

.warranty-ring span {
  max-width: 96px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 740;
  text-align: center;
  line-height: 1.3;
}

.health-score {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--primary) 8%, var(--surface)));
}

.health-score strong { color: var(--ink); font-size: 52px; line-height: 1; font-weight: 800; }
.health-score span { color: var(--muted); font-weight: 720; }

.health-score.health-green,
.transparency-strip .health-green {
  background: var(--health-green-fill);
  border-color: var(--health-green-line);
}
.health-score.health-amber,
.transparency-strip .health-amber {
  background: var(--health-amber-fill);
  border-color: var(--health-amber-line);
}
.health-score.health-red,
.transparency-strip .health-red {
  background: var(--health-red-fill);
  border-color: var(--health-red-line);
}

.health-green strong { color: var(--health-green-ink); }
.health-amber strong { color: var(--health-amber-ink); }
.health-red strong   { color: var(--health-red-ink); }

/* ------------------------------------------------------------------ *
 * 13. TRACKERS / TIMELINES / ACTIVITY
 * ------------------------------------------------------------------ */
.tracker-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.tracker-hero h3 { font-size: 18px; margin: 8px 0; }

.live-service-premium {
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface));
}

.tracker {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.tracker-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  color: var(--muted);
  font-size: 13px;
  position: relative;
}

.tracker-dot {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  transition: border-color 0.18s var(--motion), background 0.18s var(--motion),
    box-shadow 0.18s var(--motion);
}

/* connective line between steps */
.tracker-step::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 2px;
  height: 100%;
  background: var(--border-strong);
  z-index: 0;
}

.tracker-step:last-child::before { display: none; }

.tracker-step.done { color: var(--text); }
.tracker-step.done .tracker-dot,
.tracker-step.done::before {
  border-color: var(--primary);
  background: var(--primary);
}
.tracker-step.done .tracker-dot { box-shadow: none; }

.tracker-step.current { color: var(--ink); font-weight: 720; }
.tracker-step.current .tracker-dot {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 5px var(--ring-glow);
}

.engineer-card {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.engineer-card img {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.engineer-card > div { min-width: 0; }
.engineer-card p { margin-bottom: 6px; }

/* Generic + passport + premium timelines */
.timeline { position: relative; display: grid; gap: 14px; }

.timeline-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
}

.timeline-pin {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.14);
}

.premium-timeline,
.passport-timeline {
  display: grid;
  gap: 12px;
}

.premium-event,
.passport-event {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tile-grad);
  box-shadow: var(--shadow-xs);
}

.passport-event { animation: page-in 0.36s var(--motion) both; }

.premium-event > span { margin-top: 4px; }

.passport-event > div { min-width: 0; }
.passport-event p { margin-bottom: 4px; }
.passport-event small { display: block; margin-top: 6px; color: var(--muted); }

.activity-feed { display: grid; gap: 12px; }

.activity-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.activity-item > div { min-width: 0; }
.activity-item p { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * 14. TABS
 * ------------------------------------------------------------------ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin: 16px 0;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.tab {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-weight: 680;
  font-size: 14px;
  transition: color 0.16s var(--motion), background 0.16s var(--motion),
    box-shadow 0.16s var(--motion);
}

.tab:hover { color: var(--ink); }

.tab.active {
  color: var(--primary-hover);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* ------------------------------------------------------------------ *
 * 15. TOAST / EMPTY / SKELETON / SEARCH RESULTS
 * ------------------------------------------------------------------ */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  margin: 0 auto;
  max-width: 460px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: #0f172a;
  color: #f8fafc;
  font-weight: 620;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: toast-in 0.24s var(--motion);
}

.empty,
.empty-state {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 28px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  text-align: center;
  background: var(--surface-alt);
}

.empty strong,
.empty-state strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 720;
}

.empty span,
.empty-state span { color: var(--muted); }

/* Skeleton loading */
.skeleton {
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--surface) 70%, #fff), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}

.skeleton-line {
  height: 13px;
  margin: 12px 0;
  border-radius: 999px;
  background: var(--surface-3);
}

.skeleton-line.short  { width: 38%; }
.skeleton-line.medium { width: 62%; }

/* Global search box + results dropdown */
.searchbox {
  min-height: 44px;
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24' stroke='%234b5768' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
}

.nav-actions .searchbox { flex: 1 1 220px; min-width: 0; }
.nav-actions .btn { flex: 1 1 auto; }

.search-results {
  position: static;
  margin: 4px clamp(14px, 4vw, 40px) 8px;
  display: grid;
  gap: 8px;
  z-index: 40;
  box-shadow: var(--shadow-md);
  animation: pop-in 0.18s var(--motion);
}

.search-results:empty { display: none; }

/* ------------------------------------------------------------------ *
 * 16. EXECUTIVE CHART
 * ------------------------------------------------------------------ */
.executive-panel {
  background:
    radial-gradient(60% 60% at 12% 0, rgba(var(--primary-rgb), 0.10), transparent 60%),
    var(--surface);
}

.chart-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 180px;
  padding-top: 16px;
}

.chart-bar {
  display: grid;
  align-content: end;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.chart-bar span {
  display: block;
  width: 100%;
  height: var(--bar);
  min-height: 18px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 62%, #fff 8%), var(--primary));
  box-shadow: 0 14px 26px -12px rgba(var(--primary-rgb), 0.5);
  animation: grow-bar 0.7s var(--motion) both;
}

.chart-bar strong { color: var(--ink); font-size: 20px; font-weight: 780; }
.chart-bar small { color: var(--muted); font-weight: 680; }

/* ------------------------------------------------------------------ *
 * 17. DEALER MASTER / PRIORITIES / OPERATIONS / MOBILE PANEL
 * ------------------------------------------------------------------ */
.dealer-master { overflow: hidden; }

.dealer-master-form {
  margin-bottom: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.dealer-master-form .button-row { margin-top: 14px; }

.dealer-master-list { margin-top: 16px; }

.dealer-master-list .list-item .status { margin-left: 6px; }

.priority-panel {
  background:
    radial-gradient(50% 70% at 100% 0, rgba(var(--accent-rgb), 0.08), transparent 60%),
    var(--surface);
}

.operation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.operation-grid div {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--tile-grad);
}

.operation-grid strong {
  display: block;
  color: var(--ink);
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.operation-grid span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mobile-panel .btn { min-height: 52px; }

/* ------------------------------------------------------------------ *
 * 18. ROUTING BOX / SUMMARY / TRANSPARENCY STRIP
 * ------------------------------------------------------------------ */
.routing-box,
.routing-summary {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.routing-box h3,
.routing-summary h4 { margin-top: 0; }
.routing-summary p { margin: 6px 0; }

.transparency-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tile-grad);
}

.transparency-strip > div {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.transparency-strip strong,
.transparency-strip span { display: block; }

.transparency-strip strong { color: var(--ink); font-size: 22px; font-weight: 780; line-height: 1.1; }

.transparency-strip span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 19. QR + STICKER PREVIEW
 * ------------------------------------------------------------------ */
.qr-card { overflow: hidden; }

.qr-preview,
.qr-mini {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}

.qr-preview {
  place-items: center;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(60% 40% at 50% 0, rgba(var(--primary-rgb), 0.08), transparent 60%),
    var(--surface);
}

.qr-preview img,
.qr-mini img {
  width: auto;
  height: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.qr-mini {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.sticker-preview-shell { display: grid; gap: 18px; }

.sticker-preview {
  max-width: 460px;
  padding: 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-md);
}

.sticker-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sticker-brand span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
}

.sticker-brand strong { color: var(--ink); }
.sticker-brand small { display: block; color: var(--muted); }

.sticker-model {
  margin-top: 16px;
  color: var(--ink);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sticker-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.sticker-row img {
  width: 180px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.sticker-row p { margin: 8px 0 4px; font-weight: 740; color: var(--ink); }
.sticker-row small { color: var(--muted); }

/* ------------------------------------------------------------------ *
 * 20. PHOTO DROP / PREVIEW / UPLOADERS
 * ------------------------------------------------------------------ */
.service-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.photo-drop {
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 14px;
  border: 1.5px dashed var(--field-border);
  border-radius: var(--radius);
  color: var(--text-2);
  background: var(--surface-alt);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.16s var(--motion), background 0.16s var(--motion),
    color 0.16s var(--motion), box-shadow 0.16s var(--motion);
}

.photo-drop:hover {
  border-color: var(--primary);
  color: var(--primary-hover);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.photo-drop:focus-within {
  border-color: var(--primary);
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* keep the file input focusable (keyboard) but visually hidden */
.photo-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.photo-admin-uploader,
.machine-photo-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.machine-photo-panel > img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.photo-preview:empty { display: none; margin: 0; }

.photo-preview div { width: 110px; }

.photo-preview img {
  display: block;
  width: 110px;
  height: 82px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
}

.photo-preview span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 640;
}

.photo-preview.compact { margin-bottom: 0; }

.video-pill {
  display: grid;
  place-items: center;
  width: 110px;
  height: 82px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--primary-hover);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  font-size: 11px;
  font-weight: 720;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 * 21. SPLASH SCREEN
 * ------------------------------------------------------------------ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.28), transparent 18rem),
    linear-gradient(150deg, #04211d, #0b2b33 52%, #08313a);
  animation: splash-exit 1.9s var(--motion) forwards;
}

.splash-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.30);
  filter: blur(38px);
  animation: pulse-glow 1.7s var(--motion) both;
}

.splash-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(45, 212, 191, 0.92), rgba(15, 118, 110, 0.92));
  box-shadow: 0 30px 80px -20px rgba(20, 184, 166, 0.6);
  font-size: 42px;
  font-weight: 850;
  color: #04211d;
  animation: logo-in 0.9s var(--motion) both;
}

.splash-name {
  position: absolute;
  top: calc(50% + 70px);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  animation: fade-up 0.9s 0.22s var(--motion) both;
}

.splash-tagline {
  position: absolute;
  top: calc(50% + 100px);
  color: #99f6e4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: fade-up 0.9s 0.36s var(--motion) both;
}

.splash-line {
  position: absolute;
  top: calc(50% + 128px);
  padding: 0 24px;
  max-width: 30ch;
  color: #cbfbf1;
  font-size: clamp(16px, 2.6vw, 24px);
  font-weight: 620;
  text-align: center;
  animation: fade-up 0.9s 0.56s var(--motion) both;
}

/* ------------------------------------------------------------------ *
 * 22. ACCESSIBILITY
 * ------------------------------------------------------------------ */
/* Visible, high-contrast focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.role-nav-item:focus-visible,
.photo-drop:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* keep the focus ring clear of the primary fill */
.btn.primary:focus-visible { outline-offset: 3px; }

/* inputs already show a soft glow; add the solid ring for AA visibility */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.field-input:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  box-shadow: none;
}

[hidden] { display: none !important; }

/* Respect reduced-motion: kill transitions, animations, smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .machine-stage img { animation: none; }
}

/* Print: hide chrome, flatten surfaces */
@media print {
  .topbar,
  .role-nav,
  .toast,
  .search-results,
  .button-row { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #cbd5e1; }
}

/* ------------------------------------------------------------------ *
 * 23. KEYFRAMES
 * ------------------------------------------------------------------ */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

@keyframes logo-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%   { opacity: 0; transform: scale(0.8); }
  45%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1.12); }
}

@keyframes splash-exit {
  0%, 78% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

@keyframes grow-bar {
  from { transform: scaleY(0.18); transform-origin: bottom; opacity: 0.55; }
  to   { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}

@keyframes float-device {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* ------------------------------------------------------------------ *
 * 24. RESPONSIVE SCALE-UP  (mobile-first -> tablet -> desktop)
 * ------------------------------------------------------------------ */

/* ---- >= 560px : small tiles pair up, buttons stop stretching ---- */
@media (min-width: 560px) {
  .span-3, .span-4 { grid-column: span 6; }

  .button-row .btn,
  .machine-row-actions .btn { flex: 0 1 auto; }

  .complaint-actions .button-row .btn { width: auto; }

  .sticker-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sticker-row img { width: 138px; }
}

/* ---- >= 720px : compact hero splits, nav condenses ---- */
@media (min-width: 720px) {
  .compact-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
  }

  .list-item {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .complaint-actions {
    justify-content: flex-end;
    min-width: 200px;
    flex: 0 0 auto;
  }
  .complaint-actions .button-row { width: auto; justify-content: flex-end; }

  .tracker-hero {
    grid-template-columns: minmax(0, 0.85fr) minmax(260px, 1fr);
  }
}

/* ---- >= 900px : top bar single row, role nav sticky, full hero ---- */
@media (min-width: 900px) {
  .topbar { flex-wrap: nowrap; padding: 10px clamp(20px, 4vw, 42px); }
  .nav-actions { width: auto; flex-wrap: nowrap; }
  .nav-actions .btn { flex: 0 0 auto; }
  .nav-actions .searchbox { flex: 0 1 320px; }

  .role-nav {
    position: sticky;
    top: 63px;
    flex-wrap: nowrap;
  }

  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    padding: 34px 0 20px;
  }

  .machine-home-hero {
    grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.82fr);
    margin-top: 26px;
  }

  .machine-visual { min-height: 300px; }
  .machine-stage { min-height: 360px; }

  /* Machine directory becomes a real table row */
  .machine-row {
    grid-template-columns:
      minmax(190px, 1.3fr) minmax(130px, 0.85fr)
      minmax(130px, 0.85fr) auto;
    align-items: center;
    gap: 14px;
  }
  .machine-row-actions { justify-content: flex-end; }
  .machine-row-actions .btn { flex: 0 0 auto; }

  /* Search results become a floating dropdown under the bar */
  .search-results {
    position: absolute;
    top: 60px;
    right: clamp(20px, 4vw, 42px);
    left: auto;
    margin: 0;
    width: min(440px, calc(100vw - 40px));
  }
}

/* ---- >= 1000px : restore the full 12-column span map ---- */
@media (min-width: 1000px) {
  .span-3  { grid-column: span 3; }
  .span-4  { grid-column: span 4; }
  .span-5  { grid-column: span 5; }
  .span-6  { grid-column: span 6; }
  .span-7  { grid-column: span 7; }
  .span-8  { grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }

  .grid { gap: 18px; }
}

/* ---- >= 1200px : a touch more breathing room ---- */
@media (min-width: 1200px) {
  .page { padding-top: 28px; }
  .hero { padding-top: 40px; }
}

/* ---------- Post-redesign additions ---------- */
/* Screen-reader-only utility (used by the live region + skip link). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Button / link action rows (error page, panels). */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
/* Toast severity variants (base .toast already defined above). */
.toast.toast-error {
  background: #7f1d1d;
  border-color: rgba(255, 255, 255, 0.2);
}
.toast.toast-success {
  background: #14532d;
}
/* Full-page error state. */
.error-panel {
  border-left: 4px solid #dc2626;
}
.error-panel h1 {
  margin-top: 4px;
}
@media (prefers-color-scheme: dark) {
  .toast.toast-error { background: #b91c1c; }
  .toast.toast-success { background: #15803d; }
}

/* =====================================================================
   25. PREMIUM LAYER
   Brand lockup, refined type rhythm, and the components introduced with
   People & Partners. Loaded last so it wins the cascade without needing
   edits threaded through the sections above.
   ===================================================================== */

:root {
  /* A single near-black action colour, taken from the logo. Primary buttons in ink
     rather than brand teal reads far more like enterprise software; teal stays as the
     semantic/medical accent for status, health and activation. */
  --action: #121614;
  --action-hover: #232a27;
  --action-active: #000000;
  --on-action: #ffffff;

  --hairline: rgba(11, 15, 14, 0.08);
  --hairline-strong: rgba(11, 15, 14, 0.14);

  /* Type rhythm: a real scale instead of three widely spaced sizes. */
  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.3125rem;
  --step-3: 1.75rem;
  --step-4: 2.375rem;
  --step-5: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --action: #f4f6f5;
    --action-hover: #e2e6e4;
    --action-active: #ffffff;
    --on-action: #0b0f0e;
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-strong: rgba(255, 255, 255, 0.18);
  }
}
[data-theme="dark"] {
  --action: #f4f6f5;
  --action-hover: #e2e6e4;
  --action-active: #ffffff;
  --on-action: #0b0f0e;
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);
}

/* ---- Brand lockup ------------------------------------------------- */
.brand {
  gap: 0.6rem;
  letter-spacing: -0.022em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0;
  background: none;
  color: var(--ink);
  box-shadow: none;
  font-size: 0;
}
.brand-mark svg,
.brand-mark img { width: 100%; height: auto; display: block; }
.brand-word {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-lockup { display: block; width: min(260px, 60vw); height: auto; }
.brand-lockup-lg { width: min(340px, 74vw); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-lockup { filter: invert(1); }
}
[data-theme="dark"] .brand-lockup { filter: invert(1); }

.brand-tagline {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ---- Typography rhythm -------------------------------------------- */
h1 { font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.08; font-weight: 600; }
h2 { font-size: var(--step-2); letter-spacing: -0.018em; line-height: 1.24; font-weight: 600; }
h3 { font-size: var(--step-1); letter-spacing: -0.012em; font-weight: 600; }
.page h1 { max-width: 20ch; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.subtle { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }

.eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

/* ---- Page head ----------------------------------------------------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0.5rem 0 1.5rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.5rem;
}
.page-head-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- Toolbar / segmented control ----------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.toolbar .search-inline { flex: 1 1 18rem; min-width: 0; }
.toolbar .search-inline input { width: 100%; }

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.segmented-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.16s ease, color 0.16s ease;
}
.segmented-item:hover { color: var(--ink); }
.segmented-item.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.segmented-item .count {
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.4rem;
}

/* ---- Data list / rows ---------------------------------------------- */
.data-list { display: flex; flex-direction: column; }
.data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.data-row:last-child { border-bottom: 0; }
.data-row.is-inactive { opacity: 0.58; }
.data-row-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.data-row-main strong { font-weight: 600; letter-spacing: -0.01em; }
.data-row-main > div { min-width: 0; }
.data-row-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.data-row-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }

@media (min-width: 900px) {
  .data-row {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) auto;
    gap: 1.25rem;
  }
  .data-row-actions { justify-content: flex-end; }
}

.avatar {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0;
}
.avatar-square { border-radius: var(--radius-sm); }

/* ---- Chips ---------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}
.chip + .chip { margin-left: 0.3rem; }
.chip-soft { background: rgba(var(--primary-rgb), 0.10); border-color: transparent; color: var(--primary); }
.chip-accent { background: rgba(var(--primary-rgb), 0.12); border-color: transparent; color: var(--primary-hover); }
.chip-muted { background: transparent; color: var(--muted); }

/* ---- Buttons -------------------------------------------------------- */
.btn.primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
  box-shadow: var(--shadow-xs);
}
.btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn.primary:active { background: var(--action-active); }
.btn-sm { padding: 0.42rem 0.7rem; font-size: var(--step--1); }
.btn-danger { color: #b3261e; border-color: rgba(179, 38, 30, 0.28); }
.btn-danger:hover { background: rgba(179, 38, 30, 0.07); border-color: rgba(179, 38, 30, 0.45); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }

/* ---- Forms ---------------------------------------------------------- */
.stacked-form { margin-top: 0.5rem; }
.field-hint {
  margin: 0.35rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.45;
}
.field-inline-action { display: flex; align-items: flex-end; }

/* ---- Cards: even rhythm, no orphaned heights ------------------------ */
.card { border-color: var(--hairline); }
.grid > .card { align-self: stretch; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

/* ---- Machine photo panel ------------------------------------------- */
.photo-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.photo-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-figure.is-placeholder img { object-fit: contain; padding: 12%; opacity: 0.65; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

/* ---- Utility -------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack-sm > * + * { margin-top: 0.5rem; }
.stack > * + * { margin-top: 1rem; }

/* ---- Detail list (settings, machine facts) --------------------------- */
.detail-list { margin: 0.75rem 0 0; display: grid; gap: 0.55rem; }
.detail-list > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.detail-list dt { color: var(--muted); font-size: var(--step--1); margin: 0; }
.detail-list dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ---- Machine photo panel on the machine page ------------------------- */
.machine-photo-panel { width: 100%; }
.machine-photo-panel .photo-figure { margin: 0; }
.photo-pick { cursor: pointer; }
.photo-pick input { position: absolute; }

/* ---- Landing / login lockups ----------------------------------------- */
.login-panel { max-width: 26rem; margin-inline: auto; text-align: left; }
.login-panel .brand-lockup { width: 190px; margin-bottom: 1.5rem; }
.login-panel h1 { font-size: var(--step-3); margin-bottom: 0.4rem; }

/* ---- Dark-mode surface warmth ---------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segmented-item.is-active { background: rgba(255,255,255,0.08); }
}
[data-theme="dark"] .segmented-item.is-active { background: rgba(255,255,255,0.08); }

/* ---- Final rhythm pass ------------------------------------------------ */
/* Card headings were competing with page titles; bring them into the scale. */
.card h2,
.machine-home-grid .card h2,
.settings-card h3 { font-size: var(--step-1); letter-spacing: -0.012em; }
.card h2 + .subtle { margin-top: 0.15rem; }
.section-head { align-items: flex-start; gap: 1rem; }
.section-head h2 { margin-bottom: 0.1rem; }

/* Even out the machine-home card row so short cards don't leave orphan gaps. */
.machine-home-grid { align-items: start; }
.machine-home-grid .card { display: flex; flex-direction: column; }
.machine-home-grid .card > .empty { margin-top: auto; }

/* Hero: give the machine stage and copy equal optical weight. */
.machine-home-hero { align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.machine-stage { padding: 0; background: none; box-shadow: none; border: 0; }

/* Quieter, more confident status pills. */
.status { font-weight: 600; letter-spacing: 0.005em; }

/* Topbar: hairline instead of a hard rule, and a calmer search field. */
.topbar { border-bottom: 1px solid var(--hairline); backdrop-filter: saturate(1.1) blur(8px); }
.role-nav { border-bottom: 1px solid var(--hairline); }
.searchbox { background: var(--surface-2); border-color: transparent; }
.searchbox:focus { background: var(--surface); border-color: var(--field-border); }

/* Buttons: tighter, more deliberate. */
.btn { font-weight: 600; letter-spacing: -0.005em; border-radius: var(--radius-sm); }
.btn svg { opacity: 0.9; }

/* Metric tiles read as data, not decoration. */
.metric-value { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* =====================================================================
   26. PREMIUM LAYER II
   Quieter navigation, data-first metric tiles, calmer surfaces. The aim
   is the restraint of enterprise software: fewer borders, more space,
   and typography doing the work instead of decoration.
   ===================================================================== */

/* ---- Navigation: underline tabs read as software, pills read as a toy -- */
.role-nav {
  gap: 0;
  padding: 0 clamp(14px, 4vw, 40px);
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--hairline);
}
.role-nav-item {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 550;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  position: relative;
  box-shadow: none;
}
.role-nav-item::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background 0.16s ease;
}
.role-nav-item:hover { background: transparent; color: var(--ink); }
.role-nav-item:hover::after { background: var(--hairline-strong); }
.role-nav-item.is-active,
.role-nav-item[aria-current="page"] { color: var(--ink); font-weight: 650; background: transparent; }
.role-nav-item.is-active::after,
.role-nav-item[aria-current="page"]::after { background: var(--ink); }

/* ---- Top bar: let it breathe ------------------------------------------ */
.topbar { background: var(--surface); }
.topbar .btn {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
  box-shadow: none;
}
.topbar .btn:hover { background: var(--surface-2); color: var(--ink); }
.searchbox { min-width: min(340px, 40vw); }

/* ---- Metric tiles: data, not decoration -------------------------------- */
.metric {
  min-height: 0;
  display: block;
  padding: 1.15rem 1.25rem 1.25rem;
}
.metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.metric-value {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 0.4rem;
}
.metric-context {
  margin-top: 0.3rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.metric-icon { display: none; }

/* ---- Identity card ------------------------------------------------------ */
.identity-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  align-self: start;
}
.identity-card strong { display: block; letter-spacing: -0.01em; }
.identity-card .avatar { width: 2.6rem; height: 2.6rem; font-size: var(--step-0); }

/* ---- Hero: less shouty, better measure ---------------------------------- */
.hero { gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.hero h1 { margin-bottom: 0.5rem; }
.compact-hero h1 { font-size: var(--step-3); }

/* ---- Cards: fewer hard edges -------------------------------------------- */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card:hover { box-shadow: var(--shadow-xs); }
.section-head { padding-bottom: 0.75rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1rem; }
.section-head:last-child { border-bottom: 0; margin-bottom: 0; }

/* ---- Empty states: quieter ---------------------------------------------- */
.empty {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  background: transparent;
  padding: 2rem 1.25rem;
  text-align: center;
}
.empty strong { display: block; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.empty span { color: var(--muted); font-size: var(--step--1); }

/* ---- Lists ---------------------------------------------------------------- */
.list-item { border-radius: var(--radius); border-color: var(--hairline); }
.machine-row { border-color: var(--hairline); }
.machine-row:hover { background: var(--surface-alt); }

/* ---- Login: centred, generous ------------------------------------------- */
.login-panel { padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: var(--shadow-md); }

/* ---- Focus: visible but refined ------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Motion: subtle, and honoured off ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .card, .btn, .role-nav-item, .segmented-item { transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease; }
}

/* Metrics get their own row so five tiles distribute evenly instead of
   leaving an orphan on a second line of the 12-column grid. */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(14px, 2vw, 22px);
}

/* ---------------------------------------------------------------------------
   27. GETTING BACK IN
   Sign-in guidance, expired-session notice, and the single-administrator
   warning. All three exist because one locked-out admin had no way forward.
   --------------------------------------------------------------------------- */

.signin-notice {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--action);
  border-radius: 8px;
  background: var(--surface-2, #f2f3f3);
  color: var(--ink);
  font-size: var(--step--1);
}

.signin-help {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  font-size: var(--step--1);
}

.signin-help > summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
  padding: 0.2rem 0;
}

.signin-help > summary::-webkit-details-marker { display: none; }
.signin-help > summary::before { content: "› "; display: inline-block; transition: transform 0.15s ease; }
.signin-help[open] > summary::before { content: "⌄ "; }
.signin-help > summary:hover { color: var(--ink); }
.signin-help p { margin: 0.6rem 0; color: var(--muted); line-height: 1.55; }
.signin-help strong,
.signin-help em { color: var(--ink); font-style: normal; }
.signin-help code {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  background: var(--surface-2, #f2f3f3);
  border: 1px solid var(--line);
  font-size: 0.92em;
  word-break: break-all;
}

.solo-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--action);
  border-radius: 10px;
  background: var(--surface-2, #f2f3f3);
  font-size: var(--step--1);
}

.solo-admin strong { color: var(--ink); }
.solo-admin span { color: var(--muted); flex: 1 1 22rem; line-height: 1.5; }
.solo-admin .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  .solo-admin { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   28. PRODUCT LIBRARY
   Manuals and demo videos on Machine Home. A document nobody can open is not a
   document, so these are links and players rather than labels.
   --------------------------------------------------------------------------- */

.doc-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: inherit; }
.doc-item .subtle { display: block; font-size: var(--step--1); }
a.doc-item:hover { border-color: var(--action); }

.doc-video { display: block; }
.doc-video > strong { display: block; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.row-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

@media (max-width: 640px) {
  .doc-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .row-actions { width: 100%; }
}

/* 29. Approvals ---------------------------------------------------------- */
/* Warranty activations and passport access requests. Each row has to carry enough
   detail for an admin to decide without opening anything else, so the left column
   is a stack of lines rather than a single title. */
.approval-row { align-items: flex-start; gap: 1rem; }
.approval-row > div:first-child { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.approval-row .subtle { overflow-wrap: anywhere; }
.approval-account {
  margin-top: 0.35rem;
  padding: 0.45rem 0.6rem;
  border-left: 3px solid var(--accent, #0f766e);
  background: var(--surface-2, rgba(15, 118, 110, 0.06));
  border-radius: 0 6px 6px 0;
}

@media (max-width: 640px) {
  .approval-row { flex-direction: column; }
  .approval-row .row-actions { width: 100%; }
  .approval-row .row-actions .btn { flex: 1; }
}