/* REDESIGN-2026 · M0.3 — هيكل التطبيق: القائمة الجانبية (W-Nav) · الشريط السفلي (M-Tabs) ·
   الشريط العلوي (G01 / GM01) · الدخول (W01 / M01).

   الملف ده بيتحمّل بعد `styles.css`، وبيعيد رسم الهيكل القديم بنفس عناصره ومعرّفاته — فالـ26
   حزام فحص اللي ماشيين على `#moduleNav [data-nav-group]` و`.nav-button[data-module]`
   و`#bottomNav` لسه شغالين. الألوان من `--ty-*` (tokens.css) فبتتقلب مع الوضع الداكن. */

/* ================================================================ القائمة الجانبية (W-Nav) */
.app-view {
  grid-template-columns: 260px minmax(0, 1fr);
}

.side-rail {
  gap: 16px;
  padding: 20px 14px;
  border-inline-end: 1px solid var(--ty-line-soft);
  border-left: 0;
  background: var(--ty-surface);
  color: var(--ty-text);
  font-family: var(--ty-font-body);
}

.side-rail .rail-brand {
  gap: 10px;
  padding: 0 8px;
}
.side-rail .rail-brand .product-mark {
  width: 32px;
  height: 32px;
}
.side-rail .rail-brand strong {
  font-family: var(--ty-font-head);
  font-size: 20px;
  font-weight: 700;
}
.side-rail .rail-brand small {
  display: none;
}

.side-rail .project-switcher {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
}
.side-rail .project-switcher label {
  color: var(--ty-text-3);
  font-size: var(--ty-fs-xs);
}
.side-rail .project-switcher .ty-picker__caption {
  font-size: var(--ty-fs-xs);
}
.project-chip-host {
  display: none;
}
.side-rail .project-switcher select {
  width: 100%;
  min-height: var(--ty-touch);
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--ty-line);
  border-radius: 10px;
  background: var(--ty-bg);
  color: var(--ty-text);
  font-family: var(--ty-font-body);
  font-size: var(--ty-fs-s);
  font-weight: 600;
}
.side-rail .project-switcher strong {
  margin: 0;
  font-size: var(--ty-fs-s);
}
.side-rail .project-switcher span {
  color: var(--ty-text-3);
  font-size: var(--ty-fs-xs);
  line-height: 1.6;
}

.side-rail .rail-search {
  margin: 0;
  padding: 0 4px;
}
.side-rail .rail-search input {
  min-height: var(--ty-touch);
  border-color: var(--ty-line);
  border-radius: 10px;
  background: var(--ty-surface);
  font-family: var(--ty-font-body);
  font-size: var(--ty-fs-s);
}

.side-rail .rail-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.side-rail .nav-group {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
/* UI-CLARITY-1101: فاصل بين كل قسم والتاني — كانت الأقسام كلها سطور ورا بعض من غير حدّ يقول فين قسم بيبدأ. */
.side-rail .nav-group + .nav-group:not([data-section="account"]) {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ty-line-soft);
}

.side-rail .nav-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--ty-touch);
  padding: 0 10px;
  border: 0;
  border-radius: var(--ty-radius-s);
  background: transparent;
  color: var(--ty-text);
  font-family: var(--ty-font-body);
  font-size: var(--ty-fs-l);
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.side-rail .nav-group-head::after {
  content: none;
}
@media (hover: hover) and (pointer: fine) {
  .side-rail .nav-group-head:hover {
    background: var(--ty-surface-2);
    color: var(--ty-text);
  }
}
.side-rail .nav-group-head > b {
  display: flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.side-rail .nav-group-head > b svg {
  width: 22px;
  height: 22px;
}
.side-rail .nav-group-head > span {
  flex: 1;
  min-width: 0;
}
/* القسم اللي إنت فيه: أخضر فاتح ونص أخضر عريض — مُعلَّم بالشكل والوزن، مش باللون لوحده. */
.side-rail .nav-group.is-current > .nav-group-head {
  background: var(--ty-green-soft);
  color: var(--ty-green);
  font-weight: 700;
}
.side-rail .nav-group-head:focus-visible,
.side-rail .nav-button:focus-visible,
.bottom-nav button:focus-visible,
.tool-account:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: 2px;
}

