/* ============================================================
   Jesslands Farm Manager — Design System
   Warm · agricultural · friendly · mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@500;600&display=swap');

/* ---------- Tokens ---------- */
:root {
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* accent palette default = "Paddock" */
  --primary: #3a6b42;
  --primary-700: #2c5233;
  --primary-600: #357a4a;
  --primary-tint: #e6efe2;
  --accent: #d99a2b;
  --accent-tint: #f7eccf;

  /* light theme (default) */
  --bg: #f4eee2;
  --bg-pattern: #efe7d6;
  --surface: #fffdf8;
  --surface-2: #faf5ea;
  --surface-3: #f1e9d8;
  --border: #e6dcc7;
  --border-strong: #d8cbb0;
  --text: #23271d;
  --text-2: #5f6452;
  --text-3: #908b78;
  --on-primary: #fdfaf0;

  --danger: #b14a2c;
  --danger-tint: #f6e2d8;
  --warning: #c8851a;
  --warning-tint: #f7ebd2;
  --success: #4f8a3d;
  --success-tint: #e4eed7;
  --info: #3d7a86;
  --info-tint: #dcebec;
  --plan: #3f63b8;
  --plan-tint: #e4eaf6;

  /* dark-forest brand surfaces (sidebar / nav) */
  --brand-ink: #18210f;
  --brand-ink-2: #212c14;
  --brand-line: #34401f;
  --brand-text: #e7ead7;
  --brand-text-2: #a9b48a;

  /* forest scale — used by dashboard banner, budget, financials, icons throughout */
  --forest-900: #0f2212;
  --forest-800: #1a3a20;
  --forest-700: #245230;
  --forest-600: #2e6b40;
  --forest-500: #3b8050;
  --forest-400: #4a9060;
  --forest-300: #7dba94;
  --forest-200: #b8d4ba;
  --forest-100: #e8f2e8;

  /* crop palette — earthy, theme-independent */
  --crop-wheat:  #d8a440;
  --crop-barley: #cbb36a;
  --crop-canola: #efc931;
  --crop-faba:   #5e8c4e;
  --crop-lentil: #9a8a47;
  --crop-pasture:#7ba368;
  --crop-fallow: #c2a87f;
  --crop-oats:   #c9a85d;
  --crop-peas:   #8aa15a;

  /* radii + shadow */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(53,42,20,.06), 0 1px 1px rgba(53,42,20,.04);
  --shadow-md: 0 4px 16px rgba(53,42,20,.08), 0 1px 3px rgba(53,42,20,.05);
  --shadow-lg: 0 14px 40px rgba(53,42,20,.14), 0 4px 10px rgba(53,42,20,.06);

  /* density */
  --gap: 16px;
  --pad-card: 18px;
  --row-h: 56px;

  --tab-h: 74px;
  --side-w: 248px;
  --content-max: 1120px;
}

[data-density="compact"] {
  --gap: 11px;
  --pad-card: 13px;
  --row-h: 48px;
}

/* ---------- accent palettes ---------- */
[data-accent="olive"] {
  --primary: #5c6b34;
  --primary-700: #46531f;
  --primary-600: #6b7c3e;
  --primary-tint: #e9ecd8;
  --accent: #b9772e;
  --accent-tint: #f3e3d0;
}
[data-accent="harvest"] {
  --primary: #2f5d4a;
  --primary-700: #224639;
  --primary-600: #356b56;
  --primary-tint: #dceae3;
  --accent: #c85d34;
  --accent-tint: #f6e0d4;
}

/* ---------- dark theme ---------- */
[data-theme="dark"] {
  --bg: #14180f;
  --bg-pattern: #1a1f14;
  --surface: #1e2418;
  --surface-2: #242b1d;
  --surface-3: #2c3424;
  --border: #34402a;
  --border-strong: #44513a;
  --text: #ecead6;
  --text-2: #a9b094;
  --text-3: #7c836b;
  --on-primary: #f3f7e8;

  --primary: #74a86e;
  --primary-700: #5c8f57;
  --primary-600: #7fb377;
  --primary-tint: #233020;
  --accent: #e3b350;
  --accent-tint: #352c16;

  --danger: #d6764f;
  --danger-tint: #3a221a;
  --warning: #e0a23a;
  --warning-tint: #352a14;
  --success: #79b15a;
  --success-tint: #25311c;
  --info: #62a3ad;
  --info-tint: #1c2e30;
  --plan: #7d97d6;
  --plan-tint: #232c3c;

  --brand-ink: #11160c;
  --brand-ink-2: #18200f;
  --brand-line: #2b341c;
  --brand-text: #e7ead7;
  --brand-text-2: #939c79;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.36);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5);
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
#root { height: 100%; }
/* Only reset buttons that are NOT Bootstrap-styled (shell buttons, icon buttons) */
.sidebar button, .tabbar button, .topbar button,
.icon-btn, .s-item, .icon-mini, .fab, .seg button, .seg a,
.season-chip, .sl-link {
  font: inherit; color: inherit; cursor: pointer; border: none; background: none;
}
ul { list-style: none; }
::selection { background: var(--primary); color: var(--on-primary); }

/* subtle contour-field texture on the app background */
.field-bg {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 42%),
    radial-gradient(circle at 88% 8%, color-mix(in oklab, var(--primary) 8%, transparent), transparent 38%);
}

