/* ═══════════════════════════════════════════════════════════════════════════
   DRENIO — FARM AESTHETIC THEME OVERRIDE
   ═══════════════════════════════════════════════════════════════════════════
   This file REPLACES the look of style.css without touching any HTML template.
   All original class names work 1:1. Only colors, fonts, and visual polish change.

   Palette: Cream, Sage, Honey — warm, organic, farm-like.
   Fonts:   Fraunces (display/serif, organic headlines) + Inter (body, clean).

   HOW TO USE:
   1. Save this file as /static/style.css (REPLACES your current one)
      OR
   2. Keep both files and load this one AFTER the original:
      <link rel="stylesheet" href="/static/style.css">
      <link rel="stylesheet" href="/static/farm-theme.css">
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ───────────────────────────────────────────────────────────────────────────
   1. COLOR PALETTE OVERRIDE (CSS Variables)
   All UI inherits from these — changing them repaints the whole app.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Drenio Design System (overridden) ── */
  --fc-forest:    #5C7A4F;   /* Sage green — primary buttons, prices */
  --fc-meadow:    #7A9A6A;   /* Sage lighter — gradient accent */
  --fc-mist:      #EDF2E3;   /* Pale sage — badges, hover backgrounds */
  --fc-sprout:    #C4D4A5;   /* Soft sage — timelines, progress */
  --fc-harvest:   #D68C3A;   /* Warm honey — delivery accents */
  --fc-wheat:     #F5E6C8;   /* Cream honey — pending badges */
  --fc-border:    rgba(93, 76, 50, 0.18);

  /* ── Legacy greens remapped to sage tones ── */
  --green-dark:   #3F5836;   /* deep sage */
  --green:        #5C7A4F;   /* sage */
  --green-mid:    #7A9A6A;   /* medium sage */
  --green-light:  #EDF2E3;   /* pale sage */
  --green-pale:   #F7F4EC;   /* cream */

  --blue:         #4A6FA5;   /* dusty blue (instead of harsh #1565c0) */
  --orange:       #D68C3A;   /* honey */
  --red:          #B84C3E;   /* tomato */
  --gold:         #E8A33D;   /* warm gold */

  /* ── Backgrounds — cream base, clean white cards ── */
  --bg:           #FBF6EC;   /* cream base */
  --surface:      #FFFFFF;   /* clean white cards */
  --surface-2:    #F5EEE0;   /* soft cream */
  --border:       rgba(93, 76, 50, 0.18);

  /* ── Text — soil-tone instead of cold grey ── */
  --text-1:       #2D2A24;   /* soil / dark warm */
  --text-2:       #5D5648;   /* medium soil */
  --text-3:       #9C9383;   /* muted warm grey */

  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    22px;
  --radius-xl:    30px;

  --shadow-sm:    0 1px 3px rgba(93, 76, 50, 0.06), 0 1px 2px rgba(93, 76, 50, 0.04);
  --shadow:       0 2px 8px rgba(93, 76, 50, 0.08), 0 4px 16px rgba(93, 76, 50, 0.06);
  --shadow-lg:    0 8px 32px rgba(93, 76, 50, 0.12);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY — Inter body + Fraunces display
   ─────────────────────────────────────────────────────────────────────────── */
body,
.dash-figma-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text-1);
}

/* Sora/Serif headlines become warm, organic Fraunces */
h1, h2, h3, h4,
.dash-figma-title,
.fc-section-title,
[style*="'Sora'"],
[style*="Sora, sans-serif"] {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* DM Sans body text → Inter */
[style*="'DM Sans'"],
[style*="DM Sans, sans-serif"] {
  font-family: 'Inter', sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. MAIN HEADER (legacy green bar) — sage instead of forest
   ─────────────────────────────────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, #3F5836 0%, #5C7A4F 100%) !important;
  box-shadow: 0 2px 12px rgba(63, 88, 54, 0.15) !important;
}

header h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. DASH-FIGMA-HEADER — warm cream bar instead of white
   ─────────────────────────────────────────────────────────────────────────── */
.dash-figma-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  backdrop-filter: blur(10px);
}