.side-rail .nav-group-body {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px;
  /* ORGANIZE-1101: الإزاحة أقل لأن الأيقونة بقت هي اللي بترصّ الصفوف. */
  padding-inline-start: 14px;
}
.side-rail .nav-group.open > .nav-group-body {
  display: flex;
}

.side-rail .nav-button {
  display: flex;
  align-items: center;
  width: 100%;
  /* المرجع 34px؛ حد اللمس 48 غلب (SPEC §1.6). */
  min-height: var(--ty-touch);
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ty-text-2);
  font-family: var(--ty-font-body);
  font-size: var(--ty-fs-m);
  text-align: start;
  cursor: pointer;
}
/* ORGANIZE-1101 (أنس 2026-11-01): أيقونة لكل شاشة من نفس الطقم (`icons-screens.js`) — كانت مستخبية والشاشات كلام بس. */
.side-rail .nav-button > b {
  display: flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-inline-end: 10px;
  color: var(--ty-green);
}
.side-rail .nav-button > b svg {
  width: 22px;
  height: 22px;
}
.side-rail .nav-button small {
  display: none;
}
.side-rail .nav-button strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
/* MENU-FOLD: نفس «أكتر» في صفحة القسم على الموبايل (الفلوس، الموقع) — `<details>` بيفتح في مكانه. */
.nav-more-block > summary {
  display: flex;
  align-items: center;
  min-height: var(--ty-touch);
  padding: 0 16px;
  color: var(--ty-text-3);
  font-family: var(--ty-font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.nav-more-block > summary:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: -3px;
}
/* MENU-FOLD: «أكتر (٣)» تحت شغل القسم اليومي — أهدى من زرار شاشة، وبنفس حد اللمس. */
.side-rail .nav-more-toggle {
  width: 100%;
  min-height: var(--ty-touch);
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ty-text-3);
  font-family: var(--ty-font-body);
  font-size: var(--ty-fs-s);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .side-rail .nav-more-toggle:hover {
    background: var(--ty-surface-2);
    color: var(--ty-text);
  }
}
.side-rail .nav-more-toggle:focus-visible {
  outline: 3px solid var(--ty-green);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .side-rail .nav-button:hover {
    background: var(--ty-surface-2);
    color: var(--ty-text);
  }
}
.side-rail .nav-button.active {
  border: 0;
  background: transparent;
  color: var(--ty-text);
  box-shadow: none;
}
.side-rail .nav-button.active strong {
  font-weight: 700;
}
/* رابط فرعي تحت شاشة (الموردين تحت المشتريات): نفس صف الشاشة بس أصغر ومزاح. */
.side-rail .nav-sublink {
  display: flex;
  align-items: center;
  min-height: var(--ty-touch);
  padding: 0 8px;
  border-radius: 10px;
  color: var(--ty-text-2);
  /* NAV-ICONS-1102 (أنس 2026-11-02 «الموردين مكتوبة بخط صغير ومش عليها أيقونة»): نفس خط وأيقونة صفوف الشاشات. */
  font-family: var(--ty-font-body);
  font-size: var(--ty-fs-m);
  font-weight: 500;
  text-decoration: none;
  /* نفس `gap` بتاع `.nav-button` (styles.css) — من غيره الكلام كان أقرب للأيقونة بـ10px من جيرانه. */
  gap: 10px;
}
.side-rail .nav-sublink > b {
  display: flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-inline-end: 10px;
  color: var(--ty-green);
}
.side-rail .nav-sublink > b svg {
  width: 22px;
  height: 22px;
}
@media (hover: hover) and (pointer: fine) {
  .side-rail .nav-sublink:hover {
    background: var(--ty-surface-2);
    color: var(--ty-text);
  }
}
.side-rail .nav-sublink:focus-visible {
  outline: 2px solid var(--ty-green);
  outline-offset: 2px;
}
/* علامة «إنت هنا» جنب الشاشة المفتوحة — شكل مش لون بس. */
.side-rail .nav-button.active strong::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ty-green);
}

.side-rail .nav-badge,
.bottom-nav .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ty-danger);
  color: var(--ty-on-danger);
  font-size: var(--ty-fs-xs);
  font-style: normal;
  font-weight: 700;
}

