/* ============================================================
   CloudEASE Component Styles
   ============================================================
   Loaded after forms.css.
   Non-form UI components: buttons, tables, alerts, badges,
   modals, pagination, tooltips, calendar popup.
   
   All sizes in rem. All colors from tokens.
   BEM naming with ce- prefix.
   ============================================================ */


/* ---------------------------------------------------------
   BUTTONS
   Use <button> or <a> — never <div> (WCAG 2.1.1).
   Minimum touch target: 2.5rem height (44px at default).
   --------------------------------------------------------- */

.ce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ce-space-xs);
	height: var(--ce-input-height);
	padding: var(--ce-space-sm) var(--ce-space-base);
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	line-height: var(--ce-line-height-normal);
	text-decoration: none;
	white-space: nowrap;
	border: var(--ce-border-width) solid transparent;
	border-radius: var(--ce-radius-sm);
	cursor: pointer;
	transition: background-color var(--ce-transition-fast),
	            border-color var(--ce-transition-fast),
	            color var(--ce-transition-fast);
}

.ce-btn:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

/* Primary */
.ce-btn--primary {
	background-color: var(--ce-color-primary);
	color: var(--ce-color-text-on-primary);
}

.ce-btn--primary:hover {
	background-color: var(--ce-color-primary-hover);
	color: var(--ce-color-text-on-primary);
}

.ce-btn--primary:active {
	background-color: var(--ce-color-primary-active);
}

/* Secondary / Outline */
.ce-btn--secondary {
	background-color: transparent;
	color: var(--ce-color-primary);
	border-color: var(--ce-color-primary);
}

.ce-btn--secondary:hover {
	background-color: var(--ce-color-primary-light);
	color: var(--ce-color-primary);
}

.ce-btn--secondary:active {
	background-color: var(--ce-color-primary);
	color: var(--ce-color-text-on-primary);
}

/* Ghost / Subtle */
.ce-btn--ghost {
	background-color: transparent;
	color: var(--ce-color-text);
}

.ce-btn--ghost:hover {
	background-color: var(--ce-color-bg-hover);
	color: var(--ce-color-text);
}

/* Danger */
.ce-btn--danger {
	background-color: var(--ce-color-error);
	color: var(--ce-color-text-on-dark);
}

.ce-btn--danger:hover {
	background-color: var(--ce-color-error-hover);
	color: var(--ce-color-text-on-primary);
}

/* Main / Green action */
.ce-btn--main {
	background-color: var(--ce-color-main);
	color: var(--ce-color-text-on-primary);
}

.ce-btn--main:hover {
	background-color: var(--ce-color-main-hover);
	color: var(--ce-color-text-on-primary);
}

.ce-btn--main:active {
	background-color: var(--ce-color-main-active);
}

/* Small — compact variant (2rem / 32px) */
.ce-btn--sm {
	height: 2rem;
	padding: var(--ce-space-xs) var(--ce-space-sm);
	font-size: var(--ce-font-size-xs);
}

/* Full width */
.ce-btn--block {
	width: 100%;
}

/* Disabled — same for all variants */
.ce-btn:disabled,
.ce-btn--disabled {
	background-color: var(--ce-color-bg);
	color: var(--ce-color-text-muted);
	border-color: var(--ce-color-border-light);
	cursor: not-allowed;
}

/* Icon-only button — needs aria-label */
.ce-btn--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: var(--ce-border-light);
	border-radius: var(--ce-radius-sm);
	background: var(--ce-color-bg-white);
	cursor: pointer;
	font-size: var(--ce-font-size-base);
	line-height: 1;
}

.ce-btn--icon:hover {
	background-color: var(--ce-color-bg);
}

.ce-btn--icon:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-btn--icon.ce-btn--danger {
	color: var(--ce-color-error);
}

.ce-btn--icon.ce-btn--danger:hover {
	background-color: var(--ce-color-error-light);
}

/* Link-styled button (e.g. in table cells) */
.ce-link-btn {
	background: none;
	border: none;
	color: var(--ce-color-primary);
	cursor: pointer;
	padding: 0;
	font: inherit;
	text-decoration: underline;
}

.ce-link-btn:hover {
	color: var(--ce-color-primary-hover);
}

.ce-link-btn:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}


