/* Rangoli Admin — shared theme layer (both layouts).
   Everything here is app-global; pages own no style rules.
   [x-cloak]'s !important is the one sanctioned use: it must beat any
   utility until Alpine initializes. */
body { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', sans-serif; }
[x-cloak] { display: none !important; }

:root { color-scheme: light; }
:root.dark { color-scheme: dark; }

::selection { background: #e0e7ff; }
.dark ::selection { background: rgba(70, 90, 254, .35); }

.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #334155; }

/* Form controls carry no bg utilities anywhere in the views; give them a
   well surface one step below the card. :where() keeps specificity at
   zero so any future utility class still wins. */
.dark :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
  background-color: #0b1526; color: #e2e8f0;
}
.dark :where(input, textarea)::placeholder { color: #64748b; }

/* Data-driven width (progress/score bars): the style attribute carries
   ONLY the --w custom property (a value, not a rule); the visual rule
   lives here. */
.w-var { width: var(--w, 0%); }

/* Theme switch icons: show the theme you'll switch TO (moon in light
   mode, sun in dark). Pure CSS — flipping .dark swaps them everywhere. */
.theme-icon-sun { display: none; }
.dark .theme-icon-sun { display: block; }
.dark .theme-icon-moon { display: none; }