/* public/css/style.css */



/* === ПРИНУДИТЕЛЬНЫЕ СТИЛИ ДЛЯ GLIGHTBOX === */
.glightbox-container {
    z-index: 9999999999 !important;
}

.glightbox-clean .gclose,
.glightbox-clean .gprev,
.glightbox-clean .gnext {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #ffffff !important;
    z-index: 10000000000 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.glightbox-clean .gclose {
    top: 20px !important;
    right: 20px !important;
    font-size: 28px !important;
}

.glightbox-clean .gprev { left: 20px !important; }
.glightbox-clean .gnext { right: 20px !important; }

.glightbox-clean .gslide-description {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
}




/* === Sticky-блок итогов отчёта === */
.crs-report-totals-top {
    position: -webkit-sticky; /* Для Safari */
    position: sticky;
    top: 56px; /*  Отступ от верха экрана (подстройте под вашу шапку/админ-бар WP) */
    z-index: 100; /* Чтобы блок был поверх таблицы и фильтров */
    background: #ffffff; /* Обязательный фон, иначе контент будет просвечивать */
    padding: 10px 5px;
    margin: 15px 0 20px 0 !important; /* !important перебивает inline-стиль */
    
    transition: box-shadow 0.2s ease, top 0.2s ease;
  
}

/* Опционально: тень только когда блок "прилип" к верху */
.crs-report-totals-top.is-sticky {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(4px); /* Красивое размытие фона под блоком */
}


/* === ФИКСАЦИЯ ТАБЛИЦЫ ОТЧЕТА (ЖЕСТКАЯ ШИРИНА) === */

/* 1. Гарантируем, что контейнер растянут на всю ширину */
#report-results-content {
    width: 100% !important;
    box-sizing: border-box;
}

/* 2. Включаем фиксированный алгоритм верстки таблицы */
.crs-report-table {
    width: 100% !important;
    table-layout: fixed !important; /* Ключевое: запрещает колонкам "гулять" */
    border-collapse: collapse;
}


/* 3. Задаем точные пропорции для каждой колонки (сумма = 100%) */

/* Колонка 1: Дата */
.crs-report-table th:nth-child(1),
.crs-report-table td:nth-child(1) {
    width: 100% !important;
}

/* Колонка 2: Источник */
.crs-report-table th:nth-child(2),
.crs-report-table td:nth-child(2) {
    width: 100% !important;
}

   .crs-report-table th:nth-child(3),
    .crs-report-table td:nth-child(3) {
        width: 100% !important;
        height: auto !important; /* Убираем фиксированную высоту */
        min-height: 60px; /* Минимальная высота */
        word-wrap: break-word !important; /* Перенос длинных слов */
        overflow-wrap: break-word !important; /* Современный перенос */
        white-space: normal !important; /* Разрешаем перенос строк */
        padding: 8px 5px !important; /* Уменьшаем отступы */
        font-size: 13px !important; /* Немного уменьшаем шрифт */
        line-height: 1.3 !important; /* Межстрочный интервал */
    }
    

/* Колонка 4: Сумма */
.crs-report-table th:nth-child(4),
.crs-report-table td:nth-child(4) {
    width: 100% !important;
    text-align: right; /* Суммы обычно выравнивают вправо */
}

/* Колонка 5: Комментарий (занимает всё оставшееся место) */
.crs-report-table th:nth-child(5),
.crs-report-table td:nth-child(5) {
    width: 100% !important;
    /* Важно: разрешаем перенос длинных слов, чтобы не ломать верстку */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Скрываем лишнее, если строка скрыта фильтром */
.crs-report-table tbody tr[style*="display: none"] {
    display: none !important;
}





/* === Скрытие уволенных водителей по умолчанию === */
.fired-driver-row {
    display: none;
}

.fired-driver-row.visible {
    display: table-row !important;
}

/* Стили для кнопки показа уволенных */
#toggle-fired-drivers-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 16px;
}

#toggle-fired-drivers-btn:hover {
    background: #e0e0e0;
}



/* === ФИКСАЦИЯ ТАБЛИЦЫ ОТЧЕТА (ТОЛЬКО ДЛЯ ДЕСКТОПА > 768px) === */
@media (min-width: 769px) {
    #report-results-content {
        width: 100% !important;
        box-sizing: border-box;
    }

    .crs-report-table {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse;
    }

    .crs-report-table th:nth-child(1),
    .crs-report-table td:nth-child(1) { width: 100% !important; }

    .crs-report-table th:nth-child(2),
    .crs-report-table td:nth-child(2) { width: 100% !important; }

    .crs-report-table th:nth-child(3),
    .crs-report-table td:nth-child(3) { width: 100% !important; }

    .crs-report-table th:nth-child(4),
    .crs-report-table td:nth-child(4) { width: 100% !important; text-align: right; }

    .crs-report-table th:nth-child(5),
    .crs-report-table td:nth-child(5) { width: 100% !important; word-wrap: break-word; overflow-wrap: break-word; }

    .crs-report-table tbody tr[style*="display: none"] {
        display: none !important;
    }
    
    
 
    
}


@media (max-width: 768px) {
    .crs-report-totals-top {
        position: sticky !important;
        top: 0px !important; /* Отступ под админ-бар WordPress */
        z-index: 99 !important;
        background: #ffffff !important;
        margin: 0 0 10px 0 !important;
        padding: 8px 5px !important; /* Уменьшаем отступы */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        
        /* Горизонтальное расположение */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        
        /* Разрешаем горизонтальный скролл если не помещается */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        
        /* Скрываем полосу прокрутки (опционально) */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    /* Скрываем полосу прокрутки для WebKit */
    .crs-report-totals-top::-webkit-scrollbar {
        display: none;
    }
    
    /* Уменьшаем блоки для мобильных */
    .crs-report-totals-top > div {
        flex: 0 0 auto !important; /* Не сжимать, не растягивать */
        min-width: 30% !important; /* Минимальная ширина каждого блока */
        padding: 6px 8px !important; /* Меньше внутренние отступы */
    }
    
    /* Уменьшаем текст */
    .crs-report-totals-top > div div:first-child {
        font-size: 10px !important; /* Меньше заголовок */
    }
    
    .crs-report-totals-top > div div:last-child {
        font-size: 13px !important; /* Меньше сумма */
    }
}







/* Убираем спиннеры для Chrome/Safari/Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

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

/* Для модальных окон — принудительно */
.crs-bulk-adjust-balance-modal-content input[type="number"],
#edit-rental-charge-modal input[type="number"] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Поиск водителей — кнопки слева/справа */
.crs-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.crs-search-wrapper input {
    width: 100%;
    padding: 6px 30px; /* Отступы под обе кнопки */
    font-size: 16px; /* Запрет зума на мобильных */
}

#crs-search-clear-btn {
    left: 8px;
    right: auto; /* Сбрасываем right */
}

