/* ============================================================
   base.css — الأساسيات: الألوان، الخطوط، الأزرار، الحقول
   Design tokens, reset, typography, controls. RTL-first.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Surfaces & text — light theme */
  --bg:            #f4f1ea;
  --bg-grid:       #e6e0d4;
  --surface:       #ffffff;
  --surface-2:     #faf8f4;
  --surface-sunk:  #efece4;
  --border:        #ddd6c9;
  --border-strong: #c4baa8;

  --text:          #1c1917;
  --text-muted:    #6b6255;
  --text-faint:    #9a9184;

  --accent:        #8a6d3b;
  --accent-strong: #6b5329;
  --accent-soft:   #f0e7d6;
  --on-accent:     #ffffff;

  --danger:        #b42318;
  --danger-soft:   #fdeceb;
  --success:       #15803d;
  --success-soft:  #eaf6ee;

  /* Shape & depth */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgb(28 25 23 / .07), 0 1px 1px rgb(28 25 23 / .04);
  --shadow-md: 0 4px 12px rgb(28 25 23 / .09), 0 1px 3px rgb(28 25 23 / .05);
  --shadow-lg: 0 18px 40px rgb(28 25 23 / .16), 0 4px 12px rgb(28 25 23 / .08);

  /* Type */
  --font-head: "Noto Kufi Arabic", "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Noto Sans Arabic", "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;

  /* ---------- ألوان الأجيال / generation colours ----------
     لوحة من الصحراء، وترتيبها مقصود: دافئ ثم بارد ثم دافئ، فلا يجاور
     لونٌ لوناً من عائلته. كانت الأجيال الأربعة الأولى ذهبيةً وحمراء
     وبرتقالية وزيتونية — كلّها دافئة، فتتشابه حين تُخفَّف خلفيةً.

     A desert palette, deliberately alternating warm and cool so no
     generation sits beside a neighbour from its own family. The first
     four used to be gold, red, orange and olive — all warm, and
     indistinguishable once softened into a background wash. */
  --gen-0: #a06a12;   /* رمل ذهبي   — dune gold      */
  --gen-1: #37752a;   /* نخيل       — date palm      */
  --gen-2: #a63523;   /* حنّاء وطين  — henna clay     */
  --gen-3: #0e6b80;   /* واحة       — oasis water    */
  --gen-4: #7a3f96;   /* شفق        — desert dusk    */
  --gen-5: #6b6b16;   /* سَمُر       — acacia         */
  --gen-6: #1f5fa8;   /* سماء الظهيرة — noon sky      */
  --gen-7: #9c3660;   /* وردة الصحراء — desert rose   */
  --gen-8: #7a4520;   /* تمر        — dates          */
  --gen-9: #4b5563;   /* بازلت      — basalt         */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #17150f;
    --bg-grid:       #241f16;
    --surface:       #221e17;
    --surface-2:     #2a251c;
    --surface-sunk:  #1b1811;
    --border:        #3b342a;
    --border-strong: #554c3d;

    --text:          #f2ede3;
    --text-muted:    #a9a091;
    --text-faint:    #7b7263;

    --accent:        #d3b076;
    --accent-strong: #e8cb9c;
    --accent-soft:   #33291a;
    --on-accent:     #17150f;

    --danger:        #f2887f;
    --danger-soft:   #3a1f1c;
    --success:       #6cc48a;
    --success-soft:  #1c2f22;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-md: 0 4px 14px rgb(0 0 0 / .55);
    --shadow-lg: 0 20px 46px rgb(0 0 0 / .65);

    --gen-0: #dfb45c;   /* رمل ذهبي   */
    --gen-1: #7fc06a;   /* نخيل       */
    --gen-2: #ef8a72;   /* حنّاء       */
    --gen-3: #5cc0d6;   /* واحة       */
    --gen-4: #c79ae8;   /* شفق        */
    --gen-5: #cfcf62;   /* سَمُر       */
    --gen-6: #7ab2f0;   /* سماء       */
    --gen-7: #ef8ab0;   /* وردة الصحراء */
    --gen-8: #d1a17a;   /* تمر        */
    --gen-9: #a3b0c0;   /* بازلت      */
  }
}

