/**
 * Modern App Shell CSS
 * Layout, Components, and Utilities for Prince Company Management System
 * 
 * قواعد CSS للنظام الحديث:
 * - استخدم الفئات app-* (app-card, app-page-header, etc.) بدلاً من الأنماط المباشرة
 * - تجنب استخدام الأنماط المضمنة (inline styles) - استخدم الفئات من هذا الملف
 * - جميع الفئات متجاوبة وتدعم RTL تلقائياً
 */

/* ==========================================================================
   THEME TRANSITION - انتقال سلس بين الوضع النهاري والليلي
   ========================================================================== */
html,
body,
.app-container,
.app-card,
.app-page-header,
.app-page-title,
.app-sidebar-new,
.app-topnav,
.app-content,
.app-main-wrapper,
#page_title,
.app-attendance-status,
.app-dashboard-search,
.app-search-wrapper {
  transition: background-color 0.4s ease, color 0.4s ease,
    border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* ==========================================================================
   BASE LAYOUT
   ========================================================================== */

/* Base Text Colors - تطبيق على جميع العناصر */
body,
html {
  color: var(--text-primary, var(--color-neutral-900));
  transition: background-color 0.4s ease, color 0.4s ease;
}

[data-theme="dark"] body,
[data-theme="dark"] html {
  color: var(--text-primary);
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* App Container */
.app-container {
  display: flex;
  min-height: 100vh;
  background-color: var(--content-bg);
  direction: rtl;
  overflow-x: hidden; /* Prevent horizontal scroll */
  transition: background-color 0.4s ease, color 0.4s ease;
  color: var(--text-primary, var(--color-neutral-900));
}

[data-theme="dark"] .app-container {
  color: var(--text-primary);
}

/* Main Content Wrapper */
.app-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-right: var(--sidebar-width);
  transition: margin-right var(--transition-base);
}

.app-main-wrapper.sidebar-hidden {
  margin-right: 0;
}

/* Content Area */
.app-content {
  flex: 1;
  padding: var(--content-padding);
  padding-top: calc(var(--topnav-height) + var(--content-padding));
  min-height: 100vh;
  background-color: var(--content-bg);
  transition: background-color var(--transition-base);
}

/* ==========================================================================
   SIDEBAR - NEW DESIGN
   ========================================================================== */

/* ============================================
   MODERN SIDEBAR - DARK MODE OVERRIDES FIRST
   ============================================ */

/* Force white text in dark mode - HIGHEST PRIORITY */
[data-theme="dark"] .app-sidebar-new *:not(i):not(.fa):not([class*="icon"]) {
  color: #fff !important;
}

/* Modern Sidebar Container */
.app-sidebar-new {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  height: 100vh;
  background: linear-gradient(
    180deg,
    var(--sidebar-bg) 0%,
    var(--sidebar-bg) 100%
  );
  color: var(--sidebar-color);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--transition-base), transform var(--transition-base),
    background-color var(--transition-base), right var(--transition-base);
  z-index: var(--z-fixed);
  border-left: 1px solid var(--sidebar-border-color);
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.app-sidebar-new.hidden {
  right: calc(-1 * var(--sidebar-width));
}

[data-theme="dark"] .app-sidebar-new {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0f0f0f 100%);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
  color: #fff !important;
}

/* Force white text color for all sidebar text elements in dark mode - STRONG OVERRIDE */
[data-theme="dark"] .app-sidebar-new,
[data-theme="dark"] .app-sidebar-new *,
[data-theme="dark"] .app-sidebar-new span,
[data-theme="dark"] .app-sidebar-new button,
[data-theme="dark"] .app-sidebar-new a,
[data-theme="dark"] .app-sidebar-new div,
[data-theme="dark"] .app-sidebar-new p,
[data-theme="dark"] .app-sidebar-new h1,
[data-theme="dark"] .app-sidebar-new h2,
[data-theme="dark"] .app-sidebar-new h3,
[data-theme="dark"] .app-sidebar-new h4,
[data-theme="dark"] .app-sidebar-new h5,
[data-theme="dark"] .app-sidebar-new h6 {
  color: #fff !important;
}

/* Override for icons - they should inherit from their containers */
[data-theme="dark"] .app-sidebar-new-brand-icon i,
[data-theme="dark"] .app-sidebar-new-icon i,
[data-theme="dark"] .app-sidebar-new-subicon i {
  color: inherit !important;
}

/* Resize Handle - Desktop Only */
.app-sidebar-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
  z-index: 1001;
  transition: background-color 0.2s ease;
}

.app-sidebar-resize-handle:hover {
  background: var(--color-primary);
  opacity: 0.5;
}

.app-sidebar-resize-handle:active {
  background: var(--color-primary);
  opacity: 0.8;
}

/* Hide resize handle on mobile and when sidebar is hidden */
@media (max-width: 991.98px) {
  .app-sidebar-resize-handle {
    display: none !important;
  }
}

.app-sidebar-new.hidden .app-sidebar-resize-handle {
  display: none !important;
}

/* Sidebar Scrollbar Styling - Hidden Completely */
.app-sidebar-new::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.app-sidebar-new::-webkit-scrollbar-track {
  width: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
}

.app-sidebar-new::-webkit-scrollbar-thumb {
  width: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.app-sidebar-new::-webkit-scrollbar-thumb:hover {
  width: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
}

.app-sidebar-new::-webkit-scrollbar-corner {
  width: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
}

[data-theme="dark"] .app-sidebar-new::-webkit-scrollbar,
[data-theme="dark"] .app-sidebar-new::-webkit-scrollbar-track,
[data-theme="dark"] .app-sidebar-new::-webkit-scrollbar-thumb,
[data-theme="dark"] .app-sidebar-new::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .app-sidebar-new::-webkit-scrollbar-corner {
  width: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* إخفاء السكرول بار في جميع المتصفحات */
.app-sidebar-new {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
  overflow: -moz-scrollbars-none !important; /* Firefox (legacy) */
}

/* إخفاء السكرول بار في جميع الحالات */
.app-sidebar-new * {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

.app-sidebar-new *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Sidebar Header - New Design */
.app-sidebar-new-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--sidebar-border-color);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

[data-theme="dark"] .app-sidebar-new-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: var(--color-neutral-300);
}

.app-sidebar-new-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--sidebar-color);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  transition: all var(--transition-fast);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
}

.app-sidebar-new-brand:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: translateX(-2px);
}

[data-theme="dark"] .app-sidebar-new-brand {
  color: var(--sidebar-color-dark, #f5f5f5) !important;
}

[data-theme="dark"] .app-sidebar-new-brand:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.app-sidebar-new-brand-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  border-radius: 25px !important; /* radius = 25 */
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.app-sidebar-new-brand:hover .app-sidebar-new-brand-icon {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(69, 130, 236, 0.3);
}

.app-sidebar-new-brand-icon i {
  font-size: 1.5rem !important; /* تكبير الأيقونة لتكون بحجم المربع */
  color: #fff;
}

/* Glow effect for brand icon in dark mode */
[data-theme="dark"] .app-sidebar-new-brand-icon i {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

[data-theme="dark"] .app-sidebar-new-brand:hover .app-sidebar-new-brand-icon i {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.app-sidebar-new-brand-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-base);
}

[data-theme="dark"] .app-sidebar-new-brand-text {
  color: #fff !important;
}

/* Sidebar Navigation - New Design */
.app-sidebar-new-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-md) 0;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

/* إخفاء السكرول بار من nav */
.app-sidebar-new-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.app-sidebar-new-nav::-webkit-scrollbar-track,
.app-sidebar-new-nav::-webkit-scrollbar-thumb,
.app-sidebar-new-nav::-webkit-scrollbar-corner {
  width: 0 !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
}

.app-sidebar-new-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-sidebar-new-item {
  margin: 0;
  padding: 0 var(--spacing-sm);
}

/* Section Toggle Button */
.app-sidebar-new-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
  border: none;
  color: var(--sidebar-color);
  text-align: right;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
  position: relative;
  margin-bottom: var(--spacing-xs);
}

[data-theme="dark"] .app-sidebar-new-section-toggle {
  color: #fff !important;
}

.app-sidebar-new-section-toggle:hover {
  background: var(--sidebar-hover-bg);
  color: #fff;
  transform: translateX(-2px);
}

[data-theme="dark"] .app-sidebar-new-section-toggle:hover {
  background: var(--color-neutral-200);
  color: #fff !important;
}

.app-sidebar-new-section-toggle[aria-expanded="true"] {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-color);
  font-weight: var(--font-weight-semibold);
}

[data-theme="dark"] .app-sidebar-new-section-toggle[aria-expanded="true"] {
  background: rgba(69, 130, 236, 0.15);
  color: #fff !important;
}

