/* ============================================
   MatrixComponents - Main Stylesheet
   Include this in your consuming application
   ============================================ */

/* CSS Variables - Override these in your app */
:root {
    /* Primary Colors */
    --matrix-primary: #0073ea;
    --matrix-primary-dark: #005bb5;
    /* Issue 329 — l'ENCRE de l'accent, distincte du REMPLISSAGE ci-dessus. Les
       liens et les libelles accentues la lisent ; par defaut elle vaut l'accent
       lui-meme, donc rien ne bouge pour qui charge cette feuille seule. Une
       application qui rehabille la bibliotheque peut, elle, distinguer les deux
       roles — un fond n'a pas le meme seuil de contraste qu'un texte. */
    --matrix-primary-ink: var(--matrix-primary);
    --matrix-primary-light: #4dabf7;
    --matrix-secondary: #6c757d;
    --matrix-success: #00c875;
    --matrix-warning: #ffb800;
    --matrix-danger: #ff3838;
    --matrix-info: #00d2ff;

    /* Background Colors */
    --matrix-bg-primary: #ffffff;
    --matrix-bg-secondary: #f8f9fa;
    --matrix-bg-tertiary: #f1f3f4;
    --matrix-bg-hover: #f5f6f8;
    --matrix-bg-active: #e3f2fd;

    /* Text Colors */
    --matrix-text-primary: #323338;
    --matrix-text-secondary: #676879;
    --matrix-text-tertiary: #9ca3af;
    --matrix-text-white: #ffffff;

    /* Border Colors */
    --matrix-border-light: #e1e5e9;
    --matrix-border-medium: #c1c7d0;
    --matrix-border-dark: #a1a7b0;

    /* Shadows */
    --matrix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --matrix-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --matrix-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Border Radius */
    --matrix-radius-sm: 4px;
    --matrix-radius-md: 8px;
    --matrix-radius-lg: 12px;

    /* Transitions */
    --matrix-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Button Styles
   ============================================ */

.matrix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--matrix-radius-sm);
    cursor: pointer;
    transition: var(--matrix-transition);
    text-decoration: none;
    white-space: nowrap;
}

.matrix-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.matrix-btn-primary {
    background-color: var(--matrix-primary);
    border-color: var(--matrix-primary);
    color: var(--matrix-text-white);
}

.matrix-btn-primary:hover:not(:disabled) {
    background-color: var(--matrix-primary-dark);
    border-color: var(--matrix-primary-dark);
}

.matrix-btn-secondary {
    background-color: var(--matrix-secondary);
    border-color: var(--matrix-secondary);
    color: var(--matrix-text-white);
}

.matrix-btn-success {
    background-color: var(--matrix-success);
    border-color: var(--matrix-success);
    color: var(--matrix-text-white);
}

.matrix-btn-danger {
    background-color: var(--matrix-danger);
    border-color: var(--matrix-danger);
    color: var(--matrix-text-white);
}

.matrix-btn-warning {
    background-color: var(--matrix-warning);
    border-color: var(--matrix-warning);
    /* Plan 454 — encre FIXE, volontairement PAS `--matrix-text-primary`.
       Le fond de ce bouton est un ambre moyen quel que soit le thème
       (--linkooc-orange-var-1 : #FFA500 clair, #d29922 sombre). Depuis que
       `--matrix-text-primary` suit le thème, le lire ici donnerait du blanc
       sur ambre (2,3:1). Cette valeur est celle rendue jusqu'ici.
       Mesuré le 2026-08-12 : dans le BackOffice cette déclaration ne gagne
       pas — `.matrix-btn` de `linkooc-matrix.css:140` est chargé plus tard et
       impose `var(--kendo-color-on-base)` ; avant comme après le plan 454 le
       bouton y rend la même encre. La ligne reste pour les consommateurs de
       MatrixComponents qui n'ont pas cette surcharge. */
    color: #323338;
}

.matrix-btn-info {
    background-color: var(--matrix-info);
    border-color: var(--matrix-info);
    color: var(--matrix-text-white);
}

.matrix-btn-outline {
    background-color: transparent;
    border-color: var(--matrix-border-medium);
    color: var(--matrix-text-primary);
}

.matrix-btn-outline:hover:not(:disabled) {
    background-color: var(--matrix-bg-hover);
    border-color: var(--matrix-primary);
    color: var(--matrix-primary-ink);
}

.matrix-btn-text {
    background-color: transparent;
    border-color: transparent;
    color: var(--matrix-primary-ink);
}

.matrix-btn-text:hover:not(:disabled) {
    background-color: var(--matrix-bg-hover);
}

.matrix-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.matrix-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.matrix-btn-add {
    background-color: var(--matrix-success);
    border-color: var(--matrix-success);
    color: var(--matrix-text-white);
}

.matrix-btn-add:hover:not(:disabled) {
    background-color: #00a65a;
    border-color: #00a65a;
}

/* ============================================
   Search Bar Styles
   ============================================ */

.linkooc-toolbar__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--matrix-bg-primary);
    border: 1px solid var(--matrix-border-light);
    border-radius: 20px;
    min-width: 250px;
    transition: var(--matrix-transition);
}

.linkooc-toolbar__search:focus-within {
    border-color: var(--matrix-primary);
    box-shadow: 0 0 0 2px rgba(0, 115, 234, 0.1);
}

.linkooc-toolbar__search i {
    color: var(--matrix-text-tertiary);
}

.linkooc-toolbar__search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--matrix-text-primary);
}

.linkooc-toolbar__search input::placeholder {
    color: var(--matrix-text-tertiary);
}

.linkooc-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--matrix-text-tertiary);
    padding: 0;
    transition: var(--matrix-transition);
}

.linkooc-search-clear:hover {
    color: var(--matrix-danger);
}

