/* ===================================================================
   table-scroll.css — Composant partagé Moamoa
   Scroll horizontal des tableaux de listing (marketplace + CMS + admin),
   avec contrôles ◀ ▶ visibles EN HAUT et EN BAS. Activé par js/table-scroll.js.
   100% cosmétique. Les contrôles n'apparaissent que s'il y a débordement.
   =================================================================== */
.table-scroll-wrap { position: relative; }
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-scroll-ctrl {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem .25rem;
}
.table-scroll-wrap.has-overflow .table-scroll-ctrl { display: flex; }
.table-scroll-ctrl--top { margin-bottom: .35rem; }
.table-scroll-ctrl--bottom { margin-top: .35rem; }
.table-scroll-hint {
    font-size: .72rem;
    color: inherit;
    opacity: .6;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.table-scroll-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 9px;
    border: 1px solid rgba(128,128,128,.35);
    background: rgba(255,255,255,.96);
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    line-height: 1;
    transition: background .15s, border-color .15s, opacity .15s;
}
.table-scroll-btn:hover:not(:disabled) { background: #fff; border-color: #d63384; color: #d63384; }
.table-scroll-btn:disabled { opacity: .3; cursor: default; }