/* ===========================================================================
   Agile Courts — CRM brand layer (Module 128)
   Brand Standards, First Edition (August 2026) · BRAND.md, 20 Sep 2026

   Loaded AFTER style.css. It re-points the app's tokens at the brand palette
   and type, so every module that already uses var(--teal), var(--navy),
   var(--sand) simply comes out in brand colours. Client documents already
   had this treatment (brand-document.css); this file is the CRM chrome.

   §07 Colour — one strong colour, held quietly. Forest Green carries the
   brand; ivory grounds; sand for rules; ink for text, never pure black.
   Turquoise and gold are photography only — the old teal/navy/coral go.
   §08 Type — Cormorant Garamond 500–600 for titles, Montserrat Light/Regular
   for everything else; letterspaced uppercase for labels only.
   §03 — "Agile Courts", never in capitals; the motto in quotation marks.
   ======================================================================== */

:root {
  /* Brand palette */
  --ac-green: #1E3D2B;
  --ac-ivory: #F6F2E8;
  --ac-sand: #D8CCB4;
  --ac-ink: #1F241E;
  --ac-brass: #96783E;
  /* Derived tints — the only extra colours the CRM may use */
  --ac-green-tint: #E7EDE8;      /* selected rows, active pills */
  --ac-green-deep: #16301F;      /* hover on green */
  --ac-sand-light: #EAE2D2;      /* borders on white */
  --ac-sand-pale: #F1EBDD;       /* table stripes, quiet surfaces */
  --ac-ink-soft: #5E665C;        /* secondary text */
  --ac-ivory-deep: #EFE9DB;      /* the ground behind a panel */
  /* Functional colours (BRAND.md §2) — desaturated on purpose */
  --ac-success: #3E6B4F;
  --ac-warning: #9C7A2F;
  --ac-error: #8C4A3C;
  --ac-info: #4A5D6B;
  /* The tennis ball, for the one place it appears */
  --ac-ball: #DCD98A;

  /* --- re-point the app's tokens ---------------------------------------- */
  --navy: var(--ac-green);
  --teal: var(--ac-green);
  --teal-light: var(--ac-green-tint);
  --sand: var(--ac-ivory);
  --ink: var(--ac-ink);
  --muted: var(--ac-ink-soft);
  --border: var(--ac-sand-light);
  --danger: var(--ac-error);
  --white: #FFFFFF;
  /* Map regions are data colours, not brand accents; kept but quietened */
  --caribbean: var(--ac-green);
  --usa: var(--ac-info);
  --southamerica: var(--ac-warning);
  --other: #7A7F78;

  --font-display: 'Cormorant Garamond', 'Adobe Garamond Pro', Garamond, 'Times New Roman', serif;
  --font-text: 'Montserrat', 'Segoe UI Light', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --label-tracking: 0.12em;
}

/* --- type ------------------------------------------------------------------ */
body { font-family: var(--font-text); font-weight: 400; color: var(--ac-ink); background: var(--ac-ivory); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, .view > h2, .subview > h2, .modal h2, .card > h3, .pv-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; color: var(--ac-green);
}
h1 { font-size: 1.9rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.15rem; }
/* Small labels and eyebrows stay Montserrat, letterspaced uppercase, never bold-black */
th, .pipeline-col-head h4, .pipeline-rail-group, .cc-tab-btn, .ce-lab, .pv-meta th, .label, label.eyebrow {
  letter-spacing: var(--label-tracking); font-weight: 500;
}

/* --- the top bar: ivory on green, the formal lockup ------------------------ */
.topbar { background: var(--ac-green); color: var(--ac-ivory); }
.topbar { gap: 16px; padding: 12px 20px; }
.brand, .brand-home { color: var(--ac-ivory); background: transparent; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.10em; white-space: nowrap; }
.brand-home:hover { background: rgba(246,242,232,0.10); }
.brand-home.active { background: rgba(246,242,232,0.14); }
.brand span { color: var(--ac-sand); font-family: var(--font-text); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; margin-left: 8px; vertical-align: 2px; }
.tab-btn { color: rgba(246,242,232,0.82); font-weight: 400; font-size: 0.9rem; padding: 7px 11px; }
.tabs { gap: 2px; }
/* Two deliberate rows: Sales Pipeline · Project Management · Procurement · Stock · Shipping
   above, Agile Chat · Map · Mobile · Admin below (Evan, 20 Sep 2026). */
