/**
 * Seating area, legend, action panel, messages, ticket status.
 *
 * Split from public/css/cashier.css (2,091 lines). Cascade order matters:
 * load these in the numbered order, exactly as the original file was ordered.
 */

/* ===== SEATING AREA STYLES ===== */
.seating-container {
    position: relative;
    /* A hall wider than the screen scrolls rather than being clipped - which is what
       `hidden` did, silently cutting seats off the left of a wide plan. */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 30px 0px 30px;
}

/* One canvas per hall, drawn from the plan's grid coordinates. Sizes live here as
   variables so a wide layout can be scaled down by overriding two values. */
:root {
    --seat-size: 32px;
    --seat-gap: 3px;
    --row-label-width: 34px;
}

.hall {
    position: relative;
}

.hall-sideways {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* A line of canvas with no seats on it - the gap between two blocks, or floor beside an
   in-the-round stage. Kept as a row so the vertical rhythm matches the plan. */
.row-blank {
    height: calc(var(--seat-size) + var(--seat-gap) * 2);
}

/* Where one seating block ends and the next begins. Emitted only when the plan leaves a
   blank row at that boundary - see renderSeatingLayout in js/cashier/02-seating.js - so
   this deepens a separation the author asked for rather than inventing one. */
.section-break {
    height: 20px;
}

/* Row numbers for sections seated sideways, drawn over the columns they name rather than
   in the side gutters. Sized off the seat so a number sits on its own column; the two
   .row-label spacers keep the strip aligned with the gutters either side. */
.col-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
}

.col-number {
    width: var(--seat-size);
    margin: var(--seat-gap);
    flex: none;
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow: hidden;
}

.stage-row {
    margin: 10px 0;
}

.stage-bar {
    padding: 6px 0;
    background: linear-gradient(135deg, #495057, #343a40);
    color: white;
    text-align: center;
    border-radius: 6px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.35em;
}

.stage-bar-vertical {
    writing-mode: vertical-rl;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 12px;
    padding: 0 6px;
}

/* An in-the-round stage stands among the seats, so it is drawn over them. */
.stage-overlay {
    position: absolute;
    background: linear-gradient(135deg, #495057, #343a40);
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.3em;
    pointer-events: none;
    z-index: 2;
}

/* What the audience sits on, shown in the seat's shape: an armchair keeps the rounded
   square, a loose chair is squarer, a cushion is round. */
.seat[data-seat-type="chair"] { border-radius: 2px; }
.seat[data-seat-type="pillow"] { border-radius: 40%; }

/* The hall sits in the middle of the seat panel rather than hanging off its top edge.
   Vertical centring needs a box to centre in, hence the min-height - a plan that uses
   six of its thirty rows would otherwise have nothing to be centred against. Horizontal
   centring is per row (.row below), which keeps a hall wider than the panel scrollable;
   centring it here instead would put its left edge out of reach. */
.seating-area {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40vh;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-seating {
    margin-top: 20px;
}

.balcony {
    margin-top: 20px;
}

.section-title {
    text-align: center;
    font-size: 1.2em;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
    display: none;
}

.row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.row-label {
    width: var(--row-label-width);
    text-align: center;
    font-weight: bold;
    color: var(--text-secondary);
    margin: 2px;
    flex: none;
    line-height: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seat {
    width: var(--seat-size);
    height: var(--seat-size);
    margin: var(--seat-gap);
    background: var(--seat-status-default);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
}

.seat.available {
    background: var(--seat-status-available);
}

.seat.available:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}

.seat.occupied {
    background: var(--seat-status-sold);
    cursor: pointer;
}

.seat.occupied:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.seat.reserved {
    background: var(--seat-status-reserved);
    cursor: pointer;
}

.seat.reserved:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}

.seat.sold {
    background: var(--seat-status-sold);
    cursor: pointer;
}

.seat.sold:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.seat.partner-sold {
    background: #cc0033;
    cursor: not-allowed;
}

.seat.partner-reserved {
    background: #ff7700 !important;
    cursor: not-allowed;
}

.seat.partner-sold:hover,
.seat.partner-reserved:hover {
    transform: none;
    box-shadow: none;
}

.seat.selected {
    background: var(--seat-status-selected);
    animation: pulse 0.6s ease-in-out;
}

.seat.blocked {
    opacity: 0.3;
    cursor: not-allowed;
}

.seat.blockedout {
    background: #495057;
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.gap {
    width: var(--seat-size);
    flex: none;
    margin: var(--seat-gap);
}

/* ===== LEGEND STYLES ===== */
.legend {
    display: none;
    justify-content: center;
    gap: 30px;
    margin: 0px 0 30px 0;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #2c3e50;
}

.legend-seat {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

/* ===== ACTION PANEL STYLES ===== */
.action-panel {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 20px;
    margin: 15px 30px;
    border-radius: 15px;
    text-align: center;
}

.selected-seats {
    margin-top: 15px;
    font-size: 1.1em;
}

.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.discount-input-container {
    display: flex;
    align-items: center;
}

/* The class sets display, which would otherwise beat the browser's own [hidden] rule
   and leave the box on screen for events that have no discount to apply. */
.discount-input-container[hidden] {
    display: none;
}

.discount-input-container input {
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    width: 60px;
    transition: all 0.3s ease;
}

.discount-input-container input:focus {
    outline: none;
    border-color: #fdcb6e;
    background: white;
    box-shadow: 0 0 10px rgba(253, 203, 110, 0.5);
}

.action-btn {
    background: linear-gradient(135deg, #fd79a8, #fdcb6e);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1.2em;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    box-shadow: 0 8px 25px rgba(253,121,168,0.3);
    display: inline-block;
}

.action-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(253,121,168,0.4);
}

.action-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.reserve-btn {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
}

.reserve-btn:hover:not(:disabled) {
    box-shadow: 0 12px 35px rgba(116, 185, 255, 0.4);
}

/* A cousin of Reserve - it makes the same reservation - so it takes the blue family,
   shifted to violet so the two are not mistaken for each other at a glance. */
.abonement-btn {
    background: linear-gradient(135deg, #a29bfe, #6c5ce7);
}

.abonement-btn:hover:not(:disabled) {
    box-shadow: 0 12px 35px rgba(108, 92, 231, 0.4);
}

.return-btn {
    background: linear-gradient(135deg, #e17055, #fdcb6e);
}

.return-btn:hover:not(:disabled) {
    box-shadow: 0 12px 35px rgba(225, 112, 85, 0.4);
}

/* ===== MESSAGE STYLES ===== */
.message {
    padding: 10px 25px;
    margin: 15px auto -15px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    max-width: 700px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== TICKET GENERATION STATUS STYLES ===== */
.ticket-status-container {
    max-width: 700px;
    margin: 15px auto -15px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 2px solid #2196f3;
    border-radius: 8px;
    padding: 15px 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    animation: slideDown 0.5s ease-out;
    font-weight: bold;
    text-align: center;
}

.ticket-status-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.ticket-status-icon {
    font-size: 1.4em;
    color: #2196f3;
}

.ticket-status-icon.success {
    color: #4caf50;
}

.ticket-status-icon.error {
    color: #f44336;
}

.ticket-status-text {
    flex: 1;
    text-align: left;
}

.ticket-status-title {
    font-size: 1.1em;
    color: #1565c0;
    margin-bottom: 5px;
}

.ticket-status-title.success {
    color: #2e7d32;
}

.ticket-status-title.error {
    color: #c62828;
}

.ticket-status-description {
    font-size: 0.9em;
    color: #666;
    font-weight: normal;
}