/*
 * Pieces shared with server-rendered markup, kept separate from app.css
 * because the class names here are computed in Java (Thymeleaf) as well as
 * in JavaScript, so they are contracts rather than free-floating styles.
 *
 * The old table/row/accordion rules that used to live here went away with
 * the flat Groups table they styled - the shell, cards and drawer are all
 * in app.css now. Page background and typography come from tokens.css.
 */

/*
 * Deterministic colour-coding for group avatars, the navbar avatar and
 * currency pills. Group names and currencies (including free-text "Others"
 * values) are arbitrary strings, so a colour is picked by hashing the string
 * to one of 7 fixed tones.
 *
 * Bold & Vibrant refresh - the palette moved from 7 unrelated pastels
 * (indigo/teal/terracotta/rose/blue/olive/amber) to 7 tones that all sit
 * within the green/orange brand family (a couple of warm ambers/limes
 * included so 7 adjacent cards still read as visually distinct from one
 * another, not so the badges stop being green/orange - see tokens.css for
 * the underlying --es-primary/--es-accent values these echo).
 *
 * badge-color-N is computed in TWO places that must agree: server-side in
 * Thymeleaf (name.hashCode() % 7) and client-side in groups.js
 * (javaHashCode(), a re-implementation of java.lang.String#hashCode) after
 * an inline edit. Renaming or renumbering these classes desynchronizes a
 * freshly-saved card from the same card after a reload - change all three
 * together or not at all.
 */
.badge-color-0 { background: #DCFCE7; color: #166534; }
.badge-color-1 { background: #FFEDD5; color: #9A3412; }
.badge-color-2 { background: #D1FAE5; color: #065F46; }
.badge-color-3 { background: #FEF3C7; color: #92400E; }
.badge-color-4 { background: #BBF7D0; color: #14532D; }
.badge-color-5 { background: #FED7AA; color: #7C2D12; }
.badge-color-6 { background: #ECFCCB; color: #3F6212; }

.group-avatar {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: var(--es-r-md, 14px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 720;
	letter-spacing: .02em;
}

/*
 * Group avatars only (group.name hashed - groups/list.html card avatar,
 * groups/dashboard.html hero avatar, invitations/join.html) - moved off
 * the 7-hue badge-color-N palette above onto just the app's own two brand
 * tones, still picked deterministically per group name (via % 2 instead
 * of % 7) so a given group's colour stays stable across reloads. Every
 * other .group-avatar-shaped element (this user's own profile avatar,
 * member/participant/balance avatars elsewhere) is a different design
 * concern and keeps the full badge-color-N palette unchanged.
 */
.group-avatar.is-sage {
	background: var(--es-primary-soft, #e6ecf1);
	color: var(--es-primary-hover, #264e73);
}

.group-avatar.is-terracotta {
	background: var(--es-accent-soft, #f3e9d3);
	color: var(--es-accent-text, #8a6a25);
}

/* Same palette and shape as .group-avatar, sized down for the topbar. */
.navbar-avatar {
	width: 30px;
	height: 30px;
	min-width: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 720;
}

/* Square icon button used for card actions, drawer actions and member rows. */
.btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--es-border, #e4e8f0);
	border-radius: var(--es-r-sm, 10px);
	background: var(--es-surface, #fff);
	color: var(--es-text-muted, #5b6478);
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}

.btn-icon:hover:not(:disabled) {
	background: var(--es-surface-hover, #f1f4fd);
	color: var(--es-text, #171a23);
	border-color: var(--es-border-strong, #d4dae7);
	transform: translateY(-1px);
}

.btn-icon:active:not(:disabled) {
	transform: translateY(0);
}

.btn-icon:disabled {
	opacity: .4;
	cursor: default;
}

.btn-icon.active {
	border-color: var(--es-primary, #2e5e8a);
	color: var(--es-primary, #2e5e8a);
	background: var(--es-primary-soft, #e6ecf1);
}

/* ---------------------------------------------------------- member rows */

.group-members-table tbody tr {
	transition: background-color .1s ease;
}

/*
 * Bootstrap paints background-color directly onto td/th
 * (.table > :not(caption) > * > *), which covers anything set on the <tr> -
 * so the hover highlight has to target the cells, exactly as Bootstrap's own
 * hover/striping does internally.
 */
.group-members-table tbody tr:hover td {
	background-color: var(--es-surface-hover, #f1f4fd);
}

/*
 * The remove icon only exists in the DOM for a row the viewer can act on
 * (see groups.js) - this controls only when it is visible: hidden at rest,
 * revealed on that row's hover or keyboard focus.
 */
.btn-remove-member {
	opacity: 0;
	transition: opacity .1s ease;
}

.group-members-table tbody tr:hover .btn-remove-member,
.group-members-table tbody tr:focus-within .btn-remove-member {
	opacity: 1;
}

@media (hover: none) {
	.btn-remove-member {
		opacity: 1;
	}
}

/*
 * Row icons: the owner keeps the sparkle regardless of join status.
 * icon-member-joined (green) means a real groupusers row; icon-member-invited
 * (amber) means invitation-only - invited but not yet joined.
 */
.icon-owner-sparkle {
	width: 14px;
	height: 14px;
	fill: #e0a800;
	vertical-align: -2px;
}

.icon-member-joined {
	color: var(--es-primary, #2e5e8a);
}

.icon-member-invited {
	color: #c98a04;
}