/* ===== تحديث 38: المعيار الموحّد للخطوط والأحجام والصور =====
   هذا الملف الأخير في الترتيب، ويطبّق معيارًا واحدًا على كل شاشات المشروع (الويب والجوال والأندرويد):
   - خط واحد: IBM Plex Sans Arabic (SSB Plex) بأوزان 400 و600 و700.
   - سلم أحجام محدد بدل القيم المتفرقة (كانت تتراوح بين 10.5 و28 بخطوات نصف بكسل).
   - الحقول 16 بكسل على الجوال لمنع التكبير التلقائي في iOS وتسهيل الكتابة.
   - أيقونات وشعارات بمقاسات ثابتة.
   تُكتب القواعد بنطاق (#appView / .modal / #loginView) ليكون لها وزن أعلى من القواعد السابقة. */

html body{
  --ssb-font:'SSB Plex','IBM Plex Sans Arabic',Tahoma,'Segoe UI',Arial,sans-serif;
  --ssb-fs-micro:12px;   /* شارات، أسماء أقسام صغيرة، عناصر القائمة السفلية على الجوال */
  --ssb-fs-meta:13px;    /* تسميات الحقول، الملاحظات، النصوص الثانوية، رؤوس الجداول */
  --ssb-fs-body:15px;    /* النص العادي، القوائم، الأزرار، الحقول */
  --ssb-fs-table:14px;   /* خلايا الجداول */
  --ssb-fs-h3:18px;      /* عناوين الأقسام */
  --ssb-fs-h2:20px;      /* عناوين النوافذ والشاشات */
  --ssb-fs-h1:24px;      /* العنوان الرئيسي */
  --ssb-fs-kpi:26px;     /* الأرقام في البطاقات */
  --ssb-icon:18px;       /* أيقونات القوائم والأزرار */
  --ssb-brand:40px;      /* شعار الشريط الجانبي والرأس */
  --ssb-brand-lg:56px;   /* شعار شاشة الدخول */
}
html body,html body button,html body input,html body select,html body textarea{font-family:var(--ssb-font)!important}
html body{font-size:var(--ssb-fs-body)!important;line-height:1.6}

/* الأزرار والحقول */
html body #appView button, html body .modal button, html body #loginView button, html body #appView input, html body .modal input, html body #loginView input, html body #appView select, html body .modal select, html body #loginView select, html body #appView textarea, html body .modal textarea, html body #loginView textarea{font-size:var(--ssb-fs-body)!important}
@media (max-width:720px){
  html body #appView input:not([type=checkbox]):not([type=radio]):not([type=file]), html body .modal input:not([type=checkbox]):not([type=radio]):not([type=file]), html body #loginView input:not([type=checkbox]):not([type=radio]):not([type=file]), html body #appView select, html body .modal select, html body #loginView select, html body #appView textarea, html body .modal textarea, html body #loginView textarea{font-size:16px!important}
}

/* الجداول */
html body #appView th, html body .modal th, html body #loginView th, html body #appView td, html body .modal td, html body #loginView td{font-size:var(--ssb-fs-table)!important}
html body #appView th, html body .modal th, html body #loginView th{font-size:var(--ssb-fs-meta)!important}

/* التسميات والنصوص الثانوية */
html body #appView label, html body .modal label, html body #loginView label, html body #appView .login-label, html body .modal .login-label, html body #loginView .login-label{font-size:var(--ssb-fs-meta)!important}
html body #appView small, html body .modal small, html body #loginView small, html body #appView .muted, html body .modal .muted, html body #loginView .muted, html body #appView .hint, html body .modal .hint, html body #loginView .hint, html body #appView .note, html body .modal .note, html body #loginView .note, html body #appView .srh-sub, html body .modal .srh-sub, html body #loginView .srh-sub, html body #appView .srh-noph, html body .modal .srh-noph, html body #loginView .srh-noph, html body #appView .srh-ph, html body .modal .srh-ph, html body #loginView .srh-ph, html body #appView .set-res-n, html body .modal .set-res-n, html body #loginView .set-res-n, html body #appView .ssb-res-meta, html body .modal .ssb-res-meta, html body #loginView .ssb-res-meta, html body #appView .al-sub, html body .modal .al-sub, html body #loginView .al-sub, html body #appView .sb-state, html body .modal .sb-state, html body #loginView .sb-state, html body #appView .report-expense-date-value, html body .modal .report-expense-date-value, html body #loginView .report-expense-date-value{font-size:var(--ssb-fs-meta)!important}
html body #appView .ssb-chart-kicker, html body .modal .ssb-chart-kicker, html body #loginView .ssb-chart-kicker, html body #appView .bs-kicker, html body .modal .bs-kicker, html body #loginView .bs-kicker, html body #appView .bs-action, html body .modal .bs-action, html body #loginView .bs-action, html body #appView .plan-badge, html body .modal .plan-badge, html body #loginView .plan-badge, html body #appView .build-tag, html body .modal .build-tag, html body #loginView .build-tag, html body #appView .side-label, html body .modal .side-label, html body #loginView .side-label, html body #appView .login-version, html body .modal .login-version, html body #loginView .login-version{font-size:var(--ssb-fs-micro)!important}

