/**
 * 统一 App 布局系统
 * 移动：全宽沉浸式 + 底部 Tab / 固定底栏
 * 桌面：1280px 页面壳 + 1200px 内容区
 */

/* ========== 布局壳（宽度由 style.css .page-shell 统一） ========== */

.home-shell,
.order-shell,
.oc-page,
.pay-page,
.cinema-page,
.schedule-page,
.seat-page,
.order-list-page,
.user-page,
.auth-page,
.dispute-apply-page,
.dispute-chat-page,
.app-shell {
    display: flex;
    flex-direction: column;
}

.oc-page,
.pay-page,
.cinema-page,
.schedule-page,
.seat-page,
.order-list-page,
.user-page,
.auth-page,
.dispute-apply-page,
.dispute-chat-page {
    background: transparent;
}

body.home-layout,
body.cinema-layout,
body.schedule-layout,
body.seat-layout,
body.order-layout,
body.order-detail-layout,
body.order-confirm-layout,
body.pay-layout,
body.user-layout,
body.auth-layout,
body.app-layout,
body.dispute-apply-layout,
body.dispute-chat-layout {
    background: var(--color-bg);
}

body.order-detail-layout .site-main-order-detail,
body.order-confirm-layout .site-main-order-confirm,
body.pay-layout .site-main-pay {
    padding: 0;
    min-height: 100vh;
}

body.home-layout .site-main-home,
body.cinema-layout .site-main-cinema,
body.schedule-layout .site-main-schedule,
body.seat-layout .site-main-seat,
body.order-layout .site-main-order,
body.order-detail-layout .site-main-order-detail,
body.order-confirm-layout .site-main-order-confirm,
body.pay-layout .site-main-pay,
body.user-layout .site-main-app,
body.auth-layout .site-main-auth,
body.app-layout .site-main-app,
body.dispute-apply-layout .site-main-dispute-apply,
body.dispute-chat-layout .site-main-dispute-chat,
body.cs-layout .site-main-cs {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}

body.portal-layout.cs-layout .site-main-cs {
    min-height: 0 !important;
    overflow: hidden;
}

body.home-layout .site-main-home {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
}

body.order-layout.has-tabbar .site-main-order {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
}

body.order-detail-layout.has-tabbar .site-main-order-detail {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
}

body.user-layout.has-tabbar .site-main-app {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
}

body.app-layout.has-tabbar .site-main-app {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
}

/* ========== 桌面顶栏导航 ========== */

.flow-desktop-bar,
.home-desktop-bar,
.order-desktop-bar,
.oc-desktop-bar {
    display: none;
}

.flow-desktop-logo,
.home-desktop-logo,
.oc-desktop-logo,
.order-desktop-logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.flow-desktop-logo:hover,
.home-desktop-logo:hover,
.oc-desktop-logo:hover,
.order-desktop-logo:hover {
    text-decoration: none;
    color: var(--color-primary);
}

.flow-desktop-nav,
.home-desktop-nav,
.oc-desktop-nav,
.order-desktop-nav {
    display: flex;
    gap: var(--space-lg);
}

.flow-desktop-nav a,
.home-desktop-nav a,
.oc-desktop-nav a,
.order-desktop-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: color var(--transition-fast);
}

.flow-desktop-nav a.active,
.flow-desktop-nav a:hover,
.home-desktop-nav a.active,
.home-desktop-nav a:hover,
.oc-desktop-nav a.active,
.oc-desktop-nav a:hover,
.order-desktop-nav a.active,
.order-desktop-nav a:hover {
    color: var(--color-primary);
}

/* ========== 通用顶栏（返回 + 标题） ========== */

.order-topbar,
.oc-topbar,
.schedule-topbar,
.seat-topbar,
.pay-topbar,
.app-topbar {
    display: none;
}

.order-topbar,
.oc-topbar,
.schedule-topbar,
.seat-topbar {
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--space-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    flex-shrink: 0;
}

.seat-topbar {
    justify-content: flex-start;
    padding: 10px 12px;
}

.order-back,
.oc-back,
.schedule-back,
.seat-back,
.cinema-back {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: var(--color-text);
    text-decoration: none;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.order-back:hover,
.oc-back:hover,
.schedule-back:hover,
.seat-back:hover,
.cinema-back:hover {
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg);
}

.order-topbar-title,
.oc-topbar-title,
.schedule-topbar-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
}

.order-topbar-spacer,
.oc-topbar-spacer,
.schedule-topbar-spacer,
.seat-topbar-spacer {
    width: 32px;
    flex-shrink: 0;
}

/* ========== 通用内容卡片 ========== */

.flow-card,
.app-card {
    margin: var(--space-sm) var(--space-md) 0;
    padding: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.flow-section-title,
.app-section-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
}

