/* Seating plan: the room grid with drag and drop (and tap to swap), the
 * unseated tray, and the classroom's blocked-seat editor. */
@layer pages {
    table.seatgrid { table-layout: fixed; min-width: calc(var(--seat-cols, 6) * 4.5rem); }
    table.seatgrid td {
        height: 3rem;
        padding: var(--space-2);
        border: var(--border-width) dashed var(--border);
        text-align: center;
        vertical-align: middle;
    }
    table.seatgrid tbody tr:hover { background: none; }
    /* Empty seats: a faint dot; occupied seats: a solid tinted cell. */
    table.seatgrid td:empty::before { content: "·"; color: var(--text-muted); }
    table.seatgrid td:not(:empty) {
        border-style: solid;
        font-weight: var(--weight-medium);
        background: color-mix(in srgb, var(--primary) var(--tint-hover), transparent);
    }
    /* Seat grids scroll inside their card when the room is wider. */
    .content .panel:has(table.seatgrid) { overflow-x: auto; }
    /* Seat chips are role="button" (tap to swap) but read as plain names. */
    .seat-chip { cursor: grab; }
    .seat-chip:active { cursor: grabbing; }
    table.seatgrid .seat-chip { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
    .seat-chip img {
        display: block;
        width: 3.5rem;
        height: 3.5rem;
        object-fit: cover;
        border-radius: var(--radius-md);
        pointer-events: none;
    }
    .seat-tray {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
        min-height: 2.4rem;
        padding: var(--space-2);
        margin-bottom: var(--space-3);
        border: var(--border-width) dashed var(--border-strong);
        border-radius: var(--radius-md);
    }
    .seat-tray .seat-chip {
        padding: var(--space-0) var(--space-2);
        border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--primary) var(--tint-selected), transparent);
        font-size: var(--text-sm);
    }
    /* Tap to swap: the picked student is ringed; free seats become targets. */
    .seat-chip.is-picked { outline: var(--border-thick) solid var(--primary); outline-offset: var(--border-thick); border-radius: var(--radius-md); }
    table.seatgrid.is-picking td:not(.blocked) { cursor: pointer; }
    table.seatgrid.is-picking td:not(.blocked):hover { background: color-mix(in srgb, var(--primary) var(--tint-selected), transparent); }
    /* Whatever a chip is hovering over during a drag. */
    .drop-target { outline: var(--focus-width) dashed var(--primary); outline-offset: calc(var(--focus-width) * -1); }
    table.seatgrid td.drop-target { background: color-mix(in srgb, var(--primary) var(--tint-strong), transparent); }
    /* Blocked seats: hatched, not a drop target. */
    table.seatgrid td.blocked {
        background: repeating-linear-gradient(45deg, var(--border) 0 4px, transparent 4px 8px);
        cursor: not-allowed;
    }

    /* Blocked-seat editor on the classroom form: a grid of toggle buttons. */
    .blocked-field { margin-bottom: var(--space-3); }
    .blocked-editor {
        display: grid;
        grid-template-columns: repeat(var(--cols, 6), 1.6rem);
        gap: var(--space-1);
        margin: var(--space-1) 0 var(--space-1);
    }
    .blk-cell {
        --btn-bg: var(--surface);
        --btn-bg-hover: var(--surface-sunken);
        --btn-border: var(--border-strong);
        width: 1.6rem;
        height: 1.6rem;
        padding: 0;
        border-radius: var(--radius-sm);
    }
    .blk-cell.blocked { --btn-bg: var(--text-muted); --btn-bg-hover: var(--text-muted); --btn-border: var(--text-muted); }
}