/* ═══════════════════════════════════════════════════════════
   responsive.css — 移动端唯一权威层
   ═══════════════════════════════════════════════════════════
   设计约定（详见 AGENTS.md / CLAUDE.md「移动端适配约定」）：
   - 桌面优先：桌面样式在 style.css；本文件只在 ≤768px / ≤480px 断点内覆盖
   - 桌面零回归：本文件全部规则都包在 @media 内，桌面端不受任何影响
   - 可拓展：未来新页面沿用既有组件类（.table-financial 等）即自动继承，
     无需逐个适配；移动端规则一律写在这里，不散落进 style.css
   - 表格三层机制：已包 .table-responsive → 横向滚动 + 首列冻结；
     未包 wrapper 的表 → body 级横向滚动兜底（任何列不被裁断）
   ═══════════════════════════════════════════════════════════ */

/* ── 编辑重页移动端提示条（_responsive.html mobile_edit_notice 宏） ──
   默认隐藏；仅移动端显示，引导重编辑页用户回电脑操作 */
.mobile-edit-notice {
    display: none;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: rgba(217, 119, 6, 0.10);
    border: 1px solid rgba(217, 119, 6, 0.30);
    color: var(--color-warning);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* ── 触屏基础：可读性 + 兼容网 ─────────────────────────── */
@media (max-width: 768px) {
    :root {
        /* 触屏可读性（苹果 Clarity）：正文 15px / 表格·标签 13px / 次标签 12px */
        --text-base: 0.9375rem;
        --text-sm: 0.8125rem;
        --text-xs: 0.75rem;
        --space-xl: 16px;
        --space-2xl: 20px;
    }
    html {
        -webkit-text-size-adjust: 100%;
    }
    body {
        /* 兼容网：未包 .table-responsive 的表可整页横向滑动，绝不被裁断 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        line-height: 1.6;
    }
    * {
        -webkit-tap-highlight-color: transparent;
    }
    /* 编辑重页移动端提示条：仅移动端显示 */
    .mobile-edit-notice {
        display: block;
    }
}

/* ── 壳：侧栏 → 覆盖式抽屉 ──────────────────────────────── */
@media (max-width: 768px) {
    /* 桌面 margin-left:var(--sidebar-width) 取消，改为抽屉覆盖在主内容之上 */
    .layout-sidebar .main-content {
        margin-left: 0;
    }

    /* 抽屉：默认收起（translateX(-100%)）；展开由 JS 加 .sidebar--floating 弹出 */
    .layout-sidebar .sidebar {
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .layout-sidebar .sidebar:not(.sidebar--collapsed) {
        transform: translateX(0);
    }
    .layout-sidebar .sidebar--floating {
        transform: translateX(0) !important;
    }

    /* 遮罩：移动端常驻 DOM，.show 控制淡入 + 可点击 */
    .sidebar-overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }
    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* 触控目标放大（Apple 44px 建议） */
    .hamburger {
        width: 40px;
        height: 40px;
    }
    .sidebar .nav-item,
    .sidebar .nav-group-header {
        min-height: 44px;
    }
    .tab-item {
        height: 44px;   /* 苹果 44pt 触控目标 */
    }
    .btn-sm {
        min-height: 44px;
    }
    /* 表格留白加大，缓解手机端「挤」 */
    .table-financial th,
    .table-financial td {
        padding: 8px 10px;
    }
    /* 账单管理顶部 tab：长中文标签单行 + 横向滚动，不逐字竖排 */
    .be-tabs {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* ── 壳：顶栏 + 全局筛选（渐进披露：横排 4 下拉 → 「筛选」按钮 + 滑下面板） ──
   移动端由 base.html JS 把 .gf-filter（4 下拉 + ✕清除）re-parent 进 #gf-filter-sheet
   纵向堆叠；面板 absolute 脱离流，sheet 无 overflow → 不被裁剪（治「被遮」）。
   桌面端保持顶栏横排，一字不改。 */
@media (max-width: 768px) {
    .top-bar {
        /* 刘海屏安全区避让（配合 base.html viewport-fit=cover） */
        padding: env(safe-area-inset-top, 0px) var(--space-sm) 0;
        height: auto;
        min-height: var(--topbar-height);
    }
    /* 「筛选」按钮：紧贴 hamburger，44px 触控高 */
    .gf-sheet-toggle {
        flex: 0 0 auto;
        height: 44px;
        min-width: 64px;
        gap: 6px;
        font-size: var(--text-sm);
        white-space: nowrap;
    }
    .gf-sheet-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--color-accent);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
    }
    /* 滑下面板：absolute 挂在 .top-bar（sticky 定位祖先）下 top:100% 覆盖显示，
       不进文档流 → 关闭即 display:none，零布局跳动；自身无 overflow → 不裁剪
       absolute 的下拉面板（治「被遮」）。显隐由 JS 切 display + .is-open 过渡。 */
    .gf-filter-sheet {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 180ms ease,
                    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-sm) var(--space-md);
    }
    .gf-filter-sheet.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* sheet 内 4 下拉纵向堆叠、全宽、44px 触控 */
    .gf-filter-sheet .gf-filter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
        overflow: visible;
    }
    .gf-filter-sheet .gf-filter-select {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }
    .gf-filter-sheet .gf-filter-select .acct-trigger {
        height: 44px;
        border-radius: 8px;
    }
    .gf-filter-sheet .gf-clear {
        width: 100%;
        height: 44px;
        padding: 0 var(--space-md);
        font-size: var(--text-sm);
        line-height: 1;
        border-radius: 8px;
        opacity: 1;
        justify-content: flex-start;
        gap: 6px;
        background: rgba(37, 87, 214, 0.06);
    }
    .gf-filter-sheet .gf-clear .gf-clear-label {
        display: inline;
    }
    .top-bar-right .btn-sm {
        font-size: var(--text-sm);
        padding: 6px 10px;
    }
    @media (prefers-reduced-motion: reduce) {
        .gf-filter-sheet { transition: none; }
    }
}

