/* dn-styles.css */
/* IMPORTANT: dn-variables.css must be linked BEFORE this file in HTML */

/* --- RESET & BASE STYLES --- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--dn-font-family-primary);
	background: var(--dn-bg-primary);
	/* min-height: 100vh; */
	color: var(--dn-text-primary);
	overflow-x: hidden;
	transition: background-color var(--dn-transition-speed), color var(--dn-transition-speed);
}

body.dn-ltr {
	direction: ltr;
}

body.dn-rtl {
	direction: rtl;
}

/* --- GLOBAL CLASSES & UTILITIES --- */
.dn-shadow-sm {
	box-shadow: 0 2px 8px var(--dn-shadow-color);
}

.dn-shadow-md {
	box-shadow: 0 4px 12px var(--dn-shadow-color-md);
}

.dn-icon-img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

img.dn-icon-img:dir(rtl) {
	transform: scaleX(-1);
}

/* Default icon color adjustment for dark mode if not specifically handled by filter */
.dn-theme-dark .dn-icon-img:not([src*="colored-"]):not([class*="-stat"] .dn-icon-img):not(.dn-saudi-emblem):not(.dn-user-avatar-logo) {
	/* Avoid over-filtering specific icons */
	/* filter: var(--dn-filter-icon-dark-mode); */
	/* Commented out as specific filters are better */

}

/* --- ICON SIZES (Examples, adjust as needed) --- */
.dn-nav-icon .dn-icon-img {
	width: 20px;
	height: 20px;
}

.dn-section-icon .dn-icon-img {
	width: 16px;
	height: 16px;
}

/* ... other icon sizes ... */
#dn-menu-icon-img {
	width: 24px;
	height: 24px;
}

.dn-theme-dark #dn-menu-icon-img {
	filter: var(--dn-filter-icon-dark-mode);
}

.dn-menu-toggle:hover #dn-menu-icon-img {
	filter: var(--dn-filter-to-primary);
}

.dn-theme-dark .dn-menu-toggle:hover #dn-menu-icon-img {
	filter: var(--dn-filter-to-primary);
}

/* --- BUTTONS --- */
.dn-btn {
	padding: var(--dn-padding-sm) var(--dn-padding-md);
	border-radius: var(--dn-border-radius-md);
	font-size: var(--dn-font-size-md);
	font-weight: var(--dn-font-weight-medium);
	cursor: pointer;
	transition: all var(--dn-transition-speed);
	border: 1px solid transparent;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	/* For button text */
}

.dn-btn img.dn-icon-img {
	width: 16px;
	/* Example size */
	height: 16px;
	margin-inline-end: var(--dn-gap-xs);
}

.dn-btn-primary {
	background-color: var(--dn-primary-color);
	color: var(--dn-text-on-primary);
	border-color: var(--dn-primary-color);
}

.dn-btn-primary:hover {
	background-color: var(--dn-primary-dark);
	border-color: var(--dn-primary-dark);
}

.dn-btn-primary img.dn-icon-img {
	filter: var(--dn-filter-icon-inverted);
}

.dn-btn-secondary {
	background-color: var(--dn-bg-primary);
	color: var(--dn-primary-color);
	border-color: var(--dn-border-color);
}

.dn-btn-secondary:hover {
	background-color: var(--dn-bg-secondary);
	border-color: var(--dn-primary-color);
	color: var(--dn-primary-dark);
}

.dn-theme-dark .dn-btn-secondary img.dn-icon-img {
	filter: var(--dn-filter-to-primary);
}

/* --- HEADER --- */
.dn-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--dn-header-height);
	background: var(--dn-bg-secondary);
	border-bottom: 1px solid var(--dn-border-color);
	z-index: var(--dn-z-header);
	transition: padding-left var(--dn-transition-speed), padding-right var(--dn-transition-speed), background-color var(--dn-transition-speed), border-color var(--dn-transition-speed);
}

.dn-header-content {
	height: 100%;
	padding: 0 var(--dn-padding-xxxl);
	/* 30px */
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dn-menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--dn-padding-sm);
	/* 8px */
	border-radius: var(--dn-border-radius-md);
	/* 8px */
	transition: all var(--dn-transition-speed);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dn-menu-toggle:hover {
	background: var(--dn-bg-primary);
}

.dn-header-right {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-lg);
	/* 15px */
	position: relative;
}

.dn-search-box {
	position: relative;
	width: 250px;
	/* Can be a variable if used elsewhere */
}

.dn-font {
	font-family: var(--dn-font-family-primary);
}

.dn-search-input {
	width: 100%;
	padding-block: 10px;
	/* Consider var(--dn-padding-md) or specific */
	border: 1px solid var(--dn-border-color);
	border-radius: var(--dn-border-radius-md);
	font-family: var(--dn-font-family-primary);
	font-size: var(--dn-font-size-base);
	background: var(--dn-bg-primary);
	color: var(--dn-text-primary);
	transition: all var(--dn-transition-speed);
}

.dn-hr {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin-top: 10px;
	margin-bottom: 10px;
}

body.dn-rtl .dn-search-input {
	padding-left: var(--dn-padding-lg);
	padding-right: 40px;
}

/* 40px for icon */
body.dn-ltr .dn-search-input {
	padding-left: 40px;
	padding-right: var(--dn-padding-lg);
}

.dn-search-input:focus {
	outline: none;
	border-color: var(--dn-primary-color);
	background: var(--dn-bg-secondary);
}

.dn-search-input::placeholder {
	color: var(--dn-text-secondary);
}

.dn-search-icon-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dn-search-icon-wrapper .dn-icon-img {
	width: 16px;
	height: 16px;
}

.dn-theme-dark .dn-search-icon-wrapper .dn-icon-img {
	filter: var(--dn-filter-icon-dark-mode);
}

body.dn-rtl .dn-search-icon-wrapper {
	right: var(--dn-padding-md);
}

/* 12px */
body.dn-ltr .dn-search-icon-wrapper {
	left: var(--dn-padding-md);
}

.dn-notifications {
	position: relative;
	cursor: pointer;
}

.dn-notification-icon-wrapper {
	width: 40px;
	/* Can be variable */
	height: 40px;
	background: var(--dn-bg-primary);
	border-radius: var(--dn-border-radius-lg);
	/* 10px */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--dn-transition-speed);
}

.dn-notification-icon-wrapper .dn-icon-img {
	width: 18px;
	height: 18px;
}

