/* CnIndexPage — Index page layout styles */
/* Header styles: see page-header.css (CnPageHeader) */
/* Actions bar styles: see actions-bar.css (CnActionsBar) */

.cn-index-page {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding: calc(5 * var(--default-grid-baseline));
}

.cn-index-page__below-header {
    margin-bottom: calc(4 * var(--default-grid-baseline));
}

/* Body layout */
.cn-index-page__body {
	display: flex;
	flex: 1;
	min-height: 0;
}

.cn-index-page__main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
}

/* Map view fills the remaining space instead of sitting at a fixed height — no
   dead area under the map and nothing to scroll past to reach the cases. The map
   pans internally, so the column itself must not scroll. */
.cn-index-page__main--map {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cn-index-page__map {
	flex: 1;
	min-height: 300px;
}

/* Opt-in folder navigation pane (left of the list). */
.cn-index-page__folder-pane {
	flex: 0 0 240px;
	min-width: 0;
	padding: 8px 12px 8px 0;
	margin-right: 12px;
	border-right: 1px solid var(--color-border);
	overflow-y: auto;
}

.cn-index-page__loading {
	display: flex;
	justify-content: center;
	padding: calc(15 * var(--default-grid-baseline));
}

.cn-index-page__empty {
	padding: calc(10 * var(--default-grid-baseline)) calc(5 * var(--default-grid-baseline));
	text-align: center;
}

/* Explicit `0` rather than dropping the declaration: this element carries both
   `.cn-pagination` and `.cn-index-page__pagination`, and `.cn-pagination` sets
   `margin-top: calc(8 * baseline)` at the same (0,1,0) specificity. Only the
   later import (index-page.css, see index.css) wins the tie — deleting the
   declaration here would hand the element the larger 8-baseline margin instead
   of none. CnPagination's own 5-baseline padding supplies the spacing. */
.cn-index-page__pagination {
	margin-top: 0;
}

/* Table view owns both scroll axes. With the page column scrolling instead, the
   table's horizontal scrollbar sat at the bottom of the (taller-than-viewport)
   table, so it only appeared after scrolling down, and the pagination was
   likewise out of reach. Moving overflow onto the table container puts the
   horizontal scrollbar at the bottom edge of the visible table and keeps the
   pagination pinned below it. Must stay after the base `__main` /
   `__pagination` rules above — it overrides both. */
.cn-index-page__main--table {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cn-index-page__main--table > .cn-table-container {
	flex: 1;
	min-height: 0;
	/* Clip rather than scroll: the scrollport is `.cn-data-table__scroll` below.
	   A flex column so that wrapper can take the leftover height. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* CnPagination's own padding supplies the spacing below the table; the
	   container's bottom margin would only add dead space above the pinned
	   pagination row. */
	margin-bottom: 0;
}

/* CnDataTable puts horizontal overflow on its own `.cn-data-table__scroll`
   wrapper, NOT on `.cn-table-container`, so a dashboard widget-card's sticky
   footer anchors to the card instead of the table (see table.css). Per the
   overflow spec its `overflow-y` then computes from `visible` to `auto`, making
   that wrapper the nearest scrollport for everything inside the table — but its
   height is content-driven, so it never actually scrolls. Both of this view's
   guarantees broke on it: the sticky `th` pinned to a box that never moves, and
   the horizontal scrollbar sat at the bottom of the full table instead of the
   visible edge. Constraining its height makes it the real scrollport on BOTH
   axes, which also keeps the keyboard tab stop CnDataTable puts on this element
   (`scrollable-region-focusable`) on the element that genuinely scrolls. */
.cn-index-page__main--table .cn-data-table__scroll {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.cn-index-page__main--table > .cn-index-page__pagination {
	flex: 0 0 auto;
}

/* Pin the column headers while the rows scroll. Only viable in this view mode,
   where the scroll wrapper above is height-constrained — elsewhere CnDataTable's
   nearest scrolling ancestor is the page or a widget body, and pinning to that
   is wrong. Sticky sits on the `th`, NOT on `thead`/`tr`: `.cn-data-table` is
   `border-collapse: collapse`, and browsers don't reliably honour sticky on the
   row/group elements under the collapsed-border model. `th` already carries an
   opaque background, so rows can't show through. */
.cn-index-page__main--table .cn-data-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	/* The collapsed bottom border belongs to the table's border layer and stays
	   behind when the cell pins, leaving the pinned header with no bottom rule —
	   redraw it as an inset shadow, which travels with the cell. */
	box-shadow: inset 0 -1px 0 var(--color-border);
}