/**
 * App theme foundations (class-based dark mode, Unfold CSS variables).
 * Unfold dark utilities use :where(.dark) (zero specificity), so site.css .bg-white
 * wins when loaded later. These rules restore correct surfaces and text in dark mode.
 */

html.dark {
  color-scheme: dark;
}

html:not(.dark) {
  color-scheme: light;
}

/* Light theme accent — recon cyan (matches theme-recon-light) */
html.light {
  --recon-accent: #13b5ea;
  --recon-accent-deep: #0891b2;
  --color-primary-50: rgba(19, 181, 234, 0.12);
  --color-primary-100: rgba(19, 181, 234, 0.2);
  --color-primary-200: rgba(19, 181, 234, 0.35);
  --color-primary-300: #67d4f7;
  --color-primary-400: #3cc9f0;
  --color-primary-500: #13b5ea;
  --color-primary-600: #0891b2;
  --color-primary-700: #0e7490;
  --color-primary-800: #0e7490;
  --color-primary-900: #155e75;
  --color-primary-950: rgba(19, 181, 234, 0.08);
}

html.light .btn-primary {
  background: linear-gradient(135deg, var(--recon-accent) 0%, var(--recon-accent-deep) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
}

html.light .btn-primary:hover {
  background: linear-gradient(135deg, #3cc9f0 0%, var(--recon-accent-deep) 100%);
  border-color: transparent;
  color: #fff;
}

html.light .text-primary {
  color: var(--color-primary-600) !important;
}

html.light .form-control:focus,
html.light select.form-control:focus {
  border-color: var(--recon-accent);
  outline: 2px solid rgba(19, 181, 234, 0.25);
  outline-offset: 0;
}

/* Surfaces: bg-white must not override dark:bg-* on app pages */
html.dark .dark\:bg-base-950,
html.dark .bg-white.dark\:bg-base-950,
html.dark .bg-base-50.dark\:bg-base-950 {
  background-color: var(--color-base-950);
}

html.dark .dark\:bg-base-900,
html.dark .bg-white.dark\:bg-base-900,
html.dark .ope-shell__sidebar.dark\:bg-base-900,
html.dark .ope-shell__sidebar.bg-white {
  background-color: var(--color-base-900);
}

html.dark .dark\:bg-base-800,
html.dark .bg-white.dark\:bg-base-800,
html.dark .bg-base-50.dark\:bg-base-800 {
  background-color: var(--color-base-800);
}

html.dark .dark\:bg-base-700 {
  background-color: var(--color-base-700);
}

/* Borders: border-base-200 stays light (high contrast) unless dark:border-* wins */
html.dark .border-base-200,
html.dark .border-base-200.dark\:border-base-700,
html.dark .border-base-200.dark\:border-base-800,
html.dark .border-b.border-base-200,
html.dark .border-b.dark\:border-base-700,
html.dark .border-b.dark\:border-base-800,
html.dark .border-r.border-base-200,
html.dark .border-r.dark\:border-base-800,
html.dark .dark\:border-base-700,
html.dark .dark\:border-base-800 {
  border-color: var(--color-base-700);
}

html.dark .border-r.border-base-200,
html.dark .border-r.dark\:border-base-800,
html.dark .ope-shell__sidebar {
  border-right-color: var(--color-base-800);
}

html.dark header.border-b,
html.dark header.border-b.border-base-200 {
  border-bottom-color: var(--color-base-800);
}

html.dark .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

html.dark .divide-base-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-base-200.dark\:divide-base-700 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-base-200.dark\:divide-base-800 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-base-700 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-base-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-base-700);
}

/* Dialog / modal panels */
html.dark .dash-dialog .ui-dialog__panel {
  background-color: var(--color-base-900);
}

/* Semantic helpers for new markup */
.ui-surface {
  background-color: #fff;
  color: var(--color-base-700);
  border: 1px solid var(--color-base-200);
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.05);
}

html.dark .ui-surface {
  background-color: var(--color-base-900);
  color: var(--color-base-200);
  border-color: var(--color-base-700);
  box-shadow: none;
}

.ui-surface-muted {
  background-color: var(--color-base-50);
}

html.dark .ui-surface-muted {
  background-color: var(--color-base-800);
}