/* Shared styles for PROSPERIUM standalone HTML pages */
:root {
	color-scheme: dark;
	--bg-start: #020617; /* slate-950 */
	--bg-mid: #0b1220;   /* slate-900 */
	--bg-end: #020617;   /* slate-950 */
	/* Brand accent derived from provided swatch (steel blue/graphite) */
	--brand: #6b7a8f;            /* primary brand hex */
	--brand-rgb: 107, 122, 143;  /* RGB triplet for alpha blends */
}
html, body { height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, "Noto Sans"; }

/* Subtle brand ambience overlay, blending with existing slate gradient */
body::before {
	content: "";
	position: fixed;
	inset: -20%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(40% 35% at 65% 30%, rgba(var(--brand-rgb), 0.18), rgba(0,0,0,0) 60%),
		radial-gradient(28% 28% at 20% 85%, rgba(var(--brand-rgb), 0.12), rgba(0,0,0,0) 60%);
	filter: saturate(1.05);
}

/* Glass */
.glass-effect { background: rgba(15, 23, 42, 0.6); border-color: rgba(51, 65, 85, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Toast */
#toast-viewport { position: fixed; bottom: 24px; right: 24px; display: grid; gap: 10px; z-index: 1000; }
.toast { min-width: 240px; max-width: 360px; background: rgba(2, 6, 23, 0.9); color: #e2e8f0; border: 1px solid rgba(51, 65, 85, 0.6); padding: 12px 14px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: all .25s ease; }
.toast-title { font-weight: 700; }
.toast-desc { font-size: .875rem; color: #94a3b8; margin-top: 2px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 60; }
.modal-overlay.show { display: flex; }
.modal-content { width: 100%; max-width: 480px; border: 1px solid rgba(var(--brand-rgb), .35); background: #0f172a; padding: 1.25rem; border-radius: .75rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.45); transform: scale(.97); opacity: 0; transition: transform .2s, opacity .2s; }
.modal-overlay.show .modal-content { transform: scale(1); opacity: 1; }

/* Brand buttons and headings */
.btn-brand {
	background-image: linear-gradient(to right, rgba(var(--brand-rgb), 0.95), #f59e0b);
	color: #0b1220 !important;
	font-weight: 700;
	border: 1px solid rgba(var(--brand-rgb), .25);
	transition: filter .15s ease, transform .05s ease;
}
.btn-brand:hover { filter: brightness(1.05); }

/* Main navigation buttons */
.main-button {
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
	color: #0f172a !important;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(251, 191, 36, 0.3);
	box-shadow: 0 4px 14px rgba(251, 191, 36, 0.25);
	transition: all 0.2s ease-in-out;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	cursor: pointer;
}
.main-button:hover {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
	color: #0f172a !important;
	border-color: rgba(251, 191, 36, 0.5);
}
.main-button:active {
	transform: translateY(0);
}
.main-button i {
	color: #0f172a !important;
}
.btn-brand:active { transform: translateY(1px); }

.btn-outline-brand {
	border: 1px solid rgba(var(--brand-rgb), .5);
	background: rgba(var(--brand-rgb), .08);
	color: #e2e8f0;
	transition: background .15s ease, border-color .15s ease;
}
.btn-outline-brand:hover { background: rgba(var(--brand-rgb), .14); border-color: rgba(var(--brand-rgb), .65); }

.heading-brand {
	background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.95) 0%, #f59e0b 65%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Sidebar (optional) */
.sidebar { position: fixed; top:0; right:0; bottom:0; width: 18rem; background:#0f172a; z-index:70; padding:1.5rem; transform: translateX(100%); transition: transform .25s ease; border-left: 1px solid rgba(51,65,85,.5); box-shadow: -12px 0 40px -20px rgba(var(--brand-rgb), .25); }
.sidebar.open { transform: translateX(0); }
.sidebar-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.5); z-index:60; display:none; }
.sidebar-backdrop.show { display:block; }

/* Active nav helper */
.nav-active { background: linear-gradient(to right, rgb(202 138 4), rgb(245 158 11)); color: white !important; box-shadow: 0 10px 30px rgba(234,179,8,0.12), 0 0 0 1px rgba(var(--brand-rgb), .25) inset; }

/* Optional utility to apply brand border where desired */
.brand-border { border-color: rgba(var(--brand-rgb), .45) !important; }

/* Optional subtle brand ring */
.brand-ring { box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .35); }

/* Theme background - Gray gradient */
.theme-bg { 
	background: linear-gradient(to bottom right, #374151, #4b5563, #6b7280);
}

/* Custom scrollbar for activity sections */
.activity-scroll::-webkit-scrollbar {
	width: 6px;
}

.activity-scroll::-webkit-scrollbar-track {
	background: rgba(51, 65, 85, 0.2);
	border-radius: 3px;
}

.activity-scroll::-webkit-scrollbar-thumb {
	background: rgba(var(--brand-rgb), 0.4);
	border-radius: 3px;
	transition: background 0.2s ease;
}

.activity-scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--brand-rgb), 0.6);
}

/* Firefox scrollbar styling */
.activity-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--brand-rgb), 0.4) rgba(51, 65, 85, 0.2);
}

