/* ==========================================================================
   responsive.css - 响应式断点适配
   断点：
     - > 1024px：完整侧边栏（默认）
     - ≤ 1024px：侧边栏折叠为图标条
     - ≤ 640px：单列堆叠 + 底部 Tab 导航
   ========================================================================== */

/* --------------------------------------------------------------------------
   平板：≤ 1024px，侧边栏折叠为图标条
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .sidebar {
        width: 64px;
        padding: var(--gap) 8px;
    }

    .sidebar__link {
        justify-content: center;
        padding: 12px 0;
    }

    .sidebar__link span {
        display: none;
    }

    /* 悬浮时展开文字提示 */
    .sidebar__link::after {
        content: attr(data-title);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--c-surface-2);
        color: var(--c-text);
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--c-border);
        font-size: 0.85rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-fast);
        z-index: 200;
    }

    .sidebar__link:hover::after {
        opacity: 1;
    }

    .sidebar__footer {
        font-size: 0;
        text-align: center;
    }

    .sidebar__footer::before {
        content: "●";
        font-size: 0.6rem;
        color: var(--c-success);
    }

    .main {
        padding: var(--gap);
    }
}

/* --------------------------------------------------------------------------
   手机：≤ 640px，单列堆叠 + 底部 Tab 导航
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root {
        --topbar-h: 54px;
    }

    /* 隐藏左侧侧边栏，改用底部 Tab */
    .sidebar {
        display: none;
    }

    .app-body {
        display: block;
    }

    .main {
        padding: var(--gap);
        padding-bottom: 80px; /* 给底部 Tab 留出空间 */
    }

    /* 底部 Tab 导航 */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: rgba(26, 32, 48, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid var(--c-border);
        padding: 6px 0;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 4px;
        background: none;
        border: none;
        color: var(--c-text-muted);
        font-size: 0.7rem;
        transition: color var(--t-fast);
    }

    .bottom-nav__item svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav__item.is-active {
        color: var(--c-primary);
        font-weight: 600;
    }

    .bottom-nav__item:hover {
        color: var(--c-text);
    }

    /* 顶栏调整 */
    .topbar {
        padding: 0 var(--gap);
    }

    .topbar__brand span {
        display: none;
    }

    .topbar__username .role-badge {
        display: none;
    }

    .topbar__username {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 页面标题 */
    .page-title {
        font-size: 1.2rem;
    }

    .page-header {
        margin-bottom: var(--gap);
    }

    /* 卡片内边距缩小 */
    .card,
    .card__header,
    .card__body,
    .card__footer {
        padding-left: var(--gap);
        padding-right: var(--gap);
    }

    .modal {
        max-width: calc(100vw - 24px);
    }

    .modal__body {
        padding: var(--gap);
    }

    /* 表格更紧凑 */
    .table th,
    .table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }

    /* 筛选区单列 */
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .filter-bar__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar__actions .btn {
        width: 100%;
    }

    /* Tab 居中 */
    .tabs {
        width: 100%;
        justify-content: center;
    }

    .tabs--lg {
        width: 100%;
    }

    .tabs--lg .tabs__item {
        flex: 1;
    }

    /* 网格变单列 */
    .grid--2 {
        grid-template-columns: 1fr;
    }

    /* 结果操作按钮全宽堆叠 */
    .result-actions {
        flex-direction: column;
    }

    .result-actions .btn {
        width: 100%;
    }

    /* 登录卡片 */
    .auth-card {
        padding: var(--gap);
    }

    /* 分页 */
    .pagination__info {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-bottom: 6px;
    }

    .pagination {
        gap: 4px;
    }

    .pagination__page,
    .pagination__btn {
        min-width: 32px;
        height: 32px;
    }
}

/* --------------------------------------------------------------------------
   桌面默认：底部 Tab 隐藏（仅手机显示）
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
    .bottom-nav {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   极小屏：≤ 380px
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    body {
        font-size: 15px;
    }

    .topbar__username {
        display: none;
    }

    .btn--lg {
        padding: 10px 16px;
        font-size: 0.95rem;
    }
}

/* --------------------------------------------------------------------------
   打印
   -------------------------------------------------------------------------- */
@media print {
    .topbar,
    .sidebar,
    .bottom-nav,
    .toast-container,
    .modal-mask,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* --------------------------------------------------------------------------
   动画偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}