/* design-kit/css/portal-form.css
   Styles for the agency-portal Daily Report config card and its descendants.
   Uses TIDAL design tokens throughout so it inherits any kit-wide change.

   Loaded by base.html alongside the other kit stylesheets.
   Class namespace: .portal-form, .tcp-* (kit utilities) */

/* ──────────────────────────────────────────────────────────
   Card container
   ────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   Form rows + inputs
   ────────────────────────────────────────────────────────── */

.portal-form {
  display: flex;
  flex-direction: column;
  gap: var(--tdl-space-5, 20px);
}

.portal-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--tdl-space-2, 8px);
}

.portal-form__row > label,
.portal-form__row-pair > .portal-form__row > label {
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tdl-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--tdl-fg-3);
}

.portal-form__row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tdl-space-5, 20px);
}

.portal-form__hint {
  /* Hint paragraph — kit body-sm size (14px), muted but readable. */
  display: block;
  color: var(--tdl-fg-3);
  font-size: var(--tdl-fs-sm, 14px);
  line-height: 1.55;
  margin-top: var(--tdl-space-2, 8px);
}

.portal-form__hint code {
  background: var(--tdl-surf-2);
  padding: 1px 6px;
  border-radius: var(--tdl-radius-sm);
  font-family: var(--tdl-font-mono);
  font-size: 13px;
  color: var(--tdl-fg-2);
}

.portal-form__row--sheet .portal-form__sheet-row {
  display: flex;
  gap: var(--tdl-space-2, 8px);
  align-items: stretch;
  flex-wrap: wrap;
}

.portal-form__row--sheet input.tdl-input {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--tdl-font-mono);
  font-size: 12px;
}

.portal-form__sheet-open {
  flex-shrink: 0;
  white-space: nowrap;
}

.portal-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tdl-space-3, 12px);
  padding-top: var(--tdl-space-3, 12px);
  border-top: 1px solid var(--tdl-hairline);
  margin-top: var(--tdl-space-2, 8px);
}

.portal-form__inline {
  display: flex;
  gap: var(--tdl-space-2, 8px);
  align-items: center;
  flex-wrap: wrap;
}

.portal-form__inline .tdl-input {
  flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────
   Sections + metrics block
   ────────────────────────────────────────────────────────── */

/* Fieldsets are flat logical groupings — no nested-box chrome.
   Vertical spacing separates them; a hairline-top draws the divide for
   sections after the first. Drops the prior border+background which
   created an awkward inset look that didn't match the rest of the kit. */
.portal-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  display: block;
}
.portal-form__fieldset + .portal-form__fieldset {
  /* Breathe between sections. space-8 == 32px. */
  margin-top: var(--tdl-space-8);
  padding-top: var(--tdl-space-8);
  border-top: 1px solid var(--tdl-hairline);
}

.portal-form__fieldset > legend {
  /* Flat heading. Float-detached from any border. */
  padding: 0;
  margin: 0 0 var(--tdl-space-3);
  background: transparent;
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: var(--tdl-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--tdl-accent);
  /* Make legends behave like block headings inside the fieldset rather
     than as float-on-border markers. */
  display: block;
  width: 100%;
}

.portal-form__section-block {
  border: 1px solid var(--tdl-hairline);
  border-radius: var(--tdl-radius-md, 6px);
  background: var(--tdl-surf-2);
  margin-top: var(--tdl-space-3, 12px);
  overflow: hidden;
  transition: border-color 140ms ease;
}

.portal-form__section-block:hover {
  border-color: var(--tdl-hairline-2);
}

.portal-form__section-block[open] {
  border-color: var(--tdl-hairline-3);
}

.portal-form__section-block > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--tdl-space-4, 16px) var(--tdl-space-5, 20px);
  display: flex;
  align-items: center;
  gap: var(--tdl-space-3, 12px);
  user-select: none;
  position: relative;
  transition: background 140ms ease;
}

.portal-form__section-block > summary::-webkit-details-marker { display: none; }

.portal-form__section-block > summary::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tdl-fg-3);
  border-bottom: 2px solid var(--tdl-fg-3);
  transform: rotate(-45deg);
  transition: transform 180ms ease;
  flex-shrink: 0;
  margin-right: var(--tdl-space-2, 8px);
}

.portal-form__section-block[open] > summary::before {
  transform: rotate(45deg);
  border-color: var(--tdl-accent);
}

.portal-form__section-block > summary:hover {
  background: var(--tdl-surf-3);
}

