/* ===========================================================================
   Megavolt RS — stylesheet
   Palette: deep electric blue brand, warm amber for primary actions,
   slate ink on a soft off-white canvas. Monospace ticket tags.
   =========================================================================== */
:root {
  /* Brand — electric blue, brightened to pop on dark surfaces */
  --brand: #3b9eff;        /* primary brand / accents on dark */
  --brand-700: #2b7fd4;
  --brand-300: #6fbcff;
  --brand-btn: #1b63b0;    /* darker brand for buttons with white text */
  --brand-glow: rgba(59,158,255,.16);
  --accent: #f5a623;       /* amber — primary action buttons */
  --accent-600: #ffb53d;

  /* Text */
  --ink: #e8edf4;          /* primary text */
  --muted: #93a1b5;        /* secondary text */

  /* Surfaces — layered dark grays */
  --canvas: #14171c;       /* app background */
  --surface: #1c2127;      /* cards, panels */
  --surface-2: #242a32;    /* insets, hovers, headers */
  --surface-3: #2c333c;    /* raised chips */
  --line: #2e353f;         /* hairline borders */
  --line-strong: #3b434f;  /* stronger borders / inputs */

  /* Status palette — saturated foreground + translucent fill */
  --ok: #34d27b;       --ok-bg: rgba(52,210,123,.14);
  --warn: #f0b429;     --warn-bg: rgba(240,180,41,.14);
  --info: #4aa3ff;     --info-bg: rgba(74,163,255,.14);
  --purple: #b388ff;   --purple-bg: rgba(179,136,255,.16);
  --danger: #ff6b5e;   --danger-bg: rgba(255,107,94,.14);
  --orange: #ff9d4d;   --orange-bg: rgba(255,157,77,.15);
  --teal: #2dd4bf;     --teal-bg: rgba(45,212,191,.14);
  --slate-bg: rgba(147,161,181,.14); --slate-fg: #aab6c7;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 32px rgba(0,0,0,.30);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55);

  /* Glassmorphism — translucent frosted surfaces. Kept opaque enough that
     text stays AA-legible (per a11y guidance), with a visible border so the
     pane reads as a distinct layer in every theme. */
  --glass: rgba(28, 33, 40, 0.84);        /* cards/panels */
  --glass-2: rgba(44, 52, 63, 0.80);      /* insets, headers, hovers */
  --glass-strong: rgba(22, 27, 33, 0.93); /* modals/sidebar — higher opacity */
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-edge: rgba(255, 255, 255, 0.20);
  --glass-blur: 18px;
  --glass-blur-strong: 26px;
  --glass-highlight: rgba(255, 255, 255, 0.09);
  /* Ambient backdrop: soft brand-tinted blobs over the canvas so the frosted
     blur has depth/colour to refract. */
  --app-bg:
    radial-gradient(900px 600px at 12% -5%, rgba(59,158,255,.24), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(245,166,35,.14), transparent 55%),
    radial-gradient(700px 700px at 80% 110%, rgba(45,212,191,.15), transparent 60%),
    var(--canvas);
  --paths-stroke: rgba(255,255,255,0.55);

  --sidebar-w: 232px;
  --sidebar-rail: 72px;
  --topbar-h: 64px;
  --topbar-h-mobile: 108px;
  --sidebar-bg: linear-gradient(180deg, #1a1f26 0%, #15191f 100%);
  --sidebar-ink: #ffffff;
  --sidebar-muted: #aab6c7;
  --sidebar-line: rgba(255,255,255,.10);
  --sidebar-hover: rgba(255,255,255,.05);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ============================ THEMES ============================ */
/* :root above is the default DARK theme. Each block below overrides the
   palette. Every theme keeps text strongly contrasted against surfaces. */

/* ---- LIGHT ---- clean white/grey, near-black text ---- */
[data-theme="light"] {
  --brand: #1b63b0; --brand-700: #14528f; --brand-300: #2b7fd4;
  --brand-btn: #1b63b0; --brand-glow: rgba(27,99,176,.12);
  --accent: #e07b00; --accent-600: #c96d00;

  --ink: #14181f;          /* near-black primary text */
  --muted: #2f3945;        /* dark slate — high-contrast secondary text (was #54606f) */

  --canvas: #eef1f5;       /* app background */
  --surface: #ffffff;      /* cards */
  --surface-2: #f1f4f8;    /* insets/headers */
  --surface-3: #e7ecf2;    /* chips */
  --line: #d9e0e8;
  --line-strong: #c2ccd8;

  --ok: #16924d;       --ok-bg: rgba(22,146,77,.12);
  --warn: #9a6a00;     --warn-bg: rgba(224,150,0,.16);
  --info: #1b63b0;     --info-bg: rgba(27,99,176,.12);
  --purple: #6f42c1;   --purple-bg: rgba(111,66,193,.12);
  --danger: #c62828;   --danger-bg: rgba(198,40,40,.12);
  --orange: #c05600;   --orange-bg: rgba(192,86,0,.13);
  --teal: #0f766e;     --teal-bg: rgba(15,118,110,.12);
  --slate-bg: rgba(84,96,111,.12); --slate-fg: #54606f;

  --shadow: 0 1px 2px rgba(20,30,50,.08), 0 4px 16px rgba(20,30,50,.08);
  --shadow-lg: 0 16px 48px rgba(20,30,50,.18);

  --glass: rgba(255, 255, 255, 0.82);
  --glass-2: rgba(243, 246, 250, 0.85);
  --glass-strong: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-blur: 18px;
  --glass-blur-strong: 26px;
  --glass-highlight: rgba(255, 255, 255, 0.6);
  --app-bg:
    radial-gradient(900px 600px at 10% -8%, rgba(27,99,176,.14), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(224,123,0,.10), transparent 55%),
    radial-gradient(700px 700px at 85% 110%, rgba(15,118,110,.08), transparent 60%),
    var(--canvas);
  --paths-stroke: rgba(15,23,42,0.45);

  --sidebar-bg: linear-gradient(180deg, #1f2a37 0%, #18222e 100%);
  --sidebar-ink: #ffffff;
  --sidebar-muted: #b4c0cf;
  --sidebar-line: rgba(255,255,255,.10);
  --sidebar-hover: rgba(255,255,255,.06);

}

/* ---- LIGHT THEME: guarantee readable contrast everywhere for the front desk ----
   The light theme is used at reception, so no text is allowed to wash out. These
   rules darken the usually-faded bits (placeholders, hints, disabled controls,
   low-opacity labels) so everything stays clearly legible on white. */
[data-theme="light"] .input::placeholder,
[data-theme="light"] .textarea::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #495563 !important; opacity: 1; }

[data-theme="light"] .field .hint,
[data-theme="light"] .page-head .sub,
[data-theme="light"] .stat .label,
[data-theme="light"] .cr-when,
[data-theme="light"] .cr-sub,
[data-theme="light"] .jc-meta,
[data-theme="light"] .li-table th,
[data-theme="light"] .dl dt { color: #33404e; }

/* Disabled buttons/controls: keep the text dark enough to read (was opacity .45). */
[data-theme="light"] .btn[disabled],
[data-theme="light"] button[disabled] { opacity: .7; }
[data-theme="light"] .btn[disabled] { color: #3a4653; }

/* The little "optional" / tag pills and muted combo hints. */
[data-theme="light"] .tag,
[data-theme="light"] .opt-tag,
[data-theme="light"] .field-tag { color: #2f3945; }
[data-theme="light"] .combo-opt.muted { color: #4a5563; }

/* Nav icons and other muted-coloured chrome stay crisp. */
[data-theme="light"] .nav-item:not(.active) { color: #2f3945; }
[data-theme="light"] .seg button:not(.active) { color: #3a4653; }

/* Inactive/disabled fields on booking (e.g. technician "set later") shouldn't
   fade their text into illegibility — dim the field frame only, keep text dark. */
[data-theme="light"] .disabled-field { opacity: 1; }
[data-theme="light"] .disabled-field .input,
[data-theme="light"] .disabled-field .combo input,
[data-theme="light"] .disabled-field input,
[data-theme="light"] .disabled-field .cs-trigger {
  background: var(--surface-2); color: #33404e;
  border-color: var(--line);
}
[data-theme="light"] .disabled-field .input::placeholder,
[data-theme="light"] .disabled-field input::placeholder { color: #5a6674 !important; }
[data-theme="light"] .model-pill { opacity: 1 !important; }
[data-theme="light"] .model-pill:not(.match) { color: #4a5563; }

/* ---- OCEAN ---- deep teal-navy, bright cyan accents ---- */
[data-theme="ocean"] {
  --brand: #2bd4c4; --brand-700: #1ba99c; --brand-300: #5ee9db;
  --brand-btn: #128577; --brand-glow: rgba(43,212,196,.16);
  --accent: #ffc24b; --accent-600: #ffd067;

  --ink: #eafbf8;          /* bright near-white text */
  --muted: #8fb6b8;

  --canvas: #0a1a22;       /* deep ocean background */
  --surface: #0f2630;
  --surface-2: #143240;
  --surface-3: #1b4150;
  --line: #1d3d49;
  --line-strong: #2a5260;

  --ok: #3ee08f;       --ok-bg: rgba(62,224,143,.15);
  --warn: #ffc24b;     --warn-bg: rgba(255,194,75,.16);
  --info: #4fd1e6;     --info-bg: rgba(79,209,230,.16);
  --purple: #b79dff;   --purple-bg: rgba(183,157,255,.18);
  --danger: #ff7a6b;   --danger-bg: rgba(255,122,107,.15);
  --orange: #ffac5e;   --orange-bg: rgba(255,172,94,.16);
  --teal: #2dd4bf;     --teal-bg: rgba(45,212,191,.16);
  --slate-bg: rgba(143,182,184,.15); --slate-fg: #a7cccd;

  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);

  --glass: rgba(15, 38, 48, 0.84);
  --glass-2: rgba(22, 55, 70, 0.80);
  --glass-strong: rgba(7, 18, 25, 0.93);
  --glass-border: rgba(94, 233, 219, 0.18);
  --glass-edge: rgba(160, 255, 244, 0.18);
  --glass-blur: 18px;
  --glass-blur-strong: 26px;
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --app-bg:
    radial-gradient(900px 600px at 12% -5%, rgba(43,212,196,.20), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(255,194,75,.10), transparent 55%),
    radial-gradient(700px 700px at 80% 110%, rgba(79,209,230,.12), transparent 60%),
    var(--canvas);
  --paths-stroke: rgba(94,233,219,0.5);

  --sidebar-bg: linear-gradient(180deg, #071219 0%, #050e13 100%);
  --sidebar-ink: #eafbf8;
  --sidebar-muted: #8fb6b8;
  --sidebar-line: rgba(255,255,255,.08);
  --sidebar-hover: rgba(255,255,255,.05);

}

/* ---- SAND ---- warm cream/beige, deep brown text, terracotta accent ---- */
[data-theme="sand"] {
  --brand: #b5562a; --brand-700: #97461f; --brand-300: #cc6b3e;
  --brand-btn: #a8491f; --brand-glow: rgba(181,86,42,.12);
  --accent: #2f7d6b; --accent-600: #28695a;

  --ink: #2b2018;          /* deep brown-black text */
  --muted: #6b5a4a;

  --canvas: #efe6da;       /* warm sand background */
  --surface: #faf4ec;
  --surface-2: #f1e7d9;
  --surface-3: #e8dccb;
  --line: #ddcdb8;
  --line-strong: #c9b59c;

  --ok: #2f7d4f;       --ok-bg: rgba(47,125,79,.12);
  --warn: #9a6a00;     --warn-bg: rgba(154,106,0,.14);
  --info: #b5562a;     --info-bg: rgba(181,86,42,.12);
  --purple: #7a4ea8;   --purple-bg: rgba(122,78,168,.12);
  --danger: #bb3a2c;   --danger-bg: rgba(187,58,44,.12);
  --orange: #b5562a;   --orange-bg: rgba(181,86,42,.13);
  --teal: #2f7d6b;     --teal-bg: rgba(47,125,107,.12);
  --slate-bg: rgba(107,90,74,.12); --slate-fg: #6b5a4a;

  --shadow: 0 1px 2px rgba(80,55,30,.1), 0 4px 16px rgba(80,55,30,.1);
  --shadow-lg: 0 16px 48px rgba(80,55,30,.2);

  --glass: rgba(250, 244, 236, 0.85);
  --glass-2: rgba(243, 234, 221, 0.86);
  --glass-strong: rgba(250, 244, 236, 0.95);
  --glass-border: rgba(255, 255, 255, 0.60);
  --glass-edge: rgba(255, 255, 255, 0.90);
  --glass-blur: 18px;
  --glass-blur-strong: 26px;
  --glass-highlight: rgba(255, 255, 255, 0.5);
  --app-bg:
    radial-gradient(900px 600px at 10% -8%, rgba(181,86,42,.16), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(47,125,107,.10), transparent 55%),
    radial-gradient(700px 700px at 85% 110%, rgba(154,106,0,.08), transparent 60%),
    var(--canvas);
  --paths-stroke: rgba(80,55,30,0.40);

  --sidebar-bg: linear-gradient(180deg, #3a2c20 0%, #2b2018 100%);
  --sidebar-ink: #faf4ec;
  --sidebar-muted: #d3c2ad;
  --sidebar-line: rgba(255,255,255,.10);
  --sidebar-hover: rgba(255,255,255,.06);

}

/* ---- HIGH CONTRAST ---- accessibility theme (WCAG AAA target) ----
   Pure white background, pure black text, thick black outlines on everything.
   Built for low-vision users: nothing translucent, nothing faded, every element
   framed so it clearly stands out. Colour is used sparingly and always at maximum
   contrast against white. */
[data-theme="contrast"] {
  --brand: #0033aa; --brand-700: #002277; --brand-300: #0033aa;
  --brand-btn: #0033aa; --brand-glow: rgba(0,51,170,.25);
  --accent: #8a2b00; --accent-600: #6e2200;

  --ink: #000000;          /* pure black text */
  --muted: #1a1a1a;        /* still near-black — no faded secondary text */

  --canvas: #ffffff;       /* pure white app background */
  --surface: #ffffff;      /* white cards */
  --surface-2: #ffffff;    /* white insets — separation comes from borders */
  --surface-3: #f0f0f0;    /* very light grey chips */
  --line: #000000;         /* black hairlines */
  --line-strong: #000000;  /* black input borders */

  /* Status colours: darkened to stay legible as text on white, each ≥7:1. */
  --ok: #006622;       --ok-bg: #d7f0dd;
  --warn: #7a4d00;     --warn-bg: #f7e8c8;
  --info: #0033aa;     --info-bg: #d6e0f7;
  --purple: #5a1a9e;   --purple-bg: #e6d6f7;
  --danger: #a30000;   --danger-bg: #f7d6d6;
  --orange: #8a2b00;   --orange-bg: #f7dfcf;
  --teal: #005c50;     --teal-bg: #cfeeea;
  --slate-bg: #e4e4e4; --slate-fg: #000000;

  --shadow: 0 0 0 1px #000;
  --shadow-lg: 0 0 0 2px #000, 0 8px 24px rgba(0,0,0,.35);

  /* No translucency — every "glass" surface becomes solid white with a black
     border so panels read as distinct, hard-edged blocks. */
  --glass: #ffffff;
  --glass-2: #ffffff;
  --glass-strong: #ffffff;
  --glass-border: #000000;
  --glass-edge: #000000;
  --glass-blur: 0px;
  --glass-blur-strong: 0px;
  --glass-highlight: transparent;
  --app-bg: #ffffff;       /* flat white — no ambient gradient blobs */
  --paths-stroke: rgba(0,0,0,0.85);

  --sidebar-bg: #ffffff;
  --sidebar-ink: #000000;
  --sidebar-muted: #000000;
  --sidebar-line: #000000;
  --sidebar-hover: #d6e0f7;

  --radius: 8px;           /* tighter corners read as crisper/harder edges */
  --radius-sm: 6px;
}

/* === HIGH CONTRAST — structural overrides ===
   These force strong black outlines and remove every soft/faded effect so the
   whole interface is legible for low-vision users. */

/* Kill all frosted blur (it lowers contrast). */
[data-theme="contrast"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Flat white background, no animated constellation behind the UI. */
[data-theme="contrast"] body { background: #fff !important; }
[data-theme="contrast"] #bgCanvas { display: none !important; }

/* Every panel, card, modal, input, button, chip, table and nav item gets a
   solid black border so it stands out as its own block on white.
   NOTE: .combo is a positioned WRAPPER around an inner .input — we border the
   inner input only (below), never the wrapper, otherwise fields show a doubled
   border. Same for custom-select wrappers. */
[data-theme="contrast"] .card,
[data-theme="contrast"] .panel,
[data-theme="contrast"] .glass,
[data-theme="contrast"] .modal,
[data-theme="contrast"] .stat,
[data-theme="contrast"] .board-col,
[data-theme="contrast"] .board-card,
[data-theme="contrast"] .cr,
[data-theme="contrast"] .jc,
[data-theme="contrast"] .tag,
[data-theme="contrast"] .pill,
[data-theme="contrast"] .badge,
[data-theme="contrast"] .chip,
[data-theme="contrast"] .seg,
[data-theme="contrast"] .cs-trigger,
[data-theme="contrast"] .input,
[data-theme="contrast"] .textarea,
[data-theme="contrast"] input,
[data-theme="contrast"] textarea,
[data-theme="contrast"] select,
[data-theme="contrast"] .toast,
[data-theme="contrast"] table.tbl,
[data-theme="contrast"] table.tbl th,
[data-theme="contrast"] table.tbl td {
  border: 2px solid #000 !important;
}

/* Combos/custom-selects are WRAPPERS around an inner control. Only the inner
   control is bordered (above) — the wrapper stays borderless and transparent so
   there is exactly ONE clean rounded box, never a second frame poking past the
   corners. overflow is left visible so the dropdown list can extend below. */
[data-theme="contrast"] .combo,
[data-theme="contrast"] .custom-select,
[data-theme="contrast"] .rand-input {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}

/* Modal: strong 3px frame + black header/footer dividers so it clearly sits
   above the page instead of blending into it at the edges. */
[data-theme="contrast"] .modal { border: 3px solid #000 !important; }
[data-theme="contrast"] .modal-head { border-bottom: 2px solid #000 !important; background: #fff !important; }
[data-theme="contrast"] .modal-foot { border-top: 2px solid #000 !important; }
[data-theme="contrast"] .modal-overlay { background: rgba(0,0,0,.55) !important; }

/* Quoted-amount R-prefix: dark box that joins the input as one bordered unit. */
[data-theme="contrast"] .rand-input .prefix {
  background: #f0f0f0 !important; color: #000 !important;
  border: 2px solid #000 !important; border-right: 0 !important;
}
[data-theme="contrast"] .rand-input .input { border-left: 0 !important; }

/* Inputs: white fill, black text, black border — thick focus ring. */
[data-theme="contrast"] .input,
[data-theme="contrast"] .textarea,
[data-theme="contrast"] input,
[data-theme="contrast"] textarea,
[data-theme="contrast"] select,
[data-theme="contrast"] .cs-trigger,
[data-theme="contrast"] .combo input {
  background: #fff !important; color: #000 !important;
}
[data-theme="contrast"] .input:focus,
[data-theme="contrast"] .textarea:focus,
[data-theme="contrast"] input:focus,
[data-theme="contrast"] textarea:focus,
[data-theme="contrast"] select:focus,
[data-theme="contrast"] .cs-trigger:focus,
[data-theme="contrast"] .combo input:focus,
[data-theme="contrast"] a:focus,
[data-theme="contrast"] button:focus,
[data-theme="contrast"] [tabindex]:focus {
  outline: 3px solid #0033aa !important; outline-offset: 2px !important;
}

/* Placeholders visible but clearly secondary. */
[data-theme="contrast"] input::placeholder,
[data-theme="contrast"] textarea::placeholder,
[data-theme="contrast"] .input::placeholder { color: #444 !important; opacity: 1 !important; }

/* All text pure black; never fade anything below full legibility. */
[data-theme="contrast"] body,
[data-theme="contrast"] .muted,
[data-theme="contrast"] .hint,
[data-theme="contrast"] .sub,
[data-theme="contrast"] .label,
[data-theme="contrast"] .cr-when,
[data-theme="contrast"] .cr-sub,
[data-theme="contrast"] .jc-meta,
[data-theme="contrast"] .dl dt,
[data-theme="contrast"] th,
[data-theme="contrast"] .field .hint,
[data-theme="contrast"] .combo-opt.muted { color: #000 !important; }

/* Nothing is allowed to sit at reduced opacity (disabled items included). */
[data-theme="contrast"] [disabled],
[data-theme="contrast"] .btn[disabled],
[data-theme="contrast"] button[disabled],
[data-theme="contrast"] .disabled-field { opacity: 1 !important; }
[data-theme="contrast"] .btn[disabled],
[data-theme="contrast"] button[disabled] {
  color: #000 !important; background: #e4e4e4 !important; border: 2px solid #000 !important;
}

/* Buttons: solid, bordered, high-contrast. Primary/brand actions use a very
   dark blue with white text; secondary buttons are white with black text. */
[data-theme="contrast"] .btn { border: 2px solid #000 !important; font-weight: 700 !important; }
[data-theme="contrast"] .btn-brand,
[data-theme="contrast"] .btn-primary {
  background: #0033aa !important; color: #fff !important; border-color: #000 !important;
}
[data-theme="contrast"] .btn-danger { background: #a30000 !important; color: #fff !important; }
[data-theme="contrast"] .btn:not(.btn-brand):not(.btn-primary):not(.btn-danger) {
  background: #fff !important; color: #000 !important;
}

/* Sidebar / nav: white with black text and a black divider; active item is a
   solid dark-blue block with white text so the current page is unmistakable. */
[data-theme="contrast"] .sidebar,
[data-theme="contrast"] .topbar { background: #fff !important; border-color: #000 !important; }
[data-theme="contrast"] .sidebar { border-right: 3px solid #000 !important; }
[data-theme="contrast"] .topbar { border-bottom: 3px solid #000 !important; }
[data-theme="contrast"] .nav-item { color: #000 !important; }
[data-theme="contrast"] .nav-item.active {
  background: #0033aa !important; color: #fff !important; border: 2px solid #000 !important;
}
[data-theme="contrast"] .nav-item:not(.active):hover { background: #d6e0f7 !important; }

/* Status/segment chips and their colours become dark text on light tint with a
   black border, so each status is both colour- and shape-distinct. */
[data-theme="contrast"] .seg button.active {
  background: #0033aa !important; color: #fff !important;
}
[data-theme="contrast"] .badge,
[data-theme="contrast"] .pill,
[data-theme="contrast"] .tag,
[data-theme="contrast"] .chip { font-weight: 700 !important; }

/* Tables: black gridlines, bold black header text on light grey. */
[data-theme="contrast"] table.tbl { border-collapse: collapse !important; }
[data-theme="contrast"] table.tbl th { background: #f0f0f0 !important; color: #000 !important; font-weight: 800 !important; }
[data-theme="contrast"] table.tbl tbody tr:hover { background: #d6e0f7 !important; }

/* Dividers/hairlines become solid black. */
[data-theme="contrast"] .divider,
[data-theme="contrast"] hr { border-color: #000 !important; background: #000 !important; }

/* Links: dark blue, always underlined for non-colour cue. */
[data-theme="contrast"] a { color: #0033aa !important; text-decoration: underline !important; }

/* Toasts already have solid fills + white text; keep their thick black frame. */
[data-theme="contrast"] .toast { color: #fff !important; }
[data-theme="contrast"] .toast:not(.ok):not(.err) { background: #000 !important; color: #fff !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--app-bg) fixed;
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--brand); }
/* Tabular figures for money/number columns so digits don't jitter. */
.money, .num, .li-total, .amt-value, .rs-val, .ts-income { font-variant-numeric: tabular-nums; }
/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* Visible focus ring on interactive elements (accessibility). */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- App shell ---------- */
#app { display: block; min-height: 100vh; }

/* ---------- Top navigation bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  background-color: var(--glass-strong);
  background-image: linear-gradient(180deg, var(--glass-highlight), transparent 70%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 24px rgba(0,0,0,.18);
  min-height: var(--topbar-h);
}
.topbar-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--topbar-h); padding: 6px 20px; max-width: 1600px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 38px; height: 32px; display: grid; place-items: center; flex-shrink: 0; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; white-space: nowrap; }
.brand-name { font-weight: 750; font-size: 17px; color: var(--ink); letter-spacing: -.3px; }
.brand-sub { font-size: 9px; text-transform: uppercase; letter-spacing: 3px; color: var(--brand-300); margin-top: 1px; }

/* The nav is a centered rounded pill of icon tabs. */
.nav {
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto; padding: 5px;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  border-radius: 999px; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
  max-width: 100%; overflow-x: auto; overflow-y: visible;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 0;
  height: 40px; padding: 0; width: 40px; flex-shrink: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: visible;
  cursor: pointer;
  transition: width .42s cubic-bezier(.25,.1,.25,1), background .2s ease, color .2s ease, padding .42s cubic-bezier(.25,.1,.25,1);
}
.nav-item:hover { background: var(--glass); color: var(--ink); }
/* Minimal monochrome icon — inherits text colour (currentColor), no fill. */
.nav-ic { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; color: inherit; }
.nav-ic svg { width: 20px; height: 20px; display: block; }
/* The inline label only shows on the ACTIVE tab (which expands). Hover uses a
   tooltip instead, so hovering never changes widths or shifts the row. */
.nav-label {
  opacity: 0; max-width: 0; overflow: hidden;
  transition: opacity .3s ease, max-width .42s cubic-bezier(.25,.1,.25,1);
}
/* Hover tooltip — floats below the icon, doesn't affect layout. */
.nav-item:not(.active)::after {
  content: attr(data-label);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px);
  background: var(--glass-strong); color: var(--ink);
  border: 1px solid var(--glass-border); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow); pointer-events: none;
  opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 50;
}
.nav-item:not(.active):hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Active tab expands to a pill showing its name (nav-state-active + nav-label-icon). */
.nav-item.active {
  width: auto; padding-right: 16px;
  background: var(--brand); color: #fff;
}
.nav-item.active .nav-ic { color: #fff; }
.nav-item.active .nav-label { opacity: 1; max-width: 180px; }
/* "Show labels" mode: each tab shows its name UNDER the icon (icon-over-text),
   keeping the whole nav on ONE row. This grows the bar by a small, fixed amount
   instead of wrapping into multiple rows that cover the screen. */
body.nav-labels .nav { padding: 6px 6px; gap: 2px; border-radius: 18px; align-items: stretch; }
body.nav-labels .nav-item {
  flex-direction: column; justify-content: flex-start; gap: 3px;
  width: auto; min-width: 58px; max-width: 92px; height: auto;
  padding: 7px 8px 6px; border-radius: 14px;
}
body.nav-labels .nav-item .nav-ic { width: 24px; height: 24px; }
body.nav-labels .nav-item .nav-ic svg { width: 19px; height: 19px; }
body.nav-labels .nav-item .nav-label {
  opacity: 1; max-width: none; margin: 0; line-height: 1.15;
  font-size: 10.5px; font-weight: 600; text-align: center;
  white-space: normal; word-break: break-word;
}
body.nav-labels .nav-item:not(.active)::after { display: none; } /* tooltip redundant when labels show */
/* Active tab keeps the brand fill but also stacks, matching the others. */
body.nav-labels .nav-item.active { flex-direction: column; padding: 7px 8px 6px; width: auto; }
body.nav-labels .nav-item.active .nav-label { max-width: none; }
.topbar { transition: min-height .32s cubic-bezier(.25,.1,.25,1); }
/* Keyboard focus ring (accessibility). */
.nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Nav-label toggle button in the topbar — matches the other topbar controls. */
.nav-labels-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 11px; flex-shrink: 0;
  border: 1px solid var(--glass-border); background: var(--glass-2); color: var(--muted);
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  font-size: 13px; font-weight: 600; letter-spacing: -.1px;
}
.nav-labels-text { line-height: 1; }
.nav-labels-toggle:hover { color: var(--ink); border-color: var(--brand-300); background: var(--glass); }
.nav-labels-toggle.on { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 2px 10px var(--brand-glow); }
.nav-labels-toggle svg { width: 18px; height: 18px; }

.topbar-foot { flex-shrink: 0; font-size: 10.5px; color: var(--muted); white-space: nowrap; text-align: right; line-height: 1.3; }
.topbar-foot code { color: var(--brand-300); font-family: var(--mono); }

.main {
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 24px) 32px 64px;
  width: auto; max-width: 1600px;
}

/* ---------- Page header ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.4px; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: var(--radius-sm); min-height: 40px;
  border: 1px solid var(--glass-border); background: var(--glass-2); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
  touch-action: manipulation;
}
.btn:hover { border-color: var(--brand-300); background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 14px rgba(0,0,0,.18); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #3a2602; box-shadow: none; }
.btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn-brand { background: var(--brand-btn); border-color: var(--brand-btn); color: #fff; box-shadow: none; }
.btn-brand:hover { background: #17579c; border-color: #17579c; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--brand); padding: 8px 11px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-ghost:hover { background: var(--glass-2); }
.btn-danger { color: var(--danger); border-color: var(--glass-border); background: var(--glass-2); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-sm { padding: 6px 11px; font-size: 13px; min-height: 32px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Specular top edge — light catching the glass — plus a soft drop shadow. */
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
  position: relative;
}
/* Translucent surface + subtle top highlight (no backdrop blur — kept solid
   enough to stay legible and flicker-free over the animated background). */
.card {
  background: var(--glass); border-color: var(--glass-border);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  /* Diagonal sheen sweeping across the pane, like light on glass. */
  background: linear-gradient(128deg, var(--glass-highlight) 0%, transparent 42%, transparent 78%, var(--glass-highlight) 100%);
  opacity: .85;
}
.card-pad { padding: 20px; }
.card + .card { margin-top: 18px; }
.section-title {
  display: flex; align-items: center; gap: 11px;
  font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 14px;
  letter-spacing: -.2px;
}
/* The .ic span becomes a slim vertical accent bar instead of an emoji */
.section-title .ic {
  font-size: 0; width: 4px; height: 17px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-300), var(--brand)); flex-shrink: 0;
}

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat {
  display: flex; align-items: center; gap: 12px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: 12px 14px; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
  position: relative; overflow: hidden;
}
.stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-300); }
.stat.s-open::after { background: var(--info); }
.stat.s-ready::after { background: var(--purple); }
.stat.s-parts::after { background: var(--warn); }
.stat.s-cust::after { background: var(--ok); }
.stat .value { font-size: 24px; font-weight: 750; letter-spacing: -.5px; line-height: 1; min-width: 30px; }
.stat.s-open .value { color: var(--info); }
.stat.s-ready .value { color: var(--purple); }
.stat.s-parts .value { color: var(--warn); }
.stat.s-cust .value { color: var(--ok); }
.stat .label { color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.2; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; }
table.tbl thead th {
  background: var(--glass-2); color: var(--slate-fg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--glass-border); white-space: nowrap; position: sticky; top: 0;
}
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--brand); }
table.tbl th .arrow { opacity: .35; margin-left: 4px; font-size: 11px; }
table.tbl th.sorted .arrow { opacity: 1; color: var(--brand); }
table.tbl tbody tr { border-bottom: 1px solid var(--line); }
table.tbl tbody tr:hover { background: var(--glass-2); }
table.tbl tbody tr:last-child { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ok); }
.tbl .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.empty-row td { text-align: center; color: var(--muted); padding: 34px; }

/* ticket tag */
.tag { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--brand);
  background: var(--info-bg); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.b-booked { background: var(--info-bg); color: var(--info); }
.b-progress { background: var(--warn-bg); color: var(--warn); }
.b-parts { background: var(--orange-bg); color: var(--orange); }
.b-ready { background: var(--purple-bg); color: var(--purple); }
.b-collected { background: var(--ok-bg); color: var(--ok); }
.b-disposed { background: var(--slate-bg); color: var(--slate-fg); }
.b-quote { background: var(--info-bg); color: var(--info); }
.b-draft { background: var(--slate-bg); color: var(--slate-fg); }
.b-sent { background: var(--warn-bg); color: var(--warn); }
.b-paid { background: var(--ok-bg); color: var(--ok); }
.b-prio-normal { background: var(--slate-bg); color: var(--slate-fg); }
.b-prio-high { background: var(--warn-bg); color: var(--warn); }
.b-prio-urgent { background: var(--danger-bg); color: var(--danger); }

/* ---------- Toolbar (search + filters) ---------- */
.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .grow { flex: 1; min-width: 160px; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: 0 12px;
}
.search input { border: 0; outline: 0; padding: 10px 0; width: 100%; background: transparent; }
.search .ic { color: var(--muted); }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.input, .select, .textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); background: var(--glass-2); color: var(--ink); outline: none; min-height: 42px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Native select: replace the default OS arrow with a themed chevron. (The open
   option list itself is OS-drawn and can't be styled — typeable fields use the
   custom .combo component instead.) */
.select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a1b5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); background: var(--glass);
}
.textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.rand-input { display: flex; align-items: stretch; }
.rand-input .prefix {
  display: grid; place-items: center; padding: 0 13px; font-weight: 700; color: var(--brand);
  background: var(--glass-2); border: 1px solid var(--glass-border); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.rand-input .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.checkbox-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.checkbox-row input { width: 17px; height: 17px; accent-color: var(--brand); }
.checkbox-row label { font-weight: 500; font-size: 14px; }

/* combo box (typeable select) */
.combo { position: relative; }
.combo.has-caret .input { padding-right: 36px; }
.combo-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: auto; cursor: pointer;
  transition: transform .18s ease, color .15s; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
}
.combo.open .combo-caret { transform: translateY(-50%) rotate(180deg); color: var(--brand); }
.combo.open .input { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-glow); }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 12px; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg);
  max-height: 280px; overflow-y: auto; display: none; padding: 5px;
  animation: combo-in .14s ease;
  /* allow vertical finger-scroll inside the list, and stop the grey iOS/Android
     tap flash so dragging to scroll doesn't look like a selection */
  touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.combo-opt { -webkit-tap-highlight-color: transparent; }
@keyframes combo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.combo-list.open { display: block; }
.combo-opt {
  padding: 9px 11px; font-size: 14px; cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; gap: 8px; color: var(--ink);
  transition: background .1s;
}
.combo-opt:hover, .combo-opt.active { background: var(--glass-2); }
.combo-opt.active { box-shadow: inset 0 0 0 1px var(--glass-border); }
.combo-opt.selected::after { content: '✓'; margin-left: auto; color: var(--brand); font-weight: 700; }
.combo-opt.muted { cursor: default; color: var(--muted); font-size: 13px; font-style: italic; }
.combo-opt.muted:hover { background: transparent; }
.combo-add {
  margin-top: 4px; padding-top: 11px; padding-bottom: 11px;
  border-top: 1px solid var(--glass-border); border-radius: 8px;
}
.combo-add:hover { background: var(--brand-glow); }
.combo-opt .add { color: var(--brand); font-weight: 650; display: inline-flex; align-items: center; gap: 7px; }
.combo-opt .add .add-plus {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  background: var(--brand); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 700; flex-shrink: 0;
}

/* ---------- Board (Kanban) ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.board-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 120px; }
.board-col-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.board-col-head .count { font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 1px 9px; }
.board-col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.job-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 11px 12px; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow); cursor: pointer; transition: transform .08s, box-shadow .12s; }
.job-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.job-card .jc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.job-card .jc-device { font-weight: 600; font-size: 14px; }
.job-card .jc-meta { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.job-card .jc-tech { display: inline-flex; align-items: center; gap: 5px; }
.job-card .jc-tech::before { content: "TECH"; font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--brand-300); background: var(--info-bg); padding: 1px 5px; border-radius: 4px; }
.board-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 14px; }

/* view toggle */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 13px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button.active { background: var(--brand-btn); color: #fff; box-shadow: var(--shadow); }

/* chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chip { background: var(--info-bg); color: var(--brand); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }

/* ---------- Modal ---------- */
/* The browser's default [hidden] { display:none } is overridden by the
   .modal-overlay class rule below, so force it back when hidden is present. */
.modal-overlay[hidden] { display: none !important; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(8,12,20,.55); z-index: 50;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
/* The stacked second modal layer sits above the first, with a slightly darker
   backdrop so the layer beneath reads as "behind". */
.modal-overlay-2 { z-index: 70; background: rgba(8,12,20,.62); }

/* Self-contained confirm dialog — always on top of everything (tickets,
   documents, builders). Independent of Modal/Modal2 so dismissing it never
   closes what's underneath. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(8,12,20,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.confirm-box {
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 22px;
  max-width: 440px; width: 100%; animation: combo-in .14s ease;
}
.confirm-title { margin: 0 0 8px; font-size: 17px; font-weight: 750; color: var(--ink); }
.confirm-msg { margin: 0 0 4px; color: var(--ink); line-height: 1.5; }
.modal { background: var(--glass-strong); border-radius: 20px; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); width: 100%; max-width: 760px; margin: auto; border: 1px solid var(--glass-border); }
.modal.wide { max-width: 960px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; background: var(--glass-strong); border-radius: 20px 20px 0 0; z-index: 2; }
.modal-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.modal-body { padding: 22px; }
.icon-btn { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 8px; color: var(--muted); font-size: 15px; }
.icon-btn:hover { background: var(--line); color: var(--ink); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }

/* detail layout */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.dl { margin-bottom: 12px; }
.dl dt { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.dl dd { margin: 2px 0 0; font-size: 14.5px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }

/* ---- Notes log (per device) ---- */
.notes-log { list-style: none; padding: 0; margin: 0 0 4px; }
.notes-log li {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border-radius: 10px; background: var(--glass-2); border: 1px solid var(--glass-border);
  margin-bottom: 8px; font-size: 15px; line-height: 1.5;
}
.notes-log li.muted { background: transparent; border-style: dashed; color: var(--muted); }
.notes-log li .when { color: var(--muted); font-size: 12px; white-space: nowrap; min-width: 130px; padding-top: 2px; }
.notes-log li .note-text { flex: 1; white-space: pre-wrap; word-break: break-word; }

/* ---- Repair steps ---- */
.steps { list-style: none; padding: 0; margin: 0 0 4px; counter-reset: step; }
.steps li {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px;
  border-radius: 10px; background: var(--glass-2); border: 1px solid var(--glass-border);
  margin-bottom: 8px; font-size: 15px; line-height: 1.5;
}
.steps li.muted { background: transparent; border-style: dashed; color: var(--muted); display: block; }
.steps li .step-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-border); color: var(--text); font-size: 13px; font-weight: 700;
}
.steps li .step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.steps li .step-text { word-break: break-word; white-space: pre-wrap; }
.steps li .when { color: var(--muted); font-size: 12px; }
.steps li .step-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.steps li.is-fix { background: var(--ok-bg); border-color: var(--ok); }
.steps li.is-fix .step-text { font-weight: 650; }
.steps li.is-fix .step-num { background: var(--ok); color: #06210f; }
[data-theme="dark"] .steps li.is-fix .step-num { color: #06210f; }

.fix-toggle {
  flex-shrink: 0; border: 1px solid var(--glass-border); background: var(--glass-2);
  color: var(--muted); font-size: 12px; font-weight: 650; padding: 5px 12px; border-radius: 999px;
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.fix-toggle:hover { color: var(--ok); border-color: var(--ok); }
.fix-toggle.on { background: var(--ok); color: #06210f; border-color: var(--ok); }
[data-theme="dark"] .fix-toggle.on { color: #06210f; }

/* small delete (✕) button on note/step rows */
.row-del {
  flex-shrink: 0; border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 14px; line-height: 1; width: 26px; height: 26px;
  border-radius: 8px; cursor: pointer; transition: all .12s;
}
.row-del:hover { color: var(--err, #e5484d); border-color: var(--err, #e5484d); background: var(--glass-2); }

/* small "Edit" button on note/step rows */
.row-edit-btn {
  flex-shrink: 0; border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 650; line-height: 1;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: all .12s;
}
.row-edit-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--glass-2); }

/* inline editor that replaces a note/step row while it is being edited */
.row-edit { display: flex; gap: 8px; align-items: flex-start; flex: 1; flex-wrap: wrap; }
.row-edit .textarea { flex: 1; min-width: 200px; min-height: 44px; resize: vertical; }
.notes-log li.editing, .steps li.editing { align-items: flex-start; }

/* known fixes from the Fault Library, offered as one-tap buttons */
.known-fixes { margin: 4px 0 8px; }
.known-fixes-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.known-fixes-row { display: flex; flex-wrap: wrap; gap: 6px; }
.known-fix { background: var(--info-bg); color: var(--brand); border: 1px solid transparent; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.known-fix:hover { border-color: var(--brand); }
.known-fix:disabled { opacity: .5; cursor: wait; }
.known-fix.more { background: transparent; color: var(--muted); border-color: var(--line); }

/* add-row for notes and steps: textarea + buttons */
.log-add { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; align-items: flex-start; }
.log-add .textarea { flex: 1; min-width: 220px; min-height: 46px; resize: vertical; }
/* keep legacy name working if referenced elsewhere */
.step-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* line items editor */
.li-table { width: 100%; border-collapse: collapse; }
.li-table th { font-size: 12px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 4px 6px; }
.li-table td { padding: 4px 6px; }
.li-table input { padding: 7px 8px; }
.li-total { text-align: right; font-variant-numeric: tabular-nums; padding-top: 7px; font-weight: 600; }
.totals-box { margin-left: auto; width: 260px; }
.totals-box .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.totals-box .row.grand { border-top: 1px solid var(--line-strong); margin-top: 6px; padding-top: 9px; font-size: 17px; font-weight: 700; }

/* phone checkboxes */
.phone-checks { display: flex; flex-direction: column; gap: 6px; }
.phone-checks label { display: flex; gap: 9px; align-items: center; font-size: 14px; }

/* settings phone/bank lists */
.repeat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.repeat-row .input { flex: 1; }
.bank-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; background: var(--surface-2); }
.bank-card.is-default { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245,166,35,.25); }
.bank-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bank-card-head .name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.default-pill { font-size: 11px; background: var(--accent); color: #3a2602; padding: 2px 9px; border-radius: 999px; font-weight: 700; }

/* data tools row */
.data-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.data-tools .group-label { font-weight: 600; font-size: 13px; color: var(--muted); margin-right: 4px; }

/* toast */
.toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 14px; max-width: 340px; animation: toastIn .2s ease; }
.toast.ok { background: #157a44; }
.toast.err { background: #b0201a; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* loading + misc */
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--muted); }
.center-empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.center-empty .big { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.hidden { display: none !important; }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.inline-controls { display: flex; gap: 8px; align-items: center; }
.inline-controls label { font-size: 13px; color: var(--muted); font-weight: 600; }

/* file input hidden */
input[type="file"].hidden-file { display: none; }

/* ===========================================================================
   Responsive — tablet & phone
   =========================================================================== */
@media (max-width: 920px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Two-row top bar: brand + bell on top, full-width scrollable nav below. */
  .topbar { height: auto; }
  .topbar-inner { flex-wrap: wrap; padding: 8px 12px; gap: 8px; row-gap: 8px; }
  .brand { order: 1; }
  .brand-text { display: none; }
  .topbar-foot { display: none; }
  /* Reserve space on the top row for the bell (which is fixed top-right). */
  .topbar-inner::before { content: ""; order: 2; margin-left: auto; width: 44px; height: 1px; }
  .nav {
    order: 3; margin: 4px 0 0; flex: 0 0 100%; width: 100%;
    justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .nav-item { scroll-snap-align: start; }
  /* The fixed app content sits below the taller two-row bar. --topbar-h is kept
     in sync with the bar's real height (syncTopbarHeight on each navigation), so
     it's more accurate than the fixed --topbar-h-mobile estimate; the estimate
     stays as a fallback for the first paint before the first sync. */
  .main { padding: calc(var(--topbar-h, var(--topbar-h-mobile)) + 16px) 16px 48px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 22px; }
  .modal-overlay { padding: 0; }
  .modal { border-radius: 0; min-height: 100vh; max-width: 100%; }
  .modal-head { border-radius: 0; }
  .totals-box { width: 100%; }
}

/* Landscape phones (and any very short viewport): a wrapping two-row top bar
   ate up to half the screen. Here we keep it to ONE compact row with a
   horizontally-scrollable nav, and shrink the reserved space below it, so most
   of the screen is left for actual content. Keyed on viewport HEIGHT so it
   triggers in landscape regardless of the (wide) landscape width. */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { height: auto; min-height: 0; }
  .topbar-inner {
    flex-wrap: nowrap; padding: 4px 10px; gap: 8px; row-gap: 0;
    min-height: 0; align-items: center;
  }
  .brand { order: 1; flex-shrink: 0; }
  .brand-text { display: none; }
  .topbar-foot { display: none; }
  .topbar-inner::before { display: none; } /* no reserved bell row needed */
  .nav {
    order: 2; margin: 0; flex: 1 1 auto; width: auto; min-width: 0;
    justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .nav-item { scroll-snap-align: start; padding-top: 7px; padding-bottom: 7px; }
  /* Content clears the now single, shorter bar. */
  .main { padding: 60px 16px 40px; }
  .stale-bell { top: 10px; right: 10px; }
  /* Modals: don't force full 100vh on a short screen — let them scroll. */
  .modal { min-height: auto; }
}

@media (max-width: 460px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ---------- Device catalogue tree ---------- */
.cat-group { border: 1px solid var(--glass-border); border-radius: var(--radius); margin-bottom: 12px; background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-edge); overflow: hidden; break-inside: avoid; }
.cat-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; background: var(--surface-2); }
.cat-head:hover { background: var(--info-bg); }
.cat-head .twist { color: var(--muted); font-size: 12px; transition: transform .15s; width: 12px; }
.cat-group.open .cat-head .twist { transform: rotate(90deg); }
.cat-head .cat-name { font-weight: 700; font-size: 15px; flex: 1; color: var(--ink); }
.cat-head .cat-count { font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 2px 10px; }
.cat-head .row-actions { display: flex; gap: 4px; }
.cat-body { display: none; padding: 6px 10px 12px; }
.cat-group.open .cat-body { display: block; }

.brand-group { border-top: 1px dashed var(--line); }
.brand-head { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 18px; cursor: pointer; }
.brand-head:hover { background: var(--surface-2); border-radius: 8px; }
.brand-head .twist { color: var(--muted); font-size: 11px; transition: transform .15s; width: 10px; }
.brand-group.open .brand-head .twist { transform: rotate(90deg); }
.brand-head .brand-name { font-weight: 600; font-size: 14px; flex: 1; color: var(--ink); }
.brand-head .brand-count { font-size: 11px; color: var(--muted); }
.model-list { display: none; padding: 4px 8px 8px 38px; flex-wrap: wrap; gap: 7px; }
.brand-group.open .model-list { display: flex; }
.model-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; color: var(--ink); }
.model-pill button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 50%; }
.model-pill button:hover { background: var(--danger-bg); color: var(--danger); }
.model-pill .edit:hover { background: var(--info-bg); color: var(--brand); }
.add-inline { display: flex; gap: 6px; align-items: center; margin: 8px 0 4px 38px; }
.add-inline input { padding: 6px 10px; font-size: 13px; max-width: 220px; }
.brand-add-inline { margin-left: 18px; }

/* ---------- Calendar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-title { font-size: 18px; font-weight: 700; min-width: 180px; }
.cal-nav-btns { display: flex; gap: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-dow { background: var(--surface-2); padding: 8px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--slate-fg); text-align: center; }
.cal-cell { background: var(--glass); min-height: 104px; padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: background .1s; }
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.other-month { background: var(--canvas); }
.cal-cell.other-month .cal-daynum { color: var(--line-strong); }
.cal-cell.today { background: var(--info-bg); }
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--muted); align-self: flex-end; }
.cal-cell.today .cal-daynum { background: var(--brand); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.cal-evt { font-size: 11.5px; padding: 3px 6px; border-radius: 5px; background: var(--info-bg); color: var(--info); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--info); }
.cal-evt:hover { filter: brightness(1.15); }
.cal-evt.t-collection { background: var(--info-bg); color: var(--info); border-left-color: var(--info); }
.cal-evt.t-dstv { background: var(--orange-bg); color: var(--orange); border-left-color: var(--orange); }
.cal-evt.t-install { background: var(--purple-bg); color: var(--purple); border-left-color: var(--purple); }
.cal-evt.t-delivery { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
.cal-evt.t-other { background: var(--slate-bg); color: var(--slate-fg); border-left-color: var(--slate-fg); }
.cal-evt.done { opacity: .5; text-decoration: line-through; }
.cal-evt .evt-time { font-weight: 700; }
.cal-more { font-size: 11px; color: var(--muted); padding: 1px 6px; }
.cal-view-toggle { margin-left: auto; }

/* upcoming appointments on dashboard */
.appt-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.appt-item:last-child { border-bottom: 0; }
.appt-when { min-width: 130px; font-size: 13px; }
.appt-when .day { font-weight: 700; }
.appt-when .time { color: var(--muted); }
.appt-main { flex: 1; }
.appt-main .ttl { font-weight: 600; font-size: 14px; }
.appt-main .meta { font-size: 12.5px; color: var(--muted); }
.appt-type-pill { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--info-bg); color: var(--brand); white-space: nowrap; }

/* agenda list (mobile / list calendar) */
.agenda-day { margin-bottom: 18px; }
.agenda-day h4 { margin: 0 0 8px; font-size: 14px; color: var(--brand); border-bottom: 1px solid var(--line); padding-bottom: 6px; }

@media (max-width: 760px) {
  .cal-cell { min-height: 64px; padding: 3px; }
  .cal-evt { font-size: 10px; padding: 2px 4px; }
  .cal-daynum { font-size: 11px; }
}

/* ---------- Selected customer card ---------- */
.sel-customer { margin-top: 10px; border: 1px solid var(--brand-300); background: var(--info-bg); border-radius: var(--radius-sm); padding: 12px 14px; display: none; }
.sel-customer.shown { display: block; }
.sel-customer .sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sel-customer .sc-name { font-weight: 700; font-size: 15px; color: var(--brand); }
.sel-customer .sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin-top: 8px; }
.sel-customer .sc-field { font-size: 13px; }
.sel-customer .sc-field .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; display: block; }
.sel-customer .sc-field .val { color: var(--ink); }
@media (max-width: 600px) { .sel-customer .sc-grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   Status-coloured kanban columns & cards
   =========================================================================== */
.board-col { border-top: 3px solid var(--line-strong); }
.board-col .board-col-head { color: var(--ink); }
.board-col-head .count { background: var(--surface-3); color: var(--muted); }

.col-b-booked    { border-top-color: var(--info); }
.col-b-progress  { border-top-color: var(--warn); }
.col-b-parts     { border-top-color: var(--orange); }
.col-b-ready     { border-top-color: var(--purple); }
.col-b-collected { border-top-color: var(--ok); }
.col-b-disposed  { border-top-color: var(--slate-fg); }

.col-b-booked    .board-col-head { box-shadow: inset 0 0 0 transparent; }
.board-col-head { position: relative; }

/* card left accent by status */
.job-card { border-left: 3px solid var(--line-strong); }
.card-b-booked    { border-left-color: var(--info); }
.card-b-progress  { border-left-color: var(--warn); }
.card-b-parts     { border-left-color: var(--orange); }
.card-b-ready     { border-left-color: var(--purple); }
.card-b-collected { border-left-color: var(--ok); }
.card-b-disposed  { border-left-color: var(--slate-fg); }

/* ===========================================================================
   Production polish
   =========================================================================== */
/* Custom scrollbars for the dark theme */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid var(--canvas); }
*::-webkit-scrollbar-thumb:hover { background: #4a5562; }

/* Inputs: clearer focus + dark autofill */
.input::placeholder, .textarea::placeholder, input::placeholder { color: #5c6675; }
select option { background: var(--surface); color: var(--ink); }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--ink);
}

/* (card surface defined once above, with glass as a supported enhancement) */

/* Tables: zebra + hover for scannability */
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: var(--glass-2); }
.tbl thead th { color: var(--muted); border-bottom: 1px solid var(--line-strong); font-weight: 600; }
.tbl td, .tbl th { border-bottom: 1px solid var(--line); }

/* Stat cards: subtle gradient sheen + clearer border on dark */
/* Segmented control on dark */
.seg { background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px; display: inline-flex; gap: 2px; box-shadow: inset 0 1px 0 var(--glass-highlight); }
.seg button { background: transparent; border: 0; color: var(--muted); padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px; transition: all .12s; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--brand-btn); color: #fff; box-shadow: var(--shadow); }

/* Modal surfaces */
/* (modal glass styling consolidated above) */
.modal-foot { border-top: 1px solid var(--line); }

/* Combo dropdowns — glass styling defined in the main combo block above. */

/* Toast: lighter on dark so it stands out */
.toast { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); }
/* Success / error toasts: solid saturated fill with WHITE text so they stay
   legible in every theme (a later theme rule was washing the text to near-black
   on the red fill). Force color + border here to win the cascade. */
.toast.ok {
  background: #157a44 !important; color: #fff !important;
  border: 1px solid #34c471 !important; border-left: 4px solid #34c471 !important;
  font-weight: 600;
}
.toast.err {
  background: #b0201a !important; color: #fff !important;
  border: 1px solid #ff8a80 !important; border-left: 4px solid #ff8a80 !important;
  font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Brand mark glow */
/* Brand mark uses the blue gradient defined above */

/* Calendar tweaks for dark */
.cal-cell.other-month { background: var(--surface-2); opacity: .6; }
.cal-cell.today { background: var(--brand-glow); }
.cal-cell.today .cal-daynum { background: var(--brand-btn); color: #fff; }

/* Selected-customer card already uses vars; ensure border reads on dark */
.sel-customer { border-color: var(--brand-300); background: var(--brand-glow); }
.sel-customer .sc-name { color: var(--brand-300); }

/* Links */
a:hover { color: var(--brand-300); }

/* ---------- Read-only amount display (job detail) ---------- */
.amount-display { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.amount-display.invoiced { border-color: var(--ok); background: var(--ok-bg); }
.amount-display.quoted { border-color: var(--purple); background: var(--purple-bg); }
.amount-display .amt-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.amount-display .amt-value { font-size: 20px; font-weight: 750; color: var(--ink); margin-top: 2px; letter-spacing: -.5px; }
.amount-display.invoiced .amt-value { color: var(--ok); }

/* ---------- Activity log (job detail) ---------- */
.event-log { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.event-log li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0 7px 4px; font-size: 13.5px; border-left: 2px solid var(--line); padding-left: 14px; margin-left: 4px; position: relative; }
.event-log li::before { content: ""; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-300); border: 2px solid var(--surface); }
.event-log .ev-when { color: var(--muted); font-size: 12px; min-width: 132px; flex-shrink: 0; }
.event-log .ev-text { color: var(--ink); }
.event-log .ev-kind { display: none; }
.event-log li:has(.ek-status)::before { background: var(--info); }
.event-log li:has(.ek-technician)::before { background: var(--warn); }
.event-log li:has(.ek-priority)::before { background: var(--danger); }
.event-log li:has(.ek-created)::before { background: var(--ok); }

/* Minimal empty-state mark (replaces decorative glyphs) */
.center-empty .empty-mark { font-size: 32px; color: var(--line-strong); font-weight: 300; line-height: 1; margin-bottom: 6px; }

/* ---------- Contact list editor (phones/emails/addresses) ---------- */
.editor-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 10px 0 6px; }
.repeat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.repeat-row > .input, .repeat-row > .phone-field { flex: 1; }
.phone-field { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.phone-field .phone-prefix { display: grid; place-items: center; padding: 0 10px; background: var(--surface-3); color: var(--brand-300); font-weight: 700; font-size: 13px; border-right: 1px solid var(--line-strong); white-space: nowrap; }
.phone-field .input { border: 0; border-radius: 0; flex: 1; background: var(--surface); }
.input-bad { border-color: var(--danger) !important; background: var(--danger-bg) !important; }
.default-pill { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ok); background: var(--ok-bg); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* ---------- Theme / palette picker ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 4px; }
.theme-card {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  padding: 12px; border: 2px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; text-align: left; transition: border-color .15s, transform .1s;
}
.theme-card:hover { border-color: var(--brand-300); }
.theme-card.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.theme-swatch { display: flex; width: 100%; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.theme-swatch span { flex: 1; }
.theme-swatch span + span { border-left: 1px solid rgba(128,128,128,.4); }
.theme-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.theme-desc { font-size: 11.5px; color: var(--muted); line-height: 1.3; }

/* ---------- Collapsible dashboard cards ---------- */
.collapse-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.collapse-head { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; user-select: none; }
.collapse-chevron { color: var(--muted); font-size: 13px; transition: transform .18s ease; flex-shrink: 0; }
.collapsible.is-collapsed .collapse-chevron { transform: rotate(-90deg); }
.collapse-head:hover .collapse-chevron { color: var(--ink); }
.collapse-head:hover .section-title { color: var(--brand-300); }
.collapse-body { margin-top: 14px; }
.collapsible.is-collapsed { padding-bottom: 14px; }

/* ---------- Status badge (inline-coloured) ---------- */
.status-badge { font-weight: 650; border: 0; }

/* ---------- To Contact section ---------- */
.contact-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px; }
.contact-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.contact-chip:hover { border-color: var(--brand-300); }
.contact-chip.active { background: var(--brand-glow); border-color: var(--brand); color: var(--brand-300); }
.contact-chip.has-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--chip); flex-shrink: 0; }
.contact-chip .chip-count { font-size: 11px; opacity: .7; background: var(--surface-3); border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; }
.contact-chip.active .chip-count { background: rgba(255,255,255,.18); }

.contact-list { display: flex; flex-direction: column; gap: 9px; }
.contact-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 15px 13px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); position: relative;
}
.contact-row.pinned { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-color: var(--accent); }
.cr-main { flex: 1; min-width: 200px; }
.cr-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; }
.cr-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.cr-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
.cr-when { font-size: 12px; color: var(--muted); margin-top: 3px; opacity: .85; }
.pin-flag { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 4px; }

/* Prominent phone column */
.cr-phones { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; min-width: 170px; }
.contact-phone {
  font-size: 19px; font-weight: 800; letter-spacing: .3px; color: var(--brand-300);
  text-decoration: none; line-height: 1.15; white-space: nowrap;
}
.contact-phone.primary { color: var(--brand); }
.contact-phone:hover { text-decoration: underline; }
.contact-phone:not(.primary) { font-size: 14px; font-weight: 600; opacity: .8; }
.contact-phone.none { font-size: 13px; font-weight: 500; color: var(--muted); font-style: italic; }
.cr-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .cr-phones { align-items: flex-start; min-width: 0; width: 100%; }
  .contact-phone { font-size: 22px; }
}

/* ---------- Fault insights (booking screen) ---------- */
.fault-insights {
  margin: -2px 0 10px; padding: 11px 13px;
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm); color: var(--muted); font-size: 13px;
}
.fault-insights .fi-label { font-weight: 600; color: var(--muted); margin-bottom: 4px; opacity: .85; }
.fault-insights .fi-fixes { margin: 0 0 6px; padding-left: 18px; }
.fault-insights .fi-fixes li { margin: 1px 0; color: var(--muted); }
.fault-insights .fix-count { font-size: 11px; opacity: .7; font-weight: 600; }
.fault-insights .fi-cost { color: var(--muted); }
.fault-insights .fi-cost strong { color: var(--ink); font-size: 14px; }
.fault-insights .fi-n { opacity: .7; font-size: 12px; }

/* Disabled field (e.g. technician before Approved) */
.disabled-field { opacity: .5; pointer-events: none; }
.disabled-field .input, .disabled-field input { cursor: not-allowed; }
.disabled-field .combo-list { display: none !important; }
.disabled-field .combo-caret { display: none; }

/* ---------- Stale-status notification bell ---------- */
.stale-bell { position: fixed; top: calc(var(--topbar-h) + 14px); right: 18px; z-index: 40; }
.stale-bell-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: 17px; cursor: pointer; box-shadow: var(--shadow);
  display: grid; place-items: center; transition: border-color .12s, transform .08s;
}
.stale-bell-btn:hover { border-color: var(--brand-300); }
.stale-bell-btn:active { transform: scale(.95); }
.stale-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface);
}
.stale-pop {
  position: absolute; top: 48px; right: 0; width: 320px; max-height: 60vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px;
}
.stale-pop .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; font-weight: 700; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); }
.stale-pop .sp-toggle { font-size: 11.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.stale-pop .sp-empty { padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13px; }
.stale-pop .sp-list { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.stale-pop .sp-item { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; }
.stale-pop .sp-item:hover { border-color: var(--brand-300); }
.stale-pop .sp-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.stale-pop .sp-age { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--danger); }
.stale-pop .sp-name { font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .stale-bell { top: 12px; right: 12px; z-index: 45; } .stale-pop { width: 280px; } }

/* ---------- Technician stats popup ---------- */
.link-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand-300); cursor: pointer; }
.link-name:hover { text-decoration: underline; }
.tech-stats .ts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ts-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.ts-period { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ts-income { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--ok); margin-top: 6px; }
.ts-income-label { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.ts-rows { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--line); padding-top: 9px; }
.ts-row { display: flex; justify-content: space-between; font-size: 13px; }
.ts-row span:first-child { color: var(--muted); }
@media (max-width: 640px) { .tech-stats .ts-grid { grid-template-columns: 1fr; } }

/* ---------- Reports ---------- */
.report-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 6px; }
.report-summary { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 16px 0 6px; }
.rs-total { display: flex; flex-direction: column; }
.rs-total .rs-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.rs-total .rs-val { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.rs-compare { font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.rs-compare.up { color: #15663b; background: color-mix(in srgb, #15663b 14%, transparent); }
.rs-compare.down { color: #962219; background: color-mix(in srgb, #962219 14%, transparent); }
.chart-host { margin-top: 12px; min-height: 200px; }
.chart-svg { display: block; width: 100%; max-width: 860px; height: auto; max-height: 420px; margin: 0 auto; }
.chart-svg .cgrid { stroke: var(--line); stroke-width: 1; }
.chart-svg .cy-lab, .chart-svg .cx-lab { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart-svg .leg-lab { fill: var(--ink); font-size: 12px; font-family: inherit; }
.chart-svg .pie-total { fill: var(--ink); font-size: 20px; font-weight: 800; font-family: inherit; }
.chart-svg .pie-total-lab { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart-legend { display: flex; gap: 18px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-empty { text-align: center; padding: 48px 20px; color: var(--muted); font-size: 14px; }
@media (max-width: 820px) { .report-controls { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Fault library fix list ---------- */
.fix-list { display: flex; flex-direction: column; gap: 6px; }
.fix-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fix-item .fix-text { flex: 1; color: var(--ink); font-size: 14px; }
.fault-insights .fi-top { font-size: 13.5px; color: var(--ink); margin-bottom: 6px; }
.fault-insights .fi-top strong { color: var(--brand-300); }

/* Nested fault subcards inside an appliance group */
.collapsible .fault-subcard { margin-top: 10px; background: var(--surface-2); border-color: var(--line); }
.collapsible .fault-subcard:first-child { margin-top: 4px; }
.collapsible .fault-subcard .section-title { font-size: 14px; }

/* ---------- Help system ---------- */
.page-title-row { display: flex; align-items: center; gap: 12px; }
.help-btn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: border-color .12s, color .12s;
}
.help-btn:hover { color: var(--brand-300); border-color: var(--brand-300); }
.help-btn .help-q { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }

/* Inline "?" beside a field label */
label.with-help { display: inline-flex; align-items: center; gap: 6px; }
.help-inline { position: relative; display: inline-flex; }
.help-dot {
  width: 16px; height: 16px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1;
  display: inline-grid; place-items: center;
}
.help-dot:hover { background: var(--brand); color: #fff; }
.help-pop {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: 240px; max-width: 70vw;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px 12px;
  font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: normal;
}
.help-pop::before { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; background: var(--surface); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }

/* Help panel (page-level modal) */
.help-panel .help-intro { margin-top: 0; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.help-panel .help-section { margin-top: 14px; }
.help-panel .help-section h4 { margin: 0 0 3px; font-size: 13.5px; color: var(--brand-300); }
.help-panel .help-section p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- Glass rehaul: finishing touches ---------- */
/* Gentle entrance for cards/sections — meaningful motion, ~220ms, reduced-motion safe. */
/* (card entrance animation removed — it could leave panes at opacity:0) */

/* Page title gets a touch more presence */
.page-head h1 { letter-spacing: -.5px; }

/* Inputs/selects inside frosted modals shouldn't double-blur (perf + clarity) */
.modal .input, .modal .select, .modal .textarea, .modal .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Toast as a frosted pill */
.toast {
 
}

/* ---------- Animated flowing background paths ---------- */
/* ---------- Animated constellation background (canvas) ---------- */
#bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block; }
/* App shell sits above the background layer */
#app { position: relative; z-index: 1; }

/* ---------- Pagination ---------- */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; flex-wrap: wrap;
}
.pager-left { display: flex; align-items: center; gap: 12px; }
.pager-right { display: flex; align-items: center; gap: 10px; }
.pager-select {
  padding: 7px 10px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--glass-2); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pager-info { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pager-page { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }
.pager-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; min-height: 38px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass-2); color: var(--ink);
  font-size: 13.5px; font-weight: 650; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.pager-btn:hover:not([disabled]) { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager-btn:active:not([disabled]) { transform: translateY(1px); }
.pager-btn[disabled] { opacity: .4; cursor: not-allowed; }
.pager-next { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager-next:hover:not([disabled]) { background: var(--brand-btn); border-color: var(--brand-btn); }
@media (max-width: 600px) { .pager { justify-content: center; } .pager-info { display: none; } }

/* ---------- Document send dialog ---------- */
.sent-lead { margin: 0 0 16px; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.send-actions { display: flex; flex-direction: column; gap: 10px; }
.send-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--glass-border);
  background: var(--glass-2); color: var(--ink); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.send-btn:hover:not([disabled]) { background: var(--glass); border-color: var(--brand-300); }
.send-btn:active:not([disabled]) { transform: translateY(1px); }
.send-btn[disabled] { opacity: .5; cursor: not-allowed; }
.send-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--surface-2); flex-shrink: 0; }
.send-wa .send-ic { color: #1faa53; }
.send-tx { display: flex; flex-direction: column; line-height: 1.3; }
.send-tx b { font-size: 14.5px; font-weight: 650; }
.send-tx small { font-size: 12px; color: var(--muted); }

/* ---------- Missing required field: blinking red outline until filled ---------- */
@keyframes fieldBlink {
  0%, 100% { outline-color: rgba(220, 53, 69, 0); box-shadow: 0 0 0 0 rgba(220,53,69,0); }
  50%      { outline-color: rgba(220, 53, 69, .95); box-shadow: 0 0 0 5px rgba(220,53,69,.30); }
}
.field-missing {
  border-color: var(--danger) !important;
  outline: 2px solid transparent; outline-offset: 1px;
  border-radius: var(--radius-sm);
  animation: fieldBlink 1s ease-in-out infinite;
}
/* When a wrapper (combo / select / contact editor) is flagged, also paint and
   pulse its inner control so the box the user must type in is the thing blinking. */
.field-missing .input,
.field-missing input,
.field-missing textarea,
.field-missing .cs-trigger,
.field-missing .combo input {
  border-color: var(--danger) !important;
}
.field-missing.combo, .field-missing .combo { animation: fieldBlink 1s ease-in-out infinite; border-radius: var(--radius-sm); }

/* Customer detail grid when used outside the booking card (e.g. save popup) */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.sc-grid .sc-field { font-size: 13px; }
.sc-grid .sc-field .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 2px; }
.sc-grid .sc-field .val { color: var(--ink); }
@media (max-width: 600px) { .sc-grid { grid-template-columns: 1fr; } }

/* ---------- Status-age badge (time in current status) ---------- */
.age-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.age-ok    { color: var(--muted); background: var(--glass-2); }
.age-amber { color: #b8860b; background: rgba(212, 160, 23, .16); border-color: rgba(212,160,23,.35); }
.age-red   { color: #d33; background: rgba(220, 53, 69, .15); border-color: rgba(220,53,69,.4); }
[data-theme="dark"] .age-amber { color: #ffd24a; }
[data-theme="dark"] .age-red { color: #ff8b8b; }
.jc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.jc-top-right { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* ---------- Guided next-step buttons ---------- */
.next-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 16px; }
.next-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.next-btn {
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  font-size: 13.5px; font-weight: 650; padding: 8px 16px; border-radius: 999px;
  cursor: pointer; transition: all .12s; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.next-btn:hover { background: var(--brand-btn); border-color: var(--brand-btn); transform: translateY(-1px); }
.next-btn:active { transform: translateY(0); }
.next-btn + .next-btn { }
/* Secondary next-steps (2nd, 3rd) are lighter so the primary path stands out. */
.next-btn:nth-child(n+3) { background: var(--glass-2); color: var(--ink); border-color: var(--glass-border); box-shadow: none; }
.next-btn:nth-child(n+3):hover { border-color: var(--brand-300); background: var(--glass); }
/* Closing statuses (Collected / Complete) — the only steps that ask for the
   technician and a repair step/fix. Marked so techs know where the work is
   accounted for. Wins over the nth-child rule above. */
.next-btn.next-btn-closing,
.next-btn.next-btn-closing:nth-child(n+3) {
  background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok);
  font-weight: 700; box-shadow: none;
}
.next-btn.next-btn-closing:hover,
.next-btn.next-btn-closing:nth-child(n+3):hover {
  background: var(--ok); color: #fff; border-color: var(--ok);
}

/* ---------- Auth screens ---------- */
body.auth-mode { display: grid; place-items: center; min-height: 100vh; }
#authHost { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--glass-strong);
  border: 1px solid var(--glass-border); border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg);
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.auth-logo { width: 44px; height: 44px; border-radius: 10px; }
.auth-brand h1 { margin: 0; font-size: 20px; }
.auth-brand p { margin: 0; font-size: 13px; }
.auth-label { font-size: 12px; font-weight: 650; color: var(--muted); margin-top: 6px; }
.auth-card .input { width: 100%; }
.auth-card .btn { margin-top: 14px; }
.auth-err { color: var(--danger); font-size: 13px; background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.3); border-radius: 8px; padding: 8px 10px; }

/* ---------- User chip in topbar ---------- */
.user-chip { display: flex; align-items: center; }
.user-chip-inner { display: flex; align-items: center; gap: 8px; background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px 6px 4px 4px; box-shadow: inset 0 1px 0 var(--glass-highlight); }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.user-name { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.user-role { font-size: 10.5px; color: var(--muted); }
.user-logout { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 8px; }
.user-logout:hover { color: var(--danger); background: var(--glass); }

/* ---------- User management ---------- */
.team-checks { display: flex; flex-direction: column; gap: 8px; }
.team-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-2); cursor: pointer; }
.team-check input { margin-top: 3px; }
.temp-pw { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.temp-pw code { font-size: 18px; font-weight: 700; letter-spacing: 1px; background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 8px; padding: 8px 14px; }

@media (max-width: 760px) { .user-meta { display: none; } }
.ev-user { color: var(--muted); font-size: 12px; font-weight: 600; }

/* ---------- Branding / logo card ---------- */
.logo-row { display: flex; gap: 18px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.logo-preview-wrap { width: 96px; height: 96px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-2); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 1px 0 var(--glass-highlight); }
.logo-preview { max-width: 84px; max-height: 84px; object-fit: contain; }
.logo-actions { flex: 1; min-width: 220px; }

/* Subtle "optional" tag on non-required fields (reduces mental load without checkboxes). */
.optional-tag {
  display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 600;
  color: var(--muted); background: var(--glass-2); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 1px 7px; vertical-align: middle; letter-spacing: .2px;
  text-transform: lowercase; opacity: .75;
}

/* Devices catalogue: two independent columns so expanding a category pushes
   only the items below it in the same column (per the design review). */
.device-tree { display: flex; gap: 14px; align-items: flex-start; }
.device-col { flex: 1; min-width: 0; }
@media (max-width: 900px) { .device-tree { flex-direction: column; } }
/* "Set later" tag — required fields assigned after booking (e.g. technician). */
.optional-tag.later-tag { color: var(--info); background: var(--info-bg); border-color: transparent; opacity: .9; text-transform: none; }

/* ---------- User dropdown menu ---------- */
.user-menu-wrap { position: relative; }
.user-chip-btn { cursor: pointer; border: 1px solid var(--glass-border); }
.user-chip-btn.open { border-color: var(--brand-300); }
.user-caret { display: inline-flex; color: var(--muted); margin-left: 2px; }
.user-caret svg { width: 14px; height: 14px; }
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lg); padding: 6px; overflow: hidden;
}
.user-menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--glass-border); margin-bottom: 4px; }
.user-menu-head .user-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.user-menu-head .user-role { font-size: 11.5px; }
.user-menu-item {
  display: flex; align-items: center; width: 100%; text-align: left; gap: 8px;
  background: transparent; border: 0; border-radius: 9px; padding: 9px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.user-menu-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.user-menu-item:hover { background: var(--glass-2); }
.user-menu-item.danger { color: var(--danger); }
.user-menu-item.danger:hover { background: rgba(220,53,69,.12); }
.user-menu-sep { height: 1px; background: var(--glass-border); margin: 4px 0; }
.inline-save { display: flex; gap: 8px; align-items: center; }
.inline-save .input { flex: 1; }

/* ---------- Account switcher ---------- */
.acct-list { display: flex; flex-direction: column; gap: 8px; }
.acct-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; transition: all .12s;
}
.acct-row:hover { border-color: var(--brand-300); background: var(--glass); }
.acct-row.active { border-color: var(--brand); cursor: default; }
.acct-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.acct-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.acct-name { font-weight: 650; font-size: 14px; color: var(--ink); }
.acct-sub { font-size: 12px; }
.acct-badge { font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 3px 10px; }
.acct-go { font-size: 12.5px; font-weight: 650; color: var(--brand-300); }

/* ---------- Dashboard customizer ---------- */
.dash-widgets { display: flex; flex-direction: column; gap: 16px; }

/* ---- Total Receivables widget (aging summary) ---- */
.rcv-total {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; margin: 6px 0 12px;
}
.rcv-total-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.rcv-total-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
/* Proportional aging bar: each segment flexes to its share of the total. */
.rcv-bar {
  display: flex; height: 14px; border-radius: 8px; overflow: hidden;
  background: var(--glass-2); border: 1px solid var(--glass-border); margin-bottom: 14px;
}
.rcv-seg { min-width: 3px; transition: filter .15s; }
.rcv-seg:hover { filter: brightness(1.08); }
.rcv-seg + .rcv-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }
/* Cool → hot ramp, all from theme tokens so every theme + high-contrast adapts. */
.rcv-current { background: var(--ok); }
.rcv-a { background: var(--info); }
.rcv-b { background: var(--warn); }
.rcv-c { background: var(--orange); }
.rcv-d { background: var(--danger); }
.rcv-buckets {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.rcv-cell {
  padding: 10px 12px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--glass-border);
}
.rcv-cell-tag {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 999px; color: #fff; margin-bottom: 7px;
}
.rcv-cell.is-over .rcv-cell-tag { opacity: .95; }
.rcv-cell:not(.is-over) .rcv-cell-tag { background: var(--ok); }
.rcv-cell-value { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.rcv-cell-label { font-size: 12px; font-weight: 600; margin-top: 2px; }
.rcv-cell-sub { font-size: 11px; margin-top: 1px; }
body.is-mobile .rcv-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.is-mobile .rcv-total-value { font-size: 22px; }

/* ---- Ageing filter chips (Invoices / Quotes) ---- */
.aging-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.aging-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-2);
  font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--ink); cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.aging-chip:hover { border-color: var(--line-strong); }
.aging-chip.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--glass-strong); }
.aging-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.aging-chip .n { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.aging-chip.active .n { color: var(--brand); }

/* ---- Settings: category group banners + message templates ---- */
.settings-cat { margin: 30px 2px 8px; padding-bottom: 7px; border-bottom: 1px solid var(--glass-border); }
.settings-cat-title { font-size: 16px; font-weight: 800; letter-spacing: .01em; color: var(--ink); margin: 0; }
.settings-cat-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.placeholder-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.ph-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted);
  background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px 10px; }
.ph-chip code { font-size: 11.5px; color: var(--ink); background: none; padding: 0; }
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.msg-group-title { margin: 2px 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  padding-bottom: 5px; border-bottom: 1px solid var(--glass-border); }
body.is-mobile .msg-grid { grid-template-columns: 1fr; }

/* ---- Settings category tabs ---- */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.settings-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-2);
  color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s, color .12s;
}
.settings-tab:hover { border-color: var(--line-strong); }
.settings-tab .settings-tab-ic { display: inline-flex; }
.settings-tab .settings-tab-ic svg { width: 17px; height: 17px; display: block; }
.settings-tab.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 2px 10px var(--brand-glow, rgba(0,0,0,.15));
}
.settings-panel .settings-cat { margin-top: 4px; }
body.is-mobile .settings-tab { flex: 1 1 auto; justify-content: center; }
.dash-cust-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.dash-cust-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 11px;
}
.dash-cust-row.dragging { opacity: .5; }
.dash-cust-row.drag-over { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.dash-cust-row .drag-handle { color: var(--muted); cursor: grab; display: inline-flex; }
.dash-cust-row .drag-handle:active { cursor: grabbing; }
.dash-cust-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* Toggle switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: var(--glass-border); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch-track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* ---------- Custom palette editor ---------- */
.palette-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 4px; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 11px; }
.palette-swatch-wrap { flex-shrink: 0; }
.color-input { width: 40px; height: 40px; padding: 0; border: 1px solid var(--glass-border); border-radius: 9px; background: none; cursor: pointer; }
.color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 6px; }
.palette-name { font-size: 13px; font-weight: 650; color: var(--ink); }
.palette-hint { font-size: 11.5px; }

