@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html,
body {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, [tabindex="-1"]:focus {
	outline: none !important;
}

:root {
	/* 		--mud-appbar-height: 0rem;
		--apbhgt: 3rem;
		--btbhgt: 0rem;
		--mlyhgt: calc(100vh - var(--apbhgt) - var(--btbhgt));
		--nvmwdt: 20rem;
		--mlywdt: calc(100vw - var(--nvmwdt)); */

	--bgcol-prm: #6e8efb;
	--bgcol-sec: #a777e3;
	--bgcol-glass: rgba(255, 255, 255, 0.1);
	--bgcol-glass-bordr: rgba(255, 255, 255, 0.2);
	--col-white: #ffffff;
	--col-gray: #c0c0c0;
	--col-lgray: #e0e0e0;
	user-select: none;
	-webkit-user-select: none;
	/* Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
}

img {
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	pointer-events: none;
}

input,
textarea {
	user-select: text !important;
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
}

.formheadrtxt {
	color: var(--col-lgray);
}

.formsubheadrtxt {
	color: var(--col-gray);
}

.nonlinktxt {
	color: var(--col-white);
}

.linktxt {
	color: var(--col-white);
	cursor: pointer;
	text-decoration: underline;
}

/* Buttons */
.btn-sbmt {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 8px;
	background: var(--col-white);
	color: #333;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.3s;
	margin-top: 10px;
}

.btn-sbmt:hover {
	transform: scale(1.02);
	background: #f0f0f0;
}

.btn-sbmt:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: rgba(255, 255, 255, 0.5);
	/* Dimmer white */
	color: rgba(0, 0, 0, 0.4);
	transform: none !important;
	/* Stop the hover scale effect */
}

/*.mddylg-main
{
  width: 26rem;
  margin: 1rem;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  transition: width 0.2s ease;
  border-radius: 1rem;
}

.mud-dialog .mud-dialog-title
{
  padding: 0;
}

.mud-dialog .mud-dialog-content
{
  padding: 0;
}*/


/* Custom Checkbox Color to match KhataZen Theme */
.kz-checkbox.mud-checkbox-checked .mud-icon {
	color: #4CAF50 !important;
}

/* MENU LIST */
.profmenu-list {
	/* THEME UPDATE: Dynamic Glass & Border */
	background: var(--card-glass);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	overflow: hidden;
}

.profmenu-itm {
	padding: 15px 20px;
	min-height: 72px;
	display: flex;
	align-items: center;
	gap: 15px;
	/* THEME UPDATE: Dynamic Border */
	border-bottom: 1px solid var(--card-border);
	cursor: pointer;
	transition: background 0.2s;
}

.profmenu-itm:last-child {
	border-bottom: none;
}

.profmenu-itm:active {
	/* THEME UPDATE: Shadow color usually works for active states too */
	background: var(--shadow-color);
}

.profmenu-txt {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ==========================================
   KHATAZEN DESIGN SYSTEM & STANDARD COMPONENTS
   ========================================== */

/* 1. Outlined Cards with Accent Borders */
.kz-card {
	background: var(--card-glass, #fff);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.03);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1.5px solid var(--kz-border-color, var(--card-border, #eee)) !important;
	border-top: 5px solid var(--kz-accent-color, #4F46E5) !important;
}

.kz-card:hover {
	border-color: var(--kz-border-hover-color, rgba(79, 70, 229, 0.3)) !important;
	box-shadow: 0 6px 24px var(--kz-shadow-hover-color, rgba(79, 70, 229, 0.08)) !important;
}

/* Card Accent Color Modifiers */
.kz-card.theme-indigo {
	--kz-accent-color: #6366F1;
	--kz-border-color: rgba(99, 102, 241, 0.18);
	--kz-border-hover-color: rgba(99, 102, 241, 0.3);
	--kz-shadow-hover-color: rgba(99, 102, 241, 0.08);
}

.kz-card.theme-violet {
	--kz-accent-color: #8B5CF6;
	--kz-border-color: rgba(139, 92, 246, 0.18);
	--kz-border-hover-color: rgba(139, 92, 246, 0.3);
	--kz-shadow-hover-color: rgba(139, 92, 246, 0.08);
}

.kz-card.theme-rose {
	--kz-accent-color: #EC4899;
	--kz-border-color: rgba(236, 72, 153, 0.18);
	--kz-border-hover-color: rgba(236, 72, 153, 0.3);
	--kz-shadow-hover-color: rgba(236, 72, 153, 0.08);
}

/* 2. Compact Icon-Based Card Headers */
.kz-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.kz-card-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--kz-icon-bg, rgba(79, 70, 229, 0.1));
	color: var(--kz-accent-color, #4F46E5);
}

.kz-card.theme-indigo .kz-card-icon-wrapper {
	--kz-icon-bg: rgba(99, 102, 241, 0.1);
}

.kz-card.theme-violet .kz-card-icon-wrapper {
	--kz-icon-bg: rgba(139, 92, 246, 0.1);
}

.kz-card.theme-rose .kz-card-icon-wrapper {
	--kz-icon-bg: rgba(236, 72, 153, 0.1);
}

.kz-card-title-text {
	font-size: 0.95rem;
	font-weight: 750;
	color: var(--text-primary);
	line-height: 1.2;
}

.kz-card-subtitle-text {
	font-size: 0.75rem;
	color: var(--text-secondary);
	line-height: 1.2;
}

/* 3. Reusable Settings/Toggle List Rows */
.kz-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.015);
	border: 1px solid var(--card-border);
	gap: 12px;
	flex-wrap: wrap;
	transition: background-color 0.2s;
}

.kz-list-row-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.kz-list-row-lbl {
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Modifier for clean list items inside cards (e.g. Profiles settings) */
.kz-profile-row {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--card-border) !important;
	border-radius: 0 !important;
	padding: 14px 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: nowrap !important;
}

.kz-profile-row:last-child {
	border-bottom: none !important;
}

.kz-profile-row .kz-list-row-right {
	width: auto !important;
	border-top: none !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* Stacked variation for profile rows (e.g. segmented control below text) */
.kz-profile-row.kz-row-stack {
	flex-direction: column !important;
	align-items: stretch !important;
}

.kz-profile-row.kz-row-stack .kz-list-row-right {
	width: 100% !important;
	border-top: 1px dashed var(--card-border) !important;
	padding-top: 12px !important;
	margin-top: 8px !important;
	display: flex !important;
	align-items: center !important;
}

.kz-profile-row.kz-row-stack .theme-toggles-minimal {
	width: 100% !important;
	display: flex !important;
	gap: 0 !important;
}

.kz-profile-row.kz-row-stack .theme-opt-min {
	flex: 1 !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 8px 0 !important;
	border-right: 1px solid var(--card-border) !important;
}

.kz-profile-row.kz-row-stack .theme-opt-min:last-child {
	border-right: none !important;
}

/* 4. Global Save/Action Buttons (Clean Indigo, No Suffix, No Icon) */
.kz-btn-save {
	background: #4F46E5;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 8px 20px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
	outline: none;
}

.kz-btn-save:hover:not(:disabled) {
	background: #4338ca;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
	transform: translateY(-1px);
}

.kz-btn-save:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.kz-btn-save:disabled {
	background: rgba(0, 0, 0, 0.08);
	color: var(--text-secondary);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.5;
}

/* Reusable Spinner inside Save Button */
.kz-btn-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: kz-spin 1s infinite linear;
}

@keyframes kz-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* 5. Statistics Layout Grid */
.kz-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-bottom: 25px;
	width: 100%;
}

