/* Admin System Style Sheet */

/* GENERAL */

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

html{
    height:100%;
}

body{
    /* Bug fix (Sept 09 review): this was margin:5px, and a margin is
       NOT covered by box-sizing:border-box - it sits outside
       height:100%, so the page ended up ~10px taller than the window.
       Because body also sets overflow:hidden, that extra strip was
       clipped rather than scrollable, which is what pushed the layout
       down and left the bottom edge cut off. The inset now comes from
       padding alone, which border-box does account for. */
    margin:0;
    padding:5px;

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

    display:flex;
    flex-direction:column;
    overflow:hidden; /* panels scroll internally; the page itself never does */

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

/* The login screen is the one page with no navbar/panel layout - it
   just centres a single card.

   Bug fix (Sept 09 review): this was overflow:hidden paired with a
   position:fixed card. A fixed element can't be scrolled to, and
   overflow:hidden meant there was nothing to scroll anyway - so on a
   short window (a laptop with devtools open, a projector, or the
   browser zoomed in) the card was clipped and the Log In button became
   physically unreachable. That overflow:hidden was only there to hide
   the scrollbar caused by the body margin fixed above, so with the
   cause gone the card can centre itself in normal flow and simply
   scroll when it doesn't fit. */
body.login-body{
    display:flex;
    flex-direction:column;
    overflow:auto;
    padding:20px 5px;
}

.navbar{
    flex:0 0 auto;
}

.card-subtitle{
    font-size:12px;
    color:#555;
    margin:-7px 0 8px;
}

/* The calendar fills its card instead of leaving a large blank
   area underneath it (Round 6). */
.schedule-card .panel-scroll .calendar{
    height:100%;
}

.panel-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:auto;

    padding-right:6px;

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

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

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

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

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

/* Column headers stay visible while the rows scroll under them. */
.panel-scroll table thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:#e5e5e5;
}

/* Kept for the Appointment History / Upcoming Appointments /
   Ongoing Sessions pages. The full-height behaviour now comes
   from the shared body rule above (this class was never actually
   applied to any page), so it only needs to not fight it. */
body.history-page{
    display:flex;
    flex-direction:column;
    height:100%;
    box-sizing:border-box;
    overflow:hidden;
}

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

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

.login-container{
    width:400px;
    max-width:100%;
    /* margin:auto on a flex child centres it on BOTH axes while still
       scrolling when the window is too short - unlike the
       position:fixed / translate(-50%,-50%) it replaces. */
    margin:auto;
    padding:30px;
    box-sizing:border-box;
    background:#e5e5e5;
    border:2px solid black;
    border-radius:20px;
}

.login-container h3{
    color:#c81d3a;
    margin-top:-5px;
    /* Bug fix (Sept 09 review): this kept the browser's default ~18px
       bottom margin, which collapsed against the h1's -28px top margin
       below to roughly -9px - pulling "Admin Login" up INTO this line. */
    margin-bottom:0;
}

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

.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:8px;

    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-left:10px;
    padding-right:45px;

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

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

    box-sizing:border-box;
}

.eye{
    position:absolute;

    right:15px;
    top:calc(50% - 0px);

    transform:translateY(-50%);

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    color:#555;
}

.eye:hover{
    color:#c81d3a;
}

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


.navbar{
    padding:20px;
    margin-bottom:-28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative; /* anchors .mobile-menu-dropdown (see RESPONSIVE section) */
}

/* Each nav button gets its own separate, individually-sized box
   (rather than one shared width for all five) - just wide enough to
   fit that button's own label at bold weight. So switching a tab to
   .active (which makes it bold) never resizes its box, but the
   navbar as a whole stays as compact as possible and the rest of
   the navbar (logo, title) is left undisturbed. */
.navbar-menu-btn{
    display:inline-block;
    text-align:center;
    box-sizing:border-box;
}

.nav-home{ min-width:55px; }
.nav-commons{ min-width:165px; }
.nav-scheduling{ min-width:95px; }
.nav-login{ min-width:160px; }
.nav-logout{ min-width:65px; }

.navbar-menu-btn.active{
    color:#c81d3a;
    font-weight:bold;
}

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

.menu{
    display:flex;
    align-items:center;
    margin-left: 10px;
    margin-top: -15px;
    gap:12px;
}

.menu a{
    text-decoration:none;
    margin-left:15px;
    color:black;
    font-weight:medium;
    opacity: 0.95;
    transition: color 0.3s ease, opacity 0.3s ease;
}

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

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

    /* Round 6: fills the space the navbar leaves, and stretches its
       panels to the same height so they all end flush at the bottom
       of the window. Was align-items:flex-start, which let every
       panel stop at its own content height instead. min-height/
       min-width:0 let the panels shrink so their inner scroll areas
       engage rather than overflowing the page. */
    flex:1 1 auto;
    min-height:0;
    min-width:0;
    align-items:stretch;
    box-sizing:border-box;
}

