/* 🚗 Estilos Globais para Modal de Criação de Veículo */

/* ========================================
   🎯 PANEL CLASS CUSTOMIZADO
======================================== */
:host ::ng-deep {
  .vehicle-create-modal-panel {
    .mat-mdc-dialog-container {
      padding: 0 !important;
      border-radius: 0 !important;
      overflow: hidden !important;
      background: transparent !important;
      box-shadow: none !important;
      max-width: 400px !important;
      width: 400px !important;
      margin: auto !important;
      
      // Remove qualquer background residual do Material Design
      &::before,
      &::after {
        display: none !important;
      }
      
      // Remove backgrounds de todos os elementos filhos do Material
      * {
        background-color: transparent !important;
      }
      
      @media (max-width: 768px) {
        border-radius: 0 !important;
        margin: 16px auto !important;
        max-height: calc(100vh - 32px) !important;
        max-width: 95vw !important;
        width: 95vw !important;
      }
      
      @media (max-width: 480px) {
        border-radius: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100vw !important;
        height: 100vh !important;
      }
    }
    
    .mat-mdc-dialog-surface {
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      
      // Remove qualquer background residual
      &::before,
      &::after {
        display: none !important;
      }
      
      // Remove backgrounds de todos os elementos filhos
      * {
        background-color: transparent !important;
      }
      
      @media (max-width: 768px) {
        border-radius: 0 !important;
      }
      
      @media (max-width: 480px) {
        border-radius: 0 !important;
      }
    }
  }
}

/* ========================================
   🎨 BACKDROP CUSTOMIZADO
======================================== */
.cdk-overlay-backdrop {
  &.cdk-overlay-backdrop-showing {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
  }
}

/* ========================================
   🎬 ANIMAÇÃO DE ENTRADA
======================================== */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.vehicle-create-modal-panel {
  .mat-mdc-dialog-container {
    animation: modalEnter 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}