.app-sidebar-new-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px !important; /* radius = 25 */
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.app-sidebar-new-section-toggle:hover .app-sidebar-new-icon {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.app-sidebar-new-section-toggle[aria-expanded="true"] .app-sidebar-new-icon {
  background: var(--color-primary);
  color: #fff;
}

.app-sidebar-new-icon i {
  font-size: 1.25rem !important; /* تكبير الأيقونة لتكون بحجم المربع */
  color: inherit;
}

.app-sidebar-new-section-toggle[aria-expanded="true"] .app-sidebar-new-icon i {
  color: #fff;
}

/* Glow effect for icons in dark mode */
[data-theme="dark"] .app-sidebar-new-icon i {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

[data-theme="dark"]
  .app-sidebar-new-section-toggle:hover
  .app-sidebar-new-icon
  i {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

[data-theme="dark"]
  .app-sidebar-new-section-toggle[aria-expanded="true"]
  .app-sidebar-new-icon
  i {
  text-shadow: 0 0 10px rgba(69, 130, 236, 0.6);
  filter: drop-shadow(0 0 6px rgba(69, 130, 236, 0.4));
}

.app-sidebar-new-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
}

/* إخفاء النصوص للصفحات المباشرة فقط (ليس للسيكشن) */
.app-sidebar-new-link .app-sidebar-new-label {
  display: none !important; /* إخفاء النصوص للصفحات المباشرة */
}

[data-theme="dark"] .app-sidebar-new-label {
  color: #fff !important;
}

.app-sidebar-new-arrow {
  display: none !important; /* إخفاء السهم */
  width: 20px;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.app-sidebar-new-section-toggle[aria-expanded="true"] .app-sidebar-new-arrow {
  transform: rotate(180deg);
}

.app-sidebar-new-arrow i {
  font-size: 0.625rem; /* 10px - تصغير السهم أكثر */
  color: inherit;
}

[data-theme="dark"] .app-sidebar-new-arrow i {
  color: #fff !important;
}

/* Submenu */
.app-sidebar-new-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
  position: relative; /* للسماح بـ absolute positioning في collapsed state */
  display: block; /* تأكد من أن display: block في الحالة الأساسية */
}

[data-theme="dark"] .app-sidebar-new-submenu {
  background: rgba(0, 0, 0, 0.2);
}

.app-sidebar-new-submenu[aria-hidden="false"] {
  max-height: 2000px;
  opacity: 1;
}

.app-sidebar-new-subitem {
  margin: 0;
  padding: 0 var(--spacing-sm);
  position: relative;
}

.app-sidebar-new-sublink {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm)
    calc(var(--spacing-lg) + 20px);
  color: var(--color-neutral-300);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
  position: relative;
  margin-bottom: var(--spacing-xs);
}

[data-theme="dark"] .app-sidebar-new-sublink {
  color: #fff !important;
}

.app-sidebar-new-sublink::before {
  content: "";
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--color-neutral-400);
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.app-sidebar-new-sublink:hover {
  background: var(--sidebar-hover-bg);
  color: #fff;
  transform: translateX(-3px);
  padding-right: calc(var(--spacing-lg) + 6px);
}

[data-theme="dark"] .app-sidebar-new-sublink:hover {
  background: var(--color-neutral-200);
  color: #fff !important;
}

.app-sidebar-new-sublink:hover::before {
  background: var(--color-primary);
  transform: translateY(-50%) scale(1.3);
}

.app-sidebar-new-sublink.current-page {
  background: rgba(69, 130, 236, 0.15);
  color: var(--color-primary-light);
  font-weight: var(--font-weight-medium);
}

[data-theme="dark"] .app-sidebar-new-sublink.current-page {
  background: rgba(69, 130, 236, 0.2);
  color: #fff !important;
}

[data-theme="dark"] .app-sidebar-new-sublink.current-page {
  background: rgba(69, 130, 236, 0.2);
  color: #fff !important;
}

.app-sidebar-new-sublink.current-page::before {
  background: var(--color-primary);
  width: 6px;
  height: 6px;
}

.app-sidebar-new-subicon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 25px !important; /* radius = 25 */
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.app-sidebar-new-sublink:hover .app-sidebar-new-subicon {
  background: rgba(255, 255, 255, 0.1);
}

.app-sidebar-new-sublink.current-page .app-sidebar-new-subicon {
  background: var(--color-primary);
}

.app-sidebar-new-subicon i {
  font-size: 1rem !important; /* تكبير الأيقونة لتكون بحجم المربع */
  color: inherit;
}

.app-sidebar-new-sublink.current-page .app-sidebar-new-subicon i {
  color: #fff;
}

/* Glow effect for submenu icons in dark mode */
[data-theme="dark"] .app-sidebar-new-subicon i {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.15));
}

[data-theme="dark"] .app-sidebar-new-sublink:hover .app-sidebar-new-subicon i {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.25));
}

[data-theme="dark"]
  .app-sidebar-new-sublink.current-page
  .app-sidebar-new-subicon
  i {
  text-shadow: 0 0 10px rgba(69, 130, 236, 0.6);
  filter: drop-shadow(0 0 6px rgba(69, 130, 236, 0.4));
}

.app-sidebar-new-sublabel {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold); /* جعل أسماء الصفحات الفرعية bold */
}

[data-theme="dark"] .app-sidebar-new-sublabel {
  color: #fff !important;
}

/* Direct Link (without submenu) */
.app-sidebar-new-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--sidebar-color);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold); /* جعل أسماء الصفحات bold */
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xs);
  position: relative;
}

[data-theme="dark"] .app-sidebar-new-link {
  color: #fff !important;
}

.app-sidebar-new-link:hover {
  background: var(--sidebar-hover-bg);
  color: #fff;
  transform: translateX(-2px);
}

[data-theme="dark"] .app-sidebar-new-link:hover {
  background: var(--color-neutral-200);
  color: #fff !important;
}

.app-sidebar-new-link.current-page {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-color);
  font-weight: var(--font-weight-semibold);
}

[data-theme="dark"] .app-sidebar-new-link.current-page {
  background: rgba(69, 130, 236, 0.15);
  color: #fff !important;
}

/* تصغير أيقونات الصفحات */
.app-sidebar-new-link .app-sidebar-new-icon i {
  font-size: 1.25rem !important; /* تكبير الأيقونة لتكون بحجم المربع */
}

/* Glow effect for direct link icons in dark mode */
[data-theme="dark"] .app-sidebar-new-link .app-sidebar-new-icon i {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

[data-theme="dark"] .app-sidebar-new-link:hover .app-sidebar-new-icon i {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

[data-theme="dark"] .app-sidebar-new-link.current-page .app-sidebar-new-icon i {
  text-shadow: 0 0 10px rgba(69, 130, 236, 0.6);
  filter: drop-shadow(0 0 6px rgba(69, 130, 236, 0.4));
}

/* ==========================================================================
   TOP NAVIGATION
   ========================================================================== */

.app-topnav {
  position: fixed;
  top: 0;
  right: var(--sidebar-width);
  left: 0;
  height: var(--topnav-height);
  background-color: var(--topnav-bg);
  color: var(--topnav-color);
  box-shadow: var(--topnav-shadow);
  border-bottom: 1px solid var(--topnav-border-color);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-lg);
  z-index: var(--z-sticky);
  transition: right var(--transition-base),
    background-color var(--transition-base), border-color var(--transition-base);
}

.app-main-wrapper.sidebar-hidden .app-topnav {
  right: 0;
}

/* Mobile: Top nav takes full width */
@media (max-width: 991.98px) {
  .app-topnav {
    right: 0;
  }
}

/* Menu Toggle Button */
.app-menu-toggle,
.app-theme-toggle,
.app-reset-order-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-neutral-700);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  margin-left: var(--spacing-md);
}

.app-menu-toggle:hover,
.app-theme-toggle:hover,
.app-reset-order-toggle:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
}

[data-theme="dark"] .app-menu-toggle,
[data-theme="dark"] .app-theme-toggle,
[data-theme="dark"] .app-reset-order-toggle {
  color: var(--color-neutral-300);
}

[data-theme="dark"] .app-menu-toggle:hover,
[data-theme="dark"] .app-theme-toggle:hover,
[data-theme="dark"] .app-reset-order-toggle:hover {
  background-color: var(--color-neutral-200);
  color: #fff;
}

.app-menu-toggle:focus,
.app-theme-toggle:focus,
.app-reset-order-toggle:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.app-menu-toggle i,
.app-theme-toggle i,
.app-reset-order-toggle i {
  font-size: var(--font-size-xl);
}

/* Top Nav Items */
.app-topnav-items {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-right: auto;
}

/* User Menu */
.app-user-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.app-user-menu:hover {
  background-color: var(--color-neutral-100);
}

.app-user-menu img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.app-user-menu span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary, var(--color-neutral-700));
}

[data-theme="dark"] .app-user-menu {
  color: #ffffff !important;
}

[data-theme="dark"] .app-user-menu:hover {
  background-color: var(--color-neutral-200);
}

/* Dropdown */
.app-dropdown {
  position: relative;
}

.app-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  right: 0;
  min-width: 200px;
  background-color: var(--card-bg, #fff);
  border: 1px solid var(--card-border, var(--color-neutral-200));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xs);
  list-style: none;
  margin: 0;
  z-index: var(--z-dropdown);
  display: none;
  color: var(--text-primary, var(--color-neutral-900));
}

[data-theme="dark"] .app-dropdown-menu {
  color: #ffffff !important;
}

.app-dropdown-menu.show {
  display: block;
}

[data-theme="dark"] .app-dropdown-menu {
  color: #ffffff !important;
}

.app-dropdown-menu li {
  margin: 0;
}

.app-dropdown-menu a {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-primary, var(--color-neutral-700));
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  gap: var(--spacing-sm);
}

.app-dropdown-menu a:hover {
  background-color: var(--color-neutral-100);
  color: var(--text-primary, var(--color-neutral-900));
}

[data-theme="dark"] .app-dropdown-menu a:hover {
  background-color: var(--color-neutral-200);
  color: #fff !important;
}

[data-theme="dark"] .app-dropdown-menu a:hover span {
  color: #fff !important;
}

/* Dropdown menu - white text in dark mode */
[data-theme="dark"] .app-dropdown,
[data-theme="dark"] .app-dropdown *,
[data-theme="dark"] .app-dropdown-menu,
[data-theme="dark"] .app-dropdown-menu *,
[data-theme="dark"] .app-dropdown-menu a,
[data-theme="dark"] .app-dropdown-menu span,
[data-theme="dark"] .app-user-menu,
[data-theme="dark"] .app-user-menu span {
  color: #ffffff !important;
}

/* Override default color for dropdown menu in dark mode */
[data-theme="dark"] .app-dropdown-menu {
  color: #ffffff !important;
}

[data-theme="dark"] .app-dropdown-menu a {
  color: #ffffff !important;
}

[data-theme="dark"] .app-dropdown-menu li {
  color: #ffffff !important;
}

[data-theme="dark"] .app-dropdown-menu li a {
  color: #ffffff !important;
}

[data-theme="dark"] .app-dropdown-menu li a span {
  color: #ffffff !important;
}

.app-dropdown-menu a i {
  width: 20px;
  text-align: center;
}

/* Notifications */
.app-notifications {
  position: relative;
}

.app-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
}

/* Attendance Status - حالة الحضور */
.app-attendance-status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
  cursor: default;
  margin-left: var(--spacing-sm);
}

.app-attendance-status:hover {
  background-color: var(--color-neutral-100);
}

