* {
    box-sizing: border-box;
}

:root {
    --primary: #3d4fa3;
    --primary-dark: #303f8a;
    --primary-light: #eef0fb;

    --background: #f3f4f6;
    --surface: #ffffff;
    --surface-secondary: #f8f8fa;

    --border: #dfe2e8;
    --border-dark: #cfd3db;

    --text: #24272d;
    --text-secondary: #727985;

    --success: #22b45b;
    --success-light: #ecf9f1;

    --warning: #e3a11a;
    --warning-dark: #b77908;
    --warning-light: #fff8e7;

    --danger: #dc4149;
    --danger-dark: #b72e36;
    --danger-light: #fff0f1;

    --sidebar-width: 270px;
    --topbar-height: 84px;

    --shadow-small:
        0 2px 8px rgba(25, 32, 56, 0.08);

    --shadow-medium:
        0 10px 30px rgba(25, 32, 56, 0.16);

    --shadow-large:
        0 20px 60px rgba(25, 32, 56, 0.24);
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    color: var(--text);
    background: var(--background);
}

body.modal-open {
    overflow: hidden;
}

button,
input,
select {
    font: inherit;
}

button {
    color: inherit;
}

button,
input,
select {
    outline: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    box-shadow:
        0 0 0 3px rgba(61, 79, 163, 0.18);
}

button:disabled {
    cursor: not-allowed;
}

[hidden] {
    display: none !important;
}

.application {
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);
}

.sidebar {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.sidebar-logo {
    height: 108px;
    display: flex;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
}

.sidebar-logo img {
    display: block;
    width: 190px;
    height: 78px;
    object-fit: contain;
    object-position: left center;
}

.main-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 14px;
}

.menu-button {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 15px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #454a54;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.menu-button:hover {
    background: #f3f4f7;
    border-color: var(--border);
}

.menu-button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.menu-icon {
    width: 24px;
    flex: 0 0 auto;
    font-size: 20px;
    text-align: center;
}

.menu-text {
    font-size: 15px;
    font-weight: 500;
}

.sidebar-divider {
    height: 1px;
    margin: 0 16px;
    background: var(--border);
}

.drivers-panel {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 16px;
}

.drivers-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.drivers-panel-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.drivers-count {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.drivers-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding-right: 3px;
}

.drivers-list::-webkit-scrollbar,
.map-sidebar::-webkit-scrollbar,
.history-controls::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.drivers-table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.drivers-list::-webkit-scrollbar-thumb,
.map-sidebar::-webkit-scrollbar-thumb,
.history-controls::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.drivers-table-wrapper::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background: #c9cdd6;
    background-clip: padding-box;
}

.drivers-empty {
    min-height: 130px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 20px 10px;
    border: 1px dashed var(--border-dark);
    border-radius: 8px;
    color: var(--text-secondary);
    text-align: center;
}

.drivers-empty-icon {
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 28px;
}

.drivers-empty p {
    max-width: 180px;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.driver-item {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 7px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.driver-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-1px);
}

.driver-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-secondary);
}

.driver-status-dot.online {
    background: var(--success);
}

.driver-status-dot.offline {
    background: var(--danger);
}

.driver-status-dot.unknown {
    background: var(--warning);
}

.driver-information {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.driver-information strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-information small {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-list-color {
    width: 9px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 5px;
    background: var(--primary);
}

.sidebar-footer {
    padding: 16px;
}

.server-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
}

.server-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    margin-top: 4px;
    border-radius: 50%;
}

.server-status-dot.checking {
    background: var(--warning);
}

.server-status-dot.online {
    background: var(--success);
}

.server-status-dot.offline {
    background: var(--danger);
}

.server-status-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.server-status-text strong {
    font-size: 13px;
}

.server-status-text span {
    color: var(--text-secondary);
    font-size: 12px;
}

.main-area {
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 15px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-title h1 {
    margin: 0 0 5px;
    color: var(--primary);
    font-size: 26px;
    line-height: 1.1;
}

.topbar-title p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 26px;
}

.current-date {
    color: var(--text-secondary);
    font-size: 13px;
}

.user-panel {
    display: flex;
    align-items: center;
    gap: 11px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
}

.user-information {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-information strong {
    font-size: 14px;
}

.user-information span {
    color: var(--text-secondary);
    font-size: 12px;
}

.workspace {
    min-height: 0;
    flex: 1;
    overflow: hidden;
    padding: 20px;
}

.page-section {
    display: none;
    width: 100%;
    height: 100%;
}

.page-section.active {
    display: block;
}

.map-layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:
        300px
        minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.map-sidebar {
    min-width: 0;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.map-sidebar-section {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
}

.section-heading h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.section-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.square-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--primary);
    font-size: 19px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.square-button:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.square-button:disabled {
    opacity: 0.55;
}

.map-summary {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.summary-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
}

.summary-card span {
    color: var(--text-secondary);
    font-size: 12px;
}

.summary-card strong {
    color: var(--primary);
    font-size: 23px;
}

.display-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 0;
    cursor: default;
}

.display-option + .display-option {
    border-top: 1px solid var(--border);
}

.display-option input {
    position: absolute;
    opacity: 0;
}

.option-check {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-top: 1px;
    border: 1px solid var(--primary);
    border-radius: 4px;
    background: var(--primary);
}

.option-check::after {
    content: "✓";
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.option-content strong {
    font-size: 14px;
}

.option-content small {
    color: var(--text-secondary);
    font-size: 12px;
}

.map-container {
    min-width: 0;
    height: 100%;
    padding: 10px;
    background: var(--background);
}

.map-placeholder,
.history-map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f7f8fa;
}

.map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.42;
    background-image:
        linear-gradient(
            rgba(61, 79, 163, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(61, 79, 163, 0.07) 1px,
            transparent 1px
        );
    background-size: 42px 42px;
}

.map-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.map-empty-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 34px;
}

.map-empty-state h2 {
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 22px;
}

.map-empty-state p {
    max-width: 470px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.map-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.map-controls button {
    width: 38px;
    height: 38px;
    border: 0;
    background: var(--surface);
    font-size: 21px;
}

.map-controls button + button {
    border-top: 1px solid var(--border);
}

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 18px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.filter-group {
    width: 190px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.filter-driver {
    width: 280px;
}

.filter-group label,
.history-field label {
    font-size: 13px;
    font-weight: 700;
}

.filter-group select,
.filter-group input,
.history-field select,
.history-field input {
    width: 100%;
    min-height: 39px;
    padding: 8px 11px;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    outline: none;
    background: var(--surface);
    color: var(--text);
}

.filter-group select:focus,
.filter-group input:focus,
.history-field select:focus,
.history-field input:focus {
    border-color: var(--primary);
}

.primary-button,
.secondary-button,
.warning-button,
.danger-button {
    min-height: 39px;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
}

.primary-button {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.primary-button:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
}

.primary-button:disabled {
    opacity: 0.55;
}

.secondary-button {
    border: 1px solid var(--border-dark);
    background: var(--surface);
    color: var(--text);
}

.secondary-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.warning-button {
    border: 1px solid var(--warning);
    background: var(--warning);
    color: #ffffff;
}

.warning-button:hover {
    border-color: var(--warning-dark);
    background: var(--warning-dark);
}

.danger-button {
    border: 1px solid var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.danger-button:hover {
    border-color: var(--danger-dark);
    background: var(--danger-dark);
}

.full-width {
    width: 100%;
}

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

.metric-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.metric-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 24px;
}

.metric-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.metric-content span {
    color: var(--text-secondary);
    font-size: 12px;
}

.metric-content strong {
    color: var(--primary);
    font-size: 23px;
}

.metric-content small {
    color: var(--text-secondary);
    font-size: 11px;
}

.content-card {
    height: calc(100% - 166px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.content-card-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.content-card-header h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.content-card-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.empty-table {
    min-height: 0;
    display: flex;
    align-items: center;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.empty-table-icon {
    margin-bottom: 12px;
    color: var(--primary);
    font-size: 35px;
}

.empty-table h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.empty-table p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.history-layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:
        310px
        minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}

.history-controls {
    overflow-y: auto;
    padding: 20px;
    border-right: 1px solid var(--border);
}

.history-controls-header {
    margin-bottom: 22px;
}

.history-controls-header h2 {
    margin: 0 0 5px;
    font-size: 18px;
}

.history-controls-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.history-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 17px;
}

.history-information {
    margin-top: 22px;
    border-top: 1px solid var(--border);
}

.history-information div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.history-information span {
    color: var(--text-secondary);
    font-size: 12px;
}

.history-information strong {
    color: var(--primary);
    font-size: 13px;
}

.history-map-area {
    min-width: 0;
    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        70px;
    padding: 10px;
    background: var(--background);
}

.playback-panel {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.play-button {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--primary);
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
}

.playback-time {
    min-width: 42px;
    color: var(--text-secondary);
    font-size: 12px;
}

.playback-range {
    min-width: 0;
    flex: 1;
    accent-color: var(--primary);
}

.settings-view {
    display: none;
    width: 100%;
    height: 100%;
}

.settings-view.active {
    display: flex;
    flex-direction: column;
}

.settings-header {
    margin-bottom: 20px;
}

.settings-header h2 {
    margin: 0 0 5px;
    color: var(--primary);
    font-size: 22px;
}

.settings-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.settings-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.settings-card {
    width: 100%;
    min-height: 128px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease,
        opacity 0.15s ease;
}

.settings-card:hover:not(:disabled) {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.settings-card:disabled {
    opacity: 0.62;
}

.settings-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 24px;
}

.settings-card-content {
    min-width: 0;
    flex: 1;
}

.settings-card-content h3 {
    margin: 1px 0 7px;
    color: var(--primary);
    font-size: 17px;
}

.settings-card-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.settings-card-arrow {
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 25px;
}

.directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.directory-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.directory-heading h2 {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 22px;
}

.directory-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.back-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--primary);
    font-size: 21px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.back-button:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.directory-message {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
    line-height: 1.45;
}

.directory-message.success {
    border-color: rgba(34, 180, 91, 0.34);
    background: var(--success-light);
    color: #16713c;
}

.directory-message.error {
    border-color: rgba(220, 65, 73, 0.34);
    background: var(--danger-light);
    color: var(--danger-dark);
}

.directory-card {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.directory-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
}

.directory-search {
    width: min(430px, 100%);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.directory-search label {
    font-size: 12px;
    font-weight: 700;
}

.directory-search input {
    width: 100%;
    min-height: 39px;
    padding: 8px 11px;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.directory-search input:focus {
    border-color: var(--primary);
}

.directory-filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.directory-filter input {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
}

.drivers-table-wrapper {
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.drivers-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.drivers-table th,
.drivers-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.drivers-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f8fa;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.drivers-table tbody tr {
    transition:
        background 0.15s ease;
}

.drivers-table tbody tr:hover {
    background: #fafaff;
}

.drivers-table tbody tr:last-child td {
    border-bottom: 0;
}

.table-loading {
    height: 160px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center !important;
}

.driver-table-person {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.driver-table-color {
    width: 12px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--primary);
}

.driver-table-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.driver-table-name strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-table-name small {
    color: var(--text-secondary);
    font-size: 11px;
}

.driver-phone-value,
.driver-device-value {
    color: #414751;
    font-size: 13px;
}

.driver-device-value {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.driver-device-value small {
    color: var(--text-secondary);
    font-size: 11px;
}

.driver-color-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.driver-color-swatch {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    background: var(--primary);
}

.driver-color-code {
    font-size: 12px;
    font-family:
        Consolas,
        "Courier New",
        monospace;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
}

.status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-badge.active {
    background: var(--success-light);
    color: #16713c;
}

.status-badge.active::before {
    background: var(--success);
}

.status-badge.inactive {
    background: #f0f1f4;
    color: #707783;
}

.status-badge.inactive::before {
    background: #9399a3;
}

.driver-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.table-action-button {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.table-action-button:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.table-action-button.danger {
    color: var(--danger);
}

.table-action-button.danger:hover {
    border-color: var(--danger);
    background: var(--danger-light);
}

.directory-empty {
    min-height: 0;
    display: flex;
    align-items: center;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.directory-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 28px;
}

.directory-empty h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.directory-empty p {
    max-width: 420px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 25, 44, 0.56);
    backdrop-filter: blur(2px);
}

.modal-overlay-top {
    z-index: 1100;
    background: rgba(20, 25, 44, 0.64);
}

.modal-window {
    width: min(100%, 980px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-large);
}

.driver-modal-window {
    width: min(1120px, 100%);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    margin: 0 0 5px;
    color: var(--primary);
    font-size: 21px;
}

.modal-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.modal-close-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.modal-close-button:hover {
    border-color: var(--danger);
    background: var(--danger-light);
    color: var(--danger);
}

#driver-form {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.modal-content {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.driver-form-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        340px;
}

.driver-form-fields {
    min-width: 0;
    padding: 22px;
}

.form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.form-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-field label {
    color: #343943;
    font-size: 13px;
    font-weight: 700;
}

.form-field input,
.form-field select {
    width: 100%;
    min-height: 41px;
    padding: 9px 11px;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.form-field input:focus,
.form-field select:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px rgba(61, 79, 163, 0.11);
}

.form-field input.invalid,
.form-field select.invalid {
    border-color: var(--danger);
    background: var(--danger-light);
}

.form-help {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}

.required-mark {
    color: var(--danger);
}

.form-section {
    margin-top: 23px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.form-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.form-section-heading h3 {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 16px;
}

.form-section-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.standard-color-palette {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(58px, 1fr));
    gap: 9px;
}

.color-option {
    min-width: 0;
    min-height: 62px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 7px 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.color-option:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.color-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow:
        inset 0 0 0 1px var(--primary);
}

.color-option-swatch {
    width: 26px;
    height: 26px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--primary);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.14);
}

.color-option-name {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-color-row {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.7fr)
        minmax(180px, 1fr);
    gap: 15px;
    margin-top: 16px;
}

.color-picker-input {
    min-height: 43px !important;
    padding: 4px !important;
    cursor: pointer;
}

.color-picker-input::-webkit-color-swatch-wrapper {
    padding: 1px;
}

.color-picker-input::-webkit-color-swatch {
    border: 0;
    border-radius: 4px;
}

#driver-color-hex {
    font-family:
        Consolas,
        "Courier New",
        monospace;
    text-transform: uppercase;
}

.color-conflict-message {
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(227, 161, 26, 0.4);
    border-radius: 7px;
    background: var(--warning-light);
    color: #805600;
    font-size: 12px;
    line-height: 1.5;
}

.switch-field {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
    cursor: pointer;
}

.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-control {
    position: relative;
    width: 42px;
    height: 23px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 12px;
    background: #b9bec7;
    transition:
        background 0.15s ease;
}

.switch-control::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.22);
    transition:
        transform 0.15s ease;
}

.switch-field input:checked + .switch-control {
    background: var(--primary);
}

.switch-field input:checked + .switch-control::after {
    transform: translateX(19px);
}

.switch-field input:focus-visible + .switch-control {
    box-shadow:
        0 0 0 3px rgba(61, 79, 163, 0.18);
}

.switch-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switch-text strong {
    font-size: 13px;
}

.switch-text small {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.form-message {
    margin-top: 16px;
    padding: 11px 12px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.45;
}

.form-message.error {
    border: 1px solid rgba(220, 65, 73, 0.38);
    background: var(--danger-light);
    color: var(--danger-dark);
}

.form-message.success {
    border: 1px solid rgba(34, 180, 91, 0.38);
    background: var(--success-light);
    color: #16713c;
}

.driver-preview-panel {
    min-width: 0;
    padding: 22px;
    border-left: 1px solid var(--border);
    background: var(--surface-secondary);
}

.preview-heading {
    margin-bottom: 15px;
}

.preview-heading h3 {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 16px;
}

.preview-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.driver-preview-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.preview-map {
    position: relative;
    height: 230px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #f5f7fb,
            #e9edf5
        );
}

.preview-map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.7;
    background-image:
        linear-gradient(
            rgba(61, 79, 163, 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(61, 79, 163, 0.09) 1px,
            transparent 1px
        );
    background-size: 30px 30px;
}

.preview-route-trail {
    position: absolute;
    left: 41px;
    top: 120px;
    width: 222px;
    height: 68px;
    border-top: 13px solid rgba(234, 88, 12, 0.18);
    border-radius: 50%;
    transform: rotate(-10deg);
}

.preview-route-line {
    position: absolute;
    left: 41px;
    top: 120px;
    width: 222px;
    height: 68px;
    border-top: 5px solid #ea580c;
    border-radius: 50%;
    transform: rotate(-10deg);
}

.preview-gps-point {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #ea580c;
    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.25);
}

.preview-gps-point.point-one {
    left: 54px;
    top: 135px;
}

.preview-gps-point.point-two {
    left: 135px;
    top: 101px;
}

.preview-gps-point.point-three {
    left: 219px;
    top: 92px;
}

.preview-driver-marker {
    position: absolute;
    left: 225px;
    top: 64px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 4px solid #ffffff;
    border-radius: 50% 50% 50% 12px;
    background: #ea580c;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.25);
    transform: rotate(-45deg);
}

.preview-marker-arrow {
    color: #ffffff;
    font-size: 20px;
    transform: rotate(45deg);
}

.preview-driver-information {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border-top: 1px solid var(--border);
}

.preview-driver-color {
    width: 13px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 7px;
    background: #ea580c;
}

.preview-driver-information div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preview-driver-information strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-driver-information small {
    color: var(--text-secondary);
    font-size: 11px;
}

.preview-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 11px;
}

.preview-legend div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.preview-legend-line {
    width: 28px;
    height: 5px;
    border-radius: 3px;
    background: #ea580c;
}

.preview-legend-dot {
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #ea580c;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.14);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface-secondary);
}

.confirmation-modal-window {
    width: min(100%, 440px);
    align-items: center;
    padding: 28px;
    text-align: center;
}

.confirmation-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 700;
}

.confirmation-icon.warning {
    background: var(--warning-light);
    color: var(--warning-dark);
}

.confirmation-icon.danger {
    background: var(--danger-light);
    color: var(--danger);
}

.confirmation-modal-window h2 {
    margin: 0 0 9px;
    color: var(--primary);
    font-size: 20px;
}

.confirmation-modal-window p {
    max-width: 360px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.confirmation-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
}

@media (max-width: 1250px) {
    .driver-form-layout {
        grid-template-columns:
            minmax(0, 1fr)
            310px;
    }

    .standard-color-palette {
        grid-template-columns:
            repeat(4, minmax(62px, 1fr));
    }
}

