/* ============================================================
   CloudEASE Layout
   ============================================================
   Loaded after typography.css.
   Page structure, grid system, containers, responsive.
   
   No fixed pixel widths on page containers.
   Breakpoints in em for zoom compatibility.
   Must remain usable at 200% and 400% zoom (WCAG 1.4.10).
   Must work at 320px CSS viewport (WCAG reflow minimum).
   ============================================================ */


/* ---------------------------------------------------------
   PAGE SHELL
   Sticky header + nav, scrollable main, footer at bottom.
   min-height ensures footer stays at page bottom.
   --------------------------------------------------------- */

.ce-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ce-main {
	flex: 1 1 auto;
	width: 100%;
	background-color: var(--ce-color-bg-white);
	padding: var(--ce-space-base) var(--ce-space-base);
}


/* Header and navigation styles in nav.css */


/* ---------------------------------------------------------
   BREADCRUMB
   Secondary navigation. Shows location in hierarchy.
   --------------------------------------------------------- */

.ce-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ce-space-xs);
	padding: var(--ce-space-sm) 0;
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text-muted);
}

.ce-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--ce-space-xs);
	margin-bottom: 0;
}

.ce-breadcrumb__separator {
	color: var(--ce-color-text-muted);
	user-select: none;
}

.ce-breadcrumb ol[role="list"] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ce-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ce-breadcrumb__link {
	color: var(--ce-color-text-muted);
	text-decoration: none;
	transition: color var(--ce-transition-fast);
}

.ce-breadcrumb__link:hover {
	color: var(--ce-color-text);
}

.ce-breadcrumb__current {
	color: var(--ce-color-text);
	font-weight: var(--ce-font-weight-medium);
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.ce-footer {
	background-color: var(--ce-color-bg);
	border-top: var(--ce-border-light);
	padding: var(--ce-space-base);
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text-muted);
}

.ce-footer__inner {
	max-width: var(--ce-width-content);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-base);
}

.ce-footer__links {
	display: flex;
	align-items: center;
	gap: var(--ce-space-base);
}

@media (max-width: 30em) {
	.ce-footer__inner {
		flex-direction: column;
		text-align: center;
	}

	.ce-footer__links {
		flex-direction: column;
		gap: var(--ce-space-sm);
	}
}


/* ---------------------------------------------------------
   CONTAINERS
   Fluid, centered content wrappers.
   No fixed pixel widths.
   --------------------------------------------------------- */

.ce-container {
	width: 100%;
	max-width: var(--ce-width-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ce-space-base);
	padding-right: var(--ce-space-base);
}

.ce-container--narrow {
	max-width: var(--ce-width-narrow);
}

.ce-container--wide {
	max-width: var(--ce-width-wide);
}

.ce-container--fluid {
	max-width: none;
}


/* ---------------------------------------------------------
   GRID SYSTEM
   CSS Grid based. Fluid columns with minimum widths.
   Collapses naturally at high zoom / small screens.
   --------------------------------------------------------- */

.ce-grid {
	display: grid;
	gap: var(--ce-space-base);
}

/* Auto-fit columns: items fill available space, wrap when < min width */
.ce-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Fixed column counts */
.ce-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.ce-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ce-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Sidebar + content layout */
.ce-grid--sidebar {
	grid-template-columns: minmax(12rem, 16rem) 1fr;
}

/* Collapse all grids to single column on small screens / high zoom */
@media (max-width: 48em) {
	.ce-grid--2,
	.ce-grid--3,
	.ce-grid--4,
	.ce-grid--sidebar {
		grid-template-columns: 1fr;
	}
}

/* Compact gap for data-dense layouts */
.ce-grid--compact {
	gap: var(--ce-space-sm);
}

/* Wide gap for spacious sections */
.ce-grid--loose {
	gap: var(--ce-space-xl);
}


/* ---------------------------------------------------------
   STAT GRID
   For dashboard stat pairs (Today, Past 7 Days, Past 30 Days).
   Two columns of label + value pairs.
   --------------------------------------------------------- */

.ce-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ce-space-sm) var(--ce-space-xl);
}

.ce-stat-grid__item {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-2xs);
}

@media (max-width: 30em) {
	.ce-stat-grid {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------
   SECTIONS
   Vertical content grouping with consistent spacing.
   --------------------------------------------------------- */

.ce-section {
	margin-bottom: var(--ce-space-xl);
}

.ce-section:last-child,
.ce-section:not(:has(~ .ce-section)) {
	margin-bottom: var(--ce-space-base);
}

.ce-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-base);
	margin-bottom: var(--ce-space-base);
}

.ce-section__title {
	font-size: var(--ce-font-size-lg);
	font-weight: var(--ce-font-weight-semibold);
	color: var(--ce-color-text);
	margin: 0;
}


/* ---------------------------------------------------------
   PANEL / CARD AREA
   White background surface for content grouping.
   Used for the big "table-like" sections on the dashboard.
   --------------------------------------------------------- */

.ce-panel {
	background-color: var(--ce-color-bg-white);
	border: var(--ce-border-light);
	border-radius: var(--ce-radius-base);
	padding: var(--ce-space-base);
}

.ce-panel--flush {
	padding: 0;
}

.ce-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-base);
	padding-bottom: var(--ce-space-base);
	border-bottom: var(--ce-border-light);
	margin-bottom: var(--ce-space-base);
}