.portal-form__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--tdl-space-2, 8px);
  cursor: pointer;
}

.portal-form__toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--tdl-accent);
  cursor: pointer;
}

.portal-form__section-name {
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tdl-fg);
}

.portal-form__section-count {
  margin-left: auto;
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdl-fg-4);
}

.portal-form__section-body {
  padding: var(--tdl-space-5, 20px);
  border-top: 1px solid var(--tdl-hairline);
  background: var(--tdl-surf-1);
  display: flex;
  flex-direction: column;
  gap: var(--tdl-space-4, 16px);
}

.portal-form__section-body > .portal-form__row > label {
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tdl-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--tdl-fg-3);
}

/* ──────────────────────────────────────────────────────────
   Metrics grid — pill-style checkboxes
   ────────────────────────────────────────────────────────── */

.portal-form__metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--tdl-space-2, 8px);
}

.portal-form__metric {
  display: inline-flex;
  align-items: center;
  gap: var(--tdl-space-2, 8px);
  padding: 8px 12px;
  background: var(--tdl-surf-2);
  border: 1px solid var(--tdl-hairline);
  border-radius: var(--tdl-radius-md, 6px);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  font-family: var(--tdl-font-body);
}

.portal-form__metric:hover {
  border-color: var(--tdl-hairline-3);
  background: var(--tdl-surf-3);
}

.portal-form__metric input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--tdl-accent);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.portal-form__metric input[type="checkbox"]:checked ~ .portal-form__metric-label {
  color: var(--tdl-fg);
}

.portal-form__metric:has(input:checked) {
  border-color: var(--tdl-accent);
  background: var(--tdl-neg-bg-soft);
}

.portal-form__metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--tdl-fg-3);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-form__metric-key {
  font-family: var(--tdl-font-mono);
  font-size: 10px;
  color: var(--tdl-fg-5);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* ──────────────────────────────────────────────────────────
   Recent-runs widget
   ────────────────────────────────────────────────────────── */

.portal-form__error-row code {
  display: block;
  background: var(--tdl-neg-bg-soft);
  border-left: 3px solid var(--tdl-neg);
  padding: var(--tdl-space-2, 8px) var(--tdl-space-3, 12px);
  font-family: var(--tdl-font-mono);
  font-size: 11px;
  color: var(--tdl-neg-fg);
  white-space: pre-wrap;
}

/* Pill colour overrides for run statuses — driven by --tdl-* tokens */
.tdl-pill-pos    { background: var(--tdl-pos-bg); color: var(--tdl-pos); }
.tdl-pill-live   { background: var(--tdl-cool-bg); color: var(--tdl-cool); }
.tdl-pill-warn   { background: var(--tdl-warn-bg); color: var(--tdl-warn); }
.tdl-pill-neg    { background: var(--tdl-neg-bg);  color: var(--tdl-neg); }
.tdl-pill-accent { background: var(--tdl-accent);  color: var(--tdl-accent-fg); }
.tdl-pill-muted  { background: var(--tdl-surf-3);  color: var(--tdl-fg-4); }

/* ──────────────────────────────────────────────────────────
   Mobile
   ────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  
  .portal-form__row-pair { grid-template-columns: 1fr; }
  .portal-form__metrics-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .portal-form__row--sheet .portal-form__sheet-row { flex-direction: column; }
  .portal-form__row--sheet input.tdl-input { flex: 1 1 auto; }
}

/* Manual-run triggers — Refresh now + Backfill side-by-side on desktop */
.portal-form__triggers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tdl-space-4, 16px);
  margin-top: var(--tdl-space-3, 12px);
}
.portal-form__trigger {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tdl-space-2, 8px);
  padding: var(--tdl-space-4, 16px);
  background: var(--tdl-surf-2);
  border: 1px solid var(--tdl-hairline);
  border-radius: var(--tdl-radius-md, 6px);
}
.portal-form__trigger > .portal-form__hint {
  margin-top: 0;
}
@media (max-width: 720px) {
  .portal-form__triggers { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Collapsible error row (used in run feeds + activity tables)
   Click summary to toggle full traceback. <details>-based, no JS.
   ────────────────────────────────────────────────────────── */

.portal-form__error-row {
  background: var(--tdl-neg-bg-soft);
  border-left: 3px solid var(--tdl-neg);
  padding: 0 !important;   /* details/summary handles its own padding */
}

.run-error > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: var(--tdl-space-2, 8px);
  user-select: none;
  font-family: var(--tdl-font-mono);
  font-size: 11px;
  color: var(--tdl-neg-fg);
  transition: background 120ms ease;
}
.run-error > summary::-webkit-details-marker { display: none; }
.run-error > summary:hover { background: var(--tdl-neg-bg); }

.run-error__icon {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--tdl-neg);
  transition: transform 160ms ease;
  display: inline-block;
}
.run-error[open] .run-error__icon { transform: rotate(90deg); }

