/*
 * Tianji – Comprehensive Light Theme Override
 * Colegio Jurista / monitor.colegiojurista.edu.mx
 *
 * Remaps EVERY dark: Tailwind utility to its light-palette equivalent.
 * Overrides Ant Design v5 CSS-in-JS dark theme tokens.
 * Covers: backgrounds, text, borders, hover, focus, focus-visible,
 *         ring, ring-offset, placeholder, data-state, toast/toaster,
 *         webkit scrollbars, Ant Design components (labels, forms,
 *         typography, buttons, tables, menus), and structural elements.
 */

/* ─────────────────────────────────────────────
   1. Force light color-scheme globally
   ───────────────────────────────────────────── */
:root,
html,
html.dark,
body {
  color-scheme: light !important;
}

/* ─────────────────────────────────────────────
   2. Shadcn/ui CSS design tokens
      Mirror :root light values onto html.dark/.dark
   ───────────────────────────────────────────── */
html.dark,
html.dark:root,
.dark {
  --background:             0 0% 100%       !important;
  --foreground:             240 10% 3.9%    !important;
  --card:                   0 0% 100%       !important;
  --card-foreground:        240 10% 3.9%    !important;
  --popover:                0 0% 100%       !important;
  --popover-foreground:     240 10% 3.9%    !important;
  --primary:                240 5.9% 10%    !important;
  --primary-foreground:     0 0% 98%        !important;
  --secondary:              240 4.8% 95.9%  !important;
  --secondary-foreground:   240 5.9% 10%    !important;
  --muted:                  240 4.8% 95.9%  !important;
  --muted-foreground:       240 3.8% 46.1%  !important;
  --accent:                 240 4.8% 95.9%  !important;
  --accent-foreground:      240 5.9% 10%    !important;
  --destructive:            0 84.2% 60.2%   !important;
  --destructive-foreground: 0 0% 98%        !important;
  --border:                 240 5.9% 90%    !important;
  --input:                  240 5.9% 90%    !important;
  --ring:                   240 5.9% 10%    !important;
  --radius:                 0.5rem          !important;
  --chart-1:  12 76% 61%   !important;
  --chart-2:  173 58% 39%  !important;
  --chart-3:  197 37% 24%  !important;
  --chart-4:  43 74% 66%   !important;
  --chart-5:  27 87% 67%   !important;
  --chart-6:  220 70% 50%  !important;
  --chart-7:  160 60% 45%  !important;
  --chart-8:  30 80% 55%   !important;
  --chart-9:  280 65% 60%  !important;
  --chart-10: 340 75% 55%  !important;
}

/* ─────────────────────────────────────────────
   3. Base body
   ───────────────────────────────────────────── */
html.dark body,
body {
  background-color: hsl(var(--background)) !important;
  color:            hsl(var(--foreground))  !important;
}

/* ═══════════════════════════════════════════════
   ANT DESIGN v5 CSS-IN-JS DARK THEME OVERRIDES
   Ant Design v5 injects <style> at runtime with
   selectors like .ant-*.css-HASH. We override
   with html.dark specificity + !important.
   ═══════════════════════════════════════════════ */

/* Global: Force all text inside .dark to be dark on white */
html.dark {
  color: rgba(0, 0, 0, 0.88) !important;
}

