*{box-sizing:border-box;margin:0;padding:0}
html{font-family:'Inter',system-ui,sans-serif;color:#151515;background:#f7f8fa;font-size:15px}
body{min-height:100vh}
button,input,select{font:inherit}

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

/* Sidebar */
.sidebar{width:265px;background:#fff;border-right:1px solid #e9ebef;display:flex;flex-direction:column;padding:24px 16px 16px;position:fixed;inset:0 auto 0 0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;padding:0 12px 28px}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand strong{display:block;font-size:18px;letter-spacing:-.4px}
.brand span{font-size:11px;color:#969ba5;font-weight:600;text-transform:uppercase;letter-spacing:1.2px}

.nav{flex:1}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#a2a6ae;font-weight:600;padding:18px 12px 8px}
.nav-item{width:100%;height:46px;border:0;background:transparent;border-radius:10px;display:flex;align-items:center;gap:12px;padding:0 14px;color:#555a63;font-size:14px;font-weight:500;cursor:pointer;text-align:left;text-decoration:none;transition:.2s}
.nav-item i{font-size:20px;color:#757b85}
.nav-item:hover{background:#f7f7f8;color:#191a1d}
.nav-item.active{background:#fff1e8;color:#e95f00;font-weight:600}
.nav-item.active i{color:#f06b08}
.nav-item b{margin-left:auto;font-size:11px;background:#f1f2f4;color:#62676f;padding:3px 8px;border-radius:20px}
.nav-item .dot{width:8px;height:8px;padding:0;background:#f36b00;border-radius:50%;margin-left:auto}

.sidebar-bottom{border-top:1px solid #eee;padding-top:16px}
.city-card{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #eceef1;border-radius:10px;margin-bottom:12px}
.city-icon{width:34px;height:34px;border-radius:8px;background:#fff2e9;color:#ee6807;display:grid;place-items:center}
.city-icon i{font-size:18px}
.city-card div:nth-child(2){flex:1}
.city-card span,.city-card strong{display:block}
.city-card span{font-size:11px;color:#9b9fa7}
.city-card strong{font-size:13px}
.city-card>i{font-size:16px;color:#9ca0a7}

.admin-profile{display:flex;align-items:center;gap:10px;padding:8px}
.avatar,.top-avatar{display:grid;place-items:center;border-radius:50%;background:#151515;color:#fff;font-weight:600}
.avatar{width:36px;height:36px;font-size:13px}
.admin-info{flex:1}
.admin-info strong,.admin-info span{display:block}
.admin-info strong{font-size:13px}
.admin-info span{font-size:11px;color:#999da5}

.icon-btn{border:0;background:transparent;color:#70757e;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:#f3f4f5}

/* Main Layout */
.main{margin-left:265px;width:calc(100% - 265px);min-width:0}
.topbar{height:84px;background:#fff;border-bottom:1px solid #e9ebef;display:flex;align-items:center;justify-content:space-between;padding:0 36px;position:sticky;top:0;z-index:10}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:#90949c;margin-bottom:4px}
.breadcrumb i{font-size:12px}
.breadcrumb strong{color:#5f646d;font-weight:500}
.topbar-title h1{font-size:22px;letter-spacing:-.5px;color:#111}
.topbar-actions{display:flex;align-items:center;gap:10px}
.notification{position:relative}
.notification span{position:absolute;width:8px;height:8px;background:#f36b00;border:2px solid white;border-radius:50%;top:8px;right:8px}
.top-avatar{width:38px;height:38px;font-size:13px}
.mobile-menu{display:none}

.content{padding:32px 36px 60px;max-width:1600px;margin:auto}
.page-section{display:none}
.page-section.active{display:block}

.welcome-row,.section-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow{font-size:12px;color:#8b909a;margin-bottom:6px;font-weight:500}
.welcome-row h2,.section-toolbar h2{font-size:24px;letter-spacing:-.5px;color:#151515}
.welcome-row h2 span{font-size:20px}
.muted{font-size:13px;color:#7a808d;margin-top:4px}

.primary-btn{border:0;background:#f36b00;color:#fff;border-radius:9px;padding:12px 18px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 3px 10px #f36b0025}
.primary-btn:hover{background:#dc5e00}
.primary-btn i{font-size:18px}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.stats-grid.compact{margin-bottom:24px}
.stat-card,.panel{background:#fff;border:1px solid #e8eaee;border-radius:12px;box-shadow:0 1px 3px #12182006}
.stat-card{padding:20px;min-width:0}
.stat-top{display:flex;align-items:center;justify-content:space-between;color:#6f747e;font-size:13px;font-weight:500}
.stat-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.stat-icon i{font-size:20px}
.orange{background:#fff0e6;color:#ef6805}
.blue{background:#edf4ff;color:#3976d8}
.green{background:#eaf8f1;color:#19925b}
.purple{background:#f2efff;color:#7456cc}

.stat-number{display:block;font-size:28px;letter-spacing:-1px;margin-top:14px;color:#111;font-weight:700}
.stat-number small{font-size:13px;font-weight:500;letter-spacing:0;color:#6b707a}
.trend{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:8px;color:#7a808a}
.trend i{font-size:16px}
.trend.up{color:#1a9a5b}
.trend.up span,.trend.neutral span{color:#7a808a}
.trend.down{color:#db5a4c}
.status-pulse{width:8px;height:8px;border-radius:50%;background:#25ad68;box-shadow:0 0 0 4px #25ad6818}

.sparkline{height:34px;display:flex;align-items:end;gap:5px;margin-top:12px}
.sparkline span{flex:1;border-radius:3px 3px 1px 1px;background:#ffe1cc}
.sparkline span:last-child{background:#f36b00}

.mini-progress{height:6px;background:#edf0f2;border-radius:10px;margin-top:14px;overflow:hidden}
.mini-progress div{height:100%;border-radius:10px;background:#20a765}
.purple-progress div{background:#7456cc}
.progress-caption{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:#80848d}
.progress-caption strong{color:#454a53}

/* Grids & Panels */
.dashboard-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px}
.bottom-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.panel{padding:20px}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.panel-header h3{font-size:16px;letter-spacing:-.2px;color:#151515}
.panel-header p{font-size:12px;color:#8a8f9a;margin-top:4px}
.panel-header select{border:1px solid #e2e5e9;background:#fff;border-radius:8px;padding:8px 12px;font-size:12px;color:#5d626b;outline:none}

/* Charts */
.chart-wrap{height:285px;display:flex;gap:12px}
.chart-y{width:34px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:#9b9fb0;padding:7px 0 25px}
.chart-area{position:relative;flex:1;padding-bottom:25px}
.grid-line{height:1px;background:#f0f1f3;position:relative;top:15px;margin-bottom:45px}
.line-chart{position:absolute;inset:6px 0 29px;width:100%;height:225px;overflow:visible}
.chart-x{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;color:#9599a4;font-size:11px}

/* Activity List */
.activity-panel{display:flex;flex-direction:column}
.live{font-size:12px;color:#19a05d;display:flex;align-items:center;gap:6px;font-weight:500}
.live i{width:8px;height:8px;background:#1da966;border-radius:50%;box-shadow:0 0 0 4px #1da96616}
.activity-list{flex:1}
.activity-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f1f3}
.activity-item:last-child{border-bottom:0}
.activity-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none}
.activity-icon i{font-size:18px}
.activity-icon.ride{background:#fff0e5;color:#ef6908}
.activity-icon.person{background:#f0f4ff;color:#527ad4}
.activity-icon.payment{background:#eaf8f0;color:#1b9a5d}
.activity-icon.driver{background:#f2efff;color:#7657cc}
.activity-item>div:nth-child(2){flex:1}
.activity-item strong,.activity-item span{display:block}
.activity-item strong{font-size:13px;font-weight:600;color:#222}
.activity-item span{font-size:11px;color:#8a8e98;margin-top:3px}
.activity-item>b{font-size:12px;color:#19975a}

.green-text{color:#19975a!important}
.ghost-btn{border:0;background:#f6f7f8;color:#5d626b;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer}
.ghost-btn:hover{background:#ededef}
.full{width:100%;margin-top:10px}
.ghost-btn i,.link-btn i{font-size:15px;vertical-align:middle}
.table-panel{overflow:hidden}
.link-btn{border:0;background:none;color:#e76508;font-size:13px;cursor:pointer;font-weight:600}
.table-scroll{overflow-x:auto}

/* Tables */
table{width:100%;border-collapse:collapse;min-width:720px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#80858f;font-weight:600;padding:12px 10px;border-bottom:1px solid #eceef1}
td{font-size:13px;color:#4a505b;padding:14px 10px;border-bottom:1px solid #f0f1f3;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td strong{color:#222;font-weight:600}
.user-cell{display:flex;align-items:center;gap:10px}
.mini-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:#f2f2f2;color:#555}
.a1{background:#ffe5d3;color:#b9581b}
.a2{background:#e7f0ff;color:#4c71ad}
.a3{background:#e7f7ef;color:#31845b}
.a4{background:#f0eafa;color:#7658a8}
.mini-avatar.driver{background:#f0f1f2;color:#444}

.badge{display:inline-flex;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:600}
.badge.success{background:#e9f8ef;color:#1b9258}
.badge.warning{background:#fff3df;color:#b86b0b}
.badge.neutral{background:#eef0f2;color:#636870}
.badge.danger{background:#fff0ef;color:#d6574b}
.table-more{border:0;background:none;color:#91949c;cursor:pointer;letter-spacing:1px;font-size:16px}

/* Driver Stats & Lists */
.driver-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 16px}
.driver-stats div{background:#fafafa;border-radius:9px;padding:12px}
.driver-stats strong,.driver-stats span{display:block}
.driver-stats strong{font-size:20px;color:#111}
.driver-stats span{font-size:11px;color:#8a8e98;margin-top:3px}
.driver-bar{height:8px;background:#f0f1f2;border-radius:10px;overflow:hidden;display:flex}
.driver-bar span:nth-child(1){background:#22a966}
.driver-bar span:nth-child(2){background:#f2a62c}
.driver-bar span:nth-child(3){background:#d7dade}
.legend{display:flex;gap:14px;font-size:11px;color:#7c818a;margin:10px 0 14px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:block}
.l-online{background:#22a966}
.l-ride{background:#f2a62c}
.l-offline{background:#d7dade}
.driver-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #f0f1f3}
.driver-row>div{flex:1}
.driver-row strong,.driver-row span{display:block}
.driver-row strong{font-size:13px;color:#222}
.driver-row span:not(.mini-avatar){font-size:11px;color:#8a8e98;margin-top:3px}
.online-dot,.busy-dot{width:8px;height:8px;border-radius:50%;background:#20a766}
.busy-dot{background:#f1a32c}

.filter-row{display:flex;gap:10px;margin-bottom:18px}
.search{height:42px;flex:1;max-width:450px;background:#fff;border:1px solid #e2e5e9;border-radius:9px;display:flex;align-items:center;padding:0 14px;gap:10px}
.search i{font-size:18px;color:#90959f}
.search input{border:0;outline:0;width:100%;font-size:13px;color:#333}

.standalone{padding:0}
.standalone table th,.standalone table td{padding:15px 16px}
.standalone small{display:block;color:#8a8e98;font-size:11px;margin-top:3px}

.placeholder-page{min-height:500px}
.empty-card{background:#fff;border:1px solid #e8eaee;border-radius:14px;min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.empty-icon{width:64px;height:64px;border-radius:16px;background:#fff0e6;color:#ef6805;display:grid;place-items:center;margin-bottom:18px}
.empty-icon i{font-size:30px}
.empty-card h2{font-size:20px;color:#151515}
.empty-card p{font-size:13px;color:#8a8e98;margin:6px 0 20px}

.toast{position:fixed;right:28px;bottom:28px;background:#171717;color:white;padding:14px 18px;border-radius:10px;font-size:13px;display:flex;align-items:center;gap:10px;transform:translateY(100px);opacity:0;transition:.3s;z-index:50;box-shadow:0 6px 20px #00000022}
.toast.show{transform:translateY(0);opacity:1}
.toast i{color:#5ee19a;font-size:18px}
.mobile-overlay{display:none}

@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid,.bottom-grid{grid-template-columns:1fr}
  .sidebar{width:240px}
  .main{margin-left:240px;width:calc(100% - 240px)}
  .content{padding:28px 24px 50px}
}
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:.25s;width:275px;box-shadow:10px 0 35px #00000012}
  .sidebar.open{transform:translateX(0)}
  .mobile-overlay{position:fixed;inset:0;background:#10101055;z-index:15}
  .mobile-overlay.show{display:block}
  .main{margin-left:0;width:100%}
  .topbar{height:72px;padding:0 18px}
  .mobile-menu{display:grid;margin-right:6px}
  .topbar-title{margin-right:auto}
  .breadcrumb{display:none}
  .topbar-title h1{font-size:19px}
  .content{padding:22px 16px 40px}
  .welcome-row,.section-toolbar{align-items:flex-start;flex-direction:column}
  .welcome-row .primary-btn,.section-toolbar .primary-btn{width:100%;justify-content:center}
  .stats-grid{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card{padding:16px}
  .stat-number{font-size:24px}
}