.kz-stats-grid.grid-2 {
	grid-template-columns: repeat(2, 1fr) !important;
}

.kz-stat-box {
	background: rgba(0, 0, 0, 0.015);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 15px 10px;
	text-align: center;
	min-width: 0;
}

.kz-stat-box-num {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 5px 0;
}

/* Global Responsive Layout Rules */
@media (max-width: 600px) {
	.kz-stats-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 10px !important;
	}

	.kz-stats-grid.grid-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.kz-list-row {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 14px;
	}

	.kz-list-row-right {
		width: 100%;
		justify-content: space-between;
		border-top: 1px dashed var(--card-border);
		padding-top: 10px;
		margin-top: 4px;
	}

	.kz-profile-row {
		flex-direction: row !important;
		align-items: center !important;
		padding: 14px 0 !important;
	}

	.kz-profile-row .kz-list-row-right {
		width: auto !important;
		border-top: none !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
		display: flex !important;
		align-items: center !important;
	}
}

/* ==========================================
   DARK THEME AWARENESS & OVERRIDES
   ========================================== */
.kzdarkmode .kz-btn-save:disabled {
	background: rgba(255, 255, 255, 0.08) !important;
}

.kzdarkmode .kz-list-row {
	background: rgba(255, 255, 255, 0.02) !important;
}

.kzdarkmode .kz-stat-box {
	background: rgba(255, 255, 255, 0.02) !important;
}

.kzdarkmode .kz-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================
   WIZARD / QUESTIONNAIRE GLOBAL SYSTEM
   ========================================== */
.wiz-layout {
	justify-content: center;
	padding: 20px;
}

.wiz-stack {
	display: grid;
	grid-template-areas: "stack";
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	position: relative;
	flex-grow: 1;
	min-height: 0;
	height: auto;
	align-items: center;
}

.wiz-slide {
	grid-area: stack;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	padding: 4px 8px 4px 4px;
	transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
	opacity: 0;
	pointer-events: none;
	transform: scale(0.9);
}

.wiz-slide::-webkit-scrollbar {
	width: 6px;
}

.wiz-slide::-webkit-scrollbar-track {
	background: transparent;
}

.wiz-slide::-webkit-scrollbar-thumb {
	background: var(--mud-palette-lines-default);
	border-radius: 3px;
}

.wiz-slide::-webkit-scrollbar-thumb:hover {
	background: #FFD700;
}

.wiz-slide.active {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: all;
	z-index: 10;
}

.wiz-slide.past {
	transform: translateX(-110%) scale(0.9);
	opacity: 0;
}

.wiz-slide.future {
	transform: translateX(110%) scale(0.9);
	opacity: 0;
}

.land-anim-content {
	animation: slideInDown 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-60px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wiz-nav-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20px;
	width: 100%;
	position: relative;
}

.wiz-btn-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 20px;
}

.wiz-nav-btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--mud-palette-surface);
	border: 1px solid var(--mud-palette-lines-default);
	color: var(--mud-palette-text-primary);
	transition: 0.3s;
	flex-shrink: 0;
}

.wiz-nav-nxt {
	background-color: #FFD700 !important;
	color: black !important;
	border: none;
	box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
}

.wiz-nav-nxt .mud-icon-root {
	color: black !important;
}

