/* =====================================================================
   hub-shell.css — إطار صفحات الأنظمة: الشريط الجانبي + منطقة المحتوى + الشريط السفلي في الجوال.
   ملف واحد لكل الصفحات بدل نسخة داخل كل صفحة.

   ترتيب <head> في كل صفحة:
     ds.css ← hub-shell.css ← components.css ← <style> الصفحة ← theme.js

   الصفحة تضبط هذه المتغيرات في :root الخاص بها فقط إن احتاجت قيمة مختلفة:
     --side-w      عرض الشريط الجانبي                 (الافتراضي 238px)
     --side-pad    حشوة الشريط الجانبي                (الافتراضي 18px 14px)
     --main-max    أقصى عرض للمحتوى على الكمبيوتر   (الافتراضي 1600px)
     --main-pad    حشوة المحتوى على الكمبيوتر        (الافتراضي 26px 30px)
     --main-margin هامش المحتوى؛ "0 auto" يوسّطه في الشاشات العريضة، و"0" يبقيه ملاصقًا للشريط (الافتراضي 0 auto)
     --main-pad-m  حشوة المحتوى على الجوال           (الافتراضي 16px 16px + مساحة الشريط السفلي)
     --nav-ws      أسماء الشريط السفلي في الجوال: normal = تنكسر لسطرين، nowrap = سطر واحد مع «…» (الافتراضي normal)

   نقطة التحوّل إلى الجوال (الشريط السفلي): 820px.
   الألوان كلها من ds.css: الشريط بلون --frame، والمختار --selected مع شريط --nav-bar، والمرور --hover.
   ===================================================================== */

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink)}

.shell{display:flex;min-height:100vh}

/* الشريط الجانبي */
.side{width:var(--side-w,238px);background:var(--frame);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;padding:var(--side-pad,18px 14px);position:sticky;top:0;height:100vh}
.side-logo{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.side-logo .ic{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand-text);display:flex;align-items:center;justify-content:center;font-size:20px}
.side-logo .ic svg{width:22px;height:22px}
.side-logo b{font-size:15.5px;line-height:1.2}
.side-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.navgroup{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:14px 13px 6px}
.snav{position:relative;display:flex;align-items:center;gap:11px;text-align:start;padding:11px 13px;border-radius:10px;border:none;background:none;font-weight:700;font-size:14.5px;color:var(--body);cursor:pointer;width:100%;font-family:inherit;text-decoration:none}
.snav:hover{background:var(--hover);color:var(--ink)}
.snav.active{background:var(--selected);color:var(--brand-strong)}
.snav.active svg{color:var(--nav-bar)}
/* شريط صغير بجانب العنصر المختار حتى لا يعتمد على اللون وحده */
.snav.active::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--nav-bar)}
.snav svg{width:19px;height:19px;flex-shrink:0}

/* أسفل الشريط: المستخدم + المظهر + رجوع للأنظمة */
.side-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:2px}
/* بلوك المستخدم المكتوب في الصفحة (#whoami). البلوك الذي ينشئه theme.js بنفسه (data-av-created) له تنسيقه هناك. */
.side-user:not([data-av-created]){padding:8px 10px}
.side-user b{display:block;font-size:13.5px}
.side-user span{font-size:12px;color:var(--muted)}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;font-size:14px;font-weight:700;color:var(--body);text-decoration:none;border:none;background:none;width:100%;cursor:pointer;font-family:inherit;text-align:start}
.side-link svg{width:19px;height:19px;flex-shrink:0}
.side-link:hover{background:var(--hover);color:var(--ink)}

/* منطقة المحتوى */
.main{flex:1;padding:var(--main-pad,26px 30px);max-width:var(--main-max,1600px);margin:var(--main-margin,0 auto);width:100%}

/* شاشة الحجب (غير مسجّل / غير مصرّح) */
.gate{max-width:440px;margin:80px auto;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:40px 28px;box-shadow:var(--shadow-card)}

/* الجوال: الشريط الجانبي يصير شريطًا سفليًا */
@media(max-width:820px){
  .shell{flex-direction:column}
  .main{padding:var(--main-pad-m,16px 16px calc(70px + env(safe-area-inset-bottom)));max-width:none}
  .side{position:fixed;inset:auto 0 0 0;width:100%;height:auto;flex-direction:row;align-items:stretch;gap:0;padding:6px 0 max(6px,env(safe-area-inset-bottom));border-inline-end:none;border-top:1px solid var(--line);box-shadow:none;z-index:200}
  .side-logo,.side-user,.navgroup{display:none}
  .side-nav,.side-foot{display:contents}
  .snav,.side-link{flex:1;min-width:0;flex-direction:column;gap:3px;padding:6px 2px;font-size:11px;font-weight:600;line-height:1.25;text-align:center;justify-content:center;align-items:center;border-radius:0;background:none;white-space:var(--nav-ws,normal);overflow:hidden}
  .snav:hover,.side-link:hover{background:none}
  .snav.active{background:none;color:var(--brand-text)}
  .snav.active::before{inset-inline-start:30%;inset-inline-end:30%;top:0;bottom:auto;width:auto;height:3px}
  .snav span,.side-link span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .snav svg,.side-link svg{width:23px;height:23px}
}