/* ============================================================
   Навитранс — Design Overlay (v3, unified light+dark)
   Ported from interface/v3/{light,dark}/override.css
   Loaded via <link id="theme-stylesheet"> in index.html.
   Disabled cleanly from JS for "original" back-out mode.
   ============================================================ */

/* --- 1. Design Tokens --- */

/* Light theme (default when data-theme="light") */
[data-theme="light"] {
    /* Brand palette */
    --brand-cyan: #00B4CA;
    --brand-blue: #007BC3;
    --brand-navy: #121630;
    --brand-indigo: #2E3192;

    /* Surfaces (warm light — not pure white) */
    --bg-base: #f7f8fa;
    --bg-surface: #ffffff;
    --bg-elevated: #f0f2f5;
    --bg-hover: #e8ebf0;

    /* Table rows */
    --row-even: #ffffff;
    --row-odd: #f7f8fa;
    --row-selected: rgba(0, 180, 202, 0.08);
    --row-highlight: rgba(0, 123, 195, 0.1);
    --row-warning: rgba(255, 193, 7, 0.1);

    /* Status colors */
    --status-green: #16a34a;
    --status-green-strong: #166534;
    --status-amber: #d97706;
    --status-orange: #ea580c;
    --status-blue: #0284c7;
    --status-gray: #94a3b8;

    /* Status row indicators: bright solid border + semi-transparent bg (same hue) */
    --status-green-solid:  #16a34a;  --status-green-bg:  rgba(22, 163, 74, 0.10);
    --status-green2-solid: #166534;  --status-green2-bg: rgba(22, 101, 52, 0.14);
    --status-amber-solid:  #d97706;  --status-amber-bg:  rgba(217, 119, 6, 0.10);
    --status-orange-solid: #ea580c;  --status-orange-bg: rgba(234, 88, 12, 0.10);
    --status-blue-solid:   #0284c7;  --status-blue-bg:   rgba(2, 132, 199, 0.09);
    --status-gray-solid:   #64748b;  --status-gray-bg:   rgba(100, 116, 139, 0.08);

    /* Text */
    --text-primary: #1a1a2e;
    --text-secondary: #5f6b7a;
    --text-muted: #9ca3af;

    /* Borders */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.15);

    /* Accents */
    --accent-primary: #00B4CA;
    --accent-blue: #007BC3;
    --accent-success: #059669;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;

    /* Shadows (softer for light theme) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(0, 180, 202, 0.1);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;

    /* Table header */
    --bg-table-header: #dde1e8;

    /* Z-index scale */
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-overlay: 9998;
    --z-modal: 9999;

    /* Main-content top offset (match compact navbar) */
    --main-top-offset: 40px;

    /* Semantic aliases */
    --theme-bg-primary: var(--bg-base);
    --theme-bg-front: var(--bg-surface);
    --theme-text-primary: var(--text-primary);
    --theme-text-muted: var(--text-muted);
    --theme-border-solid: var(--border-subtle);
}

/* Dark theme */
[data-theme="dark"] {
    /* Brand palette */
    --brand-cyan: #00B4CA;
    --brand-blue: #007BC3;
    --brand-navy: #121630;
    --brand-indigo: #2E3192;

    /* Surfaces (eye-comfort dark) */
    --bg-base: #0f1923;
    --bg-surface: #162233;
    --bg-elevated: #1c2d42;
    --bg-hover: #243a52;

    /* Table rows */
    --row-even: #162233;
    --row-odd: #1a2838;
    --row-selected: rgba(0, 180, 202, 0.15);
    --row-highlight: rgba(0, 123, 195, 0.2);
    --row-warning: rgba(255, 193, 7, 0.12);

    /* Status colors */
    --status-green: #22c55e;
    --status-green-strong: #15803d;
    --status-amber: #f59e0b;
    --status-orange: #f97316;
    --status-blue: #38bdf8;
    --status-gray: #64748b;

    /* Status row indicators: bright solid border + semi-transparent bg (same hue) */
    --status-green-solid:  #22c55e;  --status-green-bg:  rgba(34, 197, 94, 0.14);
    --status-green2-solid: #4ade80;  --status-green2-bg: rgba(34, 197, 94, 0.22);
    --status-amber-solid:  #f59e0b;  --status-amber-bg:  rgba(245, 158, 11, 0.14);
    --status-orange-solid: #fb923c;  --status-orange-bg: rgba(249, 115, 22, 0.14);
    --status-blue-solid:   #38bdf8;  --status-blue-bg:   rgba(56, 189, 248, 0.14);
    --status-gray-solid:   #94a3b8;  --status-gray-bg:   rgba(148, 163, 184, 0.10);

    /* Text */
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);

    /* Accents */
    --accent-primary: #00B4CA;
    --accent-blue: #007BC3;
    --accent-success: #34d399;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 180, 202, 0.15);

    /* Radii / transitions / z-index / offset — shared values */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --bg-table-header: #243a52;
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-overlay: 9998;
    --z-modal: 9999;
    --main-top-offset: 40px;

    --theme-bg-primary: var(--bg-base);
    --theme-bg-front: var(--bg-surface);
    --theme-text-primary: var(--text-primary);
    --theme-text-muted: var(--text-muted);
    --theme-border-solid: var(--border-subtle);
}

/* --- 2. Global / Body --- */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
    pointer-events: none;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }

html, body {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
    'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
}

#app {
    background: var(--bg-base);
}

/* --- 3. Navbar --- */
.navbar.fixed-top,
nav.navbar {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    padding: 0 0.75rem !important;
    min-height: 0 !important;
    display: flex;
    align-items: center;
}

.navbar-brand {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.02em;
    padding: 0.2rem 0 !important;
    margin-right: 0.75rem !important;
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-link {
    border-radius: var(--radius-sm) !important;
    transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out) !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.8125rem !important;
    color: var(--text-secondary) !important;
}

.nav-link:hover {
    background: var(--bg-hover) !important;
    color: var(--brand-cyan) !important;
}

