/* job_insight.css — Job Insight dashboard page styles
 *
 * 复用 prototypes/job_insight_v1.html（Anna 已批准的可视化方案）里已验证的 CSS 原样搬入，
 * 只加了本文件末尾的 .stat-trend.increase/.decrease 两条（真实数据 trend 字段值是
 * increase/decrease，不是原型示例用的 up/down，颜色沿用原型 up/down 同款 token）。
 * 页面专属 CSS，只在 job_insight/dashboard.html 的 extra_head 里加载，不影响其他页面。
 */

.dash{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:40px 48px 80px;}
@media (max-width:1024px){.dash{padding:28px 24px 64px;}}
@media (max-width:768px){.dash{padding:20px 20px 48px;}}

.dash-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:8px;flex-wrap:wrap;}
.dash-h1{font-size:30px;font-weight:800;letter-spacing:-1px;}
.dash-sub{font-size:13px;color:var(--text-tertiary);margin-top:4px;}
.sync-note{font-size:11.5px;color:var(--text-tertiary);font-family:var(--font-mono);display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border-subtle);border-radius:100px;background:rgba(var(--ink-tint-rgb),0.02);}
.sync-note .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-emerald);flex-shrink:0;}

.section-title-row{margin:40px 0 14px;}
.section-title-row:first-of-type{margin-top:28px;}
.section-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-tertiary);}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px;}
@media (max-width:768px){.stats{grid-template-columns:1fr;}}
.stat-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:11px;padding:18px 20px;display:flex;align-items:center;gap:14px;}
.stat-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--accent-indigo-rgb),0.10);color:var(--nav-active-text);}
.stat-icon svg{width:18px;height:18px;}
.stat-body{min-width:0;}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-tertiary);margin-bottom:4px;}
.stat-value{font-size:24px;font-weight:700;letter-spacing:-0.5px;font-family:var(--font-mono);}
.stat-trend{font-size:11px;font-weight:600;margin-top:3px;}
.stat-trend.up,.stat-trend.increase{color:var(--accent-green-text,#15803d);}
.stat-trend.down,.stat-trend.decrease{color:var(--badge-danger-text,#dc2626);}
.stat-trend.flat{color:var(--text-tertiary);}

/* 2 列 x 3 行网格，卡片按 DOM 顺序两两配对逐行摆放（Region Trend/Categories、Category Breakdown/Radar、
   Salary Range/Job Type），align-items 用 grid 默认的 stretch——同一行两张卡自动等高对齐上下边界，
   内容较短的一侧留白，不需要手工凑数值（2026-07-20 人工验收后按 Anna 要求改为逐行网格布局，此前是
   两栏各自独立往下流的 .col-main/.col-side 结构，无法保证跨栏对齐） */
.grid-main{display:grid;grid-template-columns:2fr 1fr;gap:20px;}
@media (max-width:1024px){.grid-main{grid-template-columns:1fr;}}
.grid-main > .card{margin-bottom:0;}
/* grid-main 内各卡片靠 gap:20px 撑开间距（margin-bottom 已归零避免重复间距），
   但 grid-main 本身没有底部间距，紧跟着的 Interview Success Guide 卡片会直接贴上来——
   补一条让它和上面网格的间距跟网格内部 gap 保持一致（2026-07-20 人工验收发现并修复） */
.grid-main + .card{margin-top:20px;}

/* Interview Success Guide 整行独立成一个满宽卡片（原在 .col-side 侧栏），卡片内部条目仍纵向一条一条排列，
   只是不再挤在窄侧栏里（2026-07-20 人工验收：整体区块要满宽，但每条 item 内部保持竖排，不要横排成一排卡片） */
.posters-row{display:flex;flex-direction:column;gap:14px;}

.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;padding:20px 22px;margin-bottom:20px;}
.card-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px;flex-wrap:wrap;}
.card-title{font-size:14px;font-weight:700;letter-spacing:-0.2px;}
.card-title span{font-weight:400;color:var(--text-tertiary);font-size:12px;}
.chart-box{width:100%;}
.chart-box.tall{height:320px;}
.chart-box.mid{height:340px;}
.chart-box.scroll{height:420px;overflow-y:auto;padding-right:4px;}

.cat-list{display:flex;flex-direction:column;gap:2px;}
.cat-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-subtle);}
.cat-row:last-child{border-bottom:none;}
.cat-rank{width:18px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex-shrink:0;}
.cat-name{flex:1;font-size:13px;color:var(--text-primary);}
.cat-count{font-family:var(--font-mono);font-size:12.5px;color:var(--text-secondary);font-weight:600;}

.salary-search{flex-shrink:0;width:100%;box-sizing:border-box;font-size:12.5px;padding:8px 12px;margin:2px 0 12px;border:1px solid var(--border-default);border-radius:8px;background:var(--bg-elevated);color:var(--text-primary);font-family:inherit;}
.salary-search:focus{outline:none;border-color:var(--nav-active-text);}
table.salary-table{width:100%;border-collapse:collapse;font-size:12.5px;}
table.salary-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-tertiary);padding:0 10px 10px;border-bottom:1px solid var(--border-default);font-weight:600;}
table.salary-table th.sortable{cursor:pointer;user-select:none;}
table.salary-table th.sortable:hover{color:var(--text-secondary);}
table.salary-table th .sort-icon{font-size:8px;margin-left:3px;color:var(--nav-active-text);}
table.salary-table td{padding:9px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);}
table.salary-table tr:last-child td{border-bottom:none;}
table.salary-table td.num{font-family:var(--font-mono);color:var(--text-secondary);}
table.salary-table td.range{font-family:var(--font-mono);color:var(--text-secondary);white-space:nowrap;}
.salary-table-wrap{flex:1;overflow-y:auto;padding-right:2px;}
.salary-empty{text-align:center;color:var(--text-tertiary);padding:24px 0 !important;}
.salary-pagination{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle);}
.page-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;transition:all .12s;}
.page-btn:hover:not(:disabled){border-color:var(--border-hover);color:var(--nav-active-text);}
.page-btn:disabled{opacity:.35;cursor:not-allowed;}
.page-info{font-size:11.5px;color:var(--text-tertiary);font-family:var(--font-mono);}

.poster-item{display:flex;gap:12px;}
.poster-thumb{width:56px;height:56px;border-radius:9px;flex-shrink:0;background:var(--gradient-tc-info);display:flex;align-items:center;justify-content:center;color:#fff;}
.poster-thumb svg{width:22px;height:22px;}
.poster-title{font-size:13px;font-weight:600;color:var(--text-primary);text-decoration:none;line-height:1.4;}
.poster-title:hover{color:var(--nav-active-text);}
.poster-body{font-size:11.5px;color:var(--text-tertiary);margin-top:3px;line-height:1.5;}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--text-tertiary);gap:10px;}