/* ============================================================
   Rabium Design System
   ============================================================ */

/* ---------- 1. Palette ---------- */
:root {
	--rabium-ember: #C2410C;
	--rabium-flame: #FED7AA;
	--rabium-ink: #18181B;
	--rabium-paper: #F5F4F2;
	--rabium-leaf: #15803D;
	--rabium-border: #E5E3E0;
	--rabium-muted: #71717A;
	--bs-primary: var(--rabium-ember);
	--bs-primary-rgb: 194, 65, 12;
	--bs-body-bg: var(--rabium-paper);
	--bs-body-color: var(--rabium-ink);
	--bs-link-color: var(--rabium-ember);
	--bs-link-hover-color: #9a3412;
	--bs-success: var(--rabium-leaf);
	--bs-success-rgb: 21, 128, 61;
	--bs-border-color: var(--rabium-border);
}

/* ---------- 2. Layout / sticky footer ---------- */
html, body {
	min-height: 100%;
}

body {
	margin: 0;
	font-family: 'Figtree', system-ui, -apple-system, sans-serif;
	color: var(--rabium-ink);
	background-color: var(--rabium-paper);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--rabium-ink);
}

/* ---------- 4. Links ---------- */
a {
	color: var(--rabium-ember);
	text-decoration: none;
}

	a:hover {
		color: #9a3412;
	}

/* ---------- 5. Buttons ---------- */
.btn {
	border-radius: 0.5rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
}

.btn-primary {
	--bs-btn-bg: var(--rabium-ember);
	--bs-btn-border-color: var(--rabium-ember);
	--bs-btn-hover-bg: #9a3412;
	--bs-btn-hover-border-color: #9a3412;
	--bs-btn-active-bg: #7c2d12;
	--bs-btn-active-border-color: #7c2d12;
	--bs-btn-disabled-bg: var(--rabium-ember);
	--bs-btn-disabled-border-color: var(--rabium-ember);
}

.btn-outline-primary {
	--bs-btn-color: var(--rabium-ember);
	--bs-btn-border-color: var(--rabium-ember);
	--bs-btn-hover-bg: var(--rabium-ember);
	--bs-btn-hover-border-color: var(--rabium-ember);
	--bs-btn-active-bg: var(--rabium-ember);
	--bs-btn-active-border-color: var(--rabium-ember);
}

.btn-outline-secondary {
	--bs-btn-color: var(--rabium-ink);
	--bs-btn-border-color: #D4D4D8;
	--bs-btn-hover-bg: #E5E3E0;
	--bs-btn-hover-border-color: #D4D4D8;
	--bs-btn-hover-color: var(--rabium-ink);
}

.btn-outline-danger {
	--bs-btn-color: #B91C1C;
	--bs-btn-border-color: #B91C1C;
	--bs-btn-hover-bg: #B91C1C;
	--bs-btn-hover-border-color: #B91C1C;
}

/* ---------- 6. Cards ---------- */
.card {
	background-color: #FFFFFF;
	border: 1px solid var(--rabium-border);
	border-radius: 0.75rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-header {
	background-color: transparent;
	border-bottom: 1px solid var(--rabium-border);
	font-weight: 600;
	padding: 1rem 1.25rem;
}

.card-body {
	padding: 1.25rem;
}

/* ---------- 7. Forms ---------- */
.form-control, .form-select {
	border-color: #D4D4D8;
	border-radius: 0.5rem;
	padding: 0.625rem 0.875rem;
	background-color: #FFFFFF;
	color: var(--rabium-ink);
}

	.form-control:focus, .form-select:focus {
		border-color: var(--rabium-ember);
		box-shadow: 0 0 0 0.2rem rgba(194, 65, 12, 0.15);
	}

.form-label {
	font-weight: 500;
	color: var(--rabium-ink);
	margin-bottom: 0.375rem;
}

/* ---------- 8. Navbar ---------- */
.navbar {
	background-color: #FFFFFF !important;
	border-bottom: 1px solid var(--rabium-border);
	box-shadow: none;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}

.navbar-brand {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--rabium-ink) !important;
	letter-spacing: -0.02em;
}

	.navbar-brand img {
		display: block;
	}

.navbar .nav-link {
	color: var(--rabium-ink) !important;
	font-weight: 500;
	padding-left: 0.875rem !important;
	padding-right: 0.875rem !important;
	transition: color 0.15s ease;
}

	.navbar .nav-link:hover {
		color: var(--rabium-ember) !important;
	}

.navbar-toggler {
	border-color: var(--rabium-border);
}

