html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.dark .bg-white {
  background-color: #0f172a !important;
}

.dark .bg-slate-50 {
  background-color: #1e293b !important;
}

.dark .bg-slate-100 {
  background-color: #334155 !important;
}

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300 {
  border-color: #334155 !important;
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

.dark .text-slate-900 {
  color: #f8fafc !important;
}

.dark .text-slate-700 {
  color: #e2e8f0 !important;
}

.dark .text-slate-600 {
  color: #cbd5e1 !important;
}

.dark .text-slate-500,
.dark .text-slate-400 {
  color: #94a3b8 !important;
}

.dark input,
.dark select,
.dark textarea {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

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

.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-slate-200:hover {
  background-color: #334155 !important;
}

.dark .bg-indigo-50 {
  background-color: #312e81 !important;
}

.dark .bg-red-50 {
  background-color: #450a0a !important;
}

.dark .bg-amber-50 {
  background-color: #451a03 !important;
}

.dark .bg-emerald-50 {
  background-color: #052e16 !important;
}

.dark .text-indigo-700 {
  color: #a5b4fc !important;
}

.dark .text-indigo-600 {
  color: #a5b4fc !important;
}

.dark .text-red-700,
.dark .text-red-600 {
  color: #fca5a5 !important;
}

.dark .text-amber-800,
.dark .text-amber-700 {
  color: #fcd34d !important;
}

.dark .text-emerald-700 {
  color: #86efac !important;
}

.dark .shadow-sm,
.dark .shadow-2xl {
  --tw-shadow-color: rgb(0 0 0 / 0.35);
}

html[dir="rtl"] table,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  text-align: right;
}

/* Light Mode: bright, clean, and intentionally separate from dark-mode rules above. */
html:not(.dark) body {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html:not(.dark) main {
  background-color: #ffffff;
}

html:not(.dark) .bg-slate-50 {
  background-color: #ffffff !important;
}

html:not(.dark) .bg-slate-100 {
  background-color: #f8fafc !important;
}

html:not(.dark) .bg-slate-200 {
  background-color: #f1f5f9 !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #64748b !important;
}

html:not(.dark) table {
  background-color: #ffffff;
}

html:not(.dark) th {
  background-color: #f8fafc;
  color: #334155;
}

html:not(.dark) td {
  border-color: #e2e8f0;
}

html:not(.dark) .border-slate-100,
html:not(.dark) .border-slate-200,
html:not(.dark) .border-slate-300 {
  border-color: #e2e8f0 !important;
}