/* MyGateCopilot - Custom styles (Bootstrap overrides + branding) */

/* ============ Global design system ============
   Applies modern styling to plain Bootstrap components (.card, .btn, .table, .form-control,
   etc.) so pages that don't define their own custom classes (complaints, reports, tickets,
   auth) automatically pick up the same look as the pages that already have bespoke styling
   (Vehicles, QR Codes, Defaulters, EB Dues) — no per-page markup changes needed. */
:root {
  --mg-primary: #1d63ff;
  --mg-primary-dark: #1550d6;
  --mg-ink: #0f172a;
  --mg-text: #1f2937;
  --mg-muted: #64748b;
  --mg-line: #e2e8f0;
  --mg-surface: #ffffff;
  --mg-radius: 16px;
  --mg-radius-sm: 10px;
  --mg-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  --mg-shadow-hover: 0 16px 32px rgba(15, 23, 42, 0.10);
}

html, body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}

body {
  background:
    radial-gradient(1100px 380px at 8% -15%, rgba(29, 99, 255, .06), transparent 55%),
    radial-gradient(900px 320px at 96% -10%, rgba(255, 193, 7, .05), transparent 52%),
    #f4f7fb;
  color: var(--mg-text);
}

main h4.fw-bold {
  letter-spacing: -0.02em;
  color: var(--mg-ink);
}