[data-theme="dark"] .app-attendance-status {
  background-color: #ffffff;
}

[data-theme="dark"] .app-attendance-status:hover {
  background-color: #f0f0f0;
}

.app-attendance-status i {
  font-size: 12px;
  flex-shrink: 0;
}

.app-attendance-text {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

[data-theme="dark"] .app-attendance-text {
  color: inherit;
}

/* ============================================
   PAGE TITLE - DARK MODE STYLING
   تعديل ألوان #page_title في الوضع الليلي
   ============================================ */
[data-theme="dark"] #page_title,
html[data-theme="dark"] body[data-theme="dark"] #page_title {
  background: linear-gradient(
    90deg,
    #1a1a2e 0%,
    #16213e 50%,
    #0f3460 100%
  ) !important; /* خلفية متدرجة داكنة للوضع الليلي */
  color: #e0e0e0 !important; /* نص فاتح للوضع الليلي */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5),
    0px 0px 20px rgba(69, 130, 236, 0.2) !important; /* ظل أقوى مع glow أزرق خفيف */
  border: 1px solid rgba(69, 130, 236, 0.3) !important; /* حدود زرقاء خفيفة */
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Card Component */
.app-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, var(--color-neutral-200));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
  transition: box-shadow var(--transition-base),
    border-color var(--transition-base), transform var(--transition-base);
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary, var(--color-neutral-900));
}

.app-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-neutral-300);
  transform: translateY(-2px);
}

.app-card-header {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.app-card-header h1,
.app-card-header h2,
.app-card-header h3,
.app-card-header h4,
.app-card-header h5,
.app-card-header h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.app-card-body {
  color: var(--color-neutral-700);
}

.app-card-footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-neutral-200);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Page Header */
.app-page-header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-neutral-200);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.app-page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary, var(--color-neutral-900));
  margin: 0;
  flex: 1;
  min-width: 200px;
}

[data-theme="dark"] .app-page-title {
  color: var(--text-primary) !important;
}

.app-page-description {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-600);
  margin: 0;
}

.app-page-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* Button Enhancements */
.btn {
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-sm) var(--spacing-lg);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  border: 1px solid transparent;
}

.btn:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.btn i {
  font-size: var(--font-size-base);
}

/* Form Enhancements */
.form-label {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary, var(--color-neutral-700));
  margin-bottom: var(--spacing-xs);
}

.form-control,
.form-select {
  border-radius: var(--radius-md);
  border-color: var(--color-neutral-300);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all var(--transition-fast);
  background-color: var(--card-bg, #fff);
  color: var(--text-primary, var(--color-neutral-900));
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--card-bg);
  border-color: var(--color-neutral-400);
  color: #ffffff !important;
}

/* Override for search input - white background in dark mode */
[data-theme="dark"] input[type="search"],
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(69, 130, 236, 0.1);
  background-color: var(--card-bg, #fff);
  color: var(--text-primary, var(--color-neutral-900));
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--card-bg);
  color: #ffffff !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--color-success);
}

.invalid-feedback,
.valid-feedback {
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

/* Empty State */
.app-empty-state {
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  color: var(--color-neutral-500);
}

.app-empty-state i {
  font-size: var(--font-size-5xl);
  color: var(--color-neutral-300);
  margin-bottom: var(--spacing-lg);
}

.app-empty-state h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-700);
  margin-bottom: var(--spacing-sm);
}

.app-empty-state p {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-lg);
}

/* Loading Skeleton */
.table-loading {
  position: relative;
}

/* Ensure loading indicators appear below topnav on mobile */
@media (max-width: 991.98px) {
  /* Ensure topnav stays on top with highest z-index */
  .app-topnav {
    z-index: var(--z-sticky) !important; /* 1020 */
  }

  /* Ensure all loading indicators appear below topnav */
  .table-loading,
  .dt-processing,
  .dt-processing.card,
  .dataTables_wrapper .dt-processing,
  .dataTables_wrapper .dt-processing.card,
  .spinner-border,
  .spinner-grow,
  [class*="loading"],
  [class*="spinner"] {
    position: relative !important;
    z-index: 1 !important; /* Below topnav (z-index: 1020) */
    margin-top: 0 !important;
  }

  /* Override View_model_style.css .dt-processing top: 0 */
  .dt-processing {
    top: auto !important;
    margin-top: var(--topnav-height) !important; /* Start below topnav */
  }

  /* Ensure content starts below topnav */
  .app-content > *:first-child {
    margin-top: 0 !important;
  }
}

.table-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* DataTables Enhancements */
.dataTables_wrapper {
  padding: var(--spacing-lg);
  background: var(--card-bg, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary, var(--color-neutral-900));
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  margin-bottom: var(--spacing-md);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  margin: 0 var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(69, 130, 236, 0.1);
}

/* DataTables Buttons */
.dt-buttons {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.dt-buttons .btn {
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-md);
}

.dt-buttons .btn i {
  margin-left: var(--spacing-xs);
}

/* DataTables Button Collection (Column Visibility) */
.dt-button-collection {
  background: #fff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xs);
  min-width: 200px;
  direction: rtl;
  max-height: 400px;
  overflow-y: auto;
}

.dt-button-collection .dt-button {
  display: block;
  width: 100%;
  text-align: right;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: var(--spacing-xs) 0;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.dt-button-collection .dt-button:hover {
  background-color: var(--color-neutral-100);
}

/* DataTables Processing Indicator */
.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 10;
}

.dataTables_processing::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-neutral-300);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: var(--spacing-sm);
  vertical-align: middle;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* DataTables Empty State */
.app-empty-row {
  background-color: var(--color-neutral-50);
}

.app-empty-row td {
  padding: var(--spacing-3xl) !important;
}

/* DataTables Pagination */
.dataTables_paginate {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
}

.dataTables_paginate .paginate_button {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-neutral-700);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: 0 2px;
}

.dataTables_paginate .paginate_button:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.dataTables_paginate .paginate_button.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* DataTables Info */
.dataTables_info {
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm);
}

/* DataTables Responsive */
.dataTables_wrapper .table-responsive {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* DataTables Table Styling */
table.dataTable {
  width: 100% !important;
  margin: var(--spacing-md) 0;
  border-collapse: separate !important;
  border-spacing: 0;
  background-color: var(--card-bg, #fff);
  /* Removed table-layout: auto !important to let DataTables control widths */
}

/* Ensure thead and tbody columns align properly */
table.dataTable thead th,
table.dataTable tbody td {
  box-sizing: border-box !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

table.dataTable thead th {
  background-color: var(--color-neutral-100);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary, var(--color-neutral-800));
  border-bottom: 2px solid var(--color-neutral-300);
  padding: var(--spacing-md);
  text-align: right;
  display: table-cell !important; /* Ensure table-cell display */
  /* Removed width: auto !important to let DataTables control widths */
}

/* Ensure tbody cells match thead width */
table.dataTable tbody td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-neutral-200);
  color: var(--text-primary, var(--color-neutral-700));
  display: table-cell !important; /* Ensure table-cell display */
  font-weight: bold !important; /* جعل الخطوط bold */
  /* Removed width: auto !important to let DataTables control widths */
}

/* Force column alignment - ensure thead and tbody columns have same width */
table.dataTable thead th,
table.dataTable tbody td {
  min-width: 0 !important; /* Allow columns to shrink if needed */
  max-width: none !important; /* Allow columns to expand based on content */
}

/* For DataTables with scroll, ensure column widths match */
.dataTables_wrapper .dataTables_scrollHead table.dataTable thead th,
.dataTables_wrapper .dataTables_scrollBody table.dataTable tbody td {
  display: table-cell !important; /* Ensure table-cell display */
  box-sizing: border-box !important;
  /* Removed width: auto !important to let DataTables control widths */
}

/* Ensure column widths are calculated correctly */
.dataTables_wrapper .dataTables_scrollHead table,
.dataTables_wrapper .dataTables_scrollBody table {
  width: 100% !important;
  /* Removed table-layout: auto !important to let DataTables control widths */
}

[data-theme="dark"] table.dataTable thead th {
  background-color: var(--color-neutral-200);
  color: #ffffff !important;
  border-bottom-color: var(--color-neutral-400);
}

/* Moved to above section for better alignment */

[data-theme="dark"] table.dataTable tbody td {
  border-bottom-color: var(--color-neutral-400);
}

table.dataTable tbody tr:hover {
  background-color: var(--color-neutral-50);
}

[data-theme="dark"] table.dataTable tbody tr:hover {
  background-color: var(--color-neutral-200);
}

table.dataTable tbody tr.selected {
  background-color: var(--color-primary-50);
}

[data-theme="dark"] table.dataTable tbody tr.selected {
  background-color: var(--color-primary-800);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet and below: Sidebar becomes offcanvas */
@media (max-width: 991.98px) {
  .app-sidebar-new {
    transform: translateX(100%);
    z-index: var(--z-offcanvas);
    transition: transform var(--transition-base);
  }

  .app-sidebar-new.show {
    transform: translateX(0);
  }

  .app-main-wrapper {
    margin-right: 0;
  }

  .app-content {
    padding-right: var(--content-padding);
    padding-left: var(--content-padding);
    padding-top: calc(
      var(--topnav-height) + var(--content-padding)
    ) !important; /* Ensure content starts below topnav on mobile */
    max-width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
  }

  /* Ensure ALL page elements start below topnav on mobile */
  /* Reset any elements that might start at top: 0 */
  .app-content > *:first-child,
  .app-content .left_col,
  .app-content .full_table,
  .app-content #page_title,
  .app-content .title_left,
  .app-content .page-title,
  .app-content .app-page-title,
  .app-content .app-card,
  .app-content .app-dashboard-search,
  .app-content .x_panel,
  .app-content .x_content,
  .app-content .card-box,
  .app-content .dataTables_wrapper,
  .app-content table,
  .app-content .row:first-child,
  .app-content [class*="col-"]:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Override any fixed/absolute positioning that might place elements at top: 0 */
  .app-content #page_title,
  .app-content .page-title,
  .app-content .title_left,
  .app-content .left_col,
  .app-content .full_table {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  /* Ensure body and main wrapper content starts below topnav */
  body > .left_col,
  body > .full_table,
  body > #page_title,
  .app-main-wrapper > .left_col,
  .app-main-wrapper > .full_table,
  .app-main-wrapper > #page_title {
    margin-top: var(--topnav-height) !important;
  }

  /* Offcanvas backdrop */
  .app-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-offcanvas-backdrop);
    display: none;
    opacity: 0;
    transition: opacity var(--transition-base);
  }

  .app-sidebar-backdrop.show {
    display: block;
    opacity: 1;
  }

  /* Ensure dropdowns don't overflow on mobile */
  .app-dropdown-menu {
    max-width: calc(100vw - var(--spacing-xl));
    right: 0;
    left: auto;
  }

  /* Dashboard Search - في نفس الصف */
  .app-dashboard-search {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 400px;
    width: 100%;
  }

  .app-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .app-dashboard-search {
    min-width: 100%;
    max-width: 100%;
  }
}

