/* ============================================================
   Authelia portal theme overlay — "Midnight Indigo"
   Loaded AFTER Authelia's own index.<hash>.css, so it wins.

   Strategy:
   1) BASE (guaranteed): override the Tailwind v4 design tokens that
      Authelia always declares on :root / [data-theme=...].
   2) BASE (guaranteed): plain element selectors (body, input,
      button[type=submit]) that any login form must contain.
   3) ENHANCEMENT (best-effort): [data-slot=...] hooks that exist in
      Authelia's shadcn-style component set. If a slot name ever
      changes, only the polish is lost — never the theme or the
      form's usability.
   ============================================================ */

/* ---------- 1) Design tokens (dark) ---------- */
[data-theme="dark"] {
  --background: oklch(19% 0.045 275);
  --foreground: oklch(96% 0.008 275);

  --card: oklch(23.5% 0.05 275);
  --card-foreground: oklch(96% 0.008 275);
  --popover: oklch(23.5% 0.05 275);
  --popover-foreground: oklch(96% 0.008 275);

  --primary: oklch(58% 0.2 275);
  --primary-foreground: oklch(99% 0.005 275);
  --ring: oklch(58% 0.2 275);

  --secondary: oklch(60% 0.19 300);
  --secondary-foreground: oklch(99% 0.005 275);

  --muted: oklch(27% 0.04 275);
  --muted-foreground: oklch(78% 0.02 275);
  --accent: oklch(30% 0.06 275);
  --accent-foreground: oklch(96% 0.01 275);

  --border: oklch(38% 0.05 275);
  --input: oklch(34% 0.045 275);
  --divider: oklch(0% 0 0 / 0.16);

  --destructive: oklch(62% 0.21 25);
  --destructive-foreground: oklch(99% 0.005 275);
  --success: oklch(70% 0.17 150);
  --success-foreground: oklch(18% 0.04 150);
  --warning: oklch(80% 0.16 80);
  --warning-foreground: oklch(20% 0.05 80);
  --info: oklch(68% 0.15 230);
  --info-foreground: oklch(18% 0.04 230);

  --radius: 0.75rem;
  color-scheme: dark;
}

/* ---------- 2) Backdrop ---------- */
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 620px at 12% -8%, oklch(45% 0.16 285 / 0.30), transparent 60%),
    radial-gradient(900px 560px at 92% 8%, oklch(48% 0.15 300 / 0.22), transparent 62%),
    radial-gradient(800px 800px at 50% 120%, oklch(40% 0.12 265 / 0.28), transparent 60%),
    var(--background);
  background-attachment: fixed;
  min-height: 100dvh;
}

/* ---------- 3) Text inputs (guaranteed on a login form) ---------- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) {
  background: oklch(21% 0.04 275);
  border: 1px solid oklch(40% 0.06 275);
  color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):hover {
  border-color: oklch(48% 0.08 275);
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  background: oklch(23% 0.045 275);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px oklch(58% 0.2 275 / 0.30);
  outline: 2px solid transparent; /* visible focus ring via box-shadow above */
}
[data-theme="dark"] input[aria-invalid="true"] {
  border-color: var(--destructive) !important;
}

/* ---------- 4) Primary submit button (guaranteed) ---------- */
[data-theme="dark"] button[type="submit"] {
  background: linear-gradient(180deg, oklch(62% 0.2 275) 0%, oklch(55% 0.2 278) 100%);
  border: 1px solid oklch(70% 0.18 275 / 0.55);
  color: var(--primary-foreground);
  font-weight: 600;
  box-shadow:
    0 1px 0 0 oklch(100% 0 0 / 0.14) inset,
    0 8px 20px -8px oklch(55% 0.2 278 / 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
[data-theme="dark"] button[type="submit"]:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 0 oklch(100% 0 0 / 0.16) inset,
    0 12px 26px -10px oklch(55% 0.2 278 / 0.75);
}
[data-theme="dark"] button[type="submit"]:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
[data-theme="dark"] button[type="submit"]:focus-visible {
  box-shadow:
    0 1px 0 0 oklch(100% 0 0 / 0.16) inset,
    0 0 0 3px oklch(58% 0.2 275 / 0.45);
  outline: 2px solid transparent;
}

/* ---------- 5) Enhancement: shadcn slots (polish only) ---------- */
[data-theme="dark"] [data-slot="card"] {
  background: linear-gradient(180deg, oklch(27% 0.05 275) 0%, oklch(23.5% 0.05 275) 100%);
  border: 1px solid oklch(42% 0.07 275);
  box-shadow:
    0 1px 0 0 oklch(100% 0 0 / 0.05) inset,
    0 24px 60px -20px oklch(8% 0.04 275 / 0.75),
    0 8px 24px -12px oklch(8% 0.04 275 / 0.6);
}
[data-theme="dark"] button[data-slot="button"][data-variant="default"] {
  background: linear-gradient(180deg, oklch(62% 0.2 275) 0%, oklch(55% 0.2 278) 100%);
  border: 1px solid oklch(70% 0.18 275 / 0.55);
  color: var(--primary-foreground);
}
[data-theme="dark"] [data-slot="input-group"] {
  background: oklch(21% 0.04 275);
  border-color: oklch(40% 0.06 275);
}
[data-theme="dark"] [data-slot="input-group"]:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px oklch(58% 0.2 275 / 0.28);
}

/* ---------- 6) Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] button[type="submit"],
  [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) {
    transition: none !important;
  }
  [data-theme="dark"] button[type="submit"]:hover {
    transform: none;
  }
}