/* ═══════════════════════════════════════════════════════════════════════════
   OLAM · FIELD-OPS THEME
   ───────────────────────────────────────────────────────────────────────────
   The final layer. It loads after olam-ticket-theme.css and takes the app the
   rest of the way to the reference design: a quiet slate ground, white cards
   with hairline borders, one violet accent used sparingly, and data drawn as
   data — mono figures, soft status pills, two-line cells with an avatar.

   Nothing here replaces the layers below it. olam-design-system.css still owns
   the primitives, olam-jp-enterprise.css the component structure, and
   olam-ticket-theme.css the token values. This layer restates only the pieces
   the reference redraws: the page head, the KPI card, the filter strip, the
   table body, the detail-page field grid, and the map panels.

   Two rules kept throughout:
     · never hard-code over --olam-primary — client branding is a feature;
     · every colour comes from a token defined below or in the ticket layer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS THIS LAYER ADDS
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* The reference ground is a touch warmer and lighter than pure slate-50. */
  --fo-page: #F7F8FB;
  --fo-card: #FFFFFF;
  --fo-line: #E9EAF0;
  /* hairline between rows and around cards */
  --fo-line-soft: #F1F2F6;
  --fo-head: #FAFAFC;
  /* table head, strip headers */

  --fo-ink: #0F172A;
  --fo-ink-2: #334155;
  --fo-muted: #64748B;
  --fo-faint: #94A3B8;

  /* ── Type ──
     Inter for text, JetBrains Mono for anything read as data: identifiers,
     phone numbers, areas, coordinates, timestamps. Both are webfonts now — the
     mono used to be a system stack, so the same table rendered in Consolas on
     Windows and Menlo on a Mac, at different widths. Restated here (this layer
     loads last) so every layer below agrees on the two faces. */
  --olam-font: 'Inter', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gc-font: 'Inter', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gc-font-figure: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  --gc-font-num: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  --fo-r-sm: 6px;
  --fo-r: 8px;
  --fo-r-lg: 10px;
  --fo-r-xl: 12px;

  /* One height for every control in the app — inputs, selects, Tom Select, the
     searchable combos, and the buttons beside them. §8 is where it is enforced;
     this is the only place the number is written. */
  --fo-control-h: 34px;
  /* One width for every filter control, so a filter row reads as a grid rather
     than a ragged run. The combos carried inline widths of 130px and 140px. */
  --fo-filter-w: 140px;

  --fo-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  --fo-shadow-pop: 0 1px 3px rgb(15 23 42 / 0.10), 0 1px 2px rgb(15 23 42 / 0.06);

  /* Deltas: a rise is emerald, a fall is red. The arrow carries direction as
     well as the colour, so the pair still reads without colour vision. */
  --fo-up: #059669;
  --fo-down: #DC2626;

  /* The Green Carbon green, from BrandingService's default primary — the
     colour in the logo. Deliberately not --olam-primary: that is the client's
     accent and can be repointed from App Settings, while this is the mark. */
  --fo-brand: #059138;
  --fo-brand-dark: #036b29;
}

html[data-theme="dark"] {
  --fo-page: #0B1120;
  --fo-card: #111827;
  --fo-line: #1F2937;
  --fo-line-soft: #172033;
  --fo-head: #0F172A;
  --fo-ink: #F1F5F9;
  --fo-ink-2: #CBD5E1;
  --fo-muted: #94A3B8;
  --fo-faint: #64748B;
  --fo-shadow: 0 1px 2px rgb(0 0 0 / 0.40);
  --fo-shadow-pop: 0 1px 3px rgb(0 0 0 / 0.50);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. PAGE SHELL
   ─────────────────────────────────────────────────────────────────────────── */

/* .content-body is not a class this layout uses — the content wrapper is
   .main-content. These selectors were written against a shell the app does not
   have and never matched anything. The gutter and the vertical rhythm are set
   on .main-content in the block below. */
body,
.main-content,
.main-content .container-fluid {
  background: var(--fo-page);
}

.main-content {
  color: var(--fo-ink-2);
  padding-bottom: 32px;
}

/* ── One gutter, set once ──
   Blocks on a list page were each carrying their own horizontal inset, from
   back when the content column had none:

     .fl-table-card    margin: 0 24px 24px      (olam-design-system)
     .stat-cards-row   padding: 16px 24px 8px   (olam-design-system, restated
                                                 by two later layers)
     .fl-filter-toolbar / .fl-filter-bar        margin: 12px 24px 0

   So the page head and the filter row sat at the column edge while the KPI
   tiles and the table were inset 24px, and the filters looked like they were
   overflowing the card below them.

   The gutter belongs to the column. It goes on .main-content — which is the
   real content wrapper; an earlier attempt at this hung it on .content-body,
   a class this layout does not have anywhere, so none of it applied. */
.main-content {
  padding-left: 24px;
  padding-right: 24px;
}

/* ── Room under the fixed header ──
   Two layers pin this to exactly the header height, so the page title started
   flush against the top bar:

     olam-design-system     .main-content                        (0,1,0) !important
     olam-legacy-overrides  [data-header-position="fixed"] .main-content
                                                                 (0,2,0) !important

   The second is why setting it on `.main-content` alone did nothing — same
   !important, higher specificity, so it won. This matches that selector. */
.main-content,
[data-header-position="fixed"] .main-content {
  padding-top: 8px !important;
}

@media (max-width: 767px) {
  .main-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .main-content,
  [data-header-position="fixed"] .main-content {
    padding-top: 12px !important;
  }
}

/* Everything inside runs edge to edge. */
.main-content .container-fluid,
.main-content>.container-fluid,
.main-content .stat-cards-row,
.main-content .stats-row,
.main-content .fl-table-card,
.main-content .fl-filter-toolbar,
.main-content .fl-filter-bar,
.main-content .fl-filter-panel,
.main-content .fo-page-head,
.main-content .fl-page-head,
.main-content .page-title-bar,
.main-content .page-titles,
.main-content .fo-metrics,
.main-content .fo-entity,
.main-content .fo-bulkbar,
.main-content .fo-map-legend,
.main-content .olam-dash-panel {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: auto;
  max-width: none;
}

/* olam-legacy-overrides.css sets the container's side padding with !important,
   which would put the gutter back inside the column. */
.main-content .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The ones that are cards keep their own inner padding — it was the outer
   inset that had to go, not the breathing room inside the box.

   Every card in the list above needs a line here. .fo-entity did not have one,
   so its left padding stayed at 0 and the avatar sat directly on the 3px
   accent rule down its leading edge. */
.main-content .fl-filter-bar {
  padding: 14px 16px;
}

.main-content .fo-map-legend {
  padding: 10px 14px;
}

.main-content .fo-entity {
  padding: 14px 18px 14px 22px;
}

.main-content .fo-bulkbar {
  padding: 11px 16px;
}

/* ── Footer ──
   It was a full-width white band with its own top border and 16px of padding —
   a panel, for one line of small print. Flattened to plain text and pushed to
   the bottom of the column, which hands the space back to the table above it.

   The column becomes a flex column so `margin-top: auto` can do the pushing.
   That is not a new idea here: olam-jp-enterprise.css already does exactly
   this on the dashboard so the map can fill the height. This generalises it to
   every page. */
.main-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - var(--olam-header-height, 56px)) !important;
  min-height: calc(100dvh - var(--olam-header-height, 56px)) !important;
  box-sizing: border-box !important;
}

