/* ============================================================
 * REUN Dashboard Overrides v04 — cockpit shell 後 cleanup 版
 * 載入順序:tokens-v01 → cockpit-shell → 本檔(本檔最後,!important 收尾)
 * 移除過期的 .topnav / .tn-* / .m-* drawer 規則(HTML 已用 .sidebar / .main)
 * ============================================================ */

/* ===== 0. body 與字體基底 ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  font-feature-settings: 'tnum' 1, 'cv11' 1 !important;
  -webkit-font-smoothing: antialiased !important;
  background: var(--reun-bg) !important;
  color: var(--reun-text) !important;
}
.stat-val, .num, td.num, .bar-val, [class*="amount"] {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

/* ===== 1. Cards 細修(cockpit panel 質感)===== */
.card {
  background: var(--reun-surface) !important;
  border: none;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 120ms ease, transform 120ms ease !important;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}
.card h3, .card h4, .card .title {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  /* color: not forced — inline style color passes through */
  color: var(--reun-text);
  margin-bottom: 12px !important;
}
.muted {
  color: var(--reun-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}

/* ===== 2. Grids spacing ===== */
.grid4 { gap: 12px !important; margin-bottom: 16px !important; }
.grid2 { gap: 12px !important; margin-bottom: 16px !important; }
.grid1 { margin-bottom: 16px !important; }
.hero-grid { gap: 12px !important; margin-bottom: 16px !important; }

/* ===== 3. KPI / stat — LIFF perf-hero 風 ===== */
.stat-val {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 2px !important;
  font-family: inherit !important;
  /* color: intentionally NOT set — inline colors (green/red/blue) must pass through */
  line-height: 1.1 !important;
}
.stat-sub {
  font-size: 11px !important;
  color: var(--reun-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}

/* hero 大數字放更大 */
.hero-grid > .card:first-child {
  background: linear-gradient(135deg, var(--reun-tint-soft) 0%, var(--reun-surface) 60%) !important;
  border: 0.5px solid var(--reun-tint-ring) !important;
  border-radius: var(--radius-xl, 16px) !important;
  padding: 28px !important;
}
.hero-grid > .card:first-child .stat-val {
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  margin: 6px 0 8px !important;
}

/* ===== 4. 進度條 ===== */
.bar-track, .prog-track {
  background: var(--reun-surface-2) !important;
  border-radius: 999px !important;
  height: 6px !important;
}
.bar-fill, .prog-fill {
  background: var(--reun-tint) !important;
  border-radius: 999px !important;
  height: 100% !important;
}

/* ===== 5. Tables ===== */
table { font-size: 13px !important; }
th {
  background: var(--reun-surface) !important;
  border-bottom: 1px solid var(--reun-border) !important;
  color: var(--reun-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 10px 14px !important;
  backdrop-filter: blur(8px) !important;
}
td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--reun-border) !important;
  /* color intentionally NOT set — inline td colors (green/red growth) must pass through */
}
tr:hover td { background: var(--reun-tint-soft) !important; }
tr:last-child td { border-bottom: none !important; }

/* ===== 6. Forms ===== */
.sinput, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  background: var(--reun-surface) !important;
  border: 1px solid var(--reun-border) !important;
  border-radius: var(--radius-md, 10px) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--reun-text) !important;
  font-family: inherit !important;
  transition: border 120ms ease, box-shadow 120ms ease !important;
}
.sinput:focus, input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--reun-tint) !important;
  box-shadow: 0 0 0 3px var(--reun-tint-ring) !important;
}

/* ===== 7. Buttons ===== */
.btn-o, button[type="submit"], .btn-primary {
  background: var(--reun-tint) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md, 10px) !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: opacity 120ms ease, transform 120ms ease !important;
  box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18) !important;
}
.btn-o:hover, button[type="submit"]:hover, .btn-primary:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
}

/* ===== 8. Alert banner — db-dashboard 內 inline rgba() 樣式對應 ===== */
[style*="rgba(239,68,68"], [style*="rgba(239, 68, 68"],
[style*="rgba(255,59,48"], [style*="rgba(255, 59, 48"] {
  background: var(--reun-err-soft) !important;
  border: 0.5px solid rgba(255, 59, 48, 0.25) !important;
  border-radius: var(--radius-md, 10px) !important;
}
[style*="rgba(234,179,8"], [style*="rgba(234, 179, 8"],
[style*="rgba(255,149,0"], [style*="rgba(255, 149, 0"],
[style*="rgba(245,158,11"], [style*="rgba(245, 158, 11"] {
  background: var(--reun-warn-soft) !important;
  border: 0.5px solid rgba(255, 149, 0, 0.25) !important;
  border-radius: var(--radius-md, 10px) !important;
}
[style*="rgba(34,197,94"], [style*="rgba(34, 197, 94"],
[style*="rgba(52,199,89"], [style*="rgba(52, 199, 89"] {
  background: var(--reun-ok-soft) !important;
  border: 0.5px solid rgba(52, 199, 89, 0.25) !important;
  border-radius: var(--radius-md, 10px) !important;
}
[style*="rgba(59,130,246"], [style*="rgba(59, 130, 246"] {
  background: var(--reun-tint-soft) !important;
  border: 0.5px solid var(--reun-tint-ring) !important;
  border-radius: var(--radius-md, 10px) !important;
}

/* ===== 9. Section view padding(cockpit shell .view 沒 padding,加上)===== */
.view {
  padding: 24px 28px 48px !important;
  max-width: 1240px !important;
}
@media (max-width: 768px) {
  .view { padding: 16px !important; }
}

