:root {
  --brand-1: #ff6b35;
  --brand-2: #ffa41b;
  --brand-3: #2ec4b6;
  --accent: #ffd166;
  --accent-2: #22c55e;
  --bg: #fffdf6;
}
body { background: var(--bg); font-family: "Segoe UI", system-ui, sans-serif; }
.navbar-brand { font-weight: 800; letter-spacing: .5px; }
.topbar {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.topstrip { background: #fff3d6; color: #92400e; font-size: .75rem; border-bottom: 2px solid #ffd166; }
.topstrip a { color: #c2410c; text-decoration: none; font-weight: 700; }
.navbar-brand .logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: #fff; font-size: 1.3rem; margin-right: 8px; vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.brand-tag { display: block; font-size: .62rem; font-weight: 700; letter-spacing: 2px; color: #7c2d12; }
.navbar-brand .logo-badge img, footer.app-foot .foot-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.topbar .btn.active { background: var(--accent); border-color: var(--accent); color: #1f2937; font-weight: 700; }
footer.app-foot { background: linear-gradient(135deg, #0ea5e9, #2ec4b6); color: #fff; margin-top: 30px; }
body.admin-app footer.app-foot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; box-shadow: 0 -2px 12px rgba(0,0,0,.18); margin-top: 0; }
footer.app-foot .container { padding-top: 10px !important; padding-bottom: 10px !important; }
footer.app-foot .row { --bs-gutter-y: .4rem; }
footer.app-foot p { margin-bottom: 4px; }
footer.app-foot .bottom-bar { margin-top: 8px; padding-top: 8px; }
footer.app-foot h6 { color: #fff; font-weight: 800; margin-bottom: 10px; }
footer.app-foot a { color: #fff; text-decoration: none; }
footer.app-foot a:hover { color: #fef3c7; text-decoration: underline; }
footer.app-foot p, footer.app-foot span { color: #f0fdff; }
footer.app-foot .bottom-bar { border-top: 1px solid rgba(255,255,255,.35); margin-top: 16px; padding-top: 12px; font-size: .78rem; color: #fff; }
.topbar .btn { border-radius: 20px; margin: 2px 1px; font-size: .8rem; }
.hero {
  background: linear-gradient(120deg, #ff6b35 0%, #ffa41b 55%, #ffd166 100%);
  color: #fff; border-radius: 16px; padding: 28px;
  box-shadow: 0 6px 24px rgba(255,107,53,.35); text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.hero h2 { font-weight: 800; }
.stat-card {
  border: 0; border-radius: 14px; color: #fff; overflow: hidden; position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .15s;
}
.stat-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%);
}
.stat-card .card-body { padding: 14px 16px; position: relative; }
.stat-card:hover { transform: translateY(-3px); }
.stat-card h3 { font-weight: 800; margin: 0; position: relative; }
.stat-card small { opacity: .85; text-transform: uppercase; letter-spacing: .5px; font-size: .68rem; position: relative; }
.bg-total { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%); }
.bg-avail { background: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%); }
.bg-booked { background: linear-gradient(135deg, #d97706 0%, #f59e0b 55%, #fbbf24 100%); }
.bg-rented { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 55%, #22d3ee 100%); }
.bg-maint { background: linear-gradient(135deg, #9333ea 0%, #a855f7 55%, #e879f9 100%); }
.bg-damage { background: linear-gradient(135deg, #be123c 0%, #f43f5e 55%, #fb7185 100%); }
.bg-rev { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #2dd4bf 100%); }
.vehicle-card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: transform .15s; }
.vehicle-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.vehicle-photo {
  height: 150px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2ec4b6, #0ea5e9);
  color: #fff; font-size: 3rem; font-weight: 800;
}
.vehicle-photo img { width: 100%; height: 150px; object-fit: cover; }
.price { font-size: 1.15rem; font-weight: 800; color: #0f766e; }
.section-card { border: 0; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.section-card .card-header { background: #fff; font-weight: 700; border-bottom: 2px solid #f1f5f9; border-radius: 14px 14px 0 0 !important; }

/* ---- Home: Hero ---- */
.hero-home { position: relative; overflow: hidden; }
.hero-home::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.hero-home h2 { font-weight: 800; position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5);
  color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: 1px;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 14px; text-transform: uppercase;
}
.hero-sub { font-size: 1.02rem; max-width: 460px; opacity: .95; }
.hero-cta .btn { border-radius: 30px; }
.hero-search-card {
  background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.18);
  padding: 18px; color: #1f2937; text-shadow: none;
}
.hero-search-head { font-weight: 800; margin-bottom: 12px; color: #0f172a; }
.hero-stats { display: flex; gap: 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2f7; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b { font-size: 1.4rem; color: #0f766e; line-height: 1; }
.hero-stats span { font-size: .74rem; color: #64748b; margin-top: 2px; }
.hero-cta-block h4 { font-weight: 800; }
/* ---- Home: Feature cards ---- */
.feature-card { border: 0; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.07); transition: transform .15s, box-shadow .15s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.feature-icon {
  width: 58px; height: 58px; margin: 0 auto 10px; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg, #fff3e6, #ffe6cc);
  box-shadow: inset 0 0 0 2px #ffd9b3;
}
/* ---- Home: Katalog badges & tombol ---- */
.vehicle-photo { position: relative; }
.photo-pill { position: absolute; top: 10px; right: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.btn-warning-outline {
  border: 1.5px solid var(--brand-1); color: #c2410c; background: transparent;
  font-weight: 600; border-radius: 10px; transition: all .15s;
}
.btn-warning-outline:hover { background: var(--brand-1); color: #fff; border-color: var(--brand-1); }
/* ---- Home: Steps ---- */
.step { position: relative; }
.step-num {
  width: 46px; height: 46px; margin: 0 auto 8px; font-weight: 800; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(255,107,53,.35);
}
/* ---- Portal: section heading dot ---- */
.section-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); display: inline-block; }
.stat-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
/* ---- Portal: area tanda tangan digital ---- */
.sign-wrap { border: 2px dashed #d1d5db; border-radius: 12px; padding: 6px; background: #fff; max-width: 100%; }
.sign-wrap canvas { width: 100%; height: 180px; display: block; cursor: crosshair; touch-action: none; border-radius: 8px; }
.sign-actions { display: flex; gap: 6px; margin-top: 8px; }
.table thead th { background: #0d9488; color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; }
.table { background: #fff; border-radius: 0 0 12px 12px; overflow: hidden; }
.auth-wrap { max-width: 440px; margin: 40px auto; }
.auth-card { border: 0; border-radius: 16px; box-shadow: 0 10px 30px rgba(15,32,39,.2); overflow: hidden; }
.auth-card .auth-head { background: linear-gradient(135deg, #ff6b35, #ffa41b); color: #fff; padding: 22px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.rental-card { border: 0; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.08); border-left: 6px solid var(--accent-2); }
.rental-card.pending { border-left-color: var(--accent); }
.status-pill { font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.st-PENDING_PAYMENT, .st-UNVERIFIED { background: #fef3c7; color: #92400e; }
.st-WAITING_VERIFICATION { background: #ffedd5; color: #9a3412; }
.st-CONFIRMED, .st-VERIFIED, .st-AVAILABLE { background: #dcfce7; color: #166534; }
.st-ACTIVE, .st-RENTED { background: #dbeafe; color: #1e40af; }
.st-COMPLETED { background: #f1f5f9; color: #475569; }
.st-CANCELLED, .st-REJECTED, .st-BLACKLIST, .st-DAMAGED { background: #fee2e2; color: #991b1b; }
.st-BOOKED { background: #fef3c7; color: #92400e; }
.st-MAINTENANCE, .st-INSPECTION { background: #ede9fe; color: #5b21b6; }
.st-PENDING, .st-QUEUED, .st-SCHEDULED, .st-WAITING_VERIFICATION { background: #ffedd5; color: #9a3412; }
.st-PAID, .st-SENT, .st-DONE, .st-ONLINE { background: #dcfce7; color: #166534; }
.st-FAILED, .st-OFFLINE { background: #fee2e2; color: #991b1b; }
.st-UNKNOWN, .st-IN_PROGRESS { background: #f1f5f9; color: #475569; }
#map { height: 480px; border-radius: 14px; }
footer.app-foot { text-align: center; color: #94a3b8; font-size: .78rem; padding: 22px 0 30px; }
.btn { border-radius: 10px; }
.form-control, .form-select { border-radius: 10px; }
h3.page-title { font-weight: 800; }
h3.page-title small { font-weight: 400; }

/* ---- Tabel: kolom mengisi penuh card di semua layar (desktop & HP) ---- */
.table { width: 100%; }
.table td, .table th { vertical-align: middle; padding: 8px 10px; }
.table tbody tr:nth-child(even), .table tr:nth-child(even) td { background: rgba(15,32,39,.025); }
.table tr:hover td { background: rgba(44,83,100,.07); }
.table thead th, .table tr:first-child th { position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.empty-row td { text-align: center; color: #94a3b8; padding: 18px !important; }

/* ---- Tabel mengisi penuh card: kolom dibagi rata ---- */
.table-fill { display: table !important; width: 100% !important; table-layout: fixed; overflow: visible; }
.table-fill th, .table-fill td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td .btn-sm { white-space: nowrap; }

/* ---- Tablet & HP (<768px) ---- */
@media (max-width: 767.98px) {
  .hero { padding: 20px 16px; border-radius: 12px; }
  .hero h2 { font-size: 1.35rem; }
  .hero .d-flex { flex-direction: column; }
  .hero .btn-lg, .hero .form-control-lg { width: 100%; }
  h3.page-title { font-size: 1.25rem; }
  .stat-card h3 { font-size: 1.3rem; }
  .stat-card small { font-size: .6rem; }
  .vehicle-photo { height: 120px; font-size: 2.2rem; }
  .vehicle-photo img { height: 120px; }
  .price { font-size: 1.05rem; }
  #map { height: 320px; }
  .table { width: 100%; font-size: .82rem; }
  .topbar .btn { font-size: .75rem; padding: 4px 10px; }
  .auth-wrap { margin: 20px auto; padding: 0 12px; }
  .container.py-4 { padding-left: 12px !important; padding-right: 12px !important; }
  .rental-card .btn, .vehicle-card .btn { padding: 10px; }
}

/* ---- HP kecil (<380px): stat 2 kolom tetap, judul mengecil ---- */
@media (max-width: 379.98px) {
  .stat-card h3 { font-size: 1.05rem; }
  .navbar-brand { font-size: 1rem; }
}

/* ---- Cetak invoice bersih ---- */
@media print {
  .topbar, footer.app-foot, .btn { display: none !important; }
  body { background: #fff; }
  .section-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ================= PANEL STAF � LIGHT (body.admin-app) ================= */
body.admin-app { background: #f4f6fb; color: #1f2937; font-size: .92rem; line-height: 1.65; }

/* ---- Navbar ---- */
body.admin-app .topstrip { background: #fff3d6; color: #92400e; border-bottom-color: #ffd166; }
body.admin-app .topbar { background: linear-gradient(135deg, #fff8f0 0%, #ffedcc 60%, #ffd9a8 100%); box-shadow: 0 2px 12px rgba(0,0,0,.15); border-bottom: 2px solid #ffa41b; }
body.admin-app .topbar .btn { font-size: .78rem; padding: 5px 14px; border-color: #f3c47a; color: #7c2d12; font-weight: 600; }
body.admin-app .topbar .btn:hover { background: #fff; border-color: #ffa41b; color: #9a3412; }
body.admin-app .topbar .btn.active { background: #ff6b35; border-color: #ff6b35; color: #fff; font-weight: 700; box-shadow: 0 0 10px rgba(255,107,53,.4); }
body.admin-app .topbar select.btn { background: #fff; border-color: #f3c47a; color: #9a3412; }
body.admin-app .topbar .text-secondary { color: #d99a4e !important; }
body.admin-app .topbar .logo-badge { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
body.admin-app .topbar .brand-tag { color: #c2410c; }

/* ---- Kartu & wadah ---- */
body.admin-app .container.py-4 { max-width: 1200px; padding-top: 1.8rem !important; padding-bottom: 6rem !important; }
body.admin-app .section-card,
body.admin-app .vehicle-card,
body.admin-app .rental-card,
body.admin-app .auth-card {
  background: #fff; color: #1f2937; border: 1px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(15,32,39,.07); border-radius: 14px;
}
body.admin-app .section-card .card-header,
body.admin-app .section-card > .card-header {
  background: #fff; color: #111827; font-weight: 700; font-size: .88rem;
  border-bottom: 2px solid #f3f4f6; border-radius: 14px 14px 0 0 !important;
  padding: 14px 18px; letter-spacing: .3px;
}
body.admin-app .section-card .card-body { padding: 20px; line-height: 1.7; }

/* ---- Stat cards ---- */
body.admin-app .stat-card { box-shadow: 0 6px 18px rgba(15,32,39,.16); }
body.admin-app .stat-card .card-body { padding: 18px 20px; }
body.admin-app .stat-card h3 { font-size: 1.8rem; letter-spacing: -.5px; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
body.admin-app .stat-card small { font-size: .72rem; letter-spacing: .8px; opacity: .95; }

/* ---- Tabel ---- */
body.admin-app .table { background: #fff; color: #1f2937; font-size: .87rem; }
body.admin-app .table thead th {
  background: #0d9488; color: #fff; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; padding: 12px 14px;
  border-bottom: 2px solid #0c7a70;
}
body.admin-app .table tbody td { padding: 12px 14px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
body.admin-app .table tr:nth-child(even) td { background: #f9fafb; }
body.admin-app .table tr:hover td { background: #fff7ed; }
body.admin-app .table .empty-row td { color: #9ca3af; padding: 28px 14px !important; font-style: italic; }
body.admin-app .table code { color: #be123c; background: #fff1f2; }

/* ---- Form ---- */
body.admin-app .form-label { color: #374151; font-weight: 600; font-size: .82rem; margin-bottom: 5px; }
body.admin-app .form-control,
body.admin-app .form-select {
  background: #fff; border: 1px solid #d1d5db; color: #111827;
  border-radius: 10px; padding: 10px 14px; font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
body.admin-app .form-control::placeholder { color: #9ca3af; }
body.admin-app .form-control:focus,
body.admin-app .form-select:focus {
  background: #fff; color: #111827; border-color: #ff8a4c;
  box-shadow: 0 0 0 3px rgba(255,139,76,.2);
}
body.admin-app select.form-control option,
body.admin-app select.form-select option { background: #fff; color: #111827; }

/* ---- Tombol ---- */
body.admin-app .btn-primary { background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 600; }
body.admin-app .btn-primary:hover { background: #4f46e5; border-color: #4f46e5; box-shadow: 0 4px 12px rgba(99,102,241,.3); }
body.admin-app .btn-success { background: #059669; border-color: #059669; }
body.admin-app .btn-success:hover { background: #047857; box-shadow: 0 4px 12px rgba(5,150,105,.3); }
body.admin-app .btn-warning { background: #f59e0b; border-color: #f59e0b; }
body.admin-app .btn-warning:hover { background: #d97706; }
body.admin-app .btn-danger { background: #dc2626; border-color: #dc2626; }
body.admin-app .btn-danger:hover { background: #b91c1c; }
body.admin-app .btn-secondary { background: #6b7280; border-color: #6b7280; color: #fff; }
body.admin-app .btn-secondary:hover { background: #4b5563; }
body.admin-app .btn-outline-primary { border-color: #6366f1; color: #4f46e5; }
body.admin-app .btn-outline-primary:hover { background: #6366f1; border-color: #6366f1; color: #fff; }
body.admin-app .btn-outline-secondary { border-color: #d1d5db; color: #4b5563; }
body.admin-app .btn-outline-secondary:hover { background: #f3f4f6; border-color: #9ca3af; color: #111827; }
body.admin-app .btn-outline-dark { border-color: #9ca3af; color: #1f2937; }
body.admin-app .btn-outline-dark:hover { background: #1f2937; border-color: #1f2937; color: #fff; }
body.admin-app .btn-outline-light { border-color: #f3c47a; color: #7c2d12; }
body.admin-app .btn-outline-light:hover { background: #fff; border-color: #ffa41b; color: #9a3412; }

/* ---- Alert ---- */
body.admin-app .alert { border-radius: 12px; font-size: .87rem; padding: 14px 18px; }
body.admin-app .alert-light { background: #fff; border-color: #e5e7eb; color: #374151; }
body.admin-app .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
body.admin-app .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
body.admin-app .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.admin-app .alert-info { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }

/* ---- Judul, harga, teks ---- */
body.admin-app .page-title { font-size: 1.35rem; font-weight: 800; color: #111827; }
body.admin-app .page-title small { color: #6b7280 !important; font-weight: 400; font-size: .85rem; }
body.admin-app .price { color: #0f766e; font-weight: 800; font-size: 1.2rem; }
body.admin-app .status-pill { font-size: .74rem; padding: 5px 14px; font-weight: 700; letter-spacing: .3px; }
body.admin-app .border-bottom { border-color: #f3f4f6 !important; }
body.admin-app .border-danger { border-color: #dc2626 !important; }
body.admin-app hr { border-color: #e5e7eb; }
body.admin-app .text-muted { color: #6b7280 !important; }
body.admin-app .text-danger { color: #dc2626 !important; }
body.admin-app code { color: #be123c; background: #fff1f2; padding: 2px 6px; border-radius: 4px; }
body.admin-app #map { border: 1px solid #e5e7eb; }

/* ---- Footer ---- */
body.admin-app footer.app-foot { background: linear-gradient(135deg, #0ea5e9, #2ec4b6); }

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  body.admin-app .container.py-4 { padding-top: 1rem !important; }
  body.admin-app .stat-card h3 { font-size: 1.3rem; }
  body.admin-app .stat-card .card-body { padding: 14px 16px; }
  body.admin-app .section-card .card-body { padding: 14px; }
  body.admin-app .table { font-size: .8rem; }
  body.admin-app .topbar .btn { font-size: .72rem; padding: 4px 10px; }
}

/* =====================================================================
   PANEL STAF � LAYOUT GAYA AdminLTE (body.layout-adm)
   Sidebar kiri + topbar. Terang, konsisten dengan tema publik.
   ===================================================================== */
body.layout-adm { background: #f4f6fb; }

/* Brand / gambar admin */
.adm-brand {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px;
  background: linear-gradient(135deg, #ff6b35, #ffa41b);
}
.adm-brand-icon { font-size: 1.7rem; }
.adm-brand-name { font-weight: 800; color: #fff; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.adm-brand-tag { font-size: .6rem; font-weight: 700; letter-spacing: 2.5px; color: #fff3d6; }

/* Sidebar */
.adm-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 1045;
  background: #fff; border-right: 1px solid #e5e7eb;
  display: flex; flex-direction: column;
  box-shadow: 2px 0 12px rgba(15,32,39,.06);
}
.adm-menu {
  flex: 1; overflow-y: auto; padding: 12px 12px 20px; scrollbar-width: thin;
  scrollbar-color: #ff6b35 #f3f4f6;
}
.adm-menu::-webkit-scrollbar { width: 8px; }
.adm-menu::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 8px; }
.adm-menu::-webkit-scrollbar-thumb { background: #ffb38a; border-radius: 8px; }
.adm-menu::-webkit-scrollbar-thumb:hover { background: #ff6b35; }

body.adm-collapsed .adm-menu::-webkit-scrollbar { width: 5px; }
.adm-group {
  font-size: .66rem; font-weight: 800; letter-spacing: 1.5px;
  color: #9ca3af; margin: 16px 8px 6px; text-transform: uppercase;
}
.adm-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  color: #374151; text-decoration: none; border-radius: 10px;
  margin-bottom: 2px; font-weight: 500; font-size: .9rem;
  transition: background .15s, color .15s;
}
.adm-link i { font-size: 1.05rem; width: 22px; text-align: center; color: #6b7280; }
.adm-link:hover { background: #fff7ed; color: #c2410c; }
.adm-link:hover i { color: #ff6b35; }
.adm-link.active { background: #ff6b35; color: #fff; box-shadow: 0 4px 12px rgba(255,107,53,.35); }
.adm-link.active i { color: #fff; }

/* Overlay mobile */
.adm-overlay { display: none; }

/* Main wrapper (di kanan sidebar) */
.adm-main {
  margin-left: 250px; min-height: 100vh;
  display: flex; flex-direction: column;
}

/* Topbar */
.adm-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 22px; position: sticky; top: 0; z-index: 1035;
  background: linear-gradient(135deg, #1e1b4b, #312e81 60%, #0ea5e9);
  box-shadow: 0 2px 12px rgba(30,27,75,.3); color: #fff;
}
#admToggle { border-color: rgba(255,255,255,.5); color: #fff; }
#admToggle:hover { background: rgba(255,255,255,.15); }
.adm-breadcrumb { font-weight: 700; font-size: .95rem; text-transform: capitalize; color:#fff; }
.adm-branch { min-width: 160px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; font-weight: 600; }
.adm-branch option { background: #fff; color: #111827; }
.adm-topbar .btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.adm-topbar .btn-outline-light:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Konten */
.adm-content { flex: 1; padding: 22px; }
.adm-content .container-fluid { max-width: 1280px; margin: 0 auto; }
.adm-footer {
  padding: 12px 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  font-size: .78rem; color: #0f766e;
  background: linear-gradient(135deg, #0ea5e9, #2ec4b6); color: #fff;
}

@media (min-width: 992px) {
  .adm-sidebar { transform: translateX(0); }
  .adm-main { margin-left: 250px; }

  /* Sidebar terlipat jadi ikon saja (toggle desktop) */
  .adm-sidebar { transition: width .25s ease; }
  body.adm-collapsed .adm-sidebar { width: 70px; }
  body.adm-collapsed .adm-main { margin-left: 70px; }
  body.adm-collapsed .adm-brand-txt,
  body.adm-collapsed .adm-link span,
  body.adm-collapsed .adm-group { display: none; }
  body.adm-collapsed .adm-link { justify-content: center; padding: 12px 8px; }
  body.adm-collapsed .adm-link i { width: auto; font-size: 1.2rem; }
  body.adm-collapsed .adm-brand { justify-content: center; padding: 18px 8px; }
}

@media (max-width: 991.98px) {
  .adm-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .adm-main { margin-left: 0; }
  body.adm-open .adm-sidebar { transform: translateX(0); }
  body.adm-open .adm-overlay {
    display: block; position: fixed; inset: 0; z-index: 1040;
    background: rgba(17,24,39,.5);
  }
  .adm-content { padding: 14px; }
}

/* ===== DataTables (tema AdminLTE-like) ===== */
/* Pastikan tabel selebar penuh kartu & ada ruang ke tepi kartu */
.dataTables_wrapper { width: 100%; }
body.admin-app .card-body.p-0 > .dataTables_wrapper,
body.admin-app .card-body.p-0 > .card-header + .dataTables_wrapper,
body.admin-app .card-body .dataTables_wrapper { padding: 16px; }
body.admin-app .dataTables_wrapper table.data-table { width: 100% !important; }

/* Toolbar atas (length + cari) */
body.admin-app .dataTables_wrapper .dt-brand-row { padding: 0; }
body.admin-app .dataTables_wrapper .dataTables_length select.form-select.form-select-sm {
  border-radius: 6px; border: 1px solid #e5e7eb; padding: .3rem .6rem; width: auto; min-width: 70px;
}
body.admin-app .dataTables_wrapper .dataTables_filter input.form-control.form-control-sm {
  border-radius: 6px; border: 1px solid #e5e7eb; padding: .3rem .7rem; width: 220px;
}
body.admin-app .dataTables_wrapper .dataTables_filter label { font-weight: 600; color: #4b5563; }
body.admin-app .dataTables_wrapper .dataTables_length label { font-weight: 600; color: #4b5563; }

/* Info + pagination bawah */
body.admin-app .dataTables_wrapper .dataTables_info { color: #6b7280; font-size: .85rem; }
body.admin-app .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px; padding: .3rem .65rem; margin-left: 3px;
  border: 1px solid #e5e7eb; color: #374151; background: #fff; font-size: .85rem; cursor: pointer;
}
body.admin-app .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #ff6b35; border-color: #ff6b35; color: #fff;
}
body.admin-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #ffedd5; border-color: #fdba74; color: #c2410c;
}
body.admin-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; pointer-events: none; cursor: default; }

/* Tombol export DataTables (di header kartu atau toolbar) */
body.admin-app .section-card > .card-header:has(.dt-actions) {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
body.admin-app .dataTables_wrapper .dt-actions { display: flex; gap: 4px; flex-wrap: wrap; }
body.admin-app .dt-brand-row .dt-actions { margin-left: auto; }
body.admin-app .dataTables_wrapper .dt-actions .dt-button {
  border: 1px solid #e5e7eb; border-radius: 6px; color: #374151; background: #fff;
  font-size: .75rem; font-weight: 600; padding: .3rem .6rem; margin: 0; white-space: nowrap;
  box-shadow: none;
}
body.admin-app .dataTables_wrapper .dt-actions .dt-button:hover {
  background: #ff6b35; border-color: #ff6b35; color: #fff;
}

/* Tabel */
body.admin-app .dataTables_wrapper .table thead th { }
body.admin-app .dataTables_wrapper { overflow-x: auto; max-width: 100%; }
body.admin-app .dataTables_wrapper table.data-table {
  width: 100% !important; max-width: 100%; table-layout: fixed;
}
table.data-table > thead th {
  background: linear-gradient(135deg, #fff3e6, #ffdfc7);
  color: #9a3412; font-weight: 700; border-bottom: 2px solid #fdba74;
  white-space: nowrap;
  width: 1% !important;
}
table.data-table tbody tr:nth-child(even) { background: #fff8f0; }
table.data-table tbody td { vertical-align: middle; }
table.data-table thead th.num, table.data-table tbody td.num { text-align: right; white-space: nowrap; }

/* ================= HEADER & FOOTER PUBLIK (lebih profesional) ================= */
/* ---- Navbar ---- */
.navbar-brand { display: flex; align-items: center; gap: 8px; }
.navbar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.navbar-brand .brand-text b { font-size: 1.05rem; color: #fff; }
.topbar .navbar-brand .brand-tag { color: #fff; opacity: .85; }
.topbar .navbar-nav .nav-link {
  color: rgba(255,255,255,.92); font-weight: 600; font-size: .92rem;
  padding: 8px 14px; margin: 0 2px; border-radius: 8px; position: relative;
  transition: color .15s, background .15s;
}
.topbar .navbar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.14); }
.topbar .navbar-nav .nav-link.active { color: #1f2937; background: #ffd166; font-weight: 700; }
.header-cta { padding: 7px 18px !important; border-radius: 20px !important; font-weight: 700 !important; }
.header-exit { border-radius: 20px !important; }
.topbar .btn { border-radius: 20px; font-size: .82rem; }
/* ---- Footer ---- */
footer.app-foot { text-align: left; }
footer.app-foot .foot-top { background: linear-gradient(135deg, #0f2c4a 0%, #123f5e 45%, #0ea5e9 130%); border-top: 4px solid #ff6b35; }
footer.app-foot .foot-top .container { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
footer.app-foot .foot-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px; background: #fff; font-size: 1.5rem;
  margin-right: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
footer.app-foot .foot-tag { font-size: .6rem; letter-spacing: 2px; color: #ffd166; font-weight: 700; }
footer.app-foot .foot-h { color: #fff; font-weight: 800; margin-bottom: 14px; font-size: .95rem; text-transform: uppercase; letter-spacing: 1px; }
footer.app-foot .foot-links { display: grid; gap: 9px; }
footer.app-foot .foot-links a { color: #dfefff; text-decoration: none; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; transition: color .15s, padding .15s; }
footer.app-foot .foot-links a:hover { color: #ffd166; padding-left: 4px; text-decoration: none; }
footer.app-foot .foot-contact { display: grid; gap: 9px; font-size: .92rem; color: #e8f4ff; }
footer.app-foot .foot-contact a { color: #fff; text-decoration: none; font-weight: 600; }
footer.app-foot .foot-contact a:hover { color: #ffd166; }
footer.app-foot .foot-cta { margin-top: 10px; padding: 8px 18px; border-radius: 20px; font-weight: 700; }
footer.app-foot .foot-social a {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.05rem;
  text-decoration: none; transition: background .15s, transform .15s;
}
footer.app-foot .foot-social a:hover { background: #ff6b35; transform: translateY(-2px); }
footer.app-foot .foot-bottom { background: rgba(0,0,0,.22); border-top: 1px solid rgba(255,255,255,.15); font-size: .8rem; color: #dbeefe; }
footer.app-foot .foot-bottom .container { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }

/* ================= HOME & PORTAL: tema seragam POLRI (navy + biru langit + emas) ================= */
:root {
  --brand-1: #0b2240;
  --brand-2: #1a4b8c;
}
.topbar {
  background: linear-gradient(135deg, #a83c0a 0%, #e2570c 60%, #c2410a 100%);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.hero {
  background: linear-gradient(120deg, #b8430c 0%, #e2570c 52%, #e07d00 100%);
  box-shadow: 0 8px 26px rgba(140,60,10,.45);
}
.hero-home { background: linear-gradient(120deg, #a8380a 0%, #d95008 55%, #dd7a00 100%); }
.hero-sub { opacity: .96; }
.feature-icon {
  background: linear-gradient(135deg, #ffe7d1, #fecfa0);
  box-shadow: inset 0 0 0 2px #f8b26a;
}
.step-num, .section-dot {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 4px 10px rgba(160,70,10,.42);
}
.hero-stats b { color: #0b5e57; }
body:not(.admin-app) .btn-warning,
body:not(.admin-app) .btn-success.header-cta,
body:not(.admin-app) .btn-success.foot-cta {
  background: linear-gradient(135deg, #d14d0b, #f07d00);
  border-color: #c2470a; color: #fff;
}
body:not(.admin-app) .btn-warning:hover { filter: brightness(.94); color: #fff; }
.topbar .btn-warning.header-cta { background: linear-gradient(135deg, #e2570c, #f2922a); border-color: #ffd166; color: #fff; }
.topbar .navbar-nav .nav-link.active { color: #7c2d12; background: #ffd166; }
footer.app-foot .foot-top { background: linear-gradient(135deg, #092b47 0%, #0d3a5a 55%, #0c6da2 140%); }
body:not(.admin-app) .table thead th { background: #0b6e66; }
body:not(.admin-app) .rental-card { border-left-color: #0b6e66; }

/* ================= PERJANJIAN SEWA ================= */
.agreement-sheet { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 34px 40px; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.agreement-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px double #b98a2e; padding-bottom: 12px; margin-bottom: 14px; }
.agreement-brand { display: inline-flex; align-items: center; gap: 10px; }
.agreement-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #e2570c, #ee8a00); color: #fff; font-size: 1.3rem; }
.agreement-tag { font-size: .62rem; letter-spacing: 2px; color: #b98a2e; font-weight: 700; }
.agreement-branch { text-align: right; font-size: .85rem; color: #666; }
.agreement-title { text-align: center; font-size: 1.5rem; font-weight: 800; letter-spacing: 1px; color: #333; margin: 0; }
.agreement-no { text-align: center; color: #b98a2e; font-weight: 600; margin-bottom: 18px; font-size: .9rem; }
.agree-block { background: #faf8f3; border: 1px solid #eee2c8; border-radius: 8px; padding: 12px 14px; height: 100%; }
.agree-block h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: #b98a2e; border-bottom: 1px solid #e7d9b5; padding-bottom: 5px; font-weight: 800; }
.agree-table { margin-bottom: 0; }
.agree-table > div { display: flex; padding: 4px 0; border-bottom: 1px dashed #e7d9b5; font-size: .9rem; }
.agree-table > div:last-child { border-bottom: 0; }
.agree-table > div span { width: 40%; color: #888; }
.agree-table > div b { width: 60%; color: #222; }
.agree-list { color: #555; line-height: 1.7; padding-left: 18px; }
.agree-sign { margin-top: 30px; padding-top: 18px; border-top: 1px dashed #ccc; }
.agree-sign-label { font-size: .75rem; letter-spacing: 1px; color: #888; font-weight: 700; }
.agree-sign-space { height: 78px; }
.agree-sign-name { font-size: .92rem; font-weight: 600; color: #333; }
.agreement-foot { margin-top: 22px; font-size: .76rem; color: #999; border-top: 1px solid #eee; padding-top: 10px; }
@media print { .agreement-sheet { box-shadow: none; border: 0; padding: 0; } }

/* ================= TEMA: SERAGAM POLRI - NAVY + BIRU LANGIT + EMAS (home & portal) ================= */
/* Brand accent: navy gelap + biru langit + emas */
body:not(.admin-app) {
  --navy: #0b2240;
  --navy-2: #16294a;
  --royal: #1e4e9c;
  --sky: #38b6ff;
  --sky-2: #7cc9ff;
  --gold: #f0b429;
  --ink: #f2f7ff;
  --muted: #a9c0dc;
}
body:not(.admin-app) { background: #eef3fa; color: #16294a; }

/* Topbar: navy gelap, garis emas */
body:not(.admin-app) .topbar {
  background: linear-gradient(135deg, #080f24 0%, #0b2240 55%, #14294f 100%);
  border-bottom: 3px solid #f0b429;
  box-shadow: 0 4px 20px rgba(8,20,48,.55);
}
body:not(.admin-app) .topbar .nav-link {
  color: #dce9fb;
}
body:not(.admin-app) .navbar-brand .brand-text b { color: #fff; }
body:not(.admin-app) .topbar .navbar-brand .brand-tag { color: #f0b429; }

/* Hero: gradasi navy -> biru langit */
body:not(.admin-app) .hero,
body:not(.admin-app) .hero-home {
  background: linear-gradient(130deg, #0a1c3a 0%, #164a8f 55%, #2796e0 135%) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(10,40,90,.55), 0 0 0 1px rgba(240,180,41,.3);
}
body:not(.admin-app) .hero-badge {
  background: rgba(240,180,41,.22); border-color: rgba(240,220,150,.55); color: #ffe9ae;
}
body:not(.admin-app) .hero-stats b { color: #f0b429; }
body:not(.admin-app) .hero-search-head { color: #0f2c52; }

/* CTA tombol: biru langit / emas */
body:not(.admin-app) .btn-warning,
body:not(.admin-app) .btn-warning.header-cta,
body:not(.admin-app) .btn-success.header-cta,
body:not(.admin-app) .btn-success.foot-cta,
body:not(.admin-app) .btn-primary {
  background: linear-gradient(135deg, #1e4e9c, #38b6ff) !important;
  border-color: #164a8f !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(30,78,156,.4);
}
body:not(.admin-app) .btn-success,
body:not(.admin-app) .foot-cta {
  background: linear-gradient(135deg, #f0b429, #f7cf63) !important;
  border-color: #d99e12 !important; color: #0f1f3a !important;
  box-shadow: 0 6px 18px rgba(240,180,41,.45);
}
body:not(.admin-app) .btn-warning:hover,
body:not(.admin-app) .header-cta:hover,
body:not(.admin-app) .foot-cta:hover { filter: brightness(1.08) !important; color: #fff !important; }

/* Nav link active: emas */
body:not(.admin-app) .topbar .navbar-nav .nav-link.active {
  color: #0f1f3a; background: linear-gradient(135deg, #f0b429, #f7cf63); font-weight: 800;
  box-shadow: 0 3px 10px rgba(240,180,41,.6);
}

/* Steps, section dot, feature icon */
body:not(.admin-app) .step-num,
body:not(.admin-app) .section-dot {
  background: linear-gradient(135deg, #1e4e9c, #38b6ff);
  box-shadow: 0 4px 12px rgba(30,78,156,.4);
}
body:not(.admin-app) .feature-icon {
  background: linear-gradient(135deg, #dcebff, #c0ddff);
  box-shadow: inset 0 0 0 2px #2f6fce;
}

/* Kartu & foto: putih terang dengan aksen navy */
body:not(.admin-app) .vehicle-photo {
  background: linear-gradient(135deg, #1c3c6e, #2f6fce);
}
body:not(.admin-app) .section-card .card-header { background: #0b2240; color: #fff; border-bottom: 2px solid #f0b429; }
body:not(.admin-app) .card { background: #fff; color: #16294a; box-shadow: 0 8px 24px rgba(11,34,64,.1); }

/* Harga & teks */
body:not(.admin-app) .price { color: #1e4e9c; }
body:not(.admin-app) .text-muted { color: var(--muted) !important; }

/* Tabel publik */
body:not(.admin-app) .table { background: #fff; color: #16294a; }
body:not(.admin-app) .table thead th { background: #0b2240; color: #f0b429; border-bottom: 2px solid #1e4e9c; }
body:not(.admin-app) .table tbody tr:nth-child(even) td { background: #f2f6fc; }
body:not(.admin-app) .table tr:hover td { background: #e3f0ff; }
body:not(.admin-app) td, body:not(.admin-app) .table td { border-color: #dee8f3 !important; }

/* Footer: navy gelap + aksen emas */
body:not(.admin-app) footer.app-foot .foot-top {
  background: linear-gradient(135deg, #080f24 0%, #0b2240 55%, #14294f 100%);
  border-top: 3px solid #f0b429;
}
body:not(.admin-app) footer.app-foot .foot-h { color: #fff; }
body:not(.admin-app) footer.app-foot .foot-links a { color: #c7d9f1; }
body:not(.admin-app) footer.app-foot .foot-links a:hover { color: #f0b429; }
body:not(.admin-app) footer.app-foot .foot-contact { color: #b7cce8; }
body:not(.admin-app) footer.app-foot .foot-tag { color: #f0b429; }
body:not(.admin-app) footer.app-foot .foot-social a:hover { background: #f0b429; }
body:not(.admin-app) footer.app-foot .foot-bottom { background: rgba(0,0,0,.35); color: #b7cce8; }

/* Rental card & status pill */
body:not(.admin-app) .rental-card { border-left: 6px solid #1e4e9c; box-shadow: 0 8px 24px rgba(11,34,64,.12); background: #fff; }
body:not(.admin-app) .rental-card .card-body, body:not(.admin-app) .vehicle-card .card-body { color: #16294a; }
body:not(.admin-app) .status-pill { box-shadow: 0 1px 0 rgba(0,0,0,.08); }

/* Form & auth */
body:not(.admin-app) .form-control,
body:not(.admin-app) .form-select {
  background: #fff; border-color: #cdd9e8; color: #16294a;
}
body:not(.admin-app) .form-control::placeholder { color: #93a7c2; }
body:not(.admin-app) .form-control:focus,
body:not(.admin-app) .form-select:focus {
  background: #fff; color: #16294a; border-color: #1e4e9c; box-shadow: 0 0 0 3px rgba(30,78,156,.18);
}
body:not(.admin-app) .auth-card { background: #fff; }
body:not(.admin-app) .auth-card .auth-head,
body:not(.admin-app) .adm-brand {
  background: linear-gradient(135deg, #0b2240, #1e4e9c 55%, #38b6ff) !important;
  color: #fff;
}
body:not(.admin-app) .auth-card label { color: #16294a; }
body:not(.admin-app) select.form-control option,
body:not(.admin-app) select.form-select option { background: #fff; color: #16294a; }

/* Heading & link on light */
body:not(.admin-app) h3.page-title { color: #0b2240; }
body:not(.admin-app) .card-header, body:not(.admin-app) h5, body:not(.admin-app) h6 { color: #16294a; }
body:not(.admin-app) .section-card .card-header, body:not(.admin-app) .section-card > .card-header { color: #fff; }
body:not(.admin-app) .rental-card, body:not(.admin-app) .vehicle-card { background: #fff; }
body:not(.admin-app) .btn-outline-dark { border-color: #8aa3c4; color: #16294a; }
body:not(.admin-app) .btn-outline-dark:hover { background: #0b2240; color: #fff; }
body:not(.admin-app) .btn-outline-secondary { border-color: #b4c4da; color: #1e4e9c; }
body:not(.admin-app) .btn-secondary { background: #4a6a94; border-color: #4a6a94; color: #fff; }
body:not(.admin-app) .alert { background: #fff; border-color: #dbe6f2; color: #16294a; }
body:not(.admin-app) .alert-warning { background: #fff8e1; border-color: #f7d16b; color: #7a5a05; }
body:not(.admin-app) .alert-success { background: #e6f7ee; border-color: #9fdcbb; color: #12602f; }
body:not(.admin-app) .alert-danger { background: #fdeaea; border-color: #f2b1b1; color: #8f1f1f; }
body:not(.admin-app) .border, body:not(.admin-app) .border-top, body:not(.admin-app) .border-bottom, body:not(.admin-app) .border-start, body:not(.admin-app) .border-end { border-color: #d8e2ee !important; }
body:not(.admin-app) hr { border-color: #d8e2ee !important; }
body:not(.admin-app) .hero-search-card { background: #fff; color: #16294a; box-shadow: 0 16px 40px rgba(11,34,64,.22); }
body:not(.admin-app) .hero-search-card .form-control { background: #fff; border-color: #cdd9e8; }
body:not(.admin-app) .hero-search-card small, body:not(.admin-app) .hero-search-card .text-muted { color: #7a90ad !important; }
body:not(.admin-app) .sign-wrap { background: #fff; border-color: #8fb2dd; }
body:not(.admin-app) .sign-wrap canvas { background: #fff; }
body:not(.admin-app) .agreement-sheet { background: #fff; color:#111; }
body:not(.admin-app) .agree-block { background: #faf8f3; }





.st-OVERDUE { background: #fee2e2; color: #991b1b; }