CMS UI - Always Light Mode with Slate Accents
============================================
  The CMS sidebar and modals should always appear in light mode,
  regardless of the website's theme setting. This provides a
  consistent editing experience.

  STRATEGY: Override CSS custom properties within CMS elements
  to force light mode values, making dark: variants ineffective.
*/

/* ========================================
   FORCE LIGHT COLOR SCHEME ON CMS
   ======================================== */

#cms-sidebar,
#cms-sidebar-toggle,
.cms-modal,
.cms-modal-overlay,
.cms-confirm-overlay {
  color-scheme: light !important;
}

/* ========================================
   RESET NEUTRAL CSS VARIABLES TO LIGHT VALUES
   This makes all neutral-* colors use light mode values
   regardless of html.dark
   ======================================== */

#cms-sidebar,
#cms-sidebar *,
#cms-sidebar-toggle,
.cms-modal,
.cms-modal *,
.cms-modal-overlay,
.cms-modal-overlay *,
.cms-confirm-overlay,
.cms-confirm-overlay * {
  /* Force light mode neutral colors (gray palette) */
  --n-0: 1 0 0;
  --n-50: 0.985 0.002 247.839;
  --n-100: 0.967 0.003 264.542;
  --n-200: 0.928 0.006 264.531;
  --n-300: 0.872 0.01 258.338;
  --n-400: 0.707 0.022 261.325;
  --n-500: 0.551 0.027 264.364;
  --n-600: 0.446 0.03 256.802;
  --n-700: 0.373 0.034 259.733;
  --n-800: 0.278 0.033 256.848;
  --n-900: 0.21 0.034 264.665;
  --n-950: 0.13 0.028 261.692;
  --n-1000: 0 0 0;
}

/* ========================================
   FORCE EXPLICIT COLORS ON CMS ELEMENTS
   Using !important to override any dark: variants
   ======================================== */

/* Main containers - white backgrounds */
#cms-sidebar,
.cms-modal,
.cms-modal-container,
.cms-confirm-overlay > div {
  background-color: #ffffff !important;
  color: #111827 !important;
}

#cms-sidebar-content {
  background-color: #f9fafb !important;
}

#cms-sidebar-toggle {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

/* Content areas with slight gray background */
#cms-sidebar-content,
#cms-sidebar > div:last-child {
  background-color: rgb(249 250 251) !important;
}

/* ========================================
   TEXT COLORS - Override all dark:text-* classes
   ======================================== */

/* Primary text (dark:text-neutral-100, dark:text-white, etc.) */
#cms-sidebar h1,
#cms-sidebar h2,
#cms-sidebar h3,
#cms-sidebar h4,
#cms-sidebar h5,
#cms-sidebar h6,
#cms-sidebar label,
#cms-sidebar p,
#cms-sidebar span,
#cms-sidebar div,
#cms-sidebar button,
#cms-sidebar a,
.cms-modal h1,
.cms-modal h2,
.cms-modal h3,
.cms-modal h4,
.cms-modal label,
.cms-modal p,
.cms-modal span,
.cms-modal div,
.cms-modal button {
  color: rgb(17 24 39) !important;
}

/* Muted/secondary text */
#cms-sidebar .text-neutral-400,
#cms-sidebar .text-neutral-500,
#cms-sidebar .text-neutral-600,
.cms-modal .text-neutral-400,
.cms-modal .text-neutral-500,
.cms-modal .text-neutral-600 {
  color: rgb(107 114 128) !important;
}

/* Very muted text (hints, descriptions) */
#cms-sidebar .text-neutral-300,
.cms-modal .text-neutral-300 {
  color: rgb(156 163 175) !important;
}

/* ========================================
   BACKGROUND COLORS - Override all dark:bg-* classes
   ======================================== */

/* White backgrounds */
#cms-sidebar .bg-white,
#cms-sidebar [class*="dark:bg-neutral-800"],
#cms-sidebar [class*="dark:bg-neutral-900"],
.cms-modal .bg-white,
.cms-modal [class*="dark:bg-neutral-800"],
.cms-modal [class*="dark:bg-neutral-900"] {
  background-color: rgb(255 255 255) !important;
}