/* ============================================================
   App shell + responsive nav
   ============================================================ */
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* sidebar (desktop) */
.sidebar { display: none; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-top, 0px));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, var(--primary-600), var(--primary-700));
  display: grid; place-items: center; color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
.topbar .tb-titles { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.topbar .tb-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.topbar .tb-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.topbar .tb-spacer { flex: 1; }
.icon-btn {
  position: relative;
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background .15s, color .15s, transform .1s;
}
.icon-btn:hover { color: var(--text); background: var(--surface-3); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--surface);
}

/* scroll area */
.scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--gap);
}

/* bottom tab bar (mobile) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(16px);
  border-top: 1px solid var(--border);
}
.tabbar button, .tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-3); font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  white-space: nowrap; position: relative; transition: color .15s; text-decoration: none !important;
}
/* Icons sized independently of the label so both stay easy to read on mobile. */
.tabbar button .ico, .tabbar a .ico { font-size: 23px; line-height: 1; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.tabbar button.active, .tabbar a.active { color: var(--primary); }
[data-theme="dark"] .tabbar button.active, [data-theme="dark"] .tabbar a.active { color: var(--primary-600); }
.tabbar button.active .ico, .tabbar a.active .ico { transform: translateY(-2px); }
.tabbar button.active::before, .tabbar a.active::before {
  content: ''; position: absolute; top: 8px; width: 34px; height: 4px; border-radius: 3px;
  background: var(--primary);
}
.tabbar .tab-badge {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* "More" bottom sheet (mobile secondary nav) */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(20,26,14,.45);
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.sheet-scrim.show { opacity: 1; visibility: visible; }
.more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top-left-radius: 20px; border-top-right-radius: 20px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.22);
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); transition: transform .26s cubic-bezier(.22,1,.36,1);
  max-height: 80vh; overflow-y: auto;
}
.more-sheet.show { transform: translateY(0); }
.more-sheet .ms-handle {
  width: 40px; height: 4px; border-radius: 3px; background: var(--border-strong, var(--border));
  margin: 4px auto 14px;
}
.more-sheet .ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.more-sheet .ms-grid a {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 14.5px;
  text-decoration: none; border: 1px solid var(--border);
}
.more-sheet .ms-grid a:active { background: var(--surface-3); }
.more-sheet .ms-grid a i { font-size: 17px; color: var(--primary); flex: none; }
.more-sheet .ms-grid a.ms-danger { color: var(--danger); }
.more-sheet .ms-grid a.ms-danger i { color: var(--danger); }
@media (min-width: 860px) { .more-sheet, .sheet-scrim { display: none !important; } }

