/* ===== Light Theme (cleaned) ===== */

/* Friendly fallbacks for custom props used below */
:root{
  --line: #dce5f5;
  --ink-900: #0b2540;
  --ink-600: #496a94;
  --brand-600: #2a72ff;
  --brand-700: #1f5bce;
}

html, body{
  background:#f6faff !important;
  color:#0b2540 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  html, body{ background:#f6faff !important; color:#0b2540 !important; }
}

/* Header */
.header{
  background:#fff !important;
  color:#0b2540 !important;
  border-bottom:1px solid #e6eef9;
}
.header h1{ color:#0b2540 !important; }

/* Toolbar inputs/buttons */
.wx .toolbar input,
.wx .toolbar select{
  background:#fff; color:#0b2540; border:1px solid var(--line);
}
.wx .toolbar button{
  background:var(--brand-600); color:#fff; border:none;
}
.wx .toolbar button:hover{ background:var(--brand-700); }

/* Cards/Tiles */
.wx .card, .wx .tile{
  background:#fff;
  color:var(--ink-900);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(20,50,90,.04);
}
.wx .muted, .wx .kpi .sub{ color:var(--ink-600); }

/* ===== Smart location bar ===== */
.wx-search{
  display:flex; gap:10px; align-items:start; margin:12px 0 18px; flex-wrap:wrap;
}
.wx-search .combo{
  position:relative; flex:1 1 420px; display:flex; gap:10px; align-items:center;
}
.wx-search input#cityInput{
  flex:1 1 auto; height:44px; border-radius:999px; border:1px solid #dce5f5;
  background:#fff; color:#0b2540; padding:0 14px; box-shadow:0 2px 8px rgba(20,50,90,.04);
}
.wx-search .btn{
  height:44px; padding:0 16px; border-radius:999px; font-weight:600; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
}
.wx-search .btn-primary{ background:#2a72ff; color:#fff; }
.wx-search .btn-primary:hover{ background:#1f5bce; }
.wx-search .btn-secondary{ background:#ffd666; color:#3c2a00; border-color:#f2c84b; }
.wx-search .btn-secondary:hover{ background:#f2c84b; }
.wx-search .units{
  height:44px; border-radius:12px; border:1px solid #dce5f5; background:#fff; color:#0b2540; padding:0 10px;
}

/* Suggestions dropdown */
.wx-search .suggestions{
  position:absolute; top:48px; left:0; right:0; z-index:30; list-style:none; margin:6px 0 0; padding:8px 0;
  background:#fff; border:1px solid #dce5f5; border-radius:12px; box-shadow:0 10px 22px rgba(20,50,90,.12);
  max-height:280px; overflow:auto;
}
.wx-search .suggestions[hidden]{ display:none; }
.wx-search .suggestions li{
  padding:10px 14px; cursor:pointer; display:flex; gap:8px; align-items:baseline;
}
.wx-search .suggestions li:hover,
.wx-search .suggestions li[aria-selected="true"]{ background:#eef5ff; }
.wx-search .suggestions .main{ color:#0b2540; }
.wx-search .suggestions .meta{ color:#496a94; font-size:12px; }

/* KPI emojis + info links */
.kpi .value .emo{ margin-right:.35rem; font-size:1.15em; vertical-align:-2px; }
.info-link{
  display:inline-block; margin-left:.4rem; text-decoration:none;
  font-weight:700; border-radius:6px; padding:0 .3rem; line-height:1;
  background:#eef5ff; color:#1f5bce; border:1px solid #dbe8ff;
}
.info-link:hover{ background:#e5f0ff; }
.section-title .info-link{ margin-left:.5rem; }

/* Indicators (light) */
.indicators{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:10px;
}
.ind-card{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px;
  box-shadow:0 2px 8px rgba(20,50,90,.04);
}
.ind-card .title{ font-weight:800; margin-bottom:4px; color:#0b2540; }
.ind-card .desc{ color:#496a94; font-size:.95rem; }

/* Map container (light) */
#map{
  height:320px; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:12px; margin-top:10px;
  box-shadow:0 2px 8px rgba(20,50,90,.04);
}

.kpi .value .emo { 
  margin-left: .35rem; 
  opacity: .95; 
}
.page-title .now-emo { 
  font-size: 1.15em; 
  margin-left: .4rem; 
}

/* ==== Situation (scoped) ===================================== */
.page-title.situ { 
  display:flex; align-items:center; gap:.5rem; 
  margin-top:14px; margin-bottom:.25rem;
}

.page-title.situ .badge {
  font-weight:600;
  padding:.25rem .5rem;
  border-radius:999px;
}

.kpis.situ {
  /* keep your existing card look; only tune the grid */
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:.5rem;
}

@media (max-width: 1100px) {
  .kpis.situ { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .kpis.situ { grid-template-columns:1fr; }
}

/* card internals (only inside Situation) */
.kpis.situ .kpi {
  display:flex; flex-direction:column; justify-content:center;
  min-height:82px;
}

.kpis.situ .kpi .label {
  font-weight:600;
  display:flex; align-items:center; gap:.5rem;
}

.kpis.situ .kpi .value {
  display:flex; align-items:center; gap:.5rem;
  margin-top:4px; 
  font-size:1.05rem; font-weight:700;
}

.kpis.situ .kpi .value .emo {  /* keeps emoji aligned */
  line-height:1; font-size:1.1rem;
}

.kpis.situ .kpi .sub {
  color: var(--muted, #6b7280);
  font-size:.85rem;
  margin-top:2px;
}

/* subtle emphasis colors for Situation only */
.page-title.situ .badge { background:#eef2ff; color:#3730a3; }
.kpis.situ .kpi .badge  { background:#e5f3ff; color:#0c4a6e; }

/* optional: style for the ℹ️ link next to “Situation” */
.page-title.situ .info-link {
  margin-left:.25rem; text-decoration:none;
  font-size:.95rem; opacity:.7;
}
.page-title.situ .info-link:hover { opacity:1; }

/* Make long labels wrap nicely but keep cards tidy */
.kpis.situ .kpi .label, 
.kpis.situ .kpi .sub { word-break:break-word; }

/* optional: very light hover to match your UI */
.kpis.situ .kpi:hover { 
  box-shadow: 0 1px 0.5px rgba(0,0,0,.03), 0 3px 10px rgba(0,0,0,.02);
}
/* Align Situation with main content */
.situ-wrap {
  max-width: 1100px;     /* match your site/container width */
  margin: 0 auto;        /* center horizontally */
  padding: 0 16px;       /* match your global side gutter */
}

/* Remove any inherited left offsets inside the block */
.page-title.situ { margin-left: 0; }
.kpis.situ       { margin-left: 0; padding-left: 0; }
.kpis.situ .kpi  { margin-left: 0; }

/* Align header logo + title */
.header .wrap {
  display: flex;
  align-items: center;
  gap: 10px;              /* spacing between logo + text */
}

.header .wrap img {
  display: block;
  height: 36px;
  width: 36px;
}

.header .wrap h1 {
  margin: 0;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  color: gold;
  line-height: 1;         /* remove extra vertical space */
  display: flex;
  align-items: center;
}