/* ============================================================
 * GeoGo Supervisor Dashboard — DARK THEME (colors only)
 * IMPORTANT: This file ONLY changes colors/backgrounds/borders.
 * NO layout changes (no padding, margin, font-size, width,
 * height, transform) — the original bundle CSS controls layout.
 * Applied: 2026-04-10
 * ============================================================ */

:root {
  /* ---------- Surfaces (dark → lighter) ---------- */
  --bg-deepest:   #0B1220;
  --bg-primary:   #0F172A;  /* slate-900 */
  --bg-secondary: #1E293B;  /* slate-800 */
  --bg-tertiary:  #273449;
  --bg-elevated:  #334155;  /* slate-700 */
  --bg-input:     #0F172A;
  --bg-header:    #1A2436;

  /* ---------- Borders ---------- */
  --border:        #334155;
  --border-subtle: #1E293B;
  --border-strong: #475569;

  /* ---------- Text (NOT pure white) ---------- */
  --text-primary:   #7aa6e1;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;
  --text-faint:     #64748B;

  /* ---------- Brand ---------- */
  --color-primary:       #3B82F6;
  --color-primary-hover: #60A5FA;
  --color-primary-dim:   rgba(59, 130, 246, 0.18);
  --color-primary-glow:  rgba(59, 130, 246, 0.35);

  /* ---------- Status ---------- */
  --color-success:      #34D399;
  --color-success-bg:   rgba(52, 211, 153, 0.14);
  --color-warning:      #FBBF24;
  --color-warning-bg:   rgba(251, 191, 36, 0.14);
  --color-danger:       #F87171;
  --color-danger-bg:    rgba(248, 113, 113, 0.14);
  --color-panic:        #EF4444;
  --color-panic-bg:     rgba(239, 68, 68, 0.10);
  --color-panic-active: rgba(239, 68, 68, 0.20);
  --color-price:        #FCD34D;

  /* ---------- Row variants (same bg as header panel) ---------- */
  --bg-row:         #1E293B;  /* same as header panel (--bg-secondary) */
  --bg-row-hover:   #273449;  /* slightly lighter on hover */
  --bg-row-active:  rgba(59, 130, 246, 0.22);
  --border-row:     rgba(96, 165, 250, 0.28);  /* light blue separator */
}

/* ============================================================
 * GLOBAL
 * ============================================================ */
html, body,
.main-content, .content-wrap, .page-content,
#container, .app-container {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Remove text-shadows globally — cleaner on dark theme */
body,
body *,
.panel-item,
.main-panel,
.header-panel,
.right-panel,
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, label, td, th {
  text-shadow: none !important;
}

body {
  color-scheme: dark;
}

body[base] {
  background-color: var(--bg-primary) !important;
}

html {
  background-color: var(--bg-primary) !important;
}

#container-loader {
  background-color: var(--bg-primary) !important;
}

/* ============================================================
 * HEADER PANEL
 * ============================================================ */
