/* ============================================================================
   CS Edge — page layouts.
   Reusable components live in design-system.css; this file only positions
   them. Anything here that could be reused belongs in the design system.
   ========================================================================== */

/* ── Operations Dashboard ─────────────────────────────────────────────────
   A five-band grid sized to answer every question above the fold on a 1080p
   screen. Bands collapse to a single column on tablets rather than shrinking,
   because a squeezed chart answers nothing.                                */
.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    "trust   trust"
    "insight insight"
    "status  status"
    "equity  alerts"
    "trades  alerts";
  gap: var(--ds-sp-3);
  align-content: start;
}
.ops-grid__trust { grid-area: trust; }
.ops-grid__insight { grid-area: insight; }
.ops-grid__status { grid-area: status; }
.ops-grid__equity { grid-area: equity; }
.ops-grid__alerts { grid-area: alerts; overflow: hidden; }
.ops-grid__trades { grid-area: trades; }

/* Hero health score sits beside the four supporting KPIs at 1:2 weight */
.ops-trust-row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--ds-sp-3);
  align-items: stretch;
}
.ops-trust-row .ds-metric--hero {
  justify-content: center;
  text-align: center;
  align-items: center;
}
.ops-trust-row .ds-metric__foot { flex-direction: column; gap: var(--ds-sp-1); }

.ops-grid__status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}
.ops-status-value {
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ops-status-foot {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-2);
  font-size: var(--ds-fs-xs);
  margin-top: var(--ds-sp-1);
}
.ops-status-foot .ds-section-header__link { margin-inline-start: auto; }

.ops-equity-head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--ds-sp-2);
}
.ops-equity-total {
  font-size: 1.5rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ops-equity-canvas { height: 132px; position: relative; }
.ops-grid__alerts .ds-timeline { overflow-y: auto; }

/* The seven answers must all sit above the fold on a 1080p screen, so the
   dashboard trims its own rhythm rather than relying on page scroll. Only
   applied where there is genuinely a full-height desktop viewport. */
@media (min-width: 1200px) and (min-height: 860px) {
  .ops-grid { gap: var(--ds-sp-2); }
  .ops-page-header { margin-bottom: var(--ds-sp-3); padding-bottom: var(--ds-sp-2); }
  .ops-grid__trust .ds-metric--hero { padding: var(--ds-sp-3) var(--ds-sp-4); }
  .ops-grid__alerts .ds-timeline { max-height: 44vh; }
  .ops-grid__trades .ds-list__row { padding-block: .3rem; }
  .ops-grid__trades .ds-list__sub { font-size: var(--ds-fs-micro); }
}

@media (max-width: 1199.98px) {
  .ops-trust-row { grid-template-columns: 1fr; }
  .ops-trust-row .ds-metric--hero { padding: var(--ds-sp-4); }
}
@media (max-width: 991.98px) {
  .ops-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "trust" "insight" "status" "equity" "trades" "alerts";
  }
  .ops-grid__status { grid-template-columns: 1fr; }
}

/* ── Trades ───────────────────────────────────────────────────────────── */
.trades-summary {
  display: grid;
  /* ‎auto-fit‎ لا ‎repeat(4)‎: أُضيف مقياسان (متوسّط R ونسبة الفوز)
     فصار الستّة يُحشرون في أربعة أعمدة. والعدد الثابت يعني أنّ كل
     إضافةٍ لاحقة تكسر الصفّ بصمت. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-4);
}
.trades-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--ds-sp-3);
}
.trades-sort-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--ds-sp-2);
  padding: var(--ds-sp-2) 0;
}
.trades-sort-bar .ds-btn--sm { font-size: var(--ds-fs-micro); }
.ds-th-sortable { cursor: pointer; user-select: none; }
.ds-th-sortable .ds-th-sort::after { content: "⇅"; opacity: .35; margin-inline-start: .25rem; font-size: .75em; }
.trade-symbol { display: flex; flex-direction: column; gap: .1rem; }
.trade-symbol__name { font-weight: 600; color: var(--ds-text-strong); }
.trade-symbol__meta { font-size: var(--ds-fs-micro); color: var(--ds-text-muted); }

.trade-reasons { display: flex; gap: var(--ds-sp-1); overflow: hidden; }
.trade-reason {
  font-size: var(--ds-fs-micro);
  color: var(--ds-text-muted);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  padding: .1rem .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
.trade-reason--more { color: var(--ds-text-faint); background: transparent; }

/* ── AI Learning cards ───────────────────────────────────────────────── */
.ai-learning-list { display: flex; flex-direction: column; gap: var(--ds-sp-3); }
.ai-learning-card {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-sp-3);
  background: var(--ds-surface-1);
}
.ai-learning-card__head { display: flex; gap: var(--ds-sp-2); align-items: flex-start; margin-bottom: var(--ds-sp-2); }
.ai-learning-card__icon { font-size: 1.25rem; line-height: 1; }
.ai-learning-card__title { margin: 0; font-size: var(--ds-fs-md); }
.ai-learning-card__sub { margin: .15rem 0 0; font-size: var(--ds-fs-micro); color: var(--ds-text-muted); }
.ai-learning-card__desc { margin: 0 0 var(--ds-sp-2); line-height: 1.6; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.ai-learning-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--ds-sp-2);
  margin: 0 0 var(--ds-sp-2);
  font-size: var(--ds-fs-micro);
}
.ai-learning-card__stats dt { color: var(--ds-text-faint); margin: 0; }
.ai-learning-card__stats dd { margin: .1rem 0 0; font-weight: 600; }
.ai-learning-card__meta { margin: 0 0 var(--ds-sp-2); font-size: var(--ds-fs-micro); }
.ai-learning-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-2); flex-wrap: wrap; }

