/* ====================================================== */
/*          1. ОБЩИE СТИЛИ И ПЕРЕМЕНЕННЫЕ                   */
/* ====================================================== */

:root {
    --primary-color: #4ac7ee; /* Основной голубой */
    --primary-color-dark: #3ab0d8; /* Голубой при наведении */
    --background-color: #f4f7f6; /* Светло-серый фон страниц */
    --form-background: #ffffff; /* Белый фон форм */
    --text-color: #555; /* Основной цвет текста */
    --heading-color: #333; /* Цвет заголовков */
    --border-color: #e0e0e0; /* Цвет рамок */
    --danger-color: #e57373; /* Красный для кнопок удаления */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}

/* ====================================================== */
/*          2. СТРАНИЦА ВХОДА (LOGIN)                     */
/* ====================================================== */

.login-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--primary-color);
}

.login-container .error {
    color: #e57373; /* Используем наш --danger-color */
    font-weight: 600;
    background-color: #ffebee;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.login-container {
    width: 380px;
    padding: 40px;
    background-color: var(--form-background);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-header h1 {
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.login-header p {
    color: #aaa;
    margin: 0 0 30px 0;
}

.login-container .input-group {
    text-align: left;
    margin-bottom: 20px;
}

.login-container .input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.login-container .input-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s;
}

.login-container .input-group input::placeholder { color: #ccc; }
.login-container .input-group input:focus { outline: none; border-color: var(--primary-color); }

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.remember-me { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.login-container button {
    width: 100%; padding: 14px; background-color: var(--primary-color); color: white;
    border: none; border-radius: 12px; cursor: pointer; font-size: 16px; font-weight: 600;
    transition: background-color 0.3s;
}

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

/* ====================================================== */
/*          3. СТИЛИ ДЛЯ ВНУТРЕННИХ СТРАНИЦ               */
/* ====================================================== */

/* --- Хедер --- */
.main-header {
    background-color: #fff;
    padding: 15px 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.logo { font-size: 22px; font-weight: 700; color: var(--primary-color); }

.main-nav a {
    color: var(--text-color); text-decoration: none; font-weight: 500; margin: 0 15px;
    padding-bottom: 5px; transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 2px solid transparent;
}

.main-nav a:hover, .main-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }

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

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.page-header h1 { margin: 0; font-size: 28px; color: var(--heading-color); }

/* --- Кнопки --- */
.btn {
    padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer;
    font-size: 15px; font-weight: 600; transition: background-color 0.3s, box-shadow 0.3s;
}

.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--primary-color-dark); box-shadow: 0 4px 15px rgba(74, 199, 238, 0.3); }

.btn-icon {
    background: none; border: none; cursor: pointer; font-size: 20px;
    padding: 5px; margin: 0 5px; color: #aaa; transition: color 0.3s;
}
.btn-icon:hover { color: var(--primary-color); }
.btn-icon.btn-danger:hover { color: var(--danger-color); }

/* --- Таблицы --- */
.table-responsive { background-color: #fff; border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); padding: 15px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 15px; text-align: left; }
.data-table thead th { font-size: 14px; font-weight: 600; color: #999; text-transform: uppercase; border-bottom: 1px solid var(--border-color); }
.data-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table td { color: var(--text-color); vertical-align: middle; }
.data-table .action-buttons { display: flex; justify-content: flex-start; }
.text-center { text-align: center !important; }

/* ====================================================== */
/*          4. УНИФИЦИРОВАННЫЕ СТИЛИ ДЛЯ МОДАЛЬНЫХ ОКОН     */
/* ====================================================== */

.modal {
    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);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--form-background); padding: 30px; border: none;
    width: 90%; max-width: 500px; border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); position: relative; margin: auto;
    max-height: 90vh; /* Ограничиваем высоту */
    overflow-y: auto;  /* Добавляем скролл, если контент не помещается */
}

.modal.large-modal .modal-content { max-width: 950px; } /* Оптимальная ширина для форм с колонками */

.close-btn {
    color: #aaa; position: absolute; top: 15px; right: 20px;
    font-size: 28px; font-weight: bold; cursor: pointer;
}
.close-btn:hover, .close-btn:focus { color: black; }

.modal-content h2 {
    margin-top: 0; margin-bottom: 30px; text-align: center;
    font-size: 24px; color: var(--heading-color);
}

