/* assets/css/styles.css */
:root{
  --sand:#D6CEBD; --red:#CE1126; --green:#243E2C; --blue:#003F87; --gray:#515354;
  --card:#fff; --ink:#0f172a; --muted:#475569; --ring: rgba(0,63,135,.18);
  --radius:16px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--sand),#f6f4ef);
  color:var(--ink);
}

.wrap{max-width:1100px;margin:0 auto;padding:0 18px}

.site-header{
  background:var(--blue);
  color:#fff;
  border-bottom:4px solid var(--red);
}

.topbar{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:14px 0;
}

.brand{display:flex;gap:12px;align-items:center}

.mark{
  width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
}

.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:.9rem;color:rgba(255,255,255,.85)}

.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a{
  color:#fff;text-decoration:none;padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  font-size:.92rem;
}
.nav a:hover{filter:brightness(1.08)}

main{padding:22px 0 44px}

.card{
  background:var(--card);
  border:1px solid rgba(2,6,23,.08);
  border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  padding:16px;
}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.span-12{grid-column:span 12}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}

@media (max-width:900px){
  .span-6,.span-4{grid-column:span 12}
}

h1{margin:0 0 10px;font-size:1.6rem;color:var(--green)}
p{margin:0 0 10px;color:var(--gray)}

.btn{
  display:inline-block;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
}

.btn.alt{background:var(--red)}

.footer{padding:18px 0;color:var(--gray);font-size:.9rem}

/* =========================
   HEADER REFINEMENTS (SAFE)
   ========================= */

/* Give the header more vertical breathing room */
.site-header {
  padding: 14px 0 18px;
}

/* Ensure header content aligns cleanly */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand area: logo + text */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* District logo */
.brand-logo {
  height: 42px;
  width: auto;
}

/* Brand text */
.brand-text {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}

/* Space out the nav buttons */
.nav {
  display: flex;
  gap: 18px;
}

/* Increase clickable area of nav links */
.nav a {
  padding: 8px 14px;
}

/* Dashboard page header (keeps the existing dashboard layout intact) */
.dashboard-header {
  padding: 18px 0;
}

/* If your dashboard uses .wrap but the rest of the site uses .container, keep it centered */
.dashboard-header .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Make sure dashboard controls wrap nicely */
.dashboard-header .toprow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.dashboard-header .pillrow,
.dashboard-header .controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.dashboard-header .dashbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap; /* mobile-safe */
}

.dashboard-header .pillrow{
  justify-content: flex-start;
}

.dashboard-header .controls{
  justify-content: flex-end;
  margin-top: 0; /* remove the old top spacing since it's now inline */
}

/* =========================
   MOBILE OPTIMIZATIONS
   ========================= */

@media (max-width: 720px) {
  .site-header .header-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0 14px;
  }

  .site-header .nav{
    width: 100%;
    gap: 10px;
  }

  .site-header .nav a{
    padding: 10px 12px; /* bigger tap targets */
  }

  .site-header .brand-text{
    font-size: 1rem;
  }
}

.calendar-container{
  height: calc(100dvh - 96px); /* iOS-friendly dynamic viewport */
  height: calc(100vh - 96px);  /* fallback */
}

html{
  -webkit-text-size-adjust: 100%; /* prevents iOS auto-zooming text */
}

button, .button, .btn, .nav a{
  min-height: 44px; /* Apple recommended tap target */
}

/* =========================
   iPHONE FIXES – DASHBOARD
   ========================= */

.dashboard-header select,
.dashboard-header button {
  font-size: 16px;          /* prevents iOS zoom */
  min-height: 44px;         /* Apple tap target */
}

.dashboard-header .controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Mobile layout */
@media (max-width: 720px) {
  .dashboard-header .dashbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-header .pillrow {
    justify-content: flex-start;
  }

  .dashboard-header .controls {
    justify-content: flex-start;
    width: 100%;
  }

  .dashboard-header .controls label {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-header .controls select {
    width: 60%;
    max-width: 260px;
  }

  .dashboard-header #refreshBtn {
    width: 100%;
  }
}

/* Fallback block (hidden by default) */
.calendar-fallback{
  display:none;
  padding: 18px;
  max-width: 900px;
  margin: 0 auto;
}

.calendar-title{
  margin: 0 0 8px;
  font-size: 1.25rem;
}

/* On iPhones, prefer the fallback */
@media (max-width: 720px){
  .calendar-fallback{ display:block; }
  .calendar-frame{ display:none; }
}

/* Contact form - styled to match existing cards/buttons */
.contact-form {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-field span {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: var(--muted, #515354);
}

.contact-field input,
.contact-field textarea,
.contact-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  font: inherit;
  box-sizing: border-box;
}

.contact-field textarea {
  resize: vertical;
}

/* Mobile: stack name/email */
@media (max-width: 720px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}

 /* KPI state styling */
  .card.kpi-good { border-left: 6px solid #22c55e; }
  .card.kpi-warn { border-left: 6px solid #f59e0b; }
  .card.kpi-bad  { border-left: 6px solid #ef4444; }

  .badge.kpi-good { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.30); color: #166534; }
  .badge.kpi-warn { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); color: #92400e; }
  .badge.kpi-bad  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.30); color: #991b1b; }

  /* subtle highlight on the big number */
  .big.kpi-good { color: #166534; }
  .big.kpi-warn { color: #92400e; }
  .big.kpi-bad  { color: #991b1b; }

  .important-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 720px) {
  .important-links-grid {
    grid-template-columns: 1fr;
  }
}