:root{
  /* Palette */
  --vt-primary:#1DA1F2;     /* electric blue accent */
  --vt-primary-2:#0F3A5F;   /* deep metallic blue */
  --vt-primary-3:#0A2540;   /* deeper metallic blue */

  /* Background */
  --vt-bg-0:#05070D;
  --vt-bg-1:#071423;
  --vt-bg-2:#0A1F33;

  /* Text / borders */
  --vt-text:#EAF4FF;
  --vt-text-muted:rgba(234,244,255,.70);
  --vt-text-strong:#EAF4FF;
  --vt-text-secondary:rgba(234,244,255,.70);
  --vt-border:rgba(255,255,255,.08);
  --vt-border-soft:rgba(255,255,255,.06);

  /* Glass */
  /* Two glass types (per requirements) */
  --vt-glass-dark:rgba(10, 25, 45, 0.65);
  --vt-glass-light:rgba(255,255,255,0.08);

  /* Defaults: use DARK glass for major surfaces */
  --vt-glass-bg:var(--vt-glass-dark);
  --vt-glass-bg-strong:rgba(10, 25, 45, 0.72);
  --vt-glass-highlight:rgba(255,255,255,.20);
  --vt-blur:16px;
  --vt-glass-border:rgba(255,255,255,.15);
  --vt-shadow:0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.20);
  --vt-shadow-hover:0 10px 30px rgba(0,150,255,.20), inset 0 1px 0 rgba(255,255,255,.22);
  --vt-reflection:linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.05) 40%, transparent 100%);

  /* Gradients */
  --vt-app-gradient:linear-gradient(180deg,var(--vt-bg-0) 0%, var(--vt-bg-2) 100%);
  --vt-nav-gradient:linear-gradient(180deg,rgba(10,37,64,.92) 0%, rgba(5,7,13,.85) 100%);
  --vt-sidebar-gradient:linear-gradient(180deg,rgba(10,37,64,.72) 0%, rgba(10,31,51,.55) 100%);
  --vt-panel-gradient:linear-gradient(180deg,rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%);

  /* Radius / motion */
  --vt-radius:12px;
  --vt-ease:cubic-bezier(.2,.8,.2,1);
}

body{
  background:linear-gradient(135deg, #0A1F33, #0F3A5F);
  color:var(--vt-text-strong);
}

/* Text visibility safety */
a,
button,
input,
select,
textarea{
  color:inherit;
  mix-blend-mode:normal;
}
.icon,
.fa,
[class*="icon-"],
[class^="icon-"]{
  color:inherit;
}
.text-muted,
small,
.help-block,
.widget-body,
.panel-body{
  color:var(--vt-text-secondary);
}

/* Clamp common low-contrast patterns */
[style*="opacity:0."]{
  opacity:1!important;
}

/* Hover should never reduce contrast */
a:hover,
a:focus,
button:hover,
button:focus,
.btn:hover,
.btn:focus{
  color:#fff!important;
  text-shadow:0 0 8px rgba(0,150,255,.60);
  mix-blend-mode:normal;
}

/* Unified hover background for interactive items (keeps contrast) */
a:hover,
a:focus{
  background:rgba(30,120,200,.25);
}

/* =========================
   Tables / grids visibility
   ========================= */
table,
.table,
.data-table,
table.dataTable{
  background:transparent!important;
  color:#EAF4FF!important;
}
.table th,
.table td,
table th,
table td{
  color:#EAF4FF!important;
}

/* Remove accidental white backgrounds in table cells/rows */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td{
  background-color:transparent!important;
}

/* Head */
.table > thead,
table > thead{
  background:rgba(10,25,45,0.80)!important;
}
.table > thead > tr > th,
.table > thead > tr > td{
  background:rgba(10,25,45,0.80)!important;
  border-color:rgba(255,255,255,0.12)!important;
}

/* Body rows (striped) */
.table > tbody > tr,
table > tbody > tr{
  background:rgba(10,25,45,0.55)!important;
  color:#EAF4FF!important;
}
.table > tbody > tr:nth-child(even),
table > tbody > tr:nth-child(even){
  background:rgba(10,25,45,0.65)!important;
}
.table > tbody > tr:nth-child(odd),
table > tbody > tr:nth-child(odd){
  background:rgba(10,25,45,0.50)!important;
}

/* Hover */
.table > tbody > tr:hover,
table > tbody > tr:hover{
  background:rgba(30,120,200,0.20)!important;
  color:#fff!important;
}
.table > tbody > tr:hover > td,
table > tbody > tr:hover > td{
  color:#fff!important;
}

/* Active/selected rows commonly use `.active` */
.table > tbody > tr.active,
table > tbody > tr.active,
.table > tbody > tr.selected,
table > tbody > tr.selected{
  background:rgba(30,120,200,0.30)!important;
  box-shadow:inset 3px 0 0 #1DA1F2;
}
.table > tbody > tr.active > td,
.table > tbody > tr.selected > td{
  color:#fff!important;
}

/* History containers should not wash out rows */
#ajax-history .table-responsive,
#ajax-history .table,
#history_tab .table-responsive,
#history_tab .table{
  background:transparent!important;
}