/* ---------- 9. Footer ---------- */
.footer {
	background-color: #FFFFFF;
	border-top: 1px solid var(--rabium-border);
	padding: 1.5rem 0;
	margin-top: auto;
	color: var(--rabium-muted);
	white-space: normal;
	line-height: normal;
}

	.footer a {
		color: var(--rabium-muted);
	}

		.footer a:hover {
			color: var(--rabium-ember);
		}

/* ---------- 10. Alerts ---------- */
.alert-success {
	background-color: #DCFCE7;
	border-color: #BBF7D0;
	color: #14532D;
}

.alert-info {
	background-color: var(--rabium-flame);
	border-color: #FDBA74;
	color: #7C2D12;
}

.alert-warning {
	background-color: #FEF3C7;
	border-color: #FDE68A;
	color: #78350F;
}

.alert-danger {
	background-color: #FEE2E2;
	border-color: #FECACA;
	color: #7F1D1D;
}

/* ---------- 11. Badges ---------- */
.badge.bg-success {
	background-color: var(--rabium-leaf) !important;
}

/* ---------- 12. Utility helpers ---------- */
.text-ember {
	color: var(--rabium-ember) !important;
}

.text-ink {
	color: var(--rabium-ink) !important;
}

.text-muted {
	color: var(--rabium-muted) !important;
}

.bg-ember {
	background-color: var(--rabium-ember) !important;
}

.bg-flame {
	background-color: var(--rabium-flame) !important;
}

.bg-paper {
	background-color: var(--rabium-paper) !important;
}

.border-rabium {
	border-color: var(--rabium-border) !important;
}

/* ---------- 13. Focus (accessibility) ---------- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.2rem rgba(194, 65, 12, 0.2);
}

/* ---------- 14. Mobile bottom navigation ---------- */
.mobile-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	border-top: 1px solid var(--rabium-border);
	display: flex;
	justify-content: space-around;
	padding: 0.4rem 0;
	padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
	z-index: 1030;
}

.mobile-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	padding: 0.3rem 0.4rem;
	color: var(--rabium-muted);
	text-decoration: none;
	font-size: 0.65rem;
	font-weight: 500;
	flex: 1;
	max-width: 90px;
	transition: color 0.15s ease;
}

	.mobile-nav-item svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Home icon is filled, not stroked */
	.mobile-nav-item:first-child svg {
		fill: currentColor;
		stroke: none;
	}

	.mobile-nav-item.active,
	.mobile-nav-item:hover {
		color: var(--rabium-ember);
	}

/* ---------- 15. Dashboard ---------- */

.eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rabium-ember);
}

/* Date badge (large, in hero) */
.date-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--rabium-flame);
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	min-width: 84px;
	font-family: 'Bricolage Grotesque', sans-serif;
}

	.date-badge .month {
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--rabium-ember);
		line-height: 1;
		margin-bottom: 0.25rem;
	}

	.date-badge .day {
		font-size: 2rem;
		font-weight: 700;
		line-height: 1;
		color: var(--rabium-ink);
	}

/* Small date badge (in list) */
.date-badge-sm {
	min-width: 56px;
	padding: 0.5rem 0.625rem;
	border-radius: 0.5rem;
}

	.date-badge-sm .month {
		font-size: 0.625rem;
		margin-bottom: 0.125rem;
	}

	.date-badge-sm .day {
		font-size: 1.25rem;
	}

/* Avatars in the coming-up list */
.avatar-sm {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--rabium-ink);
}

.avatar-initials {
	text-transform: uppercase;
}

/* Last row in a list has no border */
.coming-up-row:last-child {
	border-bottom: none !important;
}

/* Next up hero card gets a subtle highlight */
.next-up-card {
	border: 1px solid var(--rabium-border);
}

/* ---------- 16. Viral link page ---------- */

.success-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #DCFCE7;
	color: var(--rabium-leaf);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.reward-card {
	background-color: var(--rabium-flame);
	border-radius: 1rem;
	padding: 1.5rem;
	text-align: center;
}

	.reward-card h2 {
		color: var(--rabium-ember);
		font-family: 'Bricolage Grotesque', sans-serif;
		font-size: 2rem;
		font-weight: 700;
	}

	.reward-card .eyebrow {
		color: var(--rabium-ember);
	}

.how-it-works-step .step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--rabium-flame);
	color: var(--rabium-ember);
	font-weight: 700;
	flex-shrink: 0;
	font-size: 0.9rem;
}

/* ---------- 17. Onboarding ---------- */

