:root {
	--chss-bg: #f5f7fb;
	--chss-surface: #ffffff;
	--chss-text: #132033;
	--chss-muted: #68758a;
	--chss-border: #e1e7f0;
	--chss-primary: #2563eb;
	--chss-primary-2: #7c3aed;
	--chss-accent: #06b6d4;
	--chss-success: #16a34a;
	--chss-warning: #f59e0b;
	--chss-danger: #dc2626;
	--chss-radius: 22px;
	--chss-shadow: 0 20px 55px rgba(20, 35, 70, 0.11);
}

/* v0.21.22 - dedicated mobile settings workspace */
.chss-mobile-settings {
	display: none;
}

@media (max-width: 480px) {
	.chss-app .chss-mobile-settings {
		display: flex;
		flex-direction: column;
		gap: 11px;
		margin: -2px -8px 0;
		padding: 0 12px 22px;
		background: #f4f8ff;
		color: #07183d;
	}

	.chss-mobile-settings-header {
		position: relative;
		overflow: hidden;
		margin: 0 -12px 2px;
		padding: 18px 16px 16px;
		border-radius: 0 0 24px 24px;
		background: linear-gradient(160deg, #0b2a63 0%, #0d387f 62%, #11459b 100%);
		color: #fff;
		box-shadow: 0 10px 28px rgba(7, 27, 68, .18);
	}

	.chss-mobile-settings-header::after {
		content: "";
		position: absolute;
		right: -32px;
		top: -32px;
		width: 108px;
		height: 108px;
		border-radius: 999px;
		background: rgba(255, 255, 255, .08);
	}

	.chss-mobile-settings-header h1 {
		margin: 0;
		color: #fff;
		font-size: 26px;
		font-weight: 900;
		letter-spacing: -.6px;
	}

	.chss-mobile-settings-header > p {
		margin: 4px 0 14px;
		color: rgba(255, 255, 255, .78);
		font-size: 13px;
	}

	.chss-mobile-settings-summary {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		position: relative;
		z-index: 1;
	}

	.chss-mobile-settings-summary > span {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		grid-template-areas:
			"icon label"
			"value value";
		column-gap: 10px;
		row-gap: 8px;
		align-items: center;
		min-width: 0;
		padding: 12px;
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 16px;
		background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.10) 100%);
		backdrop-filter: blur(4px);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	}

	.chss-mobile-settings-summary > span.is-access {
		grid-column: 1 / -1;
	}

	.chss-mobile-settings-summary i {
		grid-area: icon;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border-radius: 999px;
		font-style: normal;
		font-size: 14px;
		line-height: 1;
		color: #11459b;
		background: rgba(255, 255, 255, .96);
	}

	.chss-mobile-settings-summary em,
	.chss-mobile-settings-summary b {
		display: block;
		min-width: 0;
		margin: 0;
		font-style: normal;
	}

	.chss-mobile-settings-summary em {
		grid-area: label;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .78);
	}

	.chss-mobile-settings-summary b {
		grid-area: value;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 16px;
		line-height: 1.2;
		font-weight: 900;
		color: #fff;
	}

	.chss-mobile-settings-form {
		display: contents;
	}

	.chss-app .chss-mobile-settings-card {
		margin: 0;
		border: 1px solid #dbe5f3;
		border-radius: 17px;
		background: #fff;
		box-shadow: 0 5px 16px rgba(25, 56, 99, .06);
		overflow: hidden;
	}

	.chss-mobile-settings-card > summary {
		display: grid;
		grid-template-columns: 43px minmax(0, 1fr) 20px;
		gap: 11px;
		align-items: center;
		min-height: 70px;
		padding: 12px 13px;
		cursor: pointer;
		list-style: none;
	}

	.chss-mobile-settings-card > summary::-webkit-details-marker,
	.chss-mobile-settings-create-template > summary::-webkit-details-marker,
	.chss-mobile-template-card > summary::-webkit-details-marker {
		display: none;
	}

	.chss-mobile-settings-card > summary > span:nth-child(2) {
		min-width: 0;
	}

	.chss-mobile-settings-card > summary strong,
	.chss-mobile-settings-card > summary small {
		display: block;
	}

	.chss-mobile-settings-card > summary strong {
		color: #07183d;
		font-size: 15px;
		font-weight: 900;
	}

	.chss-mobile-settings-card > summary small {
		margin-top: 3px;
		color: #74829b;
		font-size: 11px;
		line-height: 1.35;
	}

	.chss-mobile-settings-card > summary > i {
		position: relative;
		width: 18px;
		height: 18px;
	}

	.chss-mobile-settings-card > summary > i::before,
	.chss-mobile-settings-card > summary > i::after {
		content: '';
		position: absolute;
		top: 8px;
		width: 8px;
		height: 2px;
		border-radius: 2px;
		background: #8491a6;
		transition: transform .2s ease;
	}

	.chss-mobile-settings-card > summary > i::before {
		left: 2px;
		transform: rotate(45deg);
	}

	.chss-mobile-settings-card > summary > i::after {
		right: 2px;
		transform: rotate(-45deg);
	}

	.chss-mobile-settings-card[open] > summary > i::before {
		transform: rotate(-45deg);
	}

	.chss-mobile-settings-card[open] > summary > i::after {
		transform: rotate(45deg);
	}

	.chss-mobile-settings-icon {
		display: grid;
		place-items: center;
		width: 43px;
		height: 43px;
		border-radius: 13px;
		font-style: normal;
		font-size: 19px;
		font-weight: 900;
		background: #e8f2ff;
		color: #1b61c9;
	}

	.chss-mobile-settings-icon.is-rules,
	.chss-mobile-settings-icon.is-positions {
		background: #e8faf5;
		color: #087c65;
	}

	.chss-mobile-settings-icon.is-email,
	.chss-mobile-settings-icon.is-diagnostics {
		background: #fff3df;
		color: #b76800;
	}

	.chss-mobile-settings-icon.is-templates {
		background: #f1ebff;
		color: #7044bd;
	}

	.chss-mobile-settings-body {
		display: grid;
		gap: 12px;
		padding: 14px;
		border-top: 1px solid #e6edf6;
		background: #fbfdff;
	}

	.chss-mobile-settings-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.chss-mobile-settings-body label,
	.chss-mobile-settings-create-template label,
	.chss-mobile-template-card label,
	.chss-mobile-test-email label {
		display: grid;
		gap: 6px;
		margin: 0;
		color: #465570;
		font-size: 12px;
		font-weight: 800;
	}

	.chss-mobile-settings-body label > small {
		font-size: 10px;
		font-weight: 500;
		line-height: 1.4;
		color: #7b879b;
	}

	.chss-app .chss-mobile-settings input,
	.chss-app .chss-mobile-settings select,
	.chss-app .chss-mobile-settings textarea {
		box-sizing: border-box;
		width: 100%;
		min-height: 44px;
		padding: 9px 11px;
		border: 1px solid #ced9e9;
		border-radius: 11px;
		background: #fff;
		color: #07183d;
		font-size: 14px;
		box-shadow: none;
	}

	.chss-mobile-settings-period {
		padding: 12px;
		border-radius: 13px;
		background: #fff8eb;
	}

	.chss-mobile-settings-period.is-night {
		background: #eef3ff;
	}

	.chss-mobile-settings-period > strong {
		display: block;
		margin-bottom: 9px;
		font-size: 13px;
	}

	.chss-mobile-settings-period > div {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 7px;
	}

	.chss-app .chss-mobile-settings-period input {
		min-width: 0;
		padding-inline: 6px;
		font-size: 12px;
	}

	.chss-mobile-settings-save,
	.chss-mobile-settings-secondary,
	.chss-mobile-test-email button {
		min-height: 48px;
		padding: 11px 16px;
		border: 0;
		border-radius: 13px;
		background: #0c2d66;
		color: #fff;
		font-size: 14px;
		font-weight: 900;
		box-shadow: 0 5px 12px rgba(12, 45, 102, .16);
	}

	.chss-mobile-settings-readonly {
		padding: 13px 14px;
		border: 1px solid #f0dcb6;
		border-radius: 14px;
		background: #fff8e8;
		color: #76521b;
		font-size: 12px;
		line-height: 1.5;
	}

	.chss-mobile-settings-pills {
		display: flex;
		flex-wrap: wrap;
		gap: 7px;
	}

	.chss-mobile-settings-pills span {
		padding: 7px 10px;
		border: 1px solid #cdebe1;
		border-radius: 999px;
		background: #effbf7;
		color: #08715d;
		font-size: 11px;
		font-weight: 800;
	}

	.chss-mobile-settings-create-template {
		border: 1px solid #d6e3f3;
		border-radius: 13px;
		background: #fff;
		overflow: hidden;
	}

	.chss-mobile-settings-create-template > summary {
		padding: 12px;
		cursor: pointer;
		list-style: none;
		color: #0c2d66;
		font-size: 13px;
		font-weight: 900;
	}

	.chss-mobile-settings-create-template .chss-form-grid,
	.chss-mobile-template-card .chss-form-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 12px;
		border-top: 1px solid #e4ebf5;
	}

	.chss-mobile-settings-create-template .chss-mobile-settings-save,
	.chss-mobile-template-card .chss-mobile-settings-save {
		grid-column: 1 / -1;
	}

	.chss-mobile-template-list {
		display: grid;
		gap: 8px;
	}

	.chss-mobile-template-card {
		border: 1px solid #dde6f2;
		border-radius: 13px;
		background: #fff;
		overflow: hidden;
	}

	.chss-mobile-template-card > summary {
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: space-between;
		padding: 12px;
		cursor: pointer;
		list-style: none;
	}

	.chss-mobile-template-card > summary span {
		min-width: 0;
	}

	.chss-mobile-template-card > summary strong,
	.chss-mobile-template-card > summary small {
		display: block;
	}

	.chss-mobile-template-card > summary strong {
		font-size: 13px;
		color: #07183d;
	}

	.chss-mobile-template-card > summary small {
		margin-top: 3px;
		color: #74829b;
		font-size: 10px;
		line-height: 1.4;
	}

	.chss-mobile-template-card > summary b,
	.chss-mobile-email-log-list article > b {
		flex: 0 0 auto;
		padding: 5px 7px;
		border-radius: 999px;
		background: #e8f8f1;
		color: #08745e;
		font-size: 9px;
	}

	.chss-mobile-template-card > summary b.is-off,
	.chss-mobile-email-log-list article > b.is-failed {
		background: #fff0f0;
		color: #b23c46;
	}

	.chss-mobile-template-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 0 12px 12px;
	}

	.chss-mobile-template-actions form,
	.chss-mobile-template-actions button {
		width: 100%;
	}

	.chss-mobile-template-actions button {
		min-height: 41px;
		border: 1px solid #cad7e8;
		border-radius: 10px;
		background: #f5f8fc;
		color: #324562;
		font-size: 11px;
		font-weight: 900;
	}

	.chss-mobile-template-actions button.is-danger {
		border-color: #f0c8cc;
		background: #fff3f4;
		color: #b23c46;
	}

	.chss-mobile-test-email {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
		align-items: end;
	}

	.chss-mobile-test-email button {
		min-height: 44px;
		padding-inline: 12px;
		font-size: 12px;
	}

	.chss-mobile-email-log-list {
		display: grid;
		gap: 7px;
	}

	.chss-mobile-email-log-list article {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border: 1px solid #e0e8f3;
		border-radius: 11px;
		background: #fff;
	}

	.chss-mobile-email-log-list article > span {
		min-width: 0;
	}

	.chss-mobile-email-log-list article strong,
	.chss-mobile-email-log-list article small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-mobile-email-log-list article strong {
		font-size: 11px;
		color: #07183d;
	}

	.chss-mobile-email-log-list article small {
		margin-top: 2px;
		font-size: 9px;
		color: #7a879a;
	}

	.chss-mobile-email-log-list article p {
		flex-basis: 100%;
		margin: 0;
		font-size: 10px;
		color: #b23c46;
	}

	.chss-mobile-settings-empty {
		margin: 0;
		padding: 12px;
		border-radius: 11px;
		background: #f3f6fa;
		color: #6e7d92;
		font-size: 12px;
		text-align: center;
	}
}

@media (max-width: 390px) {
	.chss-mobile-settings-summary > span {
		grid-template-columns: 23px minmax(0, 1fr);
		padding-inline: 6px;
	}

	.chss-mobile-settings-summary i {
		font-size: 15px;
	}

	.chss-mobile-settings-summary b {
		font-size: 10px;
	}

	.chss-mobile-settings-summary small {
		font-size: 8px;
	}

	.chss-mobile-settings-period > div {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.chss-mobile-settings-period > div label:last-child {
		grid-column: 1 / -1;
	}
}

/* v0.21.24 — functional quick shift form inside the approved mobile sheet. */
@media (max-width: 480px) {
  .chss-mobile-picker-sheet {
    max-height: min(88vh, 760px);
    overflow-y: auto;
  }

  .chss-mobile-picker-list[hidden],
  .chss-mobile-quick-shift-fields[hidden] {
    display: none !important;
  }

  .chss-mobile-quick-shift-fields {
    display: grid;
    gap: 12px;
  }

  .chss-mobile-quick-shift-fields > label,
  .chss-mobile-quick-shift-times label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 850;
  }

  .chss-app .chss-mobile-quick-shift-fields input,
  .chss-app .chss-mobile-quick-shift-fields select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    background: #fff;
    color: #0f172a;
    font: inherit;
  }

  .chss-mobile-quick-shift-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .chss-mobile-quick-shift-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    border-radius: 13px;
    background: #eafaf6;
    color: #0f6f70;
    font-size: 13px;
  }

  .chss-mobile-quick-shift-selected button {
    border: 0;
    background: transparent;
    color: #0f766e;
    font-weight: 900;
    text-decoration: underline;
    cursor: pointer;
  }

  .chss-mobile-quick-shift-submit {
    min-height: 52px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(100deg, #57d5bd 0%, #19bdb5 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
  }
}



.chss-app {
	width: 100%;
	min-height: 78vh;
	padding: 28px;
	background:
		radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.16), transparent 32%),
		radial-gradient(circle at 95% 10%, rgba(124, 58, 237, 0.15), transparent 30%),
		linear-gradient(180deg, #f8fbff 0%, var(--chss-bg) 100%);
	color: var(--chss-text);
	font-family: inherit;
}

.chss-dashboard { width: min(100%, 1320px); margin: 0 auto; }
.chss-dashboard-modern { display: grid; gap: 18px; }

.chss-hero,
.chss-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 30px;
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 52%, #7c3aed 100%);
	color: #fff;
	box-shadow: var(--chss-shadow);
	overflow: hidden;
	position: relative;
}

.chss-employee-hero { background: linear-gradient(135deg, #0f766e 0%, #0891b2 55%, #2563eb 100%); }
.chss-hero .chss-muted,
.chss-topbar .chss-muted,
.chss-hero .chss-eyebrow,
.chss-topbar .chss-eyebrow { color: rgba(255,255,255,.82); }

.chss-hero h1,
.chss-topbar h1,
.chss-app h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.04em; }
.chss-app h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.chss-app h3 { margin: 8px 0; font-size: 20px; }

.chss-eyebrow { margin: 0 0 8px; color: var(--chss-muted); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.chss-muted { margin: 10px 0 0; color: var(--chss-muted); line-height: 1.65; }

.chss-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 8px; border: 1px solid var(--chss-border); border-radius: 20px; background: rgba(255,255,255,.74); box-shadow: 0 12px 35px rgba(20, 35, 70, .07); backdrop-filter: blur(10px); }
.chss-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 16px; border-radius: 15px; color: var(--chss-muted); font-weight: 900; text-decoration: none; white-space: nowrap; transition: all .16s ease; }
.chss-tab:hover { background: #f1f5ff; color: var(--chss-primary); }
.chss-tab.is-active { background: linear-gradient(135deg, var(--chss-primary), var(--chss-primary-2)); color: #fff; box-shadow: 0 12px 28px rgba(37, 99, 235, .28); }

.chss-auth-shell { display: grid; min-height: calc(70vh - 64px); place-items: center; }
.chss-auth-card,
.chss-panel,
.chss-summary-card,
.chss-empty-state { border: 1px solid var(--chss-border); border-radius: var(--chss-radius); background: rgba(255,255,255,.96); box-shadow: var(--chss-shadow); }
.chss-auth-card { width: min(100%, 480px); padding: 38px; }
.chss-auth-card-wide { width: min(100%, 820px); }

.chss-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.chss-summary-card { padding: 22px; position: relative; overflow: hidden; }
.chss-summary-card:before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--chss-primary), var(--chss-accent)); }
.chss-summary-card span { display: block; margin-bottom: 8px; color: var(--chss-muted); font-size: 13px; font-weight: 800; }
.chss-summary-card strong { display: block; overflow-wrap: anywhere; font-size: 20px; }

.chss-panel { padding: 26px; }
.chss-panel-featured { border-color: rgba(37,99,235,.24); }
.chss-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--chss-border); }

.chss-grid-2 { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.chss-row-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

.chss-form,
.chss-form-grid { margin-top: 22px; }
.chss-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.chss-form-grid-single { grid-template-columns: 1fr; }
.chss-full { grid-column: 1 / -1; }
.chss-form label,
.chss-form-grid label { display: grid; gap: 7px; margin-bottom: 0; color: var(--chss-muted); font-size: 13px; font-weight: 900; }
.chss-form input,
.chss-form-grid input,
.chss-form-grid select,
.chss-form-grid textarea { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--chss-border); border-radius: 14px; background: #fff; color: var(--chss-text); font: inherit; outline: none; transition: box-shadow .15s ease, border-color .15s ease; }
.chss-form-grid textarea { resize: vertical; }
.chss-form input:focus,
.chss-form-grid input:focus,
.chss-form-grid select:focus,
.chss-form-grid textarea:focus { border-color: var(--chss-primary); box-shadow: 0 0 0 4px rgba(37,99,235,.11); }
.chss-form-actions { grid-column: 1 / -1; }

.chss-button,
.chss-small-button,
.chss-small-link { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--chss-primary), var(--chss-primary-2)); color: #fff; font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; box-shadow: 0 12px 28px rgba(37,99,235,.22); transition: transform .15s ease, box-shadow .15s ease; }
.chss-button { min-height: 46px; padding: 11px 18px; }
.chss-small-button,
.chss-small-link { min-height: 36px; padding: 8px 12px; font-size: 13px; }
.chss-button:hover,
.chss-small-button:hover,
.chss-small-link:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 34px rgba(37,99,235,.28); }
.chss-button-secondary,
.chss-button-light,
.chss-small-link { background: #fff; color: var(--chss-text); border: 1px solid var(--chss-border); box-shadow: none; }
.chss-button-light { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.34); }
.chss-button-secondary:hover,
.chss-small-link:hover { background: #f8fbff; color: var(--chss-primary); }
.chss-small-button-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 12px 28px rgba(220,38,38,.2); }

.chss-status-badge,
.chss-pill { display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.chss-status-badge,
.chss-pill-active,
.chss-pill-published { background: #dcfce7; color: #166534; }
.chss-pill-inactive,
.chss-pill-cancelled { background: #fee2e2; color: #991b1b; }
.chss-pill-draft { background: #ede9fe; color: #5b21b6; }
.chss-pill-timeoff { background: #cffafe; color: #0e7490; }

.chss-week-tools { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid #dbeafe; border-radius: 18px; background: linear-gradient(135deg, #eff6ff, #f5f3ff); }
.chss-week-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chss-week-actions form { margin: 0; }
.chss-week-wrap,
.chss-table-wrap { width: 100%; overflow-x: auto; margin-top: 22px; }
.chss-week-table { min-width: 980px; width: 100%; border-collapse: separate; border-spacing: 0; }
.chss-week-table th,
.chss-week-table td { min-width: 120px; padding: 12px; border-right: 1px solid var(--chss-border); border-bottom: 1px solid var(--chss-border); text-align: left; vertical-align: top; background: #fff; }
.chss-week-table thead th { position: sticky; top: 0; background: #f1f5ff; color: var(--chss-text); font-size: 13px; z-index: 1; }
.chss-week-table th:first-child,
.chss-week-table td:first-child { border-left: 1px solid var(--chss-border); }
.chss-week-table thead th { border-top: 1px solid var(--chss-border); }
.chss-week-table thead th:first-child { border-top-left-radius: 16px; }
.chss-week-table thead th:last-child { border-top-right-radius: 16px; }
.chss-week-table thead span,
.chss-week-employee span { color: var(--chss-muted); font-size: 12px; font-weight: 700; }
.chss-week-employee { min-width: 180px !important; background: #f8fafc !important; }
.chss-off { display: inline-flex; color: #9aa4af; font-size: 13px; font-weight: 800; }
.chss-week-shift { display: grid; gap: 4px; margin-bottom: 8px; padding: 9px; border-radius: 12px; border: 1px solid var(--chss-border); background: #fff; font-size: 12px; }
.chss-week-shift strong { font-size: 13px; }
.chss-week-shift span { color: var(--chss-text); }
.chss-week-shift em { color: var(--chss-muted); font-style: normal; font-weight: 900; }
.chss-week-shift-published { border-color: #86efac; background: #f0fdf4; }
.chss-week-shift-draft { border-color: #c4b5fd; background: #f5f3ff; }
.chss-week-shift-cancelled { border-color: #fecaca; background: #fff1f2; }
.chss-week-shift-timeoff { border-color: #67e8f9; background: #ecfeff; }

.chss-table { width: 100%; border-collapse: collapse; }
.chss-table th,
.chss-table td { padding: 13px 12px; border-bottom: 1px solid var(--chss-border); text-align: left; vertical-align: middle; }
.chss-table th { color: var(--chss-muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }

.chss-shift-edit-list { display: grid; gap: 12px; margin-top: 22px; }
.chss-edit-card { border: 1px solid var(--chss-border); border-radius: 18px; background: #fff; overflow: hidden; }
.chss-edit-card summary { display: grid; grid-template-columns: 1.4fr 1.2fr auto; gap: 12px; align-items: center; padding: 16px; cursor: pointer; }
.chss-edit-card summary span { color: var(--chss-muted); font-size: 13px; font-weight: 800; }
.chss-edit-card[open] summary { border-bottom: 1px solid var(--chss-border); background: #f8fbff; }
.chss-edit-card .chss-form-grid { padding: 18px; margin-top: 0; }
.chss-edit-actions { padding: 0 18px 18px; }

.chss-shift-cards { display: grid; gap: 14px; margin-top: 22px; }
.chss-shift-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--chss-border); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(20,35,70,.06); }
.chss-shift-card-timeoff { background: linear-gradient(135deg, #ecfeff, #fff); }
.chss-shift-card p { margin: 6px 0 0; color: var(--chss-muted); }
.chss-shift-date { color: var(--chss-primary); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.chss-empty-state { text-align: center; padding: 52px 24px; }
.chss-empty-state-compact { box-shadow: none; margin-top: 22px; padding-block: 38px; }
.chss-empty-icon { font-size: 44px; margin-bottom: 18px; }

.chss-notice { width: min(100%, 1320px); margin: 0 auto 16px; padding: 14px 16px; border-radius: 16px; font-weight: 900; }
.chss-notice-success { background: #dcfce7; color: #166534; }
.chss-notice-error { background: #fee2e2; color: #991b1b; }

@media (max-width: 480px) {
	.chss-app { padding: 16px; }
	.chss-hero,
	.chss-topbar,
	.chss-panel-header { flex-direction: column; }
	.chss-summary-grid,
	.chss-grid-2,
	.chss-form-grid { grid-template-columns: 1fr; }
	.chss-edit-card summary { grid-template-columns: 1fr; }
	.chss-button,
	.chss-small-link { width: auto; }
}

@media (max-width: 480px) {
	.chss-app { padding: 10px; }
	.chss-hero,
	.chss-panel,
	.chss-auth-card { padding: 20px; border-radius: 20px; }
	.chss-tabs { border-radius: 16px; }
	.chss-tab { min-height: 42px; padding: 9px 12px; }
	.chss-summary-grid { gap: 10px; }
}


/* v0.8.0 Staff cards */
.chss-subpanel {
	margin: 18px 0;
	padding: 18px;
	border: 1px solid rgba(20, 34, 48, .08);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,251,.92));
}

.chss-subpanel h3 {
	margin: 0 0 14px;
	font-size: 18px;
	color: #17212b;
}

.chss-user-card-list {
	display: grid;
	gap: 14px;
	margin-top: 18px;
}

.chss-user-card {
	border: 1px solid rgba(20, 34, 48, .10);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
	padding: 18px;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.chss-user-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 38px rgba(15, 23, 42, .10);
	border-color: rgba(36, 99, 235, .22);
}

.chss-user-card-main {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: flex-start;
}

.chss-user-card-main strong {
	display: block;
	font-size: 17px;
	color: #102033;
}

.chss-user-card-main span {
	display: block;
	margin-top: 4px;
	color: #667085;
	font-size: 13px;
}

.chss-user-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: flex-end;
}

.chss-user-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0;
	color: #667085;
	font-size: 13px;
}

.chss-user-card-meta span {
	padding: 7px 10px;
	border-radius: 999px;
	background: #f4f7fb;
}

.chss-user-edit-box {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed rgba(20, 34, 48, .16);
}

.chss-password-reset-form {
	margin-top: 16px;
	padding: 16px;
	border-radius: 16px;
	background: #fff8ed;
	border: 1px solid #fed7aa;
}

.chss-password-reset-form .chss-button {
	background: #9a3412;
}

.chss-password-reset-form .chss-button:hover {
	background: #7c2d12;
}

.chss-pill-inactive {
	background: #f3f4f6;
	color: #4b5563;
}

.chss-pill-active {
	background: #dcfce7;
	color: #166534;
}

@media (max-width: 480px) {
	.chss-user-card-main {
		display: grid;
	}

	.chss-user-card-badges {
		justify-content: flex-start;
	}
}


/* v0.9.0 Employee requests */
.chss-request-list {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.chss-request-card {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
	padding: 16px;
	border: 1px solid rgba(20, 34, 48, .10);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.chss-request-card strong {
	display: block;
	color: #17212b;
	font-size: 15px;
}

.chss-request-card span {
	display: block;
	margin-top: 4px;
	color: #667085;
	font-size: 13px;
}

.chss-request-card p {
	margin: 8px 0 0;
	color: #425466;
}

.chss-request-actions {
	display: grid;
	gap: 10px;
	min-width: 260px;
}

.chss-request-actions form {
	display: grid;
	gap: 8px;
	margin: 0;
}

.chss-request-actions textarea {
	width: 100%;
	border: 1px solid #dde3e8;
	border-radius: 12px;
	padding: 10px;
	font: inherit;
	resize: vertical;
}

.chss-pill-request-pending {
	background: #fef3c7;
	color: #92400e;
}

.chss-pill-request-approved {
	background: #dcfce7;
	color: #166534;
}

.chss-pill-request-rejected {
	background: #fee2e2;
	color: #991b1b;
}

.chss-request-card-pending {
	border-color: rgba(245, 158, 11, .28);
}

.chss-request-card-approved {
	border-color: rgba(34, 197, 94, .22);
}

.chss-request-card-rejected {
	border-color: rgba(239, 68, 68, .22);
}

@media (max-width: 480px) {
	.chss-request-card {
		display: grid;
	}

	.chss-request-actions {
		min-width: 0;
	}
}


/* v0.10.0 email notifications */
.chss-email-note {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	padding: 8px 11px;
	border-radius: 999px;
	background: #eef6ff;
	color: #1d4ed8;
	font-size: 12px;
	font-weight: 800;
}


/* v0.10.1 email diagnostics */
.chss-pill-email-success {
	background: #dcfce7;
	color: #166534;
}

.chss-pill-email-failed {
	background: #fee2e2;
	color: #991b1b;
}

.chss-email-log-table td {
	vertical-align: top;
	font-size: 12px;
}

.chss-email-log-table td:nth-child(2),
.chss-email-log-table td:nth-child(3),
.chss-email-log-table td:nth-child(6) {
	max-width: 260px;
	word-break: break-word;
}


/* =========================================================
   v0.11.0 - Mobile First Responsive UI
   ========================================================= */

.chss-app,
.chss-app * { box-sizing: border-box; }

.chss-app {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.chss-app input,
.chss-app select,
.chss-app textarea,
.chss-app button { max-width: 100%; }

.chss-dashboard-modern,
.chss-dashboard { width: 100%; max-width: 1180px; margin-inline: auto; }

.chss-hero,
.chss-topbar { position: relative; overflow: hidden; }

.chss-tabs {
	width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}

.chss-tab { scroll-snap-align: center; white-space: nowrap; }

.chss-table-wrap,
.chss-week-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }

.chss-table-wrap[data-chss-scrollable="true"]::after,
.chss-week-wrap[data-chss-scrollable="true"]::after {
	content: "Σύρε δεξιά →"; position: sticky; left: 10px; bottom: 8px; display: inline-flex;
	margin: 8px 0 0 8px; padding: 6px 10px; border-radius: 999px;
	background: rgba(15, 23, 42, .78); color: #fff; font-size: 11px; font-weight: 800; pointer-events: none;
}

.chss-form-grid { align-items: start; }
.chss-row-actions, .chss-form-actions, .chss-week-actions { flex-wrap: wrap; }
.chss-button, .chss-small-button, .chss-small-link { min-height: 42px; touch-action: manipulation; }
.chss-pill { line-height: 1.2; }

@media (max-width: 480px) {
	.chss-app {
		padding: 16px;
		background: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .13), transparent 34%), linear-gradient(180deg, #f7f9ff 0%, #eef2ff 100%);
	}

	.chss-dashboard-modern, .chss-dashboard { display: grid; gap: 14px; }

	.chss-hero, .chss-topbar { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 22px; border-radius: 22px; }
	.chss-hero h1, .chss-topbar h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.05; margin-bottom: 8px; }
	.chss-hero .chss-muted, .chss-topbar .chss-muted { font-size: 14px; line-height: 1.55; }
	.chss-hero form, .chss-topbar form { justify-self: start; }

	.chss-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.chss-panel { border-radius: 22px; padding: 18px; }
	.chss-panel-header { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
	.chss-form-grid { grid-template-columns: 1fr; gap: 12px; }
	.chss-week-tools { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
	.chss-inline-form { display: grid; grid-template-columns: 1fr; width: 100%; }
	.chss-inline-form label, .chss-inline-form select, .chss-inline-form input { width: 100%; }
	.chss-week-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
	.chss-week-actions form, .chss-week-actions button { width: 100%; }
	.chss-user-card-main, .chss-request-card, .chss-shift-card { display: grid; grid-template-columns: 1fr; gap: 12px; }
	.chss-user-card-badges { justify-content: start; }
	.chss-request-actions { min-width: 0; width: 100%; }
}

@media (max-width: 480px) {
	.chss-app {
		padding: 10px !important;
		margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
		width: 100vw; max-width: 100vw; border-radius: 0;
	}

	.chss-dashboard, .chss-dashboard-modern { gap: 12px; }
	.chss-hero, .chss-topbar { padding: 18px; border-radius: 18px; min-height: auto; }
	.chss-eyebrow { font-size: 11px; letter-spacing: .08em; }
	.chss-hero h1, .chss-topbar h1 { font-size: 26px; line-height: 1.08; margin: 4px 0 8px; }
	.chss-hero .chss-muted, .chss-topbar .chss-muted { font-size: 13px; line-height: 1.5; }
	.chss-hero .chss-button, .chss-topbar .chss-button { width: auto; min-width: 132px; padding: 11px 16px; }

	.chss-tabs {
		position: sticky; top: 0; z-index: 30; display: flex; gap: 8px;
		margin: 0 -2px; padding: 8px 2px 10px; border-radius: 16px;
		background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
	}
	.admin-bar .chss-tabs { top: 46px; }
	.chss-tab { flex: 0 0 auto; min-height: 42px; padding: 10px 13px; border-radius: 999px; font-size: 13px; font-weight: 900; max-width: none; }
	.chss-tab.is-active { box-shadow: 0 8px 18px rgba(79, 70, 229, .24); }

	.chss-summary-grid { grid-template-columns: 1fr; gap: 10px; }
	.chss-summary-card { padding: 16px; border-radius: 18px; }
	.chss-summary-card strong { font-size: 22px; }
	.chss-panel { padding: 15px; border-radius: 18px; box-shadow: 0 12px 34px rgba(15, 23, 42, .08); }
	.chss-panel h2 { font-size: 20px; line-height: 1.2; }
	.chss-panel h3 { font-size: 17px; }
	.chss-panel-header { gap: 8px; }
	.chss-status-badge { justify-self: start; }

	.chss-form-grid { grid-template-columns: 1fr !important; gap: 11px; }
	.chss-form-grid label { font-size: 13px; }
	.chss-form-grid input, .chss-form-grid select, .chss-form-grid textarea,
	.chss-inline-form input, .chss-inline-form select, .chss-request-actions textarea {
		min-height: 46px; border-radius: 14px; font-size: 16px; padding: 11px 12px;
	}
	.chss-form-grid textarea, .chss-request-actions textarea { min-height: 92px; }

	.chss-button, .chss-small-button { width: 100%; min-height: 46px; justify-content: center; border-radius: 14px; font-size: 15px; }
	.chss-small-link { min-height: 38px; padding: 9px 11px; font-size: 13px; }
	.chss-row-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
	.chss-row-actions form { width: 100%; }

	.chss-week-wrap { border-radius: 16px; margin-inline: -4px; padding-bottom: 8px; }
	.chss-week-table { min-width: 820px; font-size: 12px; }
	.chss-week-table th, .chss-week-table td { padding: 9px 8px; vertical-align: top; }
	.chss-week-employee { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 8px 0 14px rgba(15, 23, 42, .05); min-width: 132px; }
	.chss-week-shift { padding: 8px; border-radius: 12px; font-size: 11px; }
	.chss-week-shift strong, .chss-week-shift span, .chss-week-shift em { display: block; }

	.chss-table { min-width: 720px; font-size: 12px; }
	.chss-table th, .chss-table td { padding: 10px 9px; }
	.chss-shift-cards, .chss-user-card-list, .chss-request-list { gap: 12px; }
	.chss-shift-card, .chss-user-card, .chss-request-card, .chss-edit-card { padding: 14px; border-radius: 17px; }
	.chss-shift-date { font-size: 12px; }
	.chss-user-card-meta { display: grid; grid-template-columns: 1fr; gap: 7px; }
	.chss-user-card-meta span { border-radius: 13px; }
	.chss-user-edit-box { margin-top: 12px; padding-top: 12px; }
	.chss-password-reset-form { padding: 12px; border-radius: 15px; }
	.chss-edit-card summary { display: grid; grid-template-columns: 1fr; gap: 7px; }
	.chss-subpanel { padding: 14px; border-radius: 17px; }
	.chss-empty-state { padding: 22px 14px; border-radius: 18px; }
	.chss-empty-icon { width: 52px; height: 52px; font-size: 26px; }
	.chss-email-log-table { min-width: 880px; }
}

@media (max-width: 390px) {
	.chss-app { padding: 8px !important; }
	.chss-hero, .chss-topbar, .chss-panel { border-radius: 16px; }
	.chss-hero h1, .chss-topbar h1 { font-size: 24px; }
	.chss-tab { font-size: 12px; padding: 9px 11px; }
	.chss-panel { padding: 13px; }
}


/* v0.21.20 — approved mobile Staff screen. */
.chss-mobile-staff {
	display: none;
}

@media (max-width: 480px) {
	.chss-mobile-staff-summary {
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-height: 82px;
		padding: 12px 9px;
		border: 1px solid #e3e8f0;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 12px 30px rgba(25, 43, 76, .08);
	}

	.chss-mobile-staff-summary > span {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-width: 0;
		font-size: 16px;
		white-space: nowrap;
	}

	.chss-mobile-staff-summary > span + span {
		border-left: 1px solid #e5eaf1;
	}

	.chss-mobile-staff-summary i {
		position: relative;
		display: inline-flex;
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: linear-gradient(145deg, #e1f7f2, #d9f5f3);
		color: #0f6f70;
	}

	.chss-mobile-staff-people::before {
		content: "";
		width: 19px;
		height: 13px;
		border-radius: 9px 9px 5px 5px;
		background: currentColor;
		box-shadow: 9px 1px 0 -2px currentColor;
	}

	.chss-mobile-staff-people::after {
		content: "";
		position: absolute;
		top: 8px;
		left: 13px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: currentColor;
		box-shadow: 10px 1px 0 -1px currentColor;
	}

	.chss-mobile-staff-check::before {
		content: "";
		width: 17px;
		height: 9px;
		border-left: 3px solid currentColor;
		border-bottom: 3px solid currentColor;
		transform: translateY(-2px) rotate(-45deg);
	}

	.chss-mobile-staff-search {
		position: relative;
		display: block;
	}

	.chss-mobile-staff .screen-reader-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.chss-mobile-staff-search i {
		position: absolute;
		top: 50%;
		left: 18px;
		z-index: 1;
		width: 17px;
		height: 17px;
		border: 2px solid #60708b;
		border-radius: 50%;
		transform: translateY(-58%);
		pointer-events: none;
	}

	.chss-mobile-staff-search i::after {
		content: "";
		position: absolute;
		right: -6px;
		bottom: -5px;
		width: 8px;
		height: 2px;
		border-radius: 2px;
		background: #60708b;
		transform: rotate(47deg);
	}

	.chss-app .chss-mobile-staff-search input {
		width: 100%;
		min-height: 58px;
		padding: 12px 18px 12px 52px;
		border: 1px solid #cfd7e4;
		border-radius: 18px;
		background: #fff;
		box-shadow: none;
		font-size: 16px;
		font-weight: 650;
		color: #07183d;
	}

	.chss-app .chss-mobile-staff-search input::placeholder {
		color: #7b899f;
		opacity: 1;
	}

	.chss-mobile-staff-filters {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.chss-mobile-staff-filters button {
		display: inline-flex;
		min-width: 0;
		min-height: 48px;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 8px 5px;
		border: 1px solid #e0e5ed;
		border-radius: 14px;
		background: #fff;
		color: #07183d;
		font-size: 13px;
		font-weight: 800;
		box-shadow: 0 6px 16px rgba(25, 43, 76, .045);
	}

	.chss-mobile-staff-filters button span {
		display: inline-flex;
		min-width: 25px;
		height: 25px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #f0f2f6;
		font-size: 12px;
	}

	.chss-mobile-staff-filters button.is-active {
		border-color: #a9cfff;
		background: linear-gradient(180deg, #f2f8ff, #eaf4ff);
		color: #0f6de8;
	}

	.chss-mobile-staff-filters button.is-active span {
		background: #fff;
		box-shadow: 0 0 0 2px rgba(255,255,255,.7);
	}

	.chss-mobile-staff-list {
		display: grid;
		gap: 10px;
	}

	.chss-mobile-staff-card {
		border: 1px solid #e4e9f0;
		border-radius: 19px;
		background: #fff;
		box-shadow: 0 10px 26px rgba(25, 43, 76, .075);
		overflow: hidden;
	}

	.chss-mobile-staff-card[hidden] {
		display: none !important;
	}

	.chss-mobile-staff-card > summary {
		position: relative;
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr) auto 12px;
		gap: 11px;
		min-height: 104px;
		align-items: center;
		padding: 12px 12px;
		list-style: none;
		cursor: pointer;
	}

	.chss-mobile-staff-card > summary::-webkit-details-marker,
	.chss-mobile-new-staff > summary::-webkit-details-marker,
	.chss-mobile-staff-password > summary::-webkit-details-marker {
		display: none;
	}

	.chss-mobile-staff-avatar {
		display: inline-flex;
		width: 52px;
		height: 52px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: linear-gradient(145deg, #e1f7f2, #d9f5f3);
		color: #07565c;
		font-size: 17px;
		font-weight: 950;
	}

	.chss-mobile-staff-copy {
		display: grid;
		min-width: 0;
		gap: 3px;
	}

	.chss-mobile-staff-copy > strong {
		overflow: hidden;
		font-size: 15px;
		font-weight: 950;
		line-height: 1.18;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #07183d;
	}

	.chss-mobile-staff-copy small {
		overflow: hidden;
		font-size: 13px;
		font-weight: 650;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #6f7e96;
	}

	.chss-mobile-staff-role {
		display: inline-flex;
		width: max-content;
		max-width: 100%;
		margin-top: 4px;
		padding: 4px 8px;
		border-radius: 8px;
		background: #edf5ff;
		color: #1659a8;
		font-size: 11px;
		font-weight: 800;
	}

	.chss-mobile-staff-state {
		align-self: end;
		margin-bottom: 4px;
		padding: 6px 8px;
		border-radius: 9px;
		font-size: 11px;
		font-weight: 850;
		white-space: nowrap;
	}

	.chss-mobile-staff-state.is-active {
		background: #e9f8ec;
		color: #188432;
	}

	.chss-mobile-staff-state.is-inactive {
		background: #f0f1f4;
		color: #667085;
	}

	.chss-mobile-staff-chevron {
		font-style: normal;
		font-size: 28px;
		line-height: 1;
		color: #07183d;
		transition: transform .18s ease;
	}

	.chss-mobile-staff-card[open] > summary {
		border-bottom: 1px solid #e7ebf1;
		background: #fbfdff;
	}

	.chss-mobile-staff-card[open] .chss-mobile-staff-chevron {
		transform: rotate(90deg);
	}

	.chss-mobile-staff-editor {
		display: grid;
		gap: 12px;
		padding: 14px;
		background: #fff;
	}

	.chss-mobile-staff-editor .chss-form-grid,
	.chss-mobile-new-staff-form .chss-form-grid {
		grid-template-columns: 1fr;
	}

	.chss-mobile-staff-secondary-actions {
		display: grid;
		gap: 10px;
		padding-top: 11px;
		border-top: 1px solid #edf0f5;
	}

	.chss-mobile-staff-password {
		padding: 10px 12px;
		border: 1px solid #e3e8f0;
		border-radius: 13px;
		background: #f8fafc;
	}

	.chss-mobile-staff-password > summary {
		font-size: 13px;
		font-weight: 850;
		color: #36516f;
		cursor: pointer;
		list-style: none;
	}

	.chss-mobile-staff-password[open] > summary {
		margin-bottom: 12px;
	}

	.chss-mobile-staff-empty {
		margin: 0;
		padding: 22px 14px;
		border: 1px dashed #cfd7e4;
		border-radius: 17px;
		background: #fff;
		text-align: center;
		font-weight: 750;
		color: #66758c;
	}

	.chss-mobile-staff-empty[hidden] {
		display: none !important;
	}

	.chss-mobile-new-staff {
		border: 0;
		background: transparent;
	}

	.chss-mobile-new-staff > summary {
		display: flex;
		width: 100%;
		min-height: 60px;
		align-items: center;
		justify-content: center;
		padding: 14px 18px;
		border: 0;
		border-radius: 18px;
		background: linear-gradient(100deg, #11b9b2 0%, #39d4b2 100%);
		box-shadow: 0 14px 28px rgba(21, 184, 170, .20);
		color: #fff;
		font-size: 19px;
		font-weight: 900;
		letter-spacing: -.02em;
		list-style: none;
		cursor: pointer;
	}

	.chss-mobile-new-staff[open] > summary {
		border-radius: 18px 18px 0 0;
	}

	.chss-mobile-new-staff-form {
		padding: 15px;
		border: 1px solid #dfe6ee;
		border-top: 0;
		border-radius: 0 0 18px 18px;
		background: #fff;
	}

	.chss-mobile-new-staff-form h2 {
		margin: 0 0 13px;
		font-size: 21px;
		color: #07183d;
	}
}

@media (max-width: 390px) {
	.chss-mobile-staff-summary > span {
		gap: 7px;
		font-size: 14px;
	}

	.chss-mobile-staff-summary i {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
	}

	.chss-mobile-staff-card > summary {
		grid-template-columns: 48px minmax(0, 1fr) auto 10px;
		gap: 8px;
		padding-inline: 10px;
	}

	.chss-mobile-staff-avatar {
		width: 48px;
		height: 48px;
	}

	.chss-mobile-staff-state {
		padding-inline: 6px;
		font-size: 10px;
	}
}


/* v0.12.0 business rules */
.chss-pill-email-disabled {
	background: #e5e7eb;
	color: #374151;
}

.chss-settings-hint {
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 14px;
	background: #f8fafc;
	color: #64748b;
	font-size: 13px;
}


/* v0.13.0 audit log */
.chss-audit-list {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.chss-audit-card {
	border: 1px solid rgba(20, 34, 48, .10);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
	overflow: hidden;
}

.chss-audit-card summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px;
	align-items: start;
	cursor: pointer;
	padding: 16px;
	list-style: none;
}

.chss-audit-card summary::-webkit-details-marker {
	display: none;
}

.chss-audit-card summary strong {
	display: block;
	color: #17212b;
	font-size: 15px;
}

.chss-audit-card summary span {
	display: block;
	margin-top: 4px;
	color: #667085;
	font-size: 13px;
}

.chss-audit-meta {
	display: grid;
	gap: 4px;
	text-align: right;
	min-width: 220px;
}

.chss-audit-details {
	display: grid;
	gap: 12px;
	padding: 0 16px 16px;
	border-top: 1px dashed rgba(20, 34, 48, .14);
}

.chss-audit-details p {
	margin: 12px 0 0;
	color: #667085;
}

.chss-audit-details label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	color: #334155;
}

.chss-audit-details textarea {
	width: 100%;
	border: 1px solid #dde3e8;
	border-radius: 14px;
	padding: 12px;
	background: #f8fafc;
	color: #334155;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	resize: vertical;
}

@media (max-width: 480px) {
	.chss-audit-card summary {
		grid-template-columns: 1fr;
	}

	.chss-audit-meta {
		text-align: left;
		min-width: 0;
	}
}


/* v0.14.0 reports */
.chss-report-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 14px;
	margin: 18px 0;
	padding: 14px;
	border: 1px solid rgba(20, 34, 48, .08);
	border-radius: 18px;
	background: #f8fafc;
}

.chss-report-toolbar form {
	margin: 0;
}

.chss-report-summary {
	margin: 18px 0;
}

.chss-report-table td,
.chss-report-table th {
	text-align: left;
}

.chss-report-total-row {
	background: #f1f5f9;
}

.chss-report-total-row td {
	border-top: 2px solid #cbd5e1;
}

.chss-report-note {
	margin-top: 12px;
	font-size: 13px;
}

@media (max-width: 480px) {
	.chss-report-toolbar {
		display: grid;
		grid-template-columns: 1fr;
	}

	.chss-report-toolbar .chss-inline-form,
	.chss-report-toolbar .chss-button,
	.chss-report-toolbar form {
		width: 100%;
	}
}


/* v0.15.0 AJAX quick actions */
.chss-ajax-toast {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99999;
	max-width: min(420px, calc(100vw - 28px));
	padding: 13px 16px;
	border-radius: 16px;
	background: #0f172a;
	color: #fff;
	box-shadow: 0 18px 50px rgba(15, 23, 42, .26);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .2s ease, transform .2s ease;
}

.chss-ajax-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.chss-ajax-toast-success {
	background: #065f46;
}

.chss-ajax-toast-error {
	background: #991b1b;
}

.chss-app form.is-ajax-loading {
	opacity: .72;
	pointer-events: none;
}

.chss-app button:disabled,
.chss-app input[type="submit"]:disabled {
	cursor: wait;
	opacity: .72;
}

.chss-app .is-ajax-removing {
	opacity: 0;
	transform: scale(.98);
	transition: opacity .22s ease, transform .22s ease;
}

.chss-app .is-ajax-done {
	opacity: .78;
	background: #f8fafc;
}

@media (max-width: 480px) {
	.chss-ajax-toast {
		right: 10px;
		left: 10px;
		bottom: 12px;
		max-width: none;
		text-align: center;
	}
}


/* v0.16.0 day schedule overview */
.chss-day-overview {
	margin: 18px 0 22px;
	padding: 16px;
	border: 1px solid rgba(20, 34, 48, .08);
	border-radius: 22px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.chss-day-overview-header {
	display: grid;
	grid-template-columns: 1fr minmax(220px, 420px);
	gap: 16px;
	align-items: end;
	margin-bottom: 14px;
}

.chss-day-overview-header h3 {
	margin: 0;
	font-size: 22px;
	letter-spacing: -0.02em;
}

.chss-day-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(220px, 1fr));
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}

.chss-day-card {
	min-width: 220px;
	border: 1px solid rgba(20, 34, 48, .10);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.chss-day-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 13px 14px;
	background: #17212b;
	color: #fff;
}

.chss-day-card-header strong {
	font-size: 14px;
}

.chss-day-card-header span {
	font-size: 12px;
	opacity: .82;
}

.chss-day-section {
	padding: 12px;
	border-top: 1px solid #eef2f7;
}

.chss-day-section h4 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 900;
	color: #334155;
}

.chss-day-section-morning {
	background: linear-gradient(180deg, #fffdf5 0%, #fff 100%);
}

.chss-day-section-night {
	background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.chss-day-empty {
	margin: 0;
	padding: 10px;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	color: #94a3b8;
	font-size: 12px;
	line-height: 1.35;
}

.chss-day-shift-list {
	display: grid;
	gap: 8px;
}

.chss-day-shift {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 10px;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #94a3b8;
	border-radius: 13px;
	background: #fff;
}

.chss-day-shift strong {
	display: block;
	color: #17212b;
	font-size: 13px;
	line-height: 1.2;
}

.chss-day-shift span {
	display: block;
	margin-top: 3px;
	color: #64748b;
	font-size: 12px;
}

.chss-day-shift time {
	padding: 6px 8px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #0f172a;
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
}

.chss-day-shift-published {
	border-left-color: #16a34a;
}

.chss-day-shift-draft {
	border-left-color: #f59e0b;
	opacity: .82;
}

.chss-day-shift-cancelled {
	border-left-color: #ef4444;
	opacity: .62;
	text-decoration: line-through;
}

@media (max-width: 480px) {
	.chss-day-overview-header {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

@media (max-width: 480px) {
	.chss-day-overview {
		margin-inline: -2px;
		padding: 12px;
		border-radius: 18px;
	}

	.chss-day-grid {
		grid-template-columns: repeat(7, 82vw);
		gap: 10px;
		scroll-snap-type: x proximity;
	}

	.chss-day-card {
		min-width: 82vw;
		scroll-snap-align: start;
	}

	.chss-day-shift {
		grid-template-columns: 1fr;
	}

	.chss-day-shift time {
		justify-self: start;
	}
}

/* v0.17.0 standard positions */
.chss-position-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.chss-position-pill {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 7px 12px;
	border-radius: 999px;
	background: #eef2ff;
	color: #3730a3;
	font-size: 13px;
	font-weight: 900;
	border: 1px solid rgba(79, 70, 229, .16);
}

.chss-app select[name="position"] {
	font-weight: 700;
}


/* v0.18.0 store shift periods */
.chss-period-preview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.chss-period-preview > div {
	padding: 14px;
	border-radius: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.chss-period-preview span,
.chss-period-preview small {
	display: block;
	color: #64748b;
	font-size: 12px;
	font-weight: 800;
}

.chss-period-preview strong {
	display: block;
	margin: 5px 0;
	font-size: 20px;
	color: #17212b;
}

.chss-form-section-title {
	margin: 6px 0 -2px;
	padding-top: 12px;
	border-top: 1px dashed #cbd5e1;
	color: #334155;
	font-weight: 900;
	font-size: 14px;
}

@media (max-width: 480px) {
	.chss-period-preview {
		grid-template-columns: 1fr;
	}
}


/* v0.19.4 shift templates stable save */
.chss-template-list {
	display: grid;
	gap: 12px;
	margin-top: 14px;
}

.chss-template-card {
	border: 1px solid rgba(20, 34, 48, .10);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
	overflow: hidden;
}

.chss-template-card summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px;
	align-items: center;
	cursor: pointer;
	padding: 15px;
	list-style: none;
}

.chss-template-card summary::-webkit-details-marker {
	display: none;
}

.chss-template-card summary strong {
	display: block;
	color: #17212b;
}

.chss-template-card summary span:not(.chss-pill) {
	display: block;
	margin-top: 4px;
	color: #64748b;
	font-size: 13px;
}

.chss-template-card form {
	padding: 0 15px 15px;
}

.chss-template-card .chss-row-actions {
	padding: 0 15px 15px;
}

.chss-template-create-form {
	margin: 14px 0;
	padding: 14px;
	border-radius: 18px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.chss-danger-button {
	background: #fee2e2 !important;
	color: #991b1b !important;
	border-color: #fecaca !important;
}

@media (max-width: 480px) {
	.chss-template-card summary {
		grid-template-columns: 1fr;
	}
}


/* v0.19.5 template dropdown fix */
.chss-field-hint {
	display: block;
	margin: 4px 0 6px;
	color: #64748b;
	font-size: 12px;
	font-weight: 700;
}


/* v0.20.2 Exact Mockup Style
   Scoped only to Shift Scheduler: every selector starts with .chss-app.
   Brand:
   Mint: #94D2BD
   Ghost white: #F8F8FF
*/

.chss-app {
	--chss-mint: #94D2BD;
	--chss-mint-dark: #62BFA1;
	--chss-mint-deep: #2f8f78;
	--chss-mint-soft: rgba(148, 210, 189, .18);
	--chss-mint-softer: rgba(148, 210, 189, .10);
	--chss-ghost: #F8F8FF;
	--chss-white: #ffffff;
	--chss-text: #182233;
	--chss-heading: #111827;
	--chss-muted: #6b7280;
	--chss-line: #e7eaf0;
	--chss-line-strong: #dfe4ec;
	--chss-shadow-card: 0 10px 30px rgba(15, 23, 42, .055);
	--chss-shadow-hover: 0 16px 38px rgba(15, 23, 42, .085);
	--chss-radius-xl: 24px;
	--chss-radius-lg: 18px;
	--chss-radius-md: 13px;
	--chss-radius-sm: 10px;

	width: 100%;
	color: var(--chss-text);
	background:
		radial-gradient(circle at 88% 2%, rgba(148, 210, 189, .14), transparent 28%),
		linear-gradient(180deg, var(--chss-ghost) 0%, #ffffff 58%);
	border-radius: 24px;
	padding: clamp(16px, 2vw, 28px);
	font-family: inherit;
}



.chss-app .chss-dashboard,
.chss-app .chss-dashboard-modern {
	max-width: 1280px;
	margin-inline: auto;
	display: grid;
	gap: 22px;
}

/* Mockup-style clean header, not gradient hero */
.chss-app .chss-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 24px;
	padding: 10px 0 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--chss-text);
	box-shadow: none;
	overflow: visible;
}

.chss-app .chss-hero::before {
	content: "CompuShift";
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	margin-bottom: 26px;
	color: var(--chss-mint-dark);
	font-size: 20px;
	font-weight: 950;
	letter-spacing: -.02em;
}

.chss-app .chss-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -12px;
	height: 1px;
	background: linear-gradient(90deg, rgba(148,210,189,.5), transparent);
	pointer-events: none;
}

.chss-app .chss-hero h1 {
	margin: 0 0 8px;
	color: var(--chss-heading);
	font-size: clamp(34px, 4.2vw, 44px);
	line-height: 1.05;
	font-weight: 950;
	letter-spacing: -.045em;
}

.chss-app .chss-hero p,
.chss-app .chss-hero .chss-muted {
	max-width: 680px;
	margin: 0;
	color: var(--chss-muted);
	font-size: 15px;
	line-height: 1.55;
}



.chss-app .chss-hero form {
	justify-self: end;
	align-self: start;
	margin-top: 12px;
}

.chss-app .chss-hero .chss-button,
.chss-app .chss-hero button,
.chss-app .chss-hero button[type="submit"] {
	background: linear-gradient(135deg, var(--chss-mint), var(--chss-mint-dark));
	color: #ffffff;
	border: 0;
	box-shadow: 0 12px 24px rgba(98, 191, 161, .24);
}

/* Dashboard navigation, close to screenshot pill tabs */
.chss-app .chss-tabs {
	display: flex;
	align-items: center;
	gap: 0;
	width: max-content;
	max-width: 100%;
	margin: 4px 0 2px;
	padding: 5px;
	border: 1px solid var(--chss-line);
	border-radius: var(--chss-radius-lg);
	background: rgba(255,255,255,.86);
	box-shadow: 0 8px 26px rgba(15,23,42,.045);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.chss-app .chss-tab {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 18px;
	border-radius: 12px;
	color: #5b6472;
	background: transparent;
	text-decoration: none;
	font-size: 14px;
	font-weight: 850;
	white-space: nowrap;
	transition: background .16s ease, color .16s ease, transform .16s ease;
}

.chss-app .chss-tab + .chss-tab {
	margin-left: 4px;
}

.chss-app .chss-tab:hover {
	background: var(--chss-mint-softer);
	color: var(--chss-mint-deep);
	transform: translateY(-1px);
}

.chss-app .chss-tab.is-active {
	background: rgba(148, 210, 189, .18);
	color: var(--chss-mint-deep);
	box-shadow: inset 0 0 0 1px rgba(148, 210, 189, .22);
}

/* Cards and panels */
.chss-app .chss-panel,
.chss-app .chss-subpanel,
.chss-app .chss-card,
.chss-app .chss-summary-card,
.chss-app .chss-day-overview,
.chss-app .chss-template-card,
.chss-app .chss-audit-card,
.chss-app .chss-table-wrap,
.chss-app .chss-empty-state {
	border: 1px solid var(--chss-line);
	border-radius: var(--chss-radius-xl);
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--chss-shadow-card);
}

.chss-app .chss-panel {
	padding: clamp(18px, 2.4vw, 26px);
}

.chss-app .chss-subpanel {
	padding: clamp(16px, 2vw, 22px);
	margin-top: 18px;
}

.chss-app .chss-panel-header,
.chss-app .chss-day-overview-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--chss-line);
}

.chss-app .chss-panel-header h2,
.chss-app .chss-panel-header h3,
.chss-app .chss-subpanel h3,
.chss-app .chss-day-overview-header h3 {
	margin: 0 0 6px;
	color: var(--chss-heading);
	font-weight: 950;
	letter-spacing: -.03em;
}

.chss-app .chss-eyebrow {
	margin: 0 0 6px;
	color: var(--chss-mint-deep);
	font-size: 12px;
	font-weight: 950;
	text-transform: uppercase;
	letter-spacing: .095em;
}

.chss-app .chss-muted {
	color: var(--chss-muted);
	line-height: 1.55;
}

/* KPI cards */
.chss-app .chss-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
}

.chss-app .chss-summary-card {
	position: relative;
	overflow: hidden;
	min-height: 130px;
	padding: 22px;
	transition: transform .16s ease, box-shadow .16s ease;
}

.chss-app .chss-summary-card::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 20px;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background:
		radial-gradient(circle at center, rgba(148,210,189,.34), rgba(148,210,189,.16));
}

.chss-app .chss-summary-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--chss-shadow-hover);
}

.chss-app .chss-summary-card span {
	display: block;
	margin-left: 64px;
	color: var(--chss-muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.chss-app .chss-summary-card strong {
	display: block;
	margin: 8px 0 0 64px;
	color: var(--chss-heading);
	font-size: 30px;
	line-height: 1;
	font-weight: 950;
	letter-spacing: -.04em;
}

/* Forms */
.chss-app .chss-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: end;
}

.chss-app .chss-form-grid label,
.chss-app .chss-inline-form label {
	display: grid;
	gap: 8px;
	color: #4b5563;
	font-size: 13px;
	font-weight: 850;
}



.chss-app input[type="text"],
.chss-app input[type="email"],
.chss-app input[type="password"],
.chss-app input[type="date"],
.chss-app input[type="time"],
.chss-app input[type="month"],
.chss-app input[type="number"],
.chss-app select,
.chss-app textarea {
	width: 100%;
	min-height: 46px;
	border: 1px solid var(--chss-line-strong);
	border-radius: var(--chss-radius-md);
	background: #ffffff;
	color: var(--chss-heading);
	padding: 10px 13px;
	font-size: 15px;
	font-weight: 750;
	outline: none;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.chss-app textarea {
	min-height: 94px;
	resize: vertical;
	line-height: 1.45;
}

.chss-app input[type="text"]:focus,
.chss-app input[type="email"]:focus,
.chss-app input[type="password"]:focus,
.chss-app input[type="date"]:focus,
.chss-app input[type="time"]:focus,
.chss-app input[type="month"]:focus,
.chss-app input[type="number"]:focus,
.chss-app select:focus,
.chss-app textarea:focus {
	border-color: var(--chss-mint-dark);
	box-shadow: 0 0 0 4px rgba(148, 210, 189, .22);
	background: #ffffff;
}

/* Buttons like screenshot */
.chss-app .chss-button,
.chss-app .chss-small-button,
.chss-app button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--chss-mint), var(--chss-mint-dark));
	color: #ffffff;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 12px 24px rgba(98, 191, 161, .22);
	transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.chss-app .chss-small-button {
	min-height: 36px;
	padding: 8px 12px;
	font-size: 13px;
}

.chss-app .chss-button:hover,
.chss-app .chss-small-button:hover,
.chss-app button[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 30px rgba(98, 191, 161, .28);
}

.chss-app .chss-button-secondary,
.chss-app .chss-small-link {
	background: #ffffff;
	color: #4b5563;
	border: 1px solid var(--chss-line);
	box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}

.chss-app .chss-small-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8px 12px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 850;
}

/* Tables */
.chss-app .chss-table-wrap {
	width: 100%;
	overflow-x: auto;
	background: #fff;
}

.chss-app .chss-table,
.chss-app .chss-week-table,
.chss-app .chss-report-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
}

.chss-app .chss-table th,
.chss-app .chss-week-table th,
.chss-app .chss-report-table th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #fbfbff;
	color: #6b7280;
	font-size: 12px;
	font-weight: 900;
	text-transform: none;
	letter-spacing: 0;
}

.chss-app .chss-table th,
.chss-app .chss-table td,
.chss-app .chss-week-table th,
.chss-app .chss-week-table td,
.chss-app .chss-report-table th,
.chss-app .chss-report-table td {
	padding: 14px 16px;
	border-bottom: 1px solid #edf0f5;
	vertical-align: middle;
}

.chss-app .chss-table tbody tr:hover td,
.chss-app .chss-week-table tbody tr:hover td,
.chss-app .chss-report-table tbody tr:hover td {
	background: rgba(148, 210, 189, .07);
}

/* Badges */
.chss-app .chss-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
	white-space: nowrap;
}

.chss-app .chss-pill-published,
.chss-app .chss-position-pill {
	background: rgba(148, 210, 189, .20);
	color: var(--chss-mint-deep);
	border: 1px solid rgba(148, 210, 189, .28);
}

.chss-app .chss-pill-draft {
	background: #fff6d7;
	color: #a16207;
	border: 1px solid #fde68a;
}



/* Day cards */
.chss-app .chss-day-overview {
	background:
		radial-gradient(circle at 12% 0%, rgba(148, 210, 189, .12), transparent 38%),
		linear-gradient(180deg, #fff 0%, var(--chss-ghost) 100%);
}

.chss-app .chss-day-grid {
	gap: 14px;
	padding: 2px 2px 10px;
}

.chss-app .chss-day-card {
	border: 1px solid var(--chss-line);
	border-radius: 20px;
	background: #ffffff;
	box-shadow: var(--chss-shadow-card);
	transition: transform .16s ease, box-shadow .16s ease;
}

.chss-app .chss-day-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--chss-shadow-hover);
}

.chss-app .chss-day-card-header {
	background: #ffffff;
	color: var(--chss-heading);
	border-bottom: 1px solid var(--chss-line);
}





.chss-app .chss-day-section-morning {
	background: linear-gradient(180deg, rgba(148,210,189,.06), #fff);
}

.chss-app .chss-day-section-night {
	background: linear-gradient(180deg, rgba(248,248,255,.9), #fff);
}

.chss-app .chss-day-shift {
	border-radius: 14px;
	border-left-color: var(--chss-mint-dark);
	box-shadow: 0 5px 15px rgba(15, 23, 42, .035);
}

.chss-app .chss-day-shift time {
	background: rgba(148, 210, 189, .18);
	color: var(--chss-mint-deep);
}

/* Template/audit cards */
.chss-app .chss-template-list,
.chss-app .chss-audit-list {
	display: grid;
	gap: 12px;
}

.chss-app .chss-template-card,
.chss-app .chss-audit-card {
	overflow: hidden;
}

.chss-app .chss-template-card summary,
.chss-app .chss-audit-card summary {
	padding: 16px;
	background: #fff;
}





/* Empty states and notices */
.chss-app .chss-empty-state {
	background: rgba(255,255,255,.78);
	border-style: dashed;
}



.chss-app .chss-field-hint {
	display: block;
	margin: 4px 0 6px;
	color: var(--chss-muted);
	font-size: 12px;
	font-weight: 750;
}

.chss-app .chss-danger-button {
	background: #ffe4e6 !important;
	color: #be123c !important;
	border: 1px solid #fecdd3 !important;
	box-shadow: none !important;
}

/* Layout utilities */
.chss-app .chss-row-actions,
.chss-app .chss-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Responsive */
@media (max-width: 480px) {
	.chss-app .chss-hero,
	.chss-app .chss-panel-header,
	.chss-app .chss-day-overview-header {
		grid-template-columns: 1fr;
		display: grid;
	}

	.chss-app .chss-hero form {
		justify-self: start;
		margin-top: 0;
	}

	

	.chss-app .chss-tabs {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.chss-app {
		padding: 12px;
		border-radius: 20px;
	}

	.chss-app .chss-hero::before {
		margin-bottom: 18px;
		font-size: 18px;
	}

	.chss-app .chss-hero h1 {
		font-size: 34px;
	}

	.chss-app .chss-tab {
		min-height: 40px;
		padding: 9px 12px;
		font-size: 13px;
	}

	.chss-app .chss-panel,
	.chss-app .chss-subpanel {
		border-radius: 18px;
		padding: 14px;
	}

	.chss-app .chss-summary-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	

	

	.chss-app input[type="text"],
	.chss-app input[type="email"],
	.chss-app input[type="password"],
	.chss-app input[type="date"],
	.chss-app input[type="time"],
	.chss-app input[type="month"],
	.chss-app input[type="number"],
	.chss-app select,
	.chss-app textarea {
		font-size: 16px;
		min-height: 48px;
	}

	.chss-app .chss-table th,
	.chss-app .chss-table td,
	.chss-app .chss-week-table th,
	.chss-app .chss-week-table td,
	.chss-app .chss-report-table th,
	.chss-app .chss-report-table td {
		padding: 11px;
		font-size: 13px;
	}

	.chss-app .chss-day-grid {
		grid-template-columns: repeat(7, 86vw);
	}

	.chss-app .chss-day-card {
		min-width: 86vw;
	}
}

/* v0.20.3 Simple Focused UI
   Scoped only to Shift Scheduler.
   Goal: simpler, calmer, less decorative, easier daily use.
*/

.chss-app {
	--chss-mint: #94D2BD;
	--chss-mint-dark: #64b99c;
	--chss-mint-deep: #2f7f6d;
	--chss-ghost: #F8F8FF;
	--chss-white: #ffffff;
	--chss-text: #17212b;
	--chss-heading: #111827;
	--chss-muted: #6b7280;
	--chss-line: #e7eaf0;
	--chss-soft-line: rgba(23, 33, 43, .08);
	--chss-soft-bg: #fbfbff;
	--chss-shadow-simple: 0 8px 22px rgba(15, 23, 42, .045);
	--chss-radius: 16px;
	--chss-radius-sm: 11px;

	width: 100%;
	color: var(--chss-text);
	background: var(--chss-ghost);
	border-radius: 18px;
	padding: clamp(12px, 1.7vw, 20px);
	font-family: inherit;
}

.chss-app *,
.chss-app *::before,
.chss-app *::after {
	box-sizing: border-box;
}

.chss-app .chss-dashboard,
.chss-app .chss-dashboard-modern {
	max-width: 1180px;
	margin-inline: auto;
	display: grid;
	gap: 16px;
}

/* Cleaner header: no fake logo, no large decoration */
.chss-app .chss-hero {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 16px;
	padding: 10px 4px 14px;
	border: 0;
	border-bottom: 1px solid var(--chss-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--chss-text);
	overflow: visible;
}

.chss-app .chss-hero::before,
.chss-app .chss-hero::after {
	display: none;
	content: none;
}

.chss-app .chss-hero h1 {
	margin: 0 0 5px;
	color: var(--chss-heading);
	font-size: clamp(28px, 3.3vw, 38px);
	line-height: 1.08;
	font-weight: 900;
	letter-spacing: -.035em;
}

.chss-app .chss-hero p,
.chss-app .chss-hero .chss-muted {
	max-width: 680px;
	margin: 0;
	color: var(--chss-muted);
	font-size: 14px;
	line-height: 1.5;
}

.chss-app .chss-hero .chss-eyebrow {
	display: none;
}

.chss-app .chss-hero form {
	justify-self: end;
	margin: 0;
}

/* Simple tabs */
.chss-app .chss-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 6px;
	border: 1px solid var(--chss-line);
	border-radius: 14px;
	background: #ffffff;
	box-shadow: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.chss-app .chss-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 12px;
	border-radius: 10px;
	background: transparent;
	color: #4b5563;
	text-decoration: none;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
	transition: background .14s ease, color .14s ease;
}

.chss-app .chss-tab:hover {
	background: rgba(148, 210, 189, .12);
	color: var(--chss-mint-deep);
	transform: none;
}

.chss-app .chss-tab.is-active {
	background: rgba(148, 210, 189, .22);
	color: var(--chss-mint-deep);
	box-shadow: none;
}

/* Panels: less shadow, less decoration */
.chss-app .chss-panel,
.chss-app .chss-subpanel,
.chss-app .chss-card,
.chss-app .chss-summary-card,
.chss-app .chss-day-overview,
.chss-app .chss-template-card,
.chss-app .chss-audit-card,
.chss-app .chss-table-wrap,
.chss-app .chss-empty-state {
	border: 1px solid var(--chss-line);
	border-radius: var(--chss-radius);
	background: #ffffff;
	box-shadow: var(--chss-shadow-simple);
}

.chss-app .chss-panel {
	padding: clamp(14px, 2vw, 22px);
}

.chss-app .chss-subpanel {
	padding: clamp(14px, 1.8vw, 18px);
	margin-top: 14px;
}

.chss-app .chss-panel-header,
.chss-app .chss-day-overview-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--chss-line);
}

.chss-app .chss-panel-header h2,
.chss-app .chss-panel-header h3,
.chss-app .chss-subpanel h3,
.chss-app .chss-day-overview-header h3 {
	margin: 0 0 4px;
	color: var(--chss-heading);
	font-weight: 850;
	letter-spacing: -.025em;
}

.chss-app .chss-eyebrow {
	margin: 0 0 4px;
	color: var(--chss-mint-deep);
	font-size: 11px;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.chss-app .chss-muted {
	color: var(--chss-muted);
	line-height: 1.5;
}

/* Summary cards simplified */
.chss-app .chss-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
}

.chss-app .chss-summary-card {
	min-height: auto;
	padding: 15px;
	background: #ffffff;
	transition: none;
}

.chss-app .chss-summary-card::before {
	display: none;
	content: none;
}

.chss-app .chss-summary-card:hover {
	transform: none;
	box-shadow: var(--chss-shadow-simple);
}

.chss-app .chss-summary-card span {
	display: block;
	margin: 0;
	color: var(--chss-muted);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0;
	text-transform: none;
}

.chss-app .chss-summary-card strong {
	display: block;
	margin: 5px 0 0;
	color: var(--chss-heading);
	font-size: 25px;
	line-height: 1.05;
	font-weight: 900;
	letter-spacing: -.035em;
}

/* Forms: clearer, compact */
.chss-app .chss-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: end;
}

.chss-app .chss-form-grid label,
.chss-app .chss-inline-form label {
	display: grid;
	gap: 6px;
	color: #4b5563;
	font-size: 13px;
	font-weight: 750;
}

.chss-app .chss-full {
	grid-column: 1 / -1;
}

.chss-app input[type="text"],
.chss-app input[type="email"],
.chss-app input[type="password"],
.chss-app input[type="date"],
.chss-app input[type="time"],
.chss-app input[type="month"],
.chss-app input[type="number"],
.chss-app select,
.chss-app textarea {
	width: 100%;
	min-height: 42px;
	border: 1px solid var(--chss-line);
	border-radius: var(--chss-radius-sm);
	background: #ffffff;
	color: var(--chss-heading);
	padding: 9px 11px;
	font-size: 14px;
	font-weight: 650;
	outline: none;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.chss-app textarea {
	min-height: 84px;
	resize: vertical;
	line-height: 1.45;
}

.chss-app input[type="text"]:focus,
.chss-app input[type="email"]:focus,
.chss-app input[type="password"]:focus,
.chss-app input[type="date"]:focus,
.chss-app input[type="time"]:focus,
.chss-app input[type="month"]:focus,
.chss-app input[type="number"]:focus,
.chss-app select:focus,
.chss-app textarea:focus {
	border-color: var(--chss-mint-dark);
	box-shadow: 0 0 0 3px rgba(148, 210, 189, .18);
}

/* Buttons: simple and predictable */
.chss-app .chss-button,
.chss-app .chss-small-button,
.chss-app button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	border: 1px solid transparent;
	border-radius: var(--chss-radius-sm);
	background: var(--chss-mint);
	color: #12342b;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 850;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.chss-app .chss-small-button {
	min-height: 34px;
	padding: 7px 10px;
	font-size: 12px;
}

.chss-app .chss-button:hover,
.chss-app .chss-small-button:hover,
.chss-app button[type="submit"]:hover {
	transform: none;
	background: var(--chss-mint-dark);
	color: #ffffff;
	box-shadow: none;
}

.chss-app .chss-button-secondary,
.chss-app .chss-small-link {
	background: #ffffff;
	color: #4b5563;
	border: 1px solid var(--chss-line);
	box-shadow: none;
}

.chss-app .chss-small-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 7px 10px;
	border-radius: var(--chss-radius-sm);
	text-decoration: none;
	font-weight: 750;
	font-size: 12px;
}

/* Tables: cleaner and easier to scan */
.chss-app .chss-table-wrap {
	width: 100%;
	overflow-x: auto;
	background: #ffffff;
	box-shadow: none;
}

.chss-app .chss-table,
.chss-app .chss-week-table,
.chss-app .chss-report-table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
}

.chss-app .chss-table th,
.chss-app .chss-week-table th,
.chss-app .chss-report-table th {
	background: var(--chss-soft-bg);
	color: #6b7280;
	font-size: 12px;
	font-weight: 750;
	text-transform: none;
	letter-spacing: 0;
	position: sticky;
	top: 0;
	z-index: 3;
}

.chss-app .chss-table th,
.chss-app .chss-table td,
.chss-app .chss-week-table th,
.chss-app .chss-week-table td,
.chss-app .chss-report-table th,
.chss-app .chss-report-table td {
	padding: 11px 12px;
	border-bottom: 1px solid #edf0f5;
	vertical-align: middle;
}

.chss-app .chss-table tbody tr:hover td,
.chss-app .chss-week-table tbody tr:hover td,
.chss-app .chss-report-table tbody tr:hover td {
	background: rgba(148, 210, 189, .055);
}

/* Badges */
.chss-app .chss-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 750;
	white-space: nowrap;
}

.chss-app .chss-pill-published,
.chss-app .chss-position-pill {
	background: rgba(148, 210, 189, .22);
	color: var(--chss-mint-deep);
	border: 1px solid rgba(148, 210, 189, .30);
}

.chss-app .chss-pill-draft {
	background: #fff7db;
	color: #9a6700;
	border: 1px solid #fde68a;
}

.chss-app .chss-pill-cancelled {
	background: #ffe4e6;
	color: #be123c;
	border: 1px solid #fecdd3;
}

/* Day schedule: less visual noise */
.chss-app .chss-day-overview {
	background: #ffffff;
}

.chss-app .chss-day-grid {
	gap: 12px;
	padding: 0 0 8px;
}

.chss-app .chss-day-card {
	border: 1px solid var(--chss-line);
	border-radius: 15px;
	background: #ffffff;
	box-shadow: none;
	transition: none;
}

.chss-app .chss-day-card:hover {
	transform: none;
	box-shadow: none;
}

.chss-app .chss-day-card-header {
	background: var(--chss-soft-bg);
	color: var(--chss-heading);
	border-bottom: 1px solid var(--chss-line);
}

.chss-app .chss-day-card-header strong {
	color: var(--chss-heading);
}

.chss-app .chss-day-card-header span {
	color: var(--chss-muted);
}

.chss-app .chss-day-section-morning,
.chss-app .chss-day-section-night {
	background: #ffffff;
}

.chss-app .chss-day-section h4 {
	color: #4b5563;
	font-size: 12px;
}

.chss-app .chss-day-shift {
	border-radius: 12px;
	border: 1px solid var(--chss-line);
	border-left: 4px solid var(--chss-mint-dark);
	box-shadow: none;
}

.chss-app .chss-day-shift time {
	background: rgba(148, 210, 189, .16);
	color: var(--chss-mint-deep);
}

/* Template cards */
.chss-app .chss-template-list,
.chss-app .chss-audit-list {
	display: grid;
	gap: 10px;
}

.chss-app .chss-template-card,
.chss-app .chss-audit-card {
	overflow: hidden;
	box-shadow: none;
}

.chss-app .chss-template-card summary,
.chss-app .chss-audit-card summary {
	padding: 14px;
	background: #ffffff;
}

.chss-app .chss-template-card summary strong,
.chss-app .chss-audit-card summary strong {
	color: var(--chss-heading);
}

.chss-app .chss-template-card summary span:not(.chss-pill),
.chss-app .chss-audit-card summary span:not(.chss-pill) {
	color: var(--chss-muted);
}

/* Empty states and hints */
.chss-app .chss-empty-state {
	background: #ffffff;
	border-style: dashed;
	box-shadow: none;
}

.chss-app .chss-empty-icon {
	color: var(--chss-mint-dark);
}

.chss-app .chss-field-hint {
	display: block;
	margin: 3px 0 5px;
	color: var(--chss-muted);
	font-size: 12px;
	font-weight: 650;
}

.chss-app .chss-danger-button {
	background: #fff1f2 !important;
	color: #be123c !important;
	border: 1px solid #fecdd3 !important;
	box-shadow: none !important;
}

/* Clean actions */
.chss-app .chss-row-actions,
.chss-app .chss-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Reduce less useful visual sections */
.chss-app .chss-report-note,
.chss-app .chss-day-overview-header .chss-muted {
	font-size: 12px;
}

@media (max-width: 480px) {
	.chss-app .chss-hero,
	.chss-app .chss-panel-header,
	.chss-app .chss-day-overview-header {
		display: grid;
		grid-template-columns: 1fr;
		align-items: start;
	}

	

	.chss-app .chss-form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.chss-app {
		padding: 10px;
		border-radius: 16px;
	}

	.chss-app .chss-hero h1 {
		font-size: 30px;
	}

	.chss-app .chss-tabs {
		padding: 5px;
		gap: 5px;
	}

	.chss-app .chss-tab {
		min-height: 36px;
		padding: 8px 10px;
		font-size: 12px;
	}

	.chss-app .chss-panel,
	.chss-app .chss-subpanel {
		border-radius: 14px;
		padding: 12px;
	}

	.chss-app .chss-summary-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.chss-app .chss-row-actions,
	.chss-app .chss-form-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.chss-app .chss-row-actions > *,
	.chss-app .chss-form-actions > *,
	.chss-app .chss-row-actions button,
	.chss-app .chss-form-actions button,
	.chss-app .chss-button,
	.chss-app .chss-small-button {
		width: 100%;
	}

	.chss-app input[type="text"],
	.chss-app input[type="email"],
	.chss-app input[type="password"],
	.chss-app input[type="date"],
	.chss-app input[type="time"],
	.chss-app input[type="month"],
	.chss-app input[type="number"],
	.chss-app select,
	.chss-app textarea {
		font-size: 16px;
		min-height: 46px;
	}

	.chss-app .chss-table th,
	.chss-app .chss-table td,
	.chss-app .chss-week-table th,
	.chss-app .chss-week-table td,
	.chss-app .chss-report-table th,
	.chss-app .chss-report-table td {
		padding: 10px;
		font-size: 13px;
	}

	.chss-app .chss-day-grid {
		grid-template-columns: repeat(7, 84vw);
	}

	.chss-app .chss-day-card {
		min-width: 84vw;
	}
}

/* v0.20.4 Position Colors
   Scoped only under .chss-app.
   Purpose: easier reading for non-technical users.
*/

.chss-app {
	--chss-pos-bar-bg: #e6f7f0;
	--chss-pos-bar-text: #1f7a63;
	--chss-pos-bar-border: #94D2BD;

	--chss-pos-service-bg: #eaf3ff;
	--chss-pos-service-text: #2563a8;
	--chss-pos-service-border: #93c5fd;

	--chss-pos-dj-bg: #f3e8ff;
	--chss-pos-dj-text: #7e22ce;
	--chss-pos-dj-border: #c084fc;

	--chss-pos-kitchen-bg: #fff2df;
	--chss-pos-kitchen-text: #b45309;
	--chss-pos-kitchen-border: #fdba74;

	--chss-pos-marka-bg: #fff9db;
	--chss-pos-marka-text: #977000;
	--chss-pos-marka-border: #facc15;

	--chss-pos-host-bg: #ffeaf2;
	--chss-pos-host-text: #be185d;
	--chss-pos-host-border: #f9a8d4;

	--chss-pos-manager-bg: #eef2f7;
	--chss-pos-manager-text: #334155;
	--chss-pos-manager-border: #94a3b8;

	--chss-pos-other-bg: #f4f4f5;
	--chss-pos-other-text: #52525b;
	--chss-pos-other-border: #d4d4d8;
}

.chss-app .chss-position-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 4px 9px;
	border: 1px solid var(--chss-pos-other-border);
	border-radius: 999px;
	background: var(--chss-pos-other-bg);
	color: var(--chss-pos-other-text);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.chss-app .chss-position-badge::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 999px;
	background: currentColor;
	opacity: .85;
}

.chss-app .chss-position-badge.chss-position-bar {
	background: var(--chss-pos-bar-bg);
	color: var(--chss-pos-bar-text);
	border-color: var(--chss-pos-bar-border);
}

.chss-app .chss-position-badge.chss-position-service {
	background: var(--chss-pos-service-bg);
	color: var(--chss-pos-service-text);
	border-color: var(--chss-pos-service-border);
}

.chss-app .chss-position-badge.chss-position-dj {
	background: var(--chss-pos-dj-bg);
	color: var(--chss-pos-dj-text);
	border-color: var(--chss-pos-dj-border);
}

.chss-app .chss-position-badge.chss-position-kitchen {
	background: var(--chss-pos-kitchen-bg);
	color: var(--chss-pos-kitchen-text);
	border-color: var(--chss-pos-kitchen-border);
}

.chss-app .chss-position-badge.chss-position-marka {
	background: var(--chss-pos-marka-bg);
	color: var(--chss-pos-marka-text);
	border-color: var(--chss-pos-marka-border);
}

.chss-app .chss-position-badge.chss-position-host {
	background: var(--chss-pos-host-bg);
	color: var(--chss-pos-host-text);
	border-color: var(--chss-pos-host-border);
}

.chss-app .chss-position-badge.chss-position-manager {
	background: var(--chss-pos-manager-bg);
	color: var(--chss-pos-manager-text);
	border-color: var(--chss-pos-manager-border);
}

/* Give shift cards a subtle position stripe when class exists or inherited by badge */
.chss-app .chss-day-shift:has(.chss-position-bar) {
	border-left-color: var(--chss-pos-bar-border);
}

.chss-app .chss-day-shift:has(.chss-position-service) {
	border-left-color: var(--chss-pos-service-border);
}

.chss-app .chss-day-shift:has(.chss-position-dj) {
	border-left-color: var(--chss-pos-dj-border);
}

.chss-app .chss-day-shift:has(.chss-position-kitchen) {
	border-left-color: var(--chss-pos-kitchen-border);
}

.chss-app .chss-day-shift:has(.chss-position-marka) {
	border-left-color: var(--chss-pos-marka-border);
}

.chss-app .chss-day-shift:has(.chss-position-host) {
	border-left-color: var(--chss-pos-host-border);
}

.chss-app .chss-day-shift:has(.chss-position-manager) {
	border-left-color: var(--chss-pos-manager-border);
}

/* Position legend for settings/cards if position pills already exist */
.chss-app .chss-position-pills .chss-position-pill {
	background: #ffffff;
	border-color: var(--chss-line);
	color: var(--chss-text);
}

/* Simpler scan behavior for weekly cells */
.chss-app .chss-week-cell .chss-position-badge,
.chss-app .chss-day-shift .chss-position-badge {
	margin-top: 4px;
}

/* Better readable shift meta */
.chss-app .chss-day-shift strong,
.chss-app .chss-week-cell strong {
	font-weight: 850;
	color: var(--chss-heading);
}

.chss-app .chss-day-shift time,
.chss-app .chss-week-cell time {
	font-weight: 800;
}


/* v0.20.4.2 Schedule Home Layout Fix
   Scoped only under .chss-app.
   Fixes schedule page overflow and restores visible logout.
*/

.chss-app {
	max-width: 100%;
	overflow-x: hidden;
}

.chss-app .chss-dashboard,
.chss-app .chss-dashboard-modern {
	width: 100%;
	max-width: min(1180px, calc(100vw - 40px));
	overflow-x: hidden;
}

.chss-app .chss-hero {
	width: 100%;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr) auto;
}

.chss-app .chss-hero > div,
.chss-app .chss-panel,
.chss-app .chss-subpanel,
.chss-app .chss-day-overview,
.chss-app .chss-table-wrap {
	min-width: 0;
}

.chss-app .chss-hero form {
	white-space: nowrap;
}

.chss-app .chss-tabs {
	width: 100%;
	min-width: 0;
	justify-content: flex-start;
}

.chss-app .chss-tabs-logout {
	display: flex;
	justify-content: flex-end;
	margin-top: -8px;
	margin-bottom: 4px;
}

.chss-app .chss-tabs-logout button {
	min-height: 34px;
	padding-inline: 12px;
}

.chss-app .chss-week-tools {
	display: grid;
	gap: 12px;
	padding: 14px;
	margin-bottom: 14px;
	border: 1px solid #e7eaf0;
	border-radius: 14px;
	background: #fbfbff;
	overflow: hidden;
}

.chss-app .chss-week-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.chss-app .chss-week-actions form {
	margin: 0;
}

.chss-app .chss-week-actions .chss-button,
.chss-app .chss-week-actions button,
.chss-app .chss-week-actions .chss-small-link {
	width: auto;
	white-space: nowrap;
}

.chss-app .chss-panel-header .chss-row-actions {
	justify-content: flex-end;
}

.chss-app .chss-panel-header .chss-row-actions .chss-small-link {
	white-space: nowrap;
}

.chss-app .chss-day-overview-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	align-items: start;
}

.chss-app .chss-day-overview-header .chss-muted {
	max-width: 720px;
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}

.chss-app .chss-day-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(130px, 1fr));
	gap: 10px;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.chss-app .chss-day-card {
	min-width: 0;
	width: 100%;
}

.chss-app .chss-day-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
}

.chss-app .chss-day-card-header strong,
.chss-app .chss-day-card-header span {
	white-space: nowrap;
}

.chss-app .chss-day-section {
	padding: 10px;
}

.chss-app .chss-day-section h4 {
	margin: 0 0 8px;
}

.chss-app .chss-day-shift {
	min-width: 0;
	overflow-wrap: anywhere;
}

.chss-app .chss-day-shift strong,
.chss-app .chss-day-shift span,
.chss-app .chss-day-shift time {
	max-width: 100%;
}

@media (max-width: 480px) {
	.chss-app .chss-hero {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.chss-app .chss-hero form {
		justify-self: start;
	}

	.chss-app .chss-tabs-logout {
		justify-content: flex-start;
		margin-top: 0;
	}

	.chss-app .chss-panel-header .chss-row-actions {
		justify-content: flex-start;
	}

	.chss-app .chss-day-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.chss-app .chss-dashboard,
	.chss-app .chss-dashboard-modern {
		max-width: 100%;
	}

	.chss-app .chss-week-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.chss-app .chss-week-actions .chss-button,
	.chss-app .chss-week-actions button,
	.chss-app .chss-week-actions .chss-small-link,
	.chss-app .chss-tabs-logout button {
		width: 100%;
	}

	.chss-app .chss-day-grid {
		grid-template-columns: 1fr;
	}

	.chss-app .chss-day-card {
		min-width: 0;
	}
}


/* v0.20.4.3 Weekly First Schedule Fix
   Scoped only under .chss-app.
   Keeps one logout button and makes full weekly schedule the primary view.
*/

.chss-app .chss-tabs-logout {
	display: none !important;
}

/* Make the schedule tab feel like a weekly planning screen */
.chss-app .chss-panel-featured {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Weekly table should be the important part */
.chss-app .chss-weekly-primary-table {
	order: 10;
	width: 100%;
	margin-top: 0;
	border-radius: 16px;
	overflow-x: auto;
	background: #ffffff;
}

/* Day overview becomes secondary, below the weekly schedule */
.chss-app .chss-schedule-secondary {
	order: 20;
	margin-top: 4px;
	background: #ffffff;
	box-shadow: none;
}

.chss-app .chss-schedule-secondary .chss-day-overview-header {
	padding-bottom: 10px;
	margin-bottom: 12px;
}

.chss-app .chss-schedule-secondary .chss-eyebrow {
	color: #6b7280;
}

.chss-app .chss-schedule-secondary h3 {
	font-size: 18px;
}

.chss-app .chss-schedule-secondary .chss-muted {
	font-size: 12px;
}

/* Make week matrix easier to scan */
.chss-app .chss-week-table {
	min-width: 920px;
}

.chss-app .chss-week-table th:first-child,
.chss-app .chss-week-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 4;
	background: #ffffff;
	font-weight: 850;
}

.chss-app .chss-week-table th:first-child {
	background: #fbfbff;
	z-index: 5;
}

.chss-app .chss-week-table th {
	text-align: left;
}

.chss-app .chss-week-table td {
	min-width: 118px;
}

.chss-app .chss-week-cell {
	display: grid;
	gap: 6px;
}

.chss-app .chss-week-cell details,
.chss-app .chss-week-cell .chss-shift-card {
	border-radius: 11px;
}

/* Week controls stay compact and clear */
.chss-app .chss-week-tools {
	order: 1;
}

.chss-app .chss-day-overview {
	overflow: hidden;
}

/* On smaller screens, weekly schedule scrolls horizontally instead of breaking layout */
@media (max-width: 480px) {
	.chss-app .chss-weekly-primary-table {
		overflow-x: auto;
	}

	.chss-app .chss-week-table {
		min-width: 860px;
	}
}

@media (max-width: 480px) {
	.chss-app .chss-week-table {
		min-width: 780px;
	}

	.chss-app .chss-week-table th,
	.chss-app .chss-week-table td {
		padding: 9px;
	}

	.chss-app .chss-schedule-secondary h3 {
		font-size: 16px;
	}
}


/* v0.20.4.4 Real Weekly First Template Fix
   The weekly table is now physically before the day preview.
*/

.chss-app .chss-week-main-title {
	margin: 4px 0 10px;
}

.chss-app .chss-week-main-title h3 {
	margin: 0;
	color: var(--chss-heading);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.025em;
}

.chss-app .chss-week-wrap.chss-weekly-primary-table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 18px;
	border: 1px solid var(--chss-line);
	border-radius: 16px;
	background: #ffffff;
	overflow-x: auto;
	box-shadow: none;
}

.chss-app .chss-week-wrap.chss-weekly-primary-table .chss-week-table {
	margin: 0;
}

.chss-app .chss-schedule-secondary {
	margin-top: 8px;
	opacity: .98;
}

.chss-app .chss-schedule-secondary .chss-day-grid {
	grid-template-columns: repeat(7, minmax(120px, 1fr));
}

@media (max-width: 480px) {
	.chss-app .chss-schedule-secondary .chss-day-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.chss-app .chss-schedule-secondary .chss-day-grid {
		grid-template-columns: 1fr;
	}
}


/* v0.20.5.5 Server-side Tab Isolation
   No visual redesign. Main fix is PHP return after schedule tab.
*/


/* v0.20.5.6 Restore Week Navigation */


.chss-app .chss-week-nav .chss-small-link {
	display: inline-flex;
	visibility: visible;
	opacity: 1;
}

@media (max-width: 480px) {
	.chss-app .chss-week-nav {
		justify-content: flex-start;
	}

	.chss-app .chss-week-nav .chss-small-link {
		width: 100%;
	}
}


/* v0.20.5.7 Single Week Navigation
   Exactly one previous/current/next nav group in Schedule.
*/
.chss-app .chss-week-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}


/* v0.20.5.8 Schedule Print Layout
   Normal screen is unchanged.
   Print mode is activated only when the plugin print button adds body.chss-printing-schedule.
*/

.chss-app .chss-print-only {
	display: none;
}

@media print {
	@page {
		size: A4 landscape;
		margin: 8mm;
	}

	html,
	body {
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}

	body.chss-printing-schedule {
		background: #ffffff !important;
	}

	body.chss-printing-schedule #wpadminbar,
	body.chss-printing-schedule .chss-tabs,
	body.chss-printing-schedule .chss-hero,
	body.chss-printing-schedule .chss-summary-grid,
	body.chss-printing-schedule .chss-no-print,
	body.chss-printing-schedule .chss-week-tools,
	body.chss-printing-schedule .chss-schedule-daily,
	body.chss-printing-schedule .chss-day-overview,
	body.chss-printing-schedule .chss-schedule-section-title-daily,
	body.chss-printing-schedule .chss-optional-day-view,
	body.chss-printing-schedule .chss-tabs-logout,
	body.chss-printing-schedule .chss-app .chss-dashboard-modern > .chss-mobile-daily-schedule,
	body.chss-printing-schedule footer,
	body > .chss-mobile-nav-footer {
		display: none !important;
	}

	body.chss-printing-schedule * {
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body.chss-printing-schedule .chss-app {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		overflow: visible !important;
		color: #000000 !important;
	}

	body.chss-printing-schedule .chss-dashboard,
	body.chss-printing-schedule .chss-dashboard-modern {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	body.chss-printing-schedule .chss-panel,
	body.chss-printing-schedule .chss-panel-featured,
	body.chss-printing-schedule .chss-print-area {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: #ffffff !important;
		overflow: visible !important;
	}

	body.chss-printing-schedule .chss-desktop-schedule.chss-print-area {
		visibility: visible !important;
		position: static !important;
		inset: auto !important;
		height: auto !important;
	}

	body.chss-printing-schedule .chss-panel-header {
		display: block !important;
		margin: 0 0 6mm !important;
		padding: 0 !important;
		border: 0 !important;
	}

	body.chss-printing-schedule .chss-panel-header .chss-row-actions,
	body.chss-printing-schedule .chss-panel-header .chss-muted {
		display: none !important;
	}

	body.chss-printing-schedule .chss-panel-header .chss-eyebrow {
		display: block !important;
		margin: 0 0 1mm !important;
		color: #000000 !important;
		font-size: 8pt !important;
		letter-spacing: .08em !important;
	}

	body.chss-printing-schedule .chss-panel-header h2 {
		margin: 0 !important;
		color: #000000 !important;
		font-size: 16pt !important;
		line-height: 1.2 !important;
	}

	body.chss-printing-schedule .chss-print-only {
		display: block !important;
	}

	body.chss-printing-schedule .chss-print-header {
		margin: 0 0 5mm !important;
		padding: 0 0 3mm !important;
		border-bottom: 1px solid #000000 !important;
	}

	body.chss-printing-schedule .chss-print-header h1 {
		margin: 0 0 1mm !important;
		color: #000000 !important;
		font-size: 18pt !important;
		line-height: 1.15 !important;
	}

	body.chss-printing-schedule .chss-print-header p {
		margin: 0 !important;
		color: #000000 !important;
		font-size: 11pt !important;
	}

	body.chss-printing-schedule .chss-schedule-section-title {
		display: none !important;
	}

	body.chss-printing-schedule .chss-week-wrap,
	body.chss-printing-schedule .chss-schedule-weekly,
	body.chss-printing-schedule .chss-weekly-primary-table {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: #ffffff !important;
		overflow: visible !important;
	}

	body.chss-printing-schedule .chss-week-table {
		width: 100% !important;
		min-width: 0 !important;
		table-layout: fixed !important;
		border-collapse: collapse !important;
		border-spacing: 0 !important;
		background: #ffffff !important;
		color: #000000 !important;
		page-break-inside: auto !important;
	}

	body.chss-printing-schedule .chss-week-table thead {
		display: table-header-group !important;
	}

	body.chss-printing-schedule .chss-week-table tr {
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	body.chss-printing-schedule .chss-week-table th,
	body.chss-printing-schedule .chss-week-table td {
		position: static !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 3mm 2mm !important;
		border: 1px solid #cfd6df !important;
		background: #ffffff !important;
		color: #000000 !important;
		vertical-align: top !important;
		font-size: 7.5pt !important;
		line-height: 1.25 !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}

	body.chss-printing-schedule .chss-week-table th:first-child,
	body.chss-printing-schedule .chss-week-table td:first-child,
	body.chss-printing-schedule .chss-week-table .chss-week-employee {
		width: 16% !important;
		min-width: 0 !important;
		background: #f7f7f7 !important;
		font-weight: 700 !important;
	}

	body.chss-printing-schedule .chss-week-table th:not(:first-child),
	body.chss-printing-schedule .chss-week-table td:not(:first-child) {
		width: 10.5% !important;
	}

	body.chss-printing-schedule .chss-week-table th:last-child,
	body.chss-printing-schedule .chss-week-table td:last-child {
		width: 8% !important;
	}

	body.chss-printing-schedule .chss-week-employee span {
		display: block !important;
		margin-top: 1mm !important;
		color: #333333 !important;
		font-size: 6.8pt !important;
		font-weight: 400 !important;
	}

	body.chss-printing-schedule .chss-week-shift {
		display: block !important;
		margin: 0 0 1.5mm !important;
		padding: 1.5mm !important;
		border: 1px solid #d8dee8 !important;
		border-left: 2.5mm solid #94D2BD !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		color: #000000 !important;
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	body.chss-printing-schedule .chss-week-shift strong,
	body.chss-printing-schedule .chss-week-shift span,
	body.chss-printing-schedule .chss-week-shift em {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: #000000 !important;
		font-size: 7pt !important;
		line-height: 1.25 !important;
		font-style: normal !important;
	}

	body.chss-printing-schedule .chss-week-shift strong {
		font-weight: 800 !important;
	}

	body.chss-printing-schedule .chss-week-shift em {
		color: #555555 !important;
		font-size: 6.5pt !important;
	}

	body.chss-printing-schedule .chss-off {
		display: inline !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: #777777 !important;
		font-size: 7pt !important;
		font-weight: 400 !important;
	}

	body.chss-printing-schedule .chss-position-badge {
		display: inline !important;
		min-height: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: #000000 !important;
		font-size: 7pt !important;
		font-weight: 700 !important;
	}

	body.chss-printing-schedule .chss-position-badge::before {
		display: none !important;
	}
}


/* v0.20.5.9 Print Button Fix
   No layout changes. The print button now has inline print action plus JS fallback.
*/


/* v0.20.9 - clearer staff workflow */
.chss-app .chss-staff-create { margin-bottom: 22px; }
.chss-app .chss-staff-create > summary { cursor: pointer; font-weight: 900; color: var(--chss-ink); list-style: none; }
.chss-app .chss-staff-create > summary::-webkit-details-marker { display: none; }
.chss-app .chss-staff-create[open] > summary { margin-bottom: 8px; }
.chss-app .chss-staff-list-heading { display: flex; justify-content: space-between; align-items: end; margin: 4px 0 14px; }
.chss-app .chss-staff-list-heading h3 { margin: 0 0 4px; }
.chss-app .chss-staff-list-heading p { margin: 0; }


/* v0.20.10 - compact settings workspace */
.chss-app .chss-settings-panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 16px;
}

.chss-app .chss-settings-panel > .chss-subpanel,
.chss-app .chss-settings-panel > .chss-compact-disclosure {
	margin-top: 0;
}

.chss-app .chss-settings-panel .chss-subpanel {
	padding: 15px;
	border-radius: 18px;
}

.chss-app .chss-settings-panel .chss-subpanel h3 {
	margin-bottom: 4px;
	font-size: 18px;
}

.chss-app .chss-settings-panel .chss-muted {
	margin-top: 4px;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.4;
}

.chss-app .chss-settings-templates,
.chss-app .chss-settings-rules,
.chss-app .chss-email-diagnostics {
	grid-column: 1 / -1;
}

.chss-app .chss-settings-panel .chss-period-preview {
	gap: 8px;
}

.chss-app .chss-settings-panel .chss-period-preview > div {
	padding: 12px;
	min-height: auto;
}

.chss-app .chss-settings-panel .chss-position-pills {
	gap: 7px;
}

.chss-app .chss-settings-panel .chss-position-pill {
	padding: 7px 11px;
}

.chss-app .chss-settings-panel .chss-form-grid {
	gap: 10px 12px;
}

.chss-app .chss-settings-panel label {
	gap: 5px;
	font-size: 13px;
}

.chss-app .chss-settings-panel input,
.chss-app .chss-settings-panel select,
.chss-app .chss-settings-panel textarea {
	min-height: 42px;
	padding: 9px 12px;
}

.chss-app .chss-compact-disclosure {
	border: 1px solid var(--chss-line);
	border-radius: 16px;
	background: rgba(255,255,255,.9);
	overflow: hidden;
}

.chss-app .chss-compact-disclosure > summary {
	cursor: pointer;
	list-style: none;
	padding: 13px 15px;
	font-weight: 900;
	color: var(--chss-heading);
	background: rgba(148,210,189,.08);
}

.chss-app .chss-compact-disclosure > summary::-webkit-details-marker {
	display: none;
}

.chss-app .chss-compact-disclosure > summary::after {
	content: '＋';
	float: right;
	color: var(--chss-mint-deep);
}

.chss-app .chss-compact-disclosure[open] > summary::after {
	content: '−';
}

.chss-app .chss-template-create-disclosure {
	margin: 10px 0 12px;
}

.chss-app .chss-template-create-disclosure .chss-template-create-form {
	padding: 14px;
	margin: 0;
}

.chss-app .chss-email-diagnostics > .chss-panel-header,
.chss-app .chss-email-diagnostics > .chss-subpanel {
	margin: 12px;
}

.chss-app .chss-email-diagnostics > .chss-panel-header {
	padding: 0 0 12px;
}

.chss-app .chss-email-diagnostics .chss-table th,
.chss-app .chss-email-diagnostics .chss-table td {
	padding: 9px 10px;
	font-size: 12px;
}

@media (max-width: 480px) {
	.chss-app .chss-settings-panel {
		grid-template-columns: 1fr;
		padding: 12px;
	}

	.chss-app .chss-settings-templates,
	.chss-app .chss-settings-rules,
	.chss-app .chss-email-diagnostics {
		grid-column: auto;
	}
}


/* v0.21.0 - Mobile-first header and navigation foundation */
.chss-app .chss-app-header-copy {
	min-width: 0;
}

.chss-app .chss-header-logout-icon {
	display: none;
}

@media (max-width: 480px) {
	.chss-app {
		padding: 8px 8px calc(88px + env(safe-area-inset-bottom));
	}

	.chss-app .chss-dashboard-modern {
		gap: 10px;
	}

	.chss-app .chss-app-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		min-height: 66px;
		padding: 12px 14px;
		border: 1px solid var(--chss-border);
		border-radius: 18px;
		background: rgba(255,255,255,.96);
		color: var(--chss-text);
		box-shadow: 0 10px 28px rgba(20,35,70,.08);
		overflow: visible;
	}

	.chss-app .chss-app-header::before,
	.chss-app .chss-app-header::after {
		display: none !important;
	}

	.chss-app .chss-app-header .chss-eyebrow,
	.chss-app .chss-app-header .chss-muted {
		display: none;
	}

	.chss-app .chss-app-header h1 {
		margin: 0;
		font-size: 24px;
		line-height: 1.1;
		letter-spacing: -.035em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--chss-text);
	}

	.chss-app .chss-app-header form {
		justify-self: end;
		margin: 0;
	}

	.chss-app .chss-app-header .chss-header-logout {
		width: 42px;
		min-width: 42px;
		height: 42px;
		min-height: 42px;
		padding: 0;
		border: 1px solid var(--chss-border);
		border-radius: 14px;
		background: #fff;
		color: var(--chss-text);
		box-shadow: none;
	}

	.chss-app .chss-header-logout-icon {
		display: inline;
		font-size: 20px;
		font-weight: 900;
		line-height: 1;
	}

	.chss-app .chss-header-logout-text {
		display: none;
	}

	.chss-app .chss-mobile-nav {
		position: fixed;
		z-index: 9998;
		left: 8px;
		right: 8px;
		bottom: max(8px, env(safe-area-inset-bottom));
		display: flex;
		gap: 4px;
		width: auto;
		margin: 0;
		padding: 7px;
		border: 1px solid rgba(216,224,235,.95);
		border-radius: 20px;
		background: rgba(255,255,255,.96);
		box-shadow: 0 14px 38px rgba(15,23,42,.18);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.chss-app .chss-mobile-nav::-webkit-scrollbar {
		display: none;
	}

	.chss-app .chss-mobile-nav .chss-tab {
		flex: 0 0 82px;
		min-width: 82px;
		min-height: 58px;
		padding: 8px 6px;
		border-radius: 15px;
		font-size: 11px;
		line-height: 1.2;
		text-align: center;
		white-space: normal;
		color: #5f6b7d;
		box-shadow: none;
	}

	.chss-app .chss-mobile-nav .chss-tab.is-active {
		background: #eaf2ff;
		color: #155bd7;
		box-shadow: none;
	}

	.chss-app .chss-mobile-nav .chss-tab:focus-visible {
		outline: 3px solid rgba(37,99,235,.25);
		outline-offset: 1px;
	}
}

@media (max-width: 390px) {
	.chss-app .chss-app-header h1 {
		font-size: 22px;
	}

	.chss-app .chss-mobile-nav .chss-tab {
		flex-basis: 78px;
		min-width: 78px;
	}
}

/* v0.21.1 - Mobile navigation hotfix
   Keep navigation in normal document flow. Some WordPress themes transform
   the shortcode wrapper, which makes position:fixed anchor inside that wrapper. */
@media (max-width: 480px) {
	.chss-app {
		padding: 8px !important;
	}

	.chss-app .chss-mobile-nav {
		position: static !important;
		inset: auto !important;
		z-index: auto !important;
		display: flex !important;
		width: 100% !important;
		margin: 0 0 10px !important;
		padding: 6px !important;
		border-radius: 16px !important;
		box-shadow: 0 8px 22px rgba(15,23,42,.08) !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}

	.chss-app .chss-mobile-nav .chss-tab {
		flex: 0 0 auto !important;
		min-width: max-content !important;
		min-height: 44px !important;
		padding: 10px 12px !important;
		white-space: nowrap !important;
		font-size: 12px !important;
	}

	.chss-app .chss-dashboard-modern,
	.chss-app .chss-dashboard {
		min-height: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}
}

/* v0.22 - The single footer controller clones navigation directly under body. */
@media (max-width: 480px) {
	body.chss-has-mobile-footer-nav {
		padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
	}

	.chss-app {
		padding: 8px 8px 20px !important;
	}
}


/* v0.21.3 - Complete mobile footer, user profile menu, cleaner dashboard. */
.chss-app .chss-app-header {
	position: relative;
}

.chss-app .chss-profile {
	position: relative;
	justify-self: end;
	z-index: 50;
}

.chss-app .chss-profile-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--chss-border);
	border-radius: 50%;
	background: #fff;
	color: var(--chss-text);
	cursor: pointer;
	box-shadow: 0 5px 16px rgba(15,23,42,.08);
}

.chss-app .chss-profile-icon { font-size: 21px; line-height: 1; }
.chss-app .chss-profile-initial { display: none; font-weight: 900; }

.chss-app .chss-profile-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: min(250px, calc(100vw - 32px));
	padding: 10px;
	border: 1px solid var(--chss-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(15,23,42,.18);
}

.chss-app .chss-profile-menu[hidden] { display: none !important; }
.chss-app .chss-profile-summary { display: grid; gap: 3px; padding: 7px 8px 11px; border-bottom: 1px solid var(--chss-border); }
.chss-app .chss-profile-summary strong { font-size: 14px; }
.chss-app .chss-profile-summary span { color: var(--chss-muted); font-size: 12px; }
.chss-app .chss-profile-menu form { margin: 8px 0 0; }
.chss-app .chss-profile-logout {
	width: 100%;
	min-height: 42px;
	padding: 9px 12px;
	border: 0;
	border-radius: 11px;
	background: #fff1f2;
	color: #be123c;
	font-weight: 900;
	text-align: left;
	cursor: pointer;
}

@media (max-width: 480px) {
	.chss-app .chss-app-header {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		align-items: center !important;
		gap: 10px !important;
	}

	/* The complete navigation is cloned to body; no source tab is left in the header. */
	.chss-app > .chss-mobile-nav { display: none !important; }

	.chss-app .chss-profile-button {
		width: 42px;
		height: 42px;
		box-shadow: none;
	}

	.chss-app .chss-profile-menu {
		position: fixed;
		top: 66px;
		right: 12px;
		z-index: 2147483001;
	}
}

/* v0.21.5 - Reliable mobile footer rendered as a body-level clone. */
.chss-mobile-nav-footer {
	display: none;
}

@media (max-width: 480px) {
	body.chss-has-mobile-footer-nav {
		padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
	}

	.chss-app .chss-mobile-nav-source,
	.chss-mobile-nav-source {
		display: none !important;
	}

	body > .chss-mobile-nav-footer {
		display: flex !important;
		position: fixed !important;
		z-index: 2147483640 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		max-width: none !important;
		min-height: 68px !important;
		margin: 0 !important;
		padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
		box-sizing: border-box !important;
		align-items: center !important;
		gap: 4px !important;
		border: 0 !important;
		border-top: 1px solid rgba(148,163,184,.30) !important;
		border-radius: 0 !important;
		background: rgba(255,255,255,.98) !important;
		box-shadow: 0 -8px 24px rgba(15,23,42,.14) !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
		-webkit-overflow-scrolling: touch !important;
	}

	body > .chss-mobile-nav-footer::-webkit-scrollbar {
		display: none !important;
	}

	body > .chss-mobile-nav-footer .chss-tab {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 1 0 78px !important;
		min-width: 78px !important;
		min-height: 52px !important;
		padding: 7px 5px !important;
		border-radius: 14px !important;
		font-size: 11px !important;
		line-height: 1.15 !important;
		font-weight: 900 !important;
		text-align: center !important;
		white-space: normal !important;
		text-decoration: none !important;
		color: #5f6b7d !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active {
		color: #155bd7 !important;
		background: #eaf2ff !important;
	}
}

/* v0.21.6 - Mobile daily schedule visual foundation. */
.chss-mobile-daily-schedule { display: none; }
@media (max-width: 480px) {
  .chss-app .chss-dashboard-modern > .chss-desktop-schedule {
    display: none !important;
  }
  .chss-mobile-day-switcher {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    min-height: 52px;
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    background: #fff;
  }
  .chss-mobile-day-switcher a {
    display: grid;
    place-items: center;
    min-height: 50px;
    color: #101828;
    font-size: 30px;
    text-decoration: none;
  }
  .chss-mobile-day-switcher strong { text-align: center; font-size: 15px; }
  .chss-mobile-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin: 12px 0 16px;
  }
  .chss-mobile-week-strip a {
    display: grid;
    gap: 3px;
    place-items: center;
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #475467;
    text-decoration: none;
    font-size: 11px;
  }
  .chss-mobile-week-strip a strong { font-size: 16px; }
  .chss-mobile-week-strip a.is-active {
    border-color: #2878f0;
    background: #edf5ff;
    color: #1769da;
  }
  .chss-mobile-employee-list { display: grid; gap: 9px; }
  .chss-mobile-employee-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 10px;
    align-items: center;
    min-height: 78px;
    padding: 10px;
    border: 1px solid #e1e6ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(16, 24, 40, .04);
  }
  .chss-mobile-employee-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .chss-mobile-employee-main > div:last-child { min-width: 0; }
  .chss-mobile-employee-main strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chss-mobile-employee-main span {
    display: inline-flex;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475467;
    font-size: 11px;
  }
  .chss-mobile-avatar {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #e8f1ff;
    color: #1769da;
    font-weight: 800;
  }
  .chss-mobile-shift-status {
    display: grid;
    align-content: center;
    min-height: 56px;
    padding: 8px;
    border-radius: 11px;
    text-align: center;
  }
  .chss-mobile-shift-status strong { font-size: 13px; line-height: 1.25; }
  .chss-mobile-shift-status small { margin-top: 3px; font-size: 10px; }
  .chss-mobile-shift-status.has-shift { background: #edf5ff; color: #1769da; }
  .chss-mobile-shift-status.is-time-off { background: #fff0f1; color: #d92d20; }
  .chss-mobile-shift-status.is-empty { background: #f7f8fa; color: #667085; }
  .chss-mobile-add-shift {
    position: sticky;
    bottom: 78px;
    z-index: 5;
    width: 100%;
    min-height: 54px;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    background: #1769e8;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(23, 105, 232, .25);
  }
}

/* v0.21.19 - Mobile Shifts screen visual match and functional filters. */
.chss-mobile-shifts {
  display: none;
}

@media (max-width: 480px) {
  .chss-mobile-shifts-week {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    min-height: 68px;
    padding: 8px 10px;
    border: 1px solid #e5eaf1;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(25, 43, 76, .08);
  }

  .chss-mobile-shifts-week a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    color: #0a2a67;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
  }

  .chss-mobile-shifts-week a:last-child {
    justify-self: end;
  }

  .chss-mobile-shifts-week a:active {
    background: #f1f6fc;
  }

  .chss-mobile-shifts-week strong {
    overflow: hidden;
    color: #07183d;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.025em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chss-mobile-shifts-search {
    position: relative;
    display: block;
  }

  .chss-mobile-shifts .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .chss-mobile-shifts-search input {
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 13px 16px 13px 50px;
    border: 1px solid #cfd7e3;
    border-radius: 19px;
    outline: 0;
    background: #fff;
    color: #07183d;
    box-shadow: none;
    font: inherit;
    font-size: 16px;
  }

  .chss-mobile-shifts-search input::placeholder {
    color: #8792a5;
    opacity: 1;
  }

  .chss-mobile-shifts-search input:focus {
    border-color: #84bdf9;
    box-shadow: 0 0 0 3px rgba(15, 109, 232, .1);
  }

  .chss-mobile-shifts-search-icon {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 19px;
    width: 20px;
    height: 20px;
    border: 3px solid #7b879a;
    border-radius: 50%;
    pointer-events: none;
  }

  .chss-mobile-shifts-search-icon::after {
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 9px;
    height: 3px;
    border-radius: 2px;
    background: #7b879a;
    content: "";
    transform: rotate(45deg);
    transform-origin: left center;
  }

  .chss-mobile-shifts-filters {
    display: grid;
    grid-template-columns: .78fr 1.28fr .92fr;
    gap: 8px;
  }

  .chss-mobile-shifts-filters button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 9px 7px;
    border: 1px solid #e2e7ee;
    border-radius: 15px;
    background: #fff;
    color: #07183d;
    box-shadow: 0 5px 14px rgba(25, 43, 76, .035);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .chss-mobile-shifts-filters button span {
    display: grid;
    flex: 0 0 25px;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f1f4f8;
    color: #07183d;
    font-size: 13px;
    font-weight: 900;
  }

  .chss-mobile-shifts-filters button.is-active {
    border-color: #b7d8ff;
    background: #edf6ff;
    color: #0f6de8;
    box-shadow: 0 5px 16px rgba(15, 109, 232, .08);
  }

  .chss-mobile-shifts-filters button.is-active span {
    background: #fff;
    color: #0f6de8;
    box-shadow: 0 1px 5px rgba(15, 109, 232, .12);
  }

  .chss-mobile-shifts-list {
    display: grid;
    gap: 10px;
  }

  .chss-mobile-shift-card {
    overflow: hidden;
    border: 1px solid #e4e9f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(25, 43, 76, .075);
  }

  .chss-mobile-shift-card[hidden] {
    display: none !important;
  }

  .chss-mobile-shift-card > summary {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 24px;
    gap: 11px;
    min-height: 126px;
    padding: 14px 13px;
    cursor: pointer;
    list-style: none;
  }

  .chss-mobile-shift-card > summary::-webkit-details-marker {
    display: none;
  }

  .chss-mobile-shift-avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e1f7f2, #d9f7f3);
    color: #086b70;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .06);
    font-size: 18px;
    font-weight: 950;
  }

  .chss-mobile-shift-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .chss-mobile-shift-copy > strong {
    overflow: hidden;
    width: 100%;
    color: #07183d;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chss-mobile-shift-copy time {
    margin-top: 3px;
    color: #7b879a;
    font-size: 13px;
    font-weight: 650;
  }

  .chss-mobile-shift-position {
    display: inline-flex;
    max-width: 100%;
    margin-top: 7px;
    padding: 5px 10px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf5ff;
    color: #24569a;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chss-mobile-shift-time {
    position: relative;
    margin-top: 10px;
    padding-left: 25px;
    color: #0b214d;
    font-size: 15px;
    font-weight: 750;
    white-space: nowrap;
  }

  .chss-mobile-shift-time::before {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 16px;
    height: 16px;
    border: 2px solid #6f7d90;
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
  }

  .chss-mobile-shift-time::after {
    position: absolute;
    top: 50%;
    left: 9px;
    width: 5px;
    height: 5px;
    border-bottom: 2px solid #6f7d90;
    border-left: 2px solid #6f7d90;
    content: "";
    transform: translate(-1px, -5px);
  }

  .chss-mobile-shift-state {
    position: absolute;
    right: 38px;
    bottom: 14px;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 850;
    text-transform: none;
    white-space: nowrap;
  }

  .chss-mobile-shift-state.chss-pill-published {
    background: #e8f8e9;
    color: #17852c;
  }

  .chss-mobile-shift-state.chss-pill-draft {
    background: #f0f1f4;
    color: #42526b;
  }

  .chss-mobile-shift-state.chss-pill-cancelled {
    background: #fff0f1;
    color: #c9343d;
  }

  .chss-mobile-shift-chevron {
    align-self: start;
    margin-top: 22px;
    color: #0a2a67;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    transition: transform .18s ease;
  }

  .chss-mobile-shift-card[open] .chss-mobile-shift-chevron {
    transform: rotate(90deg);
  }

  .chss-mobile-shift-editor {
    padding: 14px;
    border-top: 1px solid #e9edf3;
    background: #fbfdff;
  }

  .chss-mobile-shift-editor .chss-form-grid,
  .chss-mobile-new-shift-form .chss-form-grid {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .chss-mobile-shift-editor .chss-edit-actions {
    margin-top: 12px;
  }

  .chss-mobile-shifts-empty {
    margin: 4px 0;
    padding: 28px 18px;
    border: 1px dashed #cfd7e3;
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    color: #667085;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
  }

  .chss-mobile-new-shift {
    overflow: hidden;
    border: 0;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(21, 184, 170, .16);
  }

  .chss-mobile-new-shift > summary {
    display: grid;
    place-items: center;
    min-height: 62px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: 19px;
    background: linear-gradient(100deg, #17bbb7 0%, #37d7bd 100%);
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.02em;
  }

  .chss-mobile-new-shift > summary::-webkit-details-marker {
    display: none;
  }

  .chss-mobile-new-shift[open] > summary {
    border-radius: 19px 19px 0 0;
  }

  .chss-mobile-new-shift-form {
    padding: 18px 14px;
    border: 1px solid #d7eee9;
    border-top: 0;
    border-radius: 0 0 19px 19px;
    background: #fff;
  }

  .chss-mobile-new-shift-form h2 {
    margin: 0 0 15px;
    color: #07183d;
    font-size: 20px;
    font-weight: 900;
  }
}

@media (max-width: 390px) {
  .chss-mobile-shifts-filters {
    gap: 6px;
  }

  .chss-mobile-shifts-filters button {
    gap: 4px;
    padding-inline: 5px;
    font-size: 11px;
  }

  .chss-mobile-shifts-filters button span {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .chss-mobile-shift-state {
    right: 35px;
    padding-inline: 8px;
    font-size: 10px;
  }
}

/* v0.21.7 — mobile employee picker */
.chss-mobile-picker-toggle {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.chss-mobile-picker { display: none; }
.chss-mobile-picker-toggle:checked ~ .chss-mobile-picker { display: flex; }

@media (max-width: 480px) {
  .chss-mobile-add-shift {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .chss-mobile-picker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .chss-mobile-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
  }

  .chss-mobile-picker-sheet {
    position: relative;
    width: 100%;
    max-height: min(76vh, 680px);
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -20px 50px rgba(15, 23, 42, .2);
    overflow: hidden;
    animation: chssSheetUp .2s ease-out;
  }

  .chss-mobile-picker-handle {
    width: 42px;
    height: 5px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #cbd5e1;
  }

  .chss-mobile-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .chss-mobile-picker-header h2 {
    margin: 0 0 3px;
    font-size: 21px;
    line-height: 1.2;
  }

  .chss-mobile-picker-header p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
  }

  .chss-mobile-picker-close {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
  }

  .chss-mobile-picker-list {
    max-height: calc(76vh - 135px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 9px;
    padding: 2px 2px 4px;
  }

  .chss-mobile-picker-person {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    cursor: pointer;
  }

  .chss-mobile-picker-person:active,
  .chss-mobile-picker-person.is-selected {
    border-color: #2563eb;
    background: #eff6ff;
  }

  .chss-mobile-picker-person .chss-mobile-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  .chss-mobile-picker-person strong,
  .chss-mobile-picker-person span {
    display: block;
  }

  .chss-mobile-picker-person span {
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
  }

  .chss-mobile-picker-chevron {
    margin-left: auto;
    color: #94a3b8;
    font-size: 24px;
  }

  body.chss-mobile-picker-open { overflow: hidden; }

  @keyframes chssSheetUp {
    from { transform: translateY(20px); opacity: .7; }
    to { transform: translateY(0); opacity: 1; }
  }
}


/* v0.21.10 — picker open/close state fix */
@media (max-width: 480px) {
  .chss-mobile-picker-toggle:not(:checked) ~ .chss-mobile-picker {
    display: none !important;
  }

  .chss-mobile-picker-toggle:checked ~ .chss-mobile-picker {
    display: flex !important;
  }
}


/* v0.21.17 - Verified footer-only visual replacement, built from v0.21.10. */
.chss-tab-mobile-icon,
.chss-tab-mobile-label {
  display: none;
}

@media (max-width: 480px) {
  body.chss-has-mobile-footer-nav {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  body > .chss-mobile-nav-footer {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 82px !important;
    padding: 0 6px calc(6px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid #e5ebf3 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: 0 -8px 26px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  body > .chss-mobile-nav-footer.chss-tabs-employee {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* The five primary app destinations shown in the approved mobile concept. */
  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab[data-chss-tab-key="history"],
  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab[data-chss-tab-key="reports"] {
    display: none !important;
  }

  body > .chss-mobile-nav-footer .chss-tab {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 9px 2px 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #748198 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body > .chss-mobile-nav-footer .chss-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: transparent;
  }

  body > .chss-mobile-nav-footer .chss-tab-desktop-label {
    display: none !important;
  }

  body > .chss-mobile-nav-footer .chss-tab-mobile-icon {
    display: block !important;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  body > .chss-mobile-nav-footer .chss-tab-mobile-label {
    display: block !important;
    max-width: 100%;
    color: currentColor;
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  body > .chss-mobile-nav-footer .chss-tab.is-active {
    color: #1267e8 !important;
    background: transparent !important;
  }

  body > .chss-mobile-nav-footer .chss-tab.is-active::before {
    background: #1267e8;
  }

  body > .chss-mobile-nav-footer .chss-tab:active {
    background: #f5f8fc !important;
  }

  body > .chss-mobile-nav-footer .chss-tab:focus-visible {
    outline: 2px solid #36b9a9 !important;
    outline-offset: -4px !important;
    border-radius: 12px !important;
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="schedule"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHJlY3QgeD0nMycgeT0nNScgd2lkdGg9JzE4JyBoZWlnaHQ9JzE2JyByeD0nMicvPjxwYXRoIGQ9J00xNiAzdjRNOCAzdjRNMyAxMGgxOCcvPjxwYXRoIGQ9J004IDE0aC4wMU0xMiAxNGguMDFNMTYgMTRoLjAxTTggMThoLjAxTTEyIDE4aC4wMScvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHJlY3QgeD0nMycgeT0nNScgd2lkdGg9JzE4JyBoZWlnaHQ9JzE2JyByeD0nMicvPjxwYXRoIGQ9J00xNiAzdjRNOCAzdjRNMyAxMGgxOCcvPjxwYXRoIGQ9J004IDE0aC4wMU0xMiAxNGguMDFNMTYgMTRoLjAxTTggMThoLjAxTTEyIDE4aC4wMScvPjwvc3ZnPg==");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="shifts"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J00xMiA3djVsMyAyJy8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J00xMiA3djVsMyAyJy8+PC9zdmc+");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="staff"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTE2IDIxdi0yYTQgNCAwIDAgMC00LTRINmE0IDQgMCAwIDAtNCA0djInLz48Y2lyY2xlIGN4PSc5JyBjeT0nNycgcj0nNCcvPjxwYXRoIGQ9J00yMiAyMXYtMmE0IDQgMCAwIDAtMy0zLjg3TTE2IDMuMTNhNCA0IDAgMCAxIDAgNy43NScvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTE2IDIxdi0yYTQgNCAwIDAgMC00LTRINmE0IDQgMCAwIDAtNCA0djInLz48Y2lyY2xlIGN4PSc5JyBjeT0nNycgcj0nNCcvPjxwYXRoIGQ9J00yMiAyMXYtMmE0IDQgMCAwIDAtMy0zLjg3TTE2IDMuMTNhNCA0IDAgMCAxIDAgNy43NScvPjwvc3ZnPg==");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="time-off"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J001LjcgNS43bDEyLjYgMTIuNicvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J001LjcgNS43bDEyLjYgMTIuNicvPjwvc3ZnPg==");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="settings"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nMycvPjxwYXRoIGQ9J00xOS40IDE1YTEuNyAxLjcgMCAwIDAgLjM0IDEuODhsLjA2LjA2LTIuMTIgMi4xMi0uMDYtLjA2YTEuNyAxLjcgMCAwIDAtMS44OC0uMzQgMS43IDEuNyAwIDAgMC0xLjAzIDEuNTZWMjAuM2gtM3YtLjA4YTEuNyAxLjcgMCAwIDAtMS4wMy0xLjU2IDEuNyAxLjcgMCAwIDAtMS44OC4zNGwtLjA2LjA2LTIuMTItMi4xMi4wNi0uMDZBMS43IDEuNyAwIDAgMCA3IDE1YTEuNyAxLjcgMCAwIDAtMS41Ni0xLjAzSDUuM3YtM2guMTRBMS43IDEuNyAwIDAgMCA3IDkuOTRhMS43IDEuNyAwIDAgMC0uMzQtMS44OEw2LjYgOGwyLjEyLTIuMTIuMDYuMDZBMS43IDEuNyAwIDAgMCAxMC42NiA2YTEuNyAxLjcgMCAwIDAgMS4wMy0xLjU2VjQuM2gzdi4xNEExLjcgMS43IDAgMCAwIDE1LjcyIDZhMS43IDEuNyAwIDAgMCAxLjg4LS4zNGwuMDYtLjA2IDIuMTIgMi4xMi0uMDYuMDZBMS43IDEuNyAwIDAgMCAxOS4zOCA5LjY2YTEuNyAxLjcgMCAwIDAgMS41NiAxLjAzaC4xNHYzaC0uMTRBMS43IDEuNyAwIDAgMCAxOS40IDE1eicvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nMycvPjxwYXRoIGQ9J00xOS40IDE1YTEuNyAxLjcgMCAwIDAgLjM0IDEuODhsLjA2LjA2LTIuMTIgMi4xMi0uMDYtLjA2YTEuNyAxLjcgMCAwIDAtMS44OC0uMzQgMS43IDEuNyAwIDAgMC0xLjAzIDEuNTZWMjAuM2gtM3YtLjA4YTEuNyAxLjcgMCAwIDAtMS4wMy0xLjU2IDEuNyAxLjcgMCAwIDAtMS44OC4zNGwtLjA2LjA2LTIuMTItMi4xMi4wNi0uMDZBMS43IDEuNyAwIDAgMCA3IDE1YTEuNyAxLjcgMCAwIDAtMS41Ni0xLjAzSDUuM3YtM2guMTRBMS43IDEuNyAwIDAgMCA3IDkuOTRhMS43IDEuNyAwIDAgMC0uMzQtMS44OEw2LjYgOGwyLjEyLTIuMTIuMDYuMDZBMS43IDEuNyAwIDAgMCAxMC42NiA2YTEuNyAxLjcgMCAwIDAgMS4wMy0xLjU2VjQuM2gzdi4xNEExLjcgMS43IDAgMCAwIDE1LjcyIDZhMS43IDEuNyAwIDAgMCAxLjg4LS4zNGwuMDYtLjA2IDIuMTIgMi4xMi0uMDYuMDZBMS43IDEuNyAwIDAgMCAxOS4zOCA5LjY2YTEuNyAxLjcgMCAwIDAgMS41NiAxLjAzaC4xNHYzaC0uMTRBMS43IDEuNyAwIDAgMCAxOS40IDE1eicvPjwvc3ZnPg==");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="history"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTMgMTJhOSA5IDAgMSAwIDMtNi43TDMgOCcvPjxwYXRoIGQ9J00zIDN2NWg1TTEyIDd2NWwzIDInLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTMgMTJhOSA5IDAgMSAwIDMtNi43TDMgOCcvPjxwYXRoIGQ9J00zIDN2NWg1TTEyIDd2NWwzIDInLz48L3N2Zz4=");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="reports"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTQgMTlWOU0xMCAxOVY1TTE2IDE5di03TTIyIDE5SDInLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTQgMTlWOU0xMCAxOVY1TTE2IDE5di03TTIyIDE5SDInLz48L3N2Zz4=");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="my-shifts"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J00xMiA3djVsMyAyJy8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J00xMiA3djVsMyAyJy8+PC9zdmc+");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="my-time-off"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J001LjcgNS43bDEyLjYgMTIuNicvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J001LjcgNS43bDEyLjYgMTIuNicvPjwvc3ZnPg==");
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="requests"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHJlY3QgeD0nMycgeT0nNScgd2lkdGg9JzE4JyBoZWlnaHQ9JzE0JyByeD0nMicvPjxwYXRoIGQ9J00zIDdsOSA2IDktNicvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHJlY3QgeD0nMycgeT0nNScgd2lkdGg9JzE4JyBoZWlnaHQ9JzE0JyByeD0nMicvPjxwYXRoIGQ9J00zIDdsOSA2IDktNicvPjwvc3ZnPg==");
  }
}

/* v0.21.18 - Mobile Program Screen Visual Match.
   UI-only refinement built directly on v0.21.17. No picker, navigation,
   schedule-query or save behaviour is changed. */
@media (max-width: 480px) {
  .chss-app {
    padding: 10px 12px 28px !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f8fc 100%) !important;
  }

  .chss-app .chss-dashboard-modern {
    gap: 14px !important;
  }

  /* Calm app bar matching the approved mobile concept. */
  .chss-app .chss-app-header {
    min-height: 66px !important;
    padding: 9px 2px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid #e7ebf2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chss-app .chss-app-header-copy {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .chss-app .chss-app-header-copy::before {
    content: "";
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background-color: #daf6f0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 23px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
  }

  .chss-app .chss-app-header h1 {
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    color: #081a40 !important;
  }

  .chss-app .chss-profile-button {
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    background: #ccf3ec !important;
    color: #0d746d !important;
    box-shadow: none !important;
  }

  .chss-app .chss-profile-icon {
    font-size: 20px !important;
    filter: saturate(.78);
  }

  .chss-mobile-day-switcher {
    min-height: 66px !important;
    padding: 10px 12px 4px !important;
    border: 1px solid #e5eaf1 !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(25, 43, 76, .08) !important;
  }

  .chss-mobile-day-switcher a {
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #0a2a67 !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 34px !important;
  }

  .chss-mobile-day-switcher strong {
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: -.025em !important;
    color: #07183d !important;
  }

  .chss-mobile-week-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 5px 10px 14px !important;
    border: 1px solid #e5eaf1 !important;
    border-top: 0 !important;
    border-radius: 0 0 22px 22px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(25, 43, 76, .08) !important;
    overflow: visible !important;
  }

  .chss-mobile-week-strip a {
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 8px 2px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #34445f !important;
    box-shadow: none !important;
  }

  .chss-mobile-week-strip a span {
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .chss-mobile-week-strip a strong {
    margin-top: 3px !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    color: #07183d !important;
  }

  .chss-mobile-week-strip a.is-active {
    border-color: #8ec2ff !important;
    background: linear-gradient(180deg, #eff7ff 0%, #e7f1ff 100%) !important;
    color: #0f6de8 !important;
    box-shadow: 0 6px 16px rgba(15, 109, 232, .12) !important;
  }

  .chss-mobile-week-strip a.is-active strong {
    color: #0f6de8 !important;
  }

  .chss-mobile-employee-list {
    gap: 10px !important;
  }

  .chss-mobile-employee-card {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 35%) !important;
    min-height: 80px !important;
    padding: 10px 11px !important;
    border: 1px solid #e4e9f0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(25, 43, 76, .075) !important;
  }

  .chss-mobile-employee-main {
    gap: 11px !important;
  }

  .chss-mobile-avatar {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #e1f7f2, #d9eaff) !important;
    color: #166b70 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .08) !important;
  }

  .chss-mobile-employee-main strong {
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.18 !important;
    color: #07183d !important;
  }

  .chss-mobile-employee-main span {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-top: 5px !important;
    padding: 4px 9px !important;
    border-radius: 8px !important;
    background: #dcf6f1 !important;
    color: #0f766e !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  .chss-mobile-shift-status {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    text-align: center !important;
  }

  .chss-mobile-shift-status strong {
    font-size: 14px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  .chss-mobile-shift-status small {
    display: none !important;
  }

  .chss-mobile-shift-status.has-shift {
    border-color: #cceee8 !important;
    background: linear-gradient(135deg, #eafaf6, #eefbf9) !important;
    color: #0f6f70 !important;
  }

  .chss-mobile-shift-status.is-time-off,
  .chss-mobile-shift-status.is-empty {
    border-color: #e6e9ef !important;
    background: linear-gradient(135deg, #f7f8fa, #f1f3f6) !important;
    color: #34445f !important;
  }

  .chss-mobile-add-shift {
    width: 100% !important;
    min-height: 62px !important;
    margin-top: 2px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: 19px !important;
    background: linear-gradient(100deg, #57d5bd 0%, #19bdb5 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(21, 184, 170, .20) !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }

  .chss-mobile-add-shift:active {
    transform: translateY(1px) !important;
    box-shadow: 0 8px 18px rgba(21, 184, 170, .18) !important;
  }
}

@media (max-width: 390px) {
  .chss-mobile-week-strip {
    gap: 5px !important;
    padding-inline: 8px !important;
  }

  .chss-mobile-week-strip a {
    min-height: 66px !important;
  }

  .chss-mobile-employee-card {
    grid-template-columns: minmax(0, 1fr) 112px !important;
  }

  .chss-mobile-avatar {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
  }

  .chss-mobile-shift-status strong {
    font-size: 13px !important;
  }
}


/* v0.21.21 — approved mobile Time Off screen. */
.chss-mobile-timeoff {
  display: none;
}

@media (max-width: 480px) {
  .chss-mobile-timeoff-summary {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 82px;
    padding: 12px 9px;
    border: 1px solid #e3e8f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(25, 43, 76, .08);
  }

  .chss-mobile-timeoff-summary > span {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px;
    white-space: nowrap;
  }

  .chss-mobile-timeoff-summary > span + span {
    border-left: 1px solid #e5eaf1;
  }

  .chss-mobile-timeoff-summary i {
    position: relative;
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #e1f7f2, #d9f5f3);
    color: #0f6f70;
  }

  .chss-mobile-timeoff-clock::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
  }

  .chss-mobile-timeoff-clock::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 20px;
    width: 6px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }

  .chss-mobile-timeoff-calendar::before {
    content: "";
    width: 19px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 4px;
    box-shadow: inset 0 5px 0 -3px currentColor;
  }

  .chss-mobile-timeoff-calendar::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 14px;
    width: 2px;
    height: 5px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 10px 0 0 currentColor;
  }

  .chss-mobile-timeoff-views {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    border: 1px solid #ced7e5;
    border-radius: 17px;
    background: #fff;
    overflow: hidden;
  }

  .chss-mobile-timeoff-views button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #34445f;
    font-size: 15px;
    font-weight: 850;
  }

  .chss-mobile-timeoff-views button i {
    position: relative;
    width: 18px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 3px;
  }

  .chss-mobile-timeoff-views button i::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
  }

  .chss-mobile-timeoff-views button.is-active {
    background: linear-gradient(180deg, #f1f8ff, #e8f3ff);
    color: #0f6de8;
    box-shadow: inset 0 0 0 1px #a8d0ff;
  }

  .chss-mobile-timeoff-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .chss-mobile-timeoff-filters button {
    display: inline-flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 5px;
    border: 1px solid #e0e5ed;
    border-radius: 14px;
    background: #fff;
    color: #07183d;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(25, 43, 76, .045);
  }

  .chss-mobile-timeoff-filters button span {
    display: inline-flex;
    min-width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f2f6;
    font-size: 12px;
  }

  .chss-mobile-timeoff-filters button.is-active {
    border-color: #a9cfff;
    background: linear-gradient(180deg, #f2f8ff, #eaf4ff);
    color: #0f6de8;
  }

  .chss-mobile-timeoff-panel[hidden],
  .chss-mobile-timeoff-card[hidden],
  .chss-mobile-timeoff-empty[hidden] {
    display: none !important;
  }

  .chss-mobile-timeoff-list {
    display: grid;
    gap: 12px;
  }

  .chss-app .chss-mobile-timeoff-card {
    display: block;
    padding: 14px;
    border: 1px solid #e4e9f0;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(25, 43, 76, .075);
  }

  .chss-mobile-timeoff-card-main {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: start;
  }

  .chss-mobile-timeoff-avatar {
    display: inline-flex;
    width: 54px;
    height: 54px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #e1f7f2, #d9f5f3);
    color: #07565c;
    font-size: 17px;
    font-weight: 950;
  }

  .chss-mobile-timeoff-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  .chss-mobile-timeoff-copy > strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #07183d;
  }

  .chss-mobile-timeoff-copy > span {
    display: block;
    margin: 0;
    color: #687892;
    font-size: 14px;
    font-weight: 700;
  }

  .chss-mobile-timeoff-copy time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #687892;
    font-size: 13px;
    font-weight: 700;
  }

  .chss-mobile-timeoff-copy time i {
    position: relative;
    width: 15px;
    height: 14px;
    border: 1.8px solid currentColor;
    border-radius: 3px;
  }

  .chss-mobile-timeoff-copy time i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    border-top: 1.8px solid currentColor;
  }

  .chss-mobile-timeoff-copy p {
    width: max-content;
    max-width: 100%;
    margin: 3px 0 0;
    padding: 5px 8px;
    border-radius: 8px;
    background: #edf5ff;
    color: #1659a8;
    font-size: 12px;
    line-height: 1.3;
  }

  .chss-mobile-timeoff-state {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
  }

  .chss-mobile-timeoff-state.chss-pill-request-pending {
    background: #fff3d9;
    color: #b66a00;
  }

  .chss-mobile-timeoff-state.chss-pill-request-approved {
    background: #e7f7e9;
    color: #188432;
  }

  .chss-mobile-timeoff-state.chss-pill-request-rejected {
    background: #feeaea;
    color: #d92d20;
  }

  .chss-mobile-timeoff-state.is-entry {
    background: #e7f3ff;
    color: #1764b5;
  }

  .chss-mobile-timeoff-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #e7ebf1;
  }

  .chss-mobile-timeoff-actions.is-single {
    grid-template-columns: 1fr;
  }

  .chss-mobile-timeoff-actions form {
    margin: 0;
  }

  .chss-mobile-timeoff-actions button {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 850;
  }

  .chss-mobile-timeoff-reject {
    background: #fee8e8;
    color: #d92d20;
  }

  .chss-mobile-timeoff-approve {
    background: #e4f6e7;
    color: #188432;
  }

  .chss-mobile-timeoff-card.is-ajax-done .chss-mobile-timeoff-actions {
    display: none;
  }

  .chss-mobile-timeoff-empty {
    margin: 0;
    padding: 22px 14px;
    border: 1px dashed #cfd7e4;
    border-radius: 17px;
    background: #fff;
    text-align: center;
    font-weight: 750;
    color: #66758c;
  }

  .chss-mobile-new-timeoff {
    border: 0;
    background: transparent;
  }

  .chss-mobile-new-timeoff > summary {
    display: flex;
    width: 100%;
    min-height: 60px;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(100deg, #11b9b2 0%, #39d4b2 100%);
    box-shadow: 0 14px 28px rgba(21, 184, 170, .20);
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.02em;
    list-style: none;
    cursor: pointer;
  }

  .chss-mobile-new-timeoff > summary::-webkit-details-marker {
    display: none;
  }

  .chss-mobile-new-timeoff[open] > summary {
    border-radius: 18px 18px 0 0;
  }

  .chss-mobile-new-timeoff-form {
    padding: 15px;
    border: 1px solid #dfe6ee;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: #fff;
  }

  .chss-mobile-new-timeoff-form h2 {
    margin: 0 0 13px;
    font-size: 21px;
    color: #07183d;
  }

  .chss-mobile-new-timeoff-form .chss-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .chss-mobile-timeoff-summary > span {
    gap: 6px;
    font-size: 13px;
  }

  .chss-mobile-timeoff-summary i {
    flex-basis: 37px;
    width: 37px;
    height: 37px;
  }

  .chss-mobile-timeoff-clock::after {
    top: 10px;
    left: 18px;
  }

  .chss-mobile-timeoff-calendar::after {
    top: 8px;
    left: 11px;
  }

  .chss-mobile-timeoff-card-main {
    grid-template-columns: 49px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .chss-mobile-timeoff-avatar {
    width: 49px;
    height: 49px;
  }

  .chss-mobile-timeoff-copy > strong {
    font-size: 14px;
  }

  .chss-mobile-timeoff-state {
    padding-inline: 6px;
    font-size: 10px;
  }
}

/* v0.21.23 - dedicated mobile History and Reports screens, plus seven-tab footer. */
.chss-mobile-history,
.chss-mobile-reports {
  display: none;
}

@media (max-width: 480px) {
  body.chss-has-mobile-footer-nav {
    padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
  }

  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    min-height: 88px !important;
    padding: 0 3px calc(6px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab[data-chss-tab-key="history"],
  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab[data-chss-tab-key="reports"] {
    display: flex !important;
  }

  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab {
    min-height: 82px !important;
    padding: 9px 1px 4px !important;
    gap: 4px !important;
  }

  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab::before {
    left: 10% !important;
    right: 10% !important;
  }

  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab-mobile-icon {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab-mobile-label {
    display: -webkit-box !important;
    max-width: 100% !important;
    min-height: 20px;
    overflow: hidden;
    color: currentColor;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .chss-app .chss-mobile-history,
  .chss-app .chss-mobile-reports {
    display: block;
    width: 100%;
    padding: 2px 0 14px;
    color: #0f1f3d;
  }

  .chss-mobile-history-header,
  .chss-mobile-reports-header {
    margin-bottom: 14px;
  }

  .chss-mobile-history-header h1,
  .chss-mobile-reports-header h1 {
    margin: 0;
    color: #07183d;
    font-size: 29px;
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1.1;
  }

  .chss-mobile-history-header > p,
  .chss-mobile-reports-header > p {
    margin: 5px 0 0;
    color: #6b7890;
    font-size: 13px;
    line-height: 1.4;
  }

  .chss-mobile-history-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
  }

  .chss-mobile-history-summary > span {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    min-height: 68px;
    padding: 10px;
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .045);
  }

  .chss-mobile-history-summary i {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #eaf3ff;
    color: #1267e8;
    font-size: 23px;
    font-style: normal;
    font-weight: 900;
  }

  .chss-mobile-history-summary b {
    align-self: end;
    color: #07183d;
    font-size: 21px;
    line-height: 1;
  }

  .chss-mobile-history-summary small {
    align-self: start;
    color: #718096;
    font-size: 10px;
    font-weight: 750;
  }

  .chss-mobile-history-filters,
  .chss-mobile-history-card,
  .chss-mobile-report-card {
    overflow: hidden;
    border: 1px solid #dfe6ee;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
  }

  .chss-mobile-history-filters {
    margin-bottom: 13px;
  }

  .chss-mobile-history-filters > summary,
  .chss-mobile-history-card > summary,
  .chss-mobile-report-card > summary {
    list-style: none;
    cursor: pointer;
  }

  .chss-mobile-history-filters > summary::-webkit-details-marker,
  .chss-mobile-history-card > summary::-webkit-details-marker,
  .chss-mobile-report-card > summary::-webkit-details-marker {
    display: none;
  }

  .chss-mobile-history-filters > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 12px 14px;
    color: #17345f;
    font-size: 14px;
    font-weight: 900;
  }

  .chss-mobile-history-filters > summary b {
    min-width: 24px;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #1267e8;
    font-size: 11px;
    text-align: center;
  }

  .chss-mobile-history-filters > summary i,
  .chss-mobile-history-card > summary > i,
  .chss-mobile-report-card > summary > i {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
  }

  .chss-mobile-history-filters > summary i::before,
  .chss-mobile-history-filters > summary i::after,
  .chss-mobile-history-card > summary > i::before,
  .chss-mobile-history-card > summary > i::after,
  .chss-mobile-report-card > summary > i::before,
  .chss-mobile-report-card > summary > i::after {
    content: "";
    position: absolute;
    top: 7px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: #8491a5;
    transition: transform .15s ease;
  }

  .chss-mobile-history-filters > summary i::before,
  .chss-mobile-history-card > summary > i::before,
  .chss-mobile-report-card > summary > i::before { left: 0; transform: rotate(45deg); }
  .chss-mobile-history-filters > summary i::after,
  .chss-mobile-history-card > summary > i::after,
  .chss-mobile-report-card > summary > i::after { right: 0; transform: rotate(-45deg); }
  .chss-mobile-history-filters[open] > summary i::before,
  .chss-mobile-history-card[open] > summary > i::before,
  .chss-mobile-report-card[open] > summary > i::before { transform: rotate(-45deg); }
  .chss-mobile-history-filters[open] > summary i::after,
  .chss-mobile-history-card[open] > summary > i::after,
  .chss-mobile-report-card[open] > summary > i::after { transform: rotate(45deg); }

  .chss-mobile-history-filters form {
    display: grid;
    gap: 11px;
    padding: 14px;
    border-top: 1px solid #edf1f6;
    background: #fbfcff;
  }

  .chss-mobile-history-filters label,
  .chss-mobile-reports-month-form label {
    display: grid;
    gap: 6px;
    color: #526176;
    font-size: 12px;
    font-weight: 850;
  }

  .chss-mobile-history-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .chss-mobile-history-filter-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
  }

  .chss-mobile-history-filter-actions button,
  .chss-mobile-history-filter-actions a,
  .chss-mobile-reports-month-form button,
  .chss-mobile-reports-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    padding: 9px 13px;
    background: linear-gradient(100deg, #1267e8, #2686f5);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
  }

  .chss-mobile-history-filter-actions a {
    border: 1px solid #dfe6ee;
    background: #fff;
    color: #5f6e82;
  }

  .chss-mobile-history-list,
  .chss-mobile-report-list {
    display: grid;
    gap: 10px;
  }

  .chss-mobile-history-card > summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 9px;
    padding: 12px;
  }

  .chss-mobile-history-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #edf7f4;
    color: #168d78;
    font-size: 21px;
    font-weight: 900;
  }

  .chss-mobile-history-card > summary > span:nth-child(2),
  .chss-mobile-report-card > summary > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .chss-mobile-history-card strong,
  .chss-mobile-report-card strong {
    color: #0d2348;
    font-size: 14px;
    line-height: 1.25;
  }

  .chss-mobile-history-card small,
  .chss-mobile-report-card small {
    overflow: hidden;
    color: #68778d;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
  }

  .chss-mobile-history-card em {
    color: #8a96a8;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
  }

  .chss-mobile-history-card > summary > b {
    max-width: 70px;
    padding: 5px 7px;
    border-radius: 999px;
    background: #f1f5fb;
    color: #506078;
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
  }

  .chss-mobile-history-details {
    display: grid;
    gap: 9px;
    padding: 13px;
    border-top: 1px solid #edf1f6;
    background: #fbfcff;
  }

  .chss-mobile-history-details p {
    margin: 0;
    color: #5d6b7f;
    font-size: 12px;
  }

  .chss-mobile-history-details label {
    display: grid;
    gap: 5px;
    color: #526176;
    font-size: 11px;
    font-weight: 850;
  }

  .chss-mobile-history-details textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px !important;
  }

  .chss-mobile-history-empty,
  .chss-mobile-reports-empty,
  .chss-mobile-reports-note {
    margin: 12px 0 0;
    padding: 15px;
    border: 1px dashed #d9e1eb;
    border-radius: 15px;
    background: #fff;
    color: #6c7a8e;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
  }

  .chss-mobile-reports-month {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    margin-top: 14px;
    padding: 7px;
    border: 1px solid #dfe6ee;
    border-radius: 16px;
    background: #fff;
  }

  .chss-mobile-reports-month a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 40px;
    border-radius: 11px;
    background: #f3f7fc;
    color: #1267e8;
    font-size: 28px;
    font-weight: 700;
    text-decoration: none;
  }

  .chss-mobile-reports-month strong {
    color: #10264a;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
  }

  .chss-mobile-reports-month-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    background: #fff;
  }

  .chss-mobile-reports-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
  }

  .chss-mobile-reports-summary article {
    min-height: 104px;
    padding: 13px;
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .04);
  }

  .chss-mobile-reports-summary span,
  .chss-mobile-reports-summary small {
    display: block;
    color: #718096;
    font-size: 10px;
    font-weight: 800;
  }

  .chss-mobile-reports-summary strong {
    display: block;
    margin: 7px 0 5px;
    color: #1267e8;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.03em;
  }

  .chss-mobile-reports-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
  }

  .chss-mobile-reports-actions form,
  .chss-mobile-reports-actions button {
    width: 100%;
    margin: 0;
  }

  .chss-mobile-reports-actions button.is-secondary {
    border: 1px solid #b9e3d7;
    background: #edf9f5;
    color: #167b68;
  }

  .chss-mobile-reports-search {
    position: relative;
    display: block;
    margin-bottom: 12px;
  }

  .chss-mobile-reports-search i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid #8290a4;
    border-radius: 50%;
    transform: translateY(-58%);
  }

  .chss-mobile-reports-search i::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 7px;
    height: 2px;
    border-radius: 2px;
    background: #8290a4;
    transform: rotate(45deg);
  }

  .chss-app .chss-mobile-reports-search input {
    min-height: 48px;
    padding-left: 44px;
    border-radius: 15px;
    background: #fff;
  }

  .chss-mobile-report-card[hidden],
  .chss-mobile-reports-empty[hidden] {
    display: none !important;
  }

  .chss-mobile-report-card > summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 9px;
    padding: 12px;
  }

  .chss-mobile-report-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #dcecff, #c8e3ff);
    color: #1267e8;
    font-size: 17px;
    font-weight: 950;
  }

  .chss-mobile-report-card > summary > b {
    display: grid;
    gap: 2px;
    color: #1267e8;
    font-size: 14px;
    text-align: right;
  }

  .chss-mobile-report-card > summary > b small {
    font-size: 9px;
    font-weight: 750;
  }

  .chss-mobile-report-card-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #edf1f6;
    background: #fbfcff;
  }

  .chss-mobile-report-card-details > span {
    display: grid;
    gap: 3px;
    min-height: 56px;
    padding: 9px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #fff;
  }

  .chss-mobile-report-card-details small {
    color: #778498;
    font-size: 9px;
    font-weight: 800;
  }

  .chss-mobile-report-card-details strong {
    color: #17345f;
    font-size: 15px;
  }
}

@media (max-width: 380px) {
  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab-mobile-icon {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  body > .chss-mobile-nav-footer:not(.chss-tabs-employee) .chss-tab-mobile-label {
    font-size: 7.5px !important;
  }

  .chss-mobile-history-card > summary,
  .chss-mobile-report-card > summary {
    grid-template-columns: 40px minmax(0, 1fr) auto 14px;
    gap: 7px;
    padding-inline: 9px;
  }

  .chss-mobile-history-card-icon,
  .chss-mobile-report-avatar {
    width: 40px;
    height: 40px;
  }
}

/* v0.21.33 - one shared shell for the four primary manager screens. */
@media (max-width: 480px) {
  .chss-app .chss-dashboard-modern > .chss-mobile-primary-page {
    display: grid;
    visibility: visible;
    width: 100%;
    min-width: 0;
    gap: 14px;
    margin: 0;
    padding: 2px 0 14px;
    box-sizing: border-box;
    color: #07183d;
    opacity: 1;
  }

  .chss-mobile-primary-header {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
  }

  .chss-mobile-primary-header > h1 {
    margin: 2px 0 0;
    color: #07183d;
    font-size: clamp(34px, 10vw, 43px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.055em;
  }

  .chss-mobile-schedule-date-card {
    display: grid;
    min-width: 0;
  }
}

/* v0.21.26 - full user account menu and account sheets */
.chss-app .chss-profile { z-index: 2147483000; }

.chss-app .chss-profile-button {
	position: relative;
	border: 0;
	background: #e1f4f1;
	color: #256f6b;
}

.chss-app .chss-profile-avatar,
.chss-app .chss-profile-summary-avatar,
.chss-app .chss-account-profile-card > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(145deg, #d9f3ef, #bde4df);
	color: #286f6c;
	font-weight: 900;
}

.chss-app .chss-profile-avatar { width: 100%; height: 100%; font-size: 16px; }
.chss-app .chss-profile-alert {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #d63a4d;
	color: #fff;
	font-size: 9px;
	font-weight: 900;
	line-height: 1;
}

.chss-app .chss-profile-menu {
	width: min(370px, calc(100vw - 32px));
	padding: 18px;
	border-color: #e5eaf0;
	border-radius: 24px;
	box-shadow: 0 24px 65px rgba(10, 28, 55, .22);
}

.chss-app .chss-profile-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	right: 15px;
	width: 16px;
	height: 16px;
	border-top: 1px solid #e5eaf0;
	border-left: 1px solid #e5eaf0;
	background: #fff;
	transform: rotate(45deg);
}

.chss-app .chss-profile-summary {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	padding: 4px 2px 16px;
}

.chss-app .chss-profile-summary-avatar { width: 58px; height: 58px; font-size: 20px; }
.chss-app .chss-profile-summary-copy { display: grid; min-width: 0; gap: 3px; }
.chss-app .chss-profile-summary-copy strong { overflow: hidden; color: #10204b; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.chss-app .chss-profile-summary-copy em { justify-self: start; padding: 3px 8px; border-radius: 7px; background: #e7f5f2; color: #326c69; font-size: 11px; font-style: normal; font-weight: 800; }
.chss-app .chss-profile-summary-copy small { overflow: hidden; color: #788397; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.chss-app .chss-profile-links { display: grid; padding: 10px 0; border-bottom: 1px solid #e5eaf0; }
.chss-app .chss-profile-links button,
.chss-app .chss-profile-logout {
	display: grid;
	grid-template-columns: 27px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 50px;
	padding: 8px 10px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: #10204b;
	font-size: 14px;
	font-weight: 800;
	text-align: left;
	cursor: pointer;
}
.chss-app .chss-profile-links button:hover { background: #f4f8fb; }
.chss-app .chss-profile-links svg,
.chss-app .chss-profile-logout svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.chss-app .chss-profile-links b { color: #10204b; font-size: 28px; font-weight: 400; line-height: 1; }
.chss-app .chss-profile-links i { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: #d63a4d; color: #fff; font-size: 10px; font-style: normal; text-align: center; }
.chss-app .chss-profile-menu form { justify-self: stretch; width: 100%; margin: 10px 0 0; }
.chss-app .chss-profile-logout { grid-template-columns: 27px minmax(0, 1fr); color: #d13a4e; }
.chss-app .chss-profile-logout:hover { background: #fff2f4; }

body.chss-account-dialog-open { overflow: hidden; }
.chss-app .chss-account-dialog {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: grid;
	place-items: center;
	padding: 20px;
}
.chss-app .chss-account-dialog[hidden] { display: none !important; }
.chss-app .chss-account-backdrop { position: absolute; inset: 0; background: rgba(8, 24, 49, .54); backdrop-filter: blur(3px); }
.chss-app .chss-account-sheet {
	position: relative;
	z-index: 1;
	width: min(520px, 100%);
	max-height: min(760px, calc(100vh - 40px));
	overflow: auto;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 25px;
	background: #fff;
	box-shadow: 0 28px 80px rgba(6, 24, 50, .28);
}
.chss-app .chss-account-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 0; background: transparent; box-shadow: none; }
.chss-app .chss-account-sheet > header p { margin: 0 0 2px; color: #49978f; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.chss-app .chss-account-sheet > header h2 { margin: 0; color: #10204b; font-size: 24px; }
.chss-app .chss-account-sheet > header > button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f0f4f7; color: #536176; font-size: 24px; line-height: 1; cursor: pointer; }
.chss-app .chss-account-profile-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 13px; margin-bottom: 18px; padding: 14px; border: 1px solid #dcece9; border-radius: 17px; background: #f2faf8; }
.chss-app .chss-account-profile-card > span { width: 58px; height: 58px; font-size: 20px; }
.chss-app .chss-account-profile-card > div { display: grid; gap: 3px; min-width: 0; }
.chss-app .chss-account-profile-card strong { color: #10204b; font-size: 16px; }
.chss-app .chss-account-profile-card small { overflow: hidden; color: #718096; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chss-app .chss-app-header .chss-account-form { display: grid; justify-self: stretch; width: 100%; gap: 14px; margin: 0; }
.chss-app .chss-account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chss-app .chss-account-form label { display: grid; gap: 6px; color: #3d4d67; font-size: 12px; font-weight: 800; }
.chss-app .chss-account-form input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #dce3eb; border-radius: 11px; background: #fff; color: #13233f; font: inherit; }
.chss-app .chss-account-form input:focus { border-color: #66aaa4; outline: 3px solid rgba(77, 161, 152, .13); }
.chss-app .chss-account-full { grid-column: 1 / -1; }
.chss-app .chss-account-primary { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px; background: #347f79; color: #fff; font-weight: 900; cursor: pointer; }
.chss-app .chss-account-primary-link { display: flex; align-items: center; justify-content: center; margin-top: 14px; text-decoration: none; }
.chss-app .chss-account-password { margin-top: 16px; border-top: 1px solid #e5eaf0; }
.chss-app .chss-account-password summary { padding: 16px 2px 8px; color: #10204b; font-size: 13px; font-weight: 900; cursor: pointer; }
.chss-app .chss-account-password form { padding-top: 8px; }
.chss-app .chss-account-notifications { display: grid; gap: 9px; }
.chss-app .chss-account-notifications article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; padding: 12px; border: 1px solid #e3e9ef; border-radius: 14px; background: #fbfcfd; }
.chss-app .chss-account-notifications article > span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #e7f5f2; font-size: 17px; }
.chss-app .chss-account-notifications article > div { display: grid; gap: 2px; }
.chss-app .chss-account-notifications strong { color: #10204b; font-size: 13px; }
.chss-app .chss-account-notifications p { margin: 0; color: #56657b; font-size: 12px; }
.chss-app .chss-account-notifications small { color: #8791a1; font-size: 10px; }
.chss-app .chss-account-empty { display: grid; justify-items: center; gap: 7px; padding: 34px 15px; text-align: center; }
.chss-app .chss-account-empty > span { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; background: #e7f5f2; color: #347f79; font-size: 25px; font-weight: 900; }
.chss-app .chss-account-empty strong { color: #10204b; font-size: 16px; }
.chss-app .chss-account-empty p { margin: 0; color: #718096; font-size: 12px; }
.chss-app .chss-account-help-list { display: grid; gap: 10px; }
.chss-app .chss-account-help-list article { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 13px; border: 1px solid #e3e9ef; border-radius: 14px; }
.chss-app .chss-account-help-list article > span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: #e7f5f2; color: #347f79; font-weight: 900; }
.chss-app .chss-account-help-list strong { display: block; margin-bottom: 3px; color: #10204b; font-size: 13px; }
.chss-app .chss-account-help-list p { margin: 0; color: #66758a; font-size: 12px; line-height: 1.45; }
.chss-app .chss-account-version { margin: 18px 0 0; color: #9aa3b0; font-size: 10px; text-align: center; }

@media (max-width: 480px) {
	.chss-app .chss-profile-menu { top: 64px; right: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 86px); overflow: auto; padding: 16px; border-radius: 22px; }
	.chss-app .chss-profile-menu::before { right: 13px; }
	.chss-app .chss-account-dialog { align-items: end; padding: 0; }
	.chss-app .chss-account-sheet { width: 100%; max-height: min(86vh, 760px); padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; }
	.chss-app .chss-account-sheet > header h2 { font-size: 22px; }
	.chss-app .chss-account-fields { grid-template-columns: 1fr; }
	.chss-app .chss-account-full { grid-column: auto; }
}

/* v0.21.27 - reliable account dialogs and user profile photos */
body > .chss-account-portal-root {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2147483646;
	width: 0;
	height: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	pointer-events: none;
}

body > .chss-account-portal-root .chss-account-dialog {
	z-index: 1;
	pointer-events: auto;
}

body > .chss-account-portal-root .chss-account-form {
	display: grid;
	justify-self: stretch;
	width: 100%;
	gap: 14px;
	margin: 0;
}

.chss-app .chss-profile-avatar img,
.chss-app .chss-profile-summary-avatar img,
.chss-app .chss-account-profile-card > span img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.chss-app .chss-account-avatar-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 12px;
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid #e3e9ef;
	border-radius: 15px;
	background: #fbfcfd;
}

.chss-app .chss-account-avatar-picker {
	display: grid;
	gap: 5px;
	min-width: 0;
	color: #3d4d67;
	font-size: 12px;
	font-weight: 800;
}

.chss-app .chss-account-avatar-picker input {
	width: 100%;
	min-height: 42px;
	padding: 7px;
	border: 1px solid #dce3eb;
	border-radius: 10px;
	background: #fff;
	color: #536176;
	font: inherit;
}

.chss-app .chss-account-avatar-picker input::file-selector-button {
	margin-right: 8px;
	padding: 7px 10px;
	border: 0;
	border-radius: 8px;
	background: #e7f5f2;
	color: #286f6c;
	font-weight: 900;
	cursor: pointer;
}

.chss-app .chss-account-avatar-picker small {
	color: #8791a1;
	font-size: 10px;
	font-weight: 600;
}

.chss-app .chss-account-avatar-remove {
	margin: -10px 0 18px;
	text-align: right;
}

.chss-app .chss-account-avatar-remove button {
	padding: 5px 2px;
	border: 0;
	background: transparent;
	color: #c33b4e;
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
}

@media (max-width: 480px) {
	body > .chss-account-portal-root .chss-account-dialog {
		align-items: end;
		padding: 0;
	}

	body > .chss-account-portal-root .chss-account-sheet {
		max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
		overscroll-behavior: contain;
		padding-bottom: calc(28px + env(safe-area-inset-bottom));
	}

	.chss-app .chss-account-avatar-form {
		grid-template-columns: 1fr;
	}

	.chss-app .chss-account-avatar-form .chss-account-primary {
		width: 100%;
	}
}

/* v0.21.28 - body-level profile menu and reusable employee photos */
body > .chss-account-portal-root > .chss-profile-menu[data-chss-profile-menu-portal] {
	position: fixed;
	z-index: 2;
	margin: 0;
	overflow: auto;
	pointer-events: auto;
	overscroll-behavior: contain;
}

/* The button stays interactive without lifting the entire header above the app. */
.chss-app .chss-profile-button {
	position: relative;
	z-index: 1;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.chss-app .chss-mobile-avatar img,
.chss-app .chss-mobile-shift-avatar img,
.chss-app .chss-mobile-timeoff-avatar img,
.chss-app .chss-mobile-staff-avatar img,
.chss-app .chss-mobile-report-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

@media (max-width: 480px) {
	body > .chss-account-portal-root > .chss-profile-menu[data-chss-profile-menu-portal] {
		width: auto;
	}
}

/* v0.25 - Mobile day/week schedule switch and weekly overview. */
.chss-mobile-schedule-view-switch,
.chss-mobile-week-header-card,
.chss-mobile-weekly-list {
	display: none;
}

@media (max-width: 480px) {
	.chss-mobile-schedule-view-switch {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
		min-height: 50px;
		padding: 4px;
		border: 1px solid #e1e7ef;
		border-radius: 17px;
		background: #eef2f6;
		box-shadow: inset 0 1px 2px rgba(25, 43, 76, .04);
	}

	.chss-mobile-schedule-view-switch a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 40px;
		padding: 8px 12px;
		border: 1px solid transparent;
		border-radius: 13px;
		color: #657187;
		font-size: 14px;
		font-weight: 900;
		text-decoration: none;
	}

	.chss-mobile-schedule-view-switch a.is-active {
		border-color: #dce7f8;
		background: #fff;
		color: #0f6de8;
		box-shadow: 0 5px 14px rgba(25, 43, 76, .09);
	}

	.chss-mobile-week-header-card {
		display: grid;
		gap: 8px;
		padding: 10px;
		border: 1px solid #e4e9f0;
		border-radius: 22px;
		background: #fff;
		box-shadow: 0 14px 34px rgba(25, 43, 76, .08);
	}

	.chss-mobile-week-switcher {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr) 46px;
		align-items: center;
		gap: 8px;
	}

	.chss-mobile-week-switcher > a {
		display: grid;
		width: 44px;
		height: 44px;
		place-items: center;
		border-radius: 14px;
		color: #0a2a67;
		font-size: 36px;
		font-weight: 400;
		line-height: 1;
		text-decoration: none;
	}

	.chss-mobile-week-switcher > a:last-child {
		justify-self: end;
	}

	.chss-mobile-week-switcher > a:active {
		background: #f1f6fc;
	}

	.chss-mobile-week-switcher > div {
		display: grid;
		gap: 3px;
		min-width: 0;
		text-align: center;
	}

	.chss-mobile-week-switcher small {
		color: #7a8799;
		font-size: 10px;
		font-weight: 850;
		letter-spacing: .045em;
		text-transform: uppercase;
	}

	.chss-mobile-week-switcher strong {
		overflow: hidden;
		color: #07183d;
		font-size: 17px;
		font-weight: 950;
		letter-spacing: -.025em;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-mobile-current-week-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 36px;
		border-radius: 12px;
		background: #eef7ff;
		color: #0f6de8;
		font-size: 12px;
		font-weight: 900;
		text-decoration: none;
	}

	.chss-mobile-schedule-view-week .chss-mobile-weekly-list {
		display: grid;
		gap: 10px;
	}

	.chss-mobile-week-day-card {
		overflow: hidden;
		border: 1px solid #e3e8ef;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 10px 26px rgba(25, 43, 76, .07);
	}

	.chss-mobile-week-day-card > summary {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr) 28px;
		align-items: center;
		gap: 11px;
		min-height: 76px;
		padding: 10px 12px;
		list-style: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.chss-mobile-week-day-card > summary::-webkit-details-marker {
		display: none;
	}

	.chss-mobile-week-day-card[open] > summary {
		border-bottom: 1px solid #e7ebf1;
		background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
	}

	.chss-mobile-week-day-badge {
		display: grid;
		width: 52px;
		height: 54px;
		place-content: center;
		border: 1px solid #cfe1fb;
		border-radius: 15px;
		background: #eef6ff;
		color: #0f6de8;
		text-align: center;
	}

	.chss-mobile-week-day-badge small {
		font-size: 9px;
		font-weight: 900;
		text-transform: uppercase;
	}

	.chss-mobile-week-day-badge strong {
		margin-top: 1px;
		font-size: 20px;
		font-weight: 950;
		line-height: 1;
	}

	.chss-mobile-week-day-copy {
		display: grid;
		gap: 4px;
		min-width: 0;
	}

	.chss-mobile-week-day-copy > strong {
		overflow: hidden;
		color: #07183d;
		font-size: 15px;
		font-weight: 950;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-mobile-week-day-copy > small {
		overflow: hidden;
		color: #778498;
		font-size: 10px;
		font-weight: 800;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-mobile-week-day-chevron {
		display: grid;
		place-items: center;
		color: #53637b;
		font-size: 25px;
		line-height: 1;
		transition: transform .18s ease;
	}

	.chss-mobile-week-day-card[open] .chss-mobile-week-day-chevron {
		transform: rotate(180deg);
	}

	.chss-mobile-week-day-content {
		display: grid;
		gap: 8px;
		padding: 10px;
		background: #f6f8fb;
	}

	.chss-mobile-week-employee-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(108px, 36%);
		align-items: center;
		gap: 9px;
		min-height: 66px;
		padding: 8px;
		border: 1px solid #e5e9ef;
		border-radius: 16px;
		background: #fff;
	}

	.chss-mobile-week-employee {
		display: flex;
		align-items: center;
		gap: 9px;
		min-width: 0;
	}

	.chss-mobile-week-avatar {
		display: grid;
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		place-items: center;
		overflow: hidden;
		border-radius: 50%;
		background: linear-gradient(145deg, #e1f7f2, #d9eaff);
		color: #166b70;
		font-size: 14px;
		font-weight: 950;
	}

	.chss-mobile-week-avatar img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		object-fit: cover;
	}

	.chss-mobile-week-employee > div:last-child {
		display: grid;
		gap: 3px;
		min-width: 0;
	}

	.chss-mobile-week-employee strong {
		overflow: hidden;
		color: #07183d;
		font-size: 12px;
		font-weight: 950;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-mobile-week-employee small {
		overflow: hidden;
		color: #748196;
		font-size: 9px;
		font-weight: 750;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-mobile-week-status {
		display: grid;
		align-content: center;
		gap: 4px;
		min-width: 0;
		min-height: 48px;
		padding: 7px 8px;
		border: 1px solid transparent;
		border-radius: 13px;
		text-align: center;
	}

	.chss-mobile-week-status > span {
		display: grid;
		gap: 1px;
	}

	.chss-mobile-week-status > span + span {
		padding-top: 4px;
		border-top: 1px solid rgba(15, 111, 112, .14);
	}

	.chss-mobile-week-status strong {
		color: inherit;
		font-size: 11px;
		font-weight: 900;
		line-height: 1.2;
		white-space: nowrap;
	}

	.chss-mobile-week-status small {
		overflow: hidden;
		color: inherit;
		font-size: 8px;
		font-weight: 750;
		text-overflow: ellipsis;
		white-space: nowrap;
		opacity: .78;
	}

	.chss-mobile-week-status.has-shift {
		border-color: #cceee8;
		background: #eafaf6;
		color: #0f6f70;
	}

	.chss-mobile-week-status.is-time-off,
	.chss-mobile-week-status.is-empty {
		border-color: #e5e9ef;
		background: #f3f5f7;
		color: #40506a;
	}

	.chss-mobile-open-day-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		border: 1px solid #cfe1fb;
		border-radius: 13px;
		background: #fff;
		color: #0f6de8;
		font-size: 12px;
		font-weight: 900;
		text-decoration: none;
	}
}

@media (max-width: 380px) {
	.chss-mobile-week-employee-row {
		grid-template-columns: minmax(0, 1fr) 106px;
	}

	.chss-mobile-week-avatar {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
	}

	.chss-mobile-week-status strong {
		font-size: 10px;
	}
}

/* v0.26 - Weekly schedule print action for the mobile week view. */
.chss-mobile-week-header-actions,
.chss-mobile-print-week-button {
	display: none;
}

@media (max-width: 480px) {
	.chss-mobile-week-header-actions {
		display: grid;
		grid-template-columns: minmax(0, .9fr) minmax(150px, 1.25fr);
		align-items: stretch;
		gap: 10px;
	}

	.chss-mobile-week-header-actions .chss-mobile-current-week-link {
		min-width: 0;
		min-height: 44px;
		padding: 10px 11px;
		border: 1px solid #cfe1fb;
		border-radius: 14px;
		background: #f7fbff;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
		font-size: 11px;
		line-height: 1.15;
		text-align: center;
	}

	.chss-mobile-print-week-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-width: 0;
		min-height: 44px;
		padding: 9px 12px;
		border: 1px solid #8ad9cc;
		border-radius: 14px;
		background: linear-gradient(180deg, #effcf9 0%, #ddf7f1 100%);
		box-shadow: 0 7px 16px rgba(15, 111, 112, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
		color: #0c6869;
		font: inherit;
		font-size: 11px;
		font-weight: 900;
		line-height: 1.15;
		text-align: center;
		cursor: pointer;
		transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.chss-mobile-print-week-button svg {
		box-sizing: border-box;
		flex: 0 0 28px;
		width: 28px;
		height: 28px;
		padding: 5px;
		border: 1px solid rgba(15, 111, 112, .12);
		border-radius: 9px;
		background: rgba(255, 255, 255, .68);
	}

	.chss-mobile-print-week-button strong {
		overflow: hidden;
		font: inherit;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-mobile-print-week-button:focus-visible {
		outline: 3px solid rgba(15, 109, 232, .22);
		outline-offset: 2px;
	}

	.chss-mobile-print-week-button:active {
		transform: translateY(1px);
		border-color: #72cdbf;
		background: linear-gradient(180deg, #e7faf6 0%, #d4f2eb 100%);
		box-shadow: 0 3px 9px rgba(15, 111, 112, .11), inset 0 1px 0 rgba(255, 255, 255, .8);
	}
}

@media (hover: hover) and (pointer: fine) {
	.chss-mobile-print-week-button:hover {
		transform: translateY(-1px);
		border-color: #72cdbf;
		box-shadow: 0 9px 20px rgba(15, 111, 112, .16), inset 0 1px 0 rgba(255, 255, 255, .95);
	}
}

@media (max-width: 360px) {
	.chss-mobile-week-header-actions {
		grid-template-columns: 1fr;
	}

	.chss-mobile-print-week-button strong {
		white-space: normal;
	}
}

/* Keep the print table available even when printing from the mobile-only screen. */
@media print {
	body.chss-printing-schedule .chss-app .chss-dashboard-modern > .chss-desktop-schedule.chss-print-area {
		display: block !important;
		visibility: visible !important;
		position: static !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}

	body.chss-printing-schedule .chss-app .chss-dashboard-modern > .chss-mobile-daily-schedule,
	body.chss-printing-schedule .chss-mobile-week-header-actions,
	body.chss-printing-schedule .chss-mobile-print-week-button {
		display: none !important;
	}
}



/* v0.28 - Uniform mobile weekly action buttons. */
@media (max-width: 480px) {
	.chss-app .chss-mobile-week-header-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 10px;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 7px !important;
		width: 100% !important;
		min-width: 0 !important;
		height: 48px !important;
		min-height: 48px !important;
		margin: 0 !important;
		padding: 8px 10px !important;
		border: 1px solid #cfe1fb !important;
		border-radius: 14px !important;
		background: #f7fbff !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95) !important;
		color: #0f6de8 !important;
		font-family: inherit !important;
		font-size: 11px !important;
		font-style: normal !important;
		font-weight: 900 !important;
		line-height: 1.1 !important;
		text-align: center !important;
		text-decoration: none !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: transparent;
		transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link svg,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button svg {
		box-sizing: border-box;
		flex: 0 0 25px;
		width: 25px;
		height: 25px;
		padding: 5px;
		border: 1px solid #d9e8fb;
		border-radius: 8px;
		background: #fff;
		color: currentColor;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link strong,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button strong {
		min-width: 0;
		overflow: hidden;
		font: inherit !important;
		color: inherit !important;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link:focus-visible,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button:focus-visible {
		outline: 3px solid rgba(15, 109, 232, .22) !important;
		outline-offset: 2px;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link:active,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button:active {
		transform: translateY(1px);
		border-color: #9fc8fa !important;
		background: #edf6ff !important;
		box-shadow: inset 0 1px 2px rgba(15, 109, 232, .07) !important;
	}
}

@media (hover: hover) and (pointer: fine) {
	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link:hover,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button:hover {
		transform: translateY(-1px);
		border-color: #9fc8fa !important;
		background: #fff !important;
		box-shadow: 0 7px 16px rgba(15, 109, 232, .10), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
	}
}

@media (max-width: 360px) {
	.chss-app .chss-mobile-week-header-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button {
		gap: 5px !important;
		padding-inline: 7px !important;
		font-size: 10px !important;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link svg,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button svg {
		flex-basis: 23px;
		width: 23px;
		height: 23px;
		padding: 4px;
	}
}

/* v0.29 — employee attendance flow. */
.chss-attendance-screen {
  display: grid;
  gap: 14px;
}

.chss-attendance-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.chss-attendance-title-row h2 {
  margin: 2px 0 0;
}

.chss-attendance-title-row time {
  min-width: 72px;
  padding: 9px 12px;
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.chss-attendance-quick-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #bfe5dc;
  border-radius: 18px;
  background: linear-gradient(135deg, #effcf8 0%, #f8fffd 100%);
  color: #0f766e;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(15, 118, 110, .08);
}

.chss-attendance-quick-link > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.chss-attendance-quick-link strong,
.chss-attendance-quick-link small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chss-attendance-quick-link small {
  color: #52766f;
  font-size: 12px;
}

.chss-attendance-quick-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #0f9f8d;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}

.chss-attendance-quick-link > b {
  font-size: 26px;
  font-weight: 500;
}

.chss-attendance-setup-card,
.chss-attendance-empty-card,
.chss-attendance-card,
.chss-attendance-reminder-card,
.chss-attendance-ergani-note {
  border-radius: 22px;
}

.chss-attendance-setup-card,
.chss-attendance-empty-card {
  padding: 22px;
  border: 1px solid #dfe8f4;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.chss-attendance-setup-card > h2,
.chss-attendance-empty-card > h2 {
  margin: 8px 0 7px;
}

.chss-attendance-setup-card > p,
.chss-attendance-empty-card > p {
  margin: 0 0 18px;
  color: #64748b;
  line-height: 1.55;
}

.chss-attendance-lock,
.chss-attendance-empty-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #eef5ff;
  font-size: 24px;
}

.chss-attendance-setup-card form {
  display: grid;
  gap: 13px;
}

.chss-attendance-setup-card label,
.chss-attendance-dialog-sheet label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.chss-attendance-setup-card input,
.chss-attendance-dialog-sheet input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #cfdbea;
  border-radius: 13px;
  background: #fbfdff;
  color: #0f172a;
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
}

.chss-attendance-setup-card input:focus,
.chss-attendance-dialog-sheet input:focus {
  outline: 3px solid rgba(18, 103, 232, .16);
  border-color: #7eafe9;
  background: #fff;
}

.chss-attendance-pin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.chss-attendance-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #1267e8 !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(18, 103, 232, .22) !important;
  cursor: pointer;
}

.chss-attendance-primary:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(18, 103, 232, .18) !important;
}

.chss-attendance-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #dbe7f5;
  background: linear-gradient(150deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: 0 18px 42px rgba(31, 65, 114, .11);
}

.chss-attendance-card-check_out {
  border-color: #bce8df;
  background: linear-gradient(150deg, #ffffff 0%, #effcf8 100%);
}

.chss-attendance-card-completed {
  border-color: #d5e0ee;
  background: linear-gradient(150deg, #ffffff 0%, #f7f9fc 100%);
}

.chss-attendance-card::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -55px;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: rgba(18, 103, 232, .07);
  pointer-events: none;
}

.chss-attendance-card-check_out::after {
  background: rgba(15, 159, 141, .08);
}

.chss-attendance-status-line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #42617e;
  font-size: 12px;
}

.chss-attendance-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .12);
}

.chss-attendance-card-check_out .chss-attendance-status-dot {
  background: #0f9f8d;
  box-shadow: 0 0 0 5px rgba(15, 159, 141, .12);
}

.chss-attendance-card-completed .chss-attendance-status-dot {
  background: #64748b;
  box-shadow: 0 0 0 5px rgba(100, 116, 139, .10);
}

.chss-attendance-shift-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin: 20px 0 18px;
}

.chss-attendance-shift-copy p,
.chss-attendance-shift-copy h2,
.chss-attendance-shift-copy span {
  margin: 0;
}

.chss-attendance-shift-copy p {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.chss-attendance-shift-copy h2 {
  color: #0f172a;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1;
  letter-spacing: -.04em;
}

.chss-attendance-shift-copy span {
  color: #42617e;
  font-weight: 800;
}

.chss-attendance-times {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.chss-attendance-times > div {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(207, 219, 234, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.chss-attendance-times small {
  color: #7b899e;
  font-size: 11px;
  font-weight: 800;
}

.chss-attendance-times strong {
  color: #132238;
  font-size: 21px;
  line-height: 1.1;
}

.chss-attendance-punch-button {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  width: 100% !important;
  min-height: 72px;
  padding: 11px 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #1267e8 !important;
  color: #fff !important;
  text-align: left !important;
  box-shadow: 0 14px 28px rgba(18, 103, 232, .25) !important;
  cursor: pointer;
}

.chss-attendance-card-check_out .chss-attendance-punch-button {
  background: #0f9f8d !important;
  box-shadow: 0 14px 28px rgba(15, 159, 141, .24) !important;
}

.chss-attendance-punch-button > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .18);
  font-size: 27px;
  font-weight: 700;
}

.chss-attendance-punch-button strong,
.chss-attendance-punch-button small {
  color: #fff !important;
}

.chss-attendance-punch-button strong {
  align-self: end;
  font-size: 15px;
  font-weight: 900;
}

.chss-attendance-punch-button small {
  align-self: start;
  opacity: .8;
  font-size: 11px;
}

.chss-attendance-punch-button:active {
  transform: translateY(1px);
}

.chss-attendance-complete {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid #cfe0d9;
  border-radius: 16px;
  background: #f0faf6;
  color: #14745e;
}

.chss-attendance-complete > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #14866d;
  color: #fff;
  font-weight: 900;
}

.chss-attendance-reminder-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dfe8f4;
  background: #fff;
}

.chss-attendance-reminder-card > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chss-attendance-reminder-card > div > span {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #fff7e7;
}

.chss-attendance-reminder-card p {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
}

.chss-attendance-reminder-card small {
  color: #718096;
  font-size: 11px;
  line-height: 1.25;
}

.chss-attendance-reminder-card button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 11px !important;
  border: 1px solid #cfe0f5 !important;
  border-radius: 12px !important;
  background: #f5f9ff !important;
  color: #1267e8 !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.chss-attendance-reminder-card button.is-enabled {
  border-color: #c5e8dd !important;
  background: #effaf6 !important;
  color: #0f766e !important;
}

.chss-attendance-ergani-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  border: 1px solid #f0d8a7;
  background: #fffaf0;
  color: #705522;
}

.chss-attendance-ergani-note > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f4c861;
  color: #5a4212;
  font-weight: 950;
}

.chss-attendance-ergani-note p {
  display: grid;
  gap: 3px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.chss-attendance-history-panel {
  margin: 0;
}

.chss-attendance-history-list {
  display: grid;
  gap: 8px;
}

.chss-attendance-history-list article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #edf1f6;
}

.chss-attendance-history-list article:last-child {
  border-bottom: 0;
}

.chss-attendance-history-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #edf5ff;
  color: #1267e8;
  font-size: 20px;
  font-weight: 900;
}

.chss-attendance-history-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.chss-attendance-history-list small {
  overflow: hidden;
  color: #738197;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chss-attendance-history-list em {
  padding: 5px 7px;
  border-radius: 999px;
  background: #fff4dc;
  color: #8a6212;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.chss-attendance-history-list .chss-attendance-transmission-submitted,
.chss-attendance-history-list .chss-attendance-transmission-accepted {
  background: #e9f8f3;
  color: #0f766e;
}

.chss-attendance-dialog[hidden] {
  display: none !important;
}

.chss-attendance-dialog {
  position: fixed;
  z-index: 1000002;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chss-attendance-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.chss-attendance-dialog-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: 90vh;
  overflow: auto;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -20px 50px rgba(15, 23, 42, .22);
}

.chss-attendance-dialog-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.chss-attendance-dialog-sheet header p,
.chss-attendance-dialog-sheet header h2 {
  margin: 0;
}

.chss-attendance-dialog-sheet header p {
  color: #1267e8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.chss-attendance-dialog-sheet header button {
  display: grid !important;
  place-items: center;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  cursor: pointer;
}

.chss-attendance-dialog-copy {
  margin: 0 0 16px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.chss-attendance-dialog-sheet form {
  display: grid;
  gap: 14px;
}

body.chss-attendance-dialog-open {
  overflow: hidden !important;
}

@media (min-width: 640px) {
  .chss-attendance-dialog {
    align-items: center;
    padding: 24px;
  }

  .chss-attendance-dialog-sheet {
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  body > .chss-mobile-nav-footer.chss-tabs-employee {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body > .chss-mobile-nav-footer .chss-tab[data-chss-tab-key="attendance"] .chss-tab-mobile-icon {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J004IDEybDIuNSAyLjVMMTYgOScvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxLjknIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J004IDEybDIuNSAyLjVMMTYgOScvPjwvc3ZnPg==");
  }

  body > .chss-mobile-nav-footer.chss-tabs-employee .chss-tab-mobile-label {
    font-size: 9.5px;
  }

  .chss-attendance-screen {
    gap: 12px;
  }

  .chss-attendance-title-row {
    padding: 0 2px;
  }

  .chss-attendance-title-row h2 {
    font-size: 20px;
  }

  .chss-attendance-pin-grid {
    grid-template-columns: 1fr;
  }

  .chss-attendance-reminder-card {
    align-items: stretch;
    flex-direction: column;
  }

  .chss-attendance-reminder-card button {
    width: 100% !important;
  }

  .chss-attendance-history-list article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .chss-attendance-history-list em {
    grid-column: 2;
    justify-self: start;
  }
}


/* v0.30 - footer safe area so content never hides behind the fixed mobile navigation. */
:root {
  --chss-mobile-footer-height: 98px;
}

@media (max-width: 480px) {
  body.chss-has-mobile-footer-nav .chss-app {
    scroll-padding-bottom: calc(var(--chss-mobile-footer-height, 98px) + 16px);
  }

  body.chss-has-mobile-footer-nav .chss-app .chss-dashboard,
  body.chss-has-mobile-footer-nav .chss-app .chss-dashboard-modern {
    padding-bottom: calc(var(--chss-mobile-footer-height, 98px) + 16px) !important;
  }

  body.chss-has-mobile-footer-nav .chss-attendance-screen,
  body.chss-has-mobile-footer-nav .chss-mobile-schedule,
  body.chss-has-mobile-footer-nav .chss-mobile-history,
  body.chss-has-mobile-footer-nav .chss-mobile-reports {
    scroll-margin-bottom: calc(var(--chss-mobile-footer-height, 98px) + 16px);
  }
}


/* v0.31 - real in-content footer clearance for every mobile page. */
.chss-mobile-footer-spacer {
  display: none;
}

@media (max-width: 480px) {
  body.chss-has-mobile-footer-nav .chss-mobile-footer-spacer {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    min-height: calc(var(--chss-mobile-footer-height, 98px) + 28px);
    flex: 0 0 auto;
    pointer-events: none;
    visibility: hidden;
  }

  /* The real spacer replaces the less reliable dashboard-only padding. */
  body.chss-has-mobile-footer-nav .chss-app .chss-dashboard,
  body.chss-has-mobile-footer-nav .chss-app .chss-dashboard-modern {
    padding-bottom: 0 !important;
  }
}


/* v0.32 - attendance modal must sit above, not beneath, the fixed mobile footer. */
.chss-attendance-dialog {
  z-index: 2147483647 !important;
}

body.chss-attendance-dialog-open > .chss-mobile-nav-footer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 480px) {
  .chss-attendance-dialog {
    padding: 0 !important;
  }

  .chss-attendance-dialog-sheet {
    width: 100% !important;
    max-height: 100dvh !important;
    max-height: 100vh !important;
    padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
  }
}

/* v0.33 - private employee QR card and realistic attendance test tools. */
.chss-employee-card-vault {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dbe6f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.chss-employee-card-vault.has-card {
  border-color: #bfe4da;
  background: linear-gradient(145deg, #ffffff 0%, #f4fcf9 100%);
}

.chss-employee-card-vault-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.chss-employee-card-vault-header > div {
  min-width: 0;
}

.chss-employee-card-vault-header h2,
.chss-employee-card-vault-header p,
.chss-employee-card-vault-header small {
  margin: 0;
}

.chss-employee-card-vault-header h2 {
  font-size: 18px;
}

.chss-employee-card-vault-header small {
  display: block;
  margin-top: 3px;
  color: #738197;
  font-size: 11px;
  line-height: 1.35;
}

.chss-employee-card-vault-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e9f8f3;
  color: #0f8270;
  font-size: 24px;
  font-weight: 900;
}

.chss-employee-card-status {
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.chss-employee-card-status.is-ready {
  background: #e5f8f1;
  color: #0f766e;
}

.chss-employee-card-status.is-missing {
  background: #fff4dc;
  color: #8a6212;
}

.chss-employee-card-help {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: #f5f8fc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.chss-employee-card-upload,
.chss-employee-card-delete {
  display: grid;
  gap: 11px;
}

.chss-employee-card-upload label,
.chss-employee-card-delete label {
  display: grid;
  gap: 6px;
  color: #344156;
  font-size: 12px;
  font-weight: 800;
}

.chss-employee-card-upload label small {
  color: #738197;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.chss-employee-card-reveal-button {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 11px !important;
  width: 100% !important;
  min-height: 70px !important;
  padding: 11px 14px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, #0f9f8d 0%, #0f766e 100%) !important;
  color: #fff !important;
  text-align: left !important;
  box-shadow: 0 13px 27px rgba(15, 118, 110, .20) !important;
  cursor: pointer;
}

.chss-employee-card-reveal-button > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  font-size: 25px;
}

.chss-employee-card-reveal-button strong,
.chss-employee-card-reveal-button small {
  color: #fff !important;
}

.chss-employee-card-reveal-button strong {
  align-self: end;
  font-size: 14px;
  font-weight: 900;
}

.chss-employee-card-reveal-button small {
  align-self: start;
  opacity: .82;
  font-size: 10px;
}

.chss-employee-card-manage {
  border-top: 1px solid #e4ece9;
  padding-top: 10px;
}

.chss-employee-card-manage > summary {
  color: #536174;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.chss-employee-card-manage[open] > summary {
  margin-bottom: 12px;
}

.chss-employee-card-manage .chss-employee-card-delete {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #edf1f5;
}

.chss-employee-card-delete button {
  min-height: 42px !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 13px !important;
  background: #fff1f2 !important;
  color: #be123c !important;
  font-weight: 900 !important;
}

.chss-employee-card-viewer[hidden] {
  display: none !important;
}

.chss-employee-card-viewer {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.chss-employee-card-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 24, .88);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.chss-employee-card-viewer > section {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(100%, 460px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.36);
}

.chss-employee-card-viewer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.chss-employee-card-viewer header p,
.chss-employee-card-viewer header h2 {
  margin: 0;
}

.chss-employee-card-viewer header p {
  color: #0f766e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chss-employee-card-viewer header h2 {
  margin-top: 2px;
  font-size: 22px;
}

.chss-employee-card-viewer header button {
  display: grid !important;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 13px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 26px !important;
}

.chss-employee-card-image-frame {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 10px;
  border: 1px solid #dbe5ef;
  border-radius: 20px;
  background: #fff;
}

.chss-employee-card-image-frame img {
  display: block;
  width: 100%;
  max-width: 410px;
  max-height: 66dvh;
  object-fit: contain;
  border-radius: 12px;
}

.chss-employee-card-viewer > section > p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.chss-employee-card-viewer > section > p.is-demo {
  padding: 10px;
  border-radius: 12px;
  background: #fff7e8;
  color: #8a6212;
  font-weight: 700;
}

.chss-employee-card-viewer-done {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #1267e8 !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.chss-mobile-settings-icon.is-test {
  background: #e9f8f3 !important;
  color: #0f766e !important;
}

.chss-attendance-test-note {
  padding: 13px;
  border: 1px solid #bfe4da;
  border-radius: 15px;
  background: #f2fbf8;
  color: #205f55;
}

.chss-attendance-test-note strong,
.chss-attendance-test-note p {
  margin: 0;
}

.chss-attendance-test-note p {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.chss-attendance-test-form {
  display: grid;
  gap: 12px;
}

.chss-attendance-test-form > label:first-of-type {
  display: grid;
  gap: 6px;
  color: #344156;
  font-size: 12px;
  font-weight: 800;
}

.chss-attendance-test-check {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 9px !important;
  padding: 12px;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #f8fafc;
}

.chss-attendance-test-check input {
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
}

.chss-attendance-test-check span {
  display: grid;
  gap: 3px;
}

.chss-attendance-test-check strong {
  font-size: 12px;
}

.chss-attendance-test-check small {
  color: #718096;
  font-size: 10px;
  line-height: 1.4;
}

.chss-attendance-test-clear {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e7ebf1;
}

.chss-attendance-test-clear button {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid #dfe5ed !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #667085 !important;
  font-weight: 850 !important;
}

@media (max-width: 480px) {
  .chss-employee-card-vault-header {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .chss-employee-card-status {
    grid-column: 2;
    justify-self: start;
  }

  .chss-employee-card-viewer {
    padding: 0;
  }

  .chss-employee-card-viewer > section {
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .chss-employee-card-image-frame {
    min-height: 0;
  }

  .chss-employee-card-image-frame img {
    max-height: calc(100dvh - 220px);
  }
}


/* v0.35 - cleaner mobile attendance card tab with QR surfaced higher. */
.chss-attendance-empty-card-compact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.chss-attendance-empty-card-compact > div {
  min-width: 0;
}

.chss-attendance-empty-card-compact > h2,
.chss-attendance-empty-card-compact > p {
  margin: 0;
}

.chss-employee-card-upload input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #cfdbea;
  border-radius: 13px;
  background: #fbfdff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
}

.chss-employee-card-upload input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 10px;
  border: 1px solid #d7e2ef;
  border-radius: 10px;
  background: #f5f8fc;
  color: #334155;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.chss-employee-card-upload input[type="password"],
.chss-employee-card-delete input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #cfdbea;
  border-radius: 13px;
  background: #fbfdff;
  color: #0f172a;
  font: inherit;
  font-size: 16px;
}

.chss-employee-card-upload .chss-attendance-primary,
.chss-employee-card-delete button {
  width: 100% !important;
}

@media (max-width: 480px) {
  .chss-attendance-screen {
    gap: 10px;
  }

  .chss-attendance-title-row {
    align-items: center;
    gap: 10px;
  }

  .chss-attendance-title-row time {
    min-width: 62px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 17px;
  }

  .chss-attendance-empty-card,
  .chss-attendance-setup-card,
  .chss-employee-card-vault,
  .chss-attendance-reminder-card,
  .chss-attendance-ergani-note,
  .chss-attendance-history-panel {
    border-radius: 18px;
  }

  .chss-attendance-setup-card,
  .chss-attendance-empty-card,
  .chss-employee-card-vault,
  .chss-attendance-reminder-card,
  .chss-attendance-ergani-note,
  .chss-attendance-history-panel.chss-panel {
    padding: 14px;
  }

  .chss-attendance-empty-card-compact {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .chss-attendance-empty-card-compact > span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
  }

  .chss-attendance-empty-card-compact h2 {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.2;
  }

  .chss-attendance-empty-card-compact p {
    margin: 0;
    font-size: 12px;
    line-height: 1.42;
  }

  .chss-employee-card-vault {
    gap: 11px;
  }

  .chss-employee-card-vault-header {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
  }

  .chss-employee-card-vault-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 20px;
  }

  .chss-employee-card-vault-header h2 {
    font-size: 16px;
  }

  .chss-employee-card-vault-header small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.35;
  }

  .chss-employee-card-status {
    grid-column: 2;
    justify-self: start;
    padding: 5px 8px;
    font-size: 9px;
  }

  .chss-employee-card-help {
    padding: 10px 11px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
  }

  .chss-employee-card-upload,
  .chss-employee-card-delete {
    gap: 9px;
  }

  .chss-employee-card-upload label,
  .chss-employee-card-delete label {
    gap: 5px;
    font-size: 11px;
  }

  .chss-employee-card-upload label small {
    font-size: 9px;
    line-height: 1.35;
  }

  .chss-employee-card-upload input[type="file"],
  .chss-employee-card-upload input[type="password"],
  .chss-employee-card-delete input[type="password"] {
    min-height: 44px;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 14px;
  }

  .chss-employee-card-upload input[type="file"]::file-selector-button {
    margin-right: 8px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 11px;
  }

  .chss-attendance-primary {
    min-height: 46px;
    padding: 11px 14px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
  }

  .chss-employee-card-reveal-button {
    min-height: 62px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 2px 10px !important;
  }

  .chss-employee-card-reveal-button > span {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 20px;
  }

  .chss-employee-card-reveal-button strong {
    font-size: 13px;
  }

  .chss-employee-card-reveal-button small {
    font-size: 10px;
  }

  .chss-employee-card-manage {
    padding-top: 9px;
  }

  .chss-employee-card-manage > summary {
    font-size: 10.5px;
  }
}

/* v0.36 - custom employee QR uploader with preview and clear feedback. */
.chss-card-upload-field {
  display: grid;
  gap: 7px;
}

.chss-card-upload-label {
  color: #344156;
  font-size: 12px;
  font-weight: 850;
}

.chss-card-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.chss-card-file-picker {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px !important;
  min-height: 68px;
  padding: 10px 12px;
  border: 1.5px dashed #b8cbe0;
  border-radius: 16px;
  background: #f8fbff;
  color: #243349 !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.chss-card-file-picker:hover {
  border-color: #7eafe9;
  background: #f2f8ff;
}

.chss-card-file-picker:active {
  transform: scale(.995);
}

.chss-card-file-input:focus-visible + .chss-card-file-picker {
  outline: 3px solid rgba(18, 103, 232, .16);
  outline-offset: 2px;
  border-color: #7eafe9;
}

.chss-card-file-picker-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #e9f8f3;
  color: #0f8270;
  font-size: 23px;
  font-weight: 900;
}

.chss-card-file-picker > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.chss-card-file-picker strong {
  color: #1f2d40;
  font-size: 13px;
  font-weight: 900;
}

.chss-card-file-picker small {
  color: #718096;
  font-size: 10px;
  font-weight: 550;
  line-height: 1.35;
}

.chss-card-upload-preview[hidden] {
  display: none !important;
}

.chss-card-upload-preview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid #bfe4da;
  border-radius: 16px;
  background: #f3fcf9;
}

.chss-card-upload-preview-image {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid #d6e5e0;
  border-radius: 12px;
  background: #fff;
}

.chss-card-upload-preview-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chss-card-upload-preview-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chss-card-upload-preview-copy strong {
  overflow: hidden;
  color: #243349;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chss-card-upload-preview-copy small {
  color: #0f766e;
  font-size: 10px;
  font-weight: 750;
}

.chss-card-upload-preview > button {
  display: grid !important;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid #d7e2ef !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #667085 !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.chss-card-upload-hint {
  color: #738197;
  font-size: 9.5px;
  font-weight: 550;
  line-height: 1.4;
}

.chss-card-upload-feedback {
  min-height: 0;
  margin: 0;
  color: #0f766e;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.chss-card-upload-feedback:empty {
  display: none;
}

.chss-card-upload-feedback.is-error {
  color: #be123c;
}

.chss-employee-card-upload.is-submitting {
  opacity: .78;
  pointer-events: none;
}

.chss-employee-card-upload [data-chss-card-upload-submit]:disabled {
  background: #dbe5f2 !important;
  color: #7b8798 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

@media (max-width: 480px) {
  .chss-card-file-picker {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 60px;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .chss-card-file-picker-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 20px;
  }

  .chss-card-file-picker strong {
    font-size: 12px;
  }

  .chss-card-file-picker small {
    font-size: 9.5px;
  }

  .chss-card-upload-preview {
    grid-template-columns: 56px minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
  }

  .chss-card-upload-preview-image {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }

  .chss-card-upload-preview > button {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}


/* v0.37 - reliable login checkbox and compact authentication form. */
.chss-app .chss-auth-card .chss-checkbox {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100%;
  margin: 2px 0 0 !important;
  padding: 11px 12px;
  border: 1px solid #e1e7ef;
  border-radius: 13px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}

.chss-app .chss-auth-card .chss-checkbox input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  display: inline-block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
  accent-color: #64b99c;
  cursor: pointer;
}

.chss-app .chss-auth-card .chss-checkbox > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chss-app .chss-auth-card .chss-checkbox strong {
  color: #334155;
  font-size: 13px;
  line-height: 1.25;
}

.chss-app .chss-auth-card .chss-checkbox small {
  color: #778397;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.chss-app .chss-auth-card .chss-form {
  display: grid;
  gap: 12px;
}

.chss-app .chss-auth-card .chss-form > label:not(.chss-checkbox) {
  gap: 6px;
}

.chss-app .chss-auth-card .chss-button {
  width: 100%;
}

@media (max-width: 480px) {
  .chss-app .chss-auth-card .chss-checkbox {
    padding: 10px 11px;
  }
}

/* v0.38 — account security, temporary passwords and active devices. */
.chss-force-password-card {
  position: relative;
  overflow: hidden;
}

.chss-force-password-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: #e9f8f3;
  font-size: 27px;
}

.chss-force-password-card .chss-form label small {
  display: block;
  margin-top: 5px;
  color: #748198;
  font-size: 10px;
  font-weight: 500;
}

.chss-force-password-logout {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.chss-force-password-logout button {
  padding: 8px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #718096 !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer;
}

.chss-app .chss-account-security-summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #cce8df;
  border-radius: 16px;
  background: #f2fbf8;
}

.chss-app .chss-account-security-summary > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #14866d;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
}

.chss-app .chss-account-security-summary strong,
.chss-app .chss-account-security-summary p {
  margin: 0;
}

.chss-app .chss-account-security-summary strong {
  color: #123b35;
  font-size: 14px;
}

.chss-app .chss-account-security-summary p {
  margin-top: 3px;
  color: #5d746f;
  font-size: 11px;
  line-height: 1.4;
}

.chss-app .chss-account-session-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.chss-app .chss-account-session-list article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  background: #fbfcfe;
}

.chss-app .chss-account-session-list article.is-current {
  border-color: #bfe4da;
  background: #f3fbf8;
}

.chss-app .chss-account-session-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #edf4ff;
  color: #1267e8;
  font-size: 18px;
}

.chss-app .chss-account-session-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.chss-app .chss-account-session-list strong {
  color: #18263e;
  font-size: 12px;
}

.chss-app .chss-account-session-list small {
  overflow: hidden;
  color: #748198;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chss-app .chss-account-session-list em {
  padding: 5px 7px;
  border-radius: 999px;
  background: #e5f8f1;
  color: #0f766e;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.chss-app .chss-account-security-action {
  margin-top: 14px;
}

.chss-app .chss-account-security-action button {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 13px !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 13px !important;
  background: #fff1f2 !important;
  color: #be123c !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.chss-app .chss-account-security-ok {
  margin: 14px 0 0;
  padding: 11px;
  border-radius: 12px;
  background: #f5f8fc;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

.chss-app .chss-mobile-staff-login-meta {
  display: block;
  margin-top: 4px;
  color: #718096;
  font-size: 9px;
  font-weight: 700;
}

.chss-app .chss-mobile-staff-security-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 13px;
}

.chss-app .chss-mobile-staff-security-summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.chss-app .chss-mobile-staff-security-summary small {
  color: #7a8798;
  font-size: 8.5px;
  font-weight: 800;
}

.chss-app .chss-mobile-staff-security-summary strong {
  overflow: hidden;
  color: #25324a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chss-app .chss-staff-password-hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px;
  border-radius: 11px;
  background: #fff8e8;
  color: #7b5c1a;
  font-size: 10px;
  line-height: 1.4;
}

.chss-app .chss-staff-session-revoke {
  border-color: #fecdd3 !important;
  background: #fff1f2 !important;
  color: #be123c !important;
}

@media (max-width: 480px) {
  .chss-force-password-shell {
    padding: 10px;
  }

  .chss-force-password-card {
    padding: 20px 16px;
  }

  .chss-force-password-card h1 {
    font-size: 25px;
  }

  .chss-app .chss-account-session-list article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .chss-app .chss-account-session-list em {
    grid-column: 2;
    justify-self: start;
  }

  .chss-app .chss-mobile-staff-security-summary {
    grid-template-columns: 1fr;
  }

  .chss-app .chss-mobile-staff-security-summary > span {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .chss-app .chss-mobile-staff-security-summary strong {
    text-align: right;
  }
}


/* v0.39 - persistent in-app notification centre. */
.chss-app .chss-notification-sheet {
  max-height: min(720px, calc(100dvh - 28px));
  overflow: auto;
}

.chss-app .chss-notifications-read-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 11px;
  border: 1px solid #dbe8f5;
  border-radius: 13px;
  background: #f5f9ff;
}

.chss-app .chss-notifications-read-form span {
  color: #526175;
  font-size: 11px;
  font-weight: 800;
}

.chss-app .chss-notifications-read-form button {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid #bfd5f3 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1267e8 !important;
  font: inherit !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.chss-app .chss-account-notifications {
  display: grid;
  gap: 8px;
}

.chss-app .chss-account-notifications .chss-account-notification {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e3e9ef;
  border-radius: 14px;
  background: #fbfcfd;
  color: inherit;
  text-decoration: none !important;
}

.chss-app .chss-account-notifications .chss-account-notification.is-unread {
  border-color: #bcd6f6;
  background: #f2f7ff;
  box-shadow: inset 3px 0 0 #1267e8;
}

.chss-app .chss-account-notification > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e7f5f2;
  font-size: 17px;
}

.chss-app .chss-account-notification > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chss-app .chss-account-notification strong {
  color: #10204b;
  font-size: 13px;
}

.chss-app .chss-account-notification p {
  margin: 0;
  overflow: hidden;
  color: #56657b;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.chss-app .chss-account-notification small {
  color: #8791a1;
  font-size: 9.5px;
}

.chss-app .chss-account-notification > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1267e8;
}

@media (max-width: 480px) {
  .chss-app .chss-notification-sheet {
    max-height: 100dvh;
  }

  .chss-app .chss-notifications-read-form {
    align-items: stretch;
    flex-direction: column;
  }

  .chss-app .chss-notifications-read-form button {
    width: 100% !important;
  }
}

/* v0.40 — shift workload/rest advisory checks. */
.chss-shift-rule-feedback {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid #d9e4ef;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.chss-shift-rule-feedback[hidden] {
  display: none !important;
}

.chss-shift-rule-feedback > strong {
  color: #243247;
  font-size: 12px;
  font-weight: 900;
}

.chss-shift-rule-feedback ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chss-shift-rule-feedback li {
  display: grid;
  gap: 2px;
  padding-left: 12px;
  border-left: 3px solid #e5a526;
}

.chss-shift-rule-feedback li b {
  color: #694b0b;
  font-size: 11px;
}

.chss-shift-rule-feedback li span {
  color: #725b2f;
  font-size: 10px;
}

.chss-shift-rule-feedback.has-warnings {
  border-color: #f1d89d;
  background: #fffaf0;
}

.chss-shift-rule-feedback.is-error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #9f1239;
}

.chss-shift-rule-feedback.is-error > strong {
  color: #9f1239;
}

.chss-shift-rule-feedback.is-clear {
  border-color: #bfdfd5;
  background: #f0faf6;
  color: #14745e;
}

.chss-shift-rule-feedback.is-clear > strong {
  color: #14745e;
}

form.is-chss-rule-checking button[type="submit"] {
  opacity: .7;
  pointer-events: none;
}

.chss-shift-rule-week-summary {
  overflow: hidden;
  border: 1px solid #f0d596;
  border-radius: 17px;
  background: #fffaf0;
}

.chss-shift-rule-week-summary > summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  color: #6f5319;
  cursor: pointer;
  list-style: none;
}

.chss-shift-rule-week-summary > summary::-webkit-details-marker {
  display: none;
}

.chss-shift-rule-week-summary > summary > span:first-child {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f8d47d;
  font-size: 18px;
}

.chss-shift-rule-week-summary > summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chss-shift-rule-week-summary > summary strong {
  font-size: 12px;
  font-weight: 900;
}

.chss-shift-rule-week-summary > summary small {
  color: #846a37;
  font-size: 10px;
}

.chss-shift-rule-week-summary > summary i {
  font-size: 22px;
  font-style: normal;
  transition: transform .2s ease;
}

.chss-shift-rule-week-summary[open] > summary i {
  transform: rotate(90deg);
}

.chss-shift-rule-week-summary > div {
  display: grid;
  gap: 9px;
  padding: 0 13px 13px;
}

.chss-shift-rule-week-summary ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chss-shift-rule-week-summary li {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255,255,255,.72);
}

.chss-shift-rule-week-summary li strong {
  color: #5f470f;
  font-size: 10px;
}

.chss-shift-rule-week-summary li span,
.chss-shift-rule-week-summary > div > p,
.chss-shift-rule-week-summary > div > small {
  margin: 0;
  color: #826a38;
  font-size: 9.5px;
  line-height: 1.4;
}

.chss-shift-rule-dialog[hidden] {
  display: none !important;
}

.chss-shift-rule-dialog {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chss-shift-rule-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .64);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.chss-shift-rule-dialog > section {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(100%, 520px);
  max-height: 88dvh;
  overflow: auto;
  padding: 17px 17px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -22px 60px rgba(15,23,42,.28);
}

.chss-shift-rule-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.chss-shift-rule-dialog header p,
.chss-shift-rule-dialog header h2 {
  margin: 0;
}

.chss-shift-rule-dialog header p {
  color: #ad7414;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.chss-shift-rule-dialog header h2 {
  margin-top: 2px;
  color: #172033;
  font-size: 21px;
}

.chss-shift-rule-dialog header button {
  display: grid !important;
  place-items: center;
  flex: 0 0 38px;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 24px !important;
}

.chss-shift-rule-dialog-copy {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.chss-shift-rule-dialog ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chss-shift-rule-dialog li {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #f0d89f;
  border-radius: 13px;
  background: #fffaf0;
}

.chss-shift-rule-dialog li.is-high {
  border-color: #fecaca;
  background: #fff5f5;
}

.chss-shift-rule-dialog li strong {
  color: #5f470f;
  font-size: 11px;
}

.chss-shift-rule-dialog li.is-high strong {
  color: #9f1239;
}

.chss-shift-rule-dialog li span {
  color: #725b2f;
  font-size: 10px;
  line-height: 1.4;
}

.chss-shift-rule-dialog li.is-high span {
  color: #8f344d;
}

.chss-shift-rule-disclaimer {
  margin: 0;
  padding: 9px 10px;
  border-radius: 11px;
  background: #f5f8fc;
  color: #6b778c;
  font-size: 9.5px;
  line-height: 1.4;
}

.chss-shift-rule-dialog footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.chss-shift-rule-dialog footer button {
  min-height: 46px !important;
  padding: 10px 12px !important;
  border: 1px solid #d8e1ec !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #526176 !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.chss-shift-rule-dialog footer button[data-chss-rule-continue] {
  border-color: #1267e8 !important;
  background: #1267e8 !important;
  color: #fff !important;
}

body.chss-shift-rule-dialog-open {
  overflow: hidden !important;
}

body.chss-shift-rule-dialog-open > .chss-mobile-nav-footer {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 640px) {
  .chss-shift-rule-dialog {
    align-items: center;
    padding: 24px;
  }

  .chss-shift-rule-dialog > section {
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .chss-shift-rule-feedback {
    padding: 10px 11px;
    border-radius: 12px;
  }

  .chss-shift-rule-week-summary {
    border-radius: 15px;
  }

  .chss-shift-rule-dialog footer {
    grid-template-columns: 1fr;
  }

  .chss-shift-rule-dialog footer button[data-chss-rule-continue] {
    grid-row: 1;
  }
}


/* v0.41 — grouped, compact weekly rule summary. */
.chss-shift-rule-week-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.chss-shift-rule-groups {
  display: grid;
  gap: 9px;
}

.chss-shift-rule-employee-group {
  overflow: hidden;
  border: 1px solid rgba(231, 200, 124, .72);
  border-radius: 13px;
  background: rgba(255,255,255,.78);
}

.chss-shift-rule-employee-group.is-extra {
  display: none;
}

.chss-shift-rule-groups.is-expanded .chss-shift-rule-employee-group.is-extra {
  display: block;
}

.chss-shift-rule-employee-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(231, 200, 124, .48);
}

.chss-shift-rule-employee-group > header strong {
  overflow: hidden;
  color: #513d12;
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chss-shift-rule-employee-group > header span {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff5d8;
  color: #765815;
  font-size: 9px;
  font-weight: 900;
}

.chss-shift-rule-employee-group ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chss-shift-rule-employee-group li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f2ead7;
  background: transparent;
}

.chss-shift-rule-employee-group li:last-child {
  border-bottom: 0;
}

.chss-shift-rule-employee-group li a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  padding: 9px 10px;
  color: inherit;
  text-decoration: none !important;
}

.chss-shift-rule-employee-group li a:active {
  background: rgba(255, 248, 228, .9);
}

.chss-rule-severity {
  grid-row: 1 / 3;
  align-self: center;
  padding: 5px 7px;
  border-radius: 8px;
  background: #fff1c9;
  color: #76540c;
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.chss-shift-rule-employee-group li.is-high .chss-rule-severity {
  background: #ffe3d9;
  color: #a13d1e;
}

.chss-shift-rule-employee-group li a > strong {
  min-width: 0;
  color: #544219;
  font-size: 10.5px;
  font-weight: 900;
}

.chss-shift-rule-employee-group li.is-high a > strong {
  color: #863617;
}

.chss-shift-rule-employee-group li a > small {
  overflow: hidden;
  min-width: 0;
  color: #806b3e;
  font-size: 9.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chss-shift-rule-employee-group li a > i {
  grid-column: 3;
  grid-row: 1 / 3;
  color: #9b8044;
  font-size: 19px;
  font-style: normal;
}

.chss-shift-rule-more {
  width: 100% !important;
  min-height: 39px !important;
  padding: 8px 12px !important;
  border: 1px solid #ead294 !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.78) !important;
  color: #725617 !important;
  font: inherit !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.chss-shift-rule-legal-note {
  color: #826a38;
  font-size: 9px;
  line-height: 1.4;
}

.chss-mobile-shift-card.is-rule-target {
  outline: 3px solid rgba(18, 103, 232, .22);
  outline-offset: 2px;
  box-shadow: 0 12px 30px rgba(18, 103, 232, .15) !important;
}

@media (max-width: 480px) {
  .chss-shift-rule-week-summary > summary {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 10px 11px;
  }

  .chss-shift-rule-week-summary > summary > span:first-child {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 16px;
  }

  .chss-shift-rule-week-summary > summary strong {
    font-size: 11px;
  }

  .chss-shift-rule-week-summary > summary small {
    font-size: 9px;
  }
}

/* v0.42 - planning versus attendance reports and exports. */
@media (max-width: 480px) {
  .chss-reports-v042 .chss-mobile-reports-header > div > p {
    margin: 5px 0 0;
    color: #6b7890;
    font-size: 13px;
    line-height: 1.4;
  }

  .chss-report-filter-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #dfe7f1;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
  }

  .chss-report-filter-panel label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #526176;
    font-size: 11px;
    font-weight: 850;
  }

  .chss-report-filter-panel .chss-report-filter-employee,
  .chss-report-filter-panel button {
    grid-column: 1 / -1;
  }

  .chss-app .chss-report-filter-panel input,
  .chss-app .chss-report-filter-panel select {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #d4deea;
    border-radius: 12px;
    background: #fbfdff;
    color: #17233a;
    font-size: 13px;
  }

  .chss-report-filter-panel button {
    min-height: 45px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(100deg, #1267e8, #2686f5);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
  }

  .chss-report-active-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #cfe0f5;
    border-radius: 14px;
    background: #f4f8ff;
  }

  .chss-report-active-filter span {
    overflow: hidden;
    color: #17345f;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chss-report-active-filter small {
    grid-column: 1;
    color: #718096;
    font-size: 9px;
  }

  .chss-report-active-filter a {
    grid-column: 2;
    grid-row: 1 / 3;
    color: #1267e8;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
  }

  .chss-report-comparison-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chss-report-comparison-summary article {
    min-height: 98px;
  }

  .chss-report-comparison-summary article.is-negative strong {
    color: #be123c;
  }

  .chss-report-comparison-summary article.is-positive strong {
    color: #0f8a72;
  }

  .chss-report-comparison-summary article.is-warning {
    border-color: #f2d39c;
    background: #fffaf0;
  }

  .chss-report-comparison-summary article.is-warning strong {
    color: #b45309;
  }

  .chss-report-open-employee {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0 12px 12px;
    border: 1px solid #cfe0f5;
    border-radius: 12px;
    background: #f4f8ff;
    color: #1267e8;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
  }

  .chss-report-employee-overview {
    margin-bottom: 10px;
    padding: 13px;
    border: 1px solid #dce6f2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
  }

  .chss-report-employee-overview > header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .chss-report-employee-overview h2,
  .chss-report-employee-overview p,
  .chss-report-employee-overview header small {
    margin: 0;
  }

  .chss-report-employee-overview h2 {
    margin-top: 2px;
    color: #0d2348;
    font-size: 18px;
  }

  .chss-report-employee-overview header small {
    display: block;
    margin-top: 3px;
    color: #718096;
    font-size: 10px;
  }

  .chss-report-personal-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
  }

  .chss-report-personal-stats > span {
    display: grid;
    gap: 3px;
    padding: 9px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #fbfcff;
  }

  .chss-report-personal-stats small {
    color: #778498;
    font-size: 9px;
    font-weight: 800;
  }

  .chss-report-personal-stats strong {
    color: #17345f;
    font-size: 16px;
  }

  .chss-report-detail-list {
    display: grid;
    gap: 9px;
  }

  .chss-report-detail-card {
    overflow: hidden;
    border: 1px solid #dfe6ee;
    border-left: 4px solid #90a3bb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .04);
  }

  .chss-report-detail-card.is-complete {
    border-left-color: #23a386;
  }

  .chss-report-detail-card.is-warning {
    border-left-color: #f0a83d;
  }

  .chss-report-detail-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid #edf1f6;
  }

  .chss-report-detail-card > header > div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .chss-report-detail-card > header strong {
    color: #10264a;
    font-size: 13px;
  }

  .chss-report-detail-card > header small {
    overflow: hidden;
    color: #718096;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chss-report-detail-card > header > span {
    flex: 0 0 auto;
    padding: 5px 7px;
    border-radius: 999px;
    background: #f1f5fb;
    color: #5d6b7f;
    font-size: 8.5px;
    font-weight: 900;
  }

  .chss-report-detail-card.is-complete > header > span {
    background: #e9f8f3;
    color: #0f766e;
  }

  .chss-report-detail-card.is-warning > header > span {
    background: #fff4dc;
    color: #8a6212;
  }

  .chss-report-detail-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 11px;
  }

  .chss-report-detail-times > span {
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid #e8edf3;
    border-radius: 11px;
    background: #fbfcff;
  }

  .chss-report-detail-times small {
    color: #7a8799;
    font-size: 8.5px;
    font-weight: 800;
  }

  .chss-report-detail-times strong {
    color: #17345f;
    font-size: 13px;
  }

  .chss-report-detail-card > p {
    margin: 0;
    padding: 0 12px 11px;
    color: #9a6312;
    font-size: 10px;
    line-height: 1.4;
  }
}


/* v0.43 — accessibility controls and keyboard support */
.chss-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.chss-app .chss-skip-link {
	position: fixed;
	top: max(8px, env(safe-area-inset-top));
	left: 12px;
	z-index: 2147483647;
	padding: 11px 15px;
	border: 3px solid #fff;
	border-radius: 12px;
	background: #071b44;
	color: #fff;
	font-weight: 900;
	text-decoration: none;
	box-shadow: 0 0 0 3px #071b44;
	transform: translateY(-180%);
	transition: transform .15s ease;
}

.chss-app .chss-skip-link:focus {
	transform: translateY(0);
}

.chss-app :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.chss-account-portal-root :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #0f6de8 !important;
	outline-offset: 3px !important;
}

.chss-app :where(button, input, select, textarea, summary),
.chss-account-portal-root :where(button, input, select, textarea, summary) {
	min-height: 44px;
}

.chss-accessibility-sheet {
	gap: 0;
}

.chss-accessibility-intro {
	margin: 0;
	padding: 16px 18px 12px;
	color: #5b687c;
	font-size: 13px;
	line-height: 1.5;
}

.chss-accessibility-font {
	margin: 0 18px 16px;
	padding: 0;
	border: 0;
}

.chss-accessibility-font legend {
	margin-bottom: 9px;
	color: #132033;
	font-size: 14px;
	font-weight: 900;
}

.chss-accessibility-font [role="radiogroup"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.chss-accessibility-font button {
	display: grid;
	place-items: center;
	gap: 3px;
	min-height: 76px;
	padding: 9px 5px;
	border: 2px solid #dbe3ee;
	border-radius: 14px;
	background: #fff;
	color: #24344b;
	cursor: pointer;
}

.chss-accessibility-font button strong {
	font-size: 20px;
	line-height: 1;
}

.chss-accessibility-font button span {
	font-size: 11px;
	font-weight: 800;
}

.chss-accessibility-font button.is-active {
	border-color: #1267e8;
	background: #eaf3ff;
	color: #0c4eae;
	box-shadow: inset 0 0 0 1px #1267e8;
}

.chss-accessibility-options {
	border-top: 1px solid #e5eaf2;
}

.chss-accessibility-options article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 15px 18px;
	border-bottom: 1px solid #e5eaf2;
}

.chss-accessibility-options article strong,
.chss-accessibility-options article p {
	display: block;
	margin: 0;
}

.chss-accessibility-options article strong {
	color: #132033;
	font-size: 14px;
}

.chss-accessibility-options article p {
	margin-top: 3px;
	color: #68758a;
	font-size: 11px;
	line-height: 1.4;
}

.chss-accessibility-options [role="switch"] {
	position: relative;
	width: 52px;
	min-width: 52px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	border: 2px solid #aeb9c8;
	border-radius: 999px;
	background: #dfe5ed;
	cursor: pointer;
}

.chss-accessibility-options [role="switch"] span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 5px rgba(10, 25, 55, .24);
	transition: transform .16s ease;
}

.chss-accessibility-options [role="switch"].is-active {
	border-color: #1267e8;
	background: #1267e8;
}

.chss-accessibility-options [role="switch"].is-active span {
	transform: translateX(20px);
}

.chss-accessibility-reset {
	margin: 16px 18px calc(18px + env(safe-area-inset-bottom));
	width: calc(100% - 36px);
	min-height: 46px;
	border: 1px solid #cbd5e1;
	border-radius: 13px;
	background: #fff;
	color: #24344b;
	font-weight: 850;
	cursor: pointer;
}

html[data-chss-font-size="large"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="large"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 14px !important;
	line-height: 1.5;
}

html[data-chss-font-size="large"] .chss-app small,
html[data-chss-font-size="large"] .chss-account-portal-root small {
	font-size: 12.5px !important;
	line-height: 1.45;
}

html[data-chss-font-size="large"] .chss-app h1,
html[data-chss-font-size="large"] .chss-account-portal-root h1 { font-size: 30px !important; line-height: 1.15; }
html[data-chss-font-size="large"] .chss-app h2,
html[data-chss-font-size="large"] .chss-account-portal-root h2 { font-size: 22px !important; line-height: 1.2; }
html[data-chss-font-size="large"] .chss-app h3,
html[data-chss-font-size="large"] .chss-account-portal-root h3 { font-size: 18px !important; line-height: 1.3; }

html[data-chss-font-size="xlarge"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="xlarge"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 17px !important;
	line-height: 1.55;
}

html[data-chss-font-size="xlarge"] .chss-app small,
html[data-chss-font-size="xlarge"] .chss-account-portal-root small {
	font-size: 14px !important;
	line-height: 1.5;
}

html[data-chss-font-size="xlarge"] .chss-app h1,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h1 { font-size: 32px !important; line-height: 1.15; }
html[data-chss-font-size="xlarge"] .chss-app h2,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h2 { font-size: 24px !important; line-height: 1.2; }
html[data-chss-font-size="xlarge"] .chss-app h3,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h3 { font-size: 20px !important; line-height: 1.3; }

html[data-chss-font-size="large"] .chss-tab-mobile-label { font-size: 9.8px !important; }
html[data-chss-font-size="xlarge"] .chss-tab-mobile-label { font-size: 10.4px !important; }

html[data-chss-high-contrast="true"] {
	--chss-bg: #ffffff;
	--chss-surface: #ffffff;
	--chss-text: #000000;
	--chss-muted: #354052;
	--chss-border: #111827;
	--chss-primary: #004fc4;
	--chss-primary-2: #4a1aa8;
	--chss-success: #08752b;
	--chss-warning: #8a4b00;
	--chss-danger: #b00020;
	--chss-shadow: none;
}

html[data-chss-high-contrast="true"] .chss-app,
html[data-chss-high-contrast="true"] .chss-account-portal-root {
	color: #000;
}

html[data-chss-high-contrast="true"] .chss-app :where(.chss-panel, .chss-shift-card, .chss-account-sheet, .chss-profile-menu, .chss-mobile-settings-card, article),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(.chss-account-sheet, .chss-profile-menu, article) {
	border-color: #111827 !important;
	box-shadow: none !important;
}

html[data-chss-high-contrast="true"] .chss-app :where(input, select, textarea),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(input, select, textarea) {
	border: 2px solid #111827 !important;
	background: #fff !important;
	color: #000 !important;
}

html[data-chss-high-contrast="true"] .chss-app :where(.chss-muted, small, .chss-accessibility-intro),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(.chss-muted, small, .chss-accessibility-intro) {
	color: #354052 !important;
}

html[data-chss-strong-controls="true"] .chss-app :where(button, .chss-button, input[type="submit"], a.chss-attendance-quick-link),
html[data-chss-strong-controls="true"] .chss-account-portal-root :where(button, .chss-button, input[type="submit"]) {
	border-width: 2px !important;
	font-weight: 900 !important;
	box-shadow: none !important;
}

html[data-chss-strong-controls="true"] .chss-app a:not(.chss-tab):not(.chss-attendance-quick-link),
html[data-chss-strong-controls="true"] .chss-account-portal-root a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

html[data-chss-reduce-motion="true"] .chss-app *,
html[data-chss-reduce-motion="true"] .chss-app *::before,
html[data-chss-reduce-motion="true"] .chss-app *::after,
html[data-chss-reduce-motion="true"] .chss-account-portal-root *,
html[data-chss-reduce-motion="true"] .chss-account-portal-root *::before,
html[data-chss-reduce-motion="true"] .chss-account-portal-root *::after {
	scroll-behavior: auto !important;
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
}

@media (prefers-reduced-motion: reduce) {
	.chss-app *, .chss-app *::before, .chss-app *::after,
	.chss-account-portal-root *, .chss-account-portal-root *::before, .chss-account-portal-root *::after {
		scroll-behavior: auto !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

@media (max-width: 480px) {
	.chss-accessibility-sheet {
		max-height: min(92dvh, 760px);
	}

	html[data-chss-font-size="xlarge"] .chss-accessibility-font [role="radiogroup"] {
		grid-template-columns: 1fr;
	}

	html[data-chss-font-size="xlarge"] .chss-accessibility-font button {
		grid-template-columns: auto 1fr;
		place-items: center start;
		min-height: 54px;
		padding-inline: 14px;
	}
}


/* v0.44 — refined accessibility icon and gentler text scaling */
.chss-profile-links [data-chss-account-open="accessibility"] svg {
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.chss-accessibility-font button span {
	text-align: center;
	line-height: 1.25;
}

@media (max-width: 480px) {
	.chss-accessibility-font button {
		min-height: 70px;
	}

	html[data-chss-font-size="xlarge"] .chss-accessibility-font button span {
		font-size: 12px;
	}
}


/* v0.45 — accessibility button polish and clearer text scaling */
.chss-accessibility-font [role="radiogroup"] {
	gap: 10px;
}

.chss-accessibility-font button {
	min-height: 74px;
	padding: 10px 8px;
	border: 1px solid #d9e2ec;
	border-radius: 18px;
	background: #ffffff;
	color: #13233f;
	box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.chss-accessibility-font button:hover {
	border-color: #b8c8dc;
	background: #f8fbff;
}

.chss-accessibility-font button strong {
	font-size: 24px;
	font-weight: 900;
}

.chss-accessibility-font button span {
	font-size: 12px;
	font-weight: 800;
	color: #4f5f77;
}

.chss-accessibility-font button.is-active {
	border-color: #2b6fe8;
	background: #eef4ff;
	color: #0d56bc;
	box-shadow: inset 0 0 0 1px #2b6fe8;
}

.chss-accessibility-font button.is-active span {
	color: #0d56bc;
}

.chss-accessibility-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid #d9e2ec;
	border-radius: 14px;
	background: #fff;
	color: #13233f;
	font-size: 14px;
	font-weight: 850;
	box-shadow: none;
}

.chss-accessibility-reset:hover {
	background: #f8fafc;
	border-color: #c5d0dc;
}

html[data-chss-font-size="large"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="large"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 15.5px !important;
	line-height: 1.52;
}

html[data-chss-font-size="large"] .chss-app small,
html[data-chss-font-size="large"] .chss-account-portal-root small {
	font-size: 13px !important;
	line-height: 1.45;
}

html[data-chss-font-size="large"] .chss-app h1,
html[data-chss-font-size="large"] .chss-account-portal-root h1 { font-size: 31px !important; line-height: 1.15; }
html[data-chss-font-size="large"] .chss-app h2,
html[data-chss-font-size="large"] .chss-account-portal-root h2 { font-size: 23px !important; line-height: 1.2; }
html[data-chss-font-size="large"] .chss-app h3,
html[data-chss-font-size="large"] .chss-account-portal-root h3 { font-size: 19px !important; line-height: 1.3; }

html[data-chss-font-size="xlarge"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="xlarge"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 17.5px !important;
	line-height: 1.56;
}

html[data-chss-font-size="xlarge"] .chss-app small,
html[data-chss-font-size="xlarge"] .chss-account-portal-root small {
	font-size: 14.5px !important;
	line-height: 1.5;
}

html[data-chss-font-size="xlarge"] .chss-app h1,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h1 { font-size: 33px !important; line-height: 1.15; }
html[data-chss-font-size="xlarge"] .chss-app h2,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h2 { font-size: 25px !important; line-height: 1.2; }
html[data-chss-font-size="xlarge"] .chss-app h3,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h3 { font-size: 20.5px !important; line-height: 1.3; }

html[data-chss-font-size="large"] .chss-tab-mobile-label { font-size: 10px !important; }
html[data-chss-font-size="xlarge"] .chss-tab-mobile-label { font-size: 10.6px !important; }

@media (max-width: 480px) {
	.chss-accessibility-font button {
		min-height: 72px;
	}

	html[data-chss-font-size="xlarge"] .chss-accessibility-font button {
		min-height: 58px;
	}
}


/* v0.47 — five-step accessibility font slider */
.chss-accessibility-font-slider {
	padding: 14px 16px 12px;
	border: 1px solid #d9e2ec;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.chss-accessibility-font-current {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.chss-accessibility-font-current > span {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: #eef4ff;
	color: #145fc7;
	font-size: 21px;
	font-weight: 950;
}

.chss-accessibility-font-current output {
	color: #13233f;
	font-size: 14px;
	font-weight: 900;
}

.chss-accessibility-font-slider input[type="range"] {
	--chss-font-range-progress: 50%;
	width: 100%;
	height: 32px;
	min-height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.chss-accessibility-font-slider input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, #2b6fe8 0 var(--chss-font-range-progress), #d9e2ec var(--chss-font-range-progress) 100%);
}

.chss-accessibility-font-slider input[type="range"]::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: #d9e2ec;
}

.chss-accessibility-font-slider input[type="range"]::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: #2b6fe8;
}

.chss-accessibility-font-slider input[type="range"]::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	margin-top: -9px;
	border: 3px solid #2b6fe8;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 7px rgba(25, 62, 125, .22);
	appearance: none;
	-webkit-appearance: none;
}

.chss-accessibility-font-slider input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 3px solid #2b6fe8;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 7px rgba(25, 62, 125, .22);
}

.chss-accessibility-font-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: end;
	margin-top: -2px;
	color: #67758b;
	font-size: 11px;
	font-weight: 850;
	text-align: center;
}

.chss-accessibility-font-steps span:first-child { text-align: left; }
.chss-accessibility-font-steps span:last-child { text-align: right; }
.chss-accessibility-font-steps .is-normal {
	color: #13233f;
	font-size: 13px;
	font-weight: 950;
}

.chss-accessibility-font-ends {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 5px;
	color: #78869a;
	font-size: 10px;
	font-weight: 750;
}

html[data-chss-font-size="xsmall"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="xsmall"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 12px !important;
	line-height: 1.42;
}

html[data-chss-font-size="xsmall"] .chss-app small,
html[data-chss-font-size="xsmall"] .chss-account-portal-root small {
	font-size: 10px !important;
	line-height: 1.4;
}

html[data-chss-font-size="xsmall"] .chss-app h1,
html[data-chss-font-size="xsmall"] .chss-account-portal-root h1 { font-size: 25px !important; line-height: 1.15; }
html[data-chss-font-size="xsmall"] .chss-app h2,
html[data-chss-font-size="xsmall"] .chss-account-portal-root h2 { font-size: 19px !important; line-height: 1.2; }
html[data-chss-font-size="xsmall"] .chss-app h3,
html[data-chss-font-size="xsmall"] .chss-account-portal-root h3 { font-size: 16px !important; line-height: 1.3; }

html[data-chss-font-size="small"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="small"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 13px !important;
	line-height: 1.46;
}

html[data-chss-font-size="small"] .chss-app small,
html[data-chss-font-size="small"] .chss-account-portal-root small {
	font-size: 11px !important;
	line-height: 1.42;
}

html[data-chss-font-size="small"] .chss-app h1,
html[data-chss-font-size="small"] .chss-account-portal-root h1 { font-size: 27px !important; line-height: 1.15; }
html[data-chss-font-size="small"] .chss-app h2,
html[data-chss-font-size="small"] .chss-account-portal-root h2 { font-size: 20px !important; line-height: 1.2; }
html[data-chss-font-size="small"] .chss-app h3,
html[data-chss-font-size="small"] .chss-account-portal-root h3 { font-size: 17px !important; line-height: 1.3; }

html[data-chss-font-size="large"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="large"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 16px !important;
	line-height: 1.52;
}

html[data-chss-font-size="large"] .chss-app small,
html[data-chss-font-size="large"] .chss-account-portal-root small {
	font-size: 13.5px !important;
	line-height: 1.46;
}

html[data-chss-font-size="large"] .chss-app h1,
html[data-chss-font-size="large"] .chss-account-portal-root h1 { font-size: 31px !important; line-height: 1.15; }
html[data-chss-font-size="large"] .chss-app h2,
html[data-chss-font-size="large"] .chss-account-portal-root h2 { font-size: 23px !important; line-height: 1.2; }
html[data-chss-font-size="large"] .chss-app h3,
html[data-chss-font-size="large"] .chss-account-portal-root h3 { font-size: 19px !important; line-height: 1.3; }

html[data-chss-font-size="xlarge"] .chss-app :where(p, label, input, select, textarea, button, a, td, th, li, summary, time),
html[data-chss-font-size="xlarge"] .chss-account-portal-root :where(p, label, input, select, textarea, button, a, td, th, li, summary, time) {
	font-size: 18px !important;
	line-height: 1.58;
}

html[data-chss-font-size="xlarge"] .chss-app small,
html[data-chss-font-size="xlarge"] .chss-account-portal-root small {
	font-size: 15px !important;
	line-height: 1.5;
}

html[data-chss-font-size="xlarge"] .chss-app h1,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h1 { font-size: 34px !important; line-height: 1.15; }
html[data-chss-font-size="xlarge"] .chss-app h2,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h2 { font-size: 26px !important; line-height: 1.2; }
html[data-chss-font-size="xlarge"] .chss-app h3,
html[data-chss-font-size="xlarge"] .chss-account-portal-root h3 { font-size: 21px !important; line-height: 1.3; }

html[data-chss-font-size="xsmall"] .chss-tab-mobile-label { font-size: 8.4px !important; }
html[data-chss-font-size="small"] .chss-tab-mobile-label { font-size: 9px !important; }
html[data-chss-font-size="large"] .chss-tab-mobile-label { font-size: 10px !important; }
html[data-chss-font-size="xlarge"] .chss-tab-mobile-label { font-size: 10.7px !important; }

@media (max-width: 480px) {
	.chss-accessibility-font-slider {
		padding-inline: 14px;
	}
}


/* v0.48 — accessibility reset button aligned with app buttons */
.chss-app .chss-accessibility-reset.chss-button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 36px);
	margin: 16px 18px calc(18px + env(safe-area-inset-bottom));
	min-height: 42px;
	padding: 10px 16px;
	border: 1px solid var(--chss-line);
	border-radius: 12px;
	background: #ffffff;
	color: #4b5563;
	font-size: 14px;
	font-weight: 850;
	box-shadow: none;
}

.chss-app .chss-accessibility-reset.chss-button-secondary:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #24344b;
}


/* v0.49 — mobile shifts search bar polish */
.chss-app .chss-mobile-shifts-search {
	position: relative;
	display: block;
}

.chss-app .chss-mobile-shifts-search input {
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 12px 18px 12px 52px;
	border: 1px solid #cfd7e4;
	border-radius: 18px;
	outline: 0;
	background: #fff;
	color: #07183d;
	box-shadow: none;
	font: inherit;
	font-size: 16px;
	font-weight: 650;
}

.chss-app .chss-mobile-shifts-search input::placeholder {
	color: #7b899f;
	opacity: 1;
}

.chss-app .chss-mobile-shifts-search input:focus {
	border-color: #84bdf9;
	box-shadow: 0 0 0 3px rgba(15, 109, 232, .1);
}

.chss-app .chss-mobile-shifts-search-icon {
	position: absolute;
	top: 50%;
	left: 18px;
	z-index: 1;
	width: 17px;
	height: 17px;
	border: 2px solid #60708b;
	border-radius: 50%;
	transform: translateY(-58%);
	pointer-events: none;
}

.chss-app .chss-mobile-shifts-search-icon::after {
	content: "";
	position: absolute;
	right: -6px;
	bottom: -5px;
	width: 8px;
	height: 2px;
	border-radius: 2px;
	background: #60708b;
	transform: rotate(47deg);
}


/* v0.50 — manager parity and settings UI refresh */


/* v0.53 — CompuShift global branding */
.chss-brand-logo {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 0;
}

.chss-brand-logo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.chss-brand-logo-app {
	flex: 0 0 auto;
	width: 160px;
	max-width: 42vw;
	text-decoration: none;
}

.chss-brand-logo-auth {
	display: flex;
	width: min(260px, 80%);
	margin: 0 auto 20px;
}

.chss-app .chss-app-header-copy {
	display: flex;
	align-items: center;
	gap: 18px;
}

.chss-app .chss-app-header-copy::before {
	display: none !important;
	content: none !important;
}

.chss-app .chss-app-header-title-copy {
	min-width: 0;
}

@media (max-width: 480px) {
	.chss-app .chss-app-header {
		min-height: 82px !important;
		padding: 7px 2px 12px !important;
	}

	.chss-app .chss-app-header-copy {
		display: flex !important;
		align-items: center !important;
		gap: 0 !important;
	}

	.chss-brand-logo-app {
		width: 132px;
		max-width: calc(100vw - 98px);
	}

	.chss-app .chss-app-header-title-copy {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.chss-brand-logo-auth {
		width: min(230px, 82%);
		margin-bottom: 16px;
	}
}

/* v0.54 — CompuShift red / black / white visual system */
:root {
	--chss-bg: #f6f6f7;
	--chss-surface: #ffffff;
	--chss-text: #111111;
	--chss-muted: #66666d;
	--chss-border: #dedee2;
	--chss-line: #dedee2;
	--chss-primary: #ed1c24;
	--chss-primary-2: #b80f16;
	--chss-accent: #ed1c24;
	--chss-danger: #b80f16;
	--chss-radius: 20px;
	--chss-shadow: 0 14px 34px rgba(17, 17, 17, .09);
}

@media screen {
	.chss-app,
	.chss-auth-shell,
	.chss-force-password-shell {
		color: #111111;
	}

	.chss-app {
		background: #f6f6f7;
	}

	.chss-app :where(h1, h2, h3, h4, strong) {
		color: #111111;
	}

	.chss-app :where(a:not(.chss-button):not(.chss-small-button):not(.chss-tab)) {
		color: #c81018;
	}

	/* Main application shell */
	.chss-app .chss-app-header {
		border-bottom-color: #e3e3e6 !important;
		background: #ffffff !important;
		box-shadow: 0 7px 20px rgba(17, 17, 17, .06) !important;
	}

	.chss-app .chss-profile-button {
		border-color: #f0b5b8 !important;
		background: #fff2f2 !important;
		color: #c81018 !important;
	}

	.chss-app .chss-profile-avatar,
	.chss-app .chss-profile-summary-avatar,
	.chss-app .chss-account-profile-card > span {
		background: linear-gradient(145deg, #ffe4e5, #ffc9cc) !important;
		color: #a70c13 !important;
	}

	.chss-app .chss-profile-menu,
	.chss-app .chss-account-sheet,
	.chss-app .chss-accessibility-sheet {
		border-color: #dedee2 !important;
		background: #ffffff !important;
		box-shadow: 0 24px 62px rgba(17, 17, 17, .20) !important;
	}

	/* Hero/header areas use the logo palette. */
	.chss-app :where(.chss-hero, .chss-topbar),
	.chss-mobile-settings-header,
	.chss-mobile-history-header,
	.chss-mobile-reports-header {
		border-color: #2b2b2e !important;
		background: linear-gradient(145deg, #090909 0%, #1d1d20 72%, #2a090b 100%) !important;
		color: #ffffff !important;
		box-shadow: 0 12px 28px rgba(17, 17, 17, .18) !important;
	}

	.chss-mobile-settings-header::after {
		background: rgba(237, 28, 36, .24) !important;
	}

	.chss-app :where(.chss-hero, .chss-topbar, .chss-mobile-settings-header, .chss-mobile-history-header, .chss-mobile-reports-header)
	:where(h1, h2, h3, p, small, strong, .chss-muted, .chss-eyebrow) {
		color: #ffffff !important;
	}

	.chss-mobile-settings-summary > span {
		border-color: rgba(255, 255, 255, .18) !important;
		background: rgba(255, 255, 255, .09) !important;
		box-shadow: none !important;
	}

	.chss-mobile-settings-summary i {
		background: #ed1c24 !important;
		color: #ffffff !important;
	}

	.chss-mobile-settings-summary :where(em, b) {
		color: #ffffff !important;
	}

	/* White cards, black copy and restrained shadows. */
	.chss-app :where(
		.chss-panel,
		.chss-summary-card,
		.chss-day-card,
		.chss-mobile-week-day-card,
		.chss-mobile-shift-card,
		.chss-mobile-staff-card,
		.chss-mobile-timeoff-card,
		.chss-mobile-history-card,
		.chss-mobile-report-card,
		.chss-mobile-settings-card,
		.chss-attendance-card,
		.chss-attendance-empty-card,
		.chss-account-profile-card,
		.chss-account-session-list article
	) {
		border-color: #dedee2 !important;
		background: #ffffff !important;
		box-shadow: 0 8px 22px rgba(17, 17, 17, .06) !important;
	}

	.chss-app :where(.chss-summary-card, .chss-mobile-shift-card, .chss-mobile-staff-card, .chss-mobile-timeoff-card,
	.chss-mobile-history-card, .chss-mobile-report-card, .chss-mobile-settings-card) :where(strong, h2, h3) {
		color: #111111;
	}

	.chss-summary-card::before {
		background: #ed1c24 !important;
	}

	.chss-panel-featured,
	.chss-week-tools {
		border-color: #f2b8bb !important;
		background: linear-gradient(135deg, #fff7f7, #ffffff) !important;
	}

	/* Primary actions. */
	.chss-app :where(
		.chss-button:not(.chss-button-secondary):not(.chss-button-light),
		.chss-small-button:not(.chss-button-secondary),
		.chss-mobile-settings-save,
		.chss-mobile-print-week-button,
		.chss-attendance-punch-button,
		.chss-employee-card-reveal-button,
		.chss-employee-card-viewer-done,
		.chss-account-primary,
		.chss-mobile-timeoff-approve,
		.chss-mobile-timeoff-reject
	),
	.chss-auth-card button[type="submit"],
	.chss-force-password-card button[type="submit"],
	.chss-app form button[type="submit"]:not(.chss-button-secondary):not(.chss-mobile-settings-secondary):not(.chss-account-avatar-remove):not(.chss-employee-card-delete) {
		border: 1px solid #c81018 !important;
		background: linear-gradient(135deg, #ed1c24, #bd1017) !important;
		color: #ffffff !important;
		box-shadow: 0 10px 22px rgba(237, 28, 36, .20) !important;
	}

	.chss-app :where(
		.chss-button:not(.chss-button-secondary):not(.chss-button-light),
		.chss-small-button:not(.chss-button-secondary),
		.chss-mobile-settings-save,
		.chss-mobile-print-week-button,
		.chss-attendance-punch-button,
		.chss-employee-card-reveal-button,
		.chss-employee-card-viewer-done,
		.chss-account-primary
	):hover,
	.chss-auth-card button[type="submit"]:hover,
	.chss-force-password-card button[type="submit"]:hover,
	.chss-app form button[type="submit"]:not(.chss-button-secondary):not(.chss-mobile-settings-secondary):hover {
		background: linear-gradient(135deg, #d9151d, #9f090f) !important;
		color: #ffffff !important;
		box-shadow: 0 13px 28px rgba(200, 16, 24, .25) !important;
	}

	/* Secondary actions are white with a red outline. */
	.chss-app :where(
		.chss-button-secondary,
		.chss-mobile-settings-secondary,
		.chss-small-link,
		.chss-mobile-current-week-link,
		.chss-mobile-open-day-link,
		.chss-accessibility-reset,
		.chss-attendance-test-clear button,
		.chss-employee-card-delete,
		.chss-account-avatar-remove
	) {
		border: 1px solid #e6a4a8 !important;
		background: #ffffff !important;
		color: #b80f16 !important;
		box-shadow: none !important;
	}

	.chss-app :where(.chss-button-secondary, .chss-mobile-settings-secondary, .chss-small-link,
	.chss-mobile-current-week-link, .chss-mobile-open-day-link, .chss-accessibility-reset):hover {
		border-color: #ed1c24 !important;
		background: #fff1f2 !important;
		color: #9f090f !important;
	}

	.chss-app .chss-button-light {
		border-color: rgba(255, 255, 255, .45) !important;
		background: rgba(255, 255, 255, .12) !important;
		color: #ffffff !important;
	}

	/* Tabs, segmented controls and filters. */
	.chss-app .chss-tab:hover {
		background: #fff0f1 !important;
		color: #c81018 !important;
	}

	.chss-app .chss-tab.is-active {
		background: linear-gradient(135deg, #ed1c24, #b80f16) !important;
		color: #ffffff !important;
		box-shadow: 0 9px 20px rgba(237, 28, 36, .20) !important;
	}

	.chss-app :where(
		.chss-mobile-shifts-filters,
		.chss-mobile-staff-filters,
		.chss-mobile-timeoff-filters,
		.chss-mobile-history-filter-actions,
		.chss-mobile-schedule-view-switch,
		.chss-mobile-timeoff-views
	) button {
		border-color: #dedee2 !important;
		background: #ffffff !important;
		color: #36363b !important;
		box-shadow: none !important;
	}

	.chss-app :where(
		.chss-mobile-shifts-filters,
		.chss-mobile-staff-filters,
		.chss-mobile-timeoff-filters,
		.chss-mobile-history-filter-actions,
		.chss-mobile-schedule-view-switch,
		.chss-mobile-timeoff-views
	) button.is-active,
	.chss-app :where(
		.chss-mobile-shifts-filters,
		.chss-mobile-staff-filters,
		.chss-mobile-timeoff-filters,
		.chss-mobile-history-filter-actions,
		.chss-mobile-schedule-view-switch,
		.chss-mobile-timeoff-views
	) button[aria-pressed="true"] {
		border-color: #c81018 !important;
		background: #ed1c24 !important;
		color: #ffffff !important;
	}

	.chss-app :where(
		.chss-mobile-shifts-filters,
		.chss-mobile-staff-filters,
		.chss-mobile-timeoff-filters
	) button span {
		background: #fff1f2 !important;
		color: #b80f16 !important;
	}

	.chss-app :where(
		.chss-mobile-shifts-filters,
		.chss-mobile-staff-filters,
		.chss-mobile-timeoff-filters
	) button.is-active span,
	.chss-app :where(
		.chss-mobile-shifts-filters,
		.chss-mobile-staff-filters,
		.chss-mobile-timeoff-filters
	) button[aria-pressed="true"] span {
		background: rgba(255, 255, 255, .20) !important;
		color: #ffffff !important;
	}

	/* Inputs and search controls. */
	.chss-app :where(input, select, textarea) {
		border-color: #d8d8dc;
		background: #ffffff;
		color: #111111;
	}

	.chss-app :where(input, select, textarea):focus {
		border-color: #ed1c24 !important;
		box-shadow: 0 0 0 3px rgba(237, 28, 36, .12) !important;
	}

	.chss-app :where(input, textarea)::placeholder {
		color: #8a8a90 !important;
	}

	.chss-app :where(.chss-mobile-shifts-search-icon, .chss-mobile-staff-search i, .chss-mobile-reports-search i) {
		border-color: #b80f16 !important;
	}

	.chss-app :where(.chss-mobile-shifts-search-icon, .chss-mobile-staff-search i, .chss-mobile-reports-search i)::after {
		background: #b80f16 !important;
	}

	/* Icons and compact visual accents. */
	.chss-app :where(
		.chss-mobile-settings-icon,
		.chss-mobile-history-card-icon,
		.chss-mobile-report-avatar,
		.chss-mobile-shift-avatar,
		.chss-mobile-staff-avatar,
		.chss-mobile-timeoff-avatar,
		.chss-mobile-week-avatar,
		.chss-attendance-quick-icon,
		.chss-attendance-history-icon,
		.chss-empty-icon,
		.chss-force-password-icon,
		.chss-card-file-picker-icon
	) {
		border-color: #f0b5b8 !important;
		background: #fff0f1 !important;
		color: #c81018 !important;
	}

	.chss-mobile-settings-icon.is-rules,
	.chss-mobile-settings-icon.is-positions,
	.chss-mobile-settings-icon.is-email,
	.chss-mobile-settings-icon.is-diagnostics,
	.chss-mobile-settings-icon.is-templates,
	.chss-mobile-settings-icon.is-test {
		background: #fff0f1 !important;
		color: #c81018 !important;
	}

	.chss-app :where(.chss-mobile-reports-summary strong, .chss-mobile-report-card > summary > b,
	.chss-mobile-shift-time, .chss-account-version) {
		color: #c81018 !important;
	}

	/* Attendance keeps semantic status colours, but all main actions remain red. */
	.chss-attendance-card-check_out .chss-attendance-punch-button {
		background: linear-gradient(135deg, #ed1c24, #b80f16) !important;
		box-shadow: 0 10px 22px rgba(237, 28, 36, .20) !important;
	}

	/* Footer navigation */
	body > .chss-mobile-nav-footer {
		border-top-color: #dedee2 !important;
		background: rgba(255, 255, 255, .985) !important;
		box-shadow: 0 -8px 24px rgba(17, 17, 17, .12) !important;
	}

	body > .chss-mobile-nav-footer .chss-tab {
		color: #55555b !important;
	}

	body > .chss-mobile-nav-footer .chss-tab-mobile-icon {
		color: #55555b !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active {
		background: #fff0f1 !important;
		color: #c81018 !important;
		box-shadow: none !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-icon {
		background: #ed1c24 !important;
		color: #ffffff !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-label {
		color: #b80f16 !important;
	}

	/* Account/accessibility toggles */
	.chss-app :where(.chss-accessibility-options button, .chss-account-security-action) {
		border-color: #dedee2 !important;
		background: #ffffff !important;
		color: #111111 !important;
	}

	.chss-app .chss-accessibility-options button[aria-checked="true"],
	.chss-app .chss-accessibility-options button.is-active {
		border-color: #ed1c24 !important;
		background: #fff0f1 !important;
		color: #b80f16 !important;
	}

	.chss-accessibility-font-slider input[type="range"] {
		accent-color: #ed1c24;
	}

	/* Focus treatment */
	.chss-app :where(button, a, input, select, textarea, summary):focus-visible,
	.chss-auth-shell :where(button, a, input, select, textarea):focus-visible,
	.chss-force-password-shell :where(button, a, input, select, textarea):focus-visible {
		outline: 3px solid rgba(237, 28, 36, .34) !important;
		outline-offset: 2px;
	}
}

/* v0.117 — accessible contrast uses the existing CompuShift palette.
   Increase luminance separation without introducing yellow/blue/purple colors. */
html[data-chss-high-contrast="true"] {
	--chss-bg: #ffffff;
	--chss-surface: #ffffff;
	--chss-text: #111111;
	--chss-muted: #5a171b;
	--chss-border: #7f080e;
	--chss-line: #b80f16;
	--chss-primary: #b80f16;
	--chss-primary-2: #7f080e;
	--chss-accent: #ed1c24;
	--chss-shadow: none;
}

html[data-chss-high-contrast="true"] body,
html[data-chss-high-contrast="true"] .chss-app,
html[data-chss-high-contrast="true"] .chss-account-portal-root,
html[data-chss-high-contrast="true"] .chss-auth-shell,
html[data-chss-high-contrast="true"] .chss-force-password-shell {
	background: #ffffff !important;
	color: #111111 !important;
}

html[data-chss-high-contrast="true"] .chss-app :where(
	.chss-panel, .chss-subpanel, .chss-summary-card, .chss-day-card,
	.chss-shift-card, .chss-mobile-settings-card, .chss-mobile-shift-card,
	.chss-mobile-staff-card, .chss-mobile-timeoff-card, .chss-mobile-history-card,
	.chss-mobile-report-card, .chss-account-sheet, .chss-profile-menu, article
),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(
	.chss-account-sheet, .chss-profile-menu, article
) {
	border-color: #7f080e !important;
	background: #ffffff !important;
	color: #111111 !important;
	box-shadow: none !important;
}

html[data-chss-high-contrast="true"] .chss-app :where(
	.chss-muted, small, .chss-accessibility-intro, .chss-eyebrow
),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(
	.chss-muted, small, .chss-accessibility-intro
) {
	color: #5a171b !important;
}

html[data-chss-high-contrast="true"] .chss-app :where(
	input, select, textarea, .chss-date-trigger, .chss-time-trigger, .chss-select-trigger
),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(
	input, select, textarea
) {
	border: 2px solid #7f080e !important;
	background: #ffffff !important;
	color: #111111 !important;
}

html[data-chss-high-contrast="true"] .chss-app :where(
	button, .chss-button, .chss-small-button, input[type="submit"],
	.chss-tab.is-active, .chss-accessibility-options button[aria-checked="true"],
	.chss-accessibility-options button.is-active
),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(
	button, .chss-button, input[type="submit"]
) {
	border-color: #7f080e !important;
	background: #b80f16 !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

html[data-chss-high-contrast="true"] .chss-app a,
html[data-chss-high-contrast="true"] .chss-account-portal-root a {
	color: #8f0d14 !important;
	text-decoration-thickness: 2px;
}

html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer {
	border-top-color: #7f080e !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab {
	color: #5a171b !important;
}

html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active,
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-label {
	background: #b80f16 !important;
	color: #ffffff !important;
}

html[data-chss-high-contrast="true"] :where(
	.chss-app, .chss-account-portal-root, .chss-auth-shell, .chss-force-password-shell
) :where(button, a, input, select, textarea, summary):focus-visible {
	outline: 3px solid #ed1c24 !important;
	outline-offset: 3px;
}

/* Preserve the dedicated accessibility mode above the brand theme. */
html[data-chss-high-contrast="true"] .chss-app,
html[data-chss-high-contrast="true"] .chss-auth-shell,
html[data-chss-high-contrast="true"] .chss-force-password-shell {
	--chss-bg: #000000;
	--chss-surface: #000000;
	--chss-text: #ffffff;
	--chss-muted: #ffffff;
	--chss-border: #ffffff;
	--chss-line: #ffffff;
}

html[data-chss-high-contrast="true"] .chss-app :where(.chss-panel, .chss-mobile-settings-card, .chss-mobile-shift-card,
.chss-mobile-staff-card, .chss-mobile-timeoff-card, .chss-mobile-history-card, .chss-mobile-report-card),
html[data-chss-high-contrast="true"] .chss-app .chss-app-header {
	border-color: #ffffff !important;
	background: #000000 !important;
	color: #ffffff !important;
}

html[data-chss-high-contrast="true"] .chss-app :where(.chss-button, button[type="submit"], .chss-tab.is-active) {
	border-color: #ffff00 !important;
	background: #ffff00 !important;
	color: #000000 !important;
}

/* v0.55 — CompuShift red palette refinement
   Purpose: convert remaining blue/mint mobile UI accents to the red / black / white brand palette.
*/
@media screen {
	.chss-app {
		--chss-mint: #f7c7cb;
		--chss-mint-dark: #ed1c24;
		--chss-mint-deep: #a70c13;
		--chss-mint-soft: rgba(237, 28, 36, .18);
		--chss-mint-softer: rgba(237, 28, 36, .10);
		--chss-ghost: #f8f8f9;
		--chss-soft-bg: #fff6f6;
	}

	/* Day / week mobile switchers */
	.chss-app .chss-mobile-schedule-view-switch {
		border-color: #dedee2 !important;
		background: #f2f2f4 !important;
		box-shadow: inset 0 1px 2px rgba(17, 17, 17, .04) !important;
	}

	.chss-app .chss-mobile-schedule-view-switch a {
		color: #5b5b61 !important;
		background: transparent !important;
		border-color: transparent !important;
	}

	.chss-app .chss-mobile-schedule-view-switch a.is-active {
		border-color: #f0b5b8 !important;
		background: #ffffff !important;
		color: #c81018 !important;
		box-shadow: 0 6px 16px rgba(17, 17, 17, .08) !important;
	}

	.chss-app :where(.chss-mobile-day-switcher, .chss-mobile-shifts-week, .chss-mobile-week-header-card) {
		border-color: #dedee2 !important;
		background: #ffffff !important;
		box-shadow: 0 8px 22px rgba(17, 17, 17, .06) !important;
	}

	.chss-app :where(.chss-mobile-day-switcher a, .chss-mobile-shifts-week a, .chss-mobile-week-switcher > a) {
		color: #a70c13 !important;
	}

	.chss-app :where(.chss-mobile-day-switcher a, .chss-mobile-shifts-week a, .chss-mobile-week-switcher > a):active {
		background: #fff1f2 !important;
	}

	.chss-app :where(.chss-mobile-day-switcher strong, .chss-mobile-shifts-week strong, .chss-mobile-week-switcher strong) {
		color: #111111 !important;
	}

	.chss-app .chss-mobile-week-switcher small {
		color: #8a8a90 !important;
	}

	.chss-app .chss-mobile-current-week-link {
		background: #fff6f6 !important;
		color: #b80f16 !important;
	}

	/* Weekly day chips */
	.chss-app .chss-mobile-week-strip a {
		border-color: #e4e4e8 !important;
		background: #ffffff !important;
		color: #4f4f56 !important;
	}

	.chss-app .chss-mobile-week-strip a.is-active {
		border-color: #f0b5b8 !important;
		background: #fff1f2 !important;
		color: #c81018 !important;
		box-shadow: inset 0 0 0 1px rgba(237, 28, 36, .04) !important;
	}

	.chss-app .chss-mobile-week-day-card[open] > summary {
		border-bottom-color: #efe0e2 !important;
		background: linear-gradient(180deg, #fff9f9 0%, #fff3f4 100%) !important;
	}

	.chss-app .chss-mobile-week-day-badge {
		border-color: #f0b5b8 !important;
		background: #fff1f2 !important;
		color: #c81018 !important;
	}

	.chss-app .chss-mobile-week-day-copy > small,
	.chss-app .chss-mobile-week-employee small,
	.chss-app .chss-mobile-shift-copy time,
	.chss-app .chss-mobile-staff-copy small {
		color: #7a7a83 !important;
	}

	.chss-app .chss-mobile-week-day-chevron,
	.chss-app .chss-mobile-shift-chevron,
	.chss-app .chss-mobile-staff-chevron {
		color: #7a1a20 !important;
	}

	.chss-app .chss-mobile-week-day-content {
		background: #fafafb !important;
	}

	/* Search bars */
	.chss-app :where(.chss-mobile-shifts-search input, .chss-mobile-staff-search input, .chss-mobile-reports-search input) {
		border-color: #d7d7dc !important;
		background: #ffffff !important;
	}

	.chss-app :where(.chss-mobile-shifts-search input, .chss-mobile-staff-search input, .chss-mobile-reports-search input):focus {
		border-color: #ed1c24 !important;
		box-shadow: 0 0 0 3px rgba(237, 28, 36, .12) !important;
	}

	.chss-app .chss-mobile-shifts-search-icon,
	.chss-app .chss-mobile-staff-search i,
	.chss-app .chss-mobile-reports-search i {
		top: 50% !important;
		transform: translateY(-50%) !important;
		border-color: #b80f16 !important;
	}

	.chss-app .chss-mobile-shifts-search-icon::after,
	.chss-app .chss-mobile-staff-search i::after,
	.chss-app .chss-mobile-reports-search i::after {
		background: #b80f16 !important;
	}

	/* Shift cards and schedule states */
	.chss-app .chss-mobile-shift-position,
	.chss-app .chss-mobile-staff-role,
	.chss-app .chss-position-pill {
		border: 1px solid #f0b5b8 !important;
		background: #fff1f2 !important;
		color: #b80f16 !important;
	}

	.chss-app .chss-mobile-shift-time,
	.chss-app .chss-mobile-week-status.has-shift strong,
	.chss-app .chss-mobile-shift-status.has-shift strong {
		color: #111111 !important;
	}

	.chss-app .chss-mobile-shift-time::before,
	.chss-app .chss-mobile-shift-time::after {
		border-color: #b80f16 !important;
	}

	.chss-app .chss-mobile-shift-time::after {
		border-bottom-color: #b80f16 !important;
		border-left-color: #b80f16 !important;
	}

	.chss-app .chss-mobile-shift-status.has-shift,
	.chss-app .chss-mobile-week-status.has-shift,
	.chss-app .chss-day-shift time,
	.chss-app .chss-week-shift-published {
		border-color: #f0b5b8 !important;
		background: #fff1f2 !important;
		color: #b80f16 !important;
	}

	.chss-app .chss-week-shift-draft {
		border-color: #e4e4e8 !important;
		background: #f7f7f8 !important;
		color: #4b4b52 !important;
	}

	.chss-app .chss-week-shift-cancelled {
		border-color: #f2b8bb !important;
		background: #fff4f5 !important;
		color: #b80f16 !important;
	}

	.chss-app .chss-week-shift-timeoff,
	.chss-app .chss-mobile-shift-status.is-time-off,
	.chss-app .chss-mobile-shift-state.chss-pill-cancelled {
		border-color: #f2b8bb !important;
		background: #fff4f5 !important;
		color: #b80f16 !important;
	}

	.chss-app .chss-mobile-shift-status.is-empty,
	.chss-app .chss-mobile-week-status.is-empty,
	.chss-app .chss-mobile-week-status.is-time-off,
	.chss-app .chss-mobile-shift-state.chss-pill-draft {
		border-color: #dedee2 !important;
		background: #f5f5f6 !important;
		color: #55555b !important;
	}

	/* New shift CTA */
	.chss-app .chss-mobile-new-shift {
		background: #ffffff !important;
		box-shadow: 0 12px 26px rgba(237, 28, 36, .14) !important;
	}

	.chss-app .chss-mobile-new-shift > summary {
		border: 1px solid #c81018 !important;
		background: linear-gradient(135deg, #ed1c24 0%, #bd1017 100%) !important;
		color: #ffffff !important;
		box-shadow: 0 10px 22px rgba(237, 28, 36, .18) !important;
	}

	.chss-app .chss-mobile-new-shift-form {
		border-color: #f0d6d8 !important;
	}

	/* Staff summary and mini stats */
	.chss-app .chss-mobile-staff-summary {
		border-color: #dedee2 !important;
		background: #ffffff !important;
		box-shadow: 0 8px 22px rgba(17, 17, 17, .06) !important;
	}

	.chss-app .chss-mobile-staff-summary > span + span {
		border-left-color: #ececef !important;
	}

	.chss-app .chss-mobile-staff-summary i {
		background: #fff1f2 !important;
		color: #c81018 !important;
	}

	.chss-app .chss-mobile-staff-state.is-active,
	.chss-app .chss-pill-active,
	.chss-app .chss-status-badge.is-active {
		background: #fff1f2 !important;
		color: #b80f16 !important;
		border-color: #f0b5b8 !important;
	}

	.chss-app .chss-pill-inactive,
	.chss-app .chss-mobile-staff-state.is-inactive {
		background: #f5f5f6 !important;
		color: #55555b !important;
		border-color: #dedee2 !important;
	}

	/* Footer active tone */
	body > .chss-mobile-nav-footer .chss-tab.is-active::before {
		background: #ed1c24 !important;
	}

	body > .chss-mobile-nav-footer .chss-tab:active {
		background: #fff4f5 !important;
	}

	body > .chss-mobile-nav-footer .chss-tab:focus-visible {
		outline: 2px solid rgba(237, 28, 36, .34) !important;
	}
}

/* v0.56 — Final red palette pass for remaining mobile controls */
@media (max-width: 480px) {
	/* New staff CTA */
	.chss-app .chss-mobile-new-staff {
		background: #ffffff !important;
		box-shadow: 0 12px 26px rgba(237, 28, 36, .14) !important;
	}

	.chss-app .chss-mobile-new-staff > summary {
		border: 1px solid #c81018 !important;
		border-radius: 18px !important;
		background: linear-gradient(135deg, #ed1c24 0%, #bd1017 100%) !important;
		box-shadow: 0 10px 22px rgba(237, 28, 36, .18) !important;
		color: #ffffff !important;
	}

	.chss-app .chss-mobile-new-staff[open] > summary {
		border-radius: 18px 18px 0 0 !important;
	}

	.chss-app .chss-mobile-new-staff-form {
		border-color: #f0d6d8 !important;
	}

	/* Daily day-strip cards */
	.chss-app .chss-mobile-week-strip a {
		border-color: #e3e3e7 !important;
		background: #ffffff !important;
		color: #4d4d55 !important;
	}

	.chss-app .chss-mobile-week-strip a strong {
		color: #111111 !important;
	}

	.chss-app .chss-mobile-week-strip a.is-active {
		border-color: #f0b5b8 !important;
		background: #fff1f2 !important;
		color: #c81018 !important;
		box-shadow: inset 0 0 0 1px rgba(237, 28, 36, .05) !important;
	}

	.chss-app .chss-mobile-week-strip a.is-active strong {
		color: #c81018 !important;
	}

	/* Weekly header action buttons */
	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button {
		border-color: #f0b5b8 !important;
		background: #fff6f6 !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96) !important;
		color: #c81018 !important;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link svg,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button svg {
		border-color: #f4c8cb !important;
		background: #ffffff !important;
		color: #c81018 !important;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link strong,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button strong {
		color: #c81018 !important;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link:focus-visible,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button:focus-visible {
		outline: 3px solid rgba(237, 28, 36, .18) !important;
	}

	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link:active,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button:active {
		border-color: #e99ca1 !important;
		background: #fff0f1 !important;
		box-shadow: inset 0 1px 2px rgba(237, 28, 36, .08) !important;
	}
}

@media (hover: hover) and (pointer: fine) {
	.chss-app .chss-mobile-week-header-actions .chss-mobile-current-week-link:hover,
	.chss-app .chss-mobile-week-header-actions .chss-mobile-print-week-button:hover {
		border-color: #e99ca1 !important;
		background: #ffffff !important;
		box-shadow: 0 8px 18px rgba(237, 28, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
	}
}

/* v0.57 — Red palette cleanup for Time Off mobile screen */
@media (max-width: 480px) {
  .chss-app .chss-mobile-timeoff-summary {
    border-color: #ebdadd !important;
    box-shadow: 0 12px 28px rgba(140, 18, 24, .08) !important;
  }

  .chss-app .chss-mobile-timeoff-summary > span + span {
    border-left-color: #efe2e4 !important;
  }

  .chss-app .chss-mobile-timeoff-summary i,
  .chss-app .chss-mobile-timeoff-avatar {
    background: linear-gradient(145deg, #fff1f2, #ffe4e6) !important;
    color: #c81018 !important;
  }

  .chss-app .chss-mobile-timeoff-summary strong,
  .chss-app .chss-mobile-timeoff-summary b {
    color: #111111 !important;
  }

  .chss-app .chss-mobile-new-timeoff {
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(237, 28, 36, .14) !important;
  }

  .chss-app .chss-mobile-new-timeoff > summary {
    border: 1px solid #c81018 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #ed1c24 0%, #bd1017 100%) !important;
    box-shadow: 0 10px 22px rgba(237, 28, 36, .18) !important;
    color: #ffffff !important;
  }

  .chss-app .chss-mobile-new-timeoff[open] > summary {
    border-radius: 18px 18px 0 0 !important;
  }

  .chss-app .chss-mobile-new-timeoff-form {
    border-color: #f0d6d8 !important;
  }

  .chss-app .chss-mobile-new-timeoff-form h2 {
    color: #111111 !important;
  }
}

/* v0.58 — History & Reports mobile header cleanup with red palette */
@media (max-width: 480px) {
  .chss-app .chss-mobile-history-header,
  .chss-app .chss-mobile-reports-header {
    position: relative !important;
    padding: 14px 14px 16px !important;
    border: 1px solid #2b2b2e !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .chss-app .chss-mobile-history-header::after,
  .chss-app .chss-mobile-reports-header::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(237, 28, 36, .18);
    pointer-events: none;
  }

  .chss-app .chss-mobile-history-header > *,
  .chss-app .chss-mobile-reports-header > * {
    position: relative;
    z-index: 1;
  }

  .chss-app .chss-mobile-history-header h1,
  .chss-app .chss-mobile-reports-header h1 {
    line-height: 1.04 !important;
  }

  .chss-app .chss-mobile-history-summary {
    margin-top: 16px !important;
  }

  .chss-app .chss-mobile-history-summary > span {
    border-color: rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
  }

  .chss-app .chss-mobile-history-summary i {
    background: #fff1f2 !important;
    color: #c81018 !important;
  }

  .chss-app .chss-mobile-history-summary b {
    color: #ffffff !important;
  }

  .chss-app .chss-mobile-history-summary small {
    background: transparent !important;
    color: rgba(255, 255, 255, .78) !important;
  }

  .chss-app .chss-mobile-reports-month {
    border-color: #ecd7da !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(17, 17, 17, .06) !important;
  }

  .chss-app .chss-mobile-reports-month a {
    border: 1px solid #f1d4d7 !important;
    background: #fff1f2 !important;
    color: #c81018 !important;
  }

  .chss-app .chss-mobile-reports-month strong {
    color: #111111 !important;
  }

  .chss-app .chss-mobile-reports-summary article {
    border-color: #ead7da !important;
    box-shadow: 0 8px 18px rgba(17, 17, 17, .05) !important;
  }

  .chss-app .chss-mobile-reports-summary strong {
    color: #c81018 !important;
  }

  .chss-app .chss-report-comparison-summary article.is-positive strong,
  .chss-app .chss-report-comparison-summary article.is-negative strong,
  .chss-app .chss-report-comparison-summary article.is-warning strong {
    color: #c81018 !important;
  }

  .chss-app .chss-report-comparison-summary article.is-warning {
    border-color: #efd0d3 !important;
    background: #fff7f7 !important;
  }
}

/* v0.63 — accessibility modal polish */
.chss-app .chss-account-sheet.chss-accessibility-sheet > header p {
	color: #c81018 !important;
}

.chss-app .chss-account-sheet.chss-accessibility-sheet > header > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #e7eaef;
	border-radius: 16px;
	background: #f4f6f9;
	color: #5b6575;
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	box-shadow: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.chss-app .chss-account-sheet.chss-accessibility-sheet > header > button:hover {
	border-color: #d8dde5;
	background: #eceff4;
	color: #24344b;
}

.chss-app .chss-accessibility-reset.chss-button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 36px);
	margin: 16px 18px calc(18px + env(safe-area-inset-bottom));
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid #e6a4a8 !important;
	border-radius: 16px;
	background: #ffffff !important;
	color: #b80f16 !important;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0;
	box-shadow: none !important;
}

.chss-app .chss-accessibility-reset.chss-button-secondary:hover {
	border-color: #ed1c24 !important;
	background: #fff1f2 !important;
	color: #9f090f !important;
}

/* v0.64 — rounder close buttons across sheets, dialogs and pickers */
.chss-app .chss-account-sheet > header > button,
.chss-attendance-dialog-sheet header button,
.chss-employee-card-viewer header button,
.chss-mobile-picker-close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 999px !important;
	background: #f4f6f9 !important;
	color: #5b6575 !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease !important;
}

.chss-app .chss-account-sheet > header > button:hover,
.chss-attendance-dialog-sheet header button:hover,
.chss-employee-card-viewer header button:hover,
.chss-mobile-picker-close:hover {
	background: #eef2f7 !important;
	border-color: #d4dde8 !important;
	color: #24344b !important;
}

.chss-app .chss-account-sheet > header > button:active,
.chss-attendance-dialog-sheet header button:active,
.chss-employee-card-viewer header button:active,
.chss-mobile-picker-close:active {
	transform: scale(.98) !important;
}


/* v0.65 — definitive circular X close controls */
button.chss-close-button,
body > .chss-account-portal-root button.chss-close-button,
.chss-mobile-picker-close {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	flex: 0 0 44px !important;
	width: 44px !important;
	min-width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	border: 1px solid #dfe3e9 !important;
	border-radius: 50% !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: #f3f5f8 !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92) !important;
	cursor: pointer !important;
	overflow: hidden !important;
	-webkit-tap-highlight-color: transparent !important;
}

button.chss-close-button::before,
button.chss-close-button::after,
body > .chss-account-portal-root button.chss-close-button::before,
body > .chss-account-portal-root button.chss-close-button::after,
.chss-mobile-picker-close::before,
.chss-mobile-picker-close::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 15px !important;
	height: 2px !important;
	border-radius: 999px !important;
	background: #596579 !important;
	transform-origin: center !important;
}

button.chss-close-button::before,
body > .chss-account-portal-root button.chss-close-button::before,
.chss-mobile-picker-close::before {
	transform: translate(-50%, -50%) rotate(45deg) !important;
}

button.chss-close-button::after,
body > .chss-account-portal-root button.chss-close-button::after,
.chss-mobile-picker-close::after {
	transform: translate(-50%, -50%) rotate(-45deg) !important;
}

button.chss-close-button:hover,
body > .chss-account-portal-root button.chss-close-button:hover,
.chss-mobile-picker-close:hover {
	border-color: #efb1b5 !important;
	background: #fff1f2 !important;
}

button.chss-close-button:hover::before,
button.chss-close-button:hover::after,
body > .chss-account-portal-root button.chss-close-button:hover::before,
body > .chss-account-portal-root button.chss-close-button:hover::after,
.chss-mobile-picker-close:hover::before,
.chss-mobile-picker-close:hover::after {
	background: #c81018 !important;
}

button.chss-close-button:focus-visible,
body > .chss-account-portal-root button.chss-close-button:focus-visible,
.chss-mobile-picker-close:focus-visible {
	outline: 3px solid rgba(237, 28, 36, .18) !important;
	outline-offset: 2px !important;
}

button.chss-close-button:active,
body > .chss-account-portal-root button.chss-close-button:active,
.chss-mobile-picker-close:active {
	transform: scale(.96) !important;
}

/* Smaller X used only to clear an uploaded preview. */
.chss-card-upload-preview > button[data-chss-card-upload-clear] {
	border-radius: 50% !important;
}


/* v0.66 — mobile UI release-candidate polish */
:root {
	--chss-release-red: #ed1c24;
	--chss-release-red-dark: #b80f16;
	--chss-release-red-soft: #fff1f2;
	--chss-release-text: #111318;
	--chss-release-muted: #68707d;
	--chss-release-line: #dedfe4;
	--chss-release-surface: #ffffff;
	--chss-release-page: #f4f5f7;
	--chss-release-radius: 20px;
	--chss-release-control-radius: 15px;
}

/* Primary actions: one consistent release style. */
.chss-app :where(
	.chss-button:not(.chss-button-secondary):not(.chss-button-light),
	.chss-small-button:not(.chss-small-button-danger):not(.chss-staff-session-revoke),
	.chss-mobile-settings-save,
	.chss-account-primary,
	.chss-attendance-punch-button,
	.chss-employee-card-reveal-button
) {
	border: 1px solid #c81018 !important;
	border-radius: var(--chss-release-control-radius) !important;
	background: linear-gradient(135deg, var(--chss-release-red) 0%, var(--chss-release-red-dark) 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 9px 20px rgba(237, 28, 36, .18) !important;
	font-weight: 900 !important;
	transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease !important;
}

.chss-app :where(
	.chss-button:not(.chss-button-secondary):not(.chss-button-light),
	.chss-small-button:not(.chss-small-button-danger):not(.chss-staff-session-revoke),
	.chss-mobile-settings-save,
	.chss-account-primary,
	.chss-attendance-punch-button,
	.chss-employee-card-reveal-button
):active {
	transform: scale(.985) !important;
	box-shadow: 0 5px 12px rgba(237, 28, 36, .15) !important;
}

/* Secondary actions: white surface, red outline, no visual noise. */
.chss-app :where(
	.chss-button-secondary,
	.chss-mobile-settings-secondary,
	.chss-small-link,
	.chss-mobile-current-week-link,
	.chss-mobile-open-day-link,
	.chss-mobile-print-week-button,
	.chss-accessibility-reset,
	.chss-attendance-test-clear button,
	.chss-account-security-action,
	.chss-mobile-reports-actions button.is-secondary
) {
	min-height: 44px !important;
	border: 1px solid #e6a4a8 !important;
	border-radius: var(--chss-release-control-radius) !important;
	background: #ffffff !important;
	color: var(--chss-release-red-dark) !important;
	box-shadow: none !important;
	font-weight: 850 !important;
}

.chss-app :where(
	.chss-button-secondary,
	.chss-mobile-settings-secondary,
	.chss-small-link,
	.chss-mobile-current-week-link,
	.chss-mobile-open-day-link,
	.chss-mobile-print-week-button,
	.chss-accessibility-reset,
	.chss-attendance-test-clear button,
	.chss-account-security-action,
	.chss-mobile-reports-actions button.is-secondary
):hover {
	border-color: var(--chss-release-red) !important;
	background: var(--chss-release-red-soft) !important;
	color: #9f090f !important;
}

/* Destructive actions remain clearly separate but use the same geometry. */
.chss-app :where(
	.chss-small-button-danger,
	.chss-staff-session-revoke,
	.chss-employee-card-delete button
) {
	min-height: 42px !important;
	border: 1px solid #efb1b5 !important;
	border-radius: var(--chss-release-control-radius) !important;
	background: #fff1f2 !important;
	color: #b80f16 !important;
	box-shadow: none !important;
	font-weight: 900 !important;
}

.chss-app .chss-account-avatar-remove button {
	min-height: 36px;
	padding: 7px 11px !important;
	border: 1px solid #efb1b5 !important;
	border-radius: 12px !important;
	background: #fff7f7 !important;
	color: #b80f16 !important;
}

/* Inputs and selectors: consistent touch size and focus treatment. */
.chss-app :where(
	.chss-form input,
	.chss-form-grid input,
	.chss-form-grid select,
	.chss-form-grid textarea,
	.chss-account-form input,
	.chss-mobile-settings input,
	.chss-mobile-settings select,
	.chss-mobile-settings textarea,
	.chss-mobile-timeoff input,
	.chss-mobile-timeoff select,
	.chss-mobile-shifts input,
	.chss-mobile-shifts select,
	.chss-mobile-staff input,
	.chss-mobile-staff select,
	.chss-mobile-reports input,
	.chss-mobile-reports select
) {
	min-height: 46px;
	border: 1px solid #d8d9de !important;
	border-radius: 14px !important;
	background: #ffffff !important;
	color: var(--chss-release-text) !important;
	box-shadow: none !important;
}

.chss-app :where(input, select, textarea):focus {
	border-color: var(--chss-release-red) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(237, 28, 36, .12) !important;
}

.chss-app :where(input, textarea)::placeholder {
	color: #858b96 !important;
	opacity: 1;
}

/* Cards: shared radius, border and restrained shadow. */
@media (max-width: 480px) {
	.chss-app {
		color: var(--chss-release-text);
	}

	.chss-app :where(
		.chss-panel,
		.chss-mobile-week-header-card,
		.chss-mobile-week-day-card,
		.chss-mobile-shift-card,
		.chss-mobile-staff-card,
		.chss-mobile-timeoff-card,
		.chss-mobile-history-card,
		.chss-mobile-report-card,
		.chss-mobile-settings-card,
		.chss-mobile-staff-summary,
		.chss-mobile-timeoff-summary,
		.chss-mobile-reports-month,
		.chss-attendance-card,
		.chss-account-sheet
	) {
		border-color: var(--chss-release-line) !important;
		border-radius: var(--chss-release-radius) !important;
		background-color: var(--chss-release-surface) !important;
		box-shadow: 0 7px 20px rgba(17, 17, 17, .055) !important;
	}

	.chss-app :where(
		.chss-mobile-shift-card > summary,
		.chss-mobile-staff-card > summary,
		.chss-mobile-week-day-card > summary,
		.chss-mobile-history-card > summary,
		.chss-mobile-report-card > summary,
		.chss-mobile-settings-card > summary
	) {
		border-radius: inherit;
	}

	.chss-app :where(
		.chss-mobile-shift-card[open] > summary,
		.chss-mobile-staff-card[open] > summary,
		.chss-mobile-week-day-card[open] > summary,
		.chss-mobile-history-card[open] > summary,
		.chss-mobile-report-card[open] > summary,
		.chss-mobile-settings-card[open] > summary
	) {
		border-radius: var(--chss-release-radius) var(--chss-release-radius) 0 0;
		border-bottom: 1px solid #ececef !important;
	}

	.chss-app :where(h1, h2, h3, strong) {
		color: var(--chss-release-text);
	}

	.chss-app :where(.chss-muted, small, .chss-mobile-shift-copy time) {
		color: var(--chss-release-muted);
	}

	/* Keep mobile action buttons comfortably tappable. */
	.chss-app :where(
		.chss-button,
		.chss-mobile-settings-save,
		.chss-mobile-settings-secondary,
		.chss-account-primary
	) {
		min-height: 48px !important;
		padding: 11px 16px !important;
	}

	.chss-app :where(.chss-small-button, .chss-small-link) {
		min-height: 40px !important;
		padding: 9px 12px !important;
	}

	/* CTA accordions use the same red release treatment. */
	.chss-app :where(
		.chss-mobile-new-shift > summary,
		.chss-mobile-new-staff > summary,
		.chss-mobile-new-timeoff > summary
	) {
		border: 1px solid #c81018 !important;
		border-radius: 18px !important;
		background: linear-gradient(135deg, var(--chss-release-red), var(--chss-release-red-dark)) !important;
		color: #ffffff !important;
		box-shadow: 0 9px 20px rgba(237, 28, 36, .17) !important;
	}

	.chss-app :where(
		.chss-mobile-new-shift[open] > summary,
		.chss-mobile-new-staff[open] > summary,
		.chss-mobile-new-timeoff[open] > summary
	) {
		border-radius: 18px 18px 0 0 !important;
	}

	/* Footer is release-safe and does not cover content. */
	body > .chss-mobile-nav-footer {
		border-top: 1px solid #dedfe4 !important;
		background: rgba(255, 255, 255, .985) !important;
		box-shadow: 0 -8px 22px rgba(17, 17, 17, .10) !important;
	}

	body > .chss-mobile-nav-footer .chss-tab {
		color: #55575e !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active {
		background: #fff1f2 !important;
		color: #c81018 !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active::before {
		background: var(--chss-release-red) !important;
	}
}

/* Keyboard focus is visible without changing the layout. */
.chss-app :where(
	button,
	a,
	summary,
	input,
	select,
	textarea
):focus-visible {
	outline: 3px solid rgba(237, 28, 36, .20) !important;
	outline-offset: 2px !important;
}


/* v0.67 — profile and account brand-colour consistency */
:is(.chss-app, .chss-account-portal-root) .chss-account-sheet > header p {
	color: #c81018 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-sheet > header h2,
:is(.chss-app, .chss-account-portal-root) .chss-account-profile-card strong,
:is(.chss-app, .chss-account-portal-root) .chss-account-password summary,
:is(.chss-app, .chss-account-portal-root) .chss-account-notifications strong,
:is(.chss-app, .chss-account-portal-root) .chss-account-notification strong,
:is(.chss-app, .chss-account-portal-root) .chss-account-help-list strong,
:is(.chss-app, .chss-account-portal-root) .chss-account-empty strong,
:is(.chss-app, .chss-account-portal-root) .chss-account-security-summary strong,
:is(.chss-app, .chss-account-portal-root) .chss-account-session-list strong,
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font legend,
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-options article strong {
	color: #111318 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-profile-summary-copy em {
	border: 1px solid #f0b5b8 !important;
	background: #fff1f2 !important;
	color: #b80f16 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-profile-links button {
	color: #22242a !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-profile-links button svg,
:is(.chss-app, .chss-account-portal-root) .chss-profile-links button > b {
	color: #c81018 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-profile-links button:hover {
	background: #fff1f2 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-profile-card,
:is(.chss-app, .chss-account-portal-root) .chss-account-avatar-form {
	border-color: #f0c6c9 !important;
	background: #fff7f7 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-avatar-picker input::file-selector-button {
	background: #fff1f2 !important;
	color: #b80f16 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-form input:focus,
:is(.chss-app, .chss-account-portal-root) .chss-account-avatar-picker input:focus {
	border-color: #ed1c24 !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(237, 28, 36, .12) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notifications article > span,
:is(.chss-app, .chss-account-portal-root) .chss-account-notification > span,
:is(.chss-app, .chss-account-portal-root) .chss-account-empty > span,
:is(.chss-app, .chss-account-portal-root) .chss-account-help-list article > span,
:is(.chss-app, .chss-account-portal-root) .chss-account-session-icon {
	border: 1px solid #f0b5b8 !important;
	background: #fff1f2 !important;
	color: #c81018 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notification.is-unread {
	border-color: #f0b5b8 !important;
	background: #fff7f7 !important;
	box-shadow: inset 3px 0 0 #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notification > i {
	background: #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-security-summary {
	border-color: #f0b5b8 !important;
	background: #fff7f7 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-security-summary > span {
	background: #ed1c24 !important;
	color: #ffffff !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-security-summary p {
	color: #68707d !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-session-list article.is-current {
	border-color: #f0b5b8 !important;
	background: #fff7f7 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-session-list em {
	border: 1px solid #f0b5b8 !important;
	background: #fff1f2 !important;
	color: #b80f16 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-current > span {
	background: #fff1f2 !important;
	color: #c81018 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-slider input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(to right, #ed1c24 0 var(--chss-font-range-progress), #d9e2ec var(--chss-font-range-progress) 100%) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-slider input[type="range"]::-moz-range-progress {
	background: #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-slider input[type="range"]::-webkit-slider-thumb,
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-slider input[type="range"]::-moz-range-thumb {
	border-color: #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-options [role="switch"].is-active {
	border-color: #ed1c24 !important;
	background: #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: #ed1c24 !important;
}

/* v0.68 — accessibility reset button + font slider final red polish */
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset.chss-button-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: calc(100% - 36px) !important;
	margin: 16px 18px calc(18px + env(safe-area-inset-bottom)) !important;
	min-height: 46px !important;
	padding: 12px 18px !important;
	border: 1px solid #e6a4a8 !important;
	border-radius: 15px !important;
	background: #ffffff !important;
	color: #b80f16 !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset.chss-button-secondary:hover {
	border-color: #ed1c24 !important;
	background: #fff1f2 !important;
	color: #9f090f !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-slider input[type="range"] {
	accent-color: #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-slider input[type="range"]::-webkit-slider-thumb {
	border-color: #ed1c24 !important;
	background: #ed1c24 !important;
	box-shadow: 0 0 0 3px #ffffff, 0 2px 7px rgba(184, 15, 22, .22) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-font-slider input[type="range"]::-moz-range-thumb {
	border-color: #ed1c24 !important;
	background: #ed1c24 !important;
	box-shadow: 0 0 0 3px #ffffff, 0 2px 7px rgba(184, 15, 22, .22) !important;
}

/* v0.69 — accessibility reset button uses primary red style */
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset,
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset.chss-button-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: calc(100% - 36px) !important;
	margin: 16px 18px calc(18px + env(safe-area-inset-bottom)) !important;
	min-height: 46px !important;
	padding: 12px 18px !important;
	border: 1px solid #c81018 !important;
	border-radius: 15px !important;
	background: linear-gradient(135deg, #ed1c24 0%, #b80f16 100%) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	letter-spacing: 0 !important;
	box-shadow: 0 9px 20px rgba(237, 28, 36, .18) !important;
	text-shadow: none !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset:hover,
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset.chss-button-secondary:hover {
	border-color: #b80f16 !important;
	background: linear-gradient(135deg, #f1272f 0%, #a90d14 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 10px 22px rgba(237, 28, 36, .22) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset:active,
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-reset.chss-button-secondary:active {
	transform: scale(.985) !important;
	box-shadow: 0 5px 12px rgba(237, 28, 36, .15) !important;
}

/* v0.70 — mobile viewport centering and right-edge overflow fix */
@media (max-width: 480px) {
	html,
	body {
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	.chss-app {
		position: relative !important;
		left: 50% !important;
		right: auto !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: translateX(-50%) !important;
		padding-left: max(10px, env(safe-area-inset-left)) !important;
		padding-right: max(10px, env(safe-area-inset-right)) !important;
		overflow-x: clip !important;
	}

	@supports (width: 100dvw) {
		.chss-app {
			width: 100dvw !important;
			max-width: 100dvw !important;
		}
	}

	.chss-app .chss-dashboard,
	.chss-app .chss-dashboard-modern {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body > .chss-mobile-nav-footer {
		box-sizing: border-box !important;
		width: 100vw !important;
		max-width: 100vw !important;
		overflow-x: clip !important;
	}

	@supports (width: 100dvw) {
		body > .chss-mobile-nav-footer {
			width: 100dvw !important;
			max-width: 100dvw !important;
		}
	}
}

/* v0.71 — consistent mobile centering across every application page */
@media (max-width: 480px) {
	html,
	body {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	.chss-app {
		box-sizing: border-box !important;
		position: relative !important;
		left: 50% !important;
		right: auto !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin: 0 !important;
		transform: translateX(-50%) !important;
		padding-left: max(10px, env(safe-area-inset-left)) !important;
		padding-right: max(10px, env(safe-area-inset-right)) !important;
		overflow-x: clip !important;
	}

	@supports (width: 100dvw) {
		.chss-app {
			width: 100dvw !important;
			max-width: 100dvw !important;
		}
	}

	.chss-app > .chss-dashboard,
	.chss-app > .chss-dashboard-modern,
	.chss-app .chss-dashboard,
	.chss-app .chss-dashboard-modern {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow-x: clip !important;
	}

	.chss-app .chss-dashboard-modern > :where(
		.chss-mobile-primary-page,
		.chss-mobile-daily-schedule,
		.chss-mobile-shifts,
		.chss-mobile-staff,
		.chss-mobile-timeoff,
		.chss-mobile-settings,
		.chss-mobile-history,
		.chss-mobile-reports,
		.chss-attendance-screen,
		.chss-panel
	) {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow-x: clip !important;
	}

	/* Settings used old negative margins that shifted this page independently. */
	.chss-app .chss-mobile-settings {
		margin: 0 auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.chss-app .chss-mobile-settings-header {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.chss-app .chss-dashboard-modern > :where(
		.chss-mobile-primary-page,
		.chss-mobile-daily-schedule,
		.chss-mobile-shifts,
		.chss-mobile-staff,
		.chss-mobile-timeoff,
		.chss-mobile-settings,
		.chss-mobile-history,
		.chss-mobile-reports,
		.chss-attendance-screen
	) > * {
		box-sizing: border-box;
		max-width: 100%;
	}

	body > .chss-mobile-nav-footer {
		box-sizing: border-box !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
}

/* v0.74 — restore manager profile menu interaction after mobile centering */
/* The account portal is a zero-size viewport portal. It must never inherit the
   transformed/full-width .chss-app centering rules used by the visible app. */
body > .chss-account-portal-root[data-chss-account-portal] {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 2147483646 !important;
	width: 0 !important;
	max-width: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	transform: none !important;
	overflow: visible !important;
	clip: auto !important;
	pointer-events: none !important;
}

body > .chss-account-portal-root[data-chss-account-portal] > .chss-profile-menu[data-chss-profile-menu-portal],
body > .chss-account-portal-root[data-chss-account-portal] > .chss-account-dialog {
	pointer-events: auto !important;
}

.chss-app .chss-app-header {
	overflow: visible !important;
}

.chss-app [data-chss-profile],
.chss-app [data-chss-profile-toggle] {
	position: relative !important;
	pointer-events: auto !important;
	touch-action: manipulation !important;
}

.chss-app [data-chss-profile] {
	z-index: 2147483000 !important;
}

.chss-app [data-chss-profile-toggle] {
	z-index: 2 !important;
}

/* v0.75 — mobile login response state */
.chss-auth-card form[data-chss-login-form] button[type="submit"]:disabled {
	cursor: wait !important;
	opacity: .82;
	transform: none !important;
}

/* v0.82 — real calendar "today" indicator in the mobile schedule */
.chss-app .chss-mobile-week-strip a.is-today {
	position: relative !important;
	border-color: #ed1c24 !important;
	background: #fff1f2 !important;
	color: #c81018 !important;
	box-shadow: inset 0 0 0 1px rgba(237, 28, 36, .10), 0 5px 14px rgba(237, 28, 36, .08) !important;
}

.chss-app .chss-mobile-week-strip a.is-today > span,
.chss-app .chss-mobile-week-strip a.is-today > strong {
	color: #c81018 !important;
}

.chss-app .chss-mobile-week-strip .chss-mobile-today-marker {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 13px;
	margin-top: 2px;
	padding: 1px 4px;
	border-radius: 999px;
	background: #ed1c24;
	color: #ffffff !important;
	font-size: 7px !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.chss-app .chss-mobile-week-strip a.is-today.is-active {
	border-color: #c81018 !important;
	background: linear-gradient(180deg, #fff0f1 0%, #ffe6e8 100%) !important;
	box-shadow: inset 0 0 0 1px rgba(237, 28, 36, .16), 0 6px 16px rgba(237, 28, 36, .10) !important;
}

.chss-app .chss-mobile-week-day-card.is-today > summary {
	border-color: #f0b5b8 !important;
	background: #fff7f7 !important;
}

.chss-app .chss-mobile-week-day-card.is-today .chss-mobile-week-day-badge {
	border-color: #ed1c24 !important;
	background: #fff1f2 !important;
	color: #c81018 !important;
	box-shadow: inset 0 0 0 1px rgba(237, 28, 36, .08) !important;
}

.chss-app .chss-mobile-week-today-label {
	display: inline-flex;
	align-items: center;
	margin-left: 7px;
	padding: 2px 6px;
	border-radius: 999px;
	background: #ed1c24;
	color: #ffffff;
	font-size: 8px;
	font-style: normal;
	font-weight: 900;
	line-height: 1.2;
	vertical-align: middle;
}

/* v0.83 — one-tap return to today's schedule */
.chss-app .chss-mobile-day-current {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 3px;
	min-width: 0;
}

.chss-app .chss-mobile-day-current > strong {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chss-app .chss-mobile-day-switcher .chss-mobile-today-jump {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	min-height: 20px !important;
	padding: 3px 9px !important;
	border: 1px solid #ed1c24 !important;
	border-radius: 999px !important;
	background: #ed1c24 !important;
	color: #ffffff !important;
	font-size: 9px !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	text-decoration: none !important;
	box-shadow: 0 4px 10px rgba(237, 28, 36, .14) !important;
}

.chss-app .chss-mobile-day-switcher .chss-mobile-today-jump.is-current {
	background: #fff1f2 !important;
	color: #c81018 !important;
	box-shadow: none !important;
}

.chss-app .chss-mobile-today-week-jump {
	gap: 7px;
	border: 1px solid #f0b5b8 !important;
	background: #fff1f2 !important;
	color: #c81018 !important;
}

.chss-app .chss-mobile-today-week-jump svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}


/* v0.84 — mobile Web Push controls */
.chss-push-settings{display:grid;gap:10px;margin:0 0 14px;padding:13px;border:1px solid #efc2c5;border-radius:16px;background:#fff7f7}.chss-push-settings>div{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px}.chss-push-settings>div>span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:#ffe8e9;color:#c81018;font-size:18px}.chss-push-settings p{display:grid;gap:3px;margin:0}.chss-push-settings strong{color:#111318;font-size:13px}.chss-push-settings p small,.chss-push-status{color:#68707d;font-size:10.5px;line-height:1.4}.chss-push-actions{display:grid;grid-template-columns:1fr auto;gap:8px}.chss-push-actions button{min-height:44px;padding:10px 14px;border:1px solid #c81018;border-radius:15px;background:linear-gradient(135deg,#ed1c24,#b80f16);color:#fff;font:inherit;font-weight:900;cursor:pointer}.chss-push-actions [data-chss-push-toggle][data-state="enabled"]{border-color:#e6a4a8;background:#fff;color:#b80f16;box-shadow:none}.chss-push-actions [data-chss-push-test]{border-color:#e6a4a8;background:#fff;color:#b80f16;box-shadow:none}.chss-push-actions button:disabled{border-color:#d7d9de;background:#eceef1;color:#7a808a;cursor:not-allowed;box-shadow:none}.chss-push-status{display:block;margin:0}.chss-push-status.is-error{color:#b80f16;font-weight:750}.chss-push-status.is-success{color:#9f090f;font-weight:750}

/* v0.85 — notification centre / Web Push visual polish */
:is(.chss-app, .chss-account-portal-root) .chss-notification-sheet {
	gap: 0 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-settings {
	display: grid !important;
	gap: 12px !important;
	margin: 0 0 14px !important;
	padding: 14px !important;
	border: 1px solid #efc2c5 !important;
	border-radius: 18px !important;
	background: #fffafa !important;
	box-shadow: 0 6px 18px rgba(17, 17, 17, .045) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-settings > div:first-child {
	display: grid !important;
	grid-template-columns: 42px minmax(0, 1fr) !important;
	align-items: start !important;
	gap: 11px !important;
	min-width: 0 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-settings > div:first-child > span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	border: 1px solid #ffd5d8 !important;
	border-radius: 13px !important;
	background: #fff0f1 !important;
	color: #c81018 !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-settings p {
	display: grid !important;
	gap: 4px !important;
	min-width: 0 !important;
	margin: 0 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-settings strong {
	color: #111318 !important;
	font-size: 13.5px !important;
	font-weight: 900 !important;
	line-height: 1.25 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-settings p small {
	color: #68707d !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-actions {
	display: flex !important;
	align-items: stretch !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 0 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-actions button {
	box-sizing: border-box !important;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 11px 12px !important;
	border: 1px solid #c81018 !important;
	border-radius: 15px !important;
	background: linear-gradient(135deg, #ed1c24 0%, #b80f16 100%) !important;
	color: #ffffff !important;
	font: inherit !important;
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 1.1 !important;
	white-space: nowrap !important;
	box-shadow: 0 7px 16px rgba(237, 28, 36, .16) !important;
	cursor: pointer !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-actions button[hidden] {
	display: none !important;
}

/* When notifications are already enabled, Disable becomes secondary and Test stays primary. */
:is(.chss-app, .chss-account-portal-root) .chss-push-actions [data-chss-push-toggle][data-state="enabled"] {
	border-color: #e6a4a8 !important;
	background: #ffffff !important;
	color: #b80f16 !important;
	box-shadow: none !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-actions [data-chss-push-test] {
	border-color: #c81018 !important;
	background: linear-gradient(135deg, #ed1c24 0%, #b80f16 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 7px 16px rgba(237, 28, 36, .16) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-actions button:disabled {
	border-color: #d7d9de !important;
	background: #eceef1 !important;
	color: #7a808a !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-status {
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 0 0 13px !important;
	color: #717782 !important;
	font-size: 10px !important;
	font-weight: 650 !important;
	line-height: 1.4 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-status::before {
	content: "";
	position: absolute;
	left: 0;
	top: .48em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9ca3af;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-status.is-success {
	color: #9f090f !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-status.is-success::before {
	background: #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-status.is-error {
	color: #b80f16 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-status.is-error::before {
	background: #b80f16 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notifications {
	display: grid !important;
	gap: 10px !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notifications .chss-account-notification {
	box-sizing: border-box !important;
	grid-template-columns: 40px minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px !important;
	border: 1px solid #e2e4e9 !important;
	border-radius: 16px !important;
	background: #ffffff !important;
	box-shadow: 0 3px 10px rgba(17, 17, 17, .035) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notifications .chss-account-notification.is-unread {
	border-color: #efb1b5 !important;
	background: #fffafa !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notification > span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border: 1px solid #ffd6d8 !important;
	border-radius: 12px !important;
	background: #fff0f1 !important;
	color: #c81018 !important;
	font-size: 17px !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notification strong {
	color: #111318 !important;
	font-size: 12.5px !important;
	font-weight: 900 !important;
	line-height: 1.25 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notification p {
	margin: 2px 0 0 !important;
	color: #5f6672 !important;
	font-size: 10.5px !important;
	line-height: 1.38 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-account-notification small {
	margin-top: 3px !important;
	color: #8a909a !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
}

@media (max-width: 380px) {
	:is(.chss-app, .chss-account-portal-root) .chss-push-actions {
		gap: 8px !important;
	}
	:is(.chss-app, .chss-account-portal-root) .chss-push-actions button {
		min-height: 44px !important;
		padding-inline: 9px !important;
		font-size: 12px !important;
	}
}

/* v0.86 — Web Push uses the same switch language as Accessibility */
:is(.chss-app, .chss-account-portal-root) .chss-push-settings {
	gap: 10px !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-setting-row {
	display: grid !important;
	grid-template-columns: 42px minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: 11px !important;
	min-width: 0 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-setting-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	border: 1px solid #ffd5d8 !important;
	border-radius: 13px !important;
	background: #fff0f1 !important;
	color: #c81018 !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-switch {
	position: relative !important;
	box-sizing: border-box !important;
	width: 52px !important;
	min-width: 52px !important;
	height: 32px !important;
	min-height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #aeb9c8 !important;
	border-radius: 999px !important;
	background: #dfe5ed !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: border-color .16s ease, background-color .16s ease, opacity .16s ease !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-switch > span {
	position: absolute !important;
	top: 3px !important;
	left: 3px !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	box-shadow: 0 2px 5px rgba(10, 25, 55, .24) !important;
	transform: translateX(0) !important;
	transition: transform .16s ease !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-switch.is-active,
:is(.chss-app, .chss-account-portal-root) .chss-push-switch[aria-checked="true"] {
	border-color: #ed1c24 !important;
	background: #ed1c24 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-switch.is-active > span,
:is(.chss-app, .chss-account-portal-root) .chss-push-switch[aria-checked="true"] > span {
	transform: translateX(20px) !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-switch:disabled {
	cursor: not-allowed !important;
	opacity: .62 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-push-switch:focus-visible {
	outline: 3px solid rgba(237, 28, 36, .18) !important;
	outline-offset: 3px !important;
}

@media (max-width: 360px) {
	:is(.chss-app, .chss-account-portal-root) .chss-push-setting-row {
		grid-template-columns: 38px minmax(0, 1fr) auto !important;
		gap: 9px !important;
	}
	:is(.chss-app, .chss-account-portal-root) .chss-push-setting-icon {
		width: 38px !important;
		height: 38px !important;
	}
}


/* v0.88 — notification deep-link focus for employee shifts */
.chss-app .chss-shift-card[id^="chss-shift-"] {
	scroll-margin-top: 110px;
}

.chss-app .chss-shift-card.is-notification-focus,
.chss-app .chss-shift-card[id^="chss-shift-"]:target {
	border-color: #ed1c24 !important;
	background: #fff8f8 !important;
	box-shadow: 0 0 0 2px rgba(237, 28, 36, .12), 0 10px 24px rgba(17, 17, 17, .08) !important;
}

.chss-app .chss-shift-card.is-notification-focus::before,
.chss-app .chss-shift-card[id^="chss-shift-"]:target::before {
	content: "Από ειδοποίηση";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 7px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #ed1c24;
	color: #fff;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .02em;
}

/* v0.89 — employee schedule home redesign, presentation only */
@media (max-width: 780px) {
	.chss-app .chss-employee-shifts-home {
		display: grid;
		gap: 14px;
		padding: 4px 0 8px;
	}

	.chss-app .chss-employee-welcome {
		padding: 10px 6px 4px;
	}

	.chss-app .chss-employee-welcome h2 {
		margin: 0;
		color: #151821;
		font-size: 25px;
		font-weight: 950;
		line-height: 1.1;
		letter-spacing: -.035em;
	}

	.chss-app .chss-employee-welcome p {
		margin: 7px 0 0;
		color: #747780;
		font-size: 13px;
		line-height: 1.45;
	}

	.chss-app .chss-employee-section-label {
		margin: 0;
		color: #d9161e;
		font-size: 11px;
		font-weight: 950;
		letter-spacing: .075em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.chss-app .chss-employee-attendance-quick {
		margin: 0 !important;
		border-color: #f0c4c6 !important;
		border-radius: 18px !important;
		background: #fff8f8 !important;
		box-shadow: none !important;
	}

	.chss-app .chss-employee-next-shift-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 82px;
		align-items: center;
		gap: 14px;
		min-height: 202px;
		padding: 22px 20px;
		border: 1px solid #efc5c8;
		border-radius: 24px;
		background: linear-gradient(135deg, #fffafa 0%, #fff1f2 100%);
		box-shadow: 0 10px 28px rgba(17, 17, 17, .055);
		overflow: hidden;
	}

	.chss-app .chss-employee-next-shift-card.is-empty {
		min-height: 160px;
	}

	.chss-app .chss-employee-next-shift-copy {
		min-width: 0;
	}

	.chss-app .chss-employee-next-shift-copy h3 {
		margin: 8px 0 9px;
		color: #141720;
		font-size: 20px;
		font-weight: 950;
		line-height: 1.18;
		letter-spacing: -.025em;
	}

	.chss-app .chss-employee-next-time {
		display: block;
		color: #e3161e;
		font-size: clamp(30px, 9vw, 39px);
		font-weight: 950;
		line-height: 1;
		letter-spacing: -.04em;
		white-space: nowrap;
	}

	.chss-app .chss-employee-next-meta {
		display: grid;
		gap: 9px;
		margin-top: 17px;
	}

	.chss-app .chss-employee-next-meta span {
		display: flex;
		align-items: center;
		gap: 9px;
		color: #61656f;
		font-size: 13px;
		font-weight: 700;
	}

	.chss-app .chss-employee-next-meta svg,
	.chss-app .chss-employee-shift-main svg,
	.chss-app .chss-employee-summary-icon svg,
	.chss-app .chss-employee-next-icon svg {
		fill: none;
		stroke: currentColor;
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.chss-app .chss-employee-next-meta svg {
		width: 19px;
		height: 19px;
		flex: 0 0 19px;
	}

	.chss-app .chss-employee-next-icon {
		display: grid;
		place-items: center;
		width: 76px;
		height: 76px;
		border-radius: 50%;
		background: rgba(237, 28, 36, .09);
		color: #ed1c24;
	}

	.chss-app .chss-employee-next-icon svg {
		width: 42px;
		height: 42px;
	}

	.chss-app .chss-employee-next-empty-copy {
		margin: 7px 0 0;
		color: #737781;
		font-size: 13px;
		line-height: 1.45;
	}

	.chss-app .chss-employee-week-card {
		padding: 17px 12px 13px;
		border: 1px solid #e1e2e7;
		border-radius: 22px;
		background: #ffffff;
		box-shadow: 0 6px 18px rgba(17, 17, 17, .035);
	}

	.chss-app .chss-employee-week-card > .chss-employee-section-label {
		padding: 0 5px 10px;
	}

	.chss-app .chss-employee-week-strip {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 2px;
	}

	.chss-app .chss-employee-week-day {
		display: grid;
		justify-items: center;
		align-content: center;
		gap: 3px;
		min-width: 0;
		min-height: 64px;
		border-radius: 15px;
		color: #5c6069;
	}

	.chss-app .chss-employee-week-day span {
		font-size: 9px;
		font-weight: 850;
		line-height: 1;
	}

	.chss-app .chss-employee-week-day strong {
		font-size: 16px;
		font-weight: 850;
		line-height: 1;
	}

	.chss-app .chss-employee-week-day i {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: transparent;
	}

	.chss-app .chss-employee-week-day.has-shift i {
		background: #ed1c24;
	}

	.chss-app .chss-employee-week-day.is-today {
		background: #fff0f1;
		color: #d9161e;
	}

	.chss-app .chss-employee-week-day.is-today strong {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		margin: -2px 0;
		border-radius: 50%;
		background: #ed1c24;
		color: #fff;
		box-shadow: 0 6px 13px rgba(237, 28, 36, .20);
	}

	.chss-app .chss-employee-summary-strip {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border: 1px solid #e1e2e7;
		border-radius: 22px;
		background: #ffffff;
		box-shadow: 0 6px 18px rgba(17, 17, 17, .035);
		overflow: hidden;
	}

	.chss-app .chss-employee-summary-strip article {
		display: grid;
		grid-template-columns: 38px minmax(0, 1fr);
		align-items: center;
		gap: 7px;
		min-width: 0;
		padding: 14px 8px;
		border-right: 1px solid #ececf0;
	}

	.chss-app .chss-employee-summary-strip article:last-child {
		border-right: 0;
	}

	.chss-app .chss-employee-summary-icon {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: #fff0f1;
		color: #ed1c24;
	}

	.chss-app .chss-employee-summary-icon svg {
		width: 20px;
		height: 20px;
	}

	.chss-app .chss-employee-summary-strip article > div {
		display: grid;
		gap: 2px;
		min-width: 0;
	}

	.chss-app .chss-employee-summary-strip strong {
		color: #151821;
		font-size: 18px;
		font-weight: 950;
		line-height: 1;
	}

	.chss-app .chss-employee-summary-strip small {
		color: #6d717a;
		font-size: 9px;
		font-weight: 750;
		line-height: 1.25;
	}

	.chss-app .chss-employee-upcoming-section {
		display: grid;
		gap: 11px;
		padding-top: 4px;
	}

	.chss-app .chss-employee-upcoming-section > header {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 12px;
		padding: 0 5px;
	}

	.chss-app .chss-employee-upcoming-section > header h2 {
		margin: 5px 0 0;
		color: #141720;
		font-size: 22px;
		font-weight: 950;
		letter-spacing: -.03em;
	}

	.chss-app .chss-employee-upcoming-section > header > span {
		padding-bottom: 2px;
		color: #d9161e;
		font-size: 11px;
		font-weight: 850;
		white-space: nowrap;
	}

	.chss-app .chss-employee-shift-list {
		display: grid;
		gap: 10px;
	}

	.chss-app .chss-shift-card.chss-employee-shift-card {
		position: relative;
		display: grid !important;
		grid-template-columns: 82px minmax(0, 1fr) !important;
		align-items: center !important;
		gap: 15px !important;
		min-height: 118px;
		padding: 14px 16px !important;
		border: 1px solid #e1e2e7 !important;
		border-radius: 20px !important;
		background: #ffffff !important;
		box-shadow: 0 7px 20px rgba(17, 17, 17, .045) !important;
		overflow: hidden;
	}

	.chss-app .chss-employee-shift-date-block {
		display: grid;
		justify-items: center;
		align-content: center;
		align-self: stretch;
		padding-right: 14px;
		border-right: 1px solid #e4e4e8;
		text-align: center;
	}

	.chss-app .chss-employee-shift-date-block span {
		max-width: 100%;
		overflow: hidden;
		color: #d9161e;
		font-size: 9px;
		font-weight: 950;
		line-height: 1.1;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.chss-app .chss-employee-shift-date-block strong {
		margin: 3px 0 0;
		color: #151821;
		font-size: 31px;
		font-weight: 950;
		line-height: 1;
	}

	.chss-app .chss-employee-shift-date-block small {
		margin-top: 2px;
		color: #6e727b;
		font-size: 11px;
		font-weight: 700;
	}

	.chss-app .chss-employee-shift-main {
		min-width: 0;
	}

	.chss-app .chss-employee-shift-time {
		display: block;
		color: #e3161e;
		font-size: 19px;
		font-weight: 950;
		line-height: 1.08;
		letter-spacing: -.025em;
	}

	.chss-app .chss-employee-shift-main h3 {
		margin: 7px 0 0;
		color: #171920;
		font-size: 15px;
		font-weight: 900;
		line-height: 1.15;
	}

	.chss-app .chss-employee-shift-main p {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 6px 0 0;
		color: #737780;
		font-size: 11px;
		line-height: 1.3;
	}

	.chss-app .chss-employee-shift-main p svg {
		width: 16px;
		height: 16px;
		flex: 0 0 16px;
	}

	.chss-app .chss-employee-shift-main .chss-employee-shift-note {
		display: block;
		margin-top: 6px;
		color: #858891;
		font-size: 10px;
		font-style: italic;
	}

	.chss-app .chss-employee-shift-card.is-notification-focus,
	.chss-app .chss-employee-shift-card:target {
		border-color: #ed1c24 !important;
		background: #fffafa !important;
		box-shadow: 0 0 0 2px rgba(237, 28, 36, .10), 0 7px 20px rgba(17, 17, 17, .05) !important;
	}

	.chss-app .chss-employee-shift-card.is-notification-focus::before,
	.chss-app .chss-employee-shift-card:target::before {
		position: absolute;
		top: 7px;
		right: 8px;
		z-index: 1;
		margin: 0 !important;
		font-size: 8px !important;
	}
}

@media (max-width: 360px) {
	.chss-app .chss-employee-next-shift-card {
		grid-template-columns: minmax(0, 1fr) 62px;
		padding: 18px 16px;
	}

	.chss-app .chss-employee-next-icon {
		width: 60px;
		height: 60px;
	}

	.chss-app .chss-employee-next-icon svg {
		width: 34px;
		height: 34px;
	}

	.chss-app .chss-employee-summary-strip article {
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 5px;
		padding-inline: 6px;
	}

	.chss-app .chss-employee-summary-icon {
		width: 30px;
		height: 30px;
	}

	.chss-app .chss-employee-summary-icon svg {
		width: 17px;
		height: 17px;
	}

	.chss-app .chss-shift-card.chss-employee-shift-card {
		grid-template-columns: 70px minmax(0, 1fr) !important;
		gap: 11px !important;
		padding-inline: 12px !important;
	}
}

/* v0.90 — employee week navigator aligned with manager mobile calendar */
@media (max-width: 780px) {
	.chss-app .chss-employee-week-card-manager-style {
		padding: 16px 10px 13px !important;
		border: 1px solid #dfe1e6 !important;
		border-radius: 22px !important;
		background: #ffffff !important;
		box-shadow: 0 6px 18px rgba(17, 17, 17, .04) !important;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-card-title {
		padding: 0 6px 8px;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-section-label {
		margin: 0 !important;
		padding: 0 !important;
	}

	.chss-app .chss-employee-week-switcher {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 42px;
		align-items: center;
		gap: 8px;
		margin: 0 2px 11px;
		padding: 4px 0;
	}

	.chss-app .chss-employee-week-arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		min-height: 40px;
		padding: 0;
		border: 1px solid #dfe2e7;
		border-radius: 50%;
		background: #ffffff;
		color: #111827;
		font-size: 31px;
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		box-shadow: 0 3px 9px rgba(17, 24, 39, .06);
		-webkit-tap-highlight-color: transparent;
	}

	.chss-app .chss-employee-week-arrow:active {
		transform: scale(.96);
		background: #fff3f4;
		color: #c81018;
	}

	.chss-app .chss-employee-week-range {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 40px;
		padding: 4px 6px;
		color: #101a31;
		font-size: 16px;
		font-weight: 900;
		line-height: 1.15;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

	.chss-app .chss-employee-week-range:active {
		color: #c81018;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-strip {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 5px;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day {
		display: grid;
		justify-items: center;
		align-content: center;
		gap: 4px;
		min-width: 0;
		min-height: 68px;
		padding: 7px 1px 5px;
		border: 1px solid #e0e2e7;
		border-radius: 15px;
		background: #ffffff;
		color: #171b24;
		box-shadow: none;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day span {
		font-size: 8px;
		font-weight: 900;
		line-height: 1;
		letter-spacing: -.02em;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day strong {
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 0;
		background: transparent;
		color: inherit;
		font-size: 17px;
		font-weight: 900;
		line-height: 1;
		box-shadow: none;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day i {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: transparent;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day.has-shift i {
		background: #ed1c24;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day.is-today {
		border-color: #ed1c24;
		background: linear-gradient(180deg, #f1272f 0%, #e3161e 100%);
		color: #ffffff;
		box-shadow: 0 7px 16px rgba(237, 28, 36, .18);
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day.is-today strong,
	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day.is-today span {
		color: #ffffff !important;
	}

	.chss-app .chss-employee-week-card-manager-style .chss-employee-week-day.is-today.has-shift i {
		background: #ffffff;
	}
}

/* v0.101 — CompuShift white/red custom calendar (replaces native date picker UI). */
.chss-app .chss-date-field {
	display: block;
	width: 100%;
	min-width: 0;
}

.chss-app .chss-date-trigger {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 38px;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 6px 7px 6px 13px;
	border: 1px solid #dedee2;
	border-radius: 13px;
	background: #ffffff;
	color: #111111;
	font: inherit;
	font-size: 14px;
	font-weight: 750;
	line-height: 1.25;
	text-align: left;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.chss-app .chss-date-trigger:focus-visible,
.chss-app .chss-date-trigger:active {
	outline: none;
	border-color: #ed1c24;
	background: #fffafa;
	box-shadow: 0 0 0 3px rgba(237, 28, 36, .10);
}

.chss-app .chss-date-trigger.is-empty .chss-date-trigger-value {
	color: #8a8a91;
	font-weight: 650;
}

.chss-app .chss-date-trigger-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chss-app .chss-date-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #fff0f1;
	color: #ed1c24;
}

.chss-app .chss-date-trigger-icon svg {
	width: 19px;
	height: 19px;
}

body.chss-calendar-open {
	overflow: hidden !important;
}

.chss-calendar-overlay[hidden] {
	display: none !important;
}

.chss-calendar-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 14px;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}

.chss-calendar-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 17, 20, .50);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .16s ease;
}

.chss-calendar-sheet {
	position: relative;
	z-index: 1;
	width: min(100%, 430px);
	max-height: calc(100% - 12px);
	overflow: auto;
	padding: 18px 16px 15px;
	border: 1px solid #e1e1e4;
	border-radius: 24px;
	background: #ffffff;
	box-shadow: 0 26px 70px rgba(17, 17, 17, .26);
	transform: translateY(18px);
	opacity: 0;
	transition: transform .18s ease, opacity .16s ease;
}

.chss-calendar-overlay.is-open .chss-calendar-backdrop {
	opacity: 1;
}

.chss-calendar-overlay.is-open .chss-calendar-sheet {
	transform: translateY(0);
	opacity: 1;
}

.chss-calendar-sheet-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 13px;
}

.chss-calendar-eyebrow {
	display: block;
	margin-bottom: 3px;
	color: #ed1c24;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: .08em;
}

.chss-calendar-sheet-head h2 {
	margin: 0;
	color: #111111;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.chss-calendar-close,
.chss-calendar-nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0;
	border: 1px solid #dedee2;
	border-radius: 50%;
	background: #ffffff;
	color: #555b66;
	box-shadow: 0 3px 10px rgba(17, 17, 17, .05);
}

.chss-calendar-close svg,
.chss-calendar-nav-button svg {
	width: 20px;
	height: 20px;
}

.chss-calendar-close:active,
.chss-calendar-nav-button:active:not(:disabled) {
	border-color: #f4b6b9;
	background: #fff1f2;
	color: #c81018;
	transform: scale(.96);
}

.chss-calendar-nav-button:disabled {
	opacity: .28;
	box-shadow: none;
}

.chss-calendar-nav {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 42px;
	align-items: center;
	gap: 10px;
	margin: 3px 0 14px;
}

.chss-calendar-month-label {
	min-width: 0;
	color: #15171c;
	font-size: 17px;
	font-weight: 900;
	text-align: center;
}

.chss-calendar-weekdays,
.chss-calendar-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 5px;
}

.chss-calendar-weekdays {
	margin-bottom: 5px;
}

.chss-calendar-weekdays span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 26px;
	color: #7c7d84;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: -.01em;
}

.chss-calendar-day {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	min-width: 0;
	min-height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 13px;
	background: transparent;
	color: #17191e;
	font: inherit;
	font-size: 14px;
	font-weight: 850;
	line-height: 1;
	box-shadow: none;
}

.chss-calendar-day.is-outside:not(.is-selected) {
	color: #c1c2c7;
}

.chss-calendar-day.is-today:not(.is-selected) {
	border-color: #ed1c24;
	background: #fff7f7;
	color: #c81018;
}

.chss-calendar-day.is-today:not(.is-selected)::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #ed1c24;
	transform: translateX(-50%);
}

.chss-calendar-day.is-selected {
	border-color: #ed1c24;
	background: linear-gradient(180deg, #f52a31 0%, #e3161e 100%);
	color: #ffffff;
	box-shadow: 0 7px 15px rgba(237, 28, 36, .22);
}

.chss-calendar-day:active:not(:disabled):not(.is-selected) {
	background: #fff0f1;
	color: #c81018;
}

.chss-calendar-day:focus-visible {
	outline: 2px solid rgba(237, 28, 36, .36);
	outline-offset: 1px;
}

.chss-calendar-day.is-disabled,
.chss-calendar-day:disabled {
	border-color: transparent;
	background: transparent;
	color: #d5d5d9;
	box-shadow: none;
	cursor: not-allowed;
	opacity: .62;
}

.chss-calendar-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 15px;
	padding-top: 13px;
	border-top: 1px solid #ededf0;
}

.chss-calendar-today,
.chss-calendar-cancel {
	min-height: 42px;
	padding: 8px 14px;
	border-radius: 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 900;
}

.chss-calendar-today {
	border: 1px solid #ed1c24;
	background: #ed1c24;
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(237, 28, 36, .17);
}

.chss-calendar-today:disabled {
	border-color: #e3e3e6;
	background: #f3f3f5;
	color: #aaaab0;
	box-shadow: none;
}

.chss-calendar-cancel {
	border: 1px solid #dedee2;
	background: #ffffff;
	color: #5e6068;
}

@media (max-width: 360px) {
	.chss-calendar-overlay {
		padding: 8px;
	}

	.chss-calendar-sheet {
		padding: 16px 12px 13px;
		border-radius: 21px;
	}

	.chss-calendar-weekdays,
	.chss-calendar-days {
		gap: 3px;
	}

	.chss-calendar-day {
		min-height: 38px;
		border-radius: 11px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chss-calendar-backdrop,
	.chss-calendar-sheet,
	.chss-app .chss-date-trigger {
		transition: none !important;
	}
}

/* v0.102 — cleaner, rounder CompuShift calendar matching the approved mockup. */
.chss-calendar-overlay {
	padding: 12px !important;
}

.chss-calendar-backdrop {
	background: rgba(20, 23, 28, .56) !important;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.chss-calendar-sheet {
	box-sizing: border-box !important;
	width: min(100%, 430px) !important;
	max-height: calc(100% - 14px) !important;
	padding: 24px 20px 22px !important;
	border: 1px solid #ececef !important;
	border-radius: 34px !important;
	background: #ffffff !important;
	box-shadow: 0 24px 64px rgba(17, 20, 25, .24) !important;
	overflow-x: hidden !important;
}

.chss-calendar-sheet-head {
	align-items: flex-start !important;
	gap: 16px !important;
	margin-bottom: 18px !important;
}

.chss-calendar-eyebrow {
	margin: 1px 0 6px !important;
	color: #ed1c24 !important;
	font-size: 10px !important;
	font-weight: 950 !important;
	line-height: 1 !important;
	letter-spacing: .085em !important;
}

.chss-calendar-sheet-head h2 {
	margin: 0 !important;
	color: #15171c !important;
	font-size: 22px !important;
	font-weight: 950 !important;
	line-height: 1.12 !important;
	letter-spacing: -.025em !important;
}

.chss-calendar-overlay .chss-calendar-close,
.chss-calendar-overlay .chss-calendar-nav-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 46px !important;
	height: 46px !important;
	min-width: 46px !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #e3e3e7 !important;
	border-radius: 16px !important;
	background: #ffffff !important;
	color: #ed1c24 !important;
	box-shadow: 0 3px 10px rgba(17, 20, 25, .035) !important;
	font: inherit !important;
	line-height: 1 !important;
}

.chss-calendar-overlay .chss-calendar-close {
	border-color: #f1d3d5 !important;
	background: #fffdfd !important;
}

.chss-calendar-overlay .chss-calendar-close svg,
.chss-calendar-overlay .chss-calendar-nav-button svg {
	width: 21px !important;
	height: 21px !important;
}

.chss-calendar-overlay .chss-calendar-close:active,
.chss-calendar-overlay .chss-calendar-nav-button:active:not(:disabled) {
	border-color: #efb1b5 !important;
	background: #fff3f4 !important;
	color: #c81018 !important;
	box-shadow: none !important;
	transform: scale(.96);
}

.chss-calendar-overlay .chss-calendar-nav-button:disabled {
	border-color: #ececef !important;
	background: #fafafb !important;
	color: #c7c8cd !important;
	box-shadow: none !important;
	opacity: .55 !important;
}

.chss-calendar-nav {
	grid-template-columns: 46px minmax(0, 1fr) 46px !important;
	gap: 12px !important;
	margin: 0 0 19px !important;
}

.chss-calendar-month-label {
	color: #181a20 !important;
	font-size: 18px !important;
	font-weight: 950 !important;
	line-height: 1.15 !important;
	letter-spacing: -.018em !important;
}

.chss-calendar-weekdays,
.chss-calendar-days {
	grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
	column-gap: 6px !important;
}

.chss-calendar-weekdays {
	row-gap: 0 !important;
	margin-bottom: 7px !important;
}

.chss-calendar-weekdays span {
	height: 25px !important;
	color: #6f7179 !important;
	font-size: 9px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: .01em !important;
}

.chss-calendar-days {
	row-gap: 8px !important;
}

/* Keep theme/WordPress button CSS from turning calendar dates into red squares. */
.chss-calendar-overlay .chss-calendar-day {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	min-width: 0 !important;
	min-height: 38px !important;
	max-height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #e7e8eb !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	color: #17191f !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
}

.chss-calendar-overlay .chss-calendar-day.is-outside:not(.is-selected) {
	border-color: transparent !important;
	background: transparent !important;
	color: #c8c9ce !important;
}

.chss-calendar-overlay .chss-calendar-day.is-today:not(.is-selected):not(:disabled) {
	border-color: #f1a9ad !important;
	background: #fff8f8 !important;
	color: #c81018 !important;
	font-weight: 850 !important;
}

.chss-calendar-overlay .chss-calendar-day.is-today:not(.is-selected)::after {
	bottom: 5px !important;
	width: 4px !important;
	height: 4px !important;
	background: #ed1c24 !important;
}

.chss-calendar-overlay .chss-calendar-day.is-selected,
.chss-calendar-overlay .chss-calendar-day.is-selected:hover,
.chss-calendar-overlay .chss-calendar-day.is-selected:focus {
	border-color: #ed1c24 !important;
	background: linear-gradient(180deg, #ff3037 0%, #ed1c24 100%) !important;
	color: #ffffff !important;
	font-weight: 900 !important;
	box-shadow: 0 7px 14px rgba(237, 28, 36, .23) !important;
}

.chss-calendar-overlay .chss-calendar-day:active:not(:disabled):not(.is-selected) {
	border-color: #f1b2b6 !important;
	background: #fff2f3 !important;
	color: #c81018 !important;
	transform: scale(.95);
}

.chss-calendar-overlay .chss-calendar-day:focus-visible {
	outline: 2px solid rgba(237, 28, 36, .28) !important;
	outline-offset: 2px !important;
}

.chss-calendar-overlay .chss-calendar-day.is-disabled,
.chss-calendar-overlay .chss-calendar-day:disabled {
	border-color: transparent !important;
	background: transparent !important;
	color: #d4d5d9 !important;
	box-shadow: none !important;
	opacity: .78 !important;
	cursor: not-allowed !important;
}

/* The approved compact mockup selects directly from the grid; no extra footer row. */
.chss-calendar-actions {
	display: none !important;
}

@media (max-width: 380px) {
	.chss-calendar-overlay {
		padding: 9px !important;
	}

	.chss-calendar-sheet {
		padding: 21px 16px 19px !important;
		border-radius: 30px !important;
	}

	.chss-calendar-sheet-head {
		margin-bottom: 16px !important;
	}

	.chss-calendar-sheet-head h2 {
		font-size: 20px !important;
	}

	.chss-calendar-overlay .chss-calendar-close,
	.chss-calendar-overlay .chss-calendar-nav-button {
		width: 43px !important;
		height: 43px !important;
		min-width: 43px !important;
		min-height: 43px !important;
		border-radius: 15px !important;
	}

	.chss-calendar-nav {
		grid-template-columns: 43px minmax(0, 1fr) 43px !important;
		gap: 9px !important;
		margin-bottom: 16px !important;
	}

	.chss-calendar-month-label {
		font-size: 17px !important;
	}

	.chss-calendar-weekdays,
	.chss-calendar-days {
		column-gap: 4px !important;
	}

	.chss-calendar-days {
		row-gap: 6px !important;
	}

	.chss-calendar-overlay .chss-calendar-day {
		min-height: 36px !important;
		font-size: 13px !important;
	}
}


/* v0.103 — calendar always above the mobile navigation. */
.chss-calendar-overlay {
	z-index: 2147483647 !important;
}

/* The body-level mobile footer has an intentionally very high z-index.
 * Hide it only while the calendar is open so it can never cover date rows. */
body.chss-calendar-open > .chss-mobile-nav-footer {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* v0.104 — CompuShift white/red custom time picker matching the calendar theme. */
.chss-app .chss-time-field {
	display: block;
	width: 100%;
	min-width: 0;
}

.chss-app .chss-time-trigger {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 38px;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 6px 7px 6px 13px;
	border: 1px solid #dedee2;
	border-radius: 13px;
	background: #ffffff;
	color: #111111;
	font: inherit;
	font-size: 14px;
	font-weight: 750;
	line-height: 1.25;
	text-align: left;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.chss-app .chss-time-trigger:focus-visible,
.chss-app .chss-time-trigger:active {
	outline: none;
	border-color: #ed1c24;
	background: #fffafa;
	box-shadow: 0 0 0 3px rgba(237, 28, 36, .10);
}

.chss-app .chss-time-trigger.is-empty .chss-time-trigger-value {
	color: #8a8a91;
	font-weight: 650;
}

.chss-app .chss-time-trigger-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chss-app .chss-time-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #fff0f1;
	color: #ed1c24;
}

.chss-app .chss-time-trigger-icon svg {
	width: 19px;
	height: 19px;
}

body.chss-time-open {
	overflow: hidden !important;
}

.chss-time-overlay[hidden] {
	display: none !important;
}

.chss-time-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483647 !important;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 12px;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}

.chss-time-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 23, 28, .56);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .16s ease;
}

.chss-time-sheet {
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	width: min(100%, 430px);
	max-height: calc(100% - 14px);
	padding: 24px 20px 20px;
	border: 1px solid #ececef;
	border-radius: 34px;
	background: #ffffff;
	box-shadow: 0 24px 64px rgba(17, 20, 25, .24);
	overflow: hidden;
	transform: translateY(18px);
	opacity: 0;
	transition: transform .18s ease, opacity .16s ease;
}

.chss-time-overlay.is-open .chss-time-backdrop {
	opacity: 1;
}

.chss-time-overlay.is-open .chss-time-sheet {
	transform: translateY(0);
	opacity: 1;
}

.chss-time-sheet-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.chss-time-eyebrow {
	display: block;
	margin: 1px 0 6px;
	color: #ed1c24;
	font-size: 10px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: .085em;
}

.chss-time-sheet-head h2 {
	margin: 0;
	color: #15171c;
	font-size: 22px;
	font-weight: 950;
	line-height: 1.12;
	letter-spacing: -.025em;
}

.chss-time-overlay .chss-time-close {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	min-width: 46px;
	min-height: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid #f1d3d5;
	border-radius: 16px;
	background: #fffdfd;
	color: #ed1c24;
	box-shadow: 0 3px 10px rgba(17, 20, 25, .035);
	font: inherit;
	line-height: 1;
}

.chss-time-overlay .chss-time-close svg {
	width: 21px;
	height: 21px;
}

.chss-time-overlay .chss-time-close:active {
	border-color: #efb1b5;
	background: #fff3f4;
	color: #c81018;
	box-shadow: none;
	transform: scale(.96);
}

.chss-time-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	margin: 0 0 13px;
	border: 1px solid #f3d8da;
	border-radius: 18px;
	background: linear-gradient(180deg, #fff9f9 0%, #fff4f5 100%);
	color: #d8141c;
	font-size: 28px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: -.025em;
}

.chss-time-column-labels {
	display: grid;
	grid-template-columns: 1fr 1fr .78fr;
	gap: 8px;
	padding: 0 3px 7px;
	color: #777982;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .035em;
}

.chss-time-columns {
	display: grid;
	grid-template-columns: 1fr 1fr .78fr;
	gap: 8px;
	height: 236px;
	padding: 8px;
	border: 1px solid #ececef;
	border-radius: 22px;
	background: #fafafb;
}

.chss-time-list {
	min-width: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 4px;
	border-radius: 16px;
	background: #ffffff;
	scrollbar-width: thin;
	scrollbar-color: #dedee2 transparent;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.chss-time-list::-webkit-scrollbar {
	width: 4px;
}

.chss-time-list::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: #dedee2;
}

.chss-time-overlay .chss-time-option {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin: 0 0 4px;
	padding: 7px 4px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: transparent;
	color: #17191f;
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	font-weight: 750;
	line-height: 1;
	text-align: center;
}

.chss-time-overlay .chss-time-option:last-child {
	margin-bottom: 0;
}

.chss-time-overlay .chss-time-option.is-selected,
.chss-time-overlay .chss-time-option.is-selected:hover,
.chss-time-overlay .chss-time-option.is-selected:focus {
	border-color: #ed1c24;
	background: linear-gradient(180deg, #ff3037 0%, #ed1c24 100%);
	color: #ffffff;
	font-weight: 900;
	box-shadow: 0 7px 14px rgba(237, 28, 36, .20);
}

.chss-time-overlay .chss-time-option:active:not(:disabled):not(.is-selected) {
	border-color: #f1b2b6;
	background: #fff2f3;
	color: #c81018;
	transform: scale(.97);
}

.chss-time-overlay .chss-time-option:focus-visible {
	outline: 2px solid rgba(237, 28, 36, .28);
	outline-offset: 1px;
}

.chss-time-overlay .chss-time-option:disabled {
	color: #d0d1d5;
	opacity: .65;
	cursor: not-allowed;
}

.chss-time-period-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
}

.chss-time-period-list .chss-time-option {
	margin: 0;
}

.chss-time-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
}

.chss-time-overlay .chss-time-cancel,
.chss-time-overlay .chss-time-done {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	min-height: 46px;
	margin: 0;
	padding: 9px 14px;
	border-radius: 15px;
	font: inherit;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}

.chss-time-overlay .chss-time-cancel {
	border: 1px solid #dedee2;
	background: #ffffff;
	color: #5e6068;
}

.chss-time-overlay .chss-time-done {
	border: 1px solid #ed1c24;
	background: linear-gradient(180deg, #f72d34 0%, #e7161e 100%);
	color: #ffffff;
	box-shadow: 0 7px 16px rgba(237, 28, 36, .18);
}

.chss-time-overlay .chss-time-done:disabled {
	border-color: #e3e3e6;
	background: #f3f3f5;
	color: #aaaab0;
	box-shadow: none;
}

/* The mobile navigation must never overlap an open time picker. */
body.chss-time-open > .chss-mobile-nav-footer {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

@media (max-width: 380px) {
	.chss-time-overlay {
		padding: 9px;
	}

	.chss-time-sheet {
		padding: 21px 16px 17px;
		border-radius: 30px;
	}

	.chss-time-sheet-head h2 {
		font-size: 20px;
	}

	.chss-time-overlay .chss-time-close {
		width: 43px;
		height: 43px;
		min-width: 43px;
		min-height: 43px;
		border-radius: 15px;
	}

	.chss-time-preview {
		min-height: 54px;
		font-size: 25px;
	}

	.chss-time-columns {
		gap: 6px;
		height: 224px;
		padding: 6px;
		border-radius: 20px;
	}

	.chss-time-list {
		padding: 3px;
		border-radius: 14px;
	}

	.chss-time-overlay .chss-time-option {
		min-height: 42px;
		border-radius: 12px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chss-time-backdrop,
	.chss-time-sheet,
	.chss-app .chss-time-trigger {
		transition: none !important;
	}
}

/* v0.105 — CompuShift custom white/red select picker. */
.chss-app select.chss-native-select-enhanced {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 1px !important;
	min-height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	pointer-events: none !important;
}

.chss-app .chss-select-field {
	display: block;
	width: 100%;
	min-width: 0;
}

.chss-app .chss-select-trigger {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #dfe1e6;
	border-radius: 13px;
	background: #fff;
	color: #15171c;
	box-shadow: none;
	font: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

.chss-app .chss-select-trigger:hover,
.chss-app .chss-select-trigger:focus {
	border-color: #dfe1e6;
	background: #fff;
	color: #15171c;
	box-shadow: none;
}

.chss-app .chss-select-trigger:focus-visible {
	outline: 2px solid rgba(237, 28, 36, .22);
	outline-offset: 2px;
	border-color: #ef9da1;
}

.chss-app .chss-select-trigger:active:not(:disabled) {
	border-color: #efb0b4;
	background: #fff8f8;
	transform: none;
}

.chss-app .chss-select-trigger:disabled {
	background: #f5f5f6;
	color: #a6a7ac;
	cursor: not-allowed;
}

.chss-app .chss-select-trigger-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chss-app .chss-select-trigger.is-placeholder .chss-select-trigger-value {
	color: #555861;
}

.chss-app .chss-select-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: #17191f;
}

.chss-app .chss-select-trigger-icon svg {
	width: 20px;
	height: 20px;
}

.chss-select-overlay[hidden] {
	display: none !important;
}

.chss-select-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483300;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	padding: 12px;
	font-family: inherit;
}

.chss-select-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 22, 31, .54);
	opacity: 0;
	transition: opacity .16s ease;
}

.chss-select-sheet {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(100%, 430px);
	max-height: min(78vh, 620px);
	padding: 23px 18px 18px;
	border: 1px solid rgba(223, 224, 228, .92);
	border-radius: 31px;
	background: #fff;
	box-shadow: 0 18px 46px rgba(17, 20, 25, .18);
	overflow: hidden;
	transform: translateY(18px) scale(.985);
	opacity: 0;
	transition: transform .16s ease, opacity .16s ease;
}

.chss-select-overlay.is-open .chss-select-backdrop {
	opacity: 1;
}

.chss-select-overlay.is-open .chss-select-sheet {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.chss-select-sheet-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 15px;
}

.chss-select-eyebrow {
	display: block;
	margin: 0 0 5px;
	color: #ed1c24;
	font-size: 10px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: .055em;
}

.chss-select-sheet-head h2 {
	margin: 0;
	color: #17191f;
	font-size: 21px;
	font-weight: 950;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.chss-select-overlay .chss-select-close {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 45px;
	height: 45px;
	min-width: 45px;
	min-height: 45px;
	margin: 0;
	padding: 0;
	border: 1px solid #f1d1d4;
	border-radius: 16px;
	background: #fffdfd;
	color: #ed1c24;
	box-shadow: none;
	font: inherit;
}

.chss-select-overlay .chss-select-close svg {
	width: 20px;
	height: 20px;
}

.chss-select-overlay .chss-select-close:active {
	border-color: #efafb3;
	background: #fff3f4;
	transform: scale(.96);
}

.chss-select-options {
	box-sizing: border-box;
	max-height: min(58vh, 470px);
	overflow-x: hidden;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid #ececef;
	border-radius: 22px;
	background: #fafafb;
	scrollbar-width: thin;
	scrollbar-color: #dedee2 transparent;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.chss-select-options::-webkit-scrollbar {
	width: 4px;
}

.chss-select-options::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: #dedee2;
}

.chss-select-overlay .chss-select-option {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	margin: 0 0 5px;
	padding: 10px 12px 10px 15px;
	border: 1px solid #ececef;
	border-radius: 16px;
	background: #fff;
	color: #17191f;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	font-weight: 760;
	line-height: 1.3;
	text-align: left;
}

.chss-select-overlay .chss-select-option:last-child {
	margin-bottom: 0;
}

.chss-select-overlay .chss-select-option:hover,
.chss-select-overlay .chss-select-option:focus {
	border-color: #ececef;
	background: #fff;
	color: #17191f;
	box-shadow: none;
}

.chss-select-overlay .chss-select-option:focus-visible {
	outline: 2px solid rgba(237, 28, 36, .22);
	outline-offset: 1px;
}

.chss-select-overlay .chss-select-option:active:not(:disabled):not(.is-selected) {
	border-color: #f0b1b5;
	background: #fff4f5;
	color: #c81018;
}

.chss-select-overlay .chss-select-option.is-selected,
.chss-select-overlay .chss-select-option.is-selected:hover,
.chss-select-overlay .chss-select-option.is-selected:focus {
	border-color: #ed1c24;
	background: linear-gradient(180deg, #f72d34 0%, #e7161e 100%);
	color: #fff;
	font-weight: 900;
	box-shadow: 0 7px 16px rgba(237, 28, 36, .16);
}

.chss-select-overlay .chss-select-option:disabled {
	background: #f6f6f7;
	color: #b7b8bd;
	border-color: #efeff1;
	box-shadow: none;
	cursor: not-allowed;
}

.chss-select-option-text {
	min-width: 0;
	word-break: break-word;
}

.chss-select-option-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 9px;
	background: #fff;
	color: #ed1c24;
	opacity: 0;
}

.chss-select-option-check svg {
	width: 17px;
	height: 17px;
}

.chss-select-option.is-selected .chss-select-option-check {
	opacity: 1;
}

.chss-select-group + .chss-select-group,
.chss-select-option + .chss-select-group,
.chss-select-group + .chss-select-option {
	margin-top: 8px;
}

.chss-select-group-label {
	padding: 7px 9px 6px;
	color: #7c7e85;
	font-size: 10px;
	font-weight: 950;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.chss-select-group .chss-select-option:last-child {
	margin-bottom: 0;
}

/* Never allow the mobile navigation to cover the selector sheet. */
body.chss-select-open > .chss-mobile-nav-footer {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

@media (max-width: 380px) {
	.chss-select-overlay {
		padding: 9px;
	}

	.chss-select-sheet {
		padding: 21px 15px 15px;
		border-radius: 29px;
	}

	.chss-select-sheet-head h2 {
		font-size: 20px;
	}

	.chss-select-overlay .chss-select-close {
		width: 43px;
		height: 43px;
		min-width: 43px;
		min-height: 43px;
		border-radius: 15px;
	}

	.chss-select-options {
		padding: 5px;
		border-radius: 20px;
	}

	.chss-select-overlay .chss-select-option {
		min-height: 48px;
		padding: 9px 11px 9px 13px;
		border-radius: 15px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chss-select-backdrop,
	.chss-select-sheet,
	.chss-app .chss-select-trigger {
		transition: none !important;
	}
}


/* v0.106 — form UI cleanup: cleaner rounded CompuShift fields, helpers and validation. */
:is(.chss-app, .chss-account-portal-root) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea
) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid #e1e2e6 !important;
	border-radius: 16px !important;
	background: #fff !important;
	color: #17191f !important;
	box-shadow: 0 1px 0 rgba(17, 20, 25, .02) !important;
	font: inherit;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.35;
	transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

:is(.chss-app, .chss-account-portal-root) textarea {
	min-height: 104px;
	padding-block: 13px;
	line-height: 1.5;
	resize: vertical;
}

:is(.chss-app, .chss-account-portal-root) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea
)::placeholder {
	color: #9a9da5 !important;
	font-weight: 550;
	opacity: 1;
}

:is(.chss-app, .chss-account-portal-root) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea
):focus {
	border-color: #ed1c24 !important;
	background: #fff !important;
	outline: 0 !important;
	box-shadow: 0 0 0 4px rgba(237, 28, 36, .10) !important;
}

:is(.chss-app, .chss-account-portal-root) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea
):disabled {
	border-color: #ececef !important;
	background: #f5f5f7 !important;
	color: #9a9da5 !important;
	box-shadow: none !important;
	cursor: not-allowed;
}

:is(.chss-app, .chss-account-portal-root) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea
)[readonly] {
	border-color: #e7e7ea !important;
	background: #f8f8f9 !important;
	color: #666b75 !important;
}

/* Show a restrained error state only after browser validation has been interacted with. */
:is(.chss-app, .chss-account-portal-root) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea
)[aria-invalid="true"],
:is(.chss-app, .chss-account-portal-root) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="url"],
	textarea
):user-invalid {
	border-color: #dc2626 !important;
	background: #fffafa !important;
	box-shadow: 0 0 0 4px rgba(220, 38, 38, .08) !important;
}

/* Small descriptions that belong to a field: quieter and more consistent. */
:is(.chss-app, .chss-account-portal-root) :where(
	.chss-form-grid,
	.chss-form,
	.chss-account-form,
	.chss-mobile-settings,
	.chss-mobile-timeoff,
	.chss-mobile-shifts,
	.chss-mobile-staff
) label > small {
	display: block;
	margin-top: 6px;
	color: #7c8089;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.45;
}

:is(.chss-app, .chss-account-portal-root) .chss-staff-password-hint,
:is(.chss-app, .chss-account-portal-root) .chss-employee-card-help {
	border: 1px solid #eeeef1 !important;
	border-radius: 15px !important;
	background: #fafafb !important;
	color: #666b75 !important;
	box-shadow: none !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-card-upload-hint {
	color: #7c8089 !important;
	font-size: 10px;
	line-height: 1.45;
}

/* Form feedback keeps semantic meaning but matches the rounded white/red visual language. */
:is(.chss-app, .chss-account-portal-root) .chss-shift-rule-feedback {
	border-radius: 16px;
	box-shadow: none;
}

:is(.chss-app, .chss-account-portal-root) .chss-shift-rule-feedback.is-error,
:is(.chss-app, .chss-account-portal-root) .chss-notice-error {
	border: 1px solid #f2b8bc !important;
	border-radius: 16px !important;
	background: #fff5f5 !important;
	color: #b80f16 !important;
	box-shadow: none !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-shift-rule-feedback.is-error > strong {
	color: #b80f16 !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-notice-success {
	border: 1px solid #cfe8db !important;
	border-radius: 16px !important;
	background: #f5fbf8 !important;
	color: #176b50 !important;
	box-shadow: none !important;
}

:is(.chss-app, .chss-account-portal-root) .chss-card-upload-feedback.is-error,
:is(.chss-app, .chss-account-portal-root) .chss-push-status.is-error {
	color: #b80f16 !important;
}

/* Keep mobile fields comfortably tappable and prevent iOS focus zoom. */
@media (max-width: 780px) {
	:is(.chss-app, .chss-account-portal-root) :where(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="password"],
		input[type="number"],
		input[type="url"],
		textarea
	) {
		min-height: 50px;
		padding-inline: 15px;
		border-radius: 17px !important;
		font-size: 16px;
	}

	:is(.chss-app, .chss-account-portal-root) textarea {
		min-height: 108px;
		padding-block: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.chss-app, .chss-account-portal-root) :where(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="password"],
		input[type="number"],
		input[type="url"],
		textarea
	) {
		transition: none !important;
	}
}

/* v0.107 — mobile compatibility and UI consistency pass for Android + iOS. */
html:not([data-chss-high-contrast="true"]) .chss-app {
	--chss-bg: #f7f7f8;
	--chss-surface: #ffffff;
	--chss-text: #17191f;
	--chss-muted: #6f727a;
	--chss-border: #e2e3e7;
	--chss-line: #e7e7ea;
	--chss-primary: #ed1c24;
	--chss-primary-2: #b80f16;
	--chss-accent: #ed1c24;
	--chss-mobile-gutter: 12px;
	--chss-mobile-radius: 20px;
	--chss-mobile-shadow: 0 6px 18px rgba(17, 17, 17, .055);
}

.chss-app,
.chss-account-portal-root,
.chss-calendar-overlay,
.chss-time-overlay,
.chss-select-overlay {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (max-width: 480px) {
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	html,
	body {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow-x: hidden !important;
	}

	body.chss-has-mobile-footer-nav {
		padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
		background: #f7f7f8;
	}

	.chss-app {
		box-sizing: border-box !important;
		position: relative !important;
		left: 50% !important;
		right: auto !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding-top: 8px !important;
		padding-right: max(var(--chss-mobile-gutter), env(safe-area-inset-right)) !important;
		padding-bottom: 18px !important;
		padding-left: max(var(--chss-mobile-gutter), env(safe-area-inset-left)) !important;
		transform: translateX(-50%) !important;
		background: #f7f7f8 !important;
		color: #17191f;
		font-size: 14px;
		line-height: 1.45;
		overflow-x: hidden !important;
	}

	@supports (width: 100dvw) {
		.chss-app {
			width: 100dvw !important;
			max-width: 100dvw !important;
		}
	}

	.chss-app *,
	.chss-account-portal-root * {
		box-sizing: border-box;
	}

	.chss-app :where(img, svg, video, canvas) {
		max-width: 100%;
	}

	/* One centered mobile content rail across manager and employee screens. */
	.chss-app :where(.chss-dashboard, .chss-dashboard-modern) {
		width: 100% !important;
		max-width: 456px !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 12px !important;
		overflow-x: hidden !important;
	}

	.chss-app .chss-dashboard-modern > :where(
		.chss-mobile-primary-page,
		.chss-mobile-daily-schedule,
		.chss-mobile-shifts,
		.chss-mobile-staff,
		.chss-mobile-timeoff,
		.chss-mobile-settings,
		.chss-mobile-history,
		.chss-mobile-reports,
		.chss-attendance-screen,
		.chss-panel,
		.chss-employee-shifts-home
	) {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0;
		padding-right: 0;
		overflow-x: hidden !important;
	}

	.chss-app :where(
		.chss-mobile-primary-page,
		.chss-mobile-daily-schedule,
		.chss-mobile-shifts,
		.chss-mobile-staff,
		.chss-mobile-timeoff,
		.chss-mobile-settings,
		.chss-mobile-history,
		.chss-mobile-reports,
		.chss-attendance-screen,
		.chss-employee-shifts-home
	) {
		gap: 12px;
	}

	/* Header stays compact and centered instead of inheriting theme spacing. */
	.chss-app .chss-app-header {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 456px !important;
		min-height: 72px !important;
		margin: 0 auto !important;
		padding: 8px 2px 10px !important;
		border: 0 !important;
		border-bottom: 1px solid #e7e7ea !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
	}

	.chss-brand-logo-app {
		width: 132px !important;
		max-width: calc(100vw - 94px) !important;
	}

	.chss-app .chss-profile-button {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		border-color: #efc2c5 !important;
		background: #fff4f5 !important;
		color: #c81018 !important;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	/* Consistent white cards with a restrained red/black palette. */
	.chss-app :where(
		.chss-panel,
		.chss-subpanel,
		.chss-summary-card,
		.chss-day-card,
		.chss-mobile-schedule-date-card,
		.chss-mobile-week-header-card,
		.chss-mobile-week-day-card,
		.chss-mobile-employee-card,
		.chss-mobile-shift-card,
		.chss-mobile-staff-card,
		.chss-mobile-timeoff-card,
		.chss-mobile-history-card,
		.chss-mobile-report-card,
		.chss-mobile-settings-card,
		.chss-attendance-card,
		.chss-attendance-empty-card,
		.chss-employee-next-shift-card,
		.chss-employee-week-card,
		.chss-employee-summary-strip,
		.chss-employee-shift-card
	) {
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		border-color: #e2e3e7 !important;
		border-radius: var(--chss-mobile-radius) !important;
		background-color: #ffffff;
		box-shadow: var(--chss-mobile-shadow) !important;
	}

	.chss-app :where(.chss-panel, .chss-subpanel) {
		padding: 14px !important;
	}

	.chss-app :where(.chss-panel-header, .chss-day-overview-header) {
		gap: 10px !important;
		margin-bottom: 14px !important;
		padding-bottom: 12px !important;
	}

	/* Compact, predictable typography on both rendering engines. */
	.chss-app :where(p, li, label, summary, button, a, input, textarea) {
		letter-spacing: 0;
	}

	.chss-app :where(h1, h2, h3, h4) {
		font-family: inherit !important;
		text-wrap: balance;
	}

	.chss-app :where(h2, .chss-mobile-primary-header h1, .chss-mobile-primary-header h2) {
		line-height: 1.18;
		letter-spacing: -.025em;
	}

	.chss-app :where(.chss-muted, small, .chss-mobile-shift-position, .chss-mobile-staff-role) {
		line-height: 1.4;
	}

	/* All editable controls stay at 16px on mobile so iOS never focus-zooms. */
	:is(.chss-app, .chss-account-portal-root) :where(
		input[type="text"],
		input[type="search"],
		input[type="email"],
		input[type="tel"],
		input[type="password"],
		input[type="number"],
		input[type="url"],
		textarea
	) {
		font-family: inherit !important;
		font-size: 16px !important;
		line-height: 1.35 !important;
	}

	.chss-app :where(.chss-date-trigger, .chss-time-trigger, .chss-select-trigger) {
		min-height: 48px !important;
		border-color: #e1e2e6 !important;
		border-radius: 16px !important;
		background: #ffffff !important;
		color: #17191f !important;
		font-family: inherit !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	.chss-app :where(button, .chss-button, .chss-small-button, a.chss-tab, summary) {
		font-family: inherit !important;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	.chss-app :where(.chss-button, button[type="submit"], .chss-small-button) {
		min-height: 44px;
		border-radius: 15px;
	}

	/* Navigation remains readable on narrow iPhones and Android devices. */
	body > .chss-mobile-nav-footer {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
		padding-right: max(3px, env(safe-area-inset-right)) !important;
		padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
		padding-left: max(3px, env(safe-area-inset-left)) !important;
		border-top-color: #e4e4e8 !important;
		background: rgba(255, 255, 255, .985) !important;
		box-shadow: 0 -6px 20px rgba(17, 17, 17, .10) !important;
	}

	body > .chss-mobile-nav-footer .chss-tab {
		min-width: 0 !important;
		min-height: 76px !important;
		padding-top: 8px !important;
		padding-bottom: 4px !important;
		color: #666971 !important;
	}

	body > .chss-mobile-nav-footer .chss-tab-mobile-icon {
		width: 23px !important;
		height: 23px !important;
		flex-basis: 23px !important;
	}

	body > .chss-mobile-nav-footer .chss-tab-mobile-label {
		font-family: inherit !important;
		font-size: clamp(8px, 2.35vw, 9.5px) !important;
		font-weight: 750 !important;
		line-height: 1.08 !important;
		letter-spacing: -.01em !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active,
	body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-label {
		color: #b80f16 !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active::before {
		background: #ed1c24 !important;
	}

	body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-icon {
		background-color: #ed1c24 !important;
		color: #ffffff !important;
	}

	/* Bottom sheets use the same width, radius and safe-area treatment. */
	.chss-calendar-overlay,
	.chss-time-overlay,
	.chss-select-overlay {
		box-sizing: border-box;
		padding-top: 12px !important;
		padding-right: max(12px, env(safe-area-inset-right)) !important;
		padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
		padding-left: max(12px, env(safe-area-inset-left)) !important;
	}

	.chss-calendar-sheet,
	.chss-time-sheet,
	.chss-select-sheet {
		box-sizing: border-box;
		width: min(100%, 430px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		border-color: #e2e3e7 !important;
		border-radius: 28px !important;
		box-shadow: 0 20px 52px rgba(17, 17, 17, .22) !important;
	}

	@supports (height: 100dvh) {
		.chss-calendar-sheet,
		.chss-time-sheet,
		.chss-select-sheet {
			max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
		}
	}

	/* Profile/account sheets also respect notches and stay centered. */
	body > .chss-account-portal-root .chss-account-dialog {
		box-sizing: border-box !important;
		align-items: flex-end !important;
		padding: 0 max(0px, env(safe-area-inset-right)) 0 max(0px, env(safe-area-inset-left)) !important;
	}

	body > .chss-account-portal-root .chss-account-sheet {
		box-sizing: border-box !important;
		width: min(100%, 456px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-right: max(18px, env(safe-area-inset-right)) !important;
		padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
		padding-left: max(18px, env(safe-area-inset-left)) !important;
		border-radius: 26px 26px 0 0 !important;
		font-family: inherit !important;
	}

	body > .chss-account-portal-root > .chss-profile-menu[data-chss-profile-menu-portal] {
		box-sizing: border-box !important;
		left: max(12px, env(safe-area-inset-left)) !important;
		right: max(12px, env(safe-area-inset-right)) !important;
		width: auto !important;
		max-width: 432px !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		font-family: inherit !important;
	}

	/* Avoid sticky hover effects on touch-only devices. */
	@media (hover: none) and (pointer: coarse) {
		.chss-app :where(.chss-summary-card, .chss-button, .chss-small-button, button, a):hover {
			transform: none !important;
		}
	}
}

@media (max-width: 360px) {
	html:not([data-chss-high-contrast="true"]) .chss-app {
		--chss-mobile-gutter: 10px;
		--chss-mobile-radius: 18px;
	}

	.chss-app :where(.chss-panel, .chss-subpanel) {
		padding: 12px !important;
	}

	.chss-brand-logo-app {
		width: 122px !important;
	}

	.chss-app .chss-profile-button {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
	}

	body > .chss-mobile-nav-footer .chss-tab-mobile-icon {
		width: 21px !important;
		height: 21px !important;
		flex-basis: 21px !important;
	}
}

/* v0.107 — preserve accessibility overrides above the mobile compatibility layer. */
@media (max-width: 480px) {
	html[data-chss-font-size="xlarge"] :is(.chss-app, .chss-account-portal-root) :where(
		input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
		input[type="password"], input[type="number"], input[type="url"], textarea,
		.chss-date-trigger, .chss-time-trigger, .chss-select-trigger
	) {
		font-size: 18px !important;
	}

	html[data-chss-font-size="large"] :is(.chss-app, .chss-account-portal-root) :where(
		input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
		input[type="password"], input[type="number"], input[type="url"], textarea,
		.chss-date-trigger, .chss-time-trigger, .chss-select-trigger
	) {
		font-size: 16px !important;
	}

	html[data-chss-high-contrast="true"] body.chss-has-mobile-footer-nav,
	html[data-chss-high-contrast="true"] .chss-app {
		background: #000000 !important;
		color: #ffffff !important;
	}

	html[data-chss-high-contrast="true"] .chss-app .chss-app-header,
	html[data-chss-high-contrast="true"] .chss-app :where(
		.chss-panel, .chss-subpanel, .chss-summary-card, .chss-day-card,
		.chss-mobile-schedule-date-card, .chss-mobile-week-header-card, .chss-mobile-week-day-card,
		.chss-mobile-employee-card, .chss-mobile-shift-card, .chss-mobile-staff-card,
		.chss-mobile-timeoff-card, .chss-mobile-history-card, .chss-mobile-report-card,
		.chss-mobile-settings-card, .chss-attendance-card, .chss-attendance-empty-card,
		.chss-employee-next-shift-card, .chss-employee-week-card, .chss-employee-summary-strip,
		.chss-employee-shift-card
	),
	html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer,
	html[data-chss-high-contrast="true"] .chss-calendar-sheet,
	html[data-chss-high-contrast="true"] .chss-time-sheet,
	html[data-chss-high-contrast="true"] .chss-select-sheet,
	html[data-chss-high-contrast="true"] body > .chss-account-portal-root .chss-account-sheet {
		border-color: #ffffff !important;
		background: #000000 !important;
		color: #ffffff !important;
		box-shadow: none !important;
	}

	html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab {
		color: #ffffff !important;
	}

	html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active,
	html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-label {
		background: #ffff00 !important;
		color: #000000 !important;
	}
}

/* v0.108 — centered and simplified mobile UI pass. */
@media (max-width: 480px) {
  /* Keep one predictable centered content rail everywhere. */
  .chss-app :where(
    .chss-mobile-primary-page,
    .chss-mobile-daily-schedule,
    .chss-mobile-shifts,
    .chss-mobile-staff,
    .chss-mobile-timeoff,
    .chss-mobile-settings,
    .chss-mobile-history,
    .chss-mobile-reports,
    .chss-attendance-screen,
    .chss-employee-shifts-home
  ) {
    width: 100% !important;
    max-width: 456px !important;
    margin-inline: auto !important;
    justify-items: stretch;
  }

  /* Page titles and section headings always sit on the visual center line. */
  .chss-app :where(
    .chss-mobile-primary-header,
    .chss-mobile-settings-header,
    .chss-mobile-history-header,
    .chss-mobile-reports-header,
    .chss-employee-welcome,
    .chss-employee-upcoming-section > header
  ) {
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
  }

  .chss-app .chss-mobile-primary-header > h1,
  .chss-app :where(.chss-mobile-settings-header, .chss-mobile-history-header, .chss-mobile-reports-header) :where(h1, h2, h3, p),
  .chss-app .chss-employee-welcome :where(h2, p),
  .chss-app .chss-employee-upcoming-section > header > div {
    width: 100%;
    max-width: 100%;
    margin-inline: auto !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  /* Stack generic panel headers so variable title lengths never push badges off-center. */
  .chss-app .chss-panel-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .chss-app .chss-panel-header > * {
    max-width: 100%;
    margin-inline: auto !important;
  }

  .chss-app .chss-panel-header > div,
  .chss-app .chss-panel-header :where(h1, h2, h3, p, .chss-eyebrow, .chss-muted) {
    text-align: center !important;
  }

  /* Simple, even cards: same width, same center line, long text wraps instead of shifting layout. */
  .chss-app :where(
    .chss-panel,
    .chss-subpanel,
    .chss-summary-card,
    .chss-day-card,
    .chss-mobile-schedule-date-card,
    .chss-mobile-week-header-card,
    .chss-mobile-week-day-card,
    .chss-mobile-employee-card,
    .chss-mobile-shift-card,
    .chss-mobile-staff-card,
    .chss-mobile-timeoff-card,
    .chss-mobile-history-card,
    .chss-mobile-report-card,
    .chss-mobile-settings-card,
    .chss-attendance-card,
    .chss-attendance-empty-card,
    .chss-employee-next-shift-card,
    .chss-employee-week-card,
    .chss-employee-summary-strip,
    .chss-employee-shift-card
  ) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .chss-app :where(
    .chss-summary-card,
    .chss-mobile-schedule-date-card,
    .chss-mobile-week-header-card,
    .chss-mobile-week-day-card,
    .chss-mobile-employee-card,
    .chss-mobile-shift-card,
    .chss-mobile-staff-card,
    .chss-mobile-timeoff-card,
    .chss-mobile-history-card,
    .chss-mobile-report-card,
    .chss-mobile-settings-card,
    .chss-attendance-card,
    .chss-attendance-empty-card
  ) :where(h1, h2, h3, h4, p, small, strong, time, .chss-muted) {
    overflow-wrap: anywhere;
  }

  /* Manager week/date controls remain symmetrical regardless of label length. */
  .chss-app :where(.chss-mobile-shifts-week, .chss-mobile-day-switcher, .chss-mobile-week-switcher) {
    width: 100% !important;
    margin-inline: auto !important;
  }

  .chss-app :where(.chss-mobile-shifts-week strong, .chss-mobile-day-switcher strong, .chss-mobile-week-switcher strong) {
    min-width: 0;
    text-align: center !important;
  }

  /* Search bars keep the icon balanced by equal left/right padding. */
  .chss-app :where(.chss-mobile-shifts-search input, .chss-mobile-staff-search input) {
    padding-left: 50px !important;
    padding-right: 50px !important;
    text-align: center !important;
  }

  .chss-app :where(.chss-mobile-shifts-search input, .chss-mobile-staff-search input)::placeholder {
    text-align: center;
  }

  /* Equal filter columns make every option feel equally important and easier for casual users. */
  .chss-app :where(.chss-mobile-shifts-filters, .chss-mobile-staff-filters, .chss-mobile-timeoff-filters) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  .chss-app :where(
    .chss-mobile-shifts-filters button,
    .chss-mobile-staff-filters button,
    .chss-mobile-timeoff-filters button,
    .chss-mobile-timeoff-views button
  ) {
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* Center the useful content inside manager cards without changing their open/edit behavior. */
  .chss-app :where(.chss-mobile-shift-copy, .chss-mobile-staff-copy, .chss-mobile-timeoff-copy) {
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .chss-app :where(.chss-mobile-shift-copy > strong, .chss-mobile-staff-copy > strong, .chss-mobile-timeoff-copy > strong) {
    text-align: center !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .chss-app :where(.chss-mobile-shift-position, .chss-mobile-staff-role, .chss-mobile-timeoff-copy p) {
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .chss-app :where(.chss-mobile-shift-copy time, .chss-mobile-timeoff-copy time) {
    justify-content: center !important;
    text-align: center !important;
  }

  .chss-app .chss-mobile-shift-time {
    align-self: center;
    text-align: center;
  }

  .chss-app :where(.chss-mobile-shift-state, .chss-mobile-staff-state, .chss-mobile-timeoff-state) {
    justify-self: center !important;
    text-align: center !important;
  }

  .chss-app .chss-mobile-timeoff-card-main {
    align-items: center !important;
  }

  .chss-app :where(.chss-mobile-timeoff-actions, .chss-row-actions, .chss-edit-actions, .chss-form-actions) {
    justify-content: center !important;
    justify-items: center !important;
    text-align: center !important;
  }

  /* Forms: labels, values and actions share one visual center line. */
  .chss-app .chss-form-grid {
    width: 100%;
    justify-items: stretch;
  }

  .chss-app .chss-form-grid > label,
  .chss-app form > label {
    min-width: 0;
    text-align: center !important;
  }

  .chss-app :where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    textarea,
    .chss-date-trigger,
    .chss-time-trigger,
    .chss-select-trigger
  ) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .chss-app :where(input, textarea)::placeholder {
    text-align: center;
  }

  .chss-app .chss-form-actions :where(button, .chss-button),
  .chss-app :where(.chss-button, .chss-small-button) {
    justify-content: center !important;
    text-align: center !important;
  }

  .chss-app .chss-form-actions :where(button, .chss-button) {
    width: min(100%, 320px) !important;
    margin-inline: auto !important;
  }

  /* Employee home: simplify the hero card into a single centered reading path. */
  .chss-app .chss-employee-next-shift-card {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    text-align: center !important;
  }

  .chss-app .chss-employee-next-icon {
    grid-row: 1;
    justify-self: center !important;
  }

  .chss-app .chss-employee-next-shift-copy {
    grid-row: 2;
    width: 100%;
    text-align: center !important;
  }

  .chss-app .chss-employee-next-meta span {
    justify-content: center !important;
    text-align: center !important;
  }

  .chss-app .chss-employee-week-card-title,
  .chss-app .chss-employee-week-range,
  .chss-app .chss-employee-section-label {
    text-align: center !important;
  }

  .chss-app .chss-employee-summary-strip article,
  .chss-app .chss-employee-summary-strip article > div {
    justify-items: center !important;
    text-align: center !important;
  }

  .chss-app .chss-employee-summary-strip article {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .chss-app .chss-employee-upcoming-section > header {
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
  }

  .chss-app .chss-employee-upcoming-section > header > span {
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .chss-app .chss-employee-shift-main {
    text-align: center !important;
  }

  .chss-app .chss-employee-shift-main p {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Custom pickers/selectors keep the same centered, low-effort interaction pattern. */
  .chss-calendar-sheet-head,
  .chss-time-sheet-head,
  .chss-select-sheet-head,
  .chss-time-column-labels {
    text-align: center !important;
  }

  .chss-calendar-sheet-head h2,
  .chss-time-sheet-head h2,
  .chss-select-sheet-head h2 {
    width: 100%;
    text-align: center !important;
  }

  .chss-select-overlay .chss-select-option,
  .chss-time-overlay .chss-time-option {
    justify-content: center !important;
    text-align: center !important;
  }

  .chss-select-option-text {
    min-width: 0;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  /* Keep supporting copy calm and readable. */
  .chss-app :where(.chss-muted, .chss-help, .chss-helper, .chss-staff-password-hint, .chss-employee-card-help) {
    text-align: center !important;
    overflow-wrap: anywhere;
  }
}

/* Preserve high-contrast colors; alignment improvements still apply naturally. */
@media (max-width: 360px) {
  .chss-app .chss-employee-summary-strip article {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v0.109 — buttons, feedback and simple user flow. */
:is(.chss-app, .chss-account-portal-root) {
	--chss-action-red: #ed1c24;
	--chss-action-red-dark: #bd1017;
	--chss-action-red-text: #b80f16;
	--chss-action-border: #e7aeb1;
}

/* One obvious primary action language. */
:is(.chss-app, .chss-account-portal-root) :where(
	.chss-button:not(.chss-button-secondary):not(.chss-button-light),
	.chss-small-button:not(.chss-small-button-danger):not(.chss-staff-session-revoke),
	.chss-mobile-settings-save,
	.chss-attendance-primary,
	.chss-attendance-punch-button,
	.chss-employee-card-reveal-button,
	.chss-account-primary,
	.chss-mobile-timeoff-approve
),
.chss-app form button[type="submit"]:not(.chss-button-secondary):not(.chss-small-button-danger):not(.is-danger):not(.chss-staff-session-revoke):not(.chss-account-avatar-remove):not(.chss-employee-card-delete):not(.chss-mobile-timeoff-reject) {
	min-height: 48px;
	border: 1px solid #c81018 !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, var(--chss-action-red), var(--chss-action-red-dark)) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(200, 16, 24, .17) !important;
	font-weight: 850 !important;
	line-height: 1.2;
}

/* Secondary and potentially destructive actions stay quieter than Save/Continue. */
:is(.chss-app, .chss-account-portal-root) :where(
	.chss-button-secondary,
	.chss-small-link,
	.chss-mobile-settings-secondary,
	.chss-staff-session-revoke,
	.chss-account-avatar-remove button,
	.chss-employee-card-delete button,
	.chss-small-button-danger,
	button.is-danger,
	.chss-mobile-timeoff-reject
) {
	border: 1px solid var(--chss-action-border) !important;
	border-radius: 16px !important;
	background: #ffffff !important;
	color: var(--chss-action-red-text) !important;
	box-shadow: none !important;
}

/* Predictable button feedback without layout jumps. */
:is(.chss-app, .chss-account-portal-root) :where(button, .chss-button, .chss-small-button, input[type="submit"]) {
	position: relative;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

:is(.chss-app, .chss-account-portal-root) :where(button, .chss-button, .chss-small-button, input[type="submit"]):disabled,
:is(.chss-app, .chss-account-portal-root) form[aria-busy="true"] :where(button, input[type="submit"]) {
	cursor: wait !important;
	box-shadow: none !important;
	transform: none !important;
}

:is(.chss-app, .chss-account-portal-root) :where(button, .chss-button, .chss-small-button, input[type="submit"]).is-chss-loading {
	padding-left: 42px !important;
	padding-right: 22px !important;
	opacity: .9 !important;
}

:is(.chss-app, .chss-account-portal-root) :where(button, .chss-button, .chss-small-button).is-chss-loading::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: chss-action-spin .7s linear infinite;
}

@keyframes chss-action-spin {
	to { transform: rotate(360deg); }
}

.chss-app form.is-ajax-loading,
:is(.chss-app, .chss-account-portal-root) form.is-chss-submitting {
	opacity: 1 !important;
}

/* Clear, centered feedback using the same rounded visual language as the app. */
.chss-app .chss-notice,
body > .chss-ajax-toast {
	box-sizing: border-box;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.45;
	text-align: center;
}

.chss-app .chss-notice {
	width: min(calc(100% - 28px), 620px) !important;
	margin: 0 auto 16px !important;
	padding: 13px 16px !important;
	border-radius: 17px !important;
	box-shadow: none !important;
}

.chss-app .chss-notice-success {
	border: 1px solid #cfe8db !important;
	background: #f5fbf8 !important;
	color: #176b50 !important;
}

.chss-app .chss-notice-error {
	border: 1px solid #f2b8bc !important;
	background: #fff5f5 !important;
	color: #b80f16 !important;
}

body > .chss-ajax-toast {
	left: 50% !important;
	right: auto !important;
	bottom: calc(var(--chss-mobile-footer-height, 0px) + 18px) !important;
	width: min(calc(100% - 28px), 430px) !important;
	max-width: 430px !important;
	padding: 13px 16px !important;
	border-radius: 17px !important;
	transform: translate(-50%, 12px) !important;
	box-shadow: 0 12px 28px rgba(17, 17, 17, .14) !important;
}

body > .chss-ajax-toast.is-visible {
	transform: translate(-50%, 0) !important;
}

body > .chss-ajax-toast-success {
	border: 1px solid #cfe8db !important;
	background: #f5fbf8 !important;
	color: #176b50 !important;
}

body > .chss-ajax-toast-error {
	border: 1px solid #f2b8bc !important;
	background: #fff5f5 !important;
	color: #b80f16 !important;
}

/* Casual-user mobile flow: one centered action rail with comfortable tap targets. */
@media (max-width: 480px) {
	:is(.chss-app, .chss-account-portal-root) :where(.chss-form-actions, .chss-edit-actions, .chss-row-actions) {
		width: 100%;
		align-items: center !important;
		justify-content: center !important;
		justify-items: center !important;
		gap: 10px !important;
	}

	:is(.chss-app, .chss-account-portal-root) .chss-form-actions :where(button, .chss-button, input[type="submit"]) {
		width: min(100%, 320px) !important;
		min-height: 50px !important;
		margin-inline: auto !important;
		white-space: normal !important;
		text-align: center !important;
	}

	body > .chss-ajax-toast {
		bottom: calc(var(--chss-mobile-footer-height, 92px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.chss-app, .chss-account-portal-root) :where(button, .chss-button, .chss-small-button).is-chss-loading::before {
		animation-duration: 1.6s;
	}
}

html[data-chss-high-contrast="true"] :is(.chss-app, .chss-account-portal-root) :where(button, .chss-button, .chss-small-button, input[type="submit"]).is-chss-loading::before {
	border-color: currentColor !important;
	border-right-color: transparent !important;
}


/* v0.110 — navigation and screen consistency pass. UI-only. */
@media (max-width: 480px) {
  /* Keep the app bar visually centered even though the profile action sits on the right. */
  .chss-app .chss-app-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-height: 70px !important;
    padding: 8px 0 10px !important;
  }

  .chss-app .chss-app-header-copy {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .chss-app .chss-profile {
    grid-column: 3 !important;
    justify-self: center !important;
  }

  .chss-brand-logo-app {
    display: flex !important;
    width: min(132px, 100%) !important;
    max-width: 132px !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }

  .chss-brand-logo-app img {
    margin-inline: auto !important;
  }

  /* One title scale and one subtitle rhythm on every mobile screen. */
  .chss-app :where(
    .chss-mobile-primary-header,
    .chss-mobile-settings-header,
    .chss-mobile-history-header,
    .chss-mobile-reports-header,
    .chss-employee-welcome
  ) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 2px !important;
    padding: 2px 8px 4px !important;
    text-align: center !important;
  }

  .chss-app :where(
    .chss-mobile-primary-header,
    .chss-mobile-settings-header,
    .chss-mobile-history-header,
    .chss-mobile-reports-header,
    .chss-employee-welcome
  ) :where(h1, h2) {
    max-width: 24ch !important;
    margin: 0 auto !important;
    font-size: clamp(20px, 5.8vw, 24px) !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  .chss-app :where(
    .chss-mobile-primary-header,
    .chss-mobile-settings-header,
    .chss-mobile-history-header,
    .chss-mobile-reports-header,
    .chss-employee-welcome
  ) :where(p, .chss-muted) {
    max-width: 36ch !important;
    margin: 6px auto 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  /* Section headings use a smaller, consistent level so the page title stays obvious. */
  .chss-app .chss-panel-header :where(h2, h3),
  .chss-app .chss-employee-upcoming-section > header :where(h2, h3) {
    max-width: 28ch !important;
    margin-inline: auto !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  /* Consistent vertical rhythm from header to content to footer. */
  .chss-app :where(.chss-dashboard, .chss-dashboard-modern) {
    gap: 14px !important;
  }

  .chss-app :where(
    .chss-mobile-primary-page,
    .chss-mobile-daily-schedule,
    .chss-mobile-shifts,
    .chss-mobile-staff,
    .chss-mobile-timeoff,
    .chss-mobile-settings,
    .chss-mobile-history,
    .chss-mobile-reports,
    .chss-attendance-screen,
    .chss-employee-shifts-home
  ) {
    row-gap: 14px !important;
  }

  /* Close controls look and behave identically in every sheet/dialog. */
  :is(.chss-app, .chss-account-portal-root) .chss-close-button,
  .chss-calendar-close,
  .chss-time-close,
  .chss-select-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 23px !important;
    line-height: 1 !important;
    text-align: center !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html:not([data-chss-high-contrast="true"]) :is(.chss-app, .chss-account-portal-root) .chss-close-button,
  html:not([data-chss-high-contrast="true"]) .chss-calendar-close,
  html:not([data-chss-high-contrast="true"]) .chss-time-close,
  html:not([data-chss-high-contrast="true"]) .chss-select-close {
    border: 1px solid #efc2c5 !important;
    background: #ffffff !important;
    color: #b80f16 !important;
  }

  /* Bottom navigation: every destination gets equal space and a very clear active state. */
  body > .chss-mobile-nav-footer {
    min-height: 84px !important;
    padding-top: 4px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
  }

  body > .chss-mobile-nav-footer .chss-tab {
    min-width: 0 !important;
    min-height: 74px !important;
    gap: 4px !important;
    padding: 7px 2px 5px !important;
    border-radius: 14px !important;
  }

  body > .chss-mobile-nav-footer .chss-tab::before {
    display: none !important;
  }

  body > .chss-mobile-nav-footer .chss-tab-mobile-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    max-width: 100% !important;
    padding-inline: 1px !important;
    font-size: clamp(8.5px, 2.45vw, 10px) !important;
    font-weight: 780 !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center !important;
  }

  html:not([data-chss-high-contrast="true"]) body > .chss-mobile-nav-footer .chss-tab.is-active {
    background: #fff1f2 !important;
    color: #b80f16 !important;
  }

  html:not([data-chss-high-contrast="true"]) body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-icon {
    background-color: #ed1c24 !important;
  }

  html:not([data-chss-high-contrast="true"]) body > .chss-mobile-nav-footer .chss-tab:active {
    background: #f8f8f9 !important;
  }

  body > .chss-mobile-nav-footer .chss-tab:focus-visible,
  :is(.chss-app, .chss-account-portal-root) .chss-close-button:focus-visible,
  .chss-calendar-close:focus-visible,
  .chss-time-close:focus-visible,
  .chss-select-close:focus-visible {
    outline: 3px solid rgba(237, 28, 36, .24) !important;
    outline-offset: -3px !important;
  }

  /* Keep dialog/sheet headings centered even when the title wraps to two lines. */
  :is(.chss-app, .chss-account-portal-root) :where(
    .chss-account-sheet,
    .chss-attendance-dialog,
    .chss-employee-card-pin-sheet,
    .chss-employee-card-viewer
  ) > header,
  .chss-calendar-sheet-head,
  .chss-time-sheet-head,
  .chss-select-sheet-head {
    position: relative !important;
    min-height: 52px !important;
    align-items: center !important;
  }

  :is(.chss-app, .chss-account-portal-root) :where(
    .chss-account-sheet,
    .chss-attendance-dialog,
    .chss-employee-card-pin-sheet,
    .chss-employee-card-viewer
  ) > header > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-left: 44px !important;
    text-align: center !important;
  }

  :is(.chss-app, .chss-account-portal-root) :where(
    .chss-account-sheet,
    .chss-attendance-dialog,
    .chss-employee-card-pin-sheet,
    .chss-employee-card-viewer
  ) > header :where(p, h2) {
    text-align: center !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .chss-app .chss-app-header {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  }

  .chss-brand-logo-app {
    width: min(122px, 100%) !important;
  }

  body > .chss-mobile-nav-footer .chss-tab-mobile-label {
    font-size: 8.5px !important;
  }
}


/* v0.111 — cards, lists and empty-state consistency. UI-only. */
@media (max-width: 480px) {
  /* One quiet rhythm for every list so cards never feel crowded or randomly spaced. */
  .chss-app :where(
    .chss-mobile-shifts-list,
    .chss-mobile-staff-list,
    .chss-mobile-timeoff-list,
    .chss-mobile-history-list,
    .chss-mobile-report-list,
    .chss-mobile-template-list,
    .chss-shift-cards,
    .chss-user-card-list,
    .chss-request-list,
    .chss-employee-shift-list
  ) {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin-inline: auto !important;
  }

  /* The same physical card language is used across manager and employee lists. */
  .chss-app :where(
    .chss-mobile-shift-card,
    .chss-mobile-staff-card,
    .chss-mobile-timeoff-card,
    .chss-mobile-history-card,
    .chss-mobile-report-card,
    .chss-mobile-template-card,
    .chss-request-card,
    .chss-user-card,
    .chss-shift-card
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    overflow: hidden;
    border-radius: 20px !important;
  }

  html:not([data-chss-high-contrast="true"]) .chss-app :where(
    .chss-mobile-shift-card,
    .chss-mobile-staff-card,
    .chss-mobile-timeoff-card,
    .chss-mobile-history-card,
    .chss-mobile-report-card,
    .chss-mobile-template-card,
    .chss-request-card,
    .chss-user-card,
    .chss-shift-card
  ) {
    border-color: #e3e3e7 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 15px rgba(17, 17, 17, .045) !important;
  }

  /* Keep expandable card headers predictable when names or labels wrap to two lines. */
  .chss-app :where(
    .chss-mobile-shift-card,
    .chss-mobile-staff-card,
    .chss-mobile-history-card,
    .chss-mobile-report-card,
    .chss-mobile-template-card
  ) > summary {
    min-width: 0 !important;
    min-height: 76px;
    align-items: center !important;
  }

  .chss-app :where(
    .chss-mobile-shift-copy,
    .chss-mobile-staff-copy,
    .chss-mobile-timeoff-copy,
    .chss-mobile-history-card > summary > span,
    .chss-mobile-report-card > summary > span,
    .chss-mobile-template-card > summary > span,
    .chss-request-card > div,
    .chss-shift-card > div
  ) {
    min-width: 0 !important;
  }

  .chss-app :where(
    .chss-mobile-shift-copy > strong,
    .chss-mobile-staff-copy > strong,
    .chss-mobile-timeoff-copy > strong,
    .chss-mobile-history-card strong,
    .chss-mobile-report-card strong,
    .chss-mobile-template-card strong,
    .chss-request-card h3,
    .chss-shift-card h3
  ) {
    max-width: 100% !important;
    color: #181a20;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    text-align: center !important;
  }

  .chss-app :where(
    .chss-mobile-shift-copy time,
    .chss-mobile-staff-copy small,
    .chss-mobile-staff-login-meta,
    .chss-mobile-timeoff-copy > span,
    .chss-mobile-timeoff-copy time,
    .chss-mobile-history-card small,
    .chss-mobile-report-card small,
    .chss-mobile-template-card small,
    .chss-request-card p,
    .chss-shift-card p
  ) {
    max-width: 100% !important;
    color: #6f727a;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center !important;
  }

  /* Non-semantic identity chips use the CompuShift red/white palette. */
  html:not([data-chss-high-contrast="true"]) .chss-app :where(
    .chss-mobile-shift-avatar,
    .chss-mobile-staff-avatar,
    .chss-mobile-timeoff-avatar,
    .chss-mobile-history-card-icon,
    .chss-mobile-report-avatar
  ) {
    border: 1px solid #f1c7ca !important;
    background: #fff2f3 !important;
    color: #c81018 !important;
    box-shadow: none !important;
  }

  html:not([data-chss-high-contrast="true"]) .chss-app :where(
    .chss-mobile-shift-position,
    .chss-mobile-staff-role,
    .chss-mobile-timeoff-copy p
  ) {
    border: 1px solid #e7e7ea !important;
    border-radius: 999px !important;
    background: #f7f7f8 !important;
    color: #555861 !important;
    box-shadow: none !important;
  }

  /* Editors/details read as one continuation of the card instead of a second nested card. */
  html:not([data-chss-high-contrast="true"]) .chss-app :where(
    .chss-mobile-shift-editor,
    .chss-mobile-staff-editor,
    .chss-mobile-history-details,
    .chss-mobile-report-card-details,
    .chss-mobile-template-card > div
  ) {
    border-top-color: #ececef !important;
    background: #fafafa !important;
  }

  /* One simple empty-state treatment everywhere. */
  .chss-app :where(
    .chss-mobile-shifts-empty,
    .chss-mobile-staff-empty,
    .chss-mobile-timeoff-empty,
    .chss-mobile-history-empty,
    .chss-mobile-reports-empty,
    .chss-mobile-settings-empty
  ) {
    display: grid;
    place-items: center;
    width: 100% !important;
    min-height: 104px;
    margin: 0 !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
    color: #686b73 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  html:not([data-chss-high-contrast="true"]) .chss-app :where(
    .chss-mobile-shifts-empty,
    .chss-mobile-staff-empty,
    .chss-mobile-timeoff-empty,
    .chss-mobile-history-empty,
    .chss-mobile-reports-empty,
    .chss-mobile-settings-empty
  ) {
    border: 1px solid #e3e3e7 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 15px rgba(17, 17, 17, .035) !important;
  }

  .chss-app :where(
    .chss-mobile-shifts-empty,
    .chss-mobile-staff-empty,
    .chss-mobile-timeoff-empty,
    .chss-mobile-history-empty,
    .chss-mobile-reports-empty,
    .chss-mobile-settings-empty
  )::before {
    display: block;
    width: 34px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: #ed1c24;
    content: "";
  }

  /* Existing richer empty cards get the same spacing/typography without losing their message/icon. */
  .chss-app .chss-empty-state {
    width: 100% !important;
    min-height: 132px;
    margin-inline: auto !important;
    padding: 24px 18px !important;
    border-radius: 20px !important;
    text-align: center !important;
  }

  html:not([data-chss-high-contrast="true"]) .chss-app .chss-empty-state {
    border: 1px solid #e3e3e7 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 15px rgba(17, 17, 17, .035) !important;
  }

  html:not([data-chss-high-contrast="true"]) .chss-app .chss-empty-icon {
    background: #fff2f3 !important;
    color: #c81018 !important;
  }

  .chss-app .chss-empty-state :where(h2, h3) {
    max-width: 28ch;
    margin-inline: auto !important;
    color: #181a20 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  .chss-app .chss-empty-state p {
    max-width: 36ch;
    margin-inline: auto !important;
    color: #6f727a !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  /* Day-section empties stay compact because there can be two in the same day card. */
  .chss-app .chss-day-empty {
    min-height: 54px;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    color: #777a82 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  html:not([data-chss-high-contrast="true"]) .chss-app .chss-day-empty {
    border: 1px solid #ececef !important;
    background: #fafafa !important;
  }

  /* Status/count badges remain compact and never drag a centered header sideways. */
  .chss-app :where(.chss-status-badge, .chss-pill) {
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* v0.117-final — high contrast retains the existing red / black / white palette. */
html[data-chss-high-contrast="true"] { --chss-bg:#fff; --chss-surface:#fff; --chss-text:#111; --chss-muted:#5a171b; --chss-border:#7f080e; --chss-line:#b80f16; --chss-primary:#b80f16; --chss-primary-2:#7f080e; --chss-accent:#ed1c24; --chss-shadow:none; }
html[data-chss-high-contrast="true"] body, html[data-chss-high-contrast="true"] .chss-app, html[data-chss-high-contrast="true"] .chss-account-portal-root, html[data-chss-high-contrast="true"] .chss-auth-shell, html[data-chss-high-contrast="true"] .chss-force-password-shell { background:#fff !important; color:#111 !important; }
html[data-chss-high-contrast="true"] .chss-app :where(.chss-panel,.chss-subpanel,.chss-summary-card,.chss-day-card,.chss-shift-card,.chss-mobile-settings-card,.chss-mobile-shift-card,.chss-mobile-staff-card,.chss-mobile-timeoff-card,.chss-mobile-history-card,.chss-mobile-report-card,.chss-account-sheet,.chss-profile-menu,article), html[data-chss-high-contrast="true"] .chss-account-portal-root :where(.chss-account-sheet,.chss-profile-menu,article) { border-color:#7f080e !important; background:#fff !important; color:#111 !important; box-shadow:none !important; }
html[data-chss-high-contrast="true"] .chss-app :where(input,select,textarea,.chss-date-trigger,.chss-time-trigger,.chss-select-trigger), html[data-chss-high-contrast="true"] .chss-account-portal-root :where(input,select,textarea) { border:2px solid #7f080e !important; background:#fff !important; color:#111 !important; }
html[data-chss-high-contrast="true"] .chss-app :where(button,.chss-button,.chss-small-button,input[type="submit"],.chss-tab.is-active,.chss-accessibility-options button[aria-checked="true"],.chss-accessibility-options button.is-active), html[data-chss-high-contrast="true"] .chss-account-portal-root :where(button,.chss-button,input[type="submit"]) { border-color:#7f080e !important; background:#b80f16 !important; color:#fff !important; box-shadow:none !important; }
html[data-chss-high-contrast="true"] .chss-app :where(.chss-muted,small,.chss-accessibility-intro,.chss-eyebrow), html[data-chss-high-contrast="true"] .chss-account-portal-root :where(.chss-muted,small,.chss-accessibility-intro) { color:#5a171b !important; }
html[data-chss-high-contrast="true"] .chss-app a, html[data-chss-high-contrast="true"] .chss-account-portal-root a { color:#8f0d14 !important; text-decoration-thickness:2px; }
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer { border-top-color:#7f080e !important; background:#fff !important; box-shadow:none !important; }
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab { color:#5a171b !important; }
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active, html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-label { background:#b80f16 !important; color:#fff !important; }

/* v0.117.1 — contrast enhancement only: restore the normal brand palette. */
html[data-chss-high-contrast="true"] .chss-app,
html[data-chss-high-contrast="true"] .chss-account-portal-root {
	--chss-bg: #f7f7f8; --chss-surface: #ffffff; --chss-text: #17191f;
	--chss-muted: #555861; --chss-border: #c81018; --chss-line: #e2e3e7;
	--chss-primary: #ed1c24; --chss-primary-2: #b80f16; --chss-accent: #ed1c24;
	background: #f7f7f8 !important; color: #17191f !important;
}
html[data-chss-high-contrast="true"] .chss-app :where(.chss-app-header,.chss-panel,.chss-subpanel,.chss-summary-card,.chss-day-card,.chss-shift-card,.chss-mobile-settings-card,.chss-mobile-shift-card,.chss-mobile-staff-card,.chss-mobile-timeoff-card,.chss-mobile-history-card,.chss-mobile-report-card,.chss-account-sheet,.chss-profile-menu,article),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(.chss-account-sheet,.chss-profile-menu,article) {
	background: #ffffff !important; color: #17191f !important; border-color: #c81018 !important;
	box-shadow: none !important;
}
html[data-chss-high-contrast="true"] .chss-app :where(button,.chss-button,.chss-small-button,input[type="submit"],.chss-tab.is-active),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(button,.chss-button,input[type="submit"]) {
	background: #ed1c24 !important; border-color: #b80f16 !important; color: #ffffff !important;
}
html[data-chss-high-contrast="true"] .chss-app :where(input,select,textarea,.chss-date-trigger,.chss-time-trigger,.chss-select-trigger),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(input,select,textarea) {
	background: #ffffff !important; color: #17191f !important; border: 2px solid #b80f16 !important;
}
html[data-chss-high-contrast="true"] .chss-app :where(.chss-muted,small,.chss-accessibility-intro,.chss-eyebrow),
html[data-chss-high-contrast="true"] .chss-account-portal-root :where(.chss-muted,small,.chss-accessibility-intro) { color: #555861 !important; }
html[data-chss-high-contrast="true"] .chss-app a,
html[data-chss-high-contrast="true"] .chss-account-portal-root a { color: #b80f16 !important; }
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer { background: #ffffff !important; border-top-color: #c81018 !important; }
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab { background: transparent !important; color: #555861 !important; }
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active,
html[data-chss-high-contrast="true"] body > .chss-mobile-nav-footer .chss-tab.is-active .chss-tab-mobile-label { background: #fff0f1 !important; color: #b80f16 !important; }
html[data-chss-high-contrast="true"] .chss-app :where(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid #ed1c24 !important; outline-offset: 3px; }

.chss-wizard-progress { display:grid; gap:4px; margin:20px 0; padding:14px 16px; border:1px solid #f1c7ca; border-radius:16px; background:#fff7f7; color:#b80f16; }
.chss-wizard-progress span { color:#555861; font-size:13px; }
.chss-wizard-fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:4px 0; padding:14px; border:1px solid #e2e3e7; border-radius:16px; }
.chss-wizard-fieldset legend { padding:0 6px; color:#b80f16; font-weight:900; }
.chss-wizard-fieldset label { margin:0; }
.chss-wizard-full-field { grid-column: 1 / -1; }
.chss-wizard-positions textarea { width: 100%; min-height: 120px; resize: vertical; }
@media (max-width:480px) { .chss-wizard-fieldset { grid-template-columns:1fr; } }

/* v0.118.3 — setup wizard follows the application theme. */
.chss-wizard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.chss-wizard-heading > div:first-child { min-width: 0; }
.chss-wizard-brand { display: flex; flex: 0 0 150px; align-items: flex-start; justify-content: flex-end; padding-top: 2px; }
.chss-wizard-brand img { display: block; width: 150px; height: auto; object-fit: contain; }
.chss-app .chss-setup-wizard { min-height: calc(100vh - 120px); padding: 18px 0; }
.chss-app .chss-setup-wizard .chss-auth-card {
	width: min(100%, 820px); padding: 28px; border: 1px solid #e3e3e7; border-radius: 20px;
	background: #ffffff; box-shadow: 0 6px 18px rgba(17,17,17,.055);
}
.chss-app .chss-setup-wizard h1 { color: #17191f; font-size: clamp(26px, 7vw, 38px); letter-spacing: -.03em; }
.chss-app .chss-setup-wizard .chss-eyebrow { color: #b80f16; }
.chss-app .chss-setup-wizard .chss-muted { color: #6f727a; }
.chss-app .chss-setup-wizard .chss-wizard-progress { border-color: #f1c7ca; background: #fff2f3; color: #b80f16; }
.chss-app .chss-setup-wizard .chss-form-grid input,
.chss-app .chss-setup-wizard .chss-form-grid select { border-color: #e2e3e7; background: #fff; color: #17191f; }
.chss-app .chss-setup-wizard .chss-form-grid input:focus,
.chss-app .chss-setup-wizard .chss-form-grid select:focus { border-color: #ed1c24; box-shadow: 0 0 0 3px rgba(237,28,36,.12); }
.chss-app .chss-setup-wizard .chss-button { min-height: 46px; border: 1px solid #c81018; border-radius: 14px; background: linear-gradient(135deg,#ed1c24,#b80f16); color:#fff; font-weight:900; }
@media (max-width:480px) { .chss-wizard-heading { gap: 10px; } .chss-wizard-brand { flex-basis: 92px; } .chss-wizard-brand img { width: 92px; } .chss-app .chss-setup-wizard { padding: 8px 0; } .chss-app .chss-setup-wizard .chss-auth-card { padding: 20px 14px; border-radius: 20px; } }

/* v0.118.9 — wizard time/select menus use the same full-width app controls. */
.chss-app .chss-setup-wizard .chss-form-grid > label { min-width: 0; }
.chss-app .chss-setup-wizard .chss-time-field,
.chss-app .chss-setup-wizard .chss-select-field { display: block !important; width: 100% !important; min-width: 0 !important; }
.chss-app .chss-setup-wizard .chss-time-trigger,
.chss-app .chss-setup-wizard .chss-select-trigger { width: 100% !important; min-width: 0 !important; min-height: 46px !important; box-sizing: border-box !important; border: 1px solid #e2e3e7 !important; border-radius: 14px !important; background: #fff !important; color: #17191f !important; font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; }
.chss-app .chss-setup-wizard .chss-time-trigger { grid-template-columns: minmax(0, 1fr) 38px !important; padding: 6px 7px 6px 13px !important; }
.chss-app .chss-setup-wizard .chss-time-trigger-icon { width: auto !important; height: auto !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; font-size: 24px !important; font-weight: 900 !important; line-height: .7 !important; }
.chss-app .chss-setup-wizard .chss-select-trigger { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 12px !important; }
.chss-app .chss-setup-wizard .chss-time-trigger:focus-visible,
.chss-app .chss-setup-wizard .chss-select-trigger:focus-visible { border-color: #ed1c24 !important; box-shadow: 0 0 0 3px rgba(237,28,36,.12) !important; outline: none !important; }

/* Force the enhanced controls to occupy the complete label column. */
.chss-app .chss-setup-wizard .chss-form-grid > label,
.chss-app .chss-setup-wizard .chss-wizard-fieldset label { display: block !important; width: 100% !important; min-width: 0 !important; }
.chss-app .chss-setup-wizard .chss-form-grid > label > .chss-time-field,
.chss-app .chss-setup-wizard .chss-form-grid > label > .chss-select-field,
.chss-app .chss-setup-wizard .chss-wizard-fieldset label > .chss-time-field,
.chss-app .chss-setup-wizard .chss-wizard-fieldset label > .chss-select-field { display: block !important; width: 100% !important; max-width: none !important; }
.chss-app .chss-setup-wizard .chss-time-trigger,
.chss-app .chss-setup-wizard .chss-select-trigger { display: flex !important; width: 100% !important; max-width: none !important; margin: 7px 0 0 !important; }
.chss-app .chss-setup-wizard .chss-time-trigger { display: grid !important; }
.chss-app .chss-setup-wizard .chss-time-trigger-icon { justify-self: end !important; }

/* v0.118.4 — non-destructive setup wizard preview. */
.chss-wizard-preview-button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
	margin-top: 10px; padding: 9px 14px; border: 1px solid #c81018; border-radius: 12px;
	background: linear-gradient(135deg,#ed1c24,#b80f16); color: #fff; font: inherit; font-weight: 900; cursor: pointer;
}
.chss-wizard-preview-button:hover { background: linear-gradient(135deg,#c81018,#970b10); color: #fff; }
.chss-wizard-preview-button:disabled { opacity: 1 !important; background: linear-gradient(135deg,#ed1c24,#b80f16) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.chss-wizard-test-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 40px; margin: 10px 0 2px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.38); border-radius: 12px; background: rgba(255,255,255,.14); color: #fff !important; font-size: 13px; font-weight: 900; text-decoration: none; }
.chss-wizard-test-link:hover { background: rgba(255,255,255,.24); color: #fff !important; }
.chss-wizard-preview-form > .chss-form-actions { display: none; }
.chss-onboarding-preview-form input:disabled { opacity: 1; color: #17191f; background: #fff; }
.chss-wizard-preview-dialog { width: min(96vw, 860px); max-height: 92vh; padding: 0; border: 0; border-radius: 22px; background: #f7f7f8; color: #17191f; box-shadow: 0 24px 80px rgba(0,0,0,.28); overflow: hidden; }
.chss-wizard-preview-dialog::backdrop { background: rgba(17,17,17,.62); }
.chss-wizard-preview-backdrop { position: fixed; inset: 0; }
.chss-wizard-preview-sheet { position: relative; max-height: 92vh; overflow: auto; }
.chss-wizard-preview-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px; border-bottom: 1px solid #e2e3e7; background: #fff; }
.chss-wizard-preview-sheet > header h2 { margin: 0; font-size: 22px; }
.chss-wizard-preview-sheet > header p:last-child { margin: 5px 0 0; color: #6f727a; font-size: 13px; }
.chss-wizard-preview-close { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid #e2e3e7; border-radius: 999px; background: #fff; color: #b80f16; font-size: 26px; line-height: 1; cursor: pointer; }
.chss-wizard-preview-content { padding: 10px 18px 22px; }
.chss-wizard-preview-content .chss-setup-wizard { min-height: 0; padding: 0; }
.chss-wizard-preview-content .chss-auth-card { box-shadow: none; }
.chss-wizard-preview-content input:disabled, .chss-wizard-preview-content select:disabled { opacity: 1; color: #17191f; background: #fff; }
@media (max-width:480px) {
	.chss-wizard-preview-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
	.chss-wizard-preview-sheet { max-height: 100vh; }
	.chss-wizard-preview-content { padding: 8px 10px 18px; }
}

/* v0.117.2 — high contrast is temporarily marked as under construction. */
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-options article.is-under-construction {
	opacity: .72;
}
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-options article.is-under-construction strong small {
	color: #b80f16;
	font-size: .78em;
	font-weight: 900;
}
:is(.chss-app, .chss-account-portal-root) .chss-accessibility-options article.is-under-construction button[disabled] {
	opacity: .7;
	cursor: not-allowed;
}