#crs-search-confirm-btn {
    right: 8px;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .crs-search-wrapper input {
        padding: 8px 35px;
        font-size: 16px;
    }
}










/* 1. Настраиваем контейнер, чтобы левая колонка не растягивалась на всю высоту таблицы */
.crs-reports-container {
    align-items: flex-start; /* Важно! Без этого sticky не сработает */
}

/* 2. Закрепляем блок с фильтрами */
.crs-reports-controls {
    /* Магия закрепления */
    position: -webkit-sticky; /* Для Safari */
    position: sticky;
    top: 69px; /* Блок остановится в 20px от верха экрана */
    
    /* Запрещаем блоку растягиваться и сжиматься */
    align-self: flex-start;
    flex-shrink: 0;
    
    /* Если фильтров много, внутри блока появится свой скролл, чтобы он не уходил за экран */
    max-height: calc(100vh - 40px); 
    overflow-y: auto;
    
    /* Опционально: добавляем фон и отступы, чтобы выглядело аккуратно */
    background: #fff; 
    padding-right: 10px; /* Место для полосы прокрутки внутри блока */
    z-index: 10; /* Чтобы блок был поверх других элементов при скролле */
}

/* 3. Скролл внутри блока фильтров (тонкая настройка) */
.crs-reports-controls::-webkit-scrollbar {
    width: 6px;
}
.crs-reports-controls::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}


/* Контейнер для двух колонок */
.form-row-pair {
    display: flex;
    gap: 12px; /* Расстояние между колонками */
    margin-bottom: 14px; /* Отступ снизу */
    width: 100%; /* Занимает всю ширину */
}

/* Группа поля в одной колонке (для пары) */
.form-group-half {
    flex: 1; /* Растягивается на доступное пространство */
    min-width: 0; /* Важно для обрезки длинных placeholder'ов */
}

/* Стили для label внутри .form-group-half */
.form-group-half label {
    display: block;
    font-weight: 500; /* Полужирный шрифт */
    margin-bottom: 4px; /* Отступ снизу */
    font-size: 0.95em; /* Размер шрифта */
}

/* Стили для input и select внутри .form-group-half */
.form-group-half input,
.form-group-half select,
.form-group-half textarea {
    width: 100%; /* Занимает всю ширину родителя */
    padding: 7px 10px; /* Внутренние отступы */
    border: 1px solid #ccc; /* Граница */
    border-radius: 4px; /* Скругление углов */
}

/* --- Стили для трёх колонок --- */
.form-row-triple {
    display: flex; /* Используем Flexbox */
    gap: 12px; /* Расстояние между колонками */
    margin-bottom: 14px; /* Отступ снизу, как у form-row-pair */
    width: 100%; /* Занимает всю ширину родителя */
}

.form-group-third {
    flex: 1; /* Равномерно распределяет пространство между тремя элементами */
    min-width: 0; /* Важно для обрезки длинных значений */
}

/* Применяем стили label и input/select/textarea из form-group-half */
.form-group-third label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 0.95em;
}

.form-group-third input,
.form-group-third select,
.form-group-third textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* --- Конец стилей для трёх колонок --- */

/* --- Стили для одиночных групп (не в паре/тройке) --- */
.form-group-full,
.form-group {
    margin-bottom: 14px; /* Отступ снизу */
    width: 100%; /* Занимает всю ширину */
}

.form-group-full label,
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 0.95em;
}

.form-group-full input,
.form-group-full select,
.form-group-full textarea,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

















/* Контейнер с прокруткой */
.table-wrapper {
    max-height: 70vh; /* или задайте фиксированную высоту, например 600px */
    overflow-y: auto;
    overflow-x: auto; /* на случай, если таблица широкая */
    position: relative;
    
}

/* === 1. Уже работает: шапка таблицы (thead) === */
.crs-sticky-header-table thead th {
    position: sticky;
    top: 99px; /* под шапкой интерфейса */
    z-index: 2;
    background-color: #f8f8f8;
    padding: 8px;
    vertical-align: middle;
}

.crs-sticky-header-table {
    width: 100%;
    border-collapse: collapse;
}

/* === 2. НОВОЕ: закрепляем ВЕРХНЮЮ ПАНЕЛЬ (вкладки + кнопки + поиск) === */
.crs-tabs,
.crs-driver-actions,
.crs-car-actions {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    z-index: 1000;
    background: #fff;
        padding-top: 10px;
    
    
    
}

/* === 3. Защита от "размазывания" при прокрутке === */
.crs-dashboard > * {
    margin-top: 0;
}

.crs-sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
  
    
}













/* Цветовая зебра для таблицы водителей и автомобилей */
#drivers-table tbody tr:nth-child(odd),
#cars-table tbody tr:nth-child(odd) {
    background-color: #fff; /* белый — можно оставить как есть */
}
#drivers-table tbody tr:nth-child(even),
#cars-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* светло-серый — или любой другой */
}


/* Цвет строки при выборе чекбокса */
#drivers-table tbody tr input.driver-checkbox:checked ~ * {
    /* Это селектор не сработает напрямую для родителя <tr>, поэтому используем другое решение */
}

/* Правильное решение — через :has() (поддержка современных браузеров: Chrome 105+, FF 121+, Safari 15.4+) */
#drivers-table tbody tr:has(.driver-checkbox:checked) {
    background-color: #e3f2fd !important; /* Светло-голубой */
    box-shadow: inset 0 0 0 2px #2196f3;
}
 

.toggle-extra-balances-btn {
    margin-left: 5px; /* Отступ от текста "Баланс" */
    padding: 2px 6px;
    font-size: 0.8em; /* Меньший размер шрифта */
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    color: #4d4d4d;
}

.toggle-extra-balances-btn:hover {
    background-color: #d0d0d0;
    color: #4d4d4d;
}

/* Если нужно, можно добавить отступ или границу для скрываемых элементов */
.extra-balance-item {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed #ccc; /* Легкая линия для отделения */
}



/* --- Стили для новой структуры ячейки Имя/телефон --- */

/* Контейнер для фото, имени и телефона */
.crs-dashboard .driver-info-container {
    display: flex; /* Используем flexbox */
    align-items: center; /* Выравнивание по вертикальному центру */
    gap: 10px; /* Расстояние между фото и текстом */
    /* Если хотите фото сверху, а текст снизу, используйте flex-direction: column; */
    /* flex-direction: column; */
    /* align-items: flex-start; */ /* Выравнивание по левому краю, если column */
}

/* Стиль для круглого фото */
.crs-dashboard .driver-photo-circle-in-table {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    
    /* margin-right убран, так как используется gap */
    flex-shrink: 0; /* Запрещаем фото сжиматься */
}











/* --- Стили для круглого фото водителя в таблице (внутри ячейки Имя) --- */

