/* =================================
   DESIGN SYSTEM - Color Palette
   ================================= */
:root {
	/* Primary Brand Colors */
	--primary-blue: #1e3c72;
	--primary-blue-light: #2a5298;
	--primary-purple: #667eea;
	--primary-purple-dark: #764ba2;
	
	/* Secondary Colors */
	--secondary-gray: #6c757d;
	--secondary-light: #f8f9fa;
	
	/* Status Colors */
	--success: #198754;
	--success-light: #d1e7dd;
	--danger: #dc3545;
	--danger-light: #f8d7da;
	--warning: #ffc107;
	--warning-light: #fff3cd;
	--info: #0dcaf0;
	--info-light: #cff4fc;
	
	/* Theme-Specific Colors */
	/* Gold Theme - for Gold Chits */
	--gold-primary: #d4af37;
	--gold-secondary: #f4d03f;
	--gold-dark: #b8860b;
	--gold-light: #fff8dc;
	--gold-gradient-start: #d4af37;
	--gold-gradient-end: #c5a028;
	
	/* Money Theme - for Fund Chits */
	--money-primary: #66bb6a;
	--money-secondary: #81c784;
	--money-dark: #4caf50;
	--money-light: #e8f5e9;
	--money-gradient-start: #66bb6a;
	--money-gradient-end: #4caf50;
	
	/* Member Theme - for Member Management */
	--member-primary: #1976d2;
	--member-secondary: #42a5f5;
	--member-dark: #0d47a1;
	--member-light: #e3f2fd;
	--member-gradient-start: #1976d2;
	--member-gradient-end: #0d47a1;
	
	/* Neutral Colors */
	--white: #ffffff;
	--bg-light: #f4f8fb;
	--bg-gradient: linear-gradient(180deg, #f4f8fb, #eef6ff);
	--border-color: #e6edf5;
	--text-primary: #0b1220;
	--text-muted: #6b7280;
	--text-secondary: #495057;
	
	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
	--shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.1);
	
	/* Layout */
	--max-width: 1200px;
	--border-radius: 12px;
	--border-radius-sm: 8px;
	--border-radius-lg: 15px;
	
	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	
	/* Typography */
	--font-family: 'Inter', 'Segoe UI', 'Roboto', Arial, sans-serif;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
}

/* =================================
   BASE STYLES
   ================================= */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--text-primary);
	background: var(--bg-gradient);
	margin: 0;
	padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-primary);
	margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-bottom: var(--spacing-md);
	color: var(--text-secondary);
}

a {
	color: var(--primary-purple);
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover {
	color: var(--primary-purple-dark);
	text-decoration: none;
}

/* =================================
   LAYOUT
   ================================= */
.container {
	max-width: var(--max-width);
	margin: var(--spacing-xl) auto;
	padding: 0 var(--spacing-md);
}
/* =================================
   FORMS
   ================================= */
input, select, textarea {
	display: block;
	width: 100%;
	padding: var(--spacing-md) var(--spacing-md);
	margin: var(--spacing-sm) 0;
/* =================================
   LISTS
   ================================= */
ul {
	list-style: none;
	padding-left: 0;
	margin: var(--spacing-md) 0;
}

li {
	padding: var(--spacing-md);
	border-radius: var(--border-radius-sm);
	border: 1px solid var(--border-color);
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-sm);
	transition: all 0.3s ease;
}

li:hover {
	border-color: var(--primary-purple);
	box-shadow: var(--shadow-sm);
	transform: translateX(4px);
}

/* =================================
   BADGES & ALERTS
   ================================= */
.badge {
	display: inline-block;
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: 12px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	line-height: 1;
}

.badge-primary {
	background: var(--primary-purple);
	color: var(--white);
}

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

.badge-danger {
	background: var(--danger);
	color: var(--white);
}

.badge-warning {
	background: var(--warning);
	color: var(--text-primary);
}

.badge-info {
	background: var(--info);
	color: var(--text-primary);
}

.badge-secondary {
	background: var(--secondary-gray);
	color: var(--white);
}
/* =================================
   COLLAPSIBLE SECTIONS
   ================================= */
.collapsible {
	border-radius: var(--border-radius);
	overflow: hidden;
	margin-bottom: var(--spacing-md);
	border: 1px solid var(--border-color);
}
/* =================================
   TABLES
   ================================= */
.table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-lg);
	background: var(--white);
	border-radius: var(--border-radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.table thead {
	background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
	color: var(--white);
}

.table th {
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: left;
	font-weight: 600;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.table td {
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--border-color);
}

.table tbody tr:hover {
	background: var(--secondary-light);
}

.table tbody tr:last-child td {
	border-bottom: none;
}

/* =================================
   RESPONSIVE DESIGN
   ================================= */
@media (max-width: 980px) {
	.grid {
		grid-template-columns: 1fr;
	}
	
	.container {
		padding: 0 var(--spacing-md);
	}
	
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
}

@media (max-width: 768px) {
	.card, .auth-card {
		padding: var(--spacing-lg);
	}
	
	.btn {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}
	
	.table {
		font-size: var(--font-size-sm);
	}
	
	.table th, .table td {
		padding: var(--spacing-sm) var(--spacing-md);
	}
}

@media (max-width: 480px) {
	.auth-card {
		padding: var(--spacing-md);
	}
	
	input, select, textarea {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}
	
	.btn {
		padding: var(--spacing-sm);
		font-size: var(--font-size-sm);
	}
	
	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.25rem; }
}

