:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0f172a !important;
  color: #e5e7eb;
}

html.dark .bg-animate {
  background:
    radial-gradient(circle at 12% 20%, rgba(30, 64, 175, 0.34) 0%, transparent 38%),
    radial-gradient(circle at 88% 75%, rgba(5, 150, 105, 0.26) 0%, transparent 42%),
    radial-gradient(circle at 50% 52%, rgba(124, 45, 18, 0.22) 0%, transparent 48%) !important;
}

html.dark :is(
  .bg-white,
  .bg-gray-50,
  .bg-gray-100,
  .bg-slate-50,
  .bg-slate-100,
  .glass-card,
  .glass-panel,
  .pro-card,
  .section-box,
  .table-wrapper,
  .sort-controls,
  .student-code-card,
  .suggestions-list,
  .photo-preview-box,
  .avatar-item
) {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e5e7eb;
}

html.dark :is(.bg-gray-200, .bg-slate-200, .bg-blue-50, .bg-indigo-50, .bg-purple-50, .bg-sky-50, .bg-green-50, .bg-emerald-50, .bg-yellow-50, .bg-amber-50, .bg-red-50, .bg-rose-50) {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

html.dark :is(
  .text-gray-900,
  .text-gray-800,
  .text-gray-700,
  .text-slate-900,
  .text-slate-800,
  .text-slate-700,
  .text-zinc-900,
  .text-zinc-800,
  .text-neutral-900,
  .text-neutral-800
) {
  color: #f8fafc !important;
}

html.dark :is(
  .text-gray-600,
  .text-gray-500,
  .text-gray-400,
  .text-slate-600,
  .text-slate-500,
  .text-slate-400,
  .text-zinc-600,
  .text-zinc-500,
  .text-neutral-600,
  .text-neutral-500
) {
  color: #cbd5e1 !important;
}

html.dark :is(
  .text-\[\#0054a6\],
  .text-\[\#322a83\],
  .text-\[\#002060\],
  .text-\[\#1e3a8a\],
  .theme-text
) {
  color: #93c5fd !important;
}

html.dark :is(
  .border-white,
  .border-gray-100,
  .border-gray-200,
  .border-gray-300,
  .border-slate-100,
  .border-slate-200,
  .border-slate-300,
  .border-blue-100,
  .border-indigo-100
) {
  border-color: #334155 !important;
}

html.dark :is(input, select, textarea, .input-field, .mockup-input, .pro-input) {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html.dark :is(input, textarea)::placeholder {
  color: #94a3b8 !important;
}

html.dark :is(.mockup-label, .pro-label, label) {
  color: #cbd5e1;
}

html.dark :is(#loadingOverlay, #page-loader) {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #e5e7eb !important;
}

html.dark .card-3d {
  background: rgba(30, 41, 59, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

html.dark .card-3d:hover,
html.dark .card-3d:focus-visible {
  background: rgba(30, 41, 59, 1) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42) !important;
}

html.dark :is(.data-table, .report-table) {
  color: #e5e7eb;
}

html.dark :is(.data-table, .report-table) th {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html.dark :is(.data-table, .report-table) td {
  border-color: #334155 !important;
  color: #e5e7eb;
}

html.dark .data-table tbody tr,
html.dark .data-table tbody tr:nth-child(even),
html.dark .data-table tbody td.sticky-col,
html.dark .data-table tbody tr:nth-child(even) td.sticky-col {
  background-color: #1e293b !important;
}

html.dark .data-table tbody tr:hover,
html.dark .data-table tbody tr:hover td.sticky-col {
  background-color: #273549 !important;
}

html.dark :is(.print-container, #printArea, #printContent, #printCodesArea, #printPreview, .student-card) {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.dark :is(.print-container, #printArea, #printContent, #printCodesArea, #printPreview, .student-card) :is(
  .text-gray-900,
  .text-gray-800,
  .text-gray-700,
  .text-slate-900,
  .text-slate-800,
  .text-slate-700,
  .text-\[\#0054a6\],
  .text-\[\#322a83\],
  .text-\[\#002060\],
  .theme-text
) {
  color: #0f172a !important;
}

@media print {
  html.dark,
  html.dark body {
    background: #ffffff !important;
    color: #000000 !important;
    color-scheme: light;
  }

  html.dark .no-print {
    display: none !important;
  }
}