/* ===== Contrast + glass consistency (current page components) ===== */

/* Buttons that were light by default */
.btn,
.btn-default,
.btn-side,
.btn-main{
  color:var(--vt-text-strong)!important;
  background:transparent;
  border-color:rgba(255,255,255,.15)!important;
}
.btn-default{
  background:rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  backdrop-filter:blur(var(--vt-blur)) saturate(160%);
}
.btn-default:hover,
.btn-side:hover,
.btn-main:hover{
  background:rgba(30,120,200,.20)!important;
  color:#fff!important;
}

/* Pills/labels/badges readable on glass */
.label,
.badge{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.15);
}
.label-default,
.badge-default{
  background:rgba(255,255,255,.08)!important;
  color:var(--vt-text-strong)!important;
}

/* Pagination */
.pagination>li>a,
.pagination>li>span{
  background:rgba(10,25,45,.55)!important;
  color:rgba(234,244,255,.70)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus{
  background:rgba(30,120,200,.20)!important;
  color:#fff!important;
}
.pagination>.active>a,
.pagination>.active>span{
  background:rgba(30,120,200,.25)!important;
  color:#fff!important;
}

/* Tooltips */
.tooltip .tooltip-inner{
  background:rgba(10,25,45,.78)!important;
  color:var(--vt-text-strong)!important;
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
}
.tooltip.top .tooltip-arrow,
.tooltip.right .tooltip-arrow,
.tooltip.bottom .tooltip-arrow,
.tooltip.left .tooltip-arrow{
  opacity:.75;
}

/* Forms (inputs/selects) inside modals/panels/widgets */
.modal-content .form-control,
.panel .form-control,
#sidebar .form-control,
#widgets .form-control{
  background:rgba(255,255,255,.08)!important;
  color:var(--vt-text-strong)!important;
  border:1px solid rgba(255,255,255,.15)!important;
}
.modal-content .form-control::placeholder,
.panel .form-control::placeholder,
#sidebar .form-control::placeholder,
#widgets .form-control::placeholder{
  color:rgba(234,244,255,.50)!important;
}
.modal-content .form-control:focus{
  border-color:#1DA1F2!important;
  box-shadow:0 0 8px rgba(0, 150, 255, 0.4);
  outline:none;
}
.panel .form-control:focus,
#sidebar .form-control:focus,
#widgets .form-control:focus{
  border-color:#1DA1F2!important;
  box-shadow:0 0 0 3px rgba(29,161,242,.18);
}

/* Smooth, subtle interactions (no layout changes) */
*{
  transition:
    background-color .25s var(--vt-ease),
    border-color .25s var(--vt-ease),
    color .25s var(--vt-ease),
    box-shadow .25s var(--vt-ease),
    transform .25s var(--vt-ease),
    filter .25s var(--vt-ease);
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}

