/*
 * This file is part of pretix-wikubi-seating.
 * Copyright (C) 2026 Valentin Bischof
 * Licensed under the GNU Affero General Public License v3 or later.
 */

.seatmap [hidden] {
    display: none;
}

.seatmap-status {
    padding: 1em 0;
    color: #555;
}

.seatmap-status.seatmap-status-error {
    color: #a94442;
}

/* --- pan and zoom --- */

.seatmap-zoom-controls {
    display: flex;
    justify-content: flex-end;
    gap: .25em;
    margin-top: .25em;
}

.seatmap-zoom-controls .btn {
    min-width: 2.2em;
    font-size: .9em;
    line-height: 1.2;
}

/* Only while zoomed in, otherwise the grab cursor suggests a pan that does
   nothing at the default scale. */
.seatmap-zoomed {
    cursor: grab;
}

.seatmap-zoomed:active {
    cursor: grabbing;
}

.seatmap-canvas {
    /* Small halls only: the map scales to the container width instead of
       offering pan/zoom. Very wide plans get a horizontal scrollbar. */
    overflow-x: auto;
    margin-bottom: .75em;
}

.seatmap-canvas svg {
    display: block;
    /* Capped so the map stays a component on the page rather than taking over
       the screen on a wide laptop. */
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    /* Frames the plan so it reads as one object next to the legend below it. */
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* --- seats --- */

.seatmap-seat {
    stroke: rgba(0, 0, 0, .35);
    stroke-width: 1;
}

.seatmap-seat-free {
    /* --seat-color is set per seat from the layout's category colour. */
    fill: var(--seat-color, var(--seatmap-free, #50a167));
    cursor: pointer;
}

.seatmap-seat-free:hover {
    /* Darkening works for any category colour, unlike a fixed hover fill. */
    filter: brightness(0.82);
}

/*
 * A selected seat keeps its category colour and gains a heavy dark ring. Using a
 * fixed "selected" fill would collide with any category that happens to use a
 * similar colour, which is exactly what happened with a blue category.
 */
.seatmap-seat-selected {
    fill: var(--seat-color, var(--seatmap-free, #50a167));
    stroke: var(--seatmap-selected, #111827);
    stroke-width: 4;
    cursor: pointer;
}

.seatmap-seat-taken {
    fill: var(--seatmap-taken, #b5b5b5);
    cursor: not-allowed;
}

.seatmap-seat-blocked {
    fill: var(--seatmap-blocked, #e0e0e0);
    stroke-dasharray: 3 2;
    cursor: not-allowed;
}

.seatmap-seat-unavailable {
    fill: var(--seatmap-unavailable, #e0e0e0);
    stroke-dasharray: 3 2;
    cursor: not-allowed;
}

/* :focus-visible, not :focus. With plain :focus a clicked seat keeps the ring
   until you click somewhere else, which reads as "deselecting is slow". */
.seatmap-seat:focus {
    outline: none;
}

.seatmap-seat:focus-visible {
    outline: none;
    stroke: #12456d;
    stroke-width: 3;
}

/* Wheelchair symbol on top of a seat. Font Awesome 4.7 ships with pretix. */
.seatmap-wheelchair {
    font-family: FontAwesome;
    font-size: 14px;
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
}

/* Row number left of each row, mirroring the generator preview. */
.seatmap-row-label {
    fill: #999;
    font-family: inherit;
    font-size: 12px;
    text-anchor: end;
    dominant-baseline: middle;
    pointer-events: none;
    user-select: none;
}

.seatmap-area {
    pointer-events: none;
}

.seatmap-area-text {
    fill: #666;
    font-family: inherit;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

/* --- legend --- */

.seatmap-legend {
    list-style: none;
    padding: 0;
    margin: 0 0 .75em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3em 1em;
}

.seatmap-legend li {
    display: flex;
    align-items: center;
    gap: .35em;
    font-size: .8em;
    color: #555;
}

.seatmap-swatch {
    display: inline-block;
    width: .8em;
    height: .8em;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .35);
    flex: none;
}

.seatmap-legend-icon {
    margin-left: -.15em;
    color: #555;
}

.seatmap-swatch-free {
    background: var(--seatmap-free, #50a167);
}

/* Mirrors the ring used on the map rather than a colour that could clash. */
.seatmap-swatch-selected {
    background: #b9c2cc;
    border: 3px solid var(--seatmap-selected, #111827);
}

.seatmap-swatch-taken {
    background: var(--seatmap-taken, #b5b5b5);
}

.seatmap-swatch-blocked {
    background: var(--seatmap-blocked, #e0e0e0);
    border-style: dashed;
}

.seatmap-swatch-unavailable {
    background: var(--seatmap-unavailable, #e0e0e0);
}

/* --- selection --- */

.seatmap {
    /* Keep the whole picker in one readable column instead of full page width. */
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.seatmap-selection {
    margin-bottom: .75em;
}

.seatmap-selection-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .9em;
}

/* Wrapping, because a long tier name plus price plus two buttons does not fit next
   to the seat label in a 560px column. Whatever no longer fits moves to a second
   line instead of squeezing the seat label into a sliver that breaks mid-label. */
.seatmap-selection-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15em .6em;
    padding: .4em 0;
    border-bottom: 1px solid #eee;
}

/* Asks for 12em and grows into whatever is left, which keeps the price and the
   buttons at the right edge. Below 12em the rest of the row wraps, not the label. */
.seatmap-selection-seat {
    flex: 1 1 12em;
    min-width: 0;
}

.seatmap-selection-price {
    flex: none;
    font-variant-numeric: tabular-nums;
}

/* The tier chosen in the dialog, shown back in the selection list. It may shrink and
   wrap; the seat label and the price are the parts that have to stay readable. */
.seatmap-selection-tier {
    flex: 0 1 auto;
    min-width: 0;
    font-size: .9em;
    color: #555;
}

.seatmap-selection-change {
    flex: none;
    padding: 0;
}

.seatmap-total {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: .5em 0;
}

.seatmap-total-value {
    font-variant-numeric: tabular-nums;
}

.seatmap-selection-empty {
    color: #777;
    font-style: italic;
}

.seatmap-actions .btn {
    /* The stock btn-lg block button dwarfs everything else on the page. */
    font-size: 1em;
    padding: .5em 1em;
}


/* ---------- Tier dialog ---------- */

.seatmap-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background: rgba(0, 0, 0, .5);
}

.seatmap-modal {
    width: 100%;
    max-width: 34em;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}

.seatmap-modal-header {
    display: flex;
    align-items: baseline;
    gap: 1em;
    padding: 1em 1.2em;
    border-bottom: 1px solid #e5e5e5;
}

.seatmap-modal-title {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: .5em;
    min-width: 0;
    font-size: 1.15em;
}

.seatmap-modal-dot {
    flex: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
}

.seatmap-modal-close {
    flex: none;
    padding: 0 .2em;
    font-size: 1.2em;
    line-height: 1;
    color: #555;
    background: none;
    border: 1px solid transparent;
}

.seatmap-modal-close:focus-visible {
    border-color: #337ab7;
}

.seatmap-modal-body {
    padding: .5em 1.2em;
}

.seatmap-modal-footer {
    padding: .6em 1.2em;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

/* Confirm dialog: the seats a save is about to block or release. */
.seatmap-change-group + .seatmap-change-group {
    margin-top: .9em;
}

.seatmap-change-group h5 {
    margin: 0 0 .3em;
}

.seatmap-change-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .9em;
}

.seatmap-change-list li {
    padding: .15em 0;
}

/* Two columns so the price buttons line up; a revealed description spans both. */
.seatmap-tier-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .4em 1em;
    padding: .55em 0;
}

.seatmap-tier-row + .seatmap-tier-row {
    border-top: 1px solid #f0f0f0;
}

.seatmap-tier-label {
    display: flex;
    align-items: center;
    gap: .4em;
    min-width: 0;
}

.seatmap-tier-name {
    min-width: 0;
}

.seatmap-tier-price {
    flex: none;
    min-width: 8em;
    font-variant-numeric: tabular-nums;
}

.seatmap-tier-description {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .85em;
    color: #666;
}

@media (max-width: 480px) {
    .seatmap-modal-header {
        flex-wrap: wrap;
        gap: .5em 1.2em;
    }

    .seatmap-modal-title {
        flex: 1 1 100%;
        order: -1;
    }

    .seatmap-tier-price {
        min-width: 6em;
    }
}