/* ==========================================================================
   Copyright (c) 2026 Baichuan AI Software. All rights reserved.
   百川设计层 v1 · 依据 docs/design.md
   语义令牌 + 浅色/深色双主题 + 组件级对齐
   在 app.css 之后加载：旧 --bc-* 变量按主题映射为别名，全站页面/弹窗自动继承
   ========================================================================== */

/* ---------- 主题令牌：浅色（默认） ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* 背景/表面层级 */
  --color-bg: #f5f7fb;
  --color-bg-subtle: #f0f3f8;
  --color-sidebar: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #f7f9fc;
  --color-surface-hover: #f3f6fa;
  --color-border: #e0e6f0;
  --color-border-strong: #d3dce9;
  --color-divider: #e7ebf2;

  /* 文字层级 */
  --color-text: #15223a;
  --color-text-secondary: #526077;
  --color-text-muted: #738198;
  --color-text-disabled: #a7b0bf;

  /* 品牌/语义 */
  --color-brand: #5684ff;
  --color-brand-hover: #4775ec;
  --color-brand-soft: #e5edff;
  --color-brand-purple: #765cf4;
  --color-accent-cyan: #47d4c2;
  --color-success: #249b72;
  --color-success-soft: #e6f7f1;
  --color-warning: #c77a10;
  --color-warning-soft: #fff4df;
  --color-danger: #d94750;
  --color-danger-soft: #fff0f1;
  --color-neutral-soft: #edf1f6;

  /* 遮罩与阴影 */
  --scrim: rgb(19 31 54 / 25%);
  --shadow-floating: 0 12px 36px rgb(42 60 96 / 12%);
  --shadow-subtle: 0 5px 18px rgb(50 67 101 / 5%);
  --ring: 0 0 0 3px rgb(86 132 255 / 20%);

  /* ===== 旧 --bc-* 别名（主题化映射，兼容既有模板内联变量） ===== */
  --bc-canvas: var(--color-bg);
  --bc-surface-1: var(--color-surface);
  --bc-surface-2: var(--color-surface-raised);
  --bc-surface-3: var(--color-surface-hover);
  --bc-surface-4: var(--color-bg-subtle);
  --bc-hairline: var(--color-divider);
  --bc-hairline-strong: var(--color-border);
  --bc-hairline-tertiary: var(--color-border-strong);

  --bc-primary: var(--color-brand);
  --bc-primary-hover: var(--color-brand-hover);
  --bc-primary-focus: #3d63d6;
  --bc-on-primary: #ffffff;
  --bc-primary-subtle: var(--color-brand-soft);

  --bc-ink: var(--color-text);
  --bc-ink-muted: var(--color-text-secondary);
  --bc-ink-subtle: var(--color-text-muted);
  --bc-ink-tertiary: var(--color-text-disabled);

  --bc-success: var(--color-success);
  --bc-success-subtle: var(--color-success-soft);
  --bc-warning: var(--color-warning);
  --bc-warning-subtle: var(--color-warning-soft);
  --bc-danger: var(--color-danger);
  --bc-danger-subtle: var(--color-danger-soft);
  --bc-info: var(--color-accent-cyan);
  --bc-info-subtle: #e0f5f2;
  --bc-secondary: #9aa4b2;
  --bc-secondary-subtle: var(--color-neutral-soft);
  --bc-requirement: var(--color-brand-purple);
  --bc-requirement-subtle: #efeafd;

  --bc-due-soon-border: var(--color-warning);
  --bc-overdue-border: var(--color-danger);
  --bc-block-border: var(--color-danger);
}

