/*
 * Component styles for the Screens that have not been redesigned yet.
 *
 * Everything is scoped under `.legacy` on purpose. These rules style bare
 * elements (`input[type="text"]`, `button`), which outrank the redesigned
 * components' class selectors on specificity — unscoped, they would quietly
 * win inside every new Screen too.
 *
 * Transitional: each Screen deletes its share of this file as it is rebuilt
 * against the Figma design. Nothing new should be added here.
 */

.legacy {
  display: block;
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.legacy h2 {
  font-size: 1.1rem;
  margin: 0 0 var(--space-4);
}

.legacy h3 {
  font-size: 0.95rem;
  margin: var(--space-4) 0 var(--space-2);
}

.legacy .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.legacy .field span {
  color: var(--muted-foreground);
}

.legacy select,
.legacy input[type="text"],
.legacy input[type="number"],
.legacy input[type="file"] {
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-2-5);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--radius-xl);
  background: var(--background);
  color: var(--foreground);
}

.legacy .actions {
  display: flex;
  gap: var(--space-2-5);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.legacy button,
.legacy .button-link {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  padding: var(--space-2-5) var(--space-4);
  border-radius: var(--radius-xl);
  border: var(--border-width) solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.legacy button.primary,
.legacy .button-link.primary {
  background: var(--legacy-accent);
  border-color: var(--legacy-accent);
  color: var(--legacy-accent-foreground);
  font-weight: var(--weight-medium);
}

.legacy button.secondary {
  background: transparent;
}

.legacy button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.legacy .hint {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* Shared by every Screen until each has its own error presentation. */
.error-banner {
  background: var(--error-bg);
  border: var(--border-width) solid var(--error-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}