/* Admin-specific overrides. Tailwind utility classes carry most of the styling;
   Radzen base styles are pulled in via App.razor link tag. */
html, body { height: 100%; }
html.dark { color-scheme: dark; }

/* The dialog host owns the frame around UiDialogShell. Radzen's light defaults
   otherwise leave dark form labels on a white title/content surface. */
.rz-dialog {
  --rz-dialog-background-color: var(--c-surface);
  --rz-dialog-title-background-color: var(--c-surface);
  --rz-dialog-title-color: var(--c-content);
  --rz-dialog-close-color: var(--c-content-muted);
  --rz-dialog-close-hover-color: var(--c-content);
  --rz-dialog-title-border: 1px solid var(--c-border-default);
  color: var(--c-content);
}

/* Radzen's unlayered input rules override Tailwind's layered text utilities.
   Keep Admin controls readable across both native and CampinOS.UI fields;
   kiosk styling remains owned by its host. A blue surface separates editable
   fields from the surrounding dark cards without looking disabled. */
.light {
  --admin-field-surface: var(--c-surface);
  --admin-field-border: var(--c-border-strong);
  --admin-field-placeholder: var(--c-content-subtle);
}

.dark {
  --admin-field-surface: #162b46;
  --admin-field-border: #6683a4;
  --admin-field-placeholder: #adc3da;
  --rz-input-background-color: var(--admin-field-surface);
  --rz-input-text-color: var(--c-content);
  --rz-input-placeholder-color: var(--admin-field-placeholder);
  --rz-input-border: 1px solid var(--admin-field-border);
}

.dark :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="hidden"]), textarea, select) {
  background-color: var(--admin-field-surface);
  color: var(--c-content);
  caret-color: var(--c-content);
  color-scheme: inherit;
}

.dark :is(input, textarea)::placeholder {
  color: var(--admin-field-placeholder);
  opacity: 1;
}

.dark :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="hidden"]), textarea, select):not(:disabled):not([aria-invalid="true"]):not(.invalid) {
  border-color: var(--admin-field-border);
}

.dark :is(input, textarea, select):is([aria-invalid="true"], .invalid) {
  border-color: var(--c-danger);
}

.dark :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--c-ring);
  outline-offset: 2px;
}

/*
  FocusOnNavigate (Routes.razor, Selector="h1") calls h1.focus() after every
  Blazor navigation so screen readers announce the new page. Without
  :focus-visible the browser draws its default outline on every page load —
  to sighted operators it looks like the page title is selected.

  Suppress :focus for the programmatic case (mouse / page-load focus) and
  keep :focus-visible intact for keyboard tab navigation. The emerald
  outline matches the rest of the admin's accent color.
*/
h1:focus { outline: none; }
h1:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
  border-radius: 4px;
}

/* #552 mobile nav drawer is now CSS-only via Tailwind utilities on the <aside>
   (peer-checked:translate-x-0 / -translate-x-full / lg:static) driven by the
   #admin-nav-toggle checkbox in AdminLayout — no bespoke rules needed here. */