/* GPS WoxTrack - Full Theme System */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap');

/* ============================================================ DARK THEME (default) */
:root,[data-theme="dark"]{
  --bg-dark:#0b0e14;--bg-panel:#111520;--bg-card:#151a28;--bg-card2:#1a2035;
  --border:#1e2d45;--border-glow:#00e5ff33;--accent:#00e5ff;--accent2:#0099cc;
  --accent-dim:#00e5ff22;--accent-hover:#33eeff;--green:#00ff7f;--green-dim:#00ff7f22;
  --red:#ff3d6a;--red-dim:#ff3d6a22;--orange:#ff9500;--yellow:#ffd600;--purple:#a855f7;
  --text-primary:#e8f4fc;--text-sec:#7a9bbf;--text-dim:#3a5070;
  --shadow:0 4px 24px rgba(0,0,0,0.55);--shadow-sm:0 2px 8px rgba(0,0,0,0.35);
  --glow:0 0 20px rgba(0,229,255,0.15);--popup-bg:#111520;--popup-border:#1e2d45;
  --scrollbar-bg:#0b0e14;--scrollbar-th:#1e2d45;
  --cluster-sm:#00e5ffdd;--cluster-md:#ff9500dd;--cluster-lg:#ff3d6add;--cluster-txt:#000;
}

