/*
 * Seat map styling.
 *
 * Mirrors the mobile booking template: seats are white rounded chips with
 * a bold number, sold seats are solid red, and a wide aisle separates the
 * left (and centre) seats from the right-hand pair. The seat-shaped SVG
 * artwork in /assets/img/seats/*.svg is used by the LEGEND and the DRIVER
 * only - exactly like the template:
 *
 *   available-seat.svg  grey outline    .seat-legend.available
 *   selected-seat.svg   green outline   .seat-legend.selected
 *   sold-seat.svg       red outline     .seat-legend.booked
 *   driver.svg          red person + wheel  .seat-driver-icon (top right)
 *
 * To restyle an icon, edit its SVG - the legend and driver pick the change
 * up automatically. Chip colours live in the rules below.
 *
 * Placement is per seat: each .seat carries inline grid-row / grid-column
 * inside .seat-grid, and the grid's column template is set inline per map
 * (fixed-width chip columns; the aisle is a stretched minmax column).
 */

/* ---------- Layout ---------- */
.seat-map-container {
    max-width: 440px;
    margin: 0 auto;
}

/* Legend on the left, driver on the right - like the template's map top. */
.seat-map-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* ---------- Seat chip ---------- */
.seat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #111827;
    background: #fff;
    border: 1px solid #606060;
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all .15s ease;
}

.seat:hover:not(.booked):not(.selected) {
    color: #1e7e34;
    border-color: #1e7e34;
    transform: translateY(-2px);
}

.seat.selected {
    color: #1e7e34;
    background: #f1fbf4;
    border: 2px solid #1e7e34;
}

.seat.booked {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
    cursor: not-allowed;
}

/* Older staff booking views still mark the driver with .seat-driver instead
   of the standalone icon - keep showing the wheel there until those pages
   are replaced. */
.seat.seat-driver {
    color: transparent;
    background: url('../img/seats/driver.svg') center / auto 46px no-repeat #fff;
}

/* ---------- Legend ---------- */
.seat-map-legend {
    display: flex;
    gap: 20px;
}

.seat-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.seat-legend-label {
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}

.seat-legend {
    display: inline-block;
    width: 24px;
    height: 29px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.seat-legend.available {
    background-image: url('../img/seats/available-seat.svg');
}

.seat-legend.selected {
    background-image: url('../img/seats/selected-seat.svg');
}

.seat-legend.booked {
    background-image: url('../img/seats/sold-seat.svg');
}

/* ---------- Driver ---------- */
.seat-driver-icon {
    display: block;
    width: 34px;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Fare Box */
.fare-box {
    background: rgba(0, 0, 128, 0.05);
    font-size: 1rem;
    font-weight: 600;
    color: #000080;
    border: 1px solid rgba(0, 0, 128, 0.14);
}

.fare-box .label {
    flex: 1;
    text-align: left;
}

.fare-box .amount {
    text-align: right;
    min-width: 120px;
}

/* Passenger Details */

.passenger-box {
    background: rgba(0, 0, 128, 0.04);
    font-size: 16px;
    font-weight: 100;
    color: #2c3e50;
    border: 1px solid rgba(0, 0, 128, 0.12);
}

.passenger-box .label {
    flex: 1;
    text-align: left;
}

.passenger-box .amount {
    text-align: right;
    min-width: 120px;
}

/* Wallet */

.wallet-card {
    border-left: 5px solid #0d6efd;
    transition: all 0.3s ease;
}

.wallet-card:hover {
    transform: scale(1.02);
}

.transaction-card {
    border-left: 5px solid #198754;
    transition: all 0.3s ease;
}

.transaction-card:hover {
    transform: translateY(-3px);
}

/* Seat map grid. Every seat declares its own row and column, so seats line
   up across a row and down a column no matter how many seats a row has.
   The aisle is an empty, stretched column between the left/centre block and
   the right-hand seats: the left block hugs the left edge, the right block
   hugs the right edge, and the aisle takes the space in between. */
.seat-grid {
    display: grid;
    column-gap: 8px;
    row-gap: 12px;
    justify-items: center;
    align-items: center;
}

/* The admin seat-map preview keeps the legacy row-by-row markup (row numbers
   + column headers), so it only needs the rows stacked vertically. */
.seat-rows {
    display: flex;
    flex-direction: column;
}

/* ...and its chips stay compact next to the 30px column placeholders. */
.seat-rows .seat {
    width: 30px;
    height: 30px;
    font-size: 11px;
    border-radius: 6px;
}

/* ---------- 2026 seat design: glyph + number badge + grid driver ----------
   Applies to every seat map inside .seat-map-container (public booking,
   manager and employee dashboards). The admin preview uses .seat-rows and
   keeps its compact chips. */
.seat-map-container .seat-grid {
    width: max-content;
    margin: 0 auto;
}

.seat-map-container .seat-grid .seat {
    position: relative;
    display: block;
    width: 46px;
    height: 64px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    cursor: pointer;
    transition: transform .12s ease;
}

.seat-map-container .seat-grid .seat .seat-glyph {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 49px;
    background-color: #4b5563;
    -webkit-mask: url('../img/seats/available-seat.svg') center / contain no-repeat;
    mask: url('../img/seats/available-seat.svg') center / contain no-repeat;
    transition: background-color .12s ease;
}

.seat-map-container .seat-grid .seat .seat-no {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 24px;
    padding: 1px 6px;
    border-radius: 7px;
    background: #000080;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 2px 5px rgba(16, 24, 40, .16);
}

.seat-map-container .seat-grid .seat:hover:not(.booked):not(.selected) {
    transform: translateY(-2px);
    border: 0;
    color: inherit;
}

.seat-map-container .seat-grid .seat:hover:not(.booked):not(.selected) .seat-glyph {
    background-color: #000080;
}

.seat-map-container .seat-grid .seat.selected {
    background: none;
    border: 0;
}

.seat-map-container .seat-grid .seat.selected .seat-glyph {
    background-color: #1e7e34;
}

.seat-map-container .seat-grid .seat.selected .seat-no {
    background: #1e7e34;
}

.seat-map-container .seat-grid .seat.booked {
    background: none;
    border: 0;
    color: inherit;
    cursor: not-allowed;
}

.seat-map-container .seat-grid .seat.booked .seat-glyph {
    background-color: #dc2626;
    opacity: .6;
}

.seat-map-container .seat-grid .seat.booked .seat-no {
    background: #dc2626;
}

/* Driver: the wheel in the front-right grid cell (or floating above the map
   when the vehicle has no right-hand block). */
.seat-driver-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 46px;
    height: 64px;
}

.seat-map-container .seat-map-top .seat-driver-cell {
    height: auto;
}

.seat-driver-cell .seat-driver-wheel {
    font-size: 1.7rem;
    color: #27303f;
}

.seat-driver-cell .seat-driver-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #98a0bd;
}

/* Static previews (seat map builder, vehicle seat map setup): render the
   booking-page design without the hover/cursor affordances. */
.seat-preview-static .seat-grid .seat {
    cursor: default;
}

.seat-preview-static .seat-grid .seat:hover {
    transform: none;
    border: 0;
    color: inherit;
}

.seat-preview-static .seat-grid .seat:hover:not(.booked):not(.selected) .seat-glyph {
    background-color: #4b5563;
}