.dn-theme-dark .dn-notification-icon-wrapper .dn-icon-img {
	filter: var(--dn-filter-icon-dark-mode);
}

.dn-notification-icon-wrapper:hover {
	background: var(--dn-primary-color);
}

.dn-notification-icon-wrapper:hover .dn-icon-img {
	filter: var(--dn-filter-icon-inverted);
}

.dn-notification-badge {
	position: absolute;
	top: -4px;
	background: var(--dn-color-error);
	color: var(--dn-text-on-primary);
	border-radius: var(--dn-border-radius-lg);
	/* 10px */
	min-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--dn-font-size-xs);
	/* 11px */
	font-weight: var(--dn-font-weight-semibold);
	padding: 0 var(--dn-padding-xs);
	/* 6px, adjusted from 6px to var */
	border: 2px solid var(--dn-bg-secondary);
	transition: border-color var(--dn-transition-speed);
}

body.dn-rtl .dn-notification-badge {
	right: -4px;
}

body.dn-ltr .dn-notification-badge {
	left: -4px;
}

.dn-user-profile {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-md);
	/* 10px */
	padding: var(--dn-padding-xs) var(--dn-padding-md);
	/* 6px 10px */
	background: var(--dn-bg-primary);
	border-radius: var(--dn-border-radius-lg);
	/* 10px */
	cursor: pointer;
	transition: all var(--dn-transition-speed);
}

.dn-user-profile:hover {
	background: var(--dn-primary-color);
}

.dn-user-profile:hover .dn-user-name,
.dn-user-profile:hover .dn-user-role {
	color: var(--dn-text-on-primary) !important;
}

.dn-user-avatar-logo {
	width: 30px;
	/* Can be variable */
	height: 30px;
	border-radius: var(--dn-border-radius-md);
	/* 8px */
	object-fit: contain;
}

.dn-user-details {
	display: flex;
	flex-direction: column;
}

body.dn-rtl .dn-user-details {
	text-align: right;
}

body.dn-ltr .dn-user-details {
	text-align: left;
}

.dn-user-name {
	font-size: var(--dn-font-size-lg);
	/* 16px */
	font-weight: var(--dn-font-weight-bold);
	color: var(--dn-primary-color);
	transition: color var(--dn-transition-speed);
}

.dn-theme-dark .dn-user-name {
	color: var(--dn-primary-light);
}

.dn-user-role {
	font-size: var(--dn-font-size-xs);
	/* 11px */
	color: var(--dn-text-secondary);
	transition: color var(--dn-transition-speed);
}

.dn-header-icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--dn-padding-sm);
	/* 8px */
	border-radius: var(--dn-border-radius-lg);
	/* 10px */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--dn-transition-speed);
}

.dn-header-icon-btn .dn-icon-img {
	width: 20px;
	height: 20px;
}

.dn-theme-dark .dn-header-icon-btn .dn-icon-img {
	filter: var(--dn-filter-icon-dark-mode);
}

.dn-header-icon-btn:hover {
	background-color: var(--dn-header-icon-btn-bg-hover);
}

.dn-header-icon-btn:hover .dn-icon-img {
	filter: var(--dn-filter-to-primary);
}

.dn-theme-dark .dn-header-icon-btn:hover .dn-icon-img {
	filter: var(--dn-filter-to-primary);
}

/* --- DROPDOWNS (Common) --- */
.dn-stat-card-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	/* Can be var(--dn-gap-md) */
	width: 380px;
	/* Consider if this should be variable or responsive */
	background: var(--dn-bg-secondary);
	border: 1px solid var(--dn-border-color);
	border-radius: var(--dn-border-radius-lg);
	/* 10px */
	box-shadow: 0 6px 15px var(--dn-shadow-color-md);
	/* Can be more specific shadow var */
	z-index: var(--dn-z-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--dn-transition-speed) ease, visibility 0s linear var(--dn-transition-speed), transform var(--dn-transition-speed) ease;
	overflow: hidden;
	max-height: 400px;
	/* Adjusted for stat card dropdowns */
	display: flex;
	flex-direction: column;
}

.dn-stat-card-dropdown.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.dn-stat-card-dropdown-header {
	padding: var(--dn-padding-md) var(--dn-padding-lg);
	/* 12px 16px */
	font-weight: var(--dn-font-weight-semibold);
	border-block-end: 1px solid var(--dn-border-color);
	color: var(--dn-text-primary);
	font-size: var(--dn-font-size-base);
	/* 14px */
}

.dn-stat-card-dropdown-list-items {
	padding: 0;
	overflow-y: auto;
	flex-grow: 1;
}

.dn-stat-card-dropdown .dn-dropdown-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px var(--dn-padding-lg);
	/* 10px 16px, 10px can be var */
	border-block-end: 1px solid var(--dn-border-color);
	font-size: var(--dn-font-size-md);
	/* 13px */
	color: var(--dn-text-secondary);
}

.dn-stat-card-dropdown .dn-dropdown-list-item:last-child {
	border-block-end: none;
}

.dn-stat-card-dropdown .dn-dropdown-list-item:hover {
	background-color: var(--dn-bg-primary);
}

.dn-stat-card-dropdown .dn-dropdown-list-item .item-title {
	color: var(--dn-text-primary);
	font-weight: var(--dn-font-weight-medium);
}

.dn-stat-card-dropdown .dn-dropdown-list-item .item-meta {
	font-size: var(--dn-font-size-xs);
}

/* 11px */
.dn-stat-card-dropdown .dn-dropdown-list-item .item-status-badge {
	padding: var(--dn-padding-xs) var(--dn-padding-sm);
	/* 3px 8px */
	border-radius: var(--dn-border-radius-sm);
	/* 6px */
	font-size: var(--dn-font-size-xxs);
	/* 10px */
	font-weight: var(--dn-font-weight-semibold);
}

.dn-stat-card-dropdown-footer {
	padding: var(--dn-padding-md) var(--dn-padding-lg);
	/* 12px 16px */
	text-align: center;
	border-block-start: 1px solid var(--dn-border-color);
}

.dn-stat-card-dropdown-footer a {
	color: var(--dn-link-color);
	text-decoration: none;
	font-weight: var(--dn-font-weight-medium);
	font-size: var(--dn-font-size-base);
	/* 14px */
}

