/* Тема сайта: тёмная по умолчанию, светлая через html[data-theme="light"]. */

:root {
  color-scheme: dark;
  --ink-950: #0b0f14;
  --ink-900: #111821;
  --ink-850: #151d28;
  --ink-800: #1a2330;
  --ink-700: #243041;
  --ink-600: #2d3d52;
  --accent: #3ecf8e;
  --accent-dim: rgba(62, 207, 142, 0.12);
  --text-primary: #f1f5f9;
  --text-heading: #ffffff;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --text-soft: #cbd5e1;
  --body-bg:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(62, 207, 142, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(56, 120, 180, 0.08), transparent 50%),
    var(--ink-950);
  --card-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --toggle-track: rgba(26, 35, 48, 0.92);
  --toggle-border: rgba(36, 48, 65, 0.9);
  --toggle-knob: #3ecf8e;
  --toggle-icon: #94a3b8;
  --toggle-icon-active: #0b0f14;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink-950: #e8eef5;
  --ink-900: #ffffff;
  --ink-850: #f3f6fa;
  --ink-800: #eef2f7;
  --ink-700: #d5dee9;
  --ink-600: #c2cedc;
  --accent: #1f9d68;
  --accent-dim: rgba(31, 157, 104, 0.14);
  --text-primary: #0f172a;
  --text-heading: #0b1220;
  --text-muted: #475569;
  --text-faint: #64748b;
  --text-soft: #334155;
  --body-bg:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(31, 157, 104, 0.12), transparent 55%),
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(59, 130, 246, 0.08), transparent 50%),
    #f3f6fa;
  --card-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  --toggle-track: rgba(255, 255, 255, 0.95);
  --toggle-border: rgba(203, 213, 225, 0.95);
  --toggle-knob: #1f9d68;
  --toggle-icon: #64748b;
  --toggle-icon-active: #ffffff;
}

html {
  font-family: "PT Sans Caption", sans-serif;
  font-synthesis: none;
}

html,
body {
  background: var(--body-bg) !important;
  background-attachment: fixed;
}

body,
button,
input,
select,
textarea,
optgroup {
  font-family: "PT Sans Caption", sans-serif;
}

.font-sans {
  font-family: "PT Sans Caption", sans-serif !important;
}

/* Текст ink-950 на зелёных кнопках должен оставаться тёмным */
html[data-theme="light"] .text-ink-950 {
  color: #0b1220 !important;
}
html[data-theme="light"] .hover\:text-ink-950:hover {
  color: #0b1220 !important;
}

/* Датапикер (отдельный CSS с тёмными хардкодами) */
html[data-theme="light"] .wb-dt-text,
html[data-theme="light"] .wb-dt-time select,
html[data-theme="light"] .wb-dt-nav select,
html[data-theme="light"] .wb-dt-nav button {
  border-color: var(--ink-600);
  background: var(--ink-850);
  color: var(--text-primary);
}
html[data-theme="light"] .wb-dt-cal {
  color: var(--accent);
  background: var(--accent-dim);
}
html[data-theme="light"] .wb-dt-cal:hover {
  color: #0b1220;
  background: var(--accent);
}
html[data-theme="light"] .wb-dt-sep {
  color: var(--text-faint);
}
html[data-theme="light"] .wb-dt-popup {
  border-color: var(--ink-700);
  background: var(--ink-900);
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
}
html[data-theme="light"] .wb-dt-week {
  color: var(--text-faint);
}
html[data-theme="light"] .wb-dt-day {
  color: var(--text-primary);
}
html[data-theme="light"] .wb-dt-day:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
html[data-theme="light"] .wb-dt-day.is-muted {
  color: var(--text-faint);
}
html[data-theme="light"] .wb-dt-day.is-selected {
  background: var(--accent);
  color: #0b1220;
}
html[data-theme="light"] .wb-dt-clear {
  border-color: var(--ink-700);
  color: var(--text-muted);
}
html[data-theme="light"] .wb-dt-clear:hover {
  color: var(--text-primary);
  border-color: var(--ink-600);
}

/* Частые Tailwind-классы текста → семантические токены */
html[data-theme="light"] .text-white {
  color: var(--text-heading) !important;
}
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .text-slate-300 {
  color: var(--text-soft) !important;
}
html[data-theme="light"] .text-slate-400 {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .text-slate-500 {
  color: var(--text-faint) !important;
}
html[data-theme="light"] .placeholder\:text-slate-500::placeholder {
  color: var(--text-faint) !important;
}

/* Карточки на slate без ink (maintenance / forbidden) */
html[data-theme="light"] .bg-slate-900\/70,
html[data-theme="light"] .bg-slate-900\/80 {
  background-color: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="light"] .border-slate-700 {
  border-color: var(--ink-700) !important;
}

/* Акцент на светлой теме чуть насыщеннее; текст на зелёной кнопке остаётся тёмным */
html[data-theme="light"] .text-accent {
  color: var(--accent) !important;
}
html[data-theme="light"] .border-accent\/40,
html[data-theme="light"] .border-accent\/50 {
  border-color: rgba(31, 157, 104, 0.45) !important;
}
html[data-theme="light"] .bg-accent\/15,
html[data-theme="light"] .bg-accent-dim {
  background-color: var(--accent-dim) !important;
}
html[data-theme="light"] .hover\:text-accent:hover {
  color: var(--accent) !important;
}
html[data-theme="light"] .hover\:border-accent\/40:hover {
  border-color: rgba(31, 157, 104, 0.45) !important;
}
html[data-theme="light"] .hover\:bg-accent:hover {
  background-color: var(--accent) !important;
}
html[data-theme="light"] .group:hover .group-hover\:text-accent {
  color: var(--accent) !important;
}

/* Красные ошибки читаемее на светлом фоне */
html[data-theme="light"] .text-red-300 {
  color: #b91c1c !important;
}
html[data-theme="light"] .border-red-500\/30 {
  border-color: rgba(185, 28, 28, 0.35) !important;
}
html[data-theme="light"] .bg-red-500\/10 {
  background-color: rgba(185, 28, 28, 0.08) !important;
}

html[data-theme="light"] .role-btn:hover {
  box-shadow: var(--card-shadow), 0 0 0 1px rgba(31, 157, 104, 0.28);
}

/* --- Переключатель --- */
.wb-theme-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 9999px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-track);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wb-theme-toggle:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(62, 207, 142, 0.25);
}
.wb-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.wb-theme-toggle__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: var(--toggle-icon);
  transition: color 0.2s ease;
}
.wb-theme-toggle__opt svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wb-theme-toggle__knob {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--toggle-knob);
  box-shadow: 0 4px 12px rgba(62, 207, 142, 0.35);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html[data-theme="light"] .wb-theme-toggle__knob {
  transform: translateX(2.15rem);
  box-shadow: 0 4px 12px rgba(31, 157, 104, 0.35);
}
.wb-theme-toggle[data-mode="dark"] .wb-theme-toggle__opt[data-mode="dark"],
.wb-theme-toggle[data-mode="light"] .wb-theme-toggle__opt[data-mode="light"] {
  color: var(--toggle-icon-active);
}