/* 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;
    max-width:100%;
    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,minmax(0,1fr)); /* minmax(0,..) para hindi palawakin ng oras sa tile ang column */

    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;
}


.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;
}

/* QR Code Verification card - ang compact na itsura nito ay nasa KIOSK
   PANEL RESTRUCTURE section sa ibaba. */
.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;
}

/* Shown instead of .qr-scan-input when Kiosk Settings -> QR Scan
   Method is "Device Camera" (see applyQrScanMode()/startCameraQrScan()). */
.qr-camera-view{
    margin-top:20px;
}

.qr-camera-video{
    width:100%;
    max-width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border:2px solid #000000;
    border-radius:20px;
    background:#000;
}

.qr-camera-error{
    margin:10px 0 0;
    font-size:12px;
    color:#c81d3a;
    text-align:center;
}

/* ================= 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;
}


.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.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;
}

/* 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;
}

/* ------------------------------------------------------------
   WALK-IN CHECK-IN (Flowchart K1) - scan hints/errors and the
   shared scan widget's per-tab slot, plus the Group Check-in
   scanned-members list and first-time-user GSFE prompt.
   ------------------------------------------------------------ */
.scan-hint{
    margin:4px 0;
    font-size:12.5px;
    color:#555;
}

.scan-error{
    margin:4px 0;
    font-size:12.5px;
    font-weight:bold;
    color:#c81d3a;
}

.scan-slot{
    min-height:4px;
}

.group-members-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:5px 0 6px;
}

.group-member-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    padding:8px 12px;
    border:1.5px solid #2e8b57;
    border-radius:12px;
    background:#eefaf3;

    font-size:12.5px;
    font-weight:bold;
    color:#000000;
}

.group-gsfe-prompt{
    margin:6px 0;
    padding:10px;
    border:1.5px solid #c81d3a;
    border-radius:12px;
    background:#fbeaea;
}

/* ------------------------------------------------------------
   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;
}

/* ============================================================
   RESPONSIVE (portrait tablet / phone)
   ------------------------------------------------------------
   Everything above assumes a landscape kiosk touchscreen: a fixed
   viewport height with NO page scroll (body{overflow:hidden}),
   where .left-panel/.right-panel sit side by side and anything
   that outgrows them scrolls in its own internal scroll area
   instead. That works on a physical kiosk, but breaks on a
   narrower/portrait screen - .right-panel's fixed 460px width
   alone pushes content off the right edge of a phone.

   Below 899px, this section switches the page over to a normal
   scrolling page instead: panels stack vertically, and the
   internal scroll areas hand their scrolling to the page itself
   (min-height/overflow reset to their natural/auto values) so nothing
   is clipped or hidden behind a tiny fixed-height box.
   ============================================================ */
@media (max-width:899px){
    body{
        height:auto;
        min-height:100%;
        overflow:auto;
    }
    .main-content{
        flex-direction:column;
        min-height:auto;
    }
    .left-panel{
        /* Same fix as the admin dashboard's copy of this rule: base
           .left-panel is flex:1 1 auto (flex-grow:1), sized to grow
           against .right-panel in the desktop ROW layout. After
           .main-content stacks them in a column, that flex-grow makes
           .left-panel (and .status-card/.stations-scroll flexed
           inside it) balloon to fill the column's leftover height
           instead of just fitting its own content, leaving empty
           space below the station grid. */
        flex:0 0 auto;
        min-height:auto;
    }
    .status-card{
        height:auto;
        min-height:0;
        overflow:visible;
    }
    .stations-scroll{
        overflow-y:visible;
        min-height:0;
    }
    .stations{
        grid-template-columns:repeat(5,minmax(0,1fr)); /* minmax(0,..) para hindi palawakin ng oras sa tile ang column */
    }
    .right-panel{
        flex:1 1 auto;
        width:100%;
        max-width:100%;
        min-height:auto;
    }
    .qr-verify-card,
    .reservation-embed-card{
        min-height:auto;
    }
    .reservation-scroll-content,
    .qr-scroll-content,
    .opening-scroll-content{
        overflow-y:visible;
        min-height:0;
    }
}

