/* =========================================================
   lemOnad — citrus skin for the Authelia portal
   Injected via nginx sub_filter into the portal HTML.
   ========================================================= */

@font-face {
    font-family: 'Baloo 2';
    src: url('/fonts/baloo2.ttf') format('truetype');
    font-weight: 300 800;
    font-display: swap;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Baloo 2', 'Quicksand', 'Segoe UI', Ubuntu, Cantarell, sans-serif !important;
    color: #2f5d2f;
    background: linear-gradient(152deg, #fdf9c2 0%, #ffe066 38%, #d9f16d 74%, #9ed35a 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

.MuiTypography-root,
.MuiInputBase-root,
.MuiInputBase-input,
.MuiFormControlLabel-root,
.MuiButtonBase-root,
.MuiOutlinedInput-input,
.MuiInputLabel-root,
button,
header {
    font-family: 'Baloo 2', 'Quicksand', 'Segoe UI', Ubuntu, Cantarell, sans-serif !important;
}

/* Centre column becomes the lemonade card */
.MuiContainer-root.MuiContainer-maxWidthXs {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 28px;
    box-shadow: 0 26px 64px -20px rgba(110, 84, 0, 0.48);
    padding: 34px 44px 26px !important;
    margin: 22px 0;
}

/* Custom lemon logo */
img[src*="logo.png"] {
    width: 112px !important;
    height: auto !important;
    display: block;
    margin: 0 auto 10px !important;
    filter: drop-shadow(0 12px 20px rgba(122, 92, 8, 0.28));
}

/* Titles */
.MuiTypography-h5 {
    font-weight: 700;
    color: #3e7d33;
}

.MuiTypography-h5:after {
    content: 'Свежий вход — ноль горечи';
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #7baa52;
    margin-top: 2px;
}

.MuiTypography-h6 {
    color: #5c8748;
}

/* Inputs */
.MuiOutlinedInput-root {
    background: #fffdf4;
    border-radius: 14px;
}

.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
    border-color: #e3deb4;
    border-radius: 14px;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: #c9e383;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #9cc95a;
    border-width: 2px;
}

.MuiOutlinedInput-root.Mui-focused {
    box-shadow: 0 0 0 4px rgba(156, 201, 90, 0.16);
}

.MuiOutlinedInput-input,
.MuiOutlinedInput-input:-webkit-autofill {
    font-family: inherit;
    color: #2f5d2f !important;
}

.MuiInputLabel-root {
    color: #6f8f57;
    font-family: inherit;
}

.MuiInputLabel-root.Mui-focused {
    color: #86b93f;
}

/* Checkbox */
.MuiCheckbox-root.Mui-checked {
    color: #86b93f !important;
}

/* Primary button — lemon squeeze */
.MuiButton-containedPrimary {
    background: linear-gradient(135deg, #b7e047 0%, #7cc33f 60%, #5fae3a 100%);
    color: #ffffff;
    border-radius: 999px;
    text-transform: none;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px 20px;
    box-shadow: 0 12px 24px -8px rgba(95, 174, 58, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.MuiButton-containedPrimary:hover {
    background: linear-gradient(135deg, #aad23e 0%, #6fb43a 60%, #53a133 100%);
    box-shadow: 0 16px 30px -8px rgba(95, 174, 58, 0.65);
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* Links */
.MuiLink-root {
    color: #6c9c3f;
    font-family: "Baloo 2", inherit, sans-serif;
}

/* Language bar sits transparent on the gradient */
.MuiAppBar-positionStatic {
    background: transparent !important;
}

/* Focus outlines stay accessible */
.MuiButtonBase-root:focus-visible {
    outline: 3px solid #5fae3a;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .MuiContainer-root.MuiContainer-maxWidthXs {
        padding: 26px 22px 20px !important;
        margin: 12px;
        border-radius: 22px;
    }
}