@media (max-width: 1150px) {
    :root {
        --sidebar-width: 230px;
    }

    .sidebar-logo img {
        width: 165px;
    }

    .map-layout {
        grid-template-columns:
            260px
            minmax(0, 1fr);
    }

    .statistics-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .content-card {
        height: calc(100% - 264px);
    }

    .driver-form-layout {
        grid-template-columns: 1fr;
    }

    .driver-preview-panel {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .driver-preview-card {
        max-width: 520px;
    }
}

@media (max-width: 900px) {
    body {
        overflow: auto;
    }

    .application {
        min-height: 100vh;
        grid-template-columns: 1fr;
    }

    .sidebar {
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .sidebar-logo {
        height: 78px;
    }

    .sidebar-logo img {
        height: 56px;
    }

    .main-menu {
        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .menu-button {
        justify-content: center;
        padding: 10px 8px;
    }

    .menu-icon {
        display: none;
    }

    .drivers-panel,
    .sidebar-divider,
    .sidebar-footer {
        display: none;
    }

    .main-area {
        height: auto;
        min-height: calc(100vh - 140px);
    }

    .topbar {
        min-height: auto;
        align-items: flex-start;
        padding: 16px 18px;
    }

    .topbar-right {
        gap: 14px;
    }

    .current-date {
        display: none;
    }

    .workspace {
        min-height: 750px;
        overflow: visible;
        padding: 14px;
    }

    .page-section,
    .page-section.active {
        height: auto;
        min-height: 720px;
    }

    .map-layout,
    .history-layout {
        grid-template-columns: 1fr;
    }

    .map-sidebar,
    .history-controls {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .map-container,
    .history-map-area {
        min-height: 520px;
    }

    .filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-group,
    .filter-driver {
        width: 100%;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .directory-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .directory-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .directory-search {
        width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .main-menu {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .topbar {
        gap: 15px;
    }

    .user-information {
        display: none;
    }

    .statistics-cards {
        grid-template-columns: 1fr;
    }

    .directory-header .primary-button {
        width: 100%;
    }

    .standard-color-palette {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .custom-color-row {
        grid-template-columns: 1fr;
    }

    .modal-overlay {
        align-items: flex-start;
        padding: 10px;
        overflow-y: auto;
    }

    .modal-window {
        max-height: none;
    }

    .modal-header,
    .driver-form-fields,
    .driver-preview-panel,
    .modal-footer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .modal-footer button {
        width: 100%;
    }

    .confirmation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .confirmation-actions button {
        width: 100%;
    }

    .preview-map {
        height: 210px;
    }
}
/* Метка имени водителя и отдельная кнопка слежения */
.map-driver-name-label {
    position: absolute;
    left: 0;
    bottom: 34px;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px));
    display: inline-flex;
    align-items: stretch;
    min-width: max-content;
    max-width: 230px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--map-driver-color, #2563eb) 38%, white);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.18);
    color: var(--map-driver-color, #2563eb);
    font: 600 12px/1.2 Arial, sans-serif;
    white-space: nowrap;
}

.map-driver-name-label::after {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    border-right: 1px solid color-mix(in srgb, var(--map-driver-color, #2563eb) 38%, white);
    border-bottom: 1px solid color-mix(in srgb, var(--map-driver-color, #2563eb) 38%, white);
    background: white;
    content: "";
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}

.map-driver-name-label:hover {
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.24);
    transform: translateX(-50%) translateY(-1px);
}

.map-driver-name-main,
.map-driver-follow-pin {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.map-driver-name-main {
    max-width: 185px;
    padding: 7px 10px 7px 11px;
    overflow: hidden;
    border-radius: 8px 0 0 8px;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-driver-name-main:hover {
    background: color-mix(in srgb, var(--map-driver-color, #2563eb) 8%, white);
}

.map-driver-follow-pin {
    display: grid;
    width: 34px;
    min-width: 34px;
    padding: 0;
    place-items: center;
    border-left: 1px solid color-mix(in srgb, var(--map-driver-color, #2563eb) 24%, white);
    border-radius: 0 8px 8px 0;
    color: var(--map-driver-color, #2563eb);
    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.map-driver-follow-pin svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 180ms ease;
}

.map-driver-follow-pin:hover {
    background: color-mix(in srgb, var(--map-driver-color, #2563eb) 11%, white);
}

.map-driver-follow-pin:active {
    transform: scale(0.92);
}

.map-driver-follow-pin.active {
    background: var(--map-driver-color, #2563eb);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.map-driver-follow-pin.active svg {
    transform: rotate(-16deg) scale(1.08);
}

.map-driver-follow-pin.active::after {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 5px;
    height: 5px;
    border: 1px solid white;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--map-driver-color, #2563eb) 70%, transparent);
    content: "";
}

.driver-item.following {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #2563eb;
}


/* ===== Выдвижная панель карты ===== */
.map-layout {
    position: relative;
    display: block;
    isolation: isolate;
}

.map-container {
    width: 100%;
    height: 100%;
}

.map-sidebar {
    position: absolute;
    z-index: 35;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, calc(100% - 54px));
    border-right: 1px solid var(--border);
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.14);
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    visibility: hidden;
}

.map-layout.map-panel-open .map-sidebar {
    transform: translateX(0);
    visibility: visible;
}

.map-sidebar-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 14px 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--primary);
    font-size: 15px;
}

.map-panel-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.map-panel-close:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.map-panel-toggle {
    position: absolute;
    z-index: 45;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.16);
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        left 0.24s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.map-panel-toggle:hover {
    border-color: var(--primary);
    background: #ffffff;
}

.map-panel-toggle-icon {
    font-size: 17px;
    line-height: 1;
}

.map-layout.map-panel-open .map-panel-toggle {
    left: min(334px, calc(100% - 48px));
}

.map-panel-backdrop {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    cursor: default;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.map-layout.map-panel-open .map-panel-backdrop {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 720px) {
    .map-panel-toggle-text {
        display: none;
    }

    .map-panel-toggle {
        width: 38px;
        justify-content: center;
        padding: 0;
    }

    .map-layout.map-panel-open .map-panel-toggle {
        left: auto;
        right: 12px;
    }
}

/* История: выдвижная панель параметров */
.history-layout {
    position: relative;
    display: block;
    isolation: isolate;
}

.history-controls {
    position: absolute;
    z-index: 35;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, calc(100% - 54px));
    border-right: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.14);
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    visibility: hidden;
}

.history-layout.history-panel-open .history-controls {
    transform: translateX(0);
    visibility: visible;
}

.history-controls-header {
    position: sticky;
    z-index: 2;
    top: -20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: -20px -20px 22px;
    padding: 16px 14px 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.history-panel-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.history-panel-close:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.history-panel-toggle {
    position: absolute;
    z-index: 45;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.16);
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: left 0.24s ease, background 0.15s ease, border-color 0.15s ease;
}

.history-panel-toggle:hover {
    border-color: var(--primary);
    background: #ffffff;
}

.history-panel-toggle-icon {
    font-size: 17px;
    line-height: 1;
}

.history-layout.history-panel-open .history-panel-toggle {
    left: min(334px, calc(100% - 48px));
}

.history-panel-backdrop {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    cursor: default;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.history-layout.history-panel-open .history-panel-backdrop {
    opacity: 1;
    visibility: visible;
}

.history-map-area {
    width: 100%;
    height: 100%;
}

@media (max-width: 720px) {
    .history-panel-toggle-text {
        display: none;
    }

    .history-panel-toggle {
        width: 38px;
        justify-content: center;
        padding: 0;
    }

    .history-layout.history-panel-open .history-panel-toggle {
        left: auto;
        right: 12px;
    }
}

.show-all-drivers-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(37, 99, 235, 0.24);
    border-radius: 9px;
    background: var(--primary-light);
    color: var(--text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.show-all-drivers-button:hover {
    border-color: var(--primary);
    background: #e8efff;
    transform: translateY(-1px);
}

.show-all-drivers-button:active {
    transform: translateY(0);
}

.show-all-drivers-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
}

.show-all-drivers-button > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.show-all-drivers-button strong {
    color: var(--primary);
    font-size: 14px;
}

.show-all-drivers-button small {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

/* =========================================================
   MAP DARK DASHBOARD — обновление 15
   Тёмная панель в стиле выбранного пользователем макета.
   Остальные разделы сохраняют светлый корпоративный дизайн.
   ========================================================= */
body[data-current-page="map"] {
    --map-dark: #07111f;
    --map-dark-soft: #0d1a2b;
    --map-dark-card: #101f32;
    --map-dark-card-hover: #142840;
    --map-dark-border: rgba(148, 163, 184, 0.22);
    --map-blue: #2379ff;
    --map-text: #f8fafc;
    --map-muted: #94a3b8;
    background: #07111f;
}

body[data-current-page="map"] .application {
    grid-template-columns: 310px minmax(0, 1fr);
    background: var(--map-dark);
}

body[data-current-page="map"] .sidebar {
    background:
        radial-gradient(circle at 20% 0%, rgba(35, 121, 255, 0.17), transparent 34%),
        linear-gradient(180deg, #0a1728 0%, #07111f 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--map-text);
}

body[data-current-page="map"] .sidebar-logo {
    height: 88px;
    padding: 12px 20px;
    border-color: rgba(148, 163, 184, 0.15);
}

body[data-current-page="map"] .sidebar-logo img {
    width: 200px;
    height: 62px;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(35,121,255,.24));
}

body[data-current-page="map"] .main-menu {
    gap: 8px;
    padding: 16px 14px 12px;
}

body[data-current-page="map"] .menu-button {
    min-height: 52px;
    border-radius: 12px;
    color: #b9c5d5;
}

body[data-current-page="map"] .menu-button:hover {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(35, 121, 255, 0.12);
    color: #ffffff;
}

body[data-current-page="map"] .menu-button.active {
    border-color: #2b82ff;
    background: linear-gradient(135deg, #1263dc, #2b82ff);
    box-shadow: 0 10px 26px rgba(35, 121, 255, 0.28);
    color: #ffffff;
}

body[data-current-page="map"] .sidebar-divider {
    background: rgba(148, 163, 184, 0.18);
}

body[data-current-page="map"] .drivers-panel {
    padding: 16px 14px;
}

body[data-current-page="map"] .drivers-panel-header h2 {
    color: #ffffff;
    font-size: 15px;
}

body[data-current-page="map"] .drivers-count {
    background: rgba(35, 121, 255, 0.2);
    color: #9ec5ff;
}

body[data-current-page="map"] .drivers-empty {
    border-color: rgba(148, 163, 184, 0.24);
    color: var(--map-muted);
}

body[data-current-page="map"] .driver-item {
    position: relative;
    min-height: 74px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--map-dark-border);
    border-radius: 13px;
    background: rgba(15, 31, 50, 0.84);
    box-shadow: inset 3px 0 0 var(--driver-color);
}

body[data-current-page="map"] .driver-item:hover {
    border-color: color-mix(in srgb, var(--driver-color) 68%, transparent);
    background: var(--map-dark-card-hover);
    transform: translateY(-1px);
}

body[data-current-page="map"] .driver-item.following {
    border-color: var(--driver-color);
    background: linear-gradient(90deg, color-mix(in srgb, var(--driver-color) 18%, #0f1f32), #101f32 60%);
    box-shadow:
        inset 4px 0 0 var(--driver-color),
        0 0 0 1px color-mix(in srgb, var(--driver-color) 25%, transparent),
        0 10px 24px rgba(0,0,0,.22);
}

body[data-current-page="map"] .driver-item-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 4px 11px 12px;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

body[data-current-page="map"] .driver-direction-icon {
    display: block;
    color: var(--driver-color);
    font-size: 29px;
    line-height: 1;
    transform: rotate(-38deg);
    filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--driver-color) 45%, transparent));
}

body[data-current-page="map"] .driver-information strong {
    color: #f8fafc !important;
    font-size: 14px;
}

body[data-current-page="map"] .driver-information small {
    color: #9aa8ba;
    font-size: 11px;
}

body[data-current-page="map"] .driver-information small.online { color: #4ade80; }
body[data-current-page="map"] .driver-information small.unknown { color: #fbbf24; }
body[data-current-page="map"] .driver-information small.offline { color: #fb7185; }

body[data-current-page="map"] .driver-live-metrics {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
    color: #dbeafe;
    white-space: nowrap;
}

body[data-current-page="map"] .driver-live-metrics strong {
    font-size: 12px;
}

body[data-current-page="map"] .driver-live-metrics small {
    color: #7f8fa3;
    font-size: 10px;
}

body[data-current-page="map"] .driver-list-follow-pin {
    width: 34px;
    height: 42px;
    align-self: center;
    display: grid;
    place-items: center;
    margin-right: 7px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 9px;
    background: rgba(2, 10, 20, 0.34);
    color: #8da0b9;
    cursor: pointer;
    transition: all .16s ease;
}

body[data-current-page="map"] .driver-list-follow-pin svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

body[data-current-page="map"] .driver-list-follow-pin:hover {
    border-color: var(--driver-color);
    color: var(--driver-color);
    transform: translateY(-1px);
}

body[data-current-page="map"] .driver-list-follow-pin.active {
    border-color: var(--driver-color);
    background: var(--driver-color);
    color: #ffffff;
    box-shadow: 0 0 16px color-mix(in srgb, var(--driver-color) 52%, transparent);
}

body[data-current-page="map"] .sidebar-footer {
    padding: 12px 14px 16px;
}

body[data-current-page="map"] .server-status {
    border-color: rgba(74, 222, 128, 0.2);
    background: rgba(15, 31, 50, 0.84);
    color: #ffffff;
}

body[data-current-page="map"] .server-status-text span {
    color: #8fa0b5;
}

body[data-current-page="map"] .main-area {
    background: #07111f;
}

body[data-current-page="map"] .topbar {
    min-height: 82px;
    padding: 13px 24px;
    border-color: rgba(148, 163, 184, 0.16);
    background: linear-gradient(90deg, #0a1728, #0c1a2d);
    color: #ffffff;
}

body[data-current-page="map"] .topbar-title h1 {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 26px;
}

body[data-current-page="map"] .topbar-title h1::first-letter {
    color: #60a5fa;
}

body[data-current-page="map"] .topbar-title p,
body[data-current-page="map"] .current-date,
body[data-current-page="map"] .user-information span {
    color: #8fa0b5;
}

body[data-current-page="map"] .user-avatar {
    background: #1263dc;
    color: #ffffff;
    box-shadow: 0 0 18px rgba(35,121,255,.28);
}

body[data-current-page="map"] .workspace {
    padding: 10px;
    background: #07111f;
}

body[data-current-page="map"] .map-layout {
    border-color: rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: #07111f;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

body[data-current-page="map"] .map-container {
    padding: 0;
    background: #07111f;
}

body[data-current-page="map"] .map-placeholder {
    border: 0;
    border-radius: 13px;
}

body[data-current-page="map"] .map-panel-toggle,
body[data-current-page="map"] .history-panel-toggle {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(7, 17, 31, 0.9);
    color: #bfdbfe;
    backdrop-filter: blur(12px);
}

body[data-current-page="map"] .map-sidebar {
    border-color: rgba(148, 163, 184, 0.18);
    background: #0b1829;
    color: #ffffff;
}

body[data-current-page="map"] .map-sidebar-header,
body[data-current-page="map"] .map-sidebar-section {
    border-color: rgba(148, 163, 184, 0.18);
    background: #0b1829;
}

body[data-current-page="map"] .map-sidebar .section-heading p,
body[data-current-page="map"] .map-sidebar .option-content small,
body[data-current-page="map"] .map-sidebar .summary-card span {
    color: #8fa0b5;
}

body[data-current-page="map"] .map-sidebar .summary-card,
body[data-current-page="map"] .show-all-drivers-button {
    border-color: rgba(148, 163, 184, 0.2);
    background: #102137;
}

body[data-current-page="map"] .show-all-drivers-button:hover {
    border-color: #3b82f6;
    background: #142a45;
}

body[data-current-page="map"] .show-all-drivers-button strong {
    color: #bfdbfe;
}

/* Плашка имени и отдельная булавка на карте */
body[data-current-page="map"] .map-driver-name-label {
    border: 1px solid color-mix(in srgb, var(--map-driver-color) 65%, #ffffff 12%);
    border-radius: 10px;
    background: rgba(7, 17, 31, 0.94);
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

body[data-current-page="map"] .map-driver-name-main {
    color: #ffffff;
}

body[data-current-page="map"] .map-driver-follow-pin {
    border-left-color: rgba(148, 163, 184, 0.22);
    background: rgba(255,255,255,.04);
    color: var(--map-driver-color);
}

body[data-current-page="map"] .map-driver-follow-pin.active {
    background: var(--map-driver-color);
    color: #ffffff;
    box-shadow: 0 0 16px color-mix(in srgb, var(--map-driver-color) 55%, transparent);
}

/* Тёмное информационное окно Yandex Maps */
body[data-current-page="map"] [class*="balloon__layout"],
body[data-current-page="map"] [class*="balloon__content"],
body[data-current-page="map"] [class*="balloon__tail"]::after {
    background: #0b1829 !important;
    color: #e5edf8 !important;
}

body[data-current-page="map"] [class*="balloon__layout"] {
    border-radius: 13px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.36) !important;
}

body[data-current-page="map"] [class*="balloon__close-button"] {
    filter: invert(1) opacity(.72);
}

@media (max-width: 980px) {
    body[data-current-page="map"] .application {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    body[data-current-page="map"] .driver-live-metrics {
        display: none;
    }
}


/* =========================================================
   UPDATE 16 — unified dark UI and interaction polish
   ========================================================= */
:root {
    --app-bg: #06101e;
    --app-panel: #0b1828;
    --app-card: #102033;
    --app-card-hover: #152a43;
    --app-border: rgba(148,163,184,.20);
    --app-text: #f8fafc;
    --app-muted: #94a3b8;
    --app-blue: #2b82ff;
}

body,
body[data-current-page] {
    background: var(--app-bg);
    color: var(--app-text);
}

.application,
body[data-current-page] .application {
    grid-template-columns: 310px minmax(0,1fr);
    background: var(--app-bg);
}

.sidebar,
body[data-current-page] .sidebar {
    background: radial-gradient(circle at 15% 0%,rgba(43,130,255,.15),transparent 32%),linear-gradient(180deg,#0a1728,#06101e);
    border-right:1px solid var(--app-border);
    color:var(--app-text);
}

.sidebar-logo,
body[data-current-page] .sidebar-logo {
    height:88px;
    padding:0 22px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--app-border);
}

.brand-logo {display:flex;align-items:center;gap:12px;color:#fff;white-space:nowrap;}
.brand-mark {font-size:29px;color:#3b82f6;filter:drop-shadow(0 0 10px rgba(59,130,246,.5));transform:rotate(45deg);display:inline-block;}
.brand-text {font-size:25px;font-weight:800;letter-spacing:-.6px;}
.brand-text strong {color:#3b82f6;}

.topbar,
body[data-current-page] .topbar {
    min-height:88px;
    padding:0 22px;
    background:linear-gradient(90deg,#0a1728,#07111f);
    border-bottom:1px solid var(--app-border);
    color:#fff;
}
.topbar-title h1 {color:#fff;}
.topbar-title p {color:var(--app-muted);}
.topbar-right {display:flex;align-items:center;gap:14px;}
.topbar-server-pill {display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(74,222,128,.18);border-radius:999px;background:rgba(16,185,129,.10);font-size:13px;white-space:nowrap;}
.topbar-clock {display:flex;flex-direction:column;align-items:flex-end;min-width:112px;}
.topbar-clock strong {font-size:19px;line-height:1.05;color:#fff;}
.topbar-clock span {margin-top:4px;font-size:11px;color:var(--app-muted);text-transform:none;}
.current-date {color:var(--app-muted);}
.user-information strong {color:#fff;}.user-information span{color:var(--app-muted);}

.workspace,
body[data-current-page] .workspace {background:#081421;}
.page-section {color:var(--app-text);}

/* Unified dark cards for statistics, history and settings */
.filter-bar,.statistics-card,.history-layout,.history-controls,.history-map-area,.settings-card,.drivers-table-container,.drivers-toolbar,.modal-content,.form-section,.preview-panel,.empty-state {
    background:var(--app-card) !important;
    border-color:var(--app-border) !important;
    color:var(--app-text) !important;
}
.settings-header h2,.settings-card h3,.history-controls h2,.filter-bar label,.modal-header h2,.form-group label,.drivers-table th,.drivers-table td {color:var(--app-text) !important;}
.settings-card p,.history-controls p,.modal-header p,.form-help,.drivers-table small,.empty-state p {color:var(--app-muted) !important;}
.settings-card:hover,.statistics-card:hover {background:var(--app-card-hover) !important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22);}
input,select,textarea {background:#0a1728 !important;color:#fff !important;border-color:var(--app-border) !important;}

/* Driver card text never gets cut */
body[data-current-page] .driver-item {min-height:82px;}
body[data-current-page] .driver-item-main {grid-template-columns:30px minmax(0,1fr) auto;}
body[data-current-page] .driver-information {min-width:0;overflow:visible;}
body[data-current-page] .driver-information strong {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.driver-status-row {display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;margin-top:4px;}
.driver-status-row small {display:block;max-width:100%;white-space:normal;line-height:1.15;}
.driver-following-text {color:#60a5fa !important;font-weight:700;}
.driver-following-text::before {content:"• ";}

.sidebar-show-all-drivers {width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(96,165,250,.35);border-radius:12px;background:rgba(37,99,235,.10);color:#dbeafe;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;}
.sidebar-show-all-drivers:hover {transform:translateY(-2px);background:rgba(37,99,235,.20);border-color:#60a5fa;box-shadow:0 10px 24px rgba(37,99,235,.18);}
.sidebar-show-all-drivers:active {transform:translateY(0) scale(.98);}

/* Better clickability animation for controls */
button,.menu-button,.settings-card,.driver-item,.map-driver-name-label {transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,filter .16s ease;}
button:not(:disabled):hover,.menu-button:hover {filter:brightness(1.08);}
button:not(:disabled):active {transform:scale(.97);}

/* Name label hover: subtle bubble, never white */
body[data-current-page] .map-driver-name-label:hover {
    transform:translateY(-3px) scale(1.035);
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.32));
    animation:mapLabelBubble .42s ease both;
}
body[data-current-page] .map-driver-name-main:hover {background:color-mix(in srgb,var(--label-color) 18%,#101f32) !important;color:#fff !important;}
@keyframes mapLabelBubble {0%{transform:translateY(0) scale(1)}55%{transform:translateY(-5px) scale(1.05)}100%{transform:translateY(-3px) scale(1.035)}}

/* Balloon above marker and compact */
body[data-current-page] [class*="balloon__layout"] {background:#0b1828 !important;border:1px solid rgba(148,163,184,.28) !important;border-radius:14px !important;box-shadow:0 20px 50px rgba(0,0,0,.45) !important;overflow:hidden !important;}
body[data-current-page] [class*="balloon__content"] {background:#0b1828 !important;color:#fff !important;padding:0 !important;margin:0 !important;}
body[data-current-page] [class*="balloon__tail"]::after {background:#0b1828 !important;}
body[data-current-page] [class*="balloon__close-button"] {filter:invert(1);opacity:.8;}
.driver-info-card {width:280px;padding:16px 18px;color:#fff;background:#0b1828;}
.driver-info-card-header {display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-right:24px;}
.driver-info-card-header strong {font-size:16px;}
.driver-info-accent {width:5px;height:28px;border-radius:999px;background:var(--driver-color);box-shadow:0 0 12px color-mix(in srgb,var(--driver-color) 55%,transparent);}
.driver-info-row {display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:7px 0;border-top:1px solid rgba(148,163,184,.12);font-size:12px;}
.driver-info-row span {color:#94a3b8;}.driver-info-row b{color:#fff;text-align:right;font-weight:600;}

/* Keep marker visually above trail while balloon is open */
.ymaps-2-1-79-placemark-overlay {z-index:500 !important;}

@media (max-width:1100px){.application,body[data-current-page] .application{grid-template-columns:270px minmax(0,1fr)}.topbar-server-pill{padding:8px 10px}.user-information{display:none}}

/* Update 17: real logo on dark background */
.sidebar-logo-image {
    display: block;
    width: min(238px, 100%);
    max-height: 66px;
    object-fit: contain;
    object-position: left center;
    opacity: 0.88;
    filter:
        brightness(1.12)
        saturate(0.82)
        drop-shadow(0 4px 12px rgba(37, 99, 235, 0.18));
    transition:
        opacity 180ms ease,
        filter 180ms ease,
        transform 180ms ease;
}

.sidebar-logo:hover .sidebar-logo-image {
    opacity: 0.98;
    filter:
        brightness(1.18)
        saturate(0.92)
        drop-shadow(0 5px 16px rgba(37, 99, 235, 0.28));
    transform: translateY(-1px);
}

/* Update 17: label only jumps vertically and stays centered above marker */
body[data-current-page] .map-driver-name-label,
body[data-current-page] .map-driver-name-label:hover {
    transform-origin: 50% 100%;
}

body[data-current-page] .map-driver-name-label:hover {
    transform: translateX(-50%) translateY(-2px) scale(1.018);
    animation: mapLabelGentleJump 300ms ease-out both;
}

@keyframes mapLabelGentleJump {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    55% {
        transform: translateX(-50%) translateY(-4px) scale(1.025);
    }

    100% {
        transform: translateX(-50%) translateY(-2px) scale(1.018);
    }
}

@media (max-width: 1100px) {
    .sidebar-logo-image {
        width: min(205px, 100%);
        max-height: 58px;
    }
}


/* Update 18: stable white logo and one-time hover lift */
.sidebar-logo-image,
body[data-current-page] .sidebar-logo-image {
    display: block;
    width: min(238px, 100%);
    max-height: 66px;
    object-fit: contain;
    object-position: left center;
    opacity: 0.92;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.08));
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.sidebar-logo:hover .sidebar-logo-image,
body[data-current-page] .sidebar-logo:hover .sidebar-logo-image {
    opacity: 0.92;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.08));
    transform: none;
}

body[data-current-page] .map-driver-name-label {
    transform: translateX(-50%) translateY(0) scale(1);
    transform-origin: 50% 100%;
    animation: none !important;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, filter 220ms ease;
}

body[data-current-page] .map-driver-name-label:hover {
    transform: translateX(-50%) translateY(-3px) scale(1.018);
    animation: none !important;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.32));
}

/* Update 19: unified header, stable hover labels, server details and battery */
.topbar-title p:empty { display: none; }
.topbar-title h1 { margin-bottom: 0; }

.sidebar-logo,
body[data-current-page] .sidebar-logo {
    min-height: 88px !important;
    height: 88px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
}
.sidebar-logo-image,
body[data-current-page] .sidebar-logo-image {
    width: 205px !important;
    height: 58px !important;
    max-width: 100% !important;
    max-height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
    opacity: .96 !important;
    transform: none !important;
    filter: brightness(0) invert(1) opacity(.92) drop-shadow(0 4px 12px rgba(255,255,255,.06)) !important;
}
.sidebar-logo:hover .sidebar-logo-image,
body[data-current-page] .sidebar-logo:hover .sidebar-logo-image {
    transform: none !important;
    filter: brightness(0) invert(1) opacity(.92) drop-shadow(0 4px 12px rgba(255,255,255,.06)) !important;
}

body[data-current-page] .map-driver-name-label {
    animation: none !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    transform-origin: 50% 100% !important;
    transition: transform 190ms cubic-bezier(.22,.8,.3,1), filter 190ms ease, box-shadow 190ms ease !important;
    will-change: transform;
}
body[data-current-page] .map-driver-name-label:hover,
body[data-current-page] .map-driver-name-label:focus-within {
    animation: none !important;
    transform: translateX(-50%) translateY(-4px) scale(1.045) !important;
    filter: drop-shadow(0 9px 15px rgba(0,0,0,.34)) !important;
}
.driver-item {
    animation: none !important;
    transition: transform 180ms cubic-bezier(.22,.8,.3,1), border-color 180ms ease, box-shadow 180ms ease !important;
}
.driver-item:hover {
    animation: none !important;
    transform: translateY(-2px) scale(1.012) !important;
}
.driver-item-main:hover { transform: none !important; }

.topbar-server-wrap { position: relative; }
.topbar-server-pill { cursor: pointer; color: inherit; font: inherit; }
.server-details-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    padding: 16px;
    border: 1px solid rgba(96,165,250,.24);
    border-radius: 16px;
    background: rgba(5,18,36,.97);
    box-shadow: 0 22px 60px rgba(0,0,0,.42);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 5000;
    pointer-events: none;
}
.server-details-popover.open,
.topbar-server-wrap:hover .server-details-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.server-details-popover::before {
    content: "";
    position: absolute;
    right: 28px;
    top: -7px;
    width: 13px;
    height: 13px;
    background: rgba(5,18,36,.97);
    border-left: 1px solid rgba(96,165,250,.24);
    border-top: 1px solid rgba(96,165,250,.24);
    transform: rotate(45deg);
}
.server-details-header { display:flex; align-items:center; gap:11px; padding-bottom:13px; border-bottom:1px solid rgba(148,163,184,.14); }
.server-details-header strong { display:block; color:#f8fafc; font-size:14px; }
.server-details-header small { color:#8494aa; font-size:11px; }
.server-details-live-dot { width:12px; height:12px; border-radius:50%; background:#64748b; box-shadow:0 0 10px rgba(100,116,139,.45); transition:background .2s ease, box-shadow .2s ease; }
.server-details-live-dot.online { background:#22c55e; box-shadow:0 0 14px rgba(34,197,94,.75); }
.server-details-live-dot.offline { background:#ef4444; box-shadow:0 0 14px rgba(239,68,68,.65); }
.server-details-live-dot.checking { background:#f59e0b; box-shadow:0 0 14px rgba(245,158,11,.6); }
.server-details-grid { display:grid; gap:10px; margin:13px 0 0; }
.server-details-grid div { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.server-details-grid dt { color:#8291a8; font-size:12px; }
.server-details-grid dd { margin:0; color:#e8eef8; font-size:12px; font-weight:700; text-align:right; }

.driver-live-metrics { min-width:86px; }
.tracker-battery { display:inline-flex; align-items:center; gap:6px; color:#dbe7f7; white-space:nowrap; }
.tracker-battery.compact { justify-content:flex-end; font-size:10px; }
.tracker-battery-icon { position:relative; display:inline-flex; width:25px; height:12px; padding:2px; border:1.5px solid currentColor; border-radius:3px; }
.tracker-battery-icon::after { content:""; position:absolute; right:-4px; top:3px; width:3px; height:5px; border-radius:0 2px 2px 0; background:currentColor; }
.tracker-battery-icon i { display:block; width:var(--battery-level); max-width:100%; height:100%; border-radius:1px; background:currentColor; transition:width .25s ease; }
.tracker-battery-good { color:#4ade80; }
.tracker-battery-medium { color:#facc15; }
.tracker-battery-low { color:#fb4f4f; }
.tracker-battery-unknown { color:#718096; }
.driver-info-row .tracker-battery { justify-content:flex-end; }

@media (max-width: 1150px) {
    .sidebar-logo-image, body[data-current-page] .sidebar-logo-image { width:185px !important; }
    .server-details-popover { width:290px; }
}

/* Version 1.21.0: unified navigation and administrator diagnostics */
body[data-current-page] .menu-button.active,
body[data-current-page="map"] .menu-button.active {
    border-color: #6071cf !important;
    background: #4b5fc0 !important;
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(75, 95, 192, 0.22) !important;
    color: #ffffff !important;
}

body[data-current-page] .menu-button.active:hover,
body[data-current-page="map"] .menu-button.active:hover {
    border-color: #6d7ddb !important;
    background: #5367c8 !important;
    box-shadow: 0 10px 26px rgba(75, 95, 192, 0.3) !important;
}

.user-panel-wrap {
    position: relative;
    flex: 0 0 auto;
}

.user-panel {
    appearance: none;
    border: 0;
    padding: 4px 2px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 160ms ease, transform 160ms ease;
}

.user-panel:hover,
.user-panel[aria-expanded="true"] {
    background: rgba(148, 163, 184, 0.08);
}

.user-panel:active {
    transform: scale(0.985);
}

.user-avatar,
body[data-current-page] .user-avatar,
body[data-current-page="map"] .user-avatar {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18) !important;
}

.user-details-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    padding: 16px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 16px;
    background: rgba(5, 18, 36, 0.98);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    z-index: 5000;
    pointer-events: none;
}

.user-details-popover.open,
.user-panel-wrap:hover .user-details-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-details-popover::before {
    content: "";
    position: absolute;
    right: 32px;
    top: -7px;
    width: 13px;
    height: 13px;
    background: rgba(5, 18, 36, 0.98);
    border-left: 1px solid rgba(96, 165, 250, 0.22);
    border-top: 1px solid rgba(96, 165, 250, 0.22);
    transform: rotate(45deg);
}

.user-details-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.user-avatar-large {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
}

.user-details-header strong {
    display: block;
    color: #f8fafc;
    font-size: 14px;
}

.user-details-header small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #9aacbf;
    font-size: 11px;
}

.user-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.65);
}

.user-details-grid {
    display: grid;
    gap: 10px;
    margin: 13px 0 0;
}

.user-details-grid div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.user-details-grid dt {
    color: #8291a8;
    font-size: 12px;
}

.user-details-grid dd {
    margin: 0;
    color: #e8eef8;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 1100px) {
    .user-details-popover {
        width: 290px;
    }
}

/* v1.21.3: full driver name in the left sidebar */
body[data-current-page="map"] .driver-item {
    min-height: 88px;
}

body[data-current-page="map"] .driver-item-main {
    grid-template-columns: 28px minmax(0, 1fr) 62px;
    gap: 7px;
    padding-left: 10px;
}

body[data-current-page="map"] .driver-information {
    min-width: 0;
    overflow: visible;
}

body[data-current-page="map"] .driver-information strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 2.35em;
    line-height: 1.16;
    word-break: normal;
    overflow-wrap: break-word;
}

body[data-current-page="map"] .driver-live-metrics {
    min-width: 58px;
}

/* ===== ProSystem GPS 2.0.0: задачи ===== */
.sidebar-footer {
    display: grid;
    gap: 10px;
}

.sidebar-refresh-tasks {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(124, 139, 190, 0.28);
    border-radius: 14px;
    background: rgba(48, 56, 91, 0.72);
    color: #f5f7ff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    cursor: pointer;
    text-align: left;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.sidebar-refresh-tasks:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(140, 156, 222, 0.62);
    background: rgba(61, 71, 112, 0.9);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.sidebar-refresh-tasks:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.sidebar-refresh-tasks-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    font-size: 20px;
    flex: 0 0 auto;
}

.sidebar-refresh-tasks.syncing .sidebar-refresh-tasks-icon {
    animation: task-refresh-spin 800ms linear infinite;
}

.sidebar-refresh-tasks-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.sidebar-refresh-tasks-copy strong {
    font-size: 13px;
}

.sidebar-refresh-tasks-copy small {
    color: #9ea8c7;
    font-size: 10px;
    line-height: 1.25;
}

@keyframes task-refresh-spin {
    to { transform: rotate(360deg); }
}

.driver-task-summary {
    color: #c7cee8 !important;
    font-size: 10px !important;
    white-space: nowrap;
}

.task-map-marker {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    background: var(--task-driver-color, #7c3aed);
    border: 3px solid rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 19px rgba(7, 10, 25, 0.38);
    color: #fff;
    font-weight: 900;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.task-map-marker:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 12px 28px rgba(7, 10, 25, 0.48);
}

.task-map-marker.warning .task-map-marker-symbol {
    color: #ffd84d;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.task-map-marker.error .task-map-marker-symbol {
    color: #ff4d5f;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.task-map-marker.completed .task-map-marker-symbol {
    color: #4ade80;
    font-size: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.task-map-marker.arrived {
    position: relative;
    z-index: 1;
}

.task-map-marker.arrived::before {
    /* v9.4.4: legacy CSS-pulse отключён. Единственная волна автозавершения
       рисуется одним Yandex Circle в map.js. */
    content: none !important;
    display: none !important;
    animation: none !important;
}

.task-balloon {
    width: 310px;
    max-width: calc(100vw - 48px);
    color: #edf1ff;
    background: #171d32;
    border: 1px solid rgba(139, 153, 208, 0.3);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
}

.task-balloon-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.task-balloon-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--task-driver-color);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--task-driver-color) 18%, transparent);
}

.task-balloon-header strong {
    font-size: 15px;
}

.task-balloon-grid {
    display: grid;
    gap: 8px;
}

.task-balloon-row {
    display: grid;
    gap: 2px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.task-balloon-row span {
    color: #8f99bc;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.task-balloon-row b,
.task-balloon-row p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-line;
}

.task-address-review {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 199, 65, 0.08);
    border: 1px solid rgba(255, 199, 65, 0.26);
}

.task-address-review.error {
    background: rgba(255, 77, 95, 0.08);
    border-color: rgba(255, 77, 95, 0.26);
}

.task-address-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.task-address-action {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    color: #f2f5ff;
    padding: 7px 9px;
    font-size: 10px;
    cursor: pointer;
    transition: transform 150ms ease, background 150ms ease;
}

.task-address-action:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.13);
}


/* v2.0.1 — задачи курьеров, которых ещё нет в справочнике */
.task-map-marker.unmatched {
    background: rgba(15, 23, 42, 0.96);
    border-color: #ffffff;
    color: #facc15;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.16),
        0 8px 20px rgba(0, 0, 0, 0.34);
}

.task-map-marker.unmatched .task-map-marker-symbol {
    color: #facc15;
    text-shadow: 0 1px 6px rgba(250, 204, 21, 0.45);
}

/* v2.1.0 — раздел задач */
.tasks-page-layout{display:grid;grid-template-columns:minmax(330px,38%) 1fr;gap:14px;height:calc(100vh - 118px);min-height:620px}.tasks-list-panel,.task-detail-panel{background:#071727;border:1px solid #1b334b;border-radius:12px;overflow:hidden}.tasks-list-panel{display:flex;flex-direction:column}.tasks-toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid #1b334b}.tasks-toolbar h2{margin:0;color:#f8fafc;font-size:18px}.tasks-toolbar p{margin:4px 0 0;color:#8294a8;font-size:12px}.tasks-search-wrap{display:flex;align-items:center;gap:9px;margin:14px 14px 8px;padding:0 12px;background:#0c2034;border:1px solid #233c55;border-radius:9px;color:#758ba0}.tasks-search-wrap input{width:100%;height:40px;border:0;outline:0;background:transparent;color:#f8fafc}.tasks-filter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 14px 12px}.task-filter-button{border:1px solid #29435e;background:#0c2034;color:#98aabc;border-radius:8px;padding:8px 4px;font-size:11px;cursor:pointer}.task-filter-button.active{background:#4b5fc1;color:#fff;border-color:#6577d5}.task-filter-button span{display:block;font-weight:700;margin-top:2px}.tasks-page-list{padding:4px 12px 14px;overflow:auto;display:flex;flex-direction:column;gap:8px}.tasks-page-empty{padding:48px 20px;text-align:center;color:#8396aa}.task-list-card{position:relative;display:grid;grid-template-columns:5px 1fr 30px;gap:10px;width:100%;text-align:left;border:1px solid #203b55;background:#0b1d30;border-radius:10px;padding:11px 10px 11px 0;color:#fff;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.task-list-card:hover,.task-list-card.selected{transform:translateY(-2px) scale(1.006);border-color:var(--task-color);background:#10263d}.task-list-accent{background:var(--task-color);border-radius:0 6px 6px 0}.task-list-main{min-width:0;display:flex;flex-direction:column;gap:3px}.task-list-main strong{font-size:14px}.task-list-address{font-size:12px;color:#a9bad0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-list-main small{font-size:12px;color:#e2e8f0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-list-main em{font-size:11px;color:#7892ad;font-style:normal}.task-list-state{align-self:center;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-weight:900}.task-list-state.warning{color:#111827;background:#facc15}.task-list-state.completed{background:#22c55e;color:#fff}.task-list-state.ready{border:2px solid var(--task-color)}.task-detail-panel{position:relative;overflow:auto}.task-detail-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;color:#8294a8}.task-detail-empty-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:15px;background:#10263d;color:#6f83df;font-size:28px}.task-detail-empty h2{color:#f8fafc;margin:16px 0 8px}.task-detail-empty p{max-width:420px;line-height:1.5}.task-detail-content{padding:18px}.task-detail-header{display:flex;justify-content:space-between;gap:20px;margin-bottom:14px}.task-detail-header h2{color:#fff;margin:6px 0 3px}.task-detail-header p{margin:0;color:#93a7bb}.task-detail-status{display:inline-flex;border-radius:999px;padding:5px 9px;background:#17324a;color:#b9c9d8;font-size:11px}.task-detail-status.warning{background:#4a3810;color:#fde68a}.task-detail-status.completed{background:#113c2b;color:#86efac}.task-detail-close{border:1px solid #29435e;background:#0b1d30;color:#a9bad0;width:34px;height:34px;border-radius:9px;font-size:21px;cursor:pointer}.task-detail-map{height:300px;border-radius:11px;overflow:hidden;background:#0c2034;border:1px solid #233c55;margin-bottom:16px}.task-detail-map-loading{height:100%;display:grid;place-items:center;color:#8294a8}.task-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.task-form-grid label{display:flex;flex-direction:column;gap:6px;color:#8fa3b8;font-size:12px}.task-form-grid input,.task-form-grid textarea{background:#0c2034;border:1px solid #29435e;border-radius:8px;color:#f8fafc;padding:10px 11px;outline:0;resize:vertical}.task-form-grid input:focus,.task-form-grid textarea:focus{border-color:#6577d5}.task-form-wide{grid-column:1/-1}.task-address-suggestion{margin-top:14px;padding:13px;border-radius:9px;border:1px solid #634e12;background:#29230d;color:#fde68a}.task-address-suggestion p{margin:5px 0 0;color:#f8fafc}.task-address-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}.task-coordinate-row{display:flex;justify-content:space-between;padding:13px 0;color:#8fa3b8;border-bottom:1px solid #1b334b}.task-coordinate-row strong{color:#f8fafc}.task-detail-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:15px}.task-detail-message{margin-top:10px;padding:10px;border-radius:8px}.task-detail-message.success{background:#113c2b;color:#86efac}.task-detail-message.error{background:#461d27;color:#fda4af}@media(max-width:1050px){.tasks-page-layout{grid-template-columns:1fr;height:auto}.tasks-list-panel{max-height:520px}.task-detail-panel{min-height:650px}}@media(max-width:680px){.task-form-grid{grid-template-columns:1fr}.tasks-filter-row{grid-template-columns:repeat(2,1fr)}}

/* v2.1.2: справочник водителей в боковой панели нужен только на основной карте */
body:not([data-current-page="map"]) .drivers-panel,
body:not([data-current-page="map"]) .sidebar-divider {
    display: none !important;
}

.task-detail-map-loading {
    padding: 24px;
    text-align: center;
    line-height: 1.5;
    color: #cbd5e1;
    overflow-wrap: anywhere;
}

/* 2.1.6 — фильтр задач по курьеру */
.tasks-driver-filter-row{display:flex;gap:7px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:thin}.task-driver-filter-button{--task-driver-filter-color:#6577d5;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;max-width:220px;min-height:34px;padding:7px 10px;border:1px solid #29435e;background:#0c2034;color:#a9bad0;border-radius:9px;font-size:11px;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease}.task-driver-filter-button:hover{transform:translateY(-1px);border-color:#516a84;color:#f8fafc}.task-driver-filter-button.active{border-color:var(--task-driver-filter-color);background:#12283e;color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--task-driver-filter-color) 45%,transparent)}.task-driver-filter-button>span:not(.task-driver-filter-dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-driver-filter-button b{font-size:10px;color:#d8e1eb;background:#1b334b;border-radius:999px;padding:2px 6px}.task-driver-filter-dot{width:9px;height:9px;border-radius:50%;background:var(--task-driver-filter-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--task-driver-filter-color) 22%,transparent)}

/* v2.1.7 — adaptive width of the task list and courier filters */
@media (min-width: 1051px) {
    .tasks-page-layout {
        grid-template-columns: clamp(430px, 42vw, 610px) minmax(0, 1fr);
    }
}

.tasks-driver-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 7px;
    overflow: visible;
    scrollbar-width: auto;
}

.task-driver-filter-button {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: flex-start;
}

@media (max-width: 1250px) and (min-width: 1051px) {
    .tasks-page-layout {
        grid-template-columns: clamp(410px, 46vw, 540px) minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    .tasks-driver-filter-row {
        grid-template-columns: 1fr;
    }
}


/* v2.2.0 — live status of task visit (100 m / 30 sec) */
.task-list-state.arrived {
    background: color-mix(in srgb, var(--task-color) 22%, #0b1d30);
    border: 2px solid var(--task-color);
    color: #ffffff;
    font-size: 10px;
    animation: task-arrived-pulse 1.5s ease-in-out infinite;
}

.task-list-arrival-progress {
    display: inline-flex;
    width: fit-content;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--task-color) 16%, #0b1d30);
    border: 1px solid color-mix(in srgb, var(--task-color) 55%, #29435e);
    color: #e8eef8;
    font-size: 10px;
    font-weight: 700;
}

.task-detail-status.arrived {
    background: rgba(79, 70, 229, 0.18);
    border: 1px solid rgba(129, 140, 248, 0.45);
    color: #c7d2fe;
}

/* v2.2.1 — полноценная мобильная адаптация интерфейса */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        overflow-x: hidden;
    }

    body,
    body[data-current-page] {
        overflow-y: auto;
    }

    .application,
    body[data-current-page] .application,
    body[data-current-page="map"] .application {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
    }

    .sidebar,
    body[data-current-page] .sidebar,
    body[data-current-page="map"] .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        display: block;
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

    .sidebar-logo,
    body[data-current-page] .sidebar-logo,
    body[data-current-page="map"] .sidebar-logo {
        height: 62px;
        padding: 7px 14px;
        justify-content: center;
    }

    .sidebar-logo img,
    body[data-current-page] .sidebar-logo img,
    body[data-current-page="map"] .sidebar-logo img {
        width: 150px;
        height: 48px;
        object-position: center;
    }

    .main-menu,
    body[data-current-page] .main-menu,
    body[data-current-page="map"] .main-menu {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        padding: 7px 8px 9px;
    }

    .menu-button,
    body[data-current-page] .menu-button,
    body[data-current-page="map"] .menu-button {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        justify-content: center;
        gap: 0;
        padding: 7px 3px;
        border-radius: 9px;
        text-align: center;
    }

    .menu-icon {
        display: none !important;
    }

    .menu-text {
        overflow: hidden;
        font-size: 10px;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .drivers-panel,
    .sidebar-divider,
    .sidebar-footer,
    body[data-current-page] .drivers-panel,
    body[data-current-page] .sidebar-divider,
    body[data-current-page] .sidebar-footer,
    body[data-current-page="map"] .drivers-panel,
    body[data-current-page="map"] .sidebar-divider,
    body[data-current-page="map"] .sidebar-footer {
        display: none !important;
    }

    .main-area,
    body[data-current-page] .main-area,
    body[data-current-page="map"] .main-area {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
    }

    .topbar,
    body[data-current-page] .topbar,
    body[data-current-page="map"] .topbar {
        width: 100%;
        min-width: 0;
        min-height: 60px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
    }

    .topbar-title {
        min-width: 0;
        flex: 1 1 auto;
    }

    .topbar-title h1,
    body[data-current-page="map"] .topbar-title h1 {
        margin: 0;
        font-size: 20px;
        line-height: 1.1;
    }

    .topbar-title p,
    body[data-current-page="map"] .topbar-title p {
        display: none;
    }

    .topbar-right {
        min-width: 0;
        flex: 0 0 auto;
        gap: 7px;
    }

    .topbar-server-pill {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 10px;
    }

    .topbar-clock {
        display: none !important;
    }

    .user-panel {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .user-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .user-information {
        display: none !important;
    }

    .server-details-popover,
    .user-details-popover {
        position: fixed;
        top: 132px;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
    }

    .workspace,
    body[data-current-page] .workspace,
    body[data-current-page="map"] .workspace {
        width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: visible;
        padding: 8px;
    }

    .page-section,
    .page-section.active {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
    }

    /* Карта: занимает почти весь оставшийся экран */
    .map-layout,
    body[data-current-page="map"] .map-layout {
        width: 100%;
        min-width: 0;
        height: calc(100dvh - 190px);
        min-height: 460px;
        border-radius: 10px;
    }

    .map-container,
    body[data-current-page="map"] .map-container {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
    }

    .map-placeholder,
    .history-map {
        width: 100%;
        min-width: 0;
        height: 100%;
    }

    .map-panel-toggle {
        top: 10px;
        left: 10px;
    }

    .map-sidebar {
        width: min(320px, calc(100% - 42px));
    }

    /* Задачи: на телефоне панели идут одна под другой */
    .tasks-page-layout {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .tasks-list-panel,
    .task-detail-panel {
        width: 100%;
        min-width: 0;
        border-radius: 10px;
    }

    .tasks-list-panel {
        max-height: none;
        height: auto;
    }

    .tasks-toolbar {
        padding: 12px;
    }

    .tasks-toolbar h2 {
        font-size: 16px;
    }

    .tasks-search-wrap {
        margin: 9px 9px 7px;
    }

    .tasks-driver-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 0 9px 8px;
    }

    .task-driver-filter-button {
        min-height: 38px;
        padding: 6px 8px;
        font-size: 10px;
    }

    .tasks-filter-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 0 9px 8px;
    }

    .task-filter-button {
        min-width: 0;
        padding: 7px 2px;
        font-size: 9px;
    }

    .tasks-page-list {
        max-height: 48dvh;
        padding: 3px 8px 10px;
    }

    .task-list-card {
        grid-template-columns: 4px minmax(0, 1fr) 28px;
        gap: 8px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .task-list-main strong {
        font-size: 13px;
    }

    .task-list-address,
    .task-list-main small {
        font-size: 11px;
    }

    .task-detail-panel {
        min-height: 480px;
        overflow: visible;
    }

    .task-detail-content {
        padding: 11px;
    }

    .task-detail-header {
        gap: 8px;
        margin-bottom: 10px;
    }

    .task-detail-header h2 {
        font-size: 18px;
    }

    .task-detail-map {
        height: 230px;
        margin-bottom: 12px;
    }

    .task-form-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .task-coordinate-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .task-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .task-detail-actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .main-menu,
    body[data-current-page] .main-menu,
    body[data-current-page="map"] .main-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .menu-text {
        font-size: 11px;
    }

    .topbar-title h1,
    body[data-current-page="map"] .topbar-title h1 {
        font-size: 18px;
    }

    .topbar-server-pill {
        padding: 6px 8px;
    }

    #server-status-title {
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tasks-driver-filter-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* v2.3.1 — telemetry colors */
.tracker-battery-good { color:#4ade80; }
.tracker-battery-medium { color:#facc15; }
.tracker-battery-low { color:#fb923c; }
.tracker-battery-critical { color:#fb4f4f; }
.tracker-battery-unknown { color:#718096; }

.telemetry-value {
    justify-self:end;
    text-align:right;
    font-weight:700;
    line-height:1.25;
}
.telemetry-excellent { color:#22c55e !important; }
.telemetry-good { color:#4ade80 !important; }
.telemetry-medium { color:#facc15 !important; }
.telemetry-weak { color:#fb923c !important; }
.telemetry-bad { color:#fb4f4f !important; }
.telemetry-unknown { color:#94a3b8 !important; }

/* v2.3.2 — battery color specificity fix */
.driver-info-row .tracker-battery.tracker-battery-good,
.driver-info-row .tracker-battery.tracker-battery-good .tracker-battery-icon,
.driver-info-row .tracker-battery.tracker-battery-good b { color:#4ade80 !important; }

.driver-info-row .tracker-battery.tracker-battery-medium,
.driver-info-row .tracker-battery.tracker-battery-medium .tracker-battery-icon,
.driver-info-row .tracker-battery.tracker-battery-medium b { color:#facc15 !important; }

.driver-info-row .tracker-battery.tracker-battery-low,
.driver-info-row .tracker-battery.tracker-battery-low .tracker-battery-icon,
.driver-info-row .tracker-battery.tracker-battery-low b { color:#fb923c !important; }

.driver-info-row .tracker-battery.tracker-battery-critical,
.driver-info-row .tracker-battery.tracker-battery-critical .tracker-battery-icon,
.driver-info-row .tracker-battery.tracker-battery-critical b { color:#fb4f4f !important; }

.driver-info-row .tracker-battery.tracker-battery-unknown,
.driver-info-row .tracker-battery.tracker-battery-unknown .tracker-battery-icon,
.driver-info-row .tracker-battery.tracker-battery-unknown b { color:#718096 !important; }

/* v2.3.4 — ручной ввод адреса прямо из карточки задачи на карте */
.task-address-manual {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.task-address-manual label {
    display: block;
    margin-bottom: 7px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
}
.task-address-manual-row {
    display: flex;
    gap: 7px;
    align-items: stretch;
}
.task-address-manual-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #3a4a63;
    border-radius: 7px;
    background: #111b2d;
    color: #f8fafc;
    outline: none;
    font-size: 11px;
}
.task-address-manual-input:focus {
    border-color: #6476d8;
    box-shadow: 0 0 0 2px rgba(100, 118, 216, 0.13);
}
.task-address-save {
    white-space: nowrap;
}
.task-address-manual-hint {
    margin-top: 6px;
    color: #7f91a5;
    font-size: 9px;
    line-height: 1.35;
}
@media (max-width: 680px) {
    .task-address-manual-row {
        flex-direction: column;
    }
    .task-address-save {
        width: 100%;
    }
}


/* ===== Подписи клиентов у задач на карте ===== */
.task-map-marker {
    overflow: visible;
}

.task-map-marker-symbol {
    position: relative;
    z-index: 2;
}

.task-map-client-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 1;
    max-width: 140px;
    padding: 4px 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--task-driver-color) 70%, white 12%);
    border-radius: 7px;
    background: color-mix(in srgb, var(--task-driver-color) 84%, #07111f 16%);
    box-shadow: 0 5px 14px rgba(2, 8, 23, 0.22);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
    pointer-events: none;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px));
    transform-origin: center bottom;
    transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

body[data-task-label-zoom="far"] .task-map-client-label {
    opacity: .28;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(.90);
    filter: saturate(.78);
}

body[data-task-label-zoom="medium"] .task-map-client-label {
    opacity: .62;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(.96);
}

body[data-task-label-zoom="near"] .task-map-client-label {
    opacity: .96;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(1);
}

.task-map-marker:hover .task-map-client-label {
    opacity: 1 !important;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(1.03) !important;
    filter: none !important;
}

.task-map-marker.completed .task-map-client-label {
    opacity: .55;
}

body[data-task-label-zoom="near"] .task-map-marker.completed .task-map-client-label {
    opacity: .78;
}

.task-map-marker.warning .task-map-client-label,
.task-map-marker.error .task-map-client-label {
    box-shadow: 0 0 0 1px rgba(245, 158, 11, .45), 0 5px 14px rgba(2, 8, 23, .22);
}


/* v2.5.0: карточка водителя не перекрывает подписи задач */
body[data-current-page="map"] .map-driver-name-label {
    opacity: .52 !important;
    backdrop-filter: blur(2px);
    transition: opacity .18s ease, transform .19s cubic-bezier(.22,.8,.3,1), filter .19s ease, box-shadow .19s ease !important;
}
body[data-current-page="map"] .map-driver-name-label:hover,
body[data-current-page="map"] .map-driver-name-label:focus-within {
    opacity: 1 !important;
}

/* v2.5.0: данные топлива в справочнике */
.driver-fuel-value,
.driver-fuel-consumption {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--app-text, #e5edf7);
    font-weight: 700;
    white-space: nowrap;
}
.driver-fuel-consumption {
    color: var(--app-muted, #9aa8bc);
    font-weight: 600;
}
.metric-card-fuel .metric-icon {
    font-size: 20px;
}

/* ===== Fuel prices: v2.5.2 ===== */
.fuel-prices-directory-card {
    padding: 22px;
    background: #f8fafc;
    color: #0f172a;
}

.fuel-price-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.fuel-prices-intro {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid #cbd5e1;
}

.fuel-prices-intro > div {
    display: grid;
    gap: 5px;
}

.fuel-prices-intro strong {
    font-size: 16px;
    color: #0f172a;
}

.fuel-prices-intro span,
.fuel-prices-intro small {
    color: #334155;
    line-height: 1.45;
}

.fuel-prices-intro small {
    max-width: 490px;
    text-align: right;
}

.fuel-prices-update-status {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.fuel-update-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fuel-update-item {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
}

.fuel-update-item span {
    color: #475569;
    font-size: 12px;
}

.fuel-update-item strong {
    color: #0f172a;
    font-size: 14px;
}

.fuel-update-item small {
    color: #64748b;
    line-height: 1.35;
}

.fuel-auto-enabled {
    color: #15803d !important;
}

.fuel-diesel-note {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
}

.fuel-diesel-note strong {
    flex: 0 0 auto;
}

.fuel-diesel-note span {
    color: #334155;
}

.fuel-update-warning {
    padding: 10px 13px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
}

.fuel-prices-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fuel-price-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #eef2f7;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fuel-price-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fuel-price-card-head > div {
    display: grid;
    gap: 5px;
}

.fuel-price-type {
    font-weight: 800;
    color: #0f172a;
}

.fuel-price-value {
    font-weight: 800;
    color: #1d4ed8;
    white-space: nowrap;
}

.fuel-price-trend {
    width: max-content;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.fuel-trend-down {
    color: #166534;
    background: #dcfce7;
}

.fuel-trend-up {
    color: #b91c1c;
    background: #fee2e2;
}

.fuel-trend-flat,
.fuel-trend-new {
    color: #475569;
    background: #e2e8f0;
}

.fuel-price-input-label {
    display: grid;
    gap: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.fuel-price-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 11px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-radius: 9px;
    outline: none;
    font-weight: 600;
}

.fuel-price-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.fuel-price-source {
    min-height: 34px;
    color: #475569;
    line-height: 1.45;
}

.fuel-price-formula {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}

.fuel-price-formula span,
.fuel-price-formula small {
    color: #475569;
}

.fuel-price-formula strong {
    color: #1e293b;
}

@media (max-width: 1100px) {
    .fuel-update-main,
    .fuel-prices-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .fuel-prices-directory-card {
        padding: 14px;
    }

    .fuel-price-actions {
        width: 100%;
        justify-content: stretch;
    }

    .fuel-price-actions button {
        flex: 1 1 180px;
    }

    .fuel-prices-intro {
        display: grid;
    }

    .fuel-prices-intro small {
        max-width: none;
        text-align: left;
    }

    .fuel-diesel-note {
        display: grid;
    }
}



/* ===== v2.6.0: адаптивные кластеры задач ===== */
.task-cluster-wrap {
    position: relative;
    width: 36px;
    height: 36px;
    overflow: visible;
    cursor: pointer;
    user-select: none;
}

.task-cluster-point {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: #334155;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .28);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.task-cluster-labels {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 2;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 3px;
    transform: translateX(-50%);
    pointer-events: none;
}

.task-cluster-label,
.task-cluster-more {
    display: block;
    max-width: 138px;
    padding: 3px 7px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .16);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-cluster-label {
    border: 1px solid color-mix(in srgb, var(--cluster-label-color) 72%, white 18%);
    background: color-mix(in srgb, var(--cluster-label-color) 82%, #0f172a 18%);
}

.task-cluster-more {
    border: 1px solid #94a3b8;
    background: rgba(30, 41, 59, .92);
}

body[data-task-label-zoom="far"] .task-cluster-label,
body[data-task-label-zoom="far"] .task-cluster-more {
    opacity: .72;
}

body[data-task-label-zoom="medium"] .task-cluster-label,
body[data-task-label-zoom="medium"] .task-cluster-more {
    opacity: .88;
}

.task-cluster-wrap:hover .task-cluster-label,
.task-cluster-wrap:hover .task-cluster-more {
    opacity: 1;
}

/* спокойный статус топлива вместо сообщения об ошибке */
.fuel-update-ok {
    padding: 10px 13px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #166534;
}

.fuel-season-footnote {
    margin-top: -4px;
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}

/* v2.6.2: единый цвет заголовка и подпись водителя только на близком зуме */
body[data-current-page="map"] .topbar-title h1::first-letter {
    color: inherit !important;
}

/* На дальнем и среднем масштабе имя водителя не закрывает задачи. */
body[data-current-page="map"][data-task-label-zoom="far"] .map-driver-name-label,
body[data-current-page="map"][data-task-label-zoom="medium"] .map-driver-name-label {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px) scale(.94) !important;
}

/* На близком масштабе подпись появляется мягко и остаётся компактной. */
body[data-current-page="map"][data-task-label-zoom="near"] .map-driver-name-label {
    opacity: .78 !important;
    pointer-events: auto !important;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(.96) !important;
}

body[data-current-page="map"][data-task-label-zoom="near"] .map-driver-name-label:hover,
body[data-current-page="map"][data-task-label-zoom="near"] .map-driver-name-label:focus-within {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(-1px) scale(1) !important;
}


/* v2.7.0 — подпись водителя показывается только на действительно близком зуме. */
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-name-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body[data-current-page="map"][data-driver-name-zoom="show"] .map-driver-name-label {
    opacity: .72 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body[data-current-page="map"][data-driver-name-zoom="show"] .map-driver-name-label:hover,
body[data-current-page="map"][data-driver-name-zoom="show"] .map-driver-name-label:focus-within {
    opacity: 1 !important;
}


/* ===== v2.7.1: читаемость водителей, кликабельные подписи и стабильная страница топлива ===== */

/* В справочнике водителей карточка светлая — текст всегда должен быть тёмным. */
#drivers-settings .directory-card,
#drivers-settings .directory-toolbar,
#drivers-settings .drivers-table th,
#drivers-settings .drivers-table td {
    background: #ffffff !important;
    color: #0f172a !important;
}

#drivers-settings .directory-toolbar {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

#drivers-settings .drivers-table th {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

#drivers-settings .driver-table-name strong,
#drivers-settings .driver-phone-value,
#drivers-settings .driver-device-value,
#drivers-settings .drivers-table td {
    color: #0f172a !important;
}

#drivers-settings .driver-table-name small,
#drivers-settings .drivers-table small {
    color: #64748b !important;
}

/* Страница топлива прокручивается внутри рабочей области, а не сдвигает весь интерфейс. */
#fuel-prices-settings {
    min-height: 0;
    overflow: hidden;
}

#fuel-prices-settings .fuel-prices-directory-card {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#fuel-prices-settings .fuel-prices-grid {
    margin-top: 4px;
    margin-bottom: 18px;
}

#fuel-prices-settings .fuel-prices-update-status {
    margin-top: 2px;
    margin-bottom: 18px;
}

/* Подпись задачи — самостоятельная кликабельная цель. */
.task-map-client-label {
    pointer-events: auto !important;
    cursor: pointer;
    user-select: none;
}

.task-map-client-label:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .96);
    outline-offset: 2px;
}

/* На близком масштабе клиент уходит вбок от кружка — имя водителя остаётся сверху у стрелки. */
body[data-task-label-zoom="near"] .task-map-client-label--right {
    left: calc(100% + 9px);
    bottom: 50%;
    transform: translate(var(--task-label-x, 0px), calc(50% + var(--task-label-y, 0px))) scale(1) !important;
    transform-origin: left center;
}

body[data-task-label-zoom="near"] .task-map-client-label--left {
    left: auto;
    right: calc(100% + 9px);
    bottom: 50%;
    transform: translate(calc(-1 * var(--task-label-x, 0px)), calc(50% + var(--task-label-y, 0px))) scale(1) !important;
    transform-origin: right center;
}

body[data-task-label-zoom="near"] .task-map-marker:hover .task-map-client-label--right,
body[data-task-label-zoom="near"] .task-map-marker:hover .task-map-client-label--left {
    transform: translate(var(--task-label-x, 0px), calc(50% + var(--task-label-y, 0px))) scale(1.03) !important;
}

body[data-task-label-zoom="near"] .task-map-marker:hover .task-map-client-label--left {
    transform: translate(calc(-1 * var(--task-label-x, 0px)), calc(50% + var(--task-label-y, 0px))) scale(1.03) !important;
}

/* Имя водителя показывается только на максимально близком рабочем масштабе. */
body[data-current-page="map"][data-driver-name-zoom="show"] .map-driver-name-label {
    opacity: .62 !important;
}

@media (max-width: 720px) {
    #fuel-prices-settings {
        overflow: visible;
    }

    #fuel-prices-settings .fuel-prices-directory-card {
        overflow: visible;
    }
}


/* v2.7.1 — подписи внутри кластеров тоже открывают конкретную задачу. */
.task-cluster-label {
    pointer-events: auto !important;
    cursor: pointer;
}

.task-cluster-label:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .96);
    outline-offset: 2px;
}

#fuel-prices-settings .fuel-update-main {
    margin-top: 2px;
}


/* ===== v2.7.2 — читаемость светлых поверхностей и наглядный предпросмотр ===== */
/* На всех светлых карточках текст всегда тёмный. Это предотвращает повторные
   случаи «белый текст на белом фоне» после локальных dark-theme override. */
.modal-window,
.modal-header,
.driver-preview-panel,
.driver-preview-card,
.driver-preview-information,
.switch-field,
.directory-card,
.drivers-table-container,
.drivers-toolbar,
.fuel-prices-directory-card,
.fuel-price-card,
.fuel-update-item,
.fuel-diesel-note,
.fuel-update-main {
    --light-surface-text: #172033;
    --light-surface-muted: #64748b;
}

.modal-header h2,
.modal-header strong,
.driver-preview-panel h3,
.driver-preview-card strong,
.driver-preview-information strong,
.switch-field .switch-text strong,
.directory-card h2,
.directory-card h3,
.directory-card strong,
.drivers-table-container td,
.drivers-table-container th,
.drivers-toolbar label,
.fuel-prices-directory-card strong,
.fuel-price-card strong {
    color: var(--light-surface-text) !important;
}

.modal-header p,
.driver-preview-panel p,
.driver-preview-card small,
.driver-preview-information small,
.switch-field .switch-text small,
.directory-card p,
.directory-card small,
.drivers-table-container small,
.drivers-toolbar span,
.drivers-toolbar label,
.fuel-prices-directory-card span,
.fuel-prices-directory-card small,
.fuel-price-card span,
.fuel-price-card small {
    color: var(--light-surface-muted) !important;
}

/* Текст переключателя должен быть читаемым независимо от темы формы. */
.switch-field .switch-text strong { color:#172033 !important; }
.switch-field .switch-text small { color:#64748b !important; }

/* Реальный мини-пример вместо абстрактной «кляксы». */
.preview-map-realistic {
    background:#eef3e8;
}
.preview-map-realistic .preview-map-grid {
    opacity:.45;
    background-size:28px 28px;
}
.preview-street {
    position:absolute;
    z-index:1;
    background:#fff;
    box-shadow:0 0 0 1px rgba(148,163,184,.35), inset 0 0 0 4px #f8fafc;
}
.preview-street-main {
    left:-18px; right:-18px; top:132px; height:38px;
    transform:rotate(-8deg);
}
.preview-street-cross {
    top:-18px; bottom:-18px; right:72px; width:34px;
    transform:rotate(7deg);
}
.preview-address-label {
    position:absolute;
    z-index:2;
    right:16px;
    top:91px;
    padding:3px 6px;
    border-radius:5px;
    background:rgba(255,255,255,.88);
    color:#475569;
    font-size:10px;
    font-weight:700;
}
.preview-route-trail {
    z-index:3;
    left:34px !important;
    top:116px !important;
    width:210px !important;
    height:54px !important;
    border-top-width:10px !important;
    transform:rotate(-7deg) !important;
}
.preview-route-line {
    z-index:4;
    left:34px !important;
    top:116px !important;
    width:210px !important;
    height:54px !important;
    border-top:4px solid var(--driver-color, #2563eb) !important;
    transform:rotate(-7deg) !important;
}
.preview-gps-point { display:none !important; }
.preview-driver-marker {
    z-index:7;
    left:116px !important;
    top:95px !important;
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    transform:none !important;
    background:var(--driver-color,#2563eb) !important;
}
.preview-marker-arrow {
    transform:rotate(28deg) !important;
    font-size:18px !important;
}
.preview-task-point {
    position:absolute;
    z-index:7;
    right:58px;
    top:110px;
    width:22px;
    height:22px;
    border:3px solid #fff;
    border-radius:50%;
    background:var(--driver-color,#2563eb);
    box-shadow:0 3px 8px rgba(15,23,42,.25);
}
.preview-task-label {
    position:absolute;
    z-index:8;
    right:16px;
    top:76px;
    max-width:180px;
    padding:6px 9px;
    border:1px solid color-mix(in srgb, var(--driver-color,#2563eb) 55%, white 45%);
    border-radius:7px;
    background:color-mix(in srgb, var(--driver-color,#2563eb) 82%, #0f172a 18%);
    color:#fff !important;
    font-size:11px;
    font-weight:800;
    box-shadow:0 4px 12px rgba(15,23,42,.18);
}
.preview-driver-information { background:#fff; }
.preview-legend { color:#475569; }
.preview-legend span:not(.preview-legend-line):not(.preview-legend-point) { color:#475569 !important; }

/* В кластере цветные задачи разных водителей должны читаться одинаково хорошо. */
.task-cluster-label { opacity:.94; }
body[data-task-label-zoom="far"] .task-cluster-label { opacity:.82; }


/* ===== v2.7.3 — подписи задач и читаемость формы водителя ===== */
/* Плашка клиента всегда начинается над своей точкой. JS сам сдвигает её
   в ближайшее свободное место только при реальном пересечении. */
body[data-task-label-zoom="near"] .task-map-client-label--right,
body[data-task-label-zoom="near"] .task-map-client-label--left {
    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 7px) !important;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(1) !important;
    transform-origin: center bottom !important;
}
body[data-task-label-zoom="near"] .task-map-marker:hover .task-map-client-label--right,
body[data-task-label-zoom="near"] .task-map-marker:hover .task-map-client-label--left {
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(1.03) !important;
}

/* Плашка — полноценная кликабельная область, как и сам кружок. */
.task-map-client-label,
.task-cluster-label {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* На тёмной части формы водителя вместо малоконтрастного серого используем
   тёплый бежевый для подписей и подсказок. */
#driver-form .driver-form-fields .form-field > label,
#driver-form .driver-form-fields .form-help,
#driver-form .driver-form-fields .color-section > h3,
#driver-form .driver-form-fields .color-section > p,
#driver-form .driver-form-fields .custom-color-field label {
    color: #e6d6b8 !important;
}
#driver-form .driver-form-fields .form-help {
    color: #cdbb9b !important;
}
#driver-form .driver-form-fields input::placeholder {
    color: #b7a98f !important;
    opacity: 1;
}

/* ===== v2.7.4 — географически честные кластеры и чистый предпросмотр ===== */
/* Кнопки-плашки выглядят как прежние подписи, но реально принимают клик. */
.task-map-client-label,
.task-cluster-label,
.task-cluster-point {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    border-style: solid;
}
.task-map-client-label {
    border-width: 1px;
}
.task-cluster-label,
.task-cluster-point {
    cursor: pointer !important;
}

/* Подпись одиночной задачи по умолчанию всегда сверху. Collision-layout
   смещает её только если место действительно занято. */
.task-map-client-label--top,
body[data-task-label-zoom="near"] .task-map-client-label--top {
    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 7px) !important;
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(1) !important;
    transform-origin: center bottom !important;
}
body[data-task-label-zoom="far"] .task-map-client-label--top {
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(.90) !important;
}
body[data-task-label-zoom="medium"] .task-map-client-label--top {
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(.96) !important;
}
.task-map-marker:hover .task-map-client-label--top {
    transform: translate(calc(-50% + var(--task-label-x, 0px)), var(--task-label-y, 0px)) scale(1.03) !important;
}

/* Предпросмотр цвета: никакой большой заливки/«кляксы» — только тонкий маршрут,
   стрелка автомобиля и одна точка ОФИС. */
.preview-map-realistic .preview-route-trail {
    position:absolute !important;
    z-index:3 !important;
    left:26px !important;
    top:142px !important;
    width:126px !important;
    height:0 !important;
    border:0 !important;
    border-top:7px solid color-mix(in srgb, var(--driver-color,#2563eb) 22%, transparent) !important;
    border-radius:999px !important;
    background:none !important;
    transform:rotate(-9deg) !important;
    transform-origin:left center !important;
    opacity:1 !important;
}
.preview-map-realistic .preview-route-line {
    position:absolute !important;
    z-index:4 !important;
    left:29px !important;
    top:139px !important;
    width:126px !important;
    height:0 !important;
    border:0 !important;
    border-top:3px solid var(--driver-color,#2563eb) !important;
    border-radius:999px !important;
    background:none !important;
    transform:rotate(-9deg) !important;
    transform-origin:left center !important;
}
.preview-map-realistic .preview-driver-marker {
    z-index:7 !important;
    left:103px !important;
    top:112px !important;
    width:34px !important;
    height:34px !important;
    border:3px solid #fff !important;
    border-radius:50% !important;
    background:var(--driver-color,#2563eb) !important;
    box-shadow:0 3px 10px rgba(15,23,42,.22) !important;
}
.preview-map-realistic .preview-marker-arrow {
    font-size:15px !important;
    transform:rotate(36deg) !important;
}
.preview-map-realistic .preview-task-point {
    right:35px !important;
    top:103px !important;
    width:22px !important;
    height:22px !important;
}
.preview-map-realistic .preview-task-label {
    right:16px !important;
    top:70px !important;
    min-width:58px !important;
    max-width:90px !important;
    text-align:center !important;
}
.preview-map-realistic .preview-address-label {
    right:14px !important;
    top:134px !important;
    max-width:125px !important;
}

/* v2.8.0 — история GPS: подозрительные и исключённые точки */
.history-excluded-toggle {
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:10px;
    background:rgba(15,23,42,.36);
    color:#dbe7f5;
    font-size:13px;
}
.history-excluded-toggle input { accent-color:#4f6bdc; }
.history-warning {
    margin-top:12px;
    padding:12px;
    border:1px solid rgba(249,115,22,.45);
    border-radius:12px;
    background:rgba(124,45,18,.20);
    color:#f8fafc;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.history-warning[hidden] { display:none !important; }
.history-warning strong { color:#fdba74; }
.history-warning span { color:#f8fafc; line-height:1.35; }
.history-warning small { color:#fed7aa; }
.history-warning-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
.history-warning-actions button {
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    padding:7px 9px;
    background:#16243a;
    color:#fff;
    cursor:pointer;
    font-size:12px;
}
.history-warning-actions button:hover { background:#203552; }
.history-warning-actions button.danger { background:#7f1d1d; border-color:#b91c1c; }
.history-point-balloon { min-width:220px; color:#172033; font-size:13px; line-height:1.45; }
.history-point-reason { margin-top:7px; padding:7px 8px; border-radius:7px; background:#fff7ed; color:#9a3412; }
.history-point-review-button {
    margin-top:9px;
    width:100%;
    border:0;
    border-radius:8px;
    padding:8px 10px;
    background:#172b4d;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}
#history-yandex-map { position:relative; width:100%; height:100%; min-height:420px; }

/* ===== v2.9.0 Statistics ===== */
.statistics-quick-periods{display:flex;gap:6px;align-items:end;flex-wrap:wrap}.statistics-period-button{border:1px solid rgba(148,163,184,.28);background:#0b1a2d;color:#cbd5e1;border-radius:9px;padding:9px 12px;font-weight:700;cursor:pointer}.statistics-period-button:hover{border-color:rgba(96,165,250,.55);color:#fff}.statistics-period-button.active{background:#3157c8;border-color:#5f7de0;color:#fff}.statistics-notice{margin:14px 18px 0;padding:12px 14px;border:1px solid rgba(245,158,11,.35);border-radius:10px;background:rgba(245,158,11,.1);color:#fde68a}.statistics-notice button{margin-left:8px;border:0;background:transparent;color:#93c5fd;text-decoration:underline;cursor:pointer;font-weight:700}.statistics-details{padding:16px 18px 20px}.statistics-empty-state{padding:34px;text-align:center;color:#94a3b8}.statistics-summary-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.statistics-summary-strip span{background:#0b1a2d;border:1px solid rgba(148,163,184,.18);color:#dbeafe;border-radius:999px;padding:7px 10px;font-size:12px}.statistics-fuel-note{padding:10px 12px;border-radius:9px;background:rgba(37,99,235,.1);border:1px solid rgba(96,165,250,.2);color:#bfdbfe;margin-bottom:12px}.statistics-fuel-note.muted{color:#a8b3c4}.statistics-table-wrap{overflow:auto;border:1px solid rgba(148,163,184,.15);border-radius:12px}.statistics-table{width:100%;border-collapse:collapse;min-width:690px}.statistics-table th,.statistics-table td{padding:11px 13px;text-align:left;border-bottom:1px solid rgba(148,163,184,.12);color:#d8e2ef}.statistics-table th{position:sticky;top:0;background:#0c1a2d;color:#93c5fd;font-size:12px}.statistics-table tbody tr:hover{background:rgba(59,130,246,.06)}


/* ===== v2.9.1 — статистика: читаемость, прокрутка, карта маршрута ===== */
#page-statistics {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-gutter: stable;
}
#page-statistics.active { display:block !important; }
#page-statistics .content-card {
    height: auto !important;
    min-height: 260px;
    overflow: visible !important;
    margin-bottom: 24px;
}

/* На всех светлых поверхностях статистики текст всегда тёмный. */
#page-statistics .metric-card,
#page-statistics .content-card,
#page-statistics .statistics-route-card {
    color:#172033 !important;
}
#page-statistics .metric-card span,
#page-statistics .metric-card small,
#page-statistics .content-card-header p,
#page-statistics .statistics-empty-state,
#page-statistics .statistics-route-header p {
    color:#64748b !important;
}
#page-statistics .metric-card strong { color:#3655ad !important; }
#page-statistics .content-card-header h2,
#page-statistics .statistics-route-header h2 { color:#111827 !important; }

#page-statistics .statistics-notice {
    margin:14px 18px 0;
    border:1px solid #f2c66d !important;
    background:#fff7e6 !important;
    color:#7a4b00 !important;
    font-weight:600;
    line-height:1.45;
}
#page-statistics .statistics-notice strong { color:#8a4f00 !important; }
#page-statistics .statistics-notice button {
    color:#2855ad !important;
    background:transparent !important;
    text-decoration:underline;
}
#page-statistics .statistics-fuel-note {
    background:#eef4ff !important;
    border-color:#c9d8ff !important;
    color:#2f4e8f !important;
}
#page-statistics .statistics-fuel-note.muted { color:#64748b !important; }
#page-statistics .statistics-table-wrap {
    background:#fff;
    border-color:#dbe3ef !important;
    max-width:100%;
}
#page-statistics .statistics-table th {
    background:#edf3ff !important;
    color:#334e8a !important;
    border-bottom-color:#d7e0ee !important;
}
#page-statistics .statistics-table td {
    color:#27364a !important;
    border-bottom-color:#e7edf5 !important;
}
#page-statistics .statistics-table tbody tr:hover { background:#f5f8ff !important; }
#page-statistics .statistics-day-row { cursor:pointer; }
#page-statistics .statistics-day-link {
    border:0;
    padding:0;
    background:transparent;
    color:#2855ad !important;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    text-decoration:none;
}
#page-statistics .statistics-day-link:hover { text-decoration:underline; }

.statistics-route-card {
    margin:0 0 18px;
    overflow:hidden;
    border:1px solid #dbe3ef;
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 18px rgba(15,23,42,.06);
}
.statistics-route-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:16px 18px;
    border-bottom:1px solid #e4eaf2;
}
.statistics-route-header h2 { margin:0 0 4px; font-size:17px; }
.statistics-route-header p { margin:0; max-width:760px; font-size:12px; line-height:1.45; }
.statistics-route-date {
    flex:0 0 auto;
    padding:7px 10px;
    border-radius:999px;
    background:#edf3ff;
    color:#3157a8 !important;
    font-size:12px;
    font-weight:800;
}
.statistics-route-map-wrap {
    position:relative;
    width:100%;
    height:330px;
    min-height:260px;
    background:#eef3f8;
}
#statistics-route-map { width:100%; height:100%; }
.statistics-route-empty {
    position:absolute;
    z-index:5;
    inset:50% auto auto 50%;
    max-width:420px;
    transform:translate(-50%,-50%);
    padding:12px 16px;
    border:1px solid #d7dfeb;
    border-radius:10px;
    background:rgba(255,255,255,.94);
    color:#475569 !important;
    text-align:center;
    font-size:13px;
    line-height:1.4;
    box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.statistics-route-empty[hidden] { display:none !important; }

/* Светлый текст на светлом фоне больше не допускаем в типовых светлых блоках. */
.metric-card, .content-card, .driver-preview-panel, .preview-driver-information,
.directory-table-container, .drivers-table-container {
    --light-card-text:#172033;
}
.metric-card, .metric-card *,
.driver-preview-panel, .driver-preview-panel *,
.preview-driver-information, .preview-driver-information * {
    text-shadow:none;
}

@media (max-width:1150px) {
    #page-statistics .content-card { height:auto !important; }
    .statistics-route-map-wrap { height:300px; }
}
@media (max-width:760px) {
    #page-statistics { padding-right:0; }
    .statistics-route-header { flex-direction:column; gap:8px; }
    .statistics-route-map-wrap { height:280px; }
    #page-statistics .statistics-details { padding:12px; }
    #page-statistics .statistics-notice { margin:12px 12px 0; }
}

/* v2.9.3 — статистика: подозрительные GPS-точки скрыты по умолчанию */
.statistics-route-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.statistics-suspicious-toggle {
    border:1px solid #f0c36a;
    border-radius:8px;
    background:#fff8e8;
    color:#80520b !important;
    padding:7px 10px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}
.statistics-suspicious-toggle:hover { background:#fff1ca; }
.statistics-suspicious-toggle.active {
    background:#f59e0b;
    border-color:#f59e0b;
    color:#fff !important;
}
@media (max-width:760px) {
    .statistics-route-actions { justify-content:flex-start; }
}

/* v2.9.6: «Показать всех» имеет смысл только на основной карте. */
body:not([data-current-page="map"]) #sidebar-show-all-drivers {
    display: none !important;
}

/* v2.9.7: синхронизация кнопок нижней панели с контекстом страницы. */
body:not([data-current-page="map"]):not([data-current-page="tasks"]) #sidebar-refresh-tasks {
    display: none !important;
}

/* v2.9.10 — рабочий статус без изменения исходной карточки водителя */
.driver-card-controls {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:38px;
}

body[data-current-page="map"] .driver-card-controls .driver-list-follow-pin {
    width:34px !important;
    min-width:34px !important;
    height:38px !important;
    margin-right:7px !important;
}

.driver-list-work-status-icon {
    width:34px;
    min-width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    margin-right:7px;
    border:1px solid rgba(148,163,184,.30);
    border-radius:9px;
    background:rgba(2,10,20,.34);
    color:#8da0b9;
    cursor:pointer;
    transition:all .16s ease;
}
.driver-list-work-status-icon svg { width:19px; height:19px; fill:currentColor; }
.driver-list-work-status-icon:hover { transform:translateY(-1px); filter:brightness(1.12); }
.driver-list-work-status-icon.work-status-working { color:#22c55e !important; border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.12); }
.driver-list-work-status-icon.work-status-day-off { color:#d6a75f !important; border-color:rgba(214,167,95,.55); background:rgba(214,167,95,.12); }
.driver-list-work-status-icon.work-status-sick { color:#ef4444 !important; border-color:rgba(239,68,68,.55); background:rgba(239,68,68,.12); }
.driver-list-work-status-icon.work-status-vacation { color:#f59e0b !important; border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.12); }
.driver-list-work-status-icon.work-status-car-repair { color:#60a5fa !important; border-color:rgba(96,165,250,.55); background:rgba(96,165,250,.12); }
.driver-list-work-status-icon.work-status-not-working { color:#c4b5fd !important; border-color:rgba(196,181,253,.55); background:rgba(196,181,253,.12); }

.driver-list-work-status,
.driver-work-status-badge {
    border:1px solid transparent;
    border-radius:9px;
    min-height:28px;
    padding:4px 8px;
    font:inherit;
    font-size:11px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    white-space:nowrap;
}
.driver-work-status-text { font-weight:800; }
.work-status-working { background:#e8f8ef; color:#14783c !important; border-color:#a9dfbe; }
.work-status-day-off { background:#f2eadc; color:#755425 !important; border-color:#ddc89e; }
.work-status-sick { background:#fde9e9; color:#a52e2e !important; border-color:#efb8b8; }
.work-status-vacation { background:#fff1d8; color:#9b5b00 !important; border-color:#efcb86; }
.work-status-car-repair { background:#e8eef8; color:#314d7a !important; border-color:#b9c9e2; }
.work-status-not-working { background:#eee7f5; color:#69458c !important; border-color:#d2bce5; }
#drivers-settings .driver-work-status-badge { min-width:98px; color:inherit; }

.work-status-modal-window { width:min(720px, calc(100vw - 28px)); }
.work-status-modal-content { display:grid; gap:18px; }
.work-status-driver-card {
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:14px 16px; border-radius:12px; background:#f6f8fc;
    border:1px solid #dce3ee; color:#182235;
}
.work-status-driver-card span { color:#687489; }
.work-status-driver-card strong { color:#182235; }
.work-status-form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.work-status-info {
    display:grid; gap:6px; padding:13px 15px; border-radius:12px;
    background:#f5efe3; border:1px solid #dfcfad; color:#46351b;
}
.work-status-info strong, .work-status-info span { color:#46351b !important; }
.work-status-info span { font-size:13px; line-height:1.45; }
@media (max-width:780px) { .work-status-form-grid { grid-template-columns:1fr; } }

/* v2.9.9 — исправления окна рабочего статуса */
.work-status-modal-window {
    max-height: min(720px, calc(100vh - 32px));
    overflow: hidden;
}
.work-status-modal-window form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.work-status-modal-content {
    overflow: visible;
}
.work-status-modal-window .modal-footer {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    background: #f8f9fc;
    border-top: 1px solid #dce3ee;
    padding: 14px 18px;
}
.work-status-modal-window .modal-footer button {
    min-width: 112px;
    min-height: 42px;
    overflow: visible;
}
.work-status-form-grid input[type="date"] {
    cursor: pointer;
    color-scheme: dark;
    min-height: 42px;
}
.work-status-form-grid input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
}
@media (max-height: 700px) {
    .work-status-modal-window { max-height: calc(100vh - 18px); }
    .work-status-modal-content { overflow-y: auto; }
}

/* v2.9.11 — окно «Что нового» */
.app-version-badge {
    border: 0;
    background: transparent;
    color: #94a3b8;
    font: inherit;
    font-size: 11px;
    line-height: 1.2;
    padding: 1px 0;
    cursor: pointer;
}
.app-version-badge:hover { color: #dbeafe; text-decoration: underline; }
.update-notice-overlay { z-index: 12000; }
.update-notice-window {
    width: min(620px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 32px));
    overflow: hidden;
    background: #ffffff;
    color: #0f172a;
}
.update-notice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.update-notice-kicker {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.update-notice-header h2 {
    margin: 5px 0 4px;
    color: #0f172a !important;
    font-size: 23px;
}
.update-notice-date { color: #64748b; font-size: 12px; }
.update-notice-body {
    padding: 20px 24px 8px;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
}
.update-notice-section {
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.update-notice-section h3 {
    margin: 0 0 8px;
    color: #0f172a !important;
    font-size: 14px;
}
.update-notice-section ul { margin: 0; padding-left: 20px; }
.update-notice-section li {
    margin: 6px 0;
    color: #334155 !important;
    font-size: 13px;
    line-height: 1.45;
}
.update-notice-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; }
.update-notice-footer .primary-button { min-width: 120px; }
@media (max-width: 640px) {
    .update-notice-header { padding: 18px 18px 14px; }
    .update-notice-body { padding: 16px 18px 4px; }
    .update-notice-header h2 { font-size: 20px; }
}
\n\n/* v2.9.12 — statistics controls */\n#page-statistics input[type="date"] {\n    color-scheme: dark;\n    padding-right: 38px !important;\n    background-color: #0b1a2d !important;\n    color: #f8fafc !important;\n}\n#page-statistics input[type="date"]::-webkit-calendar-picker-indicator {\n    opacity: 1 !important;\n    cursor: pointer;\n    filter: invert(1) brightness(1.8);\n    width: 18px;\n    height: 18px;\n}\n.statistics-driver-breakdown {\n    display:grid;\n    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));\n    gap:8px;\n    margin:0 0 12px;\n}\n.statistics-driver-breakdown > div {\n    display:grid;\n    gap:3px;\n    padding:10px 12px;\n    background:#f8fafc;\n    border:1px solid #d9e2ef;\n    border-radius:10px;\n    color:#334155;\n}\n.statistics-driver-breakdown strong { color:#172033; }\n.statistics-driver-breakdown span { font-size:12px; color:#64748b; }\n

/* v2.9.13 — текст рабочего статуса рядом с компактной иконкой в карточке водителя.
   Размер исходной карточки не меняем: подпись раскрывается в свободное место слева от иконки. */
body[data-current-page="map"] .driver-list-work-status-icon {
    position: relative;
    overflow: visible;
}
body[data-current-page="map"] .driver-list-work-status-icon::after {
    position: absolute;
    right: 41px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    max-width: 108px;
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: rgba(7, 20, 35, .94);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .20);
    color: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: .96;
}
body[data-current-page="map"] .driver-list-work-status-icon.work-status-working::after { content: "На смене"; }
body[data-current-page="map"] .driver-list-work-status-icon.work-status-day-off::after { content: "Выходной"; }
body[data-current-page="map"] .driver-list-work-status-icon.work-status-sick::after { content: "Больничный"; }
body[data-current-page="map"] .driver-list-work-status-icon.work-status-vacation::after { content: "Отпуск"; }
body[data-current-page="map"] .driver-list-work-status-icon.work-status-car-repair::after { content: "Ремонт машины"; }
body[data-current-page="map"] .driver-list-work-status-icon.work-status-not-working::after { content: "Не работает"; }

/* На очень узкой мобильной боковой панели оставляем только иконку, чтобы подпись не ломала карточку. */
@media (max-width: 520px) {
    body[data-current-page="map"] .driver-list-work-status-icon::after { display: none; }
}
\n\n/* v2.9.14 — единая видимая и кликабельная иконка календаря во всех полях даты */\ninput[type="date"] {\n    padding-right: 42px !important;\n    background-repeat: no-repeat !important;\n    background-position: right 12px center !important;\n    background-size: 18px 18px !important;\n    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2379a7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;\n    cursor: pointer;\n}\ninput[type="date"]::-webkit-calendar-picker-indicator {\n    opacity: 0 !important;\n    display: block !important;\n    cursor: pointer !important;\n    width: 28px !important;\n    height: 28px !important;\n    margin-right: -2px !important;\n}\ninput[type="date"]:focus {\n    border-color: #5b78ea !important;\n    box-shadow: 0 0 0 2px rgba(91,120,234,.18) !important;\n}\n\n/* v2.9.14 — окно обновления в стиле ProSystem GPS */\n.update-notice-window {\n    width: min(680px, calc(100vw - 32px));\n    background: #07182b !important;\n    color: #e8eef8 !important;\n    border: 1px solid #1e3a5a;\n    border-radius: 18px;\n    box-shadow: 0 24px 70px rgba(0,0,0,.46);\n}\n.update-notice-header {\n    position: relative;\n    background: linear-gradient(135deg, #0b2038 0%, #0a1830 56%, #13234d 100%);\n    border-bottom: 1px solid #213c5c;\n}\n.update-notice-header::before {\n    content: '';\n    position: absolute;\n    left: 0; top: 0; bottom: 0;\n    width: 5px;\n    background: #5b78ea;\n}\n.update-notice-kicker { color: #83a7ff !important; }\n.update-notice-header h2 { color: #ffffff !important; }\n.update-notice-date { color: #9fb1c7 !important; }\n.update-notice-body { background: #07182b; }\n.update-notice-section {\n    background: #0c2036 !important;\n    border-color: #213c5c !important;\n}\n.update-notice-section h3 { color: #ffffff !important; }\n.update-notice-section li { color: #d9e5f3 !important; }\n.update-notice-author {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 14px 16px;\n    margin: 2px 0 12px;\n    background: linear-gradient(135deg, rgba(31,65,108,.72), rgba(13,35,60,.88));\n    border: 1px solid #2d4f79;\n    border-radius: 14px;\n}\n.update-notice-author-avatar {\n    width: 44px;\n    height: 44px;\n    flex: 0 0 44px;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    background: #4f67d8;\n    color: #fff;\n    font-weight: 800;\n    font-size: 14px;\n    box-shadow: 0 0 0 4px rgba(79,103,216,.16);\n}\n.update-notice-author-main { min-width: 0; display: grid; gap: 3px; }\n.update-notice-author-label { color: #91a5bc; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }\n.update-notice-author-main strong { color: #fff !important; font-size: 14px; }\n.update-notice-author-contacts { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: #6f89a8; font-size: 12px; }\n.update-notice-author-contacts a { color: #9ab8ff !important; text-decoration: none; }\n.update-notice-author-contacts a:hover { color: #c8d7ff !important; text-decoration: underline; }\n.update-notice-footer { background: #091a2d !important; border-top-color: #213c5c !important; }\n.update-notice-footer .primary-button {\n    background: #4f67d8 !important;\n    border-color: #667ce6 !important;\n    color: #fff !important;\n}\n.update-notice-window .modal-close-button { color: #dbe7f5 !important; background: rgba(255,255,255,.06); }\n
/* v2.9.15 — рабочий статус внутри карточки водителя */
.driver-item {
    min-height: 96px;
}
.driver-information {
    align-self: center;
}
.driver-work-status-line {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin-top: 5px;
    padding: 2px 8px 3px 5px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255,255,255,.035) !important;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.driver-work-status-line:hover,
.driver-work-status-line:focus-visible {
    background: rgba(255,255,255,.075) !important;
    border-color: rgba(255,255,255,.14) !important;
    transform: translateY(-1px);
    outline: none;
}
.driver-work-status-emoji {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    font-size: 21px;
    line-height: 25px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.driver-work-status-label {
    color: #cbd8e8 !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}
.driver-work-status-line.work-status-working .driver-work-status-label { color:#74e89b !important; }
.driver-work-status-line.work-status-day-off .driver-work-status-label { color:#e6c27b !important; }
.driver-work-status-line.work-status-sick .driver-work-status-label { color:#ff9d9d !important; }
.driver-work-status-line.work-status-vacation .driver-work-status-label { color:#ffc66f !important; }
.driver-work-status-line.work-status-car-repair .driver-work-status-label { color:#8ec5ff !important; }
.driver-work-status-line.work-status-not-working .driver-work-status-label { color:#c7b7ff !important; }

/* Старую подпись рядом с отдельной иконкой v2.9.13 отключаем полностью. */
body[data-current-page="map"] .driver-list-work-status-icon::after { display:none !important; content:none !important; }
body[data-current-page="map"] .driver-list-work-status-icon { display:none !important; }

/* Всплывающая карточка периода статуса. */
.driver-work-status-line::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 9px);
    z-index: 1200;
    min-width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid #294764;
    border-radius: 9px;
    background: #081a2c;
    color: #f8fafc !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.38);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.driver-work-status-line::before {
    content: '';
    position: absolute;
    left: 16px;
    bottom: calc(100% + 4px);
    z-index: 1201;
    width: 9px;
    height: 9px;
    background: #081a2c;
    border-right: 1px solid #294764;
    border-bottom: 1px solid #294764;
    transform: rotate(45deg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, visibility .14s ease;
}
.driver-work-status-line:hover::after,
.driver-work-status-line:focus-visible::after,
.driver-work-status-line:hover::before,
.driver-work-status-line:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.driver-work-status-line:hover::before,
.driver-work-status-line:focus-visible::before { transform: rotate(45deg); }

@media (max-width: 520px) {
    .driver-work-status-emoji { font-size: 19px; min-width: 23px; }
    .driver-work-status-label { font-size: 10px; }
    .driver-work-status-line::after { max-width: 210px; white-space: normal; }
}


/* =========================================================
   v2.9.16 — контраст, карточка водителя и фирменное окно обновления
   ========================================================= */

/* Карточка водителя больше не "прыгает" при наведении. */
body[data-current-page="map"] .driver-item,
body[data-current-page="map"] .driver-item:hover {
    transform: none !important;
}
body[data-current-page="map"] .driver-item {
    min-height: 108px !important;
    overflow: visible !important;
}
body[data-current-page="map"] .driver-item-main {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    row-gap: 6px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
body[data-current-page="map"] .driver-direction-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}
body[data-current-page="map"] .driver-information {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
body[data-current-page="map"] .driver-live-metrics {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}
body[data-current-page="map"] .driver-work-status-line {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
    width: 154px !important;
    max-width: 154px !important;
    min-height: 31px;
    margin-top: 0 !important;
    padding: 3px 9px !important;
    justify-content: center;
    gap: 7px;
    overflow: visible;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(151, 176, 207, .48) !important;
    background: #10253b !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
    transform: none !important;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease !important;
}
body[data-current-page="map"] .driver-work-status-line:hover,
body[data-current-page="map"] .driver-work-status-line:focus-visible {
    transform: none !important;
    border-color: rgba(173, 201, 235, .82) !important;
    background: #15304b !important;
    box-shadow: 0 0 0 2px rgba(96,165,250,.11), inset 0 0 0 1px rgba(255,255,255,.05);
}
body[data-current-page="map"] .driver-work-status-emoji {
    flex: 0 0 27px;
    min-width: 27px;
    font-size: 22px !important;
    line-height: 25px;
}
body[data-current-page="map"] .driver-work-status-label {
    min-width: 0;
    flex: 1 1 auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px !important;
}

/* Статусные рамки — заметнее, но без яркого "неона". */
body[data-current-page="map"] .driver-work-status-line.work-status-working { border-color: rgba(74,222,128,.56) !important; }
body[data-current-page="map"] .driver-work-status-line.work-status-day-off { border-color: rgba(230,194,123,.58) !important; }
body[data-current-page="map"] .driver-work-status-line.work-status-sick { border-color: rgba(255,125,125,.62) !important; }
body[data-current-page="map"] .driver-work-status-line.work-status-vacation { border-color: rgba(255,198,111,.62) !important; }
body[data-current-page="map"] .driver-work-status-line.work-status-car-repair { border-color: rgba(142,197,255,.64) !important; }
body[data-current-page="map"] .driver-work-status-line.work-status-not-working { border-color: rgba(199,183,255,.58) !important; }

/* Подсказка периода — 100% непрозрачная и всегда поверх содержимого. */
body[data-current-page="map"] .driver-work-status-line::after {
    z-index: 5000 !important;
    left: 0 !important;
    bottom: calc(100% + 10px) !important;
    min-width: 190px !important;
    max-width: 235px !important;
    padding: 9px 11px !important;
    border: 1px solid #496987 !important;
    background: #061523 !important;
    color: #ffffff !important;
    opacity: 0;
    box-shadow: 0 12px 30px rgba(0,0,0,.52) !important;
    white-space: normal !important;
}
body[data-current-page="map"] .driver-work-status-line::before {
    z-index: 5001 !important;
    background: #061523 !important;
    border-right-color: #496987 !important;
    border-bottom-color: #496987 !important;
}
body[data-current-page="map"] .driver-work-status-line:hover::after,
body[data-current-page="map"] .driver-work-status-line:focus-visible::after {
    opacity: 1 !important;
}

/* Глобальное правило для СВЕТЛЫХ таблиц/карточек: текст обязан быть читаемым. */
.directory-card,
.directory-card table,
.directory-card td,
.directory-card th,
.statistics-driver-breakdown > div,
.work-status-driver-card,
.fuel-prices-directory-card,
.metric-card,
.task-detail-card,
.history-summary-card {
    --light-surface-text: #182235;
    --light-surface-muted: #5f6c7f;
}
.directory-card,
.directory-card td,
.drivers-table td {
    color: var(--light-surface-text, #182235) !important;
}
.drivers-table th {
    color: #3e4b5f !important;
}
.drivers-table .driver-table-name strong,
.drivers-table .driver-phone-value,
.drivers-table .driver-device-value,
.drivers-table .driver-color-code,
.drivers-table td > strong,
.drivers-table td > span:not(.status-badge):not(.driver-work-status-badge) {
    color: #263346 !important;
}
.drivers-table .driver-table-name small,
.drivers-table .driver-device-value small,
.directory-filter,
.directory-card small {
    color: #66758a !important;
}
/* Топливо и расход не должны исчезать на белом фоне. */
#drivers-settings .drivers-table tbody td:nth-child(4),
#drivers-settings .drivers-table tbody td:nth-child(5),
#drivers-settings .drivers-table tbody td:nth-child(4) *,
#drivers-settings .drivers-table tbody td:nth-child(5) * {
    color: #31435a !important;
    opacity: 1 !important;
}
/* Если значение реально не задано — оставляем визуально вторичным, но читаемым. */
#drivers-settings .drivers-table tbody td:nth-child(4):empty,
#drivers-settings .drivers-table tbody td:nth-child(5):empty {
    color: #8793a3 !important;
}
.table-action-button,
.secondary-button,
.back-button,
.modal-close-button {
    border-color: #b9c5d4 !important;
}
.table-action-button:hover,
.secondary-button:hover,
.back-button:hover,
.modal-close-button:hover {
    border-color: #6f86a6 !important;
}

/* Полностью фирменное окно "Что нового". */
.update-notice-window {
    width: min(720px, calc(100vw - 32px)) !important;
    background: #081828 !important;
    color: #edf5ff !important;
    border: 1px solid #2a4a6c !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(96,165,250,.06) !important;
}
.update-notice-header {
    min-height: 118px;
    padding: 24px 26px 20px 132px !important;
    background: linear-gradient(135deg, #0b2038 0%, #0a1930 58%, #11264a 100%) !important;
    border-bottom: 1px solid #274666 !important;
}
.update-notice-header::before {
    width: 5px !important;
    background: linear-gradient(#5b78ea, #2e9bff) !important;
}
.update-notice-header::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 23px;
    width: 88px;
    height: 66px;
    background: url('/images/logo.png?v=2.9.16') center / contain no-repeat;
    filter: drop-shadow(0 7px 16px rgba(0,0,0,.28));
    opacity: .98;
}
.update-notice-kicker {
    color: #8eb5ff !important;
    font-size: 12px !important;
    letter-spacing: .065em !important;
}
.update-notice-header h2 {
    margin-top: 7px !important;
    color: #ffffff !important;
    font-size: 25px !important;
    line-height: 1.15;
}
.update-notice-date { color: #9fb2c9 !important; }
.update-notice-body {
    padding: 20px 24px 8px !important;
    background: linear-gradient(180deg, #081828, #071522) !important;
}
.update-notice-section {
    position: relative;
    padding: 16px 18px 16px 20px !important;
    border: 1px solid #294967 !important;
    border-radius: 13px !important;
    background: #0d2237 !important;
    box-shadow: inset 3px 0 0 #4e72db;
}
.update-notice-section:nth-of-type(2) {
    box-shadow: inset 3px 0 0 #2db46f;
}
.update-notice-section h3 {
    color: #ffffff !important;
    font-size: 14px !important;
}
.update-notice-section li {
    color: #dbe7f4 !important;
}
.update-notice-author {
    display: grid !important;
    grid-template-columns: 118px minmax(0,1fr);
    align-items: center !important;
    gap: 16px !important;
    padding: 15px 16px !important;
    background: linear-gradient(135deg, #102b45, #0c2137) !important;
    border: 1px solid #315579 !important;
    border-radius: 14px !important;
}
.update-notice-brand {
    min-height: 58px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border-right: 1px solid rgba(143,177,213,.23);
}
.update-notice-logo {
    display: block;
    width: 92px;
    max-height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.24));
}
.update-notice-author-label {
    color: #8fa8c2 !important;
}
.update-notice-author-main strong {
    color: #ffffff !important;
    font-size: 15px !important;
}
.update-notice-author-contacts {
    margin-top: 3px;
    color: #8ea4bd !important;
}
.update-notice-author-contacts a {
    color: #a9c8ff !important;
    font-weight: 600;
}
.update-notice-footer {
    padding: 14px 24px 16px !important;
    background: #091a2b !important;
    border-top: 1px solid #274666 !important;
}
.update-notice-footer .primary-button {
    min-width: 128px !important;
    min-height: 40px !important;
    border: 1px solid #8097ee !important;
    background: linear-gradient(180deg, #526bdc, #4358be) !important;
    box-shadow: 0 7px 18px rgba(38,65,164,.27);
}
.update-notice-window .modal-close-button {
    border: 1px solid rgba(177,201,226,.34) !important;
    background: rgba(255,255,255,.055) !important;
    color: #e6f0fb !important;
}

@media (max-width: 640px) {
    .update-notice-header {
        min-height: 0;
        padding: 82px 18px 16px !important;
    }
    .update-notice-header::after {
        left: 18px;
        top: 16px;
        width: 82px;
        height: 48px;
    }
    .update-notice-author {
        grid-template-columns: 1fr;
    }
    .update-notice-brand {
        justify-items: start;
        border-right: 0;
        border-bottom: 1px solid rgba(143,177,213,.23);
    }
}


/* v2.9.17 — ЯВНАЯ кнопка календаря. Не зависим от встроенной иконки Chromium/Edge. */
.date-input-control {
    position: relative;
    width: 100%;
    min-width: 0;
}
.date-input-control > input[type="date"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 46px !important;
    background-image: none !important;
}
.date-input-control > input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}
.date-picker-button {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #526b89 !important;
    border-radius: 7px;
    background: #10243a !important;
    color: #f4f8ff !important;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.date-picker-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.date-picker-button:hover,
.date-picker-button:focus-visible {
    background: #173454 !important;
    border-color: #8eb5ff !important;
    box-shadow: 0 0 0 2px rgba(96,165,250,.16) !important;
    outline: none;
}
/* Светлые формы тоже получают контрастную кнопку. */
.light-surface .date-picker-button,
.directory-card .date-picker-button {
    background: #eef4ff !important;
    color: #3159ad !important;
    border-color: #aabbd1 !important;
}

/* v2.9.17 — напоминание об обновлении браузера в окне версии. */
.update-notice-refresh-reminder {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    padding: 13px 15px;
    margin: 2px 0 12px;
    border: 1px solid #3b5f86;
    border-radius: 13px;
    background: linear-gradient(135deg, #102d4a, #0d253e) !important;
    color: #e9f3ff !important;
}
.update-notice-refresh-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #4f67d8;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
}
.update-notice-refresh-reminder > div {
    display: grid;
    gap: 3px;
}
.update-notice-refresh-reminder strong {
    color: #ffffff !important;
    font-size: 13px;
}
.update-notice-refresh-reminder span:not(.update-notice-refresh-icon) {
    color: #b8cbe1 !important;
    font-size: 12px;
    line-height: 1.4;
}

/* ===== ProSystem GPS v3.0.0 — History 2.0 timeline ===== */
.history-timeline-card{margin-top:14px;border:1px solid rgba(148,163,184,.22);border-radius:16px;background:#0f172a;padding:12px;box-shadow:0 10px 28px rgba(15,23,42,.18)}
.history-timeline-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.history-timeline-heading>div{display:flex;flex-direction:column;gap:2px}.history-timeline-heading strong{color:#f8fafc;font-size:13px}.history-timeline-heading span{color:#94a3b8;font-size:11px}.history-timeline-count{min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:#1d4ed8;color:#fff!important;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.history-timeline{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding-right:3px}.history-timeline-empty{padding:16px 8px;text-align:center;color:#94a3b8;font-size:12px}.history-timeline-item{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:#111c31;padding:9px 10px;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}.history-timeline-item:hover{transform:none!important;background:#16233b;border-color:rgba(96,165,250,.55)}.history-timeline-icon{width:30px;height:30px;border-radius:9px;background:#1e293b;display:flex;align-items:center;justify-content:center;font-size:17px}.history-timeline-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.history-timeline-copy strong{color:#f8fafc;font-size:12px;white-space:normal}.history-timeline-copy small{color:#94a3b8;font-size:11px}.history-timeline-time{color:#cbd5e1;font-size:11px;font-weight:700;white-space:nowrap}.history-timeline-item.task-completed{border-color:rgba(34,197,94,.30);background:rgba(20,83,45,.24)}.history-timeline-item.stop .history-timeline-icon{background:rgba(245,158,11,.16)}.history-timeline-item.task-completed .history-timeline-icon{background:rgba(34,197,94,.16)}


/* ===== ProSystem GPS v3.0.1 — GLOBAL CONTRAST SAFETY =====
   Единый тёмный набор legacy-переменных. Старые компоненты больше не могут
   случайно получить белый фон при светлом тексте. Карта Яндекса не затрагивается. */
body[data-current-page] {
    --background: #06101e;
    --surface: #0b1828;
    --surface-secondary: #102033;
    --border: rgba(148,163,184,.20);
    --border-dark: rgba(148,163,184,.30);
    --text: #f8fafc;
    --text-secondary: #94a3b8;
    --primary-light: rgba(59,130,246,.14);
}

body[data-current-page] .history-controls-header,
body[data-current-page] .content-card-header,
body[data-current-page] .settings-header,
body[data-current-page] .modal-header,
body[data-current-page] .drivers-toolbar,
body[data-current-page] .filter-bar,
body[data-current-page] .form-section,
body[data-current-page] .preview-panel {
    background: #0b1828 !important;
    color: #f8fafc !important;
    border-color: rgba(148,163,184,.20) !important;
}

body[data-current-page] .history-controls-header h2,
body[data-current-page] .history-controls-header p,
body[data-current-page] .history-field label,
body[data-current-page] .history-information span,
body[data-current-page] .history-information strong,
body[data-current-page] .content-card-header h2,
body[data-current-page] .modal-header h2,
body[data-current-page] .form-section label {
    color: #f8fafc !important;
}
body[data-current-page] .history-controls-header p,
body[data-current-page] .history-information span { color:#94a3b8 !important; }
body[data-current-page] .history-information strong { color:#60a5fa !important; }

body[data-current-page] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
body[data-current-page] select,
body[data-current-page] textarea {
    background:#0a1728 !important;
    color:#f8fafc !important;
    border-color:rgba(148,163,184,.28) !important;
    color-scheme:dark;
}
body[data-current-page] input::placeholder,
body[data-current-page] textarea::placeholder { color:#718399 !important; opacity:1; }
body[data-current-page] select option { background:#0a1728; color:#f8fafc; }

/* Панели открытия параметров остаются читаемыми на карте. */
body[data-current-page] .history-panel-toggle,
body[data-current-page] .map-panel-toggle {
    background:#f8fafc !important;
    color:#3157c8 !important;
    border-color:rgba(49,87,200,.28) !important;
}
body[data-current-page] .history-panel-toggle:hover,
body[data-current-page] .map-panel-toggle:hover { background:#eef2ff !important; }

.history-task-balloon { min-width:220px; color:#172033; font-size:13px; line-height:1.45; }
.history-task-balloon div { margin-top:5px; }


/* v3.0.2 — массовая обработка подозрительных GPS-точек в истории */
#history-yandex-map { user-select:none; }
.history-batch-selection {
    position:absolute; z-index:1800; pointer-events:none;
    border:2px solid #3b82f6; background:rgba(59,130,246,.18);
    border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
}
.history-batch-menu {
    position:absolute; z-index:1900; width:290px; padding:12px;
    border:1px solid rgba(96,165,250,.35); border-radius:14px;
    background:#0f1b2f; box-shadow:0 18px 44px rgba(2,6,23,.45);
    display:flex; flex-direction:column; gap:7px; color:#f8fafc;
}
.history-batch-menu-title { font-size:13px; color:#f8fafc; }
.history-batch-menu-note { font-size:11px; color:#94a3b8; margin-bottom:3px; }
.history-batch-menu button {
    width:100%; min-height:36px; border-radius:9px; border:1px solid #334155;
    background:#17243a; color:#f8fafc; cursor:pointer; font-weight:700; text-align:left;
    padding:8px 10px;
}
.history-batch-menu button:hover { background:#203552; }
.history-batch-menu button.danger { background:#7f1d1d; border-color:#b91c1c; }
.history-batch-menu button.success { background:#14532d; border-color:#16a34a; }
.history-batch-menu button:disabled { opacity:.45; cursor:not-allowed; }


/* ===== ProSystem GPS v3.0.5 — дорожные перемычки + временная шкала ===== */
.playback-panel { align-items:flex-start; }
.playback-panel > .play-button,
.playback-panel > .playback-time { margin-top:1px; }
.playback-track-wrap { position:relative; flex:1; min-width:0; padding-bottom:27px; }
.playback-track-wrap .playback-range { width:100%; min-width:0; margin:7px 0 0; display:block; }
.playback-ticks { position:absolute; left:0; right:0; top:25px; height:24px; pointer-events:none; }
.playback-tick { position:absolute; top:0; transform:translateX(-50%); height:24px; color:#94a3b8; font-size:10px; line-height:1; white-space:nowrap; }
.playback-tick i { display:block; width:1px; height:7px; margin:0 auto 4px; background:rgba(148,163,184,.55); }
.playback-tick b { font-weight:600; color:#94a3b8; }
@media (max-width:1100px) { .playback-tick:nth-child(even) b { display:none; } }


/* v3.0.6 — карточка задачи в Истории */
.history-task-balloon-v306 {
    min-width: 260px;
    display: grid;
    gap: 8px;
    color: #0f172a !important;
}
.history-task-info-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}
.history-task-info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.history-task-info-row span { color: #64748b !important; font-size: 12px; }
.history-task-info-row strong { color: #0f172a !important; font-size: 13px; line-height: 1.35; }

/* v3.0.7 — карточка задачи в Истории: значения читаются на тёмном фоне */
.history-task-balloon-v307,
.history-task-balloon-v307 .history-task-info-row {
    color: #f8fafc !important;
}
.history-task-balloon-v307 .history-task-info-row {
    border-bottom-color: rgba(148, 163, 184, .28) !important;
}
.history-task-balloon-v307 .history-task-info-row span {
    color: #94a3b8 !important;
}
.history-task-balloon-v307 .history-task-info-row strong {
    color: #f8fafc !important;
    font-weight: 700;
}


/* v3.0.8 — карточка задачи в Истории такая же, как на основной Карте */
.history-task-map-balloon.task-balloon {
    width: 310px;
    min-width: 310px;
    max-width: 310px;
    box-sizing: border-box;
    margin: 0;
}
body[data-current-page="history"] [class*="balloon__content"] {
    overflow: visible !important;
}
body[data-current-page="history"] [class*="balloon__layout"] {
    overflow: visible !important;
}

/* =========================================================
   v4.0.0 — Авторизация, роли и доступы
   ========================================================= */
body.auth-locked {
    overflow: hidden !important;
}

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 25% 20%, rgba(67, 97, 238, 0.22), transparent 32%),
        radial-gradient(circle at 80% 75%, rgba(29, 78, 216, 0.18), transparent 34%),
        #061426;
}

.auth-overlay[hidden] { display: none !important; }

.auth-shell {
    width: min(520px, 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #0b1c32 0%, #08172a 100%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(5, 18, 36, 0.72);
}

.auth-brand img { width: 112px; height: auto; }
.auth-brand div { display: grid; gap: 3px; }
.auth-brand strong { color: #f8fafc; font-size: 18px; }
.auth-brand span { color: #8fa3bf; font-size: 12px; }

.auth-content { padding: 30px; }
.auth-content h1 { margin: 8px 0 8px; color: #f8fafc; font-size: 27px; line-height: 1.15; }
.auth-lead { margin: 0 0 24px; color: #9eb0c9; line-height: 1.55; }
.auth-step-badge {
    display: inline-flex;
    padding: 6px 10px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #8fc1ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.auth-role-list { display: grid; gap: 10px; }
.auth-role-card {
    width: 100%;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #203a5c;
    border-radius: 14px;
    background: #0d223c;
    color: #f8fafc;
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
}
.auth-role-card:hover { border-color: #4f72ff; transform: translateY(-1px); background: #102947; }
.auth-role-card[data-unconfigured="true"] { opacity: .58; }
.auth-role-icon, .auth-selected-role > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef3ff;
    color: #13213a;
    font-weight: 900;
}
.auth-role-copy { display: grid; gap: 4px; }
.auth-role-copy strong { font-size: 15px; }
.auth-role-copy small { color: #91a6c2; font-size: 12px; }
.auth-role-arrow { color: #7ca2ff; font-size: 25px; }

.auth-selected-role {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin: 10px 0 22px;
    border: 1px solid #203a5c;
    border-radius: 14px;
    background: #0d223c;
}
.auth-selected-role div { display: grid; gap: 3px; }
.auth-selected-role strong { color: #f8fafc; }
.auth-selected-role small { color: #91a6c2; }
.auth-back-button {
    border: 0;
    background: transparent;
    color: #92b7ff;
    padding: 0;
    font-weight: 700;
    cursor: pointer;
}

.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 7px; color: #d8e3f2; font-size: 13px; font-weight: 700; }
.auth-form input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #294363;
    border-radius: 11px;
    outline: none;
    background: #07182c;
    color: #f8fafc;
    font-size: 15px;
}
.auth-form input:focus { border-color: #597bff; box-shadow: 0 0 0 3px rgba(79, 114, 255, .15); }
.auth-primary-button {
    min-height: 45px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #4f62db, #315bdc);
    color: white;
    font-weight: 800;
    cursor: pointer;
}
.auth-primary-button:disabled { opacity: .55; cursor: wait; }
.auth-note { margin-top: 18px; color: #6f86a5; font-size: 11px; line-height: 1.5; }
.auth-message { padding: 10px 12px; border-radius: 9px; font-size: 12px; }
.auth-message.error { color: #fecaca; background: rgba(127, 29, 29, .36); border: 1px solid rgba(248, 113, 113, .28); }
.auth-message.warning { color: #fde68a; background: rgba(120, 53, 15, .35); border: 1px solid rgba(251, 191, 36, .26); }

.access-disabled {
    opacity: .42 !important;
    filter: saturate(.55);
    cursor: not-allowed !important;
}
.access-disabled:hover { transform: none !important; }

.access-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 110000;
    max-width: min(520px, calc(100vw - 32px));
    padding: 11px 16px;
    border: 1px solid rgba(96, 165, 250, .32);
    border-radius: 11px;
    background: #0b1d33;
    color: #e6eef9;
    box-shadow: 0 14px 42px rgba(0,0,0,.36);
    opacity: 0;
    transform: translate(-50%, 18px);
    pointer-events: none;
    transition: .18s ease;
    font-size: 13px;
    font-weight: 700;
}
.access-toast.show { opacity: 1; transform: translate(-50%, 0); }

.logout-button {
    width: calc(100% - 20px);
    margin: 4px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(248, 113, 113, .26);
    border-radius: 9px;
    background: rgba(127, 29, 29, .18);
    color: #fecaca;
    cursor: pointer;
}
.logout-button:hover { background: rgba(127, 29, 29, .3); }

.access-role-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.access-role-matrix > div {
    padding: 14px 15px;
    border: 1px solid var(--border-color, #203a5c);
    border-radius: 13px;
    background: rgba(10, 29, 52, .76);
}
.access-role-matrix strong { display: block; color: #f8fafc; margin-bottom: 6px; }
.access-role-matrix span { color: #93a9c5; font-size: 12px; line-height: 1.45; }
.access-directory-card { padding: 18px; }
.access-security-note {
    display: grid;
    gap: 5px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 11px;
    background: rgba(20, 83, 45, .14);
}
.access-security-note strong { color: #bbf7d0; }
.access-security-note span { color: #8ea5c1; font-size: 12px; }
.access-accounts-list { display: grid; gap: 12px; }
.access-account-card {
    padding: 16px;
    border: 1px solid #203a5c;
    border-radius: 14px;
    background: #0a1d34;
}
.access-account-head {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.access-account-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef3ff;
    color: #122039;
    font-weight: 900;
}
.access-account-head h3 { margin: 0 0 3px; color: #f8fafc; font-size: 15px; }
.access-account-head p { margin: 0; color: #8ea5c1; font-size: 11px; }
.access-account-status {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.access-account-status.configured { color: #86efac; background: rgba(22, 101, 52, .28); }
.access-account-status.empty { color: #fde68a; background: rgba(146, 64, 14, .26); }
.access-password-form {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.access-password-form label { display: grid; gap: 5px; color: #9eb2cb; font-size: 11px; }
.access-password-form input {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #294363;
    border-radius: 8px;
    background: #07182c;
    color: #f8fafc;
}
.access-password-form small { grid-column: 1 / -1; color: #6f86a5; }
.access-loading, .access-error { padding: 20px; text-align: center; color: #8ea5c1; }
.access-error { color: #fca5a5; }

@media (max-width: 980px) {
    .access-role-matrix { grid-template-columns: 1fr; }
    .access-password-form { grid-template-columns: 1fr; }
}

/* v4.0.9 — многопользовательский доступ */
.access-add-user-card { border-style: dashed; border-color: rgba(91, 124, 255, .42); }
.access-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .12);
}
.access-user-grid label { display: grid; gap: 6px; color: #9fb0c7; font-size: 12px; font-weight: 600; }
.access-user-grid input[type="text"],
.access-user-grid input[type="password"],
.access-user-grid select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    color: #f8fafc;
    background: #081a2f;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 10px;
    outline: none;
}
.access-user-grid input:focus,
.access-user-grid select:focus { border-color: #5578ff; box-shadow: 0 0 0 3px rgba(85, 120, 255, .12); }
.access-active-label { display: flex !important; align-items: center; gap: 9px !important; min-height: 42px; }
.access-active-label input { width: 18px; height: 18px; accent-color: #5578ff; }
.access-user-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.access-user-actions button { min-height: 40px; }
.access-password-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; }
.access-password-row > small { grid-column: 1 / -1; color: #7187a3; }
.access-account-head h3 small { color: #7f95b0; font-size: 11px; font-weight: 500; }
@media (max-width: 900px) {
    .access-user-grid, .access-password-row { grid-template-columns: 1fr; }
    .access-password-row > small { grid-column: auto; }
}


/* v4.0.10 — прокрутка пользователей и пароли без ограничения длины */
#page-settings {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 6px;
}
#page-settings .settings-view {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
    padding-bottom: 28px;
}
#page-settings::-webkit-scrollbar { width: 9px; }
#page-settings::-webkit-scrollbar-track { background: rgba(15, 23, 42, .28); border-radius: 999px; }
#page-settings::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .62); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
#page-settings::-webkit-scrollbar-thumb:hover { background: rgba(129, 140, 248, .78); background-clip: padding-box; }

/* v4.0.11: read-only settings remain visually normal; only mutation controls are disabled */
.access-readonly-note { margin-bottom: 14px; }
.access-account-readonly { opacity: 1 !important; filter: none !important; }
.access-readonly-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.access-readonly-grid > div { display:grid; gap:4px; padding:10px 12px; border:1px solid rgba(120,145,175,.18); border-radius:9px; background:rgba(4,19,36,.32); }
.access-readonly-grid span { color:#7890ad; font-size:11px; }
.access-readonly-grid strong { color:#e9f1fb; font-size:12px; }
@media (max-width: 820px) { .access-readonly-grid { grid-template-columns:1fr; } }

/* v4.0.11: inactive navigation must look available on every dark page */
body[data-current-page] .menu-button:not(.active),
body[data-current-page="map"] .menu-button:not(.active) {
    color: #9eacc0 !important;
    opacity: 1;
    filter: none;
}
body[data-current-page] .menu-button:not(.active):hover,
body[data-current-page="map"] .menu-button:not(.active):hover {
    color: #f4f7fb !important;
    border-color: rgba(96, 113, 207, .34) !important;
    background: rgba(75, 95, 192, .10) !important;
}
body[data-current-page] .menu-button.access-disabled {
    opacity: .42 !important;
}


/* v4.0.13: explicit read-only task fields for Manager */
.access-readonly-field {
    cursor: default;
}

/* v4.0.13 — стабильная прокрутка раздела «Цены топлива» колесом мыши */
#fuel-prices-settings.settings-view.active {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    padding-right: 8px;
    padding-bottom: 32px;
    touch-action: pan-y;
}
#fuel-prices-settings.settings-view.active .fuel-prices-directory-card {
    flex: 0 0 auto;
}
#fuel-prices-settings.settings-view.active::-webkit-scrollbar { width: 9px; }
#fuel-prices-settings.settings-view.active::-webkit-scrollbar-track { background: rgba(15,23,42,.28); border-radius: 999px; }
#fuel-prices-settings.settings-view.active::-webkit-scrollbar-thumb { background: rgba(100,116,139,.62); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
#fuel-prices-settings.settings-view.active::-webkit-scrollbar-thumb:hover { background: rgba(129,140,248,.78); background-clip: padding-box; }

/* v4.1.0 — Трекеры */
.tracker-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.tracker-summary-card {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid rgba(120,145,175,.18);
    border-radius: 10px;
    background: rgba(5, 22, 40, .58);
}
.tracker-summary-card span { color: #7890ad; font-size: 12px; }
.tracker-summary-card strong { color: #f4f7fb; font-size: 22px; }
.trackers-directory-card { min-height: 0; }
.trackers-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.trackers-toolbar .directory-search { flex: 1; min-width: 220px; }
.trackers-filter-label { display: flex; align-items: center; gap: 8px; color: #b6c4d8; font-size: 12px; white-space: nowrap; }
.trackers-filter-label input { width: 16px; height: 16px; accent-color: #5578ff; }
.trackers-table-wrap { overflow-x: auto; }
.trackers-table { min-width: 980px; }
.tracker-name-cell, .tracker-id-cell, .tracker-last-cell { display: grid; gap: 4px; }
.tracker-name-cell strong, .tracker-id-cell strong, .tracker-last-cell strong { color: #eef4fb; }
.tracker-name-cell small, .tracker-id-cell small, .tracker-last-cell small { color: #7187a3; font-size: 11px; }
.tracker-status-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
.tracker-status-badge i { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.tracker-status-badge.online { color: #78d8a2; }
.tracker-status-badge.online i { background: #39c978; }
.tracker-status-badge.offline { color: #f49a9a; }
.tracker-status-badge.offline i { background: #ef6161; }
.tracker-status-badge.unknown { color: #a7b3c5; }
.tracker-driver-select { min-width: 200px; width: 100%; }
.tracker-row-actions { display: flex; gap: 7px; justify-content: flex-end; }
.secondary-button.compact, .danger-button.compact { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.danger-button.compact { border: 1px solid rgba(239,97,97,.34); border-radius: 8px; background: rgba(239,97,97,.08); color: #f5a3a3; }
.danger-button.compact:hover { background: rgba(239,97,97,.15); }

/* v4.1.0 — убираем конфликт двух скролл-контейнеров топлива */
#fuel-prices-settings.settings-view.active {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    padding-right: 0 !important;
}
#page-settings { overflow-y: auto !important; }

@media (max-width: 900px) {
    .tracker-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trackers-toolbar { align-items: stretch; flex-direction: column; }
}


/* v4.2.0 — контраст таблицы Трекеров */
#trackers-settings .directory-table,
#trackers-settings .directory-table thead,
#trackers-settings .directory-table tbody,
#trackers-settings .directory-table tr,
#trackers-settings .directory-table th,
#trackers-settings .directory-table td { color: #dce8f7 !important; }
#trackers-settings .directory-table th { color: #f4f7fb !important; font-weight: 700; }
#trackers-settings .tracker-name-cell strong,
#trackers-settings .tracker-id-cell strong,
#trackers-settings .tracker-last-cell strong { color: #f4f7fb !important; }
#trackers-settings .tracker-name-cell small,
#trackers-settings .tracker-id-cell small,
#trackers-settings .tracker-last-cell small { color: #8fa4bf !important; }
#trackers-settings .tracker-driver-select { color: #f4f7fb !important; background: #0b1b2d !important; border-color: #35506f !important; }
#trackers-settings .tracker-driver-select option { color: #f4f7fb !important; background: #0b1b2d !important; }
#trackers-settings .tracker-status-badge.online { color: #75e0a3 !important; }
#trackers-settings .tracker-status-badge.offline { color: #ff9b9b !important; }
#trackers-settings .tracker-status-badge.unknown { color: #bdcadb !important; }

/* v4.2.0 — Traccar */
.traccar-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0; }
.traccar-settings-card { padding:18px; }
.traccar-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.traccar-field { display:grid; gap:7px; color:#dce8f7; font-size:13px; font-weight:600; }
.traccar-field-wide { grid-column:1 / -1; }
.traccar-field input { width:100%; min-width:0; box-sizing:border-box; border:1px solid #2b4768; border-radius:9px; background:#09192b; color:#f4f7fb; padding:11px 12px; outline:none; }
.traccar-field input:focus { border-color:#6687ff; box-shadow:0 0 0 2px rgba(102,135,255,.15); }
.traccar-field small { color:#7f95b1; font-weight:400; }
.traccar-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
#traccar-connection-state.is-connected { color:#72dfa0 !important; }
#traccar-connection-state.is-error { color:#ff8c8c !important; }
@media (max-width: 900px) {
  .traccar-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .traccar-form-grid { grid-template-columns:1fr; }
  .traccar-field-wide { grid-column:auto; }
}

/* v4.3.1 — Яндекс API: читаемость, ключи и лимиты */
#yandex-settings, #yandex-settings * { color: inherit; }
#yandex-settings .directory-heading h2,
#yandex-settings .traccar-field > span,
#yandex-settings .tracker-summary-card strong { color: #f4f7fb; }
#yandex-settings .directory-heading p,
#yandex-settings .traccar-field small,
#yandex-settings .tracker-summary-card span { color: #7890ad; }
#yandex-settings input { color: #f4f7fb; background: #091b2d; border-color: #29425f; }
.yandex-settings-note {
    margin-top: 16px; padding: 12px 14px; border: 1px solid #29425f; border-radius: 10px;
    background: #0b2136; color: #9fb1c8; line-height: 1.45;
}
.yandex-settings-note strong { color: #f4f7fb; }


/* v4.3.1 — Яндекс API: принудительно читаемый тёмный интерфейс */
#yandex-settings { color:#e8eef7 !important; }
#yandex-settings .directory-card,
#yandex-settings .tracker-summary-card,
#yandex-settings .yandex-limit-card { color:#e8eef7 !important; }
#yandex-settings .directory-heading h2,
#yandex-settings .directory-card strong,
#yandex-settings .tracker-summary-card strong,
#yandex-settings .traccar-field > span,
#yandex-settings .yandex-limit-card-title,
#yandex-settings .yandex-limit-usage strong,
#yandex-settings .yandex-limit-row strong { color:#f7f9fc !important; }
#yandex-settings .directory-heading p,
#yandex-settings .tracker-summary-card span,
#yandex-settings .traccar-field small,
#yandex-settings .yandex-limit-row span,
#yandex-settings .yandex-limit-foot,
#yandex-settings .yandex-limits-heading span,
#yandex-settings .yandex-usage-date { color:#9badc4 !important; }
#yandex-settings .directory-message { color:#e8eef7 !important; }
#yandex-settings .directory-message.error { color:#7a1d28 !important; background:#ffe9ec !important; border-color:#ffb4bd !important; }
#yandex-settings .directory-message.success { color:#bff5d0 !important; }
#yandex-settings input { color:#f7f9fc !important; background:#081a2c !important; border-color:#314b68 !important; }
#yandex-settings input::placeholder { color:#71859f !important; opacity:1; }
#yandex-settings button { opacity:1; }
.yandex-key-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.yandex-key-toggle { min-width:92px; white-space:nowrap; }
.yandex-limits-section { margin-top:18px; padding-top:18px; border-top:1px solid #263d58; }
.yandex-limits-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:12px; }
.yandex-limits-heading > div { display:flex; flex-direction:column; gap:4px; }
.yandex-limits-heading strong { color:#f7f9fc !important; font-size:15px; }
.yandex-limits-heading span { font-size:12px; }
.yandex-usage-date { font-size:12px; white-space:nowrap; }
.yandex-limit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.yandex-limit-card { border:1px solid #29425f; background:#0a1d31; border-radius:12px; padding:14px; }
.yandex-limit-card-title { font-size:15px; font-weight:700; margin-bottom:4px; }
.yandex-limit-plan { display:inline-flex; margin-bottom:13px; padding:4px 8px; border-radius:999px; background:#173653; color:#b8d8ff !important; font-size:11px; font-weight:700; }
.yandex-limit-row { display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid rgba(83,112,145,.28); font-size:12px; }
.yandex-limit-row:last-of-type { border-bottom:0; }
.yandex-limit-usage { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:5px 0 8px; }
.yandex-limit-usage span { color:#9badc4 !important; font-size:12px; }
.yandex-limit-usage strong { font-size:22px; }
.yandex-limit-progress { height:8px; overflow:hidden; border-radius:999px; background:#132b43; margin-bottom:8px; }
.yandex-limit-progress span { display:block; height:100%; width:0; border-radius:inherit; background:#4d69d8; transition:width .2s ease; }
.yandex-limit-foot { margin-top:10px; font-size:11px; line-height:1.4; }
@media (max-width:900px) { .yandex-limit-grid { grid-template-columns:1fr; } .yandex-key-input-row { grid-template-columns:1fr; } .yandex-key-toggle { width:100%; } }

/* v4.4.0 — Google Sheets settings */
#google-sheets-settings { color:#e8eef7 !important; }
#google-sheets-settings .directory-heading h2,
#google-sheets-settings .directory-card strong,
#google-sheets-settings .tracker-summary-card strong,
#google-sheets-settings .traccar-field > span,
#google-sheets-settings .google-column-field > span { color:#f7f9fc !important; }
#google-sheets-settings .directory-heading p,
#google-sheets-settings .tracker-summary-card span,
#google-sheets-settings .traccar-field small,
#google-sheets-settings .google-column-field small,
#google-sheets-settings .google-settings-section-title span { color:#9badc4 !important; }
#google-sheets-settings input {
    color:#f7f9fc !important;
    background:#081a2c !important;
    border:1px solid #314b68 !important;
}
#google-sheets-settings input::placeholder { color:#71859f !important; opacity:1; }
.google-sheets-settings-card { padding:18px; }
.google-settings-section-title {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding-bottom:12px;
    margin-bottom:14px;
    border-bottom:1px solid rgba(98,124,155,.28);
}
.google-settings-section-title > div { display:flex; flex-direction:column; gap:4px; }
.google-columns-title { margin-top:20px; }
.google-columns-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.google-column-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.google-column-field input {
    width:100%;
    min-height:42px;
    padding:9px 12px;
    border-radius:8px;
    text-transform:uppercase;
    font-weight:700;
}
.google-settings-note {
    margin-top:18px;
    padding:12px 14px;
    border:1px solid rgba(65,111,155,.55);
    border-radius:10px;
    background:rgba(12,46,75,.58);
    color:#a9bdd4 !important;
}
.google-settings-note strong { color:#f7f9fc !important; }
.google-settings-actions { justify-content:space-between; gap:12px; flex-wrap:wrap; }
.google-settings-actions-right { display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.danger-outline-button {
    min-height:40px;
    padding:8px 14px;
    border-radius:8px;
    border:1px solid rgba(239,68,68,.65);
    background:rgba(127,29,29,.18);
    color:#ffb4b4;
    cursor:pointer;
}
.danger-outline-button:hover { background:rgba(127,29,29,.34); }
#google-sheets-settings .directory-message.error { color:#7a1d28 !important; background:#ffe9ec !important; border-color:#ffb4bd !important; }
#google-sheets-settings .directory-message.success { color:#bff5d0 !important; }
@media (max-width:1100px) { .google-columns-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .google-columns-grid { grid-template-columns:1fr; } }

/* v5.1.0 — управление GPS-трекерами */
.tracker-control-panel{margin-top:18px;padding:20px}.tracker-control-head,.tracker-section-title,.tracker-save-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.tracker-control-head h3,.tracker-command-log h4{margin:0}.tracker-control-head p{margin:4px 0 0;color:var(--muted-color,#8290a8)}
.tracker-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.tracker-control-grid article{padding:14px;border:1px solid rgba(130,144,168,.18);border-radius:14px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:4px}.tracker-control-grid span,.tracker-control-grid small,.tracker-section-title small,.tracker-save-row small{color:#8793a8}.tracker-control-grid strong{font-size:18px}
.tracker-control-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.tracker-inline-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#8793a8}.tracker-inline-field input{width:120px}.tracker-automation-box{margin-top:18px;padding:16px;border:1px solid rgba(130,144,168,.18);border-radius:16px}.tracker-section-title>div{display:flex;flex-direction:column;gap:4px}.switch-line{display:flex;gap:8px;align-items:center}.tracker-settings-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:10px;margin:14px 0}.tracker-settings-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#8793a8}.tracker-settings-grid input,.tracker-inline-field input{background:#101722;color:#e9eef7;border:1px solid #2a3445;border-radius:10px;padding:9px}.tracker-command-log{margin-top:18px}.tracker-log-row{display:grid;grid-template-columns:145px 120px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid rgba(130,144,168,.12);font-size:13px}.tracker-log-row small{color:#8793a8}.tracker-view-button{white-space:nowrap}@media(max-width:1000px){.tracker-settings-grid{grid-template-columns:repeat(2,1fr)}.tracker-control-grid{grid-template-columns:1fr}.tracker-save-row{align-items:flex-start;flex-direction:column}}


/* v5.1.1 — GPS tracker control readability + location modal */
#tracker-control-panel,
#tracker-control-panel h3,
#tracker-control-panel h4,
#tracker-control-panel strong,
#tracker-control-panel label,
#tracker-control-panel .tracker-section-title strong,
#tracker-control-panel .tracker-control-head h3 { color:#f4f8ff !important; }
#tracker-control-panel p,
#tracker-control-panel small,
#tracker-control-panel .tracker-control-grid span,
#tracker-control-panel .tracker-control-grid small,
#tracker-control-panel .tracker-section-title small,
#tracker-control-panel .tracker-save-row small,
#tracker-control-panel .tracker-inline-field,
#tracker-control-panel .tracker-settings-grid label { color:#9fb3cb !important; }
#tracker-control-panel .tracker-control-grid strong { color:#ffffff !important; }
.tracker-command-log h4 { color:#f7fbff !important; margin-bottom:8px !important; }
#tracker-command-log-list { color:#dce8f7 !important; }
.tracker-log-row { border-bottom-color:rgba(118,151,187,.22) !important; }
.tracker-log-row small { color:#a9bdd4 !important; }
.tracker-log-row strong { color:#f7fbff !important; font-weight:700 !important; }
.tracker-log-row span { color:#cbd9e8 !important; }
.tracker-log-row span b { color:#dcecff !important; font-weight:700 !important; }
.tracker-log-confirmed span b { color:#69e497 !important; }
.tracker-log-error span b { color:#ff858f !important; }
.tracker-log-sent span b { color:#8dbdff !important; }
.tracker-log-empty { color:#9fb3cb !important; padding:10px 0; }
#tracker-control-readonly { color:#ffd280 !important; }

.tracker-location-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(2,8,18,.78);backdrop-filter:blur(4px)}
.tracker-location-modal[hidden]{display:none!important}
.tracker-location-dialog{width:min(820px,92vw);border:1px solid #2b4a68;border-radius:18px;background:#081a2c;box-shadow:0 28px 90px rgba(0,0,0,.5);padding:16px;color:#f4f8ff}
.tracker-location-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.tracker-location-head h3{margin:0;color:#fff;font-size:20px}.tracker-location-head p{margin:4px 0 0;color:#9fb3cb}
.tracker-location-map{height:min(520px,58vh);min-height:360px;border:1px solid #294866;border-radius:14px;overflow:hidden;background:#0b2035}
.tracker-location-map-error{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:#b8cce1;line-height:1.5}
.tracker-location-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;padding-top:12px;color:#9fb3cb}.tracker-location-footer strong{color:#f6f9fd}
@media(max-width:700px){.tracker-log-row{grid-template-columns:1fr}.tracker-location-dialog{width:96vw}.tracker-location-map{min-height:300px}.tracker-location-footer{align-items:flex-start;flex-direction:column}}


/* v5.2.0 — компактная таблица трекеров и предупреждения автоматики */
#trackers-settings .trackers-table-wrap{overflow-x:hidden!important;width:100%}
#trackers-settings .trackers-table{width:100%!important;min-width:0!important;table-layout:fixed}
#trackers-settings .trackers-table th,#trackers-settings .trackers-table td{padding-left:8px!important;padding-right:8px!important;overflow-wrap:anywhere}
#trackers-settings .trackers-table th:nth-child(1){width:12%}
#trackers-settings .trackers-table th:nth-child(2){width:16%}
#trackers-settings .trackers-table th:nth-child(3){width:10%}
#trackers-settings .trackers-table th:nth-child(4){width:17%}
#trackers-settings .trackers-table th:nth-child(5){width:22%}
#trackers-settings .trackers-table th:nth-child(6){width:23%}
#trackers-settings .tracker-driver-select{min-width:0!important;width:100%!important}
#trackers-settings .tracker-row-actions{justify-content:flex-start!important;flex-wrap:wrap!important;gap:5px!important}
#trackers-settings .tracker-row-actions .compact{padding:6px 8px!important;min-height:31px!important;font-size:11px!important}
#trackers-settings .tracker-name-cell strong,#trackers-settings .tracker-id-cell strong,#trackers-settings .tracker-last-cell strong{font-size:13px}
#trackers-settings .tracker-name-cell small,#trackers-settings .tracker-id-cell small,#trackers-settings .tracker-last-cell small{font-size:10px}
.tracker-control-alert{margin:12px 0;padding:11px 13px;border:1px solid rgba(255,115,125,.42);border-radius:11px;background:rgba(127,29,29,.22);color:#ffb1b8;font-weight:600;line-height:1.45}
@media(max-width:1050px){
  #trackers-settings .trackers-table th:nth-child(1){width:13%}
  #trackers-settings .trackers-table th:nth-child(2){width:14%}
  #trackers-settings .trackers-table th:nth-child(3){width:10%}
  #trackers-settings .trackers-table th:nth-child(4){width:16%}
  #trackers-settings .trackers-table th:nth-child(5){width:23%}
  #trackers-settings .trackers-table th:nth-child(6){width:24%}
}

/* v5.2.1 — Тестовый режим водителя */
.driver-list-work-status-icon.work-status-test { color:#fbbf24 !important; border-color:rgba(251,191,36,.62); background:rgba(251,191,36,.14); }
.work-status-test { background:#fff5d6; color:#8a5a00 !important; border-color:#f0cc72; }
body[data-current-page="map"] .driver-list-work-status-icon.work-status-test::after { content:"Тестовый режим"; }
.driver-work-status-line.work-status-test .driver-work-status-label { color:#ffd66b !important; }
body[data-current-page="map"] .driver-work-status-line.work-status-test { border-color:rgba(251,191,36,.62) !important; }


/* v5.2.3 — admin-only demo drive */
.driver-list-work-status-icon.work-status-demo { color:#8ec5ff !important; border-color:rgba(99,102,241,.68); background:rgba(79,70,229,.17); }
.work-status-demo { background:#e9ecff; color:#3730a3 !important; border-color:#a5b4fc; }
body[data-current-page="map"] .driver-list-work-status-icon.work-status-demo::after { content:"Демо режим"; }
.driver-work-status-line.work-status-demo .driver-work-status-label { color:#aeb8ff !important; }
body[data-current-page="map"] .driver-work-status-line.work-status-demo { border-color:rgba(129,140,248,.72) !important; }
.map-container { position:relative; }
.demo-drive-panel {
    position:absolute; top:18px; right:18px; z-index:1200; width:300px;
    padding:14px; border:1px solid rgba(105,143,190,.48); border-radius:16px;
    background:rgba(6,25,45,.96); color:#f4f8ff; box-shadow:0 12px 30px rgba(0,0,0,.28);
    backdrop-filter:blur(8px);
}
.demo-drive-panel[hidden] { display:none !important; }
.demo-drive-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.demo-drive-head strong { display:block; font-size:15px; }
.demo-drive-head small,.demo-hint { color:#8fb0d1; }
.demo-admin-badge { font-size:10px; letter-spacing:.08em; padding:4px 7px; border-radius:999px; color:#c7d2fe; background:rgba(79,70,229,.28); border:1px solid rgba(129,140,248,.5); }
.demo-field { display:block; margin-top:9px; color:#9fc0df; font-size:11px; }
.demo-field select,.demo-field input { width:100%; box-sizing:border-box; margin-top:5px; min-height:34px; border:1px solid #34536e; border-radius:9px; padding:6px 9px; color:#fff; background:#0a2238; }
.demo-route-summary { display:flex; justify-content:space-between; gap:10px; margin:10px 0 2px; font-size:12px; color:#a8c3dd; }
.demo-route-summary b { color:#fff; }
.demo-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }
.demo-actions button { min-height:34px; border:1px solid #3a607e; border-radius:9px; background:#102d46; color:#f5f9ff; cursor:pointer; }
.demo-actions button:hover,.demo-actions button.active { background:#2369c8; border-color:#5aa1ff; }
.demo-actions #demo-clear { grid-column:1 / -1; color:#ffb5bc; border-color:#75414b; background:#341b26; }
.demo-hint { display:block; margin-top:9px; line-height:1.35; }
@media (max-width:760px) { .demo-drive-panel { left:10px; right:10px; top:70px; width:auto; } }

/* v5.2.6 */
.demo-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}.demo-metrics span{background:#0a1b2d;border:1px solid #29445f;border-radius:8px;padding:7px 8px;color:#9bb5cf;font-size:11px}.demo-metrics b{display:block;color:#fff;margin-top:2px;font-size:13px}.task-reopen-panel{margin-top:12px;padding:12px;border:1px solid #6f3540;border-radius:12px;background:#24151b}.task-reopen-panel label{display:block}.task-reopen-panel span{display:block;color:#f2c6ce;margin-bottom:6px}.task-reopen-panel textarea{width:100%;box-sizing:border-box;background:#08192a;color:#fff;border:1px solid #38536e;border-radius:8px;padding:9px}.danger-outline{margin-top:8px;border-color:#a94b5a!important;color:#ff9ead!important}

.task-reopen-last-note{margin:10px 0;padding:10px 12px;border-radius:10px;background:#172438;border:1px solid #38536e}.task-reopen-last-note strong,.task-reopen-last-note span,.task-reopen-last-note small{display:block}.task-reopen-last-note strong{color:#ffd08a}.task-reopen-last-note span{color:#fff;margin-top:4px}.task-reopen-last-note small{color:#9bb5cf;margin-top:4px}


/* v5.2.6 — стабильный живой шлейф и ДЕМО cleanup */
.task-map-marker.arrived { overflow: visible !important; }

/* v5.3.4: настройки визуального стиля водителя */
.driver-visual-style-section { margin-top: 16px; }
.driver-visual-style-section select { min-height: 42px; }

/* v5.3.5 — живой предпросмотр транспорта и шевронов */
.driver-map-style-preview{margin-top:14px;border:1px solid rgba(148,163,184,.22);border-radius:14px;background:rgba(15,23,42,.48);padding:12px 14px}
.driver-map-style-preview-title{font-weight:700;margin-bottom:8px;color:#e5edf8}
.driver-map-style-preview-stage{height:88px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(90deg,rgba(71,85,105,.18) 0 48%,rgba(148,163,184,.15) 48% 52%,rgba(71,85,105,.18) 52%);border:1px solid rgba(148,163,184,.18)}
.driver-map-style-preview-stage:after{content:"";position:absolute;left:8%;right:8%;top:50%;height:7px;border-radius:99px;background:currentColor;opacity:.18}
.driver-marker-live-preview{position:absolute;z-index:3;right:18%;top:50%;width:72px;height:72px;transform:translateY(-50%);display:grid;place-items:center}
.driver-marker-live-preview svg{width:72px;height:72px;display:block}
.driver-chevron-preview-track{position:absolute;left:10%;right:27%;top:50%;transform:translateY(-50%);height:28px;overflow:hidden;z-index:4;white-space:nowrap}
.driver-chevron-live-preview{display:inline-block;font-size:17px;font-weight:900;letter-spacing:12px;line-height:28px;animation:driverChevronPreviewFlow 1.25s linear infinite;text-shadow:0 1px 2px rgba(0,0,0,.35)}
@keyframes driverChevronPreviewFlow{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
.driver-map-style-preview small{display:block;margin-top:8px;color:#94a3b8;line-height:1.35}

/* v5.3.6 — реальные PNG-маркеры транспорта из /assets/vehicles */
.prosystem-vehicle-icon,
.prosystem-yandex-vehicle-marker{
    display:block;
    position:relative;
    transform-origin:50% 50%;
    will-change:transform;
    pointer-events:none;
}
.prosystem-vehicle-icon-mask,
.prosystem-yandex-vehicle-mask{
    position:absolute;
    inset:0;
    display:block;
    background:var(--vehicle-color,#2563EB);
    -webkit-mask-image:var(--vehicle-mask);
    mask-image:var(--vehicle-mask);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
    filter:drop-shadow(0 2px 2px rgba(7,17,31,.42));
}
.prosystem-yandex-vehicle-marker{position:absolute;left:0;top:0}
.driver-marker-live-preview .prosystem-vehicle-icon{width:72px!important;height:72px!important}


/* v5.3.7 — карточки водителей, единый предпросмотр и исправленный шлейф */
.driver-form-layout{grid-template-columns:minmax(0,1fr)!important}
.driver-preview-panel{display:none!important}
.driver-form-fields{width:100%;box-sizing:border-box}

#drivers-settings .drivers-table-wrapper{overflow-y:auto!important;overflow-x:hidden!important;padding:14px;background:transparent}
#drivers-settings .drivers-table{display:block!important;width:100%!important;min-width:0!important;background:transparent!important}
#drivers-settings .drivers-table thead{display:none!important}
#drivers-settings .drivers-table tbody{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
#drivers-settings .drivers-table tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:16px;border:1px solid rgba(148,163,184,.22);border-radius:15px;background:var(--surface,#0f2236);box-shadow:0 3px 10px rgba(2,12,27,.08)}
#drivers-settings .drivers-table tbody tr:hover{background:rgba(36,58,83,.72)!important;border-color:rgba(99,102,241,.45)}
#drivers-settings .drivers-table tbody td{display:flex!important;align-items:center;gap:8px;padding:0!important;border:0!important;min-width:0!important;white-space:normal!important;overflow:visible!important;color:var(--app-text)!important}
#drivers-settings .drivers-table tbody td::before{content:attr(data-label);min-width:64px;color:var(--app-muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
#drivers-settings .drivers-table tbody td:first-child,#drivers-settings .drivers-table tbody td:last-child{grid-column:1/-1}
#drivers-settings .drivers-table tbody td:first-child::before,#drivers-settings .drivers-table tbody td:last-child::before{display:none}
#drivers-settings .driver-table-person{min-width:0;width:100%}
#drivers-settings .driver-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:900px){#drivers-settings .drivers-table tbody{grid-template-columns:1fr}}

.driver-map-style-preview-stage{background:linear-gradient(90deg,rgba(71,85,105,.12),rgba(71,85,105,.18))!important}
.driver-map-style-preview-stage:after{left:7%!important;right:7%!important;height:6px!important;opacity:.34!important;background:currentColor!important}
.driver-chevron-preview-track{left:9%!important;right:29%!important;height:34px!important;display:flex!important;align-items:center!important}
.driver-chevron-live-preview{display:flex!important;align-items:center;gap:18px;letter-spacing:0!important;font-size:18px!important;line-height:1!important;animation:driverChevronPreviewFlow 1.05s linear infinite!important;white-space:nowrap}
.driver-chevron-live-preview span{display:inline-block;min-width:16px;text-align:center;transform:none!important}
.driver-chevron-live-preview[data-style="chevron"] span{font-size:27px;font-weight:800}
.driver-chevron-live-preview[data-style="triangle"] span{font-size:17px}
.driver-chevron-live-preview[data-style="arrow"] span{font-size:20px}
.driver-chevron-live-preview[data-style="dot"] span{font-size:12px}
@keyframes driverChevronPreviewFlow{from{transform:translateX(-34px)}to{transform:translateX(34px)}}


/* ===== v5.3.8: тёмные карточки водителей + реальные машины в списках + live preview ===== */
#drivers-settings .directory-card{
    background:#08192a!important;
    border:1px solid #263f58!important;
    color:#eef6ff!important;
    box-shadow:none!important;
}
#drivers-settings .directory-toolbar{
    background:#0d2237!important;
    border-color:#29445f!important;
    color:#eef6ff!important;
}
#drivers-settings .directory-search label,
#drivers-settings .directory-filter,
#drivers-settings .directory-filter span{
    color:#c8d9ec!important;
}
#drivers-settings .directory-search input{
    background:#071729!important;
    color:#f8fbff!important;
    border-color:#35516d!important;
}
#drivers-settings .directory-search input::placeholder{color:#7890aa!important}
#drivers-settings .drivers-table-wrapper{background:#08192a!important}
#drivers-settings .drivers-table,
#drivers-settings .drivers-table tbody{background:transparent!important}
#drivers-settings .drivers-table tbody tr{
    background:#0e2236!important;
    border:1px solid #2b4762!important;
    box-shadow:0 7px 18px rgba(0,0,0,.18)!important;
}
#drivers-settings .drivers-table tbody tr:hover{
    background:#132c44!important;
    border-color:#5274ff!important;
}
#drivers-settings .drivers-table tbody td{
    background-color:transparent!important;
    color:#eaf3fd!important;
}
#drivers-settings .drivers-table tbody td *{color:#eaf3fd!important}
#drivers-settings .drivers-table tbody td::before{color:#85a0bd!important}
#drivers-settings .driver-table-name strong,
#drivers-settings .driver-phone-value,
#drivers-settings .driver-device-value strong,
#drivers-settings .driver-fuel-value,
#drivers-settings .driver-fuel-consumption,
#drivers-settings .driver-color-code{color:#f7fbff!important}
#drivers-settings .driver-table-name small,
#drivers-settings .driver-device-value small{color:#8ea7c0!important}
#drivers-settings .status-badge,
#drivers-settings .driver-work-status-badge{background-color:#102a24!important}
#drivers-settings .driver-actions{background:transparent!important}
#drivers-settings .table-action-button{
    background:#0b1d30!important;
    color:#bcd3ff!important;
    border-color:#49627c!important;
}
#drivers-settings .table-action-button:hover{background:#173452!important;color:#fff!important}
#drivers-settings .table-action-button.danger{background:#2b1018!important;color:#ff7588!important;border-color:#7b3040!important}
#drivers-settings .driver-table-person{display:flex!important;align-items:center!important;gap:12px!important}
#drivers-settings .driver-directory-vehicle{
    width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;
    border-radius:13px;background:#081725!important;border:1px solid #2c4965!important;
}
#drivers-settings .driver-directory-vehicle .prosystem-vehicle-icon{width:46px!important;height:46px!important}

/* Левая панель карты: вместо абстрактной стрелки показывается выбранная машина. */
body[data-current-page="map"] .driver-direction-icon.driver-sidebar-vehicle{
    width:52px!important;height:52px!important;min-width:52px!important;
    display:grid!important;place-items:center!important;
    transform:none!important;color:inherit!important;font-size:0!important;
}
body[data-current-page="map"] .driver-sidebar-vehicle .prosystem-vehicle-icon{width:48px!important;height:48px!important}

/* В форме редактирования всё остаётся в тёмной теме и читаемо. */
#driver-modal .modal-content,
#driver-modal .form-section,
#driver-modal .driver-map-style-preview{
    background:#091a2c!important;color:#eef6ff!important;border-color:#29445f!important;
}
#driver-modal .form-section h3,
#driver-modal .form-section label,
#driver-modal .driver-map-style-preview-title{color:#f5f9ff!important}
#driver-modal .form-help,
#driver-modal .driver-map-style-preview small{color:#95acc4!important}
#driver-modal input,
#driver-modal select{background:#071729!important;color:#fff!important;border-color:#35516d!important}

/* Предпросмотр: все элементы шлейфа смотрят и текут слева направо к машине. */
.driver-chevron-preview-track{overflow:hidden!important}
.driver-chevron-live-preview{animation:driverChevronPreviewFlow538 1s linear infinite!important;transform-origin:center!important}
.driver-chevron-live-preview[data-style="chevron"] span,
.driver-chevron-live-preview[data-style="triangle"] span,
.driver-chevron-live-preview[data-style="arrow"] span{transform:none!important}
@keyframes driverChevronPreviewFlow538{from{transform:translateX(-28px)}to{transform:translateX(28px)}}

/* ===== v5.4.0: контур маркеров и классическая стрелка ===== */
.prosystem-vehicle-icon-mask,
.prosystem-yandex-vehicle-mask{
    filter:
        drop-shadow(1px 0 0 rgba(255,255,255,.96))
        drop-shadow(-1px 0 0 rgba(255,255,255,.96))
        drop-shadow(0 1px 0 rgba(255,255,255,.96))
        drop-shadow(0 -1px 0 rgba(255,255,255,.96))
        drop-shadow(0 2px 2px rgba(7,17,31,.55))!important;
}
.prosystem-arrow-preview{display:grid!important;place-items:center!important;filter:drop-shadow(0 2px 2px rgba(7,17,31,.45));}
.prosystem-arrow-preview svg{width:100%;height:100%;display:block;overflow:visible;}


/* v5.4.1 — Настройки сервера и Windows Time */
.server-settings-card { padding: 20px; margin-top: 16px; }
.server-settings-section-title { display:flex; justify-content:space-between; gap:18px; margin-bottom:16px; }
.server-settings-section-title strong { display:block; color:var(--app-text, #f8fafc); font-size:17px; margin-bottom:4px; }
.server-settings-section-title span { color:var(--app-muted, #93a4bd); font-size:13px; }
.server-settings-note { margin-top:16px; padding:14px 16px; border:1px solid rgba(96,165,250,.26); border-radius:12px; background:rgba(37,99,235,.08); color:var(--app-muted, #b7c2d4); line-height:1.5; }
.server-settings-note strong { color:var(--app-text, #fff); }
.server-time-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.server-time-grid article { min-height:92px; padding:14px; border:1px solid rgba(148,163,184,.2); border-radius:12px; background:rgba(15,35,57,.62); }
.server-time-grid span,.server-time-grid small { display:block; color:var(--app-muted,#9db0c9); }
.server-time-grid strong { display:block; color:var(--app-text,#fff); font-size:18px; margin:8px 0 4px; word-break:break-word; }
.server-time-form { align-items:end; }
.server-time-switch { min-height:46px; align-self:end; margin-bottom:0; color:var(--app-text,#fff); }
.server-time-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap; }
.server-time-details { margin-top:16px; border-top:1px solid rgba(148,163,184,.16); padding-top:12px; color:var(--app-muted,#9db0c9); }
.server-time-details summary { cursor:pointer; color:var(--app-text,#fff); font-weight:700; }
.server-time-details pre { margin:12px 0 0; max-height:220px; overflow:auto; white-space:pre-wrap; word-break:break-word; padding:12px; background:#071425; border:1px solid rgba(148,163,184,.16); border-radius:10px; color:#c7d2e3; font:12px/1.45 Consolas,monospace; }
.server-time-ok,.time-drift-good { color:#34d399 !important; }
.server-time-error,.time-drift-bad { color:#fb7185 !important; }
.time-drift-warn { color:#fbbf24 !important; }
@media (max-width: 1000px) { .server-time-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .server-time-grid { grid-template-columns:1fr; } }


/* ===== v5.4.3: читаемость настроек сервера / NTP ===== */
#server-settings,
#server-settings .directory-card,
#server-settings .tracker-summary-card,
#server-settings .server-time-grid article {
    color:#eef6ff !important;
}
#server-settings h2,
#server-settings h3,
#server-settings strong,
#server-settings label,
#server-settings summary,
#server-settings .server-settings-section-title strong,
#server-settings .server-time-grid strong {
    color:#f8fbff !important;
}
#server-settings p,
#server-settings span,
#server-settings small,
#server-settings .server-settings-section-title span,
#server-settings .server-time-grid span,
#server-settings .server-time-grid small {
    color:#9fb4cc !important;
}
#server-settings input {
    background:#071729 !important;
    color:#ffffff !important;
    border-color:#35516d !important;
}
#server-settings .server-settings-note {
    color:#c8d7e8 !important;
    background:#0b2238 !important;
    border-color:#315779 !important;
}
#server-settings .server-settings-note strong { color:#ffffff !important; }
#server-settings .server-time-details pre {
    background:#061321 !important;
    color:#e6f0fb !important;
    border-color:#35516d !important;
    font-family:Consolas,"Cascadia Mono","Courier New",monospace !important;
    font-size:13px !important;
    line-height:1.55 !important;
    letter-spacing:0 !important;
    text-shadow:none !important;
}
#server-settings .server-time-ok, #server-settings .time-drift-good { color:#34d399 !important; }
#server-settings .time-drift-warn { color:#fbbf24 !important; }
#server-settings .server-time-error, #server-settings .time-drift-bad { color:#fb7185 !important; }

/* ============================================================
   ProSystem GPS 6.0.0 — MapLibre / OpenStreetMap
   ============================================================ */
.map-container { position: relative; }
.osm-map-layer {
    position: absolute;
    inset: 0;
    z-index: 7;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #dce7ef;
    transition: opacity .18s ease;
}
.osm-map-layer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.map-engine-switcher {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 40;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(17, 38, 62, .24);
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 28px rgba(10, 27, 45, .16);
    backdrop-filter: blur(10px);
}
.map-engine-switcher button {
    border: 0;
    border-radius: 9px;
    padding: 8px 12px;
    font: 600 12px/1.1 "Segoe UI", Arial, sans-serif;
    color: #40536a;
    background: transparent;
    cursor: pointer;
}
.map-engine-switcher button.active {
    color: #fff;
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(37,99,235,.28);
}
.osm-driver-marker {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.75)) drop-shadow(0 0 1px #000);
}
.osm-driver-marker .prosystem-vehicle-icon-mask,
.osm-driver-marker .prosystem-arrow-preview {
    filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}
.osm-map-layer .maplibregl-ctrl-attrib { font-size: 10px; }
.osm-map-layer .maplibregl-ctrl-top-right { top: 10px; right: 10px; }

/* v6.0.1 — OpenStreetMap без внешней JS-библиотеки + выбор карты внутри Панели */
.osm-map-layer { overflow:hidden; touch-action:none; user-select:none; }
.osm-tiles, .osm-overlay, .osm-marker-layer { position:absolute; inset:0; }
.osm-tiles { overflow:hidden; background:#dce7ef; }
.osm-tiles img { position:absolute; width:256px; height:256px; max-width:none; pointer-events:none; user-select:none; }
.osm-overlay { z-index:3; pointer-events:none; overflow:visible; }
.osm-marker-layer { z-index:5; pointer-events:none; }
.osm-marker-layer .osm-driver-marker { position:absolute; left:0; top:0; pointer-events:auto; }
.osm-controls { position:absolute; z-index:12; left:12px; top:12px; display:flex; flex-direction:column; gap:6px; }
.osm-controls button { width:38px; height:38px; border:1px solid rgba(15,23,42,.22); border-radius:9px; background:#fff; color:#172033; font-size:24px; line-height:1; box-shadow:0 3px 12px rgba(15,23,42,.16); cursor:pointer; }
.osm-loading { position:absolute; z-index:11; left:50%; top:50%; transform:translate(-50%,-50%); max-width:520px; padding:12px 16px; border-radius:10px; background:rgba(7,23,39,.9); color:#fff; font:600 13px/1.45 "Segoe UI",Arial,sans-serif; text-align:center; pointer-events:none; }
.osm-loading.hidden { display:none; }
.map-engine-switcher.map-engine-switcher-sidebar { position:static; inset:auto; z-index:auto; display:block; margin:0; padding:14px 16px; border:0; border-bottom:1px solid rgba(148,163,184,.16); border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.map-engine-switcher-title { margin:0 0 8px; color:#8fa8c5; font:600 11px/1.2 "Segoe UI",Arial,sans-serif; text-transform:uppercase; letter-spacing:.06em; }
.map-engine-switcher-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.map-engine-switcher.map-engine-switcher-sidebar button { min-height:38px; border:1px solid #2d4b6a; border-radius:9px; padding:8px 10px; background:#0d2236; color:#d6e5f5; font:600 12px/1.2 "Segoe UI",Arial,sans-serif; }
.map-engine-switcher.map-engine-switcher-sidebar button.active { border-color:#5f74e8; background:#5064d7; color:#fff; box-shadow:0 5px 15px rgba(80,100,215,.25); }


/* ===== v6.0.3: чёрная кайма вокруг всех машин ===== */
.prosystem-vehicle-icon-mask,
.prosystem-yandex-vehicle-mask {
    filter:
        drop-shadow(2px 0 0 #050505)
        drop-shadow(-2px 0 0 #050505)
        drop-shadow(0 2px 0 #050505)
        drop-shadow(0 -2px 0 #050505)
        drop-shadow(1.4px 1.4px 0 #050505)
        drop-shadow(-1.4px 1.4px 0 #050505)
        drop-shadow(1.4px -1.4px 0 #050505)
        drop-shadow(-1.4px -1.4px 0 #050505)
        drop-shadow(0 3px 3px rgba(0,0,0,.72)) !important;
}


/* =========================================================
   v6.0.27 — ИСТОРИЯ: дневной dashboard 08:00–19:00
   ========================================================= */
body[data-current-page="history"] .page-header-description{color:#8da4bf}
.history-v6026{display:flex;flex-direction:column;gap:14px;min-width:0;padding-bottom:18px;color:#eef4ff}
.history-v6026-toolbar{display:grid;grid-template-columns:minmax(360px,1.35fr) minmax(330px,.9fr) auto;gap:28px;align-items:end;position:relative;z-index:30}
.history-v6026-filter{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}.history-v6026-filter>label{font-size:13px;font-weight:800;color:#e7eef8}
.history-v6026-picker,.history-v6026-date-control,.history-v6026-today{height:52px;border:1px solid #21344d;background:#0c1a2b;color:#f8fafc;border-radius:10px;box-shadow:none}
.history-v6026-picker{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;cursor:pointer}.history-v6026-picker>svg{width:17px;height:17px;fill:none;stroke:#9eb0c6;stroke-width:2}.history-v6026-selected{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;flex:1}.history-v6026-placeholder{color:#8295ad;font-size:13px}
.history-v6026-chip{height:32px;max-width:190px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border-radius:6px;background:color-mix(in srgb,var(--driver-color) 48%,#122033);border:1px solid color-mix(in srgb,var(--driver-color) 72%,#52647a);color:#fff;font-size:12px;font-weight:800;white-space:nowrap}.history-v6026-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--driver-color);box-shadow:0 0 0 2px rgba(255,255,255,.13)}.history-v6026-chip-x{opacity:.8;font-size:15px}
.history-v6026-driver-menu{position:absolute;top:81px;left:0;right:0;z-index:100;padding:8px;border:1px solid #29415f;border-radius:12px;background:#0b1828;box-shadow:0 22px 55px rgba(0,0,0,.42);max-height:360px;overflow:auto}.history-v6026-driver-menu[hidden]{display:none}.history-v6026-driver-option{width:100%;display:grid;grid-template-columns:18px 12px minmax(0,1fr);gap:9px;align-items:center;padding:10px;border:0;border-radius:8px;background:transparent;color:#e8f0fa;text-align:left;cursor:pointer;font-size:13px}.history-v6026-driver-option:hover{background:#13243a}.history-v6026-driver-option input{accent-color:#4567da}.history-v6026-driver-option .dot{width:10px;height:10px;border-radius:50%;background:var(--driver-color)}.history-v6026-driver-option.all{border-bottom:1px solid rgba(148,163,184,.16);margin-bottom:4px;font-weight:800}
.history-v6026-date-control{display:grid;grid-template-columns:44px 1fr 44px;overflow:hidden}.history-v6026-icon-button{border:0;background:transparent;color:#b7c4d4;display:grid;place-items:center;cursor:pointer}.history-v6026-icon-button:hover{background:#13253b}.history-v6026-icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.history-v6026-date-input-wrap{display:flex;align-items:center;gap:9px;padding:0 12px;border-left:1px solid #1e3149;border-right:1px solid #1e3149}.history-v6026-date-input-wrap svg{width:18px;height:18px;fill:none;stroke:#b3c1d2;stroke-width:1.8}.history-v6026-date-input-wrap input{width:100%;border:0!important;background:transparent!important;color:#f4f8fd!important;padding:0!important;font-weight:750;box-shadow:none!important;color-scheme:dark}.history-v6026-today{padding:0 24px;font-weight:700;cursor:pointer}.history-v6026-today:hover{background:#13253b;border-color:#365579}
.history-v6026-warning{margin:0!important}
.history-v6026-map-card{position:relative;height:430px;min-height:430px;border:1px solid #24364e;border-radius:10px;overflow:hidden;background:#0c1828}.history-v6026-map{position:absolute;inset:0;width:100%;height:100%;min-height:0!important}.history-v6026-map-filters{position:absolute;top:16px;left:16px;z-index:12;width:180px;padding:9px 10px;border-radius:9px;background:rgba(244,248,253,.94);box-shadow:0 8px 22px rgba(15,23,42,.18);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:8px;color:#182338}.history-v6026-map-check{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;cursor:pointer}.history-v6026-map-check input{position:absolute;opacity:0;pointer-events:none}.history-v6026-check-box{width:20px;height:20px;border-radius:4px;border:1px solid #9ab0cb;background:#fff;display:grid;place-items:center}.history-v6026-map-check input:checked+.history-v6026-check-box{background:#365ccf;border-color:#365ccf}.history-v6026-check-box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.5;opacity:0}.history-v6026-map-check input:checked+.history-v6026-check-box svg{opacity:1}.history-v6026-map-check>span:last-child{display:flex;flex-direction:column;line-height:1.13}.history-v6026-map-check strong{font-size:11px;color:#1a2638}.history-v6026-map-check small{font-size:9px;color:#5e6e82;margin-top:3px}.history-v6026-loading{position:absolute;inset:0;z-index:20;background:rgba(5,15,28,.62);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;gap:10px;color:#fff}.history-v6026-loading[hidden]{display:none}.history-v6026-spinner{width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:history-v6026-spin .8s linear infinite}@keyframes history-v6026-spin{to{transform:rotate(360deg)}}
.history-v6026-timeline-card{border:1px solid #20334c;border-radius:10px;background:#0b1828;padding:13px 16px 16px;overflow:hidden}.history-v6026-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.history-v6026-card-title>div:first-child{display:flex;flex-direction:column;gap:3px}.history-v6026-card-title strong{font-size:12px;color:#f4f7fb}.history-v6026-card-title span{font-size:10px;color:#8195ad}.history-v6026-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.history-v6026-legend-item{display:flex;align-items:center;gap:5px;font-size:9px;color:#8fa3ba}.history-v6026-legend-dot{width:8px;height:8px;border-radius:50%;background:var(--legend-color)}
.history-v6026-timeline-body{display:flex;flex-direction:column;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}.history-v6026-empty{min-height:110px;display:grid;place-items:center;color:#7f93aa;font-size:12px}.history-v6026-driver-row{min-width:1020px;display:grid;grid-template-columns:116px minmax(900px,1fr);gap:12px;align-items:center}.history-v6026-driver-label{display:flex;align-items:center;gap:8px;min-width:0}.history-v6026-driver-label .dot{width:10px;height:10px;border-radius:50%;background:var(--driver-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--driver-color) 18%,transparent)}.history-v6026-driver-label strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e5edf7}.history-v6026-track{position:relative;height:108px;margin:0 24px}.history-v6026-line{position:absolute;left:0;right:0;top:38px;height:4px;border-radius:4px;background:var(--driver-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--driver-color) 55%,transparent)}.history-v6026-event{position:absolute;top:22px;transform:translateX(-50%);width:110px;text-align:center;z-index:3;cursor:pointer}.history-v6026-event-time{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);font-size:9px;color:#bdcad8;white-space:nowrap}.history-v6026-event-icon{width:34px;height:34px;border-radius:50%;margin:0 auto;display:grid;place-items:center;border:2px solid rgba(255,255,255,.9);background:var(--event-bg);box-shadow:0 3px 12px rgba(0,0,0,.28)}.history-v6026-event-icon svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}.history-v6026-event-icon.task{background:var(--driver-color)}.history-v6026-event-icon.stop{background:#e0a000}.history-v6026-event-icon.shift{background:#2f68dc}.history-v6026-event-icon.route-end{background:#9b39c8}.history-v6026-event-icon.movement{background:var(--driver-color)}.history-v6026-event-label{display:block;margin-top:8px;font-size:9px;line-height:1.2;color:#d8e2ed}.history-v6026-event-sub{display:block;margin-top:2px;font-size:8px;color:#8498af}.history-v6026-event:hover .history-v6026-event-icon{transform:translateY(-2px);filter:brightness(1.08)}
.history-v6026-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.history-v6026-summary-card{min-height:126px;border:1px solid #20334c;border-radius:10px;background:#0c1929;padding:17px 16px;display:flex;gap:12px;align-items:flex-start}.history-v6026-summary-icon{width:28px;height:28px;display:grid;place-items:center;color:#c3cedb;flex:0 0 28px}.history-v6026-summary-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.history-v6026-summary-card>div{min-width:0;display:flex;flex-direction:column}.history-v6026-summary-card small{color:#94a6bb;font-size:10px;white-space:nowrap}.history-v6026-summary-card strong{font-size:20px;color:#fff;margin-top:14px;line-height:1;white-space:nowrap}.history-v6026-summary-card em{font-style:normal;font-size:9px;color:#7f93aa;margin-top:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-v6026-legacy{display:none!important}
.history-v6026-map-marker{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;border:2px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.3);transform:translate(-50%,-50%)}.history-v6026-map-marker svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.history-v6026-map-marker.task{background:var(--driver-color)}.history-v6026-map-marker.stop{background:#e0a000}.history-v6026-map-marker.end{background:#9b39c8}
@media(max-width:1280px){.history-v6026-toolbar{grid-template-columns:1fr 1fr auto;gap:14px}.history-v6026-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.history-v6026-toolbar{grid-template-columns:1fr}.history-v6026-map-card{height:390px}.history-v6026-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-v6026-today{height:44px}.history-v6026-driver-row{grid-template-columns:100px minmax(860px,1fr)}}


/* =========================================================
   History v6.0.27 — sidebar drivers + interactive time cursor
   ========================================================= */
.history-sidebar-selector{display:none}
body[data-current-page="history"] .history-sidebar-selector{display:block;padding:0 14px 10px;margin-top:14px}
body[data-current-page="history"] .drivers-panel,body[data-current-page="history"] .sidebar-footer{display:none}
.history-sidebar-selector-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;padding:0 2px}
.history-sidebar-selector-header h2{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:#f2f6fb}
.history-sidebar-count{min-width:22px;height:22px;border-radius:11px;background:#17365f;color:#dce9ff;display:grid;place-items:center;font-size:11px;font-weight:800}
.history-sidebar-driver-list{display:flex;flex-direction:column;gap:5px;max-height:43vh;overflow:auto;padding-right:2px}
.history-sidebar-driver-option{position:relative;display:grid;grid-template-columns:20px 10px minmax(0,1fr);gap:8px;align-items:center;min-height:38px;padding:7px 8px;border:1px solid transparent;border-radius:9px;color:#b9c8da;cursor:pointer;transition:.15s ease}
.history-sidebar-driver-option:hover{background:#10233a;border-color:#1e3d61;color:#fff}
.history-sidebar-driver-option input{position:absolute;opacity:0;pointer-events:none}
.history-sidebar-check{width:18px;height:18px;border:1px solid #3b5370;border-radius:5px;background:#0a1829;position:relative}
.history-sidebar-driver-option input:checked+.history-sidebar-check{background:#4567da;border-color:#5d7cf0}
.history-sidebar-driver-option input:checked+.history-sidebar-check:after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.history-sidebar-driver-option .dot{width:9px;height:9px;border-radius:50%;background:var(--driver-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--driver-color) 14%,transparent)}
.history-sidebar-driver-option strong{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-sidebar-driver-option.all{margin-bottom:4px;border-bottom-color:#1b304a;border-bottom-left-radius:0;border-bottom-right-radius:0}

.history-v6026-toolbar{grid-template-columns:minmax(330px,520px) auto!important;justify-content:space-between;gap:14px!important}
.history-v6026-date-filter{max-width:520px}
.history-v6026-timeline-card{padding:14px 16px 18px}
.history-v6026-timeline-body{gap:18px;overflow-x:hidden;padding:8px 0 4px}
.history-v6026-driver-row{min-width:0!important;grid-template-columns:112px minmax(0,1fr);gap:14px}
.history-v6026-track{height:118px;margin:0 34px 0 18px;touch-action:none;cursor:ew-resize;user-select:none}
.history-v6026-line{top:43px;height:4px;box-shadow:0 0 0 1px color-mix(in srgb,var(--driver-color) 52%,transparent),0 0 12px color-mix(in srgb,var(--driver-color) 22%,transparent)}
.history-v6026-event{appearance:none!important;-webkit-appearance:none!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;color:inherit;width:94px;top:26px;outline:none;overflow:visible;font-family:inherit}
.history-v6026-event-time{bottom:51px;font-size:10px;font-weight:700;color:#b9c8d8}
.history-v6026-event-icon{width:36px;height:36px;border:2px solid rgba(255,255,255,.93);box-shadow:0 4px 12px rgba(0,0,0,.34),0 0 0 3px rgba(5,15,28,.38);transition:.15s ease}
.history-v6026-event-icon svg{width:20px;height:20px;stroke-width:2.25}
.history-v6026-event-label{margin-top:9px;font-size:9px;font-weight:700;color:#dce6f1}
.history-v6026-event-sub{font-size:8px;color:#8297ae}
.history-v6026-event.future{opacity:.28;filter:saturate(.35)}
.history-v6026-event:hover{opacity:1!important;filter:none!important}
.history-v6026-event:hover .history-v6026-event-icon{transform:translateY(-2px) scale(1.04)}
.history-v6026-playhead{position:absolute;top:7px;bottom:7px;width:2px;background:#f7fbff;z-index:8;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 10px rgba(255,255,255,.45)}
.history-v6026-playhead:after{content:"";position:absolute;top:31px;left:50%;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid var(--driver-color);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.history-v6026-playhead span{position:absolute;top:-3px;left:50%;transform:translate(-50%,-100%);padding:3px 7px;border-radius:6px;background:#f5f8fc;color:#0b1828;font-size:9px;font-weight:900;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.history-v6026-event-icon.stop,.history-v6026-map-marker.stop{background:#e0a000}
.history-v6026-event-icon.task,.history-v6026-map-marker.task{background:var(--driver-color)}
.history-v6026-card-title span{max-width:680px}
@media(max-width:900px){.history-v6026-toolbar{grid-template-columns:1fr!important}.history-v6026-driver-row{grid-template-columns:90px minmax(0,1fr)}.history-v6026-track{margin-right:26px}}


/* v6.0.28 — История: playback + масштабируемая шкала + road matched route */
.history-v6028-card-title{align-items:center!important;margin-bottom:8px!important}.history-v6028-timeline-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.history-v6028-play-button{width:36px;height:36px;border-radius:9px;border:1px solid #315176;background:#12243a;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:14px;font-weight:900}.history-v6028-play-button:hover{background:#183252;border-color:#4a73a6}.history-v6028-play-button .pause-icon{display:none}.history-v6028-play-button.playing{background:#4567da;border-color:#6e8bef}.history-v6028-play-button.playing .play-icon{display:none}.history-v6028-play-button.playing .pause-icon{display:inline}.history-v6028-speed{display:flex;align-items:center;padding:3px;border:1px solid #223a57;border-radius:9px;background:#0a1726;gap:2px}.history-v6028-speed button{height:28px;min-width:34px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:#8fa3bb;font:700 10px/1 inherit;cursor:pointer}.history-v6028-speed button:hover{color:#fff;background:#13283f}.history-v6028-speed button.active{color:#fff;background:#4567da}
.history-v6026-timeline-body{overflow:hidden!important;padding:0!important;gap:12px!important}.history-v6026-driver-row{grid-template-columns:105px minmax(0,1fr)!important;gap:10px!important;align-items:center}.history-v6026-driver-label{padding-top:0!important;align-self:center!important;font-size:10px!important}.history-v6028-track-viewport{min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;padding:21px 8px 22px;scrollbar-width:thin;scrollbar-color:#53667b transparent}.history-v6028-track-viewport::-webkit-scrollbar{height:6px}.history-v6028-track-viewport::-webkit-scrollbar-thumb{background:#53667b;border-radius:8px}.history-v6026-track{height:105px!important;margin:0!important;min-width:100%;position:relative;touch-action:none;cursor:ew-resize;user-select:none}.history-v6026-line{top:37px!important;height:4px!important}.history-v6026-playhead{top:0!important;bottom:4px!important}.history-v6026-playhead:after{top:39px!important}.history-v6026-playhead span{top:1px!important}.history-v6026-event{top:20px!important;width:72px!important;transform:translateX(-50%);z-index:5}.history-v6026-event-time{bottom:42px!important;font-size:9px!important}.history-v6026-event-icon{width:32px!important;height:32px!important}.history-v6026-event-icon svg{width:17px!important;height:17px!important}.history-v6026-event-label{margin-top:6px!important;font-size:8px!important;line-height:1.05!important;white-space:normal;max-width:72px}.history-v6026-event-sub{font-size:7px!important;line-height:1.05!important;white-space:nowrap}.history-v6026-event.lane-1{top:54px!important}.history-v6026-event.lane-1 .history-v6026-event-time{bottom:-16px!important}.history-v6026-event.lane-1 .history-v6026-event-label,.history-v6026-event.lane-1 .history-v6026-event-sub{display:none}.history-v6026-event.lane-2{top:54px!important}.history-v6026-event.lane-2 .history-v6026-event-time{display:none}.history-v6026-event.lane-2 .history-v6026-event-label,.history-v6026-event.lane-2 .history-v6026-event-sub{display:none}.history-v6026-event-icon.shift{background:#2f68dc!important}.history-v6026-event-icon.task{background:var(--driver-color)!important}.history-v6026-event-icon.stop{background:#e0a000!important}.history-v6026-event-icon.route-end{background:#9b39c8!important}.history-v6026-map-card{height:430px!important}
@media(max-width:1100px){.history-v6028-card-title{align-items:flex-start!important;flex-direction:column}.history-v6028-timeline-actions{justify-content:flex-start}.history-v6026-driver-row{grid-template-columns:88px minmax(0,1fr)!important}.history-v6028-speed button{min-width:30px;padding:0 5px}}

/* ===== ProSystem GPS v6.0.29 — History playback follow + live stats ===== */
.history-v6029-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;align-items:stretch}
.history-v6029-main-grid .history-v6026-map-card{height:430px!important;min-height:430px!important}
.history-v6029-follow-button{position:absolute;right:14px;bottom:14px;z-index:14;height:38px;padding:0 12px;border:1px solid #315176;border-radius:9px;background:rgba(10,23,38,.94);color:#b8c7d9;display:flex;align-items:center;gap:7px;font:700 10px/1 inherit;cursor:pointer;box-shadow:0 6px 18px rgba(4,12,22,.24);backdrop-filter:blur(7px)}
.history-v6029-follow-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.history-v6029-follow-button:hover{color:#fff;background:#132b46}
.history-v6029-follow-button.active{background:#4567da;border-color:#7390ef;color:#fff;box-shadow:0 0 0 3px rgba(69,103,218,.16),0 6px 18px rgba(4,12,22,.28)}
.history-v6029-live-panel{height:430px;border:1px solid #20334c;border-radius:10px;background:#0b1828;padding:12px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.history-v6029-live-title{display:flex;flex-direction:column;gap:3px;padding:2px 2px 4px}.history-v6029-live-title strong{font-size:12px;color:#fff}.history-v6029-live-title span{font-size:8px;color:#7f93aa}
.history-v6029-live-card{border:1px solid #223750;border-radius:9px;background:#0e1d30;padding:13px 12px;display:flex;align-items:flex-start;gap:10px;min-height:82px}
.history-v6029-live-card .history-v6026-summary-icon{width:24px;height:24px;flex-basis:24px}.history-v6029-live-card .history-v6026-summary-icon svg{width:22px;height:22px}
.history-v6029-live-card>div{min-width:0;display:flex;flex-direction:column}.history-v6029-live-card small{font-size:9px;color:#94a6bb}.history-v6029-live-card strong{font-size:22px;line-height:1;color:#fff;margin-top:9px;white-space:nowrap}.history-v6029-live-card em{font-style:normal;font-size:8px;color:#71859d;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-v6029-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:auto}.history-v6029-mini-card{min-width:0;border:1px solid #223750;border-radius:8px;background:#0e1d30;padding:9px 7px;display:flex;flex-direction:column;align-items:center;text-align:center}.history-v6029-mini-card small{font-size:7px;color:#8297ae}.history-v6029-mini-card strong{font-size:13px;color:#fff;margin-top:5px}.history-v6029-mini-card em{font-style:normal;font-size:6px;color:#687d95;margin-top:3px}
/* шкала: компактнее, подписи событий не должны сталкиваться */
.history-v6026-timeline-card{padding:11px 14px 10px!important}.history-v6026-timeline-body{gap:8px!important}.history-v6026-driver-row{grid-template-columns:96px minmax(0,1fr)!important;gap:8px!important}.history-v6028-track-viewport{padding:18px 5px 16px!important}.history-v6026-track{height:96px!important}.history-v6026-line{top:35px!important}.history-v6026-playhead{bottom:2px!important}.history-v6026-playhead:after{top:37px!important}.history-v6026-event{width:60px!important;top:18px!important}.history-v6026-event-icon{width:29px!important;height:29px!important}.history-v6026-event-icon svg{width:15px!important;height:15px!important}.history-v6026-event-time{font-size:8px!important;bottom:38px!important}.history-v6026-event-label{font-size:7px!important;line-height:1!important;max-width:60px!important;margin-top:5px!important}.history-v6026-event-sub{font-size:6px!important;line-height:1!important}.history-v6026-event.lane-1,.history-v6026-event.lane-2{top:50px!important}.history-v6026-event.lane-1 .history-v6026-event-label,.history-v6026-event.lane-1 .history-v6026-event-sub,.history-v6026-event.lane-2 .history-v6026-event-label,.history-v6026-event.lane-2 .history-v6026-event-sub{display:none!important}.history-v6026-event.lane-1 .history-v6026-event-time{bottom:-15px!important}.history-v6026-event.lane-2 .history-v6026-event-time{display:none!important}
@media(max-width:1180px){.history-v6029-main-grid{grid-template-columns:minmax(0,1fr) 220px}.history-v6029-live-card strong{font-size:19px}.history-v6029-live-panel{padding:9px}.history-v6026-driver-row{grid-template-columns:82px minmax(0,1fr)!important}}
@media(max-width:900px){.history-v6029-main-grid{grid-template-columns:1fr}.history-v6029-live-panel{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.history-v6029-live-title{grid-column:1/-1}.history-v6029-mini-grid{grid-column:1/-1}.history-v6029-main-grid .history-v6026-map-card{height:390px!important;min-height:390px!important}}

/* ===== v6.0.31: жесткий черный кант машин на Яндекс.Карте ===== */
.prosystem-yandex-vehicle-outline{
    position:absolute;
    inset:-2px;
    display:block;
    background:#050505;
    -webkit-mask-image:var(--vehicle-mask);
    mask-image:var(--vehicle-mask);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
    transform:scale(1.10);
    transform-origin:50% 50%;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.72));
    z-index:0;
}
.prosystem-yandex-vehicle-mask{z-index:1;}

/* Переключатель диапазона истории доступен Администратору/Диспетчеру */
.history-v6031-range-toggle{
    height:36px;padding:0 12px;border:1px solid #2a4364;border-radius:8px;
    background:#102238;color:#c9d8ea;font:700 12px/1 "Segoe UI",Arial,sans-serif;cursor:pointer;
}
.history-v6031-range-toggle:hover{border-color:#4f6fde;color:#fff}
.history-v6031-range-toggle.active{background:#4567da;border-color:#6886ef;color:#fff}
.history-v6031-range-toggle[hidden]{display:none!important}


/* ===== v6.0.31 revised — wide map + one shared history timeline ===== */
.history-v6031-wide-map-grid{display:block;width:100%;min-width:0}
.history-v6031-wide-map-grid .history-v6026-map-card{height:470px!important;min-height:470px!important;width:100%}
/* Старый правый блок статистики в Истории больше не используется. */
.history-v6029-live-panel{display:none!important}

/* Одна общая шкала — без колонки с ФИО водителя. */
.history-v6026-timeline-card{padding:12px 16px 10px!important}
.history-v6026-timeline-body{display:block!important;overflow:hidden!important;padding:0!important}
.history-v6031-shared-timeline{width:100%;min-width:0}
.history-v6031-shared-viewport{width:100%!important;padding:22px 8px 24px!important;overflow-x:auto;overflow-y:hidden}
.history-v6031-shared-track{height:112px!important;min-width:100%;margin:0!important}
.history-v6031-shared-track .history-v6026-line{top:40px!important;height:4px!important;background:var(--driver-color)!important;border-radius:99px}
.history-v6031-shared-track .history-v6026-playhead{top:0!important;bottom:2px!important}
.history-v6031-shared-track .history-v6026-playhead:after{top:42px!important}
.history-v6031-shared-track .history-v6026-event{top:23px!important;width:68px!important}
.history-v6031-shared-track .history-v6026-event-time{bottom:41px!important;font-size:9px!important}
.history-v6031-shared-track .history-v6026-event-icon{width:32px!important;height:32px!important}
.history-v6031-shared-track .history-v6026-event-icon svg{width:17px!important;height:17px!important}
.history-v6031-shared-track .history-v6026-event-label{max-width:68px!important;font-size:8px!important;line-height:1.05!important;margin-top:6px!important}
.history-v6031-shared-track .history-v6026-event-sub{font-size:7px!important;line-height:1.05!important}
/* близкие события разводим ниже общей линии; подписи на нижних рядах скрываем, оставляя иконку и время */
.history-v6031-shared-track .history-v6026-event.lane-1{top:61px!important}
.history-v6031-shared-track .history-v6026-event.lane-1 .history-v6026-event-time{bottom:-17px!important}
.history-v6031-shared-track .history-v6026-event.lane-1 .history-v6026-event-label,
.history-v6031-shared-track .history-v6026-event.lane-1 .history-v6026-event-sub{display:none!important}
.history-v6031-shared-track .history-v6026-event.lane-2{top:61px!important;transform:translateX(-82%)!important}
.history-v6031-shared-track .history-v6026-event.lane-2 .history-v6026-event-time,
.history-v6031-shared-track .history-v6026-event.lane-2 .history-v6026-event-label,
.history-v6031-shared-track .history-v6026-event.lane-2 .history-v6026-event-sub{display:none!important}
.history-v6031-shared-track .history-v6026-event.lane-3{top:61px!important;transform:translateX(-18%)!important}
.history-v6031-shared-track .history-v6026-event.lane-3 .history-v6026-event-time,
.history-v6031-shared-track .history-v6026-event.lane-3 .history-v6026-event-label,
.history-v6031-shared-track .history-v6026-event.lane-3 .history-v6026-event-sub{display:none!important}
@media(max-width:900px){.history-v6031-wide-map-grid .history-v6026-map-card{height:410px!important;min-height:410px!important}.history-v6031-shared-track{height:106px!important}}


/* ===== v6.0.32 — History viewport fit, scrolling, task markers ===== */
/* История должна прокручиваться внутри рабочей области даже на desktop / AnyDesk / небольшом окне. */
body[data-current-page="history"] .workspace{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}
body[data-current-page="history"] #page-history{
    height:auto!important;
    min-height:100%!important;
    overflow:visible!important;
}
body[data-current-page="history"] .history-v6026{
    min-height:0;
    padding-bottom:26px!important;
}

/* Компактнее верхняя часть и карта: на 768–900 px по высоте шкала остаётся доступна без обрезания,
   а при ещё меньшем окне появляется обычная вертикальная прокрутка. */
body[data-current-page="history"] .history-v6026-toolbar{gap:16px!important}
body[data-current-page="history"] .history-v6026-date-control,
body[data-current-page="history"] .history-v6026-today{height:46px!important}
body[data-current-page="history"] .history-v6031-wide-map-grid .history-v6026-map-card{
    height:clamp(330px,46vh,430px)!important;
    min-height:330px!important;
}
body[data-current-page="history"] .history-v6026-timeline-card{margin-bottom:8px}

/* Выполненная задача в Истории = точный визуальный язык основной карты:
   круг цвета водителя + зелёная галочка + шильдик клиента + hover. */
.history-task-map-marker.task-map-marker.completed .task-map-marker-symbol{
    color:#4ade80!important;
    font-size:18px!important;
    font-weight:950;
    text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.history-task-map-marker .task-map-client-label{
    pointer-events:auto!important;
    cursor:pointer!important;
}
.history-task-map-marker:hover .task-map-client-label{opacity:1!important}
.history-task-balloon .task-balloon-row p{white-space:normal}

/* На самой шкале выполненная задача тоже получает зелёную галочку,
   а фон круга остаётся цветом водителя. */
.history-v6026-event-icon.task{background:var(--driver-color)!important}
.history-v6026-event-icon.task svg{stroke:#4ade80!important;stroke-width:2.7!important}

/* Общая шкала чуть компактнее по высоте, но использует всю ширину карточки. */
.history-v6031-shared-viewport{padding:20px 5px 18px!important}
.history-v6031-shared-track{height:104px!important}
.history-v6031-shared-track .history-v6026-line{top:38px!important}
.history-v6031-shared-track .history-v6026-playhead:after{top:40px!important}
.history-v6031-shared-track .history-v6026-event{top:21px!important}
.history-v6031-shared-track .history-v6026-event.lane-1,
.history-v6031-shared-track .history-v6026-event.lane-2,
.history-v6031-shared-track .history-v6026-event.lane-3{top:57px!important}

@media (max-height:820px) and (min-width:901px){
    body[data-current-page="history"] .workspace{padding-top:14px!important;padding-bottom:14px!important}
    body[data-current-page="history"] .history-v6031-wide-map-grid .history-v6026-map-card{height:350px!important;min-height:350px!important}
    body[data-current-page="history"] .history-v6026{gap:10px!important}
}
@media (max-height:720px) and (min-width:901px){
    body[data-current-page="history"] .history-v6031-wide-map-grid .history-v6026-map-card{height:315px!important;min-height:315px!important}
}


/* ===== v6.0.33 — History: adaptive timeline + real task completion time ===== */
/* На масштабе x1 шкала всегда укладывается в доступную ширину и НЕ показывает горизонтальный бегунок. */
body[data-current-page="history"] .history-v6031-shared-viewport{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    padding-left:6px!important;
    padding-right:6px!important;
}
body[data-current-page="history"] .history-v6031-shared-viewport.is-zoomed{
    overflow-x:auto!important;
    scrollbar-width:thin;
    scrollbar-color:#53667b transparent;
}
body[data-current-page="history"] .history-v6031-shared-viewport:not(.is-zoomed)::-webkit-scrollbar{
    display:none!important;
    height:0!important;
}
body[data-current-page="history"] .history-v6031-shared-track{
    box-sizing:border-box!important;
    min-width:100%!important;
    max-width:none!important;
}

/* Событие "задача выполнена" не показывается заранее. Оно появляется на шкале только
   когда курсор дошёл до реального completed_at задачи. */
body[data-current-page="history"] .history-v6026-event.future-task{
    visibility:hidden!important;
    pointer-events:none!important;
}

/* Карточка задачи: предыдущий общий history-override делал текст тёмным на тёмном фоне.
   Возвращаем читаемость полностью в стиле карточки основной Карты. */
body[data-current-page="history"] .history-task-balloon.task-balloon,
body[data-current-page="history"] .history-task-balloon.task-balloon *{
    text-shadow:none!important;
}
body[data-current-page="history"] .history-task-balloon.task-balloon{
    color:#edf1ff!important;
    background:#171d32!important;
}
body[data-current-page="history"] .history-task-balloon .task-balloon-header strong,
body[data-current-page="history"] .history-task-balloon .task-balloon-row b,
body[data-current-page="history"] .history-task-balloon .task-balloon-row p{
    color:#edf1ff!important;
}
body[data-current-page="history"] .history-task-balloon .task-balloon-row span{
    color:#8f99bc!important;
}

/* Адаптивность: карточка шкалы использует ровно ширину контента, без искусственного min-width. */
body[data-current-page="history"] .history-v6026-timeline-card,
body[data-current-page="history"] .history-v6026-timeline-body,
body[data-current-page="history"] .history-v6031-shared-timeline{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}
\n\n/* v6.0.33 hotfix: повторная кликабельность задачи.\n   Сам DOM шильдика не перехватывает событие; hit-area задаётся iconShape Placemark. */\nbody[data-current-page="history"] .history-task-map-marker,\nbody[data-current-page="history"] .history-task-map-marker .task-map-marker-symbol,\nbody[data-current-page="history"] .history-task-map-marker .task-map-client-label{\n    pointer-events:none!important;\n}\nbody[data-current-page="history"] .history-task-map-marker .task-map-client-label{\n    cursor:pointer!important;\n}\n

/* ===== v6.0.34 — History tasks: pending -> completed by actual time ===== */
/* Задачи больше не исчезают до completed_at. Они всегда видимы. */
body[data-current-page="history"] .history-v6026-event.future-task{
    visibility:visible!important;
    pointer-events:auto!important;
}

/* Иконка задачи на шкале: до выполнения — белый "лист" в круге цвета водителя. */
body[data-current-page="history"] .history-v6026-event.task-pending .history-v6026-event-icon.task{
    background:var(--driver-color)!important;
    border-color:rgba(255,255,255,.95)!important;
}
body[data-current-page="history"] .history-v6026-event.task-pending .history-v6026-event-icon.task > svg{
    display:block!important;
    stroke:#fff!important;
    opacity:.96!important;
}
body[data-current-page="history"] .history-v6026-event.task-pending .history-task-check-svg{
    display:none!important;
}

/* После реального completed_at тот же кружок остаётся цвета водителя,
   но внутри появляется зелёная галочка. */
body[data-current-page="history"] .history-v6026-event.task-done .history-v6026-event-icon.task > svg{
    display:none!important;
}
body[data-current-page="history"] .history-v6026-event.task-done .history-task-check-svg{
    display:grid!important;
    place-items:center;
}
body[data-current-page="history"] .history-v6026-event.task-done .history-task-check-svg svg{
    display:block!important;
    width:17px!important;
    height:17px!important;
    stroke:#4ade80!important;
    stroke-width:2.8!important;
}

/* Карта: pending и completed используют ОДИН цвет круга — цвет водителя. */
body[data-current-page="history"] .history-task-map-marker.task-map-marker.pending,
body[data-current-page="history"] .history-task-map-marker.task-map-marker.completed{
    background:var(--task-driver-color)!important;
    border:2px solid #fff!important;
}
body[data-current-page="history"] .history-task-map-marker.task-map-marker.pending .task-map-marker-symbol{
    color:#fff!important;
    font-size:14px!important;
    font-weight:800!important;
}
body[data-current-page="history"] .history-task-map-marker.task-map-marker.completed .task-map-marker-symbol{
    color:#4ade80!important;
    font-size:22px!important;
    font-weight:950!important;
}
body[data-current-page="history"] .history-task-map-marker.task-map-marker.pending .task-map-client-label{
    border-color:color-mix(in srgb,var(--task-driver-color) 68%,#fff)!important;
}


/* v7.2.0 — buffered live playback + compact speedometer */
.follow-speedometer{
    position:absolute;
    right:18px;
    bottom:18px;
    z-index:48;
    width:196px;
    height:196px;
    pointer-events:none;
    filter:drop-shadow(0 12px 26px rgba(0,0,0,.38));
}
.follow-speedometer[hidden]{display:none!important}
.follow-speedometer-dial{
    position:relative;
    width:100%;
    height:100%;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 56%,rgba(4,20,39,.97) 0 45%,rgba(4,17,32,.98) 46% 61%,rgba(13,51,82,.98) 62% 64%,rgba(3,12,24,.98) 65% 100%);
    border:2px solid rgba(78,215,255,.82);
    box-shadow:inset 0 0 18px rgba(35,200,255,.3),0 0 16px rgba(23,165,255,.23);
}
.follow-speedometer-dial:before{
    content:"";
    position:absolute;inset:10px;border-radius:50%;
    background:repeating-conic-gradient(from -132deg,rgba(83,221,255,.94) 0 1.1deg,transparent 1.1deg 8.8deg);
    -webkit-mask:radial-gradient(circle,transparent 0 70%,#000 71% 76%,transparent 77%);
    mask:radial-gradient(circle,transparent 0 70%,#000 71% 76%,transparent 77%);
}
.follow-speedometer-scale span{
    position:absolute;left:50%;top:50%;
    width:28px;margin-left:-14px;margin-top:-8px;
    transform:rotate(var(--a)) translateY(-69px) rotate(calc(0deg - var(--a)));
    transform-origin:14px 8px;
    text-align:center;color:#61dcff;font:700 9px/1 "Segoe UI",sans-serif;
    text-shadow:0 0 7px rgba(66,211,255,.55);
}
.follow-speedometer-needle{
    position:absolute;left:50%;top:50%;
    width:4px;height:66px;border-radius:4px;
    background:linear-gradient(#8cf3ff,#48c9ff);
    transform-origin:50% 62px;
    transform:translateX(-50%) rotate(-132deg);
    box-shadow:0 0 8px rgba(69,209,255,.85);
    transition:transform .18s linear;
}
.follow-speedometer-hub{
    position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
    transform:translate(-50%,-50%);
    background:#d9fbff;border:4px solid #145c84;box-shadow:0 0 9px rgba(56,202,255,.8);
}
.follow-speedometer-digital{
    position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;color:#e8fbff;
}
.follow-speedometer-digital strong{font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.follow-speedometer-digital span{font-size:9px;color:#78cce8;margin-top:2px}
.follow-speedometer-trip{
    position:absolute;left:50%;bottom:23px;transform:translateX(-50%);
    min-width:105px;padding:5px 8px;border-radius:7px;
    background:#8ce8f3;color:#06263a;text-align:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.follow-speedometer-trip small{display:block;font-size:7px;font-weight:800;letter-spacing:.05em}
.follow-speedometer-trip strong{display:block;font:800 12px/1.2 "Consolas","Segoe UI",sans-serif;margin-top:2px}
@media(max-width:900px){
    .follow-speedometer{width:158px;height:158px;right:10px;bottom:12px}
    .follow-speedometer-scale span{transform:rotate(var(--a)) translateY(-55px) rotate(calc(0deg - var(--a)));font-size:7px}
    .follow-speedometer-needle{height:53px;transform-origin:50% 49px}
    .follow-speedometer-digital strong{font-size:22px}
    .follow-speedometer-trip{bottom:17px;min-width:88px;padding:4px 6px}
}

/* История: линия и события имеют визуальный воздух по краям */
.history-v6031-shared-track{padding-left:0!important;padding-right:0!important}
.history-v6031-shared-track .history-v6026-line{left:3.5%!important;right:3.5%!important}
.history-v6031-shared-track .history-v6026-playhead{transform:translateX(-50%)}
.history-v6031-shared-track .history-v6026-event{max-width:72px}

/* Статистика v7.2.0 — без технической детализации, компактная таблица */
.statistics-details-compact{
    padding:0!important;
    margin-top:14px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:14px;
    background:#0b1a2d;
    overflow:hidden;
}
.statistics-details-compact .statistics-summary-strip{padding:12px 14px 0;margin-bottom:10px}
.statistics-details-compact .statistics-table-wrap{border:0;border-radius:0}
.statistics-details-compact .statistics-table{min-width:760px}
#page-statistics .statistics-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){#page-statistics .statistics-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#page-statistics .statistics-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v7.2.0 — после удаления технической детализации отдаём место карте */
#page-statistics .statistics-route-map-wrap{height:430px;min-height:360px}
@media(max-width:1150px){#page-statistics .statistics-route-map-wrap{height:380px}}
@media(max-width:760px){#page-statistics .statistics-route-map-wrap{height:320px;min-height:280px}}


/* v7.2.0 — ДЕМО-панель перенесена в боковую панель карты, чтобы не перекрывать спидометр */
.demo-sidebar-section[hidden]{display:none!important}
body[data-current-page="map"] .demo-sidebar-section{padding:14px 16px 18px}
body[data-current-page="map"] .map-sidebar .demo-drive-panel{
    position:static; top:auto; right:auto; left:auto; z-index:auto; width:100%; box-sizing:border-box;
    margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none;
}
body[data-current-page="map"] .map-sidebar .demo-drive-head{margin-bottom:8px}
body[data-current-page="map"] .map-sidebar .demo-drive-head strong{font-size:14px}
body[data-current-page="map"] .map-sidebar .demo-field{margin-top:8px}
body[data-current-page="map"] .map-sidebar .demo-field select,
body[data-current-page="map"] .map-sidebar .demo-field input{min-height:32px}
body[data-current-page="map"] .map-sidebar .demo-actions{gap:6px;margin-top:9px}
body[data-current-page="map"] .map-sidebar .demo-actions button{min-height:32px;font-size:12px}
body[data-current-page="map"] .map-sidebar .demo-metrics{grid-template-columns:1fr;gap:5px}
body[data-current-page="map"] .map-sidebar .demo-metrics span{padding:6px 8px}
body[data-current-page="map"] .map-sidebar .demo-hint{font-size:10px;line-height:1.3}


/* =========================================================
   v7.2.0 — clean map mode, daily driver summary, redesigned gauge
   ========================================================= */

/* Основное левое меню можно полностью убрать, чтобы карта заняла экран. */
body[data-current-page="map"] .application{
    transition:grid-template-columns .24s ease;
}
body[data-current-page="map"].map-main-sidebar-collapsed .application{
    grid-template-columns:0 minmax(0,1fr)!important;
}
body[data-current-page="map"] .sidebar{
    transition:transform .24s ease,opacity .18s ease;
}
body[data-current-page="map"].map-main-sidebar-collapsed .sidebar{
    transform:translateX(-100%);
    opacity:0;
    pointer-events:none;
}
.main-sidebar-toggle{
    display:none;
}
body[data-current-page="map"] .main-sidebar-toggle{
    position:fixed;
    z-index:180;
    top:14px;
    left:270px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(96,165,250,.38);
    border-radius:10px;
    background:rgba(5,17,31,.92);
    color:#dbeafe;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    cursor:pointer;
    transition:left .24s ease,background .16s ease,transform .16s ease;
    backdrop-filter:blur(12px);
}
body[data-current-page="map"] .main-sidebar-toggle:hover{
    background:#12305a;
    transform:translateY(-1px);
}
body[data-current-page="map"] .main-sidebar-toggle span{
    font-size:27px;
    line-height:1;
    transform:translateY(-1px);
}
body[data-current-page="map"].map-main-sidebar-collapsed .main-sidebar-toggle{
    left:12px;
}
@media(max-width:760px){
    body[data-current-page="map"] .main-sidebar-toggle{left:12px;top:10px}
}

/* В обычном режиме панель карты — рабочая сводка по каждому водителю за сегодня. */
.map-daily-summary-section[hidden]{display:none!important}
.map-driver-daily-summary{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:12px;
}
.map-driver-summary-card{
    --summary-driver-color:#2563EB;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:11px 12px;
    border:1px solid rgba(148,163,184,.18);
    border-left:3px solid var(--summary-driver-color);
    border-radius:11px;
    background:rgba(13,29,48,.82);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.map-driver-summary-card:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--summary-driver-color) 62%,rgba(148,163,184,.25));
    background:#132640;
}
.map-driver-summary-title{
    min-width:0;
    display:grid;
    grid-template-columns:9px minmax(0,1fr) auto;
    gap:7px;
    align-items:center;
}
.map-driver-summary-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--summary-driver-color);
    box-shadow:0 0 9px color-mix(in srgb,var(--summary-driver-color) 65%,transparent);
}
.map-driver-summary-title strong{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:13px;color:#f8fafc;
}
.map-driver-summary-title em{
    font-style:normal;font-size:9px;color:#94a3b8;white-space:nowrap;
}
.map-driver-summary-title em.online{color:#4ade80}
.map-driver-summary-title em.unknown{color:#fbbf24}
.map-driver-summary-title em.offline{color:#fb7185}
.map-driver-summary-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}
.map-driver-summary-grid>span{
    min-width:0;
    padding:7px 8px;
    border:1px solid rgba(148,163,184,.13);
    border-radius:8px;
    background:rgba(4,14,26,.42);
}
.map-driver-summary-grid small{
    display:block;color:#7890ad;font-size:9px;margin-bottom:3px;
}
.map-driver-summary-grid b{
    display:block;color:#eef6ff;font-size:12px;font-variant-numeric:tabular-nums;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.map-driver-summary-empty{
    padding:18px 10px;
    border:1px dashed rgba(148,163,184,.22);
    border-radius:10px;
    color:#8fa0b5;
    text-align:center;
    font-size:11px;
}
.map-driver-summary-empty.error{color:#fca5a5}

/* Новый спидометр: красная стрелка в верхней части, цифровые данные ниже и не перекрываются. */
.follow-speedometer{
    width:206px;
    height:206px;
    right:18px;
    bottom:18px;
}
.follow-speedometer-dial{
    overflow:hidden;
    border:2px solid rgba(46,188,255,.95);
    background:
        radial-gradient(circle at 50% 43%,rgba(11,18,27,.98) 0 24%,rgba(5,12,21,.99) 25% 58%,rgba(9,29,47,.99) 59% 65%,rgba(2,8,16,.99) 66% 100%);
    box-shadow:
        inset 0 0 22px rgba(28,174,255,.28),
        inset 0 0 3px rgba(255,255,255,.28),
        0 0 20px rgba(14,148,255,.34);
}
.follow-speedometer-dial:before{
    background:repeating-conic-gradient(from -132deg,#f3f8ff 0 1deg,transparent 1deg 7.25deg);
    -webkit-mask:radial-gradient(circle,transparent 0 71%,#000 72% 76%,transparent 77%);
    mask:radial-gradient(circle,transparent 0 71%,#000 72% 76%,transparent 77%);
    opacity:.95;
}
.follow-speedometer-scale span{
    color:#eef8ff;
    font-size:9px;
    font-weight:800;
    text-shadow:0 0 7px rgba(52,185,255,.5);
    transform:rotate(var(--a)) translateY(-73px) rotate(calc(0deg - var(--a)));
}
.follow-speedometer-units{
    position:absolute;
    left:50%;
    top:24%;
    transform:translateX(-50%);
    color:#c9d5e3;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}
.follow-speedometer-needle{
    left:50%;
    top:48%;
    width:5px;
    height:68px;
    border-radius:6px 6px 2px 2px;
    background:linear-gradient(180deg,#ff4338 0%,#ef1f1f 66%,#8b1111 100%);
    transform-origin:50% 64px;
    box-shadow:0 0 9px rgba(255,44,44,.55);
    transition:transform .22s cubic-bezier(.22,.74,.28,1);
}
.follow-speedometer-hub{
    top:48%;
    width:17px;height:17px;
    background:#d61f1f;
    border:4px solid #741010;
    box-shadow:0 0 9px rgba(255,42,42,.48);
}
.follow-speedometer-digital{
    top:63%;
    min-width:82px;
    padding:4px 8px 5px;
    border-radius:8px;
    background:rgba(3,10,18,.88);
    box-shadow:inset 0 0 0 1px rgba(99,172,219,.13);
}
.follow-speedometer-digital strong{
    font-family:"Consolas","Segoe UI",sans-serif;
    font-size:31px;
    font-weight:900;
    line-height:.95;
    color:#f5fbff;
    text-shadow:0 0 8px rgba(105,207,255,.25);
}
.follow-speedometer-digital span{
    margin-top:3px;
    color:#79aaca;
    font-size:8px;
    text-transform:uppercase;
}
.follow-speedometer-trip{
    bottom:15px;
    min-width:112px;
    padding:5px 9px 6px;
    border-radius:7px;
    background:#75e6ff;
    color:#052235;
    box-shadow:0 0 10px rgba(55,205,255,.22),inset 0 0 0 1px rgba(255,255,255,.5);
}
.follow-speedometer-trip small{font-size:7px;letter-spacing:.06em}
.follow-speedometer-trip strong{font-size:12px;margin-top:2px}

@media(max-width:900px){
    .follow-speedometer{width:168px;height:168px}
    .follow-speedometer-scale span{transform:rotate(var(--a)) translateY(-59px) rotate(calc(0deg - var(--a)));font-size:7px}
    .follow-speedometer-needle{height:54px;transform-origin:50% 50px}
    .follow-speedometer-digital strong{font-size:24px}
    .follow-speedometer-trip{bottom:12px;min-width:94px}
}

/* v7.2.0 — vehicle identity + corrected premium speedometer */
.vehicle-plate{display:inline-flex;align-items:stretch;height:28px;border:2px solid #111;border-radius:5px;background:#fff;color:#090909;box-shadow:0 1px 3px rgba(0,0,0,.25);font-family:Arial,"Segoe UI",sans-serif;font-weight:800;line-height:1;overflow:hidden;white-space:nowrap}
.vehicle-plate-main{display:flex;align-items:center;gap:2px;padding:2px 7px 1px;font-size:16px;letter-spacing:.02em}
.vehicle-plate-main b{font-size:20px;font-weight:800;letter-spacing:.03em}
.vehicle-plate-region{min-width:43px;border-left:2px solid #111;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 4px 0;font-size:14px}
.vehicle-plate-region small{display:flex;align-items:center;gap:3px;font-size:7px;font-weight:700;margin-top:1px}
.vehicle-plate-region i{display:inline-block;width:13px;height:8px;background:linear-gradient(#fff 0 33%,#1458b0 33% 66%,#e32636 66%);border:1px solid #888}
.vehicle-plate.invalid{padding:5px 8px;border-color:#c2410c;color:#9a3412;font-size:12px}
.vehicle-plate-small{transform:scale(.88);transform-origin:left center}
.vehicle-plate-tiny{height:20px;border-width:1px;border-radius:4px}.vehicle-plate-tiny .vehicle-plate-main{font-size:10px;padding:1px 4px}.vehicle-plate-tiny .vehicle-plate-main b{font-size:12px}.vehicle-plate-tiny .vehicle-plate-region{min-width:31px;border-left-width:1px;font-size:9px;padding:0 2px}.vehicle-plate-tiny .vehicle-plate-region small{font-size:5px;gap:1px}.vehicle-plate-tiny .vehicle-plate-region i{width:9px;height:5px}
.vehicle-plate-preview{min-height:30px;margin-top:8px;display:flex;align-items:center}
.vehicle-brand-input-row{display:flex;align-items:center;gap:10px}.vehicle-brand-input-row input{flex:1;min-width:0}
.vehicle-brand-input-logo{width:46px;height:42px;border:1px solid rgba(148,163,184,.2);border-radius:9px;background:#08192a;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.driver-brand-logo-preview,.driver-brand-logo,.driver-info-brand-logo{max-width:100%;max-height:100%;object-fit:contain}
.driver-brand-logo-preview{width:38px;height:34px}.driver-brand-logo{width:38px;height:30px}.driver-info-brand-logo{width:48px;height:40px;object-fit:contain}
.vehicle-brand-fallback{align-items:center;justify-content:center;border-radius:8px;background:#183450;color:#d7ebff;font-weight:900;font-size:11px}
.driver-vehicle-meta{display:flex;align-items:center;gap:8px;margin-top:6px}.driver-vehicle-meta>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.driver-vehicle-meta small{color:#91a9bf!important;font-size:10px}
.driver-info-vehicle{display:flex;align-items:center;gap:10px;padding:9px 0 10px;margin-bottom:4px;border-bottom:1px solid rgba(148,163,184,.16)}.driver-info-vehicle>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.driver-info-vehicle small{font-size:11px;color:#8fa7bd}
.driver-sidebar-plate{display:block;margin-top:3px;height:20px}

/* Стрелка вращается вокруг реального центра и никогда не прячется за цифровым дисплеем. */
.follow-speedometer-dial:before{background:repeating-conic-gradient(from 135deg,#f3f8ff 0 1deg,transparent 1deg 7.4deg)}
.follow-speedometer-needle{left:50%;top:43%;width:70px;height:5px;border-radius:5px;background:linear-gradient(90deg,#8b1111 0%,#ee1f1f 28%,#ff4b3e 100%);transform-origin:0 50%;box-shadow:0 0 10px rgba(255,40,40,.65);transition:transform .18s cubic-bezier(.22,.74,.28,1);z-index:6}
.follow-speedometer-needle:after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);border-left:10px solid #ff3c32;border-top:5px solid transparent;border-bottom:5px solid transparent}
.follow-speedometer-hub{left:50%;top:43%;transform:translate(-50%,-50%);z-index:8}
.follow-speedometer-units{top:23%}
.follow-speedometer-digital{top:58%;z-index:9}
.follow-speedometer-trip{bottom:13px;z-index:10}
@media(max-width:900px){.follow-speedometer-needle{width:56px;height:4px}.follow-speedometer-digital{top:57%}}

/* v7.3.0 — vehicle photos only in the secondary map panel + readable vehicle identity */
.map-driver-summary-vehicle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:8px 0 9px;
    min-height:66px;
}
.map-driver-summary-vehicle-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
}
.map-driver-summary-vehicle-text small{
    color:#a9bdd0;
    font-size:10px;
    line-height:1.25;
    text-align:left;
}
.map-driver-summary-vehicle-photo{
    width:112px;
    height:66px;
    object-fit:contain;
    object-position:center;
    flex:0 0 112px;
    filter:drop-shadow(0 6px 7px rgba(0,0,0,.38));
}
.vehicle-plate-summary{height:27px}
.driver-vehicle-meta .vehicle-plate-small{
    transform:none;
    height:25px;
    box-shadow:0 1px 5px rgba(0,0,0,.38);
}
.driver-vehicle-meta .vehicle-plate-small .vehicle-plate-main{font-size:13px;padding:2px 6px}
.driver-vehicle-meta .vehicle-plate-small .vehicle-plate-main b{font-size:17px}
.driver-vehicle-meta .vehicle-plate-small .vehicle-plate-region{min-width:38px;font-size:12px}
.driver-info-vehicle{
    background:rgba(6,18,31,.42);
    border:1px solid rgba(89,151,205,.18);
    border-radius:10px;
    padding:10px;
    margin:4px 0 10px;
}
.driver-info-vehicle .vehicle-plate-balloon{
    height:30px;
    box-shadow:0 2px 8px rgba(0,0,0,.38);
}
.driver-info-vehicle small{color:#c0d2e2;font-size:11px;font-weight:700}

/* Speedometer closely follows the approved reference: the red needle orbits the digital center circle. */
.follow-speedometer{
    width:216px;
    height:216px;
}
.follow-speedometer-dial{
    border:3px solid #168cff;
    background:
      radial-gradient(circle at center,#101a29 0 25%,#05090f 26% 61%,#07111d 62% 70%,#01050a 71% 100%);
    box-shadow:
      inset 0 0 0 3px rgba(249,54,38,.92),
      inset 0 0 0 7px rgba(22,140,255,.62),
      inset 0 0 30px rgba(0,119,255,.25),
      0 0 20px rgba(0,118,255,.45);
}
.follow-speedometer-dial:before{
    background:repeating-conic-gradient(from 135deg,#e9f4ff 0 1.2deg,transparent 1.2deg 5.9deg);
    -webkit-mask:radial-gradient(circle,transparent 0 68%,#000 69% 76%,transparent 77%);
    mask:radial-gradient(circle,transparent 0 68%,#000 69% 76%,transparent 77%);
    opacity:.96;
}
.follow-speedometer-scale span{
    transform:rotate(var(--a)) translateY(-77px) rotate(calc(0deg - var(--a)));
    font-size:9px;
    color:#c8d8e8;
    text-shadow:0 0 5px rgba(57,164,255,.5);
}
.follow-speedometer-units{
    top:29%;
    font-size:8px;
    color:#d6e1eb;
    z-index:9;
}
.follow-speedometer-needle{
    left:50%;
    top:50%;
    width:91px;
    height:7px;
    margin:0;
    border-radius:7px;
    background:linear-gradient(90deg,transparent 0 42px,#c31c18 43px,#ff3128 68px,#ff725f 100%);
    transform-origin:0 50%;
    box-shadow:none;
    z-index:7;
    transition:transform .16s cubic-bezier(.22,.74,.28,1);
}
.follow-speedometer-needle:after{
    right:-4px;
    border-left-color:#ff4c3e;
    filter:drop-shadow(0 0 6px rgba(255,50,42,.8));
}
.follow-speedometer-hub{
    left:50%;
    top:50%;
    width:82px;
    height:82px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 45% 35%,#16243a 0,#09121e 62%,#03080e 100%);
    border:2px solid #096dcc;
    box-shadow:inset 0 0 16px rgba(14,130,255,.22),0 0 10px rgba(5,108,230,.42);
    z-index:10;
}
.follow-speedometer-digital{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    min-width:0;
    padding:0;
    background:transparent;
    box-shadow:none;
    z-index:11;
}
.follow-speedometer-digital strong{
    font-size:30px;
    line-height:1;
    color:#eef7ff;
    text-shadow:0 0 6px rgba(120,190,255,.35);
}
.follow-speedometer-digital span{
    display:block;
    margin-top:2px;
    font-size:8px;
    color:#d3e2ef;
}
.follow-speedometer-trip{
    bottom:15px;
    min-width:104px;
    padding:4px 8px 5px;
    border:0;
    border-radius:7px;
    background:rgba(4,12,20,.88);
    color:#d9ecfb;
    box-shadow:inset 0 0 0 1px rgba(35,136,220,.42);
    z-index:12;
}
.follow-speedometer-trip small{color:#6bc8ff}
.follow-speedometer-trip strong{color:#eef9ff}
@media(max-width:900px){
  .follow-speedometer{width:176px;height:176px}
  .follow-speedometer-scale span{transform:rotate(var(--a)) translateY(-62px) rotate(calc(0deg - var(--a)));font-size:7px}
  .follow-speedometer-needle{width:73px;height:6px;background:linear-gradient(90deg,transparent 0 34px,#c31c18 35px,#ff3128 56px,#ff725f 100%)}
  .follow-speedometer-hub{width:68px;height:68px}
  .follow-speedometer-digital strong{font-size:24px}
  .follow-speedometer-trip{bottom:10px;min-width:90px}
}


/* v7.4.0 — vehicle identity picker, adaptive popup and clean main sidebar */
.driver-sidebar-plate{display:none!important}
.vehicle-image-picker-preview{margin-top:9px;min-height:86px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:#08192a;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#7f96aa;font-size:12px}
.vehicle-image-picker-photo{display:block;width:min(270px,92%);height:82px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28))}
.driver-directory-vehicle .vehicle-plate,.driver-vehicle-meta .vehicle-plate{background:#fff!important;color:#080808!important;opacity:1!important;filter:none!important}
.driver-directory-vehicle .vehicle-plate *, .driver-vehicle-meta .vehicle-plate *{color:#080808!important;opacity:1!important}
.driver-info-card{width:min(520px,calc(100vw - 42px));max-width:520px;max-height:min(620px,calc(100vh - 120px));overflow:visible!important;box-sizing:border-box}
.driver-info-vehicle-rich{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:16px;padding:10px 0 12px}
.driver-info-vehicle-copy{display:flex;align-items:center;gap:10px;min-width:0}
.driver-info-vehicle-copy>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.driver-info-vehicle-photo{width:190px;height:112px;object-fit:contain;justify-self:end;filter:drop-shadow(0 10px 10px rgba(0,0,0,.34))}
.driver-info-card .vehicle-plate-balloon{height:32px;min-width:142px;transform:none!important}
.driver-info-card .vehicle-plate-balloon .vehicle-plate-main{font-size:15px;padding:3px 7px}.driver-info-card .vehicle-plate-balloon .vehicle-plate-main b{font-size:20px}.driver-info-card .vehicle-plate-balloon .vehicle-plate-region{min-width:41px;font-size:12px}
.driver-info-card .driver-info-row{min-height:32px}
@media (max-width:720px){.driver-info-card{width:min(390px,calc(100vw - 28px))}.driver-info-vehicle-rich{grid-template-columns:1fr 125px;gap:8px}.driver-info-vehicle-photo{width:125px;height:86px}.driver-info-card .vehicle-plate-balloon{min-width:120px}}

/* v7.4.3 — cumulative UI correction: approved vehicle cards, readable plates, gauge alignment */

/* License plates: force real black text on a white plate in every theme/state. */
.vehicle-plate,
.vehicle-plate *,
.driver-directory-vehicle .vehicle-plate,
.driver-directory-vehicle .vehicle-plate *,
.driver-vehicle-meta .vehicle-plate,
.driver-vehicle-meta .vehicle-plate * {
    color:#050505 !important;
    -webkit-text-fill-color:#050505 !important;
    text-shadow:none !important;
    opacity:1 !important;
    filter:none !important;
}
.vehicle-plate,
.vehicle-plate-main,
.vehicle-plate-region {
    background:#fff !important;
}
.vehicle-plate { border-color:#111 !important; }
.vehicle-plate-region { border-left-color:#111 !important; }
.vehicle-plate.invalid,
.vehicle-plate.invalid * { color:#8a250f !important; -webkit-text-fill-color:#8a250f !important; }

/* The permanent main left driver list stays clean: no plate, logo or vehicle photo. */
.driver-item .vehicle-plate,
.driver-item .driver-sidebar-plate,
.driver-item .driver-sidebar-vehicle-photo,
.driver-item .driver-vehicle-meta { display:none !important; }

/* Approved secondary panel card: status/header top, 4 KPIs in one row, vehicle identity bottom-left, photo bottom-right. */
.map-driver-summary-card{
    position:relative !important;
    display:grid !important;
    grid-template-areas:
        "title title"
        "stats stats"
        "vehicle vehicle" !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    padding:10px 11px !important;
    min-height:148px !important;
    overflow:hidden !important;
    text-align:left !important;
}
.map-driver-summary-title{grid-area:title !important;}
.map-driver-summary-grid{
    grid-area:stats !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
}
.map-driver-summary-grid>span{
    padding:2px 3px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    min-width:0 !important;
}
.map-driver-summary-grid small{
    font-size:8px !important;
    line-height:1.05 !important;
    margin:0 0 3px !important;
    color:#8195ad !important;
    white-space:nowrap !important;
}
.map-driver-summary-grid b{
    font-size:10px !important;
    line-height:1.05 !important;
    color:#f4f8fc !important;
    white-space:nowrap !important;
    overflow:visible !important;
}
.map-driver-summary-vehicle{
    grid-area:vehicle !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 112px !important;
    gap:8px !important;
    align-items:end !important;
    min-height:56px !important;
    margin:0 !important;
    overflow:hidden !important;
}
.map-driver-summary-vehicle-text{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:3px !important;
    z-index:2 !important;
}
.map-driver-summary-vehicle-text .vehicle-plate-summary{
    transform:scale(.76) !important;
    transform-origin:left bottom !important;
    margin-right:-24px !important;
}
.map-driver-summary-vehicle-text small{
    display:block !important;
    width:100% !important;
    font-size:8.5px !important;
    line-height:1.15 !important;
    color:#c0cfdd !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}
.map-driver-summary-vehicle-photo{
    display:block !important;
    position:static !important;
    width:112px !important;
    height:62px !important;
    max-width:112px !important;
    max-height:62px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    align-self:end !important;
    justify-self:end !important;
    margin:0 !important;
    transform:none !important;
    filter:drop-shadow(0 5px 6px rgba(0,0,0,.38)) !important;
    z-index:1 !important;
}

/* Approved map balloon: compact, no overlap; plate/model left, selected vehicle photo right. */
.driver-info-card{
    width:286px !important;
    max-width:min(286px,calc(100vw - 24px)) !important;
    padding:11px 12px 10px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}
.driver-info-card-header{margin-bottom:7px !important;}
.driver-info-vehicle-rich{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 105px !important;
    gap:7px !important;
    align-items:center !important;
    padding:5px 0 8px !important;
    margin:0 0 5px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
}
.driver-info-brand-logo{display:none !important;}
.driver-info-vehicle-copy{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:4px !important;
    overflow:visible !important;
}
.driver-info-vehicle-copy>div{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:4px !important;
}
.driver-info-card .vehicle-plate-balloon{
    transform:scale(.72) !important;
    transform-origin:left center !important;
    margin-right:-32px !important;
}
.driver-info-vehicle-copy small{
    display:block !important;
    width:100% !important;
    font-size:8.5px !important;
    line-height:1.18 !important;
    color:#c2d0de !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}
.driver-info-vehicle-photo{
    display:block !important;
    position:static !important;
    width:105px !important;
    height:72px !important;
    max-width:105px !important;
    object-fit:contain !important;
    object-position:center !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
    transform:none !important;
    filter:drop-shadow(0 6px 7px rgba(0,0,0,.42)) !important;
}
.driver-info-row{
    grid-template-columns:76px minmax(0,1fr) !important;
    gap:7px !important;
    min-height:25px !important;
    padding:4px 0 !important;
    font-size:9px !important;
}
.driver-info-row b{font-size:9px !important;}

/* Speedometer: labels and needle share exactly the same 135°..405° coordinate system. */
.follow-speedometer-scale{
    position:absolute !important;
    inset:0 !important;
    z-index:4 !important;
    pointer-events:none !important;
}
.follow-speedometer-scale span{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:26px !important;
    height:14px !important;
    margin:-7px 0 0 -13px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:rotate(var(--a)) translateX(78px) rotate(calc(0deg - var(--a))) !important;
    transform-origin:center !important;
    text-align:center !important;
    font-size:8px !important;
    line-height:1 !important;
}
.follow-speedometer-trip{
    left:50% !important;
    bottom:19px !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#dff5ff !important;
    text-shadow:0 1px 4px #000 !important;
    z-index:10 !important;
}
.follow-speedometer-trip small{font-size:6.5px !important;color:#6dd4ff !important;letter-spacing:.05em !important;}
.follow-speedometer-trip strong{font-size:10px !important;color:#fff !important;margin-top:1px !important;}
@media(max-width:900px){
    .follow-speedometer-scale span{
        transform:rotate(var(--a)) translateX(61px) rotate(calc(0deg - var(--a))) !important;
        font-size:7px !important;
    }
    .follow-speedometer-trip{bottom:15px !important;}
}

/* v7.4.3 — Yandex top-2 address candidates */
.task-address-candidates{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.task-address-candidate{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid #7b641d;border-radius:8px;background:#171f24;color:#fff}
.task-address-candidate-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.task-address-candidate-main strong{font-size:13px;line-height:1.3;color:#fff;word-break:break-word}
.task-address-candidate-main small{font-size:10px;color:#9fb0c2;font-variant-numeric:tabular-nums}
.task-address-candidate .secondary-button{flex:0 0 auto}
@media(max-width:780px){.task-address-candidate{align-items:stretch;flex-direction:column}.task-address-candidate .secondary-button{width:100%}}


/* v7.4.5 — task clear action + clean speedometer ring */
.tasks-toolbar-actions{display:flex;align-items:center;gap:8px}
.tasks-clear-button{height:34px;padding:0 11px;border:1px solid #7a3440;border-radius:8px;background:#2b151c;color:#ff9da8;font-size:10px;font-weight:900;letter-spacing:.04em;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.tasks-clear-button:hover{background:#3a1822;border-color:#b44b5c;transform:translateY(-1px)}
.tasks-clear-button:disabled{opacity:.55;cursor:default;transform:none}
/* Убираем тонкое красно-розовое кольцо. Синяя внешняя окантовка и белые деления остаются. */
.follow-speedometer-dial{box-shadow:inset 0 0 0 7px rgba(22,140,255,.62),inset 0 0 30px rgba(0,119,255,.25),0 0 20px rgba(0,118,255,.45)!important}
@media(max-width:780px){.tasks-toolbar{gap:10px}.tasks-toolbar-actions{gap:5px}.tasks-clear-button{padding:0 8px;font-size:9px}}


/* v7.5.1 — одноразовое серверное уведомление о проблемных адресах */
.task-attention-modal-v750{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:24px}
.task-attention-backdrop-v750{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(7px)}
.task-attention-card-v750{position:relative;width:min(620px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 36px));overflow:auto;border:1px solid rgba(96,165,250,.28);border-radius:22px;background:linear-gradient(180deg,rgba(15,23,42,.99),rgba(8,15,30,.99));box-shadow:0 30px 90px rgba(0,0,0,.52);padding:26px;color:#f8fafc}
.task-attention-close-v750{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;border-radius:12px;background:rgba(148,163,184,.10);color:#cbd5e1;font-size:25px;cursor:pointer}
.task-attention-icon-v750{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.35);color:#fbbf24;font-size:26px;font-weight:900;margin-bottom:16px}
.task-attention-copy-v750>span{font-size:11px;letter-spacing:.16em;font-weight:800;color:#fbbf24}.task-attention-copy-v750 h2{margin:6px 44px 6px 0;font-size:24px}.task-attention-copy-v750 p{margin:0 0 18px;color:#94a3b8;line-height:1.5}
.task-attention-list-v750{display:grid;gap:9px}.task-attention-item-v750{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name action" "address action" "driver action";gap:3px 14px;text-align:left;padding:13px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.14);background:rgba(30,41,59,.55);color:#f8fafc;cursor:pointer}.task-attention-item-v750:hover{border-color:rgba(96,165,250,.5);background:rgba(30,58,90,.52)}.task-attention-item-v750 strong{grid-area:name;font-size:14px}.task-attention-item-v750 span{grid-area:address;color:#cbd5e1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-attention-item-v750 small{grid-area:driver;color:#64748b}.task-attention-item-v750 b{grid-area:action;align-self:center;color:#60a5fa;font-size:12px}.task-attention-more-v750{text-align:center;color:#64748b;padding:5px}
.task-attention-actions-v750{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.task-attention-once-v750{display:block;margin-top:12px;color:#64748b;text-align:right;line-height:1.35}
@media(max-width:620px){.task-attention-card-v750{padding:20px}.task-attention-actions-v750{flex-direction:column-reverse}.task-attention-actions-v750 button{width:100%}.task-attention-item-v750{grid-template-columns:1fr;grid-template-areas:"name" "address" "driver" "action"}.task-attention-item-v750 b{margin-top:5px}}

/* v7.5.1 — пояснение к кандидатам Yandex Resolver v3 */
.task-address-candidate-note{margin-top:8px;color:#9fb1c5;font-size:11px;line-height:1.35}


/* v7.5.3 — visible vehicle brand badge in map driver card */
.driver-info-vehicle-rich{
    grid-template-columns:minmax(0,1fr) 42px 105px !important;
    gap:7px !important;
}
.driver-info-brand-logo-slot{
    width:40px !important;
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    justify-self:center !important;
    border:1px solid rgba(148,163,184,.22) !important;
    border-radius:10px !important;
    background:linear-gradient(180deg,rgba(20,43,65,.92),rgba(8,25,42,.96)) !important;
    box-shadow:0 5px 14px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}
.driver-info-brand-logo-slot .driver-info-brand-logo{
    display:block !important;
    width:31px !important;
    height:31px !important;
    max-width:31px !important;
    max-height:31px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) !important;
}
.driver-info-brand-logo-slot .vehicle-brand-fallback.driver-info-brand-logo{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    color:#dceafb !important;
    letter-spacing:.03em !important;
}
@media (max-width:720px){
    .driver-info-vehicle-rich{
        grid-template-columns:minmax(0,1fr) 36px 92px !important;
        gap:6px !important;
    }
    .driver-info-brand-logo-slot{width:34px !important;height:34px !important;border-radius:8px !important;}
    .driver-info-brand-logo-slot .driver-info-brand-logo{width:27px !important;height:27px !important;max-width:27px !important;max-height:27px !important;}
    .driver-info-vehicle-photo{width:92px !important;max-width:92px !important;height:68px !important;}
}

/* ===== v7.6.0 — speedometer live-speed smoothing ===== */
.follow-speedometer-needle{
    transition:transform .42s cubic-bezier(.2,.72,.25,1)!important;
    will-change:transform;
}

/* ===== v7.7.0 — speed badge above vehicle, manual task actions ===== */
.map-driver-name-label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.map-driver-speed-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:48px;height:22px;padding:0 7px;border-radius:8px;
    background:rgba(4,13,27,.94);border:1px solid color-mix(in srgb,var(--map-driver-color,#3b82f6) 65%,#fff 10%);
    color:#f8fbff;font:800 11px/1 "Segoe UI",sans-serif;font-variant-numeric:tabular-nums;
    box-shadow:0 4px 14px rgba(0,0,0,.38),0 0 10px color-mix(in srgb,var(--map-driver-color,#3b82f6) 22%,transparent);
    pointer-events:none;
}
.task-map-marker{cursor:grab}
.task-map-marker:active{cursor:grabbing}
.task-manual-complete-panel{
    display:flex;align-items:end;gap:10px;margin-top:12px;padding:12px;
    border:1px solid rgba(34,197,94,.30);border-radius:12px;background:rgba(20,83,45,.16)
}
.task-manual-complete-panel[hidden]{display:none!important}
.task-manual-complete-panel label{display:flex;flex-direction:column;gap:5px;flex:1;color:#94a3b8;font-size:11px}
.task-manual-complete-panel input{width:100%;background:#0b1729;border:1px solid rgba(148,163,184,.22);color:#f8fafc;border-radius:8px;padding:9px 10px}


/* ===== v7.7.1 — draggable tasks, always-visible speed badge, GPS fix points ===== */
/* На дальнем масштабе прячем имя и pin, но скорость над машиной оставляем всегда. */
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-name-label {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-name-main,
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-follow-pin {
    display: none !important;
}
body[data-current-page="map"] .map-driver-speed-badge {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 44px;
    height: 21px;
    padding: 0 7px;
    border-radius: 9px;
    transform: translate(-50%, -5px);
}

.live-gps-fix-point {
    position: relative;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: var(--gps-fix-opacity,1);
}
.live-gps-fix-point > span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gps-fix-color,#ef4444);
    border: 1.5px solid rgba(255,255,255,.92);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.live-gps-fix-point.is-pulsing::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 2px solid var(--gps-fix-color,#ef4444);
    opacity: .42;
    animation: liveGpsFixPulse 2.4s ease-out infinite;
}
@keyframes liveGpsFixPulse {
    0%, 28% { transform: scale(.75); opacity: .42; }
    72%, 100% { transform: scale(2.25); opacity: 0; }
}
.task-map-marker { cursor: grab !important; user-select: none; }
.task-map-marker:active { cursor: grabbing !important; }


/* API quota monitor */
.yandex-limit-progress span[data-level="warning"]{background:#f59e0b!important}.yandex-limit-progress span[data-level="critical"]{background:#ef4444!important}
.yandex-quota-overlay{position:fixed;inset:0;z-index:30000;background:rgba(2,8,20,.78);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px}.yandex-quota-modal{width:min(560px,calc(100vw - 32px));background:#0b1d31;border:1px solid #2b496a;border-radius:18px;padding:28px;color:#fff;box-shadow:0 30px 100px rgba(0,0,0,.55);text-align:center}.yandex-quota-modal.warning{border-color:#b7791f}.yandex-quota-modal.critical{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.16),0 30px 100px rgba(0,0,0,.6)}.yandex-quota-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:36px;font-weight:900;background:#f59e0b;color:#111827}.yandex-quota-modal.critical .yandex-quota-icon{background:#ef4444;color:#fff}.yandex-quota-modal h2{margin:0 0 12px;font-size:25px}.yandex-quota-modal p{color:#c9d7e8;font-size:16px}.yandex-quota-numbers{font-size:34px;font-weight:800;margin:18px 0 24px}.yandex-quota-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}


/* ===== v7.7.5 — visual regression fix ===== */
/* Имя водителя снова видно всегда; оно не зависит от масштаба карты. */
body[data-current-page="map"] .map-driver-name-label,
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-name-label,
body[data-current-page="map"][data-driver-name-zoom="show"] .map-driver-name-label {
    display: inline-flex !important;
    opacity: .94 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-name-main,
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-follow-pin {
    display: initial !important;
}
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-name-main { display:block !important; }
body[data-current-page="map"][data-driver-name-zoom="hide"] .map-driver-follow-pin { display:grid !important; }
/* Скорость над машиной удалена полностью. */
.map-driver-speed-badge,
body[data-current-page="map"] .map-driver-speed-badge { display:none !important; }
/* Предпросмотр режима GPS-точек в карточке водителя. */
.driver-preview-gps-pulse { display:inline-block; margin:0 3px; line-height:1; transform-origin:center; }
.driver-preview-gps-pulse.is-pulsing { animation:driverPreviewGpsPulse 1.8s ease-out infinite; }
@keyframes driverPreviewGpsPulse {
    0%,45% { transform:scale(1); opacity:.88; text-shadow:0 0 0 currentColor; }
    70% { transform:scale(1.45); opacity:1; text-shadow:0 0 9px currentColor; }
    100% { transform:scale(1); opacity:.88; text-shadow:0 0 0 currentColor; }
}


/* ===== v8.1.1 — driver label position hotfix ===== */
body[data-current-page="map"] .map-driver-name-label{
    bottom:52px !important;
}
body[data-current-page="map"] .map-driver-name-label::after{
    display:none !important;
    content:none !important;
}
body[data-current-page="map"] .map-driver-speed-badge{
    display:none !important;
}


/* ===== v8.1.1 — GLOBAL HISTORY + LIGHT GPS POINTS ===== */
.history-v6026-toolbar{
    align-items:flex-end;
    gap:14px;
    flex-wrap:nowrap;
}
.history-v6026-date-filter{ flex:0 0 auto; }
.history-top-metrics{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:repeat(5,minmax(132px,1fr));
    gap:9px;
    min-width:0;
}
.history-top-metric{
    min-width:0;
    min-height:72px;
    padding:10px 12px;
    border:1px solid rgba(116,139,190,.2);
    border-radius:13px;
    background:linear-gradient(180deg,rgba(18,27,48,.96),rgba(12,20,37,.96));
    box-shadow:0 10px 24px rgba(0,0,0,.16);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.history-top-metric span{font-size:11px;color:#8fa2c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-top-metric strong{margin-top:2px;font-size:18px;line-height:1.15;color:#f4f7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-top-metric small{margin-top:2px;font-size:9px;line-height:1.2;color:#667a9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-v6031-wide-map-grid{ margin-top:18px; }
@media(max-width:1450px){
  .history-v6026-toolbar{flex-wrap:wrap;align-items:end;}
  .history-top-metrics{order:3;flex-basis:100%;grid-template-columns:repeat(5,minmax(120px,1fr));}
}
@media(max-width:900px){.history-top-metrics{grid-template-columns:repeat(2,minmax(120px,1fr));}}
/* GPS хвост v8: только статичные точки, без линии/пульсации. */
.live-gps-fix-point{width:10px;height:10px;transform:translate(-5px,-5px);pointer-events:none;opacity:var(--gps-fix-opacity,1);}
.live-gps-fix-point span{display:block;width:7px;height:7px;border-radius:50%;background:var(--gps-fix-color,#ef4444);border:1px solid rgba(255,255,255,.88);box-shadow:0 1px 4px rgba(0,0,0,.38);}
.live-gps-fix-point.is-pulsing span,.live-gps-fix-point.is-pulsing{animation:none!important;}


/* ===== v8.1.1 — HISTORY / STATISTICS MULTI-DRIVER ===== */
.history-cursor-metrics-wrap{
    display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px;align-items:stretch;
    padding:10px 12px;margin-top:-2px;border:1px solid rgba(89,112,157,.18);border-radius:14px;
    background:rgba(7,17,31,.54);
}
.history-cursor-metrics-heading{display:flex;flex-direction:column;justify-content:center;padding:4px 8px;min-width:0}
.history-cursor-metrics-heading strong{font-size:13px;color:#dce8ff}.history-cursor-metrics-heading span{margin-top:5px;font-size:24px;font-weight:800;color:#fff;letter-spacing:.02em}
.history-cursor-metrics{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:8px;min-width:0}
.history-cursor-metric{min-width:0;min-height:62px;padding:9px 11px;border:1px solid rgba(83,111,163,.22);border-radius:11px;background:rgba(13,28,48,.78);display:flex;flex-direction:column;justify-content:center}
.history-cursor-metric span{font-size:9px;color:#8198bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-cursor-metric strong{margin-top:2px;font-size:17px;color:#f7f9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-cursor-metric small{margin-top:2px;font-size:8px;color:#617795;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-current-page="history"] .history-v6031-wide-map-grid{margin-top:10px}
@media(max-width:1250px){.history-cursor-metrics-wrap{grid-template-columns:1fr}.history-cursor-metrics-heading{flex-direction:row;align-items:center;justify-content:space-between}.history-cursor-metrics-heading span{margin:0;font-size:20px}}
@media(max-width:900px){.history-cursor-metrics{grid-template-columns:repeat(2,minmax(110px,1fr))}}

/* ===== v8.1.1 — HISTORY STATISTICS LAYOUT POLISH ===== */
body[data-current-page="history"] .history-v811-toolbar{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    margin:0 0 12px!important;
    padding:0!important;
}
body[data-current-page="history"] .history-v811-date-filter{
    margin:0 auto!important;
    align-items:center!important;
    text-align:center!important;
}
body[data-current-page="history"] .history-v811-date-filter>label{
    display:block!important;
    margin-bottom:6px!important;
    text-align:center!important;
    color:#dbe8ff!important;
    font-size:12px!important;
    font-weight:700!important;
    letter-spacing:.03em!important;
}
body[data-current-page="history"] .history-v811-date-filter .history-v6026-date-control{
    min-width:420px!important;
    max-width:520px!important;
    margin:0 auto!important;
}
body[data-current-page="history"] .history-metrics-stack{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    margin:0 0 14px!important;
}
body[data-current-page="history"] .history-metrics-section{
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:stretch!important;
    padding:10px!important;
    border:1px solid rgba(72,101,151,.20)!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,rgba(10,28,49,.78),rgba(7,22,39,.72))!important;
    box-shadow:0 8px 26px rgba(0,0,0,.12)!important;
}
body[data-current-page="history"] .history-metrics-section-title{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
    padding:6px 8px!important;
    color:#dbe8ff!important;
    font-size:13px!important;
    font-weight:800!important;
}
body[data-current-page="history"] .history-cursor-metrics-heading strong{
    font-size:13px!important;
    color:#dbe8ff!important;
}
body[data-current-page="history"] .history-cursor-metrics-heading span{
    margin-top:5px!important;
    color:#fff!important;
    font-size:24px!important;
    line-height:1!important;
    font-weight:900!important;
}
body[data-current-page="history"] .history-top-metrics,
body[data-current-page="history"] .history-cursor-metrics{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
    margin:0!important;
}
body[data-current-page="history"] .history-top-metric,
body[data-current-page="history"] .history-cursor-metric{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
    min-height:74px!important;
    padding:10px 11px!important;
    border:1px solid rgba(78,111,170,.26)!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,rgba(15,38,66,.96),rgba(10,27,48,.92))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 4px 16px rgba(0,0,0,.10)!important;
}
body[data-current-page="history"] .history-top-metric:hover,
body[data-current-page="history"] .history-cursor-metric:hover{
    border-color:rgba(89,132,215,.45)!important;
    transform:translateY(-1px)!important;
}
body[data-current-page="history"] .history-metric-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    height:42px!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,rgba(24,65,118,.86),rgba(15,48,89,.76))!important;
    color:#72a3ff!important;
    font-size:21px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:inset 0 0 0 1px rgba(105,157,255,.10)!important;
}
body[data-current-page="history"] .history-top-metric:nth-child(3) .history-metric-icon,
body[data-current-page="history"] .history-cursor-metric:nth-child(3) .history-metric-icon{color:#72d6a0!important;}
body[data-current-page="history"] .history-top-metric:nth-child(4) .history-metric-icon,
body[data-current-page="history"] .history-cursor-metric:nth-child(4) .history-metric-icon{color:#f2ad54!important;}
body[data-current-page="history"] .history-top-metric:nth-child(5) .history-metric-icon,
body[data-current-page="history"] .history-cursor-metric:nth-child(5) .history-metric-icon{color:#c69bff!important;}
body[data-current-page="history"] .history-metric-content{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
}
body[data-current-page="history"] .history-metric-content span{
    color:#8fa8cf!important;
    font-size:10px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
body[data-current-page="history"] .history-metric-content strong{
    margin-top:3px!important;
    color:#f7faff!important;
    font-size:18px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
body[data-current-page="history"] .history-metric-content small{
    margin-top:3px!important;
    color:#647c9f!important;
    font-size:8px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
body[data-current-page="history"] .history-cursor-metrics-wrap{
    margin:0!important;
}
body[data-current-page="history"] .history-v6031-wide-map-grid{
    margin-top:0!important;
}
@media(max-width:1300px){
    body[data-current-page="history"] .history-metrics-section{grid-template-columns:1fr!important;}
    body[data-current-page="history"] .history-metrics-section-title{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;padding:0 2px!important;}
    body[data-current-page="history"] .history-cursor-metrics-heading span{margin:0!important;font-size:20px!important;}
}
@media(max-width:1050px){
    body[data-current-page="history"] .history-top-metrics,
    body[data-current-page="history"] .history-cursor-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:640px){
    body[data-current-page="history"] .history-v811-date-filter .history-v6026-date-control{min-width:0!important;width:100%!important;}
    body[data-current-page="history"] .history-top-metrics,
    body[data-current-page="history"] .history-cursor-metrics{grid-template-columns:1fr!important;}
}


/* ===== HISTORY / STATISTICS FULL-HD COMPACT LAYOUT ===== */
body[data-current-page="history"] .history-v811-toolbar{
    margin:-4px 0 6px!important;
}
body[data-current-page="history"] .history-v811-date-filter>label{
    display:none!important;
}
body[data-current-page="history"] .history-v811-date-filter .history-v6026-date-control{
    min-width:390px!important;
    max-width:460px!important;
    height:40px!important;
}
body[data-current-page="history"] .history-v6026-date-control,
body[data-current-page="history"] .history-v6026-date-input-wrap,
body[data-current-page="history"] .history-v6026-icon-button{
    height:40px!important;
}
body[data-current-page="history"] .history-metrics-stack{
    gap:6px!important;
    margin:0 0 8px!important;
}
body[data-current-page="history"] .history-metrics-section{
    grid-template-columns:142px minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px 8px!important;
    border-radius:12px!important;
}
body[data-current-page="history"] .history-metrics-section-title{
    padding:3px 5px!important;
    font-size:12px!important;
}
body[data-current-page="history"] .history-cursor-metrics-heading span{
    margin-top:3px!important;
    font-size:21px!important;
}
body[data-current-page="history"] .history-top-metrics,
body[data-current-page="history"] .history-cursor-metrics{
    gap:7px!important;
}
body[data-current-page="history"] .history-top-metric,
body[data-current-page="history"] .history-cursor-metric{
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:8px!important;
    min-height:60px!important;
    padding:7px 9px!important;
    border-radius:10px!important;
}
body[data-current-page="history"] .history-metric-icon{
    width:36px!important;
    height:36px!important;
    border-radius:9px!important;
    font-size:18px!important;
}
body[data-current-page="history"] .history-metric-content span{font-size:9px!important}
body[data-current-page="history"] .history-metric-content strong{margin-top:2px!important;font-size:17px!important}
body[data-current-page="history"] .history-metric-content small{margin-top:2px!important;font-size:7px!important}
body[data-current-page="history"] .history-v6031-wide-map-grid{margin-top:0!important}
body[data-current-page="history"] .history-v6026-timeline-card{margin-top:8px!important}

/* Primary target: 1920×1080 and similar wide Full-HD workstations. */
@media (min-width:1400px) and (min-height:850px) and (max-height:1100px){
    body[data-current-page="history"] .workspace{
        padding-top:8px!important;
        padding-bottom:8px!important;
    }
    body[data-current-page="history"] .history-v6026{
        gap:7px!important;
        padding-bottom:8px!important;
    }
    body[data-current-page="history"] .history-v6031-wide-map-grid .history-v6026-map-card{
        height:clamp(300px,34vh,350px)!important;
        min-height:300px!important;
    }
    body[data-current-page="history"] #history-yandex-map{
        min-height:300px!important;
    }
    body[data-current-page="history"] .history-v6026-timeline-card{
        padding:9px 13px 7px!important;
        margin-bottom:2px!important;
    }
    body[data-current-page="history"] .history-v6026-card-title{
        margin-bottom:6px!important;
    }
    body[data-current-page="history"] .history-v6031-shared-viewport{
        padding:13px 4px 11px!important;
    }
    body[data-current-page="history"] .history-v6031-shared-track{
        height:88px!important;
    }
}