/**
 *	== Modified by ao == (v1.4.0)
 *	Night worker Schedule - Rank / Number badges
 *
 *	Loaded on the front end (after front.css) and on the plugin's
 *	admin screens, so the preview in wp-admin matches the real output.
 */

/* ------------------------------------------------------------------
 *	Anchor : the element the badges are positioned against
 * ------------------------------------------------------------------ */
ul.staff_block.attmgr_card_grid li.attmgr_card .thumb,
ul.staff_block li .thumb,
.attmgr_badge_anchor {
	position: relative;
}
.attmgr_badge_anchor {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

/* ------------------------------------------------------------------
 *	Stack : badges piled up in one corner
 * ------------------------------------------------------------------ */
.attmgr_badge_stack {
	position: absolute;
	z-index: 3;
	display: flex !important;
	flex-direction: column;
	gap: 4px;
	max-width: calc(100% - 12px);
	line-height: 1;
	pointer-events: none;	/* keep the photo link clickable */
}
.attmgr_badge_stack.attmgr_badge_pos--tl { top: 6px;    left: 6px;  align-items: flex-start; }
.attmgr_badge_stack.attmgr_badge_pos--tr { top: 6px;    right: 6px; align-items: flex-end; }
.attmgr_badge_stack.attmgr_badge_pos--bl { bottom: 6px; left: 6px;  align-items: flex-start; }
.attmgr_badge_stack.attmgr_badge_pos--br { bottom: 6px; right: 6px; align-items: flex-end; }

/*	Inline usage (admin preview / next to a name) */
.attmgr_badge_stack.is-inline {
	position: static;
	display: inline-flex !important;
	flex-direction: row;
	vertical-align: middle;
	max-width: none;
	pointer-events: auto;
}

/* ------------------------------------------------------------------
 *	Badge
 * ------------------------------------------------------------------ */
.attmgr_badge {
	display: inline-flex !important;
	align-items: center;
	gap: 3px;
	box-sizing: border-box;
	margin: 0;
	padding: 3px 7px 3px 5px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .02em;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.attmgr_badge.is-icononly {
	padding: 4px;
	border-radius: 50%;
}
.attmgr_badge .attmgr_badge_icon {
	display: block;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	fill: currentColor;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.attmgr_badge .attmgr_badge_text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*	Flat tone : solid color, no glossy inset highlight.
	This is the default, and suits a white / serif salon site. */
.attmgr_badge.attmgr_badge_tone--flat {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	text-shadow: none;
}
.attmgr_badge_ribbon_band.attmgr_badge_tone--flat {
	border-top-color: rgba(255, 255, 255, .22);
	text-shadow: none;
}

/*	Sizes */
.attmgr_badge_size--sm .attmgr_badge { padding: 2px 6px 2px 4px; font-size: 10px; border-radius: 3px; }
.attmgr_badge_size--sm .attmgr_badge .attmgr_badge_icon { width: 11px; height: 11px; }
.attmgr_badge_size--lg .attmgr_badge { padding: 5px 10px 5px 7px; font-size: 13px; border-radius: 5px; }
.attmgr_badge_size--lg .attmgr_badge .attmgr_badge_icon { width: 17px; height: 17px; }

/*	The number badge reads as a "rank", so give it a little more presence */
.attmgr_badge.attmgr_badge--number {
	letter-spacing: .04em;
}

/*	Narrow screens : the card grid is 2 columns, so scale the badges down */
@media screen and (max-width: 767px) {
	.attmgr_badge_stack:not(.is-inline) { gap: 3px; }
	.attmgr_badge_stack:not(.is-inline) .attmgr_badge {
		padding: 2px 5px 2px 4px;
		font-size: 10px;
	}
	.attmgr_badge_stack:not(.is-inline) .attmgr_badge .attmgr_badge_icon {
		width: 11px;
		height: 11px;
	}
	.attmgr_badge_stack.attmgr_badge_size--lg:not(.is-inline) .attmgr_badge { font-size: 11px; }
	.attmgr_badge_stack.attmgr_badge_size--lg:not(.is-inline) .attmgr_badge .attmgr_badge_icon { width: 13px; height: 13px; }
}

/* ------------------------------------------------------------------
 *	Corner ribbon
 * ------------------------------------------------------------------ */
.attmgr_badge_ribbon_wrap {
	position: absolute;
	z-index: 2;
	width: 104px;
	height: 104px;
	overflow: hidden;
	pointer-events: none;
}
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--tl { top: 0;    left: 0; }
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--tr { top: 0;    right: 0; }
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--bl { bottom: 0; left: 0; }
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--br { bottom: 0; right: 0; }

.attmgr_badge_ribbon {
	display: block;
}
.attmgr_badge_ribbon_band {
	position: absolute;
	display: block;
	width: 160px;
	padding: 4px 0;
	border-top: 1px solid rgba(255, 255, 255, .35);
	border-bottom: 1px solid rgba(0, 0, 0, .25);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--tl .attmgr_badge_ribbon_band {
	top: 22px; left: -42px; transform: rotate(-45deg);
}
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--tr .attmgr_badge_ribbon_band {
	top: 22px; right: -42px; transform: rotate(45deg);
}
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--bl .attmgr_badge_ribbon_band {
	bottom: 22px; left: -42px; transform: rotate(45deg);
}
.attmgr_badge_ribbon_wrap.attmgr_badge_pos--br .attmgr_badge_ribbon_band {
	bottom: 22px; right: -42px; transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
	.attmgr_badge_ribbon_wrap { width: 84px; height: 84px; }
	.attmgr_badge_ribbon_band { width: 130px; font-size: 9px; padding: 3px 0; }
	.attmgr_badge_ribbon_wrap.attmgr_badge_pos--tl .attmgr_badge_ribbon_band { top: 17px; left: -34px; }
	.attmgr_badge_ribbon_wrap.attmgr_badge_pos--tr .attmgr_badge_ribbon_band { top: 17px; right: -34px; }
	.attmgr_badge_ribbon_wrap.attmgr_badge_pos--bl .attmgr_badge_ribbon_band { bottom: 17px; left: -34px; }
	.attmgr_badge_ribbon_wrap.attmgr_badge_pos--br .attmgr_badge_ribbon_band { bottom: 17px; right: -34px; }
}

/* ------------------------------------------------------------------
 *	Weekly-all table : keep the badge small over the small portrait
 * ------------------------------------------------------------------ */
table.attmgr_weekly_all td.portrait .attmgr_badge_stack .attmgr_badge {
	padding: 1px 4px 1px 3px;
	font-size: 9px;
	border-radius: 3px;
}
table.attmgr_weekly_all td.portrait .attmgr_badge_stack .attmgr_badge .attmgr_badge_icon {
	width: 9px;
	height: 9px;
}
table.attmgr_weekly_all td.portrait .attmgr_badge_ribbon_wrap {
	width: 62px;
	height: 62px;
}
table.attmgr_weekly_all td.portrait .attmgr_badge_ribbon_band {
	width: 96px;
	font-size: 8px;
	padding: 2px 0;
}
table.attmgr_weekly_all td.portrait .attmgr_badge_ribbon_wrap.attmgr_badge_pos--tl .attmgr_badge_ribbon_band { top: 13px; left: -25px; }
table.attmgr_weekly_all td.portrait .attmgr_badge_ribbon_wrap.attmgr_badge_pos--tr .attmgr_badge_ribbon_band { top: 13px; right: -25px; }
table.attmgr_weekly_all td.portrait .attmgr_badge_ribbon_wrap.attmgr_badge_pos--bl .attmgr_badge_ribbon_band { bottom: 13px; left: -25px; }
table.attmgr_weekly_all td.portrait .attmgr_badge_ribbon_wrap.attmgr_badge_pos--br .attmgr_badge_ribbon_band { bottom: 13px; right: -25px; }

/* ------------------------------------------------------------------
 *	Admin : settings preview / profile screen
 * ------------------------------------------------------------------ */
.attmgr_badge_preview {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 4px;
}
.attmgr_badge_preview_item {
	text-align: center;
}
.attmgr_badge_preview_box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	min-height: 40px;
	padding: 6px 8px;
	background: #f1f1f1 repeating-linear-gradient(45deg, rgba(0, 0, 0, .035) 0 6px, transparent 6px 12px);
	border: 1px solid #dcdcde;
	border-radius: 4px;
}
.attmgr_badge_preview_key {
	margin-top: 3px;
	font-size: 11px;
	color: #666;
	font-family: Consolas, Monaco, monospace;
	word-break: break-all;
}
.attmgr_badge_profile_preview {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-left: 10px;
	padding: 3px 8px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	vertical-align: middle;
}
.attmgr_badge_profile_preview:empty {
	display: none;
}
.column-attmgr_ex_attr_rank,
.column-attmgr_ex_attr_number {
	width: 130px;
}