.dn-stat-card-dropdown-footer a:hover {
	text-decoration: underline;
	color: var(--dn-link-hover-color);
}

/* Header Notifications Dropdown Specifics */
#dn-header-notifications-dropdown {
	max-height: 450px;
	/* Header dropdown can be taller */
}

body.dn-rtl #dn-header-notifications-dropdown {
	left: 0;
}

body.dn-ltr #dn-header-notifications-dropdown {
	right: 0;
}

body.dn-rtl .dn-stat-card-dropdown {
	right: 0;
	left: auto;
}

/* For stat cards */
body.dn-ltr .dn-stat-card-dropdown {
	left: 0;
	right: auto;
}

/* For stat cards */

/* General Notification Item Styling */
.dn-notification-item {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-md);
	/* 10px */
	padding: var(--dn-padding-md) var(--dn-padding-xl);
	/* 12px 20px */
	border-block-end: 1px solid var(--dn-border-color);
}

.dn-notification-item:last-child {
	border-block-end: none;
}

.dn-notification-item:hover {
	background: var(--dn-bg-primary);
}

.dn-notification-type-icon {
	width: 28px;
	/* Can be variable */
	height: 28px;
	border-radius: var(--dn-border-radius-circle);
	/* 50% */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dn-notification-type-icon .dn-icon-img {
	width: 14px;
	/* Can be variable */
	height: 14px;
	filter: var(--dn-filter-icon-inverted);
}

.dn-type-info {
	background: var(--dn-color-info);
}

.dn-type-warning {
	background: var(--dn-color-warning);
}

.dn-type-error {
	background: var(--dn-color-error);
}

.dn-type-success {
	background: var(--dn-color-success);
}

.dn-notification-content {
	flex: 1;
}

.dn-notification-title {
	font-size: var(--dn-font-size-md);
	/* 13px */
	margin-block-end: var(--dn-gap-xs);
	/* 2px */
	font-weight: var(--dn-font-weight-medium);
	color: var(--dn-text-primary);
}

.dn-notification-text {
	font-size: var(--dn-font-size-sm);
	/* 12px */
	color: var(--dn-text-secondary);
	line-height: var(--dn-line-height-snug);
	/* 1.3 */
	margin-block-end: var(--dn-gap-xs);
	/* 4px */
}

.dn-notification-time {
	font-size: var(--dn-font-size-xxs);
	/* 10px */
	color: var(--dn-text-secondary);
}

/* --- SIDEBAR --- */
.dn-sidebar {
	position: fixed;
	top: 0;
	height: 100vh;
	width: var(--dn-sidebar-width);
	background: var(--dn-bg-secondary);
	transition: width var(--dn-transition-speed), transform var(--dn-transition-speed), left var(--dn-transition-speed), right var(--dn-transition-speed), background-color var(--dn-transition-speed), border-color var(--dn-transition-speed),
		visibility 0s linear var(--dn-transition-speed);
	z-index: var(--dn-z-sidebar);
	overflow-x: hidden;
	left: auto;
	right: auto;
	visibility: visible;
}

body.dn-rtl .dn-sidebar {
	left: auto;
	right: 0;
	border-left: 1px solid var(--dn-border-color);
	border-right: none;
}

body.dn-ltr .dn-sidebar {
	left: 0;
	right: auto;
	border-left: none;
	border-right: 1px solid var(--dn-border-color);
}

.dn-sidebar.dn-collapsed {
	width: var(--dn-sidebar-collapsed-width);
	overflow-x: visible;
}

.dn-sidebar.dn-collapsed:not(.dn-mobile-open) {
	transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s;
}

.dn-sidebar-header {
	height: var(--dn-header-height);
	padding: 0 var(--dn-padding-xl);
	/* 20px */
	display: flex;
	align-items: center;
	border-block-end: 1px solid var(--dn-border-color);
	transition: border-color var(--dn-transition-speed);
	overflow: hidden;
}

.dn-logo-section {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-lg);
	/* 16px */
	width: 100%;
}

.dn-saudi-emblem {
	width: 40px;
	height: 40px;
	/* Can be variable */
	border-radius: 50%;
	/* 12px */
	flex-shrink: 0;
	object-fit: cover;
}

.dn-system-title-sidebar {
	display: flex;
	flex-direction: column;
	opacity: 1;
	transition: opacity var(--dn-transition-speed-fast) ease-out, width var(--dn-transition-speed-fast) ease-out;
	white-space: nowrap;
}

.dn-sidebar.dn-collapsed .dn-system-title-sidebar {
	opacity: 0;
	width: 0;
	visibility: hidden;
	transition-delay: 0s !important;
}

.dn-main-title-sidebar {
	color: var(--dn-text-primary);
	font-weight: var(--dn-font-weight-bold);
	font-size: var(--dn-font-size-lg);
	/* 16px */
	line-height: var(--dn-line-height-tight);
	/* 1.2 */
	transition: color var(--dn-transition-speed);
}

.dn-sub-title-sidebar {
	color: var(--dn-text-secondary);
	font-size: var(--dn-font-size-sm);
	/* 12px -> changed to sm from xs */
	font-weight: var(--dn-font-weight-medium);
	transition: color var(--dn-transition-speed);
}

.dn-sidebar-content {
	height: calc(100vh - var(--dn-header-height));
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--dn-padding-xl) var(--dn-padding-lg);
	/* 20px 15px */
}

.dn-sidebar-section {
	margin-block-end: var(--dn-gap-md);
	/* 10px */
	padding: 0 var(--dn-padding-xs);
	/* 5px */
}

.dn-sidebar-section .dn-section-label {
	font-size: var(--dn-font-size-xs);
	/* 11px */
	color: var(--dn-text-secondary);
	margin-block-end: var(--dn-gap-md);
	/* 10px */
	padding: var(--dn-padding-sm) var(--dn-padding-md);
	/* 8px 10px */
	font-weight: var(--dn-font-weight-medium);
	opacity: 1;
	transition: opacity var(--dn-transition-speed-fast), color var(--dn-transition-speed), background-color var(--dn-transition-speed);
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--dn-border-radius-md);
	/* 8px */
}

.dn-collapsible-section>.dn-section-label {
	cursor: pointer;
}

.dn-collapsible-section>.dn-section-label:hover {
	background-color: var(--dn-bg-primary);
	color: var(--dn-primary-color);
}

