/*
 * StockVision 页面外壳统一样式（site-shell.css）
 *
 * 作用：统一各功能页公共组件的尺寸、间距、圆角与移动端表现——
 *   顶栏 / 返回按钮 / 页面标题 / 内容容器 / 面板 / 操作按钮 / 日期标签 /
 *   统计卡片 / 结果表格 / 板块卡片 / Toast / 确认弹窗。
 * 用法：放在页面自身 <style> 之后引入（紧挨 </head>），同名选择器以本文件为准；
 *   各模块自己的主题色（渐变、强调色）仍由页面决定，本文件只管“形”不管“色”。
 * 断点与全站一致：>1024 桌面；769–1024 平板 / 折叠屏展开；≤768 手机；≤480 窄屏；≤360 超窄屏。
 * 只改外观，不涉及任何业务逻辑与脚本。
 */

:root {
    --sv-pad-x: 32px;
    --sv-pad-y: 24px;
    --sv-gap: 20px;
    --sv-radius: 14px;
    --sv-radius-sm: 8px;
    --sv-panel-py: 18px;
    --sv-panel-px: 22px;

    --sv-hdr-py: 12px;
    --sv-back-py: 7px;
    --sv-back-px: 14px;
    --sv-back-fs: 14px;
    --sv-title-fs: 22px;

    --sv-btn-h: 38px;
    --sv-btn-py: 9px;
    --sv-btn-px: 18px;
    --sv-btn-fs: 14px;
    --sv-btn-r: 10px;

    --sv-h2-fs: 16px;
    --sv-label-fs: 12px;
    --sv-value-fs: 15px;
    --sv-stat-fs: 26px;
    --sv-stat-label-fs: 13px;

    --sv-th-fs: 12px;
    --sv-td-fs: 13px;
    --sv-cell-py: 11px;
    --sv-cell-px: 14px;
    --sv-meta-fs: 11px;
}

@media (max-width: 1024px) {
    :root {
        --sv-pad-x: 16px;
        --sv-pad-y: 14px;
        --sv-gap: 14px;
        --sv-radius: 12px;
        --sv-panel-py: 14px;
        --sv-panel-px: 16px;

        --sv-hdr-py: 10px;
        --sv-back-py: 6px;
        --sv-back-px: 12px;
        --sv-back-fs: 13px;
        --sv-title-fs: 18px;

        --sv-btn-h: 34px;
        --sv-btn-py: 8px;
        --sv-btn-px: 14px;
        --sv-btn-fs: 13px;
        --sv-btn-r: 8px;

        --sv-h2-fs: 15px;
        --sv-label-fs: 11px;
        --sv-value-fs: 13px;
        --sv-stat-fs: 20px;
        --sv-stat-label-fs: 12px;

        --sv-th-fs: 11px;
        --sv-td-fs: 12px;
        --sv-cell-py: 8px;
        --sv-cell-px: 10px;
        --sv-meta-fs: 10.5px;
    }
}

@media (max-width: 768px) {
    :root {
        --sv-pad-x: 12px;
        --sv-pad-y: 10px;
        --sv-gap: 10px;
        --sv-radius: 10px;
        --sv-panel-py: 10px;
        --sv-panel-px: 12px;

        --sv-hdr-py: 8px;
        --sv-back-py: 5px;
        --sv-back-px: 10px;
        --sv-back-fs: 12px;
        --sv-title-fs: 16px;

        --sv-btn-h: 32px;
        --sv-btn-py: 7px;
        --sv-btn-px: 12px;
        --sv-btn-fs: 12.5px;
        --sv-btn-r: 8px;

        --sv-h2-fs: 14px;
        --sv-label-fs: 10.5px;
        --sv-value-fs: 12.5px;
        --sv-stat-fs: 17px;
        --sv-stat-label-fs: 11px;

        --sv-th-fs: 11px;
        --sv-td-fs: 12px;
        --sv-cell-py: 7px;
        --sv-cell-px: 8px;
        --sv-meta-fs: 10px;
    }
}

@media (max-width: 480px) {
    :root {
        --sv-pad-x: 10px;
        --sv-pad-y: 8px;
        --sv-gap: 8px;
        --sv-panel-py: 10px;
        --sv-panel-px: 10px;

        --sv-hdr-py: 7px;
        --sv-back-px: 9px;
        --sv-title-fs: 15px;

        --sv-btn-px: 11px;
        --sv-btn-fs: 12px;

        --sv-stat-fs: 15px;
        --sv-stat-label-fs: 10.5px;

        --sv-cell-py: 6px;
        --sv-cell-px: 6px;
    }
}