/* ============================================================
   Reusable pieces
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card.pad { padding: var(--pad-card); }
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: var(--pad-card) var(--pad-card) 0;
}
.card-head .ch-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.card-head .ch-spacer { flex: 1; }

.section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 2px 2px;
}
.section-label .sl-link { margin-left: auto; color: var(--primary); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }

.page-head { display: flex; flex-direction: column; gap: 3px; padding: 2px 2px 4px; }
.page-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.page-head p { color: var(--text-2); font-size: 14px; }
.page-head .ph-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.page-head .ph-row .ph-spacer { flex: 1; }

/* badges / chips */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-2);
  white-space: nowrap;
}
.badge .bd-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Notification urgency tag (in the bell dropdown) */
.notif-tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 6px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.notif-tag.urgent  { background: var(--danger);  color: #fff; }
.notif-tag.routine { background: var(--warning); color: #3a2708; }
.notif-item:hover { background: var(--surface-2); }
/* Badge variants — text colours darkened for WCAG AA contrast (outdoor / sunlight use) */
.badge.ok     { background: var(--success-tint); color: #1e4a1c; }  /* dark forest green  ~9:1 */
.badge.warn   { background: var(--warning-tint); color: #5c3306; }  /* dark amber         ~8:1 */
.badge.danger { background: var(--danger-tint);  color: var(--danger); }
.badge.info   { background: var(--info-tint);    color: #1e4f58; }  /* dark teal          ~8:1 */
.badge.primary{ background: var(--primary-tint); color: var(--primary-700); }
[data-theme="dark"] .badge.primary { color: var(--primary-600); }
.badge.accent { background: var(--accent-tint);  color: #5c3306; }  /* dark amber         ~7:1 */
.badge.plan   { background: var(--plan-tint);    color: #253888; }  /* dark blue          ~6:1 */
.badge.muted  { background: transparent; color: var(--text-2); font-style: italic; padding-left: 0; padding-right: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 600; font-size: 14px; border-radius: var(--r-pill);
  padding: 11px 18px; transition: transform .1s, filter .15s, background .15s;
  min-height: 44px;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { min-height: 36px; padding: 8px 13px; font-size: 13px; }

/* avatar */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  color: var(--on-primary); font-family: var(--font-display);
}

/* progress bar */
.pbar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.pbar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--primary); }

/* generic list row — scoped away from Bootstrap grid rows (those with g-* classes) */
.row:not([class*="g-"]) {
  display: flex; align-items: center; gap: 12px;
  padding: 13px var(--pad-card);
}
.row:not([class*="g-"]) + .row:not([class*="g-"]) { border-top: 1px solid var(--border); }
.row .r-grow { flex: 1; min-width: 0; }
.row .r-title { font-weight: 600; font-size: 15px; }
.row .r-sub { color: var(--text-2); font-size: 13px; }
/* Reset any farm.css leakage onto Bootstrap grid rows */
.row.g-0, .row.g-1, .row.g-2, .row.g-3, .row.g-4, .row.g-5 {
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* fade/slide-in for page transitions (transform-only so content is
   never hidden if the animation timeline doesn't advance) */
@keyframes pageIn { from { transform: translateY(10px); } to { transform: none; } }
.page > * { animation: pageIn .34s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .page > * { animation: none; } }
.page > *:nth-child(1){animation-delay:.01s}
.page > *:nth-child(2){animation-delay:.05s}
.page > *:nth-child(3){animation-delay:.09s}
.page > *:nth-child(4){animation-delay:.13s}
.page > *:nth-child(5){animation-delay:.17s}
.page > *:nth-child(6){animation-delay:.21s}
.page > *:nth-child(7){animation-delay:.25s}
.page > *:nth-child(8){animation-delay:.29s}

/* floating action button */
.fab {
  position: fixed; right: 16px; z-index: 45;
  bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  transition: transform .12s;
}
.fab:active { transform: scale(.92); }

/* ============================================================
   Desktop layout  (>= 860px)
   ============================================================ */
@media (min-width: 860px) {
  .app { flex-direction: row; }
  .tabbar { display: none; }
  .fab { bottom: 28px; right: calc((100% - var(--content-max)) / 2 + 28px); }

  .sidebar {
    display: flex; flex-direction: column;
    width: var(--side-w); flex: none;
    height: 100%;
    overflow: hidden;
    background: var(--brand-ink);
    background-image: radial-gradient(circle at 30% -5%, rgba(217,154,43,.12), transparent 55%);
    padding: 22px 16px;
    gap: 6px;
  }
  .sidebar .s-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; flex: none; }
  .sidebar .s-brand .brand-mark {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    background: #fffdf6; color: var(--accent);
    display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.3);
    border: 1px solid rgba(217,154,43,.4);
  }
  .sidebar .s-brand .s-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.05; color: var(--brand-text); }
  .sidebar .s-brand .s-co { font-size: 10.5px; color: var(--brand-text-2); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }
  /* Nav scrolls when items exceed available height; brand + footer always stay visible */
  .sidebar .s-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; scrollbar-width: none; }
  .sidebar .s-nav::-webkit-scrollbar { display: none; }
  .sidebar .s-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 13px; border-radius: var(--r-md); color: var(--brand-text-2);
    font-weight: 600; font-size: 14.5px; transition: background .14s, color .14s;
  }
  .sidebar .s-item:hover { background: var(--brand-ink-2); color: var(--brand-text); }
  .sidebar .s-item.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
  .sidebar .s-item.active .count { background: rgba(255,255,255,.22); color: #fff; }
  .sidebar .s-item .count {
    margin-left: auto; font-size: 12px; font-weight: 700;
    background: var(--brand-ink-2); color: var(--brand-text-2); border-radius: var(--r-pill); padding: 2px 8px;
  }
  .sidebar .s-divider { height: 1px; background: var(--brand-line); margin: 12px 6px; }
  .sidebar .s-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
  .sidebar .s-user {
    display: flex; align-items: center; gap: 10px; padding: 10px;
    border-radius: var(--r-md); border: 1px solid var(--brand-line); background: var(--brand-ink-2);
  }
  .sidebar .s-user .su-name { font-weight: 600; font-size: 13.5px; color: var(--brand-text); }
  .sidebar .s-user .su-role { font-size: 11.5px; color: var(--brand-text-2); }

  .main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }
  .topbar { padding: 16px 28px; }
  .topbar .brand-mark, .topbar .tb-titles .tb-eyebrow { display: none; }
  .topbar .tb-title { font-size: 22px; }
  .page {
    max-width: var(--content-max);
    padding: 26px 28px 60px;
    gap: 18px;
  }
  .page-head h1 { font-size: 30px; }

  /* multi-column grids unlock on desktop */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; }
  .span-2 { grid-column: span 2; }
  .dk-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
}

@media (max-width: 859px) {
  .grid-2, .grid-3, .dk-row { display: flex; flex-direction: column; gap: var(--gap); }
  .desktop-only { display: none !important; }
}
@media (min-width: 860px) { .mobile-only { display: none !important; } }

/* ---------- KPI tile grid: 2-up mobile, 4-up desktop ---------- */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (min-width: 860px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- weather hero ---------- */
.wx-hero {
  background: linear-gradient(155deg, var(--primary-700), var(--primary));
  color: var(--on-primary); border: none; overflow: hidden; position: relative;
}
/* Override the Bootstrap .card !important rules for wx-hero */
.card.wx-hero {
  background: linear-gradient(155deg, var(--primary-700), var(--primary)) !important;
  color: var(--on-primary) !important;
  border: none !important;
}
.wx-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% -10%, rgba(255,255,255,.18), transparent 45%);
}
.wx-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wx-day {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; border-radius: 12px; background: rgba(255,255,255,.1);
}
.wx-day .wd-name { font-size: 11px; font-weight: 700; opacity: .85; }
.wx-day .wd-hi { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-day .wd-lo { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }

/* ---------- rotation matrix ---------- */
.rot-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rot-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; min-width: 360px; }
.rot-table th { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: 0 0 4px; text-align: center; }
.rot-table th.rot-pad-h { text-align: left; padding-left: 4px; }
.rot-table td.rot-pad {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  font-weight: 600; font-size: 13.5px; white-space: nowrap; padding: 4px 12px 4px 4px;
}
.rot-table td.rot-pad .rp-ha { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.rot-cell-td { padding: 2px; }
.rot-now-col { color: var(--primary); }

/* ---------- mini stacked bar (margins) ---------- */
.gm-bar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
.gm-bar > span { display: block; height: 100%; }

/* ---------- jobs columns (desktop board) ---------- */
@media (min-width: 860px) {
  .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
}
.job-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.priority-bar { width: 4px; border-radius: 3px; align-self: stretch; flex: none; }

/* segmented control */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-3); border-radius: var(--r-pill); }
.seg button, .seg a {
  flex: 1; padding: 9px 10px; border-radius: var(--r-pill); font-weight: 600; font-size: 13px;
  color: var(--text-2); transition: background .15s, color .15s; white-space: nowrap;
  text-align: center; text-decoration: none !important; display: block;
}
.seg button.active, .seg a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg.dk button.active, .seg.dk a.active { background: var(--primary); color: #fff; }

/* brass / gold action button */
.btn.gold { background: var(--accent); color: #2c2208; box-shadow: var(--shadow-sm); }
.btn.gold:hover { filter: brightness(1.05); }
[data-theme="dark"] .btn.gold { color: #20180a; }

/* toolbar: filters + view toggle */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill-select {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-weight: 600; font-size: 13.5px; min-height: 42px;
}
.pill-select .ps-ico { color: var(--text-3); }
.toolbar .tb-count { margin-left: auto; color: var(--text-3); font-size: 13px; font-weight: 600; }

/* season switcher chips */
.season-switch { display: flex; align-items: stretch; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.season-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none;
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  font-weight: 600; transition: all .14s; min-height: 48px; justify-content: center; white-space: nowrap;
}
.season-chip:hover { border-color: var(--border-strong); }
.season-chip .sc-label { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.season-chip .sc-range { font-size: 11px; color: var(--text-3); font-weight: 500; white-space: nowrap; }
.season-chip.current { background: var(--plan); border-color: var(--plan); }
.season-chip.current .sc-label, .season-chip.current .sc-range { color: #fff; }
.season-chip.current .sc-range { opacity: .85; }
.season-chip .sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.season-chip.current .sc-dot { background: #fff; }

/* paddock plan card */
.plan-card { padding: 0; overflow: hidden; }
.plan-card .pc-head {
  display: flex; align-items: center; gap: 12px; padding: 15px var(--pad-card) 13px;
}
.plan-card .pc-grip { color: var(--text-3); flex: none; cursor: grab; }
.plan-card .pc-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.1; }
.plan-card .pc-meta { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.plan-card .pc-body { padding: 0 var(--pad-card) 6px; display: flex; flex-direction: column; }
.season-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: var(--r-md);
}
.season-row + .season-row { margin-top: 4px; }
.season-row.now { background: var(--plan-tint); box-shadow: inset 3px 0 0 var(--plan); }
.season-row .sr-when { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--text-3); width: 58px; flex: none; line-height: 1.2; }
.season-row.now .sr-when { color: var(--plan); }
.season-row .sr-crop { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; min-width: 0; }
.season-row .sr-spacer { flex: 1; }
.season-row .sr-gm { text-align: right; line-height: 1.1; }
.season-row .sr-gm .g1 { font-weight: 700; font-size: 13.5px; font-family: var(--font-mono); color: var(--success); }
.season-row .sr-gm .g2 { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.plan-card .pc-foot {
  display: flex; align-items: center; gap: 8px; padding: 11px var(--pad-card);
  border-top: 1px solid var(--border); background: var(--surface-2);
}
.plan-card .pc-foot .pf-spacer { flex: 1; }
.icon-mini {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-2); background: var(--surface);
  transition: background .14s, color .14s;
}
.icon-mini:hover { background: var(--surface-3); color: var(--text); }
.icon-mini.danger:hover { color: var(--danger); border-color: var(--danger); }

/* plan grid: 1col mobile, 2-3 col desktop */
.plan-grid { display: flex; flex-direction: column; gap: var(--gap); }
@media (min-width: 860px) { .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } }
@media (min-width: 1180px) { .plan-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* table view */
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ptable td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.ptable tr:last-child td { border-bottom: none; }
.ptable td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Responsive tables: stack each row into a card on phones (<=640px).
   Cells use data-label="…" to show the column name beside their value. */
@media (max-width: 640px) {
  /* Safety net: a card holding a wide table scrolls internally instead of
     forcing the whole page sideways. Fixes phone-width "scroll from one side
     to the other" on pages whose tables lack an overflow wrapper. */
  .card { overflow-x: auto; }
  .rtable thead { display: none; }
  .rtable, .rtable tbody, .rtable tfoot { display: block; width: 100%; }
  .rtable tr {
    display: block; padding: 4px 14px 10px; margin: 0 0 10px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  }
  .rtable tr:last-child { margin-bottom: 0; }
  .rtable td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 7px 0; border: none; border-bottom: 1px solid var(--border); text-align: right;
  }
  .rtable td:last-child { border-bottom: none; }
  .rtable td.num { text-align: right; }
  .rtable td[data-label]::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3);
  }
  /* The first cell becomes the card header — full width, no label, bigger */
  .rtable td.rcard-head {
    display: block; text-align: left; padding-top: 10px;
    border-bottom: 1px solid var(--border);
  }
  .rtable td.rcard-head::before { content: none; }
  /* Hide reorder grips + collapse empty utility cells on phones */
  .rtable td.pad-grip, .rtable td.rcard-hide { display: none; }
  /* Action cells: drop the label, let buttons sit on their own line */
  .rtable td.rcard-actions { justify-content: flex-end; padding-top: 10px; }
  .rtable td.rcard-actions::before { content: none; }
}

/* simple bar chart (rainfall) */
.barchart { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.barchart .bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.barchart .bc-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.barchart .bc-bar { width: 42%; border-radius: 5px 5px 0 0; min-height: 3px; }
.barchart .bc-actual { background: var(--primary); }
.barchart .bc-avg { background: var(--surface-3); }
.barchart .bc-label { font-size: 11.5px; color: var(--text-2); font-weight: 600; }

/* ring gauge wrap */
.ring-wrap { display: flex; align-items: center; gap: 18px; }
.ring-wrap .ring-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }

/* ============================================================
   Bootstrap CSS variable overrides (so Bootstrap components
   use the farm design tokens)
   ============================================================ */
:root {
  /* Override Bootstrap's primary with our green */
  --bs-primary: #3a6b42;
  --bs-primary-rgb: 58, 107, 66;
  --bs-body-font-family: 'Hanken Grotesk', system-ui, sans-serif;
  --bs-body-bg: #f4eee2;
  --bs-body-color: #23271d;
  --bs-border-color: #e6dcc7;
  --bs-border-radius: 14px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 20px;
  --bs-card-bg: #fffdf8;
  --bs-card-border-color: #e6dcc7;
  --bs-card-cap-bg: #faf5ea;
  /* Success = our primary green */
  --bs-success: #4f8a3d;
  --bs-success-rgb: 79, 138, 61;
  /* Warning = amber */
  --bs-warning: #c8851a;
  --bs-warning-rgb: 200, 133, 26;
  /* Danger = earthy red */
  --bs-danger: #b14a2c;
  --bs-danger-rgb: 177, 74, 44;
  /* Info */
  --bs-info: #3d7a86;
  --bs-info-rgb: 61, 122, 134;
  /* Link */
  --bs-link-color: #3a6b42;
  --bs-link-hover-color: #2c5233;
}

/* Bootstrap override / reset — farm.css takes precedence
   ============================================================ */

/* Body: restore farm fonts (Bootstrap sets font-family) */
body {
  font-family: var(--font-body) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* The app shell must be full-height and not wrap in a container */
html, body { height: 100%; }
.app { height: 100%; }

/* Bootstrap adds .container, .container-fluid, etc. but we don't use them in shell */
/* Ensure the .page element (inner pages) is fine inside .scroll */
.scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Bootstrap's .card adds display:flex flex-direction:column; keep that for inner cards */
/* but override the visual tokens */
/* Content cards (.card.pad) hold prose: flex-column "blockifies" inline children
   (strong/em/a/i), stacking mid-sentence fragments on their own lines. Restore
   normal flow; cards that want flex set it inline, which still wins. */
.card.pad { display: block; }
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  color: var(--text) !important;
  font-weight: 600;
}
.card-body { color: var(--text); }
.card-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border) !important;
}