/* القوائم والأزرار الجانبية */
@media (min-width:721px){
  html body #appView .side .nav-item, html body .modal .side .nav-item, html body #loginView .side .nav-item, html body #appView .side .side-btn, html body .modal .side .side-btn, html body #loginView .side .side-btn, html body #appView .view-tabs .nav-item, html body .modal .view-tabs .nav-item, html body #loginView .view-tabs .nav-item{font-size:var(--ssb-fs-body)!important}
}
@media (max-width:720px){
  html body #appView .bottom-nav .nav-item, html body .modal .bottom-nav .nav-item, html body #loginView .bottom-nav .nav-item{font-size:var(--ssb-fs-micro)!important}
}

/* العناوين */
html body #appView h1, html body .modal h1, html body #loginView h1{font-size:var(--ssb-fs-h1)!important}
html body #appView h2, html body .modal h2, html body #loginView h2{font-size:var(--ssb-fs-h2)!important}
html body #appView h3, html body .modal h3, html body #loginView h3{font-size:var(--ssb-fs-h3)!important}

/* أرقام البطاقات */
html body #appView .card b, html body .modal .card b, html body #loginView .card b, html body #appView .card .value, html body .modal .card .value, html body #loginView .card .value, html body #appView .kpi b, html body .modal .kpi b, html body #loginView .kpi b, html body #appView .sum-cell b, html body .modal .sum-cell b, html body #loginView .sum-cell b{font-size:var(--ssb-fs-kpi)!important}

/* الأيقونات والشعارات بمقاس واحد */
html body #appView .side-btn svg, html body .modal .side-btn svg, html body #loginView .side-btn svg, html body #appView .nav-item svg, html body .modal .nav-item svg, html body #loginView .nav-item svg, html body #appView .side-btn img, html body .modal .side-btn img, html body #loginView .side-btn img, html body #appView .nav-item img, html body .modal .nav-item img, html body #loginView .nav-item img{width:var(--ssb-icon);height:var(--ssb-icon)}
html body #appView .brand-mark, html body .modal .brand-mark, html body #loginView .brand-mark{width:var(--ssb-brand);height:var(--ssb-brand)}
html body #appView .brand-mark-lg, html body .modal .brand-mark-lg, html body #loginView .brand-mark-lg{width:var(--ssb-brand-lg);height:var(--ssb-brand-lg)}

/* شاشة تسجيل الدخول */
html body #appView .subscription-btn, html body .modal .subscription-btn, html body #loginView .subscription-btn{background:linear-gradient(180deg,#8a6420,#6f4f14)!important;color:#fff!important;border-color:#6f4f14!important}
html body #appView .login-card input::placeholder, html body .modal .login-card input::placeholder, html body #loginView .login-card input::placeholder{color:#8a948f}
html body #appView .login-lead, html body .modal .login-lead, html body #loginView .login-lead{font-size:var(--ssb-fs-body)!important}
html body #appView .register-hint, html body .modal .register-hint, html body #loginView .register-hint{font-size:var(--ssb-fs-meta);margin:4px 0 8px}
@media (max-width:720px){
  html body #appView .login-brand, html body .modal .login-brand, html body #loginView .login-brand{position:relative}
}
@media (max-width:720px){
  html body #appView .login-brand::before, html body .modal .login-brand::before, html body #loginView .login-brand::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,rgba(9,36,33,0),rgba(9,36,33,.94));pointer-events:none}
}
@media (max-width:720px){
  html body #appView .login-brand h2, html body .modal .login-brand h2, html body #loginView .login-brand h2, html body #appView .login-brand p, html body .modal .login-brand p, html body #loginView .login-brand p{position:relative;z-index:1}
}

/* الأزرار في الجوال: النص يلتف بدل أن يُقصّ */
@media (max-width:720px){
  html body #appView button, html body .modal button, html body #loginView button{white-space:normal!important;line-height:1.35!important;padding-inline:8px!important;min-width:0!important;max-width:100%!important;overflow-wrap:anywhere}
}

/* تركيز لوحة المفاتيح */
:focus-visible{outline:2px solid #155049;outline-offset:2px}

/* ===== النوافذ على الجوال: لا تخرج أعلى الشاشة ولا أسفلها، ويتحرك محتواها داخليًا ===== */
@media (max-width:720px){
  html body .modal .modal-box{max-height:calc(100dvh - 16px)!important;max-height:calc(100vh - 16px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
}
@media (max-width:720px){
  html body .modal .modal-box>h2:first-child{position:sticky!important;top:0;z-index:3;margin-top:0!important}
}