/* ==========================================================
   RANDOM SEATING ARRANGEMENT
========================================================== */

.seating-workspace{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:80vh;

    padding:40px 20px;

}

.seating-layout{

    width:100%;

    max-width:1300px;

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ==========================================================
   CLASSROOM CARD
========================================================== */

.classroom-card{

    background:#111;

    border-radius:18px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);

}

.classroom-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

#layoutStatus{

    color:#999;

    font-size:14px;

}


/* ==========================================================
   CLASSROOM AREA
========================================================== */

#classroomArea{

    position:relative;

    min-height:700px;

    padding:35px;

    overflow:auto;

    background:

        radial-gradient(circle at center,
        #181818,
        #0d0d0d);

}


/* Subtle classroom grid */

#classroomArea::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),

        linear-gradient(90deg,
        rgba(255,255,255,.02) 1px,
        transparent 1px);

    background-size:42px 42px;

}


/* ==========================================================
   WHITEBOARD
========================================================== */

.whiteboard{

    width:420px;

    max-width:90%;

    margin:0 auto 60px;

    text-align:center;

    padding:18px;

    border-radius:12px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #ececec);

    color:#333;

    font-weight:700;

    font-size:22px;

    letter-spacing:2px;

    box-shadow:

        inset 0 0 12px rgba(0,0,0,.15),

        0 10px 25px rgba(0,0,0,.35);

}


/* ==========================================================
   TEACHER DESK
========================================================== */

.teacher-desk{

    width:300px;

    margin:70px auto 0;

    padding:16px;

    border-radius:12px;

    text-align:center;

    color:white;

    font-weight:700;

    letter-spacing:1px;

    background:

        linear-gradient(
            180deg,
            #6b4c2d,
            #47311c);

    box-shadow:

        0 12px 25px rgba(0,0,0,.35);

    position:relative;

}


.teacher-desk::before{

    content:"👩‍🏫";

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    font-size:20px;

}


/* ==========================================================
   SEAT CONTAINER
========================================================== */

#seatContainer{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:max-content;
    min-width:100%;
}


/* ==========================================================
   CONTROL GRID
========================================================== */

.seating-bottom-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:20px;

}


/* ==========================================================
   CONTROL BOX
========================================================== */

.control-box{

    background:#111;

    border-radius:18px;

    padding:22px;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:

        0 15px 40px rgba(0,0,0,.35);

}

.control-box h3{

    margin-bottom:18px;

}


/* ==========================================================
   LABELS
========================================================== */

.control-box label{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:16px;

    color:#aaa;

    font-size:14px;

}


/* ==========================================================
   INPUTS
========================================================== */

.control-box input[type="number"],

.control-box textarea,

.control-box input[type="file"]{

    width:100%;

    background:#1a1a1a;

    color:white;

    border:1px solid rgba(255,255,255,.08);

    border-radius:10px;

    padding:12px;

    outline:none;

    transition:.25s;

}

.control-box input[type="number"]:focus,

.control-box textarea:focus{

    border-color:#4f46e5;

}


/* ==========================================================
   TEXTAREA
========================================================== */

#studentList{

    resize:vertical;

    min-height:280px;

    font-family:inherit;

    line-height:1.5;

}


/* ==========================================================
   FILE PICKER
========================================================== */

#uploadFile{

    margin-top:15px;

}


/* ==========================================================
   BUTTONS
========================================================== */

#generateBtn,

#randomizeBtn,

#resetBtn{

    width:100%;

    margin-top:12px;

}


/* ==========================================================
   INFO TEXT
========================================================== */

.small-info{

    margin-top:12px;

    color:#888;

    font-size:13px;

}


/* ==========================================================
   STATISTICS
========================================================== */

.stat-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:11px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.stat-row:last-child{

    border:none;

}

.stat-row span{

    color:#888;

}

