/* WABI SABI Booking — brand aligned with wabisabivillahuahin.com (spa teal · dark ink · warm stone) */
/* @font-face lives in assets/css/fonts.php (absolute paths under APP_URL — no cross-origin font loads). */

/* ─── App shell: ethereal pastel (aqua left → lilac / rose right, marketing-site feel) ─── */
body.app-shell {
    font-family: 'WabiLine', 'Noto Sans Thai', 'Segoe UI', sans-serif;
    background-color: #e8f6fa;
    background-image:
        radial-gradient(ellipse 100% 80% at 0% 45%, rgba(165, 230, 245, 0.55), transparent 55%),
        radial-gradient(ellipse 90% 75% at 100% 40%, rgba(233, 213, 255, 0.45), transparent 52%),
        radial-gradient(ellipse 70% 60% at 70% 100%, rgba(255, 210, 225, 0.35), transparent 50%),
        linear-gradient(105deg, #dff6fb 0%, #e8f0ff 32%, #f1ecff 58%, #fdf0f7 100%);
    background-attachment: fixed;
}

/* Home: content-height page — avoids huge empty band under footer vs tight top */
body.app-shell.home-page-body {
    min-height: auto;
}

body.app-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 88%, transparent 40%, rgba(255, 255, 255, 0.2) 41%, transparent 42%),
        radial-gradient(circle at 10% 88%, transparent 46%, rgba(255, 255, 255, 0.14) 47%, transparent 48%),
        radial-gradient(circle at 92% 14%, transparent 34%, rgba(255, 255, 255, 0.18) 35%, transparent 37%),
        radial-gradient(circle at 92% 14%, transparent 40%, rgba(255, 255, 255, 0.12) 41%, transparent 42%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.font-brand-display {
    font-family: 'WabiLinux', 'Noto Sans Thai', serif;
}

.main-surface > div {
    position: relative;
    z-index: 1;
}

/* ─── Readable copy on light pastel main (was tuned for dark purple bg) ─── */
body.app-shell main.main-surface {
    color: #292524;
}

body.app-shell main.main-surface .text-stone-500 {
    color: #57534e !important;
}

body.app-shell main.main-surface .text-stone-400 {
    color: #6b6560 !important;
}

body.app-shell main.main-surface .home-main > header.home-page-head p {
    color: #5b21b6 !important;
}

body.app-shell main.main-surface .home-main > header.home-page-head h1 {
    color: #0f172a !important;
    --tw-drop-shadow: 0 0 #0000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.app-shell main.main-surface .home-main .home-page-foot-links > a[href*="dashboard"] {
    color: #5b21b6 !important;
}

body.app-shell main.main-surface .home-main .home-page-foot-links > a[href*="dashboard"]:hover {
    color: #7c3aed !important;
}

body.app-shell main.main-surface .home-main .home-page-foot-links > a[target="_blank"] {
    color: #b45309 !important;
}

body.app-shell main.main-surface .home-main .home-page-foot-links > a[target="_blank"]:hover {
    color: #92400e !important;
}

body.app-shell main.main-surface .commission-panel,
body.app-shell main.main-surface .commission-panel h1,
body.app-shell main.main-surface .commission-panel h4 {
    color: #1c1917;
}

body.app-shell main.main-surface .commission-panel p.text-stone-600,
body.app-shell main.main-surface .commission-panel label {
    color: #44403c !important;
}

/* Commission sheet body cells: stronger ink */
.commission-sheet-table tbody td {
    color: #1a1a1a !important;
}

.commission-sheet-table .text-xs.text-stone-600 {
    color: #374151 !important;
}

/* ─── Sidebar: translucent frosted glass (pastel shows through) ─── */
#sidebar {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 253, 252, 0.45) 40%, rgba(248, 250, 252, 0.42) 100%),
        linear-gradient(135deg, rgba(126, 202, 204, 0.14) 0%, transparent 48%);
    backdrop-filter: blur(26px) saturate(1.15);
    -webkit-backdrop-filter: blur(26px) saturate(1.15);
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        8px 0 40px rgba(23, 73, 92, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.65);
}

#sidebar nav {
    padding: 1.125rem 0.7rem 1.5rem;
}

#sidebar nav > div.pt-3 + div.pt-3 {
    position: relative;
    padding-top: 1rem;
    margin-top: 0.35rem;
}

#sidebar nav > div.pt-3 + div.pt-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.6rem;
    right: 0.6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126, 202, 204, 0.35), transparent);
}

#sidebar .galaxy-nav-label {
    color: #2d5c60 !important;
    font-weight: 600;
    letter-spacing: 0.11em;
    margin-bottom: 0.35rem !important;
    padding-left: 0.65rem !important;
    border-left: 3px solid rgba(74, 148, 152, 0.75);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

#sidebar .sidebar-link {
    color: #0f172a !important;
    font-weight: 500;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 3px solid transparent;
    margin-bottom: 0.15rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.22s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

/* Label text only (not notification badges with text-white) */
#sidebar .sidebar-link .truncate,
#sidebar .sidebar-link > i + span {
    color: inherit !important;
}

#sidebar .sidebar-link i {
    color: #475569 !important;
    opacity: 1;
    transition: color 0.2s ease;
}