.back-btn-anim {
	width: 0;
	opacity: 0;
	margin-right: 0;
	transform: scale(0.5);
	pointer-events: none;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.back-btn-anim.visible {
	width: 56px;
	opacity: 1;
	margin-right: 20px;
	transform: scale(1);
	pointer-events: all;
}

.wiz-dots-row {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 10px;
}

.wiz-pg-dot {
	height: 6px;
	border-radius: 3px;
	transition: all 0.5s;
	background: var(--mud-palette-lines-default);
	width: 6px;
}

.wiz-pg-dot.active {
	background: #FFD700;
	width: 20px;
}

.skip-anchor-container {
	position: absolute;
	bottom: 0;
	right: 0;
	padding-bottom: 5px;
}

.skip-lnk {
	font-size: 0.85rem;
	color: var(--mud-palette-text-secondary);
	cursor: pointer;
	text-decoration: none;
	font-weight: 500;
}

.skip-lnk:hover {
	color: #FFD700;
}

.active-unit-lbl {
	color: #FFD700 !important;
	transition: color 0.3s ease;
}

.inactive-unit-lbl {
	color: var(--mud-palette-text-secondary) !important;
	opacity: 0.6;
	transition: color 0.3s ease;
}

/* --- CHIPS STYLING --- */
.chip-grid {
	display: grid;
	gap: 12px;
	width: 100%;
}

.chip-grid-3 {
	display: grid;
	gap: 10px;
	width: 100%;
	grid-template-columns: 1fr 1fr 1fr;
}

.chip-opt {
	background: var(--mud-palette-surface);
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: 16px;
	padding: 15px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	color: var(--mud-palette-text-primary);
	text-align: center;
	position: relative;
	gap: 10px;
}

.chip-opt:active {
	transform: scale(0.98);
}

.chip-opt.selected {
	background: rgba(255, 215, 0, 0.15);
	border-color: #FFD700;
	color: var(--mud-palette-text-primary);
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
	font-weight: 600;
}

.chip-check-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--mud-palette-background);
	border-radius: 50%;
	color: #FFD700;
}

.chip-check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--mud-palette-lines-default);
	display: flex;
	align-items: center;
	justify-content: center;
}

.chip-opt.selected .chip-check {
	background: #FFD700;
	border-color: #FFD700;
	color: black;
}

/* --- WIZARD TEXTS --- */
.wiz-titl {
	font-size: 2rem;
	font-weight: 800;
	color: var(--mud-palette-text-primary);
	text-align: center;
	margin-bottom: 5px;
}

.wiz-sub {
	font-size: 0.9rem;
	color: var(--mud-palette-text-secondary);
	text-align: center;
	margin-bottom: 30px;
}

/* ==========================================
   PREVIEW DIALOG WIZARD SYSTEM
   ========================================== */
.prv-dlg-root {
	background: var(--app-bg) !important;
	border-radius: 24px;
	overflow: hidden;
	width: 100%;
	height: 80vh;
	max-height: 550px;
	border: 1px solid var(--card-border);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
}

.prv-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1001;
	background: rgba(0, 0, 0, 0.05);
	color: var(--text-primary);
	border-radius: 50%;
}

.kzdarkmode .prv-close-btn {
	background: rgba(255, 255, 255, 0.05);
}

.prv-cpe-pg {
	--anim-speed: 0.5s;
	background: var(--mud-palette-background);
	color: var(--mud-palette-text-primary);
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.prv-cpe-glow {
	position: absolute;
	top: -50px;
	left: -50px;
	width: 250px;
	height: 250px;
	background: var(--mud-palette-primary);
	filter: blur(120px);
	opacity: 0.1;
	z-index: 0;
	pointer-events: none;
}

.prv-layout {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 20px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.prv-wiz-stack {
	display: grid;
	grid-template-areas: "stack";
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	position: relative;
	flex-grow: 1;
	min-height: 0;
	height: auto;
	align-items: center;
}

.prv-wiz-slide {
	grid-area: stack;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	padding: 4px 8px 4px 4px;
	transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	opacity: 0;
	pointer-events: none;
	transform: scale(0.9);
}

.prv-wiz-slide::-webkit-scrollbar {
	width: 6px;
}

.prv-wiz-slide::-webkit-scrollbar-track {
	background: transparent;
}

.prv-wiz-slide::-webkit-scrollbar-thumb {
	background: var(--mud-palette-lines-default);
	border-radius: 3px;
}

.prv-wiz-slide::-webkit-scrollbar-thumb:hover {
	background: #FFD700;
}

.prv-wiz-slide.active {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: all;
	z-index: 10;
}

.prv-wiz-slide.past {
	transform: translateX(-110%) scale(0.9);
	opacity: 0;
}

.prv-wiz-slide.future {
	transform: translateX(110%) scale(0.9);
	opacity: 0;
}

.prv-wiz-nav-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 15px;
	width: 100%;
	position: relative;
}

.prv-wiz-btn-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 15px;
}

.prv-wiz-nav-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--mud-palette-surface);
	border: 1px solid var(--mud-palette-lines-default);
	color: var(--mud-palette-text-primary);
	transition: 0.3s;
	flex-shrink: 0;
}

