/* ============================================================================
   松果集团 · UI 统一设计系统  (ui.css)
   ----------------------------------------------------------------------------
   设计基线（两个参考页同源，取其实测值）：
     · gate.duobay.cn（聚合系统平台）—— 白底页头 + 1px 细线分隔 + 暖橙强调
     · group.php（集团组织架构页）—— 中性色阶 / 卡片气质 / 圆角与轻阴影
     · 全站唯一强调色 = 暖橙 #e87c30（与其深色 #c96526）；整站不使用蓝色
   使用方式：
     在页面自带 <style> 之后引入本文件（后加载优先，逐层覆盖）：
         <link rel="stylesheet" href="assets/ui.css">
   约束：仅覆盖视觉层（颜色/字体/间距/圆角/阴影/边框），
         不改动任何 HTML 结构、表单字段、JS 钩子与业务逻辑。
   ----------------------------------------------------------------------------
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 设计令牌（Design Tokens）
   同时定义各历史页面用过的别名变量，使整站变量全部收敛到新系统。
   --------------------------------------------------------------------------- */
:root {
  /* 品牌暖橙 —— 全站唯一强调色（实测 gate 页与 group 页均只用此一色） */
  --primary:          #e87c30;
  --primary-dark:     #c96526;
  --primary-light:    #f0955a;
  --primary-50:       #fdf3ea;
  --primary-100:      #f9e2cf;
  --primary-grad:     linear-gradient(135deg, #e87c30 0%, #c96526 100%);

  /* 橙色别名 —— 与主色同源 */
  --accent:           #e87c30;
  --accent-dark:      #c96526;
  --accent-50:        #fdf3ea;
  --accent-100:       #f9e2cf;

  /* 中性色阶（来自 group 页） */
  --bg:               #f7f8fa;
  --bg-white:         #ffffff;
  --surface:          #ffffff;
  --ink:              #1a1f36;
  --sub:              #5b6472;
  --muted:            #9aa3af;
  --line:             #eceef1;
  --soft:             #f9fafb;
  --line-strong:      #e2e6ec;

  /* 语义色（统一后的收敛值） */
  --success:          #12a150;
  --success-dark:     #0d7f40;
  --success-50:       #eaf7ef;
  --warning:          #e08700;
  --warning-50:       #fdf6e7;
  --danger:           #e5484d;
  --danger-dark:      #c93b3f;
  --danger-50:        #fdeeee;
  --info:             #5b6472;
  --info-50:          #f2f4f7;
  --positive:         #12a150;
  --negative:         #e5484d;
  --neutral:          #6b7280;

  /* 历史别名（保持各页原引用可用） */
  --light:            #f7f8fa;
  --dark:             #1a1f36;
  --text:             #1a1f36;
  --text-secondary:   #5b6472;
  --gray:             #5b6472;
  --gray-light:       #9aa3af;
  --border:           #eceef1;
  --secondary:        #c96526;

  /* 尺度 */
  --radius:           12px;
  --radius-sm:        8px;
  --radius-pill:      999px;
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         16px;
  --space-lg:         24px;
  --space-xl:         32px;
  --space-2xl:        48px;

  /* 阴影（轻、双层，取自 group 页） */
  --shadow-sm:        0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md:        0 4px 12px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-lg:        0 12px 32px rgba(16,24,40,.10), 0 2px 8px rgba(16,24,40,.05);

  /* 字体：优先中文正文字体，保留西文回退（group 页字体栈 + 系统栈） */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "WenQuanYi Micro Hei", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "PingFang SC", "Microsoft YaHei", -apple-system,
              BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. 基础排版
   --------------------------------------------------------------------------- */
body {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}

h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.35;
}
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* 数字统一使用等宽感字体，便于对齐比较 */
.stat-value, .total-value, .result-value, .amount,
.ov-card .v, td.num, .num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--primary-100); color: var(--primary-dark); }

/* 滚动条（Webkit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--soft); }
::-webkit-scrollbar-thumb { background: #d7dbe2; border-radius: 999px; border: 2px solid var(--soft); }
::-webkit-scrollbar-thumb:hover { background: #c3c9d2; }

/* 容器（保留各页原有宽度设定，仅统一内边距，避免版式跳变） */
.container {
  margin: 0 auto;
  padding: 15px;
}