/* Стиль для круглого фото */
 .driver-photo-circle-in-table {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    /* border: 1px solid #999; */
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
    box-shadow: 7px 0px 17px -10px #1d1d1d;
}

/* Опционально: Стиль для placeholder, если фото нет */
/*
.crs-dashboard .driver-photo-placeholder-in-table {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee;
    border: 1px solid #999;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}
*/


/* --- Конец стилей для круглого фото водителя в таблице --- */


.crs-dashboard #add-driver-btn{
    box-shadow: none;
    border-radius: 0px;
}



.driver-status-select-auto {
    padding: 6px 0px;
    border: none;
    font-size: 12px;
    background: none;
    box-shadow: none;
    font-weight: bold;
    width: 100%;
    /* Добавьте другие нужные стили */
}











.driver-status-select-auto:focus {
    /* Можно добавить легкую анимацию цвета при фокусе */
    transition: color 0.2s ease;
    /* Или легкую тень, если цвет не меняется мгновенно */
    /* box-shadow: 0 0 2px 1px rgba(0, 115, 170, 0.5); */
    padding: 6px 0px;
    border: none;
    font-size: 12px;
    background: none;
    box-shadow: none;
    font-weight: bold;
    width: 100%;
}











.contract-download-link {
    
    padding-left: 10px;
    
}






/* --- Формы добавления/редактирования --- */
.crs-dashboard .form-group {
    margin-bottom: 15px;
    /* Убедимся, что стандартные form-group занимают всю ширину */
    width: 100%;
    box-sizing: border-box;
}

.crs-dashboard .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.crs-dashboard .form-group input,
.crs-dashboard .form-group select,
.crs-dashboard .form-group textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
}

/* --- ИЗМЕНЕНИЕ: Стиль для полей, занимающих 1/3 строки --- */
/* Поля с классом form-group-third будут занимать ~33% ширины */
.crs-dashboard .form-group.form-group-third {
    width: 32%; /* 33% ширины минус отступ */
    display: inline-block;
    margin-bottom: 15px;
    
    vertical-align: top;
    box-sizing: border-box;
}

/* Убираем правый отступ у каждого третьего поля */
.crs-dashboard .form-group.form-group-third:nth-child(3n) {
    margin-right: 0;
}

/* Для предотвращения переноса слов в label внутри узких колонок */
.crs-dashboard .form-group.form-group-third label {
    word-break: break-word;
}
/* --- КОНЕЦ ИЗМЕНЕНИЯ: Стиль для полей, занимающих 1/3 строки --- */


/* Поле для изображения */
/* Предполагается, что оно идет первым и не имеет класса form-group-third */
/* Оно останется шириной 100% благодаря базовому .form-group */
.crs-dashboard .image-preview {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: stretch
}

.crs-dashboard .image-preview img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
}

/* --- УДАЛЕНО: Старый стиль half-width, так как он больше не нужен ---
.crs-dashboard .form-group.half-width {
    width: 48%;
    display: inline-block;
    margin-right: 2%;
    vertical-align: top;
    box-sizing: border-box;
}

.crs-dashboard .form-group.half-width:nth-child(2n) {
    margin-right: 0;
}
--- КОНЕЦ УДАЛЕННОГО СТИЛЯ --- */


/* Кнопки внутри формы */
.crs-dashboard .form-actions {
    /* Очистим обтекание, если поля выше float'ятся */
    clear: both;
    margin-top: 20px;
    padding-top: 15px;
    /* border-top: 1px solid #eee; */ /* Опционально, можно убрать линию */
    text-align: right; /* Выравнивание кнопок по правому краю */
}






.button-primary .button{
    margin: 0 0 0 5px;
}










/* Стили для даты поверки баллона в таблице автомобилей */
.cylinder-date-info {
    font-size: 0.9em;
    color: #646970; /* Серый цвет WordPress */
}
/* --- Конец стилей для даты поверки баллона --- */























/* Улучшенная визуальная обратная связь при фокусе */
.car-status-select-auto:focus {
    /* Можно добавить легкую анимацию цвета при фокусе */
    transition: color 0.2s ease;
    /* Или легкую тень, если цвет не меняется мгновенно */
    /* box-shadow: 0 0 2px 1px rgba(0, 115, 170, 0.5); */
}

/* Стили для выпадающего списка */
.car-status-select-auto {
    padding: 6px 0px;
    border: none;
    font-size: 12px;
    background: none;
    box-shadow: none;
    font-weight: bold;
    width: 100%;
    /* Добавьте другие нужные стили */
}

.save-status-btn, .cancel-status-btn {
    font-size: 11px;
    padding: 2px 5px;
    margin-top: 2px;
}
.edit-status-icon {
    cursor: pointer;
    user-select: none; /* Предотвращает выделение иконки */
}
.edit-status-icon:hover {
    opacity: 0.8; /* Визуальная обратная связь при наведении */
}



.crs-driver-actions{
       display: flex
;
    align-items: baseline;
   
    
}


.crs-car-actions{
        display: flex
;
    align-items: baseline;
    justify-content: center;
    margin-top: 15px;
    
}





#search-cars{
    padding: 14px;
    width: 300px;
    margin-left: 8px;
    height: 1px;
    font-size: 12px;
    border-radius: 13px;
    box-shadow: 1px 1px 18px -11px #176bdf;;
}

#search-drivers{
    padding: 14px;
    width: 300px;
    margin-left: 5px;
    margin-right: 5px;
    height: 1px;
    font-size: 12px;
    border-radius: 13px;
    box-shadow: 1px 1px 18px -11px #176bdf;
}

#car-status-filter{
    width: 98.5%;
    height: 30px;
    margin-left: 0px;
    font-size: 12px;
    

}






#driver-status-filter{
    width: 98.5%;
    height: 30px;
    margin-left: 0px;
    font-size: 12px;
   
    

}
#bulk-adjust-balance-btn {
    align-items: center;
    gap: 5px;
    text-decoration: none;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0 0 15px 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 15px;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: top;
    background: #44b122;
    border-color: #22b14a;
    color: #fff;
    text-shadow: none;
    box-shadow: 0 1px 11px -4px #0fb430;
    
    margin-right: 5px;
    
}



#open-account-entries-report-btn{
    align-items: center;
    gap: 5px;
    text-decoration: none;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0 0 15px 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 15px;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: top;
    background: #60289d;
    border-color: #60289d;
    color: #fff;
    text-shadow: none;
    box-shadow: 0 1px 14px -4px #60289d;
    margin-right: 10px;
}

#bulk-adjust-balance-online-btn{
    display: inline-flex
;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0 0 15px 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 15px;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: top;
    background: #44b122;
    border-color: #22b14a;
    color: #fff;
    text-shadow: none;
    box-shadow: 0 1px 14px -4px #0fb430;
    
    margin-right: 10px;
}



