/* ============================================================================
   迅辉 · 照片查看器（Photo Viewer）共用样式
   文件：/static/xh/photo-viewer.css      脚本：/static/xh/photo-viewer.js
   使用方：后台「柜照清单」templates/admin.html、客户端 templates/portal.html、
           司机拍照页 templates/index.html
   约定：零第三方依赖、零 CDN、零 emoji；线性 SVG 图标（由 JS 以 currentColor 注入）；
         蓝白圆角卡片；颜色优先取 theme.css 的 --xh-* 令牌，缺失时回退内置值。
   ============================================================================ */

/* ---------------------------------------------------------------- 分组弹窗 */
.xh-pv-groups { display: block; }

.xh-pv-group { margin-bottom: 18px; }
.xh-pv-group:last-child { margin-bottom: 4px; }

.xh-pv-group-head {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--xh-line-soft, #eef1f5);
}
.xh-pv-group-head h4 {
    margin: 0; font-size: var(--xh-fs-card, 15px); font-weight: 600;
    color: #1d2939; display: flex; align-items: center; gap: 7px;
}
.xh-pv-group-head h4 svg {
    width: 17px; height: 17px; stroke: var(--xh-primary, #1890ff); fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.xh-pv-count {
    font-size: var(--xh-fs-hint, 12px); font-weight: 600;
    color: var(--xh-primary, #1890ff); background: var(--xh-primary-soft, #e6f7ff);
    border-radius: 999px; padding: 1px 9px; line-height: 18px; white-space: nowrap;
}

/* ---------------------------------------------------------------- 缩略图网格 */
.xh-pv-grid.xh-pv-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.xh-pv-grid .xh-pv-card {
    position: relative; padding: 8px;
    background: var(--xh-card, #ffffff);
    border: 1px solid var(--xh-line, #e5eaf0);
    border-radius: var(--xh-radius-sm, 8px);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.xh-pv-grid .xh-pv-card:hover {
    border-color: var(--xh-primary, #1890ff);
    box-shadow: var(--xh-shd-hover, 0 4px 14px rgba(16,24,40,.09));
}
.xh-pv-grid .xh-pv-card img.xh-pv-thumb {
    display: block; width: 100%; height: 130px; object-fit: cover;
    border-radius: 6px; background: #f1f5f9; cursor: zoom-in;
}
.xh-pv-grid .xh-pv-card .xh-pv-meta {
    font-size: var(--xh-fs-hint, 12px); color: var(--xh-muted, #667085);
    margin-top: 7px; line-height: 1.5; word-break: break-all;
}
.xh-pv-grid .xh-pv-card .xh-pv-meta .xh-pv-meta-title {
    font-weight: 600; color: #334155;
}
.xh-pv-card .xh-pv-err {
    display: none; padding: 20px; text-align: center;
    color: var(--xh-faint, #98a2b3); font-size: var(--xh-fs-hint, 12px);
}

/* ---------------------------------------------------------------- 弹窗外壳补充 */
.xh-pv-modal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xh-pv-modal-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--xh-line-soft, #eef1f5);
}
.xh-pv-modal-foot .xh-pv-foot-hint {
    font-size: var(--xh-fs-hint, 12px); color: var(--xh-faint, #98a2b3);
}
.xh-pv-modal-sub {
    font-size: var(--xh-fs-hint, 12px); color: var(--xh-muted, #667085);
    margin-bottom: 14px; line-height: 1.6;
}

/* ---------------------------------------------------------------- 大图灯箱 */
.xh-pv-overlay {
    position: fixed; inset: 0; z-index: 10050;
    background: rgba(2, 6, 23, .92);
    display: flex; flex-direction: column;
    touch-action: none; overscroll-behavior: contain;
}

.xh-pv-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; flex-wrap: wrap;
    background: rgba(2, 6, 23, .72);
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative; z-index: 3;
}
.xh-pv-title {
    flex: 1 1 auto; min-width: 0; color: #e2e8f0;
    font-size: var(--xh-fs-base, 14px); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xh-pv-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.xh-pv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 36px; height: 34px; padding: 0 10px;
    background: rgba(255,255,255,.10); color: #e5edf8;
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    font-size: var(--xh-fs-hint, 12px); font-family: inherit; font-weight: 600;
    cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.xh-pv-btn:hover { background: rgba(24,144,255,.35); border-color: rgba(24,144,255,.6); }
.xh-pv-btn:disabled { opacity: .4; cursor: not-allowed; }
.xh-pv-btn svg {
    width: 17px; height: 17px; stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block;
}
.xh-pv-btn.xh-pv-btn-text { padding: 0 12px; }
.xh-pv-zoomval {
    min-width: 54px; text-align: center; color: #cbd5e1;
    font-size: var(--xh-fs-hint, 12px); font-weight: 700;
    font-variant-numeric: tabular-nums; user-select: none;
}

.xh-pv-stage {
    position: relative; flex: 1 1 auto; min-height: 0;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    touch-action: none; cursor: zoom-in; user-select: none;
    -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.xh-pv-stage.xh-pv-zoomed { cursor: grab; }
.xh-pv-stage.xh-pv-dragging { cursor: grabbing; }

.xh-pv-img {
    display: block; width: 100%; height: 100%;
    object-fit: contain; transform-origin: center center;
    will-change: transform;
    -webkit-user-drag: none; user-select: none;
}
/* 图片满铺 stage（覆盖旧 .photo-lightbox img 的 max-* 限制） */
.xh-pv-stage .xh-pv-img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }

/* 复用页面已有灯箱容器（templates/index.html #photo-lightbox）时的补丁 */
.photo-lightbox.xh-pv-static { flex-direction: column; padding: 0; align-items: stretch; }
.photo-lightbox.xh-pv-static .xh-pv-topbar { width: 100%; flex: 0 0 auto; }
.photo-lightbox.xh-pv-static .xh-pv-stage { width: 100%; }
.xh-pv-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; font-size: var(--xh-fs-hint, 12px); pointer-events: none;
}

.xh-pv-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 46px; height: 70px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2,6,23,.35); color: #f1f5f9;
    border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
    cursor: pointer; transition: background .15s ease;
}
.xh-pv-nav:hover { background: rgba(24,144,255,.45); }
.xh-pv-nav.prev { left: 12px; }
.xh-pv-nav.next { right: 12px; }
.xh-pv-nav svg {
    width: 24px; height: 24px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.xh-pv-nav[hidden] { display: none; }

.xh-pv-info {
    padding: 8px 14px 10px; text-align: center; color: #cbd5e1;
    font-size: var(--xh-fs-hint, 12px); background: rgba(2,6,23,.72);
    border-top: 1px solid rgba(255,255,255,.08);
}
.xh-pv-info .xh-pv-info-title { color: #f1f5f9; font-weight: 600; }
.xh-pv-info .xh-pv-info-sep { margin: 0 8px; color: #64748b; }
.xh-pv-info .xh-pv-hint { color: #94a3b8; }

/* ---------------------------------------------------------------- 弹窗滚动与底部提示 */
/* 结构（所有宽度统一）：.photo-modal.xh-pv-modal 为 flex 纵向容器、自身不滚动
     ├─ .photo-modal-header   固定
     ├─ .xh-pv-modal-body     唯一滚动区（flex:1 / overflow:auto，常显细滚动条）
     └─ .xh-pv-scrollhint     独立一行提示，位于滚动区之外，绝不覆盖内容
   内容不溢出时提示行自动隐藏。 */
.photo-modal.xh-pv-modal {
    display: flex; flex-direction: column;
    max-height: 85vh; overflow: hidden;
    padding-bottom: 16px;                 /* 内容区底部留白 */
}
.xh-pv-modal-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;                 /* 最后一行与提示行之间留白（12-16px） */
    scrollbar-width: thin;
    scrollbar-color: #c7d2e0 transparent;
}
.xh-pv-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
.xh-pv-modal-body::-webkit-scrollbar-track { background: #f5f7fa; border-radius: 8px; }
.xh-pv-modal-body::-webkit-scrollbar-thumb {
    background: #c7d2e0; border-radius: 8px; border: 2px solid #ffffff;
}
.xh-pv-modal-body::-webkit-scrollbar-thumb:hover { background: #98a2b3; }

/* 兼容旧结构（未经增强的 .photo-modal 由自身滚动） */
.photo-modal:not(.xh-pv-modal) {
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c7d2e0 transparent;
}
.photo-modal:not(.xh-pv-modal)::-webkit-scrollbar { width: 10px; height: 10px; }
.photo-modal:not(.xh-pv-modal)::-webkit-scrollbar-track { background: #f5f7fa; border-radius: 8px; }
.photo-modal:not(.xh-pv-modal)::-webkit-scrollbar-thumb {
    background: #c7d2e0; border-radius: 8px; border: 2px solid #ffffff;
}
.photo-modal:not(.xh-pv-modal)::-webkit-scrollbar-thumb:hover { background: #98a2b3; }

/* 底部提示行：独立一行、不浮动、不覆盖内容（分隔线与浅底便于一眼看出它是独立页脚行） */
.xh-pv-scrollhint {
    flex: 0 0 auto;
    margin: 0; padding: 8px 0 2px;
    border-top: 1px solid var(--xh-line, #e2e8f0);
    background: #fbfcfe;
    color: var(--xh-faint, #98a2b3); font-size: var(--xh-fs-hint, 12px);
    text-align: center; letter-spacing: .2px; line-height: 1.6;
    pointer-events: none;
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 760px) {
    .xh-pv-grid.xh-pv-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
    .xh-pv-grid .xh-pv-card img.xh-pv-thumb { height: 96px; }
    .xh-pv-nav { width: 38px; height: 58px; }
    .xh-pv-nav.prev { left: 6px; }
    .xh-pv-nav.next { right: 6px; }
    .xh-pv-title { font-size: var(--xh-fs-hint, 12px); }
    .xh-pv-btn { min-width: 32px; height: 32px; padding: 0 8px; }
    .xh-pv-btn.xh-pv-btn-text { padding: 0 9px; }
    .xh-pv-info { font-size: 11px; padding: 6px 10px 8px; }
}
/* 手机断点（≤700px）：弹窗头部按钮触控高度 ≥44px，标题独占一行、按钮等宽不被挤压 */
@media (max-width: 700px) {
    .photo-modal-header { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; align-items: center; }
    .photo-modal-header h3 { flex: 1 1 100%; font-size: var(--xh-fs-card, 15px); white-space: normal; overflow: visible; }
    .xh-pv-modal-actions { flex: 1 1 100%; display: flex; flex-wrap: nowrap; gap: 10px; }
    .xh-pv-modal-actions .btn {
        flex: 1 1 0; min-height: 44px; padding: 10px 12px !important;
        font-size: 14px !important; line-height: 1.2;
        display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    }
    .xh-pv-modal-foot .btn {
        min-height: 44px; padding: 10px 16px !important;
        font-size: 14px !important; line-height: 1.2;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .xh-pv-modal-foot { gap: 10px; }
    .xh-pv-scrollhint { padding: 10px 0 4px; }
}

@media (max-width: 420px) {
    .xh-pv-grid.xh-pv-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .xh-pv-grid .xh-pv-card img.xh-pv-thumb { height: 82px; }
}