/* ---------------------------------------------------------------------------
   3. 页头（统一：白底 + 1px 细线 + 12px 圆角 + 深色标题）
   与 gate.duobay.cn / group.php 一致 —— 不用彩色 banner、不用渐变
   --------------------------------------------------------------------------- */
header,
.header,
.page-header {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px 26px !important;
  margin-bottom: var(--space-lg) !important;
  /* 建立定位上下文：块级页头(.header)里的用户区用绝对定位对齐内边距边线 */
  position: relative !important;
}

/* .header-top / .controls 只是页头内部排布层（dashboard、target_management），不做成嵌套卡片 */
header .header-top, .header .header-top,
header .controls, .header .controls {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
header .header-top, .header .header-top { margin: 0 0 14px !important; }

/* 头部内的标题与副标题 */
header h1, header h2, header h3,
.header h1, .header h2, .header h3,
.page-header h1, .page-header h2, .page-header h3 {
  color: var(--ink) !important;
  margin: 0 0 4px;
  font-size: 1.35rem;
  text-shadow: none !important;
}
header h2 i, .header h2 i, .page-header h1 i,
header h1 i, .header h1 i, .page-header h2 i {
  color: var(--accent) !important;
  opacity: 1;
}

.subtitle, .page-subtitle, header .subtitle,
.header .subtitle, .page-header .subtitle,
.brand-text .subtitle {
  color: var(--sub) !important;
  opacity: 1 !important;
  font-size: .85rem;
  letter-spacing: .3px;
}

/* 页头中的按钮 / 导航 / 用户信息 → 白底细边（浅色页头下） */
header .nav-btn, .header .nav-btn, .page-header .nav-btn,
header .btn, .header .btn,
header .logout-btn, .header .logout-btn, .page-header .logout-btn {
  display: inline-block;
  background: #fff !important;
  color: var(--sub) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 14px !important;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
header .nav-btn:hover, .header .nav-btn:hover, .page-header .nav-btn:hover,
header .btn:hover, .header .btn:hover,
header .logout-btn:hover, .header .logout-btn:hover, .page-header .logout-btn:hover {
  background: #fff !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* 页头用户区（.user-info）：全站统一组件 · 唯一真源。
   形态 / 内边距 / 圆角 / 间距 / 字号 / 图标 / 退出口径 全站一致。
   各页面不得再自带 .user-info 定位样式（历史页面里的 absolute top:20px right:20px、
   float:right、flex-wrap 等写法会被这里收敛，避免"有的页顶出边框、有的页跑到标题下方"）。 */
header .user-info,
.header .user-info,
.page-header .user-info {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--sub) !important;
  font-size: .88rem !important;
  line-height: 1.4 !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
  max-width: 100%;
}
header .user-info > i,
.header .user-info > i,
.page-header .user-info > i { color: var(--accent) !important; }
header .user-info strong,
.header .user-info strong,
.page-header .user-info strong { color: var(--ink) !important; }

/* 块级页头（.header：view_data / analysis / admin）→ 用户区固定右上角，
   右/上偏移与页头内边距(20px 26px)对齐，不再各页写一套绝对定位或浮动 */
.header .user-info {
  position: absolute !important;
  top: 20px !important;
  right: 26px !important;
  left: auto !important;
  bottom: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* 用户区内的退出按钮：紧凑口径，保证卡片不高出页头内容而压到页头下边框 */
header .user-info .logout-btn,
.header .user-info .logout-btn,
.page-header .user-info .logout-btn {
  padding: 5px 12px !important;
  font-size: .84rem !important;
  line-height: 1.2 !important;
}

/* 页头内的下拉（如 dashboard 自动刷新） */
header select, .header select {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 10px !important;
  font-family: var(--font);
}
header select option, .header select option { color: var(--ink); }
header label, header span, .header span { color: var(--sub); }

/* 页头内的 <button>（dashboard「刷新数据」；页面原样式为半透明白，浅色页头下不可见） */
header button, .header button, #refreshBtn {
  background: #fff !important;
  color: var(--sub) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
header button:hover, .header button:hover, #refreshBtn:hover {
  background: #fff !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* 页头内的 inline 链接按钮（dashboard「业绩分析 / 组织架构」为 inline style，需强制覆盖） */
header .filter-controls a, .header .filter-controls a,
.filter-controls a[href] {
  background: #fff !important;
  color: var(--sub) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.filter-controls a[href]:hover {
  background: #fff !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ---------------------------------------------------------------------------
   4. 页脚（统一组件 · 全站唯一真源）
   白底卡片 + 三栏导航 + 细线版权区。
   注意：各页面不得再自带页脚样式（历史页面里的 footer/.footer-* 规则已删除），
        否则会与本节打架，造成"有的页白卡、有的页空心框"这类不一致。
   --------------------------------------------------------------------------- */
footer, .site-footer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-xl);
  margin-bottom: 20px;
  color: var(--sub);
  font-size: 14px;
  line-height: 1.75;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 20px;
}
.footer-section, .footer-col { text-align: center; margin-bottom: 0; }
.footer-title {
  color: var(--sub) !important;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-50);
  letter-spacing: .4px;
  text-align: center;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--soft);
  color: var(--sub);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 500;
  transition: background .2s ease, color .2s ease;
}
.footer-link i { width: 18px; text-align: center; }
.footer-link:hover {
  /* 悬停 = 暖橙文字 + 浅橙底（对比度足够，不会出现"橙底橙字"隐形） */
  color: var(--primary) !important;
  background: var(--primary-50);
  text-decoration: none;
}
.copyright {
  color: var(--muted) !important;
  border-top: 1px solid var(--line);
  margin: 20px 0 0;
  padding: 16px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  text-align: center;
}
.copyright p { margin: 0; }
.copyright a { color: var(--muted) !important; text-decoration: none; }
.copyright a:hover { color: var(--primary) !important; text-decoration: underline; }

/* 窄容器页脚（如"修改密码"这类 480px 卡片页）：三栏导航放不下会竖着堆成一大块，
   加 .footer-compact 改为单行文字链接（点号分隔）+ 版权区 */
.footer-compact { padding: 18px 20px; }
.footer-compact .footer-nav { display: none; }
.footer-compact .footer-links {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
}
.footer-compact .footer-link {
  padding: 0;
  background: transparent;
  font-size: .8rem;
}
.footer-compact .footer-link i { display: none; }
.footer-compact .footer-link + .footer-link::before {
  content: "·";
  padding: 0 8px;
  color: var(--muted);
}
.footer-compact .copyright { margin-top: 12px; padding-top: 12px; }

@media (max-width: 768px) {
  .footer-nav { grid-template-columns: 1fr; }
}

/* 登录页页脚 */
.login-footer { color: var(--muted) !important; font-size: .78rem; line-height: 1.8; }
.login-footer a { color: var(--muted) !important; }
.login-footer a:hover { color: var(--primary) !important; }

/* ---------------------------------------------------------------------------
   5. 卡片（统一：白底 + 细边 + 圆角 + 轻阴影；关键卡片带橙色顶缘）
   --------------------------------------------------------------------------- */
.card, .chart-card, .table-card, .form-container, .search-container,
.filter-panel, .stat-card, .company-card, .dept-pk-card,
.company-performance-card, .modal, .dept-section, .companies-grid > div {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card, .chart-card, .table-card, .form-container, .filter-panel {
  padding: var(--space-lg) !important;
}
.search-container { padding: var(--space-lg) !important; }

/* 统计/概览类卡片：顶部 4px 橙色装饰条（呼应 group 页） */
.stat-card, .dept-pk-card, .company-performance-card, .company-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before, .dept-pk-card::before,
.company-performance-card::before, .company-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
}
.stat-card { text-align: center; padding: 22px 18px !important; }

/* 卡片头 */
.card-header, .chart-card-header, .dept-header, .company-header {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  background: transparent !important;
}
.card-title, .chart-card-title, .dept-name, .company-name {
  color: var(--ink) !important;
  font-weight: 700;
  letter-spacing: .3px;
}
.card-icon, .chart-card-title i { color: var(--primary) !important; }

/* 章节标题：2px 下边框（group 页版式；卡片/弹窗/登录卡内的标题不受影响） */
h2:not(header h2):not(.header h2):not(.page-header h2):not(.header-top h2):not(.login-card h2):not(.modal h2):not(.card h2):not(.message-box h2) {
  border-bottom: 2px solid var(--line);
  padding-bottom: 8px;
}
.filter-title, .section-title, .page-title {
  color: var(--ink) !important;
  font-weight: 700;
  letter-spacing: .3px;
}
.page-title { border-bottom: 2px solid var(--line); padding-bottom: 10px; }

/* ---------------------------------------------------------------------------
   6. 统计数值
   --------------------------------------------------------------------------- */
.stat-label { color: var(--muted) !important; font-size: 12.5px; letter-spacing: .4px; }
.stat-value { color: var(--ink) !important; font-weight: 700; font-size: 1.9rem; }
.stat-change.positive, .positive { color: var(--success) !important; }
.stat-change.negative, .negative { color: var(--danger) !important; }
.total-label { color: var(--muted) !important; font-size: 12px; }
.total-value { color: var(--accent-dark) !important; font-weight: 700; }

/* ---------------------------------------------------------------------------
   7. 表格（统一：软色表头 + 细线 + 斑马纹 + 悬停）
   --------------------------------------------------------------------------- */
.table-wrapper, .table-card { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  border: 1px solid var(--line) !important;
  padding: 9px 12px !important;
  text-align: left;
  vertical-align: middle;
}
thead th, th {
  background: var(--soft) !important;
  color: var(--ink) !important;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .2px;
}
tbody tr:nth-child(even) { background: #fbfbfc; }
tbody tr:hover { background: var(--primary-50) !important; }
tbody tr { transition: background .15s ease; }
td .amount, .result-value { font-weight: 600; }

/* ---------------------------------------------------------------------------
   8. 表单控件（统一 1px 细边、8px 圆角、暖橙聚焦环）
   --------------------------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="email"], input[type="tel"],
select, textarea,
.search-input, .search-select, .filter-select, .filter-input, .target-input {
  font-family: var(--font) !important;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 12px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus,
.search-input:focus, .search-select:focus, .filter-select:focus,
.filter-input:focus, .target-input:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(232,124,48,.12) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
label, .search-label, .filter-label { color: var(--sub) !important; font-weight: 600; font-size: .85rem; }
.required::after { content: " *"; color: var(--danger); font-weight: 700; }

/* ---------------------------------------------------------------------------
   9. 按钮
   --------------------------------------------------------------------------- */
.btn, .submit-btn, .query-btn, .search-btn, .back-link {
  display: inline-block;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-primary, .submit-btn, .query-btn, .search-btn {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(232,124,48,.22);
}
.btn-primary:hover, .submit-btn:hover, .query-btn:hover, .search-btn:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 4px 12px rgba(232,124,48,.28);
  transform: translateY(-1px);
}
.btn-secondary, .back-link {
  background: #fff !important;
  color: var(--sub) !important;
  border: 1px solid var(--line-strong) !important;
}
.btn-secondary:hover, .back-link:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-danger {
  background: #fff !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger-50) !important;
}
.btn-danger:hover {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}
.btn-sm { padding: 6px 12px; font-size: .82rem; }

/* 内容区导航按钮（如 analysis 底部、view_data 操作栏） */
.nav-btn {
  display: inline-block;
  margin: 5px;
  padding: 10px 18px;
  background: var(--primary);
  color: #fff !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, transform .12s ease;
}
.nav-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.action-bar { margin-bottom: var(--space-lg); display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------------------
   10. 徽章 / 胶囊 / 标签
   --------------------------------------------------------------------------- */
.role-badge, .current-user-tag, .completion-badge, .pct,
.total-label.badge, .hint {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2px;
}
.role-badge, .current-user-tag { background: var(--soft); color: var(--sub); }
.role-super_admin { background: var(--accent-50); color: var(--accent-dark); }
.completion-badge { background: var(--success-50); color: var(--success-dark); }
.completion-badge.low { background: var(--danger-50); color: var(--danger-dark); }

/* 时间/周期切换 chips */
.time-filter .time-option {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--sub);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-weight: 600;
  font-size: .84rem;
  transition: all .18s ease;
}
.time-filter .time-option:hover { border-color: var(--primary); color: var(--primary); }
.time-filter .time-option.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(232,124,48,.25);
}

/* 排行榜按钮/名次 */
.ranking-btn {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--sub);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-weight: 600;
  font-size: .84rem;
}
.ranking-btn.active, .ranking-btn.is-active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ---------------------------------------------------------------------------
   11. 提示 / 消息条（统一为左侧 4px 强调边的柔色块）
   --------------------------------------------------------------------------- */
