/* Kanban scroller — adds synced top scrollbar + left/right arrows around any
   horizontally-scrolling lane container. Pages opt in by wrapping the lanes
   in <div data-kanban-scroll>...</div>. JS finds them at load time. */

.rt-kanban-wrap {
    position: relative;
}

/* Arrow buttons — overlay on left/right edge, hidden on touch devices. */
.rt-kanban-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #212529;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.rt-kanban-arrow:hover { background: #f8f9fa; }
.rt-kanban-arrow:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.rt-kanban-arrow[disabled] { opacity: 0.35; cursor: default; }

.rt-kanban-arrow--left  { left: -8px; }
.rt-kanban-arrow--right { right: -8px; }

@media (hover: none) and (pointer: coarse) {
    /* Touch devices — swipe is natural, hide arrows. */
    .rt-kanban-arrow { display: none; }
}

/* Top scrollbar — a thin proxy element that mirrors the lane container's
   scrollWidth. Native scrollbar handles the bottom. */
.rt-kanban-topbar {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin-bottom: 4px;
    /* Always reserve a track so it doesn't appear/disappear awkwardly. */
    scrollbar-gutter: stable;
}
.rt-kanban-topbar-inner { height: 1px; }

/* Ensure the lane container always shows a bottom scrollbar when overflowing. */
.rt-kanban-lanes { scrollbar-gutter: stable; }