/*main.css*/
/* 1. Светлая тема (по умолчанию) */
:root {
    color-scheme: light;
    --primary-color: #f50537;
    --primary-color-rgb: 245, 5, 55; /* RGB для #f50537 */
    --primary-color-hover: #d1042f;
    --signal-yellow: #ffaa00;
    --signal-red: #eb0d3f;
    --neon-blue: #0d6efd;
    --neon-green: #0da20d;
    --narabotka-text-color: #E040FB;
    --background-light: #e9ecef;
    --border-color: #ced4da;
    --panel-button-color: #495057; /* цвет текста кнопок боковых панелей */
    --panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --color-dark: #212529;
    --color-light: #f8f9fa;
    --bstable-bg: #e5e5e5; /* для строки дня недели */
    --bstable-row-hover-bg: #f5f5f5; /* Очень светлый серый для подсветки */
    --bs-table-hover-bg: var(--bstable-row-hover-bg);
    --text-btn-sverka-settings: #212529;
    --secondary-color-hover: #5a6268;
    --secondary-color: #6c757d;
    --btn-color-text-hover: #1a1a1a;
    --btn-color-text-active: #ffffff;

    --text-color-primary-on-hover: #1a1a1a;   /* Текст при наведении: остается темным */
    --bstable-hover-bg: #b3b3b3; /* для строки дня недели при наведении */
    --panel-btn-hover-bg: #265eb1; /* Такой же, как у строки */
    --bg-color-card: #ffffff;
    --bg-color-main: #ffffff;
    --bg-color-header: #2d3748;       /* Фон для шапки делаем таким же, как у карточек */
    --btn-secondary-border-color: #dee2e6;
    --manager-expense-border: #0d6efd;
    --text-color-primary: #1a1a1a;
    --text-color-secondary: #ffffff;
    /* сумма оплат color gradient */
    --card-bg: #FF5722;
    --card-text: #FFFFFF;
    --cash-bg: #009688;
    --cash-text: #FFFFFF;
    --fop-bg: #9C27B0;
    --fop-text: #FFFFFF;
    --btn-color-text: #FFFFFF;
    --danger-color-glow: 229, 57, 53; /* Яркий красный для свечения (R, G, B) */
    --success-color: #198754; /* Классический зеленый Bootstrap */
    --success-color-hover: #157347; /* Его темный вариант для наведения */

    /* цвет кнопок выбора недель */
    --date-btn-text: #6c757d; /* Цвет текста НЕАКТИВНОЙ кнопки (серый) */
    --date-btn-bg-hover: #e9ecef; /* Фон НЕАКТИВНОЙ кнопки при наведении */
    --date-btn-border-color: #dee2e6; /* Светлая рамка для светлой темы */
    --select-option-hover-bg: #dbeafe; /* Светло-голубой для светлой темы */
    --select-option-hover-text: #1e40af;
}

/* 2. Темная тема */
body[data-theme="dark"] {
    color-scheme: dark;
    /* --- ОСНОВНЫЕ ЦВЕТА ФОНА И ТЕКСТА --- */
    --bg-color-main: #1a202c;         /* Глубокий, почти черный сине-серый фон */
    --bg-color-card: #2d3748;         /* Темно-серый для карточек, таблиц и панелей */
    --bg-color-header: #2d3748;       /* Фон для шапки делаем таким же, как у карточек */
    --bg-color-modal: #2d3748;        /* Фон для модальных окон */
    --text-color-primary: #e2e8f0;    /* Светлый, почти белый для основного текста */
    --text-color-secondary: #e2e8f0;  /* Чистый белый для текста на цветных плашках */
    --border-color: #556275;          /* Более заметный, но не кричащий цвет рамки */
    --panel-button-color: #a0aec0; /* Цвет текста кнопок боковых панелей */
    --btn-color-text-active: #e2e8f0;
    --btn-color-text-hover: #e2e8f0;
    --secondary-color-hover: #5a6268;
    --secondary-color: #6c757d;
    /* --- ЦВЕТА ТАБЛИЦЫ --- */
    --bstable-bg: #1f2738;            /* Фон строки с днем недели (чуть светлее основного) */
    --bstable-hover-bg: #3a475a;      /* Фон строки дня недели при наведении */
    --bstable-row-hover-bg: var(--border-color);        /* Заметно, но не кричаще, светлее фона карточек */
    --panel-btn-hover-bg: #374151; /* Этот цвет будет выглядеть на панели так же, как #4a5568 в таблице */
    --text-color-primary-on-hover: #e2e8f0; /* Текст ОСТАЕТСЯ СВЕТЛЫМ, как и основной */
    /* --- ЦВЕТА АКЦЕНТОВ И СИГНАЛОВ (можно оставить без изменений, но можно и улучшить) --- */
    --primary-color: #e53e3e;         /* Слегка приглушенный красный, лучше смотрится на темном */
    --primary-color-rgb: 229, 62, 62; /* RGB для #e53e3e */
    --primary-color-hover: #c53030;   /* Более темный красный для наведения */
    --signal-yellow: #f6ad55;         /* Теплый желтый */
    --signal-red: #f56565;            /* Яркий, но не "кислотный" красный */
    --neon-blue: #63b3ed;
    --neon-green: #68d391;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 229, 62, 62; /* Это RGB-версия твоего красного #e53e3e */
    --text-btn-sverka-settings: #2d3748;
    --success-color: #2f855a; /* Более мягкий, приглушенный зеленый для темного фона */
    --success-color-hover: #38a169; /* Его более светлый вариант для наведения */

    /* --- ЦВЕТА ПЛАШЕК ОПЛАТЫ --- */
    --card-bg: linear-gradient(135deg, #dd6b20, #c05621);
    --cash-bg: linear-gradient(135deg, #38a169, #2f855a);
    --fop-bg: linear-gradient(135deg, #805ad5, #6b46c1);
    --fop-text: #ede7f6; /* Можно оставить белым, но этот чуть мягче */

    /* --- ОСТАЛЬНЫЕ ПЕРЕМЕННЫЕ --- */
    --danger-color-glow: 245, 101, 101; /* Неоновый красный для свечения (R, G, B) */
    --date-btn-text: #a0aec0;          /* Цвет текста НЕАКТИВНОЙ кнопки */
    --date-btn-bg-hover: #4a5568;      /* Фон НЕАКТИВНОЙ кнопки при наведении */
    --select-option-hover-bg: #374151; /* Ваш цвет для наведения в темной теме */
    --select-option-hover-text: #e2e8f0;
}

/* 3. Тема "Сепия" */
body[data-theme="sepia"] {
    color-scheme: light;
    /* --- ОСНОВНЫЕ ЦВЕТА ФОНА И ТЕКСТА --- */
    --bg-color-main: #fcf8f0;         /* Очень светлый, теплый фон, как чистый пергамент */
    --bg-color-card: #f4ecd8;         /* Цвет карточек и таблиц, как старая бумага (чуть темнее фона) */
    --bg-color-header: #e9e0ce;       /* Фон верхней панели, еще немного темнее для иерархии */
    --bg-color-modal: #f4ecd8;        /* Фон для модальных окон */
    --text-color-primary: #5d4037;    /* Глубокий, насыщенный коричневый для текста (как чернила) */
    --text-color-secondary: #f5f5f5;  /* Слегка кремовый белый для текста на плашках */
    --border-color: #d7ccc8;          /* Приглушенный серо-коричневый для рамок */
    --panel-button-color: #5d4037; /* Цвет текста кнопок боковых панелей */
    --btn-color-text-active: #ffffff;
    --btn-color-text-hover: var(--panel-button-color);
    --text-btn-sverka-settings: #ffffff;
    /* --- ЦВЕТА ТАБЛИЦЫ --- */
    --bstable-bg: #e9e0ce;            /* Фон строки с днем недели (как у шапки) */
    --bstable-hover-bg: #d7ccc8;      /* Наведение на строку дня недели */
    --bstable-row-hover-bg: #ebe0cf; /* Чуть светлее, чем фон карточек */
    --panel-btn-hover-bg: #e9e0ce; /* Цвет шапки и строки дня недели идеально подойдет */
    --text-color-primary-on-hover: #5d4037;   /* Текст при наведении: глубокий "чернильный" */
    /* --- ЦВЕТА АКЦЕНТОВ И СИГНАЛОВ --- */
    --primary-color: #a94442;         /* Приглушенный, "ржавый" красный, идеально для темы */
    --primary-color-rgb: 169, 68, 66; /* RGB для #a94442 */
    --primary-color-hover: #8e3a37;   /* Более темный ржавый */
    --signal-yellow: #b45309;         /* Глубокий, почти медный желто-оранжевый */
    --signal-red: #a94442;            /* Такой же, как основной акцентный */
    --neon-blue: #375a7f;             /* Пыльный, приглушенный синий */
    --neon-green: #556b2f;            /* Оливково-зеленый, цвет старых чернил */
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 169, 68, 66; /* Это RGB-версия твоего ржавого #a94442 */
    --secondary-color-hover: #17a2b8;
    --secondary-color: #138496;
    /* --- ЦВЕТА ПЛАШЕК ОПЛАТЫ (в стиле "кожа, медь, дерево") --- */
    --card-bg: #8d6e63;               /* Коричневый, как потертая кожа */
    --cash-bg: #556b2f;               /* Оливковый, как старые банкноты */
    --fop-bg: #6d4c41;                /* Глубокий древесный */
    --fop-text: #efebe9;              /* Текст на плашках */
    --card-text: #efebe9;
    --cash-text: #efebe9;
    --success-color: #556b2f; /* Оливково-зеленый, "винтажный" */
    --success-color-hover: #455a25; /* Его более темный вариант для наведения */

    /* --- ОСТАЛЬНЫЕ ПЕРЕМЕННЫЕ --- */
    --danger-color-glow: 199, 81, 79; /* Теплый красный для свечения (R, G, B) - ваш вариант хорош */
    --date-btn-text: #8d6e63;          /* Цвет текста НЕАКТИВНОЙ кнопки (коричневатый) */
    --date-btn-bg-hover: #e9e0ce;      /* Фон НЕАКТИВНОЙ кнопки при наведении */
    --select-option-hover-bg: #d7ccc8; /* Ваш цвет наведения для сепии */
    --select-option-hover-text: #5d4037;
}

body {
    background-color: var(--bg-color-main);
    color: var(--text-color-primary);
    transition: background-color 0.2s, color 0.2s;
}

.header-main {
    width: 100%;
}

.header-logo {
    height: 50px;
    margin-right: 15px; /* Замена старого .mr-3 */
}

.header-title {
    margin: 0 20px 0 0;
    flex-grow: 1;
    text-align: right;
}
/* Стиль выпадающего меню пользователя */
.dropdown {
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 2000;
}
.dropdown-menu, .dropdown-item {
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
}

.dropdown-item:hover {
    background-color: var(--border-color);
    color: var(--text-color-primary);
}

.dropdown .user-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Добавим для лучшего центрирования */
    padding: 4px; /* Немного изменим padding для предсказуемости */
    background-color: var(--bg-color-card); /* 1. Светлый фон, как у панелей */
    border-radius: 8px; /* 2. Скругленные углы */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 3. Тень, как у панелей */
    border: 1px solid var(--border-color); /* 4. Очень легкая рамка */
}

/* Основной стиль для кнопки пользователя */
.user-btn {
    width: 65px;
    height: 80px;
    /* Убираем padding, он не нужен для центрирования */
    padding: 0;
    /* Превращаем кнопку в flex-контейнер */
    display: flex;
    /* Центрируем содержимое по горизонтали */
    justify-content: center;
    /* Центрируем содержимое по вертикали */
    align-items: center;
}

/* 2. Стиль для аватара. Центрируем с помощью margin: 0 auto. */
.user-btn .user-avatar-icon {
    display: block; /* Делаем картинку блочным элементом */
    width: 40px;
    height: 40px;
    margin: 0 auto 5px auto; /* Вот магия: 0 сверху, auto справа, 5px снизу, auto слева. 'auto' по бокам центрирует блочный элемент. */
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: var(--bg-color-card);
}

/* 3. Стиль для текста имени. Центрируем с помощью text-align. */
.user-btn .username-text {
    display: block; /* Убеждаемся, что это блочный элемент */
    width: 100%; /* Растягиваем на всю ширину кнопки */
    text-align: center; /* Центрируем текст внутри этого блока */
    font-size: 0.9em;
    line-height: 1.2;
    color: var(--text-color-primary); /* <-- 5. Темный цвет для текста */
}

.card {
    background-color: var(--bg-color-card);
    border-color: var(--border-color);
    color: var(--text-color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.card, .card-body {
    overflow: visible !important;
}

.card-body {
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
    border-radius: 8px 8px 8px 8px;
}

/* Стиль для фиксации заголовка таблицы */
.table {
    margin-bottom: 0;
    --bs-table-border-color: var(--border-color);
}

.table-responsive {
    background-color: var(--bg-color-card); /* Используем переменную для фона карточек */
    /* overflow-x: auto;  <-- УБИРАЕМ ИЛИ КОММЕНТИРУЕМ ЭТУ СТРОКУ */
    border-radius: 8px 8px 0 0;
    overflow: visible !important;
    overflow-x: visible !important;
}

.table-responsive,
.card-body {
    position: relative;

}

/*
 * Стили для заголовков таблицы (перенесенные из JS)
 */
.table > thead > tr > th {
    background-color: var(--primary-color); /* Используем переменную для красного цвета */
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.2); /* Это ваш существующий стиль, он лучше */
    border-bottom: 1px solid var(--primary-color);
    padding: 10px 8px;
    text-shadow: none;
    transition: background 0.3s; /* Плавный переход для :hover */
    vertical-align: middle; /* Хорошая практика для выравнивания */
}

.table thead {
    position: sticky;
    top: 0;
    z-index: 10; /* Z-index поменьше, чем у фильтров */

}

/* Стилизуем ячейки шапки, чтобы они имели фон */
.table thead th {
    background-color: var(--bg-color-card); /* Фон ячеек шапки такой же, как у карточки */
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.2);
    /* Удаляем position: sticky отсюда, он уже есть у thead */
}

/* плавающий заголовок таблицы */
.table th {
    vertical-align: middle !important;
    color: var(--text-color-secondary) !important;
}

.table td {
    vertical-align: middle !important;
    color: var(--text-color-primary) !important;
}

.table tbody tr {
    background-color: var(--bg-color-card);
    --bs-table-accent-bg: var(--bg-color-card) !important;
}

.table tbody tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--bg-color-card) !important;
    background-color: var(--bg-color-card) !important;

}