/* --- Стили для модального окна массового редактирования баланса (обновленные) --- */
.crs-bulk-balance-controls {
    margin-bottom: 15px;
}
.crs-bulk-balance-controls #bulk_current_balance_value {
    font-weight: bold;
}
.crs-operation-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Позволяет кнопкам переноситься на новую строку на маленьких экранах */
}
.crs-operation-btn {
    flex: 1; /* Кнопки будут равномерно распределять доступное пространство */
    min-width: 120px; /* Минимальная ширина для кнопок */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Пространство между иконкой и текстом */
}
.crs-operation-btn .dashicons {
    line-height: inherit; /* Выравнивание иконки по вертикали */
}
.crs-bulk-adjust-balance-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
/* --- Конец стилей --- */

/* public/css/style.css */

/* --- Стили для модального окна изменения баланса --- */
.crs-adjust-balance-modal-overlay {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1001; /* Должно быть выше других модальных окон */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Полупрозрачный черный фон */
    backdrop-filter: blur(2px); /* Лёгкое размытие фона (опционально) */
}

.crs-adjust-balance-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Центрируем по вертикали и горизонтали */
    padding: 0;
    border: 1px solid #888;
    border-radius: 5px;
    width: 90%;
    max-width: 400px; /* Меньше ширина для формы баланса */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.crs-adjust-balance-modal-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f7f7;
    border-radius: 5px 5px 0 0;
}

.crs-adjust-balance-modal-header h3 {
    margin: 0;
    color: #1d2327;
    font-size: 1.2em;
}

.crs-adjust-balance-modal-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.crs-adjust-balance-modal-close:hover,
.crs-adjust-balance-modal-close:focus {
    color: #000;
    background-color: #e5e5e5;
    text-decoration: none;
}

.crs-adjust-balance-modal-body {
    padding: 15px;
}

/* Стили для формы изменения баланса внутри модального окна */
.crs-adjust-balance-modal-body .adjust-balance-form {
    display: block; /* Внутри модального окна форма всегда блок */
    margin-top: 0; /* Убираем отступ сверху */
    padding: 0; /* Убираем внутренний отступ, он на .crs-adjust-balance-modal-body */
    border: none; /* Убираем рамку, она на .crs-adjust-balance-modal-content */
    background-color: transparent; /* Прозрачный фон */
    box-shadow: none; /* Убираем тень */
    max-width: none; /* Убираем ограничение ширины */
}

.crs-adjust-balance-modal-body .adjust-balance-form select,
.crs-adjust-balance-modal-body .adjust-balance-form input[type="number"],
.crs-adjust-balance-modal-body .adjust-balance-form textarea {
    width: 100%;
    display: block;
    margin: 5px 0 10px 0; /* Отступы сверху и снизу */
    box-sizing: border-box;
}

.crs-adjust-balance-modal-body .adjust-balance-form button {
    margin: 5px 0; /* Отступы сверху и снизу */
    display: block;
    width: 100%;
}

/* --- Конец стилей для модального окна изменения баланса --- */











.driver-photo { max-width: 49px; height: auto;}
.car-photo { max-width: 69px; height: auto;}
#driver_timestamp {
    width: 100%;
    /* или конкретная ширина, например: width: 250px; */
}
#edit_driver_timestamp {
    width: 100%;
    /* или конкретная ширина, например: width: 250px; */

}


/* --- Стили для кнопки "Привязать" в форме привязки автомобиля --- */
.crs-dashboard .link-driver-form #confirm-link-car-btn.button.button-primary {
    background-color: #0fb430;
    border-color: #0033cc;
    color: #ffffff;
    box-shadow: 2px 4px 20px -5px #0fb430;
    margin-top: 10px;
}

.crs-dashboard .link-driver-form #confirm-link-btn.button.button-primary {
    background-color: #0fb430;
    border-color: #0033cc;
    color: #ffffff;
    box-shadow: 2px 4px 20px -5px #0fb430;
    margin-top: 10px;
}

.form-actions {
 padding-top: 10px;
    margin-bottom: 10px;
}

.crs-dashboard h2 {
    margin-top: 30px; /* Увеличен отступ сверху */
    margin-bottom: 15px;
    color: #1d2327;
    font-size: 1.3em;
}

.crs-dashboard h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    color: #1d2327;
}

.crs-tab-button {
  /* Общие стили для всех вкладок */
      padding: 10px 20px;
    background: #6c6c6c;
    /* border: none; */
    /* border-radius: 5px 5px 0 0; */
    cursor: grabbing;
  transition: background 0.8s;
}



.crs-tab-button {
    background-color: #e5e5e5; /* Цвет неактивной вкладки */
    border: 1px solid #c3c4c7;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 10px 15px;
    cursor: pointer;
    
    margin-bottom: 0; /* Убираем нижний margin по умолчанию */
    font-weight: 600;
    color: #50575e;
    transition: all 0.1s ease-in-out;
    font-size: 16px;
    position: relative;
    top: 1px; /* Немного вытягиваем вниз */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    line-height: normal; /* Нормальная высота строки */
    flex-shrink: 0; /* Кнопки не сжимаются */
    white-space: nowrap; /* Текст в кнопке не переносится */
    
    
}



.crs-tab-button.active {
    background-color: #fff; /* Цвет активной вкладки */
    color: #1d2327;
    border-bottom: 1px solid #fff; /* Перекрывает border-bottom у .crs-tabs */
    margin-bottom: -1px; /* Компенсирует border-bottom контейнера */
    box-shadow: 0 1px 0 #fff; /* Дополнительная тень для четкости */
    font-weight: bold;
}

.crs-tab-content {
    display: none;
    /* padding: 15px 0; */ /* Отступы внутри контента вкладки */
    /* border: 1px solid #c3c4c7; */ /* Рамка вокруг активного контента */
    /* border-top: none; */ /* Верхняя граница убирается */
    /* border-radius: 0 0 4px 4px; */ /* Закругление снизу */
    /* background-color: #fff; */ /* Фон контента */
    animation: fadeIn 0.3s ease-in-out; /* Плавное появление */
}

.crs-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --- Конец стилей для Табов --- */


/* --- Таблицы --- */
.crs-dashboard table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    table-layout: auto; /* Позволить браузеру рассчитывать ширины колонок */
}

.crs-dashboard th,
.crs-dashboard td {
    border: 1px solid #ccd0d4;
    ;
    text-align: left;
    vertical-align: revert-layer;
    font-size: 14px;
    word-wrap: break-word; /* Перенос длинных слов */
    padding-top: 3px;
    padding-bottom: 3px;
    
}

.driver-status-select-auto {
    padding: -1px 20px;
    border: none;
    font-size: 12px;
    background: none;
    box-shadow: none;
    font-weight: bold;
    width: 100%;
    margin-top: -11px;
}








.crs-dashboard th {
    background-color: #f6f7f7;
    font-weight: 600;
    color: #1d2327;
    white-space: nowrap; /* Заголовки не переносятся по умолчанию */
}

