/* Golden hour skin for Authelia's login + settings pages.
   Added to the page by authelia-skin; scene.js draws the sun and ridges behind it. */
@import url("/public/fonts/fonts.css");

body[data-theme] {
  --plum:#3d1f40; --paper:#fff6e8; --line:#ead9c4; --sun:#ffd27d; --accent-warm:#e0623f;
  --background:transparent; --foreground:#2d1b2e; --card:#fff6e8; --card-foreground:#2d1b2e;
  --popover:#fff6e8; --popover-foreground:#2d1b2e;
  --primary:#3d1f40; --primary-foreground:#fff6e8; --ring:#e0623f;
  --secondary:#e0623f; --secondary-foreground:#fff6e8;
  --muted:#f3e6d3; --muted-foreground:#7a5d6b; --accent:#f3e6d3; --accent-foreground:#3d1f40;
  --border:#ead9c4; --input:#ead9c4; --divider:rgba(61,31,64,.14);
  --custom-icon:#3d1f40; --custom-loading-bar:#fff6e8; --radius:14px;
  background:linear-gradient(180deg, #ffd3a1 0%, #ffab7f 30%, #f2776c 55%, #b24a72 78%, #4a2552 100%) fixed !important;
  font-family:"DM Sans", system-ui, sans-serif !important;
}
#root { position:relative; z-index:1; }

/* Scene (same as the rest of the site) */
.scene { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.sun { position:absolute; left:50%; top:56%; width:min(76vw, 560px); aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, #fff3c4 0%, #ffd27d 40%, rgba(255,190,110,0) 70%); animation:fl-breathe 9s ease-in-out infinite; }
@keyframes fl-breathe { 50% { transform:translate(-50%, -50%) scale(1.04); } }
.ridge { position:absolute; left:-5%; width:110%; bottom:0; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }

/* Each stage's content becomes a paper card */
[id$="-stage"] > div {
  background:var(--paper); border-radius:26px; padding:30px 28px 18px !important; max-width:430px !important; width:calc(100% - 32px) !important;
  box-shadow:0 30px 80px rgba(74,37,82,.35); position:relative; overflow:hidden; animation:fl-pop .8s cubic-bezier(.2,.8,.2,1) both;
}
[id$="-stage"] > div::before { content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("/public/grain.svg"); }
[id$="-stage"] > div > * { position:relative; }
@keyframes fl-pop { from { opacity:0; transform:translateY(20px) scale(.985); } }
[id$="-stage"] h5, [id$="-stage"] h4, [id$="-stage"] h3 { font-family:Fraunces, Georgia, serif !important; font-weight:700 !important;
  font-size:34px !important; letter-spacing:-.03em; color:var(--plum); }
[id$="-stage"] img[alt="Logo"] { width:120px !important; }

/* Fields */
input[data-slot="floating-input"], input[data-slot="input"], [id$="-stage"] input:not([type="checkbox"]) {
  background:#fffdf8 !important; border:2px solid var(--line) !important; border-radius:12px !important; }
input[data-slot="floating-input"]:focus, [id$="-stage"] input:focus { border-color:var(--accent-warm) !important; box-shadow:none !important; }
label[for$="-textfield"] { color:var(--muted-foreground) !important; }

/* Buttons */
[data-slot="button"][data-variant="default"] {
  height:50px !important; border-radius:14px !important; font-weight:700 !important; font-size:16px !important; text-transform:none !important;
  letter-spacing:.01em; transition:transform .15s, box-shadow .2s !important; }
[data-slot="button"][data-variant="default"]:hover { background:var(--plum) !important; transform:translateY(-2px); box-shadow:0 8px 0 -2px rgba(61,31,64,.25); }
#reset-password-button, [id$="-stage"] a { color:var(--accent-warm) !important; font-weight:500; }
#language-button { background:rgba(255,246,232,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--plum); font-weight:700; }

/* Remember me: a little switch whose knob turns into the sun */
[data-slot="checkbox"] {
  width:48px !important; height:28px !important; border-radius:999px !important; border:0 !important; position:relative; cursor:pointer;
  background:#e6d3bd !important; box-shadow:inset 0 2px 4px rgba(61,31,64,.22) !important; transition:background .3s ease !important; }
[data-slot="checkbox"] > * { display:none !important; }
[data-slot="checkbox"]::after {
  content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%;
  background:var(--paper); box-shadow:0 1px 3px rgba(61,31,64,.35);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1), background .3s, box-shadow .3s; }
[data-slot="checkbox"][data-checked] { background:linear-gradient(90deg, #4a2552, #b24a72) !important; }
[data-slot="checkbox"][data-checked]::after {
  transform:translateX(20px); background:radial-gradient(circle at 40% 40%, #fff3c4 0%, #ffd27d 55%, #ffab5e 100%);
  box-shadow:0 0 12px 3px rgba(255,210,125,.85); }
[data-slot="checkbox"]:focus-visible { outline:2px solid var(--accent-warm) !important; outline-offset:2px; }
label[for="remember-checkbox"] { color:var(--plum); font-weight:700 !important; margin-left:4px; cursor:pointer; }

/* One-time-password countdown: a little setting sun (Authelia hard-codes black/white circles) */
[id$="-stage"] svg:not([class]) circle[stroke="#000"] { stroke:var(--plum); }
[id$="-stage"] svg:not([class]) circle[fill="#000"] { fill:#ffb35c; }
[id$="-stage"] svg:not([class]) circle[stroke="#FFFFFF"] { stroke:var(--paper); }

/* Footer credit, toned to match */
a[href*="authelia.com"] { color:var(--muted-foreground) !important; opacity:.8; }

/* Settings pages (/auth/settings): menu drawer, dialogs, app bar, cards.
   The menu drawer and dialogs paint with --background, which is transparent above so the sun shows through */
[data-slot="sheet-content"], [data-slot="dialog-content"] { background:var(--paper) !important; border:0 !important; box-shadow:0 30px 80px rgba(74,37,82,.35) !important; }
[data-slot="dialog-content"] { border-radius:22px !important; max-height:calc(100svh - 32px); overflow-y:auto; }
[data-slot="sheet-content"] { border-radius:0 22px 22px 0; }
[data-slot="sheet-overlay"], [data-slot="dialog-overlay"] { background:rgba(45,27,46,.45) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
[data-slot="sheet-title"], [data-slot="dialog-title"], [data-slot="dialog-content"] h2 { font-family:Fraunces, Georgia, serif !important; font-weight:700 !important; letter-spacing:-.02em; color:var(--plum); }
[data-slot="sheet-content"] li button { border-radius:12px; color:var(--plum); text-transform:none; }
[data-slot="sheet-content"] li button:hover { background:var(--muted); }

#root:has(#settings-menu) nav { background:rgba(255,246,232,.78) !important; color:var(--plum) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(61,31,64,.08); }
#root:has(#settings-menu) nav h6 { font:700 24px/1 Fraunces, Georgia, serif !important; letter-spacing:-.03em; }
#settings-menu { color:var(--plum) !important; }
#settings-menu:hover { background:var(--muted) !important; }

#root:has(#settings-menu) main { padding:84px 16px 40px !important; }
#root:has(#settings-menu) main > * { max-width:880px; margin-inline:auto; }
/* Authelia packs key tiles four to a row on wide screens; two fit our 880px column */
@media (min-width:1280px) { #root:has(#settings-menu) main .xl\:col-span-3 { grid-column:span 6 / span 6; } }
#root:has(#settings-menu) main > .h-screen { height:auto !important; padding-top:0 !important; }
#root:has(#settings-menu) main [data-slot="card"] { border:0 !important; border-radius:22px !important; box-shadow:0 30px 80px rgba(74,37,82,.3) !important; }
#root:has(#settings-menu) main > .h-screen > [data-slot="card"] { width:100%; max-width:430px; }
#root:has(#settings-menu) main h4, #root:has(#settings-menu) main h5 { font-family:Fraunces, Georgia, serif !important; font-weight:700 !important;
  letter-spacing:-.02em; color:var(--plum); font-size:26px !important; line-height:1.15; }
/* A key or authenticator inside a panel: a quieter inset tile */
#root:has(#settings-menu) main [data-slot="card"] [data-slot="card"] { background:#fffdf8 !important; border:2px solid var(--line) !important; border-radius:16px !important; box-shadow:none !important; }
#root:has(#settings-menu) main [data-slot="card"] [data-slot="card"] > div { padding:14px 12px 14px 16px; }
/* Security page's name / email / password rows */
#root:has(#settings-menu) main .rounded.border.mb-2 { background:#fffdf8; border:2px solid var(--line) !important; border-radius:12px !important; padding:12px 14px !important; }

[data-slot="button"], button[data-variant] { text-transform:none !important; }
button[data-variant="outline"] { border:2px solid var(--plum) !important; border-radius:12px !important; font-weight:700 !important; color:var(--plum); background:transparent !important; }
button[data-variant="outline"]:hover { background:var(--muted) !important; }
button[data-variant="outline"]:disabled { opacity:.4; }

/* Phones: slimmer card padding so the six code boxes stay on one line */
@media (max-width:480px) {
  [id$="-stage"] > div { padding:24px 12px 14px !important; }
  #root:has(#settings-menu) main { padding:76px 12px 32px !important; }
  #root:has(#settings-menu) main [data-slot="card"]:not([data-slot="card"] [data-slot="card"]) { padding-block:10px !important; gap:12px; }
  #root:has(#settings-menu) main [data-slot="card-content"] { padding:16px !important; }
  [id$="-stage"] input[autocomplete="one-time-code"] { width:36px !important; height:44px !important; margin:0 2px !important; padding:0 !important; }
  [id$="-stage"] div:has(> input[autocomplete="one-time-code"]) { font-size:0; white-space:nowrap; }
}

@media (prefers-reduced-motion:reduce) {
  .sun, [id$="-stage"] > div { animation:none; }
  .ridge, [data-slot="checkbox"], [data-slot="checkbox"]::after, [data-slot="button"] { transition:none !important; }
}