/* ============================================================
   AutoLoc Casablanca v2.0 — public/css/app.css
   Bootstrap 5 + Custom dark/light variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ============================================================
   DARK THEME
   ============================================================ */
[data-bs-theme="dark"] {
  --al-topbar-bg:      #13112A;
  --al-topbar-border:  rgba(255,255,255,0.06);
  --al-body-bg:        #0A0818;
  --al-card-bg:        #13112A;
  --al-card-border:    rgba(255,255,255,0.07);
  --al-input-bg:       #0A0818;
  --al-table-stripe:   rgba(255,255,255,0.02);
  --al-table-hover:    rgba(255,255,255,0.04);
  --al-text-muted:     #6A6490;
  --al-orange:         #FF5A1F;
  --al-violet:         #7C4DFF;
  --al-teal:           #00C4A7;
  --al-gold:           #FFB800;
  --al-rose:           #FF3366;
  --al-green:          #00D68F;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-bs-theme="light"] {
  --al-topbar-bg:      #FFFFFF;
  --al-topbar-border:  rgba(0,0,0,0.08);
  --al-body-bg:        #F0F2F8;
  --al-card-bg:        #FFFFFF;
  --al-card-border:    rgba(0,0,0,0.07);
  --al-input-bg:       #F6F7FB;
  --al-table-stripe:   rgba(0,0,0,0.02);
  --al-table-hover:    rgba(0,0,0,0.04);
  --al-text-muted:     #8888AA;
  --al-orange:         #E84D0E;
  --al-violet:         #6C3FC5;
  --al-teal:           #009E87;
  --al-gold:           #E5A500;
  --al-rose:           #E02755;
  --al-green:          #00875A;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  background: var(--al-body-bg) !important;
  transition: background 0.25s, color 0.25s;
}

/* ============================================================
   SIDEBAR — ALWAYS WHITE, fully isolated from Bootstrap theme
   ============================================================ */
.al-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 260px;
  height: 100vh;
  /* Hard-coded white — never inherits Bootstrap dark theme */
  background: #FFFFFF !important;
  border-right: 1px solid #E8EAED !important;
  color: #44475B !important;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
  transition: width 0.25s ease;
  box-shadow: 2px 0 16px rgba(0,0,0,0.06);
}

/* Force all text inside sidebar to ignore Bootstrap dark overrides */
.al-sidebar,
.al-sidebar *,
.al-sidebar a,
.al-sidebar span,
.al-sidebar div {
  color: inherit;
}

/* Logo area */
.al-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid #ECEEF2;
  flex-shrink: 0;
  background: #FFFFFF;
}

.al-logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #FF5A1F, #7C4DFF);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.al-logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #1A1A2E !important;
  line-height: 1.2;
}
.al-logo-text span { color: #E84D0E !important; }

.al-logo-sub {
  font-size: 0.65rem;
  color: #AAAACC !important;
  letter-spacing: 0.04em;
}

/* Nav scroll area */
.al-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  background: #FFFFFF;
}
.al-sidebar-nav::-webkit-scrollbar { width: 4px; }
.al-sidebar-nav::-webkit-scrollbar-thumb { background: #E0E0E0; border-radius: 2px; }

/* Section labels */
.al-nav-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #BBBBCC !important;
  padding: 14px 16px 4px;
  white-space: nowrap;
}

/* Nav items */
.al-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 1px 8px;
  border-radius: 8px;
  color: #5A5F7D !important;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
  background: transparent;
}

.al-nav-item:hover {
  background: rgba(232,77,14,0.08) !important;
  color: #E84D0E !important;
  text-decoration: none !important;
}

.al-nav-item.active {
  background: rgba(232,77,14,0.1) !important;
  color: #E84D0E !important;
}
.al-nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 25%; height: 50%;
  width: 3px;
  background: #E84D0E;
  border-radius: 0 3px 3px 0;
}