/* Badge: override Bootstrap's pill/background patterns */
.badge {
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: var(--r-pill) !important;
  font-weight: 600;
}
/* Solid Bootstrap badge colours need white text — farm.css grey override wins otherwise */
.badge.bg-success,
.badge.bg-primary,
.badge.bg-danger,
.badge.bg-secondary,
.badge.bg-info,
.badge.bg-warning.text-dark { /* warning stays dark text */ }
.badge.bg-success,
.badge.bg-primary,
.badge.bg-danger,
.badge.bg-secondary,
.badge.bg-info {
  color: #fff !important;
}

/* Bootstrap's .btn conflicts — keep Bootstrap utility btn classes but override base */
.btn {
  font-family: var(--font-body) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
}

/* Sidebar / topbar / tabbar — ensure Bootstrap nav/navbar styles don't apply */
.sidebar a, .tabbar a, .topbar a { text-decoration: none; }
/* These are redefined below and in the original farm.css section — just ensure
   Bootstrap .nav, .navbar won't override them (they use different selectors) */

/* Fix table styles to use farm tokens */
.table thead th {
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--border) !important;
}
.table td { border-bottom: 1px solid var(--border) !important; }
.table-hover tbody tr:hover { background: var(--primary-tint) !important; }

/* Form controls */
.form-control, .form-select {
  border: 1.5px solid var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--r-md) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent) !important;
}