/* بطاقة الحساب في آخر القائمة */
.side-rail .nav-group[data-section="account"] {
  margin-top: auto;
  padding-top: 12px;
}
.side-rail .nav-account-head {
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--ty-line-soft);
}
.side-rail .nav-group.is-current > .nav-account-head,
.side-rail .nav-group[data-section="account"].open > .nav-account-head {
  border: 1.5px solid var(--ty-green);
  background: var(--ty-green-soft);
  color: var(--ty-text);
}
.side-rail .nav-account-head > b {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* النص والسطح بيتقلبوا مع بعض — فالحروف مقروءة في الوضعين. */
  background: var(--ty-text);
  color: var(--ty-surface);
  font-size: var(--ty-fs-xs);
  font-weight: 700;
}
.side-rail .nav-account-head > span {
  display: flex;
  flex-direction: column;
}
.side-rail .nav-account-head strong {
  font-size: var(--ty-fs-s);
  overflow-wrap: anywhere;
}
.side-rail .nav-account-head small {
  color: var(--ty-text-3);
  font-size: var(--ty-fs-xs);
  font-weight: 400;
}
.side-rail .nav-group[data-section="account"] > .nav-group-body {
  padding-inline-start: 10px;
}
.side-rail .more-account {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.side-rail .more-account > button {
  flex: 1 1 110px;
  width: auto;
  min-height: var(--ty-touch);
  margin: 0;
}

.side-rail .nav-all-toggle {
  min-height: var(--ty-touch);
  margin-top: 8px;
  border-radius: var(--ty-radius-s);
  font-family: var(--ty-font-body);
}
.side-rail .nav-empty {
  padding: 12px 10px;
  color: var(--ty-text-3);
  font-size: var(--ty-fs-s);
}

/* الوضع التجريبي: صف فوق القائمة وساحة العمل مع بعض. */
.app-view > .ty-demo {
  grid-column: 1 / -1;
  order: -1;
}

/* ================================================================ الشريط العلوي (G01) */
.app-topbar {
  font-family: var(--ty-font-body);
}
.tool-help {
  min-width: var(--ty-touch);
  min-height: var(--ty-touch);
  font-size: 17px;
  font-weight: 700;
}
/* نسخة «دليل الشاشة» جوّه «⋯» للموبايل بس. */
.tool-help-menu {
  display: none;
}
/* نسخة «استيراد…» جوّه «⋯» للموبايل بس. */
.tool-import-menu {
  display: none;
}
/* ORGANIZE-1101: نسخة «بحث» جوّه «⋯» للموبايل بس. */
.tool-search-menu {
  display: none;
}
.tool-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ty-touch);
  height: var(--ty-touch);
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.tool-account b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ty-text);
  color: var(--ty-surface);
  font-family: var(--ty-font-body);
  font-size: var(--ty-fs-xs);
  font-weight: 700;
}
.conn-status.ty-conn.is-hidden {
  display: none;
}
.workspace-header .kicker {
  color: var(--ty-text-3);
  font-family: var(--ty-font-body);
}

/* زر قفل ورقة التنقل: بيظهر بس والورقة مفتوحة على الموبايل. */
.rail-close {
  display: none;
}

/* على الويب القائمة الجانبية هي الأقسام نفسها — الشريط السفلي للموبايل بس. */
@media (min-width: 1121px) {
  .bottom-nav {
    display: none;
  }
  /* ORGANIZE-1101: القائمة ثابتة على الويب — كل الشاشات مرسومة (shell.js بيفتح «أكتر» لوحده) وزرار «أقل» مستخبي. */
  .side-rail .nav-more-toggle {
    display: none;
  }
}
/* ORGANIZE-1101: زرار «الدليل» في الشريط العلوي — أيقونة + كلمة، بحدود عشان يتشاف وسط أدوات العرض. */
.tool-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ty-line) !important;
  border-radius: 10px;
  background: var(--ty-surface);
  color: var(--ty-text) !important;
  font-weight: 600;
}
.tool-guide > b {
  display: flex;
  width: 18px;
  height: 18px;
  color: var(--ty-green);
}
.tool-guide > b svg {
  width: 18px;
  height: 18px;
}