/* --- Общие стили для всех форм в модальных окнах --- */
.styled-form .form-group { margin-bottom: 20px; }
.styled-form label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.styled-form input[type="text"],
.styled-form input[type="password"],
.styled-form input[type="date"],
.styled-form input[type="number"],
.styled-form select,
.styled-form textarea {
    width: 100%;
    padding: 10px 12px; /* Уменьшаем высоту основных полей */
    border: 1px solid var(--border-color);
    border-radius: 10px; /* Слегка уменьшаем радиус для компактности */
    box-sizing: border-box;
    font-size: 14px; /* Уменьшаем шрифт в полях */
    transition: border-color 0.3s;
}
.styled-form input:focus, .styled-form select:focus, .styled-form textarea:focus {
    outline: none; border-color: var(--primary-color);
}
.styled-form button[type="submit"] { width: 100%; margin-top: 15px; }

/* ====================================================== */
/*      5. СТИЛИ ДЛЯ КОМПОНЕНТОВ ФОРМЫ "ДОБАВИТЬ СМЕНУ"    */
/* ====================================================== */

/* --- Структура колонок --- */
.form-columns { display: flex; gap: 20px; }
.form-column { flex: 1; min-width: 200px; }

/* --- Раскрывающиеся секции --- */
.collapsible-section {
    margin: 20px 0;
}
.collapsible-header {
    background-color: var(--background-color);
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease-in-out;
}
.collapsible-header:hover {
    background-color: #e9ecef;
}
.toggle-icon {
    margin-right: 12px;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
    transition: transform 0.2s ease-in-out;
}
.collapsible-content {
    display: none;
    padding: 20px 20px 5px 20px; /* Уменьшаем отступы */
    background-color: #fdfdfd;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* --- Внутренние компоненты секций --- */
.sub-columns-container, .split-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}
.sub-column, .split-column {
    flex: 1;
    min-width: 280px;
}
.sub-column-header {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
}
.form-field {
    flex: 1;
    margin-bottom: 15px;
}
.form-field label {
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-color);
}
/* Применяем уменьшенную высоту ко всем вложенным полям */
.form-field input, .form-field select {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 8px;
}
.plan-field {
    max-width: 250px;
    margin: 0 auto 25px auto;
    text-align: center;
}
.plan-field label {
    font-size: 15px;
    font-weight: 600;
}
.fields-group {
    display: flex;
    gap: 15px;
    /* Выравниваем поля по нижнему краю */
    align-items: flex-end;
}

.stat-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    background-color: var(--background-color);
    padding: 5px 8px; /* Уменьшаем отступы */
    border-radius: 8px;
}
.stat-field label { margin-bottom: 0; font-weight: 600; }
.stat-field input { max-width: 100px; text-align: center; font-weight: bold; }

.grid-header.participants-header {
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--heading-color);
}

/* --- Кнопка "Добавить тренера" --- */
.btn-add-secondary {
    width: 100%; font-weight: 600; margin: 20px 0; border: 1px dashed var(--primary-color);
    background-color: #f0f9ff; color: var(--primary-color); padding: 10px 16px;
    font-size: 15px; border-radius: 10px; cursor: pointer; transition: background-color 0.3s;
}
.btn-add-secondary:hover { background-color: #e3f2fd; }

/* --- Динамический блок тренера --- */
.trainer-block {
    margin-top: 25px; border: 1px solid var(--border-color); border-radius: 12px;
    padding: 20px; position: relative; background-color: #fdfdfd;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.trainer-block-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.trainer-block .trainer-select {
    font-weight: bold; font-size: 1.1em;
    padding: 8px 12px; /* Применяем тот же паддинг */
    border-radius: 8px; flex-grow: 1;
}
.trainer-block .remove-trainer-btn {
    width: 32px; height: 32px; border: none; background-color: #ffebee;
    color: var(--danger-color); border-radius: 50%; cursor: pointer; font-size: 22px;
    line-height: 32px; text-align: center; margin-left: 15px; transition: background-color 0.3s;
}
.trainer-block .remove-trainer-btn:hover { background-color: #ffcdd2; }
/* Вложенные секции внутри блока тренера */
.trainer-block .collapsible-section { margin-left: 0; margin-right: 0; }
.trainer-block h5 {
    margin-top: 0; margin-bottom: 15px; font-size: 15px; color: var(--heading-color);
    border-bottom: 1px solid var(--border-color); padding-bottom: 8px;
}

/* --- Кнопка сохранения --- */
#shiftForm .create-btn {
    width: auto; min-width: 250px; display: block; margin: 25px auto 0;
}
/* ====================================================== */
/*          6. СТИЛИ ДЛЯ ФИЛЬТРОВ         */
/* ====================================================== */

.filter-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; 
    gap: 20px;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-field:not(.filter-field-large) {
    flex-grow: 1; 
    min-width: 180px;
}
.filter-field-large {
    flex-grow: 2; 
    min-width: 250px;
}
.filter-form input[name="date_range"] {
    min-width: 200px;
    max-width: 220px;
    flex-grow: 0;
}


.filter-field label {
    font-weight: 600;
    font-size: 14px;
}

.filter-field input[type="date"],
.filter-field input[type="text"],
.filter-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s;
}

