/* ===== Wrench — "Console" design system =====
   A sharp, dense, data-forward UI. Structure is drawn with 1px hairline borders,
   not shadows. Zero corner radius. Monospace for labels, numbers and metadata.
   Snappy ~80ms transitions, no springs. Class + token names are kept stable so
   every existing template renders against this system unchanged.
   ------------------------------------------------------------------------ */

/* ---------- Design tokens: light ---------- */
:root {
  color-scheme: light;

  /* Brand — overridable per-org via an inline style in the header partial. */
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-2: #6366f1;
  --brand-soft: #e7e9fd;
  --brand-ink: #ffffff;
  --accent: #0891a3;
  --accent-soft: #d8f1f4;

  --bg: #eceef1;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceef1;
  --border: #d3d8de;
  --border-strong: #aab2bd;
  --grid-line: #e3e7ec;

  --text: #0b0e14;
  --text-soft: #2b323c;
  --muted: #5a6472;
  --muted-2: #8b94a1;

  --green: #0f8a43;  --green-soft: #dcf3e4;
  --amber: #b45c09;  --amber-soft: #fbeccd;
  --red:   #c8352b;  --red-soft:   #fbe3e1;
  --blue:  #2563eb;  --blue-soft:  #dde8fe;

  --sidebar: #0c0e13;
  --sidebar-text: #c2c8d2;
  --sidebar-muted: #6b7480;
  --sidebar-border: #1e222b;
  --sidebar-active-bg: #181c24;

  /* Sharp corners: every radius token resolves to a square. */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;

  --shadow-sm: none;
  --shadow: 0 0 0 1px var(--border);
  --shadow-lg: 0 24px 60px -28px rgba(8,11,18,.45);
  --shadow-brand: none;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.2,0,0,1);
  --ease-out: cubic-bezier(.2,0,0,1);
  --ease-spring: cubic-bezier(.2,0,0,1);

  --t: .08s;

  --sidebar-w: 224px;
  --topbar-h: 50px;
}

/* ---------- Design tokens: dark ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --brand: #6366f1;
  --brand-dark: #4f46e5;
  --brand-2: #818cf8;
  --brand-soft: #1c1f3a;
  --brand-ink: #ffffff;
  --accent: #22b8cf;
  --accent-soft: #0c343b;

  --bg: #070809;
  --surface: #101216;
  --surface-2: #15181d;
  --surface-3: #1c2027;
  --border: #272c34;
  --border-strong: #3a414c;
  --grid-line: #1a1e24;

  --text: #eef1f5;
  --text-soft: #c2c8d2;
  --muted: #8992a0;
  --muted-2: #5e6772;

  --green: #34c46b;  --green-soft: #0e2a19;
  --amber: #e0962f;  --amber-soft: #2c2008;
  --red:   #f0584c;  --red-soft:   #2e1311;
  --blue:  #5b8dff;  --blue-soft:  #11203c;

  --sidebar: #060708;
  --sidebar-text: #aeb6c1;
  --sidebar-muted: #5b636e;
  --sidebar-border: #181b21;
  --sidebar-active-bg: #14171d;

  --shadow: 0 0 0 1px var(--border);
  --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.8);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* The reset above strips the UA `margin: auto` that centers a modal <dialog>,
   which pins dialogs to the top-left. Restore it, and cap height (with safe-area
   padding) so a tall modal centers and scrolls instead of overflowing the notch. */
