/**
 * Tabloj - Koloroj (couleurs et apparence visuelle)
 * Couleurs : backgrounds, bordures, ombres, couleurs de texte
 * Inspiré du template ATUM de Joomla
 */

.table > :not(caption) > * > * {
    color: inherit !important;
    background: inherit !important;
}

/* ==========================================================================
   En-tête de page
   ========================================================================== */

.tabelo-container .table-header h2,
.tabelo-container .table-header h3 {
    color: var(--osun-text, #495057);
}

.tabelo-container .table-header p {
    color: var(--osun-text-muted, #6c757d);
}

/* ==========================================================================
   Filtres actifs (badges)
   ========================================================================== */

.tabelo-container .table-active-filters .badge {
    color: var(--osun-text, #495057);
    background-color: var(--osun-bg-alt, #f8f9fa);
    border-color: var(--osun-border, #dee2e6);
}

/* ==========================================================================
   Table - Couleurs (style ATUM)
   ========================================================================== */

.tabelo-container .table {
    color: var(--osun-text, #495057);
}

/* -- thead ---------------------------------------------------------------- */

.tabelo-container .table > thead > tr > th {
    color: var(--osun-text-muted, #6c757d);
    background-color: var(--osun-bg-alt, #f8f9fa);
    border-bottom-color: var(--osun-border, #dee2e6);
    border-top: none;
}

/* Bordure supérieure style ATUM (accent 2px) */
.tabelo-container .table > thead > tr:first-child > th {
    border-top: 2px solid var(--osun-primary, #2a69b7);
}

/* -- Liens dans thead (tri) ----------------------------------------------- */

.tabelo-container .table th.sortable a {
    color: var(--osun-text-muted, #6c757d);
}

.tabelo-container .table th.sortable a:hover {
    color: var(--osun-primary, #2a69b7);
}

/* Colonne triee active */
.tabelo-container .table th.sortable a.active,
.tabelo-container .table th.sorted {
    color: var(--osun-primary, #2a69b7);
}

.tabelo-container .table th.sortable a .icon-chevron-up,
.tabelo-container .table th.sortable a .icon-chevron-down {
    color: var(--osun-primary, #2a69b7);
}

/* -- tbody ---------------------------------------------------------------- */

.tabelo-container .table > tbody > tr > td {
    border-bottom: 1px solid var(--osun-border, #dee2e6);
}

.tabelo-container .table-row {
    background: var(--osun-bg-alt);
    color: var(--osun-text);
}

/* Dernier tr sans bordure basse (la border-bottom du container suffit) */
.tabelo-container .table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* -- Hover ---------------------------------------------------------------- */

.tabelo-container .table > tbody > tr:hover > td,
.tabelo-container .table-hover > tbody > tr:hover > td {
    background-color: hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        97%
    );
}

/* -- Striped (alternance) ------------------------------------------------- */

.tabelo-container .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--osun-bg-alt, #f8f9fa);
}

.tabelo-container .table-striped > tbody > tr:nth-of-type(odd):hover > td {
    background-color: hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        95%
    );
}

/* -- Selection (row-selected) --------------------------------------------- */

.tabelo-container .table > tbody > tr.row-selected > td,
.tabelo-container .table > tbody > tr.table-active > td {
    background-color: hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        93%
    );
}

/* -- Liens dans le corps de table ----------------------------------------- */

.tabelo-container .table > tbody a {
    color: var(--osun-primary, #2a69b7);
}

.tabelo-container .table > tbody a:hover {
    color: hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        calc(var(--osun-primary-l, 45%) - 15%)
    );
}

/* -- Checkbox ------------------------------------------------------------- */

.tabelo-container .table .form-check-input {
    border-color: var(--osun-border, #dee2e6);
}

.tabelo-container .table .form-check-input:checked {
    background-color: var(--osun-primary, #2a69b7);
    border-color: var(--osun-primary, #2a69b7);
}

.tabelo-container .table .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        var(--osun-primary-l, 45%),
        0.25
    );
}

/* ==========================================================================
   Colonnes specialisees - Couleurs
   ========================================================================== */

/* Avatar stack */
.tabelo-container .avatar-stack-item {
    border-color: var(--osun-surface, #fff);
}

.tabelo-container .avatar-stack-more {
    background-color: var(--osun-bg-alt, #e9ecef);
    color: var(--osun-text-muted, #6c757d);
}

/* Copy button */
.tabelo-container .copy-btn {
    color: var(--osun-text-muted, #6c757d);
}

.tabelo-container .copy-btn:hover {
    color: var(--osun-primary, #2a69b7);
}

/* ==========================================================================
   Actions de ligne - Couleurs
   ========================================================================== */

.tabelo-container .table .btn-link {
    color: var(--osun-text-muted, #6c757d);
}

.tabelo-container .table .btn-link:hover {
    color: var(--osun-primary, #2a69b7);
}

.tabelo-container .table .dropdown-menu {
    background-color: var(--osun-surface, #fff);
    border-color: var(--osun-border, #dee2e6);
    box-shadow: var(--osun-shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.1));
}

.tabelo-container .table .dropdown-item:hover,
.tabelo-container .table .dropdown-item:focus {
    background-color: var(--osun-bg-alt, #f8f9fa);
    color: var(--osun-text, #495057);
}

/* ==========================================================================
   Actions en masse (bulk actions) - Couleurs
   ========================================================================== */

.tabelo-container .bulk-actions-bar {
    background-color: hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        95%
    );
    border: 1px solid hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        85%
    );
    color: var(--osun-text, #495057);
}

/* ==========================================================================
   Etat vide - Couleurs
   ========================================================================== */

.tabelo-container .table-empty-state {
    background-color: var(--osun-surface, #fff);
    color: var(--osun-text-muted, #6c757d);
}

.tabelo-container .table-empty-state .empty-state-icon {
    color: var(--osun-primary, #dee2e6);
}

.tabelo-container .table-empty-state h5 {
    color: var(--osun-text-muted, #6c757d);
}

/* ==========================================================================
   Pagination - Couleurs
   ========================================================================== */

.tabelo-container .table-pagination {
    background-color: var(--osun-bg-alt, #f8f9fa);
    border-top: 1px solid var(--osun-border, #dee2e6);
    color: var(--osun-text-muted, #6c757d);
}

.tabelo-container .table-pagination .page-link {
    color: var(--osun-primary, #2a69b7);
    background-color: var(--osun-surface, #fff);
    border-color: var(--osun-border, #dee2e6);
}

.tabelo-container .table-pagination .page-link:hover {
    background-color: var(--osun-bg-alt, #f8f9fa);
    border-color: var(--osun-border, #dee2e6);
    color: hsl(
        var(--osun-primary-h, 214),
        var(--osun-primary-s, 40%),
        calc(var(--osun-primary-l, 45%) - 15%)
    );
}

.tabelo-container .table-pagination .page-item.active .page-link {
    background-color: var(--osun-primary, #2a69b7);
    border-color: var(--osun-primary, #2a69b7);
    color: #fff;
}

.tabelo-container .table-pagination .page-item.disabled .page-link {
    color: var(--osun-text-muted, #6c757d);
    background-color: var(--osun-surface, #fff);
    border-color: var(--osun-border, #dee2e6);
    opacity: 0.5;
}

/* ==========================================================================
   Modal de confirmation - Couleurs
   ========================================================================== */

.tabelo-container .modal .modal-content {
    background-color: var(--osun-surface, #fff);
    border-color: var(--osun-border, #dee2e6);
    box-shadow: var(--osun-shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.1));
}

.tabelo-container .modal .modal-header {
    border-bottom-color: var(--osun-border, #dee2e6);
    color: var(--osun-text, #495057);
}

.tabelo-container .modal .modal-footer {
    border-top-color: var(--osun-border, #dee2e6);
}

/* ==========================================================================
   Continuité visuelle Serciloj → Tabloj
   Le search-tools-form de Serciloj n'a pas de border-bottom ni de radius bas.
   Le .table-responsive doit se coller visuellement en dessous.
   Structure: .tabelo-container > form.search-tools-form ~ .table-responsive
   ========================================================================== */

.tabelo-container > form.search-tools-form ~ .table-responsive,
.tabelo-container > .search-tools-form ~ .table-responsive {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Quand pas de Serciloj, garder les radius et bordures complètes */
.tabelo-container > .table-responsive:first-child {
    border-top-left-radius: var(--osun-radius-md, 0.375rem);
    border-top-right-radius: var(--osun-radius-md, 0.375rem);
}