/**
 * CF Article Filter - Styles
 *
 * @package     CfArticleFilter
 * @copyright   2026
 * @license     GNU General Public License version 2 or later
 */

/* =========================================
   Filter Panel - General
   ========================================= */

.cfaf-filter-panel {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background-color: var(--cfaf-bg, #f8f9fa);
    border-radius: 0.5rem;
    border: 1px solid var(--cfaf-border, #dee2e6);
}

.cfaf-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--cfaf-title-color, inherit);
}

.cfaf-label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.cfaf-filter-group {
    margin-bottom: 0.5rem;
}

/* =========================================
   Actions bar
   ========================================= */

.cfaf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cfaf-btn-clear {
    font-size: 0.875rem;
}

/* =========================================
   Loading indicator
   ========================================= */

.cfaf-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--cfaf-loading-color, #6c757d);
}

.cfaf-results-wrapper.cfaf-loading-active {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* =========================================
   No results message
   ========================================= */

.cfaf-no-results {
    padding: 2rem;
    text-align: center;
    font-size: 1rem;
}

/* =========================================
   Article list (AJAX rendered)
   ========================================= */

.cfaf-articles-list .cfaf-article-item {
    margin-bottom: 1.5rem;
}

.cfaf-articles-list .article-intro-image img {
    width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}

.cfaf-articles-list .article-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.cfaf-articles-list .article-title a {
    text-decoration: none;
    color: inherit;
}

.cfaf-articles-list .article-title a:hover {
    text-decoration: underline;
}

.cfaf-articles-list .article-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cfaf-articles-list .article-introtext {
    margin-bottom: 0.75rem;
}

.cfaf-articles-list .article-readmore {
    margin-bottom: 0;
}

/* =========================================
   Pagination
   ========================================= */

.cfaf-pagination {
    margin-top: 1.5rem;
}

.cfaf-pagination .page-link {
    cursor: pointer;
}

/* =========================================
   Checkbox group styling
   ========================================= */

.cfaf-checkbox-group {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #fff;
}

.cfaf-checkbox-group .form-check {
    margin-bottom: 0.25rem;
}

/* =========================================
   Tom Select overrides (match Bootstrap 5)
   ========================================= */

.cfaf-filter-panel .ts-wrapper .ts-control {
    border-color: #dee2e6;
    border-radius: 0.375rem;
    min-height: 38px;
    padding: 0.25rem 0.5rem;
}

.cfaf-filter-panel .ts-wrapper .ts-control:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.cfaf-filter-panel .ts-wrapper .ts-dropdown {
    border-color: #dee2e6;
    border-radius: 0 0 0.375rem 0.375rem;
}

.cfaf-filter-panel .ts-wrapper .ts-dropdown .option.active {
    background-color: #0d6efd;
    color: #fff;
}

.cfaf-filter-panel .ts-wrapper .ts-control .item {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
}

/* =========================================
   Vertical layout (sidebar)
   ========================================= */

.cfaf-vertical .row {
    flex-direction: column;
}

.cfaf-vertical .cfaf-filter-group {
    margin-bottom: 1rem;
}

.cfaf-vertical .cfaf-actions {
    justify-content: stretch;
}

.cfaf-vertical .cfaf-btn-clear {
    width: 100%;
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 767.98px) {
    .cfaf-horizontal .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cfaf-filter-panel {
        padding: 1rem;
    }

    .cfaf-actions {
        justify-content: stretch;
    }

    .cfaf-actions .cfaf-btn-clear {
        width: 100%;
    }
}

/* =========================================
   Print - hide filters
   ========================================= */

@media print {
    .cfaf-filter-panel,
    .cfaf-loading,
    .cfaf-pagination {
        display: none !important;
    }
}