@import url('./tokens.css');

/* Adapter for the stable MUI classes and Authelia 4.39.20 element IDs.
   Authentication controls and their event handlers remain owned by Authelia. */
html body {
    background: var(--auth-bg);
    color: var(--auth-text);
    font-family: 'IBM Plex Sans', sans-serif;
    margin: 0;
}
body .MuiTypography-root, body .MuiButtonBase-root, body .MuiInputBase-root,
body .MuiFormLabel-root, body .MuiFormHelperText-root, body .MuiAlert-root {
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: normal;
}
body .MuiTypography-body1, body .MuiTypography-body2 { font-size: 14px; line-height: 1.6; }
body .MuiTypography-h5 { font-size: 24px; font-weight: 400; line-height: 1.4; }
body .MuiTypography-h4 { font-size: 24px; font-weight: 400; line-height: 1.4; }
body .MuiTypography-h6 { font-size: 17px; font-weight: 400; line-height: 1.5; }
body .MuiAppBar-root { background: var(--auth-bg); color: var(--auth-text); box-shadow: none; border-bottom: 1px solid var(--auth-border); }
body .MuiAppBar-root .MuiToolbar-root { min-height: 64px; align-items: center; padding-top: 0; padding-bottom: 0; }
body .MuiAppBar-root .MuiTypography-h6 { font-size: 16px; }
body .MuiContainer-maxWidthXs { max-width: 408px; padding: 24px; }
body .MuiGrid-container[id$='stage'] { min-height: calc(100dvh - 64px); padding: 40px 0; }
body .MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root:first-child { margin-bottom: 24px; }
body .MuiContainer-maxWidthXs img[alt='Logo'] { width: 52px; height: 52px; object-fit: contain; margin: 0; }
body .MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root:first-child::after {
    content: 'PLATFORMA'; display: block; margin-top: 12px;
    font-family: 'Cormorant Unicase', serif; font-size: 28px; font-weight: 600; letter-spacing: .1em; color: var(--auth-text);
}
body #form-login { display: block; margin-top: 20px; }
/* The brand already identifies this screen; retain the submit button label. */
body #first-factor-stage .MuiGrid-root:has(> .MuiTypography-h5) { display: none; }
body #form-login > .MuiGrid-container { row-gap: 24px; }
body .MuiFormControl-root { min-width: 0; }
body .MuiOutlinedInput-root { border-radius: 0; background: transparent; }
body .MuiOutlinedInput-notchedOutline { border: 0; border-bottom: 1px solid var(--auth-border); border-radius: 0; }
body .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--auth-border); }
body .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-width: 0 0 2px; border-color: var(--auth-accent); }
body .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--auth-error); }
body .MuiInputBase-input { min-height: 24px; padding: 16px 0 10px; font-size: 16px; color: var(--auth-text); }
body .MuiInputLabel-root { color: var(--auth-muted); font-size: 14px; }
body .MuiInputLabel-outlined { transform: translate(0, 16px) scale(1); }
body .MuiInputLabel-shrink { transform: translate(0, -8px) scale(.85); }
body .MuiFormLabel-root.Mui-focused { color: var(--auth-accent); }
body .MuiInputBase-root .MuiInputAdornment-root { margin-right: 0; }
body .MuiButton-root {
    min-height: 44px; padding: 8px 14px; border-radius: 4px;
    font-size: 14px; font-weight: 400; text-transform: none;
    box-shadow: none; background: transparent; color: var(--auth-accent); border: 1px solid transparent;
}
body .MuiButton-root:hover { background: var(--auth-accent-bg); box-shadow: none; }
body #sign-in-button { border-color: var(--auth-border); }
body .MuiButton-colorError { color: var(--auth-error); }
body .MuiButton-colorError:hover { background: var(--auth-error-bg); }
body .MuiButton-root.Mui-disabled { color: var(--auth-disabled); background: transparent; }
body .MuiIconButton-root { min-width: 44px; min-height: 44px; color: var(--auth-muted); border-radius: 4px; }
body .MuiIconButton-root:hover { background: var(--auth-hover); }
body .MuiSvgIcon-colorPrimary, body .MuiSvgIcon-colorInfo { color: var(--auth-accent); }
body .MuiLink-root { color: var(--auth-accent); font-size: 14px; }
body button.MuiLink-root, body .MuiFormControlLabel-root { min-height: 44px; }
body .MuiCheckbox-root, body .MuiRadio-root { color: var(--auth-muted); }
body .MuiCheckbox-root.Mui-checked, body .MuiRadio-root.Mui-checked { color: var(--auth-accent); }
body :is(button, a, input):focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 3px; }
body .MuiPaper-root { background: var(--auth-bg); color: var(--auth-text); box-shadow: none; border-color: var(--auth-border); border-radius: 4px; }
body main.MuiBox-root { max-width: 960px; margin: 0 auto; min-width: 0; }
body main .MuiTypography-h5 { font-size: 20px; }
.platforma-settings-nav { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.platforma-settings-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--auth-muted); text-decoration: none; border-bottom: 1px solid transparent; font-size: 14px; }
.platforma-settings-nav a:hover { background: var(--auth-hover); }
.platforma-settings-nav a[aria-current='page'] { color: var(--auth-accent); border-color: var(--auth-accent); }
body main .MuiPaper-root { padding: 24px; }
body .MuiDialog-paper { width: min(480px, calc(100% - 32px)); max-width: 480px; margin: 16px; box-shadow: 0 16px 48px rgb(0 0 0 / .12); }
body .MuiDialogTitle-root { padding: 24px 24px 16px; font-size: 20px; font-weight: 400; }
body .MuiDialogContent-root { padding: 20px 24px; border-color: var(--auth-border); }
body .MuiDialogContentText-root { color: var(--auth-muted); font-size: 14px; line-height: 1.6; }
body .MuiDialogActions-root { padding: 12px 16px; gap: 4px; }
body .MuiDialogActions-root #dialog-cancel { color: var(--auth-muted); }
body .MuiDialogActions-root #dialog-cancel:hover { background: var(--auth-hover); }
body .MuiBackdrop-root { background: rgb(0 0 0 / .25); }
body .MuiAlert-root { border: 1px solid var(--auth-border); border-radius: 4px; box-shadow: none; }
body .MuiAlert-filledError { color: var(--auth-error); background: var(--auth-error-bg); }
body .MuiAlert-icon { color: inherit; }
/* Keep upstream OTP borders: its failure state supplies the red border. */
body #otp-input input { box-sizing: border-box; width: 42px !important; height: 48px; padding: 0 !important; border-radius: 4px; font: 22px 'IBM Plex Sans', sans-serif; color: var(--auth-text); }
body #otp-input input:focus { border-color: var(--auth-accent); }
body [id='2fa-container'] { height: auto; min-height: 200px; }
body svg[viewBox='0 0 26 26'][width='64'] { width: 32px; height: 32px; }
body svg[viewBox='0 0 26 26'] circle[stroke='#000'] { stroke: var(--auth-muted); }
body svg[viewBox='0 0 26 26'] circle[fill='#000'] { fill: var(--auth-muted); }
/* Hide only the vendor footer link, retaining any adjacent privacy-policy link.
   Upstream license and attribution files remain untouched. */
body a[href='https://www.authelia.com'],
body a[href='https://www.authelia.com/'] { display: none; }
@media (max-width: 600px) {
    body main.MuiBox-root { width: 100%; padding: 0 16px 24px; box-sizing: border-box; }
    body main .MuiPaper-root { padding: 20px 16px; }
    body .MuiDialogContent-root { padding: 20px; }
    body #otp-input input { width: 36px !important; margin-left: 3px; margin-right: 3px; }
}
@media (max-height: 550px) { body .MuiGrid-container[id$='stage'] { padding: 20px 0; } }
@media (prefers-reduced-motion: reduce) { body *, body *::before, body *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }