/* Product composition. Color, typography, controls, dialogs and tables come from @mm/ui. */
.finance-page { display: flex; flex-direction: column; padding: 0; max-width: none; }
.finance-page > [data-mm-ilha]:has(.mm-painel-secoes) { display: flex; flex-direction: column; flex: 1; }
.finance-page .mm-painel-secoes { flex: 1; }
.finance-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; }
.finance-heading h1 { font-size: 1.65rem; margin: 0; }
/* The Resumo button sits with the product name, apart from the actions (dono, 27/10/2026). */
.finance-title { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; min-width: 0; }
.finance-title > .mm-atalho-do-titulo { max-width: 100%; }
.finance-title > .mm-painel-secoes-seletor { min-width: 0; }
.finance-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.finance-heading > .finance-actions { flex-wrap: nowrap; }
/* Refresh: one turn of the arrow per click; none when the person asks for less motion. */
@keyframes finance-turn { to { transform: rotate(360deg); } }
.finance-refresh [data-turn] { display: inline-block; animation: finance-turn .6s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .finance-refresh [data-turn] { animation: none; } }
.finance-filters { margin-bottom: 1rem; }
/* A date field keeps the size of its date (dono, 27/10/2026: "a data nao ta organizada no centro"); the others share
   the rest of the line. */
