/* SINBAD WORLD SPATIAL R1C-R1
 * CELL SET INTERACTION REPAIR
 */

.sinbad-cellset-panel {
    position: absolute;
    top: 160px;
    left: 380px;
    z-index: 1200;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 8px;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 20px rgba(15,23,42,.10);

    font-size: 12px;
    white-space: nowrap;
}

.sinbad-cellset-panel button {
    min-height: 28px;
    padding: 4px 9px;

    border: 1px solid #cbd5e1;
    border-radius: 999px;

    background: #fff;
    color: #334155;

    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.sinbad-cellset-panel button:disabled {
    opacity: .42;
    cursor: default;
}

.sinbad-cellset-panel.is-selecting #sinbadCellSetToggle {
    border-color: #e11d48;
    color: #e11d48;
    background: #fff1f2;
}

.sinbad-cellset-count {
    min-width: 44px;
    font-weight: 850;
    color: #475569;
}

.sinbad-cellset-ref {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;

    color: #0f172a;
    font-family: Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
}

.leaflet-container.sinbad-cellset-selecting {
    cursor: crosshair !important;
}

/*
 * Critical R1C-R1 interaction fix:
 * while selecting an AREA, the single draggable SWC1 rectangle
 * must not intercept pointer/click events.
 */
.leaflet-container.sinbad-cellset-selecting .sinbad-world-cell-boundary {
    pointer-events: none !important;
}

.leaflet-interactive.sinbad-cellset-member,
.sinbad-cellset-member {
    stroke: #e11d48;
    stroke-width: 2;
    fill: #fb7185;
    fill-opacity: .14;
    pointer-events: none !important;
}

@media all and (max-width: 900px) {
    .sinbad-cellset-panel {
        left: 10px;
        right: 10px;
        top: 168px;
        max-width: calc(100% - 20px);
        overflow-x: auto;
    }

    .sinbad-cellset-ref {
        max-width: 120px;
    }
}