/* hints.css — صفحة «التذكيرات» (#/hints).

   ⚠️ **مافيش ولا لون ثابت هنا.** كل لون توكن من النظام (`--ink` · `--line` · `--primary` …) — لون `#hex`
   معناه كارت أبيض في الدارك مود، ودي المصيدة اللي اتكرّرت مرتين قبل كده.
   واختبار بيرفض أي `#hex` في الملف ده.

   ⚠️ **وكل قاعدة مربوطة بـ`.hnt`** — قاعدة على وسم عام (`label`، `button`) بتفضل
   تنطبق على عنصر جديد بنفس الوسم بعد ما اللي اتكتبت له يتشال. ده اللي أكل نص يوم
   في فلاتر «قاعدة العملاء»، واختبار بيرفض أي محدّد مش فيه `.hnt`.

   🔴 **والمودال بيتبني بـ`openModal()` بتاعة النظام في `body` — برّه `.hnt`.**
   فمحدّداته هنا على `.modal` مباشرة (وهي **الكارت** نفسه في `styles.css`، والغلاف
   اسمه `.modal-overlay`). أول نسخة اخترعت `.modal.hnt-modal`/`.modal-card`
   فالكارت نزل في تدفّق الصفحة تحت على اليمين **وبلا أي تنسيق**. */

/* ── الشِل ─────────────────────────────────────────────────────────────── */
.hnt { display: flex; flex-direction: column; gap: 14px; }

.hnt .hnt-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.hnt .hnt-title { font-size: 1.15rem; margin: 0 0 2px; }
.hnt .hnt-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.hnt .hnt-search {
  min-width: 220px; padding: 7px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
  font: inherit; font-size: .86rem;
}
.hnt .hnt-search:focus { outline: none; border-color: var(--primary); }

/* ── الفلاتر ───────────────────────────────────────────────────────────── */
.hnt .hnt-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.hnt .hnt-f {
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: inherit; font-size: .8rem; line-height: 1.6;
}
.hnt .hnt-f:hover { color: var(--ink); border-color: var(--primary); }
.hnt .hnt-f.is-on {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary);
}

/* ── الكروت ────────────────────────────────────────────────────────────── */
.hnt .hnt-list { display: flex; flex-direction: column; gap: 10px; }

.hnt .hnt-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
/* التذكير اللي لسه محتاج تأكيد بيتعلّم بشريط جنبه — مش بلون خلفية تاني، عشان
   يفضل مقروء في الثيمين من غير ما نخترع لون. */
.hnt .hnt-card.is-pending { border-inline-start: 3px solid var(--primary); }

.hnt .hnt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hnt .hnt-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hnt .hnt-act { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.hnt .hnt-body {
  margin: 0; font-size: .95rem; line-height: 1.75; color: var(--ink);
  white-space: normal; overflow-wrap: anywhere;
}

.hnt .hnt-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); padding-top: 8px;
}
.hnt .hnt-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* الحبّة: اسم المستلم، وعلامة خضرا لو أكّد. `mdot ok` كلاس عام من styles.css
   فمافيش لون بيتكتب هنا. */
.hnt .hnt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: .76rem;
  border: 1px solid var(--line); color: var(--muted);
}
.hnt .hnt-chip-ok { color: var(--ink); border-color: var(--primary); }

/* ── زرار «تم» ─────────────────────────────────────────────────────────── */
/* قبل التأكيد: `btn sm` عادي (كلاس عام). بعده: حبّة فيها نقطة واسم — نفس شكل
   «المراجع» في الاجتماعات بالظبط، مش لينك مسطّر وسط الكارت. */
.hnt .hnt-ack.is-done {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink); font: inherit; font-size: .78rem;
}
.hnt .hnt-ack.is-done:hover { border-color: var(--danger); }

.hnt .hnt-del {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font: inherit; font-size: .9rem; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.hnt .hnt-del:hover { color: var(--danger); }

.hnt .hnt-due { white-space: nowrap; }

.hnt .hnt-empty {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 26px; text-align: center; color: var(--muted); font-size: .9rem;
}
.hnt .hnt-footer { padding-top: 2px; }

/* ── المودال ───────────────────────────────────────────────────────────── */
/* ⚠️ بيتبني في `body` برّه `.hnt`، فالمحدّدات على `.modal` (الكارت) مباشرة. */
.modal .hnt-form { display: flex; flex-direction: column; }
.modal .hnt-lbl {
  display: block; margin: 12px 0 5px; font-size: .8rem; color: var(--muted);
}
.modal .hnt-ta,
.modal .hnt-date {
  width: 100%; padding: 9px 11px; border-radius: 8px; font: inherit;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
}
.modal .hnt-ta { resize: vertical; min-height: 92px; line-height: 1.7; }
.modal .hnt-ta:focus,
.modal .hnt-date:focus { outline: none; border-color: var(--primary); }

.modal .hnt-picker {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 10px;
}
.modal .hnt-grp { display: flex; flex-direction: column; gap: 2px; }
.modal .hnt-grp-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .76rem; color: var(--muted); padding: 2px 4px;
}
.modal .hnt-all {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: .74rem; color: var(--primary); padding: 2px 6px; border-radius: 6px;
}
.modal .hnt-all:hover { text-decoration: underline; }

/* الخيار: صندوق + اسم **جنب بعض**.
   🔴 الاسم كان `flex:1` فبيتمدّ لآخر العرض والصندوق يفضل في الناحية التانية —
      فبيبانوا كأنهم عمودين منفصلين والمستخدم بيلف بعينه بينهم. دلوقتي الاسم
      `flex: 0 1 auto` فبيقف جنب الصندوق، و`min-width:0` لسه موجودة عشان
      الإيميل الطويل يتقصّ بنقط بدل ما يطلع برّه.
   ⚠️ والصف كله `<label>` فالدوسة في أي حتة فيه بتشغّل الصندوق — مساحة الضغط
      كلها مش المربّع الصغير بس. */
.modal .hnt-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 7px 8px; border-radius: 8px; font-size: .85rem; color: var(--ink);
  min-height: 34px;
}
.modal .hnt-opt:hover { background: var(--card-2); }
.modal .hnt-opt input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.modal .hnt-name {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal .hnt-me { flex: 0 0 auto; }

/* الإيميل نص LTR جوّه صفحة RTL — من غير ده بيتقصّ من الناحية الغلط.
   ⚠️ `.ltr` بتاعة `clients.css` مربوطة بـ`.cdb` فمابتوصلش هنا. */
.modal .hnt-ltr { direction: ltr; text-align: right; }

/* 🔴 `.modal-actions` كانت **مش موجودة في styles.css** — الزراير نزلت بلا أي
   تنسيق ولزقت في بعض. دي معرَّفة هنا فعلاً. */
.modal .hnt-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 18px; flex-wrap: wrap;
}

.modal .hnt-err {
  margin-top: 10px; padding: 8px 11px; border-radius: 8px; font-size: .82rem;
  border: 1px solid var(--danger); color: var(--danger);
}

/* ── الطباعة ───────────────────────────────────────────────────────────── */
/* زرار مالوش معنى على الورق — نفس قاعدة «تعديل» في جدول الاجتماعات. */
@media print {
  .hnt .hnt-tools,
  .hnt .hnt-filters,
  .hnt .hnt-act { display: none !important; }
  .hnt .hnt-card { break-inside: avoid; }
}

/* ── الموبايل ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hnt .hnt-top { flex-direction: column; align-items: stretch; }
  .hnt .hnt-search { min-width: 0; width: 100%; }
  .hnt .hnt-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}