/* ============================================================
   XDZ STORE — LIGHT THEME (v1 สว่าง)
   ธีมสว่างสไตล์เว็บเดิม ใช้ร่วมกันทั้งเว็บหลักและเว็บเช่า
   สีธีมทั้งหมดมาจากหลังบ้านผ่าน CSS variables (navbar.php)
   ============================================================ */
:root {
    --xd-bg: #f4f6fb;
    --xd-bg2: #eef1f8;
    --xd-card: #ffffff;
    --xd-card-solid: #ffffff;
    --xd-card-soft: rgba(248, 250, 253, .9);
    --xd-border: rgba(15, 23, 42, .08);
    --xd-border-strong: rgba(15, 23, 42, .16);
    --xd-text: #1e293b;
    --xd-muted: #64748b;
    --xd-dim: #94a3b8;
    --xd-violet: #8b5cf6;
    --xd-violet2: #7c3aed;
    --xd-violet3: #6d28d9;
    --xd-violet-deep: #4c1d95;
    --xd-violet-light: #c4b5fd;
    --xd-violet-rgb: 139, 92, 246;
    --xd-violet2-rgb: 124, 58, 237;
    --xd-cyan: #22d3ee;
    --xd-cyan-rgb: 34, 211, 238;
    --xd-pink: #f472b6;
    --xd-pink-rgb: 244, 114, 182;
    --xd-amber: #fbbf24;
    --xd-green: #34d399;
    --xd-red: #f87171;
    --xd-glow: rgba(var(--xd-violet2-rgb), .35);
    --xd-glow-cyan: rgba(var(--xd-cyan-rgb), .3);
    --theme-bg: #f4f6fb;
    --theme-gradient-from: #8b5cf6;
    --theme-gradient-to: #7c3aed;
}

html { color-scheme: light; }

body {
    background: linear-gradient(135deg, rgba(var(--xd-violet-rgb), .10) 0%, var(--theme-bg, #f4f6fb) 45%, rgba(var(--xd-violet-rgb), .12) 100%) !important;
    color: var(--xd-text);
    min-height: 100vh;
}

/* พื้นหลัง: แสงธีมจางๆ + ตารางสี่เหลี่ยมบางๆ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(900px 540px at 88% -8%, rgba(var(--xd-violet-rgb), .09), transparent 60%),
        radial-gradient(720px 480px at -6% 22%, rgba(var(--xd-cyan-rgb), .07), transparent 55%),
        radial-gradient(800px 520px at 55% 115%, rgba(var(--xd-violet-rgb), .07), transparent 62%);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .6;
    background-image:
        linear-gradient(rgba(15, 23, 42, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at top, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse at top, #000 25%, transparent 78%);
}

/* ---------- การ์ด ---------- */
.g-card {
    background: var(--xd-card);
    border: 1px solid var(--xd-border);
    border-radius: 1.25rem;
    box-shadow: 0 12px 32px -20px rgba(2, 6, 23, .14);
}
.g-card-hover {
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.g-card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--xd-violet-rgb), .35);
    box-shadow: 0 18px 40px -22px rgba(2, 6, 23, .18), 0 0 0 1px rgba(var(--xd-violet-rgb), .12), 0 0 30px -16px var(--xd-glow);
}

/* ---------- ปุ่ม ---------- */
.n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.4rem;
    border-radius: .9rem;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--xd-violet) 0%, var(--xd-violet3) 55%, var(--xd-violet-deep) 100%);
    border: 1px solid rgba(var(--xd-violet-rgb), .45);
    box-shadow: 0 12px 28px -14px var(--xd-glow);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    cursor: pointer;
}
.n-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 36px -14px var(--xd-glow);
}
.n-btn:active { transform: translateY(0); }
.n-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.4rem;
    border-radius: .9rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--xd-text);
    background: #ffffff;
    border: 1px solid var(--xd-border-strong);
    transition: all .2s ease;
    cursor: pointer;
}
.n-btn-ghost:hover {
    background: rgba(var(--xd-violet-rgb), .07);
    border-color: rgba(var(--xd-violet-rgb), .45);
    box-shadow: 0 0 24px -14px var(--xd-glow);
}

