:is(.surux-budget-add-page, .surux-budget-edit-page) {
  --surux-budget-gap: clamp(.85rem, 1.5vw, 1.2rem);
  --surux-budget-control-height: 2.75rem;
  --surux-budget-soft-border: color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .22));
  --surux-budget-soft-surface: color-mix(in srgb, var(--surux-surface-2) 88%, rgba(var(--surux-primary-rgb), .12));
}

.surux-budget-list-name,
.surux-budget-mobile-markers {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
}

.surux-budget-private-chip {
  --surux-status-bg: color-mix(in srgb, var(--surux-primary) 10%, var(--surux-surface));
  --surux-status-border: color-mix(in srgb, var(--surux-primary) 42%, var(--surux-border));
  --surux-status-color: var(--surux-text);
  min-height: 24px;
  gap: .34rem;
  padding: .25rem .56rem;
  font-size: .72rem;
}

.surux-budget-private-chip i {
  color: var(--surux-primary);
  font-size: .68rem;
}

.surux-budget-mobile-markers {
  margin-top: .28rem;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-add-content,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-editor,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-form {
  min-width: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-editor,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-form {
  display: grid;
  align-content: start;
  gap: var(--surux-budget-gap);
}

:is(.surux-budget-add-page, .surux-budget-edit-page) [hidden] {
  display: none !important;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-validation {
  margin: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-dirty-notice {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  padding: .48rem .72rem;
  border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 48%, var(--surux-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surux-warning-fill) 10%, var(--surux-surface));
  color: var(--surux-text);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-dirty-notice i {
  color: var(--surux-warning);
  font-size: .48rem;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-overview-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--surux-budget-gap);
  align-items: stretch;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-overview-grid > .surux-card {
  width: 100%;
  min-width: 0;
  margin: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-details-card > .surux-card-body,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-planned-summary-card > .surux-card-body,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel > .surux-card-body {
  min-width: 0;
  height: 100%;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-details-card > .surux-card-body,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-planned-summary-card > .surux-card-body {
  display: grid;
  align-content: start;
  gap: 1rem;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-card-heading {
  min-width: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-card-heading .surux-section-heading,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel-header .surux-section-heading {
  margin: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-card-heading p,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel-header p {
  margin: .28rem 0 0;
  color: var(--surux-muted);
  font-size: .86rem;
  line-height: 1.42;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-detail-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-name-field {
  grid-column: span 8;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-field {
  grid-column: span 4;
  min-width: 0;
  align-self: end;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-description-field,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-note {
  grid-column: 1 / -1;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-owner-field,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-approver-field,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-period-field {
  grid-column: span 6;
  min-width: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-detail-grid .surux-control,
:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-detail-grid [data-surux-picker] {
  min-width: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-control {
  min-height: var(--surux-budget-control-height);
  align-items: center;
  padding: .62rem .75rem;
  border: 1px solid var(--surux-budget-soft-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-budget-soft-surface);
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-note {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .78rem .9rem;
  border: 1px solid color-mix(in srgb, var(--surux-primary) 28%, var(--surux-border));
  border-radius: var(--surux-radius-sm);
  background: color-mix(in srgb, rgba(var(--surux-primary-rgb), .09) 75%, var(--surux-surface));
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-note > i {
  flex: 0 0 auto;
  margin-top: .13rem;
  color: var(--surux-primary);
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-note p {
  min-width: 0;
  margin: 0;
  color: var(--surux-muted);
  font-size: .83rem;
  line-height: 1.45;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-note strong {
  color: var(--surux-text);
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tiles {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .72rem;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tile {
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: .42rem;
  min-height: 5.6rem;
  padding: .8rem;
  border: 1px solid var(--surux-budget-soft-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-budget-soft-surface);
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tile span {
  color: var(--surux-muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.2;
  text-transform: uppercase;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tile strong {
  min-width: 0;
  overflow: hidden;
  color: var(--surux-text);
  font-size: clamp(1.05rem, 2vw, 1.38rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tile-income {
  border-color: color-mix(in srgb, var(--surux-success-fill) 34%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-success-fill) 8%, var(--surux-surface));
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tile-expenses {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 30%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-danger-fill) 7%, var(--surux-surface));
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tile-balance {
  border-color: color-mix(in srgb, var(--surux-primary) 38%, var(--surux-border));
  background: color-mix(in srgb, rgba(var(--surux-primary-rgb), .1) 78%, var(--surux-surface));
}

.surux-budget-edit-page .surux-budget-summary-tile-success {
  border-color: color-mix(in srgb, var(--surux-success-fill) 34%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-success-fill) 8%, var(--surux-surface));
}

.surux-budget-edit-page .surux-budget-summary-tile-danger {
  border-color: color-mix(in srgb, var(--surux-danger-fill) 32%, var(--surux-border));
  background: color-mix(in srgb, var(--surux-danger-fill) 7%, var(--surux-surface));
}

.surux-budget-edit-page .surux-budget-summary-tile-neutral {
  border-color: color-mix(in srgb, var(--surux-primary) 30%, var(--surux-border));
}

.surux-budget-edit-page .surux-budget-expense-usage {
  display: grid;
  gap: .45rem;
}

.surux-budget-edit-page .surux-budget-expense-usage > div > strong {
  color: var(--surux-summary-color, var(--surux-text));
}

.surux-budget-edit-page .surux-budget-expense-usage-track {
  height: .45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surux-budget-soft-surface);
}

.surux-budget-edit-page .surux-budget-expense-usage-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--surux-summary-color, var(--surux-primary));
  transition: width var(--surux-transition);
}

.surux-budget-edit-page .surux-budget-expense-usage.surux-summary-tone-neutral {
  --surux-summary-color: var(--surux-muted);
}

.surux-budget-edit-page .surux-budget-stale-notice,
.surux-budget-edit-page .surux-budget-revision-context > .surux-card-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
}

.surux-budget-edit-page .surux-budget-stale-notice {
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--surux-warning-fill) 48%, var(--surux-border));
  border-radius: var(--surux-radius-md);
  background: color-mix(in srgb, var(--surux-warning-fill) 10%, var(--surux-surface));
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-lines {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--surux-budget-gap);
  align-items: start;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel {
  width: 100%;
  min-width: 0;
  margin: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel > .surux-card-body {
  display: grid;
  align-content: start;
  gap: .9rem;
}

.surux-budget-add-page .surux-budget-line-panel-heading {
  min-width: 0;
}

.surux-budget-add-page .surux-budget-line-panel-heading .surux-section-heading {
  margin: 0;
}

.surux-budget-add-page .surux-budget-line-panel-heading p {
  margin: .28rem 0 0;
  color: var(--surux-muted);
  font-size: .86rem;
  line-height: 1.42;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel-header > div {
  min-width: 0;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: .25rem .62rem;
  border: 1px solid var(--surux-budget-soft-border);
  border-radius: 999px;
  background: var(--surux-budget-soft-surface);
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-list {
  min-width: 0;
  display: grid;
  gap: .72rem;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding-top: .1rem;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-add-line-button {
  width: 46px !important;
}

.surux-budget-add-page .surux-budget-line-panel > .surux-card-footer {
  display: flex;
  justify-content: center;
}

.surux-budget-add-page .surux-budget-summary-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.surux-budget-add-page .surux-budget-summary-list > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--surux-border);
}

.surux-budget-add-page .surux-budget-summary-list > div:first-child {
  padding-top: 0;
}

.surux-budget-add-page .surux-budget-summary-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.surux-budget-add-page .surux-budget-summary-list dt {
  min-width: 0;
  color: var(--surux-muted);
  font-size: .82rem;
  font-weight: 650;
}

.surux-budget-add-page .surux-budget-summary-list dd {
  min-width: 0;
  margin: 0;
  color: var(--surux-text);
  font-size: .95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) :is(.surux-budget-line-drag-handle, .surux-budget-line-drag) {
  cursor: grab;
  touch-action: none;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) :is(.surux-budget-line-drag-handle, .surux-budget-line-drag):active {
  cursor: grabbing;
}

:is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-reorder-marker {
  height: .25rem;
  border-radius: 999px;
  background: var(--surux-primary);
  box-shadow: 0 0 .75rem rgba(var(--surux-primary-rgb), .4);
}

.surux-budget-edit-page [data-surux-budget-lines] {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--surux-budget-gap);
  align-items: start;
}

.surux-budget-edit-page .surux-budget-line.surux-budget-line-row {
  display: block;
  content-visibility: auto;
  contain-intrinsic-block-size: auto 7.5rem;
}

.surux-budget-edit-page .surux-budget-line-panel-header > div:first-child {
  min-width: 0;
  display: grid;
  gap: .32rem;
}

.surux-budget-edit-page .surux-budget-line-panel-header [data-surux-budget-line-count] {
  color: var(--surux-muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
}

.surux-budget-edit-page .surux-budget-line-panel-totals {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  gap: .5rem;
}

.surux-budget-edit-page .surux-budget-line-panel-totals > span {
  min-width: 6.5rem;
  display: grid;
  gap: .2rem;
  padding: .5rem .65rem;
  border: 1px solid var(--surux-budget-soft-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-budget-soft-surface);
  text-align: right;
}

.surux-budget-edit-page .surux-budget-line-panel-totals small {
  color: var(--surux-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1;
  text-transform: uppercase;
}

.surux-budget-edit-page .surux-budget-line-panel-totals strong {
  color: var(--surux-text);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.surux-budget-edit-page .surux-budget-line-grid {
  min-width: 0;
}

.surux-budget-edit-page .surux-budget-line-controls {
  min-width: 0;
}

.surux-budget-edit-page .surux-budget-line-sequence,
.surux-budget-edit-page .surux-budget-line-amount,
.surux-budget-edit-page .surux-budget-line-actual {
  grid-area: auto;
}

.surux-budget-edit-page .surux-budget-line-status {
  grid-area: auto;
  grid-column: span 2;
}

.surux-budget-edit-page :is(.surux-budget-line-sequence, .surux-budget-line-description, .surux-budget-line-amount, .surux-budget-line-actual, .surux-budget-line-status),
.surux-budget-edit-page :is(.surux-budget-line-sequence, .surux-budget-line-description, .surux-budget-line-amount, .surux-budget-line-actual, .surux-budget-line-status) .surux-control {
  min-width: 0;
}

/*
 * Budget panels have less surrounding chrome than the document editor, so the
 * canonical finance table fits from the desktop breakpoint.  Keep the budget
 * lines on the same header + compact-row layout as invoice lines instead of
 * falling back to the labelled card layout until an extra-wide viewport.
 */
@media (min-width: 1200px) {
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-list {
    gap: .45rem;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-invoice-line-header {
    min-width: 0;
    display: grid;
    grid-template-columns: var(--surux-invoice-line-columns);
    align-items: end;
    gap: .65rem;
    padding: .05rem .6rem;
    border-inline: 1px solid transparent;
    color: var(--surux-muted);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-invoice-line-header > * {
    min-width: 0;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-invoice-line-header :is(
    [data-surux-line-header="actions"],
    [data-surux-line-header="line"]
  ) {
    text-align: center;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-invoice-line-header :is(
    [data-surux-line-header="quantity"],
    [data-surux-line-header="price"],
    [data-surux-line-header="total-excluding"],
    [data-surux-line-header="vat-amount"],
    [data-surux-line-header="total-including"]
  ) {
    text-align: right;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line.surux-invoice-line {
    padding: .6rem;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-invoice-line-grid {
    grid-template-columns: var(--surux-invoice-line-columns);
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-invoice-line-grid > .surux-control > .form-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .surux-budget-edit-page .surux-budget-line-actual {
    grid-column: 3 / 6;
  }

  .surux-budget-edit-page .surux-budget-line-status {
    grid-column: 6 / -1;
  }
}

.surux-budget-edit-page .surux-budget-line-grid .form-label {
  margin-bottom: .35rem;
  color: var(--surux-muted);
  font-size: .76rem;
  font-weight: 700;
}

.surux-budget-edit-page .surux-budget-line-grid .surux-input {
  min-height: var(--surux-budget-control-height);
}

.surux-budget-edit-page .surux-budget-line-review-reason,
.surux-budget-edit-page .surux-budget-line-history {
  min-width: 0;
  margin-top: .72rem;
}

.surux-budget-edit-page .surux-budget-line-history {
  display: grid;
  gap: .42rem;
}

.surux-budget-edit-page .surux-budget-line-history > div {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .42rem .62rem;
  color: var(--surux-muted);
  font-size: .76rem;
}

.surux-budget-edit-page .surux-budget-history-lines {
  display: grid;
  gap: .75rem;
}

.surux-budget-edit-page .surux-budget-history-line {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 6rem;
  padding: .85rem;
  border: 1px solid var(--surux-budget-soft-border);
  border-radius: var(--surux-radius-sm);
  background: var(--surux-budget-soft-surface);
}

@media (min-width: 1200px) {
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-overview-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .72fr);
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-name-field,
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-private-field,
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-owner-field,
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-approver-field,
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-period-field {
    grid-column: 1 / -1;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-summary-tile {
    min-height: 4.75rem;
  }

  .surux-budget-edit-page .surux-budget-line-panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .surux-budget-edit-page .surux-budget-line-panel-totals {
    width: 100%;
  }

  .surux-budget-edit-page .surux-budget-line-panel-totals > span {
    min-width: 0;
    flex: 1 1 0;
  }

}

@media (max-width: 575.98px) {
  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-detail-grid {
    gap: .82rem;
  }

  :is(.surux-budget-add-page, .surux-budget-edit-page) .surux-budget-line-panel-header {
    align-items: center;
  }
}

@media (max-width: 479.98px) {
  .surux-budget-edit-page :is(.surux-budget-line-actual, .surux-budget-line-status) {
    grid-column: auto;
  }
}

@media (min-width: 576px) {
  .surux-budget-edit-page .surux-budget-edit-summary-card .surux-budget-summary-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surux-budget-edit-page .surux-budget-analysis-totals-card .surux-budget-summary-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}