body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f7f6; padding: 20px; }
.container { max-width: 1200px; margin: 0 auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: #f8f9fa; color: #333; }

/* Цветовая логика уровней */
.level-low { background-color: #ffcccc; color: #990000; font-weight: bold; } /* Ниже базы/База */
.level-high { background-color: #ccffcc; color: #006600; font-weight: bold; } /* Высокий/Эксперт */
.warning-expiry { background-color: #cce5ff; color: #004085; border: 2px solid #004085; } /* 3 месяца до конца */

button { cursor: pointer; padding: 6px 12px; border: none; border-radius: 4px; background: #007bff; color: white; }
button:hover { background: #0056b3; }

/* Модальное окно */
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: white; margin: 10% auto; padding: 20px; width: 60%; border-radius: 8px; }
.close { float: right; font-size: 28px; cursor: pointer; }
.warning-expiry { 
    background-color: #007bff !important; 
    color: white !important; 
    font-weight: bold;
}
.level-low { background-color: #ffcccc; color: #900; }
.level-high { background-color: #ccffcc; color: #006600; }

/* Стили для таблицы внутри модального окна */
.history-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.history-table th, .history-table td { border: 1px solid #eee; padding: 8px; font-size: 0.9em; }
.export-btn {
    background-color: #27ae60;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin-bottom: 20px;
    font-weight: bold;
    cursor: pointer;
}

.export-btn:hover {
    background-color: #219150;
}

/* Принудительно задаем цвета для корректного экспорта */
.level-low { background-color: #ffcccc !important; }
.level-high { background-color: #ccffcc !important; }
.warning-expiry { background-color: #cce5ff !important; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}
.stat-card {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 5px solid #007bff;
    text-align: center;
}
.stat-card h3 { margin: 0; font-size: 14px; color: #666; }
.stat-card p { margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #333; }
.stat-red { border-left-color: #e74c3c; }
.stat-green { border-left-color: #27ae60; }
.stat-blue { border-left-color: #007bff; }

th { cursor: pointer; position: relative; }
th:hover { background-color: #f0f0f0; }