/* design-kit/css/portal-cards.css
   Consolidates the inline-style patterns scattered across portal/client.html
   and other portal templates into reusable utility classes. All values via
   tokens.css. */

/* ──────────────────────────────────────────────────────────
   Client-access password card primitives
   ────────────────────────────────────────────────────────── */

.tcp-cap__row {
  display: flex;
  gap: var(--tdl-space-2, 8px);
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 560px;
}

.tcp-cap__chip {
  background: var(--tdl-surf-2);
  padding: 10px 12px;
  border-radius: var(--tdl-radius-sm, 4px);
  border: 1px solid var(--tdl-hairline-2);
  font-size: 13px;
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
}

.tcp-cap__chip--mono {
  font-family: var(--tdl-font-mono);
}

.tcp-cap__divider {
  border-top: 1px solid var(--tdl-hairline);
  padding-top: var(--tdl-space-5, 20px);
}

.tcp-cap__caption {
  color: var(--tdl-fg-4);
  font-size: 12px;
  margin-top: var(--tdl-space-2, 8px);
}

/* ──────────────────────────────────────────────────────────
   Activity-table delta + toolbar polish
   ────────────────────────────────────────────────────────── */

.tcp-activity-row td {
  vertical-align: middle;
}

.tcp-monthly-link {
  color: var(--tdl-pos);
  font-weight: 600;
  text-decoration: underline;
}
.tcp-monthly-link:hover { opacity: 0.85; }

/* Run-step "warning" status — used when the daily ETL completes with errors */
.run-step.is-warning .icon-cell {
  background: rgba(242, 162, 59, 0.15);
  border-color: rgba(242, 162, 59, 0.5);
  color: var(--tdl-warn);
}


/* ──────────────────────────────────────────────────────────
   Run-status page — pipeline-step icons + spacing
   (Lifted from run_status.html inline <style> during brand audit)
   ────────────────────────────────────────────────────────── */

  .run-step { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--tdl-hairline); }
  .run-step:last-child { border-bottom: 0; }
  .run-step .icon-cell {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--tdl-font-display); font-size: 11px; font-weight: 900;
    border: 1px solid var(--tdl-hairline-2); background: var(--tdl-surf-2);
    color: var(--tdl-fg-3);
  }
  .run-step.is-ok .icon-cell { background: rgba(149,193,31,0.15); border-color: rgba(149,193,31,0.5); color: var(--tdl-pos); }
  .run-step.is-running .icon-cell { background: rgba(255,176,32,0.15); border-color: rgba(255,176,32,0.5); color: var(--tdl-warn); }
  .run-step.is-failed .icon-cell { background: rgba(255,64,0,0.15); border-color: rgba(255,64,0,0.5); color: var(--tdl-neg); }
  .run-step .name {
    font-family: var(--tdl-font-display); font-weight: 700;
    font-size: var(--tdl-fs-2xs); letter-spacing: var(--tdl-tracking-label);
    text-transform: uppercase; color: var(--tdl-fg);
  }
  .run-step .detail {
    color: var(--tdl-fg-3); font-size: var(--tdl-fs-sm);
    margin-top: 4px; line-height: var(--tdl-lh-body);
    font-family: var(--tdl-font-mono); word-break: break-word;
  }
  .run-step .ts {
    color: var(--tdl-fg-5); font-size: var(--tdl-fs-2xs);
    font-family: var(--tdl-font-mono);
    flex-shrink: 0; margin-left: auto; padding-left: 12px;
  }