.al-nav-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
  background: #F3F4F6;
  color: #5A5F7D;
}
.al-nav-item:hover .al-nav-icon {
  background: rgba(232,77,14,0.12);
  color: #E84D0E;
}
.al-nav-item.active .al-nav-icon {
  background: #E84D0E;
  color: #fff !important;
}

/* Collapsible sub-items */
.al-nav-collapse .al-nav-item {
  padding-left: 54px;
  font-size: 0.78rem;
  margin: 0px 8px;
}
.al-nav-arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
  color: #BBBBCC;
}
.al-nav-item[aria-expanded="true"] .al-nav-arrow { transform: rotate(90deg); color: #E84D0E; }

/* Badge */
.al-nav-badge {
  margin-left: auto;
  background: #E84D0E;
  color: #fff !important;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

/* Sidebar footer */
.al-sidebar-footer {
  padding: 12px;
  border-top: 1px solid #ECEEF2;
  flex-shrink: 0;
  background: #FFFFFF;
}

.al-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F5F6FA;
  border-radius: 10px;
}
.al-user-name { font-size: 0.82rem; font-weight: 600; color: #1A1A2E !important; line-height: 1.2; }
.al-user-role { font-size: 0.68rem; color: #AAAACC !important; }

/* Avatar */
.avatar-initials {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.al-topbar {
  height: 60px;
  background: var(--al-topbar-bg);
  border-bottom: 1px solid var(--al-topbar-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.25s;
}

.al-topbar-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  flex: 1;
}

.al-search-wrap {
  position: relative;
  width: 260px;
}
.al-search-wrap input {
  padding-left: 34px;
  background: var(--al-input-bg) !important;
  border-color: var(--al-card-border) !important;
  font-size: 0.82rem;
}
.al-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  font-size: 13px;
}

/* Theme toggle btn */
.al-theme-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--al-card-border);
  background: var(--al-input-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}
.al-theme-btn:hover { border-color: var(--al-orange); }

/* Notification bell */
.al-notif-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--al-card-border);
  background: var(--al-input-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.al-notif-btn:hover { border-color: var(--al-orange); }
.al-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--al-orange);
  border-radius: 50%;
  border: 2px solid var(--al-topbar-bg);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.al-main {
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s;
}

.al-content {
  flex: 1;
  padding: 24px;
}

/* Page header */
.al-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.al-page-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
}
.al-breadcrumb {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 2px;
}

/* ============================================================
   CARDS
   ============================================================ */
