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

/* ═══ 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; }
}

/* ═════════════════════════════════════════════════════════════════
   ═══ 13) التوافق عبر أنظمة التشغيل — v26 ═══
   Android (Chrome/WebView/Samsung) · iOS (Safari/WebView) · Firefox
   الهدف: نفس المظهر وسلوك اللمس على كافة الأنظمة بلا اختلافات أصلية
   ═════════════════════════════════════════════════════════════════ */

/* ── 13-1) توحيد القوائم المنسدلة: كانت ترسم Material على Android
      وأسلوب iOS المطاط على iPhone — الآن رسم موحد في كل الأنظمة.
      الخصوصية .field select مطلوبة لأن styles.css يرسم خلفية الحقل
      بـ background: (شامل) فتُبطل صورة السهم لو بقينا على select فقط ── */
select, .field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23677' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 13px auto;
  background-position: left .8em center;        /* RTL: السهم في الطرف الأيسر */
  padding-inline-end: 2.1em;                    /* مساحة السهم دون غطاء النص */
}
[dir="ltr"] select, [dir="ltr"] .field select { background-position: right .8em center; }
select::-ms-expand { display: none; }
[data-theme="dark"] select, [data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23aab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* خيارات القائمة المنسدلة تتبع السمة بدل لون النظام الخام (كروم سطح المكتب/أندرويد) */
select option { background: var(--card); color: var(--ink); font-family: inherit; }

/* ── 13-2) كل الحقول ترث خط الهوية (Cairo/Tajawal) على كل الأنظمة ── */
input, select, textarea, button { font-family: inherit; }

/* ── 13-3) مؤشرات الاختيار (checkbox/radio) بلون الهوية في كل الأنظمة
      (iOS ≥15.4 وAndroid كروم يدعمان accent-color — والتاج الموجود يبقى) ── */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

/* ── 13-4) إخفاء أسهم حقول الأرقام: تختلف شكلها وحجمها بين الأنظمة ── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── 13-5) حقول التاريخ/الوقت بنفس الارتفاع الأدنى عبر الأنظمة
      (iOS يرسمها أقصر بملمس مختلف — نوحّد الارتفاع والمحاذاة) ── */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  min-height: 44px;
  -webkit-align-items: center; align-items: center;
}

/* ── 13-6) أشرطة التمرير بنفس النمط في Firefox (Android/سطح المكتب) ──
      خصائص قياسية تُكمل ::-webkit-scrollbar الخاص بـ WebKit */
.table-wrap, .side-nav, .notif-list, .modal-body, .page-host {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 128, .38) transparent;
}
[data-theme="dark"] .table-wrap, [data-theme="dark"] .side-nav,
[data-theme="dark"] .notif-list, [data-theme="dark"] .modal-body {
  scrollbar-color: rgba(120, 120, 128, .5) transparent;
}

/* ── 13-7) إيقاف السحب-للتحديث العارض والتمرير المطاطي على مستوى الصفحة
      (سلوك تطبيق أصيل: Android Pull-to-Refresh كان يعيد تحميل الحضور) ── */
html { overscroll-behavior-y: none; overscroll-behavior-x: none; }

/* ── 13-8) تحديد النص: لون موحد للإبراز في كل الأنظمة ── */
::selection { background: rgba(0, 122, 255, .25); color: inherit; }
[data-theme="dark"] ::selection { background: rgba(0, 122, 255, .45); }

/* ── 13-9) منع قوائم الضغط المطوّل (iOS long-press callout) على العناصر
      التفاعلية — نفس سلوك التطبيقات الأصلية ── */
.btn, .tab, .side-link, .icon-btn, .chip-check, .wd, .cal-cell {
  -webkit-touch-callout: none;
}

/* ── 13-10) تغذية لمسية موحدة :active على Android (كانت iOS وحدها تعرضها
      بثبات) — إحساس ضغط متساوٍ على كل الأنظمة ── */
