/**
 * Staff Portal — scoped under .iphr-staff-portal-app only (v1.13.6).
 * No global element selectors. Loaded on the standalone staff portal route only.
 *
 * @package InnoPandaStaffPortal
 */

/* ── App root ───────────────────────────────────────────────── */
.iphr-staff-portal-app {
	--iphr-aside-w: 250px;
	--iphr-radius: 12px;
	--iphr-radius-sm: 8px;
	--iphr-bg: #F8FAFC;
	--iphr-surface: #FFFFFF;
	--iphr-border: #E5E7EB;
	--iphr-text: #111827;
	--iphr-muted: #6B7280;
	--iphr-primary: #4F46E5;
	--iphr-primary-hover: #4338CA;
	--iphr-primary-soft: #EEF2FF;
	--iphr-aside-bg: #111827;
	--iphr-aside-text: #D1D5DB;
	--iphr-success: #10B981;
	--iphr-warn: #F59E0B;
	--iphr-danger: #EF4444;
	--iphr-info: #3B82F6;
	--iphr-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 4px 16px rgba(17, 24, 39, 0.06);
	--iphr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 1.5rem 0;
	padding: 0;
	font-family: var(--iphr-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--iphr-text);
	background: transparent;
	clear: both;
	position: relative;
	z-index: 1;
	isolation: isolate;
}

.iphr-staff-portal-app.iphr-portal-login {
	display: block;
	padding: 2rem 1rem;
	background: var(--iphr-bg);
	border-radius: var(--iphr-radius);
}

.iphr-staff-portal-app:not(.iphr-portal-login) {
	background: var(--iphr-bg);
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius);
	overflow: hidden;
}

/* ── Shell / aside / nav ────────────────────────────────────── */
.iphr-staff-portal-app .iphr-shell {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 420px;
	width: 100%;
}

.iphr-staff-portal-app .iphr-aside {
	flex: 0 0 var(--iphr-aside-w);
	width: var(--iphr-aside-w);
	max-width: var(--iphr-aside-w);
	background: var(--iphr-aside-bg);
	color: var(--iphr-aside-text);
	display: flex;
	flex-direction: column;
	padding: 1rem 0;
}

.iphr-staff-portal-app .iphr-aside-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0 1rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 0.5rem;
}

.iphr-staff-portal-app .iphr-nav-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0.5rem;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.iphr-staff-portal-app .iphr-sidebar-nav-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 0 0.25rem 0.5rem;
	margin-bottom: 0.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.iphr-staff-portal-app .iphr-nav-tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.iphr-staff-portal-app .iphr-nav-tool-btn:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}
.iphr-staff-portal-app .iphr-nav-tool-btn-primary {
	background: var(--iphr-primary);
	border-color: transparent;
	color: #fff;
}
.iphr-staff-portal-app .iphr-nav-tool-btn-muted {
	border-color: transparent;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
}
.iphr-staff-portal-app .iphr-nav-customize-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.iphr-staff-portal-app .iphr-nav-customize-actions[hidden],
.iphr-staff-portal-app .iphr-nav-customize-hint[hidden],
.iphr-staff-portal-app #iphr-staff-nav-customize-toggle[hidden] {
	display: none !important;
}
.iphr-staff-portal-app.iphr-nav-customizing .iphr-aside {
	outline: 2px solid rgba(99, 102, 241, 0.55);
	outline-offset: -2px;
}
.iphr-staff-portal-app .iphr-nav-customize-hint {
	margin: 0 0.25rem 0.5rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.4;
}
.iphr-staff-portal-app .iphr-nav-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-height: 0;
}
.iphr-staff-portal-app .iphr-nav-row {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0;
}
.iphr-staff-portal-app .iphr-nav-drag-handle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.45);
	cursor: grab;
	font-size: 14px;
	user-select: none;
}
.iphr-staff-portal-app.iphr-nav-customizing .iphr-nav-drag-handle,
.iphr-staff-portal-app .iphr-nav-list.is-customizing .iphr-nav-drag-handle {
	display: flex;
}
.iphr-staff-portal-app.iphr-nav-customizing .iphr-nav-row .iphr-nav-item,
.iphr-staff-portal-app .iphr-nav-list.is-customizing .iphr-nav-item {
	pointer-events: none;
}
.iphr-staff-portal-app .iphr-nav-row.is-dragging {
	opacity: 0.45;
}
.iphr-staff-portal-app .iphr-nav-row.is-drag-over {
	outline: 2px dashed rgba(255, 255, 255, 0.45);
	outline-offset: -2px;
	border-radius: var(--iphr-radius-sm);
}
.iphr-staff-portal-app .iphr-nav-row .iphr-nav-item {
	flex: 1;
	min-width: 0;
}

.iphr-staff-portal-app .iphr-nav-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--iphr-radius-sm);
	color: var(--iphr-aside-text);
	text-decoration: none;
	font-size: 0.875rem;
	background: transparent;
	max-width: 100%;
}

.iphr-staff-portal-app .iphr-nav-item:hover {
	background: #1F2937;
	color: #F9FAFB;
	text-decoration: none;
}

.iphr-staff-portal-app .iphr-nav-item.iphr-state-on {
	background: var(--iphr-primary);
	color: #fff;
}

.iphr-staff-portal-app .iphr-nav-item-out {
	margin-top: auto;
	color: #f87171;
}

.iphr-staff-portal-app .iphr-portal-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	max-width: 1rem;
	flex-shrink: 0;
	font-size: 0.8rem;
	line-height: 1;
	background: transparent;
	border-radius: 0;
}

/* ── Main / topbar ──────────────────────────────────────────── */
.iphr-staff-portal-app .iphr-main-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.iphr-staff-portal-app .iphr-topstrip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	background: var(--iphr-surface);
	border-bottom: 1px solid var(--iphr-border);
	flex-wrap: wrap;
}

.iphr-staff-portal-app .iphr-topstrip-user {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	font-size: 0.875rem;
	font-weight: 500;
	flex-shrink: 0;
}

.iphr-staff-portal-app .iphr-topstrip-user .iphr-notifications {
	margin-right: 0.15rem;
}

.iphr-staff-portal-app .iphr-user-name {
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.iphr-staff-portal-app .iphr-brand-title {
	color: #F9FAFB;
	font-size: 0.9rem;
}

.iphr-staff-portal-app .iphr-brand-sub {
	color: var(--iphr-aside-text);
	font-size: 0.75rem;
	opacity: 0.85;
}

.iphr-staff-portal-app .iphr-nav-toggle {
	display: none;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius-sm);
	cursor: pointer;
	background: var(--iphr-surface);
}

.iphr-staff-portal-app .iphr-topstrip-title {
	flex: 1;
	min-width: 0;
}

.iphr-staff-portal-app .iphr-page-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0;
}

.iphr-staff-portal-app .iphr-page-heading {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--iphr-text);
}

.iphr-staff-portal-app .iphr-page-sub {
	font-size: 0.8rem;
	color: var(--iphr-muted);
	margin: 0;
}

.iphr-staff-portal-app .iphr-live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	max-width: 8px;
	max-height: 8px;
	border-radius: 50%;
	background: var(--iphr-success);
}

.iphr-staff-portal-app .iphr-workspace {
	flex: 1;
	position: relative;
	min-width: 0;
}

.iphr-staff-portal-app .iphr-pane-scroll {
	padding: 1.25rem;
	background: var(--iphr-bg);
}

.iphr-staff-portal-app .iphr-pane.is-pending {
	opacity: 0.5;
}

/* ── Wait overlay (fixed size — no loader/busy/progress substrings) ─ */
.iphr-staff-portal-app .iphr-wait {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2rem;
	margin: -1rem 0 0 -1rem;
	z-index: 5;
	display: none;
	background: transparent;
}

.iphr-staff-portal-app .iphr-wait.is-visible {
	display: block;
}

.iphr-staff-portal-app .iphr-wait-ring {
	display: block;
	width: 2rem;
	height: 2rem;
	max-width: 2rem;
	max-height: 2rem;
	border: 3px solid var(--iphr-border);
	border-top-color: var(--iphr-primary);
	border-radius: 50%;
	background: transparent;
	animation: iphr-portal-spin 0.7s linear infinite;
}

@keyframes iphr-portal-spin {
	to { transform: rotate(360deg); }
}

.iphr-staff-portal-app .iphr-fill-track {
	display: block;
	width: 100%;
	height: 8px;
	max-height: 8px;
	background: #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 0.5rem;
}

.iphr-staff-portal-app .iphr-fill-bar {
	display: block;
	height: 8px;
	max-height: 8px;
	background: var(--iphr-primary);
	border-radius: 4px;
}

/* ── Panels, layout, typography utilities ───────────────────── */
.iphr-staff-portal-app .iphr-panel {
	background: var(--iphr-surface);
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius);
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: var(--iphr-shadow);
}

.iphr-staff-portal-app .iphr-cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-muted {
	color: var(--iphr-muted);
	font-size: 0.875rem;
}

.iphr-staff-portal-app .iphr-mt {
	margin-top: 1rem;
}

.iphr-staff-portal-app .iphr-anchor {
	color: var(--iphr-primary);
	text-decoration: none;
}

.iphr-staff-portal-app .iphr-anchor:hover {
	text-decoration: underline;
}

/* ── Actions (class only — no bare button selector) ─────────── */
.iphr-staff-portal-app .iphr-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--iphr-text);
	background: var(--iphr-surface);
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius-sm);
	text-decoration: none;
	cursor: pointer;
	max-width: 100%;
	width: auto;
	height: auto;
	min-height: 0;
}

.iphr-staff-portal-app .iphr-action-primary {
	background: var(--iphr-primary);
	border-color: var(--iphr-primary);
	color: #fff;
}

.iphr-staff-portal-app .iphr-action-outline {
	background: transparent;
	color: var(--iphr-primary);
	border-color: var(--iphr-primary);
}

