/* War Monitor — Mobile Comfort Mode
   الهدف: تخفيف الخلفية السوداء القاسية على الموبايل وتحسين قابلية القراءة.
   ملاحظة: Overrides تستخدم !important لتتغلب على inline/backgrounds في بعض الصفحات.
*/

@media (max-width: 1200px) {
  /* Enabled only when JS adds html.view-calm */
  html.view-calm, html.view-calm body {
    background: #0d1520 !important; /* navy-soft */
    color: #e8eaed !important;
  }

  /* Reader mode (light / sepia) */
  html.view-reader, html.view-reader body {
    background: #fbf7ee !important;
    color: #1f2937 !important;
  }
  html.view-reader a { color: #8a6a1a !important; }

  /* Common fixed bars / bottoms */
  html.view-calm .mobile-bottom-tabs,
  html.view-calm #mobile-bottom-tabs,
  html.view-calm #bottom-tabs,
  html.view-calm .bottom-tabs {
    background: #0b1220 !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  html.view-reader .mobile-bottom-tabs,
  html.view-reader #mobile-bottom-tabs,
  html.view-reader #bottom-tabs,
  html.view-reader .bottom-tabs {
    background: rgba(251,247,238,0.94) !important;
    border-top: 1px solid rgba(0,0,0,0.10) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* Reduce extreme contrast in dark boxes */
  html.view-calm .card,
  html.view-calm .panel,
  html.view-calm .section,
  html.view-calm .box {
    background-color: rgba(255,255,255,0.03) !important;
  }

  html.view-reader .card,
  html.view-reader .panel,
  html.view-reader .section,
  html.view-reader .box {
    background-color: rgba(255,255,255,0.78) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: inherit !important;
  }

  /* Improve reading rhythm */
  html.view-calm p,
  html.view-calm li,
  html.view-reader p,
  html.view-reader li {
    line-height: 1.85 !important;
  }

  /* Accessibility: large text mode (elder-friendly) */
  html.font-large body {
    font-size: 18px !important;
  }
  html.font-large p,
  html.font-large li {
    font-size: 1.08em !important;
    line-height: 1.95 !important;
  }
  html.font-large button,
  html.font-large input,
  html.font-large select {
    font-size: 1.02em !important;
  }
}