/* ========================================
   PLAN FORM - Teal Theme
   Extends editor_form.css. All styles scoped
   under .editor-form.plan-theme.
   ======================================== */

/* Header gradient - teal/cyan */
.editor-form.plan-theme .editor-header {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); /* token-ok: teal-cyan, no token equivalent */
}

[data-theme="dark"] .editor-form.plan-theme .editor-header {
  background: linear-gradient(135deg, #155e75 0%, #164e63 100%); /* token-ok: teal-cyan dark, no token equivalent */
  border: 1px solid rgba(34, 211, 238, 0.3); /* token-ok: cyan-400 alpha glow */
}

/* Section focus state - teal */
.editor-form.plan-theme .editor-section:focus-within {
  border-color: #0891b2; /* token-ok: cyan-600, no token equivalent */
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1); /* token-ok: cyan-600 alpha */
}

[data-theme="dark"] .editor-form.plan-theme .editor-section:focus-within {
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2); /* token-ok: cyan-600 alpha dark */
}

/* Section header icon color */
.editor-form.plan-theme .editor-section-header .icon {
  color: #0891b2; /* token-ok: cyan-600, no token equivalent */
}

[data-theme="dark"] .editor-form.plan-theme .editor-section-header .icon {
  color: #22d3ee; /* token-ok: cyan-400, no token equivalent */
}

/* Base Specifications grid: two-column layout for per-resource-type cards */
.editor-form.plan-theme .plan-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--arp-space-4);
}

@media screen and (max-width: 768px) {
  .editor-form.plan-theme .plan-specs-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual spec card: slightly raised surface */
.editor-form.plan-theme .plan-spec-card {
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-sm);
  padding: var(--arp-space-4);
}

[data-theme="dark"] .editor-form.plan-theme .plan-spec-card {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Private-accounts multi-select: teal focus ring */
.editor-form.plan-theme select.multi-select:focus {
  border-color: #0891b2; /* token-ok: cyan-600, no token equivalent */
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15); /* token-ok: cyan-600 alpha */
  outline: none;
}

/* Danger Zone: keep chrome neutral; only icon signals danger */
.editor-form.plan-theme .editor-section.is-danger-zone .editor-section-header .icon {
  color: var(--arp-status-danger-fg);
}