.alert, .error, .success-message, .error-message, .db-error, .search-error,
.permission-notice, .no-access-message, .message, .no-data {
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  font-size: .88rem;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.alert-error, .error, .search-error, .db-error, .error-message, .no-access-message {
  background: var(--danger-50) !important;
  color: var(--danger-dark) !important;
  border-left: 4px solid var(--danger) !important;
}
.alert-success, .success-message {
  background: var(--success-50) !important;
  color: var(--success-dark) !important;
  border-left: 4px solid var(--success) !important;
}
.permission-notice, .message, .no-data {
  background: var(--info-50) !important;
  color: var(--primary-dark) !important;
  border-left: 4px solid var(--info) !important;
}
.error h3, .alert h3 { margin: 0 0 6px; font-size: 1rem; }
.error p, .alert p { margin: 0; }

/* ---------------------------------------------------------------------------
   12. 筛选 / 搜索 / 折叠面板
   --------------------------------------------------------------------------- */
.filter-panel { background: var(--surface) !important; }
.filter-form { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-end; }
.filter-group, .search-group { display: flex; flex-direction: column; gap: 5px; }
.filter-actions, .search-actions { display: flex; gap: var(--space-sm); }

.collapsible {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 14px 18px !important;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease;
}
.collapsible:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.content {
  background: #fff;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

/* 搜索结果条目 */
.result-item {
  border-bottom: 1px solid var(--line) !important;
  padding: var(--space-sm) 0;
}
.search-summary, .result-header {
  background: var(--soft) !important;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--sub);
  font-size: .88rem;
}

/* ---------------------------------------------------------------------------
   13. 模态框
   --------------------------------------------------------------------------- */
.modal-overlay { background: rgba(16,24,40,.45) !important; backdrop-filter: blur(2px); }
.modal {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--line) !important;
}
.modal-header {
  background: var(--soft) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-header h2, .modal-header h3 { border-bottom: none !important; padding-bottom: 0 !important; }
.modal-footer { border-top: 1px solid var(--line) !important; background: var(--soft); }
.modal-close { color: var(--muted) !important; }
.modal-close:hover { color: var(--danger) !important; }

/* ---------------------------------------------------------------------------
   14. 登录页 —— 白卡 + 顶部暖橙饰条，统一到新系统质感
   --------------------------------------------------------------------------- */
.login-card, .login-wrap .login-card {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--line) !important;
  border-top: 4px solid var(--accent) !important;
}
.login-btn {
  border-radius: var(--radius-sm) !important;
  background: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(232,124,48,.25);
}
.login-btn:hover { background: var(--primary-dark) !important; }
.login-logo { max-width: 200px; height: auto; }
@media (max-width: 480px) { .login-card { padding: 30px 22px !important; } }

