/* ===== Grid Wrapper ===== */
.acc-grid-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
}

/* ===== Header ===== */
.e-grid .e-headercell,
.e-grid .e-headercell .e-headercelldiv {
	background-color: #046195 !important; /* header blue */
	color: #ffffff !important;
	border: none !important;
	padding-right: 28px;
}

.e-grid .e-headercell .e-headertext {
	color: #ffffff !important;
	white-space: normal !important;
	word-break: break-word;
}

/* ===== Sort & Filter Icons ===== */
.e-grid .e-headercell.e-sortable .e-headertext::after {
	content: ' ⇅';
	font-size: 12px;
	margin-left: 4px;
	opacity: 0.6;
	color: #ffff00; /* bright yellow */
}

.e-grid .e-headercell.e-sortable .e-sortfilterdiv.e-icons::before,
.e-grid .e-headercell .e-sortnumber {
	color: #ffff00 !important; /* bright yellow */
	opacity: 1 !important;
}

.e-grid .e-headercell .e-filtermenudiv.e-icon-filter {
	color: #ffff00 !important; /* bright yellow filter icon */
}

.e-grid .e-headercell:hover .e-sortfilterdiv.e-icons::before {
	color: #ffffff !important; /* white on hover */
}

/* ===== Rows ===== */
.e-grid .e-rowcell {
	white-space: normal !important;
	word-break: break-word;
}

.e-grid .e-row td:first-child {
	background-color: #d6e6eb !important;
}

.e-grid .e-row td:not(:first-child) {
	background-color: #f5f9fa !important;
}

/* ===== Detail Card (Mobile) ===== */
.acc-detail-card {
	border: 1px solid #d6e6eb;
	border-radius: 6px;
	margin: 6px 0;
	padding: 10px;
	background-color: #ffffff;
	font-size: 14px;
	line-height: 1.5;
}

.acc-detail-card strong {
	display: inline-block;
	width: 120px;
}

/* ===== Popups ===== */
.e-popup,
.e-dialog {
	z-index: 100000 !important;
}

/* ===== Search + Filter Row ===== */
.acc-grid-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}


/* ===== Pager Active Page ===== */
.e-pager .e-numericcontainer .e-active {
	background-color: #046195 !important;
	border-color: #046195 !important;
}

/* ===== Force sort & filter arrows to always be yellow ===== */
.e-grid .e-headercell.e-sortable .e-sortfilterdiv.e-icons::before,
.e-grid .e-headercell.e-sortable .e-headertext::after,
.e-grid .e-headercell .e-sortnumber,
.e-grid .e-headercell .e-filtermenudiv.e-icon-filter {
	color: #ffff00 !important; /* bright yellow */
}

.e-grid .e-headercell:hover .e-sortfilterdiv.e-icons::before,
.e-grid .e-headercell:hover .e-headertext::after {
	color: #ffff00 !important; /* keep yellow on hover */
}

/* Force all sort icons (arrows) to bright yellow */
.e-grid .e-headercell.e-sortable .e-sortfilterdiv.e-icons,
.e-grid .e-headercell.e-sortable .e-sortfilterdiv.e-icons svg,
.e-grid .e-headercell.e-sortable .e-sortfilterdiv.e-icons::before {
	color: #ffff00 !important; /* for font icons, if any */
	fill: #ffff00 !important; /* for SVG arrows */
	opacity: 1 !important;
}

/* Ensure hover doesn’t change it */
.e-grid .e-headercell.e-sortable:hover .e-sortfilterdiv.e-icons,
.e-grid .e-headercell.e-sortable:hover .e-sortfilterdiv.e-icons svg,
.e-grid .e-headercell.e-sortable:hover .e-sortfilterdiv.e-icons::before {
	color: #ffff00 !important;
	fill: #ffff00 !important;
}

/* Always make Syncfusion sort arrows bright yellow */
.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow),
.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) svg {
	color: #ffff00 !important; /* for font icons, if any */
	fill: #ffff00 !important; /* for SVG arrows */
	opacity: 1 !important;
}

/* Ensure hover doesn’t override color */
.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow):hover,
.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow):hover svg {
	color: #ffff00 !important;
	fill: #ffff00 !important;
}
/* ===== Grid Filters ===== */
.acc-grid-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}