/* Shared web shell and catalogue styles */

/* =====================================================================
   DESIGN TOKENS — UI overhaul Phase 0
   (Documents/UI_Overhaul_Implementation_Plan_v1.md)

   The single source of truth for colour, type, spacing, radii and the
   five semantic status slots. Light values live on :root; the dark
   theme re-values the SAME variables on [data-theme="dark"] — components
   are written once and never mention a theme.

   Rules (enforced from Phase 3, ratcheted by lint in Phase 4):
   - New UI consumes ONLY --bd-* tokens and components.css classes.
   - Status colours come from exactly five slots:
       good / info / warn / crit / neutral. No new status colours.
   - Legacy --color-* variables below are unchanged until the Phase 1
     shell lands (Phase 0 is visually inert apart from the Inter face).
   ===================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/webui/fonts/InterVariable.woff2") format("woff2");
}

/* Manrope — brand voice only (wordmark/lockup). Self-hosted to match the
   Inter pattern above: no CDN, the app has to run offline. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/webui/fonts/Manrope-Variable.woff2") format("woff2");
}

:root {
  /* Tell the browser we manage light/dark ourselves — stops forced
     auto-darkening and keeps native controls/scrollbars on-theme. */
  color-scheme: light;
  /* ground */
  --bd-bg: #f7f9fb;
  --bd-surface: #ffffff;
  --bd-surface-2: #eef3f8;
  --bd-border: #e4eaf0;
  --bd-text: #0f1b28;
  --bd-muted: #5b6b7c;
  /* accent — ACTION colour. Deepened brand cyan so white text on it
     clears 4.5:1 (5.5:1). The bright brand cyan #2fa8e8 is a LOGO and
     dark-mode colour; it must never carry white text on light ground. */
  --bd-accent: #0c6ea8;
  --bd-accent-strong: #095982;
  --bd-accent-soft: #e6f2fa;
  /* brand-only — logo, chrome marks, decorative rules. Not for text. */
  --bd-brand-cyan: #2fa8e8;
  --bd-brand-buoy: #e4572e;
  /* Buoy darkened for UI fills that carry white text (avatars, chips) */
  --bd-brand-buoy-ink: #c2431f;
  /* app chrome (workspace/module bars) */
  --bd-chrome: #0b2540;
  /* Printed-document grounds. A logo preview shows what PRINTS, and paper is
     white and the header band is deep navy in both app themes — so these two
     are deliberately NOT redefined under dark mode. */
  --bd-paper: #ffffff;
  --bd-paper-band: #0b2540;
  /* Muted ink ON paper (label designer placeholders): paper stays white in
     dark mode, so --bd-muted (light there) can't carry text on it. 7.2:1. */
  --bd-paper-ink: #4a5866;
  --bd-chrome-text: #b9c7d4;
  --bd-chrome-active: #16324f;
  /* Reversed-panel inks — for content sitting ON the chrome ground (the
     sign-in card). The ground tokens above and the legacy --color-*
     literals are all tuned for a LIGHT surface, so anything placed on
     navy must come from this group instead. Values are identical in both
     themes: --bd-chrome is deep navy either way (#0b2540 / #08182a), so
     one set clears 4.5:1 on both and re-valuing per theme would only let
     the card drift. Measured in-browser, light / dark:
       strong  #fff    ink on card      15.5 / 17.4:1
       text    #b9c7d4 labels            9.0 /  6.7:1
       accent  navy ink on cyan fill     5.8 /  6.7:1  (white on that
               cyan is only 2.7:1 — cyan fills take NAVY ink, never white)
       good    #4cc98a                   7.4 /  8.4:1
       crit    #ef7070                   5.3 /  6.0:1  */
  --bd-chrome-strong: #ffffff;
  --bd-chrome-line: #21405f;
  --bd-chrome-accent: #2fa8e8;
  --bd-chrome-accent-strong: #63c0f2;
  --bd-chrome-good: #4cc98a;
  --bd-chrome-crit: #ef7070;
  /* semantic status — the ONLY five. Deliberately UNCHANGED by the brand
     pass: Buoy sits near warn/crit, so it never appears on a status chip. */
  --bd-good: #177a45;    --bd-good-bg: #e4f4ea;
  --bd-info: #0d63c8;    --bd-info-bg: #e7f0fb;
  --bd-warn: #a35c07;    --bd-warn-bg: #fdf1de;
  --bd-crit: #c22f2f;    --bd-crit-bg: #fbe9e9;
  --bd-neutral: #5b6b7c; --bd-neutral-bg: #edf1f4;
  /* Marina map fills (map Slice M1): the same five meanings as a berth's
     fill, outline and the ink on it — strong enough to read across a
     pontoon, re-valued per theme. Occupied is a solid fill, vacant an
     outline; ghost is anything outside the current view's concern. */
  --bd-map-good-fill: #9fd8b5;    --bd-map-good-line: #177a45;
  --bd-map-info-fill: #aecdf2;    --bd-map-info-line: #0d63c8;
  --bd-map-warn-fill: #f3c98a;    --bd-map-warn-line: #a35c07;
  --bd-map-crit-fill: #ef9f9f;    --bd-map-crit-line: #c22f2f;
  --bd-map-neutral-fill: #c3ced8; --bd-map-neutral-line: #5b6b7c;
  --bd-map-ghost: #e3e8ed;        --bd-map-ink: #14212c;
  /* The signature pad (contracts Slice 11) is paper in both themes: the
     signature is stored and printed on a white document, so it is drawn
     dark-on-white whatever the screen's theme. Not re-valued for dark. */
  --bd-sigpad-bg: #ffffff;        --bd-sigpad-ink: #111827;
  --bd-map-structure: #1d2733;
  /* search-match highlight — a reading aid, NOT status. Kept out of the five
     semantic slots on purpose: a highlighted word says "your term is here",
     never "this is a warning". */
  --bd-highlight-bg: #fdeeb8; --bd-highlight-ink: #4a3708;
  /* engine kind — a category tint for engine rows (inboard / outboard /
     drive & gearbox / generator), NOT status: it says what the unit is,
     never how it is. Hues kept clear of good/warn/crit on purpose. */
  --bd-kind-inboard: #3f51b5;   --bd-kind-inboard-bg: #eef0fb;
  --bd-kind-outboard: #0e7c7b;  --bd-kind-outboard-bg: #e5f4f3;
  --bd-kind-drive: #8a3fa8;     --bd-kind-drive-bg: #f5ecf9;
  --bd-kind-generator: #7d6230; --bd-kind-generator-bg: #f5efe4;
  /* weather glyphs — illustration, NOT status. Never use these to signal
     state; the five semantic slots above remain the only status colours. */
  --bd-wx-sun: #e8a317;
  --bd-wx-moon: #8496ab;
  --bd-wx-cloud: #b3c1cf;
  --bd-wx-rain: #4a8fd6;
  --bd-wx-snow: #7fb2e0;
  --bd-wx-bolt: #e8a317;
  /* type scale — five steps, nothing else */
  --bd-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* brand voice type — Manrope, for the wordmark/lockup ONLY (see
     .bd-wordmark). Product UI stays on --bd-font and the five steps. */
  --bd-font-brand: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  /* machine strings a person copies or compares character by character —
     tokens, URLs, codes (.bd-input--mono). Never body text. */
  --bd-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --bd-fs-display: 20px;   /* page titles, weight 650 */
  --bd-fs-title: 16px;     /* card & modal headings, weight 650 */
  --bd-fs-body: 13px;      /* tables, forms, controls, weight 450 */
  --bd-fs-caption: 12px;   /* metadata, helper text */
  --bd-fs-micro: 10.5px;   /* column headers, section labels — 700, caps, +.07em */
  /* spacing */
  --bd-sp-1: 4px; --bd-sp-2: 8px; --bd-sp-3: 12px;
  --bd-sp-4: 16px; --bd-sp-5: 20px; --bd-sp-6: 24px;
  /* radii */
  --bd-r-lg: 12px; --bd-r-md: 9px; --bd-r-sm: 7px; --bd-r-pill: 999px;
  /* elevation */
  --bd-shadow-1: 0 8px 24px rgba(15, 27, 40, 0.08);
  --bd-shadow-2: 0 14px 38px rgba(5, 10, 16, 0.22);
  /* density */
  --bd-row-h: 36px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bd-bg: #0b1219;
  --bd-surface: #141d27;
  --bd-surface-2: #1b2531;
  --bd-border: #26313e;
  --bd-text: #e6edf3;
  --bd-muted: #8fa1b1;
  /* on dark ground the bright brand cyan IS the accent — 8.4:1 on #141d27 */
  --bd-accent: #2fa8e8;
  --bd-accent-strong: #63c0f2;
  --bd-accent-soft: #10293c;
  --bd-brand-cyan: #2fa8e8;
  --bd-brand-buoy: #f0724c;
  /* Buoy ink is the SAME on both themes: #e4572e gives white text only
     3.2:1, so it can never be the value behind a label. */
  --bd-brand-buoy-ink: #c2431f;
  --bd-chrome: #08182a;
  --bd-chrome-text: #8fa1b1;
  --bd-chrome-active: #123048;
  /* Reversed-panel inks are deliberately NOT re-valued here — see the
     light block. The chrome ground is deep navy in both themes, so
     re-tuning them per theme would only make the sign-in card drift. */
  --bd-good: #4cc98a;    --bd-good-bg: #11301f;
  --bd-info: #4d9fec;    --bd-info-bg: #132c44;
  --bd-warn: #e6a34c;    --bd-warn-bg: #33230c;
  --bd-crit: #ef7070;    --bd-crit-bg: #3a1414;
  --bd-neutral: #8fa1b1; --bd-neutral-bg: #1b2531;
  --bd-map-good-fill: #1f6b44;    --bd-map-good-line: #4cc98a;
  --bd-map-info-fill: #1f4f7c;    --bd-map-info-line: #4d9fec;
  --bd-map-warn-fill: #7a5412;    --bd-map-warn-line: #e6a34c;
  --bd-map-crit-fill: #7d2a2a;    --bd-map-crit-line: #ef7070;
  --bd-map-neutral-fill: #3a4858; --bd-map-neutral-line: #8fa1b1;
  --bd-map-ghost: #1e2733;        --bd-map-ink: #eef3f7;
  --bd-map-structure: #9aa8b6;
  --bd-highlight-bg: #5c4708; --bd-highlight-ink: #ffe9a8;
  --bd-kind-inboard: #8c9bf0;   --bd-kind-inboard-bg: #1a2040;
  --bd-kind-outboard: #4fc4c0;  --bd-kind-outboard-bg: #0f2a2a;
  --bd-kind-drive: #c58ae0;     --bd-kind-drive-bg: #281a32;
  --bd-kind-generator: #d2ad6a; --bd-kind-generator-bg: #2a2314;
  --bd-wx-sun: #f0b93f;
  --bd-wx-moon: #aebdcc;
  --bd-wx-cloud: #7e8ea0;
  --bd-wx-rain: #6cb0ef;
  --bd-wx-snow: #a8cdee;
  --bd-wx-bolt: #f0b93f;
  --bd-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --bd-shadow-2: 0 14px 38px rgba(0, 0, 0, 0.55);
}

/* token utilities */
.tnum { font-variant-numeric: tabular-nums; }

/* ===================== end design tokens ============================ */

/* Legacy variables, re-pointed to the Phase-1 palette (UI overhaul).
   Deliberately LIGHT literals, not var(--bd-*) references: unmigrated
   interiors always render light and coherent; the dark theme applies to the
   shell chrome and token-built (.bd-*) surfaces until each module migrates
   in Phase 3. Old radii/shadows sharpened to match the new look. */