.filter-field input[type="date"]:focus,
.filter-field input[type="text"]:focus,
.filter-field select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 2px;
}

.btn-reset {
    text-decoration: none;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
}
.btn-reset:hover {
    color: var(--primary-color);
}

/* ====================================================== */
/*          7. СТИЛИ ДЛЯ ОКНА ПРОСМОТРА СМЕНЫ (ГИБРИДНЫЙ)  */
/* ====================================================== */

.view-content {
    padding: 10px;
}

.view-section {
    margin-bottom: 25px;
}

.view-content h3 {
    font-size: 18px;
    color: var(--heading-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 15px;
}

.view-content h5 {
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.view-content ul {
    list-style-type: none;
    padding: 0 0 0 10px;
    margin: 0;
    border-left: 2px solid #e0e0e0;
}

.view-content li {
    display: flex;
    justify-content: space-between;
    padding: 8px 5px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.view-content li:last-child {
    border-bottom: none;
}

.view-content li span {
    color: #666;
    padding-right: 15px;
}

.view-content li strong {
    color: var(--heading-color);
    font-weight: 600;
    white-space: pre-wrap;
    text-align: right;
}

.view-pivot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 15px;
}

.view-pivot-table thead th {
    background-color: var(--background-color);
    padding: 12px 15px;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    position: sticky;
    top: 0;
}
.view-pivot-table thead th:first-child {
    text-align: left;
}

.view-pivot-table tbody td,
.view-pivot-table tbody th {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.view-pivot-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.view-pivot-table .section-header th {
    background-color: #e9ecef;
    color: var(--heading-color);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-top: 2px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.view-pivot-table .metric-name {
    font-weight: 500;
    color: #333;
}

.view-pivot-table .metric-value {
    text-align: center;
    font-weight: 600;
    font-family: monospace;
    font-size: 15px;
}

.details-table th, .details-table td {
    padding: 10px 12px;
}

/* ====================================================== */
/*          8. СТИЛИ ДЛЯ СТРАНИЦЫ "КОНВЕРСИИ"             */
/* ====================================================== */

.tabs-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}
.tab-link {
    padding: 10px 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 3px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}
.tab-link:hover {
    color: var(--primary-color);
}
.tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

.table-responsive {
    overflow-x: auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 15px;
}

.conversion-table {
    white-space: nowrap;
    font-size: 13px;
    border-spacing: 0;
    border-collapse: separate; /* Важно для работы sticky headers и borders */
}
.conversion-table th[colspan] {
    font-size: 14px;
    font-weight: 600;
}
.conversion-table tbody td {
    text-align: center;
    padding: 8px 10px;
    /* Изменение: Делаем линию черной (или темно-серой #333) */
    border-bottom: 2px solid #ebebeb; 
}
.conversion-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
}

/* --- Закрепление шапки и первого столбца --- */
.conversion-table thead {
    position: sticky;
    top: 0;
    z-index: 4;
}

.conversion-table thead th {
    padding: 8px 10px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #d4e3f3;
    background-color: #f4f7f6; /* Дефолтный фон */
}

/* Закрепление первого столбца (Имена) */
.conversion-table .block-main:first-child {
    position: sticky;
    left: 0;
    border-right: 2px solid #d4e3f3; /* Жирная линия справа от имени */
}

.conversion-table thead .block-main:first-child {
    z-index: 5; /* Поверх всего в шапке */
    background-color: #f4f7f6;
}

.conversion-table tbody .block-main:first-child {
    z-index: 3; /* Поверх скроллящегося контента */
    background-color: #ffffff;
}
.conversion-table tbody tr:nth-child(even) .block-main:first-child {
    background-color: #f8f9fa;
}

/* --- Стилизация блока MAIN (Начало таблицы: Часы, Касса, ЗП и т.д.) --- */

/* Фон заголовков для блока Main (как в Зарплатах - AliceBlue) */
.conversion-table thead th.block-main:not(:first-child) {
    background-color: #f0f8ff; 
}

/* Вертикальные разделители для блока Main */
.conversion-table th.block-main, 
.conversion-table td.block-main {
    border-right: 1px solid #d4e3f3;
}

/* Убираем фон у ячеек тела, чтобы работал зебра-стиль строки */
.conversion-table tbody td.block-main:not(:first-child) {
    background-color: transparent;
}

/* --- ЦВЕТНЫЕ БЛОКИ (Пробники, Сертификаты и т.д.) --- */

/* Заголовки */
.conversion-table thead .block-group-trials { background-color: #eaf2fa; }
.conversion-table thead .block-cert-trials { background-color: #fef8e7; }
.conversion-table thead .block-renewals { background-color: #f0eefc; }
.conversion-table thead .block-personals { background-color: #eaf7f0; }
.conversion-table thead .block-personals-renewal { background-color: #fce4ec; }

/* Тело таблицы и границы блоков */
/* Общий стиль для всех цветных блоков: жирная левая граница, тонкие внутренние */

/* 1. Пробники (Группа) */
.block-group-trials {
    background-color: #eaf2fa;
}
.conversion-table td.block-group-trials, .conversion-table th.block-group-trials {
    border-left: 2px solid #a9c5e2; /* Жирная граница слева */
    border-right: 1px solid #d4e3f3; /* Тонкая справа */
}
/* Убираем жирную левую границу у всех ячеек КРОМЕ первой в блоке */
.conversion-table td.block-group-trials ~ td.block-group-trials,
.conversion-table th.block-group-trials ~ th.block-group-trials {
    border-left: none;
}

/* 2. Пробники (Сертификаты) */
.block-cert-trials {
    background-color: #fef8e7;
}
.conversion-table td.block-cert-trials, .conversion-table th.block-cert-trials {
    border-left: 2px solid #f0dca4;
    border-right: 1px solid #f9ebd0;
}
.conversion-table td.block-cert-trials ~ td.block-cert-trials,
.conversion-table th.block-cert-trials ~ th.block-cert-trials {
    border-left: none;
}

/* 3. Персоналки (Новые) */
.block-personals {
    background-color: #eaf7f0;
}
.conversion-table td.block-personals, .conversion-table th.block-personals {
    border-left: 2px solid #b7ddc6;
    border-right: 1px solid #d8ede1;
}
.conversion-table td.block-personals ~ td.block-personals,
.conversion-table th.block-personals ~ th.block-personals {
    border-left: none;
}

/* 4. Продления (Группа) */
.block-renewals {
    background-color: #f0eefc;
}
.conversion-table td.block-renewals, .conversion-table th.block-renewals {
    border-left: 2px solid #cbc2f2;
    border-right: 1px solid #e2dff8;
}
.conversion-table td.block-renewals ~ td.block-renewals,
.conversion-table th.block-renewals ~ th.block-renewals {
    border-left: none;
}

/* 5. Персоналки (Продления) */
.block-personals-renewal {
    background-color: #fce4ec;
}
.conversion-table td.block-personals-renewal, .conversion-table th.block-personals-renewal {
    border-left: 2px solid #f48fb1;
    border-right: 1px solid #f8c9d9;
}
.conversion-table td.block-personals-renewal ~ td.block-personals-renewal,
.conversion-table th.block-personals-renewal ~ th.block-personals-renewal {
    border-left: none;
}
/* Жирная граница в конце таблицы */
.block-personals-renewal:last-child {
    border-right: 2px solid #f48fb1;
}


/* --- Стили для блоков Зарплаты (используют ту же таблицу) --- */
/* Фон заголовков "белого" блока в Зарплатах */
.conversion-table thead .block-total-salary,
.conversion-table thead .block-revenue,
.conversion-table thead .block-base-salary,
.conversion-table thead .block-bonus,
.conversion-table thead .block-sales-cash,
.conversion-table thead .block-sales-dirty,
.conversion-table thead .block-one-time,
.conversion-table thead .block-trials-sum,
.conversion-table thead .block-installments {
    background-color: #f0f8ff; /* AliceBlue */
    border-right: 1px solid #d4e3f3;
}
/* Первые ячейки блоков в зарплатах тоже должны иметь жирную границу слева (как в конверсиях) */
.conversion-table th.block-total-salary, .conversion-table td.block-total-salary {
    border-left: 2px solid #a9c5e2;
}

/* --- Общие утилиты для таблицы --- */

.conversion-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* Строка ИТОГО */
.conversion-table tfoot .totals-row td {
    text-align: center;
    font-weight: bold;
    background-color: #f8f9fa;
    border-top: 2px solid var(--border-color);
    border-right: 1px solid #e0e0e0;
}
.conversion-table tfoot .totals-row td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 6;
    border-right: 2px solid #d4e3f3;
}

/* Узкие заголовки */
.conversion-table th.narrow-header {
    min-width: 70px;
    max-width: 90px;
    white-space: normal !important;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.2;
    padding: 5px;
}

.conversion-table td small {
    color: #777;
    font-weight: normal;
    margin-left: 3px;
}

/* ====================================================== */
/*          9. СТИЛИ ДЛЯ СИСТЕМНЫХ СООБЩЕНИЙ              */
/* ====================================================== */
.messages {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}
.alert {
    padding: 15px 20px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
}
.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
/* ====================================================== */
/*          10. СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО СПИСКА С ЧЕКБОКСАМИ */
/* ====================================================== */
.multiselect-checkbox option {
    display: block;
    padding: 8px 12px 8px 35px;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}
.multiselect-checkbox option::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}
.multiselect-checkbox option:hover {
    background-color: #f4f4f4;
}
.multiselect-checkbox option:checked {
    background-color: #e7f4ff;
    font-weight: 600;
    color: #0056b3;
}
.multiselect-checkbox option:checked::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.multiselect-checkbox option:checked::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 48%;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(45deg);
}
.multiselect-checkbox:focus {
    outline: 2px solid var(--primary-color);
}

/* ====================================================== */
/*          11. CUSTOM MULTISELECT DROPDOWN               */
/* ====================================================== */

.multiselect-checkbox {
    display: none !important;
}

.custom-multiselect {
    position: relative;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.custom-multiselect .select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    background-color: #fff;
    transition: border-color 0.3s;
}

.custom-multiselect.open .select-box {
    border-color: var(--primary-color);
}

.custom-multiselect .selected-count {
    color: var(--text-color);
    font-size: 14px;
}

.custom-multiselect .selected-count .placeholder {
    color: #999;
}

.custom-multiselect .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #888;
    transition: transform 0.2s ease-in-out;
}

.custom-multiselect.open .arrow {
    transform: rotate(180deg);
}

.custom-multiselect .options-container {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 1050; 
    max-height: 200px;
    overflow-y: auto;
}

.custom-multiselect.open .options-container {
    display: block;
}

.custom-multiselect .option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-multiselect .option:hover {
    background-color: #f4f7f6;
}

.custom-multiselect .option label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
}

.custom-multiselect .option input[type="checkbox"] {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.custom-multiselect .option.select-all {
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}
/* --- ИЗМЕНЕНИЕ: Убираем цветную заливку с общих сумм --- */
.conversion-table td.block-main,
.conversion-table th.block-main {
    background-color: transparent !important;
}

/* Возвращаем фон для первого столбца с именами, чтобы он выделялся при прокрутке */
.conversion-table tbody .block-main:first-child {
    background-color: #ffffff !important;
}
.conversion-table tbody tr:nth-child(even) .block-main:first-child {
    background-color: #f8f9fa !important;
}
.conversion-table tfoot .totals-row td {
    text-align: center; /* Выравниваем все ячейки по центру */
    font-weight: bold; /* Делаем текст жирным */
    background-color: #f8f9fa; /* Легкий фон для выделения */
    border-top: 2px solid var(--border-color); /* Жирная верхняя граница */
}

.conversion-table tfoot .totals-row td:first-child {
    text-align: left; /* Первую ячейку ("Итого") выравниваем по левому краю */
}

/* ====================================================== */
/*              СТИЛИ ДЛЯ СТРАНИЦЫ "ЗАРПЛАТЫ"             */
/* ====================================================== */

/* --- Панель кнопок настроек --- */
.settings-bar {
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-start;
}

.btn-settings {
    background-color: #f0f0f0;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-settings:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

.btn-settings.hidden {
    display: none !important;
}

/* --- Стили для комментариев (аккордеон) --- */
.comment-group {
    margin-bottom: 25px;
}

.comment-group h4 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    color: var(--heading-color);
    font-size: 16px;
}

.comment-group .data-table th,
.comment-group .data-table td {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13px;
}

/* --- Стили внутри модальных окон настроек --- */
.settings-main-group .form-column,
.settings-bonus-group .form-column {
    min-width: 150px; /* Минимальная ширина колонок */
}

.settings-bonus-group .form-group {
    margin-bottom: 0; /* Убираем лишний отступ снизу в группе бонусов */
}

/* --- Ссылки в заголовках таблицы (сортировка) --- */
.data-table thead th a {
    color: inherit; /* Наследуем цвет от th (#999 или черный) */
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.data-table thead th a:hover {
    color: var(--primary-color);
}

/* --- Исправление отображения фильтров (переключение вкладок) --- */
/* Скрываем фильтры зарплат и конверсий по умолчанию */
#admin-filter, 
#trainer-filter,
#admin-filter-form, 
#trainer-filter-form {
    display: none;
}

/* Показываем только активный фильтр */
#admin-filter.active, 
#trainer-filter.active,
#admin-filter-form.active, 
#trainer-filter-form.active {
    display: block;
}

/* Стили самого контейнера фильтра (если нужно переопределить что-то специфичное для зарплат) */
#admin-filter, #trainer-filter {
    min-height: auto;
    padding: 20px;
}
/* 1. Жирная левая граница для начала блока расчетов (столбец ВСЯ ЗП) */
.conversion-table th.block-total-salary,
.conversion-table td.block-total-salary {
    border-left: 2px solid #a9c5e2 !important;
}

/* 2. Тонкие вертикальные линии справа для всех колонок "белого" блока */
/* Применяем и к заголовкам (th), и к ячейкам (td) */
.conversion-table th.block-total-salary, .conversion-table td.block-total-salary,
.conversion-table th.block-revenue,      .conversion-table td.block-revenue,
.conversion-table th.block-base-salary,  .conversion-table td.block-base-salary,
.conversion-table th.block-bonus,        .conversion-table td.block-bonus,
.conversion-table th.block-sales-cash,   .conversion-table td.block-sales-cash,
.conversion-table th.block-sales-dirty,  .conversion-table td.block-sales-dirty,
.conversion-table th.block-one-time,     .conversion-table td.block-one-time,
.conversion-table th.block-trials-sum,   .conversion-table td.block-trials-sum,
.conversion-table th.block-installments, .conversion-table td.block-installments {
    border-right: 1px solid #d4e3f3;
}

/* 3. Светло-голубой фон для заголовков этих колонок (чтобы отделить от цветных групп) */
.conversion-table thead th.block-total-salary,
.conversion-table thead th.block-revenue,
.conversion-table thead th.block-base-salary,
.conversion-table thead th.block-bonus,
.conversion-table thead th.block-sales-cash,
.conversion-table thead th.block-sales-dirty,
.conversion-table thead th.block-one-time,
.conversion-table thead th.block-trials-sum,
.conversion-table thead th.block-installments {
    background-color: #f0f8ff; /* AliceBlue */
}

/* ====================================================== */
/*   ИСПРАВЛЕНИЕ СТИЛЕЙ (КНОПКИ УДАЛЕНИЯ И ВЫРАВНИВАНИЕ)  */
/* ====================================================== */

/* Восстановление стиля кнопки удаления (красный кружок) */
.remove-row-btn,
.remove-trainer-btn {
    width: 32px;
    height: 32px;
    min-width: 32px; /* Чтобы не сжималась flex-ом */
    border: none;
    background-color: #ffebee;
    color: #e57373; /* Красный цвет */
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 32px; /* Центрирование по вертикали */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    margin-left: 15px; /* Отступ от полей */
    padding: 0;
}

.remove-row-btn:hover,
.remove-trainer-btn:hover {
    background-color: #ffcdd2;
}

/* Стиль для строки Пробной персоналки (выравнивание по низу) */
.trial-personal-row {
    display: flex;
    align-items: flex-end; /* Выравнивание полей и кнопки по нижнему краю */
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e0e0e0; /* Легкий разделитель */
}

/* Контейнер для полей внутри строки */
.trial-personal-row .row-content {
    display: flex;
    flex-grow: 1;
    gap: 20px; /* Отступ между Суммой и Тренером */
    align-items: flex-end;
}

/* Поля внутри строки */
.trial-personal-row .form-field {
    margin-bottom: 0; /* Убираем нижний отступ у wrapper-а поля */
}

.trial-personal-row label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

/* Поле ввода суммы */
.trial-personal-row input[name^="trial_personal_amount"] {
    width: 120px; /* Фиксированная небольшая ширина */
}

/* Поле выбора тренера (растягиваем) */
.trial-personal-row select,
.trial-personal-row .custom-multiselect {
    width: 100%;
    min-width: 250px;
}
/* Контейнер всей строки (поля + кнопка) */
.dynamic-row {
    display: flex;
    align-items: flex-end; /* Выравнивание по нижнему краю (чтобы кнопка была на уровне полей) */
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: #fdfdfd;
    margin-bottom: 15px;
}

/* Контейнер для самих полей ввода (слева от кнопки) */
.dynamic-row .row-content {
    display: flex;
    flex-grow: 1;
    gap: 20px; /* Расстояние между полями Сумма, Админы, Тренеры */
    width: 100%;
}

/* Обертка каждого поля (label + input/select) */
.dynamic-row .form-field {
    flex: 1; /* Поля растягиваются равномерно */
    margin-bottom: 0; /* Убираем отступ снизу, так как выравниваем flex-ом */
    min-width: 150px; /* Минимальная ширина, чтобы не сплющивались */
}

.dynamic-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap; /* Запрет переноса текста в лейбле */
}

