/* Authelia custom theme — flat Lit-inspired design with Material-style controls.
 * Load AFTER Authelia's original CSS.
 * Tested selectors are based on the supplied Authelia Tailwind 4.3.3 CSS
 * and the supplied OTP component HTML.
 */

/* 1. Theme tokens: use Authelia's existing design system. */
:root,
[data-theme="light"] {
  --background: #ffffff;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --primary: #4f46e5;
  --primary-foreground: #ffffff;
  --secondary: #eef2ff;
  --secondary-foreground: #3730a3;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #eef2ff;
  --accent-foreground: #3730a3;
  --border: #e5e7eb;
  --input: #d1d5db;
  --ring: #6366f1;
  --radius: 0.75rem;
  color-scheme: light;
}

[data-theme="dark"],
[data-theme="grey"],
[data-theme="oled"] {
  --background: #111111;
  --foreground: #f5f5f5;
  --card: #1c1c1c;
  --card-foreground: #f5f5f5;
  --popover: #1c1c1c;
  --popover-foreground: #f5f5f5;
  --primary: #a5b4fc;
  --primary-foreground: #161b30;
  --secondary: #292929;
  --secondary-foreground: #e0e7ff;
  --muted: #242424;
  --muted-foreground: #a3a3a3;
  --accent: #27273b;
  --accent-foreground: #e0e7ff;
  --border: #333333;
  --input: #454545;
  --ring: #a5b4fc;
  --radius: 0.75rem;
  color-scheme: dark;
}

/* 2. Overall look. No external fonts or assets required. */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--background);
  background-image: none;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

/* 3. Cards: Authelia uses Tailwind classes; keep the selectors conservative. */
.bg-card {
  background-color: var(--card);
}
.bg-card.rounded-xl,
.bg-card.rounded-lg,
.bg-card.shadow-lg,
.bg-card.shadow-md,
[data-slot="card"] {
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.035);
}

/* 4. Type: add polish without overriding heading layout utility classes. */
h1, h2, h3, h4 {
  color: var(--foreground);
  letter-spacing: -0.035em;
  line-height: 1.2;
}
label { font-weight: 500; }

/* 5. Form elements (exclude TOTP digits and non-text controls). */
input:is([type="text"], [type="password"], [type="email"], [type="search"]):not([data-length]),
textarea,
select {
  border-color: var(--input);
  border-radius: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:is([type="text"], [type="password"], [type="email"], [type="search"]):not([data-length]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--ring);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* 6. Buttons: target primary-colored buttons, not icon-only or destructive buttons. */
button.bg-primary,
a.bg-primary,
button[data-slot="button"].bg-primary {
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
  transition: filter 150ms ease, box-shadow 150ms ease;
}
button.bg-primary:hover:not(:disabled),
a.bg-primary:hover {
  filter: brightness(1.06);
  box-shadow: none;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

/* 7. OTP input: fix six digits wrapping on iPhone. */
#otp-input {
  display: inline-block;
  max-width: 100%;
}
#otp-input > div[role="group"] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
}
#otp-input > div[role="group"] > input {
  width: 36px;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  flex: 0 1 36px;
  border: 1px solid var(--input);
  border-radius: 9px;
  background: var(--card);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#otp-input > div[role="group"] > input:focus-visible {
  border-color: var(--ring);
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

/* 8. Small-screen refinements. */
@media (max-width: 360px) {
  #otp-input > div[role="group"] { gap: 3px; }
  #otp-input > div[role="group"] > input {
    width: 32px;
    height: 38px;
    flex-basis: 32px;
  }
}

/* Reduced motion for accessibility. */
@media (prefers-reduced-motion: reduce) {
  button.bg-primary, a.bg-primary, input, textarea, select {
    transition: none;
  }
}

/* Ghost buttons — light mode */
:root {
    --ghost-text: #374151;
    --ghost-hover: #F1F3F5;
    --ghost-border: #D1D5DB;
}

button[data-variant="ghost"] {
    color: var(--ghost-text);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 8px;
    height: 32px;
    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease;
}

button[data-variant="ghost"]:hover {
    color: #111827;
    background-color: var(--ghost-hover);
}

/* Consistent styling for navigation buttons */
button[data-variant="ghost"] {
    color: #374151;
    background: transparent;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    transition: background-color 150ms, border-color 150ms;
}

button[data-variant="ghost"]:hover {
    color: #111827;
    background: #F1F3F5;
    border-color: #9CA3AF;
}

/* Dark mode */
.dark button[data-variant="ghost"] {
    color: #D1D5DB;
    background: transparent;
    border-color: #444444;
}

.dark button[data-variant="ghost"]:hover {
    color: #FFFFFF;
    background: #292929;
    border-color: #666666;
}