/* ── DocumentCard ──────────────────────────────────────────────────── */
.doc-preview-image {
	cursor: zoom-in;
	max-height: 240px;
	width: 100%;
	object-fit: contain;
}

.doc-placeholder-image {
	max-height: 240px;
	width: 100%;
	object-fit: contain;
}

.doc-empty-box {
	min-height: 200px;
}

.doc-empty-icon {
	font-size: 3rem;
}

.doc-expiry-input {
	color: var(--color-text);
	background-color: var(--color-bg-elevated);
}

.doc-lightbox-overlay {
	background: rgba(0, 0, 0, 0.8);
	z-index: var(--z-modal);
}

.doc-lightbox-inner {
	max-width: 90vw;
	max-height: 90vh;
}

.doc-lightbox-image {
	max-width: 85vw;
	max-height: 85vh;
	object-fit: contain;
}

/* ── Avatar circle ─────────────────────────────────────────────────── */
.avatar-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.avatar-circle-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

/* ── CheckInPage shift card status borders ─────────────────────────── */
.shift-card-checked-out {
	border-left: 4px solid var(--color-info) !important;
}

.shift-card-checked-in {
	border-left: 4px solid var(--color-success) !important;
}

.shift-card-pre-checked-in {
	border-left: 4px solid var(--color-warning) !important;
}

.shift-card-upcoming {
	border-left: 4px solid var(--color-primary) !important;
}

/* ── CheckInPage w3w icon / monospace link ─────────────────────────── */
.link-w3w {
	font-family: monospace;
	text-decoration: none;
}

/* ── w3w icon ──────────────────────────────────────────────────────── */
.icon-w3w {
	color: var(--color-w3w);
}

.input-group-w3w {
	background-color: var(--color-bg-subtle);
	color: var(--color-text-muted);
}

.alert-info-w3w {
	background-color: rgba(84, 128, 192, 0.1);
	color: var(--color-primary);
	border-color: rgba(84, 128, 192, 0.3);
}


/* ── Badge variants ────────────────────────────────────────────────── */
.badge-awaiting-confirmation {
	background-color: var(--color-badge-awaiting);
	color: white;
}

/* ── Tag group heading ─────────────────────────────────────────────── */
.tag-group-heading {
	font-weight: bold;
	font-size: 1.1rem;
}

/* ── Search/filter inputs with max-width constraints ───────────────── */
.input-search-employee {
	max-width: 320px;
}

.input-search-event {
	max-width: 280px;
}

.input-date-filter {
	max-width: 170px;
}

.select-office-filter {
	max-width: 220px;
}

.select-office-filter-sm {
	min-width: 220px;
}

.input-search-employee-events {
	max-width: 300px;
}

.select-events-office {
	min-width: 220px;
}

.select-manager-office {
	min-width: 220px;
}

/* ── Spin utility ──────────────────────────────────────────────────── */
.spin {
	animation: spin 1s linear infinite;
}

