/* القرآن مباشر — الأساس المشترك للمنصات (الهوية 2.0). يُنسخ كما هو بعد brand.css في كل منصة، ولا يُعدَّل فيها.
   يطبّق audit/CONSISTENCY.md: الكوفي للعناوين والأزرار والأرقام، وسلّم المقاسات، والحقول، وحلقة التركيز، وقفل الدخول.
   كل القيم من brand.css؛ والفرق الوحيد بين المنصات --accent (الحالات: data-platform="cases"). */

/* ملاحظة الخصوصية: قواعد العناصر داخل :where() فخصوصيتها صفر، وتغلبها أصناف المنصة دائمًا. والأصناف هنا صنف واحد (0,1,0). */

/* ── الخطوط ── */
body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-text); color: var(--text); background: var(--surface-2); }
:where(h1, h2, h3, button, [role="tab"]), .qm-display, .btn, .qm-num { font-family: var(--font-display); }
/* لون العناوين يُورث (لا --text) حتى يبقى أبيض داخل الرأس الداكن؛ والجسم --text فيرثه ما سواه */
:where(h1, h2, h3) { font-weight: var(--w-semibold); line-height: var(--lh-display); color: inherit; margin: 0; }
:where(h1) { font-size: var(--fs-d3); }
:where(h2) { font-size: var(--fs-h4); }
:where(h3) { font-size: var(--fs-lead); }
.qm-num { font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }

/* ── الحقول ── */
:where(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
  font-family: var(--font); font-size: var(--fs-body); min-height: 48px; box-sizing: border-box;
  border: 1px solid var(--n-350); border-radius: var(--r-ctl); background: #ffffff; color: var(--text); padding: 0 var(--space-3);
}
:where(textarea) { padding: var(--space-3); }
:where(input[type="tel"], input[inputmode="numeric"]) { direction: ltr; text-align: start; }
/* على اللمس 16 لا 15: iOS يكبّر الصفحة عند التركيز على حقل دون 16 */
@media (pointer: coarse) { :where(input, select, textarea) { font-size: 16px; } }
::placeholder { color: var(--text-3); opacity: 1; }

/* ── حلقة التركيز: واحدة في كل المنصات ── */
:where(:focus-visible, input:focus, select:focus, textarea:focus) { outline: 2px solid var(--n-990); outline-offset: 2px; }
.qm-on-dark :where(:focus-visible) { outline-color: var(--celery); }

/* ── الأزرار ── */
.btn, .qm-btn {
  font-size: var(--fs-body); font-weight: var(--w-semibold); min-height: 48px; padding: 0 var(--space-6);
  border-radius: var(--r-ctl); border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  transition: background-color var(--dur-state) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn:active, .qm-btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"], .qm-btn:disabled { background: var(--n-250); color: var(--text-3); cursor: not-allowed; }
.btn-2, .qm-btn-2 { background: #ffffff; color: var(--text); border: 1px solid var(--n-350); }
.btn-danger, .qm-btn-danger { background: var(--s-error); color: #ffffff; }
/* الصغير داخل الجداول والبطاقات: 32، و40 على اللمس */
.btn-sm, .qm-btn-sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--fs-small); }
@media (pointer: coarse) { .btn-sm, .qm-btn-sm { min-height: 40px; } }

/* ── البطاقة ── */
.qm-card { background: #ffffff; border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--space-4); }
@media (min-width: 768px) { .qm-card { padding: var(--space-6); } }

/* ── قفل الدخول: الصفحة والبطاقة والشعار والعنوان ── */
.qm-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); background: var(--surface-2); box-sizing: border-box; }
.qm-login__card { width: 100%; max-width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); }
.qm-login__logo { display: block; width: 144px; height: auto; margin: 0 auto var(--space-2); }
.qm-login__title { font-size: var(--fs-h4); text-align: center; color: var(--text); }
.qm-login__sub { font-size: var(--fs-small); color: var(--text-2); text-align: center; margin: calc(-1 * var(--space-3)) 0 0; }
.qm-login__card .btn, .qm-login__card .qm-btn { width: 100%; }

/* ── الجدول ── */
.qm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.qm-table th { background: var(--surface-2); color: var(--text-2); font-size: var(--fs-small); font-weight: var(--w-semibold); text-align: start; padding: var(--space-2) var(--space-3); }
.qm-table td { border-top: 1px solid var(--n-250); padding: var(--space-3); }
.qm-table td.num { font-variant-numeric: tabular-nums; text-align: end; }

/* ── الحالة الفارغة ── */
.qm-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-4); color: var(--text-2); font-size: var(--fs-body); text-align: center; }
.qm-empty::before { content: ""; width: 16px; height: 16px; background: var(--g-500); transform: rotate(45deg); }

/* ── الحركة ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }