/* Calculator RFC: Mantine applies blur via overlayProps; reinforce on backdrop layers (class names vary by version). */
#calculator-page-loading-overlay > div:first-child,
#calculator-page-loading-overlay [class*="mantine-Overlay"],
#calculator-page-loading-overlay [class*="LoadingOverlay"] {
  backdrop-filter: blur(50px) !important;
  -webkit-backdrop-filter: blur(50px) !important;
}

.calculator-form-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: fit-content;
}

.calculator-form-inputs:not(.calculator-form-inputs--plain) > div,
#conditional-filters-container > div {
  padding: 20px;
  background: var(--calculator-panel-soft);
  border: 1px solid var(--calculator-panel-border);
  border-radius: var(--calculator-radius-md);
}

/* Scoring parameters: label + input groups without boxed chrome */
.calculator-form-inputs--plain > div {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#conditional-filters-container.calculator-form-inputs--plain > div {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Client profile: one horizontal row, wrap as needed (all breakpoints) */
.calculator-client-profile-fields {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.calculator-client-profile-fields > div {
  flex: 0 1 auto;
  min-width: 0;
}

@container main-content (min-width: 768px) {
  .calculator-form-inputs {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
}

/* Client information step: Next aligned end on wide screens, full width on small */
.calculator-intermediate__next-row {
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .calculator-intermediate__next-row {
    justify-content: stretch !important;
  }

  .calculator-intermediate__next-row .calculator-intermediate__next-button {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* KEO legacy: make default variant buttons inside calculator use brand green */
:root[data-theme="keo-legacy"] .calculator .custom-button-default,
:root[data-theme="keo-legacy"] .calculator button.custom-button-default,
:root[data-theme="keo-legacy"] .calculator a.custom-button-default {
  background: #3DD88A !important;
  color: #16384a !important;
  box-shadow: 0 14px 28px rgba(40, 77, 100, 0.2) !important;
}

:root[data-theme="keo-legacy"] .calculator .custom-button-default:hover:not(:disabled),
:root[data-theme="keo-legacy"] .calculator button.custom-button-default:hover:not(:disabled),
:root[data-theme="keo-legacy"] .calculator a.custom-button-default:hover:not(:disabled) {
  background: #33c47d !important;
  transform: translateY(-1px) !important;
}

/* Evaluation parameters panel: table or add form */
.evaluation-params-panel {
  width: 100%;
}

/* Full width within the same centered .calculator column as the rest of the page */
.evaluation-params-panel--full-width {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.eval-params-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Evaluation parameters table: one row — count | pagination | rows per page */
.eval-params-table__shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.eval-params-table__controls-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 12px;
  width: 100%;
  min-width: 0;
}

.eval-params-table__count {
  font-size: 0.8125rem;
  color: var(--calculator-text-muted, var(--muted-foreground));
  line-height: 1.4;
  flex: 0 1 auto;
  min-width: 0;
}

.eval-params-table__pagination-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.eval-params-table__pagination-inner {
  width: 100%;
  display: flex;
  justify-content: center;
}

.eval-params-table__page-size {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 100px;
  flex: 0 0 auto;
}

.eval-params-table__page-size-label {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .eval-params-table__count--desktop,
  .eval-params-table__page-size--desktop {
    display: none !important;
  }

  .eval-params-table__controls-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  .eval-params-table__pagination-wrap {
    flex: 1 1 100%;
    width: 100%;
  }
}

.evaluation-params-form__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.evaluation-params-form__meta {
  margin-top: 0.125rem;
}

.evaluation-params-form__meta-inner {
  font-size: 0.8125rem;
  color: var(--calculator-text-muted);
  line-height: 1.4;
}

/* Evaluation parameters table: data-table style (rounded shell, bordered grid, compact type) */
.eval-params-table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  width: 100%;
  border: 1px solid var(--card-border);
  border-radius: var(--app-radius, 8px);
  background: var(--card-bg);
  box-shadow: none;
}

.eval-params-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  line-height: 1.35;
  table-layout: auto;
}

.eval-params-table__th,
.eval-params-table__td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
  text-align: left;
  color: var(--text-strong);
  vertical-align: middle;
  white-space: normal;
}

/* Header + sticky: design-token grey at full opacity (hsl(var(--secondary)) — no alpha channel) */
.eval-params-table__th {
  background: hsl(var(--secondary));
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-strong);
}

.eval-params-table tbody .eval-params-table__td {
  background: var(--card-bg);
}

/* Row hover: fully opaque mixes (semi-transparent accent looked wrong on sticky columns) */
.eval-params-table tbody tr:hover .eval-params-table__td:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) {
  background: color-mix(in srgb, var(--card-bg) 65%, hsl(var(--accent)) 35%);
}

.eval-params-table tbody tr:hover td:nth-child(1),
.eval-params-table tbody tr:hover td:nth-child(2),
.eval-params-table tbody tr:hover td:last-child {
  background: color-mix(in srgb, hsl(var(--secondary)) 65%, hsl(var(--accent)) 35%);
}

.eval-params-table tbody tr:last-child .eval-params-table__td {
  border-bottom: none;
}

.eval-params-table th:nth-child(1),
.eval-params-table td:nth-child(1) {
  position: sticky;
  left: 0;
  min-width: 90px;
  width: 90px;
  max-width: 90px;
  background: hsl(var(--secondary));
}

.eval-params-table tbody td:nth-child(1) {
  z-index: 5;
}

.eval-params-table thead th:nth-child(1) {
  z-index: 7;
}

.eval-params-table th:nth-child(2),
.eval-params-table td:nth-child(2) {
  position: sticky;
  left: 90px;
  min-width: 150px;
  width: 150px;
  max-width: 150px;
  background: hsl(var(--secondary));
}

.eval-params-table tbody td:nth-child(2) {
  z-index: 5;
  border-right: 1px solid var(--card-border);
}

.eval-params-table thead th:nth-child(2) {
  z-index: 7;
}

.eval-params-table th:last-child,
.eval-params-table td:last-child {
  position: sticky;
  right: 0;
  min-width: 72px;
  width: 72px;
  max-width: 72px;
  text-align: center;
  border-left: 1px solid var(--card-border);
  border-right: none;
  background: hsl(var(--secondary));
}

.eval-params-table tbody td:last-child {
  z-index: 6;
}

.eval-params-table thead th:last-child {
  z-index: 8;
}

.eval-params-table__cell--actions {
  padding: 8px 6px;
}

.eval-params-table__actions-trigger {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Mobile: no sticky columns — whole table scrolls in one horizontal strip */
@media (max-width: 768px) {
  .eval-params-table-scroll {
    -webkit-overflow-scrolling: touch;
  }

  .eval-params-table th:nth-child(1),
  .eval-params-table td:nth-child(1),
  .eval-params-table th:nth-child(2),
  .eval-params-table td:nth-child(2),
  .eval-params-table th:last-child,
  .eval-params-table td:last-child {
    position: static;
    left: auto;
    right: auto;
    z-index: auto;
  }
}