.crs-dashboard tbody tr:nth-child(even) {
   /* background-color: #f9f9f9;*/
}

.crs-dashboard tbody tr:hover {
    /*background-color: #f0f6fc;*/
    box-shadow: 1px 1px 18px -11px #176bdf;
    border: 0px solid #ccd0d4;

}
/* --- Конец стилей для таблиц --- */


/* --- Кнопки действия в таблицах --- */
/* Общие стили для кнопок действий */

.crs-dashboard .delete-btn,
.crs-dashboard .unlink-btn,
.crs-dashboard .link-btn,
.crs-dashboard .fire-btn,
.crs-dashboard .adjust-btn {
    display: inline-block;
    text-decoration: none;
    font-size: 11px;
    margin: 0px;
    padding: 0px 7px 1px 7px;
    cursor: grab;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 3px;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: top;
    background: #f6f7f7;
    border-color: #c3c4c7;
    color: #2c3338;
    box-shadow: 0 1px 0 #c3c4c7;
}

.crs-dashboard .edit-btn:hover,
.crs-dashboard .delete-btn:hover,
.crs-dashboard .unlink-btn:hover,
.crs-dashboard .link-btn:hover,
.crs-dashboard .fire-btn:hover,
.crs-dashboard .adjust-btn:hover {
    background: #f0f0f1;
    border-color: #8c8f94;
    color: #1d2327;
}

.crs-dashboard .edit-btn:focus,
.crs-dashboard .delete-btn:focus,
.crs-dashboard .unlink-btn:focus,
.crs-dashboard .link-btn:focus,
.crs-dashboard .fire-btn:focus,
.crs-dashboard .adjust-btn:focus {
    box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
    outline: 2px solid transparent;
    outline-offset: 0;
}

.crs-dashboard .edit-btn:active,
.crs-dashboard .delete-btn:active,
.crs-dashboard .unlink-btn:active,
.crs-dashboard .link-btn:active,
.crs-dashboard .fire-btn:active,
.crs-dashboard .adjust-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Стили для специфичных кнопок */


.crs-dashboard .delete-btn,
.crs-dashboard .fire-btn {
    background: none;
    /* border-color: #d63638; */
    color: #810000;
    text-shadow: 0px 0px 1px #b701015c;
    box-shadow: none;
    border: none;
}

.crs-dashboard .unlink-btn:hover,
.crs-dashboard .delete-btn:hover,
.crs-dashboard .fire-btn:hover {
    background: #b32d2e;
    border-color: #b32d2e;
    color: #fff;
}

.crs-dashboard .adjust-btn {
    background: #0fb430;
    border-color: #2d2d2d5c;
    padding-inline: 4px;
    color: #ffffff;
    text-shadow: none;
    box-shadow: 0 1px 20px -10px #0fb430;
}

.crs-dashboard .adjust-btn:hover {
    background: #e6a800;
    border-color: #e6a800;
    color: #000;
}

/* Ссылка "Добавить ..." */
.crs-dashboard #add-car-btn,
.crs-dashboard #add-driver-btn,
.crs-dashboard #add-owner-btn,
.crs-dashboard  .add-btn { /* Используем общий класс .add-btn */
    
   cursor: pointer;
    height: 18px;
   
    
}



/* Стиль для символа плюса внутри кнопки "Добавить" */
.crs-dashboard .add-btn::before {
    content: '+'; /* Символ плюса */
    font-size: 16px; /* Размер шрифта плюса */
    font-weight: bold; /* Жирный шрифт плюса */
    line-height: 1; /* Высота строки плюса */
}
/* --- Конец стилей для кнопок --- */


/* --- Сообщения --- */
#message-container {
    margin-bottom: 20px;
}

.crs-dashboard .message { /* Используется в JS */
    padding: 12px 16px;
    border-left: 4px solid;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    border-radius: 4px;
}

.crs-dashboard .message.success {
    border-left-color: #00a32a;
    background-color: #edfaef;
}

.crs-dashboard .message.error {
    border-left-color: #d63638;
    background-color: #fcf0f1;
}

/* Уведомления из shortcode-handler.php */
.crs-dashboard .notice {
    padding: 10px;
    margin: 10px 0;
    border-left: 4px solid;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    border-radius: 4px;
}

.crs-dashboard .notice-success {
    border-color: #46b450;
    background-color: #dff0d8;
}

.crs-dashboard .notice-error {
    border-color: #dc3232;
    background-color: #fbeaea;
}

.crs-dashboard .notice-warning {
    border-color: #ffb900;
    background-color: #fff8e5;
}
/* --- Конец стилей для сообщений --- */


/* --- Стили для модальных окон (попапов) --- */
/* Основной оверлей для модального окна */
.crs-modal-overlay {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1000; /* Должно быть выше других элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Разрешить прокрутку, если модальное окно велико */
    background-color: rgba(0,0,0,0.5); /* Полупрозрачный черный фон */
    backdrop-filter: blur(2px); /* Лёгкое размытие фона (опционально) */
}

/* Содержимое модального окна */
.crs-modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Центрируем по вертикали и горизонтали */
    padding: 0;
    border: 1px solid #888;
    border-radius: 5px;
    width: 90%;
    max-width: 600px; /* Максимальная ширина */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative; /* Для позиционирования кнопки закрытия */
    max-height: 80vh; /* Ограничиваем высоту */
    overflow-y: auto; /* Разрешаем вертикальную прокрутку внутри модального окна */
}

/* Заголовок модального окна */
.crs-modal-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f7f7;
    border-radius: 5px 5px 0 0;
}

.crs-modal-header h3 {
    margin: 0;
    color: #1d2327;
    font-size: 1.2em;
}

/* Кнопка закрытия модального окна */
.crs-modal-close.modal-header-close {
    color: #f41414;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    box-shadow: none;
    margin-top: -16px;
    /* z-index: 99; */
    width: 0px;
}
.crs-modal-close.modal-header-close:hover {
    color: #f53434;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    box-shadow: none;
    
}


/* Тело модального окна (содержит форму) */
.crs-modal-body {
    padding: 15px;
}

/* --- Переопределяем стили для форм внутри модального окна --- */
/* Убираем старый стиль .form-container как display:none */
/* Теперь они будут внутри .crs-modal-body */
.crs-dashboard .form-container {
    display: block; /* Внутри модального окна форма всегда блок */
    margin-top: 0; /* Убираем отступ сверху */
    padding: 0; /* Убираем внутренний отступ, он на .crs-modal-body */
    border: none; /* Убираем рамку, она на .crs-modal-content */
    background-color: transparent; /* Прозрачный фон */
    box-shadow: none; /* Убираем тень */
    max-width: none; /* Убираем ограничение ширины */
}

/* Стили для превью изображений */
.crs-dashboard .image-preview {
    margin-top: 10px;
}

