.forecast-nav,
.bottom-nav {
  align-items: flex-start;
}

.forecast-panel {
  display: grid;
  gap: 14px;
}

.bulk-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(220px, 280px) minmax(170px, 220px) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.bulk-toolbar .button {
  min-height: 38px;
}

.forecast-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.forecast-table {
  min-width: 1360px;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
}

.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(1) {
  width: 54px;
}

.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(2) {
  width: 240px;
}

.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(3),
.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(6),
.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(7) {
  width: 160px;
}

.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(4) {
  width: 180px;
}

.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(5) {
  width: 180px;
}

.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(8) {
  width: 170px;
}

.forecast-table tr:not(.category-title-row) > :is(th, td):nth-child(9) {
  width: 78px;
}

.forecast-table th,
.forecast-table td {
  vertical-align: middle;
}

.forecast-table th {
  text-align: center;
}

.forecast-table select {
  text-align: center;
  text-align-last: center;
}

.forecast-table input.money-input,
.forecast-table .calculated-value,
.total-row td:nth-child(3),
.total-row td:nth-child(6),
.total-row td:nth-child(7),
.profit-row td:nth-child(3),
.profit-row td:nth-child(6),
.profit-row td:nth-child(7) {
  text-align: right;
}

.forecast-table .account-name-input,
.forecast-table .method-select,
.forecast-table .tax-category-select,
.dynamic-placeholder {
  text-align: center;
}

.forecast-table .calculated-value {
  display: block;
}

.forecast-table tr.dragging td {
  opacity: 0.45;
}

.forecast-table tr.drop-target td,
.forecast-table tr.account-row.drop-target td,
.forecast-table tr.add-row.drop-target td,
.forecast-table tr.category-title-row.drop-target td {
  box-shadow: inset 0 0 0 2px rgba(47, 128, 104, 0.32);
}

.category-title-row td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--primary-soft);
  color: var(--primary-dark);
  text-align: left;
  font-size: 15px;
  font-weight: 900;
}

.category-header-row th {
  background: #f3fbf7;
  color: var(--primary-dark);
  text-align: center;
}

.account-row td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.account-row td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 999px 0 0 999px;
  text-align: center;
}

.account-row td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 999px 999px 0;
}

.account-row:hover td {
  background: #fbfefc;
}

.account-name-cell {
  display: block;
}

.drag-handle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #e6f4ed;
  color: var(--primary-dark);
  cursor: grab;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.dynamic-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.dynamic-unit {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.dynamic-field input {
  text-align: right;
}

.dynamic-placeholder,
.calculated-value {
  font-weight: 900;
}

.dynamic-placeholder {
  color: var(--muted);
}

.total-row td,
.profit-row td {
  background: #fbfefc;
  font-weight: 900;
}

.profit-row td {
  background: #eef8f3;
  color: var(--primary-dark);
}

.total-label,
.profit-label {
  text-align: center;
}

.total-row .csv-total-reference,
.total-row .csv-total-difference {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.total-row .csv-total-difference-warning {
  border-top: 1px solid #ead58c;
  border-bottom: 1px solid #ead58c;
  background: #fff8dc;
  color: #795d00;
}

.cell-error {
  position: relative;
  border: 2px solid var(--red) !important;
  background: var(--red-soft) !important;
}

.cell-error::after {
  content: attr(data-error);
  position: absolute;
  right: 8px;
  bottom: calc(100% + 8px);
  z-index: 6;
  display: none;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid rgba(170, 63, 56, 0.35);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
}

.cell-error:hover::after,
.cell-error:focus-within::after {
  display: block;
}

.delete-row-button {
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
}

.add-row td {
  background: #fbfefc;
  text-align: left;
}

.add-account-button {
  min-height: 34px;
}

.bottom-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 1080px) {
  .page-title {
    gap: 16px;
  }

  .bulk-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .bulk-toolbar {
    grid-template-columns: 1fr;
  }

  .bottom-nav {
    justify-content: flex-start;
  }
}