/* The seating canvas (wwwroot/seating.js) on a storefront: the same rules as the admin's app.css, which the storefront does not load. */
.sp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 12px 0 4px;
    font-size: .8rem;
}

.sp-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    color: #fff;
    background: #2563eb;
    border-radius: 50%;
}

.sp-key-wheelchair {
    background: #0369a1;
}

.sp-key-blocked {
    background: #cbd5e1;
}

.sp-key-removed {
    background: none;
    border: 1.5px dashed #94a3b8;
}

.sp-key-picked {
    background: #0f172a;
    border: 2px solid #fbbf24;
}

.sp-tip {
    position: absolute;
    z-index: 2;
    padding: 4px 8px;
    font-size: .75rem;
    white-space: nowrap;
    color: #fff;
    background: rgba(15, 23, 42, .9);
    border-radius: 4px;
    pointer-events: none;
}

/* The drawing (wwwroot/seating.js). Sizes are plan units; --sp-px is a screen pixel in plan units, for what keeps its size on screen. */
.sp-svg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.sp-grid-line {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.sp-mode-preview .sp-grid {
    display: none;
}

.sp-area-fill {
    stroke: rgba(15, 23, 42, .15);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.sp-area-label {
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.sp-block {
    fill-opacity: 0;
}

.sp-seat {
    stroke: #fff;
    stroke-width: .6;
}

.sp-wheelchair {
    fill: #0369a1;
}

.sp-blocked {
    fill: #cbd5e1;
}

/* Transparent rather than none: the whole circle takes clicks, so a place without a seat can be made a seat again. */
.sp-removed {
    fill: transparent;
    stroke: #94a3b8;
    stroke-width: .6;
    stroke-dasharray: 1.5 1.2;
}

.sp-glyph {
    fill: #fff;
    pointer-events: none;
}

.sp-blocked-cross {
    fill: none;
    stroke: #64748b;
    stroke-width: 3;
    stroke-linecap: round;
}

.sp-seat.sp-painting {
    stroke: #0f172a;
    stroke-width: 1.6;
}

.sp-seat.sp-picked {
    fill: #0f172a;
    stroke: #fbbf24;
    stroke-width: 1.4;
}

.sp-name,
.sp-name-far,
.sp-count-far,
.sp-row-label,
.sp-num {
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.sp-name {
    font-weight: 700;
    fill: #334155;
}

.sp-name-far,
.sp-count-far {
    display: none;
    font-weight: 700;
    fill: #0f172a;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: calc(3px * var(--sp-px, 1));
}

.sp-count-far {
    font-weight: 500;
}

.sp-row-label {
    display: none;
    font-weight: 600;
    fill: #64748b;
}

.sp-rows .sp-row-label {
    display: inline;
}

.sp-num {
    display: none;
    font-weight: 600;
    fill: #fff;
}

.sp-near .sp-num {
    display: inline;
}

/* Only the open section shows its numbers in the sections-first view. */
.sp-overview .sp-num,
.sp-focus .sp-sec-labels:not(.sp-open) .sp-num {
    display: none;
}

/* Far away (seats of a few pixels) and in the sections-first view: blocks with names instead of seats. */
.sp-far .sp-sec-seats,
.sp-overview .sp-sec-seats,
.sp-focus .sp-sec-seats:not(.sp-open) {
    display: none;
}

.sp-far .sp-block,
.sp-overview .sp-block {
    fill-opacity: .45;
}

.sp-far .sp-bg,
.sp-overview .sp-bg,
.sp-focus .sp-sec-block:not(.sp-open) .sp-bg {
    display: none;
}

.sp-far .sp-name,
.sp-far .sp-row-label,
.sp-overview .sp-name,
.sp-overview .sp-row-label,
.sp-focus .sp-sec-labels:not(.sp-open) .sp-name,
.sp-focus .sp-sec-labels:not(.sp-open) .sp-row-label {
    display: none;
}

.sp-far .sp-name-far,
.sp-overview .sp-name-far,
.sp-overview .sp-count-far,
.sp-focus .sp-sec-labels:not(.sp-open) .sp-name-far {
    display: inline;
}

.sp-focus .sp-sec-block:not(.sp-open) .sp-block {
    fill-opacity: .25;
}

/* What can be clicked or dragged in each mode. */
.sp-mode-layout .sp-sec-block,
.sp-mode-layout .sp-sec-seats,
.sp-mode-layout .sp-area {
    cursor: move;
}

.sp-mode-layout .sp-sec-block:hover .sp-block {
    fill-opacity: .06;
    stroke: #2563eb;
    stroke-width: calc(1.5px * var(--sp-px, 1));
}

.sp-mode-layout .sp-area:hover .sp-area-fill {
    stroke: #2563eb;
    stroke-width: 1.5;
}

.sp-mode-seats .sp-seat,
.sp-mode-preview .sp-seat:not(.sp-blocked) {
    cursor: pointer;
}

.sp-mode-seats .sp-seat:hover,
.sp-mode-preview .sp-seat:not(.sp-blocked):hover {
    stroke: #0f172a;
    stroke-width: 1.2;
}

.sp-mode-preview .sp-removed {
    display: none;
}

.sp-mode-preview .sp-blocked {
    cursor: not-allowed;
}

.sp-mode-seats .sp-area,
.sp-mode-preview .sp-area {
    pointer-events: none;
}

.sp-far .sp-sec-block,
.sp-overview .sp-sec-block,
.sp-focus .sp-sec-block:not(.sp-open) {
    cursor: pointer;
}

.sp-overview .sp-sec-block:hover .sp-block,
.sp-focus .sp-sec-block:not(.sp-open):hover .sp-block {
    fill-opacity: .7;
}

.sp-panning,
.sp-panning * {
    cursor: grabbing !important;
}

/* The selection: its outline and the handles to turn, resize and pull corners. */
.sp-outline {
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.sp-handle {
    r: calc(6px * var(--sp-px, 1));
    fill: #fff;
    stroke: #2563eb;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.sp-handle-rotate {
    fill: #2563eb;
    cursor: grab;
}

.sp-handle-scale,
.sp-handle-resize {
    cursor: nwse-resize;
}

.sp-handle-corner,
.sp-handle-vertex {
    fill: #fde68a;
    cursor: crosshair;
}

.sp-handle-vertex.sp-active {
    fill: #f59e0b;
}

.sp-marquee {
    fill: rgba(37, 99, 235, .08);
    stroke: #2563eb;
    stroke-width: 1;
    stroke-dasharray: 4 2;
    vector-effect: non-scaling-stroke;
}