/* ═════════════════════════════════════════════════════════════════
   حضوري — طبقة الاستجابة الشاملة 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; }
}