.prv-wiz-nav-nxt {
	background-color: #FFD700 !important;
	color: black !important;
	border: none;
	box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.prv-wiz-nav-nxt .mud-icon-root {
	color: black !important;
}

.prv-back-btn-anim {
	width: 0;
	opacity: 0;
	margin-right: 0;
	transform: scale(0.5);
	pointer-events: none;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prv-back-btn-anim.visible {
	width: 48px;
	opacity: 1;
	margin-right: 15px;
	transform: scale(1);
	pointer-events: all;
}

.prv-wiz-dots-row {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-bottom: 8px;
}

.prv-wiz-pg-dot {
	height: 5px;
	border-radius: 2.5px;
	transition: all 0.4s;
	background: var(--mud-palette-lines-default);
	width: 5px;
}

.prv-wiz-pg-dot.active {
	background: #FFD700;
	width: 16px;
}

.prv-skip-container {
	font-size: 0.8rem;
	color: var(--mud-palette-text-secondary);
	cursor: pointer;
	margin-top: 5px;
}

.prv-skip-container:hover {
	color: #FFD700;
}

.prv-dlg-root .wiz-titl {
	font-size: 1.6rem;
}

.prv-dlg-root .wiz-sub {
	font-size: 0.85rem;
	margin-bottom: 20px;
}

.prv-dlg-root .cpe-inp-glass {
	background: var(--mud-palette-surface);
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 12px;
	transition: 0.3s;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: visible !important;
}

.prv-dlg-root .chip-grid {
	display: grid;
	gap: 10px;
	width: 100%;
}

.prv-dlg-root .chip-opt {
	background: var(--mud-palette-surface);
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: 14px;
	padding: 12px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	color: var(--mud-palette-text-primary);
	text-align: center;
	position: relative;
	gap: 8px;
}

.prv-dlg-root .chip-opt.selected {
	background: rgba(255, 215, 0, 0.15);
	border-color: #FFD700;
	color: var(--mud-palette-text-primary);
	box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
	font-weight: 600;
}

.prv-dlg-root .chip-check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--mud-palette-lines-default);
	display: flex;
	align-items: center;
	justify-content: center;
}

.prv-dlg-root .chip-opt.selected .chip-check {
	background: #FFD700;
	border-color: #FFD700;
	color: black;
}

/* ==========================================
   KHATAZEN PREMIUM LOGIN & SEEDING STYLES
   ========================================== */

.kz-login-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	background: radial-gradient(circle at 50% 50%, #312e81 0%, #1e1b4b 50%, #0f172a 100%);
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	padding: 16px;
	box-sizing: border-box;
	overflow-y: auto;
	user-select: auto !important;
	-webkit-user-select: auto !important;
}

.kz-glass-card {
	background: rgba(30, 41, 59, 0.6);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 4px solid #6366f1;
	/* Premium indigo indicator */
	border-radius: 20px;
	padding: 32px 28px;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 0 40px rgba(99, 102, 241, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translateY(20px);
	animation: kz-card-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	user-select: auto !important;
	-webkit-user-select: auto !important;
}

.kz-brand-section {
	text-align: center;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.kz-logo-glow {
	background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
	border: 1.5px solid rgba(99, 102, 241, 0.4);
	border-radius: 14px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
	margin-bottom: 12px;
	transition: transform 0.3s ease;
}

.kz-logo-glow:hover {
	transform: scale(1.05);
	border-color: rgba(99, 102, 241, 0.7);
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.kz-logo-img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.1));
}

.kz-brand-title {
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.03em;
	outline: none;
	/* Prevents outline on focus */
}

