* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f172a; }
.hidden { display: none !important; }

/* ---------- login ---------- */
#login {
  height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #00263e 0%, #0f172a 100%); padding: 24px;
}
.login-card {
  background: #ffffff; border-radius: 16px; padding: 32px 28px; max-width: 340px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.login-logo { font-size: 44px; }
.login-card h1 { margin: 8px 0 4px; font-size: 22px; color: #0f172a; }
.login-card p { margin: 0 0 18px; color: #64748b; font-size: 14px; }
.login-card input {
  width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 10px;
  font-size: 16px; margin-bottom: 10px;
}
.login-card button {
  width: 100%; padding: 12px; border: 0; border-radius: 10px; background: #f59e0b;
  color: #1e293b; font-size: 16px; font-weight: 700; cursor: pointer;
}
#login-error { color: #dc2626; font-size: 13px; margin-top: 8px; min-height: 16px; }

/* ---------- app shell ---------- */
#app { height: 100%; display: flex; flex-direction: column; }
header {
  background: #00263e; color: #fff; padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
}
header .title { font-weight: 700; font-size: 16px; }
#admin-nav, #staff-nav { display: flex; gap: 12px; margin-left: 16px; }
#admin-nav a, #staff-nav a { color: #fbbf24; font-size: 13px; font-weight: 600; text-decoration: none; }
#admin-nav a:hover, #staff-nav a:hover { text-decoration: underline; }
/* task 3072: on a phone the staff link is the one a teacher is reaching for -
   give it a tappable box rather than 13px of bare text next to the title. */
#staff-nav a { padding: 7px 11px; background: rgba(251,191,36,.16); border-radius: 8px; }
#refresh-status { font-size: 12px; color: #94a3b8; margin-left: auto; }

#chips {
  display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; background: #0f172a;
  flex: 0 0 auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#chips::-webkit-scrollbar { display: none; }
.chip {
  border: 2px solid; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700;
  background: transparent; cursor: pointer; white-space: nowrap; color: #fff; display: flex; align-items: center; gap: 6px;
}
.chip.off { opacity: .35; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.chip .dot.moving { background: #22c55e; animation: pulse 1.5s infinite; }
.chip .dot.stopped { background: #f59e0b; }
.chip .dot.at_school { background: #38bdf8; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

#map-wrap { flex: 1 1 auto; min-height: 0; position: relative; }
#map { position: absolute; inset: 0; }
#earlier-btn {
  position: absolute; top: 10px; right: 10px; z-index: 1001;
  border: 1.5px dashed #64748b; border-radius: 999px; padding: 6px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #1e293b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
#earlier-btn.on { background: #1e293b; color: #fff; border-style: solid; }

/* ---------- bottom panel ---------- */
#panel {
  flex: 0 0 auto; background: #1e293b; color: #e2e8f0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  max-height: 32vh; overflow-y: auto; font-size: 13px;
}
.bus-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #334155; cursor: pointer;
}
.bus-row:last-child { border-bottom: 0; }
.bus-row .swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.4); }
.bus-row .name { font-weight: 700; width: 62px; flex: 0 0 auto; }
.bus-row .info { flex: 1 1 auto; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bus-row .age { flex: 0 0 auto; color: #64748b; font-size: 12px; }
.badge {
  font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; flex: 0 0 auto;
}
.badge.moving { background: #14532d; color: #86efac; }
.badge.stopped { background: #78350f; color: #fcd34d; }
.badge.at_school { background: #0c4a6e; color: #7dd3fc; }
.badge.offline { background: #334155; color: #94a3b8; }
.badge.warn { background: #7f1d1d; color: #fecaca; }

/* ---------- map markers ---------- */
.bus-marker { filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.bus-marker .bubble {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  position: relative;
}
.bus-marker .nav {
  display: flex; align-items: center; justify-content: center;
  transition: transform 1s ease;
}
.bus-marker.stale .bubble { opacity: .45; }
.school-marker { font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.leaflet-popup-content { font-size: 13px; }
.leaflet-popup-content b { font-size: 14px; }

@media (min-width: 800px) {
  #app { flex-direction: column; }
  #panel { max-height: 22vh; }
}

/* Staff sign-in reveal on the parent login card (task 3066) */
.link-btn {
  background: none !important; border: 0; color: #64748b !important;
  font-size: 13px !important; font-weight: 600 !important; width: auto !important;
  padding: 8px 0 0 !important; cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: #0f172a !important; }