// ========================================
// 👥 CUSTOMER CREATE MODAL STYLES
// ========================================

.customer-create-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  width: 100%;
  max-width: 600px;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;

  // ========================================
  // 📋 HEADER
  // ========================================
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--primary-contrast);
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(255, 255, 255, 0.2);
    }

    .header-content {
      display: flex;
      align-items: center;
      gap: 16px;

      .header-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        backdrop-filter: blur(10px);

        mat-icon {
          font-size: 24px;
          width: 24px;
          height: 24px;
        }
      }

      .header-text {
        h2 {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          line-height: 1.2;
        }

        p {
          margin: 4px 0 0 0;
          font-size: 14px;
          opacity: 0.9;
          line-height: 1.3;
        }
      }
    }

    .close-button {
      color: var(--primary-contrast);
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }

  // ========================================
  // 📝 FORMULÁRIO
  // ========================================
  .customer-form {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    max-height: calc(90vh - 200px);

    .form-section {
      margin-bottom: 32px;

      &:last-child {
        margin-bottom: 0;
      }

      h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);

        mat-icon {
          font-size: 20px;
          width: 20px;
          height: 20px;
          color: var(--primary);
        }
      }

      .form-row {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .full-width {
        width: 100%;
      }

      .half-width {
        flex: 1;
      }

      // Campo de documento com indicador de busca
      .document-field-container {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;

        .document-field {
          flex: 1;
        }

        .search-indicator {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 12px;
          background: var(--primary-light);
          color: var(--primary);
          border-radius: 8px;
          font-size: 12px;
          font-weight: 500;
          white-space: nowrap;

          mat-spinner {
            ::ng-deep .mat-mdc-progress-spinner circle {
              stroke: var(--primary);
            }
          }
        }
      }

      // Status da busca
      .search-status {
        margin-top: 12px;

        .status-success {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px;
          background: var(--success-light);
          color: var(--success-dark);
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;

          mat-icon {
            font-size: 18px;
            width: 18px;
            height: 18px;
          }
        }
      }
    }

    // Customização dos campos Material
    ::ng-deep {
      .mat-mdc-form-field {
        .mat-mdc-text-field-wrapper {
          background: var(--surface-variant);
          border-radius: 8px;
        }

        .mat-mdc-form-field-focus-overlay {
          background: transparent;
        }

        &.mat-focused {
          .mat-mdc-text-field-wrapper {
            background: var(--surface);
          }
        }
      }

      .mat-mdc-select-panel {
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      }

      .mat-mdc-option {
        display: flex;
        align-items: center;
        gap: 12px;

        mat-icon {
          font-size: 18px;
          width: 18px;
          height: 18px;
          color: var(--text-secondary);
        }

        &.mdc-list-item--selected {
          mat-icon {
            color: var(--primary);
          }
        }
      }
    }
  }

  // ========================================
  // 🦶 FOOTER
  // ========================================
  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: var(--surface-variant);
    border-top: 1px solid var(--divider);

    .footer-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 12px;

      mat-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
      }
    }

    .footer-actions {
      display: flex;
      gap: 12px;

      .cancel-button {
        color: var(--text-secondary);

        &:hover {
          background: var(--surface);
        }
      }

      .save-button {
        min-width: 140px;
        height: 40px;
        border-radius: 8px;
        font-weight: 600;

        &:disabled {
          background: var(--text-disabled);
          color: var(--surface);
        }

        mat-spinner {
          margin-right: 8px;

          ::ng-deep .mat-mdc-progress-spinner circle {
            stroke: var(--primary-contrast);
          }
        }

        mat-icon {
          margin-right: 8px;
        }
      }
    }
  }
}

// ========================================
// 📱 RESPONSIVO
// ========================================
@media (max-width: 768px) {
  .customer-create-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;

    .modal-header {
      padding: 20px 24px;

      .header-content {
        gap: 12px;

        .header-icon {
          width: 40px;
          height: 40px;
        }

        .header-text {
          h2 {
            font-size: 18px;
          }

          p {
            font-size: 13px;
          }
        }
      }
    }

    .customer-form {
      padding: 24px;

      .form-section {
        margin-bottom: 24px;

        .form-row {
          flex-direction: column;
          gap: 12px;
        }

        .document-field-container {
          flex-direction: column;
          align-items: stretch;

          .search-indicator {
            justify-content: center;
          }
        }
      }
    }

    .modal-footer {
      padding: 20px 24px;
      flex-direction: column;
      gap: 16px;

      .footer-info {
        order: 2;
        justify-content: center;
      }

      .footer-actions {
        order: 1;
        width: 100%;

        .cancel-button,
        .save-button {
          flex: 1;
        }
      }
    }
  }
}

// ========================================
// 🎨 ANIMAÇÕES
// ========================================
.customer-create-modal {
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

// Loading states
.search-indicator {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