.crs-dashboard .image-preview img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
}
/* --- Конец стилей для модальных окон --- */




/* --- Стили для баланса --- */
.crs-dashboard .balance-positive {
    color: green;
    font-weight: bold;
}

.crs-dashboard .balance-negative {
    color: red;
    font-weight: bold;
}

.balance-zero { color: black; }




.crs-dashboard .driver-balances-cell .balance-item label {
    font-weight: normal; /* Жирный текст */
    color: #1d2327; /* Цвет текста (стандартный для WordPress админки) */
    font-size: 12px; /* Размер шрифта */
    margin-right: 5px; /* Отступ справа от текста до значения */
     display: inline-block; 
    /* width: ...; */ /* Установите ширину, если нужно выровнять */
    /* text-align: right; */ /* Выравнивание текста внутри label, если задана ширина */
}











/* 1. Вариант: Центрирование чекбоксов как по вертикали, так и по горизонтали внутри ячейки */
.crs-dashboard td input[type="checkbox"],
.crs-dashboard th input[type="checkbox"] {
       margin: auto;
      display: block;
}

/* Если вы хотите, чтобы чекбокс в заголовке (для "Выбрать все") был выровнен аналогично */
.crs-dashboard th input[type="checkbox"]#select-all-drivers {
     /* Можно применить те же правила, что и выше, или специфичные */
     margin: 0 auto; /* Центрирует по горизонтали в блочной ячейке <th> */
     display: block;
}









/* --- Конец стилей для баланса --- */
.driver-name{
    font-weight: 500;
}

/* --- Дополнительные стили из shortcode-handler.php --- */
.crs-dashboard .link-driver-form,
.crs-dashboard .adjust-balance-form {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 3px;
}

.crs-dashboard .adjust-balance-form select {
    width: auto;
    display: inline-block;
    margin-right: 10px;
}

.crs-dashboard .adjust-balance-form input[type="number"] {
    width: 100px;
    display: inline-block;
    margin-right: 10px;
}

.crs-dashboard .adjust-balance-form textarea {
    width: 300px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: top; /* Выравнивание по верху */
}
/* --- Конец дополнительных стилей --- */


/* --- Адаптивность --- */
/* --- Медиа-запросы для адаптивности --- */

/* --- 1. Стандартный адаптивный дизайн (до 782px) --- */
/* Этот запрос охватывает планшеты в портретной ориентации и маленькие ноутбуки */
@media screen and (max-width: 782px) {
    .crs-dashboard {
        /* padding: 10px; */ /* Можно оставить или убрать */
    }

    /* --- Таблицы --- */
    /* На планшетах таблицы могут начать вылезать за край, поэтому позволяем горизонтальную прокрутку */
    .crs-dashboard table {
        display: block;
        overflow-x: auto;
        width: max-content; /* Ширина таблицы определяется её содержимым */
        max-width: 100%; /* Но не больше ширины контейнера */
        font-size: 13px; /* Уменьшаем шрифт */
    }

    .crs-dashboard th,
    .crs-dashboard td {
        padding: 8px 10px; /* Уменьшаем отступы */
    }

    /* --- Табы --- */
    .crs-tabs {
        flex-direction: row; /* По умолчанию горизонтально */
        flex-wrap: wrap; /* Разрешаем перенос */
        border-bottom: 1px solid #c3c4c7;
        border-right: none; /* Убираем правую границу */
        padding: 0;
        background-color: #f0f0f1;
    }

    .crs-tab-button {
        border-radius: 4px 4px 0 0; /* Закругление сверху */
        border-bottom: 1px solid #c3c4c7;
        margin-right: 5px;
        margin-bottom: 0; /* Убираем нижний margin */
        border-right: none; /* Убираем правую границу */
        top: 1px; /* Немного вытягиваем вниз */
        display: block;
        text-align: left;
        flex-shrink: 0; /* Не сжимаем кнопки */
        white-space: nowrap; /* Не переносим текст */
    }

    .crs-tab-button.active {
        border-right: 1px solid #c3c4c7; /* Граница справа для активной кнопки */
        border-bottom: 1px solid #c3c4c7; /* Граница снизу */
        margin-right: -1px; /* Компенсируем правую границу */
        border-radius: 4px 4px 0 0; /* Закругление сверху */
    }

    /* --- Формы --- */
    .crs-dashboard .form-group.half-width {
        width: 100%;
        display: block;
        margin-right: 0;
        margin-bottom: 10px; /* Добавляем отступ снизу */
    }

    .crs-dashboard .adjust-balance-form select,
    .crs-dashboard .adjust-balance-form input[type="number"],
    .crs-dashboard .adjust-balance-form textarea {
        width: 100%;
        display: block;
        margin: 5px 0 10px 0; /* Отступы сверху и снизу */
    }

    .crs-dashboard .form-actions {
        text-align: center; /* Центрируем кнопки */
    }

     .form-actions  {
        display: block;
        width: 100%;
        margin: 5px 0; /* Отступы сверху и снизу */
    }

    /* --- Модальные окна --- */
    .crs-modal-content {
        width: 95%;
        max-width: 95%;
        margin: 5% auto;
        max-height: 90vh; /* Больше места на экране */
    }

    .crs-modal-body {
        padding: 10px; /* Уменьшаем отступы */
    }



    /* --- Кнопки --- */
    /* Адаптируем кнопки действий в таблице */
    .crs-dashboard 
    .crs-dashboard .delete-btn,
    .crs-dashboard .unlink-btn,
    .crs-dashboard .link-btn,
    .crs-dashboard .fire-btn,
    .crs-dashboard .adjust-btn {
        display: inline-block;
        width: auto; /* Ширина по содержимому */
        margin: 2px;
        padding: 4px 8px; /* Уменьшаем padding */
        font-size: 12px; /* Уменьшаем шрифт */
        line-height: 1.8; /* Корректируем высоту строки */
        min-height: 26px; /* Уменьшаем минимальную высоту */
    }

    /* Кнопка "Добавить ..." */
    .crs-dashboard #add-car-btn,
    .crs-dashboard #add-driver-btn,
    .crs-dashboard .add-btn {
        display: inline-flex;
        width: auto; /* Ширина по содержимому */
        margin: 0 0 15px 0;
        padding: 6px 10px; /* Уменьшаем padding */
        font-size: 12px; /* Уменьшаем шрифт */
        line-height: 1.8; /* Корректируем высоту строки */
        min-height: 26px; /* Уменьшаем минимальную высоту */
    }
}


/* Делаем нумерацию маленькой на мобильных */
@media (max-width: 768px) {
    .crs-sticky-header-table th:first-child,
    .crs-sticky-header-table td:first-child {
        width: 30px !important;
        min-width: 30px !important;
        font-size: 10px !important;
        padding: 4px 2px !important;
    }
    
    
    
    
    
    
    .crs-tabs, .crs-driver-actions, .crs-car-actions {
    
    position: relative;
    top: 7px;
    z-index: 1000;
    background: #fff;
    padding-top: 10px;
}
    
    
    
    
    
    
}


