/**
 * CabazCI - Custom Styles
 * Estilos customizados para melhorias de UX e responsividade
 */

/* ============================================
   RESPONSIVE FONT SIZES - Mobile
   ============================================ */

/* Manter tamanhos de fonte consistentes em mobile
   (removido ajuste que deixava texto muito pequeno) */

/* ============================================
   PRODUCT LIST ITEM - Mobile Improvements
   ============================================ */

@media (max-width: 767px) {
    /* Garantir espaçamento adequado entre imagem e conteúdo */
    .symbol.symbol-50px.me-4,
    .symbol.symbol-60px.me-4,
    .symbol.me-4 {
        margin-right: 2rem !important;
    }
    
    /* Ajustar tamanho de símbolos em mobile - imagem grande e destacada */
    .d-flex .symbol.symbol-50px,
    .d-flex .symbol.symbol-60px,
    div .symbol.symbol-50px,
    div .symbol.symbol-60px,
    .symbol.symbol-50px,
    .symbol.symbol-60px {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Garantir que o preço nunca quebre para baixo */
@media (max-width: 530px) {
    /* Forçar container a não quebrar */
    .d-flex.align-items-start {
        flex-wrap: nowrap !important;
    }
    
    /* Garantir que preço tenha espaço mínimo */
    .text-end.ms-3.flex-shrink-0 {
        min-width: 90px !important;
    }
    
    /* Reduzir margem esquerda do preço em telas muito pequenas */
    .text-end.ms-3 {
        margin-left: 0.5rem !important;
    }
    
    /* Permitir que o conteúdo central encolha mais */
    .flex-grow-1 {
        min-width: 100px !important;
    }
}

/* ============================================
   PRICE TREND CHART - Mobile
   ============================================ */

@media (max-width: 767px) {
    /* Gráfico de preços em mobile */
    .product-price-trend-chart {
        max-width: 100% !important;
        height: 45px !important;
    }
}

/* ============================================
   PAGINATION - Mobile Improvements
   ============================================ */

@media (max-width: 767px) {
    /* Paginação mais compacta em mobile */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-link {
        padding: 0.375rem 0.65rem;
        font-size: 0.85rem;
    }
    
    /* Esconder números de página intermediários em mobile pequeno */
    @media (max-width: 480px) {
        .pagination .page-item:not(.previous):not(.next):not(.active):not(:first-child):not(:last-child) {
            display: none;
        }
    }
}

/* ============================================
   CARD IMPROVEMENTS - Mobile
   ============================================ */

@media (max-width: 767px) {
    /* Card headers mais compactos */
    .card-header {
        padding: 1rem !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    
    .card-header .card-title {
        font-size: 1.1rem !important;
    }
    
    .card-header .card-toolbar {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Card body padding menor */
    .card-body {
        padding: 1rem !important;
    }
    
    /* Card footer */
    .card-footer {
        padding: 1rem !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Flex shrink */
.flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* Text truncate with ellipsis */
.text-truncate,
.text-truncate-hover {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Multi-line truncate (2 lines) */
.text-truncate-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Multi-line truncate (3 lines) */
.text-truncate-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================
   SEARCH BAR - Mobile
   ============================================ */

@media (max-width: 767px) {
    /* Search input menor em mobile */
    .form-control.w-250px {
        width: 100% !important;
        max-width: 250px;
    }
}

/* ============================================
   RESPONSIVE MARGINS/PADDINGS
   ============================================ */

@media (max-width: 767px) {
    /* Reduzir margens em mobile */
    .mb-5 {
        margin-bottom: 1rem !important;
    }
    
    .pb-3 {
        padding-bottom: 0.75rem !important;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }
}

/* ============================================
   HOVER EFFECTS - Desktop Only
   ============================================ */

@media (min-width: 768px) {
    /* Hover suave em produtos */
    .product-list-item:hover {
        background-color: #f9f9f9;
        transition: background-color 0.2s ease;
    }
}