.table > tbody > tr > td.header-row {
    /* Мы напрямую переопределяем переменные Bootstrap для фона */
    --bs-table-bg: var(--bstable-bg) !important;
    --bs-table-accent-bg: var(--bstable-bg) !important; /* Сбрасываем "зебру" */

    /* И для надежности ставим сам цвет фона */
    background-color: var(--bstable-bg) !important;

    /* Стили для текста */
    font-weight: bold;
    color: var(--text-color-primary) !important;
}

/* Стиль для наведения мыши */
.table > tbody > tr > td.header-row:hover {
    background-color: var(--bstable-hover-bg) !important;
}

/*
 * Стиль для подсветки ОБЫЧНЫХ строк таблицы при наведении
 */
.table > tbody > tr:not(:has(td.header-row)):hover > td {
    /*background-color: var(--bstable-row-hover-bg) !important;*/
    /* Сбросим все Bootstrap переменные */
    /*--bs-table-bg: var(--bstable-row-hover-bg) !important;*/
    /*--bs-table-accent-bg: var(--bstable-row-hover-bg) !important;*/
    --bs-table-hover-bg: var(--bstable-row-hover-bg) !important;
    /*--bs-table-active-bg: var(--bstable-row-hover-bg) !important;*/

    background-color: var(--bstable-row-hover-bg);
    color: var(--text-color-primary-on-hover) !important;
}

/* Стили для фильтров в заголовке таблицы */
.filter-th {
    cursor: pointer;
    position: relative; /* Важно для позиционирования */
}

.table > thead > tr > th.filter-th:hover {
    background-color: var(--primary-color-hover); /* Используем переменную для более темного красного */
    cursor: pointer;
}

.table-filter-control {
    position: absolute; /* Вырываем из потока */
    top: 100%; /* Позиционируем под заголовком */
    left: 0;
    z-index: 20; /* Выше, чем у липкой шапки */
    min-width: 200px;
    margin-top: 1px;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#filter-reset-cell {
    text-align: center;
    vertical-align: middle;
}

/* Новый стиль для активного фильтра */
.filter-th.filter-active {
    color: yellow !important;
}

.descr {
    min-width: 350px;
    max-width: 400px;
    word-wrap: break-word;      /* Перенос длинных слов */
    word-break: break-word;     /* Разрыв слов при необходимости */
    white-space: normal;        /* Разрешает перенос строк */
    overflow-wrap: break-word;  /* Современный стандарт переноса */
}
.description-cell {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 400px;
    min-width: 350px;
}

.doc {
    width: 200px;
}

.payment {
    width: 150px;
}

.container-fluid {
    width: 92%;
}

/* 1. Базовый класс для всех плашек оплаты */
/* 1. Базовый класс для всех плашек оплаты */
.payment-badge {
    padding: 5px 12px; /* Боковые отступы можно оставить или увеличить */
    min-height: 30px;  /* Задаем минимальную высоту. Попробуйте 38px, 40px, 44px */
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: flex;       /* Включаем Flexbox */
    align-items: center; /* Выравниваем по вертикали */
}

/* 2. Модификаторы цвета остаются без изменений */
.payment-badge--card {
    background: var(--card-bg);
    color: var(--card-text);
}
.payment-badge--cash {
    background: var(--cash-bg);
    color: var(--cash-text);
}
.payment-badge--fop {
    background: var(--fop-bg);
    color: var(--fop-text);
}

/* 3. Модификатор для отображения (block или flex) */
.payment-badge--block {
    display: flex;
    justify-content: space-between; /* <-- Вот ключ к выравниванию! */
    width: 100%;
    margin-bottom: 8px; /* Немного увеличим отступ */
    margin-top: 4px;
}

.payment-amount {
    width: 100%; /* Заставляем сумму занять всю ширину, выталкивая иконку */
}

/* 5. Стили для самой иконки */
.payment-badge i {
    opacity: 0.9;
    font-size: 1.1em;
    /* margin-left больше не нужен, отступ создается автоматически */
}

/* Выделение отрицательных чисел */
.table .negative-payment {
    /* 1. Убираем filter с основного элемента. Теперь рамки и текст снова яркие! */
    position: relative; /* Обязательно для позиционирования ::before */
    z-index: 1;      /* Основной контент будет поверх фона */
    overflow: hidden;  /* Скрываем все, что может вылезти */

    /* Ваши стили рамок и отступов остаются */
    animation: none;
    margin-bottom: 5px;
    margin-top: 5px;
    border: 2px solid #FFD700;
    outline: 2px solid rgba(var(--danger-color-glow), 1);
    outline-offset: 2px;
}

/* 2. Создаем псевдоэлемент, который будет нашим "затемнителем" */
.table .negative-payment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 3. Делаем его полупрозрачным черным слоем.
       Он ляжет поверх оригинального фона плашки и затемнит его.
       Поиграйте со значением 0.3 (30% затемнения) */
    background-color: rgba(0, 0, 0, 0.3);

    /* 4. Помещаем этот слой на задний план, ПОД текстом */
    z-index: -1;
}

/* Добавляем стиль для итоговой строки */
.total-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px; /* Увеличим отступ */
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    border-top: 1px solid var(--border-color); /* Разделитель */
}

.total-value {
    color: var(--text-color-primary); /* Красный цвет для суммы */
    text-align: right; /* Выравнивание текста вправо */
}

/* Кнопка + */
/* Кнопки "Сохранить", "Обновить" и плавающая кнопка "+" */
.btn-primary,
.modal .btn-primary {
    /* Добавляем селектор для кнопок внутри ЛЮБОГО модального окна */
    --bs-btn-bg: var(--primary-color) !important;
    --bs-btn-hover-bg: var(
            --primary-color-hover
    ) !important; /* Добавим цвет при наведении для красоты */
    --bs-btn-active-bg: var(--primary-color-hover) !important; /* И при нажатии */
    --bs-btn-border-color: var(--primary-color) !important;
    outline: none;
    border: none;
}

.floating-btn {
    /* position: fixed; <-- УДАЛЕНО */
    /* bottom: 30px;   <-- УДАЛЕНО */
    /* right: 15px;    <-- УДАЛЕНО */
    /* z-index: 1000;  <-- УДАЛЕНО */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--btn-color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    outline: none;
    border: none;
}

.floating-btn:hover {
    background-color: var(--primary-color);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    outline: none;
    border: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.floating-btn:hover {
    animation: pulse 1s infinite;
}

.name-highlight {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: #fff; /* Цвет текста будет перезаписан инлайновым стилем, но это хороший дефолт */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.history-link {
    position: fixed;
    bottom: 20px;
    left: 10px;
    width: 35px;
    height: 35px;
    background-color: var(--date-btn-text); /* Цвет вторичной кнопки bootstrap */
    color: var(--btn-color-text);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    z-index: 1000;
}

.history-link:hover {
    background-color: #5a6268;
    color: var(--btn-color-text);
    transform: scale(1.1);
}

/* Стили для всплывающего окна с детализацией (как для дубликатов) */
.details-tooltip,
.document-tooltip {
    position: absolute;
    z-index: 1080; /* Выше чем другие элементы */
    background-color: var(--bg-color-card);
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    font-size: 0.9em;
    overflow: hidden; /* Обрезаем всё, что выходит за скругленные углы */
}

.details-tooltip-header,
.document-tooltip-header {

    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
    background-color: var(--bstable-bg);
    border-radius: 6px 6px 0 0;
}

.details-tooltip-body,
.document-tooltip-list {
    padding: 8px 15px;
    color: var(--text-color-primary);
    background-color: var(--bg-color-card);
}

.details-tooltip-body table {
    width: 100%;
    border-collapse: collapse;
}

.details-tooltip-body td {
    padding: 4px 0;
}

/* Стиль для элемента, при наведении на который появляется tooltip */
.has-details-tooltip {
    cursor: pointer;
    border-bottom: 1px dashed #007bff;
    display: inline-block;
}
.details-tooltip-body table{
    background-color: var(--bg-color-card); /* Светло-серый фон для чётных строк */
}
.details-tooltip-body table tr:nth-child(even) {
    background-color: var(--bstable-row-hover-bg); /* Светло-серый фон для чётных строк */
}

.details-tooltip-body td {
    padding: 6px 8px; /* Добавим немного "воздуха" в ячейки */
}

.details-tooltip-body th {
    font-weight: 500;
    color: var(--text-color-primary);
    background-color: var(--bstable-bg);
    text-align: right;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
}

.details-tooltip-body th:first-child {
    text-align: left;
}

/* Выравниваем числовые ячейки по правому краю */
.details-tooltip-body td.text-end {
    font-family: monospace; /* Моноширинный шрифт для красивого выравнивания чисел */
}

.document-tooltip-item {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}
.document-tooltip-item:last-child {
    border-bottom: none;
}
.document-tooltip-item p {
    margin: 0 0 4px 0;
    font-size: 14px;
}

.document-tooltip-close {
    position: absolute;
    top: 18px;
    transform: translateY(-50%);
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: var(--panel-button-color); /* Используем цвет иконок с панелей */
    opacity: 0.7;
    transition: all 0.2s ease;
}
.document-tooltip-close:hover {
    color: var(--text-color-primary); /* При наведении - основной цвет текста */
    opacity: 1;
}

/* --- 6. Специальные классы --- */

/* Стиль для узкого тултипа */
.details-tooltip.tooltip-narrow {
    min-width: 150px;
    max-width: 180px;
}

/* Стиль для самого поля ввода */
.salary-value-container,
.manager-expense-input {
    display: inline-block;
    box-sizing: border-box;
    font-weight: bold;
    text-align: right;
    color: var(--text-color-primary);
}

.manager-expense-input {
    border: none;
    background-color: transparent;
    box-shadow: none !important;
    max-width: 150px;
    border-bottom: 1px dashed transparent;
}

.manager-expense-input:hover {
    border-bottom-color: var(--manager-expense-border);
    /*border-bottom: 1px dashed var(--manager-expense-border);*/
}

.manager-expense-input:focus {
    border-bottom-color: var(--manager-expense-border);
    border-bottom-style: solid; /* Делаем линию сплошной */
    outline: none;
}

/* Убираем стрелочки */
.manager-expense-input::-webkit-outer-spin-button,
.manager-expense-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.manager-expense-input[type="number"] {
    -moz-appearance: textfield;
}

.salary-value-cell {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    vertical-align: middle;
}
.avatar-selection-container .avatar-image {
    transform: scale(1); /* Изначально нормального размера */
    opacity: 0.6; /* Делаем их полупрозрачными */
    transition: all 0.2s ease-in-out; /* Плавная анимация для всего */
    border: none; /* Убираем рамки вообще, чтобы они не мешали */
}

/* 2. Стиль при НАВЕДЕНИИ мыши на любую аватарку */
.avatar-selection-container .avatar-image:hover {
    opacity: 1; /* Становится полностью видимой */
    transform: scale(1.15); /* Немного увеличивается */
}

/* 3. Стиль для ВЫБРАННОЙ аватарки (когда у нее есть класс .selected) */
.avatar-selection-container .avatar-image.selected {
    transform: scale(1.2); /* Делаем ее еще чуть больше, чем при наведении */
    opacity: 1; /* И полностью видимой */
    /* Никаких рамок, чтобы исключить конфликт */
}

#salary-content {
    max-height: 550px;
    overflow-y: auto;
    padding-right: 5px;
}

