/* ═══════════════════════════════════════════════════════════════════════
   android.css — طبقة Android / Material 3 (v45)
   ─────────────────────────────────────────────────────────────────────
   تُحمَّل للجميع لكن كل قواعدها محصورة تحت html.platform-android —
   صفر تأثير على iOS وسطح المكتب. المرجع: Material Design 3 (M3).

   ما تغطيه:
   • الخط: Roboto لسلاسل اللاتينية/الأرقام (خط النظام في Android) —
     العربية تبقى Cairo/Tajawal المحلية (خطوط الماركة لا تُمس).
   • التموّج: span.md-ripple يُنشئه platform.android.js.
   • الارتفاع (Elevation): ظلال M3 التصاعدية للبطاقات/النوافذ/الشريط.
   • طبقات الحالة (State layers): تظليل خفيف hover/active للأزرار.
   • النوافذ: زوايا 28px كاملة (M3 dialog) وترويسة بمحاذاة البداية.
   • شريط النظام: لون السطح يتبع الثيم عبر platform.js theme-color.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الخط: Roboto أولاً للاتينية (النظام على Android) ثم خطوط الماركة ── */
html.platform-android body {
  font-family: Roboto, 'Cairo', 'Tajawal', -apple-system, 'Segoe UI', sans-serif;
}
html.platform-android input,
html.platform-android select,
html.platform-android textarea,
html.platform-android button {
  font-family: inherit;
}

/* ── التموّج (Ripple): الحامل يقطع الفائض والنقطة تتمدد وتتلاشى ── */
html.platform-android .md-ripple-holder {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
html.platform-android .md-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .14;
  transform: scale(0);
  animation: mdRippleGrow .58s cubic-bezier(.2, 0, 0, 1) forwards;
}
@keyframes mdRippleGrow {
  0%   { transform: scale(0);   opacity: .18; }
  60%  { transform: scale(1);   opacity: .12; }
  100% { transform: scale(1);   opacity: 0; }
}
/* محتوى الزر فوق التموّج */
html.platform-android .btn > *,
html.platform-android button > * { position: relative; z-index: 1; }

/* ── الارتفاع: سلّم M3 (1/2/3) ── */
html.platform-android .card,
html.platform-android .table-wrap {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 3px 1px rgba(0, 0, 0, .06);
}
html.platform-android .modal {
  box-shadow: 0 8px 12px 6px rgba(0, 0, 0, .10), 0 4px 4px rgba(0, 0, 0, .15);
  border-radius: 28px; /* M3 dialog */
}
html.platform-android .topbar,
html.platform-android .emp-tabs {
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .08);
}

/* ── طبقات الحالة: تظليل خفيف عند اللمس/التعليق ── */
html.platform-android .btn { position: relative; overflow: hidden; }
html.platform-android .btn:hover   { filter: brightness(.97); }
html.platform-android .btn:active  { filter: brightness(.93); }
html.platform-android .side-link:active,
html.platform-android .tab:active  { background: rgba(0, 0, 0, .06); }

/* ── النوافذ: ترويسة بمحاذاة البداية (RTL = يمين — عكس iOS الموسّطة) ── */
html.platform-android .modal-head { justify-content: flex-start; }
html.platform-android .modal-head h4 { text-align: start; flex: 1; }

/* ── الشرائح (Segments) بنمط M3 ── */
html.platform-android .seg { border-radius: 999px; }

/* ── شاشات Android الطويلة النسب + قصّات الكاميرا (cutout) ── */
html.platform-android .topbar {
  padding-top: max(var(--hd-pad-top, 0px), env(safe-area-inset-top, 0px));
}
html.platform-android .emp-tabs {
  padding-bottom: max(var(--hd-pad-bottom, 0px), env(safe-area-inset-bottom, 0px));
}