/* Light gray backgrounds (bg-neutral-50) */
#cms-sidebar .bg-neutral-50,
#cms-sidebar [class*="dark:bg-neutral-900/50"],
.cms-modal .bg-neutral-50 {
  background-color: rgb(249 250 251) !important;
}

/* Slightly darker gray (bg-neutral-100) */
#cms-sidebar .bg-neutral-100,
.cms-modal .bg-neutral-100 {
  background-color: rgb(243 244 246) !important;
}

/* Medium gray backgrounds (hover states, selected) */
#cms-sidebar .bg-neutral-200,
#cms-sidebar [class*="dark:bg-neutral-700"],
.cms-modal .bg-neutral-200 {
  background-color: rgb(229 231 235) !important;
}

/* ========================================
   FORM ELEMENTS - Inputs, Selects, Textareas
   ======================================== */

#cms-sidebar input,
#cms-sidebar select,
#cms-sidebar textarea,
#cms-sidebar input[type="text"],
#cms-sidebar input[type="number"],
#cms-sidebar input[type="email"],
#cms-sidebar input[type="url"],
#cms-sidebar input[type="search"],
.cms-modal input,
.cms-modal select,
.cms-modal textarea {
  background-color: rgb(255 255 255) !important;
  border-color: rgb(209 213 219) !important;
  color: rgb(17 24 39) !important;
}

/* Select dropdown options */
#cms-sidebar select option,
.cms-modal select option {
  background-color: rgb(255 255 255) !important;
  color: rgb(17 24 39) !important;
}

/* Disabled inputs */
#cms-sidebar input:disabled,
#cms-sidebar select:disabled,
#cms-sidebar textarea:disabled {
  background-color: rgb(243 244 246) !important;
  color: rgb(107 114 128) !important;
}

/* Focus states */
#cms-sidebar input:focus,
#cms-sidebar select:focus,
#cms-sidebar textarea:focus {
  border-color: rgb(100 116 139) !important;
  outline-color: rgb(100 116 139) !important;
  --tw-ring-color: rgb(100 116 139 / 0.5) !important;
}

/* ========================================
   BORDERS - Override all dark:border-* classes
   ======================================== */

#cms-sidebar [class*="border-neutral-700"],
#cms-sidebar [class*="border-neutral-600"],
#cms-sidebar [class*="dark:border-neutral"],
.cms-modal [class*="border-neutral-700"],
.cms-modal [class*="border-neutral-600"] {
  border-color: rgb(229 231 235) !important;
}

/* Standard border color */
#cms-sidebar .border-neutral-200,
#cms-sidebar .border-neutral-300,
.cms-modal .border-neutral-200,
.cms-modal .border-neutral-300 {
  border-color: rgb(229 231 235) !important;
}

/* ========================================
   BUTTONS - Primary, Secondary, Danger
   ======================================== */

/* Primary buttons - use slate */
#cms-sidebar .bg-blue-500,
#cms-sidebar .bg-blue-600,
#cms-sidebar .bg-indigo-500,
#cms-sidebar .bg-indigo-600,
#cms-sidebar [class*="dark:bg-blue"],
#cms-sidebar [class*="dark:bg-indigo"],
.cms-modal .bg-blue-500,
.cms-modal .bg-blue-600,
.cms-modal .bg-indigo-500,
.cms-modal .bg-indigo-600 {
  background-color: rgb(71 85 105) !important;
  color: rgb(255 255 255) !important;
}

/* Brand buttons - use slate */
#cms-sidebar .bg-brand-500,
#cms-sidebar .bg-brand-600,
.cms-modal .bg-brand-500,
.cms-modal .bg-brand-600 {
  background-color: rgb(71 85 105) !important;
  color: rgb(255 255 255) !important;
}

#cms-sidebar .hover\:bg-brand-600:hover,
#cms-sidebar .hover\:bg-brand-700:hover,
.cms-modal .hover\:bg-brand-600:hover,
.cms-modal .hover\:bg-brand-700:hover {
  background-color: rgb(51 65 85) !important;
}