/* ============================================================ COLORFUL THEME */
[data-theme="colorful"]{
  --bg-dark:#f0f4ff;--bg-panel:#ffffff;--bg-card:#f7f9ff;--bg-card2:#eef1fb;
  --border:#d1d9f0;--border-glow:#6366f133;--accent:#6366f1;--accent2:#4f46e5;
  --accent-dim:#6366f115;--accent-hover:#818cf8;--green:#10b981;--green-dim:#10b98115;
  --red:#ef4444;--red-dim:#ef444415;--orange:#f97316;--yellow:#f59e0b;--purple:#a855f7;
  --text-primary:#1e293b;--text-sec:#64748b;--text-dim:#94a3b8;
  --shadow:0 4px 20px rgba(99,102,241,0.12);--shadow-sm:0 2px 8px rgba(99,102,241,0.08);
  --glow:0 0 24px rgba(99,102,241,0.18);--popup-bg:#ffffff;--popup-border:#d1d9f0;
  --scrollbar-bg:#f0f4ff;--scrollbar-th:#c7d2fe;
  --cluster-sm:#6366f1ee;--cluster-md:#f97316ee;--cluster-lg:#ef4444ee;--cluster-txt:#fff;
}
[data-theme="colorful"] .sidebar{background:linear-gradient(180deg,#fff 0%,#f7f9ff 100%)!important;}
[data-theme="colorful"] .topbar{background:linear-gradient(90deg,#6366f1,#4f46e5)!important;border-bottom-color:#4f46e5!important;}
[data-theme="colorful"] .topbar-title,[data-theme="colorful"] .topbar .stat-chip{color:rgba(255,255,255,0.92)!important;}
[data-theme="colorful"] .topbar .stat-chip{background:rgba(255,255,255,0.15)!important;border-color:rgba(255,255,255,0.25)!important;}
[data-theme="colorful"] .topbar .stat-chip .val{color:#fff!important;}
[data-theme="colorful"] .topbar .btn-primary{background:#fff;color:#4f46e5!important;}
[data-theme="colorful"] .topbar .btn-ghost{color:rgba(255,255,255,0.85)!important;border-color:rgba(255,255,255,0.3)!important;}
[data-theme="colorful"] .topbar .refresh-indicator{background:rgba(255,255,255,0.15)!important;border-color:rgba(255,255,255,0.25)!important;color:rgba(255,255,255,0.85)!important;}
[data-theme="colorful"] .sidebar::after{background:linear-gradient(to bottom,transparent,#6366f1,transparent);}
[data-theme="colorful"] .stat-card::before{background:linear-gradient(90deg,var(--accent),var(--purple),transparent);}
[data-theme="colorful"] .card-header{background:linear-gradient(90deg,rgba(99,102,241,0.07),transparent);}
[data-theme="colorful"] .login-page{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);}
[data-theme="colorful"] .login-page::before{opacity:0.06;}
[data-theme="colorful"] .login-box{background:#fff;border-top-color:#6366f1;}
[data-theme="colorful"] .marker-wrap{background:#fff;}
[data-theme="colorful"] ::-webkit-scrollbar-thumb{background:#c7d2fe;}
[data-theme="colorful"] .loading-overlay{background:rgba(240,244,255,0.85);}
[data-theme="colorful"] .map-tile-switcher .tile-btn{background:rgba(255,255,255,0.95);}

/* ============================================================ SHARED VARS */
:root{--sidebar-w:280px;--topbar-h:58px;--radius:6px;--radius-lg:10px;
  --font-main:'Exo 2',sans-serif;--font-head:'Rajdhani',sans-serif;}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg-dark);color:var(--text-primary);font-family:var(--font-main);font-size:13px;line-height:1.5;transition:background .3s,color .3s;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--scrollbar-bg);}
::-webkit-scrollbar-thumb{background:var(--scrollbar-th);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent2);}

/* ============================================================ THEME TOGGLE */
.theme-toggle-btn{
  display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;
  border:1px solid var(--border);background:var(--bg-card);color:var(--text-sec);
  cursor:pointer;font-family:var(--font-head);font-size:12px;font-weight:600;
  letter-spacing:.5px;transition:all .2s;white-space:nowrap;
}
.theme-toggle-btn:hover{border-color:var(--accent);color:var(--accent);}
.theme-toggle-btn .th-icon{font-size:15px;transition:transform .4s;}
.theme-toggle-btn:hover .th-icon{transform:rotate(25deg);}

/* ============================================================ LOGIN */
.login-page{
  display:flex;align-items:center;justify-content:center;
  height:100vh;background:var(--bg-dark);position:relative;
  background-image:radial-gradient(ellipse at 20% 50%,rgba(0,229,255,.05) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(0,153,204,.05) 0%,transparent 60%);
}
.login-page::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:40px 40px;opacity:.3;
}
.login-box{
  position:relative;z-index:1;background:var(--bg-panel);border:1px solid var(--border);
  border-top:2px solid var(--accent);border-radius:var(--radius-lg);padding:40px;width:380px;
  box-shadow:var(--shadow),var(--glow);transition:background .3s;
}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo .logo-icon{font-size:48px;display:block;margin-bottom:10px;filter:drop-shadow(0 0 10px var(--accent));}
.login-logo h1{font-family:var(--font-head);font-size:28px;font-weight:700;color:var(--accent);letter-spacing:3px;text-transform:uppercase;}
.login-logo p{color:var(--text-sec);font-size:12px;letter-spacing:1px;}
.login-theme-row{display:flex;justify-content:flex-end;margin-bottom:14px;}

/* ============================================================ LAYOUT */
.app-wrapper{display:flex;height:100vh;overflow:hidden;}

/* ============================================================ SIDEBAR */
.sidebar{
  width:var(--sidebar-w);background:var(--bg-panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;position:relative;z-index:100;
  transition:background .3s,border-color .3s;
}
.sidebar::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);opacity:.3;
}
.sidebar-logo{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.sidebar-logo .logo-mark{
  width:32px;height:32px;background:var(--accent);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:0 0 12px var(--accent);flex-shrink:0;
}
.sidebar-logo h2{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:2px;}
.sidebar-logo span{color:var(--accent);}

.sidebar-search{padding:12px 16px;border-bottom:1px solid var(--border);}
.sidebar-search input{
  width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:7px 12px 7px 30px;color:var(--text-primary);font-family:var(--font-main);font-size:12px;
  outline:none;transition:border-color .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a9bbf' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:9px center;
}
.sidebar-search input:focus{border-color:var(--accent);}
.sidebar-search input::placeholder{color:var(--text-dim);}

.device-list{flex:1;overflow-y:auto;padding:8px 0;}
.device-list-header{padding:6px 16px;color:var(--text-dim);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-head);}
.device-item{padding:10px 16px;cursor:pointer;border-left:3px solid transparent;transition:all .15s;display:flex;align-items:center;gap:10px;}
.device-item:hover{background:var(--accent-dim);border-left-color:var(--accent2);}
.device-item.active{background:var(--accent-dim);border-left-color:var(--accent);}
.device-item.active .device-name{color:var(--accent);}
.device-icon-wrap{width:34px;height:34px;border-radius:50%;background:var(--bg-card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:border-color .2s;}
.device-item.status-online .device-icon-wrap{border-color:var(--green);box-shadow:0 0 8px var(--green-dim);}
.device-item.status-offline .device-icon-wrap{border-color:var(--text-dim);}
.device-item.status-unknown .device-icon-wrap{border-color:var(--orange);}
.device-info{flex:1;min-width:0;}
.device-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.device-meta{font-size:11px;color:var(--text-sec);display:flex;align-items:center;gap:6px;margin-top:2px;}
.device-speed{color:var(--accent);font-size:11px;}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.status-online .status-dot,.status-dot.online{background:var(--green);box-shadow:0 0 5px var(--green);}
.status-offline .status-dot,.status-dot.offline{background:var(--text-dim);}
.status-unknown .status-dot,.status-dot.unknown{background:var(--orange);}

.sidebar-footer{border-top:1px solid var(--border);padding:12px 16px;}
.sidebar-footer .user-info{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}
.user-details .user-name{font-size:13px;font-weight:600;}
.user-details .user-role{font-size:11px;color:var(--text-sec);}
.sidebar-nav{display:flex;gap:4px;flex-wrap:wrap;}
.nav-icon-btn{flex:1;min-width:28px;padding:7px 4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-sec);cursor:pointer;font-size:14px;text-align:center;transition:all .15s;}
.nav-icon-btn:hover,.nav-icon-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}

/* ============================================================ MAIN */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}

/* ============================================================ TOPBAR */
.topbar{
  height:var(--topbar-h);background:var(--bg-panel);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;z-index:50;
  transition:background .3s,border-color .3s;
}
.topbar-title{font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:1px;color:var(--text-primary);flex:1;}
.topbar-title span{color:var(--accent);}
.topbar-stats{display:flex;gap:8px;}
.stat-chip{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;font-size:12px;transition:background .3s;}
.stat-chip .val{font-weight:700;color:var(--accent);font-family:var(--font-head);font-size:14px;}
.stat-chip.online .val{color:var(--green);}
.stat-chip.offline .val{color:var(--red);}
.topbar-actions{display:flex;gap:6px;align-items:center;}

/* Refresh indicator */
.refresh-indicator{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:20px;
  font-size:11px;color:var(--text-sec);font-family:var(--font-head);white-space:nowrap;
}
.refresh-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;}
.refresh-dot.paused{background:var(--text-dim)!important;animation:none!important;}
.refresh-dot.live{animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.refresh-ring{position:relative;width:20px;height:20px;flex-shrink:0;}
.refresh-ring svg{transform:rotate(-90deg);}
.refresh-ring .r-track{stroke:var(--border);fill:none;}
.refresh-ring .r-fill{stroke:var(--accent);fill:none;stroke-linecap:round;transition:stroke-dashoffset 1s linear;}

/* ============================================================ MAP */
.map-container{flex:1;position:relative;overflow:hidden;}
#map{width:100%;height:100%;}

.map-panel{position:absolute;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);z-index:400;transition:background .3s;}
.map-panel-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.map-panel-header h3{font-family:var(--font-head);font-size:15px;font-weight:700;letter-spacing:1px;color:var(--accent);}
.map-panel-body{padding:14px 16px;}
.device-detail-panel{bottom:16px;left:16px;right:16px;max-height:220px;display:none;}
.device-detail-panel.show{display:block;}
.device-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
.detail-cell{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;}
.detail-cell .lbl{font-size:10px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:3px;}
.detail-cell .val{font-size:14px;font-weight:600;font-family:var(--font-head);color:var(--text-primary);}
.detail-cell .val.accent{color:var(--accent);}
.detail-cell .val.green{color:var(--green);}

.map-controls{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:6px;z-index:400;}
.map-ctrl-btn{width:36px;height:36px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-sec);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:var(--shadow-sm);}
.map-ctrl-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.map-ctrl-btn.active{background:var(--accent);color:#000;border-color:var(--accent);}

/* Tile Switcher */
.map-tile-switcher{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:400;flex-wrap:wrap;max-width:calc(100% - 60px);}
.tile-btn{padding:5px 10px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-sec);cursor:pointer;font-size:11px;font-family:var(--font-head);font-weight:600;letter-spacing:.5px;transition:all .15s;box-shadow:var(--shadow-sm);white-space:nowrap;}
.tile-btn:hover{border-color:var(--accent);color:var(--accent);}
.tile-btn.active{background:var(--accent);color:#000;border-color:var(--accent);}

/* ============================================================ CONTENT */
.content-area{flex:1;overflow-y:auto;padding:20px;display:none;}
.content-area.active{display:block;}

/* ============================================================ CARD */
.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:20px;overflow:hidden;transition:background .3s,border-color .3s;}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,var(--bg-card2),transparent);}
.card-header h2{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:1px;color:var(--text-primary);}
.card-header h2 span{color:var(--accent);}
.card-body{padding:18px;}