/* Activity item hover animation */
.activity-item {
	transition: all 0.2s ease;
}

.activity-item:hover {
	transform: translateX(2px);
	background-color: rgba(51, 65, 85, 0.4) !important;
}
.text-red-700 {
	--text-opacity: 1 !important;
	color: #c53030 !important;
	color: rgba(197, 48, 48, var(--text-opacity)) !important;
}
@media (min-width: 576px) {
	.sm\:inline {
		display: inline !important;
	}
}

.border-red-400 {
	--border-opacity: 1 !important;
	border-color: #fc8181 !important;
	border-color: rgba(252, 129, 129, var(--border-opacity)) !important;
}
.text-red-500 {
	--text-opacity: 1 !important;
	color: #f56565 !important;
	color: rgba(245, 101, 101, var(--text-opacity)) !important;
}
.fill-current {
	fill: currentColor !important;
}

.main-button-success {
	background: linear-gradient(135deg, #56df75 0%, #1aff00 50%, #10f600 100%);
	border: 1px solid rgb(51 151 76 / 30%);
	box-shadow: 0 4px 14px rgb(48 198 49 / 25%);
}
.main-button-danger {
	background: linear-gradient(135deg, #ef4c4c 0%, #ff0000 50%, #d90606 100%);
	color: white !important;
	border: 1px solid rgb(251 36 36 / 30%);
	box-shadow: 0 4px 14px rgb(251 36 100 / 25%);
}

/* Tab styles */
.tab-button {
	transition: all 0.2s ease;
	cursor: pointer;
}

	.tab-button.active {
		color: #60a5fa !important;
		border-bottom-color: #60a5fa !important;
	}

	.tab-button:hover:not(.active) {
		color: #e2e8f0;
		border-bottom-color: rgba(226, 232, 240, 0.3);
	}

.tab-content {
	display: block;
}

	.tab-content.hidden {
		display: none;
	}

/* Reusable responsive row/column layout */
.row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	align-items: start;
}

.col {
	min-width: 0;
}

@media (min-width: 640px) {
	.row {
		gap: 1.25rem;
	}
}

/* Column-count helpers for row containers (add as needed) */
@media (min-width: 768px) {
	.row.md-cols-2 {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}

	.row.md-cols-3 {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
}

@media (min-width: 1024px) {
	.row.lg-cols-2 {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}

	.row.lg-cols-3 {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}

	.row.lg-cols-4 {
		grid-template-columns: repeat(4, minmax(0,1fr));
	}
}

/* Optional: card helper */
.col-card {
	border: 1px solid rgba(51, 65, 85, 0.5);
	border-radius: 0.75rem;
}
/* Buttons = btn-primary (1:25 am 29/10/2025) */
.btn-primary {
	background: linear-gradient(90deg, #6d6bf9, #7c3aed);
	color: #ffffff;
	font-weight: 700;
	border-radius: 10px;
	border: 1px solid rgba(109,107,249,0.6);
	padding: 10px 14px;
	transition: transform .06s ease, filter .15s ease;
}

	.btn-primary:disabled {
		opacity: .5;
		cursor: not-allowed;
	}

	.btn-primary:hover {
		filter: brightness(1.03);
	}

	.btn-primary:active {
		transform: translateY(1px);
	}

/* Error styles (1:25 am 29/10/2025) */
.errw-code {
	font-size: 4rem;
	font-weight: 700;
	color: #fff;
}

.errw-oops {
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
}

.errw-msg {
	font-size: 1rem;
	color: #fff;
}

.errw-link {
	font-size: 1rem;
	font-weight: 500;
	color: #60a5fa;
}
.text-green-700 {
	--text-opacity: 1 !important;
	color: #c53030 !important;
	color: rgba(197, 48, 48, var(--text-opacity)) !important;
}

.border-green-400 {
	--border-opacity: 1 !important;
	border-color: #fc8181 !important;
	border-color: rgb(79, 196, 37) !important;
}

.text-green-500 {
	--text-opacity: 1 !important;
	color: #f56565 !important;
	color: rgb(0, 255, 0) !important;
}