/* LEFT PANEL - AVAILABILITY STATUS */

.left-panel{
    flex:1.5;

    /* Round 6: part of the height chain above - lets .status-card
       inside it stretch to the full panel height and shrink far
       enough for .stations-scroll to scroll. */
    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: the card fills its panel in BOTH directions. It used to
       be pinned to a JS-computed height (setAvailabilityPanelHeight()
       in dashboard.html, now deleted) - that measured the tallest
       sibling instead of the window, so removing cards from the right
       panel in Round 4 silently collapsed this one. The height now
       comes from the page shell at the top of this file. flex:1 1 auto
       matters too: .left-panel is a flex row, and a flex item defaults
       to content-width, which is what made the kiosk's copy of this
       card visibly shrink on a closed day (Round 5). */
    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:5px;
    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:-12px 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:34px;
    width:400px;
    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:34px;
    box-sizing:border-box;
}

.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. Ported
   from the kiosk system's dashboard - see the .status-card comment
   above. */
.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;
}

/* Pamagat ng grupo sa station grid ("Individual Stations" / "Group Tables").
   Sumasaklaw sa buong hanay ng grid. */
.station-group-heading{
    grid-column:1 / -1;
    margin:0;
    padding-bottom:4px;
    border-bottom:2px solid #c81d3a;

    font-size:16px;
    font-weight:bold;
    color:#c81d3a;
}

.station-group-heading:not(:first-child){
    margin-top:12px;
}

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

/* RIGHT PANEL - SCHEDULE APPOINTMENT */

.right-panel{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:20px;
    min-width:320px;
}

/* RIGHT PANEL */

.right-panel{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:20px;
    min-width:320px;
}

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

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

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

.qrstatus-invalid{
    color:#c81d3a;
}

.qrstatus-expired{
    color:#c79a3b;
}

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

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

    margin-top:20px;

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

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

.card button{
    margin-top:10px;
    margin-bottom:-5px;
    display:flex;
    justify-content:flex-end;

    gap:10px;
}

/* APPOINTMENT DETAILS */

.appointment-card{
    padding:15px 18px;
}


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

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

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

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

.ongoing-appointments-card{
    padding:18px 18px;

    /* Round 5: now that this is the only card in the right panel, it
       stretches to the panel's full (JS-set) height instead of sitting
       as one short box beside a full-height Availability Status panel.
       .right-panel is already a flex column, so flex:1 1 auto + a
       flex-column card is all it takes; min-height:0 is what lets the
       scroll area below actually shrink and scroll. */
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
}

.ongoing-appointments-scroll{
    /* Round 5: was a fixed max-height:160px, which wasted the rest of
       the now full-height card. Fills whatever room is left under the
       heading and scrolls only once the list outgrows it. */
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;

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

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

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

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

.ongoing-appointments-table{
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
}

.ongoing-appointments-table th{
    text-align:left;
    padding:4px 6px;
    border-bottom:2px solid #bbb;
}

.ongoing-appointments-table td{
    padding:4px 6px;
    border-bottom:1px solid #ccc;
}

.ongoing-appointments-empty{
    margin:6px 2px 0;
    font-size:13px;
    color:#777;
    text-align:center;
}

.opening-card{
    padding:15px 18px;
}

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

.opening-time{
    margin:0;

    font-size:14px;
    font-weight:bold;

    color:#000000;
}

.opening-note{
    margin-top:3px;

    font-size:11px;

    color:#000000;
}

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

.manage-panel{
    flex:1;
}

/* Bug fix (Round 4 - "overall margin decreased on Manage Stations"):
   this used to redeclare .status-card and .status-card h1 from scratch
   here, with the exact same selectors already defined up in the "LEFT
   PANEL - AVAILABILITY STATUS" section above. Because a later rule of
   equal specificity always wins, this second .status-card silently
   replaced the first one's height:100%/box-sizing/display:flex/
   flex-direction:column - not just on this page, but on EVERY admin
   page that uses .status-card (the dashboard's Availability Status
   card included), and .status-card h1's margin-bottom flipped from
   -5px to 2px site-wide. Removed the duplicates entirely; the shared
   .status-card/.status-card h1 rules above already cover the
   background/border/padding/spacing this page needs, and this page's
   own page-scoped <style> (see <head>) still applies its
   display:flex/flex-direction:column/min-height:0 layout override on
   top of that, same as before. */

.manage-controls{
    display:flex;

    align-items:center;

    gap:10px;
}

.manage-location-select{
    height:34px;
    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:34px;
    box-sizing:border-box;
}

/* Wraps the Manage Stations table so it - and only it - scrolls within
   the card (see the page-scoped <style> in manage-stations.html that
   pins the card's height). Same scrollbar treatment as the dashboard's
   .stations-scroll. */
.station-table-scroll{
    overflow-y:auto;

    padding-right:6px;

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

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

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

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

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

.station-table{
    width:100%;
    border-collapse:collapse;
}

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

    padding:5px 10px;
    border-bottom:2px solid #bbb;

    font-size:16px;
}

.station-table td{
    padding:5px 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;
    white-space:nowrap;
}

.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;
    margin-bottom:-5px;
    gap:5px;
}

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

    min-width:auto;

    font-size:12px;
}