/* ================================================================ الموبايل (≤1120px) */
@media (max-width: 1120px) {
  /* الارتفاع الفعلي للشريط السفلي (8 + 62 + هامش الأمان + 1 للحد)؛ المشرف شريطه 88. qa-shell بيقيسه. */
  :root {
    --ty-tabbar-h: calc(71px + max(14px, env(safe-area-inset-bottom, 0px)));
  }
  :root:has(.bottom-nav--field) {
    --ty-tabbar-h: calc(74px + max(14px, env(safe-area-inset-bottom, 0px)));
  }

  .app-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-rail {
    border-inline-end: 0;
    padding: 16px 16px calc(100px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- الشريط السفلي (M-Tabs): 5 أقسام، 84px، النشط حبّة خضرا فاتحة */
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 4px;
    min-height: 84px;
    padding: 8px 8px max(14px, env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--ty-line);
    border-radius: 0;
    background: var(--ty-surface);
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
    font-family: var(--ty-font-body);
  }
  .bottom-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 62px;
    padding: 0 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ty-text-2);
    font-size: var(--ty-fs-xs);
    font-weight: 600;
    line-height: 1.3;
  }
  .bottom-nav button > b {
    display: flex;
    width: 26px;
    height: 26px;
    color: inherit;
  }
  .bottom-nav button > b svg {
    width: 26px;
    height: 26px;
  }
  .bottom-nav button.active {
    border: 0;
    background: var(--ty-green-soft);
    color: var(--ty-green);
    font-weight: 700;
  }
  .bottom-nav button.active > b {
    color: inherit;
  }
  .bottom-nav .nav-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 14px;
  }
  /* المشرف في الموقع: تبويبان كبار جنب بعض (88px، خط 17). */
  .bottom-nav.bottom-nav--field {
    gap: 8px;
    min-height: 88px;
    padding-inline: 16px;
  }
  .bottom-nav.bottom-nav--field button {
    flex-direction: row;
    gap: 10px;
    border-radius: var(--ty-radius-m);
    font-size: 17px;
  }

  .main-workspace {
    padding-bottom: calc(var(--ty-tabbar-h) + 24px);
  }

  /* AUDIT-1022 · 9: القائمة الجانبية كانت متكررة كاملة تحت محتوى كل صفحة على الموبايل والتابلت (بعد
     ما الشريط السفلي وورقته بقوا هما التنقّل). دلوقتي بتظهر بس كورقة؛ شاشات «الرئيسية» التانية من ضغطة
     على «الرئيسية» وانت فيها، و«كل الأقسام» جوّه ورقتها. */
  body:not(.more-open) .side-rail {
    display: none;
  }
  body.more-open[data-nav-sheet="home"] .side-rail button.nav-all-toggle {
    display: block;
    width: 100%;
  }

  /* ---- ورقة التنقل: القائمة الجانبية نفسها فوق الشاشة لحد الشريط السفلي */
  body.more-open .side-rail {
    inset: 0 0 var(--ty-tabbar-h) 0;
    z-index: 9;
    padding-bottom: 24px;
    background: var(--ty-bg);
  }
  .bottom-nav {
    z-index: 10;
  }
  body.more-open .side-rail .rail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-touch);
    height: var(--ty-touch);
    margin-inline-start: auto;
    border: 1px solid var(--ty-line);
    border-radius: var(--ty-radius-s);
    background: var(--ty-surface);
    color: var(--ty-text);
    font-size: 18px;
    cursor: pointer;
  }
  /* ورقة قسم واحد (ضغطة على تبويب): القسم ده بس، من غير بحث ولا «كل الأقسام». */
  body.more-open[data-nav-sheet] .side-rail .rail-search,
  body.more-open[data-nav-sheet] .side-rail .nav-all-toggle,
  body.more-open[data-nav-sheet="home"] .side-rail .nav-group:not([data-section="home"]),
  body.more-open[data-nav-sheet="site"] .side-rail .nav-group:not([data-section="site"]),
  body.more-open[data-nav-sheet="buy"] .side-rail .nav-group:not([data-section="buy"]),
  body.more-open[data-nav-sheet="money"] .side-rail .nav-group:not([data-section="money"]),
  body.more-open[data-nav-sheet="project"] .side-rail .nav-group:not([data-section="project"]),
  body.more-open[data-nav-sheet="account"] .side-rail .nav-group:not([data-section="account"]) {
    display: none;
  }
  body.more-open[data-nav-sheet] .side-rail .nav-group-head {
    min-height: 56px;
    font-family: var(--ty-font-head);
    font-size: 20px;
  }
  body.more-open[data-nav-sheet] .side-rail .nav-group-body {
    padding-inline-start: 0;
    gap: 8px;
  }
  body.more-open[data-nav-sheet] .side-rail .nav-button {
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--ty-line);
    border-radius: var(--ty-radius-m);
    background: var(--ty-surface);
    color: var(--ty-text);
    font-size: 16px;
  }
  body.more-open[data-nav-sheet] .side-rail .nav-button strong {
    font-weight: 600;
  }
  body.more-open .side-rail .nav-group[data-section="account"] {
    margin-top: 0;
  }

  /* ---- الشريط العلوي على الموبايل (GM01): الأدوات في سطر، وشريحة الاتصال تحت الرأس مباشرة. */
  .app-topbar {
    gap: 8px;
  }
  /* GM01: المشروع في رأس الشاشة على الموبايل (ورقة سفلية)؛ نسخة القايمة الجانبية بتتخبّى. */
  .project-chip-host {
    display: block;
    /* ORGANIZE-1101: زرار «الدليل» الجديد عصر اسم المشروع لـ 14px (qa-project-picker) — الزرار ياخد المساحة الباقية وحد أدنى 110px،
       و«الدليل» أيقونة بس على الموبايل، و«بحث» جوّه «⋯» (نفس نمط «دليل الشاشة»). الشريط يفضل سطر واحد. */
    flex: 2 1 110px;
    min-width: 110px;
  }
  .topbar-tools > #openSearchButton {
    display: none;
  }
  .tool-search-menu {
    display: block;
  }
  .tool-guide {
    min-width: var(--ty-touch);
    padding: 0 8px;
  }
  .tool-guide > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* الشريط سطر واحد (SCREEN-FIRST، ≤72px): زر المشروع ياخد مكان الدور — الدور فوق الصورة في «الحساب» (M14)
     وبيفضل في الـDOM لقارئ الشاشة والأحزمة (#roleName). */
  .topbar-identity {
    display: none;
  }
  .project-chip-host .ty-picker__button {
    min-height: var(--ty-touch);
    font-size: var(--ty-fs-s);
  }
  /* REVIEW-1107: اسم المشروع كان بيتقطع «كمبوند النخيل…» (98 من 152px). سطرين أحسن من كلمة مقطوعة
     (phone-ui-check) — الاسم بيلف جوّه الزرار، والزرار لسه 48px لاسم في سطرين. اسم أطول من سطرين
     بيتقص بعد السطر التاني والاسم كامل في title الزرار — تلات سطور كانت بتكبّر الشريط لـ79px (الحد 72). */
  .project-chip-host .ty-picker__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    text-wrap: balance;
  }
  /* على 360 الزرار 116px: الحشو الأقل بيكسب سطر (تلات سطور كانت بتكبّر الشريط). */
  .project-chip-host .ty-picker__button {
    gap: 4px;
    padding: 0 8px;
  }
  @media (max-width: 370px) {
    .project-chip-host .ty-picker__name {
      font-size: 13px;
    }
  }
  .side-rail .project-switcher .ty-picker {
    display: none;
  }
  .side-rail .project-switcher .ty-picker__caption {
    display: none;
  }
  .topbar-tools {
    flex: 0 1 auto;
    justify-content: flex-end;
    gap: 4px;
  }
  /* SCREEN-FIRST (قرار أنس): الشريط العلوي سطر واحد على الموبايل — الشاشة أولًا.
     فالشريحة وهي «متصل · كل حاجة اتبعتت» نقطة خضرا بس (النص لقارئ الشاشة)، وأول ما يبقى
     فيه حاجة تتقال — مقطوع، مستنية، مرفوض — بتنزل سطر كامل تحت الرأس (GM01). والمشرف زيهم (V2 · 7 تحت). */
  .topbar-tools > .conn-status {
    order: 10;
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
    border-radius: var(--ty-radius-s);
  }
  /* I4: «سطر كامل تحت الرأس» لازم يبقى سطر في الشريط نفسه. الشريحة ابن `.topbar-tools`، فكانت بتنزل سطر
     جوّه الأدوات والأدوات واخدة عرضها (279px عند المشرف على 375) فزر المشروع يتعصر لـ 28px واسمه يختفي.
     لما الشريحة تاخد سطر (أي دور وهي مش «متصل») الأدوات بتفكّ صندوقها: الأزرار جنب زر
     المشروع في السطر الأول، والشريحة سطر كامل تحتهم بنصها. ولازم تيجي بعد قاعدة `.topbar-tools` فوق. */
  .topbar-tools:has(> .conn-status:not(.is-hidden):not(.ty-conn--ok)) {
    display: contents;
  }
  .app-topbar:has(> .topbar-tools > .conn-status:not(.is-hidden):not(.ty-conn--ok)) > .project-chip-host {
    min-width: 96px;
  }
  /* FIX-ROUND V2 · 7 (قرار): شريط المشرف سطر واحد زي باقي الأدوار (كان 113px والباقي 71px): «كل حاجة اتبعتت»
     عنده بقت النقطة الخضرا نفسها، والنص لقارئ الشاشة. النص ما بيسعش السطر على تليفون (زر المشروع 96 + تلات
     أزرار 48 + النص 117 > 336)، وأول ما يبقى فيه حاجة تتقال — مقطوع، مستنية النت، مرفوض — الشريحة بتنزل
     سطر كامل بنصها زي ما كانت (القاعدتين فوق). على الويب النص مكتوب زي ما هو. */
  .topbar-tools > .conn-status.ty-conn--ok {
    order: 0;
    flex: 0 0 auto;
    min-height: 0;
    padding: 6px;
    border-radius: 50%;
  }
  .topbar-tools > .conn-status.ty-conn--ok .ty-conn__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* «خروج» من بطاقة الحساب (الصورة)، و«؟» من «⋯». */
  .tool-exit,
  .tool-help {
    display: none;
  }
  .tool-help-menu {
    display: block;
  }
  /* زر «استيراد…» بياخد ~105px من سطر واحد 390px فزر المشروع كان بيتقلص لحرف: على الموبايل الاستيراد من «⋯». */
  .topbar-tools > #importBoqButton {
    display: none;
  }
  .tool-import-menu:not(.is-hidden) {
    display: block;
  }

  /* وضع الميدان بيخبّي القائمة الجانبية (styles.css) — بس ورقة «الموقع» بتاعة المشرف هي
     القائمة دي نفسها، فلازم تظهر لما تتفتح. */
  body.field-mode.more-open .side-rail {
    display: flex;
  }
}