@media (max-width:480px){
    .navbar-content h2{
        font-size:18px;
    }
    .main-content{
        padding:10px;
        gap:12px;
    }
    .stations{
        grid-template-columns:repeat(5,minmax(0,1fr)); /* minmax(0,..) para hindi palawakin ng oras sa tile ang column */
        gap:4px;
    }
    .station{
        min-height:36px;
        padding:2px;
        font-size:8px;
        border-radius:6px;
    }
    .station-label{
        font-size:9px;
        margin:0 0 1px;
        text-align:center;
    }
    .group-station-checklist{
        grid-template-columns:repeat(2,1fr);
    }
    /* .status-left (heading/date/location) and .status-right (the
       Vacant/Reserved/... counts) sit side by side by default - too
       tight for both at phone width, so the counts drop below the
       heading instead of visually overlapping it. */
    .top-status{
        flex-direction:column;
    }
    /* Same fix as the admin dashboard's copy of this rule: .status-right's
       base styling (width:80px, line-height:0.3, margin-top:-35px) is
       tuned to sit tucked beside the heading in the desktop ROW layout -
       stacked below it here instead, those same rules just cram the 5
       <p> lines on top of each other. Turn them into a wrapping row of
       small pill badges instead, colour-coded to match each status's
       station-box colour so it reads at a glance. */
    .status-right{
        width:100%;
        margin:8px 0 0;
        line-height:normal;
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }
    .status-right p{
        margin:0;
        padding:4px 10px;
        border:1.5px solid #000;
        border-radius:20px;
        font-size:11px;
        font-weight:700;
        background:#fff;
    }
    /* Walk-in model: walang "Reserved" - apat na lang ang badge (dati
       lima, kaya mali ang kulay ng Occupied/Closed/Total). */
    .status-right p:nth-child(1){ border-color:#2e8b57; color:#2e8b57; }  /* Vacant */
    .status-right p:nth-child(2){ border-color:#c81d3a; color:#c81d3a; }  /* Occupied */
    .status-right p:nth-child(3){ border-color:#888; color:#888; }        /* Closed */
    .status-right p:nth-child(4){ background:#1c1c1c; border-color:#1c1c1c; color:#fff; } /* Total */
}

/* ============================================================
   KIOSK PANEL RESTRUCTURE (updated mockups p.1-7)
   ------------------------------------------------------------
   Iisang QR Code Verification card sa taas, at sa ibaba ang
   Individual/Group Check-in: idle ("Scan your TUPC Student ID QR
   Code to Begin"), ang form, ang Group Table message, at ang
   "Thank You" notice ng sign-out. Dati: dalawang top-level tab
   ("QR Verification" / "Check-in").
   ============================================================ */

/* Ang hidden attribute ay hindi dapat natatalo ng display ng mga class. */
[hidden]{
    display:none !important;
}

/* ---- QR Code Verification card (compact) ---- */
.qr-verify-card{
    flex:0 0 auto;
    padding:16px 18px 18px;
}

.qr-verify-card .qr-scan-input{
    margin-top:14px;
    margin-bottom:0;
}

.qr-verify-card .qr-camera-view{
    margin-top:12px;
}

.scan-message{
    margin:8px 0 0;
    text-align:center;
    font-size:12.5px;
    font-weight:bold;
    color:#555;
}

.scan-message.is-error{
    color:#c81d3a;
}

/* ---- Check-in card ---- */
.reservation-scroll-content{
    display:flex;
    flex-direction:column;
}

.checkin-idle,
.checkin-message{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
    padding:14px 6px 8px;
}

.checkin-icon{
    width:84px;
    height:84px;
    flex:0 0 auto;
}

.checkin-idle-title,
.checkin-message-text{
    margin:0;
    font-size:18px;
    font-weight:bold;
    line-height:1.3;
    color:#000000;
}

.checkin-idle-hours{
    margin:10px 0 0;
    font-size:13px;
    line-height:1.5;
    color:#000000;
}

.checkin-message-eta{
    margin:0;
    font-size:13px;
    color:#000000;
}

.checkin-message-icon{
    display:inline-flex;
}

.checkin-message .buttons{
    align-self:flex-end;
    margin-top:12px;
}

/* Sign-out notice: puso para sa "Thank You", babala para sa overtime. */
#checkin-notice .notice-icon-overtime{
    display:none;
}

#checkin-notice.is-overtime .notice-icon-thanks{
    display:none;
}

#checkin-notice.is-overtime .notice-icon-overtime{
    display:inline-flex;
}

/* ---- Individual / Group forms ---- */
.checkin-form{
    flex:0 0 auto;
}

.checkin-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 10px;
}