.active{
    color:#c81d3a !important;
}

/* TAB LINKS */

.tab-link{
    flex:1;

    text-decoration:none;
}

/*  Confirmation Banner */

.confirmation-banner{
    display:none;

    padding:12px 16px;

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

    border-radius:12px;

    font-size:13px;
    font-weight:bold;

    line-height:1.4;
}

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


/* =============== SCHEDULING ================== */

.schedule-card{
    width:30%;
}

/* Right column (False Appointments + Overtime Logouts) - given its own
   explicit width so it can grow independently of the calendar panel. */
.appointments-panel{
    width:50%;
    flex:0 0 auto;
}

.schedule-filters select{
    flex:1;

    height:34px;
    padding:0 10px;
    border:2px solid #000000;
    border-radius:20px;
    box-sizing:border-box;
    line-height:34px;
}

/* Calendar */

.calendar{
    width:100%;

    border-collapse:collapse;

    text-align:center;
}

.calendar th{
    padding:10px;

    background:#f5f5f5;

    font-size:14px;
}

.calendar td{
    width:14%;

    height:55px;

    border:1px solid #ccc;

    vertical-align:top;

    padding-top:5px;

    font-weight:bold;
}

.red-date{
    color:#c81d3a;
}

.inactive{
    color:#bbb;
}

/* Live calendar day cells (Scheduling page) */

.calendar td{
    position:relative;
    text-align:left;
    padding-left:6px;
    padding-right:6px;
}

.calendar-day-number{
    text-align:center;
}

.today-date{
    background:#fdf3d9;
    box-shadow:inset 0 0 0 2px #c79a3b;
    border-radius:6px;
}


.calendar td.has-occupied{
    box-shadow:inset 0 -4px 0 0 #c81d3a;
}


.today-date.has-occupied{
    box-shadow:inset 0 0 0 2px #c79a3b, inset 0 -4px 0 0 #c81d3a;
}