#sidebar .sidebar-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(126, 202, 204, 0.35);
    border-left-color: rgba(94, 176, 180, 0.55);
    color: #0f172a !important;
    box-shadow: 0 4px 18px rgba(94, 176, 180, 0.14);
    transform: translateX(2px);
}

#sidebar .sidebar-link:hover:not(.active) i {
    color: #2f6b70 !important;
}

#sidebar .sidebar-link.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(126, 202, 204, 0.38), rgba(94, 176, 180, 0.28)) !important;
    border: 1px solid rgba(94, 176, 180, 0.42) !important;
    border-left: 3px solid #3d787c !important;
    color: #0f172a !important;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    box-shadow:
        0 4px 20px rgba(94, 176, 180, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transform: translateX(1px);
}

#sidebar .sidebar-link.active i {
    color: #1e3f42 !important;
}

/* Sidebar count badges: parent .sidebar-link uses light text-shadow — badges need solid bg + explicit contrast */
#sidebar .sidebar-link .sidebar-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #fff !important;
    background-color: #047857 !important;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: none !important;
}

#sidebar .sidebar-link .sidebar-count-badge--amber {
    background-color: #b45309 !important;
}

#sidebar .sidebar-link .sidebar-count-badge--rose {
    background-color: #be123c !important; /* rose-700 */
}

#sidebar nav .border-stone-800 {
    border-color: rgba(203, 213, 225, 0.85) !important;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

#sidebar nav > div.pt-6.border-t {
    margin-top: 0.75rem;
    padding-top: 1.125rem !important;
}

#sidebar nav a[href*="logout.php"] {
    color: #b91c1c !important;
    border: 1px solid rgba(252, 165, 165, 0.6);
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0.85rem;
    font-weight: 500;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

#sidebar nav a[href*="logout.php"]:hover {
    color: #991b1b !important;
    background: rgba(254, 226, 226, 0.78) !important;
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.08);
}

#sidebar nav a[href*="logout.php"] i {
    color: #dc2626;
}

/* ─── Top nav ─── */
/* fixed top bar — do not add Tailwind `relative` on same node; it overrides `.fixed` in bundle order */
.nav-lux {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    background: linear-gradient(90deg, rgba(72, 64, 108, 0.86), rgba(58, 52, 96, 0.84), rgba(72, 64, 108, 0.86)) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(221, 214, 254, 0.28) !important;
    box-shadow: 0 8px 24px rgba(55, 42, 98, 0.16);
}

.nav-lux button:not(:disabled),
.nav-lux a[href] {
    transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}

.nav-lux button:hover:not(:disabled),
.nav-lux a[href]:hover {
    transform: translateY(-1px);
}

.nav-lux [id="notifMenu"] a {
    transition: background 0.2s ease, transform 0.15s ease;
}

.nav-lux [id="notifMenu"] a:hover {
    transform: translateX(2px);
}

/* Glass popovers (notifications, lang, user) */
.galaxy-glass-popover {
    background: rgba(86, 78, 128, 0.90) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(233, 213, 255, 0.36) !important;
    box-shadow: 0 20px 44px rgba(65, 55, 110, 0.22);
}

.galaxy-lang-btn {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 213, 255, 0.38);
    box-shadow: 0 4px 18px rgba(80, 60, 130, 0.18);
}

.galaxy-lang-btn:hover {
    background: rgba(196, 181, 253, 0.22);
    border-color: rgba(244, 194, 234, 0.5);
}

