/* ═══ Liste Tabulator — feuille du widget ════════════════════════════════════
   Pourquoi ce fichier existe : ces règles vivaient dans un <style> au milieu du
   corps de page, donc APRÈS la charte partagée (sk-ui.css). Le widget gagnait
   l'arbitrage sur toutes les pages, et la charte a dû se défendre à coups de
   « !important ». Chargée comme une vraie feuille de style (voir
   ResourceManagementOptionsConfiguration), elle part dans le <head> avec les
   autres styles, donc AVANT la charte : à égalité de spécificité, c'est la
   charte qui tranche, comme partout ailleurs dans l'application.

   Règle de vie : ce fichier ne décide d'aucune couleur ni d'aucune hauteur.
   Il consomme les jetons de la charte et fournit un repli pour les pages
   publiques, que la charte ne couvre pas (elle n'est servie que sur /my, /bo,
   /seller et /admin). Le repli est là pour que rien ne casse, pas pour gagner. */

/* ── Densité ────────────────────────────────────────────────────────────────
   Les deux densités sont un réglage du widget (Designer), pas une valeur codée
   ici. La densité compacte ne réécrit aucune règle : elle REDÉFINIT les jetons
   de hauteur sur ce widget-là. Comme les variables CSS s'héritent, les règles de
   la charte qui lisent --sk-row-h / --sk-thead-h suivent d'elles-mêmes, sans que
   cette feuille ait à leur passer devant. Une seule liste peut donc être dense
   sur une page qui ne l'est pas. */
.tabulator-listing-widget.sk-density-compact {
    --sk-row-h: var(--sk-row-h-dense, 44px);
    --sk-thead-h: var(--sk-row-h-dense, 44px);
}

.tabulator-listing-widget {
    /* Hauteur d'une ligne de texte dans une cellule : sert à répartir le reste de
       la hauteur en rembourrage haut et bas, donc à centrer sans « flex » — qui,
       lui, ferait perdre les points de suspension sur les textes longs. */
    --sk-tab-line-h: 1.45rem;
}

/* ── Encombrement ───────────────────────────────────────────────────────────
   Une liste n'a pas à élargir la page qui l'accueille : min-width:0 l'empêche
   d'imposer sa largeur naturelle à une grille ou à une boîte flexible parente,
   ce qui est la cause habituelle d'un défilement horizontal de tout l'écran.
   Aucune marge propre : la gouttière est celle du bloc de page, pas la nôtre. */
.tabulator-listing-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}

.tabulator-listing-widget .tabulator {
    width: 100%;
    max-width: 100%;
}

/* Un tableau plus large que son cadre défile DANS son cadre, jamais dans la page.
   overscroll-behavior coupe le report du défilement sur le document. */