.dash-figma-title {
  color: var(--text-1) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dash-figma-sub {
  color: var(--text-3) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Notif bell + avatar buttons — warmer, less clinical */
.notif-bell {
  background: var(--fc-mist) !important;
  color: var(--fc-forest) !important;
  border-radius: 12px !important;
  transition: all 0.2s;
}
.notif-bell:hover {
  background: var(--fc-sprout) !important;
  transform: translateY(-1px);
}

.avatar-btn {
  background: linear-gradient(135deg, var(--fc-forest) 0%, var(--fc-meadow) 100%) !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.notif-badge {
  background: var(--fc-harvest) !important;
  border: 2px solid var(--surface) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   5. BOTTOM NAVIGATION — cream bar with sage pill for active
   ─────────────────────────────────────────────────────────────────────────── */
.bottom-nav {
  background: var(--surface) !important;
  border-top: 1px solid var(--fc-border) !important;
  box-shadow: 0 -2px 12px rgba(93, 76, 50, 0.06) !important;
}

.bottom-nav a {
  color: var(--text-3) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: color 0.2s;
}

.bottom-nav a.active {
  color: var(--fc-forest) !important;
}

.bottom-nav a.active .nav-icon {
  background: var(--fc-mist);
  border-radius: 100px;
  padding: 4px 14px;
}

.bottom-nav .nav-icon {
  transition: background 0.2s;
}

.nav-badge {
  background: var(--fc-harvest) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   6. BUTTONS — warmer greens, subtle shadows
   ─────────────────────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: all 0.2s;
}

.btn-green,
.btn-primary {
  background: linear-gradient(135deg, var(--fc-forest) 0%, var(--fc-meadow) 100%) !important;
  box-shadow: 0 2px 8px rgba(92, 122, 79, 0.25) !important;
}

.btn-green:hover,
.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(92, 122, 79, 0.35) !important;
  transform: translateY(-1px);
}

.btn-blue {
  background: linear-gradient(135deg, #4A6FA5, #5C82BD) !important;
  box-shadow: 0 2px 8px rgba(74, 111, 165, 0.25) !important;
}

.btn-danger {
  background: var(--red) !important;
  box-shadow: 0 2px 8px rgba(184, 76, 62, 0.25) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   7. CARDS — plant, listing, form — warm surfaces, soft shadows
   ─────────────────────────────────────────────────────────────────────────── */
.plant-card,
.listing-card,
.form-card,
.stat-card,
.delivery-card,
.dispute-card,
.adopter-card,
.farmer-info-card {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--fc-border);
  transition: all 0.2s;
}

.plant-card:hover,
.listing-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px);
}

/* Landing-page role cards sit on a dark-green hero, so they must keep their
   translucent-white look — not the cream surface used for cards elsewhere. */
.role-card {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff;
}
.role-card:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-2px);
}
.role-card h3,
.role-card p {
  color: #fff !important;
}
.role-card p {
  opacity: 0.85;
}

.plant-info strong,
.listing-card strong {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  color: var(--text-1);
}

.plant-type,
.plant-date {
  color: var(--text-3) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   8. FORM INPUTS — warmer, cream-tinted
   ─────────────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--fc-border) !important;
  color: var(--text-1) !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: 12px !important;
  transition: all 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  background: var(--surface) !important;
  border-color: var(--fc-forest) !important;
  box-shadow: 0 0 0 3px rgba(92, 122, 79, 0.1) !important;
  outline: none !important;
}

