/* ATS UI bundle — generated by scripts/build-ats-ui-bundle.py — do not edit */

/* ===== ats-ui/base.css ===== */
/* ============================================================
   ATS UI — design tokens + overrides for the platform theme
   Loaded after the base theme css (worldsee/facelift/...)
   ============================================================ */

:root {
  --font-size: 15px;

  /* type scale (from the reference design) */
  --text-base: 15px; /* page titles */
  --text-sm: 13px;   /* card titles, table text */
  --text-xs: 11px;   /* labels, descriptions, breadcrumb, table numbers */
  --text-stat: 24px; /* big stat numbers */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --background: #f0f4f9;
  --foreground: #0f1923;
  --card: #ffffff;
  --card-foreground: #0f1923;
  --popover: #ffffff;
  --popover-foreground: #0f1923;
  --primary: #1a6ed8;
  --primary-hover: #1559b3;
  --primary-active: #114a95;
  --primary-foreground: #ffffff;
  --secondary: #e8eef7;
  --secondary-foreground: #374a63;
  --muted: #e8eef7;
  --muted-foreground: #6b82a0;
  --accent: #ddeaf8;
  --accent-foreground: #1a6ed8;
  --destructive: #e03d3d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.09);
  --input-background: #edf2f8;
  --switch-background: #c5d4e8;
  --ats-switch-pad: 2px;
  --ats-switch-knob: 18px;
  --ats-switch-width: 40px;
  --ats-switch-height: 22px;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #1a6ed8;
  --chart-1: #1a6ed8;
  --chart-2: #1a6ed8;
  --chart-3: #f59e0b;
  --chart-4: #e03d3d;
  --chart-5: #a78bfa;
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --sidebar: #ffffff;
  --sidebar-foreground: #0f1923;
  --sidebar-primary: #1a6ed8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #edf2f8;
  --sidebar-accent-foreground: #374a63;
  --sidebar-border: rgba(0, 0, 0, 0.07);
  --sidebar-ring: #1a6ed8;
}

/* ---------- base typography ---------- */

html {
  font-size: var(--font-size);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

body, h1, h2, h3, h4, h5, h6,
input, button, select, textarea,
table, .btn, .form-control, .dropdown-menu,
.nav, .panel, .modal, .tooltip, .popover {
  font-family: 'Cairo', system-ui, -apple-system, "Segoe UI", sans-serif;
}

[dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] input, [dir="rtl"] button, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] table, [dir="rtl"] .btn, [dir="rtl"] .form-control, [dir="rtl"] .dropdown-menu,
[dir="rtl"] .nav, [dir="rtl"] .panel, [dir="rtl"] .modal, [dir="rtl"] .tooltip, [dir="rtl"] .popover {
  font-family: 'Cairo', system-ui, -apple-system, "Segoe UI", sans-serif;
}

code, pre, kbd, samp {
  font-family: 'JetBrains Mono', monospace;
}

.is-hidden {
  display: none !important;
}

/* Map-side panels — always on physical left (RTL-safe) */
.geographic-page,
.geographic-form-panel.is-open,
.geographic-form-panel.is-open .geographic-form-panel__sheet,
#geographic_page,
#geographic-form-panel.is-open,
.sharing-page,
#sharing_page,
.maintenance-schedule-panel__sheet,
.command-logs-page {
  left: 0 !important;
  right: auto !important;
}

[dir="rtl"] .geographic-page,
[dir="rtl"] .geographic-form-panel.is-open,
[dir="rtl"] .geographic-form-panel.is-open .geographic-form-panel__sheet,
[dir="rtl"] #geographic_page,
[dir="rtl"] #geographic-form-panel.is-open,
[dir="rtl"] .sharing-page,
[dir="rtl"] #sharing_page,
[dir="rtl"] .maintenance-schedule-panel__sheet,
[dir="rtl"] .command-logs-page {
  left: 0 !important;
  right: auto !important;
}

[dir="rtl"] .maintenance-schedule-panel__sheet {
  transform: translateX(-105%);
}

[dir="rtl"] .maintenance-schedule-panel.is-open .maintenance-schedule-panel__sheet {
  transform: translateX(0);
}

/* Bootstrap-select menus inside map-side panels open over the map (left) */
.geographic-page .bootstrap-select .dropdown-menu,
.geographic-form-panel .bootstrap-select .dropdown-menu,
.command-logs-page .bootstrap-select .dropdown-menu {
  left: 0 !important;
  right: auto !important;
}

/* Submenus fly out toward the map (left), not toward the rail */
[dir="rtl"] .dropdown-submenu > .dropdown-menu {
  left: auto !important;
  right: 100% !important;
  margin-left: 0 !important;
  margin-right: -1px !important;
  transform-origin: right center;
  animation: ats-submenu-slide-in 0.24s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.dropdown-submenu > .dropdown-menu {
  animation: ats-submenu-slide-in 0.24s cubic-bezier(0.25, 0.8, 0.25, 1) both;
  transform-origin: left center;
}

@keyframes ats-submenu-slide-in {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

body {
  margin-bottom: 0 !important;
}

.phpdebugbar,
.phpdebugbar-openhandler {
  display: none !important;
}

h1 { font-weight: var(--font-weight-medium); line-height: 1.5; }
h2 { font-weight: var(--font-weight-medium); line-height: 1.5; }
h3 { font-weight: var(--font-weight-medium); line-height: 1.5; }
h4 { font-weight: var(--font-weight-medium); line-height: 1.5; }
label { font-weight: var(--font-weight-medium); line-height: 1.5; }
button, .btn { font-weight: var(--font-weight-medium); line-height: 1.5; }
input, .form-control { font-weight: var(--font-weight-normal); }

a { color: #1a6ed8; }
a:hover, a:focus { color: #1559b3; text-decoration: none; }

/* Kill legacy theme teal/cyan link hover from worldsee.css (#11637a) */
.btn-link,
.btn-link:visited {
  color: #1a6ed8 !important;
}

.btn-link:hover,
.btn-link:focus {
  color: #1559b3 !important;
}

/* Panel / card action links ("عرض الكل", view map, etc.) — locked to brand blue */
.fleet-panel__link,
.dash-cam-event-card__link,
[class*="__link"]:not(.login-app-badges__link) {
  color: #1a6ed8 !important;
  text-decoration: none;
}

.fleet-panel__link:hover,
.fleet-panel__link:focus,
.dash-cam-event-card__link:hover,
.dash-cam-event-card__link:focus,
[class*="__link"]:not(.login-app-badges__link):hover,
[class*="__link"]:not(.login-app-badges__link):focus {
  color: #1a6ed8 !important;
  text-decoration: none;
  opacity: 0.88;
}

/* ---------- buttons: one flat system — static, no motion, hover = blue ---------- */

.btn {
  border-radius: var(--radius-md);
  background-image: none !important; /* kill theme gradients */
  transition: none !important;
}

/* no lift/press motion anywhere */
.btn:hover, .btn:focus, .btn:active, .btn.active {
  transform: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* every button turns blue on hover/focus */
.btn:hover, .btn:focus, .btn.focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-foreground) !important;
}

.btn:active, .btn.active,
.open > .btn.dropdown-toggle {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
  color: var(--primary-foreground) !important;
}

.btn-primary, .btn-action, .btn-main {
  color: var(--primary-foreground) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-default, .btn-side {
  color: var(--secondary-foreground);
  background-color: var(--secondary);
  border-color: var(--border);
}

.btn-danger {
  background-color: var(--destructive) !important;
  border-color: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}

.btn-success { background-color: var(--chart-2) !important; border-color: var(--chart-2) !important; }
.btn-warning { background-color: var(--chart-3) !important; border-color: var(--chart-3) !important; }

/* hover wins over the variant colors above */
.btn-danger:hover, .btn-danger:focus,
.btn-success:hover, .btn-success:focus,
.btn-warning:hover, .btn-warning:focus,
.btn-info:hover, .btn-info:focus,
.btn-default:hover, .btn-default:focus,
.btn-side:hover, .btn-side:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-action:hover, .btn-action:focus,
.btn-main:hover, .btn-main:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-foreground) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- forms ---------- */

.form-control,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea {
  background-color: var(--input-background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  box-shadow: none;
}

.form-control::placeholder { color: var(--muted-foreground); }

.form-control:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--ring) !important;
  background-color: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent) !important;
  outline: none;
}

/* ---------- unified search field ---------- */

.ats-search {
  position: relative;
  width: 100%;
}

.ats-search__field {
  position: relative;
  width: 100%;
}

.ats-search__icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.ats-search__input,
.ats-search__input.form-control {
  display: block;
  width: 100%;
  max-width: none;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  padding-inline-start: 38px;
  padding-inline-end: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  background: #f8fafc;
  color: var(--foreground, #334155);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.ats-search__input[dir="rtl"] {
  text-align: right;
}

.ats-search__input[dir="ltr"] {
  text-align: left;
}

.ats-search__input::placeholder {
  color: #94a3b8;
}

.ats-search__input:focus,
.ats-search__input.form-control:focus {
  outline: none;
  border-color: var(--primary, #1a6ed8) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a6ed8) 15%, transparent) !important;
}

.ats-search--with-clear .ats-search__input {
  padding-inline-end: 38px;
}

.ats-search__clear {
  position: absolute;
  top: 50%;
  inset-inline-end: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--muted-foreground, #64748b);
  font-size: 11px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

.ats-search__clear:hover,
.ats-search__clear:focus {
  background: var(--secondary, #f1f5f9);
  color: var(--foreground, #334155);
}

.ats-search--sm .ats-search__input,
.ats-search--sm .ats-search__input.form-control {
  height: 34px;
  min-height: 34px;
  font-size: 12px;
}

.app-autofill-decoy {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.form-group.search {
  position: relative;
  margin-bottom: 0;
}

.form-group.search::before {
  content: none !important;
  display: none !important;
}

.form-group.search::after {
  content: "\eb1c";
  font-family: "tabler-icons";
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.form-group.search .form-control {
  display: block;
  width: 100%;
  max-width: none;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  padding-inline-start: 38px;
  padding-inline-end: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  background: #f8fafc;
  color: var(--foreground, #334155);
  box-shadow: none;
}

.form-group.search .form-control:focus {
  outline: none;
  border-color: var(--primary, #1a6ed8) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a6ed8) 15%, transparent) !important;
}

.bs-searchbox {
  position: relative;
  padding: 12px !important;
  margin: 0;
}

.bs-searchbox::before {
  content: none !important;
  display: none !important;
}

.bs-searchbox::after {
  content: "\eb1c";
  font-family: "tabler-icons";
  position: absolute;
  top: 50%;
  inset-inline-start: 26px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.bs-searchbox .form-control {
  display: block;
  width: 100%;
  max-width: none;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  padding-inline-start: 38px;
  padding-inline-end: 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  background: #f8fafc;
  color: var(--foreground, #334155);
  box-shadow: none;
}

.bs-searchbox .form-control:focus {
  outline: none;
  border-color: var(--primary, #1a6ed8) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a6ed8) 15%, transparent) !important;
}

/* ---------- bootstrap-select (platform-wide — kill legacy double frames) ---------- */

.bootstrap-select.form-control {
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
}

.bootstrap-select > .dropdown-toggle,
.bootstrap-select.btn-group > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default {
  width: 100%;
  min-height: 38px;
  height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--card) !important;
  background-image: none !important;
  color: var(--foreground) !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
}

.bootstrap-select > .dropdown-toggle .filter-option,
.bootstrap-select.btn-group > .dropdown-toggle .filter-option {
  color: inherit;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  color: var(--muted-foreground) !important;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default:hover,
.bootstrap-select > .dropdown-toggle.btn-default:focus {
  border-color: var(--primary) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
  outline: none !important;
}

/* worldsee.css nested :focus:focus inset shadow */
.bootstrap-select .dropdown-toggle:focus:focus {
  border-color: var(--primary) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
  outline: none !important;
}

.bootstrap-select .bs-caret,
.bootstrap-select .dropdown-toggle .caret {
  color: var(--secondary-foreground) !important;
}

.bootstrap-select .dropdown-menu,
.bootstrap-select.bs-container .dropdown-menu {
  margin-top: 6px !important;
  padding: 6px !important;
  border: none !important;
  outline: none !important;
  border-radius: 10px !important;
  background: var(--popover) !important;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14) !important;
  overflow: hidden;
}

.bootstrap-select .dropdown-menu .inner,
.bootstrap-select.bs-container .dropdown-menu .inner {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bootstrap-select.bs-container {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.bootstrap-select .dropdown-menu > li > a {
  padding: 8px 12px;
  color: var(--popover-foreground);
  background: transparent;
  border: none !important;
  border-radius: 8px;
  margin: 2px 4px;
}

.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus,
.bootstrap-select .dropdown-menu > li.selected > a,
.bootstrap-select .dropdown-menu > li.active > a {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.bootstrap-select .dropdown-menu .bs-searchbox {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.bootstrap-select .dropdown-menu .text-muted,
.bootstrap-select .dropdown-menu li a small {
  color: var(--muted-foreground) !important;
  opacity: 1;
}

/* worldsee.css paints GSM/battery icons green — unify on theme primary */
.icon[class*="gsm-"]:before,
.icon[class*="battery-"]:before,
.icon.gsm:before,
.icon.battery:before {
  color: var(--primary) !important;
}

/* Module hero "Add" buttons: avoid double white border on blue gradient */
[class*="-hero"] .btn-light,
[class*="-hero"] [class*="__btn"].btn-light,
[class*="-hero"] [id$="-add-btn"] {
  border: 1px solid transparent !important;
}

[class*="-hero"] .btn-light:hover,
[class*="-hero"] [class*="__btn"].btn-light:hover,
[class*="-hero"] [id$="-add-btn"]:hover {
  border-color: transparent !important;
}

.input-group-addon {
  background-color: var(--secondary);
  border-color: var(--border);
  color: var(--secondary-foreground);
  border-radius: var(--radius-md);
}

.checkbox label, .radio label { font-weight: var(--font-weight-normal); }

/* Platform toggle switch (used instead of square checkbox where applicable) */
.ats-switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--ats-switch-width);
  height: var(--ats-switch-height);
}

.ats-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ats-switch__slider {
  position: absolute;
  inset: 0;
  background: var(--switch-background);
  border-radius: 999px;
  border: none;
  transition: background-color 0.2s ease;
  cursor: pointer;
  overflow: hidden;
}

.ats-switch__slider::before {
  content: '';
  position: absolute;
  inset-block-start: var(--ats-switch-pad);
  inset-inline-start: var(--ats-switch-pad);
  width: var(--ats-switch-knob);
  height: var(--ats-switch-knob);
  background: var(--card);
  border-radius: 50%;
  border: none;
  box-shadow: 0 1px 2px rgba(15, 25, 35, 0.12);
  transition: inset-inline-start 0.2s ease;
}

.ats-switch input:checked + .ats-switch__slider {
  background: var(--primary);
  box-shadow: none;
}

.ats-switch input:checked + .ats-switch__slider::before {
  inset-inline-start: calc(100% - var(--ats-switch-knob) - var(--ats-switch-pad));
  box-shadow: 0 1px 2px rgba(15, 25, 35, 0.12);
}

.ats-switch input:focus-visible + .ats-switch__slider {
  outline: none;
}

.ats-switch input:disabled + .ats-switch__slider {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Platform-wide checkbox → toggle switch (matches .ats-switch above) */
.checkbox:not(.device-visibility),
.checkbox-inline:not(.device-visibility),
.table .checkbox:not(.device-visibility),
.group .checkbox:not(.device-visibility),
.checkboxes .checkbox {
  position: relative;
}

.checkbox:not(.device-visibility) input[type="checkbox"],
.checkbox-inline:not(.device-visibility) input[type="checkbox"],
.table .checkbox:not(.device-visibility) input[type="checkbox"],
.group .checkbox:not(.device-visibility) input[type="checkbox"],
.checkboxes .checkbox input[type="checkbox"],
label:not(.device-visibility):not(.btn):not(.ats-switch):has(> input[type="checkbox"]) input[type="checkbox"] {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0;
  top: 50%;
  width: var(--ats-switch-width) !important;
  height: var(--ats-switch-height) !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
  transform: translateY(-50%);
}

.checkbox:not(.device-visibility) input[type="checkbox"] + label,
.checkbox-inline:not(.device-visibility) input[type="checkbox"] + label,
.table .checkbox:not(.device-visibility) input[type="checkbox"] + label,
.group .checkbox:not(.device-visibility) input[type="checkbox"] + label,
.checkboxes .checkbox input[type="checkbox"] + label,
label:not(.device-visibility):not(.btn):not(.ats-switch):has(> input[type="checkbox"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ats-switch-height);
  padding-inline-start: calc(var(--ats-switch-width) + 10px);
  margin-bottom: 0;
  cursor: pointer;
}

.checkbox:not(.device-visibility) input[type="checkbox"] + label::after,
.checkbox-inline:not(.device-visibility) input[type="checkbox"] + label::after,
.table .checkbox:not(.device-visibility) input[type="checkbox"] + label::after,
.group .checkbox:not(.device-visibility) input[type="checkbox"] + label::after,
.checkboxes .checkbox input[type="checkbox"] + label::after,
label:not(.device-visibility):not(.btn):not(.ats-switch):has(> input[type="checkbox"])::after {
  content: "" !important;
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--ats-switch-width);
  height: var(--ats-switch-height);
  border: none !important;
  border-radius: 999px;
  background: var(--switch-background) !important;
  color: transparent !important;
  transition: background-color 0.2s ease;
  pointer-events: none;
}

.checkbox:not(.device-visibility) input[type="checkbox"] + label::before,
.checkbox-inline:not(.device-visibility) input[type="checkbox"] + label::before,
.table .checkbox:not(.device-visibility) input[type="checkbox"] + label::before,
.group .checkbox:not(.device-visibility) input[type="checkbox"] + label::before,
.checkboxes .checkbox input[type="checkbox"] + label::before,
label:not(.device-visibility):not(.btn):not(.ats-switch):has(> input[type="checkbox"])::before {
  content: "" !important;
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--ats-switch-pad);
  top: 50%;
  transform: translateY(-50%);
  width: var(--ats-switch-knob);
  height: var(--ats-switch-knob);
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50%;
  background: var(--card) !important;
  box-shadow: 0 1px 2px rgba(15, 25, 35, 0.12);
  color: transparent !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transition: inset-inline-start 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.checkbox:not(.device-visibility) input[type="checkbox"]:checked + label::after,
.checkbox-inline:not(.device-visibility) input[type="checkbox"]:checked + label::after,
.table .checkbox:not(.device-visibility) input[type="checkbox"]:checked + label::after,
.group .checkbox:not(.device-visibility) input[type="checkbox"]:checked + label::after,
.checkboxes .checkbox input[type="checkbox"]:checked + label::after,
label:not(.device-visibility):not(.btn):not(.ats-switch):has(> input[type="checkbox"]:checked)::after {
  background: var(--primary) !important;
  border-color: transparent !important;
}

.checkbox:not(.device-visibility) input[type="checkbox"]:checked + label::before,
.checkbox-inline:not(.device-visibility) input[type="checkbox"]:checked + label::before,
.table .checkbox:not(.device-visibility) input[type="checkbox"]:checked + label::before,
.group .checkbox:not(.device-visibility) input[type="checkbox"]:checked + label::before,
.checkboxes .checkbox input[type="checkbox"]:checked + label::before,
label:not(.device-visibility):not(.btn):not(.ats-switch):has(> input[type="checkbox"]:checked)::before {
  content: "" !important;
  color: transparent !important;
  background: var(--card) !important;
  inset-inline-start: calc(var(--ats-switch-width) - var(--ats-switch-knob) - var(--ats-switch-pad));
  transform: translateY(-50%);
}

.checkbox:not(.device-visibility) input[type="checkbox"]:disabled + label,
.checkbox-inline:not(.device-visibility) input[type="checkbox"]:disabled + label,
.table .checkbox:not(.device-visibility) input[type="checkbox"]:disabled + label,
.group .checkbox:not(.device-visibility) input[type="checkbox"]:disabled + label,
.checkboxes .checkbox input[type="checkbox"]:disabled + label,
label:not(.device-visibility):not(.btn):not(.ats-switch):has(> input[type="checkbox"]:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Exceptions: keep compact square checks in pickers / layer lists / icon grids */
.icon-list .checkbox input[type="checkbox"] + label,
.icon-list .checkbox-inline input[type="checkbox"] + label,
.bootstrap-select .dropdown-menu input[type="checkbox"] + label,
.leaflet-control-layers input[type="checkbox"] + label,
.leaflet-control-layers input[type="checkbox"] + span {
  display: inline-block;
  min-height: 0;
  padding-inline-start: 0;
  gap: 0;
}

.icon-list .checkbox input[type="checkbox"],
.icon-list .checkbox-inline input[type="checkbox"],
.bootstrap-select .dropdown-menu input[type="checkbox"],
.leaflet-control-layers input[type="checkbox"] {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  transform: none;
}

.icon-list .checkbox input[type="checkbox"] + label::before,
.icon-list .checkbox-inline input[type="checkbox"] + label::before,
.bootstrap-select .dropdown-menu input[type="checkbox"] + label::before,
.leaflet-control-layers input[type="checkbox"] + label::before,
.leaflet-control-layers input[type="checkbox"] + span::before {
  content: "\0000";
  position: relative;
  z-index: 1;
  inset-inline-start: auto;
  top: auto;
  transform: none;
  width: 15px;
  height: 15px;
  margin: 1px;
  margin-inline-end: 5px;
  padding: 3px;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: none;
  font-size: 10px;
  line-height: 1;
}

.icon-list .checkbox input[type="checkbox"] + label::after,
.icon-list .checkbox-inline input[type="checkbox"] + label::after,
.bootstrap-select .dropdown-menu input[type="checkbox"] + label::after,
.leaflet-control-layers input[type="checkbox"] + label::after,
.leaflet-control-layers input[type="checkbox"] + span::after {
  content: "\0000";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  transform: none;
  width: 18px;
  height: 18px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: transparent;
}

.icon-list .checkbox input[type="checkbox"]:checked + label::before,
.icon-list .checkbox-inline input[type="checkbox"]:checked + label::before,
.bootstrap-select .dropdown-menu input[type="checkbox"]:checked + label::before,
.leaflet-control-layers input[type="checkbox"]:checked + label::before,
.leaflet-control-layers input[type="checkbox"]:checked + span::before {
  font-family: "icomoon";
  content: "\e90b";
  color: #fff;
  background-color: var(--primary);
}

.icon-list .checkbox input[type="checkbox"]:checked + label::after,
.icon-list .checkbox-inline input[type="checkbox"]:checked + label::after,
.bootstrap-select .dropdown-menu input[type="checkbox"]:checked + label::after,
.leaflet-control-layers input[type="checkbox"]:checked + label::after,
.leaflet-control-layers input[type="checkbox"]:checked + span::after {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ---------- panels / cards / widgets ---------- */

.panel, .plan, .well, .list-group, .thumbnail {
  background-color: var(--card);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  color: var(--card-foreground);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.06);
}

.panel-heading, .plan-heading, .widget-heading {
  background-color: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--card-foreground) !important;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
}

.panel-default > .panel-heading { background-color: var(--secondary) !important; }

.panel-primary > .panel-heading {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.list-group-item {
  background-color: var(--card);
  border-color: var(--border);
  color: var(--card-foreground);
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
}

/* ---------- tables ---------- */

.table > thead > tr > th {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-bottom: 1px solid var(--border) !important;
  font-weight: var(--font-weight-medium);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > th {
  border-color: var(--border);
}

.table-striped > tbody > tr:nth-of-type(odd) { background-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.table-hover > tbody > tr:hover { background-color: var(--accent); }

/* ---------- nav tabs / pills ---------- */

.nav-tabs { border-bottom-color: var(--border); }

.nav-tabs > li > a {
  color: var(--muted-foreground);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: var(--font-weight-medium);
}

.nav-tabs > li > a:hover {
  background-color: var(--accent);
  border-color: transparent;
  color: var(--accent-foreground);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--primary) !important;
  background-color: var(--card) !important;
  border-color: var(--border) var(--border) transparent !important;
  border-bottom: 2px solid var(--primary) !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* ---------- header / navbar ---------- */

#header.header-app > nav.header-toolbar.navbar,
.navbar-main {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px rgba(15, 25, 35, 0.06) !important;
}

#header.header-app > nav.header-toolbar.navbar::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 30%, transparent) 0%,
    var(--primary) 45%,
    color-mix(in srgb, var(--primary) 65%, transparent) 100%) !important;
}

#header .navbar-nav:not(.navbar-right) > li > a { color: var(--secondary-foreground) !important; }
#header .navbar-nav:not(.navbar-right) > li > a:hover,
#header .navbar-nav:not(.navbar-right) > li > a:focus,
#header .navbar-nav:not(.navbar-right) > .open > a {
  color: var(--primary) !important;
  background-color: var(--accent) !important;
  border-radius: var(--radius-md);
}

#header .navbar-nav.navbar-right > li > a {
  color: var(--secondary-foreground) !important;
}

#header .navbar-nav > li > a > .badge {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

/* Legacy worldsee/light-green: remove colored icon boxes in the app header rail */
#header.header-app .navbar-nav > li > a > .icon {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#header.header-app .navbar-nav > li > a:hover > .icon,
#header.header-app .navbar-nav > li > a:focus > .icon,
#header.header-app .navbar-nav > .open > a > .icon {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Icon wrapper that contains nested FA — no empty box */
.icon:has(> .fa)::before,
.icon:has(> i.fa)::before {
  content: none !important;
  display: none !important;
}

.icon > .fa,
.icon > i.fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Action icon buttons system-wide */
.btn.btn-xs .fa,
.btn.btn-xs i.fa,
.drivers-action-edit,
.drivers-action-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-xs .fa,
.btn.btn-xs i.fa {
  font-size: 13px;
  line-height: 1;
}

.drivers-action-edit,
.drivers-action-delete {
  min-width: 28px;
  min-height: 28px;
  padding: 4px 8px;
}

.drivers-action-edit .fa,
.drivers-action-delete .fa {
  font-size: 13px;
  line-height: 1;
}

/* ---------- header menu as a full-height text sidebar on the right ---------- */
@media (min-width: 768px) {
  :root {
    --rail-width: 210px;
    --sidebar-w: 300px;
  }

  body.rail-collapsed {
    --rail-width: 64px;
  }

  #header .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1041;
    width: var(--rail-width);
    /* !important needed: bootstrap forces height:auto and max-height:340px on .navbar-collapse */
    height: 100vh !important;
    max-height: none !important;
    padding: 0;
    margin: 0;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(15, 25, 35, 0.06);
    overflow: visible;
    transition: width 0.25s ease;
  }

  #header .navbar-nav.navbar-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    float: none !important;
    margin: 0 !important;
    width: 100%;
    height: 100vh !important;
    padding: 14px 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    direction: rtl; /* icon on the right, label flows left — like the reference */
    overflow-y: auto;
    overflow-x: hidden;
  }

  #header .navbar-nav.navbar-right::-webkit-scrollbar { width: 4px; }
  #header .navbar-nav.navbar-right::-webkit-scrollbar-thumb {
    background: var(--switch-background);
    border-radius: 4px;
  }

  #header .navbar-nav.navbar-right > li {
    float: none;
    width: 100%;
  }

  /* menu rows: icon right + label, like the reference sidebar */
  #header.header-app .navbar-nav.navbar-right > li > a {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    margin: 0 !important;
    padding: 8px 10px !important;
    width: 100%;
    border-radius: var(--radius-md) !important;
    color: var(--secondary-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
  }

  /* kill legacy theme icon boxes (worldsee/light-green rounded squares) */
  #header.header-app .navbar-nav.navbar-right > li > a > .icon,
  #header.header-app .navbar-nav.navbar-right > li > a > .icon.rail-support-icon {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
    font-size: 16px !important;
    padding: 0 !important;
  }

  #header.header-app .navbar-nav.navbar-right > li > a > .icon > .fa {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* no hover motion: kill every transition/animation/transform on rail items */
  #header .navbar-nav > li > a,
  #header .navbar-nav > li > a > .icon,
  #header .navbar-nav > li > a > .text,
  #header .navbar-nav > li > a:hover,
  #header .navbar-nav > li > a:hover > .icon {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  #header.header-app .navbar-nav.navbar-right > li > a > .text {
    display: block;
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* hover / open: filled pill — must use `background` shorthand to kill worldsee cyan gradient */
  #header.header-app .main-navbar .navbar-nav.navbar-right > li > a:hover,
  #header.header-app .main-navbar .navbar-nav.navbar-right > li > a:focus,
  #header.header-app .main-navbar .navbar-nav.navbar-right > .open > a,
  #header.header-app .main-navbar .navbar-nav.navbar-right > .open > a:hover,
  #header.header-app .main-navbar .navbar-nav.navbar-right > .open > a:focus {
    background: #1a6ed8 !important;
    background-color: #1a6ed8 !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #header.header-app .main-navbar .navbar-nav.navbar-right > li > a:hover > .icon,
  #header.header-app .main-navbar .navbar-nav.navbar-right > li > a:focus > .icon,
  #header.header-app .main-navbar .navbar-nav.navbar-right > .open > a > .icon,
  #header.header-app .main-navbar .navbar-nav.navbar-right > .open > a:hover > .icon,
  #header.header-app .main-navbar .navbar-nav.navbar-right > .open > a:focus > .icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
  }

  /* active / selected rail item — same brand blue, no worldsee cyan gradient */
  #header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a,
  #header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a:hover,
  #header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a:focus {
    background: #1a6ed8 !important;
    background-color: #1a6ed8 !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a > .icon,
  #header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a:hover > .icon,
  #header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a:focus > .icon,
  #header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a > .text {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
  }

  /* notification badge sits at the row end */
  #header.header-app .navbar-nav.navbar-right > li > a > .badge {
    margin-right: auto;
    background: var(--destructive);
    color: var(--destructive-foreground);
  }

  /* vehicles rail item icon (font-awesome, not a theme sprite) */
  .rail-vehicles-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }

  /* --- brand block at the top of the sidebar: logo + collapse toggle --- */
  #header .navbar-nav.navbar-right > li.rail-brand {
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  #header .navbar-nav.navbar-right > li.rail-brand > a {
    display: flex;
    justify-content: center;
    padding: 2px 6px;
  }

  #header .navbar-nav.navbar-right > li.rail-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    display: block;
  }

  .rail-toggle-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--secondary-foreground);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    font-size: 12px;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .rail-toggle-btn:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  /* "N vehicles active" chip under the brand */
  .rail-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 6px 0;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--chart-2) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--chart-2) 25%, transparent);
    border-radius: 999px;
    font-size: 11px;
    color: var(--chart-2);
    font-weight: var(--font-weight-medium);
  }

  .rail-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chart-2);
    box-shadow: 0 0 6px var(--chart-2);
    flex-shrink: 0;
  }

  /* --- collapse toggle row --- */
  .rail-toggle-icon {
    transition: transform 0.25s ease;
  }

  body.rail-collapsed .rail-toggle-icon {
    transform: rotate(180deg);
  }

  /* --- collapsed state: icons only (no expand-on-hover) --- */
  body.rail-collapsed #header .navbar-collapse .navbar-nav {
    padding: 14px 8px;
  }

  body.rail-collapsed #header.header-app .navbar-collapse .navbar-nav > li > a > .text {
    display: none;
  }

  body.rail-collapsed #header.header-app .navbar-collapse .navbar-nav > li > a {
    justify-content: center;
    padding: 8px 0;
  }

  body.rail-collapsed #header .navbar-collapse .rail-status {
    display: none !important;
  }

  body.rail-collapsed #header.header-app .navbar-collapse .navbar-nav > li > a > .badge {
    position: absolute;
    top: 2px;
    left: 4px;
    margin: 0;
  }

  /* push admin / setup / support to the bottom of the rail */
  #header .navbar-nav.navbar-right > li.rail-bottom-spacer {
    margin-top: auto;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
    pointer-events: none;
  }

  #header .navbar-nav.navbar-right > li.rail-bottom-spacer + li {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .rail-support-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }

  /* dropdowns open to the left of the rail; fixed so the rail's
     overflow (scroll) doesn't clip them */
  #header .navbar-nav.navbar-right .dropdown-menu,
  #header.header-app .navbar-nav.navbar-right .dropdown-menu {
    position: fixed;
    right: calc(var(--rail-width) + 12px) !important;
    left: auto !important;
    top: auto;
    bottom: 12px;
    margin: 0;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14) !important;
    background: var(--popover) !important;
    padding: 6px !important;
    outline: none !important;
  }

  #header.header-app .navbar-nav.navbar-right .dropdown-menu > li > a {
    border-radius: var(--radius-sm) !important;
    color: var(--popover-foreground) !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  #header.header-app .navbar-nav.navbar-right .dropdown-menu > li > a:hover,
  #header.header-app .navbar-nav.navbar-right .dropdown-menu > li > a:focus {
    background-color: var(--accent) !important;
    color: var(--accent-foreground) !important;
  }

  /* header children are fixed; keep #header out of document flow */
  #header.header-app {
    height: 0;
    min-height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  /* fill viewport below the topbar — fixed inset avoids % height gaps */
  #mapWrap {
    position: fixed;
    top: 56px;
    left: 0;
    right: calc(var(--rail-width) + var(--sidebar-w));
    bottom: 0;
    width: auto;
    height: auto !important;
    margin: 0;
    transition: right 0.25s ease;
  }

  body:has(#sidebar.collapsed) #mapWrap {
    right: var(--rail-width);
  }

  /* ---------- topbar: user (left) + rail toggle (right), ends at the sidebar ---------- */
  #topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--rail-width);
    height: 56px;
    z-index: 1030;
    direction: ltr; /* physical layout: user left, brand right, in both languages */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 18px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(15, 25, 35, 0.05);
    transition: right 0.25s ease;
  }

  /* --- user block (far left) --- */
  .topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 0;
  }

  .topbar-user-menu {
    position: relative;
  }

  .topbar-user-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
  }

  .topbar-user-toggle:hover,
  .topbar-user-menu.open .topbar-user-toggle {
    background: transparent;
    border-color: transparent;
  }

  .topbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--chart-5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .topbar-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .topbar-user-info {
    min-width: 0;
    direction: rtl;
    text-align: right;
  }

  .topbar-user-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--foreground);
    white-space: nowrap;
    line-height: 1.35;
  }

  .topbar-user-email {
    font-size: 11px;
    color: var(--muted-foreground);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    direction: ltr;
    text-align: right;
  }

  .topbar-user-caret {
    font-size: 10px;
    color: var(--muted-foreground);
    margin-left: 2px;
    transition: transform 0.18s ease;
  }

  .topbar-user-menu.open .topbar-user-caret {
    transform: rotate(180deg);
  }

  .topbar-lang-menu {
    position: relative;
  }

  .topbar-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
  }

  .topbar-lang-btn:hover,
  .topbar-lang-menu.open .topbar-lang-btn {
    background: transparent;
    border-color: transparent;
  }

  .topbar-lang-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .topbar-lang-label {
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    line-height: 1;
  }

  .topbar-lang-caret {
    font-size: 9px;
    color: var(--muted-foreground);
    transition: transform 0.18s ease;
  }

  .topbar-lang-menu.open .topbar-lang-caret {
    transform: rotate(180deg);
  }

  .topbar-lang-dropdown {
    min-width: 150px;
    margin-top: 8px !important;
    padding: 6px;
    border: none !important;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
    background: var(--card);
    right: auto !important;
    left: 0 !important;
  }

  .topbar-lang-dropdown > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--foreground);
    font-size: 12px;
    text-decoration: none;
  }

  .topbar-lang-dropdown > li > a:hover,
  .topbar-lang-dropdown > li > a:focus,
  .topbar-lang-dropdown > li.active > a {
    background: color-mix(in srgb, var(--primary) 10%, #ffffff);
    color: var(--primary);
  }

  .topbar-lang-check {
    margin-inline-start: auto;
    color: var(--primary);
    font-size: 11px;
  }

  .topbar-user-dropdown {
    min-width: 230px;
    margin-top: 8px !important;
    padding: 6px;
    border: none !important;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
    background: var(--card);
    right: auto !important;
    left: 0 !important;
  }

  .topbar-user-dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px 8px;
    direction: rtl;
    text-align: right;
  }

  .topbar-user-dropdown-header strong {
    font-size: 11.5px;
    color: var(--foreground);
    direction: ltr;
    text-align: right;
  }

  .topbar-user-dropdown-header span {
    font-size: 10.5px;
    color: var(--muted-foreground);
  }

  .topbar-user-dropdown > li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 14px !important;
    color: var(--foreground) !important;
    font-size: 12px;
    direction: rtl;
  }

  .topbar-user-dropdown > li > a:hover,
  .topbar-user-dropdown > li > a:focus {
    background: var(--accent) !important;
    color: var(--accent-foreground) !important;
  }

  .topbar-user-dropdown > li > a > i {
    width: 16px;
    text-align: center;
    color: var(--muted-foreground);
  }

  .topbar-user-dropdown > li > a.topbar-logout {
    color: var(--destructive) !important;
  }

  .topbar-user-dropdown > li > a.topbar-logout:hover {
    background: color-mix(in srgb, var(--destructive) 10%, #ffffff) !important;
    color: var(--destructive) !important;
  }

  .topbar-user-dropdown > li > a.topbar-logout > i {
    color: var(--destructive);
  }

  .topbar-user-dropdown > li > a.is-locked,
  .topbar-user-dropdown > li > a.is-locked:hover,
  .topbar-user-dropdown > li > a.is-locked:focus {
    opacity: 0.45;
    cursor: not-allowed !important;
    background: transparent !important;
    color: var(--muted-foreground) !important;
    pointer-events: none;
  }

  .topbar-user-dropdown .topbar-lock-icon {
    margin-inline-start: auto;
    width: auto !important;
    font-size: 11px;
    opacity: 0.75;
  }

  .topbar-user-dropdown .divider {
    margin: 6px 0;
    background-color: var(--border);
  }

  .topbar-notify-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--secondary-foreground);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    font-size: 20px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .topbar-notify-btn > .fa.fa-bell {
    font-size: 20px !important;
    line-height: 1;
  }

  .topbar-notify-btn:hover,
  .topbar-notify-menu.open .topbar-notify-btn {
    background: transparent;
    color: var(--secondary-foreground);
    border-color: transparent;
  }

  .topbar-notify {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--destructive);
    color: var(--destructive-foreground);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
    line-height: 1;
  }

  .topbar-notify-dropdown {
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 0;
    margin-top: 10px !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 36px rgba(15, 25, 35, 0.16);
    background: var(--card);
    right: auto !important;
    left: 0 !important;
    overflow: hidden;
  }

  .topbar-notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    direction: rtl;
  }

  .topbar-notify-header strong {
    font-size: 12.5px;
    color: var(--foreground);
  }

  .topbar-notify-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .topbar-notify-refresh {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: 50%;
    cursor: pointer;
  }

  .topbar-notify-refresh:hover {
    background: var(--secondary);
    color: var(--foreground);
  }

  /* "+" button: opens the alerts modal, sits beside refresh */
  .topbar-notify-add {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-foreground) !important;
    font-size: 12px;
    text-decoration: none !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 30%, transparent);
    transition: filter 0.18s ease, transform 0.12s ease;
  }

  .topbar-notify-add:hover,
  .topbar-notify-add:focus {
    filter: brightness(1.08);
    color: var(--primary-foreground) !important;
  }

  /* no hover motion on topbar controls: state changes apply instantly */
  #topbar button,
  #topbar a,
  #topbar .topbar-user-toggle,
  #topbar .topbar-lang-btn,
  #topbar .topbar-notify-btn,
  #topbar .topbar-notify-add,
  #topbar .topbar-notify-refresh,
  #topbar .rail-toggle-btn,
  #topbar .topbar-speech-btn,
  #topbar .topbar-user-caret,
  #topbar .topbar-lang-caret,
  #topbar .topbar-status {
    transition: none !important;
    animation: none !important;
  }

  #topbar button:hover,
  #topbar button:focus,
  #topbar button:active,
  #topbar a:hover,
  #topbar a:focus,
  #topbar a:active {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .topbar-notify-list {
    max-height: 340px;
    overflow-y: auto;
    direction: rtl;
  }

  .topbar-notify-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 11.5px;
  }

  .topbar-notify-item {
    display: block;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--foreground) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
  }

  .topbar-notify-item:hover {
    background: var(--accent);
  }

  .topbar-notify-item-title {
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.35;
  }

  .topbar-notify-item-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10.5px;
    color: var(--muted-foreground);
  }

  .topbar-notify-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    text-align: center;
    background: var(--secondary);
  }

  .topbar-notify-footer a {
    font-size: 11.5px;
    font-weight: 600;
    color: #1a6ed8 !important;
  }

  .topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--chart-2) 12%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--chart-2) 30%, transparent);
    color: var(--chart-2);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .topbar-status.is-online {
    background: color-mix(in srgb, var(--chart-2) 12%, #ffffff);
    border-color: color-mix(in srgb, var(--chart-2) 30%, transparent);
    color: var(--chart-2);
  }

  .topbar-status.is-offline {
    background: color-mix(in srgb, var(--destructive) 10%, #ffffff);
    border-color: color-mix(in srgb, var(--destructive) 28%, transparent);
    color: var(--destructive);
  }

  .topbar-status.is-idle {
    background: color-mix(in srgb, var(--muted-foreground) 8%, #ffffff);
    border-color: color-mix(in srgb, var(--muted-foreground) 22%, transparent);
    color: var(--muted-foreground);
  }

  /* --- topbar (search removed; sidebar search only) --- */

  .topbar-speech-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--secondary-foreground);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none !important;
    font-size: 16px;
    flex-shrink: 0;
    padding: 0;
  }

  .topbar-speech-btn:hover,
  .topbar-speech-btn:focus {
    background: transparent;
    color: var(--primary);
    text-decoration: none !important;
  }

  .topbar-speech-btn.is-muted {
    color: var(--muted-foreground);
  }

  .topbar-speech-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ---------- device list: professional fleet-tracking style ---------- */
  #sidebar #objects_tab .tab-pane-body,
  #sidebar #ajax-items {
    background: var(--card);
  }

  #sidebar .sidebar-virtual-scroll,
  #sidebar #objects_tab .tab-pane-body {
    overflow-anchor: none;
  }

  #sidebar #ajax-items li.fleet-device-item {
    contain-intrinsic-size: auto 92px;
  }

  #sidebar .group-list {
    display: block;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  #sidebar .group {
    margin: 0;
  }

  #sidebar .group + .group {
    margin-top: 0;
  }

  /* Group header — eye on the right via row-reverse (no direction:rtl — breaks dropdowns/modals) */
  #sidebar .group-heading {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 7px 12px;
    background: var(--secondary);
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    color: var(--secondary-foreground);
    font-size: 11px;
    box-sizing: border-box;
  }

  #sidebar .group-heading:hover {
    background: var(--accent);
    color: var(--foreground);
  }

  #sidebar .group-heading > .checkbox {
    display: flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
  }

  #sidebar .group-heading > .group-title {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 0 4px 0 18px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #475569;
    text-align: right;
    cursor: pointer;
    text-transform: none;
  }

  #sidebar .group-heading > .group-title:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: auto;
    font-size: 10px;
    color: #94a3b8;
  }

  #sidebar .group-heading > .group-title.collapsed {
    color: #64748b;
  }

  #sidebar .group-heading > .group-title.collapsed:after {
    color: #cbd5e1;
  }

  #sidebar .group-heading > .group-title > .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    margin-inline-start: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dde7f3;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
  }

  #sidebar .group-heading > .group-title > .count:before,
  #sidebar .group-heading > .group-title > .count:after {
    content: none !important;
  }

  #sidebar .group-heading > .btn-group {
    display: flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
  }

  #sidebar .group-heading:hover > .btn-group {
    opacity: 0.7;
  }

  /* Device row — eye on the right via row-reverse (avoid direction:rtl on the row) */
  #sidebar li[data-device-id]:not(.fleet-device-item) {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    background: var(--card);
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    min-height: 48px;
    box-sizing: border-box;
    transition: background-color 0.12s ease;
  }

  #sidebar li[data-device-id]:not(.fleet-device-item):hover {
    background: var(--accent);
    border-color: var(--border);
    box-shadow: none;
  }

  #sidebar li[data-device-id]:not(.fleet-device-item).active {
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
    border-bottom-color: var(--border);
    box-shadow: none;
  }

  #sidebar li[data-device-id]:not(.fleet-device-item).active::before {
    content: "";
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
  }

  /* Fleet card rows — card handles its own chrome; no legacy list-row frame */
  #sidebar li.fleet-device-item[data-device-id] {
    display: block;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0;
  }

  #sidebar li.fleet-device-item[data-device-id]::before,
  #sidebar li.fleet-device-item[data-device-id].active::before {
    display: none !important;
    content: none !important;
  }

  #sidebar li[data-device-id] > *:last-child {
    border-right: none;
  }

  /* Eye visibility */
  #sidebar .device-visibility {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
  }

  #sidebar li[data-device-id] > .device-visibility {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px;
    flex: 0 0 auto;
  }

  #sidebar .group-heading > .device-visibility {
    display: flex !important;
    width: auto !important;
    height: auto;
    flex: 0 0 auto;
    align-items: center;
    position: relative;
  }

  #sidebar .device-visibility label {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
  }

  #sidebar .device-visibility label:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
  }

  #sidebar .device-visibility label::before,
  #sidebar .device-visibility label::after {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
  }

  #sidebar .device-visibility input[type="checkbox"] {
    position: absolute !important;
    z-index: 2;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
  }

  #sidebar .group-heading > .device-visibility label {
    position: relative !important;
  }

  #sidebar .device-visibility label::before {
    content: "\ecf0" !important; /* ti-eye-off */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "tabler-icons-filled", "tabler-icons" !important;
    font-weight: normal !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  #sidebar .device-visibility input[type="checkbox"]:checked + label {
    color: var(--primary);
  }

  #sidebar .device-visibility input[type="checkbox"]:checked + label::before {
    content: "\f679" !important; /* ti-eye filled */
  }

  #sidebar .device-visibility input[type="checkbox"]:checked + label::after {
    content: none !important;
    display: none !important;
  }

  /* Name + meta — right aligned */
  #sidebar li[data-device-id] > .name {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
    padding: 0;
    text-align: right;
    white-space: normal;
    cursor: pointer;
  }

  #sidebar li[data-device-id] > .name [data-device="name"] {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: right;
  }

  #sidebar li[data-device-id] > .name .device-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 8px;
    min-width: 0;
    width: 100%;
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.3;
    text-align: right;
  }

  #sidebar li[data-device-id] > .name [data-device="time"] {
    font-size: 10.5px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #sidebar li[data-device-id] > .name [data-device="speed"] {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
  }

  #sidebar li[data-device-id] > .name .device-meta a {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
  }

  /* Status + engine + menu — sits on the left (row-reverse puts .details first from the left) */
  #sidebar li[data-device-id] > .details {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    padding: 0;
    white-space: nowrap;
    text-align: left;
    flex: 0 0 auto;
  }

  /* Keep dropdown positioning math in LTR; menu text stays RTL via rtl.css */
  #sidebar li[data-device-id] > .details .btn-group.dropleft,
  #sidebar .group-heading > .btn-group {
    direction: ltr;
  }

  #sidebar li[data-device-id] > .details > * {
    margin: 0 !important;
  }

  /* Status as colored dot + label (fleet style) */
  #sidebar [data-device="status"] {
    order: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    max-width: 88px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #sidebar [data-device="status"]::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-color, #94a3b8);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-color, #94a3b8) 22%, transparent);
  }

  #sidebar [data-device="detect_engine"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0.55;
    font-size: 11px;
  }

  #sidebar [data-device="detect_engine"].on {
    opacity: 1;
    color: var(--primary);
  }

  #sidebar [data-device="detect_engine"].off {
    opacity: 0.4;
    color: #94a3b8;
  }

  #sidebar li[data-device-id] > .details .btn-group.dropleft {
    order: 10;
    opacity: 0;
    transition: opacity 0.12s ease;
  }

  #sidebar li[data-device-id]:hover > .details .btn-group.dropleft,
  #sidebar li[data-device-id].active > .details .btn-group.dropleft {
    opacity: 0.75;
  }

  #sidebar li[data-device-id] > .details .btn-group .btn.options {
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
  }

  #sidebar li[data-device-id] > .details .btn-group .btn.options:hover {
    background: #e8eef7;
  }

  #sidebar .no-results {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
  }

  /* rounded map card inset inside the fixed map shell */
  #mapWrap {
    --map-gap: 14px;
    background: var(--background);
  }

  /* the map sits inside a rounded card, with the page background showing around it */
  #mapWrap > #map {
    top: var(--map-gap);
    bottom: var(--map-gap);
    left: var(--map-gap);
    right: var(--map-gap);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: 0 4px 18px rgba(15, 25, 35, 0.08);
    overflow: hidden;
  }

  #map-controls {
    top: calc(10% + 28px);
    right: calc(var(--map-gap) + 10px);
  }

  /* hide the old top strip: the rail replaces the header entirely */
  #header .navbar-header {
    display: none;
  }

  #header.header-app > nav.header-toolbar.navbar {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #header.header-app > nav.header-toolbar.navbar::after {
    display: none !important;
  }
}

/* ---------- sidebar ---------- */

#sidebar {
  background-color: var(--sidebar) !important;
  color: var(--sidebar-foreground);
  border-color: var(--sidebar-border) !important;
}

/* legacy edge collapse control — rail "vehicles" toggles sidebar now */
#sidebar > .btn-collapse {
  display: none !important;
}

/* full height: stretch under the topbar (56px) down to the bottom,
   docked to the RIGHT between the map and the rail, like the reference */
@media (min-width: 768px) {
  #sidebar {
    position: fixed !important;
    top: 56px !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    left: auto !important;
    right: var(--rail-width);
    width: var(--sidebar-w);
    border-bottom-right-radius: 0;
    transition: right 0.25s ease, width 0.5s ease;
  }

  #sidebar.collapsed {
    width: 0;
  }

  /* flat professional list sits on white */
  #sidebar .sidebar-content {
    background: #ffffff !important;
    border-right: none !important;
    border-left: none !important;
    box-shadow: none !important;
  }
}

#sidebar .sidebar-content { background-color: var(--sidebar); }

#sidebar .sidebar-content,
#sidebar .tab-pane-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sidebar .sidebar-content::-webkit-scrollbar,
#sidebar .tab-pane-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#sidebar .nav-tabs { background-color: transparent; }

/* objects/history live in the rail now — hide the leftover single-tab strip */
#sidebar > .sidebar-content > .nav.nav-tabs.nav-default {
  display: none;
}

/* ---------- device create inside vehicles sidebar ---------- */

#device-create-sidebar {
  padding: 0 4px 12px;
}

.device-sidebar-create__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 4px 8px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--background, #f0f4f9);
}

.device-sidebar-create__header strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--primary);
}

.device-sidebar-create__close {
  padding: 2px 6px;
  color: var(--muted-foreground);
}

.device-sidebar-create .device-form-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.device-sidebar-create .device-form-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.device-sidebar-create .device-form-section__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.device-sidebar-create .form-group {
  margin-bottom: 8px;
}

.device-sidebar-create .form-control,
.device-sidebar-create .bootstrap-select .btn {
  font-size: 11px;
}

.device-sidebar-create .icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
  padding: 6px;
  background: var(--input-background, #edf2f8);
  border-radius: 6px;
}

.device-sidebar-create__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--background, #f0f4f9);
  padding-bottom: 4px;
}

.device-sidebar-create__actions .btn-primary {
  flex: 1;
}

/* ---------- history floating panel (compact, centered) ---------- */

.history-panel,
.history-card,
#history_tab {
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: min(78vh, 620px);
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 48px rgba(15, 25, 35, 0.22), 0 2px 8px rgba(15, 25, 35, 0.08);
  opacity: 0;
  transform: translate(-50%, 10px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.history-panel.is-open,
.history-card.is-open,
#history_tab.is-open {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

.history-panel:not(.is-open),
.history-card:not(.is-open),
#history_tab:not(.is-open),
#history_tab[aria-hidden="true"] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* once the user drags it, position comes from inline left/top in px */
.history-panel.has-moved,
.history-card.has-moved,
#history_tab.has-moved,
.history-panel.has-moved.is-open,
.history-card.has-moved.is-open,
#history_tab.has-moved.is-open {
  transform: none;
  transition: opacity 0.2s ease;
}

.history-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 9px 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--primary-foreground);
  cursor: move;
  user-select: none;
  touch-action: none;
}

.history-panel__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--font-weight-medium);
  font-size: 13px;
  color: var(--primary-foreground);
}

.history-panel__title .icon {
  color: var(--primary-foreground);
  font-size: 16px;
}

.history-panel__close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s ease;
}

.history-panel__close:hover {
  background: rgba(255, 255, 255, 0.3);
  color: var(--primary-foreground);
}

.history-panel__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.history-panel .tab-pane-header {
  flex-shrink: 0;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}

.history-panel .tab-pane-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 4px 8px;
}

/* compact stacked form: label above field, follows panel direction (RTL-safe) */
.history-panel .history-field {
  margin-bottom: 8px;
}

.history-panel .history-field > label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
}

.history-panel .form-control,
.history-panel .bootstrap-select .btn {
  height: 28px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 11px;
}

.history-panel .btn {
  padding-top: 4px;
  padding-bottom: 4px;
}

.history-panel .checkbox {
  margin-top: 2px;
  margin-bottom: 2px;
}

/* date + time side by side; digits always LTR even in the Arabic UI */
.history-panel .history-datetime {
  display: flex;
  gap: 6px;
  direction: ltr;
}

.history-panel .history-datetime .datepicker {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.history-panel .history-time {
  width: 106px;
  flex-shrink: 0;
  direction: ltr;
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.history-panel .history-time::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

.history-panel .history-advanced-toggle {
  text-align: right;
  margin-bottom: 8px;
}

.history-panel[dir="rtl"] .history-advanced-toggle {
  text-align: left;
}

.history-panel .history-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.history-panel .history-actions .btn-primary {
  flex: 1;
}

/* empty body collapses until results arrive */
.history-panel #ajax-history:empty {
  display: none;
}

@media (max-width: 767px) {
  .history-panel,
.history-card,
#history_tab {
    top: auto;
    bottom: 16px;
    max-height: min(70vh, 520px);
  }
}

/* ---------- dropdowns (overlay — shadow only, no outer frame) ---------- */

.dropdown-menu {
  background-color: var(--popover);
  color: var(--popover-foreground);
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
}

.dropdown-menu > li > a {
  color: var(--popover-foreground);
  border-radius: 8px;
  margin: 2px 4px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.dropdown-menu .divider { background-color: var(--border); }

/* ---------- modals / popovers / tooltips ---------- */

.modal-content {
  background-color: var(--card);
  color: var(--card-foreground);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(15, 25, 35, 0.25);
}

/* Physical header layout: close on the left, title fills the rest.
   Avoids the empty RTL gap when float:right parks the close next to the title. */
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: var(--font-weight-medium);
  background: #ffffff;
  color: var(--foreground);
}

.modal-header .close {
  float: none !important;
  position: relative;
  order: 0;
  margin: 0 !important;
  padding: 0 4px;
  font-size: 22px;
  line-height: 1;
  opacity: 0.55;
  flex: 0 0 auto;
}

.modal-header .modal-title {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  line-height: 1.3;
}

[dir="rtl"] .modal-header .modal-title {
  text-align: right;
}

[dir="ltr"] .modal-header .modal-title {
  text-align: left;
}

/* Keep theme pairing: body padding + negative margin on tabs = flush under header */
.modal-body {
  padding: 15px;
}

.modal-body > .nav {
  margin: -15px -15px 15px !important;
  padding: 0 8px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.modal-footer {
  border-top-color: var(--border);
  background: #ffffff;
}

.popover {
  background-color: var(--popover);
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
  color: var(--popover-foreground);
}

/* ---------- pagination / labels / badges / alerts ---------- */

.pagination > li > a, .pagination > li > span {
  color: var(--primary);
  border-color: var(--border);
}

.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.label-primary, .badge { background-color: var(--primary); }
.label-danger { background-color: var(--destructive); }
.label-success { background-color: var(--chart-2); }
.label-warning { background-color: var(--chart-3); }

/* ---------- callouts / hints (platform-wide) ---------- */

.ats-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.55;
}

.ats-callout__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
}

.ats-callout__body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.ats-callout__body p {
  margin: 0;
}

.ats-callout--info {
  background: color-mix(in srgb, var(--primary) 7%, white);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

.ats-callout--info .ats-callout__icon {
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
}

.ats-callout--warning {
  background: color-mix(in srgb, var(--chart-3) 10%, white);
  border-color: color-mix(in srgb, var(--chart-3) 24%, var(--border));
  color: color-mix(in srgb, #92400e 85%, var(--foreground));
}

.ats-callout--warning .ats-callout__icon {
  background: color-mix(in srgb, var(--chart-3) 18%, white);
  color: #b45309;
}

.ats-callout--success {
  background: color-mix(in srgb, var(--chart-2) 10%, white);
  border-color: color-mix(in srgb, var(--chart-2) 22%, var(--border));
  color: var(--primary);
}

.ats-callout--success .ats-callout__icon {
  background: color-mix(in srgb, var(--primary) 16%, white);
  color: var(--primary);
}

.ats-callout--danger {
  background: color-mix(in srgb, var(--destructive) 8%, white);
  border-color: color-mix(in srgb, var(--destructive) 22%, var(--border));
  color: color-mix(in srgb, var(--destructive) 80%, #7f1d1d);
}

.ats-callout--danger .ats-callout__icon {
  background: color-mix(in srgb, var(--destructive) 14%, white);
  color: var(--destructive);
}

.ats-confirm-modal {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 25, 35, 0.2);
}

.ats-confirm-modal .modal-body {
  padding: 18px 18px 8px;
}

.ats-confirm-modal__callout {
  margin: 0;
}

.ats-confirm-modal__title {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.ats-confirm-modal__text {
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--foreground) 82%, #64748b);
}

.ats-confirm-modal__footer {
  margin-top: 0;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ats-confirm-modal__footer .btn {
  min-width: 96px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
}

#js-confirm-link .modal-dialog {
  width: min(400px, calc(100vw - 32px));
}

/* Legacy bootstrap alerts — modernized for in-app hints */
.alert:not(.alert-dismissible) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-lg, 12px);
  border-width: 1px;
  border-style: solid;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: none;
}

.alert:not(.alert-dismissible)::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.alert-info:not(.alert-dismissible) {
  background-color: color-mix(in srgb, var(--primary) 7%, white);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  color: var(--foreground);
}

.alert-info:not(.alert-dismissible)::before {
  background-color: color-mix(in srgb, var(--primary) 14%, white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.alert-warning:not(.alert-dismissible) {
  background-color: color-mix(in srgb, var(--chart-3) 10%, white);
  border-color: color-mix(in srgb, var(--chart-3) 24%, var(--border));
  color: color-mix(in srgb, #92400e 85%, var(--foreground));
}

.alert-warning:not(.alert-dismissible)::before {
  background-color: color-mix(in srgb, var(--chart-3) 18%, white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E");
}

.alert-success:not(.alert-dismissible) {
  background-color: color-mix(in srgb, var(--chart-2) 10%, white);
  border-color: color-mix(in srgb, var(--chart-2) 22%, var(--border));
  color: var(--primary);
}

.alert-success:not(.alert-dismissible)::before {
  background-color: color-mix(in srgb, var(--chart-2) 16%, white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.alert-danger:not(.alert-dismissible) {
  background-color: color-mix(in srgb, var(--destructive) 8%, white);
  border-color: color-mix(in srgb, var(--destructive) 22%, var(--border));
  color: color-mix(in srgb, var(--destructive) 80%, #7f1d1d);
}

.alert-danger:not(.alert-dismissible)::before {
  background-color: color-mix(in srgb, var(--destructive) 14%, white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e03d3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

.alert.small:not(.alert-dismissible) {
  font-size: 12px;
}

/* Dismissible banners (login, flash messages) */
.alert.alert-dismissible {
  border-radius: var(--radius-lg, 12px);
  border-width: 1px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.06);
}

.alert-info {
  background-color: color-mix(in srgb, var(--primary) 7%, white);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  color: var(--foreground);
}

.alert-danger {
  background-color: color-mix(in srgb, var(--destructive) 8%, white);
  border-color: color-mix(in srgb, var(--destructive) 22%, var(--border));
  color: color-mix(in srgb, var(--destructive) 80%, #7f1d1d);
}

.alert-success {
  background-color: color-mix(in srgb, var(--chart-2) 10%, white);
  border-color: color-mix(in srgb, var(--chart-2) 22%, var(--border));
  color: var(--primary);
}

.alert-warning {
  background-color: color-mix(in srgb, var(--chart-3) 10%, white);
  border-color: color-mix(in srgb, var(--chart-3) 24%, var(--border));
  color: color-mix(in srgb, #92400e 85%, var(--foreground));
}

/* ---------- fleet status donut (retired map overlay) ---------- */
/* Kept in DOM for JS counters, but never shown on the map.
   Status counts live in the vehicles sidebar filters instead. */
.fleet-donut,
#fleet-donut {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.fleet-donut__chart {
  position: relative;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
}

.fleet-donut__ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#cbd5e1 0deg 360deg);
  /* punch a hole in the middle so the glass panel shows through */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 57%, #000 58%);
  mask: radial-gradient(circle at 50% 50%, transparent 57%, #000 58%);
  transition: background 0.4s ease;
}

.fleet-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.fleet-donut__total {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.fleet-donut__total-label {
  font-size: 8px;
  color: var(--muted-foreground);
}

.fleet-donut__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9.5px;
  color: var(--foreground);
  white-space: nowrap;
}

.fleet-donut__legend li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fleet-donut__legend b {
  min-width: 20px;
  font-weight: 700;
  text-align: start;
}

.fleet-donut__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}

.fleet-donut__dot--online { background: var(--primary); }
.fleet-donut__dot--engine { background: #1a6ed8; }
.fleet-donut__dot--ack { background: #f59e0b; }
.fleet-donut__dot--offline { background: #e03d3d; }

/* ---------- bottom-left map stack (widgets + GPRS + driver license) ---------- */

.map-left-float-stack {
  position: absolute;
  bottom: calc(var(--map-gap, 14px) + 12px);
  left: calc(var(--map-gap, 14px) + 12px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  pointer-events: none;
}

/* ---------- driver license: floating card over the map (left side) ---------- */

.map-driver-license {
  position: relative;
  bottom: auto;
  left: auto;
  top: auto;
  z-index: auto;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.map-driver-license:not([hidden]) {
  pointer-events: auto;
}

.map-driver-license__inner {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: 190px;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.map-driver-license .sa-license-face {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 380px;
  max-width: none;
  margin: 0;
  transform: scale(0.5);
  transform-origin: bottom left;
  box-shadow: 0 4px 16px rgba(15, 25, 35, 0.22);
  border-radius: 6px;
}

body:has(#topbar .dropdown.open) .map-left-float-stack {
  opacity: 0;
}

@media (max-width: 767px) {
  .map-left-float-stack {
    display: none;
  }
}

/* ---------- GPRS engine controls: skeuomorphic power buttons ---------- */

.map-gprs-controls {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}

.map-gprs-controls__item {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.map-gprs-controls__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: #475569;
  text-align: center;
  user-select: none;
  letter-spacing: 0.01em;
}

.map-gprs-controls__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease;
}

.map-gprs-controls__shell {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffff 0%, #eef2f6 52%, #d8dee6 100%);
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.98) inset,
    0 -3px 7px rgba(100, 116, 139, 0.14) inset;
}

.map-gprs-controls__shell::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -1px 3px rgba(100, 116, 139, 0.12) inset;
}

.map-gprs-controls__ring {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 3px solid transparent;
  z-index: 1;
  background-clip: padding-box;
}

.map-gprs-controls__face {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
  box-shadow:
    0 2px 5px rgba(15, 23, 42, 0.1),
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 -2px 4px rgba(100, 116, 139, 0.12) inset;
  z-index: 2;
}

.map-gprs-controls__power {
  width: 15px;
  height: 15px;
  display: block;
  color: #5c6672;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0 -1px 1px rgba(15, 23, 42, 0.18));
}

.map-gprs-controls__btn--start .map-gprs-controls__ring {
  border-color: var(--primary);
  box-shadow:
    0 0 4px color-mix(in srgb, var(--primary) 28%, transparent),
    0 0 8px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 2px 5px rgba(0, 0, 0, 0.18),
    inset 0 -1px 3px rgba(255, 255, 255, 0.24);
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 4%, transparent) 0%, transparent 72%);
}

.map-gprs-controls__btn--stop .map-gprs-controls__ring {
  border-color: #f87171;
  box-shadow:
    0 0 4px rgba(239, 68, 68, 0.28),
    0 0 8px rgba(239, 68, 68, 0.14),
    inset 0 2px 5px rgba(0, 0, 0, 0.18),
    inset 0 -1px 3px rgba(255, 255, 255, 0.24);
  background: radial-gradient(circle, rgba(239, 68, 68, 0.04) 0%, transparent 72%);
}

.map-gprs-controls__btn--start:hover:not(:disabled) .map-gprs-controls__ring {
  box-shadow:
    0 0 5px color-mix(in srgb, var(--primary) 36%, transparent),
    0 0 10px color-mix(in srgb, var(--primary) 18%, transparent),
    inset 0 2px 5px rgba(0, 0, 0, 0.18),
    inset 0 -1px 3px rgba(255, 255, 255, 0.24);
}

.map-gprs-controls__btn--stop:hover:not(:disabled) .map-gprs-controls__ring {
  box-shadow:
    0 0 5px rgba(239, 68, 68, 0.36),
    0 0 10px rgba(239, 68, 68, 0.18),
    inset 0 2px 5px rgba(0, 0, 0, 0.18),
    inset 0 -1px 3px rgba(255, 255, 255, 0.24);
}

.map-gprs-controls__btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.map-gprs-controls__btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

.map-gprs-controls__btn:active:not(:disabled) .map-gprs-controls__face {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 3px rgba(100, 116, 139, 0.16) inset;
}

.map-gprs-controls__btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.map-gprs-controls__btn:disabled .map-gprs-controls__ring {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.12),
    inset 0 -1px 2px rgba(255, 255, 255, 0.2);
  background: none;
}

.map-gprs-controls.is-loading,
.map-gprs-controls__btn.is-loading {
  pointer-events: none;
  cursor: wait;
}

.map-gprs-controls.is-loading .map-gprs-controls__btn,
.map-gprs-controls__btn.is-loading {
  opacity: 0.88;
}

.map-gprs-controls.is-loading .map-gprs-controls__power,
.map-gprs-controls__btn.is-loading .map-gprs-controls__power {
  opacity: 0;
}

.map-gprs-controls.is-loading .map-gprs-controls__face::after,
.map-gprs-controls__btn.is-loading .map-gprs-controls__face::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-top-color: var(--primary);
  animation: ats-gprs-btn-spin 0.72s linear infinite;
}

.map-gprs-controls.is-loading .map-gprs-controls__btn--stop .map-gprs-controls__face::after,
.map-gprs-controls__btn--stop.is-loading .map-gprs-controls__face::after {
  border-color: color-mix(in srgb, #dc2626 20%, transparent);
  border-top-color: #dc2626;
}

@keyframes ats-gprs-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- GPRS command password modal ---------- */

#gprs-command-password-modal .gprs-password-modal__dialog {
  width: min(380px, calc(100vw - 32px));
  margin: 14vh auto;
}

#gprs-command-password-modal .gprs-password-modal__content {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
}

#gprs-command-password-modal .gprs-password-modal__header {
  padding: 14px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, #fff), #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

#gprs-command-password-modal .gprs-password-modal__header .modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground, #0f172a);
}

#gprs-command-password-modal .gprs-password-modal__header .modal-title .fa {
  color: var(--primary);
  font-size: 14px;
}

#gprs-command-password-modal .gprs-password-modal__body {
  padding: 18px 20px 6px;
}

#gprs-command-password-modal .gprs-password-modal__field {
  margin-bottom: 0;
}

#gprs-command-password-modal .gprs-password-modal__field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground, #0f172a);
}

#gprs-command-password-modal .ats-password-field {
  position: relative;
}

#gprs-command-password-modal .ats-password-field__input {
  height: 42px;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  font-size: 14px;
  text-align: left;
  direction: ltr;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[dir="ltr"] #gprs-command-password-modal .ats-password-field__input {
  padding-left: 2.75rem;
  padding-right: 12px;
}

html[dir="rtl"] #gprs-command-password-modal .ats-password-field__input {
  padding-right: 2.75rem;
  padding-left: 12px;
}

#gprs-command-password-modal .ats-password-field__input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  outline: none;
}

#gprs-command-password-modal .ats-password-field__toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 4px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

#gprs-command-password-modal .ats-password-field__toggle:hover,
#gprs-command-password-modal .ats-password-field__toggle:focus {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: none;
}

#gprs-command-password-modal .gprs-password-modal__footer {
  padding: 12px 18px 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: #fafbfc;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#gprs-command-password-modal .gprs-password-modal__footer .btn {
  border-radius: 9px;
  padding: 8px 16px;
  font-weight: 600;
  min-width: 88px;
}

body.account-open .map-gprs-controls,
body.dashboard-open .map-gprs-controls,
body.drivers-open .map-gprs-controls,
body.maintenance-open .map-gprs-controls,
body.expenses-open .map-gprs-controls,
body.dash-cam-open .map-gprs-controls,
body.logistics-open .map-gprs-controls,
body.reports-open .map-gprs-controls,
body.geographic-open .map-gprs-controls,
body.device-create-open .map-gprs-controls {
  display: none !important;
}

@media (max-width: 767px) {
  .map-gprs-controls__btn,
  .map-gprs-controls__shell {
    width: 42px;
    height: 42px;
  }

  .map-gprs-controls__ring {
    inset: 2px;
    border-width: 2px;
  }

  .map-gprs-controls__face {
    inset: 10px;
  }

  .map-gprs-controls__power {
    width: 13px;
    height: 13px;
  }

  .map-gprs-controls__label {
    font-size: 10px;
  }
}

/* ---------- device widgets: compact floating card above GPRS controls ---------- */

:root {
  --device-panel-w: 300px;
}

.device-card,
.device-panel {
  --device-panel-w: 300px;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  z-index: auto;
  display: none;
  flex-direction: column;
  width: var(--device-panel-w);
  max-width: min(400px, calc(100vw - 48px));
  max-height: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  overflow: visible;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.device-panel.is-open,
.device-card.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.device-panel:not(.is-open),
.device-card:not(.is-open),
#device-card[aria-hidden="true"],
#device-panel[aria-hidden="true"] {
  visibility: hidden;
}

.device-panel__widgets,
#device-card #widgets,
#device-panel #widgets {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  min-height: 0;
  float: none !important;
  max-width: none !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden;
}

#device-card #widgets::before,
#device-panel #widgets::before,
#device-card #widgets::after,
#device-panel #widgets::after {
  display: none !important;
  content: none !important;
}

#device-card #widgets .widgets-content,
#device-panel #widgets .widgets-content {
  flex: 0 1 auto;
  max-height: none;
  overflow: visible !important;
}

#device-card #widgets .widget,
#device-panel #widgets .widget {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  vertical-align: top !important;
  box-shadow: 0 1px 4px rgba(15, 25, 35, 0.05);
}

#device-card #widgets #widget-vehicle-info,
#device-panel #widgets #widget-vehicle-info {
  border: none !important;
  box-shadow: var(--fleetoo-shadow, 0 10px 32px rgba(15, 25, 35, 0.14)) !important;
  border-radius: var(--fleetoo-radius, 16px) !important;
}

#device-card #widgets .widget + .widget,
#device-panel #widgets .widget + .widget {
  margin-left: 0 !important;
}

#device-card #widgets .widget-heading,
#device-panel #widgets .widget-heading {
  padding: 8px 10px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 12px !important;
}

#device-card #widgets .widget-title,
#device-panel #widgets .widget-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: normal !important;
}

#device-card #widgets .widget-body,
#device-panel #widgets .widget-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: visible !important;
  font-size: 11px !important;
}

#device-card #widgets .widget .table,
#device-panel #widgets .widget .table {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

#device-card #widgets .widget .table + .table,
#device-panel #widgets .widget .table + .table {
  margin-left: 0 !important;
}

#device-card #widgets .widget .table tr > td,
#device-panel #widgets .widget .table tr > td {
  max-width: none !important;
  white-space: normal !important;
  font-size: 11px;
  padding: 6px 10px !important;
  width: auto !important;
}

#device-card #widgets .widget-body .widget-empty,
#device-panel #widgets .widget-body .widget-empty {
  width: 100% !important;
  height: auto !important;
  min-height: 80px;
  background: none !important;
}

#device-card #widgets .btn-collapse,
#device-panel #widgets .btn-collapse {
  display: none !important;
}

#device-card:not(.is-open) #widgets,
#device-panel:not(.is-open) #widgets {
  display: none !important;
}

/* ---------- vehicle information floating card ---------- */

.widgets-content--vehicle-info {
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
  overflow: visible !important;
}

#device-card #widgets .vehicle-info-card.widget,
#device-panel #widgets .vehicle-info-card.widget {
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

body.fleetoo-live #device-card #widgets #widget-vehicle-info,
body.fleetoo-live #device-panel #widgets #widget-vehicle-info {
  background: #ffffff !important;
  box-shadow: var(--fleetoo-shadow, 0 10px 32px rgba(15, 25, 35, 0.14)) !important;
  border: none !important;
  border-radius: var(--fleetoo-radius, 16px) !important;
  opacity: 1 !important;
}

.vehicle-info-card {
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(15, 25, 35, 0.14);
  padding: 16px 16px 14px;
  color: #3d3350;
}

.vehicle-info-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.vehicle-info-card__head {
  flex: 1 1 auto;
  min-width: 0;
}

.vehicle-info-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #4a3f63;
}

.vehicle-info-card__plate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.vehicle-info-card__plate-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1.5px solid #d8dee8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #5b4f73;
  letter-spacing: 0.02em;
}

.vehicle-info-card__directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid #d8dee8;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  background: #ffffff;
}

.vehicle-info-card__directions:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, #d8dee8);
}

.vehicle-info-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}

.vehicle-info-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.vehicle-info-card__status-text {
  font-weight: 500;
}

.vehicle-info-card__media {
  flex: 0 0 108px;
  width: 108px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-info-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vehicle-info-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.vehicle-info-card__field {
  min-width: 0;
}

.vehicle-info-card__field--address {
  grid-column: 1 / -1;
}

.vehicle-info-card__value--address {
  font-weight: 500;
  line-height: 1.45;
}

.vehicle-info-card__label {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #94a3b8;
  margin-bottom: 2px;
}

.vehicle-info-card__value {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #334155;
  word-break: break-word;
}

.vehicle-info-card__value--icon {
  min-height: 22px;
}

.vehicle-info-card__ignition {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
}

.vehicle-info-card__ignition svg {
  width: 16px;
  height: 16px;
}

.vehicle-info-card__ignition--on {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.vehicle-info-card__ignition--off {
  color: #cbd5e1;
}

.vehicle-info-card__ignition--unknown {
  color: #94a3b8;
}

/* ---------- history results panel (graph + data log during playback) ---------- */

.history-results-panel,
.history-results-card,
#history-results-card {
  position: fixed;
  left: 0;
  right: var(--rail-width);
  bottom: 0;
  z-index: 1020;
  display: flex;
  flex-direction: column;
  max-height: 42vh;
  padding: 0 14px 14px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

body:has(#sidebar:not(.collapsed)) .history-results-panel,
body:has(#sidebar:not(.collapsed)) .history-results-card,
body:has(#sidebar:not(.collapsed)) #history-results-card {
  right: calc(var(--rail-width) + var(--sidebar-w, 300px));
}

.history-results-panel.is-open,
.history-results-card.is-open,
#history-results-card.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.history-results-panel:not(.is-open),
.history-results-card:not(.is-open),
#history-results-card:not(.is-open),
#history-results-card[aria-hidden="true"] {
  display: flex;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.history-results-panel #bottom-history,
.history-results-card #bottom-history,
#history-results-card #bottom-history {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 -8px 32px rgba(15, 25, 35, 0.14);
  overflow: hidden;
}

.history-results-panel .bottom-history-header,
.history-results-card .bottom-history-header,
#history-results-card .bottom-history-header {
  flex-shrink: 0;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.history-results-panel .tab-content,
.history-results-card .tab-content,
#history-results-card .tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.history-results-panel #graph,
.history-results-card #graph,
#history-results-card #graph {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 180px;
}

.history-results-panel .graph-1-wrap,
.history-results-card .graph-1-wrap,
#history-results-card .graph-1-wrap,
.history-results-panel .graph-1,
.history-results-card .graph-1,
#history-results-card .graph-1 {
  flex: 1 1 auto;
  min-height: 140px;
}

.history-results-panel #datalog,
.history-results-card #datalog,
#history-results-card #datalog {
  height: 100%;
  overflow: auto;
}

.history-results-panel .collapse-control,
.history-results-card .collapse-control,
#history-results-card .collapse-control {
  display: none;
}

@media (max-width: 767px) {
  .device-card,
.device-panel {
    width: min(320px, calc(100vw - 32px));
    max-height: 40vh;
  }

  .history-results-panel,
  .history-results-card,
  #history-results-card {
    padding: 0 8px 8px;
    max-height: 50vh;
  }
}

/* ---------- map controls ---------- */

#map-controls .btn, #map-controls .btn-group-vertical > .btn {
  background-color: var(--card);
  border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.1);
}

#map-controls .btn:hover, #map-controls .btn.active {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-foreground);
}

#map-controls .btn:hover .icon::before,
#map-controls .btn.active .icon::before,
#map-controls .btn:focus .icon::before {
  color: inherit;
}

#map-controls .btn .icon {
  width: 18px;
  height: 18px;
}

#map-controls .leaflet-control-layers.map-layers-picker {
  background: transparent;
  border: none;
  box-shadow: none;
}

#map-controls .map-layers-picker .leaflet-control-layers-list {
  display: none;
  min-width: 148px;
  max-width: 168px;
  padding: 4px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.1);
}

#map-controls .map-layers-picker.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
}

#map-controls .map-layers-picker__title {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 5px;
  font-size: 10px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

#map-controls .map-layers-picker__title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 75%, #ea4335 100%);
  flex-shrink: 0;
}

#map-controls .map-layers-picker .leaflet-control-layers-base {
  margin: 0;
}

#map-controls .map-layers-picker .leaflet-control-layers-base label.map-layer-option {
  display: block;
  margin: 0 0 2px;
  cursor: pointer;
}

#map-controls .map-layers-picker .leaflet-control-layers-base label.map-layer-option:last-child {
  margin-bottom: 0;
}

#map-controls .map-layers-picker .leaflet-control-layers-base label.map-layer-option > div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  min-height: 26px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 500;
  color: var(--foreground);
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#map-controls .map-layers-picker .map-layer-option__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}

#map-controls .map-layers-picker .map-layer-option__icon::before {
  font-size: 14px !important;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}

#map-controls .map-layers-picker .leaflet-control-layers-base label.map-layer-option:hover > div {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

#map-controls .map-layers-picker .leaflet-control-layers-base label.map-layer-option:hover .map-layer-option__icon::before {
  color: var(--primary);
}

#map-controls .map-layers-picker .leaflet-control-layers-base label.map-layer-option:has(.leaflet-control-layers-selector:checked) > div {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-foreground);
  box-shadow: none;
}

#map-controls .map-layers-picker .leaflet-control-layers-base label.map-layer-option:has(.leaflet-control-layers-selector:checked) .map-layer-option__icon::before {
  color: var(--primary-foreground);
}

#map-controls .map-layers-picker .leaflet-control-layers-selector {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}

#map-controls .map-layers-picker .leaflet-control-layers-base label span {
  flex: 1;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#map-controls .map-layers-picker .leaflet-control-layers-base label div::before,
#map-controls .map-layers-picker .leaflet-control-layers-base label div::after,
#map-controls .map-layers-picker .leaflet-control-layers-base label span::before,
#map-controls .map-layers-picker .leaflet-control-layers-base label span::after {
  display: none !important;
  content: none !important;
}

.leaflet-control-hidden {
  display: none !important;
}

.leaflet-ruler-tooltip.leaflet-tooltip {
  padding: 6px 10px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid color-mix(in srgb, var(--primary, #1a6ed8) 35%, #cbd5e1);
  background: rgba(255, 255, 255, 0.96);
  color: var(--foreground, #0f172a);
  box-shadow: 0 4px 14px rgba(15, 25, 35, 0.14);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.leaflet-ruler-tooltip.leaflet-tooltip::before {
  border-top-color: rgba(255, 255, 255, 0.96);
}

.leaflet-ruler-tooltip .plus-length {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground, #64748b);
}

/* ---------- locate panel (show point / show address merged) ---------- */

.locate-panel,
.locate-card,
#locate-card {
  position: absolute;
  top: calc(var(--map-gap, 14px) + 12px);
  left: 50%;
  z-index: 1002;
  width: 340px;
  max-width: calc(100% - 32px);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 12px 36px rgba(15, 25, 35, 0.22);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.locate-panel.is-open,
.locate-card.is-open,
#locate-card.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.locate-panel:not(.is-open),
.locate-card:not(.is-open),
#locate-card:not(.is-open),
#locate-card[aria-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.locate-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15));
}

.locate-panel__tabs {
  display: flex;
  flex: 1;
  gap: 6px;
  background: rgba(15, 25, 35, 0.06);
  border-radius: 999px;
  padding: 3px;
}

.locate-panel__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-foreground, #5b6b7b);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.locate-panel__tab .icon {
  transform: scale(0.85);
}

.locate-panel__tab.is-active {
  background: var(--card, #fff);
  color: var(--primary, #1d70d0);
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.14);
}

.locate-panel__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 25, 35, 0.06);
  color: var(--muted-foreground, #5b6b7b);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.locate-panel__close:hover {
  background: rgba(220, 60, 60, 0.12);
  color: #d43b3b;
}

.locate-panel__body {
  padding: 12px;
}

.locate-panel__pane {
  display: none;
}

.locate-panel__pane.is-active {
  display: block;
}

.locate-panel__format {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
}

.locate-panel__radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground, #21313f);
  cursor: pointer;
}

.locate-panel__radio input {
  margin: 0;
  accent-color: var(--primary, #1d70d0);
}

.locate-panel__row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.locate-panel__row .form-control {
  flex: 1;
  min-width: 0;
}

.locate-panel .form-control {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 25, 35, 0.12);
  border-radius: var(--radius-md, 10px);
  box-shadow: none;
  height: 34px;
  font-size: 13px;
}

.locate-panel .form-control:focus {
  background: #fff;
  border-color: var(--primary, #1d70d0);
}

.locate-panel__pane[data-locate-pane="address"] .form-control {
  margin-bottom: 10px;
}

.locate-panel__go {
  border-radius: var(--radius-md, 10px);
  font-weight: 600;
}

.locate-panel__error {
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 12px;
  border-radius: var(--radius-md, 10px);
}

[dir="rtl"] .locate-panel,
.locate-panel[dir="rtl"] {
  text-align: right;
}

/* ---------- misc: focus ring & selection ---------- */

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ring) 50%, transparent);
  outline-offset: 1px;
}

::selection {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
}

/* ---------- global type scale (reference design) ----------
   root 15px · page titles 15/600 · card titles 13/600 ·
   table text 13/400 · labels & descriptions 11px ·
   stat numbers 24/700 · table numbers 11px mono ·
   breadcrumb 11/500 */

body {
  font-size: var(--text-xs); /* 11px — labels/descriptions are the default */
}

.btn,
.form-control,
.dropdown-menu,
.dropdown-menu > li > a,
.nav > li > a,
.popover,
.list-group,
.bootstrap-select .btn {
  font-size: var(--text-xs);
}

/* table text: 13px / 400 */
.table,
.table > tbody > tr > td,
.panel,
.modal-content {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
}

/* numbers inside tables: 11px, monospace */
.table td.number,
.table td[data-type="number"],
.table .tabular-nums,
.table td.text-right[data-value] {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* page titles: 15px / 600 */
.modal-title,
.popup-title,
h1, h2,
.page-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}

/* card titles: 13px / 600 */
.panel-heading,
.panel-title,
.widget-heading,
.tab-pane-header h3,
h3, h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

/* labels and descriptions: 11px / 400–500 */
label,
.help-block,
.text-muted,
small {
  font-size: var(--text-xs);
}

label { font-weight: var(--font-weight-medium); }
.help-block, small { font-weight: var(--font-weight-normal); }

/* big stat numbers: 24px / 700 */
.stat-value,
.fleet-donut__total--lg {
  font-size: var(--text-stat);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

/* breadcrumb: 11px / 500 */
.breadcrumb,
.breadcrumb > li,
.breadcrumb > li > a {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/* ---------- icon sizes (reference design, px values from the Lucide set) ---------- */

/* main navigation icons — Map/Car/Users/BarChart3/Shield/Wrench: 16px */
#header .navbar-nav > li > a > .icon,
.rail-vehicles-icon,
.rail-support-icon {
  font-size: 16px !important;
}

/* topbar: notifications + settings */
.topbar-notify-btn { font-size: 20px; }
.topbar-notify-btn > .fa.fa-bell { font-size: 20px !important; }
.topbar-speech-btn { font-size: 16px; }

/* play 12px / stop 12px / download 12px / online (wifi) 12px */
.fa.fa-play, .icon.play,
.fa.fa-stop, .icon.stop,
.fa.fa-download, .icon.history-export,
.fa.fa-wifi {
  font-size: 12px;
}

/* refresh 10px */
.fa.fa-refresh, .icon.restart { font-size: 10px; }

/* alert 10–14px (12px middle of the range) */
.icon.alert, .icon.alerts, .fa.fa-bell,
.icon.event, .icon.events {
  font-size: 12px;
}

/* location (Navigation) + layers 15px */
.icon.device, .fa.fa-location-arrow,
.icon.map-change {
  font-size: 15px;
}

/* fuel / activity / clock 14px */
.fa.fa-clock-o, .icon.last-hour,
.fa.fa-line-chart {
  font-size: 14px;
}

/* menu / close 16px */
.fa.fa-reorder, .fa.fa-times { font-size: 16px; }

/* Platform date/time pickers — brand blue (no legacy green/teal) */
.datetimepicker.dropdown-menu,
.datepicker.dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14) !important;
}

.datetimepicker table tr td.today,
.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today.disabled:hover,
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background-color: color-mix(in srgb, var(--primary) 14%, white) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border)) !important;
  color: var(--primary) !important;
  text-shadow: none !important;
}

.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background-color: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  text-shadow: none !important;
}

.text-success,
.label-success,
.badge-success {
  color: var(--primary) !important;
}

.label-success,
.badge-success {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.on {
  color: var(--primary) !important;
}

/* Toast notifications — top banner (slides down, platform colors) */
#toast-container.toast-top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
  pointer-events: none;
  z-index: 20060;
}

body:not(.admin-layout) #toast-container.toast-top-banner {
  top: 56px;
}

body.admin-layout #toast-container.toast-top-banner {
  top: var(--admin-topbar-h, 52px);
}

#toast-container.toast-top-banner > div {
  position: relative;
  width: min(760px, calc(100% - 24px));
  max-width: none;
  margin: 10px auto 0;
  padding: 0 !important;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 18px !important;
  box-shadow:
    0 12px 36px rgba(15, 25, 35, 0.16),
    0 2px 8px rgba(15, 25, 35, 0.08) !important;
  overflow: hidden;
  opacity: 1 !important;
  background-image: none !important;
  animation: ats-toast-drop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ats-toast-drop {
  from {
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#toast-container.toast-top-banner > .toast-error {
  background: linear-gradient(
    135deg,
    var(--primary, #1a6ed8) 0%,
    color-mix(in srgb, var(--primary, #1a6ed8) 78%, #0f1923) 100%
  ) !important;
  color: #fff !important;
}

#toast-container.toast-top-banner > .toast-success {
  background: linear-gradient(
    135deg,
    #2a9d8f 0%,
    color-mix(in srgb, #2a9d8f 75%, #0f1923) 100%
  ) !important;
  color: #fff !important;
}

#toast-container.toast-top-banner > .toast-warning {
  background: linear-gradient(
    135deg,
    #d4a017 0%,
    color-mix(in srgb, #d4a017 72%, #3d2e00) 100%
  ) !important;
  color: #fff !important;
}

#toast-container.toast-top-banner > .toast-info {
  background: linear-gradient(
    135deg,
    var(--primary, #1a6ed8) 0%,
    color-mix(in srgb, var(--primary, #1a6ed8) 70%, #1e293b) 100%
  ) !important;
  color: #fff !important;
}

#toast-container.toast-top-banner .toast-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 48px 14px 18px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff !important;
}

html[dir="rtl"] #toast-container.toast-top-banner .toast-message,
#toast-container.toast-top-banner[dir="rtl"] .toast-message {
  direction: rtl;
  text-align: right;
  padding: 14px 18px 14px 48px;
}

html[dir="ltr"] #toast-container.toast-top-banner .toast-message,
#toast-container.toast-top-banner[dir="ltr"] .toast-message {
  direction: ltr;
  text-align: left;
  padding: 14px 48px 14px 18px;
}

#toast-container.toast-top-banner .toast-message::before {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-family: "tabler-icons-filled", "tabler-icons";
  font-weight: normal;
  font-size: 14px;
  line-height: 1;
  content: '\f6d8';
}

#toast-container.toast-top-banner > .toast-error .toast-message::before {
  content: '\f6f0';
}

#toast-container.toast-top-banner > .toast-success .toast-message::before {
  content: '\f058';
}

#toast-container.toast-top-banner > .toast-warning .toast-message::before {
  content: '\f06a';
}

#toast-container.toast-top-banner .toast-title {
  display: none;
}

#toast-container.toast-top-banner .toast-close-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  transition: background 0.18s ease, color 0.18s ease;
}

#toast-container.toast-top-banner .toast-close-button::before {
  content: '\101c6';
  font-family: "tabler-icons-filled", "tabler-icons";
  font-weight: normal;
  font-size: 13px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.18s ease;
}

#toast-container.toast-top-banner .toast-close-button:hover,
#toast-container.toast-top-banner .toast-close-button:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

#toast-container.toast-top-banner .toast-close-button:hover::before,
#toast-container.toast-top-banner .toast-close-button:focus::before {
  color: #fff;
}

#toast-container.toast-top-banner .toast-close-button:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

html[dir="rtl"] #toast-container.toast-top-banner .toast-close-button,
#toast-container.toast-top-banner[dir="rtl"] .toast-close-button {
  left: 14px;
  right: auto;
}

html[dir="ltr"] #toast-container.toast-top-banner .toast-close-button,
#toast-container.toast-top-banner[dir="ltr"] .toast-close-button {
  right: 14px;
  left: auto;
}

#toast-container.toast-top-banner .toast-message a,
#toast-container.toast-top-banner .toast-message label {
  color: #fff !important;
  text-decoration: underline;
}

:root {
  --ws-brand: #1a6ed8;
  --ws-brand-2: #1559b3;
  --ws-brand-bright: #1a6ed8;
  --ws-ring: rgba(26, 110, 216, 0.35);
}

/* ============================================================
   WorldSee brand lock — #1a6ed8 only (no cyan/teal anywhere)
   Overrides worldsee.css legacy + tail block after ats-ui load
   ============================================================ */

/* Header rail + sidebar nav */
#header.header-app .navbar-nav > li > a > .icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

#header.header-app .navbar-nav > li > a:hover,
#header.header-app .navbar-nav > li > a:focus,
#header .main-navbar .navbar-nav > li > a:hover,
#header .main-navbar .navbar-nav > li > a:focus {
  background: rgba(26, 110, 216, 0.1) !important;
  background-color: rgba(26, 110, 216, 0.1) !important;
  background-image: none !important;
  color: #1a6ed8 !important;
}

#header.header-app .navbar-nav > li > a:hover > .icon,
#header.header-app .navbar-nav > li > a:focus > .icon,
#header .main-navbar .navbar-nav > li > a:hover > .icon,
#header .main-navbar .navbar-nav > li > a:focus > .icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #1a6ed8 !important;
}

#header.header-app .main-navbar .navbar-nav.navbar-right > li > a > .icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a,
#header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a:hover,
#header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a:focus,
#header .main-navbar .navbar-nav.navbar-right > li.active > a,
#header .main-navbar .navbar-nav.navbar-right > li.active > a:hover,
#header .main-navbar .navbar-nav.navbar-right > li.active > a:focus {
  background: #1a6ed8 !important;
  background-color: #1a6ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a > .icon,
#header.header-app .main-navbar .navbar-nav.navbar-right > li.active > a > .text,
#header .main-navbar .navbar-nav.navbar-right > li.active > a > .icon,
#header .main-navbar .navbar-nav.navbar-right > li.active > a > .text {
  color: #ffffff !important;
}

#header.header-app .main-navbar .navbar-nav > .active > a,
#header .main-navbar .navbar-nav > .active > a {
  background: #1a6ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Buttons / forms / tabs — kill any remaining ws cyan */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #1a6ed8 !important;
  background-image: none !important;
  border-color: #1a6ed8 !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #1559b3 !important;
  border-color: #1559b3 !important;
}

.btn-info {
  background: #1a6ed8 !important;
  border-color: #1a6ed8 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #1a6ed8 !important;
  box-shadow: 0 -2px 0 #1a6ed8 inset !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: #1a6ed8 !important;
  background-image: none !important;
  border-color: #1a6ed8 !important;
}

.form-control:focus,
.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select .dropdown-toggle:focus {
  border-color: #1a6ed8 !important;
  box-shadow: 0 0 0 2px rgba(26, 110, 216, 0.2) !important;
}

.group-list > li.active,
.group-list > li.active:hover {
  border-color: #1a6ed8 !important;
  box-shadow: 0 0 0 2px rgba(26, 110, 216, 0.18) !important;
}

.table > tbody > tr:hover > td {
  background-color: #ddeaf8 !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li.active > a {
  background: #ddeaf8 !important;
  color: #1a6ed8 !important;
}

.alert-info {
  background: #ddeaf8 !important;
  color: #114a95 !important;
  border-color: rgba(26, 110, 216, 0.25) !important;
}

body:not(.login-split-layout) {
  background-image:
    radial-gradient(ellipse 120% 80% at 100% -20%, rgba(26, 110, 216, 0.08), transparent 50%),
    radial-gradient(ellipse 90% 60% at -10% 110%, rgba(26, 110, 216, 0.06), transparent 45%) !important;
}


/* ============================================================
   Clock time picker — shared by every HH:mm field in the app
   ============================================================ */

.clockpicker {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.clockpicker.form-control {
  padding: 0;
  overflow: visible;
}

.clockpicker__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}

.clockpicker__trigger i {
  color: #94a3b8;
  font-size: 12px;
}

.clockpicker.is-open .clockpicker__trigger,
.clockpicker.is-open .clockpicker__trigger i {
  color: #1a6ed8;
}

.clockpicker__pop {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 1080;
  width: 272px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6edf5;
  box-shadow: 0 20px 48px rgba(15, 23, 42, .2);
  text-align: start;
  cursor: default;
  user-select: none;
}

.clockpicker__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
}

.clockpicker__unit {
  min-width: 52px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.clockpicker__unit.is-active {
  background: #e8f1fc;
  color: #1a6ed8;
}

.clockpicker__colon {
  font-size: 24px;
  font-weight: 700;
  color: #94a3b8;
}

.clockpicker__meridiem {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-inline-start: 8px;
}

.clockpicker__meridiem button {
  padding: 2px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.clockpicker__meridiem button.is-active {
  background: #1a6ed8;
  border-color: #1a6ed8;
  color: #fff;
}

.clockpicker__dial {
  position: relative;
  width: 232px;
  height: 232px;
  margin: 0 auto;
  border-radius: 50%;
  background: #f4f7fb;
  touch-action: none;
}

.clockpicker__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #1a6ed8;
  z-index: 2;
}

.clockpicker__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  margin-left: -1px;
  background: #1a6ed8;
  transform-origin: 50% 100%;
  transition: transform .18s ease, height .18s ease;
  z-index: 1;
}

.clockpicker__knob {
  position: absolute;
  top: -17px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: #1a6ed8;
}

.clockpicker__tick {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  z-index: 3;
  pointer-events: none;
}

.clockpicker__tick--inner {
  font-size: 11px;
  color: #64748b;
}

.clockpicker__tick.is-on {
  color: #fff;
  font-weight: 700;
}

.clockpicker__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.clockpicker__spacer {
  flex: 1 1 auto;
}

.clockpicker__btn {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.clockpicker__btn.is-primary {
  background: #1a6ed8;
  border-color: #1a6ed8;
  color: #fff;
}

/* ==========================================================================
   Full-page modules — the module owns the scrolling
   ==========================================================================
   Every module page (#*_page > .*-page__content) is an absolutely positioned
   overlay inside #mapWrap and scrolls internally. Two things have to hold for
   that to work, and neither was guaranteed before:

   1. The document must not scroll behind the overlay. Otherwise a wheel event
      over the module drifts the whole document, exposing empty page
      background below the fixed #mapWrap.
   2. #mapWrap must have a real height. Below 768px it falls back to the base
      `position: relative; height: 100%`, which collapses because no ancestor
      has a resolved height — so the overlay gets clipped to a short strip by
      #mapWrap's `overflow: hidden`.
   ========================================================================== */

html:has(> body.logistics-open),
html:has(> body.maintenance-open),
html:has(> body.expenses-open),
html:has(> body.reports-open),
html:has(> body.dashboard-open),
html:has(> body.drivers-open),
html:has(> body.geographic-open),
html:has(> body.vehicle-logs-open),
html:has(> body.dash-cam-open),
html:has(> body.account-open),
html:has(> body.command-logs-open),
html:has(> body.alert-profile-open),
body.logistics-open,
body.maintenance-open,
body.expenses-open,
body.reports-open,
body.dashboard-open,
body.drivers-open,
body.geographic-open,
body.vehicle-logs-open,
body.dash-cam-open,
body.account-open,
body.command-logs-open,
body.alert-profile-open {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-width: 767px) {
  body.logistics-open #mapWrap,
  body.maintenance-open #mapWrap,
  body.expenses-open #mapWrap,
  body.reports-open #mapWrap,
  body.dashboard-open #mapWrap,
  body.drivers-open #mapWrap,
  body.geographic-open #mapWrap,
  body.vehicle-logs-open #mapWrap,
  body.dash-cam-open #mapWrap,
  body.account-open #mapWrap,
  body.command-logs-open #mapWrap,
  body.alert-profile-open #mapWrap {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto !important;
    margin: 0;
  }
}

/* ===== ats-ui/icons.css ===== */
/* ============================================================
   ATS icon system — Tabler (filled primary, outline fallback)
   Generated by scripts/generate-icons-css.py — do not edit by hand.
   Requires assets/tabler/tabler-fonts-only.css for @font-face.
   ============================================================ */

.icon::before, .fa::before, .icon-fa::before, .ti::before {
  font-weight: normal !important;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* FA class shell — glyphs from Tabler remaps (Font Awesome is not loaded) */
.fa, .fas, .far, .fab, .fal, .icon-fa {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: normal !important;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: never;
}
.fa-fw { width: 1.25em; text-align: center; }
.fa-lg { font-size: 1.333333em; line-height: 0.75em; vertical-align: -0.0667em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }

@keyframes ats-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.fa-spin, .fa.fa-spinner.fa-spin::before {
  display: inline-block;
  animation: ats-icon-spin 0.85s linear infinite;
}

/* Unknown FA icons → Tabler settings */
.fa:before, .fas:before, .far:before, .fal:before, .icon-fa:before {
  font-family: "tabler-icons-filled" !important;
  content: "\f69e" !important;
  font-weight: normal !important;
}

.icon.acc::before { content: "\fe28" !important; font-family: "tabler-icons-filled" !important; } /* ti-key */
.icon.account::before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; } /* ti-user-circle */
.icon.add::before { content: "\101ce" !important; font-family: "tabler-icons-filled" !important; } /* ti-plus */
.icon.address::before { content: "\101cb" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-search */
.icon.admin::before { content: "\f69f" !important; font-family: "tabler-icons-filled" !important; } /* ti-user-shield */
.icon.admin-settings::before { content: "\f69e" !important; font-family: "tabler-icons-filled" !important; } /* ti-settings-2 */
.icon.alert::before { content: "\f669" !important; font-family: "tabler-icons-filled" !important; } /* ti-bell */
.icon.alerts::before { content: "\f725" !important; font-family: "tabler-icons-filled" !important; } /* ti-bell-ringing */
.icon.apn-config::before { content: "\f094" !important; font-family: "tabler-icons" !important; } /* ti-antenna */
.icon.appearance::before { content: "\1009d" !important; font-family: "tabler-icons-filled" !important; } /* ti-palette */
.icon.backups::before { content: "\f673" !important; font-family: "tabler-icons-filled" !important; } /* ti-cloud-upload */
.icon.billing::before { content: "\fd11" !important; font-family: "tabler-icons-filled" !important; } /* ti-wallet */
.icon.blocked-ips::before { content: "\f763" !important; font-family: "tabler-icons-filled" !important; } /* ti-shield-lock */
.icon.calendar::before { content: "\fb27" !important; font-family: "tabler-icons-filled" !important; } /* ti-calendar */
.icon.call_action::before { content: "\101c0" !important; font-family: "tabler-icons-filled" !important; } /* ti-phone-call */
.icon.camera::before { content: "\fa37" !important; font-family: "tabler-icons-filled" !important; } /* ti-camera */
.icon.chat::before { content: "\101d0" !important; font-family: "tabler-icons-filled" !important; } /* ti-messages */
.icon.check::before { content: "\f704" !important; font-family: "tabler-icons-filled" !important; } /* ti-circle-check */
.icon.checklist::before { content: "\101d4" !important; font-family: "tabler-icons-filled" !important; } /* ti-checklist */
.icon.command-templates::before { content: "\fed3" !important; font-family: "tabler-icons-filled" !important; } /* ti-terminal-2 */
.icon.companies::before { content: "\fe2b" !important; font-family: "tabler-icons-filled" !important; } /* ti-building */
.icon.complete::before { content: "\f704" !important; font-family: "tabler-icons-filled" !important; } /* ti-circle-check */
.icon.content::before { content: "\f7da" !important; font-family: "tabler-icons-filled" !important; } /* ti-article */
.icon.counter::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.custom-field::before { content: "\fb2e" !important; font-family: "tabler-icons-filled" !important; } /* ti-category */
.icon.dash-cam::before { content: "\1004b" !important; font-family: "tabler-icons-filled" !important; } /* ti-device-cctv */
.icon.dashboard::before { content: "\fe1f" !important; font-family: "tabler-icons-filled" !important; } /* ti-layout-dashboard */
.icon.delete::before { content: "\f783" !important; font-family: "tabler-icons-filled" !important; } /* ti-trash */
.icon.detect_engine::before { content: "\100fc" !important; font-family: "tabler-icons-filled" !important; } /* ti-engine */
.icon.device::before { content: "\fe48" !important; font-family: "tabler-icons-filled" !important; } /* ti-gps */
.icon.device-add::before { content: "\fef9" !important; font-family: "tabler-icons-filled" !important; } /* ti-device-mobile-plus */
.icon.device-config::before { content: "\1004a" !important; font-family: "tabler-icons-filled" !important; } /* ti-cpu */
.icon.device-distance::before { content: "\1003f" !important; font-family: "tabler-icons-filled" !important; } /* ti-route */
.icon.device-import::before { content: "\edea" !important; font-family: "tabler-icons" !important; } /* ti-file-import */
.icon.device-model::before { content: "\fa39" !important; font-family: "tabler-icons-filled" !important; } /* ti-device-mobile */
.icon.devices::before { content: "\1004c" !important; font-family: "tabler-icons-filled" !important; } /* ti-car */
.icon.door::before { content: "\fe15" !important; font-family: "tabler-icons-filled" !important; } /* ti-door */
.icon.doors::before { content: "\fe15" !important; font-family: "tabler-icons-filled" !important; } /* ti-door */
.icon.download::before { content: "\101dc" !important; font-family: "tabler-icons-filled" !important; } /* ti-download */
.icon.driver::before { content: "\ff03" !important; font-family: "tabler-icons-filled" !important; } /* ti-steering-wheel */
.icon.drivers::before { content: "\ff03" !important; font-family: "tabler-icons-filled" !important; } /* ti-steering-wheel */
.icon.edit::before { content: "\101cf" !important; font-family: "tabler-icons-filled" !important; } /* ti-pencil */
.icon.email::before { content: "\fa47" !important; font-family: "tabler-icons-filled" !important; } /* ti-mail */
.icon.email-templates::before { content: "\fa47" !important; font-family: "tabler-icons-filled" !important; } /* ti-mail */
.icon.engine::before { content: "\100fc" !important; font-family: "tabler-icons-filled" !important; } /* ti-engine */
.icon.engine_hours::before { content: "\f73a" !important; font-family: "tabler-icons-filled" !important; } /* ti-clock */
.icon.event::before { content: "\f669" !important; font-family: "tabler-icons-filled" !important; } /* ti-bell */
.icon.event-add::before { content: "\fef9" !important; font-family: "tabler-icons-filled" !important; } /* ti-circle-plus */
.icon.events::before { content: "\f725" !important; font-family: "tabler-icons-filled" !important; } /* ti-bell-ringing */
.icon.external-link::before { content: "\101da" !important; font-family: "tabler-icons-filled" !important; } /* ti-external-link */
.icon.eye::before { content: "\f679" !important; font-family: "tabler-icons-filled" !important; } /* ti-eye */
.icon.filter::before { content: "\fc27" !important; font-family: "tabler-icons-filled" !important; } /* ti-filter */
.icon.fitBounds::before { content: "\f02a" !important; font-family: "tabler-icons" !important; } /* ti-focus-centered */
.icon.follow::before { content: "\ebd3" !important; font-family: "tabler-icons" !important; } /* ti-focus-2 */
.icon.forwards::before { content: "\101da" !important; font-family: "tabler-icons-filled" !important; } /* ti-transfer-out */
.icon.fuel::before { content: "\ee80" !important; font-family: "tabler-icons-filled" !important; } /* ti-droplet */
.icon.fuel_consumption::before { content: "\ee80" !important; font-family: "tabler-icons-filled" !important; } /* ti-droplet */
.icon.fuel_tank::before { content: "\ee80" !important; font-family: "tabler-icons-filled" !important; } /* ti-droplet */
.icon.fuel_tank_calibration::before { content: "\ee80" !important; font-family: "tabler-icons-filled" !important; } /* ti-droplet */
.icon.fuel_tank_consumption::before { content: "\ee80" !important; font-family: "tabler-icons-filled" !important; } /* ti-droplet */
.icon.geofence::before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-pins */
.icon.geofence-import::before { content: "\edea" !important; font-family: "tabler-icons" !important; } /* ti-file-import */
.icon.geofences::before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-pins */
.icon.globe::before { content: "\101c7" !important; font-family: "tabler-icons-filled" !important; } /* ti-world */
.icon.group-devices::before { content: "\fe1c" !important; font-family: "tabler-icons-filled" !important; } /* ti-layout-grid */
.icon.history::before { content: "\1003f" !important; font-family: "tabler-icons-filled" !important; } /* ti-route-2 */
.icon.history-arrows::before { content: "\f7d8" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrow-badge-right */
.icon.history-clean::before { content: "\f784" !important; font-family: "tabler-icons-filled" !important; } /* ti-trash-x */
.icon.history-events::before { content: "\f725" !important; font-family: "tabler-icons-filled" !important; } /* ti-bell-ringing */
.icon.history-export::before { content: "\101dc" !important; font-family: "tabler-icons-filled" !important; } /* ti-download */
.icon.history-route::before { content: "\1003f" !important; font-family: "tabler-icons-filled" !important; } /* ti-route-2 */
.icon.history-stops::before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-pin-pause */
.icon.ico-arrow-down::before { content: "\101e5" !important; font-family: "tabler-icons-filled" !important; } /* ti-chevron-down */
.icon.ico-options-h::before { content: "\101dd" !important; font-family: "tabler-icons-filled" !important; } /* ti-dots */
.icon.ignition::before { content: "\fe28" !important; font-family: "tabler-icons-filled" !important; } /* ti-key */
.icon.import::before { content: "\eb47" !important; font-family: "tabler-icons" !important; } /* ti-upload */
.icon.incomplete::before { content: "\f739" !important; font-family: "tabler-icons-filled" !important; } /* ti-circle-x */
.icon.last-hour::before { content: "\fe5f" !important; font-family: "tabler-icons-filled" !important; } /* ti-clock-hour-4 */
.icon.list::before { content: "\101d2" !important; font-family: "tabler-icons-filled" !important; } /* ti-list */
.icon.live-tracking::before { content: "\100a1" !important; font-family: "tabler-icons-filled" !important; } /* ti-live-view */
.icon.load::before { content: "\100f3" !important; font-family: "tabler-icons-filled" !important; } /* ti-truck */
.icon.load_calibration::before { content: "\100f3" !important; font-family: "tabler-icons-filled" !important; } /* ti-truck */
.icon.lock::before { content: "\fe15" !important; font-family: "tabler-icons-filled" !important; } /* ti-lock */
.icon.logical::before { content: "\febf" !important; font-family: "tabler-icons-filled" !important; } /* ti-toggle-right */
.icon.logistics::before { content: "\ec4b" !important; font-family: "tabler-icons" !important; } /* ti-truck-delivery */
.icon.logout::before { content: "\eba8" !important; font-family: "tabler-icons" !important; } /* ti-logout */
.icon.logs::before { content: "\101d3" !important; font-family: "tabler-icons-filled" !important; } /* ti-logs */
.icon.lookup::before { content: "\f782" !important; font-family: "tabler-icons-filled" !important; } /* ti-table */
.icon.map::before { content: "\101c7" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-2 */
.icon.map-change::before { content: "\eea1" !important; font-family: "tabler-icons" !important; } /* ti-layers-linked */
.icon.map-cluster::before { content: "\fe1c" !important; font-family: "tabler-icons-filled" !important; } /* ti-layout-grid */
.icon.map-expand::before { content: "\fe17" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-maximize */
.icon.map-fit::before { content: "\f02a" !important; font-family: "tabler-icons" !important; } /* ti-focus-centered */
.icon.map-geofence::before { content: "\f67d" !important; font-family: "tabler-icons-filled" !important; } /* ti-polygon */
.icon.map-icons::before { content: "\10070" !important; font-family: "tabler-icons-filled" !important; } /* ti-icons */
.icon.map-labels::before { content: "\ff02" !important; font-family: "tabler-icons-filled" !important; } /* ti-tag */
.icon.map-layers::before { content: "\eea1" !important; font-family: "tabler-icons" !important; } /* ti-layers-linked */
.icon.map-locate::before { content: "\10125" !important; font-family: "tabler-icons-filled" !important; } /* ti-crosshair */
.icon.map-measure::before { content: "\f291" !important; font-family: "tabler-icons" !important; } /* ti-ruler-measure */
.icon.map-poi::before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-pin */
.icon.map-route::before { content: "\1003f" !important; font-family: "tabler-icons-filled" !important; } /* ti-route */
.icon.map-traffic::before { content: "\ed39" !important; font-family: "tabler-icons" !important; } /* ti-traffic-lights */
.icon.map-trail::before { content: "\fd18" !important; font-family: "tabler-icons-filled" !important; } /* ti-timeline-event */
.icon.map-vehicles::before { content: "\1004c" !important; font-family: "tabler-icons-filled" !important; } /* ti-car */
.icon.membership::before { content: "\f7d1" !important; font-family: "tabler-icons" !important; } /* ti-user-star */
.icon.minus::before { content: "\fb3f" !important; font-family: "tabler-icons-filled" !important; } /* ti-minus */
.icon.money::before { content: "\ff06" !important; font-family: "tabler-icons-filled" !important; } /* ti-receipt-2 */
.icon.multi-edit::before { content: "\f69e" !important; font-family: "tabler-icons-filled" !important; } /* ti-settings */
.icon.my-location::before { content: "\10125" !important; font-family: "tabler-icons-filled" !important; } /* ti-current-location */
.icon.numerical::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.odometer::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.options::before { content: "\101de" !important; font-family: "tabler-icons-filled" !important; } /* ti-dots-vertical */
.icon.pages::before { content: "\1011e" !important; font-family: "tabler-icons-filled" !important; } /* ti-file-description */
.icon.parking::before { content: "\eb03" !important; font-family: "tabler-icons" !important; } /* ti-parking */
.icon.password::before { content: "\fe15" !important; font-family: "tabler-icons-filled" !important; } /* ti-lock */
.icon.pause::before { content: "\f690" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-pause */
.icon.photo::before { content: "\fa4a" !important; font-family: "tabler-icons-filled" !important; } /* ti-photo */
.icon.play::before { content: "\f691" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-play */
.icon.plugged::before { content: "\ebd9" !important; font-family: "tabler-icons" !important; } /* ti-plug */
.icon.plugins::before { content: "\f00a" !important; font-family: "tabler-icons" !important; } /* ti-plug-connected */
.icon.plus::before { content: "\101ce" !important; font-family: "tabler-icons-filled" !important; } /* ti-plus */
.icon.poi::before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-pin */
.icon.poi-import::before { content: "\edea" !important; font-family: "tabler-icons" !important; } /* ti-file-import */
.icon.point::before { content: "\10125" !important; font-family: "tabler-icons-filled" !important; } /* ti-crosshair */
.icon.pois::before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-pin-star */
.icon.popup::before { content: "\1009f" !important; font-family: "tabler-icons-filled" !important; } /* ti-message-2 */
.icon.ports::before { content: "\eb18" !important; font-family: "tabler-icons" !important; } /* ti-router */
.icon.pre-checklist::before { content: "\100ea" !important; font-family: "tabler-icons-filled" !important; } /* ti-clipboard-list */
.icon.qrcode::before { content: "\eb11" !important; font-family: "tabler-icons" !important; } /* ti-qrcode */
.icon.remove::before { content: "\101c6" !important; font-family: "tabler-icons-filled" !important; } /* ti-x */
.icon.remove-all::before { content: "\f784" !important; font-family: "tabler-icons-filled" !important; } /* ti-trash-x */
.icon.report-types::before { content: "\eece" !important; font-family: "tabler-icons" !important; } /* ti-report */
.icon.reports::before { content: "\101b6" !important; font-family: "tabler-icons-filled" !important; } /* ti-report-analytics */
.icon.reset::before { content: "\eb16" !important; font-family: "tabler-icons" !important; } /* ti-rotate */
.icon.restart::before { content: "\eb13" !important; font-family: "tabler-icons" !important; } /* ti-refresh */
.icon.rfid::before { content: "\fd11" !important; font-family: "tabler-icons-filled" !important; } /* ti-credit-card */
.icon.route-import::before { content: "\edea" !important; font-family: "tabler-icons" !important; } /* ti-file-import */
.icon.route_type::before { content: "\fd00" !important; font-family: "tabler-icons-filled" !important; } /* ti-briefcase */
.icon.routes::before { content: "\1003f" !important; font-family: "tabler-icons-filled" !important; } /* ti-route */
.icon.ruler::before { content: "\f291" !important; font-family: "tabler-icons" !important; } /* ti-ruler-measure */
.icon.satellites::before { content: "\101b4" !important; font-family: "tabler-icons-filled" !important; } /* ti-satellite */
.icon.search::before { content: "\101cb" !important; font-family: "tabler-icons-filled" !important; } /* ti-search */
.icon.seatbelt::before { content: "\f69f" !important; font-family: "tabler-icons-filled" !important; } /* ti-shield */
.icon.secondary-credentials::before { content: "\eeaa" !important; font-family: "tabler-icons" !important; } /* ti-lock-access */
.icon.send::before { content: "\101ca" !important; font-family: "tabler-icons-filled" !important; } /* ti-send */
.icon.send-command::before { content: "\fed3" !important; font-family: "tabler-icons-filled" !important; } /* ti-terminal-2 */
.icon.sensor-icons::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.sensors::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.services::before { content: "\fc77" !important; font-family: "tabler-icons" !important; } /* ti-car-garage */
.icon.setting::before { content: "\f69e" !important; font-family: "tabler-icons-filled" !important; } /* ti-settings-2 */
.icon.settings::before { content: "\f69e" !important; font-family: "tabler-icons-filled" !important; } /* ti-settings-2 */
.icon.setup::before { content: "\f9d4" !important; font-family: "tabler-icons" !important; } /* ti-user-cog */
.icon.sharing::before { content: "\f799" !important; font-family: "tabler-icons" !important; } /* ti-share-2 */
.icon.show-name::before { content: "\ff02" !important; font-family: "tabler-icons-filled" !important; } /* ti-tag */
.icon.show-tail::before { content: "\fd18" !important; font-family: "tabler-icons-filled" !important; } /* ti-timeline-event */
.icon.sms-templates::before { content: "\1009f" !important; font-family: "tabler-icons-filled" !important; } /* ti-message-2 */
.icon.speed::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.speed_ecm::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.stop::before { content: "\f695" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-stop */
.icon.streetview::before { content: "\fed1" !important; font-family: "tabler-icons-filled" !important; } /* ti-live-photo */
.icon.stylize-1::before { content: "\1009d" !important; font-family: "tabler-icons-filled" !important; } /* ti-brush */
.icon.tachometer::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.icon.task::before { content: "\101d4" !important; font-family: "tabler-icons-filled" !important; } /* ti-checklist */
.icon.task-import::before { content: "\edea" !important; font-family: "tabler-icons" !important; } /* ti-file-import */
.icon.temperature::before { content: "\100c6" !important; font-family: "tabler-icons-filled" !important; } /* ti-flame */
.icon.temperature_calibration::before { content: "\100c6" !important; font-family: "tabler-icons-filled" !important; } /* ti-flame */
.icon.textual::before { content: "\1016b" !important; font-family: "tabler-icons-filled" !important; } /* ti-typography */
.icon.time::before { content: "\f73a" !important; font-family: "tabler-icons-filled" !important; } /* ti-clock */
.icon.today::before { content: "\100b9" !important; font-family: "tabler-icons-filled" !important; } /* ti-calendar-event */
.icon.tools::before { content: "\ebca" !important; font-family: "tabler-icons" !important; } /* ti-tools */
.icon.traffic::before { content: "\ed39" !important; font-family: "tabler-icons" !important; } /* ti-traffic-lights */
.icon.translations::before { content: "\ebbe" !important; font-family: "tabler-icons" !important; } /* ti-language */
.icon.trash::before { content: "\f783" !important; font-family: "tabler-icons-filled" !important; } /* ti-trash */
.icon.unit-altitude::before { content: "\fe1d" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-vertical */
.icon.unit-capacity::before { content: "\ee80" !important; font-family: "tabler-icons-filled" !important; } /* ti-droplet */
.icon.unit-distance::before { content: "\fe1e" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-horizontal */
.icon.unlock::before { content: "\fe15" !important; font-family: "tabler-icons-filled" !important; } /* ti-lock-open */
.icon.upload::before { content: "\eb47" !important; font-family: "tabler-icons" !important; } /* ti-upload */
.icon.user::before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; } /* ti-user */
.icon.user-add::before { content: "\eb4b" !important; font-family: "tabler-icons" !important; } /* ti-user-plus */
.icon.user-edit::before { content: "\101cf" !important; font-family: "tabler-icons-filled" !important; } /* ti-pencil */
.icon.users::before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; } /* ti-users */
.icon.vin::before { content: "\101d6" !important; font-family: "tabler-icons-filled" !important; } /* ti-barcode */
.icon.yesterday::before { content: "\ebb9" !important; font-family: "tabler-icons" !important; } /* ti-calendar-minus */
.icon.zoomIn::before { content: "\f789" !important; font-family: "tabler-icons-filled" !important; } /* ti-zoom-in */
.icon.zoomOut::before { content: "\f78a" !important; font-family: "tabler-icons-filled" !important; } /* ti-zoom-out */

.fa.fa-angle-double-right::before, .icon-fa.fa-angle-double-right::before, .fa-angle-double-right.icon-fa::before { content: "\ea65" !important; font-family: "tabler-icons" !important; } /* ti-chevrons-right */
.fa.fa-angle-down::before, .icon-fa.fa-angle-down::before, .fa-angle-down.icon-fa::before { content: "\101e5" !important; font-family: "tabler-icons-filled" !important; } /* ti-chevron-down */
.fa.fa-angle-left::before, .icon-fa.fa-angle-left::before, .fa-angle-left.icon-fa::before { content: "\ea60" !important; font-family: "tabler-icons" !important; } /* ti-chevron-left */
.fa.fa-angle-right::before, .icon-fa.fa-angle-right::before, .fa-angle-right.icon-fa::before { content: "\101e4" !important; font-family: "tabler-icons-filled" !important; } /* ti-chevron-right */
.fa.fa-area-chart::before, .icon-fa.fa-area-chart::before, .fa-area-chart.icon-fa::before { content: "\f66b" !important; font-family: "tabler-icons-filled" !important; } /* ti-chart-area */
.fa.fa-arrow-left::before, .icon-fa.fa-arrow-left::before, .fa-arrow-left.icon-fa::before { content: "\ea19" !important; font-family: "tabler-icons" !important; } /* ti-arrow-left */
.fa.fa-arrow-right::before, .icon-fa.fa-arrow-right::before, .fa-arrow-right.icon-fa::before { content: "\ea1f" !important; font-family: "tabler-icons" !important; } /* ti-arrow-right */
.fa.fa-arrow-up::before, .icon-fa.fa-arrow-up::before, .fa-arrow-up.icon-fa::before { content: "\1002d" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrow-up */
.fa.fa-arrows-alt::before, .icon-fa.fa-arrows-alt::before, .fa-arrows-alt.icon-fa::before { content: "\fe17" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-maximize */
.fa.fa-arrows-h::before, .icon-fa.fa-arrows-h::before, .fa-arrows-h.icon-fa::before { content: "\fe1e" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-horizontal */
.fa.fa-arrows-v::before, .icon-fa.fa-arrows-v::before, .fa-arrows-v.icon-fa::before { content: "\fe1d" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-vertical */
.fa.fa-automobile::before, .icon-fa.fa-automobile::before, .fa-automobile.icon-fa::before { content: "\100a1" !important; font-family: "tabler-icons-filled" !important; } /* ti-live-view */
.fa.fa-bar-chart::before, .icon-fa.fa-bar-chart::before, .fa-bar-chart.icon-fa::before { content: "\101b6" !important; font-family: "tabler-icons-filled" !important; } /* ti-report-analytics */
.fa.fa-barcode::before, .icon-fa.fa-barcode::before, .fa-barcode.icon-fa::before { content: "\101d6" !important; font-family: "tabler-icons-filled" !important; } /* ti-barcode */
.fa.fa-bars::before, .icon-fa.fa-bars::before, .fa-bars.icon-fa::before { content: "\101d1" !important; font-family: "tabler-icons-filled" !important; } /* ti-menu-2 */
.fa.fa-bell::before, .icon-fa.fa-bell::before, .fa-bell.icon-fa::before { content: "\f725" !important; font-family: "tabler-icons-filled" !important; } /* ti-bell-ringing */
.fa.fa-bolt::before, .icon-fa.fa-bolt::before, .fa-bolt.icon-fa::before { content: "\10021" !important; font-family: "tabler-icons-filled" !important; } /* ti-bolt */
.fa.fa-bookmark::before, .icon-fa.fa-bookmark::before, .fa-bookmark.icon-fa::before { content: "\fa88" !important; font-family: "tabler-icons-filled" !important; } /* ti-bookmark */
.fa.fa-bookmark-o::before, .icon-fa.fa-bookmark-o::before, .fa-bookmark-o.icon-fa::before { content: "\fa88" !important; font-family: "tabler-icons-filled" !important; } /* ti-bookmark */
.fa.fa-border-all::before, .icon-fa.fa-border-all::before, .fa-border-all.icon-fa::before { content: "\ea3b" !important; font-family: "tabler-icons" !important; } /* ti-border-all */
.fa.fa-briefcase::before, .icon-fa.fa-briefcase::before, .fa-briefcase.icon-fa::before { content: "\fd00" !important; font-family: "tabler-icons-filled" !important; } /* ti-briefcase */
.fa.fa-building::before, .icon-fa.fa-building::before, .fa-building.icon-fa::before { content: "\fe2b" !important; font-family: "tabler-icons-filled" !important; } /* ti-building */
.fa.fa-calendar::before, .icon-fa.fa-calendar::before, .fa-calendar.icon-fa::before { content: "\fb27" !important; font-family: "tabler-icons-filled" !important; } /* ti-calendar */
.fa.fa-calendar-check-o::before, .icon-fa.fa-calendar-check-o::before, .fa-calendar-check-o.icon-fa::before { content: "\100b9" !important; font-family: "tabler-icons-filled" !important; } /* ti-calendar-event */
.fa.fa-camera::before, .icon-fa.fa-camera::before, .fa-camera.icon-fa::before { content: "\fa37" !important; font-family: "tabler-icons-filled" !important; } /* ti-camera */
.fa.fa-car::before, .icon-fa.fa-car::before, .fa-car.icon-fa::before { content: "\100a1" !important; font-family: "tabler-icons-filled" !important; } /* ti-live-view */
.fa.fa-check::before, .icon-fa.fa-check::before, .fa-check.icon-fa::before { content: "\101e6" !important; font-family: "tabler-icons-filled" !important; } /* ti-check */
.fa.fa-check-circle::before, .icon-fa.fa-check-circle::before, .fa-check-circle.icon-fa::before { content: "\f704" !important; font-family: "tabler-icons-filled" !important; } /* ti-circle-check */
.fa.fa-chevron-down::before, .icon-fa.fa-chevron-down::before, .fa-chevron-down.icon-fa::before { content: "\101e5" !important; font-family: "tabler-icons-filled" !important; } /* ti-chevron-down */
.fa.fa-chevron-left::before, .icon-fa.fa-chevron-left::before, .fa-chevron-left.icon-fa::before { content: "\ea60" !important; font-family: "tabler-icons" !important; } /* ti-chevron-left */
.fa.fa-chevron-right::before, .icon-fa.fa-chevron-right::before, .fa-chevron-right.icon-fa::before { content: "\101e4" !important; font-family: "tabler-icons-filled" !important; } /* ti-chevron-right */
.fa.fa-circle::before, .icon-fa.fa-circle::before, .fa-circle.icon-fa::before { content: "\f671" !important; font-family: "tabler-icons-filled" !important; } /* ti-circle */
.fa.fa-clipboard::before, .icon-fa.fa-clipboard::before, .fa-clipboard.icon-fa::before { content: "\100ea" !important; font-family: "tabler-icons-filled" !important; } /* ti-clipboard-list */
.fa.fa-clock-o::before, .icon-fa.fa-clock-o::before, .fa-clock-o.icon-fa::before { content: "\f73a" !important; font-family: "tabler-icons-filled" !important; } /* ti-clock */
.fa.fa-close::before, .icon-fa.fa-close::before, .fa-close.icon-fa::before { content: "\101c6" !important; font-family: "tabler-icons-filled" !important; } /* ti-x */
.fa.fa-cloud::before, .icon-fa.fa-cloud::before, .fa-cloud.icon-fa::before { content: "\f673" !important; font-family: "tabler-icons-filled" !important; } /* ti-cloud */
.fa.fa-cloud-download::before, .icon-fa.fa-cloud-download::before, .fa-cloud-download.icon-fa::before { content: "\101dc" !important; font-family: "tabler-icons-filled" !important; } /* ti-cloud-download */
.fa.fa-code::before, .icon-fa.fa-code::before, .fa-code.icon-fa::before { content: "\fed3" !important; font-family: "tabler-icons-filled" !important; } /* ti-code */
.fa.fa-coffee::before, .icon-fa.fa-coffee::before, .fa-coffee.icon-fa::before { content: "\10009" !important; font-family: "tabler-icons-filled" !important; } /* ti-mug */
.fa.fa-cog::before, .icon-fa.fa-cog::before, .fa-cog.icon-fa::before { content: "\f69e" !important; font-family: "tabler-icons-filled" !important; } /* ti-settings-2 */
.fa.fa-cogs::before, .icon-fa.fa-cogs::before, .fa-cogs.icon-fa::before { content: "\f69e" !important; font-family: "tabler-icons-filled" !important; } /* ti-settings */
.fa.fa-comment::before, .icon-fa.fa-comment::before, .fa-comment.icon-fa::before { content: "\fecd" !important; font-family: "tabler-icons-filled" !important; } /* ti-message */
.fa.fa-comment-o::before, .icon-fa.fa-comment-o::before, .fa-comment-o.icon-fa::before { content: "\fecd" !important; font-family: "tabler-icons-filled" !important; } /* ti-message */
.fa.fa-comments-o::before, .icon-fa.fa-comments-o::before, .fa-comments-o.icon-fa::before { content: "\101d0" !important; font-family: "tabler-icons-filled" !important; } /* ti-messages */
.fa.fa-compress::before, .icon-fa.fa-compress::before, .fa-compress.icon-fa::before { content: "\fe17" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-minimize */
.fa.fa-copy::before, .icon-fa.fa-copy::before, .fa-copy.icon-fa::before { content: "\101e2" !important; font-family: "tabler-icons-filled" !important; } /* ti-copy */
.fa.fa-credit-card::before, .icon-fa.fa-credit-card::before, .fa-credit-card.icon-fa::before { content: "\fd11" !important; font-family: "tabler-icons-filled" !important; } /* ti-credit-card */
.fa.fa-crosshairs::before, .icon-fa.fa-crosshairs::before, .fa-crosshairs.icon-fa::before { content: "\10125" !important; font-family: "tabler-icons-filled" !important; } /* ti-crosshair */
.fa.fa-cube::before, .icon-fa.fa-cube::before, .fa-cube.icon-fa::before { content: "\f67d" !important; font-family: "tabler-icons-filled" !important; } /* ti-hexagon */
.fa.fa-cubes::before, .icon-fa.fa-cubes::before, .fa-cubes.icon-fa::before { content: "\fa39" !important; font-family: "tabler-icons-filled" !important; } /* ti-devices */
.fa.fa-dashboard::before, .icon-fa.fa-dashboard::before, .fa-dashboard.icon-fa::before { content: "\fe1f" !important; font-family: "tabler-icons-filled" !important; } /* ti-layout-dashboard */
.fa.fa-dot-circle-o::before, .icon-fa.fa-dot-circle-o::before, .fa-dot-circle-o.icon-fa::before { content: "\10125" !important; font-family: "tabler-icons-filled" !important; } /* ti-current-location */
.fa.fa-download::before, .icon-fa.fa-download::before, .fa-download.icon-fa::before { content: "\101dc" !important; font-family: "tabler-icons-filled" !important; } /* ti-download */
.fa.fa-draw-polygon::before, .icon-fa.fa-draw-polygon::before, .fa-draw-polygon.icon-fa::before { content: "\f67d" !important; font-family: "tabler-icons-filled" !important; } /* ti-hexagon */
.fa.fa-edit::before, .icon-fa.fa-edit::before, .fa-edit.icon-fa::before { content: "\101cf" !important; font-family: "tabler-icons-filled" !important; } /* ti-pencil */
.fa.fa-ellipsis-h::before, .icon-fa.fa-ellipsis-h::before, .fa-ellipsis-h.icon-fa::before { content: "\101dd" !important; font-family: "tabler-icons-filled" !important; } /* ti-dots */
.fa.fa-ellipsis-v::before, .icon-fa.fa-ellipsis-v::before, .fa-ellipsis-v.icon-fa::before { content: "\101de" !important; font-family: "tabler-icons-filled" !important; } /* ti-dots-vertical */
.fa.fa-envelope::before, .icon-fa.fa-envelope::before, .fa-envelope.icon-fa::before { content: "\fa47" !important; font-family: "tabler-icons-filled" !important; } /* ti-mail */
.fa.fa-exclamation-circle::before, .icon-fa.fa-exclamation-circle::before, .fa-exclamation-circle.icon-fa::before { content: "\f6ee" !important; font-family: "tabler-icons-filled" !important; } /* ti-alert-circle */
.fa.fa-exclamation-triangle::before, .icon-fa.fa-exclamation-triangle::before, .fa-exclamation-triangle.icon-fa::before { content: "\f6f0" !important; font-family: "tabler-icons-filled" !important; } /* ti-alert-triangle */
.fa.fa-expand::before, .icon-fa.fa-expand::before, .fa-expand.icon-fa::before { content: "\fe17" !important; font-family: "tabler-icons-filled" !important; } /* ti-arrows-maximize */
.fa.fa-external-link::before, .icon-fa.fa-external-link::before, .fa-external-link.icon-fa::before { content: "\101da" !important; font-family: "tabler-icons-filled" !important; } /* ti-external-link */
.fa.fa-eye::before, .icon-fa.fa-eye::before, .fa-eye.icon-fa::before { content: "\f679" !important; font-family: "tabler-icons-filled" !important; } /* ti-eye */
.fa.fa-eye-slash::before, .icon-fa.fa-eye-slash::before, .fa-eye-slash.icon-fa::before { content: "\ecf0" !important; font-family: "tabler-icons" !important; } /* ti-eye-off */
.fa.fa-file-code::before, .icon-fa.fa-file-code::before, .fa-file-code.icon-fa::before { content: "\10170" !important; font-family: "tabler-icons-filled" !important; } /* ti-file-code */
.fa.fa-file-code-o::before, .icon-fa.fa-file-code-o::before, .fa-file-code-o.icon-fa::before { content: "\10170" !important; font-family: "tabler-icons-filled" !important; } /* ti-file-code */
.fa.fa-file-excel::before, .icon-fa.fa-file-excel::before, .fa-file-excel.icon-fa::before { content: "\fb1b" !important; font-family: "tabler-icons" !important; } /* ti-file-type-xls */
.fa.fa-file-excel-o::before, .icon-fa.fa-file-excel-o::before, .fa-file-excel-o.icon-fa::before { content: "\fb1b" !important; font-family: "tabler-icons" !important; } /* ti-file-type-xls */
.fa.fa-file-pdf::before, .icon-fa.fa-file-pdf::before, .fa-file-pdf.icon-fa::before { content: "\fb10" !important; font-family: "tabler-icons" !important; } /* ti-file-type-pdf */
.fa.fa-file-pdf-o::before, .icon-fa.fa-file-pdf-o::before, .fa-file-pdf-o.icon-fa::before { content: "\fb10" !important; font-family: "tabler-icons" !important; } /* ti-file-type-pdf */
.fa.fa-file-text-o::before, .icon-fa.fa-file-text-o::before, .fa-file-text-o.icon-fa::before { content: "\10114" !important; font-family: "tabler-icons-filled" !important; } /* ti-file-text */
.fa.fa-file-video-o::before, .icon-fa.fa-file-video-o::before, .fa-file-video-o.icon-fa::before { content: "\1009b" !important; font-family: "tabler-icons-filled" !important; } /* ti-video */
.fa.fa-film::before, .icon-fa.fa-film::before, .fa-film.icon-fa::before { content: "\1009b" !important; font-family: "tabler-icons-filled" !important; } /* ti-video */
.fa.fa-fire::before, .icon-fa.fa-fire::before, .fa-fire.icon-fa::before { content: "\100c6" !important; font-family: "tabler-icons-filled" !important; } /* ti-flame */
.fa.fa-folder-o::before, .icon-fa.fa-folder-o::before, .fa-folder-o.icon-fa::before { content: "\f749" !important; font-family: "tabler-icons-filled" !important; } /* ti-folder */
.fa.fa-folder-open-o::before, .icon-fa.fa-folder-open-o::before, .fa-folder-open-o.icon-fa::before { content: "\101c3" !important; font-family: "tabler-icons-filled" !important; } /* ti-folder-open */
.fa.fa-font::before, .icon-fa.fa-font::before, .fa-font.icon-fa::before { content: "\1016b" !important; font-family: "tabler-icons-filled" !important; } /* ti-typography */
.fa.fa-globe::before, .icon-fa.fa-globe::before, .fa-globe.icon-fa::before { content: "\101c7" !important; font-family: "tabler-icons-filled" !important; } /* ti-world */
.fa.fa-headphones::before, .icon-fa.fa-headphones::before, .fa-headphones.icon-fa::before { content: "\fa3c" !important; font-family: "tabler-icons-filled" !important; } /* ti-headphones */
.fa.fa-heart::before, .icon-fa.fa-heart::before, .fa-heart.icon-fa::before { content: "\f67c" !important; font-family: "tabler-icons-filled" !important; } /* ti-heart */
.fa.fa-heart-o::before, .icon-fa.fa-heart-o::before, .fa-heart-o.icon-fa::before { content: "\f67c" !important; font-family: "tabler-icons-filled" !important; } /* ti-heart */
.fa.fa-history::before, .icon-fa.fa-history::before, .fa-history.icon-fa::before { content: "\ebea" !important; font-family: "tabler-icons" !important; } /* ti-history */
.fa.fa-home::before, .icon-fa.fa-home::before, .fa-home.icon-fa::before { content: "\fe2b" !important; font-family: "tabler-icons-filled" !important; } /* ti-home */
.fa.fa-hourglass-half::before, .icon-fa.fa-hourglass-half::before, .fa-hourglass-half.icon-fa::before { content: "\f756" !important; font-family: "tabler-icons-filled" !important; } /* ti-hourglass */
.fa.fa-id-card::before, .icon-fa.fa-id-card::before, .fa-id-card.icon-fa::before { content: "\101d6" !important; font-family: "tabler-icons-filled" !important; } /* ti-id */
.fa.fa-info::before, .icon-fa.fa-info::before, .fa-info.icon-fa::before { content: "\f6d8" !important; font-family: "tabler-icons-filled" !important; } /* ti-info-circle */
.fa.fa-info-circle::before, .icon-fa.fa-info-circle::before, .fa-info-circle.icon-fa::before { content: "\f6d8" !important; font-family: "tabler-icons-filled" !important; } /* ti-info-circle */
.fa.fa-key::before, .icon-fa.fa-key::before, .fa-key.icon-fa::before { content: "\fe28" !important; font-family: "tabler-icons-filled" !important; } /* ti-key */
.fa.fa-line-chart::before, .icon-fa.fa-line-chart::before, .fa-line-chart.icon-fa::before { content: "\f66c" !important; font-family: "tabler-icons-filled" !important; } /* ti-chart-line */
.fa.fa-link::before, .icon-fa.fa-link::before, .fa-link.icon-fa::before { content: "\101d5" !important; font-family: "tabler-icons-filled" !important; } /* ti-link */
.fa.fa-list::before, .icon-fa.fa-list::before, .fa-list.icon-fa::before { content: "\101d2" !important; font-family: "tabler-icons-filled" !important; } /* ti-list */
.fa.fa-list-alt::before, .icon-fa.fa-list-alt::before, .fa-list-alt.icon-fa::before { content: "\101d3" !important; font-family: "tabler-icons-filled" !important; } /* ti-logs */
.fa.fa-list-ul::before, .icon-fa.fa-list-ul::before, .fa-list-ul.icon-fa::before { content: "\101d2" !important; font-family: "tabler-icons-filled" !important; } /* ti-list */
.fa.fa-location-arrow::before, .icon-fa.fa-location-arrow::before, .fa-location-arrow.icon-fa::before { content: "\f685" !important; font-family: "tabler-icons-filled" !important; } /* ti-navigation */
.fa.fa-lock::before, .icon-fa.fa-lock::before, .fa-lock.icon-fa::before { content: "\fe15" !important; font-family: "tabler-icons-filled" !important; } /* ti-lock */
.fa.fa-long-arrow-right::before, .icon-fa.fa-long-arrow-right::before, .fa-long-arrow-right.icon-fa::before { content: "\fd18" !important; font-family: "tabler-icons-filled" !important; } /* ti-timeline-event */
.fa.fa-magic::before, .icon-fa.fa-magic::before, .fa-magic.icon-fa::before { content: "\1009d" !important; font-family: "tabler-icons-filled" !important; } /* ti-brush */
.fa.fa-map::before, .icon-fa.fa-map::before, .fa-map.icon-fa::before { content: "\101c7" !important; font-family: "tabler-icons-filled" !important; } /* ti-map */
.fa.fa-map-marker::before, .icon-fa.fa-map-marker::before, .fa-map-marker.icon-fa::before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; } /* ti-map-pin */
.fa.fa-map-o::before, .icon-fa.fa-map-o::before, .fa-map-o.icon-fa::before { content: "\101c7" !important; font-family: "tabler-icons-filled" !important; } /* ti-map */
.fa.fa-microchip::before, .icon-fa.fa-microchip::before, .fa-microchip.icon-fa::before { content: "\1004a" !important; font-family: "tabler-icons-filled" !important; } /* ti-device-desktop */
.fa.fa-minus::before, .icon-fa.fa-minus::before, .fa-minus.icon-fa::before { content: "\fb3f" !important; font-family: "tabler-icons-filled" !important; } /* ti-minus */
.fa.fa-mobile::before, .icon-fa.fa-mobile::before, .fa-mobile.icon-fa::before { content: "\fa39" !important; font-family: "tabler-icons-filled" !important; } /* ti-device-mobile */
.fa.fa-money::before, .icon-fa.fa-money::before, .fa-money.icon-fa::before { content: "\ff06" !important; font-family: "tabler-icons-filled" !important; } /* ti-receipt-2 */
.fa.fa-moon-o::before, .icon-fa.fa-moon-o::before, .fa-moon-o.icon-fa::before { content: "\f684" !important; font-family: "tabler-icons-filled" !important; } /* ti-moon */
.fa.fa-object-group::before, .icon-fa.fa-object-group::before, .fa-object-group.icon-fa::before { content: "\fe1c" !important; font-family: "tabler-icons-filled" !important; } /* ti-layout-grid */
.fa.fa-paper-plane::before, .icon-fa.fa-paper-plane::before, .fa-paper-plane.icon-fa::before { content: "\101ca" !important; font-family: "tabler-icons-filled" !important; } /* ti-send */
.fa.fa-pause::before, .icon-fa.fa-pause::before, .fa-pause.icon-fa::before { content: "\f690" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-pause */
.fa.fa-pause-circle::before, .icon-fa.fa-pause-circle::before, .fa-pause-circle.icon-fa::before { content: "\f690" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-pause */
.fa.fa-pencil::before, .icon-fa.fa-pencil::before, .fa-pencil.icon-fa::before { content: "\101cf" !important; font-family: "tabler-icons-filled" !important; } /* ti-pencil */
.fa.fa-pencil-square-o::before, .icon-fa.fa-pencil-square-o::before, .fa-pencil-square-o.icon-fa::before { content: "\101cf" !important; font-family: "tabler-icons-filled" !important; } /* ti-pencil */
.fa.fa-phone::before, .icon-fa.fa-phone::before, .fa-phone.icon-fa::before { content: "\fa49" !important; font-family: "tabler-icons-filled" !important; } /* ti-phone */
.fa.fa-play::before, .icon-fa.fa-play::before, .fa-play.icon-fa::before { content: "\f691" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-play */
.fa.fa-play-circle::before, .icon-fa.fa-play-circle::before, .fa-play-circle.icon-fa::before { content: "\f691" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-play */
.fa.fa-plug::before, .icon-fa.fa-plug::before, .fa-plug.icon-fa::before { content: "\ebd9" !important; font-family: "tabler-icons" !important; } /* ti-plug */
.fa.fa-plus::before, .icon-fa.fa-plus::before, .fa-plus.icon-fa::before { content: "\101ce" !important; font-family: "tabler-icons-filled" !important; } /* ti-plus */
.fa.fa-plus-circle::before, .icon-fa.fa-plus-circle::before, .fa-plus-circle.icon-fa::before { content: "\fef9" !important; font-family: "tabler-icons-filled" !important; } /* ti-circle-plus */
.fa.fa-plus-square::before, .icon-fa.fa-plus-square::before, .fa-plus-square.icon-fa::before { content: "\fef9" !important; font-family: "tabler-icons-filled" !important; } /* ti-square-plus */
.fa.fa-power-off::before, .icon-fa.fa-power-off::before, .fa-power-off.icon-fa::before { content: "\eb0d" !important; font-family: "tabler-icons" !important; } /* ti-power */
.fa.fa-print::before, .icon-fa.fa-print::before, .fa-print.icon-fa::before { content: "\eb0e" !important; font-family: "tabler-icons" !important; } /* ti-printer */
.fa.fa-puzzle-piece::before, .icon-fa.fa-puzzle-piece::before, .fa-puzzle-piece.icon-fa::before { content: "\f699" !important; font-family: "tabler-icons-filled" !important; } /* ti-puzzle */
.fa.fa-question::before, .icon-fa.fa-question::before, .fa-question.icon-fa::before { content: "\101d8" !important; font-family: "tabler-icons-filled" !important; } /* ti-help */
.fa.fa-question-circle::before, .icon-fa.fa-question-circle::before, .fa-question-circle.icon-fa::before { content: "\101d8" !important; font-family: "tabler-icons-filled" !important; } /* ti-help */
.fa.fa-refresh::before, .icon-fa.fa-refresh::before, .fa-refresh.icon-fa::before { content: "\eb13" !important; font-family: "tabler-icons" !important; } /* ti-refresh */
.fa.fa-remove::before, .icon-fa.fa-remove::before, .fa-remove.icon-fa::before { content: "\101c6" !important; font-family: "tabler-icons-filled" !important; } /* ti-x */
.fa.fa-reorder::before, .icon-fa.fa-reorder::before, .fa-reorder.icon-fa::before { content: "\101d1" !important; font-family: "tabler-icons-filled" !important; } /* ti-menu-2 */
.fa.fa-road::before, .icon-fa.fa-road::before, .fa-road.icon-fa::before { content: "\1003f" !important; font-family: "tabler-icons-filled" !important; } /* ti-route */
.fa.fa-save::before, .icon-fa.fa-save::before, .fa-save.icon-fa::before { content: "\101e0" !important; font-family: "tabler-icons-filled" !important; } /* ti-device-floppy */
.fa.fa-search::before, .icon-fa.fa-search::before, .fa-search.icon-fa::before { content: "\101cb" !important; font-family: "tabler-icons-filled" !important; } /* ti-search */
.fa.fa-search-minus::before, .icon-fa.fa-search-minus::before, .fa-search-minus.icon-fa::before { content: "\f78a" !important; font-family: "tabler-icons-filled" !important; } /* ti-zoom-out */
.fa.fa-search-plus::before, .icon-fa.fa-search-plus::before, .fa-search-plus.icon-fa::before { content: "\f789" !important; font-family: "tabler-icons-filled" !important; } /* ti-zoom-in */
.fa.fa-send-o::before, .icon-fa.fa-send-o::before, .fa-send-o.icon-fa::before { content: "\101ca" !important; font-family: "tabler-icons-filled" !important; } /* ti-send */
.fa.fa-server::before, .icon-fa.fa-server::before, .fa-server.icon-fa::before { content: "\eb1f" !important; font-family: "tabler-icons" !important; } /* ti-server */
.fa.fa-share::before, .icon-fa.fa-share::before, .fa-share.icon-fa::before { content: "\eb21" !important; font-family: "tabler-icons" !important; } /* ti-share */
.fa.fa-share-alt::before, .icon-fa.fa-share-alt::before, .fa-share-alt.icon-fa::before { content: "\f799" !important; font-family: "tabler-icons" !important; } /* ti-share-2 */
.fa.fa-shield::before, .icon-fa.fa-shield::before, .fa-shield.icon-fa::before { content: "\f69f" !important; font-family: "tabler-icons-filled" !important; } /* ti-shield */
.fa.fa-sign-out::before, .icon-fa.fa-sign-out::before, .fa-sign-out.icon-fa::before { content: "\eba8" !important; font-family: "tabler-icons" !important; } /* ti-logout */
.fa.fa-signal::before, .icon-fa.fa-signal::before, .fa-signal.icon-fa::before { content: "\eccb" !important; font-family: "tabler-icons" !important; } /* ti-antenna-bars-5 */
.fa.fa-sliders::before, .icon-fa.fa-sliders::before, .fa-sliders.icon-fa::before { content: "\101e7" !important; font-family: "tabler-icons-filled" !important; } /* ti-adjustments-horizontal */
.fa.fa-sort::before, .icon-fa.fa-sort::before, .fa-sort.icon-fa::before { content: "\eb5a" !important; font-family: "tabler-icons" !important; } /* ti-arrows-sort */
.fa.fa-spinner::before, .icon-fa.fa-spinner::before, .fa-spinner.icon-fa::before { content: "\eca3" !important; font-family: "tabler-icons" !important; } /* ti-loader */
.fa.fa-square-o::before, .icon-fa.fa-square-o::before, .fa-square-o.icon-fa::before { content: "\fc40" !important; font-family: "tabler-icons-filled" !important; } /* ti-square */
.fa.fa-step-backward::before, .icon-fa.fa-step-backward::before, .fa-step-backward.icon-fa::before { content: "\f693" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-skip-back */
.fa.fa-step-forward::before, .icon-fa.fa-step-forward::before, .fa-step-forward.icon-fa::before { content: "\f694" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-skip-forward */
.fa.fa-stop::before, .icon-fa.fa-stop::before, .fa-stop.icon-fa::before { content: "\f695" !important; font-family: "tabler-icons-filled" !important; } /* ti-player-stop */
.fa.fa-sun-o::before, .icon-fa.fa-sun-o::before, .fa-sun-o.icon-fa::before { content: "\f6a9" !important; font-family: "tabler-icons-filled" !important; } /* ti-sun */
.fa.fa-table::before, .icon-fa.fa-table::before, .fa-table.icon-fa::before { content: "\f782" !important; font-family: "tabler-icons-filled" !important; } /* ti-table */
.fa.fa-tachometer::before, .icon-fa.fa-tachometer::before, .fa-tachometer.icon-fa::before { content: "\fc2c" !important; font-family: "tabler-icons-filled" !important; } /* ti-gauge */
.fa.fa-tag::before, .icon-fa.fa-tag::before, .fa-tag.icon-fa::before { content: "\ff02" !important; font-family: "tabler-icons-filled" !important; } /* ti-tag */
.fa.fa-tasks::before, .icon-fa.fa-tasks::before, .fa-tasks.icon-fa::before { content: "\101d4" !important; font-family: "tabler-icons-filled" !important; } /* ti-checklist */
.fa.fa-terminal::before, .icon-fa.fa-terminal::before, .fa-terminal.icon-fa::before { content: "\fed3" !important; font-family: "tabler-icons-filled" !important; } /* ti-terminal-2 */
.fa.fa-th::before, .icon-fa.fa-th::before, .fa-th.icon-fa::before { content: "\fe1c" !important; font-family: "tabler-icons-filled" !important; } /* ti-layout-grid */
.fa.fa-th-large::before, .icon-fa.fa-th-large::before, .fa-th-large.icon-fa::before { content: "\fe1c" !important; font-family: "tabler-icons-filled" !important; } /* ti-layout-grid */
.fa.fa-th-list::before, .icon-fa.fa-th-list::before, .fa-th-list.icon-fa::before { content: "\101d2" !important; font-family: "tabler-icons-filled" !important; } /* ti-list */
.fa.fa-thermometer-half::before, .icon-fa.fa-thermometer-half::before, .fa-thermometer-half.icon-fa::before { content: "\10102" !important; font-family: "tabler-icons-filled" !important; } /* ti-temperature-plus */
.fa.fa-times::before, .icon-fa.fa-times::before, .fa-times.icon-fa::before { content: "\101c6" !important; font-family: "tabler-icons-filled" !important; } /* ti-x */
.fa.fa-tint::before, .icon-fa.fa-tint::before, .fa-tint.icon-fa::before { content: "\ee80" !important; font-family: "tabler-icons-filled" !important; } /* ti-droplet */
.fa.fa-toggle-on::before, .icon-fa.fa-toggle-on::before, .fa-toggle-on.icon-fa::before { content: "\febf" !important; font-family: "tabler-icons-filled" !important; } /* ti-toggle-right */
.fa.fa-trash::before, .icon-fa.fa-trash::before, .fa-trash.icon-fa::before { content: "\f783" !important; font-family: "tabler-icons-filled" !important; } /* ti-trash */
.fa.fa-trash-o::before, .icon-fa.fa-trash-o::before, .fa-trash-o.icon-fa::before { content: "\f783" !important; font-family: "tabler-icons-filled" !important; } /* ti-trash */
.fa.fa-truck::before, .icon-fa.fa-truck::before, .fa-truck.icon-fa::before { content: "\100f3" !important; font-family: "tabler-icons-filled" !important; } /* ti-truck */
.fa.fa-unlock-alt::before, .icon-fa.fa-unlock-alt::before, .fa-unlock-alt.icon-fa::before { content: "\fe15" !important; font-family: "tabler-icons-filled" !important; } /* ti-lock-open */
.fa.fa-upload::before, .icon-fa.fa-upload::before, .fa-upload.icon-fa::before { content: "\eb47" !important; font-family: "tabler-icons" !important; } /* ti-upload */
.fa.fa-user::before, .icon-fa.fa-user::before, .fa-user.icon-fa::before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; } /* ti-user */
.fa.fa-user-plus::before, .icon-fa.fa-user-plus::before, .fa-user-plus.icon-fa::before { content: "\eb4b" !important; font-family: "tabler-icons" !important; } /* ti-user-plus */
.fa.fa-users::before, .icon-fa.fa-users::before, .fa-users.icon-fa::before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; } /* ti-users */
.fa.fa-video-camera::before, .icon-fa.fa-video-camera::before, .fa-video-camera.icon-fa::before { content: "\1009b" !important; font-family: "tabler-icons-filled" !important; } /* ti-video */
.fa.fa-volume-off::before, .icon-fa.fa-volume-off::before, .fa-volume-off.icon-fa::before { content: "\f1c3" !important; font-family: "tabler-icons" !important; } /* ti-volume-off */
.fa.fa-volume-up::before, .icon-fa.fa-volume-up::before, .fa-volume-up.icon-fa::before { content: "\eb51" !important; font-family: "tabler-icons" !important; } /* ti-volume */
.fa.fa-wifi::before, .icon-fa.fa-wifi::before, .fa-wifi.icon-fa::before { content: "\eb52" !important; font-family: "tabler-icons" !important; } /* ti-wifi */
.fa.fa-wrench::before, .icon-fa.fa-wrench::before, .fa-wrench.icon-fa::before { content: "\f69e" !important; font-family: "tabler-icons-filled" !important; } /* ti-tool */

/* Direct .ti.* classes (full Tabler CSS not loaded) */
.ti.ti-adjustments:before, .ti-adjustments:before { content: "\f6ec" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-building:before, .ti-building:before { content: "\fe2b" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-camera:before, .ti-camera:before { content: "\fa37" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-car:before, .ti-car:before { content: "\1004c" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-chevron-down:before, .ti-chevron-down:before { content: "\101e5" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-circle:before, .ti-circle:before { content: "\f671" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-device-mobile:before, .ti-device-mobile:before { content: "\fa39" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-device-mobile-search:before, .ti-device-mobile-search:before { content: "\fa39" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-dots-vertical:before, .ti-dots-vertical:before { content: "\101de" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-edit:before, .ti-edit:before { content: "\101db" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-file-analytics:before, .ti-file-analytics:before { content: "\10171" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-file-import:before, .ti-file-import:before { content: "\edea" !important; font-family: "tabler-icons" !important; }
.ti.ti-file-spreadsheet:before, .ti-file-spreadsheet:before { content: "\f03e" !important; font-family: "tabler-icons" !important; }
.ti.ti-info-circle:before, .ti-info-circle:before { content: "\f6d8" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-link:before, .ti-link:before { content: "\101d5" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-login:before, .ti-login:before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-map-pin:before, .ti-map-pin:before { content: "\f680" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-phone:before, .ti-phone:before { content: "\fa49" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-plus:before, .ti-plus:before { content: "\101ce" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-polygon:before, .ti-polygon:before { content: "\f67d" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-search:before, .ti-search:before { content: "\101cb" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-trash:before, .ti-trash:before { content: "\f783" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-user:before, .ti-user:before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-user-off:before, .ti-user-off:before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-user-plus:before, .ti-user-plus:before { content: "\eb4b" !important; font-family: "tabler-icons" !important; }
.ti.ti-user-shield:before, .ti-user-shield:before { content: "\f69f" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-users:before, .ti-users:before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; }
.ti.ti-users-group:before, .ti-users-group:before { content: "\fd19" !important; font-family: "tabler-icons-filled" !important; }

/* Tabler .ti shell (full Tabler CSS not loaded) */
.ti {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: normal !important;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: never;
}

i.icon:not([class*=" "]):not(.add):not(.edit):not(.setup):not(.map):not(.account):not(.download):not(.time):not(.admin):not(.reports):not(.dashboard)::before {
  content: "\f69e" !important;
  font-family: "tabler-icons-filled" !important;
  font-weight: normal !important;
}

/* Icon sizing */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon::before, i.icon::before { display: inline-block; vertical-align: middle; }
#header.header-app .navbar-nav > li > a > .icon::before { font-size: 18px; }
#map-controls .btn .icon::before { font-size: 17px; }
#map-controls .btn.active .icon::before { color: inherit; }
.panel-title > .icon::before, .panel-heading .icon::before { font-size: 17px; margin-inline-end: 6px; }
.btn .icon::before, .btn-xs .icon::before { font-size: 14px; }
.expenses-add-hero__icon .icon::before, .logistics-empty__icon .icon::before, .expenses-empty__icon .icon::before { font-size: 28px; }

/* ===== ats-ui/maintenance.css ===== */
/* ==========================================================================
   Maintenance dashboard (in-page panel)
   ========================================================================== */

.maintenance-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f4f6f9);
  overflow: hidden;
}

.maintenance-page.is-open {
  display: block;
}

.maintenance-page__content {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.maintenance-page__content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.maintenance-schedule-open .maintenance-page__content {
  overflow: hidden !important;
}

body.maintenance-open {
  overscroll-behavior: none;
}

body.maintenance-open #map,
body.maintenance-open #map-controls,
body.maintenance-open #fleet-donut,
body.maintenance-open #map-driver-license,
body.maintenance-open #locate-card, body.maintenance-open #locate-panel,
body.maintenance-open #history-results-card, body.maintenance-open #history-results-panel,
body.maintenance-open #device-card, body.maintenance-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

.maintenance-standalone {
  min-height: calc(100vh - 56px);
  background: var(--background, #f4f6f9);
}

.maintenance-dashboard {
  padding: 20px 24px 28px;
}

.maintenance-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.maintenance-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.maintenance-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.maintenance-stat-card__icon--late {
  background: color-mix(in srgb, var(--destructive) 12%, white);
  color: var(--destructive);
}

.maintenance-stat-card__icon--progress {
  background: color-mix(in srgb, #f59e0b 14%, white);
  color: #d97706;
}

.maintenance-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.maintenance-stat-card__label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.maintenance-stat-card__hint {
  font-size: 11px;
  color: var(--secondary-foreground);
  margin-top: 4px;
}

.maintenance-stat-card__hint--danger {
  color: var(--destructive);
}

.maintenance-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: #fff;
}

.maintenance-hero__content h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.maintenance-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 13px;
}

.maintenance-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.maintenance-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  white-space: nowrap;
}

.maintenance-hero__btn small {
  opacity: 0.8;
  font-weight: 500;
}

.maintenance-hero .maintenance-hero__btn.btn-light,
.maintenance-hero #maintenance-schedule-btn {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.maintenance-hero .maintenance-hero__btn.btn-outline-light,
.maintenance-hero #maintenance-export-btn,
.maintenance-hero #maintenance-refresh-btn,
.maintenance-hero #maintenance-close-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.maintenance-hero .maintenance-hero__btn.btn-outline-light:hover,
.maintenance-hero #maintenance-export-btn:hover,
.maintenance-hero #maintenance-refresh-btn:hover,
.maintenance-hero #maintenance-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.maintenance-hero .maintenance-hero__btn.btn-light:hover,
.maintenance-hero #maintenance-schedule-btn:hover {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.maintenance-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: visible;
  position: relative;
}

.maintenance-table-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  background: var(--card);
}

.maintenance-table-panel__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.maintenance-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.maintenance-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background, #f8fafc);
  color: var(--secondary-foreground);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.maintenance-filter.is-active {
  background: color-mix(in srgb, var(--primary) 10%, white);
  border-color: color-mix(in srgb, var(--primary) 35%, white);
  color: var(--primary);
}

.maintenance-filter__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15, 25, 35, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.maintenance-filter--late.is-active .maintenance-filter__count { background: color-mix(in srgb, var(--destructive) 15%, white); color: var(--destructive); }
.maintenance-filter--progress.is-active .maintenance-filter__count { background: color-mix(in srgb, #f59e0b 18%, white); color: #d97706; }
.maintenance-filter--upcoming.is-active .maintenance-filter__count { background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); }

.maintenance-table-panel__body {
  padding: 0;
  overflow: visible;
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

.maintenance-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
}

.maintenance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.maintenance-table thead th {
  padding: 12px 16px;
  text-align: start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--secondary-foreground);
  background: var(--background, #f8fafc);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.maintenance-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.maintenance-table tbody tr:last-child td {
  border-bottom: none;
}

.maintenance-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, white);
}

.maintenance-table__vehicle strong {
  display: block;
  font-weight: 600;
}

.maintenance-table__vehicle small {
  display: block;
  color: var(--secondary-foreground);
  font-size: 11px;
  margin-top: 2px;
}

.maintenance-status,
.maintenance-priority {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.maintenance-status--late {
  background: color-mix(in srgb, var(--destructive) 12%, white);
  color: var(--destructive);
}

.maintenance-status--progress {
  background: color-mix(in srgb, #f59e0b 14%, white);
  color: #d97706;
}

.maintenance-status--upcoming {
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.maintenance-priority--high { color: var(--destructive); font-weight: 700; background: transparent; padding: 0; }
.maintenance-priority--medium { color: #d97706; font-weight: 700; background: transparent; padding: 0; }
.maintenance-priority--low { color: var(--primary); font-weight: 700; background: transparent; padding: 0; }

.maintenance-table__actions {
  width: 1%;
  white-space: nowrap;
  padding-inline-start: 8px !important;
}

.maintenance-actions-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--background, #f8fafc);
  border: 1px solid var(--border);
}

.maintenance-actions-bar__extra {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(8px);
  transition: max-width 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

[dir="rtl"] .maintenance-actions-bar__extra {
  transform: translateX(-8px);
}

.maintenance-actions-bar.is-expanded .maintenance-actions-bar__extra {
  max-width: 170px;
  opacity: 1;
  transform: translateX(0);
}

.maintenance-actions-bar.is-expanded .maintenance-action--toggle {
  color: var(--destructive);
  border-color: color-mix(in srgb, var(--destructive) 25%, white);
  background: color-mix(in srgb, var(--destructive) 6%, white);
}

.maintenance-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--secondary-foreground);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.maintenance-action:hover {
  transform: translateY(-1px);
}

.maintenance-action--view {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, white);
}

.maintenance-action--edit {
  color: #d97706;
  border-color: color-mix(in srgb, #d97706 25%, white);
}

.maintenance-action--complete {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, white);
  background: color-mix(in srgb, var(--primary) 6%, white);
}

.maintenance-action--complete:hover {
  background: color-mix(in srgb, var(--primary) 14%, white);
}

.maintenance-action--history {
  color: #6366f1;
  border-color: color-mix(in srgb, #6366f1 25%, white);
}

.maintenance-action--delete {
  color: var(--destructive);
  border-color: color-mix(in srgb, var(--destructive) 25%, white);
}

.maintenance-action--toggle {
  color: var(--secondary-foreground);
}

.maintenance-table__empty {
  text-align: center;
  padding: 40px 16px !important;
  color: var(--secondary-foreground);
}

/* ---------- Maintenance schedule wizard (slide-over) ---------- */

.maintenance-schedule-panel {
  display: none;
  pointer-events: none;
}

.maintenance-schedule-panel.is-open {
  display: block;
  position: fixed;
  top: 56px;
  left: 0;
  right: calc(var(--rail-width, 210px) + var(--sidebar-w, 300px));
  bottom: 0;
  z-index: 1045;
  pointer-events: auto;
}

body:has(#sidebar.collapsed) .maintenance-schedule-panel.is-open {
  right: var(--rail-width, 210px);
}

/* Markup uses .maintenance-schedule-card (expenses, logistics, drivers, maintenance wizards) */
.maintenance-schedule-card {
  display: none;
  pointer-events: none;
}

.maintenance-schedule-card.is-open {
  display: block;
  position: fixed;
  top: 56px;
  left: 0;
  right: calc(var(--rail-width, 210px) + var(--sidebar-w, 300px));
  bottom: 0;
  z-index: 1045;
  pointer-events: auto;
}

body:has(#sidebar.collapsed) .maintenance-schedule-card.is-open {
  right: var(--rail-width, 210px);
}

.maintenance-schedule-card:not(.is-open),
.maintenance-schedule-card[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.maintenance-schedule-card.is-open .maintenance-schedule-panel__sheet {
  transform: translateX(0);
}

.maintenance-schedule-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 35, 0.45);
}

.maintenance-schedule-panel__sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(440px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--card);
  box-shadow: 8px 0 40px rgba(15, 25, 35, 0.18);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.maintenance-schedule-panel.is-open .maintenance-schedule-panel__sheet {
  transform: translateX(0);
}

.maintenance-schedule-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  min-height: 56px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, white), var(--card));
}

.maintenance-schedule-panel__header > div {
  min-width: 0;
  flex: 1;
}

.maintenance-schedule-panel__header h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.maintenance-schedule-panel__header p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--secondary-foreground);
}

.maintenance-schedule-panel__close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--secondary-foreground);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.maintenance-schedule-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--background, #f8fafc);
}

.maintenance-schedule-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.maintenance-schedule-step-indicator__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--border);
  color: var(--secondary-foreground);
}

.maintenance-schedule-step-indicator.is-active .maintenance-schedule-step-indicator__num,
.maintenance-schedule-step-indicator.is-done .maintenance-schedule-step-indicator__num {
  background: var(--primary);
  color: var(--primary-foreground);
}

.maintenance-schedule-step-indicator__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--secondary-foreground);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.maintenance-schedule-step-indicator.is-active .maintenance-schedule-step-indicator__label {
  color: var(--primary);
}

.maintenance-schedule-step-indicator__line {
  width: 24px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  margin-bottom: 18px;
}

.maintenance-schedule-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.maintenance-schedule-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}

.maintenance-schedule-step {
  display: none;
}

.maintenance-schedule-step.is-active {
  display: block;
}

.maintenance-schedule-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.maintenance-schedule-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--secondary-foreground);
}

.maintenance-schedule-select {
  margin-bottom: 16px;
}

.maintenance-schedule-device-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--primary) 5%, white);
  margin-top: 12px;
}

.maintenance-schedule-device-preview__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.maintenance-schedule-device-preview__info {
  flex: 1;
  min-width: 0;
}

.maintenance-schedule-device-preview__info strong {
  display: block;
  font-size: 14px;
}

.maintenance-schedule-device-preview__info span {
  font-size: 12px;
  color: var(--secondary-foreground);
}

.maintenance-schedule-device-preview__readings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: end;
}

.maintenance-schedule-reading small {
  display: block;
  font-size: 10px;
  color: var(--secondary-foreground);
}

.maintenance-schedule-reading b {
  font-size: 13px;
}

.maintenance-schedule-type-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.maintenance-schedule-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--card);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.maintenance-schedule-type-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, white);
}

.maintenance-schedule-type-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
  background: color-mix(in srgb, var(--primary) 4%, white);
}

.maintenance-schedule-type-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 4px;
}

.maintenance-schedule-type-card strong {
  font-size: 14px;
}

.maintenance-schedule-type-card small {
  font-size: 12px;
  color: var(--secondary-foreground);
}

.maintenance-schedule-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.maintenance-schedule-summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, white);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}

.maintenance-schedule-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.maintenance-schedule-preset {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background, #f8fafc);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.maintenance-schedule-preset.is-active,
.maintenance-schedule-preset:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, white);
}

.maintenance-schedule-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.maintenance-schedule-field {
  margin-bottom: 14px;
}

.maintenance-schedule-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--secondary-foreground);
}

.maintenance-schedule-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
  cursor: pointer;
}

.maintenance-schedule-due-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--primary) 8%, white);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}

.maintenance-schedule-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.maintenance-schedule-panel__footer .btn-action {
  margin-inline-start: auto;
}

#rail-maintenance-item > a {
  position: relative;
}

.maintenance-edit-panel__summary {
  display: flex !important;
  margin-bottom: 16px;
}

.maintenance-edit-panel__type {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.maintenance-edit-panel .maintenance-schedule-panel__footer {
  justify-content: space-between;
}

.maintenance-edit-panel .maintenance-schedule-panel__footer .btn-action {
  margin-inline-start: auto;
}

/* ---------- Maintenance complete panel ---------- */

.maintenance-complete-panel__header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white), var(--card));
}

.maintenance-complete-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, white), color-mix(in srgb, var(--primary) 4%, white));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, white);
}

.maintenance-complete-hero__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

.maintenance-complete-hero__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.maintenance-complete-hero__text strong {
  font-size: 15px;
  line-height: 1.3;
}

.maintenance-complete-panel__vehicle {
  margin-bottom: 14px;
}

.maintenance-complete-panel__history-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: color-mix(in srgb, #6366f1 8%, white);
  border: 1px solid color-mix(in srgb, #6366f1 18%, white);
  color: #4338ca;
  font-size: 12px;
}

.maintenance-complete-panel__field {
  margin-bottom: 14px;
}

.maintenance-complete-notes {
  resize: vertical;
  min-height: 72px;
}

.maintenance-complete-panel__reset-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, white);
  color: var(--primary);
  font-size: 13px;
  line-height: 1.5;
}

.maintenance-complete-panel__reset-notice i {
  margin-top: 2px;
  flex-shrink: 0;
}

.maintenance-complete-next-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, white);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

.maintenance-complete-panel__footer .maintenance-complete-submit {
  background: var(--primary);
  border-color: var(--primary);
}

.maintenance-complete-panel__footer .maintenance-complete-submit:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* ---------- Maintenance history panel ---------- */

.maintenance-history-panel__sheet {
  width: min(480px, 100%);
}

.maintenance-history-panel__header {
  background: linear-gradient(135deg, color-mix(in srgb, #6366f1 10%, white), var(--card));
}

.maintenance-history-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 20px;
}

.maintenance-history-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--secondary-foreground);
}

.maintenance-history-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #6366f1 10%, white);
  color: #6366f1;
  font-size: 26px;
}

.maintenance-history-empty strong {
  display: block;
  font-size: 16px;
  color: var(--foreground);
  margin-bottom: 6px;
}

.maintenance-history-empty p {
  font-size: 13px;
  margin: 0;
}

.maintenance-history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.maintenance-history-summary__stat {
  padding: 12px;
  border-radius: 12px;
  background: var(--background, #f8fafc);
  border: 1px solid var(--border);
  text-align: center;
}

.maintenance-history-summary__stat small {
  display: block;
  font-size: 10px;
  color: var(--secondary-foreground);
  margin-bottom: 4px;
}

.maintenance-history-summary__stat strong {
  font-size: 15px;
  color: var(--foreground);
}

.maintenance-history-timeline {
  position: relative;
  padding-inline-start: 8px;
}

.maintenance-history-item {
  display: flex;
  gap: 14px;
  margin-bottom: 0;
  position: relative;
  padding-bottom: 20px;
}

.maintenance-history-item:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 28px;
  inset-inline-start: 13px;
  width: 2px;
  bottom: 0;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 20%, var(--border)));
}

.maintenance-history-item__marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, white);
}

.maintenance-history-item__card {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(15, 25, 35, 0.04);
}

.maintenance-history-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.maintenance-history-item__head strong {
  font-size: 14px;
  line-height: 1.3;
}

.maintenance-history-item__head time {
  font-size: 11px;
  color: var(--secondary-foreground);
  white-space: nowrap;
}

.maintenance-history-item__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.maintenance-history-item__meta li {
  font-size: 12px;
  color: var(--secondary-foreground);
}

.maintenance-history-item__meta li i {
  margin-inline-end: 4px;
  opacity: 0.7;
}

.maintenance-history-item__notes {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--background, #f8fafc);
  font-size: 12px;
  line-height: 1.5;
  color: var(--foreground);
}

.maintenance-history-item__user {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--secondary-foreground);
}

#maintenance_service_stats .contents {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 12px 16px;
  box-sizing: border-box;
}

#maintenance_service_stats .modal-dialog.maintenance-stats-modal {
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  margin: 0;
  flex: 0 1 auto;
}

#maintenance_service_stats .modal-content {
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary));
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  box-shadow:
    0 16px 40px rgba(15, 25, 35, 0.16),
    0 4px 12px rgba(15, 25, 35, 0.06);
  background: var(--card);
}

#maintenance_service_stats .modal-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, white), var(--card));
}

#maintenance_service_stats .modal-header .modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

#maintenance_service_stats .modal-header .modal-title .fa {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
}

#maintenance_service_stats .modal-header .close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

#maintenance_service_stats .modal-body {
  padding: 12px 14px 14px;
  overflow: visible;
  background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--background, #f8fafc) 55%, white) 100%);
}

#maintenance_service_stats .modal-footer {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

#maintenance_service_stats .modal-footer .buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

#maintenance_service_stats .modal-footer .btn {
  border-radius: 8px;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

#maintenance_service_stats .modal-footer .btn .fa {
  font-size: 11px;
}

.maintenance-service-stats {
  display: block;
  width: 100%;
  padding: 0;
}

.maintenance-service-stats__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.maintenance-service-stats__vehicle {
  display: block;
  font-size: 13px;
}

.maintenance-service-stats__plate {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--secondary-foreground);
}

.maintenance-service-stats__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.maintenance-service-stats__chart-panel {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--background, #f8fafc) 85%, white) 100%);
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.05);
}

.maintenance-service-stats__donut {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
}

.maintenance-service-stats__ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
  mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
  transition: background 0.35s ease;
}

.maintenance-service-stats__donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.maintenance-service-stats__donut-center strong {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--foreground);
}

.maintenance-service-stats__donut-center small {
  margin-top: 2px;
  max-width: 56px;
  font-size: 9px;
  line-height: 1.2;
  color: var(--secondary-foreground);
}

.maintenance-service-stats__chart-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.maintenance-service-stats__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.maintenance-service-stats__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--secondary-foreground);
}

.maintenance-service-stats__legend li strong {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--foreground);
}

.maintenance-service-stats__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.maintenance-service-stats__dot--remaining {
  background: #e2e8f0;
}

.maintenance-service-stats__bar-chart {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}

.maintenance-service-stats__bar-segment {
  height: 100%;
  min-width: 0;
  transition: width 0.35s ease;
}

.maintenance-service-stats__bar-segment.maintenance-progress__bar--success {
  background: linear-gradient(90deg, var(--primary), var(--primary));
}

.maintenance-service-stats__bar-segment.maintenance-progress__bar--warning {
  background: linear-gradient(90deg, #fbbf24, #d97706);
}

.maintenance-service-stats__bar-segment.maintenance-progress__bar--danger {
  background: linear-gradient(90deg, #f87171, #dc2626);
}

.maintenance-service-stats__bar-segment--remaining {
  background: transparent;
}

.maintenance-service-stats__left-box {
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}

.maintenance-service-stats__left-box small {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  color: var(--secondary-foreground);
}

.maintenance-service-stats__left-box strong {
  display: block;
  font-size: 13px;
  word-break: break-word;
}

.maintenance-service-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.maintenance-service-stats__item {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.maintenance-service-stats__item small {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  color: var(--secondary-foreground);
}

.maintenance-service-stats__item strong {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  word-break: break-word;
}

.maintenance-service-stats__sub {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  color: var(--secondary-foreground);
}

#maintenance_service_stats .modal-header .modal-title .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
  flex-shrink: 0;
}

#maintenance_service_stats .modal-header .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--card);
  opacity: 0.75;
  transition: background 0.15s ease, opacity 0.15s ease;
}

#maintenance_service_stats .modal-header .close:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--destructive) 8%, white);
}

.maintenance-service-stats__item--wide {
  grid-column: 1 / -1;
}

[dir="rtl"] #maintenance_service_stats .modal-footer .buttons {
  justify-content: flex-start;
}

@media (max-width: 768px) {
  #maintenance_service_stats .contents {
    min-height: auto;
    padding: 16px 12px;
  }

  #maintenance_service_stats .modal-dialog.maintenance-stats-modal {
    width: calc(100vw - 24px);
  }

  #maintenance_service_stats .modal-content {
    border-radius: 16px;
  }

  .maintenance-service-stats__chart-panel {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .maintenance-service-stats__chart-body {
    width: 100%;
  }

  .maintenance-service-stats__legend li strong {
    margin-inline-start: 8px;
  }

  .maintenance-service-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .maintenance-schedule-panel.is-open,
  .maintenance-schedule-card.is-open {
    left: 0;
    right: 0;
  }
}

@media (max-width: 768px) {
  .maintenance-schedule-panel__sheet {
    width: 100%;
  }

  .maintenance-schedule-fields-row {
    grid-template-columns: 1fr;
  }

  .maintenance-schedule-device-preview {
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px) {
  .maintenance-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .maintenance-dashboard {
    padding: 14px;
  }

  .maintenance-stats {
    grid-template-columns: 1fr;
  }

  .maintenance-hero,
  .maintenance-table-panel__head {
    flex-direction: column;
    align-items: stretch;
  }

  .maintenance-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Map vehicle clusters — brand pulse (matches --primary / logo) */
.cluster.leaflet-marker-icon {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.cluster .cluster-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(26, 110, 216, 0.16) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(26, 110, 216, 0.22) !important;
  animation: ats-cluster-pulse 2.8s ease-out infinite;
}

.cluster .cluster-inner::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: rgba(26, 110, 216, 0.78) !important;
  z-index: 0;
}

.cluster .cluster-inner::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(26, 110, 216, 0.42);
  animation: ats-cluster-ring 2.8s ease-out infinite;
  pointer-events: none;
}

.cluster .cluster-count,
.cluster .cluster-inner {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.cluster .cluster-count {
  position: relative;
  z-index: 1;
  padding: 0 3px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
}

.cluster.cluster-small .cluster-inner::before {
  inset: 2px;
}

.cluster.cluster-small .cluster-count {
  font-size: 12px;
}

.cluster.cluster-medium .cluster-count {
  font-size: 13px;
}

.cluster.cluster-large .cluster-inner::before {
  background: rgba(26, 110, 216, 0.84) !important;
}

.cluster.cluster-large .cluster-count {
  font-size: 14px;
}

.cluster.cluster-xlarge .cluster-inner {
  background: rgba(26, 110, 216, 0.2) !important;
  box-shadow: 0 3px 14px rgba(26, 110, 216, 0.28) !important;
}

.cluster.cluster-xlarge .cluster-inner::before {
  inset: 3px;
  background: rgba(26, 110, 216, 0.82) !important;
}

.cluster.cluster-xlarge .cluster-count {
  font-size: 15px;
}

.cluster .cluster-count.is-long {
  font-size: 12px;
}

.cluster .cluster-count.is-longer {
  font-size: 10px;
  letter-spacing: -0.04em;
}

.cluster.cluster-xlarge .cluster-count.is-long {
  font-size: 13px;
}

.cluster.cluster-xlarge .cluster-count.is-longer {
  font-size: 11px;
}

.cluster .cluster-count.is-huge {
  font-size: 9px;
  letter-spacing: -0.06em;
}

.cluster.cluster-xlarge .cluster-count.is-huge {
  font-size: 10px;
}

@keyframes ats-cluster-pulse {
  0%,
  100% {
    box-shadow: 0 2px 10px rgba(26, 110, 216, 0.22), 0 0 0 0 rgba(26, 110, 216, 0.32);
  }

  50% {
    box-shadow: 0 2px 10px rgba(26, 110, 216, 0.16), 0 0 0 9px rgba(26, 110, 216, 0);
  }
}

@keyframes ats-cluster-ring {
  0% {
    transform: scale(0.96);
    opacity: 0.5;
  }

  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cluster .cluster-inner,
  .cluster .cluster-inner::after {
    animation: none;
  }
}

/* Full-page + inline loaders — brand identity (#1a6ed8) */
#loading.ats-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(165deg, #f8fafc 0%, #eef4fc 48%, #f1f5f9 100%);
}

.ats-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ats-loading-spinner {
  position: relative;
  width: 200px;
  height: 200px;
}

.ats-loading-logo {
  position: absolute;
  inset: 32px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.ats-loading-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(26, 110, 216, 0.18));
}

.ats-loading-core {
  position: absolute;
  inset: 64px;
  border-radius: 50%;
  background: rgba(26, 110, 216, 0.82);
  box-shadow: 0 2px 12px rgba(26, 110, 216, 0.32);
  animation: ats-cluster-pulse 2.8s ease-out infinite;
}

.ats-loading-ring {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(26, 110, 216, 0.14);
  border-top-color: #1a6ed8;
  border-right-color: rgba(26, 110, 216, 0.42);
  animation: ats-loading-spin 0.95s linear infinite;
}

.ats-loading-ring--delayed {
  inset: 10px;
  border-top-color: rgba(26, 110, 216, 0.55);
  animation-duration: 1.35s;
  animation-direction: reverse;
}

.ats-loading-ring--pulse {
  inset: -3px;
  border: 2px solid rgba(26, 110, 216, 0.38);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: ats-cluster-ring 2.8s ease-out infinite;
}

.ats-loading-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #475569;
}

@keyframes ats-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.loading .loader,
.loader {
  display: block;
  position: relative;
  margin: auto;
  height: 22px;
  width: 22px;
  box-sizing: border-box;
}

.loading .loader::before,
.loader::before {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(26, 110, 216, 0.14);
  border-top-color: #1a6ed8;
  border-right-color: rgba(26, 110, 216, 0.42);
  box-shadow: 0 1px 6px rgba(26, 110, 216, 0.14);
  animation: ats-loading-spin 0.85s linear infinite;
}

.loading .loader::after,
.loader::after {
  display: none;
}

.loader.large {
  height: 30px;
  width: 30px;
}

.loader.large::before {
  border-width: 2.5px;
  box-shadow: 0 2px 10px rgba(26, 110, 216, 0.18);
}

.loader.small {
  height: 16px;
  width: 16px;
}

.loader.small::before {
  border-width: 1.5px;
}

.loading .backdrop {
  background-color: rgba(248, 250, 252, 0.72);
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .ats-loading-core,
  .ats-loading-ring,
  .loader::before {
    animation: none;
  }
}


/* ===== ats-ui/expenses.css ===== */
/* ==========================================================================
   Expenses dashboard (in-page panel)
   ========================================================================== */

.expenses-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f4f6f9);
  overflow: hidden;
}

.expenses-page.is-open {
  display: block;
}

.expenses-page__content {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

.expenses-page__content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome/Safari */
}

body.expenses-panel-open:has(#expenses-add-panel.is-open) .expenses-page__content,
body.expenses-panel-open:has(#expenses-edit-panel.is-open) .expenses-page__content,
body.expenses-card-open:has(#expenses-add-card.is-open) .expenses-page__content,
body.expenses-card-open:has(#expenses-edit-card.is-open) .expenses-page__content {
  overflow: hidden !important;
}

body.expenses-open {
  overscroll-behavior: none;
}

body.expenses-open #map,
body.expenses-open #map-controls,
body.expenses-open #fleet-donut,
body.expenses-open #map-driver-license,
body.expenses-open #locate-card, body.expenses-open #locate-panel,
body.expenses-open #history-results-card, body.expenses-open #history-results-panel,
body.expenses-open #device-card, body.expenses-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.expenses-open #map.leaflet-container,
body.expenses-open .leaflet-container {
  pointer-events: none !important;
}

.expenses-standalone {
  min-height: calc(100vh - 56px);
  background: var(--background, #f4f6f9);
}

.expenses-dashboard {
  padding: 20px 24px 64px;
}

.expenses-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: #fff;
}

.expenses-hero__content h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.expenses-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 13px;
}

.expenses-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.expenses-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  white-space: nowrap;
}

.expenses-hero__btn small {
  opacity: 0.8;
  font-weight: 500;
}

.expenses-hero .expenses-hero__btn.btn-light,
.expenses-hero #expenses-add-btn {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.expenses-hero .expenses-hero__btn.btn-outline-light,
.expenses-hero #expenses-export-btn,
.expenses-hero #expenses-refresh-btn,
.expenses-hero #expenses-close-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.expenses-hero .expenses-hero__btn.btn-outline-light:hover,
.expenses-hero #expenses-export-btn:hover,
.expenses-hero #expenses-refresh-btn:hover,
.expenses-hero #expenses-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.expenses-hero .expenses-hero__btn.btn-light:hover,
.expenses-hero #expenses-add-btn:hover {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: transparent !important;
}

.expenses-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.expenses-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.expenses-stat-card--primary {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.expenses-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--chart-1) 12%, white);
  color: var(--chart-1);
}

.expenses-stat-card__icon .fa,
.expenses-stat-card__icon .icon {
  color: inherit;
}

.expenses-stat-card__icon--total {
  background: color-mix(in srgb, var(--chart-1) 12%, white);
  color: var(--chart-1);
}

.expenses-stat-card__icon--month {
  background: color-mix(in srgb, var(--chart-3) 14%, white);
  color: #d97706;
}

.expenses-stat-card__icon--vehicles {
  background: color-mix(in srgb, var(--chart-2) 14%, white);
  color: var(--primary);
}

.expenses-stat-card__icon--avg {
  background: color-mix(in srgb, var(--chart-5) 14%, white);
  color: #7c3aed;
}

.expenses-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.expenses-stat-card__label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.expenses-stat-card__hint {
  font-size: 11px;
  color: var(--secondary-foreground);
  margin-top: 4px;
}

.expenses-type-breakdown {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}

.expenses-type-breakdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.expenses-type-breakdown__head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.expenses-type-breakdown__clear {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 12px;
  cursor: pointer;
}

.expenses-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.expenses-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  cursor: pointer;
  font-size: 12px;
}

.expenses-type-chip.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
}

.expenses-type-chip__amount {
  font-weight: 700;
  color: var(--primary);
}

.expenses-type-chip__count {
  opacity: 0.65;
}

.expenses-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}

.expenses-table-panel__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.expenses-table-panel__head h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.expenses-table-panel__tools {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.expenses-search {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.expenses-device-filter {
  min-width: 220px;
  max-width: 280px;
  height: 36px;
}

.expenses-device-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  max-width: 340px;
  flex: 0 1 320px;
}

.expenses-device-wrap__select {
  flex: 1;
  min-width: 0;
}

.expenses-device-wrap .bootstrap-select {
  width: 100% !important;
}

.expenses-device-wrap.is-locked .bootstrap-select > .dropdown-toggle,
.expenses-device-wrap.is-locked .bootstrap-select.disabled > .dropdown-toggle {
  cursor: default;
  opacity: 1;
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--primary);
  pointer-events: none;
}

.expenses-device-clear {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--card);
  color: var(--secondary-foreground);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.expenses-device-clear:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--secondary-foreground);
  background: var(--background);
}

.expenses-device-clear:not(:disabled):hover {
  background: color-mix(in srgb, var(--destructive, #dc2626) 12%, white);
  border-color: color-mix(in srgb, var(--destructive, #dc2626) 35%, var(--border));
  color: var(--destructive, #dc2626);
}

.expenses-device-wrap.has-selection .expenses-device-clear:not(:disabled) {
  background: color-mix(in srgb, var(--destructive, #dc2626) 10%, white);
  border-color: color-mix(in srgb, var(--destructive, #dc2626) 30%, var(--border));
  color: var(--destructive, #dc2626);
}

.expenses-device-wrap.is-locked .bootstrap-select .bs-caret {
  display: none;
}

.expenses-device-wrap .bootstrap-select > .dropdown-toggle {
  height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
}

.expenses-device-wrap .bootstrap-select > .dropdown-toggle:focus,
.expenses-device-wrap .bootstrap-select.open > .dropdown-toggle,
.expenses-device-wrap .bootstrap-select > .dropdown-toggle:hover {
  border-color: var(--primary);
  background: var(--card);
  color: var(--foreground);
}

.expenses-device-wrap .bootstrap-select .bs-caret {
  color: var(--secondary-foreground);
}

.expenses-device-wrap .bootstrap-select .dropdown-menu,
.expenses-device-dropdown.dropdown-menu {
  min-width: 300px !important;
  max-width: 380px;
  padding: 6px;
  margin-top: 6px !important;
  border: none !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  box-shadow: 0 16px 40px rgba(15, 25, 35, 0.16) !important;
  overflow: hidden;
}

.expenses-device-wrap .bootstrap-select .dropdown-menu .bs-searchbox,
.expenses-device-dropdown.dropdown-menu .bs-searchbox,
.expenses-device-search {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.expenses-device-wrap .bootstrap-select .dropdown-menu .bs-searchbox:before,
.expenses-device-dropdown.dropdown-menu .bs-searchbox:before,
.expenses-device-search:before,
.expenses-device-search__icon {
  content: none !important;
  display: none !important;
}

.expenses-device-wrap .bootstrap-select .dropdown-menu .bs-searchbox .form-control,
.expenses-device-dropdown.dropdown-menu .bs-searchbox .form-control,
.expenses-device-search .form-control {
  background: #fff !important;
}

.expenses-device-wrap .bootstrap-select .dropdown-menu .inner,
.expenses-device-dropdown.dropdown-menu .inner {
  max-height: 280px !important;
  padding: 6px 0;
}

.expenses-device-wrap .bootstrap-select .dropdown-menu li a,
.expenses-device-dropdown.dropdown-menu li a {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  border-radius: 0;
}

.expenses-device-wrap .bootstrap-select .dropdown-menu li a .text,
.expenses-device-dropdown.dropdown-menu li a .text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  line-height: 1.3;
}

.expenses-device-wrap .bootstrap-select .dropdown-menu li a .text .text-muted,
.expenses-device-wrap .bootstrap-select .dropdown-menu li a small,
.expenses-device-dropdown.dropdown-menu li a .text .text-muted,
.expenses-device-dropdown.dropdown-menu li a small {
  font-size: 11px;
  font-weight: 500;
  color: var(--secondary-foreground) !important;
  opacity: 1;
}

.expenses-device-wrap .bootstrap-select .dropdown-menu li a:hover,
.expenses-device-wrap .bootstrap-select .dropdown-menu li a:focus,
.expenses-device-wrap .bootstrap-select .dropdown-menu li.selected a,
.expenses-device-dropdown.dropdown-menu li a:hover,
.expenses-device-dropdown.dropdown-menu li a:focus,
.expenses-device-dropdown.dropdown-menu li.selected a {
  background: color-mix(in srgb, var(--primary) 10%, white) !important;
  color: var(--primary) !important;
}

.expenses-date-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.expenses-date-range__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary-foreground);
}

.expenses-date-range__sep {
  padding-bottom: 10px;
  color: var(--secondary-foreground);
  opacity: 0.5;
  font-weight: 600;
}

.expenses-date-range__field .expenses-date-input {
  width: 132px;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--background);
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
}

/* Expenses datepicker: date-only look, brand blue (no green) */
.datepicker.dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14) !important;
  padding: 8px !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover {
  background-color: color-mix(in srgb, var(--primary) 14%, white) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border)) !important;
  color: var(--primary) !important;
  text-shadow: none !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  text-shadow: none !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background: color-mix(in srgb, var(--primary) 10%, white) !important;
  color: var(--primary) !important;
}

.datepicker table tr td span:hover {
  background: color-mix(in srgb, var(--primary) 10%, white) !important;
}

.expenses-filters-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.expenses-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.expenses-filter {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  font-size: 12px;
  cursor: pointer;
}

.expenses-filter.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
  color: var(--primary);
  font-weight: 600;
}

.expenses-table-panel__body {
  padding: 0;
}

.expenses-table-wrap {
  overflow-x: auto;
}

.expenses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.expenses-table th,
.expenses-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: start;
  vertical-align: middle;
}

.expenses-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--secondary-foreground);
  background: color-mix(in srgb, var(--background) 70%, white);
}

.expenses-table__vehicle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.expenses-table__vehicle-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, white);
  color: var(--primary);
}

.expenses-table__vehicle strong {
  display: block;
}

.expenses-table__vehicle small {
  display: block;
  color: var(--secondary-foreground);
  font-size: 11px;
}

.expenses-table__total {
  font-weight: 700;
  color: var(--primary);
}

.expenses-type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, white);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

.expenses-type-badge--muted {
  background: var(--background);
  color: var(--secondary-foreground);
}

.expenses-actions-bar {
  display: flex;
  gap: 6px;
}

.expenses-action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--secondary-foreground);
  background: var(--card);
}

.expenses-action--edit:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

.expenses-action--delete:hover {
  color: var(--destructive);
  border-color: color-mix(in srgb, var(--destructive) 30%, var(--border));
}

.expenses-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--secondary-foreground);
}

.expenses-empty__icon {
  font-size: 34px;
  margin-bottom: 10px;
  opacity: 0.45;
}

.expenses-empty strong {
  display: block;
  color: var(--foreground);
  margin-bottom: 6px;
}

.expenses-pagination {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* Expenses add/edit: keep slide panels fixed to viewport (not clipped by page scroll) */
body.expenses-open .expenses-page .maintenance-schedule-panel.is-open,
body.expenses-open .expenses-page .maintenance-schedule-card.is-open {
  position: fixed;
  top: 56px;
  left: 0;
  right: calc(var(--rail-width, 210px) + var(--sidebar-w, 300px));
  bottom: 0;
  z-index: 1045;
}

body.expenses-open:has(#sidebar.collapsed) .expenses-page .maintenance-schedule-panel.is-open,
body.expenses-open:has(#sidebar.collapsed) .expenses-page .maintenance-schedule-card.is-open {
  right: var(--rail-width, 210px);
}

.expenses-add-panel__header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, white), var(--card));
}

.expenses-add-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, white), color-mix(in srgb, var(--primary) 4%, white));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, white);
}

.expenses-add-hero__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.expenses-add-hero__text strong {
  display: block;
  font-size: 14px;
}

.expenses-add-hero__text span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--secondary-foreground);
}

.expenses-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
  height: 100%;
}

.expenses-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.expenses-total-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
}

.expenses-total-preview strong {
  font-size: 20px;
  color: var(--primary);
}

.expenses-table-panel__tools .bootstrap-select {
  min-width: 220px;
  max-width: 300px;
}

@media (max-width: 720px) {
  .expenses-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .expenses-device-wrap {
    flex: 1 1 100%;
    max-width: none;
  }

  .expenses-date-range__field .expenses-date-input {
    width: 100%;
    min-width: 120px;
  }
}

.expenses-table__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expenses-table__name small {
  color: var(--secondary-foreground);
  font-size: 11px;
}

.expenses-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.expenses-source-badge--maintenance {
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.expenses-row--maintenance {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.expenses-edit-vehicle {
  margin-bottom: 14px !important;
}

.expenses-edit-vehicle .expenses-source-badge {
  margin-inline-start: auto;
}

.maintenance-complete-expense-hint {
  margin-bottom: 14px;
}

@media (max-width: 1100px) {
  .expenses-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .expenses-dashboard {
    padding: 14px 14px 20px;
  }

  .expenses-stats {
    grid-template-columns: 1fr;
  }

  .expenses-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .expenses-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .expenses-form__row {
    grid-template-columns: 1fr;
  }
}


/* ===== ats-ui/reports.css ===== */
/* ── Reports dashboard page ─────────────────────────────────── */
.reports-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f0f4f9);
  overflow: hidden;
  height: 100%;
  pointer-events: none;
}

.reports-page.is-open {
  display: block;
  pointer-events: auto;
}

/* Never keep reports visible when another section is active */
body:not(.reports-open) .reports-page,
body.vehicle-logs-open .reports-page,
body.dashboard-open .reports-page,
body.maintenance-open .reports-page,
body.expenses-open .reports-page,
body.logistics-open .reports-page,
body.drivers-open .reports-page,
body.geographic-open .reports-page,
body.dash-cam-open .reports-page {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.reports-page__content {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.reports-open {
  overscroll-behavior: none;
}

body.reports-open #map,
body.reports-open #map-controls,
body.reports-open #fleet-donut,
body.reports-open #map-driver-license,
body.reports-open #locate-card, body.reports-open #locate-panel,
body.reports-open #history-results-card, body.reports-open #history-results-panel,
body.reports-open #device-card, body.reports-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

.reports-dashboard {
  padding: 20px 24px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Shared page header, matching the drivers/maintenance/logistics dashboards. */
.reports-hero {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: #fff;
}

.reports-hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.reports-hero__content h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.reports-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 13px;
}

.reports-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.reports-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  white-space: nowrap;
}

.reports-hero .reports-hero__btn.btn-light {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.reports-hero .reports-hero__btn.btn-light:hover {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.reports-hero .reports-hero__btn.btn-outline-light,
.reports-hero #reports-close-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.reports-hero .reports-hero__btn.btn-outline-light:hover,
.reports-hero #reports-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.reports-layout {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

[dir="rtl"] .reports-layout {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
}

.reports-types {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 16px 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
  position: sticky;
  top: 12px;
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.reports-types__title {
  margin: 0 12px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  flex: 0 0 auto;
}

.reports-types__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.reports-type-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  text-align: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.reports-type-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4fb;
  color: var(--primary);
  flex-shrink: 0;
}

.reports-type-item:hover {
  background: #f5f8fc;
}

.reports-type-item.is-active {
  background: var(--primary);
  color: #fff;
}

.reports-type-item.is-active .reports-type-item__icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.reports-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.reports-main__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.reports-main__heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reports-main__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f1fc;
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
}

.reports-main__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.reports-main__heading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.reports-main__heading p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.reports-period-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef4fb;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.reports-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.reports-metric {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.reports-metric__value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 6px;
}

.reports-metric--blue .reports-metric__value { color: #1a6ed8; }
.reports-metric--green .reports-metric__value { color: var(--primary); }
.reports-metric--orange .reports-metric__value { color: #ea580c; }

.reports-metric__label {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

.reports-preview-card {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 18px 20px 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.reports-preview-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.reports-preview-card__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.reports-preview-card__head h3 span {
  color: #64748b;
  font-weight: 600;
}

.reports-period-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f5f9;
}

.reports-period-tab {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.reports-period-tab.is-active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.reports-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 220px;
  padding: 8px 4px 0;
}

.reports-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.reports-chart__bar-wrap {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.reports-chart__bar {
  width: 70%;
  max-width: 42px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--primary-hover) 0%, var(--primary) 100%);
  transition: height .35s ease;
}

.reports-chart__label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.reports-filters-row {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.reports-picker label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.reports-picker-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Roomy enough to list the picked vehicles instead of just counting them. */
.reports-picker-trigger {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 86px;
  padding: 10px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.reports-picker-trigger:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 110, 216, .1);
}

.reports-picker-trigger__label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  max-height: 110px;
  overflow-y: auto;
  text-align: start;
  white-space: normal;
}

.reports-picker-trigger__placeholder {
  align-self: center;
  color: #64748b;
  font-weight: 600;
}

.reports-picker-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1e40af;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-picker-chip--more {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.reports-picker-trigger__icon {
  align-self: center;
  color: #64748b;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.reports-picker-trigger.is-open .reports-picker-trigger__icon {
  transform: rotate(-90deg);
}

.reports-picker-drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  pointer-events: none;
}

.reports-picker-drawer.is-open {
  display: block;
  pointer-events: auto;
}

.reports-picker-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.reports-picker-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: min(420px, 94vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 32px rgba(15, 23, 42, 0.18);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

[dir="ltr"] .reports-picker-drawer__panel {
  left: auto;
  right: 0;
  inset-inline-start: auto;
  box-shadow: -4px 0 32px rgba(15, 23, 42, 0.18);
  transform: translateX(100%);
}

.reports-picker-drawer.is-open .reports-picker-drawer__panel {
  transform: translateX(0);
}

.reports-picker-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #e6edf5;
}

.reports-picker-drawer__head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

.reports-picker-drawer__close {
  border: 0;
  background: #f1f5f9;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #64748b;
  cursor: pointer;
}

.reports-picker-drawer__search {
  position: relative;
  padding: 12px 20px 0;
}

.reports-picker-drawer__search i {
  position: absolute;
  top: 22px;
  inset-inline-start: 32px;
  color: #94a3b8;
  pointer-events: none;
}

.reports-picker-drawer__search .form-control {
  padding-inline-start: 36px;
  border-radius: 10px;
  height: 40px;
}

.reports-picker-drawer__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
}

.reports-picker-drawer__count {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.reports-picker-drawer__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 12px;
  -webkit-overflow-scrolling: touch;
}

.reports-picker-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}

.reports-picker-drawer__item:hover {
  background: #f8fafc;
}

.reports-picker-drawer__item.is-checked {
  background: #eff6ff;
}

.reports-picker-drawer__item-switch {
  flex-shrink: 0;
}

.reports-picker-drawer__item-label {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.reports-picker-drawer__item.is-hidden {
  display: none;
}

.reports-picker-drawer__group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 4px 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.reports-picker-drawer__group:first-child {
  margin-top: 2px;
}

.reports-picker-drawer__group.is-hidden,
.reports-picker-drawer__group-body.is-hidden,
.reports-picker-drawer__group-body.is-collapsed {
  display: none !important;
}

.reports-picker-drawer__group.is-checked {
  background: #dbeafe;
  border-color: #bfdbfe;
}

.reports-picker-drawer__group.is-partial {
  background: #eff6ff;
}

.reports-picker-drawer__group-collapse {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 2px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease, color 0.15s ease;
}

.reports-picker-drawer__group-collapse:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.reports-picker-drawer__group-collapse .fa {
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.reports-picker-drawer__group:not(.is-open) .reports-picker-drawer__group-collapse .fa {
  transform: rotate(-90deg);
}

[dir="rtl"] .reports-picker-drawer__group:not(.is-open) .reports-picker-drawer__group-collapse .fa {
  transform: rotate(90deg);
}

.reports-picker-drawer__group-switch {
  flex-shrink: 0;
}

.reports-picker-drawer__group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #334155;
  text-transform: none;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-picker-drawer__group-body {
  display: block;
}

.reports-picker-drawer__item[data-group-key] {
  margin-inline-start: 8px;
}

/* Keep .ats-switch visuals; cancel the global label→checkbox switch pseudo styles */
.reports-picker-drawer label.ats-switch:has(> input[type="checkbox"])::before,
.reports-picker-drawer label.ats-switch:has(> input[type="checkbox"])::after {
  content: none !important;
  display: none !important;
}

.reports-picker-drawer label.ats-switch:has(> input[type="checkbox"]) {
  padding-inline-start: 0 !important;
  min-height: var(--ats-switch-height, 22px);
  width: var(--ats-switch-width, 40px);
}

.reports-picker-drawer .ats-switch.is-indeterminate .ats-switch__slider {
  background: color-mix(in srgb, var(--primary, #1a6ed8) 45%, var(--switch-background, #c5d4e8));
}

.reports-picker-drawer .ats-switch.is-indeterminate .ats-switch__slider::before {
  inset-inline-start: calc(50% - (var(--ats-switch-knob, 18px) / 2));
}

.reports-picker-drawer__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid #e6edf5;
  background: #fafbfd;
}

[dir="rtl"] .reports-picker-drawer__panel {
  left: 0;
  right: auto;
  box-shadow: 4px 0 32px rgba(15, 23, 42, 0.18);
  transform: translateX(-100%);
}

[dir="rtl"] .reports-picker-drawer.is-open .reports-picker-drawer__panel {
  transform: translateX(0);
}

[dir="rtl"] .reports-picker-trigger__icon {
  transform: scaleX(-1);
}

.reports-download {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 18px 20px 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.reports-download h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.reports-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.reports-format {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
  padding: 16px 10px;
  border: 2px solid #e6edf5;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.reports-format i {
  font-size: 28px;
}

.reports-format:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.reports-format.is-active {
  border-color: var(--primary);
  background: #f0f7ff;
  box-shadow: 0 0 0 3px rgba(26, 110, 216, .12);
  color: var(--primary);
}

.reports-download__hint {
  margin: 0 0 16px;
  font-size: 12px;
  color: #64748b;
}

.reports-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.reports-download-btn:hover {
  background: var(--primary-hover);
}

.reports-download-btn:active {
  transform: translateY(1px);
}

@media (max-width: 992px) {
  .reports-layout {
    grid-template-columns: 1fr;
  }

  .reports-types {
    position: static;
    max-height: none;
  }

  .reports-types__list {
    max-height: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-metrics {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .reports-formats {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
}

@media (max-width: 640px) {
  .reports-dashboard {
    padding: 14px 12px 32px;
  }

  .reports-hero__bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .reports-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .reports-main-tabs {
    flex: 1 1 auto;
    width: auto;
  }

  .reports-main-tab {
    flex: 1 1 auto;
    justify-content: center;
  }

  .reports-main__header {
    flex-direction: column;
  }

  .reports-types__list {
    grid-template-columns: 1fr;
  }

  .reports-formats {
    grid-template-columns: 1fr 1fr;
  }
}


/* Main tabs — segmented control beside the close button in the hero bar. */
.reports-main-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  max-width: 100%;
}

.reports-main-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.reports-main-tab:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.reports-main-tab.is-active,
.reports-main-tab.is-active:hover {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.reports-tab-card,
.reports-tab-panel {
  display: none;
}

.reports-tab-card.is-active,
.reports-tab-panel.is-active {
  display: block;
}

.reports-filters-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.reports-period-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.reports-period-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.reports-period-tab:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.reports-period-tab.is-active {
  background: #eff6ff;
  border-color: var(--primary);
  color: var(--primary);
}

/* Dates stay compact, but each keeps room for its time picker. */
.reports-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 4px;
  align-items: end;
}

.reports-custom-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.reports-date-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

/* Date and hour share one bordered box; the hour side is the shared clock
   widget, so only its placement inside the box is defined here. */
.reports-datetime {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.reports-datetime:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 110, 216, .1);
}

.reports-datetime__date {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  outline: none;
}

.reports-datetime__time {
  flex: 0 0 auto;
  border-inline-start: 1px solid #eef2f7;
  color: #0f172a;
  font-size: 13px;
}



#reports-additional {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

#reports-additional:empty {
  display: none;
}

.reports-additional-field .form-group {
  margin-bottom: 0;
}

.reports-additional-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

/* Parameter pickers sit in a tighter grid than the main vehicle picker. */
.reports-picker--param .reports-picker-trigger {
  min-height: 42px;
  padding: 8px 12px;
}

.reports-picker-drawer__item-group {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #94a3b8;
}

.reports-additional-field__hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: #94a3b8;
}

.reports-required-mark {
  margin: 0 3px;
  color: #dc2626;
  font-weight: 700;
}

.reports-field-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: #dc2626;
}

.has-error .form-control,
.has-error .reports-picker-trigger {
  border-color: #dc2626;
}

.reports-filters-row {
  margin-top: 12px;
}

/* Vehicles carry the most chips, so they keep a full-width row of their own. */
.reports-filters-row .reports-picker[data-picker="devices"] {
  grid-column: 1 / -1;
}

.reports-picker { min-width: 0; }

.reports-options-card,
.reports-options-panel {
  margin-top: 12px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

.reports-options-card summary,
.reports-options-panel summary {
  cursor: pointer;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
  list-style: none;
}

.reports-options-card summary::-webkit-details-marker,
.reports-options-panel summary::-webkit-details-marker {
  display: none;
}

.reports-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Report help lives in a hover bubble on the title so it costs no page space. */
.reports-help-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8f1fc;
  color: var(--primary);
  font-size: 11px;
  cursor: help;
  flex-shrink: 0;
}

.reports-help-hint[hidden] {
  display: none !important;
}

.reports-help-hint:hover,
.reports-help-hint:focus {
  background: var(--primary);
  color: #fff;
  outline: none;
}

.reports-help-pop {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: -10px;
  z-index: 60;
  display: none;
  width: 320px;
  max-width: 78vw;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
  color: #334155;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: start;
  cursor: auto;
  white-space: normal;
}

.reports-help-hint:hover .reports-help-pop,
.reports-help-hint:focus .reports-help-pop,
.reports-help-pop:hover {
  display: block;
}

/* Arrow pointing back at the badge. */
.reports-help-pop::before {
  content: '';
  position: absolute;
  top: -6px;
  inset-inline-start: 16px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-inline-start: 1px solid #dbeafe;
  border-top: 1px solid #dbeafe;
  transform: rotate(45deg);
}

.reports-help-pop__title {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #1e40af;
}

.reports-help-pop__text {
  display: block;
}

.reports-help-pop ul {
  margin: 8px 0 0;
  padding-inline-start: 18px;
}

.reports-help-pop ul:empty {
  display: none;
}

.reports-help-pop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.reports-help-pop__meta:empty {
  display: none;
}

.reports-help-pop__tip {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
}

.reports-help-pop__tip:empty {
  display: none;
}

.reports-help-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 600;
}

.reports-type-item__info {
  margin-inline-start: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: #eef4fb;
  color: #64748b;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.reports-type-item.is-active .reports-type-item__info {
  background: rgba(255,255,255,.2);
  color: inherit;
}

.reports-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.reports-save-template-btn,
.reports-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #334155;
  font-weight: 600;
  cursor: pointer;
}

/* Preview is the primary path: review first, download second. */
.reports-preview-btn {
  min-width: 180px;
  justify-content: center;
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s, transform .15s;
}

.reports-preview-btn:hover {
  background: var(--primary-hover);
}

.reports-preview-btn:active {
  transform: translateY(1px);
}

.reports-action-buttons .reports-download-btn {
  min-width: 0;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
}

.reports-action-buttons .reports-download-btn:hover {
  background: #f1f5f9;
}

/* ---- Download progress overlay ---- */

.reports-download-progress {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.reports-download-progress.is-open {
  display: flex;
}

body.reports-download-busy {
  overflow: hidden;
}

.reports-download-progress__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

.reports-download-progress__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 28px 28px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
  text-align: center;
  animation: reports-download-progress-in 0.18s ease-out;
}

@keyframes reports-download-progress-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reports-download-progress__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary, #1a6ed8) 12%, #fff);
  color: var(--primary, #1a6ed8);
  font-size: 24px;
}

.reports-download-progress__panel h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.reports-download-progress__status {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  line-height: 1.45;
}

.reports-download-progress__track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.reports-download-progress__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary, #1a6ed8), color-mix(in srgb, var(--primary, #1a6ed8) 65%, #38bdf8));
  transition: width 0.25s ease;
}

.reports-download-progress__bar.is-indeterminate {
  width: 40% !important;
  animation: reports-download-bar-slide 1.15s ease-in-out infinite;
}

.reports-download-progress__bar.is-done {
  background: #16a34a;
}

.reports-download-progress__bar.is-error {
  background: #dc2626;
}

@keyframes reports-download-bar-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

[dir="rtl"] .reports-download-progress__bar.is-indeterminate {
  animation-name: reports-download-bar-slide-rtl;
}

@keyframes reports-download-bar-slide-rtl {
  0% { transform: translateX(120%); }
  100% { transform: translateX(-280%); }
}

.reports-download-progress__meta {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.reports-download-progress__cancel {
  margin-top: 18px;
  min-width: 120px;
}

/* ---- Report preview modal ---- */

.reports-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}

.reports-preview-modal.is-open {
  display: flex;
}

body.reports-preview-open {
  overflow: hidden;
}

.reports-preview-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

.reports-preview-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1120px;
  height: 100%;
  max-height: 940px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .35);
  animation: reports-preview-in .18s ease-out;
}

@keyframes reports-preview-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reports-preview-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #e6ebf3;
}

.reports-preview-modal__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.reports-preview-modal__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.reports-preview-modal__meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-preview-modal__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
}

.reports-preview-modal__close:hover {
  background: #e2e8f0;
}

.reports-preview-modal__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #f8fafc;
}

.reports-preview-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.reports-preview-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
}

.reports-preview-modal__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid #e6ebf3;
  background: #fbfcfe;
}

.reports-preview-modal__hint {
  flex: 1 1 auto;
  font-size: 12px;
  color: #64748b;
}

.reports-preview-modal__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-preview-modal__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .reports-preview-modal {
    padding: 0;
  }

  .reports-preview-modal__panel {
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .reports-preview-modal__hint {
    display: none;
  }
}

.reports-card-table,
.reports-panel-table {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.reports-card-loading,
.reports-panel-loading {
  padding: 40px;
  text-align: center;
  color: #64748b;
}

.reports-schedule-detail {
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
}

.reports-schedule-detail strong {
  display: block;
  color: #0f172a;
}

/* ---------- Saved templates / generated files panels ----------
   Same shell as the maintenance and logistics tables so the three
   list screens read as one family. */

.reports-panel {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}

.reports-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.reports-panel__titles {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.reports-panel__titles h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.reports-panel__count {
  font-size: 12px;
  color: var(--secondary-foreground, #64748b);
  white-space: nowrap;
}

.reports-panel__search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  flex: 0 1 260px;
}

.reports-panel__search i {
  position: absolute;
  inset-inline-start: 12px;
  font-size: 12px;
  color: #94a3b8;
  pointer-events: none;
}

.reports-panel__search input {
  width: 100%;
  height: 36px;
  padding-inline: 32px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--background, #f8fafc);
  font-size: 13px;
  color: #0f172a;
}

.reports-panel__search input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}

.reports-panel__scroll {
  overflow-x: auto;
}

.reports-panel__foot {
  padding: 10px 20px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.reports-panel__foot .pagination {
  margin: 0;
}

.reports-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.reports-grid thead th {
  padding: 11px 16px;
  text-align: start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--secondary-foreground, #64748b);
  background: var(--background, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
  white-space: nowrap;
}

.reports-grid tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  vertical-align: middle;
}

.reports-grid tbody tr:last-child td {
  border-bottom: none;
}

.reports-grid tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, white);
}

.reports-grid__primary {
  min-width: 0;
}

.reports-grid__primary strong {
  display: block;
  font-weight: 600;
  color: #0f172a;
}

.reports-grid__primary small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--secondary-foreground, #64748b);
}

.reports-grid__email {
  direction: ltr;
  unicode-bidi: plaintext;
  word-break: break-all;
}

/* "471 KB" reads back to front once the page direction is RTL. */
.reports-grid__size {
  display: inline-block;
  direction: ltr;
}

.reports-grid__muted {
  color: #94a3b8;
}

.reports-grid__chips,
.reports-grid__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reports-grid__stack {
  flex-direction: column;
  align-items: flex-start;
}

.reports-grid__actions-col {
  width: 1%;
  white-space: nowrap;
}

.reports-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--background, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.reports-tag--accent {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, white);
  background: color-mix(in srgb, var(--primary) 8%, white);
}

.reports-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--background, #f1f5f9);
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
}

.reports-chip i,
.reports-chip .icon {
  font-size: 10px;
  color: #94a3b8;
}

.reports-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.reports-status--sent {
  background: color-mix(in srgb, #16a34a 12%, white);
  color: #15803d;
}

.reports-status--failed {
  background: color-mix(in srgb, var(--destructive, #dc2626) 12%, white);
  color: var(--destructive, #dc2626);
  cursor: help;
}

.reports-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--background, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
}

.reports-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
  color: var(--secondary-foreground, #64748b);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.reports-action:hover,
.reports-action:focus {
  transform: translateY(-1px);
  text-decoration: none;
}

.reports-action--run,
.reports-action--download {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, white);
  background: color-mix(in srgb, var(--primary) 6%, white);
}

.reports-action--run:hover,
.reports-action--download:hover {
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
}

.reports-action--edit {
  color: #d97706;
  border-color: color-mix(in srgb, #d97706 25%, white);
}

.reports-action--edit:hover {
  color: #d97706;
}

.reports-action--delete {
  color: var(--destructive, #dc2626);
  border-color: color-mix(in srgb, var(--destructive, #dc2626) 25%, white);
}

.reports-action--delete:hover {
  color: var(--destructive, #dc2626);
}

.reports-panel__empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--secondary-foreground, #64748b);
}

.reports-panel__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--background, #f1f5f9);
  color: #94a3b8;
  font-size: 20px;
}

.reports-panel__empty strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #0f172a;
}

.reports-panel__empty p {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 640px) {
  .reports-panel__head {
    flex-direction: column;
    align-items: stretch;
  }

  .reports-panel__search {
    flex-basis: auto;
  }
}

.reports-save-drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
}

.reports-save-drawer.is-open { display: block; }

.reports-save-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
}

.reports-save-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(420px, 94vw);
  background: #fff;
  padding: 0;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[dir="rtl"] .reports-save-drawer__panel {
  right: auto;
  left: 0;
  box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}

[dir="ltr"] .reports-save-drawer__panel { right: 0; }

.reports-save-drawer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 12px;
  -webkit-overflow-scrolling: touch;
}

.reports-save-drawer__scroll > h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.reports-email-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
}

.reports-email-chips:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 110, 216, .12);
}

.reports-email-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 12px;
  font-weight: 600;
}

.reports-email-chip button {
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.reports-email-chips input {
  flex: 1 1 140px;
  min-width: 120px;
  border: 0;
  outline: none;
  box-shadow: none;
  height: 28px;
  font-size: 13px;
}

.reports-email-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: #64748b;
}

.reports-schedule-block {
  margin-top: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.reports-schedule-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  margin: 0;
}

.reports-schedule-row:last-child {
  border-bottom: 0;
}

.reports-schedule-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.reports-schedule-row select,
.reports-schedule-row .clockpicker {
  min-width: 110px;
  height: 34px;
  border-radius: 8px;
}

.reports-schedule-row.is-disabled select,
.reports-schedule-row.is-disabled .clockpicker {
  opacity: .45;
  pointer-events: none;
}

.reports-next-send {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  color: #475569;
}

.reports-next-send strong {
  color: #0f172a;
}

.reports-save-drawer__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 14px 24px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fafbfd;
}

@media (max-width: 900px) {
  .reports-filters-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .reports-date-grid,
  .reports-custom-dates {
    grid-template-columns: 1fr;
  }

  .reports-picker-trigger {
    min-height: 72px;
  }

  .reports-schedule-row {
    grid-template-columns: 1fr;
  }
}

/* ===== ats-ui/sharing.css ===== */
/* ==========================================================================
   Sharing module — side panel over tracking map (geographic pattern)
   ========================================================================== */

.sharing-page {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: min(440px, 92vw);
  max-width: 92vw;
  height: 100%;
  z-index: 1200;
  direction: ltr;
  unicode-bidi: isolate;
  background: var(--background, #f0f4f9);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(15, 25, 35, 0.12);
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
}

.sharing-page.is-open {
  display: flex;
  flex-direction: column;
}

.sharing-page__content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.sharing-page__content::-webkit-scrollbar {
  width: 6px;
}

.sharing-page__content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, #cbd5e1);
  border-radius: 999px;
}

body.sharing-open {
  overscroll-behavior: none;
  --sharing-panel-w: min(440px, 92vw);
}

@media (min-width: 769px) {
  body.sharing-open #mapWrap > #map {
    left: calc(var(--sharing-panel-w) + var(--map-gap, 14px)) !important;
    transition: left 0.22s ease;
  }

  body.fleetoo-live.sharing-open #mapWrap > #map {
    left: var(--sharing-panel-w) !important;
  }

  body.fleetoo-live.sharing-open #map-controls {
    left: calc(var(--sharing-panel-w) + 10px);
  }
}

body.sharing-open #mapWrap > #sharing_page.sharing-page.is-open {
  z-index: 1200;
}

body.sharing-open #map,
body.sharing-open #map-controls {
  visibility: visible !important;
  pointer-events: auto !important;
}

body.sharing-open #fleet-donut,
body.sharing-open #map-driver-license,
body.sharing-open #locate-card,
body.sharing-open #locate-panel,
body.sharing-open #history-results-card,
body.sharing-open #history-results-panel,
body.sharing-open .map-gprs-controls {
  visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.sharing-open) .sharing-page,
body.vehicle-logs-open .sharing-page,
body.reports-open .sharing-page,
body.dashboard-open .sharing-page,
body.maintenance-open .sharing-page,
body.expenses-open .sharing-page,
body.logistics-open .sharing-page,
body.drivers-open .sharing-page,
body.geographic-open .sharing-page,
body.dash-cam-open .sharing-page {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sharing-dashboard {
  padding: 16px 16px 40px;
  min-height: min-content;
}

/* Hero */
.sharing-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px;
  margin-bottom: 14px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: var(--primary-foreground, #fff);
}

.sharing-hero__content h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.sharing-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 12px;
  line-height: 1.45;
}

.sharing-hero__actions {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
}

.sharing-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

.sharing-hero #sharing-close-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.sharing-hero #sharing-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

/* Stats */
.sharing-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.sharing-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.sharing-stat-card--primary {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.sharing-stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sharing-stat-card__icon--active {
  background: color-mix(in srgb, #16a34a 14%, white);
  color: #16a34a;
}

.sharing-stat-card__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.sharing-stat-card__label {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  color: var(--muted-foreground);
}

/* Main card + sections */
.sharing-table-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.sharing-table-panel__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.sharing-table-panel__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
}

.sharing-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sharing-filter {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted, #e8eef7) 55%, white);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.sharing-filter.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}

.sharing-workspace {
  min-height: 120px;
}

.sharing-section {
  display: none;
}

.sharing-section.is-active {
  display: block;
}

.sharing-section__tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.sharing-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Form */
.sharing-form .form-control,
.sharing-form .bootstrap-select,
.sharing-form .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  max-width: 100%;
}

.sharing-form .bootstrap-select .dropdown-menu {
  max-width: 100%;
}

.sharing-form__section {
  margin-bottom: 12px;
}

.sharing-form__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-foreground);
}

.sharing-form__hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted-foreground);
}

.sharing-devices-picker {
  margin: 0;
}

.sharing-devices-picker .reports-picker-trigger {
  min-height: 72px;
}

.sharing-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sharing-pill {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.sharing-pill__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sharing-pill span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--secondary-foreground);
  font-size: 11px;
  font-weight: 600;
}

.sharing-pill__input:checked + span {
  background: color-mix(in srgb, var(--primary) 12%, white);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--primary);
}

.sharing-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--secondary-foreground);
  cursor: pointer;
}

.sharing-check--block {
  display: flex;
}

.sharing-form__actions {
  margin-top: 8px;
  padding-bottom: 8px;
}

.sharing-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  min-height: 44px;
  background: var(--primary);
  color: var(--primary-foreground, #fff);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.sharing-submit-btn:hover {
  background: var(--primary-hover, #1559b3);
}

/* Links list */
.sharing-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sharing-link-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 12px;
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.sharing-link-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sharing-link-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--foreground);
  word-break: break-word;
}

.sharing-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.sharing-status-badge.is-active {
  background: #dcfce7;
  color: #15803d;
}

.sharing-status-badge.is-inactive {
  background: #fee2e2;
  color: #b91c1c;
}

.sharing-link-card__url {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.sharing-link-card__input {
  font-size: 11px;
  background: var(--card);
  min-width: 0;
}

.sharing-copy-btn,
.sharing-icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--secondary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sharing-link-card__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.sharing-icon-btn--danger {
  color: var(--destructive, #e03d3d);
}

.sharing-link-card__meta {
  font-size: 11px;
  color: var(--muted-foreground);
}

.sharing-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.sharing-empty .icon {
  display: block;
  margin: 0 auto 10px;
  opacity: 0.45;
}

.sharing-expiration,
.sharing-expiration-extra {
  display: none;
}

.sharing-pagination {
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sharing-pagination .pagination {
  margin: 0;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 768px) {
  body.sharing-open {
    --sharing-panel-w: min(360px, 96vw);
  }

  body.sharing-open #mapWrap > #map {
    left: var(--sharing-panel-w) !important;
  }

  .sharing-page,
  #sharing_page.sharing-page.is-open {
    width: min(360px, 96vw) !important;
    max-width: 96vw !important;
  }

  .sharing-dashboard {
    padding: 12px 12px 32px;
  }

  .sharing-hero {
    padding: 14px 12px;
  }

  .sharing-hero__content h2 {
    font-size: 15px;
  }

  .sharing-hero__btn span {
    display: none;
  }

  .sharing-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sharing-stat-card {
    padding: 10px;
  }

  .sharing-stat-card__value {
    font-size: 18px;
  }

  .sharing-table-card {
    padding: 12px;
  }

  .sharing-filter {
    flex: 1 1 calc(50% - 3px);
    padding: 10px 8px;
    font-size: 11px;
  }

  .sharing-link-card__url {
    flex-direction: column;
  }

  .sharing-link-card__url .sharing-copy-btn {
    width: 100%;
    min-height: 40px;
  }

  .sharing-form .bootstrap-select .dropdown-toggle {
    min-height: 42px;
  }
}

@media (max-width: 480px) {
  body.sharing-open {
    --sharing-panel-w: 100vw;
  }

  .sharing-page,
  #sharing_page.sharing-page.is-open {
    width: 100vw !important;
    max-width: 100vw !important;
    border-right: 0;
  }

  body.sharing-open #mapWrap > #map {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/*
 * Map-side shell — same physical left in Arabic (RTL) and English (LTR).
 * Inner .sharing-dashboard keeps dir=rtl for Arabic text.
 */
html[dir="rtl"] #sharing_page.sharing-page,
html[dir="ltr"] #sharing_page.sharing-page,
html[dir="rtl"] #sharing_page.sharing-page.is-open,
html[dir="ltr"] #sharing_page.sharing-page.is-open {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  inset: 0 auto 0 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html[dir="rtl"] #sharing_page.sharing-page.is-open,
html[dir="ltr"] #sharing_page.sharing-page.is-open {
  width: min(440px, 92vw) !important;
  max-width: 92vw !important;
}

@media (max-width: 768px) {
  html[dir="rtl"] #sharing_page.sharing-page.is-open,
  html[dir="ltr"] #sharing_page.sharing-page.is-open {
    width: min(360px, 96vw) !important;
    max-width: 96vw !important;
  }
}

@media (max-width: 480px) {
  html[dir="rtl"] #sharing_page.sharing-page.is-open,
  html[dir="ltr"] #sharing_page.sharing-page.is-open {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ===== ats-ui/history.css ===== */
/* ── Vehicle logs / history playback (map overlay) ─────────── */

body.vehicle-logs-open {
  --vl-accent: var(--primary, #1a6ed8);
  --vl-accent-dark: var(--primary-hover, #1559b3);
  --vl-accent-soft: var(--accent, #ddeaf8);
  --vl-accent-border: #b7d2f5;
  --vl-surface: var(--card, #ffffff);
  --vl-surface-muted: #f5f8fc;
  --vl-border: var(--border, rgba(0, 0, 0, 0.09));
  --vl-shadow: 0 8px 28px rgba(26, 110, 216, 0.12);
}

.vehicle-logs-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 640;
  pointer-events: none;
  visibility: hidden;
  overflow: visible;
}

.vehicle-logs-page.is-open {
  display: block !important;
  visibility: visible !important;
  pointer-events: none;
}

body:not(.vehicle-logs-open) .vehicle-logs-page,
body.reports-open .vehicle-logs-page,
body.dashboard-open .vehicle-logs-page,
body.maintenance-open .vehicle-logs-page,
body.expenses-open .vehicle-logs-page,
body.logistics-open .vehicle-logs-page,
body.drivers-open .vehicle-logs-page,
body.geographic-open .vehicle-logs-page,
body.dash-cam-open .vehicle-logs-page {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.vehicle-logs-page__content {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

body.vehicle-logs-open {
  overscroll-behavior: none;
}

body.vehicle-logs-open .fleetoo-left-column,
body.vehicle-logs-open #device-card,
body.vehicle-logs-open #device-panel,
body.vehicle-logs-open #fleet-donut,
body.vehicle-logs-open .fleet-donut,
body.vehicle-logs-open .map-left-float-stack,
body.vehicle-logs-open .map-gprs-controls {
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Keep Bootstrap map toolstrip usable, but clear space for the float card */
body.vehicle-logs-open #map-controls {
  z-index: 40;
}

body.vehicle-logs-open #history_tab {
  display: none !important;
}

body.vehicle-logs-open #history-results-card {
  display: none !important;
}

.vehicle-logs-playback__player[aria-hidden="true"] {
  display: none !important;
}

.vehicle-logs-playback {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--foreground, #0f1923);
  --vl-accent: var(--primary, #1a6ed8);
  --vl-accent-dark: var(--primary-hover, #1559b3);
  --vl-accent-soft: var(--accent, #ddeaf8);
  --vl-accent-border: #b7d2f5;
  --vl-surface: var(--card, #ffffff);
  --vl-surface-muted: #f5f8fc;
  --vl-border: var(--border, rgba(0, 0, 0, 0.09));
  --vl-shadow: 0 8px 28px rgba(26, 110, 216, 0.12);
}

.vehicle-logs-playback > * {
  pointer-events: auto;
}

.vehicle-logs-playback__topbar {
  position: absolute;
  top: 12px;
  left: calc(var(--rail-width, 72px) + 12px);
  right: 12px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body:has(#sidebar:not(.collapsed)) .vehicle-logs-playback__topbar {
  left: calc(var(--rail-width, 72px) + var(--sidebar-w, 300px) + 12px);
}

.vehicle-logs-playback__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--vl-surface);
  border: 1px solid var(--vl-border);
  border-radius: 14px;
  box-shadow: var(--vl-shadow);
  backdrop-filter: blur(8px);
}

.vehicle-logs-playback__filter--device {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 320px;
}

.vehicle-logs-playback__filter--range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 2 1 360px;
  min-width: 280px;
}

.vehicle-logs-playback__datetime {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.vehicle-logs-playback__datetime .form-control {
  min-height: 38px;
  border-radius: 10px;
}

.vehicle-logs-playback__time {
  width: 110px;
  flex-shrink: 0;
  padding: 0;
  overflow: visible;
}

.vehicle-logs-playback__time .clockpicker__trigger {
  min-height: 36px;
}

.vehicle-logs-playback__range-sep {
  color: var(--muted-foreground, #6b82a0);
  font-weight: 600;
}

.vehicle-logs-playback__periods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vehicle-logs-period-tab {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.vehicle-logs-period-tab.is-active {
  background: var(--vl-accent);
  border-color: var(--vl-accent-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26, 110, 216, 0.28);
}

.vehicle-logs-playback__top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.vehicle-logs-playback__search-btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
  position: relative;
}

.vehicle-logs-playback__search-btn.is-loading::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: vehicle-logs-btn-pulse 1s linear infinite;
}

@keyframes vehicle-logs-btn-pulse {
  from { transform: translateX(-40%); opacity: 0.35; }
  to { transform: translateX(40%); opacity: 1; }
}

.vehicle-logs-page.is-fetching::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  z-index: 50;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--vl-accent, #1a6ed8), transparent);
  background-size: 200% 100%;
  animation: vehicle-logs-btn-pulse 1.1s linear infinite;
  pointer-events: none;
}

.vehicle-logs-page .loading {
  pointer-events: auto;
}

.vehicle-logs-playback__search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--vl-accent) 0%, var(--vl-accent-dark) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26, 110, 216, 0.28);
}

.vehicle-logs-playback__icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  cursor: pointer;
}

.vehicle-logs-playback__icon-btn--close:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.vehicle-logs-playback__advanced {
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--vl-border);
  border-radius: 14px;
  box-shadow: var(--vl-shadow);
}

.vehicle-logs-playback__advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.vehicle-logs-playback__advanced-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vehicle-logs-playback__player {
  position: absolute;
  left: 50%;
  bottom: calc(var(--vl-dock-height, min(40vh, 360px)) + 14px);
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  min-width: min(760px, calc(100vw - 36px));
  width: min(860px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  pointer-events: auto;
}

body.vehicle-logs-open:not(:has(#vehicle-logs-bottom-panel.is-open)) .vehicle-logs-playback__player,
body.vehicle-logs-open:has(#vehicle-logs-bottom-panel.is-collapsed) .vehicle-logs-playback__player {
  bottom: 24px;
}

.vehicle-logs-playback__player-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: linear-gradient(135deg, var(--vl-accent) 0%, var(--vl-accent-dark) 100%);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(26, 110, 216, 0.25);
  flex-shrink: 0;
}

.vehicle-logs-playback__player-speed {
  width: 58px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  flex-shrink: 0;
}

.vehicle-logs-playback__player-toggle,
.vehicle-logs-playback__player-step {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vl-accent) 0%, var(--vl-accent-dark) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26, 110, 216, 0.25);
  flex-shrink: 0;
}

.vehicle-logs-playback__player-step {
  width: 32px;
  height: 32px;
  background: var(--vl-accent-soft);
  color: var(--vl-accent-dark);
  box-shadow: none;
  border: 1px solid var(--vl-accent-border);
}

.vehicle-logs-playback__player-scrub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 260px;
  max-width: none;
  padding: 0 6px;
  /* Keep scrub LTR so fill + thumb move the same way in Arabic UI */
  direction: ltr;
  unicode-bidi: isolate;
}

.vehicle-logs-playback__player-scrub .vehicle-logs-dock__range {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  direction: ltr;
}

.vehicle-logs-playback__player-scrub-count {
  flex-shrink: 0;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 800;
  color: var(--vl-accent-dark);
  white-space: nowrap;
}

.vehicle-logs-playback__player-scrub-count span[aria-hidden="true"] {
  margin: 0 2px;
  opacity: 0.5;
}

/* Hide classic history chrome while vehicle-logs overlay is open */
body.vehicle-logs-open #bottom-history,
body.vehicle-logs-open #history-control-layers,
body.vehicle-logs-open .leaflet-popup-history {
  display: none !important;
}

/* ── Bottom dock ───────────────────────────────────────────── */

body.vehicle-logs-open {
  --vl-dock-height: min(32vh, 280px);
}

.vehicle-logs-playback__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: var(--vl-dock-height);
  max-height: var(--vl-dock-height);
  padding: 0 10px 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-sizing: border-box;
}

.vehicle-logs-playback__bottom.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.vehicle-logs-playback__bottom.is-collapsed {
  height: auto;
  max-height: none;
}

.vehicle-logs-playback__bottom.is-collapsed .vehicle-logs-dock {
  display: none;
}

.vehicle-logs-dock__handle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 6px;
  padding: 6px 14px;
  border: 1px solid var(--vl-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--vl-accent-dark);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  cursor: pointer;
}

.vehicle-logs-dock__grip {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #cbd5e1;
}

.vehicle-logs-dock__handle-label {
  display: none;
}

.vehicle-logs-dock {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.vehicle-logs-dock__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 7px 12px;
  background: #f8fbff;
  border-bottom: 1px solid #e8eef5;
}

.vehicle-logs-dock__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.vehicle-logs-dock__title i {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vl-accent-soft);
  color: var(--vl-accent-dark);
  font-size: 11px;
}

.vehicle-logs-dock__header-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vehicle-logs-dock__header-clock,
.vehicle-logs-dock__header-count {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vehicle-logs-dock__header-clock {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

.vehicle-logs-dock__header-count {
  display: none;
}

/* Floating live readings — one compact card, clear of Bootstrap toolstrip */
.vehicle-logs-float-readings {
  position: absolute;
  left: calc(10px + var(--fleetoo-toolstrip-w, 32px) + 12px);
  top: 118px;
  z-index: 42;
  width: 196px;
  max-width: calc(100vw - 28px);
  pointer-events: auto;
}

.vehicle-logs-float-readings[aria-hidden="true"] {
  display: none !important;
}

.vehicle-logs-float-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(8px);
}

.vehicle-logs-float-card__head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.vehicle-logs-float-card__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.vehicle-logs-float-card__status {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  line-height: 1.2;
}

.vehicle-logs-float-card__grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vehicle-logs-float-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.vehicle-logs-float-card__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.vehicle-logs-float-card__label i {
  width: 12px;
  text-align: center;
  color: var(--vl-accent-dark);
  font-size: 10px;
}

.vehicle-logs-float-card__value {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  text-align: end;
  line-height: 1.2;
  white-space: nowrap;
}

.vehicle-logs-float-card__address {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 7px;
  border-top: 1px solid #eef2f7;
}

.vehicle-logs-float-card__address-value {
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="moving"] {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="moving"] .vehicle-logs-float-card__status {
  color: #15803d;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="moving"] .vehicle-logs-float-card__status-dot {
  background: #16a34a;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="idle"] {
  background: #fffbeb;
  border-color: #fde68a;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="idle"] .vehicle-logs-float-card__status {
  color: #a16207;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="idle"] .vehicle-logs-float-card__status-dot {
  background: #ca8a04;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="stopped"] {
  background: #fef2f2;
  border-color: #fecaca;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="stopped"] .vehicle-logs-float-card__status {
  color: #b91c1c;
}

.vehicle-logs-float-card .vehicle-logs-reading--state[data-state="stopped"] .vehicle-logs-float-card__status-dot {
  background: #dc2626;
}

.vehicle-logs-dock__tabs {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 4px;
  padding: 5px 8px;
  background: #f5f8fc;
  border-bottom: 1px solid #e8eef5;
  overflow-x: auto;
  scrollbar-width: thin;
}

.vehicle-logs-main-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.vehicle-logs-reading__value--ltr {
  direction: ltr;
  unicode-bidi: plaintext;
}

.vehicle-logs-dock__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vl-accent) 0%, var(--vl-accent) var(--vl-progress, 0%), #dbe3ee var(--vl-progress, 0%), #dbe3ee 100%);
  outline: none;
  cursor: pointer;
}

.vehicle-logs-dock__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vl-accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(26, 110, 216, 0.4);
  cursor: pointer;
}

.vehicle-logs-dock__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vl-accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(26, 110, 216, 0.4);
  cursor: pointer;
}

.vehicle-logs-main-tab i {
  font-size: 11px;
  opacity: 0.85;
}

.vehicle-logs-main-tab:hover {
  background: #fff;
  border-color: #dbe3ee;
  color: #334155;
}

.vehicle-logs-main-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--vl-accent) 0%, var(--vl-accent-dark) 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(26, 110, 216, 0.22);
}

.vehicle-logs-main-tab.is-active i {
  opacity: 1;
}

.vehicle-logs-dock__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.vehicle-logs-tab-card {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.vehicle-logs-tab-card.is-active {
  display: flex;
  flex-direction: column;
}

.vehicle-logs-playback__trip-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin: 0 0 8px;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.vehicle-logs-playback__trip-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.vehicle-logs-playback__trip-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
}

.vehicle-logs-playback__trip-icon--start {
  background: #dcfce7;
  color: #16a34a;
}

.vehicle-logs-playback__trip-icon--end {
  background: #fee2e2;
  color: #dc2626;
}

.vehicle-logs-playback__trip-kicker {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}

.vehicle-logs-playback__trip-start .vehicle-logs-playback__trip-point {
  justify-content: flex-start;
}

.vehicle-logs-playback__trip-end .vehicle-logs-playback__trip-point {
  justify-content: flex-end;
  flex-direction: row-reverse;
  text-align: left;
}

.vehicle-logs-playback__trip-time {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.vehicle-logs-playback__trip-address {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.vehicle-logs-playback__trip-center {
  text-align: center;
  min-width: 120px;
}

.vehicle-logs-playback__trip-line span {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #1a6ed8);
  margin-bottom: 8px;
}

.vehicle-logs-playback__trip-distance {
  font-size: 24px;
  font-weight: 800;
  color: var(--vl-accent-dark);
}

.vehicle-logs-playback__trip-badge {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
}

.vehicle-logs-playback__metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 4px;
}

.vehicle-logs-playback__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  min-width: 0;
}

.vehicle-logs-playback__metric-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
}

.vehicle-logs-playback__metric-value {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  word-break: break-word;
}

.vehicle-logs-playback__records,
.vehicle-logs-playback__events-table-wrap,
.vehicle-logs-playback__trips-body,
.vehicle-logs-playback__details {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Records / datalog table (السجلات) ───────────────────────── */
#vehicle_logs_messages.vehicle-logs-playback__records {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #f8fafc;
}

#vehicle_logs_messages > [data-filter] {
  display: none;
}

#vehicle_logs_messages > [data-table] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#vehicle_logs_messages .table-responsive,
#vehicle_logs_messages .table-responsive.scrollbox {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: auto !important;
  margin: 0;
  padding: 0;
  border: none;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#vehicle_logs_messages #history-table-content-table,
#vehicle_logs_messages .table.table-list {
  width: max-content;
  min-width: 100%;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

#vehicle_logs_messages .table.table-list.sticky-header > thead > tr > th,
#vehicle_logs_messages .table.table-list thead > tr > th {
  position: sticky !important;
  top: 0;
  z-index: 4;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  white-space: nowrap !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  min-width: 92px;
  box-shadow: 0 1px 0 #e2e8f0;
  vertical-align: middle;
}

#vehicle_logs_messages .table.table-list thead > tr > th#table-th-span-time,
#vehicle_logs_messages .table.table-list thead > tr > th:nth-child(2),
#vehicle_logs_messages .table.table-list thead > tr > th:nth-child(3) {
  min-width: 158px;
}

#vehicle_logs_messages .table.table-list tbody > tr > td {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  padding: 9px 12px !important;
  white-space: nowrap !important;
  border-top: none !important;
  border-bottom: 1px solid #eef2f7 !important;
  vertical-align: middle;
  min-width: 72px;
  background: #fff;
}

#vehicle_logs_messages .table.table-list tbody > tr:nth-child(even) > td {
  background: #fafbfc;
}

#vehicle_logs_messages .table.table-list tbody > tr:hover > td {
  background: #f0f6ff !important;
}

#vehicle_logs_messages .table.table-list tbody > tr.is-active > td,
#vehicle_logs_messages .table.table-list tbody > tr.active > td {
  background: #e8f1fb !important;
}

#vehicle_logs_messages .table.table-list tbody > tr > td:first-child,
#vehicle_logs_messages .table.table-list thead > tr > th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 5;
  background: #fff;
  min-width: 44px;
  max-width: 52px;
  text-align: center;
  box-shadow: 1px 0 0 #eef2f7;
}

[dir="rtl"] #vehicle_logs_messages .table.table-list tbody > tr > td:first-child,
[dir="rtl"] #vehicle_logs_messages .table.table-list thead > tr > th:first-child {
  box-shadow: -1px 0 0 #eef2f7;
}

#vehicle_logs_messages .table.table-list thead > tr > th:first-child {
  z-index: 6;
  background: #f1f5f9 !important;
}

#vehicle_logs_messages .table.table-list tbody > tr:nth-child(even) > td:first-child {
  background: #fafbfc;
}

#vehicle_logs_messages .table.table-list tbody > tr:hover > td:first-child {
  background: #f0f6ff !important;
}

#vehicle_logs_messages .table.table-list tbody > tr.is-active > td:first-child,
#vehicle_logs_messages .table.table-list tbody > tr.active > td:first-child {
  background: #e8f1fb !important;
}

#vehicle_logs_messages .table .checkbox {
  margin: 0;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#vehicle_logs_messages .nav-pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 12px;
  margin: 0;
  border-top: 1px solid #e8eef5;
  background: #f8fafc;
}

#vehicle_logs_messages .nav-pagination .pagination {
  margin: 0 !important;
}

#vehicle_logs_messages .nav-pagination .pagination > li > a,
#vehicle_logs_messages .nav-pagination .pagination > li > span {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  margin: 0 2px;
  border-color: #e2e8f0;
  color: #475569;
}

#vehicle_logs_messages .nav-pagination .pagination > .active > a,
#vehicle_logs_messages .nav-pagination .pagination > .active > span {
  background: var(--vl-accent, #1a6ed8);
  border-color: var(--vl-accent, #1a6ed8);
  color: #fff;
}

#vehicle_logs_messages .nav-pagination .form-control,
#vehicle_logs_messages .nav-pagination select.form-control {
  height: 32px;
  width: auto;
  min-width: 72px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border-color: #e2e8f0;
  box-shadow: none;
}

#vehicle_logs_messages .nav-pagination .pull-left {
  float: none;
  margin: 0;
}

.vehicle-logs-events-table {
  margin-bottom: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.vehicle-logs-events-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  padding: 11px 12px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.vehicle-logs-events-table tbody td {
  padding: 12px;
  font-size: 13px;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.vehicle-logs-events-table tbody tr.is-clickable {
  cursor: pointer;
}

.vehicle-logs-events-table tbody tr.is-clickable:hover,
.vehicle-logs-events-table tbody tr.is-active {
  background: #f0f6ff;
}

.vehicle-logs-empty {
  color: #94a3b8;
  text-align: center;
  padding: 20px 16px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.vehicle-logs-playback__routes-host {
  display: none !important;
}

.vehicle-logs-playback__trips-body > .vehicle-logs-trips {
  min-width: 720px;
}

.vehicle-logs-trips__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.vehicle-logs-trips__summary-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f0f6ff;
  border: 1px solid #dbe7f8;
  line-height: 1.2;
}

.vehicle-logs-trips__summary-item i {
  font-size: 10px;
  color: var(--vl-accent);
}

.vehicle-logs-trips__summary-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

.vehicle-logs-trips__summary-value {
  font-size: 11px;
  font-weight: 800;
  color: var(--vl-accent-dark);
  font-variant-numeric: tabular-nums;
}

.vehicle-logs-trips-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  margin: 0 !important;
  padding: 0;
}

.vehicle-logs-trips-table thead th {
  /* Do not sticky — sticky + border-spacing overlaps the first trip row */
  position: static;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--vl-border);
  white-space: nowrap;
  vertical-align: bottom;
}

.vehicle-logs-trips-row {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.vehicle-logs-trips-row > td {
  background: #fff;
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
  padding: 8px 10px;
  font-size: 12px;
  color: #334155;
  vertical-align: middle;
}

.vehicle-logs-trips-row > td:first-child {
  border-inline-start: 1px solid #eef2f7;
  border-radius: 10px 0 0 10px;
}

.vehicle-logs-trips-row > td:last-child {
  border-inline-end: 1px solid #eef2f7;
  border-radius: 0 10px 10px 0;
}

[dir="rtl"] .vehicle-logs-trips-row > td:first-child {
  border-radius: 0 10px 10px 0;
}

[dir="rtl"] .vehicle-logs-trips-row > td:last-child {
  border-radius: 10px 0 0 10px;
}

.vehicle-logs-trips-row:hover > td,
.vehicle-logs-trips-row.is-active > td {
  background: var(--vl-accent-soft);
  border-color: var(--vl-accent-border);
}

.vehicle-logs-trips-row.is-active > td {
  box-shadow: inset 3px 0 0 var(--vl-accent);
}

[dir="rtl"] .vehicle-logs-trips-row.is-active > td {
  box-shadow: inset -3px 0 0 var(--vl-accent);
}

.vehicle-logs-trips-cell--date {
  min-width: 130px;
}

.vehicle-logs-trips-date {
  display: block;
  font-weight: 700;
  color: #0f172a;
}

.vehicle-logs-trips-time {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}

.vehicle-logs-trips-cell--duration {
  font-weight: 700;
  white-space: nowrap;
}

.vehicle-logs-trips-cell--score,
.vehicle-logs-trips-cell--count {
  text-align: center;
  font-weight: 700;
  color: #475569;
}

.vehicle-logs-trips-cell--distance {
  font-weight: 800;
  white-space: nowrap;
  color: var(--vl-accent-dark);
}

.vehicle-logs-trips-cell--route {
  min-width: 280px;
}

.vehicle-logs-trips-route {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.vehicle-logs-trips-route__point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.vehicle-logs-trips-route__dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.vehicle-logs-trips-route__dot--start {
  background: #22c55e;
}

.vehicle-logs-trips-route__dot--end {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.vehicle-logs-trips-route__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vehicle-logs-trips-route__kicker {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.2;
}

.vehicle-logs-trips-route__address {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[dir="rtl"] .vehicle-logs-playback__trip-start {
  text-align: right;
}

[dir="rtl"] .vehicle-logs-playback__trip-end {
  text-align: left;
}

[dir="rtl"] .vehicle-logs-playback__trip-end .vehicle-logs-playback__trip-point {
  flex-direction: row;
  text-align: right;
}

@media (max-width: 1100px) {
  .vehicle-logs-playback__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vehicle-logs-playback__trip-summary {
    grid-template-columns: 1fr;
  }

  .vehicle-logs-dock__header {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .vehicle-logs-playback__topbar {
    left: calc(var(--rail-width, 72px) + 8px);
    right: 8px;
  }

  .vehicle-logs-playback__player {
    min-width: calc(100vw - 24px);
    width: calc(100vw - 24px);
    bottom: calc(var(--vl-dock-height) + 12px);
  }

  body.vehicle-logs-open {
    --vl-dock-height: min(42vh, 300px);
  }

  .vehicle-logs-float-readings {
    left: calc(8px + var(--fleetoo-toolstrip-w, 32px) + 8px);
    top: 108px;
    width: 176px;
  }

  .vehicle-logs-playback__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vehicle-logs-dock__header-clock {
    display: none;
  }
}

/* Theme focus rings — align with platform primary */
body.vehicle-logs-open .vehicle-logs-playback .form-control:focus,
body.vehicle-logs-open .vehicle-logs-playback .bootstrap-select .dropdown-toggle:focus {
  border-color: var(--vl-accent) !important;
  box-shadow: 0 0 0 3px rgba(26, 110, 216, 0.16) !important;
}

body.vehicle-logs-open .vehicle-logs-playback .bootstrap-select .dropdown-menu > .active > a,
body.vehicle-logs-open .vehicle-logs-playback .bootstrap-select .dropdown-menu > .selected > a {
  background: var(--vl-accent) !important;
}

body.vehicle-logs-open .vehicle-logs-playback .table-list thead th {
  background: var(--vl-surface-muted);
  color: var(--vl-accent-dark);
  border-color: var(--vl-border);
}

body.vehicle-logs-open .vehicle-logs-playback .clockpicker.is-open .clockpicker__trigger,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker.is-open .clockpicker__trigger i {
  color: var(--vl-accent);
}

body.vehicle-logs-open .vehicle-logs-playback .clockpicker__unit.is-active,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker__center,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker__hand,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker__knob,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker__btn.is-primary,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker__meridiem button.is-active {
  background: var(--vl-accent);
  border-color: var(--vl-accent);
  color: #fff;
}

body.vehicle-logs-open .vehicle-logs-playback .clockpicker__hand,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker__knob,
body.vehicle-logs-open .vehicle-logs-playback .clockpicker__center {
  color: inherit;
}

/* History route / playback map chrome */
.history-route-line {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
}

.leaflet-marker-icon.history-route-arrow {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.history-route-arrow__mark {
  display: block;
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.35));
}

.history-route-arrow__mark svg {
  display: block;
  width: 16px;
  height: 16px;
}

.leaflet-marker-icon.history-route-point {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.history-route-point__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hrp-soft, #e2e8f0);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

.history-route-point__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--hrp-fill, #3b82f6);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #fff;
}

.history-route-point--3 .history-route-point__dot {
  font-size: 8px;
}

.leaflet-marker-icon.history-route-stop-marker {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.history-route-stop {
  display: block;
  filter: drop-shadow(0 3px 8px rgba(14, 165, 233, 0.35));
}

.leaflet-marker-icon.history-playback-car {
  z-index: 650 !important;
}

/* ===== ats-ui/logistics.css ===== */
/* ==========================================================================
   Logistics dashboard (same pattern as expenses / maintenance)
   ========================================================================== */

.logistics-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f4f6f9);
  overflow: hidden;
}

.logistics-page.is-open {
  display: block;
}

.logistics-page__content {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.logistics-page__content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.logistics-panel-open:has(#logistics-add-panel.is-open) .logistics-page__content,
body.logistics-panel-open:has(#logistics-edit-panel.is-open) .logistics-page__content,
body.logistics-card-open:has(#logistics-add-card.is-open) .logistics-page__content,
body.logistics-card-open:has(#logistics-edit-card.is-open) .logistics-page__content {
  overflow: hidden !important;
}

body.logistics-open {
  overscroll-behavior: none;
}

body.logistics-open #map,
body.logistics-open #map-controls,
body.logistics-open #fleet-donut,
body.logistics-open #map-driver-license,
body.logistics-open #locate-card, body.logistics-open #locate-panel,
body.logistics-open #history-results-card, body.logistics-open #history-results-panel,
body.logistics-open #device-card, body.logistics-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.logistics-open #map.leaflet-container,
body.logistics-open .leaflet-container {
  pointer-events: none !important;
}

.logistics-dashboard {
  padding: 20px 24px 64px;
}

.logistics-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: #fff;
}

.logistics-hero__content h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.logistics-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 13px;
}

.logistics-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.logistics-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  white-space: nowrap;
}

.logistics-hero__btn small {
  opacity: 0.8;
  font-weight: 500;
}

.logistics-hero .logistics-hero__btn.btn-light,
.logistics-hero #logistics-add-btn {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.logistics-hero .logistics-hero__btn.btn-outline-light,
.logistics-hero #logistics-refresh-btn,
.logistics-hero #logistics-close-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.logistics-hero .logistics-hero__btn.btn-outline-light:hover,
.logistics-hero #logistics-refresh-btn:hover,
.logistics-hero #logistics-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.logistics-hero .logistics-hero__btn.btn-light:hover,
.logistics-hero #logistics-add-btn:hover {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: transparent !important;
}

.logistics-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.logistics-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.logistics-stat-card--primary {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.logistics-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.logistics-stat-card__icon--new {
  background: color-mix(in srgb, #f59e0b 14%, white);
  color: #d97706;
}

.logistics-stat-card__icon--loading {
  background: color-mix(in srgb, #8b5cf6 14%, white);
  color: #7c3aed;
}

.logistics-stat-card__icon--progress {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}

.logistics-stat-card__icon--done {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}

.logistics-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.logistics-stat-card__label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.logistics-stat-card__hint {
  font-size: 11px;
  color: var(--secondary-foreground);
  margin-top: 4px;
}

.logistics-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 18px 8px;
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.logistics-table-panel__head h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
}

.logistics-table-panel__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.logistics-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}

.logistics-device-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 260px;
  max-width: 340px;
  flex: 0 1 320px;
}

.logistics-device-wrap__select {
  flex: 1;
  min-width: 0;
}

.logistics-device-wrap .bootstrap-select {
  width: 100% !important;
}

.logistics-device-filter,
.logistics-select {
  width: 100%;
}

.logistics-device-clear {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--card);
  color: var(--secondary-foreground);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.logistics-device-wrap.has-selection .logistics-device-clear {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.logistics-device-wrap .bootstrap-select > .dropdown-toggle {
  height: 38px;
  min-height: 38px;
}

.logistics-form .bootstrap-select,
.logistics-form .logistics-select + .bootstrap-select {
  width: 100% !important;
}

.logistics-form .bootstrap-select > .dropdown-toggle {
  min-height: 38px;
}

.logistics-table-panel__tools .bootstrap-select > .dropdown-toggle {
  font-size: 13px;
  font-weight: 600;
}

.logistics-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.logistics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.logistics-filter {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted, #f1f5f9) 55%, white);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}

.logistics-filter.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.logistics-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logistics-date-range__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  color: var(--secondary-foreground);
}

.logistics-date-range__field input {
  width: 130px;
  height: 34px;
  border-radius: 8px;
}

.logistics-table-wrap {
  overflow-x: auto;
}

.logistics-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.logistics-table th,
.logistics-table td {
  padding: 8px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  text-align: start;
  vertical-align: middle;
  font-size: 11px;
  line-height: 1.35;
  word-break: break-word;
}

.logistics-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--secondary-foreground);
  font-weight: 700;
}

.logistics-table__name,
.logistics-table__place {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.logistics-table__vehicle {
  vertical-align: middle;
}

.logistics-table__vehicle-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.logistics-table__vehicle-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  justify-content: center;
}

.logistics-table__name,
.logistics-table__place {
  min-width: 0;
}

.logistics-table__vehicle-text strong,
.logistics-table__name strong,
.logistics-table__place strong {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.logistics-table__vehicle-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
  font-size: 12px;
}

.logistics-table small {
  color: var(--secondary-foreground);
  font-size: 10px;
  line-height: 1.25;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logistics-zone-icon {
  margin-inline-end: 3px;
  color: var(--primary);
  font-size: 10px;
}

.logistics-status-badge,
.logistics-priority-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--muted, #f1f5f9) 70%, white);
  color: var(--secondary-foreground);
}

.logistics-status-badge.is-new { background: #fff7ed; color: #c2410c; }
.logistics-status-badge.is-loading { background: #f5f3ff; color: #7c3aed; }
.logistics-status-badge.is-progress { background: color-mix(in srgb, #1a6ed8 12%, var(--card)); color: #1a6ed8; }
.logistics-status-badge.is-done { background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); }
.logistics-status-badge.is-failed { background: #fef2f2; color: #b91c1c; }

.logistics-priority-badge--1 { background: #f8fafc; color: #64748b; }
.logistics-priority-badge--2 { background: color-mix(in srgb, #1a6ed8 10%, var(--card)); color: #1a6ed8; }
.logistics-priority-badge--3 { background: #fef2f2; color: #b91c1c; }

.logistics-actions-bar {
  display: flex;
  gap: 6px;
}

.logistics-action {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--muted, #f1f5f9) 60%, white);
  color: var(--secondary-foreground);
  text-decoration: none !important;
  font-size: 12px;
}

.logistics-action--edit:hover {
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.logistics-action--delete:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.logistics-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--secondary-foreground);
}

.logistics-empty__icon {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--primary);
}

.logistics-pagination {
  padding: 12px 4px 16px;
}

.logistics-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.logistics-form-section {
  margin: 8px 0 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--muted, #f1f5f9) 45%, white);
}

.logistics-form-section h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.logistics-geofence-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--secondary-foreground);
}

.logistics-zone-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  color: var(--primary);
}

.logistics-zone-preview[hidden] {
  display: none !important;
}

.logistics-zone-preview i {
  font-size: 18px;
}

.logistics-zone-preview strong {
  display: block;
  font-size: 13px;
  color: var(--foreground);
}

.logistics-zone-preview span {
  font-size: 11px;
  color: var(--secondary-foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.logistics-open .logistics-page .maintenance-schedule-panel.is-open,
body.logistics-open .logistics-page .maintenance-schedule-card.is-open {
  z-index: 700;
}

@media (max-width: 1100px) {
  .logistics-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .logistics-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .logistics-stats,
  .logistics-form__row {
    grid-template-columns: 1fr;
  }

  .logistics-filters-row {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ===== ats-ui/account.css ===== */
/* ==========================================================================
   Account hub — matches reports / geographic module patterns
   ========================================================================== */

.account-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f4f6f9);
  overflow: hidden;
}

.account-page.is-open {
  display: block;
}

.account-page__content {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.account-page__content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.account-open {
  overscroll-behavior: none;
}

body.account-open #map,
body.account-open #map-controls,
body.account-open #fleet-donut,
body.account-open #map-driver-license,
body.account-open #locate-card, body.account-open #locate-panel,
body.account-open #history-results-card, body.account-open #history-results-panel,
body.account-open #device-card, body.account-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Shell */
.account-hub {
  padding: 16px 20px 24px;
  min-height: 100%;
}

.account-hub__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.account-hub__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.account-hub__breadcrumb strong {
  color: #0f172a;
  font-weight: 700;
}

.account-hub__breadcrumb .fa-chevron-left {
  font-size: 10px;
  opacity: 0.55;
}

[dir="rtl"] .account-hub__breadcrumb .fa-chevron-left {
  transform: scaleX(-1);
}

.account-hub__top-actions {
  flex-shrink: 0;
}

.account-hub__close-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #334155;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.account-hub__close-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Layout — sidebar + content (like reports-layout) */
.account-hub__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

[dir="rtl"] .account-hub__layout {
  grid-template-columns: 260px minmax(0, 1fr);
}

/* Sidebar nav */
.account-hub__sidebar {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 14px 10px;
  position: sticky;
  top: 0;
}

.account-hub__sidebar-title {
  margin: 0 12px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.account-hub__sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-hub__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  text-align: start;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.account-hub__nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #64748b;
  flex-shrink: 0;
  font-size: 14px;
}

.account-hub__nav-text {
  min-width: 0;
  line-height: 1.3;
}

.account-hub__nav-item:hover {
  background: #f5f8fc;
}

.account-hub__nav-item.is-active {
  background: var(--primary, #1a6ed8);
  color: #fff;
}

.account-hub__nav-item.is-active .account-hub__nav-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Content panels */
.account-hub__panels {
  min-width: 0;
}

.account-hub__panel {
  display: none;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.account-hub__panel.is-active {
  display: block;
}

.account-hub__panel-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6edf5;
}

.account-hub__panel-head h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.account-hub__panel-head p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

/* Forms */
.account-hub__form .form-group {
  margin-bottom: 16px;
}

.account-hub__form .form-group > label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.account-hub__form .form-control {
  border-radius: 10px;
  border-color: #dbe3ef;
  min-height: 40px;
  box-shadow: none;
}

.account-hub__form .form-control:focus {
  border-color: var(--primary, #1a6ed8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a6ed8) 14%, transparent);
}

/* Photo block */
.account-hub__photo-block {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e6edf5;
}

.account-hub__photo-wrap {
  flex-shrink: 0;
}

.account-hub__photo-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary, #1a6ed8) 10%, #fff);
  border: 2px solid color-mix(in srgb, var(--primary, #1a6ed8) 22%, #e6edf5);
  cursor: pointer;
  margin: 0;
}

.account-hub__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-hub__photo-initial {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary, #1a6ed8);
}

.account-hub__photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 25, 35, 0.45);
  color: #fff;
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.account-hub__photo-frame:hover .account-hub__photo-overlay,
.account-hub__photo-frame:focus-within .account-hub__photo-overlay {
  opacity: 1;
}

.account-hub__photo-meta {
  min-width: 0;
}

.account-hub__photo-meta strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.account-hub__photo-meta p {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12px;
}

.account-hub__photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-hub__photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px !important;
}

.account-hub__form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e6edf5;
}

.account-hub__save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
  border-radius: 10px !important;
  font-weight: 600;
}

/* Send command tabs (reports-main-tab style) */
.account-hub__send-command-wrap {
  min-height: 80px;
}

.account-hub__cmd-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.account-hub__cmd-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #475569;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.account-hub__cmd-tab.is-active {
  background: var(--primary, #1a6ed8);
  border-color: var(--primary, #1a6ed8);
  color: #fff;
}

.account-hub__cmd-alerts {
  margin-bottom: 12px;
}

.account-hub__cmd-alerts .alert {
  border-radius: 10px;
  margin-bottom: 8px;
}

.account-hub__cmd-panel {
  display: none;
}

.account-hub__cmd-panel.is-active {
  display: block;
}

.account-hub__send-command-actions {
  margin-top: 0;
  padding-top: 12px;
}

.account-hub__send-command-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px !important;
  font-weight: 600;
  padding: 10px 20px;
}

.account-hub__send-command-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Table panels */
.account-hub__gprs-templates {
  min-height: 120px;
}

.account-hub__table-panel {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 16px;
  padding: 16px 18px;
}

.account-hub__table-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6edf5;
}

.account-hub__table-panel-heading h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.account-hub__table-panel-heading p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  max-width: 520px;
}

.account-hub__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  background: var(--primary, #1a6ed8);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.account-hub__add-btn:hover {
  background: color-mix(in srgb, var(--primary, #1a6ed8) 88%, #000);
}

.account-hub__table-panel .table-list,
.account-hub__cmd-panel .table-list {
  margin-bottom: 0;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  overflow: hidden;
}

.account-hub__table-panel .table-list thead th,
.account-hub__cmd-panel .table-list thead th {
  background: #f8fafc;
  border-bottom: 1px solid #e6edf5;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  padding: 10px 14px;
}

.account-hub__table-panel .table-list tbody td,
.account-hub__cmd-panel .table-list tbody td {
  padding: 10px 14px;
  font-size: 13px;
  vertical-align: middle;
  border-top: 1px solid #f1f5f9;
}

.account-hub__table-panel .table-list tbody tr:hover,
.account-hub__cmd-panel .table-list tbody tr:hover {
  background: #f8fafc;
}

.account-hub__table-panel .table-list .no-data,
.account-hub__cmd-panel .table-list .no-data {
  text-align: center;
  color: #94a3b8;
  padding: 28px 14px;
}

.account-hub__table-panel .actions,
.account-hub__cmd-panel .actions {
  white-space: nowrap;
  text-align: end;
}

.account-hub__table-panel .actions .btn.icon,
.account-hub__cmd-panel .actions .btn.icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #dbe3ef;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 4px;
}

.account-hub__table-panel .actions .btn.icon:hover,
.account-hub__cmd-panel .actions .btn.icon:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.account-hub__table-panel .nav-pagination,
.account-hub__cmd-panel .nav-pagination {
  margin-top: 12px;
}

/* Hide legacy action-block inside account hub */
.account-hub .action-block {
  display: none !important;
}

/* Bootstrap select inside account */
.account-hub .bootstrap-select.open .dropdown-menu,
.account-hub .bootstrap-select.show .dropdown-menu {
  z-index: 1200 !important;
}

.account-hub .bootstrap-select .dropdown-menu {
  max-height: min(420px, 65vh);
  overflow-y: auto;
  border-radius: 10px;
  border: none !important;
}

.account-hub select.account-timezone-select + .bootstrap-select .dropdown-menu {
  min-width: max(100%, 420px);
}

.account-hub .bootstrap-select .dropdown-menu > li > a {
  white-space: normal;
  line-height: 1.45;
  padding-top: 8px;
  padding-bottom: 8px;
}

.account-hub .bootstrap-select .dropdown-menu .text {
  white-space: normal;
}

.account-hub .bootstrap-datetimepicker-widget {
  z-index: 1200 !important;
}

.account-hub__empty {
  padding: 40px 20px;
  text-align: center;
  color: #64748b;
}

/* Modernize GPRS template modals when account is open */
body.account-open #user_gprs_templates_create .modal-dialog,
body.account-open #user_gprs_templates_edit .modal-dialog,
body.account-open #user_gprs_templates_destroy .modal-dialog {
  max-width: 560px;
  margin: 40px auto;
}

body.account-open #user_gprs_templates_create .modal-content,
body.account-open #user_gprs_templates_edit .modal-content,
body.account-open #user_gprs_templates_destroy .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

body.account-open #user_gprs_templates_create .modal-header,
body.account-open #user_gprs_templates_edit .modal-header,
body.account-open #user_gprs_templates_destroy .modal-header {
  background: #fff;
  border-bottom: 1px solid #e6edf5;
  padding: 16px 20px;
}

body.account-open #user_gprs_templates_create .modal-header .modal-title,
body.account-open #user_gprs_templates_edit .modal-header .modal-title,
body.account-open #user_gprs_templates_destroy .modal-header .modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

body.account-open #user_gprs_templates_create .modal-header .close,
body.account-open #user_gprs_templates_edit .modal-header .close,
body.account-open #user_gprs_templates_destroy .modal-header .close {
  opacity: 0.55;
  font-size: 22px;
}

body.account-open #user_gprs_templates_create .modal-body,
body.account-open #user_gprs_templates_edit .modal-body,
body.account-open #user_gprs_templates_destroy .modal-body {
  padding: 18px 20px;
}

body.account-open #user_gprs_templates_create .modal-footer,
body.account-open #user_gprs_templates_edit .modal-footer,
body.account-open #user_gprs_templates_destroy .modal-footer {
  background: #f8fafc;
  border-top: 1px solid #e6edf5;
  padding: 12px 20px;
}

body.account-open #user_gprs_templates_create .modal-footer .btn,
body.account-open #user_gprs_templates_edit .modal-footer .btn,
body.account-open #user_gprs_templates_destroy .modal-footer .btn {
  border-radius: 10px;
  font-weight: 600;
  min-width: 90px;
}

body.account-open #user_gprs_templates_create .modal-footer .btn-action,
body.account-open #user_gprs_templates_edit .modal-footer .btn-action,
body.account-open #user_gprs_templates_destroy .modal-footer .btn-action {
  background: var(--primary, #1a6ed8);
  border-color: var(--primary, #1a6ed8);
}

@media (max-width: 900px) {
  .account-hub__layout {
    grid-template-columns: 1fr;
  }

  .account-hub__sidebar {
    position: static;
  }

  .account-hub__sidebar-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .account-hub {
    padding: 12px 14px 20px;
  }

  .account-hub__sidebar-list {
    grid-template-columns: 1fr;
  }

  .account-hub__table-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .account-hub__add-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Locked / no-permission states */
.account-hub__nav-item.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
  filter: grayscale(0.35);
}

.account-hub__nav-item.is-locked:hover,
.account-hub__nav-item.is-locked:focus {
  background: transparent;
  color: inherit;
}

.account-hub__nav-lock {
  margin-inline-start: auto;
  font-size: 11px;
  opacity: 0.8;
}

.account-hub__locked-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px dashed #d7e0ea;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
}

.account-hub__locked-note .fa-lock {
  color: #94a3b8;
}

.account-hub.is-demo-locked .account-hub__photo-block.is-locked,
.account-hub__photo-btn.is-locked,
.account-hub__form.is-locked,
.account-hub__gprs-templates.is-locked {
  opacity: 0.55;
  filter: grayscale(0.2);
}

.account-hub__photo-btn.is-locked {
  pointer-events: none;
  cursor: not-allowed;
}

.account-hub__save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== ats-ui/drivers.css ===== */
/* ==========================================================================
   Drivers dashboard (Saudi license cards)
   ========================================================================== */

.drivers-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f4f6f9);
  overflow: hidden;
}

.drivers-page.is-open {
  display: block;
}

body.drivers-open {
  overscroll-behavior: none;
}

body.drivers-open #map,
body.drivers-open #map-controls,
body.drivers-open #fleet-donut,
body.drivers-open #map-driver-license,
body.drivers-open #locate-card, body.drivers-open #locate-panel,
body.drivers-open #history-results-card, body.drivers-open #history-results-panel,
body.drivers-open #device-card, body.drivers-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

.drivers-page__content {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.drivers-page__content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.drivers-panel-open:has(#drivers-form-panel.is-open) .drivers-page__content,
body.drivers-card-open:has(#drivers-form-card.is-open) .drivers-page__content {
  overflow: hidden !important;
}

.drivers-dashboard {
  padding: 20px 24px 64px;
}

.drivers-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: #fff;
}

.drivers-hero__content h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.drivers-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 13px;
}

.drivers-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.drivers-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  white-space: nowrap;
}

.drivers-hero__btn small {
  opacity: 0.8;
  font-weight: 500;
}

.drivers-hero .drivers-hero__btn.btn-light,
.drivers-hero #drivers-add-btn {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.drivers-hero .drivers-hero__btn.btn-outline-light,
.drivers-hero #drivers-refresh-btn,
.drivers-hero #drivers-close-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.drivers-hero .drivers-hero__btn.btn-outline-light:hover,
.drivers-hero #drivers-refresh-btn:hover,
.drivers-hero #drivers-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.drivers-hero .drivers-hero__btn.btn-light:hover,
.drivers-hero #drivers-add-btn:hover {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.drivers-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.drivers-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.drivers-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.drivers-stat-card__icon--assigned {
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
}

.drivers-stat-card__icon--expired {
  background: color-mix(in srgb, var(--destructive) 12%, white);
  color: var(--destructive);
}

.drivers-stat-card__icon--expiring {
  background: color-mix(in srgb, #f59e0b 14%, white);
  color: #d97706;
}

.drivers-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.drivers-stat-card__label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.drivers-stat-card__hint {
  font-size: 11px;
  color: var(--secondary-foreground);
  margin-top: 4px;
}

.drivers-stat-card__hint--danger {
  color: var(--destructive);
}

.drivers-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: visible;
  position: relative;
}

.drivers-table-panel__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  background: var(--card);
}

.drivers-table-panel__head h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.drivers-table-panel__tools {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.drivers-search {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.drivers-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.drivers-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background, #f8fafc);
  color: var(--secondary-foreground);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.drivers-filter.is-active {
  background: color-mix(in srgb, var(--primary) 10%, white);
  border-color: color-mix(in srgb, var(--primary) 35%, white);
  color: var(--primary);
}

.drivers-filter__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15, 25, 35, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.drivers-filter--expired.is-active .drivers-filter__count {
  background: color-mix(in srgb, var(--destructive) 15%, white);
  color: var(--destructive);
}

.drivers-filter--expiring.is-active .drivers-filter__count {
  background: color-mix(in srgb, #f59e0b 18%, white);
  color: #d97706;
}

.drivers-table-panel__body {
  padding: 18px;
  overflow: visible;
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

.drivers-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.drivers-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--secondary-foreground);
}

.drivers-empty i {
  font-size: 42px;
  margin-bottom: 12px;
  opacity: 0.35;
}

.drivers-pagination {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Saudi driving license — compact landscape card */
.sa-license-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 25, 35, 0.06);
}

.sa-license-card--expired {
  border-color: color-mix(in srgb, var(--destructive) 35%, var(--border));
}

.sa-license-card--expiring {
  border-color: color-mix(in srgb, #f59e0b 40%, var(--border));
}

.sa-license-card__face-wrap {
  padding: 10px 12px 8px;
  background: var(--background, #f8fafc);
  display: flex;
  justify-content: center;
}

.sa-license-face {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(135deg, #eef8ef 0%, #e3f3f0 40%, #ebe8f4 100%);
  color: #1a1a1a;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sa-license-face__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 90, 70, 0.022) 2px, rgba(0, 90, 70, 0.022) 5px),
    repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(80, 60, 120, 0.018) 4px, rgba(80, 60, 120, 0.018) 8px);
  pointer-events: none;
}

.sa-license-face__watermark {
  position: absolute;
  inset: 22% 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 100, 80, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.sa-license-face__status {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 3;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
}

.sa-license-face__status--expired { background: #c62828; }
.sa-license-face__status--expiring { background: #e65100; }

.sa-license-face__header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 7px 10px 5px;
}

.sa-license-face__header-en,
.sa-license-face__header-ar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 6.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.15px;
}

.sa-license-face__header-en { text-align: start; }
.sa-license-face__header-ar {
  text-align: end;
  direction: rtl;
}

.sa-license-face__title-box {
  border: 1.5px solid #1a1a1a;
  padding: 2px 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.sa-license-face__title-ar {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  direction: rtl;
}

.sa-license-face__title-en {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-top: 1px;
}

.sa-license-face__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  padding: 2px 10px 22px;
  align-items: start;
}

.sa-license-face__photo-frame {
  width: 68px;
  height: 84px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sa-license-face__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sa-license-face__photo-placeholder {
  color: #c5c5c5;
  font-size: 20px;
}

.sa-license-face__photo-upload {
  cursor: pointer;
  display: block;
}

.sa-license-face__fields {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sa-license-face__name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.sa-license-face__name-en {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-license-face__name-ar {
  font-size: 11px;
  font-weight: 700;
  direction: rtl;
  text-align: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-license-face__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sa-license-face__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 13px;
  line-height: 1.2;
}

.sa-license-face__row--meta {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.sa-license-face__row--phone {
  justify-items: center;
  grid-template-columns: auto auto;
  gap: 6px;
  margin-top: 2px;
  padding-top: 2px;
}

.sa-license-face__meta-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  direction: rtl;
}

.sa-license-face__val-en {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-license-face__val-ar,
.sa-license-face__label-ar {
  direction: rtl;
  text-align: end;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}

.sa-license-face__label-ar {
  font-size: 8px;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}

.sa-license-face__val-ar {
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-license-face__phone {
  font-size: 8.5px;
  font-weight: 600;
  direction: ltr;
}

.sa-license-face__barcode {
  position: absolute;
  bottom: 6px;
  inset-inline-end: 10px;
  width: 78px;
  height: 16px;
  background:
    repeating-linear-gradient(
      90deg,
      #111 0, #111 1.5px, #fff 1.5px, #fff 2.5px,
      #111 2.5px, #111 3.5px, #fff 3.5px, #fff 5px,
      #111 5px, #111 6px, #fff 6px, #fff 7px,
      #111 7px, #111 8.5px, #fff 8.5px, #fff 9.5px,
      #111 9.5px, #111 11px, #fff 11px, #fff 12px,
      #111 12px, #111 13px, #fff 13px, #fff 14px,
      #111 14px, #111 100%
    );
  opacity: 0.8;
  z-index: 1;
}

.sa-license-face--preview {
  max-width: 100%;
}

.sa-license-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--background, #f8fafc);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.sa-license-card__vehicle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
  color: var(--foreground);
}

.sa-license-card__vehicle-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--border);
  color: var(--secondary-foreground);
}

.sa-license-card__vehicle-status.is-assigned {
  background: color-mix(in srgb, var(--primary) 15%, white);
  color: var(--primary);
}

.sa-license-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sa-license-card__assign-select {
  width: 130px !important;
  height: 28px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
}

/* Form panel — slide-over (same pattern as expenses/maintenance) */
body.drivers-open .drivers-page .maintenance-schedule-panel.is-open,
body.drivers-open .drivers-page .maintenance-schedule-card.is-open {
  position: fixed;
  top: 56px;
  left: 0;
  right: calc(var(--rail-width, 210px) + var(--sidebar-w, 300px));
  bottom: 0;
  z-index: 1045;
  pointer-events: auto;
}

body.drivers-open:has(#sidebar.collapsed) .drivers-page .maintenance-schedule-panel.is-open,
body.drivers-open:has(#sidebar.collapsed) .drivers-page .maintenance-schedule-card.is-open {
  right: var(--rail-width, 210px);
}


.drivers-add-panel__header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, white), var(--card));
}

.drivers-add-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, white), color-mix(in srgb, var(--primary) 4%, white));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, white);
}

.drivers-add-hero__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.drivers-add-hero__text strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.drivers-add-hero__text span {
  font-size: 12px;
  color: var(--secondary-foreground);
}

.sa-license-face__row--nationality {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  direction: rtl;
  justify-content: flex-end;
}

.drivers-form-preview {
  margin-bottom: 14px;
  padding: 8px;
  background: var(--background, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: visible;
}

.drivers-form-preview .sa-license-face {
  margin: 0 auto;
}

.drivers-form .bootstrap-select {
  width: 100% !important;
}

.drivers-form .bootstrap-select > .dropdown-toggle {
  min-height: 34px;
}

.drivers-form .maintenance-schedule-field {
  margin-bottom: 0;
}

.drivers-form .expenses-form__row {
  margin: 0 0 14px;
}

.drivers-form .expenses-form__row .maintenance-schedule-field {
  margin-bottom: 0;
}

@media (max-width: 580px) {
  .drivers-cards-grid {
    grid-template-columns: 1fr;
  }

  .sa-license-face {
    max-width: 100%;
  }

  .sa-license-face__main {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 8px;
  }

  .sa-license-face__photo-frame {
    width: 58px;
    height: 72px;
  }

  .sa-license-face__header {
    gap: 4px;
    padding-inline: 8px;
  }

  .sa-license-face__header-en,
  .sa-license-face__header-ar {
    font-size: 6px;
  }

  .sa-license-face__title-ar {
    font-size: 9px;
  }
}

@media (max-width: 520px) {
  .drivers-form .expenses-form__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .drivers-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .drivers-cards-grid {
    grid-template-columns: 1fr;
  }

  .drivers-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===== ats-ui/dashboard.css ===== */
/* ==========================================================================
   Fleet command dashboard
   ========================================================================== */

.dashboard-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #eef2f7);
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: none;
  pointer-events: none;
  visibility: hidden;
  isolation: isolate;
}

.dashboard-page.is-open {
  display: block;
  pointer-events: auto;
  visibility: visible;
}

/* Never keep dashboard visible when another section is active / body flag off */
body:not(.dashboard-open) #dashboard_page,
body:not(.dashboard-open) .dashboard-page,
body.vehicle-logs-open #dashboard_page,
body.reports-open #dashboard_page,
body.maintenance-open #dashboard_page,
body.expenses-open #dashboard_page,
body.logistics-open #dashboard_page,
body.drivers-open #dashboard_page,
body.geographic-open #dashboard_page,
body.dash-cam-open #dashboard_page,
body.sharing-open #dashboard_page,
body.account-open #dashboard_page {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Full-bleed cover over the map — must sit above fixed Bootstrap toolstrips */
body.dashboard-open #mapWrap > #dashboard_page.dashboard-page.is-open {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  z-index: 2200 !important;
  background: var(--background, #eef2f7) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  isolation: isolate;
}

body.dashboard-open #sidebar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dashboard-page__content {
  height: 100%;
  max-height: 100%;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--background, #eef2f7);
}

/* Kill Bootstrap map chrome + floating widgets while dashboard owns the screen */
body.dashboard-open #map,
body.dashboard-open #map-controls,
body.dashboard-open #map-type-controls,
body.dashboard-open #fleet-donut,
body.dashboard-open .fleet-donut,
body.dashboard-open #map-driver-license,
body.dashboard-open #locate-card,
body.dashboard-open #locate-panel,
body.dashboard-open #history-results-card,
body.dashboard-open #history-results-panel,
body.dashboard-open #device-card,
body.dashboard-open #device-panel,
body.dashboard-open .fleetoo-left-column,
body.dashboard-open .map-left-float-stack,
body.dashboard-open .map-gprs-controls {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.dashboard-open #mapWrap > #map {
  display: none !important;
  pointer-events: none !important;
}

.dashboard-modal .modal-content,
.dashboard-page .fleet-dashboard {
  background: var(--background, #eef2f7);
}

.dashboard-modal__body,
.dashboard-page {
  padding: 0;
}

.dashboard-modal__body-inner,
.dashboard-page #fleet_dashboard {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
}

.fleet-dashboard {
  padding: 20px 24px 48px;
}

/* Hero */
.fleet-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
    linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, #1e3a8a) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.fleet-hero__main {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.fleet-hero__date {
  font-size: 12px;
  opacity: 0.92;
  margin-bottom: 4px;
}

.fleet-hero__clock {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.fleet-hero__greeting {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.fleet-hero__subtitle {
  font-size: 13px;
  opacity: 0.88;
}

.fleet-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.fleet-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.fleet-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.fleet-hero__pill i {
  font-size: 8px;
}

.fleet-hero__pill--success i { color: color-mix(in srgb, var(--primary) 55%, white); }
.fleet-hero__pill--info i { color: rgba(255, 255, 255, 0.92); }
.fleet-hero__pill--muted i { color: #cbd5e1; }
.fleet-hero__pill--warning i { color: #fde047; }

.fleet-hero__pill--info {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(147, 197, 253, 0.35);
}

.fleet-hero__pill--muted {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.fleet-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.fleet-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.fleet-hero__btn.btn-light {
  color: var(--primary) !important;
}

.fleet-hero__btn.btn-outline-light {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Stats grid */
.fleet-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.fleet-stats--monitor {
  margin-bottom: 12px;
}

.fleet-stat-card--compact {
  min-height: 108px;
  padding-top: 14px;
}

.fleet-stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 2px rgba(15, 25, 35, 0.04);
  min-height: 132px;
}

.fleet-stat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  min-height: 36px;
}

.fleet-stat-card__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.fleet-stat-card__badge--up {
  color: var(--primary-active);
  background: color-mix(in srgb, var(--primary) 12%, white);
}

.fleet-stat-card__badge--down {
  color: #b91c1c;
  background: #fee2e2;
}

.fleet-stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.fleet-stat-card__icon--blue,
.fleet-stat-card__icon--cyan {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}
.fleet-stat-card__icon--green { background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary); }
.fleet-stat-card__icon--purple { background: #ede9fe; color: #7c3aed; }
.fleet-stat-card__icon--red { background: #fee2e2; color: #dc2626; }
.fleet-stat-card__icon--yellow { background: #fef3c7; color: #d97706; }

.fleet-stat-card__value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--foreground);
  margin-bottom: 4px;
}

.fleet-stat-card__value small {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.65;
}

.fleet-stat-card__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 2px;
}

.fleet-stat-card__hint {
  font-size: 11px;
  color: color-mix(in srgb, var(--foreground) 55%, #64748b);
  line-height: 1.4;
}

/* Panels (fleet-panel = card shell in dashboard blade) */
.fleet-panel,
.fleet-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 25, 35, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.fleet-panel--wide {
  min-width: 0;
}

.fleet-charts-row,
.fleet-panels-row,
.fleet-monitor-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.fleet-monitor-row {
  grid-template-columns: 1fr 1.65fr;
  align-items: stretch;
}

.fleet-panel--alerts .fleet-alert-list,
.fleet-panel--live .fleet-table-wrap,
.fleet-panels-row .fleet-driver-list,
.fleet-panel--table .fleet-table-wrap,
.fleet-card--alerts .fleet-alert-list,
.fleet-card--live .fleet-table-wrap,
.fleet-card--table .fleet-table-wrap {
  min-height: 360px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.fleet-charts-row {
  grid-template-columns: 1.4fr 1fr;
}

.fleet-panels-row {
  grid-template-columns: 1.15fr 1fr;
}

.fleet-panel > .fleet-panel__head,
.fleet-card > .fleet-panel__head {
  flex-shrink: 0;
}

.fleet-panel > .fleet-panel__body,
.fleet-panel > .fleet-table-wrap,
.fleet-card > .fleet-panel__body,
.fleet-card > .fleet-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.fleet-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.fleet-panel__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fleet-panel__head p {
  margin: 2px 0 0;
  font-size: 11px;
  color: color-mix(in srgb, var(--foreground) 55%, #64748b);
}

.fleet-panel__link {
  font-size: 12px;
  font-weight: 600;
  color: #1a6ed8 !important;
  white-space: nowrap;
  text-decoration: none;
}

.fleet-panel__link:hover,
.fleet-panel__link:focus {
  color: #1a6ed8 !important;
  text-decoration: none;
  opacity: 0.88;
}

.fleet-panel__unit {
  font-size: 11px;
  color: color-mix(in srgb, var(--foreground) 55%, #64748b);
}

.fleet-panel__body {
  padding: 16px 18px 18px;
}

.fleet-chart {
  width: 100%;
  height: 240px;
}

.fleet-chart--bar {
  height: 220px;
}

/* Gauges */
.fleet-gauges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.fleet-gauge {
  text-align: center;
}

.fleet-gauge__arc {
  position: relative;
  max-width: 140px;
  margin: 0 auto 6px;
}

.fleet-gauge__svg {
  width: 100%;
  height: auto;
  display: block;
}

.fleet-gauge__track,
.fleet-gauge__fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

.fleet-gauge__track {
  stroke: #e5e7eb;
}

.fleet-gauge__fill {
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  transition: stroke-dashoffset 0.6s ease;
}

.fleet-gauge__value {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 800;
  color: var(--foreground);
}

.fleet-gauge__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 70%, #64748b);
}

/* Driver list */
.fleet-driver-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fleet-driver-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
}

.fleet-driver-row__rank {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--foreground) 65%, #64748b);
}

.fleet-driver-row__name {
  font-size: 13px;
  font-weight: 700;
}

.fleet-driver-row__meta {
  font-size: 11px;
  color: color-mix(in srgb, var(--foreground) 55%, #64748b);
  margin-bottom: 4px;
}

.fleet-driver-row__bar {
  height: 6px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.fleet-driver-row__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.fleet-driver-row__score {
  font-size: 13px;
  font-weight: 800;
  min-width: 28px;
  text-align: end;
}

/* Alerts */
.fleet-alert-list {
  display: flex;
  flex-direction: column;
}

.fleet-alert-row {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.fleet-alert-row:last-child {
  border-bottom: 0;
}

.fleet-alert-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 13px;
}

.fleet-alert-row__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.fleet-alert-row__time {
  font-size: 11px;
  color: color-mix(in srgb, var(--foreground) 55%, #64748b);
  margin-top: 2px;
}

/* Table */
.fleet-table-wrap {
  overflow-x: auto;
}

.fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.fleet-table thead th {
  text-align: start;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--foreground) 60%, #64748b);
  background: color-mix(in srgb, var(--muted, #f1f5f9) 55%, white);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.fleet-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  vertical-align: middle;
}

.fleet-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.fleet-status--moving,
.fleet-status--online { background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary-active); }
.fleet-status--stopped,
.fleet-status--ack { background: #fef3c7; color: #b45309; }
.fleet-status--offline { background: #fee2e2; color: #b91c1c; }
.fleet-status--engine { background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); }
.fleet-status--idle { background: #f1f5f9; color: #64748b; }

.fleet-table--compact td,
.fleet-table--compact th {
  padding: 12px 14px;
  font-size: 12px;
}

.fleet-panel--live .fleet-table-wrap,
.fleet-panel--table .fleet-table-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.fleet-panel--live .fleet-table-wrap .fleet-table thead th:first-child,
.fleet-panel--live .fleet-table-wrap .fleet-table tbody td:first-child,
.fleet-panel--table .fleet-table-wrap .fleet-table thead th:first-child,
.fleet-panel--table .fleet-table-wrap .fleet-table tbody td:first-child {
  padding-inline-start: 18px;
}

.fleet-panel--live .fleet-table-wrap .fleet-table thead th:last-child,
.fleet-panel--live .fleet-table-wrap .fleet-table tbody td:last-child,
.fleet-panel--table .fleet-table-wrap .fleet-table thead th:last-child,
.fleet-panel--table .fleet-table-wrap .fleet-table tbody td:last-child {
  padding-inline-end: 18px;
}

.fleet-empty {
  text-align: center;
  padding: 32px 16px;
  color: color-mix(in srgb, var(--foreground) 55%, #64748b);
  font-size: 12px;
}

.fleet-panel--alerts .fleet-alert-list .fleet-empty,
.fleet-panels-row .fleet-driver-list .fleet-empty {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal overrides */
#dashboard.dashboard-modal .modal-dialog {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
}

#dashboard.dashboard-modal .modal-content {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
}

#dashboard.dashboard-modal .modal-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

#dashboard.dashboard-modal .modal-body {
  padding: 0;
  overflow-y: auto;
  max-height: calc(100vh - 56px);
}

@media (max-width: 1100px) {
  .fleet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-charts-row,
  .fleet-panels-row,
  .fleet-monitor-row { grid-template-columns: 1fr; }
  .fleet-hero { flex-direction: column; }
  .fleet-hero__side { align-items: flex-start; width: 100%; }
}

@media (max-width: 640px) {
  .fleet-stats { grid-template-columns: 1fr; }
  .fleet-hero__main { flex-direction: column; gap: 12px; }
  .fleet-hero__clock { font-size: 28px; }
}

/* ===== ats-ui/dash-cam.css ===== */
/* ==========================================================================
   Dash Cam — full-screen live video wall (Jimi-style layout)
   ========================================================================== */

.dash-cam-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 655;
  background: var(--background, #eef1f5);
  overflow: hidden;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}

.dash-cam-page.is-open {
  display: block;
  pointer-events: auto;
  visibility: visible;
}

.dash-cam-page__content {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow: hidden;
}

body.dash-cam-open {
  overscroll-behavior: none;
}

body.dash-cam-open #dashboard_page,
body.dash-cam-open #maintenance_page,
body.dash-cam-open #expenses_page,
body.dash-cam-open #logistics_page,
body.dash-cam-open #reports_page,
body.dash-cam-open #drivers_page,
body.dash-cam-open #geographic_page,
body.dash-cam-open #account_page {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.dash-cam-open #map,
body.dash-cam-open #map-controls,
body.dash-cam-open #fleet-donut,
body.dash-cam-open #map-driver-license,
body.dash-cam-open #locate-card, body.dash-cam-open #locate-panel,
body.dash-cam-open #history-results-card, body.dash-cam-open #history-results-panel,
body.dash-cam-open #device-card, body.dash-cam-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

.dash-cam-page .loading {
  z-index: 5;
}

.dash-cam-page .loading .backdrop {
  background: rgba(255, 255, 255, 0.55);
}

/* Shell layout */
.dash-cam-dashboard,
.dash-cam-shell {
  height: 100%;
  min-height: 0;
}

.dash-cam-shell {
  display: flex;
  min-height: 0;
}

#dash-cam-sidebar.dash-cam-devices-card {
  height: 100%;
  min-height: 0;
}

/* Navigation rail */
.dash-cam-nav {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  background: #fff;
  border-inline-end: 1px solid #e2e8f0;
}

.dash-cam-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  min-height: 64px;
  padding: 8px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.dash-cam-nav__item i {
  font-size: 20px;
}

.dash-cam-nav__item:hover {
  background: #f1f5f9;
  color: #334155;
}

.dash-cam-nav__item.is-active {
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--primary);
}

.dash-cam-nav__item--bottom {
  margin-top: auto;
}

/* Device panel */
.dash-cam-devices-card {
  flex: 0 0 320px;
  max-width: 36vw;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-inline-end: 1px solid #e2e8f0;
}

.dash-cam-devices-panel__search {
  padding: 12px 12px 8px;
}

.dash-cam-search-input:not(.ats-search__input) {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  background: #f8fafc;
  color: #334155;
}

.dash-cam-search-input:not(.ats-search__input):focus {
  outline: none;
  border-color: var(--primary, #1a6ed8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1a6ed8) 15%, transparent);
}

.dash-cam-devices-panel__actions {
  padding: 0 12px 8px;
}

.dash-cam-add-group-btn {
  width: 100%;
  border-radius: 6px !important;
}

.dash-cam-devices-panel__filters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px 10px;
  border-bottom: 1px solid #f1f5f9;
}

.dash-cam-filter,
.dash-cam-settings-filter {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.dash-cam-filter:hover,
.dash-cam-settings-filter:hover {
  background: #f8fafc;
}

.dash-cam-settings-filter.is-active,
.dash-cam-filter.is-active {
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  color: var(--primary);
}

.dash-cam-filter__icon--online {
  color: var(--primary);
}

.dash-cam-filter__icon--favorite {
  color: #ef4444;
}

.dash-cam-group {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-cam-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: start;
}

.dash-cam-group__chevron {
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.2s;
}

.dash-cam-group.is-collapsed .dash-cam-group__chevron {
  transform: rotate(-90deg);
}

.dash-cam-group__count {
  color: #64748b;
  font-weight: 500;
}

.dash-cam-group__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dash-cam-group.is-collapsed .dash-cam-group__body {
  display: none;
}

/* Device rows */
.dash-cam-device-list {
  padding: 4px 0;
}

.dash-cam-device {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  transition: background 0.15s;
}

.dash-cam-device:hover {
  background: #f8fafc;
}

.dash-cam-device.is-selected {
  background: #eff6ff;
}

.dash-cam-device__status {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--status-color, #94a3b8);
  color: #fff;
  font-size: 14px;
}

.dash-cam-device__info {
  flex: 1;
  min-width: 0;
}

.dash-cam-device__name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-cam-device__time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.dash-cam-device__meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.dash-cam-device__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.7;
}

.dash-cam-device:hover .dash-cam-device__actions {
  opacity: 1;
}

.dash-cam-device__action {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.dash-cam-device__action:hover {
  background: #e2e8f0;
  color: #334155;
}

.dash-cam-device__action.is-active {
  color: #ef4444;
}

.dash-cam-no-devices {
  padding: 24px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

.dash-cam-pagination {
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
}

.dash-cam-pagination .pagination {
  margin: 0;
}

/* Main video area */
.dash-cam-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #eef1f5;
}

.dash-cam-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.dash-cam-toolbar__left,
.dash-cam-toolbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-cam-toolbar__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

.dash-cam-select {
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #334155;
}

.dash-cam-toolbar__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}

.dash-cam-switch-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  min-width: 28px;
  transition: color 0.2s ease;
}

.dash-cam-switch-label.is-on {
  color: var(--primary);
}

.dash-cam-no-devices .js-dash-cam-reload {
  margin-top: 12px;
}

.dash-cam-grid-picker {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: #f1f5f9;
  border-radius: 6px;
}

.dash-cam-grid-btn,
.dash-cam-tool-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
}

.dash-cam-grid-btn:hover,
.dash-cam-tool-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

.dash-cam-grid-btn.is-active {
  background: var(--primary);
  color: #fff;
}

/* Video grid */
.dash-cam-grid-wrap {
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.dash-cam-grid-wrap:fullscreen {
  padding: 0;
  background: #0f172a;
}

.dash-cam-grid-wrap:fullscreen .dash-cam-grid {
  gap: 2px;
  padding: 2px;
  height: 100%;
}

.dash-cam-grid {
  display: grid;
  gap: 8px;
  height: 100%;
  min-height: 300px;
}

.dash-cam-grid--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dash-cam-grid--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dash-cam-grid--3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.dash-cam-grid--4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }

.dash-cam-slot {
  position: relative;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-cam-slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  min-height: 28px;
  z-index: 2;
}

.dash-cam-slot__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-cam-slot__remove {
  color: #fff;
  opacity: 0.85;
  cursor: pointer;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.dash-cam-slot__remove:hover {
  opacity: 1;
}

.dash-cam-slot__body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #1e293b;
}

.dash-cam-slot__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

.dash-cam-slot__placeholder i {
  font-size: 48px;
  opacity: 0.35;
}

.dash-cam-slot__body img.dash-cam-snapshot-img,
.dash-cam-slot__body video.dash-cam-live-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.dash-cam-slot.is-paused video {
  filter: brightness(0.5);
}

/* RTL adjustments */
[dir="rtl"] .dash-cam-group__chevron {
  transform: rotate(0);
}

[dir="rtl"] .dash-cam-group.is-collapsed .dash-cam-group__chevron {
  transform: rotate(90deg);
}

@media (max-width: 900px) {
  .dash-cam-devices-card {
    flex: 0 0 260px;
  }

  .dash-cam-nav {
    flex: 0 0 56px;
  }

  .dash-cam-nav__item {
    width: 48px;
    min-height: 52px;
    font-size: 10px;
  }

  .dash-cam-nav__item span {
    display: none;
  }
}

@media (max-width: 640px) {
  .dash-cam-shell {
    flex-direction: column;
  }

  .dash-cam-nav {
    flex-direction: row;
    flex: 0 0 auto;
    width: 100%;
    padding: 8px;
    overflow-x: auto;
  }

  .dash-cam-nav__item--bottom {
    margin-top: 0;
    margin-inline-start: auto;
  }

  .dash-cam-devices-card {
    flex: 0 0 200px;
    max-width: none;
    width: 100%;
  }
}

/* Tab panels */
.dash-cam-card {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-cam-card[hidden] {
  display: none !important;
}

.dash-cam-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.dash-cam-card-tabs {
  display: flex;
  gap: 4px;
}

.dash-cam-card-tab {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
}

.dash-cam-card-tab.is-active {
  background: var(--primary);
  color: #fff;
}

.dash-cam-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #eef1f5;
}

/* Sidebar panels */
.dash-cam-sidebar-card[hidden] {
  display: none !important;
}

.dash-cam-sidebar-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dash-cam-filter-form {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.dash-cam-filter-form__field {
  margin-bottom: 12px;
}

.dash-cam-filter-form__field label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.dash-cam-select--block {
  width: 100%;
}

.dash-cam-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-cam-date-range__sep {
  color: #94a3b8;
}

.dash-cam-filter-form__quick {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.dash-cam-quick-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}

.dash-cam-quick-btn:hover {
  background: #f8fafc;
}

.dash-cam-filter-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-cam-search-btn {
  flex: 1;
  border-radius: 6px !important;
}

.dash-cam-reset-btn {
  padding: 0;
  font-size: 13px;
}

/* Empty state */
.dash-cam-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 40px 24px;
  text-align: center;
}

.dash-cam-empty__illus {
  position: relative;
  width: 200px;
  height: 140px;
  margin-bottom: 20px;
}

.dash-cam-empty__icon-main {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  font-size: 72px;
  color: #cbd5e1;
}

.dash-cam-empty__icon-reel {
  position: absolute;
  right: 20px;
  top: 0;
  font-size: 36px;
  color: #e2e8f0;
}

.dash-cam-empty__icon-user {
  position: absolute;
  left: 10px;
  bottom: 0;
  font-size: 48px;
  color: #e2e8f0;
}

.dash-cam-empty__text {
  font-size: 14px;
  color: #64748b;
  max-width: 360px;
}

/* Events grid */
.dash-cam-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.dash-cam-event-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.dash-cam-event-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.dash-cam-event-card__thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  border-radius: 8px;
  color: var(--primary);
  font-size: 20px;
}

.dash-cam-event-card__body {
  flex: 1;
  min-width: 0;
}

.dash-cam-event-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.dash-cam-event-card__device,
.dash-cam-event-card__time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.dash-cam-event-card__msg {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.dash-cam-event-card__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.dash-cam-event-card__link {
  color: #1a6ed8 !important;
  font-size: 22px;
}

/* History player */
.dash-cam-history-player {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #eef1f5;
}

.dash-cam-history-player__screen {
  flex: 1;
  min-height: 280px;
  margin: 12px;
  background: #1e293b;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.dash-cam-history-video,
.dash-cam-history-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.dash-cam-history-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #334155;
  color: #e2e8f0;
  font-size: 13px;
}

.dash-cam-history-controls label {
  margin: 0 8px 0 0;
  font-weight: normal;
}

.dash-cam-history-controls__left,
.dash-cam-history-controls__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-cam-history-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 4px;
  background: #475569;
}

.dash-cam-timeline-nav {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
}

.dash-cam-timeline-track {
  flex: 1;
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 11px;
  overflow-x: auto;
}

.dash-cam-timeline-mark {
  white-space: nowrap;
}

.dash-cam-history-segments {
  position: relative;
  height: 32px;
  margin: 0 12px 12px;
  background: #64748b;
  border-radius: 0 0 4px 4px;
}

.dash-cam-history-segment {
  position: absolute;
  top: 4px;
  width: 8px;
  height: 24px;
  border: none;
  border-radius: 2px;
  background: var(--primary);
  cursor: pointer;
  padding: 0;
  transform: translateX(-50%);
}

.dash-cam-history-segment:hover {
  background: #60a5fa;
}

/* Settings */
.dash-cam-settings-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.dash-cam-settings-sidebar__head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.dash-cam-device-list--settings .dash-cam-device__check {
  flex: 0 0 24px;
  margin-top: 8px;
}

.dash-cam-settings-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-cam-settings-detail {
  max-width: 480px;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  text-align: center;
}

.dash-cam-settings-detail h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.dash-cam-settings-detail p {
  color: #64748b;
  margin-bottom: 20px;
}

.dash-cam-settings-detail__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== ats-ui/devices.css ===== */
/* ==========================================================================
   Device create — full in-map page (same pattern as maintenance / drivers)
   ========================================================================== */

.device-create-fullpage {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f4f6f9);
  overflow: hidden;
  pointer-events: auto;
}

.device-create-fullpage.is-open {
  display: block;
}

.device-create-fullpage__content {
  height: 100%;
  max-height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.device-create-open {
  overscroll-behavior: none;
  --device-accent: var(--primary, #1a6ed8);
  --device-accent-dark: var(--primary-hover, #1559b3);
  --device-accent-soft: color-mix(in srgb, var(--primary, #1a6ed8) 12%, #ffffff);
  --device-line: var(--border, #c1c7c9);
}

body.device-create-open #map,
body.device-create-open #map-controls,
body.device-create-open #fleet-donut,
body.device-create-open #map-driver-license,
body.device-create-open #locate-card, body.device-create-open #locate-panel,
body.device-create-open #history-results-card, body.device-create-open #history-results-panel,
body.device-create-open #device-card, body.device-create-open #device-panel,
body.device-create-open .leaflet-container {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   Device create wizard (platform primary accents)
   -------------------------------------------------------------------------- */

.device-create-dashboard {
  padding: 12px 16px 16px;
}

.device-create-dashboard.device-create-wizard {
  padding: 12px 16px 16px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.device-create-wizard {
  --device-accent: var(--primary, #1a6ed8);
  --device-accent-dark: var(--primary-hover, #1559b3);
  --device-accent-soft: color-mix(in srgb, var(--primary, #1a6ed8) 12%, #ffffff);
  --device-muted: #73728d;
  --device-line: var(--border, #c1c7c9);
  --device-sheet-border: var(--border, #e5e7eb);
  --device-wizard-field-max: 240px;
}

.device-wizard-sheet {
  max-width: none;
  width: 100%;
  margin: 0;
  background: var(--card, #fff);
  border: 1px solid var(--device-sheet-border);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.06);
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.device-wizard-sheet__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.device-wizard-sheet__back {
  width: 40px;
  height: 40px;
  border: 1px solid var(--device-sheet-border);
  border-radius: 10px;
  background: #fff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.device-wizard-sheet__back:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.device-wizard-sheet__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.device-wizard-sheet__body {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.device-wizard-stepper {
  width: 168px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}

.device-wizard-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.device-wizard-stepper__list::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  inset-inline-start: 19px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    #d1d5db 0,
    #d1d5db 5px,
    transparent 5px,
    transparent 10px
  );
  z-index: 0;
}

.device-wizard-stepper__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: default;
  color: var(--device-muted);
}

.device-wizard-stepper__item.is-active,
.device-wizard-stepper__item.is-done {
  cursor: pointer;
  color: var(--device-accent);
}

.device-wizard-stepper__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.device-wizard-stepper__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.device-wizard-stepper__item.is-active .device-wizard-stepper__icon {
  border-color: var(--device-accent);
  background: var(--device-accent-soft);
  color: var(--device-accent);
}

.device-wizard-stepper__item.is-done .device-wizard-stepper__icon {
  border-color: var(--device-accent);
  background: var(--device-accent);
  color: #fff;
}

.device-wizard-stepper__item.is-done .device-wizard-stepper__icon i::before {
  content: '\f00c';
}

.device-wizard-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.device-wizard-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.device-wizard-main__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.device-wizard-card__title {
  display: none;
}

.device-wizard-subsection {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef1f4;
}

.device-wizard-subsection--sim {
  margin-top: 10px;
  padding-top: 10px;
}

.device-wizard-subsection--sim .device-wizard-subsection__title {
  margin-bottom: 10px;
}

.device-wizard-subsection:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.device-wizard-subsection__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.device-wizard-fields-grid {
  display: grid;
  gap: 14px 16px;
  width: 100%;
}

.device-wizard-fields-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.device-wizard-fields-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.device-wizard-fields-grid .form-group {
  margin-bottom: 0;
  max-width: none;
  width: 100%;
}

.device-wizard-fields-grid .form-group > label,
.device-wizard-fields-grid .form-group > .control-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.device-wizard-subsection--plate-fuel {
  padding-bottom: 4px;
}

.device-wizard-plate-fuel-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 24px;
  align-items: start;
}

.device-wizard-plate-fuel-row__plate .sa-plate__section-title {
  margin-bottom: 14px;
}

.device-wizard-plate-fuel-row__plate .sa-plate__layout {
  grid-template-columns: 1fr;
  gap: 14px;
}

.device-wizard-plate-fuel-row__plate .sa-plate__preview-wrap {
  justify-content: flex-end;
}

.device-wizard-plate-fuel-row__plate .sa-plate__side {
  padding-top: 0;
}

.device-wizard-fuel-panel .device-wizard-subsection__title {
  margin-bottom: 14px;
}

.device-wizard-fuel-panel__types {
  margin-bottom: 14px;
}

.device-wizard-fuel-panel__types > .control-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.device-wizard-fuel-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.device-wizard-fuel-type {
  margin: 0;
  cursor: pointer;
}

.device-wizard-fuel-type input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.device-wizard-fuel-type__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--device-line);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.device-wizard-fuel-type input:checked + .device-wizard-fuel-type__btn,
.device-wizard-fuel-type__btn:hover {
  border-color: var(--device-accent);
  background: var(--device-accent-soft);
  color: var(--device-accent-dark);
}

.device-wizard-fuel-type input:focus-visible + .device-wizard-fuel-type__btn {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--device-accent) 15%, transparent);
}

.device-wizard-fuel-fields__consumption {
  display: grid;
  gap: 12px;
}

.device-wizard-fuel-fields__consumption .form-group {
  margin-bottom: 0;
  max-width: none;
}

.device-wizard-fuel-fields__consumption .form-control,
.device-wizard-fuel-fields__consumption .bootstrap-select,
.device-wizard-fuel-fields__consumption .bootstrap-select > .dropdown-toggle {
  width: 100%;
  max-width: none;
}

.device-wizard-fuel-panel__electric-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.device-wizard-fuel-panel.is-electric .device-wizard-fuel-fields__consumption {
  display: none;
}

.device-wizard-subsection--plate {
  padding-bottom: 4px;
}

.device-wizard-subsection--plate .sa-plate__section-title {
  margin-bottom: 14px;
}

.device-create-wizard .bootstrap-select {
  width: 100% !important;
  max-width: 100%;
}

.device-create-wizard .bootstrap-select.form-control {
  padding: 0;
  height: auto;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.device-create-wizard .bootstrap-select.btn-group > .dropdown-toggle,
.device-create-wizard .bootstrap-select > .dropdown-toggle {
  position: relative;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 5px 10px !important;
  border-radius: 8px;
  border: 1px solid var(--device-line);
  background: #fff;
  font-size: 12px;
  line-height: 1.35;
  color: #111827;
  box-shadow: none;
  overflow: hidden;
  text-align: start;
  box-sizing: border-box;
}

.device-create-wizard .bootstrap-select.btn-group > .dropdown-toggle .filter-option,
.device-create-wizard .bootstrap-select > .dropdown-toggle .filter-option {
  display: block;
  flex: 1 1 auto;
  order: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start !important;
  float: none !important;
  width: auto !important;
  max-width: none;
  padding: 0 !important;
}

.device-create-wizard .bootstrap-select > .dropdown-toggle:focus,
.device-create-wizard .bootstrap-select.open > .dropdown-toggle,
.device-create-wizard .bootstrap-select > .dropdown-toggle:hover {
  border-color: var(--device-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--device-accent) 15%, transparent);
  outline: none;
  background: #fff !important;
  color: #111827 !important;
}

.device-create-wizard .bootstrap-select.btn-group > .dropdown-toggle .bs-caret,
.device-create-wizard .bootstrap-select > .dropdown-toggle .bs-caret {
  position: static !important;
  flex: 0 0 auto;
  order: 2;
  top: auto !important;
  inset: auto !important;
  inset-inline: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  float: none !important;
  width: 12px;
  height: 12px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  pointer-events: none;
}

[dir='rtl'] .device-create-wizard .bootstrap-select.btn-group > .dropdown-toggle,
[dir='rtl'] .device-create-wizard .bootstrap-select > .dropdown-toggle {
  flex-direction: row;
}

.device-create-wizard .bootstrap-select.btn-group > .dropdown-toggle .bs-caret .caret,
.device-create-wizard .bootstrap-select > .dropdown-toggle .bs-caret .caret,
.device-create-wizard .bootstrap-select.btn-group > .dropdown-toggle .caret,
.device-create-wizard .bootstrap-select > .dropdown-toggle .caret {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  vertical-align: middle;
}

.device-create-wizard .bootstrap-select .dropdown-menu,
body.device-create-open .bootstrap-select .dropdown-menu {
  z-index: 1300 !important;
  border-radius: 10px;
  border: none !important;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
  font-size: 12px;
  max-height: min(320px, 50vh);
  overflow-y: auto;
}

.device-create-wizard .bootstrap-select .dropdown-menu li a {
  padding: 7px 12px;
}

.device-wizard-fields-grid .form-control,
.device-wizard-fields-grid select.form-control,
.device-wizard-fields-grid .bootstrap-select,
.device-wizard-fields-grid .bootstrap-select > .dropdown-toggle {
  width: 100%;
  max-width: none;
}

/* Wide sheet, compact fixed-width inputs */
.device-wizard-main__content .row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, var(--device-wizard-field-max)));
  gap: 12px 16px;
  margin-left: 0;
  margin-right: 0;
  justify-content: start;
}

.device-wizard-main__content .row.device-wizard-row--3 {
  grid-template-columns: repeat(auto-fill, minmax(200px, var(--device-wizard-field-max)));
}

.device-wizard-main__content .row.device-wizard-row--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.device-wizard-main__content .row.device-wizard-row--5 .form-group {
  max-width: none;
}

.device-wizard-main__content .row.device-wizard-row--5 .form-control,
.device-wizard-main__content .row.device-wizard-row--5 select.form-control,
.device-wizard-main__content .row.device-wizard-row--5 .bootstrap-select,
.device-wizard-main__content .row.device-wizard-row--5 .bootstrap-select > .dropdown-toggle {
  max-width: none;
  width: 100%;
}

.device-wizard-main__content .row.device-wizard-row--5 .form-group > label,
.device-wizard-main__content .row.device-wizard-row--5 .form-group > .control-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-wizard-main__content .row.device-wizard-row--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}

.device-wizard-main__content .row.device-wizard-row--6 > [class*='col-'] {
  min-width: 0;
}

.device-wizard-main__content .row.device-wizard-row--6 .form-group {
  max-width: none;
  margin-bottom: 0;
}

.device-wizard-main__content .row.device-wizard-row--6 .form-control,
.device-wizard-main__content .row.device-wizard-row--6 select.form-control,
.device-wizard-main__content .row.device-wizard-row--6 .bootstrap-select,
.device-wizard-main__content .row.device-wizard-row--6 .bootstrap-select > .dropdown-toggle {
  max-width: none;
  width: 100%;
}

.device-wizard-main__content .row.device-wizard-row--6 .form-group > label,
.device-wizard-main__content .row.device-wizard-row--6 .form-group > .control-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  margin-bottom: 4px;
}

.device-wizard-main__content .row > [class*='col-'] {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  float: none;
}

.device-wizard-main__content .form-group {
  margin-bottom: 0;
  max-width: var(--device-wizard-field-max);
  width: 100%;
}

.device-wizard-main__content .form-group > label,
.device-wizard-main__content .form-group > .control-label,
.device-wizard-main__content .checkbox-inline,
.device-wizard-main__content .checkbox {
  margin-bottom: 4px;
}

input.device-imei-input,
input[name="imei"].form-control {
  direction: ltr;
  text-align: left;
}

.device-wizard-hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.device-wizard-summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--device-sheet-border);
  border-radius: 10px;
  background: #f9fafb;
}

.device-wizard-summary__media {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--device-sheet-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.device-wizard-summary__icon {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
}

.device-wizard-summary__icon--empty {
  font-size: 22px;
  color: #94a3b8;
}

.device-wizard-summary__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
}

.device-wizard-summary__label {
  display: block;
  font-size: 11px;
  color: var(--device-muted);
  margin-bottom: 2px;
}

.device-wizard-summary__value {
  display: block;
  font-size: 13px;
  color: #111827;
  font-weight: 600;
  word-break: break-word;
}

.device-wizard-vehicle-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 132px));
  gap: 10px;
  align-items: stretch;
  justify-content: start;
}

.device-wizard-vehicle-type {
  position: relative;
  margin: 0;
  cursor: pointer;
  width: auto;
  min-width: 0;
  display: block;
}

.device-wizard-vehicle-type input[type='radio'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.device-wizard-vehicle-type__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 132px;
  height: 100%;
  min-height: 76px;
  padding: 8px 6px 6px;
  border: 1px solid var(--device-line);
  border-radius: 10px;
  background: #fff;
  color: var(--device-muted);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.device-wizard-vehicle-type__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
}

.device-wizard-vehicle-type__icon img {
  width: auto;
  max-width: 100%;
  max-height: 34px;
  object-fit: contain;
}

.device-wizard-vehicle-type__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.device-wizard-vehicle-type input:checked + .device-wizard-vehicle-type__card,
.device-wizard-vehicle-type__card:hover {
  border-color: var(--device-accent);
  background: var(--device-accent-soft);
  color: var(--device-accent);
}

.device-wizard-vehicle-types.is-invalid .device-wizard-vehicle-type__card {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.device-wizard-sim-type-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.device-wizard-sim-types {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 148px;
}

.device-wizard-sim-type {
  margin: 0;
  cursor: pointer;
  min-width: 0;
  width: 100%;
}

.device-wizard-sim-type input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.device-wizard-sim-type__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 6px 10px;
  border: 1px solid var(--device-line);
  border-radius: 10px;
  background: #fff;
  color: var(--device-muted);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.device-wizard-sim-type__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 72px;
  min-height: 34px;
}

.device-wizard-sim-type__visual img {
  width: 72px;
  max-width: 72px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}

.device-wizard-sim-type__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: start;
  white-space: nowrap;
}

.device-wizard-sim-type input:checked + .device-wizard-sim-type__card,
.device-wizard-sim-type__card:hover {
  border-color: var(--device-accent);
  background: var(--device-accent-soft);
  color: var(--device-accent);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.device-wizard-sim-types.is-invalid .device-wizard-sim-type__card {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.device-wizard-sim-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.device-wizard-sim-preview-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.device-wizard-sim-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-wizard-sim-fields-stack .form-group {
  margin-bottom: 0;
}

.device-wizard-sim-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 12px;
  border: 1px dashed var(--device-line);
  border-radius: 14px;
  background: #f8fafc;
}

.device-wizard-sim-preview__card {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 240px;
  line-height: 0;
}

.device-wizard-sim-preview__image {
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16);
}

.device-wizard-sim-preview__serial {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  width: 78%;
  overflow: hidden;
  color: #ffffff;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(9px, 1.6vw, 13px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.device-wizard-sim-preview__serial:empty {
  display: none;
}

.device-sim-serial-input {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.4px;
}

[dir='ltr'] .device-wizard-sim-body {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

[dir='ltr'] .device-wizard-sim-body .device-wizard-sim-fields-stack {
  order: 2;
}

[dir='ltr'] .device-wizard-sim-body .device-wizard-sim-preview-area {
  order: 1;
}

.device-wizard-brand-field {
  margin-bottom: 0;
  width: 100%;
}

.device-wizard-brand-field .control-label,
.device-wizard-brand-field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.device-wizard-brand-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  min-height: 40px;
  height: auto;
  padding: 7px 12px;
  margin: 0;
  text-align: start;
  background: #fff;
  border: 1px solid var(--device-line);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.device-wizard-brand-trigger:hover {
  border-color: color-mix(in srgb, var(--device-accent) 45%, var(--device-line));
  background: #fbfdff;
}

.device-wizard-brand-trigger:focus {
  outline: none;
  border-color: var(--device-accent);
  box-shadow: 0 0 0 3px var(--device-accent-soft);
}

.device-wizard-brand-trigger.is-empty .device-wizard-brand-trigger__label {
  color: #94a3b8;
  font-weight: 400;
}

.device-wizard-brand-trigger.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.sa-plate__slot-input.is-invalid,
.sa-plate__region-input.is-invalid {
  box-shadow: inset 0 0 0 2px #dc2626;
}

.device-wizard-main__content .form-group.device-expiration-field {
  max-width: none;
  width: 100%;
}

.device-expiration-field__control {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.device-expiration-field__input {
  flex: 0 0 auto;
  width: auto;
  max-width: var(--device-wizard-field-max, 240px);
}

.device-create-wizard .device-expiration-field .input-group {
  display: table;
  width: 100%;
  max-width: var(--device-wizard-field-max, 240px);
}

.device-create-wizard .device-expiration-field .input-group .form-control {
  max-width: none;
  width: 100%;
  height: 32px;
  min-height: 32px;
  border-radius: 0;
}

.device-expiration-field__input > .input-group-btn {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
  white-space: nowrap;
}

.device-expiration-field__input > .input-group-btn .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 32px;
  padding: 0 10px;
  background: #f9f9f9;
  border: 1px solid var(--device-line, #c1c7c9);
  border-radius: 8px 0 0 8px;
}

html[dir="rtl"] .device-expiration-field__input > .input-group-btn .checkbox {
  border-radius: 0 8px 8px 0;
}

.device-expiration-field__input > .input-group-btn .checkbox label {
  margin: 0;
  padding: 0;
}

.device-expiration-field__input .form-control {
  display: table-cell;
  width: 100%;
  height: 32px;
  min-height: 32px;
  border-radius: 0 8px 8px 0;
}

html[dir="rtl"] .device-expiration-field__input .form-control {
  border-radius: 8px 0 0 8px;
}

.device-expiration-field__renewals {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
}

.device-expiration-field__renew-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border-radius: 8px;
  border-color: var(--device-line);
  color: #374151;
  background: #fff;
  white-space: nowrap;
}

.device-expiration-field__renew-btn:hover,
.device-expiration-field__renew-btn:focus {
  border-color: var(--device-accent);
  color: var(--device-accent);
  background: var(--device-accent-soft);
}

.device-expiration-field.is-invalid input[name="expiration_date"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

/* Device wizard datetimepicker (appended to body, not inside form) */
body.device-create-open .datetimepicker.dropdown-menu {
  padding: 12px 14px;
  margin-top: 6px;
  border: none !important;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
  background: #fff;
  min-width: 280px;
  z-index: 2147483647 !important;
}

body.device-create-open .datetimepicker.dropdown-menu:before,
body.device-create-open .datetimepicker.dropdown-menu:after {
  display: none !important;
}

body.device-create-open .datetimepicker .table-condensed {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 2px;
}

body.device-create-open .datetimepicker thead tr:first-child th {
  border: none;
  padding: 2px;
  background: transparent;
}

body.device-create-open .datetimepicker thead th.prev,
body.device-create-open .datetimepicker thead th.next {
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  font-size: 12px;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease;
}

body.device-create-open .datetimepicker thead th.prev:hover,
body.device-create-open .datetimepicker thead th.next:hover {
  background: #f1f5f9;
  color: var(--device-accent, #1a6ed8);
}

body.device-create-open .datetimepicker thead th.switch {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}

body.device-create-open .datetimepicker thead th.switch:hover {
  background: #f8fafc;
}

body.device-create-open .datetimepicker thead th.dow {
  padding: 8px 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none;
  background: transparent;
}

body.device-create-open .datetimepicker td,
body.device-create-open .datetimepicker th {
  text-align: center;
  border: none;
  border-radius: 8px;
}

body.device-create-open .datetimepicker tbody td.day {
  width: 34px;
  height: 34px;
  line-height: 34px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.device-create-open .datetimepicker tbody td.day:hover {
  background: var(--device-accent-soft, rgba(26, 110, 216, 0.12)) !important;
  color: #111827;
}

body.device-create-open .datetimepicker tbody td.day.old,
body.device-create-open .datetimepicker tbody td.day.new {
  color: #cbd5e1;
}

body.device-create-open .datetimepicker tbody td.day.disabled,
body.device-create-open .datetimepicker tbody td.day.disabled:hover {
  color: #e2e8f0;
  background: transparent !important;
  cursor: default;
}

body.device-create-open .datetimepicker tbody td.day.active,
body.device-create-open .datetimepicker tbody td.day.active:hover,
body.device-create-open .datetimepicker tbody td.active,
body.device-create-open .datetimepicker tbody td.active:hover {
  background: var(--device-accent, #1a6ed8) !important;
  background-image: none !important;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(26, 110, 216, 0.35);
}

body.device-create-open .datetimepicker tbody td.day.today,
body.device-create-open .datetimepicker tbody td.day.today:hover {
  background: color-mix(in srgb, var(--device-accent, #1a6ed8) 14%, #ffffff) !important;
  background-image: none !important;
  color: var(--device-accent, #1a6ed8) !important;
  font-weight: 600;
}

body.device-create-open .datetimepicker tbody td.day.today.active,
body.device-create-open .datetimepicker tbody td.day.today.active:hover {
  background: var(--device-accent, #1a6ed8) !important;
  color: #fff !important;
}

body.device-create-open .datetimepicker .datetimepicker-hours span,
body.device-create-open .datetimepicker .datetimepicker-minutes span {
  width: 44px;
  height: 36px;
  line-height: 36px;
  margin: 2px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  float: none;
  display: inline-block;
}

body.device-create-open .datetimepicker .datetimepicker-hours span:hover,
body.device-create-open .datetimepicker .datetimepicker-minutes span:hover {
  background: var(--device-accent-soft, rgba(26, 110, 216, 0.12));
}

body.device-create-open .datetimepicker .datetimepicker-hours span.active,
body.device-create-open .datetimepicker .datetimepicker-minutes span.active {
  background: var(--device-accent, #1a6ed8) !important;
  color: #fff !important;
  text-shadow: none !important;
}

body.device-create-open .datetimepicker tfoot th.today,
body.device-create-open .datetimepicker tfoot th.clear {
  padding: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--device-accent, #1a6ed8);
  cursor: pointer;
  border-radius: 8px;
}

body.device-create-open .datetimepicker tfoot th.today:hover,
body.device-create-open .datetimepicker tfoot th.clear:hover {
  background: var(--device-accent-soft, rgba(26, 110, 216, 0.12));
}

.device-expiration-field .bootstrap-select .dropdown-toggle.is-invalid,
.form-group .bootstrap-select .dropdown-toggle.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.device-wizard-brand-trigger__media {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.device-wizard-brand-trigger__logo {
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
}

.device-wizard-brand-trigger__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-wizard-brand-trigger__chevron {
  color: #94a3b8;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
}

.device-wizard-fields-grid .device-wizard-brand-trigger,
.device-create-wizard .device-wizard-brand-trigger {
  max-width: none;
  height: auto;
  min-height: 40px;
}

.device-wizard-brand-drawer {
  position: fixed;
  inset: 0;
  z-index: 20050;
  pointer-events: none;
  visibility: hidden;
}

.device-wizard-brand-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.device-wizard-brand-drawer__overlay {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.device-wizard-brand-drawer.is-open .device-wizard-brand-drawer__overlay {
  opacity: 1;
}

.device-wizard-brand-drawer__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: min(420px, 92vw);
  height: auto;
  max-height: 100dvh;
  min-height: 0;
  background: #fff;
  box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-104%);
  transition: transform 0.24s ease;
}

.device-wizard-brand-drawer.is-open .device-wizard-brand-drawer__panel {
  transform: translateX(0);
}

/* Shared drawers (groups / users / sensors): slide from the right in RTL */
html[dir="rtl"] .device-wizard-brand-drawer:not(#device-wizard-brand-drawer) .device-wizard-brand-drawer__panel,
[dir="rtl"] .device-wizard-brand-drawer:not(#device-wizard-brand-drawer) .device-wizard-brand-drawer__panel,
.device-wizard-brand-drawer:not(#device-wizard-brand-drawer)[dir="rtl"] .device-wizard-brand-drawer__panel {
  left: auto;
  right: 0;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
  transform: translateX(104%);
}

html[dir="rtl"] .device-wizard-brand-drawer:not(#device-wizard-brand-drawer).is-open .device-wizard-brand-drawer__panel,
[dir="rtl"] .device-wizard-brand-drawer:not(#device-wizard-brand-drawer).is-open .device-wizard-brand-drawer__panel,
.device-wizard-brand-drawer:not(#device-wizard-brand-drawer)[dir="rtl"].is-open .device-wizard-brand-drawer__panel {
  transform: translateX(0);
}

/* Vehicle brand picker: always open from the left */
#device-wizard-brand-drawer .device-wizard-brand-drawer__panel,
html[dir="rtl"] #device-wizard-brand-drawer .device-wizard-brand-drawer__panel,
[dir="rtl"] #device-wizard-brand-drawer .device-wizard-brand-drawer__panel,
#device-wizard-brand-drawer[dir="rtl"] .device-wizard-brand-drawer__panel {
  left: 0 !important;
  right: auto !important;
  box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18) !important;
  transform: translateX(-104%) !important;
}

#device-wizard-brand-drawer.is-open .device-wizard-brand-drawer__panel,
html[dir="rtl"] #device-wizard-brand-drawer.is-open .device-wizard-brand-drawer__panel,
[dir="rtl"] #device-wizard-brand-drawer.is-open .device-wizard-brand-drawer__panel,
#device-wizard-brand-drawer[dir="rtl"].is-open .device-wizard-brand-drawer__panel {
  transform: translateX(0) !important;
}

.device-wizard-brand-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid #eef1f4;
  flex-shrink: 0;
}

.device-wizard-brand-drawer__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.device-wizard-brand-drawer__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
}

.device-wizard-brand-drawer__search {
  padding: 12px 18px;
  flex-shrink: 0;
}

.device-create-wizard .device-wizard-brand-drawer .ats-search,
.device-wizard-brand-drawer .ats-search {
  width: 100%;
}

.device-create-wizard .device-wizard-brand-drawer .ats-search__input.form-control,
.device-wizard-brand-drawer .ats-search__input.form-control {
  width: 100% !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  padding-inline-start: 38px !important;
  padding-inline-end: 12px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  background: #f8fafc !important;
}

.device-create-wizard .device-wizard-brand-drawer .ats-search__input.form-control:focus,
.device-wizard-brand-drawer .ats-search__input.form-control:focus {
  border-color: var(--device-accent, #1a6ed8) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--device-accent, #1a6ed8) 15%, transparent) !important;
}

.device-wizard-brand-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 18px;
}

.device-wizard-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.device-wizard-brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 96px;
  padding: 10px 8px;
  border: 1px solid var(--device-line);
  border-radius: 12px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.device-wizard-brand-card:hover,
.device-wizard-brand-card.is-selected {
  border-color: var(--device-accent);
  background: var(--device-accent-soft);
  color: var(--device-accent);
  box-shadow: 0 0 0 1px rgba(26, 110, 216, 0.08);
}

.device-wizard-brand-card.is-hidden {
  display: none;
}

.device-wizard-brand-card__logo {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-wizard-brand-card__logo img {
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
}

.device-wizard-brand-card__name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

.device-wizard-brand-drawer__empty {
  margin: 24px 0 0;
  text-align: center;
  color: var(--device-muted);
  font-size: 14px;
}

body.device-wizard-brand-drawer-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .device-wizard-brand-drawer__panel {
    width: min(360px, 100vw);
  }

  .device-wizard-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.device-wizard-groups-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.device-wizard-groups-field__head > label,
.device-wizard-groups-field__head > .control-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.device-wizard-groups-field__manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--device-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.device-wizard-groups-field__manage:hover {
  color: var(--device-accent-dark);
}

.device-wizard-groups-field .bootstrap-select,
.device-wizard-groups-field select.form-control {
  width: 100%;
  max-width: none;
}

.device-wizard-groups-drawer__toolbar {
  padding: 0 18px 10px;
}

.device-wizard-groups-drawer__add {
  width: 100%;
  min-height: 38px;
}

.device-wizard-groups-drawer__create {
  padding: 0 18px 12px;
  border-bottom: 1px solid #eef1f4;
}

.device-wizard-groups-drawer__create-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.device-wizard-groups-drawer__create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.device-wizard-groups-drawer__create-row .form-control,
.device-create-wizard .device-wizard-groups-drawer .device-wizard-groups-drawer__create-row .form-control {
  width: 100%;
  max-width: none;
  height: 40px;
  min-height: 40px;
}

.device-wizard-groups-drawer__create-row .device-wizard-btn,
.device-wizard-groups-item__save {
  flex-shrink: 0;
  min-width: 0;
  width: auto;
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: none;
  border-radius: 10px;
  background: var(--device-accent);
  color: #fff;
}

.device-wizard-groups-drawer__create-row .device-wizard-btn:hover,
.device-wizard-groups-drawer__create-row .device-wizard-btn:focus,
.device-wizard-groups-item__save:hover,
.device-wizard-groups-item__save:focus {
  background: var(--device-accent-dark);
  color: #fff;
}

.device-wizard-groups-drawer__create-row .device-wizard-btn:disabled,
.device-wizard-groups-item__save:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.device-wizard-groups-drawer__body {
  padding-top: 8px;
}

.device-wizard-groups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.device-wizard-groups-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.device-wizard-groups-item__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 4px;
}

.device-wizard-groups-item__row:hover {
  background: var(--device-accent-soft);
  border-radius: 6px;
}

.device-wizard-groups-item__select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: start;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 0;
  line-height: 1.4;
  cursor: pointer;
}

.device-wizard-groups-item__select:hover {
  color: var(--device-accent);
}

.device-wizard-groups-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.device-wizard-groups-item__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.device-wizard-groups-item__action i {
  font-size: 13px;
}

.device-wizard-groups-item__action--edit {
  background: var(--device-accent-soft);
  color: var(--device-accent);
}

.device-wizard-groups-item__action--edit:hover {
  background: var(--device-accent);
  color: #fff;
}

.device-wizard-groups-item__action--danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.device-wizard-groups-item__edit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 4px;
}

.device-wizard-groups-item__input,
.device-create-wizard .device-wizard-groups-drawer .device-wizard-groups-item__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 40px;
  min-height: 40px;
}

.device-wizard-groups-item__cancel {
  flex-shrink: 0;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid var(--device-line, #e2e8f0) !important;
  background: #fff !important;
  color: #64748b !important;
  box-shadow: none !important;
}

.device-wizard-groups-item__cancel:hover,
.device-wizard-groups-item__cancel:focus {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

.device-wizard-users-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.device-wizard-users-field__head > label,
.device-wizard-users-field__head > .control-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.device-wizard-users-field__manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--device-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.device-wizard-users-field__manage:hover {
  color: var(--device-accent-dark);
}

.device-wizard-users-field__summary {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.4;
}

.device-wizard-users-drawer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 10px;
  flex-shrink: 0;
}

.device-wizard-users-drawer__count {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.device-wizard-users-drawer .device-wizard-brand-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 12px;
}

.device-wizard-users-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.device-wizard-users-list.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.device-wizard-users-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
}

.device-wizard-users-item:hover {
  background: var(--device-accent-soft);
}

.device-wizard-users-item__checkbox {
  margin: 0;
  flex-shrink: 0;
}

.device-wizard-users-item__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.device-wizard-users-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid #eef1f4;
  flex-shrink: 0;
  background: #fff;
}

.device-wizard-footer.is-last-step,
.device-wizard-footer.is-first-step {
  justify-content: flex-end;
}

.device-wizard-footer.is-middle-step {
  justify-content: space-between;
}

.device-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef1f4;
  flex: 0 0 auto;
  flex-shrink: 0;
  background: #fff;
  position: relative;
  z-index: 2;
}

.device-wizard-footer__start,
.device-wizard-footer__end {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device-wizard-footer [hidden] {
  display: none !important;
}

.device-wizard-footer__prev,
.device-wizard-footer__cancel {
  min-width: 110px;
  border-radius: 8px !important;
  font-weight: 600;
  border-color: var(--device-sheet-border) !important;
  color: #374151 !important;
  background: #fff !important;
}

.device-wizard-btn {
  min-width: 140px;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.device-wizard-btn--next {
  background: var(--device-accent);
  color: #fff;
}

.device-wizard-btn--next:hover,
.device-wizard-btn--next:focus {
  background: var(--device-accent-dark);
  color: #fff;
}

.device-create-wizard .form-group > label,
.device-create-wizard .control-label {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.device-create-wizard .device-wizard-main__content .row.device-wizard-row--5 .form-control,
.device-create-wizard .device-wizard-main__content .row.device-wizard-row--5 select.form-control,
.device-create-wizard .device-wizard-main__content .row.device-wizard-row--6 .form-control,
.device-create-wizard .device-wizard-main__content .row.device-wizard-row--6 select.form-control {
  max-width: none;
}

.device-create-wizard .form-control:not(.bootstrap-select):not(.ats-search__input) {
  border-radius: 8px;
  border-color: var(--device-line);
  box-shadow: none;
  width: 100%;
  max-width: var(--device-wizard-field-max);
  height: 32px;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.device-create-wizard textarea.form-control {
  height: auto;
  min-height: 64px;
  padding: 6px 10px;
}

.device-create-wizard select.form-control {
  height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.device-wizard-tail-row {
  display: grid;
  grid-template-columns: minmax(200px, var(--device-wizard-field-max)) minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
}

.device-wizard-tail-row__length .form-group {
  max-width: none;
  margin-bottom: 0;
}

.device-wizard-tail-row__colors .device-color-swatch-field {
  max-width: none;
  margin-bottom: 0;
}

[dir='rtl'] .device-wizard-tail-row {
  grid-template-columns: minmax(0, 1fr) minmax(200px, var(--device-wizard-field-max));
}

[dir='rtl'] .device-wizard-tail-row__length {
  grid-column: 2;
  grid-row: 1;
}

[dir='rtl'] .device-wizard-tail-row__colors {
  grid-column: 1;
  grid-row: 1;
}

.device-create-wizard .device-color-swatch-field {
  max-width: none;
}

.device-create-wizard .device-color-swatch-field .geographic-color-grid,
.device-form-section__body .device-color-swatch-field .geographic-color-grid {
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 2px;
}

.device-color-swatch-field .geographic-color-swatch,
.device-color-swatch-field .geographic-color-swatch__dot {
  flex: 0 0 auto;
}

.device-wizard-main__content .device-color-swatch-field {
  max-width: none;
}

.device-create-wizard .input-group {
  max-width: var(--device-wizard-field-max);
  overflow: visible;
}

.device-create-wizard .input-group .form-control {
  height: 32px;
  min-height: 32px;
  max-width: none;
}

.device-create-wizard .input-group .bootstrap-select {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.device-create-wizard .form-control:not(.bootstrap-select):focus {
  border-color: var(--device-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--device-accent) 15%, transparent);
}

.device-create-wizard .sa-plate {
  margin-top: 0;
  max-width: none;
  position: relative;
}

.sa-plate__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  gap: 20px 24px;
  align-items: start;
}

.sa-plate__preview-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
}

.sa-plate__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.sa-plate__region-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.sa-plate__meta {
  max-width: none;
  width: 100%;
}

.sa-plate__region-input,
.device-create-wizard .sa-plate__meta .bootstrap-select,
.device-create-wizard .sa-plate__meta .bootstrap-select > .dropdown-toggle {
  width: 100%;
  max-width: none;
}

.device-create-wizard .device-wizard-main__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.device-create-wizard .device-wizard-subsection--accessories {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.device-create-wizard .device-wizard-step[data-wizard-step="4"]:not([hidden]) {
  display: block;
  flex: none;
  min-height: auto;
}

.device-create-wizard .device-wizard-step[data-wizard-step="4"] .device-wizard-card,
.device-create-wizard .device-wizard-step[data-wizard-step="4"] .device-wizard-card__body {
  display: block;
  flex: none;
  min-height: auto;
  overflow: visible;
}

.device-create-wizard .device-sensor-wizard {
  display: block;
  width: 100%;
}

.device-create-wizard .device-sensor-wizard__catalog--primary {
  display: block;
}

.device-create-wizard .device-sensor-wizard__list-box {
  min-height: 220px;
  max-height: min(360px, 42vh);
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 4px;
  contain: layout paint;
}

.device-create-wizard .device-sensor-wizard__catalog-list {
  overflow: visible;
}

.device-sensor-wizard__details-store {
  display: none !important;
}

.device-wizard-sensor-drawer .device-wizard-brand-drawer__panel {
  width: min(440px, 92vw);
  max-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.device-wizard-sensor-drawer__header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #eef1f4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary, #1a6ed8) 6%, white), var(--card, #fff));
  position: relative;
  z-index: 2;
}

.device-wizard-sensor-drawer__heading {
  flex: 1;
  min-width: 0;
}

.device-wizard-sensor-drawer__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground, #111827);
}

.device-wizard-sensor-drawer__desc {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--secondary-foreground, #64748b);
  font-weight: 400;
}

.device-wizard-sensor-drawer__close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border, #eef1f4);
  border-radius: 50%;
  background: var(--card, #fff);
  color: var(--secondary-foreground, #64748b);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.device-wizard-sensor-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
}

.device-wizard-sensor-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border, #eef1f4);
  flex-shrink: 0;
  background: var(--card, #fff);
}

.device-wizard-sensor-drawer__delete {
  margin-inline-end: auto;
}

.device-wizard-sensor-drawer__save {
  min-width: 88px;
}

.device-wizard-sensor-drawer__body .device-sensor-detail {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.device-wizard-sensor-drawer__body .device-sensor-detail__desc {
  display: none;
}

.device-wizard-sensor-drawer__body .device-sensor-detail__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-bottom: 14px;
}

.device-wizard-sensor-drawer__body .device-sensor-detail__field,
.device-wizard-sensor-drawer__body .form-group {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}

.device-wizard-sensor-drawer__body .device-sensor-detail__field label,
.device-wizard-sensor-drawer__body .form-group > label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary-foreground, #64748b);
}

.device-wizard-sensor-drawer__body .form-control,
.device-wizard-sensor-drawer__body .bootstrap-select,
.device-wizard-sensor-drawer__body .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  max-width: none !important;
  min-height: 32px;
  height: 32px;
  font-size: 12px;
}

.device-wizard-sensor-drawer__body .device-sensor-calibration {
  margin-top: 4px;
}

.device-wizard-sensor-drawer__body .device-sensor-calibration-table-wrap {
  margin-bottom: 8px;
}

.device-wizard-sensor-drawer__body .device-sensor-calibration-add--platform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 0;
  padding: 10px;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted, #f1f5f9) 30%, white);
}

.device-wizard-sensor-drawer__body .device-sensor-calibration-add__fields {
  display: contents;
}

.device-wizard-sensor-drawer__body .device-sensor-calibration-add__fields .form-control {
  width: 100%;
  min-width: 0;
  height: 32px;
  font-size: 12px;
}

.device-wizard-sensor-drawer__body .device-sensor-calibration-add__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  min-width: 88px;
  padding: 6px 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff !important;
  text-decoration: none;
  border-radius: 8px;
}

.device-wizard-sensor-drawer__body .device-sensor-calibration-add__btn .fa {
  font-size: 11px;
}

.device-wizard-sensor-drawer__body .device-sensor-calibration-add__fields .form-control.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 14%, transparent);
}

.device-sensor-wizard__list-box {
  padding: 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--muted, #f1f5f9) 35%, white);
  min-height: 220px;
  max-height: min(360px, 45vh);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.device-sensor-wizard__catalog-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  align-content: start;
}

.device-sensor-row--switch,
.device-sensor-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 85%, transparent);
  border-radius: 10px;
  background: var(--card, #fff);
  min-height: 38px;
  max-height: 38px;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.device-sensor-chip:hover {
  background: color-mix(in srgb, var(--primary, #1a6ed8) 8%, white);
}

.device-sensor-row--switch.device-sensor-row--active,
.device-sensor-chip.device-sensor-row--active {
  background: color-mix(in srgb, var(--primary, #1a6ed8) 12%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #1a6ed8) 25%, var(--border, #e5e7eb));
}

.device-sensor-chip__body,
.device-sensor-row--switch .device-sensor-row__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
}

.device-sensor-chip__name,
.device-sensor-row--switch .device-sensor-row__catalog-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--foreground, #111827);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-sensor-chip__switch,
.device-sensor-row--switch .device-sensor-row__switch-wrap {
  flex: 0 0 var(--ats-switch-width, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-sensor-row--switch .device-sensor-row__switch {
  display: inline-block;
  vertical-align: middle;
}

.device-sensor-row--switch .device-sensor-row__desc {
  display: none;
}

@media (max-width: 960px) {
  .device-create-dashboard.device-create-wizard {
    padding: 12px 8px 48px;
  }

  .device-wizard-sheet {
    padding: 16px;
  }

  .device-wizard-sheet__body {
    flex-direction: column;
  }

  .device-wizard-vehicle-types {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
  }

  .device-wizard-vehicle-type__card {
    width: 100%;
  }

  .device-wizard-sim-body {
    grid-template-columns: 1fr;
  }

  .device-wizard-sim-body .device-wizard-sim-fields-stack,
  .device-wizard-sim-body .device-wizard-sim-preview-area {
    order: unset;
  }

  .device-wizard-sim-preview-area {
    grid-template-columns: 1fr;
  }

  .device-wizard-sim-types {
    min-width: 0;
  }

  .device-wizard-sim-preview__image {
    max-width: 280px;
  }

  .device-wizard-main__content .row,
  .device-wizard-main__content .row.device-wizard-row--3 {
    grid-template-columns: 1fr;
  }

  .device-wizard-main__content .form-group,
  .device-create-wizard .form-control,
  .device-create-wizard .input-group {
    max-width: none;
  }

  .device-wizard-tail-row,
  [dir='rtl'] .device-wizard-tail-row {
    grid-template-columns: 1fr;
  }

  [dir='rtl'] .device-wizard-tail-row__length,
  [dir='rtl'] .device-wizard-tail-row__colors {
    grid-column: 1;
  }

  .device-wizard-stepper {
    width: 100%;
    position: static;
  }

  .device-wizard-stepper__list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .device-wizard-stepper__list::before {
    display: none;
  }

  .device-wizard-stepper__item {
    flex-direction: column;
    min-width: 92px;
    text-align: center;
    padding: 0;
  }

  .device-wizard-stepper__label {
    font-size: 11px;
  }

  .device-wizard-summary__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Legacy single-page sections (sidebar / modal) */

/* Device add — Saudi plate + vehicle sensor wizard */

.sa-plate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  max-width: none;
}

.sa-plate__label {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 12px;
}

.sa-plate__preview {
  display: flex;
  flex-direction: row;
  direction: ltr;
  flex: 0 0 auto;
  width: min(100%, 520px);
  max-width: 520px;
  min-height: 118px;
  aspect-ratio: 520 / 110;
  border: 3px solid #111;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.sa-plate__stripe {
  flex: 0 0 16.5%;
  min-width: 78px;
  background: #fff;
  color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px 18px;
  text-align: center;
  border-right: 1px solid #d8d8d8;
  position: relative;
}

.sa-plate__stripe::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #111;
  opacity: 0;
}

.sa-plate__preview--private .sa-plate__stripe {
  background: linear-gradient(180deg, #fff 0%, #f4f4f4 100%);
  color: #111;
}

.sa-plate__preview--private .sa-plate__stripe::after {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #111;
  opacity: 1;
}

.sa-plate__preview--public_transport .sa-plate__stripe {
  background: linear-gradient(180deg, #ffd400 0%, #e6bc00 100%);
  color: #111;
  border-right-color: #c9a600;
}

.sa-plate__preview--public_transport .sa-plate__stripe::after {
  border-bottom-color: #111;
  opacity: 1;
}

.sa-plate__preview--commercial .sa-plate__stripe {
  background: linear-gradient(180deg, #2b6cb0 0%, #1a4f8f 100%);
  color: #fff;
  border-right-color: #153d70;
}

.sa-plate__preview--commercial .sa-plate__stripe::after {
  border-top: 8px solid #fff;
  border-bottom: 0;
  opacity: 1;
}

.sa-plate__preview--motorcycle {
  background: #fff;
  border-color: #111;
}

.sa-plate__preview--motorcycle .sa-plate__stripe {
  background: linear-gradient(180deg, #1e6fd9 0%, #1558b0 100%);
  color: #fff;
  border-right-color: #124a96;
}

.sa-plate__preview--motorcycle .sa-plate__stripe::after {
  width: 12px;
  height: 4px;
  border: 0;
  border-radius: 1px;
  background: #fff;
  opacity: 1;
}

.sa-plate__preview--motorcycle .sa-plate__divider {
  background: #ebebeb;
}

.sa-plate__preview--motorcycle .sa-plate__slot-en {
  background: #fff;
  border-color: #c5d4e0;
}

.sa-plate__preview--motorcycle .sa-plate__slot-input,
.sa-plate__preview--motorcycle .sa-plate__slot-ar {
  color: #111;
}

.sa-plate__preview--motorcycle .sa-plate__slot-input--letter {
  caret-color: transparent;
}

.sa-plate__ksa {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.sa-plate__country-ar {
  font-family: 'Traditional Arabic', 'Arabic Typesetting', 'Segoe UI', Tahoma, sans-serif;
  font-size: clamp(12px, 2.4vw, 15px);
  font-weight: 700;
  line-height: 1.2;
}

.sa-plate__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
}

.sa-plate__section {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 12px 8px;
  min-width: 0;
}

.sa-plate__section--digits {
  flex: 1.28;
}

.sa-plate__section--letters {
  flex: 1;
}

.sa-plate__divider {
  flex: 0 0 1px;
  background: #ebebeb;
  margin: 18px 0;
}

.sa-plate__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.sa-plate__slot-en {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 8vw, 58px);
  height: clamp(44px, 8vw, 58px);
  border: 2px solid #c5d4e0;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.sa-plate__slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #111;
  outline: none;
}

.sa-plate__slot-display {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 4.5vw, 34px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  min-height: 1em;
}

.sa-plate__letter-picker {
  position: absolute;
  z-index: 30;
  transform: translateX(-50%);
  min-width: 248px;
  padding: 10px;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.sa-plate__letter-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.sa-plate__letter-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 2px;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sa-plate__letter-option:hover,
.sa-plate__letter-option:focus {
  border-color: var(--device-accent);
  background: var(--device-accent-soft);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--device-accent) 15%, transparent);
}

.sa-plate__letter-option-en {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #111;
}

.sa-plate__letter-option-ar {
  font-family: 'Traditional Arabic', 'Arabic Typesetting', 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1;
  color: #374151;
}

.sa-plate-vin {
  max-width: 560px;
  margin-bottom: 4px;
}

.sa-plate-vin .form-control {
  max-width: none;
}

.sa-plate__slot-input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #111;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  caret-color: transparent;
}

.sa-plate__slot-input--digit {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 4.5vw, 34px);
  font-weight: 700;
  line-height: 1;
}

.sa-plate__slot-input--digit::selection {
  background: transparent;
  color: #111;
}

.sa-plate__slot-input--letter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(22px, 4.5vw, 34px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  caret-color: transparent;
}

.sa-plate__slot-input--letter::selection {
  background: transparent;
  color: #111;
}

.sa-plate__slot-input:focus {
  outline: none;
}

.sa-plate__slot-en:focus-within {
  border-color: var(--device-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--device-accent) 18%, transparent);
}

.sa-plate__slot-ar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.15em;
  font-family: 'Traditional Arabic', 'Arabic Typesetting', 'Segoe UI', Tahoma, sans-serif;
  font-size: clamp(17px, 3.4vw, 26px);
  font-weight: 600;
  line-height: 1;
  color: #111;
}

.sa-plate__meta {
  max-width: none;
  width: 100%;
}

.sa-plate__region-input {
  font-size: 12px;
  height: 32px;
}

.device-sensor-wizard {
  width: 100%;
}

.device-sensor-wizard__catalog--primary {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.device-sensor-wizard__catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.device-sensor-wizard__catalog-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--foreground, #111827);
}

.device-sensor-wizard__catalog-hint {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--secondary-foreground, #64748b);
}

.device-sensor-wizard__catalog-search {
  flex: 0 0 160px;
  max-width: 100%;
  min-height: 32px;
  height: 32px;
  font-size: 12px;
}

.device-sensor-row--hidden {
  display: none;
}

.device-sensor-detail[hidden] {
  display: none !important;
}

.device-sensor-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-sensor-calibration-table-wrap {
  overflow-x: auto;
}

.device-sensor-vars-table,
.device-sensor-calibration-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.device-sensor-vars-table th,
.device-sensor-calibration-table th {
  text-align: start;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #eef1f4;
  background: #fafbfc;
}

.device-sensor-vars-table td,
.device-sensor-calibration-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #1f2937;
}

.device-sensor-vars-table code {
  font-size: 11px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

.device-sensor-calibration-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
}

.device-sensor-calibration-toggle__input {
  accent-color: var(--primary);
}

.device-sensor-calibration-body {
  padding: 10px 12px 12px;
}

.device-sensor-calibration-body[hidden] {
  display: none;
}

.device-sensor-calibration-body .form-group {
  margin-bottom: 10px;
}

.device-sensor-calibration-body .form-group label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.device-sensor-calibration-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.device-sensor-calibration-add__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}

.device-sensor-calibration-add__fields .form-control {
  flex: 1;
  min-width: 90px;
  font-size: 12px;
  height: 30px;
}

.device-sensor-calibration-add__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.device-sensor-calibration-remove {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.device-sensor-calibration-remove:hover {
  color: #dc2626;
}

.device-sensor-wizard__catalog {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.device-sensor-wizard__catalog--primary.device-sensor-wizard__catalog {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.device-sensor-detail__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.device-sensor-detail__field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

.device-sensor-calibration__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.device-sensor-calibration-table--platform th {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: none;
}

.device-sensor-calibration-add--platform {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .device-sensor-detail__fields {
    grid-template-columns: 1fr;
  }
}

.device-sensor-wizard__group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  position: relative;
  z-index: 1;
  clear: both;
}

.device-create-wizard .device-wizard-step[data-wizard-step="4"] .device-wizard-subsection:not(.device-wizard-subsection--accessories) {
  position: relative;
  z-index: 1;
  clear: both;
}

@media (max-width: 960px) {
  .device-wizard-fields-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sa-plate__layout {
    grid-template-columns: 1fr;
  }

  .sa-plate__side {
    padding-top: 0;
  }

  .device-wizard-plate-fuel-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .device-wizard-plate-fuel-row__plate .sa-plate__preview-wrap {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .device-wizard-main__content .row.device-wizard-row--5,
  .device-wizard-main__content .row.device-wizard-row--6 {
    grid-template-columns: 1fr;
  }

  .device-wizard-fields-grid--3 {
    grid-template-columns: 1fr;
  }

  .sa-plate__preview {
    max-width: none;
  }
}

/* SIM step — wide fields & options */
.device-wizard-main__content .form-group.device-wizard-field--wide {
  max-width: none;
  grid-column: 1 / -1;
}

.device-wizard-main__content .form-group.device-wizard-field--timezone {
  max-width: none;
}

.device-wizard-field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ats-muted, #6b7280);
}

.device-wizard-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 12px;
}

.device-wizard-options-row .checkbox {
  margin: 0;
}

.device-wizard-notes-forward-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.device-wizard-notes-forward-row__notes {
  flex: 1 1 auto;
  min-width: 0;
}

.device-wizard-notes-forward-row__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.device-wizard-notes-forward-row__notes .form-control {
  width: 100%;
  min-height: 148px;
  resize: vertical;
}

.device-wizard-notes-forward-row__forward {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
}

.device-wizard-subsection--notes-forward {
  margin-top: 8px;
}

/* Forward panel — server connection animation */
.device-forward-panel {
  --forward-accent: var(--primary);
  --forward-accent-soft: rgba(37, 99, 235, 0.12);
  --forward-line-idle: #d1d5db;
  --forward-line-active: #60a5fa;
  --forward-node-bg: #f8fafc;
  --forward-node-border: #e2e8f0;
  max-width: none;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--forward-node-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.device-forward-panel--compact {
  min-height: 148px;
}

.device-forward-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.device-forward-panel__title {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  margin: 0;
  font-weight: 600;
}

.device-forward-panel__switch {
  flex-shrink: 0;
}

.device-forward-flow {
  flex: 1 1 auto;
  margin-bottom: 8px;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px dashed #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

.device-forward-flow__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 196px;
  margin: 0 auto;
}

.device-forward-flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-align: center;
  position: relative;
}

.device-forward-flow__node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--forward-node-border);
  background: var(--forward-node-bg);
  color: #64748b;
  font-size: 11px;
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.device-forward-flow__node-label {
  display: none;
}

.device-forward-flow__node-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--forward-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
}

.device-forward-flow__segment {
  position: relative;
  flex: 1 1 16px;
  min-width: 12px;
  height: 20px;
}

.device-forward-flow__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: var(--forward-line-idle);
  border-radius: 999px;
}

.device-forward-flow__packet {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forward-accent);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.device-forward-flow__targets {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.device-forward-flow__branch {
  display: flex;
  align-items: center;
  gap: 0;
}

.device-forward-flow__segment--branch {
  flex: 0 0 20px;
  min-width: 20px;
}

.device-forward-flow__node--target .device-forward-flow__node-icon {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--primary);
}

.device-forward-flow__node--placeholder .device-forward-flow__node-icon {
  opacity: 0.45;
}

.device-forward-panel.is-forward-active .device-forward-flow__node--device .device-forward-flow__node-icon,
.device-forward-panel.is-forward-active .device-forward-flow__node--main .device-forward-flow__node-icon {
  border-color: color-mix(in srgb, #1a6ed8 45%, transparent);
  color: var(--forward-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.device-forward-panel.is-forward-active .device-forward-flow__line {
  background: linear-gradient(90deg, color-mix(in srgb, #1a6ed8 55%, white), var(--forward-line-active));
}

.device-forward-panel.is-forward-active .device-forward-flow__packet {
  opacity: 1;
  animation: device-forward-packet 1.6s linear infinite;
}

.device-forward-panel.is-forward-active .device-forward-flow__packet--b {
  animation-delay: 0.8s;
}

.device-forward-panel.is-forward-active .device-forward-flow__node--target .device-forward-flow__node-icon {
  animation: device-forward-node-pulse 2s ease-in-out infinite;
}

@keyframes device-forward-packet {
  0% {
    left: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes device-forward-node-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.18);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0);
  }
}

.device-forward-panel__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-forward-panel__ip {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.device-forward-panel__ip .form-control {
  height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}

.device-forward-protocol-switch {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 8px;
  background: #eef2f7;
  gap: 1px;
}

.device-forward-protocol-switch__option {
  margin: 0;
  cursor: pointer;
}

.device-forward-protocol-switch__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.device-forward-protocol-switch__option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.device-forward-protocol-switch__option input:checked + span {
  background: #fff;
  color: var(--forward-accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
  .device-wizard-notes-forward-row {
    flex-direction: column;
  }

  .device-wizard-notes-forward-row__forward {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .device-forward-panel__controls {
    flex-wrap: wrap;
  }

  .device-forward-panel__ip {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Live tracking sidebar — fleet card / table views
   ========================================================================== */

#sidebar #objects_tab.objects-view-mode-card .fleet-objects-table-head,
#sidebar #objects_tab.objects-view-mode-card .fleet-device-table-row {
  display: none !important;
}

#sidebar #objects_tab.objects-view-mode-table .fleet-device-card {
  display: none !important;
}

#sidebar #objects_tab.objects-view-mode-table .fleet-objects-table-head {
  display: grid;
}

#sidebar #objects_tab .fleet-objects-table-head {
  display: none;
  grid-template-columns: 34px 1fr 34px 1.1fr 52px;
  gap: 4px;
  align-items: center;
  padding: 8px 12px;
  background: #f4f7fb;
  border-bottom: 1px solid #e6edf5;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

#sidebar #objects_tab .fleet-objects-table-head__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

#sidebar #objects_tab .fleet-objects-table-head__name {
  justify-content: flex-start;
  color: #3d3f5c;
}

#sidebar #objects_tab .fleet-objects-table-head__sort-accent {
  color: #2eaa5a;
}

#sidebar #objects_tab .fleet-objects-toolbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px 10px;
  background: #ffffff;
  border-bottom: 1px solid #eef2f7;
}

#sidebar #objects_tab .fleet-objects-toolbar__search {
  flex: 1 1 auto;
  min-width: 0;
}

#sidebar #objects_tab .fleet-objects-toolbar__search .ats-search__field {
  min-height: 38px;
}

#sidebar #objects_tab .fleet-objects-filter-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  border-color: #e2e8f0;
  color: #2eaa5a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#sidebar #objects_tab .fleet-objects-filter-menu {
  min-width: 180px;
}

#sidebar #objects_tab .fleet-view-toggle__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: start;
  padding: 8px 16px;
  color: #334155;
}

#sidebar #objects_tab .fleet-view-toggle__btn.active,
#sidebar #objects_tab .fleet-view-toggle__btn:hover {
  color: var(--primary, #1a6ed8);
  background: color-mix(in srgb, var(--primary, #1a6ed8) 8%, #ffffff);
}

#sidebar #objects_tab li.fleet-device-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  contain-intrinsic-size: auto 92px;
}

#sidebar #objects_tab li.fleet-device-item:hover,
#sidebar #objects_tab li.fleet-device-item.active {
  background: transparent;
  box-shadow: none;
}

#sidebar #objects_tab li.fleet-device-item.active::before {
  display: none;
}

#sidebar #objects_tab li.fleet-device-item > .device-visibility {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 3;
  width: 18px !important;
  height: 18px !important;
}

#sidebar #objects_tab li.fleet-device-item > .device-visibility label {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px;
}

#sidebar #objects_tab li.fleet-device-item > .device-visibility label::before {
  font-size: 11px !important;
}

#sidebar #objects_tab .fleet-device-actions {
  display: none;
}

/* Right-click context menu — floated on body (parent .fleet-device-actions is hidden) */
.dropdown-menu.device-context-menu-floating {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  z-index: 1060 !important;
  min-width: 220px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  border: none !important;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
  border-radius: 10px;
  padding: 6px;
}

/* Radial variant — pie slices around a hub holding the vehicle thumbnail */
.dropdown-menu.device-context-menu-radial {
  min-width: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  transform-origin: center center;
  animation: device-radial-fade 140ms ease-out;
}

@keyframes device-radial-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dropdown-menu.device-context-menu-radial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(226, 234, 244, 0.92);
  box-shadow: 0 18px 46px rgba(15, 25, 35, 0.24), inset 0 0 0 1px rgba(26, 110, 216, 0.14);
}

.dropdown-menu.device-context-menu-radial .device-radial-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 116px;
  height: 116px;
  padding: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 6px 18px rgba(15, 25, 35, 0.18), inset 0 0 0 1px var(--border);
  text-align: center;
  pointer-events: none;
}

.dropdown-menu.device-context-menu-radial .device-radial-hub__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 38px;
}

.dropdown-menu.device-context-menu-radial .device-radial-hub__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dropdown-menu.device-context-menu-radial .device-radial-hub__name {
  max-width: 94px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-menu.device-context-menu-radial .device-radial-hub__caption {
  max-width: 94px;
  max-height: 26px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted-foreground);
}

.dropdown-menu.device-context-menu-radial > li.device-radial-item {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The li spans the whole disc, so only the clipped anchor may capture the pointer. */
  pointer-events: none;
}

.dropdown-menu.device-context-menu-radial > li.device-radial-item > a {
  display: block !important;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  pointer-events: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--secondary-foreground) !important;
  box-shadow: none !important;
  transition: background-color 130ms ease, color 130ms ease;
}

.dropdown-menu.device-context-menu-radial > li.device-radial-item > a:hover,
.dropdown-menu.device-context-menu-radial > li.device-radial-item > a:focus {
  background: var(--primary) !important;
  color: #fff !important;
}

.dropdown-menu.device-context-menu-radial > li.device-radial-item > a:active {
  background: var(--primary-active) !important;
}

/* The base theme paints dropdown icons #dddddd, and #1a6ed8 on hover — the same
   blue as the active slice — so both states need an explicit colour here. */
.dropdown-menu.device-context-menu-radial > li.device-radial-item > a .icon {
  position: absolute;
  top: calc(50% + var(--radial-y, 0px));
  left: calc(50% + var(--radial-x, 0px));
  margin: 0 !important;
  font-size: 20px;
  line-height: 1;
  color: var(--secondary-foreground) !important;
  transform: translate(-50%, -50%);
  transition: transform 130ms ease, color 130ms ease;
}

.dropdown-menu.device-context-menu-radial > li.device-radial-item > a:hover .icon,
.dropdown-menu.device-context-menu-radial > li.device-radial-item > a:focus .icon {
  color: #fff !important;
  transform: translate(-50%, -50%) scale(1.14);
}

.dropdown-menu.device-context-menu-radial > li.device-radial-item > a .text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#sidebar #objects_tab .btn-group.dropleft.open > .dropdown-menu:not(.device-context-menu-floating) {
  z-index: 1060;
  min-width: 220px;
  border: none !important;
  box-shadow: 0 10px 28px rgba(15, 25, 35, 0.14);
  border-radius: 10px;
  padding: 6px;
}

#sidebar #objects_tab.objects-view-mode-card .group-list.fleet-device-list {
  padding: 8px 10px 12px;
}

#sidebar #objects_tab.objects-view-mode-card li.fleet-device-item {
  margin-bottom: 10px;
}

#sidebar #objects_tab .fleet-device-card {
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}

#sidebar #objects_tab .fleet-device-card__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 10px;
}

#sidebar #objects_tab .fleet-device-card__info {
  flex: 1 1 auto;
  min-width: 0;
}

#sidebar #objects_tab .fleet-device-card__plate {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview {
  display: flex;
  flex-direction: row;
  direction: ltr;
  width: 112px;
  max-width: 100%;
  height: 24px;
  min-height: 24px;
  aspect-ratio: unset;
  border-width: 1.5px;
  border-radius: 5px;
  box-shadow: none;
  overflow: hidden;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__stripe,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__stripe {
  flex: 0 0 18px;
  min-width: 18px;
  max-width: 18px;
  padding: 2px 1px 4px;
  gap: 0;
  border-right-width: 1px;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__stripe::after,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__stripe::after {
  bottom: 2px;
  width: 3px;
  height: 3px;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview.sa-plate__preview--public_transport .sa-plate__stripe::after,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview.sa-plate__preview--public_transport .sa-plate__stripe::after,
#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview.sa-plate__preview--commercial .sa-plate__stripe::after,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview.sa-plate__preview--commercial .sa-plate__stripe::after {
  border-left-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 4px;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview.sa-plate__preview--commercial .sa-plate__stripe::after,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview.sa-plate__preview--commercial .sa-plate__stripe::after {
  border-top-width: 4px;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__ksa,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__ksa {
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__country-ar,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__country-ar {
  display: none;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__body,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__section,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 1px;
  min-width: 0;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__section--digits,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__section--digits {
  flex: 1.15 1 auto;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__section--letters,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__section--letters {
  flex: 0.85 1 auto;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__divider,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__divider {
  flex: 0 0 1px;
  width: 1px;
  margin: 3px 0;
  align-self: stretch;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__slot,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__slot {
  flex: 0 0 auto;
  gap: 0;
  min-width: 0;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__slot-ar,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__slot-ar {
  display: none;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__slot-en,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__slot-en {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-width: 1px;
  border-radius: 2px;
}

#sidebar #objects_tab .fleet-device-card__plate .fleet-plate-preview .sa-plate__slot-display,
#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview .sa-plate__slot-display {
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  min-height: 0;
}

#sidebar #objects_tab .fleet-device-card__plate-fallback {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid #e8eae9;
  border-radius: 8px;
  color: #4a4f52;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

#sidebar #objects_tab .fleet-device-card__name {
  margin-top: 3px;
  max-width: 100%;
  overflow: hidden;
  color: #8a9296;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar #objects_tab .fleet-device-card__brand {
  display: none !important;
}

#sidebar #objects_tab .fleet-device-card__metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  min-height: 22px;
}

#sidebar #objects_tab .fleet-device-card__sensors {
  display: none !important;
}

#sidebar #objects_tab .fleet-device-card__last-update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

#sidebar #objects_tab .fleet-device-card__last-update .fa {
  color: #94a3b8;
  font-size: 12px;
}

#sidebar #objects_tab .fleet-device-card__last-update-label {
  font-weight: 600;
  color: #94a3b8;
}

#sidebar #objects_tab .fleet-device-card__last-update-value {
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#sidebar #objects_tab .fleet-device-card__sensor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  flex-shrink: 0;
}

#sidebar #objects_tab .fleet-device-card__sensor .icon {
  font-size: 12px;
  line-height: 1;
}

#sidebar #objects_tab .fleet-device-card__sensor-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

#sidebar #objects_tab .fleet-device-card__sensor--on {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #16a34a;
}

#sidebar #objects_tab .fleet-device-card__sensor--off {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
  opacity: 0.85;
}

#sidebar #objects_tab .fleet-device-card__metric {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid #e8edf2;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

#sidebar #objects_tab .fleet-device-card__metric .fa,
#sidebar #objects_tab .fleet-device-card__metric .icon {
  font-size: 10px;
  line-height: 1;
  opacity: 0.85;
}

#sidebar #objects_tab .fleet-device-card__metric--engine .icon.engine {
  font-size: 11px;
  opacity: 1;
  color: #64748b;
}

#sidebar #objects_tab .fleet-device-card__metric-value.is-on {
  color: #16a34a;
}

#sidebar #objects_tab .fleet-device-card__metric-value.is-off {
  color: #94a3b8;
}

#sidebar #objects_tab .fleet-device-card__metric-value.is-unknown {
  color: #64748b;
}

#sidebar #objects_tab .fleet-device-card__metric--network {
  padding-inline: 5px;
}

#sidebar #objects_tab .fleet-device-card__metric--network .fleetoo-detail-card__device-network-value {
  font-size: 10px;
  font-weight: 600;
}

#sidebar #objects_tab .fleet-device-card__metric--network .fleetoo-signal-bars {
  transform: scale(0.78);
  transform-origin: center;
}

#sidebar #objects_tab .fleet-device-card__license-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#sidebar #objects_tab .fleet-device-card__license-btn:hover:not(:disabled) {
  background: #dbeafe;
  border-color: #93c5fd;
}

#sidebar #objects_tab .fleet-device-card__license-btn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

#sidebar #objects_tab .fleet-device-card__license-btn.is-disabled,
#sidebar #objects_tab .fleet-device-card__license-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

#sidebar #objects_tab .fleet-device-card__status {
  display: none !important;
}

#sidebar #objects_tab .fleet-device-card__media {
  flex: 0 0 auto;
  width: 88px;
  min-width: 88px;
}

#sidebar #objects_tab .fleet-device-card__vehicle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

#sidebar #objects_tab .fleet-device-card__thumb {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar #objects_tab .fleet-device-card__brand-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 25, 35, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#sidebar #objects_tab .fleet-device-card__brand-badge [data-device="vehicle-brand"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#sidebar #objects_tab .fleet-device-card__brand-badge .fleet-device-table-row__brand-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

#sidebar #objects_tab .fleet-device-card__brand-badge .fleet-device-table-row__brand--text {
  font-size: 8px;
  font-weight: 700;
  color: #64748b;
  line-height: 1;
}

#sidebar #objects_tab .fleet-device-card__brand-badge .fleet-device-table-row__brand[hidden] {
  display: none !important;
}

#sidebar #objects_tab .fleet-device-card__vehicle-meta {
  width: 100%;
  min-width: 0;
  text-align: center;
}

#sidebar #objects_tab .fleet-device-card__vehicle-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

#sidebar #objects_tab .fleet-device-card__image {
  flex: 0 0 auto;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar #objects_tab .fleet-device-card__img {
  width: auto;
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  display: block;
}

#sidebar #objects_tab .fleet-device-card__speed {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 2px;
  text-align: center;
  color: #1e293b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  gap: 1px;
}

#sidebar #objects_tab .fleet-device-card__speed-unit {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}

#sidebar #objects_tab .fleet-device-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid #eef2f7;
}

#sidebar #objects_tab .fleet-device-card__address {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5c6366;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

#sidebar #objects_tab .fleet-device-card__address-link {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

#sidebar #objects_tab .fleet-device-card__address-link:hover {
  color: var(--primary, #1a6ed8);
  text-decoration: underline;
}

#sidebar #objects_tab .fleet-device-card__address-link.is-disabled {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

#sidebar #objects_tab .fleet-device-card__address [data-device="address"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar #objects_tab .fleet-device-card__status-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--status-color, #6d7477) 28%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--status-color, #6d7477) 88%, #475569);
  background: color-mix(in srgb, var(--status-color, #6d7477) 10%, transparent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1.2;
}

#sidebar #objects_tab.objects-view-mode-table .group-list.fleet-device-list {
  margin: 0;
  padding: 0;
}

#sidebar #objects_tab .fleet-device-table-row {
  display: none;
  grid-template-columns: 34px 1fr 34px 1.1fr 52px;
  gap: 4px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  cursor: pointer;
  background: #ffffff;
}

#sidebar #objects_tab.objects-view-mode-table .fleet-device-table-row {
  display: grid;
}

#sidebar #objects_tab .fleet-device-table-row:hover {
  background: #f7fafc;
}

#sidebar #objects_tab li.fleet-device-item.active .fleet-device-table-row {
  background: color-mix(in srgb, var(--primary, #1a6ed8) 7%, #ffffff);
}

#sidebar #objects_tab .fleet-device-table-row__signal,
#sidebar #objects_tab .fleet-device-table-row__engine,
#sidebar #objects_tab .fleet-device-table-row__speed {
  text-align: center;
  color: #64748b;
}

#sidebar #objects_tab .fleet-device-table-row__signal-offline {
  color: #94a3b8;
}

#sidebar #objects_tab .fleet-device-table-row__signal-online {
  color: #2eaa5a;
}

#sidebar #objects_tab .fleet-device-table-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3d3f5c;
  font-size: 13px;
  font-weight: 700;
}

#sidebar #objects_tab .fleet-device-table-row__engine {
  font-size: 12px;
  font-weight: 700;
  color: #4a4f52;
}

#sidebar #objects_tab .fleet-device-table-row__time {
  text-align: center;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

#sidebar #objects_tab .fleet-device-table-row__speed {
  font-size: 12px;
  font-weight: 600;
}

#sidebar #objects_tab.objects-view-mode-table li.fleet-device-item > .device-visibility {
  display: none;
}

#sidebar #objects_tab.objects-view-mode-table .group-heading,
#sidebar #objects_tab.objects-view-mode-card .group-heading {
  display: none;
}

#sidebar #objects_tab.objects-view-mode-table .group-collapse.collapse,
#sidebar #objects_tab.objects-view-mode-card .group-collapse.collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}

#sidebar #objects_tab.objects-view-mode-table .group-body {
  padding: 0;
}

#sidebar #objects_tab.objects-view-mode-table .group {
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#sidebar #objects_tab.objects-view-mode-card .group-body {
  padding-bottom: 4px;
}

/* group-heading hidden — see fleetoo-ui.css and rule above */

/* Map vehicle markers */
.leaflet-default-icon-path {
  background-image: url(/assets/images/ats-map-arrow.png) !important;
}

.leaf-device-marker {
  background: transparent !important;
  border: none !important;
}

.leaflet-marker-icon.leaf-device-marker {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  /* Do not force margin:0 — Leaflet positions via negative margin from iconAnchor */
  padding: 0 !important;
  overflow: visible !important;
}

.leaf-device-marker .name {
  display: none !important;
}

.leaf-device-marker.leaf-device-selected .name {
  display: block !important;
}

.leaf-device-marker .device-map-arrow,
.leaf-device-marker .fleet-map-arrow {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.32));
  transform-origin: 50% 50%;
}

.leaf-device-marker .device-map-vehicle,
.leaf-device-marker .fleet-map-vehicle,
.leaf-device-marker .fleetoo-car-marker,
.leaf-device-marker .fleet-vehicle-marker,
.leaf-device-marker .fleet-vehicle-canvas {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 50%;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45)) drop-shadow(0 2px 6px rgba(15, 23, 42, 0.22));
}

.leaf-device-marker .fleet-vehicle-canvas {
  border: none;
}

.leaf-device-marker.leaf-device-selected .device-map-arrow,
.leaf-device-marker.leaf-device-selected .fleet-map-arrow {
  filter: drop-shadow(0 0 8px rgba(26, 110, 216, 0.5)) drop-shadow(0 2px 5px rgba(15, 23, 42, 0.35));
}

.leaf-device-marker.leaf-device-selected .device-map-vehicle,
.leaf-device-marker.leaf-device-selected .fleet-map-vehicle,
.leaf-device-marker.leaf-device-selected .fleetoo-car-marker,
.leaf-device-marker.leaf-device-selected .fleet-vehicle-marker,
.leaf-device-marker.leaf-device-selected .fleet-vehicle-canvas {
  filter: drop-shadow(0 0 7px rgba(26, 110, 216, 0.55)) drop-shadow(0 2px 6px rgba(15, 23, 42, 0.3));
}

.leaf-device-marker .name i {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(26, 110, 216, 0.22);
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.leaf-device-marker.leaf-device-selected .name:before {
  border-top-color: rgba(26, 110, 216, 0.22);
}

.leaf-device-marker.leaf-device-selected .name:after {
  border-top-color: rgba(255, 255, 255, 0.97);
}

.leaflet-overlay-pane path.leaf-device-tail {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   FLEET-style vehicle list (sidebar)
   ========================================================================== */

#sidebar #objects_tab .fleet-objects-toolbar {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 12px 8px;
  border-bottom: none;
}

#sidebar #objects_tab .fleet-objects-toolbar__search .ats-search__field {
  min-height: 40px;
  border-radius: 10px;
  background: #f8fafc;
  border-color: #e8edf3;
}

#sidebar #objects_tab .fleet-objects-toolbar__actions {
  display: none;
}

#sidebar #objects_tab .fleet-stats-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 12px 10px;
  border-bottom: 1px solid #eef2f7;
}

#sidebar #objects_tab .fleet-stats-card {
  appearance: none;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#sidebar #objects_tab .fleet-stats-card__value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

#sidebar #objects_tab .fleet-stats-card__label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: #64748b;
}

#sidebar #objects_tab .fleet-stats-card--all.is-active,
#sidebar #objects_tab .fleet-stats-card--all:hover {
  border-color: #1a6ed8;
  background: #edf4ff;
}

#sidebar #objects_tab .fleet-stats-card--all .fleet-stats-card__value {
  color: #1a6ed8;
}

#sidebar #objects_tab .fleet-stats-card.is-active {
  box-shadow: 0 0 0 1px rgba(26, 110, 216, 0.08);
}

#sidebar #objects_tab .fleet-stats-card--moving.is-active,
#sidebar #objects_tab .fleet-stats-card--moving:hover {
  border-color: #22c55e;
  background: #f0fdf4;
}

#sidebar #objects_tab .fleet-stats-card--moving .fleet-stats-card__value {
  color: #16a34a;
}

#sidebar #objects_tab .fleet-stats-card--idle.is-active,
#sidebar #objects_tab .fleet-stats-card--idle:hover {
  border-color: #f59e0b;
  background: #fffbeb;
}

#sidebar #objects_tab .fleet-stats-card--idle .fleet-stats-card__value {
  color: #d97706;
}

#sidebar #objects_tab .fleet-stats-card--stopped.is-active,
#sidebar #objects_tab .fleet-stats-card--stopped:hover {
  border-color: #ef4444;
  background: #fef2f2;
}

#sidebar #objects_tab .fleet-stats-card--stopped .fleet-stats-card__value {
  color: #dc2626;
}

#sidebar #objects_tab .fleet-list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #eef2f7;
  background: #ffffff;
}

#sidebar #objects_tab .fleet-list-controls--tabs,
#sidebar #objects_tab .fleet-list-controls--tools {
  display: flex;
}

#sidebar #objects_tab .fleet-view-toggle--inline {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border-radius: 8px;
  background: #f1f5f9;
}

#sidebar #objects_tab .fleet-view-toggle--inline .fleet-view-toggle__btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#sidebar #objects_tab .fleet-view-toggle--inline .fleet-view-toggle__btn.active {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

#sidebar #objects_tab .fleet-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

#sidebar #objects_tab .fleet-filter-tab {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
}

#sidebar #objects_tab .fleet-filter-tab.is-active {
  color: #1a6ed8;
  background: #edf4ff;
  font-weight: 700;
}

#sidebar #objects_tab .fleet-filter-tab__count::before {
  content: '(';
}

#sidebar #objects_tab .fleet-filter-tab__count::after {
  content: ')';
}

#sidebar #objects_tab .fleet-objects-table-head {
  display: none !important;
}

#sidebar #objects_tab.objects-view-mode-table .fleet-device-table-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  min-height: 58px;
  direction: ltr;
  border-bottom: 1px solid #eef2f7;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.15s ease;
}

#sidebar #objects_tab.objects-view-mode-table .fleet-device-table-row:hover {
  background: #f8fafc;
}

#sidebar #objects_tab.objects-view-mode-table li.fleet-device-item.active .fleet-device-table-row {
  background: color-mix(in srgb, #1a6ed8 8%, #ffffff);
}

#sidebar #objects_tab.objects-view-mode-table .fleet-device-table-row__speed {
  padding-inline-start: 12px;
}

#sidebar #objects_tab .fleet-device-table-row__speed {
  text-align: start;
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.25;
}

#sidebar #objects_tab .fleet-device-table-row__speed-unit {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 2px;
}

/* The sidebar metric select swaps this column between speed and ACC state. */
#sidebar #objects_tab .fleet-device-table-row__acc {
  display: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #94a3b8;
}

#sidebar #objects_tab .fleet-device-table-row__acc.is-on {
  color: #16a34a;
}

#sidebar #objects_tab .fleet-device-table-row__acc.is-off {
  color: #e03d3d;
}

#sidebar #objects_tab .is-acc-metric .fleet-device-table-row__speed-value {
  display: none;
}

#sidebar #objects_tab .is-acc-metric .fleet-device-table-row__acc {
  display: inline-block;
}

#sidebar #objects_tab .fleet-device-table-row__plate {
  display: flex;
  justify-content: center;
  min-width: 0;
}

#sidebar #objects_tab .fleet-device-table-row__plate .fleet-plate-preview {
  width: 122px;
  height: 28px;
  min-height: 28px;
}

#sidebar #objects_tab .fleet-device-table-row__plate-fallback {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-align: center;
}

#sidebar #objects_tab .fleet-device-table-row__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  text-align: end;
}

#sidebar #objects_tab .fleet-device-table-row__brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 100%;
  overflow: hidden;
  line-height: 1;
}

#sidebar #objects_tab .fleet-device-table-row__brand-img {
  display: block;
  width: auto;
  height: 18px;
  max-width: 52px;
  object-fit: contain;
}

#sidebar #objects_tab .fleet-device-table-row__brand--text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}

#sidebar #objects_tab .fleet-device-table-row__brand[hidden] {
  display: none !important;
}

#sidebar #objects_tab .fleet-device-table-row__name {
  text-align: end;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[dir="rtl"] #sidebar #objects_tab .fleet-device-table-row__name {
  text-align: end;
}

#sidebar #objects_tab.objects-view-mode-table .group-list.fleet-device-list {
  padding: 0;
}

#sidebar #objects_tab.objects-view-mode-table li.fleet-device-item {
  contain-intrinsic-size: auto 56px;
}

#sidebar #objects_tab.objects-view-mode-table li.fleet-device-item:last-child .fleet-device-table-row {
  border-bottom: none;
}

#sidebar #objects_tab .tab-pane-body {
  background: #ffffff;
}

#sidebar #objects_tab.objects-view-mode-card .fleet-list-controls .fleet-view-toggle--inline {
  display: inline-flex;
}

#sidebar #objects_tab .fleet-objects-toolbar__actions {
  display: none;
}

#sidebar #objects_tab .fleet-list-controls .fleet-view-toggle--inline {
  display: inline-flex;
  flex-shrink: 0;
}



/* ===== ats-ui/fleetoo-ui.css ===== */
/* ==========================================================================
   FLEETOO live tracking UI — full-screen map + floating panels
   ========================================================================== */

:root {
  --fleetoo-brand: #1a6ed8;
  --fleetoo-brand-hover: #1559b3;
  --fleetoo-brand-light: #edf4ff;
  --fleetoo-toolstrip-w: 32px;
  --fleetoo-map-control-icon: 14px;
  --fleetoo-sidebar-w: 360px;
  --fleetoo-panel-w: 320px;
  --fleetoo-radius: 16px;
  --fleetoo-shadow: 0 8px 32px rgba(15, 25, 35, 0.14);
}

body.fleetoo-live {
  --sidebar-w: var(--fleetoo-sidebar-w);
  --device-panel-w: var(--fleetoo-panel-w);
}

/* ---------- full-bleed map ---------- */

@media (min-width: 768px) {
  body.fleetoo-live #mapWrap {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    bottom: 0 !important;
    right: var(--rail-width) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: #f0e8e4;
  }

  body.fleetoo-live #mapWrap > #map {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

body.fleetoo-live #fleet-donut {
  display: none !important;
}

/* ---------- left toolstrip (map controls) ---------- */

@media (min-width: 768px) {
  body.fleetoo-live #map-controls {
    position: fixed;
    top: calc(56px + 14px);
    left: 10px;
    right: auto;
    bottom: auto;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: var(--fleetoo-toolstrip-w);
    pointer-events: none;
  }

  body.fleetoo-live #map-controls > div {
    pointer-events: auto;
  }

  body.fleetoo-live #map-controls .btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: none;
  }

  body.fleetoo-live #map-controls .btn-group-vertical .btn,
  body.fleetoo-live #map-controls .btn-group-vertical label.btn {
    width: var(--fleetoo-toolstrip-w);
    height: var(--fleetoo-toolstrip-w);
    min-height: var(--fleetoo-toolstrip-w);
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(15, 25, 35, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: background 0.15s ease, color 0.15s ease;
  }

  body.fleetoo-live #map-controls .btn-group-vertical .btn:hover,
  body.fleetoo-live #map-controls .btn-group-vertical label.btn:hover {
    background: #ffffff;
    color: var(--primary, #1a6ed8);
  }

  body.fleetoo-live #map-controls .btn-group-vertical .btn.active,
  body.fleetoo-live #map-controls .btn-group-vertical .btn.active:hover,
  body.fleetoo-live #map-controls .btn-group-vertical label.btn.active,
  body.fleetoo-live #map-controls .btn-group-vertical label.btn.active:hover {
    background: var(--primary, #1a6ed8);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(26, 110, 216, 0.3);
  }

  body.fleetoo-live #map-controls .btn-group-vertical .btn .icon,
  body.fleetoo-live #map-controls .btn-group-vertical label.btn .icon,
  body.fleetoo-live #map-type-controls .map-type-controls .btn .icon {
    width: var(--fleetoo-map-control-icon);
    height: var(--fleetoo-map-control-icon);
    font-size: var(--fleetoo-map-control-icon);
    line-height: 1;
  }

  body.fleetoo-live #map-controls .btn-group-vertical .btn .icon::before,
  body.fleetoo-live #map-controls .btn-group-vertical label.btn .icon::before,
  body.fleetoo-live #map-type-controls .map-type-controls .btn .icon::before {
    font-size: var(--fleetoo-map-control-icon) !important;
    line-height: 1;
  }

  body.fleetoo-live #map-type-controls .map-type-controls {
    gap: 4px;
  }

  body.fleetoo-live #map-type-controls .btn.active,
  body.fleetoo-live #map-type-controls .btn.active:hover {
    background: var(--primary, #1a6ed8);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(26, 110, 216, 0.3);
  }

  /* keep fullscreen expand hidden; show the rest of the toolstrip */
  body.fleetoo-live #map-controls > div:first-child {
    display: none !important;
  }

  body.fleetoo-live #map-controls-layers {
    display: block;
  }

  body.fleetoo-live #map-controls > div:nth-child(2),
  body.fleetoo-live #map-controls > div:nth-child(3),
  body.fleetoo-live #map-controls > div:nth-child(4),
  body.fleetoo-live #map-controls > div:nth-child(5) {
    display: block;
  }
}

/* ---------- floating right vehicle list ---------- */

@media (min-width: 768px) {
  body.fleetoo-live #sidebar {
    position: fixed !important;
    top: calc(56px + 12px) !important;
    bottom: 12px !important;
    right: calc(var(--rail-width) + 12px) !important;
    left: auto !important;
    width: var(--fleetoo-sidebar-w) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: var(--fleetoo-radius);
    box-shadow: var(--fleetoo-shadow);
    border: none;
    overflow: hidden;
    z-index: 1001;
    background: #ffffff !important;
    transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease;
  }

  body.fleetoo-live #sidebar.collapsed {
    width: 0 !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(12px);
  }

  body.fleetoo-live #sidebar .sidebar-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--fleetoo-radius);
    overflow: hidden;
  }

  body.fleetoo-live #sidebar .sidebar-content > .tab-content {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.fleetoo-live #sidebar #objects_tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  body.fleetoo-live #sidebar #objects_tab .tab-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* ---------- left vehicle detail panel ---------- */

@media (min-width: 768px) {
  body.fleetoo-live .fleetoo-left-column {
    position: fixed;
    top: calc(56px + 14px);
    left: calc(10px + var(--fleetoo-toolstrip-w) + 10px);
    bottom: auto;
    z-index: 1001;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 56px - 28px);
    overflow: visible;
    scrollbar-width: none;
  }

  body.fleetoo-live .fleetoo-left-column::-webkit-scrollbar {
    display: none;
  }

  body.fleetoo-live #device-card,
  body.fleetoo-live #device-panel {
    position: relative;
    pointer-events: auto;
    width: var(--fleetoo-panel-w);
    max-width: min(380px, calc(100vw - 120px));
    max-height: calc(100vh - 56px - 28px);
    overflow: hidden;
  }

  body.fleetoo-live .map-left-float-stack {
    bottom: calc(12px);
    left: calc(10px + var(--fleetoo-toolstrip-w) + 10px);
  }
}

@media (max-width: 767px) {
  body.fleetoo-live #device-card,
  body.fleetoo-live #device-panel {
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(72vh, calc(100vh - 120px));
    overflow: hidden;
  }
}

/* ---------- FLEETOO detail card ---------- */

.fleetoo-detail-card {
  background: #ffffff;
  border-radius: var(--fleetoo-radius);
  box-shadow: var(--fleetoo-shadow);
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

/* Header and footer stay pinned; only the middle column scrolls. */
.fleetoo-detail-card__header,
.fleetoo-detail-card__footer {
  flex: 0 0 auto;
}

.fleetoo-detail-card__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.fleetoo-detail-card__scroll::-webkit-scrollbar {
  width: 6px;
}

.fleetoo-detail-card__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.fleetoo-detail-card__scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.fleetoo-detail-card__scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.fleetoo-detail-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f1f5f9;
}

.fleetoo-detail-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.fleetoo-detail-card__close {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #ef4444;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.fleetoo-detail-card__close:hover {
  background: #fef2f2;
}

.fleetoo-detail-card__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.fleetoo-detail-card__image {
  flex-shrink: 0;
  width: 72px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fleetoo-detail-card__image img,
.fleetoo-detail-card__image .vehicle-info-card__img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
}

.fleetoo-detail-card__identity-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.fleetoo-detail-card__name {
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleetoo-detail-card__identity-text > [data-device="vehicle-brand"] {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  line-height: 1;
}

.fleetoo-detail-card__identity-text > [data-device="vehicle-brand"][hidden] {
  display: none;
}

.fleetoo-detail-card__identity-text .fleet-device-table-row__brand-img {
  display: block;
  width: auto;
  height: 20px;
  max-width: 72px;
  object-fit: contain;
}

.fleetoo-detail-card__identity-text .fleet-device-table-row__brand--text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.fleetoo-detail-card__plate {
  display: block;
  max-width: 100%;
  font-size: 12px;
}

.fleetoo-detail-card__plate .fleet-plate-preview,
.fleetoo-detail-card__plate .sa-plate__preview {
  display: flex;
  flex-direction: row;
  direction: ltr;
  width: 168px;
  max-width: 100%;
  height: 36px;
  min-height: 36px;
  aspect-ratio: unset;
  border-width: 2px;
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__stripe,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__stripe {
  flex: 0 0 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 3px 2px 5px;
  gap: 0;
  border-right-width: 1px;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__stripe::after,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__stripe::after {
  bottom: 3px;
  width: 4px;
  height: 4px;
}

.fleetoo-detail-card__plate .fleet-plate-preview.sa-plate__preview--public_transport .sa-plate__stripe::after,
.fleetoo-detail-card__plate .fleet-plate-preview.sa-plate__preview--commercial .sa-plate__stripe::after,
.fleetoo-detail-card__plate .sa-plate__preview.sa-plate__preview--public_transport .sa-plate__stripe::after,
.fleetoo-detail-card__plate .sa-plate__preview.sa-plate__preview--commercial .sa-plate__stripe::after {
  border-left-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 4px;
}

.fleetoo-detail-card__plate .fleet-plate-preview.sa-plate__preview--commercial .sa-plate__stripe::after,
.fleetoo-detail-card__plate .sa-plate__preview.sa-plate__preview--commercial .sa-plate__stripe::after {
  border-top-width: 4px;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__ksa,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__ksa {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__country-ar,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__country-ar {
  display: none;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__body,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__section,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 2px;
  min-width: 0;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__section--digits,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__section--digits {
  flex: 1.15 1 auto;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__section--letters,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__section--letters {
  flex: 0.85 1 auto;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__divider,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__divider {
  flex: 0 0 1px;
  width: 1px;
  margin: 4px 0;
  align-self: stretch;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__slot,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__slot {
  flex: 0 0 auto;
  gap: 0;
  min-width: 0;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__slot-ar,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__slot-ar {
  display: none;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__slot-en,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__slot-en {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-width: 1px;
  border-radius: 3px;
}

.fleetoo-detail-card__plate .fleet-plate-preview .sa-plate__slot-display,
.fleetoo-detail-card__plate .sa-plate__preview .sa-plate__slot-display {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  min-height: 0;
}

.fleetoo-detail-card__gprs {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
}

.fleetoo-detail-card__gprs-btn {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fleetoo-detail-card__gprs-btn .fa {
  font-size: 11px;
}

.fleetoo-detail-card__gprs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fleetoo-detail-card__gprs-btn--start {
  border: 1px solid #22c55e;
  color: #16a34a;
}

.fleetoo-detail-card__gprs-btn--start:hover:not(:disabled) {
  background: #f0fdf4;
}

.fleetoo-detail-card__gprs-btn--stop {
  border: 1px solid #ef4444;
  color: #ef4444;
}

.fleetoo-detail-card__gprs-btn--stop:hover:not(:disabled) {
  background: #fef2f2;
}

.fleetoo-detail-card__gprs-btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.fleetoo-detail-card__section {
  padding: 0 16px 14px;
  border-top: 1px solid #f1f5f9;
}

.fleetoo-detail-card__section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 10px 0 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: start;
}

.fleetoo-detail-card__section-chevron {
  flex: 0 0 auto;
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.fleetoo-detail-card__section.is-collapsed .fleetoo-detail-card__section-chevron {
  transform: rotate(-90deg);
}

.fleetoo-detail-card__section.is-collapsed .fleetoo-detail-card__section-body {
  display: none;
}

.fleetoo-detail-card__section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.fleetoo-detail-card__section--vehicle-data .fleetoo-detail-card__section-toggle {
  padding-top: 8px;
}

[dir="rtl"] .fleetoo-detail-card__section-chevron {
  transform: rotate(0);
}

[dir="rtl"] .fleetoo-detail-card__section.is-collapsed .fleetoo-detail-card__section-chevron {
  transform: rotate(90deg);
}

.fleetoo-detail-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Falls back to two columns on narrow panels instead of clipping the values. */
.fleetoo-detail-card__vehicle-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
}

.fleetoo-detail-card__vehicle-stat {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 8px;
  background: #f8fafc;
  min-width: 0;
}

.fleetoo-detail-card__vehicle-stat-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.fleetoo-detail-card__vehicle-stat-icon .icon,
.fleetoo-detail-card__vehicle-stat-icon .fa {
  font-size: 12px;
  line-height: 1;
}

.fleetoo-detail-card__vehicle-stat-icon.is-toned {
  color: var(--stat-icon-color);
  background: color-mix(in srgb, var(--stat-icon-color) 14%, #ffffff);
}

.fleetoo-detail-card__vehicle-stat-icon.is-online {
  color: #16a34a;
  background: #dcfce7;
}

.fleetoo-detail-card__vehicle-stat-icon.is-stopped {
  color: #ca8a04;
  background: #fef9c3;
}

.fleetoo-detail-card__vehicle-stat-icon.is-offline {
  color: #dc2626;
  background: #fee2e2;
}

.fleetoo-detail-card__vehicle-stat-icon.is-engine {
  color: #2563eb;
  background: #dbeafe;
}

.fleetoo-detail-card__vehicle-stat-icon.is-blocked {
  color: #64748b;
  background: #e2e8f0;
}

.fleetoo-detail-card__vehicle-stat-icon.is-moving {
  color: #16a34a;
  background: #dcfce7;
}

.fleetoo-detail-card__vehicle-stat-icon.is-idle {
  color: #64748b;
  background: #f1f5f9;
}

.fleetoo-detail-card__vehicle-stat-icon.is-on {
  color: #16a34a;
  background: #dcfce7;
}

.fleetoo-detail-card__vehicle-stat-icon.is-off {
  color: #dc2626;
  background: #fee2e2;
}

.fleetoo-detail-card__vehicle-stat-icon.is-unknown {
  color: #94a3b8;
  background: #f8fafc;
}

.fleetoo-detail-card__vehicle-stat-icon.is-good {
  color: #16a34a;
  background: #dcfce7;
}

.fleetoo-detail-card__vehicle-stat-icon.is-warn {
  color: #d97706;
  background: #ffedd5;
}

.fleetoo-detail-card__vehicle-stat-icon.is-bad {
  color: #dc2626;
  background: #fee2e2;
}

.fleetoo-detail-card__vehicle-stat-icon.is-neutral {
  color: #2563eb;
  background: #dbeafe;
}

.fleetoo-detail-card__vehicle-stat-icon.is-active {
  color: #ea580c;
  background: #ffedd5;
}

.fleetoo-detail-card__vehicle-stat-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fleetoo-detail-card__vehicle-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleetoo-detail-card__vehicle-stat-value {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fleetoo-detail-card__vehicle-stat-value--sats,
.fleetoo-detail-card__vehicle-stat[data-stat="satellites"] .fleetoo-detail-card__vehicle-stat-value {
  overflow-wrap: normal;
  word-break: normal;
}

.fleetoo-detail-card__vehicle-stat[data-stat="satellites"] .fleetoo-detail-card__vehicle-stat-value [data-device="satellites"] {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  color: #1e293b;
}

.fleetoo-detail-card__vehicle-stat[data-stat="satellites"] .fleetoo-detail-card__vehicle-stat-icon .icon.satellites {
  font-size: 13px;
}

.fleetoo-detail-card__vehicle-stat-unit {
  font-size: 8px;
  font-weight: 600;
  color: #94a3b8;
  margin-inline-start: 2px;
}

.fleetoo-detail-card__ignition-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  background: #f1f5f9;
  color: #64748b;
}

.fleetoo-detail-card__ignition-switch::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.fleetoo-detail-card__ignition-switch.is-on {
  background: #dcfce7;
  color: #16a34a;
}

.fleetoo-detail-card__ignition-switch.is-on::before {
  opacity: 1;
  background: #22c55e;
}

.fleetoo-detail-card__ignition-switch.is-off {
  background: #fee2e2;
  color: #dc2626;
}

.fleetoo-detail-card__ignition-switch.is-off::before {
  opacity: 1;
  background: #ef4444;
}

.fleetoo-detail-card__ignition-switch.is-unknown::before {
  background: #94a3b8;
}

.fleetoo-detail-card__vehicle-sensors {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.fleetoo-detail-card__vehicle-sensors-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.fleetoo-detail-card__vehicle-sensors-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
}

.fleetoo-detail-card__sensors-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: var(--primary, #1a6ed8);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fleetoo-detail-card__sensors-add-btn:hover {
  background: color-mix(in srgb, var(--primary, #1a6ed8) 8%, white);
  border-color: color-mix(in srgb, var(--primary, #1a6ed8) 25%, #e2e8f0);
}

.fleetoo-detail-card__sensors-add-btn .icon {
  font-size: 11px;
}

.fleetoo-detail-card__vehicle-sensors-label .icon {
  font-size: 11px;
}

.fleetoo-detail-card__vehicle-sensors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fleetoo-detail-card__sensor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 9px;
  line-height: 1.2;
  color: #475569;
}

.fleetoo-detail-card__sensor-chip .icon {
  flex-shrink: 0;
  font-size: 11px;
}

.fleetoo-detail-card__sensor-chip-img {
  width: 11px;
  height: 11px;
  object-fit: contain;
  flex-shrink: 0;
}

.fleetoo-detail-card__sensor-chip-name {
  font-weight: 600;
  color: #64748b;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleetoo-detail-card__sensor-chip-value {
  font-weight: 700;
  color: #1e293b;
}

.fleetoo-detail-card__sensor-chip--on {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.fleetoo-detail-card__sensor-chip--off {
  border-color: #fecaca;
  background: #fef2f2;
}

.fleetoo-detail-card__sensors-empty {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
}

.fleetoo-detail-card__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}

.fleetoo-detail-card__metric-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 14px;
}

.fleetoo-detail-card__metric-value {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.fleetoo-detail-card__metric-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

.fleetoo-detail-card__device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 12px;
  color: #475569;
}

.fleetoo-detail-card__device-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px 14px;
  padding: 8px 0;
  align-items: start;
}

.fleetoo-detail-card__device-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.fleetoo-detail-card__device-label {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}

.fleetoo-detail-card__device-value {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleetoo-detail-card__device-value[data-device="device_last_update"] {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  display: block;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleetoo-detail-card__device-value[data-device="device_network"] {
  overflow: visible;
  text-overflow: clip;
  isolation: isolate;
}

.fleetoo-detail-card__device-network-value {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.fleetoo-detail-card__device-network-number {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.fleetoo-signal-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex-shrink: 0;
}

.fleetoo-signal-bars__bar {
  width: 3px;
  border-radius: 1px;
  background: #cbd5e1;
}

.fleetoo-signal-bars__bar:nth-child(1) { height: 4px; }
.fleetoo-signal-bars__bar:nth-child(2) { height: 7px; }
.fleetoo-signal-bars__bar:nth-child(3) { height: 10px; }
.fleetoo-signal-bars__bar:nth-child(4) { height: 13px; }

.fleetoo-signal-bars--1 .fleetoo-signal-bars__bar:nth-child(1) { background: #ef4444; }
.fleetoo-signal-bars--2 .fleetoo-signal-bars__bar:nth-child(-n+2) { background: #f59e0b; }
.fleetoo-signal-bars--3 .fleetoo-signal-bars__bar:nth-child(-n+3) { background: #84cc16; }
.fleetoo-signal-bars--4 .fleetoo-signal-bars__bar { background: #22c55e; }

.fleetoo-detail-card__trips {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fleetoo-detail-card__trip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  color: #475569;
  line-height: 1.45;
}

.fleetoo-detail-card__trip-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
}

.fleetoo-detail-card__trip-dot--start {
  background: #f59e0b;
}

.fleetoo-detail-card__trip-dot--end {
  background: #8b5cf6;
}

.fleetoo-detail-card__driver {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 0;
}

.fleetoo-detail-card__driver-behavior {
  margin-top: 6px;
}

.fleetoo-detail-card__behavior-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fleetoo-detail-card__behavior-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #f1f5f9;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.fleetoo-detail-card__behavior-chip-label {
  font-weight: 600;
  color: #94a3b8;
}

.fleetoo-detail-card__behavior-chip-value {
  font-weight: 800;
  color: #334155;
}

.fleetoo-detail-card__behavior-chip[data-tone="good"] {
  background: #ecfdf3;
}

.fleetoo-detail-card__behavior-chip[data-tone="good"] .fleetoo-detail-card__behavior-chip-value {
  color: #15803d;
}

.fleetoo-detail-card__behavior-chip[data-tone="warn"] {
  background: #fffbeb;
}

.fleetoo-detail-card__behavior-chip[data-tone="warn"] .fleetoo-detail-card__behavior-chip-value {
  color: #b45309;
}

.fleetoo-detail-card__behavior-chip[data-tone="bad"] {
  background: #fef2f2;
}

.fleetoo-detail-card__behavior-chip[data-tone="bad"] .fleetoo-detail-card__behavior-chip-value {
  color: #b91c1c;
}

.fleetoo-detail-card__behavior-chip--error[data-tone="good"] {
  background: #eef2ff;
}

.fleetoo-detail-card__behavior-chip--error[data-tone="good"] .fleetoo-detail-card__behavior-chip-value {
  color: #4338ca;
}

.fleetoo-detail-card__driver-behavior-period {
  display: none;
}

.fleetoo-detail-card__driver-behavior-empty {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.3;
}

.fleetoo-detail-card__driver-behavior.is-loading .fleetoo-detail-card__behavior-chips {
  opacity: 0.5;
}

.fleetoo-detail-card__driver-behavior.is-loading .fleetoo-detail-card__behavior-chip-value {
  color: #94a3b8;
}

.fleetoo-detail-card__driver-body {
  flex: 1 1 auto;
  min-width: 0;
}

.fleetoo-detail-card__driver-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
}

.fleetoo-detail-card__driver-meta-label {
  flex-shrink: 0;
  font-weight: 600;
}

.fleetoo-detail-card__driver-meta-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: #334155;
}

.fleetoo-detail-card__driver-call {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #edf4ff;
  color: #1a6ed8;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.fleetoo-detail-card__driver-call:hover,
.fleetoo-detail-card__driver-call:focus {
  background: #dbeafe;
  color: #1559b3;
  text-decoration: none;
}

.fleetoo-detail-card__driver-call.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.fleetoo-detail-card__driver-call .fa {
  font-size: 18px;
}

body.fleetoo-live #map-driver-license[hidden] {
  display: none !important;
}

body.fleetoo-live #map-driver-license.is-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: 24px;
  pointer-events: auto;
}

body.fleetoo-live #map-driver-license.is-open .map-driver-license__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

body.fleetoo-live #map-driver-license.is-open .map-driver-license__dialog {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: min(400px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: visible;
  pointer-events: none;
  animation: map-driver-license-in 0.22s ease;
}

body.fleetoo-live #map-driver-license.is-open .map-driver-license__inner {
  width: 100%;
  height: auto;
  overflow: visible;
  background: transparent;
  pointer-events: auto;
}

body.fleetoo-live #map-driver-license.is-open .sa-license-face {
  position: relative;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  transform: none;
  transform-origin: center center;
  box-shadow: 0 16px 40px rgba(15, 25, 35, 0.22);
  border-radius: 10px;
}

body.fleetoo-live #map-driver-license.is-open .map-driver-license__close {
  display: none !important;
}

@keyframes map-driver-license-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 580px) {
  body.fleetoo-live #map-driver-license.is-open {
    padding: 16px;
  }

  body.fleetoo-live #map-driver-license.is-open .map-driver-license__dialog {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }

  body.fleetoo-live #map-driver-license.is-open .sa-license-face {
    max-width: min(360px, calc(100vw - 32px));
  }
}

.fleetoo-detail-card__driver-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 18px;
  overflow: hidden;
  flex-shrink: 0;
}

.fleetoo-detail-card__driver-avatar .fleetoo-detail-card__driver-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.fleetoo-detail-card__driver-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

.fleetoo-detail-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px 14px;
  border-top: 1px solid #f1f5f9;
}

.fleetoo-detail-card__footer-btn {
  appearance: none;
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.fleetoo-detail-card__footer-btn:hover {
  background: #f1f5f9;
  color: var(--primary, #6d28d9);
}

/* hide legacy widgets in fleetoo panel */
body.fleetoo-live #device-card.is-open #widget-vehicle-info,
body.fleetoo-live #device-panel.is-open #widget-vehicle-info {
  display: flex !important;
}

/*
 * Height chain: the panel is capped to the viewport, every wrapper forwards that
 * constraint, and the detail card turns the leftover space into its scroll area.
 */
body.fleetoo-live #device-card,
body.fleetoo-live #device-panel {
  flex-direction: column;
}

body.fleetoo-live #device-card #widgets .widgets-content--vehicle-info,
body.fleetoo-live #device-panel #widgets .widgets-content--vehicle-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body.fleetoo-live #device-card #widgets #widget-vehicle-info,
body.fleetoo-live #device-panel #widgets #widget-vehicle-info {
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: 100%;
  height: auto !important;
}

body.fleetoo-live #device-card #widgets,
body.fleetoo-live #device-panel #widgets,
body.fleetoo-live #device-card #widgets .widgets-content,
body.fleetoo-live #device-panel #widgets .widgets-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.fleetoo-live #device-card #widgets #widget-vehicle-info,
body.fleetoo-live #device-panel #widgets #widget-vehicle-info {
  background: #ffffff !important;
  box-shadow: var(--fleetoo-shadow) !important;
  border: none !important;
  border-radius: var(--fleetoo-radius) !important;
  opacity: 1 !important;
}

/* ---------- scope filter bar (group / region) ---------- */

#sidebar #objects_tab .fleetoo-scope-bar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0 12px 10px;
  border-bottom: 1px solid #eef2f7;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select {
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select > .dropdown-toggle {
  min-height: 40px;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid #e8edf3 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  background-image: none !important;
  color: #334155 !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

html[dir="ltr"] #sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select > .dropdown-toggle {
  padding: 0 12px 0 34px;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select > .dropdown-toggle:hover {
  border-color: #dbe3ec !important;
  background: #ffffff !important;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.open > .dropdown-toggle,
#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select > .dropdown-toggle:focus {
  border-color: #1a6ed8 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select .bs-caret,
#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select .dropdown-toggle .caret {
  color: #94a3b8 !important;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.fleetoo-scope-bar__picker--mode {
  flex: 0 0 38%;
  max-width: 128px;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.fleetoo-scope-bar__picker--value {
  flex: 1 1 auto;
  min-width: 0;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.is-hidden {
  display: none !important;
}

#sidebar #objects_tab .fleetoo-scope-bar:not(.fleetoo-scope-bar--expanded) .bootstrap-select.fleetoo-scope-bar__picker--mode {
  flex: 1 1 auto;
  max-width: none;
}

/* Scope bar dropdown inherits platform bootstrap-select panel styles */
#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.btn-group,
#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.open.btn-group {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.open > .dropdown-toggle,
#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.open > .dropdown-toggle:focus,
#sidebar #objects_tab .fleetoo-scope-bar .bootstrap-select.open > .dropdown-toggle:hover {
  box-shadow: none !important;
  outline: none !important;
}

/* legacy/global fallback outside sidebar tab context */
.fleetoo-scope-bar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  margin: 0 12px 10px;
}

body.fleetoo-live #sidebar #objects_tab .group-heading {
  display: none !important;
}

body.fleetoo-live #sidebar #objects_tab .group-heading > .group-title:after {
  display: none !important;
  content: none !important;
}

body.fleetoo-live #sidebar #objects_tab .group-collapse.collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}

body.fleetoo-live #sidebar #objects_tab .group {
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body.fleetoo-live #sidebar #objects_tab .group-body {
  padding: 0;
}

body.fleetoo-live #sidebar #objects_tab .fleet-list-controls--tabs {
  display: block;
  padding: 0 12px 6px;
  border-bottom: none;
}

body.fleetoo-live #sidebar #objects_tab .fleet-list-controls--tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 10px;
  border-bottom: 1px solid #eef2f7;
}

body.fleetoo-live #sidebar #objects_tab .fleet-list-controls--tabs .fleet-filter-tabs {
  width: 100%;
}

.fleetoo-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 8px;
}

.fleetoo-sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 32px;
  min-height: 32px;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat left 10px center;
  padding: 0 10px 0 28px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fleetoo-sort-select:hover {
  border-color: #dbe3ec;
}

.fleetoo-sort-select:focus {
  outline: none;
  border-color: #1a6ed8;
  box-shadow: 0 0 0 3px rgba(26, 110, 216, 0.12);
}

html[dir="ltr"] .fleetoo-sort-select {
  background-position: right 10px center;
  padding: 0 28px 0 10px;
}

/* ---------- map marker label (FLEETOO style) ---------- */

.leaf-device-marker .fleetoo-marker-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

.leaf-device-marker .fleetoo-marker-label--compact .fleetoo-marker-label__card {
  padding: 3px 7px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.12);
}

.leaf-device-marker .fleetoo-marker-label--compact .fleetoo-marker-label__name {
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 600;
}

#map.leaflet-hidden-name .leaf-device-marker:not(.leaf-device-selected) .fleetoo-marker-label {
  display: none !important;
}

.leaf-device-marker .fleetoo-marker-label__card {
  background: rgba(255, 255, 255, 0.97);
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(15, 25, 35, 0.12);
}

.leaf-device-marker .fleetoo-marker-label__name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.leaf-device-marker .fleetoo-marker-label__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  direction: ltr;
}

.leaf-device-marker .fleetoo-marker-label__meta > * + * {
  border-left: 1px solid #d5dde7;
  padding-left: 6px;
}

.leaf-device-marker .fleetoo-marker-label__plate {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  unicode-bidi: isolate;
}

.leaf-device-marker .fleetoo-marker-label__speed {
  font-size: 10px;
  font-weight: 700;
  color: #1a6ed8;
  unicode-bidi: isolate;
}

.leaf-device-marker.leaf-device-selected {
  z-index: 1000 !important;
}

body.fleetoo-live #map-gprs-controls {
  display: none !important;
}

body.fleetoo-live .gprs-password-modal,
body.fleetoo-live #gprs-command-password-modal {
  z-index: 2000;
}

body.fleetoo-live .modal-backdrop {
  z-index: 1990;
}

body.fleetoo-live #device-card:not(.is-open),
body.fleetoo-live #device-panel:not(.is-open) {
  display: none;
}

body.fleetoo-live #device-card.is-open,
body.fleetoo-live #device-panel.is-open {
  display: flex;
}

/* ==========================================================================
   Notifications drawer (FLEETOO-style, ATS blue)
   ========================================================================== */

.fleetoo-notify-backdrop {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

body.fleetoo-notify-open {
  overflow: hidden;
}

.fleetoo-notify-drawer {
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  width: min(380px, 92vw);
  z-index: 1050;
  background: #ffffff;
  box-shadow: 8px 0 32px rgba(15, 25, 35, 0.16);
  display: flex;
  flex-direction: column;
  transform: translateX(-104%);
  transition: transform 0.28s ease;
  overflow: hidden;
}

html[dir="rtl"] .fleetoo-notify-drawer {
  left: 0;
  right: auto;
  box-shadow: 8px 0 32px rgba(15, 25, 35, 0.16);
}

.fleetoo-notify-drawer.is-open {
  transform: translateX(0);
}

.fleetoo-notify-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 10px;
}

.fleetoo-notify-drawer__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
}

.fleetoo-notify-drawer__title .fa-bell {
  color: #1a6ed8;
  font-size: 18px;
}

.fleetoo-notify-drawer__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fleetoo-notify-drawer__action {
  appearance: none;
  border: none;
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.fleetoo-notify-drawer__action:hover {
  background: #f1f5f9;
  color: #1a6ed8;
}

.fleetoo-notify-drawer__tabs {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid #eef2f7;
}

.fleetoo-notify-drawer__tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.fleetoo-notify-drawer__tab.is-active {
  color: #1a6ed8;
}

.fleetoo-notify-drawer__tab.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #1a6ed8;
}

.fleetoo-notify-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 16px;
}

.fleetoo-notify-drawer__pane {
  display: none;
}

.fleetoo-notify-drawer__pane.is-active {
  display: block;
}

/* ---- alert rules tab: quick on/off only, full manager lives elsewhere ---- */
.fleetoo-notify-drawer__pane--rules.is-active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.fleetoo-notify-rules {
  flex: 1 1 auto;
  padding: 8px 12px 4px;
}

.fleetoo-notify-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.fleetoo-notify-section-head__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #1a6ed8;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  padding: 2px 4px;
}

.fleetoo-notify-section-head__btn:hover {
  text-decoration: underline;
}

.fleetoo-notify-empty--compact {
  padding: 16px 8px;
}

.fleetoo-notify-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 10px;
}

.fleetoo-notify-profile + .fleetoo-notify-profile {
  border-top: 1px solid #eef1f5;
}

.fleetoo-notify-profile:hover {
  background: #f8fafc;
}

.fleetoo-notify-profile.is-off .fleetoo-notify-profile__name {
  color: #64748b;
}

.fleetoo-notify-profile__text {
  flex: 1 1 auto;
  min-width: 0;
}

.fleetoo-notify-profile__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleetoo-notify-profile__meta {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleetoo-notify-profile__edit {
  appearance: none;
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fleetoo-notify-profile__edit:hover {
  background: #edf4ff;
  color: #1a6ed8;
}

.fleetoo-notify-customs {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid #eef2f7;
}

.fleetoo-notify-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
}

.fleetoo-notify-rule + .fleetoo-notify-rule {
  border-top: 1px solid #eef1f5;
}

.fleetoo-notify-rule:hover {
  background: #f8fafc;
}

.fleetoo-notify-rule__text {
  min-width: 0;
}

.fleetoo-notify-rule__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleetoo-notify-rule__type {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

.fleetoo-notify-rule.is-off .fleetoo-notify-rule__name {
  color: #64748b;
}

.fleetoo-notify-rules__manage {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 8px 12px 0;
  padding: 10px 14px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fff;
  color: #1a6ed8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.fleetoo-notify-rules__manage:hover {
  background: #f1f6fd;
  border-color: #1a6ed8;
}

.fleetoo-notify-drawer__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.fleetoo-notify-drawer__date .fa {
  color: #94a3b8;
  font-size: 14px;
}

.fleetoo-notify-drawer__list {
  display: flex;
  flex-direction: column;
}

.fleetoo-notify-empty {
  padding: 40px 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

.fleetoo-notify-item {
  appearance: none;
  border: none;
  background: #ffffff;
  width: 100%;
  text-align: inherit;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 42px;
  gap: 12px;
  align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fleetoo-notify-item:hover {
  background: #f8fafc;
}

.fleetoo-notify-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  margin-top: 7px;
}

.fleetoo-notify-item--unread .fleetoo-notify-item__dot {
  background: #1a6ed8;
}

.fleetoo-notify-item__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fleetoo-notify-item__title {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.45;
}

.fleetoo-notify-item__desc {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.5;
}

.fleetoo-notify-item__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 2px;
}

.fleetoo-notify-item__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1a6ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fleetoo-notify-item__icon .icon {
  font-size: 18px;
  line-height: 1;
}

.fleetoo-notify-more {
  padding: 14px 18px 4px;
  text-align: center;
}

.fleetoo-notify-more__btn {
  appearance: none;
  border: 1px solid #dbe3ec;
  background: #fff;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 700;
  color: #1a6ed8;
  cursor: pointer;
}

.fleetoo-notify-more__btn:hover {
  background: #f1f6fd;
  border-color: #1a6ed8;
}

/* ---------- inbox filters ---------- */

.fleetoo-notify-filters {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.fleetoo-notify-search {
  position: relative;
  display: block;
}

.fleetoo-notify-search .fa {
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
}

.fleetoo-notify-search input {
  width: 100%;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
  padding-inline: 34px 12px;
  font-size: 13px;
  color: #1e293b;
  outline: none;
}

.fleetoo-notify-search input:focus {
  border-color: #1a6ed8;
  background: #fff;
}

.fleetoo-notify-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-inline: -4px;
  padding-inline: 4px;
  padding-bottom: 2px;
}

.fleetoo-notify-chip {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fleetoo-notify-chip:hover {
  border-color: #c7d5e6;
  color: #1e293b;
}

.fleetoo-notify-chip.is-active {
  background: #1a6ed8;
  border-color: #1a6ed8;
  color: #fff;
}

.fleetoo-notify-chip__count {
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.fleetoo-notify-chip.is-active .fleetoo-notify-chip__count {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.fleetoo-notify-unread {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}

/* ---------- settings tab ---------- */

.notify-settings {
  --notify-ink: #0f172a;
  --notify-muted: #64748b;
  --notify-line: #e8eef5;
  --notify-soft: #f5f8fc;
  --notify-brand: #1a6ed8;
  --notify-brand-soft: #edf4ff;
  padding: 16px 16px 20px;
}

.notify-settings__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--notify-line);
}

.notify-settings__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--notify-ink);
  letter-spacing: -0.01em;
}

.notify-settings__lede {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--notify-muted);
}

.notify-settings__status {
  min-height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.notify-settings__status.is-saved {
  color: #16a34a;
}

.notify-settings__status.is-error {
  color: #dc2626;
}

.notify-settings__section + .notify-settings__section {
  margin-top: 20px;
}

.notify-settings__section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.notify-settings__section-copy {
  min-width: 0;
}

.notify-settings__heading {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.notify-settings__section-hint {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--notify-muted);
}

.notify-settings__channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.notify-settings__channel {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--notify-line);
  border-radius: 12px;
  background: #fff;
}

.notify-settings__channel.is-locked {
  opacity: 0.55;
  background: var(--notify-soft);
}

.notify-settings__channel-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--notify-brand-soft);
  color: var(--notify-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.notify-settings__channel-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notify-settings__channel-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--notify-ink);
}

.notify-settings__channel-hint {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.4;
}

.notify-settings__bulk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.notify-settings__bulk-btn {
  appearance: none;
  border: 1px solid var(--notify-line);
  border-radius: 10px;
  background: #fff;
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--notify-brand);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.notify-settings__bulk-btn:hover {
  border-color: var(--notify-brand);
  background: var(--notify-brand-soft);
}

.notify-settings__bulk-btn--muted {
  color: var(--notify-muted);
}

.notify-settings__bulk-btn--muted:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.notify-settings__groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notify-settings__group {
  border: 1px solid var(--notify-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.notify-settings__group-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--notify-soft);
  cursor: pointer;
  list-style: none;
}

.notify-settings__group-head::-webkit-details-marker {
  display: none;
}

.notify-settings__group-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--notify-line);
  color: var(--notify-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.notify-settings__group-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notify-settings__group-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--notify-ink);
  line-height: 1.3;
}

.notify-settings__group-desc {
  font-size: 11px;
  font-weight: 500;
  color: var(--notify-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notify-settings__group-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.notify-settings__group-count {
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--notify-line);
  color: var(--notify-muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.notify-settings__group-chevron {
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.18s ease;
}

.notify-settings__group[open] .notify-settings__group-chevron {
  transform: rotate(180deg);
}

.notify-settings__group[open] .notify-settings__group-head {
  border-bottom: 1px solid var(--notify-line);
  background: #fff;
}

.notify-settings__group-body {
  padding: 0 0 4px;
}

.notify-settings__legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 4px;
}

.notify-settings__legend-channels,
.notify-settings__event-channels {
  display: grid;
  grid-template-columns: repeat(var(--notify-channel-count, 4), 34px);
  gap: 6px;
  justify-content: end;
}

.notify-settings__legend-cell {
  width: 34px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #94a3b8;
}

.notify-settings__event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #f1f5f9;
}

.notify-settings__event:first-of-type {
  border-top: none;
}

.notify-settings__event-copy {
  min-width: 0;
}

.notify-settings__event-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

.notify-settings__event-desc {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notify-settings__chip {
  margin: 0;
  font-weight: 600;
  cursor: pointer;
  display: block;
}

.notify-settings__chip.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.notify-settings__chip-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.notify-settings__chip-face {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--notify-line);
  border-radius: 10px;
  background: #fff;
  color: #94a3b8;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.notify-settings__chip-face .fa {
  font-size: 12px;
}

.notify-settings__chip:hover .notify-settings__chip-face {
  border-color: #c7d5e6;
  color: var(--notify-brand);
}

.notify-settings__chip-face:has(> .notify-settings__chip-input:checked) {
  background: var(--notify-brand);
  border-color: var(--notify-brand);
  color: #fff;
  box-shadow: 0 4px 10px rgba(26, 110, 216, 0.22);
}

/* A master channel switched off dims that channel on every event below. */
.notify-settings.is-off-popup .notify-settings__chip:has([data-notify-channel-cell="popup"]),
.notify-settings.is-off-push .notify-settings__chip:has([data-notify-channel-cell="push"]),
.notify-settings.is-off-email .notify-settings__chip:has([data-notify-channel-cell="email"]),
.notify-settings.is-off-sms .notify-settings__chip:has([data-notify-channel-cell="sms"]) {
  opacity: 0.35;
  pointer-events: none;
}

@media (min-width: 360px) {
  .notify-settings__channels {
    grid-template-columns: 1fr 1fr;
  }

  .notify-settings__channel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: start;
    min-height: 118px;
    align-content: space-between;
  }

  .notify-settings__channel .ats-switch {
    margin-top: 4px;
  }
}

/* ---------- alert rule switch tint ---------- */

.alerts-switch input:checked + .ats-switch__slider {
  background: #16a34a;
}

.alerts-switch.is-locked {
  opacity: 0.5;
  pointer-events: none;
}

#topbar .topbar-notify {
  background: #1a6ed8;
}

@media (max-width: 767px) {
  .fleetoo-notify-drawer {
    width: min(100vw, 380px);
  }
}

/* ---------- follow map dialog + embed ---------- */

.ui-dialog.fleetoo-follow-dialog {
  border: none;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 25, 35, 0.22);
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.ui-dialog.fleetoo-follow-dialog .ui-dialog-titlebar,
.ui-dialog.fleetoo-follow-dialog .fleetoo-follow-dialog__titlebar {
  position: relative;
  display: block;
  padding: 10px 36px 10px 10px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 14px 14px 0 0;
  cursor: move;
}

.ui-dialog.fleetoo-follow-dialog .ui-dialog-title {
  display: none !important;
}

.fleetoo-follow-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.fleetoo-follow-dialog__vehicle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.fleetoo-follow-dialog__thumb {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fleetoo-follow-dialog__thumb [data-device="vehicle_image"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.fleetoo-follow-dialog__thumb .vehicle-info-card__img {
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}

.fleetoo-follow-dialog__brand {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 25, 35, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fleetoo-follow-dialog__brand [data-device="vehicle-brand"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.fleetoo-follow-dialog__brand .fleet-device-table-row__brand-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.fleetoo-follow-dialog__brand .fleet-device-table-row__brand--text {
  font-size: 8px;
  font-weight: 700;
  color: #64748b;
  line-height: 1;
}

.fleetoo-follow-dialog__meta {
  min-width: 0;
  flex: 1 1 auto;
}

.fleetoo-follow-dialog__name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.fleetoo-follow-dialog__plate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fleetoo-follow-dialog__plate {
  display: block;
  margin-bottom: 0;
  max-width: 168px;
  flex: 0 0 auto;
}

.fleetoo-follow-dialog__speed {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f1f5f9;
  line-height: 1.1;
  flex: 0 0 auto;
}

.fleetoo-follow-dialog__speed-value {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.fleetoo-follow-dialog__speed-unit {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview,
.fleetoo-follow-dialog__plate .sa-plate__preview {
  display: flex;
  flex-direction: row;
  direction: ltr;
  width: 168px;
  max-width: 100%;
  height: 36px;
  min-height: 36px;
  aspect-ratio: unset;
  border-width: 2px;
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__stripe,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__stripe {
  flex: 0 0 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 3px 2px 5px;
  gap: 0;
  border-right-width: 1px;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__stripe::after,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__stripe::after {
  bottom: 3px;
  width: 4px;
  height: 4px;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__ksa,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__ksa {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__body,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__section,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 2px;
  min-width: 0;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__section--digits,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__section--digits {
  flex: 1.15 1 auto;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__section--letters,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__section--letters {
  flex: 0.85 1 auto;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__divider,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__divider {
  flex: 0 0 1px;
  width: 1px;
  margin: 4px 0;
  align-self: stretch;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__slot,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__slot {
  flex: 0 0 auto;
  gap: 0;
  min-width: 0;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__slot-en,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__slot-en {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-width: 1px;
  border-radius: 3px;
}

.fleetoo-follow-dialog__plate .fleet-plate-preview .sa-plate__slot-display,
.fleetoo-follow-dialog__plate .sa-plate__preview .sa-plate__slot-display {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  min-height: 0;
}

.fleetoo-follow-dialog__plate .fleet-device-card__plate-fallback {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}

.fleetoo-follow-dialog__driver {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 72px;
  min-width: 0;
}

.fleetoo-follow-dialog__driver .fleetoo-detail-card__driver-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
}

.fleetoo-follow-dialog__driver .fleetoo-detail-card__driver-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fleetoo-follow-dialog__driver-name {
  font-size: 9px;
  font-weight: 600;
  color: #475569;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ui-dialog.fleetoo-follow-dialog .ui-dialog-titlebar-close {
  position: absolute;
  top: 8px;
  right: 8px;
  transform: none;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.ui-dialog.fleetoo-follow-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog.fleetoo-follow-dialog .ui-dialog-titlebar-close:focus {
  background: #f1f5f9;
  color: #0f172a;
}

.ui-dialog.fleetoo-follow-dialog .ui-dialog-content {
  padding: 0;
  overflow: hidden;
  background: #e8eef4;
}

.fleetoo-follow-dialog__frame,
.fleetoo-follow-dialog__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ui-dialog.fleetoo-follow-dialog .ui-resizable-se {
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  background: transparent;
}

body.fleetoo-follow-map {
  margin: 0;
  overflow: hidden;
  background: #e8eef4;
  --fleetoo-follow-tool-w: 24px;
  --fleetoo-follow-icon-size: 11px;
}

body.fleetoo-follow-map #loading {
  display: none !important;
}

body.fleetoo-follow-map #map {
  position: fixed;
  inset: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body.fleetoo-follow-map #map-controls {
  position: fixed;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--fleetoo-follow-tool-w, 24px);
  pointer-events: none;
}

body.fleetoo-follow-map #map-controls > div {
  pointer-events: auto;
}

body.fleetoo-follow-map #map-controls .btn-group-vertical,
body.fleetoo-follow-map #map-type-controls .map-type-controls {
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: none;
}

body.fleetoo-follow-map #map-controls .btn-group-vertical .btn,
body.fleetoo-follow-map #map-type-controls .map-type-controls .btn {
  width: var(--fleetoo-follow-tool-w, 24px);
  height: var(--fleetoo-follow-tool-w, 24px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(15, 25, 35, 0.08);
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.fleetoo-follow-map #map-controls .btn-group-vertical .btn:hover,
body.fleetoo-follow-map #map-type-controls .map-type-controls .btn:hover {
  background: #ffffff;
  color: var(--primary, #1a6ed8);
}

body.fleetoo-follow-map #map-type-controls .map-type-controls .btn.active,
body.fleetoo-follow-map #map-type-controls .map-type-controls .btn.active:hover {
  background: var(--primary, #1a6ed8);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(26, 110, 216, 0.3);
}

body.fleetoo-follow-map #map-controls .btn-group-vertical .btn .icon,
body.fleetoo-follow-map #map-type-controls .map-type-controls .btn .icon {
  width: var(--fleetoo-follow-icon-size, 11px);
  height: var(--fleetoo-follow-icon-size, 11px);
  font-size: var(--fleetoo-follow-icon-size, 11px);
  line-height: 1;
  background-size: contain;
}

body.fleetoo-follow-map #map-controls .btn .icon::before {
  font-size: var(--fleetoo-follow-icon-size, 11px) !important;
}

body.fleetoo-follow-map #map-controls .map-layers-picker {
  display: none !important;
}

[dir="rtl"] .ui-dialog.fleetoo-follow-dialog .ui-dialog-titlebar,
[dir="rtl"] .ui-dialog.fleetoo-follow-dialog .fleetoo-follow-dialog__titlebar {
  padding: 8px 10px 8px 36px;
}

[dir="rtl"] .ui-dialog.fleetoo-follow-dialog .ui-dialog-titlebar-close {
  right: auto;
  left: 8px;
}

[dir="rtl"] .fleetoo-follow-dialog__brand {
  right: auto;
  left: -2px;
}

[dir="rtl"] body.fleetoo-follow-map #map-controls {
  left: auto;
  right: 8px;
}

/* ===== ats-ui/commands.css ===== */
/* ==========================================================================
   Command logs panel — side panel over tracking map (geographic style)
   ========================================================================== */

.command-logs-page {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(440px, 92vw);
  height: 100%;
  z-index: 660;
  background: var(--background, #f4f6f9);
  border-inline-end: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(15, 25, 35, 0.12);
  overflow: hidden;
  pointer-events: auto;
}

.command-logs-page.is-open {
  display: flex;
  flex-direction: column;
}

.command-logs-page__content {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.command-logs-page__content::-webkit-scrollbar {
  width: 6px;
}

.command-logs-page__content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, #cbd5e1);
  border-radius: 999px;
}

body.command-logs-open {
  overscroll-behavior: none;
}

body.command-logs-open #map,
body.command-logs-open #map-controls {
  visibility: visible !important;
  pointer-events: auto !important;
}

body.command-logs-open #fleet-donut,
body.command-logs-open #map-driver-license,
body.command-logs-open #locate-card, body.command-logs-open #locate-panel,
body.command-logs-open #history-results-card, body.command-logs-open #history-results-panel,
body.command-logs-open .map-gprs-controls {
  visibility: hidden !important;
  pointer-events: none !important;
}

.command-logs-dashboard {
  padding: 16px 16px 32px;
}

.command-logs-panel__body {
  padding-top: 4px;
}

.command-logs-panel__body .table-list {
  font-size: 12px;
}

.command-logs-panel__body .table-list thead th {
  white-space: nowrap;
}

.command-logs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  color: var(--muted-foreground);
  text-align: center;
}

.command-logs-empty i {
  font-size: 28px;
  opacity: 0.55;
}

@media (max-width: 767px) {
  .command-logs-page {
    width: min(360px, 96vw);
  }
}

/* ===== ats-ui/geographic.css ===== */
/* ==========================================================================
   Geographic module — side panel over tracking map
   ========================================================================== */

.geographic-page {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: min(440px, 92vw);
  max-width: 92vw;
  height: 100%;
  z-index: 1200;
  direction: ltr;
  unicode-bidi: isolate;
  background: var(--background, #f4f6f9);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(15, 25, 35, 0.12);
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
}

.geographic-page.is-open {
  display: flex;
  flex-direction: column;
}

.geographic-page__content {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.geographic-page__content::-webkit-scrollbar {
  width: 6px;
}

.geographic-page__content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, #cbd5e1);
  border-radius: 999px;
}

body.geographic-panel-open .geographic-page__content {
  overflow: hidden !important;
}

body.geographic-open {
  overscroll-behavior: none;
  --geographic-panel-w: min(440px, 92vw);
}

/* Map uses the area beside the panel (not hidden underneath it) */
@media (min-width: 769px) {
  body.geographic-open #mapWrap > #map {
    left: calc(var(--geographic-panel-w) + var(--map-gap, 14px)) !important;
    transition: left 0.22s ease;
  }

  body.fleetoo-live.geographic-open #mapWrap > #map {
    left: var(--geographic-panel-w) !important;
  }

  body.fleetoo-live.geographic-open #map-controls {
    left: calc(var(--geographic-panel-w) + 10px);
  }
}

body.geographic-open #mapWrap > #geographic_page.geographic-page.is-open,
body.geographic-open #mapWrap > #geographic-form-panel.is-open {
  z-index: 1200;
}

body.geographic-open #mapWrap > #geographic-form-panel.is-open {
  z-index: 1300;
}

body.geographic-open #map,
body.geographic-open #map-controls {
  visibility: visible !important;
  pointer-events: auto !important;
}

body.geographic-open #fleet-donut,
body.geographic-open #map-driver-license,
body.geographic-open #locate-card, body.geographic-open #locate-panel,
body.geographic-open #history-results-card, body.geographic-open #history-results-panel,
body.geographic-open .map-gprs-controls {
  visibility: hidden !important;
  pointer-events: none !important;
}

.geographic-dashboard {
  padding: 16px 16px 32px;
}

/* Hero */
.geographic-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px;
  margin-bottom: 14px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: #fff;
}

.geographic-hero__content h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.geographic-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 12px;
  line-height: 1.45;
}

.geographic-hero__actions {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
}

.geographic-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

.geographic-hero .geographic-hero__btn.btn-light,
.geographic-hero .geographic-tool-hero-btn {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.geographic-hero .geographic-hero__btn.btn-outline-light,
.geographic-hero #geographic-refresh-btn,
.geographic-hero #geographic-close-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.geographic-hero .geographic-hero__btn.btn-outline-light:hover,
.geographic-hero #geographic-refresh-btn:hover,
.geographic-hero #geographic-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

.geographic-hero .geographic-hero__btn.btn-light:hover,
.geographic-hero .geographic-tool-hero-btn:hover {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Stats */
.geographic-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.geographic-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.geographic-stat-card--primary {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.geographic-stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.geographic-stat-card__icon--landmarks {
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
}

.geographic-route-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.geographic-route-status.is-loading {
  color: #1a6ed8;
  border-color: color-mix(in srgb, #1a6ed8 20%, #e2e8f0);
  background: color-mix(in srgb, #1a6ed8 6%, #fff);
}

.geographic-route-status.is-ready {
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a 22%, #e2e8f0);
  background: color-mix(in srgb, #16a34a 8%, #fff);
}

.geographic-route-status.is-error {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 22%, #e2e8f0);
  background: color-mix(in srgb, #dc2626 8%, #fff);
}

.geographic-stat-card__icon--routes {
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
}

.geographic-stat-card__icon--active-regions {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}

.geographic-stat-card__icon--active-landmarks {
  background: color-mix(in srgb, #8b5cf6 14%, white);
  color: #7c3aed;
}

.geographic-stat-card__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.geographic-stat-card__label {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

/* Main panel */
.geographic-table-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.geographic-table-panel__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.geographic-table-panel__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.geographic-table-panel__tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.geographic-map-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  color: var(--secondary-foreground);
  font-size: 11px;
  line-height: 1.45;
}

.geographic-map-note i {
  color: var(--primary);
  margin-top: 2px;
}

.geographic-search {
  position: relative;
  width: 100%;
}

.geographic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.geographic-filter {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted, #f1f5f9) 55%, white);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.geographic-filter.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.geographic-sidebar__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.geographic-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-md, 8px) !important;
  font-size: 11px;
  font-weight: 600;
}

.geographic-workspace {
  display: block;
}

.geographic-sidebar__list {
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--muted, #f1f5f9) 35%, white);
  min-height: 120px;
}

.geographic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  user-select: none;
}

.geographic-item__body {
  flex: 1;
  min-width: 0;
}

.geographic-item__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  opacity: 1;
}

.geographic-item__btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--secondary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  transition: all 0.15s ease;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.geographic-item__btn--edit:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, white);
}

.geographic-item__btn--delete:hover {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 35%, var(--border));
  background: color-mix(in srgb, #dc2626 8%, white);
}

.geographic-form-panel:not(.is-open),
#geographic-form-panel:not(.is-open),
.geographic-form-panel[aria-hidden="true"],
#geographic-form-panel[aria-hidden="true"],
.geographic-form-card:not(.is-open),
#geographic-form-card:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.geographic-form-panel:not(.is-open) .geographic-form-panel__sheet,
.geographic-form-panel:not(.is-open) .geographic-form-panel__body,
#geographic-form-panel:not(.is-open) .geographic-form-panel__sheet,
#geographic-form-panel:not(.is-open) .geographic-form-panel__body {
  display: none !important;
}

.geographic-item:hover {
  background: color-mix(in srgb, var(--primary) 8%, white);
}

.geographic-item.is-selected {
  background: color-mix(in srgb, var(--primary) 12%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}

.geographic-item.is-inactive {
  opacity: 0.55;
}

.geographic-item__icon {
  width: 32px;
  text-align: center;
  color: var(--primary);
  flex-shrink: 0;
  height: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.geographic-item__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--foreground);
}

.geographic-item__meta {
  font-size: 11px;
  color: var(--secondary-foreground);
}

.geographic-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--secondary-foreground);
}

.geographic-empty i {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
  color: var(--primary);
}

/* Map hint on tracking map */
#geographic-map-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1310;
  background: color-mix(in srgb, var(--primary) 92%, #000);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(15, 25, 35, 0.18);
}

body.geographic-open #geographic-map-hint {
  margin-inline-start: min(220px, 46vw);
}

/* Form panel stacks on the side list — map stays interactive */
.geographic-form-panel,
#geographic-form-panel,
.geographic-form-card,
#geographic-form-card {
  display: none;
  pointer-events: none;
}

.geographic-form-panel.is-open,
#geographic-form-panel.is-open {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  width: min(440px, 92vw);
  max-width: 92vw;
  bottom: 0;
  z-index: 1300;
  direction: ltr;
  unicode-bidi: isolate;
  pointer-events: none;
  isolation: isolate;
}

.geographic-form-panel__backdrop {
  display: none;
}

.geographic-form-panel__sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
  background: var(--card);
  box-shadow: 4px 0 32px rgba(15, 25, 35, 0.16);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
}

.geographic-form-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, white), var(--card));
}

.geographic-form-panel__header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.geographic-form-panel__close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--secondary-foreground);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.geographic-form-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}

.geographic-form-hint {
  margin-bottom: 14px;
}

.geographic-shape-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.geographic-shape-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 12px 10px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--muted, #f1f5f9) 35%, white);
  cursor: pointer;
  transition: all 0.18s ease;
  margin: 0;
  text-align: center;
}

.geographic-shape-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, white);
}

.geographic-shape-card.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.geographic-shape-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.geographic-shape-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, white);
}

.geographic-shape-card.is-selected .geographic-shape-card__icon {
  background: var(--primary);
  color: #fff;
}

.geographic-shape-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground);
}

.geographic-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.geographic-color-swatch {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 0;
  cursor: pointer;
}

.geographic-color-swatch__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.geographic-color-swatch__dot {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(15, 25, 35, 0.12),
    0 1px 3px rgba(15, 25, 35, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.geographic-color-swatch:hover .geographic-color-swatch__dot {
  transform: scale(1.06);
}

.geographic-color-swatch.is-selected .geographic-color-swatch__dot {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--primary);
  transform: scale(1.04);
}

.geographic-region-form > .form-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.geographic-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.geographic-groups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.geographic-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.geographic-group-row__field {
  flex: 1;
  min-width: 0;
}

.geographic-group-row__field .form-control {
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
}

.geographic-group-row__remove {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #e03d3d 25%, var(--border));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, #e03d3d 8%, white);
  color: #e03d3d;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.geographic-group-row__remove:hover {
  background: color-mix(in srgb, #e03d3d 14%, white);
  border-color: color-mix(in srgb, #e03d3d 45%, var(--border));
}

.geographic-groups-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  border-radius: var(--radius-md, 8px) !important;
  font-size: 12px;
  font-weight: 600;
}

.geographic-groups-add.is-hidden {
  display: none !important;
}

.geographic-groups-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--muted, #f1f5f9) 40%, white);
  color: color-mix(in srgb, var(--foreground) 65%, #64748b);
  text-align: center;
}

.geographic-groups-empty i {
  font-size: 28px;
  opacity: 0.55;
}

.geographic-groups-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.geographic-groups-form > .form-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.geographic-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  position: relative;
  z-index: 0;
}

.geographic-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--muted, #f1f5f9) 40%, white);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  margin: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.geographic-icon-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, white);
}

.geographic-icon-card.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.geographic-icon-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.geographic-icon-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
}

.geographic-icon-card__img img {
  width: 36px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(15, 25, 35, 0.12));
}

.geographic-icon-card__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--secondary-foreground);
  line-height: 1.25;
}

.geographic-icon-card.is-selected .geographic-icon-card__label {
  color: var(--primary);
}

.geographic-item__icon img {
  width: 24px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(15, 25, 35, 0.15));
}

@media (max-width: 768px) {
  body.geographic-open {
    --geographic-panel-w: min(360px, 96vw);
  }

  body.geographic-open #mapWrap > #map {
    left: var(--geographic-panel-w) !important;
  }

  .geographic-page,
  .geographic-form-panel.is-open {
    width: min(360px, 96vw);
    max-width: 96vw;
  }

  body.geographic-open #geographic-map-hint {
    margin-inline-start: 0;
    top: auto;
    bottom: 14px;
    white-space: normal;
    max-width: calc(100% - 28px);
    text-align: center;
  }
}

/*
 * Map-side shell — same physical left in Arabic (RTL) and English (LTR).
 * Inner .geographic-dashboard keeps dir=rtl for Arabic text.
 */
html[dir="rtl"] #geographic_page.geographic-page,
html[dir="ltr"] #geographic_page.geographic-page,
html[dir="rtl"] #geographic_page.geographic-page.is-open,
html[dir="ltr"] #geographic_page.geographic-page.is-open,
html[dir="rtl"] #geographic-form-panel.geographic-form-panel.is-open,
html[dir="ltr"] #geographic-form-panel.geographic-form-panel.is-open,
#geographic-form-panel.geographic-form-panel.is-open .geographic-form-panel__sheet {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

html[dir="rtl"] #geographic_page.geographic-page.is-open,
html[dir="ltr"] #geographic_page.geographic-page.is-open,
html[dir="rtl"] #geographic-form-panel.geographic-form-panel.is-open,
html[dir="ltr"] #geographic-form-panel.geographic-form-panel.is-open {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  inset: 0 auto 0 0 !important;
  width: min(440px, 92vw) !important;
  max-width: 92vw !important;
  margin: 0 !important;
  transform: none !important;
}

/* Map draw / edit vertex markers */
body.geographic-draw-mode .ats-draw-vertex-icon,
body.geographic-draw-mode .leaflet-div-icon.leaflet-editing-icon,
body.geographic-draw-mode .leaflet-marker-icon.leaflet-editing-icon {
  background: var(--primary) !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(15, 25, 35, 0.28) !important;
  width: 12px !important;
  height: 12px !important;
  margin-left: -6px !important;
  margin-top: -6px !important;
}

body.geographic-draw-mode .ats-draw-vertex-icon--touch {
  width: 16px !important;
  height: 16px !important;
  margin-left: -8px !important;
  margin-top: -8px !important;
}

body.geographic-draw-mode .leaflet-editing-icon.leaflet-edit-marker-selected,
body.geographic-draw-mode .leaflet-marker-icon.leaflet-edit-marker-selected {
  background: #fff !important;
  border: 3px solid var(--primary) !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: -7px !important;
  margin-top: -7px !important;
}

body.geographic-draw-mode .leaflet-draw-guide-dash {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 75%, white) !important;
  border: 2px solid #fff;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.22);
}

body.geographic-draw-mode .leaflet-draw-tooltip {
  background: color-mix(in srgb, var(--foreground) 88%, black);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(15, 25, 35, 0.2);
}

body.geographic-draw-mode .leaflet-draw-tooltip:before {
  border-right-color: color-mix(in srgb, var(--foreground) 88%, black);
}

.geographic-confirm:not(.is-open),
.geographic-confirm[aria-hidden="true"],
#geographic-confirm-dialog:not(.is-open),
#geographic-confirm-dialog[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Delete confirm dialog */
.geographic-confirm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

.geographic-confirm.is-open {
  display: flex;
  pointer-events: auto;
}

.geographic-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 35, 0.42);
  backdrop-filter: blur(2px);
}

.geographic-confirm__sheet {
  position: relative;
  width: min(380px, calc(100vw - 32px));
  padding: 18px;
  border-radius: var(--radius-lg, 12px);
  background: var(--card);
  box-shadow: 0 18px 48px rgba(15, 25, 35, 0.22);
  border: 1px solid var(--border);
}

.geographic-confirm__callout {
  margin-bottom: 16px;
}

.geographic-confirm__title {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.geographic-confirm__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--foreground) 82%, #64748b);
}

.geographic-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.geographic-confirm__actions .btn {
  min-width: 96px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
}

body.geographic-draw-mode #map,
body.geographic-draw-mode #mapWrap,
body.geographic-draw-mode .leaflet-container {
  cursor: crosshair;
}

/* ===== ats-ui/alert-profiles.css ===== */
/* ==========================================================================
   Alert profile editor — same shell pattern as logistics / expenses
   ========================================================================== */

.alert-profile-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 650;
  background: var(--background, #f4f6f9);
  overflow: hidden;
}

.alert-profile-page.is-open {
  display: flex;
  flex-direction: column;
}

.alert-profile-page__content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.alert-profile-page__content::-webkit-scrollbar {
  width: 6px;
}

.alert-profile-page__content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, #cbd5e1);
  border-radius: 999px;
}

body.alert-profile-open {
  overscroll-behavior: none;
}

body.alert-profile-open #map,
body.alert-profile-open #map-controls,
body.alert-profile-open #fleet-donut,
body.alert-profile-open #map-driver-license,
body.alert-profile-open #locate-card, body.alert-profile-open #locate-panel,
body.alert-profile-open #history-results-card, body.alert-profile-open #history-results-panel,
body.alert-profile-open #device-card, body.alert-profile-open #device-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.alert-profile-open #map.leaflet-container,
body.alert-profile-open .leaflet-container {
  pointer-events: none !important;
}

/* ---------- dashboard ---------- */

.alert-profile-dashboard {
  padding: 20px 24px 64px;
}

/* ---------- hero (clone of logistics/expenses) ---------- */

.alert-profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #1e3a8a) 100%);
  color: #fff;
}

.alert-profile-hero__content h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.alert-profile-hero__content p {
  margin: 0;
  opacity: 0.9;
  font-size: 13px;
}

.alert-profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.alert-profile-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
  white-space: nowrap;
}

.alert-profile-hero .alert-profile-hero__btn.btn-light {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.alert-profile-hero .alert-profile-hero__btn.btn-outline-light {
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
}

.alert-profile-hero .alert-profile-hero__btn.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.alert-profile-hero .alert-profile-hero__btn.btn-light:hover {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: transparent !important;
}

/* ---------- stats ---------- */

.alert-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.alert-profile-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.alert-profile-stat-card--primary {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.alert-profile-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
}

.alert-profile-stat-card__icon--zones {
  background: color-mix(in srgb, #8b5cf6 14%, white);
  color: #7c3aed;
}

.alert-profile-stat-card__icon--types {
  background: color-mix(in srgb, #f59e0b 14%, white);
  color: #d97706;
}

.alert-profile-stat-card__icon--status {
  background: color-mix(in srgb, #10b981 14%, white);
  color: #059669;
}

.alert-profile-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.alert-profile-stat-card__label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.alert-profile-stat-card__hint {
  font-size: 11px;
  color: var(--secondary-foreground);
  margin-top: 4px;
}

/* ---------- panels ---------- */

.alert-profile-panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alert-profile-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 25, 35, 0.04);
}

.alert-profile-panel__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.alert-profile-panel__head h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.alert-profile-panel__head p {
  margin: 0;
  font-size: 12px;
  color: var(--secondary-foreground);
}

.alert-profile-panel__body {
  padding: 18px;
}

.alert-profile-errors {
  margin-bottom: 16px;
}

.alert-profile-errors ul {
  margin: 0;
  padding-inline-start: 18px;
}

.alert-profile-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.alert-profile-scope-grid .alert-profile-field--zones {
  grid-column: span 1;
}

/* ---------- fields ---------- */

.alert-profile-field {
  margin-bottom: 0;
  min-width: 0;
}

.alert-profile-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.alert-profile-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--secondary-foreground);
}

.alert-profile-select + .bootstrap-select,
.alert-profile-field .bootstrap-select {
  width: 100% !important;
}

.alert-profile-field .bootstrap-select > .dropdown-toggle {
  min-height: 38px;
}

.alert-profile-zone-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.alert-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px !important;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  position: relative;
}

.alert-profile-chip::before,
.alert-profile-chip::after {
  content: none !important;
  display: none !important;
}

.alert-profile-chip input[type="checkbox"] {
  position: static !important;
  inset: auto !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  appearance: auto;
  -webkit-appearance: checkbox;
  pointer-events: auto !important;
  flex-shrink: 0;
}

.alert-profile-chip:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, white);
  color: var(--primary);
}

/* ---------- types ---------- */

.alert-profile-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
}

.alert-profile-group {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  min-width: 0;
}

.alert-profile-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  list-style: none;
}

.alert-profile-group__head::-webkit-details-marker {
  display: none;
}

.alert-profile-group__head .fa {
  color: var(--primary);
  flex-shrink: 0;
}

.alert-profile-group__count {
  margin-inline-start: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.alert-profile-group__count.is-on {
  background: color-mix(in srgb, var(--primary) 15%, #fff);
  color: var(--primary);
}

.alert-profile-group__body {
  display: flex;
  flex-direction: column;
}

.alert-profile-type {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #f1f5f9;
  min-width: 0;
}

.alert-profile-type .ats-switch {
  flex-shrink: 0;
}

.alert-profile-type.is-locked {
  opacity: 0.55;
}

.alert-profile-type__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alert-profile-type__title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-profile-type__lock {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
}

.alert-profile-type__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.alert-profile-type__value input {
  width: 64px;
  height: 30px;
  text-align: center;
}

.alert-profile-type__unit {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  min-width: 24px;
}

/* ---------- delivery ---------- */

.alert-profile-delivery {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.alert-profile-delivery__card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.alert-profile-delivery__card-head {
  margin-bottom: 12px;
}

.alert-profile-delivery__card-head h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.alert-profile-delivery__card-head p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.alert-profile-schedule {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alert-profile-schedule__master {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.alert-profile-schedule__master .ats-switch {
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-profile-schedule__master-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.alert-profile-schedule__master-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.alert-profile-schedule__master-text span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.alert-profile-schedule__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.15s ease;
}

.alert-profile-schedule__panel.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.alert-profile-schedule__presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.alert-profile-schedule__preset {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.alert-profile-schedule__preset .fa {
  color: var(--primary);
  width: 14px;
  text-align: center;
}

.alert-profile-schedule__preset:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, #e2e8f0);
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  color: var(--primary);
}

.alert-profile-schedule__preset--muted .fa {
  color: #94a3b8;
}

.alert-profile-schedule__days {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert-profile-schedule__day {
  display: grid;
  grid-template-columns: auto minmax(72px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.alert-profile-schedule__day.is-on {
  border-color: color-mix(in srgb, var(--primary) 28%, #e2e8f0);
  background: color-mix(in srgb, var(--primary) 4%, #fff);
}

.alert-profile-schedule__day-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}

.alert-profile-schedule__day-times {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.alert-profile-schedule__day:not(.is-on) .alert-profile-schedule__day-times {
  opacity: 0.45;
  pointer-events: none;
}

.alert-profile-schedule__time {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
  flex: 1 1 90px;
}

.alert-profile-schedule__time span {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.alert-profile-schedule__time .form-control {
  height: 34px;
  padding: 4px 8px;
  font-size: 12px;
}

.alert-profile-schedule__time-sep {
  color: #94a3b8;
  font-weight: 700;
  padding-bottom: 8px;
}

.alert-profile-schedule__allday {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.alert-profile-schedule__allday:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, #e2e8f0);
  color: var(--primary);
  background: #fff;
}

.alert-profile-notifications {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding: 2px;
}

.alert-profile-notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.alert-profile-notification .ats-switch {
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-profile-notification__body {
  flex: 1 1 auto;
  min-width: 0;
}

.alert-profile-notification__title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}

.alert-profile-notification__input {
  margin-top: 4px;
}

.alert-profile-notification__input .form-control {
  width: 100%;
  max-width: 100%;
}

.alert-profile-color {
  width: 56px !important;
  height: 36px;
  padding: 2px 4px;
  cursor: pointer;
}

.alert-profile-notification__desc {
  display: block;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.4;
}

/* DragSelect overlays stay inside the schedule card */
.alert-profile-delivery__card {
  position: relative;
}

.alert-profile-page .ds-selector {
  z-index: 2;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .alert-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alert-profile-scope-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alert-profile-delivery {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .alert-profile-dashboard {
    padding: 12px 12px 48px;
  }

  .alert-profile-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .alert-profile-hero__actions {
    justify-content: stretch;
  }

  .alert-profile-hero__btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .alert-profile-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .alert-profile-types {
    grid-template-columns: minmax(0, 1fr);
  }

  .alert-profile-schedule__day {
    grid-template-columns: auto 1fr;
  }

  .alert-profile-schedule__day-times {
    grid-column: 1 / -1;
  }

  .alert-profile-schedule__presets {
    grid-template-columns: minmax(0, 1fr);
  }
}