.header-panel,
.header-panel_main,
.header-panel_main.-dispatcher {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.header-panel_label {
  color: var(--text-faint) !important;
}

.header-panel-addon,
.header-panel-addon.-dispatcher {
  background-color: var(--bg-header) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.-desc-text {
  color: var(--text-faint) !important;
}

/* ============================================================
 * ICON SWITCHERS (counter pills) — flat, no bg/border
 * ============================================================ */
.icon-switcher,
.icon-switcher_inner {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}

.icon-switcher:hover,
.icon-switcher_inner:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

.icon-switcher.-active,
.icon-switcher_inner.-active {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-primary-hover) !important;
}

.icon-switcher_bottom {
  color: var(--text-muted) !important;
}

.icon-switcher.-active .icon-switcher_bottom,
.icon-switcher_inner.-active .icon-switcher_bottom {
  color: var(--color-primary-hover) !important;
}

/* ============================================================
 * SELECT DROPDOWN
 * ============================================================ */
.select-chosen {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.select-chosen:hover {
  border-color: var(--border-strong) !important;
}

/* Select dropdown list items — transparent on hover/selected (was #F1F5F9 in bundle) */
.select-item,
.select-item.sub {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.select-item:hover,
.select-item.sub:hover,
.select-item.-selected,
.select-item.-active,
.select-item.-hovered {
  background-color: transparent !important;
  color: var(--color-primary-hover) !important;
}

.select-chosen_inner {
  color: var(--text-primary) !important;
}

.select-chosen .arrow-down_select,
.select-chosen .arrow-down_select use {
  fill: var(--text-muted) !important;
  color: var(--text-muted) !important;
}

/* ============================================================
 * SEARCH INPUT
 * ============================================================ */
.icon-input-wrapper {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border) !important;
}

.icon-input-wrapper:focus-within {
  border-color: var(--color-primary) !important;
  background-color: var(--bg-secondary) !important;
  box-shadow: 0 0 0 2px var(--color-primary-glow);
}

.s-input,
input.s-input {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.s-input::placeholder,
input::placeholder {
  color: var(--text-faint) !important;
}

.icon-input-wrapper .search-sm,
.icon-input-wrapper svg {
  fill: var(--text-muted) !important;
}

/* ============================================================
 * KEY TIPS (keyboard shortcut hints)
 * ============================================================ */
.key-tip {
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* ============================================================
 * TOGGLE SWITCH
 * ============================================================ */
.cmn-toggle-round + label {
  background-color: var(--bg-elevated) !important;
  box-shadow: none !important;
}

.cmn-toggle-round + label:after,
.cmn-toggle-round + label:before {
  box-shadow: none !important;
}

.cmn-toggle-round:checked + label {
  background-color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* ============================================================
 * IDLE WRAPPER / main work area
 * ============================================================ */
.idle-wrapper,
.idle-wrapper.-with-addon {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
 * MAIN PANEL (orders list container)
 * ============================================================ */
.main-panel,
.main-panel.-orders {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}

/* ============================================================
 * ORDERS TABLE HEADER — ONLY colors, no padding/font-size!
 * ============================================================ */
.main-panel_header {
  background-color: var(--bg-header) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-faint) !important;
}

.main-panel_header .g-clickable {
  color: var(--text-muted) !important;
}

.main-panel_header .g-clickable:hover {
  color: var(--text-primary) !important;
}

.main-panel_header span {
  color: inherit !important;
}

/* ============================================================
 * PANEL ITEMS (order rows) — ONLY colors!
 * Container is darker than rows → rows appear as "cards"
 * ============================================================ */
.panel-scroll-wrapper,
.scroll-wrapper,
.scroll-wrapper.-inherit {
  background-color: var(--bg-primary) !important;
}

.panel-item {
  background-color: var(--bg-row) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
  /* Subtle outline — matches .driver-counts_btn / .help-instructions-btn style */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

.panel-item:hover {
  background-color: var(--bg-row-hover) !important;
}

.panel-item.-active {
  background-color: var(--bg-row-active) !important;
  box-shadow: inset 3px 0 0 var(--color-primary), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

/* Panic rows — subtle outline + red left accent */
.panel-item.-panic {
  background-color: var(--bg-row) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 3px 0 0 var(--color-panic), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}

.panel-item.-panic:hover {
  background-color: var(--bg-row-hover) !important;
}

.panel-item.-panic.-active {
  background-color: var(--bg-row-hover) !important;
  box-shadow: inset 3px 0 0 var(--color-panic), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

/* Remove text-shadow from ALL text inside rows */
.panel-item,
.panel-item *,
.panel-item .time-create_first-line,
.panel-item .time-create_second-line,
.panel-item .address-from,
.panel-item .address-to,
.panel-item .timer-time,
.panel-item .sm-bold,
.panel-item .md-bold,
.panel-item .xsm-bold,
.panel-item .smaller-bold {
  text-shadow: none !important;
}

/* Unified faint color for most text inside rows (colored ones handled separately) */
.panel-item .time-waiting_delta,
.panel-item .address-to,
.panel-item .sm-bold,
.panel-item .md-bold,
.panel-item .xsm-bold,
.panel-item .xs-normal,
.panel-item .smaller-bold {
  color: var(--text-faint) !important;
}

/* ============================================================
 * TIME COLUMN — blue (matches .hmd-bold.-clock = #2563EB)
 * ============================================================ */
.time-create_first-line,
.panel-item .time-create_first-line {
  color: #2563EB !important;
}

.time-create_second-line,
.panel-item .time-create_second-line {
  color: #2563EB !important;
}

.time-waiting_delta {
  color: var(--text-faint) !important;
}

/* ============================================================
 * TIMER (the "00" countdown) — color depends on state
 *  -warning  → red
 *  -normal   → blue
 *  parent -panic row → dark orange
 *  default (-def) → faint gray
 * ============================================================ */
.timer-time,
.timer,
.timer-wrapper.-def .timer-time,
.timer-wrapper.-def .timer,
.panel-item .timer-time,
.panel-item .timer {
  color: var(--text-faint) !important;
}

.timer-time span,
.panel-item .timer-time span {
  color: inherit !important;
}

/* -warning state → red */
.timer-wrapper.-warning .timer-time,
.timer-wrapper.-warning .timer,
.timer-wrapper.-warning .timer-time span {
  color: var(--color-danger) !important;
}

/* -normal state → blue */
.timer-wrapper.-normal .timer-time,
.timer-wrapper.-normal .timer,
.timer-wrapper.-normal .timer-time span {
  color: var(--color-primary) !important;
}

/* Parent -panic row → dark orange */
.panel-item.-panic .timer-time,
.panel-item.-panic .timer,
.panel-item.-panic .timer-time span {
  color: #EA580C !important;
}

.progressbar-wrapper {
  background-color: var(--bg-elevated) !important;
}

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

/* ============================================================
 * ADDRESS COLUMN
 * ============================================================ */
.address-from,
.panel-item .address-from {
  color: var(--color-success) !important;  /* #34D399 — matches car-in-work icon */
  font-weight: normal !important;
}

.address-to,
.panel-item .address-to {
  color: var(--text-faint) !important;
  font-weight: normal !important;
}

/* ============================================================
 * TARIFF COLUMN (Э1 label) — unified faint color
 * ============================================================ */
.xsm-bold.g-uppercase,
.panel-item .xsm-bold.g-uppercase,
.panel-item .xsm-bold,
.panel-item .g-uppercase {
  color: var(--text-faint) !important;
}

/* ============================================================
 * RIGHT PANEL (order details)
 * ============================================================ */
.right-panel,
.right-panel.-no-bg,
.right-panel.transition-show {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.right-panel > section {
  border-bottom-color: var(--border-subtle) !important;
}

.right-panel section.-light,
.right-panel .popup_body section.-light,
.tabs-content section.-light,
section.-light {
  background-color: #1E293B !important;
}

/* Inside -light section, flex-components get bg matching .-modern-left (bg-secondary) */
.right-panel section.-light .flex-component,
.tabs-content section.-light .flex-component,
section.-light .flex-component {
  background-color: var(--bg-secondary) !important;
}

/* ============================================================
 * ACTION BUTTONS WRAPPER
 * ============================================================ */
.buttons-wrapper {
  background-color: var(--bg-header) !important;
  border-bottom-color: var(--border) !important;
}

/* ============================================================
 * BUTTONS (s-button) — ONLY colors!
 * ============================================================ */
.s-button,
button.s-button {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.s-button:hover {
  background-color: var(--border-strong) !important;
  border-color: var(--text-muted) !important;
}

.s-button.-normal {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.s-button.-transparent {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.s-button.-transparent:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.s-button.-success {
  background-color: #059669 !important;
  border-color: #047857 !important;
  color: #fff !important;
}

.s-button.-success:hover {
  background-color: #10B981 !important;
}

.s-button.-cancel {
  background-color: #B91C1C !important;
  border-color: #991B1B !important;
  color: #fff !important;
}

.s-button.-cancel:hover {
  background-color: #DC2626 !important;
}

.s-button svg {
  fill: currentColor !important;
}

/* ============================================================
 * TABS (Подробности / История) — ONLY colors!
 * ============================================================ */
.tabs,
.tabs.-popup-tabs {
  background-color: var(--bg-header) !important;
  border-bottom-color: var(--border) !important;
}

.tabs-item {
  color: var(--text-muted) !important;
  background-color: #2a3d55 !important;
}

.tabs-item:hover {
  color: var(--text-primary) !important;
  background-color: #34485f !important;
}

.tabs-item.-active {
  color: var(--color-primary-hover) !important;
  background-color: #2a3d55 !important;
  border-bottom-color: var(--color-primary) !important;
}

.tabs-item_keytip {
  color: var(--text-faint) !important;
}

/* ============================================================
 * POPUP BODY / detail sections
 * ============================================================ */
.popup_body,
.popup_body.-no-bgcolor {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.tabs-content {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.-modern-left {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
}

/* ============================================================
 * PRICE DISPLAY
 * ============================================================ */
.price,
.price.-main {
  color: var(--text-primary) !important;
}

.price_value {
  color: var(--color-price) !important;
}

h4 {
  color: var(--text-faint) !important;
}

/* ============================================================
 * ORDER NOTIFICATION
 * ============================================================ */
.order-notification {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border) !important;
}

.order-notification .sm-normal {
  color: var(--text-secondary) !important;
}

/* ============================================================
 * STATUS ICONS
 * ============================================================ */
.success-icon,
svg.success-icon,
.check-xxs.success-icon {
  fill: var(--color-success) !important;
  color: var(--color-success) !important;
}

.alert-icon,
svg.alert-icon,
.close-xs.alert-icon {
  fill: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

.status-icon.-def,
svg.status-icon.-def {
  fill: var(--text-muted) !important;
  color: var(--text-muted) !important;
}

.status-icon.-success,
svg.status-icon.-success,
.flag-sm-md.-success,
svg.flag-sm-md.-success {
  fill: var(--color-success) !important;
  color: var(--color-success) !important;
}

.status-icon.-in-progress,
svg.status-icon.-in-progress,
svg.wallet-doc-sm.-in-progress,
.wallet-doc-sm.-in-progress,
svg.md-sq-size.status-icon,
.md-sq-size.status-icon,
.panel-item svg.md-sq-size,
.panel-item svg.status-icon {
  fill: var(--text-faint) !important;
  color: var(--text-faint) !important;
}

.status-icon.-car-finish,
svg.-car-finish {
  fill: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

svg.-agression,
svg.tariff-increased-sm.-agression {
  fill: var(--color-panic) !important;
  color: var(--color-panic) !important;
}

/* Generic -normal modifier → blue (phone icons and others) */
svg.-normal {
  fill: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Generic -warning modifier → red */
svg.-warning {
  fill: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

/* Order source icons inherit color from -normal modifier (blue by default, orange in -panic) */
svg.-light    { fill: var(--text-muted) !important; }
svg.-white    { fill: #E2E8F0 !important; }
svg.-calmly   { fill: var(--color-success) !important; }
svg.-st-color { fill: var(--color-primary-hover) !important; }

/* ============================================================
 * TEXT UTILITY CLASSES — ONLY color!
 * ============================================================ */
.sm-bold, .md-bold, .xs-bold, .xsm-bold, .xms-bold,
.smaller-bold, .md-normal, .sm-normal, .xs-normal {
  color: var(--text-primary) !important;
}

.-light {
  color: var(--text-muted) !important;
}

.-darker, .-darkness {
  color: var(--text-primary) !important;
}

.-calmly {
  color: var(--color-success) !important;
}

.-alert, .-non-complete, .-carmine {
  color: var(--color-danger) !important;
}

.-blue, .text-blue {
  color: var(--color-primary-hover) !important;
}

.-green, .text-green {
  color: var(--color-success) !important;
}

.-red, .text-red {
  color: var(--color-danger) !important;
}

.-yellow, .text-yellow {
  color: var(--color-warning) !important;
}

/* ============================================================
 * DROPDOWN SELECT LIST
 * ============================================================ */
.select-list,
ul.select-list {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}

.select-list li {
  color: var(--text-primary) !important;
}

.select-list li:hover,
.select-list li.-hovered {
  background-color: var(--bg-tertiary) !important;
  color: var(--color-primary-hover) !important;
}

.select-list li input {
  background-color: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.select-list li input:focus {
  border-color: var(--color-primary) !important;
}

/* ============================================================
 * ICON WITH TEXT
 * ============================================================ */
.icon-with-text {
  color: var(--text-primary) !important;
}

.icon-with-text_icon {
  color: var(--text-muted) !important;
}

.icon-with-text svg {
  fill: currentColor !important;
}

.order-descr {
  color: var(--text-muted) !important;
}

/* ============================================================
 * GENERIC FORM CONTROLS
 * ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select,
.form-control {
  background-color: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--color-primary) !important;
  background-color: var(--bg-secondary) !important;
}

/* ============================================================
 * TABLES
 * ============================================================ */
table, .table {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

table thead th, .table thead th {
  background-color: var(--bg-header) !important;
  color: var(--text-faint) !important;
  border-bottom-color: var(--border) !important;
}

table tbody tr:hover, .table tbody tr:hover {
  background-color: var(--bg-tertiary) !important;
}

table tbody td, .table tbody td {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
}

/* ============================================================
 * SCROLLBARS (Webkit)
 * ============================================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

::-webkit-scrollbar-corner {
  background: var(--bg-primary);
}

* {
  scrollbar-color: var(--bg-elevated) var(--bg-primary);
}

/* ============================================================
 * SELECTION
 * ============================================================ */
::selection {
  background-color: var(--color-primary-glow);
  color: var(--text-primary);
}

/* ============================================================
 * TOOLTIPS (balloon-style)
 * ============================================================ */
.tooltipses-box[data-balloontip]::after {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.tooltipses-box[data-balloontip]::before {
  border-color: var(--bg-elevated) transparent !important;
}

/* ============================================================
 * STAR (priority)
 * ============================================================ */
.pa.-star {
  color: var(--color-warning) !important;
}

/* ============================================================
 * LINKS
 * ============================================================ */
a {
  color: var(--color-primary-hover);
}

a:hover {
  color: #93C5FD;
}

/* ============================================================
 * CHECKBOXES
 * ============================================================ */
.checkbox-wrapper-std {
  color: var(--text-secondary) !important;
}

input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* ============================================================
 * ROUTE MARKERS
 * ============================================================ */
.flag-sm-md {
  color: var(--color-success) !important;
}

.flag-sm-md.-car-finish {
  color: var(--color-danger) !important;
}

/* ============================================================
 * HISTORY ITEM (order history tab)
 * ============================================================ */
.history-item,
.history-item_visable {
  background-color: #2a3d55 !important;
}

/* ============================================================
 * HELP INSTRUCTIONS BUTTON — hidden
 * ============================================================ */
.help-instructions-btn {
  display: none !important;
}

/* ============================================================
 * HELP (СПРАВКА) BUTTON — hidden
 * ============================================================ */
.cursor-pointer:has(> .help-icon) {
  display: none !important;
}

/* ============================================================
 * POPUP FOOTER (order form footer)
 * ============================================================ */
.popup_footer,
.popup_footer.-divider,
.popup_footer.-divider.-section-radius {
  background-color: #1e293b !important;
}

/* ============================================================
 * POPUP ASIDE (order form left/right column)
 * ============================================================ */
.popup_aside,
.popup_aside.-column,
.popup_aside_top,
.popup_aside_bottom,
.popup_aside-section {
  background-color: #1e293b !important;
}

/* ============================================================
 * REPORTS PAGE (full-white-bg)
 * ============================================================ */
.full-white-bg {
  background-color: #1e293b !important;
}

/* ============================================================
 * HEADER ADDRESS EDITOR
 * ============================================================ */
.header-address-editor,
.header-address-editor.-dispatcher {
  background-color: #1e293b !important;
}

/* ============================================================
 * POPUP HEADER (search header)
 * ============================================================ */
.popup_header,
.popup_header.-sm-padding,
header.popup_header {
  background-color: #1e293b !important;
}

/* ============================================================
 * POPUP FULL VIEW (support info modal)
 * ============================================================ */
.popup,
.popup.-full-view,
.popup.-full-view.-no-border-radius,
.popup_header.-top-indent,
.popup_header.help-modal-wrapper {
  background-color: #1e293b !important;
}

/* ============================================================
 * LABEL INNER (form field labels)
 * ============================================================ */
.label_inner,
.s-label,
label.s-label {
  color: #2563eb !important;
}

/* ============================================================
 * LOGIN FORM
 * ============================================================ */
.form,
.form .head,
.form .body,
.form .fields,
.form .field,
.form .submit {
  background-color: #1e293b !important;
}

/* ============================================================
 * TREE MENU WRAPPER (geozones sidebar)
 * ============================================================ */
section.-md-section,
.tree-menu_wrapper,
.tree-menu_wrapper.-options,
.tree-menu,
ul.tree-menu,
.tree-menu ul,
.tree-menu_item,
.tree-menu_child-item {
  background-color: #1e293b !important;
}

/* ============================================================
 * UNDER-BOARD (taxi settings page)
 * ============================================================ */
.under-board,
.under-board.-taxi-settings,
.under-board section,
.under-board > div,
.under-board section.-p-one-two,
.under-board section.-middle,
.under-board section.-tall,
.under-board section.-top-shadow,
.under-board section.bsl,
.under-board .-p-one-two {
  background-color: #1e293b !important;
}

/* ============================================================
 * FIRE ANIMATION — panic/alarm flag icons
 * ============================================================ */
@keyframes fireGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(220,38,38,0.6)) drop-shadow(0 -1px 4px rgba(255,69,0,0.3)); }
  50%      { filter: drop-shadow(0 0 6px rgba(220,38,38,1)) drop-shadow(0 -2px 8px rgba(255,69,0,0.7)); }
}
@keyframes fireGlowAlarm {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(245,158,11,0.5)) drop-shadow(0 -1px 3px rgba(255,140,0,0.3)); }
  50%      { filter: drop-shadow(0 0 4px rgba(245,158,11,0.9)) drop-shadow(0 -2px 6px rgba(255,140,0,0.6)); }
}

svg.fire-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

/* Panic — red fire + fast glow on flag */
.panel-item.-panic .icon-wrapper.status-icon_inherit svg.fire-overlay {
  animation: fireGlow 0.6s ease-in-out infinite;
}

/* Alarm — orange shifted fire + slower glow */
.panel-item.-alarm .icon-wrapper.status-icon_inherit svg.fire-overlay {
  animation: fireGlowAlarm 1s ease-in-out infinite;
  filter: hue-rotate(25deg) saturate(1.5);
}