/* Toggle row: switch + label + hint (used in settings). */
.toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle-row-text { display: flex; flex-direction: column; line-height: 1.3; }
.toggle-row-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.toggle-row-hint { font-size: 12px; }

/* ---------- Missed appointments ---------- */
.missed-card { border-color: var(--danger); box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 1px rgba(255,107,94,.25); }
.missed-item { border-left: 3px solid var(--danger); }
.missed-badge { font-size: 11px; font-weight: 700; color: #fff; background: var(--danger); border-radius: 999px; padding: 3px 10px; margin-left: auto; align-self: center; }
/* Calendar: missed appointments show red. */
.cal-evt.missed-evt { background: var(--danger-bg) !important; color: var(--danger) !important; border-left: 3px solid var(--danger) !important; font-weight: 650; }
.cal-evt.missed-evt::before { content: '⚠ '; }

/* Phone number toggles on the invoice/quote builder. */
.phone-toggles { display: flex; flex-direction: column; gap: 8px; }
.phone-toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.phone-toggle-num { font-size: 14px; color: var(--ink); }

/* ---------- Custom styled dropdown (replaces native select) ---------- */
.custom-select { position: relative; }
.cs-trigger {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  padding-right: 36px; cursor: pointer; background-image: none;
}
.cs-trigger .cs-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: inline-flex; transition: transform .18s ease, color .15s; pointer-events: none;
}
.custom-select.open .cs-caret { transform: translateY(-50%) rotate(180deg); color: var(--brand); }
.custom-select.open .cs-trigger { border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-glow); }
.cs-list { max-height: 300px; }
.cs-group {
  padding: 8px 11px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); opacity: .8;
}
.custom-select.disabled-field .cs-trigger { opacity: .5; cursor: not-allowed; }