/* ================================================================ الدخول (W01 / M01)
   النموذج زي ما هو بمعرّفاته (كل أحزمة الدخول ماشية عليها). الجديد: لوحة الوعد جنبه على
   الويب، وسطر سجل التدقيق تحته، والخطوط والألوان من الرموز. */
.login-view {
  background: var(--ty-bg);
  font-family: var(--ty-font-body);
}
.login-shell.login-only .login-panel h2 {
  font-family: var(--ty-font-head);
  font-weight: 800;
}
.login-legal {
  margin: 4px 0 0;
  color: var(--ty-text-3);
  font-size: var(--ty-fs-xs);
  line-height: 1.7;
  text-align: center;
}
.login-promise {
  display: none;
}

@media (min-width: 1121px) {
  .login-view:has(.login-only) {
    display: block;
    padding: 0;
  }
  .login-shell.login-only {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(100vh, auto);
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }
  .login-shell.login-only .login-back {
    position: absolute;
    inset-block-start: 24px;
    inset-inline-start: 32px;
    margin: 0;
  }
  .login-shell.login-only .login-panel {
    width: min(440px, calc(100% - 64px));
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto;
    align-self: center;
    justify-self: center;
  }
  .login-shell.login-only .login-art {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 100vh;
    margin: 0;
    padding: 64px;
    border: 0;
    border-radius: 0;
    /* لوحة الهوية فحمي ثابت في الوضعين (زي الورق): مش من الرموز اللي بتتقلب. */
    background: #16231f;
    color: #f7f4ec;
    text-decoration: none;
  }
  .login-shell.login-only .login-art-shot,
  .login-shell.login-only #loginArtTitle {
    display: none;
  }
  .login-shell.login-only .login-art-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 460px;
    padding: 0;
  }
  .login-promise {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .login-promise strong {
    font-family: var(--ty-font-head);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.3;
  }
  .login-promise p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
  }
  .login-promise ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
  }
  .login-promise li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .login-promise li::before {
    content: "";
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #d9b36c;
  }
}

