/* ========================================
   БАЗОВЫЕ СТИЛИ (reset, body, layout)
   ======================================== */

/* --- CSS-переменные (светлая тема по умолчанию) --- */
:root {
  /* Фоны */
  --bg-body: #f5f7fa;
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f9f9f9;
  --bg-disabled: #f0f0f0;
  --bg-selected: #fff9c4;
  --bg-tab: #f8f9fa;
  --bg-form: #fafbfc;
  --bg-bar: #ecf0f1;
  --bg-system-dropdown-hover: #f0f4ff;

  /* Текст */
  --text-primary: #2c3e50;
  --text-secondary: #95a5a6;
  --text-muted: #7f8c8d;
  --text-dark: #1a1a1a;
  --text-label: #555;
  --text-light: #666;
  --text-description: #666;
  --text-arrow: #7f8c8d;
  --text-white-90: rgba(255, 255, 255, 0.9);
  --text-white-95: rgba(255, 255, 255, 0.95);

  /* Бордюры */
  --border-light: #eee;
  --border-default: #e8e8e8;
  --border-input: #ddd;
  --border-divider: #e0e0e0;
  --border-form: #e9ecef;
  --border-kanban: #e0e0e0;
  --border-card: #e0e0e0;
  --border-dept: #e8e8e8;

  /* Акценты */
  --accent-yellow: #f1c40f;
  --accent-orange: #f39c12;
  --accent-yellow-hover: #e0af0d;

  /* Тени */
  --shadow-sm: rgba(0, 0, 0, 0.06);
  --shadow-md: rgba(0, 0, 0, 0.08);
  --shadow-default: rgba(0, 0, 0, 0.1);
  --shadow-hover: rgba(0, 0, 0, 0.15);
  --shadow-strong: rgba(0, 0, 0, 0.2);
  --shadow-modal: rgba(0, 0, 0, 0.5);
  --shadow-overlay: rgba(0, 0, 0, 0.2);
  --shadow-card-before: rgba(255, 255, 255, 0.15);

  /* Кнопки */
  --btn-view-bg: #f8f9fa;
  --btn-view-border: #ddd;
  --btn-view-hover-bg: #f1f1f1;
  --btn-cancel-bg: #95a5a6;
  --btn-cancel-hover-bg: #7f8c8d;
  --btn-archive-bg: #95a5a6;
  --btn-archive-hover-bg: #7f8c8d;

  /* Флеш-сообщения */
  --flash-info-bg: #d1ecf1;
  --flash-info-text: #0c5460;
  --flash-success-bg: #d4edda;
  --flash-success-text: #155724;
  --flash-warning-bg: #fff3cd;
  --flash-warning-text: #856404;
  --flash-error-bg: #f8d7da;
  --flash-error-text: #721c24;

  /* Сайдбар */
  --sidebar-bg: #ffffff;
  --sidebar-text: #2c3e50;
  --sidebar-title: #1a1a1a;
  --sidebar-toggle-bg: rgba(255, 255, 255, 0.3);
  --sidebar-toggle-hover-bg: rgba(255, 255, 255, 0.5);
  --sidebar-toggle-bar: #1a1a1a;
  --sidebar-hover-bg: #fef9e7;
  --sidebar-hover-border: #f9e79f;
  --sidebar-divider: #e8e8e8;
  --sidebar-logout-color: #e74c3c;
  --sidebar-logout-hover-bg: #ffeaea;
  --sidebar-logout-hover-border: #f5c6cb;
  --sidebar-logout-hover-color: #c0392b;
  --sidebar-scrollbar-thumb: #ddd;
  --sidebar-tooltip-bg: #2c3e50;
  --sidebar-tooltip-shadow: rgba(0, 0, 0, 0.2);

  /* Бейджи */
  --badge-tech-bg: #e8f5e9;
  --badge-tech-text: #2e7d32;
  --badge-system-bg: #f3e5f5;
  --badge-system-text: #7b1fa2;
  --badge-pnr-bg: #9b59b6;
  --badge-mount-bg: #1abc9c;
  --badge-prod-bg: #e67e22;
  --badge-role-tech-bg: #e3f2fd;
  --badge-role-tech-text: #1976d2;
  --badge-status-pending-bg: #fff3cd;
  --badge-status-pending-text: #856404;
  --badge-status-approved-bg: #d4edda;
  --badge-status-approved-text: #155724;
  --badge-status-rejected-bg: #f8d7da;
  --badge-status-rejected-text: #721c24;
  --badge-status-questioned-bg: #fff3cd;
  --badge-status-questioned-text: #8a6d0b;
  --badge-work-type-bg: #e0f7fa;
  --badge-work-type-text: #00838f;
  --badge-sys-bg: #ecf0f1;
  --badge-sys-text: #2c3e50;
  --badge-section-bg: #e8f4fd;
  --badge-section-text: #1a6fa0;
  --badge-service-bg: #e74c3c;
  --badge-service-text: #ffffff;

  /* Градиенты */
  --gradient-header: linear-gradient(135deg, #f1c40f, #f39c12);
  --gradient-avatar: linear-gradient(135deg, #f1c40f, #f39c12);

  /* Цвета действий */
  --color-success: #2ecc71;
  --color-success-hover: #27ae60;
  --color-danger: #e74c3c;
  --color-danger-hover: #c0392b;
  --color-warning: #f39c12;
  --color-warning-hover: #e67e22;
  --color-info: #3498db;
  --color-info-hover: #2980b9;

  /* Кнопки действий */
  --btn-add-bg: #2ecc71;
  --btn-add-hover: #27ae60;
  --btn-edit-bg: #f39c12;
  --btn-edit-hover: #e67e22;
  --btn-delete-bg: #e74c3c;
  --btn-delete-hover: #c0392b;
  --btn-save-bg: #2ecc71;
  --btn-save-hover: #27ae60;
  --btn-approve-bg: #27ae60;
  --btn-approve-hover: #219a52;
  --btn-reject-bg: #c0392b;
  --btn-reject-hover: #a93226;

  /* Приоритеты задач */
  --priority-critical: #e74c3c;
  --priority-high: #f39c12;
  --priority-medium: #3498db;
  --priority-low: #95a5a6;

  /* Градиенты карточек */
  --gradient-hours: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-report: linear-gradient(135deg, #11998e, #38ef7d);

  /* Бейджи ролей */
  --badge-role-admin-bg: #fee;
  --badge-role-admin-text: #c0392b;
  --badge-role-head-bg: #fff8e1;
  --badge-role-head-text: #f39c12;
  --badge-role-worker-bg: #e8f5e9;
  --badge-role-worker-text: #27ae60;

  /* Статистика */
  --stat-card-bg: #f8f9fa;
  --stat-card-value: #2c3e50;
  --stat-card-label: #7f8c8d;

  /* Формы редактирования */
  --edit-form-bg: #f8f9fa;
  --edit-form-border: #e9ecef;

  /* Аватар */
  --avatar-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Регистрация */
  --btn-register-bg: #27ae60;
  --btn-register-hover: #229954;
  --login-link-color: #3498db;

  /* Аудит */
  --audit-entry-bg: #ffffff;
  --audit-entry-border: #e0e0e0;
  --audit-details-bg: #f8f9fa;
  --audit-change-key: #2c3e50;
  --audit-change-old: #e74c3c;
  --audit-change-new: #2ecc71;
  --audit-user-color: #2c3e50;
  --audit-time-color: #95a5a6;
  --audit-footer-color: #95a5a6;
  --audit-empty-color: #95a5a6;
  --audit-stat-color: #7f8c8d;
  --audit-stat-strong: #2c3e50;

  /* Пагинация */
  --page-link-border: #ddd;
  --page-link-color: #3498db;
  --page-link-hover-bg: #f0f0f0;
  --page-link-active-bg: #3498db;
  --page-link-active-color: #ffffff;

  /* Просроченные задачи */
  --overdue-bg: #fff5f5;
  --overdue-border: #e74c3c;

  /* Datepicker */
  --datepicker-selected-bg: #3498db;
  --datepicker-selected-color: #ffffff;

  /* Drag over */
  --drag-over-border: #2196f3;

  /* Просмотр отдела */
  --btn-view-dept-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Специфичные */
  --dept-status-active-bg: #e8f5e9;
  --dept-status-active-text: #2e7d32;
  --dept-status-inactive-bg: #fce4ec;
  --dept-status-inactive-text: #c62828;
  --option-selected-bg: #e3f2fd;
  --option-selected-text: #1976d2;
  --drag-over-bg: #e3f2fd;
  --login-input-focus-shadow: rgba(241, 196, 15, 0.2);
  --kanban-empty-text: #95a5a6;
}

/* --- Тёмная тема --- */
[data-theme="dark"] {
  /* Фоны */
  --bg-body: #0f1117;
  --bg-card: #1a1f2e;
  --bg-header: #1e2433;
  --bg-input: #242837;
  --bg-hover: #252b3b;
  --bg-disabled: #2a2f3e;
  --bg-selected: #3d3520;
  --bg-tab: #1e2433;
  --bg-form: #1e2433;
  --bg-bar: #2a2f3e;
  --bg-system-dropdown-hover: #1e2a3e;

  /* Текст */
  --text-primary: #e4e6eb;
  --text-secondary: #b0b3b8;
  --text-muted: #8a8d91;
  --text-dark: #e4e6eb;
  --text-label: #b0b3b8;
  --text-light: #b0b3b8;
  --text-description: #8a8d91;
  --text-arrow: #8a8d91;
  --text-white-90: rgba(255, 255, 255, 0.9);
  --text-white-95: rgba(255, 255, 255, 0.95);

  /* Бордюры */
  --border-light: #2d333b;
  --border-default: #373e47;
  --border-input: #444c56;
  --border-divider: #373e47;
  --border-form: #444c56;
  --border-kanban: #373e47;
  --border-card: #373e47;
  --border-dept: #373e47;

  /* Акценты */
  --accent-yellow: #ffd43b;
  --accent-orange: #e8a008;
  --accent-yellow-hover: #ffc107;

  /* Тени */
  --shadow-sm: rgba(0, 0, 0, 0.3);
  --shadow-md: rgba(0, 0, 0, 0.4);
  --shadow-default: rgba(0, 0, 0, 0.5);
  --shadow-hover: rgba(0, 0, 0, 0.6);
  --shadow-strong: rgba(0, 0, 0, 0.7);
  --shadow-modal: rgba(0, 0, 0, 0.7);
  --shadow-overlay: rgba(0, 0, 0, 0.6);
  --shadow-card-before: rgba(255, 255, 255, 0.05);

  /* Кнопки */
  --btn-view-bg: #2d333b;
  --btn-view-border: #444c56;
  --btn-view-hover-bg: #373e47;
  --btn-cancel-bg: #4a5568;
  --btn-cancel-hover-bg: #5a6577;
  --btn-archive-bg: #4a5568;
  --btn-archive-hover-bg: #5a6577;

  /* Флеш-сообщения */
  --flash-info-bg: #0c3547;
  --flash-info-text: #7fcfed;
  --flash-success-bg: #1a3d2a;
  --flash-success-text: #81c784;
  --flash-warning-bg: #3d3520;
  --flash-warning-text: #ffd54f;
  --flash-error-bg: #3d1a1e;
  --flash-error-text: #ef9a9a;

  /* Сайдбар */
  --sidebar-bg: #1a1f2e;
  --sidebar-text: #e4e6eb;
  --sidebar-title: #e4e6eb;
  --sidebar-toggle-bg: rgba(255, 255, 255, 0.15);
  --sidebar-toggle-hover-bg: rgba(255, 255, 255, 0.25);
  --sidebar-toggle-bar: #e4e6eb;
  --sidebar-hover-bg: #2a2520;
  --sidebar-hover-border: #3d3525;
  --sidebar-divider: #373e47;
  --sidebar-logout-color: #ef5350;
  --sidebar-logout-hover-bg: #3d1a1e;
  --sidebar-logout-hover-border: #5c2226;
  --sidebar-logout-hover-color: #ef5350;
  --sidebar-scrollbar-thumb: #444c56;
  --sidebar-tooltip-bg: #373e47;
  --sidebar-tooltip-shadow: rgba(0, 0, 0, 0.5);

  /* Бейджи */
  --badge-tech-bg: #1a3d2a;
  --badge-tech-text: #81c784;
  --badge-system-bg: #3d1f4a;
  --badge-system-text: #ce93d8;
  --badge-pnr-bg: #7b1fa2;
  --badge-mount-bg: #00897b;
  --badge-prod-bg: #d84315;
  --badge-role-tech-bg: #1a3a5c;
  --badge-role-tech-text: #64b5f6;
  --badge-status-pending-bg: #3d3520;
  --badge-status-pending-text: #ffd54f;
  --badge-status-approved-bg: #1a3d2a;
  --badge-status-approved-text: #81c784;
  --badge-status-rejected-bg: #3d1a1e;
  --badge-status-rejected-text: #ef9a9a;
  --badge-status-questioned-bg: #4a3a10;
  --badge-status-questioned-text: #ffca28;
  --badge-work-type-bg: #1a3d4a;
  --badge-work-type-text: #4dd0e1;
  --badge-sys-bg: #2a2f3e;
  --badge-sys-text: #e4e6eb;
  --badge-section-bg: #1a3a5c;
  --badge-section-text: #64b5f6;
  --badge-service-bg: #c62828;
  --badge-service-text: #ffffff;

  /* Градиенты */
  --gradient-header: linear-gradient(135deg, #c4a800, #d48b00);
  --gradient-avatar: linear-gradient(135deg, #c4a800, #d48b00);

  /* Цвета действий */
  --color-success: #4caf50;
  --color-success-hover: #66bb6a;
  --color-danger: #ef5350;
  --color-danger-hover: #f44336;
  --color-warning: #ffa726;
  --color-warning-hover: #fb8c00;
  --color-info: #42a5f5;
  --color-info-hover: #1e88e5;

  /* Кнопки действий */
  --btn-add-bg: #4caf50;
  --btn-add-hover: #66bb6a;
  --btn-edit-bg: #ffa726;
  --btn-edit-hover: #fb8c00;
  --btn-delete-bg: #ef5350;
  --btn-delete-hover: #f44336;
  --btn-save-bg: #4caf50;
  --btn-save-hover: #66bb6a;
  --btn-approve-bg: #4caf50;
  --btn-approve-hover: #388e3c;
  --btn-reject-bg: #d32f2f;
  --btn-reject-hover: #c62828;

  /* Приоритеты задач */
  --priority-critical: #ef5350;
  --priority-high: #ffa726;
  --priority-medium: #42a5f5;
  --priority-low: #78909c;

  /* Градиенты карточек */
  --gradient-hours: linear-gradient(135deg, #5c6bc0 0%, #8e24aa 100%);
  --gradient-report: linear-gradient(135deg, #00897b, #26a69a);

  /* Бейджи ролей */
  --badge-role-admin-bg: #3d1a1e;
  --badge-role-admin-text: #ef5350;
  --badge-role-head-bg: #3d3520;
  --badge-role-head-text: #ffd54f;
  --badge-role-worker-bg: #1a3d2a;
  --badge-role-worker-text: #81c784;

  /* Статистика */
  --stat-card-bg: #1e2433;
  --stat-card-value: #e4e6eb;
  --stat-card-label: #8a8d91;

  /* Формы редактирования */
  --edit-form-bg: #1e2433;
  --edit-form-border: #444c56;

  /* Аватар */
  --avatar-gradient: linear-gradient(135deg, #5c6bc0 0%, #8e24aa 100%);

  /* Регистрация */
  --btn-register-bg: #4caf50;
  --btn-register-hover: #388e3c;
  --login-link-color: #64b5f6;

  /* Аудит */
  --audit-entry-bg: #1a1f2e;
  --audit-entry-border: #373e47;
  --audit-details-bg: #252b3b;
  --audit-change-key: #e4e6eb;
  --audit-change-old: #ef5350;
  --audit-change-new: #81c784;
  --audit-user-color: #e4e6eb;
  --audit-time-color: #8a8d91;
  --audit-footer-color: #8a8d91;
  --audit-empty-color: #8a8d91;
  --audit-stat-color: #8a8d91;
  --audit-stat-strong: #e4e6eb;

  /* Пагинация */
  --page-link-border: #444c56;
  --page-link-color: #64b5f6;
  --page-link-hover-bg: #373e47;
  --page-link-active-bg: #42a5f5;
  --page-link-active-color: #ffffff;

  /* Просроченные задачи */
  --overdue-bg: #3d1a1e;
  --overdue-border: #ef5350;

  /* Datepicker */
  --datepicker-selected-bg: #42a5f5;
  --datepicker-selected-color: #ffffff;

  /* Drag over */
  --drag-over-border: #42a5f5;

  /* Просмотр отдела */
  --btn-view-dept-gradient: linear-gradient(135deg, #5c6bc0 0%, #8e24aa 100%);

  /* Специфичные */
  --dept-status-active-bg: #1a3d2a;
  --dept-status-active-text: #81c784;
  --dept-status-inactive-bg: #3d1a1e;
  --dept-status-inactive-text: #ef9a9a;
  --option-selected-bg: #1a3a5c;
  --option-selected-text: #64b5f6;
  --drag-over-bg: #1a3a5c;
  --login-input-focus-shadow: rgba(255, 212, 59, 0.3);
  --kanban-empty-text: #8a8d91;
}

/* --- Тёмная тема: Date inputs и календарь --- */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

[data-theme="dark"] input[type="date"]::-webkit-datetime-edit {
  color: var(--text-primary);
}

[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  background: var(--bg-input);
}

[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-text {
  color: var(--text-muted);
}

[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-month-field,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-day-field,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--text-primary);
}

[data-theme="dark"] input[type="date"]:focus::-webkit-datetime-edit {
  color: var(--accent-yellow);
}

[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background: var(--bg-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Для десктопа — flex layout чтобы контент двигался с меню */
@media (min-width: 769px) {
  body {
    flex-direction: row;
  }

  body > .main-content {
    flex: 1;
  }
}

/* Основной контент */
.main-content {
  margin-left: 290px;
  padding: 20px;
  min-height: 100vh;
  background: var(--bg-body);
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.sidebar-collapsed .main-content {
  margin-left: 102px;
}

/* Шапка страницы */
.page-header {
  background: var(--bg-header);
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 1px 4px var(--shadow-default);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.page-header h1 {
  color: var(--text-primary);
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Информация о пользователе в шапке (самый правый край) */
.header-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  order: 10;
}

/* Аватарка после текста */
.header-user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  overflow: hidden;
}

.header-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.header-user-role {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.header-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gradient-avatar);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.header-user-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.header-user-link:hover {
  background: var(--bg-hover);
}

@media (max-width: 768px) {
  /* На мобильных показываем только аватар-кнопку и колокольчик уведомлений.
     ФИО/должность скрываем, чтобы иконки всегда помещались справа сверху. */
  .header-user-details {
    display: none;
  }

  .header-user-info {
    gap: 4px;
    flex-shrink: 0;
  }

  .header-user-link {
    padding: 4px;
  }

  .header-user-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .notification-bell {
    font-size: 20px;
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-header {
    flex-wrap: nowrap;
  }
}

/* Уведомления */
.flash {
  padding: 12px 16px;
  margin-bottom: 15px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  font-size: 14px;
}

.flash-info {
  background: var(--flash-info-bg);
  color: var(--flash-info-text);
}

.flash-success {
  background: var(--flash-success-bg);
  color: var(--flash-success-text);
}

.flash-warning {
  background: var(--flash-warning-bg);
  color: var(--flash-warning-text);
}

.flash-error {
  background: var(--flash-error-bg);
  color: var(--flash-error-text);
}

.flash-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-left: auto;
  padding: 0 4px;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.flash-close:hover {
  opacity: 1;
}

/* Вспомогательные классы */
.section {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-archive-bg);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px var(--shadow-default);
  text-decoration: none;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: var(--btn-archive-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-hover);
}

.sort-indicator {
  margin-left: 6px;
  font-size: 0.9em;
  color: var(--text-primary);
}