:root {
    --navbar-height: 56px; /* tweak if your navbar is taller/shorter */
    --grid-header-group-height: 42px; /* default, JS will overwrite */
}

/* Make the page a full-height flex column so the grid can fill remaining space */
html,
body {
    height: 100%;
}

body {
    padding-top: var(--navbar-height);
    overflow: hidden;           /* stop the page itself from scrolling */
    display: flex;
    flex-direction: column;
}

/* saner layout math everywhere */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ----------------------------- */
/* GLOBAL REUSABLE BEHAVIOUR     */
/* ----------------------------- */

.valid_drop_target_border {
    border-color: green !important;
    border-width: 4px !important;
}

/* Dropdowns scroll nicely if tall */
.dropdown-menu {
    overflow: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 150px);
}

/* Pointer cursor helpers */
.jump-link,
th.clickable-header,
tr.clickablerow,
li.clickable_list_item {
    cursor: pointer;
}

.error {
    color: red;
}

.employee_cell {
    max-width: 140px;
}

/* Whiteboard title table widths */
.whiteboard-table-title {
    width: 130px;
}

.whiteboard-table-end-icons {
    width: 55px;
}

.whiteboard-table-critical-icon-cell {
    width: 20px;
}

/* Whiteboard table layout */
.whiteboard-table {
    table-layout: fixed;
    width: 100%;
}

/* prevent the UL from sitting too high in table cell */
dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0;
}

/* Navbar toggler cleanup */
.navbar-toggler:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.navbar-toggler {
    border: 0 !important;
}

/* Generic row wrapper used elsewhere (no vertical scroll here) */
.tbl-row {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
}


/* ----------------------------- */
/* TABLE BASE STYLING            */
/* ----------------------------- */

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 0.5px solid #000;
}

th,
td {
    border: 0.5px solid #000;
    padding: 10pt;
    text-align: center;
    background-color: #fff;
}

.table td.platoon_label {
    background-color: lightgreen;
}

.table td.divider_label {
    background-color: lightgrey;
}

/* Remove extra white band under any schedule table */
.schedule_table {
    margin-bottom: 0;
}


/* ----------------------------- */
/* STICKY COLUMN                 */
/* ----------------------------- */

.schedule_table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 30;
    background-color: #eee;
}


/* ----------------------------- */
/* SCROLLING GRID CONTAINER      */
/* ----------------------------- */

/* Main content area (the thing that holds grid_page_wrapper) */
#main {
    flex: 1 1 auto;
    min-height: 0; /* allow children to scroll */
}

/* Root layout for schedule pages:
   - lives below the navbar
   - fills the remaining viewport space
   - lets any bars take natural height
   - grid fills the rest and scrolls
*/
.schedule-page-root,
.grid-page-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* so children can actually scroll */
}

#grid_scroll_container {
    /* No fixed height – it just fills remaining space in the wrapper */
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;
}


/* ----------------------------- */
/* STICKY GRID HEADERS (JS-assisted) */
/* ----------------------------- */

/* First header row: group row */
#tableheader tr#group-row {
    position: sticky;
    top: 0;
    background: #eee;
    z-index: 40;
}

/* Second header row: column row
   - The top offset is dynamic: updated by JS based on the actual height of the group row. */
#tableheader tr#column-row {
    position: sticky;
    top: var(--grid-header-group-height, 42px); /* fallback to 42px */
    background: #eee;
    z-index: 41;
}


/* ----------------------------- */
/* STICKY UNPUBLISHED BARS       */
/* ----------------------------- */

/* Unpublished bar: just a normal block with some spacing handled by Bootstrap */
#unpublished_bar_region {
    position: static;      /* default */
    z-index: auto;         /* let it be part of normal stacking */
    margin: 0;             /* Bootstrap mb-3 / mb-2 do the rest */
}


/* ----------------------------- */
/* HTMX INDICATOR                */
/* ----------------------------- */

/* Hidden by default – takes no space */
.htmx-indicator {
    display: none;
}

/* Show when the request is active
   - either an ancestor has .htmx-request
   - or the indicator itself does (hx-indicator="#id")
*/
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
    display: inline-flex;
    align-items: center;
}