:root {
  --color-bg: #f7f9fb;
  --color-bg-2: #eef3f8;
  --color-surface: #ffffff;
  --color-surface-soft: #f2f6fa;
  --color-border: #e4eaf0;
  --color-text: #0f1b28;
  --color-text-muted: #5b6b7c;
  --color-primary: #0c6ea8;
  --color-primary-strong: #095982;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow-soft: 0 8px 24px rgba(15, 27, 40, 0.08);
}
/* Exception (2026-09-25): a page already on the Helm shell (body.bd-app)
   has a DARK ground in the dark theme, so its unmigrated legacy interior
   cannot stay light — light cards on dark ground, and legacy .btn text
   (--color-text) vanished against it (job sheets, scheduler). On those
   pages only, the legacy tokens follow the theme. --color-primary is left
   alone: white labels need its deep blue, not the dark theme's cyan. */
[data-theme="dark"] body.bd-app {
  --color-bg: var(--bd-bg);
  --color-bg-2: var(--bd-surface-2);
  --color-surface: var(--bd-surface);
  --color-surface-soft: var(--bd-surface-2);
  --color-border: var(--bd-border);
  --color-text: var(--bd-text);
  --color-text-muted: var(--bd-muted);
  --shadow-soft: var(--bd-shadow-1);
}
[data-theme="dark"] body.bd-app .card,
[data-theme="dark"] body.bd-app .sidebar,
[data-theme="dark"] body.bd-app .equipment-search-result { background: var(--bd-surface); }
/* …except the scheduler grid, which is a self-contained LIGHT board (white
   tracks and cards, navy technician column, all literal colours). Until it
   is migrated to tokens it keeps the light legacy values inside it, so its
   labels stay readable in the dark theme. */
[data-theme="dark"] body.bd-app .scheduler-v2-wrap {
  --color-surface: #ffffff;
  --color-surface-soft: #f2f6fa;
  --color-border: #e4eaf0;
  --color-text: #0f1b28;
  --color-text-muted: #5b6b7c;
  color: #0f1b28;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}
a { color: inherit; text-decoration: none; }
.page { padding: 20px; }
.app-shell { display: grid; grid-template-columns: 266px 1fr; gap: 18px; align-items: start; }
.sidebar, .card { background: rgba(255, 255, 255, 0.82); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.sidebar { position: sticky; top: 20px; padding: 18px; }
.sidebar h2 { font-size: 1.05rem; margin: 0 0 14px 0; }
.nav-section { margin-top: 16px; }
.nav-section-title { color: var(--color-text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px 4px; }
.nav-list { display: flex; flex-direction: column; gap: 10px; }
.nav-link { display: block; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(0,0,0,0.03); transition: 0.18s ease; }
.nav-link:hover, .nav-link.active { border-color: rgba(12, 110, 168, 0.6); background: rgba(12, 110, 168, 0.10); }
.nav-title { font-weight: 700; }
.nav-subtitle { color: var(--color-text-muted); margin-top: 6px; font-size: 0.92rem; line-height: 1.35; }
.main-content { min-width: 0; }
.topbar, .hero, .content-grid { display: grid; gap: 18px; }
.topbar { grid-template-columns: 1fr auto; align-items: center; margin-bottom: 18px; }
.brand h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 2vw, 2.5rem); }
.brand p { margin: 0; color: var(--color-text-muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: end; }
.actions a, .btn { padding: 11px 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: rgba(0,0,0,0.04); font-weight: 600; color: var(--color-text); }
.actions a.primary, .btn.primary { background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong)); border-color: transparent; color: white; }
.card.pad { padding: 22px; }
.hero { grid-template-columns: 1.25fr 0.9fr; margin-bottom: 18px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.stat { background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; }
.stat .label { color: var(--color-text-muted); font-size: 0.9rem; }
.stat .value { font-size: 1.6rem; font-weight: 700; margin-top: 8px; }
.content-grid { grid-template-columns: 320px 1fr; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.panel-title h3 { margin: 0; font-size: 1.15rem; }
.list { display: flex; flex-direction: column; gap: 8px; max-height: 68vh; overflow: auto; }
.list-item { border: 1px solid var(--color-border); background: var(--color-surface-soft); border-radius: var(--radius-md); padding: 14px; cursor: pointer; transition: 0.18s ease; }
.list-item:hover, .list-item.active { border-color: rgba(12, 110, 168, 0.7); background: rgba(12, 110, 168, 0.12); }
.list-item .title { font-weight: 700; }
.list-item .subtitle { color: var(--color-text-muted); margin-top: 6px; font-size: 0.93rem; }
.toolbar { display: grid; grid-template-columns: 1.2fr 0.8fr 160px 160px; gap: 12px; margin-bottom: 14px; }
.input, .select { width: 100%; border: 1px solid var(--color-border); background: var(--color-surface-soft); color: var(--color-text); border-radius: var(--radius-sm); padding: 11px 13px; }
.input::placeholder { color: var(--color-text-muted); }
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); vertical-align: top; }
.table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.92rem; }
.table tbody tr:hover { background: rgba(0,0,0,0.04); }
.table-link { color: inherit; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(12, 110, 168, 0.10); border: 1px solid rgba(12, 110, 168, 0.25); color: #1d4e80; font-size: 0.86rem; }
.badge.ok { color: #14532d; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.btn-small { padding: 8px 12px; font-size: 0.92rem; }
.footer-note { margin-top: 18px; color: var(--color-text-muted); font-size: 0.92rem; }
.muted { color: var(--color-text-muted); }
.empty { padding: 28px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center; color: var(--color-text-muted); }
@media (max-width: 1200px) {
  .app-shell, .hero, .content-grid, .topbar, .toolbar, .stats { grid-template-columns: 1fr; }
  .actions { justify-content: start; }
  .sidebar { position: static; }
}


.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-span-2 {
  grid-column: span 2;
}
.field-label {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.required-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(248,113,113,.15);
  color: #c2410c;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
/* Form/page banners — semantic-token colours so text stays legible in BOTH
   themes (the old #fecaca-style light text was invisible on light mode). */
.form-message {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--bd-text);
  font-weight: 600;
}
.form-message.error {
  background: var(--bd-crit-bg);
  border-color: var(--bd-crit);
  color: var(--bd-crit);
}
.form-message.success {
  background: var(--bd-good-bg);
  border-color: var(--bd-good);
  color: var(--bd-good);
}
.form-message.hidden {
  display: none !important;
}
/* Same treatment for the .notice banner (club pages) — previously unstyled. */
.notice {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--bd-text);
  font-weight: 600;
}
.notice.error   { background: var(--bd-crit-bg); border-color: var(--bd-crit); color: var(--bd-crit); }
.notice.success { background: var(--bd-good-bg); border-color: var(--bd-good); color: var(--bd-good); }
.notice.hidden  { display: none !important; }


body.sidebar-collapsed .app-shell {
  grid-template-columns: 1fr;
}
body.sidebar-collapsed .sidebar {
  display: none;
}
.shell-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.shell-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(0,0,0,0.04);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover {
  border-color: rgba(12, 110, 168, 0.6);
  background: rgba(12, 110, 168, 0.10);
}
.toolbar-label {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.placeholder-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}
.placeholder-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.placeholder-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  padding: 14px;
}
.placeholder-item strong {
  display: block;
  margin-bottom: 6px;
}
@media (max-width: 1200px) {
  .placeholder-hero { grid-template-columns: 1fr; }
}


.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.detail-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  padding: 14px;
}
.detail-item .k {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail-item .v {
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-wrap;
}
.tab-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(12, 110, 168, 0.55);
  background: linear-gradient(180deg, rgba(51, 96, 223, 0.96), rgba(30, 69, 181, 0.96));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.tab-btn:hover,
.tab-btn.active {
  border-color: rgba(157, 186, 255, 0.92);
  background: linear-gradient(180deg, rgba(74, 122, 255, 1), rgba(38, 81, 205, 1));
  color: #fff;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}


.boat-details-split{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);gap:1rem;align-items:start}
.detail-column{background:rgba(255,255,255,.82);border:1px solid var(--color-border);border-radius:16px;padding:1rem;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
.detail-column-readonly{background:rgba(220,230,240,.9)}
.section-subtitle{font-size:.95rem;font-weight:700;margin-bottom:.85rem;color:#fff;background:linear-gradient(180deg,#2563eb,#1d4ed8);padding:.7rem .9rem;border-radius:12px}
.compact-form{gap:.9rem}
.readonly-field .input[readonly]{background:rgba(200,215,228,.7);color:var(--color-text-muted);cursor:default;border-color:var(--color-border)}
.catalogue-summary{padding:.75rem .9rem;border-radius:12px;background:rgba(200,215,228,.6);border:1px dashed rgba(12,110,168,.3);color:var(--color-text-muted)}
.field-dual{display:flex;flex-direction:column;gap:.45rem}
.dual-input-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.dual-input-row label{display:flex;flex-direction:column;gap:.35rem}
.dual-input-row label span{font-size:.8rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
@media (max-width: 1080px){.boat-details-split{grid-template-columns:1fr}}
@media (max-width: 680px){.dual-input-row{grid-template-columns:1fr}}


.page {
  padding: 20px;
  position: relative;
}
.app-shell {
  display: grid;
  grid-template-columns: 266px 1fr;
  gap: 18px;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 72px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 96px);
}
.nav-section:first-of-type {
  margin-top: 8px;
}
.nav-section-admin {
  margin-top: 24px;
  padding-top: 14px;
}
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-link {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.03);
  transition: 0.18s ease;
}
.nav-title {
  font-weight: 700;
  line-height: 1.2;
}
.nav-subtitle {
  display: none;
}
.nav-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(0,0,0,0.03);
}
.nav-group-title {
  font-weight: 700;
  margin-bottom: 10px;
}
.nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-sublink {
  display: block;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: var(--color-text-muted);
  background: rgba(0,0,0,0.04);
  transition: 0.18s ease;
}
.nav-sublink:hover,
.nav-sublink.active {
  color: var(--color-text);
  border-color: rgba(12, 110, 168, 0.6);
  background: rgba(12, 110, 168, 0.14);
}
.shell-toolbar {
  display: none;
}
.shell-controls {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 10px 6px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.90);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}
.nav-toggle-btn {
  width: 46px;
  height: 46px;
  font-size: 1.1rem;
}
.home-btn {
  width: 58px;
  height: 46px;
  font-size: 1.45rem;
}
.toolbar-label {
  display: none;
}
.sidebar-collapsed .app-shell {
  grid-template-columns: 1fr;
}
.sidebar-collapsed .sidebar {
  display: none;
}
@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    min-height: auto;
  }
}


/* Shell navigation tidy pass */
.page {
  padding: 72px 20px 20px;
}

.app-shell {
  min-height: calc(100vh - 92px);
  align-items: stretch;
}

.sidebar {
  top: 72px;
  /* Opt out of .app-shell's align-items:stretch so the sidebar stays
     viewport-height instead of growing to the full page height. That lets
     position:sticky actually pin it: on a long page the nav now locks in
     place and stays visible as you scroll. */
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 112px);
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  padding: 20px 18px 18px;
}

.nav-section:first-child {
  margin-top: 0;
}

.nav-link,
.nav-sublink {
  font-size: 0.98rem;
}

.nav-group-title {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 4px 0 8px 4px;
}

.nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-sublink {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.03);
  transition: 0.18s ease;
}

.nav-sublink:hover,
.nav-sublink.active {
  border-color: rgba(12, 110, 168, 0.6);
  background: rgba(12, 110, 168, 0.10);
}

