/* Kronos Finance — camada canônica consolidada.
   A lógica financeira continua em finance.js; este arquivo organiza a experiência visual. */

/* Kronos Finance V2 / polish V3
   Navegação financeira simplificada sobre os renderers canônicos existentes. */

#financeView {
  --k-fin-surface: #ffffff;
  --k-fin-surface-soft: #f7f7f8;
  --k-fin-surface-muted: #f0f1f3;
  --k-fin-border: var(--k-color-border, #dfe2e7);
  --k-fin-text: var(--k-color-text, #171a21);
  --k-fin-muted: var(--k-color-text-muted, #69717d);
  --k-fin-accent: var(--k-color-accent, #b98b26);
  --k-fin-positive: #087a43;
  --k-fin-negative: #c2392d;
  --k-fin-warning: #9c650d;
  --k-fin-info: #315f91;
  --k-fin-tone-1: #34373d;
  --k-fin-tone-2: #e2b827;
  --k-fin-tone-3: #a84024;
  --k-fin-tone-4: #db8b13;
  --k-fin-tone-5: #5f70a8;
  --k-fin-tone-6: #6c8f7a;
  --k-fin-donut-empty: conic-gradient(#eceef1 0 100%);
  width: min(1480px, calc(100vw - 56px));
  max-width: 1480px;
  margin: 0 auto;
}

#financeNav,
#financeSubnavMobile {
  display: none !important;
}

.k-finance-v2-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 16px;
}

.k-finance-eyebrow,
.k-fin-section-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--k-fin-muted);
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.k-finance-v2-title {
  margin: 0;
  color: var(--k-fin-text);
  font-family: var(--k-font-family, Inter, sans-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 760;
  letter-spacing: -0.035em;
}

.k-finance-v2-helper {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--k-fin-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.k-finance-v2-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
  padding: 4px;
  border: 1px solid var(--k-fin-border);
  border-radius: 14px;
  background: rgba(244, 244, 246, 0.9);
}

.k-finance-v2-nav button,
.k-finance-v2-subnav button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.k-finance-v2-nav button {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--k-fin-muted);
  font-size: 0.81rem;
  font-weight: 650;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.k-finance-v2-nav button:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--k-fin-text);
}

.k-finance-v2-nav button.active,
.k-finance-v2-nav button[aria-current="page"] {
  background: #fff;
  color: var(--k-fin-text);
  box-shadow: 0 1px 4px rgba(22, 27, 36, 0.1);
}

.k-finance-v2-subnav {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  margin-bottom: 16px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--k-fin-border);
}

.k-finance-v2-subnav[hidden] {
  display: none !important;
}

.k-finance-v2-subnav button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--k-fin-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.k-finance-v2-subnav button:hover,
.k-finance-v2-subnav button.active,
.k-finance-v2-subnav button[aria-current="page"] {
  background: #eceef1;
  color: var(--k-fin-text);
}

#financeView .finance-root {
  min-width: 0;
}

#financeView h1,
#financeView h2,
#financeView h3,
#financeView h4,
#financeView strong {
  letter-spacing: -0.02em;
}

#financeView .fin-card,
#financeView .fin-coverage-card,
#financeView .fin-closing-banner,
#financeView .fin-panel,
#financeView .fin-section,
#financeView .fin-table-wrap {
  border-color: var(--k-fin-border) !important;
  box-shadow: none !important;
}

#financeView .fin-section,
#financeView .fin-card,
#financeView .fin-panel,
#financeView .fin-coverage-card,
#financeView .fin-closing-banner {
  border-radius: 16px;
}

#financeView .fin-card-sub,
#financeView .fin-muted,
#financeView .fin-closing-sub,
#financeView .fin-closing-quality,
#financeView .fin-coverage-meta {
  color: var(--k-fin-muted);
}

.k-finance-polished-toolbar {
  justify-content: flex-end;
  margin-bottom: 10px;
}

