/* ==========================================================================
   พื้นหลังหน้า Auth — ใช้ร่วมกันระหว่างหน้า Login กับหน้าเลือกสาขา / ฐานข้อมูล

   ของเดิม .background-overlay ดึงรูปจาก
   https://free.minimals.cc/assets/background/overlay.jpg
   ซึ่งโดเมนตายไปแล้ว (DNS resolve เป็น 0.0.0.0) รูปเลยโหลดไม่ขึ้น
   เหลือแต่ div ใส ๆ ทับพื้นขาว หน้าจอเลยขาวโพลนทั้งหน้า

   ตรงนี้วาดพื้นหลังด้วย CSS ล้วน ไม่มี dependency กับ network
   คงโทนสว่างแบบเดิมไว้ แต่ทำให้เป็นสีขาวขุ่นมีมิติ แทนที่จะขาวเรียบ ๆ
   ========================================================================== */

:root {
    --auth-bg: #eef1f7; /* ขาวขุ่นอมเทา */
    --auth-tint-blue: rgba(68, 113, 250, .10); /* สีเดียวกับเมนู active */
    --auth-tint-sky: rgba(14, 165, 233, .08);
    --auth-tint-warm: rgba(244, 114, 182, .06);
}

body {
    background-color: var(--auth-bg);
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;

    background-color: var(--auth-bg);
    background-image:
        radial-gradient(900px 620px at 8% -12%, var(--auth-tint-blue), transparent 62%),
        radial-gradient(720px 720px at 104% 10%, var(--auth-tint-sky), transparent 60%),
        radial-gradient(820px 820px at 50% 118%, var(--auth-tint-warm), transparent 62%),
        linear-gradient(165deg, #f7f9fc 0%, var(--auth-bg) 55%, #e6eaf3 100%);
}

/* เส้นตารางจาง ๆ อีกชั้น กันไม่ให้พื้นดูแบน — mask ไล่จางลงล่างไม่ให้ไปตัดกับขอบการ์ด */
.background-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .030) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(125% 92% at 50% 0%, #000 30%, transparent 74%);
    mask-image: radial-gradient(125% 92% at 50% 0%, #000 30%, transparent 74%);
}

/* พื้นหลังสว่าง การ์ดขาวเลยต้องมีเงา + ขอบบาง ๆ ไม่งั้นจะจมกลืนไปกับพื้น */
.login-container {
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .22),
                0 2px 8px rgba(15, 23, 42, .05),
                0 0 0 1px rgba(15, 23, 42, .05);
}