/* =========================================================
   RentalKu — Modern Theme
   ========================================================= */
:root{
  --brand-1: #6C5CE7;
  --brand-2: #4834D4;
  --brand-3: #00CEC9;
  --accent-pink: #FD79A8;
  --accent-orange: #FDBA74;
  --bg-soft: #F4F5FA;
  --ink: #1E1B2E;
  --ink-soft: #6b6880;
  --card-radius: 18px;
  --shadow-soft: 0 8px 24px rgba(76, 60, 160, 0.08);
  --shadow-strong: 0 16px 40px rgba(76, 60, 160, 0.16);
}

*{ box-sizing: border-box; }

body{
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  background: var(--bg-soft);
  color: var(--ink);
  min-height: 100vh;
}

/* ---------- Auth / Login ---------- */
.auth-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(108,92,231,.35), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,206,201,.30), transparent 45%),
    linear-gradient(135deg, #201c3a 0%, #392d6b 55%, #1a1730 100%);
  padding: 24px;
}
.auth-card{
  display:flex;
  width:100%;
  max-width: 920px;
  min-height: 520px;
  border-radius: 24px;
  overflow:hidden;
  box-shadow: var(--shadow-strong);
  background: #fff;
}
.auth-side{
  flex: 1 1 45%;
  background: linear-gradient(160deg, var(--brand-1), var(--brand-2) 60%, #2d2265);
  color:#fff;
  padding: 48px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.auth-side::before{
  content:"";
  position:absolute; inset:-40% -20% auto auto;
  width:280px; height:280px; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.auth-side::after{
  content:"";
  position:absolute; left:-60px; bottom:-60px;
  width:220px; height:220px; border-radius:50%;
  background: rgba(0,206,201,.18);
}
.auth-side .pitch{ position:relative; z-index:1; width:100%; max-width: 320px; margin:0 auto; text-align:center; }
.auth-side .login-logo-wrap{ position:relative; width:214px; height:214px; margin:0 auto 24px; display:grid; place-items:center; perspective:900px; transform-style:preserve-3d; }
.auth-side .login-logo-wrap::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.2) 42%, rgba(0,0,0,.28)); box-shadow:0 20px 28px rgba(10,7,30,.35), inset 0 2px 3px rgba(255,255,255,.9), inset 0 -8px 12px rgba(18,12,55,.32); transform:translateZ(-10px); }
.auth-side .login-logo-wrap::after{ content:""; position:absolute; width:72%; height:18px; bottom:-14px; border-radius:50%; background:rgba(10,7,30,.4); filter:blur(10px); transform:translateZ(-24px); }
.auth-side .login-logo{ position:relative; z-index:1; display:block; width:190px; height:190px; object-fit:cover; border:5px solid rgba(255,255,255,.92); border-radius:50%; box-shadow:inset 0 3px 5px rgba(255,255,255,.65), inset 0 -8px 12px rgba(0,0,0,.3), 0 8px 0 #30256f, 0 16px 24px rgba(10,7,30,.34); transform:rotateX(5deg) rotateY(-4deg); transition:transform .35s ease, filter .35s ease; }
.auth-side .login-logo:hover{ transform:rotateX(0) rotateY(0) translateY(-4px); filter:saturate(1.08) brightness(1.04); }
.auth-side .pitch h2{ font-weight:700; line-height:1.3; font-size:1.5rem; margin-bottom:10px;}
.auth-side .motor-animation{ width:100%; margin-top:14px; color:var(--brand-3); text-align:center; font-size:1.7rem; filter:drop-shadow(0 4px 3px rgba(15,10,45,.35)) drop-shadow(0 0 7px rgba(0,206,201,.55)); }
.auth-side .pitch p{ color: rgba(255,255,255,.78); font-size:.93rem; }
.auth-form{
  flex: 1 1 55%;
  padding: 56px 54px;
  background: #fff;
  display:flex; flex-direction:column; justify-content:center;
}
.auth-form h3{ font-weight:800; margin-bottom:6px; letter-spacing:0; }
.auth-form p.sub{ color:var(--ink-soft); margin-bottom:28px; font-size:.92rem;}
.form-floating > .form-control{
  border-radius: 12px;
  border: 1.5px solid #e8e6f3;
  padding-left: 44px;
}
.input-icon-wrap{ position:relative; margin-bottom:16px; }
.input-icon-wrap i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color: var(--brand-1); font-size: 1.05rem; z-index: 5;
}
.password-toggle-wrap .form-control{ padding-right: 44px; }
.password-toggle-btn{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; color: var(--brand-1); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; z-index:6; padding: 4px;
}
.password-toggle-btn:focus{ outline:none; }
.table-pagination{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.table-pagination-info{ color:var(--ink-soft); font-size:.8rem; }
.table-pagination .pagination{ margin-left:auto; }
.table-pagination .page-link{ border-color:#e8e6f3; color:var(--brand-2); }
.table-pagination .page-item.active .page-link{ background:var(--brand-1); border-color:var(--brand-1); color:#fff; }
.table-pagination .page-item.disabled .page-link{ color:#aaa; pointer-events:none; }
.btn-brand{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border:none; color:#fff; font-weight:700;
  border-radius: 12px; padding: 12px 20px;
  box-shadow: 0 10px 20px rgba(72,52,212,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-brand:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px rgba(72,52,212,.36); color:#fff; }

/* ---------- App Shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width: 264px;
  flex-shrink:0;
  background: linear-gradient(190deg, #241f45 0%, #322a63 55%, #1c1836 100%);
  color:#fff;
  position: sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  padding: 22px 16px;
  z-index: 100;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.05);
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding: 6px 10px 22px 10px;
  font-weight:800; font-size:1.25rem;
}
.sidebar .brand .logo-dot{
  width:38px;height:38px;border-radius:11px;
  background: linear-gradient(135deg, var(--brand-3), var(--brand-1));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.sidebar .brand span{ color: var(--brand-3); }

.nav-section-label{
  font-size: .7rem; text-transform:uppercase; letter-spacing:1.2px;
  color: rgba(255,255,255,.38); padding: 14px 12px 6px;
  font-weight:700;
}
.sidebar .nav-link{
  color: rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 4px;
  font-size: .93rem;
  font-weight: 600;
  display:flex; align-items:center; gap:12px;
  transition: all .15s ease;
}
.sidebar .nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.sidebar .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.sidebar .nav-link.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff;
  box-shadow: 0 8px 18px rgba(72,52,212,.35);
}
.sidebar .nav-link .badge-count{
  margin-left:auto; background: rgba(255,255,255,.18);
  border-radius:20px; font-size:.68rem; padding:2px 8px; font-weight:700;
}
.sidebar-foot{
  margin-top:auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
}
.user-chip{
  display:flex; align-items:center; gap:10px; padding: 10px 10px;
  border-radius: 12px; background: rgba(255,255,255,.06);
}
.user-chip .avatar{
  width:36px;height:36px;border-radius:50%;
  background: linear-gradient(135deg, var(--accent-pink), var(--brand-1));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; color:#fff; flex-shrink:0;
}
.user-chip .meta{ line-height:1.15; overflow:hidden; }
.user-chip .meta .name{ font-weight:700; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-chip .meta .role{ font-size:.72rem; color: rgba(255,255,255,.5); }
.user-chip a{ color: rgba(255,255,255,.55); margin-left:auto; font-size:1.1rem; }
.user-chip a.with-label{ display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; text-decoration:none; }
.user-chip a:hover{ color:#fff; }

/* ---------- Main content ---------- */
.main-content{ flex:1; min-width:0; padding: 26px 30px 50px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 26px; gap: 16px; flex-wrap:wrap;
}
.topbar h1{ font-size:1.5rem; font-weight:800; margin:0; }
.topbar .subtitle{ color: var(--ink-soft); font-size:.88rem; margin-top:2px;}
.topbar .date-chip{
  background:#fff; border-radius: 12px; padding: 9px 16px;
  box-shadow: var(--shadow-soft); font-size:.85rem; font-weight:600; color: var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.topbar .date-chip i{ color: var(--brand-1); }

/* ---------- Cards ---------- */
.card-soft{
  background:#fff; border:none; border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
}
.card-soft .card-header{
  background:transparent; border-bottom: 1px solid #f0eef8;
  font-weight:700; padding: 18px 22px; border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.card-soft .card-body{ padding: 22px; }

.stat-card{
  border-radius: var(--card-radius);
  padding: 16px 18px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  min-height: 104px;
}
.stat-card::after{
  content:"";
  position:absolute; right:-18px; bottom:-18px;
  width:110px; height:110px; border-radius:50%;
  background: rgba(255,255,255,.13);
}
.stat-card .icon-badge{
  width:36px; height:36px; border-radius:10px;
  background: rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; margin-bottom: 10px;
}
.stat-card .label{ font-size:.78rem; opacity:.88; font-weight:600; }
.stat-card .value{ font-size:1.45rem; font-weight:800; margin-top:2px; }
.stat-card .trend{ font-size:.7rem; opacity:.85; margin-top:4px; position:relative; z-index:1;}

.stat-1{ background: linear-gradient(135deg, #00AA13, #008F0F); }
.stat-2{ background: linear-gradient(135deg, #FFD500, #F2B800); }
.stat-3{ background: linear-gradient(135deg, #00B14F, #008F3F); }
.stat-4{ background: linear-gradient(135deg, #EE4D2D, #D9381E); }

/* ---------- Facebook-style dashboard navigation ---------- */
.dashboard-facebook{ max-width: 1280px; margin: 0 auto; }
.dashboard-social-nav{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:stretch; justify-content:space-around; gap:8px;
  min-height:74px; margin: -8px 0 20px; padding: 0 12px;
  background:#fff; border-bottom:1px solid #dfe3e8;
  box-shadow:0 2px 5px rgba(0,0,0,.08); border-radius:0 0 12px 12px;
}
.dashboard-social-link{
  position:relative; display:flex; flex:1; align-items:center; justify-content:center;
  gap:9px; color:#65676b; text-decoration:none; font-size:.83rem; font-weight:700;
  transition:color .15s ease, background .15s ease;
}
.dashboard-social-link i{ font-size:1.42rem; }
.dashboard-social-link:hover{ color:#1877f2; background:#f0f2f5; }
.dashboard-social-link.active{ color:#1877f2; }
.dashboard-social-link.active::after{
  content:""; position:absolute; left:12%; right:12%; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:#1877f2;
}
.dashboard-facebook .stat-card{
  background:#fff; color:var(--ink); border:1px solid #e4e6eb; border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.08); min-height:88px; padding:10px 14px;
}
.dashboard-facebook .stat-card .icon-badge{ width:30px; height:30px; border-radius:8px; font-size:.82rem; margin-bottom:6px; }
.dashboard-facebook .stat-card .label{ font-size:.7rem; }
.dashboard-facebook .stat-card .value{ font-size:1.2rem; line-height:1.1; }
.dashboard-facebook .stat-card .trend{ font-size:.64rem; margin-top:3px; }
.dashboard-facebook .stat-card::after{ background:#f0f2f5; }
.dashboard-facebook .stat-card .icon-badge{ color:#1877f2; background:#e7f3ff; }
.dashboard-facebook .stat-card .label{ color:#65676b; opacity:1; }
.dashboard-facebook .stat-card .value{ color:#1c1e21; }
.dashboard-facebook .stat-card .trend{ color:#65676b; opacity:1; }
.dashboard-facebook .dashboard-stats > [class*='col-']{ min-width:0; }
.dashboard-facebook .stat-card .trend{ overflow-wrap:anywhere; }
.dashboard-facebook .stat-1{ border-top:3px solid #42b72a; }
.dashboard-facebook .stat-2{ border-top:3px solid #f7b928; }
.dashboard-facebook .stat-3{ border-top:3px solid #1877f2; }
.dashboard-facebook .stat-4{ border-top:3px solid #f02849; }
.dashboard-facebook .card-soft{ border:1px solid #e4e6eb; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.dashboard-facebook .card-soft .card-header{ border-bottom-color:#e4e6eb; }

/* ---------- Tables ---------- */
.table-modern{ margin-bottom:0; }
.table-modern thead th{
  border-bottom: none;
  color: var(--ink-soft);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.6px;
  font-weight:700; background:#F8F7FC; padding: 13px 16px;
}
.table-modern thead th:first-child{ border-radius: 10px 0 0 10px; }
.table-modern thead th:last-child{ border-radius: 0 10px 10px 0; text-align:right;}
.table-modern tbody td{ padding: 13px 16px; vertical-align:middle; font-size:.89rem; border-bottom: 1px solid #f2f1f9; }
.table-modern tbody tr:hover{ background: #fbfaff; }
.table-modern td:last-child{ text-align:right; }
.motor-table thead th{ text-align:center; }
.motor-table th:nth-child(2),
.motor-table td:nth-child(2){ min-width: 130px; text-align:center; }
.motor-table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.motor-table thead th{
  background: linear-gradient(180deg, #faf9ff 0%, #f2f0fa 100%);
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .08em;
  padding: 14px 12px;
  border-bottom: 1px solid #ece7f9;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 800;
}
.motor-table tbody td{
  padding: 14px 12px;
  background: #fff;
  border-bottom: 1px solid #f2f1f9;
  color: #2a2740;
  font-weight: 600;
}
.motor-table tbody tr{
  transition: all .18s ease;
}
.motor-table tbody tr:hover{
  background: linear-gradient(180deg, #faf8ff 0%, #f7f4ff 100%);
  box-shadow: inset 0 0 0 1px rgba(108,92,231,.04);
}
.motor-table tbody td:first-child{ border-left: none; }
.motor-table tbody td:last-child{ text-align:right; }
.table-responsive{
  overflow-x:auto;
  border-radius: 14px;
  border: 1px solid #f1eef9;
  background: #fff;
  box-shadow: 0 12px 26px rgba(76,60,160,.04), inset 0 1px 0 rgba(255,255,255,.9);
}
.motor-table td:nth-child(1){ min-width: 180px; }
.motor-table td:nth-child(2){ min-width: 130px; }
.motor-table td:nth-child(3){ min-width: 150px; }
.motor-table td:nth-child(4),
.motor-table td:nth-child(5),
.motor-table td:nth-child(6),
.motor-table td:nth-child(7){ min-width: 110px; }
.badge-status{
  padding: 7px 12px; border-radius: 999px; font-size:.68rem; font-weight:800;
  display:inline-block; white-space: nowrap; max-width:100%;
  line-height:1.35; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(72,52,212,.08), 0 6px 14px rgba(72,52,212,.08);
  min-width: 118px;
  background: linear-gradient(135deg, #f2efff, #eae6ff);
}
.btn-icon{
  width:34px; height:34px; border-radius:10px; border:1px solid #ece9f7;
  background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink-soft); transition: all .15s ease; box-shadow: 0 4px 8px rgba(76,60,160,0.04);
  position: relative;
}
.btn-icon:hover{ background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; border-color: var(--brand-1); box-shadow: 0 10px 20px rgba(72,52,212,.18); transform: translateY(-1px); }
.btn-icon.danger:hover{ background: linear-gradient(135deg, #ff7a7a, #e74c3c); border-color:#e74c3c; }
.motor-table th:nth-child(2),
.motor-table td:nth-child(2){ min-width: 180px; }
.table-responsive{ overflow-x:auto; }

.dashboard-transaksi-wrap{ overflow-x:auto; }
.dashboard-transaksi-table{ min-width: 820px; width: 100%; table-layout: fixed; }
.dashboard-transaksi-table th,
.dashboard-transaksi-table td{ white-space: normal; word-break: break-word; }
.dashboard-transaksi-table th:nth-child(1){ width: 24%; }
.dashboard-transaksi-table th:nth-child(2){ width: 24%; }
.dashboard-transaksi-table th:nth-child(3){ width: 22%; }
.dashboard-transaksi-table th:nth-child(4){ width: 12%; }
.dashboard-transaksi-table th:nth-child(5){ width: 18%; }
.dashboard-transaksi-table tbody td{ vertical-align: top; }
.dashboard-transaksi-table .fw-semibold,
.dashboard-transaksi-table .text-muted,
.dashboard-transaksi-table .badge-status{ white-space: normal; }

.avatar-sq{
  width:38px;height:38px;border-radius:10px;
  background: linear-gradient(135deg, var(--brand-3), var(--brand-1));
  color:#fff; display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size:.85rem;
}

.badge-status{
  padding: 7px 12px; border-radius: 999px; font-size:.68rem; font-weight:800;
  display:inline-block; white-space: nowrap; max-width:100%;
  line-height:1.35; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(72,52,212,.08), 0 6px 14px rgba(72,52,212,.08);
  min-width: 118px;
  background: linear-gradient(135deg, #f2efff, #eae6ff);
}
.badge-dipesan{ background:#FFF3CD; color:#8a6d1a; }
.badge-dipinjam{ background:#DCEBFF; color:#1a4d8a; }
.badge-selesai{ background:#DCF6E6; color:#177245; }
.badge-batal{ background:#FBDCE0; color:#9c1c33; }

.btn-icon{
  width:34px; height:34px; border-radius:10px; border:1px solid #ece9f7;
  background: linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink-soft); transition: all .15s ease; box-shadow: 0 4px 8px rgba(76,60,160,0.04);
  position: relative;
}
.btn-icon:hover{ background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; border-color: var(--brand-1); box-shadow: 0 10px 20px rgba(72,52,212,.18); transform: translateY(-1px); }
.btn-icon.danger:hover{ background: linear-gradient(135deg, #ff7a7a, #e74c3c); border-color:#e74c3c; }

.btn-brand-outline{
  border: 1.5px solid var(--brand-1); color: var(--brand-1); font-weight:700;
  border-radius: 10px; background:#fff;
}
.btn-brand-outline:hover{ background: var(--brand-1); color:#fff; }

.form-control, .form-select{
  border-radius: 10px; border: 1.5px solid #e8e6f3; padding: 9px 13px; font-size:.9rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-1); box-shadow: 0 0 0 .18rem rgba(108,92,231,.15);
}
label.form-label{ font-weight:600; font-size:.83rem; color: var(--ink); margin-bottom:5px;}

.section-title{ font-weight:800; font-size:1.05rem; margin-bottom:2px; }
.section-sub{ color:var(--ink-soft); font-size:.85rem; margin-bottom:20px; }

.empty-state{ text-align:center; padding: 50px 20px; color: var(--ink-soft); }
.empty-state i{ font-size:2.6rem; color:#d9d5ef; margin-bottom:12px; display:block;}

.pill-filter{
  border-radius: 20px; border: 1.5px solid #e8e6f3; background:#fff;
  padding: 6px 16px; font-size:.83rem; font-weight:600; color: var(--ink-soft);
}
.pill-filter.active{ background: var(--brand-1); color:#fff; border-color: var(--brand-1); }

.search-box{ position:relative; }
.search-box i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--ink-soft); }
.search-box input{ padding-left: 38px; border-radius: 10px; }

.alert-modern{ border:none; border-radius: 12px; font-size:.88rem; }

/* modal */
.modal-content{ border-radius: 18px; border:none; overflow:hidden;}
.modal-header{ border-bottom: 1px solid #f0eef8; padding: 18px 22px; }
.modal-body{ padding: 22px; }
.modal-footer{ border-top: 1px solid #f0eef8; padding: 16px 22px; }
.modal-title{ font-weight:800; }

.app-shell{ overflow-x:hidden; }
.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15, 23, 42, 0.45);
  z-index:99;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.sidebar-backdrop.show{
  display:block;
  opacity:1;
  pointer-events:auto;
}

body.menu-open{ overflow:hidden; }

.hamburger-btn{
  display:none; width:40px;height:40px; border-radius:10px; background:#fff;
  border:1px solid #ece9f7; align-items:center; justify-content:center; box-shadow: var(--shadow-soft);
}

@media (max-width: 1200px){
  .main-content{ padding: 22px 18px 42px; }
  .topbar h1{ font-size: 1.38rem; }
}

@media (max-width: 1024px){
  .main-content .row.g-3 > [class*='col-']{ width:50%; flex:0 0 50%; max-width:50%; }
  .main-content .row.g-3 > .col-lg-7,
  .main-content .row.g-3 > .col-lg-5{ width:100%; flex:0 0 100%; max-width:100%; }
}

@media (max-width: 991px){
  body.menu-open{ overflow:hidden; }
  .app-shell{ position:relative; }
  .sidebar{
    position:fixed; left:-280px; top:0; height:100vh; width:min(84vw, 290px);
    padding:18px 12px 16px; transition:left .22s ease, transform .22s ease; box-shadow: 20px 0 40px rgba(28, 24, 54, 0.2);
    border-right:1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); overflow-y:auto;
  }
  .sidebar::before{
    content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    pointer-events:none;
  }
  .sidebar.show{ left:0; transform: translateX(0); }
  .sidebar .brand{ padding: 8px 10px 18px; position:relative; z-index:1; }
  .sidebar .nav{ padding-right: 4px; position:relative; z-index:1; }
  .sidebar .nav-link{ padding: 12px 14px; margin-bottom: 6px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); }
  .sidebar .nav-link:hover{ background: rgba(255,255,255,.08); }
  .sidebar .nav-section-label{ padding-left:10px; position:relative; z-index:1; }
  .sidebar-foot{
    padding: 12px 6px 10px; position:absolute; left:12px; right:12px; bottom:0; z-index:2;
    background: linear-gradient(180deg, rgba(36,31,69,.82), #241f45 22%);
  }
  .sidebar .nav{ padding-bottom:86px; }
  .main-content{ padding: 18px 14px 40px; }
  .sidebar-backdrop{ display:block; }
  .hamburger-btn{ display:inline-flex; }
  .topbar{ align-items:flex-start; }
  .topbar > .d-flex{ width:100%; }
  .date-chip{ width:100%; justify-content:center; }
}

@media (max-width: 767px){
  .auth-wrap{ padding: 16px; }
  .auth-card{ flex-direction:column; min-height: auto; }
  .auth-side,
  .auth-form{ flex: 1 1 100%; }
  .auth-side{ padding: 30px 22px; }
  .auth-side .login-logo-wrap{ width:174px; height:174px; margin-bottom:18px; }
  .auth-side .login-logo{ width:154px; height:154px; }
  .auth-side .pitch{ max-width: 420px; text-align:center; margin: 0 auto; }
  .auth-side .pitch h2{ font-size: 1.25rem; }
  .auth-form{ padding: 30px 22px; }

  .topbar{ align-items:flex-start; margin-bottom: 18px; flex-direction:column; }
  .topbar h1{ font-size: 1.2rem; }
  .topbar .subtitle{ font-size: .78rem; }
  .topbar > .d-flex{ width:100%; }
  .date-chip{ width:100%; justify-content:center; }

  .main-content{ padding: 16px 12px 32px; }
  .dashboard-stats{ margin-left: -4px; margin-right: -4px; }
  .dashboard-stats > [class*='col-']{ padding-left: 4px; padding-right: 4px; }
  .dashboard-facebook .dashboard-stats .stat-card{ min-height: 88px; padding:10px 12px; }
  .dashboard-facebook .dashboard-stats .stat-card .icon-badge{ width:30px; height:30px; margin-bottom:6px; }
  .dashboard-facebook .dashboard-stats .stat-card .label{ font-size:.68rem; }
  .dashboard-facebook .dashboard-stats .stat-card .value{ font-size:1.08rem; }
  .dashboard-facebook .dashboard-stats .stat-card .trend{ font-size:.6rem; }
  .dashboard-social-nav{ min-height:64px; margin: -4px -12px 14px; padding:0 4px; border-radius:0; gap:0; }
  .dashboard-social-link{ flex-direction:column; gap:3px; font-size:.62rem; }
  .dashboard-social-link i{ font-size:1.18rem; }
  .dashboard-social-link.active::after{ left:10%; right:10%; }
  .dashboard-panels{ margin-top: .75rem !important; }
  .dashboard-panels > [class*='col-']{ min-width: 0; }
  .dashboard-panels .card-soft{ height: auto !important; }
  .dashboard-panels .card-header{ padding-top: 14px; padding-bottom: 14px; }
  .dashboard-panels .card-header > span{ min-width: 0; }
  .dashboard-panels .card-body{ padding-top: 0; padding-bottom: 14px; }
  .dashboard-panels .table-responsive{ margin-top: 2px; }
  .dashboard-detail-card{ margin-top: 14px !important; }
  .dashboard-detail-card .card-header{ padding-top: 14px; padding-bottom: 14px; }
  .dashboard-detail-card .card-body{ padding-top: 14px; }
  .dashboard-detail-card .table-responsive{ max-width: 100%; }
  .main-content .row.g-3 > [class*='col-']{ width:100%; flex:0 0 100%; max-width:100%; }
  .card-soft .card-header, .card-soft .card-body{ padding-left: 14px; padding-right: 14px; }
  .stat-card{ min-height: 112px; padding: 18px; }
  .stat-card .value{ font-size: 1.35rem; }
  .stat-card .trend{ font-size: .7rem; }
  .sidebar{ width: min(82vw, 290px); }
  .sidebar .nav-link{ font-size: .88rem; }
  .sidebar .nav-link span{ white-space:normal; }
  .user-chip{ padding: 8px 10px; }
  .user-chip .meta .name{ font-size: .8rem; }
  .user-chip a.with-label{ font-size: .72rem; }

  .row.g-3 > [class*='col-']{ width:100%; flex:0 0 100%; max-width:100%; }
  .dashboard-facebook .dashboard-stats > [class*='col-']{ width:50%; flex:0 0 50%; max-width:50%; }
  .card-header.d-flex{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .card-header .d-flex.gap-2{
    width:100%;
    flex-wrap:wrap;
  }
  .search-box{ width:100%; min-width:0; }
  .search-box input{ width:100%; }
  .card-header .btn,
  .card-header .btn-sm{
    width:100%;
    justify-content:center;
  }
  .pill-filter{ padding: 6px 12px; }
  .table-modern thead th,
  .table-modern tbody td{ padding-left: 10px; padding-right: 10px; }
  .table-modern thead th{ font-size: .68rem; }
  .table-modern tbody td{ font-size: .8rem; }
  .motor-table th:nth-child(2),
  .motor-table td:nth-child(2){ min-width: 120px; }

  .modal-dialog{ margin: 12px; }
  .modal-content{ border-radius: 16px; }
  .modal-header{ padding: 16px 18px; }
  .modal-body{ padding: 18px; }
  .modal-footer{ padding: 14px 18px; flex-direction:column-reverse; }
  .modal-footer .btn{ width:100%; }
  .modal .row.g-3 > [class*='col-']{ width:100%; flex:0 0 100%; max-width:100%; }
  .form-control, .form-select{ font-size: .9rem; padding: 0.75rem 0.8rem; }
  .btn-brand{ padding: 0.8rem 1rem; }
}

@media (max-width: 575px){
  .main-content{ padding-left: 10px; padding-right: 10px; }
  .topbar .d-flex.align-items-center.gap-3{ align-items:center; }
  .topbar .d-flex > div:last-child{ min-width:0; }
  .topbar h1{ font-size: 1.12rem; }
  .subtitle{ white-space:normal; }
  .card-soft .card-header, .card-soft .card-body{ padding-left: 12px; padding-right: 12px; }
  .page-link{ padding: .45rem .6rem; }
  .table-pagination{ align-items:flex-start; }
  .table-pagination .pagination{ width:100%; justify-content:center; }
  .dashboard-facebook .dashboard-stats{ --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }
  .dashboard-facebook .dashboard-stats .stat-card{ min-height:82px; padding:8px 10px; }
  .dashboard-facebook .dashboard-stats .stat-card .icon-badge{ width:27px; height:27px; font-size:.74rem; margin-bottom:4px; }
  .dashboard-facebook .dashboard-stats .stat-card .label{ font-size:.64rem; }
  .dashboard-facebook .dashboard-stats .stat-card .value{ font-size:1rem; }
  .dashboard-facebook .dashboard-stats .stat-card .trend{ font-size:.56rem; line-height:1.25; }
  .dashboard-social-nav{ min-height:58px; }
  .dashboard-social-link{ font-size:.58rem; }
  .dashboard-social-link i{ font-size:1.08rem; }
  .topbar .d-flex.align-items-center.gap-3{ gap: .6rem !important; }
  .main-content .topbar .d-flex.align-items-center{ width:100%; }
  .hamburger-btn{ margin-right: 4px; }
}

@media (max-width: 420px){
  .app-shell{ min-width:0; }
  .main-content{ padding-left: 8px; padding-right: 8px; }
  .topbar{ gap: 8px; }
  .topbar > .d-flex{ align-items:center; }
  .topbar h1{ font-size: 1.05rem; }
  .subtitle{ font-size: .72rem; }
  .date-chip{ font-size: .7rem; padding: 8px 10px; }
  .sidebar{ width: min(84vw, 270px); }
  .sidebar .brand{ font-size: 1rem; }
  .sidebar .brand .logo-dot{ width:30px; height:30px; font-size: .9rem; }
  .sidebar .nav-link{ padding: 10px 11px; font-size: .82rem; }
  .sidebar .nav-link i{ width:18px; }
  .user-chip{ gap:8px; }
  .user-chip .avatar{ width:30px; height:30px; font-size: .75rem; }
  .user-chip .meta .role{ display:none; }
  .card-header, .card-header span{ font-size: .8rem; }
  .btn-brand-outline, .btn-brand, .card-header .btn{ font-size: .73rem; }
  .stat-card .label{ font-size: .68rem; }
  .stat-card .value{ font-size: 1.08rem; }
  .stat-card .trend{ font-size: .64rem; }
  .alert-modern{ font-size: .77rem; padding: .7rem .8rem; }
  .table-responsive{ -webkit-overflow-scrolling: touch; }
}

@media (max-width: 390px){
  .topbar .d-flex.align-items-center.gap-3{ gap: .5rem !important; }
  .topbar h1{ font-size: 1rem; }
  .subtitle{ font-size: .68rem; }
  .sidebar .brand{ padding-left: 6px; }
  .sidebar .nav-link{ padding: 9px 10px; }
  .stat-card{ min-height: 96px; padding: 14px 12px; }
  .stat-card .icon-badge{ width:32px; height:32px; margin-bottom:10px; }
  .stat-card .value{ font-size: 1rem; }
  .card-soft .card-header, .card-soft .card-body{ padding-left: 10px; padding-right: 10px; }
  .table-modern thead th,
  .table-modern tbody td{ padding-left: 8px; padding-right: 8px; }
  .modal-footer .btn{ font-size: .75rem; padding: .7rem .85rem; }
}

@media (max-width: 480px){
  .auth-wrap{ padding: 12px; }
  .auth-side, .auth-form{ padding-left: 18px; padding-right: 18px; }

  .row.g-3 > [class*='col-']{ width:100%; flex:0 0 100%; max-width:100%; }

  .topbar{ gap:10px; }
  .topbar .d-flex{ gap:10px !important; }
  .hamburger-btn{ width:36px; height:36px; }
  .date-chip{ font-size: .72rem; }
  .btn-brand-outline{ font-size: .72rem; }
  .card-header{ font-size: .84rem; }
  .dashboard-stats{ row-gap: .6rem !important; }
  .dashboard-stats .stat-card{ border-radius: 14px; }
  .dashboard-stats .stat-card .trend{ white-space: normal; }
  .dashboard-panels .card-header > span{ max-width: 100%; }
  .dashboard-panels .card-header .btn{ width: 100%; }
  .dashboard-detail-card .card-header{ line-height: 1.45; }
  .badge-status{ font-size: .68rem; }

  .btn-icon{ width:30px; height:30px; }
  .avatar-sq{ width:32px; height:32px; }
  .card-header span{ line-height:1.4; }
  .search-box .form-control-sm{ font-size: .8rem; }
  .sidebar .brand{ font-size: 1.05rem; }
  .sidebar .brand .logo-dot{ width:32px; height:32px; }
  .sidebar .nav-link{ padding:10px 12px; }
  .sidebar .user-chip .meta .role{ display:none; }
  .modal-title{ font-size: 1.05rem; }
  .alert-modern{ font-size: .8rem; }
}