/*
 * YMN HRM Portal - UI/UX Design Layer
 * ------------------------------------
 * Version : 2.23.0
 * Purpose : A pure presentation layer that sits ON TOP of assets/css/style.css.
 *           It changes NO markup, NO class names and NO behaviour - it only
 *           restyles what already exists. Removing this file from the enqueue
 *           list restores the previous look exactly.
 *
 * Sections
 *   01  Design tokens
 *   02  Base + typography
 *   03  Motion + focus system
 *   04  App shell (sidebar / topbar / content)
 *   05  Surfaces (cards)
 *   06  Stat cards + KPIs
 */

/* =====================================================================
 * 01  DESIGN TOKENS
 * ===================================================================== */
.ymn-portal {
	/* Brand */
	--ymn-navy: #0b2149;
	--ymn-navy-light: #16356b;
	--ymn-navy-deep: #061630;
	--ymn-accent: #dc2626;
	--ymn-accent-soft: #fef2f2;
	--ymn-gold: #c9a24b;

	/* Neutrals */
	--ymn-ink: #0f172a;
	--ymn-ink-2: #334155;
	--ymn-ink-3: #64748b;
	--ymn-ink-4: #94a3b8;
	--ymn-line: #e8ecf3;
	--ymn-line-soft: #f1f5f9;
	--ymn-surface: #ffffff;
	--ymn-canvas: #f6f8fc;

	/* Radii */
	--ymn-r-xs: 6px;
	--ymn-r-sm: 9px;
	--ymn-r-md: 13px;
	--ymn-r-lg: 18px;
	--ymn-r-pill: 999px;

	/* Elevation - layered, low-opacity shadows */
	--ymn-sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
	--ymn-sh-2: 0 2px 4px rgba(15, 23, 42, .04), 0 6px 16px -6px rgba(15, 23, 42, .10);
	--ymn-sh-3: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 32px -12px rgba(15, 23, 42, .16);
	--ymn-sh-pop: 0 12px 28px -8px rgba(11, 33, 73, .22), 0 2px 8px rgba(15, 23, 42, .06);

	/* Motion */
	--ymn-ease: cubic-bezier(.4, 0, .2, 1);
	--ymn-ease-out: cubic-bezier(.16, 1, .3, 1);
	--ymn-fast: .15s;
	--ymn-base: .24s;

	/* Type */
	--ymn-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ymn-font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	/* Focus */
	--ymn-ring: 0 0 0 3px rgba(37, 99, 235, .28);
}

/* =====================================================================
 * 02  BASE + TYPOGRAPHY
 * ===================================================================== */
.ymn-portal {
	font-family: var(--ymn-font);
	color: var(--ymn-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	letter-spacing: -.006em;
}

.ymn-portal.ymn-shell { background: var(--ymn-canvas); }

.ymn-portal h1,
.ymn-portal h2,
.ymn-portal h3,
.ymn-portal h4 {
	letter-spacing: -.021em;
	color: var(--ymn-ink);
	text-wrap: balance;
}

.ymn-portal p { text-wrap: pretty; }

/* Numbers everywhere line up in columns. */
.ymn-portal .ymn-stat-value-v2,
.ymn-portal .ymn-ch-kpi-num,
.ymn-portal .ymn-mcard-kpi,
.ymn-portal .ymn-stat-num,
.ymn-portal .ymn-progress-pct,
.ymn-portal table td,
.ymn-portal table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* The old monospace micro-labels become a refined tracked-out caps style. */
.ymn-portal .ymn-stat-label-v2,
.ymn-portal .ymn-eff-title,
.ymn-portal .ymn-eff-box .ymn-eff-tag,
.ymn-portal .ymn-table-v2 th,
.ymn-portal .ymn-export-filters label,
.ymn-portal .ymn-ch-kpi-lbl {
	font-family: var(--ymn-font);
	font-weight: 600;
	letter-spacing: .075em;
	color: var(--ymn-ink-4);
}

.ymn-portal .ymn-stat-value-v2,
.ymn-portal .ymn-eff-box .ymn-eff-avg,
.ymn-portal .ymn-dept-code-pill,
.ymn-portal .ymn-shell-brand .ymn-brand-sub,
.ymn-portal .ymn-shell-profile .ymn-profile-role {
	font-family: var(--ymn-font);
}

.ymn-portal .ymn-muted,
.ymn-portal .ymn-card-sub { color: var(--ymn-ink-3); }

/* Text selection picks up the brand. */
.ymn-portal ::selection { background: rgba(11, 33, 73, .14); color: var(--ymn-ink); }

/* =====================================================================
 * 03  MOTION + FOCUS SYSTEM
 * ===================================================================== */
.ymn-portal a,
.ymn-portal button,
.ymn-portal input,
.ymn-portal select,
.ymn-portal textarea,
.ymn-portal .ymn-card-v2,
.ymn-portal .ymn-stat-card-v2,
.ymn-portal .ymn-dept-card-v2,
.ymn-portal .ymn-ch-card {
	transition:
		background-color var(--ymn-fast) var(--ymn-ease),
		border-color var(--ymn-fast) var(--ymn-ease),
		color var(--ymn-fast) var(--ymn-ease),
		box-shadow var(--ymn-base) var(--ymn-ease),
		transform var(--ymn-base) var(--ymn-ease-out),
		opacity var(--ymn-fast) var(--ymn-ease);
}

/* Keyboard users get a clear, consistent ring; mouse users never see it. */
.ymn-portal a:focus-visible,
.ymn-portal button:focus-visible,
.ymn-portal input:focus-visible,
.ymn-portal select:focus-visible,
.ymn-portal textarea:focus-visible,
.ymn-portal [tabindex]:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--ymn-ring);
	border-radius: var(--ymn-r-xs);
}

/* Content fades up once on load - subtle, never distracting. */
@keyframes ymnRise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.ymn-portal .ymn-shell-content > * {
	animation: ymnRise .38s var(--ymn-ease-out) both;
}
.ymn-portal .ymn-shell-content > *:nth-child(1) { animation-delay: .02s; }
.ymn-portal .ymn-shell-content > *:nth-child(2) { animation-delay: .06s; }
.ymn-portal .ymn-shell-content > *:nth-child(3) { animation-delay: .10s; }
.ymn-portal .ymn-shell-content > *:nth-child(4) { animation-delay: .14s; }
.ymn-portal .ymn-shell-content > *:nth-child(n+5) { animation-delay: .18s; }

/* =====================================================================
 * 04  APP SHELL
 * ===================================================================== */

