/* Reports lane. The white paper class is added only when a statement is drawn.
   Muted grey that is fine on the dark shell fails on that white paper, so
   meta and account lines use an ink that clears WCAG AA (about 12:1). */

.report-presets,
.report-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.report-tabs [hidden] {
  display: none !important;
}

.report-summary {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.report-summary [data-role="report-band-status"] {
  color: var(--ink);
  font-weight: 600;
}

.report-period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* `display: flex` on a host would otherwise defeat the hidden attribute. */
.report-period-bar [hidden] {
  display: none !important;
}

.report-period-picker {
  position: relative;
}

.report-period-trigger {
  white-space: nowrap;
}

.report-period-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 12rem;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.report-period-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: var(--tap-min);
}

.report-period-option.active,
.report-period-option:hover,
.report-period-option:focus-visible {
  background: var(--warn-bg);
}

.report-specific-month,
.report-custom-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.report-date-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.report-date-label span {
  color: var(--muted);
  font-size: var(--text-xs);
}

.report-canvas .gvf-num,
.report-canvas .gvf-num-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.report-band {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid #8a6114;
  color: var(--ink);
}

.report-band p {
  margin: 0;
}

.report-band p + p {
  margin-top: 4px;
}

.report-paused {
  margin: 8px 0;
  color: var(--ink);
  font-weight: 600;
}

.report-canvas .gvf-meta,
.report-canvas .gvf-account,
.report-canvas .muted {
  color: #243044;
}

.report-canvas .report-drill {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: #1b3a6b;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.report-canvas .report-drill:focus-visible {
  outline: 2px solid #1b3a6b;
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .report-links {
    flex-direction: column;
    align-items: stretch;
  }

  .report-period-menu {
    min-width: min(16rem, calc(100vw - 24px));
  }
}