/* =============================================================================
 * view-mode.css — 视图模式（自动 / 手机 / PC）
 * =============================================================================
 * 需与以下文件保持一致：
 *   - templates/base.html  <head> 内联防闪烁脚本
 *   - static/js/view-mode.js（window.ViewMode）
 * 关键常量：
 *   - 手机 / PC 分界宽度：991.98px（Bootstrap 4 的 lg 断点）
 *   - PC 上的「手机框」宽度：430px
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * 一、导航栏上的视图切换按钮组
 * 说明：不使用 Bootstrap 的 ml-2 / mr-2 等间距工具类（其 !important 会妨碍
 *       手机模式下的覆盖），间距统一在此控制。
 * --------------------------------------------------------------------------- */
.view-mode-switch {
    margin-left: .5rem;
    white-space: nowrap;
}

.view-mode-switch .view-mode-btn {
    margin-left: .25rem;
}

/* 选中态用 is-active（而非 Bootstrap 的 .active）：.btn-outline-light 的
   hover/focus/active 规则特异性较高，直接复用 .active 会与它们冲突 */
html .view-mode-switch .view-mode-btn.is-active {
    background: #fff;
    border-color: #fff;
    color: #212529;
}

/* ---------------------------------------------------------------------------
 * 二、手机模式下的通用布局
 * 不包在媒体查询里，靠 html.is-mobile 生效，因此宽屏手选「手机」时也能得到
 * 与真机一致的排版。
 * --------------------------------------------------------------------------- */
/* 导航栏紧凑换行 */
html.is-mobile .navbar {
    padding: .35rem .5rem;
}

html.is-mobile .navbar .container-fluid {
    flex-wrap: wrap;
}

html.is-mobile .navbar-brand {
    font-size: 1rem;
    margin-right: .5rem;
}

html.is-mobile .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
}

html.is-mobile .navbar-nav .nav-link {
    padding: .25rem .5rem;
}

/* 切换按钮组独占一行 */
html.is-mobile .view-mode-switch {
    width: 100%;
    margin-left: 0;
    margin-top: .35rem;
}

/* 弹窗不超框（真机窄屏） */
html.is-mobile .modal-dialog {
    max-width: none;
    margin: .75rem;
}

/* 书架卡片单列（book-col 由 bookshelf.html 的书架卡片列提供） */
html.is-mobile .book-col {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * 三、PC 上的「手机框」
 * 仅在宽屏出现：窄屏真机本身够窄，不需要灰色留白与边框装饰。
 * --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    html.is-mobile body {
        background: #eef1f4;
    }

    html.is-mobile #appShell {
        max-width: 430px;
        margin: 0 auto;
        min-height: 100vh;
        background: #fff;
        box-shadow: 0 0 0 1px #dee2e6, 0 6px 24px rgba(0, 0, 0, .08);
        /* 注意：此处禁止 overflow: hidden，否则内部 sticky 的 .reading-toolbar 会失效 */
    }

    /* 手机框内弹窗不超过框宽（须放在上面非媒体查询的 .modal-dialog 规则之后覆盖） */
    html.is-mobile .modal-dialog {
        max-width: 430px;
        margin: 1.5rem auto;
    }
}