/*!
 * Agency Employee & Payroll Portal — Professional Light Theme
 * Palette matched to londonaestheticsuk.com: deep wine #66163E,
 * darker wine #4C0010, gold #C9973A, white content, dark neutral text.
 * Fonts: Libre Baskerville (display) · Montserrat (body)
 */

.aepp-portal {
	--aepp-wine: #66163e;
	--aepp-wine-dark: #4c0010;
	--aepp-wine-tint: #f8f1f4;
	--aepp-gold: #c9973a;
	--aepp-gold-deep: #a97a24;
	--aepp-gold-soft: rgba(201, 151, 58, 0.12);
	--aepp-bg: #f6f5f3;
	--aepp-panel: #ffffff;
	--aepp-border: #e8e1e3;
	--aepp-text: #241820;
	--aepp-muted: #7a6c73;
	--aepp-danger: #b23b3b;
	--aepp-success: #2f8f5b;
	--aepp-radius: 12px;
	--aepp-font-display: 'Libre Baskerville', Georgia, serif;
	--aepp-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	width: 100%;
	max-width: 100%;
	background: var(--aepp-bg);
	color: var(--aepp-text);
	font-family: var(--aepp-font-body);
	min-height: 100vh;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.aepp-portal * {
	box-sizing: border-box;
}

.aepp-portal h1,
.aepp-portal h2,
.aepp-portal h3 {
	font-family: var(--aepp-font-display);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 4px;
	color: var(--aepp-wine);
}

.aepp-muted {
	color: var(--aepp-muted);
	font-size: 13px;
}

/* ---------------- Auth Screen ---------------- */

.aepp-auth-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 20px;
	background: linear-gradient(160deg, var(--aepp-wine) 0%, var(--aepp-wine-dark) 100%);
}

.aepp-auth-card {
	width: 100%;
	max-width: 420px;
	padding: 44px 36px;
	background: var(--aepp-panel);
	border: 1px solid var(--aepp-border);
	border-radius: var(--aepp-radius);
	box-shadow: 0 24px 60px rgba(76, 0, 16, 0.35);
	text-align: center;
}

.aepp-auth-logo {
	max-height: 56px;
	margin-bottom: 14px;
}

.aepp-auth-company {
	font-size: 26px;
	color: var(--aepp-wine);
}

.aepp-auth-subtitle {
	color: var(--aepp-gold-deep);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 28px;
	font-weight: 600;
}

.aepp-auth-form {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---------------- Alerts ---------------- */

.aepp-alert {
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13px;
	margin-bottom: 18px;
	text-align: left;
}

.aepp-alert-error {
	background: #fbeaea;
	border: 1px solid #e6bcbc;
	color: #8f2b2b;
}

.aepp-alert-success {
	background: #eaf6ef;
	border: 1px solid #b9e2c9;
	color: #1f6b41;
}

/* ---------------- Fields & Buttons ---------------- */

.aepp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aepp-field-inline {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.aepp-field-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--aepp-muted);
	font-weight: 600;
}

.aepp-field-label em {
	font-style: normal;
	opacity: 0.65;
	text-transform: none;
	letter-spacing: 0;
}

