/* ═══════════════════════════════════════════════════════════════
   风水平台 — macOS 內容層 · Dashboard 專用層 (macOS dashboard layer)
   Loaded AFTER macos-content.css. Additive only: restyles the
   項目成本儀錶盤 view (.dash-* classes) to the macOS glass dialect
   per user's mockup (dark violet bg · mint-green active tab ·
   orange milestone dots · sharp text). JS untouched.
   Rollback = delete this <link> in index.html.
   ═══════════════════════════════════════════════════════════════ */

/* ─── §7.1 Dashboard tokens — mockup-aligned accents ─── */
:root {
  --dash-mint:       #4efa9d;   /* active tab text (mockup mint) */
  --dash-mint-deep:  #163832;   /* active tab glass (mockup teal) */
  --dash-mint-soft:  rgba(52, 211, 153, 0.14);
  --dash-orange:     #f97316;   /* milestone done dot (mockup amber) */
  --dash-orange-2:   #ea580c;
  --dash-ink:        #f0ece6;   /* sharp primary text */
  --dash-ink-2:      #c8c4bc;   /* sharp secondary text */
  --dash-ink-3:      #9a9690;   /* sharp muted text */
  --dash-hero-border: rgba(100, 80, 130, 0.35);
  --dash-alert-red:  rgba(220, 70, 70, 0.4);
  --dash-track:      rgba(255, 255, 255, 0.06);
}

/* ─── §7.1b 浅色主题 — dashboard tokens 覆写 ─── */
body.theme-light {
  --dash-mint-deep:  #e8f5f0;   /* active tab glass (light teal) */
  --dash-mint-soft:  rgba(52, 211, 153, 0.18);
  --dash-ink:        #26221c;   /* sharp primary text */
  --dash-ink-2:      #55504a;   /* sharp secondary text */
  --dash-ink-3:      #8a847c;   /* sharp muted text */
  --dash-hero-border: rgba(120, 100, 80, 0.25);
  --dash-alert-red:  rgba(180, 74, 60, 0.35);
  --dash-track:      rgba(0, 0, 0, 0.07);
}

/* ─── §7.2 Masthead — seal + title + segmented tabs ─── */
.dash-masthead { gap: 14px; margin-bottom: 20px; }

.dash-masthead-titles h2 {
  font-size: 22px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--dash-ink);
}
.dash-masthead-titles p { color: var(--dash-ink-3); }