.tabulator-listing-widget .tabulator-tableholder {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.tabulator-listing-widget .tabulator-tableholder::-webkit-scrollbar { height: 8px; }
.tabulator-listing-widget .tabulator-tableholder::-webkit-scrollbar-thumb {
    background: var(--sk-border-strong, #D3D7E4);
    border-radius: 999px;
}

.tabulator-listing-widget[dir="rtl"] .tabulator { direction: rtl; }
.tabulator-listing-widget[dir="rtl"] .tabulator .tabulator-col { text-align: right; }
.tabulator-listing-widget[dir="rtl"] .tabulator .tabulator-header .tabulator-col { text-align: right; }
.tabulator-listing-widget.tabulator-hide-footer .tabulator-footer { display: none; }

/* ── Cadre ──────────────────────────────────────────────────────────────────
   Mêmes valeurs que la charte, exprimées avec ses jetons : sur un espace la
   charte repasse derrière et gagne, sur une page publique ce repli tient. */
.tabulator-listing-widget .tabulator {
    background: var(--sk-surface, #FFFFFF);
    border: 1px solid var(--sk-border, #E4E6EF);
    border-radius: var(--sk-radius, 12px);
    box-shadow: var(--sk-shadow-sm, 0 1px 2px rgba(14, 14, 40, .06));
    overflow: hidden;
}

.tabulator-listing-widget .tabulator .tabulator-header {
    border-top-left-radius: var(--sk-radius, 12px);
    border-top-right-radius: var(--sk-radius, 12px);
}

.tabulator-listing-widget .tabulator .tabulator-header .tabulator-col:first-child {
    border-top-left-radius: var(--sk-radius, 12px);
}

/* ── Hauteurs ───────────────────────────────────────────────────────────────
   L'en-tête mesurait 96 px et les lignes 61 px parce que personne ne les
   décidait : c'était la somme des rembourrages et de la taille du texte. La
   hauteur vient maintenant du jeton, et le rembourrage s'efface devant lui.

   --sk-thead-h gouverne la bande de titres. Quand une colonne porte un filtre,
   la bande de filtres s'ajoute en dessous : le jeton reste le plancher, pas le
   plafond, sinon le champ de saisie deviendrait inutilisable. */
.tabulator-listing-widget .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    box-sizing: border-box;
    min-height: var(--sk-thead-h, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
}

.tabulator-listing-widget .tabulator .tabulator-header-filter {
    display: flex;
    align-items: center;
}

.tabulator-listing-widget .tabulator .tabulator-header-filter input,
.tabulator-listing-widget .tabulator .tabulator-header-filter select {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    font-size: .8rem;
    border-radius: var(--sk-radius-sm, 8px);
}

/* Tabulator fige la hauteur des lignes en style inline, mais il la MESURE d'abord,
   rembourrage compris : un min-height ici suffit donc à imposer le jeton, sans
   rien coder côté script. Le jeton est un plancher, pas un plafond — une cellule
   au contenu plus haut (deux boutons qui passent à la ligne) grandit au lieu
   d'être tronquée, ce qui serait le cas avec une hauteur fixe. */
.tabulator-listing-widget .tabulator-row .tabulator-cell {
    box-sizing: border-box;
    min-height: var(--sk-row-h, 52px);
    padding: calc((var(--sk-row-h, 52px) - var(--sk-tab-line-h)) / 2) 10px;
}

/* Les boutons d'une colonne d'actions sont des commandes de ligne, pas des boutons
   de formulaire : ils tiennent dans la hauteur de ligne au lieu de la dicter. */
.tabulator-listing-widget .tabulator-cell .btn {
    padding: .15rem .5rem;
    font-size: .8rem;
    line-height: 1.35;
}

/* ── Couleurs de la grille ──────────────────────────────────────────────────
   Aucune valeur hexadécimale inventée : la teinte de survol, l'alternance et
   le pied de table sortent des mêmes jetons que le reste de l'application. */
.tabulator-listing-widget .tabulator-row.tabulator-row-even { background: var(--sk-surface, #FFFFFF); }
.tabulator-listing-widget .tabulator-row:hover { background: var(--sk-primary-soft, #EAF1FE); }

.tabulator-listing-widget .tabulator-footer {
    background: var(--sk-surface-alt, #F8F9FC);
    border-top: 1px solid var(--sk-border, #E4E6EF);
    padding: .5rem .75rem;
}

/* Le paginateur ajoutait une quarantaine de pixels de large dès qu'il y avait
   plusieurs pages : il passe à la ligne plutôt que de pousser la table. */
.tabulator-listing-widget .tabulator-footer .tabulator-footer-contents,
.tabulator-listing-widget .tabulator-footer .tabulator-paginator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: visible;
}

.tabulator-listing-widget .tabulator-footer .tabulator-page {
    border-radius: var(--sk-radius-sm, 8px);
    margin: 0;
}

.tabulator-listing-widget .tabulator-footer .tabulator-page.active {
    background: var(--sk-primary, #094ED7);
    border-color: var(--sk-primary, #094ED7);
    color: var(--sk-on-primary, #FFFFFF);
}

.tabulator-listing-widget .tabulator-footer .tabulator-page-size {
    border-radius: var(--sk-radius-sm, 8px);
}

/* La colonne de numérotation est un repère, pas une donnée : elle s'efface. */
.tabulator-listing-widget .tabulator-col[tabulator-field="__rownum"],
.tabulator-listing-widget .tabulator-cell[tabulator-field="__rownum"] {
    color: var(--sk-muted, #6B6B80);
    background: var(--sk-surface-alt, #F8F9FC);
}

/* ── Barre d'outils ─────────────────────────────────────────────────────────*/
.tabulator-listing-widget .tabulator-filterbar,
.tabulator-listing-widget .tabulator-downloads { padding: .25rem 0; }

.tabulator-listing-widget .tabulator-filterbar select,
.tabulator-listing-widget .tabulator-filterbar input { min-height: 31px; }

.tabulator-listing-widget .tabulator-downloads .btn { min-width: 64px; font-weight: 600; }

.tabulator-listing-widget .tabulator-dl-label,
.tabulator-listing-widget .tabulator-fb-label {
    font-weight: 600;
    color: var(--sk-muted, #6B6B80);
}

.tabulator-listing-widget .btn,
.tabulator-listing-widget .form-control,
.tabulator-listing-widget .form-select { border-radius: var(--sk-radius-sm, 8px); }

/* Panneau « Outils » replié : sa disposition est portée par cette classe et non
   par les utilitaires de Bootstrap. Pourquoi : « .d-flex » impose
   « display:flex !important », et rien de raisonnable ne bat un !important —
   c'est exactement ce qui forçait autrefois le masquage à répondre par un autre
   !important. Ici, les deux règles sont à égalité de spécificité et c'est la
   dernière écrite, le masquage, qui l'emporte. L'ordre ci-dessous est donc
   significatif : ne pas remonter la règle de masquage au-dessus. */
.tabulator-listing-widget .tabulator-listing-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Utilitaire d'affichage PROPRE au widget. Il ne s'appelle pas « sk-is-hidden »
   à dessein : cet utilitaire-là appartient à la charte, qui n'est pas servie sur
   les pages publiques — le widget ne peut donc pas compter dessus. */
.tabulator-listing-widget .tabulator-listing-hidden { display: none; }

/* ── Éléments internes du widget ────────────────────────────────────────────*/
.tabulator-stars { color: var(--sk-rating, #f0ad4e); letter-spacing: 1px; }

.tabulator-progress {
    background: var(--sk-border, #E4E6EF);
    border-radius: var(--sk-radius-sm, 8px);
    height: 10px;
    overflow: hidden;
    width: 100%;
}

.tabulator-progress > span {
    display: block;
    height: 100%;
    background: var(--sk-primary, #094ED7);
}

.tabulator-button-icon {
    padding: 0.1rem 0.35rem;
    line-height: 1;
}

.tabulator-image-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--sk-radius-sm, 8px);
    cursor: pointer;
    border: 1px solid var(--sk-border, #E4E6EF);
    background: var(--sk-surface-alt, #F8F9FC);
}

.tabulator-image-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--sk-overlay, rgba(0, 0, 0, 0.6));
    z-index: 1055;
    padding: 1rem;
}

.tabulator-image-modal.show { display: flex; }

.tabulator-image-modal .tabulator-image-modal-content {
    background: var(--sk-surface, #FFFFFF);
    border-radius: var(--sk-radius-sm, 8px);
    padding: 0.75rem;
    max-width: 92vw;
    max-height: 92vh;
    position: relative;
    box-shadow: var(--sk-shadow, 0 10px 30px rgba(14, 14, 40, .3));
}

.tabulator-image-modal img {
    max-width: 86vw;
    max-height: 80vh;
    display: block;
}

.tabulator-image-modal .tabulator-image-close {
    position: absolute;
    top: 6px;
    right: 6px;
}

/* Fenêtre d'édition de ligne */
.tabulator-edit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10500;
    background: var(--sk-overlay, rgba(0, 0, 0, 0.45));
    align-items: center;
    justify-content: center;
}

.tabulator-edit-modal.show { display: flex; }

.tabulator-edit-modal-content {
    background: var(--sk-surface, #FFFFFF);
    border-radius: var(--sk-radius-sm, 8px);
    padding: 1.5rem;
    max-width: 720px;
    width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--sk-shadow, 0 10px 30px rgba(14, 14, 40, .3));
}

.tabulator-edit-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
}

.tabulator-inline-saving { opacity: 0.5; pointer-events: none; }

/* ── Repli pour les pages sans charte ───────────────────────────────────────
   « sk-cards » est le vocabulaire de la charte, pas celui du widget. Ces règles
   sont enveloppées dans :where(), qui vaut une spécificité nulle : dès que la
   charte est servie, elle l'emporte sans discussion, quel que soit l'ordre de
   chargement. Elles n'existent que pour les pages publiques, où sk-ui.css
   n'est pas injecté et où une liste courte resterait sinon sans mise en page. */
/* margin-inline: 0 et non « auto » : les cartes et le tableau sont deux rendus de
   la même liste, ils doivent partir de la même gouttière que les autres blocs de
   la page. Centrées, elles décalaient la liste dès que la page était large. */
:where(.sk-cards) {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1280px;
    margin-inline: 0;
    width: 100%;
}

:where(.sk-cards.is-single) { grid-template-columns: 1fr; max-width: 760px; }

@media (max-width: 1200px) { :where(.sk-cards) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { :where(.sk-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { :where(.sk-cards) { grid-template-columns: 1fr; } }

/* ── Cartes : en-tête avec visuel (29/09/2026) ─────────────────────────────────
   Une colonne « image » (logo d'organisation, photo de boutique) devient le visuel
   de la carte, à côté du titre ; sans image, les initiales du titre. */
.sk-cards-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; }
.sk-cards-head .sk-cards-title { margin: 0; min-width: 0; overflow-wrap: anywhere; display: block; text-align: start; flex: 1 1 auto; }
.sk-cards-media {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; border: 1px solid #E6E8F0;
    background: #fff; display: grid; place-items: center; overflow: hidden;
}
.sk-cards-media img { max-width: 88%; max-height: 88%; object-fit: contain; }
.sk-cards-media.is-initials { background: #EEF3FF; color: #094ED7; font-weight: 700; font-size: 1.1rem; }
.sk-cards-value a { color: #094ED7; text-decoration: none; }
.sk-cards-value a:hover { text-decoration: underline; }

/* ── Liens vers l'objet d'une ligne (06/10/2026) ───────────────────────────────
   Une cellule qui porte un identifiant de commande, de devis, d'offre… devient un lien ;
   une ligne dont l'identifiant est masqué porte un bouton « Voir … » ; la ligne pour
   laquelle la page a été ouverte (?booking=…) se met en évidence ; la légende dit de quoi
   il s'agit quand rien au-dessus ne le dit. Voir Scripts/tabulator-liens.js. */
.tabulator-listing-widget a.sk-lien-objet { color: var(--sk-primary, #094ED7); text-decoration: none; font-weight: 600; border-bottom: 1px dotted currentColor; }
.tabulator-listing-widget a.sk-lien-objet:hover { text-decoration: none; border-bottom-style: solid; }
.tabulator-listing-widget .sk-lien-objet-btn { white-space: nowrap; }
.tabulator-listing-widget .tabulator-row.sk-row-cible { background: #FFF7E6 !important; box-shadow: inset 3px 0 0 var(--sk-primary, #094ED7); }
.sk-cards .sk-cards-item.is-cible { border-color: var(--sk-primary, #094ED7); box-shadow: 0 0 0 2px rgba(9, 78, 215, .18); }
.sk-cards .sk-cards-value a.sk-lien-objet { font-weight: 600; }
.sk-tab-caption { display: flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: var(--sk-fg, #0E0E28); margin: 0 0 .5rem; }
.sk-tab-caption .fa { color: var(--sk-muted, #6B6B80); font-size: .85em; }