.aepp-portal input[type="text"],
.aepp-portal input[type="email"],
.aepp-portal input[type="password"],
.aepp-portal input[type="number"],
.aepp-portal input[type="url"],
.aepp-portal input[type="date"],
.aepp-portal input[type="month"],
.aepp-portal input[type="time"],
.aepp-portal select {
	background: #fff;
	border: 1px solid #d9cfd3;
	color: var(--aepp-text);
	border-radius: 8px;
	padding: 11px 13px;
	font-family: var(--aepp-font-body);
	font-size: 14px;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aepp-portal input::placeholder {
	color: #b3a6ab;
}

.aepp-portal input:focus,
.aepp-portal select:focus {
	outline: none;
	border-color: var(--aepp-gold);
	box-shadow: 0 0 0 3px var(--aepp-gold-soft);
}

.aepp-btn {
	font-family: var(--aepp-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 8px;
	padding: 12px 20px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.aepp-btn:active {
	transform: translateY(1px);
}

.aepp-btn-gold {
	background: linear-gradient(135deg, #dcb15e, var(--aepp-gold));
	color: #2b1a05;
	box-shadow: 0 6px 16px rgba(201, 151, 58, 0.35);
}

.aepp-btn-gold:hover {
	box-shadow: 0 8px 20px rgba(201, 151, 58, 0.48);
}

.aepp-btn-ghost {
	background: #fff;
	border-color: #d9cfd3;
	color: var(--aepp-wine);
}

.aepp-btn-ghost:hover {
	border-color: var(--aepp-wine);
	background: var(--aepp-wine-tint);
}

.aepp-btn-block {
	width: 100%;
}

.aepp-btn-sm {
	padding: 8px 14px;
	font-size: 11px;
}

.aepp-btn-icon {
	padding: 6px 10px;
	font-size: 11px;
	border-radius: 6px;
}

.aepp-btn-danger {
	background: #fbeaea;
	border-color: #e6bcbc;
	color: var(--aepp-danger);
}

.aepp-btn-danger:hover {
	background: #f6d8d8;
}

/* ---------------- Topbar ---------------- */

.aepp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 40px;
	background: linear-gradient(120deg, var(--aepp-wine) 0%, var(--aepp-wine-dark) 100%);
	flex-wrap: wrap;
	gap: 12px;
	box-shadow: 0 4px 18px rgba(76, 0, 16, 0.25);
}

.aepp-topbar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aepp-topbar-logo {
	max-height: 38px;
	border-radius: 4px;
	background: #fff;
	padding: 2px;
}

.aepp-topbar-company {
	font-family: var(--aepp-font-display);
	font-size: 19px;
	letter-spacing: 0.02em;
	color: #fff;
}

.aepp-topbar-user {
	display: flex;
	align-items: center;
	gap: 14px;
}

.aepp-topbar-name {
	font-weight: 600;
	font-size: 14px;
	color: #fff;
}

.aepp-topbar-role {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2b1a05;
	background: var(--aepp-gold);
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 700;
}

.aepp-topbar .aepp-btn-ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.aepp-topbar .aepp-btn-ghost:hover {
	background: #fff;
	color: var(--aepp-wine);
}

/* ---------------- Shell / Layout ---------------- */

.aepp-shell {
	max-width: 1600px;
	margin: 0 auto;
	padding: 32px 40px 72px;
}

.aepp-card {
	background: var(--aepp-panel);
	border: 1px solid var(--aepp-border);
	border-radius: var(--aepp-radius);
	padding: 26px;
	margin-bottom: 24px;
	box-shadow: 0 4px 18px rgba(36, 24, 32, 0.06);
}

.aepp-card-narrow {
	max-width: 560px;
}

.aepp-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.aepp-panel-head-compact {
	margin-bottom: 16px;
}

/* ---------------- Tabs ---------------- */

.aepp-tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--aepp-border);
	border-radius: 999px;
	margin-bottom: 28px;
	width: fit-content;
	box-shadow: 0 2px 10px rgba(36, 24, 32, 0.05);
}

.aepp-tab-btn {
	background: transparent;
	border: none;
	color: var(--aepp-wine);
	font-family: var(--aepp-font-body);
	font-weight: 600;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 11px 20px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.aepp-tab-btn:hover {
	background: var(--aepp-wine-tint);
}

.aepp-tab-btn.is-active {
	background: linear-gradient(135deg, var(--aepp-wine) 0%, var(--aepp-wine-dark) 100%);
	color: #fff;
	box-shadow: 0 6px 16px rgba(76, 0, 16, 0.3);
}

.aepp-tab-panel {
	display: none;
}

.aepp-tab-panel.is-active {
	display: block;
	animation: aepp-fade-in 0.25s ease;
}

@keyframes aepp-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------------- Forms / Grids ---------------- */

.aepp-form-card {
	border-color: rgba(201, 151, 58, 0.5);
	background: var(--aepp-wine-tint);
}

.aepp-grid-2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 18px;
}

.aepp-grid-attendance {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: end;
}

.aepp-grid-attendance .aepp-form-actions {
	grid-column: 1 / -1;
}

.aepp-grid-bulk {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 18px;
	align-items: end;
}

.aepp-form-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.aepp-align-end {
	align-items: end;
}

@media (max-width: 1100px) {
	.aepp-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.aepp-grid-2,
	.aepp-grid-attendance,
	.aepp-grid-bulk {
		grid-template-columns: 1fr;
	}
}

/* ---------------- Media Uploader (Logo / Photo) ---------------- */

.aepp-uploader-field {
	margin-bottom: 18px;
}

.aepp-uploader-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: #fff;
	border: 1px dashed #d9cfd3;
	border-radius: 8px;
}

.aepp-uploader-preview {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid var(--aepp-border);
}

.aepp-uploader-empty {
	color: var(--aepp-muted);
	font-size: 13px;
	flex: 1;
}