@media (max-width: 360px) {
    :root {
        --sv-pad-x: 8px;
        --sv-back-px: 8px;
        --sv-title-fs: 14px;
        --sv-btn-px: 9px;
        --sv-btn-fs: 11.5px;
        --sv-stat-fs: 14px;
        --sv-td-fs: 11.5px;
        --sv-cell-px: 5px;
    }
}

/* ---------- 顶栏 ---------- */
.header {
    padding: var(--sv-hdr-py) var(--sv-pad-x);
    padding-top: calc(var(--sv-hdr-py) + env(safe-area-inset-top, 0px));
    padding-left: calc(var(--sv-pad-x) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--sv-pad-x) + env(safe-area-inset-right, 0px));
    gap: 12px;
}
.header-left {
    gap: 12px;
    min-width: 0;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--sv-back-py) var(--sv-back-px);
    font-size: var(--sv-back-fs);
    line-height: 1.4;
    border-radius: var(--sv-radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}
.back-btn svg {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}
.header .page-title {
    font-size: var(--sv-title-fs);
    line-height: 1.3;
    min-width: 0;
}
/* 标题内的版本徽标：标题是渐变透明文字，徽标需显式恢复文字颜色，否则“V2.x”不可见 */
.page-title .version-badge {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 11px;
    -webkit-text-fill-color: #fff;
}
.status-badge {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- 内容容器 ---------- */
.main-container,
.main-content {
    padding: var(--sv-pad-y) var(--sv-pad-x);
    padding-left: calc(var(--sv-pad-x) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--sv-pad-x) + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--sv-pad-y) + env(safe-area-inset-bottom, 0px));
}