/* ---------------------------------------------------------
   TABLE
   Data-dense, accessible tables.
   Wrapped in .ce-table-scroll for horizontal overflow.
   <caption> required (can be .ce-sr-only).
   <th scope="col"> / <th scope="row"> required (WCAG 1.3.1).
   --------------------------------------------------------- */

.ce-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ce-font-size-sm);
}

.ce-table caption {
	text-align: center;
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-semibold);
	color: var(--ce-color-text);
	padding-bottom: var(--ce-space-sm);
}

.ce-table thead {
	border-bottom: 2px solid var(--ce-color-border);
}

.ce-table th {
	padding: var(--ce-table-cell-padding-y) var(--ce-table-cell-padding-x);
	font-weight: var(--ce-font-weight-semibold);
	color: var(--ce-color-text-secondary);
	background-color: var(--ce-table-header-bg);
	text-align: left;
	white-space: nowrap;
	font-size: var(--ce-font-size-sm);
	letter-spacing: 0.04em;
}

.ce-table td {
	padding: var(--ce-table-cell-padding-y) var(--ce-table-cell-padding-x);
	color: var(--ce-color-text);
	border-bottom: var(--ce-table-border);
	vertical-align: top;
}



/* Sortable column header */
.ce-table__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2xs);
	cursor: pointer;
	user-select: none;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
}

.ce-table__sort:hover {
	color: var(--ce-color-primary);
}

.ce-table__sort:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
	border-radius: var(--ce-radius-sm);
}

.ce-table__sort-icon {
	width: 0.75rem;
	height: 0.75rem;
	opacity: 0.4;
	transition: opacity var(--ce-transition-fast);
}

.ce-table__sort--active .ce-table__sort-icon {
	opacity: 1;
	color: var(--ce-color-primary);
}

/* Numeric / money columns — right-align */
.ce-table--number {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Column alignment — replaces inline style="text-align:..." */
.ce-table--align-right  { text-align: right; }
.ce-table--align-center { text-align: center; }

/* Compact variant for dense data */
.ce-table--compact th,
.ce-table--compact td {
	padding: var(--ce-space-xs) var(--ce-space-sm);
}

/* Striped rows */
.ce-table--striped tbody tr:nth-child(even) {
	background-color: var(--ce-color-bg);
}

/* Sticky header for long tables */
.ce-table--sticky thead th {
	position: sticky;
	top: 0;
	z-index: var(--ce-z-sticky);
	background-color: var(--ce-color-bg-white);
	box-shadow: 0 2px 0 var(--ce-color-border);
}

/* Table filter / search input */
.ce-table-filter {
	display: flex;
	align-items: center;
	gap: var(--ce-space-sm);
	margin-bottom: var(--ce-space-md);
}

/* No extra margin when search lives inside a toolbar */
.ce-toolbar .ce-table-filter {
	margin-bottom: 0;
}

.ce-table-filter__input {
	width: 15rem;
	height: var(--ce-input-height);
	padding: var(--ce-space-sm) var(--ce-space-base);
	font-size: var(--ce-font-size-sm);
	border: var(--ce-border);
	border-radius: var(--ce-radius-sm);
	background-color: var(--ce-color-bg-white);
	color: var(--ce-color-text);
}

.ce-table-filter__input:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
	border-color: var(--ce-color-primary);
}

.ce-table-filter__count {
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text-muted);
	white-space: nowrap;
}

/* Hidden rows from filter */
.ce-table tr[hidden] {
	display: none;
}

/* Empty state */
.ce-table__empty {
	text-align: center;
	color: var(--ce-color-text-muted);
	padding: var(--ce-space-xl) var(--ce-space-base);
}


/* ---------------------------------------------------------
   PAGINATION
   Keyboard navigable, current page announced (WCAG 4.1.3).
   --------------------------------------------------------- */

.ce-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ce-space-2xs);
	padding: var(--ce-space-base) 0;
}

.ce-pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 var(--ce-space-xs);
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text);
	text-decoration: none;
	border: var(--ce-border-width) solid transparent;
	border-radius: var(--ce-radius-sm);
	transition: background-color var(--ce-transition-fast),
	            border-color var(--ce-transition-fast);
}

.ce-pagination__item:hover {
	background-color: var(--ce-color-bg-hover);
}