.checkin-grid .span-2{
    grid-column:1 / -1;
}

.checkin-grid .field{
    min-width:0;
}

.field-label{
    display:block;
    margin:0 0 2px 4px;
    font-size:13px;
    color:#000000;
}

.checkin-form .form-input,
.checkin-form .form-dropdown{
    margin-bottom:0;
}

.checkin-subheading{
    margin:12px 0 2px;
    font-size:15px;
    font-weight:bold;
    color:#000000;
}

.checkin-note{
    margin:10px 0 0;
    font-size:11.5px;
    font-weight:normal;
    line-height:1.35;
    color:#000000;
}

.checkin-form .group-gsfe-prompt .form-input{
    margin-bottom:6px;
}

.group-member-remove{
    flex:0 0 auto;
    width:22px;
    height:22px;
    padding:0;
    border:none;
    border-radius:50%;
    background:#c81d3a;
    color:#ffffff;
    font-size:15px;
    font-weight:bold;
    line-height:1;
    cursor:pointer;
}

.group-member-remove:hover{
    background:#a8172f;
}

/* ---- Oras at "minutes remaining" sa occupied na station tile (p.1) ---- */
.station-time,
.station-remaining{
    margin-top:4px;
    text-align:center;
    font-size:0.7rem;
    font-weight:normal;
    line-height:1.25;
}

.station-remaining.is-finished{
    font-weight:bold;
}

.station-short{
    display:none;
}

/* Phone width: limang maliliit na tile bawat hanay - walang puwang para sa
   oras at sa mahabang "minutes remaining", kaya "33 min" lang ang ipinapakita. */
@media (max-width:480px){
    .station-time,
    .station-long{
        display:none;
    }

    .station-short{
        display:inline;
    }

    .station-remaining{
        margin-top:1px;
        font-size:7px;
        line-height:1.1;
    }
}

/* ---- About the Learning Commons (p.3) ---- */
/* Mas mataas ang specificity kaysa sa .modal-box.station-map-box (width:auto),
   na nagpapalapad sa About hanggang sa haba ng intro text. */
.modal-box.about-box{
    width:min(580px, 94vw);
}

.about-box .modal-scroll-content{
    display:block;
}

.about-intro{
    margin:8px 0 0;
    font-size:13px;
    line-height:1.45;
    color:#000000;
}

.about-heading{
    margin:14px 0 6px;
    font-size:16px;
    font-weight:bold;
    color:#c81d3a;
}

.about-steps{
    list-style:none;
    counter-reset:about-step;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 10px;
}

.about-steps li{
    counter-increment:about-step;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border:2px solid #000000;
    border-radius:14px;
    background:#ffffff;
    font-size:12px;
    line-height:1.3;
    color:#000000;
}

.about-steps li::before{
    content:counter(about-step);
    flex:0 0 auto;
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #000000;
    border-radius:50%;
    background:#e5e5e5;
    font-size:12px;
    font-weight:bold;
}

.about-note{
    margin:10px 0 0;
    font-size:12px;
    color:#000000;
}

.about-people{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.about-person{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:14px;
    background:#3a3a3a;
    color:#ffffff;
}

.about-avatar{
    position:relative;
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    overflow:hidden;
    background:#c81d3a;
    font-size:13px;
    font-weight:bold;
    color:#ffffff;
}

.about-avatar::before{
    content:attr(data-initials);
}

.about-avatar img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.about-person-info{
    display:flex;
    flex-direction:column;
    min-width:0;
    font-size:11px;
    line-height:1.25;
}

.about-person-info strong{
    font-size:12.5px;
}

.about-footer{
    margin:12px 0 0;
    font-size:11.5px;
    line-height:1.4;
    color:#333333;
}

@media (max-width:560px){
    .about-steps,
    .about-people{
        grid-template-columns:1fr;
    }
}

/* Phone width: isang column ang form (Location/Station, Student ID/Program). */
@media (max-width:480px){
    .checkin-grid{
        grid-template-columns:1fr;
    }
}