/*
 * daisyUI "forest" skin for the Authelia portal (auth.loca.zone ONLY).
 * ---------------------------------------------------------------------
 * Injected by /etc/nginx/sites-available/auth.loca.zone via sub_filter
 * (<link> before </head>), served same-origin from /var/www/auth-portal/
 * so it passes Authelia's CSP (style-src 'self'). Replaces the earlier
 * portal-cleanup.css wholesale and also neutralizes its rules, so it
 * renders correctly whether or not that file is still linked.
 *
 * Look: daisyUI v5 "forest" theme tokens (dark) over Authelia's stock
 * MUI v7 portal. Targets stable element ids and .Mui*-root class names
 * only — never hashed emotion classes (mui-xxxxxx).
 *
 * Shown: user icon, "Sign in" title, username + password fields (incl.
 * visibility toggle), "Remember me" row (pre-checked by
 * portal-remember.js), labeled "Sign in" button. Hidden: app bar and
 * language selector, "Reset password?" link (single-user file backend),
 * "Powered by Authelia" footer, register/settings/second-factor
 * affordances.
 *
 * Rollback: remove the sub_filter/location lines from the vhost and
 * delete this file (and portal-remember.js). No Authelia config change
 * is required for rollback.
 */

/* ---- daisyUI forest tokens (verbatim from daisyui/theme/forest.css) ---- */
:root {
    color-scheme: dark;
    --forest-base-100: oklch(20.84% 0.008 17.911);
    --forest-base-200: oklch(18.522% 0.007 17.911);
    --forest-base-300: oklch(16.203% 0.007 17.911);
    --forest-base-content: oklch(83.768% 0.001 17.911);
    --forest-primary: oklch(68.628% 0.185 148.958);
    --forest-primary-content: oklch(0% 0 0);
    --forest-secondary: oklch(69.776% 0.135 168.327);
    --forest-accent: oklch(70.628% 0.119 185.713);
    --forest-neutral: oklch(30.698% 0.039 171.364);
    --forest-neutral-content: oklch(86.139% 0.007 171.364);
    --forest-info: oklch(72.06% 0.191 231.6);
    --forest-success: oklch(64.8% 0.15 160);
    --forest-warning: oklch(84.71% 0.199 83.87);
    --forest-error: oklch(71.76% 0.221 22.18);
    --forest-radius-selector: 1rem; /* checkbox */
    --forest-radius-field: 2rem;    /* inputs, buttons */
    --forest-radius-box: 1rem;      /* card */
    --forest-border: 1px;
    --forest-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---- page ---- */
html {
    background: var(--forest-base-200);
}

body {
    background-color: var(--forest-base-200) !important;
    color: var(--forest-base-content);
    font-family: var(--forest-font);
}

/* ID beats MUI's class-based Roboto rules; MUI uses SVG icons, so no
 * icon-font is harmed. Snackbars render in a body-level portal. */
#root *,
.notistack-SnackbarContainer * {
    font-family: var(--forest-font);
}

::selection {
    background-color: var(--forest-primary);
    color: var(--forest-primary-content);
}

/* ---- centering stage (self-sufficient: no reliance on emotion rules) ---- */
div[id$="-stage"].MuiGrid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.25rem;
    box-sizing: border-box;
}

/* ---- card (daisyUI: base-100 box, 1px neutral border, depth 0) ---- */
div[id$="-stage"] > .MuiContainer-root {
    background: var(--forest-base-100);
    border: var(--forest-border) solid var(--forest-neutral);
    border-radius: var(--forest-radius-box);
    max-width: 26rem;
    padding: 2.25rem 1.75rem 1.75rem;
    box-shadow: none;
}

/* user icon above the title */
#first-factor-stage svg.MuiBox-root {
    color: var(--forest-primary);
    fill: currentColor;
    width: 3.5rem;
    height: 3.5rem;
}

/* "Sign in" title (portal-cleanup.css hid it — restore) */
#first-factor-stage h5 {
    display: block !important;
    color: var(--forest-base-content);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: normal;
}

/* ---- text fields (daisyUI input: base-100, neutral border, pill) ---- */
/* MUI's floating/notched label becomes a static daisyUI-style label
 * above the field; the notch outline is replaced by a border on the
 * field box itself. */
#form-login .MuiInputLabel-root {
    position: static !important;
    transform: none !important;
    max-width: none;
    margin: 0 0 0.375rem 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in oklab, var(--forest-base-content) 85%, transparent);
    pointer-events: auto;
}

#form-login .MuiInputLabel-root.Mui-focused {
    color: var(--forest-base-content);
}

#form-login .MuiInputLabel-root.Mui-error {
    color: var(--forest-error);
}

#form-login .MuiOutlinedInput-notchedOutline {
    display: none;
}

#form-login .MuiOutlinedInput-root {
    background: var(--forest-base-100);
    border: var(--forest-border) solid var(--forest-neutral);
    border-radius: var(--forest-radius-field);
    color: var(--forest-base-content);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#form-login .MuiOutlinedInput-root.Mui-focused {
    border-color: var(--forest-primary);
    box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--forest-primary) 25%, transparent);
}

#form-login .MuiOutlinedInput-root.Mui-error {
    border-color: var(--forest-error);
}