/* Guided next-step: flash a field the user still needs to fill. */
@keyframes field-flash-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,158,255,0); }
  20%, 60% { box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1px var(--brand); }
}
.field-flash { animation: field-flash-anim 1.8s ease; border-radius: var(--radius-sm); }
.field-flash .input, .field-flash .cs-trigger, .field-flash .combo input { border-color: var(--brand) !important; }
.missing-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.missing-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--glass-2); border: 1px solid var(--glass-border);
  border-left: 3px solid var(--warn, #f5a623); border-radius: 10px; font-size: 14px; color: var(--ink);
}

/* Inline guided next-step panel (fills missing fields without leaving the ticket). */
.guide-panel {
  margin: 10px 0 4px; padding: 14px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  animation: field-flash-anim .9s ease;
}
.guide-head { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); margin-bottom: 12px; }
.guide-icon { color: var(--accent); font-size: 16px; }
.guide-editors { display: flex; flex-direction: column; gap: 12px; }
.guide-field { display: flex; flex-direction: column; gap: 5px; }
.guide-label { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.guide-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- Email composer + sent log ---------- */
.sig-preview { margin: 4px 0 8px; padding: 8px 10px; background: var(--glass-2); border: 1px dashed var(--glass-border); border-radius: 9px; }
.sig-preview-label { font-size: 11.5px; display: block; margin-bottom: 4px; }
.sig-preview-text { margin: 0; font-size: 12.5px; color: var(--ink); white-space: pre-wrap; font-family: inherit; }
.attach-host { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.attach-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 6px; }
.attach-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 2px; }
.attach-name { font-size: 13.5px; color: var(--ink); }
.email-log-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 8px; }
.email-log-row.failed { border-left: 3px solid var(--danger); }
.email-log-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.email-log-subject { font-weight: 650; font-size: 14px; color: var(--ink); }
.email-log-meta, .email-log-atts { font-size: 12px; }
.email-log-err { font-size: 12px; color: var(--danger); }
.email-log-status { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; align-self: center; }
.email-log-status.ok { color: var(--ok); background: var(--ok-bg); }
.email-log-status.bad { color: #fff; background: var(--danger); }

/* ---------- Multi-device booking blocks ---------- */
.device-blocks { display: flex; flex-direction: column; gap: 16px; }
.device-block {
  border: 1px solid var(--glass-border); border-radius: 14px; padding: 16px;
  background: var(--glass-2); box-shadow: inset 0 1px 0 var(--glass-edge);
  position: relative; animation: combo-in .18s ease;
}
.device-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.device-block-title { font-weight: 700; font-size: 14px; color: var(--brand-300); letter-spacing: .3px; }
.device-block-remove {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--glass-border);
  background: var(--glass-2); color: var(--danger); cursor: pointer; font-size: 13px; line-height: 1;
  transition: all .12s;
}
.device-block-remove:hover { background: rgba(220,53,69,.14); border-color: var(--danger); }
.add-device-btn {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-2); border: 1px dashed var(--brand-300); color: var(--brand-300); font-weight: 650;
}
.add-device-btn:hover { background: var(--brand-glow); border-style: solid; }
.add-device-plus {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  background: var(--brand); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 700;
}
/* "(+N more)" pill for multi-device tickets in the workshop list. */
.more-pill {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  color: var(--brand-300); background: var(--brand-glow); border-radius: 999px;
  padding: 1px 8px; vertical-align: middle;
}

