/* =========================================================================
   AGRIFLOOD — FINAL SYSTEM-WIDE UI POLISH (Phase 3C — closing pass)
   =========================================================================
   Purpose
   -------
   This is the last visual layer before Phase 3C feature development begins.
   It closes the remaining composition/hierarchy/consistency gaps left after
   main.css → universal-foundation.css → system-wide-application.css, so
   every screen — not only the modules touched earlier — reads as one
   cohesive, modern, professional enterprise application.

   Safety rules followed (same contract as system-wide-application.css):
   - ADDITIVE ONLY. No id, no data-*, no JS hook, no grid-template-columns,
     no fixed width/height, no flex-basis is changed. Column counts and
     breakpoints are 100% preserved. No markup changes required.
   - Every rule is color / radius / shadow / spacing / typography /
     transition / hover / focus — purely visual, purely additive.
   - No architecture, database, AutoML, forecasting, validation, deployment
     or routing logic is touched.

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

/* -------------------------------------------------------------------------
   1. MODULE / SECTION HEADERS — ".module-results-heading" is the app's most
   widely reused in-page header (Awareness, Crops, Disasters, Precipitation,
   Forecasting, Insights, Risk Map, Users, and every module's "no results"
   state). Elevating this one component once lifts the visual hierarchy of
   every page that uses it, the same way the hero treatments already lift
   Crops / Model Performance — without introducing a second, competing style.
   ------------------------------------------------------------------------- */