/* --- 2. Адаптивность для мобильных устройств (до 480px) --- */
/* Этот запрос охватывает смартфоны */
@media screen and (max-width: 480px) {
    .crs-dashboard {
        /* padding: 5px; */ /* Еще меньше отступов */
    }

    .crs-dashboard h2 {
        font-size: 1.2em; /* Уменьшаем заголовок */
        margin-top: 20px; /* Меньше отступа сверху */
    }
    
    




/* 2. Закрепляем блок с фильтрами */
.crs-reports-controls {
    /* Магия закрепления */
    
    position: relative;
    top: 69px; /* Блок остановится в 20px от верха экрана */
    
    /* Запрещаем блоку растягиваться и сжиматься */
    align-self: flex-start;
    flex-shrink: 0;
    
    /* Если фильтров много, внутри блока появится свой скролл, чтобы он не уходил за экран */
    max-height: calc(100vh - 40px); 
    overflow-y: auto;
    
    /* Опционально: добавляем фон и отступы, чтобы выглядело аккуратно */
    background: #fff; 
    padding-right: 10px; /* Место для полосы прокрутки внутри блока */
    z-index: 10; /* Чтобы блок был поверх других элементов при скролле */
}





.crs-sticky-header {
    position: -webkit-sticky;
    position: relative;
    top: 0;
    z-index: 1000;
    background: #fff;
}




    .crs-reports-container {
        flex-direction: column;
    }

    .crs-reports-controls,
    .crs-reports-results {
        width: 100%;
    }


  .crs-reports-controls .form-group label {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    align-items: center;
  }


    tr.crs-report-thead-row {
        display: none !important;
    }
        td[data-label="Комментарий"] {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 100px !important; /* отступ слева для подписи */
    }
    
    




.crs-sticky-header-table thead th {
    position: sticky;
    top: 0px;
    z-index: 2;
    background-color: #f8f8f8;
    padding: 8px;
    vertical-align: middle;
}





  .crs-payment-banner {
    max-width: 30.5% !important; /* Применить на мобильных */
    height: auto;
  }



    
    #search-cars {
    padding: 14px;
    width: 356px;
    margin-left: 1px;
    height: 1px;
    font-size: 12px;
    border-radius: 13px;
    box-shadow: 1px 1px 18px -11px #176bdf;
    margin-top: 11px;
}


#search-drivers{
        padding: 17px;
        width: 84% !important;
        margin-left: 11px;
        height: 1px;
        font-size: 12px;
        border-radius: 18px;
        box-shadow: 1px 1px 18px -11px #176bdf;
        margin-top: 11px;
        position: fixed !important;
        top: 31px;
        z-index: 111;
    }


.crs-driver-actions {
    display: block;
    /* align-items: baseline; */
    /* justify-content: center; */
}

#car-status-filter {
    width: 100%;
    height: 30px;
    
    font-size: 12px;
    
}

#driver-status-filter{
    width: 43.5%;
    height: 31px;
    margin-right: 5px;
    font-size: 12px;
    border-radius: 15px;
}

.crs-car-actions {
    display: block;
    /* align-items: stretch; */
    /* justify-content: right; */
}
    
    
    
    

    
    
    
    #bulk-adjust-balance-btn {
            display: block;
        align-items: center;
        gap: 1px;
        text-decoration: wavy;
        font-size: 13px;
        line-height: 2.153846;
        min-height: 33px;
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
        -webkit-appearance: none;
        border-radius: 15px;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: top;
        background: #42ae24;
        border-color: #3b3b3b;
        color: #fff;
        text-shadow: none;
        box-shadow: 0 1px 11px -4px #323232;
        float: none;
        text-align: center;
        position: fixed !important;
        top: 3px;
        z-index: 111;
        width: 84% !important;
        margin-left: 12px;
}


#bulk-adjust-balance-online-btn{
            display: block;
        gap: 5px;
        text-decoration: none;
        font-size: 13px;
        line-height: 2.153846;
        min-height: 24px;
        margin: 0 0 15px 0;
        padding: 0 10px;
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
        -webkit-appearance: none;
        border-radius: 15px;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: top;
        background: #44b122;
        border-color: #22b14a;
        color: #fff;
        text-shadow: none;
        box-shadow: 0 1px 11px -4px #0fb430;
        float: none;
        margin-right: 0px;
        margin-top: 13px;
    
}
    
    
 .crs-search-container{
     display: inline-grid
;
 } 
    
    