/* Brand text colors - use slate */
#cms-sidebar .text-brand-500,
#cms-sidebar .text-brand-600,
.cms-modal .text-brand-500,
.cms-modal .text-brand-600 {
  color: rgb(71 85 105) !important;
}

/* Secondary buttons */
#cms-sidebar .bg-neutral-200,
#cms-sidebar [class*="dark:bg-neutral-700"]:not(input):not(select):not(textarea),
.cms-modal .bg-neutral-200 {
  background-color: rgb(229 231 235) !important;
  color: rgb(17 24 39) !important;
}

/* Button hover states */
#cms-sidebar button:hover,
.cms-modal button:hover {
  opacity: 0.9;
}

/* ========================================
   ACCORDIONS & PANELS
   ======================================== */

/* Accordion headers */
#cms-sidebar [class*="accordion"],
#cms-sidebar [data-accordion],
#cms-sidebar [id*="accordion"] {
  background-color: rgb(255 255 255) !important;
  color: rgb(17 24 39) !important;
  border-color: rgb(229 231 235) !important;
}

/* Accordion content panels */
#cms-sidebar [class*="accordion-content"],
#cms-sidebar [class*="accordion-panel"] {
  background-color: rgb(249 250 251) !important;
}

/* ========================================
   BUTTON GROUPS & TOGGLE SWITCHES
   ======================================== */

/* Button group containers */
#cms-sidebar [class*="button-group"],
#cms-sidebar [class*="btn-group"] {
  background-color: rgb(243 244 246) !important;
  border-color: rgb(209 213 219) !important;
}

/* Active/selected button in group */
#cms-sidebar [class*="button-group"] button.bg-white,
#cms-sidebar [class*="button-group"] button[aria-pressed="true"],
#cms-sidebar [class*="btn-group"] button.bg-white {
  background-color: rgb(255 255 255) !important;
  color: rgb(17 24 39) !important;
}

/* Inactive buttons in group */
#cms-sidebar [class*="button-group"] button:not(.bg-white),
#cms-sidebar [class*="btn-group"] button:not(.bg-white) {
  background-color: transparent !important;
  color: rgb(107 114 128) !important;
}

/* ========================================
   HOVER STATES
   ======================================== */

#cms-sidebar [class*="dark:hover:bg-neutral-700"]:hover,
#cms-sidebar [class*="dark:hover:bg-neutral-600"]:hover,
.cms-modal [class*="dark:hover:bg-neutral-700"]:hover {
  background-color: rgb(243 244 246) !important;
}

#cms-sidebar [class*="dark:hover:text-neutral-100"]:hover,
#cms-sidebar [class*="dark:hover:text-white"]:hover {
  color: rgb(17 24 39) !important;
}

/* ========================================
   ICONS & SVG
   ======================================== */

#cms-sidebar svg,
#cms-sidebar [class*="icon"],
.cms-modal svg {
  color: inherit !important;
}

/* Only apply fill to SVGs that don't explicitly use stroke (have fill="none") */
#cms-sidebar svg:not([fill="none"]),
.cms-modal svg:not([fill="none"]) {
  fill: currentColor !important;
}

/* Ensure stroke-based icons (chevrons, etc.) keep their stroke styling */
#cms-sidebar svg[fill="none"],
.cms-modal svg[fill="none"] {
  fill: none !important;
  stroke: currentColor !important;
}

/* ========================================
   FLOATING TOGGLE BUTTON
   ======================================== */

#cms-sidebar-toggle {
  background-color: rgb(255 255 255) !important;
  border-color: rgb(209 213 219) !important;
  color: rgb(55 65 81) !important;
}

#cms-sidebar-toggle:hover {
  background-color: rgb(249 250 251) !important;
}

/* ========================================
   SCROLLBARS
   ======================================== */

#cms-sidebar::-webkit-scrollbar-track,
#cms-sidebar *::-webkit-scrollbar-track {
  background: rgb(243 244 246) !important;
}

#cms-sidebar::-webkit-scrollbar-thumb,
#cms-sidebar *::-webkit-scrollbar-thumb {
  background: rgb(209 213 219) !important;
}