.dn-collapse-icon {
	font-size: var(--dn-font-size-xxs);
	/* 10px */
	transition: transform var(--dn-transition-speed) ease;
	display: inline-block;
	line-height: 1;
}

.dn-collapsible-section>.dn-section-label>.dn-label-text+.dn-collapse-icon {
	margin-inline-start: auto;
}

.dn-sidebar.dn-collapsed .dn-section-label span.dn-label-text {
	display: none;
}

.dn-sidebar.dn-collapsed .dn-section-label .dn-collapse-icon {
	display: none;
}

.dn-collapsible-section nav {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--dn-transition-speed) ease-out;
	display: none;
}

.dn-collapsible-section.dn-section-open nav {
	display: block;
}

.dn-nav-link {
	display: flex;
	align-items: center;
	padding: 10px var(--dn-padding-lg);
	/* 10px 16px */
	color: var(--dn-text-secondary);
	text-decoration: none;
	font-weight: var(--dn-font-weight-medium);
	font-size: var(--dn-font-size-base);
	/* 14px */
	border-radius: var(--dn-border-radius-lg);
	/* 10px */
	transition: all var(--dn-transition-speed);
	margin-block-end: var(--dn-gap-xs);
	/* 4px */
	position: relative;
}

.dn-nav-link:hover {
	background: var(--dn-bg-primary);
	color: var(--dn-primary-color);
}

.dn-nav-link:hover .dn-nav-icon .dn-icon-img {
	filter: var(--dn-filter-to-primary);
}

.dn-theme-dark .dn-nav-link .dn-nav-icon .dn-icon-img {
	filter: var(--dn-filter-icon-dark-mode);
}

/* Default for dark */
.dn-theme-dark .dn-nav-link:hover .dn-nav-icon .dn-icon-img {
	filter: var(--dn-filter-to-primary);
}

/* Hover on dark */
.dn-nav-link.dn-active {
	background: var(--dn-primary-color);
	color: var(--dn-text-on-primary);
}

.dn-nav-link.dn-active .dn-nav-icon,
.dn-nav-link.dn-active .dn-nav-text,
.dn-nav-link.dn-active .dn-nav-badge {
	color: var(--dn-text-on-primary) !important;
}

.dn-nav-link.dn-active .dn-nav-icon .dn-icon-img {
	filter: var(--dn-filter-icon-inverted);
}

.dn-nav-link.dn-active .dn-nav-badge {
	background-color: rgba(255, 255, 255, 0.2) !important;
}

.dn-nav-icon {
	width: 24px;
	/* Can be variable */
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-inline-end: var(--dn-gap-lg);
	/* 16px */
}

.dn-nav-text {
	white-space: nowrap;
	opacity: 1;
	transition: opacity var(--dn-transition-speed-fast) ease-out, width var(--dn-transition-speed-fast) ease-out, visibility 0s linear var(--dn-transition-speed-fast);
}

.dn-sidebar.dn-collapsed .dn-nav-link {
	justify-content: center;
	padding: var(--dn-padding-md);
	/* 10px */
	overflow: visible;
}

.dn-sidebar.dn-collapsed .dn-nav-icon {
	margin-inline-end: 0;
}

.dn-sidebar.dn-collapsed .dn-nav-text {
	opacity: 0;
	width: 0;
	visibility: hidden;
	transition-delay: 0s !important;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

.dn-nav-badge {
	background: var(--dn-nav-badge-bg);
	color: var(--dn-nav-badge-text);
	padding: 2px var(--dn-padding-sm);
	/* 2px 8px */
	border-radius: var(--dn-border-radius-xl);
	/* 12px */
	font-size: var(--dn-font-size-xs);
	/* 11px */
	font-weight: var(--dn-font-weight-semibold);
	opacity: 1;
	transition: opacity var(--dn-transition-speed-fast), background-color var(--dn-transition-speed), color var(--dn-transition-speed);
	margin-inline-start: auto;
}

.dn-sidebar.dn-collapsed .dn-nav-badge {
	opacity: 0;
	visibility: hidden;
	transition-delay: 0s !important;
	position: absolute;
}

/* Sidebar Tooltips */
.dn-nav-link[data-tooltip] {
	position: relative;
}

body.dn-rtl .dn-sidebar.dn-collapsed .dn-nav-link:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: var(--dn-tooltip-bg);
	color: var(--dn-tooltip-text);
	padding: var(--dn-padding-sm) var(--dn-padding-md);
	border-radius: var(--dn-border-radius-md);
	font-size: var(--dn-font-size-md);
	white-space: nowrap;
	z-index: var(--dn-z-tooltip);
}

body.dn-rtl .dn-sidebar.dn-collapsed .dn-nav-link:hover::before {
	content: '';
	position: absolute;
	left: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent var(--dn-tooltip-bg);
	z-index: var(--dn-z-tooltip);
}

body.dn-ltr .dn-sidebar.dn-collapsed .dn-nav-link:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: var(--dn-tooltip-bg);
	color: var(--dn-tooltip-text);
	padding: var(--dn-padding-sm) var(--dn-padding-md);
	border-radius: var(--dn-border-radius-md);
	font-size: var(--dn-font-size-md);
	white-space: nowrap;
	z-index: var(--dn-z-tooltip);
}

body.dn-ltr .dn-sidebar.dn-collapsed .dn-nav-link:hover::before {
	content: '';
	position: absolute;
	right: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 6px 6px 0;
	border-color: transparent var(--dn-tooltip-bg) transparent transparent;
	z-index: var(--dn-z-tooltip);
}

/* --- MAIN WRAPPER & CONTAINER --- */
.dn-main-wrapper {
	margin-top: var(--dn-header-height);
	transition: margin-left var(--dn-transition-speed), margin-right var(--dn-transition-speed);
	min-height: calc(100vh - var(--dn-header-height));
}

.dn-no-header-no-sidebar-main-wrapper {
	padding-top: 0px;
	margin-top: 10px;
}

.dn-main-container {
	padding: var(--dn-padding-xxxl);
	/* 30px */
	max-width: 1600px;
	/* Can be variable if needed */
	margin: 0 auto;
}

/* --- PAGE HEADER --- */
.dn-page-header {
	margin-block-end: var(--dn-gap-xxxl);
}

