/* ═══════════════════════════════════════════════════════════════════════════
   OLAM · TICKET-PLATFORM THEME
   ═══════════════════════════════════════════════════════════════════════════

   Reskins the app in the visual language of Cropintellix-Pvt-Ltd/Ticket-platform
   (React 19 + Tailwind v4). That app is the house style now, so this layer maps
   its decisions onto the tokens and components this Blade app already uses,
   rather than rewriting 378 views:

     ground        #F8FAFC slate-50, content on white
     cards         white · border slate-200 · rounded-xl (12px) · shadow-sm
     table head    bg slate-50 · text slate-600 · font-medium · sentence case
     rows          border-t slate-100 · hover slate-50 · px-4 py-3
     status        rounded-full pill on a 50-level tint with 700-level text
     KPI card      label + tinted icon square on the top row, big figure below
     numerals      mono, right-aligned, in tables
     primary       #7C3AED violet, used as a small accent (bg-primary/10 chips,
                   an active nav item, one filled button) — never as a band
     semantic      #10B981 success · #F59E0B warning · #EF4444 danger
                   #3B82F6 info
     type          Inter · 14px body · 12px meta

   LOADS LAST, after the inline :root block the layout writes from App Settings,
   so token values here are final. The dark block is :root[data-theme="dark"]
   (0,2,0) so it still outranks this file's own :root — the ticket platform has
   no dark mode, so that palette is this one inverted through the same slate
   ramp rather than a copy of anything.

   The !important declarations are all aimed at olam-theme-engine.css and
   olam-legacy-overrides.css, which set colours that way; nothing here would
   need it otherwise.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS — LIGHT
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Neutral ramp: one slate scale, not two greys mixed ── */
  --gc-ink-900: #0F172A;
  --gc-ink-800: #1E293B;   /* body text — the ticket platform's own body colour */
  --gc-ink-700: #334155;
  --gc-ink-600: #475569;   /* table head text */
  --gc-ink-500: #64748B;   /* secondary text */
  --gc-ink-400: #94A3B8;   /* placeholder, disabled */
  --gc-ink-300: #CBD5E1;   /* control borders */
  --gc-ink-200: #E2E8F0;   /* card borders */
  --gc-ink-100: #F1F5F9;   /* row dividers */
  --gc-ink-50:  #F8FAFC;   /* table head, hover */

  --gc-page: #F8FAFC;
  --gc-navy: #7C3AED;      /* structural accent follows primary here */
  --gc-navy-soft: #F5F3FF;

  /* ── Radii: lg = the card radius (Tailwind rounded-xl) ── */
  --gc-radius-xs: 4px;
  --gc-radius-sm: 6px;
  --gc-radius-md: 8px;     /* buttons, inputs — rounded-lg */
  --gc-radius-lg: 12px;    /* cards — rounded-xl */

  /* ── Elevation: Tailwind's shadow scale ── */
  --gc-shadow-none: none;
  --gc-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --gc-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --gc-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.10), 0 2px 4px -2px rgb(15 23 42 / 0.10);
  --gc-shadow-overlay: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.10);

  /* ── Type: 14px body, as in the ticket platform ── */
  --gc-text-2xs: 0.6875rem;
  --gc-text-xs:  0.75rem;
  --gc-text-sm:  0.875rem;
  --gc-text-md:  0.875rem;
  --gc-text-lg:  1rem;
  --gc-text-xl:  1.125rem;
  --gc-text-2xl: 1.5rem;
  --gc-text-kpi: 1.5rem;

  /* Figures in tables are monospaced there — it is what makes a column of
     amounts line up and read as data. KPI figures stay in Inter bold. */
  --gc-font-figure: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas',
                    'Liberation Mono', monospace;

  --gc-control-h: 38px;
  --gc-control-h-sm: 32px;
  --gc-control-h-lg: 44px;
  --gc-control-px: 12px;

  --gc-focus: 0 0 0 3px rgb(124 58 237 / 0.20);
  --gc-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Semantic families ──
   The names are inherited from the previous layer; what each one means is what
   matters. Every pair is a Tailwind 50-level ground with 700-level text, which
   is how the ticket platform draws every chip. */
