/* =========================================================================
   AGRIFLOOD — SYSTEM-WIDE VISUAL MODERNIZATION (Phase 3C)
   =========================================================================
   This file makes the Universal Foundation actually VISIBLE on every real
   page of the app. It re-skins the app's existing, already-in-use classes
   (.card, .stat-card, .data-table, .badge, .import-alert, .table-action,
   .filter-btn, .nav-item, .topbar, form inputs, tabs, progress bars, etc.)
   directly — no new markup required, no page left untouched.

   Safety rules followed:
   - No grid-template-columns, no fixed width/height, no flex-basis is
     changed anywhere. Column counts and breakpoints are 100% preserved.
   - No id, no data-*, no JS hook is touched.
   - Every rule is color / radius / shadow / spacing(gap,padding) / typography
     / transition / hover / focus — purely visual, purely additive on top of
     main.css + universal-foundation.css.

   Load order: main.css → universal-foundation.css → this file (wins ties).
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. TOKENS — richer elevation & radius used app-wide via var(--radius),
   var(--shadow), var(--shadow-md). Redefining these three variables alone
   instantly upgrades every card, stat card, filter panel, and details
   card in the entire system, because they were all built on top of them.
   ------------------------------------------------------------------------- */
:root {
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 8px 20px -6px rgba(15,23,42,.14), 0 3px 8px -2px rgba(15,23,42,.06);
  --uf-shadow-lg: 0 20px 48px rgba(15,23,42,.16);
  --accent-grad: linear-gradient(90deg,#16a34a,#0f766e);
}

/* -------------------------------------------------------------------------
   1. GLOBAL BASE — subtle canvas, smoother motion, nicer selection.
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1100px 480px at 100% -10%, rgba(22,163,74,.05), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(15,118,110,.045), transparent 55%),
    var(--gray-50);
}
::selection { background: rgba(22,163,74,.22); color: var(--text); }
a { transition: color .15s ease; }
button, .btn, input, select, textarea { font-family: 'DM Sans', sans-serif; }
* { scrollbar-width: thin; scrollbar-color: #c7d2df transparent; }
::-webkit-scrollbar-thumb { background: #c7d2df; }
::-webkit-scrollbar-thumb:hover { background: #a9b7c9; }

.content { padding: 26px 28px; }
@media (max-width: 900px) { .content { padding: 18px; } }

/* -------------------------------------------------------------------------
   2. SIDEBAR — clearer hierarchy, a real "active" indicator, softer hovers.
   ------------------------------------------------------------------------- */
.sidebar { box-shadow: 2px 0 24px rgba(0,0,0,.18); }
.brand { padding: 22px 18px 18px; }
.brand-icon { box-shadow: 0 6px 16px rgba(22,163,74,.35); }
.brand-name { line-height: 1.35; }

.nav-label { padding: 0 10px; margin-bottom: 6px; }
.nav-item {
  position: relative;
  padding: 10px 12px 10px 14px;
  border-radius: 9px;
  transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
}
.nav-item:hover { padding-left: 16px; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(34,197,94,.22), rgba(34,197,94,.06));
  box-shadow: inset 0 0 0 1px rgba(134,239,172,.15);
}
.nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg,#4ade80,#16a34a);
}
.nav-item svg { transition: opacity .16s ease, transform .16s ease; }
.nav-item:hover svg { opacity: .95; transform: translateX(1px); }

.sidebar-footer { padding: 16px 14px 18px; }
.live-badge { box-shadow: inset 0 0 0 1px rgba(34,197,94,.18); }

/* -------------------------------------------------------------------------
   3. TOPBAR — a touch of depth + refined badges.
   ------------------------------------------------------------------------- */