/* 30px */
.dn-page-title {
	font-size: var(--dn-font-size-xxl);
	/* 28px */
	font-weight: var(--dn-font-weight-bold);
	color: var(--dn-text-primary);
	margin-block-end: var(--dn-gap-sm);
	/* 8px */
	transition: color var(--dn-transition-speed);
}

.dn-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-sm);
	/* 8px */
	font-size: var(--dn-font-size-base);
	/* 14px */
	color: var(--dn-text-secondary);
	transition: color var(--dn-transition-speed);
}

.dn-breadcrumb-separator {
	color: var(--dn-border-color);
	transition: color var(--dn-transition-speed);
}

.dn-breadcrumb-link {
	color: var(--dn-link-color);
	text-decoration: none;
	transition: opacity var(--dn-transition-speed), color var(--dn-transition-speed);
}

.dn-breadcrumb-link:hover {
	opacity: 0.8;
	color: var(--dn-link-hover-color);
}

/* --- STATS SECTION --- */
.dn-stats-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	/* minmax can use vars */
	gap: var(--dn-gap-xxl);
	/* 24px */
	margin-block-end: 40px;
	/* Can be var */
}

.dn-stat-card {
	background: var(--dn-bg-secondary);
	padding: var(--dn-padding-xxl);
	/* 24px */
	border-radius: var(--dn-border-radius-xl);
	/* 12px */
	border: 1px solid var(--dn-border-color);
	display: flex;
	align-items: center;
	gap: var(--dn-gap-lg);
	/* 16px */
	transition: all var(--dn-transition-speed);
	cursor: pointer;
	position: relative;
	/*  animation: dn-slideInUp 0.5s ease-out backwards;*/
}

.dn-stat-card:nth-child(2) {
	animation-delay: 0.05s;
}

.dn-stat-card:nth-child(3) {
	animation-delay: 0.1s;
}

.dn-stat-card:nth-child(4) {
	animation-delay: 0.15s;
}

.dn-stat-card:hover {
	transform: translateY(-4px);
}

/* Can be var */
.dn-stat-card.dn-stat-card-dropdown-active {
	z-index: var(--dn-z-stat-card-active);
}

.dn-stat-icon {
	width: 48px;
	height: 48px;
	/* Can be var */
	border-radius: var(--dn-border-radius-xl);
	/* 12px */
	display: flex;
	align-items: center;
	justify-content: center;
}

.dn-stat-icon .dn-icon-img {
	filter: var(--dn-filter-icon-inverted);
	width: 22px;
	height: 22px;
}

.dn-stat-icon.dn-tasks {
	background: var(--dn-color-info);
}

.dn-stat-icon.dn-overdue {
	background: var(--dn-color-error);
}

.dn-stat-icon.dn-notifications-stat {
	background: var(--dn-color-warning);
}

.dn-stat-icon.dn-systems-stat {
	background: var(--dn-primary-color);
}

.dn-warning {
	background: var(--dn-color-warning) !important;
}

.dn-warning .ui-outputlabel-label {
	color: black !important;
}

.dn-stat-content {
	flex: 1;
}

.dn-stat-number {
	font-size: var(--dn-font-size-xxl);
	/* 28px */
	font-weight: var(--dn-font-weight-bold);
	color: var(--dn-text-primary);
	margin-block-end: var(--dn-gap-xs);
	/* 4px */
	line-height: 1;
	transition: color var(--dn-transition-speed);
}

.dn-stat-label {
	font-size: var(--dn-font-size-base);
	/* 14px */
	color: var(--dn-text-secondary);
	font-weight: var(--dn-font-weight-medium);
	transition: color var(--dn-transition-speed);
}

.dn-stat-trend {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-xs);
	/* 4px */
	font-size: var(--dn-font-size-sm);
	/* 12px */
	margin-block-start: var(--dn-gap-xs);
	/* 4px */
}

.dn-trend-up {
	color: var(--dn-color-success);
}

.dn-trend-down {
	color: var(--dn-color-error);
}

.dn-trend-neutral {
	color: var(--dn-color-neutral-trend);
}

.dn-stat-trend span:first-child {
	margin-inline-end: 2px;
}

/* Specific, keep as is or var if common */

/* --- SECTION CARDS (Departments, Services, Systems, Tasks, Requests) --- */
.dn-top-row-grid {
	display: flex;
	flex-direction: column;
	/* grid-template-columns: 1fr 2fr 1fr; */
	/* Specific layout */
	gap: var(--dn-gap-xxxl);
	/* 30px */
	margin-block-end: var(--dn-gap-xxxl);
	/* 30px */
}

.dn-departments-card .dn-services-card .dn-systems-card {
	width: 100%;
}

.dn-section-card {
	background: var(--dn-bg-secondary);
	border-radius: var(--dn-border-radius-xl);
	/* 12px */
	border: 1px solid var(--dn-border-color);
	overflow: hidden;
	transition: all var(--dn-transition-speed);
	display: flex;
	flex-direction: column;
	animation: dn-fadeIn 0.6s ease-out backwards;
	position: relative;
	z-index: var(--dn-z-section-card);
}

.dn-top-row-grid .dn-departments-card {
	animation-delay: 0.2s;
}

.dn-top-row-grid .dn-services-card {
	animation-delay: 0.25s;
}

.dn-top-row-grid .dn-systems-card {
	animation-delay: 0.3s;
}

.dn-section-card:hover {
	transform: translateY(-2px);
}

/* Can be var */
.dn-section-header {
	padding: var(--dn-padding-xl) var(--dn-padding-xxl);
	/* 20px 24px */
	border-block-end: 1px solid var(--dn-border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: border-color var(--dn-transition-speed);
}

.dn-section-title {
	font-size: var(--dn-font-size-xl);
	/* 18px */
	font-weight: var(--dn-font-weight-semibold);
	color: var(--dn-text-primary);
	display: flex;
	align-items: center;
	gap: var(--dn-gap-md);
	/* 12px */
	transition: color var(--dn-transition-speed);
}

.dn-section-icon {
	width: 28px;
	height: 28px;
	/* Can be var */
	background: var(--dn-primary-color);
	border-radius: var(--dn-border-radius-sm);
	/* 6px */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dn-padding-xs);
	/* 4px */
}

.dn-section-icon .dn-icon-img {
	filter: var(--dn-filter-icon-inverted);
	width: 100%;
	height: 100%;
}

