/* ═══ هوية قمم في «شجرة» — المصدر الواحد لرموز الواجهة ═══════════════════
   القيم منقولةٌ **حرفياً** من `design-system/src/tokens.css` في مستودع
   `ibrav6/toptech-guards` (بيتُ الهوية، قرار 2026-09-10: مصدرٌ واحد لكل
   منتجات المجموعة). لا قيمة لونٍ أو زاويةٍ أو فراغٍ مخترعةٍ هنا.

   ‼ **ولماذا ملفٌّ لا نسخةٌ في كل صفحة**: كانت الرموز مكرّرةً في ثلاثة
   مواضع (`home.html` و`admin.py` وصفحتا الفرد والعائلة بألوانٍ مخترعةٍ
   أصلاً)، ونسخةُ `admin.py` **مكسورة**: كتلة `[data-theme='dark']` فيها
   فارغة، فزرُّ المظهر لا يفعل شيئاً ولا يوجد زرٌّ أصلاً. نسخةٌ ثانيةٌ
   للمصدر تعني هويّتين.

   ‼ **وما لا يدخل هنا**: ألوان لوحة الشجرة (خشب · ورقة · زهرة · سماء) —
   تلك قرار المالك في `docs/DESIGN.md` §الشجرة على الويب (2026-09-06)
   وتبقى في `tree.html`. هذا الملفّ للكروم حول اللوحة لا للّوحة.

   ولا تُجلب المكوّنات الجاهزة (`@toptech/ui`): حزمةُ React وبناءُ npm،
   و«شجرة» صفحاتٌ ثابتة يخدمها بايثون بلا مكتبةٍ ولا CDN (`CLAUDE.md`).
   فالمأخوذ الرموزُ وحدها، وهي عقد الهوية. */

/* ‼ `hidden` يُخفي دائماً (بلاغ المالك 2026-10-05: زرّ «اربط واتساب العائلة» فوق الـQR): `.btn{display:inline-flex}`
   يغلب `display:none` الذي يضعه المتصفّح للسمة، فـ`go.hidden = true` لا يُخفي الزرّ. كانت تُرقَّع عنصراً عنصراً. */
.tt-page [hidden] { display: none !important; }

