/**
 * TEKAN ADS — Mission Control Dashboard (Phase 3)
 */

#page-dashboard.ds-mc {
  --mc-gap: var(--ds-space-3);
  --mc-gap-sm: var(--ds-space-2);
}

#page-dashboard .ds-root {
  display: flex;
  flex-direction: column;
  gap: var(--mc-gap);
  max-width: 1120px;
  margin-inline: auto;
  padding-bottom: var(--ds-space-4);
  background: transparent;
  color: var(--ds-color-text);
}

body:has(#page-dashboard:not(.hidden)) > .bg-glow::before,
body:has(#page-dashboard:not(.hidden)) > .bg-glow::after {
  opacity: 0.06;
}

/* ─── Hero / Command Header ─── */
.ds-mc-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
  padding-bottom: var(--ds-space-1);
  border-bottom: 1px solid var(--ds-color-divider);
}

.ds-mc-hero__eyebrow {
  font-size: var(--ds-text-small-size);
  font-weight: var(--ds-text-small-weight);
  line-height: var(--ds-text-small-lh);
  color: var(--ds-color-text-muted);
  margin: 0 0 0.35rem;
}

.ds-mc-hero__title {
  margin: 0;
  font-size: var(--ds-text-h1-size);
  line-height: var(--ds-text-h1-lh);
  font-weight: var(--ds-text-h1-weight);
  letter-spacing: var(--ds-text-h1-tracking);
}

.ds-mc-hero__subtitle {
  margin: 0.5rem 0 0;
  max-width: 36rem;
  font-size: var(--ds-text-body-size);
  line-height: var(--ds-text-body-lh);
  font-weight: var(--ds-text-body-weight);
  color: var(--ds-color-text-muted);
}

.ds-mc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-1);
}

.ds-mc-hero__updated {
  width: 100%;
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-disabled);
  text-align: left;
}

[dir="rtl"] .ds-mc-hero__updated {
  text-align: right;
}

/* ─── System Health Bar ─── */
.ds-mc-health {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1px;
  padding: 3px;
  background: var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  overflow: hidden;
}

.ds-mc-health__item {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--ds-color-surface);
  min-width: 0;
}

.ds-mc-health__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ds-color-text-disabled);
}

.ds-mc-health__dot--success { background: var(--ds-color-success); }
.ds-mc-health__dot--warning { background: var(--ds-color-warning); }
.ds-mc-health__dot--danger { background: var(--ds-color-danger); }
.ds-mc-health__dot--muted { background: var(--ds-color-text-disabled); }
.ds-mc-health__dot--info { background: var(--ds-color-info); }

.ds-mc-health__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ds-mc-health__label {
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-mc-health__status {
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Today Snapshot ─── */
.ds-mc-snapshot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-2);
}

.ds-mc-snapshot .ds-stat-card {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  box-shadow: none;
}

@media (max-width: 1024px) {
  .ds-mc-snapshot { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .ds-mc-snapshot { grid-template-columns: 1fr; }
}

/* ─── Split: Attention + Upcoming ─── */
.ds-mc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-2);
  align-items: start;
}

@media (max-width: 900px) {
  .ds-mc-split { grid-template-columns: 1fr; }
}

.ds-mc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-1);
  margin-bottom: var(--ds-space-2);
}

.ds-mc-section-head h2 {
  margin: 0;
  font-size: var(--ds-text-section-size);
  font-weight: var(--ds-text-section-weight);
  line-height: var(--ds-text-section-lh);
  letter-spacing: var(--ds-text-section-tracking);
  color: var(--ds-color-text-secondary);
}

.ds-mc-panel {
  padding: var(--ds-space-2);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
}

/* Attention rows */
.ds-mc-attention-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-mc-attention-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ds-space-1);
  align-items: center;
  padding: var(--ds-space-1);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-secondary-muted);
  border: 1px solid var(--ds-color-border);
}

.ds-mc-attention-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-warning-muted);
  color: var(--ds-color-warning);
  flex-shrink: 0;
}

.ds-mc-attention-row__title {
  font-size: var(--ds-text-body-size);
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-color-text);
  margin: 0;
}

.ds-mc-attention-row__desc {
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
  margin: 0.15rem 0 0;
}

.ds-mc-attention-ok {
  text-align: center;
  padding: var(--ds-space-3) var(--ds-space-2);
}

.ds-mc-attention-ok__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-success-muted);
  color: var(--ds-color-success);
  margin-bottom: var(--ds-space-1);
}

