/* =====================================================================
   Premium Gradient Background
   พื้นหลังไล่เฉดโทนเดียวกับแบรนด์ (--color-main: #45637d)
   วางเป็น background-image ทับ background-color เดิม จึงไม่ต้องแก้ stylesheet.css
   หรือ dark-mode.css และไม่ต้องใช้ !important

   หมายเหตุด้านความเร็ว: ตั้งใจไม่ใช้ background-attachment: fixed
   เพราะทำให้ repaint ทุกครั้งที่ scroll บนมือถือ (jank หนักบน iOS)
   ===================================================================== */

/* ---------------------------------------------------------------------
   พื้นหลังไล่สี วางเป็นเลเยอร์ position: fixed ใต้เนื้อหา

   ทำไมใช้ ::before แทน background ของ body ตรง ๆ:
     - เลเยอร์ fixed มีขนาดเท่า viewport เสมอ การไล่สีจึงเห็นชัดทุกช่วงที่เลื่อน
       ถ้าใส่ที่ body ตรง ๆ พื้นหลังจะยืดตามความสูงทั้งหน้า ทำให้สีจางจนแทบไม่เห็น
     - เบราว์เซอร์ composite เลเยอร์นี้ครั้งเดียว ไม่ repaint ตอน scroll
       ต่างจาก background-attachment: fixed ที่ทำให้กระตุกบนมือถือ
   --------------------------------------------------------------------- */

body {
    background-color: transparent;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #eef3f9;
    background-image:
        /* ฟ้าเหล็กเข้ม มุมบนซ้าย */
        radial-gradient(1200px circle at 6% -6%, rgba(69, 99, 125, 0.38), transparent 56%),
        /* ฟ้าอ่อน มุมบนขวา */
        radial-gradient(1000px circle at 97% 6%, rgba(139, 176, 209, 0.42), transparent 55%),
        /* แชมเปญอุ่น ๆ ให้ความรู้สึกหรู */
        radial-gradient(950px circle at 82% 88%, rgba(203, 178, 137, 0.26), transparent 58%),
        /* เขียวน้ำทะเลจาง ๆ ตัดความเรียบ */
        radial-gradient(850px circle at 14% 95%, rgba(86, 138, 146, 0.26), transparent 56%),
        linear-gradient(165deg, #f4f8fc 0%, #e7eff7 34%, #dae6f1 66%, #ccdae8 100%);
}

/* ---------------------------------------------------------------------
   Dark mode - น้ำเงินหมึกลึก แต้มฟ้า ม่วงเทา และทองจาง ๆ
   --------------------------------------------------------------------- */
[data-theme="dark"] body::before {
    background-color: #141824;
    background-image:
        radial-gradient(1200px circle at 6% -6%, rgba(82, 128, 196, 0.34), transparent 56%),
        radial-gradient(1000px circle at 97% 6%, rgba(118, 99, 178, 0.28), transparent 55%),
        radial-gradient(950px circle at 82% 88%, rgba(196, 163, 108, 0.18), transparent 58%),
        radial-gradient(850px circle at 14% 95%, rgba(52, 125, 137, 0.24), transparent 56%),
        linear-gradient(165deg, #0f1320 0%, #151a29 34%, #1c2337 66%, #252d45 100%);
}

/* ---------------------------------------------------------------------
   Navbar / Footer - ไล่เฉดให้กลืนกับพื้นหลัง ไม่เป็นแถบสีทึบตัดกัน
   --------------------------------------------------------------------- */
.navbar.bg-main {
    background-image: linear-gradient(120deg, #3b5670 0%, #45637d 48%, #51728f 100%);
    box-shadow: 0 2px 18px rgba(30, 45, 60, 0.18);
}

[data-theme="dark"] .navbar.bg-main {
    background-image: linear-gradient(120deg, #222b3d 0%, #2c3548 50%, #354063 100%);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

footer.bg-white {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(240, 245, 250, 0.95) 100%);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] footer.bg-white {
    background-image: linear-gradient(180deg, rgba(28, 34, 51, 0.85) 0%, rgba(18, 22, 34, 0.95) 100%);
}

/* ---------------------------------------------------------------------
   การ์ด - เพิ่มความลึกเล็กน้อยให้ลอยเหนือพื้นหลังไล่เฉด
   ใช้ background-image ทับ .bg-white เดิม (ยังคงโปร่งแสงพอให้เห็นพื้นหลัง)
   --------------------------------------------------------------------- */
.card.bg-white,
.card.shadow-lg,
.card.shadow-sm {
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 251, 253, 0.92) 100%);
    border: 1px solid rgba(69, 99, 125, 0.08);
}

[data-theme="dark"] .card.bg-white,
[data-theme="dark"] .card.shadow-lg,
[data-theme="dark"] .card.shadow-sm {
    background-image: linear-gradient(160deg, rgba(43, 51, 72, 0.92) 0%, rgba(33, 40, 58, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}


/* dark-mode.css ตั้ง background-color ให้ body ด้วย specificity สูงกว่า
   ระบุซ้ำที่นี่ให้ชัดเจนว่า body โปร่งใส แล้วปล่อยให้เลเยอร์ ::before เป็นคนวาดพื้นหลัง */
[data-theme="dark"] body {
    background-color: transparent;
}

/* ---------------------------------------------------------------------
   ลิงก์เข้าสู่ระบบสำหรับเจ้าหน้าที่ใน footer
   ตั้งใจให้จางกว่าลิงก์อื่น ลูกค้าทั่วไปจะไม่สะดุด แต่เจ้าหน้าที่หาเจอ
   --------------------------------------------------------------------- */
.staff-login-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: transparent;
    transition: all 0.25s ease;
}

.staff-login-link:hover,
.staff-login-link:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #4b7096 0%, #2d4560 100%);
    border-color: transparent;
}