/* =====================================================================
   TRIPURA UNIVERSITY CAMPUS MAP — CORE STYLESHEET
   Design language: "Neermahal" — inspired by the lake-palace geometry
   and handloom (pachra) diamond motifs of Tripura, reinterpreted as a
   modern academic GIS/SaaS interface.
   ===================================================================== */

/* ---------- Design tokens ------------------------------------------ */
:root {
  /* Color: named after local landmarks so the palette stays legible
     to anyone editing this file later */
  --navy-ink:      #10233A;  /* primary dark / chrome */
  --navy-ink-2:    #16324F;  /* raised surfaces on dark chrome */
  --teal-monsoon:  #1B7A72;  /* primary accent - links, active states */
  --teal-monsoon-d:#145F59;
  --gold-neermahal:#C99A3D;  /* secondary accent - highlights, routes */
  --gold-neermahal-l:#E4C17A;
  --cream-paper:   #F7F4EC;  /* light background */
  --cream-paper-2: #FBF9F4;  /* cards on light background */
  --charcoal:      #1C1F24;  /* body text */
  --charcoal-soft: #4B5259;  /* secondary text */
  --line-hairline: rgba(16, 35, 58, 0.10);
  --alert-red:     #C4453B;
  --success-green: #2F8F5B;
  --info-blue:     #2E6BB0;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16,35,58,0.06), 0 1px 1px rgba(16,35,58,0.04);
  --shadow-md: 0 6px 20px rgba(16,35,58,0.10), 0 2px 6px rgba(16,35,58,0.06);
  --shadow-lg: 0 16px 40px rgba(16,35,58,0.16), 0 4px 12px rgba(16,35,58,0.08);
  --glass-bg: rgba(251, 249, 244, 0.72);
  --glass-border: rgba(255,255,255,0.5);

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Type */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 420ms;

  /* Semantic (light theme defaults) */
  --bg-canvas: var(--cream-paper);
  --bg-surface: var(--cream-paper-2);
  --bg-chrome: var(--navy-ink);
  --text-primary: var(--charcoal);
  --text-inverse: #F3F1EA;
  --text-muted: var(--charcoal-soft);
  --border-subtle: var(--line-hairline);
  --accent: var(--teal-monsoon);
  --accent-strong: var(--teal-monsoon-d);
  --highlight: var(--gold-neermahal);
}

/* ---------- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* app-shell: the map owns scrolling */
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--gold-neermahal-l); }

/* Respect reduced motion preference everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Visible focus ring for keyboard users (accessibility requirement) */
:focus-visible {
  outline: 2px solid var(--teal-monsoon);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link for screen-reader / keyboard users */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--navy-ink); color: var(--text-inverse);
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- App shell ------------------------------------------------- */
#app-shell { position: relative; width: 100%; height: 100vh; height: 100dvh; }
#map-canvas { position: absolute; inset: 0; background: var(--bg-canvas); }
.leaflet-container { background: var(--bg-canvas); font-family: var(--font-body); }

/* Signature motif: a thin diamond-tick rule, echoing handloom pachra
   borders. Used sparingly as a section divider. */
.motif-rule {
  height: 10px;
  background-image: linear-gradient(45deg, var(--highlight) 25%, transparent 25%),
                     linear-gradient(-45deg, var(--highlight) 25%, transparent 25%);
  background-size: 10px 10px;
  background-position: 0 0;
  opacity: 0.55;
}

/* ---------- Top bar / brand header ------------------------------------ */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  pointer-events: none; /* let map interactions pass except on children */
}
.topbar > * { pointer-events: auto; }
.brand {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 8px 16px 8px 8px;
  box-shadow: var(--shadow-sm);
}
.brand__crest {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-ink);
  display: grid; place-items: center;
  color: var(--gold-neermahal);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy-ink); }
.brand__subtitle { font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }

/* ---------- Floating search ------------------------------------------- */
.search-float { flex: 1; max-width: 560px; position: relative; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.search-box:focus-within { box-shadow: var(--shadow-md); }
.search-box svg { flex-shrink: 0; color: var(--text-muted); }
.search-box input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 14.5px; color: var(--text-primary);
}
.search-box input::placeholder { color: var(--text-muted); }
.search-box .kbd-hint {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  border: 1px solid var(--border-subtle); border-radius: 5px; padding: 2px 6px;
}
.search-clear { border: 0; background: none; cursor: pointer; color: var(--text-muted); display: none; }
.search-clear.visible { display: block; }

.search-suggestions {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
  max-height: 60vh; overflow-y: auto;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  z-index: 950;
}
.search-suggestions.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.suggestion-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 10px 14px 4px;
}
.suggestion-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.suggestion-item:hover, .suggestion-item.active { background: rgba(27,122,114,0.08); }
.suggestion-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex-shrink: 0;
  background: rgba(201,154,61,0.16); color: var(--gold-neermahal);
}
.suggestion-text { display: flex; flex-direction: column; min-width: 0; }
.suggestion-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-meta { font-size: 11.5px; color: var(--text-muted); }
.suggestion-empty { padding: 18px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ---------- Icon buttons (theme toggle, layers, etc.) ------------------ */
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  color: var(--navy-ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(0.96); }
.icon-btn svg { width: 19px; height: 19px; }

/* ---------- Sidebar (filters + legend) --------------------------------- */
.sidebar {
  position: absolute; top: 84px; left: 18px; bottom: 18px; z-index: 800;
  width: 300px; max-width: calc(100vw - 36px);
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transform: translateX(-120%);
  transition: transform var(--dur-med) var(--ease-emphasized);
  overflow: hidden;
}
.sidebar.open { transform: translateX(0); }
.sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px;
}
.sidebar__header h2 { font-size: 16px; }
.sidebar__body { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }

.filter-section { padding: 10px 8px; border-bottom: 1px solid var(--border-subtle); }
.filter-section:last-child { border-bottom: none; }
.filter-section__title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 4px 6px 8px; display: flex; justify-content: space-between; align-items: center;
}
.filter-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px; }
.filter-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  font-size: 12.5px; cursor: pointer; user-select: none;
  transition: all var(--dur-fast) var(--ease-standard);
}
.filter-chip[aria-pressed="true"] {
  background: var(--teal-monsoon); color: #fff; border-color: var(--teal-monsoon);
  box-shadow: var(--shadow-sm);
}
.filter-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; }

.legend-list { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }

/* ---------- Map control cluster (zoom, compass, locate) ---------------- */
.map-controls {
  position: absolute; right: 18px; bottom: 120px; z-index: 800;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.zoom-stack {
  display: flex; flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.zoom-stack button {
  width: 42px; height: 40px; border: 0; background: transparent; cursor: pointer;
  color: var(--navy-ink); display: grid; place-items: center;
  border-bottom: 1px solid var(--border-subtle);
}
.zoom-stack button:last-child { border-bottom: none; }
.zoom-stack button:hover { background: rgba(27,122,114,0.10); }

.compass-rose {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm); display: grid; place-items: center;
  transition: transform var(--dur-med) var(--ease-standard);
}
.compass-rose svg { width: 22px; height: 22px; color: var(--gold-neermahal); }

/* ---------- Floating Action Button -------------------------------------- */
.fab {
  position: absolute; right: 18px; bottom: 24px; z-index: 850;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(145deg, var(--teal-monsoon), var(--teal-monsoon-d));
  color: #fff; border: none; cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-emphasized);
}
.fab:hover { transform: scale(1.06) rotate(4deg); }
.fab:active { transform: scale(0.96); }

/* ---------- Back to top / recenter -------------------------------------- */
.recenter-btn {
  position: absolute; left: 50%; top: 90px; transform: translateX(-50%) translateY(-12px);
  z-index: 850; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--navy-ink); color: var(--text-inverse); border: none; cursor: pointer;
  font-size: 12.5px; display: flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: all var(--dur-med) var(--ease-emphasized);
}
.recenter-btn.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---------- Information drawer (building / room details) ---------------- */
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 1000;
  width: 420px; max-width: 100vw;
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-emphasized);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer__hero {
  position: relative; height: 190px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-ink), var(--teal-monsoon-d));
  overflow: hidden;
}
.drawer__hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.drawer__hero-overlay {
  position: absolute; inset: 0; padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(16,35,58,0.85), rgba(16,35,58,0.05));
}
.drawer__eyebrow { color: var(--gold-neermahal-l); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.drawer__title { color: #fff; font-size: 21px; }
.drawer__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(16,35,58,0.5); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(6px);
}
.drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px 32px; }

