/* ==========================================================================
   Teorema Admin Panel - Light & Dark Theme System
   ========================================================================== */

/* Smooth transitions for theme switching */
body, aside, header, main, div, input, select, textarea, button, table, tr, td, th {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* ==========================================================================
   1. Theme Toggle Button & Icon States
   ========================================================================== */
.theme-icon-light {
  display: none !important;
}
.theme-icon-dark {
  display: inline-flex !important;
}
.theme-toggle-btn {
  background-color: rgba(30, 41, 59, 0.7);
  border-color: rgba(51, 65, 85, 0.8);
  color: #cbd5e1;
}
.theme-toggle-btn:hover {
  background-color: rgba(51, 65, 85, 0.9);
  color: #ffffff;
  border-color: rgba(71, 85, 105, 1);
}

/* When light theme is active on html */
html.theme-light .theme-icon-dark {
  display: none !important;
}
html.theme-light .theme-icon-light {
  display: inline-flex !important;
}
html.theme-light .theme-toggle-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
html.theme-light .theme-toggle-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ==========================================================================
   2. Light Theme Overrides (html.theme-light)
   ========================================================================== */
html.theme-light {
  color-scheme: light;
}

html.theme-light body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Scrollbars in Light Mode */
html.theme-light ::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}
html.theme-light ::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 9999px;
}
html.theme-light ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Main Layout & Containers */
html.theme-light main {
  background-color: #f8fafc !important;
}

html.theme-light aside#mainSidebar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04);
}