/* ─── Main glass cards ─── */
main.main-surface .rounded-xl.border.border-stone-200.bg-white,
main.main-surface .rounded-xl.shadow-sm.border.border-stone-200 {
    background: rgba(255, 252, 255, 0.94) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(196, 181, 253, 0.42) !important;
    box-shadow:
        0 4px 22px rgba(80, 60, 130, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}

main.main-surface .rounded-xl.border.border-stone-200.bg-white:hover,
main.main-surface .rounded-xl.shadow-sm.border.border-stone-200:hover {
    transform: translateY(-3px);
    border-color: rgba(167, 139, 250, 0.55) !important;
    box-shadow:
        0 20px 46px -12px rgba(90, 70, 150, 0.18),
        0 0 0 1px rgba(221, 214, 254, 0.35);
}

main.main-surface .text-stone-800 {
    color: #1a2320 !important;
}

main.main-surface tbody tr:hover td:first-child {
    border-left: 3px solid #a78bfa;
}

main.main-surface tbody tr {
    transition: background-color 0.15s ease;
}

main.main-surface tbody tr:hover {
    background-color: rgba(167, 139, 250, 0.12);
}

main.main-surface button[type="submit"]:hover,
main.main-surface .bg-gold-500:hover {
    transition: transform 0.2s ease, filter 0.2s ease;
}

main.main-surface button[type="submit"]:hover,
main.main-surface .bg-gold-500:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

main.main-surface.booking-create-page .rounded-xl.border.border-stone-200.bg-white,
main.main-surface.booking-create-page .rounded-xl.shadow-sm.border.border-stone-200,
main.main-surface.booking-list-page .rounded-xl.border.border-stone-200.bg-white,
main.main-surface.booking-list-page .rounded-xl.shadow-sm.border.border-stone-200 {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
main.main-surface.booking-create-page .rounded-xl.border.border-stone-200.bg-white:hover,
main.main-surface.booking-create-page .rounded-xl.shadow-sm.border.border-stone-200:hover,
main.main-surface.booking-list-page .rounded-xl.border.border-stone-200.bg-white:hover,
main.main-surface.booking-list-page .rounded-xl.shadow-sm.border.border-stone-200:hover {
    transform: none !important;
    border-color: rgba(196, 181, 253, 0.32) !important;
    box-shadow:
        0 4px 24px rgba(30, 10, 50, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
main.main-surface.booking-create-page button[type='submit']:hover,
main.main-surface.booking-create-page .bg-gold-500:hover,
main.main-surface.booking-list-page button[type='submit']:hover,
main.main-surface.booking-list-page .bg-gold-500:hover {
    transform: none !important;
}

/* New booking: left / right panels (stops one ultra-wide stack) */
main.main-surface.booking-create-page .booking-create-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    main.main-surface.booking-create-page .booking-create-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.5rem 2rem;
    }
}

main.main-surface.booking-create-page .booking-create-form > .flex.items-center.justify-end {
    padding-top: 0.25rem;
    border-top: 1px solid rgba(231, 229, 228, 0.9);
    margin-top: 0.25rem;
}

main.main-surface .border-emerald-200 {
    background: rgba(209, 250, 229, 0.55) !important;
    backdrop-filter: blur(10px);
    border-color: rgba(110, 231, 183, 0.45) !important;
}

main.main-surface .border-red-200 {
    background: rgba(254, 226, 226, 0.55) !important;
    backdrop-filter: blur(10px);
    border-color: rgba(248, 171, 171, 0.5) !important;
}

main.main-surface .border-amber-200 {
    background: rgba(254, 243, 199, 0.55) !important;
    backdrop-filter: blur(10px);
    border-color: rgba(252, 211, 77, 0.45) !important;
}

.flatpickr-input[readonly] {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

#sidebar::-webkit-scrollbar {
    width: 5px;
}
#sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}
#sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(126, 202, 204, 0.5), rgba(94, 176, 180, 0.38));
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(65, 58, 98, 0.28);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.5), rgba(192, 132, 252, 0.4));
    border-radius: 4px;
}

/* ─── Home hero: cinematic video (official site) ─── */
.home-hero-banner {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(196, 181, 253, 0.3);
    box-shadow: 0 24px 56px -20px rgba(35, 28, 65, 0.4);
    min-height: 280px;
}
@media (min-width: 768px) {
    .home-hero-banner {
        min-height: 400px;
    }
}
@media (min-width: 1024px) {
    .home-hero-banner {
        min-height: 500px;
    }
}

.home-hero-video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #4a4572;
    z-index: 1;
}

.home-hero-video-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77vh;
    min-width: 100%;
    height: 56.25vw;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .home-hero-video-wrap iframe {
        transform: translate(-48%, -50%) scale(1.04);
    }
}

/* Still image under video (first official slideshow frame) while iframe loads */
.home-hero-static-fallback {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Home: large villa pick cards — equal visual weight */
.home-villa-card-media {
    height: clamp(300px, 48vh, 520px);
}

@media (min-width: 640px) {
    .home-villa-card-media {
        height: clamp(320px, 50vh, 600px);
    }
}

@media (min-width: 1024px) {
    .home-villa-card-media {
        height: clamp(360px, 52vh, 720px);
    }
}

.home-villa-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Home hero: two villas (Yuugen | Hoshi), no video */
.home-hero-banner--dual .home-hero-split {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    z-index: 1;
    background: rgba(58, 52, 95, 0.45);
}

.home-hero-split__half {
    background-size: cover;
    background-position: center;
    min-height: 100%;
    transform: scale(1.02);
    transition: transform 0.6s ease;
}

@media (hover: hover) {
    .home-hero-banner--dual:hover .home-hero-split__half {
        transform: scale(1.04);
    }
}

.home-hero-split__half--yuugen {
    background-position: center 42%;
}

.home-hero-split__half--hoshi {
    background-position: center 48%;
}

@media (max-width: 640px) {
    .home-hero-banner--dual .home-hero-split {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

/* ─── Auth pages ─── */
body.auth-galaxy {
    font-family: 'WabiLine', 'Noto Sans Thai', sans-serif;
    min-height: 100vh;
    background-color: #353052;
    background-image:
        radial-gradient(ellipse 95% 70% at 50% -22%, rgba(196, 181, 253, 0.24), transparent 52%),
        radial-gradient(ellipse 65% 50% at 0% 100%, rgba(244, 171, 211, 0.07), transparent 48%),
        linear-gradient(170deg, #4a4372 0%, #353052 48%, #2b2748 100%);
}

body.auth-galaxy::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 25% 30%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 75% 20%, rgba(221, 214, 254, 0.32), transparent);
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 0.32;
    z-index: 0;
}

/* Register / forgot-password: richer aurora + depth (no video embed) */
body.auth-galaxy.auth-aurora {
    background-color: #0c0818;
    background-image:
        radial-gradient(ellipse 110% 85% at 50% -35%, rgba(139, 92, 246, 0.42), transparent 58%),
        radial-gradient(ellipse 70% 55% at 105% 15%, rgba(244, 114, 182, 0.22), transparent 52%),
        radial-gradient(ellipse 75% 60% at -5% 85%, rgba(251, 191, 36, 0.14), transparent 48%),
        radial-gradient(ellipse 55% 45% at 85% 92%, rgba(45, 212, 191, 0.1), transparent 50%),
        linear-gradient(168deg, #221a3d 0%, #151026 38%, #0a0714 100%);
}

body.auth-galaxy.auth-aurora::before {
    background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1px 1px at 88% 18%, rgba(221, 214, 254, 0.5), transparent),
        radial-gradient(1px 1px at 40% 78%, rgba(253, 224, 255, 0.35), transparent),
        radial-gradient(1px 1px at 72% 65%, rgba(196, 181, 253, 0.4), transparent),
        radial-gradient(1px 1px at 55% 38%, rgba(255, 255, 255, 0.28), transparent);
    opacity: 0.55;
}

body.auth-galaxy.auth-aurora::after {
    content: '';
    position: fixed;
    inset: -35%;
    background: conic-gradient(
        from 200deg at 50% 45%,
        rgba(167, 139, 250, 0.18) 0deg,
        transparent 55deg,
        rgba(244, 194, 234, 0.12) 110deg,
        transparent 200deg,
        rgba(94, 234, 212, 0.08) 270deg,
        transparent 320deg,
        rgba(167, 139, 250, 0.14) 360deg
    );
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    animation: auth-aurora-drift 32s linear infinite;
}

@keyframes auth-aurora-drift {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-galaxy.auth-aurora::after {
        animation: none;
        opacity: 0.32;
    }
}

.auth-glass-panel {
    background: rgba(86, 78, 128, 0.38);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(233, 213, 255, 0.32);
    box-shadow:
        0 25px 52px -12px rgba(65, 55, 110, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.auth-lang-menu {
    background: rgba(86, 78, 128, 0.88) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 213, 255, 0.32) !important;
}

/* Login page: full-viewport hero still + compact bottom form */
html:has(body.auth-login-cinematic) {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* :has() fallback — older browsers still get body edge-to-edge */
@supports not selector(:has(*)) {
    html {
        overflow-x: hidden;
    }
}

body.auth-login-cinematic {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    height: 100dvh;
    overflow: hidden;
    overflow-x: hidden;
    background: #080a10;
}

/* Login: drop auth-galaxy purple gradient so overscroll / safe-area match the hero */
body.auth-galaxy.auth-login-cinematic {
    background-color: #080a10;
    background-image: none;
}

body.auth-login-cinematic::before {
    display: none;
}

.login-cinematic-root {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1;
    margin: 0;
    background: #080a10;
}

/* Readability: light vignette over video / still (below form chrome z-index 20) */
.login-cinematic-root::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(6, 8, 14, 0.42) 0%,
        rgba(6, 8, 14, 0.08) 42%,
        rgba(6, 8, 14, 0.55) 100%
    );
}

/* Full-viewport YouTube background (16:9 cover) */
.login-cinematic-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.login-cinematic-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77vh;
    height: 100vh;
    min-width: 100%;
    min-height: 56.25vw;
    transform: translate(-50%, -50%);
    border: 0;
    opacity: 1;
}

.login-cinematic-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #080a10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
    will-change: transform;
    animation: login-fallback-drift 32s ease-in-out infinite alternate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.login-cinematic-form-sheet {
    pointer-events: none;
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 max(0.5rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-bottom))
        max(0.5rem, env(safe-area-inset-right));
    background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.35) 100%);
}