/* Кнопка удаления (Красный кружок с крестиком по центру) */
.remove-row-btn {
    width: 32px;        /* Фиксированная ширина */
    height: 32px;       /* Фиксированная высота */
    min-width: 32px;    /* Запрет сжатия flex-ом */
    border: none;
    background-color: #ffebee;
    color: #e57373;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    /* Центрирование крестика */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;         /* Убираем внутренние отступы */
    line-height: 1;     /* Сбрасываем высоту строки */
    margin-bottom: 2px; /* Небольшая коррекция по вертикали, чтобы ровно стоял с input */
    transition: background-color 0.3s;
}

.remove-row-btn:hover {
    background-color: #ffcdd2;
}

/* Специфичные правки для блока "Пробные персоналки", 
   чтобы он наследовал этот же стиль, но с нюансами ширины */
.trial-personal-row .row-content {
    justify-content: flex-start; /* Поля слева */
}

.trial-personal-row input,
.trial-personal-row select,
.trial-personal-row .custom-multiselect .select-box {
    width: 100%; /* Растягиваем на всю ширину родителя (.form-field) */
    box-sizing: border-box;
}
/* Убираем специфичные ограничения ширины, которые были раньше */
.trial-personal-row input[name^="trial_personal_amount"] {
    width: 100%; 
    max-width: none;
}
.conversion-table tr.total-row td {
    background-color: #e9ecef !important; /* Светло-серый фон (как у заголовков разделов) */
    font-weight: 700; /* Жирный шрифт */
    border-top: 2px solid #adb5bd; /* Темно-серая верхняя граница для выделения */
    border-bottom: 2px solid #adb5bd; /* Темно-серая нижняя граница */
    color: #212529; /* Темный цвет текста */
}