/* =================================
   UTILITY CLASSES
   ================================= */
.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-bold { font-weight: 600; }
.fw-bolder { font-weight: 700; }

.rounded { border-radius: var(--border-radius); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
}

.collapsible-toggle {
	width: 36px;
	height: 36px;
	border-radius: var(--border-radius-sm);
	border: none;
	background: var(--white);
	box-shadow: var(--shadow-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	cursor: pointer;
	color: var(--primary-purple);
	transition: all 0.3s ease;
}

.collapsible-toggle:hover {
	transform: rotate(90deg);
	background: var(--primary-purple);
	color: var(--white);
}

.collapsible-body {
	background: var(--white);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 280ms ease, opacity 200ms ease, padding 200ms ease;
	padding: 0 var(--spacing-lg);
}

.collapsible.open .collapsible-body {
	max-height: 1200px;
	opacity: 1;
	padding: var(--spacing-lg);
}

.collapsible.open .collapsible-toggle {
	transform: rotate(90deg);
	background: var(--primary-purple);
	color: var(--white);
}

.alert-success {
	background: var(--success-light);
	border-color: var(--success);
	color: #0f5132;
}

.alert-danger {
	background: var(--danger-light);
	border-color: var(--danger);
	color: #842029;
}

.alert-warning {
	background: var(--warning-light);
	border-color: var(--warning);
	color: #664d03;
}

.alert-info {
	background: var(--info-light);
	border-color: var(--info);
	color: #055160;
}

/* =================================
   ACTIONS & BUTTONS
   ================================= */
.small-actions button {
	margin-left: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--border-radius-sm);
	border: 1px solid var(--border-color);
	background: var(--white);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: all 0.3s ease;
}

.small-actions button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
	border-color: var(--primary-purple);
}

.member-portal {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}
	transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
	border-color: var(--primary-purple);
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
	background: var(--white);
}

input:disabled, select:disabled, textarea:disabled {
	background: var(--secondary-light);
	cursor: not-allowed;
	opacity: 0.6;
}

.form-label {
	display: block;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
	font-size: var(--font-size-sm);
}

.form-group {
	margin-bottom: var(--spacing-lg);
}

/* =================================
   BUTTONS
   ================================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--border-radius-sm);
	border: none;
	font-weight: 600;
	cursor: pointer;
	font-size: var(--font-size-base);
	font-family: var(--font-family);
	transition: all 0.3s ease;
	text-decoration: none;
	line-height: 1.5;
}

.btn-primary {
	background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
	color: var(--white);
	border: none;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-secondary {
	background: var(--secondary-light);
	color: var(--primary-blue);
	border: 2px solid var(--border-color);
}

.btn-secondary:hover {
	background: var(--white);
	border-color: var(--primary-purple);
	color: var(--primary-purple);
}

.btn-success {
	background: var(--success);
	color: var(--white);
}

.btn-success:hover {
	background: #157347;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-danger {
	background: var(--danger);
	color: var(--white);
}

.btn-danger:hover {
	background: #bb2d3b;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-warning {
	background: var(--warning);
	color: var(--text-primary);
}

.btn-warning:hover {
	background: #ffca2c;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-info {
	background: var(--info);
	color: var(--text-primary);
}

.btn-info:hover {
	background: #31d2f2;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-outline {
	background: transparent;
	color: var(--primary-purple);
	border: 2px solid var(--primary-purple);
}

.btn-outline:hover {
	background: var(--primary-purple);
	color: var(--white);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

.btn-sm {
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-sm);
}

.btn-lg {
	padding: var(--spacing-lg) var(--spacing-xl);
	font-size: var(--font-size-lg);
}

/* =================================
   UTILITY CLASSES
   ================================= */