.ds-mc-attention-ok h3 {
  margin: 0 0 0.35rem;
  font-size: var(--ds-text-title-size);
  font-weight: var(--ds-text-title-weight);
}

.ds-mc-attention-ok p {
  margin: 0;
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
}

/* Upcoming timeline */
.ds-mc-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ds-mc-timeline-item {
  display: grid;
  grid-template-columns: 4.5rem 1px 1fr;
  gap: var(--ds-space-1);
  padding-bottom: var(--ds-space-2);
  position: relative;
}

.ds-mc-timeline-item:last-child {
  padding-bottom: 0;
}

.ds-mc-timeline-time {
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-color-text-secondary);
  font-variant-numeric: tabular-nums;
  padding-top: 0.125rem;
  text-align: left;
}

[dir="rtl"] .ds-mc-timeline-time {
  text-align: right;
}

.ds-mc-timeline-rail {
  background: var(--ds-color-border);
  width: 1px;
  justify-self: center;
  position: relative;
}

.ds-mc-timeline-rail::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-color-primary);
  box-shadow: 0 0 0 3px var(--ds-color-primary-muted);
}

.ds-mc-timeline-body {
  min-width: 0;
}

.ds-mc-timeline-title {
  font-size: var(--ds-text-body-size);
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-color-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-mc-timeline-meta {
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
  margin: 0.2rem 0 0.35rem;
}

.ds-mc-timeline-empty {
  padding: var(--ds-space-3) var(--ds-space-1);
  text-align: center;
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
}

/* ─── Campaign overview strip ─── */
.ds-mc-campaign {
  padding: var(--ds-space-2);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
}

.ds-mc-campaign__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-2);
}

@media (max-width: 768px) {
  .ds-mc-campaign__metrics { grid-template-columns: repeat(2, 1fr); }
}

.ds-mc-campaign__metric {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ds-mc-campaign__metric-label {
  font-size: var(--ds-text-card-title-size);
  font-weight: var(--ds-text-card-title-weight);
  color: var(--ds-color-text-muted);
}

.ds-mc-campaign__metric-value {
  font-size: var(--ds-text-kpi-size);
  font-weight: var(--ds-text-kpi-weight);
  line-height: var(--ds-text-kpi-lh);
  letter-spacing: var(--ds-text-kpi-tracking);
  color: var(--ds-color-text);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.ds-mc-campaign__metric-sub {
  font-size: var(--ds-text-small-size);
  font-weight: var(--ds-text-small-weight);
  line-height: var(--ds-text-small-lh);
  color: var(--ds-color-text-disabled);
}

.ds-mc-campaign__next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-2);
  padding-top: var(--ds-space-2);
  border-top: 1px solid var(--ds-color-divider);
}

.ds-mc-campaign__next-block {
  flex: 1 1 200px;
  min-width: 0;
}

.ds-mc-campaign__next-label {
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
  margin-bottom: 0.2rem;
}

.ds-mc-campaign__next-value {
  font-size: var(--ds-text-body-size);
  color: var(--ds-color-text-secondary);
  white-space: pre-line;
}

.ds-mc-countdown {
  font-size: var(--ds-text-small-size);
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-color-primary);
  margin-top: 0.2rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ─── Recent activity ─── */
.ds-mc-activity .ds-table-card {
  border: 1px solid var(--ds-color-border);
  box-shadow: none;
  background: var(--ds-color-surface);
}

.ds-mc-activity .ds-table-card__header {
  padding: var(--ds-space-2);
  border-bottom: 1px solid var(--ds-color-divider);
}

.ds-mc-activity .ds-table th {
  background: transparent;
}

/* ─── Charts (below fold) ─── */
.ds-mc-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-1);
}

@media (max-width: 900px) {
  .ds-mc-charts { grid-template-columns: 1fr; }
}

.ds-mc-chart {
  padding: var(--ds-space-2);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
}

.ds-mc-chart h3 {
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-label-weight);
  color: var(--ds-color-text-muted);
}

.ds-mc-platform-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: var(--ds-radius-full);
  font-size: 0.7rem;
  font-weight: var(--ds-text-label-weight);
  background: var(--ds-color-primary-muted);
  color: var(--ds-color-primary);
  border: 1px solid var(--ds-color-primary-border);
}

#page-dashboard .campaign-hero,
#page-dashboard #chart-msg-status,
#page-dashboard #chart-msg-status-platform {
  display: none !important;
}