/* screens/reports.css — reports screen styles (Stage 9 retrofit owner: this file).
 * ------------------------------------------------------------------
 * Reports view (Phase 7 PR7.5), reskinned onto the Stage 9 brand
 * tokens: a page head, a tab bar, Summary (12 numeric cards in a
 * 2-column grid), Orders / Tasks (toolbar--card date range + paginated
 * .table-card table). No charts in v1 (deferred to v2 per spec §3.6).
 * ------------------------------------------------------------------ */

/* --- tab bar (kept: Reports legitimately keeps its 3 tabs) --- */

.reports-tabs {
  display: flex;
  gap: var(--brand-size-xs);
  border-bottom: var(--brand-line-width) solid var(--brand-color-border);
  margin-bottom: var(--brand-size-md);
  overflow-x: auto;
}

.reports-tab {
  background: transparent;
  border: 0;
  border-bottom: calc(2 * var(--brand-line-width)) solid transparent;
  padding: 0 var(--brand-size-sm);
  font-family: var(--brand-font-family);
  font-size: var(--brand-font-size);
  color: var(--brand-color-text-secondary);
  cursor: pointer;
  min-height: var(--brand-control-height-lg);
  white-space: nowrap;
  transition: color var(--brand-motion-duration-fast) var(--brand-motion-ease-in-out),
    border-color var(--brand-motion-duration-fast) var(--brand-motion-ease-in-out);
}

.reports-tab:hover {
  color: var(--brand-color-text);
}

.reports-tab--active {
  color: var(--brand-color-primary);
  border-bottom-color: var(--brand-color-primary);
  font-weight: var(--brand-font-weight-strong);
}

.reports-tab--active:focus-visible {
  outline: calc(2 * var(--brand-line-width)) solid var(--brand-primary-palette-2);
  outline-offset: 2px;
  border-radius: var(--brand-border-radius-sm);
}

.reports-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-md);
}

.reports-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-md);
}

/* --- Summary tab --- */

/* markup_approximate flag: informational warning banner. */
.reports-approximate-note {
  background: var(--brand-color-warning-bg);
  border: var(--brand-line-width) solid var(--brand-color-warning-border);
  border-left: calc(3 * var(--brand-line-width)) solid var(--brand-color-warning-active);
  border-radius: var(--brand-border-radius);
  padding: var(--brand-size-sm) var(--brand-size-md);
  font-size: var(--brand-font-size);
  color: var(--brand-color-text);
}

.reports-approximate-note code {
  font-family: var(--brand-font-family-code);
  font-size: var(--brand-font-size-sm);
  background: var(--brand-color-fill-tertiary);
  padding: 0 var(--brand-size-xxs);
  border-radius: var(--brand-border-radius-xs);
}

/* 2-column grid on tablet+, 1-column on mobile (matches the dashboard
 * KPI stack). */
.reports-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--brand-size-sm);
}

@media (min-width: 768px) {
  .reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Report cards follow the components.css card recipe plus a 3px left
 * accent whose color carries the good/warn/bad tone semantics
 * (success / warning / error actives, border for neutral). */
.report-card {
  background: var(--brand-color-bg-container);
  border: var(--brand-line-width) solid var(--brand-color-border-secondary);
  border-left: calc(3 * var(--brand-line-width)) solid var(--brand-color-border);
  border-radius: var(--brand-border-radius-lg);
  box-shadow: 0 1px 2px var(--brand-color-fill-quaternary);
  padding: var(--brand-size-md);
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xxs);
  min-width: 0;
}

.report-card__value {
  font-size: var(--brand-font-size-heading-3);
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-text);
  line-height: var(--brand-line-height-heading);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.report-card__label {
  font-size: var(--brand-font-size);
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-text);
}

.report-card__caption {
  font-size: var(--brand-font-size-sm);
  color: var(--brand-color-text-tertiary);
  line-height: 1.4;
}

.report-card--good {
  border-left-color: var(--brand-color-success-active);
}

.report-card--good .report-card__value {
  color: var(--brand-color-success-active);
}

.report-card--warn {
  border-left-color: var(--brand-color-warning-active);
}

.report-card--warn .report-card__value {
  color: var(--brand-color-warning-active);
}

.report-card--bad {
  border-left-color: var(--brand-color-error-active);
}

.report-card--bad .report-card__value {
  color: var(--brand-color-error-active);
}

.reports-status-breakdown {
  background: var(--brand-color-bg-container);
  border: var(--brand-line-width) solid var(--brand-color-border-secondary);
  border-radius: var(--brand-border-radius-lg);
  box-shadow: 0 1px 2px var(--brand-color-fill-quaternary);
  padding: var(--brand-size-md);
  font-size: var(--brand-font-size);
}

.reports-status-breakdown summary {
  cursor: pointer;
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-text);
}

.reports-status-breakdown__list {
  list-style: none;
  margin: var(--brand-size-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.reports-status-breakdown__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--brand-line-width) solid var(--brand-color-border-secondary);
  padding: var(--brand-size-xxs) 0;
}

.reports-status-breakdown__list li:last-child {
  border-bottom: 0;
}

.reports-status-breakdown__label {
  color: var(--brand-color-text-secondary);
  font-family: var(--brand-font-family-code);
  font-size: var(--brand-font-size-sm);
}

.reports-status-breakdown__value {
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-text);
  font-variant-numeric: tabular-nums;
}

/* --- Orders / Tasks tabs --- */

/* `.toolbar--card` supplies the date-row chrome; only the field labels
 * need scoped styling. */
.reports-date-row__field {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xxs);
  font-size: var(--brand-font-size-sm);
  color: var(--brand-color-text-tertiary);
  font-weight: var(--brand-font-weight-strong);
}

.reports-load-more {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--brand-size-xs);
}

.reports-table {
  width: 100%;
}

.reports-table th,
.reports-table td {
  white-space: nowrap;
}

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

  .report-card__value {
    font-size: var(--brand-font-size-xl);
  }

  .reports-date-row {
    flex-direction: column;
    align-items: stretch;
  }

  .reports-date-row__field {
    width: 100%;
  }

  .reports-date-row__field input {
    width: 100%;
  }
}