/* ============================================================ TABLE */
.data-table{width:100%;border-collapse:collapse;}
.data-table th{text-align:left;padding:9px 12px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);font-family:var(--font-head);white-space:nowrap;}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-primary);font-size:13px;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--accent-dim);}
.data-table td .actions{display:flex;gap:6px;}

/* ============================================================ FORMS */
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:11px;color:var(--text-sec);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;font-family:var(--font-head);}
.form-control{width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;color:var(--text-primary);font-family:var(--font-main);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s;}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.form-control::placeholder{color:var(--text-dim);}
select.form-control{cursor:pointer;}
select.form-control option{background:var(--bg-card2);color:var(--text-primary);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}

/* ============================================================ BUTTONS */
.btn{padding:8px 16px;border-radius:var(--radius);font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:.5px;cursor:pointer;border:1px solid transparent;transition:all .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:#000;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 16px var(--accent);}
.btn-success{background:var(--green);color:#000;border-color:var(--green);}
.btn-danger{background:transparent;color:var(--red);border-color:var(--red);}
.btn-danger:hover{background:var(--red-dim);}
.btn-ghost{background:transparent;color:var(--text-sec);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:5px 10px;font-size:12px;}

/* ============================================================ MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.show{display:flex;}
.modal{background:var(--bg-panel);border:1px solid var(--border);border-top:2px solid var(--accent);border-radius:var(--radius-lg);width:90%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow),var(--glow);animation:modalIn .2s ease;}
.modal-lg{max-width:720px;}
@keyframes modalIn{from{opacity:0;transform:translateY(-18px) scale(.97)}}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{font-family:var(--font-head);font-size:17px;font-weight:700;letter-spacing:1px;color:var(--accent);}
.modal-body{padding:20px;}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}
.close-btn{width:28px;height:28px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-sec);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.close-btn:hover{background:var(--red-dim);border-color:var(--red);color:var(--red);}

/* ============================================================ TOAST */
#toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 18px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;gap:10px;min-width:280px;box-shadow:var(--shadow);animation:toastIn .3s ease;font-size:13px;}
.toast.success{border-left:3px solid var(--green);}
.toast.error{border-left:3px solid var(--red);}
.toast.info{border-left:3px solid var(--accent);}
.toast.warning{border-left:3px solid var(--orange);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}}

/* ============================================================ LOADING */
.loading-overlay{position:absolute;inset:0;background:rgba(11,14,20,.8);z-index:999;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;}
.loading-overlay.show{display:flex;}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================ BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;font-family:var(--font-head);letter-spacing:.5px;}
.badge-green{background:var(--green-dim);color:var(--green);border:1px solid var(--green);}
.badge-red{background:var(--red-dim);color:var(--red);border:1px solid var(--red);}
.badge-orange{background:rgba(255,149,0,.15);color:var(--orange);border:1px solid var(--orange);}
.badge-blue{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent);}
.badge-dim{background:var(--bg-card);color:var(--text-dim);border:1px solid var(--border);}