.al-card {
  background: var(--al-card-bg) !important;
  border: 1px solid var(--al-card-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* ============================================================
   GRADIENT STAT CARDS — Bootdey "card-box" style
   ============================================================ */
.al-stat-card {
  border-radius: 14px !important;
  border: none !important;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.al-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
/* Remove old pseudo-elements */
.al-stat-card::before { display: none !important; }
.al-stat-card::after  { display: none !important; }

/* Gradient backgrounds per color */
.al-stat-card.orange { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
.al-stat-card.teal   { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.al-stat-card.violet { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.al-stat-card.gold   { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.al-stat-card.rose   { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.al-stat-card.green  { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

/* Inner card body */
.al-stat-card .al-stat-inner {
  padding: 20px 20px 0 20px;
}

/* Big background icon — decorative */
.al-stat-card .al-stat-bg-icon {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 70px;
  opacity: 0.18;
  pointer-events: none;
  line-height: 1;
}

/* Icon bubble */
.al-stat-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.al-stat-value {
  font-family: 'Syne', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.al-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9) !important;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}
.al-stat-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.75) !important;
  margin-top: 3px;
}

/* Footer strip — "View More" style */
.al-stat-footer {
  display: block;
  margin-top: 16px;
  padding: 8px 20px;
  background: rgba(0,0,0,0.12);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none !important;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.al-stat-footer:hover {
  background: rgba(0,0,0,0.2);
  color: #fff !important;
}
.al-stat-footer i { margin-left: 4px; font-size: 0.7rem; }

/* ============================================================
   TABLE
   ============================================================ */
.al-table {
  font-size: 0.82rem;
}
.al-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  border-bottom: 1px solid var(--al-card-border);
  padding: 10px 14px;
  white-space: nowrap;
  background: transparent !important;
}
.al-table tbody tr { transition: background 0.1s; }
.al-table tbody td {
  padding: 11px 14px;
  vertical-align: middle;
  border-color: var(--al-card-border);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
  background: var(--al-input-bg) !important;
  border-color: var(--al-card-border) !important;
  font-size: 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--al-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,90,31,0.15) !important;
}
.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.75;
  margin-bottom: 4px;
}
.form-select option { background: var(--al-card-bg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-orange {
  background: var(--al-orange);
  color: #fff;
  border: none;
}
.btn-orange:hover { background: #e04a12; color: #fff; }

.btn { font-size: 0.82rem; font-weight: 600; }
.btn-sm { font-size: 0.75rem; }

/* ============================================================
   BADGES
   ============================================================ */
.badge.fw-semibold { font-size: 0.7rem; }

/* ============================================================
   CALENDAR
   ============================================================ */
.al-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.al-cal-header { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 6px 2px; opacity: 0.5; }
.al-cal-day {
  background: var(--al-card-bg);
  border: 1px solid var(--al-card-border);
  border-radius: 8px;
  padding: 6px;
  min-height: 76px;
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: 0.72rem;
}
.al-cal-day:hover { border-color: var(--al-orange); }
.al-cal-day.today { border-color: var(--al-orange); }
.al-cal-day.other { opacity: 0.3; }
.al-cal-num { font-size: 0.75rem; font-weight: 700; margin-bottom: 2px; }
.al-cal-day.today .al-cal-num { color: var(--al-orange); }
.al-cal-evt {
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.al-cal-evt.dep { background: rgba(0,196,167,0.2); color: var(--al-teal); }
.al-cal-evt.ret { background: rgba(255,51,102,0.2); color: var(--al-rose); }
.al-cal-evt.mid { background: rgba(124,77,255,0.15); color: var(--al-violet); }

/* ============================================================
   CAR CARDS
   ============================================================ */
.al-car-card {
  background: var(--al-card-bg);
  border: 1px solid var(--al-card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.al-car-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.al-car-img {
  height: 140px;
  background: linear-gradient(135deg, var(--al-card-bg), var(--al-body-bg));
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  position: relative;
}
.al-car-body { padding: 14px; }
.al-car-name { font-family: 'Syne',sans-serif; font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.al-car-meta { font-size: 0.72rem; opacity: 0.6; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.al-car-price { font-family: 'Syne',sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--al-orange); }
.al-car-price small { font-size: 0.68rem; font-family: 'Inter',sans-serif; font-weight: 400; opacity: 0.6; }

/* ============================================================
   ALERTS & FLASH
   ============================================================ */
.al-flash { border-radius: 10px; font-size: 0.85rem; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-item a { color: var(--al-orange); text-decoration: none; }
.breadcrumb { font-size: 0.78rem; }

/* ============================================================
   DROPDOWN menus in topbar
   ============================================================ */
.dropdown-menu {
  border: 1px solid var(--al-card-border) !important;
  background: var(--al-card-bg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  border-radius: 10px !important;
  font-size: 0.82rem;
}
.dropdown-item:hover { background: rgba(255,90,31,0.08) !important; color: var(--al-orange) !important; }

/* ============================================================
   UTILS
   ============================================================ */
.font-syne { font-family: 'Syne', sans-serif; }
.text-orange { color: var(--al-orange) !important; }
.text-violet { color: var(--al-violet) !important; }
.text-teal   { color: var(--al-teal) !important; }
.bg-orange   { background: var(--al-orange) !important; }
.fw-700      { font-weight: 700; }
.fw-800      { font-weight: 800; }
.border-al   { border-color: var(--al-card-border) !important; }

/* ============================================================
   LOGIN
   ============================================================ */
.al-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--al-body-bg);
}
.al-login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background: var(--al-card-bg);
  border: 1px solid var(--al-card-border);
  border-radius: 16px;
}

/* ============================================================
   PRINT / PDF
   ============================================================ */
@media print {
  .al-sidebar, .al-topbar, .no-print { display: none !important; }
  .al-main { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .al-sidebar { transform: translateX(-100%); transition: transform 0.3s; }
  .al-sidebar.show { transform: translateX(0); }
  .al-main { margin-left: 0; }
  .al-search-wrap { width: 160px; }
}


/* ============================================================
   HAKIS DASHBOARD INTEGRATION — style importé de hakis.zip
   Cible: public/css/app.css + app/Views/dashboard/index.php
   ============================================================ */
:root,
[data-bs-theme="light"]{
  --al-orange:#E84D0E;
  --al-orange-600:#cf440c;
  --al-violet:#6C3FC5;
  --al-teal:#009E87;
  --al-gold:#E5A500;
  --al-rose:#E02755;
  --al-green:#00875A;
  --al-body-bg:#EEF0F6;
  --al-card-bg:#FFFFFF;
  --al-card-border:rgba(20,18,45,.08);
  --al-card-border-strong:rgba(20,18,45,.13);
  --al-input-bg:#F5F6FB;
  --al-topbar-bg:rgba(255,255,255,.84);
  --al-topbar-border:rgba(20,18,45,.08);
  --al-ink:#1A1A2E;
  --al-ink-2:#44475B;
  --al-ink-3:#6A6E86;
  --al-muted:#9498B4;
  --al-radius:16px;
  --al-shadow-sm:0 1px 2px rgba(20,18,45,.04),0 1px 3px rgba(20,18,45,.06);
  --al-shadow-md:0 6px 22px rgba(20,18,45,.07),0 2px 6px rgba(20,18,45,.05);
}
[data-bs-theme="dark"]{
  --al-body-bg:#0A0818;
  --al-card-bg:#141229;
  --al-card-border:rgba(255,255,255,.08);
  --al-card-border-strong:rgba(255,255,255,.14);
  --al-input-bg:#0E0C20;
  --al-topbar-bg:rgba(20,18,45,.84);
  --al-topbar-border:rgba(255,255,255,.08);
  --al-ink:#F3F2FA;
  --al-ink-2:#C9C7DC;
  --al-ink-3:#9A98B6;
  --al-muted:#6A6490;
  --al-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --al-shadow-md:0 8px 30px rgba(0,0,0,.45);
}
body{background:var(--al-body-bg)!important;color:var(--al-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.font-syne,.al-page-title,.al-topbar-title,.hakis-title{font-family:'Syne',system-ui,sans-serif!important;}
.text-orange{color:var(--al-orange)!important}.fw-800{font-weight:800}.fw-700{font-weight:700}.fw-600{font-weight:600}

/* Sidebar Hakis */
.al-sidebar{width:264px;background:#fff!important;border-right:1px solid #E8EAED!important;box-shadow:none!important;}
.al-sidebar-logo{padding:16px 18px 14px!important;border-bottom:1px solid #E8EAED!important;justify-content:center!important;}
.al-sidebar-logo img{height:58px!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))!important;}
.al-sidebar-nav{padding:10px 0 18px!important;background:#fff!important;}
.al-nav-label{font-size:10.5px!important;font-weight:800!important;letter-spacing:.13em!important;color:#A1A6BC!important;padding:16px 20px 5px!important;}
.al-nav-item{gap:11px!important;padding:9px 14px!important;margin:1px 10px!important;border-radius:10px!important;color:#44475B!important;font-size:13.5px!important;font-weight:500!important;}
.al-nav-item:hover,.al-nav-item.active{background:rgba(232,77,14,.10)!important;color:var(--al-orange)!important;}
.al-nav-item.active{font-weight:700!important;}
.al-nav-item.active::before{left:-10px!important;top:22%!important;height:56%!important;width:3px!important;background:var(--al-orange)!important;}
.al-nav-icon{width:30px!important;height:30px!important;border-radius:8px!important;background:#F5F6FB!important;color:#6A6E86!important;font-size:15px!important;}
.al-nav-item:hover .al-nav-icon{background:rgba(232,77,14,.16)!important;color:var(--al-orange)!important;}
.al-nav-item.active .al-nav-icon{background:var(--al-orange)!important;color:#fff!important;}
.al-nav-collapse .al-nav-item{padding-left:50px!important;font-size:12.7px!important;margin:0 10px!important;}
.al-nav-badge{background:var(--al-orange)!important;color:#fff!important;font-size:10.5px!important;font-weight:800!important;padding:2px 7px!important;border-radius:20px!important;}
.al-sidebar-footer{padding:12px!important;border-top:1px solid #E8EAED!important;background:#fff!important;}
.al-user-card{background:#F5F6FB!important;border-radius:12px!important;padding:9px 11px!important;}
.al-user-name{font-size:13px!important;font-weight:800!important;color:#1A1A2E!important}.al-user-role{font-size:11px!important;color:#9498B4!important}
.avatar-initials{border-radius:11px!important;background:linear-gradient(135deg,var(--al-orange),var(--al-violet))!important;}

/* Topbar */
.al-main{margin-left:264px;}
.al-topbar{height:64px;background:var(--al-topbar-bg)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--al-topbar-border)!important;padding:0 26px!important;}
.al-topbar-title{font-size:16px!important;font-weight:800!important;color:var(--al-ink)!important;}
.al-search-wrap{width:300px;flex:0 0 300px;}
.al-search-wrap input{height:38px;border-radius:999px!important;background:var(--al-input-bg)!important;border:1px solid var(--al-card-border)!important;padding-left:38px!important;color:var(--al-ink)!important;}
.al-search-wrap input:focus{border-color:var(--al-orange)!important;box-shadow:0 0 0 3px rgba(232,77,14,.10)!important;}
.al-theme-btn,.al-notif-btn{width:38px!important;height:38px!important;border-radius:11px!important;border:1px solid var(--al-card-border)!important;background:var(--al-input-bg)!important;color:var(--al-ink-2)!important;}
.al-content{padding:26px!important;max-width:1480px;width:100%;margin:0 auto;}
.al-card{background:var(--al-card-bg)!important;border:1px solid var(--al-card-border)!important;border-radius:16px!important;box-shadow:var(--al-shadow-sm)!important;overflow:hidden;}
.card-header{color:var(--al-ink)!important}.btn-orange,.btn-accent{background:var(--al-orange)!important;color:#fff!important;border-color:var(--al-orange)!important;box-shadow:0 8px 20px -8px var(--al-orange)!important}.btn-orange:hover,.btn-accent:hover{background:var(--al-orange-600)!important;border-color:var(--al-orange-600)!important;color:#fff!important}.btn{border-radius:11px!important;font-weight:700!important;}

/* Dashboard Hakis */
.hakis-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.hakis-title{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--al-ink);}
.hakis-sub{font-size:13px;color:var(--al-ink-3);margin-top:4px}.hakis-sub b{color:var(--al-orange);}
.hakis-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hakis-grid{display:grid;gap:18px}.hakis-kpis{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:18px;}
.hakis-kpi{position:relative;min-height:132px;padding:18px;border-radius:16px;background:var(--al-card-bg);border:1px solid var(--al-card-border);box-shadow:var(--al-shadow-sm);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;}
.hakis-kpi::after{content:'';position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(180deg,transparent,var(--kpi-soft));clip-path:polygon(0 70%,55% 45%,100% 20%,100% 100%,0 100%);opacity:.82;}
.hakis-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative;z-index:1;}
.hakis-kpi-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--kpi-soft);color:var(--kpi-color);}
.hakis-chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;background:var(--kpi-soft);color:var(--kpi-color);white-space:nowrap;}
.hakis-kpi-val{font-family:'Syne',system-ui,sans-serif;font-size:30px;font-weight:800;line-height:1;margin-top:18px;color:var(--al-ink);position:relative;z-index:1;}
.hakis-kpi-lbl{font-size:12.5px;color:var(--al-ink-3);font-weight:700;position:relative;z-index:1;}
.hakis-kpi.orange{--kpi-color:var(--al-orange);--kpi-soft:rgba(232,77,14,.12)}.hakis-kpi.violet{--kpi-color:var(--al-violet);--kpi-soft:rgba(108,63,197,.13)}.hakis-kpi.teal{--kpi-color:var(--al-teal);--kpi-soft:rgba(0,158,135,.13)}.hakis-kpi.gold{--kpi-color:var(--al-gold);--kpi-soft:rgba(229,165,0,.14)}.hakis-kpi.rose{--kpi-color:var(--al-rose);--kpi-soft:rgba(224,39,85,.12)}.hakis-kpi.green{--kpi-color:var(--al-green);--kpi-soft:rgba(0,135,90,.12)}
.hakis-main-row{grid-template-columns:minmax(0,1.55fr) minmax(340px,.95fr);margin-bottom:18px;}.hakis-card-pad{padding:22px;}.hakis-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}.hakis-card-title{font-family:'Syne',system-ui,sans-serif;font-size:18px;font-weight:800;color:var(--al-ink);margin:0;}.hakis-tabs{display:flex;background:var(--al-input-bg);border-radius:999px;padding:3px}.hakis-tab{font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;color:var(--al-muted)}.hakis-tab.active{background:#fff;color:var(--al-orange);box-shadow:var(--al-shadow-sm)}
.hakis-rev-value{font-family:'Syne',system-ui,sans-serif;font-size:34px;font-weight:800;color:var(--al-ink);letter-spacing:-.02em}.hakis-rev-currency{font-size:12px;color:var(--al-ink-3);font-weight:700;margin-left:6px}.hakis-rev-sub{font-size:12px;color:var(--al-ink-3)}.hakis-rev-sub .up{color:var(--al-green);font-weight:800;background:rgba(0,135,90,.12);padding:2px 8px;border-radius:999px;margin-right:8px}.hakis-chart{width:100%;height:232px;margin-top:10px}.hakis-chart svg{width:100%;height:100%;display:block}.hakis-axis{font-size:12px;fill:var(--al-muted);font-weight:700}.hakis-legend{display:flex;gap:16px;font-size:12px;color:var(--al-ink-3);font-weight:700}.hakis-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.hakis-fleet{display:grid;grid-template-columns:210px 1fr;align-items:center;gap:12px}.hakis-donut{width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--al-violet) 0 var(--p1),var(--al-teal) var(--p1) var(--p2),var(--al-gold) var(--p2) var(--p3),var(--al-rose) var(--p3) 100%);display:grid;place-items:center;margin:auto}.hakis-donut-inner{width:110px;height:110px;border-radius:50%;background:var(--al-card-bg);display:grid;place-items:center;text-align:center}.hakis-donut-n{font-family:'Syne';font-size:34px;font-weight:800;color:var(--al-ink);line-height:1}.hakis-donut-l{font-size:11px;color:var(--al-ink-3);font-weight:800}.hakis-fleet-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;font-size:13px;margin:14px 0;color:var(--al-ink-2);font-weight:700}.hakis-fleet-row b{font-family:'Syne';font-size:18px}.hakis-fleet-row small{color:var(--al-muted);font-weight:800}.hakis-util{margin-top:16px}.hakis-util-label{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:var(--al-ink-3);margin-bottom:8px}.hakis-util-bar{height:11px;border-radius:999px;background:var(--al-input-bg);overflow:hidden;display:flex}.hakis-util-bar span{height:100%}
.hakis-tables{grid-template-columns:1fr 1fr;margin-bottom:18px}.hakis-list{display:flex;flex-direction:column}.hakis-list-row{display:grid;grid-template-columns:68px 42px 1fr auto;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--al-card-border);min-height:60px}.hakis-list-row:first-child{border-top:0}.hakis-time{font-family:'Syne';font-size:15px;font-weight:800;color:var(--al-ink)}.hakis-avatar{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:900;background:linear-gradient(135deg,var(--al-teal),var(--al-violet))}.hakis-person{min-width:0}.hakis-person b{display:block;font-size:13px;color:var(--al-ink);line-height:1.15}.hakis-person span{display:block;font-size:11px;color:var(--al-ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hakis-mini-code{background:var(--al-input-bg);border:1px solid var(--al-card-border);border-radius:7px;padding:1px 6px;font-size:10px;color:var(--al-ink-3);font-weight:800}.hakis-status{border-radius:999px;padding:4px 9px;font-size:11px;font-weight:900;white-space:nowrap}.hakis-status.ok{background:rgba(0,135,90,.12);color:var(--al-green)}.hakis-status.wait{background:rgba(229,165,0,.15);color:#B47E00}.hakis-status.late{background:rgba(224,39,85,.12);color:var(--al-rose)}
.hakis-alerts{margin-bottom:18px}.hakis-alert-tabs{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--al-ink-3);font-weight:800}.hakis-alert-tabs span.active{color:var(--al-orange);background:rgba(232,77,14,.10);padding:6px 10px;border-radius:999px}.hakis-alert-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 18px 18px}.al-alert-row{border-radius:12px!important;background:var(--al-card-bg)!important;box-shadow:none}.al-alert-row:hover{border-color:var(--al-card-border-strong)!important;transform:translateY(-1px)}.al-alert-ico{border-radius:11px!important}
.hakis-calendar-card{padding:20px}.hakis-cal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.hakis-cal-title{font-family:'Syne';font-weight:800;font-size:22px;color:var(--al-ink);margin:0}.hakis-cal-legend{display:flex;gap:16px;font-size:12px;font-weight:800;color:var(--al-ink-3)}.al-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.al-cal-header{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--al-muted);text-align:center;padding:8px}.al-cal-day{min-height:90px;background:var(--al-card-bg);border:1px solid var(--al-card-border)!important;border-radius:11px;position:relative;padding:10px 8px;overflow:hidden}.al-cal-day.other{background:transparent;border-color:transparent!important}.al-cal-num{font-family:'Syne';font-size:14px;font-weight:900;color:var(--al-ink);margin-bottom:8px}.al-cal-day.today{border:2px solid var(--al-orange)!important;background:rgba(232,77,14,.04)!important}.al-cal-pill{border-left:0!important;border-radius:7px!important;font-size:11px!important;padding:3px 6px!important;font-weight:800!important}.al-cal-pill.dep{background:rgba(0,158,135,.14)!important;color:var(--al-teal)!important}.al-cal-pill.ret{background:rgba(232,77,14,.13)!important;color:var(--al-orange)!important}.al-cal-pill.mid{background:rgba(108,63,197,.13)!important;color:var(--al-violet)!important}.al-cal-count{background:var(--al-input-bg)!important;color:var(--al-ink-3)!important;font-weight:900!important}
@media(max-width:1399px){.hakis-kpis{grid-template-columns:repeat(3,1fr)}.hakis-main-row,.hakis-tables{grid-template-columns:1fr}.hakis-alert-cards{grid-template-columns:1fr 1fr}}
@media(max-width:991px){.al-main{margin-left:0}.hakis-kpis{grid-template-columns:repeat(2,1fr)}.hakis-fleet{grid-template-columns:1fr}.hakis-alert-cards{grid-template-columns:1fr}.al-cal-day{min-height:76px}.hakis-list-row{grid-template-columns:60px 38px 1fr}.hakis-list-row .hakis-status{grid-column:3;margin-top:6px;justify-self:start}}
@media(max-width:575px){.al-content{padding:16px!important}.hakis-title{font-size:22px}.hakis-kpis{grid-template-columns:1fr}.hakis-chart{height:180px}.al-cal-grid{gap:4px}.al-cal-day{min-height:68px;padding:7px 5px}.al-cal-pill{font-size:10px!important}.hakis-cal-legend{width:100%;justify-content:flex-start;flex-wrap:wrap}}