/* ============================================================================
   DarkSafe UI - Material 3 Expressive Redesign
   ============================================================================ */

/* ============================================================================
   Раздел 3: Типографика (Голос)
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* Раздел 6: Движение и Интерактивность (Душа) */
  --animation-spring: all 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
  --animation-press: transform 0.1s ease-out;
}

body {
  font-family: 'Roboto Flex', sans-serif;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  min-height: 100vh;
  display: flex;
}

/* ============================================================================
   Архитектура: Боковая панель + Основной контент
   ============================================================================ */
.sidebar {
  width: 80px;
  background-color: var(--md-sys-color-surface-container);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
  padding: 32px;
  overflow-y: auto;
}

.content-wrapper {
  max-width: 1440px;
  margin: 0 auto;
}

/* ============================================================================
   Компоненты: Навигация
   ============================================================================ */
.logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background-color: var(--md-sys-color-primary-container);
  border-radius: 16px;
  margin-bottom: 16px;
}

.logo .material-symbols-outlined {
  font-size: 28px;
  color: var(--md-sys-color-on-primary-container);
}

.nav-item {
  width: 64px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 9999px; /* Форма пилюли для контейнера */
  transition: var(--animation-spring);
}

.nav-item .material-symbols-outlined {
  font-size: 24px;
  transition: var(--animation-spring);
  font-variation-settings: 'FILL' 0; /* Раздел 7.2: Неактивное состояние */
}

.nav-item:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

.nav-item.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.nav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1; /* Раздел 7.2: Активное состояние */
}

/* ============================================================================
   Компоненты: Карточки (Раздел 1: Формы)
   ============================================================================ */
.card {
  background-color: var(--md-sys-color-surface-container);
  border-radius: 28px; /* 1.1: Крупный контейнер */
  padding: 24px;
  margin-bottom: 24px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 36px; /* 3.1: Headline */
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.page-header p {
  font-size: 16px; /* 3.1: Body */
  color: var(--md-sys-color-on-surface-variant); /* 3.2: Второстепенный текст */
}

/* ============================================================================
   Компоненты: Кнопки (Раздел 4.2)
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 16px; /* 1.1: Элемент среднего размера */
  font-size: 14px;
  font-weight: 600;
  transition: var(--animation-spring);
}

.btn:active {
  transform: scale(0.95); /* 6.2: Тактильная отдача */
  transition: var(--animation-press);
}

/* Filled Button */
.btn-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.btn-primary:hover {
  filter: brightness(1.1);
}

/* Error Button */
.btn-danger {
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
.btn-danger:hover {
  filter: brightness(1.1);
}

/* Tonal Button */
.btn-tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.btn-tonal:hover {
  filter: brightness(1.1);
}

/* ============================================================================
   Стили для index.html (Dashboard)
   ============================================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* "Героический Момент" (Раздел 8) */
.hero-card {
  grid-column: 1 / -1; /* Занимает всю ширину */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px;
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.hero-card h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
}

.hero-card .status-text {
  font-size: 48px; /* 3.1: Display */
  font-weight: 700;
}

.stat-card .stat-value {
  font-size: 36px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

.stat-card .stat-label {
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
}

.chart-container {
  height: 300px;
}

/* Material 3 Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  transition: var(--animation-spring);
  border-radius: 32px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 6px;
  bottom: 6px;
  background-color: var(--md-sys-color-outline);
  transition: var(--animation-spring);
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
input:checked + .slider:before {
  transform: translateX(20px);
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: var(--md-sys-color-on-primary);
}

/* ============================================================================
   Стили для test.html (Testing)
   ============================================================================ */
.segmented-buttons {
  display: inline-flex;
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: 9999px; /* 1.1: Мелкий элемент */
  padding: 4px;
  margin-bottom: 24px;
}

.segmented-btn {
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9999px;
  color: var(--md-sys-color-on-surface-variant);
  transition: var(--animation-spring);
}

.segmented-btn.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.code-block {
  background-color: var(--md-sys-color-surface);
  padding: 16px;
  border-radius: 16px;
  overflow-x: auto;
  margin-top: 16px;
}
.code-block pre {
  color: var(--md-sys-color-on-surface-variant);
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

.test-result {
  margin-top: 24px;
  padding: 24px;
  border-radius: 24px;
  border: 2px solid;
}
.test-result.success {
  background-color: rgba(103, 220, 123, 0.1);
  border-color: #67dc7b;
}
.test-result.error {
  background-color: var(--md-sys-color-error-container);
  border-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error-container);
}