/* ===========================================================================
   Marina Portal — modern UI stylesheet (self-contained, no external assets).
   Nautical teal accent · light + dark (system default, manual toggle).

   RESPONSIVE MODEL: the root font-size is FLUID (clamp + vw), and every size
   below is expressed in `rem`. So the whole interface scales smoothly with the
   screen — smaller on phones/compact laptops, larger on big monitors — with no
   fixed "one size" that only fits one device.
=========================================================================== */

/* Master fluid scale: ~13.5px on phones → ~16px on large screens. */
html {
  font-size: clamp(13.5px, 0.28vw + 11.6px, 16px);
}

/* ---- Design tokens (light) ---- */
:root {
  --bg: #eef2f7;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #dcefee 0%, transparent 55%),
             radial-gradient(1000px 500px at -10% 110%, #e2e9f5 0%, transparent 50%);
  --surface: #ffffff;
  --surface-2: #f4f7fa;
  --surface-3: #eef2f7;
  --border: #e4eaf1;
  --border-strong: #d3dce6;
  --text: #0f1b2d;
  --text-2: #33465c;
  --muted: #67788c;
  --primary: #0d9488;
  --primary-hover: #0f766e;
  --primary-contrast: #ffffff;
  --primary-soft: #d7f1ee;
  --accent: #0891b2;
  --danger: #e11d48;
  --danger-soft: #fce7ec;
  --success: #15a34a;
  --success-soft: #dcf5e5;
  --warn: #c2740a;
  --warn-soft: #fbeed6;
  --ring: rgba(13, 148, 136, 0.28);
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
  --shadow: 0 2px 6px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.07);
  --shadow-lg: 0 12px 40px rgba(15, 27, 45, 0.16);
  --radius: 0.875rem;
  --radius-sm: 0.625rem;
  --radius-lg: 1.25rem;
  --sidebar-w: 15.25rem;
  --topbar-h: 4.1rem;
}

/* Dark — when the OS prefers dark and the user hasn't forced light… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0a1120;
    --bg-grad: radial-gradient(1200px 600px at 100% -10%, #0c2b2b 0%, transparent 55%),
               radial-gradient(1000px 500px at -10% 110%, #10203a 0%, transparent 50%);
    --surface: #111b2e;
    --surface-2: #16233b;
    --surface-3: #1c2c48;
    --border: #223148;
    --border-strong: #2c3f5c;
    --text: #e8eef7;
    --text-2: #c2cede;
    --muted: #8a9cb4;
    --primary: #2dd4bf;
    --primary-hover: #5eead4;
    --primary-contrast: #052e2b;
    --primary-soft: #0f312e;
    --accent: #22d3ee;
    --danger: #fb7185;
    --danger-soft: #2b1620;
    --success: #4ade80;
    --success-soft: #102a1c;
    --warn: #fbbf24;
    --warn-soft: #2a2110;
    --ring: rgba(45, 212, 191, 0.32);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.6);
  }
}
/* …and when the user explicitly forces dark. */
:root[data-theme='dark'] {
  --bg: #0a1120;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #0c2b2b 0%, transparent 55%),
             radial-gradient(1000px 500px at -10% 110%, #10203a 0%, transparent 50%);
  --surface: #111b2e;
  --surface-2: #16233b;
  --surface-3: #1c2c48;
  --border: #223148;
  --border-strong: #2c3f5c;
  --text: #e8eef7;
  --text-2: #c2cede;
  --muted: #8a9cb4;
  --primary: #2dd4bf;
  --primary-hover: #5eead4;
  --primary-contrast: #052e2b;
  --primary-soft: #0f312e;
  --accent: #22d3ee;
  --danger: #fb7185;
  --danger-soft: #2b1620;
  --success: #4ade80;
  --success-soft: #102a1c;
  --warn: #fbbf24;
  --warn-soft: #2a2110;
  --ring: rgba(45, 212, 191, 0.32);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
/* The `hidden` attribute must always win over layout rules like `display:grid`. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 660; letter-spacing: -0.015em; }
.muted { color: var(--muted); }
.small { font-size: 0.78rem; }
svg.ico { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- Buttons ---- */
.btn {
  --b: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.44rem;
  border: 1px solid var(--b); background: var(--surface); color: var(--text);
  padding: 0.6rem 1rem; border-radius: 0.6rem; font-size: 0.92rem; font-weight: 570;
  cursor: pointer; transition: background .16s, border-color .16s, box-shadow .16s, transform .04s;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn svg.ico { width: 1rem; height: 1rem; }
.btn-primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-hover));
  border-color: transparent; color: var(--primary-contrast);
  box-shadow: 0 1px 2px rgba(13, 148, 136, .35), 0 6px 16px rgba(13, 148, 136, .25);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger); border-color: transparent; color: #fff; box-shadow: var(--shadow-sm); }
.btn-danger:hover { filter: brightness(1.05); }
.btn-icon { padding: 0.5rem; border-radius: 0.6rem; }
.btn-sm { padding: 0.38rem 0.68rem; font-size: 0.82rem; border-radius: 0.5rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Login ---- */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 1.5rem; }
.login-card {
  width: 100%; max-width: 25rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.25rem 2rem; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 0.95rem;
}
.login-lockup { margin: 0.2rem 0 0.4rem; display: flex; justify-content: center; }
.login-lockup img { width: 100%; max-width: 15rem; height: auto; }
.login-card h1 { font-size: 1.9rem; }
.login-sub { margin: -0.5rem 0 0.5rem; color: var(--muted); }
.login-hint { margin: 0.4rem 0 0; text-align: center; color: var(--muted); font-size: 0.78rem; }
.login-error { background: var(--danger-soft); color: var(--danger); border-radius: 0.6rem; padding: 0.56rem 0.8rem; font-size: 0.82rem; }