/* ---------- 面板 ---------- */
.config-panel,
.trading-days-panel {
    padding: var(--sv-panel-py) var(--sv-panel-px);
    margin-bottom: var(--sv-gap);
    border-radius: var(--sv-radius);
}
.stock-table-container {
    border-radius: var(--sv-radius);
}
.config-title,
.trading-days-title,
.table-title {
    font-size: var(--sv-h2-fs);
    line-height: 1.4;
}
.config-toggle {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.config-grid {
    gap: 8px;
}
.config-item {
    padding: 8px 12px;
    border-radius: var(--sv-radius-sm);
}
.config-label {
    font-size: var(--sv-label-fs);
    line-height: 1.35;
}
.config-value {
    font-size: var(--sv-value-fs);
    line-height: 1.35;
}

/* ---------- 操作按钮 ---------- */
.action-bar {
    gap: 10px;
    margin-bottom: var(--sv-gap);
}
.action-btn-group {
    gap: 8px;
    flex-wrap: wrap;
}
.action-bar .btn,
.action-btn-group .btn,
.table-actions .btn,
.confirm-actions .btn {
    min-height: var(--sv-btn-h);
    padding: var(--sv-btn-py) var(--sv-btn-px);
    font-size: var(--sv-btn-fs);
    line-height: 1.25;
    border-radius: var(--sv-btn-r);
    gap: 6px;
    white-space: nowrap;
    justify-content: center;
}
.action-bar .btn svg,
.action-btn-group .btn svg,
.table-actions .btn svg {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}
/* 表头右侧的小操作（按板块筛选、导出等） */
.table-header .filter-link {
    padding: 5px 12px;
    font-size: 12.5px;
    line-height: 1.4;
    border-radius: 6px;
    white-space: nowrap;
}

/* ---------- 历史日期标签 ---------- */
.trading-days-header {
    gap: 10px;
    margin-bottom: 12px;
}
.trading-days-list {
    gap: 8px;
}
.trading-day-tag {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: var(--sv-radius-sm);
}
.trading-day-tag .day-info,
.trading-day-tag .stock-count,
.trading-day-tag .calc-btn {
    font-size: var(--sv-meta-fs);
}

/* ---------- 统计卡片 ---------- */
.stats-grid {
    gap: 12px;
    margin-bottom: var(--sv-gap);
}
.stat-card {
    padding: 14px 12px;
    border-radius: var(--sv-radius);
}
.stat-value {
    font-size: var(--sv-stat-fs);
    line-height: 1.25;
}
.stat-label {
    font-size: var(--sv-stat-label-fs);
    line-height: 1.35;
}

/* ---------- 结果表格 ---------- */
.table-header {
    padding: 12px 16px;
    gap: 10px;
}
.stock-table th {
    padding: var(--sv-cell-py) var(--sv-cell-px);
    font-size: var(--sv-th-fs);
}
.stock-table td {
    padding: var(--sv-cell-py) var(--sv-cell-px);
    font-size: var(--sv-td-fs);
}
.stock-table .stock-name {
    font-size: var(--sv-td-fs);
}
.stock-table .stock-symbol {
    font-size: var(--sv-meta-fs);
}
.stock-table .industry-tag {
    font-size: var(--sv-meta-fs);
    white-space: nowrap;
}
.stock-table .monitor-btn {
    font-size: var(--sv-meta-fs);
    white-space: nowrap;
}

/* ---------- 板块切换 / 板块卡片 ---------- */
.sector-tab {
    padding: 5px 14px;
    font-size: 12.5px;
    white-space: nowrap;
}
.sector-name {
    font-size: 12.5px;
}
.sector-info,
.sector-rank,
.stock-count-info {
    font-size: var(--sv-meta-fs);
}

/* ---------- 提示 / 弹窗 / 空状态 ---------- */
.empty-state {
    padding: 48px 20px;
}
/* 宽表格（可横向滚动）为空时，提示停留在可视区域内，而不是居中在超出屏幕的表格中间 */
.stock-table td > .empty-state {
    position: sticky;
    left: 0;
    width: min(100%, calc(100vw - 2 * var(--sv-pad-x) - 4px));
}
.confirm-content {
    width: min(420px, calc(100vw - 32px));
}

@media (max-width: 1024px) {
    /* 操作按钮在窄屏保持横排、按内容宽度，不再整行拉伸 */
    .action-bar { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .action-btn-group { width: auto; max-width: 100%; }
    .action-bar > .btn,
    .action-btn-group .btn { flex: 0 0 auto; width: auto; }
    .table-header .filter-link { padding: 4px 10px; font-size: 12px; }
    /* 确认弹窗：两个按钮并排等宽，不再上下堆叠成整行大按钮 */
    .confirm-actions { flex-direction: row; gap: 8px; }
    .confirm-actions .btn { flex: 1 1 0; min-width: 0; width: auto; }
    .stats-grid { gap: 8px; }
    .stat-card { padding: 10px 8px; }
    .config-item { padding: 6px 8px; }
    .table-header { padding: 10px 12px; }
    .trading-day-tag { padding: 6px 10px; font-size: 12px; }
    .trading-days-header { margin-bottom: 10px; }
    .sector-tab { padding: 4px 12px; font-size: 12px; }
    .sector-name { font-size: 12px; }
}

@media (max-width: 768px) {
    .header { gap: 8px; }
    .header-left { gap: 8px; flex: 1 1 auto; }
    .header .page-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .status-badge { padding: 4px 10px; font-size: 11px; }
    .page-title .version-badge { font-size: 10px; padding: 1px 6px; margin-left: 6px; }

    .config-header { gap: 8px; }
    .config-toggle { padding: 3px 8px; font-size: 11px; }
    .config-grid { gap: 6px; }
    .config-item { padding: 6px 8px; border-radius: 6px; }

    .action-bar { gap: 8px; }
    .action-btn-group { gap: 6px; }

    .stats-grid { gap: 6px; }
    .stat-card { padding: 8px 6px; border-radius: var(--sv-radius-sm); }

    .trading-days-list { gap: 6px; }
    .trading-day-tag { padding: 6px 9px; font-size: 11.5px; }

    .table-header { padding: 8px 10px; }

    .sector-tab { padding: 4px 10px; font-size: 11.5px; }
    .sector-card { padding: 8px 10px; }
    .sector-name { font-size: 11.5px; }

    .empty-state { padding: 32px 16px; }
    .toast {
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding: 10px 14px;
        font-size: 13px;
        text-align: center;
    }
    .confirm-content { padding: 20px 16px; }
}

@media (max-width: 480px) {
    .trading-day-tag { padding: 5px 8px; font-size: 11px; }
    .stat-card { padding: 7px 4px; }
    .sector-card { padding: 7px 8px; }
}