.stat-row strong{

    color:white;

    font-size:17px;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

#classroomArea::-webkit-scrollbar{

    width:10px;

    height:10px;

}

#classroomArea::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:8px;

}

#classroomArea::-webkit-scrollbar-track{

    background:#151515;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1000px){

    .seating-bottom-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:700px){

    #classroomArea{

        min-height:550px;

        padding:20px;

    }

    .whiteboard{

        font-size:18px;

    }

    .teacher-desk{

        width:200px;

    }

}

/* ==========================================================
   CLASSROOM LAYOUT
========================================================== */

/* One classroom row */

.classroom-row{
    display:flex;
    justify-content:flex-start;
    width:max-content;
    gap:70px;
}


/* One seat block */

.seat-block{

    display:flex;

    gap:16px;                 /* seats inside the same block */

}


/* ==========================================================
   SEAT
========================================================== */

.seat{

    position:relative;

    width:110px;

    height:100px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    transition:.25s;

    animation:seatAppear .35s ease;

}


/* ==========================================================
   DESK
========================================================== */

.seat-desk{

    position:absolute;

    top:0;

    width:100px;

    height:54px;

    border-radius:10px;

    background:

        linear-gradient(
            180deg,
            #4f46e5,
            #3730a3);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:8px;

    box-shadow:

        0 10px 20px rgba(79,70,229,.25);

}


/* ==========================================================
   NAME
========================================================== */

.student-name{

    color:white;

    font-size:13px;

    font-weight:600;

    text-align:center;

    line-height:1.2;

    word-break:break-word;

    max-width:88px;

}


/* ==========================================================
   CHAIR
========================================================== */

.seat-chair{

    position:absolute;

    bottom:0;

    width:42px;

    height:30px;

    border-radius:6px;

    background:#6b7280;

}


/* Chair back */

.seat-chair::before{

    content:"";

    position:absolute;

    left:5px;

    bottom:18px;

    width:32px;

    height:28px;

    border-radius:6px;

    background:#9ca3af;

}


/* Chair legs */

.seat-chair::after{

    content:"";

    position:absolute;

    left:8px;

    bottom:-10px;

    width:26px;

    height:10px;

    border-left:3px solid #555;

    border-right:3px solid #555;

}


/* ==========================================================
   OCCUPIED
========================================================== */

.seat.occupied .seat-desk{

    background:

        linear-gradient(
            180deg,
            #4f46e5,
            #312e81);

}


/* ==========================================================
   EMPTY
========================================================== */

.seat.empty .seat-desk{

    background:

        linear-gradient(
            180deg,
            #3b3b3b,
            #262626);

    opacity:.65;

}


.seat.empty .student-name{

    color:#777;

}


/* ==========================================================
   HOVER
========================================================== */

.seat:hover{

    transform:

        translateY(-8px)

        scale(1.04);

}


.seat:hover .seat-desk{

    box-shadow:

        0 15px 28px rgba(79,70,229,.45);

}


/* ==========================================================
   SELECTED
========================================================== */

.seat.selected .seat-desk{

    outline:3px solid #facc15;

}


/* ==========================================================
   RANDOMIZE ANIMATION
========================================================== */

.seat.shuffle{

    animation:seatShuffle .45s;

}


@keyframes seatShuffle{

    0%{

        transform:

            rotateY(0deg);

    }

    50%{

        transform:

            rotateY(90deg);

    }

    100%{

        transform:

            rotateY(0deg);

    }

}


/* ==========================================================
   SPAWN
========================================================== */

@keyframes seatAppear{

    from{

        opacity:0;

        transform:

            translateY(30px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


/* ==========================================================
   NAME TRANSITION
========================================================== */

.student-name{

    transition:.25s;

}


/* ==========================================================
   EMPTY LABEL
========================================================== */

.student-name.empty-text{

    font-style:italic;

}


/* ==========================================================
   CLASSROOM SPACING
========================================================== */

#seatContainer{

    gap:28px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .classroom-row{

        gap:45px;

    }

    .seat-block{

        gap:12px;

    }

}


@media (max-width:850px){

    .seat{

        width:90px;

        height:85px;

    }

    .seat-desk{

        width:82px;

        height:46px;

    }

    .student-name{

        font-size:11px;

    }

}


@media (max-width:650px){

    #classroomArea{

        overflow-x:auto;
        overflow-y:auto;
    }

    #seatContainer{

        align-items:flex-start;
        min-width:max-content;
    }

    .classroom-row{

        justify-content:flex-start;
        width:max-content;
        gap:30px;
    }

    .seat-block{

        gap:10px;
    }

}

/* ==========================================================
   SEAT ID
========================================================== */

.seat-id{

    position:absolute;

    top:6px;

    left:8px;

    padding:2px 7px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:10px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==========================================================
   STUDENT NAME
========================================================== */

.student-name{

    margin-top:10px;

    padding:0 8px;

    text-align:center;

    font-size:13px;

    font-weight:600;

    color:white;

}


/* ==========================================================
   EMPTY DESKS
========================================================== */

.seat.empty .seat-desk{

    background:

        linear-gradient(
            180deg,
            #2c2c2c,
            #1c1c1c);

    border:1px solid rgba(255,255,255,.05);

}


.seat.empty .seat-id{

    background:rgba(255,255,255,.08);

    color:#888;

}


/* ==========================================================
   OCCUPIED DESKS
========================================================== */

.seat.occupied .seat-desk{

    background:

        linear-gradient(
            180deg,
            #5b5cf5,
            #3f40d7);

    box-shadow:

        0 12px 25px rgba(79,70,229,.35);

}


/* ==========================================================
   HOVER
========================================================== */

.seat:hover .seat-id{

    background:#ffffff;

    color:#4f46e5;

}

/* ==========================================================
   CLASSROOM LEGEND
========================================================== */

.classroom-legend{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    margin-bottom:35px;

    flex-wrap:wrap;

}


.legend-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:#bdbdbd;

    font-size:14px;

}


/* ==========================================================
   LEGEND SEAT
========================================================== */

.legend-seat{

    width:18px;

    height:18px;

    border-radius:6px;

    display:inline-block;

}


/* Occupied */

.legend-seat.occupied{

    background:

        linear-gradient(
            180deg,
            #5b5cf5,
            #3f40d7);

    box-shadow:

        0 0 12px rgba(79,70,229,.45);

}


/* Empty */

.legend-seat.empty{

    background:

        linear-gradient(
            180deg,
            #2f2f2f,
            #1d1d1d);

    border:1px solid rgba(255,255,255,.08);

}


/* ==========================================================
   TEACHER DESK
========================================================== */

.legend-desk{

    width:22px;

    height:14px;

    border-radius:4px;

    display:inline-block;

    background:

        linear-gradient(
            180deg,
            #6b4c2d,
            #47311c);

}


/* ==========================================================
   PRINT LOOK
========================================================== */

.classroom-legend{

    border-top:1px solid rgba(255,255,255,.05);

    border-bottom:1px solid rgba(255,255,255,.05);

    padding:14px 0;

}

/* ==========================================================
   SEAT INSPECTOR
========================================================== */

.seat-divider{

    margin:20px 0;

    border:none;

    border-top:1px solid rgba(255,255,255,.08);

}

.seat-inspector-title{

    margin-bottom:15px;

}

#lockSeatBtn{

    width:100%;

    margin-top:18px;

}

.seat.selected{

    z-index:50;

}

.seat.selected .seat-desk{

    outline:3px solid #facc15;

    box-shadow:

        0 0 25px rgba(250,204,21,.45);

}

/* ==========================================================
   LOCKED SEATS
========================================================== */

.seat-lock{

    position:absolute;

    top:6px;

    right:8px;

    font-size:12px;

    display:none;

}

.seat.locked{

    z-index:20;

}

.seat.locked .seat-desk{

    outline:3px solid #facc15;

    box-shadow:

        0 0 18px rgba(250,204,21,.55),

        0 10px 25px rgba(250,204,21,.20);

}

.seat.locked .seat-id{

    background:#facc15;

    color:#000;

    font-weight:700;

}

/* ==========================================================
   PRINT MODE
========================================================== */

@media print{

    @page{

        size:landscape;

        margin:10mm;

    }

    html,
    body{

        width:100%;

        height:auto;

        overflow:visible !important;

    }

    body{

        background:white !important;

    }

    header,
    footer,
    nav,
    .hero,
    .aim-bottom-grid,
    .control-box,
    button,
    textarea,
    input,
    select{

        display:none !important;

    }

    .classroom-card{

        width:100%;

        max-width:none;

        overflow:visible;

        page-break-inside:avoid;

        box-shadow:none;

        border:none;

    }

    #seatContainer{

        width:max-content;

        margin:auto;

        transform:scale(.85);

        transform-origin:top center;

    }

}

.classroom-card{

    isolation:isolate;
}

body.exporting .seat.selected{

    outline:none;

}

body.exporting .seat-desk{

    transition:none !important;

}

/* ==========================================================
   EXPORT MODE
========================================================== */

body.exporting *{

    animation:none !important;

    transition:none !important;

}

body.exporting .seat{

    transform:none !important;

}

body.exporting .seat-desk{

    filter:none !important;

}

body.exporting .seat.occupied .seat-desk{

    opacity:1 !important;
}

.layout-manager{

    margin-top:20px;

}

.layout-card{

    background:#181818;

    border-radius:12px;

    padding:14px;

    margin-top:12px;

    border:1px solid rgba(255,255,255,.08);

}

.layout-card h4{

    margin:0;

    color:white;

}

.layout-card small{

    display:block;

    margin:6px 0 14px;

    color:#888;

}

.layout-actions{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.layout-empty{

    text-align:center;

    color:#777;

    padding:20px;

}

/* ==========================================================
   DRAGGING
========================================================== */

.seat.dragging{

    opacity:.65;

    transform:scale(1.08);

    z-index:1000;

    transition:none;

    filter:

        drop-shadow(

            0 12px 24px rgba(0,0,0,.35)

        );

}

.seat.drag-over .seat-desk{

    outline:3px solid #60a5fa;

    outline-offset:4px;

    transform:scale(1.05);

    box-shadow:

        0 0 24px rgba(96,165,250,.45);

}

@keyframes dragPulse{

    0%{

        outline-color:#60a5fa;

    }

    50%{

        outline-color:#3b82f6;

    }

    100%{

        outline-color:#60a5fa;

    }

}

.seat{

    cursor:grab;

}

.seat.dragging{

    cursor:grabbing;

}

/* ==========================================================
   INVALID DROP TARGET
========================================================== */

.seat.drag-invalid .seat-desk{

    outline:3px solid #ef4444;

    outline-offset:4px;

    box-shadow:

        0 0 20px rgba(239,68,68,.45);

}

/* ==========================================================
   SEARCH RESULT
========================================================== */

.search-result{

    animation:

        searchPulse

        1s infinite;

}

.search-result .seat-desk{

    outline:4px solid #facc15;

    outline-offset:5px;

    box-shadow:

        0 0 30px rgba(250,204,21,.6);

}

@keyframes searchPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/* Current selected result */

.search-active{

    z-index:20;

}

.search-active .seat-desk{

    outline:4px solid #22c55e;

    outline-offset:6px;

    box-shadow:

        0 0 35px rgba(34,197,94,.75);

}

/* ==========================================================
   PRESENTATION MODE
========================================================== */

.presentation-mode{

    background:#050505;

}

.presentation-mode .hero,

.presentation-mode .navbar,

.presentation-mode footer,

.presentation-mode .control-box{

    display:none !important;

}

.presentation-mode .seat-workspace{

    padding:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}

.presentation-mode .seat-layout{

    max-width:none;

    width:100%;

}

.presentation-mode .classroom-card{

    border:none;

    box-shadow:none;

    background:#050505;

}

.presentation-mode .seat{

    transform:scale(1.18);

}

.presentation-mode .student-name{

    font-size:16px;

    font-weight:700;

}

.presentation-mode .seat-id{

    font-size:13px;

}

.presentation-mode .classroom-row{

    margin-bottom:22px;

}

.presentation-mode .seat-block{

    gap:20px;

}

/* ==========================================================
   PRESENTATION TOOLBAR
========================================================== */

#presentationToolbar{

    position:fixed;

    left:50%;

    bottom:18px;

    transform:

        translateX(-50%)

        translateY(90px);

    display:flex;

    gap:12px;

    padding:14px;

    background:

        rgba(15,15,15,.92);

    backdrop-filter:

        blur(12px);

    border-radius:18px;

    border:

        1px solid rgba(255,255,255,.08);

    box-shadow:

        0 15px 40px rgba(0,0,0,.45);

    z-index:99999;

    opacity:0;

    pointer-events:none;

    transition:.35s;

}

#presentationToolbar button{

    background:#202020;

    color:white;

    border:none;

    border-radius:10px;

    padding:

        12px 18px;

    cursor:pointer;

    font-size:14px;

    transition:.2s;

}

#presentationToolbar button:hover{

    background:#4f46e5;

}

.presentation-mode.toolbar-visible
#presentationToolbar{

    opacity:1;

    pointer-events:auto;

    transform:

        translateX(-50%)

        translateY(0);

}

#presentationSearch{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:70px;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:99998;

}

#presentationSearch.show{

    opacity:1;

    visibility:visible;

}

.presentation-search-card{

    width:420px;

    max-width:95%;

    background:#141414;

    border-radius:16px;

    padding:20px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.45);

}

