/* تحديث 61: كل الشاشات بنفس الشكل على الجوال (الويب والأندرويد)
   - النافذة بطاقة في منتصف الشاشة، وأقصى ارتفاع 84% من الشاشة
   - الترويسة ثابتة بلون التطبيق، والمحتوى ينزلق تحتها عند السحب
   - الستيكرات بحجم واحد وخط واحد في كل الشاشات
   الكمبيوتر لا يتأثر. */

@media (max-width: 820px) {

  /* ---------- 1. النافذة: حجم موحد في منتصف الشاشة ---------- */
  html body .modal {
    align-items: center !important; justify-content: center !important; padding: 12px !important;
  }
  html body .modal .modal-box:not(.ntf-box):not(.legal-box):not(.user-guide-box),
  html body #profileModal .modal-box,
  html body #reportsModal .modal-box,
  html body #systemHealthModal .modal-box,
  html body #monitorUserDetailModal .modal-box,
  html body #usersModal .modal-box,
  html body #receiptsLedgerModal .modal-box,
  html body #receiptModal .modal-box,
  html body #receiptRecordViewModal .modal-box,
  html body #residentReceiptsModal .modal-box,
  html body #auditLogModal .modal-box,
  html body #buildingsModal .modal-box,
  html body #backupExportModal .modal-box,
  html body #backupHistoryModal .modal-box {
    width: min(94vw, 480px) !important; max-width: 480px !important; min-width: 0 !important;
    height: auto !important;
    max-height: 84vh !important; max-height: 84dvh !important;
    display: block !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 14px !important; border-radius: 20px !important; box-sizing: border-box !important;
  }
  html body .modal .ntf-box {
    max-height: 84vh !important; max-height: 84dvh !important;
  }

  /* ---------- 2. الترويسة الثابتة: نفس ترويسة التطبيق ---------- */
  html body .modal .modal-box:not(.ntf-box) > h2:first-child {
    position: sticky !important; top: 0 !important; z-index: 20 !important;
    margin: 0 -14px 12px !important; padding: 13px 12px 13px 16px !important;
    border: 0 !important; border-radius: 20px 20px 0 0 !important;
    font-size: 16px !important; line-height: 1.35 !important; font-weight: 800 !important;
    color: #fff !important; text-align: start !important;
    background:
      radial-gradient(360px 140px at 0% 0%, rgba(184,134,47,.28), transparent 65%),
      linear-gradient(120deg, var(--pine-700), var(--pine-950)) !important;
    box-shadow: inset 0 -4px 0 var(--brass) !important;
  }
  html body .modal .modal-box:not(.ntf-box) > h2:first-child::before {
    width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
  }
  html body .modal .modal-box:not(.ntf-box) > h2:first-child .ssb-x {
    width: 34px !important; height: 34px !important; min-height: 34px !important;
  }

  /* ترويسة مراقبة النظام وتفاصيل المستخدم (لا تبدأ بـ h2 مباشرة) */
  html body #systemHealthModal .system-monitor-topbar,
  html body #monitorUserDetailModal .monitor-detail-head {
    position: sticky !important; top: 0 !important; z-index: 20 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    margin: 0 -14px 12px !important; padding: 13px 12px 13px 16px !important;
    border: 0 !important; border-radius: 20px 20px 0 0 !important;
    color: #fff !important;
    background:
      radial-gradient(360px 140px at 0% 0%, rgba(184,134,47,.28), transparent 65%),
      linear-gradient(120deg, var(--pine-700), var(--pine-950)) !important;
    box-shadow: inset 0 -4px 0 var(--brass) !important;
  }
  html body #systemHealthModal .system-monitor-topbar > div,
  html body #monitorUserDetailModal .monitor-detail-head > div { flex: 1 1 auto !important; min-width: 0 !important; }
  html body #systemHealthModal .system-monitor-topbar h2,
  html body #monitorUserDetailModal .monitor-detail-head h2 {
    color: #fff !important; font-size: 16px !important; line-height: 1.35 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  }
  html body #systemHealthModal .system-monitor-topbar p,
  html body #monitorUserDetailModal .monitor-detail-head p {
    color: rgba(255,255,255,.85) !important; font-size: 12px !important; line-height: 1.5 !important; margin: 3px 0 0 !important;
  }
  html body #systemHealthModal .system-monitor-topbar .plan-badge { flex: 0 0 auto !important; font-size: 11px !important; }
  html body #systemHealthModal .system-monitor-topbar .sm-close,
  html body #monitorUserDetailModal .monitor-detail-head > button {
    flex: 0 0 auto !important; width: auto !important; min-height: 34px !important; height: 34px !important;
    padding: 0 12px !important; border-radius: 10px !important; font-size: 12px !important;
    background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important;
  }

  /* الترويسة الموحدة لصندوق الإدارة وإرسال الرسائل: نفس لون التطبيق */
  html body .modal .ntf-head {
    background:
      radial-gradient(360px 140px at 0% 0%, rgba(184,134,47,.28), transparent 65%),
      linear-gradient(120deg, var(--pine-700), var(--pine-950)) !important;
    box-shadow: inset 0 -4px 0 var(--brass) !important;
    border: 0 !important; border-radius: 20px 20px 0 0 !important;
    color: #fff !important; align-items: center !important; gap: 10px !important;
    padding: 13px 16px 13px 56px !important;
  }
  html body .modal .ntf-head::before {
    content: ""; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
    background: url("../img/emblem.png") center/contain no-repeat;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
  }
  html body .modal .ntf-head > div { flex: 1 1 auto !important; min-width: 0 !important; }
  html body .modal .ntf-head > div { text-align: start !important; }
  html body .modal .ntf-head h2::after,
  html body .modal .ntf-head h2::before,
  html body .modal .modal-box > h2::after { display: none !important; content: none !important; }
  html body .modal .ntf-head h2 {
    color: #fff !important; border: 0 !important; padding: 0 !important; margin: 0 0 3px !important;
    text-align: start !important; font-size: 16px !important;
  }
  html body .modal .ntf-lead { color: rgba(255,255,255,.85) !important; text-align: start !important; font-size: 12px !important; }
  html body .modal .ntf-head .ntf-close {
    background: rgba(255,255,255,.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important;
  }

  /* ---------- 3. الستيكرات: حجم واحد وخط واحد ومحتوى في المنتصف ---------- */
  html body .system-monitor-kpis,
  html body .system-health-summary,
  html body .users-security-summary {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important; margin: 10px 0 !important;
  }
  html body .monitor-kpi,
  html body .health-summary-card,
  html body .security-stat {
    box-sizing: border-box !important; height: 84px !important; min-height: 84px !important; max-height: 84px !important;
    margin: 0 !important; padding: 8px !important; border-radius: 14px !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 3px !important; text-align: center !important;
    font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important;
  }
  html body .monitor-kpi > span,
  html body .security-stat > span { font-size: 12px !important; line-height: 1.25 !important; font-weight: 700 !important; }
  html body .monitor-kpi strong,
  html body .health-summary-card strong,
  html body .security-stat strong {
    display: block !important; width: 100% !important; margin: 0 !important;
    font-size: 18px !important; font-weight: 800 !important; line-height: 1.1 !important;
    text-align: center !important; font-variant-numeric: tabular-nums;
  }
  html body .monitor-kpi small,
  html body .security-stat small { font-size: 11px !important; line-height: 1.25 !important; margin: 0 !important; }
  /* قيمة الستيكر الرئيسية 18 في كل الشاشات (الرئيسية تأخذ 19 من قاعدة أقدم) */
  html body #appView .main .cards .card b { font-size: 18px !important; line-height: 1.1 !important; }

  /* ---------- 4. الخطوط داخل النوافذ: معيار واحد ---------- */
  html body .modal .modal-box:not(.ntf-box) h3 { font-size: 15px !important; line-height: 1.4 !important; margin: 0 0 4px !important; }
  html body .modal .modal-box:not(.ntf-box) p { font-size: 12.5px !important; line-height: 1.6 !important; }
  html body #systemHealthModal .system-monitor-section { padding: 12px !important; border-radius: 16px !important; }
  html body #systemHealthModal .system-monitor-banner strong { font-size: 14px !important; }
  html body #systemHealthModal .system-monitor-banner span,
  html body #systemHealthModal .monitor-scan-note { font-size: 12px !important; line-height: 1.6 !important; }
  html body #systemHealthModal .system-health-actions {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  html body #systemHealthModal .system-health-actions > button { width: 100% !important; margin: 0 !important; }
  html body #systemHealthModal .system-health-actions > button[data-close] { grid-column: 1 / -1 !important; }

  /* ---------- 5. النسخ الاحتياطي: بطاقات عمودية ---------- */
  html body #backupExportModal .backup-center-grid {
    display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important;
  }
  html body #backupExportModal .backup-center-card { padding: 12px !important; border-radius: 16px !important; }
  html body #backupExportModal .backup-center-card h3 { font-size: 15px !important; margin: 0 0 4px !important; }
  html body #backupExportModal .backup-center-card p { font-size: 12px !important; line-height: 1.6 !important; }
  html body #backupExportModal .backup-center-card > button { width: 100% !important; margin-top: 8px !important; }

  /* ---------- 6. التقارير وسجل التعديلات والملف الشخصي: عناصر مرتبة ---------- */
  html body #reportsModal .actions {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  html body #reportsModal .actions > select { grid-column: 1 / -1 !important; width: 100% !important; }
  html body #reportsModal .actions > button { width: 100% !important; margin: 0 !important; }
  html body #reportsModal .actions > button[data-close] { grid-column: 1 / -1 !important; }
  html body #reportsModal .report-root { max-width: 100% !important; overflow-x: auto !important; }
  html body #auditLogModal .audit-log-tools {
    display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important;
  }
  html body #profileModal .form-grid,
  html body #profileModal .profile-images { grid-template-columns: 1fr !important; }

  /* ---------- 7. إدارة المستخدمين: تمرير واحد، نفس الترويسة، وكل مستخدم بطاقة ---------- */
  /* النافذة هي التي تتمرر وحدها؛ لا تنتقل الحركة إلى الشاشة الخلفية */
  html body .modal { overscroll-behavior: contain !important; }
  html body #usersModal { align-items: center !important; justify-content: center !important; padding: 12px !important; }
  html body #usersModal .modal-box { overscroll-behavior: contain !important; }
  html body #usersModal .users-modal-header {
    position: sticky !important; top: 0 !important; z-index: 20 !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    margin: 0 -14px 12px !important; padding: 13px 12px 13px 16px !important;
    border: 0 !important; border-radius: 20px 20px 0 0 !important;
    background:
      radial-gradient(360px 140px at 0% 0%, rgba(184,134,47,.28), transparent 65%),
      linear-gradient(120deg, var(--pine-700), var(--pine-950)) !important;
    box-shadow: inset 0 -4px 0 var(--brass) !important;
  }
  html body #usersModal .users-modal-header h2 {
    flex: 1 1 auto !important; min-width: 0 !important; color: #fff !important;
    font-size: 16px !important; line-height: 1.35 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  }
  html body #usersModal .users-modal-header h2::before,
  html body #usersModal .users-modal-header h2::after { display: none !important; content: none !important; }
  html body #usersModal .users-top-close {
    flex: 0 0 auto !important; width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important;
    font-size: 0 !important; border-radius: 10px !important;
    background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important;
  }
  html body #usersModal .users-top-close::after { content: "✕"; font-size: 16px; color: #fff; }

  html body #usersModal .users-modal-content {
    overflow: visible !important; max-height: none !important; height: auto !important; padding: 0 !important;
  }
  html body #usersModal .users-intro { font-size: 12px !important; line-height: 1.6 !important; margin: 0 0 10px !important; }
  html body #usersModal .users-tools { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  html body #usersModal .users-search,
  html body #usersModal .users-verification-filter { width: 100% !important; height: 42px !important; font-size: 14px !important; }

  /* الجدول يتحول إلى بطاقات: كل مستخدم بطاقة واحدة مرتبة */
  html body #usersModal .table-wrap {
    flex: none !important; max-height: none !important; min-height: 0 !important; height: auto !important;
    overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  html body #usersModal .users-table { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; }
  html body #usersModal .users-table thead { display: none !important; }
  html body #usersModal .users-table tbody { display: block !important; }
  html body #usersModal .users-table tbody tr {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
    margin: 0 0 10px !important; padding: 10px !important;
    border: 1px solid rgba(15,58,54,.14) !important; border-radius: 14px !important; background: #fff !important;
  }
  html body #usersModal .users-table tbody tr td {
    display: block !important; min-width: 0 !important; padding: 0 !important; border: 0 !important;
    background: transparent !important; text-align: start !important; font-size: 12.5px !important; line-height: 1.5 !important;
    word-break: break-word;
  }
  html body #usersModal .users-table tbody tr td::before {
    display: block; font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 2px;
  }
  html body #usersModal .users-table tbody tr td:nth-child(2)::before { content: "توثيق البريد"; }
  html body #usersModal .users-table tbody tr td:nth-child(3)::before { content: "الخطة"; }
  html body #usersModal .users-table tbody tr td:nth-child(4)::before { content: "البداية"; }
  html body #usersModal .users-table tbody tr td:nth-child(5)::before { content: "النهاية"; }
  html body #usersModal .users-table tbody tr td:nth-child(6)::before { content: "الأيام"; }
  html body #usersModal .users-table tbody tr td:nth-child(7)::before { content: "الحالة"; }
  html body #usersModal .users-table tbody tr td:nth-child(8)::before { content: "الإجراءات"; }
  html body #usersModal .users-table tbody tr td:first-child,
  html body #usersModal .users-table tbody tr td[colspan],
  html body #usersModal .users-table tbody tr td:last-child { grid-column: 1 / -1 !important; }
  html body #usersModal .users-table tbody tr td:first-child::before { display: none !important; }
  html body #usersModal .users-table tbody tr td:first-child { font-size: 14px !important; font-weight: 800 !important; }
  html body #usersModal .users-table tbody tr td[colspan] { text-align: center !important; }
  html body #usersModal .users-table tbody tr td:last-child { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  html body #usersModal .users-table tbody tr td:last-child::before { display: none !important; }

  html body #usersModal .users-modal-footer {
    position: static !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
    margin: 12px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important;
  }
  html body #usersModal .users-modal-footer > button { width: 100% !important; margin: 0 !important; }

  /* ---------- 8. تفاصيل المستخدم في مراقبة النظام ---------- */
  /* التبويبات: صف أفقي قابل للتمرير بدل أعمدة نص متكسرة */
  html body #monitorUserDetailModal .monitor-detail-tabs {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    gap: 6px !important; padding: 2px 0 10px !important; margin: 0 0 6px !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  html body #monitorUserDetailModal .monitor-detail-tabs::-webkit-scrollbar { display: none; }
  html body #monitorUserDetailModal .monitor-detail-tabs > button {
    flex: 0 0 auto !important; width: auto !important; min-height: 36px !important;
    writing-mode: horizontal-tb !important; white-space: nowrap !important;
    padding: 8px 14px !important; border-radius: 999px !important;
    font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.2 !important;
    background: #fff !important; color: var(--pine-900, #0f3a36) !important; border: 1px solid rgba(15,58,54,.18) !important;
  }
  html body #monitorUserDetailModal .monitor-detail-tabs > button.active {
    background: var(--pine-800, #0f3a36) !important; color: #fff !important; border-color: var(--pine-800, #0f3a36) !important;
  }

  /* ملخص المستخدم: ستيكرات بنفس مقاس باقي الشاشات */
  html body #monitorUserDetailModal .monitor-detail-summary {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 10px !important;
  }
  html body #monitorUserDetailModal .monitor-detail-summary > div {
    box-sizing: border-box !important; min-height: 84px !important; margin: 0 !important; padding: 8px !important;
    border-radius: 14px !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; gap: 3px !important;
    text-align: center !important; overflow: hidden !important;
  }
  html body #monitorUserDetailModal .monitor-detail-summary > div > span { font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; }
  html body #monitorUserDetailModal .monitor-detail-summary > div > b {
    display: block !important; width: 100% !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.15 !important;
    text-align: center !important; overflow-wrap: anywhere !important;
  }
  html body #monitorUserDetailModal .monitor-detail-summary > div > small { font-size: 10.5px !important; line-height: 1.25 !important; overflow-wrap: anywhere; }

  /* الجداول تتحول إلى بطاقات: كل صف بطاقة، وكل خلية باسم عمودها */
  html body #monitorUserDetailModal .monitor-table-wrap {
    overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  html body #monitorUserDetailModal .ssb-card-table { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; }
  html body #monitorUserDetailModal .ssb-card-table thead { display: none !important; }
  html body #monitorUserDetailModal .ssb-card-table tbody { display: block !important; }
  html body #monitorUserDetailModal .ssb-card-table tbody tr {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
    margin: 0 0 10px !important; padding: 10px !important; border: 1px solid rgba(15,58,54,.14) !important;
    border-radius: 14px !important; background: #fff !important;
  }
  html body #monitorUserDetailModal .ssb-card-table tbody td {
    display: block !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    text-align: start !important; font-size: 12.5px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important;
  }
  html body #monitorUserDetailModal .ssb-card-table tbody td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 2px;
  }
  html body #monitorUserDetailModal .ssb-card-table tbody td[colspan] {
    grid-column: 1 / -1 !important; text-align: center !important; color: #64748b !important;
  }

  html body #monitorUserDetailModal .monitor-detail-summary > div[title] { grid-column: 1 / -1 !important; }
  html body #monitorUserDetailModal .ssb-card-table tbody td:first-child { font-size: 13px !important; }

  /* أزرار الإجراءات: شبكة من عمودين، وإغلاق بعرض كامل */
  html body #monitorUserDetailModal .monitor-detail-actions {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
    position: static !important; bottom: auto !important; background: transparent !important; box-shadow: none !important;
    margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important;
  }
  html body #monitorUserDetailModal .monitor-detail-actions > button {
    width: 100% !important; margin: 0 !important; min-height: 42px !important; padding: 8px 10px !important;
    font-size: 12.5px !important; line-height: 1.3 !important; white-space: normal !important;
  }
  html body #monitorUserDetailModal .monitor-detail-actions > button[data-close] { grid-column: 1 / -1 !important; }

  /* توزيع البيانات: كل بند بطاقة، والشريط بعرض كامل والقيمة تحته */
  html body #monitorUserDetailModal .monitor-dist-row {
    display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important;
    margin: 0 0 8px !important; padding: 10px 12px !important; border: 1px solid rgba(15,58,54,.14) !important;
    border-radius: 14px !important; background: #fff !important; text-align: start !important;
  }
  html body #monitorUserDetailModal .monitor-dist-row > span {
    font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.5 !important; overflow-wrap: anywhere !important;
  }
  html body #monitorUserDetailModal .monitor-dist-bar {
    width: 100% !important; height: 8px !important; border-radius: 999px !important; background: #e2e8f0 !important; overflow: hidden !important;
  }
  html body #monitorUserDetailModal .monitor-dist-bar i {
    display: block !important; height: 100% !important; border-radius: 999px !important;
    background: linear-gradient(90deg, #1c6a60, #b8862f) !important;
  }
  html body #monitorUserDetailModal .monitor-dist-row > b { font-size: 12px !important; font-weight: 700 !important; color: #475569 !important; }

  /* ---------- 9. معالج البدء: بطاقة في منتصف الشاشة مثل باقي النوافذ ---------- */
  html body #setupWizardModal { align-items: center !important; justify-content: center !important; padding: 12px !important; }
  html body #setupWizardModal .setup-box {
    width: min(94vw, 480px) !important; max-width: 480px !important; min-width: 0 !important;
    min-height: 0 !important; height: auto !important;
    max-height: 84vh !important; max-height: 84dvh !important;
    padding: 0 14px 14px !important; border-radius: 20px !important;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important;
  }
  html body #setupWizardModal .wiz-hero {
    margin: 0 -14px 14px !important; border-radius: 20px 20px 0 0 !important; padding: 16px 16px 14px !important;
  }
  html body #setupWizardModal .wiz-hero h2 { font-size: 16px !important; line-height: 1.35 !important; }
  html body #setupWizardModal .wiz-close { top: 12px !important; left: 12px !important; }
  html body #setupWizardModal .wiz-steps,
  html body #setupWizardModal .wiz-feats { grid-template-columns: 1fr !important; }
  html body #setupWizardModal .wiz-title { font-size: 15px !important; }
  html body #setupWizardModal .wiz-lead,
  html body #setupWizardModal .wiz-sub { font-size: 12.5px !important; line-height: 1.6 !important; }
}