.module-results-heading {
  position: relative;
  padding: 14px 20px 16px 22px;
  margin: 4px 0 22px;
  background: linear-gradient(135deg, rgba(240,253,244,.65), rgba(239,246,255,.4));
  border: 1px solid rgba(187,247,208,.7);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.module-results-heading::before {
  content: '';
  position: absolute; top: 10px; bottom: 10px; left: 0; width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg,#4ade80,#16a34a);
}
.module-results-heading span {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px rgba(21,128,61,.18);
}
.module-results-heading h2 { letter-spacing: -.4px; }
.module-results-heading p { line-height: 1.6; }

/* Nested variants (e.g. Crops' section-level reuse of the same class) keep
   their own top margin instead of the page-header spacing above. */
.module-results-heading.crop-section-heading,
.module-results-heading.forecast-section-heading {
  margin-top: 30px;
}

/* Empty / no-results state built from the same component reads calmer —
   no green wash implying success when the page is actually saying
   "nothing to show yet". */
.empty-module-state .module-results-heading,
.card .module-results-heading {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 18px;
}
.card .module-results-heading::before,
.empty-module-state .module-results-heading::before { background: linear-gradient(180deg,#cbd5e1,#94a3b8); }


/* -------------------------------------------------------------------------
   2. SECTION FLOW & VERTICAL RHYTHM — consistent breathing room between
   stacked top-level blocks in .content, without touching any block's own
   internal spacing or margins that layouts already depend on.
   ------------------------------------------------------------------------- */
.content > section:not(:last-child),
.content > .card:not(:last-child),
.content > .grid-2:not(:last-child),
.content > .grid-3:not(:last-child),
.content > .grid-2-1:not(:last-child),
.content > .grid-1-2:not(:last-child) {
  scroll-margin-top: 84px; /* anchored jumps (e.g. drill-down links) clear the sticky topbar */
}

/* -------------------------------------------------------------------------
   3. CARD ORGANIZATION — sharper separation between a card's heading and
   body, and a touch more polish on nested card headers used as mini
   toolbars (already-existing pattern across ML/Import/Storage cards).
   ------------------------------------------------------------------------- */
.card-header { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.card > .card-header:only-of-type,
.card-header:first-child { margin-bottom: 16px; }
.details-card summary,
.live-data-explorer > summary { border-radius: 10px; }

/* Cards that are pure KPI tiles (no header) still get a subtle identity so
   they read as part of the same family as headed cards. */
.metric-card, .mini-stat-grid > div {
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}

/* -------------------------------------------------------------------------
   4. DASHBOARD LAYOUT — filter area and stat grid read as one connected
   control surface instead of stacked, disconnected blocks.
   ------------------------------------------------------------------------- */
.dashboard-filter-area { margin-bottom: 22px; }
.dashboard-filter-area-heading .card-title { font-size: 14px; }
.stats-grid { margin-bottom: 22px; }
.stat-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

/* -------------------------------------------------------------------------
   5. GRAPH / CHART CONTAINERS — a canvas without an explicit height (a few
   simpler pages leave this to content flow) now gets a sane, consistent
   minimum instead of rendering collapsed or oddly short.
   ------------------------------------------------------------------------- */
.chart-wrap:not([style*="height"]) { min-height: 240px; }
.chart-wrap canvas { border-radius: 6px; }
.card .chart-wrap { margin-top: 2px; }

/* -------------------------------------------------------------------------
   6. TABLE PRESENTATION — final consistency pass for every .data-table,
   wrapped or not, plus the plain confusion-matrix tables that don't use
   the shared table classes.
   ------------------------------------------------------------------------- */
.data-table { border-radius: 4px; overflow: hidden; }
.table-scroll { box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.automl-confusion table { border-radius: 10px; overflow: hidden; }
.data-table th:first-child, .data-table td:first-child { padding-left: 16px; }
.data-table th:last-child,  .data-table td:last-child  { padding-right: 16px; }

/* -------------------------------------------------------------------------
   7. ACTION PLACEMENT — buttons/links inside a card-header consistently
   sit flush right and never wrap awkwardly against the title on narrow
   cards; toolbar-style action rows get a uniform gap.
   ------------------------------------------------------------------------- */
.card-header > a.table-action,
.card-header > button.table-action,
.card-header > .filter-bar { flex-shrink: 0; margin-left: auto; }
.result-toolbar, .model-source-toolbar, .live-data-actions, .cloud-action-buttons {
  gap: 10px;
}

/* -------------------------------------------------------------------------
   8. BADGES / STATUS — align the legacy pill set (.badge-*) with the same
   soft-inset treatment the newer .uf-badge / .badge set already received,
   so old and new pills are indistinguishable at a glance.
   ------------------------------------------------------------------------- */
.badge-high, .badge-medium, .badge-low, .badge-info {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.035);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   9. FORMS & TOOLBARS — a little more air around inline filter/search rows
   that sit directly in .content rather than inside a card.
   ------------------------------------------------------------------------- */
.filter-bar { row-gap: 10px; }
.run-selector select { min-width: 220px; }

/* -------------------------------------------------------------------------
   10. RESPONSIVE SAFETY NET — a couple of grids that were sized for desktop
   only now degrade gracefully on tablet/mobile without changing their
   desktop column count.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .an-grid, .bot-grid, .det-grid { row-gap: 12px; }
}
@media (max-width: 640px) {
  .module-results-heading { padding: 12px 14px 14px 18px; }
  .card-header > a.table-action,
  .card-header > button.table-action { margin-left: 0; }
}

@media print {
  .module-results-heading { background: none; box-shadow: none; }
}

/* -------------------------------------------------------------------------
   14. PHASE 3B READABILITY — supporting text and chart details must remain
   readable during demos and on ordinary laptop displays. Module names keep
   their established terminology; plain-language help lives inside modules.
   ------------------------------------------------------------------------- */
.page-sub {
  font-size: 14px;
  line-height: 1.55;
}

.content .card-title {
  font-size: 15px;
  line-height: 1.4;
}

.content .card-sub,
.content .stat-sub,
.content .metric-model,
.content .table-note,
.content .storage-hint,
.content .chart-explainer,
.content .live-chart-description,
.content .table-footnote,
.content .form-group small,
.content details summary small,
.content .automl-interactive-heading p,
.content .feature-action-copy span,
.content .feature-action small {
  font-size: 13px !important;
  line-height: 1.6;
}

.content .stat-label,
.content .metric-name,
.content .eyebrow,
.content .automl-interactive-heading span,
.content .automl-run-chip small {
  font-size: 12px !important;
  line-height: 1.45;
}

.content .module-results-heading p,
.content .section-heading p,
.content .dashboard-intro,
.content .live-data-empty p,
.content .live-data-heading p {
  font-size: 14px;
  line-height: 1.65;
}

.content .chart-explainer {
  padding: 12px 14px;
  color: #475569;
}

.content .data-table { font-size: 13.5px; }
.content .data-table th { font-size: 12px; }
.content .data-table td { line-height: 1.6; }

.content .table-action,
.content .filter-btn,
.content .dashboard-filter-area-toggle,
.content .page-filter-toggle-badge,
.content .live-explorer-action {
  font-size: 12.5px !important;
  line-height: 1.4;
}

.content .type-badge,
.content .method-tag,
.content .validation-state,
.content .import-status,
.content .severity-badge {
  font-size: 11.5px !important;
  line-height: 1.4;
}

.content .chart-wrap { min-height: 280px; }
.content .automl-chart-card .chart-wrap { height: 320px; }
.content .automl-chart-card .chart-wrap.tall { height: 400px; }
.chart-drilldown-dialog { font-size: 14px; }

@media (max-width: 640px) {
  .page-sub { font-size: 13px; }
  .content .chart-wrap { min-height: 250px; }
  .content .card-sub,
  .content .chart-explainer,
  .content .table-note { font-size: 12.5px !important; }
}

/* -------------------------------------------------------------------------
   11. PHASE 3B FINAL PASS — page composition & friendlier chrome.
   Additive only: new classes (.dashboard-intro, .dashboard-section-title,
   .dashboard-filter-area-toggle) plus a <details>/<summary> upgrade for the
   dashboard filter panel, which was previously an always-open <section>.
   No business logic, no existing selector is overridden.
   ------------------------------------------------------------------------- */

/* Plain-language intro line at the top of a module page. */
.dashboard-intro {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--border, #e2e8f0);
  border-left: 4px solid var(--green-mid, #16a34a);
  border-radius: 10px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 65%);
  color: var(--gray-600, #475569);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Section dividers that group related cards under a short, plain-English
   heading, so the page reads as clear chapters instead of one long grid. */
.dashboard-section-title {
  margin: 26px 0 12px;
  padding-left: 12px;
  border-left: 4px solid #93c5fd;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #0f172a);
  letter-spacing: -.1px;
}
.dashboard-section-title:first-of-type { margin-top: 4px; }

/* Collapsible dashboard filter panel: closed by default (via the <details>
   element itself having no "open" attribute) so the dashboard opens on the
   data, not the controls. */
.dashboard-filter-area { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: var(--card-bg, #fff); box-shadow: var(--shadow-sm); overflow: hidden; }
.dashboard-filter-area > .dashboard-filter-grid { padding: 4px 14px 14px; }
.dashboard-filter-area-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.dashboard-filter-area-heading::-webkit-details-marker { display: none; }
.dashboard-filter-area-heading .card-title { font-size: 14px; }
.dashboard-filter-area-toggle {
  flex-shrink: 0; padding: 7px 12px; border: 1px solid #bbf7d0; border-radius: 999px;
  background: #f0fdf4; color: #166534; font-style: normal; font-weight: 700; font-size: 11px; white-space: nowrap;
}
.dashboard-filter-area[open] .dashboard-filter-area-heading { border-bottom: 1px solid var(--border, #e2e8f0); }
.dashboard-filter-area[open] .dashboard-filter-area-toggle { font-size: 0; }
.dashboard-filter-area[open] .dashboard-filter-area-toggle::after { content: 'Close filters ▴'; font-size: 11px; }

@media (max-width: 560px) {
  .dashboard-intro { font-size: 13px; padding: 12px 14px; }
  .dashboard-filter-area-heading { align-items: flex-start; flex-direction: column; }
}

/* -------------------------------------------------------------------------
   12. GENERIC COLLAPSIBLE PAGE FILTER — used by analytics_geo_render_collapsible()
   on Crops, Precipitation, Disasters, Riskmap, Forecasting, Insights, and
   Awareness. Same visual language as the dashboard's filter accordion.
   ------------------------------------------------------------------------- */
.page-filter-toggle { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: var(--card-bg, #fff); box-shadow: var(--shadow-sm); overflow: hidden; }
.page-filter-toggle summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.page-filter-toggle summary::-webkit-details-marker { display: none; }
.page-filter-toggle summary .card-title { font-size: 14px; }
.page-filter-toggle-badge {
  flex-shrink: 0; padding: 7px 12px; border: 1px solid #bbf7d0; border-radius: 999px;
  background: #f0fdf4; color: #166534; font-style: normal; font-weight: 700; font-size: 11px; white-space: nowrap;
}
.page-filter-toggle[open] summary { border-bottom: 1px solid var(--border, #e2e8f0); }
.page-filter-toggle[open] .page-filter-toggle-badge { font-size: 0; }
.page-filter-toggle[open] .page-filter-toggle-badge::after { content: 'Close filters ▴'; font-size: 11px; }
.page-filter-toggle-body { padding: 14px 16px; }
.page-filter-toggle-body .analytics-geo-filter { margin: 0; }
@media (max-width: 560px) { .page-filter-toggle summary { align-items: flex-start; flex-direction: column; } }