/* ========================================
   FOCUS RINGS
   ======================================== */

#cms-sidebar *:focus,
.cms-modal *:focus {
  --tw-ring-color: rgb(100 116 139 / 0.5) !important;
  outline-color: rgb(100 116 139) !important;
}

/* ========================================
   SPECIFIC COMPONENT OVERRIDES
   ======================================== */

/* Color picker swatches should keep their colors */
#cms-sidebar [class*="color-swatch"],
#cms-sidebar [class*="color-preview"],
#cms-sidebar [style*="background-color: oklch"],
#cms-sidebar [style*="background-color: rgb"] {
  /* Don't override inline background colors for color swatches */
}

/* Keep danger/red buttons red */
#cms-sidebar .bg-red-500,
#cms-sidebar .bg-red-600,
.cms-modal .bg-red-500,
.cms-modal .bg-red-600 {
  background-color: rgb(239 68 68) !important;
  color: rgb(255 255 255) !important;
}

/* Keep success/green colors */
#cms-sidebar .bg-green-500,
#cms-sidebar .bg-green-600,
#cms-sidebar .text-green-500,
#cms-sidebar .text-green-600 {
  /* Keep green colors as-is */
}

/* Warning/yellow colors */
#cms-sidebar .bg-yellow-500,
#cms-sidebar .text-yellow-500 {
  /* Keep yellow colors as-is */
}

/* ========================================
   COMPREHENSIVE INDIGO → SLATE CONVERSION
   (CMS should use slate accent, not brand/indigo)
   ======================================== */

/* All indigo background variants - convert to slate */
#cms-sidebar .bg-indigo-500,
#cms-sidebar .bg-indigo-600,
#cms-sidebar .bg-indigo-700,
.cms-modal .bg-indigo-500,
.cms-modal .bg-indigo-600,
.cms-modal .bg-indigo-700 {
  background-color: rgb(71 85 105) !important;
  color: rgb(255 255 255) !important;
}

/* Indigo hover states */
#cms-sidebar .hover\:bg-indigo-600:hover,
#cms-sidebar .hover\:bg-indigo-700:hover,
.cms-modal .hover\:bg-indigo-600:hover,
.cms-modal .hover\:bg-indigo-700:hover {
  background-color: rgb(51 65 85) !important;
}

/* Indigo text colors */
#cms-sidebar .text-indigo-500,
#cms-sidebar .text-indigo-600,
.cms-modal .text-indigo-500,
.cms-modal .text-indigo-600 {
  color: rgb(71 85 105) !important;
}

/* Focus/ring indigo colors */
#cms-sidebar .ring-indigo-500,
#cms-sidebar .focus\:ring-indigo-500:focus,
.cms-modal .ring-indigo-500 {
  --tw-ring-color: rgb(100 116 139) !important;
}

/* Border indigo colors */
#cms-sidebar .border-indigo-500,
#cms-sidebar .focus\:border-indigo-500:focus,
.cms-modal .border-indigo-500 {
  border-color: rgb(100 116 139) !important;
}

/* Purple colors (used in some CMS elements) - convert to slate */
#cms-sidebar .bg-purple-500,
#cms-sidebar .bg-purple-600,
.cms-modal .bg-purple-500,
.cms-modal .bg-purple-600 {
  background-color: rgb(71 85 105) !important;
  color: rgb(255 255 255) !important;
}

#cms-sidebar .text-purple-500,
#cms-sidebar .text-purple-600,
.cms-modal .text-purple-500,
.cms-modal .text-purple-600 {
  color: rgb(71 85 105) !important;
}

/* ========================================
   ENSURE WHITE BACKGROUND EVERYWHERE
   (More aggressive overrides for remaining issues)
   ======================================== */

/* All direct children of sidebar with backgrounds */
#cms-sidebar > div,
#cms-sidebar [class*="bg-neutral-8"],
#cms-sidebar [class*="bg-neutral-9"] {
  background-color: rgb(255 255 255) !important;
}

