/* ================================================================
   HORTIHUB — Modern Neutral

   Site-wide visual layer based on the supplied reference:
   a deep forest navigation rail, warm off-white canvas, white cards,
   soft neutral borders, slate typography, and restrained green accents.

   This file intentionally loads last. It translates older dark-theme and
   Get2Grow component styles without changing their markup or behaviour.
   ================================================================ */

:root {
  color-scheme: light;

  /* Reference palette */
  --hh-green-950: #0f2a20;
  --hh-green-900: #14532d;
  --hh-green-800: #166534;
  --hh-green-500: #22c55e;
  --hh-green-100: #dcfce7;
  --hh-green-50: #ecfdf5;
  --hh-page: #fafbf9;
  --hh-card: #ffffff;
  --hh-subtle: #f1f5f2;
  --hh-border: #e5e7eb;
  --hh-ink: #0f172a;
  --hh-ink-soft: #475569;
  --hh-ink-muted: #94a3b8;

  /* Shared app tokens */
  --bg-deep: var(--hh-page);
  --bg-card: var(--hh-card);
  --bg-card-hover: #f7faf7;
  --surface: var(--hh-subtle);
  --surface-elev: var(--hh-card);
  --header-from: #f5f9f5;
  --header-to: #edf5ef;
  --auth-from: var(--hh-green-950);
  --auth-mid: var(--hh-green-900);
  --auth-to: var(--hh-green-500);
  --border: var(--hh-border);
  --border-hover: #cbd5e1;
  --border-accent: rgba(22, 101, 52, 0.3);
  --text-primary: var(--hh-ink);
  --text-secondary: var(--hh-ink-soft);
  --text-muted: var(--hh-ink-muted);
  --accent: var(--hh-green-800);
  --accent-mid: var(--hh-green-500);
  --accent-dark: var(--hh-green-900);
  --accent-glow: rgba(34, 197, 94, 0.14);
  --accent-tint-04: rgba(34, 197, 94, 0.04);
  --accent-tint-06: rgba(34, 197, 94, 0.06);
  --accent-tint-08: rgba(34, 197, 94, 0.08);
  --accent-tint-10: rgba(34, 197, 94, 0.1);
  --accent-tint-12: rgba(34, 197, 94, 0.12);
  --success: #15803d;
  --success-bg: #dcfce7;
  --success-border: #86efac;
  --warning: #a16207;
  --warning-bg: #fef9c3;
  --warning-border: #fde047;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --danger-border: #fda29b;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 46px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 30px 70px rgba(15, 23, 42, 0.14);
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.18);
  --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-glow-lg: 0 8px 24px rgba(22, 101, 52, 0.14);

  /* Plot/SVG furniture */
  --chart-grid: rgba(15, 23, 42, 0.09);
  --chart-axis: rgba(15, 23, 42, 0.24);
  --chart-label: #64748b;

  /* Dashboard shell */
  --dash-bg: var(--hh-page);
  --dash-sidebar: var(--hh-green-950);
  --dash-sidebar-border: rgba(255, 255, 255, 0.1);
  --dash-card: var(--hh-card);
  --dash-card-border: var(--hh-border);
  --dash-card-hover: #f7faf7;
  --dash-accent: var(--hh-green-500);
  --dash-accent-dim: rgba(34, 197, 94, 0.16);
  --dash-accent-text: #f0fdf4;
  --dash-text: var(--hh-ink);
  --dash-text-muted: var(--hh-ink-muted);
  --dash-text-dim: var(--hh-ink-soft);
  --dash-topbar: rgba(250, 251, 249, 0.92);
  --dash-topbar-border: var(--hh-border);
  --dash-separator: var(--hh-border);
  --gold: var(--hh-green-800);
  --gold-soft: var(--hh-green-500);

  /* Public Get2Grow tokens */
  --bg: var(--hh-page);
  --bg-2: var(--hh-card);
  --bg-3: var(--hh-subtle);
  --cream: var(--hh-ink);
  --body: var(--hh-ink-soft);
  --body-dim: var(--hh-ink-muted);
  --line: rgba(22, 101, 52, 0.2);
  --line-soft: var(--hh-border);

  /* Climate styles use these names directly. */
  --color-surface: var(--hh-card);
  --color-text: var(--hh-ink);
  --color-text-secondary: var(--hh-ink-soft);
  --color-border: var(--hh-border);
  --color-accent: var(--hh-green-800);
}