.salary-item {
    padding: 10px;
    border-bottom: 1px solid var(--btn-secondary-border-color);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
}

.salary-item:last-child {
    border-bottom: none;
}

.narabotka {
    color: var(--neon-green);
    font-weight: bold;
    text-align: right;
    display: block; /* Занимает всю ширину ячейки */
}

.zarplata,
.zarplataAll {
    color: var(--text-color-primary);
    font-size: 17px;
    text-align: right;
    display: block; /* Занимает всю ширину ячейки */
}

.narabotkaAll {
    color: var(--neon-green);
    font-size: 17px;
}

.narabotkafreebiezp {
    color: var(--narabotka-text-color);
    font-size: 17px;
    text-align: right;
    display: block; /* Занимает всю ширину ячейки */
}

.narabotkafreebie {
    color: var(--narabotka-text-color);
}

#kassa-content {
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px;
}
#kassa-content .payment-badge {
    padding: 10px 12px;
}

/* Можно также немного увеличить шрифт для наглядности */
#kassa-content .payment-badge,
#kassa-content .payment-badge strong {
    font-size: 16px; /* Поиграйте со значением, например, 15px или 17px */
}

.kassa-item {
    padding: 10px;
    border-bottom: 1px solid var(--btn-secondary-border-color);
    font-size: 16px;
    display: flex;
    flex-direction: column;
}

.kassa-item span {
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--primary-color);
}

.kassa-item:last-child {
    border-bottom: none;
}

.kassa-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.kassa-table .kassa-value-cell {
    text-align: right;
}

.kassa-table td {
    padding: 8px;
    border-bottom: 1px solid var(--btn-secondary-border-color);
    text-align: left;
}

.kassa-table td:last-child {
    text-align: right;
}

.total-cell {
    font-weight: bold;
    color: var(--primary-color);
    background-color: var(--bstable-row-hover-bg);
}

/* Общий класс для всех выезжающих панелей */
.slide-panel {
    position: fixed;
    top: 50%;
    color: var(--text-color-primary);
    background-color: var(--bg-color-card);
    border-color: var(--border-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 15px;
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
    border-radius: 10px;
    transform: translateY(-50%);
    z-index: 1000;
}

/*
.card-body {
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
    border-radius: 8px 8px 8px 8px;
}


.table {
    margin-bottom: 0;
    --bs-table-border-color: var(--border-color);
}

.table-responsive {
    background-color: var(--bg-color-card);
    overflow-x: auto;
    border-radius: 8px 8px 0 0;
}*/

.slide-panel.right {
    right: 0;
    transform: translate(105%, -50%); /* 105% чтобы тень тоже скрылась */
}

.slide-panel.left {
    left: 0;
    transform: translate(-105%, -50%);
}

.slide-panel.visible {
    transform: translate(0, -50%); /* Показываем панель */
    /* Корректируем позицию, чтобы она была рядом с кнопками */
}

.slide-panel.visible.right {
    right: 90px;
}

.slide-panel.visible.left {
    left: 90px;
}
#delivery-panel.visible {
    /* Надежный метод центрирования */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    /* Размеры панели */
    width: 65%;
    max-width: 900px;
    height: fit-content;
    max-height: 80vh;
    overflow: auto;

    /* Анимация появления */
    transform: scale(1);
}

/* Общий стиль для заголовков панелей */
.slide-panel h5 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color-primary);
    border-bottom: 2px solid var(--primary-color); /* Используем переменную */
    text-align: center;
}

/* Общий стиль для блока с датами */
.slide-panel .panel-dates {
    font-size: 14px;
    font-weight: bold;
    background-color: var(--bstable-bg) !important;
    color: var(--text-color-primary);
    text-align: center;
    background: var(--bs-card-bg);
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Общий класс для таблиц ввода данных в панелях */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table tr:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.data-table th,
.data-table td {

    padding: 8px;
    text-align: left;
}

/* Общий стиль для всех ячеек заголовка */
.data-table th {
    /* И для надежности ставим сам цвет фона */
    background-color: var(--bstable-bg) !important;

    /* Стили для текста */
    font-weight: bold;
    color: var(--text-color-primary) !important;
}

/* Скругляем ВЕРХНИЙ-ЛЕВЫЙ угол у ПЕРВОЙ ячейки заголовка */
.data-table thead tr th:first-child {
    border-top-left-radius: 8px;
}

/* Скругляем ВЕРХНИЙ-ПРАВЫЙ угол у ПОСЛЕДНЕЙ ячейки заголовка */
.data-table thead tr th:last-child {
    border-top-right-radius: 8px;
}

.data-table input[type="number"],
.data-table input[type="date"],
.data-table input[type="text"],
.data-table select {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.btn-danger{
    background-color: var(--primary-color);
    color: var(--btn-color-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.data-table .addbtn {
    padding: 8px 14px;
    background-color: var(--primary-color);
    color: var(--btn-color-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.data-table .addbtn:hover, .btn-danger:hover {
    background-color: var(--primary-color-hover); /* Используем переменную */
}

.data-table .paid {
    /*background-color: #f0f0f0;*/
}
/*
 * Стиль подсветки для таблицы СВЕРКИ (которая с классом .data-table)
*/
.data-table > tbody > tr:hover > td {
    background-color: var(--bstable-row-hover-bg) !important;
    color: var(--text-color-primary-on-hover) !important;
}

#sverka-content table input[type="number"],
#sverka-content table input[type="date"],
#sverka-content table input[type="text"],
#sverka-content table select {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

#sverka-content .addbtn, .reloadbutton {
    padding: 8px 14px;
    background-color: var(--primary-color);
    color: var(--btn-color-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#sverka-content .addbtn:hover, .reloadbutton:hover {
    background-color: var(--primary-color-hover);
}

#kassa-tab,
#salary-tab,
#delivery-tab,
#sverka-tab,
#salary-manager-tab {
    display: none;
}

/* Стили для содержимого левых панелей */
#delivery-content,
#salary-manager-content {
    height: auto;
    overflow-y: auto;
    padding-top: 10px;
    padding-bottom: 15px;

}

/* Стили для таблицы сверки */
#sverka-content {
    max-height: 800px;
    height: auto;
    overflow-y: auto;
    padding-right: 5px;
}

#arrival-date {
    width: 120px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
    pointer-events: none; /* Оверлей игнорирует события мыши */
}

.overlay.active {
    display: block;
    pointer-events: auto; /* Когда он активен, он снова "ловит" клики */
}

/* Стили для модального окна */
.price-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2010;
}

.price-modal-content {
    position: relative;
    background-color: var(--bg-color-card);
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: fit-content;
    max-height: 600px;
    overflow: auto; /* Добавляем прокрутку */
}
.price-modal-content h3 {
    margin-right: 30px; /* Добавляем место справа, чтобы текст гарантированно не попал под крестик */
}

/* Стили для полей ввода цен */
.price-inputs-container {
    max-height: 300px;
    overflow-y: auto;
    margin: 15px 0;
}

/* --- Стили для полей ввода цен и комментариев --- */

/* Контейнер для одной строки (цена + комментарий) */
.price-input-row {
    display: flex;         /* Включаем Flexbox для выравнивания */
    align-items: center;   /* Выравниваем элементы по центру по вертикали */
    gap: 10px;             /* Промежуток между полями и кнопкой */
    margin-bottom: 8px;    /* Небольшой отступ снизу для каждой новой строки */
}

/* Стиль для поля ввода ЦЕНЫ */
.price-input-row .price-input {
    flex-grow: 0;          /* Не растягиваться */
    flex-shrink: 0;        /* Не сжиматься */
    flex-basis: 120px;     /* Задать базовую ширину 120px. Можете поменять на 100px или 140px, как вам удобнее. */
}

/* Стиль для поля ввода КОММЕНТАРИЯ */
.price-input-row .note-input {
    flex-grow: 1;          /* Растягиваться, чтобы занять ВСЁ оставшееся свободное место */
}

.price-input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: right;
}
/*
 * Стили для полей ввода в режиме редактирования цен
 */

/* Применяем стили только к строке с классом .is-editing */
#price-edit-table tr.is-editing td {
    /* Небольшой трюк, чтобы инпуты не вылезали за пределы ячейки */
    vertical-align: middle;
}

/* Задаем фиксированную ширину для каждого поля */
#price-edit-table tr.is-editing input[name="price"] {
    width: 100px; /* Ширина поля "Цена" */
}

#price-edit-table tr.is-editing input[name="notes"] {
    /* Оставим это поле гибким, но можем задать минимальную ширину */
    min-width: 120px;
}

#price-edit-table tr.is-editing input[name="arrival_date"] {
    width: 155px; /* Ширина поля "Дата", чуть больше из-за иконки календаря */
}

#price-edit-table tr.is-editing select[name="standard_type"] {
    width: 130px; /* Ширина выпадающего списка "Тип" */
}

/*
 * Стили для ячейки с кнопками (Сохранить, Отмена, Удалить),
 * чтобы они красиво стояли в ряд.
 */
#price-edit-table tr.is-editing .actions-cell {
    display: flex;
    justify-content: flex-start; /* Выравниваем по левому краю ячейки */
    gap: 4px; /* Небольшой промежуток между кнопками */
}

.add-price-btn,
.remove-price-btn {
    width: 40px;
    height: 30px;
    margin-left: 10px;
    background-color: var(--primary-color);
    color: var(--btn-color-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#save-prices-btn {
    background-color: var(--primary-color);
    color: var(--btn-color-text);
}

#close-modal-btn {
    background-color: var(--panel-button-color);
    color: var(--btn-color-text);
}

.provider-name {
    cursor: pointer;
    font-weight: bold;
}

/* Общие стили для обеих ячеек с суммами */
.data-table td.standard-sum,
.data-table td.non-standard-sum {
    text-align: right; /* <-- Теперь это сработает */
    font-weight: bold;
    font-size: 18px;
}

/* Цвет для стандартной суммы */
.data-table td.standard-sum {
    color: var(--neon-green);
}

/* Цвет для нестандартной суммы */
.data-table td.non-standard-sum {
    color: var(--neon-blue);
}

#close-modal-btn-top {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    padding: 10px;
    width: 40px; /* Устанавливаем ширину кнопки */
    height: 40px; /* Устанавливаем высоту кнопки */
    font-size: 24px; /* Увеличиваем размер текста/иконки */
    cursor: pointer;
    z-index: 1010;
    display: flex; /* Для центрирования иконки */
    align-items: center; /* Центрирование по вертикали */
    justify-content: center; /* Центрирование по горизонтали */
}

#supplier-table input[type="text"],
#supplier-table input[type="date"],
#supplier-table select {
    /* Цвета из вашей темы */
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
    border: 1px solid var(--border-color);

    /* Внешний вид, как у Bootstrap */
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box; /* Важно, чтобы padding не ломал ширину */
}

/* 2. Стили при фокусе */
#supplier-table input[type="text"]:focus,
#supplier-table input[type="date"]:focus,
#supplier-table select:focus {
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* 3. Стиль для placeholder */
#supplier-table input::placeholder {
    color: var(--text-color-primary);
    opacity: 0.6;
}