/* Nested elements that might have dark backgrounds */
#cms-sidebar .panel,
#cms-sidebar .drawer,
#cms-sidebar .dropdown,
#cms-sidebar .popover,
#cms-sidebar .menu,
#cms-sidebar [role="listbox"],
#cms-sidebar [role="menu"],
#cms-sidebar [role="dialog"] {
  background-color: rgb(255 255 255) !important;
  color: rgb(17 24 39) !important;
  border-color: rgb(229 231 235) !important;
}

/* ========================================
   RANGE SLIDERS
   ======================================== */

/* Range slider track - light background */
#cms-sidebar input[type="range"]::-webkit-slider-runnable-track {
  background: rgb(229 231 235) !important;
}

#cms-sidebar input[type="range"]::-moz-range-track {
  background: rgb(229 231 235) !important;
}

/* Range slider thumb - slate accent */
#cms-sidebar input[type="range"]::-webkit-slider-thumb {
  background: rgb(71 85 105) !important;
  border-color: rgb(71 85 105) !important;
}

#cms-sidebar input[type="range"]::-moz-range-thumb {
  background: rgb(71 85 105) !important;
  border-color: rgb(71 85 105) !important;
}

/* Range sliders - also handle non-dark mode to ensure consistency */
#cms-sidebar input[type="range"]::-webkit-slider-runnable-track {
  background: rgb(229 231 235);
}

#cms-sidebar input[type="range"]::-webkit-slider-thumb {
  background: rgb(71 85 105);
}

/* ========================================
   TOGGLE SWITCHES & CHECKBOXES
   ======================================== */

/* Toggle switch background (off state) */
#cms-sidebar [role="switch"],
#cms-sidebar .toggle,
#cms-sidebar [class*="switch"] {
  background-color: rgb(209 213 219) !important;
}

/* Toggle switch background (on state) - slate */
#cms-sidebar [role="switch"][aria-checked="true"],
#cms-sidebar .toggle.active,
#cms-sidebar [class*="switch"].active {
  background-color: rgb(71 85 105) !important;
}

/* Checkbox checked state */
#cms-sidebar input[type="checkbox"]:checked {
  background-color: rgb(71 85 105) !important;
  border-color: rgb(71 85 105) !important;
}

/* ========================================
   ENSURE ALL TEXT IS READABLE
   ======================================== */

/* All paragraphs, spans, and text elements */
#cms-sidebar p:not(.text-white),
#cms-sidebar span:not(.text-white),
#cms-sidebar small,
#cms-sidebar em,
#cms-sidebar strong {
  color: rgb(55 65 81) !important;
}

/* Headings and labels */
#cms-sidebar h1:not(.text-white),
#cms-sidebar h2:not(.text-white),
#cms-sidebar h3:not(.text-white),
#cms-sidebar h4:not(.text-white),
#cms-sidebar label:not(.text-white) {
  color: rgb(17 24 39) !important;
}

/* Placeholder text */
#cms-sidebar ::placeholder {
  color: rgb(156 163 175) !important;
}

/* Select/option text */
#cms-sidebar select,
#cms-sidebar option {
  color: rgb(17 24 39) !important;
  background-color: rgb(255 255 255) !important;

/* ========================================
   TOGGLE BUTTON FOCUS RINGS - Override indigo
   ======================================== */

/* Toggle/selection button focus rings - convert indigo to slate */
#cms-sidebar button.relative.w-full {
  border-color: transparent !important;
}

#cms-sidebar button.relative.w-full:focus,
#cms-sidebar button.relative.w-full:focus-visible,
#cms-sidebar button.relative.w-full[data-selected="true"],
#cms-sidebar button.relative.w-full[aria-selected="true"] {
  border-color: rgb(100 116 139) !important; /* slate-500 */
  outline-color: rgb(100 116 139) !important;
  --tw-ring-color: rgb(100 116 139 / 0.5) !important;
}

/* Focus within for toggle button groups */
#cms-sidebar [class*="button-group"] button:focus,
#cms-sidebar [class*="toggle-group"] button:focus {
  border-color: rgb(100 116 139) !important;
}