/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
/* Serves: /seats (classroom, configuration, dialogs, and presentation layout). */
.seats-page {
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
}

.seats-main {
    padding-top: var(--navbar-height);
}

.seats-page [hidden] {
    display: none !important;
}

.seats-hero {
    display: grid;
    align-items: center;
    min-height: var(--section-min-height);
    background: var(--color-primary-dark);
    color: var(--color-surface);
}

.seats-hero h1 {
    margin: 0;
    font-size: clamp(var(--text-3xl), 5.6vw, var(--text-4xl));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-display);
}

.seats-section {
    padding-top: var(--section-band-padding-top);
    padding-bottom: var(--section-band-padding-bottom);
    background: var(--color-surface);
}

.seats-heading {
    margin: 0 0 var(--space-10);
    text-align: center;
    font-size: clamp(2.25rem, 4.4vw, 4.5rem);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
}

.seats-heading input {
    width: 100%;
    min-width: 0;
    padding: 0.16em 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.seats-heading input::placeholder {
    color: inherit;
    opacity: 1;
}

.seats-tools,
.seats-board-meta,
.seats-members-heading,
.seats-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.seats-tools {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.seats-tools p {
    margin: 0;
    color: var(--color-black);
}

.seats-text-button {
    padding: 0.2em 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.seats-text-button[aria-pressed='true'] {
    text-decoration-thickness: 3px;
}

.seats-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-4);
    border: var(--border-width-md) solid var(--color-primary-dark);
    background: var(--color-surface);
}

.seats-board-space {
    position: relative;
    margin-inline: auto;
}

.seats-board {
    display: grid;
    grid-template-columns: 70px repeat(var(--seats-columns, 4), 220px) 70px;
    grid-template-rows: repeat(var(--seats-rows, 7), 72px);
    gap: 14px;
    width: max-content;
    padding: 14px;
    transform-origin: top left;
    color: var(--color-black);
    background: var(--color-white);
}

.seats-cell {
    min-width: 0;
    min-height: 0;
    position: relative;
}

.seats-desk {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-gray);
    background: var(--color-gray-light);
}

.seats-desk.is-single {
    grid-template-columns: 1fr;
}

.seats-desk.is-unused {
    display: grid;
    place-items: center;
    border-style: dashed;
    background: transparent;
}

.seats-unused-label {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    opacity: 0.6;
}

.seats-seat {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    min-width: 0;
    padding: 5px 8px;
    border: 0;
    border-right: 1px solid var(--color-gray);
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.seats-seat:last-of-type {
    border-right: 0;
}

.seats-seat small {
    display: block;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-align: left;
}

.seats-seat span {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.14;
    overflow-wrap: anywhere;
}

.seats-seat.is-fixed {
    background: var(--color-surface);
    box-shadow: inset 0 -4px var(--color-primary-dark);
}

.seats-seat.is-selected,
.seats-object.is-selected,
.seats-seat.is-processing {
    background: var(--color-primary-dark);
    color: var(--color-surface);
}

.seats-seat.is-processing {
    z-index: 1;
    animation: seats-pulse 420ms ease-in-out infinite alternate;
}

.seats-seat.is-fixed small::after {
    content: ' · cố định';
}

.seats-seat:focus-visible,
.seats-object:focus-visible,
.seats-slot:focus-visible {
    outline-offset: 3px;
    z-index: 2;
}

.seats-desk-menu {
    position: absolute;
    top: -13px;
    right: -4px;
    z-index: 3;
    min-width: 28px;
    height: 26px;
    padding: 0 4px;
    border: 1px solid var(--color-gray);
    background: var(--color-surface);
    color: var(--color-black);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.seats-object,
.seats-slot {
    width: 100%;
    height: 100%;
    padding: 5px;
    border: 1px solid var(--color-gray);
    background: var(--color-gray-light);
    color: inherit;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

.seats-object[data-object='teacher'] {
    align-self: center;
    height: 42px;
}

.seats-object[data-object='door'] {
    width: 48px;
    justify-self: center;
}

.seats-door-label {
    display: inline-block;
    transform: rotate(90deg);
    white-space: nowrap;
}

.seats-slot {
    border: 1px dashed var(--color-gray);
    background: transparent;
    font-weight: var(--font-weight-regular);
    font-size: 12px;
    color: var(--color-gray);
}

.seats-board-meta {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
}

.seats-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr);
    gap: clamp(var(--space-4), 5vw, var(--space-14));
    margin-top: var(--space-9);
}

.seats-button {
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: var(--border-width-md) solid var(--color-primary-dark);
    border-radius: 0;
    background: var(--color-primary-dark);
    color: var(--color-surface);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.seats-button:hover,
.seats-button:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.seats-page button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.seats-config {
    min-height: var(--section-min-height);
    padding-block: var(--section-band-padding-top) var(--section-band-padding-bottom);
    background: var(--color-primary-dark);
    color: var(--color-surface);
}

.seats-config h2 {
    margin: 0 0 var(--space-9);
    font-size: clamp(var(--text-3xl), 4.5vw, 5rem);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
}

.seats-config-grid {
    display: grid;
    grid-template-columns: minmax(26rem, 1.1fr) minmax(0, 1.5fr);
    gap: clamp(var(--space-6), 5vw, var(--space-12));
}

.seats-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--space-5) var(--space-8);
}