/* ========== 移动端底部 Tab（纯文字） ========== */

.mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: var(--shell-max);
    margin: 0 auto;
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
    padding: 0 0 env(safe-area-inset-bottom, 0);
    background: #fff;
    border-top: 1px solid #eef0f3;
    display: flex;
    align-items: stretch;
    z-index: var(--z-fixed);
    box-sizing: border-box;
    box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.04);
}

.mobile-tabbar-item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #9ca3af;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, font-weight 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tabbar-item.active {
    color: var(--color-primary);
    font-weight: 600;
}

.mobile-tabbar-item.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: var(--color-primary);
}

.mobile-tabbar-item:hover,
.mobile-tabbar-item:focus-visible {
    text-decoration: none;
    color: var(--color-primary);
}

/* ========== 固定底栏 ========== */

.od-footer,
.oc-footer,
.seat-footer {
    z-index: var(--z-fixed);
}

@media (max-width: 767px) {
    body.home-layout .site-main-home,
    body.order-layout.has-tabbar .site-main-order,
    body.order-detail-layout.has-tabbar .site-main-order-detail,
    body.user-layout.has-tabbar .site-main-app,
    body.app-layout.has-tabbar .site-main-app {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mobile-tabbar {
        display: none !important;
    }
}

/* ========== 桌面适配 ========== */

@media (min-width: 768px) {
    body.home-layout,
    body.cinema-layout,
    body.schedule-layout,
    body.seat-layout,
    body.order-layout,
    body.order-detail-layout,
    body.dispute-apply-layout,
    body.dispute-chat-layout,
    body.user-layout,
    body.auth-layout,
    body.app-layout {
        background: var(--bg);
    }

    body.order-confirm-layout,
    body.pay-layout,
    body.dispute-apply-layout,
    body.dispute-chat-layout {
        background: var(--bg);
    }

    body.home-layout .site-main-home,
    body.cinema-layout .site-main-cinema,
    body.schedule-layout .site-main-schedule,
    body.seat-layout .site-main-seat,
    body.order-layout .site-main-order,
    body.order-detail-layout .site-main-order-detail,
    body.order-confirm-layout .site-main-order-confirm,
    body.pay-layout .site-main-pay,
    body.dispute-apply-layout .site-main-dispute-apply,
    body.dispute-chat-layout .site-main-dispute-chat,
    body.user-layout .site-main-app,
    body.auth-layout .site-main-auth,
    body.app-layout .site-main-app {
        padding: var(--space-md) 0 var(--space-lg);
    }

    body.portal-layout.home-layout .site-main-home,
    body.portal-layout.cinema-layout .site-main-cinema,
    body.portal-layout.schedule-layout .site-main-schedule,
    body.portal-layout.seat-layout .site-main-seat,
    body.portal-layout.order-layout .site-main-order,
    body.portal-layout.order-detail-layout .site-main-order-detail,
    body.portal-layout.order-confirm-layout .site-main-order-confirm,
    body.portal-layout.pay-layout .site-main-pay,
    body.portal-layout.dispute-apply-layout .site-main-dispute-apply,
    body.portal-layout.dispute-chat-layout .site-main-dispute-chat,
    body.portal-layout.user-layout .site-main-app,
    body.portal-layout.auth-layout .site-main-auth,
    body.portal-layout.app-layout .site-main-app {
        padding: 0;
    }

    body.home-layout .site-main-home,
    body.order-layout.has-tabbar .site-main-order,
    body.order-detail-layout.has-tabbar .site-main-order-detail,
    body.user-layout.has-tabbar .site-main-app,
    body.app-layout.has-tabbar .site-main-app {
        padding-bottom: var(--space-lg);
    }

    .flow-desktop-bar,
    .home-desktop-bar,
    .order-desktop-bar,
    .oc-desktop-bar,
    .pay-desktop-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px var(--space-lg);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border-light);
        flex-shrink: 0;
    }

    .order-topbar,
    .schedule-topbar,
    .seat-topbar,
    .app-topbar {
        display: flex;
    }

    .mobile-tabbar {
        display: none !important;
    }

    /* 桌面：内容区内边距略增 */
    .flow-card,
    .app-card {
        margin-left: var(--space-lg);
        margin-right: var(--space-lg);
    }

    /* 桌面：经典页 container 居中卡片 */
    body:not(.home-layout):not(.cinema-layout):not(.schedule-layout):not(.seat-layout):not(.order-layout):not(.order-detail-layout):not(.order-confirm-layout):not(.pay-layout):not(.dispute-apply-layout):not(.user-layout):not(.auth-layout):not(.app-layout) .site-main {
        padding: var(--space-xl) 0;
    }
}