/* Стилизуем нашу кастомную таблицу */
#salary-manager-content .salary-table {
    border-collapse: collapse; /* Важно для рамок */
    width: 100%;
    margin-bottom: 0;
}

#salary-manager-content .salary-table td {
    border: 1px solid var(--border-color); /* Рисуем все рамки для всех ячеек */
    padding: 0.5rem;
    vertical-align: middle;
}

/*
 * ===================================================================
 *  СТИЛИЗАЦИЯ КНОПКИ ГРАФИКА (.chart-btn)
 * ===================================================================
*/

.chart-btn.btn-outline-secondary {
    /* Цвет иконки для НЕАКТИВНОЙ кнопки */
    --bs-btn-color: var(--neon-blue) !important;
    /* Цвет рамки */
    --bs-btn-border-color: var(--neon-blue);

    /* Убираем стандартную тень фокуса */
    --bs-btn-focus-shadow-rgb: none;

    /* --- Стили для состояния :hover --- */

    /* Цвет иконки при НАВЕДЕНИИ */
    --bs-btn-hover-color: var(--primary-color);
    /* Цвет фона при НАВЕДЕНИИ */
    --bs-btn-hover-bg: var(--bg-color-card);
    /* Цвет рамки при НАВЕДЕНИИ */
    --bs-btn-hover-border-color: var(--border-color);
}

/* --- Стили для новой кнопки графика --- */
.chart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem; /* Делаем ее более квадратной */
    font-size: 1.2em; /* Увеличиваем иконку */
}

/* --- Стили для нового модального окна --- */

/* 1. Фон-затемнение (оверлей) */
#chart-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1090; /* ВЫШЕ ЧЕМ У ТУЛТИПА (1080) */
    display: none;
}

/* 1. Основное содержимое окна */
#chart-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Используем переменные для фона, текста и рамок */
    background-color: var(--bstable-bg);
    color: var(--text-color-primary);
    border: 1px solid var(--border-color);

    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    z-index: 1091;
    min-width: 500px;
    display: none;
}

/* 2. Стилизуем текст заголовков и осей в графике */
/* Chart.js версии 3+ позволяет это делать через CSS */
.chartjs-render-monitor {
    /* Цвет текста для заголовков, легенды, осей */
    color: var(--text-color-primary) !important;
}

/* 3. Кнопка закрытия 'X' (без изменений) */
#chart-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    border: none;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
}

#chart-modal-close-btn:hover {
    color: #000;
}

/* СТИЛИ ДЛЯ НОВОГО ПУСТОГО ОКНА */
#details-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Чуть темнее фон */
    z-index: 1100; /* Выше первого окна */
}

#details-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    min-width: 600px; /* Сделаем его чуть шире */
    min-height: 400px;
}

#details-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    border: none;
    background: transparent;
    font-size: 2rem;
    cursor: pointer;
}

/* --- Стили для модального окна управления поставщиками --- */
.provider-manager-modal {
    display: block; /* Отображаем по умолчанию */
    position: fixed; /* Поверх всего */
    z-index: 1050; /* Выше других элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Прокрутка, если контент не помещается */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
}

.provider-manager-modal-content {
    background-color: var(--bstable-bg);
    margin: 10% auto; /* 10% от верха и по центру */
    padding: 20px;
    border: 1px solid var(--border-color);
    width: 80%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.provider-manager-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.provider-manager-close:hover,
.provider-manager-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#provider-list {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

#provider-list li {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#provider-list li:last-child {
    border-bottom: none;
}

.provider-name-span {
    flex-grow: 1;
}

#add-provider-form {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

#add-provider-form input {
    flex-grow: 1;
}

/*
 * Стили для контейнера с кнопками "Добавить" и "Настройки" в Сверке
 */
.sverka-actions-container {
    display: flex;
    justify-content: space-between; /* Главный трюк: раскидывает элементы по краям */
    align-items: center; /* Выравнивает кнопки по вертикали */
}

/*
 * Стили для новой квадратной кнопки настроек
 */
.btn-sverka-settings {
    /* 1. Размер и форма */
    width: 38px; /* Ширина, подбираем под высоту кнопки "Добавить" */
    height: 38px; /* Высота, чтобы сделать ее квадратной */
    padding: 0; /* Убираем внутренние отступы, чтобы иконка была по центру */

    /* 2. Цвет */
    background-color: var(--neon-blue) !important;
    color: var(--btn-color-text-active) !important;
    border: 1px solid var(--border-color);

    /* 3. Центрирование иконки внутри кнопки */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Можно настроить размер иконки */
}

.btn-sverka-settings:hover {
    background-color: var(--neon-green) !important; /* Чуть темнее при наведении */
    color: var(--btn-color-text-active) !important;
    border-color: var(--border-color);
}

.panel-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: none;
    background-color: transparent;
    color: var(--panel-button-color);
    transition: color 0.3s; /* ИСПРАВЛЕНО */
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}

.panel-button:hover {
    background-color: var(--bstable-row-hover-bg) !important;
    color: var(--btn-color-text-hover) !important;
}

.panel-button.active {
    background-color: var(--primary-color) !important;
    color: var(--btn-color-text-active) !important;
}

.panel-button i {
    font-size: 24px;
    margin-bottom: 5px;
}

.panel-button span {
    font-size: 12px;
    text-align: center;
}

/* Базовый класс для контейнеров кнопок на панелях */
.side-panel-container {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-color-card); /* Используем переменные */
    z-index: 2000;
    padding: 15px 0;
}

/* Модификатор для правой панели */
.side-panel-container--right {
    right: 0;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color); /* 4. Очень легкая рамка */
    border-right: none;
}

/* Модификатор для левой панели */
.side-panel-container--left {
    left: 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color); /* 4. Очень легкая рамка */
    border-left: none;
}

#salary-manager-content .table-container {
    border-radius: 0.375rem;
    overflow: hidden; /* Обрезаем углы таблицы */
}
/*
 * Стиль для ячеек-заголовков в таблице расчета ЗП менеджера
 */
.table-wrapper .table td.salary-table-header {
    /* Используем цвет вторичного текста из вашей темы.
       #6c757d - это запасной цвет, если переменная не найдена. */
    color: var(--neon-blue) !important;

}
.table-wrapper .table td.salary-table-header-negative {
    /* Используем цвет вторичного текста из вашей темы.
       #6c757d - это запасной цвет, если переменная не найдена. */
    color: var(--primary-color) !important;

}

/* 1. Стили для всей таблицы */
.workday-info-table {
    width: 100%;
    border-collapse: collapse; /* Оставляем, это правильно */

    /* ОТКЛЮЧАЕМ HOVER-ЭФФЕКТ BOOTSTRAP */
    --bs-table-hover-bg: transparent; /* Фон при наведении будет прозрачным */
}

/* 2. Стили для ВСЕХ ячеек */
.workday-info-table td {
    padding: 4px 8px;
    vertical-align: middle;

    /* УБИРАЕМ ВСЕ РАМКИ ПО УМОЛЧАНИЮ */
    border-bottom: 1px solid var(--border-color);
}

/* 3. Рисуем НАШУ СОБСТВЕННУЮ рамку ТОЛЬКО для первой строки */
.workday-info-table tr:first-child td {
    /* Рисуем только нижнюю рамку нужного нам цвета */
    border-bottom: 1px solid var(--border-color);
}

.provider-actions button {
    margin-left: 8px;
    cursor: pointer;
}

.date-buttons-wrapper {
    display: inline-flex;
    border: 1px solid var(--border-color); /* 4. Очень легкая рамка */
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    vertical-align: middle;
}

/* 2. УБИРАЕМ У ВСЕХ КНОПОК ВНУТРИ ИХ СОБСТВЕННЫЕ РАМКИ И СКРУГЛЕНИЯ */
.date-buttons-wrapper .btn {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important; /* Убираем тени от bootstrap */
}

.date-buttons-wrapper .btn.btn-outline-primary {
    --bs-btn-hover-bg: var(--primary-color-hover) !important;
    --bs-btn-hover-border-color: var(--primary-color-hover) !important;
    --bs-btn-hover-color: var(--text-color-secondary) !important;

    --bs-btn-active-bg: var(--primary-color-hover) !important;
    --bs-btn-active-border-color: var(--primary-color-hover) !important;
    --bs-btn-active-color: var(--text-color-secondary) !important;
    background-color: var(--primary-color);
    color: var(--text-color-secondary);
}

/* Для активной кнопки тоже нужен hover */
.date-buttons-wrapper .btn.btn-outline-primary.active {
    --bs-btn-hover-bg: var(--primary-color-hover) !important;
    --bs-btn-hover-border-color: var(--primary-color-hover) !important;
    --bs-btn-hover-color: var(--text-color-secondary) !important;
    background-color: var(--primary-color);
    color: var(--date-btn-text);
}
.date-buttons-wrapper .btn.btn-outline-primary:hover {

    background-color: var(--primary-color-hover);
    color: var(--text-color-secondary);
}
/* 4. СТИЛЬ НЕАКТИВНОЙ КНОПКИ (.btn-outline-secondary) */
.date-buttons-wrapper .btn.btn-outline-secondary {
    background-color: var(--bg-color-card);
    color: var(--date-btn-text);
}

.date-buttons-wrapper .btn.btn-outline-secondary:hover {
    background-color: var(--date-btn-bg-hover);
    color: var(--text-color-primary);
}

/*
 * ===================================================================
 *  СТИЛИ ДЛЯ БЛОКА РЕДАКТИРОВАНИЯ ИНТЕРВАЛА В ПАНЕЛИ ЗП МЕНЕДЖЕРОВ
 * ===================================================================
*/
.date-edit-controls-sm {
    /* Фон делаем как у заголовков в таблицах */
    background-color: var(--bstable-bg);

    /* Рамка в цвет темы */
    border: 1px solid var(--border-color);
}

/* Стили для полей ввода внутри этого блока */
.date-edit-controls-sm .form-control {
    /* Фон полей делаем как у карточек, чтобы они выделялись */
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
    border-color: var(--border-color);
}
.date-edit-controls-sm .form-control:focus {
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* Стили для текста-подсказки */
.date-edit-controls-sm .text-muted {
    /* Используем приглушенный цвет текста, который меняется с темой */
    color: var(--panel-button-color) !important;
}
/* 1. Фон-оверлей, который покрывает всю страницу */
#chrome-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* z-index ВЫШЕ, чем у фона модального окна Bootstrap (1050) */
    z-index: 3000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

/* 2. Само диалоговое окно */
#chrome-confirm-box {
    background: var(--bg-color-card); /* Используем переменные темы! */
    color: var(--text-color-primary);
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    min-width: 300px;
    max-width: 450px;
    text-align: center;
    /* z-index ВЫШЕ, чем у нашего фона */
    z-index: 3001 !important;
}

#chrome-confirm-box p {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
}

/* 3. Контейнер для кнопок */
#chrome-confirm-box .buttons {
    display: flex;
    justify-content: center; /* Центрируем кнопки */
    gap: 15px; /* Расстояние между кнопками */
}

/* 4. Стили для кнопок, чтобы они соответствовали вашему дизайну */
#chrome-confirm-box .buttons .btn {
    min-width: 100px;
}

#chrome-confirm-box .buttons .btn-primary {
    --bs-btn-bg: var(--primary-color) !important;
    --bs-btn-hover-bg: var(--primary-color-hover) !important;
    --bs-btn-border-color: var(--primary-color) !important;
}
/*
 * Стилизация полей ввода для соответствия темам
*/
.form-control,
.form-select {
    background-color: var(--bg-color-card); /* Фон как у карточек */
    color: var(--text-color-primary);      /* Цвет текста основной */
    border-color: var(--border-color);     /* Цвет рамки из темы */
}

/* Стиль при фокусе (когда кликнули на поле) */
.form-control:focus,
.form-select:focus {
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
    border-color: var(--primary-color); /* Рамка становится акцентного цвета */
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25); /* Тень свечения тоже акцентного цвета */
}




/* Стиль для текста-заполнителя (placeholder) */
.form-control::placeholder {
    color: var(--text-color-primary);
    opacity: 0.6; /* Делаем его полупрозрачным */
}

/* Стиль для иконки календаря в поле даты */
/* Это немного сложный селектор для стилизации иконки,
   но он нужен для инвертирования ее цвета в темной теме. */
