/* ========================================
   VIRTUAL MACHINE FORM - Sky Theme
   Extends editor_form.css. All styles scoped
   under .editor-form.virtual-machine-theme.
   Not wrapped in Bulma's .container (unlike the
   other editor themes): the two-column layout
   (identity/resources/billing/console ports/
   notes left; network interfaces/storage
   volumes right) fills the available width
   instead of being capped and centered.
   ======================================== */

.editor-form.virtual-machine-theme {
  max-width: none;
}

/* Header gradient - sky */
.editor-form.virtual-machine-theme .editor-header {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%); /* token-ok: sky, no token equivalent */
}

[data-theme="dark"] .editor-form.virtual-machine-theme .editor-header {
  background: linear-gradient(135deg, #075985 0%, #0c4a6e 100%); /* token-ok: sky dark, no token equivalent */
  border: 1px solid rgba(56, 189, 248, 0.3); /* token-ok: sky-400 alpha glow */
}

/* Section focus state - sky */
.editor-form.virtual-machine-theme .editor-section:focus-within {
  border-color: #0284c7; /* token-ok: sky-600, no token equivalent */
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1); /* token-ok: sky-600 alpha */
}

[data-theme="dark"] .editor-form.virtual-machine-theme .editor-section:focus-within {
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2); /* token-ok: sky-600 alpha dark */
}

/* Section header icon color */
.editor-form.virtual-machine-theme .editor-section-header .icon {
  color: #0369a1; /* token-ok: sky-700, no token equivalent */
}

[data-theme="dark"] .editor-form.virtual-machine-theme .editor-section-header .icon {
  color: #38bdf8; /* token-ok: sky-400, no token equivalent */
}

/* Four-up grid variant - Billing and Console Ports render four fields
   per row today; layered onto the shared scaffold alongside
   editor-grid-2/editor-grid-3 from editor_form.css */
.editor-form.virtual-machine-theme .editor-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--arp-space-6);
}

@media screen and (max-width: 1024px) {
  .editor-form.virtual-machine-theme .editor-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* UUID field: override global .vm-copyable white-space:nowrap (virtual_machines.css)
   so the UUID wraps instead of overflowing its box at narrow viewports. */
.editor-form.virtual-machine-theme .vm-copyable {
  white-space: normal;
}

.editor-form.virtual-machine-theme .vm-copyable code {
  overflow-wrap: anywhere;
  word-break: break-all;
}