/* Фон для первой ячейки (Имя) */
.conversion-table tr.total-row td.block-main:first-child {
    background-color: #e9ecef !important;
}

/* Сводка на странице Продаж (Компактная версия) */
.summary-panel {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Уменьшен зазор */
    margin-bottom: 20px; /* Уменьшен отступ снизу */
    background-color: #fff;
    padding: 12px 20px; /* Уменьшены внутренние отступы (было 20px 30px) */
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03); /* Чуть мягче тень */
    border: 1px solid #e0e0e0;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    justify-content: center; /* Центрирование по вертикали */
}

/* Разделители */
.summary-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%; /* Чуть короче разделитель */
    width: 1px;
    background-color: #eee; /* Светлее цвет разделителя */
}

.summary-label {
    font-size: 11px; /* Уменьшен шрифт (было 13px) */
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px; /* Меньше отступ до цифры */
    font-weight: 600;
}

.summary-value {
    font-size: 18px; /* Уменьшен шрифт цифр (было 22px) */
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.2;
}

.summary-value.text-danger {
    color: #e57373;
}

/* Адаптивность */
@media (max-width: 768px) {
    .summary-panel {
        flex-wrap: wrap;
        padding: 10px;
    }
    .summary-item {
        flex: 1 1 45%;
        border-bottom: none;
        padding: 5px 0;
    }
    /* На мобильных добавляем границы снизу первым двум элементам */
    .summary-item:nth-child(-n+2) {
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 5px;
        padding-bottom: 10px;
    }
    .summary-item:not(:last-child)::after {
        display: none;
    }
}
/* ====================================================== */
/*   ЦВЕТНЫЕ ГОРИЗОНТАЛЬНЫЕ ЛИНИИ ДЛЯ ГРУПП               */
/* ====================================================== */

