/* ===========================================================================
   Agile Courts — the component system (Module 299)
   Loaded LAST, after style.css and brand.css.

   Evan, 4 Oct 2026:
     "I want you to be the most critical user of our CRM … I don't want any
      'basic' formatting left in the software. Every element has to appear
      polished and ready for an industry leading company. No element of this
      CRM should appear if it was 'home built' or not considered."

   WHAT THE AUDIT FOUND
   The brand layer (module 128) chose the right colours and the right type.
   What it never did was decide what a BUTTON is, what a TABLE is, what an
   INPUT is. So every module answered for itself, and the code base now holds:

       400 distinct hex colours        a mature product has ~25
        90 distinct font sizes                              ~8
       12+ corner radii                                      3
       946 inline style overrides                    near zero
        31 filled red "Delete" buttons, one on every row of every list
        28 of 38 screens that scroll sideways on a phone

   That inconsistency IS the home-built look. No single screen is ugly; the
   product just never agrees with itself.

   WHAT THIS FILE IS
   One decision per primitive, applied everywhere at once by class and by
   element, so the ~550 existing `.btn` buttons, every table, every select and
   every toolbar change together without touching the markup that renders
   them. Nothing here introduces a colour that is not already a brand token.

   Reference points, deliberately: Salesforce Lightning (density, tables),
   HubSpot Canvas (forms, empty states), Linear (restraint, focus states),
   Sortly (stock cards on a phone). Taken for discipline, not for looks — the
   look stays Agile Courts.
   ======================================================================== */

:root {
  /* --- scales: the only values components may use ---------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;

  --ctl-h: 36px; --ctl-h-sm: 30px; --ctl-h-xs: 26px;

  /* Shadows carry a trace of the brand green so they sit on ivory rather than
     floating grey over it. */
  --sh-1: 0 1px 2px rgba(30, 61, 43, 0.06), 0 1px 1px rgba(30, 61, 43, 0.04);
  --sh-2: 0 2px 6px rgba(30, 61, 43, 0.08), 0 1px 2px rgba(30, 61, 43, 0.05);
  --sh-3: 0 12px 32px rgba(22, 48, 31, 0.16), 0 3px 8px rgba(22, 48, 31, 0.08);

  --line: #E3DACA;            /* one border colour for everything on white  */
  --line-strong: #D2C6AE;     /* controls: a touch more definition          */
  --surface: #FFFFFF;
  --surface-sunk: #FAF7F0;    /* table heads, toolbars, quiet panels        */
  --focus: 0 0 0 3px rgba(30, 61, 43, 0.18);

  --danger-tint: #F6E9E5;
  --warn-tint: #F5EEDD;
  --ok-tint: #E6EFE8;
  --info-tint: #E7ECEF;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------------------
   0. GROUND
   --------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
/* Every figure in a business tool lines up. */
td, th, .num, .money, .price, [class*="total"], [class*="-amt"], input[type="number"] {
  font-variant-numeric: tabular-nums;
}
::selection { background: rgba(30, 61, 43, 0.16); }

/* Quiet scrollbars — the default grey bar is the first thing that makes a web
   app look like a web page. */
* { scrollbar-width: thin; scrollbar-color: #CFC3AA transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #D6CBB4; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #BFB194; background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* One focus state, visible, everywhere. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   1. TOP BAR — one row on a laptop
   A two-row navigation is the loudest single tell on the screen. module 128
   added a forced break (.tabs-break); on anything ≥1200px wide the items now
   fit on one line and the break is ignored.
   --------------------------------------------------------------------------- */
.topbar {
  box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 4px 18px rgba(16, 36, 24, 0.10);
  min-height: 60px;
}
/* On a laptop the bar stays put while the page scrolls under it — the way
   every CRM keeps search and navigation one click away. Below the
   phone-menu breakpoint it scrolls away, so an open menu can never be taller
   than a screen it is stuck to. z 40 sits under modals (50). */
@media (min-width: 901px) {
  .topbar { position: sticky; top: 0; z-index: 40; }
}
/* Leaflet's panes carry z-index 400–1000; without a stacking context of
   their own a map would paint over the sticky bar and over open modals. */
.leaflet-container { isolation: isolate; }
.topbar .btn.primary { background: var(--ac-ivory); color: var(--ac-green); border-color: var(--ac-ivory); box-shadow: none; }
.topbar .btn.primary:hover { background: #FFFFFF; border-color: #FFFFFF; }
@media (min-width: 1200px) {
  .tabs-break { display: none !important; }
  /* Module 524 — an Admin's bar (more tabs) didn't fit one line until
     ~1450px, so Log out was cut off; below 1500 the tabs may wrap. */
  .topbar .tabs { flex-wrap: wrap; row-gap: 2px; }
  .topbar .tab-btn { padding: 7px 10px; font-size: 13.5px; letter-spacing: 0.01em; }
}
@media (min-width: 1500px) { .topbar .tabs { flex-wrap: nowrap; } }
@media (min-width: 1200px) and (max-width: 1380px) {
  .topbar .tab-btn { padding: 7px 7px; font-size: 13px; }
  .topbar { gap: 10px; }
}
.topbar .tab-btn { border-radius: var(--r-md); transition: background .15s var(--ease), color .15s var(--ease); }
.topbar .tab-btn:hover { background: rgba(246, 242, 232, 0.10); color: #FFFFFF; }
.topbar .tab-btn.active { background: var(--ac-ivory); color: var(--ac-green); font-weight: 500; box-shadow: var(--sh-1); }
.tab-dropdown-caret { opacity: .7; }
.tab-dropdown-menu {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-3) !important;
  padding: 6px !important;
  background: var(--surface) !important;
}
.tab-dropdown-item, .nav-dd-item {
  border-radius: var(--r-md) !important;
  font-size: 13.5px !important;
  padding: 8px 10px !important;
  color: var(--ac-ink) !important;
  transition: background .12s var(--ease);
}
.tab-dropdown-item:hover, .nav-dd-item:hover { background: var(--ac-green-tint) !important; color: var(--ac-green) !important; }
.nav-dd-divider { border-top: 1px solid var(--line) !important; margin-top: 4px !important; padding-top: 4px !important; }

/* ---------------------------------------------------------------------------
   2. BUTTONS
   One family. Four intents. Two sizes. Nothing else.
   --------------------------------------------------------------------------- */
.btn, button.secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ctl-h); padding: 0 14px;
  font: 500 13.5px/1 var(--font-text);
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ac-ink);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .05s;
  text-decoration: none;
  -webkit-user-select: none; user-select: none;
}
.btn:hover { background: var(--surface-sunk); border-color: #C4B597; }
.btn:active { transform: translateY(0.5px); box-shadow: none; }
.btn:focus-visible { box-shadow: var(--focus); }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* primary — the one thing on the screen you came to do */
.btn.primary, button.primary {
  background: var(--ac-green); border-color: var(--ac-green); color: var(--ac-ivory);
  box-shadow: 0 1px 2px rgba(22, 48, 31, 0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn.primary:hover, button.primary:hover { background: var(--ac-green-deep); border-color: var(--ac-green-deep); }

/* ghost — secondary actions that should not compete */
.btn.ghost, .btn.link, .sb-link {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--ac-green);
}
.btn.ghost:hover, .btn.link:hover, .sb-link:hover { background: var(--ac-green-tint); border-color: transparent; }

/* danger.
   Full-size danger stays filled: it is the confirm button in a destructive
   dialog, where the fill is the warning.
   SMALL danger — the "Delete" on every row — becomes quiet red text. A list
   with a filled red button on every line looks like it is on fire, and makes
   the destructive action the most visually important thing on the page.
   HubSpot, Salesforce and Linear all do it this way for the same reason. */
.btn.danger, button.danger {
  background: var(--ac-error); border-color: var(--ac-error); color: #FFF;
  box-shadow: 0 1px 2px rgba(140, 74, 60, 0.25);
}
.btn.danger:hover { background: #77392D; border-color: #77392D; }
.btn.small.danger, .btn.tiny.danger, td .btn.danger, .row-actions .btn.danger, .actions .btn.danger {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--ac-error);
}
.btn.small.danger:hover, .btn.tiny.danger:hover, td .btn.danger:hover {
  background: var(--danger-tint); border-color: transparent; color: #77392D;
}

/* sizes */
.btn.small, .btn.sm { min-height: var(--ctl-h-sm); padding: 0 11px; font-size: 12.5px; border-radius: 7px; }
.btn.tiny { min-height: var(--ctl-h-xs); padding: 0 8px; font-size: 12px; border-radius: 6px; }

/* A row of small buttons in a table cell reads as one control group. */
td .btn + .btn, td .btn + .btn.small { margin-left: 4px; }

/* ---------------------------------------------------------------------------
   3. FORM CONTROLS
   --------------------------------------------------------------------------- */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="time"], input:not([type]),
select, textarea {
  font-family: var(--font-text);
  font-size: 13.5px;
  color: var(--ac-ink);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
  max-width: 100%;
}
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="time"], input:not([type]), select {
  min-height: var(--ctl-h);
  padding: 0 11px;
}
textarea { padding: 9px 11px; line-height: 1.5; min-height: 72px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9A9586; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #C4B597; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ac-green); box-shadow: var(--focus);
}
input[disabled], select[disabled], textarea[disabled], input[readonly] {
  background-color: var(--surface-sunk); color: var(--ac-ink-soft); cursor: not-allowed;
}

/* Selects get a drawn chevron. The OS chevron is different on every machine
   and is the second thing that makes a form look like a default form. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E665C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 7px;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--ac-green);
  width: 16px; height: 16px; cursor: pointer; vertical-align: -3px;
}

/* Field labels: quiet, small, consistent. */
label { font-size: 12.5px; color: var(--ac-ink-soft); }
.form-row label, .field > label, .form-grid label, .modal label {
  font-weight: 500; letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   4. TOOLBARS — they wrap
   A toolbar that cannot wrap is why 28 screens scrolled sideways on a phone.
   --------------------------------------------------------------------------- */
.toolbar, .filters, .filter-row, .list-toolbar, .cc-toolbar, .sched-toolbar, .po-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.toolbar > *, .filters > * { min-width: 0; max-width: 100%; }
.toolbar input[type="search"], .toolbar input[type="text"] { flex: 1 1 220px; min-width: 180px; }
.toolbar select { flex: 0 1 auto; }
.toolbar > .hint { flex-basis: 100%; order: 99; margin: 0; font-size: 12.5px; }
.toolbar > .hint:empty { display: none; }

/* A view's header row: filters on the left, actions on the right. On a
   narrow window the actions drop under the filters instead of being
   squeezed into a two-line stack beside them. */
.wh-toolbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 12px 16px; margin-bottom: 16px;
}
.wh-toolbar > .toolbar { flex: 1 1 520px; margin: 0 !important; }
.wh-toolbar > div:not(.toolbar), .wh-toolbar > .actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-left: auto;
}

/* ---------------------------------------------------------------------------
   5. TABS INSIDE A PAGE — underline tabs, one style
   --------------------------------------------------------------------------- */
.subtabs, .subtab-bar, .cc-tabs, .cc-subtabs, .mob-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
}
.subtabs::-webkit-scrollbar, .cc-subtabs::-webkit-scrollbar, .subtab-bar::-webkit-scrollbar, .cc-tabs::-webkit-scrollbar, .mob-tabs::-webkit-scrollbar { display: none; }
.subtab-btn, .cc-tab-btn, .mob-tab-btn {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 12px 9px !important;
  margin-bottom: -1px;
  font: 500 13.5px/1.2 var(--font-text) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--ac-ink-soft) !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.subtab-btn:hover, .cc-tab-btn:hover, .mob-tab-btn:hover { color: var(--ac-ink) !important; }
.subtab-btn.active, .cc-tab-btn.active, .mob-tab-btn.active {
  color: var(--ac-green) !important;
  border-bottom-color: var(--ac-green) !important;
  font-weight: 600 !important;
}

/* Segmented control (two to four mutually exclusive choices). */
.mob-seg-btn, .seg-btn {
  height: var(--ctl-h-sm); padding: 0 12px; border: 1px solid var(--line-strong); background: var(--surface);
  font: 500 12.5px/1 var(--font-text); color: var(--ac-ink-soft); cursor: pointer;
}
.mob-seg-btn.active, .seg-btn.active { background: var(--ac-green); color: var(--ac-ivory); border-color: var(--ac-green); }

/* ---------------------------------------------------------------------------
   6. TABLES
   Written as DEFAULTS (zero-specificity :where) — a table a module styled on
   purpose keeps its own look; the dozens of tables that only had style.css's
   2025 base pick up one header style, one row rhythm, one hover.
   Documents are excluded: a proposal (.pv-doc), a weekly report (.wr-doc)
   and the editor's paper preview are typeset pages, not app tables.
   --------------------------------------------------------------------------- */