/* ---- Form fields ---- */
label { display: flex; flex-direction: column; gap: 0.38rem; font-size: 0.84rem; font-weight: 580; color: var(--text-2); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 0.6rem; padding: 0.62rem 0.75rem; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input[readonly] { background: var(--surface-2); color: var(--muted); cursor: default; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
/* Checkboxes / radios: no oversized focus ring when clicked with the mouse;
   keyboard focus still shows a ring (via :focus-visible) for accessibility. */
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; border-color: var(--border-strong); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
/* Textareas auto-size to their content; empty ones show ~3 lines (like pressing Enter twice). */
textarea { resize: vertical; min-height: 5.4rem; field-sizing: content; max-width: 100%; overflow-wrap: anywhere; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367788c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.1rem; }
.checkbox { flex-direction: row; align-items: center; gap: 0.56rem; font-size: 0.9rem; color: var(--text); }
.checkbox input { width: auto; }
/* A non-input form row that mirrors a label (e.g. Status + Update Status button). */
.field-static { display: flex; flex-direction: column; gap: 0.38rem; }
.field-static .lbl { font-size: 0.84rem; font-weight: 580; color: var(--text-2); }
.field-static .statusval { display: flex; align-items: center; gap: 0.6rem; min-height: 2.35rem; }

/* ---- App shell ---- */
#app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100%; }
/* LOA discounts sub-table on the edit-discount screen: keep it full width, but
   give its empty state a compact height (keeping the "add one" message) instead
   of the tall shared default. */
.loa-section .empty { padding: 1.5rem 1rem; }
.loa-section .empty .big { width: 2.4rem; height: 2.4rem; margin-bottom: 0.5rem; border-radius: 0.7rem; }
.loa-section .empty .big svg { width: 1.2rem; height: 1.2rem; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 1.1rem 0.85rem; gap: 0.5rem;
  position: sticky; top: 0; height: 100vh;
  /* Scroll internally when the nav + footer are taller than a short viewport,
     so "Sign out" (pinned to the bottom via .sidebar-foot) stays reachable. */
  overflow-y: auto; overscroll-behavior: contain;
}
.brand { display: flex; align-items: center; padding: 0.4rem 0.5rem 1.15rem; }
/* Official VORTEC MARINE lockup, sized to the sidebar. */
.brand-lockup { width: 100%; max-width: 11.5rem; height: auto; }

/* Logo lockup swaps between the black (light bg) and white (dark bg) artwork
   with the active theme — mirrors the theme rules used for the palette tokens. */
.logo-dark { display: block; }
.logo-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-dark { display: none; }
  :root:not([data-theme='light']) .logo-light { display: block; }
}
:root[data-theme='dark'] .logo-dark { display: none; }
:root[data-theme='dark'] .logo-light { display: block; }
:root[data-theme='light'] .logo-dark { display: block; }
:root[data-theme='light'] .logo-light { display: none; }
.nav-label { font-size: 0.69rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0.62rem 0.75rem 0.25rem; }
.nav { display: flex; flex-direction: column; gap: 0.19rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.62rem 0.75rem; border-radius: 0.7rem;
  color: var(--text-2); font-weight: 560; font-size: 0.94rem; position: relative; transition: background .14s, color .14s;
}
.nav-item svg.ico { color: var(--muted); transition: color .14s; }
/* "opens in a new tab" glyph on the Sales CRM item — small, subtle, right-aligned. */
.nav-item svg.ico-ext { width: 14px; height: 14px; margin-left: auto; opacity: .5; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-item.active svg.ico { color: var(--primary); }
.nav-item.active::before { content: ''; position: absolute; left: -0.85rem; top: 0.5rem; bottom: 0.5rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.62rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.userchip { display: flex; align-items: center; gap: 0.62rem; padding: 0.25rem 0.38rem; }
.avatar { width: 2.15rem; height: 2.15rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.82rem; color: #fff; background: linear-gradient(140deg, var(--accent), var(--primary)); flex: none; }
.userchip .u-name { font-weight: 620; font-size: 0.84rem; line-height: 1.2; }
.userchip .u-mail { color: var(--muted); font-size: 0.72rem; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 0.9rem; height: var(--topbar-h); padding: 0 1.6rem;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); position: sticky; top: 0; z-index: 8;
}
.topbar .titles { display: flex; flex-direction: column; }
.topbar h1 { font-size: 1.25rem; }
.topbar .subtitle { color: var(--muted); font-size: 0.82rem; }
.topbar-actions { margin-left: auto; display: flex; gap: 0.56rem; align-items: center; }
.content { padding: 1.75rem 2.1rem; max-width: 85rem; width: 100%; margin-inline: auto; }

/* ---- Cards / stats ---- */
.grid { display: grid; gap: 1.12rem; }
.stats { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat { padding: 1.25rem; display: flex; align-items: flex-start; gap: 0.94rem; transition: transform .12s, box-shadow .12s, border-color .12s; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.stat .chip { width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.stat .chip svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat .label { color: var(--muted); font-size: 0.88rem; font-weight: 560; }
.stat .value { font-size: 2.1rem; font-weight: 730; letter-spacing: -0.02em; line-height: 1.1; margin-top: 0.12rem; }

/* ---- Dashboard panels ---- */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.12rem; margin-top: 1.12rem; }
@media (max-width: 60rem) { .dash-grid { grid-template-columns: 1fr; } }
.dash-panel { padding: 1.2rem 1.35rem; }
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.dash-head h3 { margin: 0; font-size: 1.02rem; }
/* CRM tasks note (dashboard) — overdue / due-today chips. Semi-transparent tints
   read fine in both light and dark themes. */
.crm-task-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.crm-task-chip { padding: 0.35rem 0.75rem; border-radius: 0.6rem; font-size: 0.92rem; line-height: 1.2; }
.crm-task-chip strong { font-size: 1.05rem; font-weight: 700; margin-right: 0.15rem; }
.crm-task-chip.is-overdue { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.crm-task-chip.is-today { background: rgba(217, 119, 6, 0.16); color: #d97706; }
.dash-line { display: flex; align-items: center; justify-content: space-between; padding: 0.62rem 0.2rem; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.dash-line:last-child { border-bottom: none; }
.dash-line:hover { color: var(--primary); }
.dash-line strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
/* Dashboard job-status bars (count = brand colour, value = green), scaled to the largest. */
.dash-bar-cell { width: 40%; vertical-align: middle; }
.dash-bars { display: flex; flex-direction: column; gap: 3px; }
.dash-bars span { display: block; height: 7px; border-radius: 3px; min-width: 0; }
.db-count { background: var(--primary); }
.db-value { background: var(--success); }
/* Paid/Cancelled financial-year filter — absolutely positioned inside the bar
   cell so it overlays the right edge without adding to the row's height (those
   rows stay identical in size to the others). Bars reserve room so they don't
   run under it. */
.dash-bar-cell { position: relative; }
.dash-bar-cell.has-year .dash-bars { margin-right: 12.5rem; }
.dash-year { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.dash-year-lbl { font-size: 0.78rem; color: var(--muted); }
.dash-year-sel { width: auto; min-width: 0; padding: 0.2rem 1.6rem 0.2rem 0.5rem; border-radius: 0.5rem; font-size: 0.8rem; }
@media (max-width: 52rem) { .dash-bar-cell.has-year .dash-bars { margin-right: 5rem; } .dash-year-lbl { display: none; } }
.dash-panel tfoot td { border-top: 2px solid var(--border-strong); background: var(--surface-2); }
/* Dashboard tables show in full with no inner scrollbar — the page scrolls, and
   the header freezes against the page (below the sticky topbar) instead of a
   scroll container. overflow:visible keeps the table-wrap from trapping the
   sticky context. */
.dash-panel .table-wrap { max-height: none; overflow: visible; }
.dash-panel thead th { top: var(--topbar-h); z-index: 4; }

/* ---- Section sub-nav (segmented switcher) ---- */
.subnav { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 0.25rem; padding: 0.28rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.75rem; margin-bottom: 1.15rem; }
.subnav-item { padding: 0.42rem 0.95rem; border-radius: 0.55rem; font-weight: 570; color: var(--muted); font-size: 0.9rem; transition: background .14s, color .14s; }
.subnav-item:hover { color: var(--text); }
.subnav-item.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* ---- Toolbar ---- */
.toolbar { display: flex; align-items: flex-end; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-field { flex: 0 0 auto; }
.filter-field select { min-width: 10rem; width: auto; border-radius: 0.7rem; }

/* Row-click editing: per-row Edit buttons are hidden; clicking the row opens the
   editor. Any row containing an edit control shows a pointer cursor. */
button[title="Edit"] { display: none; }
tbody tr:has(button[title="Edit"]) { cursor: pointer; }
/* Contracts filter bar: cap dropdown widths so all six filters stay on one line
   (the Asset/Status options are long and would otherwise push a filter to wrap). */
.contract-filters .filter-field select { max-width: 10rem; }
.search { position: relative; flex: 1; min-width: 13rem; max-width: 24rem; }
.search svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.search input { padding-left: 2.4rem; border-radius: 0.7rem; }
.toolbar select.filter, .panel-toolbar select.filter { width: auto; min-width: 9rem; flex: 0 0 auto; border-radius: 0.7rem; }
/* Search button matches the search input's height so they sit level.
   (Input ≈ 0.62rem padding + 1rem/1.5 line + 1px border ≈ 2.96rem.) */
.toolbar [data-searchgo] { min-height: 2.96rem; flex: 0 0 auto; }

/* ---- Filter row (Payment Items etc.) ---- */
.filters { display: flex; align-items: flex-end; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filters .filter-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.filters .filter-field input[type="date"] { border-radius: 0.7rem; }

/* ---- Inline button row + form subgroups (contract / contract-type forms) ---- */
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-self: flex-start; }
.subgroup { border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.9rem 1rem 1.1rem; margin-top: 1.2rem; }
.subgroup > legend { padding: 0 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem 1rem; }
.check-grid .checkbox { justify-content: space-between; }

/* ---- Panel toolbar + segmented filters (detail tabs) ---- */
.panel-toolbar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.panel-toolbar .tb-left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.panel-toolbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 0.6rem; overflow: hidden; background: var(--surface-2); }
.seg button { appearance: none; border: none; background: none; padding: 0.42rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 560; color: var(--muted); cursor: pointer; transition: background .14s, color .14s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--primary); color: #fff; }
.seg button:not(:last-child) { border-right: 1px solid var(--border); }

/* ---- Table ---- */
/* Bounded height so long lists scroll inside the table (both axes), which lets
   the header stay frozen at the top as you scroll the rows. Short tables that
   fit the height don't scroll and look unchanged. */
.table-wrap { overflow: auto; max-height: calc(100vh - 12.5rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
/* Every record column is centered (headers + cells). */
thead th {
  text-align: center; padding: 0.8rem 1.12rem; font-size: 0.76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 680; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
  /* Freeze the header while scrolling the rows below it. */
  position: sticky; top: 0; z-index: 3;
}
tbody td { padding: 0.88rem 1.12rem; border-bottom: 1px solid var(--border); color: var(--text-2); text-align: center; vertical-align: middle; }
tbody td strong { color: var(--text); font-weight: 620; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr:hover td { background: var(--surface-2); }
tfoot td { padding: 0.62rem 1.12rem; border-top: 1px solid var(--border); text-align: center; }

/* Notes urgency colouring (legacy: open+on-time = green "High", open+overdue = pink "Medium"). */
tbody tr.note-hi td { background: var(--success-soft); }
tbody tr.note-med td { background: var(--danger-soft); }
tbody tr.note-hi:hover td { background: color-mix(in srgb, var(--success-soft) 88%, var(--text)); }
tbody tr.note-med:hover td { background: color-mix(in srgb, var(--danger-soft) 88%, var(--text)); }
/* Add/Edit Note modal: legacy Type dropdown + one dependent entity dropdown. */
#note-form { display: flex; flex-direction: column; gap: 0.95rem; }
#note-form .note-entity[hidden] { display: none; }
/* Invoices list: clickable status icons (Export Ready / Imported / Paid). */
/* Multi-table report (e.g. Timesheet Activity Week) — one section per week. */
.rep-week { margin-bottom: 1.4rem; }
.rep-week-h { margin: 1.1rem 0 0.5rem; font-size: 1rem; }
.inv-flag { background: none; border: none; cursor: pointer; padding: 0.2rem 0.4rem; font-size: 1.05rem; line-height: 1; border-radius: 0.4rem; }
.inv-flag:hover { background: var(--surface-2); }
.inv-flag .ic-yes { color: var(--success); font-weight: 700; }
.inv-flag .ic-no { color: var(--danger); font-weight: 700; }

/* Manage Time monthly grid. */
.mt-table th.mt-day, .mt-table td.mt-day { text-align: center; padding: 0.3rem 0.35rem; white-space: nowrap; }
.mt-table thead .mt-day { font-size: 0.74rem; line-height: 1.15; }
.mt-table .mt-dow, .mt-table .mt-dnum { display: block; }
.mt-table .mt-dow { opacity: 0.75; font-weight: 600; }
.mt-table .mt-name { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 9rem; box-shadow: 1px 0 0 var(--border); }
.mt-table thead .mt-name { z-index: 2; }
.mt-table .mt-weekend { background: var(--surface-2); }
.mt-cell { width: 3rem; text-align: center; padding: 0.32rem 0.25rem; border-radius: 0.4rem; }
.mt-cell:disabled { opacity: 0.5; }

/* Impersonation ("Login As") banner, fixed at the bottom while active. */
.imp-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.6rem 1rem; font-size: 0.86rem; background: var(--warn-soft); color: var(--warn); border-top: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
/* While impersonating, reserve room at the bottom of the sidebar and main area
   so the fixed banner never sits in front of the Sign out button or footer. */
body.impersonating .sidebar { padding-bottom: 3.75rem; }
body.impersonating .content { padding-bottom: 3.75rem; }
.note-legend { display: inline-flex; gap: 0.4rem; align-items: center; }
.note-legend .lg { font-size: 0.78rem; font-weight: 640; padding: 0.32rem 0.72rem; border-radius: 0.5rem; }
.note-legend .lg-hi { background: var(--success-soft); color: var(--success); }
.note-legend .lg-med { background: var(--danger-soft); color: var(--danger); }
.cell-actions { text-align: center; white-space: nowrap; }
.cell-actions .btn { margin: 0 0.22rem; }
/* Add-resource modal: the supplier + resource-item + Load row at the top. */
.res-load { display: flex; gap: 0.6rem; align-items: flex-end; margin-bottom: 0.5rem; }
.res-load label { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.res-load .grow { flex: 1 1 auto; }
.res-load select { width: 100%; }
.res-grid input[readonly] { background: var(--surface-2); font-weight: 640; }
/* Description spans full width; the pricing row scrolls sideways so all the
   figures fit on one line without squashing. */
.res-desc { display: grid; gap: 0.25rem; font-size: 0.85rem; margin-bottom: 0.7rem; }
.res-desc textarea { width: 100%; }
.res-pricing { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; }
.res-pricing label { display: grid; gap: 0.25rem; font-size: 0.8rem; flex: 0 0 auto; }
.res-pricing input { width: 5.5rem; }
.res-pricing input[readonly] { background: var(--surface-2); font-weight: 640; }
.res-modtype { align-self: flex-end; }
.res-modtype select { width: 3rem; padding: 0.5rem 0.35rem; }

/* Estimate Documents / Company Details / Setup wizard — labelled field blocks. */
#docs-form .doc-field, #company-form .doc-field, #wiz-form .doc-field { display: block; margin-bottom: 1.4rem; }
#docs-form .doc-field > span, #company-form .doc-field > span, #wiz-form .doc-field > span { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.35rem; }
#docs-form .doc-field textarea, #company-form .doc-field textarea, #wiz-form .doc-field textarea { width: 100%; font-family: inherit; line-height: 1.5; }
/* Terms box: compact with an inner scroll normally; expands to show the full
   text while being edited (works with the global textarea field-sizing:content). */
#terms-ta { max-height: 30rem; overflow-y: auto; }
#terms-ta:focus { max-height: none; overflow-y: hidden; }
#company-form .doc-field input[type="text"], #wiz-form .doc-field input[type="text"] { width: 100%; }

/* Company logo control + preview. */
.logo-control { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.logo-preview { min-width: 8rem; min-height: 3.4rem; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.8rem; border: 1px dashed var(--border); border-radius: 0.5rem; background: var(--surface-2); }
.logo-preview img { max-width: 12rem; max-height: 4.5rem; height: auto; }
/* The dark-background logo preview sits on a dark chip so light artwork is visible. */
.logo-preview.on-dark { background: #1b2029; border-color: #333b49; }
.logo-preview.on-dark .hint { color: #9aa4b2; }

/* First-run Setup wizard. */
.wizard { max-width: 44rem; }
.wiz-steps { font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin: 0.2rem 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.wiz-panel { max-height: 58vh; overflow-y: auto; padding-right: 0.3rem; }
.wiz-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.terms-tools { display: flex; gap: 0.5rem; margin: 0.1rem 0 0.5rem; }
.hint kbd { display: inline-block; padding: 0.05rem 0.32rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 0.28rem; background: var(--surface-2); font-family: inherit; font-size: 0.78em; line-height: 1.4; }
.terms-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.terms-split textarea { width: 100%; font-family: inherit; line-height: 1.5; min-height: 26rem; }
.terms-preview { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.9rem 1.1rem; background: var(--surface-2); overflow-y: auto; max-height: 34rem; font-size: 0.82rem; }
.terms-preview .tp-title { text-align: center; font-size: 0.98rem; margin: 0 0 0.7rem; }
.terms-preview .tp-head { font-weight: 700; margin: 0.7rem 0 0.2rem; }
.terms-preview .tp-body { margin: 0 0 0.5rem; color: var(--text-2); line-height: 1.4; }
@media (max-width: 820px) { .terms-split { grid-template-columns: 1fr; } }

/* Numbers/costs right-align (header + cells) so decimals line up down a column. */
.num, thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
.col-center { text-align: center; }
/* Long-text columns (titles, names, descriptions) read better left-aligned. */
.col-left, thead th.col-left { text-align: left; }
/* Clickable link inside a table cell (jobs Ref/Title, etc.) */
.rlink { color: var(--primary); cursor: pointer; text-decoration: none; }
.rlink:hover { text-decoration: underline; }
/* Read-only context panel (job/estimate edit headers) */
.ctx { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; padding: 0.9rem 1.1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.1rem; }
.ctx .cx { display: flex; flex-direction: column; gap: 0.15rem; }
.ctx .cx span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 640; }
.ctx .cx strong { font-size: 0.95rem; color: var(--text); font-weight: 600; }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 0.31rem; padding: 0.19rem 0.62rem; border-radius: 999px; font-size: 0.75rem; font-weight: 620; background: var(--surface-3); color: var(--text-2); }
.badge::before { content: ''; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: currentColor; opacity: .7; }
.badge-green { background: var(--success-soft); color: var(--success); }
.badge-blue { background: var(--primary-soft); color: var(--primary); }
.badge-amber { background: var(--warn-soft); color: var(--warn); }

/* ---- Pagination ---- */
/* "Showing X - Y of Z" line above a list table. */
.list-meta { display: flex; justify-content: flex-end; margin: -0.3rem 0 0.6rem; }
/* Inline info icon beside a filter (e.g. Only Current). */
.contract-filters .filter-info { display: inline-flex; align-items: flex-end; color: var(--muted); cursor: help; padding-bottom: 0.6rem; }
.contract-filters .filter-info svg.ico { width: 1.05rem; height: 1.05rem; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; gap: 0.75rem; flex-wrap: wrap; }
.pager .pages { display: flex; gap: 0.38rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pager-ellipsis { color: var(--muted); padding: 0 0.15rem; align-self: center; }

/* ---- Empty / skeleton ---- */
.empty { text-align: center; padding: 3.4rem 1.5rem; color: var(--muted); }
.empty .big { width: 3.5rem; height: 3.5rem; margin: 0 auto 0.75rem; border-radius: 1rem; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.empty .big svg { width: 1.75rem; height: 1.75rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skeleton { padding: 0.5rem; }
.sk-row { height: 2.9rem; border-radius: 0.6rem; margin-bottom: 0.62rem; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- Detail list ---- */
.dl { display: grid; grid-template-columns: 10.6rem 1fr; gap: 0.75rem 1.12rem; }
.dl dt { color: var(--muted); font-size: 0.82rem; }
.dl dd { margin: 0; font-weight: 560; }

/* ---- Modal ---- */
.modal-root { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.25rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8, 15, 28, 0.55); backdrop-filter: blur(3px); animation: fade .15s ease; }
.modal {
  position: relative; width: 100%; max-width: 36rem; max-height: 88vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: pop .16s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.modal-head h2 { font-size: 1.06rem; }
.modal-body { padding: 1.4rem; }
.modal.modal-wide { max-width: 52rem; }
/* Two independent columns (legacy-style asset form) */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.6rem; align-items: start; }
.cols .col { display: flex; flex-direction: column; gap: 0.9rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem 0.9rem; }
/* Timesheets */
.ts-week-label { display: flex; align-items: center; gap: 0.9rem; font-weight: 600; margin-left: auto; }
.ts-week-total { color: var(--primary); font-weight: 700; }
.ts-day { margin-bottom: 0.55rem; }
.ts-day-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.15rem 0.2rem; }
.ts-day-total { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.ts-empty { margin: 0; padding: 0.1rem 0.2rem 0.35rem; color: var(--muted); font-size: 0.84rem; }
.ts-job-cell { cursor: pointer; color: var(--primary); }
.ts-ref { color: var(--primary); cursor: pointer; text-decoration: none; }
.ts-ref:hover { text-decoration: none; }
.ts-nav { align-items: center; }
.ts-jump-field { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--text-2); }
.ts-jump-field select { min-width: 20rem; width: auto; border-radius: 0.7rem; }
.ts-week-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); font-size: 1.1rem; }
.ts-week-heading .ts-week-total { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
/* Photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.photo-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); }
.photo-tile .photo-desc { border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 0.5rem 0.7rem; font-size: 0.82rem; }
.photo-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.7rem; border-top: 1px solid var(--border); }
/* Photos screen: grouped results + photo-check warning banner. */
.photo-group { margin-bottom: 1.6rem; }
.photo-group-hd { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; font-weight: 600; font-size: 0.86rem; padding: 0.55rem 0.8rem; margin-bottom: 0.7rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.6rem; }
.photo-group-hd .sep { color: var(--muted); font-weight: 400; }
.photo-group-hd a { color: var(--primary); }
.notice-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 0.6rem; padding: 0.7rem 1rem; margin-bottom: 1.1rem; font-size: 0.85rem; line-height: 1.45; }
.checkbox.small { font-size: 0.78rem; flex-direction: row; align-items: center; gap: 0.35rem; }
/* Reports */
/* Report picker sits across the top (was a left sidebar) so the result table
   gets the full page width and no longer has to scroll sideways. */
.reports-layout { display: block; }
/* Each report group on its own row: group name on the left, its reports to the right. */
.reports-list { display: flex; flex-direction: column; gap: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; box-shadow: var(--shadow-sm); margin-bottom: 1.2rem; }
.rep-group { display: flex; align-items: baseline; gap: 0.6rem; }
.rep-group + .rep-group { border-top: 1px solid var(--border); padding-top: 0.35rem; }
.rep-group-h { flex: 0 0 6.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-top: 0.35rem; }
.rep-group-items { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; flex: 1; }
.rep-item { display: inline-block; width: auto; white-space: nowrap; border: 1px solid transparent; background: transparent; color: var(--text); padding: 0.35rem 0.6rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.86rem; }
.rep-item:hover { background: var(--surface-2); }
.rep-item.active { background: var(--primary-soft); color: var(--primary-hover); font-weight: 600; }
.rep-item.planned { color: var(--muted); }
/* "·"-separated formula legend, spread so each sum reads on its own. */
.rep-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; margin: 0 0 0.9rem; font-size: 0.8rem; color: var(--muted); }
.rep-legend span { white-space: nowrap; }
/* Report tables keep the default text size; multi-word headers stack (via <br> in
   the markup) so wide reports (many status columns) stay narrower. */
.reports-main table { width: 100%; }
/* Report filters: compact + smaller gap so all fit on one line. */
.reports-main .panel-toolbar .tb-right { gap: 0.4rem 0.5rem; margin-left: 0; flex: 1 1 100%; }
.reports-main .filter-field { font-size: 0.8rem; }
/* Fixed width so selects don't balloon to fit their longest option (Status,
   Nominal Code); long selected values ellipsis-truncate (full text in the dropdown). */
.reports-main .filter-field select { width: 7.75rem; min-width: 0; border-radius: 0.7rem; text-overflow: ellipsis; }
.reports-main .filter-field input[type="date"] { min-width: 0; }
/* Print View: pushed to the far right, bottom-aligned so it sits level with the
   dropdown boxes (the filter fields stack a label above their input). */
.reports-main .panel-toolbar .tb-right .planner-print-btn { margin-left: auto; align-self: flex-end; }
.reports-main thead th { white-space: normal; vertical-align: bottom; }
.reports-main td.num, .reports-main th.num { white-space: nowrap; }
.reports-main td.col-left, .reports-main th.col-left { white-space: normal; }
.rep-planned { font-size: 0.66rem; background: var(--surface-3); color: var(--muted); border-radius: 10px; padding: 1px 6px; margin-left: 0.3rem; }
tr.rep-total td { font-weight: 700; border-top: 2px solid var(--border-strong); background: var(--surface-2); }
@media (max-width: 800px) { .reports-layout { grid-template-columns: 1fr; } }
/* Planner grid */
.planner-grid th, .planner-grid td { padding: 0.4rem 0.55rem; white-space: nowrap; }
.planner-grid .planner-job { min-width: 14rem; white-space: normal; }
.planner-grid .planner-range, .planner-grid .planner-pwr { color: var(--muted); font-variant-numeric: tabular-nums; }
.planner-day { text-align: center; font-weight: 600; }
.planner-day.weekend { color: var(--muted); background: var(--surface-2); }
.planner-cell { text-align: center; font-variant-numeric: tabular-nums; border: 1px solid var(--border); }
.planner-cell.inest { background: rgba(34, 197, 94, 0.22); }
.planner-cell.over { background: rgba(225, 29, 72, 0.22); }
.planner-totals td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border-strong); }
.planner-totals .ptot { line-height: 1.3; display: inline-block; }
.pl-key { padding: 0 0.35rem; border-radius: 4px; }
.pl-key.inest { background: rgba(34, 197, 94, 0.28); }
.pl-key.over { background: rgba(225, 29, 72, 0.28); }
/* Report filter toolbar */
.filter-lab { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.15rem; }
.stati-field { align-items: flex-start; flex: 1 1 100%; width: 100%; }
.rep-stati-row { display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1.1rem; }
.rep-stati-row .stati-field { flex: 1; }
/* WIP "Stati to Include" — 7 columns so the ~21 statuses sit in 3 rows, full width. */
.stati-boxes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem 1.2rem; width: 100%; }
@media (max-width: 900px) { .stati-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stati-boxes .checkbox { font-size: 0.8rem; white-space: nowrap; }
/* Rich-text editor (help entries) */
.rte { border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; background: var(--surface); margin-top: 0.35rem; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rte-btn { min-width: 1.9rem; height: 1.9rem; border: 1px solid transparent; background: none; border-radius: 0.35rem; cursor: pointer; color: var(--text); font-size: 0.85rem; line-height: 1; }
.rte-btn:hover { background: var(--surface); border-color: var(--border); }
.rte-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0.15rem 0.25rem; }
.rte-body { min-height: 12rem; max-height: 24rem; overflow-y: auto; padding: 0.7rem 0.9rem; outline: none; font-size: 0.9rem; line-height: 1.5; }
.rte-body:focus { box-shadow: inset 0 0 0 2px var(--ring); }
.rte-body blockquote { border-left: 3px solid var(--border); margin: 0.5rem 0; padding-left: 0.8rem; color: var(--muted); }
.rte-body ul, .rte-body ol { padding-left: 1.4rem; margin: 0.4rem 0; }
/* Grouped table headers (Invoices P&L: Sales / Cost / Profit) */
tr.rep-grouphead th { border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
tr.rep-grouphead th + th { border-left: 1px solid var(--border); }
/* WIP month-matrix + bar chart */
.matrix-grid { font-variant-numeric: tabular-nums; }
.matrix-grid th, .matrix-grid td { padding: 0.3rem 0.55rem; white-space: nowrap; }
.matrix-grid tr.rep-total td { position: sticky; top: 0; }
.chart-cell { vertical-align: bottom; text-align: center; height: 60px; padding: 0 0.3rem 0.2rem !important; }
.chart-bar { display: inline-block; width: 0.7rem; min-height: 1px; background: var(--primary); border-radius: 2px 2px 0 0; }
tr.rep-chart td.col-left { color: var(--muted); font-size: 0.72rem; vertical-align: bottom; }
/* Invoices P&L account */
.pl-account { font-variant-numeric: tabular-nums; }
.pl-account th, .pl-account td { padding: 0.28rem 0.5rem; }
.pl-nom { cursor: pointer; }
.pl-nom:hover { background: var(--surface-2); }
.pl-nom.expanded { font-weight: 600; }
.pl-job td { background: var(--surface-2); font-size: 0.82rem; }
.pl-indent { padding-left: 1.4rem !important; }
.pl-pct { color: var(--muted); font-size: 0.72rem; margin-left: 0.2rem; }
.ok-mark { color: #22a35a; font-weight: 700; }
.no-mark { color: #cc0000; font-weight: 700; }
.plan-warn { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; border-radius: 0.5rem; padding: 0.7rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.plan-hint { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.8rem; }
.plan-remaining { font-weight: 700; }
.plan-remaining.ok { color: #22a35a; }
.plan-remaining.warn { color: #b8860b; }
.plan-remaining.over { color: #cc0000; }
.chk-inline { display: inline-flex; flex-direction: row; align-items: center; gap: 0.55rem; font-size: 0.95rem; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.chk-inline input[type="checkbox"] { margin: 0; width: 1.7rem; height: 1.7rem; accent-color: var(--primary); cursor: pointer; }
.chk-inline input[type="checkbox"]:focus, .chk-inline input[type="checkbox"]:focus-visible { outline: none; box-shadow: none; border-color: transparent; }
.jnotes-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; margin-bottom: 1rem; overflow-x: auto; }
.jnt-left, .jnt-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; }
.jnt-tpl { min-width: 10rem; }
.jnt-left .btn, .jnt-right .seg { flex: 0 0 auto; }
.photos-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.photo-card { border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.5rem; background: var(--surface-2); display: flex; flex-direction: column; gap: 0.4rem; transition: opacity .15s; }
.photo-card.to-delete { opacity: 0.35; }
.photo-card.is-main { border-color: #d9ab1e; box-shadow: 0 0 0 1px #d9ab1e inset; }
.ph-main { align-self: flex-start; font-size: 0.76rem; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 0.4rem; background: var(--surface); color: var(--muted); cursor: pointer; }
.ph-main:hover { color: var(--text); }
.ph-main.active { background: #f4c430; color: #3a2f00; border-color: #d9ab1e; font-weight: 600; }
.photo-thumb { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.photo-thumb img { width: 100%; height: 140px; object-fit: cover; border-radius: 0.4rem; display: block; }
.lightbox { text-align: center; }
.lightbox img { max-width: 100%; max-height: 74vh; border-radius: 8px; }
.ph-desc { width: 100%; resize: vertical; font: inherit; font-size: 0.85rem; }
.photo-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
.ph-order-lbl { font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.ph-order { width: 4rem; }
.ph-date { font-size: 0.78rem; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem 1rem; margin-bottom: 0.4rem; }
.res-grid label { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.res-grid .span2 { grid-column: span 2; }
.res-grid input, .res-grid select, .res-grid textarea { width: 100%; }
@media (max-width: 640px) { .res-grid { grid-template-columns: 1fr 1fr; } .res-grid .span2 { grid-column: span 2; } }
/* 3-field rows (Type/Nominal/Unit, Ordered/Date/Retail) fill the full width,
   in line with the Description box above. */
.res-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .res-grid-3 { grid-template-columns: 1fr 1fr; } }
/* "Needs a look" flag next to a section heading. */
.rev-flag { font-size: 0.68rem; font-weight: 600; color: var(--warn); background: var(--warn-soft); padding: 0.12rem 0.5rem; border-radius: 0.4rem; margin-left: 0.55rem; vertical-align: middle; }
.totals-row td { font-weight: 700; background: var(--surface-2); }
.asg-group { margin-bottom: 1.4rem; }
.asg-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; margin-bottom: 0.6rem; }
.asg-head h4 { margin: 0; font-size: 0.95rem; }
.asg-links { font-size: 0.82rem; }
.asg-links a { color: var(--primary); }
.asg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.4rem 1rem; }
.asg-user { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; }
.asg-user input { margin: 0; }
/* Statuses tab — row tints matching legacy global.css */
.st-row.st-new td { background: #f3e6d8; color: #1a1a1a; }
.st-row.st-approved td { background: #ecf9f9; color: #1a1a1a; }
.st-row.st-depositawaitingpayment td { background: #d8e6f3; color: #1a1a1a; }
.st-row.st-wip td { background: #d8d8f3; color: #1a1a1a; }
.st-row.st-complete td { background: #e1fbe5; color: #1a1a1a; }
.st-row.st-invoiced td { background: #f9ecf3; color: #1a1a1a; }
.st-row.st-cancelled td { background: #f3d8d8; color: #1a1a1a; }
.st-row.st-hold td { background: #fcf0ba; color: #1a1a1a; }
/* Job Card tab */
.jc-toolbar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.jc-toolbar .tb-spacer { flex: 1; }
.jc-h { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; border-bottom: 2px solid var(--border); padding-bottom: 0.3rem; }
.jc-card > .jc-h:first-child { margin-top: 0; }
.jc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 0.5rem; }
.jc-photos img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.no-mark { color: #e11d48; font-weight: 700; }
/* Job-edit Assignment tab */
.asg-group { margin-bottom: 1.1rem; }
.asg-actions { font-size: 0.8rem; margin-bottom: 0.5rem; }
.asg-actions a { color: var(--primary); }
.asg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.4rem 1rem; }
.asg-grid .checkbox { white-space: nowrap; }
/* ---------------------------- Client portal ---------------------------- */
.client-boat { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr minmax(12rem, 16rem); gap: 1.5rem; padding: 1.4rem; margin-bottom: 1.2rem; align-items: start; }
@media (max-width: 900px) { .client-boat { grid-template-columns: 1fr; } }
.cb-photo img { width: 100%; border-radius: var(--radius); display: block; object-fit: cover; }
.cb-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); }
.cb-noimg.lg { aspect-ratio: 16 / 10; }
.big-ico { width: 4rem; height: 4rem; }
.cb-info .cd-row, .cd-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.1rem; border-bottom: 1px solid var(--border); }
.cd-lbl { color: var(--muted); text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.03em; }
.cd-val { font-weight: 600; text-align: right; }
.cb-menu { display: flex; flex-direction: column; gap: 0.2rem; }
.cb-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: 0.6rem; color: var(--text); font-weight: 560; }
.cb-link:hover { background: var(--surface-2); color: var(--primary-hover); }
.cb-link .ico { width: 1.15rem; height: 1.15rem; color: var(--muted); }
.cd-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .cd-cols { grid-template-columns: 1fr; } }
.cd-cols.two { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.cd-h { text-align: center; font-weight: 600; color: var(--primary-hover); margin: 0 0 0.6rem; }
.cd-photo { margin-top: 1.6rem; max-width: 32rem; }
.cd-photo img { width: 100%; border-radius: var(--radius); }
.banner-warn { background: rgba(225, 29, 72, 0.12); color: #b91c47; border: 1px solid rgba(225, 29, 72, 0.3); border-radius: var(--radius); padding: 0.9rem 1.1rem; text-align: center; margin-bottom: 1rem; }
.banner-info { background: rgba(234, 179, 8, 0.12); color: #9a7b0a; border: 1px solid rgba(234, 179, 8, 0.3); border-radius: var(--radius); padding: 0.8rem 1.1rem; text-align: center; margin-top: 1rem; }
.cpw { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cpw input { flex: 1 1 12rem; }
.cphoto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.9rem; }
.cphoto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.c-joblist { margin: 0.3rem 0 0.6rem 1.1rem; }
/* Global portal footer (contact details on every screen) */
.app-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; background: var(--surface); }
.app-foot a { color: inherit; }
.main { display: flex; flex-direction: column; min-height: 100vh; }
.main .content { flex: 1 0 auto; }
.cols .col .grow { flex: 1; }
textarea.tall { flex: 1; }
textarea.auto-grow { min-height: 2.5rem; }
.hint { font-size: 0.72rem; color: var(--muted); font-weight: 500; margin-top: 0.15rem; }
/* Tabs (account detail page) */
.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin: -0.3rem 0 1.15rem; flex-wrap: wrap; }
.tab { appearance: none; border: none; background: none; font: inherit; font-weight: 570; color: var(--muted); padding: 0.55rem 0.85rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.form-heading { font-weight: 680; font-size: 0.95rem; color: var(--text); margin: 1.25rem 0 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.form-heading:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.94rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.62rem; margin-top: 1.4rem; }
/* Label-left two-column form (legacy supplier layout) */
.lr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 2.4rem; align-items: start; }
.lr-col { display: flex; flex-direction: column; gap: 0.7rem; }
.frow { display: grid; grid-template-columns: 8.75rem 1fr; align-items: center; gap: 0.95rem; }
.frow > span { text-align: right; font-size: 0.84rem; font-weight: 580; color: var(--text-2); }
.frow textarea { min-height: 6rem; resize: vertical; }
.frow-tall { align-items: start; }
.frow-tall > span { margin-top: 0.5rem; }
@media (max-width: 760px) { .lr-grid { grid-template-columns: 1fr; } .frow { grid-template-columns: 7rem 1fr; } }
.line-items { display: flex; flex-direction: column; gap: 0.56rem; }
.line-item { display: grid; grid-template-columns: 1fr 8rem 2.5rem; gap: 0.56rem; align-items: center; }

/* ---- Toasts ---- */
.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.7rem; }
.toast { display: flex; align-items: center; gap: 0.62rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 0.75rem; padding: 0.8rem 1rem; box-shadow: var(--shadow-lg); min-width: 15.6rem; max-width: 23.75rem; animation: slidein .22s ease; font-weight: 540; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast svg { width: 1.12rem; height: 1.12rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast.success svg { color: var(--success); }
.toast.error svg { color: var(--danger); }
@keyframes slidein { from { opacity: 0; transform: translateY(10px); } }

/* ---- Responsive: layout structure at breakpoints (fonts already fluid) ---- */
.only-mobile { display: none; }
.scrim { display: none; }

/* Tablet / small laptop: trim the sidebar + side padding a touch. */
@media (max-width: 1100px) {
  :root { --sidebar-w: 14rem; }
  .content { padding: 1.5rem 1.4rem; }
}

/* Phones / narrow windows: sidebar becomes a slide-in drawer, single column. */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; width: 16rem; transform: translateX(-100%); transition: transform .22s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(8, 15, 28, 0.45); backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .scrim.show { opacity: 1; pointer-events: auto; }
  .only-mobile { display: inline-flex; }
  .form-grid { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: 0.19rem 0; }
  .dl dd { margin-bottom: 0.62rem; }
  .content { padding: 1.1rem; }
  .topbar { padding: 0 1rem; }
}

/* Very small phones. */
@media (max-width: 420px) {
  .toasts { left: 0.75rem; right: 0.75rem; }
  .toast { max-width: none; }
  .stat .value { font-size: 1.9rem; }
}