[data-theme="dark"] .form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
/*
 * Кастомная стилизация чекбоксов для соответствия темам
*/

/* 1. Стили для самого чекбокса (внешний вид "коробочки") */
.form-check-input {
    background-color: transparent; /* Убираем стандартный фон */
    border: 1px solid var(--border-color); /* Рамка в цвет основного текста */
}

/* 2. Стиль для ОТМЕЧЕННОГО чекбокса */
.form-check-input:checked {
    background-color: var(--primary-color); /* Фон становится акцентным */
    border-color: var(--primary-color);     /* Рамка тоже */
}

/* 3. Стиль "галочки" внутри отмеченного чекбокса */
/* Bootstrap использует SVG для галочки, и мы меняем его цвет.
   Это немного сложный код, но он необходим для смены цвета. */
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* 4. Стиль при фокусе (когда выбрано табом) */
.form-check-input:focus {
    border-color: var(--primary-color-hover);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}
/* Селектор для самой иконки (или кнопки, если она есть) */
.edit-record.btn, .edit-recordDelivery, .provider-price-btn.btn, .edit-price-btn.btn { /* Добавляем .btn для повышения специфичности */

    /* --- Основные состояния через переменные Bootstrap --- */

    /* Задаем цвет текста и иконки */
    --bs-btn-color: var(--neon-blue);

    /* Задаем цвет рамки */
    --bs-btn-border-color: var(--neon-blue);

    /* Убираем фон */
    --bs-btn-bg: transparent;

    /* --- Состояния при наведении (:hover) --- */

    /* Цвет текста и иконки при наведении */
    --bs-btn-hover-color: var(--bg-color-card);

    /* Цвет рамки при наведении */
    --bs-btn-hover-border-color: var(--neon-blue);

    /* Цвет фона при наведении */
    --bs-btn-hover-bg: var(--neon-blue);

    /* --- Состояния при нажатии (:active) --- */
    /* Делаем их такими же, как при наведении для консистентности */
    --bs-btn-active-color: var(--bg-color-card);
    --bs-btn-active-border-color: var(--neon-blue);
    --bs-btn-active-bg: var(--neon-blue);

    /* Убираем стандартную тень фокуса Bootstrap */
    --bs-btn-focus-shadow-rgb: none;
}

#edit-prices-btn{
    background-color: var(--border-color);
    color: var(--panel-button-color);
}
#supplier-table > tbody > tr:hover .form-check-input {
    /* Рамка становится цвета основного текста (светлая в темной теме) */
    border-color: var(--panel-button-color);
}

/* --- Стили для кликабельного имени поставщика --- */
#sverka-table .provider-name-clickable {
    cursor: pointer;          /* ВОТ ЭТА СТРОКА! Курсор в виде руки */
    font-weight: 500;
    transition: color 0.2s;
}

#sverka-table .provider-name-clickable:hover {
    color: var(--neon-blue);
    text-decoration: underline;
}
/* 1. Основной контейнер модального окна */
.modal-content {
    background-color: var(--bg-color-card);
    color: var(--text-color-primary);
    border: 1px solid var(--border-color);
}
/*
 * ===================================================================
 *  ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ РАДИОКНОПОК (.radio-group)
 * ===================================================================
*/

.radio-group {
    display: flex;
    gap: 15px; /* Расстояние между кнопками */
    margin: 10px 0;
}

.radio-group label {
    display: flex;
    align-items: center; /* Выравниваем кружок и текст по центру */
    cursor: pointer;
}

/* 1. Скрываем стандартный, уродливый кружок */
.radio-group input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    /* Убираем отступы по умолчанию */

    /* Создаем свою "коробочку" */
    width: 1.25em;
    height: 1.25em;
    border: 1px solid var(--text-color-primary); /* Рамка в цвет ОСНОВНОГО текста для контраста */
    border-radius: 50%;

    vertical-align: middle;
    margin: 0 0.5em 0 0;

    transition: all 0.2s ease-in-out;

    display: grid;
    place-content: center;
}

/* 2. Создаем "точку" внутри */
.radio-group input[type="radio"]::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--primary-color);
}

/* 3. Когда радиокнопка ОТМЕЧЕНА, показываем "точку" */
.radio-group input[type="radio"]:checked::before {
    transform: scale(1);
}

/* 4. Меняем цвет рамки при ОТМЕТКЕ */
.radio-group input[type="radio"]:checked {
    border-color: var(--primary-color);
}

/* 5. Стиль при фокусе (выбор табом) */
.radio-group input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 2. Шапка модального окна */
.modal-header {

    background-color: var(--bstable-bg);
    border-bottom: 1px solid var(--border-color);
}
/* Применяем жирность к тексту заголовка ВНУТРИ шапки */
.modal-header .modal-title {
    font-weight: 600; /* 600 - это "Semibold", обычно выглядит лучше, чем 'bolder' */
}

/* 3. Подвал модального окна */
.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* 1. Стили для СВЕТЛЫХ тем (light и sepia) */
.modal-header .btn-close {
    /* SVG-иконка с ТЕМНЫМ цветом крестика */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235d4037'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 0.7; /* Делаем его чуть-чуть прозрачным */
}

/* 2. Стили для ТЕМНОЙ темы */
[data-theme="dark"] .modal-header .btn-close {
    /* SVG-иконка со СВЕТЛЫМ цветом крестика */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e2e8f0'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* 3. Убираем рамку при фокусе для всех тем */
.modal-header .btn-close:focus {
    box-shadow: none;
}

/* 4. Делаем крестик полностью непрозрачным при наведении */
.modal-header .btn-close:hover {
    opacity: 1;
}

/* 5. Подписи к полям (form-label) */
.modal-body .form-label {
    font-weight: bold;
    color: var(--text-color-primary);
}

/* 6. Дополнительный текст под селектами */
.modal-body .form-text {
    color: var(--text-color-primary); /* Используем приглушенный цвет */
}
.form-text {
    color: var(--text-color-primary); /* Используем приглушенный цвет */
}
/* Стили для кнопок модального окна */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    border-top: none;
}

.modal-footer button {
    padding: 8px 16px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.form-select,
select.form-control {
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 2. Задаем СТАНДАРТНУЮ (темную) стрелку для светлых тем */
.form-select,
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* 3. Переопределяем стрелку на СВЕТЛУЮ только для темной темы */
[data-theme="dark"] .form-select,
[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/*
 * ===================================================================
 *  ФИНАЛЬНЫЕ СТИЛИ ДЛЯ КАСТОМНЫХ КНОПОК ПЕРЕКЛЮЧЕНИЯ ТЕМЫ
 * ===================================================================
*/

/* 1. Стили для НЕАКТИВНОЙ кнопки */
.btn-theme-switcher {
    /* Цвета и рамки из переменных темы */
    background-color: transparent;
    color: var(--panel-button-color); /* Цвет иконки */
    border: 1px solid var(--border-color);

    /* Убираем лишние тени Bootstrap */
    box-shadow: none !important;

    /* Плавный переход */
    transition: all 0.2s ease-in-out;
}

/* 2. Стили при НАВЕДЕНИИ на неактивную кнопку */
.btn-theme-switcher:hover {
    background-color: var(--primary-color-hover) !important;
    color: var(--text-color-secondary) !important;
    border-color: var(--border-color);
}

/* 3. Стили для АКТИВНОЙ (выбранной) кнопки */
#theme-switcher-container .btn-check:checked + .btn-theme-switcher {
    background-color: var(--primary-color);
    color: var(--text-color-secondary);
    border-color: var(--primary-color);
}
.form-control:disabled,
.form-control[readonly] {
    /* Фон делаем как у заголовков в таблицах для визуального отличия */
    background-color: var(--bstable-bg);
    /*
     * Цвет текста делаем СЛЕГКА прозрачным, чтобы он выглядел
     * приглушенным, но оставался в цветовой схеме темы.
    */
    color: var(--text-color-primary);
    opacity: 0.75;
}
.text-muted {
    /* Используем приглушенный цвет текста, который меняется с темой */
    color: var(--panel-button-color) !important;
}
.input-save-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
}

.input-save-controls input {
    flex: 1;
    max-width: 120px;
}

.input-save-btn, .input-edit-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--neon-blue);
    background: transparent;
    color: var(--neon-blue);
    border-radius: 4px;
    font-size: 11px;
    flex-shrink: 0;
}

.input-save-btn:hover, .input-edit-btn:hover {
    background: var(--neon-blue);
    color: var(--bg-color-card);
}

.input-save-btn.saved {
    background: #198754;
    border-color: #198754;
    color: white;
}
/* Кнопка прокрутки вверх */
.scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    left: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--btn-color-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: all 0.3s;
    outline: none;
    border: none;
    opacity: 0.8;
}

.scroll-to-top-btn:hover {
    background-color: var(--secondary-color-hover);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    outline: none;
    border: none;
    opacity: 1;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* Альтернативные цвета для кнопки прокрутки */
.scroll-to-top-btn.btn-success {
    background-color: #28a745;
}

.scroll-to-top-btn.btn-success:hover {
    background-color: #218838;
}

.scroll-to-top-btn.btn-info {
    background-color: #17a2b8;
}

.scroll-to-top-btn.btn-info:hover {
    background-color: #138496;
}

/* Селектор для кнопки копирования */
.copy-record.btn {
    /* --- Основные состояния через переменные Bootstrap --- */

    /* Задаем цвет текста и иконки */
    --bs-btn-color: var(--neon-green);

    /* Задаем цвет рамки */
    --bs-btn-border-color: var(--neon-green);

    /* Убираем фон */
    --bs-btn-bg: transparent;

    /* --- Состояния при наведении (:hover) --- */

    /* Цвет текста и иконки при наведении */
    --bs-btn-hover-color: var(--bg-color-card);

    /* Цвет рамки при наведении */
    --bs-btn-hover-border-color: var(--neon-green);

    /* Цвет фона при наведении */
    --bs-btn-hover-bg: var(--neon-green);

    /* --- Состояния при нажатии (:active) --- */
    --bs-btn-active-color: var(--bg-color-card);
    --bs-btn-active-border-color: var(--neon-green);
    --bs-btn-active-bg: var(--neon-green);

    /* Убираем стандартную тень фокуса Bootstrap */
    --bs-btn-focus-shadow-rgb: none;

    /* Минимальная ширина для квадратной формы */
    min-width: 38px;
}

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

/* Мы используем существующий класс .floating-btn и добавляем к нему наш новый,
   чтобы наследовать тень, анимацию и позиционирование, но переопределить цвет и размер. */
.floating-btn.floating-btn-success {
    /* 1. Цвет фона из новой переменной, которую мы только что создали */
    background-color: var(--success-color);

    /* 2. Делаем кнопку меньше, чем основная (50px вместо 60px) */
    width: 50px;
    height: 50px;

    /* 3. Увеличиваем иконку, чтобы она лучше смотрелась на кнопке меньшего размера */
    font-size: 1.2rem;
}

/* Стиль для наведения мыши */
.floating-btn.floating-btn-success:hover {
    background-color: var(--success-color-hover);
}
.floating-btn-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Добавляем расстояние между кнопками */
}

