.generic-card {
  margin-bottom: 1rem;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--divider);
  background: var(--surface);

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  // Status badge no canto superior direito
  .status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;

    .status-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;

      i {
        font-size: 8px;
        width: 8px;
        height: 8px;
      }

      &.status-connected {
        background-color: rgba(22, 163, 74, 0.1);
        color: #166534;
        
        i {
          color: #16a34a;
        }
      }

      &.status-error {
        background-color: rgba(220, 38, 38, 0.1);
        color: #991b1b;
        
        i {
          color: #dc2626;
        }
      }

      &.status-disconnected {
        background-color: #f3f4f6;
        color: #4b5563;
        
        i {
          color: #6b7280;
        }
      }

      &.status-active {
        background-color: rgba(22, 163, 74, 0.1);
        color: #166534;
        
        i {
          color: #16a34a;
        }
      }

      &.status-inactive {
        background-color: rgba(217, 119, 6, 0.1);
        color: #92400e;
        
        i {
          color: #d97706;
        }
      }
    }
  }

  .mat-mdc-card-header {
    position: relative;
    padding: 1rem 1rem 0.5rem 1rem;
    align-items: center; // Centraliza verticalmente ícone e texto
    padding-right: 120px; // Espaço para o badge de status

    .card-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #f5f5f5;
      margin-right: 1rem;
      flex-shrink: 0;

      i {
        font-size: 24px;
        color: #6b7280;
      }
    }

    .card-header-content {
      flex: 1;
      min-width: 0;

      .mat-mdc-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--text-primary);
      }

      .mat-mdc-card-subtitle {
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.4;
      }
    }
  }

  .mat-mdc-card-content {
    padding: 0 1rem 0.5rem 1rem;

    .card-description {
      .description-text {
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.4;
        margin: 0;
      }
    }
  }

  .card-actions {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .action-btn {
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      text-transform: none;
      min-height: 36px;
      padding: 0 16px;
      border: 1px solid;
      transition: all 0.2s ease;

      mat-icon {
        font-size: 1rem;
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
      }

      // Botão Reconectar (verde) - ocupa mais espaço
      &.action-primary {
        background-color: transparent;
        color: #059669;
        border-color: #22c55e;
        border-width: 1px;
        flex: 1; // Ocupa o espaço disponível

        &:hover {
          background-color: rgba(22, 163, 74, 0.1);
          color: #059669;
          border-color: #22c55e;
        }

        mat-icon {
          color: inherit;
        }
      }

      // Botão com erro (vermelho) - ocupa mais espaço
      &.action-danger {
        background-color: transparent;
        color: #dc2626;
        border-color: #dc2626;
        border-width: 1px;
        flex: 1; // Ocupa o espaço disponível

        &:hover {
          background-color: rgba(220, 38, 38, 0.1);
          color: #dc2626;
          border-color: #dc2626;
        }

        mat-icon {
          color: inherit;
        }
      }

      // Botão Conectar (cinza para não conectado) - ocupa mais espaço
      &.action-connect {
        background-color: transparent;
        color: #4b5563;
        border-color: #6b7280;
        border-width: 1px;
        flex: 1; // Ocupa o espaço disponível

        &:hover {
          background-color: #f3f4f6;
          color: #4b5563;
          border-color: #6b7280;
        }

        mat-icon {
          color: inherit;
        }
      }

      // Botão Ver detalhes (seta à direita) - tamanho fixo menor
      &.action-secondary {
        color: var(--text-secondary);
        border: none;
        background: none;
        padding: 0 8px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        flex-shrink: 0; // Não encolhe
        min-width: auto;

        &:hover {
          color: var(--text-primary);
        }

        mat-icon {
          margin-right: 0;
          margin-left: 0.25rem;
          font-size: 0.875rem;
          width: 0.875rem;
          height: 0.875rem;
        }
      }
    }
  }

  // Remove bordas laterais de status (não são mais necessárias)
  &.status-connected,
  &.status-error,
  &.status-disconnected,
  &.status-active,
  &.status-inactive {
    border-left: none;
  }
}

/* ===== TEMA ESCURO PARA GENERIC CARD ===== */
:host-context(.dark-theme) .generic-card {
  background: var(--surface);
  border-color: var(--divider);

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  .status-badge {
    .status-chip {
      &.status-connected {
        background-color: rgba(22, 163, 74, 0.2);
        color: #4ade80;
        
        i {
          color: #4ade80;
        }
      }

      &.status-error {
        background-color: rgba(220, 38, 38, 0.2);
        color: #f87171;
        
        i {
          color: #f87171;
        }
      }

      &.status-disconnected {
        background-color: var(--hover-bg);
        color: var(--text-secondary);
        
        i {
          color: var(--text-secondary);
        }
      }

      &.status-active {
        background-color: rgba(22, 163, 74, 0.2);
        color: #4ade80;
        
        i {
          color: #4ade80;
        }
      }

      &.status-inactive {
        background-color: rgba(217, 119, 6, 0.2);
        color: #fbbf24;
        
        i {
          color: #fbbf24;
        }
      }
    }
  }

  .mat-mdc-card-header {
    .card-icon {
      background: var(--hover-bg);

      i {
        color: #FFC82E;
      }
    }

    .card-header-content {
      .mat-mdc-card-title {
        color: var(--text-primary);
      }

      .mat-mdc-card-subtitle {
        color: var(--text-secondary);
      }
    }
  }

  .mat-mdc-card-content {
    .card-description {
      .description-text {
        color: var(--text-secondary);
      }
    }
  }

  .card-actions {
    .action-btn {
      // Botão Reconectar (verde) - tema escuro
      &.action-primary {
        color: #4ade80;
        border-color: #4ade80;

        &:hover {
          background-color: rgba(22, 163, 74, 0.15);
          color: #4ade80;
          border-color: #4ade80;
        }
      }

      // Botão com erro (vermelho) - tema escuro
      &.action-danger {
        color: #f87171;
        border-color: #f87171;

        &:hover {
          background-color: rgba(220, 38, 38, 0.15);
          color: #f87171;
          border-color: #f87171;
        }
      }

      // Botão Conectar (cinza) - tema escuro
      &.action-connect {
        color: var(--text-secondary);
        border-color: var(--text-secondary);

        &:hover {
          background-color: var(--hover-bg);
          color: var(--text-primary);
          border-color: var(--text-primary);
        }
      }

      // Botão Ver detalhes - tema escuro
      &.action-secondary {
        color: var(--text-secondary);

        &:hover {
          color: var(--text-primary);
        }
      }
    }
  }
}

// Mobile responsivo
@media (max-width: 768px) {
  .generic-card {
    .mat-mdc-card-header {
      flex-direction: row; // Mantém ícone e texto lado a lado no mobile
      align-items: center;
      padding-right: 120px; // Mantém espaço para o badge

      .card-icon {
        margin-right: 1rem; // Restaura margem direita
        margin-bottom: 0;
      }
    }

    .status-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      margin-bottom: 0;
    }

    .card-actions {
      flex-direction: row; // Mantém horizontal no mobile
      gap: 0.75rem;
      width: 100%;

      .action-btn {
        // Botões principais mantêm flex: 1
        &.action-primary,
        &.action-danger,
        &.action-connect {
          flex: 1;
        }

        // Botão Ver detalhes mantém tamanho fixo
        &.action-secondary {
          flex-shrink: 0;
          min-width: auto;
        }
      }
    }
  }
} 