.driver-photo { max-width: 144px; height: auto;}
.car-photo { max-width: 144px; height: auto;}
    /* --- Таблицы (Карточный вид) --- */
    /* На маленьких экранах таблицы преобразуются в карточки */
    .crs-dashboard table,
    .crs-dashboard thead,
    .crs-dashboard tbody,
    .crs-dashboard th,
    .crs-dashboard td,
    .crs-dashboard tr {
        display: block; /* Блочные элементы */
        width: auto;
    }

    

    /* Стили для строк таблицы (теперь это карточки) */
    .crs-dashboard tr {
        border: 1px solid #ccc;
        margin-bottom: 20px;
        background-color: #fff;
        padding: 0px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Стили для ячеек таблицы (теперь это блоки внутри карточек) */
    .crs-dashboard td {
        /* border: none; */
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 15%;
        padding-right: 5px;
        white-space: normal;
        text-align: right;
        line-height: 3.1;
    }
    
    
    
    /* Стиль для ячейки "Действия" */
td[data-label="Действия"] {
        display: flex;
        align-content: flex-start;
        align-items: center;
        padding-left: 165px;
    }
  
  
  
  .crs-dashboard td input[type="checkbox"], .crs-dashboard th input[type="checkbox"] {
    margin: auto;
    display: block;
    margin-left: 114px;
}
  
  
    
    

    /* Добавляем псевдоэлементы для отображения названий полей */
    .crs-dashboard td::before {
        /* content: attr(data-label); */ /* Получаем текст из data-label атрибута ячейки */
        /* Пример: <td data-label="Имя">Иван</td> */
        /* Для этого нужно добавить data-label в HTML в class-crs-frontend-renderer.php */
        /* content: attr(data-label) ": "; */
        
        content: attr(data-label); /* Убрано двоеточие */
        text-align: left;
        position: absolute;
        left: 10px;
        width: 45%;
        font-weight: bold;
        color: #1d2327;
    }

    /* --- Табы --- */
    .crs-tabs {
        flex-direction: column; /* Вертикальное меню */
        border: none; /* Убираем нижнюю границу */
        
        padding-top: 64px;
        background-color: transparent; /* Прозрачный фон */
    }

    .crs-tab-button {
        margin-bottom: 5px;
        border: none;
        display: block;
        text-align: left;
        width: 97%;
    }

    .crs-tab-button.active {
        border-color:none;
        border:none;
        margin-right: -1px; /* Компенсируем правую границу */
        border-radius: 4px 0 0 4px; /* Закругление слева */
    }

    /* --- Формы --- */
    .crs-dashboard .form-group {
        margin-bottom: 12px; /* Меньше отступ между группами */
    }

    .crs-dashboard .form-group label {
        font-size: 13px; /* Меньше шрифт метки */
    }

    .crs-dashboard .form-group input,
    .crs-dashboard .form-group select,
    .crs-dashboard .form-group textarea {
        font-size: 14px; /* Шрифт полей ввода */
    }

    /* --- Модальные окна --- */
    .crs-modal-content {
        width: 98%;
        max-width: 98%;
        margin: 2% auto;
        max-height: 96vh; /* Почти весь экран */
    }

    .crs-modal-header h3 {
        font-size: 1.1em; /* Меньше заголовок модального окна */
    }

    

    .crs-modal-body {
        padding: 8px; /* Еще меньше отступы */
    }

    /* --- Кнопки --- */
    /* Кнопки действий в таблице (в карточном виде) */
    
    .crs-dashboard .delete-btn,
    .crs-dashboard .unlink-btn,
    .crs-dashboard .link-btn,
    .crs-dashboard .fire-btn,
    .crs-dashboard .adjust-btn {
        display: block;
        width: fit-content;
        margin: 0px;
        margin-left: auto;
        padding: 3px 7px 0px 7px;
        font-size: 11px;
        line-height: 1.6;
        min-height: 27px;
    }
        #edit-driver-btn edit-btn {
       display: block;
        width: fit-content;
        margin: 0px;
        margin-left: auto;
        padding: 3px 7px 0px 7px;
        font-size: 11px;
        line-height: 1.6;
        min-height: 27px;
    }

    /* Кнопка "Добавить ..." */
    .crs-dashboard #add-car-btn,
    .crs-dashboard #add-driver-btn,
    .crs-dashboard .add-btn {
        display: inline-flex;
        width: auto; /* Ширина по содержимому */
        margin: 0 0 0px 0; /* Меньше отступ снизу */
        padding: 2px 4px; /* Еще меньше padding */
        font-size: 11px; /* Еще меньше шрифт */
        line-height: 1.6;
        min-height: 25px;
    }

    /* --- Дополнительные стили --- */
    .crs-dashboard .link-driver-form,
    .crs-dashboard .adjust-balance-form {
        padding: 10px;
        width: 253px;
        margin-left: -96px;
    }

    .crs-dashboard .adjust-balance-form select,
    .crs-dashboard .adjust-balance-form input[type="number"],
    .crs-dashboard .adjust-balance-form textarea {
        font-size: 13px; /* Меньше шрифт */
    }
}

/* --- 3. Очень маленькие экраны (до 320px) --- */
@media screen and (max-width: 320px) {
    .crs-dashboard {
        /* padding: 2px; */ /* Минимальные отступы */
    }

    .crs-dashboard h2 {
        font-size: 1.1em; /* Еще меньше заголовок */
    }

    /* --- Таблицы (Карточный вид) --- */
    .crs-dashboard td {
        padding-left: 40%; /* Меньше отступ слева */
        padding-right: 5px; /* Меньше отступ справа */
        font-size: 12px; /* Меньше шрифт */
    }

    .crs-dashboard td::before {
        width: 35%; /* Меньше ширина метки */
        font-size: 11px; /* Меньше шрифт метки */
    }

    /* --- Формы --- */
    .crs-dashboard .form-group {
        margin-bottom: 10px; /* Еще меньше отступ */
    }

    .crs-dashboard .form-group label {
        font-size: 12px; /* Еще меньше шрифт метки */
    }

    .crs-dashboard .form-group input,
    .crs-dashboard .form-group select,
    .crs-dashboard .form-group textarea {
        font-size: 13px; /* Меньше шрифт полей */
        padding: 4px 6px; /* Меньше padding */
    }

    /* --- Модальные окна --- */
    .crs-modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        height: 100vh; /* Полноэкранный режим */
    }

    .crs-modal-header,
    .crs-modal-body {
        padding: 6px; /* Минимальные отступы */
    }

    .crs-modal-header h3 {
        font-size: 1em; /* Минимальный шрифт */
    }

    

    /* --- Кнопки --- */

    .crs-dashboard .delete-btn,
    .crs-dashboard .unlink-btn,
    .crs-dashboard .link-btn,
    .crs-dashboard .fire-btn,
    .crs-dashboard .adjust-btn,
    .crs-dashboard #add-car-btn,
    .crs-dashboard #add-driver-btn,
    .crs-dashboard .add-btn {
        display: inline-block;
        width: auto;
        margin: 1px;
        padding: 2px 4px;
        font-size: 10px;
        line-height: 1.5;
        min-height: 20px;
    }

    /* --- Дополнительные стили --- */
    .crs-dashboard .link-driver-form,
    .crs-dashboard .adjust-balance-form {
        padding: 5px;
    }

    .crs-dashboard .adjust-balance-form select,
    .crs-dashboard .adjust-balance-form input[type="number"],
    .crs-dashboard .adjust-balance-form textarea {
        font-size: 12px;
        padding: 3px 5px;
    }
}
/* --- Конец адаптивности --- */


/* --- Стили для кнопки "Добавить" с иконкой --- */
/* Стиль для символа плюса внутри кнопки "Добавить" уже определен выше */
/* --- Конец стилей для кнопки "Добавить" --- */

/* Цвета статусов автомобилей */
.car-status-available { color: blue!important; font-weight: bold; }
.car-status-rented { color: green!important; font-weight: bold;}
.car-status-maintenance { color: black!important; font-weight: bold; }
.car-status-retired { color: red!important; font-weight: bold; }
.car-status-on_line { color: green!important; font-weight: bold; }
.car-status-under_repair_with_driver { color: #333!important; font-weight: bold; }
.car-status-under_repair_without_driver { color: #333!important; font-weight: bold; }
.car-status-for_issue { color: #2f75cf!important; font-weight: bold; }
/* Цвета статусов водителей */
.driver-status-active { color: green!important; font-weight: bold; }
.driver-status-fired { color: red!important; font-weight: bold; }
.driver-status-on_vacation { color: black!important; font-weight: bold; }
.driver-status-sick_leave { color: black!important; font-weight: bold; }
.driver-status-resigned { color: brown!important; font-weight: bold; }
.driver-status-inactive { color: blue!important; font-weight: bold; }
.driver-status-suspended { color: orange!important; font-weight: bold; }
.driver-status-banned { color: #ff0000!important; font-weight: bold; }
.driver-status-on_line { color: green!important; font-weight: bold; }