.topbar {
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 6px 16px -12px rgba(15,23,42,.25);
  backdrop-filter: saturate(1.1);
}
.page-title { letter-spacing: -.35px; }
.location-badge, .date-badge {
  border-radius: 999px;
  transition: box-shadow .15s ease, background-color .15s ease;
}
.date-badge { padding: 5px 12px; border: 1px solid var(--border); background: #fff; }
.location-badge:hover { box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
button.date-badge:hover { background: var(--gray-50); box-shadow: 0 0 0 3px rgba(15,23,42,.06); }

/* -------------------------------------------------------------------------
   4. CARDS — the component almost every page is built from.
   ------------------------------------------------------------------------- */
.card, .details-card, .analytics-geo-filter, .scope-switch, .metric-card,
.confusion-model-panel, .matrix-panel, .a-card, .action-card,
.mini-stat-grid > div, .parameter-list > div, .decision-grid > div,
.system-state-option, .live-data-metrics > div, .live-chart-panel,
.live-table-panel, .dashboard-filter-area .dashboard-filter-group,
.uf-card {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card { border-color: rgba(15,23,42,.07); }
.card:hover, .details-card:hover { box-shadow: var(--shadow-md); }
.card-header { margin-bottom: 18px; }
.card-title { letter-spacing: -.2px; }

/* Stat cards: sharper top accent, gentle lift, no size change. */
.stat-card { border-color: rgba(15,23,42,.07); }
.stat-card::before { height: 4px; }
.stat-card:hover:not(.stat-card-clickable) { box-shadow: var(--shadow-md); }
.stat-value { letter-spacing: -1.2px; }
.stat-trend { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }

/* Municipality / metric / awareness cards: consistent hover lift everywhere,
   layered on top of each page's own color treatment. */
.muni-card, .metric-card, .a-card, .action-card, .flow-step {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.muni-card:hover, .metric-card:hover, .a-card:hover, .action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.metric-card { border-radius: 10px; }
.a-card { box-shadow: var(--shadow); }

/* Gradient hero sections: crisper edges + shadow. */
.agri-overview, .automated-model-hero, .user-invite-card, .crop-model-hero {
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   5. BUTTONS — one consistent language across every button-like element
   in the app, without changing any width/height that a layout depends on.
   ------------------------------------------------------------------------- */
.table-action, .filter-btn, .analytics-geo-reset, .report-btn,
.dataset-report-download-card a, .live-open-link, .cloud-button,
.matrix-detail-button, .chart-drilldown-tools button,
.chart-drilldown-dialog footer button, .validation-download {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .1s ease;
}
.table-action, .report-btn, .cloud-button {
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.table-action:hover, .cloud-button:hover:not(:disabled), .live-open-link:hover {
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
  transform: translateY(-1px);
}
.table-action:active, .cloud-button:active { transform: translateY(0); }
.filter-btn { font-weight: 600; }
.filter-btn.active { box-shadow: 0 4px 12px rgba(22,101,52,.28); }
.filter-btn:hover:not(.active) { box-shadow: 0 1px 4px rgba(15,23,42,.08); }

.sim-btn, .auth-card button, .user-invite-form button {
  box-shadow: 0 2px 6px rgba(22,101,52,.22);
}
.sim-btn:hover, .auth-card button:hover, .user-invite-form button:hover {
  box-shadow: 0 8px 18px rgba(22,101,52,.3);
}

/* ml-tabs: cleaner underline + smoother active swap */
.ml-tabs { border-radius: var(--radius) var(--radius) 0 0; }
.ml-tab { border-radius: 6px 6px 0 0; }
.ml-tab:hover { background: var(--gray-50); }
.ml-tab.active { box-shadow: inset 0 -2px 0 var(--green-mid); }

/* -------------------------------------------------------------------------
   6. FORMS — every input, select and textarea reads as one system.
   ------------------------------------------------------------------------- */
.form-input, .form-select, .table-search, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="search"], textarea, select,
.analytics-geo-filter select, .live-data-controls select, .live-data-controls input,
.chart-drilldown-tools input, .user-invite-form input, .user-invite-form select,
.run-selector select {
  border-radius: 9px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-input:hover, .form-select:hover, select:hover,
input[type="text"]:hover, input[type="date"]:hover, input[type="number"]:hover {
  border-color: var(--gray-400, #94a3b8);
}
.form-input:focus, .form-select:focus, .table-search:focus,
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(22,163,74,.14);
}
.form-label { font-weight: 600; letter-spacing: .1px; }
.form-group { gap: 7px; }

/* -------------------------------------------------------------------------
   7. TABLES — clearer header, gentle zebra, obvious hover row.
   ------------------------------------------------------------------------- */
.data-table th {
  background: linear-gradient(180deg,#fbfdfc,#f6f9f8);
  letter-spacing: .06em;
  border-bottom: 2px solid rgba(15,23,42,.09);
}
.data-table td { padding-top: 12px; padding-bottom: 12px; }
.data-table tbody tr:nth-child(even) td { background: rgba(148,163,184,.045); }
.data-table tr:hover td { background: rgba(22,163,74,.055) !important; }
.table-scroll, .uf-table-scroll { border-radius: 10px; }

/* -------------------------------------------------------------------------
   8. BADGES & STATUS PILLS — same shape language, a hair more contrast.
   ------------------------------------------------------------------------- */
.badge, .type-badge, .validation-result-badge, .severity-badge, .method-tag,
.source-chip, .uf-badge {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.035);
}
.badge { letter-spacing: .5px; }
.validation-result-badge, .severity-badge { letter-spacing: .5px; }

/* -------------------------------------------------------------------------
   9. ALERTS / NOTICES — a visible accent bar so status is readable at a
   glance, matching the .uf-notice pattern already defined for toasts.
   ------------------------------------------------------------------------- */
.import-alert, .insight-banner, .scenario-warning, .scenario-note,
.hazard-reference-note, .explain-card, .method-note, .validation-empty {
  border-left-width: 4px;
  border-left-style: solid;
  box-shadow: var(--shadow);
}
.import-alert.success, .scenario-note, .explain-card, .method-note, .validation-empty { border-left-color: #16a34a; }
.import-alert.error   { border-left-color: #dc2626; }
.import-alert.warning, .scenario-warning { border-left-color: #d97706; }
.import-alert.review  { border-left-color: #7c3aed; }
.import-alert.info     { border-left-color: #2563eb; }
.import-alert { align-items: flex-start; gap: 12px; }
.import-alert .uf-alert-icon { margin-top: 1px; }

/* -------------------------------------------------------------------------
   10. PROGRESS / RISK BARS — gradient fills read faster than flat color.
   ------------------------------------------------------------------------- */
.progress-bg, .risk-bar-wrap { background: rgba(148,163,184,.28); }
.progress-fill, .risk-bar-fill { background-image: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }
.hm-cell { transition: transform .12s ease, box-shadow .12s ease; }
.hm-cell:hover { box-shadow: 0 0 0 2px rgba(15,23,42,.15); }

/* -------------------------------------------------------------------------
   11. ACCORDIONS / DETAILS — consistent affordance across pages.
   ------------------------------------------------------------------------- */
.details-card summary, .dashboard-filter-summary,
.dashboard-filter-area .dashboard-filter-group summary,
.system-state-option details > summary, .validation-records summary {
  transition: background-color .15s ease;
}

/* -------------------------------------------------------------------------
   12. TYPOGRAPHY + SPACING (kept, refined from Phase 3B step)
   ------------------------------------------------------------------------- */
.card-title { line-height: var(--uf-line-tight, 1.3); }
.card-sub   { line-height: var(--uf-line-normal, 1.55); }
.stat-label { line-height: 1.4; }
.stat-sub   { line-height: 1.5; }
.data-table th { line-height: 1.4; }
.data-table td { line-height: var(--uf-line-normal, 1.55); }
.badge { line-height: 1.5; font-weight: 700; }
form label:not([class]) { font-size: var(--uf-text-xs, 12px); line-height: var(--uf-line-normal, 1.55); }
.form-error, .field-error, .validation-message, .table-note, .storage-hint {
  line-height: var(--uf-line-normal, 1.6);
}
.sidebar-version, .date-badge, .card-sub, .stat-sub, .table-footnote { letter-spacing: .1px; }
.page-title { font-size: 18px; line-height: 1.3; letter-spacing: -.3px; }
.page-sub   { font-size: 12.5px; line-height: 1.5; }

.card:focus-within { outline: 2px solid rgba(22,163,74,.25); outline-offset: 2px; }

.empty-module-icon { box-shadow: 0 0 0 4px rgba(21,128,61,.06); }
.empty-state { line-height: var(--uf-line-normal, 1.6); }

.import-alert strong { font-weight: 700; }
.import-alert.warning { background: var(--uf-warning-bg, #fef3c7); color: var(--uf-warning-text, #92400e); }
.import-alert.review   { background: var(--uf-review-bg, #f5f3ff);  color: var(--uf-review-text, #5b21b6); }
.import-alert.info      { background: var(--uf-info-bg, #dbeafe);    color: var(--uf-info-text, #1e40af); }
.import-alert .uf-alert-icon { flex-shrink: 0; width: 18px; height: 18px; }
@media (max-width: 640px) { .import-alert { flex-wrap: wrap; } }

.nav-item svg, .menu-toggle svg, .location-badge svg { stroke-linecap: round; stroke-linejoin: round; }
.content > *:first-child:not([style*="margin"]) { margin-top: 2px; }

/* -------------------------------------------------------------------------
   13. RESPONSIVE POLISH — larger, easier touch targets on small screens,
   without altering any breakpoint's column layout.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .card, .details-card { padding: 16px; }
  .table-action, .filter-btn, .cloud-button, .live-open-link { min-height: 38px; }
  .nav-item { padding-top: 11px; padding-bottom: 11px; }
}

@media (prefers-color-scheme: dark) {
  /* App is light-theme only by design; this keeps forced-dark browsers
     from washing out charts/text rather than opting the app into a
     dark theme it was never designed for. */
  html { color-scheme: light; }
}