.calculator,
.calculator__wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--calculator-text);
}

.calculator__header {
  margin-bottom: 8px;
}

.calculator__accordion,
.calculator__box,
.calculator__evaluation-box,
.calculator__section {
  background: var(--calculator-panel);
  border: 1px solid var(--calculator-panel-border);
  border-radius: var(--calculator-radius-lg);
  box-shadow: var(--calculator-soft-shadow);
}

.calculator__box,
.calculator__evaluation-box,
.calculator__section {
  padding: 24px;
}

.calculator__accordion {
  overflow: hidden;
}

.calculator__accordion .mantine-Accordion-item {
  border-bottom: 1px solid var(--calculator-panel-border) !important;
}

.calculator__accordion .mantine-Accordion-item:last-child {
  border-bottom: none !important;
}

.calculator__accordion .mantine-Accordion-control {
  background: var(--calculator-panel-soft) !important;
  color: var(--calculator-text-strong) !important;
  font-weight: 600 !important;
  padding: 18px 24px !important;
}

.calculator__accordion .mantine-Accordion-control:hover {
  background: var(--calculator-surface-soft) !important;
}

.calculator__accordion .mantine-Accordion-panel {
  background: var(--calculator-panel) !important;
}

.calculator__title,
.calculator__evaluation-title {
  margin: 0 0 8px;
  color: var(--calculator-title-color, var(--calculator-text-strong));
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--calculator-title-font-family, var(--font-family));
}

.calculator__subtitle {
  margin: 0 0 10px;
  color: var(--calculator-text-strong);
  font-size: 1rem;
  font-weight: 600;
}

.calculator__subtitle-small {
  margin: 0 0 10px;
  color: var(--calculator-text-strong);
  font-size: 0.95rem;
  font-weight: 600;
}

.calculator__subtitle--warning {
  color: var(--calculator-danger);
}

/* Feedback targets for Dash callbacks; no layout when empty. */
#eval-params-save-feedback:empty,
#eval-params-delete-feedback:empty {
  display: none;
}

.calculator__subtitle-small--hidden,
.calculator__row--hidden,
.calculator__progress--hidden {
  display: none !important;
}

.calculator__text,
.calculator__evaluation-text,
.calculator__message {
  margin: 0;
  color: var(--calculator-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.calculator__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.calculator__row--between {
  justify-content: space-between;
  align-items: flex-start;
}

.calculator__col,
.calculator__input-group {
  display: flex;
  flex: 1 1 220px;
  min-width: 200px;
  flex-direction: column;
  gap: 8px;
}

.calculator__label {
  display: block;
  margin: 0 0 8px;
  color: var(--calculator-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.calculator__input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--calculator-input-border);
  background: var(--calculator-input-bg);
  color: var(--calculator-input-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.calculator__input::placeholder {
  color: var(--calculator-input-placeholder);
}

.calculator__input:hover {
  border-color: var(--calculator-input-border-hover);
}

.calculator__input:focus,
.calculator__input:focus-visible {
  outline: none;
  border-color: var(--calculator-brand);
  box-shadow: 0 0 0 4px var(--calculator-input-focus);
}

.calculator__actions,
.calculator__evaluation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.calculator__evaluation-actions-button,
.calculator__evaluation-actions-button--spaced,
.calculator__save-button-wrapper {
  display: flex;
  align-items: center;
}

.calculator__inline {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.calculator__dropdown {
  flex: 1 1 280px;
  min-width: 220px;
}

.calculator__link-button {
  display: inline-flex;
  text-decoration: none;
}

.calculator__error {
  min-height: 24px;
  color: var(--calculator-danger);
  font-size: 0.9rem;
  font-weight: 500;
}

.calculator__progress {
  width: 100%;
}

.calculator__modal-body {
  color: var(--calculator-text);
}

.calculator__center {
  text-align: center;
}

.evaluation__reset-button {
  margin-top: 16px;
}

/* Add-parameters form: uses components.ui.card defaults; only layout tokens here */
.evaluation-params-form-card {
  /* One “column” width for inputs (matches grid cells; avoids full-bleed fields) */
  --eval-form-column-max: 320px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.evaluation-params-form-card .calculator__section {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.evaluation-params-form-card .evaluation-params-form__section + .evaluation-params-form__section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
}

.evaluation-params-form-card .calculator__title {
  margin-bottom: 0;
}

/* Evaluation parameters form: responsive field grid + subsection titles */
.evaluation-params-form__subsection-title {
  margin: 1.25rem 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--calculator-text-strong);
}

.evaluation-params-form__subsection-title:first-child {
  margin-top: 0;
}

.evaluation-params-form__field-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      min(220px, 100%),
      min(100%, var(--eval-form-column-max))
    )
  );
  gap: 16px 20px;
  align-items: start;
  width: 100%;
}

.evaluation-params-form__field-grid--single {
  grid-template-columns: minmax(0, min(100%, var(--eval-form-column-max)));
  max-width: var(--eval-form-column-max);
  width: 100%;
}

.evaluation-params-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: var(--eval-form-column-max);
  width: 100%;
}

.evaluation-params-form-card .evaluation-params-form__field .custom-input {
  width: 100%;
  max-width: 100%;
}

.evaluation-params-form__field-hint {
  font-size: 0.8125rem;
  color: var(--calculator-text-muted);
  line-height: 1.4;
  min-height: 1.25rem;
}

/* Actions popover: glassmorphism panel (backdrop blur; Mantine portals dropdown to body) */
.eval-params-actions-popover-dropdown.mantine-Popover-dropdown,
.eval-params-actions-popover-dropdown {
  background: color-mix(in srgb, var(--card-bg) 42%, transparent) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid hsl(var(--border) / 0.4) !important;
  border-radius: var(--app-radius, 10px) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.eval-params-popover-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
}

.eval-params-popover-menu .eval-params-popover-menu-item.custom-button {
  width: 100%;
  justify-content: flex-start;
  height: auto !important;
  min-height: 2.25rem;
  padding: 0.4rem 0.65rem !important;
  border-radius: calc(var(--app-radius, 8px) - 4px);
  font-size: 0.8125rem !important;
  font-weight: 500;
  line-height: 1.25;
}

.eval-params-popover-menu .eval-params-popover-menu-item .button-text {
  font-size: inherit !important;
}

.eval-params-popover-menu .eval-params-popover-menu-item .button-icon svg,
.eval-params-popover-menu .eval-params-popover-menu-item .button-icon [class*="lucide-icon"] {
  width: 14px !important;
  height: 14px !important;
}

.eval-params-popover-menu .eval-params-popover-menu-item.custom-button-ghost:hover:not(:disabled) {
  background: hsl(var(--foreground) / 0.08) !important;
  color: hsl(var(--foreground)) !important;
}

.eval-params-popover-menu .eval-params-popover-menu-item--destructive {
  color: hsl(var(--destructive)) !important;
}

/* Same hover surface as Edit; keep Delete label red on hover */
.eval-params-popover-menu .eval-params-popover-menu-item--destructive.custom-button-ghost:hover:not(:disabled) {
  background: hsl(var(--foreground) / 0.08) !important;
  color: hsl(var(--destructive)) !important;
}

@container main-content (max-width: 992px) {
  .calculator,
  .calculator__wrapper {
    width: 100%;
  }

  .calculator__box,
  .calculator__evaluation-box,
  .calculator__section {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .calculator__inline,
  .calculator__actions,
  .calculator__evaluation-actions,
  .calculator__row {
    flex-direction: column;
    align-items: stretch;
  }

  .calculator__col,
  .calculator__input-group,
  .calculator__dropdown {
    min-width: 100%;
  }
}