/* ── Ant Typography (headings, paragraphs, Text) ── */
html.dark .ant-typography,
html.dark h1.ant-typography,
html.dark h2.ant-typography,
html.dark h3.ant-typography,
html.dark h4.ant-typography,
html.dark h5.ant-typography,
html.dark .ant-typography h1,
html.dark .ant-typography h2,
html.dark .ant-typography h3,
html.dark .ant-typography h4,
html.dark .ant-typography h5 {
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-typography.ant-typography-secondary {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* ── Ant Form labels ── */
html.dark .ant-form-item-label > label,
html.dark .ant-form-item-label label,
html.dark .ant-form-item-required,
html.dark .ant-col.ant-form-item-label label,
html.dark label[class*="ant-form"] {
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-form-item-required::before {
  color: #ff4d4f !important;
}
html.dark .ant-form-item-explain,
html.dark .ant-form-item-extra {
  color: rgba(0, 0, 0, 0.45) !important;
}
html.dark .ant-form-item-explain-error {
  color: #ff4d4f !important;
}

/* ── Ant Input / Input Password / TextArea ── */
html.dark .ant-input,
html.dark .ant-input-affix-wrapper,
html.dark .ant-input-number,
html.dark .ant-input-password,
html.dark .ant-picker,
html.dark .ant-select-selector {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
  border-color: #d9d9d9 !important;
}
html.dark .ant-input::placeholder,
html.dark .ant-input-affix-wrapper input::placeholder {
  color: rgba(0, 0, 0, 0.25) !important;
}
html.dark .ant-input:hover,
html.dark .ant-input-affix-wrapper:hover,
html.dark .ant-input-number:hover,
html.dark .ant-select-selector:hover {
  border-color: #4096ff !important;
}
html.dark .ant-input:focus,
html.dark .ant-input-affix-wrapper-focused,
html.dark .ant-input-number:focus {
  border-color: #4096ff !important;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1) !important;
}

/* ── Ant Button ── */
html.dark .ant-btn {
  color: rgba(0, 0, 0, 0.88) !important;
  border-color: #d9d9d9 !important;
  background-color: #ffffff !important;
}
html.dark .ant-btn:hover {
  color: #4096ff !important;
  border-color: #4096ff !important;
  background-color: #ffffff !important;
}
html.dark .ant-btn-primary {
  color: #ffffff !important;
  background-color: #1677ff !important;
  border-color: #1677ff !important;
}
html.dark .ant-btn-primary:hover {
  background-color: #4096ff !important;
  border-color: #4096ff !important;
  color: #ffffff !important;
}
html.dark .ant-btn-link {
  color: #1677ff !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
html.dark .ant-btn-text {
  color: rgba(0, 0, 0, 0.88) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* ── Ant Select / Dropdown ── */
html.dark .ant-select,
html.dark .ant-select-item,
html.dark .ant-select-dropdown {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-select-item-option-active,
html.dark .ant-select-item-option-selected {
  background-color: #e6f4ff !important;
}
html.dark .ant-select-item:hover {
  background-color: #f5f5f5 !important;
}

/* ── Ant Table ── */
html.dark .ant-table,
html.dark .ant-table-thead > tr > th,
html.dark .ant-table-tbody > tr > td,
html.dark .ant-table-cell {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
  border-color: #f0f0f0 !important;
}
html.dark .ant-table-thead > tr > th {
  background-color: #fafafa !important;
  font-weight: 600 !important;
}
html.dark .ant-table-tbody > tr:hover > td {
  background-color: #fafafa !important;
}
html.dark .ant-table-row-selected > td {
  background-color: #e6f4ff !important;
}

/* ── Ant Menu / Navigation ── */
html.dark .ant-menu,
html.dark .ant-menu-item,
html.dark .ant-menu-submenu-title {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-menu-item:hover,
html.dark .ant-menu-item-active,
html.dark .ant-menu-submenu-title:hover {
  color: #1677ff !important;
  background-color: #e6f4ff !important;
}
html.dark .ant-menu-item-selected {
  color: #1677ff !important;
  background-color: #e6f4ff !important;
}

/* ── Ant Tabs ── */
html.dark .ant-tabs,
html.dark .ant-tabs-tab {
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-tabs-tab:hover {
  color: #4096ff !important;
}
html.dark .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #1677ff !important;
}
html.dark .ant-tabs-ink-bar {
  background: #1677ff !important;
}
html.dark .ant-tabs-nav::before {
  border-color: #f0f0f0 !important;
}

/* ── Ant Card ── */
html.dark .ant-card {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
  border-color: #f0f0f0 !important;
}
html.dark .ant-card-head {
  color: rgba(0, 0, 0, 0.88) !important;
  border-color: #f0f0f0 !important;
}

/* ── Ant Modal / Drawer ── */
html.dark .ant-modal-content,
html.dark .ant-drawer-content,
html.dark .ant-drawer-header {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-modal-header {
  background-color: #ffffff !important;
}
html.dark .ant-modal-title,
html.dark .ant-drawer-title {
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-modal-close {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* ── Ant Tooltip / Popover ── */
html.dark .ant-tooltip-inner {
  background-color: rgba(0, 0, 0, 0.85) !important;
  color: #ffffff !important;
}
html.dark .ant-popover-inner {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
}

/* ── Ant Tag ── */
html.dark .ant-tag {
  color: rgba(0, 0, 0, 0.88) !important;
  background: #fafafa !important;
  border-color: #d9d9d9 !important;
}

/* ── Ant Badge ── */
html.dark .ant-badge-count {
  color: #ffffff !important;
}

/* ── Ant Divider ── */
html.dark .ant-divider {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ── Ant Breadcrumb ── */
html.dark .ant-breadcrumb,
html.dark .ant-breadcrumb a,
html.dark .ant-breadcrumb-separator {
  color: rgba(0, 0, 0, 0.45) !important;
}
html.dark .ant-breadcrumb a:hover {
  color: rgba(0, 0, 0, 0.88) !important;
}

/* ── Ant Pagination ── */
html.dark .ant-pagination-item,
html.dark .ant-pagination-prev,
html.dark .ant-pagination-next {
  border-color: #d9d9d9 !important;
}
html.dark .ant-pagination-item a {
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-pagination-item-active {
  border-color: #1677ff !important;
}
html.dark .ant-pagination-item-active a {
  color: #1677ff !important;
}

/* ── Ant Switch ── */
html.dark .ant-switch {
  background-color: rgba(0, 0, 0, 0.25) !important;
}
html.dark .ant-switch-checked {
  background-color: #1677ff !important;
}

/* ── Ant Checkbox / Radio ── */
html.dark .ant-checkbox-wrapper,
html.dark .ant-radio-wrapper {
  color: rgba(0, 0, 0, 0.88) !important;
}

/* ── Ant Skeleton ── */
html.dark .ant-skeleton .ant-skeleton-content .ant-skeleton-title,
html.dark .ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph > li {
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%) !important;
}

/* ── Ant Spin ── */
html.dark .ant-spin-text {
  color: #1677ff !important;
}

/* ── Ant Empty ── */
html.dark .ant-empty-description {
  color: rgba(0, 0, 0, 0.25) !important;
}

/* ── Ant Alert ── */
html.dark .ant-alert {
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-alert-info {
  background-color: #e6f4ff !important;
  border-color: #91caff !important;
}
html.dark .ant-alert-success {
  background-color: #f6ffed !important;
  border-color: #b7eb8f !important;
}
html.dark .ant-alert-warning {
  background-color: #fffbe6 !important;
  border-color: #ffe58f !important;
}
html.dark .ant-alert-error {
  background-color: #fff2f0 !important;
  border-color: #ffccc7 !important;
}

/* ── Ant Notification / Message ── */
html.dark .ant-notification-notice,
html.dark .ant-message-notice-content {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
}

/* ── Ant Collapse / Accordion ── */
html.dark .ant-collapse,
html.dark .ant-collapse-header,
html.dark .ant-collapse-content {
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.88) !important;
  border-color: #d9d9d9 !important;
}

/* ── Ant Steps ── */
html.dark .ant-steps-item-title {
  color: rgba(0, 0, 0, 0.88) !important;
}
html.dark .ant-steps-item-description {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* ── Ant Statistic ── */
html.dark .ant-statistic-title {
  color: rgba(0, 0, 0, 0.45) !important;
}
html.dark .ant-statistic-content {
  color: rgba(0, 0, 0, 0.88) !important;
}

/* ── Generic wildcard for remaining Ant CSS-in-JS ── */
html.dark [class*="css-"] {
  color: inherit;
}

/* ═══════════════════════════════════════════════
   TAILWIND DARK: UTILITY OVERRIDES
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   4. Background – dark → light mappings
   ───────────────────────────────────────────── */
.dark\:bg-zinc-950:is(.dark *) { background-color: #ffffff !important; }
.dark\:bg-zinc-900:is(.dark *),
.bg-zinc-900:is(.dark *) { background-color: #f4f4f5 !important; }
.dark\:bg-zinc-800:is(.dark *) { background-color: #e4e4e7 !important; }
.dark\:bg-zinc-700:is(.dark *) { background-color: #d4d4d8 !important; }
.dark\:bg-gray-900:is(.dark *),
.bg-gray-900:is(.dark *) { background-color: #f5f5f5 !important; }
.dark\:\!bg-gray-800:is(.dark *) { background-color: #e5e5e5 !important; }
.dark\:bg-gray-800:is(.dark *),
.bg-gray-800:is(.dark *) { background-color: #e5e5e5 !important; }
.dark\:bg-blue-950:is(.dark *) { background-color: #eff6ff !important; }
.dark\:bg-blue-900:is(.dark *) { background-color: #dbeafe !important; }
.dark\:bg-blue-800:is(.dark *) { background-color: #bfdbfe !important; }
.dark\:bg-green-900\/30:is(.dark *) { background-color: rgb(220 252 231 / 0.3) !important; }
.dark\:bg-amber-950:is(.dark *) { background-color: #fffbeb !important; }
.dark\:bg-red-900:is(.dark *) { background-color: #fee2e2 !important; }
.dark\:bg-yellow-900:is(.dark *) { background-color: #fef9c3 !important; }
.dark\:bg-neutral-500\/15:is(.dark *) { background-color: rgb(228 228 231 / 0.4) !important; }
.bg-black:is(.dark *),
.bg-black\/10:is(.dark *),
.bg-black\/80:is(.dark *) { background-color: #f4f4f5 !important; }

/* ─────────────────────────────────────────────
   5. Text – dark → light mappings
   ───────────────────────────────────────────── */
.dark\:text-white:is(.dark *),
.dark\:text-zinc-50:is(.dark *),
.dark\:text-gray-100:is(.dark *),
.dark\:text-gray-200:is(.dark *),
.dark\:text-neutral-100:is(.dark *),
.text-white:is(.dark *),
.text-zinc-50:is(.dark *) {
  color: #18181b !important;
}
.dark\:text-zinc-200:is(.dark *),
.dark\:text-zinc-300:is(.dark *),
.dark\:text-gray-300:is(.dark *) {
  color: #52525b !important;
}
.dark\:text-zinc-400:is(.dark *),
.dark\:text-gray-400:is(.dark *),
.text-zinc-400:is(.dark *) {
  color: #3f3f46 !important;
}
.dark\:text-blue-400:is(.dark *)  { color: #2563eb !important; }
.dark\:text-blue-100:is(.dark *),
.dark\:text-blue-200:is(.dark *)  { color: #1e40af !important; }
.dark\:text-cyan-400:is(.dark *)  { color: #0891b2 !important; }
.dark\:text-green-400:is(.dark *) { color: #16a34a !important; }
.dark\:text-amber-300:is(.dark *) { color: #b45309 !important; }
.dark\:text-orange-400:is(.dark *){ color: #ea580c !important; }
.dark\:text-purple-400:is(.dark *){ color: #9333ea !important; }
.dark\:text-indigo-400:is(.dark *){ color: #4f46e5 !important; }
.dark\:text-yellow-200:is(.dark *){ color: #92400e !important; }
.dark\:text-neutral-700:is(.dark *){ color: #404040 !important; }
.dark\:text-zinc-900:is(.dark *) { color: #18181b !important; }

/* ─────────────────────────────────────────────
   6. Border – dark → light mappings
   ───────────────────────────────────────────── */
.dark\:border-zinc-800:is(.dark *) { border-color: #e4e4e7 !important; }
.dark\:border-zinc-700:is(.dark *) { border-color: #d4d4d8 !important; }
.dark\:border-gray-700:is(.dark *) { border-color: #d1d5db !important; }
.dark\:border-gray-700\/25:is(.dark *) { border-color: rgb(209 213 219 / 0.25) !important; }
.dark\:border-gray-600:is(.dark *) { border-color: #9ca3af !important; }
.dark\:border-green-800:is(.dark *) { border-color: #86efac !important; }
.dark\:border-amber-800:is(.dark *) { border-color: #fcd34d !important; }

/* ─────────────────────────────────────────────
   7. Hover states
   ───────────────────────────────────────────── */
.dark\:hover\:bg-zinc-800:hover:is(.dark *),
.hover\:bg-zinc-900\/90:hover:is(.dark *) {
  background-color: #e4e4e7 !important;
}
.dark\:hover\:bg-zinc-800\/80:hover:is(.dark *) {
  background-color: rgb(228 228 231 / 0.8) !important;
}
.dark\:hover\:bg-zinc-700:hover:is(.dark *) {
  background-color: #d4d4d8 !important;
}
.dark\:hover\:bg-zinc-50\/90:hover:is(.dark *) {
  background-color: rgb(228 228 231 / 0.9) !important;
}
.dark\:hover\:bg-gray-900:hover:is(.dark *) {
  background-color: #f5f5f5 !important;
}
.dark\:hover\:bg-red-900\/90:hover:is(.dark *) {
  background-color: rgb(254 226 226 / 0.9) !important;
}
.dark\:hover\:bg-muted:hover:is(.dark *) {
  background-color: hsl(var(--muted)) !important;
}
.dark\:hover\:text-white:hover:is(.dark *),
.dark\:hover\:text-zinc-50:hover:is(.dark *) {
  color: #18181b !important;
}

/* ─────────────────────────────────────────────
   8. Focus states
   ───────────────────────────────────────────── */
.dark\:focus\:bg-zinc-800:focus:is(.dark *) {
  background-color: #e4e4e7 !important;
}
.dark\:focus\:text-zinc-50:focus:is(.dark *) {
  color: #18181b !important;
}
.dark\:focus\:ring-zinc-300:focus:is(.dark *) {
  --tw-ring-color: #71717a !important;
}
.dark\:focus-visible\:ring-zinc-300:focus-visible:is(.dark *) {
  --tw-ring-color: #71717a !important;
}

/* ─────────────────────────────────────────────
   9. Ring & ring-offset
   ───────────────────────────────────────────── */
.dark\:ring-zinc-700:is(.dark *) {
  --tw-ring-color: #d4d4d8 !important;
}
.dark\:ring-offset-zinc-950:is(.dark *) {
  --tw-ring-offset-color: #ffffff !important;
}
.dark\:ring-green-900\/20:is(.dark *) {
  --tw-ring-color: rgb(134 239 172 / 0.2) !important;
}

/* ─────────────────────────────────────────────
   10. Placeholder text
   ───────────────────────────────────────────── */
.dark\:placeholder\:text-zinc-400:is(.dark *)::placeholder,
.dark\:placeholder\:text-zinc-400:is(.dark *)::-moz-placeholder {
  color: #71717a !important;
}

/* ─────────────────────────────────────────────
   11. Data-state attribute selectors
   ───────────────────────────────────────────── */
.dark\:data-\[state\=open\]\:bg-zinc-800[data-state=open]:is(.dark *) {
  background-color: #e4e4e7 !important;
}
.dark\:data-\[state\=open\]\:text-zinc-400[data-state=open]:is(.dark *) {
  color: #3f3f46 !important;
}

/* ─────────────────────────────────────────────
   12. Toast / Toaster group variants
   ───────────────────────────────────────────── */
.dark\:group-\[\.toast\]\:bg-zinc-800:is(.dark *) {
  background-color: #e4e4e7 !important;
}
.dark\:group-\[\.toast\]\:bg-zinc-50:is(.dark *) {
  background-color: #fafafa !important;
}
.dark\:group-\[\.toast\]\:text-zinc-400:is(.dark *) {
  color: #3f3f46 !important;
}
.dark\:group-\[\.toast\]\:text-zinc-900:is(.dark *) {
  color: #18181b !important;
}
.dark\:group-\[\.toaster\]\:bg-zinc-950:is(.dark *) {
  background-color: #ffffff !important;
}
.dark\:group-\[\.toaster\]\:border-zinc-800:is(.dark *) {
  border-color: #e4e4e7 !important;
}
.dark\:group-\[\.toaster\]\:text-zinc-50:is(.dark *) {
  color: #18181b !important;
}

/* ─────────────────────────────────────────────
   13. Webkit scrollbars
   ───────────────────────────────────────────── */
:is(.dark *)::-webkit-scrollbar-thumb {
  background-color: rgb(0 0 0 / 0.15) !important;
}
:is(.dark *)::-webkit-scrollbar-thumb:hover {
  background-color: rgb(0 0 0 / 0.25) !important;
}
:is(.dark *)::-webkit-scrollbar-track {
  background-color: rgb(0 0 0 / 0.05) !important;
}

/* ═══════════════════════════════════════════════
   STRUCTURAL ELEMENT OVERRIDES
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   14. Sidebar / navigation surfaces
   ───────────────────────────────────────────── */
html.dark nav,
html.dark aside,
html.dark header {
  background-color: #f4f4f5 !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}
html.dark nav a,
html.dark aside a,
html.dark header a {
  color: #3f3f46 !important;
}
html.dark nav a:hover,
html.dark aside a:hover,
html.dark header a:hover {
  color: #18181b !important;
  background-color: #e4e4e7 !important;
}

/* ─────────────────────────────────────────────
   15. Card / panel surfaces
   ───────────────────────────────────────────── */
html.dark [class*="bg-card"],
html.dark .card {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}

/* ─────────────────────────────────────────────
   16. Input / select / textarea (native elements)
   ───────────────────────────────────────────── */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #71717a !important;
}

/* ─────────────────────────────────────────────
   17. Dropdown / popover / dialog / sheet
   ───────────────────────────────────────────── */
html.dark [role="dialog"],
html.dark [role="listbox"],
html.dark [data-radix-popper-content-wrapper],
html.dark [data-radix-select-viewport] {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}

/* ─────────────────────────────────────────────
   18. Table (native elements)
   ───────────────────────────────────────────── */
html.dark table,
html.dark thead,
html.dark tbody,
html.dark tr,
html.dark th,
html.dark td {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}
html.dark tr:hover {
  background-color: #f4f4f5 !important;
}

/* ─────────────────────────────────────────────
   19. Login button – shadcn "default" variant
       bg-zinc-900 + text-zinc-50 in base;
       dark:bg-zinc-50 + dark:text-zinc-900 in dark.
       Both pairs render poorly with our overrides.
       Force a proper primary look.
   ───────────────────────────────────────────── */
html.dark .bg-zinc-900.text-zinc-50,
.bg-zinc-900.text-zinc-50 {
  background-color: #18181b !important;
  color: #fafafa !important;
}
html.dark .bg-zinc-900.text-zinc-50:hover,
.bg-zinc-900.text-zinc-50:hover {
  background-color: #27272a !important;
  color: #fafafa !important;
}

/* ─────────────────────────────────────────────
   20. Recharts / SVG charts – ensure labels visible
   ───────────────────────────────────────────── */
html.dark .recharts-text,
html.dark .recharts-cartesian-axis-tick-value,
html.dark .recharts-label,
html.dark .recharts-legend-item-text {
  fill: rgba(0, 0, 0, 0.65) !important;
  color: rgba(0, 0, 0, 0.65) !important;
}
html.dark .recharts-cartesian-grid line {
  stroke: rgba(0, 0, 0, 0.08) !important;
}

/* ─────────────────────────────────────────────
   21. MiniChart / inline dashboard widgets
   ───────────────────────────────────────────── */
html.dark .bg-neutral-200\/15:is(.dark *) {
  background-color: rgb(228 228 231 / 0.35) !important;
}

/* ─────────────────────────────────────────────
   22. Visibility toggle – dark:hidden / dark:block
       Ensure elements meant for light mode show,
       dark-only elements hide.
   ───────────────────────────────────────────── */
.dark\:hidden:is(.dark *) { display: none !important; }
.dark\:block:is(.dark *)  { display: block !important; }