/* ---------- Device tabs in the job detail modal ---------- */
.device-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--glass-border);
}
.device-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-2);
  color: var(--muted); cursor: pointer; font-size: 13px; transition: all .12s;
}
.device-tab:hover { border-color: var(--brand-300); color: var(--ink); }
.device-tab.active { background: var(--brand-glow); border-color: var(--brand); color: var(--ink); font-weight: 650; }
.device-tab .dt-name { font-weight: 650; }
/* Unsaved-changes dot on a device tab — edits are kept per tab until Save. */
.device-tab .dt-dirty { color: var(--accent); font-size: 14px; line-height: 1; margin-left: 2px; }
/* Per-type numbering format rows in Settings. */
.num-type-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.num-type-row:last-of-type { border-bottom: 0; }
.num-type-name { display: flex; flex-direction: column; gap: 2px; min-width: 130px; font-weight: 650; font-size: 14px; color: var(--ink); padding-top: 6px; }
.num-type-name .num-eg { font-weight: 500; font-size: 12px; color: var(--muted); }
.num-type-name .num-eg b { color: var(--brand-300); font-family: var(--mono); font-weight: 700; }
.num-type-controls { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 260px; }
.num-type-controls > *:first-child { flex: 1; }
.num-type-controls .field { margin-bottom: 0; width: 130px; flex: 0 0 130px; }

/* ---------- Linked-ticket quick edit inside the appointment form ---------- */
.linked-ticket-panel {
  margin: 4px 0 16px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--glass-border); background: var(--glass-2);
}
.ltp-head { font-weight: 700; font-size: 13px; color: var(--brand-300); margin-bottom: 10px; letter-spacing: .3px; }
.ltp-device {
  padding: 12px; border-radius: 10px; background: var(--glass-1);
  border: 1px solid var(--glass-border); margin-bottom: 10px;
}
.ltp-device:last-child { margin-bottom: 0; }
.ltp-device-name { font-weight: 650; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

/* Warning note (e.g. QuickBooks account-name caution). */
.warn-note {
  padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: rgba(255,170,0,.10); border: 1px solid rgba(255,170,0,.35); color: var(--ink);
}

/* ---------- One-time import from old system ---------- */
.legacy-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.legacy-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 10px; background: var(--glass-1); border: 1px solid var(--glass-border);
  flex-wrap: wrap;
}
.legacy-label { font-size: 13.5px; }
.legacy-pick { display: flex; align-items: center; gap: 10px; }
.legacy-status { font-size: 12px; color: var(--muted); }
.legacy-status.ok { color: var(--brand-300); }
.legacy-done {
  padding: 12px 14px; border-radius: 10px; line-height: 1.6; font-size: 13.5px;
  background: rgba(40,180,120,.10); border: 1px solid rgba(40,180,120,.35); color: var(--ink);
}