.nav-section-admin {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.shell-controls {
  position: fixed;
  top: 14px;
  left: 18px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.nav-toggle-btn {
  width: 44px;
  height: 44px;
}

.home-btn {
  width: 54px;
  height: 54px;
}

.icon-glyph {
  line-height: 1;
  font-size: 1.4rem;
}

.home-btn .icon-glyph {
  font-size: 2rem;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 1fr;
}

body.sidebar-collapsed .sidebar {
  display: none;
}

@media (max-width: 900px) {
  .page {
    padding-top: 68px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    min-height: auto;
  }
}


/* Shell chrome + master search */
.page {
  padding-top: 86px;
}

.shell-chrome {
  position: fixed;
  top: 14px;
  left: 18px;
  right: 18px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 14px;
}

.shell-controls {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 0 0 auto;
}

.nav-toggle-btn,
.home-btn {
  width: 46px;
  height: 46px;
}

.home-btn .icon-glyph {
  font-size: 2rem;
}

.shell-search {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 160px minmax(240px, 1fr);
  gap: 10px;
  align-items: center;
}

.shell-search-scope-wrap,
.shell-search-input-wrap {
  min-width: 0;
}

.shell-search-scope,
.shell-search-input {
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.shell-search-scope {
  padding: 0 14px;
}

.shell-search-input {
  padding: 0 16px;
}

.shell-search-input::placeholder {
  color: var(--color-text-muted);
}

.shell-search-input-wrap {
  position: relative;
}

.shell-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(65vh, 560px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.shell-search-results.hidden {
  display: none;
}

.search-group + .search-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.search-group-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 8px 4px;
}

.search-group-items {
  display: grid;
  gap: 8px;
}

.search-result {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(0,0,0,0.04);
  transition: 0.18s ease;
}

.search-result:hover {
  border-color: rgba(12, 110, 168, 0.6);
  background: rgba(12, 110, 168, 0.10);
}

/* Boat-row variant: a flex container so we can mount the row link and the
   ⋮ overflow button side-by-side. The hover/border styles still apply via
   the shared .search-result class above. The actual dropdown menu lives at
   body level (.shell-row-menu) so the results panel's overflow:auto can
   never clip it. */
.search-result-boat,
.search-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
}

.search-result-boat .search-result-main,
.search-result-row .search-result-main {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.search-result-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.search-result-title {
  font-weight: 700;
}

.search-result-meta {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.search-result-location {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.search-result-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
}

.search-result-menu-btn:hover {
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
}

/* ── Nested sub-items beneath a single search result ────────────────────
   When the global search returns a single customer or single boat hit,
   the backend attaches related entities (the customer's boats, or the
   boat's owner/co-owner/billing/primary contact). Those render as a
   compact, indented list of clickable rows under the main result. */
.search-result-block {
  display: block;
}
.search-result-sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 4px 18px;
  padding-left: 14px;
  border-left: 2px solid var(--color-border);
}
.search-result-sub {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}
.search-result-sub:hover {
  border-color: rgba(12, 110, 168, 0.55);
  background: rgba(12, 110, 168, 0.08);
}
.search-result-sub-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.search-result-sub-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
/* A customer hit hangs full boat rows (name, berth, ⋮ menu) off the person,
   so the nested rows are the same component, one notch quieter and tighter. */
.search-result-sublist .search-result-block + .search-result-block {
  margin-top: 4px;
}
.search-result-sublist .search-result {
  background: transparent;
}
.search-result-sublist .search-result-boat {
  padding: 6px 6px 6px 10px;
}
.search-result-sublist .search-result-menu-btn {
  width: 34px;
  height: 34px;
  font-size: 1.4rem;
}
.search-result-sub-empty {
  padding: 6px 12px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Body-level floating menu, positioned by JS via inline left/top. The
   z-index sits above the shell chrome and search results panel so the menu
   is never painted behind them when it overlaps the search bar. */
.shell-row-menu {
  position: fixed;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 6px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shell-row-menu.hidden {
  display: none;
}

.shell-row-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--color-text);
  text-decoration: none;
}

.shell-row-menu-item:hover {
  background: rgba(12, 110, 168, 0.10);
  color: var(--color-text);
}

.shell-row-menu-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.search-empty {
  padding: 14px;
  color: var(--color-text-muted);
}

/* "Create new" affordances shown when search returns nothing.
   Sits directly under the empty-state message in the dropdown. */
.search-create-new {
  margin: 6px 8px 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(12,110,168,.08);
  border: 1px solid rgba(12,110,168,.25);
  display: flex; flex-direction: column; gap: 4px;
}
.search-create-new-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-muted); font-weight: 700; padding: 2px 6px 6px;
}
.search-create-new-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: var(--color-text);
  font-size: 0.92rem; font-weight: 600;
  transition: background 0.12s;
}
.search-create-new-item:hover { background: rgba(12,110,168,.16); }
.search-create-new-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(12,110,168,.85); color: #fff;
  font-weight: 700; font-size: 0.95rem; line-height: 1;
}

.nav-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.03);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

.nav-group-toggle:hover {
  border-color: rgba(12, 110, 168, 0.6);
  background: rgba(12, 110, 168, 0.10);
}

.nav-group-caret {
  transition: transform 0.18s ease;
}

.nav-group.open .nav-group-caret {
  transform: rotate(180deg);
}

.nav-group .nav-sublist {
  display: none;
  margin-top: 8px;
}

.nav-group.open .nav-sublist {
  display: flex;
}

.nav-group-title {
  display: none;
}

@media (max-width: 900px) {
  .page {
    padding-top: 132px;
  }

  .shell-chrome {
    left: 14px;
    right: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .shell-search {
    width: 100%;
    grid-template-columns: 132px minmax(0, 1fr);
  }
}

.toolbar-stock {
  grid-template-columns: 1.4fr 0.9fr 0.9fr 0.8fr auto 150px;
}
.checkbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  min-height: 46px;
}
.checkbox-chip input {
  margin: 0;
}
.badge-warn {
  color: var(--bd-warn);
  background: var(--bd-warn-bg);
  border-color: var(--bd-warn);
}
@media (max-width: 1200px) {
  .toolbar-stock {
    grid-template-columns: 1fr;
  }
}


.stock-photo-wrap, .stock-qr-wrap { display:flex; align-items:center; justify-content:center; min-height:280px; }
.stock-photo { width:100%; max-height:420px; object-fit:contain; border-radius:18px; border:1px solid rgba(255,255,255,.08); }
.stock-qr { width:240px; max-width:100%; height:auto; background:#fff; padding:12px; border-radius:18px; }
.list-item .btn { margin-top:10px; }

/* Boat types settings: the "move them, then delete" strip that opens under a
   type still holding boats or catalogue variations. */
.bt-reassign { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: default; }
.bt-reassign .input { width: auto; min-width: 180px; }
.bt-reassign .btn { margin-top: 0; }
.bt-usage { font-size: 0.85rem; white-space: nowrap; }

.engines-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.detail-stack {
  display: grid;
  gap: 16px;
}
@media (max-width: 1200px) {
  .engines-grid-3 {
    grid-template-columns: 1fr;
  }
}


.engine-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .engine-summary-grid {
    grid-template-columns: 1fr;
  }
}


.detail-link-item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.detail-link-item:hover {
  border-color: rgba(12, 110, 168, 0.6);
  background: rgba(12, 110, 168, 0.10);
}
.detail-link-item .table-link {
  text-decoration: none;
}

.spec-edit-row { display:flex; gap:8px; align-items:center; }
.spec-edit-row .input { flex:1; }
.spec-edit-item .k a { margin-left:8px; }
.engine-spec-apply { min-width:38px; font-weight:700; }
.detail-link-item { text-decoration:none; color:inherit; display:block; }


.owner-actions-bar{display:flex;gap:.75rem;justify-content:flex-end;margin-bottom:1rem;flex-wrap:wrap}
.button-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.7rem 1rem;border-radius:14px;border:1px solid var(--color-border);background:rgba(255,255,255,.82);color:var(--color-text);font-weight:700;text-decoration:none;cursor:pointer;transition:.16s ease}
.button-secondary:hover{border-color:rgba(12,110,168,.4);background:rgba(255,255,255,.96)}
.inline-control-row{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}
.inline-control-row .input{flex:1 1 280px}
.inline-action{white-space:nowrap}
.field-help{margin-top:.35rem;font-size:.8rem;color:var(--color-text-muted)}
.linked-account-box{min-height:46px;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--color-border);background:rgba(255,255,255,.82);color:var(--color-text);font-weight:600;display:flex;align-items:center}
.inline-detail-grid{grid-template-columns:1fr;gap:.55rem}
.inline-detail-grid .detail-item{padding:.75rem .9rem}
.field .input.decimal-input{text-align:left}
@media (max-width: 900px){.owner-actions-bar{justify-content:flex-start}}

.equipment-layout{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.4fr);gap:1rem;align-items:start}
.equipment-search-row{margin-bottom:.85rem}
.equipment-position-input{max-width:140px}
.search-results-panel,.equipment-linked-list,.equipment-parts-sections{display:flex;flex-direction:column;gap:.75rem}
.equipment-search-result,.equipment-engine-row,.equipment-part-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.85rem;padding:.9rem 1rem;border:1px solid var(--color-border);border-radius:14px;background:rgba(255,255,255,.75)}
.equipment-engine-row strong,.equipment-search-result strong,.equipment-part-title strong{color:var(--color-text)}
.equipment-part-section{padding:.9rem 0;border-top:1px solid rgba(148,163,184,.12)}
.equipment-part-section:first-child{padding-top:0;border-top:0}
.equipment-mini-title{margin-bottom:.35rem}
.equipment-mini-title h4{margin:0;font-size:1rem}
.equipment-help{margin-bottom:.7rem}
.equipment-part-main{display:flex;flex-direction:column;gap:.35rem}
.equipment-part-title{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.part-code{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:.18rem .45rem;border-radius:999px;background:rgba(75,99,190,.32);border:1px solid rgba(120,150,255,.22);font-size:.78rem;font-weight:700}
.equipment-part-meta{display:flex;gap:.45rem;flex-wrap:wrap;color:var(--color-text-muted);font-size:.88rem}
.equipment-part-meta span{padding:.14rem .45rem;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.12)}
.equipment-part-source{font-size:.88rem}
.compact-empty{padding:18px}
.danger-soft{background:rgba(80,18,36,.92);border-color:rgba(255,125,155,.24);color:#ffe6ee}
.danger-soft:hover{background:rgba(98,24,46,.96);border-color:rgba(255,145,170,.36)}
@media (max-width: 1100px){.equipment-layout{grid-template-columns:1fr}}


.workshop-job-sheet-list .list-item{min-height:96px;display:flex;flex-direction:column;justify-content:space-between}
.job-sheet-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.job-sheet-detail-actions{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap;margin-bottom:1rem}
.task-entry-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.95fr);gap:1rem;align-items:start}
.task-search-results{display:flex;flex-direction:column;gap:.75rem;max-height:320px;overflow:auto}
.task-search-result{display:flex;align-items:flex-start;justify-content:space-between;gap:.85rem;padding:.9rem 1rem;border:1px solid var(--color-border);border-radius:14px;background:rgba(255,255,255,.75)}
.task-search-result-main{display:flex;flex-direction:column;gap:.35rem}
.task-search-result-meta{display:flex;gap:.45rem;flex-wrap:wrap;color:var(--color-text-muted);font-size:.88rem}
@media (max-width: 1100px){.task-entry-layout{grid-template-columns:1fr}}