.onboarding-card {
	background-color: #FFFFFF;
	border: 1px solid var(--rabium-border);
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.onboarding-card-done {
	background-color: #F0FDF4;
	border-color: #BBF7D0;
}

.onboarding-card .step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--rabium-flame);
	color: var(--rabium-ember);
	font-weight: 700;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.onboarding-card .step-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #DCFCE7;
	color: var(--rabium-leaf);
	font-weight: 700;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.onboarding-progress .progress {
	background-color: #E5E3E0;
	border-radius: 999px;
	overflow: hidden;
}

.onboarding-progress .progress-bar {
	background-color: var(--rabium-ember);
	transition: width 0.4s ease;
}

.preview-card {
	background-color: var(--rabium-paper);
	border: 1px dashed var(--rabium-border);
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.preview-card .eyebrow {
	color: var(--rabium-muted);
}

/* ---------- 18. Auth pages (login / register) ---------- */

.auth-shell {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

.auth-card {
	width: 100%;
	max-width: 440px;
	background-color: #FFFFFF;
	border: 1px solid var(--rabium-border);
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Horizontal "or" divider with the text floating over the line. */
.divider-with-text {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--rabium-muted);
	font-size: 0.8rem;
}

.divider-with-text::before,
.divider-with-text::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--rabium-border);
}

/* ---------- 19. Homepage hero + features ---------- */

.hero-section {
	padding: 5rem 0 3rem;
	text-align: center;
}

.hero-heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.hero-subtext {
	font-size: 1.125rem;
	color: var(--rabium-muted);
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

.feature-card {
	background-color: #FFFFFF;
	border: 1px solid var(--rabium-border);
	border-radius: 1rem;
	padding: 1.75rem;
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
	border-color: #D4D4D8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 0.75rem;
	background-color: var(--rabium-flame);
	color: var(--rabium-ember);
}

.feature-icon svg {
	width: 22px;
	height: 22px;
}

/* ---------- 20. Error page ---------- */

.error-shell {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

.error-card {
	max-width: 480px;
	text-align: center;
	padding: 2rem;
}

/* ---------- 21. Homepage socials section ---------- */

.socials-cta {
	background-color: #FFFFFF;
	border: 1px solid var(--rabium-border);
	border-radius: 1rem;
	padding: 2.5rem;
}

@media (max-width: 767.98px) {
	.socials-cta {
		padding: 1.75rem;
	}
}

/* Right-hand preview card that mimics a Rabium socials page. */
.socials-preview {
	background-color: var(--rabium-paper);
	border: 1px solid var(--rabium-border);
	border-radius: 1rem;
	padding: 1.5rem;
}

.socials-preview-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
}

.socials-preview-link {
	background-color: #FFFFFF;
	border: 1px solid var(--rabium-border);
	border-radius: 0.5rem;
	padding: 0.625rem 0.875rem;
	font-size: 0.875rem;
	color: var(--rabium-ink);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.socials-preview-link .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--rabium-ember);
	flex-shrink: 0;
}

/* ---------- 22. Friends + Socials rows ---------- */

/* Remove the bottom border from the last row of any list-in-card. */
.friend-row:last-child,
.socials-row:last-child {
	border-bottom: none !important;
}

/* Prevent long URLs from breaking the layout in socials rows. */
.socials-row .min-w-0 {
	min-width: 0;
}

/* ---------- 23. Calendar minor tweaks ---------- */

/* Calendar card body has no padding so the table hugs the edges. */
.calendar-table + * {
	border-top: none;
}

/* Bootstrap list-group on the day view should not have an outer border
   when it is inside a card that already has one. */
.card .list-group-flush .list-group-item {
	padding-left: 0;
	padding-right: 0;
}

/* ---------- 24. Public socials page (/s/) ---------- */

.social-link-card {
	background-color: #FFFFFF;
	border: 1px solid var(--rabium-border);
	border-radius: 0.75rem;
	padding: 0.875rem 1rem;
	color: var(--rabium-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

	.social-link-card:hover {
		border-color: var(--rabium-ember);
		color: var(--rabium-ink);
		box-shadow: 0 2px 8px rgba(194, 65, 12, 0.08);
		transform: translateY(-1px);
	}

.social-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

	.social-link-icon img {
		width: 24px;
		height: 24px;
		object-fit: contain;
	}

.letter-circle {
	background-color: var(--rabium-flame);
	color: var(--rabium-ember);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
	width: 28px;
	height: 28px;
}

/* Add space at the bottom of the page on mobile */
@media (max-width: 991.98px) {
	body {
		padding-bottom: 72px;
	}
}