@import url('../../shared/css/styles.css');

.row { margin-bottom: var(--spacing-lg); }
.col h3 { margin-top: 0; font-size: var(--font-md); }

.schema-table {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.schema-table strong { color: var(--color-primary); }

.cols { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.col-def {
  font-size: var(--font-sm);
  font-family: monospace;
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.data-table th, .data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.data-table th {
  background: var(--color-bg-secondary);
  font-weight: 600;
}

.textarea { min-height: 80px; resize: vertical; font-family: monospace; }

.btn-primary {
  padding: 10px 24px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-md);
  font-weight: 500;
  margin-bottom: var(--spacing-lg);
}
.btn-primary:hover { opacity: 0.9; }

.result-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.result-card h3 { margin-top: 0; }

.plan-steps { display: flex; flex-direction: column; gap: 6px; }

.plan-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.step-num { font-weight: bold; min-width: 100px; color: var(--color-primary); }
.step-detail { flex: 1; font-family: monospace; font-size: var(--font-sm); }
.step-count { color: var(--color-text-muted); font-size: var(--font-sm); }

.error {
  padding: 12px 16px;
  background: #ffebee;
  color: #c62828;
  border-radius: var(--radius-sm);
  border: 1px solid #ef9a9a;
}

@media (max-width: 768px) {
  .row { flex-direction: column; }
}