/* My Work — финансы: рабочий журнал */
.finance-page {
  display: grid;
  gap: 18px;
}

.finance-heading,
.finance-heading-actions,
.finance-workspace-top,
.finance-toolbar,
.finance-filters,
.finance-period,
.finance-settings-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finance-heading,
.finance-workspace-top,
.finance-toolbar,
.finance-settings-top {
  justify-content: space-between;
}

.finance-heading h2,
.finance-workspace-top h3,
.finance-settings-top h3 {
  margin: 0 0 5px;
}

.finance-heading p,
.finance-workspace-top p,
.finance-settings-top p {
  margin: 0;
  font-size: 12px;
}

.finance-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.finance-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 9px;
  padding: 18px;
}

.finance-stat > span {
  font-size: 12px;
}
.finance-stat strong {
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.finance-stat small {
  font-size: 11px;
}

.finance-workspace,
.finance-settings-panel {
  min-width: 0;
  padding: 20px;
}

.finance-workspace-top {
  margin-bottom: 20px;
}
.finance-workspace-top h3 {
  font-size: 15px;
}

.finance-period {
  flex-shrink: 0;
  gap: 5px;
}

.finance-month {
  min-width: 0;
  width: 170px;
  height: 40px;
}

.finance-month-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 22px;
  color: var(--text);
}

.finance-toolbar {
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.finance-mode-switch {
  display: flex;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft, var(--surface));
}

.finance-mode {
  min-height: 33px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}

.finance-mode.active {
  background: var(--surface);
  box-shadow: 0 1px 5px rgb(0 0 0 / 8%);
  color: var(--blue);
}

.finance-filters {
  flex-wrap: wrap;
}
.finance-kind-filter {
  width: 175px;
}
.finance-search {
  width: 220px;
}