/* ── Watchlist ────────────────────────────────────────────────────────── */
.watch-distance { display: flex; align-items: center; gap: var(--ds-sp-2); }
.watch-distance__track {
  flex: 1;
  min-width: 3rem;
  height: 5px;
  border-radius: 999px;
  background: var(--ds-surface-2);
  overflow: hidden;
}
.watch-distance__fill { display: block; height: 100%; border-radius: 999px; }
.watch-distance__fill--success { background: var(--ds-success); }
.watch-distance__fill--warn { background: var(--ds-warn); }
.watch-distance__fill--muted { background: var(--ds-text-faint); }

@media (max-width: 767.98px) {
  .trades-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Analytics ────────────────────────────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4);
}
.analytics-chart { height: 260px; position: relative; }
.analytics-chart--sm { height: 190px; }

@media (max-width: 991.98px) {
  .analytics-grid { grid-template-columns: 1fr; }
}

/* ── AI intelligence centre ───────────────────────────────────────────── */
.ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--ds-sp-4);
  align-items: start;
}
.ai-verdict {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-4);
  flex-wrap: wrap;
}
.ai-verdict__score {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ai-verdict__body { min-width: 0; flex: 1; }
.ai-module {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3) 0;
  border-bottom: 1px solid var(--ds-line-soft);
}
.ai-module:last-child { border-bottom: none; }
.ai-module__body { min-width: 0; flex: 1; }
.ai-module__name { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-text-strong); }
.ai-module__desc { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }

@media (max-width: 1199.98px) {
  .ai-grid { grid-template-columns: 1fr; }
}

/* ── Optimization ─────────────────────────────────────────────────────── */
.opt-params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-1);
}
.opt-param {
  font-size: var(--ds-fs-micro);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  padding: .1rem .35rem;
  white-space: nowrap;
}
.opt-param__key { color: var(--ds-text-muted); }
.opt-param__val { color: var(--ds-text-strong); font-weight: 600; }
.opt-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--ds-fs-micro);
  font-weight: 700;
  background: var(--ds-surface-2);
  color: var(--ds-text-muted);
}
.opt-rank--1 { background: var(--ds-success-dim); color: var(--ds-success); }

/* ── Research ─────────────────────────────────────────────────────────── */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--ds-sp-4);
}

/* ── Splits (analytics) ───────────────────────────────────────────────── */
.splits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4);
}
@media (max-width: 991.98px) {
  .splits-grid { grid-template-columns: 1fr; }
}

/* ── Compatibility shims ──────────────────────────────────────────────────
   Scanner, watches and settings still use the pre-PX-01 markup. These rules
   map the old class names onto design-system styling so those pages inherit
   the new typography and spacing without being rewritten this sprint.     */
.page-header {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--ds-sp-5);
  padding-bottom: var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
}
.page-header h1 {
  font-size: var(--ds-fs-xl);
  font-weight: 650;
  margin: 0;
  color: var(--ds-text-strong);
}
.page-subtitle { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }
.page-tabs {
  display: flex;
  gap: var(--ds-sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ds-line);
  margin-bottom: var(--ds-sp-4);
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
  flex: 0 0 auto;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  font-size: var(--ds-fs-sm);
  font-family: inherit;
  color: var(--ds-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.page-tab:hover { color: var(--ds-text); }
.page-tab.active {
  color: var(--ds-text-strong);
  border-bottom-color: var(--ds-success);
  font-weight: 600;
}
.page-tab-panel { display: none; }
.page-tab-panel.active { display: block; }