/* Glass (apply to existing containers only) */
#header .main-navbar,
#sidebar .sidebar-content,
#sidebarMenu,
.panel,
.dropdown-menu,
.leaflet-control-layers,
.ui-dialog,
#widgets .widgets-content,
#widgets .widget,
#map-controls{
  background:var(--vt-glass-bg)!important;
  background-image:var(--vt-reflection);
  border:1px solid var(--vt-glass-border)!important;
  border-radius:var(--vt-radius);
  box-shadow:var(--vt-shadow);
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  backdrop-filter:blur(var(--vt-blur)) saturate(160%);
}

/* Navbar / header */
#header .main-navbar,
#header.folded:before{
  background:var(--vt-glass-bg)!important;
  background-image:var(--vt-reflection)!important;
  border-bottom:1px solid var(--vt-glass-border)!important;
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(180%);
  backdrop-filter:blur(var(--vt-blur)) saturate(180%);
  box-shadow:var(--vt-shadow);
}

/* Admin header uses `.navbar-main` without `#header` */
.navbar-main{
  background:var(--vt-glass-bg)!important;
  background-image:var(--vt-reflection)!important;
  border-bottom:1px solid var(--vt-glass-border)!important;
  box-shadow:var(--vt-shadow), 0 1px 0 rgba(29,161,242,.18);
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  backdrop-filter:blur(var(--vt-blur)) saturate(160%);
}
.navbar-main .navbar-text{
  color:var(--vt-text-strong)!important;
}
.navbar-main .navbar-nav>li>a{
  color:var(--vt-text-strong)!important;
  text-shadow:none;
}
.navbar-main .navbar-nav>li>a:hover,
.navbar-main .navbar-nav>li>a:focus{
  background:rgba(30,120,200,.25)!important;
  color:#fff!important;
  text-shadow:0 0 8px rgba(0,150,255,.55);
}
#header .container>.navbar-header,
#header .container>.navbar-collapse,
#header .container-fluid>.navbar-header,
#header .container-fluid>.navbar-collapse{
  background-image:var(--vt-nav-gradient)!important;
  background-color:transparent!important;
}
#header .navbar .navbar-brand,
#header .navbar .navbar-nav{
  background:transparent!important;
  border-bottom:1px solid transparent!important;
}
#header .navbar-nav>li>a{
  color:var(--vt-text-strong)!important;
}
#header .navbar-nav>li>a:hover,
#header .navbar-nav>li>a:focus{
  color:#fff!important;
  background:rgba(30,120,200,.25)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
  filter:brightness(1.05);
  text-shadow:0 0 8px rgba(0,150,255,.55);
}

/* Frontend header items (Tools/Setup/Chat/My account/Language) */
#header .navbar-nav>li>a>.text,
#header .navbar-nav>li>a>.icon,
#header .navbar-nav>li>a>span{
  color:inherit!important;
}
#header .navbar-nav>li.open>a,
#header .navbar-nav>li.active>a{
  background:rgba(30,120,200,.22)!important;
  color:#fff!important;
}

/* subtle bottom border glow */
#header .main-navbar{
  box-shadow:var(--vt-shadow), 0 1px 0 rgba(29,161,242,.20);
}

/* Sidebar */
#sidebar .sidebar-content{
  background-image:var(--vt-sidebar-gradient)!important;
  border-right:1px solid var(--vt-border)!important;
}

/* =========================
   Vehicle List Panel (ONLY)
   ========================= */

/* Panel container */
#sidebar .sidebar-content{
  background:var(--vt-glass-dark)!important;
  background-image:var(--vt-reflection)!important;
  border:1px solid var(--vt-glass-border)!important;
  border-radius:12px;
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  box-shadow:var(--vt-shadow);
  /* Extend only the bottom slightly (no top shift) */
  min-height:calc(100% + 20px);
}

/* "All Vehicles" header (best-effort: any sidebar panel title text) */
#sidebar .tab-pane-header,
#sidebar .tab-pane-header *{
  color:var(--vt-text-strong);
}
#sidebar .tab-pane-header{
  font-weight:700;
  text-shadow:0 0 8px rgba(0,150,255,.40);
}

