/* ==========================================================================
   Mobile Lite Overrides (MOBILE ONLY)
   هدف الملف: تقليل الـ paint / composite / reflow على الموبايل بدون لمس الديسكتوب
   ========================================================================== */

html:not([data-theme="dark"]) #main-content.app-content,
html:not([data-theme="dark"]) .left_col {
  background-attachment: scroll !important;
  background-image: none !important;
}

html:not([data-theme="dark"]) #main-content.app-content::before,
html:not([data-theme="dark"]) .left_col::before {
  display: none !important;
  content: none !important;
}

.app-content *,
.left_col *,
.x_panel *,
.card *,
.modal-content *,
.dropdown-menu *,
.navbar *,
.app-sidebar-new * {
  filter: none !important;
  backdrop-filter: none !important;
}

.x_panel,
.card,
.modal-content,
.dropdown-menu,
.btn,
.nav-link,
.table,
.dataTables_wrapper .dataTables_scrollBody {
  box-shadow: none !important;
}

* {
  text-shadow: none !important;
}

.btn,
.nav-link,
.dropdown-menu,
.card,
.x_panel,
.modal-content,
.app-sidebar-new,
.table,
.dataTables_wrapper * {
  transition-property: color, background-color, border-color, opacity, transform !important;
  transition-duration: 100ms !important;
}

@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .nav-link:hover,
  .card:hover,
  .x_panel:hover {
    transform: none !important;
  }
}

.card,
.btn,
.modal-content,
.dropdown-menu,
.x_panel {
  border-radius: 12px !important;
}

.card,
.x_panel,
.dataTables_wrapper,
.modal-content {
  contain: layout paint !important;
}

.dataTables_wrapper .dataTables_scrollBody {
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Mobile Light Mode - Fix top area fade (header / nav / title zone)
   ========================================================= */

html:not([data-theme="dark"]) .left_col::after {
  opacity: 0 !important;
  pointer-events: none !important;
}