/* التبديل اليدوي للوضع الليلي / manual dark toggle */
:root[data-theme="dark"] {
  --bg:            #17150f;
  --bg-grid:       #241f16;
  --surface:       #221e17;
  --surface-2:     #2a251c;
  --surface-sunk:  #1b1811;
  --border:        #3b342a;
  --border-strong: #554c3d;

  --text:          #f2ede3;
  --text-muted:    #a9a091;
  --text-faint:    #7b7263;

  --accent:        #d3b076;
  --accent-strong: #e8cb9c;
  --accent-soft:   #33291a;
  --on-accent:     #17150f;

  --danger:        #f2887f;
  --danger-soft:   #3a1f1c;
  --success:       #6cc48a;
  --success-soft:  #1c2f22;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-md: 0 4px 14px rgb(0 0 0 / .55);
  --shadow-lg: 0 20px 46px rgb(0 0 0 / .65);

  --gen-0: #dfb45c;   /* رمل ذهبي   */
  --gen-1: #7fc06a;   /* نخيل     */
  --gen-2: #ef8a72;   /* حنّاء     */
  --gen-3: #5cc0d6;   /* واحة     */
  --gen-4: #c79ae8;   /* شفق    */
  --gen-5: #cfcf62;   /* سَمُر     */
  --gen-6: #7ab2f0;   /* سماء     */
  --gen-7: #ef8ab0;   /* وردة الصحراء */
  --gen-8: #d1a17a;   /* تمر    */
  --gen-9: #a3b0c0;   /* بازلت    */
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

img { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

/* الخاصية hidden يجب أن تغلب على أي display في هذا الملف.
   بدونها يبقى زر مخفيّ ظاهراً، لأن `.btn { display: inline-flex }`
   المكتوبة هنا تتقدّم على قاعدة المتصفّح `[hidden] { display: none }` —
   وهذا ما كان يُظهر زر «جدّ أعلى» للمساعد رغم إخفائه.

   `hidden` must beat every display rule in this file: an author-level
   `.btn { display: inline-flex }` overrides the browser's own
   `[hidden] { display: none }`, which left the "add apex ancestor"
   button visible to assistants even after it was hidden. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* تبديل النصوص المختصرة على الشاشات الضيقة */
.wide-only { display: inline; }
.narrow-only { display: none; }
@media (max-width: 560px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .hide-narrow { display: none !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3. App shell ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
/* لازم: قاعدة display في class تتغلّب على خاصية hidden وحدها */
.app[hidden] { display: none; }

/* منطقة العمل: الشجرة + اللوحة الجانبية */
.workspace {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  /* الشريط يصنع سياق تكديس، فقائمة نتائج البحث بداخله محبوسة تحت هذا
     الرقم مهما رفعناها. لذلك يعلو الشريط على مفتاح الأجيال (٢٥) وأدوات
     العرض (٣٠)، ويبقى تحت الحجاب (١٠٠) واللوحة (١٢٠).
     The bar creates a stacking context, so the search dropdown inside it
     is capped by this value however high its own z-index. It must sit
     above the legend (25) and toolbar (30), below the veil and panel. */
  z-index: 70;
  flex: none;
}

.topbar__brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* اسم القبيلة في منتصف الشريط: البحث على جهة والأزرار على الأخرى،
   والاسم يأخذ ما بينهما ويتوسّطه. `order` تضبط الترتيب في الاتجاهين.
   The tribe name sits centred between the search and the buttons; it
   takes the space between them, and `order` keeps the arrangement right
   in both text directions. */
.topbar--centred { justify-content: space-between; }
.topbar--centred .search          { order: 1; }
.topbar--centred .topbar__brand   { order: 2; flex: 1; align-items: center; text-align: center; }
.topbar--centred .topbar__actions { order: 3; }

.topbar__title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__subtitle {
  font-size: .76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s, opacity .15s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }

.btn--danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); }
.btn--danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }

.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--surface-sunk); border-color: var(--border); }

.btn--icon {
  padding: 0;
  width: 38px;
  min-height: 38px;
  font-size: 1rem;
}

.btn--sm { min-height: 32px; padding: 5px 10px; font-size: .8rem; }
.btn--block { width: 100%; }

/* ---------- 5. Fields ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-block-end: 14px; }

.field__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.input, .textarea, .select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.textarea { resize: vertical; min-height: 76px; line-height: 1.6; }

.field__hint { font-size: .74rem; color: var(--text-faint); }

.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1; }

/* ---------- 6. Misc ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon { font-size: 2.6rem; opacity: .55; }
.empty-state h2 { font-size: 1.15rem; color: var(--text); }
.empty-state p { margin: 0; max-width: 40ch; font-size: .9rem; }

.spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--border-strong);
  border-block-start-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* التنبيهات / toasts */
.toasts {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 400;
  pointer-events: none;
  width: min(92vw, 420px);
}
:dir(ltr) .toasts { transform: translateX(-50%); }

.toast {
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  animation: toast-in .22s ease-out;
}
.toast--error   { border-color: var(--danger);  background: var(--danger-soft);  color: var(--danger); }
.toast--success { border-color: var(--success); background: var(--success-soft); color: var(--success); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}