.dn-view-all-btn {
	color: var(--dn-link-color);
	text-decoration: none;
	font-size: var(--dn-font-size-base);
	/* 14px */
	font-weight: var(--dn-font-weight-medium);
	padding: var(--dn-padding-xs) var(--dn-padding-md);
	/* 6px 12px */
	border-radius: var(--dn-border-radius-sm);
	/* 6px */
	transition: all var(--dn-transition-speed);
}

.dn-view-all-btn:hover {
	background: var(--dn-bg-primary);
	color: var(--dn-link-hover-color);
}

.dn-section-content {
	padding: var(--dn-padding-lg) var(--dn-padding-xxl) var(--dn-padding-xxl);
	/* 16px 24px 24px */
	flex-grow: 1;
	overflow-y: auto;
	height: 450px;
}

/* Departments & Systems List Items */
.dn-systems-list .dn-system-item,
.dn-departments-list .dn-department-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--dn-padding-md) 0;
	/* 12px 0 */
	border-block-end: 1px solid var(--dn-border-color);
}

.dn-systems-list .dn-system-item:last-child,
.dn-departments-list .dn-department-item:last-child {
	border-block-end: none;
}

.dn-systems-list .dn-item-info,
.dn-departments-list .dn-item-info {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-md);
	/* 12px */
}

.dn-item-icon.dn-colored-icon-bg {
	width: 36px;
	height: 36px;
	/* Can be var */
	background: var(--dn-colored-icon-background);
	border-radius: var(--dn-border-radius-md);
	/* 8px */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dn-padding-xs);
	/* 6px, was 6px, made xs */
}

.dn-item-icon.dn-colored-icon-bg .dn-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dn-item-details {
	display: flex;
	flex-direction: column;
}

.dn-item-name {
	/* Used in multiple places, stat card dropdown, lists, service grid */
	font-size: var(--dn-font-size-base);
	/* 14px */
	font-weight: var(--dn-font-weight-medium);
	color: var(--dn-text-primary);
	margin-block-end: 2px;
	/* Can be var(--dn-gap-xxs) if defined */
	transition: color var(--dn-transition-speed);
}

.dn-item-description {
	/* Used in multiple places */
	font-size: var(--dn-font-size-sm);
	/* 12px */
	color: var(--dn-text-secondary);
	transition: color var(--dn-transition-speed);
}

/* Services Grid */
.dn-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	/* Specific */
	gap: var(--dn-gap-xl);
	/* 20px */
}

.dn-service-grid-item {
	min-width: 250px;
	max-width: 650px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--dn-padding-lg);
	/* 16px */
	background: var(--dn-bg-primary);
	/* Different from section card bg */
	border-radius: var(--dn-border-radius-md);
	/* 8px */
	transition: background-color var(--dn-transition-speed);
	justify-content: space-between;
	position: relative;
	max-height: 250px;
}

.dn-service-grid-item .dn-item-icon.dn-colored-icon-bg {
	margin-block-end: var(--dn-gap-md);
	/* 10px */
	width: 40px;
	height: 40px;
	/* Can be var */
	padding: var(--dn-padding-sm);
	/* 8px */
}

.dn-service-grid-item .dn-item-name {
	/* Override default .dn-item-name */
	font-weight: var(--dn-font-weight-semibold);
	margin-block-end: var(--dn-gap-xs);
	/* 4px */
	font-size: var(--dn-font-size-md);
	/* 13px */
}

.dn-service-grid-item .dn-item-description {
	/* Override default .dn-item-description */
	font-size: var(--dn-font-size-xs);
	/* 11px */
	margin-block-end: var(--dn-gap-md);
	/* 12px */
	flex-grow: 1;
}

.dn-service-info-btn {
	position: absolute;
	top: var(--dn-padding-sm);
	/* 10px -> 8px for consistency */
	background: none;
	border: none;
	padding: var(--dn-padding-xs);
	/* 4px */
	cursor: pointer;
	border-radius: var(--dn-border-radius-circle);
	/* 50% */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	/* Local z-index, keep as is */
}

body.dn-rtl .dn-service-info-btn {
	left: var(--dn-padding-sm);
	right: auto;
}

body.dn-ltr .dn-service-info-btn {
	right: var(--dn-padding-sm);
	left: auto;
}

.dn-service-info-btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.dn-theme-dark .dn-service-info-btn:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.dn-service-info-btn img.dn-icon-img {
	width: 18px;
	height: 18px;
	/* Can be var */
	/* color: var(--dn-text-secondary); Removed as it's an img src */
}

.dn-theme-dark .dn-service-info-btn img.dn-icon-img {
	filter: var(--dn-filter-icon-dark-mode);
}

/* Bottom Content Grid (Tasks & Requests) */
.dn-bottom-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Specific */
	gap: var(--dn-gap-xxxl);
	/* 30px */
	margin-block-end: 40px;
	/* Can be var */
}

.dn-bottom-content-grid .dn-section-card {
	position: relative;
	/* Keep for z-index context */
	z-index: var(--dn-z-section-card);
}

.dn-bottom-content-grid .dn-section-card:nth-child(1) {
	animation-delay: 0.35s;
}

.dn-bottom-content-grid .dn-section-card:nth-child(2) {
	animation-delay: 0.4s;
}

.dn-list-item {
	/* Used in Tasks & Requests */
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--dn-padding-md) 0;
	/* 12px 0 */
	border-block-end: 1px solid var(--dn-border-color);
}

.dn-list-item:last-child {
	border-block-end: none;
}

.dn-item-left {
	display: flex;
	align-items: center;
	gap: var(--dn-gap-md);
	/* 12px */
}

.dn-priority-indicator {
	width: 6px;
	/* Specific, keep or var if common pattern */
	height: 32px;
	border-radius: 3px;
	/* Specific */
}

.dn-priority-high {
	background: var(--dn-color-error);
}

.dn-priority-medium {
	background: var(--dn-color-warning);
}

.dn-priority-low {
	background: var(--dn-color-success);
}

.dn-item-text {
	display: flex;
	flex-direction: column;
}

.dn-item-title {
	/* Shared with .dn-item-name, so uses its vars */
	font-size: var(--dn-font-size-base);
	font-weight: var(--dn-font-weight-medium);
	color: var(--dn-text-primary);
	margin-block-end: 2px;
	transition: color var(--dn-transition-speed);
}

.dn-item-meta {
	font-size: var(--dn-font-size-sm);
	/* 12px */
	color: var(--dn-text-secondary);
	transition: color var(--dn-transition-speed);
}