/* ============================================================ TABS */
.tab-nav{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.tab-btn{padding:9px 18px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-sec);cursor:pointer;font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:.5px;transition:all .15s;}
.tab-btn:hover{color:var(--text-primary);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* ============================================================ STATS */
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:20px;}
.stat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;position:relative;overflow:hidden;transition:background .3s,border-color .3s;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);}
.stat-card .s-label{font-size:10px;color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-head);}
.stat-card .s-value{font-size:28px;font-weight:700;font-family:var(--font-head);color:var(--accent);line-height:1.2;margin:4px 0;}
.stat-card .s-sub{font-size:11px;color:var(--text-sec);}
.stat-card .s-icon{position:absolute;right:14px;top:12px;font-size:28px;opacity:.2;}

/* ============================================================ REPORTS */
.report-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.summary-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;}
.summary-item .s-lbl{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;}
.summary-item .s-val{font-size:16px;font-weight:700;font-family:var(--font-head);color:var(--accent);margin-top:2px;}

/* ============================================================ MISC */
.text-accent{color:var(--accent);}.text-green{color:var(--green);}.text-red{color:var(--red);}
.text-orange{color:var(--orange);}.text-dim{color:var(--text-dim);}.text-sec{color:var(--text-sec);}
.text-center{text-align:center;}.fw-bold{font-weight:700;}.font-head{font-family:var(--font-head);}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.d-flex{display:flex}.align-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:8px}.gap-2{gap:16px}.flex-1{flex:1}.w-100{width:100%}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-dim);}
.empty-state .empty-icon{font-size:48px;display:block;margin-bottom:12px;opacity:.5;}
.empty-state p{font-size:14px;}
.code-block{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:monospace;font-size:12px;color:var(--accent);overflow-x:auto;white-space:pre;}
.progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:4px;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:2px;transition:width .3s;}

