/* ═════════════════════════════════════════════════════════════════
   حضوري — طبقة الاستجابة الشاملة v25
   الجوالات · الآيباد · التابلت · الوضع الأفقي · المناطق الآمنة
   ─────────────────────────────────────────────────────────────────
   تُحمَّل آخراً (بعد styles.css و ios.css) فتغلب كل القواعد السابقة
   دون تعديل البنية — نقاط الكسر:
     ≤1366 آيباد برو أفقي   ≤1100 تابلت أفقي
     ≤1024 تابلت عمودي      ≤900    سلوك الجوال (شريط سفلي + قائمة جانبية)
     ≤768  تابلت صغير       ≤640    جوال
     ≤420  جوال صغير        ≤360    جوال ضيق
     + الوضع الأفقي القصير + مؤشرات اللمس + المناطق الآمنة
   ═════════════════════════════════════════════════════════════════ */

/* ═══ 1) أساسيات عامة — كل المقاسات ═══ */

/* منع تكبير النص التلقائي عند تدوير الجوال (iOS Safari) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ارتفاع حيوي متوافق مع أشرطة أدوات المتصفح المتحركة */
body, .app-view, .auth-view, .dbdown-view {
  min-height: 100vh;
  min-height: 100dvh;
}
/* الشريط الجانبي الثابت على الشاشات الكبيرة — يراعي متصفح الجوال */
@media (min-width: 901px) {
  .sidebar { height: 100vh; height: 100dvh; }
}

/* تمرير ناعم بالزخم على كل الحاويات القابلة للتمرير (أنظمة الجوال) */
.table-wrap, .side-nav, .notif-list, .modal-body, .page-host {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* الشريط العلوي يراعي النوتش/الإسفين على كل الأجهزة (حتى الآيباد PWA) */
.topbar { padding-top: max(.55rem, env(safe-area-inset-top)); }
.auth-top { padding-top: max(1.1rem, env(safe-area-inset-top)); }
/* أزرار الطي السريع أعلى صفحة التحقق diag.html إن وُجدت */
body { padding-left: 0; padding-right: 0; }

/* على الأجهزة اللمسية: حقول ≥16px تمنع قفزة تكبير iOS عند التركيز */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .chip-check { padding: .5em .95em; }        /* رقائق الورديات أسهل للمس */
  .dc-x { min-width: 30px; min-height: 30px; } /* زر حذف الجهاز داخل الشارة */
}

/* همبرغر عرض الموظف بلا وظيفة (يستهدف قائمة الإدارة المخفية) — يُخفى دائماً */
#view-emp .menu-btn, #view-emp .menu-btn:active { display: none !important; }

/* شاشات اللمس بلا hover: إلغاء الارتفاعات العالقة والتحوّلات المعلقة */
@media (hover: none) {
  .card:hover, .btn:hover, .tab:hover, .side-link:hover,
  .cal-cell:hover, .disc-row:hover, .demo-chip:hover {
    transform: none; box-shadow: var(--shadow);
  }
  .btn:hover { filter: none; }
  .btn:active { filter: brightness(.94); }
}

/* أرقام الجداول والإحصاءات تظل أوضح ما يمكن على الشاشات الكثيفة */
.stat b, .tbl .num, .big-clock, .live-timer { text-rendering: optimizeLegibility; }

/* حماية عامة من تضخم مسار الشبكة: عناصر الشبكات قابلة للانكماش
   (min-width:auto الافتراضي يسمح لمحتوى nowrap بدفع المسار خارج الشاشة) */
.page > *, .emp-hero > *, .live-grid > *, .profile-grid > *,
.grid-cards > *, .upload-grid > *, .checkin-card, .radar-card {
  min-width: 0;
}

/* ═══ 2) ≤1366px — آيباد برو أفقي وحواف واسعة ═══ */
@media (max-width: 1366px) {
  .page-host { padding: 1.25rem; }
}

