/* ========= CurmudgInnovation brand skin ========= */
:root{
  --brand-teal:#14b8a6;      /* teal accent */
  --brand-orange:#f59e0b;    /* orange accent */
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0;
  --slate-300:#CBD5E1; --slate-400:#94A3B8; --slate-500:#64748B;
  --slate-600:#475569; --slate-700:#334155; --slate-800:#1F2937; --slate-900:#0F172A;
}

html,body{ height:100%; }
body{
  margin:0;
  background:#ffffff; /* white page bg */
  color:#0f172a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{ max-width:1100px; margin:24px auto; padding:0 16px; }
.card{ background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.sep,.separator{ height:1px; background:rgba(0,0,0,.08); }

/* ---------- DARK HEADER (like CurmudgHome) ---------- */
.brand-header{ position:sticky; top:0; z-index:1100; }
.header--dark{
  background:#0b1220;
  border-bottom:1px solid #1a2c4e;
}
.brand-header .container{
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
}
/* Bigger bulb — no image resize needed */
.brand{
  display:flex; align-items:center; gap:.75rem; text-decoration:none;
}
.brand img{
  width:60px; height:60px; object-fit:contain; /* transparent PNG shows banner behind */
}
/* Stack title + small subtitle */
.brand-titles{ display:flex; flex-direction:column; line-height:1.05; }
.brand-title{
  color:#fff; font-weight:800; font-size:24px; letter-spacing:.2px;
}
.brand-subtitle{
  color:#e5e7eb; font-size:12px; font-weight:600; opacity:.9; margin-top:2px;
}
@media (min-width:1200px){ .brand-title{ font-size:26px; } }

.brand-header nav a{
  color:#fff; opacity:.95; text-decoration:none; margin-left:18px; font-weight:600;
}
.brand-header nav a:hover{ color:var(--brand-teal); opacity:1; }

/* ---------- HAMBURGER BUTTON ---------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:60;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .2s, opacity .2s;
}
/* Animate to X when open */
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- MOBILE NAV ---------- */
@media (max-width:768px){
  .nav-toggle{ display:flex; }

  .brand-header nav{
    display:none;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#0b1220;
    border-top:1px solid #2d4a7a;
    padding:8px 20px 16px;
    z-index:1000;
  }
  .brand-header nav.open{ display:flex; }

  .brand-header nav a{
    margin:0;
    padding:13px 0;
    border-bottom:1px solid #2d4a7a;
    font-size:1rem;
  }
  .brand-header nav a:last-child{ border-bottom:none; }

  /* Hide subtitle on small screens to keep logo row tidy */
  .brand-subtitle{ display:none; }

  /* Map page: show map before sidebar, stack map+table vertically */
  .app-grid{ display:flex !important; flex-direction:column; min-height:0; }
  .app-grid aside{ order:1; }
  .app-grid main{ order:2; }
  .map-content-grid{ grid-template-columns:1fr !important; }

  /* Hide legend on mobile — GIS dataset select stays visible */
  .sidebar-only{ display:none !important; }

  /* Let the sites table grow naturally instead of fixed 520px */
  .card-content{ max-height:none !important; }
}

/* ---------- LOGIN (white page, light card) ---------- */
.login-wrap{
  display:flex; align-items:flex-start; justify-content:center;
  padding: 40px 16px 60px;
  background:#ffffff; /* <- white, per your request */
}
.login-card{
  width:min(94vw, 480px);
  color:#0f172a;
  background:#ffffff;                       /* plain white card */
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(2,6,23,.10);
}
.login-card .card-content{ padding: 22px; }
.login-card h2{
  color:#0f172a; text-align:center; margin: 0 0 14px 0; font-weight:800;
}

/* Inputs: white inside */
.login-card label{
  font-size:.9rem; color:#0f172a; display:block; margin-bottom:6px; font-weight:600;
}
.login-card input{
  width:100%;
  background:#ffffff; color:#0f172a;
  border:1px solid var(--slate-300);
  border-radius:10px;
  padding:.65rem .75rem;
  outline:none;
}
.login-card input::placeholder{ color:#97a3b8; }
.login-card input:focus{
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}

/* Button: dark brand */
.btn-dark{
  display:inline-block;
  background:#0b1220 !important;
  color:#fff !important;
  border:1px solid #0b1220 !important;
  border-radius:10px;
  padding:.7rem 1rem; width:auto;
  font-weight:700; text-align:center;
}
.btn-dark:hover{ background:#1a2c4e !important; }

/* Map/Portal helpers (unchanged behavior; ok to keep) */
.app-grid{ display:grid; grid-template-columns:280px 1fr; min-height:100vh; }
.grid{ display:grid; }
.map-content-grid{ display:grid; grid-template-columns:5fr 4fr; gap:1rem; align-items:start; }
.content{ background:#ffffff; padding:1rem; }
@media (max-width:1024px){ .app-grid{ grid-template-columns:1fr; } }

.sidebar--frosted{
  background: linear-gradient(to bottom, rgba(255,255,255,.80), rgba(255,255,255,.50));
  border-right:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.section-title{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--slate-500); font-weight:700; position:relative; margin:12px 0 6px;
}
.section-title::after{
  content:""; display:block; height:2px; margin-top:6px;
  background:linear-gradient(90deg, var(--brand-teal), transparent); opacity:.6;
}
.input,.sidebar--frosted select{
  width:100%; background:#fff; color:#0f172a;
  border:1px solid var(--slate-300); border-radius:10px; padding:.55rem .7rem;
}
#map{ height:420px; min-height:420px; border:1px solid var(--slate-300); border-radius:12px; overflow:hidden; }

/* --- Notify pills --- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  font-size:11px; line-height:1; font-weight:700;
  border:1px solid transparent; white-space:nowrap;
}
.pill .dot{ width:6px; height:6px; border-radius:999px; background:currentColor; display:inline-block; }

/* variants */
.pill.on     { background:#ecfdf5; border-color:#99f6e4; color:#065f46; }  /* teal-ish */
.pill.off    { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }  /* red-ish */
.pill.storm  { background:#fff7ed; border-color:#fed7aa; color:#7c2d12; }  /* amber */
.pill.freeze { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }  /* blue  */

/* quick utility for show/hide */
.hide { display: none !important; }

/* visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}