/* الخط مستضافٌ ذاتياً — الخادم بلا إنترنتٍ صادر، وأي جلبٍ من CDN يسقط بصمت. */
@font-face { font-family:"Plex"; src:url("/static/vendor/IBMPlexSansArabic-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/static/vendor/IBMPlexSansArabic-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/static/vendor/IBMPlexSansArabic-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/static/vendor/IBMPlexSansArabic-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

/* ── الرموز: فاتح ──────────────────────────────────────────────────────── */
:root {
  --background: 48 33% 97%; --foreground: 45 5% 16%;
  --card: 0 0% 100%; --card-foreground: 45 5% 16%;
  --popover: 0 0% 100%; --popover-foreground: 45 5% 16%;
  --primary: 225 80% 49%; --primary-foreground: 0 0% 100%;
  --secondary: 45 18% 92%; --secondary-foreground: 45 5% 16%;
  --muted: 45 18% 94%; --muted-foreground: 45 5% 40%;
  --accent: 224 100% 96%; --accent-foreground: 225 80% 35%;
  --destructive: 0 72% 43%; --destructive-foreground: 0 0% 100%;
  --border: 45 12% 85%; --input: 45 5% 53%; --ring: 225 80% 49%;
  --tt-success: 154 75% 27%; --tt-success-surface: 150 42% 94%;
  --tt-warning: 31 85% 29%; --tt-warning-surface: 43 100% 94%;
  --tt-danger-surface: 0 85% 97%;
  --tt-data-1: 225 80% 49%; --tt-data-2: 12 90% 56%; --tt-data-3: 173 65% 35%; --tt-data-4: 266 70% 55%;
  --radius: .75rem;
  --tt-space-1: .25rem; --tt-space-2: .5rem; --tt-space-3: .75rem; --tt-space-4: 1rem; --tt-space-6: 1.5rem; --tt-space-8: 2rem; --tt-space-12: 3rem;
  --tt-shadow: 0 12px 36px -12px hsl(45 10% 15% / .2);
  --tt-layer-overlay: 40; --tt-layer-dialog: 50; --tt-layer-popup: 60; --tt-layer-tooltip: 70;
  --tt-duration: 160ms; --tt-rail: 15rem; --tt-rail-mini: 4.5rem;
  color-scheme: light;
  /* علامة قمم في «شجرة»: حبرُ العلامة يتبع النصّ لا لوناً ثابتاً. */
  --ink-mark: 45 6% 16%;
  --container: 1120px;
}

/* ── الرموز: داكن ──────────────────────────────────────────────────────
   الكتلة نفسها مرّتين: مرّةً لاختيارٍ صريح (`data-theme=dark`) ومرّةً
   لتفضيل النظام حين لا اختيار. وبلا الثانية يُقرأ الموقع أبيضَ في وضعٍ
   داكنٍ حتى يلمس الزائر الزرّ. */
:root[data-theme='dark'] {
  --background: 60 3% 15%; --foreground: 43 30% 94%;
  --card: 60 2% 19%; --card-foreground: 43 30% 94%;
  --popover: 60 2% 19%; --popover-foreground: 43 30% 94%;
  --primary: 223 100% 77%; --primary-foreground: 225 70% 15%;
  --secondary: 48 4% 25%; --secondary-foreground: 43 30% 94%;
  --muted: 48 4% 22%; --muted-foreground: 45 10% 72%;
  --accent: 225 30% 26%; --accent-foreground: 223 100% 85%;
  --destructive: 0 90% 78%; --destructive-foreground: 0 65% 16%;
  --border: 48 4% 31%; --input: 45 5% 55%; --ring: 223 100% 77%;
  --tt-success: 151 60% 72%; --tt-success-surface: 152 25% 20%;
  --tt-warning: 42 95% 76%; --tt-warning-surface: 38 30% 21%;
  --tt-danger-surface: 0 30% 23%; --tt-shadow: 0 16px 44px -12px #0008;
  --tt-data-1: 223 100% 77%; --tt-data-2: 12 90% 68%; --tt-data-3: 173 60% 65%; --tt-data-4: 266 90% 78%;
  color-scheme: dark;
  --ink-mark: 43 30% 94%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background: 60 3% 15%; --foreground: 43 30% 94%;
    --card: 60 2% 19%; --card-foreground: 43 30% 94%;
    --popover: 60 2% 19%; --popover-foreground: 43 30% 94%;
    --primary: 223 100% 77%; --primary-foreground: 225 70% 15%;
    --secondary: 48 4% 25%; --secondary-foreground: 43 30% 94%;
    --muted: 48 4% 22%; --muted-foreground: 45 10% 72%;
    --accent: 225 30% 26%; --accent-foreground: 223 100% 85%;
    --destructive: 0 90% 78%; --destructive-foreground: 0 65% 16%;
    --border: 48 4% 31%; --input: 45 5% 55%; --ring: 223 100% 77%;
    --tt-success: 151 60% 72%; --tt-success-surface: 152 25% 20%;
    --tt-warning: 42 95% 76%; --tt-warning-surface: 38 30% 21%;
    --tt-danger-surface: 0 30% 23%; --tt-shadow: 0 16px 44px -12px #0008;
    --tt-data-1: 223 100% 77%; --tt-data-2: 12 90% 68%; --tt-data-3: 173 60% 65%; --tt-data-4: 266 90% 78%;
    color-scheme: dark;
    --ink-mark: 43 30% 94%;
  }
}

/* ── الترويسةُ الواحدة (`ui.topbar`): الرئيسية واللوحة والبطاقات والخريطة ────────────
   ‼ **عامّةٌ بأسماءٍ لا تتكرّر** (`tt-top` …) لا مقصورةٌ على `.tt-page`: صفحةُ الجذر والخريطة
   تحملانها أيضاً (بلاغ المالك 2026-10-04: «الشريط الي فوق بتاع الي بره غير الي جوه»)، ولكلٍّ
   منهما `.nav` و`.brand` و`#top` خاصّة — فاسمٌ مشترك كان سيغلب قاعدتها (الدرس أعلاه).
   ‼ **الترويسة صفٌّ واحد — بالقياس لا بالذوق** (سؤال المالك 2026-09-16 عن التفافها على جوّاله).
   قِيس على 390 بكسل: المتاح 342، والمطلوب 362 — **عشرون بكسلاً** هي الفرق، فالتفّت. والمعالجةُ
   في الأسباب لا في الالتفاف: «شجرة العائلة» ⇐ «الشجرة» (‑39)، وحشوةُ عناصر القائمة 12 ⇐ 9
   بكسل (‑24) تحت 721 بكسل. والالتفافُ يبقى مسموحاً شبكةَ أمانٍ لشاشةٍ أضيق أو خطٍّ مكبَّر.
   ‼ **وعرضُها واحدٌ في كلّ صفحة** (`--container`) ولو ضاق ما تحتها: كانت تتبع عرضَ الصفحة،
   فتقفز العلامةُ بين الرئيسية واللوحة. */
.tt-top { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground));
  font-family: "Plex", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; font-size: 16px; line-height: 1.75;
  -webkit-font-smoothing: antialiased; }
