/**
 * Responsive Improvements
 * Melhorias de layout responsivo para os recursos
 */

/* Header de lista com ações */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.list-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Grupo de ações (botões + dropdowns) */
.actions-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Input de busca */
.search-input-group {
    min-width: 250px;
}

/* Responsivo mobile */
@media (max-width: 768px) {
    .list-header {
        flex-direction: column;
        align-items: stretch;
    }

    .list-title {
        justify-content: space-between;
        width: 100%;
    }

    .list-actions {
        width: 100%;
        justify-content: stretch;
    }

    .actions-group {
        width: 100%;
    }

    .actions-group > * {
        flex: 1;
    }

    .search-input-group {
        min-width: 100%;
    }

    /* Botões em mobile ocupam largura total */
    .btn-sm {
        padding: 0.5rem 1rem;
    }

    /* Dropdown menus em mobile */
    .dropdown-menu {
        width: 100%;
        max-width: none;
    }
}

/* Melhorias para tabelas */
@media (max-width: 992px) {
    .table-responsive {
        border: 0;
    }

    /* Esconder colunas menos importantes em tablets */
    .table-hide-tablet {
        display: none;
    }
}

@media (max-width: 576px) {
    /* Esconder colunas menos importantes em mobile */
    .table-hide-mobile {
        display: none;
    }

    /* Ajustar tamanho de badges */
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Loading states visuais */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spinner-border 0.75s linear infinite;
}

/* Card header melhorado */
.card-header .list-header {
    margin-bottom: 0;
}

/* Melhorias para modais SweetAlert2 */
@media (max-width: 576px) {
    .swal2-popup {
        width: 90% !important;
        padding: 1.5rem !important;
    }

    .swal2-title {
        font-size: 1.25rem !important;
    }

    .swal2-html-container {
        font-size: 0.875rem !important;
    }
}

/* Skeleton loading */
.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 80%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

/* DataTables responsivo */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
        width: 100%;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        width: 100%;
        margin-top: 1rem;
    }
}