/*
    Paginacao do projeto — view resources/views/vendor/pagination/admin.blade.php.

    Fica em arquivo proprio porque os dois layouts paginam: o admin (admin.css) e o
    publico das listagens de reservas (style.css). Vivendo dentro de um dos dois, a
    paginacao do outro sai sem estilo nenhum, como lista de <li> com marcador.

    --text-dark so existe no :root do admin; no publico a mesma cor se chama --dark-text.
    Dai o fallback encadeado, que evita mexer nas duas paletas ja em uso.
*/
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/*
    Paginacao solta no fim de uma listagem. No admin ela vem dentro de um bloco com padding
    proprio, que ja a afasta da tabela; nas listagens de reservas os cards terminam direto nela,
    entao o respiro precisa vir daqui.
*/
.paginacao-rodape {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.paginacao-lista {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paginacao-item a,
.paginacao-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    color: var(--text-dark, var(--dark-text, #333333));
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Trava o tamanho do icone: era exatamente isso que faltava na view nativa. */
.paginacao-item i {
    font-size: 0.75rem;
    line-height: 1;
}

.paginacao-item a:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
}

.paginacao-atual span {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
}

.paginacao-desabilitado span {
    color: #c4c4c4;
    background: #fafafa;
    cursor: default;
}

.paginacao-separador span {
    border-color: transparent;
    background: transparent;
    font-weight: 400;
}

.paginacao-resumo {
    margin: 0;
    color: #888;
    font-size: 0.8rem;
}

.paginacao-resumo strong {
    color: var(--text-dark, var(--dark-text, #333333));
    font-weight: 600;
}

@media (max-width: 576px) {
    .paginacao {
        justify-content: center;
    }
}