@keyframes pulse-opacity {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ── Subtle badges on dark ─────────────────────────────────────────
   Bootstrap's -subtle pairs are built for a light page: a near-white
   fill with mid-tone text. On our dark surfaces they read as invisible.
   Rebuilt here as a translucent tint of the same hue with light text. */
.badge.bg-primary-subtle,
.badge.bg-success-subtle,
.badge.bg-warning-subtle,
.badge.bg-danger-subtle,
.badge.bg-info-subtle,
.badge.bg-secondary-subtle {
	border: 1px solid transparent;
	font-weight: 600;
}

.badge.bg-primary-subtle {
	background-color: rgba(var(--color-primary-rgb), 0.22) !important;
	border-color: rgba(var(--color-primary-rgb), 0.45);
}

.badge.bg-success-subtle {
	background-color: rgba(var(--color-success-rgb), 0.22) !important;
	border-color: rgba(var(--color-success-rgb), 0.45);
}

.badge.bg-warning-subtle {
	background-color: rgba(var(--color-warning-rgb), 0.20) !important;
	border-color: rgba(var(--color-warning-rgb), 0.45);
}

.badge.bg-danger-subtle {
	background-color: rgba(var(--color-danger-rgb), 0.22) !important;
	border-color: rgba(var(--color-danger-rgb), 0.45);
}

.badge.bg-info-subtle {
	background-color: rgba(var(--color-info-rgb), 0.22) !important;
	border-color: rgba(var(--color-info-rgb), 0.45);
}

.badge.bg-secondary-subtle {
	background-color: rgba(255, 255, 255, 0.10) !important;
	border-color: rgba(255, 255, 255, 0.22);
}

.badge.text-primary { color: #a8c4ea !important; }
.badge.text-success { color: #9fd4bb !important; }
.badge.text-warning { color: #f4e949 !important; }
.badge.text-danger  { color: #eda096 !important; }
.badge.text-info    { color: #a8c4ea !important; }
.badge.text-secondary { color: var(--color-text) !important; }

/* ── Event calendar ────────────────────────────────────────────────
   Event chips previously used the office brand colour as a full
   saturated fill. Six of those in a month grid is visually loud and
   makes the day numbers hard to find. The accent now sits in a left
   border over a muted surface: the office is still identifiable, but
   the grid reads calmly and the text keeps full contrast. */
.calendar-cell {
	height: 8rem;
	vertical-align: top;
	padding: var(--space-1);
	background-color: var(--color-bg-elevated);
}

.calendar-cell-empty {
	background-color: rgba(0, 0, 0, 0.15);
}

.calendar-daynum {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
	padding: 0 var(--space-1);
}

.calendar-daynum-today {
	color: var(--color-on-primary);
	background-color: var(--color-primary);
	border-radius: var(--radius-sm);
	display: inline-block;
	min-width: 1.4rem;
	text-align: center;
}

.calendar-event {
	display: block;
	font-size: 0.75rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	color: var(--color-text);
	background-color: var(--color-surface-dark);
	border-left: 3px solid var(--event-accent, var(--color-primary));
	border-radius: var(--radius-sm);
	padding: 2px var(--space-2);
	margin-bottom: 3px;
	transition: background-color 0.12s ease-in-out;
}

.calendar-event:hover {
	background-color: var(--color-bg-subtle);
	color: var(--color-text);
}

/* ── Reports tab bar ───────────────────────────────────────────────
   Day End, Operational, Payroll and Job Costing are four views of the
   same reporting area. They used to link to each other with plain
   buttons, which read as leaving the page. A tab bar makes them one
   place with four views. */
.reports-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 0;
}

.reports-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	color: var(--color-text-muted);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	border-top-left-radius: var(--radius-md);
	border-top-right-radius: var(--radius-md);
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.reports-tab:hover {
	color: var(--color-text);
	background-color: var(--color-bg-elevated);
}

.reports-tab.active {
	color: var(--color-text);
	background-color: var(--color-bg-elevated);
	border-color: var(--color-border);
	border-bottom: 2px solid var(--color-primary);
	margin-bottom: -1px;
}

@media (max-width: 575.98px) {
	.reports-tab span {
		display: none;
	}

	.reports-tab {
		padding: var(--space-2) var(--space-3);
	}
}

/* ── Skeleton loaders ──────────────────────────────────────────────
   A spinner says "something is happening"; a skeleton says "a table is
   coming and here is roughly its shape". Used where the layout is known
   before the data lands, which is every list and table page. */
.skeleton {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-subtle);
	border-radius: var(--radius-sm);
}

.skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.06),
		transparent);
	animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
	100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.skeleton::after {
		animation: none;
	}
}

.skeleton-line {
	height: 0.85rem;
	margin-bottom: var(--space-2);
}

.skeleton-line:last-child {
	margin-bottom: 0;
}

.skeleton-line-sm { width: 35%; }
.skeleton-line-md { width: 60%; }
.skeleton-line-lg { width: 85%; }

.skeleton-table th,
.skeleton-table td {
	padding: var(--space-3) var(--space-4);
}

.skeleton-cell {
	height: 0.85rem;
	width: 80%;
}

.skeleton-card {
	height: 6rem;
}