.ce-panel__title {
	font-size: var(--ce-font-size-md);
	font-weight: var(--ce-font-weight-semibold);
	margin: 0;
}

/* Panel inside flush panel — restore padding for content */
.ce-panel--flush .ce-panel__header {
	padding: var(--ce-space-md) var(--ce-space-base);
	margin-bottom: 0;
}

.ce-panel--flush .ce-panel__body {
	padding: var(--ce-space-base);
}


/* ---------------------------------------------------------
   TABLE SCROLL CONTAINER
   Tables scroll horizontally inside this container.
   Page never scrolls horizontally (WCAG 1.4.10).
   --------------------------------------------------------- */

.ce-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Subtle scroll indicator shadow */
.ce-table-scroll--shadow {
	background:
		linear-gradient(to right, var(--ce-color-bg-white) 30%, transparent),
		linear-gradient(to left, var(--ce-color-bg-white) 30%, transparent),
		linear-gradient(to right, var(--ce-color-black-alpha-08), transparent 70%),
		linear-gradient(to left, var(--ce-color-black-alpha-08), transparent 70%);
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 2rem 100%, 2rem 100%, 1rem 100%, 1rem 100%;
	background-attachment: local, local, scroll, scroll;
}

/* Keyboard accessibility: ensure scrollable region is focusable */
.ce-table-scroll[tabindex] {
	outline: none;
}

.ce-table-scroll[tabindex]:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: calc(-1 * var(--ce-focus-ring-width));
	border-radius: var(--ce-radius-sm);
}


/* ---------------------------------------------------------
   PAGE TOOLBAR
   Actions bar above content (filters, search, bulk actions).
   --------------------------------------------------------- */

.ce-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ce-space-sm);
	margin-bottom: var(--ce-space-base);
}

.ce-toolbar__group {
	display: flex;
	align-items: center;
	gap: var(--ce-space-sm);
}

.ce-toolbar__spacer {
	flex: 1 1 auto;
}

.ce-toolbar__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ce-space-sm);
}

@media (max-width: 30em) {
	.ce-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.ce-toolbar__spacer {
		display: none;
	}
}


/* ---------------------------------------------------------
   DIVIDERS
   --------------------------------------------------------- */

.ce-divider {
	border: none;
	border-top: var(--ce-border-light);
	margin: var(--ce-space-base) 0;
}

.ce-divider--compact {
	margin: var(--ce-space-sm) 0;
}


/* ---------------------------------------------------------
   STACK — vertical flow with consistent spacing
   Shorthand for flex-column + gap. Used everywhere.
   --------------------------------------------------------- */

.ce-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-base);
}

.ce-stack--sm {
	gap: var(--ce-space-sm);
}

.ce-stack--lg {
	gap: var(--ce-space-lg);
}


/* ---------------------------------------------------------
   DISPLAY UTILITIES
   --------------------------------------------------------- */

.ce-flex          { display: flex; }
.ce-flex--center  { display: flex; align-items: center; }
.ce-flex--between { display: flex; align-items: center; justify-content: space-between; }
.ce-flex--end     { display: flex; align-items: center; justify-content: flex-end; }
.ce-flex--column  { display: flex; flex-direction: column; }
.ce-flex--wrap    { flex-wrap: wrap; }

.ce-gap-xs   { gap: var(--ce-space-xs); }
.ce-gap-sm   { gap: var(--ce-space-sm); }
.ce-gap-md   { gap: var(--ce-space-md); }
.ce-gap-base { gap: var(--ce-space-base); }
.ce-gap-lg   { gap: var(--ce-space-lg); }


/* ---------------------------------------------------------
   SPACING UTILITIES
   Margin and padding helpers.
   --------------------------------------------------------- */

.ce-main .ce-mt-0    { margin-top: 0; }
.ce-main .ce-mt-sm   { margin-top: var(--ce-space-sm); }
.ce-main .ce-mt-base { margin-top: var(--ce-space-base); }
.ce-main .ce-mt-lg   { margin-top: var(--ce-space-lg); }
.ce-main .ce-mt-xl   { margin-top: var(--ce-space-xl); }

.ce-main .ce-mb-0    { margin-bottom: 0; }
.ce-main .ce-mb-sm   { margin-bottom: var(--ce-space-sm); }
.ce-main .ce-mb-base { margin-bottom: var(--ce-space-base); }
.ce-main .ce-mb-lg   { margin-bottom: var(--ce-space-lg); }
.ce-main .ce-mb-xl   { margin-bottom: var(--ce-space-xl); }

.ce-main .ce-p-0    { padding: 0; }
.ce-main .ce-p-sm   { padding: var(--ce-space-sm); }
.ce-main .ce-p-base { padding: var(--ce-space-base); }
.ce-main .ce-p-lg   { padding: var(--ce-space-lg); }

.ce-main .ce-pt-sm  { padding-top: var(--ce-space-sm); }


/* ---------------------------------------------------------
   RESPONSIVE VISIBILITY
   Show/hide at breakpoints. Use sparingly.
   --------------------------------------------------------- */

@media (max-width: 48em) {
	.ce-hide-below-md { display: none !important; }
}

@media (min-width: 48em) {
	.ce-hide-above-md { display: none !important; }
}

@media (max-width: 30em) {
	.ce-hide-below-sm { display: none !important; }
}

@media (min-width: 30em) {
	.ce-hide-above-sm { display: none !important; }
}