/* ============================================================ TOGGLE */
.toggle-wrap{display:flex;align-items:center;gap:10px;}
.toggle{position:relative;width:40px;height:20px;cursor:pointer;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:20px;transition:.2s;}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--text-dim);border-radius:50%;transition:.2s;}
.toggle input:checked + .toggle-slider{background:var(--accent);}
.toggle input:checked + .toggle-slider::before{transform:translateX(20px);background:#000;}

/* ============================================================ MARKERS */
.vehicle-marker{background:none!important;border:none!important;}
.marker-wrap{width:36px;height:36px;border-radius:50%;background:var(--bg-panel);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 10px var(--accent),0 2px 8px rgba(0,0,0,.5);position:relative;}
.marker-wrap.offline{border-color:var(--text-dim);box-shadow:none;}
.marker-wrap.moving{border-color:var(--green);box-shadow:0 0 10px var(--green);}
.marker-pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);animation:pulse 2s infinite;}
@keyframes pulse{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}

/* ============================================================ CLUSTER */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:transparent!important;}
.marker-cluster-small div{background:var(--cluster-sm)!important;}
.marker-cluster-medium div{background:var(--cluster-md)!important;}
.marker-cluster-large div{background:var(--cluster-lg)!important;}
.marker-cluster{width:40px!important;height:40px!important;}
.marker-cluster div{width:36px!important;height:36px!important;margin-left:2px!important;margin-top:2px!important;border-radius:50%!important;font-family:var(--font-head)!important;font-size:14px!important;font-weight:700!important;line-height:36px!important;color:var(--cluster-txt)!important;box-shadow:0 0 12px rgba(0,0,0,.4)!important;text-align:center!important;}
.marker-cluster-small{opacity:.92;}.marker-cluster-medium{opacity:.95;}.marker-cluster-large{opacity:1;}