.tt-top-in { box-sizing: border-box; max-width: var(--container); margin-inline: auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 8px; min-height: 60px; flex-wrap: wrap; }
.tt-top a { color: inherit; text-decoration: none; }
.tt-top :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 6px; }
.tt-brand { display: flex; align-items: center; gap: 9px; }
.tt-brand svg { display: block; flex: none; }
.tt-brand strong { font-size: 15px; font-weight: 700; }
.tt-nav { margin-inline-start: auto; display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.tt-nav a, .tt-theme {
  box-sizing: border-box; margin: 0; padding: 0 9px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; border-radius: 9px; font: inherit; font-size: 14px;
  color: hsl(var(--muted-foreground)); cursor: pointer;
}
.tt-nav a:hover, .tt-theme:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.tt-nav a[aria-current="page"] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-weight: 600; }
/* بابُ الزائر («تسجيل») زرٌّ أساسيّ — وما سواه روابطُ هادئة */
.tt-nav a.tt-cta { min-height: 40px; padding: 0 16px; background: hsl(var(--primary));
  color: hsl(var(--primary-foreground)); font-weight: 600; }
.tt-nav a.tt-cta:hover { background: hsl(var(--primary) / .9); color: hsl(var(--primary-foreground)); }
.tt-theme[hidden] { display: none; }
/* بحثُ الخريطة في الترويسة كبحث اللوحة: صفٌّ ثانٍ تحت العلامة على الجوّال */
.tt-q { box-sizing: border-box; flex: 1; min-width: 0; max-width: 340px; margin: 0 16px; height: 38px;
  padding: 4px 12px; border-radius: 10px; border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 16px; }
.tt-q[hidden] { display: none; }
/* ‼ وبحثُ الترويسة كذلك: من اليمين ولو قلبته إضافةُ متصفّح (طلب المالك 2026-10-04) */
.tt-q:not([dir="ltr"]) { direction: rtl !important; text-align: right !important; }
@media (max-width: 680px) {
  .tt-q { order: 10; flex-basis: 100%; max-width: 100%; margin: 6px 0 0; }
}
@media (min-width: 721px) {
  .tt-top-in { gap: 14px; min-height: 64px; }
  .tt-nav a, .tt-theme { padding: 0 12px; }
  .tt-q { font-size: 14px; }
}

/* ── ما بعد الرموز مقصورٌ على صفحات القشرة (`.tt-page`) ─────────────────
   ‼ **الدرس الذي فرض هذا النطاق (كُشف على جوّال المالك 2026-09-12)**: كانت
   هذه القواعد عامّة، فـ`.top nav { display:flex }` — أولويّتُه (0,1,1) —
   غلب قاعدةَ `home.html` على الجوّال `.nav { display:none }` — أولويّتُها
   (0,1,0). فلم تُخفَ روابط التنقّل، وصارت الترويسة ثلاثة صفوف، وطفت أزرارُها
   فوق نصّ البطل. صفحةُ الجذر وصفحةُ التسجيل تملكان تخطيطهما، وما تحتاجانه
   من هنا **الرموزُ والخطّ** أعلاه لا المكوّنات.

   فالعقد: ما فوق عامٌّ لكل صفحة — الرموزُ والخطّ **والترويسةُ الواحدة** بأسمائها `tt-…` التي
   لا تتكرّر (المالك 2026-10-04) — وما تحت لمن يحمل `.tt-page`، وهو `app/ui.py: shell` وحده. */

body.tt-page {
  margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: "Plex", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px; line-height: 1.75;   /* العربية تحتاج تنفّساً رأسياً للحركات */
  -webkit-font-smoothing: antialiased;
}
.tt-page, .tt-page *, .tt-page *::before, .tt-page *::after { box-sizing: border-box; }
.tt-page h1, .tt-page h2, .tt-page h3 { line-height: 1.45; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.tt-page p { margin: 0; }
.tt-page ul, .tt-page ol { margin: 0; padding: 0; list-style: none; }
.tt-page a { color: inherit; text-decoration: none; }
.tt-page :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 6px; }
.tt-page .num, .tt-page .tabular { font-variant-numeric: tabular-nums; }

