/* =================================================================
   default_cloud - modern cloud-hosting design layer
   Loads on top of Bootstrap 5 + the legacy theme.default.css so that
   pages not yet migrated to the new sidebar shell keep working, while
   getting a visual refresh (colors, radius, shadows, typography) for
   free via the overrides below.
   ================================================================= */

:root {
	--cloud-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--cloud-primary: #4f46e5;
	--cloud-primary-hover: #4338ca;
	--cloud-primary-light: #eef2ff;

	--cloud-ink: #101323;
	--cloud-body: #43485a;
	--cloud-muted: #757d95;
	--cloud-border: #e6e8f0;
	--cloud-bg: #f5f6fb;
	--cloud-surface: #ffffff;

	--cloud-sidebar-bg: #121527;
	--cloud-sidebar-bg-active: #1c2039;
	--cloud-sidebar-text: #a9adc4;
	--cloud-sidebar-text-active: #ffffff;
	--cloud-sidebar-border: #23273f;

	--cloud-success: #12b76a;
	--cloud-warning: #f79009;
	--cloud-danger: #f04438;

	--cloud-radius-sm: 0.5rem;
	--cloud-radius: 0.875rem;
	--cloud-radius-lg: 1.25rem;

	--cloud-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--cloud-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	--cloud-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.1);

	--cloud-sidebar-width: 264px;
	--cloud-topbar-height: 68px;

	/* Re-point Bootstrap 5's own CSS variables at the tokens above so
	   native bs-* utility classes (bg-primary, text-primary, .btn-primary...)
	   pick up the new palette automatically, everywhere. */
	--bs-primary: var(--cloud-primary);
	--bs-primary-rgb: 79, 70, 229;
	--bs-body-font-family: var(--cloud-font);
	--bs-body-color: var(--cloud-body);
	--bs-border-radius: var(--cloud-radius-sm);
	--bs-border-radius-lg: var(--cloud-radius);
	--bs-border-radius-sm: 0.4rem;
}

body {
	font-family: var(--cloud-font);
	color: var(--cloud-body);
	background-color: var(--cloud-bg);
}

a {
	color: var(--cloud-primary);
}
a:hover {
	color: var(--cloud-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--cloud-ink);
	font-weight: 600;
}

/* ---- Buttons ---------------------------------------------------- */

.btn {
	border-radius: var(--cloud-radius-sm);
	font-weight: 500;
}

.btn-primary {
	background-color: var(--cloud-primary);
	border-color: var(--cloud-primary);
}
.btn-primary:hover, .btn-primary:focus {
	background-color: var(--cloud-primary-hover);
	border-color: var(--cloud-primary-hover);
}

.btn-secondary {
	background-color: var(--cloud-surface);
	border-color: var(--cloud-border);
	color: var(--cloud-body);
}
.btn-secondary:hover {
	background-color: var(--cloud-bg);
	border-color: var(--cloud-border);
	color: var(--cloud-ink);
}

/* ---- Cards (used across every not-yet-migrated page too) -------- */

.card {
	border: 1px solid var(--cloud-border);
	border-radius: var(--cloud-radius);
	box-shadow: var(--cloud-shadow-sm);
}

.card-default {
	border: 1px solid var(--cloud-border);
	border-radius: var(--cloud-radius);
	box-shadow: var(--cloud-shadow-sm);
	background-color: var(--cloud-surface);
}

.card-header, .card-header-divider {
	background-color: transparent;
	border-bottom: 1px solid var(--cloud-border);
	font-weight: 600;
	color: var(--cloud-ink);
	padding: 1.1rem 1.4rem;
}

.card-body {
	padding: 1.4rem;
}

/* ---- Forms -------------------------------------------------------- */

.form-control, .form-select, .custom-select {
	border-radius: var(--cloud-radius-sm);
	border-color: var(--cloud-border);
}
.form-control:focus, .form-select:focus {
	border-color: var(--cloud-primary);
	box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

/* ---- Tables --------------------------------------------------------- */

.table thead th {
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--cloud-muted);
	border-bottom-width: 1px;
	font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: var(--cloud-bg);
}

/* ---- Dropdowns / popovers -------------------------------------------- */

