@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body { font-family: 'Inter','Segoe UI',sans-serif; color: var(--text); transition: color .3s ease; }

/* ===== ТЕМЫ ===== */
body.theme-light {
  --text:#0f172a; --text-secondary:#475569; --muted:#64748b;
  --accent:#0d9488; --accent2:#0f766e; --accent-light:rgba(13,148,136,.12);
  --card:rgba(255,255,255,.55); --card-solid:rgba(255,255,255,.88);
  --border:rgba(148,163,184,.25); --input:rgba(255,255,255,.72);
  --shadow:rgba(15,23,42,.12); --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
  color-scheme: light;
}
body.theme-dark {
  --text:#e6edf5; --text-secondary:#cbd5e1; --muted:#9fb0c3;
  --accent:#2dd4bf; --accent2:#14b8a6; --accent-light:rgba(45,212,191,.14);
  --card:rgba(13,22,34,.5); --card-solid:rgba(13,22,34,.86);
  --border:rgba(148,163,184,.22); --input:rgba(23,34,49,.62);
  --shadow:rgba(0,0,0,.4); --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
  color-scheme: dark;
}
body.theme-light::before { content:''; position:fixed; inset:0; background:url('/consultant_zhk/static/bg-light.png') no-repeat center bottom / cover; z-index:-2; }
body.theme-dark::before  { content:''; position:fixed; inset:0; background:url('/consultant_zhk/static/bg-dark.png') no-repeat center bottom / cover; z-index:-2; }
body.theme-light::after { content:''; position:fixed; inset:0; background:rgba(255,255,255,.25); z-index:-1; }
body.theme-dark::after  { content:''; position:fixed; inset:0; background:rgba(2,6,23,.25); z-index:-1; }

/* ===== СТЕКЛЯННЫЕ КАРТОЧКИ / ФОРМЫ ===== */
body.theme-light .container, body.theme-dark .container {
  background: var(--card) !important;
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--border) !important; border-radius: 20px !important;
  box-shadow: 0 8px 32px var(--shadow) !important; color: var(--text) !important;
}
body.theme-light .modal-wrapper, body.theme-dark .modal-wrapper { background: var(--card-solid) !important; }

/* ===== ЭКРАН ВХОДА: центр + hover-кнопка ===== */
body.theme-light .container:has(.login-logo), body.theme-dark .container:has(.login-logo) {
  position: fixed !important; top: 50%; left: 50%; transform: translate(-50%,-50%);
  margin: 0 !important; width: min(92vw, 520px); max-height: 92vh; overflow-y: auto;
}
.login-sub { display: none !important; }
.login-logo { width: 230px; height: 78px; margin: 0 auto 18px; border-radius: 16px; background: rgba(255,255,255,.94); padding: 10px 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px var(--shadow); }
.login-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.theme-light .container:has(.login-logo) button, body.theme-dark .container:has(.login-logo) button {
  background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important;
}
body.theme-light .container:has(.login-logo) button:hover, body.theme-dark .container:has(.login-logo) button:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; color: #fff !important; border-color: transparent !important;
}

/* ===== ТЕКСТ, ПОЛЯ, КНОПКИ ===== */
body.theme-light h2, body.theme-dark h2 { color: var(--accent) !important; }
body.theme-light label, body.theme-dark label { color: var(--text-secondary) !important; }
.form-group label { text-transform: uppercase; font-size: 11px !important; letter-spacing: .8px; font-weight: 700 !important; }
body.theme-light input, body.theme-light select, body.theme-light textarea,
body.theme-dark input, body.theme-dark select, body.theme-dark textarea {
  background: var(--input) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.theme-light input:focus, body.theme-dark input:focus { border-color: var(--accent) !important; }
body.theme-light button, body.theme-dark button {
  border-radius: 12px !important; background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important; border: none !important; font-weight: 700 !important; transition: all .2s;
}
body.theme-light .btn-secondary, body.theme-dark .btn-secondary { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--border) !important; }
body.theme-light .btn-danger, body.theme-dark .btn-danger { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; }
body.theme-light .btn-outline, body.theme-dark .btn-outline { background: transparent !important; color: var(--accent) !important; border: 2px solid var(--accent) !important; }
body.theme-light .btn-yellow, body.theme-dark .btn-yellow { background: transparent !important; color: var(--warning) !important; border: 2px solid var(--warning) !important; }
body.theme-light button.theme-toggle, body.theme-dark button.theme-toggle { background: var(--card) !important; border: 1px solid var(--border) !important; }

