/* ─── Базовые стили ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --surface-bg: rgba(255, 255, 255, 0.97);
  --surface-border: rgba(15, 23, 42, 0.08);
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #dc2626;
}

body[data-theme='dark'] {
  --surface-bg: rgba(30, 41, 59, 0.95);
  --surface-border: rgba(255, 255, 255, 0.14);
  --text-primary: #ffffff;
  --text-secondary: #f3f4f6;
  --error-bg: rgba(127, 29, 29, 0.35);
  --error-border: rgba(248, 113, 113, 0.4);
  --error-text: #fecaca;
}

/* ─── Фон дашборда — тот же фон что и на странице входа ─────────────────── */
#dashboard {
  background: url('/bg.jpg') center/cover no-repeat fixed;
  background-color: #1e3a5f;
}

/* Полупрозрачный контент-слой поверх фона */
#dashboard > .filters-bar,
#dashboard > main {
  /* без лишних backdrop-filter, чтобы не создавать stacking context */
}

/* ─── Строка фильтров — поверх всего, без backdrop (важно для z-index) ──── */
.filters-bar {
  position: relative;
  z-index: 100;
  background: var(--surface-bg) !important;
  border-bottom: 1px solid var(--surface-border);
}

/* ─── Дропдаун типов и периода — поверх всего ───────────────────────────── */
#types-dropdown,
#period-dropdown,
#people-dropdown {
  z-index: 9999 !important;
}

/* ─── Карточки поверх фона ───────────────────────────────────────────────── */
#data-content .bg-white,
#data-content .kpi-card {
  background: var(--surface-bg) !important;
  border-color: var(--surface-border) !important;
}

/* Тёмная тема: весь текст светлый, без серых «сливающихся» оттенков */
body[data-theme='dark'] #dashboard,
body[data-theme='dark'] #data-content,
body[data-theme='dark'] .filters-bar {
  color: var(--text-primary) !important;
}

body[data-theme='dark'] #data-content .text-gray-800,
body[data-theme='dark'] #data-content .text-gray-700,
body[data-theme='dark'] #data-content .text-gray-600,
body[data-theme='dark'] #data-content .text-gray-500,
body[data-theme='dark'] #data-content .text-gray-400,
body[data-theme='dark'] .filters-bar .text-gray-500,
body[data-theme='dark'] .filters-bar .text-gray-400 {
  color: var(--text-secondary) !important;
}

body[data-theme='dark'] #data-content h3,
body[data-theme='dark'] #data-content h4,
body[data-theme='dark'] #data-content th,
body[data-theme='dark'] #data-content td,
body[data-theme='dark'] #data-content p,
body[data-theme='dark'] #data-content span,
body[data-theme='dark'] #data-content label,
body[data-theme='dark'] #tasks-tbody td,
body[data-theme='dark'] #data-content thead th {
  color: #ffffff !important;
}

body[data-theme='dark'] #data-content a {
  color: #93c5fd !important;
}

body[data-theme='dark'] #data-content .text-green-600 { color: #4ade80 !important; }
body[data-theme='dark'] #data-content .text-orange-500 { color: #fb923c !important; }
body[data-theme='dark'] #data-content .text-red-600,
body[data-theme='dark'] #data-content .text-red-500 { color: #f87171 !important; }
body[data-theme='dark'] #data-content .text-blue-600 { color: #60a5fa !important; }

body[data-theme='dark'] #data-content thead,
body[data-theme='dark'] #data-content .bg-gray-50 {
  background: rgba(15, 23, 42, 0.85) !important;
}

body[data-theme='dark'] #tasks-tbody tr:hover {
  background: rgba(55, 65, 81, 0.55) !important;
}

body[data-theme='dark'] #loader .text-gray-500 {
  color: #f3f4f6 !important;
}

/* Лоадер */
#loader {
  background: transparent;
}

/* ─── Просроченные строки в таблице ─────────────────────────────────────── */
.overdue-row {
  background: #fff5f5 !important;
  border-left: 3px solid #ef4444;
}
.overdue-row:hover {
  background: #fee2e2 !important;
}

body[data-theme='dark'] .overdue-row {
  background: rgba(127, 29, 29, 0.45) !important;
  border-left: 3px solid #f87171;
}
body[data-theme='dark'] .overdue-row:hover {
  background: rgba(153, 27, 27, 0.55) !important;
}

/* ─── KPI карточка просроченных — пульс при наличии ─────────────────────── */
@keyframes overdue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.overdue-pulse {
  animation: overdue-pulse 2s ease-in-out infinite;
  border-color: #fca5a5 !important;
}

/* ─── Фильтры select ─────────────────────────────────────────────────────── */
.filters-bar select,
#filter-role,
#filter-status,
#filter-group {
  background: var(--surface-bg);
  color: var(--text-primary);
  border-color: var(--surface-border);
}

body[data-theme='dark'] #period-btn,
body[data-theme='dark'] #people-btn,
body[data-theme='dark'] #period-dropdown,
body[data-theme='dark'] #people-dropdown,
body[data-theme='dark'] #date-from,
body[data-theme='dark'] #date-to,
body[data-theme='dark'] .filters-bar select,
body[data-theme='dark'] #filter-role,
body[data-theme='dark'] #filter-status,
body[data-theme='dark'] #filter-group {
  background: rgba(30, 41, 59, 0.98) !important;
  color: #ffffff !important;
  border-color: var(--surface-border) !important;
}

body[data-theme='dark'] #period-dropdown .period-preset,
body[data-theme='dark'] #people-dropdown label,
body[data-theme='dark'] #date-basis-hint {
  color: #ffffff !important;
}

body[data-theme='dark'] #period-dropdown .period-preset:hover,
body[data-theme='dark'] #people-dropdown label:hover {
  background: rgba(55, 65, 81, 0.7) !important;
}

body[data-theme='dark'] .filters-bar select option {
  background: #1e293b;
  color: #ffffff;
}

/* ─── Кнопки периода — оставляем для обратной совместимости ─────────────── */
.filter-days.active {
  background: #fff;
  color: #2563EB;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.filter-days {
  color: #6B7280;
  cursor: pointer;
}
.filter-days:hover:not(.active) {
  background: rgba(255,255,255,0.6);
  color: #374151;
}

/* ─── Бейджи ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-bot      { background: #EFF6FF; color: #2563EB; }
.badge-web      { background: #EEF2FF; color: #4F46E5; }
.badge-unknown  { background: #F3F4F6; color: #9CA3AF; }
.badge-new      { background: #EFF6FF; color: #3B82F6; }
.badge-inwork   { background: #FFF7ED; color: #EA580C; }
.badge-done     { background: #F0FDF4; color: #16A34A; }
.badge-rejected { background: #FEF2F2; color: #DC2626; }

/* ─── KPI карточки ───────────────────────────────────────────────────────── */
.kpi-card {
  transition: transform 0.15s, box-shadow 0.15s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

body[data-theme='dark'] .kpi-card:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

#error-block {
  background: var(--error-bg) !important;
  border-color: var(--error-border) !important;
  color: var(--error-text) !important;
}

.tab-btn {
  color: #6b7280;
  transition: all 0.15s ease;
}
.tab-btn:hover {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.tab-btn.active {
  background: #2563eb;
  color: #fff;
}

/* ─── Spinner ────────────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 0.8s linear infinite; }

/* ─── Таблица мобайл ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  table { font-size: 12px; }
  th, td { padding: 8px 10px; }
}