html { background: var(--hh-page); }

body {
  background: var(--hh-page);
  color: var(--hh-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--hh-green-100);
  color: var(--hh-green-950);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.25);
  outline-offset: 2px;
}

/* ── Application shell ───────────────────────────────────────── */

body:has(.dash-shell) {
  font-family: var(--font-body, "Mulish", system-ui, sans-serif);
  background: var(--hh-page);
}

.dash-shell { background: var(--hh-page); }

.dash-sidebar {
  background:
    radial-gradient(circle at 50% 0, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(180deg, #0d3325 0%, var(--hh-green-950) 55%, #0b241a 100%);
  border-right-color: rgba(255, 255, 255, 0.09);
  box-shadow: 8px 0 28px rgba(15, 42, 32, 0.08);
}

.dash-logo {
  min-height: 78px;
  padding: 18px 20px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dash-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, #dcfce7, #bbf7d0);
  color: var(--hh-green-950);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.dash-logo-text {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: #f7fff9;
}

.dash-nav { padding: 12px 0; gap: 2px; }

.dash-nav-item {
  min-height: 43px;
  margin: 0 12px;
  padding: 10px 13px;
  border: 0;
  border-radius: 9px;
  color: rgba(236, 253, 245, 0.78);
  font-size: 13.5px;
  font-weight: 550;
}

.dash-nav-item:hover,
.dash-nav-tool:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.dash-nav-item.active {
  background: linear-gradient(100deg, var(--hh-green-900), #16803f);
  color: #ffffff;
  border: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dash-nav-chevron { color: rgba(236, 253, 245, 0.62); }

.dash-nav-children {
  border-left-color: rgba(255, 255, 255, 0.13);
}

.dash-nav-tool {
  color: rgba(236, 253, 245, 0.66);
  border-radius: 7px;
}

/* Which tool you're actually on — the parent pill above only says "somewhere
   under Growing tools". Same green the sidebar's own background accent uses
   (rgba(34, 197, 94, ...) in the radial gradient above), so the current row
   reads as "lit by the same light" rather than a clashing second accent. A
   left bar rather than a full pill: these rows already sit against
   .dash-nav-children's own indent guide, so this is that same line, just lit
   up for the one row that matters. */
.dash-nav-tool.active {
  background: rgba(34, 197, 94, 0.18);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 #22c55e;
}

.dash-nav-tool.active:hover {
  background: rgba(34, 197, 94, 0.24);
  color: #ffffff;
}

.dash-sidebar-foot { border-top-color: rgba(255, 255, 255, 0.12); }
.dash-settings-btn,
.dash-sidebar-collapse { color: rgba(236, 253, 245, 0.7); }
.dash-settings-btn:hover,
.dash-sidebar-collapse:hover { color: #ffffff; }
.dash-sidebar-collapse { border-color: rgba(255, 255, 255, 0.16); }
.dash-user-name { color: #ffffff; }
.dash-user-email { color: rgba(236, 253, 245, 0.62); }
.dash-user-avatar {
  background: var(--hh-green-100);
  color: var(--hh-green-950);
}

.dash-main { background: var(--hh-page); }

.dash-topbar {
  min-height: 64px;
  height: 64px;
  background: rgba(250, 251, 249, 0.9);
  border-bottom-color: var(--hh-border);
  backdrop-filter: blur(16px) saturate(1.2);
}

.dash-search input {
  background: var(--hh-card);
  border-color: var(--hh-border);
  color: var(--hh-ink);
}

.dash-search input:focus { border-color: var(--hh-green-500); }

.dash-bell,
.dash-layout-btn { color: var(--hh-ink-soft); }

.dash-content {
  padding: 30px 32px calc(34px + var(--hh-notice-h, 0px));
  background: var(--hh-page);
}

.dash-page-header { margin-bottom: 26px; }

.dash-page-header h1 {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--hh-ink);
}

.dash-page-header p {
  margin-top: 4px;
  color: var(--hh-ink-soft);
  font-size: 14.5px;
}

.dash-card,
.dash-stat-card,
.dash-modal,
.dash-settings-modal {
  background: var(--hh-card);
  border-color: var(--hh-border);
  box-shadow: var(--shadow-sm);
}

.dash-card:hover { background: var(--hh-card); }

.dash-home-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1120px;
}

.dash-home-tile {
  min-height: 210px;
  padding: 18px;
  background: var(--hh-card);
  border-color: var(--hh-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.dash-home-tile:hover {
  background: var(--hh-card);
  border-color: #bbd8c4;
  box-shadow: 0 12px 28px rgba(15, 42, 32, 0.08);
  transform: translateY(-2px);
}

.dash-home-tile-icon,
.dash-soon-icon {
  background: var(--hh-green-50);
  color: var(--hh-green-900);
}

.dash-home-tile-body h3 { color: var(--hh-ink); }
.dash-home-tile-body p { color: var(--hh-ink-soft); }

.dash-home-tile-status {
  background: #eef2f6;
  color: var(--hh-ink-soft);
}

.dash-home-tile-status--ready {
  background: var(--hh-green-100);
  color: var(--hh-green-900);
}

.dash-soon-hero h1 { color: var(--hh-ink); }
.dash-soon-tagline,
.dash-soon-status { color: var(--hh-ink-soft); }
.dash-soon-back { color: var(--hh-green-800); }

/* Light dashboard card internals that previously assumed a dark canvas. */
.dash-section-title,
.dash-card-title,
.dash-weather-temp,
.dash-stat-value,
.dash-check-label,
.dash-news-title { color: var(--hh-ink); }

.dash-card-subtitle,
.dash-section-meta,
.dash-stat-label,
.dash-news-meta,
.dash-usage-text { color: var(--hh-ink-soft); }

.dash-progress-track,
.dash-cal-cell,
.dash-activity-bar-bg { background: var(--hh-subtle); }

/* ── Tool pages inside the shell ─────────────────────────────── */

.dash-main:not(:has(.dash-content)) {
  padding-top: 78px;
  background: var(--hh-page);
}

.dash-shell .site-header {
  left: var(--dash-sidebar-w);
  min-height: 64px;
  padding: 12px 32px;
  background: rgba(250, 251, 249, 0.92);
  border-bottom-color: var(--hh-border);
  backdrop-filter: blur(18px) saturate(1.2);
}

/* Standalone protected pages (admin) and the 404 use the same header without
   a dashboard shell. Keep that chrome in the same neutral system too. */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--hh-border);
  backdrop-filter: blur(18px) saturate(1.2);
}

.site-header .logo-text {
  color: var(--hh-green-950);
  font-weight: 600;
}

.dash-shell .site-header .container {
  max-width: 1400px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-header .logo-icon {
  background: var(--hh-green-50);
  color: var(--hh-green-900);
}

.site-header .logo-text { color: var(--hh-green-950); font-weight: 600; }
.site-nav a { color: var(--hh-ink-soft); }
.site-nav a:hover { color: var(--hh-green-800); }

.lang-toggle {
  background: var(--hh-subtle);
  border-color: var(--hh-border);
}

.lang-toggle button { color: var(--hh-ink-soft); }
.lang-toggle button.active {
  background: var(--hh-card);
  color: var(--hh-green-900);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.dash-main > .container {
  width: 100%;
  max-width: 1400px;
  padding: 20px 32px 40px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.dash-main > .container > .header {
  padding: 18px 0 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.dash-main > .container > .header h1 {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  color: var(--hh-ink);
}

.dash-main > .container > .header p { color: var(--hh-ink-soft); }
.dash-main > .container > .main-content { padding: 0; }

/* ── Shared surfaces and controls ────────────────────────────── */

.calculator-section,
.controls-panel,
.input-section,
.results-section,
.result-grid,
.calculation-step,
.calc-card,
.result-card,
.condition-card,
.course-card,
.formula-box,
.chart-container,
.data-table-container,
.tab-content,
.climate-attention,
.climate-advice-theme,
.wkk-unit-card,
.wkk-workspace-card,
.labor-admin-form,
.labor-map-card,
.labor-panel-card {
  background: var(--hh-card);
  border-color: var(--hh-border);
  box-shadow: var(--shadow-sm);
}

.calculator-section,
.controls-panel,
.input-section,
.results-section,
.result-grid,
.calculation-step,
.formula-box { border-radius: 14px; }

.intro-section,
.how-to-bar,
.info-text,
.note-box,
.conversion-factor {
  background: var(--hh-subtle);
  border-color: var(--hh-border);
  color: var(--hh-ink-soft);
}

h1, h2, h3, h4,
.header h1,
.calculator-section h2,
.calculator-section h3,
.input-section h3,
.calc-card h4 { color: var(--hh-ink); }

p,
.header p,
.header .subtitle,
.help-text,
.hint,
.subtitle { color: var(--hh-ink-soft); }

.eyebrow,
.section-label,
.metric-value,
.stat-number,
.result-value,
.result-item .value,
.lux-result-value { color: var(--hh-green-800); }

input,
select,
textarea,
.labor-admin-form input,
.labor-admin-form select,
.labor-density-input,
.labor-map-controls select,
.labor-map-field-input {
  background: var(--hh-card);
  color: var(--hh-ink);
  border-color: #d8dee7;
  box-shadow: none;
}

input::placeholder,
textarea::placeholder { color: var(--hh-ink-muted); }

input:focus,
select:focus,
textarea:focus,
.labor-admin-form input:focus,
.labor-admin-form select:focus,
.labor-map-controls select:focus,
.labor-map-field-input:focus {
  border-color: var(--hh-green-500);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: #eef2f6;
  color: var(--hh-ink-muted);
  opacity: 1;
}

select option { background: var(--hh-card); color: var(--hh-ink); }

.result-field,
.step-result,
.info-box {
  background: var(--hh-green-50);
  border-color: #bbf7d0;
  color: var(--hh-green-900);
}

.final-result {
  background: linear-gradient(145deg, #f0fdf4, #f7fcf8);
  border-color: #bbf7d0;
  color: var(--hh-ink);
}

.final-result h3,
.final-result .unit,
.final-result .description { color: var(--hh-ink-soft); }
.final-result .value { color: var(--hh-green-800); }

.btn,
.btn-primary,
.calculate-btn,
.home-btn,
.submit-btn,
.labor-btn-primary,
._auth-submit-btn {
  background: var(--hh-green-800);
  color: #ffffff;
  border: 1px solid var(--hh-green-800);
  border-radius: 9px;
  box-shadow: none;
}

.btn:hover,
.btn-primary:hover,
.calculate-btn:hover,
.home-btn:hover,
.submit-btn:hover,
.labor-btn-primary:hover,
._auth-submit-btn:hover {
  background: var(--hh-green-900);
  border-color: var(--hh-green-900);
  box-shadow: 0 7px 18px rgba(22, 101, 52, 0.16);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-outline,
.back-btn,
.index-auth-dashboard,
.index-auth-signout,
.labor-btn-icon {
  background: var(--hh-card);
  color: var(--hh-ink-soft);
  border-color: var(--hh-border);
  box-shadow: none;
}

.btn-secondary:hover,
.btn-outline:hover,
.back-btn:hover,
.labor-btn-icon:hover {
  background: var(--hh-subtle);
  color: var(--hh-green-800);
  border-color: #bbd8c4;
}

.tab-nav {
  background: var(--hh-subtle);
  border: 1px solid var(--hh-border);
  border-radius: 10px;
  padding: 4px;
  gap: 3px;
}

.tab-nav .tab-button,
.tab-button,
.labor-tab-btn,
.tab-btn {
  background: transparent;
  color: var(--hh-ink-soft);
  border-color: transparent;
  border-radius: 7px;
  box-shadow: none;
}

.tab-nav .tab-button:hover,
.tab-button:hover,
.labor-tab-btn:hover,
.tab-btn:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--hh-green-800);
  transform: none;
  box-shadow: none;
}

.tab-nav .tab-button.active,
.tab-button.active,
.labor-tab-btn.active,
.tab-btn.active {
  background: var(--hh-card);
  color: var(--hh-green-900);
  border-color: var(--hh-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Day-of-week pills: the Map tab's day selector and the Activity Library
   table's per-row day toggles. Both still carried their dark-theme colors —
   muted text on a near-white card read as barely-there, and the selected
   state was a literal navy left over from before this file existed. */
.labor-map-day-selector button,
.lwp-day-btn {
  background: var(--hh-subtle);
  border-color: var(--hh-border);
  color: var(--hh-ink-soft);
}

.labor-map-day-selector button:hover:not(:disabled):not(.active),
.lwp-day-btn:hover:not(.lwp-day-on) {
  background: var(--hh-green-50);
  color: var(--hh-green-800);
}

.labor-map-day-selector button.active,
.lwp-day-btn.lwp-day-on {
  background: var(--hh-green-800);
  border-color: var(--hh-green-800);
  color: #fff;
}

/* Sat/Sun with nothing scheduled — dimmed, not vanished. 0.28 was tuned
   against the old dark card and left these two unreadable on white. */
.labor-map-day-selector button:disabled { opacity: 0.55; }

table,
.dli-table,
.labor-table {
  background: var(--hh-card);
  border-color: var(--hh-border);
}

thead th,
.dli-table thead th,
.labor-table thead tr,
.labor-table th {
  background: var(--hh-subtle);
  color: var(--hh-ink-soft);
  border-color: var(--hh-border);
}

tbody td,
.dli-table tbody td,
.labor-table td {
  color: var(--hh-ink-soft);
  border-color: var(--hh-border);
}

tbody tr:hover,
.dli-table tbody tr:hover,
.labor-table tbody tr:hover td { background: #f7faf7; }

.labor-table tbody tr:nth-child(even) td { background: #fbfcfb; }

.labor-section-header {
  background: var(--hh-subtle);
  color: var(--hh-ink);
  border: 1px solid var(--hh-border);
  border-radius: 8px;
}

.labor-tab-nav {
  background: var(--hh-page);
  border-bottom-color: var(--hh-border);
}

.labor-panel { background: var(--hh-page); }
.labor-field label,
.labor-hint,
.labor-map-title,
.labor-map-field-label { color: var(--hh-ink-soft); }

.course-card::before { background: var(--hh-green-500); }
.course-card h3,
.slide-content h2,
.slide-content h3,
.intro-section h2 { color: var(--hh-ink); }
.course-icon { background: var(--hh-green-50); }
.course-icon i { color: var(--hh-green-800); }
.slide-container { background: var(--hh-page); }
.slide-content { background: var(--hh-card); border: 1px solid var(--hh-border); }
.slide-content h2 { border-bottom-color: var(--hh-green-500); }

.wx-filter { background: rgba(250, 251, 249, 0.94); }
.dash-forecast-row .dash-forecast-slot { background: var(--hh-card); }

/* Modals, notifications and overlays */
#_auth-modal-overlay,
.dash-modal-backdrop { background: rgba(15, 23, 42, 0.42); }

._auth-modal-card {
  background: var(--hh-card);
  border-color: var(--hh-border);
}

._auth-modal-header {
  background: linear-gradient(135deg, var(--hh-green-950), var(--hh-green-800));
}

._auth-tab-nav { border-bottom-color: var(--hh-border); }
._auth-field input[type="email"],
._auth-field input[type="password"] { background: var(--hh-card); }

#psychro-tooltip,
.elec-chart-tooltip {
  background: rgba(15, 42, 32, 0.95);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

.calc-loading::after { background: rgba(250, 251, 249, 0.72); }

/* ── Public consultancy, legal, and login pages ─────────────── */

body:not(:has(.dash-shell)) { background: var(--hh-page); color: var(--hh-ink); }

body:not(:has(.dash-shell)) h1,
body:not(:has(.dash-shell)) h2,
body:not(:has(.dash-shell)) h3 { color: var(--hh-ink); }

body:not(:has(.dash-shell)) header.scrolled,
body.page-inner header {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 var(--hh-border);
  backdrop-filter: blur(16px);
}

body:not(:has(.dash-shell)):not(.page-inner) header:not(.scrolled):not(.site-header) .logo {
  color: #bbf7d0;
}

body:not(:has(.dash-shell)):not(.page-inner) header:not(.scrolled):not(.site-header) .nav-links a,
body:not(:has(.dash-shell)):not(.page-inner) header:not(.scrolled):not(.site-header) .nav-links .lang-toggle button {
  color: rgba(255, 255, 255, 0.92);
}

body:not(:has(.dash-shell)):not(.page-inner) header:not(.scrolled):not(.site-header) .nav-login,
body:not(:has(.dash-shell)):not(.page-inner) header:not(.scrolled):not(.site-header) .nav-links .lang-toggle {
  color: #bbf7d0;
  border-color: rgba(187, 247, 208, 0.5);
}

body:not(:has(.dash-shell)) header.scrolled .nav-links a,
body.page-inner .nav-links a,
body:not(:has(.dash-shell)) header.scrolled .nav-links .lang-toggle button,
body.page-inner .nav-links .lang-toggle button { color: var(--hh-ink); }

body:not(:has(.dash-shell)) .logo { color: var(--hh-green-800); }

/* Once scrolled, index.html's logo and Login button still used --gold
   (this theme's dark green) while the EN/NL toggle's active fill next to
   them uses --gold-soft (bright green) for contrast reasons of its own —
   three different greens in one bar (6 Sept follow-up note). Matched to
   the toggle's green rather than the other way round, since that one
   cannot go darker without failing contrast against its fill.
   header.scrolled only exists on index.html (landing-page.js is the only
   place that adds the class), so this never reaches login/privacy/terms —
   :not(.page-inner) below is a belt-and-suspenders guard, not the reason
   it's scoped there. */
body:not(:has(.dash-shell)):not(.page-inner) header.scrolled .logo {
  color: var(--gold-soft);
}
body:not(:has(.dash-shell)):not(.page-inner) header.scrolled .nav-login {
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}

.hero h1 { color: #ffffff !important; }
.hero .eyebrow { color: #bbf7d0; }
.hero p { color: rgba(255, 255, 255, 0.88); }
.hero .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.hero .btn-ghost:hover { color: #bbf7d0; border-color: #bbf7d0; }

.btn-gold {
  background: var(--hh-green-500);
  border-color: var(--hh-green-500);
  color: var(--hh-green-950);
  border-radius: 8px;
}
.btn-gold:hover { background: #4ade80; }
/* background: transparent overrides the generic .btn rule above, which sets a
   solid --hh-green-800 fill — every element here also carries class="btn", so
   without this the outline button rendered as --hh-green-800 text on an
   --hh-green-800 background: invisible, on the live site before this fix too,
   not something the landing-page rework introduced. */
.btn-outline-gold { background: transparent; border-color: var(--hh-green-800); color: var(--hh-green-800); border-radius: 8px; }
.btn-outline-gold:hover { background: var(--hh-green-800); color: #ffffff; }

.diensten,
.hortihub,
.over { background: var(--hh-page); }

.aanpak,
.contact { background: var(--hh-subtle); }

.service,
.wkk-feature,
.hortihub-card,
.step,
.legal-contact-box {
  border-color: var(--hh-border);
}

.service-icon,
.wkk-feature-list li::before { color: var(--hh-green-800); }

.step .num { color: rgba(22, 101, 52, 0.28); }

.wkk-feature,
.legal-contact-box {
  background: var(--hh-card);
  border: 1px solid var(--hh-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.contact-item .ci-value,
.legal strong { color: var(--hh-ink); }

.field input,
.field textarea {
  color: var(--hh-ink);
  border-bottom-color: #cbd5e1;
}

footer { background: var(--hh-card); border-top-color: var(--hh-border); }

.legal h2 { color: var(--hh-green-900); border-bottom-color: var(--hh-border); }
.legal p,
.legal ul { color: var(--hh-ink-soft); }

.login-card {
  background: var(--hh-card);
  border: 1px solid var(--hh-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 42, 32, 0.12);
}

.error-page { margin-top: 64px; }

.login-header {
  background: linear-gradient(145deg, #f0fdf4, #f7fcf8);
  border-bottom-color: var(--hh-border);
}

.login-logo-text { color: var(--hh-green-800); }
.login-card .tab-nav { border-width: 0 0 1px; border-radius: 0; }

.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"],
.login-card textarea {
  background: var(--hh-card);
  color: var(--hh-ink);
  border: 1px solid #d8dee7;
  border-radius: 8px;
}

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--hh-card) inset;
  -webkit-text-fill-color: var(--hh-ink);
  caret-color: var(--hh-ink);
}

.login-card input:focus,
.login-card textarea:focus { background: var(--hh-card); border-color: var(--hh-green-500); }

.auth-message.error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.auth-message.success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.confirm-box { background: var(--hh-green-50); border-color: #bbf7d0; border-radius: 10px; }
.confirm-box h3 { color: var(--hh-green-900); }
.setpw-heading { color: var(--hh-ink); }

/* Cookie banner is injected after page load, so these selectors are
   deliberately more specific than its inline stylesheet. */
body #hh-cookie-banner {
  background: var(--hh-card);
  color: var(--hh-ink-soft);
  border-top-color: var(--hh-border);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.1);
}
body #hh-cookie-banner a { color: var(--hh-green-800); }
body #hh-cookie-banner .hh-cookie-btn--accept {
  background: var(--hh-green-800);
  color: #ffffff;
  border-color: var(--hh-green-800);
}
body #hh-cookie-banner .hh-cookie-btn--essential {
  color: var(--hh-ink-soft);
  border-color: var(--hh-border);
}

/* ── Responsive shell ───────────────────────────────────────── */

@media (max-width: 1024px) {
  .dash-content { padding-inline: 24px; }
  .dash-main > .container { padding-inline: 24px; }
  .dash-shell .site-header { padding-inline: 24px; }
  .dash-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}

@media (max-width: 900px) {
  .dash-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .dash-sidebar { box-shadow: 14px 0 36px rgba(15, 42, 32, 0.2); }
  .dash-shell .site-header { left: 0; padding-inline: 18px; }
  .dash-content { padding: 22px 18px calc(28px + var(--hh-notice-h, 0px)); }
  .dash-main > .container { padding: 14px 18px 32px; }
  .dash-home-grid { grid-template-columns: 1fr; }
  .dash-home-tile { min-height: 0; }
}

@media (max-width: 560px) {
  .dash-page-header h1,
  .dash-main > .container > .header h1 { font-size: 27px; }
  .tab-nav { overflow-x: auto; flex-wrap: nowrap; }
  .tab-nav .tab-button { white-space: nowrap; }
  .login-card { border-radius: 12px; }
}