/* ================================================================================================
   🔐 Login Page Styles
   Ini adalah file CSS khusus untuk halaman Login.
   Kode ini menggunakan banyak variabel CSS (var(--nama-variabel)) dari theme.css agar tema konsisten.
   ================================================================================================ */

/* ================================================================================================
   📐 Layout
   Bagian ini mengatur tata letak dasar halaman agar konten berada di tengah.
   ================================================================================================ */

.ynfred-layout-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: var(--ynfred-spacing-md);
    background: transparent; /* Let the layout gradient show through */
}

/* ================================================================================================
   📦 Paper / Card
   Bagian ini mengatur tampilan "kartu" atau kotak putih tempat formulir login berada.
   ================================================================================================ */

.mud-paper.ynfred-paper,
.ynfred-paper,
.mud-paper.ynfred-paper.mud-elevation-25 {
    background-color: var(--ynfred-bg-paper) !important; /* WHITE (#FFFFFF) */
    border-radius: var(--ynfred-radius-lg) !important;
    box-shadow: var(--ynfred-shadow-lg) !important;
    transition: box-shadow var(--ynfred-transition);
    padding: var(--ynfred-spacing-xl) !important;
    max-width: 480px;
    width: 100%;
}


    /* Hover effect */
    .mud-paper.ynfred-paper:hover,
    .ynfred-paper:hover {
        box-shadow: var(--ynfred-shadow-xl) !important;
    }

/* ================================================================================================
   📝 Typography
   Bagian ini mengatur gaya teks (font, warna, ukuran).
   ================================================================================================ */

.ynfred-welcome-text {
    color: var(--ynfred-primary-dark) !important; /* Deep Teal (#003B46) */
    font-size: var(--ynfred-font-3xl) !important; /* 32px atau 2rem */
    font-weight: var(--ynfred-font-bold) !important; /* 700 */
    line-height: var(--ynfred-leading-tight) !important; /* 1.2 */
    font-family: var(--ynfred-font-primary) !important; /* Lexend */
    margin-bottom: var(--ynfred-spacing-md);
}

.ynfred-subtitle {
    color: var(--ynfred-text-secondary) !important; /* Medium Gray (#666666) */
    font-size: var(--ynfred-font-base) !important; /* 16px atau 1rem */
    font-weight: var(--ynfred-font-normal) !important; /* 400 */
    font-family: var(--ynfred-font-primary) !important;
    margin-bottom: var(--ynfred-spacing-lg);
}

.ynfred-footer-text {
    color: var(--ynfred-text-secondary) !important;
    font-size: var(--ynfred-font-xs) !important; /* 12px atau 0.75rem */
    font-weight: var(--ynfred-font-normal) !important;
    margin-top: var(--ynfred-spacing-sm);
    font-family: var(--ynfred-font-primary) !important;
}

/* ================================================================================================
   🎯 Button - GOLD COLOR (Launch Learning)
   Bagian ini mengatur tampilan tombol utama agar terlihat menarik dan interaktif.
   Menggunakan warna GOLD (#DAB95B) dari theme.
   ================================================================================================ */

.ynfred-button-primary {
    /* BACKGROUND: Menggunakan GOLD dari theme (#DAB95B) */
    background-color: var(--ynfred-primary) !important;
    /* TEXT: Deep Teal untuk kontras (#003B46) */
    color: var(--ynfred-primary-dark) !important;
    /* BORDER: Gold dengan ketebalan 2px */
    border: var(--ynfred-border-width-thick) solid var(--ynfred-primary) !important;
    border-radius: var(--ynfred-radius-md) !important; /* 12px melengkung */
    font-family: var(--ynfred-font-primary) !important;
    font-size: var(--ynfred-font-base) !important;
    font-weight: var(--ynfred-font-bold) !important; /* 700 untuk emphasis */
    min-height: 48px !important;
    padding: var(--ynfred-spacing-md) var(--ynfred-spacing-lg) !important;
    box-shadow: var(--ynfred-shadow-md) !important;
    transition: all var(--ynfred-transition) !important;
    text-transform: uppercase !important; /* Match screenshot */
    letter-spacing: 0.05em !important;
}

    /* Efek saat mouse di atas tombol (Hover) */
    .ynfred-button-primary:hover:not(:disabled) {
        /* HOVER: Menggunakan Pale Gold yang lebih terang (#E8D8A0) */
        background-color: var(--ynfred-primary-light) !important;
        transform: translateY(-2px); /* Bergerak naik 2px */
        box-shadow: var(--ynfred-shadow-lg) !important; /* Bayangan lebih besar */
    }

    /* Efek saat tombol ditekan (Active/Click) */
    .ynfred-button-primary:active:not(:disabled) {
        transform: translateY(0); /* Kembali ke posisi normal */
        box-shadow: var(--ynfred-shadow-sm) !important; /* Bayangan mengecil */
    }

    /* Tampilan saat tombol dimatikan (Disabled) */
    .ynfred-button-primary:disabled {
        background-color: var(--ynfred-bg-disabled) !important; /* Abu-abu */
        color: var(--ynfred-text-disabled) !important; /* Teks abu-abu */
        border-color: var(--ynfred-border-color) !important;
        cursor: not-allowed;
        transform: none;
        box-shadow: none !important;
    }

/* ================================================================================================
   📋 Text Field
   Bagian ini menyesuaikan input field dari MudBlazor agar sesuai tema.
   ================================================================================================ */

.ynfred-text-field {
    /* Override MudBlazor variables dengan theme kita */
    --mud-palette-primary: var(--ynfred-primary); /* Gold */
    --mud-palette-primary-text: var(--ynfred-primary-dark); /* Deep Teal */
    font-family: var(--ynfred-font-primary) !important;
    margin-bottom: var(--ynfred-spacing-sm);
}

    /* Font untuk semua elemen input */
    .ynfred-text-field input,
    .ynfred-text-field textarea,
    .ynfred-text-field label,
    .ynfred-text-field .mud-input-label,
    .ynfred-text-field .mud-input-text {
        font-family: var(--ynfred-font-primary) !important;
    }

    /* Border emas saat input fokus */
    .ynfred-text-field .mud-input-root.mud-input-focused .mud-input-slot::before {
        border-color: var(--ynfred-primary) !important; /* Gold border */
        border-width: 2px !important;
    }

    /* Label berwarna Dark Cyan saat fokus */
    .ynfred-text-field .mud-input-label.mud-focused {
        color: var(--ynfred-secondary) !important; /* Dark Cyan (#07575B) */
    }

    /* Icon berwarna Dark Cyan */
    .ynfred-text-field .mud-input-adornment {
        color: var(--ynfred-secondary) !important;
    }

    /* ================================================================================================
   ⚠️ Validation Error — GOLD instead of Red
   Override MudBlazor default red error color to Gold (#DAB95B)
   ================================================================================================ */

    /* Error border on outlined inputs — gold instead of red */
    .ynfred-text-field .mud-input-root.mud-input-focused .mud-input-outlined-border,
    .ynfred-text-field .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
        border-color: var(--ynfred-primary) !important; /* Gold */
        border-width: 2px !important;
    }

    .ynfred-text-field input:focus,
    .ynfred-text-field input:focus-visible,
    .ynfred-text-field textarea:focus,
    .ynfred-text-field textarea:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Remove any residual focus ring on container */
    .ynfred-text-field .mud-input-root:focus-within {
        outline: none !important;
        box-shadow: none !important;
    }

    .ynfred-text-field .mud-input-slot:focus-within {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Error border on underline inputs */
    .ynfred-text-field .mud-input-root.mud-input-error .mud-input-slot::after,
    .ynfred-text-field .mud-input-root.mud-input-error .mud-input-slot::before {
        border-color: var(--ynfred-primary) !important; /* Gold */
    }

    /* Error label text — gold */
    .ynfred-text-field .mud-input-label.mud-input-error,
    .ynfred-text-field .mud-input-label-inputcontrol.mud-input-error,
    .ynfred-text-field label.mud-input-label.mud-input-error {
        color: var(--ynfred-primary) !important; /* Gold label */
    }

    /* Helper / validation message text — gold */
    .ynfred-text-field .mud-input-helper-text.mud-input-error,
    .ynfred-text-field .mud-input-helper-text {
        color: var(--ynfred-primary) !important; /* Gold error text */
        font-weight: var(--ynfred-font-medium) !important;
    }

    /* Remove the blue transparent selection highlight on error inputs */
    .ynfred-text-field .mud-input-root.mud-input-error.mud-input-focused .mud-input-outlined-border {
        border-color: var(--ynfred-primary) !important; /* Gold even when focused + error */
        box-shadow: 0 0 0 2px rgba(218, 185, 91, 0.2) !important; /* Subtle gold glow instead of blue */
    }

    /* Error icon inside the input — gold */
    .ynfred-text-field .mud-input-error .mud-input-adornment,
    .ynfred-text-field .mud-input-error .mud-icon-root {
        color: var(--ynfred-primary) !important;
    }

/* Validation summary list items — gold text */
.ynfred-paper .mud-validation-summary,
.ynfred-paper .mud-list-item .mud-typography {
    color: var(--ynfred-primary) !important;
}

/* ================================================================================================
   🖼️ Logo Animation
   Bagian ini membuat logo bergerak (berdenyut).
   ================================================================================================ */

.ynfred-logo {
    background: transparent !important; /* Force transparent background */
    animation: pulse 2s ease-in-out infinite;
    border-radius: var(--ynfred-radius-lg);
    box-shadow: none !important; /* Remove shadow that might create white appearance */
    transition: var(--ynfred-transition);
}

    .ynfred-logo:hover {
        transform: scale(1.05);
        box-shadow: none !important;
        animation-play-state: paused; /* Pause animation saat hover */
    }

/* Definisi animasi 'pulse' */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* ================================================================================================
   ⚡ Loading State
   Tampilan saat halaman sedang memuat data awal.
   ================================================================================================ */

.ynfred-loading {
    color: var(--ynfred-primary-dark) !important; /* Deep Teal spinner */
}