.linkooc-search-clear.hidden {
    display: none;
}

/* ============================================
   Status Badge Styles
   ============================================ */

.Matrix_Status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 12px;
    white-space: nowrap;
}

/* ============================================
   Grid Section Styles
   ============================================ */

.matrix-grid-section {
    background-color: var(--matrix-bg-primary);
    border-radius: var(--matrix-radius-md);
}

/* Plan 701 — rechargement : les lignes déjà rendues restent à l'écran, atténuées,
   au lieu d'être remplacées par un spinner (la grille n'est plus démontée). */
.matrix-grid-section.is-busy .matrix-record-cards,
.matrix-grid-section.is-busy .matrix-compact-list,
.matrix-grid-section.is-busy .matrix-record-grid > tbody {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* When using Linkooc toolbar, remove default padding - parent handles it */
.matrix-grid-section:has(.linkooc-grid-toolbar) {
    padding: 0;
    background-color: transparent;
}

.matrix-section-header {
    margin-bottom: 1rem;
}

.matrix-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--matrix-text-primary);
    margin: 0;
}

.matrix-section-subtitle {
    font-size: 0.875rem;
    color: var(--matrix-text-secondary);
    margin: 0.25rem 0 0 0;
}

/* ============================================
   Card Styles - Linkooc Visual Identity
   Clean shadow, hover effect, status indicator
   ============================================ */

.matrix-record-card {
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    /* Rounded top, subtle bottom - avoids "stacked" look */
    border-radius: 12px 12px 4px 4px !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background-color: var(--matrix-bg-primary, #ffffff);
    overflow: hidden !important;
    position: relative !important;
    /* No extra margin - Bootstrap g-4 gutters handle spacing */
}

/* Plan 454 — le survol reste derrière un pointeur fin. Sans cette garde, un tap
   sur iOS Safari fige le fond vert et la barre verte jusqu'au tap suivant : le
   doigt n'a pas de « sortie de survol ». Les couleurs et la transition sont
   inchangées ; l'état `.selected` reste HORS garde (c'est un état, pas un survol). */
@media (hover: hover) {
    .matrix-record-card:hover {
        background-color: var(--linkooc-hover-second-bg, #f8f9fa);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border-color: var(--matrix-border-light, #e1e5e9);
    }

    /* Bottom bar turns green on hover */
    .matrix-record-card:hover::after {
        background-color: var(--linkooc-success, #08781B);
    }
}

/* Selected card state */
.matrix-record-card.selected,
.matrix-record-card.border-primary {
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 4px 12px rgba(8, 120, 27, 0.15);
}

/* Bottom status indicator bar - subtle gray by default */
.matrix-record-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--matrix-border-light, #e1e5e9);
    transition: background-color 0.2s ease;
}

/* Bottom bar turns green on selected (not hover) */
.matrix-record-card.selected::after {
    background-color: var(--linkooc-success, #08781B) !important;
}

/* Status variants - for future use if needed */
.matrix-record-card[data-status="active"]::after,
.matrix-record-card.status-active::after {
    background-color: var(--linkooc-success, #08781B);
}

.matrix-record-card[data-status="warning"]::after,
.matrix-record-card.status-warning::after {
    background-color: var(--linkooc-warning, #FFA500);
}

.matrix-record-card[data-status="danger"]::after,
.matrix-record-card.status-danger::after {
    background-color: var(--linkooc-danger, #dc3545);
}

.matrix-record-card[data-status="draft"]::after,
.matrix-record-card.status-draft::after {
    background-color: var(--matrix-border-light, #e1e5e9);
}

/* Card grid - Flexbox 3-column layout with gap */
.matrix-record-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
}

/* Each card takes ~31% width (3 per row with gap) */
.matrix-record-cards>.card,
.matrix-record-cards>.matrix-record-card {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
}

/* Plan 962 — même hauteur par rangée. Les gabarits de carte posent `h-100`
   (Bootstrap : height:100% !important), qui ne se résout pas ici (la grille n'a pas
   de hauteur) et bloque l'étirement flex : une carte vide restait plus courte que sa
   voisine. 0,2,0 + !important bat le 0,1,0 + !important de `.h-100`. */
.matrix-record-cards>.card,
.matrix-record-cards>.matrix-record-card {
    height: auto !important;
}

/* Un bouton de carte ne se coupe jamais en deux lignes (icône au-dessus du texte). */
.matrix-record-cards .Matrix_Button,
.matrix-record-cards .btn {
    white-space: nowrap;
}

/* 2 columns on tablet */
@media (max-width: 991.98px) {

    .matrix-record-cards>.card,
    .matrix-record-cards>.matrix-record-card {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
    }
}

/* 1 column on mobile */
@media (max-width: 767.98px) {

    .matrix-record-cards>.card,
    .matrix-record-cards>.matrix-record-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.matrix-card-body {
    padding: 1rem;
}

.matrix-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--matrix-text-primary);
    margin: 0;
}

.matrix-card-description {
    font-size: 0.875rem;
    color: var(--matrix-text-secondary);
    margin: 0;
}

/* ============================================
   Breadcrumb Styles
   ============================================ */

.matrix-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.matrix-breadcrumb-item {
    color: var(--matrix-text-secondary);
}

.matrix-breadcrumb-link {
    color: var(--matrix-primary-ink);
    text-decoration: none;
    transition: var(--matrix-transition);
}

/* Issue 329 — un lien reste de l'ENCRE au survol : c'est le soulignement qui dit
   qu'il est survole, pas un changement de role. Il lisait --matrix-primary-dark,
   le survol d'un REMPLISSAGE, qui vaut le bleu d'origine faute de pont. */
.matrix-breadcrumb-link:hover {
    color: var(--matrix-primary-ink);
    text-decoration: underline;
}

.matrix-breadcrumb-active {
    color: var(--matrix-text-primary);
    font-weight: 500;
}

.matrix-breadcrumb-separator {
    color: var(--matrix-text-tertiary);
}

/* ============================================
   Modal Styles
   ============================================ */

.matrix-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: var(--matrix-transition);
}

.matrix-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.matrix-modal-content {
    background: var(--matrix-bg-primary);
    border-radius: var(--matrix-radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--matrix-shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.matrix-modal-overlay.show .matrix-modal-content {
    transform: scale(1);
}

.matrix-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--matrix-border-light);
}

.matrix-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--matrix-text-primary);
}

.matrix-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.matrix-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--matrix-border-light);
    background-color: var(--matrix-bg-secondary);
}