/* ============================================================ LEAFLET POPUP */
.leaflet-popup-content-wrapper{background:var(--popup-bg)!important;border:1px solid var(--popup-border)!important;color:var(--text-primary)!important;border-radius:8px!important;box-shadow:0 4px 24px rgba(0,0,0,.5)!important;}
.leaflet-popup-tip{background:var(--popup-bg)!important;}
.leaflet-popup-content{margin:12px 14px!important;color:var(--text-primary)!important;}
.leaflet-control-zoom{display:none;}

/* ============================================================ RESPONSIVE */
@media(max-width:900px){
  :root{--sidebar-w:64px;}
  .sidebar-logo h2,.device-info,.sidebar-search,.device-list-header,.user-details{display:none;}
  .device-icon-wrap{width:40px;height:40px;font-size:20px;}
  .device-item{padding:10px 12px;justify-content:center;}
  .sidebar-footer .user-info{display:none;}
  .topbar-stats{display:none;}
  .map-tile-switcher{display:none;}
  .refresh-indicator .ri-label{display:none;}
}

/* ============================================================
   TOPBAR ICON STAT CARDS
   ============================================================ */
.tb-stat-card {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: default;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.tb-stat-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  border-radius: 3px 0 0 3px;
}
.tb-stat-card.online::before  { background: var(--green); }
.tb-stat-card.offline::before { background: var(--red); }
.tb-stat-card.moving::before  { background: var(--orange); }

.tb-stat-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.tb-stat-card.online:hover  { border-color: var(--green); }
.tb-stat-card.offline:hover { border-color: var(--red); }
.tb-stat-card.moving:hover  { border-color: var(--orange); }

.tb-stat-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: var(--accent); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tb-stat-icon.online  { stroke: var(--green); }
.tb-stat-icon.offline { stroke: var(--red); }
.tb-stat-icon.moving  { stroke: var(--orange); fill: var(--orange); }

.tb-stat-info { display: flex; flex-direction: column; line-height: 1.1; }
.tb-stat-val  {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  color: var(--accent); line-height: 1;
}
.tb-stat-val.online  { color: var(--green); }
.tb-stat-val.offline { color: var(--red); }
.tb-stat-val.moving  { color: var(--orange); }
.tb-stat-lbl {
  font-size: 9px; color: var(--text-dim); letter-spacing: 1px;
  text-transform: uppercase; font-family: var(--font-head);
}

/* ============================================================
   TOPBAR ICON ACTION BUTTONS
   ============================================================ */
.tb-icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-sec);
  flex-shrink: 0;
}
.tb-icon-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tb-icon-btn svg .fill-pulse { fill: currentColor; }
.tb-icon-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.tb-icon-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  box-shadow: 0 0 10px var(--accent);
}
.tb-icon-btn.active svg { stroke: #000; }

/* Colorful theme topbar overrides for icon btns */
[data-theme="colorful"] .tb-stat-card      { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; }
[data-theme="colorful"] .tb-stat-val       { color: #fff !important; }
[data-theme="colorful"] .tb-stat-val.online{ color: #6ee7b7 !important; }
[data-theme="colorful"] .tb-stat-val.offline{color: #fca5a5 !important; }
[data-theme="colorful"] .tb-stat-val.moving{ color: #fcd34d !important; }
[data-theme="colorful"] .tb-stat-lbl       { color: rgba(255,255,255,0.6) !important; }
[data-theme="colorful"] .tb-stat-icon      { stroke: #fff !important; }
[data-theme="colorful"] .tb-stat-card::before { background: rgba(255,255,255,0.5); }
[data-theme="colorful"] .tb-icon-btn       { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; color: rgba(255,255,255,0.85) !important; }
[data-theme="colorful"] .tb-icon-btn:hover { background: rgba(255,255,255,0.3) !important; color: #fff !important; border-color: #fff !important; }
[data-theme="colorful"] .tb-icon-btn.active{ background: #fff !important; color: #4f46e5 !important; border-color: #fff !important; box-shadow: 0 0 12px rgba(255,255,255,0.4); }
[data-theme="colorful"] .tb-icon-btn.active svg { stroke: #4f46e5 !important; }