.ce-pagination__item:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-pagination__item--active {
	background-color: var(--ce-color-primary);
	color: var(--ce-color-text-on-primary);
	font-weight: var(--ce-font-weight-semibold);
}

.ce-pagination__item--disabled {
	color: var(--ce-color-text-muted);
	cursor: not-allowed;
	pointer-events: none;
}

.ce-pagination__info {
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text-muted);
	margin-left: var(--ce-space-sm);
}


/* ---------------------------------------------------------
   ALERT / NOTIFICATION
   Use role="alert" for errors, aria-live="polite" for info.
   Icon + text — not color alone (WCAG 1.4.1).
   --------------------------------------------------------- */

.ce-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--ce-space-sm);
	padding: var(--ce-space-md) var(--ce-space-base);
	border-radius: var(--ce-radius-base);
	border-left: 4px solid transparent;
	font-size: var(--ce-font-size-sm);
	line-height: var(--ce-line-height-normal);
	margin-top: var(--ce-space-md);
	margin-bottom: var(--ce-space-md);
}

.ce-alert--info {
	background-color: var(--ce-color-info-light);
	border-left-color: var(--ce-color-info);
	color: var(--ce-color-text);
}

.ce-alert--success {
	background-color: var(--ce-color-success-light);
	border-left-color: var(--ce-color-success);
	color: var(--ce-color-text);
}

.ce-alert--warning {
	background-color: var(--ce-color-warning-light);
	border-left-color: var(--ce-color-warning);
	color: var(--ce-color-text);
}

.ce-alert--error {
	background-color: var(--ce-color-error-light);
	border-left-color: var(--ce-color-error);
	color: var(--ce-color-text);
}

.ce-alert__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.0625rem;
}

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

.ce-alert__title {
	font-weight: var(--ce-font-weight-semibold);
	margin-bottom: var(--ce-space-2xs);
}

.ce-alert__dismiss {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	background: none;
	border: none;
	color: var(--ce-color-text-muted);
	cursor: pointer;
	border-radius: var(--ce-radius-sm);
}

.ce-alert__dismiss:hover {
	color: var(--ce-color-text);
	background-color: var(--ce-color-overlay-light);
}

.ce-alert__dismiss:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

/* Fade-out animation for JS dismissal */
.ce-alert--fading {
	opacity: 0;
	transition: opacity var(--ce-transition-slow);
}


/* ---------------------------------------------------------
   BADGE
   Inline status indicators.
   Always includes text — not color alone (WCAG 1.4.1).
   --------------------------------------------------------- */

.ce-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2xs);
	padding: var(--ce-space-2xs) var(--ce-space-sm);
	font-size: var(--ce-font-size-xs);
	font-weight: var(--ce-font-weight-medium);
	line-height: var(--ce-line-height-normal);
	border-radius: var(--ce-radius-full);
	white-space: nowrap;
}

.ce-badge--neutral {
	background-color: var(--ce-color-bg);
	color: var(--ce-color-text-secondary);
}

.ce-badge--info {
	background-color: var(--ce-color-info-light);
	color: var(--ce-color-info);
}

.ce-badge--success {
	background-color: var(--ce-color-success-light);
	color: var(--ce-color-success);
}

.ce-badge--warning {
	background-color: var(--ce-color-warning-light);
	color: var(--ce-color-warning);
}

.ce-badge--error {
	background-color: var(--ce-color-error-light);
	color: var(--ce-color-error);
}

/* Status dot — supplementary to text, never sole indicator */
.ce-badge__dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--ce-radius-full);
	background-color: currentColor;
}


/* ---------------------------------------------------------
   MODAL
   Focus trap required (WCAG 2.1.2 — exception for modals).
   Focus moves in on open, returns to trigger on close.
   Escape key closes. (WCAG 2.1.1)
   role="dialog" aria-modal="true" aria-labelledby required.
   --------------------------------------------------------- */

.ce-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--ce-z-modal-backdrop);
	background-color: var(--ce-color-overlay-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ce-space-base);
}

.ce-modal-backdrop[hidden] {
	display: none;
}

.ce-modal {
	position: relative;
	z-index: var(--ce-z-modal);
	background-color: var(--ce-color-bg-white);
	border-radius: var(--ce-radius-lg);
	box-shadow: var(--ce-shadow-lg);
	width: 100%;
	max-width: var(--ce-width-modal);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

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

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

.ce-modal__close {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--ce-color-text-muted);
	cursor: pointer;
	border-radius: var(--ce-radius-sm);
}