.finance-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.finance-table {
  width: 100%;
  min-width: 740px;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.finance-table th,
.finance-table td {
  padding: 13px 11px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}

.finance-table th {
  color: var(--muted);
  font-weight: 500;
}

.finance-table td strong {
  font-weight: 550;
}
.finance-table .finance-note-cell {
  max-width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-table .finance-amount {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finance-positive {
  color: var(--blue);
}
.finance-negative {
  color: var(--text);
}
.finance-empty {
  padding: 38px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.finance-counter {
  margin: 16px 0 0;
  text-align: right;
  font-size: 11px;
}

.finance-days {
  display: grid;
  gap: 10px;
}
.finance-day {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.finance-day-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 12px;
}
.finance-day-name {
  font-weight: 600;
}
.finance-day-totals {
  color: var(--muted);
}
.finance-day-totals strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.finance-day .finance-table-scroll {
  padding: 0 10px 10px;
}

.finance-settings-panel[hidden],
.finance-entry-form[hidden],
.finance-target-field[hidden],
.finance-category-field[hidden] {
  display: none !important;
}

/* Кнопка открытия формы находится в верхней панели */
.finance-operation-form > .finance-add-operation {
  display: none !important;
}

.finance-entry-form {
  padding: 20px;
}
.finance-entry-form h3,
.finance-setup-card h3 {
  margin: 0 0 16px;
  font-size: 14px;
}
.finance-entry-grid,
.finance-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.finance-entry-grid label,
.finance-setup-card form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
}
.finance-entry-grid input,
.finance-entry-grid select {
  width: 100%;
  min-width: 0;
}
.finance-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.finance-entry-message {
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 12px;
}
.finance-entry-message:empty,
.finance-setup-message:empty {
  display: none;
}

.finance-settings-top {
  margin-bottom: 14px;
}
.finance-setup-details {
  border: 0;
}
.finance-setup-details > summary {
  display: none;
}
.finance-setup-grid {
  padding: 0;
}
.finance-setup-card {
  min-width: 0;
  padding: 16px;
}
.finance-setup-card form {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.finance-setup-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.finance-setup-message {
  margin: 0;
  padding-top: 12px;
  font-size: 12px;
}

@media (max-width: 960px) {
  .finance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .finance-heading,
  .finance-workspace-top,
  .finance-settings-top {
    align-items: stretch;
    flex-direction: column;
  }
  .finance-heading-actions {
    justify-content: flex-start;
  }
  .finance-filters {
    width: 100%;
  }
  .finance-kind-filter,
  .finance-search {
    width: 100%;
  }
  .finance-entry-grid,
  .finance-setup-grid {
    grid-template-columns: 1fr;
  }
  .finance-workspace,
  .finance-settings-panel {
    padding: 14px;
  }
}

@media (max-width: 440px) {
  .finance-stat {
    padding: 13px;
  }
  .finance-stat strong {
    font-size: 17px;
  }
  .finance-heading-actions .btn {
    flex: 1;
  }
  .finance-entry-actions {
    flex-direction: column-reverse;
  }
  .finance-entry-actions .btn {
    width: 100%;
  }
}

/* Действия с финансовыми операциями */
.finance-row-actions {
  text-align: right;
  white-space: nowrap;
}

.finance-row-actions button {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.finance-row-actions .finance-row-delete {
  color: var(--danger);
}

.finance-row-actions button:disabled {
  cursor: wait;
  opacity: 0.5;
}

/* Финансы — план и факт по дням */
.finance-daily-report {
  padding: 20px;
  min-width: 0;
}
.finance-daily-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.finance-daily-heading h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.finance-daily-heading p {
  margin: 0;
  font-size: 12px;
}
.finance-daily-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.finance-daily-overview > div {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  display: grid;
  gap: 9px;
  min-width: 0;
}
.finance-daily-overview span {
  font-size: 11px;
}
.finance-daily-overview strong {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.finance-daily-details {
  margin-top: 16px;
}
.finance-daily-details > summary {
  cursor: pointer;
  font-size: 12px;
  padding: 10px 0;
}
.finance-daily-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.finance-daily-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 12px;
}
.finance-daily-table th,
.finance-daily-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.finance-daily-table th {
  color: var(--muted);
  font-weight: 500;
}
.finance-daily-edit {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.finance-daily-form[hidden] {
  display: none;
}
.finance-daily-form {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.finance-daily-form-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 13px;
}
.finance-daily-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.finance-daily-form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
}
.finance-daily-form-grid input {
  width: 100%;
  min-width: 0;
}
.finance-daily-note {
  grid-column: span 2;
}
.finance-daily-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.finance-daily-message,
.finance-daily-error {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 12px;
}
.finance-daily-message:empty,
.finance-daily-error:empty {
  display: none;
}
@media (max-width: 1100px) {
  .finance-daily-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .finance-daily-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .finance-daily-form-grid {
    grid-template-columns: 1fr;
  }
  .finance-daily-note {
    grid-column: auto;
  }
  .finance-daily-form-actions {
    flex-direction: column-reverse;
  }
  .finance-daily-form-actions .btn {
    width: 100%;
  }
}

/* Финансы — отдельный режим отчётов */
.finance-entries[hidden],
.finance-counter[hidden],
.finance-filters[hidden],
.finance-reports-root[hidden] {
  display: none !important;
}
.finance-reports-root {
  display: grid;
  gap: 16px;
  padding-top: 6px;
}
.finance-report-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.finance-report-metric {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.finance-report-metric span {
  font-size: 11px;
}
.finance-report-metric strong {
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.finance-report-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.finance-report-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.finance-report-panel h4 {
  margin: 0 0 6px;
  font-size: 14px;
}
.finance-report-panel > p {
  margin: 0 0 18px;
  font-size: 12px;
}
.finance-report-category-list {
  display: grid;
  gap: 16px;
}
.finance-report-category-line {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.finance-report-category-line strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.finance-report-category-line span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.finance-report-category-line small {
  margin-left: 5px;
}
.finance-report-track {
  height: 6px;
  border-radius: 10px;
  background: var(--interactive-highlight);
  overflow: hidden;
}
.finance-report-bar {
  height: 100%;
  border-radius: 10px;
  background: var(--blue);
}
.finance-report-category .finance-report-track {
  margin: 8px 0 3px;
}
.finance-report-empty {
  font-size: 12px;
}
.finance-report-trend-wrap {
  overflow-x: auto;
}
.finance-report-trend-head,
.finance-report-trend-row {
  display: grid;
  grid-template-columns: 98px minmax(140px, 1fr) minmax(140px, 1fr) 130px;
  gap: 13px;
  align-items: center;
  min-width: 680px;
}
.finance-report-trend-head {
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0 12px;
}
.finance-report-trend-row {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.finance-report-trend-row > strong {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.finance-report-trend-value {
  display: grid;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.finance-report-expense .finance-report-bar {
  background: var(--muted);
}
.finance-report-loss {
  color: var(--danger);
}
.finance-report-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .finance-report-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .finance-report-summary {
    grid-template-columns: 1fr;
  }
  .finance-report-category-line {
    flex-wrap: wrap;
  }
}

/* Финансы: постоянные платежи */
.finance-recurring-panel[hidden],
.finance-recurring-form[hidden] {
  display: none;
}
.finance-recurring-panel {
  padding: 20px;
}
.finance-recurring-heading,
.finance-recurring-item,
.finance-recurring-totals,
.finance-recurring-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.finance-recurring-heading h3 {
  margin: 0 0 6px;
  font-size: 16px;
}
.finance-recurring-heading p {
  margin: 0;
  font-size: 12px;
}
.finance-recurring-form {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.finance-recurring-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.finance-recurring-fields label,
.finance-recurring-pay label {
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.finance-recurring-fields input,
.finance-recurring-fields select {
  min-width: 0;
  width: 100%;
}
.finance-recurring-actions {
  justify-content: flex-end;
  margin-top: 14px;
}
.finance-recurring-form-message,
.finance-recurring-message {
  color: var(--danger);
  font-size: 12px;
}
.finance-recurring-form-message:empty,
.finance-recurring-message:empty {
  display: none;
}
.finance-recurring-totals {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 18px 0 8px;
  font-size: 12px;
  color: var(--muted);
}
.finance-recurring-totals strong {
  color: var(--text);
  margin-left: 4px;
}
.finance-recurring-item {
  border-top: 1px solid var(--line);
  padding: 14px 0;
  flex-wrap: wrap;
}
.finance-recurring-item-info {
  flex: 1 1 230px;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.finance-recurring-item-info strong {
  font-size: 13px;
}
.finance-recurring-item-info .muted {
  font-size: 11px;
}
.finance-recurring-amount {
  font-size: 14px;
  white-space: nowrap;
}
.finance-recurring-pay {
  display: flex;
  gap: 10px;
  align-items: end;
}
.finance-recurring-payment-date {
  min-width: 130px;
}
.finance-recurring-paid {
  font-size: 12px;
  color: var(--blue);
}
.finance-recurring-disable {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}
.finance-recurring-empty {
  padding: 16px 0;
  font-size: 12px;
}
@media (max-width: 750px) {
  .finance-recurring-fields {
    grid-template-columns: 1fr 1fr;
  }
  .finance-recurring-heading {
    align-items: flex-start;
  }
}
@media (max-width: 520px) {
  .finance-recurring-fields {
    grid-template-columns: 1fr;
  }
  .finance-recurring-pay {
    width: 100%;
    flex-wrap: wrap;
  }
  .finance-recurring-pay label,
  .finance-recurring-pay button {
    flex: 1 1 auto;
  }
}

/* Финансы: прогноз остатка по регулярным платежам */
.finance-forecast-panel[hidden] {
  display: none;
}
.finance-forecast-panel {
  padding: 20px;
}
.finance-forecast-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.finance-forecast-header h3 {
  margin: 0 0 5px;
  font-size: 16px;
}
.finance-forecast-header p {
  margin: 0;
  font-size: 12px;
}
.finance-forecast-range {
  display: inline-flex;
  gap: 4px;
}
.finance-forecast-range button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12px;
  cursor: pointer;
}
.finance-forecast-range button[aria-pressed='true'] {
  background: var(--interactive-highlight);
  border-color: var(--blue);
  color: var(--blue);
}
.finance-forecast-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.finance-forecast-metric {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.finance-forecast-metric span {
  color: var(--muted);
  font-size: 12px;
}
.finance-forecast-metric strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.finance-forecast-negative,
.finance-forecast-metric strong.finance-forecast-negative {
  color: var(--danger);
}
.finance-forecast-alert {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--danger);
}
.finance-forecast-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 18px 0;
}
.finance-forecast-columns h4 {
  font-size: 13px;
  margin: 0 0 12px;
}
.finance-forecast-items {
  border-top: 1px solid var(--line);
}
.finance-forecast-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.finance-forecast-item > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.finance-forecast-item strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.finance-forecast-item small {
  color: var(--muted);
  font-size: 11px;
}
.finance-forecast-right {
  display: grid;
  text-align: right;
  gap: 5px;
  white-space: nowrap;
}
.finance-forecast-right small.finance-forecast-negative {
  color: var(--danger);
}
.finance-forecast-empty,
.finance-forecast-footnote {
  font-size: 12px;
}
.finance-forecast-footnote {
  margin-top: 14px;
  line-height: 1.5;
}
@media (max-width: 750px) {
  .finance-forecast-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 580px) {
  .finance-forecast-metrics {
    grid-template-columns: 1fr;
  }
  .finance-forecast-header {
    flex-direction: column;
  }
}

/* Финансы — месячные бюджеты по статьям расходов */
.finance-budget-panel[hidden] {
  display: none !important;
}
.finance-budget-panel {
  padding: 20px;
  min-width: 0;
}
.finance-budget-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.finance-budget-heading h3 {
  margin: 0 0 5px;
  font-size: 16px;
}
.finance-budget-heading p {
  margin: 0;
  font-size: 12px;
}
.finance-budget-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.finance-budget-metric {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px;
}
.finance-budget-metric span {
  font-size: 11px;
  color: var(--muted);
}
.finance-budget-metric strong {
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.finance-budget-row {
  display: grid;
  grid-template-columns:
    minmax(130px, 1.2fr) minmax(145px, 1.25fr) minmax(95px, 0.8fr) minmax(120px, 0.9fr)
    auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.finance-budget-row.is-over .finance-budget-track span {
  background: var(--danger);
}
.finance-budget-name {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.finance-budget-name strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.finance-budget-name small,
.finance-budget-progress small,
.finance-budget-actual small {
  font-size: 11px;
}
.finance-budget-progress {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.finance-budget-track {
  height: 6px;
  background: var(--surface-soft, var(--line));
  border-radius: 99px;
  overflow: hidden;
}
.finance-budget-track span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
}
.finance-budget-actual {
  display: grid;
  gap: 5px;
}
.finance-budget-actual strong {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.finance-budget-input-label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.finance-budget-input-label input {
  width: 100%;
  min-width: 0;
  font-size: 12px;
}
.finance-budget-save {
  justify-self: end;
}
.finance-budget-row-error {
  grid-column: 1/-1;
  color: var(--danger);
  font-size: 11px;
}
.finance-budget-row-error:empty,
.finance-budget-status:empty {
  display: none;
}
.finance-budget-status {
  font-size: 12px;
  color: var(--text);
  margin: 12px 0 0;
}
.finance-budget-footnote {
  font-size: 11px;
  margin: 16px 0 0;
  line-height: 1.5;
}
@media (max-width: 1050px) {
  .finance-budget-row {
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(95px, 0.8fr);
  }
  .finance-budget-input-label,
  .finance-budget-save {
    grid-row: 2;
  }
  .finance-budget-save {
    justify-self: start;
  }
  .finance-budget-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .finance-budget-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .finance-budget-name,
  .finance-budget-progress {
    grid-column: 1/-1;
  }
  .finance-budget-actual,
  .finance-budget-input-label {
    grid-row: auto;
  }
  .finance-budget-save {
    grid-column: 1/-1;
    grid-row: auto;
    width: 100%;
  }
  .finance-budget-summary {
    gap: 8px;
  }
  .finance-budget-metric {
    padding: 10px;
  }
  .finance-budget-metric strong {
    font-size: 14px;
  }
}

/* Финансы — выгрузка в Excel рядом с периодом */
.finance-export-button {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .finance-period {
    flex-wrap: wrap;
  }
  .finance-export-button {
    width: 100%;
  }
}

/* Предпросмотр финансового импорта */

.finance-import-preview[hidden] {
  display: none;
}

.finance-import-preview {
  padding: 20px;
}

.finance-import-preview h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.finance-import-preview > p {
  font-size: 12px;
}

.finance-import-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.finance-import-metrics > div {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}

.finance-import-metrics small {
  color: var(--muted);
}

.finance-import-metrics strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.finance-import-choice {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
}

.finance-import-count {
  font-size: 12px;
}

.finance-import-preview details {
  margin-top: 20px;
  font-size: 12px;
}

@media (max-width: 750px) {
  .finance-import-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Выбор операций перед импортом */

.finance-import-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 0;
  margin: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.finance-import-selected {
  font-size: 13px;
  font-weight: 600;
  flex: 1 1 300px;
}

.finance-import-selection > p {
  width: 100%;
  margin: 0;
  font-size: 12px;
}

.finance-import-preview table input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary, #2389ff);
}

.finance-import-preview table input:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* Месяц загрузки Excel */

.finance-import-period-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
  font-size: 13px;
  font-weight: 600;
}

.finance-import-month {
  max-width: 190px;
}

.finance-import-empty {
  padding: 20px;
  margin: 16px 0 0;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* Сопоставление финансового импорта */

.finance-import-mapping {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.finance-import-mapping h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.finance-import-mapping > p {
  font-size: 12px;
}

.finance-import-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.finance-import-map-grid label,
.finance-import-account-bulk label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
}

.finance-import-map-grid select,
.finance-import-account-bulk select {
  width: 100%;
}

.finance-import-account-bulk {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.finance-import-account-bulk label {
  flex: 1 1 240px;
}

.finance-import-mapping-status {
  font-weight: 600;
  font-size: 13px;
}

.finance-import-preview td select[data-import-account] {
  min-width: 145px;
  max-width: 220px;
}

@media (max-width: 750px) {
  .finance-import-map-grid {
    grid-template-columns: 1fr;
  }
}

/* Подтверждение импорта Excel */

.finance-import-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}

.finance-import-confirm > p {
  width: 100%;
  margin: 0;
  font-size: 12px;
}

.finance-import-confirm [hidden] {
  display: none !important;
}

.finance-import-commit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.finance-import-commit-status {
  font-weight: 600;
}

/* История импорта Excel */

.finance-import-history-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.finance-import-history-list {
  margin-top: 16px;
}

.finance-import-history-list[hidden] {
  display: none;
}

.finance-import-history-list table {
  min-width: 700px;
}

.finance-import-history-list td {
  vertical-align: middle;
}

.finance-import-category-create {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.finance-import-create-status {
  font-size: 12px;
  margin: 0;
}

.finance-import-create-categories:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Компактный автоматизированный импорт */

.finance-import-category-details,
.finance-import-rows-details {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.finance-import-category-details > summary,
.finance-import-rows-details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.finance-import-category-details[open] > summary,
.finance-import-rows-details[open] > summary {
  margin-bottom: 16px;
}

.finance-import-auto-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.finance-import-auto-actions span {
  font-size: 12px;
  color: var(--muted);
}

.finance-import-exceptions {
  padding: 14px 16px;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
}

.finance-import-exceptions ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.finance-import-exceptions li {
  margin: 6px 0;
}

/* Компактный импорт Excel */

.finance-import-preview.finance-import-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
}

.finance-import-preview.finance-import-compact[hidden] {
  display: none !important;
}

.finance-import-compact .finance-import-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.finance-import-compact .finance-import-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.finance-import-compact .finance-import-heading h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.finance-import-compact .finance-import-heading p {
  margin: 0;
  color: var(--muted, #758293);
  font-size: 12px;
  line-height: 1.5;
}

.finance-import-compact .finance-import-topbar .finance-import-history-actions {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
}

.finance-import-compact .finance-import-upload {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 5px;
}

.finance-import-compact .finance-import-upload .finance-import-period-label,
.finance-import-compact .finance-import-file-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin: 0;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}

.finance-import-compact .finance-import-upload .finance-import-month {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 42px;
  margin: 0;
}

.finance-import-compact .finance-import-file-field input[type='file'] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 12px;
}

.finance-import-compact .finance-import-file-field input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.finance-import-compact > .finance-import-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.finance-import-compact > .finance-import-status:empty,
.finance-import-compact > .finance-import-content:empty {
  display: none;
}

.finance-import-compact .finance-import-history-list[hidden] {
  display: none !important;
}

.finance-import-compact .finance-import-history-list:not([hidden]) {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.finance-import-compact .finance-import-history-list .finance-table-scroll {
  max-height: 230px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.finance-import-compact-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.finance-import-compact-content > .finance-import-short-heading {
  order: 0;
}

.finance-import-compact-content > .finance-import-metrics {
  order: 1;
}

.finance-import-compact-content > .finance-import-exceptions {
  order: 2;
}

.finance-import-compact-content > .finance-import-mapping {
  order: 3;
}

.finance-import-compact-content > .finance-import-selection {
  order: 4;
}

.finance-import-compact-content > .finance-import-confirm {
  order: 5;
}

.finance-import-compact-content > .finance-import-rows-details {
  order: 6;
}

.finance-import-compact-content > details:not(.finance-import-rows-details) {
  order: 7;
}

.finance-import-short-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.finance-import-short-heading span {
  color: var(--muted, #758293);
  font-size: 12px;
}

.finance-import-compact-content .finance-import-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.finance-import-compact-content .finance-import-metrics > div {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
}

.finance-import-compact-content .finance-import-mapping {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border-radius: 12px;
}

.finance-import-compact-content .finance-import-mapping h4,
.finance-import-compact-content .finance-import-mapping > p,
.finance-import-compact-content .finance-import-account-bulk,
.finance-import-compact-content .finance-import-category-create,
.finance-import-compact-content .finance-import-auto-actions {
  margin: 0;
}

.finance-import-compact-content .finance-import-account-bulk {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}

.finance-import-compact-content .finance-import-account-bulk label {
  flex: 1 1 220px;
  max-width: 360px;
}

.finance-import-compact-content .finance-import-category-details,
.finance-import-compact-content .finance-import-rows-details {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.finance-import-compact-content .finance-import-category-details > summary,
.finance-import-compact-content .finance-import-rows-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.finance-import-compact-content .finance-import-map-grid {
  margin: 12px 0 0;
}

.finance-import-compact-content .finance-import-selection {
  gap: 8px;
  margin: 0;
  padding: 10px 0;
}

.finance-import-compact-content .finance-import-selection > p {
  margin: 0;
  font-size: 11px;
}

.finance-import-compact-content .finance-import-confirm {
  gap: 10px;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.finance-import-compact-content .finance-import-exceptions {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
}

.finance-import-compact-content .finance-import-exceptions p {
  margin: 4px 0;
}

@media (max-width: 760px) {
  .finance-import-preview.finance-import-compact {
    padding: 15px;
  }

  .finance-import-compact .finance-import-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .finance-import-compact .finance-import-upload {
    grid-template-columns: 1fr;
  }

  .finance-import-compact-content .finance-import-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-import-compact-content .finance-import-confirm .finance-import-commit {
    width: 100%;
  }
}

.finance-import-apply-account[hidden] {
  display: none !important;
}

/* Завершённый импорт Excel */

.finance-import-compact .finance-import-upload[hidden] {
  display: none !important;
}

.finance-import-completed {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 0 4px;
}

.finance-import-completed-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.finance-import-completed-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  background: #eaf7ef;
  color: #27864a;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
}

.finance-import-completed-head strong {
  font-size: 15px;
}

.finance-import-completed-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.finance-import-completed-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 12px;
}

.finance-import-completed-stats > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.finance-import-completed-stats small {
  color: var(--muted);
  font-size: 11px;
}

.finance-import-completed-stats strong {
  font-size: 23px;
}

.finance-import-completed-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .finance-import-completed-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-import-completed-actions .btn {
    flex: 1 1 100%;
  }
}

/* Единые модальные окна финансов */

body.finance-dialog-open {
  overflow: hidden;
}

.finance-dialog-overlay[hidden] {
  display: none !important;
}

.finance-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
}

.finance-dialog-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.32);
}

.finance-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 980px);
  max-height: min(90dvh, 1000px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.19);
  outline: none;
}

.finance-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.finance-dialog-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.finance-dialog-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

.finance-dialog-close:hover {
  background: var(--line);
}

.finance-dialog-body {
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.finance-dialog-body > .card,
.finance-dialog-body > .finance-settings-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.finance-dialog-body .finance-import-preview {
  width: 100%;
}

.finance-dialog-body .finance-import-heading h3,
.finance-dialog-body .finance-settings-top h3 {
  display: none;
}

/* План продаж виден только в отчётах */
.finance-daily-root[hidden] {
  display: none !important;
}

.finance-workspace > .finance-daily-root:not([hidden]) {
  margin-top: 18px;
}

/* Мобильные окна */
@media (max-width: 760px) {
  .finance-dialog-backdrop {
    padding: 0;
    align-items: stretch;
  }

  .finance-dialog {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .finance-dialog-header {
    padding: 14px 16px;
  }

  .finance-dialog-body {
    padding: 16px;
  }
}