/* ---------------------------------------------------------------------------
   15. 图表容器（analysis 页）
   --------------------------------------------------------------------------- */
.chart-wrap { padding: var(--space-md) 0; }
canvas { max-width: 100%; }

/* ---------------------------------------------------------------------------
   16. 打印
   --------------------------------------------------------------------------- */
@media print {
  body { background: #fff !important; font-size: 12px; }
  header, .header, .header-top, .page-header {
    background: #fff !important;
    color: var(--ink) !important;
    border-bottom: 2px solid var(--line) !important;
    box-shadow: none !important;
  }
  header h1, header h2, .header h2, .page-header h1 { color: var(--ink) !important; text-shadow: none; }
  header .nav-btn, .header .nav-btn, .header-top .nav-btn, .filter-controls a[href] {
    color: var(--ink) !important; border-color: var(--line-strong) !important;
    background: #fff !important;
  }
  .card, .chart-card, .table-card, .stat-card, .filter-panel { box-shadow: none !important; }
  footer, .site-footer { display: none !important; }
}

/* ---------------------------------------------------------------------------
   17. 响应式微调（仅收敛间距，不改结构）
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container { padding: 12px; }
  header, .header, .header-top, .page-header {
    padding: 16px 18px !important;
    border-radius: var(--radius-sm) !important;
  }
  header h1, header h2, .header h2, .page-header h1, .header-top h2 { font-size: 1.15rem; }
  .card, .chart-card, .table-card, .form-container, .filter-panel, .search-container {
    padding: var(--space-md) !important;
  }
  .stat-value { font-size: 1.55rem; }

  /* 窄屏：用户区回到文档流（不再悬停右上角），整行居中，避免与标题重叠 */
  header .user-info, .header .user-info, .page-header .user-info {
    flex-wrap: wrap !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .header .user-info {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
  }
}