#seating-plan-builder-app {
    border: 1px solid #ccd0d4;
    padding: 1rem;
}

.builder-controls {
    padding-bottom: 1rem;
    border-bottom: 1px solid #ccd0d4;
    margin-bottom: 1rem;
}

.builder-main {
    display: flex;
    gap: 1rem;
}

#builder-canvas-wrapper {
    flex-grow: 1;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    min-height: 500px;
    position: relative;
    resize: both;
    overflow: auto;
}

#builder-canvas {
    width: 100%;
    height: 100%;
}

#builder-inspector {
    flex-basis: 250px;
    flex-shrink: 0;
    padding: 1rem;
    background-color: #f0f0f1;
    border-radius: 4px;
}
#builder-inspector.hidden {
    display: none;
}
#builder-inspector h4 {
    margin-top: 0;
}
.inspector-field {
    margin-bottom: 1rem;
}
.inspector-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.inspector-field input {
    width: 100%;
}
.inspector-field input[type=checkbox] {
    width: auto;
}

/* SVG Element Styles */
.draggable-element {
    cursor: move;
}
.draggable-element:hover .element-shape {
    stroke: #2271b1;
    stroke-width: 2px;
}
.draggable-element.selected .element-shape {
    stroke: #d63638;
    stroke-width: 6px;
    stroke-dasharray: 5,5;
}

.element-shape {
    /* fill: #e0e0e0; */
    stroke: #757575;
    stroke-width: 1px;
}
.table-seat {
    fill: #fff;
    stroke: #616161;
}
.element-label {
    /*fill: #2c3338;
     font-size: 14px; */
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none; /* Make text non-interactive */
}

#seating-plan-builder-app {
    border: 1px solid #ccd0d4;
    padding: 1rem;
}

/* .builder-controls {
    padding-bottom: 1rem;
    border-bottom: 1px solid #ccd0d4;
    margin-bottom: 1rem;
} */

.builder-main {
    display: flex;
    gap: 1rem;
}

#builder-canvas-wrapper {
    flex-grow: 1;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    min-height: 500px;
    position: relative;
}

#builder-canvas {
    width: 100%;
    height: 100%;
}

#builder-inspector {
    flex-basis: 250px;
    flex-shrink: 0;
    padding: 1rem;
    background-color: #f0f0f1;
    border-radius: 4px;
}
#builder-inspector.hidden {
    display: none;
}
#builder-inspector h4 {
    margin-top: 0;
}
.inspector-field {
    margin-bottom: 1rem;
}
.inspector-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* === NEW BOOKINGS LIST STYLES === */
.les-bookings-list ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.les-bookings-list li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}
.les-bookings-list li:last-child {
    border-bottom: none;
}

/* === NEW CHECK-IN PAGE STYLES === */
.les-checkin-wrap h1 .dashicons {
    font-size: 30px;
    height: 30px;
    width: 30px;
    margin-right: 8px;
    vertical-align: middle;
}
#les-scanner-container {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    max-width: 540px;
}
#les-scan-result-container {
    margin-top: 20px;
    max-width: 540px;
}

#les-manual-entry-container {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    max-width: 540px;
    margin-bottom: 20px;
}
#les-manual-entry-container h3 {
    margin-top: 0;
}
.manual-entry-form {
    display: flex;
    gap: 10px;
}
.manual-entry-form input[type="text"] {
    flex-grow: 1;
    font-family: monospace;
}
.inspector-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#inspector-rotate-btn .dashicons , .inspector-actions button .dashicons {
    vertical-align: text-top;
    margin-right: 4px;
}
.inspector-dimensions {
    display: flex;
    gap: 10px;
}
.inspector-dimensions > div {
    flex: 1;
}
#builder-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
    z-index: 10;
    /* Simple visual indicator */
    background:
        linear-gradient(-45deg, transparent 45%, #888 45%, #888 55%, transparent 55%),
        linear-gradient(-45deg, transparent 65%, #888 65%, #888 75%, transparent 75%);
}
/* === NEW: Style for manually booked elements in the builder === */
.draggable-element.manual-booked .element-shape {
    fill: #BDBDBD; /* Same as the frontend booked color for consistency */
    stroke: #555;
    /* Add a pattern to make it obvious it's manually blocked */
    fill-opacity: 0.7;
}

.draggable-element.manual-booked .table-seat {
    fill: #BDBDBD;
}

/* Optional: Add a pattern overlay */
.draggable-element.manual-booked::after {
    content: '';
    /* You can use SVG patterns here for more advanced effects */
}




/* Style for the active "Block Seats" button */
#toggle-block-seats-btn.is-active {
    background: #2271b1 !important;
    color: #fff !important;
    border-color: #2271b1 !important;
}