.tabs-break { flex-basis: 100%; height: 0; }
.topbar.nav-open .tabs-break { display: none; }
.tab-btn:hover { background: rgba(246,242,232,0.10); }
.tab-btn.active { background: var(--ac-ivory); color: var(--ac-green); font-weight: 500; }
.topbar select, .topbar .btn { background: rgba(246,242,232,0.10); color: var(--ac-ivory); border-color: rgba(246,242,232,0.35); }
.subtab-btn.active { color: var(--ac-green); border-bottom-color: var(--ac-green); }
.btn.primary { background: var(--ac-green); border-color: var(--ac-green); color: var(--ac-ivory); }
.btn.primary:hover { background: var(--ac-green-deep); }
a { color: var(--ac-green); }
:focus-visible { outline: 2px solid var(--ac-green); outline-offset: 2px; }
.location-table tr.group-header td { background: var(--ac-sand-pale); color: var(--ac-green); }
.location-table thead th { background: var(--ac-sand-pale); }

/* --- the tennis ball where the bell was ------------------------------------- */
.gnotif-bell { border-color: rgba(246,242,232,0.30); color: var(--ac-ball); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; padding: 0; }
.gnotif-bell .ball { width: 20px; height: 20px; display: block; }
.gnotif-bell.has-new .ball circle { fill: var(--ac-ball); }
.gnotif-bell.has-new .ball path { stroke: var(--ac-green); }
.gnotif-badge { background: var(--ac-error); }
.gnotif-sound { font-size: 0.72rem; font-weight: 400; color: var(--ac-ink-soft); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.gnotif-sound input { margin: 0; }

/* --- the small court-builder touches ---------------------------------------- */
.pipeline-col-head h4 { font-size: 0.66rem; letter-spacing: 0.08em; font-weight: 500; color: var(--ac-green); }
/* Every rule is a baseline with its 4″ centre mark */
.baseline-rule { position: relative; height: 1px; background: var(--ac-sand); margin: 0; }
.baseline-rule::after { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 7px; background: var(--ac-ink-soft); }
.pipeline-col-head { border-bottom: 0; position: relative; }
.pipeline-col-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ac-sand); }
.pipeline-col-head::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 7px; background: var(--ac-ink-soft); z-index: 1; }
.pipeline-card-foot { border-top-color: var(--ac-sand-light); position: relative; }
.pipeline-card-foot::before { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 7px; background: var(--ac-sand); }
.pipeline-rail-group { position: sticky; border-bottom: 1px solid var(--ac-sand); }
.pipeline-rail-row { border-top-color: var(--ac-sand-light); }
/* The card's edge is the client's court colour (set inline from the quote) */
.pipeline-card { border-left-width: 4px; background: #FFFFFF; }
.pipeline-card.age-ok { border-left-color: var(--court, var(--ac-sand)); }
.pipeline-card.age-warn { border-left-color: var(--court, var(--ac-warning)); }
.pipeline-card.age-bad { border-left-color: var(--court, var(--ac-error)); }
.pipeline-age.warn { color: var(--ac-warning); }
.pipeline-age.bad { color: var(--ac-error); font-weight: 700; }
.pipeline-tag.court { color: var(--ac-ink); background: var(--ac-sand-pale); text-transform: none; letter-spacing: 0; font-weight: 400; }
.pipeline-tag.court i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
/* Dimensions the way a surveyor writes them */
.dim, .pipeline-card .dim, .pipeline-rail-row .dim { font-variant-numeric: tabular-nums; }
/* The owner's avatar is a small court, not a circle */
.pipeline-avatar { width: 22px; height: 15px; border-radius: 2px; background: var(--ac-green); color: transparent; position: relative; font-size: 0; }
.pipeline-avatar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(246,242,232,0.85); }
.pipeline-owner.none .pipeline-avatar { background: var(--ac-error); }
/* An empty column is a court plan, not "Nothing here" */
.pipeline-empty { display: none; }
.pipeline-court-empty { position: relative; height: 150px; border-radius: 8px; background: #4E5E44; overflow: hidden; margin-bottom: 8px; }
.pipeline-col.is-lost .pipeline-court-empty { background: #6B7A63; }
.pipeline-court-empty .lines { position: absolute; left: 22px; right: 22px; top: 16px; bottom: 16px; border: 1.5px solid rgba(255,255,255,0.55); }
.pipeline-court-empty .lines::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: rgba(255,255,255,0.55); }
.pipeline-court-empty .lines::after { content: ""; position: absolute; left: 18%; right: 18%; top: 25%; bottom: 25%; border: 1.5px solid rgba(255,255,255,0.55); border-top: 0; border-bottom: 0; }
.pipeline-court-empty .lines i { position: absolute; left: 18%; right: 18%; top: 25%; height: 1.5px; background: rgba(255,255,255,0.55); }
.pipeline-court-empty .lines b { position: absolute; left: 18%; right: 18%; bottom: 25%; height: 1.5px; background: rgba(255,255,255,0.55); }
.pipeline-court-empty .lines u { position: absolute; left: 50%; top: 25%; bottom: 25%; width: 1.5px; background: rgba(255,255,255,0.55); }
.pipeline-court-empty span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
/* Fence mesh as texture, behind the login card only */
.login-card, .auth-card { background-color: #FFFFFF; }
.login-mesh { background-color: var(--ac-green); background-image: linear-gradient(60deg, rgba(246,242,232,0.06) 1px, transparent 1px), linear-gradient(-60deg, rgba(246,242,232,0.06) 1px, transparent 1px); background-size: 14px 24px; }

/* ---------------------------------------------------------------------------
   Module 256 — Import a signed contract.

   Brand tokens only (BRAND.md §2): the palette above, nothing invented. The
   one place colour carries meaning is the arithmetic panel, where a check that
   does not close has to read as "look at this" without reading as "broken" —
   so it is --ac-warning, the desaturated amber, and never the error red. The
   contract is fine; its rounding is simply worth knowing about.
   ------------------------------------------------------------------------- */
.ci-card {
  background: #fff;
  border: 1px solid var(--ac-sand-light);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.ci-card .subsection-title { margin-top: 0; }

.ci-facts, .ci-lines { width: 100%; border-collapse: collapse; }
.ci-facts th, .ci-lines th {
  text-align: left;
  font-weight: 600;
  color: var(--ac-ink-soft);
  padding: 7px 14px 7px 0;
  vertical-align: top;
  white-space: nowrap;
  width: 1%;
}
.ci-facts td, .ci-lines td { padding: 7px 0; vertical-align: top; }
.ci-facts tr + tr th, .ci-facts tr + tr td,
.ci-lines tr + tr th, .ci-lines tr + tr td { border-top: 1px solid var(--ac-sand-pale); }
.ci-desc { width: auto; }
/* Figures line up under one another or they cannot be read as a column. */
.ci-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 1%;
  padding-left: 18px !important;
}
.ci-lines .ci-total th, .ci-lines .ci-total td {
  border-top: 2px solid var(--ac-green);
  font-weight: 700;
  color: var(--ac-green);
}

.ci-checks { list-style: none; margin: 8px 0 0; padding: 0; }
.ci-checks li { padding: 5px 0; font-variant-numeric: tabular-nums; }
.ci-checks .ci-ok { color: var(--ac-success); }
.ci-checks .ci-off { color: var(--ac-warning); font-weight: 600; }

.ci-ask {
  background: var(--ac-green-tint);
  border-left: 3px solid var(--ac-green);
  padding: 10px 14px;
  margin: 0 0 14px;
  border-radius: 0 4px 4px 0;
}
.ci-warn {
  background: #FBF4E4;
  border-left: 3px solid var(--ac-warning);
  padding: 10px 14px;
  margin: 14px 0 0;
  border-radius: 0 4px 4px 0;
}
.ci-warn ul { margin: 6px 0 0; padding-left: 18px; }
.ci-warn li + li { margin-top: 6px; }

.ci-choices { display: flex; flex-direction: column; gap: 8px; }
.ci-choice {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 2px 6px;
  border: 1px solid var(--ac-sand-light);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  /* The label text can be long; it wraps rather than pushing the radio out
     of the box or spilling past the card's edge. */
  min-width: 0;
}
.ci-choice:hover { border-color: var(--ac-sand); }
.ci-choice.on { border-color: var(--ac-green); background: var(--ac-green-tint); }
.ci-choice input { grid-column: 1; grid-row: 1 / span 2; margin-top: 3px; }
.ci-choice-name { grid-column: 2; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ci-choice .hint { grid-column: 2; margin: 0; min-width: 0; overflow-wrap: anywhere; }

.ci-opt { display: block; margin: 16px 0 4px; }
.ci-opt .hint { display: inline; }

.ci-banner {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  background: var(--ac-green-tint);
  border-left: 3px solid var(--ac-green);
}
.ci-done-card { border-color: var(--ac-green); }
/* Module 272 — imported once, then deleted. Not an error and not a success:
   it is a caution, because the next import creates the contract wherever it
   is pointed and the first one went to the wrong client. */
.ci-banner.ci-again { background: #fdf1dc; border-left-color: var(--ac-warning); }

@media (max-width: 640px) {
  .ci-facts th, .ci-lines th { white-space: normal; }
  .ci-card { padding: 14px; }
}

/* The "choose any client" fallback. Quiet by design — it is the way out when
   the name matching misses, not the primary path. */
.ci-other { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ac-sand-light); }
.ci-other label { color: var(--ac-ink-soft); margin-right: 8px; }
.ci-other select { max-width: 100%; }
.ci-other .hint { margin: 8px 0 0; }

/* ---------------------------------------------------------------------------
   Module 258 — the location dropdown.
   Anchored to the search box, above the map: Leaflet's panes carry high
   z-indexes, and a suggestion list that renders behind the map is a list
   nobody can click.
   ------------------------------------------------------------------------- */
.geo-sugg {
  position: absolute; z-index: 1200; top: 100%; left: 0; right: 0;
  margin-top: 4px; background: #fff;
  border: 1px solid var(--ac-sand-light); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(31, 36, 30, 0.16);
  max-height: 280px; overflow-y: auto; display: none;
}
.geo-sugg.open { display: block; }
.geo-sugg button {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--ac-sand-pale);
  padding: 8px 12px; cursor: pointer; font: inherit;
}
.geo-sugg button:last-child { border-bottom: 0; }
.geo-sugg button:hover, .geo-sugg button.on { background: var(--ac-green-tint); }
.geo-nm { display: block; font-weight: 600; color: var(--ac-ink); }
/* The qualifier is what tells Jolly Harbour, Antigua from Jolly Harbour
   anywhere else, so it is never truncated away to nothing. */
.geo-sub { display: block; font-size: 0.78rem; color: var(--ac-ink-soft); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Module 264 — what is and is not linked to the Cost Catalogue.
   Quieter than module 200's warning above it: that one states a refusal (the
   client's breakdown is held back), this one offers the fix. Amber reads as
   "look at this", never the error red — nothing here is broken.
   ------------------------------------------------------------------------- */
.pe-cat-box {
  border: 1px solid var(--ac-sand-light);
  border-left: 3px solid var(--ac-warning);
  border-radius: 6px;
  background: #FBF7EE;
  padding: 12px 16px;
  margin: 0 0 14px;
}
.pe-cat-box p { margin: 0 0 6px; }
.pe-cat-box p + ul { margin-top: 0; }
.pe-cat-list {
  margin: 4px 0 12px;
  padding-left: 18px;
  /* A long catalogue title wraps rather than widening the editor. */
  overflow-wrap: anywhere;
}
.pe-cat-list li { margin: 3px 0; }
/* Module 292 — the pairs that do not add back to their quoted price. Same
   box as the catalogue and sport notices, because it is the same kind of
   thing: something to look at before this goes to a client, not a failure. */
.pe-price-list {
  margin: 4px 0 12px;
  padding-left: 18px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.pe-price-list li { margin: 5px 0; }
.pe-price-list .hint { display: block; }
.pe-cat-list .hint { display: inline; }
.pe-cat-amb { border-top: 1px solid var(--ac-sand-light); padding-top: 10px; margin-top: 10px; }
/* Each group is its own statement: the offer to fix, the ones nobody can
   decide, the ones the catalogue has never heard of. Run together they read
   as one paragraph and the button looks like it applies to all three. */
.pe-cat-box > .btn { margin: 2px 0 4px; }
.pe-cat-box > .btn + p {
  border-top: 1px solid var(--ac-sand-light);
  margin-top: 14px;
  padding-top: 12px;
}
.pe-cat-ok { color: var(--ac-success); margin: 0 0 12px; }

/* Module 268 — the one line under the Save button that says where it writes.
   Quiet: it is context, not an instruction, and it must not compete with the
   button it explains. */
.bs-note.bs-where { color: var(--ac-ink-soft); }

/* Module 322 — upload a contract; the fields read off it. */
.ci-upload { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ci-upload input[type=file] { display: none; }
.ci-read-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; }
.ci-read-grid label { display: grid; gap: 4px; font-size: 12px; }
.ci-read-grid input { width: 100%; box-sizing: border-box; }
.ci-notes { margin: 0 0 10px; padding: 8px 12px 8px 26px; border-radius: 8px; background: #FBF3E2; color: #6B4E16; font-size: 13px; }
.ci-group th { text-align: left; padding-top: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #1E3D2B; }
.ci-sub { font-size: 11.5px; color: #6B7268; }