#form-login .MuiOutlinedInput-root.Mui-error.Mui-focused {
    box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--forest-error) 25%, transparent);
}

#form-login .MuiOutlinedInput-input {
    padding: 0.8125rem 1.25rem;
    border-radius: inherit; /* keeps Chrome autofill paint inside the pill */
    color: var(--forest-base-content);
    caret-color: var(--forest-primary);
}

#form-login .MuiInputBase-inputAdornedEnd {
    padding-right: 0.25rem;
}

#form-login input:-webkit-autofill,
#form-login input:-webkit-autofill:hover,
#form-login input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--forest-base-100) inset;
    -webkit-text-fill-color: var(--forest-base-content);
    caret-color: var(--forest-primary);
}

/* password visibility toggle */
#form-login .MuiIconButton-root {
    color: color-mix(in oklab, var(--forest-base-content) 70%, transparent);
}

#form-login .MuiIconButton-root:hover {
    color: var(--forest-base-content);
    background-color: color-mix(in oklab, var(--forest-base-content) 8%, transparent);
}

#form-login .MuiIconButton-edgeEnd {
    margin-right: -0.5rem;
}

/* helper/error text under a field */
#form-login .MuiFormHelperText-root {
    color: color-mix(in oklab, var(--forest-base-content) 70%, transparent);
    margin-left: 0.5rem;
}

#form-login .MuiFormHelperText-root.Mui-error {
    color: var(--forest-error);
}

/* ---- "Remember me" row (portal-cleanup.css hid it — restore) ---- */
#form-login label.MuiFormControlLabel-root {
    display: inline-flex !important;
    align-items: center;
    margin: 0.25rem 0 0 0.5rem;
    cursor: pointer;
}

#form-login .MuiFormControlLabel-label {
    color: var(--forest-base-content) !important;
    font-size: 0.875rem !important;
}

/* daisyUI checkbox checkbox-primary: the MUI svg is replaced by a
 * bordered box drawn on the SwitchBase span; the real <input> keeps
 * covering it, so clicks and a11y are untouched. */
#form-login .MuiCheckbox-root {
    position: relative;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin-right: 0.5rem;
    background: var(--forest-base-100);
    border: var(--forest-border) solid var(--forest-neutral);
    border-radius: var(--forest-radius-selector);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#form-login .MuiCheckbox-root svg,
#form-login .MuiCheckbox-root .MuiTouchRipple-root {
    display: none;
}

#form-login .MuiCheckbox-root:hover {
    border-color: var(--forest-primary);
}

#form-login .MuiCheckbox-root::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.625rem;
    height: 0.3125rem;
    border-left: 2px solid var(--forest-primary-content);
    border-bottom: 2px solid var(--forest-primary-content);
    transform: translate(-50%, -70%) rotate(-45deg);
    opacity: 0;
}

#form-login .MuiCheckbox-root.Mui-checked {
    background: var(--forest-primary);
    border-color: var(--forest-primary);
}

#form-login .MuiCheckbox-root.Mui-checked::after {
    opacity: 1;
}

#form-login .MuiCheckbox-root:has(input:focus-visible) {
    outline: 2px solid var(--forest-primary);
    outline-offset: 2px;
}

/* ---- submit (daisyUI btn btn-primary; portal-cleanup.css blanked the
 * label with font-size:0 + a ::after chevron — undo both) ---- */
#sign-in-button {
    font-size: 1rem !important;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: normal;
    min-height: 3rem !important;
    background-color: var(--forest-primary) !important;
    color: var(--forest-primary-content) !important;
    border-radius: var(--forest-radius-field) !important;
    box-shadow: none !important;
}

#sign-in-button::after {
    content: none !important;
}

#sign-in-button:hover {
    background-color: color-mix(in oklab, var(--forest-primary) 88%, black) !important;
}

#sign-in-button:active {
    background-color: color-mix(in oklab, var(--forest-primary) 78%, black) !important;
}

#sign-in-button:focus-visible {
    outline: 2px solid var(--forest-base-content);
    outline-offset: 2px;
}

#sign-in-button:disabled {
    background-color: color-mix(in oklab, var(--forest-primary) 45%, var(--forest-base-100)) !important;
    color: color-mix(in oklab, var(--forest-primary-content) 60%, transparent) !important;
}

/* ---- notifications (login failure etc.); forest derives dark content
 * text for its bright state colors, same value as primary-content ---- */
.notistack-MuiContent-error {
    background-color: var(--forest-error) !important;
    color: var(--forest-primary-content) !important;
}

.notistack-MuiContent-success {
    background-color: var(--forest-success) !important;
    color: var(--forest-primary-content) !important;
}

.notistack-MuiContent-warning {
    background-color: var(--forest-warning) !important;
    color: var(--forest-primary-content) !important;
}

.notistack-MuiContent-info {
    background-color: var(--forest-info) !important;
    color: var(--forest-primary-content) !important;
}

/* ---- hidden portal chrome (carried over from portal-cleanup.css) ---- */
header.MuiAppBar-root,
#reset-password-button,
a[href^="https://www.authelia.com"],
#register-link,
#settings-button,
#settings-menu,
#methods-button,
#second-factor-stage h5,
#second-factor-stage h6 {
    display: none !important;
}