/* Workshop job sheet task layout fixes */
.workshop-mini-table.task-lines-table {
  width: 100%;
  table-layout: fixed;
}
.workshop-mini-table.task-lines-table th:first-child,
.workshop-mini-table.task-lines-table td:first-child {
  width: 32%;
}
.workshop-mini-table.task-lines-table th:nth-child(2),
.workshop-mini-table.task-lines-table td:nth-child(2),
.workshop-mini-table.task-lines-table th:nth-child(4),
.workshop-mini-table.task-lines-table td:nth-child(4) {
  width: 24%;
}
.workshop-mini-table.task-lines-table th:nth-child(3),
.workshop-mini-table.task-lines-table td:nth-child(3) {
  width: 10%;
}
.workshop-mini-table.task-lines-table th:nth-child(5),
.workshop-mini-table.task-lines-table td:nth-child(5) {
  width: 10%;
}
.task-description-row td {
  padding-top: 0;
}
.task-description-plain {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin-top: 2px;
  padding: 5px 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 0.96rem;
  line-height: 1.35;
  outline: none;
}
.task-description-plain:focus {
  background: rgba(0,0,0,0.04);
  box-shadow: inset 0 -1px 0 rgba(37,99,235,.35);
}
.inline-stepper .step-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 .55rem;
}
.inline-stepper .table-input {
  height: 38px;
}


/* Pass 89 tidy-ups */
.shell-controls .back-btn{margin-left:6px;}
.account-boat-link-panel{border:1px solid var(--color-border);border-radius:14px;background:rgba(200,215,228,.5);padding:12px;}
.account-boat-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;}
.qty-button-stack{display:flex;flex-direction:column;align-items:center;gap:3px;}
.qty-under{font-size:.8rem;color:var(--color-text-muted);font-weight:700;line-height:1;}
.linked-part-actions{align-items:center;}
.boat-input-wrap{position:relative;display:flex;align-items:center;}
.boat-input-wrap .input{width:100%;padding-right:76px;}
.boat-inline-btn{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;color:var(--color-text-muted);border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;}
.boat-inline-btn:hover{background:rgba(12,110,168,.14);color:var(--color-text);}
.boat-go-btn{right:38px;font-size:15px;}
.boat-clear-btn{right:8px;font-size:20px;}

/* Pass 90: navigation, process, and job sheet boat field polish */
.shell-controls .back-btn .back-arrow-glyph{font-size:1.55rem;font-weight:900;line-height:1;color:var(--color-text-muted);transform:translateX(-1px);text-shadow:none}
.shell-controls .back-btn:hover .back-arrow-glyph{color:var(--color-text);transform:translateX(-3px)}
.boat-input-wrap .input[type="search"]::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.boat-input-wrap .input{padding-right:76px;}
.boat-inline-svg{width:17px;height:17px;display:block;color:currentColor;}
.boat-go-btn{right:38px;font-size:0;color:var(--color-text-muted);}
.boat-clear-btn{right:8px;}
.job-sheet-detail-actions .primary{min-width:150px;}


/* Pass 91: shell button alignment, stronger back arrow, and print button */
.shell-controls { gap: 10px; }
.shell-controls .icon-btn,
.shell-controls .nav-toggle-btn,
.shell-controls .home-btn,
.shell-controls .back-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  min-height: 46px;
  margin-left: 0 !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shell-controls .home-btn .icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  transform: translateY(0);
}
.shell-controls .back-btn .back-arrow-glyph {
  font-size: 2.05rem !important;
  font-weight: 1000 !important;
  color: #d7e4ff !important;
  line-height: 1;
  transform: translateX(-1px) scaleX(1.2);
  text-shadow: 0 0 0 currentColor, 0 1px 0 rgba(255,255,255,.18);
}
.shell-controls .back-btn:hover .back-arrow-glyph { transform: translateX(-3px) scaleX(1.2); }
.job-sheet-detail-actions .icon-action {
  min-width: 44px;
  padding-left: .8rem;
  padding-right: .8rem;
  font-size: 1.05rem;
}
.job-sheet-boat-row {
  text-decoration: none;
  color: inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.status-complete { opacity:.78; }

/* Pass 92: revert back arrow styling while keeping shell buttons aligned */
.shell-controls .back-btn .back-arrow-glyph {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--color-text-muted) !important;
  transform: translateX(-1px) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
}
.shell-controls .back-btn:hover .back-arrow-glyph {
  color: var(--color-text) !important;
  transform: translateX(-3px) !important;
}

/* Boat detail tidy layout */
#boat-specific-form{grid-template-columns:repeat(3,minmax(0,1fr));}
#boat-specific-form .hull-colour-field{grid-column:span 2;}
#boat-specific-form .loa-field{grid-column:1 / span 1;}
#boat-specific-form .displacement-field{grid-column:2 / span 1;}
#boat-specific-form .home-port-field{grid-column:1 / span 1;}
#boat-specific-form .year-field{grid-column:2 / span 1;}
#boat-specific-form .hin-field{grid-column:3 / span 1;}
#boat-specific-form .callsign-field{grid-column:1 / span 1;}
#boat-specific-form .mmsi-field{grid-column:2 / span 1;}
.owner-contact-card{line-height:1.45;}
.soft-divider{border:0;border-top:1px solid rgba(120,150,255,.22);margin:1rem 0;}
.engine-serial-field{margin-top:.55rem;max-width:320px;}
@media (max-width: 900px){#boat-specific-form{grid-template-columns:1fr;}#boat-specific-form .field{grid-column:auto !important;}}

/* Pass 93: unify fleet boat detail form with create-boat form */
#boat-specific-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
#boat-specific-form .boat-name-field{grid-column:auto;}
#boat-specific-form .hull-colour-field{grid-column:auto;}
#boat-specific-form .loa-field{grid-column:auto;}
#boat-specific-form .displacement-field{grid-column:auto;}
#boat-specific-form .year-field{grid-column:auto;}
#boat-specific-form .home-port-field{grid-column:auto;}
#boat-specific-form .hin-field{grid-column:auto;}
#boat-specific-form .callsign-field{grid-column:auto;}
#boat-specific-form .mmsi-field{grid-column:auto;}
.engine-serial-row{margin-top:.7rem;}
.engine-serial-field{display:block;max-width:360px;margin-top:0;}
.equipment-engine-row>div:first-child{flex:1;min-width:0;}

/* Owner details makeover */
.owner-primary-card{display:grid;gap:10px;max-width:760px;}
.owner-large-card{padding:16px 18px;}
.owner-name-large{font-size:1.18rem;line-height:1.35;}
.section-divider{height:1px;background:rgba(120,145,210,.28);margin:22px 0;}
.owner-subtitle{margin-bottom:10px;}
.owner-party-add-grid{display:grid;grid-template-columns:minmax(280px,1.4fr) minmax(180px,.7fr) auto auto;gap:12px;align-items:end;}
.owner-cc-field{display:flex;align-items:center;gap:8px;min-height:40px;color:var(--color-text);font-weight:600;}
.owner-contact-select-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,1fr);gap:14px;max-width:900px;}
.owner-parties-list{margin-top:14px;}
.owner-party-row{align-items:center;}
.owner-party-name{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
@media (max-width: 900px){.owner-party-add-grid,.owner-contact-select-grid{grid-template-columns:1fr;}.owner-cc-field{min-height:auto;}}


/* Pass 95: owner details cleanup and live party linking */
.owner-primary-card .input[name="owner_search"]{font-size:1.08rem;font-weight:800;}
.owner-large-card{font-size:.98rem;}
.owner-contact-line{margin-top:2px;line-height:1.45;}
.owner-party-search-block{max-width:760px;display:grid;gap:10px;}
.owner-party-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}
.owner-party-main{display:grid;gap:8px;min-width:0;flex:1;}
.owner-party-controls{display:grid;grid-template-columns:minmax(180px,260px) auto;gap:12px;align-items:end;}
.compact-inline-field{margin:0;}
.inline-cc{min-height:40px;}
@media (max-width: 900px){.owner-party-row{flex-direction:column;}.owner-party-controls{grid-template-columns:1fr;}}


/* Overlay 97: align job-sheet parts panel with task column and tighten part lines */
.parts-materials-card{width:100%;max-width:100%;}
.compact-part-line{align-items:center;}
.part-required-line{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:4px;}
.part-required-input{width:78px;min-width:78px;height:30px;padding:4px 8px;font-weight:700;text-align:center;}
.service-history-row{align-items:center;gap:1rem;}
.service-history-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;}
@media (max-width:1100px){.parts-materials-card{width:100%;}}

/* Overlay 98: service history table and whole-number part quantities */
.service-history-table-wrap{display:block;}
.service-history-table{display:grid;gap:0;border:1px solid var(--color-border);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.75);}
.service-history-head,.service-history-row-grid{display:grid;grid-template-columns:minmax(260px,1.7fr) minmax(160px,.65fr) minmax(70px,.3fr) minmax(120px,.45fr);gap:16px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--color-border);}
.service-history-head{font-weight:800;color:var(--color-text);background:rgba(12,110,168,.08);}
.service-history-row-grid:last-child{border-bottom:0;}
.service-history-row-grid .badge.table-link{text-decoration:none;display:inline-flex;width:max-content;}
@media (max-width:900px){.service-history-head,.service-history-row-grid{grid-template-columns:1fr;gap:6px;}.service-history-head{display:none;}}

/* Custom searchable dropdown (csd) — used in boat catalogue section */
.csd-wrap{position:relative;}
.csd-control{position:relative;display:flex;align-items:center;}
.csd-input{flex:1;padding-right:28px !important;cursor:pointer;}
.csd-arrow{position:absolute;right:10px;pointer-events:none;color:var(--color-text-muted);font-size:.8rem;line-height:1;}
.csd-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--color-surface,#fff);border:1px solid var(--color-border,#cbd5e1);border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;z-index:200;display:none;}
.csd-dropdown.open{display:block;}
.csd-option{padding:8px 14px;cursor:pointer;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csd-option:hover,.csd-option.csd-focused{background:var(--color-surface-hover,rgba(12,110,168,.08));}
.csd-option.csd-empty{color:var(--color-text-muted);font-style:italic;cursor:default;}
.csd-option.csd-empty:hover{background:none;}

/* Catalogue → boat-specific populate affordances (boat create/detail split) */
/* Uniform label height across the split columns so rows line up whether or
   not a label carries a populate button (buttons are 20px tall). */
.detail-column .field-label{display:inline-flex;align-items:center;gap:4px;min-height:22px;}
.field-populate-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-left:6px;padding:0;
  border:1px solid rgba(12,110,168,.35);border-radius:6px;
  background:rgba(12,110,168,.10);color:var(--color-text);
  font-size:.72rem;line-height:1;cursor:pointer;vertical-align:middle;
}
.field-populate-btn:hover:not(:disabled){background:rgba(12,110,168,.22);}
.field-populate-btn:disabled{opacity:.35;cursor:default;}
.catalogue-populate-all-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.catalogue-populate-hint{font-size:.82rem;color:var(--color-text-muted);}
/* Catalogue browser search bar (boats + engines index pages). Filters all
   three columns at once. */
.catalogue-search-card{margin-bottom:12px;}
.catalogue-search-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.catalogue-search-bar .input{flex:1 1 320px;min-width:220px;}
.catalogue-search-bar .input[type="search"]::-webkit-search-cancel-button{
  display:none;-webkit-appearance:none;
}
.catalogue-search-count{font-size:.82rem;white-space:nowrap;}

/* Catalogue picker scope: restrict the makes/models dropdowns to entries
   already in use, vs searching the full imported catalogue. */
