/* status-cards.css — JPG + ГРАДИЕНТ затемнения */
.status-card.status-v_zale,
body.bg-dark .status-card.status-v_zale,
body.bg-light .status-card.status-v_zale {
    background-image: 
        /* 🔥 ТЕМНЫЙ ГРАДИЕНТ НАД картинкой */
        linear-gradient( rgba(245,245,247,0.7), rgba(255,255,255,0.4)), 
    /*     ✅ КАРТИНКА */
        url('../images/v-zale-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    backdrop-filter: blur(80px);
    border-left: 5px solid #28a745 !important;
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
    min-height: 160px !important;
    position: relative !important;
    overflow: hidden !important;
}

body.bg-light .status-card.status-v_zale {
    background-image:
        /* 🔥 ТЕМНЫЙ ГРАДИЕНТ */
        linear-gradient(rgba(245,245,247,0.7), rgba(255,255,255,0.4)) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* ✅ ЭФФЕКТ СТЕКЛА: размывает фон за карточкой + картинку ниже */
    backdrop-filter: blur(12px) !important;
    border-left: 5px solid #28a745 !important;
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
    min-height: 160px !important;
    position: relative !important;
    overflow: hidden !important;
}

body.bg-light .status-card.status-v_zale::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* ✅ РАЗМЫТАЯ КАРТИНКА */
    background-image: url('../images/v-zale-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(16px) !important; /* Сила размытия картинки */
    z-index: -1 !important;
}
.status-card.status-vixod,
body.bg-dark .status-card.status-vixod,
body.bg-light .status-card.status-vixod {
    background-image: 
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)), 
        url('../images/vixod-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-left: 5px solid #fd7e14 !important;
    color: #cdcdcd !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
    min-height: 80px !important;
    position: relative !important;
    overflow: hidden !important;
}

.status-card.status-obed,
body.bg-dark .status-card.status-obed,
body.bg-light .status-card.status-obed {
    background-image: 
        linear-gradient(rgba(253, 126, 20, 0.6), rgba(253, 126, 20, 0.6)),
        url('../images/obed-bg.gif') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-left: 5px solid #ffc107 !important;
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
    min-height: 140px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover эффект */
.status-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4) !important;
}

/* 🔒 ЗАЩИТА от тем */
body.bg-dark .status-card,
body.bg-light .status-card {
    background: inherit !important;
}
/* ✅ СКЛАД - визуальное разделение */
.warehouse-section {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 12px !important;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25);
}

.warehouse-section .status-unload {
    background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
    border: 2px solid #e0a800 !important;
    transform: scale(1.05);
}

/* Анимация блока разгрузки */
.alert-warning.animate__pulse {
    border-left: 5px solid #ffc107;
    animation-duration: 2s;
}

.warehouse-bar {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
}

.klad-card {
    transition: all 0.3s ease;
}

.klad-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4) !important;
}

.fs-7 { font-size: 0.75rem !important; }
.warehouse-bar {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    padding: 1.25rem 1.5rem !important;
}

.warehouse-bar > div {
    justify-content: flex-start !important;  /* ✅ ЛЕВАЯ сторона */
    gap: 1rem !important;
}

.klad-card {
    margin-right: auto !important;  /* ✅ Не растягивается вправо */
    flex-shrink: 0 !important;
}

body.bg-dark .warehouse-bar {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border-bottom-color: #f39c12 !important;
}

body.bg-dark .klad-card {
    background: #2c3e50 !important;      /* Темно-синий вместо белого */
    border-color: #f39c12 !important;    /* Оранжевая рамка */
    color: #ecf0f1 !important;          /* Светлый текст */
}

body.bg-dark .klad-card small {
    color: #bdc3c7 !important;          /* Серый текст */
}

body.bg-dark .klad-card .badge {
    color: #2c3e50 !important;          /* Темный текст на светлых бейджах */
}

body.bg-dark .klad-card .badge.bg-success {
    background: #27ae60 !important;
    color: white !important;
}

body.bg-dark .klad-card .badge.bg-warning {
    background: #f39c12 !important;
    color: white !important;
}

body.bg-dark .klad-card .badge.bg-danger {
    background: #e74c3c !important;
    color: white !important;
}

/* Таймер разгрузки в темной теме */
body.bg-dark .klad-card small.text-warning {
    color: #f1c40f !important;
}

