/* =========================================
   СВЕТЛАЯ ТЕМА (По умолчанию)
   ========================================= */
:root {
    /* Фоны */
    --bg-main: #f4f4f5;         /* Замена темному фону body (#161618 / #27272a) */
    --bg-surface: #ffffff;      /* Карточки, боковое меню, модалки (замена #1e1e1e / #1f1f1f) */
    --bg-input: #ffffff;        /* Поля ввода (замена #2a2a2a) */
    --bg-glass: rgba(255, 255, 255, 0.7); /* Светлый глассморфизм */
    
    /* Текст */
    --text-main: #18181b;       /* Основной текст (замена #ffffff) */
    --text-muted: #71717a;      /* Второстепенный текст, плейсхолдеры (замена #aaa / #a1a1aa) */
    
    /* Границы и линии */
    --border-main: #e4e4e7;     /* Разделители в таблицах (замена #3f3f46) */
    --border-input: #d4d4d8;    /* Границы инпутов и селектов (замена #444 / #555) */
    --border-glass: rgba(0, 0, 0, 0.1); /* Граница для глассморфизма */

    /* Акцентные цвета (Фирменный цвет оставляем одинаковым или чуть корректируем для контраста) */
    --accent-brand: #ca5038;    /* Твой основной цвет кнопок */
    --accent-brand-hover: #b3422d;
    
    /* Второстепенные кнопки (серые) */
    --bg-btn-secondary: #e4e4e7; /* Замена #3f3f46 / #474747 */
    --bg-btn-secondary-hover: #d4d4d8;
    --text-btn-secondary: #18181b; /* Замена белого текста на серых кнопках */

    /* Статусы (Оставляем те же оттенки, но адаптируем под белый фон) */
    --status-success-bg: rgba(52, 199, 89, 0.15);
    --status-success-text: #28a745;
    --status-error-bg: rgba(255, 69, 58, 0.15);
    --status-error-text: #dc2626;
    --status-pending-bg: rgba(255, 149, 0, 0.15);
    --status-pending-text: #d97706;
    --row-blocked-bg: rgba(220, 38, 38, 0.1);
}

/* =========================================
   ТЁМНАЯ ТЕМА (Твои текущие цвета)
   ========================================= */
[data-theme="dark"] {
    /* Фоны */
    --bg-main: #161618;         /* Твой фон body */
    --bg-surface: #27272a;      /* Фон для .order, .sidebar, .profile */
    --bg-input: #2a2a2a;        /* Твои поля ввода */
    --bg-glass: rgba(255, 255, 255, 0.05);
    
    /* Текст */
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    
    /* Границы и линии */
    --border-main: #3f3f46;
    --border-input: #52525b;
    --border-glass: rgba(255, 255, 255, 0.1);

    /* Акцентные цвета */
    --accent-brand: #ca5038;
    --accent-brand-hover: #b3422d;
    
    /* Второстепенные кнопки (серые) */
    --bg-btn-secondary: #3f3f46;
    --bg-btn-secondary-hover: #52525b;
    --text-btn-secondary: #ffffff;

    /* Статусы */
    --status-success-bg: rgba(52, 199, 89, 0.15);
    --status-success-text: #34c759;
    --status-error-bg: rgba(255, 69, 58, 0.15);
    --status-error-text: #ff453a;
    --status-pending-bg: rgba(255, 149, 0, 0.15);
    --status-pending-text: #ff9500;

    --row-blocked-bg: rgba(220, 38, 38, 0.2);
}

/* Контейнер тумблера */
.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

/* Прячем дефолтный чекбокс */
.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Задний фон тумблера */
.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 34px;
}

/* Кругляшок внутри тумблера */
.theme-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

/* Цвет фона, когда чекбокс активен (акцентный цвет из таблицы) */
input:checked + .theme-slider {
    background-color: var(--accent-brand, #ca5038);
}

/* Смещение кругляшка при активации */
input:checked + .theme-slider:before {
    transform: translateX(24px);
}

/* Делаем этот пункт меню гибким, чтобы раздвинуть текст и тумблер */
.theme-menu-item {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    padding-right: 15px !important; /* Отступ справа для тумблера */
}

/* Убираем эффекты кликабельности со всей строки, так как кликать нужно на тумблер */
.theme-menu-item:hover {
    background-color: transparent !important;
    cursor: default;
}

/* Группируем иконку луны и текст, как в остальных кнопках */
.theme-menu-left {
    display: flex;
    align-items: center;
    gap: 12px; /* Стандартный отступ между иконкой и текстом */
}

/* Делаем тумблер чуть компактнее, чтобы он не распирал меню */
.theme-menu-item .theme-toggle-switch {
    transform: scale(0.8);
    margin: 0;
}

/* =========================================
   ПОВЕДЕНИЕ ПРИ СВЕРНУТОМ МЕНЮ
   (Предполагается, что сайдбар сжимается классом .collapsed или .close)
   ========================================= */
.sidebar.collapsed .theme-menu-item,
.sidebar.close .theme-menu-item {
    justify-content: center !important;
    padding-right: 0 !important;
}

/* Прячем текст и тумблер в свернутом режиме, оставляя только иконку */
.sidebar.collapsed .theme-menu-left span,
.sidebar.collapsed .theme-toggle-switch,
.sidebar.close .theme-menu-left span,
.sidebar.close .theme-toggle-switch {
    display: none; 
}

/* Красивая карточка для настройки в профиле */
.profile-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-surface, #27272a);
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-main);
}

/* Текстовая часть слева */
.profile-setting-item .setting-info h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.profile-setting-item .setting-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* Убираем масштабирование, так как в профиле места много */
.profile-setting-item .theme-toggle-switch {
    transform: scale(1); 
    margin: 0;
}

.auth-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px; /* Расстояние между текстом и тумблером */
    z-index: 100;
}

.auth-theme-toggle .theme-label {
    font-size: 14px;
    color: var(--text-muted); /* Используем цвет текста из твоей темы */
    font-weight: 500;
}

/* Делаем сам тумблер чуть компактнее, чтобы он не выглядел огромным */
.auth-theme-toggle .theme-toggle-switch {
    transform: scale(0.85);
    margin: 0;
}