/* finance.css -- Finance-specific styles only.
   Metrics strip and tiles, panels row, BAS panel notes, ledger row states,
   state banners, footer. No tokens defined here. Every value references a
   token from tokens.css. Mobile-first; overrides at the breakpoint tokens. */

/* ---------------------------------------------------------------
   State banners (below the header bar)
   --------------------------------------------------------------- */
.banner {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.banner.is-hidden {
  display: none;
}

/* Partial data -- amber */
.banner--partial {
  background: var(--color-warning-light);
  border-left: 4px solid var(--color-warning);
}

/* Error -- red */
.banner--error {
  background: var(--color-danger-light);
  border-left: 4px solid var(--color-danger);
}

/* Unlocked quarter -- amber, persistent */
.banner--unlocked {
  background: var(--color-warning-subtle);
  border-left: 4px solid var(--color-warning);
}

/* ---------------------------------------------------------------
   Metrics strip and tiles
   --------------------------------------------------------------- */
.metrics-strip {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: single column */
  gap: var(--space-4);
}

.metric-tile {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.metric-tile__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.metric-tile__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-top: var(--space-2);
  color: var(--color-text-primary);
}

.metric-tile__value--teal {
  color: var(--color-secondary);
}

.metric-tile__value--navy {
  color: var(--color-primary);
}

.metric-tile__value--danger {
  color: var(--color-danger);
}

.metric-tile__sub {
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------------
   Panels row (P&L | BAS | Balance Sheet)
   --------------------------------------------------------------- */
.panels-row {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: single column */
  gap: var(--space-6);
}

/* Finance figure rows reuse the shared .table component. These helpers add
   the finance-specific framing for the P&L derived rows and BAS notes. */
.fin-derived td {
  border-top: 1px solid var(--color-border-strong);
  font-weight: var(--weight-semibold);
}

.fin-note {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

.fin-note--advisory {
  color: var(--color-warning);
}

/* ---------------------------------------------------------------
   Ledger row states (transactions.html -- styled here for Phase 5)
   --------------------------------------------------------------- */
.ledger-row--unclassified {
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-subtle);
}

.ledger-row--manual {
  border-left: 3px solid var(--color-warning);
}

.ledger-row--linked {
  border-left: 3px solid var(--color-secondary);
}

.ledger-row--excluded {
  opacity: 0.5;
}

.ledger-row--excluded .ledger-cell--description {
  text-decoration: line-through;
}

.ledger-row--locked .ledger-cell--admin {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.app-footer {
  margin-top: var(--space-12);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------
   Responsive -- tablet (>= --bp-md: 768px)
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  .metrics-strip {
    grid-template-columns: 1fr 1fr;    /* tablet: two rows of two */
  }

  .panels-row {
    grid-template-columns: 1fr 1fr;    /* tablet: Balance Sheet drops below */
  }
}

/* ---------------------------------------------------------------
   Responsive -- desktop (>= --bp-lg: 1024px)
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .metrics-strip {
    grid-template-columns: repeat(4, 1fr);   /* desktop: four in a row */
  }

  .panels-row {
    grid-template-columns: 1fr 1fr 1fr;      /* desktop: three side by side */
  }
}