/* Calm Surface migration 1b -- re-skin the Import panel ONLY.
   EVERY rule is scoped under #import-panel, so it cannot affect any other surface
   (strangler-safe). Uses calm tokens from ui/tokens.css. ID-scoped descendant
   selectors out-specify the shared bulk markup's single-class Tailwind utilities,
   so no !important is needed. The Import panel is the first theme-aware surface
   (calm light, dimmed dark via prefers-color-scheme in tokens.css). */

#import-panel {
  font-family: var(--font-family-sans);
  color: var(--color-text-default);
  line-height: var(--font-leading-body);
  font-feature-settings: var(--font-feature-tabular);
}
#import-panel h2, #import-panel h3 {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
}
#import-panel :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* The reused bulk section -> a calm card */
#import-panel section {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-1);
  overflow: hidden;
}
#import-panel section > header {
  background: var(--color-surface-sunken);
  border-block-end: 1px solid var(--color-border-subtle);
  color: var(--color-text-strong);
  padding: var(--space-1_5) var(--space-2);
}
#import-panel section > header span { color: var(--color-text-muted); }
#import-panel .p-4 { padding: var(--space-3); }

/* Labels + helper text */
#import-panel label { color: var(--color-text-muted); }
#import-panel span { color: var(--color-text-muted); }

/* Fields: select + textarea */
#import-panel #bulk-kind,
#import-panel #bulk-csv {
  background: var(--color-surface-1);
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
#import-panel #bulk-csv { min-height: 11rem; }
#import-panel #bulk-kind:focus-visible,
#import-panel #bulk-csv:focus-visible { border-color: var(--color-border-focus); }
#import-panel #bulk-csv::placeholder { color: var(--color-text-subtle); }

/* Buttons (id-scoped: highest specificity, beats Tailwind utilities cleanly).
   One primary (Commit = the consequential action), Preview secondary. */
#import-panel #bulk-preview {
  background: var(--color-surface-2);
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  min-height: var(--size-touch-min);
}
#import-panel #bulk-preview:hover { background: var(--color-surface-sunken); }
#import-panel #bulk-commit {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  min-height: var(--size-touch-min);
}
#import-panel #bulk-commit:hover { background: var(--color-accent-primary-hover); }
#import-panel #bulk-status { color: var(--color-text-muted); }