/* FinqUP Theme - Modern Abstract Design */

:root {
	/* Primary Greens */
	--fin-primary: #0D4D3B;
	--fin-primary-100: rgba(13, 77, 59, 1);
	--fin-primary-80: rgba(13, 77, 59, 0.8);
	--fin-primary-60: rgba(13, 77, 59, 0.6);
	--fin-primary-40: rgba(13, 77, 59, 0.4);
	--fin-primary-20: rgba(13, 77, 59, 0.2);
	--fin-primary-10: rgba(13, 77, 59, 0.1);
	--fin-primary-08: rgba(13, 77, 59, 0.08);
	--fin-primary-04: rgba(13, 77, 59, 0.04);

	/* Deep Greens */
	--fin-deep: #062F27;
	--fin-deep-100: rgba(6, 47, 39, 1);
	--fin-deep-80: rgba(6, 47, 39, 0.8);
	--fin-deep-60: rgba(6, 47, 39, 0.6);
	--fin-deep-40: rgba(6, 47, 39, 0.4);
	--fin-deep-30: rgba(6, 47, 39, 0.3);
	--fin-deep-20: rgba(6, 47, 39, 0.2);
	--fin-deep-10: rgba(6, 47, 39, 0.1);

	/* Accent Greens */
	--fin-accent: #4FACAB;
	--fin-accent-100: rgba(79, 172, 171, 1);
	--fin-accent-80: rgba(79, 172, 171, 0.8);
	--fin-accent-60: rgba(79, 172, 171, 0.6);
	--fin-accent-40: rgba(79, 172, 171, 0.4);
	--fin-accent-20: rgba(79, 172, 171, 0.2);
	--fin-accent-10: rgba(79, 172, 171, 0.1);
	--fin-accent-05: rgba(79, 172, 171, 0.05);

	/* Light Green Shades */
	--fin-light-10: #E8F4F2;
	--fin-light-20: #D0EAE4;
	--fin-light-30: #B9DFD7;
	--fin-light-40: #A2D4CA;
	--fin-light-50: #8AC9BD;
	--fin-light-60: #6FBDB0;
	--fin-light-70: #57B2A3;
	--fin-light-80: #179F93;

	/* Dark Green Shades */
	--fin-dark-10: #0A3D31;
	--fin-dark-20: #07432E;
	--fin-dark-30: #063A28;
	--fin-dark-40: #05271D;

	/* Glass Backgrounds */
	--fin-glass-w-40: rgba(255, 255, 255, 0.4);
	--fin-glass-w-20: rgba(255, 255, 255, 0.2);
	--fin-glass-w-10: rgba(255, 255, 255, 0.1);
	--fin-glass-primary-10: rgba(13, 77, 59, 0.1);
	--fin-glass-deep-10: rgba(6, 47, 39, 0.1);
	--fin-glass-accent-10: rgba(79, 172, 171, 0.1);

	/* Neutral Whites */
	--fin-neutral-10: #FAFAFA;
	--fin-neutral-20: #F5F5F5;
	--fin-neutral-30: #F0F0F0;
	--fin-neutral-40: #EBEBEB;
	--fin-neutral-50: #E6E6E6;

	/* Pale Greens */
	--fin-pale-10: #F4FBFA;
	--fin-pale-20: #E4F6F3;
	--fin-pale-30: #D4F0EC;

	/* Mint Tones */
	--fin-mint-10: #DFF7F3;
	--fin-mint-20: #CFF1EC;
	--fin-mint-30: #BFECE5;

	/* Text Colors */
	--fin-text: #171717;
	--fin-text-muted: #6D6D6D;
	--fin-text-accent: #3A8373;
	--fin-text-muted-70: rgba(106, 106, 106, 0.7);

	/* Shadows */
	--fin-shadow-green-1: rgba(13, 77, 59, 0.1);
	--fin-shadow-deep-1: rgba(6, 47, 39, 0.1);
	--fin-shadow-black-5: rgba(0, 0, 0, 0.05);
	--fin-shadow-black-2: rgba(0, 0, 0, 0.02);
	--fin-shadow-white-50: rgba(255, 255, 255, 0.5);
	--fin-shadow-accent-15: rgba(79, 172, 171, 0.15);
	--fin-shadow-mint-15: rgba(106, 209, 191, 0.15);
	--fin-shadow-mint-25: rgba(106, 209, 191, 0.25);

	/* Gradients */
	--fin-gradient-1: linear-gradient(135deg, #0D4D3B 0%, #4FACAB 100%);
	--fin-gradient-2: linear-gradient(135deg, rgba(13, 77, 59, 0.8) 0%, rgba(79, 172, 171, 0.6) 100%);
	--fin-gradient-3: linear-gradient(135deg, rgba(13, 77, 59, 0.2) 0%, rgba(79, 172, 171, 0.1) 100%);

	/* Legacy variable bridges used across the app */
	--primary-color: var(--fin-primary);
	--primary-rgb: 13, 77, 59;
	--success-color: #179F93;
	/* from light greens */
	--success-rgb: 23, 159, 147;
	--info-color: var(--fin-accent);
	--info-rgb: 79, 172, 171;
	--light-color: var(--fin-neutral-10);
	--light-rgb: 250, 250, 250;
	--dark-color: var(--fin-deep);
	--dark-rgb: 6, 47, 39;
	--text-color: var(--fin-text);
	--text-muted: var(--fin-text-muted-70);
	--card-background: var(--fin-glass-w-40);
	--card-border-color: var(--fin-glass-accent-10);
	--border-radius: 14px;
	--box-shadow: 0 10px 30px var(--fin-shadow-black-5), 0 2px 10px var(--fin-shadow-green-1);
	--box-shadow-lg: 0 20px 60px var(--fin-shadow-black-5), 0 8px 24px var(--fin-shadow-mint-25);
	--primary-gradient: var(--fin-gradient-1);
}

/* Map primary text utility to brand green */
.text-primary {
	color: var(--fin-primary) !important;
}

.dark-mode .text-primary {
	color: var(--fin-light-80) !important;
}

/* Dark mode design tokens (centralized) */
.dark-mode {
	/* Core surfaces and text */
	--background-color: var(--fin-deep);
	--text-color: var(--fin-neutral-10);
	--text-muted: rgba(255, 255, 255, 0.75);
	--card-background: var(--fin-glass-deep-10);
	--card-border-color: rgba(255, 255, 255, 0.08);

	/* Accents and gradients remain the brand */
	--primary-color: var(--fin-primary);
	--primary-rgb: 13, 77, 59;
	--primary-gradient: var(--fin-gradient-1);

	/* Shadows tuned for dark */
	--box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
	--box-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.dark-mode p,
.dark-mode small {
	color: #ffffff !important;
}


/* Make Bootstrap .text-muted readable in dark mode globally */
.dark-mode .text-muted {
	color: rgba(255, 255, 255, 0.75) !important;
}

/* Global light-surface fixes in dark mode */
.dark-mode .bg-light,
.dark-mode .bg-white {
	background: var(--fin-glass-deep-10) !important;
	color: var(--fin-neutral-10) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Ensure any forced dark text becomes light in dark mode */
.dark-mode .text-dark {
	color: var(--fin-neutral-10) !important;
}

/* Alerts and badges */
.dark-mode .alert-light {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: var(--fin-neutral-10) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .badge.bg-light {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: var(--fin-neutral-10) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Light button variant in dark mode */
.dark-mode .btn-light {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: var(--fin-neutral-10) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Dark mode buttons - outline variants for legibility */
.dark-mode .btn-outline-secondary,
.dark-mode .btn-outline-primary,
.dark-mode .btn-outline-success,
.dark-mode .btn-outline-danger,
.dark-mode .btn-outline-warning,
.dark-mode .btn-outline-info {
	color: var(--fin-neutral-10) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}

.dark-mode .btn-outline-secondary:hover,
.dark-mode .btn-outline-primary:hover,
.dark-mode .btn-outline-success:hover,
.dark-mode .btn-outline-danger:hover,
.dark-mode .btn-outline-warning:hover,
.dark-mode .btn-outline-info:hover {
	background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Abstract background with geometric accents */
body {
	background: var(--fin-gradient-3), linear-gradient(180deg, var(--fin-pale-10), var(--fin-neutral-10));
	color: var(--fin-text);
}

/* Ensure text color only flips in dark mode */
.dark-mode body {
	color: var(--fin-neutral-10);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(1200px 800px at 10% 10%, var(--fin-primary-10), transparent 60%),
		radial-gradient(900px 700px at 90% 20%, var(--fin-accent-20), transparent 60%),
		radial-gradient(1000px 900px at 50% 100%, var(--fin-deep-20), transparent 60%);
	pointer-events: none;
	z-index: -1;
}

/* Glass cards */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item {
	background: var(--fin-neutral-10);
	border: 1px solid var(--fin-neutral-50);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: var(--box-shadow);
}

/* Dark mode surfaces for cards and popovers */
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .dropdown-menu,
.dark-mode .offcanvas,
.dark-mode .list-group-item {
	background: rgba(18, 18, 18, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Navigation */
.navbar,
.navbar.navbar-light,
.navbar.navbar-dark {
	background: var(--fin-deep-80);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--fin-glass-deep-10);
}

.navbar a,
.navbar .nav-link {
	color: var(--fin-neutral-10);
}

.navbar .nav-link:hover {
	color: var(--fin-accent);
}

/* Buttons */
.btn-primary {
	background-color: var(--fin-primary) !important;
	border-color: var(--fin-primary) !important;
	box-shadow: 0 6px 14px var(--fin-shadow-accent-15) !important;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--fin-dark-20) !important;
	border-color: var(--fin-dark-20) !important;
}

.btn-success {
	background-color: var(--fin-light-80) !important;
	border-color: var(--fin-light-80) !important;
}

.btn-success:hover {
	background-color: var(--fin-dark-10) !important;
	border-color: var(--fin-dark-10) !important;
}

.btn-outline-secondary {
	color: var(--fin-text) !important;
	border-color: var(--fin-neutral-50) !important;
}

.btn-outline-secondary:hover {
	background-color: var(--fin-neutral-20) !important;
}

/* Links */
a,
.link-primary {
	color: var(--fin-text-accent);
}

a:hover,
.link-primary:hover {
	color: var(--fin-accent);
}

/* Forms */
.form-control,
.form-select,
.input-group-text {
	background: var(--fin-glass-w-20) !important;
	border: 1px solid var(--fin-neutral-50);
	color: var(--fin-text) !important;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--fin-accent-60) !important;
	box-shadow: 0 0 0 0.2rem var(--fin-accent-20) !important;
}

/* Tables */
.table {
	background: var(--fin-glass-w-20);
	border-color: var(--fin-neutral-50);
}

.table thead {
	background: var(--fin-gradient-3);
}

/* Alerts and badges */
.alert-info {
	background: var(--fin-accent-10);
	border-color: var(--fin-accent-20);
	color: var(--fin-text);
}

/* Alerts - brand-consistent tints */
.alert-primary {
	background-color: rgba(var(--primary-rgb), 0.1) !important;
	border-color: rgba(var(--primary-rgb), 0.2) !important;
	color: var(--text-color) !important;
}

.alert-warning {
	background-color: rgba(255, 193, 7, 0.1) !important;
	border-color: rgba(255, 193, 7, 0.2) !important;
	color: var(--text-color) !important;
}

.alert-secondary {
	background-color: var(--fin-neutral-20) !important;
	border-color: var(--fin-neutral-50) !important;
	color: var(--text-color) !important;
}

/* Dark mode alert tints */
.dark-mode .alert-primary {
	background-color: rgba(var(--primary-rgb), 0.15) !important;
	border-color: rgba(var(--primary-rgb), 0.3) !important;
	color: var(--text-color) !important;
}

.dark-mode .alert-warning {
	background-color: rgba(255, 193, 7, 0.15) !important;
	border-color: rgba(255, 193, 7, 0.3) !important;
	color: var(--text-color) !important;
}

.dark-mode .alert-secondary {
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: var(--text-color) !important;
}

.badge.bg-primary {
	background: var(--fin-primary) !important;
}

.badge.bg-success {
	background: var(--fin-light-80) !important;
}

/* Page headers and sections */
.page-header,
.admin-header,
header {
	background: var(--fin-glass-w-20);
	border-bottom: 1px solid var(--fin-glass-deep-10);
}

/* Progress bars */
.progress,
.progress-bar {
	background: var(--fin-glass-w-10);
}

.progress .progress-bar,
.progress-bar.bg-success {
	background: var(--fin-gradient-1);
}

/* Shadows refinement */
.shadow,
.shadow-sm {
	box-shadow: var(--box-shadow) !important;
}

.shadow-lg {
	box-shadow: var(--box-shadow-lg) !important;
}

/* Minimal cards with geometric highlight */
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 400px at 110% -10%, var(--fin-accent-10), transparent 70%),
		radial-gradient(500px 300px at -10% 110%, var(--fin-primary-10), transparent 70%);
	pointer-events: none;
	border-radius: inherit;
}

/* Footer and muted text */
.text-muted {
	color: var(--fin-text-muted-70) !important;
}