.catalogue-scope-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.catalogue-scope-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.82rem;color:var(--color-text);cursor:pointer;white-space:nowrap;
}
.catalogue-scope-toggle input{cursor:pointer;}
.catalogue-loa-note{
  margin-top:6px;padding:8px 10px;border-radius:8px;
  background:rgba(217,119,6,.10);border:1px dashed rgba(217,119,6,.45);
  color:var(--color-text);font-size:.82rem;line-height:1.4;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.catalogue-loa-note.hidden{display:none;}
.catalogue-loa-note-close{font-size:.78rem;padding:4px 10px;}
.field-populate-btn.loa-note-toggle{
  border-color:rgba(217,119,6,.55);background:rgba(217,119,6,.16);
  color:#b45309;font-weight:800;
}
.field-populate-btn.loa-note-toggle:hover:not(:disabled){background:rgba(217,119,6,.30);}
/* Badge inset on the right of a text input (LOA metres) */
.input-badge-wrap{position:relative;display:flex;align-items:center;}
.input-badge-wrap .input{width:100%;padding-right:32px;}
.input-badge{position:absolute;right:6px;top:50%;transform:translateY(-50%);margin-left:0;}

/* Owner search picker (boat create form) — visually echoes the topbar search */
.owner-picker { position: relative; }
.owner-picker-display {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.owner-picker-display:hover { border-color: rgba(12,110,168,.55); }
.owner-picker-display.is-empty { color: var(--color-text-muted); font-style: italic; }
.owner-picker-clear {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-muted); font-size: 1rem; line-height: 1;
  padding: 0 4px;
}
.owner-picker-clear:hover { color: var(--color-text); }
.owner-picker-clear.hidden { display: none; }
.owner-picker-search { display: none; }
.owner-picker.is-open .owner-picker-display { display: none; }
.owner-picker.is-open .owner-picker-search { display: block; }
.owner-picker-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid rgba(12,110,168,.55);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 0.95rem;
}
.owner-picker-results {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
  max-height: 280px; overflow: auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  padding: 6px; z-index: 100;
  display: flex; flex-direction: column; gap: 2px;
}
.owner-picker-results.hidden { display: none; }
.owner-picker-result {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: transparent; border: none; text-align: left;
  font-family: inherit; color: var(--color-text);
}
.owner-picker-result:hover { background: rgba(12,110,168,.14); }
.owner-picker-empty { padding: 10px; color: var(--color-text-muted); }
.owner-picker-result-title { font-weight: 600; font-size: 0.92rem; }
.owner-picker-result-meta { color: var(--color-text-muted); font-size: 0.8rem; }
.owner-picker-create {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 8px; cursor: pointer;
  background: rgba(12,110,168,.10); border: 1px dashed rgba(12,110,168,.35);
  color: var(--color-text); font-weight: 600; font-size: 0.92rem;
}
.owner-picker-create:hover { background: rgba(12,110,168,.18); }
.owner-picker-create-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(12,110,168,.85); color: #fff;
  font-weight: 700; line-height: 1;
}
/* Create-boat page: owner row sits above the boat-details split */
.boat-create-owner-row {
  display: grid; grid-template-columns: minmax(320px,1fr) minmax(320px,1fr);
  gap: 1rem; margin-bottom: 1rem;
}
@media (max-width: 1080px){ .boat-create-owner-row { grid-template-columns: 1fr; } }

/* Boat detail Workshop grouping */
.workshop-card{display:flex; flex-direction:column; gap:16px;}
.sub-tab-bar.workshop-sub-tabs{justify-content:flex-start; padding:0; margin:2px 0 4px; background:transparent; border:none;}
.workshop-panel{display:none;}
.workshop-panel.active{display:block;}
.compact-panel-title{margin-top:4px;}

.scheduler-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.scheduler-day-chip {
  border: 1px solid rgba(120, 150, 220, 0.28);
  border-radius: 16px;
  padding: 12px;
  background: rgba(80, 110, 180, 0.12);
  min-height: 86px;
}
.scheduler-day-chip strong,
.scheduler-day-chip span,
.scheduler-day-chip em {
  display: block;
}
.scheduler-day-chip strong {
  font-size: 0.9rem;
}
.scheduler-day-chip span,
.scheduler-day-chip em {
  color: var(--muted, #b8c7ef);
  font-style: normal;
  margin-top: 4px;
}
.scheduler-day-chip em {
  font-size: 0.82rem;
}
select[multiple].select {
  min-height: 118px;
  padding: 10px;
}

/* Scheduler task button tidy */
.task-card-description-with-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:center;}
.task-card-description-with-actions .task-description-plain{margin-top:0;}
.task-line-actions-inline{display:flex;gap:.45rem;align-items:center;justify-content:flex-end;white-space:nowrap;}
.task-delete-x{min-width:38px;height:38px;padding:0 .65rem;font-size:1.25rem;line-height:1;font-weight:800;}
.scheduler-source-active{border-color:rgba(120,150,255,.55);box-shadow:0 0 0 1px rgba(120,150,255,.22), 0 18px 40px rgba(0,0,0,.22);}
@media (max-width: 900px){.task-card-description-with-actions{grid-template-columns:1fr}.task-line-actions-inline{justify-content:flex-start;}}

