/* Market Intelligence page (Operations section). Scoped under .ops-page
   so it reads the shared glass tokens (--mat-regular, --type-ink,
   --glass-edge, --chart-plate) the same way css/activity-log.css's
   .al-page does -- no new colour tokens invented, per DESIGN.md. These
   .ops-* classes are also reused by css/ops-crm.css and css/ops-tools.css
   for the shell (hero, cards, buttons, table, status banner). */

/* The HTML `hidden` attribute must win over any of this file's own
   `display` rules (.ops-card sets display:flex, which otherwise beats
   the UA [hidden]{display:none} rule on source order/specificity) --
   without this, a form or detail panel marked hidden="" still renders
   (caught visually: the Add-organization form and the org detail panel
   both showed up on a fresh Organizations tab load). */
.ops-page [hidden] { display: none !important; }

.ops-page {
  --surface: var(--mat-regular);
  --ink: var(--type-ink);
  --muted: var(--type-ink-soft);
  --border: var(--glass-edge);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 32px;
}

.ops-h1 {
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-lh);
  letter-spacing: var(--type-page-title-ls);
  color: var(--ink);
  margin: 0 0 4px;
}
.ops-sub {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--muted);
  margin: 0;
  max-width: 760px;
}

.ops-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; align-items: flex-start; }
.ops-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ops-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--type-button-size); font-weight: var(--type-button-weight);
  padding: 8px 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.ops-btn:hover { border-color: var(--primary, var(--ink)); }
.ops-btn-primary { background: var(--mat-btn-primary-glass); border-color: transparent; color: var(--type-button-ink); }
.ops-btn-danger { color: var(--danger); border-color: var(--danger); }
.ops-btn[disabled], .ops-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.ops-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.ops-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--type-label-size); font-weight: var(--type-label-weight); color: var(--muted); min-width: 180px; }
.ops-field select, .ops-field input, .ops-field textarea {
  font: inherit; font-size: var(--type-body-size); color: var(--ink);
  padding: 8px 10px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface);
}

.ops-status {
  font-size: var(--type-body-size); color: var(--muted);
  border: 1px dashed var(--border); border-radius: var(--r-card); padding: 10px 14px;
}
.ops-status.is-error { color: var(--danger); border-color: var(--danger); }

.ops-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ops-kpi {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 12px 14px;
}
.ops-kpi-num { font-size: var(--type-kpi-number-size); font-weight: var(--type-kpi-number-weight); line-height: var(--type-kpi-number-lh); color: var(--ink); }
.ops-kpi-unit { font-size: var(--type-kpi-unit-size); font-weight: var(--type-kpi-unit-weight); letter-spacing: var(--type-kpi-unit-ls); color: var(--muted); text-transform: uppercase; }

.ops-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.ops-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ops-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.ops-card-head h2 { font-size: var(--type-card-title-size); font-weight: var(--type-card-title-weight); color: var(--ink); margin: 0; }
.ops-card-note { font-size: var(--type-caption-size); color: var(--muted); margin: 0; max-width: 520px; }
.ops-card-foot { display: flex; justify-content: flex-end; }
.ops-link { font-size: var(--type-label-size); font-weight: var(--type-label-weight); color: var(--primary, var(--ink)); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ops-link:hover { text-decoration: underline; }

/* Charts and tables sit on the plate, never on glass/blur (TKT-000454) */
.ops-chart-wrap, .ops-table-wrap, .ops-map-wrap {
  background: var(--chart-plate); border: 1px solid var(--chart-plate-edge);
  border-radius: var(--r-ctl); padding: 8px; overflow-x: auto;
}
.ops-chart-wrap canvas { display: block; width: 100%; }
.ops-map-wrap { height: 320px; padding: 0; overflow: hidden; }

.ops-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.ops-table th, .ops-table td {
  font-size: var(--type-table-cell-size); font-weight: var(--type-table-cell-weight);
  color: var(--ink); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--chart-plate-edge);
}
.ops-table th { font-size: var(--type-label-size); font-weight: var(--type-label-weight); color: var(--muted); text-transform: uppercase; letter-spacing: var(--type-label-ls); }
.ops-table td.num, .ops-table th.num { text-align: right; }
.ops-table tbody tr:last-child td { border-bottom: none; }

.ops-seg { display: flex; border: 1px solid var(--border); border-radius: var(--r-chip); overflow: hidden; }
.ops-seg button {
  font-size: var(--type-chip-size); font-weight: var(--type-chip-weight); color: var(--muted);
  background: var(--surface); border: 0; padding: 5px 12px; cursor: pointer;
}
.ops-seg button.is-active { background: var(--mat-btn-primary-glass); color: var(--type-button-ink); }

.ops-rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ops-rank-list li { display: flex; justify-content: space-between; gap: 10px; font-size: var(--type-body-size); color: var(--ink); padding: 4px 0; border-bottom: 1px solid var(--chart-plate-edge); }
.ops-rank-list li span.ops-rank-val { color: var(--muted); font-variant-numeric: tabular-nums; }

.ops-chip { display: inline-block; font-size: var(--type-chip-size); font-weight: var(--type-chip-weight); padding: 2px 8px; border-radius: var(--r-chip); background: var(--chart-plate); color: var(--muted); }
.ops-chip.is-yes { background: var(--success-soft); color: var(--success); }
.ops-chip.is-no { background: var(--chart-plate); color: var(--muted); }

.ops-empty { font-size: var(--type-body-size); color: var(--muted); padding: 8px 0; }

@media (max-width: 900px) {
  .ops-card-row { grid-template-columns: 1fr; }
  .ops-hero { flex-direction: column; }
}
@media (max-width: 480px) {
  .ops-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}