/* ===== 10) تقرير المتأخرات ===== */
.arrears-report .arr-scope{margin:6px 0 10px;font-size:14px;color:#334155;text-align:center}
.arrears-report .arr-cards{margin-bottom:6px}
.arrears-report .arr-year{margin-top:14px}
.arrears-report .arr-year h3{font-size:16px;color:#0f3a36;margin:0 0 6px;text-align:center}
.arrears-report .arr-h4{font-size:14px;margin:12px 0 6px;color:#0f3a36;text-align:center}
.arrears-report .arr-table{width:100%;border-collapse:collapse;margin:0 0 6px;font-size:12.5px}
.arrears-report .arr-table th,.arrears-report .arr-table td{border:1px solid #cbd5e1;padding:6px 6px;text-align:center;vertical-align:middle}
.arrears-report .arr-table thead th{background:#0f3a36;color:#fff;font-weight:800}
.arrears-report .arr-table tfoot th{background:#f1f5f9;font-weight:800}
.arrears-report .arr-name,.arrears-report .rp-name{text-align:right}
.arrears-report .arr-neg{color:#a3361f;font-weight:800}
.arrears-report .arr-months{font-size:12px;text-align:right}
.arrears-report .arr-st{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:800;font-size:12px}
.arrears-report .arr-st.due{background:#f8dcd3;color:#a3361f}
.arrears-report .arr-st.ok{background:#d3ecdc;color:#1f6e3d}
.arrears-report .arr-st.exempt{background:#ece6f7;color:#5b4691}
.arrears-report .arr-empty,.arrears-report .arr-ok-note{text-align:center;color:#1f6e3d;font-weight:700}
@media (max-width:820px){
  .arrears-report .arr-table{display:block;overflow-x:auto;white-space:nowrap}
}


/* 11) منع انتقال التمرير من النافذة إلى الشاشة الخلفية (تقارير) */
.modal,.modal-box{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
#reportsModal .modal-box{scroll-behavior:auto;}
/* 12) المتأخرات داخل تقرير الساكن */
.resident-arrears .arr-scope{margin:6px 0 10px;font-size:14px;color:#334155;text-align:center}
.resident-arrears .arr-cards{margin-bottom:6px}
.resident-arrears .arr-year{margin-top:14px}
.resident-arrears .arr-year h3{font-size:16px;color:#0f3a36;margin:0 0 6px;text-align:center}
.resident-arrears .arr-h4{font-size:14px;margin:12px 0 6px;color:#0f3a36;text-align:center}
.resident-arrears .arr-table{width:100%;border-collapse:collapse;margin:0 0 6px;font-size:12.5px}
.resident-arrears .arr-table th,.resident-arrears .arr-table td{border:1px solid #cbd5e1;padding:6px 6px;text-align:center;vertical-align:middle}
.resident-arrears .arr-table thead th{background:#0f3a36;color:#fff;font-weight:800}
.resident-arrears .arr-table tfoot th{background:#f1f5f9;font-weight:800}
.resident-arrears .arr-name,.resident-arrears .rp-name{text-align:right}
.resident-arrears .arr-neg{color:#a3361f;font-weight:800}
.resident-arrears .arr-months{font-size:12px;text-align:right}
.resident-arrears .arr-st{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:800;font-size:12px}
.resident-arrears .arr-st.due{background:#f8dcd3;color:#a3361f}
.resident-arrears .arr-st.ok{background:#d3ecdc;color:#1f6e3d}
.resident-arrears .arr-st.exempt{background:#ece6f7;color:#5b4691}
.resident-arrears .arr-empty,.resident-arrears .arr-ok-note{text-align:center;color:#1f6e3d;font-weight:700}
@media (max-width:820px){
  .resident-arrears .arr-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* 13) جداول التقارير الموحدة: تقرير الساكن وتقرير المتأخرات (شاشة + PDF) */
.rr-sec{margin:14px 0 6px;break-inside:avoid;page-break-inside:avoid}
.rr-sec h3{font-size:15px;margin:0 0 6px;color:#0f3a36;text-align:center;font-weight:800}
.rpt-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rpt-table{width:100%;border-collapse:collapse;font-size:12px;margin:0}
.rpt-table th,.rpt-table td{border:1px solid #cbd5e1;padding:5px 6px;text-align:center;vertical-align:middle;white-space:nowrap}
.rpt-table thead th{background:#0f3a36;color:#fff;font-weight:800}
.rpt-table tfoot th,.rpt-table tfoot td{background:#eef4f2;font-weight:800}
.rpt-table .rpt-year{text-align:right;font-weight:800;background:#f5f8f7;white-space:nowrap}
.rpt-table tbody tr:nth-child(even) td{background:#fbfcfc}
.rpt-table .rpt-paid{color:#1f6e3d;font-weight:700}
.rpt-table .rpt-zero{color:#94a3b8}
.rpt-table .rpt-other{color:#5b4691;font-weight:700}
.rpt-table .rpt-total{font-weight:800;color:#0f3a36}
.rpt-table .rpt-name{text-align:right;white-space:normal;min-width:120px}
.rpt-table .rpt-months{text-align:right;white-space:normal;min-width:150px;font-size:11.5px}
.rpt-table .arr-neg{color:#a3361f;font-weight:800}
.rpt-table .arr-empty{color:#1f6e3d;font-weight:700}
.rpt-table .arr-st{display:inline-block;padding:1px 9px;border-radius:999px;font-weight:800;font-size:11px;white-space:nowrap}
.rpt-table .arr-st.due{background:#f8dcd3;color:#a3361f}
.rpt-table .arr-st.ok{background:#d3ecdc;color:#1f6e3d}
.rpt-table .arr-st.exempt{background:#ece6f7;color:#5b4691}
.rpt-note{font-size:11.5px;color:#475569;margin:6px 2px 0}
.rpt-notes{font-size:12px;margin-top:6px;color:#334155}
.rpt-notes ul{margin:4px 0 0;padding-inline-start:18px}
.arr-st.due,.arr-st.ok,.arr-st.exempt{display:inline-block}
.arrears-report .arr-cards{margin:8px 0 10px}
.arrears-report .rpt-table{font-size:11.5px}
.arrears-report .rpt-table th,.arrears-report .rpt-table td{padding:3px 5px}
.resident-report .rpt-table{font-size:11.5px}
.resident-report .rpt-table th,.resident-report .rpt-table td{padding:3px 4px}
@media (max-width:820px){
  .rpt-table{font-size:11px}
  .rpt-table th,.rpt-table td{padding:4px 4px}
}

/* 14) الخلفية ثابتة أثناء فتح نافذة التقارير */
html.ssb-report-open,html.ssb-report-open body{overflow:hidden!important;overscroll-behavior:none!important}
html.ssb-report-open .is-mobile-view,html.ssb-report-open main,html.ssb-report-open #appView,html.ssb-report-open .app-shell{overflow:hidden!important}