.ce-modal__close:hover {
	background-color: var(--ce-color-bg-hover);
	color: var(--ce-color-text);
}

.ce-modal__close:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-modal__body {
	padding: var(--ce-space-sm);
	overflow-y: auto;
	flex: 1 1 auto;
}

.ce-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ce-space-sm);
	padding: var(--ce-space-md);
	border-top: var(--ce-border-light);
}

/* Responsive: full screen on small viewports / high zoom */
@media (max-width: 30em) {
	.ce-modal {
		max-width: none;
		max-height: none;
		height: 100%;
		border-radius: 0;
	}
}


/* ---------------------------------------------------------
   TOOLTIP
   Keyboard accessible: appears on focus and hover.
   Persistent while hovered/focused. Escape dismisses.
   Content linked via aria-describedby (WCAG 1.4.13).
   --------------------------------------------------------- */

.ce-tooltip {
	position: relative;
	display: inline-flex;
}

.ce-tooltip__trigger {
	cursor: help;
	border-bottom: 1px dotted var(--ce-color-text-muted);
}

.ce-tooltip__content {
	position: absolute;
	bottom: calc(100% + var(--ce-space-xs));
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--ce-z-tooltip);
	padding: var(--ce-space-sm) var(--ce-space-md);
	background-color: var(--ce-color-text);
	color: var(--ce-color-text-on-dark);
	font-size: var(--ce-font-size-xs);
	line-height: var(--ce-line-height-normal);
	border-radius: var(--ce-radius-base);
	white-space: normal;
	min-width: 10rem;
	max-width: 20rem;
	box-shadow: var(--ce-shadow-base);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--ce-transition-fast);
}

/* Arrow */
.ce-tooltip__content::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--ce-color-text);
}

/* Show on hover and focus */
.ce-tooltip:hover .ce-tooltip__content,
.ce-tooltip__trigger:focus + .ce-tooltip__content,
.ce-tooltip__content:hover {
	opacity: 1;
	pointer-events: auto;
}


/* ---------------------------------------------------------
   CALENDAR POPUP
   Keyboard navigable: arrows, Enter, Escape (WCAG 2.1.1).
   role="dialog" or role="grid" with ARIA labels.
   Focus trapped inside while open (WCAG 2.4.3).
   Reflows at 320px / high zoom (WCAG 1.4.10).
   --------------------------------------------------------- */

.ce-calendar {
	position: absolute;
	z-index: var(--ce-z-dropdown);
	top: calc(100% + var(--ce-space-xs));
	left: 0;
	background-color: var(--ce-color-bg-white);
	border: var(--ce-border);
	border-radius: var(--ce-radius-base);
	box-shadow: var(--ce-shadow-lg);
	padding: var(--ce-space-sm);
	min-width: 18rem;
}

.ce-calendar[hidden] {
	display: none;
}

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

.ce-calendar__title {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-semibold);
}

.ce-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: none;
	border: none;
	border-radius: var(--ce-radius-sm);
	color: var(--ce-color-text);
	cursor: pointer;
}

.ce-calendar__nav:hover {
	background-color: var(--ce-color-bg-hover);
}

.ce-calendar__nav:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.0625rem;
	text-align: center;
}

.ce-calendar__weekday {
	font-size: var(--ce-font-size-xs);
	font-weight: var(--ce-font-weight-semibold);
	color: var(--ce-color-text-muted);
	padding: var(--ce-space-xs) 0;
}

.ce-calendar__day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: var(--ce-font-size-sm);
	color: var(--ce-color-text);
	border: none;
	background: none;
	border-radius: var(--ce-radius-sm);
	cursor: pointer;
	margin: 0 auto;
}

.ce-calendar__day:hover {
	background-color: var(--ce-color-bg-hover);
}

.ce-calendar__day:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: calc(-1 * var(--ce-focus-ring-width));
}

.ce-calendar__day--today {
	font-weight: var(--ce-font-weight-bold);
	border: var(--ce-border-width) solid var(--ce-color-primary);
}

.ce-calendar__day--selected {
	background-color: var(--ce-color-primary);
	color: var(--ce-color-text-on-primary);
}

.ce-calendar__day--outside {
	color: var(--ce-color-text-muted);
}

