/* Kiosk System Style Sheet */

/* GENERAL */

html, body, input, button, select, textarea {
    font-family:Poppins, Arial, sans-serif;
}

/* ============================================================
   PAGE SHELL (Round 6)
   ------------------------------------------------------------
   Matches the admin system's shell exactly so both systems size
   their panels the same way: html/body take the viewport height,
   body is a flex column, the navbar keeps its natural height,
   and .main-content takes everything that's left - so panels
   always end flush at the bottom of the window instead of
   stopping wherever their content happens to stop. Anything that
   can outgrow its panel scrolls INSIDE the panel (.stations-scroll,
   .timeline-scroll, .reservation-scroll), never the page.
   ============================================================ */

html{
    height:100%;
}

body{
    /* margin was "3" - not a valid CSS length, so it was silently
       ignored and the default 8px applied, pushing the page ~11px
       past the window and adding a stray scrollbar.
       Sept 09 review: it then came back as margin:5px, which has the
       same problem in smaller form - a margin sits OUTSIDE
       box-sizing:border-box, so height:100% plus a margin is taller
       than the window, and body's overflow:hidden clips that strip
       instead of scrolling it. The inset comes from padding alone now,
       which border-box does account for. */
    margin:0;
    padding:5px;

    height:100%;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    overflow:hidden;

    background-image: url("/static/tupclc_background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* The login screen centres a single card and has no navbar/panel
   layout, so it opts out of the flex shell. */
body.login-body{
    display:block;
    overflow:auto;
}

.navbar{
    flex:0 0 auto;
}

/* ================= LOGIN PAGE ================= */

.login-body{
    background:#d9d9d9;
}

.login-container{
    width:400px;
    margin:100px auto;
    padding:30px;
    background:#e5e5e5;
    border:2px solid black;
    border-radius:20px;
}

.login-container h3{
    color:#c81d3a;
    margin:0;
}

.login-container h1{
    color:#c81d3a;
    margin-top:5px;
    margin-bottom:30px;
}

.login-container label{
    font-weight:bold;
}

.login-container input{
    width:100%;
    padding:12px;

    margin-top:10px;
    margin-bottom:20px;

    border:1px solid gray;
    border-radius:20px;

    box-sizing:border-box;
}

.login-btn{
    width:100%;
    padding:12px;

    background:#c81d3a;
    color:white;

    border:none;
    border-radius:20px;

    cursor:pointer;

    font-weight:bold;
}

/* FORGOT PASSWORD BUTTON */

.forgot-btn{
    width:100%;

    padding:12px;

    margin-top:10px;

    background:#444;
    color:white;

    border:none;
    border-radius:20px;

    cursor:pointer;

    font-weight:bold;
}

.forgot-btn:hover{
    background:#333;
}

/* PASSWORD BOX */

.password-box{
    position:relative;
}

.password-box input{
    width:100%;
    padding:5px;
    padding-right:45px;

    margin-top:10px;
    margin-bottom:20px;

    border:1px solid gray;
    border-radius:20px;

    box-sizing:border-box;
}

.eye{
    position:absolute;

    right:15px;
    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    font-size:16px;

    color:#555;
}

/* ================= DASHBOARD ================= */


.navbar{
    padding:20px;
    margin-bottom:-28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.navbar h2{
    color:#c81d3a;
    font-size:23px;
    margin-top:0px;
    margin-bottom:-20px;
}

.menu a{
    text-decoration:none;
    margin-left:20px;
    color:black;
    font-weight:bold;
}

.menu a:hover{
    color:#c81d3a;
}

.navbar-content h4,
.navbar-content h2 {
    margin: -9px -10px 0 0;
    margin-left: -7px;
}

.navbar-content h4 {
    margin-bottom: 0.2px;
}

h4 {
    font-size: 13px;
    font-weight: normal;
}

.navbar-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-logo img {
    width: 50px;
    height: 50px;
    margin-top: -7px;
    object-fit: contain;
}

.main-content{
    display:flex;
    gap:20px;
    padding:20px;

    align-items:stretch; /* left panel now matches the right panel's height */

    /* Round 6: fills whatever the navbar leaves, so both panels end
       flush at the bottom of the window. min-height/min-width:0 let
       them shrink far enough for their inner scroll areas to engage
       instead of overflowing the page. */
    flex:1 1 auto;
    min-height:0;
    min-width:0;
    box-sizing:border-box;
}

/* LEFT PANEL - AVAILABILITY STATUS */

.left-panel{
    flex:1 1 auto; /* grows/shrinks with the right panel and the window, so both panels end flush at the bottom of the window */

    /* Round 6: part of the shared height chain (see PAGE SHELL). */
    display:flex;
    min-height:0;
    min-width:0;
}

.status-card{
    background:#e5e5e5;

    border:2px solid black;
    border-radius:20px;

    padding:18px;

    overflow:hidden;

    /* Round 6: fills its panel in both directions. The height used to
       be written in by setAvailabilityPanelHeight() in dashboard.html
       (now deleted); flex:1 1 auto is what keeps the card full width
       even when its contents are small - the same fix Round 5 applied
       to the More Information page's card. */
    flex:1 1 auto;
    height:100%;
    min-height:0;
    min-width:0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
}

.status-card h1{
    color:#c81d3a;
    margin-top:-10px;
    margin-bottom:0px;
    font-size:27px;
}

/* LEFT PANEL - TOP STATUS */

.top-status{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:10px;

    flex:0 0 auto; /* stays fixed height - only .stations-scroll grows/scrolls */
}

.status-left{
    flex:2;
    align-self:flex-start ;
}

.date-time{
    margin:-7px 0 10px 0;
    font-size:15px;
    font-weight:semibold;
}

.location-label{
    display:block;
    margin-top:-5px;
    margin-bottom:5px;
    font-size:13px;
}

.location-select{
    height:30px;
    width:570px;
    padding:5px 10px;
    border:2px solid #000000;
    border-radius:25px;
    margin-top:-5px;
    margin-right:20px;
    background:white;
    font:100% Poppins, Arial, sans-serif;
    font-size:13px;
    line-height:30px;
    box-sizing:border-box;
}

/* Bug fix (Flowchart K1): Location used to be an open .location-select
   dropdown here - now it's a locked, read-only display plus a small
   password-gated Settings button (see #kiosk-settings-overlay). */
.location-display-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:-5px;
}

.location-display{
    font-size:13px;
    font-weight:bold;
    color:#000000;
}

.kiosk-settings-btn{
    width:24px;
    height:24px;
    line-height:20px;
    padding:0;
    border:2px solid #000000;
    border-radius:50%;
    background:white;
    font-size:13px;
    text-align:center;
    cursor:pointer;
}

.kiosk-settings-btn:hover{
    background:#f2f2f2;
}

.kiosk-settings-note{
    font-size:12.5px;
    color:#555;
    margin-top:0;
}

.kiosk-settings-error{
    color:#c81d3a;
    font-size:12.5px;
    font-weight:bold;
    margin:6px 0 0 0;
}

.kiosk-settings-box{
    max-width:420px;
}

/* ============================================================
   LEARNING STATION MAP POP-UP
   ------------------------------------------------------------
   Reuses .modal-overlay / .modal-box / .modal-header for the
   backdrop and card shape; only the image sizing is new.
   ============================================================ */

.modal-box.station-map-box{
    width:auto;
    max-width:96vw;
    max-height:96vh;
}

.station-map-box .modal-scroll-content{
    display:flex;
    align-items:center;
    justify-content:center;
}

.station-map-image{
    display:block;
    width:auto;
    height:auto;
    margin-top:12px;
    max-width:calc(96vw - 44px); /* box's own horizontal padding */
    max-height:calc(96vh - 90px); /* keeps the image within the box, minus header/padding */
    border-radius:12px;
}

.status-right{
    font-size:13px;
    line-height:0.3;
    width:80px;
    margin-right:15px;
    margin-top:-35px;
}

/* LEFT PANEL - STATIONS GRID */

/* Scrollable region between .top-status and .buttons: takes up
   whatever vertical space is left in the (now height-bound)
   .status-card, and scrolls internally once the station cards don't
   fit, instead of growing the card past the panel's height. Mirrors
   .modal-scroll-content's scrollbar treatment for a consistent look. */
.stations-scroll{
    flex:1 1 auto;
    min-height:0; /* required so a flex child can actually shrink and scroll instead of overflowing */
    overflow-y:auto;

    padding-right:6px; /* keeps the scrollbar from overlapping the last column of cards */

    scrollbar-width:thin;
    scrollbar-color:#bbb transparent;
}

.stations-scroll::-webkit-scrollbar{
    width:8px;
}

.stations-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.stations-scroll::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}

.stations-scroll::-webkit-scrollbar-thumb:hover{
    background:#999;
}

.stations{
    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:10px;
}

.station{
    min-height:155px;
    padding:12px 10px 10px;

    border-radius:10px;

    color:white;
    font-weight:bold;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.password-box{
    position:relative;
}

.password-box h4{
    transform:translateY(-50%); 
    font-size:16px;
    margin-top:10px;
    font-weight:medium;
    color:#000000;
}

.vacant{
    background:#2e8b57;
}

.occupied{
    background:#c81d3a;
}

.reserved{
    background:#c79a3b;
}

.closed{
    background:#444; 
}

/* BUTTONS */


.buttons{
    margin-top:10px;
    margin-bottom:-5px;

    display:flex;
    justify-content:flex-end;

    gap:5px;

    flex:0 0 auto; /* stays pinned at the bottom of .status-card, below the scrollable grid */
}

.clear-btn{
    border: none;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    cursor: pointer;
    background: transparent;
    font-weight: bold   ;
}

.gray-btn{
    border: none;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 20px;
    cursor: pointer;
    color: white;
    font-weight: normal;
}

.red-btn{
    border: none;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 20px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}

.gray-btn{
    background:#444;
}

.red-btn{
    background:#c81d3a;
}

/* SCHEDULE APPOINTMENT MODAL */

.modal-box h1{
    color:#c81d3a;
    margin-top:-10px;
    margin-bottom:-10px;
    font-size:27px;
}
.password-box-personal,
.password-box-appointment {
    position:relative;
}

.password-box-personal h4,
.password-box-appointment h4 { 
    transform:translateY(-50%); 
    font-size:16px;
    font-weight:bold;
    margin-top:12px;
    margin-bottom:-15px;
    font-weight:medium;
    color:#000000;
}

.password-box-appointment h5 {
    font-size:11.5px;
    font-weight:normal;
    margin-top:2px;
    margin-bottom:0px;
    color:#000000;
}

.form-input{
    width:100%;
    padding:0px 7px 0px 10px;
    height:30px;

    margin-top:0px;
    margin-bottom:5px;

    border:2px solid #000000;
    border-radius:20px;

    box-sizing:border-box;
    font-size: 13px;
}

.form-dropdown{
    width:100%;
    padding:0px 6px 0px 7px;
    height:30px;

    margin-top:0px;
    margin-bottom:5px;

    border:2px solid #000000;
    border-radius:20px;

    box-sizing:border-box;
    font-size: 13px;
}

.appointment-label{
    font-size:13px;
    margin-top:-20px;
    margin-bottom:-10px;
    color:#000000;
}

/* =========================================================
   RIGHT PANEL (merged from right-panel.css)
   ========================================================= */

/* RIGHT PANEL */

.right-panel{
    flex:0 0 460px; /* fixed size - won't grow/shrink with the availability panel or zoom level */
    width:460px;
    max-width:460px;
    display:flex;
    flex-direction:column;
    gap:10px; /* tighter spacing between the stacked cards (was 20px) */
    box-sizing:border-box;

    /* Round 6: lets the tab panel below shrink so the reservation form
       scrolls inside the panel, instead of the panel growing past the
       bottom of the window. */
    min-height:0;
}

.card{
    background:#e5e5e5;
    border:2px solid black;
    border-radius:20px;
    padding:20px;
    overflow:hidden;
}

.card h2{
    color:#c81d3a;
    margin-top:-10px;
    margin-bottom:-5px;
    font-size:27px;
}

/* Round 8: same shrink-and-scroll-internally treatment as
   .appointment-card / .opening-card. */
.qr-verify-card{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.qrstatus{
    color:#888;
    font-size:45px;
    font-weight:bold;
    text-align:center;
    margin:-5px 0px -14px 0px;
}

.qrstatus-verified{
    color:#2e8b57;
}

.qrstatus-invalid{
    color:#c81d3a;
}

.qrstatus-expired{
    color:#c79a3b;
}

.qrstatus-signedout{
    color:#3b6ec7;
}

.qr-scan-input{
    width:100%;
    padding:7px 14px;

    margin-top:20px;
    margin-bottom:-5px;

    border:2px solid #000000;
    border-radius:20px;

    box-sizing:border-box;
    font-size:12px;
    text-align:center;
}

/* APPOINTMENT DETAILS */

/* Round 7: same auto-height logic as .reservation-embed-card - this
   card is the QR tab's variable-content area (like the reservation
   form is for the Reservation tab), so it grows to fill whatever
   space is left under Opening Hours / QR Verification and shrinks
   with the window instead of the whole tab scrolling as one block. */
.appointment-card{
    padding:18px 18px;
    display:flex;
    flex-direction:column;
    flex:1 1 auto; /* was 1 1 auto - no longer grows to fill leftover space, but can still shrink (with flex-shrink:1) so the tab panel itself never needs to scroll */
    min-height:0;
}

/* Scrolls internally (like .reservation-scroll-content) so each
   card's heading stays put and only its own body content scrolls if
   the window gets too short. Shared by all three QR-tab cards
   (Opening Hours, QR Verification, Appointment Details) - Round 8. */

.appointment-scroll-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;

    padding-right:6px;

    scrollbar-width:thin;
    scrollbar-color:#bbb transparent;
}

.appointment-scroll-content::-webkit-scrollbar{
    width:8px;
}


.appointment-scroll-content::-webkit-scrollbar-track{
    background:transparent;
}


.appointment-scroll-content::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}

.appointment-scroll-content::-webkit-scrollbar-thumb:hover{
    background:#999;
}

.appointment-info{
    display:flex;
    gap:25px;
    font-size:14px;
    margin-bottom:15px;
    line-height:1.3;
}

.label-column p{
    margin:6px 0;
    font-weight:bold;
    color:#000000;
}

.value-column p{
    margin:6px 0;
    color:#000000;
}

.appointment-button{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
}

.small-red-btn{
    background:#c81d3a;
    color:white;
    border:none;
    padding:6px 18px;
    border-radius:20px;
    font-size:12px;
    cursor:pointer;
}

/* OPENING HOURS */

/* Round 8: same shrink-and-scroll-internally treatment as
   .appointment-card, so if the window gets short enough that even
   this card doesn't fully fit, its own content scrolls in place
   instead of pushing the tab to grow past the window. */
.opening-card{
    padding:18px 18px;
    display:flex;
    flex-direction:column;
    min-height:0;
}

.opening-card h2{
    color:#c81d3a;
    margin-top:-10px;
    margin-bottom:0px;
    font-size:27px;
}

.opening-time{
    margin:0;
    font-size:14px;
    font-weight:bold;

    color:#000000;
}

.opening-note{
    margin-top:-2px;
    margin-bottom:-4px;
    font-size:13px;

    color:#000000;
}

/* ================= MANAGE STATIONS ================= */

.manage-container{
    margin:20px;

    padding:20px;

    background:#e5e5e5;

    border:2px solid black;
    border-radius:20px;
}

.manage-header{
    display:flex;

    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.manage-header h1{
    color:#c81d3a;

    margin:0;

    font-size:35px;
}

.manage-controls{
    display:flex;

    align-items:center;

    gap:10px;
}

.station-table{
    width:100%;

    border-collapse:collapse;
}

.station-table th{
    text-align:left;

    padding:10px;

    border-bottom:2px solid #bbb;

    font-size:16px;
}

.station-table td{
    padding:10px;

    border-bottom:1px solid #ccc;

    font-size:16px;
}

.vacant-text{
    color:#2e8b57;
    font-weight:bold;
}

.occupied-text{
    color:#c81d3a;
    font-weight:bold;
}

.reserved-text{
    color:#c79a3b;
    font-weight:bold;
}

.open-text{
    color:#2e8b57;
}

.table-buttons{
    text-align:right;
}

.table-btn{
    padding:6px 14px;

    min-width:auto;

    font-size:12px;

    margin-left:5px;
}

.small-btn{
    padding:8px 15px;

    min-width:auto;

    font-size:12px;
}

.add-button-container{
    display:flex;

    justify-content:flex-end;

    margin-top:15px;
}

.add-btn{
    padding:8px 18px;

    min-width:auto;

    font-size:12px;
}

.active{
    color:#c81d3a !important;
}

/* TAB LINKS */

.tab-link{
    flex:1;

    text-decoration:none;
}

/* Note: confirmation messages now use the browser's built-in
   alert()/confirm() dialogs (see dashboard.html script), so no
   custom banner/pop-up styling is needed here. The classes below
   are kept only in case other UI reuses these status colors. */

.confirmation-success{
    background:#d9f2e3;
    color:#1e7e34;
    border:2px solid #2e8b57;
}

.confirmation-error{
    background:#fbdde2;
    color:#a71d2a;
    border:2px solid #c81d3a;
}

.confirmation-pending{
    background:#fbf1d3;
    color:#8a6d1d;
    border:2px solid #c79a3b;
}

/* =========================================================
   TIMELINE AVAILABILITY VIEW (Learning Stations Availability
   Status page). Added below without changing any rule above.
   ========================================================= */

/* Pill-style date input to match the mockup */
.date-pill{
    height:34px;
    padding:0 14px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    font:600 13px Poppins, Arial, sans-serif;
    box-sizing:border-box;
}

/* Pill-style location dropdown (kiosk header) */
.location-pill{
    height:34px;
    padding:0 14px;
    min-width:320px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    font:13px Poppins, Arial, sans-serif;
    box-sizing:border-box;
}

/* Pill-style primary action button */
.pill-btn{
    height:34px;
    padding:0 18px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    color:#000;
    font:600 13px Poppins, Arial, sans-serif;
    cursor:pointer;
}

.pill-btn:hover{
    background:#f0f0f0;
}

/* Quick counts row above the timeline */
.status-summary{
    display:flex;
    gap:20px;
    margin:10px 2px 6px;
    font-size:13px;
    font-weight:bold;
    color:#333;
}

/* Weekend / after-hours notice */
.closed-notice{
    padding:14px 16px;
    margin:10px 0;
    background:#444;
    color:white;
    border-radius:12px;
    font-weight:bold;
    text-align:center;
}

/* Variant shown INSIDE .timeline-scroll (in place of the grid) so the
   prev/next day arrows keep flanking a full-size timeline box even on
   a day the Learning Commons is closed. Toggled via display:flex/none
   in JS, not display:block, so it can center its text. */
.closed-notice.timeline-message{
    height:100%;
    min-height:220px;
    margin:0;
    border-radius:0; /* the rounded corners already come from .timeline-scroll */
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}

/* Outer row: left arrow | scrollable grid | right arrow */
.timeline-outer{
    display:flex;
    align-items:stretch;
    gap:6px;
    margin-top:6px;

    flex:1 1 auto;   /* grow/shrink to fill whatever space is left in .status-card */
    min-height:0;    /* required so this flex child can actually shrink instead of overflowing the card */
    min-width:0;     /* same, sideways - lets the row shrink instead of forcing the card wide */
}

.scroll-btn{
    flex:0 0 auto;
    width:32px;
    border:none;
    background:transparent;
    color:#444;
    font-size:26px;
    font-weight:bold;
    cursor:pointer;
    align-self:center;
}

.scroll-btn:hover{
    color:#c81d3a;
}

/* Scrollable container that holds the CSS grid timeline.
   This is the ONLY element that scrolls - the page itself never does.
   Both axes scroll here: drag right for more stations, drag down for
   more of the day, independent of how big the browser window is. */
.timeline-scroll{
    flex:1 1 auto;
    min-height:0; /* required so this flex child can actually shrink and scroll instead of overflowing */
    min-width:0;  /* same, sideways - the grid inside can be wider than this box without stretching it */
    overflow-x:auto;
    overflow-y:auto;
    border-radius:12px;
    background:#f7f7f7;
    border:1px solid #d0d0d0;

    scrollbar-width:thin;
    scrollbar-color:#bbb #f0f0f0;
}

.timeline-scroll::-webkit-scrollbar{
    width:10px;
    height:10px;
}

.timeline-scroll::-webkit-scrollbar-track{
    background:#f0f0f0;
}

.timeline-scroll::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}

.timeline-scroll::-webkit-scrollbar-thumb:hover{
    background:#999;
}

.timeline-scroll::-webkit-scrollbar-corner{
    background:#f0f0f0;
}

/* The grid itself: column 1 = time labels, columns 2..N = stations */
.timeline-grid{
    position:relative;
    display:grid;
    min-width:max-content;
}

.tl-corner{
    position:sticky;
    left:0;
    z-index:3;
    background:#f7f7f7;
}

/* Station name header cells */
.tl-station-header{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:13px;
    color:#222;
    background:#f7f7f7;
    border-bottom:2px solid #ccc;
    padding:4px;
    box-sizing:border-box;
}

/* Time-of-day labels along the left edge */
.tl-time-label{
    position:sticky;
    left:0;
    z-index:1;
    background:#f7f7f7;
    font-size:12px;
    font-weight:600;
    color:#333;
    transform:translateY(-50%);
    padding-left:6px;
    box-sizing:border-box;
    white-space:nowrap;
}

/* Full-width horizontal hour line, sits behind the appointment blocks */
.tl-gridline{
    border-top:1px solid #d5d5d5;
    height:0;
    align-self:start;
}

/* Appointment block (reserved / occupied) */
.tl-block{
    margin:2px 4px;
    border-radius:8px;
    color:white;
    font-weight:bold;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:6px 4px;
    box-sizing:border-box;
    overflow:hidden;
    z-index:1;
}

.tl-block.reserved{
    background:#c79a3b;
}

.tl-block.occupied{
    background:#c81d3a;
}

.tl-block.vacant{
    background:#2e8b57;
}

.tl-block.closed{
    background:#444;
}

.tl-block-status{
    font-size:12px;
    line-height:1.2;
}

.tl-block-time{
    font-size:10px;
    font-weight:normal;
    margin-top:2px;
    line-height:1.2;
}

/* =========================================================
   RESERVE AN APPOINTMENT BUTTON + SCHEDULING MODAL
   Added below without changing any rule above. The scheduling
   form now opens in a pop-up overlay instead of living directly
   in the right panel.
   ========================================================= */

.reserve-btn-container{
    display:flex;
    justify-content:center;
}

.reserve-btn{
    width:100%;
    padding:14px;
    font-size:15px;
    border-radius:20px;
    margin-bottom:0px;
}

/* Full-screen dimmed backdrop, hidden until .active is toggled on */
.modal-overlay{
    display:none;

    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;

    background:rgba(0,0,0,0.5);

    align-items:center;
    justify-content:center;

    z-index:1000;
}

.modal-overlay.active{
    display:flex;

    /* Entrance animation: backdrop fades in, box fades/scales in. */
    animation:overlay-fade-in 0.2s ease-out;
}

/* Exit animation. JS adds this class instead of immediately removing
   ".active", then removes both once the animation finishes - see
   closeModalOverlay() above. */
.modal-overlay.closing{
    display:flex;
    animation:overlay-fade-out 0.18s ease-in forwards;
}

@keyframes overlay-fade-in{
    from{ background:rgba(0,0,0,0); }
    to{ background:rgba(0,0,0,0.5); }
}

@keyframes overlay-fade-out{
    from{ background:rgba(0,0,0,0.5); }
    to{ background:rgba(0,0,0,0); }
}

.modal-overlay.active .modal-box,
.modal-overlay.active .processing-box{
    animation:overlay-pop-in 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.modal-overlay.closing .modal-box,
.modal-overlay.closing .processing-box{
    animation:overlay-pop-out 0.18s ease-in forwards;
}

@keyframes overlay-pop-in{
    from{
        opacity:0;
        transform:scale(0.92) translateY(10px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

@keyframes overlay-pop-out{
    from{
        opacity:1;
        transform:scale(1) translateY(0);
    }
    to{
        opacity:0;
        transform:scale(0.92) translateY(10px);
    }
}

/* The scheduling form card itself, centered inside the overlay */
.modal-box{
    position:relative;

    width:420px;
    max-width:90vw;
    max-height:85vh;

    overflow-y:auto;

    background:#e5e5e5;
    border:2px solid black;
    border-radius:20px;

    padding:22px 22px;

    scrollbar-width:thin;
    scrollbar-color:#bbb transparent;
}

@keyframes modal-pop-in{
    from{
        opacity:0;
        transform:translateY(-10px) scale(0.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce){
    .modal-overlay.closing .modal-box,
    .modal-overlay.closing .processing-box{ animation:none; }
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex:0 0 auto;

    padding:0 0 2px 0;
}

/* Scrollable region below the header. .modal-box now scrolls itself,
   so this just keeps the content's own spacing consistent. */
.modal-scroll-content{
    flex:1 1 auto;

    padding:0;

    scrollbar-width:thin;
    scrollbar-color:#bbb transparent;
}

.modal-scroll-content::-webkit-scrollbar{
    width:8px;
}

.modal-scroll-content::-webkit-scrollbar-track{
    background:transparent;
}

.modal-scroll-content::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}

.modal-scroll-content::-webkit-scrollbar-thumb:hover{
    background:#999;
}

/* Close (x) button, upper right of every overlay/modal box. */
.modal-close-btn{
    position:absolute;
    top:12px;
    right:12px;

    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent;
    border:none;
    border-radius:50%;

    color:#444;
    font-size:18px;
    font-weight:bold;
    line-height:1;

    cursor:pointer;

    transition:background 0.2s ease, color 0.2s ease;
}

.modal-close-btn:hover{
    background:rgba(0,0,0,0.08);
    color:#c81d3a;
}

.modal-close-btn:focus-visible{
    outline:2px solid #c81d3a;
    outline-offset:2px;
}

/* SCHEDULE APPOINTMENT MODAL — RESERVATION TYPE TABS */

.reservation-tabs{
    display:flex;
    gap:10px;

    margin-top:2px;
    margin-bottom:8px;
}

.reservation-tab-btn{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #000000;
    background:#ffffff;
    border-radius:20px;

    padding:5px 6px;

    font-size:12.5px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    white-space:nowrap; /* keep "Individual Reservation" / "Group Reservation" on one line */

    cursor:pointer;

    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.reservation-tab-btn:hover{
    background:#f2f2f2;
}

.reservation-tab-btn.active{
    background:#c81d3a;
    border-color:#000000;
    color:#ffffff !important;
}

.reservation-tab-btn.active:hover{
    background:#a8172f;
}

.reservation-tab-btn:active{
    transform:scale(0.98);
}

.reservation-tab-panel{
    display:none !important;
}

.reservation-tab-panel.active{
    display:block !important;
}

/* =========================================================
   RIGHT PANEL TABS (QR Code Verification / Reservation)
   Top-level tabs for the whole right panel - replaces the old
   always-visible cards + a separate "Reserve an Appointment"
   pop-up overlay. Individual/Group reservation-tabs above are
   nested one level deeper, inside the Reservation panel.
   ========================================================= */

.right-panel-tabs{
    display:flex;
    gap:10px;

    flex:0 0 auto; /* Round 6: the tab row keeps its own height */
}

.right-panel-tab-btn{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #000000;
    background:#ffffff;
    border-radius:20px;

    padding:6px 10px;

    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:#000000;

    cursor:pointer;

    transition:background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.right-panel-tab-btn:hover{
    background:#f2f2f2;
}

.right-panel-tab-btn.active{
    background:#c81d3a;
    border-color:#000000;
    color:#ffffff !important;
}

.right-panel-tab-btn.active:hover{
    background:#a8172f;
}

.right-panel-tab-btn:active{
    transform:scale(0.98);
}

.right-panel-tab-panel{
    display:none !important;
}

/* Each panel is itself a flex column with the same gap the right
   panel used to apply directly to its (now nested) cards. */
.right-panel-tab-panel.active{
    display:flex !important;
    flex-direction:column;
    gap:10px;

    /* Round 6: takes the space left under the tab row and shrinks with
       the window. The QR tab's stacked cards scroll here if the window
       is short; the Reservation tab's card fills this and scrolls in
       its own .reservation-scroll-content instead. */
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

/* The Reservation tab's embedded form card - was a centered pop-up
   (.modal-box) up to 640px wide; now lives inline in the 400px-wide
   right panel, capped in height so it never grows past the window. */
.reservation-embed-card{
    display:flex;
    flex-direction:column;
    padding:15px 18px 18px;

    /* Round 6: was max-height:calc(100vh - 220px) - a guess at "the
       window minus the navbar and tabs" that was too generous on a
       short window, so the bottom of the form (Date, Station No.,
       Start/End Time, Clear Data / Done) ended up below the visible
       area with the page unable to scroll to it. It now simply fills
       the tab panel and lets .reservation-scroll-content scroll. */
    flex:1 1 auto;
    min-height:0;
}

.reservation-scroll-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;

    padding-right:6px;

    scrollbar-width:thin;
    scrollbar-color:#bbb transparent;
}

.reservation-scroll-content::-webkit-scrollbar{
    width:8px;
}

.reservation-scroll-content::-webkit-scrollbar-track{
    background:transparent;
}

.reservation-scroll-content::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}

.reservation-scroll-content::-webkit-scrollbar-thumb:hover{
    background:#999;
}

/* Read-only Location field on both reservation forms (Flowchart K1 -
   Location now always matches the kiosk's locked setting). */
.locked-field{
    background:#e0e0e0;
    color:#555;
    cursor:not-allowed;
}

/* GROUP RESERVATION — STATION CHECKBOX LIST */

.group-station-checklist{
    display:grid;
    /* 3 columns, not 5 - this now lives in the 400px-wide right panel
       (embedded in the Reservation tab) instead of a 640px-wide
       pop-up, where 5 columns had more room to breathe. */
    grid-template-columns:repeat(3, 1fr);
    gap:8px;

    margin-top:5px;
    margin-bottom:6px;
    padding:10px;

    border:2px solid #000000;
    border-radius:14px;

    box-sizing:border-box;
    min-height:44px;
}

.group-station-hint{
    margin:0px 0 4px;
    font-size:12.5px;
    color:#555;
}

.group-station-checkbox{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    padding:10px 4px;

    border:1.5px solid #2e8b57;
    border-radius:12px;

    font-size:11.5px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    background:#eefaf3;

    cursor:pointer;
    user-select:none;

    box-sizing:border-box;
    transition:background 0.15s ease, border-color 0.15s ease;
}

.group-station-checkbox:hover:not(.is-disabled){
    background:#dcf3e6;
}

.group-station-checkbox input[type="checkbox"]{
    accent-color:#c81d3a;
    cursor:pointer;
    margin:0;
    width:16px;
    height:16px;
}

.group-station-checkbox.is-disabled{
    border-color:#c81d3a;
    color:#a33;
    background:#fbeaea;
    cursor:not-allowed;
    opacity:0.75;
}

.group-station-checkbox.is-locked{
    border-color:#bbb;
    color:#999;
    background:#f2f2f2;
    cursor:not-allowed;
    opacity:0.6;
}

.group-station-checkbox.is-disabled input[type="checkbox"],
.group-station-checkbox.is-locked input[type="checkbox"]{
    cursor:not-allowed;
}
/* ============================================================
   PROCESSING NOTICE (Round 6)
   ------------------------------------------------------------
   Covers the screen from the moment the student confirms their
   appointment details until the server answers, so the kiosk
   never looks frozen while the reservation is being saved and
   the confirmation email sent. Reuses .modal-overlay for the
   dimmed backdrop; only the box and spinner are new.
   ============================================================ */

.processing-box{
    background:#e5e5e5;

    border:2px solid black;
    border-radius:20px;

    padding:16px 28px 24px 28px;

    max-width:440px;
    text-align:center;
}

.processing-spinner{
    width:46px;
    height:46px;

    margin:0 auto 18px;

    border:5px solid #cfcfcf;
    border-top-color:#c81d3a;
    border-radius:50%;

    animation:processing-spin 0.9s linear infinite;
}

@keyframes processing-spin{
    to{ transform:rotate(360deg); }
}

.processing-box h1{
    color:#c81d3a;
    margin:0;
    padding:0 0 10px;
    font-size:24px;
}

.processing-box p{
    margin:0;
    font-size:14px;
    line-height:1.45;
    color:#333;
}

/* Respects a reduced-motion preference - the notice still shows,
   it just doesn't spin. */
@media (prefers-reduced-motion: reduce){
    .processing-spinner{ animation:none; }
    .processing-box{ animation:none; }
}

/* ============================================================
   RESERVATION CONFIRMATION & APPOINTMENT RESULT POP-UPS
   ------------------------------------------------------------
   Replace the old window.confirm() prompt and the chain of
   window.alert() boxes used to report a submission's outcome.
   Both reuse .modal-overlay for the dimmed backdrop and
   .processing-box for the card shape/animation, matching the
   processing notice above.
   ============================================================ */

.confirm-box,
.result-box{
    position:relative;

    max-width:480px;
    padding:14px 18px;
}

.confirm-box .modal-header,
.result-box .modal-header{
    /* justify-content (not text-align) positions the heading, since
       the h1 is a shrink-wrapped flex item here. No extra side padding -
       centering needs to use the box's full width, or it visually
       skews off-center. The close (x) button is absolutely positioned
       relative to the box itself, so it doesn't need row clearance. */
    justify-content:flex-start;
}

/* Invalid/alert-style result pop-ups (missing fields, invalid email,
   invalid date/time) keep the old centered heading; genuine
   confirmations - the Confirm Reservation modal and success results
   like "Appointment Confirmed!" - use the left-aligned heading above. */
.result-box.is-error .modal-header{
    justify-content:center;
}

.confirm-box h1,
.result-box h1{
    margin:0;
    padding:0 0 4px;
}

.confirm-message,
.result-message{
    margin:0;
    font-size:14px;
    line-height:1.5;
    color:#333;
    text-align:left;

    /* Preserves the \n line breaks already built into the
       confirmation/result text instead of collapsing them. */
    white-space:pre-line;
}

.confirm-buttons,
.result-buttons{
    justify-content:flex-end;
    margin-top:14px;
}

.confirm-buttons .clear-btn{
    border:2px solid #444;
    border-radius:20px;
    padding:6px 14px;
    color:#444;
}

.confirm-buttons .clear-btn:hover{
    background:#f2f2f2;
}

.result-icon{
    width:46px;
    height:46px;
    margin:0 auto 14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    font-size:24px;
    font-weight:bold;
    color:#ffffff;

    animation:modal-pop-in 0.15s ease-out;
}

.result-icon.is-success{
    background:#2e9e4f;
}

.result-icon.is-error{
    background:#c81d3a;
}

@media (prefers-reduced-motion: reduce){
    .result-icon{ animation:none; }
}
/* ------------------------------------------------------------
   Holiday notice under the reservation Date field (Sept 09 review).
   The server refuses holiday bookings; this is the immediate
   feedback the student gets the moment they pick the date.
   ------------------------------------------------------------ */
.holiday-notice{
    margin:4px 2px 0;
    font-size:12px;
    font-weight:bold;
    line-height:1.35;
    color:#c81d3a;
}

.form-dropdown.is-holiday{
    border-color:#c81d3a;
}

/* ------------------------------------------------------------
   QR tab scroll wrappers (Sept 09 review)
   ------------------------------------------------------------
   .opening-scroll-content and .qr-scroll-content existed in the
   markup but had no CSS rules at all, so they were inert: their
   cards could not shrink and a few pixels of each were clipped by
   the card's overflow:hidden with no way to scroll to them (worse
   as the browser is zoomed in). Same treatment as the Reservation
   tab's .reservation-scroll-content.
   ------------------------------------------------------------ */
.opening-scroll-content,
.qr-scroll-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:#bbb transparent;
}

.opening-scroll-content::-webkit-scrollbar,
.qr-scroll-content::-webkit-scrollbar{
    width:8px;
}

.opening-scroll-content::-webkit-scrollbar-track,
.qr-scroll-content::-webkit-scrollbar-track{
    background:transparent;
}

.opening-scroll-content::-webkit-scrollbar-thumb,
.qr-scroll-content::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}