.dn-item-right {
	display: flex;
	flex-direction: column;
	gap: var(--dn-gap-xs);
	/* 4px */
}

body.dn-rtl .dn-item-right {
	align-items: flex-start;
	text-align: left;
}

body.dn-ltr .dn-item-right {
	align-items: flex-end;
	text-align: right;
}

.dn-item-date {
	font-size: var(--dn-font-size-sm);
	/* 12px */
	color: var(--dn-text-secondary);
	transition: color var(--dn-transition-speed);
}

.dn-item-status {
	padding: 2px var(--dn-padding-sm);
	/* 2px 8px */
	border-radius: var(--dn-border-radius-md);
	/* 8px */
	font-size: var(--dn-font-size-xxs);
	/* 10px */
	font-weight: var(--dn-font-weight-semibold);
	text-align: center;
	min-width: 60px;
	/* Specific, keep or var */
	transition: background-color var(--dn-transition-speed), color var(--dn-transition-speed);
}

.dn-status-pending {
	background: var(--dn-color-pending-bg);
	color: var(--dn-color-pending-text);
}

.dn-status-progress {
	background: var(--dn-color-progress-bg);
	color: var(--dn-color-progress-text);
}

.dn-status-completed {
	background: var(--dn-color-completed-bg);
	color: var(--dn-color-completed-text);
}

.dn-status-overdue {
	background: var(--dn-color-overdue-bg);
	color: var(--dn-color-overdue-text);
}

/* --- RESPONSIVE STYLES & OVERRIDES --- */
@media (min-width : 769px) {

	/* Desktop view */
	body.dn-rtl .dn-header {
		padding-left: 0;
		padding-right: var(--dn-sidebar-width);
	}

	body.dn-rtl .dn-header.dn-sidebar-collapsed {
		padding-left: 0;
		padding-right: var(--dn-sidebar-collapsed-width);
	}

	body.dn-ltr .dn-header {
		padding-left: var(--dn-sidebar-width);
		padding-right: 0;
	}

	body.dn-ltr .dn-header.dn-sidebar-collapsed {
		padding-left: var(--dn-sidebar-collapsed-width);
		padding-right: 0;
	}

	body.dn-rtl .dn-main-wrapper {
		margin-left: 0;
		margin-right: var(--dn-sidebar-width);
	}

	body.dn-rtl .dn-main-wrapper.dn-sidebar-collapsed {
		margin-left: 0;
		margin-right: var(--dn-sidebar-collapsed-width);
	}

	body.dn-ltr .dn-main-wrapper {
		margin-left: var(--dn-sidebar-width);
		margin-right: 0;
	}

	body.dn-ltr .dn-main-wrapper.dn-sidebar-collapsed {
		margin-left: var(--dn-sidebar-collapsed-width);
		margin-right: 0;
	}

	.dn-sidebar {
		transform: translateX(0) !important;
		visibility: visible !important;
		overflow-x: hidden;
	}

	.dn-sidebar.dn-collapsed {
		overflow-x: visible;
	}

	.dn-overlay.dn-active {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

@media (min-width : 1350px) {

	.dn-top-row-grid {
		flex-direction: row;
	}

	.dn-departments-card .dn-systems-card {
		flex: 0 0 25%;
		width: auto;
	}

	.dn-services-card {
		flex: 1;
		/* Fills gaps if 1 or 3 are missing */
		min-width: 50%;
	}
}

/* @media (max-width : 1200px) {
	.dn-services-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
} */

@media (max-width : 992px) {
	.dn-bottom-content-grid {
		grid-template-columns: 1fr;
	}

	.dn-search-box {
		display: none;
	}

	.dn-stat-card-dropdown {
		width: 320px;
	}

	/* Consider auto or percentage */
	#dn-header-notifications-dropdown {
		width: 320px;
	}

	/* Consider auto or percentage */
	/* .dn-services-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	} */
}

@media (max-width : 768px) {

	/* Mobile and Tablet portrait */
	.dn-sidebar {
		width: var(--dn-sidebar-width);
		z-index: var(--dn-z-sidebar);
		visibility: hidden;
		transition: transform var(--dn-transition-speed) ease, visibility 0s linear var(--dn-transition-speed);
		overflow-x: hidden;
	}

	body.dn-rtl .dn-sidebar {
		right: 0;
		left: auto;
		transform: translateX(100%);
	}

	body.dn-ltr .dn-sidebar {
		left: 0;
		right: auto;
		transform: translateX(-100%);
	}

	.dn-sidebar.dn-mobile-open {
		transform: translateX(0) !important;
		visibility: visible !important;
		transition-delay: 0s !important;
	}

	.dn-header,
	.dn-main-wrapper {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.dn-overlay {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		/* Can be var */
		z-index: var(--dn-z-overlay);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dn-transition-speed) ease, visibility 0s linear var(--dn-transition-speed);
	}

	.dn-overlay.dn-active {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.dn-header-content {
		padding: 0 var(--dn-padding-lg);
	}

	/* 15px */
	.dn-user-profile .dn-user-details {
		display: none;
	}

	.dn-user-profile {
		padding: var(--dn-padding-sm);
	}

	/* 8px */
	.dn-main-container {
		padding: var(--dn-padding-xl) var(--dn-padding-lg);
	}

	/* 20px 15px */
	.dn-stats-section {
		grid-template-columns: 1fr;
	}

	.dn-page-title {
		font-size: var(--dn-font-size-xl);
	}

	/* 24px -> was xl, made it same as 18px for now */
	.dn-services-grid {
		grid-template-columns: 1fr;
	}

	.dn-service-info-btn {
		top: var(--dn-padding-sm);
	}

	/* 8px */
	body.dn-rtl .dn-service-info-btn {
		left: var(--dn-padding-sm);
		right: auto;
	}

	body.dn-ltr .dn-service-info-btn {
		right: var(--dn-padding-sm);
		left: auto;
	}

	.dn-header-right {
		gap: var(--dn-gap-sm);
	}

	/* 8px */
	.dn-header-icon-btn {
		padding: var(--dn-padding-xs);
	}

	img.dn-header-icon-btn:dir(rtl) {
		transform: scaleX(-1);
	}

	/* 6px */
	.dn-stat-card-dropdown {
		left: var(--dn-padding-lg) !important;
		right: var(--dn-padding-lg) !important;
		width: auto !important;
	}

	#dn-header-notifications-dropdown {
		width: calc(100vw - 20px) !important;
		/* 20px can be 2 * var(--dn-padding-md) */
		max-width: 360px !important;
		/* Specific max */
	}

	body.dn-rtl #dn-header-notifications-dropdown {
		left: 5px !important;
		right: auto !important;
	}

	/* 5px specific */
	body.dn-ltr #dn-header-notifications-dropdown {
		right: 5px !important;
		left: auto !important;
	}

	.dn-stat-card-dropdown.active,
	#dn-header-notifications-dropdown.active {
		transform: translateY(0) !important;
	}
}