.tt-page .wrap { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.tt-page .wrap-narrow { max-width: 900px; }
.tt-page .small { font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.tt-page .muted { color: hsl(var(--muted-foreground)); }

.tt-page main { padding: 34px 0 72px; }

/* ── البطاقة ───────────────────────────────────────────────────────────── */
.tt-page .card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.tt-page .card.pad { padding: var(--tt-space-6); margin-bottom: 18px; }
.tt-page .card h2 { font-size: 18px; }
.tt-page .card > p.sub { color: hsl(var(--muted-foreground)); font-size: 14px; margin-top: 5px; }

.tt-page .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tt-page .stat b { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-page .stat span { font-size: 13px; color: hsl(var(--muted-foreground)); }

/* ── النماذج ───────────────────────────────────────────────────────────── */
.tt-page form.row { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .tt-page form.row.two { grid-template-columns: 1fr 1fr; align-items: end; } }
.tt-page label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; text-align: start; }
.tt-page input, .tt-page select, .tt-page textarea {
  font: inherit; font-size: 16px;      /* ‼ دون 16px يزوّم سفاري عند التركيز */
  min-height: 46px; padding: 0 12px; border-radius: 10px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background));
  color: hsl(var(--foreground)); text-align: start;
}
/* ‼ **عنصرُ شبكةٍ لا ينكمش تلقائياً**: `min-width` له `auto` أي عرضُ محتواه
   الطبيعي، وعرضُ `input` الطبيعي عشرون محرفاً — وأكثر مع تباعد الحروف في
   حقل الرمز. فيخرج النموذج عن الشاشة يساراً بلا أن يُرى (قِيس 2026-09-12
   على 390 بكسل: scrollWidth 417 في /admin/login و415 في /admin). ولا
   يُداوى بـ`overflow:hidden` على الصفحة: ذاك إخفاءُ العَرَض. */
.tt-page form.row, .tt-page form.row > *, .tt-page label { min-width: 0; }
.tt-page input:not([type="checkbox"]):not([type="radio"]), .tt-page select, .tt-page textarea {
  width: 100%; min-width: 0; max-width: 100%;
}
/* ‼ **حقلٌ يُكتب لاتينياً وتلميحُه عربي**: `dir="auto"` لا يكفي (قِيس 2026-09-21) — الحقل
   الفارغ بلا نصٍّ يحدّد اتجاهه فيقع على ltr ويلصق التلميح العربي يساراً. فالفارغ (والتلميح
   ظاهر) rtl، وما إن يُكتب فيه شيءٌ يعود ltr للبريد واسم الدخول. */
.tt-page input.ltr-field { direction: ltr; }
.tt-page input.ltr-field:placeholder-shown { direction: rtl; }
.tt-page textarea { min-height: 64px; padding: 9px 12px; line-height: 1.6; }
.tt-page .scroll-list { overflow-y: auto; overscroll-behavior: contain; }
.tt-page .log-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 12px; }
.tt-page .log-filter .btn { flex: none; white-space: nowrap; }
.tt-page .req-row { align-items: flex-start; }
.tt-page .req-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0;
  font-size: 13.5px; }
.tt-page .req-facts dt { color: hsl(var(--muted-foreground)); }
.tt-page .req-facts dd { margin: 0; }
.tt-page .req-facts a { color: hsl(var(--primary)); font-weight: 600; }
.tt-page .req-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* ‼ أفعالُ طلب التسجيل وشاشةُ الرفض ونموذجُ التعديل (طلب المالك 2026-10-04) */
.tt-page .req-actions form { margin: 0; }
/* ‼ مسئولو الطلبات: خانةٌ للإضافة وشاراتٌ بـ«×» (طلب المالك 2026-10-04) */
.tt-page .contact-box { margin-top: 12px; }
.tt-page .contact-add { display: flex; gap: 8px; }
.tt-page .contact-add input { flex: 1; text-align: left; }
.tt-page .contact-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tt-page .contact-chips li { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 12px;
  border-radius: 999px; background: hsl(var(--muted)); font-size: 14px; font-variant-numeric: tabular-nums; }
