/* Kanban drag, for the pointer-events boards. See js/suiteDrag.js.
 *
 * ⚠️ ITS OWN FILE, NOT app.css. app.css is the MINIFIED OUTPUT of the Tailwind build
 * (`npm run build:css` -> wwwroot/css/app.css), so anything appended to it is silently
 * discarded the next time that runs. It was, and the result was a drag that did nothing
 * anywhere: without .is-dragging there is no `pointer-events: none`, so elementsFromPoint
 * returns the card being dragged instead of the column underneath it, no column is ever
 * found, and no drop is ever reported. On desktop as well as on a tablet.
 *
 * These are a handful of plain rules rather than Tailwind utilities, so they have no business
 * in the generated file in the first place.
 */

/* ⚠️ THE HANDLE IS A SEPARATE CONTROL FROM THE CARD, and that is not decoration.
 *
 * `touch-action: none` is what stops the browser claiming the gesture for scrolling - without
 * it a drag never starts on a touch device. But putting it on the WHOLE card means a finger
 * landing anywhere on a card can no longer scroll the board, and these boards scroll
 * horizontally across four or more columns. The card would become a hole you cannot swipe
 * past.
 *
 * So the grip owns touch-action, and the rest of the card still scrolls and still taps -
 * which matters most on Leads, where the card is also a link. */
.drag-grip {
    touch-action: none;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 28px is below the 44px ideal, but these cards are small and a bigger grip would cover
     * the content. It is a deliberate compromise on a desktop-first screen that must also
     * work on a tablet, not an oversight. */
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    color: rgb(148 163 184);
    font-size: 14px;
    line-height: 1;
    user-select: none;
    flex: none;
}

.drag-grip:hover {
    color: rgb(100 116 139);
    background-color: rgb(241 245 249);
}

.drag-grip:active {
    cursor: grabbing;
}

.dark .drag-grip:hover {
    color: rgb(203 213 225);
    background-color: rgb(51 65 85);
}

[data-card-id].is-dragging {
    /* Lifted out of the flow and above everything, following the finger.
     *
     * ⚠️ pointer-events: none is LOAD-BEARING. Without it elementsFromPoint returns this card
     * rather than the column beneath it, so no drop target is ever found and the drag silently
     * does nothing. */
    position: fixed;
    z-index: 50;
    opacity: 0.9;
    pointer-events: none;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
}

[data-drop-column].is-drop-target {
    /* The whole column lights up, not a thin line between cards. On a touch screen the finger
     * covers the gap it is aiming at, so the feedback has to be bigger than the target. */
    outline: 2px solid rgb(45 212 191);
    outline-offset: -2px;
    border-radius: 0.75rem;
}