/* ═══ 3) ≤1100px — تابلت أفقي صغير ═══ */
@media (max-width: 1100px) {
  .page-host { padding: 1.15rem; }
  .live-grid { gap: 1rem; }
  .emp-hero { gap: 1rem; }
}

/* ═══ 4) ≤1024px — تابلت عمودي (iPad 768/810/820) ═══ */
@media (max-width: 1024px) {
  /* الشبكات المزدوجة تتحول لعمود واحد (موروث) + تحسينات إضافية */
  .live-grid, .profile-grid, .emp-hero { grid-template-columns: 1fr; }

  /* حقول التصفية تمتد بحرية بدل سقف 240px */
  .filters .field { max-width: none; }

  /* النوافذ أوسع قليلاً على التابلت */
  .modal { width: min(96vw, 560px); }

  /* التقويم أخف ارتفاعاً ليظهر شهر كامل دون تمرير كثير */
  .cal-cell { min-height: 66px; }

  /* عنوان الصفحة قابل للتقليص عند ضيق المساحة */
  .page-title { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══ 5) ≤900px — سلوك الجوال الأساسي (تعزيز الموروث) ═══ */
@media (max-width: 900px) {
  /* أهداف لمس مريحة في التبويبات والقائمة الجانبية */
  .tab { min-height: 46px; }
  .side-link { padding: .72em .8em; }
  .side-foot { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }

  /* محتوى الصفحة يبتعد عن شريط التبويبات السفلي + المناطق الآمنة */
  .page-host { padding: 1rem .9rem calc(5.6rem + env(safe-area-inset-bottom)); }

  /* الشريط السفلي يراعي الإسفين (موروث) ويضاعف المتانة */
  .tabbar { padding-bottom: calc(.35rem + env(safe-area-inset-bottom)); }

  /* تنسيق الفلاتر: صفّان متوازنان بدل سقف العرض */
  .filters .field { max-width: none; }

  /* تصحيح فراغ شبكة الحقول المزدوجة (كانت صفراً) */
  .grid2 { gap: .65rem; }

  /* بطاقة الحضور المركزية */
  .big-clock { font-size: 2.3rem; }
  .btn-check { width: 158px; height: 158px; }

  /* النوافذ المنبثقة */
  .modal { max-height: 90dvh; }

  /* لاصق أعلى موثوق داخل main-col */
  .main-col .topbar { position: sticky; top: 0; }
}

/* ═══ 6) ≤768px — تابلت صغير / جوال كبير ═══ */
@media (max-width: 768px) {
  .page-head h3 { font-size: 1.08rem; }
  .cal-cell { min-height: 60px; }
  .upload-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══ 7) ≤640px — الجوال ═══ */
@media (max-width: 640px) {
  /* ── شاشة الدخول: الهيرو يتحول لترويسة مضغوطة ── */
  .auth-hero { padding: 1.25rem 1.1rem .9rem; }
  .auth-brand { max-width: none; }
  .auth-brand h1 { font-size: 1.45rem; }
  .brand-mark { width: 52px; height: 52px; border-radius: 15px; margin-bottom: .6rem; font-size: 1.6em; }
  .brand-mark .org-logo-img { width: 52px; height: 52px; }
  .auth-brand .brand-sub { margin: .15rem 0 .5rem; font-size: .88rem; }
  .brand-feats { gap: .35rem; }
  .brand-feats li { padding: .3rem .5rem; }
  .auth-panel { min-height: auto; }
  .auth-card { padding: 1.2rem 1rem; border-radius: 20px; }
  .auth-top { padding: .8rem 1rem; }
  .auth-foot { padding: 1rem; font-size: .8em; }

  /* ── النوافذ المنبثقة: ورقة سفلية بنمط الجوال ── */
  .modal-scrim { place-items: end center; padding: 0; }
  .modal {
    width: 100%; max-width: none; max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    animation: sheetUp .3s cubic-bezier(.2, .9, .3, 1.05);
  }
  @keyframes sheetUp { from { opacity: 0; transform: translateY(40px); } }
  .modal-head { border-radius: 0; padding: .9rem 1.05rem; }
  .modal-head h4 { font-size: 1rem; }
  .modal-body { padding: 1rem 1.05rem; }
  .modal-foot {
    flex-direction: column-reverse;   /* الزر الأساسي أعلى */
    padding: 0 1.05rem calc(1.1rem + env(safe-area-inset-bottom));
  }
  .modal-foot .btn { width: 100%; min-height: 48px; }
  /* مقبض السحب البصري أعلى الورقة */
  .modal::before {
    content: ''; position: sticky; top: 6px; z-index: 3;
    display: block; width: 42px; height: 4.5px; border-radius: 99px;
    background: rgba(120, 120, 128, .32); margin: 6px auto -14px;
  }

  /* ── لوحة الإشعارات بعرض الشاشة (تعميم قاعدة 480 السابقة) ── */
  .notif-wrap { position: static; }
  .notif-panel {
    position: absolute; top: calc(100% + 6px);
    inset-inline-end: auto; left: 10px; right: 10px;
    width: auto; max-height: calc(100dvh - 90px);
  }
  .notif-list { max-height: min(340px, calc(100dvh - 180px)); }

  /* ── الجداول: خط أصغر قليلاً وحشوات مضغوطة لتقليل التمرير الأفقي ── */
  .tbl { font-size: .84em; }
  .tbl th, .tbl td { padding: .6em .65em; }
  .row-actions { flex-wrap: wrap; }

  /* ── الفلاتر: كل حقل بصفّه ── */
  .filters { gap: .55rem; }
  .filters .field { min-width: 100%; max-width: none; flex-basis: 100%; }

  /* ── التقويم الشهري المضغوط ── */
  .cal-dow { gap: 4px; margin-bottom: 4px; }
  .cal-dow span { font-size: .68em; padding: .3em 0; border-radius: 8px; }
  .cal-grid { gap: 4px; }
  .cal-cell { min-height: 54px; padding: .28rem .32rem; border-radius: 10px; border-width: 1px; }
  .cal-cell small { font-size: .6em; }
  .cal-dots { gap: .2rem; }
  .cal-dots .cd { min-width: 18px; height: 17px; font-size: .62em; padding: 0 3px; border-radius: 6px; }

  /* ── بطاقة الحضور ── */
  .big-clock { font-size: 2.1rem; }
  .btn-check { width: 148px; height: 148px; font-size: .95rem; }
  .checkin-card { padding: 1.15rem 1rem; }
  /* سطور الحالة والـ GPS تلتف بدل دفع البطاقة خارج الشاشة */
  .state-line, .gps-line, .radar-meta { flex-wrap: wrap; justify-content: center; }
  .week-strip { min-width: 0; }
  .wd { min-width: 0; padding-inline: .05rem; }
  .tl-item { flex-wrap: wrap; }

  /* ── بطاقات وشرائح ── */
  .page-host { padding: .9rem .75rem calc(5.4rem + env(safe-area-inset-bottom)); }
  .card { padding: 1.05rem 1rem; }
  .pts-tile b { font-size: 1.3em; }
  .wd { padding: .45rem .1rem; }
  .wd b { font-size: .84em; }

  /* ── الشريط العلوي ── */
  .topbar { padding-inline: .7rem; gap: .6rem; }
  .page-title { max-width: none; font-size: 1rem; }
  .brand-mini { font-size: 1rem; }
  .avatar { width: 34px; height: 34px; font-size: .95em; }
  .top-actions { gap: .2rem; }

  /* ── الأحجام الصغيرة المتبقية ── */
  .bio-row-actions { flex-direction: row; }
  .toast-root { width: min(420px, calc(100vw - 1.4rem)); }
  .kv small { font-size: .78em; }
  .demo-box { font-size: .84em; }
}

/* ═══ 8) ≤420px — جوال صغير ═══ */
@media (max-width: 420px) {
  .page-host { padding: .8rem .65rem calc(5.2rem + env(safe-area-inset-bottom)); }
  .card { padding: .95rem .9rem; border-radius: 16px; }
  .stat { padding: .8rem .85rem; gap: .7rem; }
  .stat-ico { width: 42px; height: 42px; border-radius: 12px; font-size: 1.2em; }
  .stat b { font-size: 1.28rem; }
  .big-clock { font-size: 1.9rem; }
  .btn-check { width: 136px; height: 136px; font-size: .9rem; }
  .btn-check .ring { inset: -7px; }
  .auth-card { padding: 1.05rem .85rem; }
  .grid-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
  .pts-grid { gap: .5rem; }
  .pts-tile { padding: .7rem .3rem; border-radius: 12px; }
  .upload-grid { grid-template-columns: 1fr; }
  .modal-head { padding: .8rem .9rem; }
  .modal-body { padding: .9rem .9rem; }
  .modal-foot { padding-inline: .9rem; }
  .table-wrap { border-radius: 12px; }
  .empty { padding: 1.6rem .8rem; }
}

/* ═══ 9) ≤360px — جوال ضيق ═══ */
@media (max-width: 360px) {
  .btn-check { width: 124px; height: 124px; font-size: .85rem; }
  .tab { font-size: .6em; padding: .4em .45em; }
  .brand-mini { font-size: .92rem; }
  .tbl { font-size: .8em; }
  .auth-brand h1 { font-size: 1.3rem; }
}

/* ═══ 10) الوضع الأفقي القصير — جوال مُدوَّر (ارتفاع ≤500) ═══ */
@media (max-height: 500px) and (orientation: landscape) {
  /* الهيرو يختفي لتوفير ارتفاع الشاشة للنموذج */
  .auth-hero { display: none; }
  .auth-view { grid-template-columns: 1fr; }
  .auth-card { margin: .8rem auto; padding: .9rem .9rem; }
  .auth-top { padding: .5rem 1rem; }

  .topbar { min-height: 46px; padding-top: max(.3rem, env(safe-area-inset-top)); padding-bottom: .3rem; }
  .topbar::after { height: 1.5px; }

  /* شريط التبويبات يعود شريطاً علوياً مكثفاً في الأفقي — أفضل من سفلي ضخم */
  .tabbar {
    position: sticky; bottom: auto; top: 46px; inset-inline: 0; z-index: 45;
    border-top: none; border-bottom: 1px solid var(--line);
    padding: .25rem .5rem;
  }
  .tab { flex-direction: row; gap: .35em; font-size: .78em; min-height: 40px; }
  .tab .ic { width: 1.2em; height: 1.2em; }
  .page-host { padding: .6rem .8rem calc(4.2rem + env(safe-area-inset-bottom)); }

  .big-clock { font-size: 1.5rem; }
  .btn-check { width: 112px; height: 112px; font-size: .8rem; }
  .btn-check .ring { inset: -6px; }
  .checkin-card { padding: .7rem; gap: .45rem; }
  .emp-hero { gap: .6rem; }

  .modal { max-height: 94dvh; }
  .modal-head { padding: .6rem .9rem; }
  .modal-body { padding: .7rem .9rem; }
  .card { padding: .8rem .9rem; }
  .cal-cell { min-height: 44px; }
  .toast-root { bottom: calc(.8rem + env(safe-area-inset-bottom)); }
}

/* ═══ 11) الآيباد المكتبية — تحسين طفيف للحواف الواسعة ═══ */
@media (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  /* تابلت أفقي بحجم لابتوب: أهداف لمس أعلى قليلاً في القائمة الجانبية */
  .side-link { padding: .66em .8em; }
  .btn { min-height: 44px; }
}

/* ═══ 12) حمايات الطباعة والوصول تبقى كما هي ═══ */
@media print {
  .modal::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
}