.tab-row {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 16px;
  background: var(--bg-canvas); border-radius: var(--r-pill); border: 1px solid var(--border-subtle);
}
.tab-row button {
  flex: 1; border: 0; background: transparent; padding: 8px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; cursor: pointer; color: var(--text-muted); font-weight: 600;
  transition: all var(--dur-fast) var(--ease-standard);
}
.tab-row button.active { background: var(--navy-ink); color: #fff; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.info-tile {
  background: var(--cream-paper); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  padding: 10px 12px;
}
.info-tile__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 3px; }
.info-tile__value { font-size: 13.5px; font-weight: 600; }

.desc-block { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); margin-bottom: 18px; }

/* Floor switcher */
.floor-switcher { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.floor-switcher__label { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.floor-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.floor-pill {
  flex-shrink: 0; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border-subtle); background: var(--cream-paper);
  font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease-standard);
}
.floor-pill.active { background: var(--gold-neermahal); border-color: var(--gold-neermahal); color: #241a04; }

.floor-plan-frame {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border-subtle); margin-bottom: 14px;
  background: var(--cream-paper);
}
.floor-plan-frame svg { width: 100%; display: block; }
.floor-plan-frame .fade-in { animation: fadeIn var(--dur-med) var(--ease-standard); }

.room-list { display: flex; flex-direction: column; gap: 8px; }
.room-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--cream-paper); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.room-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.room-card__num {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0;
  background: rgba(27,122,114,0.12); color: var(--teal-monsoon-d);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.room-card__text { min-width: 0; }
.room-card__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card__meta { font-size: 11.5px; color: var(--text-muted); }

.drawer__actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill); border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: all var(--dur-fast) var(--ease-standard);
}
.btn-primary { background: var(--teal-monsoon); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-monsoon-d); box-shadow: var(--shadow-md); }
.btn-ghost { background: var(--cream-paper); border: 1px solid var(--border-subtle); color: var(--text-primary); }
.btn-ghost:hover { background: rgba(16,35,58,0.05); }
.btn-gold { background: var(--gold-neermahal); color: #241a04; }
.btn-gold:hover { background: var(--gold-neermahal-l); }

/* ---------- Route planner panel ---------------------------------------- */
.route-panel {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%) translateY(-16px);
  z-index: 950; width: min(94vw, 460px);
  background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle); padding: 16px;
  opacity: 0; pointer-events: none;
  transition: all var(--dur-med) var(--ease-emphasized);
}
.route-panel.open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.route-panel__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.route-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.route-dot--start { background: var(--teal-monsoon); }
.route-dot--end { background: var(--alert-red); }
.route-input {
  flex: 1; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  padding: 9px 12px; font-size: 13px; background: var(--cream-paper); outline: none;
}
.route-input:focus { border-color: var(--teal-monsoon); }
.route-swap { border: none; background: var(--cream-paper); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; color: var(--text-muted); }
.route-summary {
  display: flex; gap: 14px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border-subtle);
  font-size: 12.5px; color: var(--text-muted);
}
.route-summary strong { color: var(--text-primary); font-family: var(--font-mono); }
.route-mode-toggle { display: flex; gap: 6px; margin-top: 10px; }
.route-mode-toggle button {
  flex: 1; padding: 7px; border-radius: var(--r-sm); border: 1px solid var(--border-subtle);
  background: var(--cream-paper); font-size: 12px; cursor: pointer; color: var(--text-muted);
}
.route-mode-toggle button.active { background: var(--navy-ink); color: #fff; border-color: var(--navy-ink); }

/* ---------- Toast notifications ----------------------------------------- */
.toast-stack {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy-ink); color: var(--text-inverse);
  padding: 11px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg);
  font-size: 13px; animation: toastIn var(--dur-med) var(--ease-emphasized);
}
.toast.leaving { animation: toastOut var(--dur-fast) var(--ease-standard) forwards; }
.toast--success { background: var(--success-green); }
.toast--error { background: var(--alert-red); }
.toast--gold { background: var(--gold-neermahal); color: #241a04; }

/* ---------- Context menu -------------------------------------------------- */
.context-menu {
  position: absolute; z-index: 1300; min-width: 200px;
  background: var(--bg-surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle); padding: 6px; display: none;
}
.context-menu.open { display: block; animation: fadeIn var(--dur-fast) var(--ease-standard); }
.context-menu button {
  width: 100%; text-align: left; border: none; background: none; padding: 9px 12px;
  border-radius: var(--r-sm); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.context-menu button:hover { background: rgba(27,122,114,0.1); }

/* ---------- Breadcrumb ---------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted);
  padding: 0 20px 10px;
}
.breadcrumb a { color: var(--teal-monsoon-d); cursor: pointer; }
.breadcrumb span.sep { opacity: 0.5; }

/* ---------- Skeleton loader ------------------------------------------------ */
.skeleton {
  background: linear-gradient(100deg, var(--cream-paper) 30%, #ece7d9 50%, var(--cream-paper) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}
.skeleton-row { height: 14px; margin-bottom: 8px; }

/* ---------- App loading splash -------------------------------------------- */
#app-loading {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--navy-ink); color: var(--text-inverse);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
#app-loading.hide { opacity: 0; pointer-events: none; }
.loading-crest { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold-neermahal); display: grid; place-items: center; }
.loading-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--gold-neermahal);
  animation: spin 0.9s linear infinite;
}
.loading-label { font-size: 13px; letter-spacing: 0.04em; color: rgba(243,241,234,0.7); }

/* ---------- Leaflet marker & popup theming --------------------------------- */
.campus-marker {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50% 50% 50% 4px;
  transform: rotate(45deg);
  box-shadow: var(--shadow-sm);
  border: 2px solid #fff;
  transition: transform var(--dur-fast) var(--ease-emphasized);
}
.campus-marker svg { transform: rotate(-45deg); width: 16px; height: 16px; color: #fff; }
.campus-marker:hover { transform: rotate(45deg) scale(1.14); }
.campus-marker.bounce { animation: markerBounce 0.6s var(--ease-emphasized); }

.leaflet-popup-content-wrapper {
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  background: var(--bg-surface); padding: 2px;
}
.leaflet-popup-tip { background: var(--bg-surface); }
.map-popup { padding: 6px 4px; min-width: 180px; }
.map-popup h4 { font-size: 14px; margin-bottom: 4px; }
.map-popup p { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.map-popup button { width: 100%; }

/* ---------- Keyframes -------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes markerBounce {
  0% { transform: rotate(45deg) translateY(0); }
  30% { transform: rotate(45deg) translateY(-14px); }
  55% { transform: rotate(45deg) translateY(0); }
  70% { transform: rotate(45deg) translateY(-6px); }
  100% { transform: rotate(45deg) translateY(0); }
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(0.96); } }
@keyframes dashFlow { to { stroke-dashoffset: -24; } }
.route-line-animated { animation: dashFlow 1s linear infinite; }