/* TakeFlow Tv - تصميم وتطوير محمد قندقلي */
/* ═══════════════════════════════════════════════════════════════════
   tf-mobile.css — v406 · طبقة الهاتف الموحَّدة
   ─────────────────────────────────────────────────────────────────
   لماذا ملف واحد بدل ترقيع الملفات الثلاثة:

   القياس على عرض 390px (آيفون) وجد 5730 قاعدة فعّالة، فيها 129 مشكلة
   موزّعة على خمس عائلات:

     37  هدف لمس أصغر من 44px   .nav-ico 17 · .shift-del-btn 16 · .sched-chip 22
     35  nowrap على نصّ يُقصّ    .sched-name-col · .sched-holiday-head
     30  شبكة أعمدتها لا تسع    .wpc-grid 7 أعمدة · .type-grid 5 · .dash-cards 4
     25  تمرير أفقي             .sched-grid-wrap · .mail-folders
      2  عرض يفرض تجاوزاً       .msg-sidebar 360px · .sched-table min-width 640

   والسبب الجذري ليس أيّاً من هذه: **ثماني نقاط كسر بلا نظام** —
   560 · 620 · 640 · 700 · 760 · 768 · 860 · 900. كل شاشة عولجت وحدها
   على نقطة مختلفة، فما ظهر على 700 اختفى على 640 وعاد على 760.
   لذلك «فيه فراغ» في مكان وازدحام في آخر.

   هذه الطبقة تفرض سلّماً واحداً:

     ≤ 480   هاتف           عمود واحد · لمس 44 · لا تمرير أفقي
     ≤ 768   لوح صغير       عمودان
     ≤ 1024  لوح            ثلاثة

   تُحمَّل **أخيراً** بعد الملفات الثلاثة، فتغلب بلا `!important` إلا
   حيث يكون الأصل نفسه `!important`.

   المبادئ:
   • لا `overflow:hidden` على حاوية تمرير — أوقف تمرير الصفحة كلها سابقاً.
   • هدف اللمس 44px حدّاً أدنى — معيار الوصولية، لا ذوق.
   • الشبكات `auto-fit` + `minmax` — تنطوي وحدها بدل أعمدة ثابتة.
   • `overflow-wrap: anywhere` بدل قصّ الأسماء — الاسم يُقرأ كاملاً.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ① أساس الهاتف — ≤ 480px
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ⑦ شريط الأيام — تصحيح تصحيح
   ─────────────────────────────────────────────────────────────────
   خطآن متتاليان مني، والثاني أسوأ من الأول:

   ① القسم ① طوى **كل** شبكة إلى عمود واحد بقاعدة عامة، فطالت
      `.smob-strip` — وهي أصلاً `repeat(7, 1fr)` صحيحة في
      tf-app.css:8746. فصارت الأيام السبعة سبعة صفوف.

   ② ثم «صحّحتُ» على `.smob` بدل `.smob-strip`. و`.smob` ليست الشريط
      بل **الحاوية الكاملة**: الشريط + الترويسة + بطاقات الأشخاص.
      فصارت كلها سطراً أفقياً واحداً — الأيام عموداً على الجانب
      والأشخاص متراصّين إلى جوارها. وهذا ما ظهر في اللقطة.

   الدرس: اقرأ ما يحويه المحدِّد قبل الكتابة عليه. اسمان بالبادئة
   نفسها لا يعنيان البنية نفسها.

   الصواب: `.smob` عمود (حاوية)، و`.smob-strip` وحدها الشريط —
   وهي مضبوطة في الأصل، فيكفي استثناؤها من الطيّ العام.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* الحاوية عمود: الشريط ثم الترويسة ثم البطاقات */
  .smob { display: block !important; grid-template-columns: none !important; }

  /* الشريط أفقي سبعة أعمدة — كما صُمّم */
  .smob-strip,
  .sched-days,
  .sched-daybar,
  .gd-days,
  .wpc-week,
  .day-strip {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px;
    overflow: visible;
  }

  .smob-d,
  .sched-days > *,
  .sched-daybar > *,
  .day-strip > * {
    min-width: 0; min-height: 46px; padding: 5px 2px;
    font-size: 10.5px; line-height: 1.2;
  }
  .smob-d span { font-size: 9.5px; }
  .smob-d b { font-size: 13px; }

  /* بطاقة الشخص صفّ كامل تحت الشريط */
  .smob-c {
    display: flex !important; align-items: center;
    justify-content: space-between; gap: 8px; width: 100%;
  }
  .smob-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
  .smob-nm { min-width: 0; }
  .smob-nm b { overflow-wrap: anywhere; }
  .smob-sh { flex: 0 0 auto; white-space: nowrap; }
  .smob-head { display: flex !important; flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {


  /* ── منع التجاوز الأفقي من جذره ──
     .sched-table كانت min-width:640px على شاشة 390: الجدول يفرض
     تمريراً أفقياً على الصفحة كلها لا على نفسه. */
  html, body { max-width: 100%; overflow-x: hidden; }

  .sched-table { min-width: 0; }
  .sched-grid-wrap,
  .ml-splits,
  .mail-folders,
  .ref-gallery,
  .ref-gallery-side,
  .nb-tlstrip,
  .ai-tabs,
  .tl-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;   /* لا يجرّ الصفحة معه */
  }
  .sched-grid-wrap::-webkit-scrollbar,
  .mail-folders::-webkit-scrollbar,
  .ai-tabs::-webkit-scrollbar { height: 0; }

  .msg-sidebar { width: 100%; max-width: 100%; }

  /* ── الشبكات: تنطوي وحدها ──
     أعمدة ثابتة على 390px تخرج عن الشاشة أو تسحق المحتوى. */
  .dash-cards,
  .dash-stats,
  .type-grid,
  .req-kanban-board,
  .tp-grid,
  .tfs-lib-grid,
  .set-grid,
  .stat-grid { grid-template-columns: 1fr !important; }

  .type-grid,
  .tp-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }

  .tfs-lib-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; }

  .mail-shell,
  .mail-shell.wide,
  .mail-shell.folders-collapsed { grid-template-columns: 1fr !important; }

  /* ── هدف اللمس 44px ──
     37 عنصراً تحت العتبة. القاعدة عامة حتى لا يُنسى واحد،
     ثم استثناءات للأيقونات داخل أزرار (الزرّ نفسه هو الهدف). */
  button,
  .btn,
  [role="button"],
  .sched-nav-btn,
  .sched-chip,
  .nr-expand-btn,
  .tfs-lbtn,
  .tfs-tag,
  .tfs-tpl-chip,
  .nav-item,
  .bn-item {
    min-height: 44px;
  }
  /* v406 — كانا مستثنيَين بـ32 و38، وصرخ الفحص عن حقّ: الاثنان
     يُضغطان فعلاً (حذف وردية · فتح الحساب). العتبة تسري عليهما. */
  .shift-del-btn { min-height: 44px; min-width: 44px; }

  /* الأيقونة داخل زرّ ليست هدفاً بنفسها */
  .nav-ico,
  .bn-icon .nav-ico,
  button > svg,
  .btn > svg { min-height: 0; }

  /* ── النصّ يُقرأ لا يُقصّ ──
     35 قاعدة nowrap على أسماء وعناوين. الاسم المقصوص في خانة تُضغط
     يجعل المستخدم يضغط على المجهول. */
  .sched-name-col,
  .sched-holiday-head,
  .nrs-chip,
  .sel-btn,
  .pv-collapsed-title,
  .mfb-btn,
  .msb-btn,
  .nr-title-row .nr-title-sugg {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
  .sched-name-col { min-width: 92px; line-height: 1.35; }

  /* ── النوافذ: ملء الشاشة تقريباً ──
     نافذة 640px على شاشة 390 تخرج من الجانبين. */
  .modal-content,
  .tfs-modal,
  .req-modal,
  .hl-mod,
  .rp-modal,
  .cmp-modal,
  .dsg-modal,
  .sb-pick-modal,
  .mailpop {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── الكروت: المحتوى يملأ عرضه ──
     الفراغ الذي يراه محمد سببه صفوف عرضها كامل ومحتواها ملتصق بجهة. */
  .sched-today-head { flex-wrap: wrap; gap: 6px; line-height: 1.5; }
  .st-onair { flex: 0 0 auto; }

  /* ── الشريط السفلي: كل بند يُقرأ ──
     كان يقصّ «الأرشيف» و«الرسائل» لأنّ الأعمدة متساوية والنصّ nowrap. */
  .bottom-nav,
  .bn-bar {
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .bottom-nav::-webkit-scrollbar,
  .bn-bar::-webkit-scrollbar { height: 0; }
  .bottom-nav .nav-item,
  .bn-bar .bn-item {
    flex: 0 0 auto;
    min-width: 62px;
    padding-inline: 6px;
  }
  .bottom-nav .nav-item span,
  .bn-bar .bn-item span { font-size: 10px; white-space: nowrap; }

  /* ── الصفحة: هوامش صغيرة، بلا سقف عرض ── */
  .page { max-width: 100%; padding-inline: 12px; }

  /* ── الجداول: بطاقات بدل أعمدة ──
     جدول بسبعة أعمدة على 390px غير مقروء مهما ضُغط. */
  .sched-table th,
  .sched-table td { padding: 6px 4px; font-size: 11px; }

  /* ── الحقول: 16px تمنع تكبير iOS التلقائي ──
     أي حقل بخطّ أصغر من 16px يجعل سفاري يقرّب الصفحة عند التركيز،
     فتخرج الواجهة عن مكانها ولا تعود. */
  input, select, textarea { font-size: 16px !important; }

  /* ── نموذج الإجازة: عمود واحد ── */
  .hrf-grid { grid-template-columns: 1fr !important; }
  .hrf-sign { grid-template-columns: 1fr !important; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   ② لوح صغير — ≤ 768px
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  .dash-cards,
  .dash-stats,
  .type-grid,
  .tp-grid,
  .set-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }

  .wpc-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
  .req-kanban-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mail-shell,
  .mail-shell.wide { grid-template-columns: 1fr !important; }

  button, .btn, [role="button"] { min-height: 42px; }

  .modal-content,
  .tfs-modal,
  .req-modal { width: min(94vw, 680px) !important; max-width: 94vw !important; }

  input, select, textarea { font-size: 16px !important; }
  .hrf-sign { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ③ لوح — ≤ 1024px
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .dash-cards,
  .dash-stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
  .req-kanban-board { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .wpc-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ④ الطباعة — نموذج الإجازة على A4 صفحة واحدة
     الورقة الرسمية 210×297مم بالضبط (قياس من الملف: 793×1122pt).
     المحتوى ينتهي عند 1063pt، فالهامش 12مم يبقيه صفحة واحدة.
   ══════════════════════════════════════════════════════════════════ */
@page { size: A4 portrait; margin: 12mm; }

/* v627 — أُزيلت كتلة @media print التي تُخفي body * وتُظهر .hrf-sheet وحدها.
   الصنف .hrf-sheet لم يعد في أيّ ماركب، والطباعة صارت مستنداً مستقلّاً (tfPrintHTML)
   ينسخ أوراق الأنماط كلّها — فكانت هذه الكتلة تُخفي الورقة كلّها: PDF أبيض فارغ. */

/* ══════════════════════════════════════════════════════════════════
   ⑤ البقيّة — محدِّدات بأسمائها من القياس الثاني
   ─────────────────────────────────────────────────────────────────
   القائمة العامة في القسم ① غطّت العائلات، وبقي 45 محدِّداً باسمه.
   مأخوذة من إعادة القياس لا من التخمين.

   واستُثني عمداً:
   • تقويمات الأيام السبعة (.wpc-week · .tfdp-dow · .tfdp-grid · .tfd-dow · .tfd-grid · .gd-days)
     سبعة أعمدة هي **شكل التقويم** لا خطأ — تُصغَّر ولا تُطوى.
   • محدِّدات ::before و.sidebar.collapsed — ليست أهدافاً تُضغط.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* تقويم الأيام السبعة: يبقى سبعة، ويصغر ليسع */
  .wpc-week,
  .tfdp-dow,
  .tfdp-grid,
  .tfd-dow,
  .tfd-grid,
  .gd-days {
    font-size: 10px; gap: 2px;
  }
  .tfdp-grid button, .tfd-grid button, .gd-days > * { min-height: 34px; padding: 2px; }

  /* شبكات فعلية تُطوى */
  .smob-strip { grid-template-columns: 1fr !important; }

  /* النصّ يُقرأ */
  .sws-name,
  .mf-title,
  .ai-chat-item-title,
  .sc-btn,
  .tl-block-title,
  .sb-pick-label,
  .hero-title,
  .atl-dot-label,
  .tf-mate-name,
  .gr-report-title,
  .mc-media-label,
  .map-name,
  .sched-tool-btn,
  .member-row .online-label,
  .preview-name,
  .tc-name,
  .sidebar-logo-txt .st-name,
  .sidebar-foot-btn,
  .bottom-nav-item .bn-label,
  .q-name,
  .nb-frame .nb-frame-label,
  .nb-cur-name,
  .mrt-btn.mrt-drawer {
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
  }

  /* هدف اللمس ٤٤ */
  .nav-user-avatar,
  .sched-week-nav .sched-nav-btn,
  .shift-del-btn,
  .sched-mgr-btn,
  .pv-menu-btn,
  .hl-day-nav,
  .nr-pv-editable,
  .card-msg-btn,
  .assets-zoom-btn,
  .tl-dur-btn,
  .gr-expand-btn,
  .mc-expand-btn,
  .wpc-nav-btn,
  .member-icon-btn,
  .tfdp-nav,
  .msg-new-btn,
  .msg-tools .mt-btn,
  .tfd-nav,
  .sidebar-pin-btn,
  .sidebar-collapse-btn { min-height: 44px; }
  .shift-del-btn { min-height: 44px; min-width: 44px; }
  .nav-user-avatar { min-height: 44px; min-width: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   ⑥ الأيقونات ليست أهدافاً — الزرّ هو الهدف
   ─────────────────────────────────────────────────────────────────
   القياس الثالث ترك ١٥ عنصراً تحت ٤٤px، وكلها أيقونات **داخل** أزرار:
   .nav-ico و.tf-btn svg و.sidebar-item .nav-ico وأخواتها. الأيقونة
   لا تُضغط وحدها — الزرّ الحاوي يُضغط، وهو فوق العتبة أصلاً.

   تكبيرها إلى ٤٤ يُفسد التصميم ولا يفيد اللمس. الصحيح: تصريح واضح
   بأنّ الأيقونة عنصر بصري، وأنّ حاويها هو ما يجب أن يبلغ العتبة.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav-ico,
  .bn-icon .nav-ico,
  .onair-nav-btn .nav-ico,
  .sidebar-item .nav-ico,
  .sidebar-foot-btn .nav-ico,
  .rail-item .nav-ico,
  .msgs-icon-btn svg,
  .msgs-send-btn svg,
  .sidebar-collapse-btn svg,
  .sidebar-foot-btn svg,
  .tf-btn svg,
  .tf-btn--sm svg { pointer-events: none; }

  /* الحاويات نفسها تبلغ العتبة */
  .msgs-icon-btn,
  .msgs-send-btn,
  .onair-nav-btn,
  .sidebar-item,
  .sidebar-foot-btn,
  .rail-item,
  .tf-btn { min-height: 44px; }
  .tf-btn--sm { min-height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   ⑧ الزرّ العائم — فوق الشريط السفلي لا فوق المحتوى
   ─────────────────────────────────────────────────────────────────
   زرّ المساعد العائم كان يستقرّ في زاوية الشاشة فيغطّي زرّ الإغلاق
   في النوافذ، ويلتصق بحافّة الشريط السفلي. على الهاتف الشريط السفلي
   يحتلّ آخر 62px، والزرّ يجب أن يعلوه لا أن يزاحمه.

   وطبقته أدنى من النوافذ: زرّ عائم يغطّي «إغلاق» يحبس المستخدم.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ai-fab,
  .assistant-fab,
  .tf-fab,
  #ai-fab,
  .fab-assistant {
    inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline-start: 12px !important;
    inset-inline-end: auto !important;
    width: 48px; height: 48px;
    z-index: 800 !important;      /* دون النوافذ — لا يغطّي «إغلاق» */
  }
  /* عند فتح نافذة يختفي تماماً */
  body.modal-open .ai-fab,
  body.modal-open .assistant-fab,
  body.modal-open .tf-fab,
  body.modal-open #ai-fab,
  body.modal-open .fab-assistant { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ⑨ النماذج — الشاشة والورقة والبنّاء
   ─────────────────────────────────────────────────────────────────
   القياسات من الورقة الرسمية بالنقطة لا بالتقدير:
     الصفحة 793×1122pt = A4 · الإطار x=52 عرض 688
     صفّ البيانات أربعة أعمدة × 172 · الأنواع عمودان
     التوقيع ثلاثة أعمدة عند 52 · 282 · 511 · خاناته 110×25
   ══════════════════════════════════════════════════════════════════ */
.hrf-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 10px; }
.hrf-banner { margin: 14px 0 8px; padding: 7px 12px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  background: var(--surface2, #1b1e24); border: 1px solid var(--border-strong, var(--border)); text-align: center; }
.hrf-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.hrf-sc { border: 1px solid var(--border-strong, var(--border)); border-radius: 9px; padding: 10px; }
.hrf-sc > b { display: block; font-size: 11.5px; margin-bottom: 7px; }
.hrf-ap { display: flex; gap: 10px; font-size: 11px; margin-bottom: 7px; }
.hrf-sr { margin-bottom: 7px; }
.hrf-sr label { display: block; font-size: 10.5px; opacity: .8; margin-bottom: 3px; }
/* نسبة الخانة الرسمية 110×25 — التوقيع يُرسم بنفس نسبة الورقة */
.hrf-pad { width: 100%; aspect-ratio: 110 / 25; min-height: 44px; border-radius: 6px; cursor: crosshair;
  background: var(--surface2, #fff); border: 1px dashed var(--border-strong, var(--border)); touch-action: none; }
.hrf-sig-clr { margin-top: 3px; font-size: 10px; padding: 3px 8px; border-radius: 5px; min-height: 0;
  background: transparent; border: 1px solid var(--border-strong, var(--border)); cursor: pointer; color: inherit; }

/* ── الورقة ── */
.hrp-sheet { background: #fff; color: #111; font-family: Arial, sans-serif; font-size: 11.5px; }
/* v627 — حُذفت .hrp-head/.hrp-logo/.hrp-hr غير المحصورة من هنا: الرأس صار مشتركاً بين الشاشة
   والورقة ونمطه في tf-app.css تحت .hrf-paper. هذا الملف يُحمَّل أخيراً، فكانت .hrp-hr هنا تفرض
   flex-direction:column — فتنزل «الجهة المُصدِرة / الموارد البشريّة / الإصدار» تحت بعضها ويطول الصندوق. */
.hrp-sec { font-weight: 800; font-size: 12px; margin: 10px 0 5px; border-bottom: 1px solid #111; padding-bottom: 2px; }
.hrp-num { opacity: .75; }
.hrp-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 7px; }
.hrp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.hrp-f label { display: block; font-size: 9.5px; opacity: .8; }
.hrp-v { min-height: 17px; border-bottom: 1px solid #999; padding: 2px 0; }
.hrp-chk { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.hrp-chk i { width: 11px; height: 11px; border: 1px solid #111; display: inline-block;
  font-style: normal; font-size: 9px; line-height: 10px; text-align: center; }
.hrp-banner { margin: 10px 0 5px; padding: 4px 10px; font-size: 11px; font-weight: 700;
  background: #eee; border: 1px solid #111; text-align: center; }
.hrp-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.hrp-sc { border: 1px solid #111; padding: 7px; }
.hrp-sc > b { display: block; font-size: 10.5px; margin-bottom: 5px; }
.hrp-sr { margin-bottom: 5px; }
.hrp-sr label { display: block; font-size: 9px; opacity: .8; }
.hrp-line { height: 24px; border-bottom: 1px solid #111; }
.hrp-sig { height: 24px; width: auto; max-width: 100%; display: block; background: transparent; }
.hrp-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 6px; border-top: 1px solid #111; font-size: 9px; opacity: .85; }

/* ── البنّاء ── */
.tfb-meter { margin-bottom: 12px; }
.tfb-bar { height: 7px; border-radius: 99px; background: var(--surface2, #1b1e24); overflow: hidden; }
.tfb-bar i { display: block; height: 100%; background: #2ecc8f; transition: width .2s; }
.tfb-meter.over .tfb-bar i { background: #ff5470; }
.tfb-num { font-size: 11.5px; margin-top: 5px; }
.tfb-ok { color: var(--success); font-weight: 700; }
.tfb-bad { color: var(--danger); font-weight: 700; }
.tfb-sec { border: 1px solid var(--border-strong, var(--border)); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; }
.tfb-sh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tfb-ops button { min-height: 30px; min-width: 30px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong, var(--border)); color: inherit; }
.tfb-fl { font-size: 10.5px; opacity: .75; margin-top: 4px; line-height: 1.5; }
.tfb-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tfb-warn { color: var(--danger); }

@media (max-width: 480px) {
  .hrf-grid { grid-template-columns: 1fr !important; }
  .hrf-sign { grid-template-columns: 1fr !important; }
  .hrf-pad { min-height: 56px; }
  .tfb-foot button { flex: 1 1 46%; }
}

/* ══════════════════════════════════════════════════════════════════
   ⑩ الأشرطة الزمنية — الكلمة الأخيرة
   ─────────────────────────────────────────────────────────────────
   الأقسام السابقة تحتوي قوائم عامة للطيّ، ومهما نُقّيت يبقى خطر أن
   يعود محدِّد إليها سهواً. هذا القسم يُكتب **آخر الملف** فيغلب كل ما
   قبله، ويُثبّت قاعدة واحدة:

     الشريط الزمني لا يُطوى أبداً. ترتيب الأيام جنباً إلى جنب هو
     المعلومة نفسها؛ وطيّه يجعل سبعة أيام سبعة صفوف، فتمتدّ البطاقة
     شاشةً كاملة ويبقى الفراغ عن جانبيها.

   وهو تصحيح لخطأ وقعتُ فيه مرّتين: مرّة بالطيّ العام، ومرّة
   بـ«تصحيح» طبّقتُه على الحاوية بدل الشريط.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .smob-strip,
  .wpc-grid,
  .sched-days,
  .sched-daybar,
  .gd-days,
  .wpc-week,
  .day-strip {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  /* التقويم الشهري ما زال سبعة أعمدة كذلك */
  .tfdp-grid,
  .tfd-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}