:root {
  /* violet — primary / brand */
  --gc-t-hero-bg:   #F5F3FF;  --gc-t-hero-br:   #DDD6FE;  --gc-t-hero-fg:   #6D28D9;  --gc-t-hero-chip:   #7C3AED;
  /* emerald — success, approved */
  --gc-t-green-bg:  #ECFDF5;  --gc-t-green-br:  #A7F3D0;  --gc-t-green-fg:  #047857;  --gc-t-green-chip:  #10B981;
  /* amber — warning, pending */
  --gc-t-amber-bg:  #FFFBEB;  --gc-t-amber-br:  #FDE68A;  --gc-t-amber-fg:  #B45309;  --gc-t-amber-chip:  #F59E0B;
  /* red — danger, rejected */
  --gc-t-cyan-bg:   #FEF2F2;  --gc-t-cyan-br:   #FECACA;  --gc-t-cyan-fg:   #B91C1C;  --gc-t-cyan-chip:   #EF4444;
  /* blue — info */
  --gc-t-blue-bg:   #EFF6FF;  --gc-t-blue-br:   #BFDBFE;  --gc-t-blue-fg:   #1D4ED8;  --gc-t-blue-chip:   #3B82F6;
  /* cyan — secondary info */
  --gc-t-teal-bg:   #ECFEFF;  --gc-t-teal-br:   #A5F3FC;  --gc-t-teal-fg:   #0E7490;  --gc-t-teal-chip:   #06B6D4;
  /* indigo */
  --gc-t-indigo-bg: #EEF2FF;  --gc-t-indigo-br: #C7D2FE;  --gc-t-indigo-fg: #4338CA;  --gc-t-indigo-chip: #6366F1;
}

