/* Minimal styling - almost raw HTML */

:root {
    /* Seating Chart Measurements - Single Source of Truth */
    --seat-size: 18px;
    --seat-gap: 3px;
    --seat-unit: 21px; /* seat-size (18px) + seat-gap (3px) = effective grid spacing */
}

body {
    background: black;
    color: white;
    font-family: serif;
    margin: 20px;
}

a {
    color: lightblue;
    text-decoration: underline;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid white;
    padding: 8px;
    text-align: left;
}

#error-message {
    color: red;
    display: none;
}

.modal {
    display: none;
}

.modal.show {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.modal-content {
    background: black;
    margin: 50px auto;
    padding: 20px;
    max-width: 500px;
    border: 1px solid white;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.form-group {
    margin: 10px 0;
}

.form-group label {
    display: block;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 4px;
}

body.theater-control {
    background: #8B5CF6;
    color: white;
}

body.theater-control a {
    color: lightblue;
}

/* Seating Chart Visualization */
.theater-container {
    padding: 0 20px 20px 20px; /* Remove top padding, keep sides and bottom */
    background: black;
    border: 1px solid white;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
}

.theater-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: min-content;
}

.screen {
    background: white;
    height: calc(var(--seat-size) / 2);
    border-radius: 2px;
    margin-bottom: var(--seat-gap); /* minimal gap — use a horizontal aisle for spacing */
}

.row-container {
    display: flex;
    justify-content: center;
    margin: 2px 0;
    white-space: nowrap;
}

.row {
    display: flex;
    gap: var(--seat-gap);
}

.seat {
    width: var(--seat-size);
    height: var(--seat-size);
    background: white;
    border: 1px solid white;
    border-radius: 2px;
    box-sizing: border-box; /* Include border in width calculation */
}

/* Interactive seat states */
.seat-available {
    background: white;
    border-color: white;
}

.seat-reserved {
    background: #666;
    border-color: #666;
}

.seat-occupied {
    background: #666;
    border-color: #666;
}

.seat-selected {
    background: #4A90E2;
    border-color: #4A90E2;
}

/* Occupancy mode - user's seat */
.seat-user {
    background: #4CAF50;
    border-color: #4CAF50;
}

/* Hover effects for interactive seats */
.seat-available:hover {
    background: #E6F2FF;
    border-color: #4A90E2;
}

.seat-selected:hover {
    background: #6BA3E8;
    border-color: #6BA3E8;
}

.vertical-aisle {
    /* Width set dynamically via JavaScript based on thickness multiplier */
    /* Formula: width = (seat × N) + (gap × (N-1)) */
    /* Default (thickness 1): 18px (matches one seat) */
    height: var(--seat-size);
    background: transparent;
    box-sizing: border-box; /* Include border in width calculation */
    flex-shrink: 0;
}

.row-container {
    display: flex;
    justify-content: center;
    margin: 2px 0;
    white-space: nowrap;
}

.horizontal-aisle {
    /* Horizontal aisle spacing between major row sections */
    /* Height set dynamically in edit mode; default matches legacy static value */
    height: calc(var(--seat-unit) * 1.71);
    width: 100%;
}

/* ===== AISLE EDITOR (edit mode) ===== */

.seat.edit-locked {
    opacity: 0.65;
    cursor: default !important;
}

/* Row in edit mode — crosshair cursor hints that gaps are clickable */
.row.edit-row {
    cursor: crosshair;
}
/* Seats in edit mode are locked — absorb clicks without triggering row handler */
.seat.edit-locked {
    cursor: default !important;
}

/* Thin clickable strip between rows — becomes a horizontal aisle on click */
.h-gap-zone {
    height: 4px;
    width: 100%;
    background: transparent;
    border-radius: 1px;
    cursor: pointer;
    transition: background 0.12s;
}
.h-gap-zone:hover {
    background: rgba(74, 144, 226, 0.55);
}

/* Existing vertical aisle in edit mode */
.vertical-aisle.editable {
    background: rgba(74, 144, 226, 0.25);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
}
.vertical-aisle.editable:hover {
    background: rgba(74, 144, 226, 0.55);
}

/* Existing horizontal aisle in edit mode */
.horizontal-aisle.editable {
    background: rgba(74, 144, 226, 0.25);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.horizontal-aisle.editable:hover {
    background: rgba(74, 144, 226, 0.55);
}

/* Thickness badge on aisles */
.aisle-thickness-badge {
    font-size: 9px;
    color: #4A90E2;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
}

/* Floating aisle thickness editor panel */
.aisle-editor-panel {
    position: fixed;
    background: #1e1e1e;
    border: 1px solid #4A90E2;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.aisle-editor-panel span {
    color: #aaa;
    font-size: 12px;
    white-space: nowrap;
}
.aisle-editor-panel input[type="number"] {
    width: 62px;
    background: #2a2a2a;
    border: 1px solid #555;
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.aisle-editor-panel input[type="number"]:focus {
    outline: none;
    border-color: #4A90E2;
}
.aisle-editor-panel .aisle-remove-btn {
    color: #f44336;
    background: none;
    border: 1px solid #f44336;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.aisle-editor-panel .aisle-remove-btn:hover {
    background: rgba(244,67,54,0.15);
}