/*
 * ===================================================================
 *  СТИЛИ ДЛЯ "НЕВИДИМОЙ" КНОПКИ ВНУТРИ КРУГЛОГО DROPDOWN
 * ===================================================================
*/
.dropdown-trigger-btn {
    /* Растягиваем на всю площадь родителя (круглой DIV) */
    width: 100%;
    height: 100%;

    /* Делаем кнопку полностью прозрачной */
    background: transparent;
    border: none;
    padding: 0;

    /* Наследуем цвет иконки от родителя (белый) */
    color: inherit;
    font-size: inherit; /* И размер тоже */

    /* Центрируем иконку внутри кнопки */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Убираем синюю тень при фокусе (важно для эстетики) */
.dropdown-trigger-btn:focus {
    box-shadow: none;
}

/*
 * ===================================================================
 *  ИСПРАВЛЕННЫЕ АДАПТИВНЫЕ СТИЛИ ДЛЯ ПАНЕЛЕЙ (МОБИЛЬНАЯ ВЕРСИЯ)
 *  Применяются только на экранах шириной до 767px
 * ===================================================================
*/
@media (max-width: 767px) {

    /* 1. Добавляем отступ снизу для body, чтобы панель не перекрывала контент */
    body {
        padding-bottom: 70px !important; /* Высота панели + отступ */
        /* Убираем боковой отступ от десктопной версии */
        padding-left: 0 !important;
    }

    /* 2. Общие стили для ОБЕИХ панелей: превращаем их в части нижней панели */
    .side-panel-container--left,
    .side-panel-container--right {
        top: auto;
        transform: none;
        bottom: 0;

        /* Сбрасываем тени, скругления и старые рамки */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--border-color);

        /* Убираем внутренние отступы, чтобы кнопки заняли все место */
        padding: 0;
    }

    /* 3. Размещаем левую панель слева, а правую - справа */
    .side-panel-container--left {
        left: 0;
        /* Левая панель (3 кнопки) занимает 60% ширины */
        width: 60%;
    }

    .side-panel-container--right {
        right: 0;
        /* Правая панель (2 кнопки) занимает 40% ширины */
        width: 40%;
    }

    /* 4. Контейнер для кнопок (.panel-buttons) теперь горизонтальный и занимает все место */
    .side-panel-container .panel-buttons {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        justify-content: space-around;
        align-items: center;
        gap: 0;
    }

    /* 5. Сами кнопки растягиваем, чтобы они заполнили свое пространство */
    .side-panel-container .panel-button {
        flex: 1; /* Каждая кнопка занимает равную часть */
        height: 60px; /* Фиксированная высота для удобного нажатия */
        border-radius: 0; /* Убираем скругления на мобильных */
    }
}
/*
 * ===================================================================
 *  ОКОНЧАТЕЛЬНЫЕ АДАПТИВНЫЕ СТИЛИ (v8 - The Real Final Fix)
 * ===================================================================
*/

/* --- Стили для ДЕСКТОПА (шире 768px) --- */
@media screen and (min-width: 769px) {
    /* Возвращаем красивый отступ по бокам для больших экранов */
    .container-fluid {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * ===================================================================
 *  АДАПТИВНЫЕ СТИЛИ (v21 - ВАРИАНТ 1: РАМКА)
 * ===================================================================
*/
@media screen and (max-width: 768px) {

    /* --- Общие исправления --- */
    body { overflow-x: hidden; }
    .container-fluid { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .row { margin-left: 0; margin-right: 0; }

    /* --- Адаптация шапки и фильтров --- */
    .header-main { flex-direction: column; align-items: center; text-align: center; width: 100%; padding-right: 0; }
    .header-title { margin-top: 0.5rem; margin-right: 0; font-size: 1.5rem; text-align: center; }
    .card.mb-4 { margin-top: 2rem; }
    .card.mb-4 .row { flex-direction: column; align-items: stretch; }
    .card.mb-4 .row > [class*="col-"] { width: 100%; margin-bottom: 0.75rem; padding-left: 0; padding-right: 0; }
    .card.mb-4 .row > [class*="col-"]:last-child { margin-bottom: 0; }
    .card.mb-4 .row .col-auto:first-child { text-align: center; }
    .date-buttons-wrapper .btn-group { display: flex; flex-wrap: wrap; justify-content: center; }

    /* --- Нижняя панель навигации --- */
    .side-panel-container .panel-button span { display: none; }
    .side-panel-container .panel-button i { font-size: 24px; margin-bottom: 0; }
    .side-panel-container .panel-button { height: 55px; }

    /* ================== АДАПТАЦИЯ ТАБЛИЦЫ С РАМКАМИ ================== */
    .table-responsive, .table, .table tbody, .table tfoot { display: block; }
    .table thead { display: none; }

    .table tbody tr {
        display: block; margin-bottom: 1rem; border: 1px solid var(--border-color);
        border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden;

        /* !! ГЛАВНОЕ ИЗМЕНЕНИЕ: ДОБАВЛЯЕМ РАМКУ СВЕРХУ !! */
        border-top: 3px solid transparent; /* Прозрачная рамка-заполнитель */
    }

    /* Окрашиваем рамку для каждой карточки */
    .table tbody tr {
        border-top-color: var(--primary-color);
    }

    /* Отключаем hover-эффект, чтобы цвет не "залипал" */
    .table tbody tr:hover td {
        background-color: transparent !important;
    }

    .table tbody tr:has(td.header-row) { display: none; }
    .table td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.75rem; border-bottom: 1px solid var(--border-color); text-align: right;
        background-color: transparent; /* Ячейки прозрачные, чтобы видеть фон карточки */
    }
    .table tr td:last-child {
        border-bottom: none; background-color: var(--bstable-bg); justify-content: center;
    }
    .table td:before {
        content: attr(data-label); font-weight: bold; text-align: left;
        padding-right: 1em; color: var(--text-color-primary); flex-shrink: 0;
    }
    .table td[data-label]:empty { display: none; }
    .table td[data-label="Описание"] {
        display: block; background-color: var(--bstable-bg) !important;
        font-size: 1.1em; font-weight: bold; text-align: center; white-space: normal;
        word-break: break-word; min-width: 0;
    }
    .table td[data-label="Описание"]:before { display: none; }
    .table td[data-label="Оплата"] { flex-direction: column; align-items: flex-end; }
    .table td[data-label="Оплата"]:before { width: 100%; margin-bottom: 5px; text-align: left; }
    .table td[data-label="Оплата"] .payment-badge { display: flex; width: auto; margin-bottom: 5px; }
    .table td[data-label="Оплата"] .payment-badge:last-child { margin-bottom: 0; }
    .payment-badge .payment-amount { margin-right: 0.5em; }

    /* --- Плавающие кнопки --- */
    .floating-btn-container { bottom: 80px; right: 1rem; }
    .scroll-to-top-btn { bottom: 80px; left: 1rem; }
    .floating-btn, .scroll-to-top-btn { width: 48px; height: 48px; font-size: 1.2rem; }
    .floating-btn.floating-btn-success { width: 40px; height: 40px; font-size: 1rem; }
}
    .table td[data-label="Оплата"]:before {
        width: 100%; margin-bottom: 5px; text-align: left;
    }
    .table td[data-label="Оплата"] .payment-badge {
        display: flex; width: auto; margin-bottom: 5px;
    }
    .table td[data-label="Оплата"] .payment-badge:last-child { margin-bottom: 0; }
    .payment-badge .payment-amount { margin-right: 0.5em; }

    /* ================== 6. ПЛАВАЮЩИЕ КНОПКИ ================== */
    .floating-btn-container { bottom: 80px; right: 1rem; }
    .scroll-to-top-btn { bottom: 80px; left: 1rem; }
    .floating-btn, .scroll-to-top-btn {
        width: 48px; height: 48px; font-size: 1.2rem;
    }
    .floating-btn.floating-btn-success {
        width: 40px; height: 40px; font-size: 1rem;
    }
/*
 * ===================================================================
 *  ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ: Шапка на мобильных (v3 - The Correct Way)
 * ===================================================================
*/
@media screen and (max-width: 768px) {

    /* 1. Превращаем основной контейнер шапки в позиционный контекст */
    .d-flex.justify-content-between.align-items-center {
        position: relative;
        /* Задаем минимальную высоту, чтобы кнопка поместилась */
        min-height: 80px;
    }

    /* 2. Возвращаем кнопке пользователя ее абсолютное позиционирование */
    .dropdown {
        position: absolute;
        top: 10px;
        right: 5px;
    }

    /* 3. ГЛАВНОЕ: Отодвигаем заголовок от кнопки */
    .header-main {
        /* Занимает всю ширину, но с отступом справа */
        width: 100%;
        padding-right: 75px; /* Ширина кнопки (65px) + отступ (10px) */
        /* Возвращаем вертикальное центрирование для лого и текста */
        display: flex;
        align-items: center;
    }

    /* !! НОВОЕ ПРАВИЛО: Уменьшаем логотип !! */
    .header-logo {
        height: 40px; /* Уменьшаем с 50px до 40px */
    }

    /* 4. Настраиваем сам текст заголовка */
    .header-title {
        margin-top: 0;
        font-size: 1.2rem;
    }

    /* 5. Убираем лишний отступ у фильтра дат */
    .card.mb-4 {
        margin-top: 1rem;
    }
}
/*
 * ===================================================================
 *  ДОПОЛНИТЕЛЬНОЕ ИСПРАВЛЕНИЕ: Центрирование панелей "Касса" и "Зарплата"
 *  (ТОЛЬКО ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ)
 * ===================================================================
*/
@media screen and (max-width: 768px) {
    /*
      Это правило сработает только для панелей Кассы и Зарплаты,
      когда у них появится класс .visible на мобильных устройствах.
    */
    #kassa-panel.visible,
    #salary-panel.visible {
        /* 1. Сбрасываем позиционирование от правого края */
        right: auto;

        /* 2. Ставим левый край панели на середину экрана */
        left: 50%;

        /* 3. Сдвигаем панель влево на половину ее собственной ширины
              и центрируем по вертикали */
        transform: translate(-50%, -50%);

        /* 4. Добавляем ширину, чтобы панель не была слишком узкой */
        width: 90%;
    }
}

/*
 * ===================================================================
 *  АДАПТИВНЫЕ СТИЛИ: Панель "Долг поставщикам" (Карточки)
 * ===================================================================
*/
@media screen and (max-width: 768px) {

    /* 1. Центрируем панель на мобильных и даем ей полную ширину */
    #delivery-panel.visible {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%; /* Занимает почти весь экран */
        max-height: 80vh; /* Ограничиваем высоту */
        overflow-y: auto; /* Добавляем прокрутку, если карточек много */
    }

    /* 2. Применяем те же стили карточек, что и для основной таблицы */
    #delivery-panel .data-table thead {
        display: none;
    }

    #delivery-panel .data-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        border-top: 3px solid var(--primary-color);
    }

    /* Находим строку, где есть ячейка с colspan="3" */
    #delivery-panel .data-table tbody tr:has(td[colspan="3"]) {
        display: block; /* Превращаем ее в блочный элемент */
        border: none;
        box-shadow: none;
        background-color: transparent;
        margin-top: 1rem;
        padding: 0.75rem;
        border-top: 2px solid var(--primary-color);
    }

    /* Находим саму ячейку и стилизуем ее */
    #delivery-panel .data-table tbody tr td[colspan="3"] {
        display: flex; /* Включаем flex для выравнивания */
        justify-content: space-between; /* Раскидываем текст и сумму по краям */
        width: 100%;
        font-size: 1.2em; /* Делаем шрифт крупнее */
        font-weight: bold;
        padding: 0;
        border: none;
    }

    /* Находим ячейку с самой суммой и стилизуем ее */
    #delivery-panel .data-table tbody tr:has(td[colspan="3"]) td:last-child {
        background-color: transparent;
        border: none;
    }

    /* Скрываем строку с кнопкой "Добавить" */
    #delivery-panel .data-table tbody tr:has(td[colspan="8"]) {
        display: none;
    }

    #delivery-panel .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 1px solid var(--border-color);
        text-align: right;
    }

    #delivery-panel .data-table tr td:last-child {
        border-bottom: none;
        background-color: var(--bstable-bg);
        justify-content: center;
    }

    #delivery-panel .data-table td:before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        padding-right: 1em;
        flex-shrink: 0;
    }

    /* Ячейка "Поставщик" становится заголовком карточки */
    #delivery-panel .data-table td[data-label="Поставщик"] {
        display: block;
        background-color: var(--bstable-bg);
        font-weight: bold;
        font-size: 1.1em;
        text-align: center;
        white-space: normal;
        word-break: break-word;
    }
    #delivery-panel .data-table td[data-label="Поставщик"]:before {
        display: none;
    }

    /* Прячем пустые строки (например, если нет возврата) */
    #delivery-panel .data-table td[data-label]:empty {
        display: none;
    }
}
/*
 * ===================================================================
 *  АДАПТИВНЫЕ СТИЛИ: Панель "Сверка" (Финальная версия)
 * ===================================================================
*/
@media screen and (max-width: 768px) {

    /* 1. Центрируем панель на мобильных и даем ей полную ширину */
    #sverka-panel.visible {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%; /* Занимает почти весь экран */
        max-height: 80vh; /* Ограничиваем высоту */
        overflow-y: auto; /* Добавляем прокрутку, если карточек много */
    }

    /* 2. Применяем стили карточек к таблице сверки */
    #sverka-panel .data-table thead {
        display: table-header-group !important; /* Показываем заголовок таблицы */
    }
    /* НОВОЕ: Уменьшаем шрифт заголовков */
    #sverka-panel .data-table thead th {
        font-size: 0.85em; /* Уменьшаем шрифт заголовков */
    }

    #sverka-panel .data-table tbody tr {
        display: table-row !important; /* Возвращаем строкам табличное поведение */
        /* Убираем стили карточек */
        margin-bottom: 0 !important;
        border: none !important;
        border-top: none !important;
        box-shadow: none !important;
        /* Возвращаем разделительную линию */
        border-bottom: 1px solid var(--border-color);
    }
    #sverka-panel .data-table tbody tr:last-child {
        border-bottom: none; /* У последней строки убираем линию */
    }
    /* НОВОЕ: Уменьшаем шрифт названий поставщиков */
    #sverka-panel .data-table tbody td:first-child {
        font-size: 0.85em;
        text-align: left;
    }
    /* НОВОЕ: Делаем фон всех ячеек прозрачным для единого вида */
    #sverka-panel .data-table td {
        background-color: transparent !important;
    }

    /* !! НОВОЕ ИСПРАВЛЕНИЕ: Стилизуем итоговую строку "Всего" !! */
    /* Находим строку, где есть ячейка с жирным шрифтом */
    #sverka-panel .data-table tbody tr:has(td[style*="font-weight: bold"]) {
        display: flex; /* <-- ГЛАВНОЕ ИЗМЕНЕНИЕ: Включаем Flexbox */
        flex-wrap: nowrap; /* Запрещаем перенос */
        justify-content: flex-end; /* Выравниваем все по правому краю */
        align-items: center; /* Выравниваем по центру по вертикали */

        /* Стили блока-разделителя */
        border: none;
        box-shadow: none;
        background-color: transparent;
        margin-top: 1rem;
        padding: 0.75rem;
        border-top: 2px solid var(--primary-color);
    }

    /* Стилизуем ячейки внутри итоговой строки */
    #sverka-panel .data-table tbody tr:has(td[style*="font-weight: bold"]) td {
        display: inline-block; /* Позволяем им быть в одной строке */
        width: auto; /* Ширина по содержимому */
        border: none;
        padding: 0 8px; /* Добавляем отступы по бокам */
        text-align: right;
        background-color: transparent;
    }

    /* Прячем пустую ячейку с кнопками в итоговой строке */
    #sverka-panel .data-table tbody tr:has(td[style*="font-weight: bold"]) td:last-child {
        display: none;
    }

    /* Возвращаем цвет для сумм */
    #sverka-panel .data-table .standard-sum {
        color: var(--neon-green);
    }
    #sverka-panel .data-table .non-standard-sum {
        color: var(--neon-blue);
    }

    #sverka-panel .data-table td {
        display: table-cell !important; /* Возвращаем ячейкам табличное поведение */
        font-size: 0.9em; /* Немного уменьшаем шрифт, чтобы всё влезло */
        padding: 8px 5px !important; /* Уменьшаем боковые отступы */
        vertical-align: middle;
        /* Сбрасываем стили карточек */
        justify-content: initial !important;
        text-align: left;
    }

    #sverka-panel .data-table tr td:last-child {
        border-bottom: none;
        background-color: var(--bstable-bg);
        justify-content: center;
    }

    #sverka-panel .data-table td:before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        padding-right: 1em;
        flex-shrink: 0;
        display: none !important; /* Прячем подписи "Поставщик:", "Стандарт:" и т.д. */
    }
    /* Выравниваем числовые колонки по правому краю */
    #sverka-panel .data-table th:nth-child(2),
    #sverka-panel .data-table td:nth-child(2),
    #sverka-panel .data-table th:nth-child(3),
    #sverka-panel .data-table td:nth-child(3) {
        text-align: right;
    }
    /* Центрируем колонку с кнопками */
    #sverka-panel .data-table th:last-child,
    #sverka-panel .data-table td:last-child {
        text-align: center;
        width: 50px; /* Задаем ей минимальную ширину */
    }

    /* Ячейка "Поставщик" становится заголовком карточки */
    #sverka-panel .data-table td[data-label="Поставщик"] {
        display: block;
        background-color: var(--bstable-bg);
        font-weight: bold;
        font-size: 1.1em;
        text-align: center;
        white-space: normal;
        word-break: break-word;
    }
    #sverka-panel .data-table td[data-label="Поставщик"]:before {
        display: none;
    }

    #sverka-panel .data-table td[data-label]:empty {
        display: none;
    }
}
/*
 * ===================================================================
 *  ДОПОЛНИТЕЛЬНОЕ ИСПРАВЛЕНИЕ: Перенос даты в панели "Сверка"
 * ===================================================================
*/