.nav-link.nav-active {
    background: rgba(0, 180, 202, 0.15) !important;
    color: var(--brand-cyan) !important;
    border-bottom: 2px solid var(--brand-cyan);
}

.navbar-nav {
  flex-wrap: nowrap;
  align-items: center !important;
}

.navbar-nav > .nav-item {
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link,
.navbar-nav .theme-toggle,
.navbar-nav button.nav-link,
.navbar-nav a.nav-link {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    min-height: 1.75rem;
}

.dropdown-toggle {
    color: var(--text-secondary) !important;
}

.dropup, .dropright, .dropdown, .dropleft {
    position: relative;
}

/* --- 4. Breadcrumb / Page Header --- */
.page-header.bg-info,
.alert.page-header.bg-info,
.alert.bg-info {
    background: rgba(0, 180, 202, 0.06) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    padding: 0.25rem 0.75rem !important;
    box-shadow: none;
    font-size: 0.8125rem;
}

.page-header a,
.alert.bg-info a {
    color: var(--brand-cyan) !important;
    text-decoration: none;
    transition: color var(--duration-fast);
}

.page-header a:hover,
.alert.bg-info a:hover {
    color: var(--text-primary) !important;
    text-decoration: underline;
}

.page-header span,
.page-header span:last-of-type,
.alert.bg-info span,
.alert.bg-info span:last-of-type {
    color: var(--text-primary) !important;
}

.page-header span a,
.alert.bg-info span a {
    color: var(--brand-cyan) !important;
}

/* --- 5. Tables --- */
.table-container,
[class*="table-container"] {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.table {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Sticky table headers */
thead, thead.th-sticky {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

thead th,
thead.thead-dark th {
    background: var(--bg-table-header) !important;
    color: var(--brand-cyan) !important;
    border-bottom: 1px solid rgba(0, 180, 202, 0.25) !important;
    border-top: none !important;
    box-shadow: 0 1px 0 0 var(--border-subtle);
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem !important;
}

tbody.thead-dark {
    background: transparent !important;
}
tbody.thead-dark tr {
    background: inherit !important;
}

.data-row {
    transition: background var(--duration-fast) var(--ease-out) !important;
}

/* Zebra stripes — no !important so inline status bg wins natively */
.data-row:nth-child(odd)  { background: var(--row-odd); }
.data-row:nth-child(even) { background: var(--row-even); }

.data-row:hover {
    background: var(--row-selected) !important;
    box-shadow: inset 3px 0 0 0 var(--brand-cyan);
}

.data-row.bg-primary,
tr.bg-primary {
    background: var(--row-highlight) !important;
    color: var(--brand-cyan) !important;
}

.data-row.bg-primary .text-white,
tr.bg-primary .text-white,
.data-row.bg-primary td,
tr.bg-primary td {
    color: var(--brand-cyan) !important;
}

/* Status row indicators — bright solid left bar + semi-transparent tint.
   Maps 18 distinct inline RGB values (set by the backend on <tr style="background-color:...">)
   to 6 semantic groups via theme tokens. */

/* Green OK — 7 pastel variants */
tr.data-row[style*="background-color: rgb(181, 229, 181)"],
tr.data-row[style*="background-color: rgb(231, 253, 229)"],
tr.data-row[style*="background-color: rgb(164, 255, 156)"],
tr.data-row[style*="background-color: rgb(199, 255, 192)"],
tr.data-row[style*="background-color: rgb(240, 255, 225)"],
tr.data-row[style*="background-color: rgb(222, 253, 181)"],
tr.data-row[style*="background-color: rgb(220, 255, 186)"] {
    background: var(--status-green-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--status-green-solid);
}

/* Green strong — solid dark green row */
tr.data-row[style*="background-color: rgb(39, 164, 67)"] {
    background: var(--status-green2-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--status-green2-solid);
}

/* Amber warning — 4 yellow variants */
tr.data-row[style*="background-color: rgb(255, 249, 219)"],
tr.data-row[style*="background-color: rgb(252, 250, 182)"],
tr.data-row[style*="background-color: rgb(248, 241, 155)"],
tr.data-row[style*="background-color: rgb(255, 242, 122)"] {
    background: var(--status-amber-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--status-amber-solid);
}

/* Orange critical */
tr.data-row[style*="background-color: rgb(255, 221, 195)"] {
    background: var(--status-orange-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--status-orange-solid);
}

/* Blue info / lunch — 2 variants */
tr.data-row[style*="background-color: rgb(156, 214, 238)"],
tr.data-row[style*="background-color: rgb(193, 240, 255)"] {
    background: var(--status-blue-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--status-blue-solid);
}

/* Gray inactive / no-data — 3 variants */
tr.data-row[style*="background-color: rgb(219, 219, 219)"],
tr.data-row[style*="background-color: rgb(201, 201, 201)"],
tr.data-row[style*="background-color: rgb(233, 236, 239)"] {
    background: var(--status-gray-bg) !important;
    box-shadow: inset 3px 0 0 0 var(--status-gray-solid);
}

/* Hover a status row — keep status tint, switch bar to brand cyan */
tr.data-row[style*="background-color: rgb"]:hover {
    box-shadow: inset 3px 0 0 0 var(--brand-cyan) !important;
}

/* Strip in-cell inline bg so the row tint reads cleanly */
td[style*="background-color"] { background-color: inherit !important; }

/* Cells */
td {
    padding: 0.1875rem 0.375rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-top: none !important;
    font-size: 0.8125rem !important;
    line-height: 1.4;
    color: var(--text-primary) !important;
    font-weight: 450 !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv01' 1;
}

[data-theme="dark"] td {
    color: rgba(226, 232, 240, 0.85) !important;
}

th {
    border-top: none !important;
}

.table td, .table th {
    border-color: var(--border-subtle) !important;
}

/* --- 6. Buttons --- */
.btn {
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    transition: all var(--duration-normal) var(--ease-out) !important;
    box-shadow: none !important;
    letter-spacing: 0.01em;
    backdrop-filter: blur(4px);
    padding: 0.2rem 0.5rem !important;
}

.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.btn:active {
    transform: translateY(0) !important;
    filter: brightness(0.95);
}

.btn:disabled, .btn.disabled,
.dropdown-item.disabled, a.disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    filter: grayscale(0.3);
}

input:disabled, select:disabled, .form-control:disabled {
    opacity: 0.5 !important;
    background: var(--bg-base) !important;
    cursor: not-allowed !important;
}

/* Neutral buttons — Cursor-style */
.btn-primary,
.btn-primary.dropdown-toggle,
.btn-warning,
.btn-warning.dropdown-toggle,
.btn-secondary {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

.btn-primary:hover,
.btn-primary.dropdown-toggle:hover,
.btn-warning:hover,
.btn-secondary:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-strong) !important;
}

.btn-success {
    background: rgba(52, 211, 153, 0.12) !important;
    color: var(--accent-success) !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

.btn-danger {
    background: rgba(248, 113, 113, 0.12) !important;
    color: var(--accent-danger) !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

.btn-sm {
    padding: 0.2rem 0.6rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
}

.form-row .col-0 .btn.btn-sm {
    height: auto !important;
    width: auto !important;
    min-width: 4.375rem;
    padding: 0.0625rem 0.5rem !important;
    line-height: 1.4 !important;
}

/* --- 7. Inputs & Dropdowns --- */
.form-control,
select.form-control,
input[type="date"],
input[type="text"],
input[type="number"],
select {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.4rem 0.75rem;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.form-control:focus-visible,
input:focus-visible,
select:focus-visible {
    border-color: var(--brand-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 202, 0.2) !important;
    outline: none !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible {
    outline: 2px solid var(--brand-cyan);
    outline-offset: 2px;
    box-shadow: none !important;
}

@supports not selector(:focus-visible) {
    .form-control:focus, input:focus, select:focus {
        border-color: var(--brand-cyan) !important;
        box-shadow: 0 0 0 3px rgba(0, 180, 202, 0.2) !important;
        outline: none !important;
    }
}

.input-group-text {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.dropdown-menu {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0.4rem !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    transition: background var(--duration-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bg-hover) !important;
    color: var(--brand-cyan) !important;
}

.dropdown-divider {
    border-top-color: var(--border-subtle) !important;
}

.custom-control-label {
    color: var(--text-primary) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-cyan) !important;
    border-color: var(--brand-cyan) !important;
}

/* --- 8. Cards & Panels --- */
.card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* --- 9. Tab Bar --- */
.nav-pills {
    background: var(--bg-surface);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    gap: 2px;
    display: flex;
    flex-wrap: wrap;
}

.nav-pills .nav-link {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.25rem 0.6rem !important;
    font-size: 0.8125rem !important;
    transition: all var(--duration-fast) var(--ease-out) !important;
    font-weight: 500;
}

.nav-pills .nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: rgba(0, 180, 202, 0.15) !important;
    color: var(--brand-cyan) !important;
    border: 1px solid rgba(0, 180, 202, 0.3);
    box-shadow: none;
}

/* --- 10. Left Sidebar --- */
.accordion .card-header.bg-info,
.accordion .bg-info,
.card-header.bg-info {
    background: var(--bg-elevated) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-default) !important;
}

.accordion .card-header .btn,
.card-header.bg-info .btn {
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    color: var(--brand-cyan) !important;
    -webkit-text-fill-color: var(--brand-cyan);
}

.card.active,
.card.text-center.mb-1.active {
    border-left: 3px solid var(--brand-cyan) !important;
    background: var(--row-selected) !important;
}

.left-menu {
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border-subtle);
}

/* --- 11. Scrollbars --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 180, 202, 0.4);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-hover) var(--bg-base);
}

/* --- 12. Misc Overrides --- */
#main-div {
    background: var(--bg-base) !important;
}

.align-container,
.align-panel {
    background: transparent !important;
}

.align-panel[style*="top: 53px"],
.align-panel[style*="53px 0px 0px"] {
    top: 30px !important;
    inset: 30px 0px 0px !important;
}

.card-body {
    padding: 0.1875rem !important;
    color: var(--text-primary) !important;
}

.card-body > .form-row {
    margin-bottom: 0.125rem !important;
}

.align-container {
    bottom: 0 !important;
}

p, span, div, label, strong {
    color: inherit;
}

.form-label,
label {
    color: var(--text-secondary) !important;
}

.badge-info {
    background: var(--brand-cyan) !important;
}

.list-group-item {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.align-splitter {
    background: var(--border-default) !important;
}

.popper {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

.page-item .page-link {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.page-item.active .page-link {
    background: var(--brand-cyan) !important;
    border-color: var(--brand-cyan) !important;
}

noscript strong {
    color: var(--text-primary) !important;
}

/* --- 13. Animations --- */
@keyframes brandGlow {
    from { filter: drop-shadow(0 0 4px rgba(0, 180, 202, 0)); }
    to { filter: drop-shadow(0 0 8px rgba(0, 180, 202, 0.4)); }
}

.data-row {
    position: relative;
}

.data-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 202, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.data-row:hover::after {
    opacity: 1;
}

/* ============================================================
   PHOSPHOR ICONS — replace FA font glyphs with SVG masks
   ============================================================ */

.fas, .far, .fab {
    font-family: inherit !important;
    font-style: normal !important;
}

.fas::before, .far::before, .fab::before {
    content: '' !important;
    display: inline-block;
    width: 1em; height: 1em;
    background: currentColor;
    vertical-align: -0.125em;
    font-family: inherit !important;
}

.fa-xs::before { width: 0.75em !important; height: 0.75em !important; }

.fas.fa-user::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M230.93 220a8 8 0 0 1-6.93 4H32a8 8 0 0 1-6.92-12c15.23-26.33 38.7-45.21 66.09-54.16a72 72 0 1 1 73.66 0c27.39 8.95 50.86 27.83 66.09 54.16a8 8 0 0 1 .01 8M72 96a56 56 0 1 0 56-56a56.06 56.06 0 0 0-56 56'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M230.93 220a8 8 0 0 1-6.93 4H32a8 8 0 0 1-6.92-12c15.23-26.33 38.7-45.21 66.09-54.16a72 72 0 1 1 73.66 0c27.39 8.95 50.86 27.83 66.09 54.16a8 8 0 0 1 .01 8M72 96a56 56 0 1 0 56-56a56.06 56.06 0 0 0-56 56'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-star::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.far.fa-star::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M320.1 32C329.1 32 337.4 37.1 341.5 45.1L415 189.3L574.9 214.7C583.8 216.1 591.2 222.4 594 231C596.8 239.6 594.5 249 588.2 255.4L473.7 369.9L499 529.8C500.4 538.7 496.7 547.7 489.4 553C482.1 558.3 472.4 559.1 464.4 555L320.1 481.6L175.8 555C167.8 559.1 158.1 558.3 150.8 553C143.5 547.7 139.8 538.8 141.2 529.8L166.4 369.9L52 255.4C45.6 249 43.4 239.6 46.2 231C49 222.4 56.3 216.1 65.3 214.7L225.2 189.3L298.8 45.1C302.9 37.1 311.2 32 320.2 32zM320.1 108.8L262.3 222C258.8 228.8 252.3 233.6 244.7 234.8L119.2 254.8L209 344.7C214.4 350.1 216.9 357.8 215.7 365.4L195.9 490.9L309.2 433.3C316 429.8 324.1 429.8 331 433.3L444.3 490.9L424.5 365.4C423.3 357.8 425.8 350.1 431.2 344.7L521 254.8L395.5 234.8C387.9 233.6 381.4 228.8 377.9 222L320.1 108.8z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M320.1 32C329.1 32 337.4 37.1 341.5 45.1L415 189.3L574.9 214.7C583.8 216.1 591.2 222.4 594 231C596.8 239.6 594.5 249 588.2 255.4L473.7 369.9L499 529.8C500.4 538.7 496.7 547.7 489.4 553C482.1 558.3 472.4 559.1 464.4 555L320.1 481.6L175.8 555C167.8 559.1 158.1 558.3 150.8 553C143.5 547.7 139.8 538.8 141.2 529.8L166.4 369.9L52 255.4C45.6 249 43.4 239.6 46.2 231C49 222.4 56.3 216.1 65.3 214.7L225.2 189.3L298.8 45.1C302.9 37.1 311.2 32 320.2 32zM320.1 108.8L262.3 222C258.8 228.8 252.3 233.6 244.7 234.8L119.2 254.8L209 344.7C214.4 350.1 216.9 357.8 215.7 365.4L195.9 490.9L309.2 433.3C316 429.8 324.1 429.8 331 433.3L444.3 490.9L424.5 365.4C423.3 357.8 425.8 350.1 431.2 344.7L521 254.8L395.5 234.8C387.9 233.6 381.4 228.8 377.9 222L320.1 108.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-eye::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-eye-slash::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM236.5 202.7C260 185.9 288.9 176 320 176C399.5 176 464 240.5 464 320C464 351.1 454.1 379.9 437.3 403.5L402.6 368.8C415.3 347.4 419.6 321.1 412.7 295.1C399 243.9 346.3 213.5 295.1 227.2C286.5 229.5 278.4 232.9 271.1 237.2L236.4 202.5zM357.3 459.1C345.4 462.3 332.9 464 320 464C240.5 464 176 399.5 176 320C176 307.1 177.7 294.6 180.9 282.7L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L357.4 459.2z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM236.5 202.7C260 185.9 288.9 176 320 176C399.5 176 464 240.5 464 320C464 351.1 454.1 379.9 437.3 403.5L402.6 368.8C415.3 347.4 419.6 321.1 412.7 295.1C399 243.9 346.3 213.5 295.1 227.2C286.5 229.5 278.4 232.9 271.1 237.2L236.4 202.5zM357.3 459.1C345.4 462.3 332.9 464 320 464C240.5 464 176 399.5 176 320C176 307.1 177.7 294.6 180.9 282.7L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L357.4 459.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-filter::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M230.6 49.53A15.81 15.81 0 0 0 216 40H40a16 16 0 0 0-11.81 26.68l.08.09L96 139.17V216a16 16 0 0 0 24.87 13.32l32-21.34A16 16 0 0 0 160 194.66v-55.49l67.74-72.36l.08-.09a15.8 15.8 0 0 0 2.78-17.19M145.78 126.36A8 8 0 0 0 144 131.18v63.48l-32 21.34V131.18a8 8 0 0 0-1.78-5.07L40 51.88V48.09l.36-.09H216z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M230.6 49.53A15.81 15.81 0 0 0 216 40H40a16 16 0 0 0-11.81 26.68l.08.09L96 139.17V216a16 16 0 0 0 24.87 13.32l32-21.34A16 16 0 0 0 160 194.66v-55.49l67.74-72.36l.08-.09a15.8 15.8 0 0 0 2.78-17.19M145.78 126.36A8 8 0 0 0 144 131.18v63.48l-32 21.34V131.18a8 8 0 0 0-1.78-5.07L40 51.88V48.09l.36-.09H216z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-sync-alt::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.74 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05M216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32C85.18 32 59.42 57.27 58.34 58.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.26 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.74 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05M216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32C85.18 32 59.42 57.27 58.34 58.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.26 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-check::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-pen::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m227.32 73.37l-44.69-44.68a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.32 96a16 16 0 0 0 0-22.63M92.69 208H48v-44.69l88-88L180.69 120Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m227.32 73.37l-44.69-44.68a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.32 96a16 16 0 0 0 0-22.63M92.69 208H48v-44.69l88-88L180.69 120Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-plus::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-trash::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-arrow-alt-circle-right::before, .fas.fa-sign-in-alt::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-wheelchair::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M255.44 198.26a8 8 0 0 1-9.7 5.78L203.57 194l-26.46 39.69a8 8 0 0 1-6.65 3.57h-.46a8 8 0 0 1-6.52-3.05L112 164.44A80 80 0 1 1 152 96h-16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8a64 64 0 1 0-42.06 60.1l-9.28-12.1H96a8 8 0 0 1 0-16h34.91l41.75 54.5l22.56-33.83a8 8 0 0 1 9.26-3.39l44.72 11.94a8 8 0 0 1 6.24 9.04M112 56a12 12 0 1 0-12 12a12 12 0 0 0 12-12'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M255.44 198.26a8 8 0 0 1-9.7 5.78L203.57 194l-26.46 39.69a8 8 0 0 1-6.65 3.57h-.46a8 8 0 0 1-6.52-3.05L112 164.44A80 80 0 1 1 152 96h-16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8a64 64 0 1 0-42.06 60.1l-9.28-12.1H96a8 8 0 0 1 0-16h34.91l41.75 54.5l22.56-33.83a8 8 0 0 1 9.26-3.39l44.72 11.94a8 8 0 0 1 6.24 9.04M112 56a12 12 0 1 0-12 12a12 12 0 0 0 12-12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-step-backward::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-step-forward::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-fast-backward::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M205.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L131.31 128Zm-80 0a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L51.31 128Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M205.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L131.31 128Zm-80 0a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L51.31 128Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-fast-forward::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m141.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L124.69 128L50.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32m80-11.32l-80-80a8 8 0 0 0-11.32 11.32L204.69 128l-74.35 74.34a8 8 0 0 0 11.32 11.32l80-80a8 8 0 0 0 0-11.32'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m141.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L124.69 128L50.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32m80-11.32l-80-80a8 8 0 0 0-11.32 11.32L204.69 128l-74.35 74.34a8 8 0 0 0 11.32 11.32l80-80a8 8 0 0 0 0-11.32'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-book::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216,32V192a8,8,0,0,1-8,8H72a16,16,0,0,0-16,16H192a8,8,0,0,1,0,16H48a8,8,0,0,1-8-8V56A32,32,0,0,1,72,24H208A8,8,0,0,1,216,32Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216,32V192a8,8,0,0,1-8,8H72a16,16,0,0,0-16,16H192a8,8,0,0,1,0,16H48a8,8,0,0,1-8-8V56A32,32,0,0,1,72,24H208A8,8,0,0,1,216,32Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-route::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M228,200a28,28,0,0,1-54.83,8H72a48,48,0,0,1,0-96h96a24,24,0,0,0,0-48H72a8,8,0,0,1,0-16h96a40,40,0,0,1,0,80H72a32,32,0,0,0,0,64H173.17A28,28,0,0,1,228,200Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M228,200a28,28,0,0,1-54.83,8H72a48,48,0,0,1,0-96h96a24,24,0,0,0,0-48H72a8,8,0,0,1,0-16h96a40,40,0,0,1,0,80H72a32,32,0,0,0,0,64H173.17A28,28,0,0,1,228,200Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-calendar-alt::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,48H48V48H72v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,48H48V48H72v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-cogs::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M237.94,107.21a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M237.94,107.21a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A111.92,111.92,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.63a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-satellite-dish::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M168,128a40,40,0,1,1-40-40A40,40,0,0,1,168,128Zm40,0a79.74,79.74,0,0,0-20.37-53.33,8,8,0,1,0-11.92,10.67,64,64,0,0,1,0,85.33,8,8,0,0,0,11.92,10.67A79.79,79.79,0,0,0,208,128ZM80.29,85.34A8,8,0,1,0,68.37,74.67a79.94,79.94,0,0,0,0,106.67,8,8,0,0,0,11.92-10.67,63.95,63.95,0,0,1,0-85.33Zm158.28-4A119.48,119.48,0,0,0,213.71,44a8,8,0,1,0-11.42,11.2,103.9,103.9,0,0,1,0,145.56A8,8,0,1,0,213.71,212,120.12,120.12,0,0,0,238.57,81.29ZM32.17,168.48A103.9,103.9,0,0,1,53.71,55.22,8,8,0,1,0,42.29,44a119.87,119.87,0,0,0,0,168,8,8,0,1,0,11.42-11.2A103.61,103.61,0,0,1,32.17,168.48Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M168,128a40,40,0,1,1-40-40A40,40,0,0,1,168,128Zm40,0a79.74,79.74,0,0,0-20.37-53.33,8,8,0,1,0-11.92,10.67,64,64,0,0,1,0,85.33,8,8,0,0,0,11.92,10.67A79.79,79.79,0,0,0,208,128ZM80.29,85.34A8,8,0,1,0,68.37,74.67a79.94,79.94,0,0,0,0,106.67,8,8,0,0,0,11.92-10.67,63.95,63.95,0,0,1,0-85.33Zm158.28-4A119.48,119.48,0,0,0,213.71,44a8,8,0,1,0-11.42,11.2,103.9,103.9,0,0,1,0,145.56A8,8,0,1,0,213.71,212,120.12,120.12,0,0,0,238.57,81.29ZM32.17,168.48A103.9,103.9,0,0,1,53.71,55.22,8,8,0,1,0,42.29,44a119.87,119.87,0,0,0,0,168,8,8,0,1,0,11.42-11.2A103.61,103.61,0,0,1,32.17,168.48Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-headset::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M232,128v80a40,40,0,0,1-40,40H136a8,8,0,0,1,0-16h56a24,24,0,0,0,24-24H192a24,24,0,0,1-24-24V144a24,24,0,0,1,24-24h23.65A88,88,0,0,0,66,65.54,87.29,87.29,0,0,0,40.36,120H64a24,24,0,0,1,24,24v40a24,24,0,0,1-24,24H48a24,24,0,0,1-24-24V128A104.11,104.11,0,0,1,201.89,54.66,103.41,103.41,0,0,1,232,128Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M232,128v80a40,40,0,0,1-40,40H136a8,8,0,0,1,0-16h56a24,24,0,0,0,24-24H192a24,24,0,0,1-24-24V144a24,24,0,0,1,24-24h23.65A88,88,0,0,0,66,65.54,87.29,87.29,0,0,0,40.36,120H64a24,24,0,0,1,24,24v40a24,24,0,0,1-24,24H48a24,24,0,0,1-24-24V128A104.11,104.11,0,0,1,201.89,54.66,103.41,103.41,0,0,1,232,128Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-chart-line::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM200,192H56a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v76.69l34.34-34.35a8,8,0,0,1,11.32,0L128,132.69,172.69,88H144a8,8,0,0,1,0-16h48a8,8,0,0,1,8,8v48a8,8,0,0,1-16,0V99.31l-50.34,50.35a8,8,0,0,1-11.32,0L104,131.31l-40,40V176H200a8,8,0,0,1,0,16Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM200,192H56a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v76.69l34.34-34.35a8,8,0,0,1,11.32,0L128,132.69,172.69,88H144a8,8,0,0,1,0-16h48a8,8,0,0,1,8,8v48a8,8,0,0,1-16,0V99.31l-50.34,50.35a8,8,0,0,1-11.32,0L104,131.31l-40,40V176H200a8,8,0,0,1,0,16Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-users::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M164.47,195.63a8,8,0,0,1-6.7,12.37H10.23a8,8,0,0,1-6.7-12.37,95.83,95.83,0,0,1,47.22-37.71,60,60,0,1,1,66.5,0A95.83,95.83,0,0,1,164.47,195.63Zm87.91-.15a95.87,95.87,0,0,0-47.13-37.56A60,60,0,0,0,144.7,54.59a4,4,0,0,0-1.33,6A75.83,75.83,0,0,1,147,150.53a4,4,0,0,0,1.07,5.53,112.32,112.32,0,0,1,29.85,30.83,23.92,23.92,0,0,1,3.65,16.47,4,4,0,0,0,3.95,4.64h60.3a8,8,0,0,0,7.73-5.93A8.22,8.22,0,0,0,252.38,195.48Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M164.47,195.63a8,8,0,0,1-6.7,12.37H10.23a8,8,0,0,1-6.7-12.37,95.83,95.83,0,0,1,47.22-37.71,60,60,0,1,1,66.5,0A95.83,95.83,0,0,1,164.47,195.63Zm87.91-.15a95.87,95.87,0,0,0-47.13-37.56A60,60,0,0,0,144.7,54.59a4,4,0,0,0-1.33,6A75.83,75.83,0,0,1,147,150.53a4,4,0,0,0,1.07,5.53,112.32,112.32,0,0,1,29.85,30.83,23.92,23.92,0,0,1,3.65,16.47,4,4,0,0,0,3.95,4.64h60.3a8,8,0,0,0,7.73-5.93A8.22,8.22,0,0,0,252.38,195.48Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-bullhorn::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M200,72H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48,48,0,0,0,200,72ZM179,207.89l0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M200,72H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48,48,0,0,0,200,72ZM179,207.89l0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-traffic-light::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216,144H200V80h16a8,8,0,0,0,0-16H200V40a16,16,0,0,0-16-16H72A16,16,0,0,0,56,40V64H40a8,8,0,0,0,0,16H56v64H40a8,8,0,0,0,0,16H56v56a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V160h16a8,8,0,0,0,0-16Zm-88-28a28,28,0,1,1,28-28A28,28,0,0,1,128,116Zm0,24a28,28,0,1,1-28,28A28,28,0,0,1,128,140Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M216,144H200V80h16a8,8,0,0,0,0-16H200V40a16,16,0,0,0-16-16H72A16,16,0,0,0,56,40V64H40a8,8,0,0,0,0,16H56v64H40a8,8,0,0,0,0,16H56v56a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V160h16a8,8,0,0,0,0-16Zm-88-28a28,28,0,1,1,28-28A28,28,0,0,1,128,116Zm0,24a28,28,0,1,1-28,28A28,28,0,0,1,128,140Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fas.fa-user-shield::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm-34.32,69.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm-34.32,69.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Sidebar List Fix (Routes page accordion) ---
   NOTE: v3 scoped rules with [data-v-445ca7f1] are dropped here.
   Scope hashes are regenerated per Vue CLI build; rely on structural selectors instead. */

.collapse.show .card.text-center,
.left-menu .card.text-center {
    text-align: left !important;
}

.collapse.show .card .card-body,
.left-menu .card .card-body {
    padding: 0 !important;
}

.collapse.show .card .card-body a,
.left-menu .card .card-body a {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 10px !important;
    text-decoration: none !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    font-size: 0.82rem;
    font-weight: 500;
}

.collapse.show .card .card-body a:hover,
.left-menu .card .card-body a:hover {
    background: var(--bg-hover) !important;
    color: var(--brand-cyan) !important;
}

.collapse.show .card .card-body a .fas,
.left-menu .card .card-body a .fas {
    flex-shrink: 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

.collapse.show .card .card-body a p,
.left-menu .card .card-body a p {
    margin: 0 !important;
    display: inline !important;
    font-size: inherit !important;
}

.collapse.show .card.active .card-body a,
.left-menu .card.active .card-body a {
    color: var(--brand-cyan) !important;
    background: var(--row-selected) !important;
}

.collapse.show .card.active .card-body a .fas,
.left-menu .card.active .card-body a .fas {
    opacity: 1;
}

.left-menu ul,
.accordion + .collapse ul,
.collapse.show ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.left-menu ul li,
.accordion + .collapse ul li,
.collapse.show ul li {
    list-style: none !important;
}

.left-menu .card.mb-1,
.collapse.show .card.mb-1 {
    margin-bottom: 1px !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
}

/* --- Table Font Fix --- */
.table, .table td, .table th, tbody, thead {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
}

.table td {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    white-space: nowrap;
}

.table th {
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
}

/* --- Vehicle Buttons (Map page) --- */
.btn.vehicle-button {
    border-radius: var(--radius-sm) !important;
    padding: 1px 6px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px;
    line-height: 1.3;
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

.btn.vehicle-button[style*="background-color: rgb(219, 219, 219)"],
.btn.vehicle-button[style*="background-color: rgb(201, 201, 201)"] {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

.btn.vehicle-button[style*="background-color: rgb(156, 214, 238)"],
.btn.vehicle-button[style*="background-color: rgb(193, 240, 255)"] {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.btn.vehicle-button img {
    display: none !important;
}

.btn.vehicle-button::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 0C422.4 0 512 35.2 512 80V96l0 32c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32l0 160c0 17.7-14.3 32-32 32v32c0 17.7-14.3 32-32 32H416c-17.7 0-32-14.3-32-32V448H192v32c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V448c-17.7 0-32-14.3-32-32V256c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32l0-32V80C64 35.2 153.6 0 288 0zM128 336a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm320-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 128H448c0-36.3-71.6-64-160-64S128 91.7 128 128zm0 48V240H448V176H128z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 0C422.4 0 512 35.2 512 80V96l0 32c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32l0 160c0 17.7-14.3 32-32 32v32c0 17.7-14.3 32-32 32H416c-17.7 0-32-14.3-32-32V448H192v32c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V448c-17.7 0-32-14.3-32-32V256c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32l0-32V80C64 35.2 153.6 0 288 0zM128 336a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm320-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 128H448c0-36.3-71.6-64-160-64S128 91.7 128 128zm0 48V240H448V176H128z'/%3E%3C/svg%3E") no-repeat center;
}

/* --- Hamburger button --- */
.left-menu-toggler {
    cursor: pointer;
    padding: 0.35rem !important;
    border-radius: var(--radius-sm) !important;
    transition: background 0.15s !important;
    border: none !important;
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-menu-toggler:hover {
    background: var(--bg-hover) !important;
}

.left-menu-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-width='1.5' d='M2 4h12M2 8h12M2 12h12'/%3E%3C/svg%3E") !important;
    width: 16px;
    height: 16px;
    display: block;
}

/* --- Bootstrap Modal (auth dialog, standard modals) --- */
.modal-content {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-header {
    background: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    padding: 0.6rem 0.9rem !important;
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
}

/* Neutralise the hard Bootstrap .bg-primary + .text-white on modal headers */
.modal-header.bg-primary,
.modal-header.bg-primary.text-white,
.modal-header.text-white,
.modal-header.bg-primary .modal-title,
.modal-header.text-white .modal-title {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

.modal-body {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.modal-footer {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 0.5rem 0.75rem !important;
    border-bottom-left-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

.modal-title {
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

/* Form validation — match theme danger accent */
.form-control.is-invalid,
.is-invalid {
    border-color: var(--accent-danger) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}

.invalid-feedback {
    color: var(--accent-danger) !important;
}

.form-group label {
    color: var(--text-secondary) !important;
}

/* --- Modal frames (custom component) --- */
.modal-frame-content,
.modal-frame-content > div,
.move-frame .modal-frame-content {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md);
}

.modal-frame-content .card,
.modal-frame-content .card-body,
.modal-frame-content .card-header {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.modal-frame-content .form-control,
.modal-frame-content input,
.modal-frame-content select {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

.modal-frame-content label,
.modal-frame-content .text-dark {
    color: var(--text-primary) !important;
}

/* --- Form row alignment & button groups --- */
.form-row {
    align-items: center !important;
}

.btn-group.d-block {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
}

.btn-group.d-block .btn {
    flex: 0 0 auto;
}

/* --- Leaflet Map Markers --- */
.stop-icon {
    background-image: none !important;
    background-color: var(--brand-cyan) !important;
    border-radius: 50% 50% 50% 0 !important;
    transform-origin: center bottom;
    width: 20px !important;
    height: 20px !important;
    margin-left: -10px !important;
    margin-top: -20px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transform: rotate(-45deg);
}

.stop-icon span {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    text-align: center;
    line-height: 16px;
    font-size: 9px;
}

.stop-icon span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184,32H72A32,32,0,0,0,40,64V208a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V192h64v16a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V64A32,32,0,0,0,184,32ZM80,176a12,12,0,1,1,12-12A12,12,0,0,1,80,176Zm96,0a12,12,0,1,1,12-12A12,12,0,0,1,176,176Zm24-64H56V64A16,16,0,0,1,72,48H184a16,16,0,0,1,16,16Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184,32H72A32,32,0,0,0,40,64V208a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V192h64v16a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V64A32,32,0,0,0,184,32ZM80,176a12,12,0,1,1,12-12A12,12,0,0,1,80,176Zm96,0a12,12,0,1,1,12-12A12,12,0,0,1,176,176Zm24-64H56V64A16,16,0,0,1,72,48H184a16,16,0,0,1,16,16Z'/%3E%3C/svg%3E");
    mask-size: contain;
}

.vehicle-icon {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

/* --- Accessibility: reduced motion / high contrast --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover { transform: none; }
    .data-row::after { display: none; }
}

@media (prefers-contrast: more) {
    [data-theme="light"],
    [data-theme="dark"] {
        --border-subtle: rgba(0, 0, 0, 0.25);
        --border-default: rgba(0, 0, 0, 0.35);
        --border-strong: rgba(0, 0, 0, 0.5);
    }
    [data-theme="dark"] {
        --border-subtle: rgba(255, 255, 255, 0.25);
        --border-default: rgba(255, 255, 255, 0.35);
        --border-strong: rgba(255, 255, 255, 0.5);
    }
    .table td, .table th { border-color: var(--border-default) !important; }
    .btn { border-width: 2px !important; }
    thead th { border-bottom-width: 2px !important; }
}

.table tbody:empty::after,
.table-container:empty::after {
    content: 'Нет данных';
    display: block;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* --- Responsive breakpoints --- */
@media (max-width: 1200px) {
    .navbar-nav .nav-link { font-size: 0.75rem !important; padding: 0.15rem 0.35rem !important; }
    .table td { font-size: 0.75rem !important; padding: 3px 4px !important; }
    .btn-sm { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; }
    .page-header { font-size: 0.75rem !important; padding: 0.2rem 0.75rem !important; }
}

@media (max-width: 992px) {
    .page-header { margin: 0 !important; }

    .align-panel {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .align-container {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .form-row {
        flex-wrap: wrap !important;
        gap: 4px;
        align-items: center !important;
    }

    .form-row > .col-0 {
        flex: 0 0 auto !important;
        max-width: none !important;
        margin-bottom: 2px;
    }

    .form-row > .col-0:has(.form-control) {
        flex: 1 1 auto !important;
        min-width: 130px;
        max-width: 200px !important;
    }

    .card-body .btn-warning {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.4rem !important;
    }
}

@media (max-width: 576px) {
    .navbar { padding: 0 0.5rem !important; }
    .navbar-brand { font-size: 0.8125rem !important; }
    .table td { font-size: 0.6875rem !important; padding: 2px 3px !important; }
    .table th { font-size: 0.6875rem !important; }
    .btn { font-size: 0.6875rem !important; }
    .nav-pills .nav-link { font-size: 0.6875rem !important; padding: 0.25rem 0.5rem !important; }

    .form-row > .col-0 .btn.btn-sm {
        min-width: 60px;
        font-size: 0.6875rem !important;
        padding: 1px 4px !important;
    }
}

/* ============================================================
   PASS 2.1 — Remaining bright surfaces in dark theme
   ============================================================ */

/* --- Bootstrap .bg-* utility classes on panels/cards --- */
.bg-light,
.bg-white {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.card.bg-light,
.card.bg-light > .card-header,
.card.bg-light > .card-body,
.card.bg-light .card-header,
.card.bg-light .card-body {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Nested .card.bg-light inside a parent .card.bg-light — slightly elevated */
.card.bg-light .card.bg-light {
    background: var(--bg-elevated) !important;
}

/* --- Buttons with inline background-color: white (icon-only patterns) --- */
button[style*="background-color: white"],
button[style*="background-color: rgb(255, 255, 255)"],
button[style*="background-color:#fff"],
button[style*="background-color: #fff"],
button[style*="background-color:white"] {
    background-color: transparent !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    transition: background var(--duration-fast), border-color var(--duration-fast);
}

button[style*="background-color: white"]:hover,
button[style*="background-color: rgb(255, 255, 255)"]:hover,
button[style*="background-color:#fff"]:hover,
button[style*="background-color: #fff"]:hover,
button[style*="background-color:white"]:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-default) !important;
}

/* Icons inside those buttons — inline gray color is hard to read in dark, soften in both themes */
button[style*="background-color: white"] i,
button[style*="background-color: rgb(255, 255, 255)"] i,
button[style*="background-color:#fff"] i,
button[style*="background-color: #fff"] i,
button[style*="background-color:white"] i {
    color: var(--text-secondary) !important;
}

button[style*="background-color: white"]:hover i,
button[style*="background-color: rgb(255, 255, 255)"]:hover i,
button[style*="background-color:#fff"]:hover i,
button[style*="background-color: #fff"]:hover i,
button[style*="background-color:white"]:hover i {
    color: var(--brand-cyan) !important;
}

/* Generic: inline gray icon colors rgb(162,162,162), rgb(108,117,125), etc. — dark theme */
[data-theme="dark"] i[style*="color: rgb(162, 162, 162)"],
[data-theme="dark"] i[style*="color: rgb(108, 117, 125)"],
[data-theme="dark"] i[style*="color: #6c757d"],
[data-theme="dark"] i[style*="color: gray"] {
    color: var(--text-secondary) !important;
}

/* Inline `color: black` on labels/selects — override in dark mode */
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"] {
    color: var(--text-primary) !important;
}

/* Inline `color: red` on asterisks / required-field indicators — keep vivid, use accent-danger */
[style*="color: red"] {
    color: var(--accent-danger) !important;
}

/* --- Native form-check (radio/checkbox) --- */
.form-check-input {
    accent-color: var(--brand-cyan);
    cursor: pointer;
}

[data-theme="dark"] .form-check-input {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
}

.form-check-label,
label.form-check-label {
    color: var(--text-primary) !important;
    cursor: pointer;
}

/* --- Selected row in list-style forms (.form-group.selected-row) --- */
.form-group.selected-row {
    background: var(--row-selected) !important;
    border-radius: var(--radius-sm);
    box-shadow: inset 3px 0 0 0 var(--brand-cyan);
}

.form-group.selected-row a,
.form-group.selected-row .col {
    color: var(--brand-cyan) !important;
}

.form-group:not(.selected-row):hover {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

/* Anchor styling inside forms (used for linkable list rows) */
.form a,
.form-group a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.form a:hover,
.form-group a:hover {
    color: var(--brand-cyan);
}

/* --- Cards with inline padding on header (backend-rendered dashboard cards) --- */
.card-header[style*="padding"] {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

/* --- Bootstrap text color utilities for dark theme --- */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* --- Form control inline styles (white bg on select/input) --- */
select[style*="color: black"] option,
select[style*="color: black"] {
    color: var(--text-primary) !important;
    background: var(--bg-surface) !important;
}

/* --- Radio buttons in .btn-group (Day/Period toggle pattern) --- */
.btn-group .btn.btn-success {
    background: rgba(52, 211, 153, 0.18) !important;
    color: var(--accent-success) !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
}

[data-theme="light"] .btn-group .btn.btn-success {
    background: rgba(22, 163, 74, 0.12) !important;
    color: var(--accent-success) !important;
    border-color: rgba(22, 163, 74, 0.35) !important;
}