/* Drag-out — a map feature or grid rows carried onto a page element (drag-out.js). The ghost follows the cursor
   and is pointer-inert, so the release is resolved against whatever lies under it; the targets style their own
   hover through .lara-drop-over, because only the page knows what a target looks like. */

.lara-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    max-width: 420px;
    padding: 5px 10px 5px 8px;
    border: 1px solid var(--lara-border-light);
    border-radius: var(--lara-radius-md);
    background: var(--lara-surface, #fff);
    box-shadow: 0 6px 20px rgba(12, 61, 130, 0.22);
    color: var(--lara-text-primary);
    font-size: var(--lara-font-size-body);
    white-space: nowrap;
    pointer-events: none;
}

/* A source with no name of its own for what was pressed (a grid row) shows nothing until the host says what is
   carried, a round trip later, rather than a blank chip. */
.lara-drag-ghost--pending {
    visibility: hidden;
}

.lara-drag-ghost__swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lara-primary);
}

.lara-drag-ghost__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lara-drag-ghost__title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
}

/* What is carried, one part each — for a set its vehicle, trailer and driver, on one line like the fleet row. */
.lara-drag-ghost__parts {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.lara-drag-ghost__part {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

.lara-drag-ghost__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawn as the app's asset glyphs are (.ati): an outline in the text colour, one stroke weight at any size. */
.lara-drag-ghost__icon {
    flex: none;
    width: 20px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the closed hand stays over every element the pointer crosses on its way to a target */
html.lara-dragging-out,
html.lara-dragging-out * {
    cursor: grabbing !important;
}