/* Scheduler standard resource timeline */
.scheduler-card { overflow: visible; }
.scheduler-toolbar { align-items: center; }
.scheduler-timeline { overflow-x: auto; padding-bottom: 0.5rem; }
.scheduler-grid-wrap { min-width: 980px; border: 1px solid rgba(117, 146, 255, 0.22); border-radius: 18px; overflow: hidden; background: rgba(9, 19, 48, 0.28); }
.scheduler-grid-header,
.scheduler-resource-row { display: grid; grid-template-columns: 170px minmax(760px, 1fr); }
.scheduler-corner,
.scheduler-resource-label { background: rgba(14, 28, 66, 0.84); border-right: 1px solid rgba(117, 146, 255, 0.2); border-bottom: 1px solid rgba(117, 146, 255, 0.18); padding: 0.8rem 0.9rem; }
.scheduler-corner { font-weight: 800; color: #fff; display: flex; align-items: center; }
.scheduler-resource-label strong { display: block; color: #fff; font-weight: 800; }
.scheduler-resource-label span { display: block; color: #a9c3ff; font-size: 0.82rem; margin-top: 0.2rem; }
.scheduler-header-track { display: grid; grid-template-columns: repeat(var(--sched-cols), minmax(54px, 1fr)); grid-auto-rows: minmax(34px, auto); border-bottom: 1px solid rgba(117, 146, 255, 0.18); }
.scheduler-day-head { background: rgba(73, 101, 255, 0.16); border-right: 1px solid rgba(117, 146, 255, 0.24); padding: 0.45rem 0.55rem; color: #fff; display: flex; gap: 0.45rem; align-items: baseline; }
.scheduler-day-head span { color: #bcd0ff; font-size: 0.82rem; }
.scheduler-hour-head { padding: 0.45rem 0.35rem; border-top: 1px solid rgba(117, 146, 255, 0.12); border-right: 1px solid rgba(117, 146, 255, 0.12); color: #a9c3ff; font-size: 0.78rem; text-align: center; }
.scheduler-row-track { position: relative; display: grid; grid-template-columns: repeat(var(--sched-cols), minmax(54px, 1fr)); min-height: 74px; border-bottom: 1px solid rgba(117, 146, 255, 0.16); }
.scheduler-slot { appearance: none; border: 0; border-right: 1px solid rgba(117, 146, 255, 0.11); background: rgba(255,255,255,0.015); min-height: 74px; cursor: crosshair; }
.scheduler-slot:hover { background: rgba(96, 128, 255, 0.12); }
.scheduler-booking-block { position: absolute; top: 12px; min-height: 48px; border: 1px solid rgba(255,255,255,0.18); border-left: 5px solid #5d7cff; border-radius: 10px; background: rgba(255, 255, 255, 0.90); color: #15203c; box-shadow: 0 12px 24px rgba(0,0,0,0.2); padding: 0.35rem 0.5rem; text-align: left; overflow: hidden; cursor: pointer; z-index: 2; }
.scheduler-booking-block strong { display: block; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheduler-booking-block span { display: block; font-size: 0.72rem; opacity: 0.8; white-space: nowrap; }
.scheduler-month-view { min-width: 980px; border: 1px solid rgba(117, 146, 255, 0.22); border-radius: 18px; overflow: hidden; }
.scheduler-month-row { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid rgba(117, 146, 255, 0.16); }
.scheduler-month-track { display: grid; grid-template-columns: repeat(31, minmax(42px, 1fr)); }
.scheduler-month-cell { min-height: 58px; border-right: 1px solid rgba(117, 146, 255, 0.1); padding: 0.35rem; }
.scheduler-month-cell strong { display: block; color: #fff; font-size: 0.8rem; }
.scheduler-month-cell span { display: block; margin-top: 0.25rem; font-size: 0.7rem; }
.scheduler-month-cell.free span { color: #9fe6b0; }
.scheduler-month-cell.busy { background: rgba(255, 178, 72, 0.14); }
.scheduler-month-cell.busy span { color: #ffd38b; }
.scheduler-source-active { box-shadow: 0 0 0 2px rgba(95, 125, 255, 0.45); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Scheduler v2 true timeline grid — light palette matching app theme */
.scheduler-card{padding:0 !important;}
.scheduler-timeline{overflow:visible;padding:0;}
/* Hovering a task card expands it past the 82px row to show the detail lines.
   A plain overflow:hidden cut that off at the foot of the grid (the last row
   had nowhere to grow). overflow:clip with a clip margin lets a card spill a
   card's worth in any direction while still stopping a long boat name from
   escaping across the page; browsers without it keep the old hidden. */
.scheduler-v2-wrap{border:none;border-radius:0;overflow:hidden;overflow:clip;overflow-clip-margin:72px;background:#fff;box-shadow:none;}
.scheduler-v2-meta{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-bottom:1px solid var(--color-border);background:rgba(12,110,168,.07);color:var(--color-text);}
.scheduler-v2-meta strong{font-size:.95rem;color:var(--color-text);}
.scheduler-v2-meta span{color:var(--color-text-muted);font-size:.84rem;}
.scheduler-v2-header,.scheduler-v2-row,.scheduler-v2-month-row{display:grid;grid-template-columns:156px minmax(0,1fr);}
.scheduler-v2-corner,.scheduler-v2-resource{background:#1e4070;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.1);padding:.75rem .9rem;}
.scheduler-v2-corner{font-weight:800;color:rgba(255,255,255,.7);display:flex;align-items:center;min-height:80px;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;}
.scheduler-v2-resource{min-height:82px;display:flex;flex-direction:column;justify-content:center;gap:.18rem;}
.scheduler-v2-resource strong{display:block;color:#fff;font-weight:700;font-size:.97rem;line-height:1.2;}
.scheduler-v2-resource span{display:block;color:rgba(180,210,255,.7);font-size:.76rem;}
.scheduler-v2-head-track{display:grid;grid-auto-rows:38px 30px;border-bottom:1px solid var(--color-border);}
.scheduler-v2-day{display:flex;align-items:center;justify-content:center;gap:.4rem;background:rgba(12,110,168,.08);border-right:1px solid rgba(12,110,168,.14);border-bottom:1px solid rgba(12,110,168,.14);color:var(--color-text);overflow:hidden;}
.scheduler-v2-day strong{font-size:1rem;font-weight:700;white-space:nowrap;}
.scheduler-v2-day span{color:var(--color-text-muted);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scheduler-v2-day.is-today{background:rgba(12,110,168,.18);border-color:rgba(12,110,168,.32);}
.scheduler-v2-day.is-today strong{color:var(--color-primary);}
.scheduler-v2-hour{display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:.72rem;font-weight:500;border-right:1px solid rgba(71,100,140,.1);background:rgba(255,255,255,.6);overflow:hidden;white-space:nowrap;}
.scheduler-v2-track{position:relative;display:grid;min-height:82px;border-bottom:1px solid rgba(71,100,140,.12);background:#fff;overflow:visible;}
.scheduler-v2-slot{appearance:none;border:0;border-right:1px solid rgba(71,100,140,.1);background:rgba(12,110,168,.018);min-height:82px;cursor:crosshair;transition:background .08s;}
.scheduler-v2-slot.is-today{background:rgba(12,110,168,.055);}
.scheduler-v2-slot:hover{background:rgba(12,110,168,.1);}
.scheduler-v2-booking{position:absolute;top:9px;min-height:48px;border:1px solid rgba(71,100,140,.15);border-left:4px solid #e07020;border-radius:8px;background:#fff;color:#1a2840;box-shadow:0 2px 8px rgba(30,64,112,.12),0 1px 2px rgba(0,0,0,.06);padding:.32rem .42rem;text-align:left;overflow:hidden;z-index:3;cursor:grab;}
.scheduler-v2-booking strong{display:block;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;color:#1a2840;}
.scheduler-v2-booking span:not(.scheduler-v2-resize-handle),.scheduler-v2-booking em{display:none;font-size:.7rem;color:#4a6280;white-space:nowrap;font-style:normal;line-height:1.25;}
.scheduler-v2-booking .tech-label{display:none;font-size:.68rem;font-weight:600;color:var(--color-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scheduler-v2-booking .card-est{display:none;font-size:.68rem;font-weight:700;color:#7a5b16;white-space:nowrap;}
/* A one-hour card is only ~40px wide — its title and boat read as "Ge…".
   Hovering widens it enough to be read; scheduler.js anchors a card with no
   room to its right by its right edge, so the widening grows leftwards. */
.scheduler-v2-booking:hover{overflow:visible;z-index:12;box-shadow:0 6px 20px rgba(30,64,112,.18);min-width:190px;}
.scheduler-v2-booking:hover span:not(.scheduler-v2-resize-handle),.scheduler-v2-booking:hover em,.scheduler-v2-booking:hover .tech-label{display:block;}
/* Widened, the card has room for the whole title — drop the resting ellipsis
   and let the label wrap instead of being cut mid-word. */
.scheduler-v2-booking:hover .card-primary,.scheduler-v2-booking:hover .card-secondary{white-space:normal;overflow:visible;text-overflow:clip;}
.scheduler-v2-month-track{display:grid;}
.scheduler-v2-month-head{min-height:50px;padding:.35rem;text-align:center;border-right:1px solid rgba(71,100,140,.1);border-bottom:1px solid rgba(12,110,168,.14);background:rgba(12,110,168,.06);}
.scheduler-v2-month-head strong{display:block;color:var(--color-text);font-size:.9rem;font-weight:700;}
.scheduler-v2-month-head span{display:block;color:var(--color-text-muted);font-size:.7rem;}
.scheduler-v2-month-cell{min-height:58px;border-right:1px solid rgba(71,100,140,.1);border-bottom:1px solid rgba(71,100,140,.1);padding:.35rem;text-align:center;background:#fff;}
.scheduler-v2-month-cell strong{display:block;color:var(--color-text);min-height:1rem;font-size:.88rem;}
.scheduler-v2-month-cell span{display:block;font-size:.7rem;}
.scheduler-v2-month-cell.free span{color:#16a34a;}
.scheduler-v2-month-cell.busy{background:rgba(224,112,32,.08);}
.scheduler-v2-month-cell.busy span{color:#b45309;}

/* Anytime task strip — floats above the booking blocks inside a track */
.scheduler-v2-anytime-strip{position:absolute;top:0;left:0;right:0;height:26px;display:grid;z-index:4;pointer-events:none;gap:2px;padding:2px 2px 0;}
.scheduler-v2-anytime-pill{pointer-events:auto;display:flex;align-items:center;padding:0 7px;height:22px;border-radius:5px;border-left:3px solid #d97706;background:rgba(255,196,48,.22);color:#92400e;font-size:.68rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background .1s;}
.scheduler-v2-anytime-pill:hover{background:rgba(255,196,48,.4);}
/* When a track has an anytime strip, push regular booking blocks down to avoid overlap */
.scheduler-v2-track.has-anytime .scheduler-v2-booking{top:30px;}
/* Cross-row drag: block passes through, target row resource label highlights */
.scheduler-v2-booking.is-dragging{pointer-events:none;}
.scheduler-v2-row.cross-row-target .scheduler-v2-resource{background:rgba(12,110,168,.82) !important;transition:background .1s;}

@media(max-width:900px){.scheduler-v2-header,.scheduler-v2-row,.scheduler-v2-month-row{grid-template-columns:120px minmax(0,1fr)}.scheduler-v2-corner,.scheduler-v2-resource{padding:.6rem}.scheduler-v2-head-track{grid-auto-rows:34px 28px}.scheduler-v2-resource strong{font-size:.88rem}.scheduler-v2-resource span{font-size:.7rem}}

/* Scheduler/task scheduling polish */
.schedule-date-time-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.schedule-date-input {
  flex: 1 1 auto;
  min-width: 0;
}
.schedule-date-input::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 1;
  cursor: pointer;
}
.schedule-time-button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(139, 165, 255, 0.42);
  background: rgba(46, 75, 151, 0.44);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schedule-time-button:hover { background: rgba(80, 111, 240, 0.52); }
.schedule-time-popover {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(139, 165, 255, 0.28);
  border-radius: 16px;
  background: rgba(10, 25, 62, 0.98);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  position: relative;
  z-index: 20;
}
.schedule-time-title {
  font-weight: 800;
  margin-bottom: 10px;
}
.schedule-time-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #a9c3ff;
  margin-bottom: 10px;
}
.schedule-time-summary span {
  border: 1px solid rgba(139,165,255,.2);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.04);
}
.schedule-time-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.schedule-time-subtitle {
  font-size: .75rem;
  color: #a9c3ff;
  font-weight: 800;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.schedule-time-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  padding-right: 2px;
}
.schedule-time-chip {
  border: 1px solid rgba(139,165,255,.22);
  background: rgba(28, 45, 91, .82);
  color: #fff;
  border-radius: 10px;
  padding: 7px 6px;
  cursor: pointer;
  font-weight: 700;
}
.schedule-time-chip:hover,
.schedule-time-chip.is-selected {
  border-color: rgba(255,255,255,.72);
  background: rgba(80,111,240,.65);
}

/* Task card — default state (yellow = ready, not yet started) */
.scheduler-v2-booking.is-task-line {
  border-left-color: #d97706;
  background: #fffbeb;
}
.scheduler-v2-booking.is-task-line em::before { content: 'Task • '; }

/* Status-specific colours */
.scheduler-v2-booking.is-task-line.status-on-hold  { border-left-color: #dc2626; background: #fef2f2; }
.scheduler-v2-booking.is-task-line.status-complete { border-left-color: #16a34a; background: #f0fdf4; }
.scheduler-v2-booking.is-task-line.status-active   { border-left-color: #0c6ea8; background: #eff6ff; }

/* Overdue accent — thin red stripe across the top (offset for thick left border) */
.scheduler-v2-booking.is-task-line.is-overdue::before {
  content: '';
  position: absolute;
  top: 0; left: 4px; right: 0;
  height: 3px;
  background: #dc2626;
  border-radius: 0 8px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Always-visible primary / secondary card label fields */
.scheduler-v2-booking .card-primary {
  display: block;
  font-size: .8rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15; color: #1a2840;
}
/* Coloured technician initials chip — used in the left task list. Same palette
   as the job-sheet list (techChipColor/techInitials in scheduler.js). */
.sched-tech-chip {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff; font-weight: 700; border-radius: 50%;
  box-sizing: border-box; width: 22px; height: 22px; font-size: .66rem;
}
.sched-tech-chip.is-unassigned { background: var(--bd-muted) !important; }
.scheduler-v2-booking .card-secondary {
  display: block;
  font-size: .68rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #4a6280; line-height: 1.25; margin-top: 1px;
}
.scheduler-v2-booking .card-secondary:empty { display: none; }
.scheduler-v2-booking.is-dragging .card-primary,
.scheduler-v2-booking.is-dragging .card-secondary { display: none !important; }


/* Scheduler time selector and grid placement hard override - 20260428 */
.task-assignment-grid-with-time { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important; align-items: end; }
.schedule-date-time-row { display: flex !important; gap: 8px !important; align-items: center !important; width: 100% !important; }
.schedule-date-input { flex: 1 1 auto !important; min-width: 0 !important; color-scheme: dark; }
.schedule-date-input::-webkit-calendar-picker-indicator { filter: none !important; opacity: 1 !important; cursor: pointer !important; }
.schedule-time-button { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.55) !important; background: rgba(46,75,151,.55) !important; color: #fff !important; font-size: 18px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
.schedule-time-button:hover { background: rgba(80,111,240,.72) !important; }
.schedule-time-icon { display: inline-block; line-height: 1; filter: grayscale(1) brightness(4); }
.schedule-time-inline-summary { margin-top: 6px; color: #a9c3ff; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.schedule-time-popover { margin-top: 10px !important; padding: 12px !important; border: 1px solid rgba(139,165,255,.32) !important; border-radius: 16px !important; background: rgba(10,25,62,.98) !important; box-shadow: 0 18px 40px rgba(0,0,0,.28) !important; position: relative !important; z-index: 50 !important; }
.schedule-time-picker { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.schedule-time-chip-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; max-height: 180px !important; overflow: auto !important; }
.schedule-time-chip { border: 1px solid rgba(139,165,255,.22) !important; background: rgba(28,45,91,.82) !important; color: #fff !important; border-radius: 10px !important; padding: 7px 6px !important; cursor: pointer !important; font-weight: 700 !important; }
.schedule-time-chip.is-selected { border-color: rgba(255,255,255,.72) !important; background: rgba(80,111,240,.65) !important; }
.scheduler-v2-track { grid-auto-rows: 82px; }

/* Absence overlays in scheduler timeline */
.scheduler-v2-absence-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: 0;
}
.scheduler-v2-track { position: relative; }
.absence-overlay-full  { background: repeating-linear-gradient(135deg, rgba(248,113,113,.10) 0px, rgba(248,113,113,.10) 6px, rgba(248,113,113,.04) 6px, rgba(248,113,113,.04) 12px); border-left: 2px solid rgba(248,113,113,.35); }
.absence-overlay-am    { background: repeating-linear-gradient(135deg, rgba(248,113,113,.10) 0px, rgba(248,113,113,.10) 6px, rgba(248,113,113,.04) 6px, rgba(248,113,113,.04) 12px); border-left: 2px solid rgba(248,113,113,.35); }
.absence-overlay-pm    { background: repeating-linear-gradient(135deg, rgba(248,113,113,.10) 0px, rgba(248,113,113,.10) 6px, rgba(248,113,113,.04) 6px, rgba(248,113,113,.04) 12px); }

/* "Out" badge in resource label column */
.resource-absent-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(248,113,113,.15);
  color: #f87171;
  border: 1px solid rgba(248,113,113,.3);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* Scheduler/job-sheet time selector hardening */
.task-assignment-grid-with-time .schedule-date-time-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}
.task-assignment-grid-with-time .schedule-date-input {
  width: 100% !important;
  min-width: 0 !important;
}
.schedule-date-input::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.schedule-time-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(46,75,151,.62) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.schedule-time-icon { color: #fff !important; font-weight: 800 !important; transform: translateY(-1px); }
.schedule-time-popover[hidden] { display: none !important; }
.schedule-time-popover:not([hidden]) {
  display: block !important;
  margin-top: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(146,171,255,.28) !important;
  border-radius: 16px !important;
  background: rgba(12,25,55,.98) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  position: relative !important;
  z-index: 20 !important;
}


/* Scheduler settings / administration user working hours */
.weekday-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.weekday-checks label{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:.86rem;color:var(--muted)}
.weekday-checks input{accent-color:#1f6feb}

/* Weekday pills in Administration > Users */
.weekday-checks label{
  background: rgba(255,255,255,.82) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
.weekday-checks label:has(input:checked){
  background: rgba(12,110,168,.14) !important;
  border-color: rgba(12,110,168,.45) !important;
  color: var(--color-text) !important;
}
.weekday-checks input{ accent-color:#0c6ea8 !important; }
.system-time-card{ margin-top:18px; }

/* Scheduler drag/move/resize interactions */
.scheduler-v2-booking { user-select: none; touch-action: none; cursor: grab; }
.scheduler-v2-booking:active, .scheduler-v2-booking.is-dragging { cursor: grabbing; transition: none !important; }
.scheduler-v2-booking.is-dragging { opacity: .82; z-index: 20 !important; overflow: visible !important; box-shadow: 0 8px 24px rgba(30,64,112,.28) !important; outline: 2px solid var(--color-primary); }
.scheduler-v2-resize-handle { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 8; background: transparent; }
.scheduler-v2-resize-handle.left { left: 0; cursor: ew-resize; border-radius: 8px 0 0 8px; }
.scheduler-v2-resize-handle.right { right: 0; cursor: ew-resize; border-radius: 0 8px 8px 0; }
.scheduler-v2-resize-handle.left:hover, .scheduler-v2-resize-handle.right:hover { background: rgba(12,110,168,.18); }
.scheduler-v2-booking::after { content: '↔'; position: absolute; right: 5px; top: 3px; font-size: .62rem; opacity: .4; pointer-events: none; display: none; color: var(--color-text-muted); }
.scheduler-v2-booking:hover::after { display: block; }
.scheduler-v2-booking.is-dragging::after, .scheduler-v2-booking.is-dragging span:not(.scheduler-v2-resize-handle):not(.drag-time), .scheduler-v2-booking.is-dragging em, .scheduler-v2-booking.is-dragging .tech-label { display: none !important; overflow: hidden !important; }
/* Drag-time tooltip — floats above the booking block, updates live during drag */
.scheduler-v2-booking .drag-time { display: none; }
.scheduler-v2-booking.is-dragging .drag-time {
  display: block;
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #1a2840;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 3px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  pointer-events: none;
  z-index: 30;
}

/* ── Multi-day booking continuation segments ─────────────────────────────
   Continuation blocks (days 2, 3… of a multi-day task) use a hatched left
   edge and reduced opacity to signal they are not the start of the task.      */
.scheduler-v2-booking.is-continuation {
  border-left: 4px solid transparent;
  border-left-style: dashed;
  opacity: .82;
  cursor: default;          /* not independently draggable */
  pointer-events: none;     /* clicks fall through to slots below */
}
.scheduler-v2-booking.is-continuation .card-primary { color: #4a6280; font-style: italic; }
.scheduler-v2-booking.is-continuation::after { display: none !important; }
/* Hide resize-left arrows on continuation segments (no left handle rendered) */
.scheduler-v2-booking.is-continuation .scheduler-v2-resize-handle { display: none; }
/* is-dragging applied to sibling continuation segments — fade them fully out */
.scheduler-v2-booking.is-continuation.is-dragging { opacity: 0; pointer-events: none; }

/* Quick actions menu — shell top right, sits beside the avatar */
.quick-actions-wrap { position: relative; flex: 0 0 auto; margin-left: auto; }
.quick-actions-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3b5bdb 0%, #1e3a8a 100%);
  border: 2px solid rgba(12,110,168,.4);
  color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.quick-actions-btn:hover {
  border-color: rgba(12,110,168,.85);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(12,110,168,.35);
}
.quick-actions-plus { font-size: 1.1rem; line-height: 1; font-weight: 700; }
.quick-actions-label { text-transform: uppercase; }
.quick-actions-caret { font-size: 0.7rem; opacity: .85; }
.quick-actions-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px;
  background: rgba(255,255,255,0.98); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,.45);
  padding: 6px; z-index: 2000;
  animation: avatar-dropdown-in .12s ease;
  display: flex; flex-direction: column; gap: 2px;
}
.quick-actions-dropdown.hidden { display: none; }
.quick-actions-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: transparent; border: none; text-align: left;
  color: var(--color-text); text-decoration: none; cursor: pointer;
  font-family: inherit; transition: background 0.12s;
}
.quick-actions-item:hover { background: rgba(12,110,168,.14); }
.quick-actions-item-title { font-size: 0.92rem; font-weight: 600; }
.quick-actions-item-meta { font-size: 0.78rem; color: var(--color-text-muted); }
.quick-actions-item-disabled,
.quick-actions-item-disabled:hover {
  opacity: .55; cursor: not-allowed; background: transparent;
}

/* User avatar — shell top right */
.user-avatar-wrap { position: relative; flex: 0 0 auto; margin-left: 10px; }
.user-avatar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #3b5bdb 0%, #1e3a8a 100%);
  border: 2px solid rgba(12,110,168,.4);
  color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.user-avatar-btn:hover { border-color: rgba(12,110,168,.85); transform: scale(1.06); box-shadow: 0 4px 14px rgba(12,110,168,.35); }
.user-avatar-initials { pointer-events: none; }
.user-avatar-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px;
  background: rgba(255,255,255,0.97); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,.45);
  padding: 6px; z-index: 2000;
  animation: avatar-dropdown-in .12s ease;
}
@keyframes avatar-dropdown-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.user-avatar-dropdown.hidden { display: none; }
.user-avatar-dropdown-name {
  font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted);
  padding: 6px 12px 8px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-avatar-dropdown-item {
  display: block; width: 100%; text-align: left; text-decoration: none;
  padding: 9px 12px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--color-text); font-size: 0.88rem;
  font-family: inherit; cursor: pointer; transition: background 0.12s;
}
.user-avatar-dropdown-item:hover { background: rgba(12,110,168,.14); }
.user-avatar-dropdown-signout { color: #f87171; }
.user-avatar-dropdown-signout:hover { background: rgba(248,113,113,.1); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
/* Same stacking rule as .bd-modal-veil: must clear #bd-shell (1100) or the
   fixed workspace/module bars paint over the top of the dialog. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px 16px;
  overflow-y: auto;
}
.modal-backdrop.hidden { display: none; }

/* ── Customer-create modal (used by the boat form's owner picker) ────────────
   Pops the real customer-create page in an iframe (?embedded=1) so we
   capture full detail without losing the boat in progress. */
.customer-create-modal-backdrop {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modal-backdrop-in .12s ease;
}
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.customer-create-modal {
  width: min(960px, 100%); max-width: 100%;
  height: min(86vh, 800px);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
}
.customer-create-modal-iframe {
  flex: 1 1 auto; width: 100%; height: 100%;
  border: 0; display: block;
}
.modal {
  background: var(--color-surface, #1e2030);
  border: 1px solid var(--color-border, rgba(255,255,255,.1));
  border-radius: var(--radius, 10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--color-border, rgba(255,255,255,.1));
}
.modal-title { margin: 0; font-size: 1.05rem; font-weight: 600; flex: 1; }
.modal-close {
  background: none; border: none; cursor: pointer; font-size: 1.4rem; line-height: 1;
  color: var(--color-text-muted, #9ca3af); padding: 0 4px;
  border-radius: 4px; transition: color 0.15s;
}
.modal-close:hover { color: var(--color-text, #f1f5f9); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--color-border, rgba(255,255,255,.1));
}
.badge-teal   { background: rgba(20,184,166,.18); color: #2dd4bf; border-color: rgba(20,184,166,.35); }
.badge-purple { background: rgba(167,139,250,.18); color: #a78bfa; border-color: rgba(167,139,250,.35); }
.badge-gold   { background: rgba(250,189,56,.18);  color: #fabd38; border-color: rgba(250,189,56,.35); }
.hidden { display: none !important; }

/* --- Draggable modals ------------------------------------------------------
   Behaviour lives in shell.js (see "Draggable modals"); this is only the
   affordance. Here rather than components.css because most pages load
   design.css alone, and a modal that drags on some pages but not others is
   worse than one that never does. */
.bd-modal__head,
.modal-header {
  cursor: move;
  /* Without this the browser claims the gesture for panning on touch and the
     pointermove events never arrive. */
  touch-action: none;
}
/* Controls inside the header keep their own cursor -- the close X is a
   button, not a grab handle. */
.bd-modal__head button,
.bd-modal__head a,
.modal-header button,
.modal-header a { cursor: pointer; }
/* While a drag is in flight, stop the pointer selecting the title text it
   passes over. */
body.is-modal-dragging { user-select: none; }

/* ── Shared per-action permission grid (perm_grid.js) ─────────────────────
   Categorised by module: each module is a collapsible section with a
   granted-count pill and All view / All actions bulk toggles; the toolbar
   adds search, a granted-only filter and expand/collapse all. */
.perm-grid{display:flex;flex-direction:column;gap:10px}
.perm-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.perm-toolbar .perm-search{flex:1;min-width:180px}
.perm-toolbar .perm-total{margin-left:auto;white-space:nowrap}
.perm-mods{display:flex;flex-direction:column;gap:8px}
.perm-mod{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-soft);overflow:hidden}
.perm-mod__head{display:flex;align-items:center;gap:12px;padding:5px 12px;flex-wrap:wrap}
.perm-mod__toggle{display:inline-flex;align-items:center;gap:9px;background:none;border:none;color:var(--color-text);font-weight:600;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;padding:5px 0;font-family:inherit}
.perm-mod__chev{display:inline-block;border:solid currentColor;border-width:0 2px 2px 0;padding:2.5px;transform:rotate(-45deg);transition:transform .15s ease}
.perm-mod.is-open .perm-mod__chev{transform:rotate(45deg)}
.perm-mod__count{font-size:.78rem;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:999px;padding:1px 9px;white-space:nowrap}
.perm-mod__count.is-granted{color:var(--color-primary);border-color:var(--color-primary)}
.perm-mod__bulk{margin-left:auto;display:inline-flex;gap:6px}
.perm-mod__body{background:var(--color-surface);padding:2px 12px 8px;border-top:1px solid var(--color-border)}
.perm-mod__cols,.perm-row{display:grid;grid-template-columns:minmax(150px,36%) 56px minmax(0,1fr);gap:10px;align-items:center;padding:4px 0;border-bottom:1px solid rgba(148,163,184,0.07)}
.perm-mod__cols{font-size:.75rem;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.perm-mod__cols span:nth-child(2){text-align:center}
.perm-row:last-child{border-bottom:none}
.perm-row__label{color:var(--color-text);font-size:.9rem}
.perm-row__view{text-align:center}
.perm-row__actions{display:flex;flex-wrap:wrap}
.perm-grid input[type="checkbox"]{accent-color:var(--color-primary);width:16px;height:16px;cursor:pointer}
.perm-action{display:inline-flex;align-items:center;gap:5px;margin:2px 14px 2px 0;font-size:.85rem;color:var(--color-text);cursor:pointer;white-space:nowrap}
.perm-action input{margin:0}
.perm-scroll{max-height:60vh;overflow-y:auto}

/* =====================================================================
   HELM SHELL — UI overhaul Phase 1
   Fixed two-row chrome, 86px total (matching the .page padding-top the
   legacy pages already budget for): 50px workspace bar + 36px module bar.
   The legacy sidebar <aside data-shared-sidebar> is retired below.
   ===================================================================== */

/* retire the sidebar: hide the aside, collapse the shell grid */
aside[data-shared-sidebar], .sidebar { display: none !important; }
.app-shell { grid-template-columns: 1fr !important; }
body.sidebar-collapsed .app-shell { grid-template-columns: 1fr !important; }

#bd-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  font-family: var(--bd-font);
}
#bd-shell * { box-sizing: border-box; }

.bd-ws-bar {
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 16px;
  background: var(--bd-chrome); color: var(--bd-chrome-text);
}
.bd-back-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  background: none; border: 1px solid transparent; border-radius: 7px;
  color: var(--bd-chrome-text); font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding-bottom: 3px;
}
.bd-back-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
/* Brand slot = the Boatworks mark + "Today", links to /web/today. The mark
   is the app's brand presence in the chrome; the label stays "Today"
   because this doubles as that page's active-tab indicator (.is-active
   from shell.js) — it is navigation, not a wordmark. */
.bd-brand {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  color: #fff; font-weight: 650; font-size: 15px; text-decoration: none;
  margin-right: 10px; padding: 5px 12px 5px 10px; border-radius: 8px;
}
.bd-brand:hover { background: rgba(255, 255, 255, 0.06); }
.bd-brand.is-active { background: var(--bd-chrome-active); box-shadow: inset 0 -2px 0 var(--bd-accent); }
/* 22px keeps the mark above the 20px full-colour threshold even when the
   label is hidden at phone widths. Bar 1 inherits the chrome's white. */
.bd-brand .bd-mark { --bd-mark-w: 22px; }
/* min-width 46px = one "⋯" button: even at phone widths the fold menu
   (and with it every workspace) stays reachable. */
.bd-ws-tabs { display: flex; gap: 2px; align-items: center; min-width: 46px; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.bd-ws-tabs::-webkit-scrollbar { display: none; }
.bd-ws-tab {
  padding: 9px 16px; border-radius: 8px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--bd-chrome-text); text-decoration: none;
}
.bd-ws-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.bd-ws-tab.is-active { color: #fff; background: var(--bd-chrome-active); box-shadow: inset 0 -2px 0 var(--bd-accent); }

.bd-mod-bar {
  display: flex; gap: 4px; align-items: center;
  height: 44px; padding: 0 16px;
  background: var(--bd-surface); border-bottom: 1px solid var(--bd-border);
  overflow-x: auto; scrollbar-width: none;
}
.bd-mod-bar::-webkit-scrollbar { display: none; }
body.bd-modbar-empty .bd-mod-bar { border-bottom: 1px solid var(--bd-border); }
.bd-mod-link {
  padding: 7px 14px; border-radius: 8px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--bd-muted); text-decoration: none;
}
.bd-mod-link:hover { background: var(--bd-surface-2); color: var(--bd-text); }
.bd-mod-link.is-active { color: var(--bd-accent); background: var(--bd-accent-soft); }
.bd-mod-settings {
  margin-left: auto; flex-shrink: 0;
  padding: 6px 12px; border-radius: 8px;
  color: var(--bd-muted); text-decoration: none;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  border: 1px solid var(--bd-border); background: var(--bd-surface);
}
.bd-mod-settings:hover { background: var(--bd-surface-2); color: var(--bd-text); }
/* Two pinned buttons (Admin + Settings): only the first carries the
   push-right auto margin; the rest sit beside it. */
.bd-mod-settings ~ .bd-mod-settings { margin-left: 6px; }

/* ----- relocated legacy controls, compacted for the dark bar ----- */
#bd-shell .shell-search {
  /* basis = the grid's minimum (110px scope + 160px input + gap), so the
     search only widens into genuine slack — workspace tabs get first claim
     on width and fold into "⋯" only when the search is already minimal.
     min-width:min-content stops flex shrink from clipping the fields
     (min-content resolves to the grid's track minimums; fit-content would
     resolve to the maximums and freeze the search at full width). */
  flex: 1 6 280px; min-width: min-content; margin-left: auto;
  display: grid; grid-template-columns: 110px minmax(160px, 420px); gap: 8px;
  justify-content: flex-end; align-items: center; position: relative;
}
#bd-shell .shell-search-scope {
  height: 38px; width: 100%; border-radius: 7px; padding: 0 8px;
  background: rgba(255, 255, 255, 0.08); color: var(--bd-chrome-text);
  border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; font-family: inherit;
}
#bd-shell .shell-search-scope option { color: #131c26; background: #fff; }
#bd-shell .shell-search-input-wrap { position: relative; min-width: 0; }
#bd-shell .shell-search-input {
  height: 38px; width: 100%; border-radius: 7px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13.5px; font-family: inherit;
}
#bd-shell .shell-search-input::placeholder { color: var(--bd-chrome-text); opacity: 0.8; }
#bd-shell .shell-search-input:focus {
  outline: none; border-color: var(--bd-accent);
  background: rgba(255, 255, 255, 0.12);
}
#bd-shell .shell-search-results { color: var(--color-text); }
#bd-shell .quick-actions-btn {
  height: 38px; padding: 0 15px 0 12px; border-radius: 8px;
  background: var(--bd-accent); border: none;
  font-size: 13px; font-weight: 650; letter-spacing: 0;
}
#bd-shell .quick-actions-btn:hover { filter: brightness(1.1); transform: none; }
#bd-shell .help-wrap { margin-left: 0; }
#bd-shell .help-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--bd-chrome-text); font-size: 1.05rem; box-shadow: none;
}
#bd-shell .help-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); transform: none; box-shadow: none; }
#bd-shell .user-avatar-btn {
  width: 38px; height: 38px;
  background: var(--bd-chrome-active); border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem; box-shadow: none;
}
#bd-shell .user-avatar-btn:hover { border-color: rgba(255, 255, 255, 0.35); transform: none; box-shadow: none; }

/* theme picker row inside the avatar dropdown */
.bd-theme-row {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.bd-theme-row-label { font-size: 11px; font-weight: 700; color: #6b7a8d; margin-right: auto; text-transform: uppercase; letter-spacing: .05em; }
.bd-theme-choice {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 3px 9px; border-radius: 999px;
  background: none; border: 1px solid rgba(0, 0, 0, 0.15); color: #43525f;
}
.bd-theme-choice:hover { border-color: rgba(0, 0, 0, 0.35); }
.bd-theme-choice.is-active { background: var(--bd-accent); border-color: var(--bd-accent); color: #fff; }

@media (max-width: 900px) {
  .bd-brand-name { display: none; }
  #bd-shell .shell-search { grid-template-columns: minmax(120px, 1fr); }
  #bd-shell .shell-search-scope-wrap { display: none; }
}

/* ----- third row: active module's sub-pages ----- */
.bd-sub-bar {
  display: flex; gap: 4px; align-items: center;
  padding: 0 16px;
  background: var(--bd-surface-2); border-bottom: 1px solid var(--bd-border);
  overflow-x: auto; scrollbar-width: none;
}
.bd-sub-bar::-webkit-scrollbar { display: none; }
.bd-sub-bar:empty { display: none; }
.bd-sub-link {
  padding: 10px 13px 8px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--bd-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.bd-sub-link:hover { color: var(--bd-text); }
.bd-sub-link.is-active { color: var(--bd-accent); border-bottom-color: var(--bd-accent); }

/* ----- nav overflow ("⋯" priority nav) -----
   The three chrome rows are single-line strips; items that don't fit used to
   be silently clipped (overflow-x:auto with scrollbars hidden — invisible on
   desktop). shell.js folds the overflow into a body-level menu instead. */
.bd-nav-more { background: none; border: none; cursor: pointer; flex-shrink: 0; font: inherit; }
.bd-ovf-hidden { display: none !important; }
.bd-ovf-menu {
  position: fixed; z-index: 3000; min-width: 170px;
  display: flex; flex-direction: column; gap: 1px; padding: 6px;
  background: var(--bd-surface); border: 1px solid var(--bd-border);
  border-radius: 10px; box-shadow: var(--bd-shadow-2);
  animation: avatar-dropdown-in .12s ease;
}
.bd-ovf-menu.hidden { display: none; }
.bd-ovf-menu a {
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--bd-text); text-decoration: none;
}
.bd-ovf-menu a:hover { background: var(--bd-surface-2); }
.bd-ovf-menu a.is-active { color: var(--bd-accent); background: var(--bd-accent-soft); }

/* ----- retire the per-module sidebars & strips (nav lives in the shell) ----- */
.ws-sidebar, .stock-sidebar, #bs-subnav { display: none !important; }
.app-shell.has-ws-sidebar, .app-shell.has-stock-sidebar { grid-template-columns: 1fr !important; }

/* ----- pages pad by the shell's measured height (set by shell.js) ----- */
.page { padding-top: calc(var(--bd-shell-h, 102px) + 12px) !important; }

/* =====================================================================
   BOATWORKS BRAND COMPONENTS (brand kit issue 02, direction M3)
   The wordmark, the mark, the lockup and the initials avatar. Consumes
   only --bd-* tokens. The @font-face for Manrope sits with Inter at the
   top of this file.
   ===================================================================== */

/* ── The mark ─────────────────────────────────────────────────────────
   Three bars, equal weight, lengths 100/71/44, gap = bar height, −8°.
   Size it by setting --bd-mark-w (default 26px). Never restyle the bars. */
.bd-mark {
  --bd-mark-w: 26px;
  --bd-mark-h: calc(var(--bd-mark-w) * 0.1);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bd-mark-h);
  transform: rotate(-8deg);
  flex: 0 0 auto;
}
.bd-mark i {
  display: block;
  height: var(--bd-mark-h);
  border-radius: 999px;
  background: currentColor;
}
.bd-mark i:nth-child(1) { width: var(--bd-mark-w); }
.bd-mark i:nth-child(2) { width: calc(var(--bd-mark-w) * 0.71); }
.bd-mark i:nth-child(3) { width: calc(var(--bd-mark-w) * 0.44); }

/* Full-colour: bar 1 inherits currentColor, 2 and 3 take brand colours.
   Below 20px wide, drop .bd-mark--colour so it renders one-colour. */
.bd-mark--colour i:nth-child(2) { background: var(--bd-brand-cyan); }
.bd-mark--colour i:nth-child(3) { background: var(--bd-brand-buoy); }

/* ── Wordmark ─────────────────────────────────────────────────────────
   Manrope 800, −5% tracking, capital B. Never Inter, never letter-spaced
   loose, never lowercase (lowercase is reserved for the owner sub-brand). */
.bd-wordmark {
  font-family: var(--bd-font-brand);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.92;
  color: inherit;
}

/* ── Lockup ───────────────────────────────────────────────────────────
   <span class="bd-lockup"><span class="bd-mark bd-mark--colour">…</span>
   <span class="bd-wordmark">Boatworks</span></span> */
.bd-lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bd-mark-w, 26px) * 0.42);
}

/* chrome lockup (top bar) */
.bd-chrome-brand { color: #fff; }
.bd-chrome-brand .bd-wordmark { font-size: 17px; }
.bd-chrome-brand .bd-mark { --bd-mark-w: 24px; }

/* sign-in lockup */
.bd-signin-brand { color: var(--bd-text); }
.bd-signin-brand .bd-wordmark { font-size: 30px; }
.bd-signin-brand .bd-mark { --bd-mark-w: 42px; }

/* Reversed lockup — for a surface that is dark in BOTH themes, so the mark
   and wordmark cannot follow --bd-text. Used by login.html /
   reset_password.html, whose card is a fixed dark navy. Placed after
   .bd-signin-brand so it wins on equal specificity. */
.bd-lockup--reversed { color: #fff; }

/* avatar / initials chip — Buoy needs the darkened ink for white text */
.bd-avatar {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bd-brand-buoy-ink);
  color: #fff; font-size: 11.5px; font-weight: 700;
}