/* ===== 10. .box(login/register card)===== */
.box {
  background: var(--reun-surface) !important;
  border: 0.5px solid var(--reun-border) !important;
  border-radius: var(--radius-xl, 16px) !important;
  padding: 44px 36px !important;
  box-shadow: var(--shadow-md) !important;
}
.box h1 {
  color: var(--reun-text) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 6px !important;
}
.box .sub {
  color: var(--reun-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 32px !important;
}
.box input { background: var(--reun-bg) !important; margin-bottom: 12px !important; }
.box button { margin-top: 12px !important; height: 44px !important; font-size: 14px !important; }

/* ===== 11. h1/h2/h3 字型階層 ===== */
h1 { font-size: 26px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; margin: 0 0 12px !important; }
h2 { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin: 0 0 10px !important; }
h3 { font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.4 !important; margin: 0 0 8px !important; }

/* ===== 12. 內聯 link ===== */
a:not(.nav-item):not(.tn-link):not(.btn-o):not(.dd-item) { color: var(--reun-tint) !important; }

/* ===== 13. Sidebar nav-item icon span ===== */
.sidebar .nav-item span[style*="display:inline-block"] {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

/* ===== 14. focus visible ===== */
:focus-visible {
  outline: 2px solid var(--reun-tint) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm, 6px) !important;
}

/* ===== 15. selection ===== */
::selection { background: var(--reun-tint-soft) !important; color: var(--reun-text) !important; }

/* ===== 16. dtable scroll wrap ===== */
.dtable {
  background: var(--reun-surface) !important;
  border-radius: var(--radius-lg, 12px) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ===== 17. code / pre ===== */
code, .mono {
  font-family: "SF Mono", ui-monospace, "Fira Code", monospace !important;
  font-size: 12px !important;
  background: var(--reun-surface-2) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0 !important;
}

/* ===== 18. theme-btn(top bar 內小按鈕)===== */
.theme-btn {
  width: 30px !important; height: 30px !important;
  border: 1px solid var(--reun-border) !important;
  background: transparent !important;
  border-radius: var(--radius-sm, 6px) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.theme-btn:hover { background: var(--reun-surface-2) !important; }

/* ===== 19. 移動裝置 RWD ===== */
@media (max-width: 768px) {
  .grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid2 { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .stat-val { font-size: 24px !important; }
  .hero-grid > .card:first-child .stat-val { font-size: 32px !important; }
  .view { padding: 16px !important; }
}

/* ============================================================
 * Part D — db-dashboard 內容元件強制變 cockpit panel/kpi 視覺
 * ============================================================ */

/* card 強制 cockpit panel 質感 */
.card {
  padding: 24px !important;
  margin-bottom: 20px !important;
}

.card > h3:first-child,
.card > h4:first-child,
.card > .title:first-child {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 16px !important;
  /* color: not forced — blue inline style must pass through */
  color: var(--reun-text);
}

.card > h3.muted:first-child,
.card > .muted:first-child {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--reun-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 12px !important;
}

/* stat-val 強制 cockpit kpi-value 級數 */
.stat-val {
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 4px 0 6px !important;
}

.hero-grid > .card:first-child .stat-val {
  font-size: 40px !important;
  letter-spacing: -0.04em !important;
}

.stat-sub {
  font-size: 11px !important;
  color: var(--reun-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* grid 緊湊 */
.grid4, .grid2, .hero-grid { gap: 10px !important; margin-bottom: 14px !important; }
.grid4 > .card, .grid2 > .card, .hero-grid > .card { padding: 18px 20px !important; }

/* 進度條 .bar-row */
.bar-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 6px 0 !important; font-size: 13px !important; }
.bar-label { color: var(--reun-text-2) !important; flex: 0 0 80px !important; }
.bar-track { flex: 1 !important; }
.bar-val { font-weight: 600 !important; color: var(--reun-text) !important; min-width: 60px !important; text-align: right !important; }

/* 警示卡片 padding 收緊 */
[style*="rgba(239,68,68"], [style*="rgba(255,59,48"],
[style*="rgba(234,179,8"], [style*="rgba(255,149,0"], [style*="rgba(245,158,11"],
[style*="rgba(34,197,94"], [style*="rgba(52,199,89"],
[style*="rgba(59,130,246"] {
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* sidebar nav 緊湊 */
.sidebar .nav-item {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
}
.sidebar .nav-section {
  padding: 12px 12px 4px !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
}
.sidebar .footer-info {
  margin-top: auto !important;
  padding: 14px 12px !important;
  font-size: 11px !important;
  color: var(--reun-muted) !important;
  border-top: 1px solid var(--reun-border) !important;
}
.sidebar .footer-info strong {
  color: var(--reun-text) !important;
  font-weight: 600 !important;
}

/* topbar */
.topbar {
  padding: 14px 28px !important;
  background: var(--reun-surface) !important;
  border-bottom: 1px solid var(--reun-border) !important;
  font-size: 12px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.topbar .meta {
  color: var(--reun-text-2) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.pulse-dot {
  display: inline-block !important;
  width: 6px; height: 6px !important;
  background: var(--reun-ok) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px var(--reun-ok-soft) !important;
}

/* ===== Part E — inline style 大字 + mono 字體強制 override ===== */

/* 任何 inline font-family:var(--mono) 強制改 system 字 + tabular-nums */
[style*="font-family:var(--mono)"], [style*="font-family: var(--mono)"] {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* hero 級大字(48px)→ 40px 並用 cockpit letter-spacing */
[style*="font-size:48px"], [style*="font-size: 48px"] {
  font-size: 40px !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}
/* secondary 大字(24px / 32px / 36px)*/
[style*="font-size:36px"][style*="font-weight:700"] {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
[style*="font-size:32px"][style*="font-weight:700"] {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
[style*="font-size:24px"][style*="font-weight:700"] {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
[style*="font-size:28px"][style*="font-weight:700"] {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
[style*="font-size:16px"][style*="font-weight:700"] {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* hero card 內 mini stats(border-top 分隔的)— cockpit hero-mini-stats 風 */
.hero-grid > .card:first-child [style*="border-top"][style*="display:flex"] {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--reun-tint-ring) !important;
}

/* hero 卡片整體加 cockpit gradient + tint border */
.hero-grid > .card:first-child {
  background: linear-gradient(135deg, var(--reun-tint-soft) 0%, var(--reun-surface) 60%) !important;
  border: 0.5px solid var(--reun-tint-ring) !important;
}

/* 毛利率監控 / 風險警示 等 inline style 帶 background 的 sub-card 改 cockpit 風 */
[style*="background:var(--reun-bg)"][style*="border-radius:8px"] {
  background: var(--reun-surface-2) !important;
  padding: 12px !important;
  border: 1px solid var(--reun-border) !important;
}

/* card 內帶 emoji 的 h3.muted 視覺對齊 cockpit section-label */
.card h3.muted {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.card h3.muted > span:last-child {
  font-size: 11px !important;
  color: var(--reun-muted) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

/* 期間 filter pills(inline style 的 <a>)*/
a[href*="mode=today"], a[href*="mode=month"], a[href*="mode=year"], a[href*="mode=all"] {
  padding: 6px 14px !important;
  border-radius: var(--radius-pill, 999px) !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  transition: all 120ms ease !important;
  display: inline-flex !important;
  align-items: center !important;
}
a[href*="mode="][style*="background:var(--reun-tint)"] {
  background: var(--reun-tint) !important;
  color: white !important;
}
a[href*="mode="][style*="background:var(--reun-surface)"] {
  background: transparent !important;
  color: var(--reun-text-2) !important;
  border-color: var(--reun-border) !important;
}
a[href*="mode="]:hover {
  background: var(--reun-surface-2) !important;
  color: var(--reun-text) !important;
}

/* 期間 filter card 內部 layout 收緊 */
.card[style*="display:flex"][style*="align-items:center"] > span:first-child {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--reun-muted) !important;
  font-weight: 600 !important;
}

/* card 內 第一級分隔(border-top + flex)強化 */
[style*="border-top:1px solid var(--border)"], [style*="border-top: 1px solid var(--border)"],
[style*="border-top:1px solid var(--reun-border)"] {
  border-top: 1px solid var(--reun-border) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
}

/* ===== Part F — 表格 cockpit data-table 質感 ===== */

/* table 容器(card 包 table)放大,左右滿版 */
.card > table:only-child,
.card > .dtable:only-child {
  margin: -22px !important;
  width: calc(100% + 44px) !important;
}
.card > table:first-child,
.card > .dtable:first-child {
  margin-top: -22px !important;
  margin-left: -22px !important;
  margin-right: -22px !important;
  width: calc(100% + 44px) !important;
}

/* sticky thead 加 backdrop blur(現代感)*/
table thead, table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}
@supports (backdrop-filter: blur(8px)) {
  table th {
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }
  @media (prefers-color-scheme: dark) {
    table th {
      background: rgba(28, 28, 30, 0.72) !important;
    }
  }
}

/* 表格 row hover 改 cockpit 細邊 highlight */
tbody tr:hover { background: var(--reun-tint-soft) !important; }
tbody tr { transition: background 100ms ease !important; }

/* td.num 確保 tabular-nums + 右對齊 */
td.num, td[class*="amount"], td[class*="price"] {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1 !important;
  letter-spacing: -0.01em !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", system-ui, sans-serif !important;
}

/* 行末細圓角(table 在 card 滿版時最後 row 圓角)*/
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg, 12px) !important; }
tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg, 12px) !important; }

/* search 框與表格之間距 */
form + table, form + .dtable {
  margin-top: 12px !important;
}

/* 篩選按鈕群 */
.search-bar, .filter-bar {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

/* ===== Part G — page-subtitle 細節 ===== */
.page-subtitle .pulse-dot {
  display: inline-block !important;
  width: 6px; height: 6px !important;
  background: var(--reun-ok) !important;
  border-radius: 50% !important;
  margin-right: 4px !important;
}

/* ===== Part H — form 細節 + button 細節 ===== */

/* form 內 input + label 排列(cockpit 用 grid)*/
form .form-row, form > div[style*="margin"][style*="display"] {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

/* form label 文字 */
form label, form > div > span:first-child {
  font-size: 13px !important;
  color: var(--reun-text-2) !important;
  font-weight: 500 !important;
}

/* 表格內 button(刪除 / 編輯)— 圖示按鈕風 */
table button, .dtable button,
table a[href*="action=delete"], table a[href*="action=edit"] {
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--reun-border) !important;
  background: transparent !important;
  color: var(--reun-text-2) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
table button:hover, table a[href*="action="]:hover {
  background: var(--reun-surface-2) !important;
  color: var(--reun-text) !important;
}
table a[href*="action=delete"] {
  color: var(--reun-err) !important;
}
table a[href*="action=delete"]:hover {
  background: var(--reun-err-soft) !important;
  color: var(--reun-err) !important;
  border-color: rgba(255,59,48,.25) !important;
}

/* badge / pill (品牌標籤等) */
[class*="badge"], [class*="pill"], [class*="chip"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-pill, 999px) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* 表格搜尋 + 篩選列 */
form[method="GET"]:not([action="/db/login"]):not([action="/db/register"]) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}
form[method="GET"] input[type="text"], form[method="GET"] input[type="search"] {
  flex: 1 !important;
  min-width: 200px !important;
  max-width: 320px !important;
}
form[method="GET"] select {
  min-width: 120px !important;
}

/* 提交按鈕 cockpit btn-primary */
form button[type="submit"] {
  background: var(--reun-tint) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md, 10px) !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 120ms ease !important;
  box-shadow: 0 1px 2px rgba(0,122,255,.18) !important;
}
form button[type="submit"]:hover { opacity: 0.92 !important; }

/* label tag for status / role */
[style*="background:var(--reun-tint)"][style*="color:#fff"] {
  background: var(--reun-tint) !important;
  color: white !important;
}

/* page-head 大標題 */
.page-head { margin-bottom: 24px !important; }
.page-title {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--reun-text) !important;
  margin: 0 0 6px !important;
}
.page-subtitle {
  font-size: 13px !important;
  color: var(--reun-text-2) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ============================================================
 * Part I — bar-row cockpit 細線 + info-item + 細節補完 v10
 * ============================================================ */

/* bar-row cockpit 細線風 */
.bar-row { display:flex!important; align-items:center!important; gap:12px!important; padding:5px 0!important; font-size:13px!important; }
.bar-label { flex:0 0 120px!important; color:var(--reun-text-2)!important; font-size:12.5px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; }
.bar-track { flex:1!important; height:6px!important; background:var(--reun-surface-2)!important; border-radius:999px!important; overflow:hidden!important; }
.bar-fill { height:100%!important; border-radius:999px!important; transition:width 0.4s ease!important; min-width:4px!important; font-size:0!important; color:transparent!important; padding:0!important; }
.bar-val { flex:0 0 auto!important; min-width:80px!important; text-align:right!important; font-weight:600!important; font-size:12.5px!important; color:var(--reun-text)!important; font-variant-numeric:tabular-nums!important; letter-spacing:-0.01em!important; white-space:nowrap!important; }
.prog-track { height:8px!important; background:var(--reun-surface-2)!important; border-radius:999px!important; overflow:hidden!important; margin:6px 0!important; }
.prog-fill { height:100%!important; border-radius:999px!important; transition:width 0.4s ease!important; font-size:0!important; color:transparent!important; padding:0!important; min-width:4px!important; }

/* .info-item / .info-label */
.info-item { display:flex!important; align-items:baseline!important; gap:12px!important; padding:8px 0!important; border-bottom:1px solid var(--reun-border)!important; font-size:13px!important; }
.info-item:last-child { border-bottom:none!important; }
.info-label { flex:0 0 120px!important; font-size:12px!important; color:var(--reun-muted)!important; font-weight:500!important; letter-spacing:0.02em!important; }

/* page-head bottom border */
.page-head { padding-bottom:20px!important; border-bottom:1px solid var(--reun-border)!important; margin-bottom:20px!important; }

/* empty state cards */
.card[style*=text-align:center], .card[style*=text-align: center] { padding:48px 24px!important; }

/* scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--reun-border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--reun-border-strong); }

/* badge */
.badge { display:inline-flex!important; align-items:center!important; padding:2px 8px!important; border-radius:999px!important; font-size:10px!important; font-weight:600!important; letter-spacing:0.04em!important; text-transform:uppercase!important; background:var(--reun-surface-2)!important; color:var(--reun-muted)!important; border:1px solid var(--reun-border)!important; }

/* view max-width 寬螢幕 */
.view { max-width:1400px!important; }

/* mobile: sidebar hidden */
@media (max-width:768px) {
  .layout { grid-template-columns:1fr!important; }
  .sidebar { display:none!important; }
}

/* ============================================================
 * Part J — 修正 .main 雙重 padding + topbar sticky 修正 v10.1
 * ============================================================ */

/* .main 的 cockpit-shell padding 清掉 — topbar 跟 .view 各自自帶 padding */
.main {
  padding: 0 !important;
  max-width: none !important;
}

/* topbar 要 edge-to-edge(自帶 28px side padding,sticky top:0) */
.topbar {
  padding: 12px 28px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  background: rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid var(--reun-border) !important;
}
@media (prefers-color-scheme: dark) {
  .topbar {
    background: rgba(28,28,30,0.88) !important;
  }
}

/* .view: 頁面主內容 padding */
.view {
  padding: 24px 28px 60px !important;
  max-width: 1400px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .view { padding: 16px 16px 48px !important; }
}

/* ============================================================
 * Part K — bar-fill color via CSS custom property v10.2
 * ============================================================ */

/* bar-fill 用 CSS 自訂屬性傳色,讓 !important 也能動態換色 */
.bar-fill {
  background: var(--bar-color, var(--reun-tint)) !important;
}
.prog-fill {
  background: var(--bar-color, var(--reun-tint)) !important;
}


/* ============================================================
 * Part K — Hero panel(B0 reference section 2026-05-07)
 * 對應 db-dashboard render_dashboard() 的 Row 1
 * 直接套 cockpit-shell .panel + .kpi 結構,本檔只補 Hero variant 細節
 * ============================================================ */

/* Hero panel container */
.hero-panel {
  padding: 24px 28px 26px !important;
  margin-bottom: 18px !important;
}
.hero-panel .panel-head {
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
}
.hero-panel .panel-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--reun-text) !important;
  margin: 0 !important;
}
.hero-panel .panel-meta {
  font-size: 11.5px !important;
  color: var(--reun-muted) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Hero KPI grid — 2 columns desktop, 1 column mobile */
.hero-kpi-grid {
  gap: 14px !important;
}
@media (max-width: 768px) {
  .kpi-grid.cols-2.hero-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Left: Hero KPI card(big revenue) */
.hero-kpi-card {
  padding: 26px 28px !important;
  background: linear-gradient(180deg, var(--reun-tint-soft) 0%, var(--reun-surface) 55%) !important;
  border: 0.5px solid var(--reun-tint-ring) !important;
  cursor: default !important;
  display: flex !important;
  flex-direction: column !important;
}
.hero-kpi-card:hover {
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}
.hero-kpi-card .kpi-label {
  margin-bottom: 8px !important;
}
.hero-value {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--reun-text);
  line-height: 1.0;
  margin: 4px 0 18px;
}
@media (max-width: 768px) {
  .hero-value { font-size: 34px; }
}

/* Hero secondary stats(毛利 / 毛利率) */
.hero-stats {
  display: flex;
  gap: 32px;
  padding-top: 14px;
  border-top: 0.5px solid var(--reun-border);
  margin-top: auto;
}
.hero-stat-val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--reun-text);
}
.hero-stat-lbl {
  font-size: 11.5px;
  color: var(--reun-text-2);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Status text + chip utilities(可在其他 render_* 重用) */
.text-ok   { color: var(--reun-ok)   !important; }
.text-warn { color: var(--reun-warn) !important; }
.text-err  { color: var(--reun-err)  !important; }
.text-tint { color: var(--reun-tint) !important; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.5;
}
.chip-ok   { background: var(--reun-ok-soft);   color: var(--reun-ok); }
.chip-warn { background: var(--reun-warn-soft); color: var(--reun-warn); }
.chip-err  { background: var(--reun-err-soft);  color: var(--reun-err); }
.chip-tint { background: var(--reun-tint-soft); color: var(--reun-tint); }

/* Right column: vertical stack of 2 compact KPIs */
.hero-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.hero-stack > .kpi {
  flex: 1;
  cursor: default;
  display: flex;
  align-items: center;
}
.hero-stack > .kpi:hover {
  transform: none !important;
}
.hero-stack-kpi {
  padding: 18px 20px !important;
}

/* Compact KPI inner split row(left:value+label, right:meta) */
.kpi-row-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.kpi-row-split > div:first-child .kpi-value {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.0 !important;
  margin-bottom: 4px !important;
  color: var(--reun-text) !important;
}
.kpi-row-split > div:first-child .kpi-label {
  margin-top: 0 !important;
}
.kpi-side {
  font-size: 11.5px;
  color: var(--reun-text-2);
  text-align: right;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Mobile: compact KPI stack rows(left/right 不分,改 stacked) */
@media (max-width: 480px) {
  .hero-stack > .kpi { padding: 14px 16px !important; }
  .kpi-row-split { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kpi-side { text-align: left; }
}


/* ============================================================
 * Part L — Alert banners(B0 v2 cockpit pattern 2026-05-07)
 * 取代舊 inline-style 彩色塊。5 種變體:danger / warn / good / money / fire
 * cockpit-shell.css .alert-banner 預設紅色,本檔補變體 + 收斂尺寸
 * ============================================================ */

.alert-banner {
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  background: var(--reun-surface-2) !important;
  border: 0.5px solid var(--reun-border) !important;
}
.alert-banner .alert-icon {
  width: 18px;
  height: 18px;
  font-size: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: inherit !important;
}
.alert-banner .alert-text { flex: 1; min-width: 0; }
.alert-banner .alert-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--reun-text);
  line-height: 1.45;
}
.alert-banner .alert-desc {
  font-size: 12px;
  color: var(--reun-text-2);
  line-height: 1.5;
  margin-top: 2px;
}

/* 5 種變體 — soft 底色 + 細邊框 */
.alert-banner.alert-danger {
  background: var(--reun-err-soft) !important;
  border-color: rgba(255, 59, 48, 0.30) !important;
}
.alert-banner.alert-danger .alert-title { color: var(--reun-err); }

.alert-banner.alert-warn {
  background: var(--reun-warn-soft) !important;
  border-color: rgba(255, 149, 0, 0.30) !important;
}
.alert-banner.alert-warn .alert-title { color: var(--reun-warn); }

.alert-banner.alert-good {
  background: var(--reun-ok-soft) !important;
  border-color: rgba(52, 199, 89, 0.30) !important;
}
.alert-banner.alert-good .alert-title { color: var(--reun-ok); }

.alert-banner.alert-money {
  background: var(--reun-tint-soft) !important;
  border-color: rgba(0, 122, 255, 0.30) !important;
}
.alert-banner.alert-money .alert-title { color: var(--reun-tint); }

.alert-banner.alert-fire {
  background: rgba(255, 149, 0, 0.10) !important;
  border-color: rgba(255, 149, 0, 0.30) !important;
}
.alert-banner.alert-fire .alert-title { color: var(--reun-warn); }

/* 今日營運建議 panel container */
.daily-tips-panel {
  padding: 18px 22px 16px !important;
  margin-bottom: 18px !important;
}
.daily-tips-panel .panel-head {
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
}
.daily-tips-panel .panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--reun-text) !important;
}

/* ============================================================
 * Part M — 主卡視覺強化(B0 v2 2026-05-07)
 * 漸層 0.08 → 0.14 整卡帶藍 / 邊框 0.5px → 1px / 大字 44 → 50px
 * ============================================================ */

.hero-kpi-card {
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.14) 0%, rgba(0, 122, 255, 0.03) 100%) !important;
  border: 1px solid rgba(0, 122, 255, 0.28) !important;
}
.hero-value {
  font-size: 50px !important;
  letter-spacing: -0.04em !important;
}
@media (max-width: 768px) {
  .hero-value { font-size: 38px !important; }
}

/* ============================================================
 * Part L — 期間 pill buttons · grid3 · sub-mini-card · typography fine-tuning v11
 * ============================================================ */

/* Period filter pill links (filter bar) — add padding so they look like buttons */
.card a[style*="border-radius:6px"],
.card a[style*="border-radius: 6px"] {
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 500 !important;
  transition: opacity 120ms ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.card a[style*="border-radius:6px"]:hover,
.card a[style*="border-radius: 6px"]:hover {
  opacity: 0.85 !important;
}

/* .grid3 — 3-column layout (used in some render functions) */
.grid3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 900px) {
  .grid3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .grid3 { grid-template-columns: 1fr !important; }
}

/* Sub-mini-cards inside .card (used in margin monitor and others) */
/* Targets divs with background:var(--reun-bg) + border-radius:8px inline style */
.card [style*="background:var(--reun-bg)"][style*="border-radius:8px"],
.card [style*="background: var(--reun-bg)"][style*="border-radius:8px"] {
  background: var(--reun-surface-2) !important;
  border-radius: var(--radius-md, 10px) !important;
  padding: 12px 14px !important;
  border: 0.5px solid var(--reun-border) !important;
}

/* Inline muted-label divs inside cards */
.card [style*="color:var(--reun-muted)"][style*="font-size:11px"],
.card [style*="color: var(--reun-muted)"][style*="font-size:11px"] {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}

/* Inline large numbers inside sub-cards (font-size:16/18px + font-weight:700) */
.card [style*="font-size:16px"][style*="font-weight:700"],
.card [style*="font-size:18px"][style*="font-weight:700"] {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Card filter bar (period selector card) — match panel look */
.card[style*="display:flex"][style*="align-items:center"][style*="gap:12px"] {
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Select inside filter card — tighten padding */
.card select {
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* Margin monitor progress bar gauge */
.card [style*="position:relative"][style*="height:24px"] {
  border-radius: var(--radius-pill) !important;
  overflow: hidden !important;
}

/* h3.muted section header (e.g. "📊 毛利率監控") */
h3.muted, .card > h3.muted:first-child {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--reun-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
h3.muted > span,
.card > h3.muted:first-child > span {
  font-size: 11px !important;
  color: var(--reun-text-2) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-left: auto !important;
}

/* Page title (h1.page-title) — match cockpit 26px tight */
.page-title {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}


/* ============================================================
 * Part N — Margin monitor panel(B1 2026-05-07)
 * 對應 db-dashboard render_dashboard() 的 margin_monitor 段
 * ============================================================ */

.margin-monitor-panel {
  padding: 18px 22px 16px !important;
  margin-bottom: 14px !important;
}
.margin-monitor-panel .panel-head {
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
}
.margin-monitor-panel .panel-title {
  font-size: 14px !important;
}

.margin-monitor-body {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

/* 進度條 — 左半 */
.margin-progress {
  flex: 1;
  min-width: 240px;
}
.margin-progress-track {
  position: relative;
  height: 22px;
  background: var(--reun-surface-2);
  border-radius: 11px;
  overflow: hidden;
  border: 0.5px solid var(--reun-border);
}
.margin-progress-zone {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(52, 199, 89, 0.14);
  border-left: 1.5px dashed var(--reun-ok);
  border-right: 1.5px dashed var(--reun-ok);
}
.margin-progress-fill {
  position: relative;
  height: 100%;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  min-width: 50px;
  font-variant-numeric: tabular-nums;
}
.margin-progress-ok   { background: var(--reun-ok); }
.margin-progress-warn { background: var(--reun-warn); }
.margin-progress-err  { background: var(--reun-err); }

.margin-progress-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--reun-text-2);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* 右半 3 個小 KPI — 用 .kpi.compact 自帶 */
.margin-stats-grid {
  flex: 1.5;
  min-width: 320px;
  gap: 8px !important;
}
@media (max-width: 768px) {
  .margin-monitor-body { flex-direction: column; align-items: stretch; }
  .margin-stats-grid { min-width: 0; }
}

.stat-mini {
  padding: 12px 14px !important;
  text-align: center;
  background: var(--reun-surface-2) !important;
  border: 0.5px solid var(--reun-border) !important;
  cursor: default !important;
}
.stat-mini:hover { transform: none !important; box-shadow: var(--shadow-sm) !important; }
.stat-mini .kpi-label {
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--reun-muted) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.stat-mini .kpi-value {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
 * Part O — Risk alerts panel(B1 2026-05-07)
 * 風險警示 panel — alert-banner pattern 已在 Part L,本檔只補 panel container
 * ============================================================ */

.risk-alerts-panel {
  padding: 18px 22px 16px !important;
  margin-bottom: 14px !important;
}
.risk-alerts-panel .panel-head {
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
}
.risk-alerts-panel .panel-title {
  font-size: 14px !important;
}

/* ============================================================
 * Part M — inline KPI values · flow bars · brand tags v11.1
 * ============================================================ */

/* Inline KPI values (font-size:28px or 24px + font-weight:700 inside .card) */
.card [style*="font-size:28px"][style*="font-weight:700"],
.card [style*="font-size:24px"][style*="font-weight:700"] {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums !important;
  margin-bottom: 2px !important;
}

/* auto-grid cards (KOL overview KPI grid) */
.card[style*="text-align:center"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 18px 16px !important;
}

/* Flow progress bars: fat 20px bars thin to cockpit 6px */
.card [style*="height:20px"][style*="border-radius:4px"] {
  height: 6px !important;
  border-radius: 999px !important;
}
.card [style*="height:20px"][style*="border-radius:4px"] > div {
  height: 6px !important;
  font-size: 0 !important;
  color: transparent !important;
  display: block !important;
}

/* Tips/alert items inside card */
.card [style*="background:rgba"] {
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
}
.card [style*="background:rgba"]:last-child {
  margin-bottom: 0 !important;
}

/* Table th — tighten to Linear style */
th {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--reun-muted) !important;
  background: var(--reun-bg) !important;
  padding: 8px 14px !important;
}
td {
  font-size: 13px !important;
  padding: 10px 14px !important;
}
td.num {
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
 * Part N — alert-banner variants (danger/warn/good) + inner elements v11.2
 * ============================================================ */

/* Base alert-banner (already in cockpit-shell, but extend) */
.alert-banner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: var(--radius-md, 10px) !important;
  margin-bottom: 8px !important;
  background: var(--reun-surface-2) !important;
  border: 0.5px solid var(--reun-border) !important;
}
.alert-banner:last-child {
  margin-bottom: 0 !important;
}

/* danger / warn / good variants */
.alert-banner.alert-danger {
  background: var(--reun-err-soft) !important;
  border-color: rgba(255, 59, 48, 0.2) !important;
}
.alert-banner.alert-warn {
  background: var(--reun-warn-soft) !important;
  border-color: rgba(255, 149, 0, 0.2) !important;
}
.alert-banner.alert-good {
  background: var(--reun-ok-soft) !important;
  border-color: rgba(52, 199, 89, 0.2) !important;
}
.alert-banner.alert-info {
  background: var(--reun-tint-soft) !important;
  border-color: var(--reun-tint-ring) !important;
}

/* inner icon */
.alert-banner .alert-icon,
.alert-banner .icon {
  font-size: 18px !important;
  flex-shrink: 0 !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* inner text block */
.alert-banner .alert-text,
.alert-banner .txt {
  flex: 1 !important;
  min-width: 0 !important;
}

/* title line */
.alert-banner .alert-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--reun-text) !important;
  margin-bottom: 3px !important;
}
.alert-banner.alert-danger .alert-title { color: var(--reun-err) !important; }
.alert-banner.alert-warn .alert-title { color: var(--reun-warn) !important; }
.alert-banner.alert-good .alert-title { color: var(--reun-ok) !important; }

/* description line */
.alert-banner .alert-desc,
.alert-banner .txt {
  font-size: 12.5px !important;
  color: var(--reun-text-2) !important;
  line-height: 1.5 !important;
}

/* risk-alerts-panel inside dashboard */
.risk-alerts-panel {
  margin-bottom: 14px !important;
}

/* panel inside .view — remove extra margin if already has bottom */
.panel + .panel { margin-top: 14px !important; }


/* ============================================================
 * Part P — 全局 .card / typography / inline-style 強化(B1+ 2026-05-07)
 * 目的:不動 db-dashboard.py 的情況下,讓所有舊 .card / 舊 inline-style
 *      自動套上 cockpit 的 panel 樣感(padding / border / typography / table)
 * 涵蓋:.card 容器強化、h3/h4 panel-head 化、大數字 inline-style 對齊、
 *       bar-row 排行 bar 美化、dtable 表格美化
 * ============================================================ */

/* .card 強化成 panel — padding/邊框/間距統一 */
.card {
  padding: 20px 22px !important;
  border-radius: 12px !important;
  border: 0.5px solid var(--reun-border) !important;
  background: var(--reun-surface) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 14px !important;
  transition: box-shadow 0.18s ease;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
}

/* h3 / h4 標題 — panel-head 樣式 */
.card > h3:first-child,
.card > h4:first-child {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 14px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  color: var(--reun-text) !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.card > h3.muted:first-child,
.card > h4.muted:first-child {
  color: var(--reun-text) !important;
}
.card > h3 > span,
.card > h4 > span {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--reun-muted) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* 大數字 inline-style override — 對齊 cockpit typography */
[style*="font-size:48px"],
[style*="font-size: 48px"] {
  font-size: 42px !important;
  letter-spacing: -0.04em !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  line-height: 1.05 !important;
}
[style*="font-size:32px"],
[style*="font-size: 32px"],
[style*="font-size:30px"],
[style*="font-size: 30px"] {
  font-size: 28px !important;
  letter-spacing: -0.03em !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  line-height: 1.1 !important;
}
[style*="font-size:28px"]:not(.alert-icon),
[style*="font-size: 28px"]:not(.alert-icon) {
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  line-height: 1.1 !important;
}
[style*="font-size:24px"]:not(.alert-icon),
[style*="font-size: 24px"]:not(.alert-icon) {
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
}
[style*="font-size:22px"],
[style*="font-size: 22px"] {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  letter-spacing: -0.01em !important;
}
[style*="font-size:18px"],
[style*="font-size: 18px"] {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
[style*="font-size:16px"]:not(button):not(input),
[style*="font-size: 16px"]:not(button):not(input) {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

/* var(--mono) 字體 — 替換成 SF Pro tnum(因為 mono 寬度不一致醜) */
[style*="font-family:var(--mono)"],
[style*="font-family: var(--mono)"] {
  font-family: var(--reun-font-stack) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "ss01" 1 !important;
}

/* font-weight:700 inline → 600(SF Pro 700 太粗) */
[style*="font-weight:700"],
[style*="font-weight: 700"] {
  font-weight: 600 !important;
}

/* 標題色 — text-3 / text 系列統一暗 */
[style*="color:var(--text-3)"],
[style*="color: var(--text-3)"] {
  color: var(--reun-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Bar list — 排行條(品牌/客戶 ranking 用) */
.bar-list { display: flex; flex-direction: column; gap: 4px; }
.bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 7px 0 !important;
  font-size: 13px !important;
}
.bar-row .nm {
  flex: 0 0 auto !important;
  min-width: 100px !important;
  max-width: 200px !important;
  font-size: 13px !important;
  color: var(--reun-text) !important;
  font-weight: 500 !important;
}
.bar-row .bar-track {
  flex: 1 !important;
  height: 6px !important;
  background: var(--reun-surface-2) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.bar-row .bar-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.4s ease;
}
.bar-row .num,
.bar-row .bar-val {
  font-size: 13px !important;
  color: var(--reun-text-2) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  flex-shrink: 0;
  min-width: 80px;
  text-align: right;
}

/* dtable 表格美化 */
.dtable {
  font-size: 13px !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
.dtable thead {
  background: transparent !important;
}
.dtable thead th {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--reun-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
  text-align: left !important;
  background: transparent !important;
}
.dtable tbody td {
  padding: 11px 12px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.dtable tbody tr:hover {
  background: var(--reun-surface-2) !important;
}
.dtable tbody tr:last-child td {
  border-bottom: none !important;
}
.dtable td.num,
.dtable th.num {
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

/* grid1/2/4 + .card 之間的留白統一 */
.grid1 { display: block; }
.grid2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
.grid4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
@media (max-width: 1024px) {
  .grid4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .grid2, .grid4 { grid-template-columns: 1fr !important; }
}

/* 統計值 .stat-val / .stat-sub 美化 */
.stat-val {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  line-height: 1.1 !important;
  /* color: intentionally NOT set — inline colors must pass through */
}
.stat-sub {
  font-size: 11.5px !important;
  color: var(--reun-text-2) !important;
  margin-top: 2px !important;
}

/* progress / prog-track / prog-fill */
.prog-track {
  height: 6px !important;
  background: var(--reun-surface-2) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.prog-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.4s ease;
}

/* 所有 .card 內的「title」class 統一 */
.card .title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--reun-text) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
}

/* 強制所有 emoji icon 在 panel head 跟標題內縮小 */
.card > h3:first-child::first-letter,
.card > h4:first-child::first-letter {
  font-size: 1em !important;
  margin-right: 4px;
}


/* ============================================================
 * Part Q — 補洞 + 細節(B1+ 2026-05-07)
 * 修正 Part P 漏掉的 class hook(.bar-label / .bar-fill 內字色 等)
 * 加強 pie chart legend / 毛利圖表 / dtable 細節
 * ============================================================ */

/* === bar-row 補洞:實際 class 是 .bar-label 不是 .nm === */
.bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 7px 0 !important;
  font-size: 13px !important;
}
.bar-row .bar-label {
  flex: 0 0 auto !important;
  min-width: 100px !important;
  max-width: 220px !important;
  font-size: 13px !important;
  color: var(--reun-text) !important;
  font-weight: 500 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-row .bar-track {
  flex: 1 !important;
  height: 8px !important;
  background: var(--reun-surface-2) !important;
  border-radius: 999px !important;
  overflow: hidden;
  position: relative;
}
.bar-row .bar-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.4s ease;
  position: relative;
  background: var(--bar-color, var(--reun-tint)) !important;
  min-width: 4px;
  /* 內 % 文字 — 從白色改成貼到 bar 右邊外面 */
  color: transparent !important;
  font-size: 0 !important;
}
/* %  show outside bar */
.bar-row .bar-track::after {
  /* leave empty, drilled values done in HTML directly */
}
.bar-row .bar-val {
  font-size: 12.5px !important;
  color: var(--reun-text-2) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  flex-shrink: 0;
  min-width: 80px;
  text-align: right;
}

/* === Pie chart legend 內 inline-style override === */
.card [style*="conic-gradient"] {
  /* pie chart container */
  width: 180px !important;
  height: 180px !important;
  box-shadow: 0 4px 24px rgba(0, 122, 255, 0.10) !important;
}

/* legend row inside pie chart card */
.card > div > div[style*="display:flex"][style*="align-items:center"][style*="border-bottom"] {
  padding: 8px 0 !important;
  border-bottom-color: var(--reun-border) !important;
  border-bottom-width: 0.5px !important;
}
.card > div > div[style*="display:flex"][style*="align-items:center"]:last-child {
  border-bottom: none !important;
}

/* legend 色塊 */
.card div[style*="width:12px"][style*="height:12px"][style*="border-radius:2px"] {
  width: 10px !important;
  height: 10px !important;
  border-radius: 2px !important;
}

/* 毛利分析 legend(■ ≥30% ■ 15-30% ■ <15%)— 上面那條小圖例 */
.card > div[style*="font-size:11px"][style*="color:var(--reun-text-2)"]:not(.bar-row) {
  padding: 6px 10px;
  background: var(--reun-surface-2);
  border-radius: 6px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0.5px solid var(--reun-border);
}

/* === Empty state ("尚無銷售資料" / "需要產品成本資料才能計算毛利") === */
.card > div[style*="text-align:center"][style*="color:var(--reun-text-2)"] {
  padding: 32px 16px !important;
  font-size: 13px !important;
  color: var(--reun-muted) !important;
  background: var(--reun-surface-2);
  border-radius: 8px;
  margin-top: 8px;
}

/* === KPI mini 內的 stat-val / stat-sub 統一 === */
.card .stat-val {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  line-height: 1.1 !important;
}

/* === 應收帳款 / 補貨 inner sections === */
.card div[style*="font-weight:600"][style*="font-size:14px"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--reun-muted) !important;
  margin-bottom: 8px;
}

/* === info-item / info-label === */
.info-item {
  padding: 8px 0 !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px;
}
.info-item:last-child { border-bottom: none !important; }
.info-label {
  font-size: 12px !important;
  color: var(--reun-text-2) !important;
}

/* === sticky topbar 的填滿(有時被 main padding 影響)=== */
.topbar {
  z-index: 30 !important;
}

/* === 全頁主體最大寬限制(超寬螢幕也好看)=== */
.view {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* === card 內最後一個 div 不要多餘 margin === */
.card > div:last-child:not(.bar-row) {
  margin-bottom: 0 !important;
}

/* === 標題 emoji 固定大小,不要跟字型一樣放大縮小 === */
.card > h3:first-child::before,
.card > h4:first-child::before {
  /* nothing — emoji 在文字內,瀏覽器處理 */
}


/* ============================================================
 * Part R — 元件系統細節(B1+ 2026-05-07)
 * 補 filter-bar / button / form / page-head / 互動細節
 * ============================================================ */

/* === 頁面標題 page-head === */
.page-head {
  padding-bottom: 18px !important;
  margin-bottom: 22px !important;
  border-bottom: 0.5px solid var(--reun-border) !important;
}
.page-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--reun-text) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.2 !important;
}
.page-subtitle {
  font-size: 12px !important;
  color: var(--reun-text-2) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums !important;
}
.page-subtitle .pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--reun-ok);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--reun-ok-soft);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* === Filter bar — 期間 chip 按鈕 === */
.filter-bar,
.search-bar {
  background: var(--reun-surface) !important;
  border: 0.5px solid var(--reun-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  box-shadow: var(--shadow-sm);
}

/* Filter chip(.theme-btn 之類)*/
.theme-btn,
.filter-bar button:not(.btn-primary):not([type="submit"]) {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 0.5px solid var(--reun-border) !important;
  color: var(--reun-text-2) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.theme-btn:hover,
.filter-bar button:not(.btn-primary):not([type="submit"]):hover {
  background: var(--reun-surface-2) !important;
  border-color: var(--reun-border-strong) !important;
  color: var(--reun-text) !important;
}
.theme-btn.active,
.filter-bar button.active {
  background: var(--reun-tint) !important;
  border-color: var(--reun-tint) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* === 主要按鈕 .btn-primary === */
.btn-primary,
button[type="submit"]:not(.theme-btn) {
  background: var(--reun-tint) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0, 122, 255, 0.20) !important;
}
.btn-primary:hover,
button[type="submit"]:not(.theme-btn):hover {
  background: rgba(0, 122, 255, 0.92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.30) !important;
}
.btn-primary:active,
button[type="submit"]:not(.theme-btn):active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 122, 255, 0.30) !important;
}

/* === 第二按鈕 .btn-o === */
.btn-o {
  background: transparent !important;
  color: var(--reun-text) !important;
  border: 0.5px solid var(--reun-border) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-o:hover {
  background: var(--reun-surface-2) !important;
  border-color: var(--reun-border-strong) !important;
}

/* === Form inputs === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea,
.sinput {
  padding: 8px 12px !important;
  border: 0.5px solid var(--reun-border) !important;
  border-radius: 7px !important;
  background: var(--reun-surface) !important;
  color: var(--reun-text) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  transition: all 0.15s ease !important;
}
input:focus,
select:focus,
textarea:focus,
.sinput:focus {
  outline: none !important;
  border-color: var(--reun-tint) !important;
  box-shadow: 0 0 0 3px var(--reun-tint-soft) !important;
}
input::placeholder {
  color: var(--reun-muted) !important;
}

/* select 樣子 */
select {
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238c8478' stroke-width='2' viewBox='0 0 24 24'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 32px !important;
  cursor: pointer !important;
}

/* === 內文字體階層細節(13/12/11px) === */
.muted {
  color: var(--reun-muted) !important;
}

/* === 滑鼠互動細節 === */
button, a, [role="button"], .nav-item, .theme-btn {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--reun-tint) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* === 連結 === */
a {
  color: var(--reun-tint);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
a:hover {
  opacity: 0.75;
}

/* === Selection 選字底色 === */
::selection {
  background: var(--reun-tint-soft);
  color: var(--reun-text);
}

/* === 滑動條進階(承襲既有,確保 tint hover) === */
::-webkit-scrollbar-thumb:hover {
  background: var(--reun-tint-ring) !important;
}

/* === Section rhythm — 各 .grid1/.grid2/.grid4 區塊間 spacing === */
.view > .grid1,
.view > .grid2,
.view > .grid4,
.view > .panel {
  margin-bottom: 16px !important;
}
.view > .grid1:last-child,
.view > .grid2:last-child,
.view > .grid4:last-child,
.view > .panel:last-child {
  margin-bottom: 0 !important;
}

/* === Loading 骨架(for chart 載入) === */
.skel,
.skeleton {
  background: linear-gradient(90deg, var(--reun-surface-2) 0%, var(--reun-surface) 50%, var(--reun-surface-2) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Mobile 細節 — sidebar drawer hint === */
@media (max-width: 768px) {
  .filter-bar,
  .search-bar {
    flex-direction: column;
    align-items: stretch !important;
  }
  .filter-bar select,
  .filter-bar input,
  .search-bar select,
  .search-bar input {
    width: 100% !important;
  }
  .page-title {
    font-size: 19px !important;
  }
}

/* === 登入頁(/db/login)細節 === */
body.login-page,
.box {
  background: var(--reun-surface);
  border: 0.5px solid var(--reun-border);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
  padding: 36px 32px !important;
}
.box h1 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}
.box .sub {
  font-size: 12px !important;
  color: var(--reun-muted) !important;
  margin-bottom: 28px !important;
  letter-spacing: 0 !important;
}

/* === 全形/半形 break-words === */
* { word-break: break-word; }
.no-break, .num, [class*="num"] { word-break: keep-all; }

/* === Card animation on render(微妙的 entrance) === */
@media (prefers-reduced-motion: no-preference) {
  .card,
  .panel {
    animation: card-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }
  @keyframes card-in {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* === 高密度螢幕 (1.5x retina) — 邊框 0.5px 看得見 === */
@media (-webkit-min-device-pixel-ratio: 1.5) {
  .panel, .card, .alert-banner, .filter-bar, .search-bar,
  .page-head, .topbar, .data-table th, .dtable th {
    /* 0.5px 在 retina 真的是 0.5px,不會被瀏覽器 round 成 1px */
  }
}


/* ============================================================
 * Part S — 修 Part Q regression + 收尾(B1+ 2026-05-07)
 * ============================================================ */

/* === FIX:Part Q 把 .bar-fill 內 % 文字隱藏掉了,還原 === */
.bar-row .bar-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.4s ease;
  position: relative;
  background: var(--bar-color, var(--reun-tint)) !important;
  min-width: 4px;
  /* 內 % 文字 */
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 6px !important;
  font-variant-numeric: tabular-nums !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
/* 短 bar 隱藏內字(避免擠出去),若 bar < 25% 就藏 */
.bar-row .bar-fill[style*="width:5"]:not([style*="width:5N"]):not([style*="width:50"]):not([style*="width:5%"]):not([style*="width:5px"]),
.bar-row .bar-fill[style*="width:1"][style*="width:1"]:not([style*="width:10"]):not([style*="width:11"]):not([style*="width:12"]):not([style*="width:13"]):not([style*="width:14"]):not([style*="width:15"]):not([style*="width:16"]):not([style*="width:17"]):not([style*="width:18"]):not([style*="width:19"]) {
  /* 太複雜的 :not selector 容易出錯 — 改用單純 min-width 限制 */
  font-size: 10px !important;
}

/* === width track 高度提升一點點 — 內字才能放 === */
.bar-row .bar-track {
  flex: 1 !important;
  height: 16px !important;
  background: var(--reun-surface-2) !important;
  border-radius: 999px !important;
  overflow: hidden;
  position: relative;
  border: 0.5px solid var(--reun-border) !important;
}

/* === Light/Dark mode toggle 按鈕 === */
.theme-toggle, [class*="dark-toggle"], button[aria-label*="theme"] {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--reun-surface-2);
  border: 0.5px solid var(--reun-border);
  color: var(--reun-text-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-toggle:hover {
  background: var(--reun-surface);
  color: var(--reun-text);
}

/* === Modal / Dialog === */
dialog, .modal {
  background: var(--reun-surface) !important;
  border: 0.5px solid var(--reun-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.16) !important;
  padding: 28px !important;
}
dialog::backdrop {
  background: rgba(31, 29, 26, 0.32);
  backdrop-filter: blur(2px);
}

/* === 1px 邊框退化成 0.5px 在 retina === */
.card,
.panel,
.alert-banner,
.filter-bar {
  /* 已用 0.5px,瀏覽器在 1x 螢幕會 round to 1px */
}

/* === 若 inline-style 有 background:var(--reun-bg) 用在小卡 — 改 surface-2 才看得到分隔 === */
[style*="background:var(--reun-bg)"][style*="border-radius:8px"],
[style*="background: var(--reun-bg)"][style*="border-radius:8px"] {
  background: var(--reun-surface-2) !important;
  border: 0.5px solid var(--reun-border) !important;
  padding: 12px 14px !important;
}

/* === inline style with text-align:center 統一 === */
[style*="text-align:center"][style*="border-radius"] {
  padding: 14px 12px !important;
}

/* === 確保 .topbar 的內容是 flex,有時 inline-style 會破壞 === */
.topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

/* === sidebar nav-item 細節調整(Part P 漏) === */
.nav-item {
  padding: 8px 12px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
}
.nav-item.active {
  background: var(--reun-tint-soft) !important;
  color: var(--reun-tint) !important;
  font-weight: 600 !important;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--reun-tint);
  border-radius: 0 2px 2px 0;
}
.nav-item {
  position: relative;
}

/* === 進階表格:hover row 高亮、focus row === */
.dtable tbody tr {
  transition: background 0.12s ease;
}

/* === 進階 KPI 卡 hover === */
.kpi:not(.hero-kpi-card):not(.stat-mini):hover {
  border-color: var(--reun-tint-ring) !important;
}

/* === 圖表 canvas 容器 === */
canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* === 細微對比 — body bg / card bg 差異 === */
body {
  background: var(--reun-bg) !important;
}

/* === footer-info 細節 === */
.footer-info {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  color: var(--reun-muted) !important;
}


/* ============================================================
 * Part T — 收尾(B1 Final 2026-05-07)
 * .section-divider(KOL 合作摘要 那種「次區塊」標題)
 * .ranking-panel / .finance-panel 細節
 * .text-tint utility(KOL stat-mini 用)
 * ============================================================ */

/* 次區塊標題 — 用「水平線 + 中間 chip」風格 */
.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px 0;
  padding: 0;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--reun-border);
}
.section-divider-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--reun-muted);
  padding: 4px 12px;
  background: var(--reun-surface-2);
  border: 0.5px solid var(--reun-border);
  border-radius: 999px;
}

/* ranking-panel — 排行 panel 內 bar-list spacing */
.ranking-panel .bar-list {
  margin-top: 4px;
}
.ranking-panel .panel-head {
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--reun-border);
  margin-bottom: 12px;
}

/* finance-panel — 應收 + 補貨 合併 panel */
.finance-panel {
  padding: 18px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.finance-panel > div {
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--reun-border);
}
.finance-panel > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* === Final cleanup: kol_summary 內 KPI cards(改成 .kpi.compact) === */
.kpi-grid .stat-mini .kpi-value.text-tint { color: var(--reun-tint) !important; }
.kpi-grid .stat-mini .kpi-value.text-ok   { color: var(--reun-ok) !important; }
.kpi-grid .stat-mini .kpi-value.text-err  { color: var(--reun-err) !important; }
.kpi-grid .stat-mini .kpi-value.text-warn { color: var(--reun-warn) !important; }

/* 原 .kpi-value 是 30px,stat-mini 我之前壓 18px,但 KOL kpi 想中型 22px */
.kpi-grid > .stat-mini .kpi-value {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 6px !important;
}

/* === Final detail: panel-head 內 emoji 跟標題對齊 === */
.panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ============================================================
 * Part U — Final body typography polish(B1 收尾 2026-05-07)
 * 防禦性,不再用激進 !important
 * ============================================================ */

/* body 預設 line-height + 字重(避免太「擠」)*/
body {
  font-family: var(--reun-font-stack);
  font-size: 14px;
  line-height: 1.55;
  color: var(--reun-text);
  font-feature-settings: "tnum" 1, "ss01" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 內文常見尺寸 — 不強制 !important,讓 inline 仍可覆蓋 */
p, span, div, td, th, li {
  font-feature-settings: "kern" 1;
}

/* 數字結尾的 td / .num 自動 tnum + 右對齊 */
td.num, th.num,
[class*="num-"] {
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

/* monospace 字體都退回 SF Pro tnum(Mono 寬度醜)*/
[style*="font-family:monospace"],
[style*="font-family: monospace"],
[style*="'SF Mono'"],
[style*="\"SF Mono\""] {
  font-family: var(--reun-font-stack) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* 內文小字 12px 不要太亮(預設 text 太搶眼)*/
[style*="font-size:12px"]:not(.alert-icon):not(button):not(input) {
  color: var(--reun-text-2);
}
[style*="font-size:11px"]:not(.alert-icon):not(.kbd) {
  color: var(--reun-muted);
  letter-spacing: 0.02em;
}
[style*="font-size:10px"]:not(.kbd):not(.tag):not(.badge) {
  color: var(--reun-muted);
  letter-spacing: 0.04em;
}

/* color: muted / text-2 / text-3 統一(舊系統用過 text-3,在新 tokens 沒有)*/
[style*="color:var(--text-3)"],
[style*="color: var(--text-3)"] {
  color: var(--reun-muted) !important;
}
[style*="color:var(--text-2)"],
[style*="color: var(--text-2)"] {
  color: var(--reun-text-2) !important;
}
[style*="color:var(--text)"],
[style*="color: var(--text)"] {
  color: var(--reun-text) !important;
}

/* border:var(--border) 退色 — 統一用 0.5px hairline */
[style*="border:1px solid var(--border)"],
[style*="border:1px solid var(--reun-border)"] {
  border-width: 0.5px !important;
  border-color: var(--reun-border) !important;
}

/* background:var(--bg) inline(舊 token)→ 改 reun-bg */
[style*="background:var(--bg)"],
[style*="background: var(--bg)"] {
  background: var(--reun-bg) !important;
}

/* 空狀態文字「-」「無」「尚無...」貼齊柔色 */
[style*="text-align:center"][style*="color:var(--reun-text-2)"],
[style*="text-align: center"][style*="color: var(--reun-text-2)"] {
  color: var(--reun-muted) !important;
  font-size: 13px;
}

/* === 強化 button hover transition — 全頁一致感 === */
button:not(:disabled),
a[href] {
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* === 跨欄字距 — Chinese 在英數混排時稍寬 === */
.panel-title,
.kpi-label,
.alert-title,
.bar-label,
.section-divider-label {
  font-feature-settings: "palt" 1;
}

/* === 全頁 print 友善 === */
@media print {
  .sidebar, .topbar { display: none !important; }
  .main { padding: 0 !important; max-width: none !important; }
  .panel, .card { box-shadow: none !important; border: 0.5px solid #ccc !important; page-break-inside: avoid; }
}


/* ============================================================
 * Part V — 自我檢視後的小修(B1 收尾真結束 2026-05-07)
 * 1. 主卡 hero-stats 加 space-between 讓毛利/毛利率撐開
 * 2. 獎金預估 6 個內格 → 套 stat-mini 風格
 * 3. KOL 4 stat-mini 寬螢幕加 max-width 不要太寬
 * 4. 派圖 legend 只有 1 條時左右不平衡 → 給 min content
 * ============================================================ */

/* === FIX 1: 主卡 hero-stats 撐開 === */
.hero-stats {
  justify-content: space-between !important;
  width: 100%;
}
.hero-stat {
  flex: 0 1 auto;
}
/* 毛利率那 stat 帶 chip 視覺上需要更多空間 */
.hero-stat:last-child {
  text-align: right;
}
.hero-stat:last-child .hero-stat-lbl {
  justify-content: flex-end;
}

/* === FIX 2: 獎金預估 6 個 inner box(舊 inline background:var(--reun-bg)) === */
/* 屬性選擇器抓到這些 inline-style 的 grid 內 box,套上 stat-mini 樣 */
.panel [style*="background:var(--reun-bg)"][style*="border-radius:8px"][style*="text-align:center"],
.panel [style*="background: var(--reun-bg)"][style*="border-radius:8px"][style*="text-align:center"] {
  background: var(--reun-surface-2) !important;
  border: 0.5px solid var(--reun-border) !important;
  padding: 14px 12px !important;
  border-radius: 10px !important;
  transition: border-color 0.18s ease;
}
.panel [style*="background:var(--reun-bg)"][style*="border-radius:8px"][style*="text-align:center"]:hover,
.panel [style*="background: var(--reun-bg)"][style*="border-radius:8px"][style*="text-align:center"]:hover {
  border-color: var(--reun-tint-ring) !important;
}

/* 部門分配明細 box(沒 text-align) */
.panel [style*="background:var(--reun-bg)"][style*="border-radius:8px"]:not([style*="text-align:center"]),
.panel [style*="background: var(--reun-bg)"][style*="border-radius:8px"]:not([style*="text-align:center"]) {
  background: var(--reun-surface-2) !important;
  border: 0.5px solid var(--reun-border) !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}

/* === FIX 3: KOL 4 stat-mini 寬螢幕不要太寬 === */
@media (min-width: 1200px) {
  .kpi-grid:not(.cols-2):not(.cols-3):not(.cols-6):not(.hero-kpi-grid) > .stat-mini {
    max-width: none;
  }
}

/* === FIX 4: 派圖 legend 只有 1 條時平衡 === */
.panel [style*="conic-gradient"] {
  width: 180px !important;
  height: 180px !important;
  flex-shrink: 0 !important;
}
.panel > div > div[style*="display:flex"][style*="gap:24px"] {
  align-items: flex-start !important;
}

/* === FIX 5: 趨勢圖 Y 軸標籤對齊 === */
.panel [style*="writing-mode:vertical-lr"] {
  font-size: 9px !important;
  color: var(--reun-muted) !important;
}

/* === FIX 6: 應收+補貨 inner KPI box(舊 inline) === */
.finance-panel [style*="background:var(--reun-bg)"] {
  background: var(--reun-surface) !important;
  border: 0.5px solid var(--reun-border) !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
}
.finance-panel [style*="font-size:16px"][style*="font-weight:700"] {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  margin-top: 4px !important;
}

/* === FIX 7: section-divider 兩側線太淡 - 加深 === */
.section-divider::before,
.section-divider::after {
  background: var(--reun-border-strong) !important;
  height: 0.5px;
}

/* === FIX 8: ROI 排名 empty state 不要那麼空 === */
.panel > .bar-list > [style*="text-align:center"][style*="color:var(--reun-text-2)"] {
  padding: 24px 16px !important;
  background: var(--reun-surface-2);
  border: 0.5px dashed var(--reun-border);
  border-radius: 8px;
  font-size: 12px !important;
  color: var(--reun-muted) !important;
}

/* === FIX 9: 階段條 (gm progress) 顏色更明顯 === */
.bonus-progress, .panel .prog-track, [class*="prog-"] .prog-track {
  height: 8px !important;
  background: var(--reun-surface-2) !important;
}


/* ============================================================
 * Part W — Panel collapse + section group(IA 2026-05-07)
 * Paul 拍板:風格定型,剩下 IA 是 Claude 的責任
 * 1. .panel 全部可收合 — 點 head 切 collapsed,localStorage 記憶
 * 2. section-group divider 把儀表板分 5 段
 * 3. 全部展開 / 全部收合 按鈕
 * ============================================================ */

/* === Collapsible panel === */
.panel.collapsible .panel-head {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 40px !important;
  transition: padding-right 0.15s ease;
}
.panel.collapsible .panel-head::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--reun-muted);
  border-bottom: 1.5px solid var(--reun-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.panel.collapsible:hover .panel-head::after {
  border-color: var(--reun-tint);
}
.panel.collapsible.collapsed .panel-head::after {
  transform: translateY(-30%) rotate(-45deg);
}

/* Collapsed body — 隱藏 panel 內所有非 panel-head 元素 */
.panel.collapsed > *:not(.panel-head) {
  display: none !important;
}
.panel.collapsed {
  padding-bottom: 0 !important;
  margin-bottom: 8px !important;
}
.panel.collapsed .panel-head {
  margin-bottom: 0 !important;
  padding-bottom: 14px !important;
  border-bottom: none !important;
}

/* Smooth panel-head focus state */
.panel.collapsible .panel-head:focus-visible {
  outline: 2px solid var(--reun-tint);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === Section group — 把連續面板分 5 大區 === */
.section-group {
  margin: 26px 0 12px 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  scroll-margin-top: 80px;
}
.section-group:first-child { margin-top: 8px; }
.section-group::before,
.section-group::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--reun-border-strong);
}
.section-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reun-text-2);
  padding: 5px 14px;
  background: var(--reun-surface);
  border: 0.5px solid var(--reun-border-strong);
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-group-title .group-icon {
  font-size: 13px;
  line-height: 1;
}
.section-group-count {
  font-size: 10px;
  color: var(--reun-muted);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* === 全部展開 / 全部收合 toolbar === */
.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 2px;
}
.dashboard-toolbar .toolbar-btn {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 500;
  background: transparent;
  border: 0.5px solid var(--reun-border);
  border-radius: 999px;
  color: var(--reun-text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dashboard-toolbar .toolbar-btn:hover {
  background: var(--reun-surface-2);
  border-color: var(--reun-border-strong);
  color: var(--reun-text);
}
.dashboard-toolbar .toolbar-btn .icon {
  font-size: 10px;
}

/* === Smooth animation when expanding / collapsing(避免突跳)=== */
@media (prefers-reduced-motion: no-preference) {
  .panel.collapsible:not(.collapsed) > *:not(.panel-head) {
    animation: panel-expand 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes panel-expand {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* === Mobile: section-group title 可能太擠,簡化 === */
@media (max-width: 640px) {
  .section-group {
    margin: 18px 0 8px 0;
  }
  .section-group::before,
  .section-group::after {
    display: none;
  }
  .section-group-title {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 10px;
  }
  .dashboard-toolbar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


/* ============================================================
 * Part X — IA 細修(2026-05-07)
 * 1. 主卡(.hero-panel)不可收合
 * 2. filter-bar sticky 黏附頂端
 * 3. KOL / 季度獎金 / ROI 預設收合
 * 4. 空 panel 尺寸壓縮
 * ============================================================ */

/* === 主卡不收合 — JS 跳過 === */
.hero-panel.collapsible .panel-head::after {
  display: none !important;
}
.hero-panel.collapsible .panel-head {
  cursor: default !important;
  padding-right: 22px !important;
}

/* === filter-bar sticky === */
.filter-bar {
  position: sticky !important;
  top: 50px !important;  /* topbar 高度 */
  z-index: 25 !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  background: rgba(255, 255, 255, 0.92) !important;
}
@media (prefers-color-scheme: dark) {
  .filter-bar {
    background: rgba(28, 28, 30, 0.92) !important;
  }
}

/* === Empty state panel 高度壓縮 === */
.panel:has(> div[style*="text-align:center"][style*="color:var(--reun-text-2)"]:only-of-type) .panel-head + div {
  padding: 24px 16px !important;
}
/* 目標達成率 empty(🎯 large)— 縮小 emoji */
.panel [style*="font-size:36px"] {
  font-size: 28px !important;
  margin-bottom: 8px !important;
  opacity: 0.55;
}

/* === Toolbar 位置:在 filter-bar 之上,不要在主卡之下 === */
/* 讓 dashboard-toolbar 用 sticky 定位 OR 移到 filter-bar 之前(目前 Python 已 append 在 filter 之後)*/
.dashboard-toolbar {
  margin-top: -8px !important;
  margin-bottom: 8px !important;
  padding-top: 4px !important;
}

/* === Section group title 跟附近 panel 之間距離 === */
.section-group {
  margin-top: 28px !important;
}
.section-group + .panel,
.section-group + .grid2,
.section-group + .grid1 {
  margin-top: 0 !important;
}

/* === ROI 排名 / 客戶毛利率排名 等 empty bar-list 縮小 === */
.panel .bar-list:empty,
.panel .bar-list > div[style*="text-align:center"]:only-child {
  padding: 16px !important;
  text-align: center;
  color: var(--reun-muted) !important;
  font-size: 12px !important;
  background: var(--reun-surface-2);
  border: 0.5px dashed var(--reun-border);
  border-radius: 8px;
}


/* ============================================================
 * Part Y — Mobile UX + FAB + 互動細節(2026-05-07)
 * Sidebar drawer / FAB(Quick action floating button)/ Keyboard hint
 * ============================================================ */

/* === Mobile sidebar drawer(<768px)=== */
@media (max-width: 768px) {
  /* sidebar 變成 drawer,預設藏起來 */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    z-index: 100 !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    border-right: 0.5px solid var(--reun-border) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  }
  body.reun-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
  body.reun-sidebar-open .reun-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Backdrop overlay */
  .reun-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 99;
  }

  /* Hamburger button(JS 注入到 .topbar) */
  .reun-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0.5px solid var(--reun-border);
    background: var(--reun-surface);
    border-radius: 8px;
    cursor: pointer;
    color: var(--reun-text);
    margin-right: 12px;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
  .reun-hamburger:hover {
    background: var(--reun-surface-2);
  }
  .reun-hamburger svg {
    width: 18px;
    height: 18px;
  }

  /* Main content fills width — sidebar 在 mobile 是 drawer 不佔空間 */
  .layout {
    grid-template-columns: 1fr !important;
  }
  .main {
    margin-left: 0 !important;
  }

  /* topbar 內 hamburger 顯示 */
  .topbar {
    padding: 10px 14px !important;
  }
}

/* Desktop:hide hamburger, hide backdrop */
@media (min-width: 769px) {
  .reun-hamburger,
  .reun-sidebar-backdrop {
    display: none !important;
  }
}

/* === FAB(Floating Action Button)右下快捷 === */
.reun-fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.reun-fab-container > * { pointer-events: auto; }

.reun-fab {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--reun-tint);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.32);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reun-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.42);
}
.reun-fab:active {
  transform: translateY(0) scale(0.98);
}

.reun-fab-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: bottom right;
}
.reun-fab-container.open .reun-fab-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.reun-fab-container.open .reun-fab {
  background: var(--reun-text);
}
.reun-fab-container.open .reun-fab .icon {
  transform: rotate(45deg);
}

.reun-fab-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 24px;
  background: var(--reun-surface);
  border: 0.5px solid var(--reun-border);
  color: var(--reun-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.reun-fab-item:hover {
  background: var(--reun-surface-2);
  transform: translateX(-2px);
}
.reun-fab-item .icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

@media (max-width: 768px) {
  .reun-fab-container {
    bottom: 18px;
    right: 14px;
  }
  .reun-fab {
    width: 52px;
    height: 52px;
  }
}

/* === Keyboard shortcut hint(顯示在右下角 footer)=== */
.reun-keyboard-hint {
  position: fixed;
  bottom: 14px;
  left: 260px;
  margin-left: 14px;
  font-size: 10px;
  color: var(--reun-muted);
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 40;
}
.reun-keyboard-hint .kbd {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 10px;
  padding: 2px 5px;
  background: var(--reun-surface-2);
  border: 0.5px solid var(--reun-border);
  border-radius: 3px;
  color: var(--reun-text-2);
}
@media (max-width: 768px) {
  .reun-keyboard-hint { display: none; }
}

/* === Tap target friendliness(mobile 按鈕至少 44x44 per Apple guidelines)=== */
@media (max-width: 768px) {
  .nav-item,
  button:not(.toolbar-btn):not(.reun-hamburger),
  .theme-btn {
    min-height: 40px !important;
  }
  .panel-head {
    min-height: 44px !important;
  }
}


/* ============================================================
 * Part Z — Sub-tab nav + 客戶分析 KPI cards + 收尾(2026-05-07)
 * ============================================================ */

/* === Sub-tab nav(KOL 管理頁等)=== */
.subtab-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--reun-surface-2);
  border: 0.5px solid var(--reun-border);
  border-radius: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.subtab-item {
  flex: 1;
  min-width: 100px;
  padding: 8px 14px;
  border-radius: 7px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--reun-text-2) !important;
  text-decoration: none !important;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: transparent;
}
.subtab-item:hover {
  background: var(--reun-surface);
  color: var(--reun-text) !important;
}
.subtab-item.active {
  background: var(--reun-surface) !important;
  color: var(--reun-text) !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 0.5px solid var(--reun-tint-ring);
}
.subtab-item.active::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--reun-tint);
  margin-right: 4px;
}

@media (max-width: 640px) {
  .subtab-item {
    flex: 1 0 auto;
    min-width: auto;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* === 客戶分析 6 個頂端 KPI 卡 — 跟 dashboard 一致風格 === */
/* 抓「高利潤大客 / 優質成長 / 走量型 / 一般 / 低利潤 / 待觀察」這類 lifecycle 分群卡 */
/* 結構是 grid 內多個 .card,標題在大數字下 */

/* === 收尾:.btn-o 補充樣式 === */
.btn-o {
  background: transparent !important;
  color: var(--reun-text) !important;
  border: 0.5px solid var(--reun-border) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-o:hover {
  background: var(--reun-surface-2) !important;
  border-color: var(--reun-tint-ring) !important;
  color: var(--reun-tint) !important;
}

/* === Empty state with CTA(KOL 管理 / 派圖 等空狀態)=== */
.card[style*="text-align:center"][style*="color:var(--reun-text-2)"] {
  padding: 40px 24px !important;
  background: var(--reun-surface) !important;
}
.card[style*="text-align:center"] [style*="font-size:48px"],
.card[style*="text-align:center"] [style*="font-size: 48px"] {
  font-size: 36px !important;
  opacity: 0.6;
  margin-bottom: 12px;
  line-height: 1;
}
.card[style*="text-align:center"] [style*="font-size:16px"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--reun-text) !important;
  margin: 8px 0 4px;
}
.card[style*="text-align:center"] [style*="font-size:13px"] {
  font-size: 12.5px !important;
  color: var(--reun-text-2) !important;
  margin-bottom: 16px;
}

/* === Page-head 跟 sub-tab 的間距 === */
.page-head + .subtab-nav {
  margin-top: 0 !important;
}

/* === Topbar 內 hamburger position 微調 === */
.topbar > .reun-hamburger {
  margin-right: 10px;
}


/* ============================================================
 * Part AA — Sticky table header + final polish(2026-05-07)
 * 所有長表格 header 捲動時黏附頂端 + table row hover + 客戶分析 6 KPI
 * ============================================================ */

/* === Sticky table header === */
.dtable {
  position: relative;
  border-collapse: separate !important;
  border-spacing: 0;
}
.dtable thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--reun-surface);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
@media (prefers-color-scheme: dark) {
  .dtable thead {
    background: rgba(28, 28, 30, 0.95);
  }
}
.dtable thead th {
  border-bottom: 0.5px solid var(--reun-border-strong) !important;
  position: relative;
}

/* === Table row hover & striping(微妙)=== */
.dtable tbody tr {
  transition: background 0.12s ease;
}
.dtable tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
@media (prefers-color-scheme: dark) {
  .dtable tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
  }
}
.dtable tbody tr:hover {
  background: var(--reun-surface-2) !important;
}

/* === Container scroll for table — overflow + max-height for long tables === */
.panel > div[style*="overflow-x:auto"],
.panel > [style*="overflow-x: auto"] {
  position: relative;
  max-height: 70vh;
  overflow-y: auto !important;
  scrollbar-width: thin;
}

/* === 客戶分析 6 KPI cards 統一 .stat-mini 風格(屬性選擇器抓現有 inline)=== */
/* 抓 grid 內含「高利潤大客 / 優質成長 / 走量型 / 一般 / 低利潤 / 待觀察」這類 lifecycle KPI */
.card[style*="text-align:center"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px;
  padding: 18px 14px !important;
  border: 0.5px solid var(--reun-border) !important;
  background: var(--reun-surface) !important;
  border-radius: 12px !important;
  transition: all 0.18s ease;
}
.card[style*="text-align:center"]:hover {
  border-color: var(--reun-tint-ring) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
/* 大數字統一 */
.card[style*="text-align:center"] > div:nth-of-type(1):not([class]) {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--reun-font-stack) !important;
  line-height: 1 !important;
  margin-bottom: 4px;
}
/* label */
.card[style*="text-align:center"] > div:not(:first-child) {
  font-size: 11px !important;
  color: var(--reun-muted) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === Filter bar 縮短(很多 tab 的 filter bar 太寬)=== */
.filter-bar [type="search"],
.filter-bar input[type="text"] {
  flex: 1;
  min-width: 180px;
  max-width: 480px;
}

/* === Sub-tab 細節:active 圖示更明顯 === */
.subtab-item.active {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.06) 0%, var(--reun-surface) 60%) !important;
}

/* === 同步資料 button (filter-bar 內藍色按鈕)強化 === */
button[onclick*="sync"],
.filter-bar button:not(.theme-btn):not(.btn-primary) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* === Mobile: 表格水平滾動更明顯 === */
@media (max-width: 640px) {
  .dtable thead {
    position: static !important;
  }
  .dtable {
    font-size: 12px !important;
  }
  .dtable th, .dtable td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
}

/* === Print friendly === */
@media print {
  .dtable thead { position: static !important; }
  .reun-fab-container, .reun-keyboard-hint, .reun-hamburger { display: none !important; }
  .panel.collapsed > *:not(.panel-head) { display: block !important; }  /* 印出時全部展開 */
}


/* ============================================================
 * Part AB — Sidebar group collapsible(2026-05-07)
 * 點 .nav-section 切換 next .nav 可見性,localStorage 記住狀態
 * ============================================================ */

.sidebar .nav-section {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: 14px 28px 6px 14px !important;
  transition: color 0.15s ease;
  border-radius: 6px;
}
.sidebar .nav-section:hover {
  color: var(--reun-text) !important;
}
.sidebar .nav-section::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-right: 1.2px solid var(--reun-muted);
  border-bottom: 1.2px solid var(--reun-muted);
  transform: rotate(45deg);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sidebar .nav-section.collapsed::after {
  transform: rotate(-45deg);
}
.sidebar .nav-section:hover::after {
  border-color: var(--reun-text);
}

/* Hide the .nav after a collapsed .nav-section */
.sidebar .nav-section.collapsed + .nav {
  display: none !important;
}

/* Smooth animation when expanding(微妙) */
@media (prefers-reduced-motion: no-preference) {
  .sidebar .nav-section:not(.collapsed) + .nav {
    animation: nav-expand 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes nav-expand {
    0% { opacity: 0; max-height: 0; }
    100% { opacity: 1; max-height: 600px; }
  }
}

/* Group with active item always shows green dot indicator */
.sidebar .nav-section.has-active {
  color: var(--reun-text) !important;
}
.sidebar .nav-section.has-active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 14px;
  background: var(--reun-tint);
  border-radius: 0 2px 2px 0;
  transform: translateY(-30%);
}

/* Mobile: in drawer, sidebar group title 增加 padding 讓 tap 友善 */
@media (max-width: 768px) {
  .sidebar .nav-section {
    padding: 16px 28px 8px 16px !important;
    font-size: 11px !important;
  }
  .sidebar .nav-section::after {
    top: 19px;
  }
}