/* CRM page (Operations section). Builds on the shared .ops-* shell in
   css/ops-market.css (cards, buttons, tables, status banners) -- this
   file only adds what's CRM-specific: tabs, the kanban board (same
   column/card approach as css/ticketing.css's board), forms and the
   activity feed. Same token scoping as .ops-page (--surface/--ink/
   --muted/--border read the shared glass tokens), so nothing here
   needs its own dark-mode block. */

.ops-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ops-tab {
  font-size: var(--type-button-size); font-weight: var(--type-button-weight); color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 4px; margin-bottom: -1px; cursor: pointer;
}
.ops-tab.is-active { color: var(--ink); border-bottom-color: var(--mat-btn-primary-glass, var(--ink)); }
.ops-tab-panel { display: none; flex-direction: column; gap: 16px; }
.ops-tab-panel.is-active { display: flex; }

/* Kanban board -- columns = pipeline stages, cards = deals (mirrors
   css/ticketing.css's board layout: horizontal scroll of fixed-width
   columns, each with its own scrolling card stack). */
.ops-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.ops-board-col {
  flex: 0 0 240px; background: var(--chart-plate); border: 1px solid var(--chart-plate-edge);
  border-radius: var(--r-card); padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto;
}
.ops-board-col-head { display: flex; justify-content: space-between; font-size: var(--type-label-size); font-weight: var(--type-label-weight); color: var(--muted); text-transform: uppercase; letter-spacing: var(--type-label-ls); padding: 2px 4px 6px; }
.ops-deal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.ops-deal-title { font-size: var(--type-body-size); font-weight: 600; color: var(--ink); }
.ops-deal-meta { font-size: var(--type-caption-size); color: var(--muted); }
.ops-deal-amount { font-size: var(--type-caption-size); color: var(--ink); font-variant-numeric: tabular-nums; }
.ops-deal-stage-move { font-size: var(--type-chip-size); padding: 4px 6px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface); color: var(--ink); width: 100%; }

/* Forms */
.ops-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.ops-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }

/* Organization detail */
.ops-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ops-detail-grid h3 { font-size: var(--type-label-size); color: var(--muted); text-transform: uppercase; letter-spacing: var(--type-label-ls); margin: 0 0 6px; }
.ops-simple-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--type-body-size); color: var(--ink); }

/* Activity feed */
.ops-activity-feed { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ops-activity-feed li { display: flex; gap: 8px; font-size: var(--type-body-size); color: var(--ink); border-left: 2px solid var(--border); padding-left: 10px; }
.ops-activity-feed .ops-activity-type { font-weight: 600; text-transform: capitalize; }
.ops-activity-feed .ops-activity-date { font-size: var(--type-caption-size); color: var(--muted); }

/* Role gating: hidden entirely (not just disabled) for read-only roles,
   toggled by js/ops-crm.js reading sessionStorage edash-role the same
   way js/admin-view.js / js/setting.js already do. */
.ops-write-only.is-hidden { display: none !important; }

@media (max-width: 900px) {
  .ops-form { grid-template-columns: 1fr; }
  .ops-detail-grid { grid-template-columns: 1fr; }
}