/* ---------------- Tables ---------------- */

.aepp-table-wrap {
	overflow-x: auto;
}

.aepp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.aepp-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--aepp-wine);
	padding: 12px 16px;
	white-space: nowrap;
}

.aepp-table th:first-child {
	border-top-left-radius: 8px;
}

.aepp-table th:last-child {
	border-top-right-radius: 8px;
}

.aepp-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--aepp-border);
	white-space: nowrap;
	color: var(--aepp-text);
}

.aepp-table tbody tr:nth-child(even) {
	background: #faf7f5;
}

.aepp-table-group-row td {
	background: var(--aepp-wine-tint);
	color: var(--aepp-wine);
	font-family: 'Libre Baskerville', serif;
	font-weight: 700;
	font-size: 13px;
	padding: 10px 16px;
	white-space: nowrap;
}

.aepp-table-group-row:nth-child(even) td {
	background: var(--aepp-wine-tint);
}

.aepp-table tbody tr:hover {
	background: var(--aepp-wine-tint);
}

/* Manager Portal's "My Staff" table reuses the exact same Employee
   Directory markup/renderer as the admin dashboard (#aepp-employee-table),
   just with the multi-clinic-only bits (bulk-select, cross-clinic move) and
   the admin-only Salary Summary/Delete controls hidden — Delete stays
   blocked server-side too (ajax_delete_employee is admin-only), this is
   purely to keep the manager's own table uncluttered. */
.aepp-portal[data-role="manager"] #aepp-employee-table th:first-child,
.aepp-portal[data-role="manager"] #aepp-employee-table td:first-child,
.aepp-portal[data-role="manager"] #aepp-employee-table th:nth-child(6),
.aepp-portal[data-role="manager"] #aepp-employee-table td:nth-child(6) {
	display: none;
}

.aepp-portal[data-role="manager"] .aepp-delete-employee {
	display: none;
}

.aepp-loading {
	text-align: center;
	color: var(--aepp-muted);
	padding: 26px !important;
	white-space: normal !important;
	background: #fff !important;
}

.aepp-row-photo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--aepp-border);
}

.aepp-login-line {
	display: block;
	font-size: 12px;
	line-height: 1.5;
}

.aepp-status-pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.aepp-status-present { background: #e3f5eb; color: var(--aepp-success); }
.aepp-status-late { background: #fbf0dc; color: var(--aepp-gold-deep); }
.aepp-status-half-day { background: #fdeadb; color: #b8631f; }
.aepp-status-wfh { background: #dbe9fb; color: #2a5fa8; }
.aepp-status-absent { background: #fbe6e6; color: var(--aepp-danger); }
.aepp-status-off { background: #e7edf5; color: #3d5a80; }

/* A "Late" pill that also shows the employee is present — a tiny "Late"
   tag sits above the main "Present" word, so it reads as present-with-a-
   note rather than reading as absent-like. */
.aepp-status-pill-stacked {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
	padding: 3px 12px 4px;
	gap: 1px;
}

.aepp-status-pill-tag {
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	opacity: 0.85;
}

/* ---------------- Danger Zone (Settings) ---------------- */

.aepp-danger-zone {
	margin-top: 20px;
	border: 1px solid rgba(178, 59, 59, 0.35) !important;
	background: rgba(178, 59, 59, 0.05);
}

/* ---------------- Checkbox field (e.g. "No Deduction") ---------------- */

.aepp-checkbox-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--aepp-border);
	border-radius: var(--aepp-radius);
	background: var(--aepp-wine-tint);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--aepp-wine);
}

.aepp-checkbox-field input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--aepp-wine);
	cursor: pointer;
}

/* ---------------- Attendance Calendar ---------------- */

.aepp-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.aepp-calendar-dow {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aepp-muted);
	padding-bottom: 6px;
}

.aepp-calendar-cell {
	min-height: 76px;
	border-radius: 10px;
	border: 1px solid var(--aepp-border);
	background: var(--aepp-panel);
	padding: 6px 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 10px;
}

.aepp-calendar-cell-empty {
	border: none;
	background: transparent;
}

.aepp-calendar-daynum {
	font-family: var(--aepp-font-display);
	font-size: 14px;
	color: var(--aepp-text);
}

.aepp-calendar-daylabel {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
}

.aepp-calendar-time {
	font-size: 8.5px;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0.92;
	white-space: nowrap;
}

.aepp-calendar-today {
	border: 2px solid var(--aepp-gold);
	box-shadow: 0 0 0 3px var(--aepp-gold-soft);
}