/* 1. Пробники (Группа) - Голубой */
.conversion-table tbody td.block-group-trials {
    border-bottom: 1px solid #d4e3f3 !important;
}

/* 2. Пробники (Сертификаты) - Желтый */
.conversion-table tbody td.block-cert-trials {
    border-bottom: 1px solid #f9ebd0 !important;
}

/* 3. Персоналки (Новые) - Зеленый */
.conversion-table tbody td.block-personals {
    border-bottom: 1px solid #d8ede1 !important;
}

/* 4. Продления (Группа) - Фиолетовый */
.conversion-table tbody td.block-renewals {
    border-bottom: 1px solid #e2dff8 !important;
}

/* 5. Персоналки (Продления) - Розовый */
.conversion-table tbody td.block-personals-renewal {
    border-bottom: 1px solid #f8c9d9 !important;
}

/* ВАЖНО: Оставляем строку ИТОГ (Total) выделенной своим цветом (серым/черным),
   если она есть, так как у нее свой класс .total-row, который переопределит это
   благодаря специфичности или порядку в CSS, если он был добавлен ниже. 
   Если ИТОГ перекрасился, добавьте этот фикс: 
*/
.conversion-table tr.total-row td {
    border-bottom: 2px solid #adb5bd !important;
}
/* ====================================================== */
/*   СТИЛИ ДЛЯ ПЕРЕТАСКИВАНИЯ ТАБЛИЦЫ (ЛАПКА ПРИ НАЖАТИИ) */
/* ====================================================== */