/* Navbar */
.mg-navbar {
  background: linear-gradient(180deg, #14151c, #1b1d29) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .2);
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.mg-brand {
  letter-spacing: -0.02em;
  font-size: 1.15rem;
}

.mg-navbar .badge {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 6px;
}

/* Generic cards (plain Bootstrap .card, used by pages without their own bespoke card class) */
.card {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  box-shadow: var(--mg-shadow);
}

.card-header {
  border-radius: var(--mg-radius) var(--mg-radius) 0 0 !important;
  border-bottom: 1px solid var(--mg-line);
  font-weight: 600;
}

/* Buttons */
.btn {
  border-radius: var(--mg-radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
}

.btn-sm {
  border-radius: 8px;
}

.btn-warning {
  background: linear-gradient(135deg, #ffc107, #ffb300);
  border-color: #ffb300;
  color: #1a1a2e;
}

.btn-warning:hover,
.btn-warning:focus {
  background: linear-gradient(135deg, #ffca2c, #ffc107);
  border-color: #ffc107;
  color: #1a1a2e;
}

.btn-primary {
  background: var(--mg-primary);
  border-color: var(--mg-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--mg-primary-dark);
  border-color: var(--mg-primary-dark);
}

/* Forms */
.form-control,
.form-select {
  border-radius: var(--mg-radius-sm);
  border-color: var(--mg-line);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mg-primary);
  box-shadow: 0 0 0 .2rem rgba(29, 99, 255, .15);
}

/* Tables */
.table thead th {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .05em;
  color: #94a3b8;
  font-weight: 800;
  border-bottom-width: 1px;
}

.table-hover > tbody > tr:hover > * {
  background-color: #f8fafc;
}

/* Badges */
.badge {
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 6px;
}

/* Nav tabs */
.nav-tabs {
  border-bottom-color: var(--mg-line);
}

.nav-tabs .nav-link {
  border: none;
  border-radius: 10px 10px 0 0;
  font-weight: 600;
  color: var(--mg-muted);
  padding: .6rem 1.1rem;
}

.nav-tabs .nav-link.active {
  color: var(--mg-primary);
  border-bottom: 2px solid var(--mg-primary);
  background: transparent;
}

.nav-tabs .nav-link:not(.active):hover {
  border-color: transparent;
  color: var(--mg-ink);
}

/* Alerts */
.alert {
  border-radius: 12px;
  border: none;
}

/* Modals */
.modal-content {
  border-radius: 18px;
  border: none;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}

.modal-header {
  border-bottom: 1px solid var(--mg-line);
}

/* Auth page dark background */
.auth-page {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  min-height: 100vh;
}

.auth-page .card {
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.auth-page .nav-tabs .nav-link {
  font-size: .92rem;
}

/* Token instruction code block */
.code-block {
  display: block;
  background: #1a1a2e;
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
  margin: 8px 0;
  user-select: all;
}

kbd {
  background: #eee;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid #ccc;
}

/* Desktop sidebar fixed positioning */
.sidebar-desktop {
  position: fixed;
  top: 56px; /* navbar height */
  bottom: 0;
  left: 0;
  z-index: 100;
  overflow-y: auto;
  background: #fff !important;
  border-right: 1px solid var(--mg-line) !important;
}

.sidebar-desktop h6,
.offcanvas h6 {
  letter-spacing: .08em;
  font-weight: 800 !important;
  color: #94a3b8 !important;
}

.sidebar-desktop .nav-link,
.offcanvas .nav-link {
  border-radius: 10px;
  padding: .55rem .85rem;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .15rem;
  transition: background-color .15s ease, color .15s ease;
}

/* Active nav link in sidebar */
.sidebar-desktop .nav-link.active,
.offcanvas .nav-link.active {
  background: linear-gradient(135deg, #ffc107, #ffb300) !important;
  color: #1a1a2e !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 193, 7, .35);
}

.sidebar-desktop .nav-link:not(.active):hover,
.offcanvas .nav-link:not(.active):hover {
  background-color: #f1f5f9;
  color: var(--mg-primary);
}

/* Choices.js overrides for consistent Bootstrap look */
.choices__inner {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  min-height: 38px;
  padding: 4px 8px;
  background-color: #fff;
}

.choices__inner:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.choices__list--multiple .choices__item {
  background-color: #ffc107;
  border: 1px solid #e0a800;
  color: #1a1a2e;
  font-size: 0.85rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #ffc107;
  color: #1a1a2e;
}

/* Branding color for warning/primary actions */
.btn-warning {
  color: #1a1a2e;
}

/* Vehicles page modern layout */
.veh-hero {
  background: linear-gradient(180deg, rgba(29, 99, 255, 0.08), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(29, 99, 255, 0.12);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.veh-hero-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.veh-hero-subtitle {
  color: #64748b;
  font-size: 0.92rem;
}

.veh-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.veh-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: #eef4ff;
  color: #1d63ff;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}

.veh-toolbar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0.85rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.veh-toolbar .form-select-sm {
  min-width: 140px;
}

.veh-toolbar-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
}

.veh-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: nowrap;
}

.veh-toolbar-filters {
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: nowrap;
}

.veh-filter-group,
.veh-action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.veh-filter-group {
  flex: 1 1 420px;
}

.veh-filter-group-tight {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.veh-toolbar-row .veh-action-group {
  justify-content: flex-end;
  flex: 0 1 auto;
  margin-left: auto;
}

.veh-filter-switch {
  flex: 0 0 auto;
  white-space: nowrap;
}

.veh-toolbar-actions .btn,
.veh-toolbar-actions .btn-sync,
.veh-toolbar-actions .form-check {
  flex: 0 0 auto;
}

.veh-section-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.veh-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.veh-card-badge-muted {
  background: #f1f5f9;
  color: #475569;
}

.veh-card-badge-primary {
  background: #eef4ff;
  color: #1d63ff;
}

.veh-card-badge-success {
  background: #dcfce7;
  color: #166534;
}

.tower-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 0.95rem;
  min-height: 164px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.tower-card:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 99, 255, 0.24);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.tower-card .tc-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tower-card .tc-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  font-weight: 800;
}

.tower-card .tc-hint {
  color: #64748b;
  font-size: 0.8rem;
}

.tower-card.no-vehicle {
  border-style: dashed;
  opacity: 0.92;
}

.detail-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.veh-bc {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  color: #64748b;
  font-size: 0.9rem;
}

.veh-bc .sep {
  color: #cbd5e1;
}

.veh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.veh-badge.type-car { background: #eef4ff; color: #1d63ff; }
.veh-badge.type-bike { background: #fff7ed; color: #c2410c; }
.veh-badge.type-scooter { background: #f0fdf4; color: #15803d; }
.veh-badge.type-truck { background: #f8fafc; color: #334155; }
.veh-badge.type-other { background: #f1f5f9; color: #475569; }

.sync-result-section {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
}

.sync-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.sync-item:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .veh-toolbar-row {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .veh-toolbar-actions {
    width: 100%;
  }
  .veh-toolbar-filters,
  .veh-filter-group,
  .veh-action-group {
    width: 100%;
  }
  .veh-filter-group,
  .veh-action-group {
    justify-content: stretch;
  }
  .veh-action-group {
    min-width: 0;
  }
  .veh-toolbar-actions .btn-sync,
  .veh-toolbar-actions .btn,
  .veh-toolbar-actions select,
  .veh-toolbar-actions .form-check {
    width: 100%;
  }
  .tower-card {
    min-height: 150px;
  }
}