:host {
  display: block;
  padding: 1.5rem;
}

// ── Card layout ─────────────────────────────────────────────────────────────

.gb-card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.tcms-import-card {
  max-width: 800px;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
  p  { margin: 0 0 1rem; font-size: 0.875rem; color: var(--gb-text-secondary, #6b7280); }
}

// ── Form rows ────────────────────────────────────────────────────────────────

.tcms-import-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
  @media (max-width: 560px) { grid-template-columns: 1fr; }
}

.gb-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  label { font-size: 0.8125rem; font-weight: 500; color: var(--gb-text-primary, #374151); }
  input { padding: 0.5rem 0.75rem; border: 1px solid var(--gb-border, #d1d5db);
          border-radius: 4px; font-size: 0.875rem;
          &:focus { outline: none; border-color: var(--gb-primary, #3b82f6); } }
}

// ── Action buttons ───────────────────────────────────────────────────────────

.tcms-import-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem;
  button { padding: 0.5rem 1.1rem; border-radius: 4px; font-size: 0.875rem;
           font-weight: 500; cursor: pointer; border: none; transition: opacity 0.15s;
           &:disabled { opacity: 0.5; cursor: not-allowed; } }
  .gb-btn-primary   { background: var(--gb-primary, #3b82f6); color: #fff; }
  .gb-btn-secondary { background: var(--gb-secondary, #6366f1); color: #fff; }
  .gb-btn-ghost     { background: transparent; color: var(--gb-text-secondary, #6b7280);
                      border: 1px solid var(--gb-border, #d1d5db); }
}

// ── Preview panel ────────────────────────────────────────────────────────────

.tcms-preview-panel {
  background: var(--gb-surface-alt, #f9fafb);
  border: 1px solid var(--gb-border, #e5e7eb);
  border-left: 3px solid var(--gb-primary, #3b82f6);
  border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.tcms-preview-header {
  display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem;
}
.tcms-preview-module  { font-size: 1rem; font-weight: 600; color: var(--gb-text-primary, #111827); }
.tcms-preview-subtitle{ font-size: 0.75rem; color: var(--gb-text-secondary, #6b7280); }
.tcms-preview-stats   { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.tcms-stat {
  display: flex; flex-direction: column; align-items: center; min-width: 72px;
  &__value { font-size: 1.5rem; font-weight: 700; color: var(--gb-primary, #3b82f6); }
  &__label  { font-size: 0.7rem; color: var(--gb-text-secondary, #6b7280);
              text-transform: uppercase; letter-spacing: 0.04em; }
}
.tcms-preview-note { font-size: 0.8125rem; color: var(--gb-text-secondary, #6b7280); margin: 0; }

// ── Result + alert ───────────────────────────────────────────────────────────

.tcms-result-box {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.875rem;
  &--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
}
.tcms-result-counts { display: flex; gap: 1rem; flex-wrap: wrap; }
.tcms-result-error  { color: #991b1b; }

.tcms-alert {
  padding: 0.625rem 0.875rem; border-radius: 5px; font-size: 0.875rem;
  &--error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
}

.tcms-file-name { font-size: 0.8125rem; color: var(--gb-text-secondary, #6b7280); padding: 0.25rem 0; }