/* ข้อความไล่สีธีม */
.neon-text {
    background: linear-gradient(100deg, var(--xd-violet) 0%, var(--xd-violet3) 60%, var(--xd-violet-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.neon-line {
    height: 3px;
    width: 72px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--xd-violet), var(--xd-cyan));
    box-shadow: 0 0 14px -3px var(--xd-glow);
}

/* หัวข้อ section */
.s-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--xd-text);
}
.s-title .ico {
    width: 46px;
    height: 46px;
    border-radius: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--xd-violet), var(--xd-violet3));
    box-shadow: 0 10px 24px -14px var(--xd-glow);
    flex-shrink: 0;
}

/* ป้าย badge */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(var(--xd-violet-rgb), .1);
    color: var(--xd-violet3);
    border: 1px solid rgba(var(--xd-violet-rgb), .22);
}

/* ---------- ตาราง ---------- */
.xd-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.xd-table thead th {
    text-align: left;
    padding: .8rem 1rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--xd-muted);
    background: rgba(var(--xd-violet-rgb), .07);
    border-bottom: 1px solid var(--xd-border);
    white-space: nowrap;
}
.xd-table tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    color: var(--xd-text);
    vertical-align: middle;
}
.xd-table tbody tr:last-child td { border-bottom: 0; }
.xd-table tbody tr { transition: background .15s ease; }
.xd-table tbody tr:hover { background: rgba(var(--xd-violet-rgb), .05); }

/* ---------- โมดัล ---------- */
.xd-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.xd-modal-backdrop.open { opacity: 1; visibility: visible; }
.xd-modal {
    width: 100%;
    max-width: 560px;
    max-height: 86vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--xd-border-strong);
    border-radius: 1.4rem;
    box-shadow: 0 40px 90px -30px rgba(2, 6, 23, .35), 0 0 50px -30px var(--xd-glow);
    transform: translateY(14px) scale(.97);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.xd-modal-backdrop.open .xd-modal { transform: translateY(0) scale(1); }

/* ---------- แถบเลื่อน ---------- */
html::-webkit-scrollbar { width: 9px; height: 9px; }
html::-webkit-scrollbar-track { background: #eef1f7; }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--xd-violet), var(--xd-violet-deep)); border-radius: 99px; border: 2px solid #eef1f7; }
html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--xd-violet2), var(--xd-violet-deep)); }
html { scrollbar-width: thin; scrollbar-color: var(--xd-violet) #eef1f7; }
.custom-scrollbar::-webkit-scrollbar { width: 7px; height: 7px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(var(--xd-violet-rgb), .4); border-radius: 99px; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(var(--xd-violet-rgb), .4) transparent; }

/* ---------- ฟอร์ม ---------- */
input, textarea, select { color: var(--xd-text); }
input::placeholder, textarea::placeholder { color: #94a3b8; }
input.bg-white, textarea.bg-white, select.bg-white { background-color: #ffffff !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--xd-violet); }

/* ---------- ป้ายสถานะ: ใช้โทนสีมาตรฐานของ Tailwind (สว่าง) ---------- */

/* ---------- อนิเมชั่น ---------- */
@keyframes xd-pulse-glow {
    0%, 100% { box-shadow: 0 0 22px -8px var(--xd-glow); }
    50% { box-shadow: 0 0 44px -8px var(--xd-glow), 0 0 70px -24px var(--xd-glow-cyan); }
}
.xd-glow-anim { animation: xd-pulse-glow 3.2s ease-in-out infinite; }
@keyframes xd-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.xd-float { animation: xd-float 4.5s ease-in-out infinite; }
@keyframes xd-shine {
    0% { transform: translateX(-130%) skewX(-18deg); }
    100% { transform: translateX(230%) skewX(-18deg); }
}