.text-muted {
	color: var(--text-muted) !important;
	font-size: var(--font-size-sm);
}

.text-primary {
	color: var(--primary-purple) !important;
}

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

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

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

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

.msg, .error-message {
	color: var(--danger);
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.success-message {
	color: var(--success);
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-weight: 500;
}
	grid-template-columns: 1fr 420px;
	gap: var(--spacing-lg);
	align-items: start;
}

/* =================================
   CARDS
   ================================= */
.card, .auth-card {
	background: var(--white);
	padding: var(--spacing-xl);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-color);
	transition: all 0.3s ease;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.auth-card {
	max-width: 520px;
	margin: 0 auto;
}

.card h3, .auth-card h2 {
	margin: 0 0 var(--spacing-md) 0;
	font-size: var(--font-size-xl);
	color: var(--primary-blue);
	font-weight: 600;
}

.card-header {
	background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
	color: var(--white);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
	font-weight: 600;
	border: none;
}

.card-body {
	padding: var(--spacing-lg);
}

.card-footer {
	background: var(--secondary-light);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
	border-top: 1px solid var(--border-color);
}
input,select,textarea{display:block;width:100%;padding:12px 10px;margin:8px 0;border:1px solid #e6edf5;border-radius:10px;background:#fbfdff;outline:none;font-size:14px}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 4px 12px rgba(15,98,254,0.06)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:none;color:white;font-weight:600;cursor:pointer}
.btn.secondary{background:#eef2ff;color:var(--primary);border:1px solid #e6e9ff}
.btn.danger{background:var(--danger)}
.muted{color:var(--muted);font-size:13px}
.msg{color:var(--danger);margin-top:6px;font-size:13px}

ul{list-style:none;padding-left:0;margin:8px 0}
li{padding:10px;border-radius:8px;border:1px solid #f1f5f9;background:#ffffff;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

.small-actions button{margin-left:8px;padding:6px 8px;border-radius:8px;border:1px solid #eef2ff;background:#fff;font-size:13px;cursor:pointer}
.small-actions button:hover{transform:translateY(-1px)}

.member-portal{display:flex;flex-direction:column;gap:12px}

/* Collapsible sections (smooth expand/collapse) */
.collapsible{border-radius:10px;overflow:hidden}
.collapsible-header{display:flex;align-items:center;gap:12px;padding:10px 12px;background:linear-gradient(90deg,rgba(15,98,254,0.06),rgba(124,58,237,0.04));cursor:pointer}
.collapsible-header h3{margin:0;font-size:15px}
.collapsible-toggle{width:36px;height:36px;border-radius:8px;border:none;background:var(--panel);box-shadow:var(--surface-shadow);display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}
.collapsible-body{background:transparent;overflow:hidden;max-height:0;opacity:0;transition:max-height 280ms ease, opacity 200ms ease;padding:0 12px}
.collapsible.open .collapsible-body{max-height:900px;opacity:1;padding:12px}


/* responsive */
@media (max-width:980px){
	.grid{grid-template-columns:1fr;}
	nav button{padding:8px 10px}
}

@media (max-width:480px){
	header{padding:12px}
	.auth-card{padding:14px}
	input{padding:10px}
	.btn{padding:9px 12px}

	/* header/nav tweaks for small screens */
	nav{gap:8px}
	nav button{padding:6px 8px;font-size:13px}
}

/* small helpers */
.center{display:flex;align-items:center;justify-content:center}
.muted-block{color:var(--muted);font-size:13px}

/* Bootstrap collapse button enhancements */
.card-header .btn-link {
	font-size: 1rem;
	font-weight: 500;
}

.card-header .btn-link:hover {
	opacity: 0.9;
}

.card-header .btn-link:focus {
	box-shadow: none;
}

.card-header .btn-link .bi-chevron-down {
	transition: transform 0.3s ease;
}

.card-header .btn-link[aria-expanded="true"] .bi-chevron-down {
	transform: rotate(180deg);
}

.card-header .btn-link[aria-expanded="false"] .bi-chevron-down {
	transform: rotate(0deg);
}