/* =========================================================================
   Amal Journal — Family / Group Tracker
   Path:   assets/css/groups.css
   Since:  3.9.0
   Version: 4.2.0
   =========================================================================
   CHANGELOG — 4.2.0
     - color-scheme on panel (native controls follow dark mode).
     - Unified dark neutral ramp via CSS custom properties.
     - :focus-visible on every interactive element (WCAG 2.4.7).
     - Manual theme override via [data-aj-theme] (JS-controlled).
     - Mobile matrix cells kept ≥34px (tap comfort).
     - Fluid matrix column (clamp) — zoom-resilient.
     - Reaction bottom-sheet safe-area top + max-height.
     - Progress-ring avatar + cell "pop" micro-interaction.
   ========================================================================= */

/* =========================================================================
   TOKENS
   ========================================================================= */

.aj-groups-modal,
.aj-groups-panel {
	--aj-radius-sm: 8px;
	--aj-radius-md: 12px;
	--aj-radius-lg: 18px;
	--aj-radius-pill: 999px;

	--aj-shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
	--aj-shadow-2: 0 4px 12px rgba(15, 23, 42, .06);
	--aj-shadow-3: 0 12px 32px rgba(15, 23, 42, .12);
	--aj-shadow-pop: 0 16px 48px rgba(15, 23, 42, .22);

	--aj-ease: cubic-bezier(.2, .8, .2, 1);
	--aj-t-fast: .14s var(--aj-ease);
	--aj-t-base: .22s var(--aj-ease);
	--aj-t-slow: .32s var(--aj-ease);

	/* Neutral ramp (light) */
	--aj-bg:         #ffffff;
	--aj-surface-1:  #f8fafc;
	--aj-surface-2:  #f3f4f6;
	--aj-border:     #e5e7eb;
	--aj-text:       #1f2933;
	--aj-text-muted: #6b7280;
	--aj-text-dim:   #9ca3af;
}

/* =========================================================================
   1. MODAL SHELL
   ========================================================================= */