.sverka-period-header {
    text-align: center; /* Центрируем весь блок */
}

.sverka-period-header small {
    display: block; /* Заставляем <small> перенестись на новую строку */
    font-size: 1.1em; /* Делаем текст периода чуть меньше */
    opacity: 0.8; /* и чуть бледнее */
    margin-top: 2px;
}
#delivery-panel.visible,
#sverka-panel.visible {
    z-index: 2001; /* <-- Больше, чем z-index боковых панелей (2000) и плавающих кнопок (1050) */
}
/*
 * ===================================================================
 *  ФИНАЛЬНЫЕ СТИЛИ ДЛЯ РАСШИРЕННОЙ ПАНЕЛИ ЗП МЕНЕДЖЕРОВ (С ТЕМАМИ)
 * ===================================================================
*/

/* 1. Общие стили для всей расширенной панели */
.salary-manager-panel-extended {
    display: flex;
    gap: 15px;
    width: auto;
    max-width: 1200px;
}
.salary-manager-main-column {
    flex-basis: 550px;
    flex-shrink: 0;
}
.salary-manager-side-column {
    flex-basis: 450px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* 2. Общий стиль для всех секций в правой колонке */
.side-panel-section {
    border-radius: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
}

/* 5. Общий стиль для заголовков (h6) во всех секциях */
.side-panel-section h6 {
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem; /* Чуть меньше заголовки */
    margin-bottom: 6px; /* Меньше отступ */
    padding-bottom: 6px;
    color: var(--text-color-primary); /* <-- Цвет текста из темы */
}

/* 6. Стили для таблиц внутри секций */
#weekly-breakdown-content .table,
#parts-margin-content .table {
    font-size: 0.9em;
}

/* 8. Контейнер для графика */
.chart-wrapper {
    position: relative;
    min-height: 250px;
}
/* Стили для таблицы разбивки по неделям */
#weekly-breakdown-content .table {
    font-size: 0.9em;
    margin-bottom: 0;
}

/* Убираем рамки между ячейками */
#weekly-breakdown-content .table td,
#weekly-breakdown-content .table th {
    border: none;
    padding: 0.5rem 0.75rem;
}

/* Заголовки таблицы */
#weekly-breakdown-content .table thead th {
    background-color: var(--bstable-bg);
    color: var(--text-color-primary) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

/* Сбрасываем все Bootstrap переменные для фона */
#weekly-breakdown-content .table tbody tr {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
}



/* Hover эффект для строк */
#weekly-breakdown-content .table tbody tr:hover {
    background-color: var(--bstable-hover-bg);
}

/* Выравнивание для числовых колонок */
#weekly-breakdown-content .table th:not(:first-child),
#weekly-breakdown-content .table td:not(:first-child) {
    text-align: right;
}

/* Первая колонка (Период) выравниваем по левому краю */
#weekly-breakdown-content .table th:first-child,
#weekly-breakdown-content .table td:first-child {
    text-align: left;
}

/* Жирный шрифт для колонки "Прибыль" */
#weekly-breakdown-content .table td:last-child {
    font-weight: bold;
}

/* Компактнее график */

/* Ограничиваем высоту ВСЕЙ панели */
#salary-manager-panel.visible {
    max-height: 90vh;
    overflow: hidden; /* Убираем прокрутку с основного контейнера */
}

/* Делаем основную колонку прокручиваемой */
.salary-manager-main-column {
    max-height: 90vh;
    overflow-y: auto;
    padding-right: 5px; /* Отступ для полосы прокрутки */
}

/* Делаем правую колонку прокручиваемой */
.salary-manager-side-column {
    max-height: 90vh;
    overflow-y: auto;
    padding-right: 5px;
}

/* Компактнее заголовок панели */
#salary-manager-panel h5 {
    margin: 0 0 10px 0; /* Уменьшили с 15px */
    padding-bottom: 8px;
    font-size: 1.1rem;
}

/* Компактнее блок с датами */
.panel-dates {
    padding: 6px; /* Уменьшили с 8px */
}

/* Компактнее таблица расчета ЗП */
#salary-manager-content .table td {
    padding: 0.5rem 0.75rem; /* Уменьшили вертикальный отступ */
}

/* Компактнее график */
#mechanics-salary-chart-container .chart-wrapper {
    min-height: 180px;
}

/* Меньше отступы между секциями */
#parts-margin-container,
#mechanics-salary-chart-container {
    margin-top: 0.75rem !important;
}

/* Компактнее блок выбора менеджера */
#manager-selector-container .form-label {
    margin-bottom: 0.25rem; /* Меньше отступ */
}

#manager-select {
    padding: 0.375rem 0.75rem; /* Bootstrap стандарт, но можно и меньше */
}
/*
 * ===================================================================
 *  КОМПАКТНЫЙ ВИД ДЛЯ ПАНЕЛИ ЗАРПЛАТЫ МЕНЕДЖЕРОВ (РЕШЕНИЕ ПРОБЛЕМЫ ВЫСОТЫ)
 * ===================================================================
*/

/* 1. Уменьшаем вертикальные отступы для всех ячеек в таблице расчета */
#salary-manager-content .table-wrapper .table > tbody > tr > td {
    padding-top: 0.35rem; /* Значение по умолчанию ~0.5rem */
    padding-bottom: 0.35rem;
    line-height: 1.3; /* Слегка сжимаем межстрочный интервал */
}

/* 2. Делаем шрифт названий строк чуть меньше */
.table-wrapper .table td.salary-table-header,
.table-wrapper .table td.salary-table-header-negative {
    font-size: 0.9em; /* Немного уменьшаем шрифт заголовков строк */
}


/* 3. Значительно уменьшаем шрифты для итоговых полей */
#total-earned-display,
#manager-bonus-display {
    font-size: 1.1rem !important; /* Bootstrap класс .fs-5 равен 1.25rem */
}

/* 4. Уменьшаем шрифт для самого главного итога - "Итого ЗП" */
#final-salary-display {
    font-size: 1.3rem !important; /* Bootstrap класс .fs-4 равен 1.5rem */
}
/*
 * ===================================================================
 *  СТИЛИЗАЦИЯ ТАБЛИЦЫ "ОТЧЁТ С РАБОТ ПО НЕДЕЛЯМ" (ДЛЯ ЧИТАЕМОСТИ)
 * ===================================================================
*/

/* 1. Стили для заголовка таблицы */
#weekly-breakdown-content .table thead th {
    /* Задаем фон, как у других заголовков */
    background-color: var(--bstable-bg);
    /* Добавляем жирную нижнюю границу, чтобы отделить заголовок от данных */
    border-bottom: 2px solid var(--border-color);
    font-weight: 600; /* Делаем шрифт полужирным для акцента */
    color: var(--text-color-primary) !important;
}

/* 2. Добавляем разделительные линии между строками с данными */
#weekly-breakdown-content .table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease-in-out; /* Плавный переход для наведения */
}

/* 3. Убираем линию у самой последней строки, чтобы было аккуратно */
#weekly-breakdown-content .table tbody tr:last-child {
    border-bottom: none;
}

/* 4. Добавляем эффект подсветки строки при наведении курсора */
#weekly-breakdown-content .table tbody tr:hover {
    background-color: var(--bstable-hover-bg);
}
/*
 * ===================================================================
 *  ЦЕНТРИРОВАНИЕ ПАНЕЛИ ЗП (v5 - ФИНАЛЬНЫЙ МЕТОД БЕЗ TRANSFORM)
 * ===================================================================
*/

