/* ===== FINAL FORCE MOBILE HEADER COMPACT ===== */
@media (max-width: 900px) {
  body .home-page .home-header {
    padding: 4px 8px !important;
    margin: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: rgba(250,246,236,.98) !important;
    backdrop-filter: blur(10px) !important;
  }

  body .home-page .home-nav {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 3px 7px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .home-page .home-brand {
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  body .home-page .home-brand-mark {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 16px !important;
  }

  body .home-page .home-brand strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
    max-width: 230px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  body .home-page .home-brand small {
    font-size: 9.5px !important;
    line-height: 1.05 !important;
    max-width: 230px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  body .home-page .home-nav-links {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
  }

  body .home-page .home-nav-links a {
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 2px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(255,255,255,.55) !important;
    font-weight: 900 !important;
  }

  body .home-page .home-nav-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
  }

  body .home-page .home-login-btn,
  body .home-page .home-signup-btn {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  body .home-page .home-brand strong {
    font-size: 14px !important;
    max-width: 200px !important;
  }

  body .home-page .home-brand small {
    font-size: 9px !important;
    max-width: 200px !important;
  }

  body .home-page .home-nav-links a {
    font-size: 8.8px !important;
    height: 26px !important;
  }

  body .home-page .home-login-btn,
  body .home-page .home-signup-btn {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 10.8px !important;
  }
}


/* =========================================================
   UAB_MOBILE_SAFETY_LAYER_V1
   طبقة موبايل عامة آمنة:
   - تمنع خروج النصوص والكروت خارج الشاشة
   - تضبط الجداول بسكرول أفقي بدل كسر الصفحة
   - تضبط النوافذ والمودالات
   - لا تلمس الديسكتوب
   ========================================================= */

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #app,
  .app,
  .dashboard-layout,
  .dashboard-main,
  .dashboard-content,
  .content-area,
  .main-content,
  .panel-card,
  .lms-page,
  .center-attendance,
  .center-unlocked-page,
  .center-course-page,
  .question-forum-page,
  .homework-review-page,
  .student-homeworks-page,
  .profile-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .dashboard-content,
  .content-area,
  .main-content,
  .lms-page,
  .center-attendance,
  .center-unlocked-page,
  .center-course-page,
  .question-forum-page,
  .homework-review-page,
  .student-homeworks-page,
  .profile-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .panel-card,
  .stat-card,
  .kpi-card,
  .lms-card,
  .lms-course-card,
  .lms-payment-box,
  .lms-study-card,
  .ca-card,
  .ca-session-card,
  .forum-card,
  .homework-card,
  .profile-card,
  article,
  section {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  strong,
  small,
  label,
  a,
  button,
  input,
  textarea,
  select,
  .lms-button,
  .btn,
  .table-btn {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100% !important;
  }

  iframe,
  video {
    width: 100% !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    min-width: 0 !important;
  }

  button,
  .btn,
  .lms-button,
  .table-btn,
  .modal-btn {
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .lms-actions,
  .form-actions,
  .modal-actions,
  .lms-form-actions,
  .card-actions,
  .table-actions,
  .ca-actions,
  .ca-homework-buttons,
  .ca-homework-options-v2 {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .lms-two,
  .lms-form.inline,
  .ca-form-grid,
  .ca-linked-grid,
  .profile-grid,
  .assistant-actions-grid,
  .lms-payment-admin-grid,
  .admin-content-grid,
  .content-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .lms-course-grid,
  .ca-session-grid,
  .home-grade-grid,
  .home-feature-grid,
  .home-testimonial-grid,
  .home-banner-grid,
  .home-faq-grid,
  .home-contact-grid {
    grid-template-columns: 1fr !important;
  }

  .table-wrap,
  .admin-table-wrap,
  .data-table-wrap,
  .ca-table-wrap,
  .lms-table-wrap,
  .payments-table-wrap,
  .coupons-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table,
  .data-table,
  .ca-table {
    width: max-content !important;
    min-width: 720px !important;
  }

  .modal,
  .lms-modal,
  .ca-modal,
  .assistant-modal-backdrop,
  .profile-crop-modal {
    padding: 10px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  .modal-content,
  .lms-dialog,
  .lms-dialog.compact,
  .ca-modal > *,
  .assistant-modal,
  .profile-crop-modal > * {
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }

  .lms-topbar,
  .page-header,
  .panel-header,
  .ca-header {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .lms-topbar > *,
  .page-header > *,
  .panel-header > *,
  .ca-header > * {
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .dashboard-content,
  .content-area,
  .main-content,
  .lms-page,
  .center-attendance,
  .center-unlocked-page,
  .center-course-page,
  .question-forum-page,
  .homework-review-page,
  .student-homeworks-page,
  .profile-page {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  table,
  .data-table,
  .ca-table {
    min-width: 680px !important;
  }

  .modal,
  .lms-modal,
  .ca-modal,
  .assistant-modal-backdrop,
  .profile-crop-modal {
    padding: 8px !important;
  }
}


/* =========================================================
   UAB_MOBILE_FULL_SIDEBAR_DRAWER_V1
   نفس سايدبار اللاب يتحول إلى Drawer كامل على الموبايل
   ويحافظ على كل العناصر الحالية بنفس الترتيب
   ========================================================= */

@media (max-width: 900px) {
  body:not(.home-page) .app-shell.pro-shell,
  body .app-shell.pro-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .app-shell.pro-shell .main-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .app-shell.pro-shell .content.pro-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    padding-bottom: 82px !important;
    overflow-x: hidden !important;
  }

  body .app-shell.pro-shell .sidebar.pro-sidebar,
  body .app-shell.pro-shell aside.sidebar.pro-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 100002 !important;
    transform: translateX(110%) !important;
    transition: transform .25s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 0 0 0 24px !important;
    box-shadow: -18px 0 55px rgba(15, 23, 42, .28) !important;
    background: linear-gradient(180deg, #123b27 0%, #0f2f22 100%) !important;
    padding-bottom: 22px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.sidebar-open .app-shell.pro-shell .sidebar.pro-sidebar,
  body.sidebar-open .app-shell.pro-shell aside.sidebar.pro-sidebar,
  body .app-shell.pro-shell.sidebar-open .sidebar.pro-sidebar,
  body .app-shell.pro-shell.sidebar-open aside.sidebar.pro-sidebar {
    transform: translateX(0) !important;
  }

  body.sidebar-open::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100001 !important;
    background: rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(3px) !important;
  }

  body .app-shell.pro-shell .sidebar-brand {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, rgba(18,59,39,.98), rgba(18,59,39,.92)) !important;
    backdrop-filter: blur(10px) !important;
    padding: 14px 14px 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }

  body .app-shell.pro-shell .mobile-sidebar-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    margin-inline-start: auto !important;
  }

  body .app-shell.pro-shell .sidebar-collapse,
  body .app-shell.pro-shell #sidebarCollapse {
    display: none !important;
  }

  body .app-shell.pro-shell .sidebar-user-mini-card {
    margin: 10px 12px !important;
    max-width: calc(100% - 24px) !important;
  }

  body .app-shell.pro-shell .sidebar-nav {
    padding: 6px 12px 18px !important;
    overflow: visible !important;
  }

  body .app-shell.pro-shell .sidebar-nav-group {
    margin-bottom: 10px !important;
  }

  body .app-shell.pro-shell .sidebar-nav-title {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body .app-shell.pro-shell .sidebar-nav a,
  body .app-shell.pro-shell .sidebar-soon-link,
  body .app-shell.pro-shell #logoutButton {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }

  body .app-shell.pro-shell .sidebar-nav a b,
  body .app-shell.pro-shell .sidebar-soon-link b {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }

  body .app-shell.pro-shell .dashboard-drawer-float,
  body .app-shell.pro-shell #sidebarDrawerToggle {
    display: inline-flex !important;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 100000 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 15px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #123b27 !important;
    color: #fff !important;
    border: 1px solid rgba(199,146,52,.55) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .22) !important;
    font-size: 22px !important;
  }
}

@media (min-width: 901px) {
  .mobile-sidebar-close {
    display: none !important;
  }
}


/* =========================================================
   UAB_MOBILE_DRAWER_BUTTON_AND_NAV_FIX_V2
   إصلاح ظهور زر القائمة على الموبايل + ترتيب عناصر الدروار
   ========================================================= */

@media (max-width: 900px) {
  body .app-shell.pro-shell .dashboard-drawer-float,
  body .app-shell.pro-shell #sidebarDrawerToggle,
  html body #sidebarDrawerToggle.dashboard-drawer-float {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    position: fixed !important;
    top: auto !important;
    right: 14px !important;
    bottom: 18px !important;
    left: auto !important;

    z-index: 2147483000 !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 20px !important;
    border: 2px solid rgba(255,255,255,.70) !important;
    background: linear-gradient(135deg, #d6a23a 0%, #bd8420 100%) !important;
    color: #07351f !important;

    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    box-shadow: 0 16px 38px rgba(15, 23, 42, .30) !important;
    transform: none !important;
  }

  body.sidebar-open .app-shell.pro-shell .dashboard-drawer-float,
  body.sidebar-open .app-shell.pro-shell #sidebarDrawerToggle,
  body .app-shell.pro-shell.sidebar-open .dashboard-drawer-float,
  body .app-shell.pro-shell.sidebar-open #sidebarDrawerToggle {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body .app-shell.pro-shell .sidebar.pro-sidebar,
  body .app-shell.pro-shell aside.sidebar.pro-sidebar {
    width: min(88vw, 350px) !important;
    max-width: 350px !important;
  }

  body .app-shell.pro-shell .sidebar-nav {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px 22px !important;
  }

  body .app-shell.pro-shell .sidebar-nav-group {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
  }

  body .app-shell.pro-shell .sidebar-nav-title {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 8px !important;
    text-align: center !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  body .app-shell.pro-shell .sidebar-nav a,
  body .app-shell.pro-shell .sidebar-soon-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 48px !important;
    padding: 11px 13px !important;
    margin: 0 0 7px !important;

    border-radius: 16px !important;
    text-align: right !important;

    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  body .app-shell.pro-shell .sidebar-nav a span,
  body .app-shell.pro-shell .sidebar-soon-link span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;

    border-radius: 11px !important;
    background: rgba(255,255,255,.10) !important;

    font-size: 16px !important;
    line-height: 1 !important;
  }

  body .app-shell.pro-shell .sidebar-nav a b,
  body .app-shell.pro-shell .sidebar-soon-link b {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;

    color: inherit !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
  }

  body .app-shell.pro-shell .sidebar-nav a small,
  body .app-shell.pro-shell .sidebar-soon-link small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 90px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body .app-shell.pro-shell .sidebar-nav a.active {
    background: linear-gradient(135deg, #d6a23a 0%, #bd8420 100%) !important;
    color: #07351f !important;
    box-shadow: 0 10px 24px rgba(214, 162, 58, .22) !important;
  }

  body .app-shell.pro-shell .sidebar-nav a.active span {
    background: rgba(7,53,31,.12) !important;
  }

  body .app-shell.pro-shell #logoutButton {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 14px 0 0 !important;
    border-radius: 16px !important;
    background: rgba(239, 68, 68, .14) !important;
    color: #fee2e2 !important;
    border: 1px solid rgba(248, 113, 113, .28) !important;
    font-weight: 900 !important;
  }

  body .app-shell.pro-shell .mobile-sidebar-close {
    z-index: 3 !important;
  }
}