/* Status tabs (Move/Idle/Stop/Offline/etc.) */
#sidebar .status-row,
#sidebar .row-status{
  color:var(--vt-text-secondary);
}
#sidebar .status-row a,
#sidebar .row-status a,
#sidebar .status-row .stat-box,
#sidebar .row-status .stat-box{
  color:var(--vt-text-secondary)!important;
  border-radius:8px;
}
#sidebar .status-row a:hover,
#sidebar .row-status a:hover,
#sidebar .status-row .stat-box:hover,
#sidebar .row-status .stat-box:hover{
  background:rgba(30,120,200,.20)!important;
  color:#fff!important;
}
#sidebar .status-row .active,
#sidebar .row-status .active{
  background:rgba(30,120,200,.25)!important;
  color:#fff!important;
  border-radius:8px;
}

/* Objects / Events / History tab bar */
#sidebar .nav.nav-tabs.nav-default{
  background:rgba(255,255,255,0.05)!important;
  border:1px solid rgba(255,255,255,0.10)!important;
  border-radius:12px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
#sidebar .nav.nav-tabs.nav-default>li>a{
  background:transparent!important;
  color:rgba(234,244,255,0.65)!important;
  border-radius:8px;
  text-shadow:none!important;
}
#sidebar .nav.nav-tabs.nav-default>li>a:hover,
#sidebar .nav.nav-tabs.nav-default>li>a:focus{
  background:rgba(30,120,200,.15)!important;
  color:#fff!important;
  text-shadow:0 0 6px rgba(0,150,255,0.4)!important;
}
#sidebar .nav.nav-tabs.nav-default>li.active>a,
#sidebar .nav.nav-tabs.nav-default>li.active>a:hover,
#sidebar .nav.nav-tabs.nav-default>li.active>a:focus{
  background:rgba(30,120,200,.25)!important;
  color:#fff!important;
  border-radius:8px;
  text-shadow:0 0 6px rgba(0,150,255,0.4)!important;
}

/* Search bar */
#sidebar .form-group.search .form-control,
#sidebar input[name="search"].form-control{
  background:rgba(255,255,255,0.08)!important;
  color:#EAF4FF!important;
  border:1px solid rgba(255,255,255,0.15)!important;
}
#sidebar .form-group.search .form-control::placeholder,
#sidebar input[name="search"].form-control::placeholder{
  color:rgba(234,244,255,0.50)!important;
  opacity:1;
}
#sidebar .form-group.search .form-control:focus,
#sidebar input[name="search"].form-control:focus{
  border-color:#1DA1F2!important;
  box-shadow:0 0 0 3px rgba(29,161,242,.18);
}

/* Vehicle list items */
#sidebar .group-list>li{
  background:transparent!important;
  color:#EAF4FF!important;
  position:relative;
  padding:12px!important;
  margin:0 8px 8px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05)!important;
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 8px 20px rgba(0,0,0,0.20);
}
#sidebar .group-list>li:hover{
  background:rgba(30,120,200,0.15)!important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,150,255,0.20), inset 0 0 0 1px rgba(255,255,255,0.10);
}
#sidebar .group-list>li.active{
  background:rgba(30,120,200,0.25)!important;
  border-left:3px solid #1DA1F2;
  box-shadow:0 8px 20px rgba(0,150,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Left side: checkbox + name + time */
#sidebar .group-list>li .checkbox input[type="checkbox"]{
  accent-color:#1DA1F2;
}
#sidebar .group-list > li > .name span[data-device="name"]{
  font-weight:600;
}
#sidebar .group-list > li > .name [data-device="time"]{
  opacity:1;
}

/* Right side: speed + status badge + menu */
#sidebar .group-list > li > .details [data-device="speed"]{
  font-weight:700;
  color:rgba(29,161,242,0.95)!important;
}

/* Status badge (use existing status element; unhide text, turn into pill) */
#sidebar .group-list > li > .details [data-device="status"]{
  width:auto!important;
  height:auto!important;
  border-radius:8px!important;
  padding:4px 8px!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  text-indent:0!important;
  overflow:visible!important;
  line-height:1!important;
  font-size:11px!important;
  color:#EAF4FF!important;
  background-clip:padding-box;
}