.iphr-staff-portal-app .iphr-action-secondary {
	background: #f1f5f9;
}

.iphr-staff-portal-app .iphr-action-success {
	background: var(--iphr-success);
	border-color: var(--iphr-success);
	color: #fff;
}

.iphr-staff-portal-app .iphr-action-danger {
	background: var(--iphr-danger);
	border-color: var(--iphr-danger);
	color: #fff;
}

.iphr-staff-portal-app .iphr-action-sm {
	padding: 0.3rem 0.65rem;
	font-size: 0.8rem;
}

.iphr-staff-portal-app .iphr-action-lg {
	padding: 0.65rem 1.25rem;
	font-size: 0.95rem;
}

.iphr-staff-portal-app .iphr-action-block {
	width: 100%;
}

/* ── Status tags (safe — no badge/pill/active substrings) ───── */
.iphr-staff-portal-app .iphr-tag {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 4px;
	background: #F3F4F6;
	color: var(--iphr-text);
	max-width: none;
	width: auto;
	height: auto;
}

.iphr-staff-portal-app .iphr-tag-warn {
	background: #FEF3C7;
	color: #92400E;
}

.iphr-staff-portal-app .iphr-tag-ok {
	background: #D1FAE5;
	color: #065F46;
}

.iphr-staff-portal-app .iphr-tag-err {
	background: #FEE2E2;
	color: #991B1B;
}

.iphr-staff-portal-app .iphr-tag-info {
	background: #DBEAFE;
	color: #1E40AF;
}

.iphr-staff-portal-app .iphr-tag-neutral {
	background: #F3F4F6;
	color: var(--iphr-text);
}

/* Legacy pills (phase 7 full dashboard only — avoid on live staff pages) */
.iphr-staff-portal-app .iphr-pill {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 4px;
	background: #e2e8f0;
	color: var(--iphr-text);
	max-width: none;
	width: auto;
	height: auto;
}

.iphr-staff-portal-app .iphr-pill-pending,
.iphr-staff-portal-app .iphr-pill-pending_review {
	background: #fef3c7;
	color: #92400e;
}

.iphr-staff-portal-app .iphr-pill-approved {
	background: #d1fae5;
	color: #065f46;
}

.iphr-staff-portal-app .iphr-pill-rejected {
	background: #fee2e2;
	color: #991b1b;
}

.iphr-staff-portal-app .iphr-pill-working {
	background: #dbeafe;
	color: #1e40af;
}

.iphr-staff-portal-app .iphr-pill-emp-on {
	background: #d1fae5;
	color: #065f46;
}

.iphr-staff-portal-app .iphr-pill-emp-leave {
	background: #dbeafe;
	color: #1e40af;
}

.iphr-staff-portal-app .iphr-pill-emp-off {
	background: #fee2e2;
	color: #991b1b;
}

.iphr-staff-portal-app .iphr-pill-emp-trial {
	background: #fef3c7;
	color: #92400e;
}

.iphr-staff-portal-app .iphr-pill-emp-neutral {
	background: #e2e8f0;
	color: var(--iphr-text);
}

/* ── Forms / tables ─────────────────────────────────────────── */
.iphr-staff-portal-app .iphr-fields,
.iphr-staff-portal-app .iphr-form {
	margin: 0;
}

.iphr-staff-portal-app .iphr-fields-grid,
.iphr-staff-portal-app .iphr-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (max-width: 640px) {
	.iphr-staff-portal-app .iphr-fields-grid,
	.iphr-staff-portal-app .iphr-form-grid {
		grid-template-columns: 1fr;
	}
}

.iphr-staff-portal-app .iphr-field {
	display: block;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-field-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	margin-bottom: 0.35rem;
	color: var(--iphr-muted);
}

.iphr-staff-portal-app .iphr-input,
.iphr-staff-portal-app .iphr-select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius-sm);
	background: var(--iphr-surface);
	color: var(--iphr-text);
	min-height: 2.5rem;
}

.iphr-staff-portal-app .iphr-checkbox {
	width: 1rem;
	height: 1rem;
	max-width: 1rem;
	max-height: 1rem;
}

.iphr-staff-portal-app .iphr-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-field-cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-sheet {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.iphr-staff-portal-app .iphr-sheet th,
.iphr-staff-portal-app .iphr-sheet td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--iphr-border);
	text-align: left;
	vertical-align: top;
}

.iphr-staff-portal-app .iphr-sheet th {
	font-size: 0.75rem;
	color: var(--iphr-muted);
	text-transform: uppercase;
}

.iphr-staff-portal-app .iphr-records {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-record {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--iphr-border);
}

.iphr-staff-portal-app .iphr-record:last-child {
	border-bottom: none;
}

.iphr-staff-portal-app .iphr-record-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.iphr-staff-portal-app .iphr-records-compact .iphr-record {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.iphr-staff-portal-app .iphr-notice {
	padding: 0.75rem 1rem;
	border-radius: var(--iphr-radius-sm);
	margin-bottom: 1rem;
	border: 1px solid transparent;
}

.iphr-staff-portal-app .iphr-notice-ok,
.iphr-staff-portal-app .iphr-flash-success {
	background: #ecfdf5;
	color: #065f46;
}

.iphr-staff-portal-app .iphr-notice-err,
.iphr-staff-portal-app .iphr-flash-error {
	background: #fef2f2;
	color: #991b1b;
}

.iphr-staff-portal-app .iphr-notice-warn {
	background: #fffbeb;
	color: #92400e;
}

.iphr-staff-portal-app .iphr-notice-text {
	margin: 0;
}

/* ── Login ────────────────────────────────────────────────────── */
.iphr-staff-portal-app .iphr-login-panel {
	max-width: 400px;
	margin: 0 auto;
	padding: 2rem;
	background: var(--iphr-surface);
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius);
}

.iphr-staff-portal-app .iphr-login-brand {
	text-align: center;
	margin-bottom: 1.5rem;
}

.iphr-staff-portal-app .iphr-brand-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	max-width: 2.25rem;
	max-height: 2.25rem;
	border-radius: var(--iphr-radius-sm);
	background: var(--iphr-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.iphr-staff-portal-app .iphr-brand-logo-lg {
	width: 3rem;
	height: 3rem;
	max-width: 3rem;
	max-height: 3rem;
	margin: 0 auto 0.75rem;
}

.iphr-staff-portal-app .iphr-login-title {
	font-size: 1.25rem;
	font-weight: 700;
}

/* ── Profile completion strip ───────────────────────────────── */
.iphr-staff-portal-app .iphr-profile-completion-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.iphr-staff-portal-app .iphr-profile-pct {
	font-size: 1.25rem;
}

/* ── Phase 3A: four safe classes only (iphr-dboard, welcome-strip, heading, muted) ─ */
.iphr-staff-portal-app .iphr-dboard {
	display: block;
	width: 100%;
	max-width: 100%;
}

.iphr-staff-portal-app .iphr-welcome-strip {
	background: var(--iphr-surface);
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius);
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-welcome-heading {
	margin: 0 0 0.5rem;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--iphr-text);
}

.iphr-staff-portal-app .iphr-muted {
	color: var(--iphr-muted);
	font-size: 0.875rem;
	margin: 0 0 0.35rem;
}

/* ── Phase 3B: one static widget (iphr-slice — not card/grid/panel) ─ */
.iphr-staff-portal-app .iphr-slice {
	background: var(--iphr-surface);
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius);
	padding: 1.25rem;
	max-width: 360px;
	box-shadow: var(--iphr-shadow);
}

.iphr-staff-portal-app .iphr-slice + .iphr-slice {
	margin-top: 1rem;
}

.iphr-staff-portal-app .iphr-slice-title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--iphr-text);
}

.iphr-staff-portal-app .iphr-slice-lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-slice-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--iphr-border);
	font-size: 0.875rem;
}

.iphr-staff-portal-app .iphr-slice-line:last-child {
	border-bottom: none;
}

.iphr-staff-portal-app .iphr-slice-label {
	color: var(--iphr-text);
	font-weight: 500;
}

.iphr-staff-portal-app .iphr-slice-value {
	color: var(--iphr-muted);
	white-space: nowrap;
}

/* ── Full dashboard widgets (phase 7+ only) ───────────────────── */
.iphr-staff-portal-app .iphr-home-cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-home-widget-wide {
	grid-column: 1 / -1;
}

.iphr-staff-portal-app .iphr-home-widget-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.iphr-staff-portal-app .iphr-home-stat-big {
	font-size: 1.5rem;
	font-weight: 700;
}

.iphr-staff-portal-app .iphr-home-photo {
	width: 56px;
	height: 56px;
	max-width: 56px;
	max-height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.iphr-staff-portal-app .iphr-home-photo-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	max-width: 56px;
	max-height: 56px;
	border-radius: 50%;
	background: #e2e8f0;
}