.table-responsive {
    /* При простом наведении - стандартная системная "рука" (показывает, что можно тянуть) */
    /* Если хотите обычную стрелку, напишите: cursor: default; */
    cursor: grab; 
    
    overflow: auto;
}

/* Класс active добавляется JS-ом только при нажатии (mousedown) */
.table-responsive.active {
    /* ЛАПКА ПОЯВЛЯЕТСЯ ТОЛЬКО ЗДЕСЬ */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g transform="scale(0.9) translate(2 2) rotate(0 18 18)"><path fill="%23ffefd5" stroke="%238b0000" stroke-width="1.5" d="M9,14 C7,18 6,26 12,30 C18,34 28,32 32,24 C34,18 30,12 24,10 C18,8 12,10 9,14 Z"/><path fill="%23ffefd5" stroke="%238b0000" stroke-width="1.5" d="M5,12 C4,8 7,5 10,6 C12,7 12,11 10,13 Z"/><path fill="%23ffefd5" stroke="%238b0000" stroke-width="1.5" d="M12,6 C12,2 17,1 20,3 C22,5 21,9 18,10 Z"/><path fill="%23ffefd5" stroke="%238b0000" stroke-width="1.5" d="M22,6 C23,2 28,3 30,6 C32,9 29,12 26,12 Z"/><path fill="%23ffefd5" stroke="%238b0000" stroke-width="1.5" d="M30,12 C32,10 35,13 34,16 C33,18 30,17 30,15 Z"/><path fill="%23d2691e" d="M7,10 C6.5,9 8,7 9,8 C10,9 9,11 8,11 Z"/><path fill="%23d2691e" d="M15,5 C14,4 17,3 19,4 C20,5 19,7 17,7 Z"/><path fill="%23d2691e" d="M24,6 C23,5 27,5 28,7 C29,9 27,9 25,9 Z"/><path fill="%23d2691e" d="M31,13 C31,12 33,12 33,14 C33,15 31,15 31,14 Z"/><ellipse cx="20" cy="22" rx="6" ry="5" fill="%23cd5c5c" /><path fill="%238b0000" d="M4,10 L2,8 M13,3 L13,1 M24,3 L26,1 M34,10 L36,9" stroke="%238b0000" stroke-width="1"/></g></svg>') 16 16, grabbing;
    
    user-select: none; /* Запрещаем выделение текста во время перетаскивания */
}