/* Alerts - override Bootstrap */
.alert { border-left-width: 4px !important; border-radius: var(--r-md) !important; }
.alert-success { background: #f0fdf4 !important; border-color: var(--success) !important; color: #14532d !important; }
.alert-danger  { background: #fff1f2 !important; border-color: var(--danger)  !important; color: #9f1239 !important; }
.alert-warning { background: #fffbeb !important; border-color: var(--warning) !important; color: #78350f !important; }
.alert-info    { background: #eff6ff !important; border-color: var(--info)    !important; color: #1e3a8a !important; }

/* ============================================================
   Forms & inputs  (Bootstrap-free)
   ============================================================ */
.form-label { font-weight: 600; color: var(--text); margin-bottom: .3rem; font-size: .88rem; display: block; }
.form-text  { font-size: .8rem; color: var(--text-3); margin-top: .25rem; display: block; }
.form-control, .form-select {
  width: 100%; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); padding: .55rem .9rem;
  font-size: .9rem; font-family: inherit;
  background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  min-height: 44px; display: block;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  outline: none;
}
.form-control::placeholder { color: var(--text-3); opacity: .7; }
.form-control-sm, .form-select-sm { font-size: .83rem; min-height: 36px; padding: .35rem .7rem; }
textarea.form-control { min-height: unset; resize: vertical; }
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: .4rem; }
.form-check-input { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); accent-color: var(--primary); flex: none; }
.form-check-label { font-size: .9rem; }
.input-group { display: flex; }
.input-group .form-control { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group-text {
  display: flex; align-items: center; padding: .55rem .9rem;
  background: var(--surface-2); border: 1.5px solid var(--border-strong);
  border-left: none; border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .88rem; color: var(--text-2); white-space: nowrap;
}
.input-group .btn { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ============================================================
   Alert banners
   ============================================================ */
.alert {
  border-radius: var(--r-md); border: 1px solid transparent; border-left-width: 4px;
  padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1rem;
  display: flex; align-items: flex-start; gap: .6rem;
}
.alert-dismiss-btn {
  margin-left: auto; background: none; border: none; font-size: 1.1rem;
  cursor: pointer; opacity: .5; padding: 0 .2rem; line-height: 1;
  flex: none; color: inherit;
}
.alert-dismiss-btn:hover { opacity: 1; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; border-left-color: var(--success); color: #14532d; }
.alert-danger  { background: #fff1f2; border-color: #fecdd3; border-left-color: var(--danger);  color: #9f1239; }
.alert-warning { background: #fffbeb; border-color: #fde68a; border-left-color: var(--warning); color: #78350f; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; border-left-color: var(--info);    color: #1e3a8a; }

/* ============================================================
   Tables
   ============================================================ */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead th {
  font-weight: 700; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-3); padding: .75rem .9rem;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  white-space: nowrap;
}
.table td { padding: .7rem .9rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: var(--primary-tint); }
.text-end { text-align: right; }
.text-center { text-align: center; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   Utility helpers
   ============================================================ */
.d-flex { display: flex; }
.d-none { display: none !important; }
.d-block { display: block; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.fw-bold, .fw-semibold, .fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
/* text-muted: use text-2 (darker) for outdoor readability; !important overrides Bootstrap's own !important */
.text-muted { color: var(--text-2) !important; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info    { color: var(--info); }
.text-primary { color: var(--primary); }
.small, .text-sm { font-size: .83rem; }
.fst-italic { font-style: italic; }
.text-decoration-none { text-decoration: none; }
.w-100 { width: 100%; }
.me-1 { margin-right: .25rem; }
.me-2 { margin-right: .5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.ms-1 { margin-left: .25rem; }
.ms-2 { margin-left: .5rem; }
.ms-auto { margin-left: auto; }
.p-0 { padding: 0; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }

/* ============================================================
   Card variants (extra)
   ============================================================ */
.card-header {
  padding: .85rem var(--pad-card); border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-2);
  font-weight: 600; font-size: .9rem; color: var(--text);
  display: flex; align-items: center; gap: .5rem;
}
.card-body   { padding: var(--pad-card); }
.card-footer {
  padding: .8rem var(--pad-card); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--surface-2);
}

/* ============================================================
   Badge extras (status classes from old Bootstrap design)
   ============================================================ */
/* Legacy Bootstrap badge classes — darkened for outdoor readability */
.badge-planned   { background: var(--plan-tint);    color: #253888; }  /* dark blue   ~6:1 */
.badge-planted   { background: var(--success-tint); color: #1e4a1c; }  /* dark green  ~9:1 */
.badge-harvested { background: var(--accent-tint);  color: #5c3306; }  /* dark amber  ~7:1 */
.badge-fallow    { background: var(--surface-3);    color: var(--text-2); }  /* ~5.5:1 */
.badge-failed    { background: var(--danger-tint);  color: var(--danger);  }
.badge-muted     { background: var(--surface-3);    color: var(--text-3);  }
.badge-warning   { background: var(--warning-tint); color: var(--warning); }
.badge-success   { background: var(--success-tint); color: var(--success); }
.badge-danger    { background: var(--danger-tint);  color: var(--danger);  }
.badge-info      { background: var(--info-tint);    color: var(--info);    }
.badge-secondary { background: var(--surface-3);    color: var(--text-2);  }

/* ============================================================
   Dropdown (simple CSS-only for user menu)
   ============================================================ */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  min-width: 190px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: .35rem;
  display: none; flex-direction: column;
}
.dropdown-menu.show { display: flex; }
.dropdown-item {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem;
  border-radius: var(--r-sm); font-size: .875rem; font-weight: 500;
  color: var(--text); text-decoration: none; cursor: pointer; background: none; border: none;
  transition: background .12s; font-family: inherit; width: 100%; text-align: left;
}
.dropdown-item:hover { background: var(--primary-tint); color: var(--primary-700); }
.dropdown-item.text-danger:hover { background: var(--danger-tint); color: var(--danger); }
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: .35rem 0; }

/* On phones the notification panel is too wide to hang off the bell without
   spilling past the left edge — centre it as a fixed panel instead. */
@media (max-width: 640px) {
  #notifMenu {
    position: fixed; top: 58px; left: 50%; right: auto; transform: translateX(-50%);
    width: calc(100vw - 24px); max-width: 420px;
  }
}

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: none; place-items: center; padding: 1rem;
  pointer-events: auto;
}
.modal-backdrop.show { display: grid; }
/* pointer-events:auto is REQUIRED — Bootstrap's .modal-dialog sets it to none
   (it expects an inner .modal-content to re-enable it). These custom modals have
   no .modal-content, so without this the whole form is click-through: taps fall
   past the inputs to the backdrop and nothing in the dialog can be used. */
.modal-dialog { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); max-width: 520px; width: 100%; pointer-events: auto; }
.modal-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.modal-header h5, .modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0; flex: 1; }
.modal-body   { padding: 1.4rem; }
.modal-footer { padding: .9rem 1.4rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; }
.btn-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-3); padding: 0; line-height: 1; }
.btn-close:hover { color: var(--text); }

/* ============================================================
   Weather strip (new minimal design)
   ============================================================ */
.wx-topbar-strip {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  font-size: 13px; color: var(--on-primary); opacity: .92;
}
.wx-topbar-strip .wx-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); font-weight: 600; font-size: 12.5px;
}