.aepp-calendar-cell.aepp-status-present { background: #2e9e5b; border-color: #2e9e5b; }
.aepp-calendar-cell.aepp-status-late { background: #e3a713; border-color: #e3a713; }
.aepp-calendar-cell.aepp-status-half-day { background: #e2872f; border-color: #e2872f; }
.aepp-calendar-cell.aepp-status-wfh { background: #3b7dd8; border-color: #3b7dd8; }
.aepp-calendar-cell.aepp-status-absent { background: #d9534f; border-color: #d9534f; }
.aepp-calendar-cell.aepp-status-off { background: #7c8ba1; border-color: #7c8ba1; }

.aepp-calendar-cell.aepp-status-present .aepp-calendar-daynum,
.aepp-calendar-cell.aepp-status-present .aepp-calendar-daylabel,
.aepp-calendar-cell.aepp-status-present .aepp-calendar-time,
.aepp-calendar-cell.aepp-status-half-day .aepp-calendar-daynum,
.aepp-calendar-cell.aepp-status-half-day .aepp-calendar-daylabel,
.aepp-calendar-cell.aepp-status-half-day .aepp-calendar-time,
.aepp-calendar-cell.aepp-status-wfh .aepp-calendar-daynum,
.aepp-calendar-cell.aepp-status-wfh .aepp-calendar-daylabel,
.aepp-calendar-cell.aepp-status-wfh .aepp-calendar-time,
.aepp-calendar-cell.aepp-status-absent .aepp-calendar-daynum,
.aepp-calendar-cell.aepp-status-absent .aepp-calendar-daylabel,
.aepp-calendar-cell.aepp-status-absent .aepp-calendar-time,
.aepp-calendar-cell.aepp-status-off .aepp-calendar-daynum,
.aepp-calendar-cell.aepp-status-off .aepp-calendar-daylabel,
.aepp-calendar-cell.aepp-status-off .aepp-calendar-time {
	color: #ffffff;
}

.aepp-calendar-cell.aepp-status-late .aepp-calendar-daynum,
.aepp-calendar-cell.aepp-status-late .aepp-calendar-daylabel,
.aepp-calendar-cell.aepp-status-late .aepp-calendar-time {
	color: #2b1a00;
}

.aepp-calendar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 14px;
	font-size: 11px;
	color: var(--aepp-muted);
}

.aepp-calendar-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.aepp-calendar-legend i {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

@media (max-width: 700px) {
	.aepp-calendar-grid {
		gap: 4px;
	}
	.aepp-calendar-cell {
		min-height: 46px;
		padding: 4px 5px;
	}
	.aepp-calendar-daylabel,
	.aepp-calendar-time {
		display: none;
	}
}

/* ---------------- Per-employee Summary Strip (Attendance Logs) ---------------- */

.aepp-summary-strip {
	background: var(--aepp-wine-tint);
	border: 1px solid var(--aepp-border);
	border-radius: var(--aepp-radius);
	padding: 18px 20px;
	margin-bottom: 20px;
}

.aepp-metric-row-compact {
	margin-bottom: 0;
}

.aepp-metric-row-compact .aepp-metric-card {
	background: var(--aepp-panel);
	padding: 14px 16px;
}

/* ---------------- Employee Dashboard ---------------- */

.aepp-profile-banner {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	background: linear-gradient(120deg, var(--aepp-wine-tint) 0%, #fff 60%);
}

.aepp-avatar {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--aepp-gold);
	box-shadow: 0 0 0 6px var(--aepp-gold-soft);
}

.aepp-profile-info {
	flex: 1;
	min-width: 200px;
}

.aepp-profile-info h2 {
	font-size: 25px;
}

.aepp-net-salary-badge {
	background: linear-gradient(135deg, var(--aepp-wine) 0%, var(--aepp-wine-dark) 100%);
	border-radius: 14px;
	padding: 16px 24px;
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: 0 8px 22px rgba(76, 0, 16, 0.28);
}

.aepp-badge-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.75);
}

.aepp-badge-value {
	font-family: var(--aepp-font-display);
	font-size: 27px;
	color: var(--aepp-gold);
}

.aepp-net-salary-badge .aepp-btn-ghost {
	align-self: flex-end;
	margin-top: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.aepp-net-salary-badge .aepp-btn-ghost:hover {
	background: #fff;
	color: var(--aepp-wine);
}

.aepp-settings-subhead {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--aepp-border);
}

.aepp-shift-group {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--aepp-border);
	border-radius: var(--aepp-radius);
	background: var(--aepp-panel);
}

.aepp-shift-group-title {
	margin: 0 0 10px;
	font-family: var(--aepp-font-display);
	font-size: 13px;
	color: var(--aepp-wine);
}

.aepp-metric-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

.aepp-metric-card {
	background: var(--aepp-panel);
	border: 1px solid var(--aepp-border);
	border-top: 3px solid var(--aepp-gold);
	border-radius: var(--aepp-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 0 4px 18px rgba(36, 24, 32, 0.06);
}

.aepp-metric-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--aepp-muted);
	font-weight: 600;
}

.aepp-metric-value {
	font-family: var(--aepp-font-display);
	font-size: 25px;
	color: var(--aepp-wine);
}

@media (max-width: 700px) {
	.aepp-metric-row {
		grid-template-columns: 1fr;
	}
	.aepp-net-salary-badge {
		text-align: left;
	}
	.aepp-topbar {
		flex-direction: column;
		align-items: flex-start;
	}
	.aepp-shell {
		padding: 24px 16px 56px;
	}
}

/* ---------------- Password show/hide toggle ---------------- */

.aepp-password-wrap {
	position: relative;
	display: block;
}

.aepp-password-wrap input {
	width: 100%;
	padding-right: 40px;
}

.aepp-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aepp-muted);
	cursor: pointer;
	border-radius: 6px;
}

