/* ONETINY WHITE CONTENT V1 */
/* Sidebar remains dark. Main content becomes light. */

html, body, #root {
  background: #f3f6fa !important;
}

/* Main dashboard background */
main {
  background: #f3f6fa !important;
  color: #172033 !important;
}

/* Main page headings */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: #111827 !important;
}

/* Data panels, cards and bordered sections */
main section,
main article,
main [class*="rounded-2xl"],
main [class*="rounded-xl"],
main [class*="rounded-lg"][class*="border"] {
  background-color: #ffffff !important;
  border-color: #dce3ec !important;
  box-shadow: none !important;
}

/* Text inside data panels */
main section,
main article,
main [class*="rounded-2xl"],
main [class*="rounded-xl"] {
  color: #172033 !important;
}

main [class*="text-white"]:not(button):not(a),
main [class*="text-slate-100"],
main [class*="text-slate-200"] {
  color: #172033 !important;
}

main [class*="text-slate-300"],
main [class*="text-slate-400"],
main [class*="text-slate-500"] {
  color: #64748b !important;
}

/* Form controls */
main input,
main textarea,
main select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #cbd5e1 !important;
}

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

/* Graph axes and gridlines */
main svg text {
  fill: #475569 !important;
}

main svg line {
  stroke: #dce3ec;
}

/* Border colors */
main [class*="border-white"],
main [class*="border-slate"],
main [class*="border-zinc"] {
  border-color: #dce3ec !important;
}

/* Keep sidebar dark */
aside {
  background-color: #111820 !important;
  color: #f8fafc !important;
}

aside a,
aside button,
aside span,
aside p,
aside h1,
aside h2,
aside h3 {
  color: #e5e7eb !important;
}

/* Active navigation */
aside a[aria-current="page"] {
  background: #374151 !important;
  color: #ffffff !important;
}

/* Scrollbar */
main {
  scrollbar-color: #cbd5e1 #f3f6fa;
}