/* Fixed-period money reports: the existing report data in a calm, shared
   reading order. These rules are local; they do not style the app's other
   reports, navigation, tables or charts. Propshaft's :app includes this sheet. */
.insights-money-report { min-width: 0; }
.insights-money-report__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ui);
  background: var(--color-card, #fff);
}
.insights-money-report__context > div { min-width: 0; }
.insights-money-report__eyebrow {
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}
.insights-money-report__scope-note {
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--color-warn-fill);
  border-radius: 0 var(--radius-ui) var(--radius-ui) 0;
  background: var(--color-warn-soft);
  color: var(--color-warn);
  font-size: 0.875rem;
  line-height: 1.5;
}
.insights-money-report__empty {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-ui);
  background: var(--color-card, #fff);
}
.insights-money-report__month-nav,
.insights-money-report__line-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.insights-money-report__month-nav .ui-btn,
.insights-money-report__line-links .ui-btn { min-height: 44px; white-space: normal; }
.insights-money-report__month-picker { position: relative; min-width: 0; }
.insights-money-report__month-picker > summary { cursor: pointer; list-style: none; }
.insights-money-report__month-picker > summary::-webkit-details-marker { display: none; }
.insights-money-report__month-options {
  position: absolute;
  z-index: 10;
  right: 0;
  width: min(18rem, calc(100vw - 4rem));
  max-height: 22rem;
  margin-top: 0.375rem;
  padding: 0.375rem;
  overflow-y: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-ui);
  background: var(--color-card, #fff);
  box-shadow: var(--shadow-lift);
}
.insights-money-report__month-option {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--color-ink);
  font-size: 0.9375rem;
}
.insights-money-report__month-option:hover,
.insights-money-report__month-option[aria-current="page"] { background: var(--color-accent-soft); }
.insights-money-report__month-option[aria-current="page"] { color: var(--color-accent-strong); font-weight: 600; }
.insights-money-report__line-picker { padding: 0 0.25rem; }
.insights-money-report__line-links { margin-top: 0.5rem; }
.insights-money-report__section { scroll-margin-top: calc(var(--kf-sticky-top, 0px) + 1rem); }
.insights-money-report__definitions {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-line);
}
/* The native stacked table already supplies the phone labels. Its row
   heading also needs its own line when the table becomes month cards. */
@media (max-width: 639px) {
  .insights-money-report [data-money-by-month-row] > th[scope="row"] {
    display: block;
    padding: 0 0 0.375rem;
    border: 0;
    text-align: left;
  }
  .insights-money-report__context { padding: 1rem; }
  .insights-money-report__month-nav { width: 100%; }
  .insights-money-report__month-picker { flex: 1; }
  .insights-money-report__month-picker > summary { width: 100%; justify-content: center; }
  .insights-money-report__month-options {
    position: static;
    width: 100%;
    max-height: 18rem;
    box-shadow: none;
  }
}
@media print {
  .insights-money-report__month-nav,
  .insights-money-report__line-picker { display: none; }
}