/* --- ANIMATIONS --- */
@ keyframes dn-slideInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	/* 20px can be var */
	to {
		opacity: 1;
		transform: translateY(0);
	}

}

@ keyframes dn-fadeIn {
	from {
		opacity: 0;

	}

	to {
		opacity: 1;
	}

}

/* --- SCROLLBARS --- */
.dn-sidebar-content::-webkit-scrollbar,
.dn-section-content::-webkit-scrollbar,
.dn-stat-card-dropdown-list-items::-webkit-scrollbar,
#dn-header-notifications-dropdown .dn-stat-card-dropdown-list-items::-webkit-scrollbar {
	width: 6px;
	/* Can be var */
}

.dn-sidebar-content::-webkit-scrollbar-track,
.dn-section-content::-webkit-scrollbar-track,
.dn-stat-card-dropdown-list-items::-webkit-scrollbar-track,
#dn-header-notifications-dropdown .dn-stat-card-dropdown-list-items::-webkit-scrollbar-track {
	background: transparent;
}

.dn-sidebar-content::-webkit-scrollbar-thumb,
.dn-section-content::-webkit-scrollbar-thumb,
.dn-stat-card-dropdown-list-items::-webkit-scrollbar-thumb,
#dn-header-notifications-dropdown .dn-stat-card-dropdown-list-items::-webkit-scrollbar-thumb {
	background: var(--dn-border-color);
	/* Lighter color for thumb */
	border-radius: 3px;
	/* Can be var */
}

.dn-sidebar-content::-webkit-scrollbar-thumb:hover,
.dn-section-content::-webkit-scrollbar-thumb:hover,
.dn-stat-card-dropdown-list-items::-webkit-scrollbar-thumb:hover,
#dn-header-notifications-dropdown .dn-stat-card-dropdown-list-items::-webkit-scrollbar-thumb:hover {
	background: var(--dn-text-secondary);
	/* Darker on hover */
}

/* Dark Theme Specific Icon Filters (if general one is not enough) */
/* These are examples, you might not need all of them if general .dn-theme-dark .dn-icon-img works well */
.dn-theme-dark .dn-nav-icon .dn-icon-img:not(.dn-filter-to-primary):not([filter*="invert(1)"]) {
	/* Avoid overriding active/hover states */
	/* filter: var(--dn-filter-icon-dark-mode); */

}

/* ... (More specific dark theme overrides if needed beyond variable changes) ... */

/* error page */
.dn-error-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	text-align: center;
	padding: 20px;
	padding-top: var(--dn-header-height);
	/* يضمن عدم تداخل المحتوى مع الهيدر */
}

.dn-error-card {
	max-width: 600px;
}

.dn-error-graphic {
	position: relative;
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dn-error-code {
	font-size: 180px;
	font-weight: var(--dn-font-weight-bold);
	color: var(--dn-text-primary);
	line-height: 1;
	z-index: 2;
}

.dn-error-bg-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 500px;
	height: auto;
	z-index: 1;
	opacity: 0.5;
}

.dn-error-title {
	font-size: 32px;
	font-weight: var(--dn-font-weight-bold);
	margin-bottom: 12px;
	color: var(--dn-text-primary);
}

.dn-error-subtitle {
	font-size: 18px;
	color: var(--dn-text-secondary);
	margin-bottom: 32px;
	line-height: 1.7;
}

@media (max-width : 768px) {
	.dn-error-code {
		font-size: 120px;
	}

	.dn-error-title {
		font-size: 24px;
	}

	.dn-error-subtitle {
		font-size: 16px;
	}

	.dn-user-details {
		display: none;
	}


	/* إخفاء تفاصيل المستخدم في الشاشات الصغيرة */
}



/*  Service card css */

.dn-service-card {
	background: var(--dn-bg-secondary);
	border-radius: 24px;
	padding: 15px;
	max-width: 400px;
	width: 100%;
	 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	/* border-color: var(--dn-border-color); */
	position: relative;
}

.dn-service-card-status-icon {

	top: 20px;
	width: 36px;
	height: 36px;
	background: var(--dn-primary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}



.dn-service-card-status-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--dn-text-on-primary);
	stroke-width: 3;
	fill: none;
}

.dn-service-card-title {
	font-size: 20px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 12px;
	margin-top: 8px;
}

/* RTL - align right */
[dir="rtl"] .dn-service-card-title {
	text-align: right;
}

/* LTR - align left */
[dir="ltr"] .dn-service-card-title {
	text-align: left;
}

.dn-service-card-description {
	font-size: 15px;
	color: #6b7280;
	margin-bottom: 24px;
	line-height: 1.6;
}

/* RTL - align right */
[dir="rtl"] .dn-service-card-description {
	text-align: right;
}

/* LTR - align left */
[dir="ltr"] .dn-service-card-description {
	text-align: left;
}

.dn-service-card-tags-container {
	display: none;
	gap: 8px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}



.dn-service-card-tag {
	background: #e8f5f1;
	color: var(--dn-primary-light);
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
}

.dn-service-card-buttons-container {
	display: flex;
	gap: 12px;
}



.dn-service-card-btn {
	/* padding: 14px 28px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: none; */
	transition: all 0.3s ease;
}

.dn-service-card-btn-primary {
	background: var(--dn-primary-color);
	color: var(--dn-text-on-primary);
}

.dn-service-card-btn-primary:hover {
	background: var(--dn-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px var(--dn-primary-dark);
}

.dn-service-card-btn-secondary {
	background: var(--dn-primary-light);
	color: var(-dn-text-on-primary);
}

.dn-service-card-btn-secondary:hover {
	background: var(--dn-primary-light);
	transform: translateY(-2px);
}

.dn-service-card-btn:active {
	transform: translateY(0);
}