/**
 * StadiumConnect — unified app UI (directory.html design system)
 * Loaded on all pages except index.html & home.html
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Directory design tokens (dark default) ── */
html[data-theme="dark"],
html:not([data-theme]) {
    --bg: #0B0F1A;
    --card: #141B2D;
    --card2: #1A2235;
    --border: rgba(168, 85, 247, 0.35);
    --purple: #A855F7;
    --blue: #3B82F6;
    --text: #F8FAFC;
    --muted: #94A3B8;
    --green: #22C55E;
    --max: min(520px, 100vw);
    --sc-nav-h: 78px;
}

html[data-theme="light"] {
    --bg: #F1F5F9;
    --card: #FFFFFF;
    --card2: #F8FAFC;
    --border: rgba(124, 58, 237, 0.22);
    --purple: #7C3AED;
    --blue: #2563EB;
    --text: #0F172A;
    --muted: #64748B;
    --green: #16A34A;
}

/* Map to legacy variable names used across panels */
html {
    --bg-primary: var(--bg);
    --bg-secondary: var(--card);
    --bg-card: var(--card2);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --border-color: rgba(255, 255, 255, 0.10);
    --accent: var(--purple);
    --accent-light: rgba(168, 85, 247, 0.15);
    --primary: var(--purple);
    --primary-dark: #7C3AED;
    --primary-light: #C084FC;
    --primary-glow: rgba(168, 85, 247, 0.4);
    --dark: var(--bg);
    --darker: #060912;
    --light: var(--text);
    --gray: var(--card2);
    --dark-gray: var(--card);
    --sc-grad: linear-gradient(135deg, var(--purple), var(--blue));
}

html[data-theme="light"] {
    --border-color: #E2E8F0;
    --accent-light: rgba(124, 58, 237, 0.12);
}

/* ── Mobile base ── */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
html body,
html body.dark,
html body.light,
html body.light-mode {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    max-width: 100vw;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Page shells — full width on phone, capped on desktop */
.container,
.main-container,
.dashboard-container,
.content,
.page {
    max-width: min(1400px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(14px, env(safe-area-inset-left, 14px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 14px)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.wrap {
    max-width: min(520px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(14px, env(safe-area-inset-left, 14px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 14px)) !important;
}
.auth-container,
.login-wrapper {
    max-width: min(480px, 100%) !important;
}

/* ── Backgrounds: kill orange/navy legacy (inline + ui-overhaul) ── */
html[data-theme="dark"] body,
html[data-theme="light"] body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

body:has(.dash) {
    background:
        radial-gradient(900px 400px at 75% 5%, rgba(168, 85, 247, 0.18) 0%, transparent 55%),
        radial-gradient(700px 360px at 15% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
        var(--bg) !important;
    color: var(--text) !important;
}
html[data-theme="light"] body:has(.dash) {
    background:
        radial-gradient(900px 380px at 70% 8%, rgba(168, 85, 247, 0.10) 0%, transparent 55%),
        radial-gradient(760px 360px at 18% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
        var(--bg) !important;
}

.animated-bg .gradient-1 {
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.12) 0%, transparent 50%) !important;
}
.animated-bg .gradient-2 {
    background: radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.08) 0%, transparent 50%) !important;
}
.particle {
    background: rgba(168, 85, 247, 0.35) !important;
}

/* ── Headers / topbars ── */
.header,
.topbar,
.hero-nav,
.page-header {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="light"] .header,
html[data-theme="light"] .topbar {
    border-color: #E2E8F0 !important;
}

.logo,
.logo-area h2,
.brand span {
    background: var(--sc-grad) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── Cards & panels ── */
.card,
.stat-card,
.info-card,
.panel,
.table-container,
.category-card,
.vendor-card,
.vendor-card-premium,
.booking-card,
.booking-item,
.service-item,
.saved-card,
.faq-item,
.policy-section,
.mv-card,
.content-card,
.booking-detail-item,
.preview-box,
.tabs,
.modal-content,
.sidebar,
.sb-foot,
.sb-user,
.auth-box,
.login-card {
    background: var(--card) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    border-radius: 16px !important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .modal-content {
    border-color: #E2E8F0 !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06) !important;
}

.stat-card { border-bottom: 3px solid var(--purple) !important; }
.stat-number { color: var(--purple) !important; }
.stat-label { color: var(--muted) !important; }

/* Bookings dash glass → directory cards */
.dash .panel,
.dash .stat-card,
.dash .sidebar,
.dash .search,
.dash .icon-btn,
.dash .booking-card,
.dash .sb-foot,
.dash .sb-user {
    background: var(--card) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
}
.dash .sb-link.active {
    background: var(--sc-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.dash .search input,
.dash .panel-filter {
    color: var(--text) !important;
    background: transparent !important;
}
.dash .welcome p,
.dash .stat-hint,
.dash .stat-label,
.dash .booking-meta {
    color: var(--muted) !important;
}

/* ── Buttons ── */
.btn-primary,
.btn-success,
.book,
.book-now-btn,
.search-btn,
.filter-btn,
.cta-btn,
.submit-btn,
.btn-pay-booking,
.logout-btn[style*="accent"],
button.primary,
.nav-fab {
    background: var(--sc-grad) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35) !important;
}
.btn-outline,
.logout-btn {
    border: 1px solid var(--purple) !important;
    color: var(--purple) !important;
    background: transparent !important;
}
html[data-theme="dark"] .logout-btn {
    background: var(--card2) !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.tab.active,
.sb-link.active,
.cat-pill.active,
.nav-pill.active,
.page-nav-pills a.active {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: var(--purple) !important;
    color: var(--text) !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.3) !important;
}

/* ── Forms ── */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background: var(--card2) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
    max-width: 100% !important;
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--purple) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
    outline: none !important;
}
label { color: var(--muted) !important; }

/* ── Tables (admin) ── */
.table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    margin: 0 -2px;
}
table {
    background: var(--card) !important;
    color: var(--text) !important;
}
th {
    background: var(--card2) !important;
    color: var(--muted) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
td {
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
}
html[data-theme="light"] th { background: #F8FAFC !important; }
html[data-theme="light"] td { border-color: #E2E8F0 !important; }

/* Admin light-gray body → directory dark */
body:has(.stats-grid) {
    background: var(--bg) !important;
    color: var(--text) !important;
}
.tabs {
    background: var(--card2) !important;
}
.tab { color: var(--muted) !important; }
.tab.active {
    background: var(--sc-grad) !important;
    color: #fff !important;
}

/* ── Bottom nav ── */
.bottom-nav {
    background: #0E1424 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-theme="light"] .bottom-nav {
    background: var(--card) !important;
    border-top-color: #E2E8F0 !important;
}
.nav-item { color: var(--muted) !important; }
.nav-item.active { color: var(--purple) !important; }
.nav-fab {
    background: var(--sc-grad) !important;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.55) !important;
}

/* ── Icon buttons ── */
.icon-btn,
.theme-toggle,
.sc-theme-toggle,
.hero-btn {
    background: var(--card) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--text) !important;
}
.avatar,
.sb-avatar,
.user-avatar {
    background: var(--sc-grad) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    color: #fff !important;
}

/* ── Modals / sheets ── */
.modal,
.sheet-back,
.loc-sheet-back {
    background: rgba(0, 0, 0, 0.65) !important;
}
.modal-content,
.sheet,
.loc-sheet {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.toast {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* ── Profile / dashboard sections ── */
.profile-header,
.stats-grid-profile,
.payment-card,
.review-card,
.chart-container,
.quick-actions {
    background: var(--card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Vendor detail — layout handled on vendor-detail.html */
body.vendor-detail-page {
    background: var(--bg) !important;
}
body.vendor-detail-page .profile-card {
    background: var(--card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body:not(.vendor-detail-page) .profile-card,
.section-card,
.pkg-card {
    background: var(--card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Content pages */
.content,
.hero-card,
.section {
    max-width: min(720px, 100%);
    margin-left: auto;
    margin-right: auto;
}
.hero-card {
    background: var(--sc-grad) !important;
    color: #fff !important;
}

/* ── Sidebar dashboards mobile ── */
.dash {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 100vh;
}
.dash .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(280px, 88vw) !important;
    transform: translateX(-110%) !important;
    z-index: 3000 !important;
    transition: transform 0.25s ease !important;
}
.dash.sb-open .sidebar {
    transform: translateX(0) !important;
}
.dash .main {
    padding: 14px !important;
    min-width: 0 !important;
}
.dash .topbar {
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.dash .search {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    order: 3;
}
.dash .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}
.dash .booking-card {
    grid-template-columns: 1fr !important;
}
.dash .booking-thumb-wrap {
    width: 100% !important;
    height: 160px !important;
}
.dash .booking-right {
    align-items: flex-start !important;
    text-align: left !important;
}

@media (min-width: 981px) {
    .dash {
        grid-template-columns: 260px 1fr !important;
    }
    .dash .sidebar {
        position: sticky !important;
        transform: none !important;
        width: auto !important;
        inset: auto !important;
    }
    .dash .search {
        flex: 1 1 auto !important;
        order: unset;
        min-width: 200px !important;
    }
    .dash .stats-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .dash .booking-card {
        grid-template-columns: 210px 1fr auto !important;
    }
}

/* Generic dashboard sidebar (profile-style wide layouts) */
@media (max-width: 768px) {
    .header {
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .header-actions,
    .nav-links {
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .nav-links a,
    .logout-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    .container {
        padding-top: 14px !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .stats-grid,
  .stats-row,
    .quick-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .page-header h1 {
        font-size: clamp(20px, 5vw, 28px) !important;
    }
    h1 { font-size: clamp(22px, 5.5vw, 32px) !important; }
    .modal-content {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin: 12px !important;
        padding: 16px !important;
        max-height: 85dvh !important;
        overflow-y: auto !important;
    }
    .table-wrapper {
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
        width: calc(100% + 28px);
    }
    .tabs {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        border-radius: 14px !important;
    }
    .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .stats-grid,
    .stats-row,
    .dash .stats-row {
        grid-template-columns: 1fr !important;
    }
    .header .logo {
        font-size: 18px !important;
    }
    .booking-footer,
    .v-actions {
        justify-content: stretch !important;
    }
    .booking-footer .btn-pay-booking,
    .booking-footer .review-btn {
        flex: 1;
        justify-content: center;
    }
    /* Full-width CTAs only in stacked footers, not all buttons */
    .booking-footer .btn-pay-booking,
    .booking-footer .review-btn,
    .form-panel .btn-login,
    .auth-container .login-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Padding for bottom nav pages */
body:has(.bottom-nav) {
    padding-bottom: calc(var(--sc-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* Login/register — directory mobile card */
.auth-container,
.login-wrapper {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--bg) !important;
}

/* Prevent horizontal scroll from wide children */
.header,
.topbar,
.dash .topbar,
.search-row,
.cat-scroll {
    max-width: 100%;
}
.search-row {
    flex-wrap: nowrap;
}
.search-row .search-box {
    min-width: 0;
    flex: 1;
}

/* Status badges — readable on dark */
.status,
.status-badge,
.badge {
    border-radius: 999px !important;
}

.booking-detail-item {
    background: var(--card2) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.booking-detail-item .bk { color: var(--muted) !important; }
.booking-detail-item .bv { color: var(--text) !important; }
.booking-detail-json {
    background: var(--card2) !important;
    color: var(--text) !important;
}

/* Links */
a:hover { opacity: 0.92; }
.nav-links a {
    color: var(--muted) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.nav-links a:hover,
.nav-links a.active {
    color: var(--purple) !important;
    border-color: var(--purple) !important;
}