.machine-card
  cursor: pointer
  transition: all 0.2s ease

  &:hover
    transform: translateY(-2px)
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1)

  .machine-card-header
    display: flex
    align-items: flex-start
    gap: 1rem

  .machine-icon
    display: flex
    align-items: center
    justify-content: center
    width: 3rem
    height: 3rem
    background: var(--color-primary-light)
    border-radius: var(--border-radius)
    color: var(--color-primary)
    flex-shrink: 0

  .machine-info
    flex: 1
    min-width: 0

  .machine-name
    font-size: 1.125rem
    font-weight: 600
    color: var(--color-text)
    margin: 0 0 0.5rem 0
    word-break: break-word

  .machine-uuid
    display: flex
    align-items: center
    gap: 0.25rem
    font-size: 0.875rem
    color: var(--color-text-muted)

    .uuid-text
      font-family: var(--font-mono, 'Courier New', monospace)
      background: var(--color-surface-variant)
      padding: 0.125rem 0.375rem
      border-radius: var(--border-radius-sm)
      font-size: 0.75rem

  .machine-actions
    display: flex
    gap: 0.5rem
    flex-shrink: 0
    flex-wrap: wrap

.modal-description
  color: var(--color-text-muted)
  font-size: 0.875rem
  line-height: 1.5
  margin: 0 0 1.5rem 0

.provisioning-modal
  .provisioning-generate
    text-align: center
    padding: 2rem 0

    .generate-button
      min-width: 200px

  .provisioning-result
    .code-section
      margin-bottom: 1.5rem

      .code-label
        display: block
        font-size: 0.875rem
        font-weight: 600
        color: var(--color-text)
        margin-bottom: 0.5rem

      .code-display
        display: flex
        gap: 0.5rem
        align-items: stretch

        .code-input
          flex: 1
          font-family: var(--font-mono, 'Courier New', monospace)
          font-size: 0.875rem

          input
            font-family: inherit

        .copy-button
          flex-shrink: 0

    .code-info
      margin-bottom: 1rem
      padding: 1rem
      background: var(--color-surface-variant)
      border-radius: var(--border-radius)

    .code-notice
      text-align: center

// Empty state overrides for machines
.content .empty-state
  .empty-state-icon
    color: var(--color-primary-light)

  .empty-state-title
    color: var(--color-text)

  .empty-state-description
    color: var(--color-text-muted)