:where(table:not(.no-system, .pv-doc table, .wr-doc table, .ce-preview-paper table, .pds-table)) {
  border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: var(--surface);
}
:where(table:not(.no-system, .pv-doc table, .wr-doc table, .ce-preview-paper table, .pds-table)) thead th {
  background: var(--surface-sunk);
  color: var(--ac-ink-soft);
  font: 600 11px/1.3 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
:where(table:not(.no-system, .pv-doc table, .wr-doc table, .ce-preview-paper table, .pds-table)) tbody td {
  padding: 10px 12px; border-bottom: 1px solid #EFE8DA; vertical-align: middle;
}
:where(table:not(.no-system, .pv-doc table, .wr-doc table, .ce-preview-paper table, .pds-table)) tbody tr { transition: background .1s var(--ease); }
:where(table:not(.no-system, .pv-doc table, .wr-doc table, .ce-preview-paper table, .pds-table)) tbody tr:hover { background: #FBF8F1; }
:where(table:not(.no-system, .pv-doc table, .wr-doc table, .ce-preview-paper table, .pds-table)) tbody tr:last-child td { border-bottom: 0; }

/* The editor tables (line items, shipping lines, change-order lines) each
   invented a teal header. One sand header now, same as every list. */
.line-items-table th, .ship-line-items-table th, .co-lines th, .cl-lines th, .ci-lines th,
.wo-table th, .reorder-table th, .po-exp-table th, .pe-resplit-table th, .pb-table th, .fc-table th {
  background: var(--surface-sunk); color: var(--ac-ink-soft);
  font: 600 11px/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
td.num, th.num, td.money, th.money, td.right, th.right { text-align: right; }

/* The main record lists sit in a frame so each reads as one object. The
   frame is drawn with a shadow ring rather than overflow:hidden, so a row's
   menu or a wide cell is never clipped. */
.mq-list, .location-table, .movements-table {
  border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--sh-1);
}
.mq-list thead th:first-child, .location-table thead th:first-child, .movements-table thead th:first-child { border-top-left-radius: var(--r-lg); }
.mq-list thead th:last-child, .location-table thead th:last-child, .movements-table thead th:last-child { border-top-right-radius: var(--r-lg); }
.list-pane, .detail-pane { border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.list-pane { overflow-x: auto; overflow-y: visible; }
.split > * { min-width: 0; }

/* On a phone, wide tables scroll inside themselves instead of dragging the
   whole page sideways. */
@media (max-width: 760px) {
  :where(table:not(.no-system, .pv-doc table, .wr-doc table, .ce-preview-paper table)) {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   7. CARDS — one elevation
   --------------------------------------------------------------------------- */
.card, .co-card, .pipeline-card, .aj-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.pipeline-card:hover { box-shadow: var(--sh-2); }

/* ---------------------------------------------------------------------------
   8. STATUS PILLS — eleven modules drew eleven pills. One shape now; each
   keeps its own semantic colour.
   --------------------------------------------------------------------------- */
.badge, .status-chip, .ship-stage-pill, .stage-pill, .wo-pill, .cl-pill, .mob-delay-pill,
.co-chip, .oj-chip, .cs-chip, .su-chip, .feed-badge, .specialty-badge, .activity-action-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 1px;
}
.badge.Lead { background: var(--warn-tint); color: #7A5D1E; }
.badge.Active { background: var(--ok-tint); color: var(--ac-success); }
.badge.Past.Client, .badge.PastClient { background: #EEEBE3; color: var(--ac-ink-soft); }

/* ---------------------------------------------------------------------------
   8b. KPI TILES & REPORT LAYOUT — figures that matter, set as figures.
   --------------------------------------------------------------------------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 14px 0 22px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px 15px; }
.kpi-label { font: 600 11px/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-ink-soft); }
.kpi-value { font: 600 26px/1.15 var(--font-display); color: var(--ac-green); margin-top: 6px; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.005em; }
.kpi-sub { font-size: 12px; color: var(--ac-ink-soft); margin-top: 3px; }
.kpi-note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ac-ink-soft); opacity: .8; }
.rep-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rep-head h2 { margin: 0; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 18px; align-items: start; }
.rep-grid > * { min-width: 0; }
.rep-bar { height: 4px; border-radius: 4px; background: #EFE8DA; margin-top: 6px; overflow: hidden; }
.rep-bar > span { display: block; height: 100%; background: var(--ac-green); border-radius: 4px; opacity: .75; }
.subsection-title { font: 600 11px/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-ink-soft); margin: 4px 0 8px; }

/* A record without a photograph shows a considered placeholder, not two words. */
.wh-photo-none {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #A39B86; font-size: 11.5px; letter-spacing: .02em;
  background: repeating-linear-gradient(135deg, #FAF7F0 0 10px, #F5F0E5 10px 20px);
  height: 120px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #EFE8DA;
}
.wh-card img.wh-photo { border-radius: 8px; }
.wh-card { border-radius: var(--r-lg) !important; border-color: var(--line) !important; box-shadow: var(--sh-1); }
.wh-photo-none svg { width: 28px; height: 28px; opacity: .8; }

/* ---------------------------------------------------------------------------
   9. MODALS
   --------------------------------------------------------------------------- */
.modal-backdrop {
  background: rgba(20, 30, 22, 0.42) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal-backdrop .modal, .modal {
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-3) !important;
}
.modal h2, .modal h3 { margin-top: 0; }

/* ---------------------------------------------------------------------------
   10. EMPTY STATES
   A screen with nothing on it is the screen most often seen by somebody new.
   Bare grey text ("No procurement orders match.") was the default everywhere.
   --------------------------------------------------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 6px; padding: 48px 24px; margin: 8px 0;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%);
  color: var(--ac-ink-soft);
}
.empty-state .es-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ac-green-tint); color: var(--ac-green); margin-bottom: 6px;
}
.empty-state .es-icon svg { width: 22px; height: 22px; }
.empty-state .es-title { font: 600 var(--fs-md)/1.3 var(--font-text); color: var(--ac-ink); }
.empty-state .es-hint { font-size: 13px; max-width: 46ch; line-height: 1.55; }
.empty-state .es-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------------------
   11. THE FLOATING ASSISTANT BUTTON
   It sat on top of the right-hand "View" and "Continue" buttons on every list.
   Smaller, tucked into the corner, and every view gets room beneath its last
   row so nothing can ever be hidden behind it.
   --------------------------------------------------------------------------- */
.view.active, .view { padding-bottom: 88px; }
#agileChatFab {
  width: 52px; height: 52px; right: 20px; bottom: 20px;
  border-width: 1.5px;
  box-shadow: 0 6px 18px rgba(22, 48, 31, 0.28), 0 2px 4px rgba(22, 48, 31, 0.18);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
#agileChatFab .fab-logo { width: 36px; height: 36px; }
#agileChatPanel { bottom: 82px; right: 20px; border-radius: 16px; box-shadow: var(--sh-3); border-color: var(--line); }
/* Desktop: the assistant is a button in the bar, its panel drops from it. */
#agileChatFab.in-bar {
  position: static; width: 36px; height: 34px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid rgba(246, 242, 232, 0.35); background: rgba(246, 242, 232, 0.10); box-shadow: none;
}
#agileChatFab.in-bar:hover { transform: none; background: rgba(246, 242, 232, 0.18); box-shadow: none; }
#agileChatFab.in-bar .fab-logo { width: 24px; height: 24px; }
#agileChatPanel.from-bar { top: 68px; bottom: auto; right: 20px; max-height: calc(100vh - 88px); }

/* ---------------------------------------------------------------------------
   12. FEED PHOTOS — capped
   One photograph took the whole screen. Feed media now sits in a fixed frame
   and crops to it, the way every social feed and every site-report app does.
   --------------------------------------------------------------------------- */
.feed-media { max-height: 380px; overflow: hidden; background: var(--surface-sunk); }
.feed-media img, .feed-media video { max-height: 380px; width: 100%; object-fit: cover; }
.feed-card { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }

/* 13. Toasts and the in-app dialog live in js/ui.js, which carries its own
   styles so the builder, the field app and the client form get them too. */

/* Task rows */
.task-row .activity-main { flex: 1 1 auto; min-width: 0; }
.task-done-btn { color: var(--ac-success); }
.task-done-btn:hover { background: var(--ok-tint); border-color: #B9CDBF; }

/* ---------------------------------------------------------------------------
   14. SMALL-SCREEN DISCIPLINE
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .task-row { flex-direction: column; gap: 8px; }
  .task-row .card-actions { justify-content: flex-start; }
  /* A view's actions become a tidy two-column block; the primary spans it. */
  .wh-toolbar > div:not(.toolbar), .wh-toolbar > .actions {
    display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0;
  }
  .wh-toolbar > div:not(.toolbar) > .btn, .wh-toolbar > .actions > .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding: 6px 10px; }
  .wh-toolbar > div:not(.toolbar) > .btn.primary, .wh-toolbar > .actions > .btn.primary { grid-column: 1 / -1; order: -1; }
  body { font-size: 14.5px; }
  .view, .subview { padding-left: 14px !important; padding-right: 14px !important; }
  .toolbar > select, .toolbar > input, .filters > select, .filters > input { flex: 1 1 100%; width: 100%; }
  /* No fixed-width control may be wider than the phone. */
  select, input, textarea { max-width: 100% !important; }
  .btn { min-height: 40px; }        /* a finger, not a cursor */
  .btn.small { min-height: 34px; }
  img, video, canvas, svg { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Module 300 — the cost catalogue's "Not used yet" area.
   --------------------------------------------------------------------------- */
.cc-table tr.cc-unused-divider td {
  background: var(--surface-sunk); padding: 18px 12px 12px !important;
  border-top: 2px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.cc-unused-head { font: 600 13px/1.3 var(--font-text); color: var(--ac-ink); letter-spacing: .02em; }
.cc-unused-head .cc-count { font-weight: 500; color: var(--ac-ink-soft); margin-left: 6px; }
.cc-unused-divider .hint { margin-top: 3px; max-width: 90ch; }
.cc-table tr.cc-unused-sec td { background: #F6F2E8 !important; color: var(--ac-ink-soft); text-transform: none; letter-spacing: .02em; font-weight: 600; }
.cc-table tr.cc-unused-row td { color: var(--ac-ink-soft); }
.cc-used-by { font-size: 11.5px; color: var(--ac-success); margin-top: 2px; letter-spacing: .01em; }

/* Module 301 — Agile Chat bubbles, in the brand. */
.ac-row { display: flex; margin: 8px 0; }
.ac-row.me { justify-content: flex-end; }
.ac-bubble { max-width: 86%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ac-row.me .ac-bubble { background: var(--ac-green); color: var(--ac-ivory); border-bottom-right-radius: 4px; }
.ac-row.bot .ac-bubble { background: var(--surface-sunk); color: var(--ac-ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
#agileChatPanel .ac-jobrow { flex-wrap: wrap; }
#agileChatPanel .ac-jobrow > .hint { flex: 1 1 100%; font-size: 12px; }

/* ===========================================================================
   Module 302 — Live Job Cost
   =========================================================================== */
.jc-tabs { margin: 6px 0 16px; }
.jc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--ac-error); color: #fff; font-size: 10.5px; font-weight: 700; }
.jc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 18px; margin: 0 0 16px; min-width: 0; }
.jc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.jc-card-head .subsection-title { margin: 0; }
.jc-table { width: 100%; font-size: 13.5px; }
.jc-table td, .jc-table th { padding: 9px 10px !important; }
.jc-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jc-table .nowrap { white-space: nowrap; }
.jc-table tfoot td { border-top: 1px solid var(--line); background: var(--surface-sunk); }
.jc-table input[type=number] { width: 84px; min-height: 30px; text-align: right; }
.jc-table input[type=text] { min-height: 30px; width: 100%; }
.jc-strong { font-weight: 600; color: var(--ac-ink); }
.jc-sub { font-size: 12px; color: var(--ac-ink-soft); margin-top: 2px; line-height: 1.4; }
.jc-sub.warn, .jc-form-msg { color: var(--ac-warning); }
.jc-sub.bad, td.bad, .kpi-value.bad, .bad { color: var(--ac-error) !important; }
.jc-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.jc-click { cursor: pointer; }
.jc-click:focus-visible { outline: 2px solid var(--ac-green); outline-offset: -2px; }
.jc-tag { font-size: 10.5px; font-weight: 600; color: var(--ac-success); background: var(--ok-tint); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.jc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 11.5px/1.3 var(--font-text); white-space: nowrap; }
.jc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.jc-pill.ok { background: var(--ok-tint); color: var(--ac-success); }
.jc-pill.warn { background: var(--warn-tint); color: #7A5D1E; }
.jc-pill.bad { background: var(--danger-tint); color: var(--ac-error); }
.jc-pill.idle { background: #EEEBE3; color: var(--ac-ink-soft); }
.jc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jc-bar { position: relative; height: 8px; border-radius: 8px; background: #EFE8DA; overflow: visible; }
.jc-bar > span { display: block; height: 100%; border-radius: 8px; background: #2E7D52; }
.jc-bar.warn > span { background: var(--ac-warning); }
.jc-bar.bad > span { background: var(--ac-error); }
.jc-bar > em { position: absolute; top: -3px; width: 2px; height: 14px; background: #B08A3E; border-radius: 1px; transform: translateX(-1px); }
.jc-warnings { display: grid; gap: 6px; margin: 0 0 16px; }
.jc-warn { padding: 9px 12px 9px 14px; border-radius: 10px; font-size: 13px; border: 1px solid var(--line); background: var(--surface); position: relative; }
.jc-warn::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--ac-info); }
.jc-warn.high::before { background: var(--ac-error); } .jc-warn.medium::before { background: var(--ac-warning); }
.jc-events { list-style: none; margin: 0; padding: 0; }
.jc-events li { display: grid; grid-template-columns: 86px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EFE8DA; font-size: 13px; }
.jc-events li:last-child { border-bottom: 0; }
.jc-ev-date { color: var(--ac-ink-soft); font-variant-numeric: tabular-nums; }
.jc-ev-what .jc-sub { display: block; }
.jc-ev-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.jc-details summary { cursor: pointer; font-size: 13px; color: var(--ac-green); margin-top: 10px; }

/* the chart */
.jc-chart { position: relative; }
.jc-chart svg { width: 100%; height: auto; display: block; }
.jc-chart .g { stroke: #EFE8DA; stroke-width: 1; }
.jc-chart .ax { font: 11px var(--font-text); fill: var(--ac-ink-soft); }
.jc-chart .lbl { font: 600 11px var(--font-text); fill: var(--ac-ink-soft); }
.jc-chart .lbl.strong { fill: var(--ac-ink); }
.jc-chart .budget { stroke: var(--ac-ink-soft); stroke-width: 1; stroke-dasharray: 2 3; }
.jc-chart .today { stroke: #C9BEA6; stroke-width: 1; }
.jc-chart .hair { stroke: var(--ac-ink-soft); stroke-width: 1; }
.jc-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ac-ink-soft); margin-bottom: 4px; }
.jc-legend span, .jc-tip span { display: inline-flex; align-items: center; gap: 6px; }
.jc-legend i, .jc-tip i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.jc-legend i.dash, .jc-tip i.dash { height: 0; border-top: 2px dashed; background: none !important; }
.jc-legend i.rule { height: 0; border-top: 1px dashed var(--ac-ink-soft); }
.jc-tip { position: absolute; top: 28px; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-2); padding: 8px 10px; font-size: 12px; display: grid; gap: 3px; min-width: 170px; color: var(--ac-ink); }

/* forms */
.jc-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.jc-field { display: flex; flex-direction: column; gap: 5px; font-weight: 500; min-width: 0; }
.jc-field > input, .jc-field > select, .jc-money input { width: 100%; }
.jc-span2 { grid-column: span 2; }
.jc-opt { font-weight: 400; color: #9A9586; font-size: 11.5px; }
.jc-help { font-weight: 400; font-size: 11.5px; color: var(--ac-ink-soft); min-height: 1em; }
.jc-money { position: relative; display: block; }
.jc-money > span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ac-ink-soft); font-size: 13.5px; }
.jc-money input { padding-left: 24px !important; }
.jc-drop { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: 12px; cursor: pointer; background: var(--surface-sunk); color: var(--ac-ink-soft); transition: border-color .15s, background .15s; }
.jc-drop:hover { border-color: var(--ac-green); }
.jc-drop.has { border-style: solid; border-color: var(--ac-success); background: var(--ok-tint); color: var(--ac-success); }
.jc-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jc-drop-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--ac-green); flex: 0 0 auto; border: 1px solid var(--line); }
.jc-drop-ic svg { width: 20px; height: 20px; }
.jc-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.jc-form-msg { font-size: 12.5px; }
.jc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ac-ink); }
.jc-cash { margin-top: 12px; }
.jc-week-dlg { width: min(880px, 100%) !important; }
.jc-week-scroll { max-height: 60vh; overflow: auto; margin-bottom: 14px; }

/* phone */
.jc-mob-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 12px; margin: 4px 0 14px; }
.jc-mob-seg button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; font: 600 13px var(--font-text); color: var(--ac-ink-soft); cursor: pointer; }
.jc-mob-seg button.active { background: var(--surface); color: var(--ac-green); box-shadow: var(--sh-1); }
.jc-mob-list { list-style: none; margin: 0; padding: 0; }
.jc-mob-list li { display: flex; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid #EFE8DA; }
.jc-mob-list li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jc-mob-list li span { font-size: 12px; color: var(--ac-ink-soft); }
.jc-mob-list li .r { align-items: flex-end; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 760px) {
  .jc-form-grid { grid-template-columns: 1fr 1fr; }
  .jc-span2 { grid-column: 1 / -1; }
  .jc-form-actions .btn { flex: 1 1 100%; }
  .jc-card { padding: 14px; }
  .jc-events li { grid-template-columns: 74px 1fr auto; }
}
.jc-cash input[type=number] { width: 76px; }
@media (max-width: 760px) {
  .jc-cash th, .jc-cash td { padding: 6px 4px !important; }
  .jc-cash input[type=number] { width: 54px; padding: 0 6px !important; }
  .jc-cash input[type=text] { min-width: 90px; }
}

/* ===========================================================================
   Module 303 — Agile Expenses
   =========================================================================== */
.ax-app { max-width: 980px; }
.ax-desk { margin: 0 auto 0 0; }
.ax-eyebrow { font: 600 10.5px/1.3 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .75; }
.ax-hero { background: linear-gradient(160deg, var(--ac-green) 0%, var(--ac-green-deep) 100%); color: var(--ac-ivory); border-radius: 18px; padding: 18px 18px 16px; box-shadow: var(--sh-2); margin-bottom: 14px; }
.ax-hero-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.ax-hero-num { font: 600 34px/1.1 var(--font-display); margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; }
.ax-hero-sub { font-size: 12px; opacity: .8; }
.ax-hero-side { display: flex; gap: 18px; }
.ax-hero-side div { display: flex; flex-direction: column; text-align: right; }
.ax-hero-side b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ax-hero-side span { font-size: 11.5px; opacity: .78; }
.ax-float { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(246,242,232,.10); font-size: 12px; }
.ax-float b { font-size: 15px; }
.ax-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.ax-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 6px; border-radius: 14px; border: 1px solid rgba(246,242,232,.28); background: rgba(246,242,232,.08); color: var(--ac-ivory); font: 600 12.5px/1.2 var(--font-text); cursor: pointer; text-align: center; transition: background .15s; }
.ax-act:hover { background: rgba(246,242,232,.16); }
.ax-act.primary { background: var(--ac-ivory); color: var(--ac-green); border-color: var(--ac-ivory); }
.ax-act svg { width: 24px; height: 24px; }
.ax-inbox { display: grid; gap: 6px; margin-bottom: 12px; }
.ax-alert { text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; background: var(--surface); font: 500 13.5px var(--font-text); cursor: pointer; position: relative; padding-left: 18px; color: var(--ac-ink); }
.ax-alert::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: var(--ac-info); }
.ax-alert.bad::before { background: var(--ac-error); } .ax-alert.warn::before { background: var(--ac-warning); }
.ax-open-report { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); cursor: pointer; font-family: var(--font-text); color: var(--ac-ink); }
.ax-open-report b { display: block; font-size: 14.5px; margin: 2px 0; }
.ax-open-report span { font-size: 12px; color: var(--ac-ink-soft); }
.ax-open-report .ax-eyebrow { color: var(--ac-ink-soft); }
.ax-open-total { text-align: right; font: 600 20px var(--font-display); color: var(--ac-green); font-variant-numeric: tabular-nums; }
.ax-open-total span { display: block; font: 600 11.5px var(--font-text); color: var(--ac-green); }
.ax-seg { margin: 0 0 12px; }
.ax-seg button { position: relative; }
.ax-seg .jc-count { position: relative; top: -1px; }
.ax-month { display: flex; justify-content: space-between; font: 600 11px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ac-ink-soft); margin: 14px 4px 6px; }
.ax-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--sh-1); }
.ax-list-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.ax-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #EFE8DA; cursor: pointer; transition: background .1s; }
.ax-row:last-child { border-bottom: 0; }
.ax-row:hover, .ax-row:focus-visible { background: #FBF8F1; outline: none; }
.ax-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ac-green-tint); color: var(--ac-green); }
.ax-ic svg { width: 21px; height: 21px; }
.ax-ic.rep { background: #EEEBE3; color: var(--ac-ink-soft); }
.ax-ic.scanning { background: var(--warn-tint); }
.ax-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-row-main b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-row-main > span { font-size: 12px; color: var(--ac-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; white-space: normal !important; }
.ax-row-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 600 14px var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-row-amt > span:not(.jc-pill) { font: 500 11.5px var(--font-text); color: var(--ac-ink-soft); }
.ax-flag { display: inline-block; font: 600 10.5px/1.5 var(--font-text); padding: 0 7px; border-radius: 999px; background: #EEEBE3; color: var(--ac-ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-flag.error { background: var(--danger-tint); color: var(--ac-error); }
.ax-flag.warn { background: var(--warn-tint); color: #7A5D1E; }
.ax-flag.info { background: var(--info-tint); color: var(--ac-info); }
.ax-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(156,122,47,.25); border-top-color: var(--ac-warning); animation: ax-spin .8s linear infinite; display: inline-block; }
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* sheets */
body.ax-locked { overflow: hidden; }
.ax-back { position: fixed; inset: 0; z-index: 9500; background: rgba(20,30,22,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; justify-content: flex-end; animation: ui-fade .15s ease; }
.ax-sheet { width: min(560px, 100%); height: 100%; background: var(--ac-ivory, #F6F2E8); display: flex; flex-direction: column; box-shadow: var(--sh-3); animation: ax-in .22s cubic-bezier(.2,.7,.2,1); }
.ax-sheet.wide { width: min(820px, 100%); }
@keyframes ax-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.ax-sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.ax-sheet-head h3 { margin: 0; font: 600 19px/1.2 var(--font-display); color: var(--ac-green); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 18px; cursor: pointer; color: var(--ac-ink); }
.ax-sheet-body { padding: 16px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.ax-detail { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
.ax-receipt { min-height: 180px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.ax-receipt img { width: 100%; height: auto; display: block; }
.ax-attach { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; cursor: pointer; color: var(--ac-ink-soft); font-size: 12.5px; text-align: center; }
.ax-attach svg { width: 30px; height: 30px; color: var(--ac-green); }
.ax-pdf { padding: 20px; font-weight: 600; color: var(--ac-green); }
.ax-kind-card { padding: 20px; text-align: center; font: 600 16px var(--font-text); color: var(--ac-green); }
.ax-kind-card span { display: block; font: 500 12px var(--font-text); color: var(--ac-ink-soft); margin-top: 6px; }
.ax-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ax-f { display: flex; flex-direction: column; gap: 4px; font-weight: 500; min-width: 0; }
.ax-f > input, .ax-f > select { width: 100%; }
.ax-span { grid-column: 1 / -1; }
.ax-amount { grid-column: 1 / -1; }
.ax-amount-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.ax-amount-row input { font-size: 22px !important; font-weight: 600; min-height: 46px !important; font-variant-numeric: tabular-nums; }
.ax-amount-row select { min-height: 46px !important; }
.ax-help { font-weight: 400; font-size: 11.5px; color: var(--ac-ink-soft); }
.ax-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ac-ink); }
.ax-scan-note { grid-column: 1 / -1; font-size: 12px; color: var(--ac-info); background: var(--info-tint); border-radius: 8px; padding: 6px 10px; }
.ax-violations { display: grid; gap: 6px; margin: 14px 0 0; }
.ax-v { padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--info-tint); color: var(--ac-info); }
.ax-v.error { background: var(--danger-tint); color: var(--ac-error); }
.ax-v.warn { background: var(--warn-tint); color: #7A5D1E; }
.ax-card-match { margin-top: 10px; font-size: 12.5px; color: var(--ac-success); background: var(--ok-tint); padding: 8px 12px; border-radius: 10px; }
.ax-meta { margin-top: 12px; font-size: 12.5px; color: var(--ac-ink-soft); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ax-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
.ax-history { margin-top: 20px; }
.ax-history ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ax-history li { font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 2px; }
.ax-history li.event { background: transparent; border-style: dashed; color: var(--ac-ink-soft); }
.ax-history li time { font-size: 11px; color: #9A9586; }
.ax-comment { display: flex; gap: 8px; }
.ax-comment input { flex: 1; }
.ax-calc { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.ax-calc b { color: var(--ac-green); font-size: 17px; }
.ax-split input[type=number] { width: 110px; }
.ax-split-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13px; }
.ax-split-foot .ok { color: var(--ac-success); font-weight: 600; } .ax-split-foot .bad { font-weight: 600; }
.ax-rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ax-rep-head .ax-eyebrow { color: var(--ac-ink-soft); }
.ax-rep-total { font: 600 30px/1.15 var(--font-display); color: var(--ac-green); font-variant-numeric: tabular-nums lining-nums; }
.ax-rep-sub { font-size: 12.5px; color: var(--ac-ink-soft); }
.ax-steps { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; counter-reset: s; }
.ax-steps li { counter-increment: s; font: 600 11.5px var(--font-text); color: #9A9586; padding-top: 10px; border-top: 3px solid #E3DACA; }
.ax-steps li::before { content: counter(s) " · "; }
.ax-steps li.done { color: var(--ac-success); border-top-color: var(--ac-success); }
.ax-steps li.now { color: var(--ac-green); border-top-color: var(--ac-green); }
.ax-break { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ax-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #EFE8DA; }
.ax-kv em { display: block; font-style: normal; font-size: 11px; color: #9A9586; }
.ax-kv b { font-variant-numeric: tabular-nums; }
.ax-acc-seg { grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; }
.ax-acc-seg button { padding: 0 12px; }
.ax-bar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 5px 0; }
.ax-bar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-bar-t { height: 10px; background: #EFE8DA; border-radius: 6px; overflow: hidden; }
.ax-bar-t i { display: block; height: 100%; background: #2E7D52; border-radius: 6px; }
.ax-bar-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ax-policy .ax-form { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ax-policy input[type=text] { width: 100%; }
@media (max-width: 760px) {
  .ax-actions { grid-template-columns: repeat(2, 1fr); }
  .ax-hero-side { width: 100%; justify-content: space-between; }
  .ax-hero-side div { text-align: left; }
  .ax-detail { grid-template-columns: 1fr; }
  .ax-receipt { min-height: 120px; max-height: 260px; }
  .ax-receipt img { max-height: 260px; object-fit: contain; }
  .ax-sheet, .ax-sheet.wide { width: 100%; }
  .ax-break { grid-template-columns: 1fr; }
  .ax-form { grid-template-columns: 1fr; }
  .ax-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; padding: 11px 12px; }
  .ax-ic { width: 36px; height: 36px; }
  .ax-btns .btn { flex: 1 1 auto; }
}

.ax-amount-row > * { min-width: 0; width: 100%; }

/* ---------------------------------------------------------------------------
   Module 306 — filtering tasks: search, one-tap due counts, the Filters
   panel and the chips that name what is in force.
--------------------------------------------------------------------------- */
.tf-box { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
.tf-box .wh-toolbar { margin-bottom: 0; }
.tf-search { min-width: 0; flex: 1 1 160px; max-width: 260px; }
#taskFiltersBtn.on { background: var(--surface-sunk); border-color: var(--line-strong); }
.tf-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: var(--r-pill); background: var(--ac-green, #1E3D2B); color: #fff; font-size: 11px; font-weight: 600; }
.tf-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2) var(--s-3);
  padding: var(--s-3); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-md); }
.tf-panel[hidden], .tf-panel [hidden] { display: none !important; }
.tf-f { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.tf-f > span { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: #6F6A5E; }
.tf-f select, .tf-f input { width: 100%; min-width: 0; }
.tf-check { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); align-self: end; min-height: var(--ctl-h); }
.tf-quickrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-quick { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h-xs); padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: var(--fs-sm); color: #3F3B33; cursor: pointer; }
.tf-quick b { font-variant-numeric: tabular-nums; font-weight: 600; color: #6F6A5E; }
.tf-quick:hover { border-color: var(--line-strong); }
.tf-quick.warn b { color: #A13A26; }
.tf-quick.on { background: var(--ac-green, #1E3D2B); border-color: var(--ac-green, #1E3D2B); color: #fff; }
.tf-quick.on b { color: #fff; }
.tf-quick:focus-visible, .tf-chip button:focus-visible { outline: none; box-shadow: var(--focus); }
.tf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.tf-count { color: #6F6A5E; font-variant-numeric: tabular-nums; margin-right: 2px; }
.tf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: var(--r-pill);
  background: #EEF3EE; color: var(--ac-green, #1E3D2B); }
.tf-chip button { border: 0; background: transparent; color: inherit; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.tf-chip button:hover { background: rgba(30, 61, 43, 0.12); }
.tf-clear { font-size: var(--fs-sm); margin-left: 4px; }
.tf-group { margin-bottom: var(--s-3); }
.tf-group-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 2px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--ac-green, #1E3D2B); }
.tf-group-n { font-weight: 500; color: #6F6A5E; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .tf-search { max-width: none; flex-basis: 100%; } }

/* Module 322 — contract and cost records on a job; the expense-report import. */
.jc-sources .jc-src-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.jc-sources .jc-src-row:first-of-type { border-top: 0; }
.jc-sources .jc-src-row > b { min-width: 130px; font-weight: 600; }
.jc-sources .jc-src-link { margin-left: auto; }
.jc-imports { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; }
.jc-imp { margin-top: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.jc-imp-pick { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.jc-imp-pick label { display: grid; gap: 4px; font-size: 12px; }
.jc-imp-sum { margin: 10px 0 6px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.jc-imp-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.jc-imp-table { margin: 0; font-size: 12.5px; }
.jc-imp-table td, .jc-imp-table th { padding: 5px 8px; vertical-align: top; }
.jc-imp-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.jc-imp-table tr.jc-off td { opacity: .5; }
.jc-imp-table tr.jc-dup td { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.jc-imp-table select { font-size: 12px; padding: 3px 4px; max-width: 170px; }
.jc-imp-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.jc-imp-labour { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.jc-imp-labour span { font-weight: 400; }
.kpi.jc-final { border-color: var(--ac-green, #1E3D2B); }
.rep-head #jcUploadContract { margin-left: 0; }

/* ---------------------------------------------------------------------------
   Module 323 — profit tracking: running costs, the set-up check, the
   company-wide import, and Financial → Company profit (Evan, Nick, Mikel).
   --------------------------------------------------------------------------- */
.jc-head-actions { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.jc-overhead .jc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.jc-oh-big { font: 600 28px/1.1 var(--font-display); color: var(--ac-green); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.jc-oh-big span { display: block; font: 500 12px/1.4 var(--font-text); color: var(--ac-ink-soft); }
.jc-oh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px 18px; margin: 10px 0 4px; }
.jc-oh-grid > div { display: grid; gap: 2px; padding: 8px 0 0; border-top: 1px solid var(--line); }
.jc-oh-grid b { font: 600 17px/1.2 var(--font-text); color: var(--ac-ink); font-variant-numeric: tabular-nums; }
.jc-oh-grid span { font-size: 12px; color: var(--ac-ink-soft); line-height: 1.4; }
.jc-period + .jc-period { margin-top: 10px; }
.jc-period h4 { margin: 0; font: 600 11px/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ac-ink-soft); }
.jc-settings { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.jc-settings label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ac-ink-soft); }
.jc-settings input { width: 110px; }
.jc-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.jc-check { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.jc-check-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-text); background: var(--info-tint); color: var(--ac-info); }
.jc-check.ok .jc-check-mark { background: var(--ok-tint); color: var(--ac-success); }
.jc-check.high .jc-check-mark { background: var(--danger-tint); color: var(--ac-error); }
.jc-check.medium .jc-check-mark { background: var(--warn-tint); color: var(--ac-warning); }
.jc-check.ok { background: var(--surface-sunk); }
.jc-imp-job { max-width: 220px; }
.fb-bar .fb-receipt { border: 1px solid #e2e7ea; }

/* Company profit */
.cp-head { align-items: baseline; }
.cp-head #cpWho { margin-left: auto; }
.cp-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 0; margin: 14px 0 0; background: var(--ac-green); color: var(--ac-ivory); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.cp-lead { padding: 22px 24px; display: grid; gap: 4px; align-content: center; }
.cp-hero .kpi-label { color: rgba(246, 242, 232, .72); }
.cp-big { font: 600 46px/1.05 var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .005em; }
.cp-big.bad { color: #F0B9AA !important; }
.cp-eq { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: rgba(246, 242, 232, .8); }
.cp-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(0, 0, 0, .14); }
.cp-side > div { padding: 22px 20px; display: grid; gap: 4px; align-content: center; border-left: 1px solid rgba(246, 242, 232, .12); }
.cp-side b { font: 600 26px/1.1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; }
.cp-side b.bad { color: #F0B9AA !important; }
.cp-side span { font-size: 12px; color: rgba(246, 242, 232, .72); }
.cp-kpis { margin-top: 16px; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-card-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.cp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--ac-ink-soft); margin: 6px 0; }
.cp-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cp-legend .k-a { background: var(--ac-green); }
.cp-legend .k-f { background: repeating-linear-gradient(45deg, #DCE6DE 0 3px, #7FA08A 3px 5px); }
.cp-legend .k-r { background: none; border-top: 2px solid var(--ac-brass); border-radius: 0; height: 0; width: 14px; vertical-align: 3px; }
.cp-legend .k-0 { background: var(--danger-tint); border: 1px solid #E2C3BA; }
.cp-legend .k-1 { background: #E9DDB9; }
.cp-legend .k-2 { background: #5E8A6B; }
.cp-chart-wrap { overflow-x: auto; }
.cp-chart { width: 100%; min-width: 560px; height: auto; display: block; }
.cp-chart .cp-gl { stroke: #ECE5D6; stroke-width: 1; }
.cp-chart .cp-gl.zero { stroke: #BFB194; }
.cp-chart .cp-axis { font: 500 10.5px var(--font-text); fill: var(--ac-ink-soft); }
.cp-chart .cp-axis.now { fill: var(--ac-green); font-weight: 700; }
.cp-chart .cp-axis.yr { font-size: 9.5px; opacity: .75; }
.cp-chart .cp-bar { fill: var(--ac-green); }
.cp-chart .cp-bar.neg { fill: var(--ac-error); }
.cp-chart .cp-hit { fill: transparent; }
.cp-chart .cp-col:hover .cp-hit { fill: rgba(30, 61, 43, .05); }
.cp-chart .cp-col.now .cp-hit { fill: rgba(150, 120, 62, .07); }
.cp-chart .cp-run { fill: none; stroke: var(--ac-brass); stroke-width: 2; stroke-linejoin: round; }
.cp-chart .cp-run-dot { fill: var(--ac-brass); }
.cp-months { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; margin-top: 2px; font-size: 11px; }
.cp-months th { width: 52px; text-align: right; padding: 4px 8px 4px 0; font: 600 10.5px var(--font-text); color: var(--ac-ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.cp-months td { text-align: center; padding: 4px 0; color: var(--ac-ink); font-weight: 600; }
.cp-months td.fc { color: var(--ac-ink-soft); font-weight: 500; font-style: italic; }
.cp-months td.now { background: rgba(150, 120, 62, .09); border-radius: 4px; }
.cp-90-head { font-size: 13px; margin: 4px 0 10px; display: grid; gap: 2px; }
.cp-90-head b { font: 600 30px/1 var(--font-display); color: var(--ac-green); margin-right: 4px; }
.cp-90-head span { font-size: 12px; color: var(--ac-ink-soft); }
.cp-90 { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 1px; height: 30px; }
.cp-d { border-radius: 2px; }
.cp-d.j0 { background: var(--danger-tint); box-shadow: inset 0 0 0 1px #E2C3BA; }
.cp-d.j1 { background: #E9DDB9; }
.cp-d.j2 { background: #5E8A6B; }
.cp-d.m1 { box-shadow: -1px 0 0 0 var(--ac-ink-soft); }
.cp-90-scale { position: relative; height: 16px; font-size: 10.5px; color: var(--ac-ink-soft); }
.cp-90-scale span { position: absolute; top: 2px; transform: translateX(-2px); }
.cp-upcoming { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cp-upcoming li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.cp-table-wrap { overflow-x: auto; }
.cp-jobs td { vertical-align: top; }
.cp-jobs .cp-profit { font-weight: 700; color: var(--ac-green); white-space: nowrap; }
.cp-sched .jc-bar { margin: 6px 0 4px; }
.cp-summary { cursor: pointer; list-style-position: inside; }
.cp-caveat { margin-top: 8px; font-size: 12px; line-height: 1.45; color: #F3D9A8; max-width: 46ch; }
.cp-asleep { margin-top: 10px; font-size: 13px; }
.cp-asleep summary { cursor: pointer; color: var(--ac-ink-soft); font-weight: 600; }
.cp-asleep ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 4px 16px; }
.cp-asleep li { padding: 5px 0; border-top: 1px solid var(--line); }
.cp-viewers ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.cp-viewers li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.cp-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.cp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; width: 100%; margin: 0 0 14px; padding: 11px 18px; border: 0; border-radius: var(--r-lg); background: var(--ac-green); color: var(--ac-ivory); font: 500 13px/1.4 var(--font-text); text-align: left; cursor: pointer; box-shadow: var(--sh-1); }
.cp-strip:hover { background: var(--ac-green-deep); }
.cp-strip b { font: 600 19px/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; margin-right: 3px; }
.cp-strip b.bad { color: #F0B9AA !important; }
.cp-strip-k { font: 600 10.5px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 242, 232, .7); }
.cp-strip-go { margin-left: auto; font-weight: 600; }
@media (max-width: 1100px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .cp-hero { grid-template-columns: minmax(0, 1fr); }
  .cp-side { grid-template-columns: minmax(0, 1fr); }
  .cp-side > div { border-left: 0; border-top: 1px solid rgba(246, 242, 232, .12); padding: 14px 20px; }
  .cp-big { font-size: 38px; }
}

/* ---------------------------------------------------------------------------
   Module 324 — Followed up… (a follow-up task, answered in one panel)
   --------------------------------------------------------------------------- */
.fu-back { position: fixed; inset: 0; z-index: 9000; background: rgba(22, 48, 31, .38); display: grid; place-items: center; padding: 16px; }
.fu-panel { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 20px 22px; display: grid; gap: 12px; }
.fu-panel h3 { margin: 0; font: 600 22px/1.2 var(--font-display); color: var(--ac-green); }
.fu-what { margin: -6px 0 0; font-size: 13px; color: var(--ac-ink); }
.fu-what span { color: var(--ac-ink-soft); }
.fu-lab { display: grid; gap: 5px; font: 600 11px/1.3 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-soft); }
.fu-lab span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.fu-lab textarea, .fu-lab select { font: 400 14px/1.45 var(--font-text); text-transform: none; letter-spacing: 0; color: var(--ac-ink); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); width: 100%; }
.fu-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fu-row > .fu-lab { width: 100%; }
.fu-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12.5px; cursor: pointer; }
.fu-chip input { margin: 0; }
.fu-chip:has(input:checked) { background: var(--ac-green-tint); border-color: var(--ac-green); color: var(--ac-green); }
.fu-when { padding: 6px 12px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-md); font: 600 12.5px var(--font-text); color: var(--ac-ink); cursor: pointer; }
.fu-when.on { background: var(--ac-green); border-color: var(--ac-green); color: var(--ac-ivory); }
.fu-row input[type=date] { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-md); font: inherit; }
.fu-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Module 325 — "counting from", on the green hero */
.cp-link { color: #F3D9A8; text-decoration: underline; text-underline-offset: 2px; }
.cp-link:hover { color: var(--ac-ivory); }

/* Module 326 — what Selassie got out of each document */
.kn-state.reading { color: var(--ac-warning); font-weight: 600; }
.kn-state.bad { color: var(--ac-error); font-weight: 600; }
.kn-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   Module 327 — Travel (itineraries) and procurement costs
   --------------------------------------------------------------------------- */
.tr-new, .tr-head-acts { margin-left: auto; }
.tr-head-acts { display: inline-flex; gap: 8px; }
.tr-alert { display: grid; gap: 6px; margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: var(--warn-tint); border: 1px solid #E6D3A3; font-size: 13px; }
.tr-alert > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-protocol { margin: 10px 0 14px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.tr-protocol summary { cursor: pointer; font-weight: 600; color: var(--ac-green); }
.tr-protocol ol { margin: 8px 0 2px 18px; padding: 0; display: grid; gap: 4px; line-height: 1.5; }
.tr-filter { font-size: 12.5px; color: var(--ac-ink-soft); margin: 4px 0 10px; }
.tr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 10px; }
.tr-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 4px; cursor: pointer; font: inherit; color: inherit; box-shadow: var(--sh-1); }
.tr-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.tr-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tr-card-job { font-size: 13px; color: var(--ac-ink); }
.tr-card-meta { font-size: 12px; color: var(--ac-ink-soft); }
.tr-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 11px/1.4 var(--font-text); background: #EEEBE3; color: var(--ac-ink-soft); }
.tr-st.booked { background: var(--ok-tint); color: var(--ac-success); }
.tr-st.planned { background: var(--warn-tint); color: #7A5D1E; }
.tr-st.cancelled { background: var(--danger-tint); color: var(--ac-error); }
/* Module 362 — trips that have happened, and trips under way */
.tr-st { white-space: nowrap; flex: none; }
.tr-st.completed { background: #E4E9F0; color: #34506E; }
.tr-st.in-progress { background: var(--ac-green); color: #fff; }
.tr-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 2px; }
.tr-search input[type=search] { flex: 1 1 320px; min-width: 0; }
.tr-range, .tr-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ac-ink-soft); white-space: nowrap; }
.tr-range input { width: 92px; font-variant-numeric: tabular-nums; }
.tr-found { margin: 4px 0 10px; font-size: 13px; font-weight: 600; }
.tr-found .hint { font-weight: 400; }
.tr-hit { font-size: 12px; color: var(--ac-green); background: var(--ac-green-tint); border-radius: var(--r-sm); padding: 3px 7px; justify-self: start; }
.tr-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.tr-person { padding: 3px 10px; border-radius: 999px; background: var(--ac-green-tint); color: var(--ac-green); font-size: 12.5px; font-weight: 600; }
.tr-total { margin: 0 0 8px; font-size: 13px; }
.tr-table-wrap { overflow-x: auto; }
.tr-items td { vertical-align: top; }
.tr-ico { display: inline-block; width: 20px; }
.tr-cancelled td { color: var(--ac-ink-soft); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.tr-cancelled td:last-child { text-decoration: none; }
.tr-form { margin-top: 14px; }
.tr-grid, .pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px 12px; margin: 8px 0; }
/* Module 448 — Bookings, My itinerary, Receipts, Settings, and Dani's highlights. */
.tb-views { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 12px; border-bottom: 1px solid var(--line); }
.tb-view { font: 600 13px/1 var(--font-text); background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; color: var(--ac-ink-soft); cursor: pointer; }
.tb-view.on { color: var(--ac-green); border-bottom-color: var(--ac-green); }
.tb-count { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--ac-error); color: #fff; font-size: 11px; }
.tb-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 10px; }
.tb-filters input[type=search] { flex: 1 1 300px; min-width: 0; }
.tb-filters select { max-width: 220px; }
.tb-range { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ac-ink-soft); white-space: nowrap; }
.tb-range input[type=text] { width: 84px; }
.tb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 10px; }
.tb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 6px; box-shadow: var(--sh-1); min-width: 0; }
.tb-card.flagged { border-color: #E2B65C; }
.tb-card.focus { outline: 2px solid var(--ac-green); outline-offset: 2px; }
.tb-card.cancelled { opacity: .7; }
.tb-card.cancelled .tb-what { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.3); }
.tb-card.done { opacity: .75; }
.tb-top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.tb-kind { font-weight: 700; }
.tb-when { font-size: 13px; color: var(--ac-ink); }
.tb-ver { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #EEEBE3; color: var(--ac-ink-soft); }
.tb-cost { margin-left: auto; font-variant-numeric: tabular-nums; }
.tb-what { font-size: 13px; overflow-wrap: anywhere; }
.tb-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ac-ink-soft); }
.tb-job { padding: 1px 8px; border-radius: 999px; background: var(--ac-green-tint); color: var(--ac-green); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-more { border-top: 1px dashed var(--line); padding-top: 8px; font-size: 13px; }
.tb-more h4 { margin: 0 0 6px; font-size: 13px; }
.tb-hist { margin: 0 0 0 18px; padding: 0; display: grid; gap: 6px; }
.tb-flag { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }
.tb-flag.clay { background: var(--danger-tint); color: var(--ac-error); }
.tb-flag.brass { background: var(--warn-tint); color: #7A5D1E; }
.tb-flag.marked { box-shadow: inset 3px 0 0 currentColor; }
.tb-flag-btns { display: inline-flex; gap: 6px; }
.tb-change { display: grid; gap: 8px; }
.tb-change label, .tb-settings label { display: grid; gap: 3px; font-size: 12.5px; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 8px 10px; }
.tb-grid .wide { grid-column: 1 / -1; }
.tb-people { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; padding: 0; margin: 0; }
.tb-people label, .tb-check { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; }
.tb-settings fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.tb-settings legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.tb-email { display: grid; gap: 6px; font-size: 13px; }
.tb-files { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-mine-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.tb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.tb-seg button { font: 600 12.5px/1 var(--font-text); border: 0; background: var(--surface); padding: 8px 12px; cursor: pointer; color: var(--ac-ink-soft); }
.tb-seg button.on { background: var(--ac-green); color: #fff; }
.tb-mine { display: grid; gap: 8px; }
.tb-mine-card { display: grid; grid-template-columns: 86px 1fr; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; }
.tb-mine-card.cancelled { opacity: .6; }
.tb-mine-when { display: grid; align-content: start; gap: 2px; font-size: 13px; }
.tb-mine-when span { color: var(--ac-ink-soft); font-variant-numeric: tabular-nums; }
.tb-mine-what { display: grid; gap: 3px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.tb-mine-what .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 520px) { .tb-mine-card { grid-template-columns: 1fr; } .tb-filters select { max-width: none; flex: 1 1 140px; } }
.tr-grid label, .pc-grid label, .tr-wide { display: grid; gap: 4px; font-size: 12px; color: var(--ac-ink-soft); }
.tr-wide, .pc-wide { grid-column: 1 / -1; }
.tr-wide select[multiple] { min-height: 120px; }
.tr-actions, .pc-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tr-mob { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.tr-mob-head { display: grid; gap: 2px; margin-bottom: 8px; }
.tr-mob-head span { font-size: 12.5px; color: var(--ac-ink-soft); }
.tr-mob-item { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.tr-mob-when { font: 600 15px/1.2 var(--font-text); color: var(--ac-green); display: grid; }
.tr-mob-when span { font-size: 12px; color: var(--ac-ink-soft); font-weight: 500; }
.tr-mob-what { display: grid; gap: 3px; font-size: 13.5px; }
.tr-mob-what span { color: var(--ac-ink-soft); font-size: 12.5px; }
.tr-mob-what .btn { justify-self: start; margin-top: 4px; }
.pc-invoice, .pc-freight { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pc-total { margin-left: 8px; font-weight: 700; color: var(--ac-green); text-transform: none; letter-spacing: 0; }
.pc-num { text-align: right; white-space: nowrap; }
.pc-row-acts { white-space: nowrap; text-align: right; }

/* Module 328 — read a confirmation or invoice, fill the form */
.tr-read { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 4px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-sunk); }
.tr-read-btn { cursor: pointer; }
.tr-reading { color: var(--ac-warning); font-weight: 600; font-size: 13px; margin: 6px 0; }
.tr-read-note { font-size: 13px; margin: 6px 0; color: var(--ac-success); }
.tr-read-note.bad { color: var(--ac-error); }
.tr-read-many { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.tr-read-many table { margin: 6px 0; }

/* Module 329 — the CRM in Gmail: keys and install */
.gp-chip-btn { margin-right: 6px; }
@media (max-width: 900px) { .gp-chip-btn { display: none; } }
.gp-modal { width: min(760px, 94vw); max-width: none; max-height: 90vh; overflow: auto; }
.gp-section { margin: 14px 0 6px; }
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gp-keys td, .gp-keys th { font-size: 13px; }
.gp-keys tr.gp-off td { color: var(--ac-ink-soft); }
.gp-newkey { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--ac-success); border-radius: 10px; background: var(--surface-sunk); }
.gp-keyrow { display: flex; gap: 8px; margin: 8px 0 4px; }
.gp-keyrow input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.gp-steps { margin: 8px 0 12px 18px; padding: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; }
.gp-code { margin: 10px 0; }
.gp-code textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre; overflow: auto; }
.gp-warn { color: var(--ac-error); font-weight: 600; font-size: 13px; }
#gpInstall summary { cursor: pointer; padding: 6px 0; }

/* Module 334 — when the crew see a trip; office-only bookings */
.tr-release { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-sunk); font-size: 13px; }
.tr-release-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-release-days { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ac-ink-soft); }
.tr-release-days select { width: auto; padding: 4px 8px; }
.tr-st.office { background: var(--surface-sunk); color: var(--ac-ink-soft); border: 1px dashed var(--line-strong); }
.tr-check { display: flex !important; align-items: flex-start; gap: 8px; font-size: 13px !important; }
.tr-check input { width: auto; margin-top: 3px; }

/* Module 336 — photos in the weekly report editor */
.wr-photos-edit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.wr-photos-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wr-photos-acts { display: flex; gap: 6px; }
.wr-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.wr-photo { margin: 0; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--surface); }
.wr-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--surface-sunk); }
.wr-photo-cap { font-size: 12px; padding: 4px 6px; }
.wr-photo-tools { display: flex; align-items: center; justify-content: space-between; }
.wr-photo-n { font-size: 11px; color: var(--ac-ink-soft); }
.wr-photo-unused .wr-photo-add { cursor: pointer; opacity: .6; font: inherit; font-size: 11px; color: var(--ac-ink-soft); text-align: left; }
.wr-photo-unused .wr-photo-add:hover { opacity: 1; border-color: var(--line-strong); }
.wr-photo figcaption { font-size: 12px; color: var(--ac-ink-soft); }

/* Module 338 — copy steps between schedule templates */
.cs-bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 6px; }
.cs-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border, #dcdfe2); border-radius: 6px; }
.cs-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; margin: 0; border-bottom: 1px solid var(--border, #eceef0); cursor: pointer; font-weight: normal; }
.cs-row:last-child { border-bottom: 0; }
.cs-row:hover { background: rgba(30, 61, 43, 0.05); }
.cs-row input { margin: 0; width: auto; }
.cs-name { font-weight: 600; }
.cs-meta { color: var(--muted, #6b7378); font-size: 12px; }
.cs-days { font-variant-numeric: tabular-nums; color: var(--muted, #6b7378); font-size: 12px; min-width: 28px; text-align: right; }
.template-item-row.ti-copied { background: rgba(184, 134, 47, 0.10); border-radius: 6px; }

/* Module 340 — emails filed on a record from the Gmail panel */
.fe-box { margin-top: 18px; border-top: 1px solid var(--border, #dcdfe2); padding-top: 12px; }
.fe-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fe-title { font-weight: 700; }
.fe-count { font-variant-numeric: tabular-nums; font-size: 12px; padding: 1px 7px; border-radius: 10px; background: rgba(30, 61, 43, 0.10); color: #1E3D2B; }
.fe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fe-list details { border: 1px solid var(--border, #e3e6e8); border-radius: 6px; background: var(--card, #fff); }
.fe-list summary { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 10px; cursor: pointer; list-style: none; }
.fe-list summary::-webkit-details-marker { display: none; }
.fe-date { font-variant-numeric: tabular-nums; color: var(--muted, #6b7378); font-size: 12px; }
.fe-subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fe-from { color: var(--muted, #6b7378); font-size: 12px; white-space: nowrap; }
.fe-body { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.fe-text { white-space: pre-wrap; font-size: 13px; line-height: 1.45; max-height: 260px; overflow-y: auto; }
.fe-note { font-size: 13px; background: rgba(184, 134, 47, 0.10); padding: 6px 8px; border-radius: 4px; }
.fe-acts { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.fe-remove { color: var(--danger, #b3261e); }
@media (max-width: 600px) { .fe-list summary { grid-template-columns: 1fr; gap: 2px; } }

/* ---------------------------------------------------------------------------
   Module 341 — the Property Library (Sales Pipeline → Property Library)
   --------------------------------------------------------------------------- */
.lib-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.lib-title { margin: 0; font-size: var(--fs-xl); }
.lib-sub { margin: 2px 0 0; max-width: 70ch; }
.lib-head-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.lib-counts { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-4) 0 var(--s-3); }
.lib-count { display: flex; flex-direction: column; align-items: flex-start; min-width: 110px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.lib-count b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; line-height: 1.2; }
.lib-count span { font-size: var(--fs-xs); color: var(--muted, #647380); }
.lib-count:hover { border-color: var(--line-strong); }
.lib-count.on { border-color: var(--ac-green, #1E3D2B); box-shadow: inset 0 0 0 1px var(--ac-green, #1E3D2B); }
.lib-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.lib-filters input[type=search] { flex: 2 1 260px; min-width: 200px; }
.lib-filters select { flex: 1 1 140px; min-width: 130px; }
.lib-body { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: var(--s-4); align-items: start; }
.lib-list-wrap { min-width: 0; }
.lib-list-head { margin-bottom: 6px; }
.lib-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 290px); overflow-y: auto; padding-right: 4px; }
.lib-row { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; font: inherit; color: inherit; width: 100%; }
.lib-row:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.lib-row.on { border-color: var(--ac-green, #1E3D2B); box-shadow: inset 3px 0 0 var(--ac-green, #1E3D2B); }
.lib-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lib-row-name { font-weight: 700; min-width: 0; }
.lib-brand { font-weight: 400; color: var(--muted, #647380); font-size: var(--fs-sm); }
.lib-row-where, .lib-row-foot { font-size: var(--fs-sm); color: var(--muted, #647380); }
.lib-row-courts { font-size: var(--fs-sm); }
.lib-row-ops { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-row-ops:empty { display: none; }
.lib-row-foot { display: flex; justify-content: space-between; gap: 8px; }
.lib-due { color: var(--danger, #b3432b); font-weight: 600; }
.lib-nopin { color: #8a4b12; }
.lib-status { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.lib-status.none { background: #EEF0F1; color: #5b646b; }
.lib-status.info { background: var(--info-tint); color: #2f5f8a; }
.lib-status.warm { background: var(--warn-tint); color: #7a5512; }
.lib-status.cold { background: var(--danger-tint); color: #8f3420; }
.lib-status.ok { background: var(--ok-tint); color: #1E3D2B; }
.lib-op { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
.lib-op.hot { background: #FBEBDD; color: #8a4b12; border-color: #F0D3B6; }
.lib-op.warm { background: var(--surface-sunk); color: #5b646b; border-color: var(--line); }
.lib-op.info { background: var(--info-tint); color: #2f5f8a; }
.lib-map-wrap { position: sticky; top: 12px; }
.lib-map { height: calc(100vh - 300px); min-height: 420px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.lib-map-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: var(--muted, #647380); margin-top: 6px; }
.lib-map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.lib-empty { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-sunk); }
.lib-empty span { color: var(--muted, #647380); font-size: var(--fs-sm); }
.lib-map-pin-inner { font-size: 17px; line-height: 22px; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* the profile and its forms */
.lib-modal.wide { width: min(980px, 96vw) !important; max-width: 96vw; }
.lib-modal { width: min(560px, 96vw) !important; }
.lib-p-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.lib-p-head h2 { margin: 0 0 2px; font-size: var(--fs-xl); text-wrap: balance; }
.lib-p-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.lib-prio { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-sunk); border: 1px solid var(--line); }
.lib-prio.high { background: #FBEBDD; border-color: #F0D3B6; color: #8a4b12; }
.lib-p-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.lib-archive { margin-left: auto; }
.lib-banner { padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); margin: var(--s-2) 0; }
.lib-banner.ok { background: var(--ok-tint); }
.lib-banner.warn { background: var(--warn-tint); }
.lib-sec { border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-3); min-width: 0; }
.lib-sec-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #647380); margin-bottom: 6px; }
.lib-ro-line { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
.lib-ops { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lib-table-wrap { overflow-x: auto; }
.lib-courts, .lib-import-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lib-courts th, .lib-courts td, .lib-import-table th, .lib-import-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.lib-courts th, .lib-import-table th { background: var(--surface-sunk); font-weight: 600; font-size: var(--fs-xs); }
.lib-courts .num, .lib-import-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lib-other { font-size: var(--fs-sm); margin-top: 8px; }
.lib-p-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s-5); }
.lib-contact { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.lib-contact:last-of-type { border-bottom: 0; }
.lib-contact-links, .lib-prop-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-sm); }
.lib-prop-links { margin-top: 8px; }
.lib-primary { font-size: var(--fs-xs); background: var(--ok-tint); color: #1E3D2B; padding: 1px 6px; border-radius: var(--r-pill); }
.lib-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--fs-sm); margin: 10px 0 0; }
.lib-facts dt { color: var(--muted, #647380); }
.lib-facts dd { margin: 0; }
.lib-notes { white-space: pre-wrap; font-size: var(--fs-sm); background: var(--surface-sunk); padding: 8px 10px; border-radius: var(--r-sm); margin-top: 8px; }
.lib-task { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.lib-quicklog { display: flex; gap: 6px; margin-bottom: 8px; }
.lib-quicklog select { flex: 0 0 auto; width: auto; }
.lib-quicklog input { flex: 1 1 auto; min-width: 0; }
.lib-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.lib-history li { display: grid; grid-template-columns: 88px 74px 1fr; gap: 8px; font-size: var(--fs-sm); align-items: baseline; }
.lib-h-date { color: var(--muted, #647380); font-variant-numeric: tabular-nums; }
.lib-h-ch { font-size: var(--fs-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface-sunk); text-align: center; }
.lib-h-ch.call, .lib-h-ch.meeting, .lib-h-ch.site-visit { background: var(--ok-tint); }
.lib-h-ch.email, .lib-h-ch.whatsapp { background: var(--info-tint); }
.lib-form .lib-grid, #libLeadForm .lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
#libLeadForm .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lib-grid .span2 { grid-column: span 2; }
.lib-form-sec { font-weight: 700; margin: 16px 0 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.lib-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.lib-row-edit { display: grid; gap: 6px; align-items: center; }
.lib-court-edit { grid-template-columns: 1.1fr .8fr 1.5fr .9fr .9fr .9fr 1fr auto; }
.lib-contact-edit { grid-template-columns: 1.1fr 1.3fr 1.4fr 1fr auto auto auto; }
.modal form .lib-row-edit input, .modal form .lib-row-edit select { margin: 0; }
.lib-inline { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; white-space: nowrap; }
.modal form .lib-inline input { width: auto; }
.lib-geo { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.lib-geo input { flex: 1 1 auto; }
.lib-edit-map { height: 260px; border-radius: var(--r-md); border: 1px solid var(--line); }
.lib-quick-days { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-radio { display: flex !important; gap: 8px; align-items: center; color: var(--ink, #1f2a33) !important; font-size: var(--fs-base) !important; }
.modal form .lib-radio input[type=radio] { width: auto; }
.modal form .lib-inline-input { width: auto; flex: 1 1 200px; }
.lib-import-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; }
.lib-import-sum { margin: 8px 0; }
.lib-import-table { max-height: 300px; overflow: auto; }
.lib-import-table tr.skip td { color: var(--muted, #647380); }
@media (max-width: 1000px) {
  .lib-body { grid-template-columns: 1fr; }
  .lib-map-wrap { position: static; order: -1; }
  .lib-map { height: 320px; min-height: 0; }
  .lib-list { max-height: none; }
  .lib-p-cols { grid-template-columns: 1fr; }
  .lib-form .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-court-edit, .lib-contact-edit { grid-template-columns: 1fr 1fr; }
}
.modal form.lib-quicklog select { width: 120px; flex: 0 0 120px; margin: 0; }
.modal form.lib-quicklog input { width: auto; flex: 1 1 auto; margin: 0; }
.modal form.lib-quicklog button { flex: 0 0 auto; }

/* Module 345 — the search bar on the Map */
.map-search { position: relative; width: min(340px, calc(100vw - 90px)); background: var(--surface, #fff); border-radius: 10px; box-shadow: 0 2px 8px rgba(22, 48, 31, .25); }
.map-search input[type=search] { width: 100%; border: 0; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; background: transparent; outline: none; }
.map-search input[type=search]:focus { box-shadow: 0 0 0 2px rgba(30, 61, 43, .35); }
.map-search-results { display: none; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--line, #E3DACA); }
.map-search-results.open { display: block; }
.map-search-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #647380); padding: 8px 12px 2px; }
.map-search-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 7px 12px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.map-search-row:hover, .map-search-row.on { background: rgba(30, 61, 43, .08); }
.map-search-ic { width: 18px; text-align: center; color: #1a7a6e; flex: 0 0 18px; }
.map-search-txt { display: flex; flex-direction: column; min-width: 0; }
.map-search-txt b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-search-txt span { font-size: 12px; color: var(--muted, #647380); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-search-none { padding: 10px 12px; font-size: 12.5px; color: var(--muted, #647380); }
.leaflet-top.leaflet-left .map-search { margin-left: 10px; margin-top: 10px; }

/* Module 346 — find courts on the map */
.court-bar { border-top: 1px solid var(--line, #E3DACA); }
.court-toggle { width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #1E3D2B; cursor: pointer; border-radius: 0 0 10px 10px; }
.court-toggle:hover { background: rgba(30, 61, 43, .06); }
.court-panel { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.court-sports { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.court-sports label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; }
.court-acts { display: flex; gap: 8px; }
.court-msg { font-size: 12px; line-height: 1.4; }
.court-msg:empty { display: none; }
.court-pin-in { width: 26px; height: 26px; border-radius: 50%; background: var(--c, #2e7d32); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }
.court-pin-in.known { background: #fff; color: var(--c, #2e7d32); border-color: var(--c, #2e7d32); }
.court-known { margin-top: 6px; font-size: .85em; background: #E6EFE8; padding: 4px 6px; border-radius: 4px; }

/* ===========================================================================
   Module 348 — timesheets and the monthly invoice (js/timesheets.js)
   =========================================================================== */
.ts { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.ts-admin { max-width: 1180px; }
.ts-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--ac-sand-light); border-radius: 999px; padding: 3px; background: var(--white, #fff); }
.ts-seg button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font: 600 13px var(--font-text); color: var(--ac-ink-soft); cursor: pointer; }
.ts-seg button.on { background: var(--ac-green); color: #fff; }
.ts-warn { background: #FBEAE8; border: 2px solid #B3261E; color: #B3261E; font-weight: 700; padding: 10px 14px; border-radius: 8px; line-height: 1.4; }
.ts-other { background: var(--ac-green-tint); border-radius: 8px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ts-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-nav .btn.small { min-width: 38px; font-size: 18px; line-height: 1; }
.ts-nav .ts-this { font-size: 12px; min-width: 0; }
.ts-navlabel { display: flex; flex-direction: column; min-width: 150px; text-align: center; }
.ts-navlabel b { font: 600 20px var(--font-display); color: var(--ac-green); }
.ts-navlabel span { font-size: 12px; color: var(--ac-ink-soft); }
.ts-week { display: flex; flex-direction: column; gap: 8px; }
.ts-day { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; background: var(--white, #fff); border: 1px solid var(--ac-sand-light); border-radius: 10px; padding: 10px 12px; }
.ts-day.on { border-color: var(--ac-green); background: #FBFDFB; box-shadow: inset 4px 0 0 var(--ac-green); }
.ts-day.today .ts-dname em { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-brass); margin-left: 4px; }
.ts-day.bad { border-color: #B3261E; box-shadow: inset 4px 0 0 #B3261E; }
.ts-tick { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
.ts-tick:disabled { cursor: default; }
.ts-tick:focus-visible { outline: 2px solid var(--ac-brass); outline-offset: 3px; border-radius: 6px; }
.ts-box { grid-row: 1 / 3; width: 30px; height: 30px; border: 2px solid var(--ac-sand); border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff; background: #fff; }
.ts-day.on .ts-box { background: var(--ac-green); border-color: var(--ac-green); }
.ts-dname { font-weight: 600; font-size: 14px; }
.ts-ddate { font-size: 12px; color: var(--ac-ink-soft); }
.ts-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; justify-content: center; min-height: 44px; }
.ts-fields select, .ts-fields input, .ts-fields textarea { width: 100%; font: 14px var(--font-text); padding: 9px 10px; border: 1px solid var(--ac-sand); border-radius: 7px; background: #fff; color: var(--ac-ink); }
.ts-fields textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.ts-hint { font-size: 13px; color: var(--ac-ink-soft); }
.ts-hint b { color: var(--ac-ink); font-weight: 600; }
.ts-empty, .ts-note { background: var(--ac-sand-pale); border-radius: 8px; padding: 12px 14px; margin: 0; color: var(--ac-ink); }
.ts-note { font-size: 13px; color: var(--ac-ink-soft); background: none; padding: 0; }
.ts-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ts-total { margin-right: auto; color: var(--ac-ink-soft); }
.ts-total b { font: 600 24px var(--font-display); color: var(--ac-green); }
.ts-dirty { font-size: 12px; font-weight: 600; color: var(--ac-warning); }
.ts-wcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ts-wcard { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; background: #fff; border: 1px solid var(--ac-sand-light); border-radius: 10px; padding: 12px; cursor: pointer; font: inherit; color: inherit; }
.ts-wcard:hover, .ts-wcard:focus-visible { border-color: var(--ac-green); outline: none; }
.ts-wlabel { font: 600 17px var(--font-display); color: var(--ac-green); grid-column: 1 / 3; }
.ts-wrange { font-size: 12px; color: var(--ac-ink-soft); grid-column: 1 / 3; }
.ts-wdays b { font-size: 18px; }
.ts-wval { font-weight: 700; font-variant-numeric: tabular-nums; align-self: end; }
.ts-wjobs { grid-column: 1 / 3; font-size: 12px; color: var(--ac-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-sum { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-sum > div { flex: 1 1 140px; background: #fff; border: 1px solid var(--ac-sand-light); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.ts-sum span { font-size: 11px; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ac-ink-soft); }
.ts-sum b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ts-sum .grand { background: var(--ac-green); border-color: var(--ac-green); color: #fff; }
.ts-sum .grand span { color: #DDE7DF; }
.ts-lines summary { cursor: pointer; font-weight: 600; }
.ts-lines table, .ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-lines th, .ts-lines td, .ts-table th, .ts-table td { padding: 8px; border-bottom: 1px solid var(--ac-sand-light); text-align: left; vertical-align: top; }
.ts-lines th, .ts-table th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-ink-soft); background: var(--ac-sand-pale); }
.ts .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.ts-field textarea, .ts-field input, .ts-field select { font: 400 14px var(--font-text); padding: 9px 10px; border: 1px solid var(--ac-sand); border-radius: 7px; background: #fff; color: var(--ac-ink); }
.ts-field .muted { font-weight: 400; }
.ts-adminhead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.ts-adminhead h2 { font: 600 28px var(--font-display); color: var(--ac-green); margin: 0; }
.ts-adminhead .hint { max-width: 640px; margin: 4px 0 0; }
.ts-card { background: #fff; border: 1px solid var(--ac-sand-light); border-radius: 12px; padding: 14px 16px; }
.ts-card h3 { margin: 0 0 6px; font: 600 19px var(--font-display); color: var(--ac-green); }
.ts-card h3 .muted { font: 400 13px var(--font-text); }
.ts-tablewrap { overflow-x: auto; }
.ts-table .small, .ts .small { font-size: 12px; }
.ts-acts { white-space: nowrap; text-align: right; }
.ts-acts .btn + .btn { margin-left: 6px; }
.ts-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ac-green-tint); color: var(--ac-green); white-space: nowrap; }
.ts-pill.ok { background: var(--ac-success); color: #fff; }
.ts-pill.warn { background: #F6EBD3; color: #7A5B17; }
.ts-pill.quiet { background: var(--ac-sand-pale); color: var(--ac-ink-soft); }
.ts-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ts-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ac-sand-light); flex-wrap: wrap; }
.ts-list li.off b { color: var(--ac-ink-soft); text-decoration: line-through; }
.ts-list select { padding: 6px 8px; border: 1px solid var(--ac-sand); border-radius: 6px; }
.ts-add { display: flex; gap: 8px; margin-top: 8px; }
.ts-add input { flex: 1; max-width: 360px; padding: 8px 10px; border: 1px solid var(--ac-sand); border-radius: 7px; font: 14px var(--font-text); }
.ts-modal { position: fixed; inset: 0; background: rgba(22, 48, 31, .45); display: grid; place-items: center; z-index: 5000; padding: 16px; }
.ts-modal-card { background: #fff; border-radius: 12px; padding: 18px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.ts-modal-card h3 { margin: 0; font: 600 22px var(--font-display); color: var(--ac-green); }
.ts-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ts-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
@media (max-width: 640px) {
  .ts-day { grid-template-columns: 1fr; gap: 6px; }
  .ts-day:not(.on) { grid-template-columns: auto 1fr; align-items: center; }
  .ts-foot .btn { flex: 1 1 auto; }
  .ts-total { flex-basis: 100%; }
  .ts-navlabel { flex: 1; }
}

.ts .btn.ts-primary { background: var(--ac-green); border: 1px solid var(--ac-green); color: #fff; font-weight: 600; padding: 10px 18px; border-radius: 8px; }
.ts .btn.ts-primary:hover { background: var(--ac-green-deep); }
.ts .btn.ts-primary:disabled { opacity: .5; cursor: not-allowed; }
.ts .btn.ts-secondary { background: #fff; border: 1px solid var(--ac-green); color: var(--ac-green); font-weight: 600; padding: 10px 18px; border-radius: 8px; }

/* ===========================================================================
   Module 349 — the purchase order in the order it happens (js/poFlow.js),
   catalogue weight & size, material-quote totals.
   =========================================================================== */
.pof-steps { list-style: none; display: flex; gap: 0; margin: 10px 0 14px; padding: 0; border: 1px solid var(--ac-sand-light); border-radius: 10px; overflow: hidden; background: #fff; }
.pof-steps li { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 9px 34px; position: relative; font-size: 12px; color: var(--ac-ink-soft); border-right: 1px solid var(--ac-sand-light); min-width: 0; }
.pof-steps li:last-child { border-right: 0; }
.pof-steps li b { font-weight: 600; color: inherit; }
.pof-steps li small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pof-dot { position: absolute; left: 9px; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ac-sand); display: grid; place-items: center; font-size: 10px; font-weight: 700; background: #fff; }
.pof-steps li.done { color: var(--ac-green); }
.pof-steps li.done .pof-dot { background: var(--ac-green); border-color: var(--ac-green); color: #fff; }
.pof-steps li.now { background: var(--ac-green-tint); color: var(--ac-ink); }
.pof-steps li.now .pof-dot { border-color: var(--ac-green); color: var(--ac-green); }
.pof-groups { border: 1px solid var(--ac-sand-light); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--ac-sand-pale); display: flex; flex-direction: column; gap: 8px; }
.pof-groups.many { border-color: var(--ac-brass); background: #FBF6EA; }
.pof-gtitle { font-size: 13px; line-height: 1.45; }
.pof-chips, .pof-orderfrom { display: flex; flex-wrap: wrap; gap: 6px; }
.pof-chip { border: 1px solid var(--ac-sand); background: #fff; border-radius: 999px; padding: 4px 11px; font: 600 12px var(--font-text); color: var(--ac-ink); cursor: pointer; }
.pof-chip.on { background: var(--ac-green); border-color: var(--ac-green); color: #fff; }
.pof-linesup { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.pof-linesup select { max-width: 220px; font-size: 12px; padding: 3px 6px; }
.pof-remember { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--ac-ink-soft); flex-direction: row; margin: 0; }
.pof-remember input { width: auto; margin: 0; }
.pof-procured { margin: 12px 0; }
.pof-prow { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--ac-sand-light); }
.pof-tick { width: 20px; height: 20px; border-radius: 50%; background: var(--ac-success); color: #fff; display: grid; place-items: center; font-size: 11px; flex: none; }
.pof-placed { margin: 12px 0; }
.pof-track { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pof-track label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pof-track .hint { flex-basis: 100%; margin: 0; }
.pof-modal { position: fixed; inset: 0; background: rgba(22, 48, 31, .45); display: grid; place-items: center; z-index: 6000; padding: 16px; }
.pof-card { background: #fff; border-radius: 12px; padding: 18px 20px; width: min(520px, 100%); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.pof-wide .pof-card { width: min(1100px, 100%); }
.pof-card h3 { margin: 0; font: 600 22px var(--font-display); color: var(--ac-green); }
.pof-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.pof-card input, .pof-card select { font: 14px var(--font-text); padding: 7px 9px; border: 1px solid var(--ac-sand); border-radius: 7px; }
.pof-actions { display: flex; gap: 8px; justify-content: flex-end; }
.pof-err { color: #B3261E; font-weight: 700; margin: 0; }
.pof-ok { background: var(--ac-green-tint); border-radius: 7px; padding: 7px 10px; margin: 0; font-size: 13px; }
.pof-stdwrap { overflow-x: auto; }
.pof-std { border-collapse: collapse; font-size: 12px; min-width: 900px; }
.pof-std th, .pof-std td { padding: 5px 6px; border-bottom: 1px solid var(--ac-sand-light); text-align: left; vertical-align: middle; }
.pof-std thead th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-soft); background: var(--ac-sand-pale); }
.pof-std tbody th small { display: block; font-weight: 400; color: var(--ac-ink-soft); }
.pof-std input[type=number] { width: 62px; padding: 4px 6px; font-size: 13px; }
.pof-std input[data-f=basis] { width: 240px; font-size: 12px; padding: 4px 6px; }
.ci-phys { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.ci-dims { display: flex; gap: 4px; align-items: center; }
.ci-dims input { width: 100%; min-width: 0; }
.ci-sold { flex-direction: row !important; align-items: flex-start; gap: 8px; font-weight: 400; }
.ci-sold input { width: auto; margin-top: 3px; }
@media (max-width: 720px) { .pof-steps { flex-direction: column; } .pof-steps li { border-right: 0; border-bottom: 1px solid var(--ac-sand-light); } .ci-phys { grid-template-columns: 1fr; } }
.pof-oneoff { margin-top: 16px; border: 1px dashed var(--ac-sand); border-radius: 10px; padding: 10px 12px; background: #fff; }
.pof-oneoff-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.pof-oneoff-t { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.pof-oneoff-t th, .pof-oneoff-t td { padding: 6px 8px; border-bottom: 1px solid var(--ac-sand-light); text-align: left; }
.pof-oneoff-t th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-soft); }
.pof-oneoff-t tr[data-pof-wo] { cursor: pointer; }
.pof-oneoff-t tr[data-pof-wo]:hover { background: var(--ac-sand-pale); }
.pof-oneoff-t .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Modules 350–351 — the crew planner (Project Management → Calendar)
   --------------------------------------------------------------------------- */
.crp-root { display: flex; flex-direction: column; gap: 10px; }
.crp-root [hidden], .crp-classic[hidden] { display: none !important; }
.crp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.crp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.crp-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px; background: var(--surface); }
.crp-seg-btn { border: 0; background: none; padding: 5px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ac-ink-soft); cursor: pointer; }
.crp-seg-btn.on { background: var(--ac-green); color: #fff; }
.crp-nav { display: flex; align-items: center; gap: 6px; }
.crp-month { font: 600 22px/1 var(--font-display); color: var(--ac-green); min-width: 170px; text-align: center; }
.crp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; align-items: center; }
.crp-tools select { max-width: 240px; }
.crp-plan-pick select { font-weight: 600; }
.crp-drafting .crp-plan-pick select { border-color: var(--ac-brass); background: var(--warn-tint); color: #5c4718; }
.crp-hint { font-size: var(--fs-sm); color: var(--ac-ink-soft); }
.crp-hint-sm { font-size: var(--fs-xs); color: var(--ac-ink-soft); list-style: none; padding: 4px 2px; margin: 0; }
.crp-muted { color: var(--ac-ink-soft); font-weight: 400; }
.crp-clashes { background: var(--danger-tint); border: 1px solid #e2c3b9; color: #6e3426; border-radius: var(--r-md); padding: 8px 12px; font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.crp-clashes em { font-style: normal; color: var(--ac-ink-soft); }
.crp-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .crp-main { grid-template-columns: 1fr; } }

/* The draft-plan banner */
.crp-planbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--warn-tint); border: 1px dashed var(--ac-brass); color: #4d3c14; font-size: var(--fs-sm); }
.crp-planbar-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.crp-planbar-count { font-weight: 700; }
.crp-planbar-stale { flex-basis: 100%; color: #6e3426; }
.crp-planbar-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.crp-draft-pill { display: inline-block; font: 700 10.5px/1 var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ac-brass); border-radius: var(--r-pill); padding: 4px 8px; vertical-align: middle; }
.crp-drafting .crp-month-grid { border: 2px dashed var(--ac-brass); background-image: repeating-linear-gradient(135deg, rgba(150, 120, 62, .05) 0 10px, transparent 10px 20px); }

/* The month */
.crp-month-grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.crp-dow, .crp-week { display: grid; grid-template-columns: repeat(7, minmax(108px, 1fr)); min-width: 760px; }
.crp-dow { background: var(--surface-sunk); border-bottom: 1px solid var(--line); }
.crp-dow span { padding: 6px 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-soft); }
.crp-week { position: relative; border-bottom: 1px solid var(--line); }
.crp-week:last-child { border-bottom: 0; }
.crp-day { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 8px 3px; position: relative; z-index: 3; border-radius: 4px 4px 0 0; }
.crp-dnum { font-size: var(--fs-sm); font-weight: 600; color: var(--ac-ink); font-variant-numeric: tabular-nums; }
.crp-day.out .crp-dnum { color: #b3ab9b; }
.crp-day.today .crp-dnum { background: var(--ac-green); color: #fff; border-radius: var(--r-pill); padding: 0 7px; }
.crp-day.crp-range { background: color-mix(in srgb, var(--ac-brass) 22%, #fff); }
.crp-day.crp-target-day { background: var(--ac-green-tint); box-shadow: inset 0 -2px 0 var(--ac-green); }
.crp-away { font-size: 10.5px; font-weight: 600; color: #8a5a00; background: var(--warn-tint); border-radius: var(--r-pill); padding: 0 6px; cursor: help; white-space: nowrap; }
.crp-cell { border-left: 1px solid var(--line); z-index: 0; }
.crp-week > .crp-cell[style^="grid-column:1;"] { border-left: 0; }
.crp-cell.out { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(216, 204, 180, .18) 6px 7px); }
.crp-cell.crp-drop-hint { background: var(--ac-green-tint); }

/* A job: a band across its days, its name on top, a bar per booking under it */
.crp-band { z-index: 1; margin: 0 3px; background: color-mix(in srgb, var(--jc) 7%, transparent); border: 1px solid color-mix(in srgb, var(--jc) 28%, transparent); border-left: 4px solid var(--jc); border-radius: var(--r-md); transition: box-shadow .12s var(--ease); }
.crp-band.cl { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; margin-left: 0; }
.crp-band.cr { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; margin-right: 0; }
.crp-band.crp-drop-hint { box-shadow: 0 0 0 2px var(--jc), var(--sh-2); background: color-mix(in srgb, var(--jc) 15%, transparent); }
.crp-job-head { z-index: 2; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px 0 11px; pointer-events: none; }
.crp-job-head > * { pointer-events: auto; }
.crp-job-name { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font-size: var(--fs-sm); font-weight: 700; color: color-mix(in srgb, var(--jc) 80%, #000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.crp-job-name:hover { text-decoration: underline; }
.crp-job-add { flex: none; width: 20px; height: 20px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--jc) 45%, #fff); background: #fff; color: var(--jc); font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.crp-job-add:hover { background: var(--jc); color: #fff; }
.crp-nobody { z-index: 2; align-self: center; padding: 0 12px; font-size: var(--fs-xs); color: var(--ac-ink-soft); font-style: italic; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.crp-bk { z-index: 2; position: relative; display: flex; align-items: center; min-width: 0; height: 24px; align-self: center; margin: 0 1px; padding: 0 9px 0 7px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--tc) 55%, #fff); border-radius: 0; color: var(--ac-ink); cursor: grab; user-select: none; touch-action: none; font-size: 11.5px; box-shadow: var(--sh-1); }
.crp-bk.s { margin-left: 8px; border-top-left-radius: var(--r-pill); border-bottom-left-radius: var(--r-pill); border-left: 3px solid var(--tc); }
.crp-bk.e { margin-right: 8px; border-top-right-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); }
.crp-bk:not(.s) { border-left-style: dashed; }
.crp-bk:not(.e):not(:has(.crp-bk-open)) { border-right-style: dashed; }
.crp-bk.team { background: color-mix(in srgb, var(--tc) 12%, #fff); }
.crp-bk:hover, .crp-bk:focus-visible { outline: none; box-shadow: var(--focus), var(--sh-2); z-index: 4; }
.crp-bk.clash { border: 2px solid var(--ac-error); background: var(--danger-tint); }
.crp-bk.ps-new, .crp-bk.ps-changed { outline: 2px dashed var(--ac-brass); outline-offset: 1px; }
.crp-bk.ps-new::after, .crp-bk.ps-changed::after { content: ''; position: absolute; top: -4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-brass); border: 2px solid #fff; }
.crp-bk.dim { opacity: .25; }
.crp-bk.crp-dragging { opacity: .45; }
.crp-bk-label { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; }
.crp-bk-team { font-weight: 700; color: color-mix(in srgb, var(--tc) 80%, #000); overflow: hidden; text-overflow: ellipsis; }
.crp-bk-inis { display: inline-flex; gap: 0; }
.crp-bk-inis .crp-ini { margin-left: -3px; border: 1.5px solid #fff; }
.crp-bk-inis .crp-ini:first-child { margin-left: 0; }
.crp-bk-name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.crp-bk-open { margin-left: auto; padding-left: 4px; color: var(--tc); font-weight: 700; }
.crp-h { position: absolute; top: -1px; bottom: -1px; width: 12px; cursor: ew-resize; z-index: 5; touch-action: none; }
.crp-h.l { left: -6px; }
.crp-h.r { right: -6px; }
.crp-h::after { content: ''; position: absolute; top: 5px; bottom: 5px; left: 4px; width: 4px; border-radius: 2px; background: var(--tc); opacity: 0; transition: opacity .1s; }
.crp-bk:hover .crp-h::after, .crp-h:focus-visible::after, body.crp-drag-on .crp-h::after { opacity: .9; }
@media (pointer: coarse) { .crp-h { width: 22px; } .crp-h.l { left: -11px; } .crp-h.r { right: -11px; } .crp-h::after { opacity: .7; left: 9px; } }
.crp-readonly .crp-bk { cursor: default; }

.crp-ini { font-style: normal; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: var(--r-pill); background: var(--tc, #7A7F78); color: #fff; font-size: 8.5px; font-weight: 700; letter-spacing: .02em; flex: none; }
.crp-ini.fm { box-shadow: 0 0 0 1.5px var(--ac-brass); }
.crp-team-tag { display: inline-flex; align-items: center; font-size: 11.5px; line-height: 1; border-radius: var(--r-pill); padding: 3px 8px; background: var(--tc); color: #fff; border: 1px solid var(--tc); font-weight: 700; cursor: grab; user-select: none; touch-action: none; white-space: nowrap; }
.crp-team-tag.big { font-size: var(--fs-sm); padding: 4px 10px; }
.crp-team-tag.crp-dragging, .crp-person.crp-dragging { opacity: .45; }
body.crp-drag-on, body.crp-drag-on * { cursor: grabbing !important; user-select: none !important; }
.crp-ghost { position: fixed; z-index: 7000; pointer-events: none; background: var(--ac-ink); color: #fff; font-size: var(--fs-sm); padding: 6px 10px; border-radius: var(--r-md); box-shadow: var(--sh-3); max-width: 340px; }
.crp-ghost[hidden] { display: none; }

/* Module 359 — the timeline: days running sideways, the screen follows the drag */
.crp-main.noside { grid-template-columns: minmax(0, 1fr); }
.crp-zoom .crp-seg-btn { padding: 5px 11px; }
.crp-clash { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(110, 52, 38, .35); text-underline-offset: 2px; }
.crp-clash:hover, .crp-clash:focus-visible { text-decoration-color: currentColor; outline: none; }
.crt { position: relative; }
.crt-scroll { overflow: auto; max-height: max(440px, calc(100vh - 250px)); overscroll-behavior: contain; scroll-behavior: auto; border-radius: inherit; }
.crt-scroll:focus-visible { outline: 2px solid var(--ac-green); outline-offset: -2px; }
.crt-inner { position: relative; }
.crt-head { position: sticky; top: 0; z-index: 8; display: flex; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.crt-corner { position: sticky; left: 0; z-index: 2; flex: none; width: var(--lw); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 12px;
  background: var(--surface-sunk); border-right: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ac-ink-soft); }
.crt-corner small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.crt-hd { position: relative; flex: none; height: 48px; }
.crt-mons { position: absolute; inset: 0 0 auto 0; height: 20px; }
.crt-mon { position: absolute; top: 0; height: 20px; border-left: 1px solid var(--line-strong); box-sizing: border-box; }
.crt-mon b { position: sticky; left: calc(var(--lw) + 4px); display: inline-block; padding: 3px 6px 0; font-size: var(--fs-xs); font-weight: 700; color: var(--ac-green); white-space: nowrap; }
.crt-days { position: absolute; inset: 20px 0 0 0; }
.crp-day.crt-d { position: absolute; top: 0; bottom: 0; grid-row: auto; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 0; border-radius: 0; z-index: auto; box-sizing: border-box; line-height: 1.1; }
.crt-d.we { background: var(--surface-sunk); }
.crt-d.mon { border-left: 1px solid var(--line); }
.crt-d .crp-dnum { font-size: 11.5px; }
.crt-d small { font-size: 9.5px; color: var(--ac-ink-soft); }
.crt-d.today .crp-dnum { padding: 0 5px; }
.crt-away { position: absolute; top: 1px; right: 1px; min-width: 12px; font: 700 8.5px/12px var(--font-body, inherit); font-style: normal; text-align: center; color: #8a5a00; background: var(--warn-tint); border-radius: var(--r-pill); }
.crt-body { position: relative; }
.crt-cols { position: absolute; top: 0; bottom: 0; left: var(--lw); pointer-events: none; z-index: 0; }
.crt-we { position: absolute; top: 0; bottom: 0; background: rgba(216, 204, 180, .16); }
.crt-wk { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.crt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ac-green); opacity: .5; }
.crt-job { position: relative; border-bottom: 1px solid var(--line); transition: box-shadow .12s var(--ease), background .12s var(--ease); }
.crt-job.crp-drop-hint { box-shadow: inset 0 0 0 2px var(--jc); background: color-mix(in srgb, var(--jc) 7%, transparent); }
.crt-job.crt-flash { animation: crtFlash 1.6s var(--ease); }
@keyframes crtFlash { 0%, 60% { background: color-mix(in srgb, var(--ac-brass) 22%, transparent); } 100% { background: transparent; } }
.crt-row { display: flex; height: 30px; position: relative; }
.crt-row.head { height: 40px; }
.crt-lab { position: sticky; left: 0; z-index: 6; flex: none; width: var(--lw); box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 8px 0 14px;
  background: var(--surface); border-right: 1px solid var(--line); font-size: var(--fs-sm); }
.crt-row.head .crt-lab { border-left: 4px solid var(--jc); padding-left: 9px; background: color-mix(in srgb, var(--jc) 7%, var(--surface)); }
.crt-jl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.crt-jl .crp-job-name { flex: none; }
.crt-jl small { font-size: 10.5px; color: var(--ac-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt-muted { color: var(--ac-ink-soft); font-style: italic; font-size: var(--fs-xs); }
.crt-pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.crt-lab .crp-ini { width: 20px; height: 20px; font-size: 9px; }
.crt-lab .crp-bk-inis .crp-ini { width: 18px; height: 18px; font-size: 8px; }
.crt-tag { flex: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--tc); border-radius: var(--r-pill); padding: 3px 8px; }
.crt-track { position: relative; flex: 1; }
.crt-band { position: absolute; top: 7px; bottom: 7px; border-radius: var(--r-md); background: color-mix(in srgb, var(--jc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--jc) 34%, transparent); box-sizing: border-box; }
.crt-band.cl { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.crt-band.cr { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.crt-ph { position: absolute; top: 11px; height: 18px; box-sizing: border-box; padding: 0 6px; border-left: 2px solid var(--jc); font: 600 10.5px/18px var(--font-body, inherit); color: color-mix(in srgb, var(--jc) 80%, #000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt-nobody { position: absolute; top: 7px; padding-left: 8px; font-size: var(--fs-xs); color: var(--ac-ink-soft); font-style: italic; white-space: nowrap; }
.crt-awayblk { position: absolute; top: 4px; bottom: 4px; z-index: 1; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(150, 120, 62, .30) 0 4px, transparent 4px 8px); }
.crp-bk.crt-bk { position: absolute; top: 3px; height: 24px; margin: 0; box-sizing: border-box; padding: 0 8px 0 7px; }
.crp-bk.crt-bk .crp-bk-label { font-variant-numeric: tabular-nums; font-weight: 600; gap: 6px; position: sticky; left: calc(var(--lw) + 8px); }
.crp-bk.crt-bk { overflow: visible; }
.crt-bph { font-weight: 700; color: color-mix(in srgb, var(--tc) 80%, #000); }

/* The side panel */
.crp-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; }
.crp-side-head { display: flex; align-items: center; justify-content: space-between; }
.crp-side h4 { margin: 0; font: 600 18px var(--font-display); color: var(--ac-green); }
.crp-team { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--tc, var(--line-strong)); border-radius: var(--r-md); padding: 8px; transition: box-shadow .12s; }
.crp-team.loose { border-top-color: var(--line-strong); }
.crp-team.focus { box-shadow: 0 0 0 2px var(--tc); }
.crp-team.crp-drop-hint { box-shadow: 0 0 0 2px var(--tc, var(--ac-green)); background: var(--ac-green-tint); }
.crp-team header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; }
.crp-team header h4 { font-size: 16px; }
.crp-count { font: 600 var(--fs-xs) var(--font-body, inherit); color: var(--ac-ink-soft); }
.crp-link { background: none; border: 0; padding: 0; font-size: var(--fs-xs); color: var(--ac-green); text-decoration: underline; cursor: pointer; }
.crp-link.crp-link-del { color: var(--ac-error); }   /* module 390 — Remove a team */
.crp-team ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.crp-person { display: flex; align-items: center; gap: 7px; padding: 4px 5px; border-radius: var(--r-sm); cursor: grab; user-select: none; touch-action: pan-y; }
.crp-person:hover, .crp-person:focus-visible { background: var(--surface-sunk); outline: none; }
.crp-person .crp-ini { width: 22px; height: 22px; font-size: 9.5px; }
.crp-pname { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; }
.crp-pname small { font-weight: 400; color: var(--ac-ink-soft); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crp-fm { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-brass); }
.crp-x { background: none; border: 0; color: var(--ac-ink-soft); font-size: 16px; line-height: 1; cursor: pointer; visibility: hidden; padding: 0 2px; }
.crp-person:hover .crp-x, .crp-x:focus-visible { visibility: visible; }
.crp-empty { padding: 28px 18px; text-align: center; color: var(--ac-ink-soft); font-size: var(--fs-sm); }

/* Menu */
.crp-menu { position: absolute; z-index: 6500; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 4px; display: flex; flex-direction: column; min-width: 210px; }
.crp-menu button { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer; }
.crp-menu button:hover, .crp-menu button:focus-visible { background: var(--ac-green-tint); outline: none; }

/* Cards: move, publish */
.crp-card-back { position: fixed; inset: 0; background: rgba(22, 48, 31, .42); display: grid; place-items: center; z-index: 6400; padding: 16px; }
.crp-card { background: #fff; border-radius: var(--r-lg); width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-3); }
.crp-card.wide { width: min(680px, 100%); }
.crp-card h3 { margin: 0; font: 600 23px var(--font-display); color: var(--ac-green); text-wrap: balance; }
.crp-card p { margin: 0; font-size: var(--fs-sm); }
.crp-form { display: flex; flex-direction: column; gap: 9px; }
.crp-form label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); font-weight: 600; }
.crp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crp-modes { border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 10px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.crp-modes label { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; cursor: pointer; }
.crp-modes input { margin-top: 3px; }
.crp-preview { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 12px; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 8px; }
.crp-plan, .crp-warn ul, .crp-trav ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.crp-pub { margin: 0; padding: 10px 12px; list-style: none; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); max-height: 46vh; overflow: auto; }
.crp-pub ul { margin: 2px 0 0; padding-left: 18px; }
.crp-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.crp-off { color: var(--ac-error); font-weight: 600; }
.crp-on { color: var(--ac-success); font-weight: 600; }
.crp-warn { color: #6e3426; background: var(--danger-tint); border-radius: var(--r-sm); padding: 6px 9px; font-size: var(--fs-sm); }
.crp-trav { color: #6b5520; background: var(--warn-tint); border-radius: var(--r-sm); padding: 6px 9px; }
.crp-err { color: var(--ac-error); font-weight: 600; font-size: var(--fs-sm); }
.crp-err .crp-retry { margin-left: 8px; padding: 2px 10px; height: auto; font-size: var(--fs-sm); font-weight: 600; border-color: currentColor; color: inherit; background: none; }
.crp-card-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.crp-card-btns .btn.danger { background: var(--ac-error); border-color: var(--ac-error); color: #fff; }

/* Undo */
.crp-undo { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6300; background: var(--ac-ink); color: #fff; border-radius: var(--r-pill); padding: 8px 10px 8px 18px; display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); box-shadow: var(--sh-3); max-width: calc(100vw - 32px); }
.crp-undo[hidden] { display: none; }
.crp-undo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crp-undo button { background: var(--ac-ball); color: var(--ac-ink); border: 0; border-radius: var(--r-pill); padding: 5px 14px; font-weight: 700; cursor: pointer; }
.crp-undo .crp-undo-x { background: none; color: #fff; padding: 0 4px; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .crp-band, .crp-team, .crp-h::after { transition: none; } }

/* ---------------------------------------------------------------------------
   Module 352 — the assignee manages a task's steps
   --------------------------------------------------------------------------- */
.task-step-tools { display: inline-flex; gap: 2px; margin-left: auto; }
.task-step-tools a { color: var(--ac-ink-soft); text-decoration: none; padding: 0 4px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.4; }
.task-step-tools a:hover, .task-step-tools a:focus-visible { background: var(--ac-green-tint); color: var(--ac-green); outline: none; }
.task-step-tools a[hidden] { visibility: hidden; display: inline; }

/* ---------------------------------------------------------------------------
   Module 353 — deleting orders safely; how far a fulfilling order has got
   --------------------------------------------------------------------------- */
.ol-back { position: fixed; inset: 0; background: rgba(22, 48, 31, .42); display: grid; place-items: center; z-index: 6400; padding: 16px; }
.ol-card { background: #fff; border-radius: var(--r-lg); width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sh-3); font-size: var(--fs-sm); }
.ol-card h3 { margin: 0; font: 600 22px var(--font-display); color: var(--ac-green); }
.ol-sum { margin: 0; color: var(--ac-ink-soft); }
.ol-what { margin: 0; padding: 10px 12px 10px 28px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 8px; }
.ol-what label, .ol-check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.ol-none { color: var(--ac-ink-soft); }
.ol-sub { color: var(--ac-ink-soft); font-size: var(--fs-xs); margin: 2px 0 0; }
.ol-warn { background: var(--danger-tint); color: #6e3426; border-radius: var(--r-sm); padding: 7px 10px; }
.ol-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ol-btns.left { justify-content: flex-start; margin-top: 6px; }
.ol-progress { border: 1px solid var(--line); background: var(--ok-tint); border-radius: var(--r-md); padding: 9px 12px; margin: 10px 0; font-size: var(--fs-sm); }
.ol-progress.attention { background: var(--danger-tint); border-color: #e2c3b9; }
.ol-progress ul { margin: 6px 0 0; padding-left: 18px; }
.ol-ok { color: var(--ac-success); font-weight: 600; }
.ol-cx { color: var(--ac-error); font-weight: 600; }
.ol-hist { margin-top: 6px; }
.ol-hist summary { cursor: pointer; color: var(--ac-green); }
.mq-pick { width: 28px; text-align: center; }
.mq-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--warn-tint); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.mq-bulk[hidden] { display: none; }
/* Module 399 — deleting a procurement order at any status */
.ol-lines { line-height: 1.5; }
.ol-stage { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ac-ink-soft); }
.ol-money { color: var(--ac-error); font-weight: 600; }
.ol-type { display: flex; flex-direction: column; gap: 6px; font-weight: 600; padding: 10px 12px; border: 1px solid #e2c3b9; background: var(--danger-tint); border-radius: var(--r-md); }
.ol-type input { height: var(--ctl-h, 36px); font: 600 15px var(--font-mono, ui-monospace, monospace); letter-spacing: .04em; text-transform: uppercase; }
.po-hidden-note { margin: 8px 2px; }

/* ---------------------------------------------------------------------------
   Module 354 — Procurement and Shipping grouped by client, then project
   --------------------------------------------------------------------------- */
.lg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-sm); }
.lg-bar-n { color: var(--ac-ink-soft); margin-right: auto; }
.lg-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--ac-ink-soft); }
.lg-sort select { height: var(--ctl-h-sm); }
tr.lg-client > td { background: var(--surface-sunk); border-top: 1px solid var(--line-strong); padding: 0 !important; }
tr.lg-client.internal > td { background: var(--ac-ivory-deep, #EFE9DB); }
tr.lg-proj > td { background: #fff; padding: 0 !important; }
.lg-tog { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 9px 10px; text-align: left; cursor: pointer; font: inherit; color: var(--ac-ink); }
.lg-tog:hover, .lg-tog:focus-visible { background: var(--ac-green-tint); outline: none; }
tr.lg-proj .lg-tog { padding: 6px 10px 6px 34px; }
.lg-car { display: inline-block; transition: transform .12s var(--ease); color: var(--ac-ink-soft); width: 12px; }
.lg-tog[aria-expanded="true"] .lg-car { transform: rotate(90deg); }
.lg-name { font-weight: 700; color: var(--ac-green); }
.lg-pname { font-weight: 600; }
.lg-count { color: var(--ac-ink-soft); font-size: var(--fs-xs); }
.lg-due { margin-left: auto; font-size: var(--fs-xs); color: var(--ac-ink-soft); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; }
.lg-due.over { color: #6e3426; background: var(--danger-tint); border-color: #e2c3b9; font-weight: 700; }
tr.lg-item > td:first-child { padding-left: 22px; }
tr.lg-item[hidden], tr.lg-proj[hidden], tr.po-exp-row[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lg-car { transition: none; } }

/* ---------------------------------------------------------------------------
   Modules 355–356 — catalogue picker, "Not in the catalogue? Add it", Items
   --------------------------------------------------------------------------- */
.cat-host { position: relative; }
.cat-pop { position: absolute; z-index: 6600; left: 0; top: calc(100% + 2px); width: max(420px, 100%); max-width: min(620px, 92vw); max-height: 340px; overflow: auto;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 4px; }
.cat-pop[hidden] { display: none; }
.cat-h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-soft); padding: 6px 8px 2px; }
.cat-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; font: inherit; }
.cat-opt:hover, .cat-opt.on { background: var(--ac-green-tint); }
.cat-t { font-weight: 600; font-size: var(--fs-sm); }
.cat-m { font-size: var(--fs-xs); color: var(--ac-ink-soft); }
.cat-empty { padding: 8px; color: var(--ac-ink-soft); font-size: var(--fs-sm); }
.cat-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.cat-add { width: 100%; text-align: left; background: none; border: 0; padding: 7px 8px; color: var(--ac-green); font-weight: 600; cursor: pointer; border-radius: var(--r-sm); font: inherit; }
.cat-add:hover { background: var(--ac-green-tint); }
input.cat-linked { border-color: var(--ac-success); background: var(--ok-tint); }
.po-notincat { color: #8a5a00; }
.qa-card { width: min(640px, 100%); }
.qa-card.wide, .ol-card.wide { width: min(760px, 100%); }
.qa-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.qa-grid label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: var(--fs-sm); min-width: 0; }
.qa-grid label.wide, .qa-grid .wide { grid-column: 1 / -1; }
.qa-grid label.qa-check { flex-direction: row; align-items: center; gap: 8px; }
.qa-grid [hidden] { display: none !important; }
.qa-grid details { border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 10px; }
.qa-grid details summary { cursor: pointer; font-weight: 600; }
.qa-dups { background: var(--warn-tint); border-radius: var(--r-md); padding: 8px 12px; }
.qa-dups ul { margin: 6px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.qa-dups li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 640px) { .qa-grid { grid-template-columns: 1fr 1fr; } }
.ms-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px; background: var(--surface); margin: 0 0 10px; }
.ms-seg-btn { border: 0; background: none; padding: 5px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ac-ink-soft); cursor: pointer; }
.ms-seg-btn.on { background: var(--ac-green); color: #fff; }
#sales-materialsales [hidden] { display: none !important; }
.is-list tr[data-is-open], .is-sup tr[data-is-open] { cursor: pointer; }
.is-list tr[data-is-open]:hover, .is-list tr[data-is-open]:focus-visible { background: var(--ac-green-tint); outline: none; }
.is-inactive { opacity: .55; }
.is-warn { color: #8a5a00; font-weight: 600; }
.is-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--ac-brass); color: #fff; font-size: var(--fs-xs); }
.is-sec { font: 600 15px var(--font-display); color: var(--ac-green); margin: 10px 0 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.is-sec:first-of-type { border-top: 0; padding-top: 0; }
.is-unit { display: flex; gap: 4px; }
.is-unit input { flex: 1; min-width: 0; }
.is-unit select { width: 64px; }
.is-margin { align-self: end; font-size: var(--fs-sm); color: var(--ac-ink-soft); padding-bottom: 8px; }
.is-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.is-reqs li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; }
.sup-items { margin-bottom: 8px; }

/* ---------------------------------------------------------------------------
   Module 358 — bulk import orders, containers, landed cost, payments due
   --------------------------------------------------------------------------- */
.im-card { width: min(1000px, 100%); max-height: 92vh; }
.im-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.im-head h3 { margin: 0; }
.im-x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ac-ink-soft); padding: 2px 6px; }
.im-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.im-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 12px; font-weight: 600; color: var(--ac-ink-soft); cursor: pointer; font: inherit; }
.im-tabs button.on { color: var(--ac-green); border-bottom-color: var(--ac-green); }
.im-card [hidden] { display: none !important; }
.im-checks { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.im-checks .qa-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); }
.im-bond, .im-ff { display: flex; gap: 8px; padding-left: 26px; }
.im-lines-wrap { overflow-x: auto; }
.im-lines td { vertical-align: top; }
.im-item input, .im-item select { width: 100%; min-width: 150px; margin-bottom: 3px; }
.im-new { display: flex; flex-direction: column; }
.im-done { opacity: .6; }
.im-rec { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.im-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--info-tint); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin: 0 0 12px; font-size: var(--fs-sm); }
.im-h4 { margin: 4px 0 8px; font: 600 17px var(--font-display); color: var(--ac-green); }
.im-bulk { cursor: pointer; }
.im-payline { margin: 6px 0; font-size: var(--fs-sm); font-weight: 600; }
.im-terms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: var(--fs-sm); }
.im-sub td { font-size: var(--fs-xs); color: var(--ac-ink-soft); padding-top: 0 !important; }
.im-cont { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 6px; cursor: pointer; }
.im-cont:hover { background: var(--surface-sunk); }
.im-weeks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.im-week { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 10px; font-size: var(--fs-xs); min-width: 120px; }
.im-week b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.im-week.over { background: var(--danger-tint); border-color: #e2c3b9; color: #6e3426; }
tr.im-over td { background: var(--danger-tint); }
.im-pobox { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin: 10px 0; }

/* ---------------------------------------------------------------------------
   Module 360 — the map: no tile seams, and the court finder on / off
   --------------------------------------------------------------------------- */
/* Tiles overlap by one pixel (see mapLayers.js), so the blend-mode workaround
   Leaflet ships would brighten that pixel — plain compositing instead. */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
/* Google's tiles are a div holding the picture (and the labels on Hybrid). */
.agile-gm .leaflet-tile > img { width: calc(100% + 1px) !important; height: calc(100% + 1px) !important; }
.map-court-btn[aria-pressed="true"] { background: var(--ac-green-tint, #e6efe8); border-color: var(--ac-green, #1E3D2B); color: var(--ac-green, #1E3D2B); }
.court-head { display: flex; align-items: center; }
.court-head .court-toggle { flex: 1; border-radius: 0 0 0 10px; }
.court-off { flex: none; width: 34px; align-self: stretch; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--muted, #647380); cursor: pointer; border-radius: 0 0 10px 0; }
.court-off:hover, .court-off:focus-visible { background: rgba(30, 61, 43, .08); color: var(--ac-ink, #1b2a21); outline: none; }
.map-court-btn[hidden], .court-bar[hidden] { display: none !important; }
.ts-field .ts-saved { font: 400 12px var(--font-text); }   /* module 364 */

/* Module 391 — the crew planner after Evan and Dani's call (15 Oct): one row a
   person, jobs that fold to one line, the job's band drags the whole job. */
.crp-fold-btn { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: color-mix(in srgb, var(--jc, var(--ac-green)) 80%, #000); font-size: 12px; line-height: 20px; cursor: pointer; }
.crp-fold-btn:hover, .crp-fold-btn:focus-visible { background: color-mix(in srgb, var(--jc, var(--ac-green)) 14%, transparent); outline: none; }
.crt-row.head .crt-lab { gap: 4px; padding-left: 5px; }
.crp-folded { z-index: 2; align-self: center; justify-self: start; margin: 0 10px; padding: 1px 9px; border: 1px dashed color-mix(in srgb, var(--jc) 45%, transparent); border-radius: var(--r-pill); background: #fff;
  font: 600 var(--fs-xs) var(--font-body, inherit); color: color-mix(in srgb, var(--jc) 80%, #000); cursor: pointer; white-space: nowrap; }
.crt-job.folded .crt-row.head { height: 44px; }
.crt-mini { position: absolute; bottom: 4px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--jc) 70%, #fff); pointer-events: none; opacity: .85; }
.crt-band.movable, .crt-ph.movable { cursor: ew-resize; touch-action: none; }
.crt-band.movable:hover { background: color-mix(in srgb, var(--jc) 20%, transparent); }
.crt-dbl { flex: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ac-error); background: var(--danger-tint); border-radius: var(--r-pill); padding: 1px 6px; cursor: help; }
.crt-row.dbl { border-bottom: 1px dashed var(--line); }
.crp-bk-ph { flex: none; font-size: 10px; color: var(--ac-ink-soft); margin-left: 2px; }
.crp-menu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 4px; }
.crp-menu button.crp-m-del { color: var(--ac-error); font-weight: 600; }
.crp-away-tag { font-weight: 700; color: #8a5a00; }
.crp-side [data-act="ask-timeoff"] { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   Module 405 — what the shipment is for, and changing its route
--------------------------------------------------------------------------- */
.po-route { display: flex; flex-direction: column; gap: var(--s-2); grid-column: 1 / -1; }
.rt-q { font-weight: 600; }
.rt-req { font-size: var(--fs-xs); font-weight: 500; color: #7A5D1E; background: var(--warn-tint); border-radius: var(--r-pill); padding: 1px 8px; margin-left: 4px; }
.rt-help, .rt-steps { margin: 0; }
.rt-steps { font-size: var(--fs-sm); }
.rt-all { display: flex; align-items: center; gap: var(--s-2); font-weight: 400; font-size: var(--fs-sm); }
.rt-all input { width: auto; margin: 0; }
.rt-warn { background: var(--danger-tint); color: #77392D; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
.rt-now { margin: var(--s-1) 0; }
.ship-route-line { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: calc(-1 * var(--s-1)) 0 var(--s-3); font-size: var(--fs-sm); }
.rt-review { background: var(--warn-tint); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; }
.rt-review ul { flex: 1 1 100%; margin: var(--s-2) 0 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.rt-review li .btn { margin-left: var(--s-2); }
.rt-review [data-rt-hide] { margin-left: auto; }
.rt-done { font-size: var(--fs-xs); background: var(--surface); border-radius: var(--r-pill); padding: 1px 8px; }
.rt-back .ol-card label { display: flex; flex-direction: column; gap: 4px; margin: var(--s-2) 0; }
.rt-back .ol-card label.rt-all { flex-direction: row; }

/* Module 435 — "Can't find your job?" on the timesheet */
.ts-findjob { margin: 10px 2px 4px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.ts-findjob-btn { background: none; border: 0; padding: 0; font: 600 14px var(--font-body, inherit); color: var(--ac-green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ts-findjob-btn:focus-visible { outline: 2px solid var(--ac-green); outline-offset: 3px; border-radius: 2px; }
.ts-findjob-card { width: min(560px, 100%); max-height: min(86vh, 760px); }
.ts-findjob-q { width: 100%; padding: 9px 11px; border: 1px solid #cfd6cc; border-radius: 8px; font-size: 15px; }
.ts-findjob-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.ts-findjob-row { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 9px 10px; border: 1px solid #e3e7e1; border-radius: 8px; }
.ts-findjob-row b { font-weight: 600; }
.ts-findjob-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
@media (max-width: 560px) { .ts-findjob-row { flex-direction: column; align-items: stretch; } .ts-findjob-acts { justify-content: flex-start; } }

/* Module 454 — the note under the file box on a Team profile. */
.td-read-note { margin: 4px 0 8px; }

/* Module 497 — Freight Forwarders directory and "+ Add freight forwarder" */
.ff-back { z-index: 6600; }
.ff-card { width: min(620px, 100%); }
.ff-card.ff-dir { width: min(920px, 100%); max-height: 92vh; }
.ff-card [hidden] { display: none !important; }
.ff-sub { font-weight: 600; margin-top: 4px; }
.ff-contact { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.ff-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ff-tools input[type=search] { flex: 1 1 220px; }
.ff-row { display: flex; gap: 14px; justify-content: space-between; border: 1px solid var(--line, #e3e8e4); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.ff-row.ff-arch { opacity: .65; }
.ff-main { min-width: 0; flex: 1; }
.ff-c { font-size: 13px; }
.ff-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; white-space: nowrap; }
.ff-tbc { background: #fff4dc; color: #8a5a00; border: 1px solid #f0d08a; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ff-tbc[hidden] { display: none; }
@media (max-width: 640px) {
  .ff-contact { grid-template-columns: 1fr 1fr; }
  .ff-row { flex-direction: column; }
  .ff-nums { align-items: flex-start; }
}

/* Module 498 — direct courier orders */
.dc-badge { display: inline-block; background: #e6f1fb; color: #1d4f86; border: 1px solid #b9d3ef; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.dc-badge.amber { background: #fff4dc; color: #8a5a00; border-color: #f0d08a; }
.dc-back { z-index: 6500; }
.dc-card { width: min(760px, 100%); max-height: 92vh; }
.dc-card [hidden] { display: none !important; }
.dc-card .dc-wide { grid-column: 1 / -1; }
.dc-lines input { width: 100%; }
.dc-detail { background: #f3f8fd; border: 1px solid #d3e4f5; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.rt-dest { background: #f6faf7; border: 1px solid #d8e7dc; border-radius: 10px; padding: 8px 12px; margin: 6px 0; font-size: 13px; }
.dc-mob { margin: 8px 0; }
.dc-mob-line { margin-bottom: 6px; }
.dc-deliver label { display: block; margin-bottom: 8px; }
.dc-deliver input { width: 100%; }

/* Module 499 — Travel → Receipts: the four facts, highlighted, and the PDF button */
.tb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: #eef5ef; border: 1px solid #cfe0d3; border-radius: 10px; padding: 10px 12px; }
.tb-facts > div { min-width: 0; }
.tb-facts > div > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #5f6b60; font-weight: 600; }
.tb-facts b { display: block; font-size: 15px; color: #1d3a26; overflow-wrap: anywhere; }
.tb-facts b.tb-spent { font-size: 18px; }
.tb-facts small { display: block; font-weight: 400; font-size: 12px; color: #5f6b60; }
.tb-facts .tb-unset { color: #9a6a00; font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; }
.tb-card .tb-what, .tb-card .tb-email { overflow-wrap: anywhere; }
.tb-pdfrow { margin: 6px 0 2px; }
.tb-att { display: inline-flex; gap: 2px; align-items: center; max-width: 100%; }
.tb-att .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; height: auto; line-height: 1.35; }
/* Module 500 — nothing on a Receipts card is wider than the card (a long attachment name used to push the box out). */
.tb-card > *, .tb-email > *, .tb-files > * { min-width: 0; max-width: 100%; }
.tb-files .btn { white-space: normal; overflow-wrap: anywhere; text-align: left; height: auto; }
.tb-facts { width: 100%; box-sizing: border-box; }
@media (max-width: 520px) { .tb-facts { grid-template-columns: 1fr; } }

/* Module 502 — one card per flight itinerary; red = no return, blue = changes required? */
.tb-flag.blue { background: #e3effc; color: #1d4f86; }
.tb-card.red { border: 2px solid #c0392b; background: #fdf1ef; }
.tb-card.review { border: 2px solid #3b7dd8; background: #f2f7fe; }
.tb-journey { border-top: 1px solid var(--line); padding-top: 6px; }
.tb-journey-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5f6b60; margin-bottom: 4px; }
.tb-leg { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; font-size: 13px; padding: 3px 0; }
.tb-leg .tb-more { grid-column: 1 / -1; }
.tb-leg.cancelled { opacity: .6; text-decoration: line-through; }
.tb-leg-when { font-weight: 600; }
.tb-leg-what { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 520px) { .tb-leg { grid-template-columns: 1fr auto; } .tb-leg-what { grid-column: 1 / -1; } }

/* Module 503 — change or cancel a ticket as a whole */
.tb-ticket { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.tb-ticket h4 { margin: 4px 0 0; font-size: 13px; }
.tb-ticket-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb-ticket-row select { max-width: 100%; min-width: 0; flex: 1 1 220px; }
.tb-dupes { margin: 0; font-size: 12px; }
.tb-leg { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
/* Cards keep their own height (a tall card no longer stretches its neighbours) and nothing inside is wider than the card. */
.tb-list { align-items: start; }
.tb-card { align-content: start; }
.tb-card .tb-more, .tb-ticket, .tb-ticket > *, .tb-change, .tb-change > *, .tb-grid > * { min-width: 0; }
.tb-change input, .tb-change select, .tb-change textarea, .tb-ticket input, .tb-ticket select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.tb-card .tb-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
/* Module 505 — an earlier version of a re-issued ticket */
.tb-replaced { font-size: 12.5px; border-top: 1px dashed var(--line); padding-top: 6px; }
.tb-replaced summary { cursor: pointer; color: #6b6458; }
/* Module 507 — a flight ticket as one card in My itinerary (the phone) */
.tb-mine-trip { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); padding: 10px 12px; display: grid; gap: 6px; min-width: 0; }
.tb-mine-trip.cancelled { opacity: .65; }
.tb-mine-trip-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.tb-mine-j { border-top: 1px solid var(--line); padding-top: 6px; }
.tb-mine-leg { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 10px; font-size: 13.5px; padding: 3px 0; }
.tb-mine-leg span { overflow-wrap: anywhere; }
.tb-mine-leg.cancelled { text-decoration: line-through; opacity: .6; }
.tb-mine-trip .tb-mine-what { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Module 510 — time-off requests waiting in Crew Time */
.ct-waiting { background: #fff4dc; border: 1px solid #f0d08a; color: #7a5200; border-radius: 8px; padding: 8px 12px; margin: 0 0 8px; }
.mini-row.ct-req { background: #fffaf0; border-left: 3px solid #e2b65c; padding-left: 8px; }
.mini-row.ct-declined { opacity: .6; }
.ct-chip-wait { background: #f0d08a !important; color: #5a3d00 !important; }
.ct-chip-no { background: #e6c9c5 !important; color: #7a1f14 !important; }
.ct-chip-ok { background: #cfe5d4 !important; color: #1d3a26 !important; }
/* Module 511 — Crew Time search and days-off totals; calendar time-off summary */
.ct-search { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.ct-search input[type=search] { flex: 1 1 260px; }
.ct-search select { width: auto; }
.ct-totals { margin-bottom: 12px; }
.cal-summary { background: #eef5ef; border: 1px solid #cfe0d3; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }

/* Module 513 — finished items per client: "2 open · 1 finished (show)", shown greyed in place */
.lg-head { display: flex; align-items: center; }
.lg-head > .lg-tog { flex: 1; min-width: 0; }
.lg-done-tog { padding: 0 2px; color: var(--ac-green, #1E3D2B); text-decoration: underline; cursor: pointer; border-radius: 3px; }
.lg-done-tog:focus-visible { outline: 2px solid var(--ac-green, #1E3D2B); }
.lg-done-tog:hover { color: var(--ac-ink, #1F241E); }
tr.lg-item.lg-done > td, tr.po-exp-row.lg-done > td { opacity: .55; background: var(--surface-sunk, #f4f1ea); }
tr.lg-item.lg-done:hover > td { opacity: .8; }
.po-noship, .ship-noorder { color: #8a5a12 !important; font-style: italic; }

/* Module 514 — the packing list window and the paperwork line */
.pl-back .ci-lines input { width: 100%; min-width: 70px; }
.pl-back .ci-lines .pl-gross { min-width: 60px; }
.pl-k2 { margin-top: 8px; }
.pl-stale { background: #fff1d6; }
.pl-paperwork { margin: 10px 0 0; }
.pl-flag { color: #8a5a12; font-weight: 600; }

/* Module 515 — change orders: weekly until agreed; on the next invoice once agreed */
.co515 { margin: 10px 0; padding: 8px 12px; border-radius: 6px; font-size: 13px; line-height: 1.5; }
.co515.wait { background: #fff6e5; border: 1px solid #ecd29a; }
.co515.ok { background: #eef5ee; border: 1px solid #c4dcc6; }
.co515-add { display: block; color: #1E3D2B; font-weight: 600; }

/* Module 516 — the client pays lodging / meals / rental car: shown on the Invoicing panel */
.cc516 { display: block; color: #8a5a12; font-weight: 600; }

/* Module 518 — the packing list signed on receipt */
.plr-card { width: min(640px, 100%); }
.plr-tabs { display: flex; gap: 8px; margin: 8px 0 12px; }
.plr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.plr-grid label, .plr-photo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.plr-photo { margin-top: 12px; }
.plr-sig-wrap { margin-top: 12px; }
.plr-sig { width: 100%; height: 170px; border: 1px solid var(--line-strong, #cfc7b6); border-radius: 6px; background: #fff; touch-action: none; display: block; margin: 6px 0; }
.pl-signed { color: #1E3D2B; font-weight: 600; margin: 0 6px; }
@media (max-width: 560px) { .plr-grid { grid-template-columns: 1fr; } }
.plr-card label > .adv-must, .plr-card label > .hint { align-self: flex-start; }

/* Module 519 — build a route from steps */
.rt-build { margin: 4px 0 8px; }
.rtb-card { width: min(860px, 100%); }
.rtb-strip { background: #f3f7f2; border: 1px solid #c4dcc6; border-radius: 6px; padding: 8px 12px; margin: 8px 0 12px; font-weight: 600; color: #1E3D2B; }
.rtb-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; max-height: 52vh; overflow: auto; }
.rtb-add { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line, #e6e0d3); border-radius: 6px; padding: 6px 10px; margin: 0 0 6px; cursor: pointer; font: inherit; }
.rtb-add:hover:not([disabled]) { border-color: #1E3D2B; }
.rtb-add[disabled] { opacity: .45; cursor: default; }
.rtb-list { margin: 0; padding-left: 22px; }
.rtb-list li { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; }
.rtb-list li > span { flex: 1; }
@media (max-width: 640px) { .rtb-cols { grid-template-columns: 1fr; } }
.rtb-card > label:not(.ci-check) { display: block; margin-top: 6px; }
.rtb-card > label:not(.ci-check) input { width: 100%; margin-top: 4px; }

/* Module 520 — the Warehouse page (phone first) */
#wdRoot { max-width: 1100px; margin: 0 auto; padding: 8px 12px 40px; }
.wd-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wd-head h2 { margin: 4px 0; }
.wd-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line, #e6e0d3); margin: 8px 0 12px; overflow-x: auto; }
.wd-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; font: inherit; font-weight: 600; color: var(--ac-ink-soft, #5a6157); cursor: pointer; white-space: nowrap; }
.wd-tabs button[aria-selected="true"] { color: #1E3D2B; border-bottom-color: #1E3D2B; }
.wd-badge, .wd-navbadge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #1E3D2B; color: #fff; font-size: 12px; text-align: center; }
.wd-badge.late, .wd-navbadge.late { background: #a13a26; }
.wd-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wd-row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; background: #fff; border: 1px solid var(--line, #e6e0d3); border-left: 4px solid #cfc7b6; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.wd-row.due-late { border-left-color: #a13a26; }
.wd-row.due-today { border-left-color: #c9871f; }
.wd-row-main { min-width: 0; flex: 1; }
.wd-row-sub { font-size: 13px; margin-top: 3px; color: var(--ac-ink-soft, #5a6157); }
.wd-due.late { color: #a13a26; font-weight: 700; }
.wd-due.today { color: #8a5a12; font-weight: 700; }
.wd-due.none { color: #8d8d8d; }
.wd-onward { color: #1E3D2B; font-weight: 600; }
.wd-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #eef5ee; color: #1E3D2B; border: 1px solid #c4dcc6; }
.wd-chip.bond { background: #fff6e5; color: #8a5a12; border-color: #ecd29a; }
.wd-chip.warn { background: #fde9e4; color: #a13a26; border-color: #e2c3b9; }
.wd-lines { font-size: 13px; margin-top: 4px; }
.wd-empty { padding: 20px 0; }
.wd-card { width: min(600px, 100%); }
.wd-card.wide { width: min(760px, 100%); }
.wd-card label { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13px; }
.wd-card label.ci-check { flex-direction: row; align-items: center; }
.wd-card label > .adv-must { align-self: flex-start; }
.wd-count { max-height: 44vh; overflow: auto; border: 1px solid var(--line, #e6e0d3); border-radius: 6px; padding: 4px 10px; margin-top: 6px; }
.wd-cline { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; }
.wd-cline input { width: 96px; font-size: 16px; }
.wd-cline input.wd-diff { border-color: #c9871f; background: #fff6e5; }
.wd-cond { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.wd-cond label { flex-direction: row; align-items: center; margin: 0; }
.wd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wd-stockbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.wd-stockbar input[type=search] { flex: 1; min-width: 160px; }
.wd-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line, #e6e0d3); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; }
.wd-qty { font-size: 18px; font-weight: 700; white-space: nowrap; }
.wd-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wd-acts.col { flex-direction: column; align-items: stretch; min-width: 150px; }
.wd-group { margin-bottom: 14px; }
.wd-settings { margin-top: 14px; font-size: 13px; }
@media (max-width: 640px) {
  .wd-row { flex-direction: column; }
  .wd-row > .btn, .wd-acts.col { width: 100%; }
  .wd-item { grid-template-columns: minmax(0, 1fr) auto; }
  .wd-item .wd-acts { grid-column: 1 / -1; justify-content: stretch; }
  .wd-item .wd-acts .btn { flex: 1; }
  .wd-two { grid-template-columns: 1fr; }
}

/* Module 521 — + New category */
.cat-card { max-width: 520px; }
.cat-card label { display: block; margin: 8px 0; }
.cat-card input, .cat-card select { width: 100%; }
.cat-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-similar { margin: 8px 0; }
.cat-req { background: #fff8e6; border: 1px solid #ecd9a6; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.cat-req-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; border-top: 1px dashed #ecd9a6; }
.cat-req-row:first-of-type { border-top: 0; }

/* Module 522 — pick from stock; Prepare (scan) */
.pk-picker { border: 1px solid var(--line, #e6e0d3); border-radius: 6px; padding: 8px; margin-top: 8px; background: #fbfaf6; }
.pk-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.pk-head input { flex: 1; min-width: 140px; }
.pk-list { max-height: 320px; overflow-y: auto; }
.pk-item, .pk-line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #eee; }
.pk-item input { width: 70px; }
.pk-item.out { opacity: .6; }
.pk-photo { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: #eee; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #888; }
.pk-card { max-width: 640px; width: 100%; }
.pk-scan { position: relative; background: #111; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 260px; }
.pk-scan video { width: 100%; height: 100%; object-fit: cover; }
.pk-msg { min-height: 1.4em; margin: 6px 0; font-weight: 600; }
.pk-msg.good { color: #1f7a3a; } .pk-msg.bad { color: #b3261e; }
.pk-type { display: flex; gap: 6px; margin-bottom: 6px; } .pk-type input { flex: 1; }
.pk-line { grid-template-columns: 48px minmax(0, 1fr) auto; }
.pk-line.done { background: #eef8f0; } .pk-line.packed { opacity: .7; }
.pk-count { font-variant-numeric: tabular-nums; margin-left: 6px; }
.pk-warn { color: #8a5a00; font-size: .85em; }
.pk-acts { display: flex; flex-direction: column; gap: 4px; }
.pk-hand { border: 1px dashed #cfc7b6; border-radius: 6px; padding: 8px; margin: 6px 0; }
.pk-hand label, .pk-photo-in { display: block; margin: 6px 0; }
@media (max-width: 640px) { .pk-item { grid-template-columns: 40px minmax(0, 1fr); } .pk-item input, .pk-item .btn { grid-column: span 1; } .cat-two { grid-template-columns: 1fr; } }

/* Module 523 — the task a notification pointed at, lit up in My Tasks */
@keyframes taskFlash { 0%, 60% { background: #fff1c2; box-shadow: 0 0 0 2px #e0b84a; } 100% { background: transparent; box-shadow: none; } }
.task-row-flash { animation: taskFlash 4.5s ease-out; border-radius: 6px; }

/* Module 524 — Customer cards fit the screen (Mikel, 3 Nov 2026: "make this
   fit so it doesn't get cut off"). When the client card is open the list is
   narrow: Owner and Open fold under the company name, cells tighten, the
   Quote button never wraps, and the card's own content wraps inside its pane. */
#sales-customers .list-pane { container-type: inline-size; }
#customerTable th, #customerTable td { padding: 9px 10px; }
#customerTable .cust-quote-cell { white-space: nowrap; width: 1%; }
#customerTable td:first-child strong { overflow-wrap: anywhere; }
.cust-narrow-meta { display: none; color: var(--muted, #6b6b6b); font-size: 0.78rem; }
@container (max-width: 680px) {
  #customerTable .cust-col-owner, #customerTable .cust-col-open { display: none; }
  #customerTable .cust-narrow-meta { display: block; margin-top: 2px; }
}
@container (max-width: 430px) {
  #customerTable th:nth-child(2), #customerTable td:nth-child(2) { display: none; }
}
#detailPane { overflow-wrap: anywhere; }
#detailPane * { max-width: 100%; }
#detailPane .btn, #detailPane button { white-space: normal; }
#detailPane img, #detailPane table { max-width: 100%; }