/* HireWise 数据控制台 · 框架壳 — 侧边栏 / 顶栏 / 内容区 / 全局搜索下拉 / 窄屏适配
 * 对应 console.main.js
 */

/* ══════════════════════════════════════════════════════════════
 * Console Override — 后台独立页面布局
 * 脱离插件 360px 面板限制，改为全屏后台
 * ══════════════════════════════════════════════════════════════ */
html, body { background: #F8FAFC; }
body { font-family: 'Noto Sans SC', 'Inter', system-ui, -apple-system, sans-serif; margin: 0; }

/* ── 框架：侧边栏 + 玻璃顶栏 + 内容区 ── */
.console-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* 侧边栏 */
.console-sidebar {
  width: 240px; flex-shrink: 0;
  background: #fff; border-right: 1px solid #E2E8F0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.console-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; }
.console-brand .logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: transparent;
  object-fit: cover; display: block;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .28); flex-shrink: 0;
}
.console-brand .brand-text { font-weight: 650; font-size: 14px; color: #0F172A; line-height: 32px; min-width: 0; }
.console-brand .brand-text small { display: block; font-size: 10.5px; color: #94A3B8; font-weight: 450; letter-spacing: .4px; margin-top: 1px; white-space: nowrap; }

/* 分组导航 */
.console-nav { flex: 1; padding: 4px 12px; overflow-y: auto; }
.console-nav .nav-label { font-size: 11px; font-weight: 600; color: #94A3B8; letter-spacing: .8px; padding: 14px 10px 6px; }
.console-tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: transparent; text-align: left;
  color: #334155; font-size: 13.5px; font-weight: 480;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; position: relative;
  transition: background .15s ease, color .15s ease;
  font-family: inherit;
}
.console-tab svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; opacity: .85; }
.console-tab .tab-text { white-space: nowrap; }
.console-tab:hover { background: #F1F5F9; color: #0F172A; }
.console-tab.active { background: #EFF4FF; color: #1D4ED8; font-weight: 560; }
.console-tab.active::before {
  content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: #2563EB;
}

/* 侧边栏底部：用户卡 + 退出 */
.console-side-foot { border-top: 1px solid #EEF2F7; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.side-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #93C5FD, #2563EB); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.side-user-meta { min-width: 0; }
.side-user-meta b { display: block; font-size: 12.5px; font-weight: 560; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-meta span { font-size: 11px; color: #94A3B8; }
.console-logout {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #E2E8F0; background: #fff; color: #64748B;
  font-size: 12.5px; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  font-family: inherit; transition: color .15s, border-color .15s;
}
.console-logout svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.console-logout:hover { color: #DC2626; border-color: #DC2626; }

/* 右侧主体 */
.console-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.console-topbar {
  position: sticky; top: 0; z-index: 100;
  height: 56px; display: flex; align-items: center; gap: 14px;
  padding: 0 28px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid #E2E8F0;
}
.console-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #94A3B8; }
.console-crumb b { color: #0F172A; font-weight: 560; }
.console-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: #F1F5F9; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 10px; width: 240px; color: #94A3B8; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.console-search:focus-within { border-color: #E2E8F0; background: #fff; }
.console-search input { border: none; background: transparent; outline: none; flex: 1; min-width: 0; font-size: 13px; color: #0F172A; font-family: inherit; }
.console-search input::placeholder { color: #94A3B8; }
.console-search kbd { font-family: inherit; font-size: 11px; background: #fff; border: 1px solid #E2E8F0; border-radius: 5px; padding: 1px 5px; color: #64748B; }

/* 顶栏全局搜索下拉面板 */
.console-search { position: relative; }
.cs-panel {
  display: none; position: absolute; top: 100%; left: 0; width: 340px; margin-top: 8px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  padding: 6px; max-height: 420px; overflow-y: auto; z-index: 120;
}
.cs-panel.open { display: block; }
.cs-group-title { font-size: 11px; font-weight: 600; color: #94A3B8; padding: 8px 10px 4px; }
.cs-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: transparent; text-align: left; font-family: inherit;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #0F172A; transition: background .12s;
}
.cs-item:hover { background: #F1F5F9; }
.cs-item .cs-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cs-item .cs-sub { font-size: 12px; color: #94A3B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; }
.cs-item .cs-score { font-size: 11px; font-weight: 600; color: #2563EB; background: #EFF4FF; border-radius: 5px; padding: 1px 6px; flex-shrink: 0; }
.cs-item .cs-tag { font-size: 11px; border-radius: 5px; padding: 1px 6px; flex-shrink: 0; }
.cs-item .cs-tag.gr { color: #16A34A; background: #F0FDF4; }
.cs-item .cs-tag.gy { color: #64748B; background: #F1F5F9; }
/* 行内文本空态：下拉/小组件级（LIST-DESIGN §5 变体） */
.empty-inline { font-size: 12.5px; color: #94A3B8; text-align: center; padding: 18px 12px 14px; }

.topbar-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: #64748B; cursor: pointer; transition: background .15s, color .15s;
}
.topbar-icon-btn:hover { background: #F1F5F9; color: #0F172A; }
.topbar-icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.topbar-icon-btn { position: relative; }
.topbar-icon-btn .ping { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; border: 2px solid #fff; }

/* 顶栏头像 + 通知浮层 */
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #93C5FD, #2563EB); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0; cursor: pointer;
  transition: box-shadow .15s;
}
.topbar-avatar:hover { box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }

/* 侧边栏：徽标 / 状态点 / 用量卡 */
.tab-badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: #DBEAFE; color: #1D4ED8;
  padding: 1px 7px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.nav-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; flex-shrink: 0; }
.side-usage { display: none; margin: 12px; padding: 14px; border-radius: 10px; background: linear-gradient(180deg, #FBFCFE, #F4F7FB); border: 1px solid #EEF2F7; }
.side-usage.show { display: block; }
.side-usage .t { display: flex; justify-content: space-between; font-size: 12px; color: #64748B; font-weight: 500; margin-bottom: 8px; }
.side-usage .t b { color: #0F172A; font-variant-numeric: tabular-nums; font-weight: 600; }
.side-usage-bar { height: 5px; border-radius: 3px; background: #E2E8F0; overflow: hidden; }
.side-usage-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #3B82F6, #2563EB); transition: width .4s ease; }
.side-usage-link { margin-top: 9px; font-size: 12px; color: #2563EB; font-weight: 550; cursor: pointer; }
.side-usage-link:hover { color: #1D4ED8; }

/* 内容区 */
.console-main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 28px 60px; box-sizing: border-box; }

/* 窄屏：侧边栏收缩为图标模式 */
@media (max-width: 920px) {
  .console-sidebar { width: 60px; }
  .console-brand { justify-content: center; padding: 16px 8px 10px; }
  .console-brand .brand-text, .console-nav .nav-label, .console-tab .tab-text { display: none; }
  .console-tab { justify-content: center; padding: 10px 0; }
  .console-tab.active::before { left: -8px; }
  .console-nav { padding: 4px 8px; }
  .side-user-meta { display: none; }
  .side-usage.show { display: none; }
  .side-user { justify-content: center; }
  .console-logout { padding: 7px 0; }
  .console-search { width: 160px; }
  .console-search kbd { display: none; }
  /* 总览页窄屏：4 KPI → 2 列，两栏堆叠，按钮紧凑 */
  .ov-kpis { grid-template-columns: repeat(2, 1fr); }
  .ov-grid2 { grid-template-columns: 1fr; }
  .ov-head { flex-direction: column; align-items: flex-start; }
  .ov-head-actions { width: 100%; }
  .ov-head-actions .ov-btn { flex: 1; justify-content: center; }
  .dt-table { font-size: 12.5px; }
  .dt-table thead th, .dt-table tbody td { padding-left: 12px; padding-right: 12px; }
}
.console-page { display: none; }
.console-page.active { display: block; }
.console-page-head { margin-bottom: 20px; }
.console-page-head h2 { font-size: 20px; font-weight: 600; color: #0F172A; margin: 0 0 4px; }
.console-page-head p { font-size: 13px; color: #94A3B8; margin: 0; }