.dialog {
  --admin-form-dialog-width: 600px;
  --admin-form-content-x: var(--space-6);
  --admin-form-field-width: 240px;
  --admin-form-wide-width: calc(var(--admin-form-dialog-width) - var(--admin-form-content-x) - var(--admin-form-content-x));
}

.paper {
  width: min(var(--admin-form-dialog-width), calc(100vw - 32px)) !important;
  max-width: min(var(--admin-form-dialog-width), calc(100vw - 32px)) !important;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-dialog);
}

.compact {
  --admin-form-dialog-width: 520px;
  --admin-form-field-width: 220px;
}

.narrow {
  --admin-form-dialog-width: 420px;
  --admin-form-field-width: 100%;
}

.wide {
  --admin-form-dialog-width: 680px;
  --admin-form-field-width: 220px;
}

.large {
  --admin-form-dialog-width: 760px;
  --admin-form-field-width: 240px;
}

.full {
  --admin-form-dialog-width: 1240px;
  --admin-form-field-width: 240px;
}

.form {
  display: flex;
  max-height: calc(100vh - 64px);
  flex-direction: column;
}

.title {
  padding: var(--space-5) var(--admin-form-content-x) var(--space-3);
  color: var(--text-primary);
  font-size: var(--admin-font-size);
  font-weight: 760;
  line-height: var(--admin-line-height);
}

.content {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  overflow: auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-2) var(--admin-form-content-x) var(--space-5) !important;
}

.content > :global(.MuiTextField-root),
.content > :global(.MuiFormControl-root) {
  flex: 0 0 min(100%, var(--admin-form-field-width));
  width: min(100%, var(--admin-form-field-width));
  max-width: 100%;
}

.content > :global(.MuiTextField-root:has(.MuiInputBase-multiline)),
.content > :global(.MuiFormControl-root:has(.MuiInputBase-multiline)),
.content > :global(.MuiAutocomplete-root),
.content > :global(.MuiFormControlLabel-root),
.content > :not(:global(.MuiTextField-root)):not(:global(.MuiFormControl-root)):not(:global(.MuiAutocomplete-root)):not(:global(.MuiFormControlLabel-root)) {
  flex: 0 0 min(100%, var(--admin-form-wide-width));
  width: min(100%, var(--admin-form-wide-width));
  max-width: 100%;
}

.section {
  display: grid;
  width: min(100%, var(--admin-form-wide-width, 100%));
  max-width: 100%;
  gap: var(--space-3);
}

.section + .section {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.sectionHeader {
  display: flex;
  min-height: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sectionTitle {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.section > :global(.MuiTextField-root),
.section > :global(.MuiFormControl-root),
.section > :global(.MuiAutocomplete-root),
.section > :global(.MuiFormControlLabel-root) {
  width: 100%;
}

.sectionActions,
.inlineActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.fieldGrid {
  display: grid;
  grid-template-columns: var(--admin-form-grid-columns, repeat(auto-fit, minmax(180px, 1fr)));
  gap: var(--space-3);
  width: min(100%, var(--admin-form-wide-width, 100%));
  max-width: 100%;
}

.fieldGrid > :global(.MuiTextField-root),
.fieldGrid > :global(.MuiFormControl-root),
.fieldGrid > :global(.MuiAutocomplete-root),
.fieldGrid > :global(.MuiFormControlLabel-root),
.fieldGrid > .switchField,
.fieldGrid > .readOnlyField {
  width: 100%;
}

.switchField {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  margin-right: 0;
  margin-left: 0;
}

.readOnlyField {
  display: grid;
  min-width: 0;
  min-height: 56px;
  align-content: center;
  gap: var(--space-1);
  padding: 8px var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-control);
  background: var(--bg-card-strong);
}

.readOnlyLabel {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readOnlyValue {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--admin-font-size);
  font-weight: 760;
  line-height: var(--admin-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amountField :global(.MuiOutlinedInput-root) {
  background: var(--bg-input-strong);
}

.amountField :global(.MuiOutlinedInput-root.Mui-focused) {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.amountField :global(.MuiInputBase-input) {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.inputUnit {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 700;
}

.list {
  display: grid;
  gap: var(--space-2);
}

.listRow {
  display: grid;
  grid-template-columns: var(--admin-form-list-columns, minmax(180px, 1fr) minmax(112px, 0.55fr) minmax(92px, 0.4fr) auto);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card-strong);
}

.listRow > :global(.MuiTextField-root),
.listRow > :global(.MuiFormControl-root) {
  width: 100%;
}

.actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  justify-content: flex-end;
  gap: var(--space-2);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
  padding: var(--space-3) var(--admin-form-content-x) var(--space-5);
}

@media (max-width: 760px) {
  .dialog {
    --admin-form-content-x: var(--space-4);
    --admin-form-wide-width: calc(100vw - 24px - var(--admin-form-content-x) - var(--admin-form-content-x));
  }

  .paper {
    margin: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .content {
    padding-right: var(--admin-form-content-x) !important;
    padding-left: var(--admin-form-content-x) !important;
  }

  .content > :global(.MuiTextField-root),
  .content > :global(.MuiFormControl-root) {
    width: 100%;
  }

  .listRow {
    grid-template-columns: 1fr;
  }

  .fieldGrid {
    grid-template-columns: 1fr !important;
  }
}