.aepp-password-toggle:hover {
	color: var(--aepp-wine);
	background: var(--aepp-wine-tint);
}

.aepp-password-toggle svg {
	width: 17px;
	height: 17px;
}

/* ---------------- Weekly Timesheet (Attendance) ---------------- */

.aepp-weekly-table th,
.aepp-weekly-table td {
	text-align: center;
	white-space: nowrap;
}

.aepp-weekly-table th:first-child,
.aepp-weekly-table td:first-child {
	text-align: left;
	white-space: normal;
}

.aepp-week-day-cell {
	cursor: pointer;
	border-radius: 6px;
	padding: 4px 6px;
	font-size: 12px;
}

.aepp-week-day-cell:hover {
	background: var(--aepp-wine-tint);
}

.aepp-week-day-cell.is-empty {
	cursor: default;
	color: var(--aepp-muted);
}

.aepp-week-rest-pill {
	display: inline-block;
	background: #e7edf5;
	color: #3d5a80;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 8px;
	border-radius: 999px;
}

.aepp-week-absent-pill {
	display: inline-block;
	background: #fbe6e6;
	color: var(--aepp-danger);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 8px;
	border-radius: 999px;
}

/* ---------------- Today's Attendance (Live) ---------------- */

.aepp-live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2e9e5b;
	margin-left: 4px;
	animation: aepp-live-pulse 1.6s ease-in-out infinite;
}

@keyframes aepp-live-pulse {
	0% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 158, 91, 0.55); }
	70% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(46, 158, 91, 0); }
	100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 158, 91, 0); }
}

.aepp-live-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #2e9e5b;
	vertical-align: middle;
}

.aepp-today-attendance-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.aepp-today-clinic-group {
	border: 1px solid var(--aepp-border);
	border-radius: var(--aepp-radius);
	padding: 12px 14px;
	background: var(--aepp-panel);
}

.aepp-today-clinic-head {
	font-family: var(--aepp-font-display);
	font-weight: 700;
	color: var(--aepp-wine);
	font-size: 14px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--aepp-border);
}

.aepp-today-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
	font-size: 12.5px;
	border-bottom: 1px dashed var(--aepp-border);
}

.aepp-today-row:last-child {
	border-bottom: none;
}

.aepp-today-row.is-unmarked {
	opacity: 0.85;
}

.aepp-today-name {
	flex: 1;
	font-weight: 600;
	color: var(--aepp-text);
}

.aepp-today-time {
	font-size: 10.5px;
	color: var(--aepp-muted);
	white-space: nowrap;
}

.aepp-week-wfh-pill {
	display: inline-block;
	background: #dbe9fb;
	color: #2a5fa8;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 8px;
	border-radius: 999px;
}

.aepp-week-day-detail {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--aepp-border);
	font-size: 10.5px;
	color: var(--aepp-muted);
	text-align: left;
	white-space: normal;
	line-height: 1.5;
}

.aepp-week-day-detail strong {
	color: var(--aepp-text);
}

.aepp-week-total {
	font-family: var(--aepp-font-display);
	font-weight: 700;
	color: var(--aepp-wine);
}