.seats-config h3 {
    margin: 0;
    font-size: clamp(1.3rem, 2vw, 2rem);
    font-weight: var(--font-weight-bold);
}

.seats-members-heading {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--space-2) var(--space-4);
}

.seats-members-heading h3 {
    white-space: nowrap;
}

.seats-member-actions {
    display: flex;
    flex: none;
    gap: var(--space-2);
}

.seats-config-button {
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
    border: var(--border-width-md) solid var(--color-surface);
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.seats-config-button:hover,
.seats-config-button:focus-visible,
.seats-config-button-outline {
    background: transparent;
    color: var(--color-surface);
}

.seats-config-button-outline:hover,
.seats-config-button-outline:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.seats-member-list,
.seats-group-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.seats-member-list {
    max-height: 32rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.seats-member-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.seats-member-list input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
}

.seats-member-list input::placeholder {
    opacity: 1;
}

.seats-member-list .seats-member-handle {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid var(--color-surface);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: grab;
}

.seats-member-list .seats-member-handle:hover,
.seats-member-list .seats-member-handle:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.seats-group-list button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: grab;
}

.seats-group-list button:hover {
    text-decoration: underline;
}

.seats-group-list li:not(.seats-empty):not(:last-child)::after {
    content: ',';
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.seats-group-list li {
    display: inline-flex;
    align-items: baseline;
}

.seats-group-list button {
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.seats-dimensions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns:
        max-content minmax(3rem, 5rem) max-content minmax(3rem, 5rem)
        max-content;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.seats-capacity {
    white-space: nowrap;
    font-weight: var(--font-weight-regular);
}

.seats-config input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--font-weight-regular);
}

.seats-member-count {
    font-weight: var(--font-weight-regular);
}

.seats-config .seats-member-list input {
    font-size: clamp(1.3rem, 2vw, 2rem);
    font-weight: var(--font-weight-regular);
    line-height: 1.25;
}

.seats-config input::placeholder {
    color: inherit;
    opacity: 0.65;
}

.seats-page input:not([type='checkbox']):focus-visible {
    outline: none;
    box-shadow: none;
}

.seats-priority {
    min-height: 5rem;
}

.seats-group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    min-height: 2rem;
}

.seats-group-list .seats-empty {
    opacity: 0.7;
    font-size: var(--text-sm);
}

.seats-config .is-drop-target {
    outline: 2px dashed currentColor;
    outline-offset: 6px;
}

.seats-seed {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    grid-column: 1 / -1;
    gap: var(--space-3);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.seats-seed input {
    width: 12rem;
}

.seats-seed-button {
    flex: none;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-surface);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

.seats-seed-button:hover,
.seats-seed-button:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.seats-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(80dvh, 42rem);
    padding: var(--space-6);
    border: var(--border-width-md) solid var(--color-primary-dark);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    overflow: auto;
}

