/**
 * Everroux Standard UI — form/chrome control primitives.
 * Include after everroux-density.css (and workspace CSS when using docks/dialogs).
 * Component gate: max info · min mouse travel · fewest clicks.
 */

/* ——— Suppress native number spinners (engineering fields use text + inputMode) ——— */
input[type="number"].er-input::-webkit-outer-spin-button,
input[type="number"].er-input::-webkit-inner-spin-button,
.er-field input[type="number"]::-webkit-outer-spin-button,
.er-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].er-input,
.er-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ——— Layout recipes ——— */
.er-nav-panel {
  display: flex;
  flex-direction: column;
  gap: var(--er-space-4, 6px);
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--er-card-pad, 6px);
  background: var(--surface, #fff);
  border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6));
  border-radius: var(--er-radius-dense, 3px);
}

.er-property-panel {
  display: flex;
  flex-direction: column;
  gap: var(--er-space-3, 4px);
  min-width: 0;
  padding: var(--er-card-pad, 6px);
  background: var(--surface, #fff);
  border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6));
  border-radius: var(--er-radius-dense, 3px);
}

.er-property-grid {
  display: grid;
  grid-template-columns: minmax(5rem, 40%) minmax(0, 1fr);
  gap: var(--er-space-1, 2px) var(--er-space-2, 4px);
  align-items: center;
  font-size: var(--er-type-table, 11px);
}

.er-property-grid__label {
  margin: 0;
  font-size: var(--er-type-label, 11px);
  font-weight: var(--er-weight-medium, 500);
  color: var(--text, #1a2e34);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.er-property-grid__value {
  min-width: 0;
  font-size: var(--er-type-value, 12px);
  font-variant-numeric: tabular-nums;
}

.er-report-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--er-page-margin, 8px);
  background: var(--bg, #f4f6f5);
  border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6));
  border-radius: var(--er-radius-dense, 3px);
}

.er-group-box {
  display: flex;
  flex-direction: column;
  gap: var(--er-space-3, 4px);
  padding: var(--er-card-pad, 6px);
  background: var(--surface, #fff);
  border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6));
  border-radius: var(--er-radius-dense, 3px);
}