#presentationSearchInput{

    width:100%;

    margin:15px 0;

}

#presentationSearchResults{

    max-height:420px;

    overflow:auto;

}

.presentation-result{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    margin-bottom:8px;

    background:#1b1b1b;

    border:none;

    border-radius:10px;

    color:white;

    cursor:pointer;

    transition:.2s;

}

.presentation-result:hover{

    background:#4f46e5;

}

/* ==========================================================
   PRESENTATION SEARCH HEADER
========================================================== */

.presentation-search-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

}

.presentation-search-header h3{

    margin:0;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

}

#closePresentationSearch{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#dc2626;

    color:#ffffff;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    transition:.25s;

}

#closePresentationSearch:hover{

    background:#ef4444;

    transform:scale(1.08);

}

#closePresentationSearch{

    margin:0;

    padding:0;

}

/* ==========================================================
   ASSIGN MODAL
========================================================== */

#assignModal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:99999;

}

#assignModal.show{

    opacity:1;

    visibility:visible;

}

.assign-card{

    width:430px;

    max-width:95%;

    background:#151515;

    border-radius:18px;

    padding:20px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

}

.assign-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.assign-header h3{

    margin:0;

}

#closeAssignModal{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    background:#dc2626;

    color:white;

    cursor:pointer;

}

#assignSearch{

    width:100%;

    margin:18px 0;

}

#assignStudentList{

    max-height:350px;

    overflow:auto;

}

.assign-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    margin-bottom:8px;

    background:#1d1d1d;

    border-radius:10px;

    cursor:pointer;

    transition:.2s;

}

.assign-row:hover{

    background:#4f46e5;

}

.assign-row.assigned{

    opacity:.45;

}

#removeStudentBtn{

    width:100%;

    margin-top:18px;

}

.locked-student{

    opacity:.45;

    pointer-events:none;

    background:#4b1d1d;

    color:#ffb3b3;

}