.iphr-staff-portal-app .iphr-home-welcome {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-home-welcome-body {
	display: flex;
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-home-welcome-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-home-anchor {
	font-size: 0.85rem;
}

.iphr-staff-portal-app .iphr-home-mini-list,
.iphr-staff-portal-app .iphr-home-list,
.iphr-staff-portal-app .iphr-home-announce,
.iphr-staff-portal-app .iphr-home-activity {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-home-activity-item {
	display: flex;
	gap: 0.5rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--iphr-border);
}

.iphr-staff-portal-app .iphr-home-mini-list-item,
.iphr-staff-portal-app .iphr-home-list-item,
.iphr-staff-portal-app .iphr-home-announce-item {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--iphr-border);
}

/* ── Clock / calendar section blocks ────────────────────────── */
.iphr-staff-portal-app .iphr-clock-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.iphr-staff-portal-app .iphr-cal-toolbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-cal-grid,
.iphr-staff-portal-app .iphr-cal-grid-public {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.iphr-staff-portal-app .iphr-cal-day {
	min-height: 72px;
	border: 1px solid var(--iphr-border);
	border-radius: 4px;
	padding: 4px;
	font-size: 0.75rem;
	background: var(--iphr-surface);
}

.iphr-staff-portal-app .iphr-cal-day.iphr-cal-today {
	border-color: var(--iphr-primary);
	background: #eff6ff;
}

.iphr-staff-portal-app .iphr-cal-day.iphr-cal-empty {
	background: #f8fafc;
	border-color: transparent;
}

.iphr-staff-portal-app .iphr-cal-ev {
	display: block;
	font-size: 0.65rem;
	line-height: 1.25;
	padding: 2px 4px;
	margin-top: 2px;
	border-radius: 3px;
	color: #1f2937;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.08);
	word-break: break-word;
}

.iphr-staff-portal-app .iphr-cal-ev:focus {
	outline: 2px solid var(--iphr-primary);
	outline-offset: 1px;
}

.iphr-staff-portal-app .iphr-cal-ev-annual-leave,
.iphr-staff-portal-app .iphr-cal-ev-leave-pending {
	background: #fef08a;
}

.iphr-staff-portal-app .iphr-cal-ev-sick-leave {
	background: #fed7aa;
}

.iphr-staff-portal-app .iphr-cal-ev-meeting,
.iphr-staff-portal-app .iphr-cal-ev-leave-approved {
	background: #bbf7d0;
}

.iphr-staff-portal-app .iphr-cal-ev-holiday {
	background: #bfdbfe;
}

.iphr-staff-portal-app .iphr-cal-ev-task-deadline {
	background: #e9d5ff;
}

.iphr-staff-portal-app .iphr-cal-ev-leave-declined {
	background: #fecaca;
}

.iphr-staff-portal-app .iphr-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: #f8fafc;
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius-sm);
}

.iphr-staff-portal-app .iphr-cal-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	color: var(--iphr-muted);
}

.iphr-staff-portal-app .iphr-cal-legend-swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.iphr-staff-portal-app .iphr-cal-detail {
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius-sm);
	background: #f8fafc;
}

.iphr-staff-portal-app .iphr-cal-detail[hidden] {
	display: none;
}

.iphr-staff-portal-app .iphr-portal-denied,
.iphr-staff-portal-app .iphr-portal-error {
	max-width: 560px;
	margin: 1rem auto;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.iphr-staff-portal-app .iphr-shell {
		flex-direction: column;
	}

	.iphr-staff-portal-app .iphr-aside {
		display: none;
	}

	.iphr-staff-portal-app.iphr-nav-open .iphr-aside {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(280px, 88vw);
		max-width: min(280px, 88vw);
		z-index: 100001;
		box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
	}

	.iphr-staff-portal-app .iphr-nav-toggle {
		display: inline-flex;
	}

	.iphr-staff-portal-app .iphr-field-cols,
	.iphr-staff-portal-app .iphr-home-cols,
	.iphr-staff-portal-app .iphr-cols {
		grid-template-columns: 1fr;
	}
}

/* ── Section helpers (documents, clock) ───────────────────────── */
.iphr-staff-portal-app .iphr-field-wide {
	grid-column: 1 / -1;
}

.iphr-staff-portal-app .iphr-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-doc-item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--iphr-border);
}

.iphr-staff-portal-app .iphr-doc-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.iphr-staff-portal-app .iphr-doc-item-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.iphr-staff-portal-app .iphr-doc-preview-wrap {
	margin: 0.75rem 0;
	max-width: 100%;
}

.iphr-staff-portal-app .iphr-doc-preview-img {
	display: block;
	max-width: 220px;
	max-height: 160px;
	width: auto;
	height: auto;
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius-sm);
	object-fit: contain;
	background: var(--iphr-bg);
}

.iphr-staff-portal-app .iphr-doc-preview-frame {
	display: block;
	width: 100%;
	max-width: 480px;
	height: 280px;
	border: 1px solid var(--iphr-border);
	border-radius: var(--iphr-radius-sm);
	background: var(--iphr-bg);
}

.iphr-staff-portal-app .iphr-doc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

.iphr-staff-portal-app .iphr-clock-form {
	margin: 0;
	flex: 1;
	min-width: min(100%, 220px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.35rem;
}

/* ── Clock page (v1.13.37) ─────────────────────────────────────── */
.iphr-staff-portal-app .iphr-clock-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-clock-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 50%, #ffffff 100%);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.1);
}

.iphr-staff-portal-app .iphr-clock-hero-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-clock-hero-status-label {
	margin: 0.75rem 0 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-clock-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-clock-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.iphr-staff-portal-app .iphr-clock-status-in {
	background: #dcfce7;
	color: #166534;
}

.iphr-staff-portal-app .iphr-clock-status-out {
	background: #f1f5f9;
	color: #475569;
}

.iphr-staff-portal-app .iphr-clock-hero-sub {
	margin: 0.5rem 0 0;
}

.iphr-staff-portal-app .iphr-clock-hero-live {
	flex: 1;
	min-width: 240px;
	max-width: 360px;
	display: grid;
	gap: 0.65rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-clock-live-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
}

.iphr-staff-portal-app .iphr-clock-live-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.iphr-staff-portal-app .iphr-clock-live-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #0f172a;
	text-align: right;
}

.iphr-staff-portal-app .iphr-clock-live-time,
.iphr-staff-portal-app .iphr-clock-session-timer {
	font-variant-numeric: tabular-nums;
	color: #1d4ed8;
}

.iphr-staff-portal-app .iphr-clock-session-live {
	padding-top: 0.5rem;
	margin-top: 0.25rem;
	border-top: 1px dashed #e2e8f0;
}

.iphr-staff-portal-app .iphr-clock-actions-panel {
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-clock-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-clock-btn {
	width: 100%;
	min-height: 3.25rem;
	font-size: 1.0625rem;
	font-weight: 700;
	border-radius: 12px;
}

.iphr-staff-portal-app .iphr-clock-btn-primary {
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.iphr-staff-portal-app .iphr-clock-btn-secondary {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

.iphr-staff-portal-app .iphr-clock-btn-hint {
	font-size: 0.75rem;
	color: #94a3b8;
	text-align: center;
}

.iphr-staff-portal-app .iphr-clock-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.75rem;
}

.iphr-staff-portal-app .iphr-clock-stat-card {
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-clock-stat-card-accent {
	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
	border-color: #bfdbfe;
}

.iphr-staff-portal-app .iphr-clock-stat-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 0.35rem;
}

.iphr-staff-portal-app .iphr-clock-stat-value {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-clock-stat-value-sm {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
}

.iphr-staff-portal-app .iphr-clock-timeline-panel,
.iphr-staff-portal-app .iphr-clock-history-panel {
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-clock-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-clock-timeline-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid #f1f5f9;
}

.iphr-staff-portal-app .iphr-clock-timeline-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.iphr-staff-portal-app .iphr-clock-timeline-dot {
	width: 10px;
	height: 10px;
	margin-top: 0.45rem;
	border-radius: 50%;
	background: #3b82f6;
	flex-shrink: 0;
}

.iphr-staff-portal-app .iphr-clock-timeline-body {
	flex: 1;
}

.iphr-staff-portal-app .iphr-clock-timeline-text {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: #475569;
}

.iphr-staff-portal-app .iphr-clock-history-wrap {
	overflow-x: auto;
	margin-top: 0.5rem;
}

.iphr-staff-portal-app .iphr-clock-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.iphr-staff-portal-app .iphr-clock-history-table th {
	text-align: left;
	padding: 0.65rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
	border-bottom: 2px solid #e2e8f0;
	background: #f8fafc;
}

.iphr-staff-portal-app .iphr-clock-history-table td {
	padding: 0.75rem;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}

.iphr-staff-portal-app .iphr-clock-date-cell {
	background: #fafafa;
	font-weight: 600;
}

.iphr-staff-portal-app .iphr-clock-row-open {
	background: #f0fdf4;
}

.iphr-staff-portal-app .iphr-clock-duration {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.8125rem;
	background: #f1f5f9;
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
}

.iphr-staff-portal-app .iphr-clock-badge {
	display: inline-flex;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.iphr-staff-portal-app .iphr-clock-badge-in {
	background: #dcfce7;
	color: #166534;
}

.iphr-staff-portal-app .iphr-clock-badge-out {
	background: #ffedd5;
	color: #9a3412;
}

.iphr-staff-portal-app .iphr-clock-badge-open {
	background: #dbeafe;
	color: #1e40af;
}

.iphr-staff-portal-app .iphr-clock-badge-done {
	background: #f1f5f9;
	color: #475569;
}

/* Payslip breakdown (staff portal) */
.iphr-staff-portal-app .iphr-payslip-card {
	border: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-payslip-breakdown-title {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--iphr-muted, #64748b);
	margin: 1rem 0 0.5rem;
}

.iphr-staff-portal-app .iphr-payslip-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.iphr-staff-portal-app .iphr-payslip-table td {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--iphr-border, #f1f5f9);
}

.iphr-staff-portal-app .iphr-payslip-amt {
	text-align: right;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-payslip-deduct {
	color: #b45309;
}

.iphr-staff-portal-app .iphr-payslip-total td {
	font-weight: 600;
	border-top: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-payslip-net td {
	font-size: 1rem;
	border-top: 2px solid var(--iphr-text, #1e293b);
	padding-top: 0.5rem;
}

.iphr-staff-portal-app .iphr-payslip-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
}

.iphr-staff-portal-app .iphr-field-inline {
	flex: 0 0 auto;
	min-width: 140px;
}

.iphr-staff-portal-app .iphr-grow {
	flex: 1 1 180px;
}

.iphr-staff-portal-app .iphr-payslip-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Staff profile / onboarding (scoped — never leak to theme) */
.iphr-staff-portal-app .iphr-staff-editor--premium .iphr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--iphr-border);
	padding-bottom: 0.5rem;
}
.iphr-staff-portal-app .iphr-staff-editor--premium .iphr-tab {
	padding: 0.5rem 1rem;
	border-radius: 8px 8px 0 0;
	font-weight: 500;
	text-decoration: none;
	color: var(--iphr-muted);
}
.iphr-staff-portal-app .iphr-staff-editor--premium .iphr-tab.is-active {
	background: var(--iphr-surface);
	color: var(--iphr-primary);
	box-shadow: 0 -2px 0 var(--iphr-primary) inset;
}
.iphr-staff-portal-app .iphr-staff-editor--premium .iphr-tab-panel {
	padding-top: 0.5rem;
}
.iphr-staff-portal-app .iphr-staff-editor--premium .iphr-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}
.iphr-staff-portal-app .iphr-staff-editor--premium .iphr-field-full {
	grid-column: 1 / -1;
}
.iphr-staff-portal-app .iphr-onboarding .iphr-upload-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}
.iphr-staff-portal-app .iphr-onboarding .iphr-upload-panel {
	border: 1px dashed var(--iphr-border);
	border-radius: 10px;
	padding: 1rem;
	background: var(--iphr-bg);
}
.iphr-staff-portal-app .iphr-onboarding .iphr-upload-panel--required {
	border-color: var(--iphr-primary);
}

.iphr-staff-portal-app .iphr-list {
	margin: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.iphr-staff-portal-app .iphr-dl {
	display: grid;
	grid-template-columns: minmax(8rem, 35%) 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}
.iphr-staff-portal-app .iphr-dl dt {
	margin: 0;
	font-weight: 600;
	color: var(--iphr-muted);
}
.iphr-staff-portal-app .iphr-dl dd {
	margin: 0;
}
.iphr-staff-portal-app .iphr-topstrip-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--iphr-border, #e2e8f0);
}
.iphr-staff-portal-app .iphr-topstrip-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--iphr-accent, #2563eb);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
}
.iphr-staff-portal-app .iphr-portal-banner {
	margin-bottom: 1rem;
	border-radius: 10px;
}

.iphr-staff-portal-app .iphr-notifications { position: relative; margin-right: 8px; flex-shrink: 0; }
.iphr-staff-portal-app .iphr-notifications-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: var(--iphr-radius-sm, 8px);
	cursor: pointer;
	color: #334155;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.iphr-staff-portal-app .iphr-notifications-toggle:hover {
	background: #f8fafc;
	color: #7c3aed;
	border-color: #c4b5fd;
}
.iphr-staff-portal-app .iphr-notifications-svg { display: block; }
.iphr-staff-portal-app .iphr-notifications-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	background: #e11d48;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 6px;
	min-width: 18px;
	text-align: center;
	line-height: 1.2;
	border: 2px solid #fff;
}
.iphr-staff-portal-app .iphr-notifications-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	width: min(340px, calc(100vw - 2rem));
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
	z-index: 100;
	max-height: 380px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.iphr-staff-portal-app .iphr-notifications-panel[hidden] { display: none !important; }
