/* Lowe family skin for Authelia. Injected by the authelia-skin nginx (see /tank/apps/authelia/compose.yaml).
   Colors match home.lowefam.app (Homepage, slate). Only CSS: Authelia's logic is untouched. */
[data-theme][data-theme], :root:root {
  --background: #1e293b;
  --foreground: #e2e8f0;
  --card: #273449;
  --card-foreground: #e2e8f0;
  --popover: #273449;
  --popover-foreground: #e2e8f0;
  --primary: #4f8df7;
  --primary-foreground: #fff;
  --secondary: #94a3b8;
  --secondary-foreground: #0f172a;
  --muted: #334155;
  --muted-foreground: #94a3b8;
  --accent: #334155;
  --accent-foreground: #e2e8f0;
  --border: rgba(148, 163, 184, .18);
  --input: rgba(148, 163, 184, .28);
  --ring: #60a5fa;
  --divider: rgba(148, 163, 184, .18);
  --custom-icon: #e2e8f0;
  --custom-loading-bar: #60a5fa;
}
html, body, #root { background: #1e293b !important; color: #e2e8f0; }

/* Page title ("Sign in", "Hi Corey") */
h5 { font-weight: 500 !important; letter-spacing: -.01em; }

/* Card around the form and the code */
#first-factor-stage form, #second-factor-stage .border-border.p-8 {
  background: #273449;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
#first-factor-stage form { padding: 24px; margin-top: 8px; }

/* Text fields */
#first-factor-stage input[type=text], #first-factor-stage input[type=password] {
  background: #1e293b !important; color: #e2e8f0 !important; border-radius: 10px !important;
}

/* Main button: same blue gradient as the logo */
#sign-in-button {
  background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
  border: 0 !important; border-radius: 10px !important; height: 44px;
  text-transform: none !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important;
}
#sign-in-button:hover { filter: brightness(1.08); }

/* "Logout | Switch user | Methods" row: quiet grey links instead of pink capitals */
#second-factor-stage .w-full > button, #methods-button, #logout-button, #switch-user-button {
  color: #94a3b8 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 14px !important; font-weight: 500 !important; padding: 4px 8px !important; height: auto !important;
}
#second-factor-stage .w-full > button:hover, #methods-button:hover { color: #e2e8f0 !important; background: transparent !important; }
#second-factor-stage .flex-col.items-center > .w-full { color: #475569; }

/* Countdown dial: soft blue on slate instead of black and white */
[id="2fa-container"] svg circle:nth-of-type(1) { stroke: #475569 !important; }
[id="2fa-container"] svg circle:nth-of-type(2) { fill: #1e293b !important; }
[id="2fa-container"] svg circle:nth-of-type(3) { stroke: #60a5fa !important; }

/* Code boxes */
#otp-input input {
  background: #1e293b !important; color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .35) !important; border-radius: 10px !important;
  width: 44px !important; height: 52px !important; font-size: 22px !important; font-weight: 600;
  margin: 0 4px !important;
}
#otp-input input:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, .25); outline: none; }
#otp-input [role=group] { display: flex; flex-wrap: nowrap; justify-content: center; }
#register-link { color: #60a5fa !important; font-size: 14px !important; }

/* Phones: keep all six boxes on one line */
@media (max-width: 480px) {
  #second-factor-stage > div, #first-factor-stage > div { padding-left: 16px !important; padding-right: 16px !important; }
  #second-factor-stage .border-border.p-8 { padding: 24px 12px !important; min-width: 0 !important; }
  #otp-input input { width: 40px !important; height: 48px !important; margin: 0 3px !important; font-size: 20px !important; }
}