/* ---- PLATFORM-POLISH (أنس 2026-10-24: «الكلام الداخل في بعضه» والكلام الزيادة) ---- */
/* «الحساب الحالي / الدور / النطاق» فوق كان بيكرر بطاقة الحساب اللي تحت القايمة الجانبية. #roleName بيفضل في الـDOM. */
.topbar-identity {
  display: none;
}
/* «ثبّت التطبيق» في الشريط: زرار واحد و«×» صغيرة، من غير برواز حوالين الاتنين. */
/* خطوات آيفون/المتصفح المضمّن (عنوان + شرح) بتفضل في بروازها. */
.install-invite:has(.install-action) {
  width: auto;
  margin-top: 0;
  padding: 0;
  gap: 4px;
  flex-wrap: nowrap;
  border: 0;
  background: none;
}
.install-close {
  /* REVIEW-1103: كان 36px عرض — برّه `.topbar-tools` فقاعدة الـ48 ما بتوصلوش. */
  min-width: var(--touch, 48px);
  min-height: var(--touch, 48px);
  padding-inline: 8px;
  font-size: 1.2rem;
  line-height: 1;
}

/* UI-CLARITY-1101 (أنس 2026-11-01): قسم «الرئيسية» وفيه كذا شاشة (المالك، المهندس) كان بيتكتب مرتين تحت بعض —
   رأس القسم وأول شاشة فيه — على الويب وفي ورقة الموبايل. زرار «الرئيسية» اللي تحت الرأس بيستخبى: على الويب الرأس
   نفسه بيفتح الرئيسية (app.js)، وعلى الموبايل تبويب «الرئيسية» في الشريط السفلي بيفتحها. قسم الشاشة الواحدة (المشرف،
   المنصة) رأسه هو اللي مستخبي وزراره باين — القاعدة اللي تحت (NAV-HOME-ONCE)، فمستثنى هنا. `qa-shell` بيعدّ الورقة من غيره. */
