.pretix-seatmap {
    margin: 1em 0;
}

.pretix-seatmap-underline-link {
    text-decoration: underline;
}

.pretix-seatmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 0.75em;
    font-size: 0.9em;
}

.pretix-seatmap-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.pretix-seatmap-legend-item i {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    border: 2px solid transparent;
    background-color: #fff;
    box-sizing: border-box;
}

.pretix-seat-taken-swatch {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
}

.pretix-seatmap-legend-swatch {
    display: inline-block;
    vertical-align: middle;
}

.pretix-seatmap-svg {
    width: 100%;
    max-height: 70vh;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.pretix-seat {
    fill: #fff;
    stroke-width: 2;
    cursor: pointer;
}

.pretix-seat-taken {
    fill: #cccccc;
    stroke: #cccccc;
    cursor: not-allowed;
}

.pretix-seat-available:hover {
    stroke-width: 3;
}

.pretix-seat-selected {
    fill: #2a6df4;
    stroke: #000;
    stroke-width: 2;
}

.pretix-seatmap-selection {
    margin-top: 0.5em;
}

.pretix-seatmap-summary-text {
    font-weight: bold;
}

.pretix-seatmap-selection-row {
    margin-top: 0.35em;
}

.pretix-seatmap-variation-select {
    margin-left: 0.4em;
}

.pretix-seatmap-submit {
    margin-top: 1em;
}

.pretix-seatmap-admin-seat {
    fill: #fff;
    stroke-width: 2;
    cursor: pointer;
}

.pretix-seatmap-admin-seat:hover {
    stroke-width: 3;
}

.pretix-seatmap-admin-seat-blocked {
    fill: #ff6666;
    stroke: #ff6666;
}

.pretix-seatmap-admin-seat-taken {
    fill: #cccccc;
    stroke: #cccccc;
    cursor: not-allowed;
}

.pretix-seatmap-admin-seat-unmapped {
    fill: #eeeeee;
    stroke: #e6a100;
    stroke-width: 2;
    stroke-dasharray: 3, 2;
    cursor: not-allowed;
}

/* !important on all three below because the base .pretix-seatmap-legend-item i
   rule (a class + element selector) outscores these single-class selectors -
   without it, its transparent border/white background silently wins and
   these swatches render blank. */
.pretix-seatmap-admin-legend-blocked {
    background-color: #ff6666 !important;
    border-color: #ff6666 !important;
}

.pretix-seatmap-admin-legend-unmapped {
    background-color: #eeeeee !important;
    border: 2px dashed #e6a100 !important;
}

/* !important because pretix's own admin CSS resets fieldset margin/padding
   to 0 - a plain inline style lost that fight. */
.pretix-seatmap-admin-section {
    margin-bottom: 3em !important;
    padding-bottom: 2em !important;
    border-bottom: 1px solid #ddd !important;
}

/* Bootstrap's default thead border-collapses inconsistently with the
   actions column's display:flex <td> below it, rendering thicker under
   "Name" than under the rest of the header - remove it outright rather
   than fight the mismatch. */
.pretix-seatmap-admin-plans-table > thead > tr > th {
    border-bottom: none;
}

/* Bootstrap's .table has a 20px margin-bottom, which sat below the last
   row and made it read as taller than the others. */
.pretix-seatmap-admin-plans-table {
    margin-bottom: 0;
}

.pretix-seatmap-current-plan-body {
    display: flex;
    align-items: center;
}

.pretix-seatmap-current-plan-text {
    margin: 0;
}

/* Bootstrap's table cells default to vertical-align: top, which left the
   name and action buttons pinned to the top of rows that end up taller
   than their content (e.g. the "In use" row's extra badge/button).
   !important because Bootstrap's own `.table > tbody > tr > td` rule
   outscores a single class selector (3 type selectors vs. none). */
.pretix-seatmap-admin-plan-row,
.pretix-seatmap-admin-plan-actions {
    vertical-align: middle !important;
}

/* pretix's CSP has no 'unsafe-inline' for style-src (and its nonce only
   covers <style> blocks, not style="" attributes), so inline styles are
   silently dropped - this has to live in the stylesheet, not the template. */
.pretix-seatmap-admin-plan-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5em;
}

.pretix-seatmap-admin-rename-form {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.pretix-seatmap-admin-rename-form .form-group {
    margin-bottom: 0;
    width: 14em;
}

.pretix-seatmap-admin-rename-input {
    width: 100%;
}

/* The edit button comes first in DOM order (see template) so it always
   sits at the same fixed spot right after the cell's left edge, regardless
   of how long each plan's name is - no need for space-between tricks. */
.pretix-seatmap-admin-plan-name-display {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.pretix-seatmap-admin-plan-name-text {
    overflow-wrap: anywhere;
}

.pretix-seatmap-admin-rename-toggle {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #31708f;
    flex-shrink: 0;
}

.pretix-seatmap-admin-rename-toggle:hover,
.pretix-seatmap-admin-rename-toggle:focus {
    background-color: rgba(49, 112, 143, 0.08);
    color: #31708f;
}

/* Used to toggle between the plain name display and the rename form -
   !important because it has to win regardless of the display:flex rules
   above, which have equal class specificity. */
.pretix-seatmap-admin-toggle-hidden {
    display: none !important;
}

/* Row for the in-use plan keeps its Assign/Delete buttons in the DOM (so
   every row has identical height) but visually hides them - visibility:
   hidden (not display:none) preserves their box and takes them out of the
   tab order/accessibility tree. Scoped to the action forms specifically
   (not "*") so the "In use" label in the same cell stays visible. */
.pretix-seatmap-admin-plan-actions-hidden .pretix-seatmap-admin-plan-action-form,
.pretix-seatmap-admin-plan-actions-hidden .pretix-seatmap-admin-plan-action-form * {
    visibility: hidden;
}