body { font-family: 'Inter', system-ui, sans-serif; }
.card { border: none; }
.navbar-brand { font-weight: 600; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title {
	font-size: 2.2rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: linear-gradient(90deg, #2e7d32 0%, #f9a825 45%, #f57c00 65%, #6a1b9a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.brand-tagline {
	font-size: 1.05rem;
	font-weight: 500;
	color: #0f172a;
	max-width: 620px;
}
.navbar-branding {
	background: linear-gradient(135deg, #dbe9f8 0%, #cfe3f6 45%, #e9eef4 100%);
	box-shadow: 0 10px 20px rgba(100, 116, 139, 0.28);
}
.navbar-branding .btn-outline-light { border-color: rgba(15, 23, 42, 0.2); color: #0f172a; }
.navbar-branding .btn-outline-light:hover { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.35); }
.navbar-branding .btn-light { background: #0b5ed7; color: #fff; }
.navbar-branding .btn-light:hover { background: #f1f3f5; }
.brand-logo { height: 190px; width: auto; }
.login-logo { max-height: 180px; }
.chart-container { height: 280px; }
.dashboard-chart { height: 320px; }
canvas { min-height: 240px; width: 100% !important; }
.stack-list { display: grid; gap: 12px; }
.debt-row { border: 1px solid #e9ecef; border-radius: 12px; padding: 10px 12px; background: #fff; }
.debt-row-header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.debt-name { font-weight: 700; }
.debt-row-body { margin-top: 6px; display: grid; gap: 6px; }
.debt-subrow { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 6px 8px; border-radius: 8px; background: #f8f9fa; }
.debt-amount { font-weight: 700; }
.debt-negative { color: #dc3545; }
.debt-positive { color: #198754; }
.stat-value { font-size: 1.6rem; font-weight: 800; }
.group-list { display: grid; gap: 12px; }
.group-item { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid #e9ecef; background: #fff; }
.group-info { display: flex; justify-content: space-between; align-items: center; }
.group-name { font-weight: 700; }
.group-balance { font-weight: 700; }
.group-avatars { display: flex; align-items: center; gap: 6px; }
.avatar-xs { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.avatar-xs.avatar-initials { width: 28px; height: 28px; font-size: 0.65rem; }
.avatar-more { font-size: 0.75rem; font-weight: 700; background: #f1f3f5; color: #495057; border-radius: 999px; padding: 4px 8px; }
.fallback-chart { display: flex; align-items: flex-end; gap: 12px; height: 260px; padding: 8px; background: #f8f9fa; border-radius: 8px; overflow-x: auto; }
.fallback-bar { flex: 1; min-width: 40px; position: relative; }
.fallback-bar > div { width: 100%; border-radius: 6px 6px 0 0; }
.fallback-label { font-size: 0.8rem; text-align: center; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fallback-value { position: absolute; top: -22px; width: 100%; text-align: center; font-size: 0.75rem; }
.expenses-scroll { max-height: 420px; overflow-y: auto; border-radius: 8px; }
.member-checks { display: flex; flex-wrap: wrap; gap: 12px; }
.member-checks-scroll { max-height: 160px; overflow: auto; padding: 4px; border-radius: 12px; background: #f8f9fa; border: 1px solid #e9ecef; }
.member-checks-scroll.expanded { max-height: 340px; }
.select-with-avatar { display: flex; align-items: center; gap: 10px; }
.select-with-avatar .form-select { flex: 1; }
.select-with-avatar .avatar-initials-sm { flex: 0 0 auto; }
.settlement-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.settlement-col { display: grid; gap: 6px; }
.settlement-tag { border-radius: 10px; padding: 6px 10px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; font-size: 0.82rem; }
.settlement-debt { background: #ffe3e3; color: #c92a2a; }
.settlement-credit { background: #d3f9d8; color: #2b8a3e; }
.settlement-sign { font-weight: 700; }
.settlement-title { font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.06em; }
.settlement-name { font-weight: 600; color: inherit; }
.settlement-value { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 999px; padding: 6px 12px; font-weight: 700; color: #0d6efd; white-space: nowrap; }
.member-check { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 18px; background: #fff; border: 1px solid #e9ecef; transition: all 0.2s ease; white-space: nowrap; min-width: 140px; }
.member-check:hover { background: #f1f3f5; border-color: #dee2e6; }
.member-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.member-checkmark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ced4da; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; background: #fff; position: absolute; top: 10px; right: 10px; }
.member-checkmark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: all 0.2s ease; }
.member-checkbox:checked + .member-checkmark { border-color: #0d6efd; background: #0d6efd; }
.member-checkbox:checked + .member-checkmark::after { background: #fff; }
.member-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.member-controls .form-control { max-width: 220px; }
.member-avatar { width: 72px; height: 72px; border-radius: 50%; background: #0d6efd; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; text-transform: uppercase; }
.member-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.member-name { font-size: 0.85rem; color: #495057; }
.row-meta-info,
.row-meta-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.row-meta-info .badge,
.row-meta-badges .badge { font-weight: 500; }
.icon-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn i { font-size: 1rem; }
.avatar-sm { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; }
.avatar-fallback { background: #0d6efd; color: #fff; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0d6efd, #6f42c1); }
.avatar-initials-sm { width: 72px; height: 72px; font-size: 1.1rem; }
.avatar-initials-lg { width: 96px; height: 96px; font-size: 1.4rem; }
.avatar-initials-group { width: 110px; height: 110px; font-size: 1.6rem; border: 5px solid #fff; margin-top: -70px; box-shadow: 0 10px 18px rgba(0,0,0,0.2); }
.member-tile-initials { width: 90px; height: 90px; font-size: 1.35rem; margin-bottom: 10px; border: 3px solid #f1f3f5; }
.avatar-initials-lg { border: 3px solid #f1f3f5; }
.cover-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; }
.group-hero { border-radius: 18px; overflow: hidden; box-shadow: 0 14px 28px rgba(0,0,0,0.12); background: #fff; }
.group-cover { width: 100%; height: 220px; border: 0; padding: 0; display: block; background: linear-gradient(135deg, #0d6efd, #6f42c1); background-size: cover; background-position: center; cursor: zoom-in; }
.group-cover.has-cover { background-color: #e9ecef; }
.group-hero-content { padding: 16px 20px 20px; background: #fff; }
.group-avatar-wrapper { border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.group-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; margin-top: -70px; box-shadow: 0 10px 18px rgba(0,0,0,0.2); background: #0d6efd; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; }
.media-modal-img { max-height: 85vh; object-fit: contain; background: #000; }
.ajax-indicator {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	background: rgba(15, 23, 42, 0.95);
	color: #fff;
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 2000;
}
.ajax-indicator.show {
	opacity: 1;
	pointer-events: auto;
}

.members-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; justify-items: center; }
.member-tile { border: none; background: #fff; border-radius: 20px; padding: 18px 12px 14px; text-align: center; width: 160px; box-shadow: 0 8px 20px rgba(33, 37, 41, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.member-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(33, 37, 41, 0.12); }
.member-tile-avatar { width: 90px !important; height: 90px !important; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 3px solid #f1f3f5; }
.member-tile-name { font-weight: 600; color: #212529; font-size: 0.95rem; min-height: 22px; line-height: 1.2; }
.member-tile-type { margin-top: 6px; }
.member-name-text { font-weight: 600; color: #212529; font-size: 1rem; }
.member-email { color: #6c757d; font-size: 0.9rem; }
.member-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.member-actions { display: grid; gap: 12px; }
.action-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 10px 12px; }
.action-card.action-danger { background: #fff5f5; border-color: #f1aeb5; }
.action-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6c757d; margin-bottom: 6px; font-weight: 600; }
.action-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.action-controls .form-control { min-width: 180px; }
.action-controls form { margin: 0; }

@media (max-width: 992px) {
	.table { font-size: 0.9rem; }
}

@media (max-width: 768px) {
	.brand-logo { height: 120px; }
	.navbar-brand span { font-size: 0.95rem; }
	.card-body { padding: 1rem; }
	.table td, .table th { padding: 0.5rem; }
	.table td .btn { margin-bottom: 0.25rem; }
	.row-meta-info,
	.row-meta-badges { font-size: 0.78rem; }
	.icon-btn { width: 30px; height: 30px; }
	.member-actions { min-width: unset; }
	.action-controls .form-control { min-width: 140px; }
	.member-tile { width: 132px; }
	.member-tile-avatar { width: 72px !important; height: 72px !important; }
	.member-tile-initials { width: 72px; height: 72px; font-size: 1.1rem; }
	.member-check { min-width: 120px; }
	.member-avatar-img { width: 56px; height: 56px; }
	.avatar-initials-sm { width: 56px; height: 56px; font-size: 0.95rem; }
	.member-checks-scroll { max-height: 220px; }
}

@media (max-width: 576px) {
	.login-logo { max-height: 120px; }
	.table { font-size: 0.85rem; }
	.chart-container { height: 240px; }
	.expenses-scroll { max-height: 340px; }
	.navbar .container { flex-direction: column; align-items: center; gap: 10px; }
	.navbar-brand { flex-direction: column; align-items: center; text-align: center; gap: 0; }
	.brand-text { align-items: center; }
	.brand-logo { height: 124px; margin-bottom: 0; }
	.brand-title { font-size: 1.6rem; line-height: 1.1; }
	.brand-title { display: none; }
	.brand-tagline { font-size: 0.9rem; max-width: 320px; text-align: center; white-space: normal; word-break: break-word; margin: 0 auto; }
	.navbar-branding .d-flex.gap-2 { width: 100%; justify-content: center; flex-wrap: wrap; }
}