/* Mobile: Adjust spacing */
@media (max-width: 575.98px) {
  .app-content {
    padding: var(--spacing-md);
    padding-top: calc(var(--topnav-height) + var(--spacing-md));
  }

  .app-card {
    padding: var(--spacing-md);
  }

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

  .app-sidebar {
    width: 280px;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Focus visible (accessibility) */
*:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Ensure interactive elements are keyboard accessible */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Skip to content link (accessibility) */
.app-skip-link {
  position: absolute;
  top: -100px;
  right: 0;
  background-color: var(--color-primary);
  color: #fff;
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  z-index: var(--z-modal);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.app-skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Scrollbar Styling */
.app-sidebar::-webkit-scrollbar,
.app-content::-webkit-scrollbar {
  width: 8px;
}

.app-sidebar::-webkit-scrollbar-track,
.app-content::-webkit-scrollbar-track {
  background: var(--color-neutral-100);
}

.app-sidebar::-webkit-scrollbar-thumb,
.app-content::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400);
  border-radius: var(--radius-full);
}

.app-sidebar::-webkit-scrollbar-thumb:hover,
.app-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500);
}

/* Selection Styling */
::selection {
  background-color: var(--color-primary-light);
  color: #fff;
}

::-moz-selection {
  background-color: var(--color-primary-light);
  color: #fff;
}

/* Link Styling */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

[data-theme="dark"] a {
  color: var(--color-primary-light);
}

[data-theme="dark"] a:hover {
  color: var(--color-primary);
}

/* Image Styling */
img {
  max-width: 100%;
  height: auto;
}

/* Utility Classes */
.text-muted {
  color: var(--color-neutral-600) !important;
}

.border-top {
  border-top: 1px solid var(--color-neutral-200) !important;
}

/* Footer */
.app-footer {
  background-color: var(--topnav-bg, #fff);
  border-top: 1px solid var(--topnav-border-color, var(--color-neutral-200));
  margin-top: auto;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--text-secondary, var(--color-neutral-600));
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-base),
    border-color var(--transition-base);
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: calc(100% - var(--sidebar-width)) !important;
  box-sizing: border-box !important;
}

/* Footer content - centered text and full width */
.app-footer,
.app-footer * {
  text-align: center !important;
}

.app-footer > * {
  width: 100% !important;
  max-width: 100% !important;
}

/* Full Table Width - Adjust based on sidebar visibility */
.full_table {
  width: calc(97vw - var(--sidebar-width)) !important;
  max-width: calc(97vw - var(--sidebar-width)) !important;
  box-sizing: border-box !important;
  transition: width var(--transition-base), max-width var(--transition-base);
}

/* Full Table Width when sidebar is hidden */
.app-main-wrapper.sidebar-hidden .full_table {
  width: 97vw !important;
  max-width: 97vw !important;
}

/* Mobile: Full Table - 100% width and height */
@media (max-width: 991.98px) {
  .full_table,
  .app-content .full_table,
  body > .full_table,
  .app-main-wrapper > .full_table {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
  }
}

/* Backward Compatibility - Support old classes */
.left_col {
  /* Legacy support - now using app-content */
  padding: var(--content-padding);
  padding-top: calc(var(--topnav-height) + var(--content-padding));
  min-height: calc(100vh - var(--topnav-height));
  background-color: var(--content-bg);
}

.right_col {
  /* Legacy support - now using app-sidebar */
  position: relative;
  /* Override View_model_style.css max-height to prevent conflicts */
  max-height: none !important;
}

.top_nav {
  /* Legacy support - now using app-topnav */
  position: relative;
}

.main_container {
  /* Legacy support - now using app-container */
  position: relative;
}

/* x_panel compatibility - ensure it works with new design */
.x_panel {
  background-color: var(--card-bg, #fff) !important;
  border-color: var(--card-border, var(--color-neutral-200)) !important;
  color: var(--text-primary, var(--color-neutral-900));
  transition: all var(--transition-base);
}

[data-theme="dark"] .x_panel {
  background-color: #404040 !important;
  border-color: #666666 !important;
  color: var(--text-primary, #f5f5f5) !important;
}
/****temp****/
/* Table Responsive on Mobile - No horizontal scrollbar */
.x_content .table-responsive,
.x_content .card-box.table-responsive {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Table Responsive inside x_content - Remove horizontal scrollbar */
.x_content .table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important; /* منع scrollbar أفقي */
  overflow-y: auto; /* السماح بالتمرير العمودي فقط */
  box-sizing: border-box !important;
}

/* Card-box table-responsive inside x_content - Override View_model_style.css */
.x_content .card-box.table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 80vh; /* الحفاظ على الارتفاع المحدود */
  overflow-x: hidden !important; /* منع scrollbar أفقي */
  overflow-y: auto; /* السماح بالتمرير العمودي فقط */
  box-sizing: border-box !important;
}

/* Ensure table inside table-responsive adapts to container */
.x_content .table-responsive table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto; /* السماح بالتكيف التلقائي */
  word-wrap: break-word; /* كسر الكلمات الطويلة */
  overflow-wrap: break-word;
}

/* جعل الجدوبل يظهر 10% في الصفحة وتثبيت الهيدر والفوتر دائما ظاهرين*/
/* الحاوية العامة: بدون سكرول */
.dt-scroll {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  overflow: visible !important;
  box-sizing: border-box !important;
  border-radius: 12px 12px 0 0;
}

.dt-scroll .dt-scroll-body {
  max-height: 70vh !important; /* لازم !important عشان يكسب على inline */
  overflow: auto !important;
}

.dt-scroll .dt-scroll-head {
  position: sticky !important;
  top: 0;
  z-index: 30;
}

/* ✅ الفوتر هنا (مش داخل dt-scroll) */
#datatable-responsive_wrapper .dt-sticky-footer {
  position: sticky !important;
  z-index: 35;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px;
  bottom: -25px !important;
}

/*****************/
/* Custom Vertical Scrollbar Styling for table-responsive */
.x_content .table-responsive::-webkit-scrollbar,
.x_content .card-box.table-responsive::-webkit-scrollbar {
  width: 8px;
}

.x_content .table-responsive::-webkit-scrollbar-track,
.x_content .card-box.table-responsive::-webkit-scrollbar-track {
  background: var(--color-neutral-100, #f3f4f6);
  border-radius: var(--radius-full, 4px);
}

.x_content .table-responsive::-webkit-scrollbar-thumb,
.x_content .card-box.table-responsive::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400, #9ca3af);
  border-radius: var(--radius-full, 4px);
  transition: background 0.2s ease;
}

.x_content .table-responsive::-webkit-scrollbar-thumb:hover,
.x_content .card-box.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500, #6b7280);
}

/* Firefox scrollbar styling */
.x_content .table-responsive,
.x_content .card-box.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-400, #9ca3af)
    var(--color-neutral-100, #f3f4f6);
}