/* Segmented macOS control — mint active per mockup */
.dash-tabs {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--mac-hairline);
  border-radius: 12px;
  padding: 3px;
  box-shadow: var(--mac-inset-hi);
}
.dash-tabs .tab-btn {
  font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 9px;
  color: var(--dash-ink-2);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.dash-tabs .tab-btn:hover { background: var(--mac-hover-row); color: var(--dash-ink); }
.dash-tabs .tab-btn.active {
  background: var(--dash-mint-deep);
  color: var(--dash-mint);
  border: 1px solid rgba(52, 211, 153, 0.3);
  box-shadow: var(--mac-inset-hi), 0 0 12px rgba(52, 211, 153, 0.18);
}

/* ─── §7.3 Dashboard cards → frosted glass ─── */
.dash-card {
  background: var(--mac-glass-card);
  border: 1px solid var(--mac-border-gold);
  border-radius: 20px;
  box-shadow: var(--mac-inset-hi), 0 8px 24px rgba(0, 0, 0, 0.28);
}
.dash-card:hover { border-color: rgba(201,169,110,0.35); }

.dash-card-head {
  border-bottom: 1px solid rgba(201, 169, 110, 0.12);
}
.dash-card-title {
  color: var(--accent-gold);
  font-size: 13px; font-weight: 700; letter-spacing: 2.5px;
}
.dash-card-note { color: var(--dash-ink-3); }

/* ─── §7.4 聚寶盆 HERO — glassmorphism purple, gold topline ─── */
.dash-hero {
  background: linear-gradient(145deg, rgba(42, 32, 58, 0.82), rgba(24, 20, 40, 0.94));
  backdrop-filter: var(--mac-blur);
  -webkit-backdrop-filter: var(--mac-blur);
  border: 1px solid var(--dash-hero-border);
  border-radius: 28px;
  box-shadow: var(--mac-inset-hi), 0 14px 34px rgba(0, 0, 0, 0.4);
}
body.theme-light .dash-hero {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(244, 242, 238, 0.95));
  box-shadow: var(--mac-inset-hi), 0 14px 34px rgba(0, 0, 0, 0.1);
}
.dash-hero::after {                       /* soft glass sheen sweep */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
}
.dash-hero-topline {
  background: linear-gradient(90deg, transparent, #c9a96e, #c45a4a, #c9a96e, transparent);
  height: 3px;
}
.dash-proj-name { color: var(--dash-ink); font-size: 16px; font-weight: 700; }
.dash-proj-meta { color: var(--dash-ink-3); }
.dash-proj-icon {
  background: linear-gradient(145deg, rgba(201,169,110,0.16), rgba(196,90,74,0.12));
  border: 1px solid rgba(201,169,110,0.28);
  box-shadow: var(--mac-inset-hi);
}
.dash-hero-label { color: var(--dash-ink-3); }
.dash-hero-num { color: var(--mac-content-title); }
.dash-hero-status { color: var(--dash-ink-2); }
.dash-stats { border-top: 1px solid rgba(201,169,110,0.12); }
.dash-stats-item + .dash-stats-item { border-left: 1px solid rgba(201,169,110,0.10); }
.dash-stats-val { color: var(--dash-ink); }
.dash-stats-lbl { color: var(--dash-ink-3); }
.dash-ring-label { color: var(--dash-ink-3); }

/* ─── §7.5 行動提示 banner — red glass, sharp text ─── */
.dash-action {
  background: linear-gradient(150deg, rgba(196, 90, 74, 0.10), rgba(196, 90, 74, 0.02));
  border: 1px solid var(--dash-alert-red);
  border-radius: 16px;
  box-shadow: var(--mac-inset-hi), 0 6px 18px rgba(0, 0, 0, 0.22);
}
.dash-action-title { color: var(--dash-ink); font-weight: 600; }
.dash-action-title b { color: var(--mac-content-title); }
.dash-action-sub { color: var(--dash-ink-2); }
.dash-action-sub b { color: #ef4444; font-weight: 700; }

/* ─── §7.6 五行支出榜 — glass rows, sharp bars ─── */
.dash-cat-row { border-radius: 12px; }
.dash-cat-row + .dash-cat-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.dash-cat-row:hover { background: var(--mac-hover-row); }
.dash-cat-rank { color: var(--dash-ink-3); font-weight: 600; }
.dash-cat-name { color: var(--dash-ink); }
.dash-cat-amt { color: var(--dash-ink); }
.dash-cat-bar {
  height: 5px;
  background: var(--dash-track);
  box-shadow: var(--mac-inset-hi);
}
.dash-cat-bar-fill { border-radius: 3px; }
.dash-cat-meta { color: var(--dash-ink-3); }
.dash-cat-icon { border: 1px solid rgba(201, 169, 110, 0.14); box-shadow: var(--mac-inset-hi); }

/* ─── §7.7 工程進度長卷 — glass track, orange done dots ─── */
.dash-progress-track {
  background: var(--dash-track);
  box-shadow: var(--mac-inset-hi);
}
.dash-progress-fill {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}
.dash-progress-pct { color: var(--mac-content-title); }
.dash-progress-sub { color: var(--dash-ink-3); }

.dash-timeline::before {
  background: linear-gradient(to bottom, rgba(201, 169, 110, 0.35), rgba(201, 169, 110, 0.08));
}
.dash-milestone:hover { background: var(--mac-hover-row); }

.dash-mdot.done {
  background: linear-gradient(135deg, var(--dash-orange), var(--dash-orange-2));
  color: #fff;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.35);
}
.dash-mdot.pending {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #2a2d3a;
  color: #9ca3af;
}
body.theme-light .dash-mdot.pending {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #e8e6e0;
  color: #8a847c;
}
.dash-milestone-name { color: var(--dash-ink); }
.dash-milestone-name.done {
  color: var(--dash-ink-2);
  text-decoration: line-through;
}

.dash-pill.done {
  background: rgba(249, 115, 22, 0.12);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.22);
}
.dash-pill.pending {
  background: rgba(255, 255, 255, 0.03);
  color: var(--dash-ink-3);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── §7.8 預算明細 cards + 總計 → glass ─── */
.dash-budget-grid { gap: 14px; }
.dash-cat-card {
  background: var(--mac-glass-card);
  border-radius: 18px;
  box-shadow: var(--mac-inset-hi), 0 6px 18px rgba(0, 0, 0, 0.22);
}
.dash-cat-card .dash-cat-name { color: var(--dash-ink); }
.dash-cat-card-amt { color: var(--dash-ink); }
.dash-total {
  background: linear-gradient(145deg, rgba(42, 32, 58, 0.85), rgba(24, 20, 40, 0.95));
  border: 1px solid var(--dash-hero-border);
  border-radius: 18px;
  box-shadow: var(--mac-inset-hi), 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* ─── §7.9 里程碑 head card → glass ─── */
.dash-mile-head {
  background: var(--mac-glass-card);
  border: 1px solid var(--mac-border-soft);
  border-radius: 18px;
  box-shadow: var(--mac-inset-hi), 0 8px 22px rgba(0, 0, 0, 0.26);
}

/* ─── §7.10 Sharp-text sweep — every .dash-* muted state ─── */
.dash-seal, .dash-seal-small { color: #fff; }            /* 財運/行/支/程 seals stay solid */
.dash-hero-clouds { color: var(--dash-ink-3); }
.dash-hero-bagua { color: var(--mac-content-title); }

/* ─── §7.11 Mobile ≤768px — mirror content-layer compactness ─── */
@media (max-width: 768px) {
  .dash-hero { padding: 24px 20px 20px; border-radius: 22px; }
  .dash-card { padding: 18px 16px; border-radius: 18px; }
  .dash-tabs .tab-btn { padding: 7px 4px; }
  .dash-cat-card { padding: 16px 16px; }
}

/* ─── §7.12 Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .dash-hero, .dash-card, .dash-action { transition: none; }
  .dash-cat-bar-fill, .dash-progress-fill { transition: none; }
}