.kz-brand-subtitle {
	color: #94a3b8;
	font-size: 0.8rem;
	font-weight: 500;
	margin: 4px 0 0 0;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

.kz-form {
	width: 100%;
}

.kz-input-group {
	margin-bottom: 14px;
	width: 100%;
}

/* Custom styles targeting standard HTML text fields inside our login form */
.kz-glass-card .txtbox-group {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
}

.kz-glass-card .txtbox-group input {
	width: 100%;
	padding: 12px 16px;
	padding-right: 44px;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	background: rgba(15, 23, 42, 0.6);
	color: #f8fafc;
	font-family: inherit;
	font-size: 0.9rem;
	outline: none;
	pointer-events: auto;
	caret-color: #f8fafc !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: border-box;
}

.kz-glass-card .txtbox-group input::placeholder {
	color: #64748b;
}

.kz-glass-card .txtbox-group input:focus {
	border-color: #6366f1;
	background: rgba(15, 23, 42, 0.85);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Override browser autofill yellow/bright background styling */
.kz-glass-card .txtbox-group input:-webkit-autofill,
.kz-glass-card .txtbox-group input:-webkit-autofill:hover,
.kz-glass-card .txtbox-group input:-webkit-autofill:focus,
.kz-glass-card .txtbox-group input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
	-webkit-text-fill-color: #f8fafc !important;
	transition: background-color 5000s ease-in-out 0s;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

.kz-glass-card .eye-btn {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: color 0.2s;
}

.kz-glass-card .eye-btn:hover {
	color: #6366f1;
}

.kz-glass-card .chk-lbl-cntnr {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	width: 100%;
	margin-bottom: 18px;
}

.kz-glass-card .chk-lbl-cntnr input[type="checkbox"] {
	accent-color: #6366f1;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.kz-glass-card .btn-sbmt {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 10px;
	background: #6366f1;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.kz-glass-card .btn-sbmt:hover:not(:disabled) {
	background: #4f46e5;
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
	transform: translateY(-1px);
}

.kz-glass-card .btn-sbmt:active:not(:disabled) {
	transform: translateY(1px);
}

.kz-glass-card .btn-sbmt:disabled {
	opacity: 0.5;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.3);
	box-shadow: none;
	cursor: not-allowed;
}

.kz-glass-card .btn-glasbtn {
	width: 100%;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
	color: #f8fafc;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.kz-glass-card .btn-glasbtn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

.kz-glass-card .btn-glasbtn:active:not(:disabled) {
	transform: translateY(1px);
}

.kz-glass-card .google-icon-small {
	width: 16px;
	height: 16px;
}

.kz-divider {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 20px 0;
	color: #64748b;
}

.kz-divider::before,
.kz-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
}

.kz-divider span {
	padding: 0 12px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.kz-footer {
	margin-top: 24px;
	color: #64748b;
	font-size: 0.7rem;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1px;
}

@keyframes kz-card-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================
   REPORT PRINTING & PAGINATION CONTAINER
   ========================================== */
.kzen-paper-container {
	background: rgba(0, 0, 0, 0.05);
	padding: 2rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: 100%;
	min-height: calc(100vh - 64px);
	overflow-y: auto;
}

.kzen-paper-page {
	background: #ffffff !important;
	color: #000000 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

/* A4 Page: 210mm x 297mm */
.kzen-paper-page.paper-a4 {
	width: 210mm;
	height: 297mm;
	padding: 15mm 20mm;
}

/* A5 Page: 148mm x 210mm */
.kzen-paper-page.paper-a5 {
	width: 148mm;
	height: 210mm;
	padding: 10mm 15mm;
}

/* Pinned Footer for pagination pages */
.kzen-paper-footer {
	position: absolute;
	bottom: 10mm;
	left: 20mm;
	right: 20mm;
}

.paper-a5 .kzen-paper-footer {
	bottom: 8mm;
	left: 15mm;
	right: 15mm;
}

/* Silent container for measuring heights */
.kzen-silent-measure-container {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* Responsive screen scaling for pages */
@media (max-width: 768px) {
	.kzen-paper-container {
		padding: 0.5rem;
		background: transparent;
	}

	.kzen-paper-page {
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		padding: 1rem !important;
		box-shadow: none;
		border: 1px solid var(--card-border);
		border-radius: 12px;
	}

	.kzen-paper-footer {
		position: static !important;
		margin-top: 3.5rem !important;
		padding-top: 1rem;
		border-top: 1px dashed #ddd;
	}
}

/* Print Specific Rules Override */
@media print {
	@page a4-layout {
		size: A4 portrait;
		margin: 0;
	}

	@page a5-layout {
		size: A5 portrait;
		margin: 0;
	}

	@page {
		margin: 0;
	}

	/* Hide standard UI elements */
	.no-print,
	.mud-appbar,
	.mud-drawer:not(.kzen-print-drawer),
	.mud-popover-provider,
	.kzen-navmenu,
	.mud-dialog-container,
	.kzen-dropdown-backdrop,
	.mud-overlay,
	button,
	.mud-button-root {
		display: none !important;
	}

	body,
	html {
		background: #ffffff !important;
		color: #000000 !important;
		font-family: serif !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.kzen-paper-container {
		padding: 0 !important;
		background: transparent !important;
		overflow: visible !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}

	.kzen-paper-page {
		box-shadow: none !important;
		border: none !important;
		margin: 0 !important;
		background: #ffffff !important;
		color: #000000 !important;
		position: relative !important;
	}

	.kzen-paper-page:not(:last-child) {
		page-break-after: always !important;
		break-after: page !important;
	}

	.kzen-paper-page.paper-a4 {
		page: a4-layout;
		width: 210mm !important;
		height: 296mm !important;
		/* Fits both A4 and Letter paper under default margins with 8mm safety spacing */
		padding: 15mm 20mm !important;
	}

	.kzen-paper-page.paper-a5 {
		page: a5-layout;
		width: 148mm !important;
		height: 209mm !important;
		/* Fits A5 paper under default margins with 8mm safety spacing */
		padding: 10mm 15mm !important;
	}

	.kzen-paper-footer {
		position: absolute !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
	}
}

/* Print Preview Interface Overlay */
.kzen-print-preview-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1400;
	background: var(--mud-palette-background-grey, #f8fafc);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}

.kzen-print-toolbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: var(--mud-palette-surface, #ffffff);
	border-bottom: 1px solid var(--card-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	z-index: 1500;
	pointer-events: all;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	color: var(--text-primary);
}

.kzen-print-progress-container {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--mud-palette-background, #ffffff);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1450;
	pointer-events: all;
}

.kzen-paper-container {
	margin-top: 64px;
}

/* Print layout table style */
.kzen-print-table {
	width: 100%;
}

.kzen-print-table th {
	border-bottom: 2px solid #000000 !important;
	padding: 6px 4px !important;
	font-weight: 700 !important;
	color: #000000 !important;
	font-size: 0.8rem;
}

.kzen-print-table td {
	border-bottom: 1px dashed #dddddd !important;
	padding: 6px 4px !important;
	color: #000000 !important;
	font-size: 0.8rem;
}

/* ==========================================
   KZEN PRINT DRAWER CUSTOM OVERRIDES
   ========================================== */
.kzen-print-drawer,
.kzen-print-drawer .mud-drawer-content {
	max-width: 100% !important;
	display: flex;
	flex-direction: column;
	background-color: var(--mud-palette-background-grey, #f1f5f9) !important;
}

.kzen-print-drawer .mud-drawer-content {
	position: relative !important;
	overflow: hidden !important;
}

.kzen-print-drawer .kzen-print-toolbar {
	position: sticky !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 64px;
	flex-shrink: 0;
	z-index: 10;
	background-color: var(--mud-palette-surface, #ffffff);
}

.kzen-print-drawer .kzen-paper-container {
	margin-top: 0 !important;
	padding: 2rem 1rem;
	overflow-y: auto !important;
	flex-grow: 1;
	height: calc(100vh - 64px);
}

.kzen-print-drawer .kzen-print-progress-container {
	position: absolute !important;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: var(--mud-palette-surface, #ffffff);
}

/* Zoom Capsule */
.kzen-zoom-capsule {
	display: inline-flex;
	align-items: center;
	background-color: var(--mud-palette-background-grey, #f1f5f9) !important;
	border: 1px solid var(--card-border, #e2e8f0) !important;
	border-radius: 9999px;
	padding: 2px 6px;
	color: var(--text-secondary, #607d8b) !important;
	gap: 2px;
}

.kzen-zoom-capsule .zoom-value {
	color: var(--text-secondary, #607d8b) !important;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0 8px;
	cursor: pointer;
	user-select: none;
}

.kzen-zoom-capsule .zoom-value:hover {
	color: var(--mud-palette-primary) !important;
}

/* Dark theme specific zoom overrides */
.kzdarkmode .kzen-zoom-capsule {
	background-color: rgba(255, 255, 255, 0.05) !important;
	border-color: var(--card-border) !important;
	color: var(--text-secondary) !important;
}

.kzdarkmode .kzen-zoom-capsule .zoom-value {
	color: var(--text-secondary) !important;
}

/* Floating Stacking FAB buttons */
.kzen-fab-container {
	position: absolute !important;
	bottom: 2rem;
	right: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	z-index: 1000;
}

/* Ensure Print drawer FAB buttons stack correctly on top of print viewer overlay */
.kzen-print-drawer .kzen-fab-container {
	z-index: 1600 !important;
}

/* Position page FABs above the bottom navigation menu on mobile screens (max-width: 959px) */
@media (max-width: 959px) {
	.with-botm-nav .kzen-fab-container {
		bottom: calc(64px + env(safe-area-inset-bottom) + 1.5rem) !important;
		right: 1.5rem !important;
	}
}

/* Close FAB Custom Style to prevent blinding white in dark mode */
.kzen-fab-container .kzen-close-fab {
	background-color: var(--mud-palette-surface) !important;
	color: var(--mud-palette-text-primary) !important;
	border: 1px solid var(--mud-palette-divider) !important;
}

.kzen-fab-container .kzen-close-fab:hover {
	background-color: var(--mud-palette-background-grey) !important;
	color: var(--mud-palette-primary) !important;
}

/* Mobile-first responsive table toolbar */
@media (max-width: 600px) {
	.mud-table-toolbar {
		flex-direction: column !important;
		align-items: stretch !important;
		height: auto !important;
		padding: 12px 16px !important;
		gap: 8px !important;
	}
	.mud-table-toolbar .mud-spacer {
		display: none !important;
	}
	.mud-table-toolbar .mud-input-control {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
	}
}

@media print {

	/* 1. Reset root and layout heights to allow natural multi-page flow and prevent offsets */
	html,
	body,
	#app,
	.mobile-layout,
	.mud-layout,
	.mud-main-content,
	.mud-main-content.pt-16,
	.mud-main-content[class*="pt-"],
	.content-scroll,
	.content-scroll.no-botm-pad,
	.content-scroll:not(.no-botm-pad),
	.content-scroll.full-screen {
		height: auto !important;
		min-height: auto !important;
		overflow: visible !important;
		position: static !important;
		padding: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin: 0 !important;
	}

	#app,
	.mobile-layout,
	.mud-layout,
	.mud-main-content,
	.content-scroll,
	.kzen-print-drawer,
	.kzen-print-drawer .mud-drawer-content,
	.kzen-paper-container {
		background: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
	}

	/* 2. Hide all non-printing screen components completely */
	.mud-appbar,
	.mud-drawer:not(.kzen-print-drawer),
	.mud-drawer-close,
	.mud-overlay,
	.kzen-bottom-nav,
	.report-container,
	.no-print {
		display: none !important;
	}

	/* 4. Format the print drawer to fill the printed page naturally */
	.kzen-print-drawer {
		display: block !important;
		position: static !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		overflow: visible !important;
		background: #ffffff !important;
		box-shadow: none !important;
	}

	.kzen-print-drawer .mud-drawer-content {
		display: block !important;
		position: static !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		overflow: visible !important;
		background: #ffffff !important;
	}

	/* 5. Force A4/A5 container layout to print at 100% scale and clear screen scrollbars/margins */
	.kzen-print-drawer .kzen-paper-container {
		zoom: 1 !important;
		transform: none !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}

	/* Reset dark mode variable overrides and backgrounds during print to avoid black bar leaks */
	.kzdarkmode {
		--app-bg: #ffffff !important;
		--card-glass: #ffffff !important;
		--card-border: #dddddd !important;
		--text-primary: #000000 !important;
		--text-secondary: #333333 !important;
		--text-tertiary: #666666 !important;
		--shadow-color: transparent !important;
		--drawer-bg: #ffffff !important;
		background: #ffffff !important;
		background-image: none !important;
	}

	.kzdarkmode .mobile-layout,
	.kzdarkmode .mud-layout,
	.kzdarkmode .mud-main-content,
	.kzdarkmode .content-scroll,
	.kzdarkmode .kzen-print-drawer,
	.kzdarkmode .kzen-print-drawer .mud-drawer-content {
		background: #ffffff !important;
		background-image: none !important;
	}

	/* Force printing background colors and images */
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
}

/* ==========================================
   TABLE SELECTION & HIGHLIGHT STYLES
   ========================================== */
.kzen-table tbody tr.kz-selected-row {
	background: rgba(59, 130, 246, 0.08) !important;
}

.kzdarkmode .kzen-table tbody tr.kz-selected-row {
	background: rgba(59, 130, 246, 0.12) !important;
}

/* ==========================================
   GLOBAL KZEN-TABLE COMPACT & UX STYLES
   ========================================== */
.kzen-table {
	background: transparent !important;
}
.kzen-table table {
	width: 100% !important;
	table-layout: fixed !important;
	min-width: 1100px !important;
}
.kzen-items-table table {
	min-width: 1200px !important;
}
.kzen-table .mud-table-container {
	min-height: 480px !important;
}
.kzen-ledger-table .mud-table-container {
	min-height: 320px !important;
}
.kzen-ledger-table th:first-child,
.kzen-ledger-table td:first-child {
	width: 50px !important;
	min-width: 50px !important;
	max-width: 50px !important;
	text-align: center !important;
}

.kzen-table {
	position: relative !important;
}
.kzen-table .mud-table-loading-row {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	display: block !important;
	border: none !important;
	z-index: 10;
}
.kzen-table .mud-table-loading-row th,
.kzen-table .mud-table-loading-row td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}
.kzen-table .mud-table-loading-progress {
	margin-top: 0 !important;
	height: 3px !important;
}

/* Dark Mode Striped Table Row Background Override */
.kzdarkmode {
	--mud-palette-table-striped: rgba(255, 255, 255, 0.02) !important;
}

.kzen-table thead,
.kzen-table .mud-table-head {
	background: var(--table-header-bg) !important;
}

.kzen-table th,
.kzen-table .mud-table-head .mud-table-cell {
	color: var(--text-secondary) !important;
	font-weight: 700 !important;
	border-bottom: 2px solid var(--card-border) !important;
}

.kzen-table td {
	border-bottom: 1px solid var(--table-row-border) !important;
	padding: 6px 16px !important;
}

/* ==========================================
   KZEN MULTISELECT TABLE CHECKBOX ALIGNMENT
   ========================================== */
.kzen-multiselect-table th:first-child:not(.mud-table-empty-row),
.kzen-multiselect-table td:first-child:not(.mud-table-empty-row) {
	width: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	text-align: center !important;
	padding: 0 !important;
}

.kzen-table:has(.mud-table-empty-row) table {
	table-layout: auto !important;
	min-width: 100% !important;
}

.kzen-table:has(.mud-table-empty-row) thead {
	display: none !important;
}

.kzen-table .mud-table-empty-row {
	text-align: center !important;
	border: none !important;
	padding: 3rem 1rem !important;
}

.kzen-multiselect-table th:first-child .mud-input-control,
.kzen-multiselect-table td:first-child .mud-input-control {
	margin: 0 auto !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.kzen-multiselect-table td:first-child .d-flex {
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
}

.kzen-multiselect-table th:first-child .mud-checkbox,
.kzen-multiselect-table td:first-child .mud-checkbox {
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	color: var(--text-primary) !important;
}

.kzen-multiselect-table th:first-child .mud-icon-button,
.kzen-multiselect-table td:first-child .mud-icon-button {
	color: var(--text-primary) !important;
	padding: 2px !important;
}

.kzen-multiselect-table th:first-child .mud-icon-root,
.kzen-multiselect-table td:first-child .mud-icon-root {
	color: var(--text-primary) !important;
}

/* ==========================================
   GLOBAL REPORT VIEW LAYOUT & TOKENS
   ========================================== */
.report-container {
	font-family: 'Outfit', sans-serif;
	padding: 1.5rem;
}

@media (max-width: 600px) {
	.report-container {
		padding: 0.75rem;
	}
}

.report-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (max-width: 600px) {
	.report-header {
		gap: 0.5rem;
	}
}

.report-title {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--text-primary);
	margin: 0;
}

@media (max-width: 600px) {
	.report-title {
		font-size: 1.35rem;
	}
}

.report-subtitle {
	font-size: 0.95rem;
	margin-top: 2px;
}

@media (max-width: 600px) {
	.report-subtitle {
		display: none;
	}
}

.kzen-btn {
	text-transform: none !important;
	border-radius: 12px !important;
	font-weight: 600 !important;
}

@media (max-width: 600px) {
	.kzen-back-btn {
		min-width: unset !important;
		padding: 4px 8px !important;
	}
	.kzen-btn-text {
		display: none;
	}
}

.empty-report-card {
	background: var(--card-glass);
	border: 1px solid var(--card-border);
	box-shadow: var(--glass-shadow);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	max-width: 500px;
	margin: 4rem auto;
}

.report-grid-card {
	background: var(--card-glass);
	border: 1px solid var(--card-border);
	border-radius: 24px;
	box-shadow: var(--glass-shadow);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden;
}

.kzen-denied-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	text-align: center;
	font-family: 'Outfit', sans-serif;
}

/* ==========================================
   GLOBAL REPORT FILTERS & CARD LAYOUTS
   ========================================== */
.filters-card {
	background: var(--card-glass);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	box-shadow: var(--glass-shadow);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.kzen-refresh-btn {
	background: rgba(59, 130, 246, 0.1) !important;
	border-radius: 8px !important;
}

.kzen-refresh-btn:hover {
	background: rgba(59, 130, 246, 0.2) !important;
}

.kzen-round-btn {
	text-transform: none !important;
	border-radius: 20px !important;
	font-weight: 600 !important;
}

/* ==========================================
   GLOBAL BOTTOM FILTER DRAWER & FAB
   ========================================== */
.kzen-filter-drawer {
	background: var(--card-glass) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border-top: 1px solid var(--card-border) !important;
	border-top-left-radius: 24px !important;
	border-top-right-radius: 24px !important;
	transition: bottom 225ms cubic-bezier(0, 0, 0.2, 1), transform 225ms cubic-bezier(0, 0, 0.2, 1), visibility 225ms !important;
}

.kzen-filter-drawer.mud-drawer--closed {
	transform: translateY(100%) !important;
	visibility: hidden !important;
}

@media (min-width: 600px) {
	.kzen-filter-drawer {
		width: 440px !important;
		left: auto !important;
		right: 0 !important;
		border-left: 1px solid var(--card-border) !important;
		border-top-right-radius: 0px !important;
	}
}

.kzen-filter-drawer-content {
	padding: 1.5rem 1.25rem 2.5rem 1.25rem;
}

.kzen-fab-container {
	position: fixed;
	bottom: 80px;
	right: 20px;
	z-index: 1000;
}

/* ==========================================
   GLOBAL DETAILED TRANSACTION DRAWER SUMMARY
   ========================================== */
.drawer-header-summary {
	background: var(--card-box-bg);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 1.25rem;
}

.summary-lbl {
	font-size: 0.65rem;
	color: var(--text-secondary);
	font-weight: 700;
	text-transform: uppercase;
	display: block;
	margin-bottom: 2px;
}

.summary-val {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text-primary);
	display: block;
}

/* ==========================================
   GLOBAL MUDTABLE CELL ALIGNMENT UTILITIES
   ========================================== */
.kzen-table th.kzen-align-right {
	text-align: right !important;
	padding-right: 6px !important;
}

.kzen-table th.kzen-align-center {
	text-align: center !important;
}

/* ==========================================
   TARGETED TEXT SELECTION OVERRIDES
   ========================================== */
.kzen-table td,
.kzen-selectable {
	user-select: text !important;
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
}

/* ==========================================
   GLOBAL CUSTOM HTML/CSS DROPDOWN SELECTOR
   ========================================== */
.kzen-custom-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	border: none;
	border-radius: 8px;
	padding: 6px 28px 6px 8px;
	font-family: 'Outfit', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-primary);
	cursor: pointer;
	outline: none;
	transition: background-color 0.2s;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 16px;
	min-width: 140px;
}
.kzen-custom-select:hover {
	background-color: rgba(0, 0, 0, 0.04);
}
.kzdarkmode .kzen-custom-select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f4f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}
.kzdarkmode .kzen-custom-select:hover {
	background-color: rgba(255, 255, 255, 0.05);
}
.kzen-custom-select:focus {
	background-color: rgba(0, 0, 0, 0.04);
}
.kzdarkmode .kzen-custom-select:focus {
	background-color: rgba(255, 255, 255, 0.05);
}
.kzen-custom-select option {
	background-color: #ffffff !important;
	color: #1f2937 !important;
}
.kzdarkmode .kzen-custom-select option {
	background-color: #1e1e1e !important;
	color: #f3f4f6 !important;
}

/* Active Filters Banner */
.active-filters-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(110, 142, 251, 0.08); /* Translucent primary theme color */
	border: 1px solid rgba(110, 142, 251, 0.15);
	border-radius: 8px;
	padding: 6px 12px;
	margin: 8px 0 12px 0;
	gap: 12px;
	transition: all 0.25s ease-in-out;
}

.kzdarkmode .active-filters-banner {
	background: rgba(110, 142, 251, 0.12);
	border-color: rgba(110, 142, 251, 0.25);
}

.filters-summary-text {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	width: 100%;
}

.filter-summary-icon {
	color: #6e8efb;
	flex-shrink: 0;
}

.filter-chips-container {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	flex-wrap: nowrap; /* Keep it single row */
}

.filter-chip {
	display: flex;
	align-items: center;
	gap: 4px;
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-primary);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 160px; /* Truncate individual chips if too long */
}

.kzdarkmode .filter-chip {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

.chip-icon {
	color: var(--text-secondary);
	font-size: 0.9rem !important;
	flex-shrink: 0;
}

.chip-label {
	color: var(--text-secondary);
	font-weight: 600;
}

.chip-value {
	color: var(--text-primary);
	font-weight: 700;
}

.clear-filters-btn {
	padding: 4px !important;
	flex-shrink: 0;
}

/* Ledger Metadata Banner */
.ledger-metadata-banner {
	display: flex;
	flex-direction: column;
	background: rgba(110, 142, 251, 0.05); /* Soft primary tint */
	border: 1px solid rgba(110, 142, 251, 0.12);
	border-left: 4px solid #6e8efb; /* Distinct left accent border */
	border-radius: 6px;
	padding: 8px 14px;
	margin: 8px 0 12px 0;
	gap: 6px;
	transition: all 0.25s ease-in-out;
}

.kzdarkmode .ledger-metadata-banner {
	background: rgba(110, 142, 251, 0.08);
	border-color: rgba(110, 142, 251, 0.2);
	border-left-color: #6e8efb;
}

.metadata-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.metadata-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* Allow wrapping on small screens */
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	line-height: 1.4;
}

.metadata-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.metadata-value {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-left: 6px;
}

.metadata-separator {
	margin: 0 10px;
	color: var(--mud-palette-divider);
	font-weight: 400;
	font-size: 0.9rem;
}

/* Reset table focus outlines to prevent hover highlight issues on drawer close */
.kzen-table,
.kzen-table .mud-table-container {
	outline: none !important;
	box-shadow: none !important;
}

/* ==========================================
   iOS PWA INSTALL BANNER
   ========================================== */
.ios-pwa-banner {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  left: 20px;
  right: 20px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-glass);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px var(--shadow-color);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: slide-down 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
}

.ios-pwa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ios-pwa-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.ios-pwa-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.ios-pwa-close:hover {
  background-color: var(--card-border);
}

.ios-pwa-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ios-pwa-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.ios-pwa-instructions {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.ios-pwa-instructions strong {
  color: var(--text-primary);
}

.ios-pwa-share-icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin: 0 4px;
}

@keyframes slide-down {
  from {
    transform: translateY(-100%) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}