/* design-kit/css/portal-monthly.css
 *
 * Styles for the Monthly Report config card. Append to portal-form.css or
 * load as a separate stylesheet — uses the same tokens as everything else
 * in the portal.
 *
 * Class naming follows two conventions:
 *   • .portal-form__* / .portal-card__* — BEM additions to existing portal
 *     primitives, reused where the monthly card needs them.
 *   • .mrb-* — Monthly Report Builder-specific helpers, namespaced so they
 *     don't collide with daily-side equivalents.
 */

/* ── Portal-card additions (used by the gate state + locked explainer) ── */

.portal-card__locked-explainer {
  padding: 18px 24px 24px;
}
.portal-card__locked-explainer p + p { margin-top: 8px; }

.tdl-pill--muted {
  background: var(--tdl-surf-1);
  color: var(--tdl-fg-4);
  border: 1px dashed var(--tdl-hairline);
}


/* ── Portal-form additions ────────────────────────────────────────────── */

/* .portal-form__fieldset--wide previously zeroed padding-inline so the
   slot table could span full width. Now fieldsets have no padding at all,
   so the modifier is a no-op left in place for any markup still using it. */
.portal-form__fieldset--wide { /* no longer needed */ }

.portal-form__row-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.portal-form__actions {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--tdl-hairline);
}


/* ── Monthly Report Builder helpers ─────────────────────────────────────
 * Section toggles + locked + always
 * ────────────────────────────────────────────────────────────────────── */

.mrb-toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mrb-section-toggle {
  display: flex; align-items: center; gap: 10px;
  background: var(--tdl-surf-2);
  border: 1px solid var(--tdl-hairline-2);
  border-radius: var(--tdl-radius-md);
  padding: 10px 14px;
  cursor: pointer;
}
.mrb-section-toggle.is-locked { opacity: 0.65; cursor: default; }
.mrb-section-toggle input[type="checkbox"] {
  accent-color: var(--tdl-accent);
  width: 14px; height: 14px;
}
.mrb-section-toggle__name {
  flex: 1;
  font-family: var(--tdl-font-display);
  font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mrb-section-toggle__always {
  font-family: var(--tdl-font-display);
  font-weight: 700; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
}

@media (max-width: 880px) {
  .mrb-toggle-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── External links row (Foreplay v1, more later) ─────────────────────── */

.mrb-ext-link-row {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 12px 16px;
  align-items: center;
  background: var(--tdl-surf-2);
  border: 1px solid var(--tdl-hairline-2);
  border-radius: var(--tdl-radius-md);
  padding: 12px 14px;
}
.mrb-ext-link-row__toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.mrb-ext-link-row__toggle input[type="checkbox"] {
  accent-color: var(--tdl-accent);
  width: 14px; height: 14px;
}
.mrb-ext-link-row__name {
  font-family: var(--tdl-font-display);
  font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ── Comparison default note (above the slot picker) ──────────────────── */

/* .mrb-comparison-note moved to a hint under the comparison dropdown.
   Keep selector as a no-op for any markup still using it. */
.mrb-comparison-note { /* now styled via .portal-form__hint */ }


/* ── Slot picker table — 4-column grid (# / Metric / Label / Caption) ── */

.mrb-subheading {
  font-family: var(--tdl-font-display);
  font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 16px 0 12px;
  color: var(--tdl-fg);
}

.mrb-slot-table-head {
  display: grid;
  grid-template-columns: 40px 1.1fr 1.1fr 1fr 1fr;
  gap: var(--tdl-space-3);
  align-items: center;
  padding: 0 0 var(--tdl-space-2);
  border-bottom: 1px solid var(--tdl-hairline);
  margin-bottom: var(--tdl-space-2);
}
.mrb-slot-table-head > div {
  font-family: var(--tdl-font-display);
  font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tdl-fg-3);
}

.mrb-slot-row {
  display: grid;
  grid-template-columns: 40px 1.1fr 1.1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.mrb-slot-row__num {
  font-family: var(--tdl-font-display);
  font-weight: 900; font-size: 13px;
  color: #777;
  text-align: center;
}

@media (max-width: 880px) {
  .mrb-slot-table-head { display: none; }
  .mrb-slot-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tdl-hairline);
  }
  .mrb-slot-row__num {
    text-align: left;
    color: var(--tdl-accent);
  }
}


/* ── 03 / 04 / 06 placeholder roadmap cards ──────────────────────────── */

.mrb-placeholder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
/* Roadmap placeholders — these are filler cards for sections we haven't
   built yet. Visually muted so they don't compete with real config. */
.mrb-placeholder {
  background: transparent;
  border: 1px dashed var(--tdl-hairline);
  border-radius: var(--tdl-radius-md);
  padding: 14px 16px;
  color: var(--tdl-fg-4);
  font-size: 13px; line-height: 1.55;
  opacity: 0.65;
}
.mrb-placeholder:hover { opacity: 1; }
.mrb-placeholder strong {
  display: block;
  font-family: var(--tdl-font-display);
  font-weight: 900; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d6d6d6;
  margin-bottom: 6px;
}
.mrb-placeholder p { margin: 0 0 8px; }
.mrb-placeholder__configurable {
  font-family: var(--tdl-font-display);
  font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tdl-fg-4);
  display: inline-block;
  margin-top: 4px;
}

@media (max-width: 960px) {
  .mrb-placeholder-grid { grid-template-columns: 1fr; }
}

/* ── Conversion sources: faded state when Leads is disabled ────────────
   We fade individual children (label + select) rather than the wrapper,
   because CSS opacity isn't restorable once compounded on a descendant
   — and we want the "Enable" checkbox + its hint to stay at full opacity
   so the user can flip it on without hunting for a faded control. */
.mrb-conv-leads.is-disabled > label {
  opacity: 0.45;
}
.mrb-conv-leads.is-disabled > select {
  opacity: 0.45;
  background-color: rgba(255, 255, 255, 0.02);
  cursor: not-allowed;
}
.mrb-conv-leads.is-disabled > select option {
  font-style: italic;
}

/* ── Conversion source rows ─────────────────────────────────────────────
   Same visual rhythm as the hero/KPI slot rows but with a label up top
   and the two dropdowns + hint stacked below. */
.mrb-conv-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--tdl-hairline);
}
.mrb-conv-row:last-child { border-bottom: none; }
.mrb-conv-row__label {
  font-family: var(--tdl-font-display);
  font-weight: 900; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdl-fg);
}
.mrb-conv-row__hint {
  grid-column: 1 / -1;
  font-size: 12px; color: var(--tdl-fg-3);
}
.mrb-conv-row.is-disabled > .mrb-conv-row__label,
.mrb-conv-row.is-disabled > select { opacity: 0.45; cursor: not-allowed; }

/* ── Trend outcome pair ────────────────────────────────────────────── */
.mrb-trend-outcome__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── No-scan inline notice ─────────────────────────────────────────── */
.mrb-scan-notice {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 64, 0, 0.06);
  border: 1px solid rgba(255, 64, 0, 0.25);
  color: var(--tdl-fg);
  font-size: 13px; line-height: 1.5;
  margin-bottom: 16px;
}
.mrb-scan-notice strong { color: var(--tdl-accent); }

@media (max-width: 880px) {
  .mrb-conv-row { grid-template-columns: 1fr; }
}