/* ── Theme: Accent Colors per Page / Context ── */

/* Deal Stage colors as CSS classes */
[data-stage="lead"]        { --stage-color: var(--text-secondary); --stage-bg: var(--bg-tertiary); }
[data-stage="qualified"]   { --stage-color: var(--teal);           --stage-bg: var(--teal-light); }
[data-stage="proposal"]    { --stage-color: var(--accent-dark);    --stage-bg: var(--accent-light); }
[data-stage="negotiation"] { --stage-color: var(--amber);          --stage-bg: var(--amber-light); }
[data-stage="won"]         { --stage-color: var(--teal);           --stage-bg: var(--teal-light); }
[data-stage="lost"]        { --stage-color: var(--coral);          --stage-bg: var(--coral-light); }

/* Kanban column header accent line */
.kanban-col[data-stage="lead"]        .kanban-col-title { color: var(--text-secondary); }
.kanban-col[data-stage="qualified"]   .kanban-col-title { color: var(--teal); }
.kanban-col[data-stage="proposal"]    .kanban-col-title { color: var(--accent-dark); }
.kanban-col[data-stage="negotiation"] .kanban-col-title { color: var(--amber); }
.kanban-col[data-stage="won"]         .kanban-col-title { color: var(--teal); }
.kanban-col[data-stage="lost"]        .kanban-col-title { color: var(--coral); }

/* ── Color Tokens per Module ── */
.contacts-accent  { color: var(--accent); }
.deals-accent     { color: var(--teal); }
.activities-accent { color: var(--coral); }

/* ── Metric Card Color Variants ── */
.metric-card.purple .metric-icon { background: var(--accent-light); color: var(--accent-dark); }
.metric-card.teal   .metric-icon { background: var(--teal-light);   color: var(--teal); }
.metric-card.amber  .metric-icon { background: var(--amber-light);  color: var(--amber); }
.metric-card.coral  .metric-icon { background: var(--coral-light);  color: var(--coral); }

.metric-card.purple .metric-value { color: var(--accent-dark); }
.metric-card.teal   .metric-value { color: var(--teal); }
.metric-card.amber  .metric-value { color: var(--amber); }
.metric-card.coral  .metric-value { color: var(--coral); }

/* ── Sidebar Active State per Route ── */
.nav-item[data-route="/dashboard"].active  { background: var(--accent-light); color: var(--accent-dark); }
.nav-item[data-route="/contacts"].active   { background: var(--teal-light);   color: var(--teal); }
.nav-item[data-route="/companies"].active  { background: var(--accent-light); color: var(--accent-dark); }
.nav-item[data-route="/deals"].active      { background: var(--amber-light);  color: var(--amber); }
.nav-item[data-route="/activities"].active { background: var(--coral-light);  color: var(--coral); }
.nav-item[data-route="/users"].active      { background: var(--accent-light); color: var(--accent-dark); }

/* ── Module Identity: topbar accent strip + page title ──────────────────────
   Uses CSS :has() – supported in all evergreen browsers (Chrome 105+, Firefox 121+, Safari 15.4+).
   Sets --mod-color on body so topbar border and page-title pick up the right hue.
   Result: a 2px colored bottom border on the topbar + matching page title – subtle, instant recognition.
────────────────────────────────────────────────────────────────────────────── */
body { --mod-color: var(--border); }

body:has(.nav-item[data-route="/dashboard"].active)  { --mod-color: var(--accent-dark); }
body:has(.nav-item[data-route="/contacts"].active)   { --mod-color: var(--teal); }
body:has(.nav-item[data-route="/companies"].active)  { --mod-color: var(--accent-dark); }
body:has(.nav-item[data-route="/deals"].active)      { --mod-color: var(--amber); }
body:has(.nav-item[data-route="/activities"].active) { --mod-color: var(--coral); }
body:has(.nav-item[data-route="/users"].active)      { --mod-color: var(--accent-dark); }

/* Topbar: replace the 1px neutral border with a 2px colored accent */
.topbar {
  border-bottom-width: 2px;
  border-bottom-color: var(--mod-color);
  transition: border-bottom-color 0.2s ease;
}

/* Page title in topbar inherits the module color */
.page-title {
  color: var(--mod-color);
  transition: color 0.2s ease;
}

/* Bottom-nav mobile active dot */
.bottom-nav-item[data-route="/contacts"].active  { color: var(--teal); }
.bottom-nav-item[data-route="/deals"].active     { color: var(--amber); }

/* ── Focus Ring per Context ── */
.contacts-context :focus-visible  { outline-color: var(--teal); }
.deals-context :focus-visible     { outline-color: var(--amber); }

/* ── Print Styles ── */
@media print {
  .sidebar, .topbar, .bottom-nav, .btn, .toast-root, .command-palette { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}