.side-rail .nav-group[data-section="home"]:not(:has(> .nav-group-head[data-solo-module])) > .nav-group-body > .nav-button[data-module="command"] {
  display: none;
}

/* ---- NAV-HOME-ONCE (أنس 2026-10-24): «الرئيسية» مرة واحدة ----
   قسم بشاشة واحدة بنفس اسمه: رأسه (`[data-solo-module]`) بيستخبى، وزرار الشاشة الحقيقي بيفضل ظاهر وقابل للضغط
   بشكل الرأس — أيقونة وخط عريض ومن غير إزاحة. على الويب بس: على الموبايل القايمة ورقة
   بتخبّي رؤوس الأقسام كلها لوحدها (`body.more-open[data-nav-sheet]`). وزرار الحساب على الويب بيحط `data-nav-sheet`
   برضه — فالشرط القديم كان بيرجّع التكرار بعد الضغط على الصورة (لقطة qa-shell). */
@media (min-width: 1121px) {
  .side-rail .nav-group-head[data-solo-module] {
    display: none;
  }
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) > .nav-group-body {
    display: flex;
    padding: 0;
  }
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) .nav-button {
    gap: 12px;
    padding: 0 10px;
    color: var(--ty-text);
    font-size: 15px;
  }
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) .nav-button > b {
    display: flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) .nav-button > b svg {
    width: 22px;
    height: 22px;
  }
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) .nav-button strong {
    font-weight: 600;
  }
  /* الشاشة المفتوحة: أخضر فاتح زي رأس القسم الحالي، من غير نقطة «إنت هنا». */
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) .nav-button.active {
    background: var(--ty-green-soft);
    color: var(--ty-green);
  }
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) .nav-button.active strong {
    font-weight: 700;
  }
  .side-rail .nav-group:has(> .nav-group-head[data-solo-module]) .nav-button.active strong::before {
    content: none;
  }
}