/* Three dots menu: circular button feel */
#sidebar .group-list>li .btn.icon.options{
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
}
#sidebar .group-list>li .btn.icon.options:hover{
  background:rgba(30,120,200,0.20)!important;
  box-shadow:0 0 0 3px rgba(29,161,242,0.18);
}

/* Status tabs: pill buttons */
#sidebar .row-status .stat-box{
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(10,25,45,0.35)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter:blur(12px) saturate(160%);
}
#sidebar .row-status .stat-box:hover{
  background:rgba(30,120,200,0.18)!important;
}

/* Status tabs: full-width equal pills (remove empty space) */
#sidebar .row-status{
  display:flex;
  width:100%;
  gap:6px;
  margin-left:0!important;
  margin-right:0!important;
}
#sidebar .row-status > .statuss{
  flex:1 1 0%;
  padding-left:0!important;
  padding-right:0!important;
  float:none!important;
}
#sidebar .row-status .stat-box{
  width:100%;
  margin-bottom:0;
}

/* Status colors: strong, visible (title only; no dots) */
#sidebar .row-status .stat-box .title{
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(234,244,255,0.70);
}

/* Order: 1=All, 2=Move, 3=Idle, 4=Stop, 5=Offline, 6=Inactive (Unreach removed) */
#sidebar .row-status > .statuss:nth-child(2) .title{ color:#00E676; }

#sidebar .row-status > .statuss:nth-child(3) .title{ color:#FFD600; }

#sidebar .row-status > .statuss:nth-child(4) .title{ color:#FF5252; }

#sidebar .row-status > .statuss:nth-child(5) .title{ color:#40C4FF; }

#sidebar .row-status > .statuss:nth-child(6) .title{ color:rgba(255,255,255,0.50); }

/* =========================
   Device list (Objects tab)
   interaction + dropdown
   ========================= */

/*
 * Escape sidebar width: `data-position="fixed"` + ddp_set() uses position:fixed.
 * Any ancestor with backdrop-filter, transform, or filter becomes the containing block
 * (fixed stops being viewport-relative), so the menu stays trapped inside ~350px.
 * While a row actions menu is open, drop those traps and overflow clipping on the chain.
 */
#sidebar:has(.group-list .btn-group.open){
  overflow:visible!important;
}
#sidebar .sidebar-content:has(.group-list .btn-group.open),
#sidebar .tab-content:has(.group-list .btn-group.open),
#sidebar .tab-pane-body:has(.group-list .btn-group.open){
  overflow:visible!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
#sidebar .group-list>li:has(.btn-group.open){
  transform:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Ensure actions area is clickable immediately */
#sidebar .group-list>li .details{
  position:relative;
  z-index:2;
}
#sidebar .group-list>li .btn-group{
  position:relative;
  z-index:10;
}
#sidebar .group-list>li .btn.icon.options{
  position:relative;
  z-index:10;
  cursor:pointer;
  pointer-events:auto;
  padding:6px;
  border-radius:6px;
}

/* Prevent clipping of dropdown by row/table layout */
#sidebar .group-list,
#sidebar .group-list>li{
  overflow:visible!important;
}

/*
 * Three-dot menu (Objects item): open to the RIGHT of the icon into the map area.
 * Do NOT set position:fixed here — app.js ddp_set() sets fixed + pixel top/left on show.
 * No transform on the menu (avoids extra stacking / compositor quirks with fixed).
 */
#sidebar .group-list .btn-group.dropleft.droparrow > .dropdown-menu{
  display:none;
  opacity:0;
  pointer-events:none;

  position:absolute;
  top:-9px;
  left:100%;
  right:auto;
  margin-left:10px;

  z-index:11000!important;
  background:rgba(10,25,45,0.95)!important;
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.15)!important;
  border-radius:10px;
  padding:6px 0;
  box-shadow:0 10px 30px rgba(0,0,0,0.40);
  transition:opacity .18s ease;
}

#sidebar .group-list .btn-group.dropleft.droparrow.open > .dropdown-menu{
  display:block!important;
  opacity:1;
  pointer-events:auto;
}