.er-group-box__title {
  margin: 0;
  padding: 0 0 2px;
  border-bottom: 1px solid var(--ui-divider, var(--border, #c5ccc6));
  font-size: var(--er-type-section, 12px);
  font-weight: var(--er-weight-semibold, 600);
  color: var(--blue, #1f4e79);
  line-height: 1.2;
}

.er-group-box__body {
  display: flex;
  flex-direction: column;
  gap: var(--er-grid-gap, 4px);
  min-width: 0;
}

/* ——— Warning banner ——— */
.er-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--er-space-2, 4px);
  padding: var(--er-space-2, 4px) var(--er-space-3, 4px);
  font-size: var(--er-type-note, 11px);
  line-height: 1.3;
  color: var(--dark-slate, #2d3436);
  background: #fef3c7;
  border: 1px solid var(--copper, #d97706);
  border-radius: var(--er-radius-dense, 3px);
}

.er-warning-banner--error {
  background: #fee2e2;
  border-color: #b91c1c;
  color: #7f1d1d;
}

.er-warning-banner--info {
  background: #e8f0f7;
  border-color: var(--blue, #1f4e79);
  color: var(--blue, #1f4e79);
}

.er-warning-banner__icon {
  flex: 0 0 auto;
  font-weight: 700;
}

.er-warning-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}

.app--dark .er-warning-banner {
  background: #3d3420;
  color: #fde68a;
}

.app--dark .er-warning-banner--error {
  background: #3f1d1d;
  color: #fecaca;
}

.app--dark .er-warning-banner--info {
  background: #1a2e3d;
  color: #bfdbfe;
}

/* ——— Result card ——— */
.er-result-card {
  display: flex;
  flex-direction: column;
  gap: var(--er-space-1, 2px);
  padding: var(--er-card-pad, 6px);
  background: var(--surface, #fff);
  border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6));
  border-left: 3px solid var(--blue, #1f4e79);
  border-radius: var(--er-radius-dense, 3px);
}

.er-result-card--pass {
  border-left-color: var(--ee-sage, #547d63);
}

.er-result-card--fail {
  border-left-color: #b91c1c;
}

.er-result-card--warn {
  border-left-color: var(--copper, #d97706);
}

.er-result-card__title {
  margin: 0;
  font-size: var(--er-type-label, 11px);
  font-weight: var(--er-weight-semibold, 600);
  color: var(--muted, #4f5b66);
}

.er-result-card__value {
  margin: 0;
  font-size: var(--er-type-result, 12px);
  font-weight: var(--er-weight-medium, 500);
  font-variant-numeric: tabular-nums;
  color: var(--text, #1a2e34);
}

.er-result-card__meta {
  margin: 0;
  font-size: var(--er-type-fine, 10px);
  color: var(--muted, #4f5b66);
}

/* ——— Result row (compact one-line check) ——— */
.er-results-grid { display:flex; flex-direction:column; gap:2px; }
.er-result-row {
  display:grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(3.5rem, max-content) minmax(0, 1fr) minmax(0, max-content) 3.5rem;
  gap: 0.15rem 0.75rem;
  align-items:center;
  min-height: calc(var(--er-input-height, 26px) - 2px);
  padding: 0.1rem 0.35rem;
  border-left: 3px solid var(--blue);
  background: var(--surface);
  font-size: var(--er-type-table);
}
.er-result-row--pass { border-left-color: var(--ee-sage, #547d63); }
.er-result-row--fail { border-left-color: #b91c1c; }
.er-result-row--warn { border-left-color: var(--copper); }
.er-result-row__label,
.er-result-row__value,
.er-result-row__meta {
  min-width: 0;
}
.er-result-row__label { font-weight: 600; color: var(--muted); }
.er-result-row__value { font-variant-numeric: tabular-nums; }
.er-result-row__meta { color: var(--muted); font-size: var(--er-type-fine); overflow-wrap: anywhere; }
.er-result-row__status { font-weight: 700; letter-spacing: 0.03em; text-align: center; }
.er-result-row--pass .er-result-row__status {
  color: #fff;
  background: var(--ee-sage, #547d63);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
}
.er-result-row--fail .er-result-row__status {
  color: #fff;
  background: #b91c1c;
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
}
.er-result-row--warn .er-result-row__status {
  color: #fff;
  background: var(--copper, #d97706);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
}

/* ——— Search bar ——— */
.er-search {
  display: inline-flex;
  align-items: center;
  gap: var(--er-space-1, 2px);
  min-width: 0;
  height: var(--er-input-height, 26px);
}

.er-search__input {
  flex: 1 1 auto;
  min-width: 6rem;
  box-sizing: border-box;
  height: var(--er-input-height, 26px);
  padding: 0 0.4rem;
  font: inherit;
  font-size: var(--er-type-value, 12px);
  border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6));
  border-radius: var(--er-radius-dense, 3px);
  background: var(--surface, #fff);
  color: var(--text, #1a2e34);
}

.er-search__input:focus {
  outline: 2px solid var(--copper, #d97706);
  outline-offset: 0;
  border-color: var(--copper, #d97706);
}

.er-search__clear {
  flex: 0 0 auto;
  height: var(--er-btn-height, 26px);
  min-width: var(--er-btn-height, 26px);
  padding: 0 0.35rem;
}

/* ——— Checkbox / radio ——— */
.er-check,
.er-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--er-space-2, 4px);
  min-height: var(--er-input-height, 26px);
  font-size: var(--er-type-label, 11px);
  cursor: pointer;
  user-select: none;
}

.er-check input,
.er-radio input {
  margin: 0;
  width: 0.9rem;
  height: 0.9rem;
  accent-color: var(--blue, #1f4e79);
  flex: 0 0 auto;
}

.er-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--er-control-gap, 4px) var(--er-space-4, 6px);
  align-items: center;
}

.er-radio-group--vertical {
  flex-direction: column;
  align-items: flex-start;
}

/* ——— Tree view ——— */
.er-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--er-type-table, 11px);
}

.er-tree ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.85rem;
}

.er-tree__item {
  margin: 0;
}

.er-tree__row {
  display: flex;
  align-items: center;
  gap: var(--er-space-1, 2px);
  min-height: calc(var(--er-input-height, 26px) - 2px);
  padding: 0 0.25rem;
  border-radius: var(--er-radius-dense, 3px);
  cursor: pointer;
}

.er-tree__row:hover {
  background: var(--accent-soft, #e6ede8);
}

.er-tree__row[aria-selected="true"] {
  background: #dbe7f0;
  color: var(--blue, #1f4e79);
  font-weight: var(--er-weight-medium, 500);
}

.app--dark .er-tree__row:hover {
  background: #3d4549;
}

.app--dark .er-tree__row[aria-selected="true"] {
  background: #2a4058;
}

.er-tree__twist {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted, #4f5b66);
  cursor: pointer;
  font-size: 0.65rem;
  line-height: 1;
}

.er-tree__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— Combo (filterable select shell) ——— */
.er-combo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}

.er-combo__input {
  width: 100%;
}

.er-combo__list {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 12rem;
  margin: 1px 0 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6));
  border-radius: var(--er-radius-dense, 3px);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

.er-combo__option {
  padding: 0.25rem 0.4rem;
  font-size: var(--er-type-value, 12px);
  cursor: pointer;
}

.er-combo__option:hover,
.er-combo__option[aria-selected="true"] {
  background: #dbe7f0;
  color: var(--blue, #1f4e79);
}

.er-combo__option[hidden] {
  display: none;
}

/* ——— Visual fit recipes (Member Sizer fit-finish 2026-08-06) ——— */

/** Segmented Design/Analyze (or Wood/Steel) — content-width, not full pane stretch */
.er-mode-selector {
  display: inline-grid;
  grid-template-columns: minmax(6.5rem, 1fr) minmax(6.5rem, 1fr);
  gap: var(--er-control-gap, 4px);
  width: min(100%, 22rem);
  max-width: 100%;
}

/** Compact factor / coefficient display — cells sized to values, not 100% pane */
.er-factor-table {
  width: auto;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: var(--er-space-1, 2px) 0;
  table-layout: fixed;
}

.er-factor-table th,
.er-factor-table td {
  width: 4.75rem;
  min-width: 4rem;
  text-align: center;
  padding: 0.2rem 0.35rem;
  font-variant-numeric: tabular-nums;
}

/** Two-field constraint rows — avoid empty 4-column grid slots */
.er-eng-grid--pair {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: var(--er-grid-gap, 4px) 1.25rem;
}

@media (max-width: 33.99rem) {
  .er-eng-grid--pair {
    grid-template-columns: 1fr;
  }
}

/** Engineering selects in dense auto-fit grids — keep selection text readable */
.er-select--eng,
select.er-select--eng {
  min-width: min(100%, 10.5rem);
  text-overflow: clip;
}

.er-eng-grid--auto-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--er-grid-gap, 4px);
}