/*
 * Authelia Login Theme — MUI v5 Restyle
 * 
 * Target: Authelia v4.38+ (React + MUI v5)
 * Theme: Voice Agent (Navy #003b79 & Green #009c1f)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 1. Page Background */
body {
    background-color: #f0f4f9 !important;
    font-family: 'Inter', sans-serif !important;
}

/* 2. Main Container (MUI Container) */
.MuiContainer-root {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
}

/* 3. Login Card (MuiGrid-container が実際のカードコンテナ) */
/* 以前の .MuiPaper-root の代わりに .mui-1f11l0v などの大枠に適用 */
.MuiContainer-maxWidthXs > .MuiGrid-container {
    background-color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 59, 121, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    padding: 32px !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* 子要素の背景を透明にして、分割されたカードのように見えないようにする */
.MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-grid-xs-12 {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 16px !important;
}

/* 最後の要素の余白を消す */
.MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-grid-xs-12:last-child {
    margin-bottom: 0 !important;
}

/* 4. Text Fields (MUI TextField) */
.MuiInputBase-root {
    border-radius: 8px !important;
    background-color: #f8fafc !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #003b79 !important;
    border-width: 2px !important;
}
.MuiInputLabel-root.Mui-focused {
    color: #003b79 !important;
}

/* 5. Primary Button (Sign In) */
.MuiButton-containedPrimary {
    background: linear-gradient(135deg, #003b79 0%, #1a5fa8 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 59, 121, 0.25) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    margin-top: 8px !important;
}
.MuiButton-containedPrimary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 59, 121, 0.35) !important;
}

/* 6. Typography & Links */
.MuiTypography-root {
    font-family: 'Inter', sans-serif !important;
}
.MuiLink-root {
    color: #003b79 !important;
    text-decoration: none !important;
}
.MuiLink-root:hover {
    color: #1a5fa8 !important;
    text-decoration: underline !important;
}

/* 7. Checkbox (Remember Me) */
.MuiCheckbox-root.Mui-checked {
    color: #009c1f !important;
}

/* 8. Logo adjustments */
/* MuiPaper-root img ではなく、MuiGrid-container 内の img を指定 */
.MuiContainer-maxWidthXs > .MuiGrid-container img {
    display: block !important;
    max-width: 240px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 16px !important;
}