/* ── The older olam-* token set, kept in step ── */
:root {
  --olam-bg: #F8FAFC;
  --olam-bg-elevated: #FFFFFF;
  --olam-surface: #FFFFFF;
  --olam-surface-hover: #F8FAFC;
  --olam-border: #E2E8F0;
  --olam-border-strong: #CBD5E1;

  --olam-text: #1E293B;
  --olam-text-secondary: #475569;
  --olam-text-muted: #64748B;
  --olam-text-inverse: #FFFFFF;

  --olam-primary-soft: #F5F3FF;
  --olam-primary-muted: #EDE9FE;
  --olam-primary-gradient: linear-gradient(135deg, #7C3AED, #6D28D9);

  --olam-success: #10B981;  --olam-success-bg: #ECFDF5;  --olam-success-border: #A7F3D0;
  --olam-warning: #F59E0B;  --olam-warning-bg: #FFFBEB;  --olam-warning-border: #FDE68A;
  --olam-danger:  #EF4444;  --olam-danger-bg:  #FEF2F2;  --olam-danger-border:  #FECACA;
  --olam-info:    #3B82F6;  --olam-info-bg:    #EFF6FF;  --olam-info-border:    #BFDBFE;

  --olam-radius-sm: 6px;
  --olam-radius-md: 8px;
  --olam-radius-lg: 12px;
  --olam-radius-pill: 9999px;

  --olam-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --olam-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.10), 0 2px 4px -2px rgb(15 23 42 / 0.10);
  --olam-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.10);

  --olam-focus-ring: 0 0 0 3px rgb(124 58 237 / 0.20);

  --olam-header-bg: #FFFFFF;
  --olam-header-border: #E2E8F0;

  --olam-sidebar-bg: #FFFFFF;
  --olam-sidebar-border: #E2E8F0;
  --olam-sidebar-text: #475569;
  --olam-sidebar-text-hover: #0F172A;
  --olam-sidebar-hover-bg: #F8FAFC;
  --olam-sidebar-submenu-bg: #F8FAFC;
  --olam-sidebar-section-label: #94A3B8;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. TOKENS — DARK
   The ticket platform is light-only, so this is that palette read back through
   the same slate ramp: surfaces climb from slate-900, text descends from
   slate-50, and every tint family swaps its 50-level ground for a deep one.
   ─────────────────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  --gc-ink-900: #F8FAFC;
  --gc-ink-800: #E2E8F0;
  --gc-ink-700: #CBD5E1;
  --gc-ink-600: #A9B6C8;
  --gc-ink-500: #94A3B8;
  --gc-ink-400: #64748B;
  --gc-ink-300: #475569;
  --gc-ink-200: #334155;
  --gc-ink-100: #253044;
  --gc-ink-50:  #1B2436;

  --gc-page: #0B1120;
  --gc-navy: #A78BFA;
  --gc-navy-soft: #241C4A;

  --gc-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
  --gc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
  --gc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.40);
  --gc-shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.45);

  --gc-focus: 0 0 0 3px rgb(167 139 250 / 0.28);

  --gc-t-hero-bg:   #2A1E4D;  --gc-t-hero-br:   #4C3A85;  --gc-t-hero-fg:   #C4B5FD;  --gc-t-hero-chip:   #7C3AED;
  --gc-t-green-bg:  #0E2E24;  --gc-t-green-br:  #1D5747;  --gc-t-green-fg:  #6EE7B7;  --gc-t-green-chip:  #10B981;
  --gc-t-amber-bg:  #33260C;  --gc-t-amber-br:  #6B5015;  --gc-t-amber-fg:  #FCD34D;  --gc-t-amber-chip:  #F59E0B;
  --gc-t-cyan-bg:   #3A1517;  --gc-t-cyan-br:   #7A2A2C;  --gc-t-cyan-fg:   #FCA5A5;  --gc-t-cyan-chip:   #EF4444;
  --gc-t-blue-bg:   #12243F;  --gc-t-blue-br:   #24446F;  --gc-t-blue-fg:   #93C5FD;  --gc-t-blue-chip:   #3B82F6;
  --gc-t-teal-bg:   #082F35;  --gc-t-teal-br:   #145864;  --gc-t-teal-fg:   #67E8F9;  --gc-t-teal-chip:   #06B6D4;
  --gc-t-indigo-bg: #1B1F44;  --gc-t-indigo-br: #363C77;  --gc-t-indigo-fg: #A5B4FC;  --gc-t-indigo-chip: #6366F1;

  --olam-bg: #0B1120;
  --olam-bg-elevated: #1B2436;
  --olam-surface: #131C2E;
  --olam-surface-hover: #1B2436;
  --olam-border: #334155;
  --olam-border-strong: #475569;

  --olam-text: #E2E8F0;
  --olam-text-secondary: #CBD5E1;
  --olam-text-muted: #94A3B8;

  --olam-primary-soft: #241C4A;
  --olam-primary-muted: #2A1E4D;

  --olam-success-bg: #0E2E24;  --olam-success-border: #1D5747;
  --olam-warning-bg: #33260C;  --olam-warning-border: #6B5015;
  --olam-danger-bg:  #3A1517;  --olam-danger-border:  #7A2A2C;
  --olam-info-bg:    #12243F;  --olam-info-border:    #24446F;

  --olam-header-bg: #131C2E;
  --olam-header-border: #334155;

  --olam-sidebar-bg: #131C2E;
  --olam-sidebar-border: #334155;
  --olam-sidebar-text: #CBD5E1;
  --olam-sidebar-text-hover: #F8FAFC;
  --olam-sidebar-hover-bg: #1B2436;
  --olam-sidebar-submenu-bg: #1B2436;
  --olam-sidebar-section-label: #64748B;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. PAGE
   ─────────────────────────────────────────────────────────────────────────── */

body,
.main-content {
  background-color: var(--gc-page);
  color: var(--gc-ink-800);
  font-size: var(--gc-text-sm);
}

/* Thin scrollbars, straight from the ticket platform's index.css. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gc-ink-100); }
::-webkit-scrollbar-thumb { background: var(--gc-ink-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gc-ink-400); }

/* ───────────────────────────────────────────────────────────────────────────
   4. CHROME — header and sidebar
   ─────────────────────────────────────────────────────────────────────────── */

.olam-app-header,
header.olam-app-header {
  background: var(--olam-header-bg);
  border-bottom: 1px solid var(--olam-header-border);
  box-shadow: none;
}

