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

/* 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;
    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,1fr);

    gap:10px;
}

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

    border-radius:10px;

    color:white;
    font-weight:bold;

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

.password-box{
    position:relative;
}

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

.vacant{
    background:#2e8b57;
}

.occupied{
    background:#c81d3a;
}

.reserved{
    background:#c79a3b;
}

.closed{
    background:#444; 
}

/* BUTTONS */


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

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

    gap:5px;

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

.clear-btn{
    border: none;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 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;
}

.reserved-text{
    color:#c79a3b;
    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-reserved{
    box-shadow:inset 0 -4px 0 0 #c79a3b;
}

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

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

.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-reserved{
    background:#c79a3b;
}

.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-reserved{
    box-shadow:inset 0 0 0 2px #6a3fa0, inset 0 -4px 0 0 #c79a3b;
}

.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.reserved{
    background:#c79a3b;
}

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

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

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

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

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

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

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

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