/* ---------- 主题令牌：深色 ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #080b12;
  --color-bg-subtle: #0a0e17;
  --color-sidebar: #0a0e17;
  --color-surface: #0e131d;
  --color-surface-raised: #111722;
  --color-surface-hover: #151c28;
  --color-border: #222b3d;
  --color-border-strong: #2b354b;
  --color-divider: #1d2535;

  --color-text: #e8edf7;
  --color-text-secondary: #aeb9ca;
  --color-text-muted: #7f8ca2;
  --color-text-disabled: #566277;

  --color-brand: #5684ff;
  --color-brand-hover: #6b93ff;
  --color-brand-soft: rgb(86 132 255 / 15%);
  --color-brand-purple: #765cf4;
  --color-accent-cyan: #47d4c2;
  --color-success: #52d1a6;
  --color-success-soft: rgb(35 184 132 / 12%);
  --color-warning: #ffc05d;
  --color-warning-soft: rgb(231 155 45 / 12%);
  --color-danger: #ff7078;
  --color-danger-soft: rgb(230 69 80 / 12%);
  --color-neutral-soft: #1c2433;

  --scrim: rgb(0 0 0 / 55%);
  --shadow-floating: 0 20px 50px rgb(0 0 0 / 30%);
  --shadow-subtle: none;
  --ring: 0 0 0 3px rgb(86 132 255 / 28%);

  --bc-canvas: var(--color-bg);
  --bc-surface-1: var(--color-surface);
  --bc-surface-2: var(--color-surface-raised);
  --bc-surface-3: var(--color-surface-hover);
  --bc-surface-4: var(--color-bg-subtle);
  --bc-hairline: var(--color-divider);
  --bc-hairline-strong: var(--color-border);
  --bc-hairline-tertiary: var(--color-border-strong);

  --bc-primary: var(--color-brand);
  --bc-primary-hover: var(--color-brand-hover);
  --bc-primary-focus: #7ea0ff;
  --bc-on-primary: #ffffff;
  --bc-primary-subtle: var(--color-brand-soft);

  --bc-ink: var(--color-text);
  --bc-ink-muted: var(--color-text-secondary);
  --bc-ink-subtle: var(--color-text-muted);
  --bc-ink-tertiary: var(--color-text-disabled);

  --bc-success: var(--color-success);
  --bc-success-subtle: var(--color-success-soft);
  --bc-warning: var(--color-warning);
  --bc-warning-subtle: var(--color-warning-soft);
  --bc-danger: var(--color-danger);
  --bc-danger-subtle: var(--color-danger-soft);
  --bc-info: var(--color-accent-cyan);
  --bc-info-subtle: rgb(71 212 194 / 14%);
  --bc-secondary: #9aa4b2;
  --bc-secondary-subtle: var(--color-neutral-soft);
  --bc-requirement: var(--color-brand-purple);
  --bc-requirement-subtle: rgb(118 92 244 / 16%);

  --bc-due-soon-border: var(--color-warning);
  --bc-overdue-border: var(--color-danger);
  --bc-block-border: var(--color-danger);
}

/* ---------- 全局基础 ---------- */
html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { font-size: 14px; line-height: 1.6; }
a { color: var(--color-brand); transition: color 0.15s ease; }
a:hover { color: var(--color-brand-hover); }
::selection { background: var(--color-brand); color: #fff; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-disabled); }

/* Bootstrap 语义变量随主题切换 */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-brand);
  --bs-link-hover-color: var(--color-brand-hover);
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-color: var(--color-text-muted);
}

/* ---------- 应用外壳（base.html） ---------- */
.app-shell { min-height: 100dvh; }

.top-nav {
  height: 60px;
  background: var(--color-sidebar);
  border-bottom: 1px solid var(--color-border);
  padding: 0 24px;
}
.top-nav .brand { font-size: 20px; font-weight: 700; color: var(--color-text-secondary); gap: 9px; align-items: baseline; }
.top-nav .brand .brand-badge {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-disabled);
  letter-spacing: 0.3px;
}
.top-nav .brand .logo-mark {
  width: 26px; height: 26px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-purple) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgb(86 132 255 / 35%);
}
.top-nav .global-search { max-width: 460px; }
.top-nav .user-chip:hover { background: var(--color-surface-hover); }