.calendar-events{
    margin-top:4px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.calendar-event{
    font-size:9px;
    font-weight:normal;
    line-height:1.25;
    padding:2px 4px;
    border-radius:5px;
    color:white;
    white-space:normal;
    word-break:break-word;
}


.event-occupied{
    background:#c81d3a;
}

/* Philippine non-working holidays on the Scheduling calendar */
.holiday-date{
    background:#efe6fb;
    box-shadow:inset 0 0 0 2px #6a3fa0;
    border-radius:6px;
}


.holiday-date.has-occupied{
    box-shadow:inset 0 0 0 2px #6a3fa0, inset 0 -4px 0 0 #c81d3a;
}

.event-holiday{
    background:#6a3fa0;
}


/* False Appointments Table */
.false-table{
    width:100%;
    border-collapse:collapse;
}

.false-table th{
    text-align:left;
    padding:4px 5px;
    border-bottom:2px solid #ccc;
    font-size:14px;
}

.false-table td{
    padding:4px 5px;
    border-bottom:1px solid #ddd;
    font-size:13px;
}

.false-table .red-btn{
    padding:0px 15px;
    font-size:12px;
    margin-top:2px;
}

/* ================= LOGIN MANAGEMENT ================= */

.history-tabs{
    flex:0 0 auto;
    display:flex;
    gap:6px;
    margin-top: 20px;
    margin-bottom: -15px;
    margin-left: 20px;
    margin-right: 20px;
}

.tab-link {
    display:flex;
    align-items:center;
}

.tab-btn-left {
    flex:1 1 auto;
    min-width:0;
    box-sizing:border-box;
    height:34px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    color:#000;
    font:600 13px Poppins, Arial, sans-serif;
    cursor:pointer;
}

.tab-btn-right {
    flex:1 1 auto;
    min-width:0;
    box-sizing:border-box;
    height:34px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    color:#000;
    font:600 13px Poppins, Arial, sans-serif;
    cursor:pointer;
}

.tab-btn-middle {
    flex:1 1 auto;
    min-width:0;
    box-sizing:border-box;
    height:34px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    color:#000;
    font:600 13px Poppins, Arial, sans-serif;
    cursor:pointer;
}

/* Spacing between tabs now comes from the .history-tabs flex "gap"
   (see above), not from per-button margins. That keeps every tab's
   box-sizing/width identical whether or not it's active - previously
   .active-tab added its own margin-left (and .tab-btn-middle.active-tab
   patched in a margin-right), which made the active tab a different
   effective size and shifted the gaps around it. */
.active-tab{
    flex:1 1 auto;
    min-width:0;
    box-sizing:border-box;
    height:34px;
    border:2px solid #000000;
    border-radius:20px;
    background:#c81d3a;
    color: #ffffff;
    font:600 13px Poppins, Arial, sans-serif;
    cursor:pointer;
}

/* HISTORY TAB HOVER / PRESS ANIMATION
   Patterned after the kiosk system's .reservation-tab-btn /
   .right-panel-tab-btn: a plain darken on hover (no lift/shadow) and
   a quick scale-down squash on click. Applies to all three tabs
   (Appointment History / Upcoming Appointments / Ongoing Sessions),
   active or not. */
.tab-btn-left,
.tab-btn-right,
.tab-btn-middle,
.active-tab{
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.tab-btn-left:hover,
.tab-btn-right:hover,
.tab-btn-middle:hover{
    background:#f2f2f2;
}

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

.tab-btn-left:active,
.tab-btn-right:active,
.tab-btn-middle:active,
.active-tab:active{
    transform:scale(0.98);
}

.history-container{
    margin:25px 20px 20px 20px;

    padding:20px;

    background:#e5e5e5;

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

    box-sizing:border-box;

    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.history-top{
    display:flex;

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

    margin-bottom:0px;

    flex:0 0 auto;
}

.history-top h1{
    color:#c81d3a;
    margin-top:-10px;
    margin-bottom:2px;
    font-size:27px;
}

.history-filter{
    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:5px;

    font-size:14px;

    flex:0 0 auto;
    width:100%;
    box-sizing:border-box;
}

.history-filter select{
    /* Grow to fill the row (each select shares the leftover space
       equally) so the control row spans the same width as the table
       below it instead of leaving empty space on the right. */
    flex:1 1 0;
    min-width:0;

    height:34px;
    padding:0 10px;

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

    background:white;
    font-size:13px;
    box-sizing:border-box;
    line-height:34px;
}

.history-filter label{
    font-weight:bold;
    flex:0 0 auto;
    white-space:nowrap;
}

.history-table-wrapper{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

.history-table{
    width:100%;
    margin-top:0px;
    border-collapse:collapse;
    table-layout:fixed;
}

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

    padding:5px 0px;

    border-bottom:2px solid #ccc;

    font-size:13px;

    position:sticky;
    top:0;
    background:#e5e5e5;
    z-index:1;

    overflow-wrap:break-word;
}

.history-table td{
    padding:5px 0px;

    border-bottom:1px solid #ddd;

    font-size:12px;

    overflow-wrap:break-word;
}

/* =========================================================
   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;
    line-height:34px;
}

/* 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:0px -16px 6px 2px;
    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;
}

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

.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 */
.timeline-scroll{
    flex:1 1 auto;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:12px;
    background:#f7f7f7;
    border:1px solid #d0d0d0;
}

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

/* =========================================================
   MANAGE STATIONS / MANAGE LOCATIONS (added below without
   changing any rule above).
   ========================================================= */

/* "Closed" text in the manage-stations table's Open/Closed column */
.closed-text{
    color:#444;
    font-weight:bold;
}

/* -------- Overlay (confirm remove / manage locations) -------- */

.overlay-backdrop{
    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;
}

/* Ang message pop-up (errors) ay dapat laging nasa ibabaw ng ibang overlay,
   hal. ng Rename; kung pareho ang z-index, ang nasa dulo ng DOM ang panalo
   at natatakpan ang mensahe. */
#message-overlay.overlay-backdrop{
    z-index:1100;
}

.overlay-backdrop.show{
    display:flex;

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

/* Exit animation. JS should add this class instead of immediately
   removing ".show", then remove the backdrop (or drop back to
   display:none) once the animation finishes - e.g.:
   box.classList.add('closing');
   backdrop.addEventListener('animationend', () => backdrop.classList.remove('show','closing'), {once:true});
*/
.overlay-backdrop.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); }
}

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

.overlay-backdrop.closing .overlay-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);
    }
}