/* ============================================================
   Page-level extras
   ============================================================ */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}

/* ============================================================
   Crop / status badges (mapping old classes)
   ============================================================ */
.season-pill {
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  padding: 3px 10px; font-size: .75rem; font-weight: 700; line-height: 1.4;
}
.pill-summer { background: var(--accent-tint); color: #854d0e; border: 1.5px solid var(--accent); }
.pill-winter { background: var(--plan-tint);   color: #1e40af; border: 1.5px solid var(--plan); }

/* priority bars on job cards */
.priority-bar { width: 4px; border-radius: 3px; flex: none; align-self: stretch; }

/* ============================================================
   Overview screen extras
   ============================================================ */
.stat-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--pad-card);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
}
.stat-tile-icon {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; flex: none;
}
.stat-tile-value {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  line-height: 1.05; letter-spacing: -.01em;
}
.stat-tile-label { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.stat-tile-sub   { font-size: 12.5px; color: var(--text-3); }

/* Paddock card (overview grid) */
.paddock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.paddock-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.paddock-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.paddock-card-accent { height: 4px; }
.paddock-card-body { padding: var(--pad-card); flex: 1; display: flex; flex-direction: column; gap: 8px; }
.paddock-card-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.paddock-card-meta { font-size: 13px; color: var(--text-3); }

/* ============================================================
   Focus ring (accessibility)
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ============================================================
   Print utilities
   ============================================================ */
@media print {
  .sidebar, .topbar, .tabbar, .fab { display: none !important; }
  .main-col { margin: 0; }
  .scroll { overflow: visible; height: auto; }
  .page { padding: 0; max-width: none; }
}

/* ============================================================
   Responsive extras for inner pages
   ============================================================ */
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .paddock-grid { grid-template-columns: 1fr; }
}


/* Intentionally-coloured "hero" cards. The global `.card { background: … !important }`
   rule (added to tame Bootstrap) otherwise strips any card's own background, which
   left light-on-light text. This higher-specificity rule lets a card opt back in. */
.card.hero {
  background: linear-gradient(135deg, var(--primary-700), var(--primary)) !important;
  color: var(--on-primary);
  border-color: transparent;
}
.card.hero .hero-sub { color: var(--on-primary); opacity: .78; }