html {
    height: 100%;
}

body {
    background-color: aliceblue;
    min-height: 100%;
    position: relative;
    margin-bottom: -60px;
}


div.content {
    min-height: 100%;
}

.hiddenRow {
    padding: 0 !important;
}

footer {
    position: absolute;
    margin-top: 10px;
    bottom: 0;
    width: 100%;
    height: 60px;
}

#alert {
    display: block;
}

#alert:empty {
    display: none;
}

#warning {
    display: block;
}

#warning:empty {
    display: none;
}


/* ── IPSC request table: "cells ready" column group ─────────────────────── */

/* Spanning group header for the ready-week half — clearly tinted */
#ipsc thead tr:first-child th:last-child {
    background-color: rgba(25, 135, 84, 0.2);
    border-left: 2px solid rgba(25, 135, 84, 0.5);
}

/* Column headers and data cells for the ready-week columns (4–7) */
#ipsc thead tr:last-child th:nth-child(n+4),
#ipsc tbody td:nth-child(n+4) {
    background-color: rgba(25, 135, 84, 0.08);
}

/* Left border at column 4 marks the boundary between the two column groups */
#ipsc thead tr:last-child th:nth-child(4),
#ipsc tbody td:nth-child(4) {
    border-left: 2px solid rgba(25, 135, 84, 0.5);
}

/* When the viewed week is the real current week and it is closed (Wednesday
   23:59 cutoff — see RequestWindow::isCurrentWeekLocked()), the
   .ipsc-current-week-closed class (toggled server-side on load and
   client-side on week change, see form_processing.js) tints the
   current-week columns (1-3: Applicant, 6-well, 12-well) red instead of the
   default white, flagging that new requests can no longer be added for it.
   Same technique as #glia.glia-current-week-closed below. */
#ipsc.ipsc-current-week-closed thead tr:first-child th:first-child {
    background-color: rgba(220, 53, 69, 0.2);
}
#ipsc.ipsc-current-week-closed thead tr:last-child th:nth-child(-n+3),
#ipsc.ipsc-current-week-closed tbody td:nth-child(-n+3) {
    background-color: rgba(220, 53, 69, 0.08);
}


/* ── Glia request table: "next week" column group ────────────────────────── */
/* Same two-tone treatment as #ipsc above; the boundary sits after column 11
   (Applicant + 10 plate/flask fields) instead of column 3. */

/* Spanning group header for the next-week half — clearly tinted */
#glia thead tr:first-child th:last-child {
    background-color: rgba(25, 135, 84, 0.2);
    border-left: 2px solid rgba(25, 135, 84, 0.5);
}

/* Middle row (Continental/Island/Neurons sub-header spans, see
   Table::theadNested()) needs the same tint as the top row — its last two
   <th>s ("Neurons next week" + the blank cell over Remarks) belong to the
   next-week half, the first four (Applicant/Continental/Island/Flask) belong
   to the current-week half. Without this, that row is left uncolored between
   two tinted rows. */
#glia thead tr:nth-child(2) th:nth-child(n+5) {
    background-color: rgba(25, 135, 84, 0.2);
}
#glia thead tr:nth-child(2) th:nth-child(5) {
    border-left: 2px solid rgba(25, 135, 84, 0.5);
}

/* Column headers and data cells for the next-week columns (12–15) */
#glia thead tr:last-child th:nth-child(n+12),
#glia tbody td:nth-child(n+12) {
    background-color: rgba(25, 135, 84, 0.08);
}

/* Left border at column 12 marks the boundary between the two column groups */
#glia thead tr:last-child th:nth-child(12),
#glia tbody td:nth-child(12) {
    border-left: 2px solid rgba(25, 135, 84, 0.5);
}

/* When the viewed week is the real current week and it is closed (Wednesday
   12:00 cutoff — see RequestWindow::isCurrentWeekLocked()), the .glia-current-week-closed
   class (toggled server-side on load and client-side on week change, see
   form_processing.js) tints the current-week columns red instead of the
   default white, flagging that new requests can no longer be added for it. */
#glia.glia-current-week-closed thead tr:first-child th:first-child {
    background-color: rgba(220, 53, 69, 0.2);
}
/* Same red override for the middle row's first four (current-week) cells —
   mirrors the green tint added above for its last two (next-week) cells. */
#glia.glia-current-week-closed thead tr:nth-child(2) th:nth-child(-n+4) {
    background-color: rgba(220, 53, 69, 0.2);
}
#glia.glia-current-week-closed thead tr:last-child th:nth-child(-n+11),
#glia.glia-current-week-closed tbody td:nth-child(-n+11) {
    background-color: rgba(220, 53, 69, 0.08);
}


/* ── Home page notifications: urgent accordion panel color ──────────────── */

/* Bootstrap's own .accordion-button:not(.collapsed) rule (blue) has the same
   specificity as .alert-warning and appears later in bootstrap.min.css, so it
   repaints an urgent notification blue as soon as its panel is expanded.
   Combining both classes with :not(.collapsed) raises the specificity above
   both, keeping the same muted colors Bootstrap's own .alert-warning uses
   whether the panel is collapsed or expanded. */
.accordion-button.alert-warning:not(.collapsed) {
    color: #664d03;
    background-color: #fff3cd;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}


/* ── Navbar dropdowns: expand on hover ────────────────────────────────────── */
/* Bootstrap only opens a navbar dropdown on click; hovering the toggle (or
   tabbing into it) reveals the submenu directly, saving the extra click.
   Scoped to the navbar-expand-lg breakpoint used in header.inc.php — below
   that the navbar collapses into a stacked mobile menu, where hover doesn't
   apply and the normal tap-to-open behavior is kept. margin-top: 0 removes
   Bootstrap's small gap above the menu, which otherwise lets the mouse slip
   out of both the toggle and the menu before the hover reaches it. */
@media (min-width: 992px) {
    .navbar .dropdown:hover>.dropdown-menu,
    .navbar .dropdown:focus-within>.dropdown-menu {
        display: block;
        margin-top: 0;
    }
}


/* ── Finance page: "By Budget" carousel-style pager ──────────────────────── */
/* The narrow columns on each side of #chart-budget (finance.php) are click
   targets for prev/next page, rendered by renderBudgetPage() in js/finance.js.
   Kept a fixed width and full height of the card grid so the whole strip is
   clickable, not just the chevron icon. */
.budget-page-nav {
    width: 40px;
    flex-shrink: 0;
    cursor: pointer;
    color: #6c757d;
    border-radius: 4px;
    transition: background-color .15s ease, color .15s ease;
}
.budget-page-nav:hover:not(.disabled) {
    background-color: #f1f3f5;
    color: #212529;
}
.budget-page-nav.disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}