/**
 * Kursluk Central Semantic Theme Tokens & Global Scrollbar System
 * Works seamlessly with Tailwind CSS dark: variants and CSS variables.
 */

:root {
  color-scheme: light;
  --color-bg-page: #f8fafc;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-border: #e2e8f0;
  --color-input-bg: #ffffff;
  --color-input-border: #cbd5e1;
  --color-hover: #f1f5f9;
  --color-selected: #e2e8f0;
  --color-sidebar: #ffffff;
  --color-sidebar-border: #e2e8f0;
  --color-header: #ffffff;
  --color-header-border: #f1f5f9;
}

html.dark {
  color-scheme: dark !important;
  --color-bg-page: #0f172a;
  --color-bg-surface: #1e293b;
  --color-bg-elevated: #334155;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  --color-input-bg: #0f172a;
  --color-input-border: #475569;
  --color-hover: #334155;
  --color-selected: #475569;
  --color-sidebar: #1e293b;
  --color-sidebar-border: #334155;
  --color-header: #1e293b;
  --color-header-border: #334155;
}

/* Force dark color-scheme on html and body when .dark is active */
html.dark,
html.dark body {
  color-scheme: dark !important;
}

/* Hide Windows scrollbar arrow buttons in all modes */
::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ----------------------------------------------------
 * 1. LIGHT MODE SCROLLBAR (Firefox, Chrome, Edge)
 * ---------------------------------------------------- */
html:not(.dark) {
  color-scheme: light !important;
  scrollbar-color: #cbd5e1 #f1f5f9 !important;
  scrollbar-width: thin !important;
}

html:not(.dark) ::-webkit-scrollbar,
html:not(.dark) *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

html:not(.dark) ::-webkit-scrollbar-track,
html:not(.dark) *::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb,
html:not(.dark) *::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 9999px !important;
  border: 2px solid #f1f5f9 !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover,
html:not(.dark) *::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

html:not(.dark) ::-webkit-scrollbar-corner,
html:not(.dark) *::-webkit-scrollbar-corner {
  background: #f1f5f9 !important;
}


/* ----------------------------------------------------
 * 2. DARK MODE SCROLLBAR (Firefox, Chrome, Edge)
 * ---------------------------------------------------- */
html.dark {
  color-scheme: dark !important;
  scrollbar-color: #334155 #0f172a !important;
  scrollbar-width: thin !important;
}

html.dark ::-webkit-scrollbar,
html.dark *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

html.dark ::-webkit-scrollbar-track,
html.dark *::-webkit-scrollbar-track {
  background: #0f172a !important;
}

html.dark ::-webkit-scrollbar-thumb,
html.dark *::-webkit-scrollbar-thumb {
  background: #334155 !important;
  border-radius: 9999px !important;
  border: 2px solid #0f172a !important;
}

html.dark ::-webkit-scrollbar-thumb:hover,
html.dark *::-webkit-scrollbar-thumb:hover {
  background: #475569 !important;
}

html.dark ::-webkit-scrollbar-corner,
html.dark *::-webkit-scrollbar-corner {
  background: #0f172a !important;
}

/* Dark mode structural base styles */
html.dark body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
}

/* Ensure background text-transparent elements keep text clip */
html.dark .text-transparent {
  color: transparent !important;
}

/* Inputs styling in dark mode */
html.dark input[type="text"]:not(.blog-search-input):not([class*="bg-transparent"]):not([style*="transparent"]),
html.dark input[type="email"]:not([class*="bg-transparent"]):not([style*="transparent"]),
html.dark input[type="password"]:not([class*="bg-transparent"]):not([style*="transparent"]),
html.dark input[type="number"]:not([class*="bg-transparent"]):not([style*="transparent"]),
html.dark input[type="date"]:not([class*="bg-transparent"]):not([style*="transparent"]),
html.dark select:not([class*="bg-transparent"]):not([style*="transparent"]),
html.dark textarea:not([class*="bg-transparent"]):not([style*="transparent"]) {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text-primary);
}

/* Ensure card and element shadows in dark mode render as dark shadows instead of light glowing halos */
html.dark [class*="shadow"] {
  --tw-shadow-color: rgba(2, 6, 23, 0.6);
}

/* Custom Scrollbar Utility Classes */
.scrollbar-none {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.scrollbar-thin {
  scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

/* Smooth transition for theme toggling */
body, aside, header, table, input, select, textarea {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}