/* ---------- Sortable table headers (Workshop list) ---------- */
.tbl th.th-sort {
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color .15s ease;
}
.tbl th.th-sort:hover { color: var(--brand-300); }
.tbl th.th-sort.active { color: var(--brand-300); }
.tbl th.th-sort .sort-arrow { font-size: 10px; opacity: .85; }

/* ---------- In-app PDF viewer ---------- */
.modal.xl { max-width: min(1100px, 96vw); }
.pdf-viewer { display: flex; flex-direction: column; gap: 0; margin: -4px 0; }
.pdf-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px 14px; flex-wrap: wrap; position: sticky; top: 0;
}
.pdf-vw-info { font-size: 15px; }
.pdf-vw-info .muted { font-weight: 400; }
.pdf-vw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pdf-vw-actions .btn-wa { background: #1faa53; color: #fff; border-color: #1faa53; }
.pdf-vw-actions .btn-wa:hover:not(:disabled) { background: #178c44; }
.pdf-frame {
  width: 100%; height: min(72vh, 900px); border: 1px solid var(--glass-border);
  border-radius: 12px; background: #525659;
}
.pdf-fallback { text-align: center; font-size: 12.5px; padding: 8px 0 2px; }
@media (max-width: 640px) {
  .pdf-frame { height: 62vh; }
  .pdf-toolbar { flex-direction: column; align-items: stretch; }
  .pdf-vw-actions { justify-content: space-between; }
}

/* ---------- "What's still missing" checklist (clear, high-visibility) ---------- */
.missing-panel {
  margin: 16px 0 4px; padding: 0; overflow: hidden;
  background: var(--glass);
  border: 2px solid var(--danger); border-radius: 14px;
  box-shadow: 0 6px 22px rgba(198,40,40,.28);
  animation: missingPanelIn .25s ease-out;
}
@keyframes missingPanelIn {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
/* Solid saturated-red banner with WHITE text — reads clearly in every theme. */
.missing-head {
  display: flex; align-items: center; gap: 11px;
  font-size: 16px; font-weight: 750; color: #fff;
  background: var(--danger);
  padding: 13px 16px; margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.missing-head-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: #fff; color: var(--danger); font-weight: 900; font-size: 17px;
}
.missing-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin: 0; }
.missing-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--danger-bg);
  border: 1px solid var(--danger); border-radius: 11px;
}
.missing-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger); color: #fff; font-size: 13px; font-weight: 900;
}
.missing-text { flex: 1; min-width: 0; }
.missing-label { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.missing-hint { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.missing-fix { flex-shrink: 0; font-size: 14px; padding: 9px 16px; }
@media (max-width: 560px) {
  .missing-row { flex-wrap: wrap; }
  .missing-fix { width: 100%; margin-top: 4px; }
}

/* ---------- Missed collections (To Contact) ---------- */
.missed-collections {
  margin: 4px 0 16px; padding: 14px 16px;
  background: rgba(230, 145, 40, .10);
  border: 1.5px solid rgba(230, 145, 40, .55); border-radius: 12px;
}
.missed-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
.missed-head-ic { font-size: 17px; }
.missed-list { display: flex; flex-direction: column; gap: 9px; }
.missed-crow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; background: var(--glass-1);
  border: 1px solid var(--glass-border); border-radius: 10px;
}
.missed-crow .mc-main { flex: 1; min-width: 200px; }
.mc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.mc-was { font-size: 12px; color: #d9822b; font-weight: 650; }
.mc-note {
  margin-top: 5px; font-size: 13px; color: var(--ink);
  background: var(--glass-2); border-radius: 8px; padding: 6px 9px;
  border-left: 3px solid #d9822b;
}
.appt-note {
  margin-top: 3px; font-size: 12.5px; color: var(--muted);
  font-style: italic;
}

/* ---------- To Contact: a ticket with a collection already scheduled ---------- */
.contact-row.has-collection { border-left-color: #1f9d6b; }
.badge.status-badge.coll-scheduled {
  background: rgba(31, 157, 107, .16) !important;
  color: #0f7a50 !important;
  border: 1px solid rgba(31, 157, 107, .5) !important;
}
.coll-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 750; letter-spacing: .3px;
  color: #fff; background: #1f9d6b; border-radius: 999px; padding: 2px 9px;
}
.cr-coll-note {
  margin-top: 6px; font-size: 13px; color: var(--ink);
  background: rgba(31, 157, 107, .10); border-left: 3px solid #1f9d6b;
  border-radius: 8px; padding: 6px 10px;
}
[data-theme="light"] .badge.status-badge.coll-scheduled { color: #0b6b45 !important; }
[data-theme="light"] .cr-coll-note { color: #14181f; }

/* ---------- "Customer was called" (call log) ----------
   A communication flag, deliberately NOT a status. Blue, so it can't be read
   as the green "collection booked" flag or any of the status colours. */
.called-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 750; letter-spacing: .3px; white-space: nowrap;
  color: #fff; background: #2f6fd6; border-radius: 999px; padding: 2px 9px;
}
.cr-call-note, .ticket-call-note {
  margin-top: 6px; font-size: 13px; color: var(--ink);
  background: rgba(47, 111, 214, .12); border-left: 3px solid #2f6fd6;
  border-radius: 8px; padding: 6px 10px;
}
[data-theme="light"] .cr-call-note, [data-theme="light"] .ticket-call-note { color: #14181f; }
/* Compact version on workshop board cards. */
.job-card .called-flag.jc-called { font-size: 9px; padding: 1px 6px; letter-spacing: .3px; }
/* On the ticket: flag + note + "Mark called" button on one wrapping row. */
.ticket-called-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ticket-called-row .ticket-call-note { margin-top: 0; flex: 1 1 200px; }
/* Second chips row (called / not called) sits tight under the status chips. */
.call-filters { margin-top: -8px; }
.contact-chip.chip-called.active { background: rgba(47,111,214,.18); border-color: #2f6fd6; color: #6ba1e8; }
[data-theme="light"] .contact-chip.chip-called.active { color: #1b4fa0; }
/* High contrast: keep the flag/note unmistakable with solid ink + outlines. */
[data-theme="contrast"] .called-flag { background: #0033aa !important; color: #fff !important; }
[data-theme="contrast"] .cr-call-note,
[data-theme="contrast"] .ticket-call-note { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; border-left: 5px solid #0033aa !important; }

/* ---------- Booking: live "still needed" bar ----------
   Pinned to the top of the booking screen and recomputed on every keystroke, so
   the user always knows exactly what is outstanding and where — instead of only
   finding out from a toast when they press "Book in". Goes green when ready. */
.need-bar {
  position: sticky; top: 0; z-index: 20;
  margin: 0 0 16px; padding: 13px 16px;
  background: var(--glass); backdrop-filter: blur(var(--glass-blur));
  border: 2px solid var(--danger); border-radius: 12px;
  box-shadow: 0 6px 22px rgba(198,40,40,.22);
}
.need-head { display: flex; align-items: center; gap: 10px; }
.need-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger); color: #fff; font-weight: 900; font-size: 15px;
}
.need-title { font-size: 15px; font-weight: 750; color: var(--ink); }

.need-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.need-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--danger-bg); border: 1px solid var(--danger);
  color: var(--ink); font-size: 13.5px; font-weight: 650;
  transition: all .12s;
}
.need-chip:hover { background: var(--danger); color: #fff; }
.need-chip:hover .need-chip-x { background: #fff; color: var(--danger); }
.need-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 900;
}

/* Ready state — unmistakably green so "can I save?" is never a guess. */
.need-bar.need-bar-ok {
  border-color: var(--ok);
  box-shadow: 0 6px 22px rgba(21,122,68,.20);
}
.need-bar.need-bar-ok .need-ic { background: var(--ok); }

/* ===========================================================================
   MOBILE LAYOUT  —  body.is-mobile
   ---------------------------------------------------------------------------
   A phone/tablet-optimised layout the user can switch on from Settings or the
   account menu (see setLayoutPref in app.js). It is authoritative: these rules
   win over the width media-queries above via higher specificity, so toggling
   "Mobile layout" gives the touch look on ANY device. On a real phone in auto
   mode it is enabled by default. The look is the SAME glass design — just with
   bigger tap targets, a readable labelled nav, and full-screen dialogs. All
   colours come from theme variables, so every theme (including High Contrast,
   whose !important colour rules still apply) works here unchanged.
   =========================================================================== */

/* ---- Top bar: compact brand row + full-width labelled nav strip below ---- */
body.is-mobile .topbar { height: auto; min-height: 0; }
body.is-mobile .topbar-inner {
  flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 8px 12px; max-width: none; min-height: 0;
}
body.is-mobile .brand { order: 0; }
body.is-mobile .brand-text { display: none; }          /* logo only — keep it tight */
body.is-mobile .topbar-foot { display: none; }
body.is-mobile .nav-labels-toggle { display: none; }   /* labels are always on here */
body.is-mobile .topbar-inner::before { display: none; } /* drop the media-query bell spacer */
/* Account chip sits at the right of the top row, clearing the fixed alert bell. */
body.is-mobile #userChip { order: 5; margin-left: auto; margin-right: 44px; }
body.is-mobile .user-meta { display: none; }            /* avatar + caret only */
body.is-mobile .stale-bell { top: 11px; right: 10px; z-index: 45; }

/* The nav becomes a full-width, horizontally-scrollable strip of labelled
   pills (icon + text always shown) — readable, and each a comfortable tap
   target. The tap-vs-scroll handler in app.js lets a swipe scroll it without
   selecting a tab. */
body.is-mobile .nav {
  order: 9; flex: 0 0 100%; width: 100%; margin: 2px 0 0;
  justify-content: flex-start; gap: 6px; padding: 6px;
  border-radius: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
body.is-mobile .nav-item {
  flex-direction: row; align-items: center; gap: 8px;
  width: auto; height: auto; min-height: 46px; flex-shrink: 0;
  padding: 0 15px; border-radius: 13px;
  scroll-snap-align: start; overflow: visible;
}
body.is-mobile .nav-item.active { width: auto; padding: 0 16px; }
body.is-mobile .nav-ic { width: 22px; height: 22px; }
body.is-mobile .nav-ic svg { width: 21px; height: 21px; }
body.is-mobile .nav-label {
  opacity: 1; max-width: none; overflow: visible;
  font-size: 14px; font-weight: 650; white-space: nowrap;
}
body.is-mobile .nav-item:not(.active)::after { display: none; } /* no hover tooltip on touch */

/* ---- Content clears the (measured) fixed bar; comfortable edge gutters. ---- */
body.is-mobile .main { padding: calc(var(--topbar-h) + 14px) 14px 60px; }
body.is-mobile .page-head h1 { font-size: 22px; }
body.is-mobile .card-pad { padding: 16px; }
body.is-mobile .card + .card { margin-top: 14px; }

/* ---- Everything stacks to a single column (stats keep two for compactness). */
body.is-mobile .grid-2,
body.is-mobile .grid-3,
body.is-mobile .detail-grid,
body.is-mobile .report-controls { grid-template-columns: 1fr; }
body.is-mobile .stat-grid { grid-template-columns: repeat(2, 1fr); }
body.is-mobile .totals-box { width: 100%; }

/* ---- Touch-sized controls. 16px inputs stop iOS from zooming on focus. ---- */
body.is-mobile .btn { min-height: 46px; padding: 11px 18px; font-size: 15px; }
body.is-mobile .btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
body.is-mobile .btn-ghost { min-height: 44px; }
body.is-mobile .input,
body.is-mobile .select,
body.is-mobile .textarea { min-height: 48px; font-size: 16px; padding: 12px 14px; }
body.is-mobile .textarea { min-height: 96px; }
body.is-mobile .field > label { font-size: 14px; }

/* Typeable-dropdown options: bigger, easy to tap. */
body.is-mobile .combo-opt { min-height: 46px; padding: 12px 13px; font-size: 15px; }
body.is-mobile .combo-list { max-height: 320px; }

/* ---- Full-screen dialogs (both modal layers) with big close targets. ---- */
body.is-mobile .modal-overlay { padding: 0; }
body.is-mobile .modal {
  border-radius: 0; max-width: 100%; border-left: 0; border-right: 0;
  min-height: 100vh; min-height: 100dvh;
}
body.is-mobile .modal-head { border-radius: 0; padding: 15px 16px; }
body.is-mobile .modal-body { padding: 16px; }
body.is-mobile .modal-head h2 { font-size: 18px; }
body.is-mobile #modalClose,
body.is-mobile #modalClose2,
body.is-mobile .modal-head .icon-btn {
  min-width: 44px; min-height: 44px; font-size: 20px;
}
/* Confirm dialog: keep it a centred card but give it room and big buttons. */
body.is-mobile .confirm-box { max-width: 100%; padding: 20px; }

/* Ticket read-only details: two compact columns so the key facts (customer,
   device, reported fault) are visible together at the top instead of a long
   single-column scroll, plus a tighter vertical rhythm through the form so
   there's less to scroll past to reach the status controls. */
body.is-mobile .modal .detail-grid { grid-template-columns: 1fr 1fr; gap: 0 16px; }
body.is-mobile .modal .dl { margin-bottom: 9px; }
body.is-mobile .modal .dl dd { font-size: 14px; }
body.is-mobile .modal .divider { margin: 12px 0; }
body.is-mobile .modal .field { margin-bottom: 11px; }

/* ---- Ticket detail: device tabs scroll instead of wrapping into a tall block. */
body.is-mobile .device-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.is-mobile .device-tab { flex-shrink: 0; padding: 10px 14px; font-size: 14px; }

/* ---- Tables stay tabular but scroll sideways with comfortable row height. --- */
body.is-mobile table.tbl th,
body.is-mobile table.tbl td { padding: 13px 14px; }

/* ---- Toasts span the bottom so they're readable and out of the thumb zone. -- */
body.is-mobile .toast-host { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
body.is-mobile .toast { max-width: none; }

/* Landscape phones: the bar was eating the screen. Keep the brand row minimal
   and let the nav strip share the row so most of the height is content. */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-mobile .topbar-inner { flex-wrap: nowrap; padding: 5px 10px; }
  body.is-mobile .nav { order: 2; flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
  body.is-mobile #userChip { margin-right: 8px; }
  body.is-mobile .nav-item { min-height: 42px; }
  body.is-mobile .modal { min-height: auto; }
}

/* ===========================================================================
   AI ASSISTANT
   =========================================================================== */
.assistant-view { display: flex; gap: 16px; height: calc(100vh - var(--topbar-h) - 132px); min-height: 440px; }

/* Sidebar: chat history */
.asst-sidebar { flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px; min-height: 0;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 10px; box-shadow: inset 0 1px 0 var(--glass-edge); }
.asst-newchat { width: 100%; justify-content: center; }
.asst-conv-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.asst-empty-list { padding: 10px 6px; font-size: 13px; }
.asst-conv { display: flex; align-items: stretch; border-radius: 9px; }
.asst-conv:hover { background: var(--glass-2); }
.asst-conv.active { background: var(--brand-glow); }
.asst-conv-open { flex: 1; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--ink); }
.asst-conv-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-conv-meta { font-size: 11px; color: var(--muted); }
.asst-conv-del { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0 9px; border-radius: 9px; opacity: 0; font-size: 12px; }
.asst-conv:hover .asst-conv-del { opacity: 1; }
.asst-conv-del:hover { color: var(--danger); background: var(--danger-bg); }
.asst-side-foot { font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; line-height: 1.5; }
.asst-ok { color: var(--ok); } .asst-bad { color: var(--danger); }

/* Main: thread + composer */
.asst-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--glass-edge); overflow: hidden; }
.asst-thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.asst-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--warn-bg, var(--orange-bg)); border: 1px solid var(--orange); color: var(--ink); padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }

.asst-msg { display: flex; flex-direction: column; max-width: 88%; }
.asst-user { align-self: flex-end; align-items: flex-end; }
.asst-assistant { align-self: flex-start; align-items: flex-start; }
.asst-bubble { padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; word-wrap: break-word; }
.asst-user .asst-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.asst-assistant .asst-bubble { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; }
.asst-bubble code { font-family: var(--mono); background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.asst-err { color: var(--danger); font-weight: 600; }

/* Tool chips above an answer */
.asst-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.asst-tool { font-size: 11px; font-weight: 600; color: var(--brand-300); background: var(--info-bg); border: 1px solid var(--brand-300); border-radius: 999px; padding: 2px 9px; }
.asst-tool.bad { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }

/* Thinking dots */
.asst-thinking { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.asst-dots { display: inline-flex; gap: 3px; }
.asst-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: asstDot 1s infinite ease-in-out; }
.asst-dots span:nth-child(2) { animation-delay: .15s; } .asst-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes asstDot { 0%,80%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Empty / hero state */
.asst-hero { margin: auto; text-align: center; max-width: 460px; padding: 20px; }
.asst-hero-title { font-size: 22px; font-weight: 750; color: var(--ink); }
.asst-hero-sub { font-size: 14px; margin-top: 6px; }
.asst-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.asst-sugg { background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--ink); cursor: pointer; }
.asst-sugg:hover { border-color: var(--brand-300); background: var(--glass); color: var(--brand-300); }

/* Composer */
.asst-composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line); background: var(--glass-2); }
.asst-input { flex: 1; resize: none; min-height: 46px; max-height: 160px; line-height: 1.4; }

/* Dashboard quick-ask */
.asst-quick { margin-bottom: 16px; }
.asst-quick-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.asst-quick-ic { color: var(--brand); flex-shrink: 0; display: inline-flex; }
.asst-quick-input { flex: 1; min-width: 200px; }
.asst-quick-answer { margin-top: 12px; }
.asst-quick-answer .asst-bubble { display: block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.asst-quick-foot { margin-top: 8px; }

/* High-contrast theme */
[data-theme="contrast"] .asst-user .asst-bubble { background: #0033aa !important; color: #fff !important; }
[data-theme="contrast"] .asst-assistant .asst-bubble,
[data-theme="contrast"] .asst-quick-answer .asst-bubble { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; }
[data-theme="contrast"] .asst-tool { border-width: 2px !important; }
[data-theme="contrast"] .asst-sidebar, [data-theme="contrast"] .asst-main { border: 2px solid #000 !important; }

/* Mobile: stack the history above the chat */
body.is-mobile .assistant-view { flex-direction: column; height: auto; }
body.is-mobile .asst-sidebar { flex: none; max-height: 190px; }
body.is-mobile .asst-main { min-height: 60vh; }
body.is-mobile .asst-msg { max-width: 100%; }

/* Clickable ticket links inside assistant answers */
.asst-link { color: var(--brand-300); font-weight: 650; text-decoration: none; border-bottom: 1px dashed var(--brand-300); cursor: pointer; }
.asst-link:hover { color: var(--brand); border-bottom-style: solid; }
.asst-user .asst-link { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
[data-theme="contrast"] .asst-link { color: #0033aa; border-bottom-color: #0033aa; }
[data-theme="contrast"] .asst-user .asst-link { color: #fff; border-bottom-color: #fff; }

/* ---- Device photos (ticket) ---- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.photo-tile {
  position: relative; display: block; padding: 0; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.photo-tile:hover img { transform: scale(1.04); }
.photo-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.photo-tag {
  position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff;
}
body.is-mobile .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ---- Payments on an invoice (deposits / part payments) ---- */
.b-partial { background: var(--orange-bg); color: var(--orange); }
.pay-of { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pay-box { max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; }
.pay-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pay-stat { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; min-width: 0; }
.pay-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.pay-stat-value { font-size: 15px; font-weight: 750; color: var(--ink); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-stat.ok .pay-stat-value { color: var(--ok); }
.pay-stat.due { border-color: var(--orange); }
.pay-stat.due .pay-stat-value { color: var(--orange); }
.pay-list { margin-top: 12px; border-top: 1px solid var(--line); }
.pay-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.pay-row-what { flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-row-amt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.pay-form { margin-top: 14px; }
.pay-quick { display: flex; gap: 6px; margin-top: 6px; }
.pay-warn { color: var(--danger) !important; }
body.is-mobile .pay-summary { grid-template-columns: 1fr; }

/* ---- Phone country-code picker ---- */
.phone-field .phone-code-btn { border: 0; border-right: 1px solid var(--line-strong); cursor: pointer; gap: 5px; display: inline-flex; align-items: center; font-family: inherit; min-width: 58px; justify-content: center; }
.phone-field .phone-code-btn:hover, .phone-field .phone-code-btn:focus-visible { background: var(--glass-2); outline: none; }
.phone-code-caret { font-size: 10px; opacity: .7; }
.phone-code-pop {
  position: fixed; z-index: 200; background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; animation: combo-in .14s ease;
}
.phone-code-search { margin-bottom: 6px; }
.phone-code-list { max-height: 250px; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.phone-code-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); padding: 7px 11px 3px; }
.phone-code-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-code-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.phone-code-list .combo-opt.selected::after { margin-left: 6px; }

/* ---- Device label print window ---- */
.label-box { max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; }
.label-preview { background: repeating-conic-gradient(rgba(127,127,127,.16) 0% 25%, transparent 0% 50%) 50% / 16px 16px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; justify-content: center; }
.label-preview img { max-width: 100%; max-height: 260px; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); background: #fff; }
.label-opts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.label-opt { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; color: var(--ink); }
.label-warn { color: var(--orange) !important; }

/* ===========================================================================
   Reports (rp-*): KPI tiles, charts, ranked bars. Everything fades / grows into
   view; nothing moves for people who ask their system for reduced motion.
   =========================================================================== */
.rp-bar { padding: 14px 16px 12px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 30; /* its drop-down lists open above the tiles below */ }
.rp-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; z-index: 2; }
.rp-bar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-custom { display: inline-flex; align-items: center; gap: 8px; }
.rp-custom .input { width: auto; }
.rp-cmp { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); cursor: pointer; user-select: none; }
.rp-cmp input { width: 16px; height: 16px; accent-color: var(--brand); }
.rp-range-text { font-size: 13.5px; color: var(--ink); }
.rp-range-text span { color: var(--muted); margin-left: 6px; }
.rp-tabs { align-self: flex-start; position: relative; z-index: 1; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rp-tabs::-webkit-scrollbar { display: none; }
.rp-tabs button { white-space: nowrap; }

.rp-body { display: flex; flex-direction: column; gap: 16px; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.rp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .rp-grid2 { grid-template-columns: 1fr; } }

/* Entrance: rise and fade in, one after another (--d is each item's delay). */
.rp-in { animation: rpIn .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rpIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* KPI tiles */
.rp-kpi {
  position: relative; overflow: hidden; padding: 16px 16px 12px; border-radius: var(--radius);
  background: var(--glass, var(--surface)); border: 1px solid var(--glass-border, var(--line));
  box-shadow: inset 0 1px 0 var(--glass-edge, transparent), var(--shadow);
  display: flex; flex-direction: column; gap: 6px; min-height: 124px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rp-kpi::after { /* a faint glow in the corner, in the brand colour */
  content: ""; position: absolute; width: 140px; height: 140px; right: -60px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow, rgba(59,158,255,.16)), transparent 70%); pointer-events: none;
}
.rp-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 45%, var(--glass-border, var(--line))); }
.rp-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-kpi-lab { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.rp-kpi-val { font-size: 27px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.rp-kpi-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.rp-kpi-note { font-size: 12.5px; color: var(--muted); }
.rp-kpi-spark { width: 110px; height: 32px; flex: none; }
.rp-spark { width: 100%; height: 100%; display: block; overflow: visible; }
.rp-spark-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: rpDraw 1s .25s ease forwards; }
.rp-spark-area { opacity: 0; animation: rpFade .8s .45s ease forwards; }
@keyframes rpDraw { to { stroke-dashoffset: 0; } }
@keyframes rpFade { to { opacity: 1; } }

.rp-delta { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rp-delta.up { color: var(--ok); background: var(--ok-bg); }
.rp-delta.down { color: var(--danger); background: var(--danger-bg); }
.rp-delta.flat { color: var(--muted); background: var(--slate-bg); }

/* "Right now" strip */
.rp-now {
  display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 0;
  border-radius: var(--radius); border: 1px solid var(--glass-border, var(--line)); background: var(--glass-2, var(--surface-2)); overflow: hidden;
}
.rp-now-title { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); padding: 10px 8px; border-right: 1px solid var(--glass-border, var(--line)); }
.rp-now-item { padding: 12px 16px; border-right: 1px solid var(--glass-border, var(--line)); display: flex; flex-direction: column; gap: 2px; }
.rp-now-item:last-child { border-right: 0; }
.rp-now-val { font-size: 21px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-now-item.ok .rp-now-val { color: var(--ok); }
.rp-now-item.warn .rp-now-val { color: var(--warn); }
.rp-now-item.danger .rp-now-val { color: var(--danger); }
.rp-now-lab { font-size: 12.5px; color: var(--muted); }
.rp-now-sub { font-size: 12px; color: var(--ink); opacity: .8; }

/* Cards holding charts */
.rp-card {
  position: relative; padding: 16px 18px 14px; border-radius: var(--radius);
  background: var(--glass, var(--surface)); border: 1px solid var(--glass-border, var(--line));
  box-shadow: inset 0 1px 0 var(--glass-edge, transparent), var(--shadow); min-width: 0;
}
.rp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rp-card h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.rp-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rp-legend-inline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.rp-legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.rp-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; margin-right: 5px; vertical-align: -1px; }
.rp-dot.s0 { background: var(--brand); }
.rp-dot.s1 { background: var(--ok); }
.rp-dot.ghost { background: transparent; border: 1.5px dashed var(--muted); }

.rp-chart { position: relative; width: 100%; }
.rp-svg, .rp-svg svg { display: block; width: 100%; }
.rp-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; opacity: .8; }
.rp-grid.base { stroke-dasharray: none; opacity: 1; }
.rp-axis { fill: var(--muted); font-size: 11.5px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.rp-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: rpGrow .7s cubic-bezier(.2, .8, .2, 1) both; transition: filter .15s, opacity .15s; }
@keyframes rpGrow { from { transform: scaleY(0); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
.rp-noanim .rp-bar, .rp-noanim .rp-ghost { animation: none; }
.rp-bar[style*="fill"] { }
.rp-ghost { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .55; animation: rpFade .6s .3s both; }
.rp-hit { fill: transparent; cursor: default; }
.rp-hit:hover { fill: var(--brand); fill-opacity: .07; }
.rp-chart path.rp-bar:nth-of-type(n) { }
.rp-tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--glass-strong, var(--surface)); color: var(--ink); border: 1px solid var(--glass-border, var(--line)); border-radius: 10px;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-lg); white-space: nowrap;
}
.rp-tip.on { opacity: 1; }
.rp-tip b { font-weight: 800; }

/* Ranked horizontal bars */
.rp-hbars { display: flex; flex-direction: column; gap: 10px; }
.rp-hrow { display: flex; flex-direction: column; gap: 5px; }
.rp-hlab { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.rp-hname { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-hval { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-htrack { height: 8px; border-radius: 999px; background: var(--slate-bg); overflow: hidden; }
.rp-hfill { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 70%, transparent), var(--brand));
  transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* Donut */
.rp-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rp-donut { width: 150px; height: 150px; flex: none; }
.rp-arc { stroke-linecap: butt; animation: rpArc .9s cubic-bezier(.2, .8, .2, 1) both; transition: stroke-width .15s; }
.rp-arc:hover { stroke-width: 22; }
@keyframes rpArc { from { opacity: 0; stroke-width: 4; } to { opacity: 1; stroke-width: 18; } }
.rp-donut-val { fill: var(--ink); font-size: 15px; font-weight: 800; font-family: var(--font); }
.rp-donut-lab { fill: var(--muted); font-size: 10px; font-family: var(--font); text-transform: uppercase; letter-spacing: .6px; }
.rp-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 160px; }
.rp-leg { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.rp-leg i { width: 10px; height: 10px; border-radius: 3px; }
.rp-leg-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-leg-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rp-tbl th.sortable { cursor: pointer; user-select: none; }
.rp-tbl th.sortable:hover { color: var(--ink); }
.rp-empty { color: var(--muted); font-size: 13.5px; padding: 24px 6px; text-align: center; }

/* Loading */
.rp-skel { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.rp-skel-tile { height: 124px; border-radius: var(--radius); border: 1px solid var(--glass-border, var(--line));
  background: linear-gradient(100deg, var(--glass-2, var(--surface-2)) 30%, var(--glass-highlight, rgba(255,255,255,.06)) 50%, var(--glass-2, var(--surface-2)) 70%);
  background-size: 300% 100%; animation: rpShimmer 1.3s linear infinite; }
@keyframes rpShimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

.rp-how { margin-top: 4px; font-size: 13px; color: var(--muted); }
.rp-how summary { cursor: pointer; font-weight: 700; color: var(--ink); opacity: .8; width: fit-content; }
.rp-how ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; max-width: 900px; }

@media (max-width: 760px) {
  .rp-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-now-title { grid-column: 1 / -1; writing-mode: horizontal-tb; transform: none; border-right: 0; border-bottom: 1px solid var(--glass-border, var(--line)); padding: 8px 14px; text-align: left; }
  .rp-now-item:nth-child(3) { border-right: 0; }
  .rp-now-item:nth-child(2), .rp-now-item:nth-child(3) { border-bottom: 1px solid var(--glass-border, var(--line)); }
  .rp-grid2 { grid-template-columns: 1fr; }
}
body.is-mobile .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.is-mobile .rp-kpi { min-height: 108px; padding: 12px; }
body.is-mobile .rp-kpi-val { font-size: 20px; }
body.is-mobile .rp-kpi-top { flex-wrap: wrap; align-items: flex-start; gap: 4px; }
body.is-mobile .rp-kpi-lab { font-size: 11px; }
body.is-mobile .rp-delta { font-size: 11px; padding: 2px 7px; }
body.is-mobile .rp-card { padding: 14px 12px 12px; }
body.is-mobile .rp-kpi-spark { display: none; }
body.is-mobile .rp-grid2 { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .rp-in, .rp-bar, .rp-ghost, .rp-arc, .rp-spark-line, .rp-spark-area, .rp-skel-tile { animation: none !important; }
  .rp-spark-line { stroke-dashoffset: 0; } .rp-spark-area { opacity: 1; }
  .rp-hfill { transition: none; }
}

/* Quote / invoice editor: line discount, and what fixed the line's device */
.li-table .li-disc { width: 100%; min-width: 70px; }
.li-fix { font-size: 12px; color: var(--muted); margin: 4px 2px 0; line-height: 1.35; }
.li-fix b { color: var(--ink); font-weight: 700; }
.li-was { font-size: 11px; color: var(--muted); text-decoration: line-through; font-weight: 500; }

/* ---------- Users & roles (granular permissions) ---------- */
.role-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid transparent; }
.role-pill.rp-owner { color: #fff; background: linear-gradient(135deg, #b8860b, #e0a82e); }
.role-pill.rp-receptionist { color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.role-pill.rp-technician { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.role-pill.rp-custom { color: var(--ink); background: var(--glass-2); border-color: var(--glass-border); }
.role-pill.rp-none { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.perm-note { padding: 10px 12px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--glass-border); margin-bottom: 12px; font-size: 13px; line-height: 1.45; }
.perm-note.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.perm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.perm-chips.small .perm-chip { font-size: 11px; padding: 1px 7px; }
.perm-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--glass-2); border: 1px solid var(--glass-border); color: var(--ink); }
.perm-chip.ok { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.perm-chip.no { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); text-decoration: line-through; text-decoration-thickness: 1px; }
.perm-summary { display: flex; flex-direction: column; gap: 7px; }
.perm-sum-row { display: flex; align-items: flex-start; gap: 10px; }
.perm-sum-label { flex: 0 0 62px; font-size: 12.5px; font-weight: 800; padding-top: 2px; }
.perm-sum-label.ok { color: var(--ok); }
.perm-sum-label.no { color: var(--danger); }
.perm-preview { margin: -4px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.role-card { display: flex; flex-direction: column; }
.role-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.perm-sum-sticky { position: sticky; top: -1px; z-index: 3; padding: 10px 12px; margin: 0 0 12px; border-radius: 12px; background: var(--surface, var(--glass-2)); border: 1px solid var(--glass-border); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.perm-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.perm-module { border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-2); overflow: hidden; }
.perm-module.pm-full { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.perm-module.pm-some { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.perm-module.pm-none { opacity: .86; }
.pm-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--glass-border); }
.pm-icon { display: inline-flex; color: var(--brand); }
.pm-title { font-weight: 750; font-size: 14px; flex: 1; }
.pm-state { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pm-full .pm-state { color: var(--ok); background: var(--ok-bg); }
.pm-some .pm-state { color: var(--warn); background: var(--warn-bg); }
.pm-none .pm-state { color: var(--danger); background: var(--danger-bg); }
.pm-list { display: flex; flex-direction: column; }
.pm-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-top: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent); transition: background .2s; }
.pm-row:first-child { border-top: 0; }
.pm-row:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.pm-mark { flex: 0 0 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; }
.pm-row.is-on .pm-mark { color: #fff; background: var(--ok); }
.pm-row.is-off .pm-mark { color: var(--danger); background: var(--danger-bg); }
.pm-row.is-off .pm-label { color: var(--muted); }
.pm-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pm-label { font-size: 13.5px; font-weight: 650; }
.pm-desc { font-size: 11.8px; color: var(--muted); }
.pm-row.pm-flash { animation: pmFlash 1.1s ease-out; }
@keyframes pmFlash { 0% { background: color-mix(in srgb, var(--brand) 30%, transparent); } 100% { background: transparent; } }
.ticket-scope-note { padding: 8px 12px; border-radius: 10px; background: var(--glass-2); border: 1px dashed var(--glass-border); font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
@media (max-width: 760px) {
  .perm-modules, .role-grid { grid-template-columns: 1fr; }
  .perm-sum-label { flex-basis: 54px; }
}


/* ---------- Parts & components ---------- */
.parts-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 6px; }
.parts-kpi { padding: 12px 14px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.parts-kpi.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.parts-kpi-val { font-size: 20px; font-weight: 800; }
.parts-kpi.warn .parts-kpi-val { color: var(--warn); }
.parts-kpi-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.parts-kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-spec { color: var(--brand); font-weight: 650; }
.part-code { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.stock-low { color: var(--warn); font-weight: 800; }
.parts-empty h3 { margin: 0 0 6px; }
.part-sub { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.part-each { font-size: 12.5px; color: var(--ok); font-weight: 700; margin-top: 4px; min-height: 16px; }
.parts-tbl td.num, .parts-tbl th.num, .parts-used td.num, .parts-used th.num { text-align: right; }
.parts-section .parts-used { margin-top: 8px; }
.parts-used .pp-qty { width: 76px; text-align: right; display: inline-block; }
.parts-total { margin-top: 8px; font-size: 13.5px; }
.pp-profit { color: var(--ok); } .pp-loss { color: var(--danger); }
.pp-logged { color: var(--ok); font-weight: 700; }
.parts-picker { min-width: min(560px, 86vw); }
.pp-ticket { margin-bottom: 10px; }
.pp-ticket-ask label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.pp-row { display: flex; gap: 8px; }
.pp-row .input { flex: 1; }
.pp-ticket-head { display: flex; align-items: center; gap: 10px; }
.pp-devs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-dev { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-2); color: var(--ink); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.pp-dev.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pp-already { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.pp-searchwrap { position: relative; }
.pp-search { font-size: 16px; padding: 12px 14px; }
.pp-results { display: flex; flex-direction: column; margin-top: 4px; border-radius: 10px; overflow: hidden; }
.pp-result { display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--glass-border); background: var(--glass-2); color: var(--ink); cursor: pointer; }
.pp-result.hi, .pp-result:hover { background: color-mix(in srgb, var(--brand) 16%, var(--glass-2)); }
.pp-r-name { font-weight: 700; }
.pp-r-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pp-unknown { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--warn-bg); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pp-pending { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pp-empty { padding: 14px; border: 1px dashed var(--glass-border); border-radius: 10px; text-align: center; font-size: 13px; }
.pp-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.pp-line.pp-flash { animation: pmFlash 1s ease-out; }
.pp-l-name { flex: 1; min-width: 0; }
.pp-stepper { display: flex; align-items: center; gap: 4px; }
.pp-step { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass-1, var(--glass-2)); color: var(--ink); font-size: 18px; font-weight: 800; cursor: pointer; }
.pp-stepper .pp-qty { width: 62px; text-align: center; }
.pp-total { margin-right: auto; font-weight: 700; color: var(--muted); }
.sticker-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.sticker-row { display: flex; align-items: center; gap: 10px; }
.sticker-name { flex: 1; font-weight: 600; }
.sticker-n { width: 70px; }
.modal-overlay-top { z-index: 85; background: rgba(8,12,20,.62); }
@media (max-width: 760px) { .pp-r-meta { display: none; } .parts-kpis { grid-template-columns: 1fr 1fr; } }
.guide-field > .btn { align-self: flex-start; width: auto; }

/* Sign-in: the full logo banner */
.auth-brand-logo { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.auth-banner { width: 100%; height: auto; display: block; border-radius: 12px; }
.auth-brand-logo p { text-align: center; }
.brand-mark img { border-radius: 7px; }