.iphr-staff-portal-app .iphr-notifications-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid #e2e8f0;
}
.iphr-staff-portal-app .iphr-notifications-count {
	font-size: 12px;
	color: #7c3aed;
	font-weight: 600;
}
.iphr-staff-portal-app .iphr-notifications-list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	overflow-y: auto;
	flex: 1;
}
.iphr-staff-portal-app .iphr-notifications-item {
	padding: 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}
.iphr-staff-portal-app .iphr-notifications-item.is-unread {
	background: #f5f3ff;
}
.iphr-staff-portal-app .iphr-notifications-link {
	display: block;
	padding: 10px 14px;
	color: inherit;
	text-decoration: none;
}
.iphr-staff-portal-app .iphr-notifications-link:hover {
	background: #f8fafc;
}
.iphr-staff-portal-app .iphr-notifications-item p {
	margin: 4px 0 0;
	color: #64748b;
}
.iphr-staff-portal-app .iphr-notifications-empty {
	padding: 16px 14px;
}
.iphr-staff-portal-app .iphr-notifications-foot {
	padding: 10px 14px;
	border-top: 1px solid #e2e8f0;
	text-align: center;
}
.iphr-staff-portal-app .iphr-notifications-view-all {
	font-size: 13px;
	font-weight: 600;
	color: #7c3aed;
	text-decoration: none;
}
.iphr-staff-portal-app .iphr-nav-badge {
	margin-left: auto;
	background: #e11d48;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 7px;
	min-width: 20px;
	text-align: center;
}
.iphr-staff-portal-app .iphr-nav-item {
	display: flex;
	align-items: center;
	gap: 8px;
}
.iphr-staff-portal-app .iphr-topstrip-actions { display: none; }
.iphr-staff-portal-app .iphr-balance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