/* Dark theme scrollbar styling */
[data-theme="dark"] .x_content .table-responsive::-webkit-scrollbar-track,
[data-theme="dark"]
  .x_content
  .card-box.table-responsive::-webkit-scrollbar-track {
  background: var(--color-neutral-800, #1f2937);
}

[data-theme="dark"] .x_content .table-responsive::-webkit-scrollbar-thumb,
[data-theme="dark"]
  .x_content
  .card-box.table-responsive::-webkit-scrollbar-thumb {
  background: var(--color-neutral-600, #4b5563);
}

[data-theme="dark"] .x_content .table-responsive::-webkit-scrollbar-thumb:hover,
[data-theme="dark"]
  .x_content
  .card-box.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500, #6b7280);
}

[data-theme="dark"] .x_content .table-responsive,
[data-theme="dark"] .x_content .card-box.table-responsive {
  scrollbar-color: var(--color-neutral-600, #4b5563)
    var(--color-neutral-800, #1f2937);
}
/****temp****/
/* Override View_model_style.css right_col max-height to prevent conflicts */
.right_col {
  max-height: none !important;
}

/* Ensure View_model_style.css doesn't break new layout */
@media (max-width: 1000px) {
  .right_col {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* Override View_model_style.css body styles to prevent conflicts */
body.nav-md {
  background-color: var(--content-bg) !important;
  transition: background-color var(--transition-base);
}

/* Ensure View_model_style.css collapse doesn't break new design */
.collapse .card-body {
  background-color: var(--card-bg, #fff);
  color: var(--text-primary, var(--color-neutral-900));
}

[data-theme="dark"] .collapse .card-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

/* Override View_model_style.css right_col max-height to prevent conflicts */
.right_col {
  max-height: none !important;
}

/* Ensure View_model_style.css doesn't break new layout */
@media (max-width: 1000px) {
  .right_col {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* Override View_model_style.css body styles to prevent conflicts */
body.nav-md {
  background-color: var(--content-bg) !important;
  transition: background-color var(--transition-base);
}

/* Ensure View_model_style.css collapse doesn't break new design */
.collapse .card-body {
  background-color: var(--card-bg, #fff);
  color: var(--text-primary, var(--color-neutral-900));
}

[data-theme="dark"] .collapse .card-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

/* Ensure page-title works with new design */
.page-title,
.title_left {
  margin-bottom: var(--spacing-lg);
}

.page-title h3,
.title_left h3 {
  color: var(--text-primary, var(--color-neutral-900));
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

/* Print styles */
@media print {
  .app-sidebar,
  .app-topnav,
  .app-menu-toggle,
  .app-page-actions .btn {
    display: none !important;
  }

  .app-main-wrapper {
    margin-right: 0 !important;
  }

  .app-content {
    padding-top: 0 !important;
  }
}

/* Global text color fixes for dark mode - تحسين ألوان الخطوط */
[data-theme="dark"] p,
[data-theme="dark"] span:not(.app-notification-badge):not(.badge),
[data-theme="dark"] div:not(.app-sidebar):not(.app-topnav):not(.app-content),
[data-theme="dark"] label,
[data-theme="dark"] td {
  color: var(--text-primary) !important;
}

/* Table headers - white text in dark mode */
[data-theme="dark"] th,
[data-theme="dark"] thead th,
[data-theme="dark"] .custom-thead th,
[data-theme="dark"] table th,
[data-theme="dark"] .table th,
[data-theme="dark"] .dataTables_wrapper th,
[data-theme="dark"] .dataTable thead th,
[data-theme="dark"] .dataTable th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable th {
  color: #ffffff !important;
}

/* DataTables column title - white text in dark mode */
[data-theme="dark"] .dt-column-title,
[data-theme="dark"] .dt-column-title *,
[data-theme="dark"] th .dt-column-title,
[data-theme="dark"] .dt-column-title[role="button"],
[data-theme="dark"] .dataTable .dt-column-title,
[data-theme="dark"] .dataTables_wrapper .dt-column-title,
[data-theme="dark"] table.dataTable .dt-column-title,
[data-theme="dark"] thead .dt-column-title,
[data-theme="dark"] .custom-thead .dt-column-title,
[data-theme="dark"] th span.dt-column-title,
[data-theme="dark"] span.dt-column-title[role="button"] {
  color: #ffffff !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .text-secondary {
  color: var(--text-secondary) !important;
}

/* ============================================
   CRITICAL: SIDEBAR DARK MODE TEXT COLOR OVERRIDE
   Must be at the end to override View_model_style.css
   ============================================ */
[data-theme="dark"] .app-sidebar-new,
[data-theme="dark"]
  .app-sidebar-new
  *:not(i):not([class*="fa"]):not([class*="icon"]) {
  color: #ffffff !important;
}

[data-theme="dark"] .app-sidebar-new-section-toggle,
[data-theme="dark"] .app-sidebar-new-link,
[data-theme="dark"] .app-sidebar-new-sublink,
[data-theme="dark"] .app-sidebar-new-label,
[data-theme="dark"] .app-sidebar-new-sublabel,
[data-theme="dark"] .app-sidebar-new-brand-text,
[data-theme="dark"] .app-sidebar-new-arrow {
  color: #ffffff !important;
}

/* Additional fixes for sidebar text in dark mode */
[data-theme="dark"] .app-sidebar-brand a {
  color: var(--sidebar-color-dark, #f5f5f5) !important;
}

[data-theme="dark"] .app-sidebar-brand a span {
  color: var(--sidebar-color-dark, #f5f5f5) !important;
}

[data-theme="dark"] .app-sidebar-brand a i {
  color: var(--sidebar-color-dark, #f5f5f5) !important;
}

/* ============================================
   FINAL OVERRIDE: Force white text in sidebar dark mode
   This must be at the very end to override View_model_style.css
   ============================================ */
[data-theme="dark"] .app-sidebar-new * {
  color: #ffffff !important;
}

/* Exclude icons from color override - they use inherit */
[data-theme="dark"] .app-sidebar-new i,
[data-theme="dark"] .app-sidebar-new [class*="fa"],
[data-theme="dark"] .app-sidebar-new [class*="icon"] {
  color: inherit !important;
}

[data-theme="dark"] .page-title h3,
[data-theme="dark"] .title_left h3 {
  color: var(--text-primary);
}

/* ============================================
   FINAL OVERRIDE: Force white text in table headers (th) in dark mode
   This must be at the very end to override View_model_style.css
   ============================================ */
[data-theme="dark"] th,
[data-theme="dark"] thead th,
[data-theme="dark"] .custom-thead,
[data-theme="dark"] .custom-thead th,
[data-theme="dark"] table th,
[data-theme="dark"] table thead th,
[data-theme="dark"] .table th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .dataTables_wrapper th,
[data-theme="dark"] .dataTables_wrapper thead th,
[data-theme="dark"] .dataTable th,
[data-theme="dark"] .dataTable thead th,
[data-theme="dark"] table.dataTable th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] #datatable-responsive thead th,
[data-theme="dark"] thead tr:first-child th:first-child,
[data-theme="dark"] thead tr:first-child th:last-child {
  color: #ffffff !important;
}

/* Override .custom-thead color specifically - highest priority */
/* This overrides View_model_style.css line 316: .custom-thead { color: rgb(110, 120, 207); } */
[data-theme="dark"] .custom-thead,
[data-theme="dark"] .custom-thead *,
[data-theme="dark"] .custom-thead th,
[data-theme="dark"] .custom-thead thead th,
[data-theme="dark"] thead.custom-thead th,
[data-theme="dark"] table .custom-thead th,
[data-theme="dark"] .dataTable .custom-thead th {
  color: #ffffff !important;
}

/* ============================================
   FINAL OVERRIDE: Force white text for specific elements in dark mode
   ============================================ */

/* DataTables info - white text in dark mode */
[data-theme="dark"] .dt-info,
[data-theme="dark"] .dt-info *,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_info *,
[data-theme="dark"] .dataTables_wrapper .dt-info,
[data-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: #ffffff !important;
}

/* Dashboard page names - white text in dark mode */
[data-theme="dark"] .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-name *,
[data-theme="dark"] span.app-dashboard-page-name,
[data-theme="dark"] span.app-dashboard-page-name *,
[data-theme="dark"] .app-dashboard-page-link .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-link span.app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-item .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-item span.app-dashboard-page-name,
[data-theme="dark"] a .app-dashboard-page-name,
[data-theme="dark"] a span.app-dashboard-page-name {
  color: #ffffff !important;
}

/* Dropdown menu - FINAL OVERRIDE for white text in dark mode */
[data-theme="dark"] .app-dropdown,
[data-theme="dark"] .app-dropdown *,
[data-theme="dark"] .app-dropdown-menu,
[data-theme="dark"] .app-dropdown-menu *,
[data-theme="dark"] .app-dropdown-menu a,
[data-theme="dark"] .app-dropdown-menu span,
[data-theme="dark"] .app-user-menu,
[data-theme="dark"] .app-user-menu span,
[data-theme="dark"] .app-dropdown-toggle,
[data-theme="dark"] .app-dropdown-toggle span {
  color: #ffffff !important;
}

/* Exclude icons from color override */
[data-theme="dark"] .app-dropdown i,
[data-theme="dark"] .app-dropdown-menu i,
[data-theme="dark"] .app-user-menu i,
[data-theme="dark"] .app-dropdown-toggle i {
  color: inherit !important;
}

/* DISABLED_STAGE1 - Redundant "ULTIMATE OVERRIDE" section (lines 1989-2063)
   Reason: These are overridden by "ABSOLUTE FINAL OVERRIDE" rules that come later
   with higher specificity (using :not() selectors and more specific paths)
   Keep: "ABSOLUTE FINAL OVERRIDE" rules at lines 2065, 2100, etc.
============================================
   ULTIMATE OVERRIDE: Force white text - Must be at very end
   This overrides ALL other CSS files including View_model_style.css
   ============================================

/* DataTables info - ULTIMATE OVERRIDE */
/*
[data-theme="dark"] .dt-info,
[data-theme="dark"] .dt-info *,
[data-theme="dark"] div.dt-info,
[data-theme="dark"] div.dt-info *,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_info *,
[data-theme="dark"] div.dataTables_info,
[data-theme="dark"] div.dataTables_info *,
[data-theme="dark"] .dataTables_wrapper .dt-info,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper div.dt-info,
[data-theme="dark"] .dataTables_wrapper div.dataTables_info {
  color: #ffffff !important;
}

Dashboard page names - ULTIMATE OVERRIDE
[data-theme="dark"] .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-name *,
[data-theme="dark"] span.app-dashboard-page-name,
[data-theme="dark"] span.app-dashboard-page-name *,
[data-theme="dark"] .app-dashboard-page-link .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-link span.app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-item .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-item span.app-dashboard-page-name,
[data-theme="dark"] a .app-dashboard-page-name,
[data-theme="dark"] a span.app-dashboard-page-name {
  color: #ffffff !important;
}

Dropdown menu - ULTIMATE OVERRIDE
[data-theme="dark"] .app-dropdown,
[data-theme="dark"] .app-dropdown *,
[data-theme="dark"] div.app-dropdown,
[data-theme="dark"] div.app-dropdown *,
[data-theme="dark"] .app-dropdown-menu,
[data-theme="dark"] .app-dropdown-menu *,
[data-theme="dark"] ul.app-dropdown-menu,
[data-theme="dark"] ul.app-dropdown-menu *,
[data-theme="dark"] .app-dropdown-menu a,
[data-theme="dark"] .app-dropdown-menu span,
[data-theme="dark"] .app-dropdown-menu li,
[data-theme="dark"] .app-dropdown-menu li *,
[data-theme="dark"] .app-user-menu,
[data-theme="dark"] .app-user-menu span,
[data-theme="dark"] a.app-user-menu,
[data-theme="dark"] a.app-user-menu span,
[data-theme="dark"] .app-dropdown-toggle,
[data-theme="dark"] .app-dropdown-toggle span,
[data-theme="dark"] a.app-dropdown-toggle,
[data-theme="dark"] a.app-dropdown-toggle span {
  color: #ffffff !important;
}

Exclude icons from ultimate override
[data-theme="dark"] .app-dropdown i,
[data-theme="dark"] .app-dropdown-menu i,
[data-theme="dark"] .app-user-menu i,
[data-theme="dark"] .app-dropdown-toggle i,
[data-theme="dark"] .app-dropdown [class*="fa"],
[data-theme="dark"] .app-dropdown-menu [class*="fa"],
[data-theme="dark"] .app-user-menu [class*="fa"],
[data-theme="dark"] .app-dropdown-toggle [class*="fa"] {
  color: inherit !important;
}
*/

/* ============================================
   ABSOLUTE FINAL OVERRIDE: Dropdown menu white text
   Must be at very end to override everything
   ============================================ */
[data-theme="dark"] .app-dropdown,
[data-theme="dark"]
  .app-dropdown
  *:not(i):not([class*="fa"]):not([class*="icon"]),
[data-theme="dark"] .app-dropdown-menu,
[data-theme="dark"]
  .app-dropdown-menu
  *:not(i):not([class*="fa"]):not([class*="icon"]),
[data-theme="dark"] .app-dropdown-menu a,
[data-theme="dark"]
  .app-dropdown-menu
  a
  *:not(i):not([class*="fa"]):not([class*="icon"]),
[data-theme="dark"] .app-dropdown-menu li,
[data-theme="dark"]
  .app-dropdown-menu
  li
  *:not(i):not([class*="fa"]):not([class*="icon"]),
[data-theme="dark"] .app-dropdown-menu span,
[data-theme="dark"] .app-user-menu,
[data-theme="dark"]
  .app-user-menu
  *:not(i):not([class*="fa"]):not([class*="icon"]):not(img),
[data-theme="dark"] .app-user-menu span,
[data-theme="dark"] .app-dropdown-toggle,
[data-theme="dark"]
  .app-dropdown-toggle
  *:not(i):not([class*="fa"]):not([class*="icon"]):not(img),
[data-theme="dark"] .app-dropdown-toggle span {
  color: #ffffff !important;
}

/* ============================================
   ABSOLUTE FINAL OVERRIDE: DataTables info white text
   Must be at very end to override everything including View_model_style.css
   ============================================ */
[data-theme="dark"] .dt-info,
[data-theme="dark"] .dt-info *,
[data-theme="dark"] div.dt-info,
[data-theme="dark"] div.dt-info *,
[data-theme="dark"] #datatable-responsive_info,
[data-theme="dark"] #datatable-responsive_info *,
[data-theme="dark"] div#datatable-responsive_info,
[data-theme="dark"] div#datatable-responsive_info *,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_info *,
[data-theme="dark"] div.dataTables_info,
[data-theme="dark"] div.dataTables_info *,
[data-theme="dark"] .flex-grow-1.dataTables_info,
[data-theme="dark"] .flex-grow-1.dataTables_info *,
[data-theme="dark"] .text-center.dataTables_info,
[data-theme="dark"] .text-center.dataTables_info *,
[data-theme="dark"] .dataTables_wrapper .dt-info,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper div.dt-info,
[data-theme="dark"] .dataTables_wrapper div.dataTables_info,
[data-theme="dark"] .dataTables_wrapper .flex-grow-1.dataTables_info,
[data-theme="dark"] .dataTables_wrapper .text-center.dataTables_info,
[data-theme="dark"] div[role="status"].dt-info,
[data-theme="dark"] div[role="status"].dt-info *,
[data-theme="dark"] div[aria-live="polite"].dt-info,
[data-theme="dark"] div[aria-live="polite"].dt-info * {
  color: #ffffff !important;
}

/* ============================================
   ABSOLUTE FINAL OVERRIDE: x_panel gray background in dark mode
   Must be at absolute end to override View_model_style.css
   ============================================ */
[data-theme="dark"] .x_panel {
  background-color: #404040 !important;
  border-color: #666666 !important;
  color: var(--text-primary, #f5f5f5) !important;
}

/* ============================================
   ABSOLUTE FINAL OVERRIDE: name="search_box" white background in dark mode
   Same color as x_panel for consistency
   Must be at absolute end to override View_model_style.css and Bootstrap
   ============================================ */
[data-theme="dark"] input[name="search_box"],
[data-theme="dark"] input[name="search_box"].form-control,
[data-theme="dark"] input[name="search_box"].form-control-sm,
[data-theme="dark"] .dataTables_filter input[name="search_box"],
[data-theme="dark"] .dataTables_filter input[name="search_box"].form-control,
[data-theme="dark"] .dataTables_filter input[name="search_box"].form-control-sm,
[data-theme="dark"] .dt-search input[name="search_box"],
[data-theme="dark"] .dt-search input[name="search_box"].form-control,
[data-theme="dark"] .dt-search input[name="search_box"].form-control-sm,
[data-theme="dark"] .dataTables_wrapper input[name="search_box"],
[data-theme="dark"] .dataTables_wrapper input[name="search_box"].form-control,
[data-theme="dark"]
  .dataTables_wrapper
  input[name="search_box"].form-control-sm,
[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"],
[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"].form-control,
[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"].form-control-sm,
[data-theme="dark"] .dataTables_wrapper .dt-search input[name="search_box"],
[data-theme="dark"]
  .dataTables_wrapper
  .dt-search
  input[name="search_box"].form-control,
[data-theme="dark"]
  .dataTables_wrapper
  .dt-search
  input[name="search_box"].form-control-sm,
[data-theme="dark"] body input[name="search_box"],
[data-theme="dark"] body .dataTables_filter input[name="search_box"],
[data-theme="dark"] body .dt-search input[name="search_box"],
[data-theme="dark"] html[data-theme="dark"] input[name="search_box"],
[data-theme="dark"]
  html[data-theme="dark"]
  .dataTables_filter
  input[name="search_box"],
[data-theme="dark"]
  html[data-theme="dark"]
  .dt-search
  input[name="search_box"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #666666 !important;
  border: 1px solid #666666 !important;
  color: #333333 !important;
}

/* ============================================
   ULTRA FINAL OVERRIDE: input[name="search_box"] white background in dark mode
   Must override inline styles in view files (Trip_view.php, Trip_Managment_view.php, etc.)
   Using maximum specificity to override everything including inline <style> tags
   ============================================ */
html[data-theme="dark"] body[data-theme="dark"] input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  input[name="search_box"].form-control,
html[data-theme="dark"]
  body[data-theme="dark"]
  input[name="search_box"].form-control-sm,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_filter
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_filter
  input[name="search_box"].form-control,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_filter
  input[name="search_box"].form-control-sm,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dt-search
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .dt-search
  input[name="search_box"].form-control,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dt-search
  input[name="search_box"].form-control-sm,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  input[name="search_box"].form-control,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  input[name="search_box"].form-control-sm,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"].form-control,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"].form-control-sm,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  .dt-search
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  .dt-search
  input[name="search_box"].form-control,
html[data-theme="dark"]
  body[data-theme="dark"]
  .dataTables_wrapper
  .dt-search
  input[name="search_box"].form-control-sm,
html[data-theme="dark"]
  body[data-theme="dark"]
  .Tripid-search
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .Drivers_name-search
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .Cars_name-search
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .Spot_name-search
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .from_time-search
  input[name="search_box"],
html[data-theme="dark"]
  body[data-theme="dark"]
  .to_time-search
  input[name="search_box"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #666666 !important;
  border: 1px solid #666666 !important;
  color: #333333 !important;
}

/* ============================================
   ABSOLUTE FINAL OVERRIDE: thead dark navy blue background in dark mode
   Must be at absolute end to override View_model_style.css and Bootstrap
   ============================================ */
[data-theme="dark"] thead,
[data-theme="dark"] thead th,
[data-theme="dark"] thead td,
[data-theme="dark"] .custom-thead,
[data-theme="dark"] .custom-thead th,
[data-theme="dark"] .custom-thead td,
[data-theme="dark"] table thead,
[data-theme="dark"] table thead th,
[data-theme="dark"] table thead td,
[data-theme="dark"] .dataTables_wrapper thead,
[data-theme="dark"] .dataTables_wrapper thead th,
[data-theme="dark"] .dataTables_wrapper thead td,
[data-theme="dark"] .dataTables_wrapper table thead,
[data-theme="dark"] .dataTables_wrapper table thead th,
[data-theme="dark"] .dataTables_wrapper table thead td,
html[data-theme="dark"] body[data-theme="dark"] thead,
html[data-theme="dark"] body[data-theme="dark"] thead th,
html[data-theme="dark"] body[data-theme="dark"] thead td,
html[data-theme="dark"] body[data-theme="dark"] .custom-thead,
html[data-theme="dark"] body[data-theme="dark"] .custom-thead th,
html[data-theme="dark"] body[data-theme="dark"] .custom-thead td {
  background-color: #1e3a66 !important;
  background: #1e3a66 !important;
  color: #ffffff !important;
}

/* ============================================
   ABSOLUTE FINAL OVERRIDE: dt-processing.card rounded corners and blue glow
   Must be at absolute end to override View_model_style.css and Bootstrap
   ============================================ */
.dt-processing.card,
.dt-processing.card *,
.dataTables_wrapper .dt-processing.card,
.dataTables_wrapper .dt-processing.card *,
html body .dt-processing.card,
html body .dt-processing.card * {
  border-radius: 20px !important;
  box-shadow: 0 0 15px rgba(69, 130, 236, 0.6), 0 0 30px rgba(69, 130, 236, 0.4) !important;
}

[data-theme="dark"] .dt-processing.card,
[data-theme="dark"] .dt-processing.card *,
[data-theme="dark"] .dataTables_wrapper .dt-processing.card,
[data-theme="dark"] .dataTables_wrapper .dt-processing.card *,
html[data-theme="dark"] body[data-theme="dark"] .dt-processing.card,
html[data-theme="dark"] body[data-theme="dark"] .dt-processing.card * {
  border-radius: 20px !important;
  box-shadow: 0 0 20px rgba(90, 157, 245, 0.8), 0 0 40px rgba(90, 157, 245, 0.5) !important;
}

/* ============================================
   ABSOLUTE FINAL OVERRIDE: dt-scroll rounded corners and blue glow
   First element inside #datatable-responsive_wrapper
   Must be at absolute end to override View_model_style.css and Bootstrap
   ============================================ */
#datatable-responsive_wrapper > .dt-scroll:first-child,
#datatable-responsive_wrapper > .dt-scroll:first-of-type,
#datatable-responsive_wrapper .dt-scroll:first-child,
#datatable-responsive_wrapper .dt-scroll:first-of-type,
#datatable-responsive_wrapper > .dt-scroll:first-child *,
#datatable-responsive_wrapper > .dt-scroll:first-of-type *,
#datatable-responsive_wrapper .dt-scroll:first-child *,
#datatable-responsive_wrapper .dt-scroll:first-of-type * {
  border-radius: 20px !important;
  box-shadow: 0 0 15px rgba(69, 130, 236, 0.6), 0 0 30px rgba(69, 130, 236, 0.4) !important;
}

[data-theme="dark"] #datatable-responsive_wrapper > .dt-scroll:first-child,
[data-theme="dark"] #datatable-responsive_wrapper > .dt-scroll:first-of-type,
[data-theme="dark"] #datatable-responsive_wrapper .dt-scroll:first-child,
[data-theme="dark"] #datatable-responsive_wrapper .dt-scroll:first-of-type,
[data-theme="dark"] #datatable-responsive_wrapper > .dt-scroll:first-child *,
[data-theme="dark"] #datatable-responsive_wrapper > .dt-scroll:first-of-type *,
[data-theme="dark"] #datatable-responsive_wrapper .dt-scroll:first-child *,
[data-theme="dark"] #datatable-responsive_wrapper .dt-scroll:first-of-type *,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  > .dt-scroll:first-child,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  > .dt-scroll:first-of-type,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  .dt-scroll:first-child,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  .dt-scroll:first-of-type,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  > .dt-scroll:first-child
  *,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  > .dt-scroll:first-of-type
  *,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  .dt-scroll:first-child
  *,
html[data-theme="dark"]
  body[data-theme="dark"]
  #datatable-responsive_wrapper
  .dt-scroll:first-of-type
  * {
  border-radius: 20px !important;
  box-shadow: 0 0 20px rgba(90, 157, 245, 0.8), 0 0 40px rgba(90, 157, 245, 0.5) !important;
}

/* ============================================
   SIDEBAR MENU FONT SIZE REDUCTION
   تقليل حجم خط القائمة الجانبية قليلاً
   ============================================ */
.app-sidebar-new-label,
.app-sidebar-new-sublabel,
.app-sidebar-new-link {
  font-size: 0.875rem !important; /* 14px - تكبير الخط قليلاً من 13px */
}

.app-sidebar-new-brand-text {
  font-size: 0.9375rem !important; /* 15px - بدون تغيير */
}

/* ============================================
   APP-PAGE-TITLE ORANGE COLOR WITH GLOW IN DARK MODE
   لون برتقالي مع تأثير glow خفيف في الوضع الليلي
   ============================================ */
[data-theme="dark"] .app-page-title,
[data-theme="dark"] .app-page-title *,
html[data-theme="dark"] body[data-theme="dark"] .app-page-title,
html[data-theme="dark"] body[data-theme="dark"] .app-page-title * {
  color: #ff8c42 !important; /* Orange color */
  text-shadow: 0 0 10px rgba(255, 140, 66, 0.5),
    0 0 20px rgba(255, 140, 66, 0.3) !important; /* Light orange glow */
}

/* ============================================
   OPERATION BTN MAX HEIGHT
   تحديد أقصى ارتفاع لعنصر operation_btn مع ضغط العناصر الداخلية
   ============================================ */
.operation_btn {
  max-height: 32px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  overflow: visible;
}

/* ============================================
   DT-BUTTONS WHITE TEXT IN DARK MODE
   نصوص الأزرار داخل dt-buttons بيضاء في الوضع الليلي
   ============================================ */
[data-theme="dark"] .dt-buttons button,
[data-theme="dark"] .dt-buttons .btn,
[data-theme="dark"] .dt-buttons button span,
[data-theme="dark"] .dt-buttons .btn span,
[data-theme="dark"] .dt-buttons button i,
[data-theme="dark"] .dt-buttons .btn i {
  color: #ffffff !important;
}

/* ============================================
   DT-SEARCH-1 WHITE BACKGROUND IN DARK MODE
   خلفية مربع البحث #dt-search-1 بيضاء في الوضع الليلي
   ============================================ */
[data-theme="dark"] #dt-search-1,
[data-theme="dark"] input#dt-search-1 {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* ============================================
   SECTION SEARCH INPUT - WHITE BACKGROUND IN DARK MODE
   خلفية حقل البحث section-search-input بيضاء في الوضع الليلي
   ============================================ */
[data-theme="dark"] #section-search-input,
[data-theme="dark"] input#section-search-input,
[data-theme="dark"] .app-search-input,
[data-theme="dark"] #section-search-input.app-search-input {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #666666 !important;
}

[data-theme="dark"] #section-search-input:focus,
[data-theme="dark"] input#section-search-input:focus,
[data-theme="dark"] .app-search-input:focus,
[data-theme="dark"] #section-search-input.app-search-input:focus {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #5a9df5 !important;
  box-shadow: 0 0 0 0.2rem rgba(90, 157, 245, 0.25) !important;
}

/* ============================================
   FILTER ELEMENT - LEFT ALIGNMENT FOR CHILDREN
   العناصر الداخلية داخل name="filter" في أقصى يسار مع padding قليل
   ============================================ */
[name="filter"] > *,
div[name="filter"] > *,
[name="filter"] .row,
div[name="filter"] .row,
[name="filter"] .d-flex,
div[name="filter"] .d-flex {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-right: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* ==========================================================================
   DISABLED_CANDIDATES_STAGE1 (2024-12-19)
   ==========================================================================
   These rules have been disabled (commented out) for testing.
   They are believed to be redundant duplicates that are overridden by
   later, more specific rules. If no visual/behavioral regressions occur
   after testing, these will be permanently deleted in Stage 2.
   ========================================================================== */

/* DISABLED: Redundant sidebar dark mode text color rules
   Reason: Lines 1859-1887 are overridden by the "FINAL OVERRIDE" at line 1893
   which uses [data-theme="dark"] .app-sidebar-new * (universal selector)
   Keep: Line 1893 (FINAL OVERRIDE) and lines 1898-1902 (icon exclusions)
*/
/*
[data-theme="dark"] .app-sidebar-new,
[data-theme="dark"]
  .app-sidebar-new
  *:not(i):not([class*="fa"]):not([class*="icon"]) {
  color: #ffffff !important;
}

[data-theme="dark"] .app-sidebar-new-section-toggle,
[data-theme="dark"] .app-sidebar-new-link,
[data-theme="dark"] .app-sidebar-new-sublink,
[data-theme="dark"] .app-sidebar-new-label,
[data-theme="dark"] .app-sidebar-new-sublabel,
[data-theme="dark"] .app-sidebar-new-brand-text,
[data-theme="dark"] .app-sidebar-new-arrow {
  color: #ffffff !important;
}

Additional fixes for sidebar text in dark mode
[data-theme="dark"] .app-sidebar-brand a {
  color: var(--sidebar-color-dark, #f5f5f5) !important;
}

[data-theme="dark"] .app-sidebar-brand a span {
  color: var(--sidebar-color-dark, #f5f5f5) !important;
}

[data-theme="dark"] .app-sidebar-brand a i {
  color: var(--sidebar-color-dark, #f5f5f5) !important;
}
*/

/* DISABLED: Redundant table headers dark mode text color (first occurrence)
   Reason: Lines 1820-1832 are overridden by the "FINAL OVERRIDE" at line 1913
   which has more comprehensive selectors
   Keep: Line 1913 (FINAL OVERRIDE) and line 1935 (custom-thead override)
*/
/*
Table headers - white text in dark mode
[data-theme="dark"] th,
[data-theme="dark"] thead th,
[data-theme="dark"] .custom-thead th,
[data-theme="dark"] table th,
[data-theme="dark"] .table th,
[data-theme="dark"] .dataTables_wrapper th,
[data-theme="dark"] .dataTable thead th,
[data-theme="dark"] .dataTable th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable th {
  color: #ffffff !important;
}
*/

/* DISABLED: Redundant DataTables info white text (first occurrence)
   Reason: Lines 1950-1957 are overridden by "ULTIMATE OVERRIDE" at line 1995
   and "ABSOLUTE FINAL OVERRIDE" at line 2100
   Keep: Line 2100 (ABSOLUTE FINAL OVERRIDE - most specific)
*/
/*
DataTables info - white text in dark mode
[data-theme="dark"] .dt-info,
[data-theme="dark"] .dt-info *,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_info *,
[data-theme="dark"] .dataTables_wrapper .dt-info,
[data-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: #ffffff !important;
}
*/

/* DISABLED: Redundant dashboard page names white text (first occurrence)
   Reason: Lines 1960-1965 are overridden by "ULTIMATE OVERRIDE" at line 2011
   Keep: Line 2011 (ULTIMATE OVERRIDE - more comprehensive selectors)
*/
/*
Dashboard page names - white text in dark mode
[data-theme="dark"] .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-name *,
[data-theme="dark"] .app-dashboard-page-link .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-item .app-dashboard-page-name {
  color: #ffffff !important;
}
*/

/* DISABLED: Redundant dropdown menu white text (first occurrence)
   Reason: Lines 1968-1987 are overridden by "ULTIMATE OVERRIDE" at line 2025
   and "ABSOLUTE FINAL OVERRIDE" at line 2064
   Keep: Line 2064 (ABSOLUTE FINAL OVERRIDE - most specific with :not() selectors)
*/
/*
Dropdown menu - FINAL OVERRIDE for white text in dark mode
[data-theme="dark"] .app-dropdown,
[data-theme="dark"] .app-dropdown *,
[data-theme="dark"] .app-dropdown-menu,
[data-theme="dark"] .app-dropdown-menu *,
[data-theme="dark"] .app-dropdown-menu a,
[data-theme="dark"] .app-dropdown-menu span,
[data-theme="dark"] .app-user-menu,
[data-theme="dark"] .app-user-menu span,
[data-theme="dark"] .app-dropdown-toggle,
[data-theme="dark"] .app-dropdown-toggle span {
  color: #ffffff !important;
}

Exclude icons from color override
[data-theme="dark"] .app-dropdown i,
[data-theme="dark"] .app-dropdown-menu i,
[data-theme="dark"] .app-user-menu i,
[data-theme="dark"] .app-dropdown-toggle i {
  color: inherit !important;
}
*/

/* DISABLED: Redundant "ULTIMATE OVERRIDE" rules (intermediate duplicates)
   Reason: Lines 1995-2058 are overridden by "ABSOLUTE FINAL OVERRIDE" rules
   that come later with higher specificity
   Keep: "ABSOLUTE FINAL OVERRIDE" rules at lines 2064, 2100, etc.
*/
/*
ULTIMATE OVERRIDE: Force white text - Must be at very end
This overrides ALL other CSS files including View_model_style.css

DataTables info - ULTIMATE OVERRIDE
[data-theme="dark"] .dt-info,
[data-theme="dark"] .dt-info *,
[data-theme="dark"] div.dt-info,
[data-theme="dark"] div.dt-info *,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_info *,
[data-theme="dark"] div.dataTables_info,
[data-theme="dark"] div.dataTables_info *,
[data-theme="dark"] .dataTables_wrapper .dt-info,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper div.dt-info,
[data-theme="dark"] .dataTables_wrapper div.dataTables_info {
  color: #ffffff !important;
}

Dashboard page names - ULTIMATE OVERRIDE
[data-theme="dark"] .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-name *,
[data-theme="dark"] span.app-dashboard-page-name,
[data-theme="dark"] span.app-dashboard-page-name *,
[data-theme="dark"] .app-dashboard-page-link .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-link span.app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-item .app-dashboard-page-name,
[data-theme="dark"] .app-dashboard-page-item span.app-dashboard-page-name,
[data-theme="dark"] a .app-dashboard-page-name,
[data-theme="dark"] a span.app-dashboard-page-name {
  color: #ffffff !important;
}

Dropdown menu - ULTIMATE OVERRIDE
[data-theme="dark"] .app-dropdown,
[data-theme="dark"] .app-dropdown *,
[data-theme="dark"] div.app-dropdown,
[data-theme="dark"] div.app-dropdown *,
[data-theme="dark"] .app-dropdown-menu,
[data-theme="dark"] .app-dropdown-menu *,
[data-theme="dark"] ul.app-dropdown-menu,
[data-theme="dark"] ul.app-dropdown-menu *,
[data-theme="dark"] .app-dropdown-menu a,
[data-theme="dark"] .app-dropdown-menu span,
[data-theme="dark"] .app-dropdown-menu li,
[data-theme="dark"] .app-dropdown-menu li *,
[data-theme="dark"] .app-user-menu,
[data-theme="dark"] .app-user-menu span,
[data-theme="dark"] a.app-user-menu,
[data-theme="dark"] a.app-user-menu span,
[data-theme="dark"] .app-dropdown-toggle,
[data-theme="dark"] .app-dropdown-toggle span,
[data-theme="dark"] a.app-dropdown-toggle,
[data-theme="dark"] a.app-dropdown-toggle span {
  color: #ffffff !important;
}

Exclude icons from ultimate override
[data-theme="dark"] .app-dropdown i,
[data-theme="dark"] .app-dropdown-menu i,
[data-theme="dark"] .app-user-menu i,
[data-theme="dark"] .app-dropdown-toggle i,
[data-theme="dark"] .app-dropdown [class*="fa"],
[data-theme="dark"] .app-dropdown-menu [class*="fa"],
[data-theme="dark"] .app-user-menu [class*="fa"],
[data-theme="dark"] .app-dropdown-toggle [class*="fa"] {
  color: inherit !important;
}
*/

/* DISABLED: Redundant input[name="search_box"] rule (first occurrence)
   Reason: Lines 2144-2196 are overridden by "ULTRA FINAL OVERRIDE" at line 2203
   which has maximum specificity (html[data-theme="dark"] body[data-theme="dark"])
   Keep: Line 2203 (ULTRA FINAL OVERRIDE - highest specificity)
*/
/*
ABSOLUTE FINAL OVERRIDE: name="search_box" gray background in dark mode
Same color as x_panel for consistency
Must be at absolute end to override View_model_style.css and Bootstrap
[data-theme="dark"] input[name="search_box"],
[data-theme="dark"] input[name="search_box"].form-control,
[data-theme="dark"] input[name="search_box"].form-control-sm,
[data-theme="dark"] .dataTables_filter input[name="search_box"],
[data-theme="dark"] .dataTables_filter input[name="search_box"].form-control,
[data-theme="dark"] .dataTables_filter input[name="search_box"].form-control-sm,
[data-theme="dark"] .dt-search input[name="search_box"],
[data-theme="dark"] .dt-search input[name="search_box"].form-control,
[data-theme="dark"] .dt-search input[name="search_box"].form-control-sm,
[data-theme="dark"] .dataTables_wrapper input[name="search_box"],
[data-theme="dark"] .dataTables_wrapper input[name="search_box"].form-control,
[data-theme="dark"]
  .dataTables_wrapper
  input[name="search_box"].form-control-sm,
[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"],
[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"].form-control,
[data-theme="dark"]
  .dataTables_wrapper
  .dataTables_filter
  input[name="search_box"].form-control-sm,
[data-theme="dark"] .dataTables_wrapper .dt-search input[name="search_box"],
[data-theme="dark"]
  .dataTables_wrapper
  .dt-search
  input[name="search_box"].form-control,
[data-theme="dark"]
  .dataTables_wrapper
  .dt-search
  input[name="search_box"].form-control-sm,
[data-theme="dark"] body input[name="search_box"],
[data-theme="dark"] body .dataTables_filter input[name="search_box"],
[data-theme="dark"] body .dt-search input[name="search_box"],
[data-theme="dark"] html[data-theme="dark"] input[name="search_box"],
[data-theme="dark"]
  html[data-theme="dark"]
  .dataTables_filter
  input[name="search_box"],
[data-theme="dark"]
  html[data-theme="dark"]
  .dt-search
  input[name="search_box"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #666666 !important;
  border: 1px solid #666666 !important;
  color: #333333 !important;
}
*/

/* ============================================
   ABSOLUTE FINAL OVERRIDE: SIDEBAR WIDTH
   ضمان تطبيق عرض القائمة الجانبية من المتغير
   ============================================ */
.app-sidebar-new {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
}

/* ============================================
   HOME PAGE BACKGROUND IMAGE - LIGHT MODE ONLY
   ============================================ */

/* ============================================
   HOME PAGE BACKGROUND IMAGE - LIGHT MODE ONLY
   ============================================ */

/* DARK MODE: remove background + overlays */
html[data-theme="dark"] .left_col,
html[data-theme="dark"] #main-content.app-content,
html[data-theme="dark"] .app-content {
  background-image: none !important;
  background-color: var(--content-bg) !important;
}

/* Remove pseudo layers in dark */
html[data-theme="dark"] .left_col::before,
html[data-theme="dark"] .left_col::after,
html[data-theme="dark"] #main-content.app-content::before,
html[data-theme="dark"] #main-content.app-content::after,
html[data-theme="dark"] .app-content::before,
html[data-theme="dark"] .app-content::after {
  display: none !important;
  content: none !important;
}

/* LIGHT MODE: no direct background image (we use ::before for 20% opacity image) */
html:not([data-theme="dark"]) #main-content.app-content,
html:not([data-theme="dark"]) .left_col {
  background-image: none !important;
  position: relative;
}

/* LIGHT MODE: background image layer (40% opacity) */
html:not([data-theme="dark"]) #main-content.app-content::before,
html:not([data-theme="dark"]) .left_col::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.elprince.top/upload/prince_logo.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.6; /* ✅ image opacity */
  z-index: 0;
  pointer-events: none;
}

/* LIGHT MODE: white overlay for readability (above image, below content) */
html:not([data-theme="dark"]) #main-content.app-content::after,
html:not([data-theme="dark"]) .left_col::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 1;
  pointer-events: none;
}

/* Ensure content is above layers (exclude overlays) */
html:not([data-theme="dark"])
  #main-content.app-content
  > *:not(.modal):not(.modal-backdrop):not(.offcanvas):not(
    .offcanvas-backdrop
  ):not(.toast-container):not(.dropdown-menu):not(.popover):not(.tooltip),
html:not([data-theme="dark"])
  .left_col
  > *:not(.modal):not(.modal-backdrop):not(.offcanvas):not(
    .offcanvas-backdrop
  ):not(.toast-container):not(.dropdown-menu):not(.popover):not(.tooltip) {
  position: relative;
  z-index: 2;
}

/* Defensive Bootstrap stacking overrides */
.modal {
  z-index: 1055 !important;
}
.modal-backdrop {
  z-index: 1050 !important;
}
.offcanvas {
  z-index: 1045 !important;
}
.offcanvas-backdrop {
  z-index: 1040 !important;
}

html:not([data-theme="dark"]) .left_col .app-card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) #main-content.app-content .app-card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  opacity: 0.9 !important;
}

/* Dark mode cards normal */
html[data-theme="dark"] #main-content.app-content .app-card,
html[data-theme="dark"] .left_col .app-card {
  background-color: var(--card-bg, #fff) !important;
  opacity: 1 !important;
}

/* ============================================
   DATATABLES TBODY CELLS BOLD TEXT
   جعل الخطوط في خلايا DataTables bold
   ============================================ */
table.dataTable tbody td,
table.dataTable tbody td *,
.dataTables_wrapper table.dataTable tbody td,
.dataTables_wrapper table.dataTable tbody td *,
.dataTables_scrollBody table.dataTable tbody td,
.dataTables_scrollBody table.dataTable tbody td * {
  font-weight: bold !important;
}

/* ==========================================================================
   TOASTR CENTER POSITION - وضع toastr في وسط الشاشة
   ========================================================================== */
#toast-container.toast-center-center {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  position: fixed !important;
  pointer-events: none; /* clicks pass through */
  z-index: 999999 !important;
}

#toast-container.toast-center-center > div {
  pointer-events: auto; /* toast itself can be hovered/clicked */
  margin: 0 auto !important;
}