.k-finance-polished-section {
  background: var(--k-fin-surface);
}

/* Finance V4 — consolidação visual
   A visão geral passa a priorizar leitura instantânea, ação e contexto. */

.k-finance-overview-root {
  display: block !important;
}

.k-fin-overview {
  display: grid;
  gap: 16px;
  width: 100%;
  padding-bottom: 28px;
}

.k-fin-overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
}

.k-fin-period-nav,
.k-fin-overview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.k-fin-period-nav > button,
.k-fin-button-secondary,
.k-fin-button-primary,
.k-fin-link,
.k-fin-empty button,
.k-fin-attention-row button,
.k-fin-uncategorized,
.k-fin-day-detail button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.k-fin-period-nav > button {
  min-width: 34px;
  min-height: 34px;
  border-radius: 9px;
  background: var(--k-fin-surface-muted);
  color: var(--k-fin-text);
  font-size: 1.15rem;
}

.k-fin-period-nav > button:disabled {
  opacity: 0.35;
  cursor: default;
}

.k-fin-period-nav strong {
  min-width: 164px;
  text-align: center;
  color: var(--k-fin-text);
  font-size: 0.88rem;
  font-weight: 720;
}

.k-fin-period-nav .k-fin-current-month {
  width: auto;
  padding: 0 10px;
  color: var(--k-fin-accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.k-fin-button-secondary,
.k-fin-button-primary {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 700;
}

.k-fin-button-secondary {
  border: 1px solid var(--k-fin-border);
  background: #fff;
  color: var(--k-fin-text);
}

.k-fin-button-primary {
  background: var(--k-fin-text);
  color: #fff;
}

.k-fin-overview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.k-fin-kpi {
  min-width: 0;
  padding: 16px 17px 15px;
  border: 1px solid var(--k-fin-border);
  border-radius: 16px;
  background: var(--k-fin-surface);
}

.k-fin-kpi > span {
  display: block;
  margin-bottom: 10px;
  color: var(--k-fin-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.k-fin-kpi > strong {
  display: block;
  overflow: hidden;
  color: var(--k-fin-text);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 780;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-fin-kpi.is-positive > strong {
  color: var(--k-fin-positive);
}

.k-fin-kpi.is-negative > strong {
  color: var(--k-fin-negative);
}

.k-fin-kpi small {
  display: block;
  min-height: 17px;
  margin-top: 9px;
  color: var(--k-fin-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.k-fin-kpi small .is-good {
  color: var(--k-fin-positive);
  font-weight: 700;
}

.k-fin-kpi small .is-bad {
  color: var(--k-fin-negative);
  font-weight: 700;
}

.k-fin-overview-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.k-fin-overview-grid-main {
  grid-template-columns: minmax(0, 1.24fr) minmax(340px, 0.76fr);
}

.k-fin-overview-grid-balanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-fin-panel,
.k-fin-attention {
  min-width: 0;
  border: 1px solid var(--k-fin-border);
  border-radius: 17px;
  background: var(--k-fin-surface);
}

.k-fin-panel {
  padding: 18px;
}

.k-fin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}

.k-fin-panel-head h3,
.k-fin-attention h3 {
  margin: 0;
  color: var(--k-fin-text);
  font-size: 1rem;
  font-weight: 760;
}

.k-fin-panel-head p {
  margin: 4px 0 0;
  color: var(--k-fin-muted);
  font-size: 0.73rem;
  line-height: 1.42;
}

.k-fin-panel-total {
  color: var(--k-fin-text);
  font-size: 1.1rem;
  font-weight: 760;
  white-space: nowrap;
}

.k-fin-link {
  padding: 0;
  background: transparent;
  color: var(--k-fin-accent);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.k-fin-chip {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--k-fin-surface-muted);
  color: var(--k-fin-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.k-fin-calendar-weekdays,
.k-fin-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.k-fin-calendar-weekdays {
  margin-bottom: 6px;
}

.k-fin-calendar-weekdays span {
  padding: 0 3px;
  color: var(--k-fin-muted);
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
}

.k-fin-calendar-blank {
  min-height: 58px;
}

.k-fin-calendar-day {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 58px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f1f2f4;
  color: var(--k-fin-text);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.k-fin-calendar-day:hover {
  transform: translateY(-1px);
  border-color: rgba(194, 57, 45, 0.28);
}

.k-fin-calendar-day.level-1 { background: #fff2ee; }
.k-fin-calendar-day.level-2 { background: #fee3da; }
.k-fin-calendar-day.level-3 { background: #fbc9b9; }
.k-fin-calendar-day.level-4 { background: #f4a389; }

.k-fin-calendar-day.is-selected {
  border-color: var(--k-fin-text);
  box-shadow: inset 0 0 0 1px var(--k-fin-text);
}

.k-fin-calendar-day span {
  color: var(--k-fin-muted);
  font-size: 0.64rem;
}

.k-fin-calendar-day strong {
  color: var(--k-fin-text);
  font-size: 0.68rem;
  font-weight: 720;
}

.k-fin-calendar-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--k-fin-border);
}

.k-fin-calendar-stats div {
  min-width: 0;
}

.k-fin-calendar-stats span,
.k-fin-calendar-stats strong {
  display: block;
}

.k-fin-calendar-stats span {
  margin-bottom: 3px;
  color: var(--k-fin-muted);
  font-size: 0.59rem;
}

.k-fin-calendar-stats strong {
  overflow: hidden;
  color: var(--k-fin-text);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-fin-day-detail {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--k-fin-surface-soft);
}

.k-fin-day-detail-head,
.k-fin-day-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.k-fin-day-detail-head button {
  background: transparent;
  color: var(--k-fin-muted);
  font-size: 0.68rem;
}

.k-fin-day-row {
  padding-top: 7px;
  border-top: 1px solid var(--k-fin-border);
  font-size: 0.72rem;
}

.k-fin-day-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-expense { color: var(--k-fin-negative) !important; }
.is-income { color: var(--k-fin-positive) !important; }

.k-fin-donut-wrap {
  display: grid;
  place-items: center;
  margin: 2px 0 18px;
}

.k-fin-donut {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.k-fin-donut > div {
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
}

.k-fin-donut strong,
.k-fin-donut span {
  display: block;
}

.k-fin-donut strong {
  color: var(--k-fin-text);
  font-size: 0.93rem;
}

.k-fin-donut span {
  margin-top: 2px;
  color: var(--k-fin-muted);
  font-size: 0.62rem;
}

.k-fin-category-list {
  display: grid;
  gap: 10px;
}

.k-fin-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
}

.k-fin-category-meta {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
}

.k-fin-category-meta i,
.k-fin-recent-list i {
  display: block;
  border-radius: 50%;
}

.k-fin-category-meta i {
  width: 7px;
  height: 7px;
}

.tone-1 { background: var(--k-fin-tone-1) !important; }
.tone-2 { background: var(--k-fin-tone-2) !important; }
.tone-3 { background: var(--k-fin-tone-3) !important; }
.tone-4 { background: var(--k-fin-tone-4) !important; }
.tone-5 { background: var(--k-fin-tone-5) !important; }
.tone-6 { background: var(--k-fin-tone-6) !important; }

.k-fin-category-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-fin-category-meta strong {
  color: var(--k-fin-muted);
  font-size: 0.64rem;
}

.k-fin-category-row > small {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  color: var(--k-fin-muted);
  font-size: 0.61rem;
}

.k-fin-category-bar {
  grid-column: 1;
  grid-row: 2;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceef1;
}

.k-fin-category-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.k-fin-uncategorized {
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e8;
  color: var(--k-fin-warning);
  font-size: 0.68rem;
  text-align: left;
}

.k-fin-attention {
  overflow: hidden;
}

.k-fin-attention > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--k-fin-border);
}

.k-fin-attention > header > strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--k-fin-surface-muted);
  color: var(--k-fin-text);
  font-size: 0.72rem;
}

.k-fin-attention-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--k-fin-border);
}

.k-fin-attention-row:last-child {
  border-bottom: 0;
}

.k-fin-attention-row > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--k-fin-info);
}

.k-fin-attention-row.warning > i { background: var(--k-fin-warning); }
.k-fin-attention-row.danger > i { background: var(--k-fin-negative); }
.k-fin-attention-row.neutral > i { background: var(--k-fin-info); }

.k-fin-attention-row > div {
  min-width: 0;
}

.k-fin-attention-row > div strong,
.k-fin-attention-row > div span {
  display: block;
}

.k-fin-attention-row > div strong {
  color: var(--k-fin-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.k-fin-attention-row > div span {
  margin-top: 3px;
  color: var(--k-fin-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.k-fin-attention-row button,
.k-fin-empty button {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--k-fin-surface-muted);
  color: var(--k-fin-text);
  font-size: 0.66rem;
  font-weight: 700;
}

.k-fin-attention-clear {
  display: grid;
  gap: 3px;
  padding: 17px 18px;
}

.k-fin-attention-clear strong {
  color: var(--k-fin-positive);
  font-size: 0.78rem;
}

.k-fin-attention-clear span {
  color: var(--k-fin-muted);
  font-size: 0.69rem;
}

.k-fin-upcoming-list,
.k-fin-coverage-formula,
.k-fin-budget-list,
.k-fin-recent-list {
  display: grid;
}

.k-fin-upcoming-list > div,
.k-fin-coverage-formula > div,
.k-fin-recent-list > div {
  border-top: 1px solid var(--k-fin-border);
}

.k-fin-upcoming-list > div:first-child,
.k-fin-coverage-formula > div:first-child,
.k-fin-recent-list > div:first-child {
  border-top: 0;
}

.k-fin-upcoming-list > div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.71rem;
}

.k-fin-upcoming-list time {
  color: var(--k-fin-muted);
  font-size: 0.64rem;
}

.k-fin-upcoming-list span {
  overflow: hidden;
  color: var(--k-fin-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-fin-upcoming-list strong {
  color: var(--k-fin-negative);
  font-size: 0.72rem;
  white-space: nowrap;
}

.k-fin-coverage-formula > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  color: var(--k-fin-muted);
  font-size: 0.7rem;
}

.k-fin-coverage-formula > div strong {
  color: var(--k-fin-text);
  font-size: 0.72rem;
}

.k-fin-coverage-formula > div.is-result {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 2px solid var(--k-fin-text);
  color: var(--k-fin-text);
  font-weight: 700;
}

.k-fin-coverage-card > .k-fin-link {
  margin-top: 12px;
}

.k-fin-budget-list {
  gap: 12px;
}

.k-fin-budget-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--k-fin-text);
  font-size: 0.71rem;
}

.k-fin-budget-row > div:first-child strong {
  color: var(--k-fin-muted);
  font-size: 0.66rem;
}

.k-fin-budget-row.is-over > div:first-child strong,
.k-fin-budget-row.is-over small {
  color: var(--k-fin-negative);
}

.k-fin-budget-track {
  height: 7px;
  margin: 6px 0 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceef1;
}

.k-fin-budget-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--k-fin-accent);
}

.k-fin-budget-row.is-over .k-fin-budget-track span {
  background: var(--k-fin-negative);
}

.k-fin-budget-row small {
  color: var(--k-fin-muted);
  font-size: 0.62rem;
}

.k-fin-recent-list > div {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}

.k-fin-recent-list i {
  width: 7px;
  height: 7px;
  background: var(--k-fin-info);
}

.k-fin-recent-list i.is-expense { background: var(--k-fin-negative) !important; }
.k-fin-recent-list i.is-income { background: var(--k-fin-positive) !important; }

.k-fin-recent-list > div > span {
  min-width: 0;
}

.k-fin-recent-list > div > span strong,
.k-fin-recent-list > div > span small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-fin-recent-list > div > span strong {
  color: var(--k-fin-text);
  font-size: 0.72rem;
}

.k-fin-recent-list > div > span small {
  margin-top: 2px;
  color: var(--k-fin-muted);
  font-size: 0.61rem;
}

.k-fin-recent-list > div > strong {
  font-size: 0.7rem;
  white-space: nowrap;
}

.k-fin-insight-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-fin-insight-card li {
  position: relative;
  padding: 9px 10px 9px 20px;
  color: var(--k-fin-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.k-fin-insight-card li::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-fin-accent);
}

.k-fin-insight-card li strong {
  color: var(--k-fin-text);
}

.k-fin-empty {
  display: grid;
  gap: 8px;
  place-items: start;
  min-height: 74px;
  padding: 18px 0;
  color: var(--k-fin-muted);
  font-size: 0.71rem;
}

.k-fin-overview-loading {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.k-fin-overview-loading span {
  min-height: 110px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f1f2f4 20%, #f7f8f9 38%, #f1f2f4 56%);
  background-size: 200% 100%;
  animation: k-fin-shimmer 1.3s linear infinite;
}

@keyframes k-fin-shimmer {
  to { background-position: -200% 0; }
}

.k-fin-overview-error {
  display: grid;
  gap: 7px;
  justify-items: start;
  padding: 22px;
  border: 1px solid #efc5c0;
  border-radius: 16px;
  background: #fff7f6;
}

.k-fin-overview-error strong { color: var(--k-fin-negative); }
.k-fin-overview-error span { color: var(--k-fin-muted); font-size: 0.72rem; }
.k-fin-overview-error button {
  margin-top: 4px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--k-fin-text);
  color: #fff;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1180px) {
  #financeView {
    width: min(100%, calc(100vw - 36px));
  }

  .k-finance-v2-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .k-fin-overview-grid-main {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  }

  .k-fin-overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  #financeView {
    width: min(100%, calc(100vw - 24px));
  }

  .k-finance-v2-intro {
    margin-top: 0;
  }

  .k-fin-overview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .k-fin-period-nav,
  .k-fin-overview-actions {
    justify-content: space-between;
  }

  .k-fin-overview-actions > button {
    flex: 1;
  }

  .k-fin-overview-grid-main,
  .k-fin-overview-grid-balanced {
    grid-template-columns: 1fr;
  }

  .k-fin-attention-row {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .k-fin-attention-row button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  #financeView {
    width: 100%;
  }

  .k-finance-v2-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .k-finance-v2-subnav {
    flex-wrap: wrap;
  }

  .k-fin-overview-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .k-fin-kpi {
    padding: 13px;
  }

  .k-fin-kpi > strong {
    font-size: 1.18rem;
  }

  .k-fin-period-nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .k-fin-period-nav strong {
    min-width: 0;
  }

  .k-fin-period-nav .k-fin-current-month {
    grid-column: 1 / -1;
  }

  .k-fin-overview-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .k-fin-overview-actions button {
    padding-inline: 7px;
  }

  .k-fin-panel {
    padding: 15px;
  }

  .k-fin-calendar-grid,
  .k-fin-calendar-weekdays {
    gap: 4px;
  }

  .k-fin-calendar-day,
  .k-fin-calendar-blank {
    min-height: 52px;
  }

  .k-fin-calendar-day {
    padding: 6px;
  }

  .k-fin-calendar-day strong {
    font-size: 0.58rem;
  }

  .k-fin-calendar-stats {
    grid-template-columns: 1fr;
  }

  .k-fin-insight-card ul {
    grid-template-columns: 1fr;
  }

  .k-fin-overview-loading {
    grid-template-columns: 1fr 1fr;
  }
}