.wram-hr {
	--hr-brand: #2da5de;
	--hr-brand-dark: #1486bd;
	--hr-brand-soft: #eaf7fd;
	--hr-navy: #101c2c;
	--hr-navy-2: #18283b;
	--hr-bg: #f3f6f8;
	--hr-card: #ffffff;
	--hr-text: #172334;
	--hr-muted: #718093;
	--hr-border: #e3e9ee;
	--hr-success: #0f9f75;
	--hr-success-soft: #ddf7ee;
	--hr-warning: #dd8b17;
	--hr-warning-soft: #fff3d5;
	--hr-danger: #d64255;
	--hr-danger-soft: #ffeaed;
	--hr-shadow: 0 18px 48px rgba(20, 43, 65, .08);
	background: var(--hr-bg);
	color: var(--hr-text);
	direction: rtl;
	font-family: "Tajawal", Tahoma, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	margin: 0 auto;
	min-height: 100vh;
	text-align: right;
	width: 100%;
}

.wram-hr *,
.wram-hr *::before,
.wram-hr *::after {
	box-sizing: border-box;
}

.wram-hr button,
.wram-hr input,
.wram-hr select,
.wram-hr textarea {
	font: inherit;
}

.wram-hr button,
.wram-hr a {
	-webkit-tap-highlight-color: transparent;
}

.wram-hr button:focus-visible,
.wram-hr a:focus-visible,
.wram-hr input:focus-visible,
.wram-hr select:focus-visible,
.wram-hr textarea:focus-visible,
.wram-hr summary:focus-visible {
	outline: 3px solid rgba(45, 165, 222, .32);
	outline-offset: 2px;
}

.wram-hr [hidden] {
	display: none !important;
}

.wram-hr [dir="ltr"],
.wram-hr code {
	direction: ltr;
	unicode-bidi: isolate;
}

.wram-hr-skip {
	background: #fff;
	border-radius: 0 0 10px 10px;
	color: var(--hr-navy);
	font-weight: 800;
	left: 20px;
	padding: 10px 16px;
	position: fixed;
	top: -70px;
	z-index: 10050;
}

.wram-hr-skip:focus {
	top: 0;
}

.wram-hr-shell {
	display: flex;
	min-height: 100vh;
}

.wram-hr-rail {
	background: linear-gradient(180deg, #0d1725 0%, #14243a 100%);
	box-shadow: -16px 0 40px rgba(11, 24, 38, .16);
	color: #fff;
	display: flex;
	flex: 0 0 246px;
	flex-direction: column;
	gap: 26px;
	height: 100vh;
	overflow-y: auto;
	padding: 24px 16px 18px;
	position: sticky;
	top: 0;
	z-index: 20;
}

.wram-hr-brand {
	align-items: center;
	display: flex;
	gap: 12px;
	min-width: 0;
	padding: 0 7px 18px;
}

.wram-hr-brand img {
	background: #fff;
	border-radius: 13px;
	height: 58px;
	object-fit: contain;
	padding: 5px;
	width: 65px;
}

.wram-hr-brand div {
	display: grid;
	line-height: 1.15;
}

.wram-hr-brand strong {
	font-size: 20px;
	font-weight: 900;
}

.wram-hr-brand span {
	color: #9db0c4;
	font-size: 12px;
	font-weight: 700;
	margin-top: 5px;
}

.wram-hr-nav {
	display: grid;
	gap: 5px;
}

.wram-hr-nav button,
.wram-hr-mobile-nav button {
	align-items: center;
	background: transparent;
	border: 0;
	color: #9eb0c3;
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: 12px;
	min-height: 47px;
	padding: 10px 13px;
	position: relative;
	text-align: right;
	transition: color .18s ease, background .18s ease, transform .18s ease;
	width: 100%;
}

.wram-hr-nav button {
	border-radius: 11px;
}

.wram-hr-nav button i {
	align-items: center;
	display: inline-flex;
	font-size: 17px;
	justify-content: center;
	width: 22px;
}

.wram-hr-nav button:hover,
.wram-hr-nav button.is-active {
	background: rgba(45, 165, 222, .16);
	color: #fff;
}

.wram-hr-nav button.is-active::before {
	background: var(--hr-brand);
	border-radius: 6px 0 0 6px;
	bottom: 9px;
	content: "";
	position: absolute;
	right: -16px;
	top: 9px;
	width: 4px;
}

.wram-hr-nav button em {
	align-items: center;
	background: var(--hr-danger);
	border-radius: 99px;
	color: #fff;
	display: inline-flex;
	font-size: 11px;
	font-style: normal;
	height: 20px;
	justify-content: center;
	margin-right: auto;
	min-width: 20px;
	padding: 0 5px;
}

.wram-hr-user {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: grid;
	gap: 10px;
	grid-template-columns: 42px minmax(0, 1fr) 30px;
	margin-top: auto;
	padding: 18px 5px 0;
}

.wram-hr-user > img {
	border: 2px solid rgba(255, 255, 255, .24);
	border-radius: 50%;
	height: 42px;
	object-fit: cover;
	width: 42px;
}

.wram-hr-user div {
	display: grid;
	min-width: 0;
}

.wram-hr-user strong,
.wram-hr-user span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wram-hr-user strong {
	font-size: 13px;
}

.wram-hr-user span {
	color: #8fa3b7;
	font-size: 11px;
}

.wram-hr-user a {
	align-items: center;
	border-radius: 8px;
	color: #9fb1c4;
	display: inline-flex;
	height: 30px;
	justify-content: center;
	text-decoration: none;
}

.wram-hr-user a:hover {
	background: rgba(255, 255, 255, .09);
	color: #fff;
}

.wram-hr-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 clamp(18px, 3vw, 44px) 46px;
}

.wram-hr-topbar {
	align-items: center;
	background: rgba(243, 246, 248, .9);
	backdrop-filter: blur(10px);
	display: flex;
	gap: 20px;
	justify-content: space-between;
	min-height: 112px;
	padding: 20px 0;
	position: sticky;
	top: 0;
	z-index: 12;
}

body.admin-bar .wram-hr-rail {
	height: calc(100vh - 32px);
	top: 32px;
}

body.admin-bar .wram-hr-topbar {
	top: 32px;
}