@media (hover: none) and (pointer: coarse) {
  .btn:active, .tab:active, .side-link:active, .icon-btn:active,
  .chip-check:active { transition: none; filter: brightness(.93); }
}

/* ── 13-11) تسطيح زجاج الضبابي حيث لا يدعم backdrop-filter (Firefox
      القديم/WebView قديمة): خلفية صلبة بديلة بدل شفافية مكسورة ── */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .topbar, .tabbar, .modal-head, .notif-panel, .modal-foot {
    background: var(--card);
  }
}

/* ── 13-12) نصف قطر افتراضي متسق لعناصر النماذج داخل الحقول
      (Android كان يرسم select بزوايا أصغر) ── */
.field select { border-radius: 11px; }

/* ═════════════════════════════════════════════════════════════════
   ═══ 14) تحسينات الجوال v27 — تبويبات الموظف الخمسة + قائمة الإدارة المجمعة ═══
   ═════════════════════════════════════════════════════════════════ */

/* ── 14-1) الشريط المقسم الفرعي داخل «سجلاتي» (سجلاتي | الإجازات | الاستئذان)
      يظهر أعلى الصفحة ويلتصق أثناء التمرير — لاصق آمن داخل page-host ── */
.emp-seg {
  position: sticky; top: 8px; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
  margin: 0 0 1rem;
  box-shadow: var(--shadow);
}
.emp-seg .seg {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; padding: .45em .5em;
  border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: .88em; font-weight: 700; cursor: pointer;
  border-radius: 10px; transition: .16s;
  -webkit-touch-callout: none;
}
.emp-seg .seg .ic { width: 1.25em; height: 1.25em; flex: none; }
.emp-seg .seg.active {
  background: var(--brand); color: var(--brand-ink, #fff);
  box-shadow: 0 2px 8px rgba(43, 57, 144, .28);
}
.emp-seg .seg:active { filter: brightness(.94); }
@media (max-width: 360px) {
  .emp-seg .seg { font-size: .8em; padding-inline: .3em; }
  .emp-seg .seg .ic { width: 1.1em; height: 1.1em; }
}
/* الوضع الأفقي القصير: الشريط يلتصق أعلى الشريط العلوي المكثف */
@media (max-height: 500px) and (orientation: landscape) {
  .emp-seg { position: sticky; top: 50px; }
}

/* ── 14-2) عناوين المجموعات في القائمة الجانبية للإدارة (v27) ── */
.side-group {
  padding: .85em .9em .25em;
  font-size: .68em; font-weight: 800; letter-spacing: .04em;
  color: #7d93b2; text-transform: uppercase;
  user-select: none; -webkit-user-select: none;
}
.side-group:not(:first-child) { border-top: 1px solid rgba(148, 163, 220, .1); margin-top: .35em; padding-top: 1em; }

/* زر إغلاق القائمة الجانبية — يظهر على الجوال فقط داخل ترويسة القائمة */
.side-brand { position: relative; }
.side-close { display: none; }

@media (max-width: 900px) {
  /* القائمة الجانبية على الجوال: عرض آمن للشاشات الضيقة — الترويسة ثابتة أصلاً
     (التمرير داخل side-nav فقط) والزر يغلق الدرج بلمسة واحدة */
  .sidebar { width: min(286px, 88vw); }
  .side-brand { padding-top: max(1.05rem, env(safe-area-inset-top)); }
  .side-close {
    display: inline-flex; position: absolute; inset-inline-end: .55rem; top: 50%;
    transform: translateY(-50%);
    color: #cdd7f5;
  }
  .side-close .ic { width: 1.35em; height: 1.35em; }
  .side-nav { padding-top: .35rem; }
}

/* ── 14-3) رؤوس الجداول مثبتة أثناء التمرير العمودي — يبقى عنوان العمود
      مرئياً في الجداول الطويلة (سجل الحضور، الرواتب) على كل المقاسات ── */
.table-wrap { overflow-y: hidden; }
.table-wrap .tbl th { position: sticky; top: 0; z-index: 2; }
[data-theme="dark"] .table-wrap .tbl th { background: #182040; }
/* الجداول داخل حاويات تمرير عمودي صريحة (رواتب) */
.table-wrap[style*="overflow-y"] .tbl th { position: sticky; }

/* ── 14-4) ضغط الشريط العلوي على الجوال الضيق — كل الأزرار تبقى ضمن الصف ── */
@media (max-width: 420px) {
  .top-actions .icon-btn { min-width: 38px; min-height: 38px; }
  .top-actions { gap: .1rem; }
  .topbar { gap: .45rem; }
  .avatar { width: 32px; height: 32px; font-size: .9em; }
}
@media (max-width: 360px) {
  .top-actions .icon-btn { min-width: 36px; min-height: 36px; }
  .page-title { font-size: .94rem; }
}

/* ═══════════ 15) متانة شريط التبويبات عبر أنظمة الجوال الحقيقية (v28) ═══════════
   يعالج ثلاثة خلل جوهرية لا تُظهرها المتصفحات المكتبية:
   (أ) خلل iOS/أندرويد المعروف: العنصر position:fixed المزوَّد بـbackdrop-filter
       تفسد طبقة رسمه عند إعادة الرسم بعد تحديث الـDOM (النقر على تبويب يعيد
       رسم الصفحة كاملة) فتختفي محتويات الشريط — العلاج: خلفية صلبة بلا ضباب
       + ترقية الطبقة بـtranslateZ(0)
   (ب) iOS يكبّر الصفحة تلقائياً عند تركيز أي حقل خطه أقل من 16px — التكبير
       يزيح الشريط الثابت عن مكانه فتبدو الأسماء مختفية (وخاصة بعد إغلاق
       لوحة المفاتيح) — العلاج: 16px لكل حقول الإدخال على الجوال
   (ج) انضغاط أسماء التبويبات عند أضيق الشاشات — منعه بمنع التقليص */
@media (max-width: 900px) {
  .tabbar {
    background: #f7f7fa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  [data-theme="dark"] .tabbar { background: #161618; }
  .tab { flex: 0 0 auto; min-width: 52px; }
  .emp-seg { -webkit-transform: translateZ(0); transform: translateZ(0); }
  /* الشريط العلوي والدرج الجانبي: نفس المعالجة — بلا طبقات ضباب قابلة للفساد */
  .topbar {
    background: #f7f7fa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  [data-theme="dark"] .topbar { background: #131318; }
  .sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-theme="dark"] .sidebar { background: #1c1c1e; }
  /* منع تكبير iOS التلقائي: كل حقول الإدخال 16px على الجوال */
  input, select, textarea { font-size: 16px !important; }
  .field input, .field select, .field textarea { min-height: 44px; }
}
/* الوضع الأفقي القصير: الشريط يعلو sticky — نفس متانة الخلفية */
@media (max-height: 500px) and (orientation: landscape) {
  .tabbar {
    background: #f7f7fa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  [data-theme="dark"] .tabbar { background: #161618; }
}

/* ═══════════════ 16) سامسونج وأندرويد — جميع الفئات (v30) ═══════════════
   التغطية: Galaxy Fold (غطاء 280–344) · A-series 360 · S-series 384–390 ·
   Ultra/Note 412–480 · تابلت 800 · الوضع الأفقي مع شريط الإيماءات.
   يشمل: حماية الواجهة الفاتحة من التعتيم القسري لـSamsung Internet،
   ومتانة العناصر أمام تكبير خط One UI، وحواف أمان شاشات سامسونج. */

/* حماية السمة: تصريح صريح يمنع متصفح سامسونج من فرض الوضع الليلي على
   الواجهة الفاتحة ويجعل عناصر النظام (القوائم/الحقول/التواريخ) تتبع سمة التطبيق */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* فئة 480px — Ultra/Note/Pixel Pro: أهداف لمس أوسع وتغليف رؤوس الصفحات */
@media (max-width: 480px) {
  .page-head { flex-wrap: wrap; row-gap: .45rem; }
  .page-head h4 { font-size: 1.02rem; }
  .page-head .btn.sm { min-height: 40px; }
  .tbl th, .tbl td { padding: .62em .7em; }
  .modal-card { max-width: min(94vw, 560px); }
  /* متانة تكبير خط One UI (110–150%): النص يتمدد والحاويات تتبعه */
  .chip { line-height: 1.45; }
  .btn { line-height: 1.35; }
}

/* غطاء Galaxy Fold (280–344px): كثافة أعلى بلا كسر التخطيط */
@media (max-width: 344px) {
  .page-host { padding-inline: .55rem; }
  .card { border-radius: 14px; }
  .topbar { min-height: 42px; }
  .topbar h1, .topbar .tb-title { font-size: .95rem; }
  .tabbar .tab { min-width: 0; padding-inline: 2px; }
  .tabbar .tab span { font-size: .56rem; letter-spacing: 0; }
  .chip { font-size: .68rem; padding: .2em .55em; }
  .page-head { gap: .35rem; }
  .page-head .btn.sm { padding-inline: .55em; }
  .modal-card { width: 97vw; }
  .pr-info { grid-template-columns: 1fr 1fr; }
}

/* الوضع الأفقي على سامسونج: شريط إيماءات جانبي — حواف أمان أفقية */
@media (orientation: landscape) and (max-height: 540px) {
  .page-host {
    padding-left: max(.8rem, env(safe-area-inset-left));
    padding-right: max(.8rem, env(safe-area-inset-right));
  }
  .tabbar {
    padding-left: max(.5rem, env(safe-area-inset-left));
    padding-right: max(.5rem, env(safe-area-inset-right));
  }
  .sidebar { padding-left: env(safe-area-inset-left); }
  .topbar { padding-left: max(.8rem, env(safe-area-inset-left)); padding-right: max(.8rem, env(safe-area-inset-right)); }
}

/* شاشات سامسونج الكبيرة المتصفح بها بشريط سفلي قابل للإخفاء:
   dvh محسوبة مسبقاً — نضمن فقط أن الشرائط اللاصقة لا تطفو فوق المحتوى */
@media (max-width: 900px) {
  .tabbar { min-height: calc(56px + env(safe-area-inset-bottom)); }
}

/* ═══ v31: دليل التثبيت + الورديات على الجوال ═══ */
@media (max-width: 700px) {
  /* دليل التثبيت: خطوات بأهداف لمس مريحة وتبويبات ملتفة */
  .ig-steps li { padding: .7rem .75rem; font-size: .86rem; }
  .ig-tab { padding: .5em 1em; font-size: .82rem; }
  .ig-native .btn { width: 100%; }
  /* بطاقات إحصاء الورديات: شبكة عمودان */
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  /* شريط اليوم في الجدول: عرض ثابت مريح */
  .shift-tl { min-width: 120px; }
  /* المعاينة الحية: عمود واحد */
  .sh-preview { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .sh-preview > div { flex-direction: row; align-items: baseline; gap: .5rem; }
  .sh-preview > div span { min-width: 90px; }
  /* رقائق السماحية السريعة */
  .tol-chip { width: 44px; height: 34px; }
}
@media (max-width: 360px) {
  .grid-cards { grid-template-columns: 1fr 1fr; }
  .ig-num { width: 22px; height: 22px; font-size: .76rem; }
}

/* ═══ v32: دليل التثبيت بستة أنظمة تشغيل — على الجوال الضيق ═══ */
@media (max-width: 420px) {
  .ig-tab { padding: .45em .8em; font-size: .76rem; }
  .ig-tabs { gap: .3rem; }
}
@media (max-width: 360px) {
  .ig-tab { padding: .4em .65em; font-size: .72rem; }
  .ig-steps li { gap: .5rem; }
}


/* ═══════════ 17) وضع التطبيق المثبّت — وضوح تام للجزء العلوي (v34) ═══════════
   بلاغ المستخدم: عند تثبيت التطبيق على الشاشة الرئيسية يظهر الجزء العلوي
   «مُغشّشاً» وغير واضح. التشخيص أثبت ثلاثة أسباب متزامنة:
   (أ) على الأجهزة الأعرض من 900px (تابلت أفقي/سطح المكتب) لا تشمل تسطيحة v28
       الترويسة فتبقى زجاجية backdrop-filter:blur(22px) — والزجاج في وضع
       standalone يرسم ضباباً باهتاً فوق المحتوى (نفس عائلة علة v28)
   (ب) box-sizing:border-box يجعل min-height:60px يشمل حاشية النوتش
       env(safe-area-inset-top) — على الأجهزة ذات الثقب/الجزّاز (‎47-59px)
       ينضغط صف المحتوى إلى بضع بكسلات فيختفي الجزء العلوي فعلياً
   (ج) نص شريط الحالة iOS أبيض فوق ترويسة فاتحة (black-translucent) — عولج
       في index.html بـdefault
   العلاج هنا: خلفيات صلبة بلا ضباب + ترقية طبقة translateZ(0) في وضع المثبّت
   مهما كان العرض، واحتساب النوتش في الارتفاع الأدنى، ومسافة سفلية آمنة
   لشريط تبويبات الموظف فوق شريط الإيماءات. الغلاف الزجاجي يبقى كما هو في
   تبويب المتصفح العادي على الشاشات الواسعة (جمالية بلا علة) */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .topbar, .tabbar, .sidebar, .side-brand {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .topbar, .tabbar { background: #f7f7fa; }
  [data-theme="dark"] .topbar, [data-theme="dark"] .tabbar { background: #161618; }
  .sidebar { background: #f4f5f9; }
  [data-theme="dark"] .sidebar { background: #1c1c1e; }
  .topbar {
    min-height: calc(60px + env(safe-area-inset-top));
    padding-top: max(.55rem, env(safe-area-inset-top));
    padding-bottom: .55rem;
  }
  .auth-top { padding-top: max(1.1rem, env(safe-area-inset-top)); }
  .tabbar { padding-bottom: max(.45rem, env(safe-area-inset-bottom)); }
  /* شريط التنقل الأفقي (شاشات عريضة) لا يلتصق أعلى النوتش */
  .tabbar { top: calc(60px + env(safe-area-inset-top)); }
}
/* فئة JS الاحتياطية (html.standalone) لمتصفحات لا تدعم @media display-mode —
   تغطية مطابقة، والوسم يُزرع مبكراً في <head> بلا وميض */
html.standalone .topbar, html.standalone .tabbar, html.standalone .sidebar, html.standalone .side-brand {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
html.standalone .topbar, html.standalone .tabbar { background: #f7f7fa; }
html.standalone[data-theme="dark"] .topbar, html.standalone[data-theme="dark"] .tabbar { background: #161618; }
html.standalone .sidebar { background: #f4f5f9; }
html.standalone[data-theme="dark"] .sidebar { background: #1c1c1e; }
html.standalone .topbar {
  min-height: calc(60px + env(safe-area-inset-top));
  padding-top: max(.55rem, env(safe-area-inset-top));
  padding-bottom: .55rem;
}
html.standalone .auth-top { padding-top: max(1.1rem, env(safe-area-inset-top)); }
html.standalone .tabbar { padding-bottom: max(.45rem, env(safe-area-inset-bottom)); top: calc(60px + env(safe-area-inset-top)); }

/* ═══════════════════════════════════════════════════════════════════
   18) v35: تنسيق احترافي لعبارات صفحة الموظف — الجمل الطويلة تلتف
       داخل الإطار بدل الخروج منه (وردية اليوم / GPS / الحيّز الجغرافي)
   ═══════════════════════════════════════════════════════════════════ */
/* شارات سطر الحالة («وردية اليوم: …» وحالات الدوام) تلتف لأسطر متعددة
   بأناقة: زوايا ناعمة 14px بدل الكبسولة عند اللفّ، وتباعد أسطر مريح */
.state-line { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.state-line .chip {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  line-height: 1.6;
  max-width: 100%;
  font-size: .95em;
  border-radius: 14px;
  padding: .34em .85em;
}
/* سطر GPS: النص الطويل يلتف بدل دفع البطاقة خارج الشاشة */
.gps-line { overflow-wrap: anywhere; }
.gps-line > * { min-width: 0; }
/* بطاقة الرادار/الموقع الحي */
.radar-meta { overflow-wrap: anywhere; }
.radar-meta > * { min-width: 0; }
/* شريط الحيّز الجغرافي: نفس معاملة اللفّ الاحترافية */
.zone-strip { flex-wrap: wrap; justify-content: center; }
.zone-strip .chip {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
  max-width: 100%;
  border-radius: 14px;
}
/* الزر الدائري: التسمية الفرعية (الوردية · الوقت) تلتف داخل الدائرة
   دون قصّ، مع حاشية تحفظ النص بعيداً عن حدّ الدائرة */
.btn-check { padding: 0 1.05rem; }
.btn-check > span:not(.ring), .btn-check small {
  max-width: 9em;
  overflow-wrap: anywhere;
}
.btn-check small { line-height: 1.4; margin-top: .15em; font-size: .8em; }
/* أمان عام لصفحة الموظف: لا شارة تتجاوز إطار بطاقتها مهما طالت */
#empPages .chip { max-width: 100%; }
#empPages .page-head { flex-wrap: wrap; row-gap: .4rem; }
#empPages .page-head .chip {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
  border-radius: 14px;
}
/* صفوف السجلات والإشعارات: نص طويل يلتف دون تمديد الجدول */
#empPages .tl-item, #empPages .rec-row, #empPages .ann-body { overflow-wrap: anywhere; }
/* ضمانات إضافية v35: اللوحات المرسومة (canvas) لا تخرج عن حاويتها مهما تغيّر العرض
   ⚠️ v39 إصلاح جوهري: قاعدة «#myMap *» السابقة كانت تفرض max-width:100% على كل
   صور بلاطات Leaflet داخل خريطة بوابة الموظف — وبما أن حاوية الطبقة
   (.leaflet-layer) عديمة العرض الذاتي، كانت كل بلاطة تُحسب بعرض 0px
   فتظهر الخريطة رمادية فارغة (بينما تعمل خرائط الإدارة طبيعياً لأنها
   خارج #myMap). أبقينا القيد على الحاوية نفسها والكانفس فقط، وأزلناه
   عن الأبناء ليستعيد leaflet.css قاعدة «max-width:none!important» الخاصة به. */
#empPages canvas, .radar-box canvas, #myMap { max-width: 100% !important; }
#empPages .week-strip, .week-strip { max-width: 100%; }
/* v35: الشريط العلوي في الشاشات الضيقة جداً — أزرار أصغر حتى لا يخرج الصف
   عن الحافة (كان يفيض 6px عند 320px في RTL) */
@media (max-width: 360px) {
  .topbar { padding-inline: .55rem; gap: .4rem; }
  .top-actions { gap: .12rem; }
  .top-actions .icon-btn { width: 32px; height: 32px; font-size: .92em; }
}
@media (max-width: 340px) {
  .top-actions .icon-btn { width: 29px; height: 29px; font-size: .88em; }
  .brand-mini { font-size: .9rem; }
  .avatar { width: 30px; height: 30px; font-size: .85em; }
}