/* Guardrail: never open dropdown on row hover */
#sidebar .group-list>li:hover .btn-group.dropleft.droparrow > .dropdown-menu{
  display:none;
}
#sidebar .group-list>li:hover .btn-group.dropleft.droparrow.open > .dropdown-menu{
  display:block!important;
}

/* Dropdown items */
#sidebar .group-list .dropdown-menu > li > a{
  padding:8px 12px;
  color:#EAF4FF!important;
  background:transparent!important;
}
#sidebar .group-list .dropdown-menu > li > a:hover,
#sidebar .group-list .dropdown-menu > li > a:focus{
  background:rgba(30,120,200,0.20)!important;
  color:#fff!important;
}

/* Device name + time visibility (existing markup) */
#sidebar .group-list > li > .name > [data-device="name"],
#sidebar .group-list > li > .name span[data-device="name"]{
  color:#fff!important;
  font-weight:600;
  font-size:14px;
}
#sidebar .group-list > li > .name [data-device="time"]{
  color:rgba(234,244,255,0.75)!important;
  font-size:12px;
}
#sidebar .group-list > li > .details [data-device="speed"],
#sidebar .group-list > li > .details [data-device="status-text"]{
  color:rgba(234,244,255,0.80)!important;
}

/* Checkbox accent */
#sidebar .group-list input[type="checkbox"]{
  accent-color:#1DA1F2;
}

/* Status dot colors */
#sidebar [data-device="status"][title*="moving"],
#sidebar .device-status.moving{
  background-color:#1DA1F2!important;
}
#sidebar .group-heading{
  background:var(--vt-glass-bg-strong)!important;
  color:var(--vt-text)!important;
  border:1px solid var(--vt-border-soft);
  border-radius:10px;
}
#sidebar .group-heading:hover{
  background:rgba(30,120,200,.25)!important;
  transform:scale(1.02);
  filter:brightness(1.05);
  box-shadow:var(--vt-shadow-hover);
}
#sidebar .group-list>li:hover{
  background:rgba(30,120,200,.20)!important;
  transform:scale(1.02);
  box-shadow:0 0 0 1px rgba(29,161,242,.12) inset;
  filter:brightness(1.05);
}
#sidebar .group-list>li.active{
  background:rgba(30,120,200,.30)!important;
  box-shadow:
    0 0 0 1px rgba(29,161,242,.18) inset,
    0 0 18px rgba(29,161,242,.14);
}
#sidebar .group-list>li.active>*:last-child{
  border-right-color:var(--vt-primary)!important;
}

/* Panels / cards (modals have their own block below) */
.panel{
  background:var(--vt-panel-gradient)!important;
  border:1px solid var(--vt-border)!important;
  border-radius:14px;
  box-shadow:var(--vt-shadow);
}
.panel-heading,
.panel-default>.panel-heading{
  background:rgba(255,255,255,.06)!important;
  border-color:var(--vt-border)!important;
  color:var(--vt-text)!important;
}

.panel:hover{
  transform:scale(1.02);
  box-shadow:var(--vt-shadow-hover), var(--vt-shadow);
  filter:brightness(1.05);
}

/* =========================
   Modals — global glass (all Bootstrap modals)
   ========================= */

.modal-content{
  background:rgba(10, 25, 45, 0.85)!important;
  background-image:var(--vt-reflection);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255, 255, 255, 0.15)!important;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0, 0, 0, 0.5);
  color:#EAF4FF;
}

.modal-header,
.modal-footer{
  background:transparent!important;
  border-color:rgba(255, 255, 255, 0.1)!important;
  color:var(--vt-text-strong);
}

.modal-body{
  background:transparent;
  color:#EAF4FF;
}

.modal-title{
  color:#ffffff;
  font-weight:600;
}

.modal-content .close{
  color:#EAF4FF;
  text-shadow:none;
  opacity:.85;
}
.modal-content .close:hover,
.modal-content .close:focus{
  color:#fff;
  opacity:1;
}

.modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="image"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
.modal-content select,
.modal-content textarea{
  background:rgba(255, 255, 255, 0.08)!important;
  color:#EAF4FF!important;
  border:1px solid rgba(255, 255, 255, 0.15)!important;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder{
  color:rgba(234, 244, 255, 0.5);
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus{
  border-color:#1DA1F2!important;
  box-shadow:0 0 8px rgba(0, 150, 255, 0.4);
  outline:none;
}

.modal-content .btn{
  border-radius:8px;
}

.modal-backdrop{
  background:rgba(5, 10, 20, 0.6);
}

.modal-backdrop.in{
  opacity:1;
}

.modal-dialog{
  background:transparent;
}

.modal-content select option{
  background-color:#0A1F33;
  color:#EAF4FF;
}

/* Modal tab bars — match sidebar Objects / Events / History (nav-default pill bar) */
.modal-content .nav-tabs{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:6px;
  padding:6px;
  margin-bottom:12px;

  border:none!important;
  border-bottom:none!important;
  background:rgba(255,255,255,0.05)!important;
  border:1px solid rgba(255,255,255,0.10)!important;
  border-radius:12px;
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
}

.modal-content .nav-tabs > li,
.modal-content .nav-tabs .nav-item{
  float:none!important;
  flex:1 1 0;
  min-width:0;
  display:block;
  margin-bottom:0!important;
}

.modal-content .nav-tabs > li > a,
.modal-content .nav-tabs .nav-link{
  display:block;
  width:100%;
  margin:0!important;
  border:none!important;
  border-radius:8px;
  padding:8px 10px;
  text-align:center;

  background:transparent!important;
  color:rgba(234,244,255,0.65)!important;
  text-shadow:none!important;

  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, text-shadow .2s ease;
}

.modal-content .nav-tabs > li > a:hover,
.modal-content .nav-tabs > li > a:focus,
.modal-content .nav-tabs .nav-link:hover,
.modal-content .nav-tabs .nav-link:focus{
  background:rgba(30,120,200,.15)!important;
  color:#fff!important;
  text-shadow:0 0 6px rgba(0,150,255,0.4)!important;
}

.modal-content .nav-tabs > li.active > a,
.modal-content .nav-tabs > li.active > a:hover,
.modal-content .nav-tabs > li.active > a:focus,
.modal-content .nav-tabs .nav-link.active,
.modal-content .nav-tabs .nav-link.active:hover,
.modal-content .nav-tabs .nav-link.active:focus{
  background:rgba(30,120,200,.25)!important;
  color:#fff!important;
  border:none!important;
  border-radius:8px;
  text-shadow:0 0 6px rgba(0,150,255,0.4)!important;
  box-shadow:0 0 10px rgba(0,150,255,0.3);
}

.modal-content .nav-tabs .nav-link::after,
.modal-content .nav-tabs > li > a::after,
.modal-content .nav-tabs > li::after,
.modal-content .nav-tabs > li.active > a::after,
.modal-content .nav.nav-tabs.nav-default > li.active:after,
.modal-content .nav-tabs > li.active:after{
  display:none!important;
  content:none!important;
}

/* Buttons */
.btn-primary,
.btn-action{
  position:relative;
  background-image:linear-gradient(180deg, rgba(29,161,242,.95) 0%, rgba(15,58,95,.95) 100%)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border-radius:12px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 10px 28px rgba(0,0,0,.28);
  overflow:hidden;
}
.btn-primary:before,
.btn-action:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:55%;
  background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-action:hover,
.btn-action:focus{
  background-image:linear-gradient(180deg, rgba(75,190,255,.98) 0%, rgba(29,161,242,.88) 60%, rgba(15,58,95,.95) 100%)!important;
  border-color:rgba(255,255,255,.14)!important;
  transform:scale(1.02);
  box-shadow:var(--vt-shadow-hover), 0 0 0 1px rgba(255,255,255,.12) inset;
  filter:brightness(1.05);
}

/* Tables / lists */
.table>thead>tr>th,
.table>thead>tr>td{
  color:var(--vt-text)!important;
  background:rgba(255,255,255,.06)!important;
  border-color:var(--vt-border)!important;
}
.table>tbody>tr>td{
  border-top:1px solid rgba(255,255,255,.06)!important;
}
.table.table-hover>tbody>tr:hover>td{
  background:rgba(29,161,242,.10)!important;
  filter:brightness(1.02);
}

.table>tbody>tr{
  background:rgba(255,255,255,.03);
}
.table>tbody>tr:hover{
  transform:scale(1.01);
  filter:brightness(1.03);
}

/* Map container (keeps map tiles unchanged) */
#map,
#map_canvas,
.map,
.map-container{
  background:transparent;
}

/* Subtle scrollbar (no over-glow) */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
::-webkit-scrollbar-thumb{background:rgba(29,161,242,.22);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(29,161,242,.32)}
*{scrollbar-width:thin;scrollbar-color:rgba(29,161,242,.22) rgba(255,255,255,.04)}

/* Left-side quick menu (Dashboard/Reports/Send command/etc.) */
#sidebarMenu{
  background-image:var(--vt-sidebar-gradient)!important;
  background:var(--vt-glass-bg)!important;
  background-image:var(--vt-reflection);
  border:1px solid var(--vt-glass-border)!important;
  border-radius:14px;
  box-shadow:var(--vt-shadow);
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  /* Match vehicle list bottom extension */
  min-height:calc(100% + 20px);
}
.sidebarMenuInner li a{
  color:var(--vt-text)!important;
  border-radius:12px;
}
.sidebarMenuInner li a .icon,
.sidebarMenuInner li a .blank{
  color:var(--vt-text-muted)!important;
}
.sidebarMenuInner li a:hover,
.sidebarMenuInner li a:focus{
  color:#fff!important;
  background:rgba(30,120,200,.25)!important;
  transform:scale(1.02);
  filter:brightness(1.05);
  box-shadow:var(--vt-shadow-hover);
}
.sidebarMenuInner li a:hover .icon,
.sidebarMenuInner li a:focus .icon{
  color:var(--vt-primary)!important;
}

/* Dropdowns / menus */
.dropdown-menu{
  background:var(--vt-glass-bg)!important;
  background-image:var(--vt-reflection);
  border:1px solid var(--vt-glass-border)!important;
  border-radius:14px;
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  backdrop-filter:blur(var(--vt-blur)) saturate(160%);
  box-shadow:var(--vt-shadow);
}

/* Right-side widgets (Objects / Location / Driver / etc.) */
#widgets,
#widgets .widgets-content,
#widgets .widget{
  color:var(--vt-text-strong);
}
#widgets .widgets-content{
  background:var(--vt-glass-bg)!important;
  background-image:var(--vt-reflection)!important;
  border:1px solid var(--vt-glass-border)!important;
  box-shadow:var(--vt-shadow);
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(180%);
  backdrop-filter:blur(var(--vt-blur)) saturate(180%);
}
#widgets .widget{
  background:var(--vt-glass-bg)!important;
  background-image:var(--vt-reflection)!important;
  border:1px solid var(--vt-glass-border)!important;
  box-shadow:var(--vt-shadow);
  -webkit-backdrop-filter:blur(var(--vt-blur)) saturate(180%);
  backdrop-filter:blur(var(--vt-blur)) saturate(180%);
  border-radius:14px;
}
#widgets .widget:hover{
  transform:scale(1.02);
  filter:brightness(1.05);
  box-shadow:var(--vt-shadow-hover);
}
#widgets .widget-heading,
#widgets .widget>.panel-heading,
#widgets .panel-default>.widget-heading{
  background:rgba(255,255,255,.08)!important;
  background-image:var(--vt-reflection)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  color:var(--vt-text-strong)!important;
}
#widgets .widget-title,
#widgets .widget-title [data-device="name"]{
  font-weight:700!important;
  color:var(--vt-text-strong)!important;
}
#widgets .widget-body,
#widgets .widget-body td,
#widgets .widget-body span{
  color:var(--vt-text-secondary)!important;
}
#widgets .widget-body a:hover,
#widgets .widget-body a:focus{
  color:#fff!important;
  text-shadow:0 0 8px rgba(0,150,255,.60);
}
.dropdown-menu>li>a{
  color:var(--vt-text)!important;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus{
  background:rgba(29,161,242,.12)!important;
  color:var(--vt-primary)!important;
}