🌙 АДАПТАЦИЯ БЛОКА "ВЫХОДНОЙ" под темную тему
✅ ДОБАВЬ CSS (в конец status-cards.css):
css
/* 🌙 ТЕМНАЯ ТЕМА - БЛОК ВЫХОДНОЙ */
body.bg-dark #offShiftList .list-group-item {
    background: #2c3e50 !important;           /* Темный фон */
    border-color: #34495e !important;         /* Темная граница */
    color: #ecf0f1 !important;               /* Светлый текст */
}

body.bg-dark #offShiftList {
    background: #34495e;                      /* Фон списка */
    border-radius: 8px;
    border: 1px solid #2c3e50;
}

body.bg-dark #offShiftList .text-muted {
    color: #bdc3c7 !important;               /* Серый для ФИО */
}

body.bg-dark #offShiftList .text-info {
    color: #3498db !important;               /* Голубой для ролей */
}

body.bg-dark #offShiftList .badge {
    background: #7f8c8d !important;          /* Темно-серый бейдж */
    color: #ecf0f1 !important;               /* Светлый текст */
    border: 1px solid #95a5a6;
}

body.bg-dark #offShiftList .badge.bg-secondary {
    background: #7f8c8d !important;
    color: #ecf0f1 !important;
}

/* Hover эффект для темной темы */
body.bg-dark #offShiftList .list-group-item:hover {
    background: #34495e !important;
    border-color: #f39c12 !important;        /* Оранжевый акцент */
    transform: translateX(4px);
}

/* Заголовок "Выходной" в темной теме */
body.bg-dark h4.text-secondary {
    color: #bdc3c7 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

body.bg-dark h4.text-secondary i {
    color: #95a5a6 !important;
}

body.bg-light h4.text-success {
    color: #28a745 !important;
    text-shadow: 0 1px 2px rgba(40, 167, 69, 0.3);
}

body.bg-dark h4.text-success {
    color: #2ecc71 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

body.bg-light h4.text-secondary {
    color: #6c757d !important;
}

body.bg-dark h4.text-secondary {
    color: #bdc3c7 !important;
}


✅ ФИКС: Белый фон таблицы в темной теме
Проблема: Bootstrap .table по умолчанию имеет background: white

🔧 ДОБАВЬ CSS (в конец status-cards.css):
css
/* 🌙 ТЕМНАЯ ТЕМА - ТАБЛИЦЫ */
body.bg-dark .table {
    background: #2c3e50 !important;
    color: #ecf0f1 !important;
}

body.bg-dark .table thead th {
    background: #34495e !important;
    color: #ecf0f1 !important;
    border-color: #4a5568 !important;
}

body.bg-dark .table tbody td {
    background: #2c3e50 !important;
    color: #bdc3c7 !important;
    border-color: #4a5568 !important;
}

body.bg-dark .table-hover tbody tr:hover {
    background: #34495e !important;
    color: #ecf0f1 !important;
}

/* НЕДЕЛЬНЫЙ ОТЧЕТ - специальная таблица */
body.bg-dark #weeklyReport .table {
    background: #1a202c !important;
    border: 1px solid #4a5568;
}

body.bg-dark #weeklyReport .table-dark {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

body.bg-dark #weeklyReport .text-danger,
body.bg-dark #weeklyReport .text-warning,
body.bg-dark #weeklyReport .text-success {
    color: inherit !important;
    font-weight: bold !important;
}

body.bg-dark #weeklyReport .badge.bg-danger {
    background: #e53e3e !important;
    color: white !important;
}

/* 🌙 ТЕМНАЯ ТЕМА - БЛОК ВЫХОДНОЙ (усиленный фикс) */
body.bg-dark #offShiftList {
    background: #2c3e50 !important;          /* Темный фон списка */
    border: 1px solid #34495e !important;
    border-radius: 8px !important;
    color: #ecf0f1 !important;
}

body.bg-dark #offShiftList .list-group-item {
    background: transparent !important;      /* Прозрачный фон элементов */
    border-color: #34495e !important;        /* Темная граница */
    color: #ecf0f1 !important;
}

body.bg-dark #offShiftList .list-group-item:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

body.bg-dark #offShiftList .list-group-item:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
.timeline-svg { 
    background: var(--bs-card-bg); 
    border-radius: 8px; 
    overflow: visible;
}
.timeline-legend { 
    font-size: 13px; margin-top: 8px; 
}
.legend-item { 
    margin-right: 20px; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
}