/* Frontend modal dismiss controls retain their own default colors; keep keyboard focus visible. */
body:not(.wp-admin) :is(
	.crm-lead-modal .crm-icon-btn,
	.crm-lead-confirm .crm-icon-btn,
	.crm-staff-daily-drawer .crm-icon-btn,
	.crm-flyer-milestone-modal .crm-icon-btn,
	.crm-team-date-dialog header button[data-crm-team-date-cancel],
	.crm-share-payment-dialog header button[data-crm-payment-modal-close],
	.crm-settlement-detail-dialog > header button[data-crm-settlement-detail-close]
):focus-visible {
	outline: 2px solid #a9dfd8;
	outline-offset: 2px;
}

/* Keep the approved Sales containment; other leaderboard roots use the same width thresholds. */
body.wp-admin .crm-leaderboard[data-crm-leaderboard],
.crm-leaderboard[data-crm-leaderboard]:not([data-crm-leaderboard-action="crm_mdhanway_leaderboard_sync"]) {
	container-name: crm-sales-leaderboard;
	container-type: inline-size;
}

/* A sole leaderboard widget needs no flex wrapping. Cover full/boxed hosts and
   legacy widget wrappers, including narrow parents above Elementor's mobile breakpoint. */
body:not(.wp-admin) .e-con.e-flex:has(> .elementor-widget-shortcode:only-child .elementor-shortcode .crm-leaderboard[data-crm-leaderboard]),
body:not(.wp-admin) .e-con.e-flex > .e-con-inner:has(> .elementor-widget-shortcode:only-child .elementor-shortcode .crm-leaderboard[data-crm-leaderboard]) {
	flex-wrap: nowrap;
}

/* These contained frontend roots also inflate a sole widget in Elementor's mobile
   wrapping column. Preserve containment, component spacing and wider layouts. */
@media (max-width: 767px) {
	body:not(.wp-admin) :is(.e-con.e-flex, .e-con.e-flex > .e-con-inner):has(> .elementor-widget-shortcode:only-child .elementor-shortcode > :is(.crm-kyc-form-shell, .crm-staff-bonuses[data-crm-staff-bonuses], .crm-subscription.crm-sub-frontend[data-sub-frontend], .crm-manager-leads-dashboard[data-crm-manager-dashboard])) {
		flex-wrap: nowrap;
	}
}

/* Reuse the existing leaderboard thresholds for narrow desktop containers too. */
@container crm-sales-leaderboard (max-width: 1180px) {
	.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-period-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container crm-sales-leaderboard (max-width: 960px) {
	.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container crm-sales-leaderboard (max-width: 760px) {
	.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-period-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container crm-sales-leaderboard (max-width: 640px) {
	.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-row {
		gap: 10px;
		grid-template-columns: auto auto minmax(0, 1fr);
		padding: 14px;
	}

	.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-row > strong {
		grid-column: 3;
		justify-self: start;
		max-width: 100%;
		overflow-wrap: anywhere;
		white-space: normal;
	}

	.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-reward-pill {
		max-width: 100%;
		overflow-wrap: anywhere;
		white-space: normal;
	}

	.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-feature-avatar {
		max-width: 100%;
		height: auto;
	}
}


/* Mobile/tablet ranking navigation; desktop keeps the existing period matrix. */
.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-rank-tabs[hidden],
.crm-leaderboard[data-crm-leaderboard] .crm-leaderboard-period-card[hidden] {
	display: none;
}

@media (max-width: 1180px) {
	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-rank-tabs {
		background-color: #21222D;
		border: 1px solid #A9DFD8;
		border-radius: 999px;
		display: grid;
		gap: 4px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-bottom: 18px;
		padding: 6px;
	}

	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-rank-tab {
		appearance: none;
		background-color: transparent;
		border: 1px solid transparent;
		border-radius: 999px;
		box-shadow: none;
		color: #A9DFD8;
		cursor: pointer;
		font: inherit;
		letter-spacing: inherit;
		margin: 0;
		min-height: 44px;
		min-width: 0;
		padding: 8px 4px;
		text-align: center;
		text-transform: none;
	}

	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-rank-tab[aria-selected="true"] {
		background-color: #A9DFD8;
		color: #171821;
	}

	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-rank-tab:focus-visible,
	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-period-card:focus-visible {
		outline: 2px solid #A9DFD8;
		outline-offset: 2px;
	}

	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-period-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-period-header,
	.crm-leaderboard[data-crm-leaderboard][data-crm-rank-tabs-active] .crm-leaderboard-period-card::before {
		display: none;
	}
}