/* Config inputs row */
.config-grid {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.config-grid > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-grid label {
  margin: 0;
  white-space: nowrap;
}

.config-grid input[type="number"] {
  width: 70px;
  margin: 0;
  -moz-appearance: textfield;
}

.config-grid input[type="number"]::-webkit-outer-spin-button,
.config-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Builds section */
.builds-section { margin-bottom: 20px; }
.builds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.builds-list { display: flex; flex-direction: column; gap: 8px; }

.build-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
  background: var(--color-bg-card);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.btn-remove { align-self: end; height: fit-content; }
.btn-remove:hover { color: var(--color-error); border-color: var(--color-error); }

/* Zone list */
.zone-list { display: flex; flex-direction: column; gap: 6px; }
.zone-item-name { color: var(--color-text-secondary); font-size: 14px; }
.zone-item-status { font-size: 12px; color: var(--color-text-muted); }
.list-item.disabled .zone-item-status { color: var(--color-text-subtle); }
.list-item.selected .zone-item-name { color: var(--color-accent); }

/* Zone details */
.zone-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.zone-details h3 { color: var(--color-white); margin-top: 0; }

/* Ticket options */
.ticket-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  padding: 0 12px 4px;
  font-size: 11px;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ticket-header span:first-child {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.ticket-option-name { color: var(--color-text-secondary); font-size: 13px; }
.ticket-option-prob { font-size: 13px; font-family: monospace; color: var(--color-accent); }
.prob-calc { color: var(--color-text-muted); }

/* Stats row */
.stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

/* Plan display */
.plan-zone-name {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.plan-configs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-config {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.plan-config-left {
  flex: 1;
  min-width: 0;
}

.plan-config-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
}

.plan-config-ticket {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.plan-essences {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-essence {
  background: var(--color-bg-subtle);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.plan-stat {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px;
}

.plan-stat-label {
  color: var(--color-text-muted);
}

.plan-stat-value {
  color: var(--color-accent);
  font-family: monospace;
  min-width: 60px;
}

/* Error message */
.no-zones-msg { color: var(--color-error); font-size: 13px; padding: 12px; background: var(--color-bg-element); border-radius: 6px; }

/* Plan header */
.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.plan-header h2 { margin: 0; }

.optimize-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.optimize-select label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

.optimize-select select {
  padding: 6px 10px;
  font-size: 13px;
  min-width: 140px;
}

@media (max-width: 768px) {
  .build-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .build-row .btn-remove {
    grid-column: 1 / -1;
    width: 100%;
  }

  .plan-config {
    flex-direction: column;
    gap: 12px;
  }

  .plan-config-right {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  body {
    padding: 12px;
  }

  .config-grid {
    flex-direction: column;
    gap: 12px;
  }

  .build-row {
    grid-template-columns: 1fr;
  }

  .stats-row {
    flex-direction: column;
  }

  .plan-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}