/* Active nav item: a tinted block with a left rule, not a filled bar. */
.sb-item.active,
.sb-item.active:hover {
  background: var(--gc-t-hero-bg);
  color: var(--gc-t-hero-fg);
  border-left: 3px solid var(--gc-t-hero-chip);
  font-weight: 600;
}
.sb-item.active i { color: var(--gc-t-hero-chip); }
.sb-item {
  border-radius: var(--gc-radius-md);
  font-size: var(--gc-text-sm);
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background-color var(--gc-transition), color var(--gc-transition);
}
.sb-item:hover {
  background: var(--olam-sidebar-hover-bg);
  color: var(--olam-sidebar-text-hover);
}
.sb-section-label {
  color: var(--olam-sidebar-section-label);
  font-size: var(--gc-text-2xs);
  letter-spacing: 0.06em;
}

.nav-user-avatar {
  background: var(--olam-primary-gradient);
  color: #fff;
  border-radius: 9999px;
}
.olam-icon-btn {
  border-radius: var(--gc-radius-md);
  color: var(--gc-ink-500);
}
.olam-icon-btn:hover { background: var(--gc-ink-100); color: var(--gc-ink-900); }

/* ───────────────────────────────────────────────────────────────────────────
   5. CARDS
   ─────────────────────────────────────────────────────────────────────────── */

.fl-table-card,
.fl-filter-bar,
.olam-dash-queue,
.card {
  background: var(--olam-surface);
  border: 1px solid var(--gc-ink-200);
  border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow-sm);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. KPI CARDS
   The ticket platform's anatomy: label top-left, a soft tinted icon square
   top-right, the figure large underneath. The markup here is four flat
   siblings, so the grid re-orders them without any Blade change.
   ─────────────────────────────────────────────────────────────────────────── */

.stat-cards-row,
.stats-row {
  gap: var(--gc-space-4);
  padding: var(--gc-space-4) var(--gc-space-6) var(--gc-space-2);
}

.stat-card {
  background: var(--olam-surface) !important;
  border: 1px solid var(--gc-ink-200) !important;
  border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow-sm);
  padding: var(--gc-space-5);
  min-height: 104px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'title title icon'
    'count unit  .';
  align-content: space-between;
  justify-content: stretch;
  align-items: center;
  column-gap: var(--gc-space-2);
  row-gap: var(--gc-space-3);
}

/* Every card is the same white; identity lives in the icon square alone. */
.stat-card.sc-purple,
.stat-card.sc-blue,
.stat-card.sc-teal,
.stat-card.sc-red,
.stat-card.sc-cyan,
.stat-card.sc-orange,
.stat-card.sc-dark-teal {
  background: var(--olam-surface) !important;
  border-color: var(--gc-ink-200) !important;
}