.seats-dialog::backdrop {
    background: rgba(10, 10, 10, 0.45);
}

.seats-dialog[open] {
    animation: seats-dialog-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.seats-dialog[open]::backdrop {
    animation: seats-dialog-backdrop-in 260ms ease-out both;
}

.seats-dialog-error {
    white-space: pre-line;
}

@keyframes seats-dialog-in {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@keyframes seats-dialog-backdrop-in {
    from {
        opacity: 0;
    }
}

.seats-dialog-header {
    margin-bottom: var(--space-5);
}

.seats-dialog h3 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-black);
}

.seats-dialog p {
    font-size: var(--text-sm);
    line-height: 1.5;
}

.seats-dialog-list {
    display: grid;
    gap: var(--space-2);
}

.seats-dialog-list button {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-black);
    text-align: left;
    cursor: pointer;
}

.seats-dialog-list button:hover,
.seats-dialog-list button:focus-visible {
    color: var(--color-primary-dark);
    border-color: currentColor;
}

.seats-dialog label {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-height: 44px;
}

.seats-dialog input[type='checkbox'] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary-dark);
}

.seats-dialog input[type='search'] {
    width: 100%;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 0;
    font: inherit;
}

.seats-page.is-presenting {
    overflow: hidden;
}

.seats-section.is-presentation {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    padding: var(--space-5) var(--page-padding);
    overflow: auto;
}

.seats-section.is-presentation .seats-heading {
    flex-shrink: 0;
    margin-bottom: var(--space-4);
    font-size: clamp(1.4rem, 3.8vw, 3.5rem);
}

.seats-section.is-presentation .seats-viewport {
    display: flex;
    align-items: safe center;
    flex: 1 1 auto;
    min-height: 0;
}

.seats-section.is-presentation .seats-board-space {
    flex: 0 0 auto;
}

.seats-section.is-presentation .seats-controls {
    flex-shrink: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
    margin-top: var(--space-3);
}

.seats-section.is-presentation .seats-desk-menu {
    display: none;
}

.seats-section.is-presentation .seats-tools {
    display: none;
}

@keyframes seats-pulse {
    from {
        opacity: 0.72;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .seats-main {
        padding-top: var(--navbar-height-mobile);
    }
    .seats-hero {
        min-height: var(--section-min-height-mobile);
    }
    .seats-config-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .seats-controls {
        gap: var(--space-4);
    }
}

@media (max-width: 620px) {
    .seats-hero h1 {
        font-size: clamp(2.75rem, 10vw, 4rem);
    }
    .seats-config-grid {
        grid-template-columns: 1fr;
    }
    .seats-config {
        min-height: 0;
    }
    .seats-tools {
        align-items: flex-start;
    }
    .seats-tools p {
        font-size: var(--text-xs);
    }
    .seats-tools button {
        flex-shrink: 0;
    }
    .seats-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .seats-viewport {
        padding: var(--space-2);
    }
    .seats-board-meta {
        align-items: flex-start;
    }
    .seats-member-list {
        max-height: 20rem;
    }
    .seats-section.is-presentation {
        padding: var(--space-3);
    }
    .seats-section.is-presentation .seats-controls {
        gap: var(--space-2);
    }
    .seats-dialog {
        padding: var(--space-4);
    }
}

@media (max-width: 430px) {
    .seats-heading {
        font-size: 2rem;
    }
    .seats-button {
        padding-inline: var(--space-2);
    }
    .seats-tools {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seats-dialog[open],
    .seats-dialog[open]::backdrop {
        animation: none;
    }
    .seats-seat.is-processing {
        animation: none;
    }
    .seats-button,
    .seats-config-button {
        transition: none;
    }
}

@media print {
    .seats-page > #navbar,
    .seats-page > #footer,
    .seats-hero,
    .seats-config,
    .seats-controls,
    .seats-tools,
    .seats-board-meta,
    .seats-desk-menu {
        display: none !important;
    }
    .seats-main {
        padding: 0;
    }
    .seats-section {
        position: static !important;
        height: auto !important;
        padding: 0;
    }
    .seats-viewport {
        overflow: visible;
        border: 0;
    }
}