.wram-hr-eyebrow,
.wram-hr-section-head > div > span,
.wram-hr-panel-head > div > span,
.wram-hr-dialog-head span,
.wram-hr-dialog-profile > div > span,
.wram-hr-profile-hero > div > span {
	color: var(--hr-brand-dark);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
}

.wram-hr-topbar h1 {
	font-size: clamp(25px, 2.4vw, 34px);
	font-weight: 900;
	line-height: 1.15;
	margin: 4px 0 0;
}

.wram-hr-top-actions {
	align-items: center;
	display: flex;
	gap: 10px;
}

.wram-hr-date {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 12px;
	color: var(--hr-muted);
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	min-height: 44px;
	padding: 9px 13px;
}

.wram-hr-btn {
	align-items: center;
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	display: inline-flex;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	min-height: 44px;
	padding: 10px 17px;
	text-decoration: none !important;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wram-hr-btn:hover {
	transform: translateY(-1px);
}

.wram-hr-btn:disabled {
	cursor: wait;
	opacity: .62;
	transform: none;
}

.wram-hr-btn-primary {
	background: var(--hr-brand);
	box-shadow: 0 9px 20px rgba(45, 165, 222, .23);
	color: #fff !important;
}

.wram-hr-btn-primary:hover {
	background: var(--hr-brand-dark);
}

.wram-hr-btn-soft {
	background: var(--hr-brand-soft);
	color: var(--hr-brand-dark) !important;
}

.wram-hr-btn-soft:hover {
	background: #d8effa;
}

.wram-hr-btn-danger {
	background: var(--hr-danger-soft);
	color: var(--hr-danger) !important;
}

.wram-hr-btn-danger:hover {
	background: #ffd9df;
}

.wram-hr-view {
	animation: wramHrFade .22s ease;
	display: none;
}

.wram-hr-view.is-active {
	display: block;
}

@keyframes wramHrFade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.wram-hr-hero,
.wram-hr-profile-hero {
	background: linear-gradient(118deg, #14243a 0%, #173b55 64%, #136d98 100%);
	border-radius: 22px;
	box-shadow: var(--hr-shadow);
	color: #fff;
	display: flex;
	margin-bottom: 20px;
	min-height: 205px;
	overflow: hidden;
	padding: clamp(24px, 4vw, 42px);
	position: relative;
}

.wram-hr-hero::after,
.wram-hr-profile-hero::after {
	background: radial-gradient(circle, rgba(255,255,255,.15) 0, rgba(255,255,255,0) 68%);
	content: "";
	height: 340px;
	left: -80px;
	position: absolute;
	top: -150px;
	width: 340px;
}

.wram-hr-hero > div:first-child {
	align-self: center;
	position: relative;
	z-index: 2;
}

.wram-hr-hero span,
.wram-hr-profile-hero > div > span {
	color: #8fdaff;
	font-weight: 800;
}

.wram-hr-hero h2,
.wram-hr-profile-hero h2 {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 900;
	line-height: 1.2;
	margin: 6px 0;
}

.wram-hr-hero p,
.wram-hr-profile-hero p {
	color: #bed1df;
	margin: 0;
}

.wram-hr-hero-mark {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-right: auto;
	position: relative;
	width: 260px;
	z-index: 1;
}

.wram-hr-hero-mark img {
	filter: brightness(0) invert(1);
	height: 185px;
	object-fit: contain;
	opacity: .14;
	width: 240px;
}

.wram-hr-kpis {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(6, minmax(135px, 1fr));
	margin-bottom: 20px;
}

.wram-hr-kpis article {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	display: flex;
	gap: 12px;
	min-height: 108px;
	padding: 17px;
}

.wram-hr-kpis article > i {
	align-items: center;
	background: var(--hr-brand-soft);
	border-radius: 12px;
	color: var(--hr-brand-dark);
	display: inline-flex;
	font-size: 19px;
	height: 43px;
	justify-content: center;
	width: 43px;
}

.wram-hr-kpis article.is-warning > i {
	background: var(--hr-warning-soft);
	color: var(--hr-warning);
}

.wram-hr-kpis article.is-danger > i {
	background: var(--hr-danger-soft);
	color: var(--hr-danger);
}

.wram-hr-kpis article div {
	display: grid;
	gap: 3px;
}

.wram-hr-kpis span {
	color: var(--hr-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}

.wram-hr-kpis strong {
	font-size: 27px;
	font-weight: 900;
	line-height: 1;
}

.wram-hr-dashboard-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
}

.wram-hr-panel {
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 18px;
	box-shadow: 0 8px 30px rgba(21, 42, 63, .045);
	padding: 21px;
}

.wram-hr-panel-head,
.wram-hr-section-head {
	align-items: flex-start;
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

.wram-hr-panel-head {
	margin-bottom: 16px;
}

.wram-hr-panel-head h2,
.wram-hr-section-head h2 {
	color: var(--hr-text);
	font-weight: 900;
	line-height: 1.25;
	margin: 3px 0 0;
}

.wram-hr-panel-head h2 {
	font-size: 20px;
}

.wram-hr-section-head {
	margin: 5px 0 22px;
}

.wram-hr-section-head h2 {
	font-size: clamp(24px, 2.4vw, 32px);
}

.wram-hr-section-head p {
	color: var(--hr-muted);
	font-size: 14px;
	margin: 7px 0 0;
}

.wram-hr-link {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--hr-brand-dark);
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	gap: 7px;
	padding: 5px;
}

.wram-hr-mini-employees {
	display: grid;
	gap: 8px;
}

.wram-hr-mini-employees > button {
	align-items: center;
	background: #fff;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	display: grid;
	gap: 11px;
	grid-template-columns: 45px minmax(0, 1fr) auto;
	padding: 8px;
	text-align: right;
}

.wram-hr-mini-employees > button:hover {
	background: #f5f9fb;
}

.wram-hr-mini-employees img {
	border-radius: 12px;
	height: 45px;
	object-fit: cover;
	width: 45px;
}

.wram-hr-mini-employees span {
	display: grid;
	min-width: 0;
}

.wram-hr-mini-employees strong,
.wram-hr-mini-employees small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wram-hr-mini-employees strong {
	font-size: 14px;
}

.wram-hr-mini-employees small,
.wram-hr-card-meta,
.wram-hr-employee-body > small {
	color: var(--hr-muted);
	font-size: 12px;
}

.wram-hr-mini-employees b {
	color: var(--hr-brand-dark);
	font-size: 13px;
}

.wram-hr-timeline {
	display: grid;
	gap: 14px;
}

.wram-hr-timeline article {
	display: grid;
	gap: 10px;
	grid-template-columns: 30px minmax(0, 1fr);
}

.wram-hr-timeline article > i {
	align-items: center;
	background: var(--hr-success-soft);
	border-radius: 50%;
	color: var(--hr-success);
	display: inline-flex;
	font-size: 11px;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.wram-hr-timeline article div {
	display: grid;
	gap: 2px;
}

.wram-hr-timeline strong {
	font-size: 13px;
	font-weight: 800;
}

.wram-hr-timeline span {
	color: var(--hr-muted);
	font-size: 11px;
}

.wram-hr-toolbar {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 15px;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	margin-bottom: 18px;
	padding: 11px;
}

.wram-hr-toolbar > label {
	align-items: center;
	background: #f4f7f9;
	border-radius: 10px;
	display: flex;
	flex: 1 1 430px;
	gap: 8px;
	max-width: 560px;
	padding: 0 13px;
}

.wram-hr-toolbar > label i {
	color: #96a4b2;
}

.wram-hr-toolbar input {
	background: transparent;
	border: 0;
	height: 43px;
	outline: 0;
	width: 100%;
}

.wram-hr-filter-pills {
	display: flex;
	gap: 5px;
}

.wram-hr-filter-pills button {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 99px;
	color: var(--hr-muted);
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	min-height: 36px;
	padding: 7px 13px;
}

.wram-hr-filter-pills button.is-active {
	background: var(--hr-brand-soft);
	color: var(--hr-brand-dark);
}

.wram-hr-employee-grid {
	display: grid;
	gap: 17px;
	grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.wram-hr-employee-card {
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 18px;
	box-shadow: 0 9px 28px rgba(23, 50, 74, .045);
	overflow: hidden;
	position: relative;
	transition: box-shadow .2s ease, transform .2s ease;
}

.wram-hr-employee-card:hover {
	box-shadow: var(--hr-shadow);
	transform: translateY(-3px);
}

.wram-hr-employee-cover {
	background: linear-gradient(110deg, #e9f7fd, #f7fbfd 56%, #d6f1fd);
	height: 78px;
	padding: 12px;
	text-align: left;
}

.wram-hr-employee-avatar {
	background: #fff;
	border: 4px solid #fff;
	border-radius: 17px;
	height: 80px;
	margin: -43px 18px 0 0;
	object-fit: cover;
	position: relative;
	width: 80px;
}

.wram-hr-employee-body {
	padding: 11px 18px 18px;
}

.wram-hr-employee-body h3 {
	font-size: 18px;
	font-weight: 900;
	margin: 0;
}

.wram-hr-employee-body > p {
	color: #46586b;
	font-size: 13px;
	font-weight: 700;
	margin: 2px 0;
}

.wram-hr-progress {
	background: #e8eef2;
	border-radius: 99px;
	height: 6px;
	margin: 15px 0 6px;
	overflow: hidden;
}

.wram-hr-progress span {
	background: linear-gradient(90deg, var(--hr-brand), #71c9ee);
	border-radius: inherit;
	display: block;
	height: 100%;
}

.wram-hr-card-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 13px;
}

.wram-hr-card-meta strong {
	color: var(--hr-brand-dark);
}

.wram-hr-employee-body .wram-hr-btn {
	width: 100%;
}

.wram-hr-badge {
	background: #eef2f5;
	border-radius: 99px;
	color: #5d6d7d;
	display: inline-flex;
	font-size: 11px;
	font-weight: 900;
	line-height: 1.2;
	padding: 6px 10px;
	white-space: nowrap;
}

.wram-hr-badge.is-active,
.wram-hr-badge.is-approved,
.wram-hr-badge.is-published {
	background: var(--hr-success-soft);
	color: #087655;
}

.wram-hr-badge.is-pending,
.wram-hr-badge.is-draft {
	background: var(--hr-warning-soft);
	color: #9d610c;
}

.wram-hr-badge.is-inactive,
.wram-hr-badge.is-rejected,
.wram-hr-badge.is-revoked,
.wram-hr-badge.is-expired {
	background: var(--hr-danger-soft);
	color: #a9293c;
}

.wram-hr-profile-hero {
	align-items: center;
	gap: 20px;
}

.wram-hr-profile-hero > img {
	border: 4px solid rgba(255,255,255,.35);
	border-radius: 24px;
	height: 122px;
	object-fit: cover;
	position: relative;
	width: 122px;
	z-index: 2;
}

.wram-hr-profile-hero > div:not(.wram-hr-completion-ring) {
	position: relative;
	z-index: 2;
}

.wram-hr-completion-ring {
	align-items: center;
	background: radial-gradient(circle at center, var(--hr-navy-2) 56%, transparent 58%), conic-gradient(var(--hr-brand) calc(var(--value) * 1%), rgba(255,255,255,.15) 0);
	border-radius: 50%;
	display: flex;
	flex: 0 0 108px;
	flex-direction: column;
	height: 108px;
	justify-content: center;
	margin-right: auto;
	position: relative;
	z-index: 2;
}

.wram-hr-completion-ring strong {
	font-size: 21px;
	font-weight: 900;
	line-height: 1;
}

.wram-hr-completion-ring span {
	color: #b6cada;
	font-size: 10px;
	margin-top: 4px;
}

.wram-hr-self-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 18px;
}

.wram-hr-action-card {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	cursor: pointer;
	display: grid;
	gap: 12px;
	grid-template-columns: 50px minmax(0, 1fr) 20px;
	min-height: 105px;
	padding: 17px;
	text-align: right;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wram-hr-action-card:hover {
	border-color: #b8e0f2;
	box-shadow: var(--hr-shadow);
	transform: translateY(-2px);
}

.wram-hr-action-card > i {
	align-items: center;
	background: var(--hr-brand-soft);
	border-radius: 14px;
	color: var(--hr-brand-dark);
	display: inline-flex;
	font-size: 20px;
	height: 50px;
	justify-content: center;
	width: 50px;
}

.wram-hr-action-card span {
	display: grid;
}

.wram-hr-action-card strong {
	font-size: 15px;
}

.wram-hr-action-card small {
	color: var(--hr-muted);
	font-size: 11px;
}

.wram-hr-action-card > b {
	color: var(--hr-brand-dark);
	font-size: 12px;
}

.wram-hr-balance-row {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, 1fr);
}

.wram-hr-balance-row.wram-hr-balance-full {
	grid-template-columns: repeat(5, minmax(150px, 1fr));
	margin-bottom: 20px;
}

.wram-hr-balance-row article {
	background: linear-gradient(135deg, #f7fbfd, #edf8fd);
	border: 1px solid #d9edf6;
	border-radius: 14px;
	display: grid;
	min-height: 105px;
	padding: 15px;
}

.wram-hr-balance-row strong {
	color: var(--hr-brand-dark);
	font-size: 27px;
	font-weight: 900;
	line-height: 1;
}

.wram-hr-balance-row span {
	font-size: 12px;
	font-weight: 800;
	margin-top: 7px;
}

.wram-hr-balance-row small {
	color: var(--hr-muted);
	font-size: 10px;
}

.wram-hr-performance-mini {
	display: grid;
	gap: 9px;
	grid-template-columns: repeat(3, 1fr);
}

.wram-hr-performance-mini div {
	align-items: center;
	background: #f7f9fa;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	min-height: 115px;
	padding: 13px 8px;
	text-align: center;
}

.wram-hr-performance-mini i {
	color: var(--hr-brand-dark);
}

.wram-hr-performance-mini strong {
	font-size: 25px;
	font-weight: 900;
	line-height: 1.3;
}

.wram-hr-performance-mini span {
	color: var(--hr-muted);
	font-size: 10px;
}

.wram-hr-delegated-list,
.wram-hr-request-list,
.wram-hr-performance-list {
	display: grid;
	gap: 12px;
}

.wram-hr-delegated-list article {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	display: grid;
	gap: 14px;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	padding: 15px;
}

.wram-hr-delegated-list img {
	border-radius: 15px;
	height: 64px;
	object-fit: cover;
	width: 64px;
}

.wram-hr-delegated-list h3,
.wram-hr-delegated-list p {
	margin: 0;
}

.wram-hr-delegated-list p {
	color: var(--hr-muted);
	font-size: 12px;
}

.wram-hr-delegated-list .wram-hr-progress {
	max-width: 420px;
}

.wram-hr-request-card {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	display: grid;
	gap: 15px;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	padding: 16px;
}

.wram-hr-request-card > img {
	border-radius: 15px;
	height: 62px;
	object-fit: cover;
	width: 62px;
}

.wram-hr-request-main > span {
	color: var(--hr-brand-dark);
	font-size: 11px;
	font-weight: 800;
}

.wram-hr-request-main h3,
.wram-hr-request-main p,
.wram-hr-request-main small {
	margin: 0;
}

.wram-hr-request-main h3 {
	font-size: 17px;
	font-weight: 900;
}

.wram-hr-request-main p,
.wram-hr-request-main small {
	color: var(--hr-muted);
	font-size: 12px;
}

.wram-hr-request-main p i {
	margin-left: 6px;
}

.wram-hr-request-side {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.wram-hr-icon-btn {
	align-items: center;
	background: #f1f5f7;
	border: 0;
	border-radius: 9px;
	color: #506174 !important;
	cursor: pointer;
	display: inline-flex;
	height: 37px;
	justify-content: center;
	margin: 0 2px;
	text-decoration: none !important;
	width: 37px;
}

.wram-hr-icon-btn:hover {
	background: #e7edf1;
}

.wram-hr-icon-btn.is-approve {
	background: var(--hr-success-soft);
	color: var(--hr-success) !important;
}

.wram-hr-icon-btn.is-reject {
	background: var(--hr-danger-soft);
	color: var(--hr-danger) !important;
}

.wram-hr-performance-list article {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(110px, 1fr)) 42px;
	padding: 16px;
}

.wram-hr-performance-list article > div:not(.wram-hr-performance-owner) {
	align-items: center;
	border-right: 1px solid var(--hr-border);
	display: grid;
	grid-template-columns: 30px 1fr;
	padding-right: 14px;
}

.wram-hr-performance-list article > div > i {
	color: var(--hr-brand-dark);
	grid-row: 1 / 3;
}

.wram-hr-performance-list article > div > strong {
	font-size: 20px;
	font-weight: 900;
	line-height: 1.1;
}

.wram-hr-performance-list article > div > span {
	color: var(--hr-muted);
	font-size: 10px;
}

.wram-hr-performance-owner span:first-child {
	color: var(--hr-brand-dark);
	font-size: 11px;
	font-weight: 800;
}

.wram-hr-performance-owner h3 {
	font-size: 16px;
	font-weight: 900;
	margin: 0 0 5px;
}

.wram-hr-table-wrap {
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 17px;
	overflow: hidden;
}

.wram-hr-table {
	border-collapse: collapse;
	font-size: 13px;
	margin: 0;
	width: 100%;
}

.wram-hr-table th,
.wram-hr-table td {
	border: 0;
	border-bottom: 1px solid var(--hr-border);
	padding: 15px 17px;
	text-align: right;
	vertical-align: middle;
}

.wram-hr-table th {
	background: #f7f9fa;
	color: #637386;
	font-size: 11px;
	font-weight: 900;
}

.wram-hr-table tbody tr:last-child td {
	border-bottom: 0;
}

.wram-hr-table code {
	background: var(--hr-brand-soft);
	border-radius: 6px;
	color: var(--hr-brand-dark);
	font-size: 11px;
	padding: 4px 7px;
}

.wram-hr-policy-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wram-hr-policy {
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	overflow: hidden;
}

.wram-hr-policy[open] {
	box-shadow: var(--hr-shadow);
}

.wram-hr-policy summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	list-style: none;
	min-height: 88px;
	padding: 17px;
}

.wram-hr-policy summary::-webkit-details-marker {
	display: none;
}

.wram-hr-policy summary > div {
	align-items: center;
	display: flex;
	gap: 12px;
}

.wram-hr-policy summary > div > i {
	align-items: center;
	background: var(--hr-brand-soft);
	border-radius: 12px;
	color: var(--hr-brand-dark);
	display: inline-flex;
	height: 45px;
	justify-content: center;
	width: 45px;
}

.wram-hr-policy summary span {
	display: grid;
}

.wram-hr-policy summary strong {
	font-size: 15px;
}

.wram-hr-policy summary small {
	color: var(--hr-muted);
	font-size: 11px;
}

.wram-hr-policy > .wram-hr-form {
	border-top: 1px solid var(--hr-border);
	padding: 19px;
}

.wram-hr-form {
	display: grid;
	gap: 16px;
}

.wram-hr-form-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wram-hr-form label,
.wram-hr-form fieldset {
	display: grid;
	gap: 7px;
	margin: 0;
}

.wram-hr-form label > span,
.wram-hr-form legend {
	color: #516174;
	font-size: 12px;
	font-weight: 800;
}

.wram-hr-form fieldset {
	border: 1px solid var(--hr-border);
	border-radius: 12px;
	padding: 12px;
}

.wram-hr-form legend {
	padding: 0 7px;
}

.wram-hr-form input:not([type="checkbox"]):not([type="file"]),
.wram-hr-form select,
.wram-hr-form textarea {
	background: #fff;
	border: 1px solid #d9e1e7;
	border-radius: 10px;
	box-shadow: none;
	color: var(--hr-text);
	font-size: 14px;
	min-height: 45px;
	padding: 10px 12px;
	text-align: right;
	width: 100%;
}

.wram-hr-form input:disabled,
.wram-hr-form select:disabled,
.wram-hr-form textarea:disabled {
	background: #f2f4f6;
	color: #7b8895;
}

.wram-hr-form textarea {
	min-height: 88px;
	resize: vertical;
}

.wram-hr-field-wide {
	grid-column: 1 / -1;
}

.wram-hr-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.wram-hr-checks label {
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 7px;
}

.wram-hr-checks input {
	accent-color: var(--hr-brand);
	height: 17px;
	width: 17px;
}

.wram-hr-money-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wram-hr-settings-logo {
	align-items: center;
	background: var(--hr-brand-soft);
	border-radius: 14px;
	display: flex;
	gap: 14px;
	padding: 14px;
}

.wram-hr-settings-logo img {
	background: #fff;
	border-radius: 10px;
	height: 75px;
	object-fit: contain;
	padding: 5px;
	width: 95px;
}

.wram-hr-settings-logo div {
	display: grid;
}

.wram-hr-settings-logo span {
	color: var(--hr-muted);
	font-size: 12px;
}

.wram-hr-manager-list {
	display: grid;
	gap: 7px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-height: 260px;
	overflow: auto;
}

.wram-hr-manager-list label {
	align-items: center;
	background: #f7f9fa;
	border-radius: 10px;
	display: grid;
	gap: 8px;
	grid-template-columns: 18px 32px minmax(0, 1fr);
	padding: 8px;
}

.wram-hr-manager-list img {
	border-radius: 50%;
	height: 32px;
	width: 32px;
}

.wram-hr-manager-list span {
	display: grid;
	min-width: 0;
}

.wram-hr-manager-list small {
	color: var(--hr-muted);
	direction: ltr;
	font-size: 9px;
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wram-hr-empty,
.wram-hr-access {
	align-items: center;
	color: var(--hr-muted);
	display: flex;
	flex-direction: column;
	gap: 9px;
	justify-content: center;
	min-height: 160px;
	padding: 25px;
	text-align: center;
}

.wram-hr-empty > i,
.wram-hr-access > i {
	color: #a6c6d7;
	font-size: 31px;
}

.wram-hr-empty p,
.wram-hr-access p {
	margin: 0;
}

.wram-hr-access {
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 18px;
	margin: 30px auto;
	max-width: 680px;
	min-height: 320px;
}

.wram-hr-access h2 {
	font-size: 22px;
	font-weight: 900;
	margin: 0;
}

.wram-hr-dialog {
	background: #fff;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 30px 90px rgba(9, 25, 42, .3);
	color: var(--hr-text);
	direction: rtl;
	font-family: "Tajawal", Tahoma, Arial, sans-serif;
	margin: auto;
	max-height: calc(100vh - 34px);
	max-width: min(590px, calc(100vw - 28px));
	overflow: auto;
	padding: 26px;
	text-align: right;
	width: 100%;
}

.wram-hr-dialog-wide {
	max-width: min(920px, calc(100vw - 28px));
}

.wram-hr-dialog::backdrop {
	background: rgba(7, 20, 34, .62);
	backdrop-filter: blur(3px);
}

.wram-hr-dialog-close {
	left: 14px;
	margin: 0;
	position: absolute;
	top: 14px;
}

.wram-hr-dialog-close button {
	align-items: center;
	background: #f0f4f6;
	border: 0;
	border-radius: 50%;
	color: #5f6f80;
	cursor: pointer;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.wram-hr-dialog-head {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 22px;
	padding-left: 40px;
}

.wram-hr-dialog-head > i {
	align-items: center;
	background: var(--hr-brand-soft);
	border-radius: 14px;
	color: var(--hr-brand-dark);
	display: inline-flex;
	font-size: 20px;
	height: 52px;
	justify-content: center;
	width: 52px;
}

.wram-hr-dialog-head h2,
.wram-hr-dialog-profile h2 {
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	margin: 2px 0 0;
}

.wram-hr-dialog-profile {
	align-items: center;
	background: linear-gradient(115deg, #132237, #195472);
	border-radius: 16px;
	color: #fff;
	display: flex;
	gap: 15px;
	margin-bottom: 17px;
	padding: 20px;
}

.wram-hr-dialog-profile > img {
	border: 3px solid rgba(255,255,255,.3);
	border-radius: 17px;
	height: 82px;
	object-fit: cover;
	width: 82px;
}

.wram-hr-dialog-profile p {
	color: #b7cbd8;
	font-size: 12px;
	margin: 3px 0 0;
}

.wram-hr-dialog-profile .wram-hr-completion-ring {
	flex-basis: 82px;
	height: 82px;
	width: 82px;
}

.wram-hr-dialog-profile .wram-hr-completion-ring strong {
	font-size: 16px;
}

.wram-hr-employee-actions {
	align-items: center;
	border-top: 1px solid var(--hr-border);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
	padding-top: 18px;
}

.wram-hr-delete-scope {
	color: var(--hr-muted);
	display: block;
	flex-basis: 100%;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.65;
}

.wram-hr[data-wordpress-admin="0"] [data-hr-delete-employee],
.wram-hr[data-wordpress-admin="0"] .wram-hr-delete-scope {
	display: none !important;
}

.wram-hr-dialog-tabs {
	border-bottom: 1px solid var(--hr-border);
	display: flex;
	gap: 20px;
	margin-bottom: 19px;
}

.wram-hr-dialog-tabs button {
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--hr-muted);
	cursor: pointer;
	font-size: 13px;
	font-weight: 800;
	min-height: 42px;
	padding: 7px 3px;
}

.wram-hr-dialog-tabs button.is-active {
	border-bottom-color: var(--hr-brand);
	color: var(--hr-brand-dark);
}

.wram-hr-dialog-tabs em {
	background: #edf2f5;
	border-radius: 99px;
	font-size: 10px;
	font-style: normal;
	margin-right: 5px;
	padding: 2px 6px;
}

.wram-hr-document-list {
	display: grid;
	gap: 9px;
	margin-bottom: 18px;
}

.wram-hr-document-list article {
	align-items: center;
	background: #f7f9fa;
	border: 1px solid var(--hr-border);
	border-radius: 12px;
	display: grid;
	gap: 11px;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	padding: 11px;
}

.wram-hr-document-list article > i {
	align-items: center;
	border-radius: 10px;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.wram-hr-document-list article.is-ready > i {
	background: var(--hr-success-soft);
	color: var(--hr-success);
}

.wram-hr-document-list article.is-missing > i {
	background: var(--hr-danger-soft);
	color: var(--hr-danger);
}

.wram-hr-document-list div {
	display: grid;
	min-width: 0;
}

.wram-hr-document-list strong {
	font-size: 13px;
}

.wram-hr-document-list span {
	color: var(--hr-muted);
	font-size: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wram-hr-file-field {
	align-items: center;
	background: var(--hr-brand-soft);
	border: 1px dashed #8dcde9;
	border-radius: 13px;
	cursor: pointer;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	min-height: 112px;
	padding: 15px;
	text-align: center;
}

.wram-hr-file-field input {
	max-width: 100%;
}

.wram-hr-file-field i {
	color: var(--hr-brand-dark);
	font-size: 23px;
}

.wram-hr-file-field span {
	font-size: 11px !important;
}

.wram-hr-callout {
	align-items: flex-start;
	background: var(--hr-brand-soft);
	border-radius: 12px;
	color: #36566a;
	display: flex;
	font-size: 12px;
	gap: 10px;
	padding: 13px;
}

.wram-hr-callout i {
	color: var(--hr-brand-dark);
	margin-top: 3px;
}

.wram-hr-callout p {
	margin: 0;
}

.wram-hr-toast {
	background: #112235;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 12px;
	box-shadow: 0 16px 45px rgba(9,25,42,.28);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	left: 22px;
	max-width: min(410px, calc(100vw - 32px));
	padding: 13px 17px;
	position: fixed;
	top: 22px;
	z-index: 10020;
}

.wram-hr-toast.is-success {
	background: #087655;
}

.wram-hr-toast.is-error {
	background: #a9293c;
}

.wram-hr-mobile-nav {
	display: none;
}

.wram-hr-login {
	align-items: center;
	background: linear-gradient(135deg, #eaf7fd, #f5f7f9 48%, #d9f0fa);
	display: flex;
	justify-content: center;
	padding: 28px;
}

.wram-hr-login-card {
	background: rgba(255,255,255,.96);
	border: 1px solid rgba(255,255,255,.85);
	border-radius: 24px;
	box-shadow: 0 30px 80px rgba(17, 44, 67, .14);
	max-width: 470px;
	padding: clamp(25px, 5vw, 45px);
	width: 100%;
}

.wram-hr-login-brand {
	align-items: center;
	display: flex;
	gap: 15px;
	margin-bottom: 18px;
}

.wram-hr-login-brand img {
	height: 88px;
	object-fit: contain;
	width: 105px;
}

.wram-hr-login-brand span {
	color: var(--hr-brand-dark);
	font-size: 12px;
	font-weight: 800;
}

.wram-hr-login-brand h1 {
	font-size: 28px;
	font-weight: 900;
	margin: 2px 0 0;
}

.wram-hr-login-card > p {
	color: var(--hr-muted);
	font-size: 13px;
	margin: 0 0 22px;
}

.wram-hr-login-card #loginform {
	display: grid;
	gap: 14px;
}

.wram-hr-login-card #loginform p {
	margin: 0;
}

.wram-hr-login-card #loginform label {
	color: #536476;
	font-size: 12px;
	font-weight: 800;
}

.wram-hr-login-card .input {
	background: #f8fafb;
	border: 1px solid var(--hr-border);
	border-radius: 11px;
	box-shadow: none;
	margin-top: 6px;
	min-height: 48px;
	padding: 10px 12px;
	width: 100%;
}

.wram-hr-login-card .button-primary {
	background: var(--hr-brand);
	border: 0;
	border-radius: 11px;
	color: #fff;
	cursor: pointer;
	font-weight: 900;
	min-height: 48px;
	width: 100%;
}

@media (max-width: 1450px) {
	.wram-hr-kpis { grid-template-columns: repeat(3, 1fr); }
	.wram-hr-employee-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
	.wram-hr-balance-row.wram-hr-balance-full { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1150px) {
	.wram-hr-rail { flex-basis: 218px; }
	.wram-hr-brand img { height: 50px; width: 56px; }
	.wram-hr-main { padding-inline: 22px; }
	.wram-hr-employee-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
	.wram-hr-dashboard-grid { grid-template-columns: 1fr; }
	.wram-hr-policy-grid { grid-template-columns: 1fr; }
	.wram-hr-performance-list article { grid-template-columns: minmax(160px, 1.3fr) repeat(3, minmax(92px, 1fr)) 42px; }
}

@media (max-width: 960px) {
	body.wram-hr-page.wram-mobile-hide-admin-bar #wpadminbar { display: none !important; }
	body.wram-hr-page.wram-mobile-hide-admin-bar { margin-top: 0 !important; }
	.wram-hr-shell { display: block; }
	.wram-hr-rail { display: none; }
	.wram-hr-main { padding: 0 18px 100px; }
	.wram-hr-topbar { min-height: 92px; }
	body.admin-bar .wram-hr-topbar { top: 32px; }
	.wram-hr-mobile-nav {
		align-items: stretch;
		background: rgba(13, 24, 38, .97);
		bottom: 0;
		display: flex;
		left: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		padding: 7px max(7px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-right));
		position: fixed;
		right: 0;
		z-index: 80;
	}
	.wram-hr-mobile-nav::-webkit-scrollbar { display: none; }
	.wram-hr-mobile-nav button {
		border-radius: 9px;
		flex: 1 0 72px;
		flex-direction: column;
		font-size: 10px;
		gap: 3px;
		justify-content: center;
		min-height: 57px;
		padding: 5px 3px;
		text-align: center;
		width: auto;
	}
	.wram-hr-mobile-nav button i { font-size: 17px; }
	.wram-hr-mobile-nav button.is-active { background: rgba(45, 165, 222, .18); color: #fff; }
	.wram-hr-balance-row.wram-hr-balance-full { grid-template-columns: repeat(3, 1fr); }
	.wram-hr-manager-list { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 782px) {
	body.admin-bar .wram-hr-topbar { top: 46px; }
}

@media (max-width: 720px) {
	.wram-hr-main { padding-inline: 12px; }
	.wram-hr-topbar { align-items: flex-start; min-height: 84px; padding: 14px 0; }
	.wram-hr-topbar h1 { font-size: 23px; }
	.wram-hr-top-actions .wram-hr-date { display: none; }
	.wram-hr-top-actions .wram-hr-btn { font-size: 0; height: 43px; padding: 0; width: 43px; }
	.wram-hr-top-actions .wram-hr-btn i { font-size: 15px; }
	.wram-hr-hero,
	.wram-hr-profile-hero { border-radius: 18px; min-height: 180px; padding: 22px; }
	.wram-hr-hero-mark { display: none; }
	.wram-hr-hero p { font-size: 13px; }
	.wram-hr-kpis { grid-template-columns: repeat(2, 1fr); }
	.wram-hr-kpis article { align-items: flex-start; flex-direction: column; min-height: 128px; }
	.wram-hr-employee-grid { grid-template-columns: 1fr; }
	.wram-hr-toolbar { align-items: stretch; flex-direction: column; }
	.wram-hr-toolbar > label { flex-basis: auto; max-width: none; }
	.wram-hr-filter-pills { overflow-x: auto; }
	.wram-hr-self-grid { grid-template-columns: 1fr; }
	.wram-hr-profile-hero { align-items: flex-start; flex-wrap: wrap; }
	.wram-hr-profile-hero > img { height: 88px; width: 88px; }
	.wram-hr-profile-hero .wram-hr-completion-ring { flex-basis: 82px; height: 82px; width: 82px; }
	.wram-hr-balance-row,
	.wram-hr-balance-row.wram-hr-balance-full { grid-template-columns: repeat(2, 1fr); }
	.wram-hr-section-head { align-items: stretch; flex-direction: column; }
	.wram-hr-section-head > .wram-hr-btn { align-self: flex-start; }
	.wram-hr-request-card { align-items: start; grid-template-columns: 48px minmax(0, 1fr); }
	.wram-hr-request-card > img { border-radius: 12px; height: 48px; width: 48px; }
	.wram-hr-request-side { align-items: center; flex-direction: row; grid-column: 1 / -1; justify-content: space-between; width: 100%; }
	.wram-hr-performance-list article { grid-template-columns: repeat(3, 1fr); }
	.wram-hr-performance-owner { grid-column: 1 / -1; }
	.wram-hr-performance-list article > div:not(.wram-hr-performance-owner) { border-right: 0; padding-right: 0; }
	.wram-hr-performance-list article > .wram-hr-icon-btn { grid-column: 1 / -1; justify-self: end; }
	.wram-hr-table,
	.wram-hr-table tbody,
	.wram-hr-table tr,
	.wram-hr-table td { display: block; width: 100%; }
	.wram-hr-table thead { display: none; }
	.wram-hr-table tr { border-bottom: 8px solid var(--hr-bg); padding: 8px 0; }
	.wram-hr-table tr:last-child { border-bottom: 0; }
	.wram-hr-table td { align-items: center; border-bottom: 1px solid #edf1f4 !important; display: flex; gap: 10px; justify-content: space-between; padding: 10px 14px; }
	.wram-hr-table td::before { color: var(--hr-muted); content: attr(data-label); font-size: 10px; font-weight: 900; }
	.wram-hr-form-grid { grid-template-columns: 1fr; }
	.wram-hr-field-wide { grid-column: auto; }
	.wram-hr-money-grid { grid-template-columns: repeat(2, 1fr); }
	.wram-hr-manager-list { grid-template-columns: 1fr; }
	.wram-hr-dialog { border-radius: 18px 18px 0 0; margin: auto 0 0; max-height: calc(100vh - 24px); max-width: none; padding: 20px 15px; width: 100%; }
	.wram-hr-dialog-profile { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
	.wram-hr-dialog-profile > img { height: 68px; width: 68px; }
	.wram-hr-dialog-profile .wram-hr-completion-ring { margin-right: auto; }
	.wram-hr-toast { bottom: 86px; left: 16px; top: auto; }
	.wram-hr-delegated-list article { align-items: start; grid-template-columns: 52px minmax(0,1fr); }
	.wram-hr-delegated-list img { height: 52px; width: 52px; }
	.wram-hr-delegated-list .wram-hr-btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 420px) {
	.wram-hr-kpis { gap: 9px; }
	.wram-hr-kpis article { padding: 13px; }
	.wram-hr-kpis strong { font-size: 24px; }
	.wram-hr-balance-row,
	.wram-hr-balance-row.wram-hr-balance-full { grid-template-columns: 1fr 1fr; }
	.wram-hr-mobile-nav button span { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.wram-hr *,
	.wram-hr *::before,
	.wram-hr *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Theme compatibility shield. Hello Elementor applies a global button reset
 * with the same specificity as a single component class. These selectors are
 * intentionally scoped and more specific, so only HR controls are restored. */
.wram-hr button.wram-hr-btn {
	align-items: center;
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 11px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: inherit;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	min-height: 44px;
	padding: 10px 17px;
	text-align: center;
	text-transform: none;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
	user-select: none;
	white-space: normal;
}

.wram-hr button.wram-hr-btn-primary {
	background-color: var(--hr-brand);
	border-color: transparent;
	box-shadow: 0 9px 20px rgba(45, 165, 222, .23);
	color: #fff !important;
}

.wram-hr button.wram-hr-btn-primary:hover {
	background-color: var(--hr-brand-dark);
}

.wram-hr button.wram-hr-btn-soft {
	background-color: var(--hr-brand-soft);
	color: var(--hr-brand-dark) !important;
}

.wram-hr button.wram-hr-btn-soft:hover {
	background-color: #d8effa;
}

.wram-hr button.wram-hr-btn-danger {
	background-color: var(--hr-danger-soft);
	color: var(--hr-danger) !important;
}

.wram-hr button.wram-hr-btn-danger:hover {
	background-color: #ffd9df;
}

.wram-hr button.wram-hr-link {
	align-items: center;
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--hr-brand-dark);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	gap: 7px;
	padding: 5px;
	text-align: center;
	text-transform: none;
	user-select: none;
	white-space: normal;
}

.wram-hr button.wram-hr-action-card {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	color: inherit;
	display: grid;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	padding: 17px;
	text-align: right;
	text-transform: none;
	user-select: none;
	white-space: normal;
}

.wram-hr button.wram-hr-action-card:hover {
	border-color: #b8e0f2;
}

.wram-hr button.wram-hr-icon-btn {
	align-items: center;
	appearance: none;
	background-color: #f1f5f7;
	border: 0;
	border-radius: 9px;
	color: #506174 !important;
	display: inline-flex;
	font-family: inherit;
	font-size: inherit;
	height: 37px;
	justify-content: center;
	padding: 0;
	text-align: center;
	text-transform: none;
	user-select: none;
	white-space: normal;
	width: 37px;
}

.wram-hr button.wram-hr-icon-btn.is-approve {
	background-color: var(--hr-success-soft);
	color: var(--hr-success) !important;
}

.wram-hr button.wram-hr-icon-btn.is-reject {
	background-color: var(--hr-danger-soft);
	color: var(--hr-danger) !important;
}

.wram-hr button.wram-hr-icon-btn:hover {
	background-color: #e7edf1;
}

.wram-hr button.wram-hr-icon-btn.is-approve:hover {
	background-color: var(--hr-success-soft);
}

.wram-hr button.wram-hr-icon-btn.is-reject:hover {
	background-color: var(--hr-danger-soft);
}

@media (max-width: 720px) {
	.wram-hr .wram-hr-top-actions button.wram-hr-btn {
		font-size: 0;
		height: 43px;
		padding: 0;
		width: 43px;
	}
}

/* Central employee activity reporting. */
.wram-hr .wram-hr-self-activity {
	margin-top: 18px;
}

.wram-hr .wram-hr-activity-mini {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wram-hr .wram-hr-activity-mini div {
	min-height: 108px;
}

.wram-hr .wram-hr-activity-count {
	background: var(--hr-brand-soft);
	border-radius: 999px;
	color: var(--hr-brand-dark);
	font-size: 12px;
	font-weight: 900;
	padding: 8px 13px;
	white-space: nowrap;
}

.wram-hr .wram-hr-activity-filters {
	align-items: end;
	background: #fff;
	border: 1px solid var(--hr-border);
	border-radius: 16px;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(145px, 1fr)) auto;
	margin-bottom: 16px;
	padding: 15px;
}

.wram-hr .wram-hr-activity-filters > label {
	display: grid;
	gap: 6px;
}

.wram-hr .wram-hr-activity-filters > label > span {
	color: var(--hr-muted);
	font-size: 11px;
	font-weight: 900;
}

.wram-hr .wram-hr-activity-filters input,
.wram-hr .wram-hr-activity-filters select {
	background-color: #f7f9fa;
	border: 1px solid var(--hr-border);
	border-radius: 10px;
	color: var(--hr-text);
	height: 43px;
	min-width: 0;
	padding: 8px 11px;
	width: 100%;
}

.wram-hr .wram-hr-activity-filter-actions {
	display: flex;
	gap: 7px;
}

.wram-hr .wram-hr-activity-filter-actions .wram-hr-btn {
	white-space: nowrap;
}

.wram-hr .wram-hr-activity-table-wrap {
	overflow-x: auto;
}

.wram-hr .wram-hr-activity-table {
	min-width: 980px;
}

.wram-hr .wram-hr-activity-table td {
	vertical-align: middle;
}

.wram-hr .wram-hr-activity-action {
	background: var(--hr-brand-soft);
	border-radius: 999px;
	color: var(--hr-brand-dark);
	display: inline-flex;
	font-size: 11px;
	font-weight: 900;
	padding: 6px 9px;
	white-space: nowrap;
}

.wram-hr .wram-hr-device {
	align-items: center;
	display: inline-grid;
	font-size: 11px;
	font-weight: 800;
	gap: 2px 7px;
	grid-template-columns: 18px auto;
	white-space: nowrap;
}

.wram-hr .wram-hr-device i {
	color: var(--hr-brand-dark);
	grid-row: 1 / 3;
}

.wram-hr .wram-hr-device small {
	color: var(--hr-muted);
	font-size: 9px;
}

.wram-hr .wram-hr-activity-pagination {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 16px;
}

.wram-hr .wram-hr-activity-pagination > span {
	color: var(--hr-muted);
	font-size: 12px;
	font-weight: 900;
}

@media (max-width: 1150px) {
	.wram-hr .wram-hr-activity-mini {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wram-hr .wram-hr-activity-filters {
		grid-template-columns: repeat(2, minmax(180px, 1fr));
	}
}

@media (max-width: 720px) {
	.wram-hr .wram-hr-activity-mini {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wram-hr .wram-hr-activity-filters {
		grid-template-columns: 1fr;
	}

	.wram-hr .wram-hr-activity-filter-actions,
	.wram-hr .wram-hr-activity-filter-actions .wram-hr-btn {
		width: 100%;
	}

	.wram-hr .wram-hr-activity-filter-actions .wram-hr-btn {
		flex: 1 1 0;
	}

	.wram-hr .wram-hr-activity-table {
		min-width: 0;
	}
}