/* 1. Стили для больших экранов (десктопов) */
#salary-manager-panel.visible {
    /* ЗАБЫВАЕМ ПРО СТАРЫЕ МЕТОДЫ */
    /* top: 50%; left: 50%; transform: translate(-50%, -50%); */

    /* НОВЫЙ, НАДЁЖНЫЙ МЕТОД ЦЕНТРИРОВАНИЯ */
    position: fixed;
    /* Создаем "коробку" для центрирования, которая занимает весь экран */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Задаем размеры панели по её содержимому */
    width: fit-content;
    height: fit-content;

    /* Устанавливаем максимальные размеры, чтобы панель не вылезала за экран */
    max-width: 1200px;
    max-height: 95vh; /* не более 95% высоты экрана */

    /*
     * ВОТ МАГИЯ: margin: auto; внутри такой "коробки" с заданными
     * границами идеально центрирует элемент и по вертикали, и по горизонтали.
     * Этот метод не вызывает багов с отрисовкой.
    */
    margin: auto;

    /* Если контент не поместится, появится внутренняя прокрутка */
    overflow: auto;

    /* Принудительно отключаем transform на всякий случай */
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

/* 2. Адаптивные стили для мобильных устройств */
@media screen and (max-width: 768px) {
    #salary-manager-panel.visible {
        /* Применяем тот же надежный метод, но с другими размерами */
        width: 95%; /* Занимает почти весь экран */
        max-width: 95%;
        max-height: 85vh;
        flex-direction: column;
        overflow-y: auto;
    }
}
/*
 * ===================================================================
 *  ЕДИНАЯ И ПРАВИЛЬНАЯ ЛОГИКА АНИМАЦИИ (v8 - ИСПРАВЛЕННАЯ ВЕРСИЯ)
 * ===================================================================
*/

/* 1. ОСНОВНОЕ ПРАВИЛО ДЛЯ ВСЕХ ПАНЕЛЕЙ */
.slide-panel {
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out;
}

/* 2. УСТАНОВКА НАЧАЛЬНОГО СОСТОЯНИЯ */
/* --- Для боковых панелей (выезд) --- */
.slide-panel.right { transform: translate(105%, -50%); }
/* /* ИЗМЕНЕНИЕ: Теперь это правило ИСКЛЮЧАЕТ обе центральные панели */
.slide-panel.left:not(#salary-manager-panel):not(#delivery-panel) {
    transform: translate(-105%, -50%);
}

/* --- Для центральных окон (масштабирование) --- */
/* /* ИЗМЕНЕНИЕ: Теперь это правило применяется к ОБЕИМ центральным панелям */


/* 3. ПРАВИЛО ДЛЯ ВСЕХ ВИДИМЫХ ПАНЕЛЕЙ */
.slide-panel.visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Финальное состояние для боковых панелей --- */
.slide-panel.visible.right { transform: translate(0, -50%); }
/* /* ИЗМЕНЕНИЕ: Исключаем обе центральные панели и здесь */
.slide-panel.visible.left:not(#salary-manager-panel):not(#delivery-panel) {
    transform: translate(0, -50%);
}

/* ВСТАВИТЬ ВМЕСТО ДВУХ СТАРЫХ БЛОКОВ */

/* --- Для центральных окон (анимация масштабирования) --- */
#salary-manager-panel,
#delivery-panel {
    /* Начальное состояние (чуть уменьшены и прозрачны) */
    transform: scale(0.95);
    opacity: 0;
    pointer-events: none; /* Нельзя кликнуть, пока невидимы */

    /* Надежное центрирование для обеих панелей */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: fit-content;
    margin: auto;
    overflow: auto;
}

/* Финальное состояние для видимых центральных окон */
#salary-manager-panel.visible,
#delivery-panel.visible {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Индивидуальные размеры для каждой панели */
#salary-manager-panel {
    /* ИЗМЕНЕНИЕ: Задаем ФИКСИРОВАННУЮ ширину, а не максимальную */
    width: 1100px; /* Вы можете подобрать значение, 1100px - хороший старт */

    /* Добавляем max-width как "защиту" для экранов, которые уже чем 1100px */
    max-width: 95%;

    max-height: 95vh;
}

#delivery-panel {
    width: 65%;
    max-width: 900px;
    max-height: 80vh;
}
/* 4. ЦЕНТРИРОВАНИЕ ДЛЯ ЦЕНТРАЛЬНЫХ ОКОН (ОСТАЁТСЯ БЕЗ ИЗМЕНЕНИЙ) */
#salary-manager-panel,
#delivery-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: fit-content;
    margin: auto;
    overflow: auto;
    max-width: 1200px;
    max-height: 95vh;
}
#delivery-panel {
    max-height: 80vh;
    width: 65%;
    max-width: 900px;
}

/* 5. АДАПТИВНЫЕ СТИЛИ ДЛЯ МОБИЛЬНЫХ (ИСПРАВЛЕННАЯ ВЕРСИЯ) */
@media screen and (max-width: 768px) {
    /* ВСЕ панели с контентом центрируем одинаково */
    #salary-manager-panel.visible,
    #delivery-panel.visible,
    #kassa-panel.visible,
    #salary-panel.visible,
    #sverka-panel.visible {
        /* Единый метод центрирования для всех */
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important; /* Сбрасываем margin, используем transform */

        width: 95%;
        max-width: 95%;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 2001;
    }

    /* Боковые панели с КНОПКАМИ (сами контейнеры с иконками) */
    .slide-panel.left:not(#salary-manager-panel):not(#delivery-panel):not(#sverka-panel),
    .slide-panel.right:not(#kassa-panel):not(#salary-panel) {
        top: auto;
        bottom: 0;
        transform: translateY(105%);
        width: 100%;
        height: 60px;
        padding: 0;
        border-radius: 0;
        border-top: 1px solid var(--border-color);
        flex-direction: row;
    }

    .slide-panel.visible.left:not(#salary-manager-panel):not(#delivery-panel):not(#sverka-panel),
    .slide-panel.visible.right:not(#kassa-panel):not(#salary-panel) {
        transform: translateY(0);
    }
}
/*
 * ===================================================================
 *    АДАПТИВНЫЕ СТИЛИ ДЛЯ ПАНЕЛИ "ЗАРПЛАТА МЕНЕДЖЕРОВ" (МОБИЛЬНАЯ ВЕРСИЯ)
 * ===================================================================
*/
@media screen and (max-width: 768px) {

    /* 1. Делаем основной контейнер панел гибким и ставим колонки друг под другом */
    #salary-manager-panel.visible.salary-manager-panel-extended {
        flex-direction: column; /* Ставим колонки друг под другом */
        align-items: stretch; /* Растягиваем их на всю ширину */
        overflow-y: auto; /* Включаем прокрутку для всей панели, если не помещается */
    }

    /* 2. Сбрасываем фиксированную ширину и высоту для колонок */
    .salary-manager-main-column,
    .salary-manager-side-column {
        flex-basis: auto; /* Сбрасываем фиксированную ширину */
        max-height: none; /* Убираем ограничение по высоте для колонок */
        overflow-y: visible; /* Отключаем их собственную прокрутку */
        padding-right: 0; /* Убираем отступ для скроллбара, если он был */
    }

    /* 3. Скрываем блок "Рабочих дней / ЗП в день", как вы и просили */
    #workday-info-container,
    #salary-manager-template-info{
        display: none;
    }

    /* 4. Добавляем горизонтальную прокрутку для таблиц, чтобы они не ломались */
    #weekly-breakdown-content,
    #salary-manager-content .table-wrapper {
        overflow-x: auto;
        /* Добавляем небольшой эффект для плавной прокрутки на iOS */
        -webkit-overflow-scrolling: touch;
    }

    /* 5. Запрещаем перенос текста в ячейках, чтобы сохранить "десктопный" вид таблиц */
    #weekly-breakdown-content .table,
    #salary-manager-content .table-wrapper .table {
        white-space: nowrap;
    }
}
/*
 * ===================================================================
 *  ФИНАЛЬНОЕ КОМПЛЕКСНОЕ РЕШЕНИЕ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (v5)
 * ===================================================================
*/
@media screen and (max-width: 768px) {

    /* --- ЧАСТЬ 1: Глобальное правило для ВСЕХ панелей --- */
    /* Заставляет все панели появляться по центру как модальные окна */
    #kassa-panel.visible,
    #salary-panel.visible,
    #sverka-panel.visible,
    #delivery-panel.visible,
    #salary-manager-panel.visible {
        /* Надежное центрирование */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto; /* Сброс десктопных правил */

        /* Размеры и z-index */
        width: 95%;
        max-width: 95%;
        max-height: 85vh;
        z-index: 2001; /* Поверх всех элементов */

        /* Внутренняя структура для управления высотой контента */
        display: flex;
        flex-direction: column;

        /* ВАЖНО: Добавляем прокрутку для всей панели */
        overflow-y: auto;
    }

    /* --- ЧАСТЬ 2: Отображение контента для ПРОСТЫХ панелей --- */
    /* Это правило затрагивает ТОЛЬКО Кассу, Зарплату, Сверку и Поставщиков */
    #kassa-content,
    #salary-content,
    #sverka-content,
    #delivery-content {
        flex-grow: 1;             /* Занимает всё доступное место по высоте */
        max-height: none !important; /* !! ВАЖНО: Отменяет десктопные ограничения высоты */
        min-height: 0;            /* Техническое свойство для правильной работы прокрутки */
        overflow-y: visible;         /* Включает прокрутку для самого контента */
    }

    /* --- ДОПОЛНИТЕЛЬНО: Убираем ограничения высоты для заголовков --- */
    #kassa-panel h5,
    #salary-panel h5,
    #sverka-panel h5,
    #delivery-panel h5 {
        flex-shrink: 0; /* Заголовок не сжимается */
    }

    #kassa-panel .panel-dates,
    #salary-panel .panel-dates,
    #sverka-panel .panel-dates,
    #delivery-panel .panel-dates {
        flex-shrink: 0; /* Блок с датами не сжимается */
    }

    /* --- ЧАСТЬ 3: ИЗОЛИРОВАННЫЕ стили ТОЛЬКО для панели "Зарплата Менеджера" --- */
    /* Эти стили НЕ затронут другие панели, так как начинаются с #salary-manager-panel */
    #salary-manager-panel.visible {
        align-items: stretch;
    }
    #salary-manager-panel .salary-manager-main-column,
    #salary-manager-panel .salary-manager-side-column {
        flex-basis: auto;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
    #salary-manager-panel #workday-info-container {
        display: none;
    }
    #salary-manager-panel #weekly-breakdown-content,
    #salary-manager-panel #salary-manager-content .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #salary-manager-panel #weekly-breakdown-content .table thead {
        display: table-header-group !important;
    }
    #salary-manager-panel #weekly-breakdown-content .table thead th {
        font-size: 0.8em;
        padding: 0.6rem 0.4rem;
    }
    #salary-manager-panel .salary-manager-main-column .table,
    #salary-manager-panel .salary-manager-side-column .table {
        display: table !important;
        width: 100%;
    }
    #salary-manager-panel .salary-manager-main-column .table tbody,
    #salary-manager-panel .salary-manager-side-column .table tbody {
        display: table-row-group !important;
    }
    #salary-manager-panel .salary-manager-main-column .table tr,
    #salary-manager-panel .salary-manager-side-column .table tr {
        display: table-row !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }
    #salary-manager-panel .salary-manager-main-column .table td,
    #salary-manager-panel .salary-manager-side-column .table td {
        display: table-cell !important;
        white-space: nowrap;
        justify-content: initial !important;
        padding: 0.5rem 0.75rem !important;
        border-bottom: 1px solid var(--border-color) !important;
        text-align: left;
    }
    #salary-manager-panel .salary-manager-main-column .table tr:last-child td,
    #salary-manager-panel .salary-manager-side-column .table tr:last-child td {
        border-bottom: none !important;
    }
    #salary-manager-panel .salary-manager-main-column .table td:before,
    #salary-manager-panel .salary-manager-side-column .table td:before {
        display: none !important;
    }
    #salary-manager-panel #weekly-breakdown-content .table td:not(:first-child),
    #salary-manager-panel #parts-margin-content .table td.text-end,
    #salary-manager-panel #salary-manager-content .table td.text-end {
        text-align: right !important;
    }
    #salary-manager-panel #salary-manager-content .table-wrapper .table td {
        white-space: normal !important;
    }
    #salary-manager-panel #salary-manager-content .table-wrapper .table td:last-child {
        width: 1%;
        white-space: nowrap;
    }
}