label {
  color: var(--text-2) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   9. CLARITY BANNERS (cl-banner, clarity-banner) — honey/sage/tomato
   ─────────────────────────────────────────────────────────────────────────── */
.clarity-banner,
.cl-banner {
  border-radius: var(--radius) !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: var(--shadow-sm);
}

.cl-act,
.clarity-banner.cl-act {
  background: linear-gradient(135deg, var(--fc-wheat) 0%, #FAE8C8 100%) !important;
  color: #7A4A10 !important;
  border-left: 4px solid var(--fc-harvest) !important;
}

.cl-ok,
.clarity-banner.cl-ok {
  background: linear-gradient(135deg, var(--fc-mist) 0%, #DFEACB 100%) !important;
  color: var(--fc-forest) !important;
  border-left: 4px solid var(--fc-forest) !important;
}

.cl-info,
.clarity-banner.cl-info {
  background: linear-gradient(135deg, #E8EEF5 0%, #DCE5F0 100%) !important;
  color: #3A5A82 !important;
  border-left: 4px solid #4A6FA5 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   10. HERO GRADIENTS (profile pages, sales, etc.) — sage/honey instead of forest
   ─────────────────────────────────────────────────────────────────────────── */
.fp-hero,
.cp-hero,
.rt-hero,
.sc-hero,
.fc-sales-hero {
  background: linear-gradient(145deg, #3F5836 0%, #5C7A4F 55%, #7A9A6A 100%) !important;
}

/* Deliverer profile = warm honey gradient instead of harsh orange */
.dp-hero {
  background: linear-gradient(145deg, #9A6420 0%, #D68C3A 55%, #E8A33D 100%) !important;
}

/* Landing page hero */
.landing-hero {
  background: linear-gradient(145deg, #3F5836 0%, #5C7A4F 55%, #7A9A6A 100%) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   11. CLASS-SPECIFIC OVERRIDES — page-local inline styles
   Templates that hardcoded #1a5c38, #2d6a2d, #f5f9f5 still need their bg tweaked.
   ─────────────────────────────────────────────────────────────────────────── */

/* All the light-grey-green backgrounds → cream */
[style*="background:#f5f9f5"],
[style*="background: #f5f9f5"],
[style*="background:#f4f7f4"],
[style*="background: #f4f7f4"],
[style*="background:#f0f4f0"],
[style*="background: #f0f4f0"] {
  background: var(--bg) !important;
}

/* Sections that use main bg */
main[style*="background"] {
  background: var(--bg) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   12. PLANT GRID (farmer dashboard) — warm card style
   ─────────────────────────────────────────────────────────────────────────── */
.fc-plant-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--fc-border);
}

.fc-plant-badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  border-radius: 100px !important;
}

.fc-badge-live {
  background: var(--fc-forest) !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(92, 122, 79, 0.3);
}

.fc-badge-draft {
  background: var(--fc-wheat) !important;
  color: var(--fc-harvest) !important;
}

.fc-plant-name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
}

.fc-plant-stage {
  font-family: 'Inter', sans-serif !important;
}

/* Add-plant button in section header */
.fc-section-add-btn {
  background: var(--fc-forest) !important;
  color: white !important;
  border-radius: 100px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(92, 122, 79, 0.25);
}

.fc-section-title {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   13. PUBLISH / PRIMARY BUTTONS IN FORMS
   ─────────────────────────────────────────────────────────────────────────── */
.fc-publish-btn {
  background: linear-gradient(135deg, var(--fc-forest), var(--fc-meadow)) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(92, 122, 79, 0.3) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   14. AUTH PAGES (login, register, forgot password)
   ─────────────────────────────────────────────────────────────────────────── */
.auth-body {
  background: linear-gradient(135deg, #FBF6EC 0%, #F0E8D4 100%) !important;
}

.auth-card {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 40px rgba(93, 76, 50, 0.12) !important;
  border: 1px solid var(--fc-border);
}

.auth-card h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

.auth-logo {
  font-size: 3rem !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   15. LANDING PAGE — warm welcome
   ─────────────────────────────────────────────────────────────────────────── */
.landing-body {
  background: var(--bg) !important;
}

.landing-content h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.landing-subtitle {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.role-card {
  border-radius: var(--radius-lg) !important;
  transition: all 0.25s;
}

.role-card h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
}

.role-card p {
  font-family: 'Inter', sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   16. CHAT — warmer bubbles
   ─────────────────────────────────────────────────────────────────────────── */
.fc-chat-messages,
.dc-messages {
  background: var(--bg) !important;
}

.fc-bubble-mine .fc-bubble,
.dc-row.mine .dc-bubble {
  background: linear-gradient(135deg, var(--fc-forest), var(--fc-meadow)) !important;
  color: white !important;
  font-family: 'Inter', sans-serif !important;
}

.fc-bubble-theirs .fc-bubble,
.dc-row.theirs .dc-bubble {
  background: var(--surface) !important;
  color: var(--text-1) !important;
  font-family: 'Inter', sans-serif !important;
  border: 1px solid var(--fc-border);
}

.fc-bubble-avatar,
.dc-avatar {
  background: var(--fc-forest) !important;
}

.fc-chat-input,
.dc-input {
  background: var(--surface-2) !important;
  font-family: 'Inter', sans-serif !important;
}

.fc-chat-send,
.dc-send-btn {
  background: linear-gradient(135deg, var(--fc-forest), var(--fc-meadow)) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   17. MESSAGE LIST (threads)
   ─────────────────────────────────────────────────────────────────────────── */
.msg-thread {
  background: var(--surface) !important;
  border-bottom-color: var(--fc-border) !important;
  font-family: 'Inter', sans-serif !important;
}

.msg-avatar {
  background: var(--fc-forest) !important;
  font-family: 'Inter', sans-serif !important;
}

.msg-name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
}

.msg-unread-dot {
  background: var(--fc-harvest) !important;
}

.msg-plant {
  color: var(--fc-forest) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   18. NOTIFICATIONS LIST
   ─────────────────────────────────────────────────────────────────────────── */
.notif-item {
  background: var(--surface) !important;
  border-color: var(--fc-border) !important;
  font-family: 'Inter', sans-serif !important;
}

.notif-item.unread {
  background: linear-gradient(90deg, var(--fc-mist) 0%, var(--surface) 100%) !important;
  border-left: 3px solid var(--fc-forest);
}

.notif-icon-wrap {
  background: var(--fc-mist) !important;
}

.notif-msg {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-1) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   19. PROFILE PAGES — pills, menu items
   ─────────────────────────────────────────────────────────────────────────── */
.fp-pill,
.cp-badge-pill {
  background: var(--fc-mist) !important;
  border-color: var(--fc-sprout) !important;
  color: var(--fc-forest) !important;
  font-family: 'Inter', sans-serif !important;
}

.fp-section,
.cp-menu,
.cp-badges-section,
.dp-menu {
  background: var(--surface) !important;
  border-color: var(--fc-border) !important;
}

.fp-menu-item,
.cp-menu-item,
.dp-menu-item {
  border-bottom-color: var(--fc-border) !important;
}

.fp-menu-label,
.cp-menu-label,
.dp-menu-label {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-1) !important;
}

.fp-section-title,
.cp-badges-title {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   20. STATS / CHARTS — sage bars, cream cards
   ─────────────────────────────────────────────────────────────────────────── */
.stat-card,
.fc-sales-card,
.fc-sales-kpi,
.fc-time-filter,
.activity-card,
.chart-wrap,
.admin-table-wrap,
.lv-kpi-card,
.dp-stat {
  background: var(--surface) !important;
  border-color: var(--fc-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.stat-number,
.stat-val,
.stat-card-value,
.fc-sales-kpi-val,
.lv-kpi-val,
.dp-stat-val {
  color: var(--fc-forest) !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

.bar,
.fc-bar-fill,
.fc-hbar-fill {
  background: linear-gradient(180deg, var(--fc-meadow) 0%, var(--fc-forest) 100%) !important;
  border-radius: 6px 6px 0 0 !important;
}

.fc-hbar-fill {
  border-radius: 100px !important;
}

.fc-time-btn {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.fc-time-active {
  background: var(--fc-forest) !important;
  color: white !important;
  border-radius: 100px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   21. RESERVATIONS (farmer) — warmer orange borders
   ─────────────────────────────────────────────────────────────────────────── */
.fc-reservation-card {
  background: var(--surface) !important;
  border-color: var(--fc-wheat) !important;
  box-shadow: 0 2px 10px rgba(214, 140, 58, 0.08) !important;
}

.fc-reservation-avatar {
  background: var(--fc-harvest) !important;
}

.fc-reservation-name {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

.fc-res-btn-chat {
  background: var(--fc-mist) !important;
  color: var(--fc-forest) !important;
}

.fc-res-btn-confirm {
  background: linear-gradient(135deg, var(--fc-forest), var(--fc-meadow)) !important;
}

.fc-res-btn-decline {
  background: #FDE6E3 !important;
  color: var(--red) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   22. ONBOARDING — warm cream cards
   ─────────────────────────────────────────────────────────────────────────── */
.ob-card {
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--fc-border);
  border-radius: var(--radius-lg) !important;
}

.ob-title {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

.ob-sub {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-3) !important;
}

.ob-progress-dot.active {
  background: var(--fc-forest) !important;
}

.ob-progress-dot.done {
  background: var(--fc-sprout) !important;
}

.ob-btn-primary {
  background: linear-gradient(135deg, var(--fc-forest), var(--fc-meadow)) !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 4px 14px rgba(92, 122, 79, 0.25);
}

.ob-chip input:checked + label {
  background: var(--fc-forest) !important;
  border-color: var(--fc-forest) !important;
}

.ob-field input:focus,
.ob-field select:focus,
.ob-field textarea:focus {
  border-color: var(--fc-forest) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   23. ROLE SELECT / ADD ROLE
   ─────────────────────────────────────────────────────────────────────────── */
.rs-card,
.ar-card {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 40px rgba(93, 76, 50, 0.12) !important;
}

.rs-title,
.ar-title {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

.rs-role-btn,
.ar-role-btn {
  background: var(--bg) !important;
  transition: all 0.2s;
}

.rs-role-btn:hover,
.ar-role-btn:hover {
  border-color: var(--fc-forest) !important;
  background: var(--fc-mist) !important;
}

.rs-role-name,
.ar-role-name {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

.rs-role-arrow {
  color: var(--fc-forest) !important;
}

.ar-badge {
  background: var(--fc-mist) !important;
  border-color: var(--fc-forest) !important;
  color: var(--fc-forest) !important;
  font-family: 'Inter', sans-serif !important;
}

body {
  background: var(--bg) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   24. PUBLIC FARMER PROFILE — warmer stats bar
   ─────────────────────────────────────────────────────────────────────────── */
.fp-stats {
  background: var(--fc-border) !important;
}

.fp-stat {
  background: var(--surface) !important;
}

.fp-stat-val {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

.fp-listing,
.fp-review,
.fp-about {
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.fp-listing-name {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--text-1) !important;
}

.fp-listing-price {
  color: var(--fc-forest) !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

.fp-about-item {
  background: var(--fc-mist) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   25. DELIVERY STATUS / ROUTE CARDS — keep honey for deliverer context
   ─────────────────────────────────────────────────────────────────────────── */
.trk-card-header,
.rt-card-header {
  background: linear-gradient(135deg, #3F5836 0%, #5C7A4F 60%, #7A9A6A 100%) !important;
}

.ar-card-header {
  background: linear-gradient(135deg, #9A6420 0%, #D68C3A 55%, #E8A33D 100%) !important;
}

.trk-contact-btn.call,
.ar-contact-btn.call,
.rt-contact-btn.call {
  background: var(--fc-mist) !important;
  color: var(--fc-forest) !important;
}

.trk-confirm-btn,
.ar-action-btn,
.rt-accept-btn {
  background: linear-gradient(135deg, var(--fc-forest), var(--fc-meadow)) !important;
  box-shadow: 0 4px 14px rgba(92, 122, 79, 0.25) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   26. HISTORY / ORDERS
   ─────────────────────────────────────────────────────────────────────────── */
.lv-card,
.order-card {
  background: var(--surface) !important;
  border-color: var(--fc-border) !important;
}

.lv-card-header {
  background: linear-gradient(135deg, var(--fc-forest) 0%, var(--fc-meadow) 100%) !important;
}

.lv-mini-chip.km,
.lv-mini-chip.green {
  background: var(--fc-mist) !important;
  color: var(--fc-forest) !important;
}

.lv-mini-chip.co2 {
  background: #F0F7E8 !important;
  color: #5C7A4F !important;
}

.lv-mini-chip.chf {
  background: var(--fc-wheat) !important;
  color: #7A4A10 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   27. CATEGORY / PRODUCT BROWSE CARDS
   ─────────────────────────────────────────────────────────────────────────── */
.category-card,
.product-card {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   28. FAVORITES, SEASONAL CALENDAR
   ─────────────────────────────────────────────────────────────────────────── */
.sc-hero {
  background: linear-gradient(145deg, #3F5836 0%, #5C7A4F 55%, #7A9A6A 100%) !important;
}

.sc-plant-card {
  background: var(--surface) !important;
  border-color: var(--fc-border) !important;
}

.sc-chip {
  background: var(--fc-mist) !important;
}

.sc-month.current {
  border-color: var(--fc-forest) !important;
}

.sc-month.current .sc-month-header {
  background: var(--fc-mist) !important;
  color: var(--fc-forest) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   29. ALERTS / FLASH MESSAGES — warmer
   ─────────────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
}

.alert-success {
  background: var(--fc-mist) !important;
  color: var(--fc-forest) !important;
  border: 1px solid var(--fc-sprout) !important;
}

.alert-error,
.alert-danger {
  background: #FDE6E3 !important;
  color: var(--red) !important;
  border: 1px solid #F5B8AF !important;
}

.alert-info {
  background: #E8EEF5 !important;
  color: #3A5A82 !important;
  border: 1px solid #C8D4E5 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   30. STICKY HEADER (top bar on sub-pages)
   ─────────────────────────────────────────────────────────────────────────── */
.fc-sticky-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--fc-border) !important;
  font-family: 'Inter', sans-serif !important;
}

.fc-sticky-header span {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  color: var(--text-1);
}

/* ───────────────────────────────────────────────────────────────────────────
   31. EMPTY STATES — warmer
   ─────────────────────────────────────────────────────────────────────────── */
.empty-state {
  color: var(--text-3) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   32. COOKIE BANNER — warm dark
   ─────────────────────────────────────────────────────────────────────────── */
#fc-cookie-banner {
  background: #2D2A24 !important;
  font-family: 'Inter', sans-serif !important;
}

#fc-cookie-banner button {
  background: var(--fc-meadow) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   33. DIALOGS / MODAL OVERLAYS
   ─────────────────────────────────────────────────────────────────────────── */
#lightbox {
  background: rgba(45, 42, 36, 0.92) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   34. HELPDESK FAB — warmer
   ─────────────────────────────────────────────────────────────────────────── */
.hd-fab {
  background: rgba(92, 122, 79, 0.18) !important;
  color: var(--fc-forest) !important;
}

.hd-header {
  background: linear-gradient(135deg, var(--fc-forest), var(--fc-meadow)) !important;
}

.hd-msg.bot {
  background: var(--fc-mist) !important;
  color: var(--text-1) !important;
}

.hd-msg.user {
  background: var(--fc-forest) !important;
}

.hd-send {
  background: var(--fc-forest) !important;
}

.hd-mic {
  background: var(--fc-mist) !important;
  color: var(--fc-forest) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   35. TIMELINE EVENTS
   ─────────────────────────────────────────────────────────────────────────── */
.timeline-dot {
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--fc-border);
}

.event-badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
}

.timeline-notes {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-2) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   36. SUBTLE TOUCHES — scrollbar, focus rings
   ─────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fc-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fc-sprout); }

*:focus-visible {
  outline: 2px solid var(--fc-forest);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
   37. SELECTION — cream
   ─────────────────────────────────────────────────────────────────────────── */
::selection {
  background: var(--fc-sprout);
  color: var(--text-1);
}