/* Premium Theme overrides for Authelia */

/* 1. Global Background & Variables */
body {
    background-color: #0a0a0f !important;
    background-image: radial-gradient(ellipse at top, rgba(168, 85, 247, 0.05) 0%, transparent 70%),
                      radial-gradient(ellipse at bottom, rgba(249, 115, 22, 0.03) 0%, transparent 70%) !important;
    background-attachment: fixed !important;
    color: #f0f0f5 !important;
}

/* 2. Main Login Card Container */
.MuiPaper-root, [class*="MuiPaper-root"] {
    background-color: rgba(20, 20, 30, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

/* 3. Logo Styles */
img {
    max-height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
}

/* 4. Input Fields (MUI TextFields) styling */
.MuiOutlinedInput-root, [class*="MuiOutlinedInput-root"] {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important;
}

/* Fix input borders to look premium and match P4P colors */
.MuiOutlinedInput-notchedOutline, [class*="MuiOutlinedInput-notchedOutline"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
    transition: border-color 0.2s ease;
}

/* Hover state border */
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Focused state border (P4P Accent Purple) */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
[class*="Mui-focused"] .MuiOutlinedInput-notchedOutline {
    border-color: #a855f7 !important;
    border-width: 1px !important;
}

/* 5. Input Labels (Fixing the overlapping, cut-through, and readability issues) */
.MuiInputLabel-root, [class*="MuiInputLabel-root"] {
    color: #8888a0 !important;
}

/* Focus and active label colors */
.MuiInputLabel-root.Mui-focused, [class*="MuiInputLabel-root"][class*="focused"] {
    color: #a855f7 !important;
}

/* Fix notched outline label overlapping/border-cut wonkiness:
   We give the shrunk/floating label a dark background and horizontal padding 
   so it sits cleanly over the input border without the border line cutting through the text! */
.MuiInputLabel-shrink, [class*="MuiInputLabel-shrink"] {
    background-color: #171722 !important; /* Matches the card background */
    padding: 0 6px !important;
    margin-left: -3px !important;
    border-radius: 4px !important;
}

/* 6. Sign In Button */
.MuiButton-root, [class*="MuiButton-root"] {
    background-color: #a855f7 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3) !important;
    transition: all 0.25s ease !important;
}

.MuiButton-root:hover, [class*="MuiButton-root"]:hover {
    background-color: #b56bf8 !important;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.45) !important;
    transform: translateY(-1px);
}

.MuiButton-root:active, [class*="MuiButton-root"]:active {
    transform: translateY(0);
}

/* 7. General Text Link (Reset Password, etc.) */
.MuiLink-root, [class*="MuiLink-root"] {
    color: #8888a0 !important;
    text-decoration-color: rgba(136, 136, 160, 0.4) !important;
}

.MuiLink-root:hover, [class*="MuiLink-root"]:hover {
    color: #a855f7 !important;
}