.overlay-box{
    position:relative;

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

    overflow-y:auto;

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

    padding:16px 22px;

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

/* Close (x) button, upper right of every overlay/modal box. */
.overlay-close{
    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;
}

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

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

.overlay-box::-webkit-scrollbar{
    width:8px;
}

.overlay-box::-webkit-scrollbar-track{
    background:transparent;
}

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

.overlay-box::-webkit-scrollbar-thumb:hover{
    background:#999;
}

.overlay-box-wide{
    width:560px;
}

.overlay-label{
    display:block;
    font-size:13px;
    font-weight:bold;
    margin-top:10px;
    margin-bottom:4px;
}

.overlay-status{
    min-height:1.2em;
    margin:8px 0 0;
    font-size:12.5px;
    color:#c81d3a;
}

.overlay-list{
    text-align:left;
    max-height:260px;
    overflow-y:auto;

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

.overlay-list::-webkit-scrollbar{
    width:8px;
}

.overlay-list::-webkit-scrollbar-track{
    background:transparent;
}

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

#day-details-list{
    padding-top:24px;
}

.remove-reason-input{
    width:100%;
    padding:8px 12px;
    margin-top:4px;

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

    box-sizing:border-box;
    font:100% Poppins, Arial, sans-serif;
    font-size:13px;
    resize:vertical;
}

.overlay-box h3{
    color:#c81d3a;
    margin-top:-5px;
    margin-bottom:-5px;
    font-size:27px;
}

.overlay-box p{
    font-size:14px;
    margin-top:-5px;
    line-height:1.4;
}

.overlay-buttons{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:16px;
}

/* Add-a-location row inside the Manage Locations overlay */
/* CALENDAR SETTINGS card (Scheduling page) */
.calendar-settings-form{
    display:flex;
    flex-direction:column;
}

.calendar-settings-label{
    font-size:13px;
    font-weight:bold;
    margin-top:10px;
    margin-bottom:4px;
}

.calendar-settings-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.calendar-settings-year-input,
.calendar-settings-select,
.calendar-settings-date-input{
    padding:6px 12px;

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

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

/* Dropdown pill: fixed height so it matches the other pill controls */
.calendar-settings-select{
    height:34px;
    padding-top:0;
    padding-bottom:0;
    line-height:34px;
}

.calendar-settings-year-input{
    flex:1;
    min-width:0;
}

.calendar-settings-select,
.calendar-settings-date-input{
    width:100%;
}

.calendar-settings-status{
    min-height:1.1em;
    margin:8px 0 0;
    font-size:12.5px;
    color:#c81d3a;
}

/* Calendar Settings opens from a button placed inside the Upcoming
   Schedules panel, on its own row below the calendar legend, instead
   of the lower-right corner of the right column. */
.calendar-settings-trigger-row{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
    margin-bottom:-5px;
}

/* ------------------------------------------------------------
   STUDENT RECORDS (Student Info page - library roster import)
   ------------------------------------------------------------ */
.student-import-row{
    display:flex;
    gap:10px;
    align-items:center;
    margin:8px 0;
}

.student-import-row input[type="file"]{
    flex:1;
    font-size:12.5px;
}

.student-records-subheading{
    font-size:16px;
    margin:16px 0 6px;
}

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

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

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

.add-location-row{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.add-location-row input{
    flex:1;
    padding:8px 14px;

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

    box-sizing:border-box;
    font-size:13px;
    font-family:Poppins, Arial, sans-serif;
}
/* Shown under the Scheduling calendar when the displayed year's
   Chinese New Year / Eid dates haven't been added yet (Sept 09
   review) - so a year past the end of the lunar table is obviously
   incomplete rather than silently missing those holidays. */
.lunar-holiday-notice{
    margin:6px 0 0;
    font-size:11.5px;
    line-height:1.4;
    color:#8a6d1f;
}

/* ============================================================
   RESPONSIVE (portrait tablet / phone)
   ------------------------------------------------------------
   Same reasoning as the kiosk system's copy of this section: the
   page shell above (.navbar/.main-content/.left-panel/.status-card)
   assumes a fixed-height desktop/landscape window with no page
   scroll. Below 899px this switches to a normal scrolling page
   with stacked panels instead, and any wide <table> gets its own
   horizontal scroll so its columns don't get squeezed unreadably
   narrow.

   The .navbar itself has no flex-wrap, so .menu's five links just
   get pushed past the right edge on a narrow screen instead of
   wrapping - .navbar-burger/.mobile-menu-dropdown (populated and
   wired up by static/overlay.js) replace .menu with a single
   tappable menu button below 700px.
   ============================================================ */

/* Base (hidden) state for the two elements the @media blocks below
   toggle. MUST come before those @media blocks: an unconditional
   rule beats a same-specificity rule inside a matched @media block
   when the unconditional one is later in source order, so defining
   "display:none" down here would silently defeat every breakpoint
   above it regardless of viewport width. */
.navbar-burger{
    display:none;
    align-items:center;
    justify-content:center;
    width:38px;
    height:34px;
    border:1px solid black;
    border-radius:8px;
    background:#fff;
    font-size:16px;
    cursor:pointer;
}

.mobile-menu-dropdown{
    display:none;
    position:absolute;
    right:20px;
    top:64px;
    flex-direction:column;
    gap:2px;
    background:#fff;
    border:1px solid black;
    border-radius:10px;
    padding:8px;
    min-width:180px;
    box-shadow:0 10px 24px -10px rgba(0,0,0,.35);
    z-index:20;
}

.mobile-menu-dropdown.show{
    display:flex;
}

.mobile-menu-dropdown a{
    padding:9px 10px;
    border-radius:6px;
    text-decoration:none;
    color:black;
    font-size:13px;
    font-weight:500;
}

.mobile-menu-dropdown a.active{
    color:#c81d3a;
    background:#fbeaea;
    font-weight:bold;
}

@media (max-width:899px){
    body{
        height:auto;
        min-height:100%;
        overflow:auto;
    }
    .main-content{
        flex-direction:column;
        min-height:auto;
    }
    .left-panel{
        /* .left-panel's base rule is flex:1.5 (flex-grow:1.5,
           flex-basis:0%) - sized to grow generously against
           .right-panel in the DESKTOP row layout. Once .main-content
           stacks them in a column above, that same flex-grow makes
           .left-panel (and everything flexed inside it down to
           .stations-scroll) balloon to fill the column's leftover
           height instead of just fitting its own content - which is
           exactly the empty space this override removes. */
        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(3,1fr);
    }
    .station{
        min-height:110px;
    }
    /* 5 buttons (Manage Locations/Programs, Add Learning Station,
       Open/Close All) in one un-wrapped flex row ran off the right
       edge at narrow widths - let them wrap onto more rows instead. */
    .add-button-container{
        flex-wrap:wrap;
        justify-content:center;
    }
    /* .schedule-card (30%) and .appointments-panel (50%) are sized to
       sit side by side in the Scheduling page's desktop row layout -
       once .main-content stacks them vertically (above), those
       leftover percentages squeezed each one down to a sliver of the
       full-width column it's actually in now. */
    .schedule-card,
    .appointments-panel{
        width:100%;
    }
    /* :not(.calendar) - the Scheduling page's calendar grid is a
       percentage-based table (width:100%, each <td> 14%) that already
       shrinks to fit any width on its own. display:block + nowrap here
       is meant for data tables with many columns (Appointment History,
       etc.), which need their own horizontal scroll instead - applying
       it to the calendar too broke its normal table layout algorithm,
       collapsing all 7 columns down to a sliver instead of the shrink-
       to-fit behavior it already had. */
    table:not(.calendar){
        display:block;
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
    }
}

@media (max-width:700px){
    .menu{
        display:none;
    }
    .navbar-burger{
        display:inline-flex;
    }
}

@media (max-width:480px){
    .navbar-content h2{
        font-size:16px;
    }
    .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-group-heading{
        font-size:12px;
        padding-bottom:2px;
    }
    .station-group-heading:not(:first-child){
        margin-top:6px;
    }
    .station-label{
        font-size:9px;
        margin:0 0 1px;
        text-align:center;
    }
    /* 7 columns in ~350px of usable width is cramped at the calendar's
       normal sizing - trim padding/font/height so a full week still
       reads cleanly instead of just barely fitting. */
    .calendar th{
        padding:4px 2px;
        font-size:11px;
    }
    .calendar td{
        height:40px;
        padding:3px 2px 2px;
        font-size:11px;
    }
    /* .status-left (heading/date/location select) and .status-right
       (the Vacant/Reserved/... counts) sit side by side by default.
       .status-left has no min-width:0, so as a flex item it refuses
       to shrink below its content's natural width - and that content
       includes .location-select's own fixed width:400px - which was
       inflating the whole page's layout width past the actual
       viewport. Stacking them (and letting .status-left shrink)
       fixes both the overlap and that page-wide overflow. */
    .top-status{
        flex-direction:column;
    }
    .status-left{
        min-width:0;
        width:100%;
    }
    /* .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 instead of as a wall of stacked text. */
    .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 */
    /* .tab-btn-left/-middle/-right are fixed height:34px, one line -
       shrinking width via min-width:0 at phone width makes their text
       wrap to 2 lines, which then overflows that fixed height and
       visually overlaps the tab next to it. Stack the three tabs into
       their own full-width rows instead, with room to wrap cleanly. */
    .history-tabs{
        flex-direction:column;
        gap:8px;
    }
    .tab-btn-left,
    .tab-btn-right,
    .tab-btn-middle{
        height:auto;
        min-height:34px;
        padding:8px 10px;
        white-space:normal;
        line-height:1.3;
    }
}


/* ================= SESSION LIFECYCLE (K2 / A5) ================= */

/* Mga kulay ng status sa Session History / Ongoing Sessions (mockup p.18):
   Ongoing = pula (.occupied-text), Completed = berde (.vacant-text),
   Overtime = kahel (ito). */
.overtime-text{
    color:#e07b00;
    font-weight:bold;
}

/* "5 min left" / "Time's up" na badge katabi ng Ongoing status. */
.session-time-badge{
    display:inline-block;
    margin-left:6px;
    padding:1px 8px;
    border-radius:20px;
    font-size:10.5px;
    font-weight:bold;
    white-space:nowrap;
}

.session-time-badge.is-warning{
    background:#fff3cd;
    color:#8a5a00;
    border:1px solid #e0a800;
}

.session-time-badge.is-finished{
    background:#f8d7da;
    color:#a11a2b;
    border:1px solid #c81d3a;
}

/* Highlight ng buong row (Ongoing Sessions page at Home panel). */
tr.session-row-warning > td{
    background:#fff6dd;
}

tr.session-row-finished > td{
    background:#fbe3e6;
}

/* Banner na lumalabas sa lahat ng admin page kapag may session na 5
   minuto na lang ang natitira o tapos na ang oras (session-alerts.js).
   Nasa flex column ng body, sa pagitan ng navbar at ng main content, kaya
   hindi nito sinisira ang height chain ng mga panel. Ang malaking
   margin-top ay para lampasan ang negatibong margin-bottom ng .navbar. */
.session-alert-banner{
    flex:0 0 auto;
    position:relative;
    z-index:5;
    margin:34px 20px -22px;
    padding:8px 14px;
    border:2px solid #000;
    border-radius:20px;
    background:#fff6dd;
    font-size:13px;
    box-sizing:border-box;
}

.session-alert-banner[hidden]{
    display:none;
}

.session-alert-banner ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.session-alert-banner li{
    display:flex;
    align-items:center;
    gap:8px;
}

.session-alert-tag{
    flex:0 0 auto;
    padding:1px 10px;
    border-radius:20px;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    white-space:nowrap;
}

.session-alert-banner li.is-warning .session-alert-tag{
    background:#e0a800;
}

.session-alert-banner li.is-finished .session-alert-tag{
    background:#c81d3a;
}

.session-alert-text{
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:anywhere;
}

.session-alert-dismiss{
    flex:0 0 auto;
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:18px;
    line-height:1;
    color:#444;
}

.session-alert-more{
    font-size:12px;
    color:#555;
}

/* Station Map pop-up (Home) - kapareho ng kiosk. */
.overlay-box-map{
    width:min(860px, 92vw);
}

.station-map-image{
    display:block;
    width:100%;
    height:auto;
    margin-top:8px;
}

/* Details pop-up ng Session History / Ongoing Sessions (p.19-22). */
.session-detail-name{
    margin:6px 0 2px;
    font-size:16px;
    font-weight:bold;
    color:#000;
}

.session-detail-gap{
    margin-top:10px !important;
}

@media (max-width:700px){
    .session-alert-banner{
        margin:10px 10px -18px;
        padding:8px 10px;
    }
}

/* .red-btn / .gray-btn ay display:inline-flex, na nag-o-override sa
   default na [hidden] ng browser - kailangan ito para gumana ang
   hidden attribute sa mga button (hal. End Session / Remove Overtime
   Strike na lumalabas lang sa tamang status). */
button[hidden]{
    display:none !important;
}

/* Phone width: ang Session History / Ongoing Sessions table ay may 8
   column, kaya bigyan ng minimum width para ang .panel-scroll ang mag-
   scroll nang pahalang (hindi magsiksikan at magdikit ang mga column,
   hal. ang petsang walang espasyo), at hayaang mag-wrap ang mga filter. */
@media (max-width:700px){
    .history-table{
        min-width:760px;
    }

    .history-filter{
        flex-wrap:wrap;
    }

    .history-filter select{
        flex:1 1 140px;
    }
}

/* "Accounts" (dating "Student Info") - sukat ng sariling box para hindi
   magbago ang lapad ng navbar kapag naging bold ang active na link. */
.nav-accounts{ min-width:80px; }

/* ================= ACCOUNTS (A4) / GENERATE REPORT ================= */

/* Search + Sort by ng Manage Student Accounts (mockup p.15). */
.accounts-controls{
    display:flex;
    align-items:center;
    gap:10px;
    margin:2px 0 10px;
    flex:0 0 auto;
}

.accounts-controls input[type="text"]{
    flex:1 1 auto;
    min-width:0;
    height:34px;
    padding:0 14px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    font:13px Poppins, Arial, sans-serif;
    box-sizing:border-box;
}

.accounts-controls label{
    font-weight:bold;
    font-size:14px;
    white-space:nowrap;
}

.accounts-controls select{
    flex:0 0 auto;
    height:34px;
    padding:0 10px;
    border:2px solid #000000;
    border-radius:20px;
    background:white;
    font:13px Poppins, Arial, sans-serif;
    box-sizing:border-box;
}

.accounts-table td:nth-child(3){
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Right column ng Accounts: Import card (nakapirming taas) at Overtime
   Logouts (pumupuno sa natitira at nag-s-scroll sa loob). */
.import-card{
    flex:0 0 auto;
}

/* .card button ay may sariling margin/display - huwag guluhin ang
   pagkakahanay ng Choose File at Import. */
.import-card .student-import-row button{
    margin-top:0;
    margin-bottom:0;
}

.overtime-card{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
}

.overtime-card .panel-scroll{
    margin-top:6px;
}

/* Disabled na Restrict (wala pang 3 strikes) at iba pang button. */
.red-btn:disabled,
.gray-btn:disabled{
    opacity:0.4;
    cursor:not-allowed;
}

/* Dropdown sa loob ng "add-location-row" (Semester Report ng Generate
   Report) - kapareho ng itsura ng mga input doon. */
.add-location-row select{
    flex:1;
    min-width:0;
    height:34px;
    padding:0 14px;

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

    box-sizing:border-box;
    font-size:13px;
    font-family:Poppins, Arial, sans-serif;
}

/* Operating Days ng Calendar Settings (mockup p.13): pill toggles -
   berde ang bukas na araw, pula ang sarado. Totoong checkbox pa rin ang
   nasa loob (keyboard/accessibility), nakatago lang ang itsura nito. */
.weekday-pills{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.weekday-pill{
    position:relative;
    cursor:pointer;
}

.weekday-pill input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.weekday-pill span{
    display:inline-block;
    padding:5px 12px;
    border:2px solid #c81d3a;
    border-radius:20px;
    background:#ffffff;
    color:#c81d3a;
    font-size:12.5px;
    font-weight:bold;
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.weekday-pill input:checked + span{
    border-color:#2e8b57;
    background:#eefaf3;
    color:#2e8b57;
}

.weekday-pill input:focus-visible + span{
    outline:2px solid #000000;
    outline-offset:2px;
}

/* Unmapped Course Codes (Accounts) - maaaring mahaba ang listahan sa unang
   import ng roster; nag-s-scroll ito sa loob para hindi mawala sa screen
   ang Overtime Logouts sa ilalim. */
#unmapped-course-codes-list{
    max-height:140px;
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
    scrollbar-color:#bbb transparent;
}

.import-card .group-member-row{
    padding:5px 10px;
    margin-bottom:4px;
}

.import-card .student-records-subheading{
    margin:6px 0 2px;
}

/* Phone width: Accounts - siksik na table para kita pa rin ang Details
   button, at mag-wrap ang Import row at ang search/sort controls. */
@media (max-width:700px){
    .accounts-table th,
    .accounts-table td{
        padding:4px 3px;
        font-size:12px;
    }

    .accounts-table td:nth-child(3){
        max-width:90px;
    }

    .accounts-table .table-btn{
        padding:6px 10px;
        margin-left:0;
    }

    .accounts-controls{
        flex-wrap:wrap;
    }

    .accounts-controls input[type="text"]{
        flex:1 1 100%;
    }

    .student-import-row{
        flex-wrap:wrap;
    }

    .student-import-row input[type="file"]{
        flex:1 1 100%;
        min-width:0;
    }
}

/* Napakakitid na screen: itago ang Program column ng Accounts para
   laging abot ang Details button (nasa Details modal pa rin ang Program). */
@media (max-width:480px){
    .accounts-table th:nth-child(3),
    .accounts-table td:nth-child(3){
        display:none;
    }
}

/* Mas marami na ang button sa ilalim ng mga panel (Home: 4, Manage
   Stations: 5) - hayaang mag-wrap sa makitid na screen sa halip na
   lumabas sa card o magsiksikan ang teksto. */
.buttons,
.add-button-container{
    flex-wrap:wrap;
}

/* Oras at "minutes remaining" sa occupied na station tile ng admin Home
   (mockup p.9) - kapareho ng kiosk. */
.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;
}

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