/* ═══════════════════════════════════════════════
   Fleet Management Platform – Custom Stylesheet
   ═══════════════════════════════════════════════ */

:root {
  --sidebar-width: 230px;
  --sidebar-bg: #1a2235;
  --sidebar-text: #a9b5c8;
  --sidebar-active-bg: #2563eb;
  --sidebar-active-text: #fff;
  --topbar-h: 56px;
  --topbar-bg: #fff;
  --topbar-border: #e5e7eb;
  --body-bg: #f0f4fa;
  --card-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ── Layout ── */
body { background: var(--body-bg); margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; }

/* ── Banner images ── */
.sidebar-banner-img {
  width: 100%;
  max-width: 200px;
  max-height: 72px;
  object-fit: contain;
  border-radius: 8px;
  padding: 4px 8px;
}
.topbar-banner-img {
  height: 32px;
  max-width: 120px;
  object-fit: contain;
  border-radius: 4px;
}
/* Hide topbar banner when sidebar is expanded (not needed alongside sidebar banner) */
@media (min-width: 768px) {
  .topbar-banner-img { display: none !important; }
}

.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  transition: width .25s ease;
  z-index: 1040;
  overflow: hidden;
}
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .sidebar-footer { opacity: 0; pointer-events: none; }

.sidebar-brand { color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-nav .nav-link {
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
  transition: background .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.sidebar-nav .nav-link i { font-size: 1.1rem; flex-shrink: 0; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }

.main-wrapper {
  margin-left: var(--sidebar-width);
  transition: margin-left .25s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-wrapper.expanded { margin-left: 64px; }

.topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  /* iPhone notch/safe area */
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
}

.page-content { flex: 1; }

/* ── KPI Cards ── */
.kpi-card {
  background: #fff;
  border-radius: 12px;
  padding: .85rem 1rem;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: transform .15s;
}
.kpi-card:hover { transform: translateY(-2px); }
.kpi-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.kpi-value { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.kpi-label { font-size: .72rem; color: #6b7280; margin-top: 2px; }

/* ── Standard Cards ── */
.card { border: none; border-radius: 12px; box-shadow: var(--card-shadow); }
.card-header { border-bottom: 1px solid #f3f4f6; background: #fff; border-radius: 12px 12px 0 0 !important; }

/* ── Status Badges ── */
.badge-status { font-size: .72rem; padding: .32em .65em; border-radius: 6px; font-weight: 600; }
.status-A, .status-active    { background: #d1fae5; color: #065f46; }
.status-I, .status-inactive  { background: #f3f4f6; color: #6b7280; }
.status-M, .status-maint     { background: #fef3c7; color: #92400e; }
.status-D, .status-disposed  { background: #fee2e2; color: #991b1b; }
.status-P, .status-pending   { background: #e0f2fe; color: #0369a1; }
.status-O, .status-ongoing   { background: #ede9fe; color: #5b21b6; }
.status-C, .status-completed { background: #dcfce7; color: #166534; }
.status-X, .status-cancelled { background: #fee2e2; color: #991b1b; }

/* Alert levels */
.alert-EXPIRED  { background: #fee2e2; color: #991b1b; }
.alert-CRITICAL { background: #fef3c7; color: #92400e; }
.alert-WARNING  { background: #fefce8; color: #713f12; }
.alert-OK       { background: #d1fae5; color: #065f46; }

/* ── Tables ── */
.table { --bs-table-bg: transparent; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 600; }
.table td { font-size: .875rem; vertical-align: middle; }
.table-hover > tbody > tr:hover { background: #f8faff; }

/* ── DataTables overrides ── */
div.dataTables_wrapper div.dataTables_filter input { border-radius: 8px; }
div.dataTables_wrapper div.dataTables_length select { border-radius: 8px; }

/* ── Forms ── */
.form-label { font-size: .825rem; font-weight: 500; color: #374151; }
.form-control, .form-select {
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ── Buttons ── */
.btn { border-radius: 8px; font-size: .875rem; }
.btn-sm { border-radius: 6px; font-size: .8rem; }

/* ── Expiry indicator ── */
.expiry-bar { height: 4px; border-radius: 2px; background: #e5e7eb; }
.expiry-fill { height: 100%; border-radius: 2px; }

/* ── Chart containers ── */
.chart-container { position: relative; }

/* ── Toast ── */
.toast { border-radius: 10px; }

/* ── Loading skeleton ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  height: 18px;
  display: block;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ── Overlay (always hidden by default, shown on mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.45);
  z-index: 1049;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active {
  display: block;
  pointer-events: auto;
  cursor: pointer;
}

/* ── Responsive ── */

/* Tablet (576–991px): sidebar collapses to icon strip */
@media (max-width: 991px) {
  .sidebar { width: 64px; }
  .sidebar .brand-text,
  .sidebar .nav-link span,
  .sidebar .sidebar-footer { opacity: 0; pointer-events: none; }
  .main-wrapper { margin-left: 64px; }
}

/* Mobile (<576px): sidebar slides in as drawer overlay */
@media (max-width: 575px) {
  .sidebar {
    width: 220px !important;
    transform: translateX(-100%);
    transition: transform .25s ease !important;
    z-index: 1050;
  }
  .sidebar .brand-text,
  .sidebar .nav-link span,
  .sidebar .sidebar-footer {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .sidebar.mobile-open { transform: translateX(0) !important; }

  .main-wrapper { margin-left: 0 !important; }

  /* Topbar — account for iPhone side notch in landscape */
  .topbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  /* Page content — account for iPhone home indicator */
  .page-content {
    padding: .75rem !important;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
  }

  /* Topbar */
  .topbar #page-title { font-size: 1rem; }

  /* Sidebar nav links: bigger tap targets on mobile */
  .sidebar-nav .nav-link { padding: .75rem; font-size: 1rem; gap: .75rem; }
  .sidebar-nav .nav-link i { font-size: 1.3rem; }

  /* KPI cards — 2 per row */
  .kpi-card { padding: .75rem .9rem; }
  .kpi-value { font-size: 1.15rem; }
  .kpi-icon { width: 38px; height: 38px; font-size: 1rem; }

  /* Tables scroll horizontally */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table td, .table th { white-space: nowrap; font-size: .8rem; }

  /* Modal full-screen */
  .modal-dialog { margin: 0 !important; max-width: 100% !important; min-height: 100vh; }
  .modal-content { border-radius: 0 !important; min-height: 100vh; }

  /* Filter bar inputs stack */
  .card.mb-3 .row.g-2 > div { flex: 0 0 100%; max-width: 100%; }
  .card.mb-3 .row.g-2 .ms-auto { margin-left: 0 !important; }

  /* DataTables controls */
  .dataTables_wrapper .d-flex.justify-content-between { flex-direction: column; gap: .4rem; }
}

/* ── Tax Quarterly Mobile Cards ── */
#taxMobileCards .card,
#tripsMobileCards .card,
#expiryMobileCards .card {
  border-radius: 10px;
  transition: transform .12s;
}
#taxMobileCards .card:active,
#tripsMobileCards .card:active,
#expiryMobileCards .card:active {
  transform: scale(.98);
}

/* Quarter button group on small screens */
@media (max-width: 575px) {
  #qBtnGroup .btn {
    padding: .35rem .75rem;
    font-size: .82rem;
    font-weight: 600;
  }
}

/* ── Tracking Page ── */
.tracking-shell {
  height: auto;
}

.tracking-map {
  height: 360px;
  min-height: 220px;
}

.tracking-mobile-card {
  border-radius: 12px;
}

.tracking-search-group {
  min-width: 240px;
}

.tracking-content,
.tracking-map-pane {
  overflow: hidden;
}

#tabGeofence,
#tabAlerts {
  overflow-y: auto;
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: rgba(37, 99, 235, 0.16);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: #2563eb;
  color: #fff;
  font-weight: 700;
}

/* Mobile tracking layout */
@media (max-width: 575px) {
  .tracking-shell {
    height: auto;
    min-height: 0;
  }

  .tracking-shell .card-header {
    padding: .5rem .75rem !important;
  }

  .tracking-shell .card-header .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .tracking-shell .card-header .nav-link {
    white-space: nowrap;
    font-size: .82rem;
    padding: .45rem .7rem;
  }

  .tracking-toolbar {
    padding: .65rem .75rem !important;
    align-items: stretch !important;
  }

  .tracking-toolbar > div {
    width: 100%;
  }

  .tracking-toolbar .form-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .tracking-search-group {
    width: 100%;
    min-width: 0;
  }

  .tracking-actions {
    justify-content: space-between;
    width: 100%;
  }

  .tracking-map {
    height: 220px;
    min-height: 180px;
  }

  .tracking-list {
    max-height: none !important;
  }

  .leaflet-control-layers {
    font-size: .8rem;
  }

  .leaflet-control-layers-expanded {
    padding: 8px 10px;
  }

  .leaflet-popup-content {
    margin: 10px 12px;
    min-width: 180px;
  }

  #tabGeofence .row.g-2 > div,
  #geoFormArea .row.g-2 > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
}