.left-sidenav {
  width: 236px;
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  padding: 16px 10px;
}
.left-sidenav .nav-section-title {
  color: var(--color-text-disabled);
  letter-spacing: 0.6px;
  padding: 16px 12px 8px;
}
.left-sidenav .nav-item-link {
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  border-left: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.left-sidenav .nav-item-link:hover { background: var(--color-surface-hover); color: var(--color-text); }
.left-sidenav .nav-item-link.active {
  background: var(--color-brand-soft);
  border-left-color: var(--color-brand);
  color: var(--color-brand);
  font-weight: 600;
}
.left-sidenav .nav-item-link.active .nav-icon { opacity: 1; }

.main-content { padding: 24px 28px; }
.breadcrumb-bar { height: 32px; color: var(--color-text-muted); }
.page-header { margin: 18px 0 22px; }
.page-header h1 {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.page-header .subtitle { color: var(--color-text-muted); }
.app-footer { color: var(--color-text-disabled); border-top: 1px solid var(--color-divider); }

/* ---------- 卡片与面板 ---------- */
.card-surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-subtle);
  color: var(--color-text);
  padding: 20px;
}
.card-surface .card-title { color: var(--color-text); font-weight: 650; }
.card-hover:hover { background: var(--color-surface-hover); }
.card-list-row {
  background: var(--color-surface);
  border-radius: 9px;
  border-color: var(--color-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.card-list-row:hover { background: var(--color-surface-hover); }
.card-workbench-metric { border-radius: 12px; }
.card-workbench-metric .metric-label { color: var(--color-text-muted); }
.card-workbench-metric .metric-value { color: var(--color-text); font-weight: 750; }

/* ---------- 按钮 ---------- */
.btn {
  font-size: 13px;
  font-weight: 550;
  border-radius: 9px;
  padding: 7px 15px;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.btn-sm { border-radius: 8px; padding: 5px 11px; }
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: linear-gradient(135deg, var(--color-brand), #6d7cff 60%, var(--color-brand-purple));
  border: none;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: linear-gradient(135deg, var(--color-brand-hover), var(--color-brand-purple));
  color: #fff;
}
.btn-primary:focus-visible { box-shadow: var(--ring); }

.btn-secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}
.btn-secondary:hover { background: var(--color-surface-hover); color: var(--color-text); }

.btn-ghost { color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }

.btn-success { background: var(--color-success); border: none; color: #fff; }
.btn-success:hover { filter: brightness(0.96); color: #fff; }
.btn-warning { background: var(--color-warning); border: none; color: #fff; }
.btn-warning:hover { filter: brightness(0.96); color: #fff; }
.btn-danger { background: var(--color-danger); border: none; color: #fff; }
.btn-danger:hover { filter: brightness(0.96); color: #fff; }

/* ---------- 表单 ---------- */
.form-control, .form-select {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text) !important;
  border-radius: 8px !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--color-surface) !important;
  border-color: var(--color-brand) !important;
  box-shadow: var(--ring) !important;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: var(--color-bg-subtle) !important;
  color: var(--color-text-disabled) !important;
}
.form-control::placeholder { color: var(--color-text-disabled); }
.form-label { color: var(--color-text-secondary); font-size: 13px; }
.input-group-text {
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  border-color: var(--color-border-strong);
}
.form-text { color: var(--color-text-disabled); }

/* ---------- 表格 ---------- */
.table { color: var(--color-text); }
.table > :not(caption) > * > * {
  background-color: var(--color-surface);
  border-bottom-color: var(--color-divider);
  padding: 11px 14px;
}
.table > thead > * > * {
  background-color: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--color-border);
}
.table-hover > tbody > tr:hover > * { background-color: var(--color-surface-hover) !important; }
.table > :not(thead) > *:first-child { border-top: 1px solid var(--color-divider); }
.table td, .table th { vertical-align: middle; }

/* ---------- 状态标签：柔和底 + 彩色字 ---------- */
.badge-status {
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge-primary { background: var(--color-brand-soft); color: var(--color-brand); border-color: transparent; }
.badge-success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.badge-info { background: var(--color-info-subtle, #e0f5f2); color: #0e9c8c; border-color: transparent; }
.badge-secondary { background: var(--color-neutral-soft); color: var(--color-text-muted); border-color: var(--color-border); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.badge-requirement { background: var(--color-requirement-subtle); color: var(--color-requirement); border-color: transparent; }

/* 价值分/负荷标签 */
.badge-value-5, .badge-value-4, .badge-value-3, .badge-value-2, .badge-value-1,
.badge-workload-ok, .badge-workload-warn, .badge-workload-over {
  border-color: transparent;
}
.badge-value-5, .badge-value-4 { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-value-3 { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-value-2, .badge-value-1 { background: var(--color-neutral-soft); color: var(--color-text-muted); }
.badge-workload-ok { background: var(--color-success-soft); color: var(--color-success); }
.badge-workload-warn { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-workload-over { background: var(--color-danger-soft); color: var(--color-danger); }

/* 引用 Bootstrap 语义色徽章（模板中使用 badge bg-* 与 text-*-emphasis） */
[class*="bg-danger-subtle"], [class*="bg-warning-subtle"], [class*="bg-success-subtle"], [class*="bg-info-subtle"] {
  border: 1px solid transparent;
}

/* ---------- 进度条 ---------- */
.progress { background: var(--color-neutral-soft); height: 6px; border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--color-brand), var(--color-accent-cyan)); }
.progress-label { color: var(--color-text-muted); }

/* ---------- 弹窗 ---------- */
.modal-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-floating);
  color: var(--color-text);
}
.modal-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  border-radius: 16px 16px 0 0;
  padding: 16px 20px;
}
.modal-header .modal-title { color: var(--color-text); font-size: 16px; }
.modal-footer { border-top: 1px solid var(--color-divider); }
.modal-backdrop.show { background: var(--scrim); opacity: 1; }

/* ---------- 下拉/列表/导航标签/分页 ---------- */
.dropdown-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-floating);
}
.dropdown-item { color: var(--color-text-secondary); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-surface-hover); color: var(--color-text); }
.dropdown-divider { border-color: var(--color-divider); }

.nav-tabs { border-bottom: 1px solid var(--color-divider); }
.nav-tabs .nav-link { color: var(--color-text-muted); }
.nav-tabs .nav-link:hover { color: var(--color-text); border-bottom-color: var(--color-border-strong); }
.nav-tabs .nav-link.active { color: var(--color-brand); border-bottom-color: var(--color-brand); }

.pagination .page-link {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.pagination .page-link:hover { background: var(--color-surface-hover); color: var(--color-text); }
.pagination .page-item.active .page-link {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}
.pagination .page-item.disabled .page-link { background: var(--color-bg-subtle); color: var(--color-text-disabled); }

.list-group-item { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.list-group-item-action:hover { background: var(--color-surface-hover); }

/* ---------- flash 与 alert ---------- */
#flashWrap .alert { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); border-radius: 10px; box-shadow: var(--shadow-subtle); }

/* ---------- 日历 ---------- */
.calendar-cell { border-radius: 9px; border-color: var(--color-border); background: var(--color-surface); }
.calendar-cell.cell-submitted { background: var(--color-success-soft); }
.calendar-cell.cell-missed { background: var(--color-danger-soft); }
.calendar-cell.cell-weekend, .calendar-cell.cell-holiday { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.calendar-cell.cell-today { border-color: var(--color-brand); box-shadow: var(--ring); }

/* ---------- 头像 ---------- */
.avatar {
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 600;
  border-radius: 50%;
}
/* 自定义图片头像：圆形裁剪 */
.avatar-photo { overflow: hidden; background: var(--color-bg-subtle); }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 关联人员 chips / 评论等通用微调 ---------- */
.member-chip {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.member-chip-avatar { background: var(--color-neutral-soft); color: var(--color-text-secondary); }
.member-chip:has(.member-chip-input:checked) {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.member-chip:has(.member-chip-input:checked) .member-chip-avatar { background: var(--color-brand); color: #fff; }
.member-tag {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.comment-system { background: var(--color-surface-raised); border-left-color: var(--color-brand); color: var(--color-text-secondary); }
.comment-img, .comment-img-preview img { border-color: var(--color-border); }
.comment-img-viewer { background: rgb(5 8 12 / 90%); }

/* ---------- 工具与可访问性 ---------- */
.hover-surface:hover { background: var(--color-surface-hover); }
.hr-thin { border-top-color: var(--color-divider); }
.text-ink { color: var(--color-text) !important; }
.text-ink-muted { color: var(--color-text-secondary) !important; }
.text-ink-subtle { color: var(--color-text-muted) !important; }
.text-ink-tertiary { color: var(--color-text-disabled) !important; }
.bg-canvas { background-color: var(--color-bg) !important; }
.bg-surface-1 { background-color: var(--color-surface) !important; }
.bg-surface-2 { background-color: var(--color-surface-raised) !important; }
.bg-surface-3 { background-color: var(--color-surface-hover) !important; }
.border-hairline { border-color: var(--color-divider) !important; }
.border-hairline-strong { border-color: var(--color-border) !important; }

/* 键盘焦点环（所有交互元素） */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.dropdown-item:focus-visible, .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 登录页 ---------- */
.auth-shell { background: var(--color-bg); }
.auth-brand { border-right: 1px solid var(--color-divider); background: var(--color-bg); }
.auth-form-side { background: var(--color-bg); }
.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-subtle);
}
@media (max-width: 767.98px) {
  .left-sidenav { top: 60px; }
  .sidenav-toggle { display: inline-flex; }
}