.ndx-list-barcode { display: none; align-items: center; gap: 6px; vertical-align: middle; }
.ndx-list-barcode.is-open { display: inline-flex; }
.ndx-list-barcode-svg { display: block; width: 105px; height: 30px; cursor: pointer; }
.ndx-service-editor { grid-column: 1 / -1; }
.ndx-service-field { grid-column: 1 / -1; }
.ndx-service-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 180px auto; gap: 8px; margin-bottom: 8px; }
.ndx-service-row input { min-width: 0; }
.ndx-service-row .ndx-btn { white-space: nowrap; }
.ndx-service-editor > .ndx-add-service { margin-top: 2px; }

/* CRM Admin Suite — admin UI */
/* Standalone full-window mode (no WordPress admin menu/bar overlapping) */
html.ndx-standalone-html, body.ndx-standalone { margin: 0 !important; padding: 0 !important; background: #f6f7fb; }
body.ndx-standalone #wpadminbar, body.ndx-standalone #adminmenumain { display: none !important; }
body.ndx-standalone .ndx-app { min-height: 100vh; }
.ndx-pill-ghost { background: #fff !important; color: #1f2434 !important; border: 1px solid #e8eaf1; }

.ndx-crm-screen #wpcontent,
.ndx-crm-screen #wpbody-content { padding: 0 !important; margin: 0 !important; }
.ndx-crm-screen #wpfooter { display: none; }
.ndx-crm-screen .notice, .ndx-crm-screen .update-nag { display: none !important; }

.ndx-app {
	--ndx-primary: #6d5ae6;
	--ndx-primary-dark: #5b48d6;
	--ndx-sidebar: #ffffff;
	--ndx-bg: #f6f7fb;
	--ndx-text: #1f2434;
	--ndx-muted: #6b7280;
	--ndx-border: #e8eaf1;
	display: flex;
	min-height: calc(100vh - 32px);
	background: var(--ndx-bg);
	color: var(--ndx-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
}

/* Sidebar */
.ndx-sidebar {
	width: 272px; flex: 0 0 272px;
	background: var(--ndx-sidebar);
	border-right: 1px solid var(--ndx-border);
	min-height: 100%;
}
.ndx-app.is-collapsed .ndx-sidebar { display: none; }
.ndx-brand-top {
	height: 64px; display: flex; align-items: center; justify-content: center;
	font-size: 19px; font-weight: 700; letter-spacing: .3px;
	border-bottom: 1px solid var(--ndx-border);
}
.ndx-brand-card {
	margin: 18px; padding: 16px; text-align: center;
	border: 1px solid var(--ndx-border); border-radius: 12px;
	box-shadow: 0 1px 2px rgba(20,20,43,.04);
}
.ndx-brand-name { font-size: 22px; font-weight: 800; }
.ndx-brand-name span { color: #e11d48; }
.ndx-brand-avatar {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: 0 auto 10px;
	border-radius: 50%; background: #fff; border: 2px solid #10b981; color: #0f766e;
	box-shadow: 0 0 0 3px rgba(16,185,129,.12);
	font-size: 16px; font-weight: 700; letter-spacing: .06em;
}
.ndx-brand-logo {
	display: block; max-width: 100%; max-height: 56px; margin: 0 auto 6px;
	object-fit: contain; border-radius: 0; background: transparent; border: 0; box-shadow: none;
}
.ndx-toggles { display: flex; flex-wrap: wrap; gap: 18px; padding: 4px 0; }
.ndx-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ndx-toggle input { width: 16px; height: 16px; }
.ndx-brand-tag { font-size: 12px; color: var(--ndx-muted); margin-top: 2px; }

.ndx-nav { padding: 10px 12px 24px; }
.ndx-nav-item {
	display: flex; align-items: center; gap: 12px; width: auto; box-sizing: border-box;
	margin: 3px 0; padding: 11px 14px; background: none; border: 0; border-radius: 11px; cursor: pointer;
	color: var(--ndx-text); text-decoration: none; font-size: 14px; text-align: left;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.ndx-nav-item:hover { background: #f3f2fd; color: var(--ndx-primary); }
.ndx-nav-item.is-active {
	background: linear-gradient(135deg, var(--ndx-primary), #8879ee);
	color: #fff; font-weight: 600; box-shadow: 0 8px 18px rgba(109,90,230,.28);
}
.ndx-nav-item.is-active:hover { color: #fff; }
.ndx-nav-toggle.is-active { background: none; color: var(--ndx-primary); box-shadow: none; font-weight: 600; }
.ndx-nav-ico { display: inline-flex; opacity: .9; }
.ndx-sidebar-logout { margin-top: 8px; color: #b42318; }
.ndx-sidebar-logout:hover { color: #b42318; background: #fdecec; }
.ndx-chevron { margin-left: auto; transition: transform .18s ease; color: var(--ndx-muted); display: inline-flex; }
.ndx-nav-group.is-open .ndx-chevron { transform: rotate(180deg); }
.ndx-subnav { display: none; padding: 2px 4px 8px 26px; }
.ndx-subnav-group { position: relative; }
.ndx-subnav-grouped .ndx-subnav-group { margin: 6px 0 4px; padding: 6px 0 6px 10px; border-left: 2px solid #e6e3fa; border-radius: 0 8px 8px 0; background: rgba(243,242,253,.45); }
.ndx-subnav-grouped .ndx-subnav-group + .ndx-subnav-group { margin-top: 8px; }
.ndx-subnav-title { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 0 10px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7a6fd0; }
.ndx-subnav-title::after { content: ""; flex: 1; height: 1px; background: #e6e3fa; }
.ndx-subnav-links { display: block; padding-left: 2px; }
.ndx-subnav-title:first-child { margin-top: 2px; }
.ndx-nav-group.is-open .ndx-subnav { display: block; }
.ndx-subnav-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; color: var(--ndx-muted); text-decoration: none; border-radius: 6px; font-size: 13px; }
.ndx-subnav-item:hover { color: var(--ndx-primary); background: #f3f2fd; }
.ndx-subnav-item.is-active { color: var(--ndx-primary); font-weight: 600; background: #f3f2fd; }
.ndx-subnav-ico { display: inline-flex; flex: 0 0 auto; opacity: .75; }
.ndx-subnav-ico svg { width: 14px; height: 14px; }
.ndx-subnav-item:hover .ndx-subnav-ico, .ndx-subnav-item.is-active .ndx-subnav-ico { opacity: 1; }
.ndx-app.is-collapsed .ndx-subnav-ico { opacity: .75; }

@media (min-width: 1025px) {
	.ndx-app.is-collapsed .ndx-sidebar { display: block; width: 72px; flex-basis: 72px; }
	.ndx-app.is-collapsed .ndx-brand-top { overflow: hidden; padding: 0; font-size: 0; }
	.ndx-app.is-collapsed .ndx-brand-card { margin: 12px 8px; padding: 8px 4px; }
	.ndx-app.is-collapsed .ndx-brand-logo { max-height: 40px; margin: 0 auto; }
	.ndx-app.is-collapsed .ndx-brand-avatar { width: 40px; height: 40px; margin: 0 auto; font-size: 12px; }
	.ndx-app.is-collapsed .ndx-brand-name, .ndx-app.is-collapsed .ndx-brand-tag { display: none; }
	.ndx-app.is-collapsed .ndx-nav { padding: 10px 8px 24px; }
	.ndx-app.is-collapsed .ndx-nav-item { justify-content: center; gap: 0; padding: 12px 0; margin: 3px 0; }
	.ndx-app.is-collapsed .ndx-nav-item > span:not(.ndx-nav-ico) { display: none; }
	.ndx-app.is-collapsed .ndx-chevron, .ndx-app.is-collapsed .ndx-subnav { display: none !important; }
	.ndx-app.is-collapsed .ndx-sidebar-logout { margin-top: 8px; }
}

/* ============================================================
   Mobile / tablet off-canvas sidebar (Admin + Employee)
   Shared markup: #ndx-app > .ndx-sidebar + #ndx-toggle-sidebar
   ============================================================ */
.ndx-sidebar-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 33, .5);
	backdrop-filter: blur(2px);
	z-index: 1090;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s ease;
}
@media (max-width: 1024px) {
	body.ndx-body-lock { overflow: hidden; }
	.ndx-app { position: relative; overflow-x: hidden; }
	.ndx-sidebar,
	.ndx-app.is-collapsed .ndx-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1100;
		width: min(300px, 84vw);
		flex: none;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		transition: transform .28s ease;
		box-shadow: 10px 0 32px rgba(15, 17, 33, .22);
	}
	.ndx-app.ndx-sidebar-open .ndx-sidebar { transform: translateX(0); }
	.ndx-app.ndx-sidebar-open .ndx-sidebar-overlay { opacity: 1; visibility: visible; }
	.ndx-app.is-collapsed .ndx-brand-name,
	.ndx-app.is-collapsed .ndx-brand-tag { display: block; }
	.ndx-app.is-collapsed .ndx-nav-item > span:not(.ndx-nav-ico) { display: inline; }
	.ndx-app.is-collapsed .ndx-chevron { display: inline-flex; }
	.ndx-app.is-collapsed .ndx-subnav { display: none; }
	.ndx-app.is-collapsed .ndx-nav-group.is-open .ndx-subnav { display: block; }
	.ndx-app.is-collapsed .ndx-nav-item { justify-content: flex-start; gap: 12px; padding: 11px 14px; margin: 3px 0; }
	.ndx-main { width: 100%; }
	#ndx-toggle-sidebar { display: inline-flex; }
}
@media (min-width: 1025px) {
	.ndx-sidebar-overlay { display: none; }
}

/* Main */
.ndx-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ndx-topbar {
	height: 64px; background: #fff; border-bottom: 1px solid var(--ndx-border);
	display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.ndx-topbar-left, .ndx-topbar-right { display: flex; align-items: center; gap: 10px; }
.ndx-topbar-right { margin-left: auto; }
.ndx-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--ndx-border);
    border-radius: 999px;
    background: #f8f8ff;
    color: var(--ndx-text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.ndx-date-pill svg { color: var(--ndx-primary); }
.ndx-global-search {
	display: flex; align-items: center; gap: 8px;
	width: min(420px, 42vw); min-width: 220px;
	padding: 4px 8px 4px 12px;
	background: linear-gradient(180deg, #ffffff 0%, #f8f8ff 100%);
	border: 1px solid rgba(109, 90, 230, 0.14);
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(109,90,230,.06);
}
.ndx-global-search:focus-within {
	border-color: rgba(109, 90, 230, 0.5);
	box-shadow: 0 0 0 4px rgba(109, 90, 230, 0.08), 0 8px 18px rgba(109,90,230,.08);
}
.ndx-global-search input[type="search"] {
	flex: 1 1 auto; min-width: 0; height: 38px; border: 0; background: transparent; padding: 0; font-size: 14px; color: var(--ndx-text); outline: none; box-shadow: none;
}
.ndx-global-search input[type="search"]:focus { border: 0; box-shadow: none; outline: none; }
.ndx-global-search input[type="search"]::placeholder { color: #8a8fa3; }
.ndx-global-search button {
	height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--ndx-primary), #7c6cf0); color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 5px 12px rgba(109, 90, 230, 0.25);
}
.ndx-global-search button:hover { filter: brightness(1.03); }
.ndx-icon-btn { width: 34px; height: 34px; border: 1px solid var(--ndx-border); border-radius: 8px; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ndx-text); }
.ndx-control-btn { width: auto; min-width: 34px; padding: 0 10px; gap: 7px; font-size: 12px; font-weight: 600; }
.ndx-round-btn { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--ndx-primary); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ndx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ndx-border); border-radius: 999px; background: #fff; color: var(--ndx-text); text-decoration: none; font-weight: 500; }
.ndx-pill:hover { color: var(--ndx-primary); }

/* Language Switcher */
.ndx-lang-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	z-index: 40;
}
.ndx-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	background: #ffffff;
	border: 1px solid var(--ndx-border);
	border-radius: 999px;
	color: var(--ndx-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	user-select: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ndx-lang-btn:hover,
.ndx-lang-switcher.is-open .ndx-lang-btn {
	background: #f8fafc;
	border-color: var(--ndx-primary);
	color: var(--ndx-primary);
}
.ndx-lang-globe {
	color: var(--ndx-primary);
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.ndx-lang-btn:hover .ndx-lang-globe {
	transform: rotate(20deg);
}
.ndx-lang-active-text {
	font-size: 12px;
	letter-spacing: 0.3px;
	font-weight: 700;
}
.ndx-lang-chevron {
	transition: transform 0.2s ease;
	opacity: 0.7;
	flex-shrink: 0;
}
.ndx-lang-switcher.is-open .ndx-lang-chevron {
	transform: rotate(180deg);
}
.ndx-lang-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 180px;
	background: #ffffff;
	border: 1px solid var(--ndx-border);
	border-radius: 12px;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
	padding: 6px;
	flex-direction: column;
	gap: 3px;
	z-index: 99999;
	transform-origin: top right;
}
.ndx-lang-switcher.is-open .ndx-lang-dropdown {
	display: flex;
	animation: ndxDropFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ndxDropFadeIn {
	from { opacity: 0; transform: translateY(-6px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ndx-lang-dropdown-header {
	padding: 6px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--ndx-muted);
	border-bottom: 1px solid rgba(226, 232, 240, 0.7);
	margin-bottom: 3px;
}
.ndx-lang-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--ndx-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none !important;
	transition: all 0.15s ease;
}
.ndx-lang-opt:hover {
	background: #f1f5f9;
	color: #0f172a;
}
.ndx-lang-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 4px;
	border-radius: 5px;
	background: #f1f5f9;
	font-size: 11px;
	font-weight: 700;
	color: #475569;
}
.ndx-lang-opt.is-active .ndx-lang-badge {
	background: var(--ndx-primary);
	color: #ffffff;
}
.ndx-lang-name {
	font-weight: 600;
}
.ndx-lang-opt.is-active {
	background: rgba(67, 56, 202, 0.08);
	color: var(--ndx-primary);
	font-weight: 700;
}
.ndx-lang-check {
	margin-left: auto;
	font-size: 13px;
	font-weight: 800;
	color: var(--ndx-primary);
}

.ndx-bell { position: relative; display: inline-flex; padding: 6px; color: var(--ndx-text); }
.ndx-bell em { position: absolute; top: -4px; right: -6px; background: #ef4444; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; }
.ndx-account-menu { position: relative; }
.ndx-avatar { width: 34px; height: 34px; padding: 0; overflow: hidden; border-radius: 999px; border: 2px solid #10b981; color: #0f766e; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; cursor: pointer; }
.ndx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ndx-account-pop { display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 220px; padding: 8px; background: #fff; border: 1px solid var(--ndx-border); border-radius: 10px; box-shadow: 0 12px 30px rgba(31,39,51,.14); }
.ndx-account-menu.is-open .ndx-account-pop { display: block; }
.ndx-account-summary { display: flex; align-items: center; gap: 9px; padding: 8px 10px 10px; border-bottom: 1px solid var(--ndx-border); }
.ndx-account-company-logo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; object-fit: contain; border: 1px solid var(--ndx-border); background: #fff; }
.ndx-account-company-initials { display: inline-flex; align-items: center; justify-content: center; color: var(--ndx-primary); font-size: 11px; font-weight: 700; }
.ndx-account-summary strong, .ndx-account-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndx-account-summary small { margin-top: 3px; color: var(--ndx-muted); font-size: 12px; }
.ndx-account-pop a { display: block; padding: 9px 10px; color: var(--ndx-text); text-decoration: none; border-radius: 6px; }
.ndx-account-pop a:hover { background: #f3f4f6; }
.ndx-account-pop .ndx-account-logout { color: #b42318; }
.ndx-profile-grid { display: flex; gap: 24px; align-items: flex-start; padding: 24px; }
.ndx-company-profile-box {
	margin: 0 0 18px; padding: 20px 24px;
	background: #f9fafb; border: 1px solid var(--ndx-border); border-radius: 14px;
}
.ndx-company-form { padding-top: 0; }
.ndx-profile-avatar { width: 72px; height: 72px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #dcfce7; color: #166534; font-size: 22px; font-weight: 700; }
.ndx-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ndx-profile-details h3 { margin: 0 0 16px; }
.ndx-profile-details p { display: flex; gap: 24px; margin: 9px 0; }
.ndx-profile-details p span { width: 80px; color: var(--ndx-muted); }

.ndx-content { flex: 1 1 auto; width: 100%; max-width: 1600px; box-sizing: border-box; padding: 28px clamp(18px, 3vw, 38px) 38px; }
.ndx-alert { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; }

/* Stat cards */
.ndx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.ndx-dashboard-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 4px 0 22px; }
.ndx-dashboard-hero h1 { margin: 5px 0 3px; font-size: 30px; letter-spacing: -.4px; }
.ndx-dashboard-hero p { margin: 0; color: var(--ndx-muted); }
.ndx-eyebrow { color: var(--ndx-primary); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.ndx-dashboard-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.ndx-dashboard-reports { display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.7fr) auto; align-items: center; gap: 18px; margin-bottom: 24px; padding: 16px 18px; background: #fff; border: 1px solid rgba(232,234,241,.85); border-radius: 14px; box-shadow: 0 3px 10px rgba(20,20,43,.04); }
.ndx-dashboard-reports > div:first-child strong { display: block; margin-top: 5px; font-size: 13px; }
.ndx-report-periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ndx-report-period { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 8px; color: var(--ndx-text); border: 1px solid var(--ndx-border); border-radius: 9px; text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ndx-report-period:hover { color: var(--ndx-primary); border-color: #cfc8fb; background: #faf9ff; }
.ndx-report-period span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; background: #efedfd; color: var(--ndx-primary); font-size: 10px; }
.ndx-invoice-report-link { display: flex; flex-direction: column; gap: 5px; min-width: 128px; padding-left: 18px; border-left: 1px solid var(--ndx-border); color: var(--ndx-text); text-decoration: none; font-size: 13px; font-weight: 700; }
.ndx-invoice-report-link strong { color: var(--ndx-primary); font-size: 11px; }.ndx-invoice-report-link b { font-size: 15px; }
.ndx-dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.ndx-dashboard-overview-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 24px; }
.ndx-dashboard-table-panel { padding: 0; overflow: hidden; }
.ndx-dashboard-table-panel .ndx-widget-head, .ndx-sales-data-panel .ndx-widget-head, .ndx-dashboard-entity-panel .ndx-widget-head, .ndx-expense-summary .ndx-widget-head { padding: 22px 22px 0; }
.ndx-table-scroll { overflow-x: auto; max-height: 250px; }
.ndx-table-scroll .ndx-table { min-width: 480px; margin: 0; }
.ndx-table-scroll .ndx-table th, .ndx-table-scroll .ndx-table td { padding: 11px 14px; }
.ndx-panel-total { border-top: 1px solid var(--ndx-border); padding: 13px 22px; color: var(--ndx-primary); font-weight: 700; font-size: 12px; }
.ndx-sales-data-panel, .ndx-dashboard-entity-panel, .ndx-expense-summary { min-height: 210px; }
.ndx-sales-data { display: grid; gap: 8px; padding: 0 22px 22px; }
.ndx-sales-data a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0f1f5; color: var(--ndx-primary); text-decoration: none; font-weight: 600; }
.ndx-sales-data a:nth-child(2) { color: #149b83; }.ndx-sales-data a:nth-child(3) { color: #25aeb5; }.ndx-sales-data strong { color: var(--ndx-text); }
.ndx-dashboard-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ndx-mini-stat { min-height: 120px; display: flex; flex-direction: column; justify-content: center; text-align: center; }.ndx-mini-stat span { color: var(--ndx-muted); font-weight: 600; }.ndx-mini-stat strong { margin-top: 10px; color: #1677ff; font-size: 25px; }.ndx-mini-stat-success strong { color: #3caf35; }
.ndx-entity-chart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0 22px 22px; align-items: end; min-height: 120px; }.ndx-entity-chart > div { display: flex; flex-direction: column; gap: 7px; text-align: center; color: var(--ndx-muted); font-size: 12px; }.ndx-entity-chart strong { color: var(--ndx-text); font-size: 20px; }.ndx-entity-chart i { height: 78px; display: flex; align-items: flex-end; justify-content: center; background: #f1f4f8; border-radius: 5px 5px 0 0; }.ndx-entity-chart em { display: block; width: 56%; background: #168dfb; border-radius: 5px 5px 0 0; }.ndx-entity-chart > div:nth-child(2) em { background: #18bd8b; }.ndx-entity-chart > div:nth-child(3) em { background: #f05b72; }
.ndx-expense-summary-list { display: grid; gap: 15px; padding: 0 22px 22px; }.ndx-expense-summary-list div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f1f5; }.ndx-expense-summary-list span { color: var(--ndx-muted); font-size: 12px; }.ndx-expense-summary-list strong { color: #408fce; font-size: 17px; }.ndx-expense-summary-list div:nth-child(2) strong { color: #378ce7; }.ndx-expense-summary-list div:nth-child(3) strong { color: #9b4444; }
.ndx-metric { padding: 18px 20px; border-radius: 14px; color: #fff; min-height: 104px; box-sizing: border-box; position: relative; overflow: hidden; }
.ndx-metric::after { content: ""; position: absolute; width: 90px; height: 90px; right: -25px; bottom: -38px; border: 18px solid rgba(255,255,255,.15); border-radius: 50%; }
.ndx-metric span, .ndx-metric small, .ndx-metric strong { display: block; position: relative; z-index: 1; }
.ndx-metric span { font-size: 12px; font-weight: 600; opacity: .88; }
.ndx-metric strong { margin: 9px 0 3px; font-size: 25px; }
.ndx-metric small { font-size: 11px; opacity: .75; }
.ndx-metric-sales { background: linear-gradient(135deg, #6254d9, #8175ee); }
.ndx-metric-collection { background: linear-gradient(135deg, #079669, #25b889); }
.ndx-metric-due { background: linear-gradient(135deg, #e38a24, #f0ad4e); }
.ndx-metric-expense { background: linear-gradient(135deg, #d84d61, #ed7180); }
.ndx-metric-profit { background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important; box-shadow: 0 4px 14px rgba(16,185,129,0.22); }
.ndx-metric-loss { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important; box-shadow: 0 4px 14px rgba(239,68,68,0.22); }
.ndx-metric-balance { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important; box-shadow: 0 4px 14px rgba(2,132,199,0.22); }
.ndx-metric-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.22); color: #fff; margin-bottom: 6px; letter-spacing: 0.3px; width: fit-content; text-transform: uppercase; }
.ndx-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr); gap: 18px; margin-bottom: 22px; }
.ndx-dashboard-panel { background: #fff; border: 1px solid rgba(232,234,241,.75); border-radius: 14px; box-shadow: 0 4px 14px rgba(20,20,43,.055); padding: 22px; min-width: 0; }
.ndx-dashboard-panel:hover { box-shadow: 0 8px 22px rgba(20,20,43,.08); }
.ndx-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ndx-widget-head h2 { margin: 4px 0 0; font-size: 17px; }
.ndx-widget-meta { color: var(--ndx-muted); font-size: 12px; }
.ndx-text-link { color: var(--ndx-primary); font-size: 12px; text-decoration: none; white-space: nowrap; }
.ndx-quarter-chart { display: flex; height: 190px; gap: 12px; border-bottom: 1px solid var(--ndx-border); }
.ndx-chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 24px; color: var(--ndx-muted); font-size: 10px; }
.ndx-chart-bars { flex: 1; display: flex; align-items: stretch; justify-content: space-around; gap: 12px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #f0f1f5 48px); }
.ndx-quarter { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; min-width: 32px; flex: 1; }
.ndx-quarter b { color: var(--ndx-muted); font-size: 11px; }
.ndx-bar-group { height: 150px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.ndx-bar { display: block; width: 17px; min-height: 2px; border-radius: 5px 5px 0 0; transition: height .25s ease; }
.ndx-bar-sales { background: #6d5ae6; }.ndx-bar-paid { background: #2ab88a; }
.ndx-chart-legend { display: flex; gap: 18px; margin-top: 12px; color: var(--ndx-muted); font-size: 11px; }
.ndx-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }.ndx-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }.ndx-dot-sales { background: #6d5ae6; }.ndx-dot-paid { background: #2ab88a; }
.ndx-ranking-list > div, .ndx-entity-list > div, .ndx-expense-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0f1f5; }
.ndx-ranking-list > div:last-child, .ndx-entity-list > div:last-child, .ndx-expense-list > div:last-child { border-bottom: 0; }
.ndx-ranking-list strong, .ndx-entity-list strong, .ndx-expense-list strong { font-size: 12px; }
.ndx-rank { color: var(--ndx-primary); font-size: 11px; font-weight: 800; }.ndx-ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndx-entity-list > div { grid-template-columns: minmax(0, 1fr) auto; }.ndx-entity-list span { color: var(--ndx-muted); }.ndx-entity-list strong { font-size: 18px; }
.ndx-expense-list > div { grid-template-columns: minmax(0, 1fr) auto; position: relative; padding-bottom: 18px; }.ndx-expense-list i { grid-column: 1 / -1; height: 4px; background: #f0f1f5; border-radius: 99px; }.ndx-expense-list em { display: block; height: 100%; background: #ef7180; border-radius: inherit; }
.ndx-report-columns { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); gap: 22px; margin-top: 22px; }
.ndx-report-columns h3, .ndx-report-invoice > .ndx-table-wrap h3 { margin: 0 0 12px; font-size: 15px; }
.ndx-report-status-list { border: 1px solid var(--ndx-border); border-radius: 10px; padding: 4px 14px; }
.ndx-report-status-list > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f1f5; }.ndx-report-status-list > div:last-child { border-bottom: 0; }
.ndx-employee-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ndx-employee-insight { padding: 17px; border: 1px solid var(--ndx-border); border-radius: 12px; background: linear-gradient(145deg, #fff, #fafaff); }
.ndx-employee-insight span, .ndx-employee-insight small { display: block; color: var(--ndx-muted); font-size: 11px; }
.ndx-employee-insight strong { display: block; margin: 8px 0 3px; font-size: 22px; color: var(--ndx-primary); }
.ndx-emp-shell .ndx-content { padding-top: 26px; }
.ndx-emp-shell .ndx-cards { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.ndx-emp-shell .ndx-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ico body donut" "note note note"; align-items: center; gap: 10px 12px; padding: 16px; }
.ndx-emp-shell .ndx-card-ico { grid-area: ico; }
.ndx-emp-shell .ndx-card-body { grid-area: body; min-width: 0; }
.ndx-emp-shell .ndx-card-label { font-size: 10.5px; line-height: 1.3; white-space: normal; }
.ndx-emp-shell .ndx-card-value { font-size: 26px; }
.ndx-emp-shell .ndx-donut { grid-area: donut; flex: 0 0 auto; }
.ndx-emp-shell .ndx-card-note { grid-area: note; max-width: none; margin: 0; padding-top: 8px; border-top: 1px dashed var(--ndx-border); font-size: 11px; }
.ndx-emp-shell .ndx-emp-detail-grid .ndx-panel { min-height: 178px; box-sizing: border-box; }
.ndx-emp-shell .ndx-emp-welcome { background: linear-gradient(120deg, #f0efff 0%, #fff 68%); border: 1px solid #e2defd; }
.ndx-emp-shell .ndx-employee-insight:hover { border-color: #cfc8fb; box-shadow: 0 5px 14px rgba(109,90,230,.08); }
.ndx-leave-time { display: block; margin-top: 3px; color: var(--ndx-muted); font-size: 11px; }
.ndx-emp-shell .ndx-table td a { color: var(--ndx-primary); text-decoration: none; font-weight: 600; }
.ndx-emp-shell .ndx-table td a:hover { text-decoration: underline; }
.ndx-card { background: #fff; border: 1px solid rgba(232,234,241,.75); border-radius: 14px; padding: 18px; box-shadow: 0 3px 10px rgba(20,20,43,.05); display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.ndx-card-link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,20,43,.1); }
.ndx-card-link:focus-visible, .ndx-btn:focus-visible, .ndx-icon-btn:focus-visible { outline: 3px solid rgba(109,90,230,.25); outline-offset: 2px; }
.ndx-card-ico { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.ndx-violet { background: #efedfd; color: #6d5ae6; }
.ndx-green { background: #e7f9f0; color: #10b981; }
.ndx-red { background: #fdecec; color: #ef4444; }
.ndx-blue { background: #e8f2fe; color: #3b82f6; }
.ndx-card-label { font-size: 11px; letter-spacing: .6px; color: var(--ndx-muted); text-transform: uppercase; font-weight: 600; }
.ndx-card-value { font-size: 28px; font-weight: 700; line-height: 1.15; }
.ndx-card-note { font-size: 11px; color: var(--ndx-muted); max-width: 62px; line-height: 1.3; margin-left: auto; }
.ndx-orange { background: #fff3e0; color: #c2410c; }
.ndx-donut {
	width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
	display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ndx-text);
	background: conic-gradient(var(--ndx-donut-color, #6d5ae6) calc(var(--ndx-pct) * 1%), #eef0f6 0);
	position: relative;
}
.ndx-donut::after { content: ""; position: absolute; inset: 6px; background: #fff; border-radius: 50%; }
.ndx-donut span { position: relative; z-index: 1; }
.ndx-donut-violet { --ndx-donut-color: #6d5ae6; }
.ndx-donut-green { --ndx-donut-color: #10b981; }
.ndx-donut-red { --ndx-donut-color: #ef4444; }
.ndx-donut-blue { --ndx-donut-color: #3b82f6; }
.ndx-donut-orange { --ndx-donut-color: #f97316; }

/* Panel */
.ndx-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20,20,43,.06);
    padding: 8px 18px 18px;
    margin: 0 0 14px;
}
.ndx-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
.ndx-panel-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.ndx-count { display: inline-block; margin-left: 6px; background: #efedfd; color: var(--ndx-primary); border-radius: 999px; font-size: 12px; padding: 2px 9px; vertical-align: middle; }
.ndx-panel-actions, .ndx-panel-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ndx-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ndx-search select, .ndx-search input[type="date"] { height: 34px; padding: 0 9px; border: 1px solid var(--ndx-border); border-radius: 7px; background: #fff; color: var(--ndx-text); font: inherit; }
.ndx-search .ndx-btn { height: 34px; }
.ndx-month-filter select { min-width: 108px; }
.ndx-filterbar-row { margin-bottom: 12px; }
.ndx-app.ndx-dark .ndx-search select, .ndx-app.ndx-dark .ndx-search input[type="date"] { background: #1f2440; color: #e6e8f5; border-color: #2c3255; }

/* Filter bar */
.ndx-filter-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 16px; background: #f7f7fb; border: 1px solid var(--ndx-border); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; }
.ndx-filter-field { display: flex; flex-direction: column; gap: 5px; }
.ndx-filter-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ndx-muted); }
.ndx-filter-field input, .ndx-filter-field select { height: 36px; border: 1px solid var(--ndx-border); border-radius: 8px; padding: 0 10px; min-width: 130px; background: #fff; color: var(--ndx-text); }
.ndx-filter-search input[type="search"] { min-width: 220px; }
.ndx-filter-field input[type="date"] { min-width: 150px; }
.ndx-filter-field input[type="number"] { width: 115px; min-width: 115px; }
.ndx-filter-actions { flex-direction: row; align-items: center; gap: 8px; }
.ndx-filter-actions label { display: none; }
.ndx-creator-readonly { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid var(--ndx-border); border-radius: 8px; background: #f8fafc; color: var(--ndx-text); }
.ndx-creator-readonly span { color: var(--ndx-muted); font-size: 12px; }
.ndx-task-assignee { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr); gap: 8px; }
.ndx-task-assignee select { width: 100%; }
.ndx-task-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ndx-task-files a { padding: 6px 9px; border: 1px solid var(--ndx-border); border-radius: 7px; color: var(--ndx-primary); text-decoration: none; font-size: 12px; }
.ndx-task-files a:hover { background: #f3f2fd; }
.ndx-other-category-field { display: none; }

.ndx-scope-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--ndx-border); padding: 10px 0 0; }
.ndx-scope-tab { background: none; border: 0; padding: 10px 2px 14px; font-size: 16px; color: var(--ndx-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.ndx-scope-tab.is-active { color: var(--ndx-primary); font-weight: 600; border-bottom-color: var(--ndx-primary); }
.ndx-scope-pane { display: none; }
.ndx-scope-pane.is-active { display: block; }

.ndx-dim-tabs { display: flex; flex-wrap: wrap; gap: 6px 18px; border-bottom: 1px solid var(--ndx-border); margin-top: 6px; }
.ndx-dim-tab { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 14px 2px; color: var(--ndx-muted); cursor: pointer; border-bottom: 2px solid transparent; font-size: 14px; }
.ndx-dim-tab.is-active { color: var(--ndx-primary); font-weight: 600; border-bottom-color: var(--ndx-primary); }
.ndx-dim-pane { display: none; }
.ndx-dim-pane.is-active { display: block; }

/* Tables */
.ndx-table-wrap { overflow-x: auto; margin-top: 18px; }
.ndx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ndx-table thead th { background: var(--ndx-primary); color: #fff; text-align: left; padding: 14px 12px; font-weight: 600; white-space: nowrap; }
.ndx-table thead th:first-child { border-radius: 8px 0 0 0; }
.ndx-table thead th:last-child { border-radius: 0 8px 0 0; }
.ndx-table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--ndx-border); vertical-align: middle; }
.ndx-table tbody tr:hover td { background: #fafaff; }
.ndx-link { color: var(--ndx-primary); text-decoration: none; }
.ndx-empty { text-align: center; color: var(--ndx-muted); padding: 30px 0; }
.ndx-table:not(.ndx-table-plain) tbody td.ndx-col-2 { background: #e9fbf1; }
.ndx-table:not(.ndx-table-plain) tbody td.ndx-col-3 { background: #fdeceb; }
.ndx-table:not(.ndx-table-plain) tbody td.ndx-col-4 { background: #eef0fe; }
.ndx-table:not(.ndx-table-plain) tbody td.ndx-col-5 { background: #fdf6e3; }
.ndx-table:not(.ndx-table-plain) tbody td.ndx-col-6 { background: #e6f8fb; }

.ndx-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #eef0f6; color: #475467; text-transform: capitalize; }
.ndx-badge-active, .ndx-badge-approved, .ndx-badge-paid, .ndx-badge-completed { background: #e7f9f0; color: #067647; }
.ndx-badge-pending, .ndx-badge-partial, .ndx-badge-scheduled, .ndx-badge-running { background: #fef6e7; color: #b54708; }
.ndx-badge-assigned, .ndx-badge-in_progress, .ndx-badge-submitted { background: #e8f2fe; color: #175cd3; }
.ndx-badge-rejected, .ndx-badge-unpaid, .ndx-badge-cancelled, .ndx-badge-inactive { background: #fdecec; color: #b42318; }
/* Lead Rating badges: low -> red, average -> amber, good/better -> blue, best -> green. */
.ndx-badge-low { background: #fdecec; color: #b42318; }
.ndx-badge-average { background: #fef6e7; color: #b54708; }
.ndx-badge-good, .ndx-badge-better { background: #e8f2fe; color: #175cd3; }
.ndx-badge-best { background: #e7f9f0; color: #067647; }
select.ndx-badge { border: none; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 22px; }


/* Lead forms: keep Admin and Employee fields in the exact same visual order. */
.ndx-lead-form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
}
.ndx-lead-form-grid .ndx-field-wide { grid-column: 1 / -1; }
.ndx-lead-form-grid .ndx-field input,
.ndx-lead-form-grid .ndx-field select,
.ndx-lead-form-grid .ndx-field textarea {
	min-height: 42px;
	border-radius: 10px;
}
.ndx-lead-form-grid .ndx-field textarea {
	min-height: 100px;
	resize: vertical;
}
.ndx-lead-form-grid .ndx-form-section { margin-bottom: 0; }

@media (max-width: 782px) {
	.ndx-lead-form-grid { grid-template-columns: 1fr; }
}

/* Buttons */
.ndx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: var(--ndx-primary); color: #fff !important; text-decoration: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 500; }
.ndx-btn:hover { background: var(--ndx-primary-dark); }
.ndx-btn-sm { padding: 5px 10px; font-size: 12px; }
.ndx-btn-primary { background: var(--ndx-primary); }
.ndx-btn-ghost { background: #fff; color: var(--ndx-text) !important; border: 1px solid var(--ndx-border); }
.ndx-btn-ghost:hover { background: #f3f2fd; color: var(--ndx-primary) !important; }
.ndx-btn-danger { background: #ef4444; }
.ndx-btn-danger:hover { background: #dc2626; }
.ndx-actions { white-space: nowrap; }
.ndx-actions .ndx-btn { margin-right: 6px; }

/* Forms */
.ndx-form { padding-top: 6px; }
.ndx-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.ndx-field-wide { grid-column: 1 / -1; }
.ndx-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ndx-field label em { color: #ef4444; font-style: normal; }
.ndx-field input, .ndx-field select, .ndx-field textarea {
	width: 100%; box-sizing: border-box; border: 1px solid var(--ndx-border); border-radius: 8px; padding: 9px 12px; font-size: 13px; background: #fff; box-shadow: none;
}
.ndx-field input:focus, .ndx-field select:focus, .ndx-field textarea:focus { outline: 0; border-color: var(--ndx-primary); box-shadow: 0 0 0 3px rgba(109,90,230,.15); }
.ndx-form-section { background: #fff; border: 1px solid var(--ndx-border); border-radius: 14px; padding: 18px 20px 20px; margin-bottom: 18px; }
.ndx-section-title { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1f2547; margin: 4px 0 20px; position: relative; }
.ndx-section-title::before, .ndx-section-title::after { content: ""; flex: 1; height: 1px; background: var(--ndx-border); }
.ndx-section-title::before { margin-right: 12px; }
.ndx-section-title::after { margin-left: 12px; }
.ndx-section-icon { font-size: 14px; }
.ndx-form-section .ndx-field label { font-weight: 500; color: #3a4060; }
.ndx-form-footer { margin-top: 22px; display: flex; gap: 10px; }
.ndx-activity-report-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ndx-border); margin: 10px 0 20px; }
.ndx-activity-report-head > div { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--ndx-border); border-bottom: 1px solid var(--ndx-border); }
.ndx-activity-report-head > div:nth-child(4n) { border-right: 0; }
.ndx-activity-report-head > div:nth-last-child(-n+4) { border-bottom: 0; }
.ndx-activity-report-head strong, .ndx-activity-report-head span { display: block; }
.ndx-activity-report-head strong { font-size: 11px; color: var(--ndx-muted); margin-bottom: 5px; }
.ndx-activity-report-head span { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ndx-activity-report-head input { width: 100%; box-sizing: border-box; border: 1px solid var(--ndx-border); border-radius: 6px; padding: 5px 7px; font-size: 13px; }
.ndx-activity-section-title { font-size: 14px; margin: 20px 0 10px; }
.ndx-activity-entry-table { min-width: 650px; }
.ndx-activity-entry-table th:first-child, .ndx-activity-entry-table td:first-child { width: 42px; text-align: center; }
.ndx-activity-entry-table th:nth-child(3) { width: 150px; }
.ndx-activity-entry-table input, .ndx-activity-entry-table select { width: 100%; box-sizing: border-box; min-width: 0; border: 1px solid var(--ndx-border); border-radius: 6px; padding: 7px 9px; background: #fff; }
.ndx-activity-admin-only { color: var(--ndx-muted); font-size: 12px; font-style: italic; }
.ndx-activity-extra-grid { margin-top: 4px; }

/* Summary + pagination */
.ndx-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 6px 0 4px; }
.ndx-summary-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ndx-summary > div { background: #f8f8fd; border: 1px solid var(--ndx-border); border-radius: 12px; padding: 14px; }
.ndx-summary span { display: block; font-size: 12px; color: var(--ndx-muted); }
.ndx-summary strong { font-size: 22px; }

.ndx-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.ndx-kpi-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f7ff 100%);
    border: 1px solid var(--ndx-border);
    border-radius: 12px;
    padding: 12px 14px 10px;
    box-shadow: 0 6px 16px rgba(31, 36, 52, 0.03);
    min-height: 100px;
}
.ndx-kpi-card span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ndx-muted);
}
.ndx-kpi-card strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.04em;
    color: var(--ndx-text);
}
.ndx-kpi-card.accent-violet { border-color: rgba(109, 90, 230, 0.18); background: linear-gradient(135deg, #ffffff 0%, #f3f0ff 100%); }
.ndx-kpi-card.accent-green { border-color: rgba(16, 185, 129, 0.18); background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%); }
.ndx-kpi-card.accent-red { border-color: rgba(239, 68, 68, 0.18); background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%); }
.ndx-kpi-card.accent-blue { border-color: rgba(59, 130, 246, 0.18); background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); }

.ndx-finance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ndx-finance-grid .ndx-card { padding: 18px; border: 1px solid var(--ndx-border); border-radius: 12px; background: #fff; }
.ndx-finance-grid h3 { margin: 0 0 14px; font-size: 15px; }
.ndx-finance-grid p { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; color: var(--ndx-muted); }
.ndx-finance-grid p strong { color: var(--ndx-text); }
.ndx-panel-head .ndx-btn, .ndx-panel-head .ndx-btn-ghost { border-radius: 10px; }
.ndx-panel-head .ndx-btn-ghost { background: #f8f8ff; }
.ndx-employee-login { min-height: 70vh; display: grid; place-items: center; padding: 32px 16px; background: #f6f7fb; }
.ndx-employee-login-card { width: min(420px, 100%); padding: 28px; background: #fff; border: 1px solid var(--ndx-border); border-radius: 12px; box-shadow: 0 12px 30px rgba(31,39,51,.08); }
.ndx-employee-login-card h1 { margin: 0 0 22px; font-size: 24px; }
.ndx-employee-login-card label, .ndx-employee-leave-form label { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.ndx-employee-login-card input, .ndx-employee-leave-form input, .ndx-employee-leave-form select, .ndx-employee-leave-form textarea { box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1px solid var(--ndx-border); border-radius: 7px; font: inherit; }
.ndx-employee-login-card button, .ndx-employee-leave-form button { margin-top: 18px; padding: 9px 16px; border: 0; border-radius: 7px; background: var(--ndx-primary); color: #fff; cursor: pointer; font-weight: 600; }
.ndx-employee-app { --ndx-primary: #6d5ae6; --ndx-primary-dark: #5b48d6; --ndx-border: #e8eaf1; --ndx-text: #1f2434; --ndx-muted: #6b7280; min-height: 100vh; background: #f6f7fb; color: var(--ndx-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.ndx-employee-top { min-height: 64px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; padding: 0 5%; background: #fff; border-bottom: 1px solid var(--ndx-border); box-shadow: 0 1px 2px rgba(20,20,43,.04); }
.ndx-employee-top strong, .ndx-employee-top span { display: block; }
.ndx-employee-top span { margin-top: 3px; color: #6b7280; font-size: 12px; }
.ndx-employee-top a { padding: 8px 14px; border-radius: 8px; color: #b42318; text-decoration: none; font-size: 13px; font-weight: 600; }
.ndx-employee-top a:hover { background: #fdecec; }
.ndx-employee-app main { width: min(1120px, 90%); margin: 28px auto; }
.ndx-employee-welcome, .ndx-employee-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ndx-employee-welcome > div, .ndx-employee-cards section, .ndx-employee-section { padding: 20px; background: #fff; border: 1px solid var(--ndx-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(20,20,43,.04); }
.ndx-employee-welcome img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 10px; }
.ndx-employee-welcome h1 { margin: 0 0 4px; font-size: 26px; }
.ndx-employee-welcome p { margin: 5px 0; color: #6b7280; }
.ndx-employee-cards { margin-top: 16px; }
.ndx-employee-cards h2, .ndx-employee-section h2 { margin: 0 0 14px; font-size: 17px; }
.ndx-employee-cards p { display: flex; justify-content: space-between; gap: 16px; margin: 9px 0; color: #6b7280; }
.ndx-employee-cards strong { color: #1f2434; text-align: right; }
.ndx-employee-section { margin-top: 16px; overflow-x: auto; }
.ndx-employee-section h2 { color: var(--ndx-text); }
.ndx-employee-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ndx-employee-table th, .ndx-employee-table td { padding: 9px; border-bottom: 1px solid var(--ndx-border); text-align: left; white-space: nowrap; }
.ndx-employee-table th { color: #6b7280; font-size: 12px; }
.ndx-employee-leave-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ndx-employee-leave-form label:last-of-type { grid-column: 1 / -1; }
.ndx-employee-leave-form button { grid-column: 1 / -1; width: fit-content; margin-top: 4px; background: var(--ndx-primary); }
.ndx-employee-leave-form button:hover, .ndx-employee-login-card button:hover { background: var(--ndx-primary-dark); }
.ndx-employee-message { padding: 10px; background: #e7f9f0; color: #067647; border-radius: 6px; }

/* Employee portal — same admin app shell (sidebar/topbar/cards/panel), frontend variant */
.ndx-app.ndx-emp-shell { min-height: 100vh; background: var(--ndx-bg); }
.ndx-emp-shell .ndx-content { max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.ndx-emp-pane { display: none; }
.ndx-emp-pane.is-active { display: block; }
.ndx-emp-welcome { display: flex; align-items: center; gap: 16px; padding: 20px; margin-bottom: 20px; }
.ndx-emp-welcome-avatar { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; object-fit: contain; background: #efedfd; color: var(--ndx-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; border: 2px solid var(--ndx-primary); }
.ndx-emp-welcome-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ndx-emp-welcome h1 { margin: 0 0 4px; font-size: 21px; }
.ndx-emp-welcome p { margin: 0; color: var(--ndx-muted); font-size: 13px; }
.ndx-emp-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.ndx-emp-detail-grid .ndx-panel { padding: 8px 20px 20px; }
.ndx-emp-detail-grid h2 { margin: 0; font-size: 16px; font-weight: 700; padding: 16px 0 10px; }
.ndx-emp-detail-grid p { display: flex; justify-content: space-between; gap: 16px; margin: 10px 0; color: var(--ndx-muted); font-size: 13px; border-bottom: 1px solid var(--ndx-border); padding-bottom: 10px; }
.ndx-emp-detail-grid p:last-child { border-bottom: 0; padding-bottom: 0; }
.ndx-emp-detail-grid p strong { color: var(--ndx-text); }
@media (max-width: 782px) {
	.ndx-emp-detail-grid { grid-template-columns: 1fr; }
}
.ndx-alert-error { background: #fdecec; border-color: #f6b4ac; color: #b42318; }
.ndx-emp-profile-hint { margin: 0 0 16px; color: var(--ndx-muted); font-size: 13px; }
.ndx-task-count { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #f97316; color: #fff; font-size: 10px; font-style: normal; }
.ndx-task-list { display: grid; gap: 14px; }
.ndx-task-item { padding: 18px; border: 1px solid var(--ndx-border); border-radius: 10px; background: #fff; }
.ndx-task-head, .ndx-task-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ndx-task-head h3 { margin: 0 0 5px; font-size: 16px; }
.ndx-task-head p { margin: 0; color: var(--ndx-muted); line-height: 1.5; }
.ndx-task-meta { margin-top: 16px; color: var(--ndx-muted); font-size: 12px; }
.ndx-task-meta strong { color: var(--ndx-text); }
.ndx-task-progress { height: 8px; margin: 8px 0 16px; overflow: hidden; border-radius: 999px; background: #eef0f6; }
.ndx-task-progress span { display: block; height: 100%; border-radius: inherit; background: #f97316; transition: width .2s ease; }
.ndx-task-progress.is-complete span { background: #16a34a; }
.ndx-task-update-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.ndx-task-update-form label { display: grid; gap: 5px; color: var(--ndx-muted); font-size: 12px; font-weight: 600; }
.ndx-task-update-form input, .ndx-task-update-form select { height: 34px; min-width: 105px; padding: 0 9px; border: 1px solid var(--ndx-border); border-radius: 7px; background: #fff; color: var(--ndx-text); }
.ndx-task-update-form .ndx-task-note { flex: 1 1 220px; }
.ndx-task-update-form .ndx-task-note input { width: 100%; box-sizing: border-box; }
.ndx-task-files-input { flex: 1 1 190px; }
.ndx-task-files-input input { width: 100%; box-sizing: border-box; padding: 7px 0; }
.ndx-task-note-display { margin: 0; padding: 10px 12px; border-left: 3px solid #f97316; background: #fff7ed; color: var(--ndx-text); font-size: 13px; }
.ndx-emp-notice-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ndx-border); font-size: 13px; }
.ndx-emp-notice-row:last-child { border-bottom: 0; }
.ndx-emp-notice-row strong { flex: 1; }
.ndx-emp-notice-date { color: var(--ndx-muted); font-size: 12px; white-space: nowrap; }
.ndx-emp-notice-card { padding: 14px 0; border-bottom: 1px solid var(--ndx-border); }
.ndx-emp-notice-card:last-child { border-bottom: 0; }
.ndx-emp-notice-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ndx-emp-notice-head strong { flex: 1; font-size: 14px; }
.ndx-emp-notice-card p { margin: 4px 0 0; color: var(--ndx-muted); font-size: 13px; line-height: 1.5; }
.ndx-pagination { display: flex; gap: 6px; margin-top: 16px; }
.ndx-pagination a { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ndx-border); border-radius: 8px; text-decoration: none; color: var(--ndx-text); }
.ndx-pagination a.is-active { background: var(--ndx-primary); color: #fff; border-color: var(--ndx-primary); }

/* Footer */
.ndx-footer { padding: 18px 22px 26px; text-align: center; color: var(--ndx-muted); font-size: 12px; }
.ndx-footer a { color: var(--ndx-primary); text-decoration: none; font-weight: 600; }
.ndx-footer-meta { margin-top: 4px; }

/* Dark mode */
.ndx-app.ndx-dark { --ndx-bg: #14162a; --ndx-sidebar: #1b1e36; --ndx-text: #e8e9f3; --ndx-muted: #9aa1bd; --ndx-border: #2a2e4d; }
.ndx-app.ndx-dark .ndx-topbar, .ndx-app.ndx-dark .ndx-panel, .ndx-app.ndx-dark .ndx-card,
.ndx-app.ndx-dark .ndx-dashboard-panel,
.ndx-app.ndx-dark .ndx-brand-card, .ndx-app.ndx-dark .ndx-icon-btn, .ndx-app.ndx-dark .ndx-pill,
.ndx-app.ndx-dark .ndx-filter-bar { background: #1b1e36; border-color: #2c2f4a; }
/* Fix: form inputs/selects/textareas kept the browser's default black text
   color in dark mode while their background turned dark navy, making
   everything typed or selected in every Add/Edit form unreadable. */
.ndx-app.ndx-dark .ndx-field input, .ndx-app.ndx-dark .ndx-field select, .ndx-app.ndx-dark .ndx-field textarea {
	background: #1b1e36; border-color: #2c2f4a; color: var(--ndx-text);
}
.ndx-app.ndx-dark .ndx-field input::placeholder, .ndx-app.ndx-dark .ndx-field textarea::placeholder { color: #8e95b2; }
.ndx-app.ndx-dark .ndx-field select option { background: #1b1e36; color: var(--ndx-text); }
.ndx-app.ndx-dark .ndx-filter-field input, .ndx-app.ndx-dark .ndx-filter-field select { background: #14162a; color: var(--ndx-text); border-color: #2c2f4a; }
.ndx-app.ndx-dark .ndx-donut::after { background: #1b1e36; }
.ndx-app.ndx-dark .ndx-table tbody tr:hover td { background: #232748; }
.ndx-app.ndx-dark .ndx-summary > div { background: #20233c; }
.ndx-app.ndx-dark .ndx-section-title, .ndx-app.ndx-dark .ndx-form-section .ndx-field label { color: var(--ndx-text); }
.ndx-app.ndx-dark .ndx-lang-btn { background: #1b1e36; border-color: #2c2f4a; color: #e2e8f0; box-shadow: none; }
.ndx-app.ndx-dark .ndx-lang-btn:hover, .ndx-app.ndx-dark .ndx-lang-switcher.is-open .ndx-lang-btn { background: #252846; border-color: #6366f1; color: #a5b4fc; }
.ndx-app.ndx-dark .ndx-lang-dropdown { background: #1b1e36; border-color: #2c2f4a; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); }
.ndx-app.ndx-dark .ndx-lang-dropdown-header { color: #7983a5; border-bottom-color: #2c2f4a; }
.ndx-app.ndx-dark .ndx-lang-opt { color: #cbd5e1; }
.ndx-app.ndx-dark .ndx-lang-opt:hover { background: #252846; color: #ffffff; }
.ndx-app.ndx-dark .ndx-lang-badge { background: #252846; color: #cbd5e1; }
.ndx-app.ndx-dark .ndx-lang-opt.is-active { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
.ndx-app.ndx-dark .ndx-lang-opt.is-active .ndx-lang-badge { background: #6366f1; color: #ffffff; }
.ndx-app.ndx-dark .ndx-lang-check { color: #a5b4fc; }

/* Global mobile polish: keep admin + employee pages usable on tablet/phone layouts */
@media (max-width: 1024px) {
	.ndx-app { width: 100%; overflow-x: hidden; }
	.ndx-main, .ndx-content { min-width: 0; }
	.ndx-table-wrap, .ndx-employee-section, .ndx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ndx-table, .ndx-employee-table table, .ndx-detail-table { min-width: 560px; }
	.ndx-form-grid, .ndx-kpi-row, .ndx-summary, .ndx-summary-6, .ndx-finance-grid, .ndx-dashboard-metrics, .ndx-employee-insights { width: 100%; }
}

@media (max-width: 782px) {
	.ndx-app { overflow-x: clip; }
	.ndx-topbar-left, .ndx-topbar-right { width: 100%; }
	.ndx-topbar-right { justify-content: flex-start; }
	.ndx-date-pill, .ndx-pill, .ndx-global-search input[type="search"] { font-size: 13px; }
	.ndx-panel-head { align-items: stretch; }
	.ndx-panel-actions, .ndx-panel-toolbar { width: 100%; justify-content: flex-start; }
	.ndx-search { width: 100%; }
	.ndx-search select, .ndx-search input[type="date"], .ndx-search .ndx-btn { flex: 1 1 100%; }
	.ndx-filterbar, .ndx-filter-bar { padding: 12px; }
	.ndx-form-footer .ndx-btn { width: 100%; justify-content: center; }
	.ndx-employee-app main { width: min(1120px, 94%); }
	.ndx-employee-top { padding: 0 14px; }
	.ndx-employee-welcome, .ndx-employee-cards, .ndx-employee-leave-form, .ndx-emp-detail-grid, .ndx-detail-grid { grid-template-columns: 1fr; }
	.ndx-employee-leave-form { display: grid; }
	.ndx-detail-table { min-width: 420px; }
	.ndx-image-field { flex-direction: column; align-items: flex-start; }
	.ndx-task-head, .ndx-task-meta { flex-direction: column; }
	.ndx-task-update-form { align-items: stretch; }
	.ndx-task-update-form .ndx-task-note, .ndx-task-update-form .ndx-task-files-input { flex-basis: 100%; }
	.ndx-task-update-form button { width: 100%; }
}

@media (max-width: 540px) {
	.ndx-global-search { display: flex; }
	.ndx-global-search button { padding: 0 10px; }
	.ndx-topbar-right > * { flex: 1 1 auto; }
	.ndx-control-btn span { display: none; }
	.ndx-round-btn { display: none; }
	.ndx-employee-app main { width: min(1120px, 92%); }
	.ndx-employee-login-card, .ndx-gate-card { padding: 24px 18px; }
	.ndx-gate-card button { padding: 11px 12px; }
	.ndx-task-update-form input, .ndx-task-update-form select, .ndx-task-update-form button { width: 100%; }
	.ndx-form-footer { flex-direction: column; }
	.ndx-form-footer .ndx-btn { width: 100%; }
	.ndx-activity-report-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-activity-report-head > div:nth-child(4n) { border-right: 1px solid var(--ndx-border); }
	.ndx-activity-report-head > div:nth-child(2n) { border-right: 0; }
	.ndx-activity-report-head > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--ndx-border); }
	.ndx-activity-report-head > div:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 1200px) {
	.ndx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-summary, .ndx-summary-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
	.ndx-brand-top { padding: 14px 16px; }
	.ndx-topbar { height: auto; min-height: 64px; padding: 10px 12px; flex-wrap: wrap; align-items: flex-start; }
	.ndx-topbar-left, .ndx-topbar-right { gap: 8px; flex-wrap: wrap; }
	.ndx-topbar-right { width: 100%; justify-content: space-between; }
	.ndx-global-search { width: 100%; min-width: 0; order: 2; }
	.ndx-content { padding: 18px 14px 24px; }
	.ndx-cards, .ndx-form-grid { grid-template-columns: 1fr; }
	.ndx-dashboard-hero, .ndx-dashboard-grid { display: block; }
	.ndx-dashboard-overview-grid { display: block; }
	.ndx-dashboard-reports { display: block; }
	.ndx-report-periods { margin: 14px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-invoice-report-link { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--ndx-border); }
	.ndx-dashboard-quick { margin-top: 14px; }
	.ndx-dashboard-panel { margin-bottom: 18px; }
	.ndx-dashboard-mini-grid { grid-template-columns: 1fr; gap: 0; }
	.ndx-dashboard-overview-grid .ndx-dashboard-panel { margin-bottom: 18px; }
	.ndx-dashboard-metrics { grid-template-columns: 1fr; }
	.ndx-employee-insights { grid-template-columns: 1fr; }
	.ndx-report-columns { grid-template-columns: 1fr; }
	.ndx-service-row { grid-template-columns: 1fr; }
	.ndx-finance-grid { grid-template-columns: 1fr; }
	.ndx-employee-welcome, .ndx-employee-cards, .ndx-employee-leave-form { grid-template-columns: 1fr; }
	.ndx-filter-bar { align-items: stretch; width: 100%; }
	.ndx-filter-field { width: 100%; }
	.ndx-filter-field input, .ndx-filter-field select { width: 100%; min-width: 0; box-sizing: border-box; }
	.ndx-filter-actions { flex-direction: row; }
	.ndx-task-assignee { grid-template-columns: 1fr; }
	.ndx-emp-welcome { flex-direction: column; align-items: flex-start; }
	.ndx-emp-detail-grid { grid-template-columns: 1fr; }
	.ndx-notif-pop { width: min(90vw, 360px); right: -10px; }
	.ndx-account-pop { right: -8px; width: min(84vw, 220px); }
	.ndx-pill { padding: 7px 10px; }
	.ndx-bell { width: 34px; height: 34px; }
	.ndx-profile-grid { flex-direction: column; }
	.ndx-emp-shell .ndx-cards { grid-template-columns: 1fr; }
	.ndx-emp-hero { flex-direction: column; align-items: stretch; padding: 18px 16px; }
	.ndx-emp-hero-main { width: 100%; flex-direction: column; align-items: flex-start; }
	.ndx-emp-hero h1 { font-size: clamp(22px, 6vw, 30px); }
	.ndx-emp-hero-chips { gap: 6px; }
	.ndx-emp-hero-stats { width: 100%; grid-template-columns: 1fr; }
	.ndx-emp-due-row { grid-template-columns: 1fr; }
	.ndx-emp-due-bar { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
	.ndx-topbar {
		padding: 8px 10px;
		gap: 8px;
	}
	.ndx-topbar-left, .ndx-topbar-right { width: 100%; }
	.ndx-topbar-right { justify-content: flex-end; }
	.ndx-global-search { order: 0; }
	.ndx-control-btn span { display: none; }
	.ndx-round-btn { display: none; }
	.ndx-pill { padding: 7px 8px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.ndx-pill svg { flex-shrink: 0; }
	.ndx-dashboard-hero h1 { font-size: 24px; }
	.ndx-dashboard-reports { padding: 14px; }
	.ndx-report-periods { grid-template-columns: 1fr; }
	.ndx-card, .ndx-panel { border-radius: 12px; }
	.ndx-table th, .ndx-table td { padding: 10px 8px; }
	.ndx-task-head, .ndx-task-meta { flex-direction: column; }
	.ndx-task-update-form { align-items: stretch; }
	.ndx-task-update-form .ndx-task-note, .ndx-task-update-form .ndx-task-files-input { flex-basis: 100%; }
	.ndx-task-update-form button { width: 100%; }
	.ndx-summary, .ndx-summary-6, .ndx-summary-3 { grid-template-columns: 1fr; }
	.ndx-kpi-row { grid-template-columns: 1fr; }
	.ndx-dashboard-metrics { grid-template-columns: 1fr; }
	.ndx-emp-hero { flex-direction: column; align-items: flex-start; padding: 18px; }
	.ndx-emp-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
	.ndx-emp-due-row { grid-template-columns: 1fr; }
	.ndx-profile-details p { flex-direction: column; gap: 3px; }
	.ndx-profile-details p span { width: auto; }
	.ndx-cropper-canvas-wrap, .ndx-cropper-canvas-wrap img { max-width: 100%; width: 100%; }
	.ndx-cropper-side { max-width: none; }
	.ndx-entity-chart, .ndx-employee-insights { grid-template-columns: 1fr; }
	.ndx-form-footer { flex-direction: column; }
	.ndx-form-footer .ndx-btn { width: 100%; justify-content: center; }
	.ndx-emp-shell .ndx-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 10px;
		min-height: 52px;
		gap: 8px;
	}
	.ndx-emp-shell .ndx-topbar-left,
	.ndx-emp-shell .ndx-topbar-right {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
	}
	.ndx-emp-shell .ndx-topbar-left { justify-content: flex-start; min-width: 0; }
	.ndx-emp-shell .ndx-topbar-right { justify-content: flex-end; flex: 0 0 auto; }
	.ndx-emp-shell .ndx-pill {
		display: inline-flex;
		max-width: 145px;
		padding: 7px 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ndx-emp-shell .ndx-control-btn {
		width: 34px;
		min-width: 34px;
		padding: 0;
		justify-content: center;
	}
	.ndx-emp-shell .ndx-control-btn span { display: none; }
	.ndx-emp-shell .ndx-icon-btn { min-width: 34px; width: 34px; padding: 0; justify-content: center; }
	.ndx-emp-shell .ndx-notif { flex-shrink: 0; }
	.ndx-emp-shell .ndx-bell { width: 34px; height: 34px; }
	.ndx-emp-shell .ndx-avatar { width: 34px; height: 34px; }
	.ndx-emp-shell .ndx-brand-top { display: none; }
	.ndx-emp-shell .ndx-brand-card { margin: 12px 10px; }
}

/* Notifications dropdown */
.ndx-notif { position: relative; }
.ndx-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--ndx-border); background: #fff; border-radius: 999px; cursor: pointer; color: inherit; }
.ndx-bell em { position: absolute; top: -6px; right: -6px; font-style: normal; font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 999px; background: #ef4444; color: #fff; }
.ndx-notif-pop { position: absolute; right: 0; top: calc(100% + 10px); width: 360px; max-height: 440px; overflow: auto; background: #fff; border: 1px solid var(--ndx-border); border-radius: 12px; box-shadow: 0 18px 40px rgba(16, 24, 40, .18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .15s ease; z-index: 999; }
.ndx-notif:hover .ndx-notif-pop, .ndx-notif.is-open .ndx-notif-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.ndx-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ndx-border); position: sticky; top: 0; background: #fff; }
.ndx-notif-head strong { font-size: 16px; }
.ndx-notif-head a { color: #334155; text-decoration: none; font-size: 13px; }
.ndx-notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ndx-border); text-decoration: none; color: inherit; }
.ndx-notif-item:hover { background: #f3f6fb; }
.ndx-notif-dot { width: 8px; height: 8px; border-radius: 999px; background: #3b82f6; margin-top: 8px; flex: none; }
.ndx-notif-body { display: block; }
.ndx-notif-type { display: block; color: #16a34a; font-size: 12px; text-transform: lowercase; }
.ndx-notif-title { display: block; color: #2563eb; font-size: 14px; margin: 2px 0; }
.ndx-notif-time { display: block; color: var(--ndx-muted); font-size: 12px; }
.ndx-notif-list-page .ndx-notif-item:last-child { border-bottom: 0; }

/* Lead detail */
.ndx-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.ndx-company-readonly { padding-top: 8px; }
.ndx-detail-item { min-width: 0; padding: 14px 16px; border: 1px solid var(--ndx-border); background: #fff; }
.ndx-detail-item > span { display: block; margin-bottom: 6px; color: var(--ndx-muted); font-size: 12px; }
.ndx-detail-item > strong { display: block; color: var(--ndx-text); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ndx-detail-item-wide { grid-column: 1 / -1; }
.ndx-company-logo-display { display: block; max-width: 220px; max-height: 100px; object-fit: contain; object-position: left center; }
.ndx-detail-card { background: #fff; border: 1px solid var(--ndx-border); border-radius: 10px; overflow: hidden; }
.ndx-detail-head { padding: 16px 20px; color: #fff; font-size: 18px; font-weight: 600; }
.ndx-head-green { background: #4caf82; }
.ndx-head-blue { background: #4a9fe0; }
.ndx-head-red { background: #ec4d43; }
.ndx-detail-table { width: 100%; border-collapse: collapse; margin: 14px; width: calc(100% - 28px); }
.ndx-detail-table th, .ndx-detail-table td { border: 1px solid var(--ndx-border); padding: 10px 12px; text-align: left; font-weight: 400; font-size: 14px; }
.ndx-detail-table th { color: #475569; background: #fafbfd; width: 45%; }
.ndx-link-text { color: #2563eb; }
.ndx-due { color: #ef4444; }
.ndx-track-table tbody tr td { background: #eef7e6; }
.ndx-detail-actions { display: flex; gap: 10px; padding: 14px; }
.ndx-app.ndx-dark .ndx-notif-pop, .ndx-app.ndx-dark .ndx-notif-head, .ndx-app.ndx-dark .ndx-bell, .ndx-app.ndx-dark .ndx-detail-card { background: #1b1e36; color: var(--ndx-text); }
.ndx-app.ndx-dark .ndx-detail-table th { background: #20233c; color: var(--ndx-text); }
.ndx-app.ndx-dark .ndx-track-table tbody tr td { background: #232748; }
@media (max-width: 1200px) { .ndx-detail-grid { grid-template-columns: 1fr; } }

/* ---- Employee photo + detail ---- */
.ndx-avatar-sm { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ndx-border, #e5e7eb); display: inline-block; }
.ndx-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: #ede9fe; color: #6d28d9; font-weight: 700; font-size: 14px; }
.ndx-image-field { display: flex; gap: 14px; align-items: center; }
.ndx-image-preview { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px dashed var(--ndx-border, #e5e7eb); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ndx-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.ndx-image-placeholder { font-size: 11px; opacity: .6; }
.ndx-image-inputs { display: grid; gap: 6px; flex: 1; }
.ndx-signature-input { display: grid; gap: 6px; }
.ndx-signature-preview { height: 54px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--ndx-border, #e5e7eb); background: #fff; }
.ndx-signature-preview img { max-width: 100%; max-height: 48px; object-fit: contain; }
.ndx-signature-preview span { color: var(--ndx-muted); font-size: 12px; }
.ndx-off-days { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--ndx-border); border-radius: 8px; background: #fff; }
.ndx-off-days label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; font-weight: 400; }
.ndx-emp-profile { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 20px; padding: 20px; }
.ndx-emp-photo-card { border: 1px solid var(--ndx-border, #e5e7eb); border-radius: 12px; padding: 22px; text-align: center; }
.ndx-emp-photo { width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1 / 1; border: 1px solid var(--ndx-border, #e5e7eb); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f8fafc; }
.ndx-emp-photo img { width: 100%; height: 100%; object-fit: cover; }
.ndx-emp-photo-fallback { font-size: 72px; font-weight: 700; color: #6d28d9; }
.ndx-emp-name { margin: 18px 0 0; font-size: 26px; font-weight: 700; }
.ndx-emp-info { border: 1px solid var(--ndx-border, #e5e7eb); border-radius: 12px; overflow: hidden; }
.ndx-emp-table { width: 100%; }
.ndx-emp-table th { width: 38%; text-align: left; }
@media (max-width: 900px) { .ndx-emp-profile { grid-template-columns: 1fr; } }

/* --- Notifications read / unread --- */
.ndx-notif-item.is-read { opacity: .72; background: #fbfcfe; }
.ndx-notif-item.is-read .ndx-notif-dot { background: #cbd5e1; }
.ndx-notif-item.is-unread { background: #f5f8ff; }
.ndx-notif-item.is-unread .ndx-notif-title { font-weight: 600; }
.ndx-notif-state { margin-left: auto; align-self: center; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.ndx-notif-item.is-unread .ndx-notif-state { color: #2563eb; font-weight: 600; }
.ndx-notif-head-actions { display: inline-flex; gap: 12px; }
.ndx-unread-pill { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 11px; vertical-align: middle; }

/* --- Clickable stat cards --- */
.ndx-card-link { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.ndx-card-link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 24, 40, .12); }

/* --- Logo cropper --- */
.ndx-cropper { margin-top: 14px; }
.ndx-cropper-stage { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.ndx-cropper-canvas-wrap { position: relative; display: inline-block; max-width: 420px; background: #f1f5f9; border: 1px solid var(--ndx-border); border-radius: 10px; overflow: hidden; }
.ndx-cropper-canvas-wrap img { display: block; max-width: 420px; max-height: 300px; user-select: none; -webkit-user-drag: none; }
.ndx-crop-box { position: absolute; border: 2px solid #2563eb; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .35); cursor: move; }
.ndx-crop-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 3px; background: #2563eb; cursor: nwse-resize; }
.ndx-cropper-side { display: flex; flex-direction: column; gap: 10px; max-width: 260px; }
.ndx-cropper-side .ndx-btn { width: fit-content; }
.ndx-crop-result img { max-width: 200px; max-height: 120px; display: block; margin-top: 6px; border: 1px solid var(--ndx-border); border-radius: 8px; background: #fff; }
.ndx-hint { font-size: 12px; color: var(--ndx-muted); margin: 0; }
.ndx-size-fields { display: flex; gap: 16px; flex-wrap: wrap; }
.ndx-size-fields label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ndx-size-fields input { width: 110px; }

/* Dashboard date range filter */
.ndx-filterbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(20,20,43,.06); padding: 14px 18px; margin-bottom: 18px; }
.ndx-filter-field { display: flex; flex-direction: column; gap: 4px; }
.ndx-filter-field label { font-size: 12px; font-weight: 600; color: var(--ndx-muted); }
.ndx-filter-field input[type="date"] { padding: 7px 10px; border: 1px solid var(--ndx-border); border-radius: 8px; font-size: 13px; background: #fff; color: var(--ndx-text); min-width: 160px; }
.ndx-filterbar .ndx-btn { height: 34px; }
.ndx-range-chip { padding: 6px 12px; border-radius: 999px; background: #f3f2fd; color: var(--ndx-primary); font-size: 12px; font-weight: 600; }
.ndx-filter-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ndx-preset { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ndx-border); font-size: 12px; text-decoration: none; color: var(--ndx-muted); background: #fff; }
.ndx-preset:hover, .ndx-preset.is-active { border-color: var(--ndx-primary); color: var(--ndx-primary); background: #f3f2fd; }
.ndx-app.ndx-dark .ndx-filterbar, .ndx-app.ndx-dark .ndx-filter-field input[type="date"], .ndx-app.ndx-dark .ndx-preset { background: #1f2440; color: #e6e8f5; border-color: #2c3255; }
@media (max-width: 782px) { .ndx-filter-presets { margin-left: 0; } }


/* --- Location combo (dropdown + inline create) ---------------------- */
.ndx-combo { position: relative; }
.ndx-combo-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	width: 100%; padding: 9px 12px; background: #fff; cursor: pointer;
	border: 1px solid #e2e5ef; border-radius: 8px; font-size: 14px; color: #1f2340; text-align: left;
}
.ndx-combo.is-open .ndx-combo-toggle { border-color: var(--ndx-primary); box-shadow: 0 0 0 3px rgba(109,90,230,.15); }
.ndx-combo.is-disabled .ndx-combo-toggle { background: #f4f5fa; cursor: not-allowed; color: #9aa0b8; }
.ndx-combo-value.is-placeholder { color: #9aa0b8; }
.ndx-combo-caret { color: #9aa0b8; font-size: 12px; }
.ndx-combo-panel {
	display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
	background: #fff; border: 1px solid #e2e5ef; border-radius: 10px; box-shadow: 0 18px 40px rgba(24,26,54,.14);
	padding: 6px;
}
.ndx-combo.is-open .ndx-combo-panel { display: block; }
.ndx-combo-list { max-height: 220px; overflow-y: auto; }
.ndx-combo-option {
	display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	padding: 9px 10px; border-radius: 6px; font-size: 14px; color: #1f2340;
}
.ndx-combo-option:hover { background: #f2f1fd; }
.ndx-combo-option.is-selected { background: #e7e4fb; font-weight: 600; }
.ndx-combo-option[hidden] { display: none; }
.ndx-combo-empty { display: none; padding: 18px 10px; text-align: center; font-size: 13px; color: #9aa0b8; }
.ndx-combo-add { display: flex; gap: 8px; padding: 8px 4px 4px; border-top: 1px solid #eef0f7; margin-top: 6px; }
.ndx-combo-add input {
	flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
	border: 1px solid #e2e5ef; border-radius: 8px;
}
.ndx-combo-add input:focus { outline: 0; border-color: var(--ndx-primary); box-shadow: 0 0 0 3px rgba(109,90,230,.15); }
.ndx-combo-create { white-space: nowrap; }
.ndx-combo-msg { margin: 4px 4px 2px; font-size: 12px; color: #6b7192; }
.ndx-combo-msg.is-error { color: #ef4444; }
.ndx-app.ndx-dark .ndx-combo-toggle,
.ndx-app.ndx-dark .ndx-combo-panel,
.ndx-app.ndx-dark .ndx-combo-add input { background: #232744; border-color: #343a63; color: var(--ndx-text); }
.ndx-app.ndx-dark .ndx-combo-option { color: var(--ndx-text); }
.ndx-app.ndx-dark .ndx-combo-option:hover,
.ndx-app.ndx-dark .ndx-combo-option.is-selected { background: #33386a; }

/* Read-only auto fields (e.g. auto generated invoice number) */
.ndx-form input.ndx-readonly { background: #f2f5f9; color: #4a5563; cursor: not-allowed; font-weight: 600; letter-spacing: .4px; }
.ndx-form .ndx-hint { display: block; margin-top: 4px; font-size: 11.5px; color: #7a8794; }

/* ---- Activation gate ---- */
.ndx-gate-body { margin:0; background:linear-gradient(135deg,#eef2ff,#f8fafc); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.ndx-gate { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; }
.ndx-gate-card { width:100%; max-width:420px; background:#fff; border-radius:18px; padding:34px 30px; box-shadow:0 18px 45px rgba(30,41,59,.12); text-align:center; }
.ndx-gate-badge { width:56px; height:56px; margin:0 auto 14px; border-radius:16px; background:#5b5bd6; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:.5px; }
.ndx-gate-card h1 { font-size:22px; margin:0 0 6px; color:#0f172a; }
.ndx-gate-sub { margin:0 0 20px; color:#64748b; font-size:13px; }
.ndx-gate-card label { display:block; text-align:left; font-size:12px; font-weight:700; color:#334155; margin:12px 0 6px; }
.ndx-gate-card input { width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid #dbe1ea; border-radius:10px; font-size:14px; }
.ndx-gate-card input:focus { outline:none; border-color:#5b5bd6; box-shadow:0 0 0 3px rgba(91,91,214,.15); }
.ndx-gate-card button { width:100%; margin-top:18px; padding:12px; border:0; border-radius:10px; background:#5b5bd6; color:#fff; font-weight:700; font-size:14px; cursor:pointer; }
.ndx-gate-card button:hover { background:#4a4ac4; }
.ndx-gate-error { background:#fee2e2; color:#991b1b; border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:8px; }
.ndx-gate-link { display:inline-block; margin-top:16px; font-size:13px; color:#5b5bd6; text-decoration:none; }
.ndx-gate-footer { color:#94a3b8; font-size:12px; }
.ndx-footer-lock { margin-left:10px; color:#5b5bd6; text-decoration:none; font-weight:600; }

/* Embedded shortcode login */
.ndx-gate-embed { position:relative; min-height:560px; box-sizing:border-box; overflow:hidden; padding:48px 20px; background:#f7f8fc; isolation:isolate; }
.ndx-gate-embed::before, .ndx-gate-embed::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.ndx-gate-embed::before { width:340px; height:340px; top:-150px; left:-90px; background:#dff5ee; }
.ndx-gate-embed::after { width:420px; height:420px; right:-170px; bottom:-210px; background:#e8e5ff; }
.ndx-gate-embed .ndx-gate-card { max-width:430px; padding:42px 40px 34px; border:1px solid rgba(255,255,255,.9); border-radius:8px; box-shadow:0 24px 60px rgba(38,45,75,.14); }
.ndx-gate-embed .ndx-gate-badge { width:64px; height:64px; margin-bottom:20px; border-radius:18px; background:#173f5f; box-shadow:8px 8px 0 #f2b134; font-size:17px; letter-spacing:1px; }
.ndx-gate-kicker { margin:0 0 8px; color:#e07a5f; font-size:10px; font-weight:800; letter-spacing:2px; }
.ndx-gate-embed .ndx-gate-card h1 { color:#173f5f; font-family:Georgia,"Times New Roman",serif; font-size:30px; letter-spacing:0; }
.ndx-gate-embed .ndx-gate-sub { margin:8px auto 24px; max-width:280px; line-height:1.6; }
.ndx-gate-embed .ndx-gate-card label { margin-top:16px; color:#173f5f; letter-spacing:.2px; }
.ndx-gate-embed .ndx-gate-card input { min-height:46px; border-color:#d9dee8; border-radius:5px; background:#fbfcfe; }
.ndx-gate-embed .ndx-gate-card input:focus { border-color:#e07a5f; box-shadow:0 0 0 3px rgba(224,122,95,.15); }
.ndx-gate-embed .ndx-gate-card button { min-height:48px; margin-top:24px; border-radius:5px; background:#e07a5f; text-align:left; padding:0 18px; }
.ndx-gate-embed .ndx-gate-card button span { float:right; font-size:20px; line-height:16px; }
.ndx-gate-embed .ndx-gate-card button:hover { background:#c9654b; }
.ndx-gate-secure { margin:22px 0 0; color:#8792a5; font-size:11px; letter-spacing:.2px; }
.ndx-gate-secure span { display:inline-block; margin-right:5px; color:#2a9d8f; font-size:8px; vertical-align:1px; }
@media (max-width:480px) { .ndx-gate-embed { min-height:520px; padding:28px 12px; } .ndx-gate-embed .ndx-gate-card { padding:34px 24px 28px; } }

/* Employee client invoice service rows */
.ndx-emp-services { margin-top: 18px; }
.ndx-emp-service-row { grid-template-columns: minmax(0, 1fr) 100px 180px auto; margin-bottom: 10px; }
.ndx-emp-service-row > .ndx-field { grid-column: auto; min-width: 0; }
.ndx-service-remove-field .ndx-btn { white-space: nowrap; }
#ndx-emp-add-service { margin-top: 4px; }

/* Invoice live totals summary (admin form + employee portal) */
.ndx-invoice-summary {
	margin: 18px 0;
	padding: 14px 18px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	max-width: 420px;
	margin-left: auto;
}
.ndx-invoice-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	font-size: 14px;
	color: #475569;
}
.ndx-invoice-summary-row strong { font-variant-numeric: tabular-nums; color: #1f2733; }
.ndx-invoice-summary-row.is-total {
	border-top: 1px dashed #cbd5e1;
	font-weight: 600;
	color: #1f2733;
}
.ndx-invoice-summary-row.is-due {
	border-top: 2px solid #1f2733;
	margin-top: 4px;
	padding-top: 10px;
	font-weight: 700;
}
.ndx-invoice-summary-row.is-due strong { color: #c02626; font-size: 16px; }

/* Client picker on the invoice form */
.ndx-client-picker { display: grid; gap: 8px; }
.ndx-client-picker .ndx-client-select { width: 100%; }
.ndx-client-due { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; }
.ndx-client-due.is-due { background: #fff4e0; color: #b26a00; }
.ndx-client-due.is-clear { background: #e6f6ee; color: #12855b; }
.ndx-client-picker [data-settle-due] { justify-self: start; }

/* Client account ledger + previous due payment (invoice form) */
.ndx-client-ledger {
	border: 1px solid #e3e8ef;
	border-radius: 10px;
	background: #fbfcfe;
	padding: 10px 12px;
	display: grid;
	gap: 10px;
}
.ndx-ledger-head { font-size: 12px; font-weight: 700; color: #1f2733; }
.ndx-ledger-head span {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eef2f7;
	color: #5b6676;
	font-weight: 600;
}
.ndx-ledger-scroll { max-height: 220px; overflow: auto; }
.ndx-ledger-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ndx-ledger-table th,
.ndx-ledger-table td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; text-align: left; white-space: nowrap; }
.ndx-ledger-table th { background: #f4f6fa; color: #5b6676; font-weight: 700; }
.ndx-ledger-table .ndx-num { text-align: right; font-variant-numeric: tabular-nums; }
.ndx-ledger-status {
	text-transform: capitalize;
	font-weight: 700;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
}
.ndx-ledger-status.is-paid { background: #e6f6ee; color: #12855b; }
.ndx-ledger-status.is-partial { background: #fff4e0; color: #b26a00; }
.ndx-ledger-status.is-unpaid { background: #fdeaea; color: #c02626; }
.ndx-ledger-totals { display: flex; flex-wrap: wrap; gap: 10px; }
.ndx-ledger-totals div {
	flex: 1 1 120px;
	background: #fff;
	border: 1px solid #e3e8ef;
	border-radius: 8px;
	padding: 8px 10px;
	display: grid;
	gap: 2px;
}
.ndx-ledger-totals span { font-size: 11px; color: #5b6676; font-weight: 600; }
.ndx-ledger-totals strong { font-size: 15px; color: #1f2733; font-variant-numeric: tabular-nums; }
.ndx-ledger-totals .is-due { border-color: #f3c7c7; background: #fdeaea; }
.ndx-ledger-totals .is-due strong { color: #c02626; }
.ndx-due-payment {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border: 1px dashed #c9d4e2;
	border-radius: 10px;
	background: #fff;
}
.ndx-due-payment > label { font-size: 12px; font-weight: 700; color: #1f2733; }
.ndx-due-payment-row { display: flex; gap: 8px; align-items: center; }
.ndx-due-payment-row input { flex: 1 1 auto; }
.ndx-due-payment-result { margin: 0; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; }
.ndx-due-payment-result.is-due { background: #fff4e0; color: #b26a00; }
.ndx-due-payment-result.is-clear { background: #e6f6ee; color: #12855b; }

/* Dedicated Invoice Header Card with Top-Aside Invoice Number */
.ndx-invoice-top-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, #f8fafc 0%, #edf2f9 100%);
	border: 1px solid #dbe3ee;
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 20px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.ndx-invoice-top-info {
	flex: 1 1 320px;
	display: grid;
	gap: 6px;
}
.ndx-invoice-top-badge-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ndx-invoice-top-title {
	font-size: 22px;
	font-weight: 800;
	color: #1e293b;
	margin: 0;
	line-height: 1.25;
}
.ndx-invoice-top-sub {
	font-size: 13px;
	color: #64748b;
	margin: 0;
}
.ndx-invoice-top-aside {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.ndx-invoice-aside-box {
	background: #ffffff;
	border: 2px dashed #4f46e5;
	border-radius: 10px;
	padding: 10px 18px;
	text-align: center;
	min-width: 190px;
	box-shadow: 0 3px 8px rgba(79, 70, 229, 0.08);
}
.ndx-invoice-aside-label {
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #6366f1;
	display: block;
}
.ndx-invoice-aside-number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 17px;
	font-weight: 800;
	color: #1e1b4b;
	margin-top: 3px;
	letter-spacing: 0.02em;
}
.ndx-invoice-aside-date-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: #475569;
}
.ndx-invoice-aside-date-wrap input {
	padding: 5px 9px;
	font-size: 12.5px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #ffffff;
}

/* Agent Picker & Multi-Invoice Due Tracking */
.ndx-agent-picker-field { display: grid; gap: 8px; }
.ndx-agent-picker-row {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.ndx-agent-picker-row .ndx-agent-select {
	flex: 1 1 300px;
	font-weight: 600;
	border-color: #6366f1;
	background: #fafbff;
}
.ndx-agent-manual-wrap {
	flex: 1 1 240px;
}
.ndx-agent-manual-wrap input {
	width: 100%;
	border: 1px solid #818cf8;
	background: #fdf2f8;
	font-weight: 600;
}
.ndx-agent-ledger-container {
	margin-top: 10px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
	padding: 14px 16px;
	display: grid;
	gap: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.ndx-agent-summary-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e2e8f0;
}
.ndx-agent-summary-title {
	font-size: 13.5px;
	font-weight: 800;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ndx-agent-summary-phone {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	background: #edf2f7;
	padding: 1px 7px;
	border-radius: 999px;
}
.ndx-agent-chips-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}
.ndx-agent-chip {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 9px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ndx-agent-chip span {
	font-size: 10.5px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.ndx-agent-chip strong {
	font-size: 16px;
	font-weight: 800;
	color: #1e293b;
	font-variant-numeric: tabular-nums;
}
.ndx-agent-chip.is-paid {
	border-color: #bbf7d0;
	background: #f0fdf4;
}
.ndx-agent-chip.is-paid strong { color: #16a34a; }
.ndx-agent-chip.is-due {
	border-color: #fecaca;
	background: #fef2f2;
}
.ndx-agent-chip.is-due strong { color: #dc2626; }
.ndx-agent-chip.is-clear {
	border-color: #bbf7d0;
	background: #f0fdf4;
}
.ndx-agent-chip.is-clear strong { color: #16a34a; }
.ndx-agent-chip.is-status-counts {
	background: #f8fafc;
	border-color: #cbd5e1;
}
.ndx-agent-breakdown-tags {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 3px;
}
.ndx-agent-breakdown-tags span {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	text-transform: none;
	letter-spacing: normal;
}
.ndx-tag-paid { background: #dcfce7; color: #15803d; }
.ndx-tag-partial { background: #fef3c7; color: #b45309; }
.ndx-tag-due { background: #fee2e2; color: #b91c1c; }

.ndx-ledger-title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 6px;
}
.ndx-ledger-title-bar small {
	font-weight: 500;
	color: #64748b;
}
.ndx-agent-ledger-table .is-partial-row td {
	background: #fffbeb !important;
}
.ndx-agent-ledger-table .is-due-row td {
	background: #fff8f8 !important;
}
.ndx-agent-ledger-table .is-due-text {
	color: #dc2626;
	font-weight: 700;
}
.ndx-agent-due-payment {
	background: #ffffff;
	border: 1px dashed #94a3b8;
	border-radius: 10px;
	padding: 12px 14px;
	display: grid;
	gap: 8px;
}

@media (max-width: 768px) {
	.ndx-invoice-top-card {
		flex-direction: column;
		align-items: stretch;
	}
	.ndx-invoice-top-aside {
		align-items: stretch;
	}
	.ndx-invoice-aside-box {
		min-width: unset;
		width: 100%;
	}
	.ndx-agent-chips-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   2-Column Split Invoice Layout (Form on Left, Sticky Amounts on Right)
   ========================================================================== */
.ndx-invoice-split-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 24px;
	align-items: start;
	margin-top: 12px;
}

.ndx-invoice-fields-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* Invoice Header Banner */
.ndx-invoice-main-header {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 20px 24px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.ndx-invoice-header-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ndx-invoice-header-badge-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 2px;
}
.ndx-invoice-type-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	border-radius: 999px;
	background: #e0e7ff;
	color: #4338ca;
	border: 1px solid #c7d2fe;
}
.ndx-invoice-meta-chip {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	background: #f1f5f9;
	padding: 3px 10px;
	border-radius: 999px;
}
.ndx-invoice-main-title {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	line-height: 1.25;
}
.ndx-invoice-no-highlight {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	color: #4f46e5;
}
.ndx-invoice-main-sub {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
	line-height: 1.45;
}

/* Invoice Card Sections */
.ndx-invoice-section {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
	transition: box-shadow 0.2s ease;
}
.ndx-section-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
}
.ndx-section-title {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ndx-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #eef2ff;
	color: #4f46e5;
	font-size: 18px;
	flex-shrink: 0;
}
.ndx-section-title strong {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
}
.ndx-section-sub {
	display: block;
	font-size: 12px;
	color: #64748b;
	font-weight: 400;
	margin-top: 2px;
}
.ndx-item-count-badge {
	font-size: 12px;
	font-weight: 700;
	color: #4f46e5;
	background: #eef2ff;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid #c7d2fe;
}

/* 2-Column Form Grid */
.ndx-form-grid-2col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Agent Header row with + Create Agent button */
.ndx-agent-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.ndx-agent-header-row label {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.ndx-field-hint {
	font-size: 12px;
	font-weight: 400;
	color: #64748b;
}
.ndx-create-agent-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	background: #eef2ff;
	color: #4338ca;
	border: 1px solid #c7d2fe;
	cursor: pointer;
	transition: all 0.15s ease;
}
.ndx-create-agent-btn:hover {
	background: #4f46e5;
	color: #ffffff;
	border-color: #4f46e5;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.ndx-create-agent-btn .ndx-btn-icon {
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
}

/* Checkbox Card for Refundable Option */
.ndx-checkbox-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #f8fafc;
	border: 1.5px solid #e2e8f0;
	cursor: pointer;
	transition: all 0.15s ease;
}
.ndx-checkbox-card:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}
.ndx-checkbox-card input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: #4f46e5;
	cursor: pointer;
}
.ndx-checkbox-card-body strong {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: #1e293b;
}
.ndx-checkbox-card-body span {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-top: 1px;
}

/* ==========================================================================
   Itemized Services Table & Cards
   ========================================================================== */
.ndx-service-editor {
	display: flex;
	flex-direction: column;
}
.ndx-service-table-head {
	display: grid;
	grid-template-columns: minmax(0, 2.5fr) 95px 145px 135px 44px;
	gap: 12px;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}
.ndx-service-table-head .ndx-th-qty { text-align: center; }
.ndx-service-table-head .ndx-th-rate,
.ndx-service-table-head .ndx-th-total { text-align: right; }

.ndx-service-rows-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}
.ndx-service-row {
	display: grid;
	grid-template-columns: minmax(0, 2.5fr) 95px 145px 135px 44px;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	transition: all 0.15s ease;
}
.ndx-service-row:hover {
	border-color: #cbd5e1;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}
.ndx-mobile-label {
	display: none;
}
.ndx-service-col input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 13.5px;
	color: #0f172a;
	background: #ffffff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ndx-service-col input:focus {
	border-color: #6366f1;
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ndx-col-qty input {
	text-align: center;
	font-weight: 600;
}
.ndx-input-currency-wrapper {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
}
.ndx-currency-prefix {
	position: absolute;
	left: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #64748b;
	pointer-events: none;
}
.ndx-input-currency-wrapper input {
	padding-left: 24px !important;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.ndx-service-line-total {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 3px;
	font-variant-numeric: tabular-nums;
	padding-right: 4px;
}
.ndx-service-line-total .ndx-currency-symbol {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
}
.ndx-service-line-total strong {
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
}
.ndx-btn-icon-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #fef2f2;
	color: #ef4444;
	border: 1px solid #fecaca;
	cursor: pointer;
	transition: all 0.15s ease;
}
.ndx-btn-icon-danger:hover {
	background: #dc2626;
	color: #ffffff;
	border-color: #dc2626;
	transform: scale(1.05);
}
.ndx-service-add-bar {
	margin-top: 14px;
}
.ndx-service-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 18px;
	border-radius: 10px;
	background: #f8fafc;
	border: 1.5px dashed #cbd5e1;
	color: #4338ca;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}
.ndx-service-add-btn:hover {
	background: #eef2ff;
	border-color: #818cf8;
	color: #3730a3;
	transform: translateY(-1px);
}
.ndx-add-icon {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}

/* ==========================================================================
   RIGHT COLUMN: Sticky Executive Billing Summary Card
   ========================================================================== */
.ndx-invoice-amounts-column {
	position: relative;
	min-width: 0;
}
.ndx-invoice-sticky-amounts-card {
	position: sticky;
	top: 16px;
	z-index: 10;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.03);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Sidebar Top Meta */
.ndx-inv-sidebar-card-top {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ndx-inv-sidebar-top-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.ndx-inv-type-pill {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #475569;
	background: #e2e8f0;
	padding: 3px 8px;
	border-radius: 6px;
}
.ndx-inv-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
	transition: all 0.2s ease;
}
.ndx-inv-status-pill.ndx-status-pill-paid {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}
.ndx-inv-status-pill.ndx-status-pill-partial {
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fde047;
}
.ndx-inv-status-pill.ndx-status-pill-unpaid {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}
.ndx-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
	animation: ndxStatusPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ndxStatusPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.85); }
}

.ndx-inv-sidebar-no-box {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ndx-inv-sidebar-label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}
.ndx-inv-number-display strong {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 18px;
	font-weight: 800;
	color: #1e1b4b;
	letter-spacing: 0.03em;
}
.ndx-inv-sidebar-date-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: #475569;
}
.ndx-inv-sidebar-date-wrap label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.ndx-inv-sidebar-date-wrap input {
	padding: 5px 9px;
	font-size: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
	background: #ffffff;
	font-weight: 600;
}

.ndx-inv-sidebar-divider {
	height: 1px;
	background: #f1f5f9;
	margin: 2px 0;
}
.ndx-inv-sidebar-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ndx-inv-sidebar-field label {
	font-size: 12.5px;
	font-weight: 700;
	color: #334155;
	margin: 0;
}
.ndx-inv-sidebar-field select,
.ndx-inv-sidebar-field textarea {
	width: 100%;
	font-size: 13px;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	padding: 8px 10px;
}

/* Financial Receipt Breakdown Card */
.ndx-inv-receipt-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ndx-inv-receipt-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13.5px;
	color: #475569;
}
.ndx-receipt-label {
	font-weight: 600;
}
.ndx-receipt-val {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #1e293b;
	font-size: 14.5px;
}
.ndx-receipt-val .ndx-curr {
	font-size: 12.5px;
	color: #64748b;
	margin-right: 2px;
}
.ndx-currency-input-wrap {
	display: flex;
	align-items: center;
	position: relative;
	width: 120px;
}
.ndx-currency-badge {
	position: absolute;
	left: 8px;
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
	pointer-events: none;
}
.ndx-currency-input-wrap input {
	width: 100% !important;
	padding: 5px 8px 5px 22px !important;
	text-align: right;
	font-weight: 700;
	font-size: 13px;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
	font-variant-numeric: tabular-nums;
}
.ndx-currency-input-wrap input:focus {
	border-color: #6366f1;
	outline: none;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.ndx-inv-receipt-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 4px 0;
}

/* Net Payable Total Highlight */
.ndx-inv-receipt-line.is-grand-total {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 10px 12px;
	margin: 2px 0;
}
.ndx-grand-total-label strong {
	display: block;
	font-size: 13px;
	font-weight: 800;
	color: #0f172a;
}
.ndx-grand-total-label small {
	display: block;
	font-size: 11px;
	color: #64748b;
}
.ndx-grand-total-amount {
	font-size: 19px;
	font-weight: 900;
	color: #4f46e5;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.ndx-grand-total-amount .ndx-curr {
	font-size: 14px;
	font-weight: 700;
}

/* Hero Outstanding Due Callout Banner */
.ndx-hero-due-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1.5px solid #fca5a5;
	background: #fef2f2;
	margin-top: 6px;
	transition: all 0.2s ease;
}
.ndx-hero-due-title {
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #991b1b;
	display: block;
}
.ndx-hero-due-figure {
	display: flex;
	align-items: baseline;
	gap: 2px;
	line-height: 1.1;
	margin-top: 2px;
}
.ndx-hero-curr {
	font-size: 15px;
	font-weight: 700;
	color: #991b1b;
}
.ndx-hero-due-figure strong {
	font-size: 22px;
	font-weight: 900;
	color: #dc2626;
	font-variant-numeric: tabular-nums;
}
.ndx-hero-due-tag {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fee2e2;
	color: #b91c1c;
	white-space: nowrap;
}

/* Hero Due Variations */
.ndx-hero-due-card.is-paid {
	background: #f0fdf4;
	border-color: #86efac;
}
.ndx-hero-due-card.is-paid .ndx-hero-due-title,
.ndx-hero-due-card.is-paid .ndx-hero-curr { color: #166534; }
.ndx-hero-due-card.is-paid .ndx-hero-due-figure strong { color: #16a34a; }
.ndx-hero-due-card.is-paid .ndx-hero-due-tag {
	background: #dcfce7;
	color: #15803d;
}

.ndx-hero-due-card.is-partial {
	background: #fffbeb;
	border-color: #fde047;
}
.ndx-hero-due-card.is-partial .ndx-hero-due-title,
.ndx-hero-due-card.is-partial .ndx-hero-curr { color: #854d0e; }
.ndx-hero-due-card.is-partial .ndx-hero-due-figure strong { color: #ca8a04; }
.ndx-hero-due-card.is-partial .ndx-hero-due-tag {
	background: #fef3c7;
	color: #b45309;
}

.ndx-hero-due-card.is-unpaid {
	background: #fef2f2;
	border-color: #fca5a5;
}
.ndx-hero-due-card.is-unpaid .ndx-hero-due-title,
.ndx-hero-due-card.is-unpaid .ndx-hero-curr { color: #991b1b; }
.ndx-hero-due-card.is-unpaid .ndx-hero-due-figure strong { color: #dc2626; }
.ndx-hero-due-card.is-unpaid .ndx-hero-due-tag {
	background: #fee2e2;
	color: #b91c1c;
}

/* Submit & Cancel Actions */
.ndx-inv-sidebar-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.ndx-btn-block {
	width: 100% !important;
	justify-content: center;
	text-align: center;
}
.ndx-inv-submit-btn {
	background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	padding: 12px 18px !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer;
	transition: all 0.15s ease !important;
}
.ndx-inv-submit-btn:hover {
	background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45) !important;
}
.ndx-inv-submit-btn:active {
	transform: translateY(0);
}
.ndx-inv-cancel-btn {
	color: #64748b !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
}
.ndx-inv-cancel-btn:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

/* ==========================================================================
   Agent Creation Modal Popup
   ========================================================================== */
.ndx-agent-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.ndx-agent-modal[hidden] {
	display: none !important;
}
.ndx-agent-modal .ndx-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(4px);
	z-index: 1;
}
.ndx-agent-modal .ndx-modal-dialog {
	position: relative;
	z-index: 2;
	width: min(540px, 100%);
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3);
	border: 1px solid #e2e8f0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: ndxModalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ndxModalPop {
	from { opacity: 0; transform: scale(0.95) translateY(10px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
.ndx-agent-modal .ndx-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 18px 22px;
	background: linear-gradient(135deg, #f8fafc 0%, #edf2f9 100%);
	border-bottom: 1px solid #e2e8f0;
}
.ndx-agent-modal .ndx-modal-title {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ndx-agent-modal .ndx-modal-icon {
	font-size: 26px;
	line-height: 1;
}
.ndx-agent-modal .ndx-modal-title h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
}
.ndx-agent-modal .ndx-modal-title p {
	margin: 2px 0 0;
	font-size: 12px;
	color: #64748b;
}
.ndx-agent-modal .ndx-modal-close {
	background: transparent;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 6px;
	transition: color 0.15s ease;
}
.ndx-agent-modal .ndx-modal-close:hover {
	color: #0f172a;
	background: #e2e8f0;
}
.ndx-agent-modal .ndx-modal-body {
	padding: 22px;
	overflow-y: auto;
	max-height: calc(85vh - 140px);
}
.ndx-agent-modal .ndx-modal-alert {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 16px;
}
.ndx-agent-modal .ndx-modal-alert.is-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
}
.ndx-agent-modal .ndx-modal-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.ndx-agent-modal .ndx-modal-grid .ndx-field-wide {
	grid-column: 1 / -1;
}
.ndx-agent-modal .ndx-modal-grid .ndx-field {
	display: grid;
	gap: 6px;
}
.ndx-agent-modal .ndx-modal-grid label {
	font-size: 12.5px;
	font-weight: 700;
	color: #334155;
	margin: 0;
}
.ndx-agent-modal .ndx-modal-grid input {
	width: 100%;
	padding: 8px 12px;
	font-size: 13.5px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	transition: border-color 0.15s ease;
}
.ndx-agent-modal .ndx-modal-grid input:focus {
	border-color: #6366f1;
	outline: none;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.ndx-agent-modal .ndx-modal-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
}
.ndx-agent-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: ndxSpin 0.7s linear infinite;
	vertical-align: middle;
	margin-right: 6px;
}
@keyframes ndxSpin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Responsive Adaptations for Invoice Layout across All Devices
   ========================================================================== */
@media (max-width: 991px) {
	.ndx-invoice-split-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ndx-invoice-sticky-amounts-card {
		position: static !important;
		top: auto;
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 767px) {
	.ndx-invoice-main-header {
		padding: 16px;
	}
	.ndx-invoice-main-title {
		font-size: 19px;
	}
	.ndx-invoice-section {
		padding: 16px;
		border-radius: 14px;
	}
	.ndx-form-grid-2col {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}
	.ndx-section-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 14px;
		padding-bottom: 10px;
	}
	.ndx-item-count-badge {
		align-self: flex-start;
	}
	
	/* Service Items Transform from Table to Responsive Mobile Cards */
	.ndx-service-table-head {
		display: none !important;
	}
	.ndx-service-row {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		padding: 16px !important;
		background: #f8fafc !important;
		border: 1.5px solid #e2e8f0 !important;
		border-radius: 14px !important;
		position: relative !important;
	}
	.ndx-mobile-label {
		display: block !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.05em !important;
		color: #64748b !important;
		margin-bottom: 4px !important;
	}
	.ndx-service-col {
		width: 100% !important;
	}
	.ndx-service-col input {
		height: 44px !important;
		font-size: 15px !important;
	}
	.ndx-service-col.ndx-col-total {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding-top: 10px !important;
		border-top: 1px dashed #cbd5e1 !important;
	}
	.ndx-service-col.ndx-col-total .ndx-mobile-label {
		margin-bottom: 0 !important;
	}
	.ndx-service-line-total strong {
		font-size: 17px !important;
		color: #4f46e5 !important;
	}
	.ndx-service-col.ndx-col-action {
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		width: auto !important;
	}
	.ndx-btn-icon-danger {
		width: 38px !important;
		height: 38px !important;
	}
	.ndx-service-add-btn {
		padding: 14px 18px !important;
		font-size: 14px !important;
	}

	/* Agent Header Wrap on Mobile */
	.ndx-agent-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.ndx-create-agent-btn {
		width: 100%;
		justify-content: center;
		padding: 8px 14px;
	}

	/* Sticky Amounts Card Mobile Refinement */
	.ndx-invoice-sticky-amounts-card {
		padding: 18px 16px;
		border-radius: 16px;
	}
	.ndx-inv-sidebar-card-top {
		padding: 14px;
	}
	.ndx-inv-sidebar-number-row {
		flex-direction: column;
		gap: 4px;
	}
	.ndx-inv-number-display strong {
		font-size: 19px;
	}
	.ndx-inv-sidebar-date-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.ndx-inv-sidebar-date-wrap input {
		width: 100%;
		height: 42px;
	}
	.ndx-currency-input-wrap {
		width: 130px;
	}
	.ndx-currency-input-wrap input {
		height: 40px !important;
		font-size: 14px !important;
	}
	.ndx-hero-due-card {
		padding: 14px;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.ndx-hero-due-tag-wrap {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}
	.ndx-inv-submit-btn {
		height: 48px !important;
		font-size: 15px !important;
	}

	/* Agent Modal Mobile Centering & Responsiveness */
	.ndx-agent-modal {
		padding: 12px;
	}
	.ndx-agent-modal .ndx-modal-dialog {
		width: 100% !important;
		max-height: 92vh !important;
		border-radius: 14px !important;
	}
	.ndx-agent-modal .ndx-modal-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.ndx-agent-modal .ndx-modal-body {
		padding: 16px !important;
	}
	.ndx-agent-modal .ndx-modal-header {
		padding: 14px 16px !important;
	}
	.ndx-agent-modal .ndx-modal-footer {
		padding: 12px 16px !important;
		flex-direction: column-reverse !important;
		gap: 8px !important;
	}
	.ndx-agent-modal .ndx-modal-footer .ndx-btn {
		width: 100% !important;
		justify-content: center !important;
		height: 44px !important;
	}
}

@media (max-width: 480px) {
	.ndx-inv-receipt-line.is-input-line {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.ndx-currency-input-wrap {
		width: 100%;
	}
	.ndx-agent-chips-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Employee dashboard hero + due list */
.ndx-emp-hero { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; padding: 24px 26px; margin-bottom: 18px; border-radius: 18px; border: 1px solid #ded8fb; background: linear-gradient(115deg, #6d5ae6 0%, #8b6ef0 45%, #b4a4fb 100%); color: #fff; box-shadow: 0 14px 34px rgba(109,90,230,.22); }
.ndx-emp-hero-main { display: flex; align-items: center; gap: 18px; min-width: 260px; }
.ndx-emp-hero-avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55); color: #fff; font-weight: 700; font-size: 22px; letter-spacing: .5px; flex: 0 0 auto; }
.ndx-emp-hero .ndx-eyebrow { color: rgba(255,255,255,.78); letter-spacing: .12em; font-size: 10px; }
.ndx-emp-hero h1 { margin: 6px 0 2px; font-size: 25px; line-height: 1.2; color: #fff; }
.ndx-emp-hero p { margin: 0; font-size: 13px; color: rgba(255,255,255,.85); }
.ndx-emp-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ndx-emp-hero-chips span { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); font-size: 11px; font-weight: 600; }
.ndx-emp-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 12px; }
.ndx-emp-hero-stats > div { padding: 13px 15px; border-radius: 13px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); }
.ndx-emp-hero-stats span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); }
.ndx-emp-hero-stats strong { display: block; margin-top: 6px; font-size: 19px; color: #fff; }
.ndx-emp-client-panel { margin-top: 18px; }
.ndx-emp-due-list { display: grid; gap: 12px; }
.ndx-emp-due-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(90px, 2fr) auto; align-items: center; gap: 14px; padding: 11px 13px; border: 1px solid var(--ndx-border); border-radius: 12px; background: linear-gradient(145deg, #fff, #fafaff); }
.ndx-emp-due-name { font-weight: 600; font-size: 13px; color: #1f2138; display: block; }
.ndx-emp-due-name small { display: block; font-weight: 500; font-size: 11px; color: var(--ndx-muted); margin-top: 2px; }
.ndx-emp-due-bar { display: block; height: 8px; border-radius: 999px; background: #eeecfb; overflow: hidden; }
.ndx-emp-due-bar em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6d5ae6, #9d8bf5); }
.ndx-emp-due-row strong { font-size: 13px; color: var(--ndx-primary); white-space: nowrap; }
@media (max-width: 860px) and (min-width: 783px) {
	.ndx-emp-hero { padding: 20px; }
	.ndx-emp-hero-stats { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
	.ndx-emp-due-row { grid-template-columns: 1fr auto; }
	.ndx-emp-due-bar { grid-column: 1 / -1; }
}

/* ---- Finance chart (Profit & Loss / Dashboard) ---- */
.ndx-fin-chart-wrap{width:100%;padding:6px 4px 0}
.ndx-fin-chart{width:100%;height:240px;display:block;overflow:visible}
.ndx-fin-grid{stroke:rgba(125,135,160,.22);stroke-width:1}
.ndx-fin-bar-in{fill:#22a06b}
.ndx-fin-bar-out{fill:#e2564d}
.ndx-fin-line{fill:none;stroke:#3b6df5;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ndx-fin-label{font-size:15px;fill:currentColor;opacity:.65}
.ndx-dot-in{background:#22a06b}
.ndx-dot-out{background:#e2564d}
.ndx-dot-profit{background:#3b6df5}
.ndx-span-2{grid-column:span 2}
@media(max-width:1100px){.ndx-span-2{grid-column:auto}}
.ndx-pos{color:#22a06b}
.ndx-neg{color:#e2564d}
.ndx-help-text{margin:0 0 14px;font-size:13px;opacity:.75}
.ndx-summary-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
@media(max-width:760px){.ndx-summary-3{grid-template-columns:1fr}}

/* Cost invoices section on daily cost form */
.ndx-cost-invoices-section {
	margin: 24px 0;
	padding: 18px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
}
.ndx-cost-invoices-section h3 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	color: #1f2733;
}
.ndx-cost-invoices-table {
	overflow-x: auto;
}
.ndx-cost-invoices-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.ndx-cost-invoices-table th,
.ndx-cost-invoices-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #e2e8f0;
}
.ndx-cost-invoices-table th {
	background: #f1f5f9;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
}
.ndx-cost-invoices-table tr:hover {
	background: #f8fafc;
}
.ndx-cost-invoices-table a {
	color: var(--ndx-primary);
	text-decoration: none;
	font-weight: 500;
}
.ndx-cost-invoices-table a:hover {
	text-decoration: underline;
}
.ndx-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ndx-status-paid {
	background: #e6f6ee;
	color: #12855b;
}
.ndx-status-partial {
	background: #fff4e0;
	color: #b26a00;
}
.ndx-status-unpaid {
	background: #fdeaea;
	color: #c02626;
}
.ndx-no-invoices {
	padding: 20px;
	text-align: center;
	color: #6b7280;
	font-style: italic;
	background: #f8fafc;
	border-radius: 8px;
	margin: 10px 0;
}

/* ============================================================
   Gyan Alo IT — Admin Dashboard polish (v1.35.0)
   Standalone dashboard build: refined visuals + full responsive
   pass for phones, tablets, laptops and large screens.
   ============================================================ */

/* Smoother base feel */
.ndx-app { -webkit-font-smoothing: antialiased; }
.ndx-dashboard-panel,
.ndx-metric,
.ndx-btn,
.ndx-pill,
.ndx-nav-item { transition: box-shadow .18s ease, transform .18s ease, background .18s ease, border-color .18s ease; }

/* Hero */
.ndx-dashboard-hero {
	background: linear-gradient(120deg, #6d5ae6 0%, #8879ee 55%, #a48ef2 100%);
	color: #fff;
	padding: 26px 28px;
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(109,90,230,.28);
	align-items: center;
}
.ndx-dashboard-hero .ndx-eyebrow { color: rgba(255,255,255,.8); letter-spacing: .12em; font-weight: 700; font-size: 11px; }
.ndx-dashboard-hero h1 { color: #fff; }
.ndx-dashboard-hero p { color: rgba(255,255,255,.85); }
.ndx-dashboard-hero .ndx-btn-primary { background: #fff; color: var(--ndx-primary-dark); font-weight: 700; border: 0; }
.ndx-dashboard-hero .ndx-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.ndx-dashboard-hero .ndx-btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.ndx-dashboard-hero .ndx-btn-ghost:hover { background: rgba(255,255,255,.14); }

/* Metric cards — subtle lift on hover, richer shadows */
.ndx-metric { box-shadow: 0 8px 20px rgba(20,20,43,.10); }
.ndx-metric:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,20,43,.16); }

/* Panels */
.ndx-dashboard-panel { border-radius: 16px; }
.ndx-dashboard-panel:hover { transform: translateY(-1px); }
.ndx-widget-head h2 { letter-spacing: -.2px; }

/* Filter bar */
.ndx-filterbar { background: #fff; border: 1px solid var(--ndx-border); border-radius: 14px; box-shadow: 0 3px 10px rgba(20,20,43,.04); }
.ndx-preset.is-active { background: var(--ndx-primary); color: #fff; border-color: var(--ndx-primary); }

/* Top bar readability */
.ndx-topbar { backdrop-filter: saturate(1.1); }
.ndx-pill-ghost { border-radius: 999px; }

/* ------------------------------------------------------------
   Full responsive pass, layered on top of existing breakpoints
   ------------------------------------------------------------ */

/* Large tablets / small laptops */
@media (max-width: 1180px) {
	.ndx-dashboard-grid { grid-template-columns: 1fr; }
	.ndx-dashboard-reports { grid-template-columns: 1fr; text-align: left; }
	.ndx-dashboard-reports .ndx-report-periods { flex-wrap: wrap; }
}

/* Tablets */
@media (max-width: 900px) {
	.ndx-content { padding: 20px 16px 32px; }
	.ndx-dashboard-hero { flex-wrap: wrap; padding: 22px; border-radius: 16px; }
	.ndx-dashboard-hero h1 { font-size: 24px; }
	.ndx-dashboard-quick { width: 100%; }
	.ndx-dashboard-quick .ndx-btn { flex: 1 1 auto; text-align: center; }
	.ndx-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-filterbar { flex-wrap: wrap; }
	.ndx-filter-presets { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ndx-scope-tabs, .ndx-dim-tabs { flex-wrap: wrap; }
}

/* Phones */
@media (max-width: 600px) {
	.ndx-topbar { padding: 0 12px; height: 58px; }
	.ndx-topbar-right { gap: 6px; }
	.ndx-date-pill { display: none; }
	.ndx-pill-ghost { display: none; }
	.ndx-content { padding: 16px 12px 28px; }
	.ndx-dashboard-hero { padding: 18px; gap: 14px; border-radius: 14px; }
	.ndx-dashboard-hero h1 { font-size: 21px; }
	.ndx-dashboard-quick { flex-direction: column; }
	.ndx-dashboard-metrics { grid-template-columns: 1fr; gap: 12px; }
	.ndx-metric { min-height: 88px; padding: 16px; }
	.ndx-metric strong { font-size: 21px; }
	.ndx-dashboard-panel { padding: 16px; border-radius: 14px; }
	.ndx-quarter-chart { overflow-x: auto; }
	.ndx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ndx-table { min-width: 560px; }
	.ndx-dashboard-reports { padding: 14px; border-radius: 14px; }
	.ndx-invoice-report-link { width: 100%; }
	.ndx-account-menu .ndx-account-pop { right: -8px; }
}

/* Small phones */
@media (max-width: 380px) {
	.ndx-dashboard-hero h1 { font-size: 19px; }
	.ndx-metric strong { font-size: 19px; }
	.ndx-brand-top { font-size: 16px; }
}

/* ============================================================
   Dashboard rebuild — de-duplicated layout (v1.36.0)
   6-card KPI row + 2-panel leaderboard grid sizing.
   ============================================================ */
.ndx-dashboard-metrics-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1400px) { .ndx-dashboard-metrics-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ndx-dashboard-metrics-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ndx-dashboard-metrics-6 { grid-template-columns: 1fr; } }

.ndx-dashboard-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .ndx-dashboard-grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   NDX Mobile Header — Precision Responsive Rebuild v1.58.3
   Matches the compact two/three-row mobile header concept:
   row 1 = menu + company/context + notification + avatar
   row 2 = theme + controls (employee)
   row 3 = full-width search (admin)
   ============================================================ */
@media (max-width: 782px) {
	/* Remove the old flex-wrap behaviour that creates uneven empty space. */
	.ndx-app .ndx-topbar {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"left notif account"
			"theme theme theme"
			"search search search";
			gap: 8px;
		align-items: center;
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		padding: 8px 10px 10px !important;
		box-sizing: border-box;
		overflow: visible;
	}

	.ndx-app .ndx-topbar-left {
		grid-area: left;
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		width: 100% !important;
		min-width: 0;
		flex-wrap: nowrap !important;
		overflow: hidden;
	}
	.ndx-app .ndx-topbar-right {
		display: contents !important;
		width: auto !important;
		margin: 0 !important;
	}

	/* Admin has browser/search controls; hide history buttons on phones. */
	.ndx-topbar-left .ndx-round-btn { display: none !important; }

	/* Compact icon buttons — never stretch into huge blank boxes. */
	.ndx-app .ndx-topbar .ndx-icon-btn,
	.ndx-app .ndx-topbar .ndx-bell,
	.ndx-app .ndx-topbar .ndx-avatar {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		max-width: 36px !important;
		padding: 0 !important;
		flex: 0 0 36px !important;
		box-sizing: border-box;
	}
	.ndx-app .ndx-topbar .ndx-icon-btn span,
	.ndx-app .ndx-topbar .ndx-control-btn span { display: none !important; }

	/* Notification + account occupy the fixed right side of row 1. */
	.ndx-app .ndx-topbar .ndx-notif {
		grid-area: notif;
		position: relative;
		width: 36px;
		height: 36px;
		min-width: 36px;
	}
	.ndx-app .ndx-topbar .ndx-account-menu {
		grid-area: account;
		position: relative;
		width: 36px;
		height: 36px;
		min-width: 36px;
	}
	.ndx-app .ndx-topbar .ndx-bell em {
		top: -4px !important;
		right: -5px !important;
		padding: 2px 5px !important;
		font-size: 9px !important;
	}

	/* Employee/company context pill stays beside the menu. */
	.ndx-app .ndx-topbar-left .ndx-pill {
		min-width: 0;
		max-width: min(62vw, 240px);
		padding: 7px 10px !important;
		font-size: 12px;
		line-height: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 0 1 auto;
	}
	.ndx-app .ndx-topbar-left .ndx-pill svg { flex: 0 0 auto; }

	/* Admin's company / super-admin pills are moved out of the first row.
	   Company is shown only when it is not already the left-side context pill. */
	.ndx-app .ndx-topbar-right > .ndx-pill {
		grid-area: company;
		max-width: 46vw;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Theme gets its own clean second row, like the reference design. */
	.ndx-app .ndx-topbar > .ndx-topbar-right > #ndx-theme,
	.ndx-app .ndx-topbar-right > #ndx-theme {
		grid-area: theme;
		width: 100% !important;
		max-width: none !important;
		height: 40px !important;
		min-height: 40px !important;
		justify-content: center;
		border: 1px solid var(--ndx-border);
		border-radius: 10px;
		background: #fff;
	}

	/* Admin search becomes a single, balanced full-width row. */
	.ndx-app .ndx-global-search {
		grid-area: search;
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		box-sizing: border-box;
	}
	.ndx-app .ndx-global-search input[type="search"] {
		flex: 1 1 auto;
		width: 1% !important;
		min-width: 0 !important;
		height: 40px !important;
		box-sizing: border-box;
		font-size: 12px !important;
	}
	.ndx-app .ndx-global-search button {
		flex: 0 0 auto;
		height: 36px !important;
		margin-left: -58px;
		position: relative;
		z-index: 2;
		padding: 0 13px !important;
		border-radius: 9px !important;
	}
	/* Leave room for the Search button inside the input. */
	.ndx-app .ndx-global-search input[type="search"] { padding-right: 78px !important; }

	/* Popovers must stay inside the viewport. */
	.ndx-app .ndx-notif-pop {
		position: fixed !important;
		top: 54px !important;
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		max-width: none !important;
		max-height: min(68vh, 460px) !important;
		z-index: 99999 !important;
	}
	.ndx-app .ndx-account-pop {
		position: fixed !important;
		top: 54px !important;
		right: 10px !important;
		left: auto !important;
		width: min(290px, calc(100vw - 20px)) !important;
		max-width: calc(100vw - 20px) !important;
		z-index: 100000 !important;
	}
}

/* Employee header: exactly two compact rows because employee header has
   no global search. Company context remains in row 1. */
@media (max-width: 782px) {
	.ndx-emp-shell .ndx-topbar {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"left notif account"
			"theme theme theme";
			gap: 8px;
		padding-bottom: 8px !important;
	}
	.ndx-emp-shell .ndx-topbar .ndx-global-search { display: none !important; }
	.ndx-emp-shell .ndx-topbar-left .ndx-pill {
		max-width: min(65vw, 260px);
	}
}

/* Admin: hide duplicate/right-side company context on narrow screens when
   the left context pill is already present, keeping the first row clean. */
@media (max-width: 540px) {
	.ndx-app:not(.ndx-emp-shell) .ndx-topbar-right > .ndx-pill {
		display: none !important;
	}
	.ndx-app .ndx-topbar {
		grid-template-columns: minmax(0, 1fr) 36px 36px;
		gap: 7px;
	}
	.ndx-app .ndx-topbar-left .ndx-icon-btn {
		width: 36px !important;
		min-width: 36px !important;
	}
	.ndx-app .ndx-topbar-left .ndx-pill {
		max-width: calc(100vw - 135px);
	}
}

@media (max-width: 380px) {
	.ndx-app .ndx-topbar { padding-left: 7px !important; padding-right: 7px !important; }
	.ndx-app .ndx-topbar .ndx-icon-btn,
	.ndx-app .ndx-topbar .ndx-bell,
	.ndx-app .ndx-topbar .ndx-avatar,
	.ndx-app .ndx-topbar .ndx-notif,
	.ndx-app .ndx-topbar .ndx-account-menu {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		flex-basis: 34px !important;
	}
	.ndx-app .ndx-topbar .ndx-global-search input[type="search"] {
		height: 38px !important;
		font-size: 11px !important;
	}
	.ndx-app .ndx-global-search button { padding: 0 11px !important; }
}

/* ============================================================
   NDX Mobile Header — Theme Button Beside Notification v1.58.4
   Mobile row 1: Menu + Company | Theme + Notification + Avatar
   Mobile row 2: Search (Admin only)
   ============================================================ */
@media (max-width: 782px) {
    .ndx-app .ndx-topbar {
        grid-template-columns: minmax(0, 1fr) 36px 36px 36px !important;
        grid-template-areas:
            "left theme notif account"
            "search search search search" !important;
        gap: 7px !important;
        align-items: center !important;
    }

    .ndx-app .ndx-topbar > .ndx-topbar-right > #ndx-theme,
    .ndx-app .ndx-topbar-right > #ndx-theme {
        grid-area: theme !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        flex: 0 0 36px !important;
        justify-content: center !important;
    }

    .ndx-app .ndx-topbar .ndx-notif {
        grid-area: notif !important;
    }

    .ndx-app .ndx-topbar .ndx-account-menu {
        grid-area: account !important;
    }

    .ndx-app .ndx-global-search {
        grid-area: search !important;
    }

    /* The company/super-admin pills should not consume the right-side icon row. */
    .ndx-app .ndx-topbar-right > .ndx-pill {
        display: none !important;
    }
}

@media (max-width: 540px) {
    .ndx-app .ndx-topbar {
        grid-template-columns: minmax(0, 1fr) 34px 34px 34px !important;
        gap: 6px !important;
    }
    .ndx-app .ndx-topbar .ndx-icon-btn,
    .ndx-app .ndx-topbar .ndx-bell,
    .ndx-app .ndx-topbar .ndx-avatar,
    .ndx-app .ndx-topbar .ndx-notif,
    .ndx-app .ndx-topbar .ndx-account-menu,
    .ndx-app .ndx-topbar-right > #ndx-theme {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        min-height: 34px !important;
        flex-basis: 34px !important;
    }
    .ndx-app .ndx-topbar-left .ndx-pill {
        max-width: calc(100vw - 135px) !important;
    }
}

@media (max-width: 380px) {
    .ndx-app .ndx-topbar {
        grid-template-columns: minmax(0, 1fr) 32px 32px 32px !important;
        gap: 5px !important;
    }
    .ndx-app .ndx-topbar .ndx-icon-btn,
    .ndx-app .ndx-topbar .ndx-bell,
    .ndx-app .ndx-topbar .ndx-avatar,
    .ndx-app .ndx-topbar .ndx-notif,
    .ndx-app .ndx-topbar .ndx-account-menu,
    .ndx-app .ndx-topbar-right > #ndx-theme {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        min-height: 32px !important;
        flex-basis: 32px !important;
    }
    .ndx-app .ndx-topbar-left .ndx-pill {
        max-width: calc(100vw - 121px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Employee portal follows the exact same compact icon alignment. */
@media (max-width: 782px) {
    .ndx-emp-shell .ndx-topbar {
        grid-template-columns: minmax(0, 1fr) 36px 36px 36px !important;
        grid-template-areas: "left theme notif account" !important;
        gap: 7px !important;
    }
    .ndx-emp-shell .ndx-topbar .ndx-global-search { display: none !important; }
}
@media (max-width: 540px) {
    .ndx-emp-shell .ndx-topbar {
        grid-template-columns: minmax(0, 1fr) 34px 34px 34px !important;
    }
}
@media (max-width: 380px) {
    .ndx-emp-shell .ndx-topbar {
        grid-template-columns: minmax(0, 1fr) 32px 32px 32px !important;
    }
}


/* ============================================================
   Employee Hero — true all-device mobile responsive layout
   v1.58.5
   ============================================================ */
@media (max-width: 782px) {
    .ndx-emp-hero {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
        padding: 20px 14px 16px;
        margin-bottom: 14px;
        border-radius: 16px;
        overflow: hidden;
    }

    .ndx-emp-hero-main {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        text-align: center;
    }

    .ndx-emp-hero-avatar {
        width: 68px;
        height: 68px;
        flex: 0 0 68px;
        border-width: 2px;
        margin: 0;
    }

    .ndx-emp-hero-main > div:last-child {
        width: 100%;
        min-width: 0;
    }

    .ndx-emp-hero .ndx-eyebrow {
        display: block;
        font-size: 10px;
        line-height: 1.35;
        letter-spacing: .06em;
        white-space: normal;
    }

    .ndx-emp-hero h1 {
        margin: 7px auto 3px;
        max-width: 100%;
        font-size: clamp(21px, 6vw, 28px);
        line-height: 1.16;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .ndx-emp-hero p {
        font-size: 12px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .ndx-emp-hero-chips {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 11px;
    }

    .ndx-emp-hero-chips span {
        max-width: 100%;
        box-sizing: border-box;
        padding: 5px 9px;
        font-size: 10px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    /* Three financial figures must always fit inside the card. */
    .ndx-emp-hero-stats {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .ndx-emp-hero-stats > div {
        min-width: 0;
        width: auto;
        box-sizing: border-box;
        padding: 11px 8px 12px;
        border-radius: 12px;
        overflow: hidden;
    }

    .ndx-emp-hero-stats span {
        font-size: 8.5px;
        line-height: 1.25;
        letter-spacing: .04em;
        overflow-wrap: anywhere;
    }

    .ndx-emp-hero-stats strong {
        margin-top: 5px;
        font-size: clamp(16px, 4.5vw, 19px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 540px) {
    .ndx-emp-hero {
        gap: 14px;
        padding: 18px 12px 13px;
        border-radius: 15px;
    }

    .ndx-emp-hero-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .ndx-emp-hero h1 {
        font-size: clamp(20px, 6.1vw, 26px);
        line-height: 1.14;
    }

    .ndx-emp-hero-chips {
        gap: 5px;
        margin-top: 9px;
    }

    .ndx-emp-hero-chips span {
        padding: 5px 8px;
        font-size: 9.5px;
    }

    .ndx-emp-hero-stats {
        gap: 7px;
    }

    .ndx-emp-hero-stats > div {
        padding: 10px 6px 11px;
        border-radius: 11px;
    }

    .ndx-emp-hero-stats span {
        font-size: 8px;
    }

    .ndx-emp-hero-stats strong {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .ndx-emp-hero {
        gap: 12px;
        padding: 16px 9px 11px;
        border-radius: 13px;
    }

    .ndx-emp-hero-avatar {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .ndx-emp-hero h1 {
        font-size: 20px;
    }

    .ndx-emp-hero p {
        font-size: 11px;
    }

    .ndx-emp-hero-chips span {
        padding: 4px 7px;
        font-size: 9px;
    }

    .ndx-emp-hero-stats {
        gap: 5px;
    }

    .ndx-emp-hero-stats > div {
        padding: 9px 4px 10px;
        border-radius: 10px;
    }

    .ndx-emp-hero-stats span {
        font-size: 7.5px;
    }

    .ndx-emp-hero-stats strong {
        font-size: 15px;
    }
}

@media (max-width: 330px) {
    .ndx-emp-hero-stats span {
        font-size: 7px;
        letter-spacing: 0;
    }
    .ndx-emp-hero-stats strong {
        font-size: 14px;
    }
}

/* ============================================================
   NDX CRM Suite — Final Design + All-Device Responsive Hardening
   v1.58.7
   - Single visual system for Admin / Employee / Superadmin / Invoice
   - No horizontal page overflow
   - Stable mobile header at 320–782px
   - Responsive cards, forms, tables, popovers and hero sections
   - Consistent focus/hover states and readable contrast
   ============================================================ */
:root {
	--ndx-ui-primary: #6d5ae6;
	--ndx-ui-primary-dark: #5b48d6;
	--ndx-ui-bg: #f6f7fb;
	--ndx-ui-surface: #ffffff;
	--ndx-ui-text: #1f2434;
	--ndx-ui-muted: #667085;
	--ndx-ui-border: #e4e7ec;
	--ndx-ui-success: #12855b;
	--ndx-ui-danger: #b42318;
	--ndx-ui-warning: #b26a00;
}

.ndx-app,
.ndx-app * { box-sizing: border-box; }
.ndx-app { width: 100%; max-width: 100%; overflow-x: clip; }
.ndx-main, .ndx-content, .ndx-panel, .ndx-card, .ndx-dashboard-panel,
.ndx-form, .ndx-form-grid, .ndx-field, .ndx-table-wrap, .ndx-employee-section { min-width: 0; }
.ndx-content { width: 100%; max-width: 100%; }
.ndx-app input, .ndx-app select, .ndx-app textarea, .ndx-app button { font: inherit; }
.ndx-app input, .ndx-app select, .ndx-app textarea { max-width: 100%; }
.ndx-app img, .ndx-app svg, .ndx-app canvas { max-width: 100%; }
.ndx-app a, .ndx-app button, .ndx-app input, .ndx-app select, .ndx-app textarea { -webkit-tap-highlight-color: transparent; }
.ndx-app :focus-visible { outline: 2px solid var(--ndx-ui-primary); outline-offset: 2px; }

/* Consistent surfaces where older sections used slightly different whites. */
.ndx-app .ndx-panel,
.ndx-app .ndx-card,
.ndx-app .ndx-dashboard-panel,
.ndx-app .ndx-filterbar,
.ndx-app .ndx-filter-bar,
.ndx-app .ndx-table-wrap { border-color: var(--ndx-ui-border); }
.ndx-app .ndx-field input,
.ndx-app .ndx-field select,
.ndx-app .ndx-field textarea,
.ndx-app .ndx-filter-field input,
.ndx-app .ndx-filter-field select { border-color: var(--ndx-ui-border); }
.ndx-app .ndx-field input:focus,
.ndx-app .ndx-field select:focus,
.ndx-app .ndx-field textarea:focus,
.ndx-app .ndx-filter-field input:focus,
.ndx-app .ndx-filter-field select:focus {
	border-color: rgba(109,90,230,.55);
	box-shadow: 0 0 0 3px rgba(109,90,230,.10);
	outline: none;
}
.ndx-app .ndx-btn { min-height: 36px; }

/* Tables: never let a wide data set stretch the page. */
.ndx-table-wrap,
.ndx-table-scroll,
.ndx-employee-section,
.ndx-employee-table,
.ndx-cost-invoices-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ndx-table { max-width: 100%; }

/* Dashboard / finance / report grids scale smoothly. */
.ndx-dashboard-metrics-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.ndx-dashboard-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ---------- Mobile header: one compact row + search row ---------- */
@media (max-width: 782px) {
	body.ndx-standalone,
	html { max-width: 100%; overflow-x: hidden; }
	.ndx-app { min-height: 100dvh; overflow-x: clip; }
	.ndx-main { width: 100%; max-width: 100%; }
	.ndx-app .ndx-topbar {
		display: grid !important;
		grid-template-columns: minmax(0,1fr) 36px 36px 36px 36px !important;
		grid-template-areas: "left lang theme notif account" "search search search search search" !important;
		gap: 7px !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 8px 10px 9px !important;
		align-items: center !important;
		justify-content: initial !important;
		overflow: visible !important;
	}
	.ndx-app .ndx-topbar-left {
		grid-area: left !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 7px !important;
		width: 100% !important;
		min-width: 0 !important;
		flex-wrap: nowrap !important;
		overflow: hidden !important;
	}
	.ndx-app .ndx-topbar-right { display: contents !important; margin: 0 !important; width: auto !important; }
	.ndx-app .ndx-topbar-left .ndx-round-btn { display: none !important; }
	.ndx-app .ndx-topbar .ndx-icon-btn,
	.ndx-app .ndx-topbar .ndx-bell,
	.ndx-app .ndx-topbar .ndx-avatar,
	.ndx-app .ndx-topbar .ndx-notif,
	.ndx-app .ndx-topbar .ndx-account-menu,
	.ndx-app .ndx-topbar .ndx-lang-switcher,
	.ndx-app .ndx-topbar .ndx-lang-btn,
	.ndx-app .ndx-topbar-right > #ndx-theme {
		width: 36px !important; height: 36px !important; min-width: 36px !important;
		max-width: 36px !important; min-height: 36px !important; flex: 0 0 36px !important;
		box-sizing: border-box !important;
	}
	.ndx-app .ndx-topbar-right > #ndx-theme {
		grid-area: theme !important; display: inline-flex !important; padding: 0 !important;
		border: 1px solid var(--ndx-ui-border) !important; border-radius: 50% !important;
		background: var(--ndx-ui-surface) !important; justify-content: center !important;
	}
	.ndx-app .ndx-topbar .ndx-lang-switcher {
		grid-area: lang !important; position: relative !important; display: inline-flex !important;
	}
	.ndx-app .ndx-topbar .ndx-lang-btn {
		padding: 0 !important; border-radius: 50% !important; justify-content: center !important;
		border: 1px solid var(--ndx-ui-border) !important; background: var(--ndx-ui-surface) !important;
	}
	.ndx-app .ndx-topbar .ndx-lang-chevron,
	.ndx-app .ndx-topbar .ndx-lang-globe { display: none !important; }
	.ndx-app .ndx-topbar .ndx-lang-active-text { font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; }
	.ndx-app .ndx-topbar .ndx-lang-dropdown { position: fixed !important; top: 58px !important; right: 10px !important; left: auto !important; min-width: 170px !important; z-index: 100000 !important; }
	.ndx-app .ndx-topbar .ndx-notif { grid-area: notif !important; position: relative !important; }
	.ndx-app .ndx-topbar .ndx-account-menu { grid-area: account !important; position: relative !important; }
	.ndx-app .ndx-topbar .ndx-bell em { top: -4px !important; right: -5px !important; font-size: 9px !important; padding: 2px 5px !important; }
	.ndx-app .ndx-topbar-left .ndx-pill {
		min-width: 0 !important; max-width: calc(100vw - 150px) !important; flex: 0 1 auto !important;
		padding: 7px 10px !important; font-size: 12px !important; line-height: 20px !important;
		white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
	}
	.ndx-app .ndx-topbar-left .ndx-pill svg { flex: 0 0 auto; }
	.ndx-app .ndx-topbar-right > .ndx-pill { display: none !important; }
	.ndx-app .ndx-global-search {
		grid-area: search !important; display: flex !important; width: 100% !important; min-width: 0 !important;
		max-width: 100% !important; margin: 0 !important; padding: 3px 6px 3px 10px !important;
		box-sizing: border-box !important; overflow: hidden !important;
	}
	.ndx-app .ndx-global-search input[type="search"] {
		width: 1% !important; min-width: 0 !important; flex: 1 1 auto !important;
		height: 38px !important; padding: 0 74px 0 0 !important; font-size: 12px !important;
	}
	.ndx-app .ndx-global-search button {
		flex: 0 0 auto !important; height: 34px !important; margin-left: -60px !important;
		padding: 0 12px !important; position: relative !important; z-index: 2 !important;
	}
	.ndx-app .ndx-notif-pop {
		position: fixed !important; top: 58px !important; left: 8px !important; right: 8px !important;
		width: auto !important; max-width: none !important; max-height: min(70dvh,460px) !important; z-index: 99999 !important;
	}
	.ndx-app .ndx-account-pop {
		position: fixed !important; top: 58px !important; right: 8px !important; left: auto !important;
		width: min(290px,calc(100vw - 16px)) !important; max-width: calc(100vw - 16px) !important; z-index: 100000 !important;
	}

	/* Employee portal has no search: all controls stay on one compact row. */
	.ndx-emp-shell .ndx-topbar { grid-template-areas: "left lang theme notif account" !important; }
	.ndx-emp-shell .ndx-global-search { display: none !important; }
	.ndx-emp-shell .ndx-topbar-left .ndx-pill { max-width: calc(100vw - 150px) !important; }

	/* All primary grids become single-column unless two small KPI cards are useful. */
	.ndx-dashboard-grid,
	.ndx-dashboard-grid-2,
	.ndx-dashboard-overview-grid,
	.ndx-dashboard-reports,
	.ndx-finance-grid,
	.ndx-detail-grid,
	.ndx-emp-detail-grid,
	.ndx-form-grid,
	.ndx-summary,
	.ndx-summary-6,
	.ndx-kpi-row { grid-template-columns: 1fr !important; }
	.ndx-dashboard-metrics-6 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
	.ndx-dashboard-hero,
	.ndx-emp-hero { width: 100%; max-width: 100%; }
	.ndx-dashboard-hero { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 14px; }
	.ndx-dashboard-quick { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
	.ndx-dashboard-quick .ndx-btn { width: 100%; justify-content: center; }

	/* Employee hero: no clipped amount cards, no forced minimum widths. */
	.ndx-emp-hero { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 14px 14px; overflow: hidden; }
	.ndx-emp-hero-main { width: 100%; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 9px; }
	.ndx-emp-hero-main > div:last-child { width: 100%; min-width: 0; }
	.ndx-emp-hero-avatar { width: 68px; height: 68px; flex-basis: 68px; }
	.ndx-emp-hero h1 { max-width: 100%; font-size: clamp(21px,6vw,28px); line-height: 1.18; overflow-wrap: anywhere; }
	.ndx-emp-hero p { overflow-wrap: anywhere; }
	.ndx-emp-hero-chips { width: 100%; justify-content: center; gap: 6px; }
	.ndx-emp-hero-chips span { max-width: 100%; overflow-wrap: anywhere; }
	.ndx-emp-hero-stats { width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 7px; }
	.ndx-emp-hero-stats > div { min-width: 0; padding: 11px 8px; overflow: hidden; }
	.ndx-emp-hero-stats span { font-size: 9px; line-height: 1.25; }
	.ndx-emp-hero-stats strong { font-size: 17px; overflow-wrap: anywhere; }

	/* Forms and action bars */
	.ndx-filterbar, .ndx-filter-bar { display: grid !important; grid-template-columns: 1fr !important; gap: 9px; }
	.ndx-filter-field, .ndx-filter-field input, .ndx-filter-field select { width: 100% !important; min-width: 0 !important; }
	.ndx-filter-presets { width: 100%; overflow-x: auto; display: flex; flex-wrap: nowrap; gap: 6px; padding-bottom: 2px; }
	.ndx-preset { flex: 0 0 auto; white-space: nowrap; }
	.ndx-form-footer { flex-direction: column; align-items: stretch; gap: 8px; }
	.ndx-form-footer .ndx-btn { width: 100%; justify-content: center; }
	.ndx-service-row, .ndx-emp-service-row, .ndx-task-update-form { grid-template-columns: 1fr !important; display: grid !important; }
	.ndx-service-row > *, .ndx-emp-service-row > *, .ndx-task-update-form > * { width: 100% !important; min-width: 0 !important; }

	/* Horizontal data sets scroll inside their card, never on the whole page. */
	.ndx-table, .ndx-employee-table table, .ndx-detail-table { min-width: 620px; }
	.ndx-table-wrap { overflow-x: auto !important; }
	.ndx-panel, .ndx-dashboard-panel, .ndx-card { max-width: 100%; overflow: hidden; }
}

@media (max-width: 540px) {
	.ndx-app .ndx-topbar { grid-template-columns: minmax(0,1fr) 34px 34px 34px 34px !important; gap: 6px !important; padding: 7px 8px 8px !important; }
	.ndx-app .ndx-topbar .ndx-icon-btn,
	.ndx-app .ndx-topbar .ndx-bell,
	.ndx-app .ndx-topbar .ndx-avatar,
	.ndx-app .ndx-topbar .ndx-notif,
	.ndx-app .ndx-topbar .ndx-account-menu,
	.ndx-app .ndx-topbar .ndx-lang-switcher,
	.ndx-app .ndx-topbar .ndx-lang-btn,
	.ndx-app .ndx-topbar-right > #ndx-theme { width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; min-height: 34px !important; flex-basis: 34px !important; }
	.ndx-app .ndx-topbar .ndx-lang-active-text { font-size: 11px !important; }
	.ndx-app .ndx-topbar-left .ndx-pill { max-width: calc(100vw - 180px) !important; padding: 6px 8px !important; }
	.ndx-content, .ndx-emp-shell .ndx-content { padding-left: 10px !important; padding-right: 10px !important; }
	.ndx-dashboard-metrics-6 { grid-template-columns: 1fr !important; }
	.ndx-dashboard-quick { grid-template-columns: 1fr !important; }
	.ndx-dashboard-panel, .ndx-panel { padding: 13px !important; border-radius: 12px !important; }
	.ndx-emp-hero-stats { grid-template-columns: 1fr 1fr !important; }
	.ndx-emp-hero-stats > div:last-child { grid-column: 1 / -1; }
	.ndx-table, .ndx-employee-table table, .ndx-detail-table { min-width: 560px; }
	.ndx-notif-pop { left: 6px !important; right: 6px !important; }
}

@media (max-width: 380px) {
	.ndx-app .ndx-topbar { grid-template-columns: minmax(0,1fr) 32px 32px 32px 32px !important; gap: 5px !important; padding-left: 6px !important; padding-right: 6px !important; }
	.ndx-app .ndx-topbar .ndx-icon-btn,
	.ndx-app .ndx-topbar .ndx-bell,
	.ndx-app .ndx-topbar .ndx-avatar,
	.ndx-app .ndx-topbar .ndx-notif,
	.ndx-app .ndx-topbar .ndx-account-menu,
	.ndx-app .ndx-topbar .ndx-lang-switcher,
	.ndx-app .ndx-topbar .ndx-lang-btn,
	.ndx-app .ndx-topbar-right > #ndx-theme { width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; min-height: 32px !important; flex-basis: 32px !important; }
	.ndx-app .ndx-topbar .ndx-lang-active-text { font-size: 10px !important; }
	.ndx-app .ndx-topbar-left .ndx-pill { max-width: calc(100vw - 165px) !important; font-size: 11px !important; }
	.ndx-emp-hero { padding-left: 10px; padding-right: 10px; border-radius: 13px; }
	.ndx-emp-hero-stats { grid-template-columns: 1fr !important; }
	.ndx-emp-hero-stats > div:last-child { grid-column: auto; }
}

/* Tablet landscape / laptop: preserve density without cramped controls. */
@media (min-width: 783px) and (max-width: 1180px) {
	.ndx-sidebar { width: 248px; flex-basis: 248px; }
	.ndx-content { padding-left: 18px; padding-right: 18px; }
	.ndx-dashboard-metrics-6 { grid-template-columns: repeat(3,minmax(0,1fr)); }
	.ndx-dashboard-grid-2 { grid-template-columns: 1fr; }
	.ndx-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Large screens: readable max-width and balanced KPI density. */
@media (min-width: 1440px) {
	.ndx-content { padding-left: clamp(28px,3vw,48px); padding-right: clamp(28px,3vw,48px); }
	.ndx-dashboard-metrics-6 { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

/* Superadmin screens inherit the same surface, table and touch rules. */
.ndx-sa-nav { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ndx-sa-card { max-width: 100%; overflow-x: auto; }
@media (max-width: 782px) {
	.ndx-sa-nav { flex-wrap: nowrap !important; }
	.ndx-sa-nav a { flex: 0 0 auto; min-height: 38px; }
	.ndx-sa-card { padding: 13px !important; }
	.ndx-sa-inline { display: grid !important; grid-template-columns: 1fr; }
	.ndx-sa-inline > * { width: 100% !important; min-width: 0 !important; }
	.ndx-sa-card table.widefat, .ndx-sa-card table.form-table { min-width: 560px; }
}

/* Invoice screen: no page-level horizontal overflow on small devices. */
@media screen and (max-width: 640px) {
	.ndx-invoice-sheet { width: 100% !important; max-width: 100% !important; overflow: hidden; }
	.ndx-inv-items { width: 100%; min-width: 520px; }
	.ndx-inv-items-wrap, .ndx-inv-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Dark mode: normalize the most visible controls that otherwise remained white. */
.ndx-app.ndx-dark .ndx-topbar-right > #ndx-theme,
.ndx-app.ndx-dark .ndx-icon-btn,
.ndx-app.ndx-dark .ndx-global-search,
.ndx-app.ndx-dark .ndx-date-pill { background: #1b1e36 !important; color: var(--ndx-text) !important; border-color: #2c2f4a !important; }
.ndx-app.ndx-dark .ndx-pill-ghost { background: #1b1e36 !important; color: var(--ndx-text) !important; border-color: #2c2f4a !important; }
.ndx-app.ndx-dark .ndx-global-search input[type="search"] { color: var(--ndx-text) !important; }
.ndx-app.ndx-dark .ndx-global-search input[type="search"]::placeholder { color: #8e95b2 !important; }

@media (hover: none) and (pointer: coarse) {
	.ndx-app .ndx-btn, .ndx-app .ndx-nav-item, .ndx-app .ndx-subnav-item,
	.ndx-app .ndx-icon-btn, .ndx-app .ndx-bell, .ndx-app .ndx-avatar { min-height: 40px; }
	.ndx-app .ndx-topbar .ndx-icon-btn, .ndx-app .ndx-topbar .ndx-bell,
	.ndx-app .ndx-topbar .ndx-avatar, .ndx-app .ndx-topbar-right > #ndx-theme { min-height: 32px; }
}

@supports (padding: max(0px)) {
	@media (max-width: 782px) {
		.ndx-app .ndx-topbar { padding-left: max(6px,env(safe-area-inset-left)) !important; padding-right: max(6px,env(safe-area-inset-right)) !important; }
		.ndx-app .ndx-content { padding-bottom: max(22px,env(safe-area-inset-bottom)); }
	}
}


/* Daily Activity v2 */
.ndx-panel-subtitle{margin:3px 0 0;color:var(--ndx-muted);font-size:12px}.ndx-activity-live-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#e8f7ef;color:#087443;font-size:11px;font-weight:700;white-space:nowrap}.ndx-activity-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 4px}.ndx-activity-entry-table{min-width:1050px}.ndx-activity-entry-table th{white-space:nowrap}.ndx-activity-entry-table th:nth-child(1){width:38px}.ndx-activity-entry-table th:nth-child(3){width:135px}.ndx-activity-entry-table th:nth-child(4){width:105px}.ndx-activity-entry-table th:nth-child(5){width:75px}.ndx-activity-entry-table th:nth-child(6){width:125px}.ndx-activity-entry-table th:last-child{width:42px}.ndx-activity-entry-table input,.ndx-activity-entry-table select{font-size:12px}.ndx-activity-add-row{display:flex;align-items:center;gap:10px;margin-top:10px}.ndx-activity-add-row span{font-size:12px;color:var(--ndx-muted)}.ndx-activity-save-note{font-size:12px;color:var(--ndx-muted);margin-right:auto}.ndx-btn-danger{color:#b42318!important;border-color:#f1b5af!important;background:#fff5f4!important}.ndx-badge-pending{background:#fff7e6!important;color:#9a6700!important}.ndx-badge-reviewed{background:#e8f7ef!important;color:#087443!important}.ndx-badge-needs_update{background:#fff0f0!important;color:#b42318!important}
@media(max-width:900px){.ndx-activity-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ndx-activity-save-note{display:none}}
@media(max-width:520px){.ndx-activity-kpi-grid{grid-template-columns:1fr}.ndx-activity-report-head{grid-template-columns:1fr}.ndx-activity-report-head>div{border-right:0!important}.ndx-activity-report-head>div:last-child{border-bottom:0}}
.ndx-activity-admin-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}.ndx-activity-admin-summary>div{padding:14px 16px;border:1px solid var(--ndx-border);border-radius:10px;background:#fff}.ndx-activity-admin-summary span{display:block;color:var(--ndx-muted);font-size:11px;margin-bottom:5px}.ndx-activity-admin-summary strong{font-size:22px;line-height:1.1}@media(max-width:900px){.ndx-activity-admin-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.ndx-activity-admin-summary{grid-template-columns:1fr}}

/* Daily Activity progress input */
.ndx-progress-input{display:flex;align-items:center;gap:5px;min-width:78px}.ndx-progress-input input{width:62px!important;text-align:center}.ndx-progress-input span{font-weight:700;opacity:.7}

/* Daily Activity: combine work status and completion percentage in one field. */
.ndx-work-status-cell{display:flex;align-items:center;gap:8px;min-width:90px}.ndx-work-status-percentage{min-width:78px}
/* Daily Activity admin / employee polish */
.ndx-activity-review-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}.ndx-activity-review-head>div{padding:13px 15px;border:1px solid var(--ndx-border);border-radius:10px;background:#fff}.ndx-activity-review-head span{display:block;color:var(--ndx-muted);font-size:11px;margin-bottom:5px}.ndx-activity-review-head strong{display:block;font-size:14px;line-height:1.3}.ndx-activity-review-box{border-color:#d9d1ff;background:#fbfaff}.ndx-activity-review-footer{display:flex;justify-content:space-between;gap:15px;padding:12px 0;color:var(--ndx-muted);font-size:12px}.ndx-progress-pill{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:6px 9px;border-radius:999px;background:#f1efff;color:#4b3fc7}.ndx-activity-admin-table-wrap{overflow-x:auto}.ndx-activity-admin-table{min-width:1180px}.ndx-activity-admin-table th{white-space:nowrap}.ndx-activity-task-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #eee}.ndx-activity-task-list>div:last-child{border-bottom:0}.ndx-activity-task-list span{font-weight:700;white-space:nowrap}.ndx-activity-feedback{max-width:240px;white-space:normal}.ndx-progress-cell{min-width:110px}.ndx-progress-cell strong{display:block;margin-bottom:5px}.ndx-progress-bar{height:6px;border-radius:999px;background:#ececec;overflow:hidden}.ndx-progress-bar span{display:block;height:100%;background:currentColor;border-radius:inherit}.ndx-muted{color:var(--ndx-muted)}
@media(max-width:900px){.ndx-activity-review-head{grid-template-columns:repeat(2,minmax(0,1fr))}.ndx-activity-review-footer{flex-direction:column}}
@media(max-width:520px){.ndx-activity-review-head{grid-template-columns:1fr}.ndx-activity-review-footer{font-size:11px}}

/* Daily Activity dynamic employee dashboard */
.ndx-activity-employee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}.ndx-activity-employee-card{border:1px solid var(--ndx-border);border-radius:12px;background:var(--ndx-surface,#fff);padding:15px;box-shadow:0 2px 8px rgba(20,24,40,.04)}.ndx-activity-employee-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.ndx-activity-employee-card-head strong{font-size:14px}.ndx-activity-employee-card-head span{font-size:11px;color:var(--ndx-muted)}.ndx-activity-employee-progress>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.ndx-activity-employee-progress span{font-size:11px;color:var(--ndx-muted)}.ndx-activity-employee-progress strong{font-size:16px}.ndx-activity-employee-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:13px}.ndx-activity-employee-stats div{padding:8px;border:1px solid var(--ndx-border);border-radius:8px}.ndx-activity-employee-stats small{display:block;color:var(--ndx-muted);font-size:10px;margin-bottom:3px}.ndx-activity-employee-stats b{font-size:12px}@media(max-width:1100px){.ndx-activity-employee-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.ndx-activity-employee-grid{grid-template-columns:1fr}.ndx-activity-employee-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1.61.3 responsive hardening */
*,*::before,*::after{box-sizing:border-box}.ndx-app img{max-width:100%;height:auto}.ndx-app,.ndx-app .ndx-content,.ndx-app .ndx-main{max-width:100%;min-width:0}.ndx-app .ndx-content{overflow-x:hidden}.ndx-app .ndx-panel,.ndx-app .ndx-card,.ndx-app .ndx-section{max-width:100%;min-width:0}.ndx-app input,.ndx-app select,.ndx-app textarea,.ndx-app button{max-width:100%;box-sizing:border-box}.ndx-app .ndx-filterbar,.ndx-app .ndx-filter-bar{width:100%;max-width:100%;min-width:0}.ndx-app .ndx-filterbar>* ,.ndx-app .ndx-filter-bar>*{min-width:0}.ndx-app .ndx-table-wrap,.ndx-app .ndx-activity-admin-table-wrap,.ndx-app .ndx-activity-entry-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.ndx-app table{max-width:100%}.ndx-app .ndx-activity-employee-card{min-width:0;overflow:hidden}.ndx-app .ndx-activity-task-list{min-width:0}.ndx-app .ndx-activity-task-list>div{min-width:0}.ndx-app .ndx-activity-task-list>div>*{min-width:0}.ndx-app .ndx-activity-feedback{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:782px){
 .ndx-app .ndx-page-head,.ndx-app .ndx-section-head{flex-wrap:wrap;gap:10px}
 .ndx-app .ndx-page-head>* ,.ndx-app .ndx-section-head>*{min-width:0}
 .ndx-app .ndx-actions,.ndx-app .ndx-toolbar{width:100%;display:flex;flex-wrap:wrap;gap:8px}
 .ndx-app .ndx-actions>* ,.ndx-app .ndx-toolbar>*{min-width:0;max-width:100%}
 .ndx-app .ndx-form-grid{grid-template-columns:1fr!important}
 .ndx-app .ndx-activity-admin-table,.ndx-app .ndx-activity-entry-table{min-width:860px}
 .ndx-app .ndx-activity-review-box{overflow:hidden}
}
@media (max-width:540px){
 .ndx-app .ndx-btn{max-width:100%;white-space:normal}
 .ndx-app .ndx-filterbar,.ndx-app .ndx-filter-bar{grid-template-columns:1fr!important}
 .ndx-app .ndx-activity-admin-table,.ndx-app .ndx-activity-entry-table{min-width:760px}
 .ndx-app .ndx-activity-add-row{flex-wrap:wrap}
 .ndx-app .ndx-work-status-cell{min-width:0}
 .ndx-app .ndx-work-status-percentage{width:76px!important;min-width:76px}
}
@media (max-width:380px){
 .ndx-app .ndx-content{padding-left:8px!important;padding-right:8px!important}
 .ndx-app .ndx-panel,.ndx-app .ndx-card{border-radius:10px}
 .ndx-app .ndx-activity-admin-table,.ndx-app .ndx-activity-entry-table{min-width:700px}
}


/* ============================================================
   NDX Navigation Alignment Patch v1.61.4
   Keeps sidebar icons, labels and submenus on one consistent grid.
   ============================================================ */
.ndx-sidebar { box-sizing: border-box; overflow-x: hidden; }
.ndx-nav { box-sizing: border-box; }
.ndx-nav-item, .ndx-subnav-item { box-sizing: border-box; min-width: 0; }
.ndx-nav-item { width: 100%; }
.ndx-nav-ico, .ndx-subnav-ico { width: 20px; min-width: 20px; height: 20px; align-items: center; justify-content: center; }
.ndx-nav-ico svg { width: 18px; height: 18px; display: block; }
.ndx-subnav-ico svg { display: block; }
.ndx-nav-item > span:not(.ndx-nav-ico):not(.ndx-chevron), .ndx-subnav-item > span:not(.ndx-subnav-ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndx-nav-group { width: 100%; }
.ndx-nav-toggle { appearance: none; -webkit-appearance: none; font: inherit; }

@media (min-width: 1025px) {
    .ndx-app.is-collapsed .ndx-sidebar { width: 72px !important; flex: 0 0 72px !important; display: block !important; }
    .ndx-app.is-collapsed .ndx-brand-top { height: 64px; display: flex; align-items: center; justify-content: center; }
    .ndx-app.is-collapsed .ndx-brand-card { margin: 8px 6px 10px; padding: 6px 4px; border: 0; box-shadow: none; }
    .ndx-app.is-collapsed .ndx-brand-logo { width: 46px !important; height: 46px !important; max-height: 46px; object-fit: contain; margin: 0 auto; }
    .ndx-app.is-collapsed .ndx-brand-avatar { width: 42px; height: 42px; margin: 0 auto; }
    .ndx-app.is-collapsed .ndx-nav { padding: 6px 7px 18px; }
    .ndx-app.is-collapsed .ndx-nav-item { width: 58px; height: 42px; margin: 4px auto; padding: 0; justify-content: center; align-items: center; gap: 0; border-radius: 10px; }
    .ndx-app.is-collapsed .ndx-nav-item > span:not(.ndx-nav-ico) { display: none !important; }
    .ndx-app.is-collapsed .ndx-nav-ico { width: 20px; min-width: 20px; height: 20px; }
    .ndx-app.is-collapsed .ndx-nav-ico svg { width: 18px; height: 18px; }
    .ndx-app.is-collapsed .ndx-chevron, .ndx-app.is-collapsed .ndx-subnav { display: none !important; }
    .ndx-app.is-collapsed .ndx-sidebar-logout { margin: 8px auto 0; }
}

@media (max-width: 1024px) {
    .ndx-sidebar, .ndx-app.is-collapsed .ndx-sidebar { width: min(300px, 84vw) !important; flex: none !important; }
    .ndx-nav { padding: 10px 12px 24px; }
    .ndx-nav-item { min-height: 42px; }
    .ndx-subnav { padding-left: 22px; }
}

@media (max-width: 782px) {
    .ndx-app .ndx-topbar-left .ndx-pill { display: inline-flex; align-items: center; }
    .ndx-app .ndx-topbar-left .ndx-pill svg { flex: 0 0 auto; }
}

/* Collapsed sidebar hover labels */
@media (min-width: 1025px) {
    .ndx-app.is-collapsed .ndx-sidebar { overflow: visible !important; position: relative; z-index: 1000; }
    .ndx-app.is-collapsed .ndx-nav-item[data-ndx-tooltip] { position: relative; }
    .ndx-app.is-collapsed .ndx-nav-item[data-ndx-tooltip]::after {
        content: attr(data-ndx-tooltip);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        opacity: 0; visibility: hidden; pointer-events: none; white-space: nowrap;
        background: #1f2440; color: #fff; border-radius: 7px; padding: 8px 11px;
        font-size: 12px; line-height: 1.2; font-weight: 600;
        box-shadow: 0 8px 22px rgba(20,20,43,.18); z-index: 99999;
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    }
    .ndx-app.is-collapsed .ndx-nav-item[data-ndx-tooltip]::before {
        content: ""; position: absolute; left: calc(100% + 4px); top: 50%;
        transform: translateY(-50%); border: 5px solid transparent; border-right-color: #1f2440;
        opacity: 0; visibility: hidden; pointer-events: none; z-index: 99999;
    }
    .ndx-app.is-collapsed .ndx-nav-item[data-ndx-tooltip]:hover::after,
    .ndx-app.is-collapsed .ndx-nav-item[data-ndx-tooltip]:focus-visible::after {
        opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
    }
    .ndx-app.is-collapsed .ndx-nav-item[data-ndx-tooltip]:hover::before,
    .ndx-app.is-collapsed .ndx-nav-item[data-ndx-tooltip]:focus-visible::before {
        opacity: 1; visibility: visible;
    }
}

/* Notification layer fix: keep the header/popovers above all dashboard content. */
.ndx-app .ndx-topbar {
	position: relative !important;
	z-index: 200000 !important;
	overflow: visible !important;
}
.ndx-app .ndx-topbar .ndx-notif {
	position: relative !important;
	z-index: 200001 !important;
}
.ndx-app .ndx-topbar .ndx-notif-pop {
	z-index: 200002 !important;
}
.ndx-app .ndx-topbar .ndx-account-menu {
	z-index: 200001 !important;
}
.ndx-app .ndx-topbar .ndx-account-pop {
	z-index: 200002 !important;
}

/* ============================================================
   NDX Notification Popup — viewport-contained scrolling
   Notifications must scroll inside the popup instead of increasing
   or hijacking the page height when the list becomes long.
   ============================================================ */
.ndx-app .ndx-notif-pop {
	position: fixed !important;
	top: 60px !important;
	right: 24px !important;
	left: auto !important;
	width: min(360px, calc(100vw - 32px)) !important;
	max-width: calc(100vw - 32px) !important;
	height: min(520px, calc(100vh - 76px)) !important;
	max-height: min(520px, calc(100vh - 76px)) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	contain: layout paint;
	z-index: 999999 !important;
}
.ndx-app .ndx-notif-pop .ndx-notif-head {
	position: sticky !important;
	top: 0 !important;
	z-index: 2;
}
.ndx-app .ndx-notif-pop .ndx-notif-list {
	min-height: 0;
}

@media (max-width: 782px) {
	.ndx-app .ndx-notif-pop {
		top: 54px !important;
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		max-width: none !important;
		height: min(68vh, 460px) !important;
		max-height: min(68vh, 460px) !important;
	}
}

/* Notification center: compact filters, 10-row pagination and detail modal. */
.ndx-notifications-page { overflow: visible; }
.ndx-notifications-page-head { gap: 18px; }
.ndx-notif-page-subtitle { margin: 4px 0 0; color: var(--ndx-muted); font-size: 13px; }
.ndx-notif-filters { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(130px, .8fr) minmax(150px, .9fr) minmax(150px, .9fr) auto auto; gap: 10px; padding: 14px; margin: 0 0 16px; background: var(--ndx-soft, #f7f8fc); border: 1px solid var(--ndx-border); border-radius: 12px; align-items: end; }
.ndx-notif-filters label { display: grid; gap: 5px; min-width: 0; }
.ndx-notif-filters label > span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ndx-muted); letter-spacing: .04em; }
.ndx-notif-filters input, .ndx-notif-filters select { width: 100%; min-height: 38px; box-sizing: border-box; }
.ndx-notif-table-wrap { overflow-x: auto; }
.ndx-notif-table { min-width: 700px; }
.ndx-notif-table tbody tr.is-unread { background: #f7faff; }
.ndx-notif-row-title { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ndx-notif-row-title > div { min-width: 0; }
.ndx-notif-row-title strong { display: block; font-size: 14px; color: #2563eb; overflow-wrap: anywhere; }
.ndx-notif-row-title small { display: block; margin-top: 4px; color: var(--ndx-muted); line-height: 1.45; overflow-wrap: anywhere; }
.ndx-notif-table .ndx-notif-dot { display: inline-block; margin-top: 6px; }
.ndx-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 16px; }
.ndx-pagination a { display: inline-flex; min-width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid var(--ndx-border); border-radius: 8px; color: var(--ndx-text); text-decoration: none; background: #fff; box-sizing: border-box; }
.ndx-pagination a.is-active { background: #6d5ce7; color: #fff; border-color: #6d5ce7; }
.ndx-modal-backdrop { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.48); box-sizing: border-box; }
.ndx-notif-detail-modal { width: min(680px, 100%); max-height: min(78vh, 680px); overflow: auto; background: #fff; border: 1px solid var(--ndx-border); border-radius: 16px; box-shadow: 0 24px 70px rgba(15,23,42,.28); }
.ndx-notif-detail-head { display: flex; gap: 16px; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--ndx-border); position: sticky; top: 0; background: #fff; z-index: 2; }
.ndx-notif-detail-head h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.ndx-modal-close { font-size: 28px; line-height: 1; text-decoration: none; color: var(--ndx-muted); flex: none; }
.ndx-notif-detail-body { padding: 22px; }
.ndx-notif-detail-meta { color: var(--ndx-muted); font-size: 12px; margin-bottom: 16px; }
.ndx-notif-detail-message { white-space: normal; line-height: 1.7; color: var(--ndx-text); overflow-wrap: anywhere; }
.ndx-notif-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (max-width: 900px) { .ndx-notif-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ndx-notif-filters { grid-template-columns: 1fr; } .ndx-notifications-page-head { align-items: flex-start; } .ndx-notif-detail-modal { max-height: 88vh; } .ndx-notif-detail-head, .ndx-notif-detail-body { padding: 16px; } }

/* Notification center visual cleanup */
.ndx-notifications-page { border: 0 !important; box-shadow: 0 8px 28px rgba(15,23,42,.06); }
.ndx-notif-filters { border: 0 !important; box-shadow: none; background: #f7f8fc; }
.ndx-notif-table-wrap { border: 0 !important; border-radius: 12px; }
.ndx-notif-table { border-collapse: separate !important; border-spacing: 0 8px !important; min-width: 0 !important; }
.ndx-notif-table thead th { border: 0 !important; background: transparent !important; padding: 8px 14px; color: var(--ndx-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ndx-notif-table tbody tr { background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.045); }
.ndx-notif-table tbody td { border: 0 !important; padding: 14px; vertical-align: middle; }
.ndx-notif-table tbody td:first-child { border-radius: 10px 0 0 10px; }
.ndx-notif-table tbody td:last-child { border-radius: 0 10px 10px 0; }
.ndx-notif-table tbody tr.is-unread { background: #f7faff; }
.ndx-notif-table tbody tr:hover { box-shadow: 0 5px 16px rgba(15,23,42,.08); transform: translateY(-1px); transition: .15s ease; }
.ndx-notif-state { border: 0 !important; background: #f1f5f9; border-radius: 999px; padding: 4px 9px; }
.ndx-notif-detail-modal { border: 0 !important; }
.ndx-notif-detail-head { border-bottom: 1px solid rgba(148,163,184,.16) !important; }

/* Sidebar notification unread badge */
.ndx-nav-item { position: relative; }
.ndx-menu-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 5px;
	margin-left: auto;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	line-height: 18px;
	box-sizing: border-box;
}
.ndx-sidebar.is-collapsed .ndx-menu-count,
.ndx-sidebar.collapsed .ndx-menu-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 9px;
	line-height: 16px;
}
@media (max-width: 782px) {
	.ndx-menu-count { min-width: 18px; height: 17px; line-height: 17px; font-size: 9px; }
}

/* =========================================================
   NDX Notification Center — polished responsive UI v1.61.12
   ========================================================= */
.ndx-notifications-page{
    overflow:visible !important;
    border:0 !important;
    border-radius:18px !important;
    background:transparent !important;
    box-shadow:none !important;
}
.ndx-notifications-page .ndx-notifications-page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}
.ndx-notifications-page .ndx-notifications-page-head h2{
    margin:0;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:22px;
    line-height:1.25;
}
.ndx-notif-page-subtitle{ margin:5px 0 0 !important; }
.ndx-notifications-page .ndx-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    background:#eeeaff;
    color:#5b4bd8;
    font-size:12px;
    font-weight:700;
}
.ndx-notifications-page .ndx-unread-pill{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 9px;
    border-radius:999px;
    background:#edf4ff;
    color:#2563eb;
    font-size:11px;
    font-weight:700;
}
.ndx-notif-filters{
    display:grid !important;
    grid-template-columns:minmax(220px,1.8fr) minmax(130px,.75fr) minmax(150px,.9fr) minmax(150px,.9fr) auto auto !important;
    gap:10px !important;
    align-items:end !important;
    padding:12px !important;
    margin:0 0 18px !important;
    border:0 !important;
    border-radius:14px !important;
    background:#f7f8fc !important;
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.10) !important;
}
.ndx-notif-filters label > span{
    margin-left:2px;
    font-size:10px !important;
    letter-spacing:.06em !important;
}
.ndx-notif-filters input,
.ndx-notif-filters select{
    min-height:40px !important;
    border:1px solid rgba(148,163,184,.22) !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:none !important;
    outline:none;
}
.ndx-notif-filters input:focus,
.ndx-notif-filters select:focus{
    border-color:rgba(109,92,231,.55) !important;
    box-shadow:0 0 0 3px rgba(109,92,231,.10) !important;
}
.ndx-notif-filters .ndx-btn{
    min-height:40px;
    white-space:nowrap;
}
.ndx-notif-table-wrap{
    overflow-x:auto !important;
    border:0 !important;
    border-radius:16px !important;
    background:transparent !important;
}
.ndx-notif-table{
    width:100%;
    min-width:760px !important;
    border-collapse:separate !important;
    border-spacing:0 8px !important;
}
.ndx-notif-table thead th{
    padding:7px 14px 5px !important;
    border:0 !important;
    background:transparent !important;
    color:var(--ndx-muted) !important;
    font-size:10px !important;
    font-weight:700 !important;
    text-transform:uppercase;
    letter-spacing:.07em;
}
.ndx-notif-table tbody tr{
    background:#fff !important;
    box-shadow:0 3px 16px rgba(15,23,42,.055) !important;
    transition:transform .15s ease, box-shadow .15s ease;
}
.ndx-notif-table tbody tr:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(15,23,42,.09) !important;
}
.ndx-notif-table tbody tr.is-unread{ background:#f8fbff !important; }
.ndx-notif-table tbody td{
    padding:15px 14px !important;
    border:0 !important;
    vertical-align:middle !important;
}
.ndx-notif-table tbody td:first-child{ border-radius:12px 0 0 12px; }
.ndx-notif-table tbody td:last-child{ border-radius:0 12px 12px 0; }
.ndx-notif-row-title{ gap:11px !important; }
.ndx-notif-row-title strong{
    color:var(--ndx-text) !important;
    font-size:14px !important;
    line-height:1.4;
}
.ndx-notif-table tbody tr.is-unread .ndx-notif-row-title strong{ color:#245fd1 !important; }
.ndx-notif-row-title small{ font-size:12px !important; }
.ndx-notif-table .ndx-notif-dot{
    width:8px;
    height:8px;
    margin-top:6px;
    border-radius:50%;
    background:#3b82f6;
    box-shadow:0 0 0 4px rgba(59,130,246,.08);
}
.ndx-notif-table tr.is-read .ndx-notif-dot{ background:#cbd5e1; box-shadow:none; }
.ndx-notif-state{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    padding:5px 9px !important;
    border:0 !important;
    border-radius:999px !important;
    background:#f1f5f9 !important;
    color:#64748b !important;
    font-size:10px !important;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.ndx-notif-table tr.is-unread .ndx-notif-state{
    background:#eaf2ff !important;
    color:#2563eb !important;
}
.ndx-notif-view-btn{
    min-width:64px;
    justify-content:center;
    border-radius:9px !important;
}
.ndx-notif-table .ndx-empty{
    padding:48px 20px !important;
    text-align:center;
    border-radius:12px;
    background:#fff;
    color:var(--ndx-muted);
}
.ndx-pagination{
    align-items:center;
    justify-content:center !important;
    gap:5px !important;
    padding:18px 0 2px !important;
}
.ndx-pagination a{
    min-width:34px;
    height:34px;
    border:0 !important;
    border-radius:9px !important;
    background:#f3f5fa !important;
    box-shadow:none !important;
    color:var(--ndx-text) !important;
}
.ndx-pagination a:hover{ background:#e9ecf6 !important; }
.ndx-pagination a.is-active{ background:#6d5ce7 !important; color:#fff !important; }

/* Detail modal */
.ndx-modal-backdrop{
    padding:16px !important;
    background:rgba(15,23,42,.56) !important;
    backdrop-filter:blur(3px);
}
.ndx-notif-detail-modal{
    width:min(680px,100%) !important;
    max-height:min(82vh,720px) !important;
    border:0 !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 30px 90px rgba(15,23,42,.28) !important;
    overflow:auto !important;
}
.ndx-notif-detail-head{
    padding:22px 24px !important;
    border:0 !important;
    border-bottom:1px solid rgba(148,163,184,.13) !important;
    background:#fff !important;
}
.ndx-notif-detail-head h3{
    margin:7px 0 0 !important;
    color:var(--ndx-text);
    font-size:20px !important;
}
.ndx-notif-type{
    display:inline-flex !important;
    align-items:center;
    min-height:23px;
    padding:0 9px;
    border-radius:999px;
    background:#eef6f1;
    color:#159447 !important;
    font-size:10px !important;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.ndx-modal-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:#f4f6fa;
    color:#64748b !important;
    font-size:24px !important;
    line-height:1;
    text-decoration:none !important;
}
.ndx-modal-close:hover{ background:#eceff5; color:#1e293b !important; }
.ndx-notif-detail-body{ padding:22px 24px 24px !important; }
.ndx-notif-detail-meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:16px !important;
    color:var(--ndx-muted) !important;
}
.ndx-notif-detail-message{
    padding:16px 17px;
    border-radius:12px;
    background:#f7f8fc;
    color:var(--ndx-text) !important;
    line-height:1.7 !important;
}
.ndx-notif-detail-actions{
    margin-top:20px !important;
    justify-content:flex-end;
}

/* Dark mode */
.ndx-app.ndx-dark .ndx-notif-filters{ background:#20243a !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05) !important; }
.ndx-app.ndx-dark .ndx-notif-filters input,
.ndx-app.ndx-dark .ndx-notif-filters select{ background:#171a2c !important; color:var(--ndx-text) !important; border-color:rgba(255,255,255,.10) !important; }
.ndx-app.ndx-dark .ndx-notif-table tbody tr,
.ndx-app.ndx-dark .ndx-notif-table .ndx-empty,
.ndx-app.ndx-dark .ndx-notif-detail-modal,
.ndx-app.ndx-dark .ndx-notif-detail-head{ background:#1b1e36 !important; }
.ndx-app.ndx-dark .ndx-notif-table tbody tr.is-unread{ background:#202a45 !important; }
.ndx-app.ndx-dark .ndx-notif-row-title strong{ color:#e7eaf5 !important; }
.ndx-app.ndx-dark .ndx-notif-detail-message{ background:#242842 !important; }
.ndx-app.ndx-dark .ndx-modal-close{ background:#282d48; color:#cbd5e1 !important; }
.ndx-app.ndx-dark .ndx-pagination a{ background:#252942 !important; color:#e7eaf5 !important; }
.ndx-app.ndx-dark .ndx-pagination a.is-active{ background:#6d5ce7 !important; color:#fff !important; }

@media (max-width:1100px){
    .ndx-notif-filters{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .ndx-notif-filters .ndx-btn{ width:100%; }
}
@media (max-width:700px){
    .ndx-notifications-page .ndx-notifications-page-head{ align-items:flex-start; flex-direction:column; }
    .ndx-notifications-page .ndx-panel-actions{ width:100%; }
    .ndx-notifications-page .ndx-panel-actions .ndx-btn{ width:100%; justify-content:center; }
    .ndx-notif-filters{ grid-template-columns:1fr !important; padding:11px !important; }
    .ndx-notif-table{ min-width:0 !important; border-spacing:0 8px !important; }
    .ndx-notif-table thead{ display:none; }
    .ndx-notif-table tbody,
    .ndx-notif-table tbody tr,
    .ndx-notif-table tbody td{ display:block; width:100%; box-sizing:border-box; }
    .ndx-notif-table tbody tr{
        position:relative;
        padding:10px 12px 12px;
        border-radius:14px !important;
    }
    .ndx-notif-table tbody td{
        padding:7px 0 !important;
    }
    .ndx-notif-table tbody td:first-child,
    .ndx-notif-table tbody td:last-child{ border-radius:0 !important; }
    .ndx-notif-table tbody td:nth-child(2),
    .ndx-notif-table tbody td:nth-child(3){ display:inline-flex; width:auto; margin-right:8px; }
    .ndx-notif-table tbody td:nth-child(2){ color:var(--ndx-muted); font-size:12px; }
    .ndx-notif-table tbody td:nth-child(4){ padding-top:9px !important; }
    .ndx-notif-view-btn{ width:100%; justify-content:center; }
    .ndx-notif-detail-head{ padding:17px !important; }
    .ndx-notif-detail-body{ padding:17px !important; }
    .ndx-notif-detail-actions{ justify-content:stretch; }
    .ndx-notif-detail-actions .ndx-btn{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:420px){
    .ndx-notifications-page .ndx-notifications-page-head h2{ font-size:19px; }
    .ndx-notif-page-subtitle{ font-size:12px !important; }
    .ndx-notif-table tbody tr{ padding:9px 11px 11px; }
    .ndx-notif-row-title strong{ font-size:13px !important; }
    .ndx-notif-row-title small{ font-size:11px !important; }
    .ndx-modal-backdrop{ padding:8px !important; }
    .ndx-notif-detail-modal{ border-radius:15px !important; max-height:92vh !important; }
}

/* Dynamic Attendance Dashboard */
.ndx-attendance-page .ndx-dashboard-hero{margin-bottom:14px}.ndx-attendance-page .ndx-summary{margin-bottom:14px}.ndx-attendance-page .ndx-table td small{color:var(--ndx-muted);font-size:11px}.ndx-attendance-page .ndx-table td{vertical-align:middle}@media(max-width:900px){.ndx-attendance-page .ndx-filterbar{grid-template-columns:1fr}.ndx-attendance-page .ndx-table-wrap{overflow-x:auto}}

/* =========================================================
   Attendance UX v3 — ChronosCRM inspired, data-driven
   Admin Live Attendance + Timesheets + Employee Attendance
   ========================================================= */
.ndx-attendance-page{--att-blue:#0058be;--att-blue2:#2170e4;--att-ink:#0b1c30;--att-muted:#687386;--att-bg:#f7f9ff;--att-card:#fff;--att-line:#e3e9f5;--att-soft:#eef4ff;--att-green:#08784f;--att-green-bg:#e5f8ef;--att-red:#c52323;--att-red-bg:#ffe8e5;--att-yellow:#9a6b00;--att-yellow-bg:#fff5d7;color:var(--att-ink)}
.ndx-live-attendance-page,.ndx-timesheet-page{padding:2px 2px 28px}
.ndx-attn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}.ndx-attn-head h1{margin:5px 0 4px;font-size:31px;line-height:1.15;letter-spacing:-.8px;font-weight:800;color:var(--att-ink)}.ndx-attn-head p{margin:0;color:var(--att-muted);font-size:13px}.ndx-attn-live,.ndx-attn-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--att-blue);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.ndx-attn-live span,.ndx-stream-dot{width:8px;height:8px;border-radius:50%;background:#0a8a5d;display:inline-block;box-shadow:0 0 0 4px rgba(10,138,93,.08)}.ndx-attn-live em{font-style:normal;color:#7a8495;font-weight:600;letter-spacing:0;text-transform:none}.ndx-attn-breadcrumb{color:#687386}.ndx-attn-breadcrumb b{color:#b8c0ce}
.ndx-attn-actions{display:flex;flex-wrap:wrap;gap:8px}.ndx-attn-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;border:0;border-radius:9px;text-decoration:none;font-size:12px;font-weight:700;cursor:pointer;box-sizing:border-box}.ndx-attn-btn-light{background:#fff;color:var(--att-ink);box-shadow:0 2px 9px rgba(22,45,82,.06);border:1px solid var(--att-line)}.ndx-attn-btn-primary{background:var(--att-blue);color:#fff;box-shadow:0 4px 12px rgba(0,88,190,.18)}.ndx-attn-btn:hover{transform:translateY(-1px)}
.ndx-attn-filters{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:13px;margin-bottom:16px;background:#fff;border:1px solid rgba(210,220,237,.75);border-radius:13px;box-shadow:0 3px 12px rgba(26,55,94,.04)}.ndx-attn-filters select,.ndx-attn-filters input{height:36px;padding:0 10px;border:1px solid var(--att-line);border-radius:8px;background:#f5f8ff;color:var(--att-ink);font-size:12px;outline:0}.ndx-attn-filters label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--att-muted)}.ndx-attn-sync{margin-left:auto;font-size:11px;color:#657186;font-weight:600}.ndx-attn-sync i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#0a8a5d}.ndx-attn-sync strong{color:#08784f}
.ndx-attn-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:17px}.ndx-attn-kpi{position:relative;display:flex;align-items:flex-start;justify-content:space-between;min-height:108px;padding:17px;border:1px solid rgba(213,223,240,.8);border-radius:13px;background:#fff;box-shadow:0 3px 12px rgba(28,54,92,.04);overflow:hidden}.ndx-attn-kpi:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--att-blue)}.ndx-attn-kpi:nth-child(2):before{background:#08784f}.ndx-attn-kpi:nth-child(3):before{background:#4e77d8}.ndx-attn-kpi:nth-child(4):before{background:#d22c2c}.ndx-attn-kpi small{display:block;color:#667187;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.ndx-attn-kpi strong{display:block;margin:10px 0 4px;font-size:28px;line-height:1;font-weight:800;letter-spacing:-.7px}.ndx-attn-kpi strong span{font-size:11px;font-weight:600;letter-spacing:0;color:#748096}.ndx-attn-kpi label{font-size:10px;color:#788397}.ndx-attn-kpi>b{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#edf4ff;color:var(--att-blue);font-size:18px}.ndx-attn-kpi-danger strong,.ndx-attn-kpi-danger>b{color:var(--att-red)}.ndx-attn-kpi-danger>b{background:var(--att-red-bg)}
.ndx-attn-live-grid,.ndx-timesheet-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:16px}.ndx-attn-panel{background:#fff;border:1px solid rgba(213,223,240,.82);border-radius:13px;box-shadow:0 3px 12px rgba(28,54,92,.04);overflow:hidden}.ndx-attn-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 17px;background:#f4f7fd;border-bottom:1px solid var(--att-line)}.ndx-attn-panel-head h2{margin:0;font-size:15px;line-height:1.25;font-weight:800;color:var(--att-ink)}.ndx-attn-panel-head p{margin:4px 0 0;color:#748096;font-size:10px}.ndx-attn-panel-head strong{font-size:11px}.ndx-attn-total{padding:6px 9px;border-radius:7px;background:#e8effd;color:#435c88;font-size:10px;font-weight:700}.ndx-attn-table-wrap{overflow-x:auto}.ndx-attn-table{width:100%;min-width:720px;border-collapse:collapse;text-align:left}.ndx-attn-table th{padding:11px 12px;background:#fff;color:#738096;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;white-space:nowrap}.ndx-attn-table td{padding:12px;border-top:1px solid #edf1f7;color:#344054;font-size:11px;vertical-align:middle}.ndx-attn-table tbody tr:hover{background:#f9fbff}.ndx-attn-table tbody tr.is-exception{background:#fff7f6}.ndx-attn-person{display:flex;align-items:center;gap:9px;min-width:170px}.ndx-attn-person>span{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;border-radius:50%;background:#eaf1ff;color:#195ab8;font-size:10px;font-weight:800}.ndx-attn-person strong,.ndx-attn-person small{display:block}.ndx-attn-person strong{font-size:11px;color:var(--att-ink)}.ndx-attn-person small{margin-top:3px;color:#7a8495;font-size:9px}.ndx-attn-type,.ndx-attn-status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:#eaf2ff;color:#235da8;font-size:9px;font-weight:800;white-space:nowrap}.ndx-attn-type.late,.ndx-attn-status.warning{background:var(--att-yellow-bg);color:var(--att-yellow)}.ndx-attn-status.ok{background:var(--att-green-bg);color:var(--att-green)}.ndx-attn-status.danger{background:var(--att-red-bg);color:var(--att-red)}.ndx-attn-ok{color:#08784f;font-size:10px;font-weight:800;white-space:nowrap}.ndx-attn-late{display:block;color:#c52323!important;font-size:9px!important;margin-top:3px}.ndx-attn-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;color:#778398;font-size:10px;border-top:1px solid var(--att-line)}.ndx-attn-foot a{color:var(--att-blue);font-weight:800;text-decoration:none}.ndx-attn-side{display:flex;flex-direction:column;gap:16px}.ndx-zone{padding:12px 15px;border-bottom:1px solid #edf1f7}.ndx-zone:last-child{border-bottom:0}.ndx-zone>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.ndx-zone strong{font-size:11px}.ndx-zone b{font-size:10px;color:var(--att-blue)}.ndx-zone small{display:block;margin-top:5px;color:#7a8495;font-size:9px}.ndx-progress,.ndx-util-bar{height:6px;margin-top:7px;background:#e6edf9;border-radius:999px;overflow:hidden}.ndx-progress i,.ndx-util-bar i{display:block;height:100%;border-radius:inherit;background:var(--att-blue)}.ndx-zone:nth-child(3) .ndx-progress i{background:#08784f}
.ndx-radar{display:flex;align-items:center;gap:20px;padding:18px}.ndx-radar-ring,.ndx-attn-ring{--pct:0;position:relative;width:106px;height:106px;flex:0 0 106px;border-radius:50%;background:conic-gradient(#08784f calc(var(--pct)*1%),#dfe7f5 0);display:flex;align-items:center;justify-content:center}.ndx-radar-ring:after,.ndx-attn-ring:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;background:#fff}.ndx-radar-ring span,.ndx-attn-ring span{position:relative;z-index:1;font-size:21px;font-weight:800;color:var(--att-ink)}.ndx-radar-ring small{display:block;font-size:7px;text-align:center;color:#758096;letter-spacing:.08em}.ndx-radar ul{margin:0;padding:0;list-style:none;flex:1}.ndx-radar li{display:flex;align-items:center;gap:7px;margin:8px 0;font-size:10px;color:#657186}.ndx-radar li i{width:7px;height:7px;border-radius:50%;background:#08784f}.ndx-radar li:nth-child(2) i{background:#c99a1a}.ndx-radar li:nth-child(3) i{background:#d32f2f}.ndx-radar li b{margin-left:auto;color:var(--att-ink)}.ndx-attn-green{color:#08784f}.ndx-attn-danger{color:var(--att-red)}.ndx-attn-policy{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px 15px;border-radius:11px;background:#eaf2ff;border:1px solid #d9e6fb;color:#35547f;font-size:10px}.ndx-attn-policy strong{font-size:11px;color:var(--att-ink)}.ndx-attn-policy a{margin-left:auto;color:var(--att-blue);font-weight:800;text-decoration:none;white-space:nowrap}
.ndx-attn-tabs{display:flex;align-items:center;gap:4px;padding:9px;border-bottom:1px solid var(--att-line);background:#fff}.ndx-attn-tabs a,.ndx-attn-tabs>span{padding:8px 11px;border-radius:7px;color:#667187;font-size:10px;font-weight:800;text-decoration:none}.ndx-attn-tabs>.is-active{background:var(--att-blue);color:#fff}.ndx-attn-tabs a:hover{background:#eef4ff;color:var(--att-blue)}.ndx-attn-tabs b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:4px;border-radius:99px;background:var(--att-red-bg);color:var(--att-red);font-size:9px}.ndx-request{margin:10px;padding:12px;border-radius:9px;background:#f4f7fd;border:1px solid #e3eaf6}.ndx-request>div{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.ndx-request strong,.ndx-request small{display:block}.ndx-request strong{font-size:11px}.ndx-request small{margin-top:3px;color:#7a8495;font-size:9px}.ndx-request>span{font-size:9px;color:var(--att-blue);font-weight:800}.ndx-request p{margin:9px 0;color:#667187;font-size:10px;line-height:1.45}.ndx-request a{display:inline-block;color:var(--att-blue);font-size:10px;font-weight:800;text-decoration:none}.ndx-util-bar{height:9px;margin:16px 17px 7px}.ndx-util-bar i{background:#08784f}.ndx-attn-panel>.ndx-attn-panel-head+strong,.ndx-attn-panel>.ndx-attn-panel-head~small{display:block;margin:0 17px 12px;color:#667187;font-size:10px}.ndx-timesheet-filters label{padding:0 4px}.ndx-timesheet-filters label input,.ndx-timesheet-filters label select{margin-left:3px}.ndx-timesheet-table{min-width:850px}

/* Employee attendance workspace */
.ndx-emp-attn-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:18px 20px;border:1px solid #e0e7f3;border-radius:15px;background:linear-gradient(110deg,#fff 0%,#f8fbff 100%);box-shadow:0 4px 15px rgba(28,54,92,.04)}.ndx-emp-attn-person{display:flex;align-items:center;gap:13px}.ndx-emp-attn-person>img,.ndx-emp-attn-person>span{width:52px;height:52px;flex:0 0 52px;border-radius:12px;object-fit:cover}.ndx-emp-attn-person>span{display:flex;align-items:center;justify-content:center;background:#eaf1ff;color:var(--att-blue);font-weight:800}.ndx-emp-attn-person h1{margin:3px 0 2px;font-size:21px;letter-spacing:-.35px}.ndx-emp-attn-person h1 small{font-size:15px}.ndx-emp-attn-person p{margin:0;color:#748096;font-size:11px}.ndx-emp-attn-head-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.ndx-emp-attn-head-meta span{padding:9px 10px;border-radius:9px;background:#eef4ff;color:#657186;font-size:9px}.ndx-emp-attn-head-meta strong{display:block;color:var(--att-ink);font-size:10px;margin-top:2px}.ndx-live-clock{padding:10px 12px;border-radius:9px;background:var(--att-blue);color:#fff;font-size:16px;box-shadow:0 4px 12px rgba(0,88,190,.16)}
.ndx-emp-attn-topgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}.ndx-emp-attn-card{background:#fff;border:1px solid #dfe7f3;border-radius:13px;box-shadow:0 3px 12px rgba(28,54,92,.04)}.ndx-emp-attn-shift{padding:17px}.ndx-emp-attn-card-title,.ndx-emp-attn-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.ndx-emp-attn-card-title>div{display:grid;grid-template-columns:28px 1fr;column-gap:8px}.ndx-attn-mini-icon{grid-row:span 2;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#eaf2ff;color:var(--att-blue)}.ndx-emp-attn-card-title strong{font-size:13px}.ndx-emp-attn-card-title small{color:#758096;font-size:9px}.ndx-emp-attn-live-pill{padding:5px 8px;border-radius:99px;background:var(--att-green-bg);color:var(--att-green);font-size:9px;font-weight:800}.ndx-emp-attn-live-pill i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#08784f}.ndx-emp-attn-duration{margin-top:16px;padding:18px;text-align:center;border-radius:11px;background:#eef4ff}.ndx-emp-attn-duration>small{display:block;color:#667187;font-size:8px;letter-spacing:.14em;font-weight:800}.ndx-emp-attn-duration>strong{display:block;margin:7px 0 8px;color:var(--att-blue);font-size:33px;line-height:1;font-weight:800;letter-spacing:-1px}.ndx-emp-attn-duration>span{display:flex;justify-content:space-between;gap:8px;color:#667187;font-size:9px}.ndx-emp-attn-duration>span b{color:var(--att-ink)}.ndx-emp-attn-duration>div{height:6px;margin:7px 0;background:#d7e4f8;border-radius:99px;overflow:hidden}.ndx-emp-attn-duration>div i{display:block;height:100%;background:var(--att-blue);border-radius:inherit}.ndx-emp-attn-duration label{display:flex;justify-content:space-between;color:#718097;font-size:8px}.ndx-emp-attn-duration label em{font-style:normal}.ndx-emp-break{margin-top:12px;padding-top:11px;border-top:1px solid #edf1f7}.ndx-emp-break>div:first-child{display:flex;align-items:center;gap:7px;font-size:9px;color:#657186}.ndx-emp-break>div:first-child strong{color:var(--att-ink)}.ndx-emp-break>div:first-child b{margin-left:auto;color:var(--att-blue);font-size:9px}.ndx-emp-break-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.ndx-emp-break-buttons button{height:36px;border:1px solid #dfe7f3;border-radius:8px;background:#fff;color:#647087;font-size:9px;font-weight:700}.ndx-emp-break-buttons small{display:block;font-weight:500}.ndx-emp-attn-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.ndx-emp-clockin,.ndx-emp-clockout,.ndx-emp-missed{height:43px;border:0;border-radius:8px;font-size:11px;font-weight:800;cursor:pointer}.ndx-emp-clockin{background:var(--att-blue);color:#fff}.ndx-emp-clockout{background:#c82323;color:#fff}.ndx-emp-missed{background:#e8effd;color:#4d6285}.ndx-emp-attn-hidden-form{position:absolute;left:-99999px;width:1px;height:1px;overflow:hidden}.ndx-emp-attn-hidden-form button{display:none}
.ndx-emp-attn-stat-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ndx-emp-attn-stat{position:relative;padding:16px;min-height:115px;box-sizing:border-box}.ndx-emp-attn-stat>div:first-child small,.ndx-emp-attn-stat>div:first-child span{display:block}.ndx-emp-attn-stat>div:first-child small{font-size:10px;color:#667187;font-weight:700}.ndx-emp-attn-stat>div:first-child span{font-size:8px;color:#8993a4;margin-top:3px}.ndx-emp-attn-stat>strong{display:block;margin-top:12px;font-size:25px;color:var(--att-ink)}.ndx-emp-attn-stat>strong small{font-size:9px;color:#718097;font-weight:600}.ndx-emp-attn-stat>label{display:block;margin-top:8px;color:#718097;font-size:8px}.ndx-attn-ring{position:absolute;right:14px;top:37px;width:62px;height:62px;flex-basis:62px;background:conic-gradient(#08784f calc(var(--pct)*1%),#dfe7f5 0)}.ndx-attn-ring:after{width:45px;height:45px}.ndx-attn-ring span{font-size:12px}.ndx-emp-leave-mini{position:absolute;right:14px;top:38px;padding:7px 9px;border-radius:8px;background:#eef4ff;text-align:center}.ndx-emp-leave-mini b,.ndx-emp-leave-mini span{display:block}.ndx-emp-leave-mini b{font-size:8px;color:#68758a}.ndx-emp-leave-mini span{font-size:14px;color:var(--att-blue);font-weight:800}.ndx-attn-line{height:5px;margin-top:12px;border-radius:99px;background:linear-gradient(90deg,#d99a1b 25%,#e8edf5 25%)}
.ndx-emp-attn-calendar{margin-top:16px;padding:17px}.ndx-emp-attn-section-head h2{margin:0;font-size:15px}.ndx-emp-attn-section-head h2 span{padding:3px 7px;margin-left:5px;border-radius:5px;background:#eef3fb;color:#657186;font-size:9px;font-weight:700}.ndx-emp-attn-section-head p{margin:4px 0 0;color:#7a8495;font-size:9px}.ndx-emp-calendar-switch{display:flex;gap:3px;padding:3px;border-radius:8px;background:#f1f5fb}.ndx-emp-calendar-switch button{border:0;padding:7px 9px;border-radius:6px;background:transparent;color:#68758a;font-size:9px;font-weight:700}.ndx-emp-calendar-switch button.is-active{background:#fff;color:var(--att-blue);box-shadow:0 2px 6px rgba(24,52,91,.08)}.ndx-emp-calendar-legend{display:flex;gap:14px;flex-wrap:wrap;margin:13px 0 9px;padding:8px 10px;border-radius:8px;background:#f5f8fd}.ndx-emp-calendar-legend span{font-size:8px;color:#657186}.ndx-emp-calendar-legend i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#08784f}.ndx-emp-calendar-legend i.late{background:#d69b20}.ndx-emp-calendar-legend i.leave{background:#2c70db}.ndx-emp-calendar-legend i.off{background:#cbd4e3}.ndx-emp-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.ndx-emp-calendar-grid .dow{padding:5px;text-align:center;color:#778398;font-size:8px;font-weight:800}.cal-cell{min-height:57px;padding:7px;border-radius:8px;background:#f1f5fc;border:1px solid transparent;box-sizing:border-box}.cal-cell b{display:block;font-size:9px;color:#6d788b}.cal-cell strong{display:block;margin-top:7px;color:#08784f;font-size:9px}.cal-cell small{display:block;margin-top:2px;color:#778398;font-size:7px;line-height:1.2}.cal-cell.present{background:#edf9f3;border-color:#d8f0e4}.cal-cell.late{background:#fff7df;border-color:#f5e6b6}.cal-cell.late strong{color:#a16f00}.cal-cell.leave{background:#edf3ff;border-color:#d8e5fc}.cal-cell.leave strong{color:#2b63bc}.cal-cell.off{background:#f4f6fa}.cal-cell.off strong{color:#8a95a8}.cal-cell.is-empty{background:transparent;border:0}
.ndx-emp-attn-bottom-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:16px}.ndx-emp-attn-bottom-grid>.ndx-emp-attn-card{padding:17px}.ndx-emp-audit>div{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid #edf1f7}.ndx-emp-audit>div:last-child{border-bottom:0}.ndx-emp-audit>b,.ndx-emp-audit>div>b{width:25px;height:25px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:#eaf2ff;color:var(--att-blue);font-size:12px}.ndx-emp-audit span{flex:1}.ndx-emp-audit strong,.ndx-emp-audit small{display:block}.ndx-emp-audit strong{font-size:10px}.ndx-emp-audit small{margin-top:3px;color:#758096;font-size:8px}.ndx-emp-audit em{font-style:normal;padding:4px 7px;border-radius:99px;background:var(--att-green-bg);color:var(--att-green);font-size:8px;font-weight:800}.ndx-attn-audit-note{display:block;margin-top:10px;color:#788397;font-size:8px}.ndx-emp-request-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.ndx-emp-request-grid a{padding:10px 5px;text-align:center;text-decoration:none;border-radius:8px;background:#eef4ff;color:#285da8;font-size:9px;font-weight:800}.ndx-emp-request-note{margin-top:10px;padding:9px;border-radius:8px;background:#f5f7fb;color:#69758a;font-size:9px}

@media(max-width:1050px){.ndx-attn-kpis{grid-template-columns:repeat(2,1fr)}.ndx-attn-live-grid,.ndx-timesheet-grid,.ndx-emp-attn-topgrid,.ndx-emp-attn-bottom-grid{grid-template-columns:1fr}.ndx-emp-attn-stat-stack{grid-template-columns:repeat(2,1fr)}.ndx-emp-attn-head{align-items:flex-start;flex-direction:column}.ndx-emp-attn-head-meta{justify-content:flex-start}}
@media(max-width:700px){.ndx-attn-head{align-items:flex-start;flex-direction:column}.ndx-attn-actions{width:100%}.ndx-attn-actions .ndx-attn-btn{flex:1}.ndx-attn-kpis{grid-template-columns:1fr}.ndx-attn-filters{align-items:stretch;flex-direction:column}.ndx-attn-filters>*{width:100%;box-sizing:border-box}.ndx-attn-sync{margin-left:0}.ndx-attn-policy{align-items:flex-start;flex-direction:column}.ndx-attn-policy a{margin-left:0}.ndx-emp-attn-stat-stack{grid-template-columns:1fr}.ndx-emp-attn-actions-row{grid-template-columns:1fr}.ndx-emp-attn-head-meta{width:100%}.ndx-emp-attn-head-meta span,.ndx-live-clock{flex:1}.ndx-emp-calendar-grid{min-width:620px}.ndx-emp-attn-calendar{overflow-x:auto}.ndx-emp-attn-section-head{align-items:flex-start;flex-direction:column}.ndx-emp-request-grid{grid-template-columns:1fr}}
.ndx-attendance-overview .ndx-attn-overview-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;margin-bottom:16px}.ndx-dept-list{padding:13px 16px}.ndx-dept-row{padding:9px 0}.ndx-dept-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:10px}.ndx-dept-row strong{color:#16263b}.ndx-dept-row span{color:#718096}.ndx-dept-row span b{color:#0058be}.ndx-dept-row .ndx-progress{margin-top:6px}.ndx-dept-row .ndx-progress i{background:#0058be}.ndx-overall-rate{margin:0 14px 14px;padding:10px;border-radius:8px;background:#eef4ff;color:#68758a;font-size:10px}.ndx-overall-rate strong{float:right;color:#08784f;font-size:12px}.ndx-bars{height:185px;display:flex;align-items:flex-end;gap:10px;padding:20px 18px 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 45px,#edf2f9 46px)}.ndx-bars>div{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.ndx-bars i{display:block;width:100%;max-width:24px;min-height:3px;border-radius:6px 6px 2px 2px;background:#1766c8}.ndx-bars span{font-size:8px;color:#8290a4}.ndx-curve-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:12px 15px}.ndx-curve-meta span{padding:9px;border-radius:8px;background:#f4f7fd;color:#758096;font-size:9px}.ndx-curve-meta strong{display:block;margin-top:3px;color:#0b1c30;font-size:12px}.ndx-overview-roster{margin-top:0}.ndx-overview-roster .ndx-attn-table{min-width:900px}.ndx-overview-roster .ndx-attn-table td small{display:block;margin-top:3px;color:#7a8495;font-size:9px}.ndx-attn-icon-link{color:#0058be;text-decoration:none;font-size:10px;font-weight:800}.ndx-attendance-overview .ndx-attn-filters label{flex:1}.ndx-attendance-overview .ndx-attn-filters label input,.ndx-attendance-overview .ndx-attn-filters label select{min-width:150px;flex:1}
@media(max-width:900px){.ndx-attendance-overview .ndx-attn-overview-grid{grid-template-columns:1fr}.ndx-curve-meta{grid-template-columns:1fr}.ndx-attendance-overview .ndx-attn-filters label{width:100%}}

/* NDX Attendance Control Center - refined admin UX */
.ndx-attendance-page{--att-blue:#1766c8;--att-ink:#12243a;--att-muted:#718096}
.ndx-attendance-page .ndx-attn-head{background:linear-gradient(135deg,#fff 0%,#f6f9fe 100%);border:1px solid #e5ebf4;border-radius:16px;padding:22px 24px;box-shadow:0 6px 24px rgba(20,45,80,.06);margin-bottom:16px}
.ndx-attendance-page .ndx-attn-head h1{font-size:25px;letter-spacing:-.5px;margin:5px 0 4px;color:var(--att-ink)}
.ndx-attendance-page .ndx-attn-head p{font-size:11px;color:var(--att-muted);margin:0}
.ndx-attendance-page .ndx-attn-breadcrumb{font-size:9px;letter-spacing:.11em;font-weight:800;color:#7d8ba0}
.ndx-attendance-page .ndx-attn-filters{background:#fff;border:1px solid #e4eaf3;border-radius:14px;padding:14px;box-shadow:0 4px 16px rgba(20,45,80,.045);gap:10px;align-items:end}
.ndx-attendance-page .ndx-attn-filters label{font-size:9px;font-weight:800;color:#64748b;display:flex;flex-direction:column;gap:6px}
.ndx-attendance-page .ndx-attn-filters input,.ndx-attendance-page .ndx-attn-filters select{height:40px;border:1px solid #dbe3ef;border-radius:9px;background:#fbfcfe;padding:0 11px;color:#1e2e43;font-size:11px;outline:none;transition:.18s}
.ndx-attendance-page .ndx-attn-filters input:focus,.ndx-attendance-page .ndx-attn-filters select:focus{border-color:#78a8e7;box-shadow:0 0 0 3px rgba(23,102,200,.08);background:#fff}
.ndx-attendance-page .ndx-attn-filters .ndx-attn-btn{height:40px}
.ndx-attendance-page .ndx-attn-panel,.ndx-attendance-page .ndx-attn-kpi{border-radius:14px;box-shadow:0 4px 18px rgba(20,45,80,.045)}
.ndx-attendance-page .ndx-attn-table-wrap{border-radius:12px;overflow:auto}
.ndx-attendance-page .ndx-attn-table thead th{position:sticky;top:0;z-index:2;background:#f7f9fc;font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:#7a8799}
.ndx-attendance-page .ndx-attn-table tbody tr{transition:background .15s,transform .15s}
.ndx-attendance-page .ndx-attn-table tbody tr:hover{background:#f8fbff}
.ndx-attendance-page .ndx-attn-status{font-weight:800;white-space:nowrap}
.ndx-attendance-page .ndx-attn-icon-link{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:30px;border:1px solid #d9e5f5;border-radius:8px;background:#f5f9ff}
.ndx-attendance-page .ndx-attn-icon-link:hover{background:#eaf3ff;border-color:#a9c7ec}
.ndx-timesheet-page .ndx-timesheet-filters{grid-template-columns:repeat(4,minmax(150px,1fr))}
.ndx-timesheet-page .ndx-timesheet-filters .ndx-attn-btn{align-self:end}
@media(max-width:1100px){.ndx-timesheet-page .ndx-timesheet-filters{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:700px){.ndx-timesheet-page .ndx-timesheet-filters{grid-template-columns:1fr}.ndx-attendance-page .ndx-attn-head{padding:18px}.ndx-attendance-page .ndx-attn-head h1{font-size:21px}}

/* Attendance status clarity + admin correction UI */
.ndx-attendance-page .ndx-attn-row.ndx-status-absent{background:#fff4f4}.ndx-attendance-page .ndx-attn-row.ndx-status-absent:hover{background:#ffebeb}.ndx-attendance-page .ndx-attn-row.ndx-status-late{background:#fff9e8}.ndx-attendance-page .ndx-attn-row.ndx-status-late:hover{background:#fff2c9}.ndx-attendance-page .ndx-attn-row.ndx-status-leave{background:#f2f6ff}.ndx-attendance-page .ndx-attn-status.danger{background:#ffe1e1;color:#c12626;border:1px solid #ffcaca;padding:5px 9px;border-radius:999px}.ndx-attendance-page .ndx-attn-status.warning{background:#fff0bf;color:#9a6800;border:1px solid #f6dda0;padding:5px 9px;border-radius:999px}.ndx-attendance-page .ndx-attn-status.ok{background:#e8f8ef;color:#08784f;border:1px solid #cceedd;padding:5px 9px;border-radius:999px}.ndx-attendance-edit-card{border:1px solid #dce6f3!important;background:linear-gradient(180deg,#fff,#f9fbfe)}.ndx-attendance-edit-note{margin:-5px 0 16px;color:#6d7b90;font-size:10px;line-height:1.6}.ndx-attendance-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ndx-attendance-form-grid .ndx-field-wide{grid-column:span 3}.ndx-attendance-disabled{opacity:.5}.ndx-attendance-page .ndx-attn-panel-head strong{color:#1766c8}.cal-cell.absent{background:#fff0f0;border-color:#ffd7d7}.cal-cell.absent strong{color:#c12626}.ndx-attendance-page .ndx-attn-table tbody tr.ndx-status-absent td:first-child{border-left:3px solid #d94141}.ndx-attendance-page .ndx-attn-table tbody tr.ndx-status-late td:first-child{border-left:3px solid #d69b20}
@media(max-width:800px){.ndx-attendance-form-grid{grid-template-columns:1fr}.ndx-attendance-form-grid .ndx-field-wide{grid-column:auto}}

/* Lead consent: compact checkbox before text */
.ndx-lead-form-grid .ndx-consent-field{grid-column:1/-1!important}
.ndx-lead-form-grid .ndx-consent-label{display:flex!important;align-items:flex-start!important;gap:7px!important;font-size:11px!important;line-height:1.5!important;font-weight:500!important;color:#475467!important;cursor:pointer}
.ndx-lead-form-grid .ndx-consent-label input[type=checkbox]{width:14px!important;height:14px!important;min-width:14px!important;margin:2px 0 0!important;padding:0!important;accent-color:#175cd3}
.ndx-attendance-page .ndx-attn-status.neutral{background:#eef2f6;color:#667085;border:1px solid #d9e0e8;padding:5px 9px;border-radius:999px}
.ndx-attendance-page .ndx-attn-table tbody tr.ndx-status-pending{background:#fff}
.ndx-attendance-page .ndx-attn-table tbody tr.ndx-status-upcoming{background:#fafbfc}
.ndx-attendance-page .ndx-attn-table tbody tr.ndx-status-pending:hover,.ndx-attendance-page .ndx-attn-table tbody tr.ndx-status-upcoming:hover{background:#f7f9fc}
/* Attendance state clarity */
.ndx-attn-status.danger,.ndx-attendance-page .danger{background:#fee2e2!important;color:#b91c1c!important}
.ndx-attn-status.warning,.ndx-attendance-page .warning{background:#fef3c7!important;color:#b45309!important}
.ndx-attn-status.ok,.ndx-attendance-page .ok{background:#dcfce7!important;color:#15803d!important}
.cal-cell.unmarked{background:#f8fafc!important;color:#64748b!important;border-color:#e2e8f0!important}
.cal-cell.unmarked strong{color:#475569!important}
.cal-cell.absent{background:#fee2e2!important;color:#b91c1c!important}
.cal-cell.late{background:#fef3c7!important;color:#b45309!important}
.cal-cell.present{background:#dcfce7!important;color:#15803d!important}

/* NDX Attendance UI v4 — clean, friendly, responsive */
.ndx-attendance-page{--att-blue:#1766c8;--att-ink:#12243a;--att-muted:#6b7890;--att-border:#e6ebf3;--att-soft:#f7f9fc;--att-green:#15803d;--att-yellow:#b45309;--att-red:#b91c1c;max-width:100%;box-sizing:border-box}
.ndx-attendance-page *{box-sizing:border-box}
.ndx-attendance-page .ndx-attn-head{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;border:1px solid var(--att-border);border-radius:18px;background:linear-gradient(135deg,#fff 0%,#f6f9ff 100%);box-shadow:0 8px 28px rgba(20,45,80,.06)}
.ndx-attendance-page .ndx-attn-head:after{content:"";position:absolute;right:-55px;top:-75px;width:180px;height:180px;border-radius:50%;background:rgba(23,102,200,.06);pointer-events:none}
.ndx-attendance-page .ndx-attn-breadcrumb{font-size:9px;letter-spacing:.13em;font-weight:800;color:#8a96a8}
.ndx-attendance-page .ndx-attn-head h1{font-size:26px;line-height:1.2;margin:7px 0 5px;letter-spacing:-.6px}
.ndx-attendance-page .ndx-attn-head p{max-width:680px;line-height:1.55;font-size:11px;color:var(--att-muted)}
.ndx-attendance-page .ndx-attn-actions{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap}
.ndx-attendance-page .ndx-attn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:10px;text-decoration:none;font-size:10px;font-weight:800;transition:.18s ease;cursor:pointer}
.ndx-attendance-page .ndx-attn-btn-primary{background:var(--att-blue);color:#fff;box-shadow:0 5px 14px rgba(23,102,200,.18)}
.ndx-attendance-page .ndx-attn-btn-primary:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(23,102,200,.25)}
.ndx-attendance-page .ndx-attn-btn-light{background:#fff;color:#40536d;border:1px solid #dfe6f0}
.ndx-attendance-page .ndx-attn-btn-light:hover{border-color:#b8cbe4;background:#f8fbff}
.ndx-attendance-page .ndx-attn-filters{display:grid!important;grid-template-columns:repeat(5,minmax(130px,1fr)) auto;gap:10px;margin:14px 0;padding:15px;border:1px solid var(--att-border);border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(20,45,80,.04)}
.ndx-attendance-page .ndx-attn-filters label{min-width:0}
.ndx-attendance-page .ndx-attn-filters input,.ndx-attendance-page .ndx-attn-filters select{width:100%;min-width:0;height:42px;border:1px solid #dbe3ee;border-radius:10px;background:#fbfcfe;font-size:11px}
.ndx-attendance-page .ndx-attn-filters input:hover,.ndx-attendance-page .ndx-attn-filters select:hover{border-color:#bdcde2}
.ndx-attendance-page .ndx-attn-filters button{align-self:end;white-space:nowrap}
.ndx-attendance-page .ndx-attn-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.ndx-attendance-page .ndx-attn-kpi{position:relative;min-height:108px;padding:17px 18px;border:1px solid var(--att-border);border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(20,45,80,.045);overflow:hidden}
.ndx-attendance-page .ndx-attn-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#1766c8}
.ndx-attendance-page .ndx-attn-kpi-danger:before{background:#d14343}
.ndx-attendance-page .ndx-attn-kpi small{font-size:9px;letter-spacing:.02em;color:#748198;font-weight:700}
.ndx-attendance-page .ndx-attn-kpi strong{display:block;margin-top:7px;font-size:24px;letter-spacing:-.5px}
.ndx-attendance-page .ndx-attn-kpi strong span{font-size:9px;color:#7b8799;letter-spacing:0;font-weight:600}
.ndx-attendance-page .ndx-attn-kpi label{display:block;margin-top:5px;font-size:8px;color:#98a2b2}
.ndx-attendance-page .ndx-attn-kpi>b{position:absolute;right:15px;top:16px;width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#eef4ff;color:var(--att-blue);font-size:13px}
.ndx-attendance-page .ndx-attn-panel{border:1px solid var(--att-border);background:#fff;box-shadow:0 5px 20px rgba(20,45,80,.045)}
.ndx-attendance-page .ndx-attn-panel-head{padding:16px 18px;border-bottom:1px solid #edf1f6}
.ndx-attendance-page .ndx-attn-panel-head h2{font-size:14px;line-height:1.3;margin:0;color:var(--att-ink)}
.ndx-attendance-page .ndx-attn-panel-head p{font-size:9px;line-height:1.45;margin:4px 0 0;color:#7b8799}
.ndx-attendance-page .ndx-attn-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.ndx-attendance-page .ndx-attn-table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px}
.ndx-attendance-page .ndx-attn-table th{padding:11px 13px;border-bottom:1px solid #e9eef5;background:#f8fafc;white-space:nowrap}
.ndx-attendance-page .ndx-attn-table td{padding:12px 13px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.ndx-attendance-page .ndx-attn-table tbody tr:last-child td{border-bottom:0}
.ndx-attendance-page .ndx-attn-table tbody tr:hover{background:#f8fbff}
.ndx-attendance-page .ndx-attn-status{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:4px 9px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}
.ndx-attendance-page .ndx-attn-status.ok:before{content:"●"}.ndx-attendance-page .ndx-attn-status.warning:before{content:"●"}.ndx-attendance-page .ndx-attn-status.danger:before{content:"●"}.ndx-attendance-page .ndx-attn-status.neutral:before{content:"○"}
.ndx-attendance-page .ndx-attn-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid #edf1f6;font-size:9px;color:#7a8799}
.ndx-attendance-page .ndx-attn-foot a{font-weight:800;color:var(--att-blue);text-decoration:none}
.ndx-attendance-page .ndx-attn-row.ndx-status-absent{background:#fff5f5}.ndx-attendance-page .ndx-attn-row.ndx-status-late{background:#fffaf0}.ndx-attendance-page .ndx-attn-row.ndx-status-leave{background:#f5f8ff}
.ndx-attendance-page .cal-cell{transition:transform .15s,box-shadow .15s}.ndx-attendance-page .cal-cell:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(20,45,80,.08)}
.ndx-attendance-page .cal-cell.unmarked{background:#f8fafc!important}.ndx-attendance-page .cal-cell.upcoming{background:#fafbfc!important}
.ndx-attendance-page .ndx-emp-attn-calendar{border-radius:15px}.ndx-attendance-page .ndx-emp-calendar-legend{align-items:center}
.ndx-attendance-page .ndx-emp-calendar-legend span{display:inline-flex;align-items:center;gap:4px}
.ndx-attendance-page .ndx-emp-calendar-grid .dow{font-size:8px;letter-spacing:.05em}
.ndx-attendance-page .ndx-timesheet-grid{gap:14px}
.ndx-attendance-page .ndx-timesheet-table td small{line-height:1.4}

/* Compact mobile experience: filters become cards and tables remain horizontally usable */
@media(max-width:1100px){
 .ndx-attendance-page .ndx-attn-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
 .ndx-attendance-page .ndx-attn-filters button{width:100%}
 .ndx-attendance-page .ndx-attn-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .ndx-attendance-page{padding-bottom:18px}
 .ndx-attendance-page .ndx-attn-head{align-items:flex-start;flex-direction:column;padding:19px 17px;border-radius:14px}
 .ndx-attendance-page .ndx-attn-head h1{font-size:21px}
 .ndx-attendance-page .ndx-attn-head p{font-size:10px}
 .ndx-attendance-page .ndx-attn-actions{width:100%}
 .ndx-attendance-page .ndx-attn-actions .ndx-attn-btn{flex:1;min-width:0}
 .ndx-attendance-page .ndx-attn-filters{grid-template-columns:1fr!important;padding:12px;border-radius:13px}
 .ndx-attendance-page .ndx-attn-filters label{width:100%}
 .ndx-attendance-page .ndx-attn-filters button{width:100%;height:42px}
 .ndx-attendance-page .ndx-attn-kpis{grid-template-columns:1fr 1fr;gap:9px}
 .ndx-attendance-page .ndx-attn-kpi{min-height:98px;padding:14px}
 .ndx-attendance-page .ndx-attn-kpi strong{font-size:21px}
 .ndx-attendance-page .ndx-attn-kpi>b{right:11px;top:11px;width:27px;height:27px;font-size:11px}
 .ndx-attendance-page .ndx-attn-panel-head{padding:14px}
 .ndx-attendance-page .ndx-attn-foot{align-items:flex-start;flex-direction:column}
 .ndx-attendance-page .ndx-attn-table-wrap{margin:0}
 .ndx-attendance-page .ndx-attn-table{min-width:760px}
 .ndx-attendance-page .ndx-emp-attn-head{padding:15px;border-radius:14px}
 .ndx-attendance-page .ndx-emp-attn-head-meta{width:100%;display:grid;grid-template-columns:1fr 1fr}
 .ndx-attendance-page .ndx-live-clock{grid-column:1/-1;text-align:center}
 .ndx-attendance-page .ndx-emp-calendar-grid{min-width:0;gap:3px}
 .ndx-attendance-page .cal-cell{min-height:52px;padding:5px;border-radius:7px}
 .ndx-attendance-page .cal-cell strong{margin-top:5px;font-size:8px}
 .ndx-attendance-page .cal-cell small{font-size:6px}
 .ndx-attendance-page .ndx-emp-attn-calendar{padding:12px;overflow:hidden}
 .ndx-attendance-page .ndx-emp-calendar-legend{gap:8px;padding:8px;overflow-x:auto;flex-wrap:nowrap}
 .ndx-attendance-page .ndx-emp-calendar-legend span{white-space:nowrap}
}
@media(max-width:430px){
 .ndx-attendance-page .ndx-attn-kpis{grid-template-columns:1fr}
 .ndx-attendance-page .ndx-attn-kpi{min-height:86px}
 .ndx-attendance-page .ndx-emp-calendar-grid .dow{font-size:7px}
 .ndx-attendance-page .cal-cell{min-height:46px;padding:4px}
 .ndx-attendance-page .cal-cell b{font-size:8px}
 .ndx-attendance-page .cal-cell strong{font-size:7px}
 .ndx-attendance-page .cal-cell small{display:none}
}

/* Compact Registration ID cells in Leads & Clients tables. */
.ndx-table .ndx-lead-registration-id {
	display: inline-block;
	max-width: 220px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
.ndx-emp-shell .ndx-table .ndx-lead-registration-id {
	max-width: 180px;
}
@media (max-width: 900px) {
	.ndx-table .ndx-lead-registration-id,
	.ndx-emp-shell .ndx-table .ndx-lead-registration-id { max-width: 150px; }
}

/* Lead List document access: keep the table compact and show files on demand. */
.ndx-btn-documents{background:#635bdb!important;color:#fff!important;border:1px solid #635bdb!important;font-weight:700;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.ndx-btn-documents:hover{background:#5148c7!important;border-color:#5148c7!important;color:#fff!important}
.ndx-doc-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.2);font-size:11px;line-height:18px}
.ndx-no-docs{display:inline-flex;align-items:center;padding:6px 9px;border-radius:7px;background:#f2f4f7;color:#98a2b3;font-size:12px;font-weight:600}
.ndx-doc-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.ndx-doc-modal[hidden]{display:none!important}
.ndx-doc-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}
.ndx-doc-modal-dialog{position:relative;width:min(760px,100%);max-height:min(82vh,760px);overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.28);display:flex;flex-direction:column}
.ndx-doc-modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid #eaecf0;background:#f8f9fc}
.ndx-doc-modal-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}.ndx-doc-modal-head strong{font-size:16px;color:#101828}.ndx-doc-modal-head span{font-size:12px;color:#667085}
.ndx-doc-modal-close{width:34px;height:34px;border:1px solid #d0d5dd;background:#fff;border-radius:9px;color:#344054;font-size:22px;line-height:1;cursor:pointer}.ndx-doc-modal-close:hover{background:#f2f4f7}
.ndx-doc-modal-list{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.ndx-doc-modal-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid #e4e7ec;border-radius:11px;background:#fff}.ndx-doc-modal-item:hover{background:#fafbff;border-color:#cfd4dc}
.ndx-doc-modal-info{min-width:0;display:flex;flex-direction:column;gap:4px}.ndx-doc-modal-info strong{color:#101828;font-size:13px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}.ndx-doc-modal-info span{font-size:11px;color:#667085}
.ndx-doc-modal-actions{display:flex;gap:7px;flex:0 0 auto}.ndx-doc-modal-actions .ndx-btn{white-space:nowrap}.ndx-table .ndx-actions{min-width:190px}
.ndx-doc-modal-open{overflow:hidden}
@media(max-width:800px){.ndx-doc-modal{padding:12px}.ndx-doc-modal-dialog{max-height:88vh}.ndx-doc-modal-item{align-items:stretch;flex-direction:column}.ndx-doc-modal-actions{width:100%}.ndx-doc-modal-actions .ndx-btn{flex:1;justify-content:center}}

/* === v1.63.21: easier horizontal navigation for wide list tables === */
.ndx-app .ndx-table-wrap { position: relative; scrollbar-width: thin; scroll-behavior: auto; overscroll-behavior-x: contain; cursor: grab; }
.ndx-app .ndx-table-wrap.is-ndx-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.ndx-app .ndx-table-wrap.is-ndx-dragging a, .ndx-app .ndx-table-wrap.is-ndx-dragging button { pointer-events: none; }
.ndx-app .ndx-table-wrap::-webkit-scrollbar { height: 12px; }
.ndx-app .ndx-table-wrap::-webkit-scrollbar-thumb { background: #b9b2e6; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.ndx-app .ndx-table-wrap::-webkit-scrollbar-thumb:hover { background: #7c6cf0; background-clip: content-box; }
.ndx-app .ndx-table-wrap::-webkit-scrollbar-track { background: #f1f0f7; border-radius: 999px; }

/* Sticky header row so column names stay visible while scrolling down */
.ndx-app .ndx-table-wrap > table > thead th { position: sticky; top: 0; z-index: 5; }

/* Keep SL + Action columns pinned so rows stay identifiable and actions always reachable */
.ndx-app .ndx-table-wrap > table.ndx-table-plain > thead > tr > th:first-child,
.ndx-app .ndx-table-wrap > table.ndx-table-plain > tbody > tr > td:first-child {
	position: sticky; left: 0; z-index: 4; background: #fff;
	box-shadow: 1px 0 0 rgba(0,0,0,.06);
}
.ndx-app .ndx-table-wrap > table.ndx-table-plain > thead > tr > th:last-child,
.ndx-app .ndx-table-wrap > table.ndx-table-plain > tbody > tr > td:last-child {
	position: sticky; right: 0; z-index: 4; background: #fff;
	box-shadow: -1px 0 0 rgba(0,0,0,.06);
}
.ndx-app .ndx-table-wrap > table.ndx-table-plain > thead > tr > th:first-child,
.ndx-app .ndx-table-wrap > table.ndx-table-plain > thead > tr > th:last-child { z-index: 6; }
.ndx-app .ndx-table-wrap > table.ndx-table-plain > tbody > tr:hover > td:first-child,
.ndx-app .ndx-table-wrap > table.ndx-table-plain > tbody > tr:hover > td:last-child { background: #faf9ff; }
.ndx-app .ndx-table-wrap > table.ndx-table-plain > tbody > tr > td.ndx-empty { position: static; box-shadow: none; }

/* Edge fades hinting that more columns exist */
.ndx-app .ndx-table-wrap.ndx-scroll-right::after,
.ndx-app .ndx-table-wrap.ndx-scroll-left::before {
	content: ""; position: sticky; top: 0; display: block; width: 26px; height: 0;
}
.ndx-scroll-hint { display: flex; align-items: center; gap: 6px; margin: 10px 0 -6px; font-size: 12px; color: #6b6b7b; }
@media (max-width: 782px) { .ndx-scroll-hint { display: none; } }

/* === v1.63.22: pagination bar + ajax loading state === */
.ndx-pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; }
.ndx-pagination-info { font-size: 13px; color: var(--ndx-muted, #6b7280); }
.ndx-pagination { padding-top: 0 !important; }
.ndx-pagination .ndx-page-nav { padding: 0 12px !important; font-weight: 600; }
.ndx-pagination a.is-disabled { opacity: .45; pointer-events: none; }
.ndx-pagination .ndx-page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: #9aa1b2; }
#ndx-list-ajax { position: relative; transition: opacity .15s ease; }
#ndx-list-ajax.ndx-ajax-busy { opacity: .45; pointer-events: none; }
#ndx-list-ajax.ndx-ajax-busy::after { content: ''; position: absolute; top: 40%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid #d7dbe7; border-top-color: #6d5ce7; border-radius: 50%; animation: ndx-spin .7s linear infinite; }
@keyframes ndx-spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------
   Collect Payment (partial payment against an existing invoice)
   -------------------------------------------------------------- */
.ndx-collect { position: relative; display: inline-block; }
.ndx-collect > summary { list-style: none; cursor: pointer; }
.ndx-collect > summary::-webkit-details-marker { display: none; }
.ndx-collect-form {
	position: absolute;
	z-index: 40;
	right: 0;
	margin-top: 6px;
	width: 260px;
	padding: 14px;
	border: 1px solid #e3e8ef;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
	text-align: left;
}
.ndx-collect-form .ndx-collect-due { margin: 0 0 8px; font-size: 12px; color: #475467; }
.ndx-collect-form label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #344054; }
.ndx-collect-form input,
.ndx-collect-form select {
	width: 100%;
	margin-top: 4px;
	padding: 7px 9px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 400;
}
.ndx-collect-form button { width: 100%; margin-top: 4px; }
.ndx-collect-form small { display: block; margin-top: 8px; font-size: 11px; line-height: 1.4; color: #667085; }

/* Recycle Bin for deleted invoices */
.ndx-trash-card { margin-top: 18px; }
.ndx-trash > summary { cursor: pointer; font-weight: 700; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.ndx-trash > summary::-webkit-details-marker { display: none; }
.ndx-trash > summary::before { content: "\25B8"; transition: transform .15s ease; }
.ndx-trash[open] > summary::before { transform: rotate(90deg); }
.ndx-trash-count { background: #eef1f5; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.ndx-trash .ndx-table-wrap { margin-top: 10px; }

/* Invoice data check row inside the Recycle Bin card */
.ndx-repair-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ndx-border, #e6e8ec); }
.ndx-repair-row p { margin: 4px 0 0; max-width: 620px; font-size: 12.5px; }


/* Employee invoice parity with Admin invoice form — v1.64.1 */
.ndx-employee-invoice-form{max-width:1180px;margin:0 auto}.ndx-employee-invoice-form .ndx-form-section{border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.03)}.ndx-employee-invoice-form .ndx-section-title{justify-content:flex-start;text-align:left}.ndx-employee-invoice-form .ndx-section-title::before{display:none}.ndx-employee-invoice-form .ndx-section-title::after{margin-left:10px}.ndx-employee-invoice-form .ndx-field input,.ndx-employee-invoice-form .ndx-field select,.ndx-employee-invoice-form .ndx-field textarea{min-height:42px}.ndx-employee-invoice-form .ndx-creator-readonly,.ndx-invoice-status-readonly{min-height:42px;border:1px solid var(--ndx-border);border-radius:8px;background:#f2f5f9;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.ndx-employee-invoice-form .ndx-creator-readonly strong{color:var(--ndx-text);font-size:13px}.ndx-employee-invoice-form .ndx-creator-readonly span,.ndx-invoice-status-readonly small{color:var(--ndx-muted);font-size:11px}.ndx-employee-invoice-form .ndx-emp-service-rows{display:grid;gap:10px}.ndx-employee-invoice-form .ndx-emp-service-row{margin:0;padding:12px;border:1px solid var(--ndx-border);border-radius:8px;background:#f8fafc}.ndx-employee-invoice-form .ndx-invoice-summary{width:100%}.ndx-app.ndx-dark .ndx-employee-invoice-form .ndx-creator-readonly,.ndx-app.ndx-dark .ndx-invoice-status-readonly,.ndx-app.ndx-dark .ndx-employee-invoice-form .ndx-emp-service-row{background:#20233c;border-color:#2c2f4a}@media(max-width:900px){.ndx-employee-invoice-form .ndx-emp-service-row{grid-template-columns:minmax(0,1fr) 90px minmax(130px,.6fr)}.ndx-employee-invoice-form .ndx-service-remove-field{grid-column:1/-1}}@media(max-width:600px){.ndx-employee-invoice-form .ndx-form-section{padding:15px 12px}.ndx-employee-invoice-form .ndx-emp-service-row{grid-template-columns:1fr}.ndx-employee-invoice-form .ndx-service-remove-field{grid-column:auto}.ndx-employee-invoice-form .ndx-creator-readonly,.ndx-invoice-status-readonly{align-items:flex-start;flex-direction:column}.ndx-employee-invoice-form .ndx-invoice-summary{max-width:none}}

/* Quick Assign Agent Table Badges & Action Buttons — v1.65.0 */
.ndx-agent-cell-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
}
.ndx-agent-badge {
	background: #eff6ff !important;
	color: #0369a1 !important;
	border: 1px solid #bae6fd !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ndx-agent-badge .ndx-badge-icon {
	font-size: 13px;
	line-height: 1;
}
.ndx-agent-badge strong.ndx-agent-name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}
.ndx-agent-quick-change-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	color: #64748b;
	font-size: 12px;
	cursor: pointer;
	padding: 0;
	transition: all 0.15s ease;
	line-height: 1;
}
.ndx-agent-quick-change-btn:hover {
	background: #0284c7;
	border-color: #0284c7;
	color: #ffffff;
	transform: scale(1.08);
}
.ndx-assign-agent-btn {
	border: 1px dashed #94a3b8 !important;
	background: #f8fafc !important;
	color: #475467 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	padding: 3px 9px !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	white-space: nowrap !important;
}
.ndx-assign-agent-btn:hover {
	background: #6366f1 !important;
	border-color: #6366f1 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

/* Quick Assign Agent Modal */
.ndx-quick-assign-modal .ndx-modal-dialog {
	max-width: 540px;
}
.ndx-qa-invoice-tag {
	display: inline-block;
	background: #e0e7ff;
	color: #3730a3;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	margin-right: 4px;
}
.ndx-qa-client-name {
	font-weight: 600;
	color: #1e293b;
}
.ndx-qa-tabs {
	display: flex;
	border-bottom: 2px solid #e2e8f0;
	margin-bottom: 16px;
	gap: 4px;
}
.ndx-qa-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	margin-bottom: -2px;
	transition: all 0.15s ease;
	border-radius: 6px 6px 0 0;
}
.ndx-qa-tab:hover {
	color: #1e293b;
	background: #f8fafc;
}
.ndx-qa-tab.is-active {
	color: #4f46e5;
	border-bottom-color: #4f46e5;
	background: #f5f3ff;
}
.ndx-qa-tab-content {
	display: block;
}
.ndx-qa-tab-content[hidden] {
	display: none !important;
}
.ndx-qa-agent-select {
	width: 100%;
	min-height: 42px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	padding: 8px 12px;
}
.ndx-qa-none-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}
.ndx-qa-none-icon {
	font-size: 24px;
	line-height: 1;
}
.ndx-qa-none-notice strong {
	display: block;
	font-size: 13.5px;
	color: #1e293b;
	margin-bottom: 2px;
}
.ndx-qa-none-notice p {
	margin: 0;
	font-size: 12px;
	color: #64748b;
	line-height: 1.4;
}

/* ==========================================================================
   v1.66.0 — Add / Edit Invoice: simple, clean step-based UI
   ========================================================================== */
.ndx-invoice-split-layout {
	--inv-primary: #2563eb; --inv-primary-dark: #1d4ed8; --inv-primary-soft: #eff6ff;
	--inv-ink: #0f172a; --inv-muted: #64748b; --inv-line: #e2e8f0; --inv-bg: #f8fafc;
	--inv-ok: #059669; --inv-warn: #d97706; --inv-bad: #dc2626;
	display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start;
	counter-reset: invstep; font-size: 14px; color: var(--inv-ink);
}
.ndx-invoice-split-layout .ndx-invoice-fields-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ndx-invoice-split-layout .ndx-invoice-amounts-column { position: sticky; top: 46px; }

/* Header banner */
.ndx-invoice-split-layout .ndx-invoice-main-header {
	background: #fff; color: var(--inv-ink); border: 1px solid var(--inv-line); border-radius: 12px; padding: 18px 22px; box-shadow: none;
}
.ndx-invoice-split-layout .ndx-invoice-main-title { color: var(--inv-ink); font-size: 19px; font-weight: 700; margin: 10px 0 4px; letter-spacing: -.01em; }
.ndx-invoice-split-layout .ndx-invoice-main-sub { color: var(--inv-muted); margin: 0; font-size: 13px; }
.ndx-invoice-split-layout .ndx-invoice-header-badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ndx-invoice-split-layout .ndx-invoice-type-badge,
.ndx-invoice-split-layout .ndx-invoice-meta-chip {
	background: var(--inv-bg); color: var(--inv-muted); border: 1px solid var(--inv-line);
	border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.ndx-invoice-split-layout .ndx-invoice-no-highlight { color: var(--inv-primary); }

/* Step cards */
.ndx-invoice-split-layout .ndx-invoice-section {
	counter-increment: invstep; position: relative; background: #fff; border: 1px solid var(--inv-line);
	border-radius: 12px; padding: 20px 22px; margin: 0; box-shadow: none;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.ndx-invoice-split-layout .ndx-invoice-section:focus-within { border-color: #bfdbfe; box-shadow: none; }
.ndx-invoice-split-layout .ndx-section-header-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--inv-line);
}
.ndx-invoice-split-layout .ndx-section-title { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; }
.ndx-invoice-split-layout .ndx-section-title strong { display: block; font-size: 15px; font-weight: 700; color: var(--inv-ink); letter-spacing: -.005em; text-transform: none; }
.ndx-invoice-split-layout .ndx-section-sub { display: block; font-size: 12px; color: var(--inv-muted); margin-top: 2px; text-transform: none; letter-spacing: 0; }
.ndx-invoice-split-layout .ndx-section-icon {
	position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
	background: var(--inv-bg); font-size: 17px; border: 1px solid var(--inv-line);
}
.ndx-invoice-split-layout .ndx-section-icon::after {
	content: counter(invstep); position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--inv-primary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center;
	box-shadow: 0 0 0 3px #fff;
}

/* Fields */
.ndx-invoice-split-layout .ndx-form-grid-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ndx-invoice-split-layout .ndx-field { margin: 0; min-width: 0; }
.ndx-invoice-split-layout .ndx-field-wide { grid-column: 1 / -1; }
.ndx-invoice-split-layout .ndx-field > label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.ndx-invoice-split-layout .ndx-field label em { color: var(--inv-bad); font-style: normal; margin-right: 2px; }
.ndx-invoice-split-layout input[type="text"], .ndx-invoice-split-layout input[type="email"], .ndx-invoice-split-layout input[type="number"],
.ndx-invoice-split-layout input[type="date"], .ndx-invoice-split-layout select, .ndx-invoice-split-layout textarea {
	width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
	font-size: 14px; color: var(--inv-ink); box-shadow: 0 1px 1px rgba(15,23,42,.03); transition: border-color .15s, box-shadow .15s; max-width: none;
}
.ndx-invoice-split-layout input::placeholder, .ndx-invoice-split-layout textarea::placeholder { color: #94a3b8; }
.ndx-invoice-split-layout input:focus, .ndx-invoice-split-layout select:focus, .ndx-invoice-split-layout textarea:focus {
	outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.ndx-invoice-split-layout .ndx-hint, .ndx-invoice-split-layout .ndx-field-hint { color: var(--inv-muted); font-size: 12px; font-weight: 400; }
.ndx-invoice-split-layout .ndx-creator-readonly {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 9px 12px;
	background: var(--inv-bg); border: 1px solid var(--inv-line); border-radius: 10px; font-size: 13px;
}
.ndx-invoice-split-layout .ndx-creator-readonly span { color: var(--inv-muted); font-size: 11px; background: #fff; border: 1px solid var(--inv-line); padding: 2px 8px; border-radius: 999px; }
.ndx-invoice-split-layout .ndx-checkbox-card {
	display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--inv-line);
	border-radius: 12px; background: var(--inv-bg); cursor: pointer; transition: border-color .15s, background .15s;
}
.ndx-invoice-split-layout .ndx-checkbox-card:hover { border-color: #bfdbfe; background: var(--inv-primary-soft); }
.ndx-invoice-split-layout .ndx-checkbox-card input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--inv-primary); }

/* Buttons */
.ndx-invoice-split-layout .ndx-btn, #ndx-agent-modal .ndx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 16px;
	border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1; border: 1px solid transparent; cursor: pointer;
	background: var(--inv-primary, #2563eb); color: #fff !important; box-shadow: none;
	transition: background .15s, transform .05s, box-shadow .15s, border-color .15s; opacity: 1;
}
.ndx-invoice-split-layout .ndx-btn:hover, #ndx-agent-modal .ndx-btn:hover { background: var(--inv-primary-dark, #1d4ed8); box-shadow: none; }
.ndx-invoice-split-layout .ndx-btn:active, #ndx-agent-modal .ndx-btn:active { transform: translateY(1px); }
.ndx-invoice-split-layout .ndx-btn:disabled, #ndx-agent-modal .ndx-btn:disabled { opacity: .55; cursor: not-allowed; }
.ndx-invoice-split-layout .ndx-btn-sm { min-height: 34px; padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }
.ndx-invoice-split-layout .ndx-btn-ghost, #ndx-agent-modal .ndx-btn-ghost { background: #fff; color: #334155 !important; border-color: #cbd5e1; box-shadow: none; }
.ndx-invoice-split-layout .ndx-btn-ghost:hover, #ndx-agent-modal .ndx-btn-ghost:hover { background: var(--inv-bg, #f8fafc); border-color: #94a3b8; box-shadow: none; }
.ndx-invoice-split-layout .ndx-btn-danger { background: #fef2f2; color: var(--inv-bad) !important; border-color: #fecaca; box-shadow: none; }
.ndx-invoice-split-layout .ndx-btn-danger:hover { background: var(--inv-bad); color: #fff !important; }
.ndx-invoice-split-layout .ndx-btn-block { width: 100%; }
.ndx-invoice-split-layout .ndx-create-agent-btn { background: var(--inv-primary-soft); color: var(--inv-primary) !important; border-color: #bfdbfe; box-shadow: none; }
.ndx-invoice-split-layout .ndx-create-agent-btn:hover { background: var(--inv-primary); color: #fff !important; }
.ndx-invoice-split-layout .ndx-btn-icon { font-size: 16px; line-height: 1; font-weight: 700; }

/* Agent picker */
.ndx-invoice-split-layout .ndx-agent-picker-field { padding: 16px; background: var(--inv-bg); border: 1px solid var(--inv-line); border-radius: 14px; }
.ndx-invoice-split-layout .ndx-agent-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ndx-invoice-split-layout .ndx-agent-header-row label { margin: 0; }
.ndx-invoice-split-layout .ndx-agent-picker-row { display: flex; flex-direction: column; gap: 8px; }
.ndx-invoice-split-layout .ndx-agent-select { font-weight: 600; }
.ndx-invoice-split-layout .ndx-agent-ledger-container { margin-top: 14px; background: #fff; border: 1px solid var(--inv-line); border-radius: 12px; padding: 14px; }

/* Services table */
.ndx-invoice-split-layout .ndx-item-count-badge { background: var(--inv-primary-soft); color: var(--inv-primary); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ndx-invoice-split-layout .ndx-service-editor { border: 1px solid var(--inv-line); border-radius: 12px; overflow: hidden; }
.ndx-invoice-split-layout .ndx-service-table-head,
.ndx-invoice-split-layout .ndx-service-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px 140px 44px; gap: 12px; align-items: center; }
.ndx-invoice-split-layout .ndx-service-table-head { background: var(--inv-bg); padding: 10px 14px; border-bottom: 1px solid var(--inv-line); }
.ndx-invoice-split-layout .ndx-th { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--inv-muted); }
.ndx-invoice-split-layout .ndx-th-total { text-align: right; }
.ndx-invoice-split-layout .ndx-service-row { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; margin: 0; background: #fff; }
.ndx-invoice-split-layout .ndx-service-row:hover { background: #fcfdff; }
.ndx-invoice-split-layout .ndx-mobile-label { display: none; }
.ndx-invoice-split-layout .ndx-input-currency-wrapper { position: relative; }
.ndx-invoice-split-layout .ndx-currency-prefix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--inv-muted); font-weight: 600; pointer-events: none; }
.ndx-invoice-split-layout .ndx-input-currency-wrapper input { padding-left: 26px; }
.ndx-invoice-split-layout .ndx-service-line-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14.5px; color: var(--inv-ink); }
.ndx-invoice-split-layout .ndx-btn-icon-danger {
	width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; border: 1px solid #fecaca;
	background: #fef2f2; color: var(--inv-bad); cursor: pointer; transition: background .15s, color .15s;
}
.ndx-invoice-split-layout .ndx-btn-icon-danger:hover { background: var(--inv-bad); color: #fff; }
.ndx-invoice-split-layout .ndx-service-add-bar { padding: 14px 18px; background: var(--inv-surface); border-top: 1px solid var(--inv-line); }
.ndx-invoice-split-layout .ndx-service-add-btn {
	width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: #f8faff !important;
	color: #4f46e5 !important;
	border: 1.5px dashed #818cf8 !important;
	box-shadow: none !important;
	min-height: 44px !important;
	border-radius: 10px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}
.ndx-invoice-split-layout .ndx-service-add-btn:hover {
	background: #eef2ff !important;
	border-color: #4f46e5 !important;
	color: #4338ca !important;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15) !important;
	transform: translateY(-1px) !important;
}
.ndx-invoice-split-layout .ndx-service-add-btn .ndx-btn-icon,
.ndx-invoice-split-layout .ndx-service-add-btn .ndx-add-icon {
	color: #4f46e5 !important;
}
.ndx-invoice-split-layout .ndx-service-add-btn:hover .ndx-btn-icon,
.ndx-invoice-split-layout .ndx-service-add-btn:hover .ndx-add-icon {
	color: #4338ca !important;
}

/* Summary sidebar */
.ndx-invoice-split-layout .ndx-invoice-sticky-amounts-card {
	background: #fff; border: 1px solid var(--inv-line); border-radius: 18px; padding: 20px;
	box-shadow: none; display: flex; flex-direction: column; gap: 14px;
}
.ndx-invoice-split-layout .ndx-inv-sidebar-divider, .ndx-invoice-split-layout .ndx-inv-receipt-divider { height: 1px; background: var(--inv-line); border: 0; margin: 2px 0; }
.ndx-invoice-split-layout .ndx-inv-type-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--inv-primary); background: var(--inv-primary-soft); padding: 4px 10px; border-radius: 999px; }
.ndx-invoice-split-layout .ndx-inv-sidebar-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ndx-invoice-split-layout .ndx-inv-sidebar-label { font-size: 11px; font-weight: 600; color: var(--inv-muted); text-transform: uppercase; letter-spacing: .05em; }
.ndx-invoice-split-layout .ndx-inv-sidebar-no { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ndx-invoice-split-layout .ndx-inv-receipt-card { background: var(--inv-bg); border: 1px solid var(--inv-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ndx-invoice-split-layout .ndx-inv-receipt-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ndx-invoice-split-layout .ndx-inv-receipt-line.is-input-line { flex-direction: column; align-items: stretch; gap: 6px; }
.ndx-invoice-split-layout .ndx-receipt-label { font-size: 12.5px; font-weight: 600; color: #334155; }
.ndx-invoice-split-layout .ndx-receipt-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.ndx-invoice-split-layout .ndx-currency-input-wrap { position: relative; }
.ndx-invoice-split-layout .ndx-currency-badge { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 36px; display: grid; place-items: center; background: #f1f5f9; border-right: 1px solid #cbd5e1; border-radius: 9px 0 0 9px; color: var(--inv-muted); font-weight: 700; }
.ndx-invoice-split-layout .ndx-currency-input-wrap input { padding-left: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ndx-invoice-split-layout .is-grand-total { padding: 12px 0 0; background: none; border-top: 1px solid var(--inv-line); }
.ndx-invoice-split-layout .is-grand-total * { color: var(--inv-ink); }
.ndx-invoice-split-layout .ndx-grand-total-amount { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ndx-invoice-split-layout .ndx-hero-due-card { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--inv-line); }
.ndx-invoice-split-layout .ndx-hero-due-card.is-paid { background: #ecfdf5; border-color: #a7f3d0; color: var(--inv-ok); }
.ndx-invoice-split-layout .ndx-hero-due-card.is-partial { background: #fffbeb; border-color: #fde68a; color: var(--inv-warn); }
.ndx-invoice-split-layout .ndx-hero-due-card.is-unpaid, .ndx-invoice-split-layout .ndx-hero-due-card.is-due { background: #fef2f2; border-color: #fecaca; color: var(--inv-bad); }
.ndx-invoice-split-layout .ndx-inv-submit-btn { min-height: 48px; font-size: 15px; border-radius: 12px; }
.ndx-invoice-split-layout .ndx-inv-cancel-btn { min-height: 42px; }

/* Agent modal */
#ndx-agent-modal .ndx-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
#ndx-agent-modal .ndx-field-wide { grid-column: 1 / -1; }
#ndx-agent-modal .ndx-field label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; }
#ndx-agent-modal .ndx-field label em { color: #dc2626; font-style: normal; }
#ndx-agent-modal input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; }
#ndx-agent-modal input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
#ndx-agent-modal .ndx-modal-footer { display: flex; justify-content: flex-end; gap: 10px; }

/* Responsive */
@media (max-width: 1200px) {
	.ndx-invoice-split-layout { grid-template-columns: minmax(0, 1fr) 320px; }
	.ndx-invoice-split-layout .ndx-service-table-head, .ndx-invoice-split-layout .ndx-service-row { grid-template-columns: minmax(0, 1fr) 80px 130px 110px 40px; }
}
@media (max-width: 1024px) {
	.ndx-invoice-split-layout { grid-template-columns: 1fr; }
	.ndx-invoice-split-layout .ndx-invoice-amounts-column { position: static; }
}
@media (max-width: 720px) {
	.ndx-invoice-split-layout .ndx-form-grid-2col, #ndx-agent-modal .ndx-modal-grid { grid-template-columns: 1fr; }
	.ndx-invoice-split-layout .ndx-invoice-section { padding: 18px 16px; }
	.ndx-invoice-split-layout .ndx-service-table-head { display: none; }
	.ndx-invoice-split-layout .ndx-service-row { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ndx-invoice-split-layout .ndx-col-desc { grid-column: 1 / -1; }
	.ndx-invoice-split-layout .ndx-mobile-label { display: block; font-size: 11px; font-weight: 600; color: var(--inv-muted); margin-bottom: 4px; }
	.ndx-invoice-split-layout .ndx-service-line-total { text-align: left; }
}

/* Client blocks (multiple clients) */
.ndx-invoice-split-layout .ndx-client-block {
	padding: 18px 20px;
	border: 1.5px solid var(--inv-line);
	border-radius: 14px;
	background: var(--inv-surface);
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ndx-invoice-split-layout .ndx-client-block:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.ndx-invoice-split-layout .ndx-client-block-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 14px;
	color: var(--inv-ink);
}
.ndx-invoice-split-layout .ndx-client-block-title > span:not([data-client-no]) {
	font-size: 11px;
	font-weight: 700;
	color: #1d4ed8 !important;
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	padding: 2.5px 9px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
}
.ndx-invoice-split-layout .ndx-client-block-title [data-remove-client] {
	margin-left: auto;
	background: #fee2e2 !important;
	border: 1px solid #fca5a5 !important;
	color: #b91c1c !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 5px 12px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}
.ndx-invoice-split-layout .ndx-client-block-title [data-remove-client]:hover {
	background: #dc2626 !important;
	border-color: #b91c1c !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}
.ndx-invoice-split-layout [data-add-client],
.ndx-btn-add-client {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 46px !important;
	padding: 11px 22px !important;
	border-radius: 12px !important;
	background: #4f46e5 !important;
	border: 1.5px solid #4338ca !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}
.ndx-invoice-split-layout [data-add-client]:hover,
.ndx-btn-add-client:hover {
	background: #4338ca !important;
	border-color: #3730a3 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(67, 56, 202, 0.4) !important;
	transform: translateY(-1px) !important;
}
.ndx-invoice-split-layout [data-add-client] .ndx-btn-icon,
.ndx-invoice-split-layout [data-add-client] .ndx-add-icon,
.ndx-btn-add-client .ndx-btn-icon,
.ndx-btn-add-client .ndx-add-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}
.ndx-app.ndx-dark .ndx-invoice-split-layout [data-add-client],
.ndx-app.ndx-dark .ndx-btn-add-client {
	background: #6366f1 !important;
	border-color: #4f46e5 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}
.ndx-app.ndx-dark .ndx-invoice-split-layout [data-add-client]:hover,
.ndx-app.ndx-dark .ndx-btn-add-client:hover {
	background: #4f46e5 !important;
	border-color: #4338ca !important;
	color: #ffffff !important;
}
.ndx-invoice-split-layout .ndx-agent-picker-field { background: #fff; padding: 0; border: 0; }

/* ==========================================================================
   v1.67.0 — Add / Edit Invoice redesign
   Fixes: agent select stretching to 300px tall, [hidden] boxes showing empty.
   ========================================================================== */
.ndx-invoice-split-layout {
	--inv-surface: #ffffff; --inv-field: #ffffff; --inv-label: #334155; --inv-rowhover: #fafcff;
	--inv-ring: rgba(37,99,235,.16); --inv-edge: #cbd5e1;
	grid-template-columns: minmax(0, 1fr) 376px; gap: 28px;
}
.ndx-app.ndx-dark .ndx-invoice-split-layout {
	--inv-surface: #1b1e36; --inv-field: #14162a; --inv-label: #c9cde6; --inv-rowhover: #20233c;
	--inv-ink: #eceefb; --inv-muted: #9aa1c2; --inv-line: #2c2f4a; --inv-bg: #14162a; --inv-edge: #3a3e5e;
	--inv-primary: #6d8cff; --inv-primary-dark: #8aa3ff; --inv-primary-soft: rgba(109,140,255,.14);
}
.ndx-invoice-split-layout [hidden] { display: none !important; }

/* Surfaces use theme tokens so light and dark both work */
.ndx-invoice-split-layout .ndx-invoice-main-header,
.ndx-invoice-split-layout .ndx-invoice-section,
.ndx-invoice-split-layout .ndx-client-block,
.ndx-invoice-split-layout .ndx-service-row,
.ndx-invoice-split-layout .ndx-service-add-bar,
.ndx-invoice-split-layout .ndx-invoice-sticky-amounts-card { background: var(--inv-surface); }
.ndx-invoice-split-layout .ndx-client-block { background: var(--inv-bg); }
.ndx-invoice-split-layout input[type="text"], .ndx-invoice-split-layout input[type="email"],
.ndx-invoice-split-layout input[type="number"], .ndx-invoice-split-layout input[type="date"],
.ndx-invoice-split-layout select, .ndx-invoice-split-layout textarea {
	background-color: var(--inv-field); color: var(--inv-ink); border-color: var(--inv-edge); min-height: 44px; border-radius: 10px;
}
.ndx-invoice-split-layout input:focus, .ndx-invoice-split-layout select:focus, .ndx-invoice-split-layout textarea:focus {
	box-shadow: 0 0 0 3px var(--inv-ring);
}
.ndx-invoice-split-layout .ndx-field > label,
.ndx-invoice-split-layout .ndx-receipt-label { color: var(--inv-label); }
.ndx-invoice-split-layout .ndx-service-row:hover { background: var(--inv-rowhover); }
.ndx-invoice-split-layout .ndx-btn-ghost, #ndx-agent-modal .ndx-btn-ghost { background: var(--inv-surface); color: var(--inv-label) !important; border-color: var(--inv-edge); }
.ndx-invoice-split-layout .ndx-btn-ghost:hover { background: var(--inv-bg); }
.ndx-invoice-split-layout .ndx-service-add-btn { background: var(--inv-surface); }

/* Page header: quieter chips, stronger title */
.ndx-invoice-split-layout .ndx-invoice-main-header { padding: 20px 24px; border-radius: 14px; }
.ndx-invoice-split-layout .ndx-invoice-type-badge,
.ndx-invoice-split-layout .ndx-invoice-meta-chip { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 4px 11px; }
.ndx-invoice-split-layout .ndx-invoice-type-badge { background: var(--inv-primary-soft); color: var(--inv-primary); border-color: transparent; }
.ndx-invoice-split-layout .ndx-invoice-main-title { font-size: 22px; margin: 12px 0 4px; }
.ndx-invoice-split-layout .ndx-invoice-main-sub { max-width: 62ch; }

/* Section cards */
.ndx-invoice-split-layout .ndx-invoice-section { border-radius: 14px; padding: 22px 24px 24px; }
.ndx-invoice-split-layout .ndx-section-header-row { margin-bottom: 20px; padding-bottom: 16px; }
.ndx-invoice-split-layout .ndx-section-title strong { font-size: 15.5px; }
.ndx-invoice-split-layout .ndx-section-icon { background: var(--inv-primary-soft); border: 0; color: var(--inv-primary); }
.ndx-invoice-split-layout .ndx-section-icon svg { width: 19px; height: 19px; stroke: var(--inv-primary); }
.ndx-invoice-split-layout .ndx-section-icon::after { box-shadow: 0 0 0 3px var(--inv-surface); }

/* ---- Agent information ---- */
.ndx-invoice-split-layout .ndx-create-agent-btn {
	background: var(--inv-surface); color: var(--inv-primary) !important; border: 1px solid var(--inv-primary);
	min-height: 36px; padding: 7px 14px; border-radius: 10px; flex-shrink: 0; transform: none;
}
.ndx-invoice-split-layout .ndx-create-agent-btn:hover { background: var(--inv-primary); color: #fff !important; transform: none; box-shadow: none; }
.ndx-invoice-split-layout .ndx-agent-picker-field { display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; border: 0; }
.ndx-invoice-split-layout .ndx-agent-picker-field > label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.ndx-invoice-split-layout .ndx-agent-picker-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.ndx-invoice-split-layout .ndx-agent-picker-row .ndx-agent-select {
	flex: 0 0 auto; width: 100%; height: 46px; min-height: 46px; max-height: 46px; padding: 0 44px 0 14px;
	font-size: 14px; font-weight: 600; line-height: 44px; border: 1px solid var(--inv-edge); border-radius: 10px;
	background-color: var(--inv-field);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
	-webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
}
.ndx-invoice-split-layout .ndx-agent-manual-wrap { flex: 0 0 auto; }
.ndx-invoice-split-layout .ndx-agent-manual-wrap input { background: var(--inv-field); border: 1px solid var(--inv-primary); font-weight: 600; }
.ndx-invoice-split-layout .ndx-agent-picker-field > .ndx-hint { margin: 0; }

.ndx-invoice-split-layout .ndx-agent-ledger-container {
	display: block; margin-top: 6px; padding: 0; overflow: hidden;
	background: var(--inv-surface); border: 1px solid var(--inv-line); border-radius: 12px; box-shadow: none;
}
.ndx-invoice-split-layout .ndx-agent-summary-head { padding: 14px 18px; border: 0; }
.ndx-invoice-split-layout .ndx-agent-summary-title { font-size: 14.5px; color: var(--inv-ink); }
.ndx-invoice-split-layout .ndx-agent-summary-phone { background: var(--inv-bg); color: var(--inv-muted); border: 1px solid var(--inv-line); }
.ndx-invoice-split-layout .ndx-agent-chips-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--inv-line);
}
.ndx-invoice-split-layout .ndx-agent-chip {
	background: transparent !important; border: 0; border-left: 1px solid var(--inv-line); border-radius: 0; padding: 14px 18px; gap: 6px;
}
.ndx-invoice-split-layout .ndx-agent-chip:first-child { border-left: 0; }
.ndx-invoice-split-layout .ndx-agent-chip span { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--inv-muted); }
.ndx-invoice-split-layout .ndx-agent-chip strong { font-size: 19px; letter-spacing: -.01em; color: var(--inv-ink); }
.ndx-invoice-split-layout .ndx-agent-chip.is-paid strong, .ndx-invoice-split-layout .ndx-agent-chip.is-clear strong { color: var(--inv-ok); }
.ndx-invoice-split-layout .ndx-agent-chip.is-due strong { color: var(--inv-bad); }
.ndx-invoice-split-layout .ndx-agent-breakdown-tags { margin-top: 2px; }
.ndx-invoice-split-layout .ndx-agent-ledger-wrap { padding: 14px 18px 16px; border-top: 1px solid var(--inv-line); }
.ndx-invoice-split-layout .ndx-ledger-title-bar { color: var(--inv-label); margin-bottom: 8px; }
.ndx-invoice-split-layout .ndx-ledger-scroll { max-height: 210px; border: 1px solid var(--inv-line); border-radius: 10px; }
.ndx-invoice-split-layout .ndx-ledger-table th { background: var(--inv-bg); color: var(--inv-muted); font-size: 11.5px; position: sticky; top: 0; }
.ndx-invoice-split-layout .ndx-ledger-table td { color: var(--inv-ink); border-bottom-color: var(--inv-line); }

.ndx-invoice-split-layout .ndx-agent-due-payment {
	display: grid; gap: 12px; padding: 16px 18px 18px; margin: 0; border: 0; border-top: 1px solid var(--inv-line);
	border-radius: 0; background: var(--inv-bg);
}
.ndx-invoice-split-layout .ndx-due-head { display: flex; flex-direction: column; gap: 2px; }
.ndx-invoice-split-layout .ndx-due-head label { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--inv-ink); }
.ndx-invoice-split-layout .ndx-due-head span { font-size: 12px; color: var(--inv-muted); }
.ndx-invoice-split-layout .ndx-due-payment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ndx-invoice-split-layout .ndx-due-payment-row .ndx-input-currency-wrapper input { text-align: left; font-weight: 700; }
.ndx-invoice-split-layout .ndx-due-payment-row .ndx-btn { min-height: 44px; white-space: nowrap; }
.ndx-invoice-split-layout .ndx-due-payment-result { margin: 0; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; }
.ndx-invoice-split-layout .ndx-due-payment-result:empty { display: none; }
.ndx-invoice-split-layout .ndx-settle-link { justify-self: start; min-height: 34px; }

/* ---- Client / billing / services polish ---- */
.ndx-invoice-split-layout .ndx-client-block { border-radius: 12px; }
.ndx-invoice-split-layout .ndx-client-block-title { color: var(--inv-ink); }
.ndx-invoice-split-layout .ndx-checkbox-card { background: var(--inv-bg); }
.ndx-invoice-split-layout .ndx-creator-readonly { background: var(--inv-bg); color: var(--inv-ink); min-height: 44px; }
.ndx-invoice-split-layout .ndx-creator-readonly span { background: var(--inv-surface); }
.ndx-invoice-split-layout .ndx-service-editor { border-radius: 12px; }
.ndx-invoice-split-layout .ndx-service-table-head { background: var(--inv-bg); }
.ndx-invoice-split-layout .ndx-service-row { border-bottom-color: var(--inv-line); }
.ndx-invoice-split-layout .ndx-service-row:last-child { border-bottom: 0; }
.ndx-invoice-split-layout .ndx-service-col input { height: 44px; }
.ndx-invoice-split-layout .ndx-service-line-total strong { color: var(--inv-ink); }
.ndx-invoice-split-layout .ndx-btn-icon-danger { background: transparent; border-color: var(--inv-line); color: var(--inv-muted); }
.ndx-invoice-split-layout .ndx-btn-icon-danger:hover { background: var(--inv-bad); border-color: var(--inv-bad); color: #fff; transform: none; }
.ndx-invoice-split-layout .ndx-service-add-btn { border-color: var(--inv-edge); }

/* ---- Summary sidebar: the one focal element ---- */
.ndx-invoice-split-layout .ndx-invoice-sticky-amounts-card {
	border-radius: 16px; padding: 22px; gap: 16px; box-shadow: 0 14px 34px -18px rgba(15, 23, 42, .28);
}
.ndx-invoice-split-layout .ndx-inv-type-pill { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ndx-invoice-split-layout .ndx-inv-sidebar-label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ndx-invoice-split-layout .ndx-inv-sidebar-no { font-size: 22px; }
.ndx-invoice-split-layout .ndx-inv-sidebar-field label,
.ndx-invoice-split-layout .ndx-inv-sidebar-date-wrap label { color: var(--inv-label); font-size: 12.5px; font-weight: 600; }
.ndx-invoice-split-layout .ndx-inv-receipt-card { background: var(--inv-bg); border-radius: 14px; padding: 16px; }
.ndx-invoice-split-layout .ndx-currency-badge { background: var(--inv-bg); border-right-color: var(--inv-edge); }
.ndx-invoice-split-layout .is-grand-total .ndx-grand-total-amount { font-size: 26px; letter-spacing: -.02em; }
.ndx-invoice-split-layout .ndx-hero-due-card { border-radius: 14px; padding: 16px 18px; }
.ndx-invoice-split-layout .ndx-inv-submit-btn { min-height: 50px; font-size: 15px; border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(37,99,235,.55); }
.ndx-invoice-split-layout .ndx-inv-submit-btn:hover { box-shadow: 0 10px 22px -8px rgba(37,99,235,.65); }
.ndx-app.ndx-dark .ndx-invoice-split-layout .ndx-invoice-sticky-amounts-card { box-shadow: none; }

/* Responsive */
@media (max-width: 1200px) {
	.ndx-invoice-split-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; }
}
@media (max-width: 1024px) {
	.ndx-invoice-split-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.ndx-invoice-split-layout .ndx-section-header-row { flex-wrap: wrap; }
	.ndx-invoice-split-layout .ndx-agent-chips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndx-invoice-split-layout .ndx-agent-chip:nth-child(odd) { border-left: 0; }
	.ndx-invoice-split-layout .ndx-agent-chip:nth-child(n+3) { border-top: 1px solid var(--inv-line); }
	.ndx-invoice-split-layout .ndx-due-payment-row { grid-template-columns: 1fr; }
	.ndx-invoice-split-layout .ndx-invoice-main-title { font-size: 19px; }
}

/* ==========================================================================
   DAILY COST & EXPENSE VOUCHER UI POLISH
   ========================================================================== */

/* Editor container */
.ndx-cost-editor {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	margin-top: 12px;
}
.ndx-app.ndx-dark .ndx-cost-editor {
	background: #1e293b;
	border-color: #334155;
}

/* Table header */
.ndx-cost-table-head {
	display: grid;
	grid-template-columns: 50px minmax(200px, 1fr) 110px 100px 140px 140px 48px;
	gap: 10px;
	align-items: center;
	padding: 12px 16px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}
.ndx-app.ndx-dark .ndx-cost-table-head {
	background: #0f172a;
	border-bottom-color: #334155;
	color: #94a3b8;
}

/* Rows container */
.ndx-cost-rows-wrap {
	display: flex;
	flex-direction: column;
}

/* Individual item row */
.ndx-cost-row {
	display: grid;
	grid-template-columns: 50px minmax(200px, 1fr) 110px 100px 140px 140px 48px;
	gap: 10px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f5f9;
	transition: background-color 0.15s ease;
}
.ndx-cost-row:last-child {
	border-bottom: none;
}
.ndx-cost-row:hover {
	background-color: #f8fafc;
}
.ndx-app.ndx-dark .ndx-cost-row {
	border-bottom-color: #334155;
}
.ndx-app.ndx-dark .ndx-cost-row:hover {
	background-color: #1e293b;
}

.ndx-cost-col {
	display: flex;
	align-items: center;
	min-width: 0;
}
.ndx-cost-col input {
	width: 100%;
	height: 40px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13.5px;
	color: #1e293b;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}
.ndx-cost-col input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	outline: none;
}
.ndx-app.ndx-dark .ndx-cost-col input {
	background: #0f172a;
	border-color: #334155;
	color: #f1f5f9;
}

/* SL badge */
.ndx-cost-col-sl {
	justify-content: center;
}
.ndx-cost-sl-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e2e8f0;
	color: #475569;
	font-size: 12px;
	font-weight: 700;
}
.ndx-app.ndx-dark .ndx-cost-sl-badge {
	background: #334155;
	color: #cbd5e1;
}

/* Currency input prefix */
.ndx-cost-currency-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
}
.ndx-currency-prefix {
	position: absolute;
	left: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: #94a3b8;
	pointer-events: none;
	user-select: none;
}
.ndx-cost-currency-wrap input {
	padding-left: 26px !important;
}

/* Total display */
.ndx-cost-total-display {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: 40px;
	padding: 8px 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-sizing: border-box;
}
.ndx-cost-total-display .ndx-currency-prefix {
	position: static;
}
.ndx-cost-total-display strong {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	margin-left: auto;
}
.ndx-app.ndx-dark .ndx-cost-total-display {
	background: #0f172a;
	border-color: #334155;
}
.ndx-app.ndx-dark .ndx-cost-total-display strong {
	color: #f8fafc;
}

/* Remove button */
.ndx-btn-icon-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid #fee2e2;
	background: #fef2f2;
	color: #dc2626;
	cursor: pointer;
	transition: all 0.15s ease;
	padding: 0;
}
.ndx-btn-icon-danger:hover {
	background: #dc2626;
	color: #ffffff;
	border-color: #dc2626;
}

/* Footer / summary */
.ndx-cost-editor-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
	flex-wrap: wrap;
	gap: 16px;
}
.ndx-app.ndx-dark .ndx-cost-editor-footer {
	background: #0f172a;
	border-top-color: #334155;
}
.ndx-cost-summary-box {
	display: flex;
	align-items: center;
	gap: 20px;
}
.ndx-cost-summary-item {
	font-size: 13px;
	color: #64748b;
}
.ndx-cost-summary-item strong {
	color: #0f172a;
	font-weight: 700;
}
.ndx-app.ndx-dark .ndx-cost-summary-item strong {
	color: #f8fafc;
}

.ndx-cost-grand-total {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 8px 16px;
	font-size: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.ndx-cost-grand-total span {
	color: #64748b;
	font-weight: 600;
}
.ndx-cost-grand-total strong {
	font-size: 18px;
	font-weight: 800;
	color: #059669;
}
.ndx-app.ndx-dark .ndx-cost-grand-total {
	background: #1e293b;
	border-color: #334155;
}
.ndx-app.ndx-dark .ndx-cost-grand-total strong {
	color: #34d399;
}

.ndx-cost-mobile-label {
	display: none;
}

/* Voucher badge */
.ndx-voucher-badge {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	color: #2563eb;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 6px;
	padding: 3px 8px;
	text-decoration: none;
	transition: all 0.15s ease;
}
.ndx-voucher-badge:hover {
	background: #2563eb;
	color: #ffffff;
	border-color: #2563eb;
}
.ndx-app.ndx-dark .ndx-voucher-badge {
	background: rgba(37, 99, 235, 0.15);
	border-color: rgba(37, 99, 235, 0.35);
	color: #60a5fa;
}

/* Item breakdown pills in table */
.ndx-cost-item-pills {
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-width: 480px;
}
.ndx-cost-item-pill {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12.5px;
	line-height: 1.4;
	color: #334155;
}
.ndx-cost-item-sl {
	font-weight: 700;
	color: #64748b;
	font-size: 11px;
}
.ndx-cost-item-name {
	font-weight: 600;
	color: #0f172a;
}
.ndx-cost-item-qty {
	background: #e2e8f0;
	color: #475569;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
}
.ndx-cost-item-rate {
	color: #64748b;
	font-size: 11.5px;
}
.ndx-cost-item-amt {
	color: #059669;
	font-weight: 700;
	margin-left: auto;
}
.ndx-app.ndx-dark .ndx-cost-item-pill {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
}
.ndx-app.ndx-dark .ndx-cost-item-name {
	color: #f8fafc;
}
.ndx-app.ndx-dark .ndx-cost-item-qty {
	background: #334155;
	color: #cbd5e1;
}

.ndx-cost-total-amount {
	font-size: 14.5px;
	font-weight: 700;
	color: #059669;
}
.ndx-app.ndx-dark .ndx-cost-total-amount {
	color: #34d399;
}

/* Mobile responsive layout for cost editor */
@media (max-width: 860px) {
	.ndx-cost-table-head {
		display: none;
	}
	.ndx-cost-row {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
		position: relative;
		background: #ffffff;
		border-bottom: 2px solid #e2e8f0;
	}
	.ndx-cost-mobile-label {
		display: block;
		font-size: 11.5px;
		font-weight: 600;
		color: #64748b;
		margin-bottom: 4px;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}
	.ndx-cost-col {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
	}
	.ndx-cost-col-sl {
		flex-direction: row;
		width: auto;
		position: absolute;
		top: 14px;
		left: 14px;
	}
	.ndx-cost-col-action {
		position: absolute;
		top: 14px;
		right: 14px;
		width: auto;
	}
	.ndx-cost-col-desc {
		margin-top: 36px;
	}
	.ndx-cost-editor-footer {
		flex-direction: column;
		align-items: stretch;
	}
	.ndx-cost-summary-box {
		flex-direction: column;
		align-items: stretch;
	}
	.ndx-cost-grand-total {
		justify-content: space-between;
	}
}

/* ==========================================================================
   DAILY COST BUTTONS - HIGH CONTRAST & CRYSTAL CLEAR TEXT/COLORS
   ========================================================================== */

/* 1. "+ Add Another Purchased Item" Button */
.ndx-cost-editor .ndx-add-cost-item,
.ndx-cost-editor .ndx-emp-add-cost-item,
.ndx-cost-editor-footer .ndx-service-add-btn,
.ndx-cost-editor-footer .ndx-add-cost-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 10px 22px !important;
	border-radius: 9px !important;
	background: #4f46e5 !important;
	border: 1.5px solid #4338ca !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	cursor: pointer !important;
	box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	width: auto !important;
}
.ndx-cost-editor .ndx-add-cost-item .ndx-add-icon,
.ndx-cost-editor .ndx-emp-add-cost-item .ndx-add-icon,
.ndx-cost-editor-footer .ndx-service-add-btn .ndx-add-icon,
.ndx-cost-editor-footer .ndx-add-cost-item .ndx-add-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}
.ndx-cost-editor .ndx-add-cost-item:hover,
.ndx-cost-editor .ndx-emp-add-cost-item:hover,
.ndx-cost-editor-footer .ndx-service-add-btn:hover,
.ndx-cost-editor-footer .ndx-add-cost-item:hover {
	background: #4338ca !important;
	color: #ffffff !important;
	border-color: #3730a3 !important;
	box-shadow: 0 6px 16px rgba(67, 56, 202, 0.45) !important;
	transform: translateY(-1px) !important;
}
.ndx-cost-editor .ndx-add-cost-item:hover .ndx-add-icon,
.ndx-cost-editor .ndx-emp-add-cost-item:hover .ndx-add-icon,
.ndx-cost-editor-footer .ndx-service-add-btn:hover .ndx-add-icon,
.ndx-cost-editor-footer .ndx-add-cost-item:hover .ndx-add-icon {
	background: rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-cost-editor .ndx-add-cost-item,
.ndx-app.ndx-dark .ndx-cost-editor .ndx-emp-add-cost-item,
.ndx-app.ndx-dark .ndx-cost-editor-footer .ndx-service-add-btn,
.ndx-app.ndx-dark .ndx-cost-editor-footer .ndx-add-cost-item {
	background: #4f46e5 !important;
	border-color: #6366f1 !important;
	color: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-cost-editor .ndx-add-cost-item:hover,
.ndx-app.ndx-dark .ndx-cost-editor .ndx-emp-add-cost-item:hover,
.ndx-app.ndx-dark .ndx-cost-editor-footer .ndx-service-add-btn:hover,
.ndx-app.ndx-dark .ndx-cost-editor-footer .ndx-add-cost-item:hover {
	background: #4338ca !important;
	color: #ffffff !important;
}

/* 2. Remove / Delete Item Button */
.ndx-cost-col-action .ndx-remove-cost-item,
.ndx-cost-col-action .ndx-btn-icon-danger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 8px !important;
	background: #fee2e2 !important;
	border: 1.5px solid #ef4444 !important;
	color: #b91c1c !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	padding: 0 !important;
}
.ndx-cost-col-action .ndx-remove-cost-item svg,
.ndx-cost-col-action .ndx-btn-icon-danger svg {
	width: 16px !important;
	height: 16px !important;
	stroke: #b91c1c !important;
	stroke-width: 2.5 !important;
	transition: stroke 0.2s ease !important;
}
.ndx-cost-col-action .ndx-remove-cost-item:hover,
.ndx-cost-col-action .ndx-btn-icon-danger:hover {
	background: #dc2626 !important;
	border-color: #b91c1c !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35) !important;
	transform: scale(1.06) !important;
}
.ndx-cost-col-action .ndx-remove-cost-item:hover svg,
.ndx-cost-col-action .ndx-btn-icon-danger:hover svg {
	stroke: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-cost-col-action .ndx-remove-cost-item {
	background: #450a0a !important;
	border-color: #ef4444 !important;
	color: #fca5a5 !important;
}

/* 3. Primary Submit Buttons (Admin & Employee) */
.ndx-form-footer .ndx-btn-primary,
#ndx-emp-daily-cost-form .ndx-btn-primary,
.ndx-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: #1d4ed8 !important;
	color: #ffffff !important;
	border: 1.5px solid #1e40af !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	padding: 10px 24px !important;
	border-radius: 8px !important;
	box-shadow: 0 3px 10px rgba(29, 78, 216, 0.3) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
}
.ndx-form-footer .ndx-btn-primary:hover,
#ndx-emp-daily-cost-form .ndx-btn-primary:hover,
.ndx-btn-primary:hover {
	background: #1e40af !important;
	color: #ffffff !important;
	border-color: #172554 !important;
	box-shadow: 0 6px 16px rgba(29, 78, 216, 0.45) !important;
	transform: translateY(-1px) !important;
}
.ndx-btn-lg {
	padding: 12px 28px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

/* 4. Secondary / Ghost Buttons ("Back to list", "Cancel", "Reset") */
.ndx-panel-head .ndx-btn-ghost,
.ndx-form-footer .ndx-btn-ghost,
.ndx-filter-actions .ndx-btn-ghost,
.ndx-btn-ghost {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	border: 1.5px solid #cbd5e1 !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 8px 16px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}
.ndx-panel-head .ndx-btn-ghost:hover,
.ndx-form-footer .ndx-btn-ghost:hover,
.ndx-filter-actions .ndx-btn-ghost:hover,
.ndx-btn-ghost:hover {
	background: #f1f5f9 !important;
	color: #000000 !important;
	border-color: #94a3b8 !important;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12) !important;
	transform: translateY(-1px) !important;
}
.ndx-app.ndx-dark .ndx-btn-ghost,
.ndx-app.ndx-dark .ndx-panel-head .ndx-btn-ghost,
.ndx-app.ndx-dark .ndx-form-footer .ndx-btn-ghost {
	background: #334155 !important;
	border-color: #64748b !important;
	color: #f8fafc !important;
}
.ndx-app.ndx-dark .ndx-btn-ghost:hover {
	background: #475569 !important;
	color: #ffffff !important;
}

/* 5. "+ Add Daily Cost" Trigger Button in Filter Bar */
[data-emp-open-cost-form] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #047857 !important;
	color: #ffffff !important;
	border: 1.5px solid #065f46 !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 8px 18px !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 6px rgba(4, 120, 87, 0.25) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}
[data-emp-open-cost-form]:hover {
	background: #065f46 !important;
	color: #ffffff !important;
	border-color: #022c22 !important;
	box-shadow: 0 4px 12px rgba(4, 120, 87, 0.4) !important;
	transform: translateY(-1px) !important;
}

/* 6. Filter Search Button */
.ndx-filter-actions button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	background: #2563eb !important;
	color: #ffffff !important;
	border: 1.5px solid #1d4ed8 !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 8px 16px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important;
	transition: all 0.2s ease !important;
}
.ndx-filter-actions button[type="submit"]:hover {
	background: #1d4ed8 !important;
	color: #ffffff !important;
	box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4) !important;
}

/* 7. Table Action Buttons (View Invoice, Print) */
.ndx-table-actions {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
.ndx-btn-xs {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 5px 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
}
.ndx-table .ndx-btn-primary,
.ndx-table-actions .ndx-btn-primary {
	background: #1d4ed8 !important;
	color: #ffffff !important;
	border: 1px solid #1e40af !important;
	box-shadow: 0 1px 3px rgba(29, 78, 216, 0.25) !important;
}
.ndx-table .ndx-btn-primary:hover,
.ndx-table-actions .ndx-btn-primary:hover {
	background: #1e40af !important;
	color: #ffffff !important;
	border-color: #172554 !important;
}
.ndx-table .ndx-btn-ghost,
.ndx-table-actions .ndx-btn-ghost {
	background: #f1f5f9 !important;
	color: #1e293b !important;
	border: 1.5px solid #cbd5e1 !important;
	font-weight: 700 !important;
}
.ndx-table .ndx-btn-ghost:hover,
.ndx-table-actions .ndx-btn-ghost:hover {
	background: #e2e8f0 !important;
	color: #0f172a !important;
	border-color: #94a3b8 !important;
}
.ndx-btn-outline {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: #ecfdf5 !important;
	color: #065f46 !important;
	border: 1.5px solid #6ee7b7 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	padding: 4px 10px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
}
.ndx-btn-outline:hover {
	background: #d1fae5 !important;
	color: #047857 !important;
	border-color: #34d399 !important;
}

/* ==============================================================
   8. MODERN TABLE ACTION ROW & COMPACT ICON BUTTONS
   ============================================================== */
.ndx-table .ndx-actions {
	white-space: nowrap !important;
	padding: 8px 12px !important;
}

.ndx-actions-row {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
}

/* Base 32x32px square-rounded Icon Button */
.ndx-btn-icon-action {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border-radius: 7px !important;
	background: #f8fafc !important;
	color: #334155 !important;
	border: 1.5px solid #cbd5e1 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}
.ndx-btn-icon-action svg {
	width: 15px !important;
	height: 15px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2 !important;
	transition: stroke 0.15s ease !important;
	display: block !important;
}
.ndx-btn-icon-action:hover {
	background: #e2e8f0 !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
	box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12) !important;
	transform: translateY(-1px) !important;
}

/* Edit icon button - violet/purple */
.ndx-btn-icon-action.ndx-btn-icon-edit {
	background: #f5f3ff !important;
	border-color: #ddd6fe !important;
	color: #6d28d9 !important;
}
.ndx-btn-icon-action.ndx-btn-icon-edit:hover {
	background: #6d28d9 !important;
	border-color: #5b21b6 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(109, 40, 217, 0.28) !important;
}
.ndx-btn-icon-action.ndx-btn-icon-edit:hover svg {
	stroke: #ffffff !important;
}

/* Delete icon button - soft red to bold red */
.ndx-btn-icon-action.ndx-btn-icon-delete {
	background: #fef2f2 !important;
	border-color: #fecaca !important;
	color: #dc2626 !important;
}
.ndx-btn-icon-action.ndx-btn-icon-delete:hover {
	background: #dc2626 !important;
	border-color: #b91c1c !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28) !important;
}
.ndx-btn-icon-action.ndx-btn-icon-delete:hover svg {
	stroke: #ffffff !important;
}

/* Disabled delete icon button (for protected records like employees) */
.ndx-btn-icon-action.ndx-btn-icon-disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	background: #f1f5f9 !important;
	border-color: #e2e8f0 !important;
	color: #94a3b8 !important;
}
.ndx-btn-icon-action.ndx-btn-icon-disabled:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* Compact Document Pills (Quote, Paid, Due, Balance) */
.ndx-table .ndx-btn-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 32px !important;
	padding: 0 10px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	border-radius: 7px !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

/* Paid Pill - soft emerald */
.ndx-table .ndx-btn-paid {
	background: #ecfdf5 !important;
	color: #065f46 !important;
	border: 1.5px solid #a7f3d0 !important;
}
.ndx-table .ndx-btn-paid:hover {
	background: #059669 !important;
	border-color: #047857 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 5px rgba(5, 150, 105, 0.25) !important;
	transform: translateY(-1px) !important;
}

/* Due Pill - soft amber/orange */
.ndx-table .ndx-btn-due {
	background: #fff7ed !important;
	color: #9a3412 !important;
	border: 1.5px solid #fed7aa !important;
}
.ndx-table .ndx-btn-due:hover {
	background: #ea580c !important;
	border-color: #c2410c !important;
	color: #ffffff !important;
	box-shadow: 0 2px 5px rgba(234, 88, 12, 0.25) !important;
	transform: translateY(-1px) !important;
}

/* Primary buttons in table (e.g. Invoice PDF) */
.ndx-table .ndx-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 32px !important;
	padding: 0 11px !important;
	box-sizing: border-box !important;
	border-radius: 7px !important;
	line-height: 1 !important;
}
.ndx-table .ndx-btn-primary svg {
	width: 14px !important;
	height: 14px !important;
	stroke: #ffffff !important;
	fill: none !important;
	stroke-width: 2 !important;
}

/* Collect Payment Summary Button */
.ndx-collect {
	position: relative !important;
	display: inline-block !important;
	vertical-align: middle !important;
}
.ndx-collect > summary {
	list-style: none !important;
	cursor: pointer !important;
}
.ndx-collect > summary::-webkit-details-marker {
	display: none !important;
}
.ndx-table .ndx-btn-collect {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 32px !important;
	padding: 0 11px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	border-radius: 7px !important;
	background: #16a34a !important;
	color: #ffffff !important;
	border: 1.5px solid #15803d !important;
	box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25) !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
}
.ndx-table .ndx-btn-collect:hover {
	background: #15803d !important;
	border-color: #166534 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35) !important;
	transform: translateY(-1px) !important;
}
.ndx-btn-collect svg {
	width: 14px !important;
	height: 14px !important;
	stroke: #ffffff !important;
	fill: none !important;
	stroke-width: 2 !important;
}

/* Barcode Popup Preview */
.ndx-list-barcode.is-open {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	padding: 3px 8px !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
	vertical-align: middle !important;
}

/* Dark mode compatibility */
.ndx-app.ndx-dark .ndx-btn-icon-action {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #94a3b8 !important;
}
.ndx-app.ndx-dark .ndx-btn-icon-action:hover {
	background: #334155 !important;
	border-color: #475569 !important;
	color: #f8fafc !important;
}
.ndx-app.ndx-dark .ndx-btn-icon-action.ndx-btn-icon-edit {
	background: rgba(109, 40, 217, 0.2) !important;
	border-color: rgba(109, 40, 217, 0.4) !important;
	color: #c4b5fd !important;
}
.ndx-app.ndx-dark .ndx-btn-icon-action.ndx-btn-icon-edit:hover {
	background: #6d28d9 !important;
	color: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-btn-icon-action.ndx-btn-icon-delete {
	background: rgba(220, 38, 38, 0.2) !important;
	border-color: rgba(220, 38, 38, 0.4) !important;
	color: #fca5a5 !important;
}
.ndx-app.ndx-dark .ndx-btn-icon-action.ndx-btn-icon-delete:hover {
	background: #dc2626 !important;
	color: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-btn-paid {
	background: rgba(16, 185, 129, 0.15) !important;
	border-color: rgba(16, 185, 129, 0.35) !important;
	color: #6ee7b7 !important;
}
.ndx-app.ndx-dark .ndx-btn-due {
	background: rgba(249, 115, 22, 0.15) !important;
	border-color: rgba(249, 115, 22, 0.35) !important;
	color: #fdba74 !important;
}
.ndx-app.ndx-dark .ndx-list-barcode.is-open {
	background: #1e293b !important;
	border-color: #334155 !important;
}

/* ============================================================
   Financial Command Center & Profit-Loss Matrix (v1.60.0)
   ============================================================ */
.ndx-fin-command-center {
	margin-bottom: 24px;
}
.ndx-fin-matrix-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 16px 0 20px;
}
.ndx-fin-matrix-card {
	background: #f8fafc;
	border: 1px solid var(--ndx-border);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ndx-fin-matrix-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(15,23,42,.06);
	border-color: #cbd5e1;
}
.ndx-fin-matrix-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ndx-border);
}
.ndx-fin-matrix-head strong {
	font-size: 13px;
	font-weight: 700;
	color: var(--ndx-text);
}
.ndx-fin-matrix-body {
	display: grid;
	gap: 8px;
	margin-bottom: 12px;
}
.ndx-fin-matrix-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: var(--ndx-muted);
}
.ndx-fin-matrix-row b {
	color: var(--ndx-text);
	font-weight: 600;
}
.ndx-fin-matrix-footer {
	padding-top: 10px;
	border-top: 1px dashed var(--ndx-border);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.ndx-fin-matrix-footer span {
	font-size: 11px;
	font-weight: 600;
	color: var(--ndx-muted);
}
.ndx-fin-matrix-profit {
	font-size: 17px;
	font-weight: 800;
}
.ndx-fin-guide {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 14px 18px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 12px;
	line-height: 1.6;
	color: #166534;
	margin-top: 12px;
}
.ndx-fin-guide strong {
	color: #14532d;
	font-size: 13px;
}
.ndx-fin-guide ul {
	margin: 6px 0 0;
	padding-left: 20px;
}
.ndx-fin-guide li {
	margin-bottom: 3px;
}

@media (max-width: 1024px) {
	.ndx-fin-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ndx-fin-matrix-grid { grid-template-columns: 1fr; }
	.ndx-fin-guide { flex-direction: column; gap: 8px; }
}

.ndx-app.ndx-dark .ndx-fin-matrix-card {
	background: #1a1e30;
	border-color: #2c2f4a;
}
.ndx-app.ndx-dark .ndx-fin-matrix-head strong,
.ndx-app.ndx-dark .ndx-fin-matrix-row b {
	color: #e2e8f0;
}
.ndx-app.ndx-dark .ndx-fin-guide {
	background: #062e1e;
	border-color: #0d5f3e;
	color: #86efac;
}
.ndx-app.ndx-dark .ndx-fin-guide strong {
	color: #bbf7d0;
}



/* ===== v1.71 — Net / Cost price column + Profit report ===== */
.ndx-service-editor.ndx-has-cost .ndx-service-table-head,
.ndx-service-editor.ndx-has-cost .ndx-service-row,
.ndx-invoice-split-layout .ndx-service-editor.ndx-has-cost .ndx-service-table-head,
.ndx-invoice-split-layout .ndx-service-editor.ndx-has-cost .ndx-service-row { grid-template-columns: minmax(0, 1fr) 80px 130px 130px 120px 40px; }
.ndx-service-editor.ndx-has-cost .ndx-th-cost { text-align: right; color: #b45309; }
.ndx-service-editor .ndx-cost-input-wrap { background: #fffbeb; border-radius: 10px; }
.ndx-service-editor .ndx-cost-input-wrap input { background: #fffbeb; border-color: #fcd34d; }
.ndx-line-profit { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; }
.ndx-line-profit.is-pos { color: #059669; } .ndx-line-profit.is-neg { color: #dc2626; }
.ndx-cost-summary { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 12px 0 0; padding: 12px 14px; border: 1px dashed #fcd34d; background: #fffbeb; border-radius: 12px; font-size: 13px; color: #78350f; }
.ndx-cost-summary b { font-size: 14px; } .ndx-cost-summary .is-pos { color: #059669; } .ndx-cost-summary .is-neg { color: #dc2626; }
@media (max-width: 900px) {
	.ndx-service-editor.ndx-has-cost .ndx-service-table-head { display: none; }
	.ndx-service-editor.ndx-has-cost .ndx-service-row { grid-template-columns: 1fr 1fr; }
	.ndx-service-editor.ndx-has-cost .ndx-col-desc { grid-column: 1 / -1; }
}

.ndx-pf-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.ndx-pf-card { position: relative; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #e6e9f2; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); overflow: hidden; }
.ndx-pf-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pf-accent, #2563eb); }
.ndx-pf-card span { display: block; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.ndx-pf-card strong { display: block; font-size: 22px; margin: 6px 0 4px; color: #0f172a; }
.ndx-pf-card small { color: #94a3b8; font-size: 12px; }
.ndx-pf-card-sales { --pf-accent: #2563eb; } .ndx-pf-card-cost { --pf-accent: #f59e0b; } .ndx-pf-card-gross { --pf-accent: #0ea5e9; }
.ndx-pf-card-exp { --pf-accent: #ef4444; } .ndx-pf-card-profit { --pf-accent: #10b981; background: linear-gradient(135deg, #ecfdf5, #fff); }
.ndx-pf-card-loss { --pf-accent: #dc2626; background: linear-gradient(135deg, #fef2f2, #fff); }
.ndx-pf-card-profit strong { color: #047857; } .ndx-pf-card-loss strong { color: #b91c1c; }
.ndx-pf-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ndx-pf-period { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid #e6e9f2; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.ndx-pf-period:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
.ndx-pf-period strong { font-size: 20px; } .ndx-pf-period em { font-style: normal; font-size: 12px; color: #64748b; }
.ndx-pf-period .ndx-badge { align-self: flex-start; }
.ndx-pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.ndx-pf-grid > .ndx-dashboard-panel { margin: 0; min-width: 0; }
.ndx-pf-span-2 { grid-column: span 2; }
.ndx-pf-chart-scroll { overflow-x: auto; }
.ndx-pf-bars { width: 100%; min-width: 560px; height: 260px; display: block; }
.ndx-pf-bars .ndx-pf-gridline { stroke: #eef1f6; stroke-width: 1; }
.ndx-pf-zero { stroke: #94a3b8; stroke-width: 1; }
.ndx-pf-axis { font-size: 10px; fill: #94a3b8; }
.ndx-pf-bar { transition: opacity .15s; } .ndx-pf-bar:hover { opacity: .75; }
.ndx-pf-sales { fill: #3b82f6; } .ndx-pf-cost { fill: #f59e0b; } .ndx-pf-profit { fill: #10b981; } .ndx-pf-loss { fill: #ef4444; }
.ndx-pf-keys { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 12px; color: #475569; }
.ndx-pf-keys i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ndx-pf-k-sales { background: #3b82f6; } .ndx-pf-k-cost { background: #f59e0b; } .ndx-pf-k-profit { background: #10b981; } .ndx-pf-k-loss { background: #ef4444; }
.ndx-pf-pie { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.ndx-pf-pie svg { width: 170px; height: 170px; flex: none; }
.ndx-pf-pie-bg { fill: none; stroke: #f1f5f9; stroke-width: 26; }
.ndx-pf-slice { fill: none; stroke-width: 26; transition: stroke-width .15s; } .ndx-pf-slice:hover { stroke-width: 30; }
.ndx-pf-pie-label { font-size: 11px; fill: #64748b; } .ndx-pf-pie-value { font-size: 18px; font-weight: 700; fill: #0f172a; }
.ndx-pf-legend { list-style: none; margin: 0; padding: 0; min-width: 150px; flex: 1; }
.ndx-pf-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed #eef1f6; }
.ndx-pf-legend li span { flex: 1; color: #334155; } .ndx-pf-legend li b { color: #0f172a; }
.ndx-pf-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ndx-pf-c0 { stroke: #f59e0b; } .ndx-pf-legend i.ndx-pf-c0 { background: #f59e0b; }
.ndx-pf-c1 { stroke: #ef4444; } .ndx-pf-legend i.ndx-pf-c1 { background: #ef4444; }
.ndx-pf-c2 { stroke: #10b981; } .ndx-pf-legend i.ndx-pf-c2 { background: #10b981; }
.ndx-pf-c3 { stroke: #3b82f6; } .ndx-pf-legend i.ndx-pf-c3 { background: #3b82f6; }
.ndx-pf-c4 { stroke: #8b5cf6; } .ndx-pf-legend i.ndx-pf-c4 { background: #8b5cf6; }
.ndx-pf-c5 { stroke: #14b8a6; } .ndx-pf-legend i.ndx-pf-c5 { background: #14b8a6; }
.ndx-pf-c6 { stroke: #64748b; } .ndx-pf-legend i.ndx-pf-c6 { background: #64748b; }
.ndx-pf-empty { color: #94a3b8; justify-content: center; }
.ndx-pf-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; }
.ndx-pf-tabs { display: inline-flex; background: #f1f5f9; border-radius: 12px; padding: 4px; }
.ndx-pf-tabs a { padding: 8px 18px; border-radius: 9px; font-weight: 600; font-size: 13px; color: #475569; text-decoration: none; }
.ndx-pf-tabs a.is-active { background: #fff; color: #1d4ed8; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.ndx-pf-filter { display: flex; gap: 8px; align-items: center; }
.ndx-pf-filter select { min-width: 110px; }
.ndx-pf-note { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px; }
.ndx-pf-table .r { text-align: right; } .ndx-pf-table tfoot th { border-top: 2px solid #e2e8f0; }
.ndx-pf-row-empty td { color: #cbd5e1; }
.ndx-pf-highlights { list-style: none; margin: 0; padding: 0; }
.ndx-pf-highlights li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #eef1f6; font-size: 13px; }
.ndx-pf-highlights span { color: #64748b; }
.ndx-pf-recent { grid-template-columns: 1fr; }
@media (max-width: 1200px) { .ndx-pf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ndx-pf-grid { grid-template-columns: 1fr 1fr; } .ndx-pf-span-2 { grid-column: 1 / -1; } }
@media (max-width: 720px) { .ndx-pf-cards, .ndx-pf-periods, .ndx-pf-grid { grid-template-columns: 1fr; } }
@media print { .ndx-pf-noprint, .ndx-sidebar, #adminmenumain, #wpadminbar { display: none !important; } .ndx-pf-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   MASTER UI DESIGN, COLOR HARMONY & BUTTON SYSTEM (ALL SCREENS & THEMES)
   ========================================================================== */

/* 1. Global Viewport & Hygiene */
html, body {
	overflow-x: hidden !important;
}
.ndx-app {
	width: 100% !important;
	max-width: 100vw !important;
	overflow-x: hidden !important;
	box-sizing: border-box !important;
	--ndx-primary: #4f46e5;
	--ndx-primary-dark: #4338ca;
	--ndx-primary-light: #6366f1;
}
.ndx-main {
	min-width: 0 !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	box-sizing: border-box !important;
}
.ndx-content {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* 2. Form Inputs, Selects & Textareas Polish */
.ndx-field input,
.ndx-field select,
.ndx-field textarea,
.ndx-form-grid input,
.ndx-form-grid select,
.ndx-form-grid textarea,
.ndx-input-currency-wrapper input {
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 9px !important;
	padding: 9px 13px !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
	color: #0f172a !important;
	background: #ffffff !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.ndx-field input:focus,
.ndx-field select:focus,
.ndx-field textarea:focus,
.ndx-form-grid input:focus,
.ndx-form-grid select:focus,
.ndx-form-grid textarea:focus,
.ndx-input-currency-wrapper input:focus {
	border-color: #4f46e5 !important;
	box-shadow: 0 0 0 3.5px rgba(79, 70, 229, 0.18) !important;
	outline: none !important;
}
.ndx-field label {
	color: #1e293b !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	margin-bottom: 6px !important;
	display: block !important;
}

/* Dark Mode Inputs */
.ndx-app.ndx-dark .ndx-field input,
.ndx-app.ndx-dark .ndx-field select,
.ndx-app.ndx-dark .ndx-field textarea,
.ndx-app.ndx-dark .ndx-form-grid input,
.ndx-app.ndx-dark .ndx-form-grid select,
.ndx-app.ndx-dark .ndx-form-grid textarea,
.ndx-app.ndx-dark .ndx-input-currency-wrapper input {
	background: #1b1e36 !important;
	border-color: #3b4267 !important;
	color: #f1f5f9 !important;
}
.ndx-app.ndx-dark .ndx-field input:focus,
.ndx-app.ndx-dark .ndx-field select:focus,
.ndx-app.ndx-dark .ndx-field textarea:focus,
.ndx-app.ndx-dark .ndx-form-grid input:focus,
.ndx-app.ndx-dark .ndx-form-grid select:focus,
.ndx-app.ndx-dark .ndx-form-grid textarea:focus,
.ndx-app.ndx-dark .ndx-input-currency-wrapper input:focus {
	border-color: #818cf8 !important;
	box-shadow: 0 0 0 3.5px rgba(129, 140, 248, 0.25) !important;
}
.ndx-app.ndx-dark .ndx-field label {
	color: #e2e8f0 !important;
}

/* 3. Cards, Panels & Sections Polish */
.ndx-form-section,
.ndx-dashboard-panel,
.ndx-card,
.ndx-metric,
.ndx-detail-card {
	border-radius: 14px !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.ndx-app.ndx-dark .ndx-form-section,
.ndx-app.ndx-dark .ndx-dashboard-panel,
.ndx-app.ndx-dark .ndx-card,
.ndx-app.ndx-dark .ndx-metric,
.ndx-app.ndx-dark .ndx-detail-card {
	border-color: #2c2f4a !important;
	background: #1b1e36 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* 4. Complete Master Button System — 100% Guaranteed High Contrast & Clarity */
.ndx-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 9px 18px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	border-radius: 9px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: all 0.18s ease !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.ndx-btn-sm {
	padding: 6px 13px !important;
	font-size: 12.5px !important;
	border-radius: 7px !important;
}
.ndx-btn-xs {
	padding: 4px 10px !important;
	font-size: 11.5px !important;
	border-radius: 6px !important;
}

/* 4a. Primary Button (Indigo / Royal) */
.ndx-btn-primary,
.ndx-btn:not(.ndx-btn-ghost):not(.ndx-btn-secondary):not(.ndx-btn-danger):not(.ndx-btn-warning):not(.ndx-btn-success):not(.ndx-btn-outline):not(.ndx-service-add-btn):not(.ndx-btn-add-client):not(.ndx-btn-icon-action):not(.ndx-btn-pill) {
	background: #4f46e5 !important;
	border: 1.5px solid #4338ca !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}
.ndx-btn-primary:hover,
.ndx-btn:not(.ndx-btn-ghost):not(.ndx-btn-secondary):not(.ndx-btn-danger):not(.ndx-btn-warning):not(.ndx-btn-success):not(.ndx-btn-outline):not(.ndx-service-add-btn):not(.ndx-btn-add-client):not(.ndx-btn-icon-action):not(.ndx-btn-pill):hover {
	background: #4338ca !important;
	border-color: #3730a3 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45) !important;
	transform: translateY(-1px) !important;
}

/* 4b. Secondary & Ghost Buttons (Crisp White / Subtle Border) */
.ndx-btn-ghost,
.ndx-btn-secondary,
.ndx-inv-cancel-btn {
	background: #ffffff !important;
	border: 1.5px solid #cbd5e1 !important;
	color: #1e293b !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
.ndx-btn-ghost:hover,
.ndx-btn-secondary:hover,
.ndx-inv-cancel-btn:hover {
	background: #f8fafc !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;
	transform: translateY(-1px) !important;
}
.ndx-app.ndx-dark .ndx-btn-ghost,
.ndx-app.ndx-dark .ndx-btn-secondary,
.ndx-app.ndx-dark .ndx-inv-cancel-btn {
	background: #1e293b !important;
	border-color: #475569 !important;
	color: #f8fafc !important;
}
.ndx-app.ndx-dark .ndx-btn-ghost:hover,
.ndx-app.ndx-dark .ndx-btn-secondary:hover,
.ndx-app.ndx-dark .ndx-inv-cancel-btn:hover {
	background: #334155 !important;
	border-color: #64748b !important;
	color: #ffffff !important;
}

/* 4c. Danger & Delete Buttons (Rose / Crisp Red) */
.ndx-btn-danger,
.ndx-btn-delete,
.ndx-field [data-remove-client],
.ndx-client-block [data-remove-client] {
	background: #dc2626 !important;
	border: 1.5px solid #b91c1c !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}
.ndx-btn-danger:hover,
.ndx-btn-delete:hover,
.ndx-field [data-remove-client]:hover,
.ndx-client-block [data-remove-client]:hover {
	background: #b91c1c !important;
	border-color: #991b1b !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(220, 38, 38, 0.4) !important;
	transform: translateY(-1px) !important;
}

/* 4d. Success & Paid Buttons (Emerald / Forest) */
.ndx-btn-success,
.ndx-btn-paid {
	background: #059669 !important;
	border: 1.5px solid #047857 !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}
.ndx-btn-success:hover,
.ndx-btn-paid:hover {
	background: #047857 !important;
	border-color: #064e3b !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(5, 150, 105, 0.4) !important;
	transform: translateY(-1px) !important;
}

/* 4e. Warning & Due Buttons (Amber / Orange) */
.ndx-btn-warning,
.ndx-btn-due {
	background: #d97706 !important;
	border: 1.5px solid #b45309 !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25) !important;
}
.ndx-btn-warning:hover,
.ndx-btn-due:hover {
	background: #b45309 !important;
	border-color: #92400e !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(217, 119, 6, 0.4) !important;
	transform: translateY(-1px) !important;
}

/* 4f. Dedicated "+ Add More Client Information" Button — Unbreakable High Contrast */
.ndx-btn-add-client {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 11px 22px !important;
	border-radius: 10px !important;
	background: #4f46e5 !important;
	border: 1.5px solid #4338ca !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	cursor: pointer !important;
	box-shadow: 0 3px 12px rgba(79, 70, 229, 0.35) !important;
	transition: all 0.2s ease !important;
	margin-top: 14px !important;
	width: auto !important;
}
.ndx-btn-add-client .ndx-btn-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.28) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}
.ndx-btn-add-client:hover {
	background: #4338ca !important;
	border-color: #3730a3 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(67, 56, 202, 0.5) !important;
	transform: translateY(-1px) !important;
}
.ndx-btn-add-client:hover .ndx-btn-icon {
	background: rgba(255, 255, 255, 0.4) !important;
	color: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-btn-add-client {
	background: #4f46e5 !important;
	border-color: #6366f1 !important;
	color: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-btn-add-client:hover {
	background: #4338ca !important;
	color: #ffffff !important;
}

/* 4g. Dedicated "+ Add Service Item" Button */
.ndx-service-add-btn,
.ndx-add-service {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 12px 20px !important;
	border-radius: 10px !important;
	background: #f5f3ff !important;
	border: 1.5px dashed #6366f1 !important;
	color: #4338ca !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	width: 100% !important;
	margin-top: 10px !important;
}
.ndx-service-add-btn .ndx-add-icon,
.ndx-add-service .ndx-add-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #4f46e5 !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}
.ndx-service-add-btn:hover,
.ndx-add-service:hover {
	background: #4f46e5 !important;
	border-color: #4338ca !important;
	border-style: solid !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
	transform: translateY(-1px) !important;
}
.ndx-service-add-btn:hover .ndx-add-icon,
.ndx-add-service:hover .ndx-add-icon {
	background: rgba(255, 255, 255, 0.3) !important;
	color: #ffffff !important;
}
.ndx-app.ndx-dark .ndx-service-add-btn,
.ndx-app.ndx-dark .ndx-add-service {
	background: #252848 !important;
	border-color: #6366f1 !important;
	color: #c7d2fe !important;
}
.ndx-app.ndx-dark .ndx-service-add-btn:hover,
.ndx-app.ndx-dark .ndx-add-service:hover {
	background: #4f46e5 !important;
	color: #ffffff !important;
}

/* 4h. Prominent Sticky Invoice Submit Button */
.ndx-inv-submit-btn {
	min-height: 48px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
	border: 1.5px solid #1e40af !important;
	color: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}
.ndx-inv-submit-btn:hover {
	background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5) !important;
	transform: translateY(-1px) !important;
	color: #ffffff !important;
}

/* 4i. Table Icon Action Buttons (34x34px rounded) */
.ndx-btn-icon-action {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border-radius: 8px !important;
	border: 1.5px solid #cbd5e1 !important;
	background: #ffffff !important;
	color: #334155 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
	box-sizing: border-box !important;
}
.ndx-btn-icon-action svg {
	width: 15px !important;
	height: 15px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2 !important;
}
.ndx-btn-icon-action:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15) !important;
}

/* 5. Status Badges & Pills High Contrast Polish */
.ndx-badge {
	display: inline-flex !important;
	align-items: center !important;
	padding: 4px 11px !important;
	border-radius: 999px !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em !important;
	text-transform: capitalize !important;
}
.ndx-badge-paid,
.ndx-badge-approved,
.ndx-badge-completed,
.ndx-badge-active {
	background: #dcfce7 !important;
	color: #15803d !important;
	border: 1px solid #86efac !important;
}
.ndx-badge-pending,
.ndx-badge-partial,
.ndx-badge-scheduled,
.ndx-badge-running {
	background: #fef3c7 !important;
	color: #b45309 !important;
	border: 1px solid #fcd34d !important;
}
.ndx-badge-unpaid,
.ndx-badge-rejected,
.ndx-badge-cancelled,
.ndx-badge-inactive,
.ndx-badge-low {
	background: #fee2e2 !important;
	color: #b91c1c !important;
	border: 1px solid #fca5a5 !important;
}
.ndx-badge-assigned,
.ndx-badge-in_progress,
.ndx-badge-submitted,
.ndx-badge-good,
.ndx-badge-better {
	background: #dbeafe !important;
	color: #1d4ed8 !important;
	border: 1px solid #93c5fd !important;
}
.ndx-badge-best {
	background: #dcfce7 !important;
	color: #047857 !important;
	border: 1px solid #6ee7b7 !important;
}

/* Dark Mode Badges */
.ndx-app.ndx-dark .ndx-badge-paid,
.ndx-app.ndx-dark .ndx-badge-approved,
.ndx-app.ndx-dark .ndx-badge-completed,
.ndx-app.ndx-dark .ndx-badge-active,
.ndx-app.ndx-dark .ndx-badge-best {
	background: #064e3b !important;
	color: #6ee7b7 !important;
	border-color: #047857 !important;
}
.ndx-app.ndx-dark .ndx-badge-pending,
.ndx-app.ndx-dark .ndx-badge-partial,
.ndx-app.ndx-dark .ndx-badge-scheduled,
.ndx-app.ndx-dark .ndx-badge-running {
	background: #78350f !important;
	color: #fde68a !important;
	border-color: #92400e !important;
}
.ndx-app.ndx-dark .ndx-badge-unpaid,
.ndx-app.ndx-dark .ndx-badge-rejected,
.ndx-app.ndx-dark .ndx-badge-cancelled,
.ndx-app.ndx-dark .ndx-badge-inactive,
.ndx-app.ndx-dark .ndx-badge-low {
	background: #7f1d1d !important;
	color: #fca5a5 !important;
	border-color: #991b1b !important;
}
.ndx-app.ndx-dark .ndx-badge-assigned,
.ndx-app.ndx-dark .ndx-badge-in_progress,
.ndx-app.ndx-dark .ndx-badge-submitted,
.ndx-app.ndx-dark .ndx-badge-good,
.ndx-app.ndx-dark .ndx-badge-better {
	background: #1e3a8a !important;
	color: #93c5fd !important;
	border-color: #2563eb !important;
}

/* ==========================================================================
   5. ALL-DEVICE RESPONSIVE REFINEMENTS
   ========================================================================== */

/* Large Tablets & Medium Laptops (1024px and down) */
@media (max-width: 1024px) {
	.ndx-invoice-split-layout {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.ndx-invoice-amounts-column {
		position: static !important;
		width: 100% !important;
		margin-top: 10px !important;
	}
	.ndx-invoice-sticky-amounts-card {
		position: static !important;
		top: auto !important;
		width: 100% !important;
	}
	.ndx-form-grid-3col,
	.ndx-form-grid-4col {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.ndx-topbar .ndx-date-pill,
	.ndx-topbar .ndx-pill-ghost {
		display: none !important;
	}
}

/* Mobile & Tablets Portrait (782px and down) */
@media (max-width: 782px) {
	.ndx-content {
		padding: 16px 12px 32px !important;
	}

	/* Collapse ALL Form Grids to 1 Column */
	.ndx-form-grid,
	.ndx-form-grid-2col,
	.ndx-form-grid-3col,
	.ndx-form-grid-4col,
	.ndx-modal-grid,
	.ndx-detail-grid,
	.ndx-lead-form-grid,
	.ndx-attendance-form-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
	.ndx-field-wide {
		grid-column: 1 / -1 !important;
	}

	/* Service Editor Mobile Card Layout */
	.ndx-service-editor .ndx-service-table-head,
	.ndx-invoice-split-layout .ndx-service-table-head {
		display: none !important;
	}
	.ndx-service-editor .ndx-service-row,
	.ndx-invoice-split-layout .ndx-service-row {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		padding: 16px !important;
		border: 1.5px solid #e2e8f0 !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		margin-bottom: 12px !important;
		position: relative !important;
	}
	.ndx-app.ndx-dark .ndx-service-editor .ndx-service-row,
	.ndx-app.ndx-dark .ndx-invoice-split-layout .ndx-service-row {
		background: #1e293b !important;
		border-color: #334155 !important;
	}
	.ndx-service-editor .ndx-mobile-label,
	.ndx-invoice-split-layout .ndx-mobile-label {
		display: block !important;
		font-size: 11.5px !important;
		font-weight: 700 !important;
		color: #64748b !important;
		margin-bottom: 4px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.03em !important;
	}
	.ndx-service-editor .ndx-service-col-action,
	.ndx-invoice-split-layout .ndx-service-col-action {
		position: absolute !important;
		top: 14px !important;
		right: 14px !important;
		width: auto !important;
	}
	.ndx-service-editor .ndx-service-col-desc,
	.ndx-invoice-split-layout .ndx-service-col-desc {
		padding-right: 42px !important;
	}
	.ndx-service-editor .ndx-service-line-total,
	.ndx-invoice-split-layout .ndx-service-line-total {
		font-size: 16px !important;
		text-align: left !important;
	}

	/* Client Blocks on Mobile */
	.ndx-client-block {
		padding: 14px 12px !important;
		border-radius: 12px !important;
		margin-bottom: 14px !important;
	}
	.ndx-client-block-title {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		font-size: 14px !important;
		margin-bottom: 12px !important;
	}

	/* Mobile Buttons Full Width */
	.ndx-form-actions,
	.ndx-form-footer,
	.ndx-inv-sidebar-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
	}
	.ndx-form-actions .ndx-btn,
	.ndx-form-footer .ndx-btn,
	.ndx-inv-sidebar-actions .ndx-btn,
	.ndx-btn-add-client {
		width: 100% !important;
		justify-content: center !important;
		min-height: 44px !important;
	}

	/* Filter Bars on Mobile */
	.ndx-filterbar,
	.ndx-filter-bar {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		padding: 14px !important;
	}
	.ndx-filter-field,
	.ndx-filterbar > div,
	.ndx-filter-bar > div {
		width: 100% !important;
		min-width: 0 !important;
	}
	.ndx-filter-actions {
		display: flex !important;
		gap: 8px !important;
		width: 100% !important;
	}
	.ndx-filter-actions button,
	.ndx-filter-actions .ndx-btn {
		flex: 1 !important;
		justify-content: center !important;
		min-height: 42px !important;
	}

	/* Smooth Horizontal Table Container */
	.ndx-table-wrap {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		border-radius: 12px !important;
		border: 1px solid #e2e8f0 !important;
	}
	.ndx-table {
		min-width: 520px !important;
	}
	.ndx-table td,
	.ndx-table th {
		padding: 10px 9px !important;
		font-size: 12.5px !important;
	}

	/* Modal Dialogs on Mobile */
	.ndx-modal-dialog {
		width: 95vw !important;
		max-width: 95vw !important;
		max-height: 90vh !important;
		margin: 5vh auto !important;
		padding: 16px !important;
		border-radius: 14px !important;
	}
	.ndx-modal-footer {
		flex-direction: column !important;
		gap: 8px !important;
	}
	.ndx-modal-footer .ndx-btn {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* Small Smartphones (480px and down) */
@media (max-width: 480px) {
	.ndx-content {
		padding: 12px 8px 24px !important;
	}
	.ndx-dashboard-hero {
		padding: 14px !important;
		border-radius: 12px !important;
	}
	.ndx-dashboard-hero h1 {
		font-size: 19px !important;
	}
	.ndx-topbar {
		padding: 6px 10px !important;
	}
	.ndx-invoice-section {
		padding: 14px 10px !important;
	}
	.ndx-btn {
		font-size: 13px !important;
		padding: 8px 14px !important;
	}
	.ndx-section-title {
		font-size: 14px !important;
	}
}

/* ==========================================================================
   GLOBAL FORM VALIDATION & NOTIFICATION ENGINE
   ========================================================================== */

/* Invalid Input Highlighting ("field ta read mark hoye jabe") */
.ndx-input-invalid,
input.ndx-input-invalid,
select.ndx-input-invalid,
textarea.ndx-input-invalid {
	border-color: #dc2626 !important;
	background-color: #fef2f2 !important;
	color: #1e293b !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22) !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ndx-input-invalid:focus,
input.ndx-input-invalid:focus,
select.ndx-input-invalid:focus,
textarea.ndx-input-invalid:focus {
	outline: none !important;
	border-color: #b91c1c !important;
	box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.32) !important;
}

/* Shake Animation on Error */
@keyframes ndx-shake {
	0%, 100% { transform: translateX(0); }
	15%, 45%, 75% { transform: translateX(-5px); }
	30%, 60%, 90% { transform: translateX(5px); }
}

.ndx-input-invalid-shake {
	animation: ndx-shake 0.38s ease-in-out !important;
}

/* Currency and Combo Wrappers when invalid */
.ndx-input-currency-wrapper.ndx-input-invalid,
.ndx-currency-input-wrap.ndx-input-invalid,
.ndx-combo.ndx-input-invalid .ndx-combo-toggle {
	border-color: #dc2626 !important;
	background-color: #fef2f2 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22) !important;
}

/* Field Container with Error */
.ndx-field-has-error > label {
	color: #dc2626 !important;
}

/* Inline Field Error Message */
.ndx-field-error-msg {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: #dc2626;
	line-height: 1.35;
	animation: ndx-err-fade 0.2s ease-out;
}

.ndx-field-error-msg svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	color: #dc2626;
}

@keyframes ndx-err-fade {
	from { opacity: 0; transform: translateY(-3px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Fixed Floating Notification Toast ("notification dibe") */
.ndx-validation-toast-container {
	position: fixed;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	width: 90%;
	max-width: 520px;
}

.ndx-validation-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 18px;
	background: #ffffff;
	border: 1.5px solid #f87171;
	border-left: 5px solid #dc2626;
	border-radius: 14px;
	box-shadow: 0 18px 40px -6px rgba(220, 38, 38, 0.25), 0 8px 18px rgba(0, 0, 0, 0.08);
	color: #1e293b;
	animation: ndx-toast-slide-down 0.32s cubic-bezier(0.16, 1, 0.3, 1);
	transition: opacity 0.25s ease, transform 0.25s ease;
	font-family: inherit;
	box-sizing: border-box;
}

.ndx-validation-toast.is-hiding {
	opacity: 0;
	transform: translateY(-16px) scale(0.96);
	pointer-events: none;
}

@keyframes ndx-toast-slide-down {
	0% { opacity: 0; transform: translateY(-26px) scale(0.95); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ndx-toast-icon-wrap {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fee2e2;
	color: #dc2626;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ndx-toast-icon-wrap svg {
	width: 20px;
	height: 20px;
}

.ndx-toast-body {
	flex: 1 1 auto;
	min-width: 0;
}

.ndx-toast-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #991b1b;
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ndx-toast-desc {
	font-size: 12px;
	color: #475569;
	line-height: 1.45;
	margin: 0;
}

.ndx-toast-errors-list {
	margin: 6px 0 0;
	padding-left: 18px;
	font-size: 11.5px;
	color: #b91c1c;
	line-height: 1.45;
}

.ndx-toast-errors-list li {
	margin-bottom: 2px;
}

.ndx-toast-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: #b91c1c;
	background: #fee2e2;
	border: 1px solid #fca5a5;
	padding: 4px 10px;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease;
}

.ndx-toast-action-btn:hover {
	background: #fecaca;
	color: #991b1b;
}

.ndx-toast-close-btn {
	background: transparent;
	border: none;
	color: #94a3b8;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 6px;
	transition: all 0.15s;
	flex-shrink: 0;
}

.ndx-toast-close-btn:hover {
	color: #1e293b;
	background: #f1f5f9;
}