/* Fensom HomeHub skin for Authelia (injected by the authelia-skin nginx proxy). 2026-10-16, second-factor and signed-in screens matched to the login card 2026-10-17
   Authelia's UI is Tailwind + CSS variables, so most of the look comes from the variables;
   the rest targets Authelia's stable element ids. After editing, bump ?v= in ../nginx.conf. */
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("./fonts/fira-sans-latin-400-normal.woff") format("woff"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url("./fonts/fira-sans-latin-600-normal.woff") format("woff"); }
@font-face { font-family: "Fira Sans"; font-weight: 800; font-display: swap; src: url("./fonts/fira-sans-latin-800-normal.woff") format("woff"); }

html, html[data-theme], body, body[data-theme] {
  --background: #0E1218; --foreground: #ECEFF3;
  --card: #161C24; --card-foreground: #ECEFF3;
  --popover: #1B222C; --popover-foreground: #ECEFF3;
  --primary: #2A8FDB; --primary-foreground: #FFFFFF;
  --muted: #1F2731; --muted-foreground: #9AA6B4;
  --accent: #1F2731; --accent-foreground: #ECEFF3;
  --border: #2A3441; --input: #2E3947; --ring: #3A9BE0;
  --radius: 12px; --custom-icon: #ECEFF3; --custom-loading-bar: #3A9BE0; --divider: #2A3441;
  color-scheme: dark;
}
html, body {
  min-height: 100%;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(42, 143, 219, .28), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(8, 121, 194, .16), transparent 60%),
    #0E1218 !important;
  background-attachment: fixed !important;
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* every stage (login, 2FA, consent, signed-in) becomes a centred card */
#first-factor-stage > div, #second-factor-stage > div,
#reset-password-step1-stage > div, #reset-password-step2-stage > div {
  background: linear-gradient(180deg, rgba(27, 34, 44, .92), rgba(20, 26, 34, .92));
  border: 1px solid #263140;
  border-top: 3px solid #2A8FDB;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  padding-top: 28px !important; padding-bottom: 22px !important;
  max-width: 420px !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#first-factor-stage, #second-factor-stage, #reset-password-step1-stage, #reset-password-step2-stage { min-height: 92vh !important; padding: 16px; }

/* logo lockup (icon + "Fensom HomeHub") replaces the small 64px logo */
#first-factor-stage img { width: 210px !important; max-width: 70%; height: auto; margin-top: 0 !important; }

/* "Sign in" heading: a quiet subtitle under the lockup */
#first-factor-stage h5 { font-size: 1rem !important; color: #9AA6B4; letter-spacing: .02em; margin-top: 4px; }

/* inputs */
#username-textfield, #password-textfield, div[id$="-stage"] input[type="text"], div[id$="-stage"] input[type="password"] {
  background: #10161E !important; border-color: #2E3947 !important; border-radius: 10px !important;
}
#username-textfield:focus, #password-textfield:focus { border-color: #3A9BE0 !important; box-shadow: 0 0 0 3px rgba(58, 155, 224, .25) !important; }

/* primary buttons */
#sign-in-button, div[id$="-stage"] button.bg-primary {
  height: 46px !important; border-radius: 10px !important;
  background: linear-gradient(180deg, #3A9BE0, #1873BF) !important;
  text-transform: none !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(24, 115, 191, .35);
}
#sign-in-button:hover, div[id$="-stage"] button.bg-primary:hover { filter: brightness(1.08); }

#reset-password-button { color: #6CB6EE !important; font-size: .95rem !important; }

