/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.publicacoes-box {
    max-width: 1000px;
    padding: 1rem .2rem;
    background: #fcfcfc;
}

.pagination {
    flex-wrap: wrap;
}

a.link-publicacao {
    color: #007bff;
}

/* Main header row */
.dt-header-row {
    align-items: center;
    margin-bottom: 15px;
}
div#publicacoes-datatable_info {
    font-size: .86rem;
}

div.dt-container div.dt-length label{
    font-size: .86rem;
}

.dt-search > label {
    font-size: .86rem;
}

/* Length menu section */
.dt-length {
    display: flex;
    align-items: center;
}

/* Filters container */
.dt-filters {
    display: flex;
    justify-content: center;
}

/* Filters group wrapper */
.dt-filters-group {
    display: flex;
    gap: 10px;
}

/* Individual filter wrapper */
.dt-filter-wrapper {
    display: flex;
    gap: 10px;
}

/* Search box section */
.dt-search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Consistent form control sizing */
.dataTables_wrapper .form-control-sm {
    height: calc(1.8125rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Specific filter select styling */
.dt-filters-group select {
    min-width: 120px;
}

/* Search input specific styling */
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    width: auto;
    flex-grow: 1;
    max-width: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dt-header-row {
        flex-direction: column;
        gap: 10px;
    }

    .dt-length,
    .dt-filters,
    .dt-search {
        width: 100%;
        justify-content: flex-start;
    }

    .dt-filters-group {
        flex-wrap: wrap;
    }

    .dt-filter-wrapper {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        max-width: 100%;
    }
}