/* ═══════════════════════════════════════════════════════════════════
   Cotton Weather Dashboard — style.css
   VLM Commodities Design System v1.0
   Dark: #080b0f bg · #E8C547 gold · Courier New monospace
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #080b0f;
  --surf:   #0f1520;
  --surf2:  #161e2a;
  --hdr:    #0a1118;
  --bord:   #2a3548;
  --bord2:  #334155;
  --text:   #f8fafc;
  --dim:    #cbd5e1;
  --muted:  #94a3b8;
  --gold:   #E8C547;
  --grn:    #22c55e;
  --red:    #ef4444;
  --blue:   #93c5fd;
  --orange: #fb923c;
  --radius: 3px;
  --shadow: 0 2px 12px rgba(0,0,0,0.6);
}

html { font-size: 15px; }
body {
  background:  var(--bg);
  color:       var(--text);
  font-family: 'Aptos', 'Aptos Semi Bold', Calibri, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.55;
  min-height:  100vh;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ────────────────────────────────────────────────────────── */
.site-header {
  background:    var(--hdr);
  border-bottom: 2px solid var(--gold);
  padding:       10px 20px;
  position:      sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.header-brand { display: flex; align-items: center; gap: 14px; }
.header-logo {
  background:     var(--gold);
  color:          var(--hdr);
  font-weight:    900;
  font-size:      22px;
  padding:        4px 12px;
  border-radius:  3px;
  letter-spacing: 4px;
}
.header-titles h1 {
  font-size:      16px;
  font-weight:    700;
  color:          var(--text);
  letter-spacing: 1px;
  line-height:    1.2;
}
.header-sub { font-size: 11px; color: var(--muted); letter-spacing: 1px; }

.header-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.header-time {
  font-size:      13px;
  color:          var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.refresh-meta {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.countdown-wrap { font-size: 12px; color: var(--muted); }
#countdown { color: var(--gold); font-variant-numeric: tabular-nums; }

.stale-badge {
  background: rgba(251,146,60,.15); color: #fb923c;
  border: 1px solid rgba(251,146,60,.4);
  font-size: 11px; padding: 2px 8px; border-radius: 2px;
  letter-spacing: 1px; text-transform: uppercase;
}
.healing-badge {
  background: rgba(34,197,94,.12); color: var(--grn);
  border: 1px solid rgba(34,197,94,.35);
  font-size: 11px; padding: 2px 8px; border-radius: 2px;
  letter-spacing: 1px; text-transform: uppercase;
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }

/* ── Crop Strip ─────────────────────────────────────────────────────── */
.crop-strip {
  background:    var(--hdr);
  border-bottom: 1px solid var(--bord);
  padding:       7px 20px;
  overflow-x:    auto;
}
.crop-strip-inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.crop-chip {
  display: flex; flex-direction: column; align-items: center;
  background:  var(--surf);
  border:      1px solid var(--bord);
  border-radius: var(--radius);
  padding:     4px 12px;
  min-width:   110px;
}
.crop-region { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.crop-stage  { font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 2px; letter-spacing: 1px; }
.stage-planting              { color: #4ade80; }
.stage-emergence             { color: #86efac; }
.stage-squaring              { color: var(--gold); }
.stage-flowering             { color: var(--orange); }
.stage-boll_fill             { color: var(--orange); }
.stage-open_bolls            { color: var(--red); }
.stage-harvest               { color: #a16207; }
.stage-dormant___pre_season  { color: var(--muted); }

/* ── Search Bar ─────────────────────────────────────────────────────── */
.search-bar-wrap {
  max-width: 600px; margin: 12px auto; position: relative; padding: 0 20px;
}
#location-search {
  width: 100%; padding: 9px 14px;
  background:   var(--surf);
  border:       1px solid var(--bord);
  border-radius: var(--radius);
  color:        var(--text);
  font-family:  inherit;
  font-size:    14px;
  outline:      none;
  transition:   border-color 0.15s;
  letter-spacing: 0.5px;
}
#location-search::placeholder { color: var(--muted); }
#location-search:focus { border-color: var(--gold); }

.search-dropdown {
  position:  absolute; top: calc(100% + 2px); left: 20px; right: 20px;
  background: var(--surf);
  border:     1px solid var(--bord);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index:   200; max-height: 360px; overflow-y: auto;
}
.search-result-item {
  padding: 9px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--bord);
  transition: background 0.1s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--surf2); }
.search-result-item .result-name { font-weight: 700; color: var(--text); font-size: 14px; }
.search-result-item .result-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Weather Popup Modal ─────────────────────────────────────────────── */
.wx-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.75); z-index: 8000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.wx-modal.open { display: flex; }
.wx-modal-inner {
  background:    var(--surf);
  border:        1px solid var(--bord);
  border-top:    3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow:    0 24px 64px rgba(0,0,0,0.8);
  width:         100%; max-width: 780px;
  max-height:    90vh; overflow-y: auto;
  position:      relative;
}
.wx-modal-header {
  background:    var(--hdr);
  border-bottom: 1px solid var(--bord);
  padding:       14px 50px 14px 20px;
  display:       flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.wx-modal-location {
  font-size:   20px; font-weight: 700; color: var(--gold); letter-spacing: 1px;
}
.wx-modal-current {
  font-size: 15px; color: var(--dim);
}
.wx-modal-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: var(--muted);
  font-size: 22px; cursor: pointer; line-height: 1;
  font-family: inherit;
}
.wx-modal-close:hover { color: var(--gold); }

.wx-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }

/* 7-day forecast grid */
.wx-7day-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.wx-day-card {
  background:    var(--surf2);
  border:        1px solid var(--bord);
  border-radius: var(--radius);
  padding:       10px 6px; text-align: center;
}
.wx-day-date   { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 1px; }
.wx-day-high   { font-size: 18px; font-weight: 700; color: var(--orange); margin-top: 4px; }
.wx-day-low    { font-size: 14px; color: var(--blue); }
.wx-day-precip { font-size: 12px; color: var(--dim); margin-top: 5px;
                 border-top: 1px solid var(--bord); padding-top: 5px; }
.wx-day-precip.wet { color: #4ade80; font-weight: 700; }
.wx-day-prob   { font-size: 11px; color: var(--muted); }
.wx-day-wind   { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Stats row */
.wx-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.wx-stat-card {
  background:    var(--surf2);
  border:        1px solid var(--bord);
  border-radius: var(--radius);
  padding:       12px 14px;
}
.wx-stat-label { font-size: 11px; color: var(--muted); font-weight: 600;
                 text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.wx-stat-value { font-size: 20px; font-weight: 700; color: var(--text); }
.wx-stat-sub   { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* Narrative */
.wx-narrative-block {
  background:    var(--surf2);
  border-left:   3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       12px 16px;
  font-size:     14px;
  line-height:   1.75;
  color:         var(--dim);
  font-style:    italic;
}
.wx-narrative-label {
  font-size: 10px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px;
}

.wx-loading {
  padding: 32px; text-align: center; color: var(--muted); font-size: 14px;
}

/* ── Master Narrative ───────────────────────────────────────────────── */
.master-narrative {
  max-width: 1600px; margin: 12px auto 0; padding: 0 20px;
}
.master-inner {
  background:  var(--surf);
  border:      1px solid var(--bord);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding:     16px 20px;
  box-shadow:  0 0 24px rgba(232,197,71,0.07);
}
.master-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 2px;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  10px;
  display:        flex; align-items: center; gap: 8px;
}
.master-icon { font-size: 12px; }
.master-text {
  font-size:   15px;
  line-height: 1.75;
  color:       var(--text);
  font-style:  italic;
}
.master-ts { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 1px; }

.stale-tag {
  font-size:   10px;
  color:       var(--muted);
  background:  var(--surf2);
  border:      1px solid var(--bord);
  padding:     1px 6px;
  border-radius: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Sections ───────────────────────────────────────────────────────── */
.wx-section {
  max-width: 1600px; margin: 20px auto 0; padding: 0 20px;
}
.wx-section.emphasis .section-header h2 { color: var(--gold); }
.wx-section.emphasis {
  position: relative;
}
.wx-section.emphasis::before {
  content: '';
  position: absolute; left: 20px; top: 0;
  width: calc(100% - 40px); height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.section-header {
  display:     flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom:  1px solid var(--bord);
  flex-wrap:   wrap; gap: 8px;
}
.section-header h2 {
  font-size:      15px;
  font-weight:    700;
  color:          var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Section Narrative ──────────────────────────────────────────────── */
.section-narrative {
  background:   var(--surf);
  border-left:  3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:      10px 14px;
  margin-bottom: 10px;
  font-size:    14px;
  line-height:  1.7;
  position:     relative;
  color:        var(--dim);
}
.section-narrative.stale { border-left-color: var(--bord2); opacity: 0.8; }

/* ── Map Grid ───────────────────────────────────────────────────────── */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.map-card {
  background:    var(--surf);
  border:        1px solid var(--bord);
  border-radius: var(--radius);
  overflow:      hidden;
  position:      relative;
  cursor:        pointer;
  transition:    transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  aspect-ratio:  4/3;
  display:       flex; align-items: stretch;
}
.map-card:hover {
  transform:    translateY(-2px);
  box-shadow:   0 8px 24px rgba(0,0,0,0.6);
  border-color: var(--gold);
}
.map-card-error    { border-color: var(--red); }
.map-card-warn     { border-color: var(--orange); }
.map-card-img-error { border-color: var(--red); }

.map-img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  background: #050810;
}
.map-img-error-fallback {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; font-size: 13px; color: var(--muted);
  background: var(--surf2);
}

.map-card-overlay {
  position:   absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(5,8,16,0.96) 0%, rgba(5,8,16,0.7) 60%, transparent 100%);
  padding:    28px 10px 8px;
  pointer-events: none;
}
.map-card-footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
}
.map-title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text);
  line-height: 1.3;
  flex:        1;
  letter-spacing: 0.5px;
}

.map-card-placeholder {
  cursor:      default;
  aspect-ratio: 4/3;
}
.map-card-placeholder:hover {
  transform: none; box-shadow: none; border-color: var(--bord);
}
.map-placeholder-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 6px; color: var(--muted); font-size: 13px;
  text-align: center; padding: 16px;
}
.placeholder-icon  { font-size: 2rem; opacity: 0.3; }
.placeholder-title { font-weight: 700; color: var(--dim); font-size: 14px; }
.placeholder-msg   { font-size: 11px; color: var(--muted); }

/* ── Source Badges ──────────────────────────────────────────────────── */
.badge {
  font-size:    11px;
  font-weight:  700;
  letter-spacing: 1px;
  padding:      3px 7px;
  border-radius: 2px;
  text-transform: uppercase;
  white-space:  nowrap;
  flex-shrink:  0;
}
.badge-nws    { background: rgba(34,197,94,.15);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.badge-wpc    { background: rgba(147,197,253,.12); color: #93c5fd; border: 1px solid rgba(147,197,253,.3); }
.badge-wpc-red{ background: rgba(239,68,68,.15);   color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.badge-cpc    { background: rgba(239,68,68,.12);   color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.badge-ecmwf  { background: rgba(192,132,252,.12); color: #d8b4fe; border: 1px solid rgba(192,132,252,.3); }
.badge-gfs    { background: rgba(232,197,71,.12);  color: #E8C547; border: 1px solid rgba(232,197,71,.3); }
.badge-spc    { background: rgba(239,68,68,.18);   color: #f87171; border: 1px solid rgba(239,68,68,.4); }
.badge-usdm   { background: rgba(251,146,60,.12);  color: #fdba74; border: 1px solid rgba(251,146,60,.3); }
.badge-usgs   { background: rgba(34,211,238,.10);  color: #67e8f9; border: 1px solid rgba(34,211,238,.25); }
.badge-nbm    { background: rgba(74,222,128,.10);  color: #86efac; border: 1px solid rgba(74,222,128,.25); }
.badge-noaa   { background: rgba(147,197,253,.10); color: #bfdbfe; border: 1px solid rgba(147,197,253,.2); }
.badge-usda   { background: rgba(163,230,53,.10);  color: #bef264; border: 1px solid rgba(163,230,53,.25); }

/* ── Station Table Section ──────────────────────────────────────────── */
.table-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#station-search {
  padding: 5px 10px;
  background:  var(--surf);
  border:      1px solid var(--bord);
  border-radius: var(--radius);
  color:       var(--text);
  font-family: inherit;
  font-size:   13px;
  outline:     none;
  width:       200px;
}
#station-search:focus { border-color: var(--gold); }

.btn-collapse-all, .btn-expand-all {
  padding: 5px 12px; font-size: 11px;
  font-family: inherit;
  background:  var(--surf);
  border:      1px solid var(--bord);
  border-radius: var(--radius);
  color:       var(--dim);
  cursor:      pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:  0.15s;
}
.btn-collapse-all:hover, .btn-expand-all:hover {
  border-color: var(--gold); color: var(--gold);
}

.region-group  { margin-bottom: 8px; }
.region-header {
  display:       flex; align-items: center; justify-content: space-between;
  padding:       8px 12px;
  background:    var(--surf);
  border:        1px solid var(--bord);
  border-radius: var(--radius);
  cursor:        pointer;
  font-weight:   700;
  font-size:     13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:    background 0.15s;
}
.region-header:hover { background: var(--surf2); }
.region-toggle { font-size: 11px; color: var(--muted); transition: transform 0.2s; }
.region-header.collapsed .region-toggle { transform: rotate(-90deg); }
.region-body { overflow: hidden; transition: max-height 0.3s ease; }

/* Station table — VLM style */
.station-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin-top: 1px;
}
.station-table thead tr { background: var(--hdr); }
.station-table th {
  padding:        5px 8px;
  text-align:     right;
  color:          var(--dim);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom:  1px solid var(--bord);
  cursor:         pointer;
  white-space:    nowrap;
  user-select:    none;
}
.station-table th.lc, .station-table th:first-child { text-align: left; }
.station-table th:hover { color: var(--gold); }
.station-table th.sort-asc::after  { content: ' ↑'; }
.station-table th.sort-desc::after { content: ' ↓'; }

.station-row {
  border-bottom: 1px solid #131d2b;
  cursor:    pointer;
  transition: background 0.1s;
}
.station-row:hover { background: var(--surf2); }
.station-row:nth-child(even) { background: #0c1520; }
.station-row:nth-child(even):hover { background: var(--surf2); }

.station-table td {
  padding:        5px 8px;
  vertical-align: middle;
  text-align:     right;
  font-variant-numeric: tabular-nums;
}
.station-table td:first-child { text-align: left; }

.td-name   { font-weight: 700; white-space: nowrap; color: var(--text); }
.td-hilo   { color: var(--dim); }
.precip-hi { color: #4ade80; font-weight: 700; }
.soil-cold { color: var(--blue); }
.soil-warm { color: var(--orange); font-weight: 700; }

/* Drought colors */
.drought-none, .drought-— { color: var(--muted); }
.drought-d0 { color: #facc15; }
.drought-d1 { color: #fb923c; }
.drought-d2 { color: #f97316; }
.drought-d3 { color: var(--red); }
.drought-d4 { color: #dc2626; font-weight: 700; }

.station-expand-row td {
  padding: 0; background: var(--surf2);
  border-bottom: 2px solid var(--gold);
}
.station-detail { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.detail-soil { font-size: 13px; color: var(--dim); font-weight: 600; }
.detail-forecast { display: flex; gap: 6px; flex-wrap: wrap; }
.forecast-day {
  background:    var(--surf);
  border:        1px solid var(--bord);
  border-radius: var(--radius);
  padding:       6px 8px;
  min-width:     60px; text-align: center;
}
.fday-date   { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.fday-high   { color: var(--orange); font-weight: 700; font-size: 14px; }
.fday-low    { color: var(--blue); font-size: 13px; }
.fday-precip { font-size: 12px; color: var(--dim); margin-top: 2px; }
.fday-precip.precip-hi { color: #4ade80; font-weight: 700; }

.mini-chart { display: block; }

/* ── Lightbox ───────────────────────────────────────────────────────── */
.lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.88); z-index: 9000;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-inner {
  background:    var(--surf);
  border:        1px solid var(--bord);
  border-radius: var(--radius);
  box-shadow:    0 24px 64px rgba(0,0,0,0.8);
  max-width:     93vw; max-height: 91vh;
  display:       flex; flex-direction: column;
  overflow:      hidden; position: relative;
}
.lightbox-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; color: var(--dim);
  font-size: 20px; cursor: pointer; z-index: 1; line-height: 1;
  font-family: inherit;
}
.lightbox-close:hover { color: var(--gold); }
.lightbox-title-bar {
  padding: 10px 40px 10px 16px;
  border-bottom: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--hdr);
}
#lightbox-title { font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--text); }
.lightbox-source { font-size: 12px; color: var(--muted); }
.lightbox-img-wrap {
  flex: 1; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: #050810;
}
#lightbox-img { max-width: 100%; max-height: 76vh; object-fit: contain; }
.lightbox-footer {
  padding: 8px 16px; border-top: 1px solid var(--bord);
  text-align: right; font-size: 12px; background: var(--hdr);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background:  var(--hdr);
  border-top:  1px solid var(--bord);
  padding:     14px 20px;
  margin-top:  32px;
}
.footer-inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 11px; color: var(--muted); letter-spacing: 1px;
}
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--gold); }

/* ── Utility ─────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .map-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .station-table th:nth-child(n+8),
  .station-table td:nth-child(n+8) { display: none; }
}
@media (max-width: 700px) {
  .site-header { padding: 8px 12px; }
  .header-inner { flex-direction: column; align-items: flex-start; }
  .header-meta  { flex-direction: column; align-items: flex-start; gap: 4px; }
  .wx-section, .master-narrative { padding: 0 10px; }
  .map-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .wx-panel-days { grid-template-columns: repeat(4, 1fr); }
  .station-table th:nth-child(n+6),
  .station-table td:nth-child(n+6) { display: none; }
  .crop-strip { padding: 6px 10px; }
  .search-bar-wrap { padding: 0 10px; }
}