.tt-page .contact-chips button { width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: hsl(var(--muted-foreground)); font-size: 17px; line-height: 1; cursor: pointer; }
.tt-page .contact-chips button:hover { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
/* ‼ الأزرارُ في مكانها نفسه في كلّ صفّ: عمودٌ بعرضٍ ثابتٍ في طرف الصفّ */
.tt-page .req-row .req-actions { flex: 0 0 auto; justify-content: flex-end; align-self: center; }
/* ‼ موقعٌ عربيّ: خانةُ البحث من اليمين ولو قلبتها إضافةُ متصفّحٍ إلى اليسار (أسلوبُها المضمَّن يُغلب بـ!important) */
.tt-page input[type="search"]:not([dir="ltr"]) { direction: rtl !important; text-align: right !important; }
.tt-page .btn[disabled] { opacity: .45; cursor: not-allowed; }
.tt-page .rq-dlg { border: 0; border-radius: 14px; padding: 20px; width: min(440px, 92vw);
  background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.tt-page .rq-dlg::backdrop { background: rgb(0 0 0 / .45); }
.tt-page .rq-dlg h3 { margin: 0 0 4px; }
.tt-page .rq-dlg label { display: block; margin-top: 10px; }
.tt-page .rq-dlg textarea { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
.tt-page .rq-dlg-acts { display: flex; gap: 8px; margin-top: 14px; }
.tt-page .rq-edit h3 { margin-top: 0; }
.tt-page .rq-dob { display: flex; gap: 6px; margin-top: 4px; min-width: 0; width: 100%; }
/* ‼ يغلب `width:100%` العامّ (بخصوصيّته نفسها): التقويمُ بقدره، والسنةُ والشهرُ واليومُ يقتسمون الباقي */
.tt-page .rq-dob > select, .tt-page .rq-dob > input:not([type="checkbox"]):not([type="radio"]) { width: auto; }
.tt-page .rq-dob > select { flex: 0 0 auto; }
.tt-page .rq-dob > input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 0; width: 0; text-align: center; }
.tt-page .rq-dob > input[name="dy"] { flex-grow: 1.6; }
.tt-page .rq-place { border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 10px 14px 14px; margin: 14px 0; }
.tt-page .rq-place legend { font-weight: 700; padding: 0 6px; }
.tt-page .rq-opt { display: flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 8px; }
.tt-page .rq-pick { position: relative; margin: 6px 0 4px; padding-inline-start: 26px; }
.tt-page .rq-pick[hidden] { display: none; }
.tt-page .rq-find { width: 100%; box-sizing: border-box; }
.tt-page .rq-sugg { border: 1px solid hsl(var(--border)); border-radius: 10px; margin-top: 4px; overflow: hidden;
  background: hsl(var(--card)); max-height: 260px; overflow-y: auto; }
.tt-page .rq-sugg[hidden] { display: none; }
.tt-page .rq-sugg button { display: block; width: 100%; text-align: start; border: 0; border-bottom: 1px solid hsl(var(--border));
  background: none; padding: 9px 12px; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.tt-page .rq-sugg button:hover { background: hsl(var(--muted)); }
.tt-page .rq-sugg .small { padding: 9px 12px; }
.tt-page .acct-head { display: flex; align-items: center; gap: 14px; }
.tt-page .acct-head small { display: block; color: hsl(var(--muted-foreground)); font-size: 13px; margin-top: 2px; }
.tt-page .acct-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: hsl(var(--primary) / .14); color: hsl(var(--primary)); font-size: 20px; font-weight: 700; flex-shrink: 0; }
.tt-page .acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.tt-page .acct-box { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 12px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); }
.tt-page .acct-box h3 { margin: 0; font-size: 14.5px; }
.tt-page .acct-box form { margin: 0; }
.tt-page .acct-inline { display: flex; gap: 8px; }
.tt-page .acct-inline input { flex: 1; }
.tt-page .acct-line { margin: 0; font-size: 14px; word-break: break-all; }
.tt-page .member-row[hidden] { display: none; }
.tt-page .member-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tt-page .member-actions form { margin: 0; }
.tt-page .upload { display: grid; gap: 8px; }
.tt-page .upload-title { font-size: 13.5px; font-weight: 600; }
.tt-page .upload-drop {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 16px;
  border: 1.5px dashed hsl(var(--border)); border-radius: 12px; background: hsl(var(--muted));
  cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.tt-page .upload-drop:hover, .tt-page .upload-drop:focus-within { border-color: hsl(var(--ring)); }
.tt-page .upload-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer;
}
.tt-page .upload-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-size: 18px; font-weight: 700;
}
.tt-page .upload-hint { font-size: 15px; font-weight: 600; word-break: break-all; }
.tt-page .upload-types { font-size: 12.5px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.tt-page input:focus-visible, .tt-page select:focus-visible, .tt-page textarea:focus-visible { border-color: hsl(var(--ring)); }

.tt-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background var(--tt-duration), color var(--tt-duration);
}
.tt-page .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tt-page .btn-quiet { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.tt-page .btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.tt-page .btn-ok { background: hsl(var(--tt-success-surface)); color: hsl(var(--tt-success)); }
.tt-page .btn-no { background: hsl(var(--tt-warning-surface)); color: hsl(var(--tt-warning)); }
.tt-page .btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
/* ‼ زرٌّ `disabled` بلا مظهرٍ للتعطيل يُقرأ عاملاً فيُضغط ولا يحدث شيء —
   قِيس بالعين على صفحة الواتساب: زرُّ التجربة أزرقُ كامل وتحته سطرٌ يقول
   إنه معطّل. */
.tt-page .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── القوائم والرسائل ──────────────────────────────────────────────────── */
.tt-page .list li { display: flex; gap: 12px; align-items: center; padding: 13px 0;
  border-top: 1px solid hsl(var(--border)); font-size: 14.5px; flex-wrap: wrap; }
.tt-page .list li:first-child { border-top: 0; }
.tt-page .list .grow { flex: 1; min-width: 200px; }
.tt-page .list small { display: block; color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.tt-page .empty { color: hsl(var(--muted-foreground)); font-size: 14.5px; padding: 10px 0; }

/* ── منتقي الجروب: بحثٌ + قائمةٌ تُمرَّر، كلُّ حرفٍ يُضيّقها ───────────────── */
.tt-page .gp { margin-top: 14px; border: 1px solid hsl(var(--border)); border-radius: 12px; overflow: hidden; }
.tt-page .gp-search { width: 100%; border: 0; border-bottom: 1px solid hsl(var(--border)); border-radius: 0;
  padding: 12px 14px; font-size: 15px; background: hsl(var(--muted) / .5); }
.tt-page .gp-search:focus { outline: none; background: hsl(var(--background)); }
.tt-page .gp-list { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow-y: auto; }
.tt-page .gp-list li { padding: 0; }
.tt-page .gp-item { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 14px; border: 0;
  background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.tt-page .gp-item:hover, .tt-page .gp-item:focus-visible { background: hsl(var(--muted)); outline: none; }
.tt-page .gp-item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tt-page .gp-item small { display: block; color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.tt-page .gp-item mark { background: hsl(var(--tt-warning-surface)); color: inherit; border-radius: 3px; }
.tt-page .gp-item.is-current { font-weight: 700; }
.tt-page .gp-count { padding: 6px 14px; font-size: 12.5px; color: hsl(var(--muted-foreground));
  border-top: 1px solid hsl(var(--border)); }

.tt-page .note { padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.tt-page .note-ok { background: hsl(var(--tt-success-surface)); color: hsl(var(--tt-success)); }
.tt-page .note-warn { background: hsl(var(--tt-warning-surface)); color: hsl(var(--tt-warning)); }
.tt-page .note-quiet { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

.tt-page code.code { font-family: inherit; font-weight: 700; letter-spacing: .14em; direction: ltr;
  display: inline-block; background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
  padding: 3px 10px; border-radius: 7px; }
.tt-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr;
  font-size: 13px; word-break: break-all; unicode-bidi: isolate; }

/* حالةُ اتّصالٍ: نقطةٌ ونصّ — اللون وحده لا يكفي لمن لا يميّزه. */
.tt-page .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.tt-page .dot-on { background: hsl(var(--tt-success)); }
.tt-page .dot-off { background: hsl(var(--muted-foreground)); }

/* شريطُ البحث في الترويسة: الباب الوحيد إلى أيّ فرد، فلا يكون في قاع صفحة. */
.tt-page .findbar { display: flex; gap: 8px; align-items: center; margin: 0; flex: 1; max-width: 340px; margin-inline: 16px; }
.tt-page .findbar input { flex: 1; min-width: 0; height: 38px; font-size: 13.5px; padding: 4px 12px; }
.tt-page .findbar .btn { flex: none; height: 38px; padding: 0 12px; }
@media (max-width: 680px) {
  .tt-page .findbar { order: 10; width: 100%; max-width: 100%; margin-inline: 0; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-page *, .tt-page *::before, .tt-page *::after { transition: none !important; animation: none !important; }
}
.tt-page .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.tt-page .pill-ok { background: hsl(var(--tt-success, 142 60% 40%) / .15); color: hsl(var(--tt-success, 142 60% 40%)); }
.tt-page .pill-warn { background: hsl(var(--tt-warning, 38 90% 50%) / .15); color: hsl(var(--tt-warning, 38 90% 45%)); }
.tt-page details > summary { list-style: none; cursor: pointer; display: inline-flex; }
.tt-page details > summary::-webkit-details-marker { display: none; }
.tt-page .pill-no { background: hsl(var(--tt-danger, 0 70% 50%) / .14); color: hsl(var(--tt-danger, 0 70% 45%)); }
.tt-page .pill-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.tt-page a.pill { text-decoration: none; }
.tt-page .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-page .chip { padding: 6px 12px; border-radius: 999px; border: 1px solid hsl(var(--border));
  font-size: 13.5px; font-weight: 600; color: hsl(var(--foreground)); text-decoration: none; }
.tt-page .chip-on { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tt-page .plat-list { display: grid; gap: 0; }
.tt-page .plat-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px;
  border-top: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); text-decoration: none; }
.tt-page .plat-row:first-child { border-top: 0; }
.tt-page .plat-row:hover { background: hsl(var(--muted) / .6); }
.tt-page .plat-row .grow { flex: 1; min-width: 0; }
.tt-page .plat-row small { display: block; color: hsl(var(--muted-foreground)); font-size: 12.5px; margin-top: 2px; }
.tt-page .thread { display: grid; gap: 8px; }
.tt-page .msg { padding: 10px 12px; border-radius: 12px; max-width: 85%; }
.tt-page .msg p { margin: 4px 0 0; white-space: pre-wrap; }
.tt-page .msg small { color: hsl(var(--muted-foreground)); font-size: 12px; }
.tt-page .msg-owner { background: hsl(var(--primary) / .1); justify-self: start; }
.tt-page .msg-family { background: hsl(var(--muted)); justify-self: end; }
.tt-page .inline-details { display: inline-block; }
.tt-page .inline-details > summary { list-style: none; cursor: pointer; }
.tt-page .inline-details > summary::-webkit-details-marker { display: none; }
.tt-page .findbar { position: relative; }
.tt-page .find-hits { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30; max-height: 70vh;
  overflow-y: auto; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; min-width: 280px; }
.tt-page .find-hits a { display: block; padding: 8px 10px; border-radius: 8px; color: hsl(var(--foreground));
  text-decoration: none; }
.tt-page .find-hits a:hover { background: hsl(var(--muted)); }
.tt-page .find-hits small { display: block; color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.tt-page .find-label { margin: 8px 10px 2px; font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); }
.tt-page .find-none { margin: 8px 10px; font-size: 13.5px; color: hsl(var(--muted-foreground)); }
.tt-page .find-hits .find-all { font-size: 13px; font-weight: 600; color: hsl(var(--primary)); }
.tt-page .person-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tt-page .btn-tree { background: hsl(142 55% 38%); border-color: hsl(142 55% 38%); color: #fff; }
.tt-page .btn-tree:hover { background: hsl(142 55% 32%); }
.tt-page .kin-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.tt-page .kin-table th { width: 90px; text-align: start; vertical-align: top; padding: 10px 8px;
  color: hsl(var(--muted-foreground)); font-weight: 600; border-top: 1px solid hsl(var(--border)); }
.tt-page .kin-table td { padding: 10px 8px; border-top: 1px solid hsl(var(--border)); line-height: 1.9; }
.tt-page .kin-table tr:first-child th, .tt-page .kin-table tr:first-child td { border-top: 0; }
.tt-page .kin-table a { color: hsl(var(--primary)); font-weight: 600; text-decoration: none; }
.tt-page .datefield { position: relative; display: grid; gap: 6px; }
.tt-page .datefield[hidden] { display: none; }
.tt-page .df-label { font-size: 13.5px; font-weight: 600; }
.tt-page .df-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px;
  padding: 0 12px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--background));
  color: hsl(var(--foreground)); font: inherit; font-size: 15px; cursor: pointer; text-align: start; }
.tt-page .df-btn:hover, .tt-page .df-btn[aria-expanded="true"] { border-color: hsl(var(--ring)); }
.tt-page .df-empty .df-val { color: hsl(var(--muted-foreground)); }
.tt-page .df-btn svg { color: hsl(var(--muted-foreground)); flex: none; }
.tt-page .datefield.df-missing .df-btn { border-color: hsl(var(--tt-danger, 0 72% 43%)); }
.tt-page .df-pop { position: absolute; top: 100%; inset-inline-start: 0; z-index: 40; margin-top: 6px; width: 300px;
  max-width: calc(100vw - 32px); padding: 10px; border: 1px solid hsl(var(--border)); border-radius: 12px;
  background: hsl(var(--card)); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.tt-page .df-pop[hidden] { display: none; }
.tt-page .df-cal { display: flex; margin-bottom: 8px; border: 1px solid hsl(var(--border)); border-radius: 9px; overflow: hidden; }
.tt-page .df-cal button { flex: 1; border: 0; background: transparent; padding: 6px; font: inherit; font-size: 13px;
  font-weight: 600; color: hsl(var(--muted-foreground)); cursor: pointer; }
.tt-page .df-cal button.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tt-page .df-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.tt-page .df-nav select { flex: 1; min-height: 34px; padding: 0 6px; font-size: 13px; border-radius: 8px; width: auto; }
.tt-page .df-nav .df-y { flex: 0 0 84px; }
.tt-page .df-arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: hsl(var(--foreground)); cursor: pointer; }
.tt-page .df-arrow:hover { background: hsl(var(--muted)); }
.tt-page .df-week, .tt-page .df-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.tt-page .df-week span { font-size: 11px; color: hsl(var(--muted-foreground)); padding-bottom: 4px; }
.tt-page .df-grid button { height: 34px; border: 0; border-radius: 8px; background: transparent; font: inherit;
  font-size: 13px; color: hsl(var(--foreground)); cursor: pointer; }
.tt-page .df-grid button:hover { background: hsl(var(--muted)); }
.tt-page .df-grid button.today { box-shadow: inset 0 0 0 1px hsl(var(--ring)); }
.tt-page .df-grid button.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 700; }
.tt-page .df-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid hsl(var(--border)); }
.tt-page .df-act { border: 0; background: transparent; color: hsl(var(--primary)); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.tt-page .df-act:hover { background: hsl(var(--muted)); }
.tt-page .df-other { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.tt-page .df-inline { flex: 1 1 200px; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.tt-page .df-inline .df-btn { min-height: 40px; font-size: 14px; }
.tt-page .wife-only { display: grid; gap: 10px; }
.tt-page .wife-only[hidden], .tt-page .not-wife[hidden], .tt-page .wf-family[hidden], .tt-page .wf-other[hidden] { display: none; }
.tt-page .seg { display: flex; gap: 16px; flex-wrap: wrap; }
.tt-page .seg label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tt-page .seg input { width: auto; min-height: 0; }
.tt-page .wf-family { position: relative; }
.tt-page .cb-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 100; padding: 16px; }
.tt-page .cb-back[hidden] { display: none; }
.tt-page .cb-card { background: hsl(var(--card)); border-radius: 16px; padding: 20px; max-width: 380px; width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.tt-page .cb-card h3 { margin: 0 0 8px; }
.tt-page .cb-actions { display: flex; gap: 10px; margin-top: 16px; }
.tt-page .dash { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.tt-page .dash-side { position: sticky; top: 84px; background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 14px; box-shadow: var(--tt-shadow-sm, 0 1px 3px rgba(0,0,0,.06)); overflow: hidden; }
.tt-page .side-head { padding: 16px; border-bottom: 1px solid hsl(var(--border)); font-weight: 700; font-size: 15px; }
.tt-page .side-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.tt-page .side-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px;
  color: hsl(var(--muted-foreground)); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.tt-page .side-link:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.tt-page .side-link.active { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-weight: 700; }
.tt-page .side-label { flex: 1; }
.tt-page .side-badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.tt-page .side-badge.alert { background: hsl(var(--tt-danger, 0 72% 43%) / .14); color: hsl(var(--tt-danger, 0 72% 43%)); }
.tt-page .side-link.active .side-badge { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tt-page .side-owner { margin: 4px 8px 10px; width: calc(100% - 16px); }
.tt-page .dash-main { min-width: 0; }
.tt-page .dash-main .card { margin-bottom: 18px; }
.tt-page .tab-pane[hidden] { display: none; }
.tt-page .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.tt-page .link-grid > .card { min-width: 0; }
@media (max-width: 860px) {
  .tt-page .dash { grid-template-columns: 1fr; gap: 14px; }
  .tt-page .dash-side { position: static; }
  .tt-page .side-head { display: none; }
  .tt-page .side-nav { flex-direction: row; overflow-x: auto; padding: 6px; }
  .tt-page .side-link { padding: 8px 14px; border-radius: 999px; background: hsl(var(--muted)); white-space: nowrap; }
  .tt-page .side-link.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
  .tt-page .side-link svg { display: none; }
  .tt-page .side-owner { display: none; }
  .tt-page .log-filter .df-inline { flex: 1 1 100%; }
  .tt-page .log-filter .btn { flex: 1 1 auto; }
}