/* ==================== ОСНОВНЫЕ НАСТРОЙКИ ==================== */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --danger-gradient: linear-gradient(135deg, #667eea 0%, #9557A2 100%);
        --primary-color: #667eea;
        --secondary-color: #764ba2;
        --text-dark: #ffffff;
        --text-medium: #cccccc;
        --text-light: #aaaaaa;
        --bg-white: #1A1A1A;
        --bg-light: #2a2a2a;
        --bg-lighter: #2a2a2a;
        --border-color: #333333;
        --border-light: #444444;
        --success-color: #059669;
        --warning-color: #d97706;
        --danger-color: #dc3545;
        --info-color: #3b82f6;
        --shadow-sm: 0 2px 15px rgba(0,0,0,0.1);
        --shadow-md: 0 5px 20px rgba(0,0,0,0.05);
        --shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        background: var(--danger-gradient);
        min-height: 100vh;
        color: var(--text-dark);
        line-height: 1.6;
    }


    /* ==================== ОТКЛЮЧЕНИЕ ЗУМА НА МОБИЛЬНЫХ ==================== */

    @media (max-width: 1050px) {
        /* Отключаем зум для всех полей ввода */
        input[type="text"],
        input[type="number"],
        input[type="email"],
        input[type="tel"],
        input[type="search"],
        input[type="password"],
        textarea,
        select {
            font-size: 16px !important; /* Минимальный размер для предотвращения зума */
            -webkit-text-size-adjust: 100%;
            touch-action: manipulation;
        }

            /* Убираем стандартные контролы для number полей */
        input[type="number"] {
            -moz-appearance: textfield !important;
            appearance: textfield !important;
        }

        input[type="number"]::-webkit-outer-spin-button,
        input[number="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0 !important;
            display: none !important;
        }

        /* Специально для iOS */
        @supports (-webkit-touch-callout: none) {
            input[type="text"],
            input[type="number"],
            textarea,
            select {
                font-size: 16px !important;
            }
        }
        /* Специально для полей в мобильных фильтрах */
        .mobile-filter-content input[type="text"],
        .mobile-filter-content input[type="number"],
        .mobile-filter-content input[inputmode="decimal"],
        #mobileCostMin,
        #mobileCostMax,
        #mobileMileageMin,
        #mobileMileageMax,
        #mobileTonnageMin,
        #mobileTonnageMax {
            font-size: 16px !important;
        }

    }

    /* Стили для полей с inputmode decimal */
    input[inputmode="decimal"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    input[inputmode="decimal"]::-webkit-outer-spin-button,
    input[inputmode="decimal"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* ==================== АНИМАЦИИ ==================== */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes modalAppear {
        to { transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Анимация для грузовика на 404 и карте (перенесена из HTML) */
    @keyframes driveIn {
        0%   { left: -250px; }
        80%  { left: 40px; }
        100% { left: 40px; }
    }

    @keyframes blink {
        0%,100% { opacity: 1; box-shadow: 0 0 6px #f39c12; }
        50% { opacity: 0.2; box-shadow: none; }
    }

    @keyframes wheelSpinParking {
        0%   { transform: rotate(0deg); }
        80%  { transform: rotate(720deg); }
        100% { transform: rotate(720deg); }
    }

    @keyframes settle {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(2px); }
        100% { transform: translateY(1px); }
    }

    @keyframes truckDrive {
        0% { transform: translateX(-120%) scaleX(-1); }
        100% { transform: translateX(120%) scaleX(-1); }
    }

    @keyframes wheelSpin {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
    }

    @keyframes roadMove {
        0%   { transform: translateX(-50%); }
        100% { transform: translateX(0); }
    }

    @keyframes pulse {
        0%,100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

    @keyframes progressMove {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(250%); }
    }

    @keyframes truckDriveError {
        from { transform: translateX(-10px) scaleX(-1); }
        to { transform: translateX(10px) scaleX(-1); }
    }

    @keyframes beautifulModalFadeIn {
        from {
            opacity: 0;
            transform: translate(-50%, -48%) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes dropdown-spinner {
        to { transform: rotate(360deg); }
    }

    /* ==================== НАВИГАЦИЯ (base.html) ==================== */
    .navbar {
        background: var(--bg-white);
        box-shadow: var(--shadow-sm);
        position: sticky;
        top: 0;
        z-index: 2000;
    }

    .nav-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
    }

    .nav-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--text-dark);
        text-decoration: none;
    }

    .nav-brand i {
        font-size: 1.8rem;
        color: var(--primary-color);
    }

    .nav-menu {
        display: flex;
        list-style: none;
        gap: 2px;
        margin: 0;
        padding: 0;
    }

    .nav-menu a {
        color: var(--text-medium);
        text-decoration: none;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: var(--radius-sm);
        transition: all 0.3s ease;
        font-weight: 500;
        font-size: 0.95rem;
    }

    .nav-menu a:hover {
        background: var(--bg-light);
        color: var(--primary-color);
        transform: translateY(-2px);
    }

    .nav-menu a.active {
        background: var(--primary-gradient);
        color: var(--bg-white);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    /* Выпадающее меню пользователя (base.html) */
    .nav-item.dropdown {
        position: relative;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        min-width: 200px;
        background: var(--bg-white);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-sm);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    .dropdown-menu.show { /* Класс для отображения через JS */
        display: block;
    }
    .dropdown-item {
        display: block;
        padding: 10px 15px;
        color: var(--text-dark);
        text-decoration: none;
        transition: background 0.2s;
    }
    .dropdown-item:hover {
        background: var(--bg-light);
    }
    .dropdown-item i {
        width: 20px;
        margin-right: 8px;
        color: var(--text-medium);
    }
    .dropdown-divider {
        height: 1px;
        background: var(--border-light);
        margin: 5px 0;
    }

    /* ==================== ОСНОВНОЙ КОНТЕЙНЕР ==================== */
    .main-content {
        max-width: 2000px;
        margin: 20px auto;
        padding: 0 20px;
        min-height: calc(100vh - 130px);
    }

    /* ==================== КАРТОЧКИ (общие) ==================== */
    .container,
    .filters-card,
    .table-card,
    .register-card,
    .archive-header-card,
    .users-header-card,
    .profile-header-card,
    .profile-card,
    .info-card,
    .logs-card {
        background: var(--bg-white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border-color);
        padding: 20px;
        margin-bottom: 20px;
        animation: fadeIn 0.5s ease;
    }

    /* Специфичные отступы для разных карточек */
    .filters-card { padding: 16px 20px; }
    .register-card { padding: 12px 15px; }
    .archive-header-card,
    .users-header-card,
    .profile-header-card { padding: 16px 24px; }
    .info-card,
    .logs-card { padding: 20px; }

    /* ==================== ЗАГОЛОВКИ СТРАНИЦ ==================== */
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid var(--border-color);
    }

    .page-header h1 {
        color: var(--text-dark);
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        gap: 15px;
        font-weight: 700;
        margin: 0;
    }

    .page-header h1 i {
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.8rem;
    }

    /* Заголовок для архивов и юзеров */
    .archive-header-card h1,
    .users-header-card h1 {
        margin: 0;
        font-size: 1.4rem !important;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* ==================== КНОПКИ ==================== */
    .btn {
        padding: 12px 24px;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        font-family: inherit;
    }

    /* Кнопка "Новый маршрут" (index.html) */
    #newRouteBtn,
    .page-header .btn-primary {
        padding: 10px 20px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    }
    #newRouteBtn i,
    .page-header .btn-primary i {
        font-size: 18px !important;
    }

    .btn-primary {
        background: var(--primary-gradient);
        color: var(--bg-white);
        position: relative;
        overflow: hidden;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-secondary {
        background: #6c757d;
        color: var(--bg-white);
    }
    .btn-secondary:hover {
        background: #5a6268;
        transform: translateY(-1px);
    }

    .btn,
    .btn-secondary,
    .modal-close,
    .btn-primary {
        font-size: 14px !important;
    }

    .btn-outline {
        background: transparent;
        border: 2px solid var(--border-light);
        color: var(--text-medium);
    }
    .btn-outline:hover {
        background: var(--bg-light);
        border-color: var(--primary-color);
    }

    .btn-small {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 6px;
    }

    .btn-icon {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-medium);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-size: 16px;
    }
    .btn-icon:hover {
        background: var(--bg-light);
        transform: scale(1.1);
    }

    .btn-edit:hover { color: #28a745; background: rgba(40, 167, 69, 0.1); }
    .btn-copy:hover { color: #17a2b8; background: rgba(23, 162, 184, 0.1); }
    .btn-delete:hover,
    .btn-delete-permanent:hover { color: var(--danger-color); background: rgba(220, 53, 69, 0.1); }
    .btn-restore:hover i { color: #218838 !important; transform: scale(1.1); }
    .btn-delete-permanent:hover i { color: #c82333 !important; transform: scale(1.1); }

    .btn-add-item {
        background: transparent;
        border: none;
        color: var(--primary-color);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        padding: 8px 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
    }
    .btn-add-item:hover {
        color: var(--secondary-color);
        transform: translateX(4px);
    }

    /* Кнопки действий в таблицах пользователей и архива */
    .btn-edit-user i { color: #28a745; }
    .btn-toggle-user i.fa-ban { color: #dc3545; }
    .btn-toggle-user i.fa-check-circle { color: #059669; }

    /* ==================== ТАБЛИЦЫ ==================== */
    .table-responsive {
        overflow-x: auto;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        background: var(--bg-white);
        width: 100%;
    }

    /* Стилизация скроллбаров (горизонтальных и вертикальных) */
    .table-responsive,
    .modal-body,
    .autocomplete-list,
    .dropdown-options-list,
    .info-card,
    #logs-table td:nth-child(4),
    #logs-table td:nth-child(5) {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) var(--border-light);
    }

    .table-responsive::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar,
    .autocomplete-list::-webkit-scrollbar,
    .dropdown-options-list::-webkit-scrollbar,
    .info-card::-webkit-scrollbar,
    #logs-table td:nth-child(4)::-webkit-scrollbar,
    #logs-table td:nth-child(5)::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background: var(--border-light);
        border-radius: 4px;
    }
    .table-responsive::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb,
    .autocomplete-list::-webkit-scrollbar-thumb,
    .dropdown-options-list::-webkit-scrollbar-thumb,
    .info-card::-webkit-scrollbar-thumb,
    #logs-table td:nth-child(4)::-webkit-scrollbar-thumb,
    #logs-table td:nth-child(5)::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 4px;
    }
    .table-responsive::-webkit-scrollbar-thumb:hover,
    .modal-body::-webkit-scrollbar-thumb:hover,
    .autocomplete-list::-webkit-scrollbar-thumb:hover,
    .dropdown-options-list::-webkit-scrollbar-thumb:hover,
    .info-card::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }
    /* Убираем кнопки у скроллбаров */
    .table-responsive::-webkit-scrollbar-button,
    .modal-body::-webkit-scrollbar-button,
    .autocomplete-list::-webkit-scrollbar-button,
    .dropdown-options-list::-webkit-scrollbar-button {
        display: none;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        min-width: 1200px; /* Для главной таблицы маршрутов */
        table-layout: auto;
    }

    /* Для таблиц с меньшим количеством колонок (заказчики, водители, пользователи, архив) */
    .clients-table,
    .users-table,
    .archive-table {
        min-width: 100%; /* По умолчанию занимают всю ширину */
    }
    .clients-table { width: 950px; } /* Фикс. ширина из clients.html */
    .users-table { min-width: 1000px; }

    .data-table th {
        background: var(--bg-lighter);
        color: var(--text-dark);
        font-weight: 600;
        text-align: center;
        padding: 12px 8px;
        border-bottom: 2px solid var(--border-light);
        white-space: nowrap;
    }
    .data-table td {
        padding: 8px 6px;
        border-bottom: 1px solid var(--border-light);
        vertical-align: middle;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .data-table tr:last-child td { border-bottom: none; }
    .data-table tr:hover td { background: var(--bg-lighter); }

    /* ==================== НОВАЯ СТРУКТУРА ТАБЛИЦЫ ==================== */
    /*
    Колонки:
    1 - №
    2 - Дата
    3 - Юр лицо / Заказчик (colspan=2 в HTML, но в CSS это одна колонка)
    4 - Маршрут (colspan=2 в HTML, но в CSS это одна колонка)
    5 - Машина (colspan=3 в HTML, но в CSS это одна колонка)
    6 - Стоимость
    7 - ТТН (colspan=2 в HTML, но в CSS это одна колонка)
    8 - ЗП
    9 - Номенклатура
    10 - Примечание
    11 - Действия
    */

    /* Отключаем перенос текста для всей таблицы */
    .data-table,
    .data-table td,
    .data-table th {
        white-space: nowrap !important;
    }

    /* Фиксируем высоту всех ячеек */
    .data-table td {
        height: 30px; /* Фиксированная высота для всех ячеек */
        padding: 8px 6px;
        vertical-align: middle !important;
        line-height: 1.4;
    }

    /* Колонка № (1) */
    .data-table th:nth-child(1),
    .data-table td:nth-child(1) {
        min-width: 50px;
        text-align: center !important;
    }

    /* Колонка Дата (2) */
    .data-table th:nth-child(2),
    .data-table td:nth-child(2) {
        min-width: 90px;
        text-align: center !important;
    }

    /* Колонка Юр лицо / Заказчик (3) - объединенная */
    .data-table th:nth-child(3) {
        min-width: 170px;
        text-align: center !important;
    }

    .data-table td:nth-child(3) {
        min-width: 170px;
        text-align: left !important;
    }

    .data-table td:nth-child(4) {
        text-align: left !important;
        padding-left: 10px !important;
    }

    /* Колонка Маршрут (4) - объединенная */
    .data-table th:nth-child(4) {
        text-align: center !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* Заголовок столбца Машина (индекс 5) */
    .data-table th:nth-child(5) {
        text-align: center !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* Колонка Машина (5) - объединенная */
    .data-table th:nth-child(5),
    .data-table td:nth-child(5) {
        width: 360px; /* Базовая ширина, будет переопределяться через JS если нужно */
        min-width: 300px;
        max-width: 400px;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
    }

    /* Колонка Стоимость (6) */
    .data-table th:nth-child(6),
    .data-table td:nth-child(6) {
        min-width: 100px;
        text-align: center !important;
    }

    /* Колонка ТТН (7) - объединенная */
    .data-table th:nth-child(7),
    .data-table td:nth-child(7) {
        min-width: 140px;
        text-align: center !important;
    }

    /* Колонка ЗП (8) */
    .data-table th:nth-child(8),
    .data-table td:nth-child(8) {
        min-width: 100px;
        text-align: center !important;
    }

    /* Базовые стили для ячеек с кнопками */
    .data-table td:nth-child(6), /* Стоимость */
    .data-table td:nth-child(7), /* ТТН */
    .data-table td:nth-child(8) { /* ЗП */
        position: relative;
        padding: 4px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Колонка Номенклатура (9) */
    .data-table th:nth-child(9),
    .data-table td:nth-child(9) {
        min-width: 130px;
        text-align: center !important;
    }

    /* Колонка Примечание (10) */
    .data-table th:nth-child(10),
    .data-table td:nth-child(10) {
        min-width: 100px;
        text-align: center !important;
    }

    /* Колонка Действия (11) - ИСПРАВЛЕНО */
    .data-table th:nth-child(11),
    .data-table td:nth-child(11) {
        min-width: 130px;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .data-table td:nth-child(11) {
        padding: 4px 6px !important; /* Уменьшаем padding для действий */
    }

    /* Стили для кнопок действий - без flex, чтобы не ломать высоту */
    .data-table td:nth-child(11) .actions-cell {
        display: block !important;
        text-align: center;
        line-height: 1;
    }

    .data-table td:nth-child(11) .btn-icon {
        width: 32px;
        height: 32px;
        margin: 0 2px;
        display: inline-block;
        vertical-align: middle;
    }

    /* Стили для кнопки номенклатуры */
    .data-table td:nth-child(9) .btn-items {
        margin: 0 auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important;
        height: 32px; /* Фиксированная высота */
    }

    /* Стили для примечания */
    .data-table td:nth-child(10).note-cell {
        text-align: center !important;
    }

    .data-table td:nth-child(10) .note-btn {
        margin: 0 auto;
        white-space: nowrap !important;
        height: 32px; /* Фиксированная высота */
        display: inline-flex;
        align-items: center;
    }

    /* Стили для объединенных ячеек */
    .data-table td[colspan] {
        padding: 8px 6px !important;
        vertical-align: middle;
        height: 60px; /* Фиксированная высота */
    }

    /* Стили для точек маршрута */
    .route-point {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .route-point.start {
        background: rgba(5, 150, 105, 0.15);
        color: #059669;
    }

    .route-point.end {
        background: rgba(220, 38, 38, 0.15);
        color: #dc2626;
    }

    /* Разделительные линии */
    .divider-line {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 2px 0;
    }

    .machine-text-container .divider-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 2px 0;
    }

    .machine-row {
        height: 24px; /* Фиксированная высота для каждой строки */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Кружки зоны и тоннажа */
    .zone-circle,
    .tonnage-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--primary-gradient);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .zone-circle:hover,
    .tonnage-circle:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
    }

    .zone-circle.empty,
    .tonnage-circle.empty {
        background: rgba(102, 126, 234, 0.3);
    }



    .zone-oval:hover,
    .tonnage-oval:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
    }

    /* Пустой овал */
    .zone-oval.empty,
    .tonnage-oval.empty {
        background: rgba(102, 126, 234, 0.3);
        box-shadow: none;
    }

    .zone-oval.empty:hover,
    .tonnage-oval.empty:hover {
        background: rgba(102, 126, 234, 0.4);
    }

    /* Овал для зоны (обычный) */
    .zone-oval.zone {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    /* Овал для расстояния */
    .zone-oval.mileage {
        background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    }

    /* Овал для тоннажа */
    .tonnage-oval.tonnage {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
    }

    #tonnageInput {
        font-size: 16px;
        padding: 12px;
    }

    /* Прямоугольные кнопки */
    .cost-rectangle,
    .ttn-rectangle,
    .salary-rectangle {
        background: transparent;
        border: 1px solid transparent;
        padding: 8px 4px;
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        border-radius: 16px;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        height: 100%;
        min-height: 44px;
    }

    .cost-rectangle:hover,
    .ttn-rectangle:hover,
    .salary-rectangle:hover {
        background: rgba(102, 126, 234, 0.15);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(102, 126, 234, 0.3);
        box-shadow: 0 4px 12px -4px rgba(102, 126, 234, 0.3);
    }

    /* Стили для информации о платежах */
    .payment-info {
        font-size: 10px;
        transition: color 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .payment-info.paid {
        color: #10b981;
        font-weight: 600;
    }

    .payment-info.remaining {
        color: #f97316;
    }

    .payment-info.overpaid {
        color: #3b82f6;
    }

    /* При наведении на cost-rectangle */
    .cost-rectangle:hover .payment-info {
        filter: brightness(1.2);
    }

    /* Специфичные цвета для каждого типа */
    .cost-rectangle:hover {
        background: rgba(40, 167, 69, 0.15);
        border-color: rgba(40, 167, 69, 0.3);
        box-shadow: 0 4px 12px -4px rgba(40, 167, 69, 0.3);
    }

    .ttn-rectangle:hover {
        background: rgba(102, 126, 234, 0.15);
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 4px 12px -4px rgba(102, 126, 234, 0.3);
    }

    .salary-rectangle:hover {
        background: rgba(255, 193, 7, 0.15);
        border-color: rgba(255, 193, 7, 0.3);
        box-shadow: 0 4px 12px -4px rgba(255, 193, 7, 0.3);
    }

    .cost-rectangle:hover::after,
    .ttn-rectangle:hover::after,
    .salary-rectangle:hover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 70%);
        border-radius: 16px;
        opacity: 0.1;
        pointer-events: none;
        z-index: -1;
    }

    /* Текст внутри прямоугольников */
    .cost-rectangle div,
    .ttn-rectangle div,
    .salary-rectangle div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        text-align: center;
        line-height: 1.4;
    }

    /* Контейнер для двух строк в прямоугольниках */
    .ttn-rectangle div:first-child,
    .cost-rectangle div:first-child,
    .salary-rectangle div:first-child {
        margin-bottom: 2px;
    }

    /* Статусы ТТН внутри прямоугольника */
    .ttn-rectangle .ttn-status {
        display: inline;
        background: transparent;
        color: inherit; /* Наследуем цвет от родителя */
        padding: 0;
        border-radius: 0;
        min-width: auto;
        max-width: none;
    }

    .ttn-rectangle .ttn-status.paid {
        color: var(--success-color);
    }

    .ttn-rectangle .ttn-status.pending {
        color: var(--warning-color);
    }

    .ttn-rectangle .ttn-status.unpaid {
        color: #dc2626;
    }

    .ttn-rectangle .ttn-status::before,
    .ttn-rectangle .ttn-status::after {
        display: none;
        content: none;
    }

    /* ==================== ОБЩИЕ СТИЛИ ==================== */

    /* Выравнивание для таблицы заказчиков (clients.html) */
    .clients-table th:nth-child(1),
    .clients-table td:nth-child(1) { text-align: center !important; width: 50px; }
    .clients-table th:nth-child(2),
    .clients-table td:nth-child(2) { text-align: center !important; padding-left: 15px !important; width: 250px; }
    .clients-table th:nth-child(3),
    .clients-table td:nth-child(3),
    .clients-table th:nth-child(4),
    .clients-table td:nth-child(4),
    .clients-table th:nth-child(5),
    .clients-table td:nth-child(5) { text-align: center !important; width: 150px; }

    /* Выравнивание для таблицы пользователей (users.html) */
    .users-table th:nth-child(2),
    .users-table td:nth-child(2),
    .users-table th:nth-child(4),
    .users-table td:nth-child(4),
    .users-table th:nth-child(5),
    .users-table td:nth-child(5),
    .users-table th:nth-child(6),
    .users-table td:nth-child(6),
    .users-table th:nth-child(7),
    .users-table td:nth-child(7) { text-align: center !important; }
    .users-table td:nth-child(3) { text-align: left; }

    /* Выравнивание для таблицы архива (archive.html) */
    .data-table td:nth-child(11) { /* Ячейка "Удален" */
        padding: 8px 4px !important;
        line-height: 1.4;
    }
    .data-table td:nth-child(11) div:first-child {
        font-weight: 600;
        color: var(--danger-color);
        margin-bottom: 4px;
        font-size: 13px;
    }
    .data-table td:nth-child(11) div:last-child {
        font-size: 11px;
        color: var(--text-light);
    }

    /* Специальные стили для таблицы логов (order.html) */
    #logs-table { table-layout: fixed !important; width: 100% !important; }
    #logs-table th,
    #logs-table td { padding: 8px 6px !important; vertical-align: top !important; }
    #logs-table th:nth-child(1), #logs-table td:nth-child(1) {text-align: center !important; width: 180px !important; }
    #logs-table th:nth-child(2), #logs-table td:nth-child(2) {text-align: center !important;  width: 120px !important; }
    #logs-table th:nth-child(3), #logs-table td:nth-child(3) {text-align: center !important;  width: 120px !important; }
    #logs-table th:nth-child(4), #logs-table td:nth-child(4),
    #logs-table th:nth-child(5), #logs-table td:nth-child(5) {
        text-align: center !important;
        width: 200px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    @media (max-width: 1050px) {
        /* Кнопка стоимости */
        .cost-rectangle {
            background: rgba(40, 167, 69, 0.15) !important;
            border: 1px solid rgba(40, 167, 69, 0.3) !important;
            box-shadow: 0 4px 12px -4px rgba(40, 167, 69, 0.3) !important;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        /* Кнопка ТТН */
        .ttn-rectangle {
            background: rgba(102, 126, 234, 0.15) !important;
            border: 1px solid rgba(102, 126, 234, 0.3) !important;
            box-shadow: 0 4px 12px -4px rgba(102, 126, 234, 0.3) !important;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        /* Кнопка ЗП */
        .salary-rectangle {
            background: rgba(255, 193, 7, 0.15) !important;
            border: 1px solid rgba(255, 193, 7, 0.3) !important;
            box-shadow: 0 4px 12px -4px rgba(255, 193, 7, 0.3) !important;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        #logs-table { table-layout: fixed !important; width: 100% !important; }
        #logs-table th,
        #logs-table td { padding: 8px 6px !important; vertical-align: top !important; }
        #logs-table th:nth-child(1), #logs-table td:nth-child(1) {text-align: center !important; max-width: 110px !important; }
        #logs-table th:nth-child(2), #logs-table td:nth-child(2) {text-align: center !important;  max-width: 35px !important; }
        #logs-table th:nth-child(3), #logs-table td:nth-child(3) {text-align: center !important;  max-width: 40px !important; }
        #logs-table th:nth-child(4), #logs-table td:nth-child(4) {
            text-align: center !important;
            max-width: 400px !important;
            white-space: normal !important;
            word-wrap: break-word !important;
        }
        #logs-table th:nth-child(5), #logs-table td:nth-child(5) {
        text-align: center !important;
            max-width: 400px !important;
            white-space: normal !important;
            word-wrap: break-word !important;
        }

        .logs-container {
            width: 100vw !important;
            position: relative !important;
            left: 50% !important;
            right: 50% !important;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
        }
    }

    #logs-table td > div { display: flex !important; flex-direction: column !important; gap: 2px !important; width: 100% !important; }
    #logs-table td > div > div {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        border-bottom: 1px dashed var(--border-light) !important;
    }
    #logs-table td > div > div:last-child { border-bottom: none !important; }
    #logs-table td:nth-child(4), #logs-table td:nth-child(5) { max-height: 200px !important; overflow-y: auto !important; }

    /* ==================== КЛИКАБЕЛЬНЫЕ ЯЧЕЙКИ (ТАБЛИЦА МАРШРУТОВ) ==================== */
    .cost-cell, .fuel-cell, .fine-cell, .salary-cell {
        cursor: pointer;
        display: inline-block;
        width: auto;
        pointer-events: none;
        text-align: center;
    }
    .cost-value, .fuel-value, .fine-value, .salary-value {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        transition: all 0.3s;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        pointer-events: auto;
        background: transparent;
        line-height: 1.4;
        color: var(--text-dark);
        min-width: 70px;
        text-align: center;
    }
    .cost-value::before, .fuel-value::before, .fine-value::before, .salary-value::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: currentColor;
        opacity: 0;
        z-index: -1;
        border-radius: 20px;
        transition: opacity 0.2s;
    }
    .cost-value:hover::before, .fuel-value:hover::before,
    .fine-value:hover::before, .salary-value:hover::before { opacity: 0.1; }
    .cost-value:hover, .fuel-value:hover, .fine-value:hover, .salary-value:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    td:has(.cost-cell), td:has(.fuel-cell), td:has(.fine-cell), td:has(.salary-cell) {
        padding: 8px 5px;
        text-align: center;
    }

    /* ==================== СТАТУСЫ ТТН ==================== */
    .ttn-cell {
        cursor: pointer;
        display: inline-block;
        width: auto;
        max-width: 100%;
        pointer-events: none;
    }
    .ttn-cell .ttn-status { pointer-events: auto; }
    .ttn-status {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        min-width: 70px;
        transition: all 0.3s;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100px;
        background: transparent;
    }
    .ttn-status::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: currentColor;
        opacity: 0.15;
        border-radius: 20px;
        z-index: -1;
        pointer-events: none;
    }
    .ttn-status.paid { color: var(--success-color); }
    .ttn-status.pending { color: var(--warning-color); }
    .ttn-status.unpaid { color: #dc2626; }
    .ttn-status:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* Ссылки на неоплаченные/в ожидании (clients.html) */
    .unpaid-link, .pending-link {
        color: currentColor !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        transition: all 0.3s;
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        background: transparent !important;
        line-height: 1.4;
        min-width: 140px;
        text-align: center;
    }
    .unpaid-link { color: var(--danger-color) !important; }
    .pending-link { color: var(--warning-color) !important; }
    .unpaid-link::before, .pending-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: currentColor;
        opacity: 0;
        border-radius: 20px;
        z-index: -1;
        transition: opacity 0.2s;
    }
    .unpaid-link:hover::before, .pending-link:hover::before { opacity: 0.1; }
    .unpaid-link:hover, .pending-link:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
        text-decoration: none !important;
    }
    .pending-link:hover { box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2); }
    .unpaid-link span, .pending-link span {
        font-size: 11px;
        display: block;
        margin-top: 2px;
    }

    /* Ссылка на штрафы в таблице водителей (drivers.html) */
    .fine-link {
        color: var(--danger-color) !important;
        text-decoration: none !important;
        font-weight: 400 !important;
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        transition: all 0.3s;
        position: relative;
        background: transparent !important;
        line-height: 1.4;
        min-width: 70px;
        text-align: center;
    }
    .fine-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: currentColor;
        opacity: 0;
        border-radius: 20px;
        z-index: -1;
        transition: opacity 0.2s;
    }
    .fine-link:hover::before { opacity: 0.1; }
    .fine-link:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        text-decoration: none !important;
    }

    /* ==================== КНОПКИ В ТАБЛИЦАХ ==================== */
    .btn-items {
        background: var(--bg-lighter);
        border: 1px solid var(--border-light);
        padding: 6px 16px !important; /* Увеличиваем горизонтальные отступы */
        border-radius: 20px !important; /* Более скругленная */
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-medium);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 32px;
        width: auto !important; /* Автоматическая ширина */
        min-width: 80px; /* Минимальная ширина */
        max-width: 100%; /* Максимальная ширина - не больше родителя */
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        box-sizing: border-box;
    }

    .btn-items i {
        font-size: 13px;
        flex-shrink: 0;
    }

    .btn-items:hover i {
        color: white;
    }

    .btn-items:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    .note-btn {
        background: var(--bg-lighter);
        border: 1px solid var(--border-light);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-medium);
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .note-btn:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    .note-cell .empty { color: var(--text-light); font-style: italic; font-size: 12px; }

    /* Ссылки */
    .order-link, .client-link, .driver-link {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s;
    }
    .order-link:hover, .client-link:hover, .driver-link:hover {
        color: var(--secondary-color);
        text-decoration: underline;
    }

    /* ==================== ПАГИНАЦИЯ ==================== */
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 4px; /* Уменьшено */
        padding-top: 0;
        border-top: none;
    }
    .pagination-btn {
        padding: 10px 16px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        background: var(--bg-white);
        color: var(--info-color);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s;
        min-width: 40px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .pagination-btn:hover {
        background: var(--bg-light);
        border-color: var(--primary-color);
        transform: translateY(-1px);
    }
    .pagination-btn.active {
        background: var(--primary-color);
        color: var(--bg-white);
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    .pagination-info {
        margin-left: 20px;
        color: var(--text-light);
        font-size: 14px;
        font-weight: 500;
    }

    /* ==================== МОДАЛЬНЫЕ ОКНА ==================== */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(1px);
        z-index: 3000; /* Базовый z-index */
        display: none;
        pointer-events: auto; /* Всегда блокирует клики */
    }

    .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.95);
        background: var(--bg-white);
        border-radius: var(--radius-lg);
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        z-index: 3001;
        max-width: 90%;
        max-height: 90vh;
        overflow-y: hidden;
        animation: modalAppear 0.3s ease forwards;
    }
    .modal.small-modal { width: 500px; max-width: 90%; }
    .modal-header {
        padding: 16px 24px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-lighter);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }


    .modal-header h3 {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.2rem;
        font-weight: 600;
    }

    .modal-close {
        background: none;
        border: none;
        font-size: 24px; /* Увеличено */
        color: var(--text-light);
        cursor: pointer;
        transition: all 0.2s;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        line-height: 1;
    }

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

    .modal-body {
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 16px 24px;
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        background: var(--bg-lighter);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    /* Красивые модальные окна (index.html) */
    .beautiful-modal .modal-content {
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4) !important;
        border: none !important;
        background: #2a2a2a !important;
    }
    .beautiful-modal.items-modal .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        padding: 20px 24px !important;
        border-bottom: none !important;
    }
    .beautiful-modal.note-modal .modal-header {
        background: linear-gradient(135deg, #f97316 0%, #c2410c 100%) !important;
    }
    .beautiful-modal .modal-header h3 {
        margin: 0 !important;
        color: white !important;
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .beautiful-modal .modal-header h3 i { font-size: 1.3rem !important; }
    .beautiful-modal .modal-close { color: white !important; opacity: 0.8 !important; font-size: 16px !important; }
    .beautiful-modal .modal-close:hover {
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.1) !important;
    }
    .beautiful-modal .modal-body {
        padding: 24px !important;
        background: #1a1a1a !important;
        max-height: 70vh !important;
    }
    .beautiful-modal .items-list-container {
        background: #2a2a2a !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
        overflow: hidden !important;
    }
    .beautiful-modal .items-table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .beautiful-modal .items-table th {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
        color: #4a5568 !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        padding: 16px !important;
        text-align: left !important;
        border-bottom: 2px solid rgba(102, 126, 234, 0.3) !important;
    }
    .beautiful-modal .items-table td {
        padding: 14px 16px !important;
        border-bottom: 1px solid #eef1f5 !important;
        border-bottom-color: #333 !important;
        color: #e0e0e0 !important;
        font-size: 14px !important;
    }
    .beautiful-modal .items-table tr:last-child td { border-bottom: none !important; }
    .beautiful-modal .items-table tr:hover td { background: #f8fafc !important; }
    .beautiful-modal .items-table .total-row {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
        font-weight: 600 !important;
    }
    .beautiful-modal .note-content-container {
        background: #2A2A2A !important;
        border-radius: 16px !important;
        padding: 24px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        color: var(--text-dark) !important;
        border-left: 4px solid #f97316 !important;
        white-space: pre-wrap !important;
    }
    .beautiful-modal .btn-primary {
        border: none !important;
        padding: 10px 50px !important;
        border-radius: 30px !important;
        color: white !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    .beautiful-modal.items-modal .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; }
    .beautiful-modal.note-modal .btn-primary { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%) !important; }
    .beautiful-modal { animation: beautifulModalFadeIn 0.3s ease !important; }

    /* Модальные окна удаления */
    #deleteRouteModal .modal-header,
    #deleteItemModal .modal-header,
    #deleteDriverModal .modal-header,
    #deleteCarModal .modal-header,
    #deleteUserModal .modal-header,
    #deleteArchiveRouteModal .modal-header {
        background: var(--danger-color) !important;
        color: white !important;
    }

    #deleteRouteModal .modal-header {
        position: relative;
        text-align: center;
        padding: 15px;
    }

    #deleteRouteModal .modal-header h3,
    #deleteItemModal .modal-header h3,
    #deleteDriverModal .modal-header h3,
    #deleteCarModal .modal-header h3,
    #deleteUserModal .modal-header h3,
    #deleteArchiveRouteModal .modal-header h3 { color: white !important; }
    #deleteRouteModal .modal-close,
    #deleteItemModal .modal-close,
    #deleteDriverModal .modal-close,
    #deleteCarModal .modal-close,
    #deleteUserModal .modal-close,
    #deleteArchiveRouteModal .modal-close { color: white !important; }
    #deleteRouteModal .modal-close:hover,
    #deleteItemModal .modal-close:hover,
    #deleteDriverModal .modal-close:hover,
    #deleteCarModal .modal-close:hover,
    #deleteUserModal .modal-close:hover,
    #deleteArchiveRouteModal .modal-close:hover { background: rgba(255,255,255,0.2) !important; }
    #deleteRouteModal .modal-body,
    #deleteItemModal .modal-body,
    #deleteDriverModal .modal-body,
    #deleteCarModal .modal-body,
    #deleteUserModal .modal-body,
    #deleteArchiveRouteModal .modal-body { text-align: center; padding: 30px !important; }
    #deleteRouteModal .modal-footer,
    #deleteItemModal .modal-footer,
    #deleteDriverModal .modal-footer,
    #deleteCarModal .modal-footer,
    #deleteUserModal .modal-footer,
    #deleteArchiveRouteModal .modal-footer { justify-content: center !important; gap: 15px !important; }

    #deleteRouteModal .modal-header h3 {
        width: 100%;
        text-align: center;
    }

    #deleteRouteModal .modal-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #deleteRouteInfo {
        max-width: 100%;
        word-wrap: break-word;
    }

    #deleteRouteInfo div {
        line-height: 1.5;
    }

    /* ==================== ФОРМЫ ==================== */
    .form-group { margin-bottom: 12px; position: relative; }
    .form-group label {
        display: block;
        margin-bottom: 4px;
        font-weight: 500;
        color: var(--text-medium);
        font-size: 12px;
    }
    .form-control {
        width: 100%;
        padding: 8px 10px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 13px;
        transition: all 0.2s;
        background: var(--bg-white);
        color: var(--text-dark);
    }
    .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    .form-control::placeholder { color: var(--text-light); opacity: 0.7; }
    .form-grid { display: flex; flex-direction: column; gap: 8px; }

    /* Обязательные поля */
    .required-star { color: #dc3545; margin-left: 4px; font-size: 14px; }

    /* Поле ТТН в модальном окне */
    /* ==================== ПОЛЕ ВВОДА ТТН ==================== */
    .ttn-input {
        border-color: #dc2626 !important;
        transition: all 0.2s;
        padding-right: 50px !important;
    }

    .ttn-input.paid {
        border-color: var(--success-color) !important;
    }

    .ttn-input.pending {
        border-color: var(--warning-color) !important;
    }

    /* Кнопка открытия меню статуса */
    .ttn-status-button {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 36px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 2px solid var(--border-light);
        transition: all 0.2s;
        border-top-right-radius: var(--radius-sm);
        border-bottom-right-radius: var(--radius-sm);
    }

    .ttn-status-button:hover {
        background: var(--bg-lighter);
    }

    .ttn-status-button:hover i {
        color: var(--primary-color);
    }

    /* ==================== ВЫПАДАЮЩЕЕ МЕНЮ СТАТУСА ТТН ==================== */
    #ttnStatusDropdown {
        position: absolute;
        background: var(--bg-white);
        border: 2px solid var(--primary-color);
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        z-index: 10000;
        min-width: 160px;  /* Уменьшили с 200px */
        max-width: 180px;  /* Ограничили максимальную ширину */
        width: auto;
        overflow: hidden;
        animation: dropdownFadeIn 0.2s ease;
        padding: 4px 0;
    }

    /* Анимация появления */
    @keyframes dropdownFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Опции статуса */
    #ttnStatusDropdown .ttn-status-option {
        padding: 10px 12px;  /* Уменьшили паддинги */
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;  /* Уменьшили gap */
        transition: all 0.2s ease;
        border-bottom: 1px solid var(--border-light);
        font-size: 13px;  /* Уменьшили размер шрифта */
        font-weight: 500;
        white-space: nowrap;
        width: 100%;
        box-sizing: border-box;
    }

    #ttnStatusDropdown .ttn-status-option:last-child {
        border-bottom: none;
    }

    /* Эффект при наведении */
    #ttnStatusDropdown .ttn-status-option:hover {
        background: rgba(102, 126, 234, 0.05);
    }

    /* Активная опция */
    #ttnStatusDropdown .ttn-status-option.active {
        background: rgba(102, 126, 234, 0.1);
        font-weight: 600;
    }

    /* Индикаторы статуса (цветные кружки) */
    #ttnStatusDropdown .status-indicator {
        width: 14px;  /* Уменьшили */
        height: 14px; /* Уменьшили */
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
    }

    #ttnStatusDropdown .status-indicator.unpaid {
        background: #dc2626;
    }

    #ttnStatusDropdown .status-indicator.pending {
        background: #d97706;
    }

    #ttnStatusDropdown .status-indicator.paid {
        background: #059669;
    }

    /* Текст статуса */
    #ttnStatusDropdown .status-label {
        flex: 1;
        color: var(--text-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Иконка галочки */
    #ttnStatusDropdown .ttn-status-option i {
        font-size: 12px;  /* Уменьшили */
        opacity: 0;
        transition: opacity 0.2s ease;
        color: currentColor;
        flex-shrink: 0;
        width: 14px;      /* Фиксированная ширина */
        text-align: center;
    }

    #ttnStatusDropdown .ttn-status-option.active i {
        opacity: 1;
    }

    /* Цвета галочек для разных статусов */
    #ttnStatusDropdown .ttn-status-option[data-status="unpaid"] i {
        color: #dc2626;
    }

    #ttnStatusDropdown .ttn-status-option[data-status="pending"] i {
        color: #d97706;
    }

    #ttnStatusDropdown .ttn-status-option[data-status="paid"] i {
        color: #059669;
    }

    /* ==================== ОШИБКИ ТТН ==================== */
    .ttn-error-message {
        color: var(--danger-color) !important;
        font-size: 12px;
        margin-top: 5px;
        padding-left: 5px;
        animation: slideDown 0.3s ease;
    }

    .ttn-error-link,
    .ttn-search-link {
        color: var(--danger-color) !important;
        text-decoration: underline !important;
        cursor: pointer;
        margin-left: 3px;
    }

    .ttn-error-link:hover,
    .ttn-search-link:hover {
        text-decoration: underline !important;
        opacity: 0.9;
    }

    .is-invalid {
        border-color: var(--danger-color) !important;
    }

    .field-error-message {
        color: #dc3545;
        font-size: 12px;
        margin-top: 4px;
        animation: slideDown 0.3s ease;
    }

    .mobile-route-field .is-invalid {
        border-color: #dc3545 !important;
    }

    .has-error label {
        color: var(--danger-color) !important;
    }

    /* Номенклатура */
    #itemsContainer { margin-bottom: 4px; }
    .item-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 4px;
    }
    .item-input-group { position: relative; }
    .item-input-group:first-child { flex: 2; }
    .item-input-group:last-child { flex: 0.5; }
    .item-name, .item-quantity { width: 100%; }
    .remove-item-btn {
        background: transparent;
        border: none;
        color: var(--danger-color);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        border-radius: var(--radius-sm);
    }
    .remove-item-btn:hover:not(:disabled) {
        background: rgba(220, 53, 69, 0.1);
        transform: scale(1.1);
    }
    .remove-item-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .nomenclature-headers {
        display: flex;
        gap: 12px;
        margin-bottom: 8px;
        padding: 0 4px;
    }
    .nomenclature-headers div {
        font-size: 13px;
        color: var(--text-medium);
        font-weight: 500;
    }
    .nomenclature-headers div:first-child { flex: 2; }
    .nomenclature-headers div:nth-child(2) { flex: 0.5; }
    .nomenclature-headers div:last-child { width: 36px; }

    /* ==================== АВТОДОПОЛНЕНИЕ ==================== */
    .autocomplete-group { position: relative; }
    .autocomplete-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-top: none;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        max-height: 250px;
        overflow-y: auto;
        z-index: 2100;
        display: none;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .autocomplete-list.show { display: block !important; }
    .autocomplete-item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 13px;
        color: var(--text-dark);
        transition: background-color 0.2s;
        border-bottom: 1px solid var(--border-light);
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 36px;
    }
    .autocomplete-item:last-child { border-bottom: none; }
    .autocomplete-item:hover { background: var(--bg-lighter); }
    .autocomplete-item .delete-btn {
        color: var(--danger-color);
        opacity: 0;
        transition: opacity 0.2s;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 14px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .autocomplete-item:hover .delete-btn { opacity: 1; }
    .autocomplete-item .delete-btn:hover {
        background: rgba(220, 53, 69, 0.1);
        transform: scale(1.1);
    }
    .autocomplete-header {
        padding: 6px 12px;
        background: var(--bg-lighter);
        font-weight: 600;
        font-size: 11px;
        color: var(--text-medium);
        border-bottom: 1px solid var(--border-light);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-height: 28px;
        display: flex;
        align-items: center;
    }

    /* ==================== ФИЛЬТРЫ ==================== */
    /* Теги активных фильтров */
    .filter-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: var(--bg-lighter);
        border: 1px solid var(--border-light);
        border-radius: 30px;
        font-size: 13px;
        color: var(--text-dark);
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        margin: 0 !important;
    }
    .filter-tag:hover {
        background: var(--danger-color) !important;
        color: white;
        border-color: var(--danger-color) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220,53,69,0.2) !important;
    }
    .filter-tag i { display: none; } /* Крестик убираем, т.к. удаляем по клику на весь тег */

    /* Кнопка сброса всех фильтров */
    #resetAllFiltersBtn,
    #resetDriversFiltersBtn {
        background: rgba(220, 53, 69, 0.1) !important;
        border: 1px solid var(--danger-color) !important;
        color: white !important;
        border-radius: 30px;
        padding: 6px 14px;
        font-size: 13px;
        transition: all 0.2s !important;
        margin-right: 8px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        flex-shrink: 0;
    }
    #resetAllFiltersBtn:hover,
    #resetDriversFiltersBtn:hover {
        background: var(--danger-color) !important;
        color: white !important;
        border-color: var(--danger-color) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

    /* Выпадающие списки для фильтров (index.html) */
    .filter-dropdown-group { position: relative; margin-bottom: 15px; }
    .dropdown-select { position: relative; width: 100%; }
    .dropdown-selected {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.2s;
        min-height: 38px;
    }
    .dropdown-selected:hover {
        border-color: var(--primary-color);
        background: var(--bg-lighter);
    }
    .dropdown-selected span {
        color: var(--text-medium);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dropdown-selected i {
        color: var(--text-light);
        transition: transform 0.2s;
        font-size: 12px;
    }
    .dropdown-select.active .dropdown-selected i { transform: rotate(180deg); }
    .dropdown-options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
        background: var(--bg-white);
        border: 2px solid var(--primary-color);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        z-index: 1000;
        display: none;
        max-height: 350px;
        overflow: hidden;
    }
    .dropdown-select.active .dropdown-options { display: block; }
    .dropdown-search {
        position: relative;
        padding: 8px;
        border-bottom: 1px solid var(--border-light);
    }
    .dropdown-search i {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 13px;
    }
    .dropdown-search-input {
        width: 100%;
        padding: 6px 6px 6px 30px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 13px;
        background: var(--bg-white);
    }
    .dropdown-search-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }
    .dropdown-options-list {
        max-height: 200px;
        overflow-y: auto;
        padding: 8px 0;
        font-size: 13px;
    }

    .dropdown-option {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid var(--border-light);
        transition: background 0.2s;
    }

    .dropdown-option:hover { background: var(--bg-lighter); }
    .dropdown-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 12px;
        cursor: pointer;
        accent-color: var(--primary-color);
        pointer-events: auto;
    }
    .dropdown-option label {
        margin: 0;
        font-size: 13px;
        color: var(--text-dark);
        cursor: pointer;
        flex: 1;
    }
    .dropdown-actions {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-top: 1px solid var(--border-light);
        background: var(--bg-lighter);
    }
    .dropdown-loading {
        padding: 15px;
        text-align: center;
        color: #666;
        font-style: italic;
    }
    .dropdown-loading:after {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 8px;
        border: 2px solid #059669;
        border-top-color: transparent;
        border-radius: 50%;
        animation: dropdown-spinner 0.6s linear infinite;
        vertical-align: middle;
    }
    .dropdown-option.empty { color: #999; text-align: center; padding: 15px; font-style: italic; }

    /* Фильтры статусов на странице заказчиков (clients.html) */
    .filter-status-label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 6px 16px;
        border-radius: 30px;
        transition: all 0.2s ease !important;
        border: 1px solid transparent !important;
    }
    .filter-status-label.unpaid-filter { background: rgba(220, 53, 69, 0.1); }
    .filter-status-label.pending-filter { background: rgba(217, 119, 6, 0.1); }
    .filter-status-label:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .filter-status-label.unpaid-filter:hover {
        background: rgba(220, 53, 69, 0.2) !important;
        border-color: #dc3545 !important;
    }
    .filter-status-label.pending-filter:hover {
        background: rgba(217, 119, 6, 0.2) !important;
        border-color: #d97706 !important;
    }
    .filter-status-label.active {
        border-color: currentColor !important;
        box-shadow: 0 2px 8px currentColor;
    }
    .filter-status-label.unpaid-filter.active {
        background: #dc3545 !important;
    }
    .filter-status-label.pending-filter.active {
        background: #d97706 !important;
    }
    .filter-status-label.active span { color: white !important; }
    #filterUnpaid, #filterPending { margin: 0; }

    /* ==================== ПОИСК ==================== */
    .search-wrapper { display: flex; gap: 4px; flex: 1; min-width: 200px; }
    .search-container { position: relative; flex: 1; }
    .search-input {
        padding-right: 30px !important;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
        border-right: none !important;
        height: 36px;
        font-size: 13px !important;
    }
    .search-clear {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #999;
        display: none;
        font-size: 18px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;
        z-index: 10;
    }
    .search-clear:hover {
        color: var(--danger-color);
        background: rgba(0,0,0,0.05);
    }
    .search-btn {
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
        padding: 0 12px !important;
        height: 36px;
    }
    #globalSearch.loading {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" fill="none" stroke="%23667eea" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"/></circle></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
    }

    /* ==================== УВЕДОМЛЕНИЯ ==================== */
    #notification-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 200000;
        max-width: 400px;
    }
    .notification {
        padding: 16px 24px;
        border-radius: var(--radius-md);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        animation: slideInRight 0.3s ease;
        color: white;
    }
    .notification.success { background: var(--success-color); }
    .notification.error { background: #ef4444; }
    .notification.warning { background: var(--warning-color); }
    .notification.info { background: var(--info-color); }
    .notification-close {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 18px;
        line-height: 1;
        transition: background-color 0.2s;
    }
    .notification-close:hover { background: rgba(255,255,255,0.3); }

    /* ==================== ПЛАВАЮЩИЙ ЗАГОЛОВОК ==================== */
    .floating-header {
        position: fixed;
        top: 68px;
        left: 20px;
        right: 20px;
        background: transparent;
        z-index: 950;
        transform: translateY(-100%);
        transition: transform 0.2s ease, opacity 0.2s ease;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
    .floating-header.visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .floating-header-content {
        max-width: calc(2000px - 40px);
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        width: 100%;
        border-radius: 12px;
        background: var(--bg-lighter);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border: 1px solid var(--border-light);
        position: relative;
    }
    .floating-header-content::before,
    .floating-header-content::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        z-index: 2;
        pointer-events: none;
    }
    .floating-header-content::before {
        left: 0;
        background: linear-gradient(to right, var(--bg-lighter), transparent);
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .floating-header-content::after {
        right: 0;
        background: linear-gradient(to left, var(--bg-lighter), transparent);
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .floating-header-row {
        display: flex;
        width: 100%;
        padding: 8px 0;
        transform: translateX(0);
        will-change: transform;
        backface-visibility: hidden;
    }
    .floating-cell {
        flex-shrink: 0;
        flex-grow: 0;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-dark);
        text-align: center;
        white-space: nowrap;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-right: 1px solid rgba(0,0,0,0.05);
        transition: width 0.1s ease;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Индивидуальные ширины из index.html */
    .floating-cell:nth-child(1) { min-width: 50px; height: 40px; }   /* № */
    .floating-cell:nth-child(2) { min-width: 105px; height: 40px; }  /* Дата */
    .floating-cell:nth-child(3) { min-width: 240px; height: 40px; }  /* Юр лицо / Заказчик */
    .floating-cell:nth-child(4) { min-width: 350px; height: 40px; }  /* Маршрут */
    .floating-cell:nth-child(5) { min-width: 320px; height: 40px; }  /* Машина */
    .floating-cell:nth-child(6) { min-width: 100px; height: 40px; }  /* Стоимость */
    .floating-cell:nth-child(7) { min-width: 140px; height: 40px; }  /* ТТН */
    .floating-cell:nth-child(8) { min-width: 100px; height: 40px; }  /* ЗП */
    .floating-cell:nth-child(9) { min-width: 130px; height: 40px; }  /* Номенклатура */
    .floating-cell:nth-child(10) { min-width: 100px; height: 40px; } /* Примечание */
    .floating-cell:nth-child(11) { min-width: 130px; height: 40px; } /* Действия */


    .floating-cell:nth-child(4),
    .floating-cell:nth-child(5) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px;
    }

    /* Убираем фиксированную ширину, оставляем только минимальную */
    .floating-cell {
        flex-shrink: 0;
        flex-grow: 0;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-dark);
        text-align: center;
        white-space: nowrap;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-right: 1px solid rgba(0,0,0,0.05);
        transition: width 0.1s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto; /* Автоматическая ширина */
    }

    /* ==================== КАЛЕНДАРЬ FLATPICKR ==================== */
    .flatpickr-calendar {
        background: var(--bg-white) !important;
        border: 2px solid var(--border-light) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-lg) !important;
        font-family: inherit !important;
        margin-top: 5px;
        width: 350px !important;
        padding: 15px !important;
    }
    .flatpickr-months {
        background: var(--bg-lighter) !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
        padding: 5px !important;
        margin-bottom: 10px !important;
    }
    .flatpickr-month { color: var(--text-dark) !important; font-weight: 600 !important; font-size: 16px !important; height: 37px !important; }
    .flatpickr-current-month { padding: 0 !important; font-size: 16px !important; font-weight: 600 !important; }
    .flatpickr-monthDropdown-months {
        background: var(--bg-white) !important;
        border: 2px solid var(--border-light) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--text-dark) !important;
        font-weight: 500 !important;
        padding: 5px 10px !important;
        margin-right: 5px !important;
        cursor: pointer !important;
    }
    .flatpickr-monthDropdown-months:hover { border-color: var(--primary-color) !important; }
    .flatpickr-current-month input.cur-year {
        background: var(--bg-white) !important;
        border: 2px solid var(--border-light) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--text-dark) !important;
        font-weight: 500 !important;
        padding: 5px 9px !important;
        text-align: center !important;
        width: 65px !important;
    }
    .flatpickr-prev-month, .flatpickr-next-month { color: var(--text-medium) !important; fill: var(--text-medium) !important; padding: 5px !important; top: 15px !important; }
    .flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--primary-color) !important; fill: var(--primary-color) !important; }
    .flatpickr-weekdays { background: transparent !important; margin-bottom: 5px !important; }
    .flatpickr-weekday { color: var(--text-medium) !important; font-weight: 600 !important; font-size: 13px !important; }
    .flatpickr-day {
        color: var(--text-dark) !important;
        border-radius: var(--radius-sm) !important;
        font-size: 14px !important;
        line-height: 35px !important;
        margin: 2px !important;
        border: none !important;
        transition: all 0.2s ease !important;
    }
    .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
        background: var(--bg-lighter) !important;
        color: var(--primary-color) !important;
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }
    .flatpickr-day.today {
        background: var(--bg-lighter) !important;
        color: var(--primary-color) !important;
        font-weight: 700 !important;
        border: 2px solid var(--primary-color) !important;
    }
    .flatpickr-day.selected {
        background: var(--primary-color) !important;
        color: white !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3) !important;
    }
    .flatpickr-day.selected:hover { background: var(--secondary-color) !important; }
    .flatpickr-day.inRange { background: var(--bg-lighter) !important; color: var(--primary-color) !important; border-radius: 0 !important; }
    .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--primary-color) !important; color: white !important; }
    .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-light) !important; opacity: 0.5 !important; }
    .flatpickr-day.weekend { color: var(--danger-color) !important; }

    /* ==================== ВЫБОР МЕСЯЦА ==================== */
    .month-picker-dropdown { position: relative; }
    .month-picker-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 5px;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        z-index: 10000;
        width: 260px;
        padding: 15px;
    }
    .month-picker-menu.show { display: block !important; }
    .month-option {
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: all 0.2s;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-dark);
        background: var(--bg-lighter);
    }
    .month-option:hover {
        background: var(--primary-color);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }
    .month-nav-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px 10px;
        color: var(--primary-color);
        font-size: 16px;
        border-radius: var(--radius-sm);
        transition: all 0.2s;
    }
    .month-nav-btn:hover { background: var(--bg-lighter); }
    #currentYearDisplay { font-weight: 600; font-size: 16px; color: var(--text-dark); }

    /* ==================== ЭКСПОРТ ==================== */
    .export-dropdown { position: relative; display: inline-block; }
    .export-dropdown-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        margin-top: 5px !important;
        background: var(--bg-white) !important;
        border: 2px solid var(--border-light) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
        z-index: 9999 !important;
        min-width: 280px !important;
        max-width: 350px !important;
        overflow: hidden !important;
    }
    .export-header {
        margin-left: 10px;
        margin-bottom: 3px
    }
    .export-dropdown-menu.show { display: block !important; }
    .export-option {
        padding: 12px 16px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        transition: all 0.2s !important;
        border-bottom: 1px solid var(--border-light) !important;
    }
    .export-option:last-child { border-bottom: none !important; }
    .export-option:hover {
        filter: brightness(0.95) !important;
        transform: translateX(3px) !important;
    }
    .export-option:last-child {
        border-bottom: none !important;
    }

    .export-option:hover {
        filter: brightness(0.95) !important;
        transform: translateX(3px) !important;
    }

    /* Цвета фонов для опций */
    .export-option[data-format="xlsx"] {
        background: rgba(40, 167, 69, 0.1) !important;
    }

    .export-option[data-format="xlsx"]:hover {
        background: rgba(40, 167, 69, 0.2) !important;
    }

    .export-option[data-format="pdf"] {
        background: rgba(220, 53, 69, 0.1) !important;
    }

    .export-option[data-format="pdf"]:hover {
        background: rgba(220, 53, 69, 0.2) !important;
    }

    .export-option[data-format="xml"] {
        background: rgba(255, 193, 7, 0.1) !important;
    }

    .export-option[data-format="xml"]:hover {
        background: rgba(255, 193, 7, 0.2) !important;
    }

    .export-option[data-format="csv"] {
        background: rgba(23, 162, 184, 0.1) !important;
    }

    .export-option[data-format="csv"]:hover {
        background: rgba(23, 162, 184, 0.2) !important;
    }

    .export-option[data-format="json"] {
        background: rgba(111, 66, 193, 0.1) !important;
    }

    .export-option[data-format="json"]:hover {
        background: rgba(111, 66, 193, 0.2) !important;
    }
    .format-icon {
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: bold !important;
        flex-shrink: 0 !important;
        color: white !important;
    }
    .format-info { flex: 1 !important; }
    .format-name { font-weight: 600 !important; font-size: 14px !important; color: var(--text-dark) !important; }
    .format-desc { font-size: 11px !important; color: var(--text-light) !important; margin-top: 2px !important; }

    /* ==================== DASHBOARD LAYOUT (index.html) ==================== */
    .dashboard-container {
        max-width: 2000px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .top-row {
        display: flex;
        gap: 20px;
        height: auto; /* Фикс. высота */
        margin-bottom: 0;
    }
    .map-column {
        height: auto;
        width: 45%;
        position: relative;
    }
    .map-card {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: var(--radius-lg);
    }
    .controls-column {
        width: 55%;
        height: 100%;
    }
    .controls-card {
        height: auto !important;
        min-height: 225px !important;
        width: 100%;
        padding: 12px 16px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .controls-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 8px;
    }
    .filters-btn { white-space: nowrap; }
    .date-filters-compact {
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--bg-lighter);
        padding: 4px;
        border-radius: var(--radius-sm);
        position: relative;
    }
    .date-filter-group { width: 100px; }
    .date-filter {
        width: 100% !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    .date-apply-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        flex-shrink: 0;
    }
    #activeFiltersContainer {
        display: none;
        flex-wrap: wrap;
        gap: 8px; /* ← Расстояние между тегами фильтров */
        margin: 0; /* ← ВНЕШНИЕ ОТСТУПЫ */
        padding: 4px 0; /* ← ВНУТРЕННИЕ ОТСТУПЫ сверху и снизу */
        min-height: 36px;
    }
    /* Для фильтров внутри контейнера */
    #activeFiltersContainer .filter-tag,
    #activeFiltersContainer button {
        margin: 6px 0; /* Добавляем вертикальные отступы */
    }
    /* ==================== СТРАНИЦА ЗАКАЗЧИКОВ (clients.html) ==================== */
    .clients-container { max-width: 1050px; margin: 20px auto; padding: 0 20px; }


    /* ==================== ТАБЛИЦА ЗАКАЗЧИКОВ (ДЕСКТОП) ==================== */

    /* Основные стили таблицы */
    .clients-table {
        width: 100% !important;
        min-width: 950px !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        font-size: 14px !important;
    }

    /* Заголовки таблицы */
    .clients-table th {
        background: var(--bg-lighter);
        color: var(--text-dark);
        font-weight: 600;
        padding: 12px 8px !important;
        border-bottom: 2px solid var(--border-light);
        white-space: nowrap;
        text-align: center !important;
    }

    /* Ячейки таблицы */
    .clients-table td {
        padding: 8px 6px !important;
        border-bottom: 1px solid var(--border-light);
        vertical-align: middle !important;
        font-size: 14px !important;
    }

    /* Колонка № */
    .clients-table th:nth-child(1),
    .clients-table td:nth-child(1) {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        text-align: center !important;
    }

    /* ===== КОЛОНКА ЗАКАЗЧИКИ (ДВУХСТРОЧНАЯ, ПО ЦЕНТРУ) ===== */
    .clients-table th:nth-child(2) {
        width: 300px !important;
        text-align: center !important;
    }

    .clients-table td:nth-child(2) {
        width: 300px !important;
        text-align: center !important;
        padding: 8px 6px !important;
    }

    /* Контейнер для двух строк */
    .clients-table td:nth-child(2) .client-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        text-decoration: none !important;
        color: var(--text-dark) !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Первая строка - название заказчика */
    .clients-table td:nth-child(2) .client-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Вторая строка - количество маршрутов */
    .clients-table td:nth-child(2) .client-routes {
        font-size: 12px !important;
        color: var(--text-light) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .clients-table td:nth-child(2) .client-routes i {
        font-size: 11px !important;
        margin-right: 3px !important;
        color: var(--primary-color) !important;
    }

    /* ===== КОЛОНКИ С СУММАМИ (Остаток, Переплата, Оплачено) ===== */
    .clients-table th:nth-child(3),
    .clients-table td:nth-child(3),
    .clients-table th:nth-child(4),
    .clients-table td:nth-child(4),
    .clients-table th:nth-child(5),
    .clients-table td:nth-child(5) {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        text-align: center !important;
    }

    /* Ссылки в ячейках (двухстрочные) */
    .remaining-link,
    .overpaid-link,
    .paid-link {
        color: currentColor !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        transition: all 0.3s;
        position: relative;
        background: transparent !important;
        line-height: 1.4;
        min-width: 140px;
        text-align: center;
        width: 100% !important;
        height: 100% !important;
    }

    .remaining-link {
        color: #f97316 !important;
    }

    .overpaid-link {
        color: #3b82f6 !important;
    }

    .paid-link {
        color: #10b981 !important;
    }

    .remaining-link span,
    .overpaid-link span,
    .paid-link span {
        font-size: 12px !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        text-align: center !important;
    }

    .remaining-link span:first-child,
    .overpaid-link span:first-child,
    .paid-link span:first-child {
        font-weight: 600 !important;
    }

    .remaining-link span:last-child,
    .overpaid-link span:last-child,
    .paid-link span:last-child {
        font-size: 11px !important;
    }

    .remaining-link:hover,
    .overpaid-link:hover,
    .paid-link:hover {
        transform: translateY(-1px);
        text-decoration: none !important;
    }

    .remaining-link:hover {
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
    }

    .overpaid-link:hover {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

    .paid-link:hover {
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    }

    /* Пустые ячейки (двухстрочные) */
    .clients-table .text-muted {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        color: var(--text-light) !important;
        font-size: 12px !important;
        width: 100% !important;
        height: 100% !important;
        padding: 4px 0 !important;
    }

    .clients-table .text-muted span {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    .clients-table .text-muted span:first-child {
        font-weight: 400 !important;
        font-size: 12px !important;
    }

    .clients-table .text-muted span:last-child {
        font-size: 11px !important;
        color: var(--text-light) !important;
    }

    /* ==================== МЕДИА-ЗАПРОСЫ ДЛЯ ДЕСКТОПА ==================== */

    @media (min-width: 1051px) {
        /* Убеждаемся, что десктопные стили применяются */
        .clients-table {
            min-width: 950px !important;
        }

        /* Скрываем мобильные элементы на десктопе */
        .mobile-actions-row,
        .mobile-search-row {
            display: none !important;
        }
    }

    /* ==================== МОБИЛЬНАЯ ВЕРСИЯ ТАБЛИЦЫ ЗАКАЗЧИКОВ ==================== */

    @media (max-width: 1050px) {
        /* Контейнер */
        .clients-container {
            padding: 0 10px !important;
            margin: 10px auto !important;
        }

        /* Карточка с фильтрами */
        .filters-card {
            padding: 10px 12px !important;
            margin-bottom: 10px !important;
        }

        /* Мобильные кнопки */
        .mobile-actions-row {
            display: flex !important;
            gap: 8px !important;
            margin-bottom: 10px !important;
        }

        .mobile-action-btn {
            padding: 10px !important;
            font-size: 13px !important;
        }

        /* Поле поиска */
        .mobile-search-row {
            display: block !important;
        }

        .mobile-search-input {
            padding: 10px 40px 10px 12px !important;
            font-size: 14px !important;
            height: 40px !important;
        }

        .mobile-search-btn {
            right: 8px !important;
            font-size: 16px !important;
        }

        /* ===== ТАБЛИЦА ЗАКАЗЧИКОВ ===== */
        .table-responsive {
            margin: 0 !important;
            border-radius: 8px !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .clients-table {
            min-width: auto !important;
            table-layout: auto !important;
            border-collapse: collapse;
            font-size: 12px !important;
        }

        /* Заголовки таблицы */
        .clients-table th {
            padding: 8px 4px !important;
            font-size: 11px !important;
            white-space: nowrap !important;
            text-transform: uppercase !important;
            letter-spacing: 0.3px !important;
        }

        /* Ячейки таблицы */
        .clients-table td {
            padding: 6px 4px !important;
            font-size: 11px !important;
            line-height: 1.3 !important;
            vertical-align: middle !important;
        }

        /* Колонка № */
        .clients-table th:nth-child(1),
        .clients-table td:nth-child(1) {
            width: 30px !important;
            min-width: 30px !important;
            max-width: 30px !important;
            text-align: center !important;
            padding: 6px 2px !important;
        }

        /* ===== КОЛОНКА ЗАКАЗЧИКИ ===== */
        .clients-table th:nth-child(2) {
            text-align: left !important;
            padding-left: 4px !important;
        }

        .clients-table td:nth-child(2) {
            text-align: left !important;
            padding: 6px 4px !important;
        }

        .clients-table td:nth-child(2) .client-link {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: center !important;
            gap: 2px !important;
            text-decoration: none !important;
            color: var(--text-dark) !important;
            width: 100% !important;
        }

        .clients-table td:nth-child(2) .client-name {
            font-size: 12px !important;
            font-weight: 600 !important;
            color: var(--primary-color) !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            line-height: 1.4 !important;
            text-align: left !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }

        .clients-table td:nth-child(2) .client-routes {
            font-size: 10px !important;
            color: var(--text-light) !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            line-height: 1.3 !important;
            text-align: left !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }

        .clients-table td:nth-child(2) .client-routes i {
            font-size: 9px !important;
            margin-right: 3px !important;
            color: var(--primary-color) !important;
            display: inline-block !important;
        }

        /* ===== КОЛОНКИ С СУММАМИ ===== */
        .clients-table th:nth-child(3),
        .clients-table th:nth-child(4),
        .clients-table th:nth-child(5) {
            text-align: center !important;
        }

        .clients-table td:nth-child(3),
        .clients-table td:nth-child(4),
        .clients-table td:nth-child(5) {
            text-align: center !important;
            padding: 6px 2px !important;
        }

        /* Ссылки в ячейках - компактные */
        .remaining-link,
        .overpaid-link,
        .paid-link {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 2px !important;
            padding: 4px 2px !important;
            font-size: 11px !important;
            text-decoration: none !important;
            width: 100% !important;
            height: 100% !important;
            white-space: nowrap !important;
            min-width: 0 !important;
        }

        .remaining-link span,
        .overpaid-link span,
        .paid-link span {
            display: block !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            text-align: center !important;
            line-height: 1.3 !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .remaining-link span:first-child,
        .overpaid-link span:first-child,
        .paid-link span:first-child {
            font-size: 11px !important;
            font-weight: 600 !important;
        }

        .remaining-link span:last-child,
        .overpaid-link span:last-child,
        .paid-link span:last-child {
            font-size: 10px !important;
        }

        /* Цвета для сумм */
        .remaining-link span:last-child {
            color: #f97316 !important;
        }

        .overpaid-link span:last-child {
            color: #3b82f6 !important;
        }

        .paid-link span:last-child {
            color: #10b981 !important;
        }

        /* Пустые ячейки */
        .clients-table .text-muted {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 2px !important;
            color: var(--text-light) !important;
            font-size: 11px !important;
            width: 100% !important;
            height: 100% !important;
            white-space: nowrap !important;
            min-width: 0 !important;
        }

        .clients-table .text-muted span {
            display: block !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            text-align: center !important;
            line-height: 1.3 !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .clients-table .text-muted span:first-child {
            font-size: 11px !important;
        }

        .clients-table .text-muted span:last-child {
            font-size: 10px !important;
            color: var(--text-light) !important;
        }

        /* ===== АКТИВНЫЕ ФИЛЬТРЫ ===== */
        #activeFiltersContainer {
            margin-top: 8px !important;
            gap: 4px !important;
        }

        .filter-tag {
            padding: 4px 8px !important;
            font-size: 10px !important;
            border-radius: 20px !important;
        }

        #resetAllFiltersBtn {
            padding: 4px 10px !important;
            font-size: 10px !important;
            height: 26px !important;
        }
    }

    /* ===== ДОПОЛНИТЕЛЬНОЕ СЖАТИЕ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ ===== */

    @media (max-width: 480px) {
        .clients-table td:nth-child(2) .client-name {
            font-size: 11px !important;
        }

        .clients-table td:nth-child(2) .client-routes {
            font-size: 9px !important;
        }

        .remaining-link span:first-child,
        .overpaid-link span:first-child,
        .paid-link span:first-child {
            font-size: 10px !important;
        }

        .remaining-link span:last-child,
        .overpaid-link span:last-child,
        .paid-link span:last-child {
            font-size: 9px !important;
        }

        .clients-table .text-muted span:first-child {
            font-size: 10px !important;
        }

        .clients-table .text-muted span:last-child {
            font-size: 9px !important;
        }
    }

    /* ===== ДЛЯ САМЫХ МАЛЕНЬКИХ ЭКРАНОВ ===== */

    @media (max-width: 375px) {
        .clients-table td:nth-child(2) .client-name {
            font-size: 10px !important;
        }

        .clients-table td:nth-child(2) .client-routes {
            font-size: 8px !important;
        }
    }
    /* ==================== СТРАНИЦА ВОДИТЕЛЕЙ (drivers.html) ==================== */

    /* Контейнер страницы */
    #driversPageContainer {
        max-width: 1200px;
        margin: 20px auto;
        padding: 0 20px;
    }

    /* Ссылки в таблице */
    #driversTable .driver-link {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
    }

    #driversTable .driver-link:hover {
        color: var(--secondary-color);
        text-decoration: underline;
    }

    /* Стили для ЗП в таблице водителей - НЕкликабельные */
    #driversTable .drivers-salary-value {
        color: #28a745 !important;
        font-weight: 500 !important;
        display: inline-block;
        padding: 4px 0;
        background: transparent !important;
        cursor: default !important;
        pointer-events: none !important;
    }

    /* Кнопки удаления */
    #driversTable .btn-delete-driver,
    #carsTable .btn-delete-car {
        opacity: 0.5;
        transition: opacity 0.2s, transform 0.2s;
    }

    #driversTable tr:hover .btn-delete-driver,
    #carsTable tr:hover .btn-delete-car {
        opacity: 1;
    }

    #driversTable .btn-delete-driver:hover,
    #carsTable .btn-delete-car:hover {
        transform: scale(1.1);
        background: rgba(220, 53, 69, 0.1);
    }

    /* ==================== ТАБЛИЦА ВОДИТЕЛЕЙ ==================== */
    #driversTable {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse;
    }

    /* Стили для ЗП в таблице водителей - НЕкликабельные */
    #driversTable td .drivers-salary-value {
        color: #28a745 !important;
        font-weight: 600 !important;
        cursor: default !important;
        pointer-events: none !important;
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        transition: all 0.2s ease;
        background: transparent;
        line-height: 1.4;
    }

    /* Эффект при наведении - только овал, без изменения курсора */
    #driversTable td .drivers-salary-value:hover {
        background: rgba(40, 167, 69, 0.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
        cursor: default !important;
    }

    #driversTable th,
    #driversTable td {
        padding: 8px 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Колонка № (фиксированная ширина) */
    #driversTable th:nth-child(1),
    #driversTable td:nth-child(1) {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        text-align: center !important;
    }

    /* Колонка Водитель (занимает всё доступное пространство) */
    #driversTable th:nth-child(2),
    #driversTable td:nth-child(2) {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 200px !important;
        text-align: left !important;
    }

    #driversTable td:nth-child(2) a {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Колонка Штраф (фиксированная ширина) */
    #driversTable th:nth-child(3),
    #driversTable td:nth-child(3) {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        text-align: center !important;
    }

    /* Колонка ЗП (фиксированная ширина) */
    #driversTable th:nth-child(4),
    #driversTable td:nth-child(4) {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        text-align: center !important;
    }

    /* Колонка Выплат (фиксированная ширина) */
    #driversTable th:nth-child(5),
    #driversTable td:nth-child(5) {
        font-size: 13px;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        text-align: center !important;
    }


    /* Колонка Действия (фиксированная ширина) */
    #driversTable th:nth-child(6),
    #driversTable td:nth-child(6) {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        text-align: center !important;
    }

    /* ==================== ТАБЛИЦА МАШИН ==================== */
    #carsTable {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    #carsTable th,
    #carsTable td {
        padding: 6px 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Колонка № в таблице машин */
    #carsTable th:nth-child(1),
    #carsTable td:nth-child(1) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        text-align: center !important;
    }

    /* Колонка Номер машины (занимает оставшееся пространство) */
    #carsTable th:nth-child(2),
    #carsTable td:nth-child(2) {
        width: auto !important;
        min-width: 100px !important;
        text-align: left !important;
        padding-left: 8px !important;
        font-family: monospace;
        font-size: 12px;
    }

    /* Колонка Действия в таблице машин */
    #carsTable th:nth-child(3),
    #carsTable td:nth-child(3) {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        text-align: center !important;
    }

    /* Контейнер для таблицы машин - убираем горизонтальный скролл */
    .cars-table-container {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 300px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .cars-table td:nth-child(3) {
        text-align: center !important;
    }

    /* Стили для ячеек с длинным текстом */
    #carsTable td:nth-child(2) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ==================== АДАПТАЦИЯ ДЛЯ ПЛАНШЕТОВ ==================== */
    @media (max-width: 768px) {
        #driversTable th:nth-child(2),
        #driversTable td:nth-child(2) {
            min-width: 150px !important;
        }

        #driversTable th:nth-child(3),
        #driversTable td:nth-child(3),
        #driversTable th:nth-child(4),
        #driversTable td:nth-child(4) {
            width: 80px !important;
            min-width: 80px !important;
        }

        #carsTable td:nth-child(2) {
            font-size: 11px;
        }
    }

    /* ==================== АДАПТАЦИЯ ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ ==================== */
    @media (max-width: 480px) {
        #driversTable th:nth-child(2),
        #driversTable td:nth-child(2) {
            min-width: 120px !important;
        }

        #driversTable th:nth-child(3),
        #driversTable td:nth-child(3),
        #driversTable th:nth-child(4),
        #driversTable td:nth-child(4) {
            width: 70px !important;
            min-width: 70px !important;
            font-size: 11px;
        }
    }

    /* ==================== МОБИЛЬНАЯ ВЕРСИЯ СТРАНИЦЫ ВОДИТЕЛЕЙ ==================== */
    @media (max-width: 1050px) {
        /* Контейнер на всю ширину */
        #driversPageContainer {
            margin: 20px auto !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
        }

        /* Первый div внутри контейнера - на всю ширину */
        #driversPageContainer > div:first-child {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
        }

        /* Левый блок (где находится таблица и мобильные инструменты) - на всю ширину */
        #driversPageContainer > div:first-child > div:first-child {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            float: none !important;
        }

        #driversPageContainer > div:first-child > div {
            width: 100% !important;
            padding: 0 !important;
        }

        /* Скрываем десктопный блок регистрации */
        #desktopRegisterBlock,
        #desktop-driver-row,
        #driversCard {
            display: none !important;
        }

        /* Мобильный инструментальный блок - на всю ширину с отступами */
        #mobileDriversCard {
            display: block !important;
            background: var(--bg-white);
            border-radius: 16px;
            box-shadow: var(--shadow-lg);
            padding: 16px;
            margin: 15px;
            width: calc(100% - 30px);
            max-width: calc(100% - 30px);
            box-sizing: border-box;
        }

        #mobileDriversCard .mobile-drivers-tools {
            display: block !important;
        }

        /* Контейнер для мобильных кнопок */
        .mobile-drivers-row {
            margin-bottom: 12px;
            position: relative !important;
            width: 100% !important;
        }

        .mobile-drivers-row:last-child {
            margin-bottom: 0;
        }

        /* Кнопки в ряд */
        .mobile-drivers-row[style*="display: flex"] {
            gap: 10px;
            width: 100% !important;
        }

        .mobile-drivers-register-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
        }

        .mobile-drivers-filter-btn,
        .mobile-drivers-export-btn {
            flex: 1;
            width: calc(50% - 5px) !important;
            padding: 14px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            border: none;
            box-sizing: border-box !important;
        }

        .mobile-drivers-filter-btn {
            background: var(--bg-lighter);
            border: 2px solid var(--border-light);
            color: var(--text-dark);
        }

        .mobile-drivers-export-btn {
            background: #28a745;
            color: white;
        }

        .mobile-drivers-search-container {
            position: relative;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .mobile-drivers-search-input {
            width: 100% !important;
            padding: 14px 70px 14px 16px;
            background: var(--bg-lighter);
            border: 2px solid var(--border-light);
            border-radius: 30px;
            color: var(--text-dark);
            font-size: 15px;
            box-sizing: border-box !important;
        }

        .mobile-search-clear {
            position: absolute;
            right: 45px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--text-light);
            font-size: 18px;
            z-index: 2;
        }

        .mobile-drivers-search-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: var(--primary-color);
            font-size: 18px;
            cursor: pointer;
            z-index: 2;
        }

        /* ===== ТАБЛИЦА ВОДИТЕЛЕЙ ===== */
        #driversTableWrapper {
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            position: relative !important;
            left: 0 !important;
            right: auto !important;
        }

        #driversTable {
            width: 100% !important;
            min-width: 600px !important;
            table-layout: auto !important;
            border-collapse: collapse;
            margin-top: 0 !important;
        }

        .main-content {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        body {
            overflow-x: hidden !important;
        }

        #driversTable th {
            padding: 10px 6px !important;
            font-size: 12px !important;
            white-space: nowrap !important;
        }

        #driversTable td {
            padding: 8px 4px !important;
            font-size: 12px !important;
            vertical-align: middle !important;
        }

        /* Колонка № */
        #driversTable th:nth-child(1),
        #driversTable td:nth-child(1) {
            width: 40px !important;
            min-width: 40px !important;
            text-align: center !important;
        }

        /* Колонка Водитель (двухстрочная, слева) */
        #driversTable th:nth-child(2) {
            text-align: left !important;
            padding-left: 8px !important;
        }

        #driversTable td:nth-child(2) {
            text-align: left !important;
            padding-left: 8px !important;
        }

        #driversTable td:nth-child(2) .driver-link {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 2px !important;
            text-decoration: none !important;
        }

        #driversTable td:nth-child(2) .driver-link .driver-name {
            font-size: 13px !important;
            font-weight: 600 !important;
            color: var(--primary-color) !important;
            white-space: nowrap !important;
        }

        #driversTable td:nth-child(2) .driver-link .driver-stats {
            font-size: 11px !important;
            color: var(--text-light) !important;
            white-space: nowrap !important;
        }

        #driversTable td:nth-child(2) .driver-link .driver-stats i {
            font-size: 10px !important;
            margin-right: 3px !important;
            color: var(--primary-color) !important;
        }

        /* Колонка Штраф */
        #driversTable th:nth-child(3),
        #driversTable td:nth-child(3) {
            min-width: 80px !important;
            text-align: center !important;
        }

        #driversTable td:nth-child(3) .fine-link,
        #driversTable td:nth-child(3) .text-muted {
            font-size: 12px !important;
            font-weight: 500 !important;
            white-space: nowrap !important;
        }

        /* Колонка ЗП */
        #driversTable th:nth-child(4),
        #driversTable td:nth-child(4) {
            min-width: 80px !important;
            text-align: center !important;
        }

        #driversTable td:nth-child(4) .drivers-salary-value {
            font-size: 12px !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
        }

        /* Колонка Выплат */
        #driversTable th:nth-child(5),
        #driversTable td:nth-child(5) {
            min-width: 80px !important;
            text-align: center !important;
        }

        /* Колонка Действия */
        #driversTable th:nth-child(6),
        #driversTable td:nth-child(6) {
            width: 50px !important;
            min-width: 50px !important;
            text-align: center !important;
        }

        #driversTable td:nth-child(5) .btn-delete-driver {
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
        }
    }

    /* ==================== ДЕСКТОПНАЯ ВЕРСИЯ ==================== */
    @media (min-width: 1051px) {
        #mobileDriversCard {
            display: none !important;
        }
    }

    /* ==================== МОБИЛЬНОЕ ОКНО РЕГИСТРАЦИИ ==================== */

    /* Оверлей */
    #mobileDriversRegisterOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 100000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #mobileDriversRegisterOverlay.active {
        display: block;
        opacity: 1;
    }

    /* Модальное окно на всю высоту */
    #mobileDriversRegisterModal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--bg-white);
        z-index: 100001;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        flex-direction: column;
        overflow: hidden;
    }

    #mobileDriversRegisterModal.active {
        display: flex;
        transform: translateX(0);
    }

    /* Заголовок */
    #mobileDriversRegisterModal .mobile-register-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        color: white;
        flex-shrink: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    #mobileDriversRegisterModal .mobile-register-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #mobileDriversRegisterModal .mobile-register-header-left i {
        font-size: 1.3rem;
        color: white;
    }

    #mobileDriversRegisterModal .mobile-register-header-left h3 {
        margin: 0;
        font-size: 1.2rem;
        color: white;
    }

    #mobileDriversRegisterModal .mobile-register-close {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: white;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    #mobileDriversRegisterModal .mobile-register-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    /* Контент с прокруткой */
    #mobileDriversRegisterModal .mobile-register-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        -webkit-overflow-scrolling: touch;
    }

    /* Секции */
    #mobileDriversRegisterModal .mobile-register-section {
        margin-bottom: 30px;
    }

    #mobileDriversRegisterModal .mobile-register-section:last-child {
        margin-bottom: 0;
    }

    #mobileDriversRegisterModal .mobile-register-section-title {
        font-size: 1rem;
        margin-bottom: 15px;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
    }

    #mobileDriversRegisterModal .mobile-register-section-title i {
        font-size: 1.1rem;
    }

    /* Формы */
    #mobileDriversRegisterModal .mobile-register-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #mobileDriversRegisterModal .mobile-register-input {
        width: 100%;
        padding: 14px 16px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        font-size: 16px;
        background: var(--bg-white);
        color: var(--text-dark);
        transition: all 0.2s;
    }

    #mobileDriversRegisterModal .mobile-register-input:focus {
        outline: none;
        border-color: #28a745;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
    }

    #mobileDriversRegisterModal .mobile-register-submit-btn {
        width: 100%;
        padding: 16px;
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    #mobileDriversRegisterModal .mobile-register-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    }

    #mobileDriversRegisterModal .mobile-register-submit-btn:active {
        transform: translateY(0);
    }

    /* Таблица машин (без ограничения высоты) */
    #mobileDriversRegisterModal .mobile-cars-table-container {
        border: 2px solid var(--border-light);
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-white);
    }

    #mobileDriversRegisterModal .mobile-cars-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    #mobileDriversRegisterModal .mobile-cars-table thead {
        background: var(--bg-lighter);
    }

    #mobileDriversRegisterModal .mobile-cars-table th {
        padding: 12px 8px;
        font-weight: 600;
        color: var(--text-dark);
        border-bottom: 2px solid var(--border-light);
    }

    #mobileDriversRegisterModal .mobile-cars-table td {
        padding: 10px 8px;
        border-bottom: 1px solid var(--border-light);
        vertical-align: middle;
    }

    #mobileDriversRegisterModal .mobile-cars-table tr:last-child td {
        border-bottom: none;
    }

    #mobileDriversRegisterModal .mobile-cars-table .btn-delete-car {
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(220, 53, 69, 0.1);
        border-radius: 50%;
        color: #dc3545;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        margin: 0 auto;
    }

    #mobileDriversRegisterModal .mobile-cars-table .btn-delete-car:hover {
        background: rgba(220, 53, 69, 0.2);
        transform: scale(1.1);
    }

    /* Пустое состояние таблицы */
    #mobileCarsTableBody tr td[colspan] {
        text-align: center;
        padding: 30px 20px;
        color: var(--text-light);
        font-style: italic;
    }

    #mobileCarsTableBody tr td[colspan] i {
        font-size: 32px;
        margin-bottom: 10px;
        color: var(--primary-color);
        opacity: 0.5;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        #mobileDriversRegisterModal .mobile-register-header {
            padding: 14px 16px;
        }

        #mobileDriversRegisterModal .mobile-register-header-left h3 {
            font-size: 1.1rem;
        }

        #mobileDriversRegisterModal .mobile-register-content {
            padding: 16px;
        }

        #mobileDriversRegisterModal .mobile-register-input {
            padding: 12px 14px;
            font-size: 15px;
        }

        #mobileDriversRegisterModal .mobile-register-submit-btn {
            padding: 14px;
            font-size: 15px;
        }

        #mobileDriversRegisterModal .mobile-cars-table {
            font-size: 13px;
        }

        #mobileDriversRegisterModal .mobile-cars-table th,
        #mobileDriversRegisterModal .mobile-cars-table td {
            padding: 8px 4px;
        }

        #mobileDriversRegisterModal .mobile-cars-table .btn-delete-car {
            width: 28px;
            height: 28px;
            font-size: 12px;
        }
    }

    /* Для очень маленьких экранов */
    @media (max-width: 375px) {
        #mobileDriversRegisterModal .mobile-register-section-title {
            font-size: 0.95rem;
        }

        #mobileDriversRegisterModal .mobile-cars-table {
            font-size: 12px;
        }
    }

    /* Дополнительное сжатие для маленьких экранов */
    @media (max-width: 480px) {
        .drivers-table {
            min-width: 550px !important;
        }

        .drivers-table td:nth-child(2) .driver-name {
            font-size: 12px !important;
        }

        .drivers-table td:nth-child(2) .driver-stats {
            font-size: 10px !important;
        }

        .drivers-table td:nth-child(3) .fine-link,
        .drivers-table td:nth-child(3) .text-muted,
        .drivers-table td:nth-child(4) .drivers-salary-value {
            font-size: 11px !important;
        }
    }

    /* ==================== МОБИЛЬНОЕ ОКНО ПЕРИОДА ==================== */

    /* Оверлей */
    #mobileDriversFiltersOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 100000;
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
    }

    #mobileDriversFiltersOverlay.active {
        display: block;
        opacity: 1;
    }

    /* Модальное окно периода - высота по содержимому */
    #mobileDriversFiltersPanel {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-white);
        z-index: 100001;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        overflow: hidden;
    }

    #mobileDriversFiltersPanel.active {
        display: flex;
        transform: translateY(0);
    }

    /* Заголовок со скруглениями */
    #mobileDriversFiltersPanel .mobile-period-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        color: white;
        flex-shrink: 0;
    }

    #mobileDriversFiltersPanel .mobile-period-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #mobileDriversFiltersPanel .mobile-period-header-left i {
        font-size: 1.2rem;
        color: white;
    }

    #mobileDriversFiltersPanel .mobile-period-header-left h3 {
        margin: 0;
        font-size: 1.2rem;
        color: white;
    }

    #mobileDriversFiltersPanel .mobile-period-close {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: white;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    #mobileDriversFiltersPanel .mobile-period-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    /* Контент */
    #mobileDriversFiltersPanel .mobile-period-content {
        padding: 20px;
        flex-shrink: 0;
    }

    /* Строка с датами */
    #mobileDriversFiltersPanel .mobile-date-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        flex-wrap: nowrap;
    }

    /* Поля даты */
    #mobileDriversFiltersPanel .mobile-date-field {
        flex: 1;
        position: relative;
    }

    #mobileDriversFiltersPanel .mobile-date-display {
        width: 100%;
        padding: 14px 12px;
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: 12px;
        color: var(--text-dark);
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s;
    }

    #mobileDriversFiltersPanel .mobile-date-display:hover {
        border-color: #667eea;
    }

    #mobileDriversFiltersPanel .mobile-date-display .date-text {
        color: var(--text-dark);
    }

    #mobileDriversFiltersPanel .mobile-date-display .date-text.empty {
        color: var(--text-light);
    }

    #mobileDriversFiltersPanel .mobile-date-display i {
        color: #667eea;
        font-size: 14px;
    }

    #mobileDriversFiltersPanel .mobile-date-separator {
        color: var(--text-light);
        font-size: 14px;
    }

    /* Кнопка месяца */
    #mobileDriversFiltersPanel .mobile-month-btn {
        width: 48px;
        height: 48px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-lighter);
        color: #667eea;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    #mobileDriversFiltersPanel .mobile-month-btn:hover {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

    /* Кнопка применения */
    #mobileDriversFiltersPanel .mobile-apply-btn {
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        margin-top: 16px;
    }

    #mobileDriversFiltersPanel .mobile-apply-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    #mobileDriversFiltersPanel .mobile-apply-btn:active {
        transform: translateY(0);
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        #mobileDriversFiltersPanel .mobile-period-header {
            padding: 14px 16px;
        }

        #mobileDriversFiltersPanel .mobile-period-header-left h3 {
            font-size: 1.1rem;
        }

        #mobileDriversFiltersPanel .mobile-period-content {
            padding: 16px;
        }

        #mobileDriversFiltersPanel .mobile-date-display {
            padding: 12px 10px;
            font-size: 13px;
        }

        #mobileDriversFiltersPanel .mobile-month-btn {
            width: 44px;
            height: 44px;
        }

        #mobileDriversFiltersPanel .mobile-apply-btn {
            padding: 14px;
            font-size: 15px;
        }
    }

    /* Для очень маленьких экранов */
    @media (max-width: 375px) {
        #mobileDriversFiltersPanel .mobile-date-display {
            font-size: 12px;
            padding: 10px 8px;
        }

        #mobileDriversFiltersPanel .mobile-month-btn {
            width: 40px;
            height: 40px;
        }
    }

    /* ==================== МОБИЛЬНОЕ ОКНО ЭКСПОРТА ВОДИТЕЛЕЙ ==================== */

    /* Оверлей с анимацией затухания */
    #mobileDriversExportOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 200000;
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
        pointer-events: none;
    }

    #mobileDriversExportOverlay.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Модальное окно с анимацией выезда снизу */
    #mobileDriversExportModal {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-white);
        z-index: 200001;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        max-height: 70vh;
        overflow: hidden;
    }

    #mobileDriversExportModal.active {
        display: flex;
        transform: translateY(0);
    }

    /* Заголовок */
    #mobileDriversExportModal .mobile-export-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        color: white;
        flex-shrink: 0;
    }

    #mobileDriversExportModal .mobile-export-header h3 {
        margin: 0;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
    }

    #mobileDriversExportModal .mobile-export-header h3 i {
        color: white;
    }

    #mobileDriversExportModal .mobile-export-close {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: white;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    #mobileDriversExportModal .mobile-export-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    #mobileDriversExportModal .mobile-export-close:active {
        transform: scale(0.95);
    }

    /* Контент */
    #mobileDriversExportModal .mobile-export-content {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    /* Опции экспорта */
    #mobileDriversExportModal .mobile-export-option {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 16px;
        background: var(--bg-lighter);
        border-radius: 12px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid transparent;
    }

    #mobileDriversExportModal .mobile-export-option:last-child {
        margin-bottom: 0;
    }

    #mobileDriversExportModal .mobile-export-option:hover {
        transform: translateX(5px);
        border-color: #28a745;
    }

    #mobileDriversExportModal .mobile-export-option:active {
        transform: scale(0.98);
    }

    #mobileDriversExportModal .mobile-export-option .format-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 18px;
        flex-shrink: 0;
    }

    #mobileDriversExportModal .mobile-export-option .format-info {
        flex: 1;
    }

    #mobileDriversExportModal .mobile-export-option .format-name {
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 4px;
    }

    #mobileDriversExportModal .mobile-export-option .format-desc {
        font-size: 12px;
        color: var(--text-light);
    }

    /* Футер */
    #mobileDriversExportModal .mobile-export-footer {
        padding: 16px 20px;
        border-top: 2px solid var(--border-light);
        flex-shrink: 0;
    }

    #mobileDriversExportModal .mobile-export-cancel {
        width: 100%;
        padding: 14px;
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: 12px;
        color: var(--text-medium);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    #mobileDriversExportModal .mobile-export-cancel:hover {
        border-color: #28a745;
        color: #28a745;
    }

    #mobileDriversExportModal .mobile-export-cancel:active {
        transform: scale(0.98);
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        #mobileDriversExportModal .mobile-export-header {
            padding: 14px 16px;
        }

        #mobileDriversExportModal .mobile-export-header h3 {
            font-size: 1.1rem;
        }

        #mobileDriversExportModal .mobile-export-content {
            padding: 16px;
        }

        #mobileDriversExportModal .mobile-export-option {
            padding: 14px;
        }

        #mobileDriversExportModal .mobile-export-option .format-icon {
            width: 36px;
            height: 36px;
            font-size: 16px;
        }

        #mobileDriversExportModal .mobile-export-option .format-name {
            font-size: 14px;
        }

        #mobileDriversExportModal .mobile-export-option .format-desc {
            font-size: 11px;
        }

        #mobileDriversExportModal .mobile-export-cancel {
            padding: 12px;
            font-size: 14px;
        }
    }

    /* Для очень маленьких экранов */
    @media (max-width: 375px) {
        #mobileDriversExportModal .mobile-export-option {
            padding: 12px;
        }

        #mobileDriversExportModal .mobile-export-option .format-icon {
            width: 32px;
            height: 32px;
            font-size: 15px;
        }
    }

    /* ==================== СТРАНИЦА МАРШРУТА (order.html) ==================== */
    .order-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; min-height: calc(100vh - 140px); }
    .order-container .top-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-shrink: 0;
        height: 580px;
    }
    .order-container .map-column { width: 45%; }
    .order-container .info-column { width: 55%; height: 100%; }
    .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-color);
        flex-shrink: 0;
    }
    .order-header h2 { font-size: 1.4rem; color: var(--text-dark); margin: 0; }
    .route-points {
        margin-bottom: 15px;
        padding: 10px;
        background: var(--bg-lighter);
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }
    .route-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .detail-item {
        padding: 8px;
        background: var(--bg-lighter);
        border-radius: var(--radius-sm);
    }
    .detail-item > div:first-child { font-size: 12px; color: var(--text-light); }
    .detail-item > div:last-child { font-weight: 500; }
    .logs-container { flex: 1; margin-top: 0; }
    .logs-card { height: 100%; display: flex; flex-direction: column; }
    .logs-card h3 {
        margin-bottom: 15px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    /* ==================== СТРАНИЦА ПОЛЬЗОВАТЕЛЕЙ (users.html) ==================== */
    .users-container { max-width: 1200px; margin: 20px auto; }
    .users-header-card > div:first-child { display: flex; align-items: center; gap: 20px; }
    .role-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }
    .role-admin { background: #667eea20; color: #667eea; }
    .role-user { background: #28a74520; color: #28a745; }
    .role-viewer { background: #6c757d20; color: #6c757d; }
    .status-active { color: #059669; font-weight: 500; }
    .status-inactive { color: #dc3545; font-weight: 500; }

    /* ==================== СТРАНИЦА ПОЛЬЗОВАТЕЛЕЙ ==================== */

    /* Десктопный блок по умолчанию виден */
    .desktop-users-tools {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    /* Мобильный блок по умолчанию скрыт */
    .mobile-users-tools {
        display: none !important;
    }

    /* ==================== МОБИЛЬНАЯ ВЕРСИЯ ==================== */
    @media (max-width: 1050px) {
        /* Карточка заголовка - с отступами и скруглениями */
        .users-header-card {
            margin: 15px !important;
            padding: 16px !important;
            border-radius: var(--radius-lg) !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: var(--shadow-lg) !important;
        }

        /* Скрываем десктопный блок */
        .desktop-users-tools {
            display: none !important;
        }

        /* Показываем мобильный блок */
        .mobile-users-tools {
            display: block !important;
            margin-top: 15px;
        }

        .mobile-users-row {
            margin-bottom: 12px;
            width: 100% !important;
        }

        .mobile-users-row:last-child {
            margin-bottom: 0;
        }

        .mobile-users-add-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
        }

        .mobile-users-search-container {
            position: relative;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .mobile-users-search-input {
            width: 100% !important;
            padding: 14px 70px 14px 16px;
            background: var(--bg-lighter);
            border: 2px solid var(--border-light);
            border-radius: 30px;
            color: var(--text-dark);
            font-size: 15px;
            box-sizing: border-box !important;
        }

        .mobile-users-search-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: var(--primary-color);
            font-size: 18px;
            cursor: pointer;
            z-index: 2;
        }

        .mobile-users-search-clear {
            position: absolute;
            right: 45px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--text-light);
            font-size: 18px;
            z-index: 2;
        }

        /* Обертка таблицы */
        .table-responsive {
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        /* Таблица пользователей */
        #users-table {
            width: 100% !important;
            min-width: 600px !important;
            table-layout: auto !important;
            border-collapse: collapse;
        }

        #users-table th,
        #users-table td {
            padding: 10px 8px !important;
            font-size: 12px !important;
            white-space: nowrap !important;
        }

        /* Колонка № */
        #users-table th:first-child,
        #users-table td:first-child {
            width: 40px !important;
            min-width: 40px !important;
            text-align: center !important;
        }

        /* Колонка Логин */
        #users-table th:nth-child(2),
        #users-table td:nth-child(2) {
            min-width: 100px !important;
            text-align: center !important;
        }

        /* Колонка ФИО */
        #users-table th:nth-child(3),
        #users-table td:nth-child(3) {
            min-width: 120px !important;
            text-align: left !important;
        }

        /* Колонка Роль */
        #users-table th:nth-child(4),
        #users-table td:nth-child(4) {
            min-width: 100px !important;
            text-align: center !important;
        }

        /* Колонка Статус */
        #users-table th:nth-child(5),
        #users-table td:nth-child(5) {
            min-width: 80px !important;
            text-align: center !important;
        }

        /* Колонка Дата создания */
        #users-table th:nth-child(6),
        #users-table td:nth-child(6) {
            min-width: 130px !important;
            text-align: center !important;
        }

        /* Колонка Действия */
        #users-table th:last-child,
        #users-table td:last-child {
            min-width: 100px !important;
            text-align: center !important;
        }

        /* Кнопки действий */
        .actions-cell .btn-icon {
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
        }
    }

    /* ==================== СТРАНИЦА ПРОФИЛЯ (profile.html) ==================== */
    .profile-container { max-width: 600px; margin: 40px auto; }
    .profile-header-card > div { display: flex; align-items: center; gap: 20px; }
    .profile-avatar {
        width: 80px; height: 80px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    .profile-avatar i { font-size: 40px; color: white; }



    /* ==================== СТРАНИЦА ВХОДА (login.html) ==================== */
    .login-container { max-width: 400px; margin: 100px auto; animation: fadeIn 0.5s ease; }
    .login-card { border: 1px solid var(--border-color); }
    .alert {
        padding: 12px; border-radius: var(--radius-sm); margin-bottom: 20px;
        border-left: 4px solid;
    }
    .alert-error { background: #fee2e2; color: #dc2626; border-left-color: #dc2626; }
    .alert-success { background: #d4edda; color: #155724; border-left-color: #059669; }

    /* ==================== СТРАНИЦА 404 (404_order.html) ==================== */
    .not-found-container {
        max-width: 600px; margin: 40px auto; text-align: center;
        background: var(--bg-white); border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg); padding: 40px 20px; animation: fadeIn 0.5s ease;
    }
    .parking-scene {
        position: relative;
        width: 340px;
        height: 140px;
        margin: 0 auto 30px;
        overflow: hidden;
    }
    .parking-line {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 6px;
        background: #2c3e50;
    }
    .parking-line::before {
        content: '';
        position: absolute;
        right: 40px;
        top: -40px;
        width: 4px;
        height: 40px;
        background: #f1c40f;
    }
    .truck-parking {
        position: absolute;
        bottom: -8px;
        left: -250px;
        width: 300px;
        height: 100px;
        animation: driveIn 2.2s ease-out forwards, settle 0.4s ease 1.7s forwards;
    }
    .truck-parking .truck-body {
        position: absolute;
        bottom: 35px;
        left: 80px;
        width: 170px;
        height: 65px;
        background: #3498db;
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.2);
        z-index: 2;
    }
    .truck-body::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: -61px;
        width: 232px;
        height: 6px;
        background: #2c3e50;
        border-radius: 5px;
        z-index: 3;
    }
    .truck-parking .truck-cab {
        position: absolute;
        bottom: 35px;
        left: 20px;
        width: 70px;
        height: 60px;
        background: #e74c3c;
        border-radius: 8px;
        z-index: 1;
    }
    .truck-windshield {
        position: absolute;
        top: 10px;
        left: 15px;
        width: 35px;
        height: 25px;
        background: #5dade2;
        border-radius: 6px;
    }
    .truck-headlight {
        position: absolute;
        bottom: 10px;
        left: 1px;
        width: 10px;
        height: 10px;
        background: #f39c12;
        border-radius: 50%;
        animation: blink 1s infinite 2.2s;
    }
    .truck-parking .truck-wheel {
        position: absolute;
        bottom: 15px;
        width: 36px;
        height: 37px;
        background: #2d3436;
        border-radius: 50%;
        border: 5px solid #636e72;
        animation: wheelSpinParking 2.2s ease-out forwards;
        z-index: 4;
    }
    .truck-parking .truck-wheel.front { left: 40px; }
    .truck-parking .truck-wheel.rear { left: 200px; }

    @media (max-width: 1050px) {
        .not-found-container {
            margin: 12px !important;
        }
    }

    /* ==================== КАРТА (index.html & order.html) ==================== */
    .leaflet-map { height: 100%; width: 100%; }
    .leaflet-control-attribution { display: none !important; }

    /* Контролы карты */
    .leaflet-control { z-index: 1000 !important; }
    .leaflet-control-geocoder { z-index: 1000 !important; }
    .leaflet-control-geocoder-alternatives { max-height: 170px !important; overflow-y: auto !important; z-index: 1001 !important; }
    .leaflet-popup { z-index: 1000 !important; }
    .leaflet-control-zoom { z-index: 1000 !important; }
    .leaflet-routing-container { display: none !important; }

    /* Маркеры на карте */
    .route-marker div {
        width: 24px; height: 24px; border-radius: 50%;
        border: 2px solid white;
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 12px;
    }

    /* ==================== АНИМАЦИЯ ЗАГРУЗКИ КАРТЫ (index.html & order.html) ==================== */
    .map-loader {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        border-radius: inherit;
    }
    .map-loader.fade-out { opacity: 0; visibility: hidden; }
    .map-loader.error-mode {
        background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
        animation: errorFadeIn 0.3s ease;
    }
    .map-loader.error-mode .truck-loader { animation: truckDriveError 0.6s infinite alternate; }
    @keyframes errorFadeIn { from { filter: brightness(1); } to { filter: brightness(1.15); } }

    .truck-loader {
        position: relative;
        width: 300px;
        height: 140px;
        margin-bottom: 35px;
        overflow: hidden;
        animation: truckDrive 3s linear infinite;
        transform: scaleX(-1);
    }
    .truck-loader .truck-body {
        position: absolute;
        bottom: 29px;
        left: 80px;
        width: 180px;
        height: 70px;
        background: #3498db;
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    }
    .truck-loader .truck-body::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: -60px;
        width: 240px;
        height: 6px;
        background: #2c3e50;
        border-radius: 5px;
        z-index: 0;
    }
    .truck-loader .truck-cab {
        position: absolute;
        bottom: 29px;
        left: 20px;
        width: 70px;
        height: 60px;
        background: #e74c3c;
        border-radius: 8px 8px 4px 4px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    }
    .truck-loader .truck-windshield {
        position: absolute;
        top: 10px;
        left: 15px;
        width: 35px;
        height: 25px;
        background: #5dade2;
        border-radius: 6px;
    }
    .truck-loader .truck-headlight {
        position: absolute;
        bottom: 4px;
        left: 60px;
        width: 10px;
        height: 10px;
        background: #f1c40f;
        border-radius: 50%;
        box-shadow: 0 0 10px #f1c40f;
    }
    .truck-loader .truck-wheel {
        position: absolute;
        bottom: 9px;
        width: 38px;
        height: 37px;
        background: #2d3436;
        border-radius: 50%;
        border: 5px solid #636e72;
        animation: wheelSpin 0.7s linear infinite;
    }
    .truck-loader .truck-wheel.front { left: 40px; }
    .truck-loader .truck-wheel.middle,
    .truck-loader .truck-wheel.rear { left: 210px; }
    .road {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 8px;
        background: #2c3e50;
        overflow: hidden;
        border-radius: 4px;
    }
    .road::after {
        content: '';
        position: absolute;
        width: 200%;
        height: 100%;
        background: repeating-linear-gradient(90deg, #f1c40f 0px, #f1c40f 30px, transparent 30px, transparent 60px);
        animation: roadMove 1s linear infinite;
    }
    .loading-text {
        color: white;
        font-size: 20px;
        font-weight: 600;
        margin-top: 25px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.4);
        animation: pulse 1.5s infinite ease-in-out;
    }
    .loading-progress {
        width: 260px;
        height: 6px;
        background: rgba(255,255,255,0.2);
        border-radius: 4px;
        margin-top: 20px;
        overflow: hidden;
    }
    .progress-bar {
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg,#f1c40f,#e67e22,#e74c3c);
        animation: progressMove 1.2s infinite linear;
    }
    .map-error-overlay {
        display: none;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        text-align: center;
    }

    /* ==================== УБИРАЕМ СТРЕЛКИ У ЧИСЛОВЫХ ПОЛЕЙ ==================== */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
        display: none !important;
    }
    input[type="number"] {
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }
    /* Убираем стандартные контролы для календаря */
    .form-control[type="date"] {
        cursor: pointer;
        padding-right: 12px !important;
    }
    .form-control[type="date"]::-webkit-calendar-picker-indicator {
        display: none !important;
        opacity: 0 !important;
    }
    input[type="date"]::-webkit-inner-spin-button,
    input[type="date"]::-webkit-clear-button {
        display: none !important;
    }

    /* ==================== СОРТИРОВКА ==================== */
    .sort-link {
        color: inherit;
        text-decoration: none;
        display: inline-block;
        position: relative;
    }
    .sort-link:hover { color: var(--primary-color); }
    .sort-link.active { color: var(--primary-color); font-weight: 700; }

    .data-table th:nth-child(4) .sort-link,
    .data-table th:nth-child(5) .sort-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        height: 100%;
    }

    /* ==================== РАЗНОЕ ==================== */
    /* Неактивный текст */
    .text-muted { color: var(--text-light); font-size: 12px; text-align: center; }
    /* Уведомления внутри страниц (flashed messages) */
    .alert { padding: 12px; border-radius: var(--radius-sm); margin-bottom: 15px; }

    /* ==================== СТАТУСЫ ТТН В МОДАЛЬНОМ ОКНЕ (ttnModal) ==================== */
    /* Стили для модального окна редактирования ТТН (index.html) */
    .ttn-status-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 25px;
    }

    .ttn-status-btn {
        padding: 16px;
        border: 2px solid var(--border-light);
        border-radius: 10px;
        background: var(--bg-white);
        color: var(--text-light);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s;
        width: 100%; /* Добавил для мобильной версии */
        text-align: left; /* Добавил для выравнивания */
    }

    .ttn-status-btn:hover {
        border-color: var(--primary-color);
        background: var(--bg-lighter);
        transform: translateX(5px);
    }

    .ttn-status-btn.active {
        border-color: currentColor;
        color: var(--bg-white);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    /* Цвета для активного состояния кнопок */
    .ttn-status-btn.paid.active {
        background: var(--success-color);
        border-color: var(--success-color);
    }

    .ttn-status-btn.pending.active {
        background: var(--warning-color);
        border-color: var(--warning-color);
    }

    .ttn-status-btn.unpaid.active {
        background: #dc2626; /* Используем hex, т.к. в :root нет отдельной переменной */
        border-color: #dc2626;
    }

    /* Иконки внутри кнопок */
    .ttn-status-btn i {
        font-size: 18px;
        width: 24px; /* Фиксированная ширина для иконок */
        text-align: center;
    }

    /* Группа полей для ввода ТТН */
    .ttn-input-group {
        margin-top: 20px;
        animation: slideDown 0.3s ease;
    }

    /* ==================== АДАПТИВНОСТЬ (Mobile First) ==================== */

    /* Планшеты и маленькие десктопы (до 1200px) */
    @media (max-width: 1200px) {
        .top-row {
            flex-direction: column;
            height: auto;
        }
        .map-column,
        .controls-column,
        .order-container .map-column,
        .order-container .info-column {
            width: 100% !important;
            height: 250px;
        }
        .order-container .info-column { height: auto; }
        .controls-card { height: auto; gap: 15px; }
        .controls-row { flex-wrap: wrap; }
        .drivers-container > div > div { flex-direction: column; }
        .drivers-container > div > div > div { width: 100% !important; }
    }

    /* Мобильные устройства (до 1050px) */
    @media (max-width: 1050px) {
        .btn-items {
            padding: 5px 12px !important;
            height: 30px;
            font-size: 11px;
            gap: 6px;
            min-width: 70px;
        }

        .btn-items i {
            font-size: 12px;
        }

        .controls-card {
            min-height: auto;
            height: auto !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            justify-content: flex-start !important; /* Выравниваем всё к началу */
        }

        .controls-card .page-header {
            margin-bottom: 4px !important;
            padding-bottom: 4px !important;
        }

        /* Растягиваем верхний ряд */
        .top-row {
            height: auto !important;
        }

        /* Убираем лишний отступ сверху у блока с фильтрами */
        .controls-row {
            margin-top: 2px !important;
        }

        /* Уменьшаем вертикальные отступы между элементами */
        .controls-row .btn,
        .controls-row .date-filters-compact,
        .controls-row .search-wrapper,
        .controls-row .export-dropdown {
            margin-bottom: 2px !important;
        }

        .map-column {
            display: none !important;
        }

        /* Компактнее делаем кнопки */
        .controls-row .btn {
            padding: 8px 12px !important;
            font-size: 13px !important;
        }

        /* Уменьшаем высоту полей ввода */
        .controls-row .form-control {
            padding: 6px 8px !important;
            height: 34px !important;
        }

        /* Делаем кнопки применения дат компактнее */
        .controls-row .date-apply-btn,
        .controls-row .month-picker-btn {
            width: 34px !important;
            height: 34px !important;
        }

        /* Опционально: корректируем ширину колонки с элементами управления */
        .controls-column {
            height: auto !important;
            width: 100% !important;
        }

        /* Навигация */
        .nav-container {
            flex-direction: column;
            height: auto;
            padding: 15px;
        }
        .nav-brand { margin-bottom: 15px; }
        .nav-menu {
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .nav-menu a {
            padding: 10px 15px;
            font-size: 0.9rem;
        }

        /* Основной контент */
        .main-content {
            padding: 15px;
            margin: 15px auto;
        }

        /* Заголовки */
        .page-header {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }
        .page-header h1 { font-size: 1.4rem; }
        .page-header h1 i { font-size: 1.6rem; }

        /* Кнопки */
        #newRouteBtn,
        .page-header .btn-primary { width: 100%; }
        .btn { padding: 10px 16px; font-size: 13px; }
        .btn-icon { width: 32px; height: 32px; font-size: 14px; }

        /* Панель управления (index.html) */
        .controls-row { flex-direction: column; align-items: stretch; }
        .filters-btn, .date-filters-compact, .search-wrapper { width: 100%; }
        .date-filters-compact { order: 3; justify-content: center; }

        /* Поиск */
        .search-wrapper { min-width: 100%; }

        /* Модальные окна */
        .modal { width: 95% !important; }
        .modal-header, .modal-body, .modal-footer { padding: 20px; }
        .ttn-status-options { gap: 8px; }
        .ttn-status-btn { padding: 12px; font-size: 14px; }

        /* Пагинация */
        .pagination {
            flex-wrap: wrap;
            justify-content: center;
        }
        .pagination-btn {
            padding: 8px 12px;
            font-size: 13px;
            min-width: 35px;
        }

        /* Уведомления */
        .notification {
            left: 20px;
            right: 20px;
            max-width: none;
        }

        /* Номенклатура */
        .item-row { flex-wrap: wrap; }
        .item-input-group:first-child,
        .item-input-group:last-child { flex: 1 1 100% !important; }
        .remove-item-btn { margin-left: auto; }
        .nomenclature-headers { display: none; }

        /* Плавающий заголовок */
        .floating-header {
            left: 10px;
            right: 10px;
            top: 60px;
        }
        .floating-cell {
            font-size: 12px;
            padding-left: 4px;
            padding-right: 4px;
        }
        .floating-header-content::before,
        .floating-header-content::after { width: 15px; }

        /* Flex-элементы */
        div[style*="display: flex; gap: 16px;"] { flex-direction: column; }
        .form-group[style*="width: 40%"],
        .form-group[style*="width: 30%"] { width: 100% !important; }
        div[style*="justify-content: flex-end;"] { justify-content: flex-start !important; }
        div[style*="width: 30%;"] { width: 100% !important; }

        /* Таблица водителей */
        .drivers-table td { vertical-align: middle !important; padding: 10px 8px !important; }

        /* Статусы ТТН */
        .ttn-status { min-width: 60px; padding: 4px 8px; font-size: 11px; }

        /* Профиль */
        .profile-header-card > div {
            flex-direction: column;
            text-align: center;
        }
        .profile-header-card > div > div:first-child { margin-bottom: 15px; }

        /* 404 страница */
        .not-found-container { margin: 20px 15px; }

        /* Анимация загрузчика */
        .truck-loader { transform: scale(0.7); }
        .map-loader .loading-text { font-size: 16px; }
        .loading-progress { width: 200px; }

        /* Экспорт */
        .export-dropdown-menu {
            position: fixed !important;
            top: auto !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            max-height: 80vh !important;
            overflow-y: auto !important;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
            animation: slideUp 0.3s ease !important;
        }

        /* Выбор месяца */
        .month-picker-menu {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 280px;
            margin-top: 0;
        }

        /* Календарь */
        .flatpickr-calendar {
            width: 280px !important;
            padding: 10px !important;
        }
        .flatpickr-day { line-height: 30px !important; font-size: 13px !important; }
    }


    /* ==================== МОБИЛЬНАЯ НАВИГАЦИЯ ==================== */

    /* Десктопная навигация (по умолчанию видна) */
    .desktop-navbar {
        display: block;
    }

    /* Мобильная навигация (скрыта на десктопе) */
    .mobile-navbar {
        display: none;
        background: var(--bg-white);
        box-shadow: var(--shadow-sm);
        position: sticky;
        top: 0;
        z-index: 2002;
    }

    .mobile-nav-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        position: relative;
        z-index: 2003;
    }

    .mobile-nav-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-dark);
        text-decoration: none;
    }

    .mobile-nav-brand i {
        font-size: 1.5rem;
        color: var(--primary-color);
    }

    .mobile-menu-toggle {
        background: none;
        border: none;
        color: var(--text-dark);
        font-size: 1.5rem;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle:hover {
        background: var(--bg-light);
        color: var(--primary-color);
    }

    /* Мобильное выпадающее меню */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        height: 100vh;
        background: var(--bg-white);
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        z-index: 2004;
        transition: right 0.3s ease;
        overflow-y: auto;
        padding: 20px 0;
    }

    .mobile-menu.active {
        right: 0;
    }

    .mobile-user-info {
        padding: 20px;
        border-bottom: 1px solid var(--border-light);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-dark);
        font-weight: 600;
    }

    .mobile-user-info i {
        font-size: 24px;
        color: var(--primary-color);
    }

    .mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 20px;
        color: var(--text-medium);
        text-decoration: none;
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
    }

    .mobile-menu-item i {
        width: 20px;
        font-size: 1.1rem;
    }

    .mobile-menu-item:hover {
        background: var(--bg-light);
        color: var(--primary-color);
    }

    .mobile-menu-item.active {
        background: var(--primary-gradient);
        color: var(--bg-white);
        border-left-color: var(--secondary-color);
    }

    .mobile-menu-item.logout {
        color: var(--danger-color);
    }

    .mobile-menu-item.logout:hover {
        background: rgba(220, 53, 69, 0.1);
    }

    .mobile-menu-divider {
        height: 1px;
        background: var(--border-light);
        margin: 15px 20px;
    }

    /* Затемнение фона при открытом меню */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2001;
        backdrop-filter: blur(3px);
    }

    .mobile-menu-overlay.active {
        display: block;
    }

    /* Блокировка прокрутки при открытом меню */
    body.menu-open {
        overflow: hidden;
    }

    /* ==================== АДАПТИВНОСТЬ ==================== */

    /* Планшеты и мобильные устройства */
    @media (max-width: 1050px) {
        /* Скрываем десктопную навигацию */
        .desktop-navbar {
            display: none;
        }

        /* Показываем мобильную навигацию */
        .mobile-navbar {
            display: block;
        }

        /* Корректируем отступ основного контента */
        .main-content {
            margin-top: 10px;
        }

        /* Существующие стили для мобильных остаются */
        .nav-container {
            flex-direction: column;
            height: auto;
            padding: 15px;
        }

        .nav-brand {
            margin-bottom: 15px;
        }

        .nav-menu {
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .nav-menu a {
            padding: 10px 15px;
            font-size: 0.9rem;
        }
    }


    /* ==================== МОБИЛЬНЫЙ ИНСТРУМЕНТАЛЬНЫЙ БЛОК ==================== */

    /* По умолчанию скрыт на десктопе */
    .mobile-tools-block {
        display: none;
    }

    /* Показываем только на мобильных */
    @media (max-width: 1050px) {
        /* Скрываем оригинальный блок инструментов */
        .controls-column {
            display: none !important;
        }

        /* Показываем мобильный блок */
        .mobile-tools-block {
            display: block !important;
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            margin-bottom: 15px;
            width: 100%;
        }

        /* Заголовок и кнопка нового маршрута */
        .mobile-tools-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 2px solid var(--border-color);
        }

        .mobile-tools-header h2 {
            margin: 0;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mobile-tools-header h2 i {
            color: var(--primary-color);
            font-size: 1.3rem;
        }

        /* Кнопка нового маршрута - компактная */
        .mobile-new-route-btn {
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            background: var(--primary-gradient);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
        }

        .mobile-new-route-btn i {
            margin: 0;
            font-size: 1.2rem;
        }

        /* Контейнер для кнопок */
        .mobile-actions-row {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
        }

        .mobile-action-btn {
            flex: 1;
            padding: 12px;
            border-radius: var(--radius-sm);
            border: 2px solid var(--border-light);
            background: var(--bg-white);
            color: var(--text-medium);
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .mobile-action-btn:hover {
            background: var(--bg-lighter);
            border-color: var(--primary-color);
        }

        .mobile-action-btn i {
            font-size: 14px;
        }

        /* Поиск */
        .mobile-search-row {
            padding: 0 16px 16px;
        }

        .mobile-search-container {
            display: flex;
            gap: 4px;
            width: 100%;
        }

        .mobile-search-input {
            flex: 1;
            padding: 12px;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-sm);
            background: var(--bg-white);
            color: var(--text-dark);
        }

        .mobile-search-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .mobile-search-btn {
            width: 48px;
            height: 48px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }

    /* ==================== МОБИЛЬНОЕ МЕНЮ ФИЛЬТРОВ ==================== */

    /* Оверлей */
    .mobile-filters-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        backdrop-filter: blur(3px);
    }

    .mobile-filters-overlay.active {
        display: block;
    }

    /* Панель */
    .mobile-filters-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-white);
        z-index: 10001;
        flex-direction: column;
    }

    .mobile-filters-panel.active {
        display: flex;
    }

    /* Заголовок */
    .mobile-filters-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-light);
        background: var(--bg-white);
        flex-shrink: 0;
    }

    .mobile-filters-header h3 {
        margin: 0;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-filters-header h3 i {
        color: var(--primary-color);
    }

    .mobile-filters-close {
        width: 40px;
        height: 40px;
        border: none;
        background: var(--bg-lighter);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: var(--text-medium);
    }

    /* Контент с прокруткой */
    .mobile-filters-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        padding-bottom: 0;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Улучшаем отображение активной секции */
    .mobile-filter-section.expanded {
        background: rgba(102, 126, 234, 0.02);
    }

    .mobile-filter-header.active {
        background: var(--bg-light);
        border-bottom: none;
    }

    /* Секция фильтров */
    .mobile-filter-section {
        margin-bottom: 12px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    /* Заголовок секции */
    .mobile-filter-header {
        padding: 16px 16px;
        background: var(--bg-lighter);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.2s;
        user-select: none;
    }

    .mobile-filter-header:hover {
        background: var(--bg-light);
    }

    .mobile-filter-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-filter-header-left i {
        color: var(--primary-color);
        font-size: 16px;
        width: 20px;
    }

    .mobile-filter-header-left span {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .mobile-filter-header-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-filter-selected-count {
        font-size: 13px;
        color: var(--primary-color);
        font-weight: 500;
        background: rgba(102, 126, 234, 0.1);
        padding: 4px 8px;
        border-radius: 20px;
        min-width: 28px;
        text-align: center;
    }

    .mobile-filter-header i.fa-chevron-down {
        color: var(--text-light);
        transition: transform 0.3s ease;
        font-size: 14px;
    }

    .mobile-filter-header.active i.fa-chevron-down {
        transform: rotate(180deg);
    }

    /* Раскрывающийся контент */
    .mobile-filter-content {
        display: none;
        background: var(--bg-white);
        max-height: 300px;
        overflow-y: auto;
        padding: 8px 0;
    }

    .mobile-filter-section.expanded .mobile-filter-content {
        display: block;
    }

    /* Опции */
    .mobile-filter-option {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .mobile-filter-option:last-child {
        border-bottom: none;
    }

    .mobile-filter-option:hover {
        background: var(--bg-lighter);
    }

    .mobile-filter-option input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: var(--primary-color);
    }

    .mobile-filter-option label {
        flex: 1;
        font-size: 15px;
        cursor: pointer;
        color: var(--text-dark);
    }

    .mobile-filter-option.selected {
        background: rgba(102, 126, 234, 0.05);
    }

    /* Футер с датами */
    .mobile-filters-footer {
        background: var(--bg-white);
        border-top: 2px solid var(--border-light);
        padding: 20px 20px 25px; /* Увеличиваем нижний отступ */
        flex-shrink: 0;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    }

    .mobile-footer-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 15px; /* Увеличиваем отступ */
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-footer-title i {
        color: var(--primary-color);
    }

    /* Строка с датами и кнопками */
    .mobile-date-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 20px;
        flex-wrap: nowrap; /* Запрещаем перенос */
    }

    /* Поля даты */
    .mobile-date-field {
        position: relative;
        flex: 1;
        min-width: 0;
    }

    /* Поле даты */
    .mobile-date-field {
        position: relative;
        flex: 1;
        min-width: 0;
    }

    /* Нативное поле даты - ОСНОВНОЙ СТИЛЬ */
    .mobile-date-field input[type="date"].mobile-date-input {
        width: 100%;
        height: 40px;
        padding: 8px 30px 8px 10px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 14px;
        text-align: center;
    }

    /* Стили для пустого поля */
    .mobile-date-field input[type="date"].mobile-date-input:invalid {
        color: var(--text-light);
    }

    /* Прячем стандартную иконку календаря */
    .mobile-date-field input[type="date"].mobile-date-input::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 5;
    }

    /* Наша иконка календаря */
    .mobile-date-field i.fa-calendar-alt {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 14px;
        pointer-events: none;
    }

    /* Разделитель */
    .mobile-date-separator {
        color: var(--text-light);
        font-size: 12px;
        font-weight: 500;
    }

    /* Контейнер кнопок */
    .mobile-date-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 5px; /* Небольшой отступ сверху */
    }

    /* Кнопка применения - на всю ширину */
    .mobile-apply-btn {
        padding: 12px 16px; /* Увеличиваем внутренние отступы */
        background: var(--primary-gradient);
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 15px; /* Чуть крупнее текст */
        font-weight: 600; /* Жирнее */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        height: 48px; /* Выше кнопка */
        width: 100%; /* На всю ширину */
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3); /* Добавляем тень */
    }

    .mobile-apply-btn i {
        font-size: 16px;
    }

    /* Кнопка месяца */
    .mobile-month-btn {
        padding: 8px 12px;
        background: var(--bg-lighter);
        color: var(--text-medium);
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer !important;
        pointer-events: auto !important;
        height: 40px;
        min-width: 40px;
        white-space: nowrap;
        flex-shrink: 0; /* Запрещаем сжиматься */
        margin-left: auto; /* Сдвигаем вправо */
        position: relative; /* Добавить */
        z-index: 10000; /* Добавить */
        transition: transform 0.1s ease, background-color 0.2s ease; /* Добавляем анимацию */
    }

    .mobile-month-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .mobile-month-btn:active {
        transform: scale(0.9); /* Эффект нажатия */
        background-color: var(--bg-light) !important;
    }

    .mobile-month-btn i {
        color: var(--primary-color);
    }

    /* Стоимость - поля ввода */
    .mobile-cost-inputs {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
    }

    .mobile-cost-field {
        flex: 1;
    }

    .mobile-cost-field label {
        display: block;
        font-size: 11px;
        color: var(--text-light);
        margin-bottom: 4px;
    }

    .mobile-cost-field input {
        width: 100%;
        padding: 10px 8px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 14px;
        background: var(--bg-white);
        color: var(--text-dark);
    }

    .mobile-cost-field input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    .mobile-cost-separator {
        color: var(--text-light);
        font-size: 14px;
        margin-top: 16px;
    }

    /* Range slider */
    .mobile-range-slider {
        padding: 0 16px 20px;
    }

    .slider-container {
        height: 30px;
        position: relative;
        margin: 10px 0;
    }

    /* Стили для noUiSlider */
    .noUi-target {
        background: var(--bg-lighter);
        border-radius: 4px;
        border: none;
        box-shadow: none;
        height: 6px;
    }

    .noUi-connect {
        background: var(--primary-color);
    }

    .noUi-handle {
        background: var(--bg-white);
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        width: 20px !important;
        height: 20px !important;
        right: -10px !important;
        top: -7px !important;
        cursor: pointer;
    }

    .noUi-handle:before,
    .noUi-handle:after {
        display: none;
    }

    .noUi-handle:hover {
        transform: scale(1.1);
    }

    .noUi-handle:active {
        transform: scale(0.95);
    }

    .range-values {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        font-size: 13px;
        color: var(--text-medium);
    }

    /* Стили для опций статусов */
    #mobile-payment-list .mobile-filter-option,
    #mobile-fine-list .mobile-filter-option,
    #mobile-salary-list .mobile-filter-option {
        padding: 14px 16px;
    }

    #mobile-payment-list .mobile-filter-option label,
    #mobile-fine-list .mobile-filter-option label,
    #mobile-salary-list .mobile-filter-option label {
        font-size: 15px;
    }

    /* Медиа-запросы для адаптивности */
    @media (max-width: 1050px) {
        .mobile-date-field input[type="date"].mobile-date-input {
            font-size: 16px !important; /* Предотвращает зум на мобильных */
        }
    }

    @media (max-width: 480px) {
        .btn-items {
            padding: 4px 10px !important;
            height: 28px;
            font-size: 10px;
            min-width: 60px;
        }

        .mobile-filters-footer {
            padding: 15px 15px 20px;
        }


        .mobile-date-field {
            flex: 1 1 calc(50% - 30px); /* Поля занимают половину ширины */
        }

        .mobile-month-btn {
            margin-left: 0; /* Убираем сдвиг при переносе */
        }

        .mobile-apply-btn {
            height: 44px;
            font-size: 14px;
        }

        .mobile-date-fields {
            width: 100%;
            margin-bottom: 8px;
        }

        .mobile-date-buttons {
            width: 100%;
            justify-content: space-between;
        }

        .mobile-menu {
            width: 250px;
        }

        .mobile-menu-item {
            padding: 12px 15px;
            font-size: 0.9rem;
        }

        .mobile-user-info {
            padding: 15px;
        }

        .btn {
            padding: 10px 16px;
            font-size: 13px;
        }

        .btn-icon {
            width: 32px;
            height: 32px;
            font-size: 14px;
        }

        .ttn-status-options {
            gap: 8px;
        }

        .ttn-status-btn {
            padding: 12px;
            font-size: 14px;
        }

        .pagination-info {
            margin-left: 10px;
            font-size: 12px;
        }
    }


    /* Специальные стили для iPhone */
    @supports (-webkit-touch-callout: none) {
        .mobile-date-field input[type="date"].mobile-date-input {
            height: 36px !important;
            font-size: 14px !important;
            padding: 4px 20px 4px 6px !important;
            line-height: normal !important;
            max-width: 110px !important; /* Ограничиваем максимальную ширину */
        }

        .mobile-date-field {
            flex: 0 1 auto !important; /* Отключаем растягивание */
            width: auto !important;
        }

        .mobile-date-field i.fa-calendar-alt {
            right: 14px !important;
            font-size: 12px !important;
        }

        .mobile-date-row {
            justify-content: flex-start !important; /* Выравниваем по левому краю */
            gap: 4px !important;
        }

        .mobile-month-btn {
            height: 48px !important;
            min-width: 48px !important;
            width: 48px !important;
            padding: 4px !important;
            margin-left: 2px !important;
        }

        .mobile-date-separator {
            font-size: 10px !important;
            margin: 0 1px !important;
        }
    }

    /* Для очень маленьких экранов */
    @media (max-width: 375px) {
        @supports (-webkit-touch-callout: none) {
            .mobile-date-field input[type="date"].mobile-date-input {
                max-width: 95px !important;
                font-size: 12px !important;
                padding: 4px 18px 4px 4px !important;
            }
        }
    }

    /* ==================== МОБИЛЬНОЕ МЕНЮ МАРШРУТА ==================== */

    .mobile-route-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        backdrop-filter: blur(3px);
    }

    .mobile-route-overlay.active {
        display: block;
    }

    .mobile-route-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-white);
        z-index: 10001;
        flex-direction: column;
    }

    .mobile-route-panel.active {
        display: flex;
    }

    /* Заголовок */
    .mobile-route-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 2px solid var(--border-light);
        background: var(--bg-white);
        flex-shrink: 0;
    }

    .mobile-route-header h3 {
        margin: 0;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-route-header h3 i {
        color: var(--primary-color);
    }

    .mobile-route-close {
        width: 40px;
        height: 40px;
        border: none;
        background: var(--bg-lighter);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: var(--text-medium);
    }

    /* Контент с прокруткой */
    .mobile-route-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Секции */
    .mobile-route-section {
        margin-bottom: 24px;
    }

    /* Строка с полями */
    .mobile-route-row {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
    }

    .mobile-route-row .mobile-route-section {
        flex: 1;
        margin-bottom: 0;
        min-width: 0; /* Позволяет сжиматься */
    }

    /* ==================== ЗАГОЛОВКИ ПОЛЕЙ В МОБИЛЬНОМ ОКНЕ ==================== */

    .mobile-route-section-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-medium);
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .mobile-route-section-title i {
        font-size: 14px;
        color: var(--primary-color);
        width: 16px;
        text-align: center;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-route-section-title {
            font-size: 12px;
            gap: 4px;
        }

        .mobile-route-section-title i {
            font-size: 12px;
            width: 14px;
        }
    }

    /* Поле ввода */
    .mobile-route-field {
        position: relative;
        width: 100%;
        margin-bottom: 0;
    }

    .mobile-route-field.has-error {
        margin-bottom: 8px;
    }

    .mobile-route-input {
        width: 100%;
        padding: 14px 12px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 16px;
        background: var(--bg-white);
        color: var(--text-dark);
        line-height: 1.4;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
    }

    .mobile-route-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    #routeZoneSelectContainer {
        padding-bottom: 15px;
    }

    /* Поле с кнопкой выбора */
    .mobile-route-field.with-select-btn {
        position: relative;
    }

    .mobile-route-field.with-select-btn .mobile-route-input {
        padding-right: 50px;
    }

    /* Кнопка выбора */
    .mobile-select-btn {
        position: absolute;
        right: 2px;
        top: 2px;
        bottom: 2px;
        width: 44px;
        border: none;
        background: transparent;
        border-left: 2px solid var(--border-light);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-light);
        transition: all 0.2s;
        z-index: 5;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        height: calc(100% - 4px);
    }

    .mobile-select-btn:hover,
    .mobile-select-btn:active {
        background: var(--bg-lighter);
        color: var(--primary-color);
    }

    /* Дата */
    .mobile-route-section-date {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
    }

    .mobile-route-section-date .mobile-route-section-title {
        margin-bottom: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-date-field {
        position: relative;
        width: auto;
        min-width: 140px;
    }

    .mobile-date-display {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.2s;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-date-display:hover {
        border-color: var(--primary-color);
    }

    .mobile-date-display .date-text {
        font-size: 16px;
        color: var(--text-dark);
    }

    .mobile-date-display .date-text.empty {
        color: var(--text-light);
    }

    .mobile-date-display i {
        color: var(--primary-color);
        font-size: 18px;
    }

    /* Номенклатура */
    #mobileItemsContainer {
        margin-bottom: 12px;
    }

    .mobile-item-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
        background: var(--bg-lighter);
        padding: 10px;
        border-radius: var(--radius-sm);
    }

    .mobile-item-row .form-control {
        font-size: 16px;
        padding: 10px 8px;
    }

    .mobile-item-name {
        flex: 2;
        min-width: 0;
    }

    .mobile-item-quantity {
        flex: 1;
        min-width: 70px;
    }

    .mobile-remove-item-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: transparent;
        border: none;
        color: var(--danger-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 18px;
    }

    .mobile-remove-item-btn:hover:not(:disabled) {
        background: rgba(220, 53, 69, 0.1);
        transform: scale(1.1);
    }

    .mobile-remove-item-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .mobile-add-item-btn {
        width: 100%;
        padding: 14px;
        background: var(--bg-lighter);
        border: 2px dashed var(--border-light);
        border-radius: var(--radius-sm);
        color: var(--primary-color);
        font-size: 15px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
        margin-top: 8px;
    }

    .mobile-add-item-btn:hover {
        background: var(--bg-light);
        border-color: var(--primary-color);
    }

    /* Футер */
    .mobile-route-footer {
        display: flex;
        padding: 16px 20px;
        border-top: 2px solid var(--border-light);
        background: var(--bg-white);
        flex-shrink: 0;
    }

    .mobile-route-save-btn {
        width: 100%;
        padding: 16px;
        background: var(--primary-gradient);
        border: none;
        border-radius: var(--radius-sm);
        color: white;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-route-save-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .mobile-route-save-btn i {
        font-size: 18px;
    }

    /* ==================== МОДАЛЬНЫЕ ОКНА ВЫБОРА (POPUP) ==================== */

    .mobile-select-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 100008;
    }

    .mobile-select-modal-overlay.active {
        display: block;
    }

    .mobile-select-modal .mobile-select-content {
        position: relative;
        z-index: 100003;
    }

    .mobile-select-modal {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh; /* 5/6 от высоты экрана */
        background: var(--bg-white);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        z-index: 100009;
        flex-direction: column;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
    }

    .mobile-select-modal.active {
        display: flex;
    }

    .mobile-select-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 2px solid var(--border-light);
        background: var(--bg-white);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .mobile-select-header h3 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .mobile-select-close {
        width: 40px;
        height: 40px;
        border: none;
        background: var(--bg-lighter);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: var(--text-medium);
    }

    .mobile-select-search {
        position: relative;
        padding: 12px 20px;
        border-bottom: 1px solid var(--border-light);
    }

    .mobile-select-search i {
        position: absolute;
        left: 35px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 16px;
    }

    .mobile-select-search input {
        width: 100%;
        padding: 12px 12px 12px 45px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 16px;
        background: var(--bg-white);
        color: var(--text-dark);
        box-sizing: border-box;
    }

    .mobile-select-search input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    .mobile-select-content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
        max-height: calc(70vh - 130px); /* 5/6 высоты минус header и search */
        -webkit-overflow-scrolling: touch;
    }

    .mobile-select-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-light);
        cursor: pointer;
        transition: background 0.2s;
    }

    .mobile-select-option:last-child {
        border-bottom: none;
    }

    .mobile-select-option:hover {
        background: var(--bg-lighter);
    }

    .mobile-select-option.selected {
        background: rgba(102, 126, 234, 0.1);
    }

    .mobile-select-option .option-label {
        flex: 1;
        font-size: 16px;
    }

    .option-label {
        font-size: 15px;
        color: var(--text-dark);
    }

    .mobile-select-option .delete-btn {
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        color: #dc3545;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        margin-right: 8px;
    }

    .mobile-select-option .delete-btn:hover {
        background: rgba(220, 53, 69, 0.1);
    }

    .mobile-select-option .selected-check {
        color: var(--primary-color);
        font-size: 18px;
        opacity: 0;
    }

    .mobile-select-option.selected .selected-check {
        opacity: 1;
    }

    .selected-check {
        color: #667eea;
        font-size: 18px;
        opacity: 0;
        transition: opacity 0.2s;
    }

    /* Для статуса ТТН */
    .mobile-select-option .status-indicator {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 12px;
    }

    /* Пустое состояние */
    .mobile-select-empty {
        padding: 40px 20px;
        text-align: center;
        color: var(--text-light);
        font-size: 16px;
    }

    /* Группы в списке */
    .mobile-select-header-group {
        padding: 12px 20px 4px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-medium);
        background: var(--bg-lighter);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Анимация появления */
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .mobile-select-modal.active {
        animation: slideUp 0.3s ease;
    }

    .option-content {
        display: flex;
        align-items: center;
        flex: 1;
    }

    /* ==================== МОБИЛЬНОЕ ОКНО ЭКСПОРТА ==================== */

    .mobile-export-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        max-height: calc(83.33vh - 70px);
        -webkit-overflow-scrolling: touch;
    }

    .mobile-export-section {
        margin-bottom: 24px;
    }

    .mobile-export-section-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-medium);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mobile-export-section-title i {
        color: var(--primary-color);
        font-size: 14px;
    }

    .mobile-export-option {
        display: flex;
        align-items: center;
        padding: 16px;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-export-option:active {
        transform: scale(0.98);
        border-color: var(--primary-color);
        background: var(--bg-lighter);
    }

    .mobile-export-option-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        flex-shrink: 0;
        color: white;
        font-weight: 600;
        font-size: 18px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .mobile-export-option-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .format-info {
        display: flex;
        flex-direction: column;
    }
    .mobile-export-option-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .mobile-export-option-desc {
        font-size: 13px;
        color: var(--text-light);
    }

    .mobile-export-option i {
        color: var(--text-light);
        font-size: 16px;
        margin-left: 12px;
        transition: transform 0.2s;
    }

    .mobile-export-option:active i {
        transform: translateX(4px);
    }

    .mobile-export-footer {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 2px solid var(--border-light);
    }

    .mobile-export-note {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: var(--bg-lighter);
        border-radius: var(--radius-sm);
        color: var(--text-medium);
        font-size: 13px;
    }

    .mobile-export-note i {
        color: var(--primary-color);
        font-size: 16px;
    }

    /* Адаптация под мобильные */
    @media (max-width: 480px) {
        .mobile-export-option {
            padding: 14px;
        }

        .mobile-export-option-icon {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

        .mobile-export-option-name {
            font-size: 15px;
        }

        .mobile-export-option-desc {
            font-size: 12px;
        }
    }

    /* ==================== МОБИЛЬНАЯ АДАПТАЦИЯ ТАБЛИЦЫ ==================== */

    @media (max-width: 1050px) {
        /* Убираем отступы у body и main */
        body {
            overflow-x: hidden;
            margin: 0 !important;
            padding: 0 !important;
        }

        .main-content {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Убираем отступы у корневого контейнера */
        .dashboard-container {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Исправляем верхний ряд */
        .top-row {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        /* Убираем отступы у карты */
        .map-column {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .map-card {
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 0 !important;
            height: 250px !important;
        }

        /* ===== МОБИЛЬНЫЙ ИНСТРУМЕНТАЛЬНЫЙ БЛОК - ВОЗВРАЩАЕМ ОРИГИНАЛЬНЫЕ СТИЛИ ===== */
        .mobile-tools-block {
            display: block !important;
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-lg);
            margin: 15px !important; /* Оригинальный отступ */
            width: calc(100% - 30px) !important; /* Учитываем отступы */
        }

        .mobile-tools-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px !important;
            border-bottom: 2px solid var(--border-color);
        }

        .mobile-tools-header h2 {
            margin: 0;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mobile-tools-header h2 i {
            color: var(--primary-color);
            font-size: 1.3rem;
        }

        .mobile-new-route-btn {
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            background: var(--primary-gradient);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
        }

        .mobile-actions-row {
            display: flex;
            gap: 8px;
            padding: 12px 16px !important;
        }

        .mobile-action-btn {
            flex: 1;
            padding: 12px;
            border-radius: var(--radius-sm);
            border: 2px solid var(--border-light);
            background: var(--bg-white);
            color: var(--text-medium);
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .mobile-search-row {
            padding: 0 16px 16px !important;
        }

        .mobile-search-container {
            display: flex;
            gap: 4px;
            width: 100%;
        }

        .mobile-search-input {
            flex: 1;
            padding: 12px;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-sm);
            font-size: 20px;
            background: var(--bg-white);
            color: var(--text-dark);
        }

        .mobile-search-btn {
            width: 48px;
            height: 48px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* ===== ДЕСКТОПНЫЙ ИНСТРУМЕНТАЛЬНЫЙ БЛОК (скрыт на мобильных) ===== */
        .controls-card {
            display: none !important;
        }

        /* Контейнер активных фильтров */
        #activeFiltersContainer {
            margin: 5px 15px !important;
            padding: 0 !important;
        }

        /* ===== ТАБЛИЦА - РАСТЯГИВАЕМ НА ВСЮ ШИРИНУ ===== */
        .table-responsive {
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            width: 100vw !important;
            position: relative !important;
            left: 50% !important;
            right: 50% !important;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Внутренний контейнер для таблицы */
        .table-responsive .data-table-wrapper {
            min-width: 100%;
            display: inline-block;
        }

        /* Таблица на всю ширину */
        .data-table {
            min-width: 1200px;
            width: 100%;
            margin: 0;
            border-collapse: collapse;
            white-space: nowrap !important;
        }

        /* Ячейки таблицы */
        .data-table th,
        .data-table td {
            padding: 12px 8px;
            font-size: 13px;
            vertical-align: middle;
            white-space: nowrap !important;
        }

        /* Фиксируем высоту строк */
        .data-table tbody tr {
            height: auto;
            min-height: 50px;
        }

        /* Ячейка с действиями */
        .actions-cell {
            display: flex;
            gap: 4px;
            justify-content: center;
            align-items: center;
            padding: 8px !important;
            height: 100%;
            min-height: 50px;
        }

        /* Кнопки действий */
        .btn-icon {
            width: 32px;
            height: 32px;
            padding: 0;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        /* Ячейки с числами */
        .cost-cell,
        .fuel-cell,
        .fine-cell,
        .salary-cell {
            text-align: right;
            padding-right: 12px;
        }

        /* Пагинация */
        .pagination {
            margin: 15px 15px !important;
            flex-wrap: wrap;
            justify-content: center;
        }

        .pagination-btn {
            min-width: 36px;
            height: 36px;
            font-size: 13px;
        }

        .pagination-info {
            width: 100%;
            text-align: center;
            margin-top: 10px;
        }

        /* Индикатор горизонтальной прокрутки */
        .table-responsive.has-scroll::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 40px;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 10;
        }

        .table-responsive.has-scroll::after {
            opacity: 1;
        }

        /* Подсказка о прокрутке */
        .scroll-hint {
            display: block;
            text-align: center;
            padding: 8px;
            background: var(--bg-lighter);
            color: var(--text-light);
            font-size: 12px;
            border-bottom: 1px solid var(--border-light);
        }

        .scroll-hint i {
            margin-right: 5px;
            animation: scrollHint 1.5s infinite;
        }

        @keyframes scrollHint {
            0% { transform: translateX(0); }
            50% { transform: translateX(5px); }
            100% { transform: translateX(0); }
        }
    }

    /* Для очень маленьких экранов */
    @media (max-width: 480px) {
        .data-table th,
        .data-table td {
            padding: 10px 6px;
            font-size: 12px;
        }

        .btn-icon {
            width: 28px;
            height: 28px;
            font-size: 12px;
        }

        .actions-cell {
            gap: 2px;
            padding: 6px !important;
        }

        .map-card {
            height: 200px !important;
        }

        /* Мобильный инструментальный блок на совсем маленьких */
        .mobile-tools-block {
            margin: 12px !important;
            width: calc(100% - 24px) !important;
        }

        .mobile-tools-header {
            padding: 10px 12px !important;
        }

        .mobile-actions-row {
            padding: 10px 12px !important;
        }

        .mobile-search-row {
            padding: 0 12px 12px !important;
        }

        .mobile-action-btn {
            padding: 10px;
            font-size: 13px;
        }

        .mobile-search-input {
            padding: 10px;
            font-size: 10px;
        }

        .mobile-search-btn {
            width: 44px;
            height: 44px;
        }

        /* Пагинация */
        .pagination {
            margin: 12px 12px !important;
        }
    }

    /* ==================== ПЛАВАЮЩИЙ ЗАГОЛОВОК ДЛЯ МОБИЛЬНЫХ ==================== */

    @media (max-width: 1050px) {
        .floating-header {
            top: 54px !important;
            left: 0 !important;
            right: 0 !important;
            border-radius: 0 !important;
        }

        .floating-header-content {
            border-radius: 0 !important;
        }

        .floating-header-content::before,
        .floating-header-content::after {
            border-radius: 0 !important;
        }

        .floating-header-row {
            min-width: 1200px;
        }

        .floating-cell {
            padding: 10px 8px !important;
            font-size: 12px !important;
            border-radius: 0 !important;
        }
    }

    /* ==================== МОБИЛЬНЫЕ ОКНА РЕДАКТИРОВАНИЯ ==================== */

    /* Оверлей */
    .mobile-edit-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 100006;
    }

    .mobile-edit-overlay.active {
        display: block;
    }

    /* Модальное окно */
    .mobile-edit-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--bg-white);
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        z-index: 100007;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        max-height: 70vh;
        overflow: hidden;
    }

    .mobile-edit-modal.active {
        transform: translateY(0);
        display: block;
    }

    /* Заголовок */
    .mobile-edit-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 2px solid var(--border-light);
        background: var(--bg-white);
    }

    .mobile-edit-header h3 {
        margin: 0;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-edit-header h3 i {
        font-size: 1.3rem;
    }

    .mobile-edit-header .mobile-edit-close-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: white;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .mobile-edit-header .mobile-edit-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    .mobile-edit-header:not([style*="background"]) .mobile-edit-close-btn {
        background: var(--bg-lighter);
        color: var(--text-medium);
    }

    .mobile-edit-header:not([style*="background"]) .mobile-edit-close-btn:hover {
        background: var(--bg-light);
        color: var(--danger-color);
    }

    /* Убираем футер у просмотровых окон */
    .mobile-view-modal .mobile-edit-footer {
        display: none;
    }

    /* Добавляем отступ снизу для контента */
    .mobile-view-modal .mobile-edit-content {
        padding-bottom: 20px;
    }

    /* Контент */
    .mobile-edit-content {
        padding: 20px;
        overflow-y: auto;
        max-height: calc(70vh - 130px);
        -webkit-overflow-scrolling: touch;
    }

    /* Поле ввода */
    .mobile-edit-field {
        margin-bottom: 0;
    }

    .mobile-edit-field label {
        display: block;
        font-size: 13px;
        color: var(--text-light);
        margin-bottom: 6px;
        font-weight: 500;
    }

    /* Стили для полей с ошибкой */
    .mobile-edit-field.has-error .mobile-edit-input {
        border-color: #dc3545 !important;
    }

    .mobile-edit-field.has-error label {
        color: #dc3545 !important;
    }

    .mobile-edit-input {
        width: 100%;
        padding: 14px 16px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        font-size: 18px;
        background: var(--bg-white);
        color: var(--text-dark);
        transition: all 0.2s;
        -webkit-appearance: none;
        appearance: none;
    }

    .mobile-edit-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* Специально для числовых полей - убираем стрелки */
    .mobile-edit-input[type="text"]::-webkit-outer-spin-button,
    .mobile-edit-input[type="text"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Футер с кнопками */
    .mobile-edit-footer {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border-top: 2px solid var(--border-light);
        background: var(--bg-white);
    }

    /* Кнопка закрытия (круглая) */
    .mobile-edit-close-btn {
        width: 48px;
        height: 48px;
        border: none;
        background: var(--bg-lighter);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: var(--text-medium);
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .mobile-edit-close-btn:hover {
        background: var(--bg-light);
        color: var(--danger-color);
        transform: scale(1.05);
    }

    /* Кнопка сохранения (прямоугольная) */
    .mobile-edit-save-btn {
        flex: 1;
        height: 48px;
        border: none;
        background: var(--primary-gradient);
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-edit-save-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    /* ==================== СТАТУСЫ ТТН В МОБИЛЬНОМ ОКНЕ ==================== */

    .mobile-ttn-status-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    .mobile-ttn-status-btn {
        padding: 16px 20px !important;
        border: 2px solid var(--border-light) !important;
        border-radius: 12px !important;
        background: var(--bg-white) !important;
        color: var(--text-dark) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        text-align: left !important;
    }

    .mobile-ttn-status-btn i:first-child {
        font-size: 20px !important;
        width: 24px !important;
    }

    .mobile-ttn-status-btn i.fa-check {
        margin-left: auto !important;
        transition: opacity 0.2s ease !important;
        color: white !important;
    }

    /* Активные состояния */
    .mobile-ttn-status-btn.paid.active {
        background: #059669 !important;
        border-color: #059669 !important;
        color: white !important;
    }

    .mobile-ttn-status-btn.pending.active {
        background: #d97706 !important;
        border-color: #d97706 !important;
        color: white !important;
    }

    .mobile-ttn-status-btn.unpaid.active {
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        color: white !important;
    }

    .mobile-ttn-status-btn.active i:first-child {
        color: white !important;
    }

    .mobile-ttn-status-btn i {
        font-size: 20px;
        width: 24px;
        color: var(--text-light);
    }

    .mobile-ttn-status-btn span {
        flex: 1;
    }

    /* Эффект при наведении */
    .mobile-ttn-status-btn:hover {
        transform: translateX(5px);
        border-color: var(--primary-color);
        background: var(--bg-lighter);
    }


    .mobile-ttn-status-btn.paid.active i {
        color: white !important;
    }

    .mobile-ttn-status-btn.pending.active i {
        color: white !important;
    }


    .mobile-ttn-status-btn.unpaid.active i {
        color: white !important;
    }

    /* Неактивные состояния */
    .mobile-ttn-status-btn.paid:not(.active) {
        background: rgba(5, 150, 105, 0.05);
        border-color: rgba(5, 150, 105, 0.3);
    }

    .mobile-ttn-status-btn.pending:not(.active) {
        background: rgba(217, 119, 6, 0.05);
        border-color: rgba(217, 119, 6, 0.3);
    }

    .mobile-ttn-status-btn.unpaid:not(.active) {
        background: rgba(220, 38, 38, 0.05);
        border-color: rgba(220, 38, 38, 0.3);
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-ttn-status-btn {
            padding: 14px 16px;
            font-size: 15px;
        }

        .mobile-ttn-status-btn i {
            font-size: 18px;
        }
    }

    /* ==================== ОКНА ПРОСМОТРА ==================== */

    .mobile-view-modal .mobile-edit-header h3 {
        color: white;
    }

    .mobile-view-modal .mobile-edit-header h3 i {
        color: white;
    }

    .mobile-view-footer {
        display: flex !important;
        justify-content: flex-end !important; /* Выравниваем крестик справа */
        padding: 16px 20px !important;
        border-top: 2px solid var(--border-light);
        background: var(--bg-white);
    }

    /* Кнопка закрытия для просмотровых окон */
    .mobile-view-close-btn {
        width: 48px !important;
        height: 48px !important;
        border: none !important;
        background: var(--bg-lighter) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        cursor: pointer !important;
        color: var(--text-medium) !important;
        transition: all 0.2s !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .mobile-view-close-btn:hover {
        background: var(--bg-light) !important;
        color: var(--danger-color) !important;
        transform: scale(1.05) !important;
    }

    /* Для цветных заголовков оставляем как есть */
    .mobile-view-modal .mobile-edit-header {
        /* стили заголовка не меняем */
    }

    /* Убираем лишние кнопки если они были */
    .mobile-view-modal .mobile-edit-save-btn {
        display: none !important;
    }

    /* ==================== МОБИЛЬНОЕ ОКНО НОМЕНКЛАТУРЫ (ТОЛЬКО ПРОСМОТР) ==================== */

    .mobile-items-list {
        background: var(--bg-white);
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid var(--border-light);
    }

    .mobile-items-list-header {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        background: var(--bg-lighter);
        border-bottom: 2px solid var(--border-light);
        font-weight: 600;
        color: var(--text-dark);
    }

    .mobile-items-list-header .item-name {
        flex: 2;
        padding-left: 8px;
    }

    .mobile-items-list-header .item-quantity {
        flex: 0.8;
        text-align: center;
    }

    .mobile-items-list-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-light);
        background: var(--bg-white);
        transition: background 0.2s;
    }

    .mobile-items-list-item:last-child {
        border-bottom: none;
    }

    .mobile-items-list-item:hover {
        background: var(--bg-lighter);
    }

    .mobile-items-list-item .item-name {
        flex: 2;
        font-weight: 500;
        color: var(--text-dark);
        padding-left: 8px;
        word-break: break-word;
    }

    .mobile-items-list-item .item-quantity {
        flex: 0.8;
        text-align: center;
        font-weight: 600;
        color: var(--primary-color);
        background: rgba(102, 126, 234, 0.1);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 14px;
    }

    .mobile-items-list-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        font-weight: 700;
        color: var(--text-dark);
        border-top: 2px solid var(--border-light);
    }

    .mobile-items-list-total span:last-child {
        color: var(--primary-color);
        font-size: 18px;
    }

    /* Пустое состояние */
    .mobile-items-list-empty {
        padding: 40px 20px;
        text-align: center;
        color: var(--text-light);
        font-size: 16px;
        background: var(--bg-lighter);
        border-radius: 12px;
    }

    .mobile-items-list-empty i {
        font-size: 48px;
        margin-bottom: 15px;
        color: var(--primary-color);
        opacity: 0.5;
    }

    /* Стили для футера с одним крестиком */
    .mobile-view-footer {
        display: flex !important;
        justify-content: right !important; /* Центрируем крестик */
        padding: 16px 20px !important;
        border-top: 2px solid var(--border-light);
        background: var(--bg-white);
    }

    .mobile-view-close-btn {
        width: 48px !important;
        height: 48px !important;
        border: none !important;
        background: var(--bg-lighter) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        cursor: pointer !important;
        color: var(--text-medium) !important;
        transition: all 0.2s !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .mobile-view-close-btn:hover {
        background: var(--bg-light) !important;
        color: var(--danger-color) !important;
        transform: scale(1.05) !important;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-items-list-header .item-name,
        .mobile-items-list-item .item-name {
            font-size: 14px;
        }

        .mobile-items-list-header .item-quantity,
        .mobile-items-list-item .item-quantity {
            font-size: 13px;
            padding: 3px 8px;
        }

        .mobile-items-list-total {
            padding: 14px;
            font-size: 15px;
        }

        .mobile-items-list-total span:last-child {
            font-size: 16px;
        }

        .mobile-view-close-btn {
            width: 44px !important;
            height: 44px !important;
            font-size: 18px !important;
        }
    }

    /* Примечание */
    .mobile-note-content {
        background: var(--bg-lighter);
        border-radius: 12px;
        padding: 16px;
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-dark);
        white-space: pre-wrap;
        word-wrap: break-word;
        min-height: 100px;
        border-left: 4px solid #f97316;
    }

    /* Анимации */
    @keyframes slideDown {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .mobile-edit-modal.active {
        animation: slideDown 0.3s ease;
    }

    /* Адаптация для очень маленьких экранов */
    @media (max-width: 480px) {
        .mobile-edit-header {
            padding: 14px 16px;
        }

        .mobile-edit-header h3 {
            font-size: 1.1rem;
        }

        .mobile-edit-content {
            padding: 16px;
        }

        .mobile-edit-input {
            padding: 12px 14px;
            font-size: 16px;
        }

        .mobile-edit-footer {
            padding: 14px 16px;
        }

        .mobile-edit-close-btn {
            width: 44px;
            height: 44px;
            font-size: 18px;
        }

        .mobile-edit-save-btn {
            height: 44px;
            font-size: 15px;
        }

        .mobile-ttn-status-btn {
            padding: 12px 14px;
            font-size: 14px;
        }
    }

    /* Специальные стили для iPhone */
    @supports (-webkit-touch-callout: none) {
        .mobile-edit-input {
            font-size: 16px !important; /* Предотвращает зум на iOS */
        }
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-items-list-header .item-name,
        .mobile-items-list-item .item-name {
            font-size: 14px;
        }

        .mobile-items-list-header .item-quantity,
        .mobile-items-list-item .item-quantity {
            font-size: 13px;
            padding: 3px 8px;
        }

        .mobile-items-list-item .item-delete-btn {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

        .mobile-items-list-total {
            padding: 14px;
            font-size: 15px;
        }

        .mobile-items-list-total span:last-child {
            font-size: 16px;
        }
    }

    /* Анимация удаления */
    @keyframes deleteFadeOut {
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 0;
            transform: translateX(30px);
        }
    }

    .mobile-items-list-item.deleting {
        animation: deleteFadeOut 0.3s ease forwards;
        pointer-events: none;
    }

    /* ==================== СТАТУСЫ ТТН В МОБИЛЬНОМ ОКНЕ - УСИЛЕННЫЕ СТИЛИ ==================== */


    .mobile-ttn-status-btn i {
        font-size: 20px !important;
        width: 24px !important;
        color: var(--text-light) !important;
    }

    /* ----- АКТИВНЫЕ СОСТОЯНИЯ (с максимальной специфичностью) ----- */


    .mobile-ttn-status-btn.paid.active i {
        color: white !important;
    }


    .mobile-ttn-status-btn.pending.active i {
        color: white !important;
    }


    .mobile-ttn-status-btn.unpaid.active i {
        color: white !important;
    }

    /* ----- НЕАКТИВНЫЕ СОСТОЯНИЯ ----- */

    .mobile-ttn-status-btn.paid:not(.active) {
        background: rgba(5, 150, 105, 0.05) !important;
        border-color: rgba(5, 150, 105, 0.3) !important;
    }

    .mobile-ttn-status-btn.pending:not(.active) {
        background: rgba(217, 119, 6, 0.05) !important;
        border-color: rgba(217, 119, 6, 0.3) !important;
    }

    .mobile-ttn-status-btn.unpaid:not(.active) {
        background: rgba(220, 38, 38, 0.05) !important;
        border-color: rgba(220, 38, 38, 0.3) !important;
    }

    /* Поле ТТН в мобильном окне */
    #mobileTtnEditInput {
        transition: border-color 0.3s ease;
    }

    #mobileTtnEditInput.paid {
        border-color: #059669 !important;
    }

    #mobileTtnEditInput.pending {
        border-color: #d97706 !important;
    }

    #mobileTtnEditInput.unpaid {
        border-color: #dc2626 !important;
    }

    /* Стили для галочки */
    .mobile-ttn-status-btn .check-icon {
        margin-left: auto !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
        color: white !important;
        font-size: 16px !important;
    }

    .mobile-ttn-status-btn.active .check-icon {
        opacity: 1 !important;
    }

    /* Цвета иконок в зависимости от статуса */
    .mobile-ttn-status-btn.paid.active .check-icon {
        color: white !important;
    }

    .mobile-ttn-status-btn.pending.active .check-icon {
        color: white !important;
    }

    .mobile-ttn-status-btn.unpaid.active .check-icon {
        color: white !important;
    }

    /* Поле ТТН в мобильном окне */
    #mobileTtnEditInput {
        transition: border-color 0.3s ease;
        border-width: 2px !important;
        border-style: solid !important;
    }

    #mobileTtnEditInput.paid {
        border-color: #059669 !important;
    }

    #mobileTtnEditInput.pending {
        border-color: #d97706 !important;
    }

    #mobileTtnEditInput.unpaid {
        border-color: #dc2626 !important;
    }

    /* Альтернативное CSS-решение */
    @media (max-width: 1050px) {
        .data-table td {
            vertical-align: middle !important;
            height: 56px;
        }

        .actions-cell {
            height: 100% !important;
            min-height: inherit !important;
        }

        /* Принудительное выравнивание для всех браузеров */
        .data-table tbody tr {
            display: table-row;
        }

        .data-table td {
            display: table-cell;
        }
    }

    /* Стили для кнопки статуса ТТН */
    #mobileTtnStatusBtn {
        transition: color 0.3s ease;
    }

    #mobileTtnStatusBtn i {
        transition: color 0.3s ease;
    }

    /* Цвета для разных статусов */
    #mobileTtnStatusBtn.status-paid,
    #mobileTtnStatusBtn.status-paid i {
        color: #059669 !important;
    }

    #mobileTtnStatusBtn.status-pending,
    #mobileTtnStatusBtn.status-pending i {
        color: #d97706 !important;
    }

    #mobileTtnStatusBtn.status-unpaid,
    #mobileTtnStatusBtn.status-unpaid i {
        color: var(--text-light) !important;
    }

    /* ==================== МОБИЛЬНОЕ ОКНО УДАЛЕНИЯ МАРШРУТА ==================== */

    .mobile-delete-modal .mobile-edit-header {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    }

    .mobile-delete-modal .mobile-edit-header h3 {
        color: white;
    }

    .mobile-delete-modal .mobile-edit-header h3 i {
        color: white;
    }

    .mobile-DeleteItem-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 100010;
    }

    .mobile-DeleteItem-overlay.active {
        display: block;
    }

    #mobileDeleteItemModal {
        z-index: 100011;
    }
    .mobile-delete-icon {
        text-align: center;
        margin: 20px 0 10px;
    }

    .mobile-delete-icon i {
        font-size: 64px;
        color: #dc3545;
        opacity: 0.8;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 0.8;
        }
        50% {
            transform: scale(1.1);
            opacity: 1;
        }
    }

    .mobile-delete-message {
        text-align: center;
        margin-bottom: 20px;
    }

    .mobile-delete-message p {
        font-size: 18px;
        color: var(--text-dark);
        margin-bottom: 8px;
    }

    .mobile-delete-route-info {
        font-size: 16px !important;
        color: var(--text-medium) !important;
        background: var(--bg-lighter);
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid var(--border-light);
        word-break: break-word;
    }

    .mobile-delete-warning {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        background: rgba(220, 53, 69, 0.1);
        border-radius: 12px;
        color: #dc3545;
        font-size: 14px;
        margin-top: 20px;
    }

    .mobile-delete-warning i {
        font-size: 18px;
    }

    /* Футер с кнопками */
    .mobile-delete-footer {
        display: flex !important;
        gap: 12px !important;
        padding: 16px 20px !important;
        border-top: 2px solid var(--border-light);
        background: var(--bg-white);
    }

    .mobile-delete-cancel-btn {
        flex: 1;
        padding: 16px 10px;
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: 12px;
        color: var(--text-medium);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .mobile-delete-cancel-btn:hover {
        background: var(--bg-light);
        border-color: var(--text-medium);
        transform: translateY(-2px);
    }

    .mobile-delete-cancel-btn:active {
        transform: translateY(0);
    }

    .mobile-delete-confirm-btn {
        flex: 1;
        padding: 16px 10px;
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    .mobile-delete-confirm-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4);
    }

    .mobile-delete-confirm-btn:active {
        transform: translateY(0);
    }

    .mobile-delete-confirm-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-delete-icon i {
            font-size: 48px;
        }

        .mobile-delete-message p {
            font-size: 16px;
        }

        .mobile-delete-route-info {
            font-size: 14px !important;
            padding: 10px 12px;
        }

        .mobile-delete-cancel-btn,
        .mobile-delete-confirm-btn {
            padding: 14px 8px;
            font-size: 15px;
        }
    }

    @media (max-width: 360px) {
        .mobile-delete-footer {
            flex-direction: column;
            gap: 8px;
        }

        .mobile-delete-cancel-btn,
        .mobile-delete-confirm-btn {
            width: 100%;
        }
    }

    /* Контейнер для поля даты */
    .mobile-route-field.date-field-wrapper {
        width: auto;
        min-width: 140px;
        max-width: 200px;
    }

    .mobile-date-display {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-date-display:hover {
        border-color: var(--primary-color);
    }

    .mobile-date-display .date-text {
        font-size: 16px;
        color: var(--text-dark);
    }

    .mobile-date-display .date-text.empty {
        color: var(--text-light);
    }

    .mobile-date-display i {
        color: var(--primary-color);
        font-size: 18px;
    }

    /* Само поле date */
    .mobile-route-field.date-field-wrapper input[type="date"] {
        width: 100%;
        position: relative;
        z-index: 2;
        height: 48px;
        cursor: pointer;
        background: transparent !important; /* Прозрачный фон */
        color: transparent !important; /* Прячем текст в самом поле */
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
    }

    /* Отображение даты */
    .mobile-route-field.date-field-wrapper .date-display {
        position: absolute;
        top: 2px; /* Отступ под рамку */
        left: 2px; /* Отступ под рамку */
        right: 2px; /* Отступ под рамку */
        bottom: 2px; /* Отступ под рамку */
        display: flex;
        align-items: center;
        padding: 0 10px;
        background: var(--bg-white);
        border-radius: calc(var(--radius-sm) - 2px);
        font-size: 16px;
        color: var(--text-dark);
        pointer-events: none;
        z-index: 1;
        transition: background-color 0.2s;
    }

    /* Когда поле в фокусе - убираем отображение, показываем нативный календарь */
    .mobile-route-field.date-field-wrapper input[type="date"]:focus {
        background: var(--bg-white) !important;
        color: var(--text-dark) !important;
    }

    .mobile-route-field.date-field-wrapper input[type="date"]:focus + .date-display {
        opacity: 0;
        pointer-events: none;
    }

    /* Стили для пустого поля */
    .mobile-route-field.date-field-wrapper .date-display.empty {
        color: var(--text-light);
    }

    /* Адаптация для iPhone */
    @supports (-webkit-touch-callout: none) {
        .mobile-route-field.date-field-wrapper input[type="date"] {
            height: 48px;
            line-height: 48px;
        }
    }

    /* ==================== МОБИЛЬНЫЙ КАЛЕНДАРЬ ==================== */
    .mobile-calendar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 100008;
    }

    .mobile-calendar-overlay.active {
        display: block;
    }

    .mobile-calendar-modal {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-white);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        z-index: 100009;
        flex-direction: column;
        max-height: 80vh;
        animation: slideUp 0.3s ease;
    }

    .mobile-calendar-modal.active {
        display: flex;
    }

    .mobile-calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 2px solid var(--border-light);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .mobile-calendar-header h3 {
        margin: 0;
        font-size: 1.2rem;
        color: white;
    }

    .mobile-calendar-close {
        width: 40px;
        height: 40px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: white;
    }

    .mobile-calendar-content {
        padding: 20px;
        overflow-y: auto;
    }

    .mobile-calendar-month-year {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .calendar-nav-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: var(--bg-lighter);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-dark);
        transition: all 0.2s;
    }

    .calendar-nav-btn:hover {
        background: var(--bg-light);
    }

    .mobile-calendar-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        margin-bottom: 10px;
        font-weight: 600;
        color: var(--text-medium);
        font-size: 14px;
    }

    .mobile-calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .calendar-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s;
        background: var(--bg-white);
        color: var(--text-dark);
        border: 1px solid transparent;
    }

    .calendar-day:hover {
        background: var(--bg-lighter);
    }

    .calendar-day.selected {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
    }

    .calendar-day.today {
        border: 2px solid var(--primary-color);
        font-weight: 600;
    }

    .calendar-day.other-month {
        color: var(--text-light);
        opacity: 0.5;
    }

    .calendar-day.disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    .mobile-calendar-footer {
        display: flex;
        gap: 12px;
        padding: 16px 20px;
        border-top: 2px solid var(--border-light);
    }

    .calendar-today-btn,
    .calendar-clear-btn {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .calendar-today-btn {
        background: var(--primary-color);
        color: white;
    }

    .calendar-today-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .calendar-clear-btn {
        background: var(--bg-lighter);
        color: var(--text-medium);
        border: 1px solid var(--border-light);
    }

    .calendar-clear-btn:hover {
        background: var(--bg-light);
    }


    /* ==================== ОШИБКИ ТТН ==================== */

    .mobile-ttn-error {
        margin-top: 8px;
        padding: 12px 16px;
        background: rgba(220, 38, 38, 0.1);
        border-left: 4px solid #dc2626;
        border-radius: 8px;
        color: #dc2626;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        animation: slideDown 0.3s ease;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-ttn-error i {
        font-size: 18px;
        flex-shrink: 0;
    }

    .mobile-ttn-error .ttn-error-link {
        color: #dc2626;
        font-weight: 600;
        text-decoration: underline;
        margin-left: 4px;
    }

    .mobile-ttn-error .ttn-error-link:hover {
        text-decoration: none;
        opacity: 0.8;
    }

    #mobileRouteTtn.is-invalid,
    #mobileTtnEditInput.is-invalid {
        border-color: #dc2626 !important;
        background-color: rgba(220, 38, 38, 0.05);
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-route-row {
            gap: 10px;
        }

        .mobile-item-row {
            flex-wrap: wrap;
        }

        .mobile-item-name {
            flex: 1 1 100%;
        }

        .mobile-item-quantity {
            flex: 1 1 calc(100% - 52px);
        }
    }

    /* ==================== ГЛОБАЛЬНАЯ ОШИБКА ТТН ==================== */

    .mobile-ttn-global-error {
        margin: 0 20px 16px 20px;
        padding: 16px 20px;
        background: rgba(220, 38, 38, 0.1);
        border-left: 4px solid #dc2626;
        border-radius: 12px;
        color: #dc2626;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        animation: slideUp 0.3s ease;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
        border: 1px solid rgba(220, 38, 38, 0.2);
        position: relative;
    }

    .mobile-ttn-global-error i {
        font-size: 24px;
        flex-shrink: 0;
        color: #dc2626;
    }

    .mobile-ttn-global-error .error-text {
        flex: 1;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .mobile-ttn-global-error .ttn-error-link {
        color: #dc2626;
        font-weight: 700;
        text-decoration: underline;
        background: rgba(220, 38, 38, 0.1);
        padding: 4px 12px;
        border-radius: 20px;
        display: inline-block;
        transition: all 0.2s;
    }

    .mobile-ttn-global-error .ttn-error-link:hover {
        background: rgba(220, 38, 38, 0.2);
        text-decoration: none;
    }

    /* Кнопка закрытия */
    .mobile-ttn-global-error .error-close-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(220, 38, 38, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #dc2626;
        font-size: 16px;
        transition: all 0.2s;
        flex-shrink: 0;
        padding: 0;
        margin-left: auto;
    }

    .mobile-ttn-global-error .error-close-btn:hover {
        background: rgba(220, 38, 38, 0.2);
        transform: scale(1.1);
    }

    /* Анимация появления */
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Анимация исчезновения */
    .mobile-ttn-global-error.fade-out {
        animation: fadeOut 0.3s ease forwards;
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }

    /* Для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-ttn-global-error {
            margin: 0 16px 12px 16px;
            padding: 14px 16px;
            font-size: 14px;
        }

        .mobile-ttn-global-error i {
            font-size: 20px;
        }

        .mobile-ttn-global-error .error-close-btn {
            width: 28px;
            height: 28px;
            font-size: 14px;
        }
    }

    /* ==================== ОТКЛЮЧЕНИЕ ЗУМА НА МОБИЛЬНЫХ ==================== */

    /* Отключаем зум для всех интерактивных элементов на мобильных */
    @media (max-width: 1050px) {
        button,
        .mobile-month-btn,
        .mobile-select-btn,
        .mobile-apply-btn,
        .mobile-date-display,
        .mobile-filter-header,
        .mobile-filter-option,
        .mobile-export-option,
        .mobile-route-save-btn,
        .mobile-route-close,
        .mobile-filters-close,
        .mobile-select-close,
        .mobile-edit-close-btn,
        .mobile-delete-confirm-btn,
        .mobile-delete-cancel-btn,
        .calendar-nav-btn,
        .calendar-today-btn,
        .calendar-clear-btn {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Увеличиваем размер шрифта на полях ввода, но оставляем кнопки без зума */
        input, select, textarea {
            font-size: 16px !important; /* Предотвращает зум на iOS при фокусе */
        }
    }

    /* ==================== МОБИЛЬНОЕ ОКНО ВЫБОРА МЕСЯЦА ==================== */

    .mobile-month-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: var(--bg-lighter);
        border-bottom: 1px solid var(--border-light);
    }

    .mobile-month-nav-btn {
        width: 44px;
        height: 44px;
        border: none;
        background: var(--bg-white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-dark);
        font-size: 18px;
        transition: all 0.2s;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-month-nav-btn:hover,
    .mobile-month-nav-btn:active {
        background: var(--primary-color);
        color: white;
    }

    .mobile-month-year-display {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .mobile-month-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 20px;
    }

    .mobile-month-option {
        padding: 16px 8px;
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 16px;
        font-weight: 500;
        color: var(--text-dark);
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-month-option:hover,
    .mobile-month-option:active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        transform: scale(0.98);
    }

    .mobile-month-option.selected {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    /* На десктопе окно выбора месяца показываем по центру */
    @media (min-width: 1051px) {
        .mobile-select-modal#mobileMonthModal {
            left: 50%;
            right: auto;
            bottom: auto;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 420px;
            max-width: 90vw;
            max-height: 80vh;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .mobile-select-modal#mobileMonthModal .mobile-select-header {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-month-nav-btn {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

        .mobile-month-year-display {
            font-size: 18px;
        }

        .mobile-month-option {
            padding: 14px 6px;
            font-size: 14px;
        }
    }

    /* ==================== МОБИЛЬНОЕ ОКНО УДАЛЕНИЯ ЭЛЕМЕНТА ==================== */

    .mobile-delete-item-info {
        font-size: 18px !important;
        font-weight: 600;
        color: var(--text-dark) !important;
        background: var(--bg-lighter);
        padding: 16px 20px;
        border-radius: 12px;
        border: 2px solid var(--border-light);
        word-break: break-word;
        margin: 16px 0 !important;
        text-align: center;
    }

    .mobile-delete-additional-info {
        margin-top: 16px;
        padding: 12px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 8px;
        color: var(--text-medium);
        font-size: 13px;
        text-align: center;
        border: 1px dashed var(--primary-color);
    }

    #mobileDeletePaymentOverlay {
        z-index: 100010 !important;
    }

    #mobileDeletePaymentModal {
        z-index: 100011 !important;
    }

    /* Мобильное окно удаления платежа */
    #mobileDeletePaymentModal .mobile-delete-item-info {
        font-size: 16px !important;
        font-weight: 500;
        color: var(--text-dark) !important;
        background: var(--bg-lighter);
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid var(--border-light);
        word-break: break-word;
        margin-top: 10px;
    }

    #mobileDeletePaymentModal .mobile-delete-item-info div {
        margin-bottom: 5px;
    }

    #mobileDeletePaymentModal .mobile-delete-item-info div:last-child {
        margin-bottom: 0;
    }

    /* Анимация для удаления */
    @keyframes deletePulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }

    .mobile-delete-confirm-btn:not(:disabled) {
        animation: deletePulse 2s infinite;
    }

    .mobile-delete-confirm-btn:disabled {
        animation: none;
        opacity: 0.6;
    }

    /* ==================== МОБИЛЬНОЕ ОКНО ОШИБКИ ==================== */

    .mobile-error-modal .mobile-edit-header {
        border-bottom: none;
    }

    .mobile-error-icon {
        text-align: center;
        margin: 20px 0 10px;
    }

    .mobile-error-icon i {
        font-size: 64px;
        color: #dc3545;
        opacity: 0.8;
        animation: errorPulse 1.5s infinite;
    }

    @keyframes errorPulse {
        0%, 100% {
            transform: scale(1);
            opacity: 0.8;
        }
        50% {
            transform: scale(1.1);
            opacity: 1;
        }
    }

    .mobile-error-message {
        text-align: center;
        padding: 20px;
        font-size: 16px;
        color: var(--text-dark);
        line-height: 1.6;
        background: var(--bg-lighter);
        border-radius: 12px;
        margin: 10px 0;
        border-left: 4px solid #dc3545;
        word-break: break-word;
    }

    .mobile-error-footer {
        display: flex !important;
        justify-content: center !important;
        padding: 16px 20px !important;
        border-top: 2px solid var(--border-light);
        background: var(--bg-white);
    }

    .mobile-error-ok-btn {
        min-width: 200px;
        padding: 16px 32px;
        background: var(--primary-gradient);
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .mobile-error-ok-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

    .mobile-error-ok-btn:active {
        transform: translateY(0);
    }

    .mobile-error-ok-btn i {
        font-size: 18px;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mobile-error-icon i {
            font-size: 48px;
        }

        .mobile-error-message {
            font-size: 15px;
            padding: 16px;
        }

        .mobile-error-ok-btn {
            min-width: 160px;
            padding: 14px 24px;
            font-size: 15px;
        }
    }

    /* Стили для объединенных ячеек */
    .data-table td[colspan] {
        padding: 6px 8px !important;
    }

    /* Линия-разделитель */
    .data-table td .border-top {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin: 2px 0;
    }

    /* Кружки А и Б */
    .route-point-marker {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        color: white;
        flex-shrink: 0;
    }

    .route-point-marker.start {
        background: #059669;
    }

    .route-point-marker.end {
        background: #dc3545;
    }

    /* Соединительная линия */
    .route-points-connector {
        width: 2px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        margin: 2px 0;
    }

    /* Более прозрачные разделители */
    .divider-line {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 2px auto;
    }

    .cost-rectangle:hover .divider-line,
    .ttn-rectangle:hover .divider-line,
    .salary-rectangle:hover .divider-line {
        border-top-color: rgba(255, 255, 255, 0.3);
    }

    /* Кликабельные кружки */
    .clickable-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--primary-gradient);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        flex-shrink: 0;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .clickable-circle:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    /* Прямоугольные кнопки */
    .rectangle-button {
        background: var(--bg-lighter);
        border: 1px solid var(--border-light);
        border-radius: 8px;
        padding: 4px 8px;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-block;
        width: auto;
        min-width: 70px;
    }

    .rectangle-button:hover {
        background: var(--bg-light);
        border-color: var(--primary-color);
        transform: translateY(-1px);
    }

    /* Текст взноса */
    .contribution-text {
        font-size: 10px;
        color: var(--text-light);
    }

    /* Красный текст для штрафа */
    .fine-text {
        color: #dc3545;
        font-size: 10px;
    }

    /* ==================== КРУЖКИ ЗОН С ЦВЕТАМИ ==================== */

    /* Кружки зон */
    .zone-circle {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 600;
        color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .zone-circle:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .zone-circle.empty {
        background: rgba(102, 126, 234, 0.3);
        color: rgba(255, 255, 255, 0.7);
    }

    /* 20 цветов для зон 1-20 */
    .zone-color-1 { background: #3498DB; } /* Синий */
    .zone-color-1 { background: #FF6B6B; } /* Красный */
    .zone-color-2 { background: #4ECDC4; } /* Бирюзовый */
    .zone-color-3 { background: #45B7D1; } /* Голубой */
    .zone-color-4 { background: #96CEB4; } /* Мятный */
    .zone-color-5 { background: #FFE194; } /* Желтый */
    .zone-color-6 { background: #B19CD9; } /* Лавандовый */
    .zone-color-7 { background: #FF9F1C; } /* Оранжевый */
    .zone-color-8 { background: #2ECC71; } /* Зеленый */
    .zone-color-9 { background: #E67E22; } /* Морковный */
    .zone-color-10 { background: #3498DB; } /* Синий */
    .zone-color-11 { background: #9B59B6; } /* Фиолетовый */
    .zone-color-12 { background: #1ABC9C; } /* Бирюзовый */
    .zone-color-13 { background: #E74C3C; } /* Алый */
    .zone-color-14 { background: #F1C40F; } /* Золотой */
    .zone-color-15 { background: #16A085; } /* Темно-бирюзовый */
    .zone-color-16 { background: #27AE60; } /* Изумрудный */
    .zone-color-17 { background: #2980B9; } /* Темно-синий */
    .zone-color-18 { background: #8E44AD; } /* Пурпурный */
    .zone-color-19 { background: #F39C12; } /* Тыквенный */
    .zone-color-20 { background: #D35400; } /* Коричневый */

    /* ==================== ОВАЛЫ ==================== */

    .mileage-oval {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 12px;
        border-radius: 30px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--text-dark);
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
        height: 32px;
        line-height: 1;
        box-sizing: border-box;
        flex-shrink: 0;

    }

    .mileage-oval:hover {
        background: rgba(102, 126, 234, 0.15);
        border-color: rgba(102, 126, 234, 0.5);
        box-shadow: 0 4px 12px -4px rgba(102, 126, 234, 0.3);
    }

    .tonnage-oval {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 12px;
        border-radius: 30px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--text-dark);
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
        height: 32px;
        line-height: 1;
        box-sizing: border-box;
        flex-shrink: 0;
        /* Фиксированная ширина для всех овалов тоннажа */
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
    }

    .mileage-oval:hover {
        background: rgba(102, 126, 234, 0.15);
        border-color: rgba(102, 126, 234, 0.5);
        box-shadow: 0 4px 12px -4px rgba(102, 126, 234, 0.3);
    }

    .tonnage-oval:hover {
        background: rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.5);
        box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.3);
    }

    .mileage-oval.empty {
        background: rgba(255, 255, 255, 0.05);
        border: 1px dashed rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.5);
    }

    .tonnage-oval.empty {
        background: rgba(255, 255, 255, 0.05);
        border: 1px dashed rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.5);
    }

    /* Для тоннажа - оранжевая подсветка при наведении */
    .tonnage-oval:hover {
        background: rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.5);
        box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.3);
    }

    /* Контейнер для маршрута (чтобы кружок и овал были вместе) */
    .route-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        margin: 0 auto;
    }

    /* Текстовая часть маршрута */
    .route-text-container {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
    }

    .route-text-container > div {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .route-text-container span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .route-row {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: 24px;
        white-space: nowrap;
    }

    .route-row span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.2s ease;
    }

    /* Контейнер для машины */
    .machine-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    /* Текстовая часть машины */
    .machine-text-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
        min-width: 160px;
    }

    .machine-text-container > div {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    /* ==================== МОДАЛЬНОЕ ОКНО ЗОНЫ ДОСТАВКИ ==================== */

    #zoneMileageModal .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 18px 25px;
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    #zoneMileageModal .modal-header h3 {
        color: white;
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0;
    }

    #zoneMileageModal .modal-header h3 i {
        font-size: 1.3rem;
    }

    #zoneMileageModal .modal-close {
        color: white;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        font-size: 24px;
        cursor: pointer;
        transition: all 0.2s;
    }

    #zoneMileageModal .modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    #zoneMileageModal .modal-body {
        padding: 25px;
    }

    #zoneMileageModal .icon-circle {
        width: 80px;
        height: 80px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
    }

    #zoneMileageModal .icon-circle i {
        font-size: 40px;
        color: #667eea;
    }

    #zoneMileageModal .description {
        font-size: 14px;
        color: var(--text-light);
        margin-bottom: 5px;
        text-align: center;
    }

    #zoneMileageModal .option-card {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 16px;
        padding: 15px;
        margin-bottom: 15px;
        border: 2px solid transparent;
        transition: all 0.2s;
    }

    #zoneMileageModal .option-card:hover {
        border-color: rgba(102, 126, 234, 0.3);
        background: rgba(255, 255, 255, 0.05);
    }

    #zoneMileageModal .radio-circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    #zoneMileageModal .radio-circle:hover {
        transform: scale(1.1);
    }

    #zoneMileageModal #zoneRadio {
        border: 2px solid #667eea;
    }

    #zoneMileageModal #mileageRadio {
        border: 2px solid #f97316;
    }

    #zoneMileageModal .radio-inner {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        transition: all 0.2s;
    }

    #zoneMileageModal #zoneRadio .radio-inner {
        background: #667eea;
    }

    #zoneMileageModal #mileageRadio .radio-inner {
        background: #f97316;
    }

    #zoneMileageModal #zoneSelect {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }

    #zoneMileageModal #zoneSelect:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    #zoneMileageModal #zoneSelect option {
        padding: 10px;
        background: var(--bg-white);
        color: var(--text-dark);
    }

    #zoneMileageModal #mileageInput {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 14px;
        transition: all 0.2s;
    }

    #zoneMileageModal #mileageInput:focus {
        outline: none;
        border-color: #f97316;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    }

    #zoneMileageModal #mileageUnitSelect {
        padding: 12px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }

    #zoneMileageModal #mileageUnitSelect:focus {
        outline: none;
        border-color: #f97316;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    }

    #zoneMileageModal .info-note {
        font-size: 12px;
        color: var(--text-light);
        margin-top: 8px;
    }

    #zoneMileageModal .info-note i {
        margin-right: 5px;
    }

    #zoneMileageModal .info-note.zone i {
        color: #667eea;
    }

    #zoneMileageModal .info-note.mileage i {
        color: #f97316;
    }

    #zoneMileageModal .global-info {
        font-size: 12px;
        color: var(--text-light);
        padding: 10px;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 12px;
        margin-top: 10px;
    }

    #zoneMileageModal .global-info i {
        margin-right: 5px;
        color: #667eea;
    }

    #zoneMileageModal .modal-footer {
        padding: 20px 25px;
        border-top: 1px solid var(--border-light);
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    #zoneMileageModal .btn-secondary.modal-close {
        padding: 12px 25px;
        border-radius: 30px;
        font-weight: 500;
        background: transparent;
        border: 2px solid var(--border-light);
        color: var(--text-medium);
        transition: all 0.2s;
    }

    #zoneMileageModal .btn-secondary.modal-close:hover {
        background: var(--bg-light);
        border-color: var(--primary-color);
    }

    #zoneMileageModal #saveZoneMileageBtn {
        padding: 12px 30px;
        border-radius: 30px;
        font-weight: 600;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
    }

    #zoneMileageModal #saveZoneMileageBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    #zoneMileageModal #saveZoneMileageBtn i {
        font-size: 16px;
    }

    /* ==================== КАСТОМНЫЙ ВЫПАДАЮЩИЙ СПИСОК ЗОН ==================== */

    .custom-dropdown {
        position: relative;
        width: 100%;
    }

    .dropdown-trigger {
        width: 100%;
        padding: 10px;
        border: 2px solid var(--border-light);
        border-radius: 8px;
        background: var(--bg-white);
        color: var(--text-dark);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s;
    }

    .dropdown-trigger:hover {
        border-color: var(--primary-color);
    }

    .dropdown-trigger.active {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    .dropdown-trigger.active i {
        transform: rotate(180deg);
    }

    .dropdown-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 250px;
        overflow-y: auto;
        border: 2px solid var(--primary-color);
        border-radius: 8px;
        background: var(--bg-white);
        z-index: 1000;
        margin-top: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* Стили для скроллбара */
    .dropdown-list::-webkit-scrollbar {
        width: 6px;
    }

    .dropdown-list::-webkit-scrollbar-track {
        background: var(--border-light);
    }

    .dropdown-list::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    .dropdown-trigger i {
        transition: transform 0.2s;
    }

    .dropdown-selected-zone {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s;
    }

    .dropdown-selected-zone:hover {
        border-color: #667eea;
        background: var(--bg-lighter);
    }

    .dropdown-selected-zone.active {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    .dropdown-selected-zone.active i {
        transform: rotate(180deg);
    }

    .dropdown-selected-zone .selected-zone-text {
        color: var(--text-light);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dropdown-selected-zone .selected-zone-text.selected {
        color: var(--text-dark);
        font-weight: 500;
    }

    .dropdown-selected-zone i {
        color: var(--text-light);
        transition: transform 0.2s;
    }

    .dropdown-zone-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 5px;
        background: var(--bg-white);
        border: 2px solid #667eea;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        display: none;
        max-height: 250px;
        overflow-y: auto;
    }

    /* Стилизация скроллбара */
    .dropdown-zone-list::-webkit-scrollbar {
        width: 8px;
    }

    .dropdown-zone-list::-webkit-scrollbar-track {
        background: var(--bg-lighter);
        border-radius: 0 12px 12px 0;
    }

    .dropdown-zone-list::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 4px;
    }

    .dropdown-zone-list::-webkit-scrollbar-thumb:hover {
        background: #764ba2;
    }

    /* Опции в выпадающем списке */
    .dropdown-zone-option {
        padding: 12px 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s;
        border-bottom: 1px solid var(--border-light);
    }

    .dropdown-zone-option:last-child {
        border-bottom: none;
    }

    .dropdown-zone-option:hover {
        background: rgba(102, 126, 234, 0.1);
    }

    .dropdown-zone-option.selected {
        background: rgba(102, 126, 234, 0.15);
        position: relative;
    }

    .dropdown-zone-option.selected::after {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 15px;
        color: #667eea;
        font-size: 14px;
    }

    /* Цветовой индикатор для зоны */
    .zone-color-indicator {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* Текст зоны */
    .zone-option-text {
        flex: 1;
        color: var(--text-dark);
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Описание зоны */
    .zone-option-description {
        color: var(--text-light);
        font-size: 12px;
        margin-left: 5px;
    }

    /* Пустая опция */
    .dropdown-zone-option.empty {
        color: var(--text-light);
        font-style: italic;
        justify-content: center;
        padding: 15px;
    }

    .dropdown-zone-option.empty:hover {
        background: transparent;
        cursor: default;
    }

    /* ==================== МОДАЛЬНОЕ ОКНО ТОННАЖА ==================== */

    #tonnageModal .modal-header {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        padding: 18px 25px;
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    #tonnageModal .modal-header h3 {
        color: white;
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0;
    }

    #tonnageModal .modal-header h3 i {
        font-size: 1.3rem;
    }

    #tonnageModal .modal-close {
        color: white;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        font-size: 24px;
        cursor: pointer;
        transition: all 0.2s;
    }

    #tonnageModal .modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    #tonnageModal .modal-body {
        padding: 30px 25px;
    }

    #tonnageModal .icon-circle {
        width: 80px;
        height: 80px;
        background: rgba(245, 158, 11, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
    }

    #tonnageModal .icon-circle i {
        font-size: 40px;
        color: #f59e0b;
    }

    #tonnageModal .description {
        font-size: 14px;
        color: var(--text-light);
        margin-bottom: 5px;
        text-align: center;
    }

    #tonnageModal .form-group {
        margin-bottom: 10px;
    }

    #tonnageModal .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--text-dark);
    }

    #tonnageModal .input-wrapper {
        position: relative;
    }

    #tonnageModal .input-wrapper input {
        width: 100%;
        padding: 14px 15px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        font-size: 16px;
        background: var(--bg-white);
        color: var(--text-dark);
        transition: all 0.2s;
        padding-right: 50px;
    }

    #tonnageModal .input-wrapper input:focus {
        outline: none;
        border-color: #f59e0b;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    }

    #tonnageModal .input-unit {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-weight: 500;
    }

    #tonnageModal .info-note {
        font-size: 12px;
        color: var(--text-light);
        margin-top: 15px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }

    #tonnageModal .info-note i {
        margin-right: 5px;
        color: #f59e0b;
    }

    #tonnageModal .modal-footer {
        padding: 20px 25px;
        border-top: 1px solid var(--border-light);
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    #tonnageModal .btn-secondary.modal-close {
        padding: 12px 25px;
        border-radius: 30px;
        font-weight: 500;
        background: transparent;
        border: 2px solid var(--border-light);
        color: var(--text-medium);
        transition: all 0.2s;
    }

    #tonnageModal .btn-secondary.modal-close:hover {
        background: var(--bg-light);
        border-color: var(--primary-color);
    }

    #tonnageModal #saveTonnageBtn {
        padding: 12px 30px;
        border-radius: 30px;
        font-weight: 600;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
    }

    #tonnageModal #saveTonnageBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    }

    #tonnageModal #saveTonnageBtn i {
        font-size: 16px;
    }

    /* ==================== МОДАЛЬНОЕ ОКНО СТОИМОСТИ ==================== */

    #costModal .modal-header {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    #costModal .total-cost-section {
        background: rgba(16, 185, 129, 0.1);
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 25px;
    }

    #costModal .payment-item {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s;
        border: 1px solid transparent;
    }

    #costModal .payment-item:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(16, 185, 129, 0.3);
    }

    #costModal .payment-date {
        font-size: 14px;
        color: var(--text-light);
        min-width: 100px;
    }

    #costModal .payment-amount {
        font-size: 16px;
        font-weight: 600;
        color: #10b981;
    }

    #costModal .payment-delete {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(220, 53, 69, 0.1);
        border: none;
        color: #dc3545;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        opacity: 0;
    }

    #costModal .payment-item:hover .payment-delete {
        opacity: 1;
    }

    #costModal .payment-delete:hover {
        background: rgba(220, 53, 69, 0.2);
        transform: scale(1.1);
    }

    #costModal .status-paid {
        color: #10b981;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #costModal .status-remaining {
        color: #f97316;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #costModal .status-overpaid {
        color: #3b82f6;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #costModal .status-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #costModal .status-icon.paid {
        background: rgba(16, 185, 129, 0.2);
    }

    #costModal .status-icon.remaining {
        background: rgba(249, 115, 22, 0.2);
    }

    #costModal .status-icon.overpaid {
        background: rgba(59, 130, 246, 0.2);
    }

    #costModal #paymentsList {
        scrollbar-width: thin;
        scrollbar-color: #10b981 var(--border-light);
    }

    #costModal #paymentsList::-webkit-scrollbar {
        width: 6px;
    }

    #costModal #paymentsList::-webkit-scrollbar-track {
        background: var(--border-light);
        border-radius: 3px;
    }

    #costModal #paymentsList::-webkit-scrollbar-thumb {
        background: #10b981;
        border-radius: 3px;
    }

    #costModal #paymentsList::-webkit-scrollbar-thumb:hover {
        background: #059669;
    }


    /* Текстовая часть маршрута */
    .route-text-container {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
    }

    /* Стили для карточек статуса оплаты */
    .filter-status-card.active {
        border-color: currentColor !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transform: translateY(-2px);
    }

    .filter-status-card[data-status="unpaid"].active {
        background: rgba(231, 76, 60, 0.2) !important;
        border-color: #e74c3c !important;
    }

    .filter-status-card[data-status="paid"].active {
        background: rgba(46, 204, 113, 0.2) !important;
        border-color: #2ecc71 !important;
    }

    .filter-status-card[data-status="overpaid"].active {
        background: rgba(52, 152, 219, 0.2) !important;
        border-color: #3498db !important;
    }

    .filter-status-card.active .status-check {
        opacity: 1 !important;
        background: currentColor;
    }

    .filter-status-card.active .status-check i {
        color: white !important;
    }

    .filter-status-card[data-status="unpaid"].active .status-check {
        background: #e74c3c;
        border-color: #e74c3c;
    }

    .filter-status-card[data-status="paid"].active .status-check {
        background: #2ecc71;
        border-color: #2ecc71;
    }

    .filter-status-card[data-status="overpaid"].active .status-check {
        background: #3498db;
        border-color: #3498db;
    }

    /* ==================== СОВРЕМЕННЫЕ ВЫПАДАЮЩИЕ СПИСКИ ==================== */

    .modern-dropdown {
        position: relative;
        width: 100%;
    }

    .modern-dropdown .dropdown-selected {
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 13px;
        transition: all 0.2s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .modern-dropdown .dropdown-selected:hover {
        border-color: var(--primary-color);
        background: var(--bg-light);
    }

    .modern-dropdown.active .dropdown-selected {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    .modern-dropdown .dropdown-selected i {
        transition: transform 0.2s;
    }

    .modern-dropdown.active .dropdown-selected i {
        transform: rotate(180deg);
    }

    .modern-dropdown .dropdown-options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
        background: var(--bg-white);
        border: 2px solid var(--primary-color);
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        z-index: 10000;
        display: none;
        max-height: 350px;
        overflow: hidden;
        animation: dropdownFadeIn 0.2s ease;
    }

    .modern-dropdown.active .dropdown-options {
        display: block;
    }

    /* Контейнер для списка опций с прокруткой */
    .modern-dropdown .dropdown-options-list {
        max-height: 220px;
        overflow-y: auto;
        padding: 8px 0;
    }

    /* Стилизация скроллбара */
    .modern-dropdown .dropdown-options-list::-webkit-scrollbar {
        width: 6px;
        background: var(--border-light);
    }

    .modern-dropdown .dropdown-options-list::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    .modern-dropdown .dropdown-options-list::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }

    /* Опции */
    .modern-dropdown .dropdown-option {
        padding: 8px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.2s;
        border-bottom: 1px solid var(--border-light);
    }

    .modern-dropdown .dropdown-option:last-child {
        border-bottom: none;
    }

    .modern-dropdown .dropdown-option:hover {
        background: var(--bg-lighter);
    }

    .modern-dropdown .dropdown-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

    .modern-dropdown .dropdown-option label {
        flex: 1;
        cursor: pointer;
        font-size: 13px;
        color: var(--text-dark);
    }

    /* Поиск */
    .modern-dropdown .dropdown-search {
        position: relative;
        padding: 12px 12px 8px;
        border-bottom: 1px solid var(--border-light);
    }

    .modern-dropdown .dropdown-search i {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 14px;
        pointer-events: none;
    }

    .modern-dropdown .dropdown-search-input {
        width: 100%;
        padding: 10px 10px 10px 35px;
        border: 2px solid var(--border-light);
        border-radius: 8px;
        font-size: 13px;
        background: var(--bg-white);
        color: var(--text-dark);
    }

    .modern-dropdown .dropdown-search-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    /* Действия */
    .modern-dropdown .dropdown-actions {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
        border-top: 1px solid var(--border-light);
        background: var(--bg-lighter);
    }

    .modern-dropdown .dropdown-actions button {
        background: transparent;
        border: none;
        color: var(--primary-color);
        cursor: pointer;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s;
    }

    .modern-dropdown .dropdown-actions button:hover {
        background: rgba(102, 126, 234, 0.1);
        color: var(--secondary-color);
    }

    /* Загрузка */
    .modern-dropdown .dropdown-loading {
        padding: 15px;
        text-align: center;
        color: var(--text-light);
        font-style: italic;
    }

    /* Пустое состояние */
    .modern-dropdown .dropdown-empty {
        padding: 15px;
        text-align: center;
        color: var(--text-light);
        font-style: italic;
    }

    /* Выравнивание вправо */
    .dropdown-right-aligned .dropdown-options {
        left: auto;
        right: 0;
    }

    /* Анимация */
    @keyframes dropdownFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Специально для списка номенклатуры - увеличенная высота */
    #item-list .dropdown-options-list {
        max-height: 250px;
    }

    /* Специально для списков штрафа и ЗП */
    #fine-list .dropdown-options-list,
    #salary-list .dropdown-options-list {
        max-height: 150px;
    }

    /* ==================== КАСТОМНЫЕ ВЫПАДАЮЩИЕ СПИСКИ ДЛЯ ФИЛЬТРОВ ==================== */

    .custom-select-wrapper {
        position: relative;
        width: 220px;
    }

    .custom-select-trigger {
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .custom-select-trigger:hover {
        border-color: var(--primary-color);
        background: var(--bg-light);
    }

    .custom-select-trigger.active {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    .custom-select-trigger.active i {
        transform: rotate(180deg);
    }

    .custom-select-trigger i {
        transition: transform 0.2s;
        color: var(--text-light);
    }

    .custom-select-trigger span {
        color: var(--text-medium);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Выпадающий список */
    .custom-options {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10000;
        background: var(--bg-white);
        border: 2px solid var(--primary-color);
        border-radius: 12px;
        margin-top: 4px;
        overflow-y: auto;
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }

    .custom-select-wrapper.active .custom-options {
        display: block;
    }

    /* Поиск */
    .custom-options-search {
        padding: 10px;
        border-bottom: 1px solid var(--border-light);
    }

    .custom-options-search i {
        position: absolute;
        left: 24px;
        top: 8%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 14px;
        pointer-events: none;
    }

    .custom-options-search-input {
        width: 100%;
        padding: 8px 8px 8px 32px;
        border: 2px solid var(--border-light);
        border-radius: 8px;
        background: var(--bg-white);
        color: var(--text-dark);
    }

    .custom-options-search-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    /* Список опций с прокруткой */
    .custom-options-list {
        max-height: 250px;
        overflow-y: auto;
    }

    /* Стилизация скроллбара */
    .custom-options-list::-webkit-scrollbar {
        width: 6px;
        background: var(--border-light);
    }

    .custom-options-list::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    .custom-options-list::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }

    /* Опции */
    .custom-option {
        padding: 10px 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-light);
        transition: background 0.2s;
    }

    .custom-option:last-child {
        border-bottom: none;
    }

    .custom-option:hover {
        background: var(--bg-lighter);
    }

    .custom-option.selected {
        background: rgba(102, 126, 234, 0.1);
    }

    .custom-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

    .custom-option label {
        flex: 1;
        cursor: pointer;
        font-size: 13px;
        color: var(--text-dark);
        padding-left: 7px;
    }

    /* Действия */
    .custom-options-actions {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
        border-top: 1px solid var(--border-light);
        background: var(--bg-lighter);
    }

    .custom-options-actions button {
        background: transparent;
        border: none;
        color: var(--primary-color);
        cursor: pointer;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s;
    }

    .custom-options-actions button:hover {
        background: rgba(102, 126, 234, 0.1);
        color: var(--secondary-color);
    }

    /* Пустое состояние */
    .custom-options-empty {
        padding: 15px;
        text-align: center;
        color: var(--text-light);
        font-style: italic;
    }

    /* Загрузка */
    .custom-options-loading {
        padding: 15px;
        text-align: center;
        color: var(--text-light);
    }

    .custom-options-loading i {
        margin-right: 8px;
    }

    /* Выравнивание вправо */
    .dropdown-right .custom-options {
        left: auto;
        right: 0;
    }

    /* Анимация */
    @keyframes dropdownFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Статус карточки */
    .status-card {
        transition: all 0.2s;
    }

    .status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .status-card.active {
        border-color: currentColor !important;
        background: rgba(255,255,255,0.15) !important;
    }

    .status-card[data-status="unpaid"].active {
        border-color: #e74c3c !important;
    }

    .status-card[data-status="paid"].active {
        border-color: #2ecc71 !important;
    }

    .status-card[data-status="overpaid"].active {
        border-color: #3498db !important;
    }

    /* Специально для списков штрафа и ЗП */
    #fine-list .custom-option,
    #salary-list .custom-option {
        padding: 10px 14px;
    }

    /* Стили для кнопки топлива */
    .fuel-edit-btn {
        cursor: pointer;
        padding: 6px 16px;
        border-radius: 30px;
        background: rgba(102, 126, 234, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    .fuel-edit-btn:hover {
        background: rgba(102, 126, 234, 0.2);
        border-color: rgba(102, 126, 234, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    .fuel-edit-btn i {
        color: #f59e0b;
        font-size: 14px;
    }

    .fuel-edit-btn span:first-of-type {
        font-weight: 500;
        color: var(--text-dark);
    }

    .fuel-edit-btn span:last-of-type {
        color: #10b981;
        font-weight: 500;
    }

    /* Стили для опций в списке машин */
    #fuelCar-list .custom-option {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        cursor: pointer;
        transition: background 0.2s;
    }

    #fuelCar-list .custom-option:hover {
        background: var(--bg-lighter);
    }

    #fuelCar-list .custom-option.selected {
        background: rgba(245, 158, 11, 0.1);
    }

    #fuelCar-list .custom-option .selected-check {
        transition: opacity 0.2s;
    }

    /* Отображение выбранной машины */
    #selectedCarDisplay {
        animation: fadeIn 0.3s ease;
    }

    #selectedCarDisplay i {
        animation: pulse 2s infinite;
    }

    /* ==================== МОБИЛЬНОЕ ОКНО ЗОНЫ ДОСТАВКИ ==================== */

    #mobileZoneMileageModal .mobile-edit-content {
        padding: 16px;
    }

    /* Элемент режима */
    .mobile-mode-item {
        margin-bottom: 12px;
        background: var(--bg-lighter);
        border-radius: 16px;
        overflow: hidden;
        border: 2px solid transparent;
        transition: all 0.2s ease;
    }

    .mobile-mode-item[data-mode="mileage"].active {
        border-color: #f97316;
    }

    /* Селектор режима */
    .mobile-mode-selector {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        cursor: pointer;
        background: var(--bg-lighter);
        transition: background 0.2s ease;
    }

    .mobile-mode-selector:hover {
        background: var(--bg-light);
    }

    .mobile-mode-item.active .mobile-mode-selector {
        background: var(--bg-white);
    }

    .mode-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mode-left i {
        font-size: 20px;
        width: 24px;
    }

    .mode-left span {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-dark);
    }

    .mode-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Галочка выбранного режима */
    .mode-check {
        font-size: 18px;
        color: var(--text-light);
        opacity: 0.3;
        transition: all 0.2s ease;
    }

    .mobile-mode-item.active .mode-check {
        opacity: 1;
        color: #667eea;
    }

    .mobile-mode-item[data-mode="mileage"].active .mode-check {
        color: #f97316;
    }

    /* Бейдж зоны */
    .zone-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .mileage-value:empty {
        display: none;
    }

    /* Контейнер ввода расстояния */
    .mileage-input-container {
        padding: 16px;
        border-top: 1px solid var(--border-light);
        background: var(--bg-white);
        animation: slideDown 0.2s ease;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .mode-left span {
            font-size: 15px;
        }

        .zone-circle-small {
            width: 28px;
            height: 28px;
            font-size: 12px;
        }

        .mileage-value {
            font-size: 14px;
            padding: 4px 8px;
        }
    }

    /* Стили для кнопок выбора режима */
    #mobileZoneMileageModal .mobile-mode-btn {
        width: 100%;
        padding: 16px;
        margin-bottom: 8px;
        background: var(--bg-white);
        border: 2px solid var(--border-light);
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    #mobileZoneMileageModal .mobile-mode-btn:hover {
        background: var(--bg-lighter);
        border-color: var(--primary-color);
    }

    #mobileZoneMileageModal .mobile-mode-btn i {
        font-size: 20px;
        width: 24px;
        transition: color 0.2s ease;
    }

    #mobileZoneMileageModal .mobile-mode-btn i.fa-map-pin {
        color: #667eea;
    }

    #mobileZoneMileageModal .mobile-mode-btn i.fa-road {
        color: #f97316;
    }

    #mobileZoneMileageModal .mobile-mode-btn span {
        flex: 1;
        text-align: left;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-dark);
    }

    #mobileZoneMileageModal .mobile-mode-btn .fa-chevron-right {
        color: var(--text-light);
        font-size: 14px;
        transition: transform 0.2s ease;
    }

    /* Активное состояние кнопок */
    #mobileZoneMileageModal .mobile-mode-btn.active-mode {
        border-color: transparent !important;
        color: white !important;
    }

    #mobileZoneMileageModal .mobile-mode-btn.active-mode i,
    #mobileZoneMileageModal .mobile-mode-btn.active-mode span,
    #mobileZoneMileageModal .mobile-mode-btn.active-mode .fa-chevron-right {
        color: white !important;
    }

    #mobileZoneMileageModal .mobile-mode-btn.active-mode .fa-chevron-right {
        transform: rotate(90deg);
    }

    #mobileZoneMileageModal .mobile-mode-btn#mobileZoneModeBtn.active-mode {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    #mobileZoneMileageModal .mobile-mode-btn#mobileMileageModeBtn.active-mode {
        background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    }

    /* Активное состояние для режимов */
    #mobileZoneMileageModal .mobile-mode-item.active .mode-check {
        opacity: 1;
        color: #667eea;
    }

    #mobileZoneMileageModal .mobile-mode-item[data-mode="mileage"].active .mode-check {
        color: #f97316;
    }

    .mobile-mode-selector {
        cursor: pointer;
        padding: 8px 0;
    }

    .mobile-mode-selector:hover {
        background: rgba(255,255,255,0.05);
        border-radius: 6px;
    }

    /* Контейнеры для выбора */
    #mobileZoneSelectContainer,
    #mobileMileageInputContainer {
        margin-top: 8px;
        padding-left: 16px;
        animation: slideDown 0.2s ease;
    }

    /* Стили для select */
    #mobileZoneSelect {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 15px;
        cursor: pointer;
        transition: all 0.2s ease;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
    }

    #mobileZoneSelect:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    #mobileZoneSelect option {
        padding: 12px;
        background: var(--bg-white);
        color: var(--text-dark);
    }

    /* Стили для полей ввода расстояния */
    #mobileMileageInput,
    #mobileMileageUnitSelect {
        padding: 12px 16px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-white);
        color: var(--text-dark);
        font-size: 15px;
        transition: all 0.2s ease;
    }

    #mobileMileageInput:focus,
    #mobileMileageUnitSelect:focus {
        outline: none;
        border-color: #f97316;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    }

    #mobileMileageUnitSelect {
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px;
    }

    /* Информационный блок */
    #mobileCurrentZoneInfo {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 12px 16px;
        margin-top: 20px;
        border: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: var(--text-medium);
    }

    #mobileCurrentZoneInfo i {
        color: #667eea;
        font-size: 16px;
    }

    #mobileCurrentZoneText {
        flex: 1;
        word-break: break-word;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        #mobileZoneMileageModal .mobile-mode-btn {
            padding: 14px;
        }

        #mobileZoneMileageModal .mobile-mode-btn span {
            font-size: 15px;
        }

        #mobileZoneSelectContainer,
        #mobileMileageInputContainer {
            padding-left: 8px;
        }

        #mobileZoneSelect,
        #mobileMileageInput,
        #mobileMileageUnitSelect {
            padding: 10px 12px;
            font-size: 14px;
        }

        #mobileMileageInputContainer .form-control {
            width: 100%;
        }
    }

    /* Специальные стили для iPhone */
    @supports (-webkit-touch-callout: none) {
        #mobileZoneSelect,
        #mobileMileageInput,
        #mobileMileageUnitSelect {
            font-size: 16px !important; /* Предотвращает зум на iOS */
        }
    }

    /* Анимации */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Стили для кастомного скроллбара в select (для Firefox) */
    #mobileZoneSelect {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) var(--border-light);
    }

    #mobileZoneSelect::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    #mobileZoneSelect::-webkit-scrollbar-track {
        background: var(--border-light);
        border-radius: 3px;
    }

    #mobileZoneSelect::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    #mobileZoneSelect::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }

    /* ==================== МОБИЛЬНОЕ АВТОДОПОЛНЕНИЕ ==================== */

    .mobile-autocomplete-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-white);
        border: 2px solid var(--primary-color);
        border-radius: 12px;
        margin-top: 4px;
        z-index: 10000;
        max-height: 200px;
        overflow-y: auto;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        animation: slideDown 0.2s ease;
    }

    .mobile-autocomplete-item {
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 1px solid var(--border-light);
        transition: background 0.2s;
        font-size: 15px;
        color: var(--text-dark);
    }

    .mobile-autocomplete-item:last-child {
        border-bottom: none;
    }

    .mobile-autocomplete-item:hover {
        background: var(--bg-lighter);
    }

    .mobile-autocomplete-item:active {
        background: var(--primary-color);
        color: white;
    }

    /* Стилизация скроллбара для автодополнения */
    .mobile-autocomplete-suggestions::-webkit-scrollbar {
        width: 6px;
    }

    .mobile-autocomplete-suggestions::-webkit-scrollbar-track {
        background: var(--border-light);
        border-radius: 3px;
    }

    .mobile-autocomplete-suggestions::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    .mobile-autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }

    /* Адаптация для iPhone */
    @supports (-webkit-touch-callout: none) {
        .mobile-autocomplete-suggestions {
            max-height: 150px;
        }

        .mobile-autocomplete-item {
            padding: 14px 16px;
        }
    }

    /* ==================== МОБИЛЬНОЕ ОКНО ТОННАЖА ==================== */

    #mobileTonnageModal .mobile-edit-content {
        padding: 20px;
    }

    #mobileTonnageModal .mobile-edit-header {
        border-bottom: none;
    }

    #mobileTonnageModal .mobile-edit-header h3 i {
        font-size: 1.3rem;
    }

    #mobileTonnageModal .mobile-edit-content > div {
        animation: fadeIn 0.3s ease;
    }

    /* Стили для поля ввода */
    #mobileTonnageInput {
        transition: all 0.2s ease;
        -moz-appearance: textfield;
    }

    #mobileTonnageInput::-webkit-outer-spin-button,
    #mobileTonnageInput::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #mobileTonnageInput:focus {
        border-color: #059669 !important;
        box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
        transform: scale(1.02);
    }

    /* Информационный блок */
    #mobileCurrentTonnageInfo {
        transition: all 0.2s ease;
    }

    #mobileCurrentTonnageInfo i {
        animation: pulse 2s infinite;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        #mobileTonnageInput {
            padding: 16px !important;
            font-size: 18px !important;
        }

        #mobileTonnageInput + span {
            font-size: 16px !important;
            padding: 4px 8px !important;
        }
    }

    /* Специальные стили для iPhone */
    @supports (-webkit-touch-callout: none) {
        #mobileTonnageInput {
            font-size: 16px !important;
        }
    }

    /* ==================== ВЫПАДАЮЩИЕ МЕНЮ СОРТИРОВКИ ==================== */

    .sort-dropdown-container {
        position: relative;
        display: inline-block;
    }

    .sort-trigger {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background-color 0.2s;
        white-space: nowrap;
    }

    .sort-trigger:hover {
        background: rgba(102, 126, 234, 0.1);
    }

    .sort-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 4px;
        background: var(--bg-white);
        border: 2px solid var(--primary-color);
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        min-width: 220px;
        display: none;
        overflow: hidden;
    }

    .sort-dropdown-menu.show {
        display: block;
    }

    .sort-dropdown-header {
        padding: 10px 14px;
        background: var(--bg-lighter);
        font-weight: 600;
        font-size: 12px;
        color: var(--text-medium);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--border-light);
    }

    .sort-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-light);
        transition: background-color 0.2s;
    }

    .sort-item:last-child {
        border-bottom: none;
    }

    .sort-item:hover {
        background: var(--bg-lighter);
    }

    .sort-item span {
        font-size: 13px;
        color: var(--text-dark);
    }

    .sort-icons {
        display: flex;
        gap: 8px;
    }

    .sort-icon {
        cursor: pointer;
        color: var(--text-light);
        font-size: 14px;
        transition: all 0.2s;
        padding: 2px;
    }

    .sort-icon:hover {
        color: var(--primary-color);
        transform: scale(1.1);
    }

    .sort-icon.active {
        color: var(--primary-color);
    }

    /* Позиционирование для разных столбцов */
    th:nth-child(3) .sort-dropdown-menu { left: 0; transform: none; } /* Юр лицо/Заказчик */
    th:nth-child(4) .sort-dropdown-menu { left: 0; transform: none; } /* Маршрут */
    th:nth-child(5) .sort-dropdown-menu { left: 0; transform: none; } /* Машина */
    th:nth-child(6) .sort-dropdown-menu { left: 0; transform: none; } /* Стоимость */
    th:nth-child(7) .sort-dropdown-menu { left: 0; transform: none; } /* ТТН */
    th:nth-child(8) .sort-dropdown-menu { left: 0; transform: none; } /* ЗП */

    /* Фиксированная ширина для радио-блока */
    .radio-fixed {
        width: 100px !important; /* Увеличили с 80px до 100px */
        min-width: 100px !important;
        max-width: 100px !important;
    }

    /* Фиксированная ширина для поля выбора зоны */
    .zone-select-fixed {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }

    /* Фиксированная ширина для поля ввода расстояния */
    .mileage-input-fixed {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

    /* Фиксированная ширина для поля выбора единиц */
    .unit-select-fixed {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    /* Для более компактного отображения радио-кнопки */
    .radio-option {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        white-space: nowrap; /* Запрещаем перенос текста */
    }

    .radio-option span {
        font-size: 12px;
        color: var(--text-dark);
    }

    /* Стили для отключенного кастомного селекта */
    .custom-select-wrapper.disabled .custom-select-trigger {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--bg-lighter);
        pointer-events: none;
    }

    .custom-select-wrapper.disabled .custom-select-trigger:hover {
        border-color: var(--border-light);
    }

    /* Стили для активного/неактивного состояния селекта зон */
    .zone-select.active .custom-select-trigger {
        opacity: 1;
        background: var(--bg-white);
        border-color: #27ae60;
        cursor: pointer;
    }

    .zone-select.inactive .custom-select-trigger {
        opacity: 0.5;
        background: var(--bg-lighter);
        border-color: var(--border-light);
        cursor: not-allowed;
        pointer-events: none;
    }

    .zone-select.inactive .custom-select-trigger i {
        opacity: 0.3;
    }

    /* Стили для активного/неактивного состояния полей расстояния */
    .mileage-input-fixed:enabled,
    .unit-select-fixed:enabled {
        opacity: 1;
        background: var(--bg-white);
        border-color: #e67e22;
    }

    .mileage-input-fixed:disabled,
    .unit-select-fixed:disabled {
        opacity: 0.5;
        background: var(--bg-lighter);
        border-color: var(--border-light);
    }

    /* ==================== КНОПКИ ОЧИСТКИ БЛОКОВ ==================== */

    .btn-clear-block {
        background: transparent;
        border: none;
        color: var(--text-light);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 14px;
    }

    .btn-clear-block:hover {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        transform: rotate(15deg);
    }

    .btn-clear-block i {
        pointer-events: none;
    }

    /* Адаптация для разных блоков - цвета при наведении */
    [data-block="contractors"]:hover { color: #3498db; }
    [data-block="route"]:hover { color: #27ae60; }
    [data-block="car"]:hover { color: #f39c12; }
    [data-block="finance"]:hover { color: #9b59b6; }
    [data-block="items"]:hover { color: #e67e22; }
    [data-block="note"]:hover { color: #34495e; }

    /* ==================== МОБИЛЬНЫЕ БЛОКИ ==================== */

    .mobile-block {
        animation: fadeIn 0.3s ease;
    }

    .mobile-block-header {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 8px;
    }

    .mobile-clear-block {
        background: transparent;
        border: none;
        color: var(--text-light);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 14px;
    }

    .mobile-clear-block:hover {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        transform: rotate(15deg);
    }

    /* Цвета при наведении для разных блоков */
    [data-block="mobile-contractors"]:hover { color: #3498db; }
    [data-block="mobile-route"]:hover { color: #27ae60; }
    [data-block="mobile-car"]:hover { color: #f39c12; }
    [data-block="mobile-finance"]:hover { color: #9b59b6; }
    [data-block="mobile-items"]:hover { color: #e67e22; }
    [data-block="mobile-note"]:hover { color: #34495e; }

    /* Стили для режимов зоны/расстояния */
    .mobile-mode-item {
        transition: all 0.2s ease;
    }

    .mobile-mode-selector {
        transition: background 0.2s ease;
    }

    .mobile-mode-selector:hover {
        background: rgba(255,255,255,0.05);
        border-radius: 6px;
    }

    /* Стили для мобильного окна зоны доставки */
    .zone-mode-card {
        background: var(--bg-lighter);
        border-radius: 16px;
        margin-bottom: 16px;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .zone-mode-card.active {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.05);
    }

    .zone-mode-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        cursor: pointer;
        user-select: none;
    }

    .zone-mode-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        font-weight: 500;
    }

    .zone-mode-title i {
        font-size: 20px;
        width: 24px;
        text-align: center;
    }

    .zone-mode-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .zone-mode-check {
        font-size: 20px;
        color: #10b981;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .zone-mode-card.active .zone-mode-check {
        opacity: 1;
    }

    .zone-mode-expandable {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0 16px;
    }

    .zone-mode-card.active .zone-mode-expandable {
        max-height: 200px; /* Достаточно для контента */
        padding-bottom: 16px;
    }

    .zone-select-container {
        margin-top: 8px;
    }

    .mileage-input-container {
        margin-top: 8px;
    }

    .mileage-value {
        font-size: 14px;
        color: #f97316;
        font-weight: 500;
    }

    .current-value-info {
        margin-top: 20px;
        padding: 16px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: var(--text-medium);
    }

    .current-value-info i {
        color: #667eea;
        font-size: 18px;
    }

    .zone-circle-small {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Добавьте в ваш CSS файл */
    .custom-select-wrapper.active .custom-options {
        display: block !important;
    }

    @media (max-width: 768px) {
        .mobile-select-option {
            min-height: 44px; /* Минимальная высота для удобного тапа */
            padding: 12px 16px;
        }

        .mobile-select-option .delete-btn {
            min-width: 44px;
            min-height: 44px;
        }

        .mobile-select-btn {
            min-width: 44px;
            min-height: 44px;
        }
    }

    /* Добавьте в ваш CSS файл или в <style> в order.html */
    .info-card {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    #route-content-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .route-row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .route-single-line,
    .route-two-lines {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .route-two-lines {
        display: none;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .route-two-lines > div {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .route-single-line span:not(.fa):not([class*="fa-"]) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .route-two-lines span:not(.fa):not([class*="fa-"]) {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
        display: block !important;
        width: 100% !important;
        flex: 1 !important;
    }

    /* ==================== МОБИЛЬНЫЕ ОКНА ДЛЯ СТРАНИЦЫ ЗАКАЗЧИКОВ ==================== */

    /* Оверлей для мобильных окон */
    #mobileClientsFiltersOverlay,
    #mobileClientsExportOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 99999;
    }

    #mobileClientsFiltersOverlay.active,
    #mobileClientsExportOverlay.active {
        display: block;
    }

    /* Мобильное окно фильтров - выезжает снизу */
    #mobileClientsFiltersPanel {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80vh;
        background: var(--bg-white);
        z-index: 100000;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        overflow: hidden;
        will-change: transform;
    }

    #mobileClientsFiltersPanel.active {
        transform: translateY(0);
        display: flex;
    }

    /* Заголовок со скруглениями */
    #mobileClientsFiltersPanel .mobile-filters-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        color: white;
        flex-shrink: 0;
    }

    #mobileClientsFiltersPanel .mobile-filters-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    #mobileClientsFiltersPanel .mobile-filters-header-left i {
        font-size: 1.2rem;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    #mobileClientsFiltersPanel .mobile-filters-header-left h3 {
        margin: 0;
        font-size: 1.2rem;
        color: white;
        line-height: 1;
        white-space: nowrap;
    }

    #mobileClientsFiltersPanel .mobile-filters-header h3 {
        margin: 0;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
    }

    #mobileClientsFiltersPanel .mobile-filters-header h3 i {
        color: white;
    }

    #mobileClientsFiltersPanel .mobile-filters-close {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: white;
        transition: all 0.2s;
        flex-shrink: 0;
        margin-left: 10px;
    }

    #mobileClientsFiltersPanel .mobile-filters-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    /* Контент с прокруткой */
    #mobileClientsFiltersPanel .mobile-filters-content {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    /* Секция статусов */
    #mobileClientsFiltersPanel .status-section {
        background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(46, 204, 113, 0.1) 100%);
        border-radius: 16px;
        padding: 16px;
        border: 1px solid rgba(255,255,255,0.05);
        margin-bottom: 20px;
    }

    #mobileClientsFiltersPanel .status-section h4 {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 15px;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #mobileClientsFiltersPanel .status-section h4 i {
        color: #3498db;
    }

    /* Статус карточки */
    #mobileClientsFiltersPanel .status-card {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 15px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 10px;
    }

    #mobileClientsFiltersPanel .status-card:last-child {
        margin-bottom: 0;
    }

    #mobileClientsFiltersPanel .status-card > div:first-child {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    #mobileClientsFiltersPanel .status-card i:first-child {
        font-size: 24px;
        flex-shrink: 0;
    }

    #mobileClientsFiltersPanel .status-card > div:first-child > div {
        flex: 1;
    }

    #mobileClientsFiltersPanel .status-card > div:first-child > div > div:first-child {
        font-weight: 600;
        margin-bottom: 2px;
    }

    #mobileClientsFiltersPanel .status-card > div:first-child > div > div:last-child {
        font-size: 11px;
        color: var(--text-light);
    }

    /* Галочка статуса */
    #mobileClientsFiltersPanel .status-card .status-check {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
        flex-shrink: 0;
        margin-left: 10px;
    }

    #mobileClientsFiltersPanel .status-card.active .status-check {
        opacity: 1;
        background: currentColor;
    }

    #mobileClientsFiltersPanel .status-card.active .status-check i {
        color: white;
        font-size: 12px;
    }

    /* Цвета для разных статусов */
    #mobileClientsFiltersPanel .status-card[data-status="all"] i:first-child,
    #mobileClientsFiltersPanel .status-card[data-status="all"] > div:first-child > div > div:first-child {
        color: #667eea;
    }

    #mobileClientsFiltersPanel .status-card[data-status="remaining"] i:first-child,
    #mobileClientsFiltersPanel .status-card[data-status="remaining"] > div:first-child > div > div:first-child {
        color: #e74c3c;
    }

    #mobileClientsFiltersPanel .status-card[data-status="overpaid"] i:first-child,
    #mobileClientsFiltersPanel .status-card[data-status="overpaid"] > div:first-child > div > div:first-child {
        color: #3498db;
    }

    #mobileClientsFiltersPanel .status-card[data-status="paid"] i:first-child,
    #mobileClientsFiltersPanel .status-card[data-status="paid"] > div:first-child > div > div:first-child {
        color: #2ecc71;
    }

    /* Цвета галочек */
    #mobileClientsFiltersPanel .status-card[data-status="all"] .status-check {
        border-color: #667eea;
    }

    #mobileClientsFiltersPanel .status-card[data-status="remaining"] .status-check {
        border-color: #e74c3c;
    }

    #mobileClientsFiltersPanel .status-card[data-status="overpaid"] .status-check {
        border-color: #3498db;
    }

    #mobileClientsFiltersPanel .status-card[data-status="paid"] .status-check {
        border-color: #2ecc71;
    }

    /* Активные состояния */
    #mobileClientsFiltersPanel .status-card.active {
        background: rgba(255, 255, 255, 0.15);
    }

    #mobileClientsFiltersPanel .status-card[data-status="all"].active {
        border-color: #667eea;
    }

    #mobileClientsFiltersPanel .status-card[data-status="remaining"].active {
        border-color: #e74c3c;
    }

    #mobileClientsFiltersPanel .status-card[data-status="overpaid"].active {
        border-color: #3498db;
    }

    #mobileClientsFiltersPanel .status-card[data-status="paid"].active {
        border-color: #2ecc71;
    }

    #mobileClientsFiltersPanel .status-card[data-status="all"].active .status-check {
        background: #667eea;
        border-color: #667eea;
    }

    #mobileClientsFiltersPanel .status-card[data-status="remaining"].active .status-check {
        background: #e74c3c;
        border-color: #e74c3c;
    }

    #mobileClientsFiltersPanel .status-card[data-status="overpaid"].active .status-check {
        background: #3498db;
        border-color: #3498db;
    }

    #mobileClientsFiltersPanel .status-card[data-status="paid"].active .status-check {
        background: #2ecc71;
        border-color: #2ecc71;
    }

    #mobileClientsFiltersPanel .status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    /* Футер с датами - всегда внизу */
    #mobileClientsFiltersPanel .mobile-filters-footer {
        padding: 16px 20px 20px;
        border-top: 2px solid var(--border-light);
        background: var(--bg-white);
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        width: 100%;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
    }

    #mobileClientsFiltersPanel .mobile-footer-title {
        font-size: 14px;
        color: var(--text-light);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #mobileClientsFiltersPanel .mobile-footer-title i {
        color: #667eea;
    }

    #mobileClientsFiltersPanel .mobile-date-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
    }

    #mobileClientsFiltersPanel .mobile-date-field {
        flex: 1;
        position: relative;
    }

    #mobileClientsFiltersPanel .mobile-date-display {
        width: 100%;
        padding: 14px 12px;
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: 12px;
        color: var(--text-dark);
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.2s;
    }

    #mobileClientsFiltersPanel .mobile-date-display:hover {
        border-color: #667eea;
    }

    #mobileClientsFiltersPanel .mobile-date-display .date-text {
        color: var(--text-dark);
    }

    #mobileClientsFiltersPanel .mobile-date-display .date-text.empty {
        color: var(--text-light);
    }

    #mobileClientsFiltersPanel .mobile-date-display i {
        color: #667eea;
        font-size: 14px;
    }

    #mobileClientsFiltersPanel .mobile-date-separator {
        color: var(--text-light);
        font-size: 14px;
    }

    #mobileClientsFiltersPanel .mobile-month-btn {
        width: 48px;
        height: 48px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-lighter);
        color: #667eea;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    #mobileClientsFiltersPanel .mobile-month-btn:hover {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }

    #mobileClientsFiltersPanel .mobile-apply-btn {
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    #mobileClientsFiltersPanel .mobile-apply-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    #mobileClientsFiltersPanel .mobile-apply-btn:active {
        transform: translateY(0);
    }

    /* Мобильное окно экспорта */
    #mobileClientsExportModal {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-white);
        z-index: 100000;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        max-height: 70vh;
        overflow: hidden;
    }

    #mobileClientsExportModal.active {
        transform: translateY(0);
        display: flex;
    }

    #mobileClientsExportModal .mobile-export-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        color: white;
        flex-shrink: 0;
    }

    #mobileClientsExportModal .mobile-export-header h3 {
        margin: 0;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
    }

    #mobileClientsExportModal .mobile-export-header h3 i {
        color: white;
    }

    #mobileClientsExportModal .mobile-export-close {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        color: white;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    #mobileClientsExportModal .mobile-export-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    #mobileClientsExportModal .mobile-export-content {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    #mobileClientsExportModal .mobile-export-option {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 16px;
        background: var(--bg-lighter);
        border-radius: 12px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid transparent;
    }

    #mobileClientsExportModal .mobile-export-option:hover {
        transform: translateX(5px);
        border-color: #28a745;
    }

    #mobileClientsExportModal .mobile-export-option .format-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 18px;
        flex-shrink: 0;
    }

    #mobileClientsExportModal .mobile-export-option .format-info {
        flex: 1;
    }

    #mobileClientsExportModal .mobile-export-option .format-name {
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 4px;
    }

    #mobileClientsExportModal .mobile-export-option .format-desc {
        font-size: 12px;
        color: var(--text-light);
    }

    #mobileClientsExportModal .mobile-export-footer {
        padding: 16px 20px;
        border-top: 2px solid var(--border-light);
        flex-shrink: 0;
    }

    #mobileClientsExportModal .mobile-export-cancel {
        width: 100%;
        padding: 14px;
        background: var(--bg-lighter);
        border: 2px solid var(--border-light);
        border-radius: 12px;
        color: var(--text-medium);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    #mobileClientsExportModal .mobile-export-cancel:hover {
        border-color: #28a745;
        color: #28a745;
    }

    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        #mobileClientsFiltersPanel .mobile-filters-header-left i {
            font-size: 1.1rem;
        }

        #mobileClientsFiltersPanel .mobile-filters-header-left h3 {
            font-size: 1.1rem;
        }

        #mobileClientsFiltersPanel .mobile-filters-close {
            width: 32px;
            height: 32px;
            font-size: 18px;
        }

        #mobileClientsFiltersPanel .status-card {
            padding: 12px;
        }

        #mobileClientsFiltersPanel .status-card i:first-child {
            font-size: 20px;
        }

        #mobileClientsFiltersPanel .status-card .status-check {
            width: 22px;
            height: 22px;
        }

        #mobileClientsFiltersPanel .status-card > div:first-child > div > div:first-child {
            font-size: 14px;
        }

        #mobileClientsFiltersPanel .mobile-date-display {
            padding: 12px 10px;
            font-size: 13px;
        }

        #mobileClientsFiltersPanel .mobile-month-btn {
            width: 44px;
            height: 44px;
        }

        #mobileClientsFiltersPanel .mobile-apply-btn {
            padding: 14px;
            font-size: 15px;
        }

        #mobileClientsExportModal .mobile-export-option {
            padding: 14px;
        }

        #mobileClientsExportModal .mobile-export-option .format-icon {
            width: 36px;
            height: 36px;
            font-size: 16px;
        }
    }

    #mobileClientsFiltersOverlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 99999;
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
        will-change: opacity;
    }

    #mobileClientsFiltersOverlay.active {
        display: block;
    }

    #mobileClientsFiltersOverlay.closing {
        opacity: 0;
    }

    #mobileClientsFiltersOverlay[style*="display: block"] {
        display: block !important;
    }


    #deleteItemModal {
        z-index: 3002 !important;
    }

    /* По умолчанию скрываем мобильный блок на всех устройствах */
    .mobile-actions-row,
    .mobile-search-row {
        display: none !important;
    }

    /* Показываем только на мобильных устройствах */
    @media (max-width: 1050px) {
        .mobile-actions-row,
        .mobile-search-row {
            display: flex !important;
        }

        /* Убеждаемся, что десктопные фильтры скрыты */
        .desktop-filters {
            display: none !important;
        }
    }

    #addTonnageBtn {
        pointer-events: auto !important;
    }

    #tonnagesExtraContainer {
        width: 100%;
    }

    #tonnagesExtraContainer .tonnage-row-extra {
        width: 100%;
    }

    #tonnagesExtraContainer .tonnage-value-extra {
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    #modalCarNumber {
        position: relative;
    }

    #modalCarNumber + .autocomplete-list {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
    }

    .autocomplete-group .autocomplete-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 9999;
        background: var(--bg-white);
        border: 2px solid #667eea;
        border-radius: 12px;
        margin-top: 4px;
        max-height: 250px;
        overflow-y: auto;
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }

    /* Специально для поля номера машины - принудительное позиционирование */
    #modalCarNumber {
        position: relative;
        z-index: 1;
    }

    #modalCarNumber ~ .autocomplete-list {
        top: auto !important;
        bottom: auto !important;
        position: absolute !important;
        margin-top: 4px !important;
    }