.main-content>.footer,
.main-content>.footer.olam-app-footer,
.footer.olam-app-footer,
.footer {
  position: fixed !important;
  bottom: 0 !important;
  left: var(--olam-sidebar-width, 232px) !important;
  right: 0 !important;
  z-index: 99 !important;
  padding: 10px 24px !important;
  background: var(--olam-surface, #ffffff) !important;
  border-top: 1px solid var(--olam-border, #e2e8f0) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .main-content>.footer,
  .main-content>.footer.olam-app-footer,
  .footer.olam-app-footer,
  .footer {
    left: 0 !important;
  }
}

.main-content>.footer .copyright,
.main-content>.footer.olam-app-footer .copyright,
.footer .copyright {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.main-content>.footer .copyright p,
.main-content>.footer.olam-app-footer .copyright p,
.footer .copyright p {
  text-align: center;
  margin: 0;
  font-size: 0.78rem;
  color: var(--olam-text-muted, #64748b) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. BREADCRUMB TRAIL
   Above the title, plain text with slash separators — no chevrons, no box.
   Muted until the last crumb, which is ink.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-crumbs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 6px auto;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fo-muted, #64748b);
  text-align: right;
}

.fo-crumbs a {
  color: var(--fo-muted, #64748b);
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms ease;
}

.fo-crumbs a:hover {
  color: var(--olam-primary, #059138);
  text-decoration: underline;
}

.fo-crumbs .fo-crumb-sep {
  color: var(--fo-faint, #cbd5e1);
  font-size: 0.75rem;
  opacity: 0.8;
  user-select: none;
  margin: 0 2px;
}

.fo-crumbs .fo-crumb-current {
  color: var(--fo-ink, #0f172a);
  font-weight: 600;
}

/* Dark mode compatibility for fo-crumbs */
[data-theme="dark"] .fo-crumbs,
[data-theme-version="dark"] .fo-crumbs {
  color: #94a3b8 !important;
}

[data-theme="dark"] .fo-crumbs a,
[data-theme-version="dark"] .fo-crumbs a {
  color: #94a3b8 !important;
}

[data-theme="dark"] .fo-crumbs a:hover,
[data-theme-version="dark"] .fo-crumbs a:hover {
  color: #34d399 !important;
}

[data-theme="dark"] .fo-crumbs .fo-crumb-sep,
[data-theme-version="dark"] .fo-crumbs .fo-crumb-sep {
  color: #64748b !important;
}

[data-theme="dark"] .fo-crumbs .fo-crumb-current,
[data-theme-version="dark"] .fo-crumbs .fo-crumb-current {
  color: #f8fafc !important;
}

/* Settings pages carry a Bootstrap breadcrumb. Flatten & right-align it. */
.page-titles .breadcrumb,
ol.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 6px auto !important;
  font-size: 0.8125rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

ol.breadcrumb .breadcrumb-item,
ol.breadcrumb .breadcrumb-item a {
  color: var(--fo-muted, #64748b) !important;
  font-weight: 500 !important;
}

ol.breadcrumb .breadcrumb-item.active,
ol.breadcrumb .breadcrumb-item.active a {
  color: var(--fo-ink, #0f172a) !important;
  font-weight: 600 !important;
}

ol.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: "/" !important;
  color: var(--fo-faint, #cbd5e1) !important;
  padding: 0 8px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. PAGE HEAD
   Identity on the left — title with fo-page-sub on a dedicated line directly
   below it. Right side holds fo-crumbs and fo-page-head-actions.
   ─────────────────────────────────────────────────────────────────────────── */

.fl-page-head,
.fo-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.fl-page-head-main,
.fo-page-head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}

.fo-page-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 4px;
}

.fo-page-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

.fo-page-head-main>.fo-crumbs {
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  justify-content: flex-end !important;
}

.fl-page-head-icon {
  display: none;
}

.fl-page-head-title,
.fo-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fo-ink);
}

.fl-page-head-sub,
.fo-page-sub {
  display: none !important;
}

/* A page whose title is the product name takes the brand green. */
.fo-page-title.is-brand {
  color: var(--fo-brand) !important;
}

.fo-page-sub strong,
.fl-page-head-sub strong {
  color: var(--fo-ink-2);
  font-weight: 600;
}

/* Live chip — a soft emerald dot beside the title. */
.fo-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: middle;
}

.fo-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gc-t-green-chip, #10B981);
  box-shadow: 0 0 0 3px rgb(16 185 129 / 0.18);
}

.fl-page-head-actions,
.fo-page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* Segmented range control (7d · 30d · 90d · All time). */
.fo-segment {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r);
  box-shadow: var(--fo-shadow);
}

.fo-segment>a,
.fo-segment>button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 11px;
  border-radius: var(--fo-r-sm);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fo-muted);
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
  transition: all 150ms ease;
}

.fo-segment>a:hover,
.fo-segment>button:hover {
  color: var(--fo-ink);
  background: var(--fo-head);
}

.fo-segment>.active,
.fo-segment>[aria-current="true"] {
  background: var(--fo-ink);
  color: #FFFFFF;
  font-weight: 600;
}

html[data-theme="dark"] .fo-segment>.active {
  background: var(--olam-primary, #7C3AED);
}

/* ───────────────────────────────────────────────────────────────────────────
   5. BUTTONS
   Three weights only: a filled primary for the one committing action, an
   outlined default for everything else, and a filled semantic for approve and
   reject where the decision is the point of the screen.
   ─────────────────────────────────────────────────────────────────────────── */

.btn-fo,
.btn-fl-export,
.btn-fl-filter,
.btn-fl-clear,
.btn-fo-primary,
.btn-fo-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--fo-control-h);
  padding: 0 13px;
  border-radius: var(--fo-r);
  border: 1px solid var(--fo-line);
  background: var(--fo-card);
  color: var(--fo-ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--fo-shadow);
  transition: all 150ms ease;
}

.btn-fo:hover,
.btn-fl-export:hover,
.btn-fl-clear:hover,
.btn-fo-ghost:hover {
  background: var(--fo-head);
  border-color: var(--gc-ink-300, #CBD5E1);
  color: var(--fo-ink);
  text-decoration: none;
}

.btn-fo-primary,
.btn-fl-filter {
  background: var(--olam-primary, #7C3AED);
  border-color: var(--olam-primary, #7C3AED);
  color: #FFFFFF;
  font-weight: 600;
}

.btn-fo-primary:hover {
  background: #1D4ED8;
  border-color: #1D4ED8;
  color: #FFFFFF;
  text-decoration: none;
}

.btn-fl-filter:hover {
  filter: brightness(0.94);
  color: #FFFFFF;
  text-decoration: none;
}

.btn-fo-approve {
  background: #059669;
  border-color: #059669;
  color: #FFFFFF;
  font-weight: 600;
}

.btn-fo-approve:hover {
  background: #047857;
  border-color: #047857;
  color: #FFFFFF;
}

.btn-fo-reject {
  background: var(--gc-t-cyan-bg, #FEF2F2);
  border-color: var(--gc-t-cyan-br, #FECACA);
  color: var(--gc-t-cyan-fg, #B91C1C);
  font-weight: 600;
}

.btn-fo-reject:hover {
  background: #FEE2E2;
  color: #991B1B;
}

.btn-fo:focus-visible,
.btn-fo-primary:focus-visible,
.btn-fo-approve:focus-visible,
.btn-fo-reject:focus-visible {
  outline: none;
  box-shadow: var(--olam-focus-ring, 0 0 0 3px rgb(124 58 237 / 0.20));
}

/* Bootstrap's own buttons, so untouched pages inherit the same shapes. */
.btn {
  border-radius: var(--fo-r);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: none;
}

.btn-primary {
  background: var(--olam-primary, #7C3AED);
  border-color: var(--olam-primary, #7C3AED);
  font-weight: 600;
}

.btn-success {
  background: #059669;
  border-color: #059669;
}

.btn-danger {
  background: #DC2626;
  border-color: #DC2626;
}

/* ───────────────────────────────────────────────────────────────────────────
   6. KPI CARDS
   The reference draws a KPI as a white card, not a coloured tile: a muted
   label, the figure at 30px with its denominator stepped back, a sparkline in
   the corner, and a footer that says what changed and against what.

   The markup already in the app is four flat siblings — .sc-title, .sc-count,
   .sc-unit, .sc-icon — so the whole re-layout is grid-template-areas. Pages
   that add a .sc-spark or .sc-foot get the full anatomy; pages that don't
   still land in the right places.

   The figure and its counter word get their own columns rather than sharing
   one area. They are siblings with no wrapper, so putting both in a "figure"
   cell stacked them on top of each other — invisible in English, where the
   counter words are empty strings, and unreadable in Japanese, where they are
   not.
   ─────────────────────────────────────────────────────────────────────────── */

.stat-cards-row,
.fo-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.stat-card,
.fo-kpi {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "label  label menu"
    "figure unit  spark"
    "foot   foot  foot";
  align-items: center;
  gap: 2px 8px;
  min-height: 118px;
  padding: 14px 16px 12px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  background: var(--fo-card) !important;
  box-shadow: var(--fo-shadow);
  color: var(--fo-ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.stat-card:hover,
.fo-kpi:hover {
  border-color: var(--gc-ink-300, #CBD5E1);
  box-shadow: var(--fo-shadow-pop);
  text-decoration: none;
  color: var(--fo-ink);
}

/* Label — muted, sentence case, never uppercase-tracked. */
.stat-card .sc-title,
.fo-kpi .fo-kpi-label {
  grid-area: label;
  align-self: start;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fo-muted) !important;
  opacity: 1;
}

/* The icon square becomes the corner affordance — a quiet kebab-sized mark
   rather than a filled tile competing with the figure. */
.stat-card .sc-icon,
.fo-kpi .fo-kpi-menu {
  grid-area: menu;
  align-self: start;
  justify-self: end;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: var(--fo-r-sm);
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fo-faint) !important;
  font-size: 0.8125rem;
}

.stat-card .sc-icon i {
  font-size: 0.8125rem;
}

/* Figure — 30px, tabular, ink. The counter word rides beside it, stepped back
   so the number is what the eye lands on. */
.stat-card .sc-count,
.fo-kpi .fo-kpi-figure {
  grid-area: figure;
  align-self: end;
  margin: 2px 0 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fo-ink) !important;
}

.stat-card .sc-unit,
.fo-kpi .fo-kpi-unit,
.fo-kpi-denom {
  grid-area: unit;
  align-self: end;
  justify-self: start;
  margin: 0 0 3px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--fo-faint) !important;
  opacity: 1;
}

/* An empty counter word — every unit is an empty string in English — must not
   hold a column open beside the figure. */
.stat-card .sc-unit:empty {
  display: none;
}

/* Where a page supplies its own figure+denominator pair, it wraps them. */
.fo-kpi-figure-wrap {
  grid-area: figure;
  align-self: end;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.fo-kpi-figure-wrap .fo-kpi-figure {
  grid-area: auto;
}

.fo-kpi-figure-wrap .fo-kpi-denom {
  grid-area: auto;
  margin-left: 0;
}

/* Sparkline — a 92×34 slot in the corner. Purely supporting: it carries the
   shape of the trend, never a value you are meant to read off it. */
.fo-kpi-spark {
  grid-area: spark;
  align-self: end;
  justify-self: end;
  width: 92px;
  height: 34px;
  overflow: visible;
}

.fo-kpi-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fo-kpi-spark path {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Share bar — what the sparkline slot holds on the screens where the app has
   no time series to draw. It states this tile's share of the total, which is a
   real figure the page already knows, rather than an invented trend line. */
.fo-kpi-share {
  grid-area: spark;
  align-self: end;
  justify-self: end;
  width: 92px;
  padding-bottom: 4px;
}

.fo-kpi-share-track {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--gc-ink-100, #F1F5F9);
  overflow: hidden;
}

.fo-kpi-share-track>span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fo-hue, var(--olam-primary, #7C3AED));
}

.fo-kpi-share-text {
  display: block;
  margin-top: 4px;
  text-align: right;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  color: var(--fo-faint);
}

/* Footer — the delta on the left, the context note on the right, over a dotted
   rule so it reads as a separate register from the figure. */
.fo-kpi-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--fo-line);
  font-size: 0.75rem;
  line-height: 1.4;
}

.fo-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--fo-muted);
}

.fo-kpi-delta.is-up {
  color: var(--fo-up);
}

.fo-kpi-delta.is-down {
  color: var(--fo-down);
}

.fo-kpi-note {
  color: var(--fo-faint);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A KPI that is also a filter. Selection is a violet rule along the top edge
   plus a violet label — the card body stays white so the row keeps its calm. */
.stat-cards-row.is-selectable .stat-card {
  cursor: pointer;
}

/* ── Selected tile ──
   An unselected tile already carries its family's colour along the top edge.
   Selecting it carries that same colour round the other three sides. Nothing
   is added on top of the tile — no second bar, no ring — so the top edge stays
   one line and the colour keeps meaning the same thing selected or not.

   Two rules in olam-ticket-theme.css had to be overruled to get there, both
   with !important, which is why these carry it too:

     .stat-cards-row.is-selectable .stat-card.is-active
        border-color: var(--gc-t-hero-chip) !important      → violet over the
                                                              family hue, so the
                                                              3px top rule and
                                                              the 1px border read
                                                              as a double line
        box-shadow: 0 0 0 2px var(--gc-page), 0 0 0 4px #0F766E !important
                                                            → the hard-coded
                                                              teal ring round the
                                                              whole box */
.stat-cards-row .stat-card.is-active,
.stat-cards-row.is-selectable .stat-card.is-active,
.fo-kpi.is-active {
  border: 2px solid var(--fo-hue, var(--olam-primary, #7C3AED)) !important;
  border-top-width: 3px !important;
  box-shadow: var(--fo-shadow) !important;
}

/* ── Is this tile clickable, and is it the one selected? ──
   A KPI that is also a filter looks exactly like a KPI that is not, so the
   tiles gave no sign they could be clicked and none that one of them was
   already narrowing the list. A small marker in the bottom-right corner says
   both: "Click to filter" on hover, "Selected" once it is.

   It is aria-hidden — the anchor's own aria-current already tells a screen
   reader which tile is chosen, and repeating it as text would double it up. */
.fo-kpi-state {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

html[lang="ja"] .fo-kpi-state {
  text-transform: none;
  letter-spacing: 0;
}

.fo-kpi-state-on,
.fo-kpi-state-off {
  display: none;
}

.fo-kpi-state>span>i {
  font-size: 0.5625rem;
  margin-right: 3px;
}

/* Resting: nothing. The corner stays quiet until you reach for it. */
.stat-cards-row.is-selectable .stat-card:hover .fo-kpi-state,
.stat-cards-row.is-selectable .stat-card:focus-visible .fo-kpi-state {
  background: var(--gc-ink-100, #F1F5F9);
  color: var(--fo-muted);
}

.stat-cards-row.is-selectable .stat-card:hover .fo-kpi-state-off,
.stat-cards-row.is-selectable .stat-card:focus-visible .fo-kpi-state-off {
  display: inline;
}

/* Selected: shown always, in the tile's own colour, with a tick. */
.stat-card.is-active .fo-kpi-state {
  background: var(--fo-hue, var(--olam-primary, #7C3AED));
  color: #FFFFFF;
}

.stat-card.is-active .fo-kpi-state-on {
  display: inline;
}

.stat-card.is-active .fo-kpi-state-off {
  display: none !important;
}

/* The share bar sits at the right of the figure row; the marker sits under it.
   Give the tile room so the two never touch. */
.stat-cards-row.is-selectable .stat-card {
  padding-bottom: 26px;
}

/* The bar this used to draw across the top is what doubled the line. */
.stat-card.is-active::before,
.fo-kpi.is-active::before {
  display: none !important;
}

.stat-card.is-active .sc-title,
.fo-kpi.is-active .fo-kpi-label {
  color: var(--fo-hue, var(--olam-primary, #7C3AED)) !important;
  font-weight: 600;
}

/* The old per-family tints are retired here: every KPI is white, and the hue
   survives only in the top rule, the sparkline stroke and the delta.

   This list has to cover every sc-* family the app uses, not just the ones on
   the screens I happened to open — sc-red and sc-orange were missing at first,
   which is exactly why two tiles on the dashboard kept a blue and a green
   gradient while the other five went white. */
.stat-card[class*="sc-"] {
  background: var(--fo-card) !important;
  background-image: none !important;
  border-color: var(--fo-line);
}

/* The older KPI strip on the validation modules. Same anatomy as .stat-card,
   reached through its own class names so those pages need no markup change:
   a white card, the label muted above the figure, the icon as a corner mark. */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.fl-stat-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 10px;
  min-height: 94px;
  padding: 13px 15px;
  background: var(--fo-card) !important;
  border: 1px solid var(--fo-line) !important;
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
}

/* The text block is the second child; it takes the whole left column so the
   icon can sit in the corner rather than beside the figure. */
.fl-stat-card>div:last-child {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.fl-stat-icon {
  grid-column: 2;
  grid-row: 1;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fo-r-sm);
  background: var(--gc-ink-50, #F8FAFC) !important;
  color: var(--fo-faint) !important;
  font-size: 0.75rem;
  box-shadow: none !important;
}

.fl-stat-icon.purple {
  color: var(--gc-t-hero-chip, #7C3AED) !important;
  background: var(--gc-t-hero-bg, #F5F3FF) !important;
}

.fl-stat-icon.green {
  color: var(--gc-t-green-fg, #047857) !important;
  background: var(--gc-t-green-bg, #ECFDF5) !important;
}

.fl-stat-icon.orange {
  color: var(--gc-t-amber-fg, #B45309) !important;
  background: var(--gc-t-amber-bg, #FFFBEB) !important;
}

.fl-stat-icon.red {
  color: var(--gc-t-cyan-fg, #B91C1C) !important;
  background: var(--gc-t-cyan-bg, #FEF2F2) !important;
}

.fl-stat-icon.cyan {
  color: var(--gc-t-teal-fg, #0E7490) !important;
  background: var(--gc-t-teal-bg, #ECFEFF) !important;
}

.fl-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fo-muted) !important;
}

.fl-stat-val {
  margin-top: 6px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fo-ink) !important;
}

/* The count strip some list pages draw above their table. */
.fl-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--fo-head) !important;
  border-bottom: 1px solid var(--fo-line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fo-ink) !important;
}

.fl-table-header .rec-info {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fo-muted);
}

/* The older page title bar, brought to the same scale as the new page head. */
.page-title-bar {
  padding: 0;
  margin: 0 0 18px;
  background: none;
  border: 0;
  box-shadow: none;
}

.page-title-bar h5 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fo-ink);
}

.page-title-bar .olam-page-title-icon {
  display: none;
}

.page-title-meta {
  margin-top: 5px;
  font-size: 0.8125rem;
  color: var(--fo-muted);
}

/* Each family keeps its hue in the two places that still carry one. */
.sc-blue {
  --fo-hue: var(--gc-t-blue-chip, #3B82F6);
}

.sc-cyan {
  --fo-hue: var(--gc-t-cyan-chip, #EF4444);
}

.sc-teal {
  --fo-hue: var(--gc-t-teal-chip, #06B6D4);
}

.sc-purple {
  --fo-hue: var(--gc-t-hero-chip, #7C3AED);
}

.sc-green {
  --fo-hue: var(--gc-t-green-chip, #10B981);
}

.sc-amber {
  --fo-hue: var(--gc-t-amber-chip, #F59E0B);
}

.sc-dark-teal {
  --fo-hue: #0891B2;
}

.sc-red {
  --fo-hue: var(--gc-t-cyan-chip, #EF4444);
}

.sc-orange {
  --fo-hue: #EA580C;
}

.sc-indigo {
  --fo-hue: var(--gc-t-indigo-chip, #6366F1);
}

/* ── The coloured edge ──
   The family's colour appears in exactly one place: a rule along the top of the
   tile. Nothing is tinted behind the label or the figure — a wash there sat
   under the text and made the card look smudged rather than coloured.

   It carries !important because olam-ticket-theme.css sets
   `border: 1px solid … !important` on .stat-card; without it this rule loses
   silently and every tile comes out plain. */
.stat-card[class*="sc-"],
.stat-card[class*="fo-ramp-"],
.fl-stat-card {
  border-top: 3px solid var(--fo-hue, var(--olam-primary, #7C3AED)) !important;
}

.fl-stat-card {
  position: relative;
}

/* On the validation modules the family lives on the icon, not on the card, so
   the card has to be selected by what it contains. Browsers without :has()
   fall back to the primary colour on the edge — no breakage, just one hue. */
.fl-stat-card:has(.fl-stat-icon.purple) {
  --fo-hue: var(--gc-t-hero-chip, #7C3AED);
}

.fl-stat-card:has(.fl-stat-icon.green) {
  --fo-hue: var(--gc-t-green-chip, #10B981);
}

.fl-stat-card:has(.fl-stat-icon.orange) {
  --fo-hue: var(--gc-t-amber-chip, #F59E0B);
}

.fl-stat-card:has(.fl-stat-icon.red) {
  --fo-hue: var(--gc-t-cyan-chip, #EF4444);
}

.fl-stat-card:has(.fl-stat-icon.cyan) {
  --fo-hue: var(--gc-t-teal-chip, #06B6D4);
}

.fo-kpi-spark path {
  stroke: var(--fo-hue, var(--olam-primary, #7C3AED));
}

/* ───────────────────────────────────────────────────────────────────────────
   6b. COMPACT KPI TILES
   The dashboard shows seven measures with no trend and no denominator behind
   them, so it uses the tile the detail pages use: a hue rule along the top, a
   square dot beside the label, the figure in mono with its unit alongside, and
   a note underneath. Same component, less of it.

   The row auto-fits — a tile is never narrower than 158px and never wider than
   it needs to be, so seven sit on one line on a desktop and reflow to three,
   two or one as the window narrows, without a media query per breakpoint.
   ─────────────────────────────────────────────────────────────────────────── */

.stat-cards-row.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}

/* The coloured top rule and the wash come from the shared .stat-card rules
   above — this only makes the tile smaller. */
.stat-cards-row.is-compact .stat-card {
  min-height: 0;
  padding: 11px 13px 12px;
  border-radius: var(--fo-r-lg);
  align-content: start;
  gap: 0 7px;
}

/* Label: a square in the family's hue, then the name. Wraps to two lines on a
   long Japanese label rather than clipping — the tiles share a row height, so
   one wrapping label lifts them all evenly. */
.stat-cards-row.is-compact .stat-card .sc-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: normal;
}

.stat-cards-row.is-compact .stat-card .sc-title::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--fo-hue, var(--olam-primary, #7C3AED));
}

/* The figure is mono here: these tiles sit in a row and are read down the row
   as a set of quantities, which is the case tabular figures are for. */
.stat-cards-row.is-compact .stat-card .sc-count {
  margin-top: 7px;
  font-family: var(--gc-font-figure, ui-monospace, Menlo, Consolas, monospace);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.stat-cards-row.is-compact .stat-card .sc-unit {
  margin-bottom: 2px;
}

/* The icon is redundant once the label carries a hue square, and at this width
   it costs the label a third of its line. */
.stat-cards-row.is-compact .stat-card .sc-icon {
  display: none;
}

.stat-cards-row.is-compact .stat-card .fo-kpi-foot {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.stat-cards-row.is-compact .stat-card .fo-kpi-note {
  text-align: left;
}

/* The share bar narrows to fit beside the figure at this width, and its
   percentage sits under it rather than beside — 92px of track plus a figure
   does not fit in a 158px tile. */
.stat-cards-row.is-compact .stat-card .fo-kpi-share {
  width: 62px;
  padding-bottom: 3px;
}

.stat-cards-row.is-compact .stat-card .fo-kpi-share-text {
  font-size: 0.5625rem;
}

/* ── Tighter still (.is-tight) ──
   For a strip of plain measures: label, figure, note, nothing else. The
   farmer-list row keeps the roomier .is-compact because its tiles also carry a
   share bar. */
.stat-cards-row.is-tight {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.stat-cards-row.is-tight .stat-card {
  min-height: 0;
  padding: 9px 12px 10px;
}

.stat-cards-row.is-tight .stat-card .sc-title {
  font-size: 0.75rem;
  /* Darker than on the list tiles: with no figure competing for attention at
     30px, the label is doing real work here. */
  color: var(--fo-ink-2) !important;
}

.stat-cards-row.is-tight .stat-card .sc-title::before {
  width: 6px;
  height: 6px;
  margin-top: 4px;
}

.stat-cards-row.is-tight .stat-card .sc-count {
  margin-top: 4px;
  font-size: 1.25rem;
}

.stat-cards-row.is-tight .stat-card .sc-unit {
  font-size: 0.75rem;
}

.stat-cards-row.is-tight .stat-card .fo-kpi-foot {
  margin-top: 3px;
  padding-top: 0;
  border-top: 0;
}

.stat-cards-row.is-tight .stat-card .fo-kpi-note {
  font-size: 0.6875rem;
  text-align: left;
}

/* Compact tiles use the same selected treatment as the rest — the family
   colour round all four sides. */

/* ───────────────────────────────────────────────────────────────────────────
   6c. FILLED KPI TILES  (.stat-cards-row.is-filled)
   A solid, saturated tile carrying white — the dashboard's seven counts, where
   the hue is decoration that separates one tile from the next rather than a
   status. Opt-in, not the default: on the farmer list the tile colours mean
   approved / pending / rejected, and painting over them would destroy that.

   Contrast is set against the LIGHT end of each gradient, not its average —
   that is where the small uppercase label sits, and it is the point that
   decides whether the tile is readable. Every fill below clears 4.5:1 for
   white at its lightest point; several of the sampled reference colours did
   not, and were pulled a step darker to get there.

   The markup is unchanged. Its four children are already in the order this
   layout wants them — icon, figure, unit, label — so a flex column does it.
   ─────────────────────────────────────────────────────────────────────────── */

.stat-cards-row.is-filled .stat-card {
  position: relative;
  /* A flex column, not a grid.

     The grid this replaces sized its columns from the widest item in them, and
     the breakdown row spans the full tile — so the figure's column inherited
     that width and the number sat at its edge rather than in the middle. The
     figure and its counter word are wrapped in .sc-figure now, which makes
     every child a single centred item and takes track sizing out of it. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 104px;
  padding: 11px 0 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--fo-r-lg);
  background-image: linear-gradient(135deg, var(--fo-fill-a, #0E6B4F), var(--fo-fill-b, #15855F)) !important;
  box-shadow: var(--fo-shadow);
  text-align: center;
}

/* Two overlapping translucent discs in the top-right, as in the reference.
   Decoration only, so it is hidden from assistive tech and sits under the
   content. */
.stat-cards-row.is-filled .stat-card::after {
  content: "";
  position: absolute;
  top: -26px;
  right: -20px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 72%, rgb(255 255 255 / 0.10) 46%, transparent 47%),
    rgb(255 255 255 / 0.08);
  pointer-events: none;
}

.stat-cards-row.is-filled .stat-card>* {
  position: relative;
  z-index: 1;
  align-self: auto;
  justify-self: auto;
  grid-area: auto;
}

/* Icon — shown again here; the compact tile hides it because its label carries
   a hue square instead, and a filled tile has no square. */
.stat-cards-row.is-filled .stat-card .sc-icon {
  display: inline-flex !important;
  width: auto;
  height: auto;
  margin: 0 0 4px;
  background: transparent !important;
  color: rgb(255 255 255 / 0.92) !important;
  font-size: 0.875rem;
}

.stat-cards-row.is-filled .stat-card .sc-icon i {
  font-size: 0.875rem;
}

/* Figure and counter word, as one centred line. */
.stat-cards-row.is-filled .stat-card .sc-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.stat-cards-row.is-filled .stat-card .sc-count {
  margin: 0;
  font-family: var(--olam-font) !important;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #FFFFFF !important;
}

.stat-cards-row.is-filled .stat-card .sc-unit {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.82) !important;
  opacity: 1;
}

/* Label — uppercase and tracked, as the reference draws it. Kana take neither,
   so the Japanese build keeps sentence case. */
.stat-cards-row.is-filled .stat-card .sc-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 10px 8px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* olam-ticket-theme.css aligns this label left for the white KPI card, where
     the whole tile is left-aligned. A filled tile is centred, so it has to be
     restated here — inheriting text-align from the card is not enough when a
     lower layer names the property directly. */
  text-align: center !important;
  color: rgb(255 255 255 / 0.94) !important;
  /* A soft scrim under the label. At 11px, white needs 4.5:1 and the raw fill
     only reaches AA-large; this lifts it clear without darkening the tile. */
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.14) 60%, rgb(0 0 0 / 0.20) 100%);
}

/* Total Area is the one tile with no per-status split — it is a sum of
   hectares, not a queue of records, so there is nothing to break down. Left
   alone its figure stayed pinned to the top of a tile as tall as the six that
   do have a breakdown row, which reads as a mistake rather than a difference.

   Two rules, in this order and not the other way round. The first is the
   fallback: label at the foot on its own scrim, which is what a browser
   without :has() will show and is a perfectly good tile. The second uses
   :has() to centre the content instead, and must come second because the two
   selectors have equal specificity — swap them and the fallback wins
   everywhere. */
.stat-cards-row.is-filled .stat-card .sc-title:last-child {
  margin-top: auto;
  padding-bottom: 11px;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.16) 55%, rgb(0 0 0 / 0.20) 100%);
}

.stat-cards-row.is-filled .stat-card:not(:has(.sc-sub)) {
  justify-content: center;
}

.stat-cards-row.is-filled .stat-card:not(:has(.sc-sub)) .sc-title {
  margin-top: 7px;
  padding-bottom: 0;
  background: none;
  /* The scrim is gone, so the label gets its contrast from a shadow instead —
     a band across the middle of a centred tile would look like a seam. */
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.stat-cards-row.is-filled .stat-card .sc-title::before {
  display: none;
}

html[lang="ja"] .stat-cards-row.is-filled .stat-card .sc-title {
  text-transform: none;
  letter-spacing: 0;
}

/* Breakdown row — approved / pending / rejected under a hairline, as in the
   reference. It sits on a darkened band, which is what makes 9px text legible
   on a saturated ground: white clears AA-large on the raw fill but not AA at
   this size, and the band lifts it to roughly 5.9:1 on every tile.

   margin-top:auto pins it to the foot, so tiles with a breakdown and tiles
   without one still line up. Only the modules whose per-status counts the
   portal summary actually returns carry one. */
.stat-cards-row.is-filled .stat-card .sc-sub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  margin: auto 0 0;
  padding: 5px 6px 6px;
  border-top: 1px solid rgb(255 255 255 / 0.20);
  background: rgb(0 0 0 / 0.20);
}

.stat-cards-row.is-filled .stat-card .sc-sub-item {
  text-align: center;
  min-width: 0;
}

.stat-cards-row.is-filled .stat-card .sc-sub-item .sv {
  display: block;
  font-family: var(--olam-font) !important;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF !important;
  font-variant-numeric: tabular-nums;
}

.stat-cards-row.is-filled .stat-card .sc-sub-item .sl {
  display: block;
  margin-top: 1px;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82) !important;
}

html[lang="ja"] .stat-cards-row.is-filled .stat-card .sc-sub-item .sl {
  text-transform: none;
  letter-spacing: 0;
}

.stat-cards-row.is-filled .stat-card:hover {
  box-shadow: var(--fo-shadow-pop);
  filter: brightness(1.05);
}

/* Selection is a white ring — on a saturated ground the violet rule the other
   tiles use would not read. */
.stat-cards-row.is-filled .stat-card.is-active {
  /* A filled tile has no border to colour, so selection is a white ring. The
     !important is to win against the shared selected rule above, which sets a
     border and a flat shadow for the bordered tiles. */
  border: 0 !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--olam-primary, #7C3AED) !important;
}

.stat-cards-row.is-filled .stat-card.is-active::before {
  display: none;
}

/* The ramp, taken from the reference. Each pair is the two ends of the tile's
   135° gradient. The hues are the reference's own; several were deepened in
   value — as sampled, white sat at 1.67:1 on the amber and 1.81:1 on the
   cyan, which is not readable. They now clear AA-large at both ends of every
   gradient, and the small text sits on a darkened band (see .sc-title). */
.fo-ramp-1 {
  --fo-fill-a: #4A1259;
  --fo-fill-b: #7A2A82;
}

/* Total farmers */
.fo-ramp-2 {
  --fo-fill-a: #2563EB;
  --fo-fill-b: #199DB1;
}

/* Total plots   */
.fo-ramp-3 {
  --fo-fill-a: #16A34A;
  --fo-fill-b: #0D9488;
}

/* Crop data     */
.fo-ramp-4 {
  --fo-fill-a: #E23E3E;
  --fo-fill-b: #E86B15;
}

/* Polygon       */
.fo-ramp-5 {
  --fo-fill-a: #1A9F9F;
  --fo-fill-b: #13A099;
}

/* Pipes         */
.fo-ramp-6 {
  --fo-fill-a: #B4891A;
  --fo-fill-b: #E86B15;
}

/* AWD events    */
.fo-ramp-7 {
  --fo-fill-a: #12A191;
  --fo-fill-b: #2C7DA0;
}

/* Total area    */
/* Total area      */

/* These fills are already dark; they carry over to dark mode unchanged. */

/* ───────────────────────────────────────────────────────────────────────────
   7. FILTER STRIP
   Status pills on the left, search and the narrowing controls on the right,
   all on one row. The pills are the page's primary cut of the data, so they
   sit in a soft group with the selected one lifted onto white.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-toolbar,
.fl-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
}

.fo-toolbar-left,
.fl-toolbar-leading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.fo-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Pill group — status tabs, season tabs, and the crop/L2 tab strips all land
   here so the three read as one control. */
.fo-pills,
.crop-status-tabs,
.l2-season-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--gc-ink-100, #F1F5F9);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-lg);
  flex-wrap: wrap;
}

.fo-pill,
.crop-status-tab,
.l2-season-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  margin: 0;
  border: 0;
  border-radius: var(--fo-r);
  background: transparent;
  color: var(--fo-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  /* The status strip was an uppercase, letter-spaced, 700-weight underline tab.
     Sitting beside the season pills — sentence case, 500 — the two read as
     different kinds of control when they are the same kind: two ways of cutting
     one list. */
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 150ms ease;
}

.fo-pill:hover,
.crop-status-tab:hover,
.l2-season-tab:hover {
  color: var(--fo-ink);
  text-decoration: none;
}

.fo-pill.active,
.crop-status-tab.active,
.l2-season-tab.active {
  background: var(--fo-card);
  color: var(--fo-ink);
  font-weight: 600;
  box-shadow: var(--fo-shadow-pop);
}

/* The icons the tab strips carry are noise at this size — the count is the
   information. Hidden rather than removed so no Blade has to change. */
.crop-status-tab>i {
  display: none;
}

/* Count badge inside a pill. */
.fo-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gc-ink-200, #E2E8F0);
  color: var(--fo-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fo-pill.active .fo-pill-count,
.crop-status-tab.active .fo-pill-count {
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
}

/* Search box, with its shortcut hint. */
.fo-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 240px;
}

.fo-search>i {
  position: absolute;
  left: 11px;
  color: var(--fo-faint);
  font-size: 0.8125rem;
  pointer-events: none;
}

.fo-search input {
  width: 100%;
  height: var(--fo-control-h);
  padding: 0 42px 0 32px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r);
  background: var(--fo-card);
  color: var(--fo-ink);
  font-size: 0.8125rem;
  box-shadow: var(--fo-shadow);
}

.fo-search input::placeholder {
  color: var(--fo-faint);
}

.fo-search input:focus {
  outline: none;
  border-color: var(--olam-primary, #7C3AED);
  box-shadow: var(--olam-focus-ring, 0 0 0 3px rgb(124 58 237 / 0.20));
}

.fo-search kbd {
  position: absolute;
  right: 8px;
  padding: 1px 5px;
  border: 1px solid var(--fo-line);
  border-radius: 4px;
  background: var(--fo-head);
  color: var(--fo-faint);
  font-family: inherit;
  font-size: 0.6875rem;
  line-height: 1.5;
  box-shadow: none;
}

/* The filter panel is always open now; it is a plain block. */
.fl-filter-panel {
  display: block;
}

/* Kept for pages that still render the toggle. The list pages no longer do —
   the filters they gate are open by default. */
.btn-fl-toggle-filters {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--fo-control-h);
  padding: 0 12px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r);
  background: var(--fo-card);
  color: var(--fo-ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: var(--fo-shadow);
  cursor: pointer;
}

.btn-fl-toggle-filters:hover {
  background: var(--fo-head);
  border-color: var(--gc-ink-300, #CBD5E1);
}

.btn-fl-toggle-filters.is-open {
  border-color: var(--gc-t-hero-br, #DDD6FE);
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
}

.fl-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #2563eb;
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: 700;
}

.fl-filter-chevron {
  font-size: 0.625rem;
  color: var(--fo-faint);
}

.btn-fl-toggle-filters.is-open .fl-filter-chevron {
  transform: rotate(180deg);
}

/* The expanded filter panel is a plain white card, not a tinted band. */
.fl-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  /* olam-design-system.css sets `overflow-x: auto; overflow-y: hidden` here,
     from when this bar was a single nowrap row that scrolled sideways. It
     wraps now, so the scroll is unnecessary — and the hidden vertical overflow
     was clipping the searchable-select dropdowns at the bar's bottom edge, so
     opening States showed a sliver of the list and then the table underneath.
     Nothing in this bar should ever clip: the menus have to escape it. */
  overflow: visible;
  padding: 14px 16px;
  margin: 0 0 12px;
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
}

/* Neither may the panel or the form around it clip. */
.fl-filter-panel,
#filterForm {
  overflow: visible;
}

/* The open combo is lifted above its neighbours so its menu is not painted
   over by the control to its right. */
.fl-combo {
  position: relative;
}

.fl-combo:focus-within {
  z-index: 30;
}

.fl-combo-menu {
  z-index: 1200;
}

.fl-filter-applied-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--gc-t-hero-fg, #6D28D9);
  font-size: 0.75rem;
  font-weight: 500;
}

.fl-filter-applied-hint>i {
  font-size: 0.6875rem;
  opacity: 0.8;
}

/* ───────────────────────────────────────────────────────────────────────────
   8. FORM CONTROLS
   One shape for every control in the app: 34px tall, hairline border, 8px
   radius, white ground, violet focus ring.

   ── Why this section uses !important ──
   Four layers had a different opinion about how tall a filter control is, and
   two of them stated it with !important, so the winner was decided by selector
   trivia rather than by design:

     olam-design-system   .fl-combo-input            34px !important
     olam-design-system   .fl-filter-bar input[name="farmer_unique_id"]  34px
     olam-jp-enterprise   .fl-filter-bar .fl-input   32px
     olam-ticket-theme    .fl-filter-bar .fl-input   38px  (--gc-control-h)

   The text boxes matched an attribute selector, the combos matched an
   !important one, and the two ended up different heights on the same row —
   which is what the Farmer Unique ID / From Date / To Date boxes were showing
   next to the State and District selects. The combos also carried
   `background: var(--olam-bg) !important`, a grey, while the text inputs were
   white.

   This block is the single authority, so it states its case at the same volume
   as the rules it has to overrule. If a control needs a different size, give
   it a modifier here rather than a new rule in a lower layer.
   ─────────────────────────────────────────────────────────────────────────── */

.form-control,
.fo-input,
.fo-select,
.fl-input,
.fl-combo-input,
select.form-control,
input[type="text"].form-control,
input[type="date"].form-control,
input[type="number"].form-control,
.fl-filter-bar .fl-input,
.fl-filter-bar input[type="text"],
.fl-filter-bar input[type="date"],
.fl-filter-bar input[type="number"],
.fl-filter-bar select,
.fo-search input {
  box-sizing: border-box !important;
  height: var(--fo-control-h) !important;
  min-height: var(--fo-control-h) !important;
  line-height: 1.3 !important;
  padding: 0 11px !important;
  border: 1px solid var(--fo-line) !important;
  border-radius: var(--fo-r) !important;
  background-color: var(--fo-card) !important;
  color: var(--fo-ink) !important;
  font-family: inherit !important;
  font-size: 0.8125rem !important;
  box-shadow: var(--fo-shadow);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Anything with a caret drawn into it needs room for the caret. */
.fl-combo-input,
.fl-filter-bar select,
select.form-control,
.fo-select {
  padding-right: 28px !important;
}

/* Textareas size to their content — the height above would crop them. */
textarea.form-control,
textarea.fo-input {
  height: auto !important;
  min-height: 0 !important;
  padding: 9px 11px !important;
  line-height: 1.55 !important;
}

/* The combo is a wrapper around its input; its inline width is what made the
   selects 130px and 140px on the same row. */
.fl-combo {
  width: var(--fo-filter-w) !important;
  min-width: var(--fo-filter-w) !important;
  flex: 0 0 var(--fo-filter-w);
}

/* The plain text and date boxes take the same width, so Farmer Unique ID,
   From Date and To Date line up with the State and District selects. */
.fl-filter-bar .fl-input,
.fl-filter-bar input[type="text"],
.fl-filter-bar input[type="date"] {
  width: var(--fo-filter-w) !important;
  min-width: var(--fo-filter-w) !important;
  flex: 0 0 var(--fo-filter-w);
}

/* Controls sit on one baseline. The bar used to align to flex-end, which put
   a taller control's bottom edge level with a shorter one's and left their
   tops ragged. */
.fl-filter-bar {
  align-items: center;
}

/* Buttons on the filter row match the controls beside them. */
.fl-filter-bar .btn-fl-filter,
.fl-filter-bar .btn-fl-clear,
.btn-fl-toggle-filters,
.btn-fo,
.btn-fo-primary,
.btn-fo-ghost,
.btn-fl-export {
  height: var(--fo-control-h) !important;
  min-height: var(--fo-control-h) !important;
}

.form-control:focus,
.fo-input:focus,
.fo-select:focus,
.fl-input:focus,
.fl-combo-input:focus,
.fl-filter-bar input:focus,
.fl-filter-bar select:focus,
.fo-search input:focus {
  outline: none !important;
  border-color: var(--olam-primary, #7C3AED) !important;
  box-shadow: var(--olam-focus-ring, 0 0 0 3px rgb(124 58 237 / 0.20)) !important;
}

.form-control::placeholder,
.fl-input::placeholder,
.fl-combo-input::placeholder,
.fo-search input::placeholder {
  color: var(--fo-faint) !important;
}

/* A filter holding a value is marked by its border, not by a heavier weight —
   bolding the text reflows the row as you set filters. */
.fl-filter-bar select.is-set,
.fl-filter-bar input.is-set,
.fl-filter-bar .fl-combo.is-set .fl-combo-input {
  border-color: var(--olam-primary, #7C3AED) !important;
  font-weight: 500 !important;
}

/* DataTables draws its own search and length controls on 56 settings pages. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  height: var(--fo-control-h) !important;
  min-height: var(--fo-control-h) !important;
  border: 1px solid var(--fo-line) !important;
  border-radius: var(--fo-r) !important;
  background-color: var(--fo-card) !important;
  font-size: 0.8125rem !important;
}

/* ── Tom Select ──
   Project searchable selects use Tom Select (`.ts-wrapper`) via `js/plugins-init/tom-select-init.js` (`$.fn.tomSelect`).

   It ships with the Bootstrap 4 theme (`tom-select.bootstrap4.min.css`, loaded
   per page via config/dz.php), whose control is sized to BS4's own input metrics:
   .375rem/.75rem padding on a 1.5em line box, about 47px once the shim's `.item`
   line-height is added. The only other opinion was
   `.main-content .ts-wrapper .ts-control { min-height: 38px }` in
   olam-legacy-overrides, and `.fl-filter-bar .ts-control { 34px }` in the design
   system — so a Tom Select matched the rest of the app on list-page filter bars
   and nowhere else. On the Report screen that put eight ~47px boxes beside a
   34px native select, a 34px date input and a 34px button.

   These rules give it the same 34px box as §8. Specificity is stated at
   `.main-content .ts-wrapper .ts-control` rather than `.ts-control` because the
   legacy rule is (0,3,0) and would otherwise win on the sheet that loads first;
   the bare selector below it covers a control rendered outside .main-content.
   ─────────────────────────────────────────────────────────────────────────── */

.ts-wrapper .ts-control,
.main-content .ts-wrapper .ts-control,
.main-content .ts-wrapper.single .ts-control {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  height: var(--fo-control-h) !important;
  min-height: var(--fo-control-h) !important;
  padding: 0 28px 0 11px !important;
  border: 1px solid var(--fo-line) !important;
  border-radius: var(--fo-r) !important;
  background: var(--fo-card) !important;
  color: var(--fo-ink) !important;
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
  box-shadow: var(--fo-shadow);
}

/* The value and the typing caret share the line box, so neither may add height. */
.ts-wrapper .ts-control>.item,
.main-content .ts-wrapper .ts-control>.item,
.ts-wrapper .ts-control>input,
.main-content .ts-wrapper .ts-control>input {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  font-size: 0.8125rem !important;
  color: var(--fo-ink) !important;
}

/* Tom Select measures the typed text to size this input; letting it keep a
   width of 4px is what makes a single select look empty when it is not. */
.ts-wrapper.single .ts-control>input,
.main-content .ts-wrapper.single .ts-control>input {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.ts-wrapper .ts-control>.item {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ts-wrapper .ts-control .placeholder,
.main-content .ts-wrapper .ts-control .placeholder,
.ts-wrapper .ts-control > input::placeholder {
  color: var(--fo-muted, #64748b) !important;
  opacity: 1 !important;
}

.ts-dropdown .no-results,
.main-content .ts-dropdown .no-results {
  color: var(--fo-ink, #0f172a) !important;
  padding: 0.6rem 0.75rem !important;
  opacity: 1 !important;
}

/* A multi-select grows with its tags, so it takes a floor rather than a fixed
   height — pinning it would clip the second row of chips. */
.ts-wrapper.multi .ts-control,
.main-content .ts-wrapper.multi .ts-control {
  height: auto !important;
  min-height: var(--fo-control-h) !important;
  flex-wrap: wrap !important;
  padding: 3px 28px 3px 6px !important;
}

.ts-wrapper.multi .ts-control>.item,
.main-content .ts-wrapper.multi .ts-control>.item {
  margin: 2px 4px 2px 0 !important;
  padding: 1px 8px !important;
  border: 1px solid var(--gc-t-hero-br, #DDD6FE) !important;
  border-radius: var(--fo-r-sm) !important;
  background: var(--gc-t-hero-bg, #F5F3FF) !important;
  color: var(--gc-t-hero-fg, #6D28D9) !important;
  font-size: 0.75rem !important;
}

.ts-wrapper.focus .ts-control,
.main-content .ts-wrapper.focus .ts-control {
  border-color: var(--olam-primary, #7C3AED) !important;
  box-shadow: var(--olam-focus-ring, 0 0 0 3px rgb(124 58 237 / 0.20)) !important;
}

.ts-wrapper.disabled .ts-control,
.main-content .ts-wrapper.disabled .ts-control {
  background: var(--fo-head) !important;
  color: var(--fo-faint) !important;
  opacity: 1 !important;
}

/* The caret. The BS4 theme draws it as a background image sized to its own
   control; re-centring it on a 34px box keeps it on the text baseline. */
.ts-wrapper.single .ts-control::after,
.main-content .ts-wrapper.single .ts-control::after {
  right: 11px !important;
  margin-top: 0 !important;
  border-width: 4px 4px 0 4px !important;
  border-color: var(--fo-muted) transparent transparent transparent !important;
}

.ts-wrapper.single.input-active .ts-control,
.main-content .ts-wrapper.single.input-active .ts-control {
  background: var(--fo-card) !important;
}

.ts-dropdown,
.main-content .ts-dropdown {
  margin-top: 3px !important;
  border: 1px solid var(--fo-line) !important;
  border-radius: var(--fo-r) !important;
  background: var(--fo-card) !important;
  box-shadow: var(--olam-shadow-lg, 0 10px 15px -3px rgb(15 23 42 / 0.10)) !important;
  color: var(--fo-ink) !important;
  overflow: hidden;
}

.ts-dropdown .option,
.main-content .ts-dropdown .option {
  padding: 7px 11px !important;
  font-size: 0.8125rem !important;
  color: var(--fo-ink-2) !important;
}

.ts-dropdown .option.active,
.main-content .ts-dropdown .option.active,
.ts-dropdown .option:hover,
.main-content .ts-dropdown .option:hover {
  background: var(--gc-t-hero-bg, #F5F3FF) !important;
  color: var(--gc-t-hero-fg, #6D28D9) !important;
}

.ts-dropdown .option.selected,
.main-content .ts-dropdown .option.selected {
  background: var(--gc-ink-100, #F1F5F9) !important;
  color: var(--fo-ink) !important;
  font-weight: 600;
}

.ts-dropdown .no-results,
.main-content .ts-dropdown .no-results {
  padding: 7px 11px !important;
  font-size: 0.8125rem !important;
  color: var(--fo-faint) !important;
}

.ts-dropdown .ts-dropdown-content {
  max-height: 240px !important;
}

@media (max-width: 575px) {

  /* One column on a phone: fixed widths would overflow the card. */
  .fl-combo,
  .fl-filter-bar .fl-input,
  .fl-filter-bar input[type="text"],
  .fl-filter-bar input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100%;
  }
}

label,
.control-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fo-muted);
  margin-bottom: 5px;
}

/* ───────────────────────────────────────────────────────────────────────────
   9. TABLES
   The reference table is a white card with a grey count strip on top, a grey
   head, hairline row dividers, and cells that hold two registers: the value in
   ink and its context underneath in muted 11px.
   ─────────────────────────────────────────────────────────────────────────── */

.fl-table-card,
.fo-table-card,
.card {
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
  overflow: hidden;
}

.card {
  margin-bottom: 18px;
}

/* Count strip above the head — states the slice, nothing else. */
.fo-table-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  /* White, not grey. This is a caption for the table; the grey belongs to the
     column-header row below it. When both were --fo-head the two merged into
     one block and the header stopped reading as a header. */
  background: var(--fo-card);
  border-bottom: 1px solid var(--fo-line);
  font-size: 0.75rem;
  color: var(--fo-muted);
}

.fo-table-strip strong {
  color: var(--fo-ink);
  font-weight: 600;
}

.fl-table-scroll,
.fo-table-scroll,
.table-responsive {
  overflow-x: auto;
}

.farmer-table,
.fo-table,
table.table,
table.display,
table.dataTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
  color: var(--fo-ink-2);
  margin: 0;
  background: var(--fo-card);
}

.farmer-table thead th,
.fo-table thead th,
table.table thead th,
table.display thead th,
table.dataTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 14px;
  background: var(--fo-head) !important;
  border: 0;
  border-top: 1px solid var(--fo-line);
  border-bottom: 2px solid var(--gc-ink-200, #E2E8F0);
  /* The separation comes from the grey ground and the firmer bottom rule, not
     from weight — you asked for bold to be reserved for the farmer name and
     the unique id, and a header row is not an exception worth making. */
  color: var(--fo-ink-2) !important;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.farmer-table tbody td,
.fo-table tbody td,
table.table tbody td,
table.display tbody td,
table.dataTable tbody td {
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--fo-line-soft);
  vertical-align: middle;
  background: transparent;
}

.farmer-table tbody tr:first-child td,
.fo-table tbody tr:first-child td {
  border-top: 0;
}

.farmer-table tbody tr:hover td,
.fo-table tbody tr:hover td,
table.table tbody tr:hover td,
table.display tbody tr:hover td,
table.dataTable tbody tr:hover td {
  background: var(--fo-head);
}

/* Selected row — a violet wash with a rule down its leading edge. */
.farmer-table tbody tr.is-selected td,
.fo-table tbody tr.is-selected td {
  background: var(--gc-t-hero-bg, #F5F3FF);
}

.farmer-table tbody tr.is-selected td:first-child,
.fo-table tbody tr.is-selected td:first-child {
  box-shadow: inset 2px 0 0 var(--olam-primary, #7C3AED);
}

/* Column roles. */
.col-num,
.fo-num {
  text-align: right;
}

.col-action,
.fo-col-action {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.col-check,
.fo-col-check {
  width: 1%;
  padding-right: 0 !important;
}

.fl-muted,
.fo-muted {
  color: var(--fo-muted);
}

.fl-strong,
.fo-strong {
  color: var(--fo-ink);
  font-weight: 600;
}

/* Figures are mono so a column of them compares by place. */
.fl-uid {
  font-weight: 600;
}

/* The id is a link now. It keeps the ink colour of an identifier rather than
   taking a saturated link blue — a column of eight coloured ids would read as
   eight warnings. The affordance is the underline on hover, which is enough
   because the whole row is already understood to be a record you can open. */
.fl-uid-link {
  color: var(--fo-ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}

.fl-uid-link:hover,
.fl-uid-link:focus-visible {
  color: var(--olam-primary, #7C3AED);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fl-uid-link:focus-visible {
  outline: none;
  box-shadow: var(--olam-focus-ring, 0 0 0 3px rgb(124 58 237 / 0.20));
  border-radius: 3px;
}

.fl-uid,
.fl-figure,
.fo-figure,
.fo-mono {
  font-family: var(--gc-font-figure, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--fo-ink);
}

/* Sortable head cell — a caret that only darkens on the sorted column. */
.fo-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.fo-sort::after {
  content: "\f0dc";
  font-family: FontAwesome;
  font-size: 0.625rem;
  color: var(--fo-faint);
  opacity: 0.7;
}

.fo-sort.is-asc::after {
  content: "\f0de";
  color: var(--fo-ink);
  opacity: 1;
}

.fo-sort.is-desc::after {
  content: "\f0dd";
  color: var(--fo-ink);
  opacity: 1;
}

/* Avatar — initials on a tinted disc. The hue is set per row from the name, so
   the same person keeps the same colour across screens. */
.fo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fo-av, var(--olam-primary, #7C3AED));
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fo-avatar.is-sm {
  width: 26px;
  height: 26px;
  font-size: 0.625rem;
}

.fo-avatar.is-lg {
  width: 44px;
  height: 44px;
  font-size: 0.875rem;
}

.fo-av-1 {
  --fo-av: #6D5AE6;
}

.fo-av-2 {
  --fo-av: #0E9F6E;
}

.fo-av-3 {
  --fo-av: #0891B2;
}

.fo-av-4 {
  --fo-av: #EA580C;
}

.fo-av-5 {
  --fo-av: #DB2777;
}

.fo-av-6 {
  --fo-av: #2563EB;
}

.fo-av-7 {
  --fo-av: #7C3AED;
}

.fo-av-8 {
  --fo-av: #B45309;
}

/* Two-register cell: the value, and what qualifies it underneath. */
.fo-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fo-cell-text {
  min-width: 0;
}

/* Regular weight by default. A table where the name, the village, the surveyor
   and the date are all semibold has nothing emphasised — everything competes.
   Only the two values that identify the row take the heavier weight: the
   farmer's name (.is-name) and the unique id (.fl-uid). */
.fo-cell-main {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--fo-ink);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fo-cell-sub {
  display: block;
  margin-top: 1px;
  font-size: 0.6875rem;
  color: var(--fo-faint);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A quantity with its share of the whole drawn underneath. */
.fo-cell-main.is-name {
  font-weight: 600;
}

.fo-meter {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--gc-ink-100, #F1F5F9);
  overflow: hidden;
}

.fo-meter>span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fo-hue, var(--olam-primary, #7C3AED));
}

/* Chips: a soft label for a count or a category. */
.fl-chip,
.fo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--fo-r-sm);
  background: var(--gc-ink-100, #F1F5F9);
  color: var(--fo-ink-2);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

.fo-chip.is-violet {
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--gc-t-hero-fg, #6D28D9);
}

.fo-chip.is-green {
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
}

.fo-chip.is-amber {
  background: var(--gc-t-amber-bg, #FFFBEB);
  color: var(--gc-t-amber-fg, #B45309);
}

.fo-chip.is-blue {
  background: var(--gc-t-blue-bg, #EFF6FF);
  color: var(--gc-t-blue-fg, #1D4ED8);
}

.fo-chip.is-mono {
  font-family: var(--gc-font-figure, monospace);
}

/* Status pills — fully rounded, 50-level ground, a dot for the state so the
   pill still reads without its colour. */
.pill,
.fo-pill-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.pill>i {
  display: none;
}

.pill::before,
.fo-pill-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pill-approved,
.fo-pill-status.is-approved {
  background: var(--gc-t-green-bg, #ECFDF5);
  border-color: var(--gc-t-green-br, #A7F3D0);
  color: var(--gc-t-green-fg, #047857);
}

.pill-pending,
.fo-pill-status.is-pending {
  background: var(--gc-t-amber-bg, #FFFBEB);
  border-color: var(--gc-t-amber-br, #FDE68A);
  color: var(--gc-t-amber-fg, #B45309);
}

.pill-rejected,
.fo-pill-status.is-rejected {
  background: var(--gc-t-cyan-bg, #FEF2F2);
  border-color: var(--gc-t-cyan-br, #FECACA);
  color: var(--gc-t-cyan-fg, #B91C1C);
}

.fo-pill-status.is-neutral {
  background: var(--gc-ink-100, #F1F5F9);
  border-color: var(--fo-line);
  color: var(--fo-muted);
}

/* Row actions — square icon buttons, quiet until hovered. */
.fo-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.fo-icon-btn,
.btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--fo-r-sm);
  background: transparent;
  color: var(--fo-faint);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease;
}

.fo-icon-btn:hover,
.btn-view:hover {
  background: var(--gc-ink-100, #F1F5F9);
  border-color: var(--fo-line);
  color: var(--fo-ink);
  text-decoration: none;
}

.fo-icon-btn.is-approve:hover {
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
  border-color: var(--gc-t-green-br, #A7F3D0);
}

.fo-icon-btn.is-reject:hover {
  background: var(--gc-t-cyan-bg, #FEF2F2);
  color: var(--gc-t-cyan-fg, #B91C1C);
  border-color: var(--gc-t-cyan-br, #FECACA);
}

/* The list pages label their view action. Keep the word, drop the box. */
.btn-view {
  width: auto;
  padding: 0 9px;
}

/* Checkboxes. */
.farmer-table input[type="checkbox"],
.fo-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--olam-primary, #7C3AED);
  cursor: pointer;
  vertical-align: middle;
}

/* Empty state. */
.fl-empty,
.fo-empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--fo-muted);
}

.fl-empty>i,
.fo-empty>i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--gc-ink-100, #F1F5F9);
  color: var(--fo-faint);
  font-size: 1rem;
}

.fl-empty-title,
.fo-empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fo-ink);
}

.fl-empty-hint,
.fo-empty-hint {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--fo-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   10. TABLE FOOTER · PAGINATION
   Rows-per-page and the range on the left, page buttons on the right.
   ─────────────────────────────────────────────────────────────────────────── */

.fl-pagination,
.fo-table-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 14px 16px !important;
  border-top: 1px solid var(--olam-border, #e2e8f0) !important;
  background: var(--olam-surface, #ffffff) !important;
  font-size: 0.8125rem !important;
  color: var(--olam-text-muted, #64748b) !important;
}

[data-theme="dark"] .fl-pagination,
[data-theme="dark"] .fo-table-foot {
  background: var(--olam-surface, #1e293b) !important;
  border-top-color: var(--olam-border, #334155) !important;
  color: #94a3b8 !important;
}

.fo-rows-per-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fo-rows-per-page select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-sm);
  background: var(--fo-card);
  color: var(--fo-ink);
  font-size: 0.75rem;
}

.fl-page-btns,
.fo-pager {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
}

.fl-page-btn,
.fo-page-btn {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid var(--olam-border, #cbd5e1) !important;
  background: var(--olam-surface, #ffffff) !important;
  color: var(--olam-text, #334155) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
  margin: 0 1px !important;
  cursor: pointer !important;
}

.fl-page-btn:hover:not(.active):not(.disabled):not(.is-disabled),
.fo-page-btn:hover:not(.active):not(.disabled):not(.is-disabled) {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

.fl-page-btn.active,
.fo-page-btn.active {
  background: var(--olam-primary, #059138) !important;
  border-color: var(--olam-primary, #059138) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(5, 145, 56, 0.3) !important;
  cursor: default !important;
}

[data-theme="dark"] .fl-page-btn,
[data-theme="dark"] .fo-page-btn {
  background: var(--olam-surface, #1e293b) !important;
  border-color: var(--olam-border, #334155) !important;
  color: var(--olam-text, #cbd5e1) !important;
}

[data-theme="dark"] .fl-page-btn:hover:not(.active):not(.disabled):not(.is-disabled),
[data-theme="dark"] .fo-page-btn:hover:not(.active):not(.disabled):not(.is-disabled) {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .fl-page-btn.active,
[data-theme="dark"] .fo-page-btn.active {
  background: var(--olam-primary, #059138) !important;
  border-color: var(--olam-primary, #059138) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(5, 145, 56, 0.4) !important;
}

.fo-page-btn.is-disabled,
.fl-page-btn.is-disabled,
.fl-page-btn.disabled,
.fo-page-btn.disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  background: var(--olam-surface, #ffffff) !important;
  border: 1px solid var(--olam-border, #e2e8f0) !important;
  color: var(--olam-text-muted, #94a3b8) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .fo-page-btn.is-disabled,
[data-theme="dark"] .fl-page-btn.is-disabled,
[data-theme="dark"] .fl-page-btn.disabled,
[data-theme="dark"] .fo-page-btn.disabled {
  background: var(--olam-surface, #1e293b) !important;
  border-color: var(--olam-border, #334155) !important;
  color: #64748b !important;
}

.fl-page-ellipsis {
  padding: 0 6px !important;
  color: var(--olam-text-muted, #64748b) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   11. ENTITY HEADER
   A detail page opens with the record itself: avatar, name, the few facts that
   identify it, and the decision buttons. A violet rule down the leading edge
   marks it as the subject of everything below.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-entity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* 22px on the left: the 3px accent rule eats into the padding, and at 18px
     the avatar sat right on top of it. */
  padding: 14px 18px 14px 22px;
  margin: 0 0 16px;
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-left: 3px solid var(--olam-primary, #7C3AED);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
}

.fo-entity-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.fo-entity-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fo-ink);
}

.fo-verified {
  color: var(--gc-t-green-chip, #10B981);
  font-size: 0.8125rem;
}

/* Meta line: middot-separated facts, each with its own small mark. */
.fo-entity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 5px 0 0;
  font-size: 0.75rem;
  color: var(--fo-muted);
}

.fo-entity-meta>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fo-entity-meta .fo-dot {
  color: var(--fo-faint);
  opacity: 0.6;
}

.fo-entity-meta .fo-mono {
  font-size: 0.75rem;
}

.fo-entity-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   12. METRIC STRIP
   The small measures under an entity header. Not KPI cards — no trend, no
   menu — just a labelled figure with a hue dot to tie it to its family.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.fo-metric {
  position: relative;
  overflow: hidden;
  padding: 11px 14px 12px;
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-top: 3px solid var(--fo-hue, var(--olam-primary, #7C3AED));
  border-radius: var(--fo-r-lg);
  box-shadow: var(--fo-shadow);
}

.fo-metric-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fo-muted);
  text-transform: none;
}

/* A small square, not a disc — the same mark the compact KPI tiles carry, so a
   measure is recognisable as a measure wherever it appears. */
.fo-metric-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--fo-hue, var(--olam-primary, #7C3AED));
  flex: 0 0 auto;
}

.fo-metric-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--gc-font-figure, monospace);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fo-ink);
}

.fo-metric-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fo-faint);
  font-family: Inter, sans-serif;
}

.fo-metric-note {
  margin-top: 4px;
  font-size: 0.6875rem;
  color: var(--fo-faint);
}

/* ───────────────────────────────────────────────────────────────────────────
   13. TABS
   Underline tabs for the sections of one record. The count rides in a chip so
   an empty section says so before it is opened.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-tabs,
.nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--fo-line);
}

.fo-tab,
.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--fo-r) var(--fo-r) 0 0;
  background: transparent;
  color: var(--fo-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 150ms ease;
}

.fo-tab:hover,
.nav-tabs .nav-link:hover {
  color: var(--fo-ink);
  background: var(--fo-head);
  text-decoration: none;
}

.fo-tab.active,
.nav-tabs .nav-link.active {
  background: var(--gc-t-hero-bg, #F5F3FF);
  border-bottom-color: var(--olam-primary, #7C3AED);
  color: var(--olam-primary, #7C3AED);
  font-weight: 600;
}

.fo-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gc-ink-100, #F1F5F9);
  color: var(--fo-muted);
  font-size: 0.625rem;
  font-weight: 600;
}

.fo-tab.active .fo-tab-count {
  background: #FFFFFF;
  color: var(--olam-primary, #7C3AED);
}

/* ───────────────────────────────────────────────────────────────────────────
   14. SECTION CARDS AND FIELD GRIDS
   A detail section is a titled card; its body is a grid of fields, each an
   uppercase micro-label over a mono value, divided by hairlines rather than
   boxed individually.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-section {
  margin: 0 0 16px;
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
  overflow: hidden;
}

.fo-section-head,
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--fo-card);
  border: 0;
  border-bottom: 1px solid var(--fo-line);
}

.fo-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--fo-r-sm);
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
  font-size: 0.75rem;
}

.fo-section-title,
.card-header h4,
.card-header .card-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fo-ink);
}

.fo-section-count {
  font-size: 0.75rem;
  color: var(--fo-faint);
  font-weight: 400;
}

.fo-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.fo-section-body {
  padding: 0;
}

.fo-section-body.is-padded {
  padding: 16px;
}

/* Field grid — hairlines only, so 8 fields read as one block. */
.fo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--fo-line-soft);
}

.fo-field {
  padding: 11px 16px 12px;
  border-right: 1px solid var(--fo-line-soft);
  border-bottom: 1px solid var(--fo-line-soft);
  min-width: 0;
}

.fo-field:last-child {
  border-right: 0;
}

.fo-field-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-faint);
}

.fo-field-value {
  display: block;
  margin-top: 5px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fo-ink);
  word-break: break-word;
}

.fo-field-value.is-mono {
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
}

.fo-field-value.is-empty {
  color: var(--fo-faint);
  font-style: italic;
  font-weight: 400;
}

/* A field the page wants to lead with gets a pale wash, not a heavier border. */
.fo-field.is-highlight {
  background: var(--gc-t-hero-bg, #F5F3FF);
}

.fo-field.is-highlight .fo-field-value {
  color: var(--gc-t-hero-fg, #6D28D9);
}

/* Location trail inside a detail section. */
.fo-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 16px;
  background: var(--gc-t-hero-bg, #F5F3FF);
  border-bottom: 1px solid var(--fo-line-soft);
  font-size: 0.8125rem;
  color: var(--fo-ink-2);
}

.fo-trail .fo-trail-sep {
  color: var(--fo-faint);
}

.fo-trail .fo-trail-last {
  color: var(--olam-primary, #7C3AED);
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────────
   15. ACTIVITY TIMELINE
   ─────────────────────────────────────────────────────────────────────────── */

.fo-timeline {
  padding: 14px 16px 6px;
}

.fo-tl-item {
  position: relative;
  padding: 0 0 16px 22px;
}

.fo-tl-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fo-card);
  border: 2px solid var(--fo-hue, var(--olam-primary, #7C3AED));
}

.fo-tl-item::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--fo-line);
}

.fo-tl-item:last-child {
  padding-bottom: 4px;
}

.fo-tl-item:last-child::after {
  display: none;
}

.fo-tl-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fo-ink);
}

.fo-tl-body {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--fo-muted);
}

.fo-tl-time {
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--fo-faint);
}

/* ───────────────────────────────────────────────────────────────────────────
   16. DOCUMENT AND PHOTO TILES
   ─────────────────────────────────────────────────────────────────────────── */

.fo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
}

.fo-tile {
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-lg);
  overflow: hidden;
  background: var(--fo-card);
}

.fo-tile-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
  background: var(--gc-ink-50, #F8FAFC);
  color: var(--fo-faint);
  font-size: 1.5rem;
}

.fo-tile-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fo-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
  font-size: 0.625rem;
  font-weight: 600;
}

.fo-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--fo-line);
  font-size: 0.75rem;
  color: var(--fo-ink-2);
}

/* Small numbered thumbnails, as the pipe list uses for its three captures. */
.fo-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fo-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gc-t-green-br, #A7F3D0);
  border-radius: var(--fo-r-sm);
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
  font-size: 0.75rem;
  text-decoration: none;
}

.fo-thumb:hover {
  background: #D1FAE5;
  text-decoration: none;
}

.fo-thumb-n {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gc-t-green-chip, #10B981);
  color: #FFFFFF;
  font-size: 0.5625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   17. BULK-ACTION BAR
   Actions that operate on a selection sit above the table with the rule that
   makes them safe stated on the left. Destructive first, reading right to left
   by weight, as the reference orders them.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  margin: 0 0 16px;
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
}

.fo-bulkbar-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--fo-muted);
}

.fo-bulkbar-note>i {
  color: var(--fo-faint);
}

.fo-bulkbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.fo-btn-danger {
  background: #DC2626;
  border-color: #DC2626;
  color: #FFF;
  font-weight: 600;
}

.fo-btn-warning {
  background: #EA580C;
  border-color: #EA580C;
  color: #FFF;
  font-weight: 600;
}

.fo-btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #FFF;
}

.fo-btn-warning:hover {
  background: #C2410C;
  border-color: #C2410C;
  color: #FFF;
}

/* ───────────────────────────────────────────────────────────────────────────
   18. TOGGLE AND STATE MARKS
   ─────────────────────────────────────────────────────────────────────────── */

.fo-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

.fo-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fo-toggle-track {
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--gc-ink-300, #CBD5E1);
  transition: background 150ms ease;
  flex: 0 0 auto;
}

.fo-toggle-track::after {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  margin: 2px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: var(--fo-shadow-pop);
  transition: transform 150ms ease;
}

.fo-toggle input:checked+.fo-toggle-track {
  background: var(--gc-t-green-chip, #10B981);
}

.fo-toggle input:checked+.fo-toggle-track::after {
  transform: translateX(17px);
}

.fo-toggle input:focus-visible+.fo-toggle-track {
  box-shadow: var(--olam-focus-ring, 0 0 0 3px rgb(124 58 237 / 0.20));
}

.fo-toggle-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fo-ink-2);
}

/* ── The settings pages' switch ──
   olam-legacy-overrides.css ships a complete one — a 44x24 box, an absolutely
   positioned track and a ::before handle, every dimension !important. An
   earlier version of this file re-laid it out as an inline-flex box with its
   own ::after handle; the two layouts fought and the track ended up printed
   over the "Enabled" label beside it.

   Only the colour needed changing: on is the theme's green, not the client's
   accent, because this switch means active/inactive rather than "branded". */
.main-content .olam-switch input:checked+.olam-switch-slider {
  background-color: var(--gc-t-green-chip, #10B981) !important;
  border-color: var(--gc-t-green-chip, #10B981) !important;
}

.main-content .olam-switch .olam-switch-slider {
  border-color: var(--gc-ink-300, #CBD5E1) !important;
}

.main-content .status-text {
  font-size: 0.75rem;
  font-weight: 500;
}

.main-content .status-text.text-success {
  color: var(--gc-t-green-fg, #047857) !important;
}

.main-content .status-text.text-danger {
  color: var(--fo-muted) !important;
}

/* Row actions on the settings pages — 56 screens share this partial, so this
   is where Edit and Delete get their shape for all of them. */
.olam-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

/* Keep Action header + cells centered across Settings/list tables */
.main-content table.display thead th:last-child,
.main-content table.display tbody td:last-child,
.main-content table.userTable thead th:last-child,
.main-content table.userTable tbody td:last-child {
  text-align: center;
}

.olam-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-sm);
  background: var(--fo-card);
  color: var(--fo-ink-2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease;
}

.olam-act:hover {
  background: var(--fo-head);
  border-color: var(--gc-ink-300, #CBD5E1);
  color: var(--fo-ink);
  text-decoration: none;
}

.olam-act--delete {
  border-color: var(--gc-t-cyan-br, #FECACA);
  background: var(--gc-t-cyan-bg, #FEF2F2);
  color: var(--gc-t-cyan-fg, #B91C1C);
}

.olam-act--delete:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
}

.olam-act--view:hover {
  background: var(--gc-t-hero-bg, #F5F3FF);
  border-color: var(--gc-t-hero-br, #DDD6FE);
  color: var(--gc-t-hero-fg, #6D28D9);
}

/* Small square state marks — the security flags column. */
.fo-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-sm);
  background: var(--gc-ink-50, #F8FAFC);
  color: var(--fo-faint);
  font-size: 0.6875rem;
}

.fo-flag.is-ok {
  background: var(--gc-t-green-bg, #ECFDF5);
  border-color: var(--gc-t-green-br, #A7F3D0);
  color: var(--gc-t-green-fg, #047857);
}

.fo-flag.is-warn {
  background: var(--gc-t-amber-bg, #FFFBEB);
  border-color: var(--gc-t-amber-br, #FDE68A);
  color: var(--gc-t-amber-fg, #B45309);
}

.fo-flag.is-error {
  background: var(--gc-t-cyan-bg, #FEF2F2);
  border-color: var(--gc-t-cyan-br, #FECACA);
  color: var(--gc-t-cyan-fg, #B91C1C);
}

/* ───────────────────────────────────────────────────────────────────────────
   19. MAP PANELS
   The map is evidence for a decision, not the subject of the page. It gets a
   compact frame with the figures beside it, so the polygon, its numbers and
   the approve/reject pair are all in view at once without scrolling.
   ─────────────────────────────────────────────────────────────────────────── */

.fo-map-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
}

.fo-map-legend-title {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fo-faint);
  margin-right: 4px;
}

.fo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r);
  background: var(--gc-ink-50, #F8FAFC);
}

.fo-legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--fo-hue, var(--olam-primary, #7C3AED));
  border: 1px solid rgb(15 23 42 / 0.12);
  flex: 0 0 auto;
}

.fo-legend-text {
  line-height: 1.25;
}

.fo-legend-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fo-ink);
}

.fo-legend-note {
  display: block;
  font-size: 0.625rem;
  color: var(--fo-faint);
}

/* Plot map card: figures rail · map · validation panel. */
.fo-map-card {
  margin: 0 0 16px;
}

.fo-map-layout {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 236px;
  align-items: stretch;
}

@media (max-width: 1199px) {
  .fo-map-layout {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .fo-map-layout>.fo-map-side {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--fo-line);
  }
}

@media (max-width: 767px) {
  .fo-map-layout {
    grid-template-columns: 1fr;
  }

  .fo-map-layout>.fo-map-rail {
    border-right: 0;
    border-bottom: 1px solid var(--fo-line);
  }
}

.fo-map-rail {
  padding: 12px 14px;
  border-right: 1px solid var(--fo-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fo-map-stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-faint);
}

.fo-map-stat-value {
  margin-top: 3px;
  font-family: var(--gc-font-figure, monospace);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fo-ink);
}

.fo-map-stat-value.is-empty {
  font-style: italic;
  font-weight: 400;
  color: var(--fo-faint);
  font-family: inherit;
}

.fo-map-frame {
  position: relative;
  background: var(--gc-ink-100, #F1F5F9);
}

/* Compact by intent: tall enough to judge a polygon's shape, short enough that
   the panel beside it and the row below both stay on screen.

   The selectors name map containers only. An earlier draft matched [id^="map"],
   which also caught #maptable — the detail table that sits under the map — and
   would have squashed it to the map's height. */
.fo-map-frame>div,
.fo-map-frame>.fo-map-canvas,
div#map,
div#map1,
div#map2,
div[id^="map_"],
div[id^="polygon_map"],
div[id^="plotmap"],
.olam-map,
.plot-map,
.polygon-map,
.leaflet-map {
  height: 280px !important;
  min-height: 0 !important;
  width: 100%;
  border-radius: 0;
}

/* Where a page shows one map on its own, it may go a little taller. */
.fo-map-frame.is-tall>div,
.fo-map-frame.is-tall>.fo-map-canvas {
  height: 360px !important;
}

.fo-map-badge {
  position: absolute;
  z-index: 400;
  top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--fo-line);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fo-ink);
  box-shadow: var(--fo-shadow-pop);
}

.fo-map-badge.is-left {
  left: 8px;
}

.fo-map-badge.is-right {
  right: 8px;
}

.fo-map-side {
  padding: 12px 14px;
  border-left: 1px solid var(--fo-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fo-map-side-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fo-ink);
}

.fo-status-box {
  padding: 9px 11px;
  border: 1px solid var(--gc-t-amber-br, #FDE68A);
  border-left: 3px solid var(--gc-t-amber-chip, #F59E0B);
  border-radius: var(--fo-r);
  background: var(--gc-t-amber-bg, #FFFBEB);
}

.fo-status-box.is-approved {
  border-color: var(--gc-t-green-br, #A7F3D0);
  border-left-color: var(--gc-t-green-chip, #10B981);
  background: var(--gc-t-green-bg, #ECFDF5);
}

.fo-status-box.is-rejected {
  border-color: var(--gc-t-cyan-br, #FECACA);
  border-left-color: var(--gc-t-cyan-chip, #EF4444);
  background: var(--gc-t-cyan-bg, #FEF2F2);
}

.fo-check-ok {
  color: var(--gc-t-green-fg, #047857);
  font-weight: 600;
  font-size: 0.8125rem;
}

.fo-check-fail {
  color: var(--gc-t-cyan-fg, #B91C1C);
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   20. SIDEBAR AND HEADER
   ─────────────────────────────────────────────────────────────────────────── */

.sidebar {
  background: var(--fo-card);
  border-right: 1px solid var(--fo-line);
}

.sb-section {
  padding: 4px 10px;
}

.sb-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 10px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fo-faint);
}

.sb-section-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--olam-primary, #7C3AED);
  opacity: 0.55;
  flex: 0 0 auto;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: var(--fo-r);
  color: var(--fo-ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 150ms ease;
}

.sb-item>i {
  width: 16px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--fo-faint);
}

.sb-item:hover {
  background: var(--gc-ink-50, #F8FAFC);
  color: var(--fo-ink);
  text-decoration: none;
}

.sb-item:hover>i {
  color: var(--fo-ink-2);
}

.sb-item.active {
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
  font-weight: 600;
}

.sb-item.active>i {
  color: var(--olam-primary, #7C3AED);
}

/* Count badge on a nav item. */
.sb-count {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gc-ink-100, #F1F5F9);
  color: var(--fo-muted);
  font-size: 0.625rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sb-item.active .sb-count {
  background: #FFFFFF;
  color: var(--olam-primary, #7C3AED);
}

.sb-divider {
  margin: 6px 12px;
  border: 0;
  border-top: 1px solid var(--fo-line);
}

.sb-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 37px;
  border-radius: var(--fo-r-sm);
  color: var(--fo-muted);
  font-size: 0.78125rem;
  text-decoration: none;
}

.sb-sub-item:hover {
  background: var(--gc-ink-50, #F8FAFC);
  color: var(--fo-ink);
  text-decoration: none;
}

.sb-sub-item.active {
  color: var(--olam-primary, #7C3AED);
  font-weight: 600;
}

.sb-arrow,
.sb-nested-arrow {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--fo-faint);
  transition: transform 150ms ease;
}

.sb-item.collapsed .sb-arrow,
.sb-nested-toggle.collapsed .sb-nested-arrow {
  transform: rotate(-90deg);
}

/* ── Season switcher (header) ──
   The season applies to the whole portal, so it sits with the other global
   controls rather than being redrawn as a strip on each list page. Same shape
   as the language switcher beside it. */
.olam-season-switcher {
  position: relative;
  display: inline-flex;
}

.olam-season-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--fo-control-h);
  padding: 0 10px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r);
  background: var(--fo-card);
  color: var(--fo-ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 150ms ease;
}

.olam-season-trigger:hover {
  background: var(--fo-head);
  border-color: var(--gc-ink-300, #CBD5E1);
  color: var(--fo-ink);
}

/* A season other than "all" is a filter the whole portal is under — worth
   showing without having to open the menu. */
.olam-season-trigger.is-set {
  border-color: var(--gc-t-hero-br, #DDD6FE);
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
}

.olam-season-trigger>i {
  font-size: 0.75rem;
  color: var(--fo-faint);
}

.olam-season-trigger.is-set>i {
  color: var(--olam-primary, #7C3AED);
}

.olam-season-caret {
  font-size: 0.625rem;
}

.olam-season-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1200;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-lg);
  background: var(--fo-card);
  box-shadow: var(--olam-shadow-lg, 0 10px 15px -3px rgb(15 23 42 / 0.10));
}

.olam-season-option {
  display: block;
  padding: 7px 10px;
  border-radius: var(--fo-r-sm);
  color: var(--fo-ink-2);
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
}

.olam-season-option:hover {
  background: var(--fo-head);
  color: var(--fo-ink);
  text-decoration: none;
}

.olam-season-option.active {
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
  font-weight: 600;
}

@media (max-width: 767px) {

  /* The label goes on a phone; the icon and caret still say what it is. */
  .olam-season-trigger .olam-season-label {
    display: none;
  }
}

.header,
.nav-header,
.olam-header {
  background: var(--fo-card);
  border-bottom: 1px solid var(--fo-line);
  box-shadow: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   21. MODALS, ALERTS, MISC
   ─────────────────────────────────────────────────────────────────────────── */

.modal-content {
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--olam-shadow-lg, 0 10px 15px -3px rgb(15 23 42 / 0.10));
}

.modal-header,
.modal-footer {
  border-color: var(--fo-line);
  padding: 13px 18px;
}

.modal-body {
  padding: 18px;
}

.modal-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fo-ink);
}

.alert {
  border-radius: var(--fo-r-lg);
  border: 1px solid var(--fo-line);
  font-size: 0.8125rem;
  padding: 11px 14px;
}

.alert-success {
  background: var(--gc-t-green-bg, #ECFDF5);
  border-color: var(--gc-t-green-br, #A7F3D0);
  color: var(--gc-t-green-fg, #047857);
}

.alert-danger {
  background: var(--gc-t-cyan-bg, #FEF2F2);
  border-color: var(--gc-t-cyan-br, #FECACA);
  color: var(--gc-t-cyan-fg, #B91C1C);
}

.alert-warning {
  background: var(--gc-t-amber-bg, #FFFBEB);
  border-color: var(--gc-t-amber-br, #FDE68A);
  color: var(--gc-t-amber-fg, #B45309);
}

.alert-info {
  background: var(--gc-t-blue-bg, #EFF6FF);
  border-color: var(--gc-t-blue-br, #BFDBFE);
  color: var(--gc-t-blue-fg, #1D4ED8);
}

/* DataTables chrome, so the screens that still use it agree with the rest. */
/* Height, border and radius for these come from §8 with the rest of the
   controls — a second height here is how a control ends up 32px on one screen
   and 34px on the next. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  padding: 0 10px;
}

/* ══ DATATABLES BLUE PAGINATION (REPORT UI STYLE) ══ */
.dataTables_wrapper .dataTables_paginate,
.dataTables_paginate,
div.dataTables_wrapper div.dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: right !important;
  gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate span,
.dataTables_paginate span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .pagination,
.dataTables_paginate .pagination,
.pagination,
ul.pagination {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 4px !important;
  display: flex !important;
  align-items: center !important;
}

.pagination .page-item,
.dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.pagination .page-item .page-link,
.pagination .page-link,
.dataTables_paginate .paginate_button a,
.dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a,
.dataTables_wrapper .dataTables_paginate span .paginate_button,
.dataTables_wrapper .dataTables_paginate span a.paginate_button {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid var(--olam-border, #cbd5e1) !important;
  background: var(--olam-surface, #ffffff) !important;
  color: var(--olam-text, #334155) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
  margin: 0 1px !important;
  cursor: pointer !important;
}

.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination .page-link:not(.active):not(.disabled):hover,
.dataTables_paginate .paginate_button:not(.current):not(.disabled):hover,
.dataTables_paginate .paginate_button:not(.current):not(.disabled) a:hover,
.dataTables_paginate a.paginate_button:not(.current):not(.disabled):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button a:hover:not(.current):not(.disabled),
.dataTables_wrapper .dataTables_paginate span .paginate_button:hover:not(.current):not(.disabled),
.dataTables_wrapper .dataTables_paginate span a.paginate_button:hover:not(.current):not(.disabled) {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Active Page Button (Report Brand Green) */
.pagination .page-item.active .page-link,
.pagination .page-link.active,
.dataTables_paginate .paginate_button.active a,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.active a,
.dataTables_wrapper .dataTables_paginate span .paginate_button.current,
.dataTables_wrapper .dataTables_paginate span .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate span a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate span a.paginate_button.current:hover {
  background: var(--olam-primary, #059138) !important;
  border-color: var(--olam-primary, #059138) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(5, 145, 56, 0.3) !important;
  cursor: default !important;
}

/* Disabled Previous / Next buttons */
.pagination .page-item.disabled .page-link,
.pagination .page-link.disabled,
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled a,
.dataTables_paginate a.paginate_button.disabled,
.dataTables_paginate a.paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate span .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate span .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate span a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate span a.paginate_button.disabled:hover {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: var(--olam-surface, #ffffff) !important;
  border-color: var(--olam-border, #e2e8f0) !important;
  color: var(--olam-text-muted, #94a3b8) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Dark Mode */
[data-theme="dark"] .pagination .page-item .page-link,
[data-theme="dark"] .pagination .page-link,
[data-theme="dark"] .dataTables_paginate .paginate_button a,
[data-theme="dark"] .dataTables_paginate a.paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate span .paginate_button,
[data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--olam-surface, #1e293b) !important;
  border-color: var(--olam-border, #334155) !important;
  color: var(--olam-text, #cbd5e1) !important;
}

[data-theme="dark"] .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
[data-theme="dark"] .dataTables_paginate .paginate_button:not(.current):not(.disabled) a:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate span .paginate_button:hover:not(.current):not(.disabled),
[data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link,
[data-theme="dark"] .dataTables_paginate .paginate_button.active a,
[data-theme="dark"] .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.active a,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate span .paginate_button.current,
[data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--olam-primary, #059138) !important;
  border-color: var(--olam-primary, #059138) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(5, 145, 56, 0.4) !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link,
[data-theme="dark"] .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate span .paginate_button.disabled,
[data-theme-version="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: var(--olam-surface, #1e293b) !important;
  border-color: var(--olam-border, #334155) !important;
  color: #64748b !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* The settings pages' title row, brought to the same rhythm as .fl-page-head. */
.page-titles {
  padding: 0;
  margin: 0 0 18px;
  background: none;
  border: 0;
  box-shadow: none;
}

.page-titles .welcome-text h4 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fo-ink);
  margin: 0;
}

.olam-settings-page-sub {
  font-size: 0.8125rem;
  color: var(--fo-muted);
  margin-top: 5px;
}

/* ───────────────────────────────────────────────────────────────────────────
   21b. LOADING INDICATOR
   The satellite mark from the DREAM platform, used for both the first-load
   preloader and the loader that appears on navigation — one animation, so a
   cold start and a click-through look the same.

   It replaces a CSS ring that spun around a static logo. The old ring rules
   live in olam-theme-engine.css and olam-legacy-overrides.css, the second set
   with !important throughout; the elements they styled are gone from the
   markup, and these rules neutralise the containers they left behind.
   ─────────────────────────────────────────────────────────────────────────── */

.olam-satellite-loader {
  width: 96px;
  height: 96px;
  object-fit: contain;
  user-select: none;
  /* The GIF ships on a light ground. Multiply lets a dark surface show through
     the white, so one asset works in both themes. */
  mix-blend-mode: multiply;
}

html[data-theme="dark"] .olam-satellite-loader {
  mix-blend-mode: screen;
}

/* The caption under the mark. It was the brand colour at 700 and 600 weight in
   the two sheets, with letter-spacing — which made "Loading…" read as a heading
   over the animation rather than as a note under it. Same face, size and weight
   as a table cell: Inter 13px regular, in ink.

   Both source rules use !important (the legacy one on every property), so these
   do too. */
.olam-preloader-text,
.olam-loader-text {
  font-family: var(--olam-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--fo-ink) !important;
}

html[data-theme="dark"] .olam-preloader-text,
html[data-theme="dark"] .olam-loader-text,
[data-theme="dark"] .olam-preloader-text,
[data-theme-version="dark"] .olam-preloader-text {
  color: var(--fo-ink) !important;
}

/* The wrapper was sized to the 80px ring and centred the logo inside it. */
.olam-preloader-spinner-wrapper,
.olam-loader-container {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Nothing renders these any more, but both stylesheets still define them with
   an infinite animation. Belt and braces against a cached sheet drawing a ring
   behind the mark. */
.olam-preloader-spinner,
.olam-loader-spinner,
.olam-preloader-favicon-box,
.olam-loader-logo {
  display: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   22. LEGACY DETAIL-PAGE CHROME
   The detail screens carried their colours in inline style attributes, which
   no stylesheet could reach — which is why they stayed deep purple through two
   re-themes. Those attributes are now these classes.
   ─────────────────────────────────────────────────────────────────────────── */

/* The 43px strip that labelled a section. The layout's own script normally
   lifts it into a real .card-header and removes it; these rules are what it
   looks like in the moment before that runs, and if it ever doesn't. */
.fo-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  margin: 0 0 12px;
  background: var(--fo-head);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-lg);
}

.fo-band p {
  margin: 0;
}

/* The strip's label was white on purple. On a light ground it has to be ink,
   and .text-white carries !important, so this does too. */
.fo-band .text-white,
.fo-band p,
.fo-band b {
  color: var(--fo-ink) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-top: 0 !important;
}

/* The KPI tiles on the approved-farmer screens, which were filled with the
   same purple. White card, ink figure — the same anatomy as .stat-card. */
.card.mini-stat,
.countBox {
  background: var(--fo-card) !important;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
  color: var(--fo-ink);
}

.card.mini-stat .text-white,
.card.mini-stat h3,
.card.mini-stat h4,
.card.mini-stat p,
.countBox .text-white,
.countBox h3,
.countBox h4,
.countBox p {
  color: var(--fo-ink) !important;
}

.card.mini-stat p,
.countBox p {
  color: var(--fo-muted) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   23. FARMER 360
   That page keeps its stylesheet inline in the body, so it loads after this
   file and wins on equal specificity. These rules are deliberately one level
   more specific (html body .f360 …) — it is the only way to reach it from a
   stylesheet, short of rewriting 550 lines of inline CSS.
   ─────────────────────────────────────────────────────────────────────────── */

html body .f360 {
  font-size: 0.875rem;
  color: var(--fo-ink-2);
}

/* Module rail → the reference's underline tabs. */
html body .f360 .f360-module-rail {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fo-line);
  box-shadow: none;
}

html body .f360 .f360-module-rail a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  margin-bottom: -1px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--fo-r) var(--fo-r) 0 0;
  background: transparent !important;
  color: var(--fo-muted) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: none !important;
}

html body .f360 .f360-module-rail a:hover {
  background: var(--fo-head) !important;
  color: var(--fo-ink) !important;
}

html body .f360 .f360-module-rail a.active {
  background: var(--gc-t-hero-bg, #F5F3FF) !important;
  border-bottom-color: var(--olam-primary, #7C3AED) !important;
  color: var(--olam-primary, #7C3AED) !important;
  font-weight: 600;
  box-shadow: none !important;
}

html body .f360 .f360-module-rail a.active i {
  color: var(--olam-primary, #7C3AED) !important;
}

/* The count each tab carries. Sits on the tab's own ground when inactive and
   on white when active, so it reads as part of the tab rather than as a badge
   stuck to it. */
html body .f360 .f360-module-rail a .fo-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gc-ink-100, #F1F5F9) !important;
  color: var(--fo-muted) !important;
  font-size: 0.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

html body .f360 .f360-module-rail a.active .fo-tab-count {
  background: #FFFFFF !important;
  color: var(--olam-primary, #7C3AED) !important;
}

/* Section cards and the field grid inside them. */
html body .f360 .f-section {
  background: var(--fo-card);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
  overflow: hidden;
  margin-bottom: 16px;
}

html body .f360 .section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--fo-card) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fo-line) !important;
  color: var(--fo-ink) !important;
  font-size: 0.875rem;
  font-weight: 600;
}

html body .f360 .section-header > i,
html body .f360 .section-header .collapse-icon {
  color: var(--olam-primary, #7C3AED);
}

html body .f360 .btn-fo-reject,
html body .f360 .section-header .btn-fo-reject {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #B91C1C !important;
}

html body .f360 .btn-fo-reject i,
html body .f360 .section-header .btn-fo-reject i,
.btn-fo-reject i {
  color: #B91C1C !important;
}

html body .f360 .btn-fo-reject:hover,
html body .f360 .section-header .btn-fo-reject:hover {
  background: #FEE2E2 !important;
  border-color: #FCA5A5 !important;
  color: #991B1B !important;
}

html body .f360 .btn-fo-reject:hover i,
html body .f360 .section-header .btn-fo-reject:hover i {
  color: #991B1B !important;
}

html body .f360 .btn-fo-approve,
html body .f360 .section-header .btn-fo-approve {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #FFFFFF !important;
}

html body .f360 .btn-fo-approve i,
html body .f360 .section-header .btn-fo-approve i,
.btn-fo-approve i {
  color: #FFFFFF !important;
}

/* The gradient bands. Defined inline on the page as
     .sh-purple      linear-gradient(to right,#5e35b1,#7c5cbf)
     .sh-cyan        linear-gradient(to right,#00b8d9,#00e5c8)
     .sh-light-green linear-gradient(to right,#66bb6a,#81c784)
   — three saturated bars with white uppercase text, which is why the sections
   read as five different products stacked on one page. They become the same
   white card head the rest of the app uses; the family survives as the tint
   behind the section's icon. */
html body .f360 .section-header.sh-purple,
html body .f360 .section-header.sh-cyan,
html body .f360 .section-header.sh-light-green,
html body .f360 .section-header.sh-teal,
html body .f360 .section-header.sh-amber {
  background: var(--fo-card) !important;
  background-image: none !important;
  color: var(--fo-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* The icon becomes a tinted square, as on every other section head. */
html body .f360 .section-header .sh-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: var(--fo-r-sm);
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED) !important;
  font-size: 0.75rem !important;
}

html body .f360 .section-header.sh-cyan .sh-title-icon {
  background: var(--gc-t-teal-bg, #ECFEFF);
  color: var(--gc-t-teal-fg, #0E7490) !important;
}

html body .f360 .section-header.sh-light-green .sh-title-icon {
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857) !important;
}

/* ── Sub-heading inside a section ──
   Personal Details / Area Details / Bank / Location / Documents. Icon square,
   title, a muted count, and whatever action belongs to that block. */
html body .f360 .f360-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  background: var(--fo-card);
}

html body .f360 .f360-sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--fo-r-sm);
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
  font-size: 0.6875rem;
  flex: 0 0 auto;
}

html body .f360 .f360-sub-icon.is-teal {
  background: var(--gc-t-teal-bg, #ECFEFF);
  color: var(--gc-t-teal-fg, #0E7490);
}

html body .f360 .f360-sub-icon.is-green {
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
}

html body .f360 .f360-sub-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fo-ink);
}

html body .f360 .f360-sub-count {
  font-size: 0.75rem;
  color: var(--fo-faint);
  font-weight: 400;
}

html body .f360 .f360-sub-action {
  margin-left: auto;
}

/* ── Field grid ──
   Hairlines only, so eight fields read as one block rather than eight boxes. */
html body .f360 .f360-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--fo-line-soft);
}

@media (max-width: 1400px) {
  html body .f360 .f360-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  html body .f360 .f360-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  html body .f360 .f360-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  html body .f360 .f360-grid {
    grid-template-columns: 1fr;
  }
}

html body .f360 .f360-grid .f-cell {
  padding: 7px 14px 8px;
  border-right: 1px solid var(--fo-line-soft);
  border-bottom: 1px solid var(--fo-line-soft);
  background: transparent;
  min-width: 0;
}

/* The field that says which record this is gets a pale wash — findable without
   reading down the labels. */
html body .f360 .f360-grid .f-cell.is-lead {
  background: var(--gc-t-hero-bg, #F5F3FF);
}

html body .f360 .f360-grid .f-cell.is-lead .f-val {
  color: var(--gc-t-hero-fg, #6D28D9);
}

html body .f360 .f360-grid .f-cell.is-span {
  grid-column: 1 / -1;
}

html body .f360 .f360-grid .f-label {
  line-height: 1.3;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-faint) !important;
}

html body .f360 .f360-grid .f-cell .f-val,
html body .f360 .f360-grid .f-val {
  margin-top: 2px;
  line-height: 1.4;
  font-size: 0.8125rem;
  /* Regular, not medium. The label above it is already doing the separating,
     and every value on the screen at 500 is the same "everything is bold"
     problem the tables had. */
  font-weight: 400;
  color: var(--fo-ink) !important;
  word-break: break-word;
}

html body .f360 .f360-grid .f-val.is-mono {
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
}

/* Empty is stated, not dashed. A dash reads as "zero"; these are blank because
   nobody filled them in, which on a review screen is a different fact. */
html body .f360 .f360-grid .f-val.is-empty {
  color: var(--fo-faint) !important;
  font-style: italic;
  font-weight: 400;
}

html body .f360 .f360-grid .f-unit {
  margin-left: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fo-faint);
  font-family: var(--olam-font);
}

/* ── Location trail ── */
html body .f360 .fo-trail {
  margin: 0;
  padding: 10px 16px;
  background: var(--gc-t-hero-bg, #F5F3FF);
  border-bottom: 1px solid var(--fo-line-soft);
  font-size: 0.8125rem;
  color: var(--fo-ink-2);
}

html body .f360 .fo-trail>i {
  color: var(--olam-primary, #7C3AED);
  margin-right: 4px;
}

/* ── Document tiles ── */
html body .f360 .fo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
}

html body .f360 .fo-tile {
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-lg);
  overflow: hidden;
  background: var(--fo-card);
}

html body .f360 .fo-tile-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gc-t-hero-bg, #F5F3FF), var(--gc-t-teal-bg, #ECFEFF));
  color: var(--fo-faint);
  font-size: 1.5rem;
  cursor: pointer;
}

html body .f360 .fo-tile.is-empty .fo-tile-frame {
  background: var(--gc-ink-50, #F8FAFC);
  cursor: default;
}

/* The thumbnail covers the frame; the icon stays behind it as the fallback a
   removed (broken) image reveals. object-fit: cover so a portrait ID photo and
   a landscape field photo fill the same tile without letterboxing. */
html body .f360 .fo-tile-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

html body .f360 .fo-tile-frame>i {
  z-index: 0;
}

/* Signatures are ink on white and get cropped to nothing by `cover`. */
html body .f360 .fo-tile.is-sign .fo-tile-frame img {
  object-fit: contain;
  padding: 10px;
  background: #FFFFFF;
}

html body .f360 .fo-tile-frame:hover img {
  transform: scale(1.03);
}

html body .f360 .fo-tile-frame img {
  transition: transform 200ms ease;
}

html body .f360 .fo-tile-badge {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
  font-size: 0.625rem;
  font-weight: 600;
}

html body .f360 .fo-tile-badge.is-missing {
  background: var(--gc-t-amber-bg, #FFFBEB);
  color: var(--gc-t-amber-fg, #B45309);
}

html body .f360 .fo-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--fo-line);
  font-size: 0.75rem;
  color: var(--fo-ink-2);
}

/* One line. "Owner signature" and "Plot document 1" were wrapping, which made
   the foot of each tile a different height and the row look ragged. A label
   too long for its tile is cut with an ellipsis and kept in full in the title
   attribute of the tile itself. */
html body .f360 .fo-tile-foot>span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .f360 .fo-tile-foot .fo-tile-view {
  flex: 0 0 auto;
}

html body .f360 .fo-tile-view {
  height: 24px;
  padding: 0 8px;
  font-size: 0.6875rem;
}

html body .f360 .section-header .collapse-icon {
  color: var(--fo-faint) !important;
  margin-left: 10px;
}

/* The buttons in a section head were white-on-colour for the gradient band. */
html body .f360 .section-header .btn-sh-edit,
html body .f360 .section-header .btn-sh-download {
  background: var(--fo-card) !important;
  border: 1px solid var(--fo-line) !important;
  border-radius: var(--fo-r-sm) !important;
  color: var(--fo-ink-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 4px 9px !important;
}

html body .f360 .section-header .btn-sh-edit:hover,
html body .f360 .section-header .btn-sh-download:hover {
  background: var(--fo-head) !important;
  border-color: var(--gc-ink-300, #CBD5E1) !important;
  color: var(--fo-ink) !important;
}

html body .f360 .section-header .btn-sh-approve {
  background: #059669 !important;
  border-color: #059669 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.75rem !important;
  border-radius: var(--fo-r-sm) !important;
  padding: 4px 9px !important;
}

html body .f360 .section-header .btn-sh-reject {
  background: var(--gc-t-cyan-bg, #FEF2F2) !important;
  border-color: var(--gc-t-cyan-br, #FECACA) !important;
  color: var(--gc-t-cyan-fg, #B91C1C) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.75rem !important;
  border-radius: var(--fo-r-sm) !important;
  padding: 4px 9px !important;
}

/* The page draws its grids as `gap: 8px; padding: 8px 12px` with every .f-cell
   carrying `border: 1px solid` and `border-radius: 6px` — eight separate little
   cards per row. Setting only border-right and border-bottom left the other two
   sides and the radius in place, so this states the whole box. */
html body .f360 .field-grid {
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--fo-line-soft);
}

/* Fixed 8-column grids squeeze to nothing on a laptop. Auto-fit gives the same
   row on a wide screen and folds gracefully below it. */
html body .f360 .field-grid.cols-8,
html body .f360 .field-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body .f360 .field-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .f360 .field-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1199px) {

  html body .f360 .field-grid.cols-8,
  html body .f360 .field-grid.cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {

  html body .f360 .field-grid.cols-8,
  html body .f360 .field-grid.cols-4,
  html body .f360 .field-grid.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {

  html body .f360 .field-grid.cols-8,
  html body .f360 .field-grid.cols-4,
  html body .f360 .field-grid.cols-3,
  html body .f360 .field-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

html body .f360 .f-cell {
  padding: 7px 14px 8px;
  border: 0;
  border-right: 1px solid var(--fo-line-soft);
  border-bottom: 1px solid var(--fo-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ── Plot tabs ──
   One plot at a time. Same pill group as the status filters on the list pages,
   with a status dot on each tab so the queue reads without opening anything. */
html body .f360 .f360-plot-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: 14px 16px 0;
  padding: 3px;
  background: var(--gc-ink-100, #F1F5F9);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-lg);
}

html body .f360 .f360-plot-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--fo-r);
  background: transparent;
  color: var(--fo-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: all 150ms ease;
}

html body .f360 .f360-plot-tab:hover {
  color: var(--fo-ink);
}

html body .f360 .f360-plot-tab.active {
  background: var(--fo-card);
  color: var(--fo-ink);
  font-weight: 600;
  box-shadow: var(--fo-shadow-pop);
}

html body .f360 .f360-plot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--gc-t-amber-chip, #F59E0B);
}

html body .f360 .f360-plot-dot.is-approved {
  background: var(--gc-t-green-chip, #10B981);
}

html body .f360 .f360-plot-dot.is-rejected {
  background: var(--gc-t-cyan-chip, #EF4444);
}

html body .f360 .f360-plot-dot.is-pending {
  background: var(--gc-t-amber-chip, #F59E0B);
}

/* A hidden card must stay hidden even though .plot-card sets display. */
html body .f360 .plot-card[hidden] {
  display: none !important;
}

/* A section belonging to another tab. The page's own rules give .f-section a
   background and border, either of which would otherwise paint a strip where
   the hidden section is. */
html body .f360 .f-section[hidden] {
  display: none !important;
}

/* ── Polygon tab ──
   Its cards were dark headers with inline colours; same white card head as
   every other section. */
/* ── Pipe & Aeration ──
   The chips, the table and the photo cells these tabs use, on the same type
   and colours as the rest of the record. Selectors carry .f360 twice over the
   element where the page's own rules are three classes deep. */

/* The row of summary chips above the table. */
html body .f360 .info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--fo-card);
  border-bottom: 1px solid var(--fo-line);
}

html body .f360 .info-item {
  padding: 4px 10px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-sm);
  background: var(--gc-ink-50, #F8FAFC);
  color: var(--fo-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

html body .f360 .info-item strong {
  color: var(--fo-ink);
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* The season band over each table. */
html body .f360 .season-group-header {
  margin: 14px 16px 0;
  padding: 8px 14px;
  border-radius: var(--fo-r-lg) var(--fo-r-lg) 0 0;
  background: var(--fo-head);
  border: 1px solid var(--fo-line);
  border-bottom: 0;
  color: var(--fo-ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

html body .f360 .data-table-section {
  margin: 0 16px 16px;
  border: 1px solid var(--fo-line);
  border-radius: 0 0 var(--fo-r-lg) var(--fo-r-lg);
  overflow: hidden;
  background: var(--fo-card);
}

/* Same table as the list pages: grey head, hairline rows, regular weight. */
html body .f360 .data-table {
  background: var(--fo-card);
  font-size: 0.8125rem;
}

html body .f360 .data-table thead tr {
  background: var(--fo-head);
}

html body .f360 .data-table thead th {
  padding: 10px 12px;
  background: var(--fo-head);
  border-bottom: 2px solid var(--gc-ink-200, #E2E8F0);
  color: var(--fo-ink-2);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

html body .f360 .data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--fo-line-soft);
  color: var(--fo-ink-2);
  font-size: 0.8125rem;
  font-weight: 400;
}

html body .f360 .data-table tbody tr:hover {
  background: var(--fo-head);
}

/* Figures in a table column are mono, as everywhere else. */
html body .f360 .data-table tbody td .f360-mono,
html body .f360 .data-table tbody td.num {
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
}

/* The thumb cell that opens a photo. */
html body .f360 .td-photo {
  width: 30px;
  height: 30px;
  border-radius: var(--fo-r-sm);
  border: 1px solid var(--gc-t-green-br, #A7F3D0);
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
  font-size: 0.75rem;
}

html body .f360 .td-photo:hover {
  background: #D1FAE5;
  border-color: var(--gc-t-green-chip, #10B981);
  color: var(--gc-t-green-fg, #047857);
}

html body .f360 .td-photo.empty {
  border-color: var(--fo-line);
  background: var(--gc-ink-50, #F8FAFC);
  color: var(--fo-faint);
  cursor: default;
}

/* Bootstrap's colour utilities, which these two tabs lean on heavily —
   13 .text-danger and 10 .btn-success/.btn-danger between them. Pointed at the
   theme's semantic families so a warning here is the same red as a rejected
   pill three inches above it. */
html body .f360 .text-danger {
  color: var(--gc-t-cyan-fg, #B91C1C) !important;
}

html body .f360 .text-warning {
  color: var(--gc-t-amber-fg, #B45309) !important;
}

html body .f360 .text-success {
  color: var(--gc-t-green-fg, #047857) !important;
}

html body .f360 .text-muted {
  color: var(--fo-muted) !important;
}

html body .f360 .btn.btn-success {
  background: #059669;
  border-color: #059669;
  color: #FFFFFF;
  border-radius: var(--fo-r-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

html body .f360 .btn.btn-success:hover {
  background: #047857;
  border-color: #047857;
}

html body .f360 .btn.btn-danger {
  background: var(--gc-t-cyan-bg, #FEF2F2);
  border-color: var(--gc-t-cyan-br, #FECACA);
  color: var(--gc-t-cyan-fg, #B91C1C);
  border-radius: var(--fo-r-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

html body .f360 .btn.btn-danger:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
}

html body .f360 .btn.btn-secondary {
  background: var(--fo-card);
  border-color: var(--fo-line);
  color: var(--fo-ink-2);
  border-radius: var(--fo-r-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

html body .f360 .btn.btn-secondary:hover {
  background: var(--fo-head);
  border-color: var(--gc-ink-300, #CBD5E1);
}

/* The inline edit form the Aeration tab carries. */
html body .f360 .form-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-faint);
  margin-bottom: 4px;
}

html body .f360 .polygon-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--fo-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--fo-line);
  color: var(--fo-ink) !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

html body .f360 .polygon-info-header>i:first-child {
  color: var(--olam-primary, #7C3AED);
}

/* ── Polygon cards, two to a row ──
   A full-width card put one plot on the screen at a time, so comparing a
   farmer's three polygons — the job on this tab — meant three screens of
   scrolling. Two up halves that, and a plot boundary reads fine at half width
   because the map is square-ish either way.

   One column below 1100px: at half of a laptop screen the map is too small to
   judge a boundary from, which defeats the point. */
html body .f360 .f360-map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 16px;
  align-items: start;
}

/* The card sits in a grid cell now, so its own side margins would double the
   gutter. */
html body .f360 .f360-map-grid>.map-section {
  margin: 0;
}

/* ── Full screen ──
   The control was an unlabelled 32px square in the corner of the map. At half
   width this is how a boundary actually gets read, so it says what it does. */
html body .f360 .f360-map-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 30px;
  top: 10px;
  right: 10px;
  padding: 0 11px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--fo-ink-2);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: var(--fo-shadow-pop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html body .f360 .f360-map-fullscreen-btn:hover {
  background: #FFFFFF;
  border-color: var(--olam-primary, #7C3AED);
  color: var(--olam-primary, #7C3AED);
}

html body .f360 .f360-map-fullscreen-btn>i {
  font-size: 0.6875rem;
}

/* One label at a time, chosen by the wrapper's state. */
html body .f360 .f360-map-fullscreen-btn .fs-close,
html body .f360 .map-area-wrap.f360-map-fullscreen .f360-map-fullscreen-btn .fs-open {
  display: none;
}

html body .f360 .map-area-wrap.f360-map-fullscreen .f360-map-fullscreen-btn .fs-close {
  display: inline;
}

/* The full-screen ground: the app's scrim, not #111. */
html body .f360 .map-area-wrap.f360-map-fullscreen {
  background: #0B1120;
  padding: 0;
}

html body .f360 .map-area-wrap.f360-map-fullscreen .f360-map-fullscreen-btn {
  top: 16px;
  right: 16px;
  height: 34px;
}

html body .f360 .f360-map-grid>.empty-state {
  grid-column: 1 / -1;
}

/* Half the width, so the map can be a little shorter without losing the shape
   of a boundary. */
html body .f360 .f360-map-grid .leaflet-map,
html body .f360 .f360-map-grid .map-body>div[id^="map"] {
  height: 380px !important;
}

html body .f360 .map-section {
  margin: 0 16px 14px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
  overflow: hidden;
}

html body .f360 .map-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 16px;
  background: var(--fo-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--fo-line);
  color: var(--fo-ink) !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

html body .f360 .map-section-header>i {
  color: var(--gc-t-teal-fg, #0E7490);
  font-size: 0.8125rem;
}

html body .f360 .map-section-title {
  font-size: 0.875rem;
  font-weight: 600;
}

/* The status badge the header drew with inline hex — the standard pill. */
html body .f360 .map-section-header .pill {
  margin-left: auto;
}

html body .f360 .map-body {
  padding: 16px !important;
}

/* Lat/lng: a field pair like any other, mono because they are coordinates. */
html body .f360 .f360-latlng-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fo-line-soft);
  background: transparent;
}

html body .f360 .f360-latlng-block>.f360-label-sm {
  padding: 7px 14px 0;
  grid-row: 1;
}

html body .f360 .f360-latlng-block>.f360-val-em {
  padding: 0 14px 8px;
  margin: 0 !important;
  grid-row: 2;
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
}

/* ── Plot card ──
   One card per plot, headed like a section: name, its id as a mono chip, the
   review actions and the status. */
html body .f360 .plot-card {
  margin: 0 0 14px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow);
  overflow: hidden;
}

html body .f360 .plot-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--fo-card);
  border-bottom: 1px solid var(--fo-line);
}

html body .f360 .plot-card-header .plot-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fo-ink);
}

html body .f360 .plot-uid-badge {
  padding: 3px 8px;
  border-radius: var(--fo-r-sm);
  background: var(--gc-ink-100, #F1F5F9);
  color: var(--fo-ink-2);
  font-family: var(--gc-font-figure, monospace);
  font-size: 0.75rem;
  font-weight: 500;
}

/* The plot cards sit directly on the section, which already has padding. */
html body .f360 .plot-card+.plot-card {
  margin-top: 0;
}

html body .f360 #plot-section .plot-card:first-of-type {
  margin-top: 14px;
}

html body .f360 .f-section>.plot-card {
  margin-left: 16px;
  margin-right: 16px;
}

/* ── Summary bar ── */
html body .f360 .summary-bar {
  padding: 10px 16px;
  background: var(--fo-head);
  border-bottom: 1px solid var(--fo-line);
  font-size: 0.75rem;
  color: var(--fo-muted);
}

html body .f360 .summary-bar strong {
  color: var(--fo-ink);
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
}

/* ── "Location Details" strip inside a plot card ──
   Same shape as the sub-headings on the Farmer Info tab. */
html body .f360 .location-subheader {
  padding: 12px 16px 10px;
  background: var(--fo-card);
  border-top: 1px solid var(--fo-line);
  border-bottom: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fo-ink) !important;
}

html body .f360 .location-subheader>i {
  color: var(--gc-t-teal-fg, #0E7490);
}

/* ── Photo cells ── */
html body .f360 .photo-cell {
  border-right: 1px solid var(--fo-line-soft);
  padding: 11px 16px 12px;
}

html body .f360 .photo-cell:hover {
  background: var(--fo-head);
}

html body .f360 .photo-cell .eye-btn {
  color: var(--olam-primary, #7C3AED);
  font-size: 0.875rem;
}

html body .f360 .f-val.eye-btn {
  margin-top: 4px;
}

/* Scoped through .f-cell to clear the page's own rules, which are

     .f360 .f-cell .f-label   font-size: .6rem;  font-weight: 600   (0,3,0)
     .f360 .f-cell .f-val     font-size: .82rem; font-weight: 700   (0,3,0)

   and were beating `html body .f360 .f-val` — three classes outrank two
   classes plus two elements. That is why the Plots tab came out bold and a
   size off while the Farmer Info tab, which goes through .f360-grid, did not. */
html body .f360 .f-cell .f-label,
html body .f360 .f-label {
  line-height: 1.3;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-faint) !important;
}

html body .f360 .f-cell .f-val,
html body .f360 .f-val {
  margin-top: 2px;
  line-height: 1.4;
  font-size: 0.8125rem;
  font-weight: 400;
  font-family: var(--olam-font);
  color: var(--fo-ink) !important;
}

/* Mono only where the value is an identifier or a measurement. */
html body .f360 .f-cell .f-val.is-mono,
html body .f360 .f-val.is-mono {
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
}

/* ── The pieces the Polygon / Pipe / Crop / Aeration sections use that are not
   .f-cell ──
   Those tabs render the same field grids as the rest, so the cell sizing above
   already reaches them. These are the few labels and boxes they use instead,
   brought to the same rhythm so a tab switch does not change the type size. */
html body .f360 .f360-label-sm {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fo-faint) !important;
}

html body .f360 .f360-val-em {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fo-ink) !important;
}

html body .f360 .f360-latlng-block {
  padding: 7px 14px 8px;
  font-family: var(--gc-font-figure, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}

html body .f360 .f360-val-box {
  padding: 9px 12px;
  border-radius: var(--fo-r);
  font-size: 0.8125rem;
  line-height: 1.45;
}

html body .f360 .f360-val-box-approved {
  background: var(--gc-t-green-bg, #ECFDF5) !important;
  border: 1px solid var(--gc-t-green-br, #A7F3D0) !important;
  color: var(--gc-t-green-fg, #047857) !important;
}

html body .f360 .f360-val-box-rejected {
  background: var(--gc-t-cyan-bg, #FEF2F2) !important;
  border: 1px solid var(--gc-t-cyan-br, #FECACA) !important;
  color: var(--gc-t-cyan-fg, #B91C1C) !important;
}

/* A cell whose value is an eye icon — the signature and photo slots inside a
   field grid. Same cell height as a text field. */
html body .f360 .f-cell .f-val.eye-btn,
html body .f360 .f-val.eye-btn {
  margin-top: 2px;
  line-height: 1.4;
  font-size: 0.875rem;
}

/* ── Status filters (All / Approved / Pending / Rejected / Deleted / Not drawn) ──
   The same pill group the list pages use for the same job. Selectors run through
   the container because the page's own variants are four classes deep:

     .f360 .f360-status-tab.tab-approved.active               (0,4,0)
     .f360 .f360-status-tab.tab-approved.active .tab-count    (0,5,0)

   which outrank `html body .f360 .f360-status-tab.active` (0,3,2) — four
   classes beat three classes and two elements. */
html body .f360 .f360-status-tabs,
html body .f360 .f360-status-tabs.scope-nested {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: 14px 32px 0;
  padding: 3px;
  background: var(--gc-ink-100, #F1F5F9);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-lg);
  overflow: visible;
}

html body .f360 .f360-status-tabs .f360-status-tab {
  padding: 5px 11px;
  border: 0;
  border-bottom: 0;
  border-radius: var(--fo-r);
  margin: 0;
  background: transparent;
  color: var(--fo-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  /* Kana take neither, and at this size neither helps in English either. */
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

html body .f360 .f360-status-tabs .f360-status-tab>i {
  display: none;
}

html body .f360 .f360-status-tabs .f360-status-tab:hover {
  background: transparent;
  color: var(--fo-ink);
}

html body .f360 .f360-status-tabs .f360-status-tab.active,
html body .f360 .f360-status-tabs .f360-status-tab.tab-approved.active,
html body .f360 .f360-status-tabs .f360-status-tab.tab-pending.active,
html body .f360 .f360-status-tabs .f360-status-tab.tab-rejected.active,
html body .f360 .f360-status-tabs .f360-status-tab.tab-muted.active {
  background: var(--fo-card);
  border-bottom-color: transparent;
  color: var(--fo-ink);
  font-weight: 600;
  box-shadow: var(--fo-shadow-pop);
}

html body .f360 .f360-status-tabs .f360-status-tab.tab-muted {
  background: transparent;
  color: var(--fo-faint);
}

/* The count sits in the pill. When the filter is selected it takes that
   status's colour — which is where the green / amber / red belongs, on the
   number rather than as an underline. */
html body .f360 .f360-status-tabs .f360-status-tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gc-ink-200, #E2E8F0);
  color: var(--fo-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

html body .f360 .f360-status-tabs .f360-status-tab.active .tab-count {
  background: var(--gc-t-hero-bg, #F5F3FF);
  color: var(--olam-primary, #7C3AED);
}

html body .f360 .f360-status-tabs .f360-status-tab.tab-approved.active .tab-count {
  background: var(--gc-t-green-bg, #ECFDF5);
  color: var(--gc-t-green-fg, #047857);
}

html body .f360 .f360-status-tabs .f360-status-tab.tab-pending.active .tab-count {
  background: var(--gc-t-amber-bg, #FFFBEB);
  color: var(--gc-t-amber-fg, #B45309);
}

html body .f360 .f360-status-tabs .f360-status-tab.tab-rejected.active .tab-count {
  background: var(--gc-t-cyan-bg, #FEF2F2);
  color: var(--gc-t-cyan-fg, #B91C1C);
}

html body .f360 .f360-status-tabs .f360-status-tab.tab-muted.active .tab-count {
  background: var(--gc-ink-100, #F1F5F9);
  color: var(--fo-ink-2);
}


/* Keep the maps compact here too — the validation panel beside a plot map and
   the row of figures under it should not need a scroll to reach. */
html body .f360 .leaflet-map {
  height: 300px !important;
}

html body .f360 .map-area-wrap.f360-map-fullscreen .leaflet-map {
  height: 100vh !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   24. IMAGE VIEWER
   The full-screen viewer that opens from a document tile or a field photo.

   It had a solid green header bar and a red close button — the bar took a
   fixed strip of every screen for chrome, and permanent red read as "danger"
   when the action is just "close". A photo viewer's job is to show the photo,
   so the chrome floats over it on a gradient scrim and gets out of the way.

   olam-swal.css styles the same elements; these rules are scoped the same way
   (#olam-global-image-modal …) and load later, so they win without !important.
   ─────────────────────────────────────────────────────────────────────────── */

#olam-global-image-modal .olam-lightbox-toolbar {
  padding: 14px 18px;
  /* A scrim, not a bar: dark enough at the top for white controls to read on a
     bright photo, gone by the time it reaches the image. */
  background: linear-gradient(180deg, rgb(8 10 16 / 0.85) 0%, rgb(8 10 16 / 0.45) 60%, transparent 100%);
  box-shadow: none;
  border-bottom: 0;
}

#olam-global-image-modal .olam-lightbox-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

/* Position in the set, as a quiet pill beside the title. */
#olam-global-image-modal .olam-lightbox-counter {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 0.9);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

/* The controls group into one translucent pill, so six buttons read as one
   toolbar rather than six separate things. */
#olam-global-image-modal .olam-lightbox-actions {
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.10);
  border: 1px solid rgb(255 255 255 / 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#olam-global-image-modal .olam-lightbox-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / 0.85);
  font-size: 0.8125rem;
}

#olam-global-image-modal .olam-lightbox-btn:hover {
  background: rgb(255 255 255 / 0.18);
  border: 0;
  color: #FFFFFF;
}

#olam-global-image-modal .olam-lightbox-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(8 10 16 / 0.9), 0 0 0 4px rgb(255 255 255 / 0.7);
}

/* Close is the same ghost button as the rest, and only turns red on hover:
   closing is not a destructive act, and a permanently red block in the corner
   claims otherwise. */
#olam-global-image-modal .olam-lightbox-close {
  width: 34px;
  height: 34px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.10);
  border: 1px solid rgb(255 255 255 / 0.16);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 400;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#olam-global-image-modal .olam-lightbox-close:hover {
  background: #DC2626;
  border-color: #DC2626;
}

/* The label under the image, on a matching scrim at the foot. */
#olam-global-image-modal .olam-lightbox-meta,
#olam-global-image-modal [class*="meta"] {
  background: linear-gradient(0deg, rgb(8 10 16 / 0.85) 0%, rgb(8 10 16 / 0.4) 60%, transparent 100%) !important;
  color: rgb(255 255 255 / 0.7) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0 !important;
  padding: 10px 18px 14px !important;
}

/* Previous / next: same ghost treatment as the toolbar. */
#olam-global-image-modal .olam-lightbox-nav,
#olam-global-image-modal button[style*="translateY(-50%)"] {
  background: rgb(255 255 255 / 0.10) !important;
  border: 1px solid rgb(255 255 255 / 0.16) !important;
  border-radius: 999px !important;
  width: 40px !important;
  height: 40px !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(6px);
}

#olam-global-image-modal .olam-lightbox-nav:hover,
#olam-global-image-modal button[style*="translateY(-50%)"]:hover {
  background: rgb(255 255 255 / 0.2) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   25. SETTINGS PAGES
   The 56 screens under Admin → Settings. They share four components, all of
   which olam-legacy-overrides.css paints with the primary colour and !important:
   the card banner, the table head, the add button and the form actions.

   Everything here is scoped through .main-content and marked !important for
   that reason — the rules being overruled are (0,3,0) with !important of their
   own, and quiet correctness loses to them.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Card header ── */
.main-content .card-header.olam-settings-card-header,
.main-content .card.olam-settings-card>.card-header,
.main-content .card.olam-settings-card>.card-header:not(.olam-settings-card-header--tabs) {
  background: var(--fo-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--fo-line) !important;
  padding: 12px 16px !important;
}

.main-content .olam-settings-card-title,
.main-content .olam-settings-card-header .card-title {
  color: var(--fo-ink) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* The add button sat on a coloured banner, so it was a white block. On a white
   head it becomes the primary action it actually is. */
.main-content .olam-settings-add-btn,
.main-content .olam-settings-card-header .btn-light {
  height: var(--fo-control-h) !important;
  padding: 0 13px !important;
  border: 1px solid var(--olam-primary, #7C3AED) !important;
  border-radius: var(--fo-r) !important;
  background: var(--olam-primary, #7C3AED) !important;
  color: #FFFFFF !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.main-content .olam-settings-add-btn:hover,
.main-content .olam-settings-card-header .btn-light:hover {
  filter: brightness(0.94);
  color: #FFFFFF !important;
}

/* ── Table heads ──
   These three selectors carried a primary gradient with white uppercase text
   on every bordered or small table in the app. */
/* olam-theme-engine.css §1 paints EVERY table head with the primary colour:

     table thead th, table.dataTable thead th, table.display thead th,
     table#example3 thead th, .table thead th, …
       background: var(--olam-primary) !important; color: #fff !important;

   One of those selectors carries an id, so it outranks anything built from
   classes — which is why the Users table kept its violet head while the list
   pages went grey. The id is matched here for that reason. */
.main-content table thead th,
.main-content table.dataTable thead th,
.main-content table.display thead th,
.main-content table#example3 thead th,
.main-content thead.thead-primary th,
.main-content table.table-bordered thead th,
.main-content table.table-sm thead th,
.main-content table.table thead th {
  background: var(--fo-head) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 2px solid var(--gc-ink-200, #E2E8F0) !important;
  color: var(--fo-ink-2) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 14px !important;
}

.main-content table.table-bordered td,
.main-content table.table-bordered th {
  border-left: 0 !important;
  border-right: 0 !important;
}

.main-content table.table-bordered tbody td,
.main-content table.table-sm tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--fo-line-soft) !important;
  padding: 10px 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: var(--fo-ink-2) !important;
}

/* ── Form actions ── */
.main-content .olam-settings-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--fo-line);
}

.main-content .btn.olam-settings-form-btn {
  height: var(--fo-control-h) !important;
  padding: 0 14px !important;
  border-radius: var(--fo-r) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.main-content .btn.btn-primary.olam-settings-form-btn {
  background: var(--olam-primary, #7C3AED) !important;
  border-color: var(--olam-primary, #7C3AED) !important;
  color: #FFFFFF !important;
}

/* Cancel is not a destructive act; it was a filled red button next to Save. */
.main-content .btn.btn-danger.olam-settings-form-btn {
  background: var(--fo-card) !important;
  border-color: var(--fo-line) !important;
  color: var(--fo-ink-2) !important;
}

.main-content .btn.btn-danger.olam-settings-form-btn:hover {
  background: var(--fo-head) !important;
  border-color: var(--gc-ink-300, #CBD5E1) !important;
  color: var(--fo-ink) !important;
}

/* ── Form fields ── */
.main-content .form-group>label,
.main-content .form-valide label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fo-muted);
  margin-bottom: 5px;
}

.main-content .input-group-text {
  height: var(--fo-control-h);
  border: 1px solid var(--fo-line);
  background: var(--fo-head);
  color: var(--fo-muted);
  font-size: 0.8125rem;
}

.main-content .form-group .text-danger,
.main-content .form-valide .text-danger {
  font-size: 0.75rem;
  color: var(--gc-t-cyan-fg, #B91C1C) !important;
}

/* Bootstrap badges, used across these pages for counts and states. */
.main-content .badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.main-content .badge-success,
.main-content .badge.light.badge-success {
  background: var(--gc-t-green-bg, #ECFDF5) !important;
  color: var(--gc-t-green-fg, #047857) !important;
}

.main-content .badge-danger,
.main-content .badge.light.badge-danger {
  background: var(--gc-t-cyan-bg, #FEF2F2) !important;
  color: var(--gc-t-cyan-fg, #B91C1C) !important;
}

.main-content .badge-warning,
.main-content .badge.light.badge-warning {
  background: var(--gc-t-amber-bg, #FFFBEB) !important;
  color: var(--gc-t-amber-fg, #B45309) !important;
}

.main-content .badge-info,
.main-content .badge.light.badge-info {
  background: var(--gc-t-blue-bg, #EFF6FF) !important;
  color: var(--gc-t-blue-fg, #1D4ED8) !important;
}

/* An <a> used as a button. olam-legacy-overrides.css colours links through a
   five-deep :not() chain — (0,6,1) — which outranks the button's own colour, so
   a primary-filled link came out violet-on-violet and looked like an empty
   block. The exclusion list does not know about these classes, so the colour is
   stated at a volume that does not depend on it. */
.main-content a.btn-fo,
.main-content a.btn-fl-export,
.main-content a.btn-fo-ghost {
  color: var(--fo-ink-2) !important;
}

.main-content a.btn-fo-primary,
.main-content a.btn-fo-approve {
  color: #FFFFFF !important;
}

.main-content a.btn-fo-reject {
  color: var(--gc-t-cyan-fg, #B91C1C) !important;
}

.main-content a.btn-fo:hover,
.main-content a.btn-fl-export:hover,
.main-content a.btn-fo-ghost:hover {
  color: var(--fo-ink) !important;
}

.main-content a.btn-fo-primary:hover {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  color: #FFFFFF !important;
}

.main-content a.btn-fo-approve:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  color: #FFFFFF !important;
}

/* ── Filter Header Toggle Bar ── */
.fl-filter-header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.btn-fl-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--fo-card-bg, #ffffff);
  border: 1px solid var(--fo-line, #e2e8f0);
  border-radius: 8px;
  color: var(--fo-ink, #0f172a);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-fl-filter-toggle:hover {
  background: var(--fo-muted-bg, #f8fafc);
  border-color: #2563eb;
  color: #2563eb;
}

.btn-fl-filter-toggle.has-active-filters {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.fl-filter-badge,
.btn-fl-filter-toggle .fl-filter-badge,
.btn-fl-filter-toggle.has-active-filters .fl-filter-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.fl-toggle-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.btn-fl-filter-toggle[aria-expanded="true"] .fl-toggle-arrow {
  transform: rotate(180deg);
}

/* ── Rows Per Page Selector ── */
.fl-rows-per-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--fo-muted, #64748b);
  margin-left: auto;
}

.fl-rows-label {
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}

.fl-per-page-select {
  padding: 4px 8px;
  border: 1px solid var(--fo-line, #cbd5e1);
  border-radius: 6px;
  background: var(--fo-card-bg, #ffffff);
  color: var(--fo-ink, #0f172a);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.fl-per-page-select:focus {
  border-color: var(--fo-brand, #059138);
}

.fl-rows-count {
  font-weight: 500;
  white-space: nowrap;
}

/* ── Filter Panel Collapse Animation & Alignment ── */
.fl-filter-panel {
  margin-bottom: 12px;
}

.fl-filter-panel.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-header .fl-rows-per-page,
.fl-table-header .fl-rows-per-page {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Dark Mode Overrides for Rows-Per-Page, Filter Toggle & Actions ── */
[data-theme-version="dark"] .btn-fl-filter-toggle,
[data-theme="dark"] .btn-fl-filter-toggle,
.dark-mode .btn-fl-filter-toggle,
body.dark-theme .btn-fl-filter-toggle {
  background: var(--olam-surface, #1e293b) !important;
  color: var(--olam-text, #f1f5f9) !important;
  border-color: var(--olam-border, #334155) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme-version="dark"] .btn-fl-filter-toggle:hover,
[data-theme="dark"] .btn-fl-filter-toggle:hover,
.dark-mode .btn-fl-filter-toggle:hover,
body.dark-theme .btn-fl-filter-toggle:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

[data-theme-version="dark"] .btn-fl-filter-toggle.has-active-filters,
[data-theme="dark"] .btn-fl-filter-toggle.has-active-filters,
.dark-mode .btn-fl-filter-toggle.has-active-filters,
body.dark-theme .btn-fl-filter-toggle.has-active-filters {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60a5fa !important;
  border-color: #2563eb !important;
}

[data-theme-version="dark"] .fl-filter-badge,
[data-theme="dark"] .fl-filter-badge,
.dark-mode .fl-filter-badge,
body.dark-theme .fl-filter-badge,
[data-theme-version="dark"] .btn-fl-filter-toggle .fl-filter-badge,
[data-theme="dark"] .btn-fl-filter-toggle .fl-filter-badge,
.dark-mode .btn-fl-filter-toggle .fl-filter-badge,
body.dark-theme .btn-fl-filter-toggle .fl-filter-badge,
[data-theme-version="dark"] .btn-fl-filter-toggle.has-active-filters .fl-filter-badge,
[data-theme="dark"] .btn-fl-filter-toggle.has-active-filters .fl-filter-badge,
.dark-mode .btn-fl-filter-toggle.has-active-filters .fl-filter-badge,
body.dark-theme .btn-fl-filter-toggle.has-active-filters .fl-filter-badge {
  background: #2563eb !important;
  color: #ffffff !important;
}

[data-theme-version="dark"] .fl-rows-label,
[data-theme="dark"] .fl-rows-label,
.dark-mode .fl-rows-label,
body.dark-theme .fl-rows-label {
  color: var(--olam-text-muted, #94a3b8) !important;
}

[data-theme-version="dark"] .fl-per-page-select,
[data-theme="dark"] .fl-per-page-select,
.dark-mode .fl-per-page-select,
body.dark-theme .fl-per-page-select {
  background: var(--olam-surface, #1e293b) !important;
  color: var(--olam-text, #f1f5f9) !important;
  border-color: var(--olam-border, #334155) !important;
}

[data-theme-version="dark"] .fl-per-page-select option,
[data-theme="dark"] .fl-per-page-select option,
.dark-mode .fl-per-page-select option,
body.dark-theme .fl-per-page-select option {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

[data-theme-version="dark"] .fl-filter-bar input[type="text"],
[data-theme-version="dark"] .fl-filter-bar input[type="date"],
[data-theme-version="dark"] .fl-filter-bar select,
[data-theme-version="dark"] .fl-filter-bar .fl-combo-input,
[data-theme="dark"] .fl-filter-bar input[type="text"],
[data-theme="dark"] .fl-filter-bar input[type="date"],
[data-theme="dark"] .fl-filter-bar select,
[data-theme="dark"] .fl-filter-bar .fl-combo-input,
.dark-mode .fl-filter-bar input[type="text"],
.dark-mode .fl-filter-bar input[type="date"],
.dark-mode .fl-filter-bar select,
.dark-mode .fl-filter-bar .fl-combo-input {
  background: var(--olam-surface, #1e293b) !important;
  color: var(--olam-text, #f1f5f9) !important;
  border-color: var(--olam-border, #334155) !important;
}

[data-theme-version="dark"] .btn-fl-filter,
[data-theme="dark"] .btn-fl-filter,
.dark-mode .btn-fl-filter,
body.dark-theme .btn-fl-filter {
  background: var(--olam-primary, #059138) !important;
  border-color: var(--olam-primary, #059138) !important;
  color: #ffffff !important;
}

[data-theme-version="dark"] .btn-fl-filter:hover,
[data-theme="dark"] .btn-fl-filter:hover,
.dark-mode .btn-fl-filter:hover,
body.dark-theme .btn-fl-filter:hover {
  background: var(--olam-primary-hover, #047857) !important;
  border-color: var(--olam-primary-hover, #047857) !important;
  color: #ffffff !important;
}

[data-theme-version="dark"] .btn-fl-clear,
[data-theme="dark"] .btn-fl-clear,
.dark-mode .btn-fl-clear,
body.dark-theme .btn-fl-clear {
  background: var(--olam-surface, #1e293b) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

[data-theme-version="dark"] .btn-fl-clear:hover,
[data-theme="dark"] .btn-fl-clear:hover,
.dark-mode .btn-fl-clear:hover,
body.dark-theme .btn-fl-clear:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

[data-theme-version="dark"] .btn-view,
[data-theme="dark"] .btn-view,
.dark-mode .btn-view,
body.dark-theme .btn-view {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

[data-theme-version="dark"] .btn-view:hover,
[data-theme="dark"] .btn-view:hover,
.dark-mode .btn-view:hover,
body.dark-theme .btn-view:hover {
  background: var(--olam-primary, #059138) !important;
  color: #ffffff !important;
  border-color: var(--olam-primary, #059138) !important;
}