/* ==========================================================================
   مكتبة النماذج والردود السريعة — الدرج العلوي + الصفحة (#/templates).

   🔴 **راسم واحد لمَقعدين.** نفس الماركب بيتحط في مكانين: الدرج اللي بيفتح
      من الشريط العلوي، والصفحة الكاملة. فكل القواعد هنا معلّقة على
      `[data-tpl-root]` **مش** على الدرج — لو واحدة اتعلّقت على الغلاف،
      الصفحة بتطلع بنص تنسيق ومحدش يعرف ليه.
      (درس «راسم واحد ومصدرين» بتاع «عملاء خاصة».)
   ========================================================================== */

/* ── زرار الشريط العلوي — ثابت في كل صفحة (طلب م. قطب) ───────────────────
   📌 شكله **مميّز عن «خروج»**: ده البند اللي المفروض يتداس كل يوم، و«خروج»
      اللي المفروض مايتداسش بالغلط. الاتنين `btn-ghost` بنفس اللون كانوا
      هيبقوا نفس الحاجة للعين. */
.tpl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  background: var(--primary-tint); color: var(--primary);
  font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.tpl-btn:hover { background: color-mix(in srgb, var(--primary) 16%, var(--card)); border-color: var(--primary); }
.tpl-btn:active { transform: translateY(1px); }
.tpl-btn[aria-expanded="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* 🔴 **الشريط العلوي مالوش لفّ سطر، فالزرار الزيادة بيطفّح الصفحة أفقيًا.**
   على ٣٧٥px الشريط كان بياخد ~٢٩٥px من ٣٣٩ متاحين؛ زرار تاني (٣٨ + مسافة)
   بيوصّلهم ٣٤٣ — يعني **الصفحة كلها بتتزحلق**، وده بالظبط العرَض اللي
   قاعدة «محتوى بيتقص من غير سكرول» اتكتبت عشانه. التصرّف على مرحلتين:
   • ≤٧٦٠px: الزرار **أيقونة بس** (الكلمة بتختفي).
   • ≤٥٦٠px: اسم النظام بيختفي كمان والعلامة «ج» بتفضل — وهي رابط الرئيسية.
   ⚠️ **وشبكة أمان فوق الاتنين**: `min-width: 0` + قصّ الاسم بالنقط، عشان أي
      خط أعرض من المتوقّع مايطفّحش الصفحة بدل ما يتقصّ في حدوده. */
@media (max-width: 760px) {
  .tpl-btn { padding: 9px 10px; }
  .tpl-btn .tpl-btn-t { display: none; }
}

/* ── الستارة والدرج ──────────────────────────────────────────────────────
   📌 **بيبدأ تحت الشريط العلوي** زي درج القائمة بالظبط — عشان الزرار اللي
      فتحه يفضل ظاهر ويقفله، ومايدوّرش على مكان تاني يدوس فيه. */
.tpl-scrim {
  position: fixed; inset: var(--topbar-real) 0 0 0; z-index: 60;
  background: rgba(4, 14, 10, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: tpl-fade .18s ease;
}
.tpl-sheet {
  position: fixed; top: var(--topbar-real); bottom: 0;
  inset-inline-end: 0; inset-inline-start: auto;
  width: min(640px, 100vw); z-index: 61;
  display: flex; flex-direction: column;
  background: var(--bg); border-inline-start: 1px solid var(--line);
  box-shadow: 14px 0 40px -20px rgba(0, 0, 0, .55);
  animation: tpl-slide .2s ease;
}
@keyframes tpl-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tpl-slide { from { transform: translateX(-24px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .tpl-scrim, .tpl-sheet { animation: none; }
}

.tpl-sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.tpl-sheet-head h2 { font-family: var(--font-display); font-size: 1.1rem; margin-inline-end: auto; }
.tpl-sheet-head .tpl-sub { display: block; font-family: var(--font-body); font-size: .78rem; font-weight: 500; color: var(--muted); }

/* 🔴 **الجسم هو اللي بيسكرول، مش الدرج.** لو السكرول على الغلاف، رأس الدرج
   (التابات والبحث) بيطلع فوق مع المحتوى وبيضيع — والمكتبة اللي بتدوّر فيها
   محتاجة خانة بحثها في مكانها. */
.tpl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 26px; }

/* ── الصفحة الكاملة (#/templates) ──────────────────────────────────────── */
.tpl-page .tpl-body { overflow: visible; padding: 0; }

/* ── التابات ────────────────────────────────────────────────────────────── */
.tpl-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tpl-tabs button {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--muted);
  padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tpl-tabs button:hover { color: var(--ink); border-color: var(--primary); }
.tpl-tabs button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ── البحث ──────────────────────────────────────────────────────────────── */
.tpl-search { position: relative; margin-bottom: 8px; }
.tpl-search .s-ico { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.tpl-search input { padding-inline-start: 42px; padding-inline-end: 38px; height: 46px; border-radius: 13px; }
.tpl-clear {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--faint); cursor: pointer; border-radius: 8px;
}
.tpl-clear:hover { background: var(--card-2); color: var(--ink); }
/* 🔴 **`display` بيكسب على `hidden`** — والقاعدة فوق مدّية الزرار `display: grid`،
   فـ`clear.hidden = true` كان هيتنفّذ في صمت والزرار يفضل ظاهر على خانة فاضية.
   (نفس بقّة ستارة الدرج في `index.html`، وتالت ظهور للنمط في المشروع.) */
.tpl-clear[hidden] { display: none; }
.tpl-count { color: var(--muted); font-size: .85rem; font-weight: 600; margin: 0 2px 12px; }

/* 🔴 **«مالقيناش هنا» لازم تقول «بس فيه هناك».** نفس السؤال متجاوب في تلات
   تابات، فشاشة فاضية جنب شاشة مليانة هي العرَض اللي بيخلّي اللي بيدوّر
   يفتكر إن النموذج مش موجود أصلاً. (درس «سؤال واحد وقاعدتين».) */
.tpl-elsewhere { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tpl-elsewhere button {
  border: 1px dashed var(--primary); background: var(--primary-tint); color: var(--primary);
  padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; cursor: pointer;
}

/* ── صفوف البطاقات ──────────────────────────────────────────────────────── */
.tpl-list { display: flex; flex-direction: column; gap: 9px; }
.tpl-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tpl-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.tpl-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--t-bg); color: var(--t-ink);
}
.tpl-meta { min-width: 0; flex: 1 1 auto; }
.tpl-meta h3 { font-size: .97rem; font-weight: 700; line-height: 1.45; }
.tpl-meta p { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.tpl-acts { flex: none; display: flex; gap: 7px; }

/* الشاشة الصغيّرة: الأزرار بتنزل تحت بدل ما تعصر العنوان أو تطلّ برّه الصف */
@media (max-width: 560px) {
  .tpl-row { flex-wrap: wrap; }
  .tpl-acts { width: 100%; }
  .tpl-acts .btn, .tpl-acts .btn-ghost { flex: 1 1 0; justify-content: center; }
}

/* ── الملفات الثابتة ────────────────────────────────────────────────────── */
.tpl-files { margin-bottom: 16px; }
.tpl-files-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
/* «إضافة بند» بتتدفع لآخر السطر — هي فعل مش عنوان */
.tpl-file-add { margin-inline-start: auto; align-self: center; }
.tpl-files-h h3 { font-family: var(--font-display); font-size: .98rem; }
.tpl-files-h span { color: var(--faint); font-size: .8rem; }
.tpl-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 9px; }
.tpl-file {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px; display: flex; flex-direction: column; gap: 8px;
}
.tpl-file b { font-size: .9rem; font-weight: 700; }
/* ⚠️ **«لسه ماترفعش» حالة معلنة مش زرار مطفي.** زرار تحميل مايشتغلش بيخلّي
   اللي بيدوس يفتكر إن النظام باظ؛ السطر ده بيقول السبب. */
.tpl-file .tpl-pending { color: var(--faint); font-size: .78rem; }

/* ── شاشة البطاقة (بتحلّ محل اللستة جوّه نفس الغلاف) ────────────────────── */
.tpl-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tpl-detail-head h3 { font-family: var(--font-display); font-size: 1.05rem; margin-inline-end: auto; }
/* 🔴 **النص قابل للتعديل قبل النسخ عن قصد** — النماذج دي عناوين بمسافات
   فاضية، والموظف بيملاها وبعدين ينسخ. والتعديل **محلّي ومؤقّت**: بيروح مع
   قفل الصفحة ومابيوصلش لحد تاني، والزرار «استعادة الأصل» بيرجّع النص الأصلي. */
.tpl-editor {
  width: 100%; min-height: 46vh; border-radius: var(--radius-sm);
  line-height: 2; font-size: .95rem; white-space: pre-wrap;
}
.tpl-detail-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tpl-note { color: var(--faint); font-size: .8rem; margin-top: 10px; }

.tpl-empty { text-align: center; color: var(--muted); padding: 30px 12px; }

/* ── زراير الإدارة (السوبر أدمن وحده) ────────────────────────────────────
   🔴 **مقاس صغيّر جوّه الصف**: `.icon-btn` الأساسية ٣٨px، وأربع أزرار بالمقاس
      ده في صف واحد بيكسروا الصف على أي شاشة أقل من لابتوب. */
.icon-btn.sm { width: 30px; height: 30px; border-radius: 9px; }
.icon-btn.sm.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.icon-btn.sm.danger:hover { background: var(--danger-tint); border-color: var(--danger); }
/* «إضافة بطاقة» بتقعد آخر شريط التابات وبتتدفع للطرف التاني — هي فعل مش تاب */
.tpl-add { margin-inline-start: auto; }

/* ── الملفات ────────────────────────────────────────────────────────────── */
.tpl-file-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tpl-file-acts .btn, .tpl-file-acts .btn-ghost { flex: 1 1 auto; justify-content: center; }
/* سطر «الملف الموجود»: اسمه وحجمه. حقيقة معلنة — مش مجرد «فيه ملف». */
.tpl-fmeta { color: var(--muted); font-size: .78rem; word-break: break-all; }

/* ── فورم البطاقة (جوّه مودال النظام) ────────────────────────────────────
   ⚠️ **معلّقة بـ`.modal`** زي قواعد فورم التذكيرات بالظبط: كلاس عايم بيشتغل
      في أي مكان، وحرس الكلاسات في `hints.test.mjs` نزل عشان النمط ده. */
.modal .tpl-form { display: block; }
.modal .tpl-form .field-label { margin-top: 12px; }
.modal .tpl-form .field-label:first-child { margin-top: 0; }
.modal .tpl-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal .tpl-form-body { min-height: 34vh; line-height: 1.9; font-size: .92rem; }
/* 🔴 الخطأ **جوّه الفورم** مش توست: التوست بيروح بعد ٣ ثواني واللي بيكتب
   بيبقى شايل عينه في الخانة — ونفس سبب `#hntErr` في التذكيرات. */
.modal .tpl-form-err { color: var(--danger); font-size: .85rem; min-height: 1.2em; margin-top: 8px; }
.modal .tpl-form-err:empty { min-height: 0; margin-top: 0; }

/* والمودال بتاع البطاقة أعرض من الافتراضي (٤٦٠px) — النص نفسه هو المحتوى */
.modal-overlay:has(.tpl-form) .modal { max-width: 620px; }

/* خانة اختيار الملف جوّه المودال — زرار المتصفّح الأصلي بياخد أنماطه بنفسه،
   واللي بنلبسه هو الإطار حواليه وبس. */
.modal .tpl-form input[type="file"] { padding: 10px 12px; cursor: pointer; }
.modal .tpl-form .tpl-fmeta { margin-top: 8px; }
.modal .tpl-form .tpl-note { margin-top: 10px; }