.run-error__lbl {
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: var(--tdl-tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--tdl-neg);
  flex-shrink: 0;
  opacity: 0.85;
}

.run-error__summary {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tdl-neg-fg);
}

.run-error__toggle {
  flex-shrink: 0;
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: var(--tdl-tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--tdl-fg-4);
  opacity: 0.85;
  transition: opacity 120ms ease, color 120ms ease;
}
.run-error > summary:hover .run-error__toggle {
  opacity: 1;
  color: var(--tdl-fg-2);
}
.run-error[open] .run-error__toggle {
  /* When open, hide the 'Show full' text and replace via ::before */
  color: transparent;
}
/* Hover-when-open: keep the original 'Show full' text hidden. Without
   this rule the generic :hover above re-sets the color to fg-2,
   making both 'HIDE' (::before) and 'SHOW FULL' render side by side. */
.run-error[open] > summary:hover .run-error__toggle {
  color: transparent;
}
.run-error[open] .run-error__toggle::before {
  content: 'Hide';
  color: var(--tdl-fg-3);
  letter-spacing: var(--tdl-tracking-label, 0.14em);
}

/* Inline Acknowledge button — sits to the right of the error summary
   so failed runs can be cleared from the Today feed without clicking
   into the run detail page. Reuses the same Monument typography as
   .run-error__toggle so it visually lines up. */
.run-error__ack-form {
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.run-error__ack-btn {
  background: transparent;
  border: 1px solid var(--tdl-hairline-2);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: var(--tdl-tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--tdl-fg-3);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.run-error__ack-btn:hover {
  color: var(--tdl-pos);
  border-color: var(--tdl-pos);
  background: var(--tdl-pos-bg-soft);
}
.run-error__acked {
  margin-left: auto;
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: var(--tdl-tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--tdl-pos);
  padding: 4px 8px;
}

.run-error__full {
  margin: 0;
  padding: 12px 16px 14px;
  background: var(--tdl-neg-bg-soft);
  border-top: 1px solid var(--tdl-neg-bg);
  font-family: var(--tdl-font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--tdl-neg-fg);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* ──────────────────────────────────────────────────────────
   Run-kind badge variants — sit alongside .tdl-badge
   Used in activity feeds + Today page
   ────────────────────────────────────────────────────────── */

.tdl-badge--daily {
  background: var(--tdl-cool-bg);
  color: var(--tdl-cool);
}
.tdl-badge--monthly {
  background: var(--tdl-surf-3);
  color: var(--tdl-fg-2);
}

/* Status pill 'partial' — bridges between SUCCESS green and FAILED red.
   Ensures the new partial-status runs render with a proper warning colour. */
.tdl-pill-partial,
.tdl-pill-warn {
  background: var(--tdl-warn-bg);
  color: var(--tdl-warn, var(--tdl-warn));
}
.tdl-pill-partial .dot,
.tdl-pill-warn .dot {
  background: var(--tdl-warn, var(--tdl-warn));
}

/* ──────────────────────────────────────────────────────────
   .tcp-card-section — vertical rhythm for sub-sections inside a
   tdl-card-body, used for the 'Manual run' block etc.
   ────────────────────────────────────────────────────────── */

.tcp-card-section {
  margin-top: var(--tdl-space-5, 20px);
}
.tcp-card-section h3 {
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tdl-fg);
  margin: 0 0 var(--tdl-space-3, 12px);
}

/* Kit divider for inside-card use (the kit\'s standard <hr> styling) */
hr.tdl-divider {
  border: 0;
  border-top: 1px solid var(--tdl-hairline);
  margin: var(--tdl-space-6, 24px) 0;
}



/* Constrain bare inputs/selects so they don't span full card width on wide
   screens (was making the page feel airy and inconsistent with Daily). */
.portal-form__row > .tdl-input,
.portal-form__row > select.tdl-input {
  max-width: 480px;
}
.portal-form__row--sheet > .tdl-input,
.portal-form__row--full > .tdl-input,
.portal-form__row textarea.tdl-input {
  /* Sheet URL + textareas + explicitly-full rows ARE meant to span wide. */
  max-width: none;
}