dialog { margin: auto; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); overflow: auto; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 19px; letter-spacing: -.01em; font-weight: 700; }
h2 { font-size: 16px; letter-spacing: -.005em; font-weight: 700; }
h3 { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
code, kbd { font-family: var(--mono); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.muted { color: var(--muted); }
.mt { margin-top: 14px; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }

/* Internal-scroll shell. On pages that render the header/footer partials
   (`body.app-shell`), the body is a fixed-height column that does NOT scroll —
   `.main` owns the scroll instead. This keeps the sticky top bars (app-switcher
   + topbar) from desyncing during iOS momentum scroll and stops the top
   rubber-band from dragging them past the safe area. Standalone pages (auth,
   marketing, error) have their own <body> without this class and keep normal
   document scrolling. */
body.app-shell {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;          /* dvh: exclude dynamic iOS toolbars */
  overflow: hidden;
  overscroll-behavior-y: none;            /* no top/bottom rubber-band on the shell */
}
body.app-shell .app-switcher { flex: none; }
body.app-shell .app { flex: 1 1 auto; min-height: 0; }
body.app-shell .main {
  overflow-y: auto;
  overscroll-behavior: contain;           /* don't chain scroll up to the shell */
  -webkit-overflow-scrolling: touch;
}

/* Global app-switcher: the top bar of Apps (Planner, Storeroom, Manager, …). */
.app-switcher {
  position: sticky; top: 0; z-index: 50;
  height: 46px; display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: var(--sidebar); border-bottom: 1px solid var(--sidebar-border);
}
.app-switcher-brand {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-right: 6px;
  font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: #fff;
}
.app-switcher-brand:hover { text-decoration: none; }
.app-switcher-brand span:not(.dot) { color: var(--brand-2); }
.app-switcher-brand img { max-height: 28px; max-width: 130px; width: auto; object-fit: contain; }
.app-switcher-apps { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.app-switcher-apps::-webkit-scrollbar { display: none; }
.app-switcher-apps a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; color: var(--sidebar-text);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.app-switcher-apps a:hover { background: var(--sidebar-active-bg); color: #fff; text-decoration: none; }
.app-switcher-apps a.is-current { color: #fff; border-bottom-color: var(--brand); }
.app-switcher-apps a .ico { font-size: 14px; position: relative; }
/* Dispatch: open-work indicator dot on the Dispatch app icon. */
.app-dot { position: absolute; top: -2px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
/* Dispatch board/inbox: a left accent so still-open (unacknowledged) cards read at a glance. */
.dispatch-card[data-status="open"] { border-left: 3px solid var(--amber); }
.dispatch-card[data-status="acknowledged"] { border-left: 3px solid var(--green); }

/* When the app-switcher is present, the sidebar + topbar tuck beneath it. */
.app.has-appbar .sidebar { top: 46px; height: calc(100vh - 46px); }
.app.has-appbar .topbar { top: 46px; }

/* Shell layout: the app-switcher is its own non-scrolling row above .app, so
   the topbar sticks to the top of .main's scroll (offset 0, not 46px), and the
   sidebar fills .app's height and scrolls internally rather than with the page.
   The mobile off-canvas drawer (≤860px, position:fixed) is left untouched. */
body.app-shell .app.has-appbar .topbar { top: 0; }
@media (min-width: 861px) {
  body.app-shell .sidebar { position: relative; top: auto; height: auto; }
  body.app-shell .app.has-appbar .sidebar { top: auto; height: auto; }
}

.app-nav-group { display: flex; align-items: center; gap: 8px; color: var(--brand-2); }
.app-nav-group .ico { font-size: 13px; }

/* Dashboard apps launcher grid. */
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.app-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-weight: 600; transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.app-card:hover { border-color: var(--brand); text-decoration: none; }
.app-card.is-current { border-color: var(--brand); }
.app-card-ico { font-size: 22px; line-height: 1; }
.app-card-label { font-size: 14px; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px;
  height: var(--topbar-h);
  font-weight: 800; font-size: 15px; letter-spacing: -.02em;
  color: #fff;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand span:not(.dot) { color: var(--brand-2); }
.brand .dot { width: 14px; height: 14px; background: var(--brand); flex-shrink: 0; }

.sidebar nav { padding: 8px 0; display: flex; flex-direction: column; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  color: var(--sidebar-text);
  font-size: 13px; font-weight: 500;
  border-left: 2px solid transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.sidebar nav a:hover { background: var(--sidebar-active-bg); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--sidebar-active-bg); color: #fff; border-left-color: var(--brand); }
.sidebar nav a .ico { width: 18px; text-align: center; font-size: 14px; opacity: .9; }
.nav-group {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 14px 16px 5px;
}
.spacer { flex: 1; }
.org-box { padding: 12px 16px; border-top: 1px solid var(--sidebar-border); }
.org-box .name { color: #fff; font-weight: 600; font-size: 12.5px; }
.org-box .plan { font-family: var(--mono); color: var(--sidebar-muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-heading { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-toggle { display: none; background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer; }

.user { display: flex; align-items: center; gap: 10px; }
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px;
  transition: border-color var(--t) var(--ease);
}
.topbar-search:hover { border-color: var(--border-strong); }
.topbar-search-text { min-width: 120px; text-align: left; }
.topbar-search-kbd { margin-left: 4px; }
kbd {
  font-size: 10.5px; padding: 1px 5px; min-width: 18px; text-align: center;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--muted);
}
.icon-btn {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft);
  cursor: pointer; font-size: 14px; transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.icon-btn:hover { border-color: var(--border-strong); text-decoration: none; }
.tw-bell-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--red); color: #fff; font-family: var(--mono);
  font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; min-width: 15px; text-align: center;
}
.theme-ico-dark { display: none; }
[data-theme="dark"] .theme-ico-light { display: none; }
[data-theme="dark"] .theme-ico-dark { display: inline; }
.avatar {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  background: var(--brand); color: var(--brand-ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  border-radius: 50%; overflow: hidden; flex: none;
}
.avatar-lg { width: 72px; height: 72px; font-size: 24px; }
/* When a profile picture is present, the <img> fills the circular avatar. */
.avatar img, .comm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Preset avatar picker (profile settings). */
.preset-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.preset-pick {
  width: 56px; height: 56px; padding: 0; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--border); background: var(--surface-2); cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.preset-pick:hover { border-color: var(--brand); transform: translateY(-1px); }
.preset-pick.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.preset-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbar-username { font-size: 12.5px; font-weight: 600; }

/* Account dropdown (avatar menu). Native <details> so it works without JS;
   the avatar is the trigger and works at every viewport size, which is the
   only way to reach Change password / Sign out on narrow screens. */
.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; user-select: none; outline: none;
}
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.user-menu-caret { display: inline-flex; color: var(--muted); transition: transform .12s var(--ease); }
.user-menu[open] .user-menu-caret { transform: rotate(180deg); }
.user-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 224px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
}
.user-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-menu-name { font-size: 13px; font-weight: 600; }
.user-menu-email { font-size: 11.5px; color: var(--muted); word-break: break-all; }
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--text); font-size: 13px;
}
.user-menu-item:hover { background: var(--surface-2); text-decoration: none; }
.user-menu-item svg { flex: none; color: var(--muted); }
.user-menu-danger { color: var(--red); }
.user-menu-danger svg { color: var(--red); }
.user-menu-danger:hover { background: var(--red-soft); }

/* Generic actions dropdown (native <details>) — reused by page action bars. */
.menu-dd > summary { list-style: none; user-select: none; }
.menu-dd > summary::-webkit-details-marker { display: none; }
.menu-dd-head {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 8px 8px 4px;
}
.menu-dd-head:first-child { padding-top: 2px; }
.menu-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 8px; border-radius: 7px; color: var(--text); font-size: 13px; white-space: nowrap;
}
.menu-dd-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-dd-item svg { flex: none; width: 15px; height: 15px; color: var(--muted); }

.content { padding: 18px; flex: 1; }

/* Mobile sidebar */
.nav-scrim { display: none; }
@media (max-width: 860px) {
  .sidebar {
    position: fixed; z-index: 60; left: 0; top: 0;
    transform: translateX(-100%); transition: transform .14s var(--ease);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .app.has-appbar .sidebar { top: 46px; height: calc(100vh - 46px); }
  .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .14s; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .menu-toggle { display: block; }
  .topbar-search-text, .topbar-username, .user-menu-caret { display: none; }
  /* Condense the app-switcher to icons so all apps fit a narrow viewport. */
  .app-switcher-apps a .lbl { display: none; }
  .app-switcher { gap: 8px; }
}

/* ---------- iOS safe-area insets (notch / Dynamic Island / home indicator) ---
   The app runs with viewport-fit=cover so the WebView extends edge-to-edge.
   Use env(safe-area-inset-*) to push sticky bars clear of the status bar and
   the home-indicator swipe zone. Falls back to 0px on Android and desktop.    */

/* App-switcher bar (present when user is in an App persona): extend downward
   into the safe zone so the notch overlaps the dark sidebar background, not
   any interactive content. */
.app-switcher {
  height: calc(46px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
/* Sidebar and topbar tuck beneath the (now taller) app-switcher. */
.app.has-appbar .sidebar {
  top: calc(46px + env(safe-area-inset-top, 0px));
  height: calc(100vh - 46px - env(safe-area-inset-top, 0px));
}
.app.has-appbar .topbar { top: calc(46px + env(safe-area-inset-top, 0px)); }

/* No-appbar: topbar and sidebar brand are the topmost elements — extend them. */
.app:not(.has-appbar) .topbar {
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.app:not(.has-appbar) .sidebar .brand {
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

/* Mobile: sidebar is fixed; keep its top in sync with the appbar height. */
@media (max-width: 860px) {
  .app.has-appbar .sidebar {
    top: calc(46px + env(safe-area-inset-top, 0px));
    height: calc(100vh - 46px - env(safe-area-inset-top, 0px));
  }
  .sidebar { top: env(safe-area-inset-top, 0px); }
}

/* Home indicator / bottom gesture bar. */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -16px -16px 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.card-head h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.card-link { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.card-link:hover { color: var(--brand); }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* Responsive tables → stacked label/value cards (ux.js tags .table-cards and
   copies each column header onto its cells' data-label). Each row becomes a card
   with the header text on the left and the value on the right. */
@media (max-width: 620px) {
  .table-cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .table-cards, .table-cards tbody { display: block; width: 100%; }
  .table-cards tr { display: block; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 4px 12px; background: var(--surface); }
  .table-cards td { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 7px 0; border: none; text-align: right; }
  .table-cards td + td { border-top: 1px solid var(--border); }
  .table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; flex: 0 0 auto; }
  .table-cards td:empty { display: none; }
  /* A clickable row already navigates on tap; show it's interactive. */
  .table-cards tr[onclick] { cursor: pointer; }
}

/* ---------- Metric tiles ---------- */
.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--t) var(--ease);
}
.metric:hover { border-color: var(--border-strong); }
.metric-top { display: flex; justify-content: flex-end; }
.metric-ico { font-size: 15px; opacity: .5; }
.metric-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.metric-value { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.metric-foot { font-size: 11.5px; color: var(--muted-2); }
.metric.t-blue  { border-top-color: var(--blue); }
.metric.t-green { border-top-color: var(--green); }
.metric.t-amber { border-top-color: var(--amber); }
.metric.t-red   { border-top-color: var(--red); }
.metric-delta { font-size: 11px; font-weight: 600; margin-top: 3px; }
.metric-delta.green { color: var(--green); }
.metric-delta.red   { color: var(--red); }
.metric-delta.gray  { color: var(--muted); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-align: left; font-weight: 500;
  padding: 8px 12px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; }
.table tbody td:first-child { white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }
.table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--brand); }
/* On narrow screens a wide table scrolls horizontally inside its card rather than
   pushing the whole page wider (which would create an awkward full-page x-scroll). */
.card:has(.table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cell-truncate { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---------- Searchable combobox (progressive enhancement of <select>) ---------- */
.cb { position: relative; }
.cb-native { display: none; }
.cb-input { width: 100%; cursor: text; }
.cb-menu {
  position: absolute; z-index: 60; top: 100%; left: 0; right: 0; margin: 2px 0 0;
  max-height: 260px; overflow-y: auto; list-style: none;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.cb-opt { padding: 7px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-opt.is-sel { font-weight: 600; }
.cb-opt.is-active, .cb-opt:hover { background: var(--brand-soft); }
.cb-empty { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.cb-group { padding: 5px 10px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
/* Inline SVG icons (lib/icons.js) — replace emoji-as-iconography. Inherit text
   color via currentColor and sit on the text baseline like a glyph. */
.tw-icon { display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
.tw-icon-lg { width: 20px; height: 20px; }

/* Entity picker (Issues #48, #50): searchable single/multi-select popover. */
.ep { position: relative; }
.ep-native { display: none; }
.ep-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.ep-toggle:hover { border-color: var(--border-strong); }
.ep-toggle .ep-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-toggle:not(.ep-has-sel) .ep-summary { color: var(--muted); }
.ep-caret { color: var(--muted); flex-shrink: 0; }
.ep-panel {
  position: absolute; z-index: 60; top: 100%; left: 0; right: 0; margin: 2px 0 0;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.ep-search { width: 100%; border: 0; border-bottom: 1px solid var(--border); padding: 8px 10px; font-size: 13px; }
.ep-search:focus { outline: none; background: var(--surface-2); }
.ep-tools { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.ep-act { font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; }
.ep-act:hover { text-decoration: underline; }
.ep-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.ep-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
.ep-opt label { display: flex; align-items: center; gap: 8px; padding: 5px 10px; margin: 0; font-weight: 400; font-size: 13px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ep-opt label:hover { background: var(--brand-soft); }
.ep-opt input { margin: 0; flex-shrink: 0; }
.ep-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-empty { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.ep-header { padding: 7px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--muted); cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-header:not(:first-child) { margin-top: 2px; border-top: 1px solid var(--border); padding-top: 7px; }

/* Sheet select (touch-first single-select): trigger button + bottom-sheet dialog.
   Used where a native dropdown fights the mobile keyboard (e.g. the WO team
   picker). The list is a full-width scrollable sheet with generous tap targets;
   on wider screens it centers as a plain modal. */
.ss-native { display: none; }
.ss-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.ss-trigger:hover:not(:disabled) { border-color: var(--border-strong); }
.ss-trigger:disabled { opacity: .6; cursor: default; }
.ss-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-caret { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }

.ss-scrim {
  position: fixed; inset: 0; z-index: 10040;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), visibility .18s var(--ease);
}
.ss-scrim.is-open { opacity: 1; visibility: visible; }
.ss-sheet {
  display: flex; flex-direction: column;
  width: 100%; max-width: 520px; max-height: 80vh;
  background: var(--surface); border: 1px solid var(--border-strong); border-bottom: 0;
  box-shadow: var(--shadow-lg);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform .22s var(--ease);
}
.ss-sheet:focus { outline: none; }
.ss-scrim.is-open .ss-sheet { transform: translateY(0); }
.ss-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ss-title { font-weight: 600; font-size: 15px; }
.ss-close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.ss-close:hover { color: var(--text); }
/* 16px prevents iOS from zooming the viewport when the search box is tapped. */
.ss-search { margin: 12px 16px 0; padding: 10px 12px; font-size: 16px; }
.ss-list { list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ss-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; font-size: 15px; cursor: pointer; border-top: 1px solid var(--border);
}
.ss-opt:first-child { border-top: 0; }
.ss-opt:hover, .ss-opt:active { background: var(--brand-soft); }
.ss-opt.is-sel { font-weight: 600; color: var(--brand); }
.ss-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-check { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); }
.ss-empty { padding: 18px 16px; text-align: center; font-size: 14px; color: var(--muted); }
/* "+ Add / Suggest asset" row shown when a search finds no match. */
.ss-action { padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--brand); cursor: pointer; border-top: 1px solid var(--border); }
.ss-action:first-child { border-top: 0; }
.ss-action:hover, .ss-action:active { background: var(--brand-soft); }
/* Location-path group headers + the active-scope bar (asset picker). */
.ss-group { position: sticky; top: 0; padding: 7px 16px 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--border); }
.ss-group:first-child { border-top: 0; }
.ss-scope { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 16px 0; padding: 7px 11px; font-size: 13px; background: var(--brand-soft); border: 1px solid var(--border); }
.ss-scope-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-scope-label { font-weight: 600; }
.ss-scope-clear { flex-shrink: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; }
.ss-scope-clear:hover { text-decoration: underline; }

@media (min-width: 720px) {
  /* Center as a plain modal on wider screens instead of a bottom sheet. */
  .ss-scrim { align-items: center; padding: 16px; }
  .ss-sheet { max-height: 70vh; border-bottom: 1px solid var(--border-strong); transform: translateY(10px) scale(.98); }
  .ss-scrim.is-open .ss-sheet { transform: translateY(0) scale(1); }
}

/* Lock background scroll while a sheet is open (the app scroller is .main). */
body.ss-open { overflow: hidden; }
body.ss-open .main { overflow: hidden; }

/* Search palette: matched-text highlight + recent-query chips */
.ld-search-results mark { background: var(--brand-soft); color: inherit; font-weight: 700; padding: 0 1px; }
.ld-search-recents { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 10px; }
.ld-search-recent { font: inherit; font-size: 12px; padding: 3px 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); cursor: pointer; }
.ld-search-recent:hover { background: var(--surface-3); border-color: var(--border-strong); }
.ld-search-all { display: block; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--brand); border-top: 1px solid var(--border); }
.ld-search-all:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- Work-order views: switcher, inline edit, detailed ---------- */
.viewseg { display: inline-flex; border: 1px solid var(--border); flex-shrink: 0; }
.viewseg a { padding: 5px 11px; font-size: 12.5px; color: var(--muted); border-right: 1px solid var(--border); white-space: nowrap; }
.viewseg a:last-child { border-right: 0; }
.viewseg a:hover { text-decoration: none; background: var(--surface-2); }
.viewseg a.active { background: var(--brand); color: var(--brand-ink); }
/* Inline pill-style selects in the table view (click to change → autosaves). */
.pill-select { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 2px 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; max-width: 130px; }
.pill-select:hover { border-color: var(--border-strong); }
.pill-select:disabled { opacity: .5; }
.pill-select.tone-green { color: var(--green); } .pill-select.tone-amber { color: var(--amber); }
.pill-select.tone-red { color: var(--red); } .pill-select.tone-blue { color: var(--blue); }
.pill-select.tone-gray { color: var(--muted); }

/* Contextual-color dropdowns: a <select class="js-tone"> is tinted to its selected
   option's tone (ux.js), and .tone-text colors inline status/category text — both
   share the pill palette so a value is one consistent color everywhere. */
select.js-tone { font-weight: 600; }
select.js-tone.tone-green { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
select.js-tone.tone-amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
select.js-tone.tone-red   { color: var(--red);   border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
select.js-tone.tone-blue  { color: var(--blue);  border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
select.js-tone.tone-gray  { color: var(--muted); }
/* The tint applies to the closed control only — the open option list would
   otherwise inherit the selected value's color, painting every choice the same.
   Reset each option to the normal foreground so the dropdown reads correctly. */
select.js-tone option, select.pill-select option { color: var(--text); font-weight: 400; }
.tone-text { font-weight: 600; }
.tone-text.tone-green { color: var(--green); } .tone-text.tone-amber { color: var(--amber); }
.tone-text.tone-red { color: var(--red); } .tone-text.tone-blue { color: var(--blue); }
.tone-text.tone-gray { color: var(--muted); }

.wo-table td { vertical-align: middle; }
.wo-date { font-size: 12px; padding: 2px 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.wo-titlelink { color: var(--text); font-weight: 500; }
/* Detailed view */
.wo-detail-list { display: flex; flex-direction: column; gap: 10px; }
.wo-detail-card { padding: 14px 16px; }
.wo-detail-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--text-soft); }
/* Skip-to-content link — visually hidden until focused (keyboard a11y). */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 6px; font-weight: 600; font-size: 13px; transform: translateY(-150%); transition: transform .12s ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* Small button size — replaces repeated inline padding:3px 10px;font-size:12px. */
.btn.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn.btn-xs { padding: 2px 8px; font-size: 11px; }

/* Transient action toast (reusable: inline saves, AJAX actions, via window.twToast) */
.tw-toast, .wo-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 9000; padding: 9px 16px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); border-radius: 8px; }
.tw-toast.ok, .wo-toast.ok { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.tw-toast.err, .wo-toast.err { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }

/* Barcode/QR scan overlay (mobile part lookup). The video fills a centered box;
   a frame guide + hint sit on top. Shown only when BarcodeDetector is supported. */
.tw-scan { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.82); padding: 16px; }
.tw-scan-box { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tw-scan-video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; border-radius: 10px; }
.tw-scan-frame { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 72%; aspect-ratio: 4 / 3; max-height: calc(100% - 84px); margin-top: 0; border: 2px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.25); pointer-events: none; }
.tw-scan-hint { color: #fff; font-size: 13px; text-align: center; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tw-scan-actions { display: flex; gap: 10px; }
.tw-scan-cancel, .tw-scan-torch { background: #fff; }
.tw-scan-torch.is-on { background: var(--amber); color: #1a1206; border-color: var(--amber); }

/* Print-optimized report view (standalone /reports/print) */
.report-print-page { background: var(--bg); }
.report-print { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; }
.report-print-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.report-print-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--border-strong); }
.report-print-foot { text-align: center; font-size: 11px; margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); }
@media print {
  .no-print { display: none !important; }
  .report-print { max-width: none; margin: 0; padding: 0; }
  .report-print-page { background: #fff; }
  a { color: inherit; text-decoration: none; }
  .card, .metric { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  .grid { break-inside: avoid; }
  thead { display: table-header-group; }
  @page { margin: 14mm; }
}

/* Dismissible / auto-fading server flashes (enhanced by ux.js wireFlashToasts) */
.flash[data-transient] { position: relative; padding-right: 34px; transition: opacity .35s ease, transform .35s ease; }
.flash .flash-x { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: inherit; opacity: .6; padding: 2px 6px; }
.flash .flash-x:hover { opacity: 1; }
.flash.flash-fade { opacity: 0; transform: translateY(-6px); }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid transparent; white-space: nowrap;
}
.pill.green { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.pill.amber { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.pill.red   { background: var(--red-soft);   color: var(--red);   border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.pill.blue  { background: var(--blue-soft);  color: var(--blue);  border-color: color-mix(in srgb, var(--blue) 30%, transparent); }
.pill.gray  { background: var(--surface-3);  color: var(--muted); border-color: var(--border); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 600;
  background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--muted-2); }
.btn.ghost { background: transparent; color: var(--text-soft); border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn.lg { padding: 11px 22px; font-size: 14px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 13px;
  padding: 8px 10px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--muted); }
input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--brand); }
textarea { resize: vertical; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.toolbar input, .toolbar select { width: auto; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-head { margin-bottom: 16px; }

/* ---------- Flash ---------- */
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--muted-2);
}
.flash.success { background: var(--green-soft); border-left-color: var(--green); color: var(--text); }
.flash.error { background: var(--red-soft); border-left-color: var(--red); color: var(--text); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 40px 20px; }
.empty-title { font-weight: 700; font-size: 14px; margin-bottom: 5px; }
.empty-text { color: var(--muted); font-size: 13px; max-width: 360px; margin: 0 auto; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab {
  flex-shrink: 0; white-space: nowrap;
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Section sub-nav: a .tabs bar with right-aligned actions (used by the LMS). */
.subnav { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.subnav .tabs { border-bottom: none; }
.subnav-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }

/* Back link: small uppercase "← context" affordance above a page heading. */
.back-link { display: inline-block; font-size: 12px; color: var(--muted); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
.back-link:hover { color: var(--text); }

/* Eyebrow: the small uppercase label above a card/section. */
.eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- Hero (page banner) ---------- */
.hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  padding: 16px 18px; margin-bottom: 16px;
}
.hero-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 5px; }
.hero-text h1 { font-size: 20px; }
.hero-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Auth / centered pages ---------- */
.center-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
}
.auth-card { width: 380px; max-width: 100%; background: var(--surface); border: 1px solid var(--border-strong); padding: 30px 28px; box-shadow: var(--shadow-lg); }
.auth-card .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; margin-bottom: 6px; }
.auth-card .brand span:not(.dot) { color: var(--brand); }
.auth-card .tag { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

/* ---------- Search palette ---------- */
.ld-search { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.ld-search[hidden] { display: none; }
.ld-search-scrim { position: absolute; inset: 0; background: rgba(6,8,12,.55); }
.ld-search-panel { position: relative; width: 600px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.ld-search-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ld-search-input input { border: none; padding: 0; font-size: 15px; background: transparent; }
.ld-search-input input:focus { box-shadow: none; }
.ld-search-close { width: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.ld-search-results { max-height: 56vh; overflow-y: auto; }
.ld-search-group { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 4px; }
.ld-search-item { display: flex; align-items: center; gap: 11px; padding: 9px 14px; color: var(--text); }
.ld-search-item:hover, .ld-search-item.is-active { background: var(--surface-2); text-decoration: none; }
.ld-search-item.is-active { box-shadow: inset 2px 0 0 var(--brand); }
.ld-search-ico { width: 18px; text-align: center; opacity: .7; }
.ld-search-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ld-search-text strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-search-sub { font-size: 11.5px; color: var(--muted); }
.ld-search-empty { padding: 22px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.ld-search-foot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }

/* ── Attachments: uploader, gallery, lightbox ─────────────────────────────── */
.upload-zone { border: 1.5px dashed var(--border-strong); background: var(--surface-2); padding: 18px; text-align: center; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.upload-zone:hover, .upload-zone:focus-visible { border-color: var(--brand); }
.upload-zone.is-dragover { border-color: var(--brand); background: var(--brand-soft); }
.upload-zone-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.upload-zone-inner .btn { pointer-events: auto; }
.upload-zone-ico { font-size: 26px; }
.upload-zone-text { font-size: 13px; color: var(--text-soft); }
.upload-zone-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.upload-zone-hint { font-size: 11.5px; }
/* The camera button is most useful on touch devices; keep it visible everywhere
   (the file input falls back to a picker on desktop). */
.attach-progress { margin-top: 10px; height: 6px; background: var(--surface-3); position: relative; }
.attach-progress-bar { height: 100%; width: 0; background: var(--brand); transition: width .2s var(--ease-out); }
.attach-progress-label { position: absolute; right: 0; top: 8px; font-size: 11px; color: var(--muted); }
.attach-errors { margin-top: 10px; font-size: 12.5px; color: var(--red); display: flex; flex-direction: column; gap: 3px; }

.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.attach-thumb { margin: 0; border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; overflow: hidden; }
.attach-thumb-open { display: block; padding: 0; border: 0; background: var(--surface-3); cursor: zoom-in; width: 100%; aspect-ratio: 4 / 3; }
.attach-thumb-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb-video { display: block; width: 100%; aspect-ratio: 4 / 3; background: #000; object-fit: cover; }
.attach-thumb-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 4 / 3; padding: 10px; text-align: center; color: var(--text-soft); }
.attach-file-ico { font-size: 30px; }
.attach-file-name { font-size: 11.5px; word-break: break-word; max-width: 100%; }
.attach-thumb-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 4 / 3; padding: 12px; background: var(--surface-3); }
.attach-thumb-audio .attach-file-ico { font-size: 34px; }
.attach-audio { width: 100%; max-width: 220px; }
.attach-field-badge { flex-shrink: 0; font-size: 10px; padding: 1px 7px; text-transform: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-notes-preview-wrap { margin-top: 8px; }
.attach-notes-preview { display: block; border-top: 0; padding: 6px 8px; margin-top: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; }
.attach-thumb.is-primary { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.attach-thumb-open { position: relative; }
.attach-primary-flag { position: absolute; top: 6px; left: 6px; font-size: 13px; line-height: 1; color: #f5b301; background: rgba(0,0,0,.55); padding: 2px 5px; border-radius: 3px; pointer-events: none; }
.attach-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--border); }
.attach-kind-badge { flex-shrink: 0; font-size: 10px; padding: 1px 7px; text-transform: none; }
.attach-meta-name { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-meta-actions { display: flex; gap: 4px; flex-shrink: 0; }
.attach-act { font-size: 13px; line-height: 1; padding: 3px 5px; color: var(--muted); background: transparent; border: 1px solid transparent; cursor: pointer; }
.attach-act:hover { color: var(--text); border-color: var(--border); text-decoration: none; }
.attach-act.attach-primary.is-on { color: #f5b301; }
.attach-del:hover { color: var(--red); border-color: var(--red); }
.attach-notes { flex-basis: 100%; font-size: 12px; color: var(--text-soft); margin-top: 2px; padding-top: 4px; border-top: 1px dashed var(--border); }
.attach-notes[hidden] { display: none; }
.attach-notes > :first-child { margin-top: 0; } .attach-notes > :last-child { margin-bottom: 0; }
.attach-notes p { margin: .25em 0; } .attach-notes ul, .attach-notes ol { margin: .25em 0; padding-left: 1.3em; }
.attach-notes code { font-family: var(--mono); font-size: .9em; background: var(--surface-3); padding: 0 3px; }
.attach-kind-pick { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; pointer-events: auto; }
.attach-kind-pick select { font-size: 12px; padding: 3px 6px; }
.attach-empty { padding: 22px 12px; }
.part-thumb { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--border); border-radius: 3px; flex-shrink: 0; background: var(--surface-3); }

/* Edit-details / reuse-photo modals. */
.attach-modal { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; padding: 16px; }
.attach-modal[hidden] { display: none; }
.attach-modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.attach-modal-panel { position: relative; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); border-radius: 4px; padding: 20px; width: 100%; max-width: 460px; max-height: 86vh; overflow: auto; }
.attach-reuse-panel { max-width: 640px; }
.attach-reuse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.attach-reuse-item { padding: 0; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; }
.attach-reuse-item:hover { border-color: var(--brand); }
.attach-reuse-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.attach-reuse-src { font-size: 10.5px; color: var(--muted); padding: 3px 5px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: 92vw; max-height: 82vh; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; top: 14px; right: 16px; font-size: 22px; color: #fff; background: rgba(255,255,255,.12); border: 0; width: 40px; height: 40px; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 38px; color: #fff; background: rgba(255,255,255,.10); border: 0; width: 52px; height: 72px; cursor: pointer; }
.lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-caption { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(0,0,0,.5); padding: 6px 14px; max-width: 80vw; text-align: center; }
.lightbox-actions { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
@media (max-width: 620px) { .lightbox-nav { width: 40px; height: 56px; font-size: 30px; } }

/* Image annotator */
.annotator { position: fixed; inset: 0; z-index: 10010; background: rgba(0,0,0,.92); display: flex; flex-direction: column; }
.annotator-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.annotator-tools, .annotator-colors, .annotator-actions { display: flex; gap: 6px; align-items: center; }
.annotator-actions { margin-left: auto; }
.anno-tool { width: 34px; height: 30px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: 15px; }
.anno-tool.is-active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.anno-color { width: 22px; height: 22px; border: 2px solid var(--border-strong); cursor: pointer; padding: 0; }
.anno-color.is-active { outline: 2px solid var(--brand); outline-offset: 1px; }
.annotator-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; }
.annotator-canvas { max-width: 100%; max-height: 100%; touch-action: none; cursor: crosshair; box-shadow: 0 4px 24px rgba(0,0,0,.5); background: #fff; }

/* ── PWA: install banner, offline indicator, update toast ──────────────────── */
.pwa-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); font-size: 13px; }
.pwa-banner .pwa-banner-text { flex: 1; }
.pwa-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10001; display: flex; align-items: center; gap: 12px; background: var(--text); color: var(--surface); padding: 11px 16px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.pwa-toast .btn { padding: 5px 12px; font-size: 12px; }
.pwa-offline { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10001; background: var(--amber, #b45309); color: #fff; padding: 8px 16px; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
[hidden] { display: none !important; }

/* ── Schedule board ────────────────────────────────────────────────────────── */
.sched-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sched-nav { display: flex; align-items: center; gap: 8px; }
.sched-icon-btn { padding: 6px 12px; font-weight: 700; }
.sched-range { font-size: 15px; margin-left: 6px; }
.sched-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-controls select { width: auto; }
.sched-viewtoggle { display: inline-flex; border: 1px solid var(--border-strong); overflow: hidden; }
.sched-view-btn { background: var(--surface); color: var(--text-soft); border: 0; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sched-view-btn + .sched-view-btn { border-left: 1px solid var(--border); }
.sched-view-btn.is-active { background: var(--brand); color: var(--brand-ink); }

.sched-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .sched-layout { grid-template-columns: 1fr; } }

.sched-backlog { border: 1px solid var(--border); background: var(--surface); padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; }
.sched-backlog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sched-backlog-head h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.sched-backlog-hint { font-size: 11.5px; margin: 6px 0 10px; }
.sched-backlog-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 80px; }
.sched-backlog-list.is-droptarget { outline: 2px dashed var(--brand); outline-offset: 2px; }
.sched-empty-rail { color: var(--muted); font-size: 12.5px; text-align: center; padding: 18px 8px; }

.sched-board-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--surface); }
.sched-board.is-loading { opacity: .5; pointer-events: none; }

/* Week resource grid */
.sched-week { min-width: 720px; }
.sched-week-head, .sched-row { display: grid; }
.sched-week-head { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); }
.sched-res-corner { border-right: 1px solid var(--border); }
.sched-dhead { padding: 8px 6px; text-align: center; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.sched-dhead.is-today { background: var(--brand-soft); }
.sched-dhead-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.sched-dhead-dom { font-size: 15px; font-weight: 700; }
.sched-row { border-bottom: 1px solid var(--border); }
.sched-res { padding: 8px 10px; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--surface-2); position: sticky; left: 0; z-index: 1; }
.sched-res-name { font-size: 13px; font-weight: 600; }
.sched-res-role { font-size: 11px; color: var(--muted); }
.sched-res-un .sched-res-name { color: var(--muted); }
.sched-res-load { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.sched-cell { border-right: 1px solid var(--border); padding: 6px; min-height: 78px; display: flex; flex-direction: column; gap: 6px; transition: background .12s var(--ease); }
/* Per-cell capacity footer: estimated hours vs the daily target. */
.sched-cap { margin-top: auto; align-self: flex-end; font-size: 10px; font-family: var(--mono); font-weight: 700; padding: 1px 5px; color: var(--muted); background: var(--surface-3); }
.sched-cap.is-ok { color: var(--green); background: var(--green-soft); }
.sched-cap.is-near { color: var(--amber); background: var(--amber-soft); }
.sched-cap.is-over { color: #fff; background: var(--red); }
.sched-mcell { cursor: pointer; }
.sched-cell[data-today="1"] { background: color-mix(in srgb, var(--brand-soft) 50%, transparent); }
.sched-cell.is-droptarget { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
/* Availability overlay: a technician's off day (PTO / sick / training / other) */
.sched-cell.sched-off { background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--surface-3) 6px, var(--surface-3) 7px); }
.sched-off-badge { align-self: flex-start; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; color: #fff; background: var(--muted); }
.sched-cell.sched-off-pto .sched-off-badge { background: var(--blue, #2563eb); }
.sched-cell.sched-off-sick .sched-off-badge { background: var(--red, #dc2626); }
.sched-cell.sched-off-training .sched-off-badge { background: var(--amber, #d97706); }

/* Cards */
.sched-card { border: 1px solid var(--border); border-left: 3px solid var(--muted-2); background: var(--surface); padding: 7px 9px; cursor: grab; user-select: none; touch-action: none; overflow: hidden; }
.sched-card:hover { border-color: var(--border-strong); }
.sched-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sched-card.prio-red { border-left-color: var(--red); } .sched-card.prio-amber { border-left-color: var(--amber); }
.sched-card.prio-blue { border-left-color: var(--blue); } .sched-card.prio-gray { border-left-color: var(--muted-2); }
.sched-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sched-card-num { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.sched-card-prio { font-size: 9px; text-transform: capitalize; flex-shrink: 0; }
.sched-card-title { font-size: 12.5px; font-weight: 600; margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.sched-card-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.sched-card.is-dragsource { opacity: .35; }

/* Month grid */
.sched-month { min-width: 720px; }
.sched-month-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; z-index: 2; }
.sched-month-dow > div { padding: 7px 6px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-right: 1px solid var(--border); }
.sched-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(104px, auto); }
.sched-mcell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5px; display: flex; flex-direction: column; gap: 4px; transition: background .12s var(--ease); }
.sched-mcell.is-out { background: var(--surface-2); }
.sched-mcell.is-out .sched-mcell-dom { color: var(--muted-2); }
.sched-mcell.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
.sched-mcell.is-droptarget { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.sched-mcell-dom { font-size: 12px; font-weight: 700; color: var(--text-soft); align-self: flex-end; }
.sched-mcell-list { display: flex; flex-direction: column; gap: 3px; }
.sched-chip { display: flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-left: 3px solid var(--muted-2); background: var(--surface); padding: 3px 6px; font-size: 11px; cursor: grab; user-select: none; touch-action: none; white-space: nowrap; overflow: hidden; }
.sched-chip.prio-red { border-left-color: var(--red); } .sched-chip.prio-amber { border-left-color: var(--amber); }
.sched-chip.prio-blue { border-left-color: var(--blue); } .sched-chip.prio-gray { border-left-color: var(--muted-2); }
.sched-chip-dot { display: none; }
.sched-chip-num { font-family: var(--mono); font-weight: 700; color: var(--muted); }
.sched-chip-title { overflow: hidden; text-overflow: ellipsis; }
.sched-chip.is-dragsource { opacity: .35; }
/* Required-skill badges on schedule cards/chips */
.sched-skill-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; font-size: 10px; line-height: 1; vertical-align: middle; }
.sched-skill-warn { color: var(--red); font-weight: 700; }
.sched-card-skills { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.sched-skill-mismatch { box-shadow: inset 0 0 0 1px var(--red); }

/* GS-P4.3 parts-kit readiness badge on schedule cards */
.sched-kit { font-size: 10px; font-weight: 700; font-family: var(--mono); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.sched-kit-ready { color: var(--green); background: var(--green-soft); }
.sched-kit-short { color: var(--amber); background: var(--amber-soft); }

/* GS-P2.2 multi-select highlight + floating hint */
.sched-multi { box-shadow: inset 0 0 0 2px var(--brand); }
.sched-multi-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,0,0,.2); display: none; }

/* GS-P2.3 over-capacity summary banner */
.sched-overcap-banner { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--amber); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }

/* Drag ghost */
.sched-ghost { position: fixed; z-index: 10002; pointer-events: none; box-shadow: 0 8px 28px rgba(0,0,0,.35); transform: rotate(1.5deg); opacity: .96; }
body.sched-is-dragging { cursor: grabbing; }
body.sched-is-dragging * { cursor: grabbing !important; }

/* Edit modal */
.sched-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sched-modal[hidden] { display: none; }
.sched-modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sched-modal-card { position: relative; background: var(--surface); border: 1px solid var(--border-strong); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.4); }
.sched-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sched-modal-num { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); }
.sched-modal-head h3 { margin: 2px 0 0; font-size: 16px; }
.sched-modal-body { padding: 16px; }
.sched-status-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sched-status-row select { flex: 1; min-width: 160px; }
.sched-status-row input { flex: 2; min-width: 180px; }
.sched-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.sched-modal-msg { font-size: 12.5px; color: var(--muted); }

/* Toast */
.sched-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px); z-index: 10003; background: var(--text); color: var(--surface); padding: 10px 18px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.sched-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Progress bar (onboarding, billing usage, checklist) ──────────────────── */
.progress { height: 6px; background: var(--surface-3); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--brand); transition: width .4s var(--ease-out); }
.progress-fill.over { background: var(--red); }
.progress-fill.near { background: var(--amber); }

/* Automation rule dry-run preview */
.wf-preview { margin-top: 12px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.wf-preview-list { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; }
.wf-preview-list li { margin: 2px 0; }

/* ── Activity / discussion feed (work orders, workflows, request threads) ──── */
.feed { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.feed-item { display: flex; gap: 12px; padding: 8px 0; }
.feed-dot { width: 8px; height: 8px; margin-top: 6px; flex-shrink: 0; background: var(--muted-2); }
.feed-status { background: var(--brand); } .feed-comment { background: var(--blue); }
.feed-assignment { background: var(--amber); } .feed-created { background: var(--green); }
.feed-labor { background: var(--accent); } .feed-field { background: var(--muted-2); }
.feed-text { font-size: 13.5px; } .feed-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ── Reports / analytics charts ───────────────────────────────────────────── */
.chart-key { font-weight: 600; margin-left: 8px; }
.chart-key-created { color: var(--brand); }
.chart-key-completed { color: var(--green); }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 84px 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; }
.bar-row-link { color: inherit; padding: 2px 4px; margin: 0 -4px; }
.bar-row-link:hover { background: var(--surface-2); text-decoration: none; }
.bar-label { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.bar-track { height: 14px; background: var(--surface-3); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); transition: width .3s var(--ease-out); }
.bar-val { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.bar-fill.tone-blue { background: var(--blue); } .bar-fill.tone-green { background: var(--green); }
.bar-fill.tone-amber { background: var(--amber); } .bar-fill.tone-red { background: var(--red); }
.bar-fill.tone-gray { background: var(--muted-2); }

/* Department add-member toolbar: stack cleanly on very narrow screens. */
@media (max-width: 480px) {
  .member-add-form { flex-direction: column; align-items: stretch !important; }
  .member-add-form > * { width: 100%; }
}

/* ============================================================================
   Roles & permissions builder (Settings → Roles). An enterprise-grade access
   matrix: role cards, a searchable category matrix with toggle switches, and a
   per-user tri-state (Inherit / Allow / Deny) override panel.
   ========================================================================== */

/* ---- Role cards (index) ---- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.role-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--rc, var(--muted-2));
  padding: 14px 15px; transition: border-color .08s var(--ease);
}
.role-card:hover { border-color: var(--border-strong); }
.role-card .rc-head { display: flex; align-items: center; gap: 9px; }
.role-card .rc-dot { width: 11px; height: 11px; flex: none; background: var(--rc, var(--muted-2)); border-radius: 50%; }
.role-card .rc-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.role-card .rc-name a { color: var(--text); }
.role-card .rc-name a:hover { color: var(--brand); }
.role-card .rc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; min-height: 2.6em; }
.role-card .rc-meta { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.role-card .rc-meta strong { color: var(--text); font-weight: 700; }
.rc-bar { height: 5px; background: var(--surface-3); overflow: hidden; }
.rc-bar > span { display: block; height: 100%; background: var(--rc, var(--brand)); }

/* ---- Matrix builder ---- */
.perm-toolbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); padding: 10px 12px; margin-bottom: 14px;
}
.perm-search { flex: 1 1 220px; min-width: 180px; }
.perm-search input { width: 100%; }
.perm-count { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.perm-count strong { color: var(--text); }
.perm-toolbar .perm-bulk { display: flex; gap: 6px; }

.perm-cat { border: 1px solid var(--border); margin-bottom: 10px; background: var(--surface); }
.perm-cat-head {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer;
  background: var(--surface-2); border-bottom: 1px solid transparent; user-select: none;
}
.perm-cat.is-open .perm-cat-head { border-bottom-color: var(--border); }
.perm-cat-ico { color: var(--muted); display: inline-flex; }
.perm-cat-caret { color: var(--muted-2); margin-left: auto; transition: transform .12s var(--ease); }
.perm-cat.is-open .perm-cat-caret { transform: rotate(90deg); }
.perm-cat-title { font-size: 13.5px; font-weight: 700; }
.perm-cat-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.perm-cat-tally { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 1px 7px; border: 1px solid var(--border); }
.perm-cat-tally.is-full { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.perm-cat-body { display: none; }
.perm-cat.is-open .perm-cat-body { display: block; }

.perm-row { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-top: 1px solid var(--grid-line); }
.perm-row:first-child { border-top: none; }
.perm-row.is-danger { background: color-mix(in srgb, var(--red-soft) 35%, transparent); }
.perm-row-text { flex: 1; min-width: 0; }
.perm-row-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.perm-row-desc { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.perm-key { font-family: var(--mono); font-size: 10px; color: var(--muted-2); }
.perm-tag { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border: 1px solid var(--border); color: var(--muted); }
.perm-tag.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.perm-tag.plan { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.perm-tag.drift { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }

/* Toggle switch */
.perm-switch { position: relative; flex: none; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.perm-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.perm-switch .track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background .1s var(--ease), border-color .1s var(--ease); }
.perm-switch .thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--surface); box-shadow: var(--shadow); transition: transform .1s var(--ease); }
.perm-switch input:checked + .track { background: var(--brand); border-color: var(--brand); }
.perm-switch input:checked + .track + .thumb { transform: translateX(16px); background: var(--brand-ink); }
.perm-switch input:disabled { cursor: not-allowed; }
.perm-switch input:disabled + .track { opacity: .5; }
.perm-switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Sticky save bar */
.perm-savebar {
  position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--brand);
  padding: 11px 14px; margin-top: 14px; box-shadow: 0 -8px 24px -18px rgba(8,11,18,.4);
}
.perm-savebar .dirty-note { font-size: 12.5px; color: var(--amber); font-weight: 600; display: none; }
.perm-savebar.is-dirty .dirty-note { display: inline; }
.perm-savebar .saved-note { font-size: 12.5px; color: var(--muted); }
.perm-savebar.is-dirty .saved-note { display: none; }

/* ---- Per-user tri-state ---- */
.tri { display: inline-flex; flex: none; border: 1px solid var(--border); overflow: hidden; }
.tri label { position: relative; cursor: pointer; }
.tri input { position: absolute; opacity: 0; pointer-events: none; }
.tri span {
  display: inline-block; padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--muted);
  border-left: 1px solid var(--border); white-space: nowrap; transition: background .08s var(--ease), color .08s var(--ease);
}
.tri label:first-child span { border-left: none; }
.tri label:hover span { background: var(--surface-2); }
.tri input:checked + span { color: #fff; }
.tri .v-inherit input:checked + span { background: var(--muted); }
.tri .v-allow   input:checked + span { background: var(--green); }
.tri .v-deny    input:checked + span { background: var(--red); }
.tri input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }

.eff-pill { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; white-space: nowrap; }
.eff-pill.on  { color: var(--green); background: var(--green-soft); }
.eff-pill.off { color: var(--muted); background: var(--surface-3); }
.eff-pill.via-allow { color: var(--green); background: var(--green-soft); }
.eff-pill.via-deny  { color: var(--red);  background: var(--red-soft); }

@media (max-width: 640px) {
  .perm-row { flex-wrap: wrap; }
  .perm-toolbar { position: static; }
}

/* ---- Shared work-order card (partials/wo-card.ejs) ---- */
.wo-card { padding: 14px; margin-bottom: 10px; }
.wo-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wo-card-title { font-weight: 700; }
.wo-card-eyebrow { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.wo-card-desc { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 70ch; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wo-card-status { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }
.wo-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Shared detail-page header shell (DRYs the repeated inline flex header
   on WO / asset / part / site detail pages). ---- */
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-header > div:first-child { min-width: 0; }
.detail-header-sub { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.detail-header-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.detail-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- WO-detail primary action bar (top on desktop, pinned bottom on mobile) ---- */
.wo-actionbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); padding: 10px 14px; margin-bottom: 16px; }
@media (max-width: 620px) {
  .wo-actionbar { position: sticky; bottom: 0; z-index: 30; border-left: none; border-top: 2px solid var(--brand); box-shadow: 0 -6px 20px -16px rgba(8,11,18,.5); }
  .wo-actionbar .btn { flex: 1 1 auto; }
}

/* ---- Quick labor timer (WO detail): running Pause button + pause modal ---- */
.btn.wo-clock-running { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.wo-clock-running:hover { background: var(--amber); filter: brightness(.94); }
.wo-pause-modal { border: none; padding: 0; max-width: 420px; width: 95%; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.wo-pause-modal::backdrop { background: rgba(6,8,12,.5); }
.pause-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pause-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border-strong); font-size: 13px; cursor: pointer; user-select: none; }
.pause-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.pause-opt input { width: auto; }

/* ---- Touch targets: grow interactive controls to ~44px on coarse pointers
   (phone/tablet) without inflating the dense desktop layout. ---- */
@media (pointer: coarse) {
  .btn, .tab, .sidebar nav a,
  input:not([type=checkbox]):not([type=radio]):not([type=color]),
  select, textarea { min-height: 44px; }
  /* iOS/WKWebView (Capacitor) zooms the page in when a focused field's text is
     under 16px and never zooms back out — which made autofocused forms (e.g.
     Edit work order) open zoomed-in and hard to use. 16px on touch keeps the
     dense 13px desktop layout untouched (fine pointer) while stopping the zoom. */
  input:not([type=checkbox]):not([type=radio]):not([type=color]),
  select, textarea, .cb-input, .ss-trigger { font-size: 16px; }
  .btn { padding-block: 11px; }
  .btn.btn-sm, .btn.btn-xs { min-height: 38px; }
  .icon-btn, .menu-toggle { min-width: 44px; min-height: 44px; }
  .wo-card-actions .btn { flex: 1 1 auto; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }