/* ============================================================
 * Tablet Responsive CSS - 众泰云 Design System
 * 平板断点适配（768px - 1023px 竖屏 / 1024px - 1279px 横屏）
 *
 * 依赖：variables.css, base.css, components.css, layout.css
 * PHP 7.4 兼容，纯 CSS，无嵌套语法
 *
 * Breakpoints:
 *   768px - 1023px : 平板竖屏（iPad mini / iPad 竖屏）
 *   1024px - 1279px: 平板横屏（iPad Pro 横屏 / 小屏笔记本）
 *
 * 与现有断点的关系：
 *   - 375px: 小屏手机
 *   - 480px: 大屏手机
 *   - 768px: 平板竖屏起点（本文件）
 *   - 1024px: 平板横屏/桌面起点（本文件）
 *   - 1280px: 标准桌面
 * ============================================================ */

/* ================================================================
   1. 平板竖屏 (768px - 1023px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* ── 全局基础调整 ────────────────────────────────────── */
    html {
        font-size: 15px;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* ── 容器宽度 ────────────────────────────────────────── */
    .container,
    .page-container,
    .tiance-container,
    .content-wrapper,
    [class*="container"]:not([class*="table"]):not([class*="card"]) {
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 100% !important;
    }

    /* ── 侧边栏调整 ──────────────────────────────────────── */
    .sidebar,
    .app-sidebar,
    .layout-sidebar,
    .tiance-sidebar {
        width: 200px;
    }

    .main-content,
    .layout-main,
    .content-area,
    .tiance-main,
    .tiance-main-gray {
        margin-left: 200px;
        padding: 20px;
    }

    /* ── 网格布局：从桌面多列变为2-3列自适应 ─────────────── */
    /* 4列 → 2列 */
    .grid-4,
    [class*="grid-cols-4"],
    .services-grid,
    .features-grid,
    .tiance-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    /* 3列 → 2列 */
    .grid-3,
    [class*="grid-cols-3"],
    .partners-grid,
    .stats-grid,
    .tiance-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    /* 通用网格自适应 */
    .grid,
    .tiance-grid,
    [class*="grid"]:not([class*="grid-cols"]):not(.grid-2):not(.grid-3):not(.grid-4) {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* auto-fill 网格调整最小宽度 */
    [style*="grid-template-columns: repeat(auto-fill"] {
        /* 由各组件自行处理，这里提供通用类 */
    }

    /* ── 卡片间距与内边距 ────────────────────────────────── */
    .card,
    [class*="card"]:not(.mobile-card):not(.ai-msg):not(.chat-msg) {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    .tiance-card {
        padding: 16px;
    }

    /* ── 字体大小微调 ────────────────────────────────────── */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }
    h6 { font-size: 0.9rem !important; }

    .text-xl { font-size: 1.25rem !important; }
    .text-2xl { font-size: 1.5rem !important; }
    .text-3xl { font-size: 1.75rem !important; }

    /* ── 表格：横向滚动 ──────────────────────────────────── */
    .data-table-wrapper,
    .table-responsive,
    .table-wrapper,
    [class*="table-container"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .data-table,
    .table-responsive table,
    .table-wrapper table {
        min-width: 640px;
    }

    .data-table th,
    .data-table td,
    .table-responsive th,
    .table-responsive td {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    /* ── 导航栏 ──────────────────────────────────────────── */
    .topnav__inner,
    .nav-inner {
        padding: 0 24px !important;
        gap: 16px !important;
    }

    /* 隐藏部分桌面导航，保留核心功能 */
    .desktop-nav .nav-link:nth-child(n+5),
    .topnav-links a:nth-child(n+5) {
        display: none;
    }

    /* ── 按钮组 ──────────────────────────────────────────── */
    .btn-group {
        gap: 8px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .btn-sm {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .btn-lg {
        padding: 10px 20px;
        font-size: 1rem;
    }

    /* ── 表单 ────────────────────────────────────────────── */
    .form-row,
    .form-group-row {
        gap: 16px !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    /* ── 侧边栏导航 ──────────────────────────────────────── */
    .sidebar-link,
    .tiance-nav-link {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .sidebar-section-title,
    .tiance-section-header {
        padding: 0 16px 12px;
        font-size: 0.8rem;
    }

    /* ── 仪表盘统计卡片 ──────────────────────────────────── */
    .stat-card,
    .stats-grid .card {
        padding: 16px;
    }

    .stat-card-value,
    .bus-m-big-number,
    .adm-m-big-number {
        font-size: 1.75rem;
    }

    .stat-card-label {
        font-size: 0.8rem;
    }

    /* ── 空状态 ──────────────────────────────────────────── */
    .empty-state,
    .tiance-empty-center,
    .tiance-empty-large {
        padding: 48px 24px;
    }

    .empty-state__icon,
    .empty-state svg,
    .empty-state img {
        width: 56px;
        height: 56px;
    }

    /* ── 模态框 ──────────────────────────────────────────── */
    .modal-content,
    .dialog-content {
        max-width: 85vw;
        max-height: 85vh;
    }

    /* ── 分页 ────────────────────────────────────────────── */
    .pagination,
    .pager,
    .dev-list-pagination {
        gap: 6px;
    }

    .pagination a,
    .pagination span,
    .pager a,
    .pager span {
        min-width: 36px;
        min-height: 36px;
        font-size: 0.85rem;
    }

    /* ── Tab 导航 ────────────────────────────────────────── */
    .tabs,
    .tab-nav {
        gap: 0;
    }

    .tab-item,
    .tab-link,
    .tabs a {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    /* ── Badge / 标签 ───────────────────────────────────── */
    .badge {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }

    .badge-lg {
        font-size: 0.8rem !important;
        padding: 4px 10px !important;
    }

    /* ── 下拉菜单 ────────────────────────────────────────── */
    .dropdown__menu,
    .dropdown-menu {
        min-width: 180px;
    }

    .dropdown__item,
    .dropdown-menu a {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    /* ── 对话页面 ────────────────────────────────────────── */
    #ai-chat-header,
    .chat-header {
        padding: 12px 20px;
        min-height: 56px;
    }

    #ai-chat-body,
    .chat-body,
    .chat-messages {
        padding: 20px;
    }

    .ai-msg,
    .chat-msg,
    .message {
        max-width: 85%;
    }

    #ai-chat-input-area,
    .chat-input-area {
        padding: 12px 20px;
    }

    /* ── AI 侧边栏宽度 ───────────────────────────────────── */
    #ai-sidebar,
    .chat-sidebar,
    .ai-sidebar {
        width: 240px;
    }

    /* ── 欢迎屏幕 ────────────────────────────────────────── */
    #ai-welcome,
    .chat-welcome {
        padding: 40px 24px;
    }

    .ai-welcome-title,
    .chat-welcome__title {
        font-size: 1.5rem !important;
    }

    .ai-welcome-prompts,
    .chat-welcome__prompts {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* ── 页脚 ────────────────────────────────────────────── */
    footer,
    .footer,
    .site-footer {
        padding: 40px 24px !important;
    }

    footer .grid,
    .site-footer .grid,
    .footer__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    /* ── 区块间距 ────────────────────────────────────────── */
    .section,
    [class*="section"] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .hero,
    [class*="hero"] {
        padding-top: 64px !important;
        padding-bottom: 48px !important;
    }

    /* ── 开发者列表页适配 ────────────────────────────────── */
    .dev-list-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    .dev-list-card {
        padding: 20px;
    }

    .dev-list-card-avatar img,
    .dev-list-card-avatar-placeholder {
        width: 60px;
        height: 60px;
        font-size: 1.5em;
    }

    /* ── 订单列表适配 ────────────────────────────────────── */
    .pc-layout {
        display: flex;
    }

    .pc-layout .sidebar {
        width: 180px;
        flex-shrink: 0;
    }

    .pc-layout .page-container {
        flex: 1;
        padding: 20px;
    }

    /* ── 卖家后台适配 ────────────────────────────────────── */
    .page-header {
        margin-bottom: 16px;
    }

    .page-title {
        font-size: 1.5rem !important;
    }

    /* ── 工具类覆盖 ──────────────────────────────────────── */
    .tiance-p-space8 { padding: 20px; }
    .tiance-mb-space8 { margin-bottom: 20px; }
    .tiance-mb-space6 { margin-bottom: 16px; }

    /* ── 开发者工具条 ────────────────────────────────────── */
    .dev-list-toolbar {
        flex-direction: row;
        align-items: center;
    }

    .dev-list-search {
        min-width: 200px;
    }

    /* ── 仪表盘 KPI 卡片 ────────────────────────────────── */
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ================================================================
   2. 平板横屏 (1024px - 1279px)
   接近桌面，但空间仍有限，需要适度调整
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* ── 全局基础 ────────────────────────────────────────── */
    html {
        font-size: 15.5px;
    }

    /* ── 容器宽度 ────────────────────────────────────────── */
    .container,
    .page-container,
    .tiance-container,
    .content-wrapper {
        padding-left: 32px !important;
        padding-right: 32px !important;
        max-width: 100% !important;
    }

    /* ── 侧边栏调整 ──────────────────────────────────────── */
    .sidebar,
    .app-sidebar,
    .layout-sidebar,
    .tiance-sidebar {
        width: 220px;
    }

    .main-content,
    .layout-main,
    .content-area,
    .tiance-main,
    .tiance-main-gray {
        margin-left: 220px;
        padding: 24px;
    }

    /* ── 网格布局：4列→3列，3列保持 ─────────────────────── */
    .grid-4,
    [class*="grid-cols-4"],
    .services-grid,
    .features-grid,
    .tiance-grid-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }

    .grid-3,
    [class*="grid-cols-3"],
    .tiance-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }

    /* ── 卡片 ────────────────────────────────────────────── */
    .card,
    [class*="card"]:not(.mobile-card):not(.ai-msg):not(.chat-msg) {
        padding: 20px;
    }

    .tiance-card {
        padding: 20px;
    }

    /* ── 字体大小 ────────────────────────────────────────── */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.35rem !important; }

    /* ── 表格 ────────────────────────────────────────────── */
    .data-table th,
    .data-table td {
        padding: 12px 16px;
    }

    /* ── 开发者列表 ──────────────────────────────────────── */
    .dev-list-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }

    /* ── 对话页面 ────────────────────────────────────────── */
    #ai-chat-body,
    .chat-body,
    .chat-messages {
        padding: 24px;
    }

    .ai-msg,
    .chat-msg,
    .message {
        max-width: 80%;
    }

    /* ── 页脚 ────────────────────────────────────────────── */
    footer .grid,
    .site-footer .grid,
    .footer__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ── 仪表盘统计卡片 ──────────────────────────────────── */
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .stat-card-value {
        font-size: 2rem;
    }

    /* ── 欢迎屏幕提示卡 ──────────────────────────────────── */
    .ai-welcome-prompts,
    .chat-welcome__prompts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================
   3. 平板通用：侧边栏折叠/展开交互 (1024px 以下)
   ================================================================ */
@media (max-width: 1023px) {
    /* 平板模式下支持侧边栏折叠切换 */
    .tablet-sidebar-collapsed .sidebar,
    .tablet-sidebar-collapsed .app-sidebar,
    .tablet-sidebar-collapsed .layout-sidebar,
    .tablet-sidebar-collapsed .tiance-sidebar {
        width: 64px;
        overflow: hidden;
    }

    .tablet-sidebar-collapsed .sidebar-link span,
    .tablet-sidebar-collapsed .tiance-nav-link span,
    .tablet-sidebar-collapsed .sidebar-section-title,
    .tablet-sidebar-collapsed .tiance-section-header {
        display: none;
    }

    .tablet-sidebar-collapsed .sidebar-link,
    .tablet-sidebar-collapsed .tiance-nav-link {
        justify-content: center;
        padding: 12px;
    }

    .tablet-sidebar-collapsed .sidebar-link svg,
    .tablet-sidebar-collapsed .tiance-nav-link svg {
        margin-right: 0;
    }

    .tablet-sidebar-collapsed .main-content,
    .tablet-sidebar-collapsed .layout-main,
    .tablet-sidebar-collapsed .content-area,
    .tablet-sidebar-collapsed .tiance-main,
    .tablet-sidebar-collapsed .tiance-main-gray {
        margin-left: 64px;
    }

    /* 平板侧边栏切换按钮 */
    .tablet-sidebar-toggle {
        display: none;
    }

    /* 显示切换按钮 */
    .tablet-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: var(--bg-surface);
        border-radius: var(--radius-md);
        cursor: pointer;
        color: var(--text-secondary);
        transition: background-color var(--transition-fast);
    }

    .tablet-sidebar-toggle:hover {
        background-color: var(--bg-surface-alt);
    }
}

/* ================================================================
   4. 平板横屏以上：隐藏平板专用控件
   ================================================================ */
@media (min-width: 1280px) {
    .tablet-sidebar-toggle {
        display: none !important;
    }
}

/* ================================================================
   5. 平板暗色模式增强
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            /* 暗色模式平板特定调整（如有需要） */
        }
    }

    [data-theme="dark"] {
        /* 暗色模式平板特定调整 */
    }
}

/* ================================================================
   6. 无障碍：平板触控优化
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) and (hover: none) and (pointer: coarse) {
    /* iPad 等触屏平板，增大触控目标 */
    a,
    button,
    [role="button"],
    .btn,
    [class*="btn"],
    .tab-item,
    .nav-item {
        min-height: 44px;
        min-width: 44px;
    }

    /* 移除悬停效果 */
    :hover {
        transition: none;
    }

    /* 点击反馈 */
    .btn:active,
    a:active,
    button:active {
        opacity: 0.7;
        transition: opacity var(--duration-fast);
    }
}

/* ================================================================
   7. 平板减少动画偏好
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ================================================================
   8. 平板断点布局类名（供模板使用）
   ================================================================ */

/* 平板竖屏显示 */
.tablet-only {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-only {
        display: block;
    }

    .tablet-only--flex {
        display: flex;
    }

    .tablet-only--inline {
        display: inline;
    }

    .tablet-only--inline-flex {
        display: inline-flex;
    }

    /* 平板隐藏 */
    .hidden-tablet {
        display: none !important;
    }

    .hidden-tablet--flex {
        display: none !important;
    }
}

/* 平板横屏显示 */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tablet-landscape-only {
        display: block;
    }

    .hidden-tablet-landscape {
        display: none !important;
    }
}

/* 平板及以下隐藏 */
@media (max-width: 1023px) {
    .hidden-tablet-down {
        display: none !important;
    }
}

/* 平板及以上显示 */
@media (min-width: 768px) {
    .tablet-up--flex {
        display: flex;
    }

    .tablet-up--block {
        display: block;
    }

    .hidden-tablet-up {
        display: none !important;
    }
}