/* ==========================================================================
   Padel Billing — gaya ala tix.id: bersih, kartu jelas, tipografi besar,
   warna brand tegas, mobile-first.
   ========================================================================== */
:root {
    --primary: #013D21;
    --primary-dark: #012B17;
    --accent: #FF6A3D;
    --green: #16A34A;
    --red: #E11D48;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-400: #94A3B8;
    --gray-600: #475569;
    --gray-900: #0F172A;
    --radius: 14px;
    --shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
/* Pengaman: halaman TIDAK BOLEH pernah bisa di-pan/geser horizontal di level
   body — kalau ada konten yang meluber, itu harus scroll sendiri di dalam
   kontainernya (.grid-wrap, .date-scroller, .appbar-actions, dst), bukan
   menggeser seluruh halaman. Ini juga yang membuat elemen position:fixed
   (mis. .cart-bar) tidak ikut kegeser ke samping di browser mobile.
   PENTING: overflow-x:hidden SAJA TIDAK CUKUP — itu cuma meng-clip tampilan,
   tapi browser mobile (Chrome/Safari Android/iOS) tetap bisa mem-PAN halaman
   pakai gestur swipe berdasarkan elemen terlebar di dalam DOM (mis. tabel grid
   560px+), TERLEPAS dari overflow ancestornya. touch-action:pan-y di body
   secara eksplisit melarang gestur geser horizontal di level halaman; elemen
   yang MEMANG harus bisa digeser ke samping (grid, tanggal, ikon appbar)
   di-override balik ke pan-x agar tetap scroll normal di dalam dirinya sendiri. */
html, body { margin: 0; padding: 0; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
.grid-wrap, .date-scroller, .appbar-actions, .admin-sidebar { touch-action: pan-x pan-y; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    font-size: 16px;
    line-height: 1.4;
    padding-bottom: 90px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* App-lebar (mobile-first) tapi TETAP tercenter & tidak melebar mentah-mentah
   di layar laptop/desktop — bungkus konten tanpa padding sendiri (biar tidak
   dobel dengan margin bawaan .card/.section-title dkk yang sudah pas di HP). */
.app-shell { max-width: 1100px; margin: 0 auto; }

/* ---- Splash Screen (brand Atleta Society, muncul sekali per sesi) ---- */
.app-splash {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: #013D21;
    opacity: 1; visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}
.app-splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash-logo {
    position: relative; z-index: 1;
    width: min(42vw, 180px); height: min(42vw, 180px); object-fit: contain;
    filter: brightness(0) invert(1); /* logo (hijau tua) jadi putih solid di atas latar hijau gelap */
    animation: splashPop .8s cubic-bezier(.34,1.56,.64,1) both;
}
.app-splash-ring {
    position: absolute; width: min(55vw, 230px); height: min(55vw, 230px);
    border: 1.5px solid rgba(255,255,255,0.18); border-radius: 50%;
    animation: splashRing 1.8s ease-out infinite;
}
@keyframes splashPop {
    0% { transform: scale(.55); opacity: 0; }
    65% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes splashRing {
    0% { transform: scale(.7); opacity: 0; }
    40% { opacity: .6; }
    100% { transform: scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .app-splash-logo, .app-splash-ring { animation: none; }
}
@media (min-width: 768px) {
    .app-splash-logo { width: min(42vw, 360px); height: min(42vw, 360px); }
    .app-splash-ring { width: min(55vw, 460px); height: min(55vw, 460px); }
}

/* ---- Top App Bar ---- */
.appbar {
    background: var(--primary);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: var(--shadow);
    overflow: hidden; /* jaga-jaga keras: apa pun yang terjadi di dalam (mis. .appbar-actions gagal
                         menyusut di kondisi tertentu), TIDAK BOLEH ada konten yang tampil di luar
                         kotak biru ini — daripada latar belakangnya "kepotong" duluan. */
}
.appbar-row {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0; /* penting: biar anak flex boleh menyusut & memicu scroll sendiri, bukan meluber ke body */
}
.appbar .brand { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.appbar .brand span { color: #FFD166; font-weight: 600; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); } /* logo jadi putih solid biar kontras di atas biru */
/* Ikon-ikon di appbar (Shopping/Match/King&Queen/dst) scroll SENDIRI di dalam baris ini
   kalau kepanjangan di HP sempit, supaya TIDAK memaksa seluruh halaman scroll ke samping
   (yang bikin elemen position:fixed seperti .cart-bar ikut kegeser saat halaman di-pan). */
.appbar-actions {
    display: flex; gap: 10px; align-items: center;
    overflow-x: auto; min-width: 0; flex-shrink: 1;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.appbar-actions::-webkit-scrollbar { display: none; }
.appbar-actions > * { flex-shrink: 0; }
.btn-notify, .menu-toggle {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-notify:hover, .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.28); }

/* Dropdown menu appbar: position:fixed & di LUAR .appbar (yang overflow:hidden) supaya tidak terpotong. */
.menu-backdrop { position: fixed; inset: 0; z-index: 38; background: transparent; }
.menu-dropdown {
    position: fixed; top: 60px; right: 12px; z-index: 39;
    min-width: 220px; max-width: calc(100vw - 24px);
    background: #fff; border-radius: 14px; padding: 6px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
    animation: menuDrop .15s ease-out;
}
.menu-dropdown[hidden], .menu-backdrop[hidden] { display: none; }
.menu-dropdown a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    color: var(--gray-900); font-size: 14px; font-weight: 600;
}
.menu-dropdown a span { font-size: 18px; width: 24px; text-align: center; }
.menu-dropdown a:hover { background: var(--gray-100); }
@keyframes menuDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Date scroller ---- */
.date-scroller {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 60px;
    z-index: 20;
    -webkit-overflow-scrolling: touch;
}
.date-chip {
    flex: 0 0 auto;
    width: 62px;
    text-align: center;
    padding: 10px 6px;
    border-radius: var(--radius);
    background: var(--gray-100);
    cursor: pointer;
    border: 2px solid transparent;
}
.date-chip .dow { font-size: 11px; color: var(--gray-600); font-weight: 600; text-transform: uppercase; }
.date-chip .num { font-size: 20px; font-weight: 800; }
.date-chip .mon { font-size: 10px; color: var(--gray-600); }
.date-chip.active { background: var(--primary); color: #fff; border-color: var(--primary-dark); }
.date-chip.active .dow, .date-chip.active .mon { color: #d2e5d8; }

/* ---- Section heading ---- */
.section-title { font-size: 18px; font-weight: 800; margin: 18px 16px 8px; }
.section-sub { font-size: 13px; color: var(--gray-600); margin: 0 16px 12px; }

/* ---- Booking grid ---- */
.grid-wrap { overflow-x: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
table.booking-grid { border-collapse: separate; border-spacing: 6px; width: 100%; min-width: 560px; }
table.booking-grid th { font-size: 12px; color: var(--gray-600); font-weight: 700; padding: 4px; text-align: center; }
table.booking-grid td.hour-label { font-size: 12px; font-weight: 700; color: var(--gray-600); white-space: nowrap; padding-right: 6px; text-align: right; }
table.booking-grid th:first-child, table.booking-grid td.hour-label { position: sticky; left: 0; z-index: 2; background: var(--gray-50); box-shadow: -16px 0 0 var(--gray-50); }
.card table.booking-grid th:first-child, .card table.booking-grid td.hour-label { background: #fff; box-shadow: -16px 0 0 #fff; }

.slot-cell {
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    padding: 6px 4px;
    min-width: 84px;
    text-align: center;
    cursor: pointer;
    transition: transform .08s ease;
}
.slot-cell:active { transform: scale(0.97); }
.slot-cell .price { display: block; font-size: 11.5px; font-weight: 700; color: var(--gray-900); }
.slot-cell .vip-badge {
    display: inline-block; font-size: 9px; font-weight: 800; color: #fff;
    background: var(--accent); border-radius: 5px; padding: 1px 5px; margin-top: 3px;
}
.slot-cell.status-available:hover { border-color: var(--primary); }
/* "locked" = booking pending/belum bayar — masih bisa hangus otomatis (BOOKING_LOCK_MINUTES)
   kalau tidak dilanjutkan, jadi slotnya BUKAN final. "booked" = sudah paid/confirmed, final. */
.slot-cell.status-locked {
    background: #FFF7E0; border-color: #F5C542; color: #92730A; cursor: not-allowed;
}
.slot-cell.status-locked .price { color: #92730A; }
.slot-cell.status-booked {
    background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-400); cursor: not-allowed;
}
.slot-cell.status-booked .price { color: var(--gray-400); }
.slot-cell.status-closed {
    background: repeating-linear-gradient(45deg, #fde2e2, #fde2e2 6px, #fbcaca 6px, #fbcaca 12px);
    border-color: #f3b4b4; color: #a33; cursor: not-allowed;
}
.slot-cell.status-in_cart { background: #E6F0EA; border-color: var(--primary); }
.slot-cell.status-in_cart:hover { border-color: var(--red); background: #FFE9E9; }
.slot-cell .status-tag { display: block; font-size: 10px; margin-top: 2px; font-weight: 700; }

/* ---- Legend ---- */
.legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 8px; font-size: 12px; color: var(--gray-600); }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

/* ---- Sticky cart bar ---- */
.cart-bar {
    position: fixed; left: 0; right: 0; bottom: 0; background: #fff;
    border-top: 1px solid var(--gray-200); box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
    padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; z-index: 40;
    max-width: 1100px; margin: 0 auto; /* full-bleed di HP, tercenter & tidak melebar di laptop */
}
.cart-bar .info { font-size: 13px; color: var(--gray-600); }
.cart-bar .total { font-size: 18px; font-weight: 800; color: var(--gray-900); }
.btn {
    display: inline-block; border: none; border-radius: 10px; padding: 12px 20px;
    font-weight: 700; font-size: 15px; cursor: pointer;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:disabled { background: var(--gray-400); cursor: not-allowed; }
.btn-outline { background: #fff; border: 1.5px solid var(--gray-200); color: var(--gray-900); }
.btn-danger { background: var(--red); color: #fff; }
.btn-google {
    background: #fff; border: 1.5px solid var(--gray-200); color: var(--gray-900);
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-google img { width: 18px; height: 18px; }
.divider-or { display: flex; align-items: center; gap: 10px; color: var(--gray-400); font-size: 12px; margin: 14px 0; }
.divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

/* ---- Cards ---- */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin: 12px 16px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.cart-item:last-child { border-bottom: none; }
.cart-item .meta strong { display: block; font-size: 14.5px; }
.cart-item .meta span { font-size: 12.5px; color: var(--gray-600); }
.cart-item .price { font-weight: 800; }

/* ---- Forms ---- */
label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 6px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
    width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--gray-200);
    font-size: 15px; background: #fff;
}
.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 1; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge-pending { background: #FEF3C7; color: #92400E; }
.badge-paid { background: #DCFCE7; color: #166534; }
.badge-confirmed { background: #DCFCE7; color: #166534; }
.badge-expired, .badge-cancelled { background: #FEE2E2; color: #991B1B; }

.alert { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin: 12px 16px; }
.alert-success { background: #DCFCE7; color: #166534; }
.alert-error { background: #FEE2E2; color: #991B1B; }
.alert-info { background: #DBEAFE; color: #1E3A8A; }

.countdown { font-weight: 800; color: var(--red); }

.empty-state { text-align: center; color: var(--gray-400); padding: 40px 16px; }

/* ---- E-ticket ---- */
.eticket { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: 18px; padding: 22px; margin: 16px; text-align: center; }
.eticket .qr-box { background: #fff; border-radius: 12px; padding: 14px; display: inline-block; margin: 14px 0; }
.eticket .code { font-size: 22px; font-weight: 900; letter-spacing: 2px; }

/* ---- Admin layout ---- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 230px; background: var(--gray-900); color: #fff; padding: 18px 0; flex-shrink: 0; }
.admin-sidebar .brand { display: flex; align-items: center; gap: 8px; padding: 0 18px 18px; font-weight: 800; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; }
.admin-sidebar a { display: block; padding: 11px 18px; color: #cbd5e1; font-size: 14px; font-weight: 600; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.08); color: #fff; border-right: 3px solid var(--accent); }
.admin-sidebar .role-tag { padding: 0 18px; font-size: 11px; color: var(--gray-400); margin-top: 6px; }
.admin-main { flex: 1; padding: 24px 28px; max-width: 1300px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.admin-topbar h1 { font-size: 22px; margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.stat-card .label { font-size: 12.5px; color: var(--gray-600); font-weight: 600; }
.stat-card .value { font-size: 24px; font-weight: 800; margin-top: 4px; }

table.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; }
table.data-table th, table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); text-align: left; font-size: 13.5px; }
table.data-table th { background: var(--gray-100); font-weight: 700; color: var(--gray-600); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; background: #fff; padding: 12px; border-radius: var(--radius); box-shadow: var(--shadow); }
.filter-bar select, .filter-bar input { width: auto; padding: 8px 10px; font-size: 13px; }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gray-900); }
.login-card { background: #fff; border-radius: 16px; padding: 32px; width: 100%; max-width: 380px; }
.login-card h1 { font-size: 20px; margin-bottom: 4px; }
.login-card p { color: var(--gray-600); font-size: 13.5px; margin-top: 0; }

@media (max-width: 860px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; display: flex; overflow-x: auto; padding: 10px; }
    .admin-sidebar .brand, .admin-sidebar .role-tag { display: none; }
    .admin-sidebar a { padding: 8px 14px; white-space: nowrap; }
    .admin-main { padding: 16px; }
}