.finance-filters .mm-filtro-campo > label { padding-inline: .5rem; }
.finance-filter-fields { display: grid; gap: .75rem; }
.finance-filter-actions:empty { display: none; }
.finance-filter-actions .finance-filter-icon { width: 44px; min-height: 44px; padding: 0; }
.finance-schedule { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.finance-schedule > .mm-filtro-campo:not(:has(> .mm-campo-data)) { flex: 1 1 16rem; }
.finance-remote-content { display: contents; }
.finance-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: stretch; }
.finance-result-main { display: grid; align-content: center; gap: .375rem; min-width: 0; }
.finance-result-main > p { max-width: 48ch; font-size: .8125rem; line-height: 1.4; }
.finance-amount { display: block; font-size: clamp(1.75rem, 2vw, 2.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; align-items: center; }
.finance-metrics > div { min-width: 0; }
.finance-result .finance-metrics { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.finance-result .finance-metrics > div { display: flex; flex-direction: column; justify-content: center; }
.finance-metrics dt, .finance-period dt { font-size: .875rem; font-weight: 400; color: var(--ui-secondary-color); }
.finance-metrics dd { margin: .375rem 0 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-cash { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(20rem, 1.7fr); gap: 1rem; align-items: center; }
.finance-forecast { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .75rem; margin-top: .75rem; }
.finance-period { min-width: 0; }
.finance-period > .card-header { padding: .5rem .75rem; font-size: .875rem; }
.finance-period > .card-body { padding: .75rem; }
.finance-period dl { margin: 0; }
.finance-period dl > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .375rem; }
.finance-period dl > div:first-child { margin-top: 0; }
.finance-period dd { margin: 0; max-width: 100%; font-size: .875rem; font-variant-numeric: tabular-nums; }
.finance-period dd .btn { font-size: inherit; }
.finance-period-net { padding-top: .5rem; border-top: 1px solid var(--ui-border-color); }
.finance-period-net dd { font-weight: 600; }
.finance-detail-meta { display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; color: var(--ui-secondary-color); }
.finance-central { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.finance-central-summary { display: grid; gap: .5rem; padding: .75rem 1rem; }
.finance-central-summary-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.finance-summary-projections { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-inline-start: auto; }
/* The period, the filters and the invoice search share one line, as in the legacy bar; the search gives way first. */
.finance-central-bar { gap: .5rem; }
.finance-central-bar > .finance-actions { flex: 0 1 auto; }
.finance-central-bar > .finance-filters { margin: 0; }
.finance-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; min-width: 0; border-left: 3px solid transparent; }
.finance-line[data-mark="late"] { border-left-color: var(--ui-danger-text-emphasis); }
.finance-line[data-mark="soon"] { border-left-color: var(--ui-warning-text-emphasis); }
.finance-line-main { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.finance-line .finance-line-party { min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
.finance-line .finance-line-party:hover, .finance-line .finance-line-party:focus-visible { text-decoration: underline; }
.finance-line-amount { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.finance-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.finance-line-icon { color: var(--ui-secondary-color); text-decoration: none; }
.finance-line-meta { display: flex; flex-wrap: wrap; gap: .25rem 0; }
.finance-line-meta > span { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.finance-line-meta > span + span::before { content: "\00B7"; margin-inline: .5rem; }
.finance-alert-body { display: grid; gap: .25rem; flex: 1 1 20rem; min-width: 0; }
.finance-alert-fields { padding-inline-start: 1rem; overflow-wrap: anywhere; }
.finance-start { padding: clamp(2rem, 8vh, 6rem) 0; }
.finance-start p { max-width: 42rem; }
[data-negative="true"] { color: var(--ui-danger-text-emphasis); }
@media (max-width: 1100px) {
  .finance-cash { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 991.98px) {
  .finance-title { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .finance-title > .mm-atalho-do-titulo { grid-column: 1 / -1; grid-row: 2; }
  .finance-title > .mm-botao-de-valores { grid-column: 2; grid-row: 1; }
  .finance-title > .mm-painel-secoes-seletor { grid-column: 3; grid-row: 1; }
  .finance-title h1 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .finance-title .mm-painel-secoes-seletor > .btn { min-width: 0; padding-inline: .375rem; gap: .25rem; font-size: .875rem; }
  .finance-page .mm-painel-secoes { grid-template-rows: 1fr; }
}
@media (max-width: 575px) {
  .finance-result { grid-template-columns: minmax(0, 1fr); }
  .finance-heading { align-items: stretch; flex-direction: column; gap: .5rem; padding: .75rem; }
  .finance-title { gap: .375rem; }
  .finance-heading h1 { font-size: 1.375rem; }
  .finance-title > .mm-atalho-do-titulo { gap: .25rem; font-size: .875rem; padding: .25rem; }
  .finance-heading > .finance-actions { align-items: stretch; flex-wrap: nowrap; gap: .25rem; width: 100%; }
  .finance-heading > .finance-actions > button {
    flex: 1 1 auto; min-width: 0; padding-inline: .375rem; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: .25rem; line-height: 1.2; min-height: 44px;
  }
  .finance-heading > .finance-actions > .finance-refresh { flex: 0 0 44px; }
  .finance-refresh .finance-action-label { display: none; }
  .finance-heading > .finance-actions > button > .bi { margin-inline: 0; }
  .finance-central-summary { padding: .5rem .75rem; }
  .finance-central-summary-line { gap: .375rem .75rem; }
  .finance-central-summary-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-central-summary-line > span:not(.finance-summary-projections),
  .finance-summary-projections > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem; font-size: .875rem; }
  .finance-central-summary-line > .finance-summary-projections { display: contents; }
  .finance-filters > .mm-filtro-campo { flex-basis: 100%; }
  .finance-central-search { flex-basis: 100%; }
  .finance-line > .finance-line-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; }
  .finance-line-main > .finance-line-party { grid-column: 1; grid-row: 1; }
  .finance-line-main > .finance-line-amount { grid-column: 2; grid-row: 1; }
  .finance-line-main > .badge { grid-column: 1; grid-row: 2; justify-self: start; }
  .finance-line-main > .finance-line-actions { grid-column: 2; grid-row: 2; justify-content: end; }
  .finance-line-actions > .btn { flex: 0 0 auto; }
  .finance-filters > .mm-periodo-rapido { flex-basis: 100%; }
  .finance-metrics { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .finance-metrics > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: baseline; }
  .finance-result .finance-metrics > div { flex-direction: row; justify-content: space-between; }
  .finance-result .finance-metrics { gap: .5rem; }
  .finance-result .finance-metrics > div { display: grid; gap: .375rem; }
  .finance-metrics dd { margin: 0; }
  .finance-forecast { grid-template-columns: 1fr; }
  .finance-period dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: .5rem 1rem; }
  .finance-period dl > div { display: grid; gap: .25rem; margin-top: .25rem; }
  .finance-period dl > .finance-period-net { grid-column: 1 / -1; display: flex; }
}
/* THE REPORT TABLES (revisão de tela, 09/11/2026). On the phone, each one is a list of blocks. */
@media (min-width: 576px) {
  /* The annual view takes the width of its columns: with one side of a category, the amount stood 1000 px from its month. */
  .finance-year-table > table { width: auto; }
  .finance-year-table :is(th, td):not(:first-child) { min-width: 9rem; }
  /* The twelve months of Despesas and Receitas fit beside the name from 1280 px with the menu open: the months were cut,
     with a part of a number beside the name. */
  .finance-matrix > table { font-size: .875rem; }
  .finance-matrix :is(th, td):not(:first-child) { padding-inline: .25rem; }
  .finance-matrix.mm-tabela-fixa-nome tr > :first-child { min-width: 8rem; }
}
.fin-saas-narrow { max-width: 42rem; }
.fin-saas-plan { max-width: 28rem; }