.stat-card .sc-icon {
  grid-area: icon;
  width: 36px;
  height: 36px;
  border-radius: var(--gc-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  justify-self: end;
}
.stat-card.sc-purple    .sc-icon { background: var(--gc-t-green-bg);  color: var(--gc-t-green-fg); }
.stat-card.sc-blue      .sc-icon { background: var(--gc-t-blue-bg);   color: var(--gc-t-blue-fg); }
.stat-card.sc-teal      .sc-icon { background: var(--gc-t-teal-bg);   color: var(--gc-t-teal-fg); }
.stat-card.sc-red       .sc-icon { background: var(--gc-t-indigo-bg); color: var(--gc-t-indigo-fg); }
.stat-card.sc-cyan      .sc-icon { background: var(--gc-t-cyan-bg);   color: var(--gc-t-cyan-fg); }
.stat-card.sc-orange    .sc-icon { background: var(--gc-t-amber-bg);  color: var(--gc-t-amber-fg); }
.stat-card.sc-dark-teal .sc-icon { background: var(--gc-t-hero-bg);   color: var(--gc-t-hero-fg); }

.stat-card .sc-title {
  grid-area: title;
  align-self: start;
  justify-self: start;
  text-align: left;
  font-size: var(--gc-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gc-ink-500) !important;
  opacity: 1;
  margin: 0;
  line-height: 1.35;
}
/* Kana take neither uppercase nor tracking. */
html[lang="ja"] .stat-card .sc-title {
  text-transform: none;
  letter-spacing: 0;
}

.stat-card .sc-count {
  grid-area: count;
  align-self: end;
  justify-self: start;
  text-align: left;
  font-family: var(--gc-font);
  font-size: var(--gc-text-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gc-ink-900) !important;
  font-variant-numeric: tabular-nums;
}

.stat-card .sc-unit {
  grid-area: unit;
  align-self: end;
  justify-self: start;
  padding-bottom: 3px;
  margin-left: 4px;
  font-size: var(--gc-text-xs);
  font-weight: 500;
  color: var(--gc-ink-500);
}
.stat-card .sc-unit:empty { display: none; }

.stat-card:hover {
  border-color: var(--gc-ink-300) !important;
  box-shadow: var(--gc-shadow-md);
  filter: none;
}

/* A KPI that is also a filter: the selected one is ringed in primary. */
.stat-cards-row.is-selectable .stat-card.is-active {
  border-color: var(--gc-t-hero-chip) !important;
  box-shadow: 0 0 0 1px var(--gc-t-hero-chip);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. TABLES
   ─────────────────────────────────────────────────────────────────────────── */

table.farmer-table { font-size: var(--gc-text-sm); }

table.farmer-table thead tr { background: transparent !important; }
table.farmer-table thead th {
  background: var(--gc-ink-50) !important;
  background-color: var(--gc-ink-50) !important;
  color: var(--gc-ink-600) !important;
  font-size: var(--gc-text-xs) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: var(--gc-space-2) var(--gc-space-4) !important;
  border: none !important;
  border-bottom: 1px solid var(--gc-ink-200) !important;
}

table.farmer-table tbody td {
  padding: var(--gc-space-3) var(--gc-space-4);
  border-top: 1px solid var(--gc-ink-100);
  border-bottom: none;
  color: var(--gc-ink-800);
}
table.farmer-table tbody tr:first-child td { border-top: none; }
table.farmer-table tbody tr:hover { background: var(--gc-ink-50); }

/* Numerals: mono and right-aligned, so a column of them compares by place. */
.farmer-table td.fl-figure,
.farmer-table td.col-num {
  font-family: var(--gc-font-figure);
  font-size: var(--gc-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--gc-ink-800);
}
.farmer-table td.fl-figure { font-weight: 600; color: var(--gc-ink-900); }
.farmer-table td.fl-strong { font-weight: 500; color: var(--gc-ink-900); }
.farmer-table td.fl-muted { font-size: var(--gc-text-xs); color: var(--gc-ink-500); }

.fl-uid {
  font-family: var(--gc-font-figure);
  font-size: var(--gc-text-xs);
  font-weight: 600;
  color: var(--gc-ink-800);
  letter-spacing: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   8. PILLS, CHIPS AND BADGES — all fully rounded here
   ─────────────────────────────────────────────────────────────────────────── */

.pill,
.fl-chip {
  border-radius: 9999px;
  height: auto;
  padding: 3px var(--gc-space-2);
  font-size: var(--gc-text-xs);
  font-weight: 500;
  line-height: 1.4;
  border: none;
}
.pill i { margin-right: 4px; font-size: 0.7rem; }

.pill-approved { background: var(--gc-t-green-bg); color: var(--gc-t-green-fg); }
.pill-pending  { background: var(--gc-t-amber-bg); color: var(--gc-t-amber-fg); }
.pill-rejected { background: var(--gc-t-cyan-bg);  color: var(--gc-t-cyan-fg); }

.fl-chip { background: var(--gc-ink-100); color: var(--gc-ink-600); }

/* ───────────────────────────────────────────────────────────────────────────
   9. CONTROLS
   ─────────────────────────────────────────────────────────────────────────── */

.fl-filter-bar .fl-input,
.fl-filter-bar input[type="text"],
.fl-filter-bar input[type="date"],
.fl-filter-bar select,
.fl-combo .fl-combo-input {
  height: var(--gc-control-h);
  min-height: var(--gc-control-h);
  padding: 0 var(--gc-space-3);
  font-size: var(--gc-text-sm);
  border: 1px solid var(--gc-ink-300);
  border-radius: var(--gc-radius-md);
  background-color: var(--olam-surface);
  color: var(--gc-ink-800);
}
.fl-filter-bar .fl-input::placeholder,
.fl-combo .fl-combo-input::placeholder { color: var(--gc-ink-400); }

.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(--gc-t-hero-chip);
  color: var(--gc-ink-900);
  font-weight: 600;
}

.btn-fl-filter,
.btn-fl-clear,
.btn-fl-export,
.btn-fl-toggle-filters {
  height: var(--gc-control-h);
  padding: 0 var(--gc-space-4);
  border-radius: var(--gc-radius-md);
  font-size: var(--gc-text-sm);
  font-weight: 500;
}
.btn-fl-filter {
  background: var(--gc-t-hero-chip);
  border-color: var(--gc-t-hero-chip);
  color: #fff;
}
.btn-fl-filter:hover { background: var(--gc-t-hero-fg); border-color: var(--gc-t-hero-fg); }

.btn-fl-clear,
.btn-fl-export,
.btn-fl-toggle-filters {
  background: var(--olam-surface);
  border: 1px solid var(--gc-ink-300);
  color: var(--gc-ink-700);
}
.btn-fl-clear:hover,
.btn-fl-export:hover,
.btn-fl-toggle-filters:hover {
  background: var(--gc-ink-50);
  border-color: var(--gc-ink-400);
  color: var(--gc-ink-900);
}
.fl-filter-badge {
  background: var(--gc-t-hero-bg);
  color: var(--gc-t-hero-fg);
  border-radius: 9999px;
}
.fl-filter-applied-hint { color: var(--gc-ink-500); font-size: var(--gc-text-xs); }

/* Row action */
.farmer-table .btn-view,
.farmer-table .btn-360,
.farmer-table .btn-plot-view {
  height: 30px;
  padding: 0 var(--gc-space-3);
  background: var(--olam-surface) !important;
  color: var(--gc-ink-700) !important;
  border: 1px solid var(--gc-ink-300);
  border-radius: var(--gc-radius-md);
  font-size: var(--gc-text-xs);
  font-weight: 500;
}
.farmer-table .btn-view:hover,
.farmer-table .btn-360:hover,
.farmer-table .btn-plot-view:hover {
  background: var(--gc-t-hero-bg) !important;
  border-color: var(--gc-t-hero-br);
  color: var(--gc-t-hero-fg) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   10. TABS, PAGINATION, PAGE HEAD, EMPTY STATE
   ─────────────────────────────────────────────────────────────────────────── */

.l2-season-tab,
.crop-status-tabs a.crop-status-tab,
.status-tabs a {
  height: 32px;
  border-radius: 9999px;
  border: 1px solid var(--gc-ink-200);
  background: var(--olam-surface);
  color: var(--gc-ink-600);
  font-size: var(--gc-text-xs);
  font-weight: 500;
}
.l2-season-tab.active,
.crop-status-tabs a.crop-status-tab.active,
.status-tabs a.active {
  background: var(--gc-t-hero-bg);
  border-color: var(--gc-t-hero-br);
  color: var(--gc-t-hero-fg);
  font-weight: 600;
}

.fl-pagination {
  padding: var(--gc-space-3) var(--gc-space-4);
  border-top: 1px solid var(--gc-ink-200);
  font-size: var(--gc-text-xs);
  color: var(--gc-ink-500);
}
.fl-page-btn {
  min-width: 32px;
  height: 32px;
  border-radius: var(--gc-radius-md);
  border: 1px solid var(--gc-ink-200);
  color: var(--gc-ink-600);
  font-size: var(--gc-text-xs);
}
.fl-page-btn.active {
  background: var(--gc-t-hero-chip) !important;
  border-color: var(--gc-t-hero-chip) !important;
  color: #fff !important;
  font-weight: 600;
}

.fl-page-head { padding: var(--gc-space-5) var(--gc-space-6) var(--gc-space-2); }
.fl-page-head-icon {
  background: var(--gc-t-hero-bg);
  border: none;
  color: var(--gc-t-hero-fg);
  border-radius: var(--gc-radius-md);
  width: 38px;
  height: 38px;
}
.fl-page-head-title { font-size: var(--gc-text-xl); font-weight: 600; color: var(--gc-ink-900); }
.fl-page-head-sub { font-size: var(--gc-text-xs); color: var(--gc-ink-500); }

.fl-empty { padding: 64px var(--gc-space-6); }
.fl-empty i { font-size: 2.5rem; color: var(--gc-ink-300); }
.fl-empty-title { font-size: var(--gc-text-sm); color: var(--gc-ink-500); font-weight: 500; }
.fl-empty-hint { font-size: var(--gc-text-xs); color: var(--gc-ink-400); }

/* ───────────────────────────────────────────────────────────────────────────
   11. DATE PICKER — kept monochrome, now on the slate ramp
   ─────────────────────────────────────────────────────────────────────────── */

.datepicker.datepicker-dropdown {
  border-radius: var(--gc-radius-lg) !important;
  box-shadow: var(--gc-shadow-overlay);
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background: var(--gc-t-hero-chip) !important;
  color: #fff !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  box-shadow: inset 0 0 0 1px var(--gc-t-hero-chip) !important;
  color: var(--gc-t-hero-fg) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   12. KPI TILES — COOL GRADIENTS
   ───────────────────────────────────────────────────────────────────────────
   A single cool ramp, light blue through sea green, laid left to right across
   the row. No violet: the primary stays on buttons and the active nav item,
   where it is an accent, and never appears on a tile.

   These are PALE gradients carrying dark ink, not saturated ones carrying
   white. That is what "light blue" and "sea green" actually look like — and it
   is the only way to have them: white text needs a 700-level ground to clear
   4.5:1, by which point sky blue has become navy. Here the ink is the family's
   800 level on its own 100→200 ground, which clears 5.4:1 at the darkest end
   of every gradient below.

   Anatomy is unchanged from section 6 — label and icon on the top row, figure
   underneath. Only the surface and the ink on it change.
   ─────────────────────────────────────────────────────────────────────────── */

.stat-card.sc-blue      { background-image: linear-gradient(135deg, #E0F2FE, #BAE6FD) !important; }  /* sky        */
.stat-card.sc-cyan      { background-image: linear-gradient(135deg, #CFFAFE, #A5F3FC) !important; }  /* cyan       */
.stat-card.sc-teal      { background-image: linear-gradient(135deg, #CCFBF1, #99F6E4) !important; }  /* teal       */
.stat-card.sc-purple    { background-image: linear-gradient(135deg, #D1FAE5, #A7F3D0) !important; }  /* sea green  */
.stat-card.sc-dark-teal { background-image: linear-gradient(135deg, #A7F3D0, #6EE7B7) !important; }  /* sea, deep  */
.stat-card.sc-orange    { background-image: linear-gradient(135deg, #DCFCE7, #BBF7D0) !important; }  /* mint       */
.stat-card.sc-red       { background-image: linear-gradient(135deg, #DBEAFE, #BFDBFE) !important; }  /* steel blue */

.stat-card.sc-blue,
.stat-card.sc-cyan,
.stat-card.sc-teal,
.stat-card.sc-purple,
.stat-card.sc-dark-teal,
.stat-card.sc-orange,
.stat-card.sc-red {
  border-color: transparent !important;
  box-shadow: var(--gc-shadow-sm);
}

/* Figure: the family's 800 level. */
.stat-card.sc-blue      .sc-count { color: #075985 !important; }
.stat-card.sc-cyan      .sc-count { color: #155E75 !important; }
.stat-card.sc-teal      .sc-count { color: #115E59 !important; }
.stat-card.sc-purple    .sc-count { color: #065F46 !important; }
.stat-card.sc-dark-teal .sc-count { color: #065F46 !important; }
.stat-card.sc-orange    .sc-count { color: #14532D !important; }
.stat-card.sc-red       .sc-count { color: #1E40AF !important; }

/* Label and counter word: the same ink, stepped back by opacity rather than by
   a second colour, so the hierarchy survives on every ground. */
.stat-card.sc-blue      .sc-title, .stat-card.sc-cyan   .sc-title,
.stat-card.sc-teal      .sc-title, .stat-card.sc-purple .sc-title,
.stat-card.sc-dark-teal .sc-title, .stat-card.sc-orange .sc-title,
.stat-card.sc-red       .sc-title { color: inherit !important; opacity: 0.72; }

.stat-card.sc-blue      { color: #075985; }
.stat-card.sc-cyan      { color: #155E75; }
.stat-card.sc-teal      { color: #115E59; }
.stat-card.sc-purple    { color: #065F46; }
.stat-card.sc-dark-teal { color: #065F46; }
.stat-card.sc-orange    { color: #14532D; }
.stat-card.sc-red       { color: #1E40AF; }

.stat-card .sc-unit { color: inherit; opacity: 0.7; }

/* Icon square: a white panel on the tinted ground, glyph in the family ink.
   Inverting it — a solid chip — would put a seventh saturated block back on a
   row whose whole point is that it is calm. */
.stat-card.sc-blue      .sc-icon, .stat-card.sc-cyan   .sc-icon,
.stat-card.sc-teal      .sc-icon, .stat-card.sc-purple .sc-icon,
.stat-card.sc-dark-teal .sc-icon, .stat-card.sc-orange .sc-icon,
.stat-card.sc-red       .sc-icon {
  background: rgb(255 255 255 / 0.65);
  color: inherit;
}

.stat-card { transition: box-shadow var(--gc-transition), transform var(--gc-transition); }
.stat-card:hover {
  box-shadow: var(--gc-shadow-md);
  transform: translateY(-1px);
  filter: none;
}

/* The tiles have no border to mark selection with, and the ring must not be
   violet either — deep teal, the far end of the row's own ramp. */
.stat-cards-row.is-selectable .stat-card.is-active {
  box-shadow: 0 0 0 2px var(--gc-page), 0 0 0 4px #0F766E !important;
}

/* Dark mode: the ramp inverts — deep cool grounds carrying the pale tone as
   ink, so the row stays cool without glowing against a slate-900 page. */
:root[data-theme="dark"] .stat-card.sc-blue      { background-image: linear-gradient(135deg, #0C2A42, #0A3A5C) !important; color: #BAE6FD; }
:root[data-theme="dark"] .stat-card.sc-cyan      { background-image: linear-gradient(135deg, #0A2C36, #0E4657) !important; color: #A5F3FC; }
:root[data-theme="dark"] .stat-card.sc-teal      { background-image: linear-gradient(135deg, #0A2E2C, #0F4A45) !important; color: #99F6E4; }
:root[data-theme="dark"] .stat-card.sc-purple    { background-image: linear-gradient(135deg, #0A2E22, #0D4A38) !important; color: #A7F3D0; }
:root[data-theme="dark"] .stat-card.sc-dark-teal { background-image: linear-gradient(135deg, #0D4A38, #10664C) !important; color: #6EE7B7; }
:root[data-theme="dark"] .stat-card.sc-orange    { background-image: linear-gradient(135deg, #0C2E1B, #12492C) !important; color: #BBF7D0; }
:root[data-theme="dark"] .stat-card.sc-red       { background-image: linear-gradient(135deg, #12243F, #1B3566) !important; color: #BFDBFE; }

:root[data-theme="dark"] .stat-card.sc-blue      .sc-count { color: #BAE6FD !important; }
:root[data-theme="dark"] .stat-card.sc-cyan      .sc-count { color: #A5F3FC !important; }
:root[data-theme="dark"] .stat-card.sc-teal      .sc-count { color: #99F6E4 !important; }
:root[data-theme="dark"] .stat-card.sc-purple    .sc-count { color: #A7F3D0 !important; }
:root[data-theme="dark"] .stat-card.sc-dark-teal .sc-count { color: #6EE7B7 !important; }
:root[data-theme="dark"] .stat-card.sc-orange    .sc-count { color: #BBF7D0 !important; }
:root[data-theme="dark"] .stat-card.sc-red       .sc-count { color: #BFDBFE !important; }

:root[data-theme="dark"] .stat-card .sc-icon { background: rgb(255 255 255 / 0.10); }