/* ==========================================================================
   دليل التجهيز النظامي — `#/guide` + درج زرار الهيدر.
   البادئة `lg-` **متأكَّد إنها فاضية** قبل ما تتكتب (`grep` على كل CSS وJS):
   كلاس باسم متحجوز بيخطف تنسيق صاحبه في صمت — حصل مرتين في المشروع.
   والألوان كلها رموز `styles.css`، فالمظهر الليلي بيمشي معاها بلا قاعدة زيادة.
   ========================================================================== */

/* ── الدرج (زرار الهيدر) — نفس هندسة درج النماذج بالظبط ─────────────────── */
.lg-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: lg-fade .18s ease;
}
.lg-sheet {
  position: fixed; top: var(--topbar-real); bottom: 0;
  inset-inline-end: 0; inset-inline-start: auto;
  width: min(680px, 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: lg-slide .2s ease;
}
@keyframes lg-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lg-slide { from { transform: translateX(-24px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .lg-scrim, .lg-sheet { animation: none; } }

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

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

/* ── التابات ────────────────────────────────────────────────────────────── */
.lg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.lg-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;
}
.lg-tabs button:hover { color: var(--ink); border-color: var(--primary); }
.lg-tabs button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ── خانة البحث ─────────────────────────────────────────────────────────── */
.lg-search { position: relative; margin-bottom: 10px; }
.lg-search .s-ico { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.lg-search input { padding-inline-start: 42px; padding-inline-end: 38px; height: 46px; border-radius: 13px; }
.lg-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;
}
.lg-clear:hover { background: var(--card-2); color: var(--ink); }
/* 🔴 **`display` بيكسب على `hidden`** — والقاعدة فوق مدّية الزرار `display: grid`،
   فمن غير السطر ده زرار المسح بيفضل ظاهر على خانة فاضية. */
.lg-clear[hidden] { display: none; }

/* ── شريط اسم العميل والمشروع ───────────────────────────────────────────── */
.lg-who {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
}
.lg-who .lg-k { font-size: .78rem; font-weight: 700; color: var(--muted); }
.lg-who input { height: 38px; border-radius: 10px; flex: 1 1 150px; min-width: 0; }
.lg-who .lg-who-hint { flex-basis: 100%; font-size: .74rem; color: var(--faint); }

/* ── شبكة العائلات ──────────────────────────────────────────────────────── */
.lg-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin-bottom: 14px; }
.lg-fam {
  text-align: start; cursor: pointer; background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px;
  transition: border-color .15s, background .15s, transform .12s;
}
.lg-fam:hover { border-color: var(--primary); transform: translateY(-1px); }
.lg-fam[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.lg-fam b { display: block; font-family: var(--font-display); font-size: .95rem; }
.lg-fam span { display: block; font-size: .74rem; opacity: .82; margin-top: 2px; }

/* ── رأس العائلة ────────────────────────────────────────────────────────── */
.lg-famhead {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.lg-famhead h3 { font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 2px; }
.lg-famhead .lg-ex { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.lg-acts { margin: 0 0 10px; padding-inline-start: 18px; font-size: .84rem; color: var(--ink); }
.lg-acts li { margin-bottom: 3px; }
.lg-famnote {
  background: var(--accent-tint); border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-xs); padding: 8px 11px; font-size: .82rem; margin-bottom: 10px;
}

/* ── المراحل ────────────────────────────────────────────────────────────── */
.lg-stage { margin-bottom: 8px; }
.lg-stage-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 16px 0 8px; }
.lg-stage-h b { font-family: var(--font-display); font-size: 1rem; }
.lg-stage-h span { font-size: .78rem; color: var(--muted); }

/* ── البطاقة ────────────────────────────────────────────────────────────── */
.lg-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px; overflow: hidden;
}
.lg-card-h {
  width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: none; border: none; color: inherit; cursor: pointer;
  padding: 12px 14px; text-align: start; font: inherit;
}
.lg-card-h:hover { background: var(--card-2); }
.lg-card-h b { font-family: var(--font-display); font-size: .96rem; flex: 1 1 auto; }
.lg-card-h .lg-chev { color: var(--faint); transition: transform .15s; }
.lg-card[data-open="1"] .lg-chev { transform: rotate(-90deg); }
.lg-card-org { flex-basis: 100%; font-size: .76rem; color: var(--muted); }
.lg-card-b { padding: 12px 14px 14px; border-top: 1px solid var(--line); }

/* ── الشارات ────────────────────────────────────────────────────────────── */
.lg-tag {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.lg-tag.m { background: var(--ok-tint); color: var(--ok); border-color: var(--ok); }
.lg-tag.r { background: var(--warn-tint); color: var(--warn); border-color: var(--warn); }
.lg-tag.req { background: var(--primary-tint); color: var(--primary); border-color: var(--primary); }
.lg-tag.opt { background: var(--card-2); color: var(--muted); border-color: var(--line-strong); }
.lg-tag.st { background: var(--info-tint); color: var(--info); border-color: var(--info); }

/* ── شبكة الحقائق (من ينفذ · الرسوم · المدة · الصلاحية) ──────────────────── */
.lg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.lg-fact { background: var(--card-2); border-radius: var(--radius-xs); padding: 8px 10px; }
.lg-fact .k { display: block; font-size: .72rem; color: var(--faint); font-weight: 700; margin-bottom: 2px; }
.lg-fact .v { font-size: .83rem; }

/* ── القوائم داخل البطاقة ───────────────────────────────────────────────── */
.lg-sec { margin-bottom: 12px; }
.lg-sec > h4 { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.lg-sec ul, .lg-sec ol { margin: 0; padding-inline-start: 19px; font-size: .85rem; }
.lg-sec li { margin-bottom: 4px; }
.lg-sec.warn ul { color: var(--danger); }

/* ── الروابط ────────────────────────────────────────────────────────────── */
.lg-links { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.lg-link {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: .84rem; font-weight: 600; color: var(--primary); text-decoration: none;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-xs);
  padding: 7px 10px; word-break: break-word;
}
.lg-link:hover { border-color: var(--primary); }
.lg-src { font-size: .72rem; color: var(--faint); word-break: break-all; }
.lg-src a { color: inherit; }

/* ── أزرار نسخ الرسائل ──────────────────────────────────────────────────── */
.lg-msgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ── معاينة الرسالة ─────────────────────────────────────────────────────── */
.lg-prev {
  background: var(--card-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-xs);
  padding: 10px 12px; margin-top: 8px; font-size: .84rem; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}
.lg-prev b { font-weight: 700; }

/* ── جدول المنصات ──────────────────────────────────────────────────────── */
/* ⚠️ **الحاوية هي اللي بتسكرول مش الصفحة** — جدول أعرض من الشاشة بلا أب
   بيسكرول بيمطّ المستند أفقيًا، وده العرَض اللي اتكرر تلات مرات في المشروع. */
.lg-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.lg-tablewrap table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 460px; }
.lg-tablewrap th, .lg-tablewrap td { text-align: start; padding: 9px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lg-tablewrap th { background: var(--card-2); font-size: .78rem; color: var(--muted); }
.lg-tablewrap td a { color: var(--primary); word-break: break-all; }

/* ── قواعد العمل ────────────────────────────────────────────────────────── */
.lg-rule {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; margin-bottom: 7px;
}
.lg-rule b { display: block; font-family: var(--font-display); font-size: .92rem; margin-bottom: 3px; }
.lg-rule span { font-size: .84rem; color: var(--muted); }

/* ── شريط «آخر تحقق» ────────────────────────────────────────────────────── */
.lg-asof {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--primary-tint); border-radius: var(--radius-xs);
  padding: 8px 12px; font-size: .8rem; margin-bottom: 12px;
}

/* ── نتائج البحث ───────────────────────────────────────────────────────── */
.lg-hit { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }

@media (max-width: 560px) {
  .lg-fams { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .lg-facts { grid-template-columns: 1fr 1fr; }
}