/* ===============================
   LoveMyAir-inspired Theme (CSU)
   =============================== */

/* ---- Brand tokens (Denver web palette) ---- */
:root{
  --color-navy:        #002D56; /* primary: headers, buttons */       /* Denver web palette */
  --color-bright-blue: #005596; /* secondary: large headers, buttons */
  --color-text:        #58595B; /* body text */
  --color-red-orange:  #D9531E; /* accent, alerts, link hovers */
  --color-bright-green:#6D8D24; /* limited decorative/alerts */
  --color-light-gray:  #DCDDDE; /* dividers, subtle backgrounds */
  --color-cream:       #F1E3C5; /* accent background */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,.12);

  --transition-fast: 150ms ease;
  --transition-med:  300ms ease;

  /* Map panel widths */
  --panel-width-desktop: 50vw;
  --panel-width-mobile:  100vw;
}

/* ---- Typography ---- */
/* Proxima Nova is Denver’s official web font. If you don’t license it,
   this stack falls back to modern, similar sans-serifs and system fonts. */
html, body{
  font-family: "Proxima Nova", "Inter", "Source Sans Pro", "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6{
  color: var(--color-navy);
  font-weight: 700;
  letter-spacing: 0.1px;
}
small, .text-muted{ color: #6f7376; }

/* ---- Links ---- */
a{
  color: var(--color-bright-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover, a:focus{
  color: var(--color-red-orange);
  text-decoration: underline;
}

/* ---- Buttons ---- */
.btn{
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:focus { outline: 2px solid var(--color-light-gray); outline-offset: 2px; }
.btn-primary{
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.btn-primary:hover{ background: var(--color-bright-blue); border-color: var(--color-bright-blue); }
.btn-secondary{
  background: var(--color-bright-blue);
  border-color: var(--color-bright-blue);
  color: #fff;
}
.btn-secondary:hover{ background: var(--color-navy); border-color: var(--color-navy); }
.btn-danger{
  background: var(--color-red-orange);
  border-color: var(--color-red-orange);
  color: #fff;
}
.btn-danger:hover{ filter: brightness(0.95); }

/* ---- App Shell: header / toolbar (if any) ---- */
.app-bar{
  background: var(--color-navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.app-bar a{ color: #fff; }
.app-bar .nav-link{ opacity: .9; }
.app-bar .nav-link:hover{ opacity: 1; }

/* ---- Map + Right Chart Panel ---- */
#map{
  height: 100vh;
  width: 100vw;
  transition: width var(--transition-med);
}

#chartPanel{
  position: fixed;
  top: 0;
  right: calc(-1 * var(--panel-width-desktop));
  height: 100vh;
  width: var(--panel-width-desktop);
  background: #fff;
  z-index: 1000;
  box-shadow: -6px 0 18px rgba(0,0,0,.15);
  border-left: 1px solid var(--color-light-gray);
  display: flex;
  flex-direction: column;
  padding: 12px;
  transition: right var(--transition-med);
}
.panel-open #chartPanel{ right: 0; }
.panel-open #map{ width: calc(100vw - var(--panel-width-desktop)); }

@media (max-width: 768px){
  #chartPanel{ width: var(--panel-width-mobile); right: -100vw; }
  .panel-open #map{ width: 0; }
}

/* ---- Panels / Cards ---- */
.card{
  background: #fff;
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-header{
  background: linear-gradient(0deg, #ffffff, #ffffff) padding-box,
              linear-gradient(90deg, var(--color-navy), var(--color-bright-blue)) border-box;
  border: 2px solid transparent;
  color: var(--color-navy);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  font-weight: 700;
}

/* ---- Legend (Leaflet custom control) ---- */
.leaflet-control-label{
  font-size: 12px;
}
.legend-toggle{
  background:#fff;
  border:1px solid var(--color-light-gray);
  border-radius: var(--radius-sm);
  padding:4px 8px;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
}
.legend-content{
  margin-top:6px;
  background:#fff;
  padding:8px;
  border:1px solid var(--color-light-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.legend_box{
  font-weight:700;
  margin:6px 0 4px;
  color: var(--color-navy);
}
.legend-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:3px 0;
}
.legend-dot, .legend-square{
  display:inline-block; width:12px; height:12px;
  border:2px solid #999;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.legend-dot{ border-radius: 50%; }

/* ---- PM bins (background swatches to match AQI-ish look) ---- */
.box{ margin:2px 0; padding:2px 6px; border-radius:4px; border:1px solid rgba(0,0,0,.08); font-size:11px; }
.box1{ background:#00e40033; } /* 0-12 */
.box2{ background:#ffff0033; } /* 12.1-35.4 */
.box3{ background:#ff7e0033; } /* 35.5-55.4 */
.box4{ background:#ff000033; } /* 55.5-150.4 */
.box5{ background:#8f3f9733; } /* 150.5-250.4 */
.box6{ background:#7e002333; } /* 250.5+ */

/* ---- Marker HTML (Leaflet divIcons) ---- */
.device-dot .dot{
  width:14px; height:14px; border-radius:50%; border:2px solid; box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.fem-square .sq{
  width:14px; height:14px; border:2px solid; box-shadow:0 0 0 1px rgba(0,0,0,.2);
}

/* ---- Chart container ---- */
#chartContainer{ height: 100%; display:flex; flex-direction:column; gap:8px; }
#pm25Chart{ flex:1 1 auto; min-height: 220px; }

/* ---- Chips / filters (if you add site/pollutant toggles) ---- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--color-light-gray);
  border-radius: 999px; padding: 4px 10px; font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.chip--active{
  background: var(--color-cream);
  border-color: var(--color-bright-blue);
}

/* ---- Alerts ---- */
.alert{
  border-left: 4px solid var(--color-red-orange);
  background: #fff7f4;
  border: 1px solid #ffd9ce;
  color: #7a2a15;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

/* ---- Language toggle (simple) ---- */
.lang-toggle a{
  display:inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border:1px solid var(--color-light-gray);
  background:#fff;
}
.lang-toggle a.active{
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}

/* ---- Misc helpers ---- */
hr{ border-color: var(--color-light-gray); opacity: .6; }
.muted{ color: #8a8f92; }
.shadow-sm{ box-shadow: var(--shadow-sm); }
.shadow-md{ box-shadow: var(--shadow-md); }
.rounded{ border-radius: var(--radius-md); }