.login-cinematic-form-inner {
    pointer-events: auto;
    width: 100%;
    max-width: min(42rem, calc(100% - 1rem));
    animation: login-form-rise 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Login: brand + system name — upper left */
.login-top-brand {
    position: fixed;
    top: max(1.2rem, calc(0.55rem + env(safe-area-inset-top)));
    left: clamp(1.35rem, 5.5vw, 3.75rem);
    right: auto;
    z-index: 50;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem 0.75rem;
    justify-content: flex-start;
    max-width: min(26rem, calc(100vw - 7rem));
}

.login-top-brand__title {
    flex: 0 1 auto;
}

.login-top-brand__rule {
    display: block;
    width: 1px;
    align-self: stretch;
    min-height: 2.25rem;
    background: rgba(255, 255, 255, 0.28);
}

.login-top-lang {
    position: fixed;
    top: max(1.2rem, calc(0.55rem + env(safe-area-inset-top)));
    right: max(1.35rem, calc(0.85rem + env(safe-area-inset-right)), 4.5vw);
    z-index: 50;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Login: language trigger — larger tap target, balanced flag size */
.login-lang-trigger {
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    min-height: 2.75rem;
    border-radius: 0.75rem;
}

.login-lang-trigger .fa-chevron-down {
    font-size: 0.65rem;
    opacity: 0.92;
}

.login-lang-menu {
    min-width: 11.5rem;
    border-radius: 0.85rem;
}

.login-lang-menu a {
    padding: 0.65rem 1rem;
    font-size: 0.9375rem;
    gap: 0.65rem;
}

/* Login: hero video mute — icon only, top bar next to language */
.login-hero-mute-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(8, 10, 16, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(236, 254, 255, 0.95);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.login-hero-mute-btn:hover:not(:disabled) {
    background: rgba(18, 22, 32, 0.72);
    border-color: rgba(255, 255, 255, 0.45);
}

.login-hero-mute-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.login-hero-mute-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.login-hero-mute-btn i {
    font-size: 1rem;
    opacity: 0.95;
}

.login-hero-mute-btn .login-hero-mute-label {
    max-width: 8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 380px) {
    .login-hero-mute-btn .login-hero-mute-label {
        display: none;
    }
    .login-hero-mute-btn {
        padding: 0.55rem 0.75rem;
        min-width: 2.75rem;
    }
}

.login-inline-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    border-radius: 0.7rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.login-inline-seg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 2.85rem;
    min-width: 0;
    flex: 1 1 8rem;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.login-inline-seg--pass {
    position: relative;
    flex: 1.15 1 9rem;
    padding-right: 1.85rem;
}

.login-inline-input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: rgba(236, 254, 255, 0.95);
}

.login-inline-input::placeholder {
    color: rgba(207, 250, 254, 0.36);
}

.login-inline-input:focus {
    outline: none;
}

.login-inline-eye {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.login-inline-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.28rem;
    padding: 0 0.4rem 0 0;
    min-height: 2.85rem;
    background: rgba(0, 0, 0, 0.14);
}

.login-inline-submit {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    min-height: 2.85rem;
    background: linear-gradient(135deg, #4a7894, #7ecacc 45%, #5a9aa0);
    border: 0;
    cursor: pointer;
    color: #fff;
    white-space: nowrap;
    font: inherit;
    transition: filter 0.2s ease, transform 0.12s ease;
}

.login-inline-submit:hover {
    filter: brightness(1.08);
}

.login-inline-submit:active {
    transform: scale(0.98);
}

@media (max-width: 420px) {
    .login-inline-seg {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        flex: 1 1 100%;
    }

    .login-inline-seg--pass {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .login-inline-actions {
        flex: 1 1 100%;
        width: 100%;
        padding: 0.35rem 0.45rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        justify-content: flex-start;
    }

    .login-inline-submit {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 0;
    }

    .login-inline-bar {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

@media (min-width: 421px) {
    .login-inline-bar {
        flex-wrap: nowrap;
    }

    .login-inline-submit {
        border-radius: 0;
    }
}

.login-auth-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(239, 250, 255, 0.95);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.login-auth-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(126, 202, 204, 0.55);
    color: #fff;
    transform: translateY(-1px);
}

.login-auth-icon-btn--sm {
    width: 2.35rem;
    height: 2.35rem;
}

/* Tiny icons after login button */
.login-auth-icon-btn--inline {
    width: 1.55rem;
    height: 1.55rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border-width: 1px;
}

.login-auth-icon-btn--inline:hover {
    transform: none;
}

.auth-glass-panel--login-compact {
    background: rgba(16, 18, 28, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ─── Login: subtle motion & feedback (respects reduced-motion below) ─── */
@keyframes login-form-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes login-glass-glow {
    0%,
    100% {
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.06),
            0 0 28px rgba(126, 202, 204, 0.06);
    }
    50% {
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(126, 202, 204, 0.2),
            0 0 40px rgba(126, 202, 204, 0.12);
    }
}

@keyframes login-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    18% {
        transform: translateX(-5px);
    }
    36% {
        transform: translateX(5px);
    }
    54% {
        transform: translateX(-3px);
    }
    72% {
        transform: translateX(3px);
    }
}

@keyframes login-fallback-drift {
    0% {
        transform: scale(1.017) translate(0, 0);
    }
    100% {
        transform: scale(1.045) translate(-0.75%, -0.4%);
    }
}

.auth-glass-panel--login-compact {
    animation: login-glass-glow 5.5s ease-in-out infinite;
}

.auth-glass-panel--login-compact.login-glass--err {
    animation:
        login-shake 0.48s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
        login-glass-glow 5.5s ease-in-out 0.55s infinite;
}

.login-inline-seg:focus-within {
    background: rgba(126, 202, 204, 0.11);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.42);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.login-inline-seg {
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.login-inline-submit {
    box-shadow: 0 4px 20px rgba(74, 120, 148, 0.38);
    transition:
        filter 0.2s ease,
        transform 0.12s ease,
        box-shadow 0.25s ease;
}

.login-inline-submit:hover {
    box-shadow: 0 6px 28px rgba(126, 202, 204, 0.42);
}

.login-top-brand {
    animation: login-form-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.login-top-lang {
    animation: login-form-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@media (prefers-reduced-motion: reduce) {
    .login-cinematic-form-inner,
    .login-top-brand,
    .login-top-lang,
    .login-cinematic-fallback,
    .auth-glass-panel--login-compact,
    .auth-glass-panel--login-compact.login-glass--err {
        animation: none !important;
    }

    .login-cinematic-video-wrap {
        display: none;
    }

    .login-top-lang .login-hero-mute-btn {
        display: none !important;
    }

    .login-cinematic-root::after {
        background: linear-gradient(180deg, rgba(6, 8, 14, 0.5) 0%, rgba(6, 8, 14, 0.2) 50%, rgba(6, 8, 14, 0.65) 100%);
    }

    .auth-glass-panel--login-compact {
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .login-cinematic-fallback {
        will-change: auto;
        transform: none;
    }
}

/* ─── Occupancy calendar (pages/calendar) ─── */
.occ-cal-title-icon {
    flex-shrink: 0;
}

.occ-cal-toolbar {
    align-items: center;
}

.occ-cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #fff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #475569;
    box-shadow: 0 4px 12px rgba(23, 73, 92, 0.06);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        transform 0.12s ease;
}

.occ-cal-nav-btn:hover {
    border-color: rgba(126, 202, 204, 0.65);
    color: #0f766e;
    box-shadow: 0 6px 16px rgba(126, 202, 204, 0.15);
    transform: translateY(-1px);
}

.occ-cal-month-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    font-weight: 600;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(224, 242, 241, 0.65), rgba(237, 233, 254, 0.55));
    border: 1px solid rgba(126, 202, 204, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    min-width: 11rem;
    justify-content: center;
}

.occ-cal-month-pill__year {
    font-weight: 500;
    font-size: 0.8rem;
    color: #64748b;
    letter-spacing: 0.02em;
}

.occ-cal-today-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0d9488, #7ecacc 55%, #2dd4bf);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.28);
    transition:
        filter 0.2s ease,
        transform 0.12s ease,
        box-shadow 0.2s ease;
}

.occ-cal-today-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.32);
}

.occ-cal-shell {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, #fff 38%);
    box-shadow:
        0 20px 44px -14px rgba(23, 73, 92, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}

.occ-cal-scroll {
    max-width: 100%;
}

.occ-cal-table {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.occ-cal-table thead tr {
    background: linear-gradient(180deg, #f1f5f9 0%, #e8eef5 100%);
}

.occ-cal-th-villa {
    position: sticky;
    left: 0;
    z-index: 20;
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    min-width: 8.5rem;
    background: linear-gradient(90deg, #f8fafc 88%, rgba(248, 250, 252, 0));
    box-shadow: 6px 0 14px rgba(15, 23, 42, 0.04);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    vertical-align: middle;
}

.occ-cal-th-day {
    padding: 0.35rem 0.15rem 0.45rem;
    text-align: center;
    min-width: 2.1rem;
    font-weight: 600;
    color: #334155;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    border-right: 1px solid rgba(226, 232, 240, 0.85);
    background: rgba(255, 255, 255, 0.35);
    vertical-align: middle;
}

.occ-cal-th-day:last-child {
    border-right: 0;
}

.occ-cal-th-day__dow {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #94a3b8;
    line-height: 1.2;
}

.occ-cal-th-day__num {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 0.12rem;
    line-height: 1.15;
}

.occ-cal-th-day--weekend {
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.55), rgba(254, 215, 170, 0.22));
}

.occ-cal-th-day--weekend .occ-cal-th-day__dow {
    color: #b45309;
}

.occ-cal-th-day--holiday {
    background: linear-gradient(180deg, rgba(254, 226, 226, 0.55), rgba(254, 202, 202, 0.25));
}

.occ-cal-th-day--holiday .occ-cal-th-day__dow {
    color: #b91c1c;
}

.occ-cal-th-day--today {
    background: linear-gradient(180deg, rgba(204, 251, 241, 0.95), rgba(167, 243, 208, 0.35));
    box-shadow: inset 0 -3px 0 #0d9488;
}

.occ-cal-th-day--today .occ-cal-th-day__num {
    color: #0f766e;
}

.occ-cal-holiday-dot {
    display: block;
    width: 0.35rem;
    height: 0.35rem;
    margin: 0.2rem auto 0;
    border-radius: 9999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(254, 202, 202, 0.5);
}

.occ-cal-row:nth-child(even) .occ-cal-td {
    background: rgba(248, 250, 252, 0.45);
}

.occ-cal-row:hover .occ-cal-td:not(.occ-cal-td-villa) {
    background: rgba(236, 253, 245, 0.35);
}

.occ-cal-row:hover .occ-cal-td--today:not(.occ-cal-td-villa) {
    background: linear-gradient(180deg, rgba(204, 251, 241, 0.5), rgba(236, 253, 245, 0.35));
}

.occ-cal-td-villa {
    position: sticky;
    left: 0;
    z-index: 10;
    padding: 0.4rem 0.75rem;
    font-weight: 600;
    color: #1e293b;
    min-width: 8.5rem;
    background: linear-gradient(90deg, #fff 92%, rgba(255, 255, 255, 0));
    border-right: 1px solid rgba(226, 232, 240, 0.95);
    border-bottom: 1px solid rgba(241, 245, 249, 0.95);
    box-shadow: 6px 0 12px rgba(15, 23, 42, 0.03);
    vertical-align: middle;
}

.occ-cal-row:hover .occ-cal-td-villa {
    background: linear-gradient(90deg, #f8fafc 92%, rgba(248, 250, 252, 0));
}

.occ-cal-villa-name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.occ-cal-td {
    padding: 0.2rem 0.12rem;
    text-align: center;
    border-right: 1px solid rgba(241, 245, 249, 0.9);
    border-bottom: 1px solid rgba(241, 245, 249, 0.9);
    vertical-align: middle;
}

.occ-cal-td:last-child {
    border-right: 0;
}

.occ-cal-td--today {
    background: linear-gradient(180deg, rgba(204, 251, 241, 0.35), rgba(240, 253, 250, 0.2));
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.25);
}

.occ-cal-free {
    display: block;
    width: 100%;
    min-height: 1.65rem;
    border-radius: 0.35rem;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.95), rgba(209, 250, 229, 0.45));
    border: 1px solid rgba(167, 243, 208, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.occ-cal-booking {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.65rem;
    padding: 0 0.1rem;
    border-radius: 0.35rem;
    text-decoration: none;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.62rem;
    line-height: 1.2;
    background: linear-gradient(135deg, #0369a1 0%, #4f46e5 48%, #6366f1 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 3px 10px rgba(79, 70, 229, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition:
        filter 0.18s ease,
        transform 0.12s ease,
        box-shadow 0.18s ease;
}

.occ-cal-booking:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        0 5px 16px rgba(79, 70, 229, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Stay ended (checkout date before today) */
.occ-cal-booking--past {
    color: #f8fafc !important;
    font-weight: 600;
    background: linear-gradient(135deg, #64748b 0%, #475569 55%, #57534e 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 2px 8px rgba(71, 85, 105, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.occ-cal-booking--past:hover {
    filter: brightness(1.06);
    box-shadow:
        0 4px 12px rgba(71, 85, 105, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.occ-cal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.35rem;
    padding: 0.75rem 1rem;
    font-size: 0.72rem;
    color: #64748b;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), #f1f5f9);
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.occ-cal-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.occ-cal-legend__sw {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.occ-cal-legend__sw--booked {
    background: linear-gradient(135deg, #0369a1, #6366f1);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
}

.occ-cal-legend__sw--past {
    background: linear-gradient(135deg, #64748b, #57534e);
    box-shadow: 0 2px 6px rgba(71, 85, 105, 0.3);
}

.occ-cal-legend__sw--free {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.95), rgba(209, 250, 229, 0.5));
    border: 1px solid rgba(167, 243, 208, 0.6);
}

.occ-cal-legend__sw--holiday {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(254, 202, 202, 0.55);
}

.occ-cal-legend__sw--weekend {
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.65), rgba(254, 215, 170, 0.3));
    border: 1px solid rgba(251, 191, 36, 0.35);
}

/* ─── Dashboard (pages/dashboard) ─── */
@keyframes dash-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dash-banner-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.18);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.06);
    }
}

body.page-dashboard .dash-hero {
    animation: dash-rise 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-dashboard .dash-hero-icon {
    flex-shrink: 0;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

body.page-dashboard .dash-hero:hover .dash-hero-icon {
    transform: scale(1.04);
    box-shadow: 0 8px 20px rgba(45, 212, 191, 0.15);
}

body.page-dashboard .dash-pending-banner {
    animation: dash-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both,
        dash-banner-glow 4s ease-in-out 0.6s infinite;
}

body.page-dashboard .dash-panel {
    animation: dash-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    background: linear-gradient(180deg, #fff 0%, #fafaf9 100%);
    transition:
        box-shadow 0.28s ease,
        border-color 0.22s ease,
        transform 0.22s ease;
}

body.page-dashboard .dash-panel:not(.dash-panel--flush):hover {
    box-shadow: 0 18px 42px -14px rgba(23, 73, 92, 0.09);
    border-color: rgba(126, 202, 204, 0.32);
    transform: translateY(-1px);
}

body.page-dashboard .dash-panel--flush:hover {
    box-shadow: 0 18px 42px -14px rgba(23, 73, 92, 0.08);
    border-color: rgba(126, 202, 204, 0.28);
}

body.page-dashboard .dash-occ-row {
    transition:
        transform 0.18s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

body.page-dashboard .dash-occ-row:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 14px rgba(23, 73, 92, 0.06);
}

body.page-dashboard .dash-checkin-row {
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

body.page-dashboard .dash-checkin-row:hover {
    background: linear-gradient(90deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.95));
    border-color: rgba(126, 202, 204, 0.45);
    box-shadow: 0 4px 16px rgba(45, 212, 191, 0.08);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard .dash-hero,
    body.page-dashboard .dash-pending-banner,
    body.page-dashboard .dash-panel {
        animation: none !important;
    }

    body.page-dashboard .dash-pending-banner {
        box-shadow: none;
    }

    body.page-dashboard .dash-hero:hover .dash-hero-icon,
    body.page-dashboard .dash-panel:not(.dash-panel--flush):hover,
    body.page-dashboard .dash-panel--flush:hover,
    body.page-dashboard .dash-occ-row:hover,
    body.page-dashboard .dash-checkin-row:hover {
        transform: none;
    }
}

/* ─── SweetAlert2 (Wabi violet) ─── */
.wabi-swal-popup {
    border-radius: 1rem !important;
    border: 1px solid rgba(196, 181, 253, 0.42) !important;
    box-shadow: 0 24px 52px rgba(55, 48, 95, 0.28) !important;
    font-family: 'WabiLine', 'Noto Sans Thai', 'Segoe UI', sans-serif !important;
    background: rgba(255, 253, 255, 0.98) !important;
}

.wabi-swal-btn {
    border-radius: 0.75rem !important;
    padding: 0.55rem 1.35rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin: 0.25rem !important;
    border: none !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease !important;
}

.wabi-swal-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

button.swal2-confirm.wabi-swal-btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(124, 92, 220, 0.28) !important;
}

button.swal2-confirm.wabi-swal-btn-danger {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35) !important;
}

button.swal2-cancel.wabi-swal-btn-muted {
    background: rgba(120, 113, 108, 0.12) !important;
    color: #44403c !important;
    border: 1px solid rgba(120, 113, 108, 0.2) !important;
}

.swal2-actions {
    gap: 0.35rem !important;
}

/* ─── App modal shell (programmatic) ─── */
.wabi-app-modal {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wabi-app-modal[hidden],
.wabi-app-modal.hidden {
    display: none !important;
}

.wabi-app-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 26, 50, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wabi-app-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--wabi-modal-width, 28rem);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    border: 1px solid rgba(196, 181, 253, 0.36);
    background: linear-gradient(165deg, rgba(78, 70, 118, 0.94) 0%, rgba(62, 56, 102, 0.95) 100%);
    box-shadow: 0 28px 56px rgba(40, 35, 75, 0.34);
    animation: wabiModalIn 0.28s ease-out;
}

@keyframes wabiModalIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.wabi-app-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(233, 213, 255, 0.15);
}

.wabi-app-modal__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #f5f3ff;
    margin: 0;
    line-height: 1.35;
}

.wabi-app-modal__close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #e9d5ff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.wabi-app-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.wabi-app-modal__body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    color: rgba(237, 233, 254, 0.92);
    font-size: 0.9rem;
    line-height: 1.55;
}

.wabi-app-modal__footer {
    padding: 0.85rem 1.25rem 1.15rem;
    border-top: 1px solid rgba(233, 213, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ─── Commission report (spreadsheet-style) ─── */
.commission-main-surface > div {
    max-width: none !important;
}

.commission-panel {
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 40px rgba(80, 100, 140, 0.12);
    border-radius: 1rem;
}

.commission-sheet-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid rgba(26, 77, 94, 0.35);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.commission-sheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    min-width: 720px;
}

.commission-sheet-table th,
.commission-sheet-table td {
    border: 1px solid #cfd8dc;
    padding: 0.4rem 0.55rem;
    vertical-align: middle;
}

.commission-sheet-table .cs-title-row th {
    background: linear-gradient(180deg, #1a4d5e 0%, #164a5a 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 0.65rem 0.75rem;
    border-color: #154555;
}

.commission-sheet-table .cs-title-row .cs-period {
    font-weight: 500;
    font-size: 0.8rem;
    opacity: 0.95;
}

.commission-sheet-table thead .cs-hdr-teal {
    background: linear-gradient(180deg, #1a4d5e 0%, #174c5d 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-color: #154555;
    white-space: nowrap;
}

.commission-sheet-table thead .cs-hdr-sales {
    background: linear-gradient(180deg, #ffeb3b 0%, #fff176 55%, #ffeb3b 100%);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.75rem;
    text-align: center;
    border-color: #e6cf00;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.commission-sheet-table thead .cs-hdr-sub {
    background: #215c6f;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
    border-color: #1a4d5e;
    white-space: nowrap;
}

.commission-sheet-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.55);
}

.commission-sheet-table tbody tr.cs-row-clawback {
    background: rgba(254, 242, 242, 0.88);
}

.commission-sheet-table tbody tr:hover {
    background: rgba(255, 248, 225, 0.55);
}

.commission-sheet-table tbody tr.cs-row-clawback:hover {
    background: rgba(254, 226, 226, 0.92);
}

.commission-sheet-table tbody td {
    color: #263238;
}

.commission-sheet-table .cs-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.commission-sheet-table .cs-center {
    text-align: center;
}

.commission-sheet-table .cs-guest {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commission-sheet-table tfoot .cs-foot {
    background: #eceff1;
    font-weight: 700;
    color: #1a4d5e;
}

.commission-sheet-table tfoot .cs-foot .cs-num {
    color: #b8860b;
}

/* Booking pricing row (create / edit / wizard) — widths live here so they apply even when
   tailwind.bundle.css was built without scanning newer arbitrary classes (max-w-[13rem]). */
.booking-pricing-field {
    width: 100%;
    min-height: 2.375rem;
    box-sizing: border-box;
}
.booking-pricing-field--stay,
.booking-pricing-field--deposit,
.booking-pricing-field--gross {
    max-width: 13rem;
}
.booking-pricing-field--discount {
    max-width: 10.4rem; /* 13rem × 0.8 — แคบกว่าช่องค่าบ้านพัก 20% */
}

/* Keeps pricing row labels + inputs aligned (caption under net stay only). */
.booking-pricing-caption-line {
    font-size: 11px;
    line-height: 1.25;
    margin-top: 0.25rem;
    min-height: 1.375rem;
}
.booking-pricing-caption-line--spacer {
    visibility: hidden;
}

@media print {
    body.app-shell,
    body.auth-galaxy {
        background: #fff !important;
    }
    body.app-shell::before,
    body.auth-galaxy::before,
    body.auth-galaxy.auth-aurora::after {
        display: none !important;
    }
    nav,
    aside,
    .no-print {
        display: none !important;
    }
    main {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
    main.main-surface .rounded-xl:hover {
        transform: none !important;
    }
}