.matrix-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--matrix-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: var(--matrix-transition);
}

.matrix-close-btn:hover {
    color: var(--matrix-text-primary);
}

/* ============================================
   Utility Classes
   ============================================ */

.cursor-pointer {
    cursor: pointer;
}

.sortable-header {
    user-select: none;
}

.sortable-header.sorted {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ============================================
   Matrix Grid Table Header Styles
   Light, clean header matching modern design
   ============================================ */

.matrix-grid-header {
    background-color: var(--matrix-bg-primary, #ffffff);
    border-bottom: 1px solid var(--matrix-border-light, #e1e5e9);
}

.matrix-grid-header th {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--matrix-text-secondary, #676879);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--matrix-border-light, #e1e5e9);
    background-color: transparent;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}

.matrix-grid-header th:hover {
    color: var(--matrix-text-primary, #323338);
    --bs-table-accent-bg: var(--bs-table-hover-bg);
}

.matrix-grid-header th.sortable-header.sorted {
    color: var(--matrix-text-primary, #323338);
    --bs-table-accent-bg: var(--bs-table-hover-bg);
}

.matrix-sort-icon {
    font-size: 0.625rem;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.matrix-grid-header th:hover .matrix-sort-icon,
.matrix-grid-header th.sorted .matrix-sort-icon {
    opacity: 1;
}

/* Table body rows */
.matrix-record-grid tbody tr {
    border-bottom: 1px solid var(--matrix-border-light, #e1e5e9);
}

.matrix-record-grid tbody tr:hover {
    background-color: var(--matrix-bg-hover, #f5f6f8);
}

.matrix-record-grid tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--matrix-text-primary, #323338);
    vertical-align: middle;
}

/* ============================================
   Matrix_DropDownList Styles
   ============================================ */

/* Arrondi des coins pour Matrix_DropDownList (identique à Matrix_TextBox) */
.Matrix_DropDownList .k-input,
.Matrix_DropDownList .k-input-solid,
.Matrix_DropDownList .k-picker,
.Matrix_DropDownList .k-dropdown,
.Matrix_DropDownList .k-dropdown-wrap {
    border-radius: 0.375rem !important;
}

/* Conteneur principal */
.Matrix_DropDownList.k-dropdown,
.Matrix_DropDownList.k-picker {
    border-radius: 0.375rem !important;
}

/* Zone de saisie */
.Matrix_DropDownList .k-input-inner,
.Matrix_DropDownList .k-input-value-text {
    border-radius: 0.375rem !important;
}

/* Bouton de sélection (flèche) */
.Matrix_DropDownList .k-select,
.Matrix_DropDownList .k-picker-toggle {
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* État ouvert */
.Matrix_DropDownList.k-expanded .k-input,
.Matrix_DropDownList.k-expanded .k-input-solid {
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

/* Popup de la liste déroulante - arrondi complet sur tous les côtés */
.k-animation-container .k-popup.k-list-container,
.k-animation-container .k-list-container,
.k-popup.k-list-container,
.k-animation-container .k-popup,
div.k-animation-container>div.k-popup {
    border-radius: 0.375rem !important;
    overflow: hidden !important;
}

/* Liste des éléments - conteneur avec arrondi */
.k-animation-container .k-list,
.k-popup .k-list,
.k-animation-container .k-list-container .k-list,
.k-list-container .k-list,
div.k-popup>.k-list {
    border-radius: 0.375rem !important;
    overflow: hidden !important;
}

/* Tous les éléments de la liste - pas d'arrondi par défaut */
.k-animation-container .k-list-item,
.k-popup .k-list-item,
.k-list-item,
.k-list-container .k-list-item {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Premier élément de la liste - arrondi en haut uniquement */
.k-animation-container .k-list-item:first-child,
.k-popup .k-list-item:first-child,
.k-list-item:first-child,
.k-list-container .k-list-item:first-child {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Dernier élément de la liste - arrondi en bas uniquement */
.k-animation-container .k-list-item:last-child,
.k-popup .k-list-item:last-child,
.k-list-item:last-child,
.k-list-container .k-list-item:last-child {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Cas où il n'y a qu'un seul élément - arrondi complet */
.k-animation-container .k-list-item:only-child,
.k-popup .k-list-item:only-child,
.k-list-item:only-child,
.k-list-container .k-list-item:only-child {
    border-radius: 0.375rem !important;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* ============================================
   Linkooc Visual Identity Toolbar
   Used when Options.UseLinkoocToolbar = true
   
   MATCHING Master/Detail ItemList.razor layout:
   - Same height as .linkooc-panel-header (56px)
   - Same padding pattern
   - Same search box styling
   ============================================ */

.linkooc-grid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* Match .linkooc-panel-header from ItemList.razor.
       Retour à la ligne quand la barre ne tient pas (tablette, petit portable) :
       sans lui, la bascule grille/liste sortait du cadre et `.main` la rognait.
       min-height + padding 9/8px (+1px de bordure) = les 56px d'avant sur une
       seule ligne (contrôles de 38px), au pixel près. */
    flex-wrap: wrap;
    min-height: var(--linkooc-panel-header-height, 56px);
    padding: 9px var(--linkooc-spacing-md, 1rem) 8px;
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
}

.linkooc-grid-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 600px;
}

.linkooc-grid-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Search box styling - matches ItemList.razor pattern */
.linkooc-grid-toolbar .linkooc-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.linkooc-grid-toolbar .linkooc-search-icon {
    position: absolute;
    left: 12px;
    color: var(--matrix-text-secondary, #676879);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.linkooc-grid-toolbar .linkooc-search-input {
    padding-left: 36px;
    padding-right: 36px;
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    border-radius: var(--matrix-radius-md, 8px);
    font-size: 0.875rem;
    height: 38px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.linkooc-grid-toolbar .linkooc-search-input:focus {
    border-color: var(--matrix-primary, #0073ea);
    box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.1);
    outline: none;
}

.linkooc-grid-toolbar .linkooc-search-input::placeholder {
    color: var(--matrix-text-tertiary, #9ca3af);
}

.linkooc-grid-toolbar .linkooc-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--matrix-text-secondary, #676879);
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.linkooc-grid-toolbar .linkooc-search-clear:hover {
    background-color: var(--matrix-bg-hover, #f5f6f8);
    color: var(--matrix-text-primary, #323338);
}

/* Filter badge */
.linkooc-grid-toolbar .linkooc-filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    background-color: var(--matrix-primary, #0073ea);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================
   SORT CONTROL — chips + direction toggle (Linkooc Visual Identity)
   Shared by the Linkooc desktop toolbar AND the compact mobile toolbar.
   Active chip = brand green (--linkooc-button-primary) with white text per the
   selected-state contract; hover = subtle green tint with readable dark text.
   ============================================ */

.linkooc-sort-control {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.linkooc-sort-pills {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Individual chips — neutral by default, brand green when active */
.linkooc-sort-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #f7f7f8);
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.linkooc-sort-pill:hover {
    background: var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
    border-color: var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-text-display, #000601);
}

.linkooc-sort-pill.active {
    background: var(--linkooc-button-primary, #08781B);
    border-color: var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-on-solid, #ffffff);
    box-shadow: 0 1px 2px rgba(0, 6, 1, 0.18);
}

.linkooc-sort-pill.active:hover {
    background: var(--linkooc-button-primary-hover, #11671E);
    border-color: var(--linkooc-button-primary-hover, #11671E);
    color: var(--linkooc-on-solid, #ffffff);
}

.linkooc-sort-pill i {
    font-size: 0.85em;
}

.linkooc-sort-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--linkooc-bg, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    color: var(--linkooc-text-secondary, #6d6d6d);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.linkooc-sort-direction:hover {
    background: var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
    border-color: var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-primary-ink, #08781B);
}

.linkooc-sort-direction i {
    font-size: 1rem;
}

/* ── Compact (mobile) variant: own full-width row, horizontally scrollable chips ── */
.linkooc-sort-control.compact {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    padding: 0 0.75rem 0.5rem;
}

/* La rangée est LE défileur — jamais le body. Sa barre de défilement native est
   masquée volontairement (juste en dessous), donc la seule chose qui reste pour
   dire « il y a d'autres tris à droite » est l'ombre de défilement (plan 458 F4,
   même procédé que la barre d'onglets, R7b de mobile.css). */
.linkooc-sort-control.compact .linkooc-sort-pills {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Ombres de défilement, CSS pur (technique de Roman Komarov) :
       les couches 1-2 sont des « caches » opaques peints dans la couleur de fond
       de la rangée et attachés au CONTENU (local), donc ils glissent avec lui ;
       les couches 3-4 sont les ombres, attachées à l'ÉLÉMENT (scroll), donc elles
       restent collées aux bords. Un cache recouvre son ombre tant que ce côté n'a
       plus rien à faire défiler : l'ombre n'apparaît que là où le contenu continue
       hors écran. Zéro JS, zéro écouteur de scroll.
       La couleur du cache DOIT être celle du fond réel sous la rangée
       (--linkooc-surface, opaque dans les deux thèmes), sinon les deux caches de
       28px se lisent comme des bandes teintées.

       ⚠️ LIMITE MESURÉE (390x844 et 360x844, /user-management et
       /reservations/clients, le 2026-08-12, captures 458-shadow-A..D). À la
       différence des onglets de R7b, dont le fond est transparent,
       `.linkooc-sort-pill` porte un fond OPAQUE (--linkooc-surface-hover, et
       --linkooc-button-primary pour la chip active) et occupe TOUTE la hauteur
       de la rangée. Un fond se peint derrière les enfants, donc l'ombre ne se
       voit que là où la chip ne la couvre pas :

         - rangée défilée jusqu'au bout : l'ombre de GAUCHE est bien visible
           (l'écart entre deux chips et l'arrondi laissent passer), et celle de
           droite disparaît — le comportement attendu ;
         - rangée au repos : l'ombre de DROITE est calculée mais masquée par la
           chip coupée en plein mot, dont le corps plat couvre les 18px.

       La rendre visible dans ce dernier cas demanderait une couche peinte
       AU-DESSUS du contenu (superposition sticky, `mask-image`, ou animation
       liée au défilement) — un procédé que le plan 458 demandait justement de
       ne pas inventer. Arbitrage opérateur, consigné au rapport du plan 458. */
    --lk-sort-scroll-shadow: rgba(0, 0, 0, 0.22);
    --lk-sort-scroll-cover: var(--linkooc-surface, #FEFEFE);
    background-image:
        linear-gradient(to right, var(--lk-sort-scroll-cover) 65%, transparent),
        linear-gradient(to left, var(--lk-sort-scroll-cover) 65%, transparent),
        linear-gradient(to right, var(--lk-sort-scroll-shadow), transparent),
        linear-gradient(to left, var(--lk-sort-scroll-shadow), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 18px 100%, 18px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Thème sombre : une ombre noire est invisible sur une surface #171717. */
main.dark-theme .linkooc-sort-control.compact .linkooc-sort-pills {
    --lk-sort-scroll-shadow: rgba(255, 255, 255, 0.22);
}

.linkooc-sort-control.compact .linkooc-sort-pills::-webkit-scrollbar {
    display: none;
    height: 0;
}

.linkooc-sort-control.compact .linkooc-sort-pill {
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    /* Laisse dépasser un bout de la chip voisine quand une chip est ramenée à
       l'écran : la rangée continue de se lire comme « il y en a d'autres ». */
    scroll-margin-inline: 1rem;
}

.linkooc-sort-control.compact .linkooc-sort-direction {
    flex-shrink: 0;
    width: 38px;
    height: 36px;
}

/* Subtle refresh button - icon only */
.linkooc-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--matrix-radius-sm, 4px);
    cursor: pointer;
    color: var(--matrix-text-secondary, #676879);
    transition: all 0.2s ease;
}

.linkooc-refresh-btn:hover {
    background-color: var(--matrix-bg-hover, #f5f6f8);
    color: var(--matrix-text-primary, #323338);
    border-color: var(--matrix-border-light, #e1e5e9);
}

.linkooc-refresh-btn:active {
    background-color: var(--matrix-bg-tertiary, #f1f3f4);
}

.linkooc-refresh-btn i {
    font-size: 1rem;
}

/* ============================================
   View Toggle - Better contrast
   ============================================ */

.linkooc-grid-toolbar .btn-group .btn-outline-secondary {
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background-color: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-secondary, #6c757d);
}

.linkooc-grid-toolbar .btn-group .btn-outline-secondary:hover {
    background-color: var(--linkooc-hover-bg, #f5f6f8);
    color: var(--linkooc-text, #212529);
}

.linkooc-grid-toolbar .btn-group .btn-outline-secondary.active {
    /* HIGH CONTRAST - Green background with white icon */
    background-color: var(--linkooc-green-var-3, #08781B);
    border-color: var(--linkooc-green-var-2, #0a9421);
    color: var(--linkooc-on-solid, #ffffff);
}

.linkooc-grid-toolbar .btn-group .btn-outline-secondary.active:hover {
    background-color: var(--linkooc-button-primary-hover, #11671E);
}

/* ============================================
   Inline Filter Panel (for Linkooc toolbar)
   Matches ItemList.razor .linkooc-filters-panel pattern
   ============================================ */

.linkooc-grid-toolbar+.linkooc-filters-panel-wrapper,
.matrix-grid-section .linkooc-filters-panel-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.linkooc-grid-toolbar+.linkooc-filters-panel-wrapper.show,
.matrix-grid-section .linkooc-filters-panel-wrapper.show {
    max-height: 400px;
    opacity: 1;
    transition: max-height 0.35s ease-in, opacity 0.25s ease-in 0.05s;
}

.linkooc-filters-panel {
    padding: var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #F7F7F8);
    max-height: 400px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Libellés du panneau de filtres — plan 416 : règle retirée. C'était une
   dixième copie de la règle épinglée dans les neuf `.razor` (le détecteur du
   plan ne lit que les `<style>` des `.razor`, il ne pouvait pas la voir). Inter
   et 14px redisaient les jetons ; le gris secondaire (épinglé) et la graisse
   600 contredisaient l'arbitrage opérateur du 2026-08-07 — 14px / 500 en
   `--linkooc-text-primary`. Les libellés héritent de `linkooc-theme.css`. */

/* ============================================
   Linkooc Pagination Footer
   Enhanced footer with count and page-size
   Matches ItemList.razor bottom bar pattern
   ============================================ */

.linkooc-pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Match sticky bar height from ItemList.razor */
    height: var(--linkooc-sticky-bar-height, 48px);
    padding: 0 var(--linkooc-spacing-md, 1rem);
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
}

.linkooc-pagination-count {
    color: var(--matrix-text-secondary, #676879);
    font-size: 0.875rem;
    font-weight: 500;
}

.linkooc-pagination-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.linkooc-pagination-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.linkooc-pagination-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    border-radius: var(--matrix-radius-sm, 4px);
    cursor: pointer;
    color: var(--matrix-text-primary, #323338);
    transition: all 0.2s ease;
}

.linkooc-pagination-nav button:hover:not(:disabled) {
    background-color: var(--matrix-bg-hover, #f5f6f8);
    border-color: var(--matrix-border-medium, #c1c7d0);
}

.linkooc-pagination-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.linkooc-pagination-info {
    color: var(--matrix-text-secondary, #676879);
    font-size: 0.875rem;
    padding: 0 0.5rem;
}

.linkooc-pagination-pagesize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--matrix-text-secondary, #676879);
    font-size: 0.875rem;
}

.linkooc-pagination-pagesize select {
    width: auto;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    border-radius: var(--matrix-radius-sm, 4px);
    background-color: white;
}

.linkooc-pagination-pagesize select:focus {
    border-color: var(--matrix-primary, #0073ea);
    box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.1);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINKOOC TOOLBAR & PAGINATION — Mobile Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Toolbar: stack left/right vertically */
    .linkooc-grid-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .linkooc-grid-toolbar-left {
        flex: 1 1 100%;
        max-width: none;
        gap: 0.5rem;
    }

    .linkooc-grid-toolbar-right {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    /* Search box: let it shrink below 200px on very small screens */
    .linkooc-grid-toolbar .linkooc-search-box {
        min-width: 0;
    }

    /* Options dropdown: keep text trimmed */
    .linkooc-grid-toolbar .dropdown-toggle {
        white-space: nowrap;
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
    }

    /* Pagination footer: stack on small screens */
    .linkooc-pagination-footer {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem;
        gap: 0.25rem 0.75rem;
        justify-content: center;
    }

    /* Hide item count on mobile — redundant with "1-5 sur 5" info */
    .linkooc-pagination-count {
        display: none !important;
    }

    /* Hide page-size selector on mobile — not useful on small screens */
    .linkooc-pagination-pagesize {
        display: none !important;
    }

    /* Hide entire pagination footer on mobile when single page (no nav buttons) */
    .linkooc-pagination-footer:not(:has(.linkooc-pagination-nav)) {
        display: none !important;
    }

    /* R16: Hide view toggle (grid/list buttons) on mobile */
    .linkooc-grid-toolbar-right .btn-group[role="group"] {
        display: none !important;
    }

    /* R16: Hide standalone refresh icon button in toolbar on mobile */
    .linkooc-grid-toolbar-right .linkooc-refresh-btn {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       R12 — les flèches de page au plancher 44px (plan 468, finding F4)

       Mesuré à 390x844 sur /billing-establishments le 2026-08-12 : 32 x 32,
       alors que ces deux flèches sont le SEUL chemin vers la page 2 (43 items
       sur 2 pages). Le bloc mobile ci-dessus ne reprenait que le compte
       d'items et le sélecteur de taille (R8) — jamais la taille des cibles.

       `min-width` / `min-height` et non `width` / `height` : la règle de base
       (:1104) pose déjà `display: flex; align-items: center; justify-content:
       center`, donc le glyphe reste centré quelle que soit la boîte, et un
       plancher ne casse pas l'alignement de la ligne si le pied venait à
       serrer. `box-sizing` explicite parce que la bordure de 1px compte.

       Le pied ne grandit pas de 24px pour autant : `.linkooc-pagination-info`
       vit sur la même ligne et fait déjà ~34px de haut, le pied passe de
       ~48 à ~60px. Seule la SURFACE grandit, le glyphe n'est pas retouché.
       Le bureau garde ses 32px : cette règle est enfermée dans le bloc mobile.
       ═══════════════════════════════════════════════════════════════════════ */
    .linkooc-pagination-nav button {
        box-sizing: border-box;
        min-width: 44px;
        min-height: 44px;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════
   DELETE CONFIRMATION MODAL — Linkooc Visual Identity
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.linkooc-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 6, 1, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.linkooc-delete-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* ── Dialog card ── */
.linkooc-delete-dialog {
    background: var(--linkooc-bg, #ffffff);
    border-radius: var(--linkooc-radius-lg, 0.75rem);
    width: 90%;
    max-width: 440px;
    box-shadow: 0 12px 40px rgba(0, 6, 1, 0.18);
    transform: scale(0.92) translateY(8px);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.linkooc-delete-overlay.visible .linkooc-delete-dialog {
    transform: scale(1) translateY(0);
}

/* ── Icon area (top accent) ── */
.linkooc-delete-icon-area {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.5rem 0.75rem;
}

.linkooc-delete-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--linkooc-danger-light, rgba(186, 25, 25, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
}

.linkooc-delete-icon-circle i {
    font-size: 1.5rem;
    color: var(--linkooc-danger, #BA1919);
}

/* ── Body ── */
.linkooc-delete-body {
    padding: 0 1.5rem 1rem;
    text-align: center;
}

.linkooc-delete-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
}

.linkooc-delete-message {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    line-height: 1.5;
}

/* Multi-object count pill */
.linkooc-delete-count {
    display: inline-flex;
    align-items: center;
    background: var(--linkooc-surface-hover, #F7F7F8);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--linkooc-text-primary, #333);
}

/* Warning line */
.linkooc-delete-warning {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--linkooc-danger, #BA1919);
}

/* ── Actions ── */
.linkooc-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #F7F7F8);
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .linkooc-delete-dialog {
        width: 95%;
        margin: 1rem;
    }

    .linkooc-delete-actions {
        flex-direction: column;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   COMPACT VIEW (ViewMode.Compact) — mobile-optimized list
   Generic styles for compact toolbar + compact list container.
   Row content is provided by each page via CompactRowTemplate.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Compact Toolbar ── */
.matrix-compact-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.matrix-compact-search {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.matrix-compact-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--linkooc-text-muted, #6d6d6d);
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1;
}

.matrix-compact-search-input {
    padding-left: 2.25rem;
    /* La croix « effacer » occupe 44px collés au bord droit (voir plus bas) :
       sans cette réserve le texte saisi passerait dessous. */
    padding-right: 2.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    height: 40px;
    border-color: var(--linkooc-border-color, #dee2e6);
}

.matrix-compact-search-input:focus {
    border-color: var(--linkooc-primary, #2e7d32);
    box-shadow: 0 0 0 0.15rem rgba(46, 125, 50, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   R12E — la croix « effacer » de la recherche compacte (plan 449, finding F4)

   Mesurée à 390x844 sur /reservations/clients le 2026-08-11 : 20 x 21, pour un
   plancher de 44. Cette classe est PARTAGÉE par toutes les listes compactes du
   back-office (Matrix_Grid), d'où sa place dans cette feuille.

   La hauteur vient de `top: 0; bottom: 0`, JAMAIS d'un `min-height`, et c'est
   le point important : le plan 420 a déjà payé ce piège sur `.k-clear-value`,
   où un `min-height: 44px` posé sur l'enfant poussait le CHAMP à 46px. Ici le
   bouton est `position: absolute`, donc hors flux : l'étirer entre le haut et
   le bas de `.matrix-compact-search` lui donne toute la hauteur du champ (44px,
   plancher `.form-control` de mobile.css) sans rien pouvoir lui ajouter.
   `align-self: stretch` n'aurait servi à rien — sur un enfant absolument
   positionné d'un conteneur flex, `stretch` se comporte comme `flex-start`.

   Seule la SURFACE grandit : `font-size` reste à 0.75rem, le glyphe ne gonfle
   pas — le constat portait sur la zone de tap, pas sur la lisibilité.
   ═══════════════════════════════════════════════════════════════════════════ */
.matrix-compact-search-clear {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    background: none;
    border: none;
    color: var(--linkooc-text-muted, #6d6d6d);
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
}

.matrix-compact-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--linkooc-text-muted, #6d6d6d);
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.15s, color 0.15s;
}

.matrix-compact-filter-btn:hover,
.matrix-compact-filter-btn.active {
    border-color: var(--linkooc-primary, #2e7d32);
    color: var(--linkooc-primary-ink, #2e7d32);
}

/* ═══════════════════════════════════════════════════════════════════════════
   R12 — le bouton Filtres compact au plancher 44px (plan 468)

   Mesuré 40 x 40 à 390 sur /invoices. Il est la cible SŒUR du ⋮ d'options
   ajouté à côté de lui dans la même barre : deux carrés collés de tailles
   différentes se lisent comme un défaut.

   PLACÉ ICI, ET NON DANS LE BLOC MOBILE PLUS HAUT (:1162) : mesuré pendant la
   gate, l'override y restait inerte à 40 px de large. La media query n'ajoute
   AUCUNE spécificité — `.matrix-compact-filter-btn` y vaut (0,1,0), exactement
   comme la déclaration de base juste au-dessus, qui arrive PLUS LOIN dans la
   même feuille et gagne donc l'égalité. La hauteur passait quand même à 44 (le
   plancher générique `button` de mobile.css), ce qui donnait un rectangle
   40 x 44 : le symptôme trompeur qui fait croire que la règle a pris.
   La règle des flèches de pagination, elle, reste dans le bloc mobile : sa
   déclaration de base (:1104) la PRÉCÈDE, l'ordre lui donne raison.

   Seuil 768 et non 767 : c'est celui du mode compact lui-même
   (`matchMedia('(max-width: 768px)')`) et celui des chips de tri plus bas.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .matrix-compact-filter-btn {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

.matrix-compact-filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    background: var(--linkooc-primary, #2e7d32);
    color: #fff;
    padding: 0 4px;
}

/* ── Compact List Container ── */
.matrix-compact-list {
    display: flex;
    flex-direction: column;
}

/* ── Reusable compact row primitives ── */
.matrix-compact-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--linkooc-border-color, #eee);
    cursor: pointer;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.matrix-compact-row:active {
    background: var(--linkooc-surface-hover, #f8f9fa);
}

.matrix-compact-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--linkooc-primary, #2e7d32);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

.matrix-compact-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.matrix-compact-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--linkooc-text, #212529);
}

.matrix-compact-meta {
    font-size: 0.8125rem;
    color: var(--linkooc-text-muted, #6d6d6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-compact-meta i {
    font-size: 0.75rem;
    margin-right: 0.125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⋮ DES VUES COMPACTES (plan 468, findings F2 / F3 / F8)

   Deux fonctionnalités que la vue bureau porte disparaissaient en portrait :
   la SUPPRESSION d'une ligne (bouton de carte, absent des lignes compactes et
   absent des fiches de détail — mesuré `supprimer:0` sur 18 clients et 5
   partenaires à 390) et l'EXPORT de /invoices (rendu uniquement dans les deux
   barres d'outils bureau de Matrix_Grid). R11 tranche : 2 actions = tap sur la
   ligne + ⋮. Cette famille de classes sert les DEUX ⋮ — celui de la barre
   compacte (export) et celui d'une ligne de liste — pour qu'ils se comportent
   pareil à l'œil et sous le doigt.

   POURQUOI UN PANNEAU ANCRÉ EN BAS ET NON UN MENU SOUS LE DÉCLENCHEUR
   ───────────────────────────────────────────────────────────────────────────
   Un `position: absolute; top: calc(100% + 4px)` — le patron des en-têtes de
   page — s'ouvre VERS LE BAS. Sur la dernière ligne d'une liste de 18, ce bas
   est hors de l'écran : c'est le défaut classique de ce patron, et le plan 440
   ne le rattrape pas (son filet global borne la LARGEUR, et ne bascule en
   `fixed` que sur les écrans très bas, `max-height: 500px`, c'est-à-dire le
   téléphone couché). Ancré au viewport, le panneau est dans l'écran quelle que
   soit la ligne, première comme dernière, sans une ligne de JS de placement.

   La classe `.linkooc-dropdown-menu` est CONSERVÉE sur le même élément : elle
   n'apporte aucune géométrie propre (aucune feuille globale ne la déclare, les
   11 copies du patron sont scopées par page), mais elle fait entrer ce menu
   dans le filet du plan 440 — largeur bornée à `100vw - 1rem`, et bascule
   `fixed` haut-droite en paysage. On hérite du correctif au lieu de le
   refabriquer (constat F6 du plan 469 : un menu maison hors du filet).

   L'overlay de fermeture est `.linkooc-dropdown-overlay` (menu-editor.css,
   z-index 1040) : le panneau passe donc à 1050.
   ═══════════════════════════════════════════════════════════════════════════ */

.matrix-compact-menu {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* R12 — 44x44, même plancher que le bouton Filtres voisin. */
.matrix-compact-menu-trigger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--linkooc-text-muted, #6d6d6d);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

/* Variante « barre d'outils » : mêmes bordure et fond que le bouton Filtres
   qu'elle jouxte, pour que les deux carrés se lisent comme une paire. */
.matrix-compact-menu-trigger.bordered {
    border-color: var(--linkooc-border-color, #dee2e6);
    background: #fff;
}

.matrix-compact-menu-trigger:hover,
.matrix-compact-menu-trigger[aria-expanded="true"] {
    color: var(--linkooc-primary-ink, #2e7d32);
}

.matrix-compact-menu-list {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    top: auto;
    z-index: 1050;
    min-width: 220px;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--linkooc-surface, #fff);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 0.75rem;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Animation d'opacité SEULE : un `transform` sur un élément `fixed` reste
       inoffensif pour son propre placement, mais il ferait de lui un bloc
       conteneur pour ses descendants — inutile de s'exposer. */
    animation: matrixCompactMenuIn 0.12s ease-out;
}

@keyframes matrixCompactMenuIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.matrix-compact-menu-list > li {
    list-style: none;
}

/* Les entrées viennent de deux mondes : `.linkooc-dropdown-item` (patron R3,
   stylé globalement par menu-editor.css) pour les ⋮ de ligne, et
   `.dropdown-item` (Bootstrap) pour le fragment `ExportOptions` que les pages
   passent déjà à Matrix_Grid. Les deux sont ramenés au même plancher de 44px
   ici. Sélecteur à deux classes (0,2,0) : menu-editor.css et Bootstrap sont
   chargés respectivement APRÈS et AVANT cette feuille, un sélecteur simple
   perdrait contre le premier. */
.matrix-compact-menu-list .linkooc-dropdown-item,
.matrix-compact-menu-list .dropdown-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.9375rem;
    color: var(--linkooc-text, #212529);
    text-decoration: none;
    cursor: pointer;
}

.matrix-compact-menu-list .linkooc-dropdown-item:hover,
.matrix-compact-menu-list .dropdown-item:hover {
    background: var(--linkooc-surface-hover, #f8f9fa);
}

.matrix-compact-menu-list .linkooc-dropdown-item i,
.matrix-compact-menu-list .dropdown-item i {
    font-size: 1rem;
    width: 1.25rem;
    flex-shrink: 0;
    text-align: center;
}

.matrix-compact-menu-list .linkooc-dropdown-item-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.matrix-compact-menu-list .linkooc-dropdown-item-content small {
    font-size: 0.75rem;
    color: var(--linkooc-text-muted, #6d6d6d);
}

.matrix-compact-menu-list .linkooc-dropdown-item.danger,
.matrix-compact-menu-list .linkooc-dropdown-item.danger i {
    color: var(--linkooc-danger, #dc3545);
}

/* ═══════════════════════════════════════════════════════════════════════════
   R12E CIBLES TACTILES — les chips de tri des listes (plan 436, finding F3)

   Mesuré à 390x844 sur /menus le 2026-08-10, avant correctif :

     .linkooc-sort-pill      « Récents »           78 x 29
     .linkooc-sort-pill      « Publiés »           73 x 29
     .linkooc-sort-pill      « A–Z »               52 x 29
     .linkooc-sort-direction « Ordre décroissant » 34 x 34

   Aucune @media ne les relevait : la variante `.compact` juste au-dessus
   ajuste le padding et la police, jamais la hauteur. Ces chips sont partagés
   par TOUTES les listes du back-office (Matrix_Grid), pas seulement /menus,
   d'où leur place dans cette feuille et non dans mobile.css.

   Deux règles de conduite héritées des plans 399 / 402 / 420 :

   1. `!important` porte le correctif. `.linkooc-sort-control.compact
      .linkooc-sort-pill` (0,3,0) et `.linkooc-sort-control.compact
      .linkooc-sort-direction` (0,3,0) battent un sélecteur de classe simple,
      et les feuilles scopées Blazor [b-xxxxx] arrivent APRÈS celle-ci.
   2. Les variantes `:hover` sont listées explicitement : un tap sur un écran
      tactile fige `:hover` sans rien pour le libérer, et les deux familles ont
      un `:hover` de bureau qui redéclare `background` / `border-color`. Elles
      ne redéclarent PAS la géométrie, mais les lister coûte zéro et supprime
      la question.

   Seule la SURFACE grandit : ni `font-size`, ni la taille du glyphe `i` ne
   sont touchés — le constat porte sur la zone de tap, pas sur la lisibilité.

   La rangée tient dans 390 après correctif : 3 chips (~78+73+52) + 2 gouttières
   de 6px + le bouton de sens à 44 + 8px de gouttière = ~267 pour 366 de large
   utile (390 moins les 2 x 12px de padding de `.compact`). Si une liste
   déclarait assez d'options de tri pour déborder, `.linkooc-sort-pills` est
   DÉJÀ `overflow-x: auto` : la rangée défile dans son propre conteneur, le
   corps de page ne déborde jamais et aucun chip n'est retiré.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .linkooc-sort-pill,
    .linkooc-sort-pill:hover,
    .linkooc-sort-pill.active,
    .linkooc-sort-pill.active:hover,
    .linkooc-sort-control.compact .linkooc-sort-pill,
    .linkooc-sort-control.compact .linkooc-sort-pill:hover {
        box-sizing: border-box !important;
        min-height: 2.75rem !important;
    }

    /* Le bouton de sens est un carré : width ET height, sinon `width: 34px`
       (puis `38px` en compact) reste gagnant et la cible garde un côté sous le
       plancher. `flex-shrink: 0` est déjà posé par `.compact` — répété ici
       parce que la règle vaut aussi pour la variante non compacte si un
       conteneur étroit passait sous 768. */
    .linkooc-sort-direction,
    .linkooc-sort-direction:hover,
    .linkooc-sort-control.compact .linkooc-sort-direction,
    .linkooc-sort-control.compact .linkooc-sort-direction:hover {
        box-sizing: border-box !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        flex-shrink: 0 !important;
    }
}