.dropdown-menu {
	border: 1px solid var(--cloud-border);
	border-radius: var(--cloud-radius);
	box-shadow: var(--cloud-shadow-lg);
	padding: 0.4rem;
}
.dropdown-item {
	border-radius: var(--cloud-radius-sm);
	padding: 0.5rem 0.75rem;
}
.dropdown-item:hover, .dropdown-item:focus {
	background-color: var(--cloud-primary-light);
	color: var(--cloud-primary);
}

/* =================================================================
   Sidebar shell - used by ___pagesHeader.inc.php / ___pagesFooter.inc.php
   ================================================================= */

.cloud-shell {
	display: flex;
	min-height: 100vh;
}

.cloud-sidebar {
	width: var(--cloud-sidebar-width);
	flex: 0 0 var(--cloud-sidebar-width);
	background-color: var(--cloud-sidebar-bg);
	color: var(--cloud-sidebar-text);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
	transition: transform 0.2s ease;
}

.cloud-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.25rem 1.4rem;
	border-bottom: 1px solid var(--cloud-sidebar-border);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
}
.cloud-sidebar-brand:hover {
	color: #fff;
}
.cloud-sidebar-brand img {
	height: 28px;
	width: auto;
}

.cloud-sidebar-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.75rem;
}

.cloud-nav-section {
	text-transform: uppercase;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: #555b78;
	padding: 1rem 0.75rem 0.4rem;
	font-weight: 600;
}

.cloud-nav-link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--cloud-radius-sm);
	color: var(--cloud-sidebar-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 0.15rem;
}
.cloud-nav-link .icon {
	font-size: 1.15rem;
	width: 1.4rem;
	text-align: center;
	flex: 0 0 auto;
}
.cloud-nav-link:hover {
	background-color: var(--cloud-sidebar-bg-active);
	color: var(--cloud-sidebar-text-active);
}
.cloud-nav-link.active {
	background-color: var(--cloud-primary);
	color: #fff;
}

.cloud-nav-sub {
	padding-left: 2rem;
	margin-bottom: 0.4rem;
}
.cloud-nav-sub .cloud-nav-link {
	font-size: 0.85rem;
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

.cloud-main {
	flex: 1 1 auto;
	margin-left: var(--cloud-sidebar-width);
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.cloud-topbar {
	height: var(--cloud-topbar-height);
	flex: 0 0 var(--cloud-topbar-height);
	background-color: var(--cloud-surface);
	border-bottom: 1px solid var(--cloud-border);
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 1.5rem;
	position: sticky;
	top: 0;
	z-index: 1020;
}

.cloud-topbar-search {
	flex: 1 1 auto;
	max-width: 360px;
}
.cloud-topbar-search .form-control {
	background-color: var(--cloud-bg);
	border-color: transparent;
}

.cloud-topbar-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cloud-currency-form {
	margin: 0;
}

.cloud-currency-select {
	min-width: 82px;
	font-weight: 600;
}

.cloud-balance-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background-color: var(--cloud-primary-light);
	color: var(--cloud-primary);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
}
.cloud-balance-pill:hover {
	color: var(--cloud-primary-hover);
}

.cloud-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--cloud-primary-light);
	color: var(--cloud-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
}

.cloud-content {
	flex: 1 1 auto;
	padding: 1.75rem;
}

.cloud-sidebar-toggle {
	display: none;
	border: none;
	background: transparent;
	font-size: 1.4rem;
	color: var(--cloud-ink);
	padding: 0.25rem 0.5rem;
}

.cloud-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(16, 19, 35, 0.5);
	z-index: 1025;
}

@media (max-width: 991.98px) {
	.cloud-sidebar {
		transform: translateX(-100%);
	}
	.cloud-shell.cloud-sidebar-open .cloud-sidebar {
		transform: translateX(0);
	}
	.cloud-shell.cloud-sidebar-open .cloud-backdrop {
		display: block;
	}
	.cloud-main {
		margin-left: 0;
	}
	.cloud-sidebar-toggle {
		display: inline-flex;
		align-items: center;
	}
	.cloud-topbar-search {
		display: none;
	}
}