@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

/* ==========================================================================
   Design tokens — brought in line with the tracker.sristi.digital landing
   page's visual language (navy/structured/editorial, mono-accented data)
   instead of the previous generic-SaaS blue/soft-shadow look. Every
   variable NAME below is unchanged from before, only the VALUES — this is
   what lets the refresh apply across all 17 admin pages without touching
   their markup, since they already reference these tokens throughout
   rather than hardcoding colors.
   ========================================================================== */
:root {
  --primary: #1d4ed8;
  --primary-hover: #1e3a8a;
  --primary-light: #eff4ff;
  --bg-main: #f6f8fb;
  --card-bg: #ffffff;
  --text-dark: #1a2233;
  --text-muted: #5a6478;
  --text-faint: #8993a8;
  --border: #e3e7ee;
  --border-soft: #edf0f5;
  --success: #0e9f6e;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0891b2;
  --navy: #101a30;
  --shadow-sm: 0 1px 2px 0 rgb(13 21 38 / 0.04);
  --shadow-md: 0 8px 20px -8px rgb(13 21 38 / 0.12);
  --shadow-lg: 0 16px 40px -12px rgb(13 21 38 / 0.18);
  --radius: 10px;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  background-color: var(--bg-main);
  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navbar */
.navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
}

.brand {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand img { border-radius: 6px; transition: transform 0.25s ease; }
.brand:hover img { transform: rotate(-6deg) scale(1.05); }

.brand span {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover {
  color: var(--text-dark);
  background: var(--bg-main);
}

.nav-links a.active {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
}

.nav-user {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}

.logout-link {
  color: var(--danger) !important;
}

.logout-link:hover {
  background: #fef2f2 !important;
}

/* Page Shell */
.page {
  max-width: 1400px;
  width: 100%;
  margin: 1.5rem auto;
  padding: 0 1.5rem 3rem 1.5rem;
  flex: 1;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-header p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 2px;
}

/* Cards & Metric Grids — flatter, border-led treatment (minimal shadow)
   matching the landing page's structured-editorial style rather than the
   previous soft-shadow-heavy "generic SaaS" look. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat-box:hover { border-color: var(--text-faint); transform: translateY(-2px); }

.stat-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
}

.stat-box.success::before { background: var(--success); }
.stat-box.warning::before { background: var(--warning); }
.stat-box.danger::before { background: var(--danger); }
.stat-box.info::before { background: var(--info); }

.stat-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 0.4rem;
}

.stat-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-dark);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-value small {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Tables */
.table-container {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}

.table th {
  background: var(--bg-main);
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--bg-main);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.badge.ok, .badge.success { background: #e7f7f1; color: #0a7a54; }
.badge.warn, .badge.warning { background: #fef3e2; color: #a35b09; }
.badge.danger { background: #fdeaea; color: #a91e1e; }
.badge.info { background: #e5f6f9; color: #066a80; }
.badge.secondary { background: var(--bg-main); color: var(--text-muted); }

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.green { background: var(--success); }
.status-dot.amber { background: var(--warning); }
.status-dot.red { background: var(--danger); }

/* Forms & Buttons */
.inline-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

input, select, textarea {
  border: 1px solid var(--border);
  padding: 0.6rem 0.85rem;
  border-radius: 7px;
  font-size: 0.875rem;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

button, .btn {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.6rem 1.15rem;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover, .btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(29, 78, 216, 0.45);
}
button:active, .btn:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
  background: #ffffff;
  color: var(--text-dark);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg-main);
  box-shadow: none;
}

.btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.775rem;
}

.btn-danger {
  background: var(--danger);
}
.btn-danger:hover {
  background: #b91c1c;
  box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.45);
}

/* Speedometer & Live Cards */
.speed-badge {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
}
.speed-badge.low { background: #e5f6f9; color: #066a80; }
.speed-badge.med { background: #fef3e2; color: #a35b09; }
.speed-badge.high { background: #fdeaea; color: #a91e1e; }

/* Replay Controls Panel */
.replay-panel {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.slider-container {
  flex: 1;
  min-width: 250px;
}

.slider-container input[type=range] {
  width: 100%;
  cursor: pointer;
}

/* Route Replay playback timeline — a thin bar above the scrub slider
   showing, proportionally across the trip's real elapsed time, where the
   vehicle was halted (red) and where it set off moving again (green
   ticks: trip start + right after every halt ends). */
.playback-timeline {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  margin-bottom: 5px;
  overflow: hidden;
}
.timeline-segment.halt {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--danger);
  min-width: 2px;
}
.timeline-tick.start {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 12px;
  background: var(--success);
  border-radius: 2px;
  transform: translateX(-1.5px);
}

/* Alerts */
.alert {
  padding: 0.85rem 1.25rem;
  border-radius: 7px;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  background: #fdeaea;
  color: #932020;
  border: 1px solid #f5c6c6;
}
.alert.success {
  background: #e7f7f1;
  color: #0a5c3f;
  border-color: #b7e7d3;
}

/* Login Page */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(circle at 15% 20%, #16213f 0%, var(--navy) 45%), var(--navy);
}

.login-card {
  background: #ffffff;
  width: 100%;
  max-width: 400px;
  border-radius: 14px;
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
}

.login-card h1 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  text-align: center;
}

.login-card .subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-card label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* Leaflet's zoom/layer controls default to z-index:1000, same as the sticky
   nav bar above — on the map pages this let them render on top of the nav
   whenever the map scrolled near the top. Keep them just below it.
   !important is needed because leaflet.min.css is linked after this file,
   so its own z-index:1000 rule would otherwise win the tie. */
.leaflet-top, .leaflet-bottom {
  z-index: 900 !important;
}

/* ==========================================================================
   Mobile responsiveness
   ========================================================================== */
@media (max-width: 900px) {
  .navbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.65rem 1rem;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 0.75rem 0.5rem;
  }

  .nav-user {
    padding: 0.5rem;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .brand {
    font-size: 1.05rem;
  }
  .brand img { height: 32px !important; }
}

@media (max-width: 640px) {
  .page {
    margin: 1rem auto;
    padding: 0 0.85rem 2rem 0.85rem;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header h2 {
    font-size: 1.2rem;
  }

  .card {
    padding: 1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .stat-box {
    padding: 0.85rem;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  /* Interactive/live maps: shrink the fixed pixel heights set inline on
     each page (#map, #replay-map, #geofence-map) so they don't dominate
     a small screen. */
  #map, #replay-map, #geofence-map {
    height: 320px !important;
  }

  .inline-form {
    width: 100%;
  }
  .inline-form select,
  .inline-form input,
  .inline-form button,
  .inline-form .btn {
    width: 100%;
  }

  .replay-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .slider-container {
    min-width: 0;
    width: 100%;
  }

  .table th, .table td {
    padding: 0.6rem 0.6rem;
    font-size: 0.8rem;
  }

  .login-card {
    padding: 1.5rem;
    margin: 0 1rem;
  }
}