/* ---- Sidebar --------------------------------------------------------- */
.ymn-portal .ymn-shell-sidebar {
	width: 264px;
	background:
		radial-gradient(120% 60% at 0% 0%, rgba(37, 99, 235, .16) 0%, transparent 62%),
		linear-gradient(180deg, #0b2149 0%, #081a3a 58%, #061630 100%);
	border-right: 1px solid rgba(148, 163, 184, .14);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}

@media (min-width: 901px) {
	.ymn-portal .ymn-shell-sidebar {
		position: sticky;
		top: 0;
		align-self: flex-start;
		height: 100vh;
		overflow: hidden;
	}
}

.ymn-portal .ymn-shell-brand {
	padding: 20px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ymn-portal .ymn-shell-brand .ymn-brand-badge {
	height: 36px;
	width: 36px;
	border-radius: 10px;
	background: linear-gradient(140deg, #ef4444 0%, #b91c1c 100%);
	box-shadow: 0 4px 12px -3px rgba(220, 38, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
	font-size: .8rem;
}
.ymn-portal .ymn-shell-brand .ymn-brand-title {
	font-size: .76rem;
	letter-spacing: .06em;
	color: #fff;
}
.ymn-portal .ymn-shell-brand .ymn-brand-sub {
	letter-spacing: .04em;
	color: #8ea3c4;
}

/* Signed-in identity block */
.ymn-portal .ymn-shell-profile {
	padding: 14px 16px;
	background: rgba(255, 255, 255, .035);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ymn-portal .ymn-shell-profile .ymn-profile-avatar,
.ymn-portal .ymn-sb-photo {
	height: 40px;
	width: 40px;
	border-radius: var(--ymn-r-pill);
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, .16);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.ymn-portal .ymn-shell-profile .ymn-profile-name { font-size: .82rem; color: #fff; }
.ymn-portal .ymn-shell-profile .ymn-profile-role { color: #93a7c7; letter-spacing: .01em; }

/* Navigation */
.ymn-portal .ymn-shell-nav {
	padding: 14px 12px 18px;
	gap: 3px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.ymn-portal .ymn-shell-nav::-webkit-scrollbar { width: 6px; }
.ymn-portal .ymn-shell-nav::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .16);
	border-radius: var(--ymn-r-pill);
}
.ymn-portal .ymn-shell-nav::-webkit-scrollbar-track { background: transparent; }

.ymn-portal .ymn-shell-nav a,
.ymn-portal .ymn-shell-nav .ymn-nav-parent {
	position: relative;
	padding: 9px 12px 9px 13px;
	border-radius: 10px;
	font-size: .79rem;
	font-weight: 500;
	color: #b8c6dd;
	letter-spacing: -.002em;
}
.ymn-portal .ymn-shell-nav a .dashicons,
.ymn-portal .ymn-shell-nav .ymn-nav-parent .dashicons {
	opacity: .72;
	transition: opacity var(--ymn-fast) var(--ymn-ease), transform var(--ymn-base) var(--ymn-ease-out);
}

.ymn-portal .ymn-shell-nav a:hover,
.ymn-portal .ymn-shell-nav .ymn-nav-parent:hover {
	background: rgba(255, 255, 255, .07);
	color: #fff;
	transform: translateX(2px);
}
.ymn-portal .ymn-shell-nav a:hover .dashicons,
.ymn-portal .ymn-shell-nav .ymn-nav-parent:hover .dashicons { opacity: 1; }

/* Active item: brand-red wash with a solid accent rail instead of a flat block. */
.ymn-portal .ymn-shell-nav a.active,
.ymn-portal .ymn-shell-nav .ymn-nav-parent.active {
	background: linear-gradient(90deg, rgba(220, 38, 38, .26) 0%, rgba(220, 38, 38, .10) 100%);
	color: #fff;
	font-weight: 650;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ymn-portal .ymn-shell-nav a.active::before,
.ymn-portal .ymn-shell-nav .ymn-nav-parent.active::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	height: 22px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: #ef4444;
	box-shadow: 0 0 12px rgba(239, 68, 68, .9);
}
.ymn-portal .ymn-shell-nav a.active .dashicons { opacity: 1; color: #fca5a5; }

/* Grouped menu entries */
.ymn-portal .ymn-nav-parent .ymn-nav-caret {
	margin-left: auto;
	font-size: 14px;
	width: 14px;
	height: 14px;
	opacity: .5;
	transition: transform var(--ymn-base) var(--ymn-ease);
}
.ymn-portal .ymn-nav-group.is-open .ymn-nav-caret { transform: rotate(180deg); opacity: .85; }
.ymn-portal .ymn-nav-sub a {
	font-size: .755rem;
	padding-top: 7px;
	padding-bottom: 7px;
	color: #9fb0cb;
}
.ymn-portal .ymn-nav-sub a.active::before { left: -12px; height: 18px; }

.ymn-portal .ymn-nav-badge {
	margin-left: auto;
	background: #ef4444;
	color: #fff;
	font-size: .6rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--ymn-r-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, .22);
}

.ymn-portal .ymn-shell-footer {
	background: rgba(0, 0, 0, .22);
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.ymn-portal .ymn-shell-footer p {
	font-family: var(--ymn-font);
	letter-spacing: .05em;
	color: #7f93b4;
}

/* ---- Slim global topbar --------------------------------------------- */
.ymn-portal .ymn-topbar-slim {
	position: relative;
	z-index: 40;
	background: linear-gradient(180deg, #0b2149 0%, #0a1e42 100%);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 6px 20px -12px rgba(0, 0, 0, .6);
}
.ymn-portal .ymn-topbar-brand .ymn-brand-badge {
	background: linear-gradient(140deg, #ef4444 0%, #b91c1c 100%);
	box-shadow: 0 3px 10px -2px rgba(220, 38, 38, .5);
}
.ymn-portal .ymn-help-btn,
.ymn-portal .ymn-bell-wrap {
	border-radius: 10px;
	padding: 7px;
	color: #cbd5e1;
}
.ymn-portal .ymn-help-btn:hover,
.ymn-portal .ymn-bell-wrap:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	transform: translateY(-1px);
}
.ymn-portal .ymn-bell-badge {
	box-shadow: 0 0 0 2px rgba(11, 33, 73, .9);
	font-weight: 700;
}
.ymn-portal .ymn-topbar-profile-btn {
	border-radius: var(--ymn-r-pill);
	padding: 5px 12px 5px 5px;
}
.ymn-portal .ymn-topbar-profile-btn:hover { background: rgba(255, 255, 255, .1); }
.ymn-portal .ymn-topbar-profile-btn img,
.ymn-portal .ymn-avatar-fallback {
	border: 1.5px solid rgba(255, 255, 255, .2);
}
.ymn-portal .ymn-hamburger { border-radius: 9px; padding: 6px; }
.ymn-portal .ymn-hamburger:hover { background: rgba(255, 255, 255, .1); }

/* Profile dropdown reads as a floating panel. */
.ymn-portal .ymn-profile-dropdown {
	border-radius: var(--ymn-r-md);
	border: 1px solid var(--ymn-line);
	box-shadow: var(--ymn-sh-3);
	transform-origin: top right;
}
.ymn-portal .ymn-profile-dropdown.open { animation: ymnPop .18s var(--ymn-ease-out) both; }
@keyframes ymnPop {
	from { opacity: 0; transform: translateY(-6px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* ---- Page header ----------------------------------------------------- */
.ymn-portal .ymn-shell-topbar {
	background:
		radial-gradient(90% 180% at 0% 0%, rgba(37, 99, 235, .18) 0%, transparent 60%),
		linear-gradient(180deg, #0b2149 0%, #0a1c3d 100%);
	padding: 20px 30px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ymn-portal .ymn-shell-topbar h1 {
	font-size: 1.02rem;
	letter-spacing: .01em;
	color: #fff;
}
.ymn-portal .ymn-shell-topbar .ymn-role-pill {
	font-family: var(--ymn-font);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-size: .6rem;
	padding: 3px 9px;
	border-radius: var(--ymn-r-pill);
	background: rgba(239, 68, 68, .18);
	color: #fca5a5;
	border: 1px solid rgba(239, 68, 68, .34);
}
.ymn-portal .ymn-shell-topbar p { color: #9fb2d0; }

.ymn-portal .ymn-shell-content { padding: 28px 30px 56px; }

/* Mobile drawer gets real depth + a blurred scrim. */
@media (max-width: 900px) {
	.ymn-portal .ymn-shell-sidebar {
		box-shadow: 24px 0 48px -24px rgba(0, 0, 0, .7);
		transition: transform .3s var(--ymn-ease-out);
	}
	.ymn-portal .ymn-sidebar-overlay.open {
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		background: rgba(6, 22, 48, .5);
	}
	.ymn-portal .ymn-shell-content { padding: 20px 16px 48px; }
	.ymn-portal .ymn-shell-topbar { padding: 16px 18px; }
}

/* =====================================================================
 * 05  SURFACES (CARDS)
 * ===================================================================== */
.ymn-portal .ymn-card-v2,
.ymn-portal .ymn-dept-card-v2,
.ymn-portal .ymn-ch-card,
.ymn-portal .ymn-panel {
	border: 1px solid var(--ymn-line);
	border-radius: var(--ymn-r-lg);
	box-shadow: var(--ymn-sh-1);
	background: var(--ymn-surface);
}

.ymn-portal .ymn-card-v2 { padding: 24px; }

.ymn-portal .ymn-card-v2:hover,
.ymn-portal .ymn-dept-card-v2:hover {
	box-shadow: var(--ymn-sh-2);
	border-color: #dde4ef;
}

.ymn-portal .ymn-card-v2 h3 {
	font-size: .95rem;
	font-weight: 700;
	color: var(--ymn-ink);
	letter-spacing: -.015em;
}
.ymn-portal .ymn-card-v2 .ymn-card-sub {
	font-size: .765rem;
	line-height: 1.5;
	color: var(--ymn-ink-3);
}
.ymn-portal .ymn-card-v2-head {
	border-bottom: 1px solid var(--ymn-line-soft);
	padding-bottom: 15px;
	margin-bottom: 17px;
}

/* Toolbar row above tables */
.ymn-portal .ymn-toolbar-row {
	border-bottom: 1px solid var(--ymn-line-soft);
	padding-bottom: 16px;
	margin-bottom: 18px;
}

/* Efficiency boxes */
.ymn-portal .ymn-eff-box {
	border-radius: var(--ymn-r-md);
	position: relative;
	overflow: hidden;
	padding: 15px 15px 15px 18px;
}
.ymn-portal .ymn-eff-box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
}
.ymn-portal .ymn-eff-box.best::before { background: #22c55e; }
.ymn-portal .ymn-eff-box.worst::before { background: #ef4444; }
.ymn-portal .ymn-eff-box.best { background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); border-color: #d6f5e0; }
.ymn-portal .ymn-eff-box.worst { background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%); border-color: #fbdada; }

/* =====================================================================
 * 06  STAT CARDS + KPIs
 * ===================================================================== */
.ymn-portal .ymn-stat-cards { gap: 18px; }

.ymn-portal .ymn-stat-card-v2 {
	position: relative;
	border: 1px solid var(--ymn-line);
	border-radius: var(--ymn-r-lg);
	padding: 20px 22px;
	box-shadow: var(--ymn-sh-1);
	overflow: hidden;
}

/* A hairline of colour along the top edge, revealed on hover. */
.ymn-portal .ymn-stat-card-v2::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ymn-accent), #f97316);
	opacity: 0;
	transition: opacity var(--ymn-base) var(--ymn-ease);
}
.ymn-portal .ymn-stat-card-v2:hover {
	transform: translateY(-3px);
	box-shadow: var(--ymn-sh-2);
}
.ymn-portal .ymn-stat-card-v2:hover::after { opacity: 1; }

.ymn-portal .ymn-stat-icon {
	height: 46px;
	width: 46px;
	border-radius: 13px;
	position: relative;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}
.ymn-portal .ymn-stat-icon.blue   { background: linear-gradient(140deg, #eff6ff, #dbeafe); color: #1d4ed8; }
.ymn-portal .ymn-stat-icon.red    { background: linear-gradient(140deg, #fef2f2, #fee2e2); color: #b91c1c; }
.ymn-portal .ymn-stat-icon.green  { background: linear-gradient(140deg, #f0fdf4, #dcfce7); color: #15803d; }
.ymn-portal .ymn-stat-icon.purple { background: linear-gradient(140deg, #faf5ff, #f3e8ff); color: #7e22ce; }
.ymn-portal .ymn-stat-icon.gold   { background: linear-gradient(140deg, #fffbeb, #fef3c7); color: #a16207; }

.ymn-portal .ymn-stat-card-v2 .ymn-stat-label-v2 {
	font-size: .655rem;
	margin-bottom: 3px;
}
.ymn-portal .ymn-stat-card-v2 .ymn-stat-value-v2 {
	font-size: 1.5rem;
	font-weight: 750;
	color: var(--ymn-ink);
	letter-spacing: -.03em;
	line-height: 1.15;
}

/* Chairman / executive KPI tiles */
.ymn-portal .ymn-ch-kpi { border-radius: var(--ymn-r-md); }
.ymn-portal .ymn-ch-kpi-num { letter-spacing: -.028em; }
.ymn-portal .ymn-ch-kpi-lbl { font-size: .64rem; }

/* Progress bars */
.ymn-portal .ymn-progress-track {
	height: 7px;
	background: var(--ymn-line-soft);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}
.ymn-portal .ymn-progress-fill {
	background: linear-gradient(90deg, #ef4444, #dc2626);
	border-radius: var(--ymn-r-pill);
	transition: width .6s var(--ymn-ease-out);
}

/*
 *   07  Data tables
 *   08  Buttons
 *   09  Forms, filters, search
 *   10  Badges, pills, status
 *   11  Alerts + notifications
 *   12  Auth pages
 *   13  Empty states + scrollbars
 *   14  Accessibility, RTL, print
 */

/* =====================================================================
 * 07  DATA TABLES
 * ===================================================================== */
.ymn-portal .ymn-table-wrap {
	border-radius: var(--ymn-r-md);
	border: 1px solid var(--ymn-line);
	overflow: auto;
	background: var(--ymn-surface);
	-webkit-overflow-scrolling: touch;
}

.ymn-portal .ymn-table-v2 { font-size: .8rem; }

.ymn-portal .ymn-table-v2 thead tr {
	background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
	border-bottom: 1px solid var(--ymn-line);
}

/* Header stays visible while scrolling long rosters. */
.ymn-portal .ymn-table-wrap .ymn-table-v2 thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f7f9fc;
	box-shadow: inset 0 -1px 0 var(--ymn-line);
}

.ymn-portal .ymn-table-v2 th {
	padding: 11px 14px;
	font-size: .625rem;
	white-space: nowrap;
}
.ymn-portal .ymn-table-v2 td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ymn-line-soft);
	color: var(--ymn-ink-2);
	line-height: 1.45;
}
.ymn-portal .ymn-table-v2 tbody tr {
	transition: background-color var(--ymn-fast) var(--ymn-ease);
}
.ymn-portal .ymn-table-v2 tbody tr:hover td { background: #f8fbff; }
.ymn-portal .ymn-table-v2 tbody tr:last-child td { border-bottom: none; }

.ymn-portal .ymn-director-name {
	color: var(--ymn-ink);
	font-weight: 650;
	letter-spacing: -.012em;
}
.ymn-portal .ymn-director-role-tag {
	background: #eef2f9;
	color: var(--ymn-ink-3);
	border-radius: var(--ymn-r-xs);
	padding: 2px 6px;
	font-size: .56rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ymn-portal .ymn-avatar-sm {
	height: 36px;
	width: 36px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--ymn-line), var(--ymn-sh-1);
}

/* Row action icons only reveal their tint on hover. */
.ymn-portal .ymn-icon-action {
	height: 30px;
	width: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	margin-right: 4px;
	color: var(--ymn-ink-3);
}
.ymn-portal .ymn-icon-action:hover {
	background: #eef2f9;
	color: var(--ymn-navy);
	transform: translateY(-1px);
}
.ymn-portal .ymn-icon-action.danger:hover { background: var(--ymn-accent-soft); color: #b91c1c; }

.ymn-portal .ymn-suspend-btn { border-radius: var(--ymn-r-pill); padding: 5px 12px; }
.ymn-portal .ymn-suspend-btn:hover { filter: brightness(.96); }

/* Legacy table styling kept in step with the v2 look. */
.ymn-portal .ymn-table th {
	color: var(--ymn-ink-4);
	font-weight: 600;
	letter-spacing: .06em;
	border-bottom: 1px solid var(--ymn-line);
}
.ymn-portal .ymn-table td { border-bottom: 1px solid var(--ymn-line-soft); }
.ymn-portal .ymn-table tbody tr:hover td { background: #f8fbff; }

/* =====================================================================
 * 08  BUTTONS
 * ===================================================================== */
.ymn-portal .ymn-btn,
.ymn-portal .ymn-btn-primary,
.ymn-portal .ymn-icon-btn-red,
.ymn-portal .ymn-icon-btn-outline,
.ymn-portal .ymn-btn-secondary {
	border-radius: 10px;
	font-weight: 650;
	letter-spacing: -.005em;
	line-height: 1.2;
}

.ymn-portal .ymn-btn-primary,
.ymn-portal .ymn-shell-content .ymn-btn-primary {
	background: linear-gradient(180deg, #16356b 0%, #0b2149 100%);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 1px 2px rgba(11, 33, 73, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.ymn-portal .ymn-btn-primary:hover,
.ymn-portal .ymn-shell-content .ymn-btn-primary:hover {
	background: linear-gradient(180deg, #1c407c 0%, #102a58 100%);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px rgba(11, 33, 73, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ymn-portal .ymn-btn-primary:active,
.ymn-portal .ymn-shell-content .ymn-btn-primary:active {
	transform: translateY(0);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
}

.ymn-portal .ymn-icon-btn-red {
	background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 1px 2px rgba(185, 28, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ymn-portal .ymn-icon-btn-red:hover {
	background: linear-gradient(180deg, #f05252 0%, #c81e1e 100%);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -7px rgba(220, 38, 38, .65), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.ymn-portal .ymn-icon-btn-red:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); }

.ymn-portal .ymn-icon-btn-outline,
.ymn-portal .ymn-btn-secondary,
.ymn-portal .ymn-shell-content .ymn-icon-btn-outline,
.ymn-portal .ymn-shell-content .ymn-btn-secondary {
	background: #fff;
	border: 1px solid var(--ymn-line);
	color: var(--ymn-navy);
	box-shadow: var(--ymn-sh-1);
}
.ymn-portal .ymn-icon-btn-outline:hover,
.ymn-portal .ymn-btn-secondary:hover,
.ymn-portal .ymn-shell-content .ymn-icon-btn-outline:hover,
.ymn-portal .ymn-shell-content .ymn-btn-secondary:hover {
	background: #f8fafc;
	border-color: #cfd8e6;
	transform: translateY(-1px);
	box-shadow: var(--ymn-sh-2);
}
.ymn-portal .ymn-icon-btn-outline:active,
.ymn-portal .ymn-btn-secondary:active { transform: translateY(0); box-shadow: none; }

.ymn-portal .ymn-btn-outline:hover { background: var(--ymn-navy); color: #fff; }

.ymn-portal button:disabled,
.ymn-portal .ymn-btn-primary:disabled,
.ymn-portal .ymn-icon-btn-red:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	filter: grayscale(.25);
}

/* =====================================================================
 * 09  FORMS, FILTERS, SEARCH
 * ===================================================================== */
.ymn-portal form label {
	font-weight: 600;
	font-size: .8rem;
	color: var(--ymn-ink-2);
	letter-spacing: -.005em;
}

.ymn-portal form input[type=text],
.ymn-portal form input[type=email],
.ymn-portal form input[type=password],
.ymn-portal form input[type=date],
.ymn-portal form input[type=number],
.ymn-portal form input[type=tel],
.ymn-portal form input[type=url],
.ymn-portal form input[type=file],
.ymn-portal form select,
.ymn-portal form textarea {
	border: 1px solid #dde3ec;
	border-radius: 10px;
	padding: 11px 13px;
	font-size: .875rem;
	font-family: inherit;
	color: var(--ymn-ink);
	background-color: #fdfefe;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
.ymn-portal form input:hover:not(:disabled),
.ymn-portal form select:hover:not(:disabled),
.ymn-portal form textarea:hover:not(:disabled) { border-color: #c9d3e2; }

.ymn-portal form input:focus,
.ymn-portal form select:focus,
.ymn-portal form textarea:focus {
	outline: none;
	border-color: var(--ymn-navy-light);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(22, 53, 107, .13);
}
.ymn-portal form input::placeholder,
.ymn-portal form textarea::placeholder { color: #a9b4c6; }

/* Native selects get a custom chevron so they match the rest of the UI. */
.ymn-portal form select,
.ymn-portal .ymn-filter-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

.ymn-portal .ymn-filter-select {
	border-radius: 9px;
	padding: 9px 30px 9px 12px;
	font-weight: 600;
	font-size: .74rem;
	color: var(--ymn-ink-2);
	border-color: var(--ymn-line);
	box-shadow: var(--ymn-sh-1);
}
.ymn-portal .ymn-filter-select:hover { border-color: #cfd8e6; }

.ymn-portal .ymn-search-bar {
	border-radius: 11px;
	border: 1px solid var(--ymn-line);
	background: #fbfcfe;
	padding: 11px 15px;
}
.ymn-portal .ymn-search-bar:focus-within {
	border-color: var(--ymn-navy-light);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(22, 53, 107, .12);
}
.ymn-portal .ymn-search-bar input { font-size: .82rem; }

.ymn-portal .ymn-form-grid { gap: 10px 18px; }

/* Range sliders */
.ymn-portal .ymn-slider { height: 6px; border-radius: var(--ymn-r-pill); accent-color: var(--ymn-navy); }
.ymn-portal .ymn-slider-out {
	border-radius: 8px;
	background: #eef2f9;
	color: var(--ymn-navy);
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--ymn-line);
	min-width: 40px;
}

/* =====================================================================
 * 10  BADGES, PILLS, STATUS
 * ===================================================================== */
.ymn-portal .ymn-badge,
.ymn-portal .ymn-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	letter-spacing: .005em;
	line-height: 1.5;
	border-radius: var(--ymn-r-pill);
}
.ymn-portal .ymn-badge { padding: 3px 11px; font-size: .715rem; }
.ymn-portal .ymn-status-pill { padding: 4px 11px; font-size: .655rem; font-weight: 700; }

/* A small dot makes status readable without relying on colour alone. */
.ymn-portal .ymn-status-pill::before {
	content: "";
	height: 6px;
	width: 6px;
	border-radius: var(--ymn-r-pill);
	background: currentColor;
	flex-shrink: 0;
	opacity: .85;
}
.ymn-portal .ymn-status-pill.active,
.ymn-portal .ymn-status-pill.approved { background: #e8f9ee; color: #15803d; }
.ymn-portal .ymn-status-pill.suspended { background: #fdeaea; color: #b91c1c; }
.ymn-portal .ymn-status-pill.pending { background: #fdf5d8; color: #92650b; }
.ymn-portal .ymn-status-pill.inactive { background: #eef2f7; color: #64748b; }

.ymn-portal .ymn-dept-code-pill {
	border-radius: var(--ymn-r-xs);
	letter-spacing: .05em;
	padding: 3px 8px;
	background: var(--ymn-accent-soft);
	border: 1px solid #fadcdc;
}

.ymn-portal .ymn-badge-latest {
	background: linear-gradient(135deg, #f3d78a, #c9a24b);
	color: #3f2d05;
	box-shadow: 0 1px 3px rgba(201, 162, 75, .45);
	border: none;
}

/* =====================================================================
 * 11  ALERTS + NOTIFICATIONS
 * ===================================================================== */
.ymn-portal .ymn-alert {
	border-radius: var(--ymn-r-md);
	padding: 14px 16px 14px 18px;
	font-size: .855rem;
	line-height: 1.55;
	position: relative;
	overflow: hidden;
	box-shadow: var(--ymn-sh-1);
	animation: ymnRise .3s var(--ymn-ease-out) both;
}
.ymn-portal .ymn-alert::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
}
.ymn-portal .ymn-alert-error {
	background: linear-gradient(120deg, #fef2f2, #fff);
	border: 1px solid #f8d4d4;
	color: #991b1b;
}
.ymn-portal .ymn-alert-error::before { background: #dc2626; }
.ymn-portal .ymn-alert-success {
	background: linear-gradient(120deg, #f0fdf4, #fff);
	border: 1px solid #cdeed9;
	color: #166534;
}
.ymn-portal .ymn-alert-success::before { background: #16a34a; }

.ymn-portal .ymn-notif {
	border-radius: var(--ymn-r-md);
	border: 1px solid var(--ymn-line);
	background: #fff;
	padding: 15px 16px;
	box-shadow: var(--ymn-sh-1);
}
.ymn-portal .ymn-notif:hover { box-shadow: var(--ymn-sh-2); transform: translateX(2px); }
.ymn-portal .ymn-notif.is-read { opacity: .62; }

/* =====================================================================
 * 12  AUTH PAGES
 * ===================================================================== */
.ymn-auth-page {
	background:
		radial-gradient(60% 50% at 15% 0%, rgba(37, 99, 235, .10) 0%, transparent 60%),
		radial-gradient(50% 45% at 100% 100%, rgba(220, 38, 38, .08) 0%, transparent 60%);
}
.ymn-auth-card {
	border-radius: 20px;
	border: 1px solid var(--ymn-line, #e8ecf3);
	padding: 38px 36px;
	box-shadow: 0 24px 48px -24px rgba(11, 33, 73, .3), 0 2px 8px rgba(15, 23, 42, .05);
	animation: ymnRise .45s cubic-bezier(.16, 1, .3, 1) both;
}
.ymn-auth-card h1 { font-size: 1.6rem; letter-spacing: -.025em; }
.ymn-auth-sub { font-size: .9rem; line-height: 1.55; }

/* Hero on the public homepage */
.ymn-portal .ymn-hero {
	border-radius: 22px;
	background:
		radial-gradient(70% 120% at 10% 0%, rgba(37, 99, 235, .3) 0%, transparent 60%),
		linear-gradient(135deg, #0b2149 0%, #16356b 100%);
	box-shadow: 0 24px 60px -30px rgba(11, 33, 73, .6);
}
.ymn-portal .ymn-hero h1 { color: #fff; letter-spacing: -.03em; }

/* =====================================================================
 * 13  EMPTY STATES + SCROLLBARS
 * ===================================================================== */
.ymn-portal .ymn-ch-empty {
	border-radius: var(--ymn-r-md);
	border: 1px dashed #d8e0ec;
	background: #fbfcfe;
	color: var(--ymn-ink-4);
	padding: 26px 18px;
	text-align: center;
	font-size: .82rem;
}

.ymn-portal *::-webkit-scrollbar { width: 10px; height: 10px; }
.ymn-portal *::-webkit-scrollbar-track { background: transparent; }
.ymn-portal *::-webkit-scrollbar-thumb {
	background: #cdd6e3;
	border-radius: var(--ymn-r-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}
.ymn-portal *::-webkit-scrollbar-thumb:hover { background: #b3c0d2; background-clip: content-box; }

/* =====================================================================
 * 14  ACCESSIBILITY, RTL, PRINT
 * ===================================================================== */

/* Respect the operating-system "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
	.ymn-portal *,
	.ymn-portal *::before,
	.ymn-portal *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.ymn-portal .ymn-card-v2:hover,
	.ymn-portal .ymn-stat-card-v2:hover,
	.ymn-portal .ymn-btn-primary:hover,
	.ymn-portal .ymn-icon-btn-red:hover { transform: none; }
}

/* Stronger borders for users who ask for higher contrast. */
@media (prefers-contrast: more) {
	.ymn-portal .ymn-card-v2,
	.ymn-portal .ymn-stat-card-v2,
	.ymn-portal .ymn-table-wrap { border-color: #b9c4d4; }
	.ymn-portal .ymn-card-sub,
	.ymn-portal .ymn-muted { color: #4b5768; }
}

/* Urdu / RTL: mirror the sidebar accent rail and nav hover shift. */
.ymn-rtl .ymn-shell-nav a.active::before,
.ymn-rtl .ymn-shell-nav .ymn-nav-parent.active::before {
	left: auto;
	right: -12px;
	border-radius: 3px 0 0 3px;
}
.ymn-rtl .ymn-shell-nav a:hover { transform: translateX(-2px); }
.ymn-rtl .ymn-nav-parent .ymn-nav-caret { margin-left: 0; margin-right: auto; }
.ymn-rtl .ymn-nav-badge { margin-left: 0; margin-right: auto; }
.ymn-rtl .ymn-alert::before { left: auto; right: 0; }
.ymn-rtl .ymn-eff-box::before { left: auto; right: 0; }

/* Printing stays ink-light: no shadows, no animation, no tinted fills. */
@media print {
	.ymn-portal * {
		animation: none !important;
		transition: none !important;
		box-shadow: none !important;
	}
	.ymn-portal .ymn-card-v2,
	.ymn-portal .ymn-stat-card-v2,
	.ymn-portal .ymn-table-wrap {
		border: 1px solid #cbd5e1 !important;
		break-inside: avoid;
	}
	.ymn-portal .ymn-table-wrap .ymn-table-v2 thead th { position: static; }
	.ymn-portal .ymn-shell-content > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
 * 07  DATA TABLES
 * ===================================================================== */
.ymn-portal .ymn-table-wrap {
  border-radius: var(--ymn-r-md);
  border: 1px solid var(--ymn-line);
  overflow: auto;
  background: var(--ymn-surface);
  -webkit-overflow-scrolling: touch;
}

.ymn-portal .ymn-table-v2 { font-size: .8rem; }

.ymn-portal .ymn-table-v2 thead tr {
  background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
  border-bottom: 1px solid var(--ymn-line);
}

/* Header stays visible while scrolling long rosters. */
.ymn-portal .ymn-table-wrap .ymn-table-v2 thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f9fc;
  box-shadow: inset 0 -1px 0 var(--ymn-line);
}

.ymn-portal .ymn-table-v2 th {
  padding: 11px 14px;
  font-size: .625rem;
  white-space: nowrap;
}
.ymn-portal .ymn-table-v2 td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ymn-line-soft);
  color: var(--ymn-ink-2);
  line-height: 1.45;
}
.ymn-portal .ymn-table-v2 tbody tr { transition: background-color var(--ymn-fast) var(--ymn-ease); }
.ymn-portal .ymn-table-v2 tbody tr:hover td { background: #f8fbff; }
.ymn-portal .ymn-table-v2 tbody tr:last-child td { border-bottom: none; }

.ymn-portal .ymn-director-name {
  color: var(--ymn-ink);
  font-weight: 650;
  letter-spacing: -.012em;
}
.ymn-portal .ymn-director-role-tag {
  background: #eef2f9;
  color: var(--ymn-ink-3);
  border-radius: var(--ymn-r-xs);
  padding: 2px 6px;
  font-size: .56rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ymn-portal .ymn-avatar-sm {
  height: 36px;
  width: 36px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ymn-line), var(--ymn-sh-1);
}

/* Row action icons only reveal their tint on hover. */
.ymn-portal .ymn-icon-action {
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-right: 4px;
  color: var(--ymn-ink-3);
}
.ymn-portal .ymn-icon-action:hover {
  background: #eef2f9;
  color: var(--ymn-navy);
  transform: translateY(-1px);
}
.ymn-portal .ymn-icon-action.danger:hover { background: var(--ymn-accent-soft); color: #b91c1c; }

.ymn-portal .ymn-suspend-btn { border-radius: var(--ymn-r-pill); padding: 5px 12px; }
.ymn-portal .ymn-suspend-btn:hover { filter: brightness(.96); }

/* Legacy tables kept in step with the v2 look. */
.ymn-portal .ymn-table th {
  color: var(--ymn-ink-4);
  font-weight: 600;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ymn-line);
}
.ymn-portal .ymn-table td { border-bottom: 1px solid var(--ymn-line-soft); }
.ymn-portal .ymn-table tbody tr:hover td { background: #f8fbff; }

/* =====================================================================
 * 08  BUTTONS
 * ===================================================================== */
.ymn-portal .ymn-btn,
.ymn-portal .ymn-btn-primary,
.ymn-portal .ymn-icon-btn-red,
.ymn-portal .ymn-icon-btn-outline,
.ymn-portal .ymn-btn-secondary {
  border-radius: 10px;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.2;
}

.ymn-portal .ymn-btn-primary,
.ymn-portal .ymn-shell-content .ymn-btn-primary {
  background: linear-gradient(180deg, #16356b 0%, #0b2149 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 1px 2px rgba(11, 33, 73, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.ymn-portal .ymn-btn-primary:hover,
.ymn-portal .ymn-shell-content .ymn-btn-primary:hover {
  background: linear-gradient(180deg, #1c407c 0%, #102a58 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(11, 33, 73, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ymn-portal .ymn-btn-primary:active,
.ymn-portal .ymn-shell-content .ymn-btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
}

.ymn-portal .ymn-icon-btn-red {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 2px rgba(185, 28, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ymn-portal .ymn-icon-btn-red:hover {
  background: linear-gradient(180deg, #f05252 0%, #c81e1e 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -7px rgba(220, 38, 38, .65), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.ymn-portal .ymn-icon-btn-red:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); }

.ymn-portal .ymn-icon-btn-outline,
.ymn-portal .ymn-btn-secondary,
.ymn-portal .ymn-shell-content .ymn-icon-btn-outline,
.ymn-portal .ymn-shell-content .ymn-btn-secondary {
  background: #fff;
  border: 1px solid var(--ymn-line);
  color: var(--ymn-navy);
  box-shadow: var(--ymn-sh-1);
}
.ymn-portal .ymn-icon-btn-outline:hover,
.ymn-portal .ymn-btn-secondary:hover,
.ymn-portal .ymn-shell-content .ymn-icon-btn-outline:hover,
.ymn-portal .ymn-shell-content .ymn-btn-secondary:hover {
  background: #f8fafc;
  border-color: #cfd8e6;
  transform: translateY(-1px);
  box-shadow: var(--ymn-sh-2);
}
.ymn-portal .ymn-icon-btn-outline:active,
.ymn-portal .ymn-btn-secondary:active { transform: translateY(0); box-shadow: none; }

.ymn-portal .ymn-btn-outline:hover { background: var(--ymn-navy); color: #fff; }

.ymn-portal button:disabled,
.ymn-portal .ymn-btn-primary:disabled,
.ymn-portal .ymn-icon-btn-red:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: grayscale(.25);
}

/* =====================================================================
 * 09  FORMS, FILTERS, SEARCH
 * ===================================================================== */
.ymn-portal form label {
  font-weight: 600;
  font-size: .8rem;
  color: var(--ymn-ink-2);
  letter-spacing: -.005em;
}

.ymn-portal form input[type=text],
.ymn-portal form input[type=email],
.ymn-portal form input[type=password],
.ymn-portal form input[type=date],
.ymn-portal form input[type=number],
.ymn-portal form input[type=tel],
.ymn-portal form input[type=url],
.ymn-portal form input[type=file],
.ymn-portal form select,
.ymn-portal form textarea {
  border: 1px solid #dde3ec;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: .875rem;
  font-family: inherit;
  color: var(--ymn-ink);
  background-color: #fdfefe;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
.ymn-portal form input:hover:not(:disabled),
.ymn-portal form select:hover:not(:disabled),
.ymn-portal form textarea:hover:not(:disabled) { border-color: #c9d3e2; }

.ymn-portal form input:focus,
.ymn-portal form select:focus,
.ymn-portal form textarea:focus {
  outline: none;
  border-color: var(--ymn-navy-light);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 53, 107, .13);
}
.ymn-portal form input::placeholder,
.ymn-portal form textarea::placeholder { color: #a9b4c6; }

/* Native selects get a custom chevron so they match the rest of the UI. */
.ymn-portal form select,
.ymn-portal .ymn-filter-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.ymn-portal .ymn-filter-select {
  border-radius: 9px;
  padding: 9px 30px 9px 12px;
  font-weight: 600;
  font-size: .74rem;
  color: var(--ymn-ink-2);
  border-color: var(--ymn-line);
  box-shadow: var(--ymn-sh-1);
}
.ymn-portal .ymn-filter-select:hover { border-color: #cfd8e6; }

.ymn-portal .ymn-search-bar {
  border-radius: 11px;
  border: 1px solid var(--ymn-line);
  background: #fbfcfe;
  padding: 11px 15px;
}
.ymn-portal .ymn-search-bar:focus-within {
  border-color: var(--ymn-navy-light);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 53, 107, .12);
}
.ymn-portal .ymn-search-bar input { font-size: .82rem; }

.ymn-portal .ymn-form-grid { gap: 10px 18px; }

.ymn-portal .ymn-slider { height: 6px; border-radius: var(--ymn-r-pill); accent-color: var(--ymn-navy); }
.ymn-portal .ymn-slider-out {
  border-radius: 8px;
  background: #eef2f9;
  color: var(--ymn-navy);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--ymn-line);
  min-width: 40px;
}

/* =====================================================================
 * 10  BADGES, PILLS, STATUS
 * ===================================================================== */
.ymn-portal .ymn-badge,
.ymn-portal .ymn-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--ymn-r-pill);
}
.ymn-portal .ymn-badge { padding: 3px 11px; font-size: .715rem; }
.ymn-portal .ymn-status-pill { padding: 4px 11px; font-size: .655rem; font-weight: 700; }

/* A small dot makes status readable without relying on colour alone. */
.ymn-portal .ymn-status-pill::before {
  content: "";
  height: 6px;
  width: 6px;
  border-radius: var(--ymn-r-pill);
  background: currentColor;
  flex-shrink: 0;
  opacity: .85;
}
.ymn-portal .ymn-status-pill.active,
.ymn-portal .ymn-status-pill.approved { background: #e8f9ee; color: #15803d; }
.ymn-portal .ymn-status-pill.suspended { background: #fdeaea; color: #b91c1c; }
.ymn-portal .ymn-status-pill.pending { background: #fdf5d8; color: #92650b; }
.ymn-portal .ymn-status-pill.inactive { background: #eef2f7; color: #64748b; }

.ymn-portal .ymn-dept-code-pill {
  border-radius: var(--ymn-r-xs);
  letter-spacing: .05em;
  padding: 3px 8px;
  background: var(--ymn-accent-soft);
  border: 1px solid #fadcdc;
}

.ymn-portal .ymn-badge-latest {
  background: linear-gradient(135deg, #f3d78a, #c9a24b);
  color: #3f2d05;
  box-shadow: 0 1px 3px rgba(201, 162, 75, .45);
  border: none;
}

/* =====================================================================
 * 11  ALERTS + NOTIFICATIONS
 * ===================================================================== */
.ymn-portal .ymn-alert {
  border-radius: var(--ymn-r-md);
  padding: 14px 16px 14px 18px;
  font-size: .855rem;
  line-height: 1.55;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ymn-sh-1);
  animation: ymnRise .3s var(--ymn-ease-out) both;
}
.ymn-portal .ymn-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.ymn-portal .ymn-alert-error {
  background: linear-gradient(120deg, #fef2f2, #fff);
  border: 1px solid #f8d4d4;
  color: #991b1b;
}
.ymn-portal .ymn-alert-error::before { background: #dc2626; }
.ymn-portal .ymn-alert-success {
  background: linear-gradient(120deg, #f0fdf4, #fff);
  border: 1px solid #cdeed9;
  color: #166534;
}
.ymn-portal .ymn-alert-success::before { background: #16a34a; }

.ymn-portal .ymn-notif {
  border-radius: var(--ymn-r-md);
  border: 1px solid var(--ymn-line);
  background: #fff;
  padding: 15px 16px;
  box-shadow: var(--ymn-sh-1);
}
.ymn-portal .ymn-notif:hover { box-shadow: var(--ymn-sh-2); transform: translateX(2px); }
.ymn-portal .ymn-notif.is-read { opacity: .62; }

/* =====================================================================
 * 12  AUTH PAGES + HERO
 * ===================================================================== */
.ymn-auth-page {
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(37, 99, 235, .10) 0%, transparent 60%),
    radial-gradient(50% 45% at 100% 100%, rgba(220, 38, 38, .08) 0%, transparent 60%);
}
.ymn-auth-card {
  border-radius: 20px;
  border: 1px solid #e8ecf3;
  padding: 38px 36px;
  box-shadow: 0 24px 48px -24px rgba(11, 33, 73, .3), 0 2px 8px rgba(15, 23, 42, .05);
  animation: ymnRise .45s cubic-bezier(.16, 1, .3, 1) both;
}
.ymn-auth-card h1 { font-size: 1.6rem; letter-spacing: -.025em; }
.ymn-auth-sub { font-size: .9rem; line-height: 1.55; }

.ymn-portal .ymn-hero {
  border-radius: 22px;
  background:
    radial-gradient(70% 120% at 10% 0%, rgba(37, 99, 235, .3) 0%, transparent 60%),
    linear-gradient(135deg, #0b2149 0%, #16356b 100%);
  box-shadow: 0 24px 60px -30px rgba(11, 33, 73, .6);
}
.ymn-portal .ymn-hero h1 { color: #fff; letter-spacing: -.03em; }

/* =====================================================================
 * 13  EMPTY STATES + SCROLLBARS
 * ===================================================================== */
.ymn-portal .ymn-ch-empty {
  border-radius: var(--ymn-r-md);
  border: 1px dashed #d8e0ec;
  background: #fbfcfe;
  color: var(--ymn-ink-4);
  padding: 26px 18px;
  text-align: center;
  font-size: .82rem;
}

.ymn-portal *::-webkit-scrollbar { width: 10px; height: 10px; }
.ymn-portal *::-webkit-scrollbar-track { background: transparent; }
.ymn-portal *::-webkit-scrollbar-thumb {
  background: #cdd6e3;
  border-radius: var(--ymn-r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.ymn-portal *::-webkit-scrollbar-thumb:hover { background: #b3c0d2; background-clip: content-box; }

/* =====================================================================
 * 14  ACCESSIBILITY, RTL, PRINT
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ymn-portal *,
  .ymn-portal *::before,
  .ymn-portal *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ymn-portal .ymn-card-v2:hover,
  .ymn-portal .ymn-stat-card-v2:hover,
  .ymn-portal .ymn-btn-primary:hover,
  .ymn-portal .ymn-icon-btn-red:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .ymn-portal .ymn-card-v2,
  .ymn-portal .ymn-stat-card-v2,
  .ymn-portal .ymn-table-wrap { border-color: #b9c4d4; }
  .ymn-portal .ymn-card-sub,
  .ymn-portal .ymn-muted { color: #4b5768; }
}

/* Urdu / RTL mirroring for the pieces this layer adds. */
.ymn-rtl .ymn-shell-nav a.active::before,
.ymn-rtl .ymn-shell-nav .ymn-nav-parent.active::before {
  left: auto;
  right: -12px;
  border-radius: 3px 0 0 3px;
}
.ymn-rtl .ymn-shell-nav a:hover { transform: translateX(-2px); }
.ymn-rtl .ymn-nav-parent .ymn-nav-caret { margin-left: 0; margin-right: auto; }
.ymn-rtl .ymn-nav-badge { margin-left: 0; margin-right: auto; }
.ymn-rtl .ymn-alert::before { left: auto; right: 0; }
.ymn-rtl .ymn-eff-box::before { left: auto; right: 0; }

@media print {
  .ymn-portal * {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
  .ymn-portal .ymn-card-v2,
  .ymn-portal .ymn-stat-card-v2,
  .ymn-portal .ymn-table-wrap {
    border: 1px solid #cbd5e1 !important;
    break-inside: avoid;
  }
  .ymn-portal .ymn-table-wrap .ymn-table-v2 thead th { position: static; }
  .ymn-portal .ymn-shell-content > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
 * 15  TASK STATUS: INLINE SAVE (v2.24.0)
 * ===================================================================== */
.ymn-portal .ymn-task-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* The Save button is revealed by JS the moment the dropdown changes. */
.ymn-portal .ymn-task-save[hidden] { display: none; }

.ymn-portal .ymn-task-status-form.has-change .ymn-task-status-select {
  border-color: var(--ymn-navy-light);
  box-shadow: 0 0 0 3px rgba(22, 53, 107, .12);
}
.ymn-portal .ymn-task-status-form.has-change .ymn-task-save {
  animation: ymnPop .18s var(--ymn-ease-out) both;
  border-color: var(--ymn-navy-light);
  color: var(--ymn-navy);
  font-weight: 600;
}

.ymn-portal .ymn-task-save-msg {
  font-size: .74rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ymn-portal .ymn-task-save-msg.is-ok { color: #15803d; }
.ymn-portal .ymn-task-save-msg.is-ok::before { content: "\2713"; font-weight: 700; }
.ymn-portal .ymn-task-save-msg.is-warn { color: #92650b; }
.ymn-portal .ymn-task-save-msg.is-err { color: #b91c1c; }
.ymn-portal .ymn-task-save-msg:not(:empty) { animation: ymnPop .2s var(--ymn-ease-out) both; }

/* Past-deadline notice. Informative, not a lock. */
.ymn-portal .ymn-task-late {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: var(--ymn-r-sm);
  background: #fffbeb;
  border: 1px solid #fbe6a2;
  color: #92650b;
  font-size: .78rem;
  line-height: 1.5;
}
.ymn-portal .ymn-task-late .dashicons {
  font-size: 15px;
  height: 15px;
  width: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ymn-portal .ymn-task-late-tag {
  display: inline-block;
  margin-top: 5px;
  font-size: .68rem;
  font-weight: 600;
  color: #92650b;
  background: #fffbeb;
  border: 1px solid #fbe6a2;
  border-radius: var(--ymn-r-pill);
  padding: 2px 9px;
}

.ymn-rtl .ymn-task-late { flex-direction: row-reverse; }

/* ==========================================================================
   16  TASK STATUS: WHO CHANGED IT, AND WHEN  (v2.25.0)
   --------------------------------------------------------------------------
   A member's status change used to be a single silent word on a crowded
   table, so nobody noticed it. These notes sit under the status pill on the
   Director table, the Super Admin task register and the shared Tasks console.
   ========================================================================== */

.ymn-task-upd {
  display: block;
  margin-top: 4px;
  font-family: var(--ymn-font-num, inherit);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--ymn-ink-3, #64748b);
  white-space: normal;
}

.ymn-task-upd::before {
  content: "\21bb";
  margin-right: 4px;
  opacity: .75;
}

/* Inside the member task card the note sits inline with the status row. */
.ymn-task-card .ymn-task-upd {
  margin-top: 2px;
}

/* Keep the note readable on the dark chairman/executive tables. */
.ymn-ch-table .ymn-task-upd {
  color: var(--ymn-ink-4, #94a3b8);
}

.ymn-rtl .ymn-task-upd {
  text-align: right;
}

.ymn-rtl .ymn-task-upd::before {
  margin-right: 0;
  margin-left: 4px;
}

@media print {
  .ymn-task-upd {
    color: #475569;
  }
}