@media print {
	.iphr-staff-portal-app .iphr-sidebar,
	.iphr-staff-portal-app .iphr-topbar,
	.iphr-staff-portal-app .iphr-payslip-filters,
	.iphr-staff-portal-app .iphr-payslip-actions {
		display: none !important;
	}
	.iphr-staff-portal-app .iphr-payslip-card {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* Standalone full-screen route (no theme wrapper) */
body.iphr-standalone-body,
body.ipsp-standalone-portal {
	margin: 0;
	padding: 0;
	background: #f8fafc;
	min-height: 100vh;
}

body.iphr-standalone-body .iphr-staff-portal-app,
body.ipsp-standalone-portal .iphr-staff-portal-app {
	margin: 0;
	min-height: 100vh;
	border: none;
	border-radius: 0;
	max-width: none;
}

body.iphr-standalone-body .iphr-staff-portal-app.iphr-portal-login,
body.ipsp-standalone-portal .iphr-staff-portal-app.iphr-portal-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

/* Demo-ready empty states & profile */
.iphr-staff-portal-app .iphr-empty-state {
	padding: 1.5rem 1.25rem;
	text-align: center;
	background: var(--iphr-surface, #f8fafc);
	border: 1px dashed var(--iphr-border, #e2e8f0);
	border-radius: var(--iphr-radius, 12px);
}
.iphr-staff-portal-app .iphr-empty-title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--iphr-text, #0f172a);
}
.iphr-staff-portal-app .iphr-profile-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.iphr-staff-portal-app .iphr-profile-photo {
	width: 96px;
	height: 96px;
	border-radius: 12px;
	object-fit: cover;
	border: 1px solid var(--iphr-border, #e2e8f0);
}
.iphr-staff-portal-app .iphr-profile-photo--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 700;
	background: var(--iphr-accent-soft, #e0f2fe);
	color: var(--iphr-accent, #0284c7);
}
.iphr-staff-portal-app .iphr-dl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.5rem 1.25rem;
}
.iphr-staff-portal-app .iphr-record--unread {
	border-left: 3px solid var(--iphr-accent, #0284c7);
	padding-left: 0.75rem;
}
.iphr-staff-portal-app .iphr-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.iphr-staff-portal-app .iphr-home-cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

/* ── Leave page (staff portal only) ───────────────────────────── */
.iphr-staff-portal-app .iphr-leave-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-leave-notice {
	padding: 1rem 1.25rem;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	border: 1px solid transparent;
}

.iphr-staff-portal-app .iphr-leave-notice-success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.iphr-staff-portal-app .iphr-leave-notice-error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.iphr-staff-portal-app .iphr-leave-layout {
	display: grid;
	grid-template-columns: minmax(320px, 1.05fr) minmax(280px, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.iphr-staff-portal-app .iphr-leave-form-panel {
	min-height: 100%;
}

.iphr-staff-portal-app .iphr-leave-form-grid {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.iphr-staff-portal-app .iphr-leave-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-leave-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--iphr-text, #0f172a);
}

.iphr-staff-portal-app .iphr-leave-hint {
	font-size: 0.75rem;
	color: var(--iphr-muted);
}

.iphr-staff-portal-app .iphr-leave-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.iphr-staff-portal-app .iphr-leave-form-actions {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-leave-form-actions .iphr-leave-submit {
	min-width: 10rem;
}

.iphr-staff-portal-app .iphr-leave-history-panel {
	min-height: 100%;
}

.iphr-staff-portal-app .iphr-leave-history-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 10px;
	background: #fff;
}

.iphr-staff-portal-app .iphr-leave-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
	min-width: 720px;
}

.iphr-staff-portal-app .iphr-leave-history-table th,
.iphr-staff-portal-app .iphr-leave-history-table td {
	padding: 0.75rem 0.875rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-leave-history-table th {
	background: #f8fafc;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-leave-history-table tbody tr:last-child td {
	border-bottom: 0;
}

.iphr-staff-portal-app .iphr-leave-history-table td {
	color: #334155;
	line-height: 1.45;
}

.iphr-staff-portal-app .iphr-leave-badge {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-leave-badge-pending {
	background: #fef9c3;
	color: #854d0e;
	border: 1px solid #fde047;
}

.iphr-staff-portal-app .iphr-leave-badge-approved {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #86efac;
}

.iphr-staff-portal-app .iphr-leave-badge-declined {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

.iphr-staff-portal-app .iphr-leave-badge-neutral {
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-leave-history-cards {
	display: none;
	flex-direction: column;
	gap: 0.875rem;
}

.iphr-staff-portal-app .iphr-leave-history-card {
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 10px;
	padding: 1rem 1.125rem;
	background: #fff;
}

.iphr-staff-portal-app .iphr-leave-history-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.iphr-staff-portal-app .iphr-leave-history-card-meta {
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-leave-history-card-meta > div {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 0.5rem;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-leave-history-card-meta dt {
	margin: 0;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-leave-history-card-meta dd {
	margin: 0;
	color: #334155;
}

@media (max-width: 960px) {
	.iphr-staff-portal-app .iphr-leave-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.iphr-staff-portal-app .iphr-leave-history-table-wrap {
		display: none;
	}

	.iphr-staff-portal-app .iphr-leave-history-cards {
		display: flex;
	}
}

/* ── End of Day Report page (v1.13.38) ─────────────────────────── */
.iphr-staff-portal-app .iphr-progress-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-progress-notice {
	padding: 1rem 1.25rem;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	border: 1px solid transparent;
}

.iphr-staff-portal-app .iphr-progress-notice-success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.iphr-staff-portal-app .iphr-progress-notice-error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.iphr-staff-portal-app .iphr-progress-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 50%, #ffffff 100%);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.1);
}

.iphr-staff-portal-app .iphr-progress-hero-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-progress-hero-desc {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: #475569;
	max-width: 36rem;
	line-height: 1.5;
}

.iphr-staff-portal-app .iphr-progress-hero-meta {
	flex: 1;
	min-width: 220px;
	max-width: 320px;
	display: grid;
	gap: 0.85rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-progress-hero-meta-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.iphr-staff-portal-app .iphr-progress-meta-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-progress-meta-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-progress-today-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	width: fit-content;
}

.iphr-staff-portal-app .iphr-progress-today-none {
	background: #f1f5f9;
	color: #475569;
}

.iphr-staff-portal-app .iphr-progress-today-submitted {
	background: #dbeafe;
	color: #1e40af;
}

.iphr-staff-portal-app .iphr-progress-today-reviewed {
	background: #dcfce7;
	color: #166534;
}

.iphr-staff-portal-app .iphr-progress-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}

.iphr-staff-portal-app .iphr-progress-stat-card {
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-progress-stat-card-accent {
	background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
	border-color: #fde68a;
}

.iphr-staff-portal-app .iphr-progress-stat-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 0.35rem;
}

.iphr-staff-portal-app .iphr-progress-stat-value {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-progress-stat-value-sm {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
}

.iphr-staff-portal-app .iphr-progress-layout {
	display: grid;
	grid-template-columns: minmax(340px, 1.15fr) minmax(280px, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.iphr-staff-portal-app .iphr-progress-form-panel,
.iphr-staff-portal-app .iphr-progress-history-panel {
	padding: 1.35rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-progress-form {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	max-width: 100%;
}

.iphr-staff-portal-app .iphr-progress-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-progress-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-progress-hint {
	font-size: 0.75rem;
	color: #64748b;
	line-height: 1.4;
}

.iphr-staff-portal-app .iphr-progress-form .iphr-input,
.iphr-staff-portal-app .iphr-progress-form .iphr-select {
	width: 100%;
}

.iphr-staff-portal-app .iphr-progress-form-actions {
	margin-top: 0.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-progress-submit {
	min-width: 12rem;
	min-height: 2.75rem;
	font-weight: 700;
}

.iphr-staff-portal-app .iphr-progress-today-view {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-progress-today-view-lead {
	margin: 0;
	font-weight: 600;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-progress-today-field strong {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-progress-today-field p {
	margin: 0;
	white-space: pre-wrap;
	color: #334155;
	line-height: 1.55;
}

.iphr-staff-portal-app .iphr-progress-today-hint {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
}

.iphr-staff-portal-app .iphr-progress-empty {
	text-align: center;
	padding: 2rem 1rem;
}

.iphr-staff-portal-app .iphr-progress-empty .iphr-portal-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	font-size: 1.35rem;
}

.iphr-staff-portal-app .iphr-progress-empty-title {
	margin: 0 0 0.35rem;
	font-weight: 600;
	color: #334155;
}

.iphr-staff-portal-app .iphr-progress-report-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	max-height: 70vh;
	overflow-y: auto;
}

.iphr-staff-portal-app .iphr-progress-report-card {
	padding: 0;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
}

.iphr-staff-portal-app .iphr-progress-report-card.is-active {
	border-color: #818cf8;
	box-shadow: 0 0 0 1px #818cf8;
}

.iphr-staff-portal-app .iphr-progress-report-card-link {
	display: block;
	padding: 1rem 1.15rem;
	color: inherit;
	text-decoration: none;
}

.iphr-staff-portal-app .iphr-progress-report-card-link:hover {
	background: #f1f5f9;
}

.iphr-staff-portal-app .iphr-progress-report-card-meta {
	padding: 0 1.15rem 1rem;
}

.iphr-staff-portal-app .iphr-progress-report-ref {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #4f46e5;
	margin-right: 0.5rem;
}

.iphr-staff-portal-app .iphr-progress-today-view-lead .iphr-progress-report-ref {
	margin-left: 0.5rem;
}

.iphr-staff-portal-app .iphr-progress-today-open {
	margin: 0 0 0.75rem;
}

.iphr-staff-portal-app .iphr-progress-report-detail {
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-progress-report-detail-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-progress-report-detail-kicker a {
	color: #4f46e5;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}

.iphr-staff-portal-app .iphr-progress-report-detail-ref {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-progress-report-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.iphr-staff-portal-app .iphr-progress-report-date {
	font-size: 0.9375rem;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-progress-badge {
	display: inline-flex;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.iphr-staff-portal-app .iphr-progress-badge-reviewed {
	background: #dcfce7;
	color: #166534;
}

.iphr-staff-portal-app .iphr-progress-badge-pending {
	background: #fef9c3;
	color: #854d0e;
}

.iphr-staff-portal-app .iphr-progress-report-summary {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: #334155;
	line-height: 1.5;
}

.iphr-staff-portal-app .iphr-progress-report-meta {
	margin: 0;
	font-size: 0.8125rem;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-progress-admin-comment {
	margin-top: 0.65rem;
	padding: 0.65rem 0.85rem;
	background: #fff;
	border-left: 3px solid #6366f1;
	border-radius: 0 8px 8px 0;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-progress-admin-comment p {
	margin: 0.35rem 0 0;
	color: #475569;
}

.iphr-staff-portal-app .iphr-progress-report-actions {
	margin: 0.65rem 0 0;
}

@media (max-width: 900px) {
	.iphr-staff-portal-app .iphr-progress-layout {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-progress-report-list {
		max-height: none;
	}
}

/* ── Meetings page (v1.13.39) ──────────────────────────────────── */
.iphr-staff-portal-app .iphr-meetings-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-meetings-hero-with-action {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-meetings-hero-actions {
	flex-shrink: 0;
}

.iphr-staff-portal-app .iphr-meeting-create-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-meeting-cta-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.iphr-staff-portal-app .iphr-meeting-create-panel {
	padding: 1.25rem 1.5rem;
}

.iphr-staff-portal-app .iphr-meeting-create-form .iphr-field {
	margin-bottom: 0.85rem;
}

.iphr-staff-portal-app .iphr-staff-attendee-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px 14px;
	max-height: 200px;
	overflow-y: auto;
	padding: 12px 14px;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
}
.iphr-staff-portal-app .iphr-staff-attendee-item { margin: 0; font-size: 14px; }
.iphr-staff-portal-app .iphr-meeting-staff-select {
	min-height: 120px;
	width: 100%;
}

.iphr-staff-portal-app .iphr-meeting-slots-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

.iphr-staff-portal-app .ipsp-staff-meeting-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.iphr-staff-portal-app .ipsp-staff-slot-btn.is-selected {
	background: var(--iphr-primary);
	color: #fff;
	border-color: var(--iphr-primary);
}

.iphr-staff-portal-app .iphr-meeting-create-submit {
	width: 100%;
	margin-top: 0.5rem;
}

.iphr-staff-portal-app .iphr-meetings-notice {
	padding: 1rem 1.25rem;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	border: 1px solid transparent;
}

.iphr-staff-portal-app .iphr-meetings-notice-success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.iphr-staff-portal-app .iphr-meetings-notice-error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.iphr-staff-portal-app .iphr-meetings-hero {
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #f5f3ff 0%, #f8fafc 50%, #ffffff 100%);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(139, 92, 246, 0.1);
}

.iphr-staff-portal-app .iphr-meetings-hero-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-meetings-hero-desc {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: #475569;
	max-width: 36rem;
	line-height: 1.5;
}

.iphr-staff-portal-app .iphr-meetings-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.75rem;
}

.iphr-staff-portal-app .iphr-meetings-stat-card {
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-meetings-stat-card-ok {
	background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
	border-color: #bbf7d0;
}

.iphr-staff-portal-app .iphr-meetings-stat-card-warn {
	background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
	border-color: #fed7aa;
}

.iphr-staff-portal-app .iphr-meetings-stat-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 0.35rem;
}

.iphr-staff-portal-app .iphr-meetings-stat-value {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-meetings-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-meetings-tab {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	color: #475569;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.iphr-staff-portal-app .iphr-meetings-tab:hover {
	color: #1e40af;
	border-color: #bfdbfe;
	background: #eff6ff;
}

.iphr-staff-portal-app .iphr-meetings-tab.is-active {
	color: #1e40af;
	background: #dbeafe;
	border-color: #93c5fd;
}

.iphr-staff-portal-app .iphr-meetings-empty {
	text-align: center;
	padding: 2.5rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-meetings-empty .iphr-portal-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	font-size: 1.5rem;
}

.iphr-staff-portal-app .iphr-meetings-empty-title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #334155;
}

.iphr-staff-portal-app .iphr-meetings-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-meeting-card {
	padding: 1.35rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-meeting-card-past {
	opacity: 0.92;
	background: #fafafa;
}

.iphr-staff-portal-app .iphr-meeting-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-meeting-card-title {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-meeting-company-badge {
	display: inline-flex;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: #ede9fe;
	color: #5b21b6;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-badge {
	display: inline-flex;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-confirmed {
	background: #dcfce7;
	color: #166534;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-unavailable {
	background: #ffedd5;
	color: #9a3412;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-pending {
	background: #f1f5f9;
	color: #475569;
}

.iphr-staff-portal-app .iphr-meeting-card-meta {
	display: grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: 0.45rem 1rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-meeting-meta-row {
	display: contents;
}

.iphr-staff-portal-app .iphr-meeting-card-meta dt {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-meeting-card-meta dd {
	margin: 0;
	font-size: 0.875rem;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-meeting-link {
	font-weight: 600;
	color: #2563eb;
	text-decoration: none;
}

.iphr-staff-portal-app .iphr-meeting-link:hover {
	text-decoration: underline;
}

.iphr-staff-portal-app .iphr-meeting-description {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #f1f5f9;
	font-size: 0.875rem;
}

.iphr-staff-portal-app .iphr-meeting-description p {
	margin: 0.35rem 0 0;
	color: #475569;
	line-height: 1.5;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-actions {
	margin-top: 1.25rem;
	padding-top: 1.15rem;
	border-top: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-btn {
	min-height: 2.5rem;
	font-weight: 600;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-btn-secondary {
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-meeting-rsvp-btn-secondary:hover {
	background: #e2e8f0;
}

/* ── Payslips page ────────────────────────────────────────────── */
.iphr-staff-portal-app .iphr-payslips-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-payslips-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-payslips-stat-card {
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-payslips-stat-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-payslips-stat-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}

.iphr-staff-portal-app .iphr-payslips-filter-panel,
.iphr-staff-portal-app .iphr-payslips-table-panel {
	padding: 1.25rem 1.5rem;
}

.iphr-staff-portal-app .iphr-payslips-filter-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-payslip-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-payslip-field-wide {
	grid-column: span 2;
}

.iphr-staff-portal-app .iphr-payslip-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #334155;
}

.iphr-staff-portal-app .iphr-payslips-filter-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.iphr-staff-portal-app .iphr-payslips-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 10px;
	background: #fff;
}

.iphr-staff-portal-app .iphr-payslips-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	min-width: 880px;
}

.iphr-staff-portal-app .iphr-payslips-table th,
.iphr-staff-portal-app .iphr-payslips-table td {
	padding: 0.875rem 1rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-payslips-table th {
	background: #f8fafc;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-payslips-table tbody tr:last-child td {
	border-bottom: 0;
}

.iphr-staff-portal-app .iphr-payslips-actions-cell {
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-payslips-actions-cell .iphr-action {
	margin-right: 0.35rem;
}

.iphr-staff-portal-app .iphr-payslip-badge {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

.iphr-staff-portal-app .iphr-payslip-badge-published {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

.iphr-staff-portal-app .iphr-payslip-badge-paid {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #86efac;
}

.iphr-staff-portal-app .iphr-payslip-badge-draft {
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-payslips-cards {
	display: none;
	flex-direction: column;
	gap: 0.875rem;
	margin-top: 0;
}

.iphr-staff-portal-app .iphr-payslips-card {
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 10px;
	padding: 1rem 1.125rem;
	background: #fff;
}

.iphr-staff-portal-app .iphr-payslips-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.iphr-staff-portal-app .iphr-payslips-card-meta {
	margin: 0 0 0.75rem;
	display: grid;
	gap: 0.4rem;
}

.iphr-staff-portal-app .iphr-payslips-card-meta > div {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 0.5rem;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-payslips-card-meta dt {
	margin: 0;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-payslips-card-meta dd {
	margin: 0;
	color: #334155;
}

.iphr-staff-portal-app .iphr-payslips-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ── Salary page (v1.13.36) ─────────────────────────────────────── */
.iphr-staff-portal-app .iphr-salary-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-salary-debug {
	padding: 1rem 1.25rem;
	border: 1px dashed #f59e0b;
	background: #fffbeb;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-salary-debug-title {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #92400e;
}

.iphr-staff-portal-app .iphr-salary-debug-list {
	display: grid;
	grid-template-columns: minmax(10rem, auto) 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-salary-debug-list dt {
	margin: 0;
	font-weight: 600;
	color: #78350f;
}

.iphr-staff-portal-app .iphr-salary-debug-list dd {
	margin: 0;
}

.iphr-staff-portal-app .iphr-salary-debug-tables {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.75rem;
}

.iphr-staff-portal-app .iphr-salary-empty-panel {
	text-align: center;
	padding: 2.5rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-salary-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	font-size: 1.5rem;
}

.iphr-staff-portal-app .iphr-salary-empty-title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #334155;
}

.iphr-staff-portal-app .iphr-salary-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 45%, #ffffff 100%);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.iphr-staff-portal-app .iphr-salary-hero-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-salary-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.iphr-staff-portal-app .iphr-salary-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.iphr-staff-portal-app .iphr-salary-badge-currency {
	background: #dbeafe;
	color: #1d4ed8;
}

.iphr-staff-portal-app .iphr-salary-badge-freq {
	background: #f1f5f9;
	color: #475569;
}

.iphr-staff-portal-app .iphr-salary-hero-amount-wrap {
	text-align: right;
	min-width: 12rem;
}

.iphr-staff-portal-app .iphr-salary-hero-amount-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-salary-hero-amount-value {
	display: block;
	font-size: 2.25rem;
	font-weight: 700;
	color: #1e40af;
	line-height: 1.15;
}

.iphr-staff-portal-app .iphr-salary-hero-net-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-salary-bonus-card,
.iphr-staff-portal-app .iphr-salary-bank-card {
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-salary-bonus-card {
	background: linear-gradient(135deg, #fffbeb 0%, #ffffff 70%);
	border: 1px solid #fde68a;
}

.iphr-staff-portal-app .iphr-salary-bank-card {
	background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 70%);
	border: 1px solid #bbf7d0;
}

.iphr-staff-portal-app .iphr-salary-card-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.iphr-staff-portal-app .iphr-salary-card-head .iphr-portal-glyph {
	color: #64748b;
}

.iphr-staff-portal-app .iphr-salary-bonus-amount {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #b45309;
}

.iphr-staff-portal-app .iphr-salary-bonus-notes {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: #334155;
}

.iphr-staff-portal-app .iphr-salary-bank-grid {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) 1fr;
	gap: 0.5rem 1rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-salary-bank-grid dt {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-salary-bank-grid dd {
	margin: 0;
	font-size: 0.9375rem;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-salary-bank-masked {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

.iphr-staff-portal-app .iphr-salary-security-note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background: #f8fafc;
	font-size: 0.8125rem;
	color: #475569;
	line-height: 1.45;
}

.iphr-staff-portal-app .iphr-salary-hero-net-meta {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-salary-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-salary-stat-card {
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.iphr-staff-portal-app .iphr-salary-stat-card-accent {
	border-color: #bfdbfe;
	background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
}

.iphr-staff-portal-app .iphr-salary-stat-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-salary-stat-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-salary-breakdown-panel {
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-salary-breakdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-salary-breakdown-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid #f1f5f9;
}

.iphr-staff-portal-app .iphr-salary-breakdown-row:last-child {
	border-bottom: 0;
}

.iphr-staff-portal-app .iphr-salary-breakdown-label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: #475569;
}

.iphr-staff-portal-app .iphr-salary-breakdown-amount {
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-salary-breakdown-row-net {
	margin-top: 0.25rem;
	padding-top: 1rem;
	border-top: 2px solid #bbf7d0;
	background: linear-gradient(90deg, #f0fdf4 0%, transparent 100%);
	border-radius: 8px;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.iphr-staff-portal-app .iphr-salary-breakdown-row-net .iphr-salary-breakdown-label,
.iphr-staff-portal-app .iphr-salary-breakdown-row-net .iphr-salary-breakdown-amount {
	color: #15803d;
	font-weight: 700;
}

.iphr-staff-portal-app .iphr-salary-payslip-preview {
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-salary-payslip-preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-salary-payslip-preview-body {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-salary-payslip-period,
.iphr-staff-portal-app .iphr-salary-payslip-net {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-salary-history-wrap {
	overflow-x: auto;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 10px;
}

.iphr-staff-portal-app .iphr-salary-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
	min-width: 640px;
}

.iphr-staff-portal-app .iphr-salary-history-table th,
.iphr-staff-portal-app .iphr-salary-history-table td {
	padding: 0.75rem 0.875rem;
	text-align: left;
	border-bottom: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-salary-history-table th {
	background: #f8fafc;
	font-weight: 600;
	color: #475569;
}

.iphr-staff-portal-app .iphr-salary-row-current {
	background: #f0fdf4;
}

@media (max-width: 1024px) {
	.iphr-staff-portal-app .iphr-payslips-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.iphr-staff-portal-app .iphr-payslips-filter-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.iphr-staff-portal-app .iphr-payslip-field-wide {
		grid-column: span 2;
	}
}

@media (max-width: 768px) {
	.iphr-staff-portal-app .iphr-payslips-summary {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-payslips-filter-grid {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-payslip-field-wide {
		grid-column: span 1;
	}

	.iphr-staff-portal-app .iphr-payslips-table-wrap {
		display: none;
	}

	.iphr-staff-portal-app .iphr-payslips-cards {
		display: flex;
	}

	.iphr-staff-portal-app .iphr-salary-hero {
		flex-direction: column;
		align-items: flex-start;
	}

	.iphr-staff-portal-app .iphr-salary-hero-net {
		text-align: left;
		width: 100%;
	}

	.iphr-staff-portal-app .iphr-salary-stats {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Benefits page ────────────────────────────────────────────── */
.iphr-staff-portal-app .iphr-benefits-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-benefits-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-benefits-stat-card {
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-benefits-stat-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-benefits-stat-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-benefits-list-panel {
	padding: 1.25rem 1.5rem;
}

.iphr-staff-portal-app .iphr-benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.iphr-staff-portal-app .iphr-benefit-card {
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-benefit-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
}

.iphr-staff-portal-app .iphr-benefit-card-title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-benefit-card-entitlement {
	padding: 0.75rem 0.875rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-benefit-entitlement-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
	margin-bottom: 0.2rem;
}

.iphr-staff-portal-app .iphr-benefit-entitlement-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-benefit-card-meta {
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-benefit-card-meta > div {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.35rem 0.75rem;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-benefit-card-meta dt {
	margin: 0;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-benefit-card-meta dd {
	margin: 0;
	color: #334155;
	line-height: 1.45;
}

.iphr-staff-portal-app .iphr-benefit-type-badge,
.iphr-staff-portal-app .iphr-benefit-status-badge {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

.iphr-staff-portal-app .iphr-benefit-type-leave {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}

.iphr-staff-portal-app .iphr-benefit-type-allowance {
	background: #fef9c3;
	color: #854d0e;
	border: 1px solid #fde047;
}

.iphr-staff-portal-app .iphr-benefit-type-other {
	background: #f3e8ff;
	color: #6b21a8;
	border: 1px solid #d8b4fe;
}

.iphr-staff-portal-app .iphr-benefit-status-active {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #86efac;
}

.iphr-staff-portal-app .iphr-benefit-status-inactive {
	background: #f1f5f9;
	color: #64748b;
	border: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-benefits-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 10px;
	background: #fff;
}

.iphr-staff-portal-app .iphr-benefits-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
	min-width: 720px;
}

.iphr-staff-portal-app .iphr-benefits-table th,
.iphr-staff-portal-app .iphr-benefits-table td {
	padding: 0.75rem 0.875rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-benefits-table th {
	background: #f8fafc;
	font-weight: 600;
	color: #475569;
}

.iphr-staff-portal-app .iphr-benefits-table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 1024px) {
	.iphr-staff-portal-app .iphr-benefits-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.iphr-staff-portal-app .iphr-benefits-summary {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-benefits-grid {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-benefits-table-wrap {
		display: none;
	}
}

/* ── Tasks page ───────────────────────────────────────────────── */
.iphr-staff-portal-app .iphr-tasks-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-tasks-notice {
	margin: 0;
}

.iphr-staff-portal-app .iphr-tasks-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-tasks-stat-card {
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-tasks-stat-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-tasks-stat-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-tasks-list-panel {
	padding: 1.25rem 1.5rem;
}

.iphr-staff-portal-app .iphr-tasks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.iphr-staff-portal-app .iphr-task-card {
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-task-card-head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-task-card-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-task-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.iphr-staff-portal-app .iphr-task-status-badge,
.iphr-staff-portal-app .iphr-task-priority-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
}

.iphr-staff-portal-app .iphr-task-status-todo {
	background: #f1f5f9;
	color: #475569;
}

.iphr-staff-portal-app .iphr-task-status-in-progress {
	background: #dbeafe;
	color: #1d4ed8;
}

.iphr-staff-portal-app .iphr-task-status-blocked {
	background: #fee2e2;
	color: #b91c1c;
}

.iphr-staff-portal-app .iphr-task-status-done {
	background: #dcfce7;
	color: #15803d;
}

.iphr-staff-portal-app .iphr-task-priority-low {
	background: #f8fafc;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-task-priority-normal {
	background: #eff6ff;
	color: #2563eb;
}

.iphr-staff-portal-app .iphr-task-priority-high {
	background: #fff7ed;
	color: #c2410c;
}

.iphr-staff-portal-app .iphr-task-priority-urgent {
	background: #fef2f2;
	color: #b91c1c;
}

.iphr-staff-portal-app .iphr-task-card-meta {
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-task-card-meta > div {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.35rem 0.75rem;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-task-card-meta dt {
	margin: 0;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-task-card-meta dd {
	margin: 0;
	color: #334155;
}

.iphr-staff-portal-app .iphr-task-block-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
	margin-bottom: 0.25rem;
}

.iphr-staff-portal-app .iphr-task-block-text {
	margin: 0;
	font-size: 0.875rem;
	color: #334155;
	line-height: 1.5;
}

.iphr-staff-portal-app .iphr-task-progress-display {
	padding: 0.75rem 0.875rem;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.iphr-staff-portal-app .iphr-task-update-form {
	margin-top: 0.25rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-task-form-grid {
	display: grid;
	gap: 0.75rem;
}

.iphr-staff-portal-app .iphr-task-form-grid .iphr-field-span {
	grid-column: 1 / -1;
}

.iphr-staff-portal-app .iphr-tasks-table-wrap {
	margin-top: 0.5rem;
}

@media (max-width: 1024px) {
	.iphr-staff-portal-app .iphr-tasks-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.iphr-staff-portal-app .iphr-tasks-summary {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-tasks-grid {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-tasks-table-wrap {
		display: none;
	}
}

/* ── Premium dashboard (v1.13.33) ─────────────────────────────── */
.iphr-staff-portal-app .iphr-dash-debug {
	padding: 1rem 1.25rem;
	border: 1px dashed #f59e0b;
	background: #fffbeb;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-dash-debug-title {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #92400e;
}

.iphr-staff-portal-app .iphr-dash-debug-list {
	display: grid;
	grid-template-columns: minmax(10rem, auto) 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-dash-debug-list dt {
	margin: 0;
	font-weight: 600;
	color: #78350f;
}

.iphr-staff-portal-app .iphr-dash-debug-list dd {
	margin: 0;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-dash-debug-tables {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-dash-debug-tables li {
	margin: 0.25rem 0;
	font-family: ui-monospace, monospace;
	font-size: 0.75rem;
}

/* ── Premium dashboard layout (v1.13.40) ───────────────────────── */
.iphr-staff-portal-app .iphr-dash-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-dash-hero,
.iphr-staff-portal-app .iphr-dash-welcome {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 42%, #ffffff 100%);
	border-radius: 16px;
	border: 1px solid var(--iphr-border, #e2e8f0);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06);
}

.iphr-staff-portal-app .iphr-dash-hero-main,
.iphr-staff-portal-app .iphr-dash-welcome-main {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	min-width: 0;
	flex: 1 1 280px;
}

.iphr-staff-portal-app .iphr-dash-hero-copy {
	min-width: 0;
}

.iphr-staff-portal-app .iphr-dash-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.iphr-staff-portal-app .iphr-dash-avatar-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e2e8f0;
	font-size: 1.5rem;
	font-weight: 700;
	color: #475569;
}

.iphr-staff-portal-app .iphr-dash-welcome-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-dash-welcome-title {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
}

.iphr-staff-portal-app .iphr-dash-welcome-position {
	margin: 0 0 0.5rem;
	color: #475569;
	font-size: 0.9375rem;
}

.iphr-staff-portal-app .iphr-dash-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.iphr-staff-portal-app .iphr-dash-quick-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--iphr-border, #e2e8f0);
	background: #fff;
	color: #334155;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.iphr-staff-portal-app .iphr-dash-quick-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-dash-quick-btn-primary {
	background: var(--iphr-primary, #2563eb);
	border-color: var(--iphr-primary, #2563eb);
	color: #fff;
}

.iphr-staff-portal-app .iphr-dash-quick-btn-primary:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
	color: #fff;
}

.iphr-staff-portal-app .iphr-dash-onboarding {
	padding: 1rem 1.25rem;
}

.iphr-staff-portal-app .iphr-dash-onboarding-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.iphr-staff-portal-app .iphr-dash-onboarding-title {
	margin: 0 0 0.35rem;
	font-size: 1rem;
}

.iphr-staff-portal-app .iphr-dash-onboarding-pct {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-dash-metrics,
.iphr-staff-portal-app .iphr-dash-summary {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.iphr-staff-portal-app .iphr-dash-metric {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.125rem 1.25rem;
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	position: relative;
	min-height: 8.5rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.iphr-staff-portal-app .iphr-dash-metric:hover {
	border-color: #93c5fd;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1);
	transform: translateY(-1px);
}

.iphr-staff-portal-app .iphr-dash-metric-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 10px;
	background: #eff6ff;
	color: var(--iphr-primary, #2563eb);
}

.iphr-staff-portal-app .iphr-dash-metric-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-dash-metric-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
}

.iphr-staff-portal-app .iphr-dash-metric-muted .iphr-dash-metric-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-dash-metric-sub {
	font-size: 0.8125rem;
	color: #64748b;
	line-height: 1.35;
}

.iphr-staff-portal-app .iphr-dash-metric-arrow {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 0.875rem;
	color: #94a3b8;
	transition: color 0.15s ease, transform 0.15s ease;
}

.iphr-staff-portal-app .iphr-dash-metric:hover .iphr-dash-metric-arrow {
	color: var(--iphr-primary, #2563eb);
	transform: translateX(2px);
}

.iphr-staff-portal-app .iphr-dash-card {
	background: #fff;
	border: 1px solid var(--iphr-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 10rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.iphr-staff-portal-app .iphr-dash-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.iphr-staff-portal-app .iphr-dash-card-head h3 {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-dash-stat {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
}

.iphr-staff-portal-app .iphr-dash-meta {
	margin: 0;
	font-size: 0.8125rem;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-dash-empty {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: #94a3b8;
}

.iphr-staff-portal-app .iphr-dash-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.iphr-staff-portal-app .iphr-dash-card-list li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid #f1f5f9;
}

.iphr-staff-portal-app .iphr-dash-card-list li:last-child {
	border-bottom: 0;
}

.iphr-staff-portal-app .iphr-dash-card-list strong {
	color: #334155;
	font-weight: 600;
}

.iphr-staff-portal-app .iphr-dash-card-list span {
	color: #64748b;
	text-align: right;
}

.iphr-staff-portal-app .iphr-dash-card-link {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--iphr-primary, #2563eb);
	text-decoration: none;
}

.iphr-staff-portal-app .iphr-dash-card-link:hover {
	text-decoration: underline;
}

.iphr-staff-portal-app .iphr-dash-activity {
	padding: 1.25rem 1.5rem;
}

.iphr-staff-portal-app .iphr-dash-activity-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.iphr-staff-portal-app .iphr-dash-activity-head h3 {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #0f172a;
}

.iphr-staff-portal-app .iphr-dash-activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.iphr-staff-portal-app .iphr-dash-activity-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-dash-activity-item:last-child {
	border-bottom: 0;
}

.iphr-staff-portal-app .iphr-dash-activity-icon {
	color: #64748b;
}

.iphr-staff-portal-app .iphr-dash-activity-body strong {
	display: block;
	font-size: 0.875rem;
	color: #0f172a;
	margin-bottom: 0.15rem;
}

.iphr-staff-portal-app .iphr-dash-activity-meta {
	display: block;
	font-size: 0.8125rem;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-dash-activity-link {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--iphr-primary, #2563eb);
	text-decoration: none;
	white-space: nowrap;
}

.iphr-staff-portal-app .iphr-dash-activity-link:hover {
	text-decoration: underline;
}

.iphr-staff-portal-app .iphr-dash-salary-hint {
	margin: 0.25rem 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1e40af;
}

.iphr-staff-portal-app .iphr-dash-metric-badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	background: #dcfce7;
	color: #166534;
}

.iphr-staff-portal-app .iphr-dash-metric-leave .iphr-dash-metric-icon {
	background: #fef9c3;
	color: #854d0e;
}

.iphr-staff-portal-app .iphr-dash-metric-payslip .iphr-dash-metric-icon {
	background: #dbeafe;
	color: #1d4ed8;
}

.iphr-staff-portal-app .iphr-dash-metric-clock .iphr-dash-metric-icon {
	background: #ecfdf5;
	color: #047857;
}

.iphr-staff-portal-app .iphr-dash-metric-tasks .iphr-dash-metric-icon {
	background: #ede9fe;
	color: #5b21b6;
}

.iphr-staff-portal-app .iphr-dash-metric-benefits .iphr-dash-metric-icon {
	background: #fce7f3;
	color: #9d174d;
}

.iphr-staff-portal-app .iphr-dash-metric-meetings .iphr-dash-metric-icon {
	background: #f5f3ff;
	color: #6d28d9;
}

.iphr-staff-portal-app .iphr-dash-metric-eod .iphr-dash-metric-icon {
	background: #eef2ff;
	color: #4338ca;
}

.iphr-staff-portal-app .iphr-dash-metric-notifications .iphr-dash-metric-icon {
	background: #fff7ed;
	color: #c2410c;
}

.iphr-staff-portal-app .iphr-dash-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: start;
}

.iphr-staff-portal-app .iphr-dash-pending-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iphr-staff-portal-app .iphr-dash-pending-item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid #f1f5f9;
}

.iphr-staff-portal-app .iphr-dash-pending-item:last-child {
	border-bottom: 0;
}

.iphr-staff-portal-app .iphr-dash-pending-body strong {
	display: block;
	font-size: 0.875rem;
	color: #0f172a;
}

@media (max-width: 768px) {
	.iphr-staff-portal-app .iphr-dash-hero,
	.iphr-staff-portal-app .iphr-dash-welcome {
		padding: 1.25rem;
	}

	.iphr-staff-portal-app .iphr-dash-quick-actions {
		width: 100%;
	}

	.iphr-staff-portal-app .iphr-dash-quick-btn {
		flex: 1 1 calc(50% - 0.25rem);
		min-width: 8rem;
	}

	.iphr-staff-portal-app .iphr-dash-metrics,
	.iphr-staff-portal-app .iphr-dash-summary {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-dash-activity-item {
		grid-template-columns: auto 1fr;
	}

	.iphr-staff-portal-app .iphr-dash-activity-link {
		grid-column: 2;
		justify-self: start;
	}

	.iphr-staff-portal-app .iphr-dash-columns {
		grid-template-columns: 1fr;
	}

	.iphr-staff-portal-app .iphr-dash-pending-item {
		grid-template-columns: auto 1fr;
	}

	.iphr-staff-portal-app .iphr-dash-pending-item .iphr-dash-activity-link {
		grid-column: 2;
		justify-self: start;
	}
}

/* ── My Profile page (v1.13.41) ───────────────────────────────── */
.iphr-staff-portal-app .iphr-profile-page {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.iphr-staff-portal-app .iphr-profile-hero-card {
	padding: 0;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.iphr-staff-portal-app .iphr-profile-hero-card .iphr-profile-hero {
	padding: 1.5rem 1.75rem;
	background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 45%, #ffffff 100%);
}

.iphr-staff-portal-app .iphr-profile-hero {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	align-items: center;
}

.iphr-staff-portal-app .iphr-profile-hero-kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-profile-hero-name {
	margin: 0 0 0.25rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--iphr-text, #0f172a);
	line-height: 1.2;
}

.iphr-staff-portal-app .iphr-profile-hero-meta,
.iphr-staff-portal-app .iphr-profile-hero-email {
	margin: 0 0 0.35rem;
	font-size: 0.9375rem;
	color: #475569;
}

.iphr-staff-portal-app .iphr-profile-hero-email a {
	color: var(--iphr-accent, #0284c7);
	text-decoration: none;
}

.iphr-staff-portal-app .iphr-profile-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.iphr-staff-portal-app .iphr-profile-completion-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #dbeafe;
	color: #1d4ed8;
}

.iphr-staff-portal-app .iphr-profile-completion-bar {
	height: 6px;
	margin-top: 0.85rem;
	border-radius: 999px;
	background: #e2e8f0;
	overflow: hidden;
}

.iphr-staff-portal-app .iphr-profile-completion-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb, #38bdf8);
	transition: width 0.35s ease;
}

.iphr-staff-portal-app .iphr-profile-photo {
	width: 112px;
	height: 112px;
	border-radius: 16px;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.iphr-staff-portal-app .iphr-profile-photo--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	font-weight: 700;
	background: var(--iphr-accent-soft, #e0f2fe);
	color: var(--iphr-accent, #0284c7);
}

.iphr-staff-portal-app .iphr-profile-card {
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.iphr-staff-portal-app .iphr-profile-card-head {
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--iphr-border, #e2e8f0);
}

.iphr-staff-portal-app .iphr-profile-card-title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--iphr-text, #0f172a);
}

.iphr-staff-portal-app .iphr-profile-card-desc {
	margin: 0;
	font-size: 0.875rem;
}

.iphr-staff-portal-app .iphr-profile-fields-grid {
	gap: 1rem 1.25rem;
}

.iphr-staff-portal-app .iphr-profile-field-label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}

.iphr-staff-portal-app .iphr-profile-lock {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: #b45309;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 999px;
	padding: 0.1rem 0.45rem;
}

.iphr-staff-portal-app .iphr-profile-lock-icon {
	font-size: 0.75rem;
	line-height: 1;
}

.iphr-staff-portal-app .iphr-input--locked,
.iphr-staff-portal-app select.iphr-input--locked {
	background: #f8fafc;
	color: #64748b;
	cursor: not-allowed;
}

.iphr-staff-portal-app .iphr-profile-form-actions {
	display: flex;
	justify-content: flex-end;
	padding: 0 0.25rem;
}

.iphr-staff-portal-app .iphr-profile-readonly-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-profile-readonly-item dt {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-profile-readonly-item dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--iphr-text, #0f172a);
}

.iphr-staff-portal-app .iphr-profile-photo-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1rem;
}

.iphr-staff-portal-app .iphr-profile-empty-panel {
	text-align: center;
	padding: 2rem 1.5rem;
}

.iphr-staff-portal-app .iphr-profile-hero-actions {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.iphr-staff-portal-app .iphr-profile-view-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-profile-view-item dt {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
}

.iphr-staff-portal-app .iphr-profile-view-item dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--iphr-text, #0f172a);
}

.iphr-staff-portal-app .iphr-profile-view-item--full {
	grid-column: 1 / -1;
}

.iphr-staff-portal-app .iphr-profile-view-item--locked dt .iphr-profile-lock {
	margin-left: 0.35rem;
}

.iphr-staff-portal-app .iphr-profile-missing-banner {
	margin-bottom: 0;
}

.iphr-staff-portal-app .iphr-profile-missing-banner .iphr-notice-text {
	margin: 0 0 0.75rem;
}

.iphr-staff-portal-app .iphr-profile-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 0.5rem;
}

.iphr-staff-portal-app .iphr-input--locked,
.iphr-staff-portal-app .iphr-input:disabled {
	background: #f1f5f9;
	color: #64748b;
	cursor: not-allowed;
}

.iphr-staff-portal-app .iphr-profile-debug {
	padding: 1rem 1.25rem;
	border: 1px dashed #f59e0b;
	background: #fffbeb;
	font-size: 0.8125rem;
}

.iphr-staff-portal-app .iphr-profile-debug-title {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #92400e;
}

.iphr-staff-portal-app .iphr-profile-debug-list {
	display: grid;
	grid-template-columns: minmax(10rem, auto) 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}

.iphr-staff-portal-app .iphr-profile-debug-list dt {
	margin: 0;
	font-weight: 600;
	color: #78350f;
}

.iphr-staff-portal-app .iphr-profile-debug-list dd {
	margin: 0;
}

@media (max-width: 720px) {
	.iphr-staff-portal-app .iphr-profile-hero {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.iphr-staff-portal-app .iphr-profile-hero-media {
		display: flex;
		justify-content: center;
	}

	.iphr-staff-portal-app .iphr-profile-hero-badges {
		justify-content: center;
	}

	.iphr-staff-portal-app .iphr-profile-readonly-grid,
	.iphr-staff-portal-app .iphr-profile-view-grid {
		grid-template-columns: 1fr;
	}
}