/* Change cursor to indicate block mode */
#builder-canvas.block-seats-mode .builder-seat {
    cursor: pointer;
}

/* Style for individual seats in the builder */
.builder-seat {
    fill: #4CAF50; /* Green for available */
    stroke: #fff;
    stroke-width: 1px;
    transition: all 0.2s ease;
}

#builder-canvas.block-seats-mode .builder-seat.available:hover {
    r: 10; /* Increase the radius from 8 to 10 */
    fill: #FFC107; /* Yellow on hover */
    stroke: #E65100; /* Add an orange stroke for more emphasis */
    stroke-width: 2px;
}

/* Style for the "killed" / unavailable seats */
.builder-seat.unavailable {
    fill: #BDBDBD; /* Grey */
    stroke: #757575;
}

/* Optional: Add an 'X' over the unavailable seat */
.builder-seat.unavailable + .seat-cross {
    stroke: #d32f2f;
    stroke-width: 2px;
    pointer-events: none; /* Make the X unclickable */
}


.seat-label {
    fill: #ffffff; /* White text color */
    font-size: 8px; /* Small font size to fit inside the circle */
    font-weight: bold;
    text-anchor: middle; /* Horizontally center the text */
    dominant-baseline: middle; /* Vertically center the text */
    pointer-events: none; /* Make the text un-clickable */
    -webkit-user-select: none; /* Disable text selection */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ==========================================================================
   Builder Controls Professional Layout
   ========================================================================== */

/* 1. Main Flexbox Container */
.builder-controls {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap gracefully on smaller screens */
    gap: 8px; /* Consistent spacing between all buttons and groups */
    padding: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

/* 2. Push the "Import/Export" group to the far right */
.builder-actions-right {
    margin-left: auto; /* This is the magic that pushes it to the right */
    display: flex;
    gap: 8px;
}

/* 3. Polish the individual buttons for icon alignment */
.builder-controls .button {
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    gap: 6px; /* Space between icon and text */
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

/* Make icons look nice and centered */
.builder-controls .button .dashicons {
    font-size: 18px;
    line-height: 1;
}

/* 4. Style for the active "Block Seats" toggle button */
#toggle-block-seats-btn.is-active {
    background: #1d2327 !important; /* A dark, active state color */
    color: #fff !important;
    border-color: #1d2327 !important;
    box-shadow: none;
}
#toggle-block-seats-btn.is-active .dashicons {
    color: #fff !important;
}

/* 5. Subtle hover effect for secondary buttons */
.builder-controls .button.button-secondary:hover {
    background: #f0f0f1;
    border-color: #007cba;
    color: #007cba;
}

/* Style for the multi-select marquee box */
#selection-box {
    position: absolute;
    border: 1px solid #2271b1; 
    background-color: rgba(34, 113, 177, 0.1);
    z-index: 1000;
    pointer-events: none; /* Allows clicks to pass through */
}

/*
 * Prevents text selection during drag and marquee operations.
 */
body.les-user-selecting {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
}

/* 
 * It's also good practice to disable selection on the SVG labels themselves permanently,
 * as there is never a good reason for a user to select that text.
 */
#builder-canvas .element-label,
#builder-canvas .seat-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none; /* This also helps prevent accidental interaction with the text */
}