/* ── 表格：横向滚动 + 首列冻结 ────────────────────────────
   两个滚动容器等效：.table-responsive（报表 wrapper）与
   .data-table-card（账簿/余额表既有卡片，自带 overflow-x:auto） */
@media (max-width: 768px) {
    .table-responsive,
    .data-table-card {
        max-width: 100%;
    }
    /* 表格保持内容宽度（不挤窄），靠外层容器横向滚动；640px 兜底 → 现代浏览器 max-content */
    .table-responsive .table-financial,
    .table-responsive .report-table,
    .table-responsive .table-auto,
    .data-table-card .table-financial {
        min-width: 640px;
        min-width: max-content;
    }
    /* 首列冻结：科目/代码列横向滑动时始终可见 */
    .table-responsive .table-financial th:first-child,
    .table-responsive .table-financial td:first-child,
    .table-responsive .report-table th:first-child,
    .table-responsive .report-table td:first-child,
    .data-table-card .table-financial th:first-child,
    .data-table-card .table-financial td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--color-surface-raised);
        box-shadow: 1px 0 0 var(--color-border);
    }
    /* 表头角格：同时纵向吸顶 + 横向冻结，层级最高 */
    .table-responsive .table-financial thead th:first-child,
    .table-responsive .report-table thead th:first-child,
    .data-table-card .table-financial thead th:first-child {
        z-index: 3;
    }
}

/* ── 查凭证页（voucher/list.html，三栏壳 → 单列） ────────── */
@media (max-width: 768px) {
    .voucher-shell {
        flex-direction: column;
        height: calc(100dvh - var(--topbar-height) - 12px);
        min-height: 0;
    }
    /* 时间轴 → 顶部横向月份条（保留月份跳转能力） */
    .timeline-col {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
        max-height: none;
        height: 44px;
        display: flex;
        align-items: stretch;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
    }
    .timeline-col .tl-toggle,
    .timeline-col + .tl-expand,
    .timeline-col .tl-scroll::before {
        display: none;
    }
    .timeline-col .tl-all {
        margin: 0;
        white-space: nowrap;
        min-height: 44px;
    }
    .timeline-col .tl-scroll {
        display: flex;
        align-items: stretch;
        gap: 2px;
        overflow: visible;
        padding: 0;
    }
    .timeline-col .tl-year-label {
        position: static;
        padding: 0 8px 0 12px;
        line-height: 44px;
        background: none;
    }
    .timeline-col .tl-month-node {
        padding: 0 10px;
        margin: 0;
        min-height: 44px;
        border-radius: 0;
    }
    .timeline-col .tl-month-node .tl-dot {
        position: static;
        transform: none;
        flex-shrink: 0;
    }
    .list-col {
        flex: 1;
        min-width: 0;
    }
    /* 筛选/流程条可横向滑动 */
    .period-flow,
    .filter-bar {
        overflow-x: auto;
    }
    /* 凭证卡片分录行：摘要整行，科目+借贷第二行 */
    .vcard-line {
        grid-template-columns: 1fr 100px 100px;
        gap: 2px 8px;
    }
    .vcard-line .vcl-desc {
        grid-column: 1 / -1;
    }
    .vcard-foot {
        grid-template-columns: 1fr 100px 100px;
        gap: 2px 8px;
    }
    .vcard-foot .vcf-cn {
        grid-column: 1 / -1;
    }
    .vcard-head {
        flex-wrap: wrap;
    }
}

/* ── 仪表盘：网格降列 ───────────────────────────────────── */
@media (max-width: 768px) {
    .dashboard-metrics,
    .dashboard-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-metrics .metric-featured {
        grid-column: span 2;
    }
    .dashboard-bottom {
        grid-template-columns: 1fr;
    }
}

/* ── 小屏（≤480px）：进一步收紧 ─────────────────────────── */
@media (max-width: 480px) {
    .page-content,
    .page-content-wide {
        padding: var(--space-md);
    }
    .top-bar-left {
        gap: 4px;
    }
    .dashboard-metrics,
    .dashboard-actions {
        grid-template-columns: 1fr;
    }
}