.aj-groups-modal {
	position: fixed; inset: 0;
	z-index: 2147483435;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(8, 12, 20, .72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: aj-groups-fade .18s var(--aj-ease);
}
.aj-groups-modal[hidden] { display: none !important; }

@keyframes aj-groups-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.aj-groups-panel {
	position: relative;
	background: var(--aj-bg, #fff);
	color: var(--aj-text, #1f2933);
	width: min(680px, 96vw); max-height: 92vh;
	border-radius: var(--aj-radius-lg);
	display: flex; flex-direction: column; overflow: hidden;
	box-shadow: var(--aj-shadow-pop);
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
	animation: aj-groups-pop .22s var(--aj-ease);
	color-scheme: light;
}

@keyframes aj-groups-pop {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.aj-groups-head {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px;
	background: linear-gradient(135deg, #8b5cf6, #6d28d9);
	color: #fff; flex-shrink: 0;
	position: relative;
}
.aj-groups-head h3 {
	margin: 0; font-size: 16px; font-weight: 700; flex: 1;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}
.aj-groups-close {
	background: rgba(255, 255, 255, .15); border: none; color: #fff;
	font-size: 22px; line-height: 1; cursor: pointer;
	padding: 4px 10px; border-radius: var(--aj-radius-sm);
	transition: background var(--aj-t-fast);
}
.aj-groups-close:hover { background: rgba(255, 255, 255, .28); }

.aj-groups-edit-btn {
	background: rgba(255, 255, 255, .15); border: none; color: #fff;
	font-size: 17px; line-height: 1; cursor: pointer;
	padding: 6px 10px; border-radius: var(--aj-radius-sm);
	transition: background var(--aj-t-fast);
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; min-height: 36px;
}
.aj-groups-edit-btn:hover { background: rgba(255, 255, 255, .28); }
.aj-groups-edit-btn[hidden] { display: none !important; }

.aj-groups-edit-banner {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 14px;
	padding: 10px 14px;
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	border: 1px solid #fbbf24;
	border-radius: var(--aj-radius-md);
	font-size: 12.5px; font-weight: 700; color: #92400e;
}
.aj-groups-edit-banner span:first-child { font-size: 16px; }

.aj-groups-body {
	flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: 18px 20px 24px; min-height: 0;
}

/* =========================================================================
   2. BUTTONS
   ========================================================================= */

.aj-groups-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px; padding: 10px 15px;
	border-radius: var(--aj-radius-md); border: none;
	font-size: 13px; font-weight: 700; cursor: pointer;
	font-family: inherit;
	transition: background var(--aj-t-fast), transform var(--aj-t-fast), box-shadow var(--aj-t-fast);
	-webkit-tap-highlight-color: transparent;
	min-height: 40px;
}
.aj-groups-btn:active { transform: scale(.96); }
.aj-groups-btn.is-primary {
	background: #8b5cf6; color: #fff;
	box-shadow: 0 1px 2px rgba(139, 92, 246, .4);
}
.aj-groups-btn.is-primary:hover {
	background: #7c3aed;
	box-shadow: 0 4px 12px rgba(139, 92, 246, .35);
}
.aj-groups-btn.is-ghost {
	background: transparent; color: #6d28d9; border: 1px solid #ddd6fe;
}
.aj-groups-btn.is-ghost:hover { background: #f5f3ff; border-color: #c4b5fd; }
.aj-groups-btn.is-danger {
	background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;
}
.aj-groups-btn.is-danger:hover { background: #fecaca; }
.aj-groups-btn.is-icon {
	padding: 8px; min-width: 40px; min-height: 40px;
	border-radius: var(--aj-radius-sm);
	background: #f3f4f6; color: #4b5563;
}
.aj-groups-btn.is-icon:hover { background: #e5e7eb; }
.aj-groups-btn:disabled { opacity: .5; cursor: wait; }

/* =========================================================================
   3. TOOLBAR
   ========================================================================= */

.aj-groups-toolbar {
	display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.aj-groups-toolbar .aj-groups-btn { flex: 1; min-width: 120px; }

/* =========================================================================
   4. TABS
   ========================================================================= */

.aj-groups-tabs {
	display: flex; gap: 4px;
	padding: 4px;
	background: var(--aj-surface-2, #f3f4f6);
	border-radius: var(--aj-radius-md);
	margin-bottom: 14px;
}
.aj-groups-tab {
	flex: 1;
	padding: 9px 10px;
	border: none; background: transparent;
	border-radius: var(--aj-radius-sm);
	font-size: 12.5px; font-weight: 700;
	color: #6b7280; cursor: pointer;
	font-family: inherit;
	transition: background var(--aj-t-fast), color var(--aj-t-fast);
	-webkit-tap-highlight-color: transparent;
}
.aj-groups-tab:hover { color: #4b5563; }
.aj-groups-tab.is-active {
	background: #fff;
	color: #6d28d9;
	box-shadow: var(--aj-shadow-1);
}

/* =========================================================================
   5. EMPTY / LOADING / SKELETON
   ========================================================================= */

.aj-groups-empty {
	text-align: center; padding: 40px 20px;
	color: #6b7280; font-size: 13.5px; line-height: 1.7;
}
.aj-groups-empty-icon { font-size: 42px; display: block; margin-bottom: 8px; }

.aj-groups-loading {
	text-align: center; color: #9ca3af;
	padding: 30px 20px; font-size: 13px;
}

.aj-groups-skeleton { display: flex; flex-direction: column; gap: 10px; }
.aj-groups-skel-row {
	height: 56px;
	border-radius: var(--aj-radius-md);
	background: linear-gradient(90deg, #f1f3f6 25%, #e5e7eb 50%, #f1f3f6 75%);
	background-size: 200% 100%;
	animation: aj-skel 1.2s ease-in-out infinite;
}
.aj-groups-skel-row.is-short { height: 40px; }
@keyframes aj-skel {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* =========================================================================
   6. GROUP CARDS
   ========================================================================= */

.aj-groups-list { display: flex; flex-direction: column; gap: 10px; }
.aj-groups-card {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px; border-radius: var(--aj-radius-md);
	background: var(--aj-surface-1, #f8fafc);
	border: 1px solid var(--aj-border, #e5e7eb);
	cursor: pointer;
	transition: border-color var(--aj-t-fast), background var(--aj-t-fast),
	            transform var(--aj-t-fast), box-shadow var(--aj-t-fast);
	-webkit-tap-highlight-color: transparent;
}
.aj-groups-card:hover {
	border-color: #8b5cf6; background: #f5f3ff;
	box-shadow: var(--aj-shadow-2);
}
.aj-groups-card:active { transform: scale(.99); }
.aj-groups-card-icon {
	width: 42px; height: 42px; border-radius: 50%;
	background: linear-gradient(135deg, #a78bfa, #7c3aed);
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-size: 20px; flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(139, 92, 246, .3);
}
.aj-groups-card-meta { flex: 1; min-width: 0; }
.aj-groups-card-name {
	margin: 0 0 2px; font-size: 14.5px; font-weight: 700;
	color: var(--aj-text, #1f2933); word-break: break-word;
}
.aj-groups-card-sub { margin: 0; font-size: 11.5px; color: #6b7280; }
.aj-groups-card-role {
	font-size: 10px; font-weight: 700; padding: 3px 8px;
	border-radius: var(--aj-radius-pill);
	background: #ede9fe; color: #6d28d9;
	text-transform: uppercase; letter-spacing: .04em;
	flex-shrink: 0;
}

/* =========================================================================
   7. FORM
   ========================================================================= */

.aj-groups-form { display: flex; flex-direction: column; gap: 16px; }
.aj-groups-field label {
	display: block; font-size: 12px; font-weight: 700;
	color: #4b5563; margin-bottom: 6px;
	letter-spacing: .01em;
}
.aj-groups-field input[type="text"] {
	width: 100%; padding: 11px 13px;
	border: 1px solid var(--aj-border, #e5e7eb);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-surface-1, #f8fafc);
	font-size: 14px; color: var(--aj-text, #1f2933);
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color var(--aj-t-fast), background var(--aj-t-fast),
	            box-shadow var(--aj-t-fast);
	min-height: 44px;
}
.aj-groups-field input[type="text"]:focus {
	outline: none; border-color: #8b5cf6;
	background: #f5f3ff;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, .14);
}
.aj-groups-field-hint {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #9ca3af;
}

/* Category tabs */
.aj-groups-deed-cats {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 2px 0 6px;
	margin-bottom: 10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.aj-groups-deed-cats::-webkit-scrollbar { display: none; }

.aj-groups-deed-cat {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 13px;
	border-radius: var(--aj-radius-pill);
	border: 1px solid var(--aj-border, #e5e7eb);
	background: #fff;
	color: #4b5563;
	font-size: 12px; font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background var(--aj-t-fast), border-color var(--aj-t-fast),
	            color var(--aj-t-fast), transform var(--aj-t-fast);
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
	min-height: 34px;
}
.aj-groups-deed-cat:hover {
	background: #f5f3ff;
	border-color: #c4b5fd;
	color: #6d28d9;
}
.aj-groups-deed-cat:active { transform: scale(.96); }
.aj-groups-deed-cat.is-active {
	background: linear-gradient(135deg, #8b5cf6, #7c3aed);
	border-color: #7c3aed;
	color: #fff;
	box-shadow: 0 2px 8px rgba(139, 92, 246, .3);
}

/* Deed grid */
.aj-groups-deed-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 10px;
}

.aj-groups-deed-card {
	position: relative;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 6px;
	padding: 12px 6px 10px;
	border-radius: var(--aj-radius-md);
	border: 2px solid var(--aj-border, #e5e7eb);
	background: var(--aj-surface-1, #f8fafc);
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	color: #4b5563;
	transition: border-color var(--aj-t-fast), background var(--aj-t-fast),
	            transform var(--aj-t-fast), box-shadow var(--aj-t-fast);
	-webkit-tap-highlight-color: transparent;
	min-height: 92px;
	user-select: none;
}
.aj-groups-deed-card:hover {
	border-color: #c4b5fd;
	background: #faf9ff;
	transform: translateY(-1px);
	box-shadow: var(--aj-shadow-2);
}
.aj-groups-deed-card:active { transform: scale(.97); }
.aj-groups-deed-card.is-on {
	border-color: #8b5cf6;
	background: linear-gradient(160deg, #f5f3ff, #ede9fe);
	color: #5b21b6;
	box-shadow: 0 4px 14px rgba(139, 92, 246, .18);
}

.aj-groups-deed-card-icon {
	font-size: 26px; line-height: 1;
	filter: grayscale(.4);
	transition: filter var(--aj-t-fast), transform var(--aj-t-fast);
}
.aj-groups-deed-card.is-on .aj-groups-deed-card-icon {
	filter: none;
	transform: scale(1.08);
}

.aj-groups-deed-card-label {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	word-break: break-word;
}

.aj-groups-deed-card-check {
	position: absolute;
	top: 6px; right: 6px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #8b5cf6;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800;
	opacity: 0;
	transform: scale(.4);
	transition: opacity var(--aj-t-fast), transform var(--aj-t-fast);
}
.aj-groups-deed-card.is-on .aj-groups-deed-card-check {
	opacity: 1; transform: scale(1);
}
.aj-groups-deed-card-check::before { content: '✓'; }

.aj-groups-deed-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 20px;
	font-size: 12.5px;
	color: #9ca3af;
}

/* Legacy checkbox list */
.aj-groups-deeds {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.aj-groups-deed {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 10px; border-radius: var(--aj-radius-sm);
	background: var(--aj-surface-1, #f8fafc);
	border: 1px solid var(--aj-border, #e5e7eb);
	font-size: 12.5px; cursor: pointer;
	user-select: none;
}
.aj-groups-deed input { margin: 0; }
.aj-groups-deed.is-on {
	background: #f5f3ff; border-color: #a78bfa;
	font-weight: 700; color: #5b21b6;
}

.aj-groups-form-actions {
	display: flex; gap: 8px; margin-top: 6px;
}
.aj-groups-form-actions .aj-groups-btn { flex: 1; }

/* =========================================================================
   8. DASHBOARD HEADER
   ========================================================================= */

.aj-groups-dash-head {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 14px;
}
.aj-groups-back {
	background: transparent; border: none;
	font-size: 20px; cursor: pointer;
	color: #6b7280; padding: 6px 10px; border-radius: var(--aj-radius-sm);
	transition: background var(--aj-t-fast);
	min-width: 40px; min-height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
}
.aj-groups-back:hover { background: #f3f4f6; color: #1f2933; }
.aj-groups-dash-title {
	margin: 0; flex: 1; font-size: 15px; font-weight: 700;
	color: var(--aj-text, #1f2933);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}
.aj-groups-dash-count {
	font-size: 11px; font-weight: 700;
	background: #ede9fe; color: #6d28d9;
	padding: 4px 10px; border-radius: var(--aj-radius-pill);
	flex-shrink: 0;
}

/* =========================================================================
   9. SUMMARY STRIP
   ========================================================================= */

.aj-groups-summary {
	display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.aj-groups-stat {
	flex: 1; min-width: 90px;
	background: var(--aj-surface-1, #f8fafc);
	border: 1px solid var(--aj-border, #e5e7eb);
	border-radius: var(--aj-radius-md);
	padding: 11px 13px;
	text-align: left;
	transition: transform var(--aj-t-fast), box-shadow var(--aj-t-fast);
}
.aj-groups-stat:hover {
	box-shadow: var(--aj-shadow-2);
	transform: translateY(-1px);
}
.aj-groups-stat-label {
	font-size: 10px;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	margin-bottom: 3px;
}
.aj-groups-stat-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--aj-text, #1f2933);
	line-height: 1.1;
}
.aj-groups-stat-value small {
	font-size: 12px;
	font-weight: 600;
	color: #9ca3af;
	margin-left: 2px;
}
.aj-groups-stat.is-accent {
	background: linear-gradient(135deg, #f5f3ff, #ede9fe);
	border-color: #c4b5fd;
}
.aj-groups-stat.is-accent .aj-groups-stat-value { color: #6d28d9; }

/* =========================================================================
   10. INVITE BOX
   ========================================================================= */

.aj-groups-invite {
	margin-bottom: 14px; padding: 13px 15px;
	background: linear-gradient(135deg, #f5f3ff, #ede9fe);
	border-radius: var(--aj-radius-md);
	border: 1px dashed #c4b5fd;
}
.aj-groups-invite-label {
	margin: 0 0 6px; font-size: 11.5px;
	font-weight: 700; color: #6d28d9; text-transform: uppercase;
	letter-spacing: .05em;
}
.aj-groups-invite-row { display: flex; gap: 8px; align-items: center; }
.aj-groups-invite-code {
	flex: 1; padding: 9px 12px;
	background: #fff; border-radius: var(--aj-radius-sm);
	font-family: 'Courier New', monospace;
	font-size: 15px; font-weight: 700; color: #5b21b6;
	letter-spacing: .14em; text-align: center;
	user-select: all;
	min-width: 0;
	border: 1px solid #ddd6fe;
}
.aj-groups-invite-actions {
	display: flex; gap: 6px; margin-top: 8px;
}
.aj-groups-invite-actions .aj-groups-btn {
	flex: 1; font-size: 12px; padding: 8px 10px;
}

/* =========================================================================
   11. MATRIX
   ========================================================================= */

.aj-groups-matrix {
	display: flex; flex-direction: column; gap: 8px;
	margin-bottom: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	margin-left: -20px; margin-right: -20px;
	padding-left: 20px; padding-right: 20px;
	scrollbar-width: thin;
}
.aj-groups-matrix::-webkit-scrollbar { height: 6px; }
.aj-groups-matrix::-webkit-scrollbar-thumb {
	background: rgba(139, 92, 246, .3);
	border-radius: 3px;
}

.aj-groups-row {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: clamp(120px, 22vw, 180px);
	grid-auto-columns: 34px;
	gap: 4px;
	align-items: center;
	padding: 9px 11px;
	border-radius: var(--aj-radius-md);
	background: var(--aj-surface-1, #f8fafc);
	border: 1px solid var(--aj-border, #e5e7eb);
	min-width: max-content;
	transition: box-shadow var(--aj-t-fast), background var(--aj-t-fast);
}
.aj-groups-row.is-header {
	background: transparent; border: none;
	padding: 4px 11px;
	font-size: 10.5px; font-weight: 700; color: #6b7280;
	text-transform: uppercase; letter-spacing: .05em;
}
.aj-groups-row.is-me {
	border-color: #a78bfa;
	background: #f5f3ff;
	box-shadow: 0 0 0 1px #a78bfa inset;
}

.aj-groups-member {
	font-size: 12.5px; font-weight: 700; color: var(--aj-text, #1f2933);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
	display: flex; align-items: center; gap: 8px;
}
.aj-groups-member-text {
	min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.aj-groups-member small {
	display: block; font-size: 10px; font-weight: 400;
	color: #6b7280; margin-top: 2px;
}

.aj-groups-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800; color: #fff;
	background: linear-gradient(135deg, #a78bfa, #7c3aed);
	flex-shrink: 0;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(139, 92, 246, .25);
}
.aj-groups-avatar.is-me {
	background: linear-gradient(135deg, #f472b6, #db2777);
	box-shadow: 0 2px 6px rgba(219, 39, 119, .3);
}

/* Progress-ring avatar (JS sets --p: 0..100) */
.aj-groups-avatar[style*="--p"] {
	background:
		conic-gradient(#8b5cf6 calc(var(--p, 0) * 1%), #e5e7eb 0) padding-box,
		linear-gradient(135deg, #a78bfa, #7c3aed) border-box;
	border: 2px solid transparent;
	color: #1f2933;
	font-weight: 800;
}

.aj-groups-row.is-header > span:not(.aj-groups-member) { text-align: center; }

.aj-groups-cell {
	width: 32px; height: 32px; border-radius: var(--aj-radius-sm);
	border: 1px solid var(--aj-border, #e5e7eb); background: #fff;
	font-size: 15px; line-height: 1;
	cursor: pointer; color: #9ca3af;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--aj-t-fast), border-color var(--aj-t-fast),
	            transform var(--aj-t-fast), box-shadow var(--aj-t-fast);
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}
.aj-groups-cell:not(:disabled):hover {
	border-color: #c4b5fd;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, .12);
}
.aj-groups-cell:not(:disabled):active { transform: scale(.9); }
.aj-groups-cell.is-done {
	background: linear-gradient(135deg, #a78bfa, #7c3aed);
	border-color: #7c3aed; color: #fff;
	box-shadow: 0 2px 6px rgba(139, 92, 246, .3);
}
.aj-groups-cell:disabled { cursor: default; opacity: .7; }

@keyframes aj-cell-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.22); }
	100% { transform: scale(1); }
}
.aj-groups-cell.is-done { animation: aj-cell-pop .28s var(--aj-ease); }

.aj-groups-streak {
	display: inline-flex; align-items: center; gap: 2px;
	font-size: 10.5px; font-weight: 800;
	color: #b45309;
	background: #fef3c7;
	padding: 2px 7px;
	border-radius: var(--aj-radius-pill);
	line-height: 1.4;
	flex-shrink: 0;
}
.aj-groups-streak.is-zero { display: none; }

.aj-groups-progress {
	position: relative; height: 4px;
	background: #e5e7eb;
	border-radius: 2px;
	overflow: hidden;
	margin-top: 5px;
	width: 100%;
}
.aj-groups-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #a78bfa, #7c3aed);
	border-radius: 2px;
	transition: width var(--aj-t-slow);
}
.aj-groups-progress-bar.is-high {
	background: linear-gradient(90deg, #34d399, #059669);
}

/* =========================================================================
   12. REACTIONS
   ========================================================================= */

.aj-groups-reactions {
	display: flex; flex-wrap: wrap; gap: 4px;
	margin-top: 6px;
	align-items: center;
}

.aj-groups-react-btn {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 3px 8px; border-radius: var(--aj-radius-pill);
	background: var(--aj-surface-1, #f8fafc);
	border: 1px solid var(--aj-border, #e5e7eb);
	font-size: 12px; cursor: pointer;
	transition: background var(--aj-t-fast), border-color var(--aj-t-fast),
	            transform var(--aj-t-fast);
	font-family: inherit;
	color: #4b5563;
	-webkit-tap-highlight-color: transparent;
	min-height: 26px;
}
.aj-groups-react-btn:hover {
	background: #f5f3ff; border-color: #c4b5fd;
}
.aj-groups-react-btn:active { transform: scale(.94); }
.aj-groups-react-btn.is-active {
	background: #ede9fe;
	border-color: #8b5cf6;
	color: #6d28d9;
	font-weight: 700;
}

.aj-groups-react-count {
	font-size: 10.5px; font-weight: 700; color: #6b7280;
}
.aj-groups-react-btn.is-active .aj-groups-react-count { color: #6d28d9; }

.aj-groups-react-add {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--aj-surface-1, #f8fafc);
	border: 1px dashed #cbd5e1;
	color: #94a3b8;
	font-size: 14px; font-weight: 800;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--aj-t-fast), border-color var(--aj-t-fast),
	            color var(--aj-t-fast), transform var(--aj-t-fast);
	-webkit-tap-highlight-color: transparent;
	padding: 0;
	line-height: 1;
}
.aj-groups-react-add:hover {
	background: #f5f3ff;
	border-color: #8b5cf6;
	color: #6d28d9;
}
.aj-groups-react-add:active { transform: scale(.9); }

.aj-groups-react-pop {
	position: fixed;
	z-index: 2147483480;
	background: #fff;
	border: 1px solid var(--aj-border, #e5e7eb);
	border-radius: var(--aj-radius-md);
	box-shadow: var(--aj-shadow-pop);
	padding: 8px;
	display: flex;
	gap: 4px;
	animation: aj-groups-pop .18s var(--aj-ease);
}
.aj-groups-react-pop[hidden] { display: none !important; }

.aj-groups-react-pop-btn {
	width: 40px; height: 40px;
	border-radius: var(--aj-radius-sm);
	background: transparent;
	border: none;
	font-size: 22px; line-height: 1;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--aj-t-fast), transform var(--aj-t-fast);
	-webkit-tap-highlight-color: transparent;
}
.aj-groups-react-pop-btn:hover {
	background: #f5f3ff;
	transform: scale(1.12);
}
.aj-groups-react-pop-btn.is-active {
	background: #ede9fe;
}

.aj-groups-react-backdrop {
	position: fixed; inset: 0;
	background: rgba(8, 12, 20, .4);
	z-index: 2147483470;
	animation: aj-groups-fade .18s var(--aj-ease);
}
.aj-groups-react-backdrop[hidden] { display: none !important; }

/* =========================================================================
   13. LEADERBOARD
   ========================================================================= */

.aj-groups-leader {
	display: flex; flex-direction: column; gap: 6px;
	margin-bottom: 16px;
}
.aj-groups-leader-row {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 13px;
	background: var(--aj-surface-1, #f8fafc);
	border: 1px solid var(--aj-border, #e5e7eb);
	border-radius: var(--aj-radius-md);
	transition: transform var(--aj-t-fast), box-shadow var(--aj-t-fast);
}
.aj-groups-leader-row:hover {
	transform: translateX(2px);
	box-shadow: var(--aj-shadow-2);
}
.aj-groups-leader-row.is-me {
	background: #f5f3ff;
	border-color: #a78bfa;
	box-shadow: 0 0 0 1px #a78bfa inset;
}
.aj-groups-leader-rank {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: 12px; font-weight: 800;
	background: #e5e7eb; color: #4b5563;
	flex-shrink: 0;
}
.aj-groups-leader-rank.is-gold   { background: #fde68a; color: #92400e; }
.aj-groups-leader-rank.is-silver { background: #e5e7eb; color: #374151; }
.aj-groups-leader-rank.is-bronze { background: #fcd9a3; color: #7c2d12; }
.aj-groups-leader-name {
	flex: 1; font-size: 13px; font-weight: 700;
	color: var(--aj-text, #1f2933);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-groups-leader-score {
	font-size: 13px; font-weight: 800; color: #6d28d9;
	flex-shrink: 0;
}

/* =========================================================================
   14. CHART
   ========================================================================= */

.aj-groups-chart {
	display: flex; align-items: flex-end; gap: 3px;
	height: 90px;
	padding: 8px 4px 0;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--aj-border, #e5e7eb);
}
.aj-groups-chart-bar {
	flex: 1; min-width: 3px;
	background: linear-gradient(180deg, #a78bfa, #7c3aed);
	border-radius: 3px 3px 0 0;
	transition: background var(--aj-t-fast);
	position: relative;
	cursor: default;
}
.aj-groups-chart-bar.is-empty { background: #e5e7eb; }
.aj-groups-chart-bar:hover {
	background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
}
.aj-groups-chart-legend {
	display: flex; justify-content: space-between;
	font-size: 10px; color: #9ca3af;
	margin-bottom: 12px;
}

/* =========================================================================
   15. FOOTER
   ========================================================================= */

.aj-groups-foot {
	display: flex; gap: 8px; padding-top: 4px;
}
.aj-groups-foot .aj-groups-btn { flex: 1; }

/* =========================================================================
   16. TOAST
   ========================================================================= */

.aj-groups-toast {
	position: fixed; left: 50%; bottom: 32px;
	transform: translateX(-50%) translateY(20px);
	background: #1f2933; color: #fff;
	padding: 11px 20px; border-radius: var(--aj-radius-pill);
	font-size: 13px; font-weight: 600;
	opacity: 0; pointer-events: none;
	transition: opacity var(--aj-t-base), transform var(--aj-t-base);
	z-index: 2147483600;
	font-family: 'Noto Sans Bengali', 'Kalpurush', sans-serif;
	max-width: 90vw;
	text-align: center;
	box-shadow: var(--aj-shadow-3);
}
.aj-groups-toast.is-visible {
	opacity: 1; transform: translateX(-50%) translateY(0);
}
.aj-groups-toast.is-error { background: #b91c1c; }

/* =========================================================================
   17. FOCUS VISIBLE  (keyboard users only)
   ========================================================================= */

.aj-groups-btn:focus-visible,
.aj-groups-card:focus-visible,
.aj-groups-tab:focus-visible,
.aj-groups-deed-cat:focus-visible,
.aj-groups-deed-card:focus-visible,
.aj-groups-deed:focus-visible,
.aj-groups-cell:focus-visible,
.aj-groups-react-btn:focus-visible,
.aj-groups-react-add:focus-visible,
.aj-groups-react-pop-btn:focus-visible,
.aj-groups-close:focus-visible,
.aj-groups-edit-btn:focus-visible,
.aj-groups-back:focus-visible,
.aj-groups-invite-code:focus-visible {
	outline: 2px solid #8b5cf6;
	outline-offset: 2px;
	border-radius: var(--aj-radius-sm);
}
.aj-groups-field input[type="text"]:focus-visible {
	outline: 2px solid #8b5cf6;
	outline-offset: 2px;
}

/* =========================================================================
   18. MOBILE
   ========================================================================= */

@media (max-width: 700px) {
	.aj-groups-modal { padding: 0; align-items: stretch; }
	.aj-groups-panel {
		width: 100%; max-width: 100%;
		max-height: 100vh; max-height: 100dvh;
		border-radius: 0;
	}
	.aj-groups-body { padding: 14px 16px 20px; }

	.aj-groups-matrix {
		margin-left: -16px; margin-right: -16px;
		padding-left: 16px; padding-right: 16px;
	}
	.aj-groups-row {
		grid-template-columns: 128px;
		grid-auto-columns: 34px;
		gap: 4px;
		padding: 8px 10px;
	}
	.aj-groups-cell {
		width: 34px; height: 34px;
		font-size: 15px; border-radius: 8px;
	}
	.aj-groups-row.is-header { font-size: 9.5px; padding: 3px 10px; }
	.aj-groups-member { font-size: 12px; }
	.aj-groups-avatar { width: 26px; height: 26px; font-size: 11px; }

	.aj-groups-btn { min-height: 44px; padding: 11px 16px; }
	.aj-groups-btn.is-icon { min-width: 44px; min-height: 44px; }
	.aj-groups-foot .aj-groups-btn { padding: 12px 16px; font-size: 13.5px; }

	.aj-groups-stat { min-width: 78px; padding: 9px 11px; }
	.aj-groups-stat-value { font-size: 18px; }

	.aj-groups-chart { height: 70px; }
	.aj-groups-tab { font-size: 11.5px; padding: 9px 8px; }

	.aj-groups-deed-grid {
		grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
		gap: 8px;
	}
	.aj-groups-deed-card {
		min-height: 84px;
		padding: 10px 4px 8px;
	}
	.aj-groups-deed-card-icon { font-size: 24px; }
	.aj-groups-deed-card-label { font-size: 11px; }

	.aj-groups-deed-cats {
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 2;
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Reactions popover → bottom sheet */
	.aj-groups-react-pop {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100%;
		border-radius: var(--aj-radius-lg) var(--aj-radius-lg) 0 0;
		padding: calc(16px + env(safe-area-inset-top, 0px))
		         12px
		         calc(16px + env(safe-area-inset-bottom, 0px));
		justify-content: space-around;
		animation: aj-groups-slideup .24s var(--aj-ease);
		max-height: 60vh;
		overflow-y: auto;
	}
	.aj-groups-react-pop-btn { width: 48px; height: 48px; font-size: 26px; }
}

@keyframes aj-groups-slideup {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

/* =========================================================================
   19. REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.aj-groups-modal,
	.aj-groups-panel,
	.aj-groups-react-pop,
	.aj-groups-skel-row,
	.aj-groups-toast,
	.aj-groups-cell,
	.aj-groups-btn,
	.aj-groups-deed-card,
	.aj-groups-react-btn,
	.aj-groups-react-pop-btn {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.aj-groups-cell.is-done { animation: none !important; }
	.aj-groups-deed-card:hover,
	.aj-groups-card:hover,
	.aj-groups-leader-row:hover,
	.aj-groups-stat:hover {
		transform: none !important;
	}
}

/* =========================================================================
   20. DARK MODE (auto, follows OS preference)
   ========================================================================= */

@media (prefers-color-scheme: dark) {
	.aj-groups-panel {
		background: #14181f;
		color: #e6e8eb;
		color-scheme: dark;
		--aj-bg:         #14181f;
		--aj-surface-1:  #1a1f27;
		--aj-surface-2:  #232830;
		--aj-border:     #2a313b;
		--aj-text:       #e6e8eb;
		--aj-text-muted: #9aa4b2;
		--aj-text-dim:   #6b7280;
	}
	.aj-groups-body { background: #14181f; }
	.aj-groups-card { background: #14181f; border-color: #2a313b; }
	.aj-groups-card:hover {
		background: rgba(139, 92, 246, .08);
		border-color: #8b5cf6;
	}
	.aj-groups-card-name { color: #e6e8eb; }
	.aj-groups-card-role { background: rgba(139, 92, 246, .25); color: #c4b5fd; }

	.aj-groups-field label { color: #9aa4b2; }
	.aj-groups-field input[type="text"] {
		background: #14181f; border-color: #2a313b; color: #e6e8eb;
	}
	.aj-groups-field input[type="text"]:focus {
		background: rgba(139, 92, 246, .1);
		border-color: #8b5cf6;
		box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
	}
	.aj-groups-field-hint { color: #6b7280; }

	.aj-groups-deed-cat {
		background: #14181f;
		border-color: #2a313b;
		color: #94a3b8;
	}
	.aj-groups-deed-cat:hover {
		background: rgba(139, 92, 246, .12);
		border-color: #8b5cf6;
		color: #c4b5fd;
	}
	.aj-groups-deed-cat.is-active {
		background: linear-gradient(135deg, #8b5cf6, #7c3aed);
		border-color: #8b5cf6;
		color: #fff;
	}

	.aj-groups-deed-card {
		background: #14181f;
		border-color: #2a313b;
		color: #94a3b8;
	}
	.aj-groups-deed-card:hover {
		background: rgba(139, 92, 246, .08);
		border-color: #8b5cf6;
	}
	.aj-groups-deed-card.is-on {
		background: linear-gradient(160deg, rgba(139, 92, 246, .18), rgba(139, 92, 246, .28));
		border-color: #8b5cf6;
		color: #c4b5fd;
	}
	.aj-groups-deed-empty { color: #6b7280; }

	.aj-groups-deed { background: #14181f; border-color: #2a313b; color: #e6e8eb; }
	.aj-groups-deed.is-on {
		background: rgba(139, 92, 246, .18);
		border-color: #a78bfa;
		color: #c4b5fd;
	}

	.aj-groups-edit-banner {
		background: rgba(251, 191, 36, .15);
		border-color: rgba(251, 191, 36, .4);
		color: #fcd34d;
	}

	.aj-groups-row { background: #14181f; border-color: #2a313b; }
	.aj-groups-row.is-me {
		background: rgba(139, 92, 246, .14);
		border-color: #a78bfa;
		box-shadow: 0 0 0 1px #a78bfa inset;
	}
	.aj-groups-member { color: #e6e8eb; }
	.aj-groups-member small { color: #9aa4b2; }
	.aj-groups-cell {
		background: #232830;
		border-color: #333a44;
		color: #8a93a0;
	}
	.aj-groups-cell:not(:disabled):hover {
		border-color: #8b5cf6;
		box-shadow: 0 0 0 3px rgba(139, 92, 246, .2);
	}
	.aj-groups-cell.is-done {
		background: linear-gradient(135deg, #8b5cf6, #6d28d9);
		border-color: #8b5cf6;
	}

	.aj-groups-invite {
		background: rgba(139, 92, 246, .12);
		border-color: rgba(167, 139, 250, .4);
	}
	.aj-groups-invite-code {
		background: #14181f;
		color: #c4b5fd;
		border-color: rgba(167, 139, 250, .3);
	}

	.aj-groups-back:hover { background: #232830; color: #e6e8eb; }
	.aj-groups-empty { color: #9aa4b2; }
	.aj-groups-matrix::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, .4); }

	.aj-groups-tabs { background: #232830; }
	.aj-groups-tab { color: #9aa4b2; }
	.aj-groups-tab:hover { color: #e6e8eb; }
	.aj-groups-tab.is-active {
		background: #14181f;
		color: #c4b5fd;
		box-shadow: none;
		border: 1px solid #2a313b;
	}

	.aj-groups-stat { background: #14181f; border-color: #2a313b; }
	.aj-groups-stat-label { color: #9aa4b2; }
	.aj-groups-stat-value { color: #e6e8eb; }
	.aj-groups-stat-value small { color: #6b7280; }
	.aj-groups-stat.is-accent {
		background: linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(139, 92, 246, .22));
		border-color: rgba(167, 139, 250, .5);
	}
	.aj-groups-stat.is-accent .aj-groups-stat-value { color: #c4b5fd; }

	.aj-groups-streak { background: rgba(251, 191, 36, .2); color: #fbbf24; }

	.aj-groups-progress { background: #2a313b; }
	.aj-groups-progress-bar { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
	.aj-groups-progress-bar.is-high { background: linear-gradient(90deg, #10b981, #34d399); }

	.aj-groups-react-btn {
		background: #232830;
		border-color: #333a44;
		color: #9aa4b2;
	}
	.aj-groups-react-btn:hover {
		background: rgba(139, 92, 246, .12);
		border-color: #8b5cf6;
	}
	.aj-groups-react-btn.is-active {
		background: rgba(139, 92, 246, .22);
		border-color: #8b5cf6;
		color: #c4b5fd;
	}
	.aj-groups-react-count { color: #9aa4b2; }
	.aj-groups-react-btn.is-active .aj-groups-react-count { color: #c4b5fd; }

	.aj-groups-react-add {
		background: #232830;
		border-color: #333a44;
		color: #64748b;
	}
	.aj-groups-react-add:hover {
		background: rgba(139, 92, 246, .15);
		border-color: #8b5cf6;
		color: #c4b5fd;
	}
	.aj-groups-react-pop {
		background: #1e1e1e;
		border-color: #2a313b;
	}
	.aj-groups-react-pop-btn:hover { background: rgba(139, 92, 246, .15); }
	.aj-groups-react-pop-btn.is-active { background: rgba(139, 92, 246, .25); }

	.aj-groups-leader-row { background: #14181f; border-color: #2a313b; }
	.aj-groups-leader-row.is-me {
		background: rgba(139, 92, 246, .14);
		border-color: #a78bfa;
		box-shadow: 0 0 0 1px #a78bfa inset;
	}
	.aj-groups-leader-rank { background: #2a313b; color: #9aa4b2; }
	.aj-groups-leader-rank.is-gold   { background: rgba(251, 191, 36, .2); color: #fbbf24; }
	.aj-groups-leader-rank.is-silver { background: #374151; color: #e5e7eb; }
	.aj-groups-leader-rank.is-bronze { background: rgba(217, 119, 6, .25); color: #fbbf24; }
	.aj-groups-leader-name { color: #e6e8eb; }
	.aj-groups-leader-score { color: #c4b5fd; }

	.aj-groups-chart { border-bottom-color: #2a313b; }
	.aj-groups-chart-bar.is-empty { background: #2a313b; }
	.aj-groups-chart-legend { color: #6b7280; }

	.aj-groups-skel-row {
		background: linear-gradient(90deg, #1a1f27 25%, #232830 50%, #1a1f27 75%);
		background-size: 200% 100%;
	}

	@media (max-width: 700px) {
		.aj-groups-deed-cats { background: #1e1e1e; }
	}
}

/* =========================================================================
   21. MANUAL THEME OVERRIDE
   Add [data-aj-theme="dark"] or [data-aj-theme="light"] to <html>.
   Overrides OS preference. JS sets this via localStorage('aj_theme').
   ========================================================================= */

[data-aj-theme="dark"] .aj-groups-panel,
[data-aj-theme="dark"] .aj-groups-react-pop {
	background: #14181f;
	color: #e6e8eb;
	color-scheme: dark;
	--aj-bg:         #14181f;
	--aj-surface-1:  #1a1f27;
	--aj-surface-2:  #232830;
	--aj-border:     #2a313b;
	--aj-text:       #e6e8eb;
	--aj-text-muted: #9aa4b2;
	--aj-text-dim:   #6b7280;
}

[data-aj-theme="light"] .aj-groups-panel,
[data-aj-theme="light"] .aj-groups-react-pop {
	background: #fff;
	color: #1f2933;
	color-scheme: light;
}