html.theme-light header {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Background Utility Overrides */
html.theme-light .bg-slate-950 {
  background-color: #f8fafc !important;
}
html.theme-light .bg-slate-950\/20,
html.theme-light .bg-slate-950\/30,
html.theme-light .bg-slate-950\/40,
html.theme-light .bg-slate-950\/60,
html.theme-light .bg-slate-950\/70,
html.theme-light .bg-slate-950\/80 {
  background-color: #ffffff !important;
}

html.theme-light .bg-slate-900 {
  background-color: #ffffff !important;
}
html.theme-light .bg-slate-900\/20,
html.theme-light .bg-slate-900\/40,
html.theme-light .bg-slate-900\/50,
html.theme-light .bg-slate-900\/60,
html.theme-light .bg-slate-900\/80,
html.theme-light .bg-slate-900\/90 {
  background-color: #ffffff !important;
}

html.theme-light .bg-slate-800 {
  background-color: #f1f5f9 !important;
}
html.theme-light .bg-slate-800\/30,
html.theme-light .bg-slate-800\/40,
html.theme-light .bg-slate-800\/50,
html.theme-light .bg-slate-800\/60,
html.theme-light .bg-slate-800\/70,
html.theme-light .bg-slate-800\/80 {
  background-color: #f1f5f9 !important;
}

html.theme-light .bg-slate-700 {
  background-color: #e2e8f0 !important;
}

/* Borders */
html.theme-light .border-slate-800,
html.theme-light .border-slate-800\/60,
html.theme-light .border-slate-800\/80 {
  border-color: #e2e8f0 !important;
}
html.theme-light .border-slate-700,
html.theme-light .border-slate-700\/60,
html.theme-light .border-slate-700\/80 {
  border-color: #cbd5e1 !important;
}
html.theme-light .divide-slate-800\/40 > * + *,
html.theme-light .divide-slate-800\/50 > * + *,
html.theme-light .divide-slate-800\/60 > * + *,
html.theme-light .divide-slate-800 > * + * {
  border-color: #e2e8f0 !important;
}

/* ==========================================================================
   3. Typography & High-Contrast Text Colors
   ========================================================================== */
/* Universal text-white override: in light mode text-white becomes crisp dark */
html.theme-light .text-white {
  color: #0f172a !important;
}

html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6 {
  color: #0f172a !important;
}

html.theme-light .text-slate-100 {
  color: #0f172a !important;
}
html.theme-light .text-slate-200 {
  color: #1e293b !important;
}
html.theme-light .text-slate-300 {
  color: #334155 !important;
}
html.theme-light .text-slate-400 {
  color: #475569 !important;
}
html.theme-light .text-slate-500 {
  color: #64748b !important;
}

/* High-contrast accessible replacements for pastel text in light mode */
html.theme-light .text-indigo-400,
html.theme-light .text-indigo-300,
html.theme-light .text-indigo-200 {
  color: #4338ca !important; /* Indigo-700 */
}

html.theme-light .text-purple-400,
html.theme-light .text-purple-300,
html.theme-light .text-purple-200,
html.theme-light .text-violet-300 {
  color: #6b21a8 !important; /* Purple-800 */
}

html.theme-light .text-emerald-400 {
  color: #047857 !important; /* Emerald-700 */
}

html.theme-light .text-amber-400,
html.theme-light .text-amber-300 {
  color: #b45309 !important; /* Amber-700 */
}

html.theme-light .text-rose-400,
html.theme-light .text-rose-300 {
  color: #be123c !important; /* Rose-700 */
}

html.theme-light .text-sky-400,
html.theme-light .text-sky-300 {
  color: #0369a1 !important; /* Sky-700 */
}

/* ==========================================================================
   4. Badges, Chips & Status Pills (High Contrast)
   ========================================================================== */
/* Indigo Badges ("Корпус 7", Класс, Профиль) */
html.theme-light .bg-indigo-500\/10,
html.theme-light .bg-indigo-500\/20,
html.theme-light .bg-indigo-500\/30 {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

/* Purple Badges (ИИ обработка) */
html.theme-light .bg-purple-500\/10,
html.theme-light .bg-purple-500\/20,
html.theme-light .bg-purple-900\/40,
html.theme-light .bg-purple-950\/30 {
  background-color: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #6b21a8 !important;
}

/* Emerald Badges (Выполнено, Учится) */
html.theme-light .bg-emerald-500\/10,
html.theme-light .bg-emerald-500\/20 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

/* Amber Badges (В работе, Кабинеты) */
html.theme-light .bg-amber-500\/10,
html.theme-light .bg-amber-500\/20 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}

/* Sky Badges (Новое обращение, Кол-во учеников) */
html.theme-light .bg-sky-500\/10,
html.theme-light .bg-sky-500\/20 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

/* Rose Badges (Срочные, Ошибки) */
html.theme-light .bg-rose-500\/10,
html.theme-light .bg-rose-500\/20 {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

/* Violet Badges */
html.theme-light .bg-violet-500\/10 {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #6d28d9 !important;
}

/* Default / Neutral Badge */
html.theme-light .badge-neutral,
html.theme-light span.bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

/* ==========================================================================
   5. Buttons that MUST maintain White Text
   ========================================================================== */
html.theme-light button.bg-gradient-to-r,
html.theme-light button.bg-gradient-to-r *,
html.theme-light a.bg-gradient-to-r,
html.theme-light a.bg-gradient-to-r *,
html.theme-light button.bg-indigo-600,
html.theme-light button.bg-indigo-600 *,
html.theme-light button.bg-indigo-500,
html.theme-light button.bg-indigo-500 *,
html.theme-light button.bg-blue-600,
html.theme-light button.bg-blue-600 *,
html.theme-light button.bg-emerald-600,
html.theme-light button.bg-emerald-600 *,
html.theme-light button.bg-rose-600,
html.theme-light button.bg-rose-600 *,
html.theme-light .btn-solid-primary,
html.theme-light .btn-solid-primary *,
html.theme-light #toastContainer *,
html.theme-light .toast-msg * {
  color: #ffffff !important;
}

/* Active Filter Buttons */
html.theme-light .status-filter-btn.bg-slate-800,
html.theme-light .status-filter-btn.text-white,
html.theme-light .stage-btn.bg-slate-800,
html.theme-light .stage-btn.text-white,
html.theme-light .day-filter-btn.bg-slate-800,
html.theme-light .day-filter-btn.text-white,
html.theme-light .status-filter-btn.active-filter,
html.theme-light .stage-btn.active-stage,
html.theme-light .day-filter-btn.active-day {
  background-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2) !important;
}

/* ==========================================================================
   6. Sidebar Specifics in Light Mode
   ========================================================================== */
html.theme-light .sidebar-header {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.theme-light .sidebar-brand-text h2 {
  color: #0f172a !important;
}
html.theme-light .sidebar-link {
  color: #475569 !important;
}
html.theme-light .sidebar-link:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
html.theme-light .sidebar-link.bg-slate-800,
html.theme-light .sidebar-link.active {
  background-color: #eef2ff !important;
  color: #4338ca !important;
  border: 1px solid #c7d2fe !important;
}
html.theme-light .sidebar-link.bg-slate-800 svg,
html.theme-light .sidebar-link.active svg {
  color: #4338ca !important;
}
html.theme-light .sidebar-user-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.theme-light .sidebar-user-text p {
  color: #0f172a !important;
}

/* ==========================================================================
   7. Tables & Data Grids
   ========================================================================== */
html.theme-light table {
  background-color: #ffffff;
}
html.theme-light thead {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.theme-light thead th {
  color: #475569 !important;
  font-weight: 700 !important;
}
html.theme-light tbody tr {
  border-color: #e2e8f0 !important;
}
html.theme-light tbody tr:hover {
  background-color: #f1f5f9 !important;
}
html.theme-light tbody td {
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

/* ==========================================================================
   8. Form Controls, Inputs & Search
   ========================================================================== */
html.theme-light input[type="text"],
html.theme-light input[type="password"],
html.theme-light input[type="search"],
html.theme-light select,
html.theme-light textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light input::placeholder,
html.theme-light textarea::placeholder,
html.theme-light .placeholder-slate-500::placeholder {
  color: #94a3b8 !important;
}
html.theme-light input:focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* ==========================================================================
   9. Cards, Spoilers & Modals
   ========================================================================== */
html.theme-light .spoiler-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
}
html.theme-light .spoiler-card button:hover {
  background-color: #f8fafc !important;
}
html.theme-light .spoiler-badge {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

/* Modal Dialogs */
html.theme-light .fixed.inset-0.bg-slate-950\/80,
html.theme-light .fixed.inset-0.bg-black\/70,
html.theme-light .fixed.inset-0.bg-slate-950\/70,
html.theme-light .fixed.inset-0.bg-black\/75,
html.theme-light .fixed.inset-0.bg-black\/80 {
  background-color: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px) !important;
}
html.theme-light [id$="Modal"] > div > div.bg-slate-900,
html.theme-light #addModal > div > div.bg-slate-900,
html.theme-light #detailModal > div > div.bg-slate-900,
html.theme-light #analysisModal > div > div.bg-slate-900,
html.theme-light #staffModal > div > div.bg-slate-900,
html.theme-light #classModal > div > div.bg-slate-900,
html.theme-light #emergencyModal > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Detail modal specifics */
html.theme-light #detailRegNo {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.theme-light #detailStudent,
html.theme-light #detailApplicant,
html.theme-light #staffModalFio,
html.theme-light #modalClassName {
  color: #0f172a !important;
}

/* Highlighting mark */
html.theme-light .highlight-mark {
  background-color: rgba(251, 191, 36, 0.35) !important;
  color: #92400e !important;
}

/* Markdown Analysis Output in Light Mode */
html.theme-light .md-content h1 {
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html.theme-light .md-content h2 {
  color: #1e293b !important;
}
html.theme-light .md-content h3 {
  color: #0284c7 !important;
}
html.theme-light .md-content h4 {
  color: #334155 !important;
}
html.theme-light .md-content p,
html.theme-light .md-content li {
  color: #334155 !important;
}
html.theme-light .md-content blockquote {
  background: rgba(2, 132, 199, 0.06) !important;
  color: #0f172a !important;
  border-left-color: #0284c7 !important;
}
html.theme-light .md-content table th {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}
html.theme-light .md-content table td {
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
html.theme-light .md-content hr {
  border-color: #e2e8f0 !important;
}