/* =============================================================
   Stair Calculator — Tool-specific CSS
   Canvas diagram, code compliance indicators, materials list,
   and responsive overrides.
   ============================================================= */

/* ----- Canvas Diagram Container ----- */
.stair-canvas-wrap {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1rem;
  margin-top: 1rem;
  overflow: hidden;
}

[data-bs-theme="dark"] .stair-canvas-wrap {
  background: var(--evvy-gray-100, #1E1E1E);
}

.stair-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- Code Compliance Indicators ----- */
.stair-code-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

.stair-code-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--evvy-text-secondary, #666);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
  text-align: left;
}

.stair-code-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
  vertical-align: middle;
}

.stair-code-table tr:last-child td {
  border-bottom: none;
}

.stair-code-pass {
  color: #198754;
  font-weight: 700;
}

.stair-code-fail {
  color: #dc3545;
  font-weight: 700;
}

[data-bs-theme="dark"] .stair-code-pass {
  color: #75b798;
}

[data-bs-theme="dark"] .stair-code-fail {
  color: #ea868f;
}

.stair-code-icon {
  font-size: 1rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* ----- Unit Toggle Chips ----- */
.stair-unit-row {
  display: flex;
  gap: 0.5rem;
}

/* ----- Input grid ----- */
.stair-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* ----- Results 3-col ----- */
.stair-results-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* ----- Premium Sections ----- */
.stair-materials-list {
  background: var(--evvy-glass-bg, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--evvy-glass-border, rgba(255, 255, 255, 0.35));
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}

[data-bs-theme="dark"] .stair-materials-list {
  background: var(--evvy-glass-bg, rgba(30, 30, 40, 0.55));
}

.stair-materials-list h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--evvy-text-secondary, #666);
  margin-bottom: 0.75rem;
}

.stair-mat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
  font-size: 0.875rem;
}

.stair-mat-row:last-child {
  border-bottom: none;
}

.stair-mat-label {
  color: var(--evvy-text-primary, #333);
}

.stair-mat-value {
  font-weight: 700;
  color: var(--evvy-text-primary, #333);
}

/* ----- Headroom & Handrail Premium Panels ----- */
.stair-premium-panel {
  background: var(--evvy-glass-bg, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--evvy-glass-border, rgba(255, 255, 255, 0.35));
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}

[data-bs-theme="dark"] .stair-premium-panel {
  background: var(--evvy-glass-bg, rgba(30, 30, 40, 0.55));
}

.stair-premium-panel h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--evvy-text-secondary, #666);
  margin-bottom: 0.75rem;
}

/* ----- Mount type select ----- */
.stair-select-wrap select {
  font-size: 0.9375rem;
}

/* ----- Responsive ----- */
@media (max-width: 575.98px) {
  .stair-input-grid {
    grid-template-columns: 1fr;
  }
  .stair-results-3col {
    grid-template-columns: 1fr;
  }
  .stair-code-table {
    font-size: 0.8125rem;
  }
  .stair-code-table th,
  .stair-code-table td {
    padding: 0.375rem 0.5rem;
  }
}