.ce-calendar__day--disabled {
	color: var(--ce-color-border);
	cursor: not-allowed;
	pointer-events: none;
}

/* Range selection */
.ce-calendar__day--range {
	background-color: var(--ce-color-primary-light);
	border-radius: 0;
}

.ce-calendar__day--range-start {
	border-radius: var(--ce-radius-sm) 0 0 var(--ce-radius-sm);
}

.ce-calendar__day--range-end {
	border-radius: 0 var(--ce-radius-sm) var(--ce-radius-sm) 0;
}

/* Responsive: calendar fills width on small screens */
@media (max-width: 30em) {
	.ce-calendar {
		position: fixed;
		inset: auto 0 0 0;
		min-width: auto;
		border-radius: var(--ce-radius-lg) var(--ce-radius-lg) 0 0;
		max-height: 60vh;
	}
}


/* ---------------------------------------------------------
   CONFIRM DIALOG
   For impactful transactions (WCAG 3.3.4).
   "Do you want to transfer $5000?"
   Uses modal styles. Added here for semantic reference.
   --------------------------------------------------------- */

.ce-confirm__message {
	font-size: var(--ce-font-size-base);
	line-height: var(--ce-line-height-normal);
	margin-bottom: var(--ce-space-base);
}

.ce-confirm__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ce-space-sm);
}


/* ---------------------------------------------------------
   LOADING / SPINNER
   Use aria-live="polite" + role="status" for announcement.
   --------------------------------------------------------- */

.ce-spinner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
}

.ce-spinner__circle {
	width: 100%;
	height: 100%;
	border: 2px solid var(--ce-color-border-light);
	border-top-color: var(--ce-color-primary);
	border-radius: var(--ce-radius-full);
	animation: ce-spin 0.6s linear infinite;
}

@keyframes ce-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ce-spinner__circle {
		animation: none;
		border-top-color: var(--ce-color-primary);
		opacity: 0.7;
	}
}

.ce-spinner--sm {
	width: 1rem;
	height: 1rem;
}

.ce-spinner--lg {
	width: 2.5rem;
	height: 2.5rem;
}

/* Full-page loading overlay */
.ce-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--ce-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--ce-space-base);
	background-color: var(--ce-color-overlay-loading);
}

.ce-loading-overlay[hidden] {
	display: none;
}


/* ---------------------------------------------------------
   EMPTY STATE
   When a table / list / section has no data.
   --------------------------------------------------------- */

.ce-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ce-space-sm);
	padding: var(--ce-space-2xl) var(--ce-space-base);
	text-align: center;
	color: var(--ce-color-text-muted);
}

.ce-empty__icon {
	width: 3rem;
	height: 3rem;
	opacity: 0.4;
}

.ce-empty__title {
	font-size: var(--ce-font-size-base);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text-secondary);
}

.ce-empty__text {
	font-size: var(--ce-font-size-sm);
	max-width: 24rem;
}


/* ---------------------------------------------------------
   PAGE TABS
   Horizontal tab navigation (e.g. Edit / History).
   Keyboard accessible with focus indicators (WCAG 2.4.7).
   --------------------------------------------------------- */

.ce-page-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: var(--ce-border-light);
	margin-bottom: var(--ce-space-base);
}

.ce-page-tabs__link {
	padding: var(--ce-space-sm) var(--ce-space-base);
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--ce-transition-fast),
	            border-color var(--ce-transition-fast);
}

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

.ce-page-tabs__link:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

.ce-page-tabs__link--active {
	color: var(--ce-color-primary);
	border-bottom-color: var(--ce-color-primary);
}


/* ============================================================
   MAINTENANCE BANNER
   ============================================================ */

.ce-maintenance {
	background-color: var(--ce-color-warning);
	color: var(--ce-color-text-on-primary);
	padding: var(--ce-space-md) var(--ce-space-lg);
	text-align: center;
}

.ce-maintenance__icon {
	height: 1.75rem;
	vertical-align: middle;
	margin-right: var(--ce-space-xs);
}

.ce-maintenance__title {
	display: inline;
	font-size: var(--ce-font-size-xl);
	font-weight: var(--ce-font-weight-bold);
}

.ce-maintenance__message {
	margin-top: var(--ce-space-xs);
	font-size: var(--ce-font-size-base);
}