/* ==========================================================================
   RideAdmin — shared stylesheet
   Utility classes that Tailwind's CDN build can't express via inline classes:
   glassmorphism, custom scrollbars, skeleton shimmer, map illustration, etc.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- custom scrollbar ---------- */
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #334155; }

/* ---------- glassmorphism ---------- */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.dark .glass {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(229, 231, 235, 0.8);
}
.dark .glass-panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.6);
}

/* Frosted chip for use on surfaces that are always dark regardless of site theme
   (e.g. the sign-in branding panel) — unlike .glass, this doesn't flip with .dark */
.glass-dark {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- premium grain texture (hero / branding panels) ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- gradient cards ---------- */
.grad-primary { background: linear-gradient(135deg, #F4C820 0%, #ECB301 55%, #C29001 100%); }
.grad-secondary { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); }
.grad-accent { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
.grad-danger { background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%); }
.grad-dark { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); }

/* ---------- skeleton shimmer ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #E5E7EB;
  border-radius: 0.5rem;
}
.dark .skeleton { background: #1E293B; }
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shimmer 1.6s infinite;
}
.dark .skeleton::after {
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- live status dot ---------- */
.status-dot { position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 999px; }
.status-dot.online { background: #22C55E; }
.status-dot.online::after {
  content: ""; position: absolute; inset: -3px; border-radius: 999px;
  border: 2px solid #22C55E; animation: pingdot 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pingdot { 75%,100% { transform: scale(1.8); opacity: 0; } }
.status-dot.busy { background: #F59E0B; }
.status-dot.offline { background: #94A3B8; }

/* ---------- sidebar collapse transition ---------- */
#sidebar { transition: width .25s ease; }
.sidebar-label { transition: opacity .15s ease, width .15s ease; white-space: nowrap; }

/* ---------- fancy focus ring ---------- */
:focus-visible { outline: 2px solid #ECB301; outline-offset: 2px; }

/* ---------- mock map illustration (Live Tracking) ---------- */
.map-canvas {
  background-color: #E8EEF3;
  background-image:
    linear-gradient(rgba(148,163,184,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.35) 1px, transparent 1px);
  background-size: 32px 32px;
  position: relative;
  overflow: hidden;
}
.dark .map-canvas {
  background-color: #0B1220;
  background-image:
    linear-gradient(rgba(51,65,85,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,65,85,.5) 1px, transparent 1px);
}
.map-road {
  position: absolute;
  background: #CBD5E1;
  border-radius: 999px;
}
.dark .map-road { background: #1E293B; }
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
}
.map-route-dash {
  stroke-dasharray: 8 6;
  animation: dashmove 1.6s linear infinite;
}
@keyframes dashmove { to { stroke-dashoffset: -28; } }

/* ---------- print (invoices) ---------- */
@media print {
  #sidebar, #header, #fab, .no-print { display: none !important; }
  body { background: #fff !important; }
}

/* ---------- shared component classes (cards, badges, KPIs) ---------- */
.card-base {
  background:#fff; border-radius:1rem; border:1px solid #E5E7EB;
  box-shadow:0 1px 2px 0 rgba(15,23,42,.04), 0 10px 24px -18px rgba(15,23,42,.10);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.card-base:hover {
  box-shadow:0 1px 2px 0 rgba(15,23,42,.05), 0 16px 32px -16px rgba(15,23,42,.14);
  border-color:#D8DEE8;
}
.dark .card-base { background:#0F172A; border-color:#1E293B; }
.dark .card-base:hover { border-color:#26344A; box-shadow:0 1px 2px 0 rgba(0,0,0,.2), 0 16px 32px -16px rgba(0,0,0,.5); }

.kpi-card {
  background:#fff; border:1px solid #E5E7EB; border-radius:1rem; padding:1.1rem;
  position:relative; overflow:hidden;
  box-shadow:0 1px 2px 0 rgba(15,23,42,.04), 0 10px 24px -18px rgba(15,23,42,.10);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.kpi-card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:2.5px;
  background:linear-gradient(90deg, rgba(236,179,1,.75), rgba(37,99,235,.55), rgba(34,197,94,.6));
  opacity:0; transition:opacity .25s ease;
}
.kpi-card:hover { transform:translateY(-2px); border-color:#D8DEE8; box-shadow:0 16px 32px -16px rgba(15,23,42,.16); }
.kpi-card:hover::before { opacity:1; }
.dark .kpi-card { background:#0F172A; border-color:#1E293B; }
.dark .kpi-card:hover { border-color:#26344A; box-shadow:0 16px 32px -16px rgba(0,0,0,.55); }
.kpi-icon {
  width:2.25rem; height:2.25rem; border-radius:.65rem; display:grid; place-items:center;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.55);
}
.dark .kpi-icon { box-shadow: inset 0 1px 0 0 rgba(255,255,255,.07); }
.kpi-value { font-family:'Poppins',sans-serif; font-size:1.5rem; font-weight:600; margin-top:.75rem; color:#111827; font-variant-numeric: tabular-nums; }
.dark .kpi-value { color:#F8FAFC; }
.kpi-label { font-size:.8rem; color:#64748B; margin-top:.15rem; }
.kpi-trend { font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; }
.kpi-trend.up { background:rgba(34,197,94,.12); color:#16A34A; }
.kpi-trend.down { background:rgba(239,68,68,.12); color:#EF4444; }

.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.badge::before { content:""; width:.35rem; height:.35rem; border-radius:999px; background:currentColor; opacity:.75; flex-shrink:0; }
.badge-success { background:rgba(34,197,94,.12); color:#16A34A; border-color:rgba(34,197,94,.18); }
.badge-warning { background:rgba(245,158,11,.12); color:#B45309; border-color:rgba(245,158,11,.18); }
.dark .badge-warning { color:#FBBF24; }
.badge-danger { background:rgba(239,68,68,.12); color:#DC2626; border-color:rgba(239,68,68,.18); }
.dark .badge-danger { color:#F87171; }
.badge-secondary { background:rgba(37,99,235,.12); color:#2563EB; border-color:rgba(37,99,235,.18); }
.dark .badge-secondary { color:#60A5FA; }
.badge-neutral { background:rgba(100,116,139,.12); color:#475569; border-color:rgba(100,116,139,.18); }
.dark .badge-neutral { color:#94A3B8; }
.badge-gold { background:rgba(184,145,47,.14); color:#977324; border-color:rgba(184,145,47,.24); }
.dark .badge-gold { color:#DEBE6C; }

.quick-action { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding:.85rem; border-radius:.75rem; border:1px solid #E5E7EB; font-size:.8rem; font-weight:600; color:#111827; transition:border-color .15s ease, background-color .15s ease, transform .15s ease; }
.dark .quick-action { border-color:#1E293B; color:#F1F5F9; }
.quick-action:hover { border-color:#ECB301; background:rgba(236,179,1,.08); transform:translateY(-1px); }

.form-input { width:100%; padding:.6rem .85rem; font-size:.875rem; border-radius:.6rem; border:1px solid #E5E7EB; background:#fff; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.form-input::placeholder { color:#94A3B8; }
.dark .form-input { background:#0F172A; border-color:#334155; color:#F1F5F9; }
.form-input:focus { border-color:#ECB301; box-shadow: inset 0 1px 2px 0 rgba(15,23,42,.04), 0 0 0 3px rgba(236,179,1,.2); }
.form-label { display:block; font-size:.8rem; font-weight:600; color:#374151; margin-bottom:.35rem; }
.dark .form-label { color:#CBD5E1; }

.th-cell { padding:.75rem 1.25rem; text-align:left; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#94A3B8; }
.td-cell { padding:.85rem 1.25rem; font-size:.875rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-size:.825rem; font-weight:600; padding:.55rem 1rem; border-radius:.65rem; transition:all .18s ease; }
.btn-primary { background:linear-gradient(135deg, #F4C820 0%, #ECB301 100%); color:#0F172A; box-shadow:0 1px 2px 0 rgba(15,23,42,.06), 0 0 0 3px rgba(236,179,1,.2); }
.btn-primary:hover { background:linear-gradient(135deg, #F9DB4D 0%, #DEA401 100%); box-shadow:0 8px 18px -6px rgba(236,179,1,.55), 0 0 0 3px rgba(236,179,1,.2); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

/* Shimmer sweep micro-interaction, e.g. hero CTAs */
.btn-shimmer { position:relative; overflow:hidden; }
.btn-shimmer::after {
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .65s ease;
}
.btn-shimmer:hover::after { left:130%; }
.btn-outline { border:1px solid #E5E7EB; color:#111827; background:#fff; }
.dark .btn-outline { border-color:#334155; color:#F1F5F9; background:transparent; }
.btn-outline:hover { background:#F8FAFC; border-color:#D8DEE8; }
.dark .btn-outline:hover { background:#1E293B; border-color:#334155; }

.row-action { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.5rem; color:#64748B; }
.row-action:hover { background:#F1F5F9; color:#C29001; }
.dark .row-action:hover { background:#1E293B; }
.page-btn { display:grid; place-items:center; min-width:2rem; height:2rem; padding:0 .4rem; border-radius:.5rem; font-size:.8rem; font-weight:500; color:#475569; }
.dark .page-btn { color:#94A3B8; }
.page-btn:hover { background:#F1F5F9; }
.dark .page-btn:hover { background:#1E293B; }
.page-btn-active { background:#ECB301 !important; color:#0F172A !important; }

.tab-btn { font-size:.8rem; font-weight:600; padding:.5rem 1rem; border-radius:.6rem; white-space:nowrap; }

/* ---------- CSS-only tooltip: <span data-tooltip="Text"> ---------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #0F172A; color: #F8FAFC; font-size: .7rem; font-weight: 500; white-space: nowrap;
  padding: .35rem .6rem; border-radius: .4rem; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 40;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

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

/* ==========================================================================
   Component styles lifted from per-page <style> blocks in the original HTML
   (kept verbatim so the React build renders identically).
   ========================================================================== */

/* --- partials/sidebar.html --- */
.nav-link { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:.65rem; font-size:.875rem; color:#CBD5E1; transition:background-color .15s ease, color .15s ease; }
.nav-link:hover { background-color:#1E293B; color:#fff; }
.nav-link[aria-current="page"] { background:linear-gradient(90deg, rgba(236,179,1,.26), rgba(236,179,1,.08)); color:#fff; font-weight:600; box-shadow: inset 2px 0 0 0 #ECB301; }

.topnav-link { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .75rem; border-radius:.6rem; font-size:.84rem; font-weight:500; color:#CBD5E1; white-space:nowrap; transition:background-color .15s ease, color .15s ease; }
.topnav-link:hover { background-color:rgba(255,255,255,.08); color:#fff; }
.topnav-link[aria-current="page"], .topnav-link.topnav-active {
  background:linear-gradient(135deg, rgba(236,179,1,.34), rgba(236,179,1,.14));
  color:#fff; box-shadow: inset 0 0 0 1px rgba(236,179,1,.4);
}

/* --- partials/header.html --- */
.dropdown-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; font-size:.825rem; color:#374151; margin:0 .35rem; border-radius:.5rem; width:calc(100% - .7rem); transition:background-color .15s ease, color .15s ease; }
.dark .dropdown-item { color:#CBD5E1; }
.dropdown-item:hover { background-color:rgba(236,179,1,.12); color:#8F6A01; }
.dark .dropdown-item:hover { background-color:rgba(236,179,1,.16); color:#F4C820; }
.dropdown-item.text-danger:hover { background-color:rgba(239,68,68,.08); color:#DC2626; }

/* --- auth/otp-verification.html --- */
.otp-box{ width:2.75rem; height:3.25rem; text-align:center; font-size:1.25rem; font-weight:600; border-radius:.65rem; border:1px solid #E5E7EB; background:#fff; }
.dark .otp-box{ border-color:#334155; background:#0F172A; color:#F1F5F9; }
.otp-box:focus{ outline:none; border-color:#ECB301; box-shadow:0 0 0 3px rgba(236,179,1,.25); }

/* --- pages/tracking/live-tracking.html --- */
.live-item{ display:flex; align-items:center; gap:.65rem; width:100%; padding:.6rem 1rem; text-align:left; }
.live-item:hover{ background:#F8FAFC; }
.dark .live-item:hover{ background:#1E293B; }
.map-ctrl{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.6rem; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); color:#475569; }
.dark .map-ctrl{ background:#1E293B; color:#CBD5E1; }

/* --- pages/support/live-chat.html --- */
.chat-item{ display:flex; align-items:center; gap:.65rem; width:100%; padding:.85rem 1rem; text-align:left; }
.chat-item:hover{ background:#F8FAFC; }
.dark .chat-item:hover{ background:#1E293B; }

/* --- pages/reports/reports.html --- */
.report-card{ background:#fff; border:1px solid #E5E7EB; border-radius:1rem; padding:1.25rem; }
.dark .report-card{ background:#0F172A; border-color:#1E293B; }
.mini-export{ font-size:.7rem; font-weight:600; padding:.3rem .7rem; border-radius:.5rem; border:1px solid #E5E7EB; color:#475569; }
.dark .mini-export{ border-color:#334155; color:#CBD5E1; }
.mini-export:hover{ border-color:#ECB301; color:#8F6A01; }

/* --- pages/settings/settings.html --- */
.settings-nav-item{ display:flex; align-items:center; gap:.65rem; width:100%; text-align:left; font-size:.825rem; font-weight:600; padding:.65rem .85rem; border-radius:.65rem; margin-bottom:.15rem; }

/* --- pages/settings/roles-permissions.html --- */
.perm-check{ width:1.15rem; height:1.15rem; border-radius:.35rem; accent-color:#ECB301; }

/* --- pages/notifications/notifications.html --- */
.channel-chip{ cursor:pointer; }
.channel-chip span{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; padding:.5rem 1rem; border-radius:999px; border:1px solid #E5E7EB; color:#475569; }
.dark .channel-chip span{ border-color:#334155; color:#CBD5E1; }

/* --- pages/ui-kit/components.html --- */
.section-title{ font-family:'Poppins',sans-serif; font-weight:600; font-size:1.1rem; color:#111827; border-bottom:1px solid #E5E7EB; padding-bottom:.6rem; }
.dark .section-title{ color:#F8FAFC; border-color:#1E293B; }
.swatch{ height:5rem; border-radius:.75rem; display:flex; align-items:flex-end; padding:.5rem .65rem; font-size:.7rem; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); }