/* ===== ПЕРЕКЛЮЧАТЕЛЬ ТЕМ ===== */
.theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 1100; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(12px); box-shadow: 0 4px 12px var(--shadow); }
.theme-toggle svg { width: 20px; height: 20px; fill: var(--text); }

/* ===== ВКЛАДКИ, ТАБЛИЦЫ, ПЛИТКИ ===== */
body.theme-light .tabs, body.theme-dark .tabs { border-bottom-color: var(--border) !important; }
body.theme-light .tab, body.theme-dark .tab { color: var(--muted) !important; }
body.theme-light .tab.active, body.theme-dark .tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
body.theme-light .data-table th, body.theme-dark .data-table th { background: var(--input) !important; color: var(--muted) !important; }
body.theme-light .data-table td, body.theme-dark .data-table td { border-bottom-color: var(--border) !important; color: var(--text) !important; }
body.theme-light .data-table tr:hover, body.theme-dark .data-table tr:hover { background: var(--accent-light) !important; }
body.theme-light .details-table, body.theme-dark .details-table { background: var(--input) !important; }
body.theme-light .details-table th, body.theme-light .details-table td,
body.theme-dark .details-table th, body.theme-dark .details-table td { border-color: var(--border) !important; color: var(--text) !important; }
body.theme-light .details-table th, body.theme-dark .details-table th { background: var(--card) !important; color: var(--muted) !important; }
body.theme-light .stat-card, body.theme-dark .stat-card { background: var(--accent-light) !important; border-color: var(--border) !important; }
body.theme-light .stat-card span, body.theme-dark .stat-card span { color: var(--accent) !important; }
body.theme-light .contact-item, body.theme-dark .contact-item { background: var(--input) !important; color: var(--text) !important; border-left-color: var(--accent) !important; }
body.theme-light .sub-chip, body.theme-dark .sub-chip { border-color: var(--accent) !important; color: var(--accent) !important; background: transparent !important; }
body.theme-light .sub-chip.active, body.theme-dark .sub-chip.active { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; color: #fff !important; }
body.theme-light .timer, body.theme-dark .timer { color: var(--text) !important; }
body.theme-light .history-item, body.theme-dark .history-item { border-bottom-color: var(--border) !important; color: var(--text) !important; }
body.theme-light #qrcode, body.theme-dark #qrcode { background: var(--input) !important; border-color: var(--border) !important; }
body.theme-dark #qr-backdrop { background: rgba(2,6,23,.85) !important; }
body.theme-light #qr-backdrop { background: rgba(255,255,255,.9) !important; }
body.theme-dark #modal-backdrop { background: rgba(2,6,23,.5) !important; }
body.theme-light #modal-backdrop { background: rgba(255,255,255,.5) !important; }

/* ===== СКРОЛЛБАРЫ ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Кнопки выбора режима экспорта — стекло, без яркого градиента */
body.theme-dark button.export-mode-btn, body.theme-light button.export-mode-btn {
  background: var(--card) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
body.theme-dark button.export-mode-btn:hover, body.theme-light button.export-mode-btn:hover {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
}
body.theme-dark button.export-mode-btn span:first-child, body.theme-light button.export-mode-btn span:first-child {
  color: var(--accent) !important;
}
body.theme-dark button.export-mode-btn span:last-child, body.theme-light button.export-mode-btn span:last-child {
  color: var(--muted) !important;
}

/* Белые inline-блоки внутри панелей (добавление пользователя/ЖК) -> стекло */
body.theme-dark div[style*="background:white"], body.theme-dark div[style*="background: white"],
body.theme-dark div[style*="background:#fff"], body.theme-dark div[style*="background: #fff"],
body.theme-dark div[style*="background:#ffffff"], body.theme-dark div[style*="background-color:white"],
body.theme-dark div[style*="background-color: white"] {
  background: var(--input) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 14px !important;
}
body.theme-light div[style*="background:white"], body.theme-light div[style*="background: white"],
body.theme-light div[style*="background:#fff"], body.theme-light div[style*="background: #fff"],
body.theme-light div[style*="background-color:white"], body.theme-light div[style*="background-color: white"] {
  background: var(--card) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 14px !important;
}


/* Статистика прошлых смен: без подложки, во всю ширину, читаемо */
body.theme-dark #past-shifts-list, body.theme-light #past-shifts-list {
  background: transparent !important; border: none !important; box-shadow: none !important;
  width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  overflow-x: hidden !important;
}
body.theme-dark .history-box, body.theme-light .history-box { background: transparent !important; border: none !important; }
body.theme-dark .history-item, body.theme-light .history-item { width: 100% !important; box-sizing: border-box !important; }
/* Inline-текста старых тёмно-серых цветов -> светлые в тёмной теме */
body.theme-dark [style*="color:#374151"], body.theme-dark [style*="color: #374151"],
body.theme-dark [style*="color:#4b5563"], body.theme-dark [style*="color: #4b5563"],
body.theme-dark [style*="color:#6b7280"], body.theme-dark [style*="color: #6b7280"] {
  color: var(--text) !important;
}

/* Обёртка списка прошлых смен: прозрачная (как в старом дизайне) */
body.theme-dark div:has(> #past-shifts-list), body.theme-light div:has(> #past-shifts-list) {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
/* Заголовки смен (b/h4/strong) — светлые в тёмной теме; кнопки и бейджи не трогаем */
body.theme-dark #past-shifts-list b, body.theme-dark #past-shifts-list h4, body.theme-dark #past-shifts-list strong {
  color: var(--text) !important;
}
body.theme-dark #past-shifts-list { color: var(--text) !important; }

/* Бейджи на светлых пилюлях: тёмный текст (фикс белого-на-белом) */
body.theme-dark [style*="background: #e5e7eb"], body.theme-dark [style*="background:#e5e7eb"] {
  color: #374151 !important;
}
/* Блоки добавления (пользователь/ЖК): без подложки. Точно: h4 + input внутри (статистику смен не трогает) */
body.theme-dark div:has(> h4[style*="margin-top:0"]):has(input),
body.theme-light div:has(> h4[style*="margin-top:0"]):has(input) {
  background: transparent !important; border: none !important; box-shadow: none !important;
}

/* Выпадающие подсказки (ЖК/адрес): плотный фон, читаемо в обеих темах */
body.theme-dark [id*="suggest"], body.theme-dark [class*="suggest"] {
  background: #0b1420 !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important; overflow: hidden;
}
body.theme-light [id*="suggest"], body.theme-light [class*="suggest"] {
  background: #ffffff !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.15) !important; overflow: hidden;
}
body.theme-dark [id*="suggest"] div:hover, body.theme-dark [class*="suggest"] div:hover,
body.theme-light [id*="suggest"] div:hover, body.theme-light [class*="suggest"] div:hover {
  background: var(--accent-light) !important; color: var(--text) !important;
}
body.theme-dark [id*="suggest"] div, body.theme-dark [class*="suggest"] div,
body.theme-light [id*="suggest"] div, body.theme-light [class*="suggest"] div {
  color: var(--text) !important;
}

/* Нативные виджеты (datalist-попапы, скроллбары) в схеме темы */
body.theme-dark { color-scheme: dark; }
body.theme-light { color-scheme: light; }
/* Инпуты с datalist: плотный фон, чтобы попап подсказок не просвечивал */
body.theme-dark input[list], body.theme-dark select {
  background: #172231 !important;
}
body.theme-light input[list], body.theme-light select {
  background: #ffffff !important;
}

/* Плотный холст страницы: кормит нативные попапы (datalist) и убирает прозрачность */
body.theme-dark { background-color: #0b1420; }
body.theme-light { background-color: #e9eef2; }

/* Пункты выпадающих списков на подложке var(--card): светлый текст в тёмной теме */
body.theme-dark div[style*="background:var(--card)"] div,
body.theme-dark div[style*="background: var(--card)"] div,
body.theme-dark div[style*="background:var(--card)"] option,
body.theme-dark div[style*="background: var(--card)"] option {
  color: var(--text) !important;
}
body.theme-dark div[style*="background:var(--card)"],
body.theme-dark div[style*="background: var(--card)"] {
  border: 1px solid var(--border) !important; border-radius: 10px !important;
}

/* Автокомплит ЖК: возвращаем подложку (пострадала от глобального sed), по темам */
body.theme-light .autocomplete-items { background: #ffffff !important; }
body.theme-light .autocomplete-items div { background: #ffffff !important; color: #111827 !important; }
body.theme-light .autocomplete-items div:hover { background: var(--accent-light) !important; }
body.theme-dark .autocomplete-items { background: #0b1420 !important; border: 1px solid var(--border) !important; }
body.theme-dark .autocomplete-items div { background: #0b1420 !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; }
body.theme-dark .autocomplete-items div:hover { background: var(--accent-light) !important; color: var(--text) !important; }