/* ========= 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:50; }
.header--dark{
  background:#0b1220;                      /* very dark blue/black */
  border-bottom:1px solid #050a13;
}
.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; }

/* ---------- LOGIN (white page, light card) ---------- */
.login-wrap{
  min-height: calc(100vh - 64px);
  display:flex; align-items:center; justify-content:center;
  padding: 28px 16px;
  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:#0f172a !important; }

/* Map/Portal helpers (unchanged behavior; ok to keep) */
.app-grid{ display:grid; grid-template-columns:280px 1fr; min-height:100vh; }
.grid{ display:grid; }
.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; }