/* language picker and footer: present but quiet */
#language-button { opacity: .55; font-size: .85rem; }
#language-button:hover { opacity: 1; }
a[href*="authelia.com"] { color: #5E6B7A !important; }

/* signed-in / 2FA pages: logo at the same size as on the login page (the logo is img.mx-auto.w-16 on every page) */
img.mx-auto.w-16 { width: 210px !important; max-width: 70%; height: auto; }

/* ---- 2FA and signed-in screens: same card look as the login page (2026-10-17) ---- */
/* "Hi David": white subtitle under the lockup */
#second-factor-stage h5 { font-size: 1.25rem !important; color: #ECEFF3; margin-top: 4px; }
/* Logout | Switch user | Methods: quiet blue links like "Reset password?" instead of red capitals */
#logout-button, #switch-user-button, #methods-button {
  color: #6CB6EE !important; text-transform: none !important; letter-spacing: .01em !important;
  font-size: .95rem !important; font-weight: 400 !important; padding: 0 10px !important; height: 32px !important;
}
#logout-button:hover, #switch-user-button:hover, #methods-button:hover { background: rgba(58, 155, 224, .10) !important; }
div:has(> #logout-button) { color: #3A4656; }
/* the inner bordered box disappears into the card */
#second-factor-stage div.rounded-\[10px\].border {
  border: 0 !important; padding: 8px 0 4px !important; margin: 4px 0 0 !important; min-width: 0 !important; background: transparent !important;
}
#second-factor-stage h6 { font-size: 1.05rem !important; font-weight: 600 !important; color: #9AA6B4; letter-spacing: .02em; }
/* one-time code boxes styled like the login fields */
#otp-input input {
  width: 42px !important; height: 50px !important; margin: 0 3px !important;
  background: #10161E !important; color: #ECEFF3 !important; font-size: 1.3rem !important; font-weight: 600;
  border: 1px solid #2E3947 !important; border-radius: 10px !important; outline: none;
}
#otp-input input:focus { border-color: #3A9BE0 !important; box-shadow: 0 0 0 3px rgba(58, 155, 224, .25) !important; }
/* countdown timer in HomeHub blue rather than black and white */
[id="2fa-container"] svg circle[stroke="#000"] { stroke: #2E3947; }
[id="2fa-container"] svg circle[fill="#000"] { fill: #10161E; }
[id="2fa-container"] svg circle[stroke="#FFFFFF"] { stroke: #3A9BE0; }
/* "Authenticated" tick in the same blue */
#authenticated-stage svg { color: #3A9BE0 !important; }
#authenticated-stage p { color: #ECEFF3; font-size: 1.05rem; }
#register-link { color: #6CB6EE !important; font-size: .95rem; }

/* ---- Settings pages (/settings, two-factor devices): same HomeHub look (2026-10-17) ---- */
/* top bar: dark glass instead of Authelia's bright blue */
nav.fixed.bg-primary {
  background: rgba(14, 18, 24, .82) !important; color: #ECEFF3 !important;
  border-bottom: 1px solid #263140; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
nav.fixed.bg-primary h6 { font-weight: 600 !important; letter-spacing: .01em; }
nav.fixed.bg-primary #settings-menu:hover { background: rgba(58, 155, 224, .12) !important; }
/* page: centred column with breathing room on phones */
nav.fixed.bg-primary + main { padding: 76px 16px 32px !important; max-width: 760px; margin: 0 auto; width: 100%; }
nav.fixed.bg-primary + main .grid.gap-4 { gap: 20px !important; }
/* panels: the login card */
nav.fixed.bg-primary + main [data-slot="card"] {
  background: linear-gradient(180deg, rgba(27, 34, 44, .92), rgba(20, 26, 34, .92)) !important;
  border: 1px solid #263140 !important; border-top: 3px solid #2A8FDB !important; border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45) !important; color: #ECEFF3;
}
/* a registered device inside a panel: an inset row like the login fields */
nav.fixed.bg-primary + main [data-slot="card"] [data-slot="card"] {
  background: #10161E !important; border: 1px solid #2E3947 !important; border-radius: 12px !important; box-shadow: none !important;
}
nav.fixed.bg-primary + main [data-slot="card"] [data-slot="card"] .p-6 { padding: 14px 16px !important; }
nav.fixed.bg-primary + main h4, nav.fixed.bg-primary + main h5 { color: #ECEFF3; font-weight: 600 !important; }
nav.fixed.bg-primary + main p, nav.fixed.bg-primary + main legend { color: #9AA6B4 !important; }
/* "Add" buttons: outlined in HomeHub blue, sentence case */
nav.fixed.bg-primary + main button[data-variant="outline"] {
  text-transform: none !important; font-size: .95rem !important; font-weight: 600 !important; letter-spacing: .01em;
  color: #6CB6EE !important; background: rgba(58, 155, 224, .08) !important;
  border: 1px solid #3A9BE0 !important; border-radius: 10px !important; height: 40px; padding: 0 18px !important;
}
nav.fixed.bg-primary + main button[data-variant="outline"]:hover:not(:disabled) { background: rgba(58, 155, 224, .18) !important; }
nav.fixed.bg-primary + main button[data-variant="outline"]:disabled { opacity: .35 !important; }
/* info / delete icons */
nav.fixed.bg-primary + main button[data-variant="ghost"] { color: #9AA6B4 !important; border-radius: 10px !important; }
nav.fixed.bg-primary + main button[data-variant="ghost"]:hover { color: #ECEFF3 !important; background: rgba(58, 155, 224, .12) !important; }
#one-time-password-delete:hover, [id$="-delete"]:hover { color: #F07178 !important; }
/* side menu */
[data-slot="sheet-content"] {
  background: linear-gradient(180deg, #161C24, #10151C) !important; border-right: 1px solid #263140 !important;
  box-shadow: 12px 0 40px rgba(0, 0, 0, .5) !important;
}
[data-slot="sheet-content"] h2 { font-weight: 600 !important; color: #ECEFF3 !important; }
[data-slot="sheet-content"] li button { color: #C9D2DC; border-left: 3px solid transparent; }
[data-slot="sheet-content"] li button:hover { background: rgba(58, 155, 224, .10) !important; color: #ECEFF3; }
[data-slot="sheet-content"] li button.bg-accent { background: rgba(58, 155, 224, .14) !important; border-left-color: #3A9BE0; color: #ECEFF3; }
[data-slot="sheet-content"] li button svg { color: #6CB6EE !important; }
#settings-menu-close svg { color: #9AA6B4 !important; }
[data-slot="sheet-overlay"] { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* Security page: wider card, fields like the login inputs, button like "Sign in" */
nav.fixed.bg-primary + main .h-screen { padding-top: 8px !important; height: auto !important; }
nav.fixed.bg-primary + main .h-screen > [data-slot="card"] { width: min(440px, 100%); }
nav.fixed.bg-primary + main div.border.rounded.mb-2 {
  background: #10161E; border-color: #2E3947 !important; border-radius: 10px !important; padding: 12px 14px !important; color: #ECEFF3;
}
nav.fixed.bg-primary + main div.border.rounded.mb-2 p { color: #ECEFF3 !important; }
#change-password-button {
  width: 100%; height: 46px !important; margin-top: 6px; border-radius: 10px !important;
  background: linear-gradient(180deg, #3A9BE0, #1873BF) !important; color: #fff !important;
  text-transform: none !important; font-size: 1rem !important; font-weight: 600 !important; box-shadow: 0 8px 18px rgba(24, 115, 191, .35);
}
/* device rows always use the full panel width (Authelia puts them in quarter-width grid columns on wide screens) */
nav.fixed.bg-primary + main [data-slot="card"] [class*="col-span-"] { grid-column: 1 / -1 !important; }
nav.fixed.bg-primary + main [data-slot="card"] [data-slot="card"] .min-w-0 span { white-space: nowrap; }
/* the "(NONE)" attestation label after a WebAuthn device name: quiet */
[id^="webauthn-credential-"][data-slot="card"] .flex-row > span:not(.font-bold) { color: #9AA6B4; font-size: .8rem; margin-left: 6px; }
/* Options: default-method choices on one line */
nav.fixed.bg-primary + main [data-slot="radio-group"] { flex-wrap: wrap; gap: 12px 28px !important; }
nav.fixed.bg-primary + main [data-slot="radio-group"] label { white-space: nowrap; }
nav.fixed.bg-primary + main .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }