/* ============================================================
   FLEETPRO - Vehicle Information & Maintenance Management
   Professional fleet-management dashboard theme
   Light / Dark via Bootstrap 5.3 color modes (data-bs-theme)
   ============================================================ */

:root {
  --sidebar-width: 250px;
  --sidebar-bg: #0f1b2d;
  --sidebar-bg-dark: #0b1420;
  --sidebar-text: #aab8cc;
  --sidebar-active: #2563eb;
  --topbar-h: 60px;
  --radius: 0.6rem;
}

/* ---------------- Layout ---------------- */
html, body { height: 100%; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: #f1f5f9; }

.app-wrapper { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, #13233a 100%);
  color: var(--sidebar-text);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
}
.sidebar-brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.1rem;
  color: #fff; font-weight: 700; font-size: 1.02rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand i { font-size: 1.5rem; color: #60a5fa; }
.brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .6rem; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }

.sidebar .nav-section {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: #64748b; padding: .9rem .7rem .35rem; font-weight: 600;
}
.sidebar .nav-link {
  display: flex; align-items: center; gap: .7rem;
  color: var(--sidebar-text); padding: .55rem .75rem; border-radius: .5rem;
  margin-bottom: 2px; font-size: .92rem; text-decoration: none;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: #fff; background: var(--sidebar-active); box-shadow: 0 4px 12px rgba(37,99,235,.35); }

.sidebar-footer { padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-footer .btn { display: flex; align-items: center; justify-content: center; gap: .4rem; }

.sidebar-backdrop { display: none; }

/* Main column */
.main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  height: var(--topbar-h);
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.25rem;
  position: sticky; top: 0; z-index: 1030;
}
.topbar-title .breadcrumb-item { color: var(--bs-secondary-color); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sidebar-active); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}

.content { flex: 1; padding: 1.4rem 1.4rem 1rem; }

/* Sidebar collapsed (desktop) */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-width)); }
  body.sidebar-collapsed .main { margin-left: 0; }
}
/* Mobile off-canvas */
@media (max-width: 991.98px) {
  .sidebar { margin-left: calc(-1 * var(--sidebar-width)); }
  .main { margin-left: 0; }
  body.sidebar-open .sidebar { margin-left: 0; }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1039; background: rgba(0,0,0,.5);
  }
}

/* ---------------- Cards ---------------- */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color); font-weight: 600; }

.stat-card { overflow: hidden; position: relative; }
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.stat-card .stat-label { color: var(--bs-secondary-color); font-size: .82rem; }
.stat-card .stat-trend { font-size: .75rem; }

/* ---------------- Tables ---------------- */
.table thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--bs-secondary-color); border-bottom-width: 1px; white-space: nowrap;
}
.table td { vertical-align: middle; font-size: .9rem; }

/* Abnormal highlight for fuel */
tr.row-abnormal { background: rgba(220,53,69,.12) !important; }

/* ---------------- Buttons ---------------- */
.btn-primary { background: var(--sidebar-active); border-color: var(--sidebar-active); }

/* ---------------- Forms ---------------- */
.form-label { font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.form-control, .form-select { border-radius: .5rem; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); border-color: var(--sidebar-active); }

.required::after { content: " *"; color: #dc3545; }

/* ---------------- Misc ---------------- */
.tire-slot {
  border: 1px dashed var(--bs-border-color);
  border-radius: .6rem; padding: .7rem; text-align: center;
  background: var(--bs-body-bg);
  transition: all .15s ease;
}
.tire-slot.occupied { border-style: solid; border-color: var(--bs-success-border-subtle); background: var(--bs-success-bg-subtle); }
.tire-slot .tire-name { font-weight: 600; font-size: .8rem; }
.tire-slot .tire-serial { font-size: .72rem; color: var(--bs-secondary-color); }

/* Tire layout axis view: left/right sides separated by an axle centerline */
.tire-axis { display: flex; align-items: stretch; gap: 0; }
.tire-axis .tire-side { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 0; min-width: 0; }
.tire-axis .tire-side > .col-6 { flex: 1 1 0; min-width: 0; }
.tire-gap {
  flex: 0 0 1.5rem;
  margin: 0 .25rem;
  border-left: 2px dashed var(--bs-secondary-color);
  border-right: 2px dashed var(--bs-secondary-color);
  opacity: .5;
}

.img-thumb-preview { max-width: 120px; max-height: 90px; border-radius: .4rem; object-fit: cover; }

/* AdSense popup ad */
.adsense-popup {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  width: min(360px, calc(100vw - 2rem));
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.18);
  padding: .6rem .8rem .8rem;
}
.adsense-popup .adsense-close {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 1.4rem;
  height: 1.4rem;
  font-size: .75rem;
  background: var(--bs-secondary-color);
  border-radius: 50%;
  opacity: .85;
}
.adsense-popup .adsense-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bs-secondary-color);
  margin-bottom: .35rem;
  padding-right: 1.5rem;
}
.adsense-popup .adsense-popup-ad { min-height: 60px; }
.adsense-popup .adsense-popup-ad .adsbygoogle {
  border: 1px dashed var(--bs-border-color);
  border-radius: .4rem;
  background: var(--bs-secondary-bg);
  min-height: 60px;
}

.dt-buttons .btn { padding: .25rem .6rem; font-size: .75rem; }

/* KPI alert chips */
.alert-chip { font-size: .75rem; padding: .2rem .55rem; border-radius: 2rem; }

@media print {
  .sidebar, .topbar, footer, .dt-buttons, .no-print { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff !important; }
}