/* =====================================================================
   ونس — الطبقة الاحترافية (Claude 2026-11-15)
   نفس نظام «حلال» (هيدر عايم، كروت بيضا بظل ناعم، شريط تحت كبسولة،
   قائمة «المزيد» بأيقونات تطبيقات، شكل حسب النظام، وضع خفة على اللمس)
   بلون براند ونس الأخضر #095440 + لمسة دهبي.
   بيتحمّل بعد app.css من layout.php. CSS بس — مفيش تغيير في أي منطق.
   ===================================================================== */
:root {
  --w-green:#095440; --w-green-2:#0f6a50; --w-green-hi:#24936d; --w-deep:#063a2c;
  --w-gold:#d9b15f; --w-gold-2:#b88a3c; --w-cream:#f6eed6;
  --w-bg:#f6f4ee; --w-surface:#ffffff; --w-ivory:#fbf9f3; --w-line:#e9e3d4; --w-line-2:#f0ebdf;
  --w-ink:#17251f; --w-muted:#6b7570;
  --w-sh:0 1px 0 rgba(23,37,31,.03), 0 10px 28px -12px rgba(23,37,31,.14);
  --w-sh-lg:0 22px 44px -22px rgba(9,84,64,.38), 0 2px 6px rgba(23,37,31,.05);
  --w-ease:cubic-bezier(.22,.8,.24,1); --w-soft:cubic-bezier(.33,1,.68,1);
  --w-head-h:64px; --w-gap:8px;
  /* the floating header: gap + height + gap (+ notch) — every sticky/fixed offset reads --top */
  --top:calc(var(--w-gap) + var(--w-head-h) + var(--w-gap) + env(safe-area-inset-top));
  accent-color:var(--w-gold-2); caret-color:var(--w-green);
}
@media (max-width:900px) { :root { --w-head-h:56px; } }

/* ---------- 1) إحساس الأبليكيشن ---------- */
html { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; scrollbar-color:rgba(9,84,64,.32) transparent; }
::selection { background:rgba(217,177,95,.38); color:#10231b; }
html body.admin-suite { background:var(--w-bg); color:var(--w-ink); }
:root body :is(a,button,summary,label,select,.btn) { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
:root body :is(strong,b,.v,.kpi .v,.stat .v,td,.money) { font-variant-numeric:tabular-nums lining-nums; }
:root body :is(h1,h2,h3) { text-wrap:balance; }
/* ضغطة محسوسة */
:root body :is(.btn,button,.chipl,.linkbtn) { transition:transform .12s ease, background-color .15s, box-shadow .15s, border-color .15s, color .15s; }
:root body :is(.btn,button,.chipl):active:not(:disabled) { transform:scale(.97); }
/* hover بس مع الماوس */
@media (hover:none) { :root body :is(.card,.kpi,.stat,.btn):hover { transform:none; } }
:root body :is(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--w-gold); outline-offset:2px; }
/* خط التحميل اللي فوق لما تنتقل لصفحة (من pro.js) */
#wpProg { position:fixed; top:0; right:0; left:0; height:3px; z-index:100000; pointer-events:none; transform-origin:right; transform:scaleX(0); opacity:0;
  background:linear-gradient(90deg, var(--w-gold), var(--w-green-hi)); transition:transform .5s var(--w-ease), opacity .2s; }
#wpProg.go { opacity:1; transform:scaleX(.72); transition:transform 6s cubic-bezier(.1,.7,.1,1), opacity .1s; }
#wpProg.done { opacity:0; transform:scaleX(1); transition:transform .2s, opacity .3s .15s; }
/* انتقال ناعم بين الصفحات — الكمبيوتر بس (على اللمس بيتقّل) */
@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:wp-out .14s ease both; }
  ::view-transition-new(root) { animation:wp-in .2s var(--w-ease) both; }
  @keyframes wp-out { to { opacity:0; } }
  @keyframes wp-in { from { opacity:0; transform:translateY(5px); } }
}

/* ---------- 2) الهيدر العايم ---------- */
html body.admin-suite .topbar {
  position:sticky; top:calc(var(--w-gap) + env(safe-area-inset-top)); z-index:60;
  height:var(--w-head-h); margin:calc(var(--w-gap) + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  padding:0 10px; border-radius:calc(var(--w-head-h) / 2); gap:8px;
  background:linear-gradient(135deg, #0d6a50 0%, var(--w-green) 52%, #074533 100%) !important;
  border:1px solid rgba(232,210,154,.28); box-shadow:0 14px 30px -18px rgba(6,58,44,.75), inset 0 1px 0 rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html body.admin-suite .topbar::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120px 60px at 92% 0%, rgba(232,210,154,.22), transparent 70%), radial-gradient(140px 70px at 6% 120%, rgba(36,147,109,.35), transparent 70%); }
html body.admin-suite .topbar > * { position:relative; }
html body.admin-suite [hidden] { display:none !important; }
html body.admin-suite .topbar :is(.iconbtn,.installbtn,button:not(.gs-close)) {
  min-width:40px; height:40px; border-radius:999px !important; place-items:center;
  background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.18) !important; color:#f6eed6 !important; box-shadow:none !important;
}
html body.admin-suite .topbar .gsearch { height:42px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); }
html body.admin-suite .topbar .gsearch input { color:#fff; }
html body.admin-suite .topbar .gsearch input::placeholder { color:rgba(246,238,214,.75); }
html body.admin-suite .topbar .who { color:#fff; font-weight:700; }
html body.admin-suite .topbar .who small { color:rgba(246,238,214,.75); }
@media (hover:hover) and (pointer:fine) { html body.admin-suite .topbar :is(.iconbtn,button:not(.gs-close)):hover { background:rgba(255,255,255,.18) !important; } }
/* موبايل: الهيدر العايم أضيق — أزرار 36px، والاسم بيستخبى (موجود في «حسابي» من قائمة المزيد) */
@media (max-width:900px) {
  html body.admin-suite .topbar { gap:4px; padding:0 6px; margin-left:max(8px, env(safe-area-inset-left)); margin-right:max(8px, env(safe-area-inset-right)); }
  html body.admin-suite .topbar :is(.iconbtn,.installbtn,button:not(.gs-close)) { min-width:36px; width:36px; height:36px; padding:0; }
  html body.admin-suite .topbar .brand { min-width:0; flex:0 1 auto; overflow:hidden; }
}
@media (max-width:430px) { html body.admin-suite .topbar .who { display:none; } }
/* الصفحة تحت الهيدر: مفيش فراغ زيادة */
html body.admin-suite .shell { min-height:calc(100dvh - var(--top)); }
/* البحث على الموبايل بيفتح فوق الهيدر */
body.gs-mobile .gsearch { padding-top:env(safe-area-inset-top); border-radius:0 !important; }

/* ---------- 3) القائمة الجانبية على الكمبيوتر والآيباد بالعرض: فاتحة زي «انتقل إلى» في حلال ---------- */
@media (min-width:901px) {
  html body.admin-suite .side {
    /* --app-h = the height really visible on this device (set in layout.php); dvh is the fallback */
    position:sticky; top:var(--top); height:calc(100vh - var(--top)); height:calc(var(--app-h, 100dvh) - var(--top)) !important; max-height:calc(var(--app-h, 100dvh) - var(--top)) !important;
    margin:0 0 0 0; padding:6px 12px calc(110px + env(safe-area-inset-bottom)) !important;
    background:transparent !important; border:0 !important; box-shadow:none !important; overscroll-behavior:contain;
  }
  html body.admin-suite .side .navgroup > summary, html body.admin-suite .side .navgroup[open] > summary { color:var(--w-gold-2) !important; }
  html body.admin-suite .side .ng-title { color:var(--w-gold-2) !important; font-weight:800; letter-spacing:0; }
  html body.admin-suite .side .navcount { color:#a49a85 !important; background:none !important; }
  html body.admin-suite .side .navgroup > summary::after { color:#b7ab92 !important; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) {
    background:var(--w-surface) !important; border:1px solid var(--w-line) !important; color:#2b3a33 !important; box-shadow:0 1px 0 rgba(23,37,31,.02) !important;
  }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) > span { color:#2b3a33 !important; font-weight:600; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem).on { background:linear-gradient(150deg, var(--w-green-2), var(--w-green)) !important; border-color:var(--w-green) !important; box-shadow:0 10px 20px -12px rgba(9,84,64,.7) !important; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem).on > span { color:#fff !important; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem).on::before { display:none !important; }
  @media (hover:hover) and (pointer:fine) {
    html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem):not(.on):hover { border-color:#cfdccf !important; background:#f8fbf8 !important; transform:translateY(-1px); }
  }
}

/* أيقونة «تطبيق» زجاج أخضر — في القائمة الجانبية وقائمة المزيد */
html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) .wanas-icon3d,
html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) > svg.ic {
  position:relative; box-sizing:border-box; width:34px; height:34px; padding:7px; border-radius:11px; flex:none;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 52%), linear-gradient(150deg, var(--w-green-hi), var(--w-green) 58%, var(--w-deep)) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 10px rgba(0,0,0,.14), 0 6px 12px -8px rgba(6,58,44,.8) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; filter:none !important; color:#fff;
  --i3d-hi:#ffffff; --i3d-mid:#f6ead0; --i3d-low:#ead39a; --i3d-depth:rgba(0,26,18,.35);
}
html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem).on .wanas-icon3d {
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 55%), linear-gradient(150deg, #f3e2b4, var(--w-gold)) !important;
  --i3d-hi:#0b4a38; --i3d-mid:#095440; --i3d-low:#063a2c; --i3d-depth:rgba(255,255,255,.4);
}

/* ---------- 4) موبايل وتابلت بالطول: «المزيد» شيت من تحت بأيقونات زي تطبيقات الآيفون ---------- */
@media (max-width:900px) {
  html body.admin-suite .side {
    position:fixed !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important;
    height:auto !important; max-height:calc(var(--app-h, 100dvh) - var(--top) - 8px) !important; z-index:80 !important;
    padding:8px 14px calc(110px + env(safe-area-inset-bottom)) !important; overflow-y:auto; overscroll-behavior:contain;
    border-radius:26px 26px 0 0 !important; border:0 !important;
    background:var(--w-ivory) !important; box-shadow:0 -18px 40px -18px rgba(6,58,44,.45) !important;
    transform:translateY(104%) !important; transition:transform .32s var(--w-ease) !important; visibility:hidden;
  }
  html body.admin-suite #navtog:checked ~ .shell .side { transform:none !important; visibility:visible; }
  html body.admin-suite .side::before { content:""; display:block; width:38px; height:5px; margin:2px auto 8px; border-radius:5px; background:#d8d1c0; flex:none; }
  html body.admin-suite #navtog:checked ~ .shell .scrim { inset:0 !important; z-index:70 !important; background:rgba(10,30,22,.36) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  html body.admin-suite .side .navgroup > summary, html body.admin-suite .side .navgroup[open] > summary { color:var(--w-gold-2) !important; }
  html body.admin-suite .side .ng-title { color:var(--w-gold-2) !important; }
  html body.admin-suite .side .navcount { color:#a49a85 !important; background:none !important; }
  html body.admin-suite .side .navlinks { grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:10px 6px !important; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) {
    height:auto !important; min-height:0 !important; aspect-ratio:auto !important; padding:4px 2px !important; gap:6px !important;
    background:none !important; border:0 !important; box-shadow:none !important; color:#24342d !important;
  }
  html body.admin-suite .side > a.navitem { width:calc((100% - 18px) / 4) !important; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) > span { font-size:.7rem !important; line-height:1.3 !important; color:#24342d !important; font-weight:600 !important; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) .wanas-icon3d,
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem) > svg.ic { width:54px !important; height:54px !important; padding:13px !important; border-radius:15px !important; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem).on .wanas-icon3d { outline:2.5px solid var(--w-gold); outline-offset:2px; }
  html body.admin-suite .side :is(.navlinks > a.navitem, .side > a.navitem):active .wanas-icon3d { transform:scale(.92); transition:transform .08s; }
}
@media (max-width:360px) { html body.admin-suite .side .navlinks { grid-template-columns:repeat(3, minmax(0,1fr)) !important; } html body.admin-suite .side > a.navitem { width:calc((100% - 12px) / 3) !important; } }

/* ---------- 5) الشريط اللي تحت: كبسولة عايمة (آيفون) ---------- */
@media (max-width:900px) {
  html body.admin-suite .tabbar {
    position:fixed !important; left:12px !important; right:12px !important; bottom:calc(10px + env(safe-area-inset-bottom)) !important; margin:0 !important; z-index:90 !important;
    padding:6px !important; border-radius:999px !important; gap:2px;
    background:rgba(252,251,247,.97) !important; border:.5px solid rgba(23,37,31,.12) !important;
    box-shadow:0 12px 30px -10px rgba(10,30,22,.32), inset 0 1px 0 rgba(255,255,255,.8) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  html body.admin-suite .tabbar :is(a,label) {
    height:54px; border-radius:999px !important; gap:2px !important; color:#4a524e !important; background:none !important; border:0 !important; box-shadow:none !important;
    font-size:10.5px !important; font-weight:600 !important; transition:background-color .18s ease, color .18s ease;
  }
  html body.admin-suite .tabbar .ic { width:22px !important; height:22px !important; }
  html body.admin-suite .tabbar .on { background:rgba(9,84,64,.1) !important; color:var(--w-green) !important; font-weight:800 !important; }
  html body.admin-suite .tabbar .on .wanas-icon3d { --i3d-hi:#24936d; --i3d-mid:#095440; --i3d-low:#063a2c; }
  html body.admin-suite .tabbar :is(a,label) .wanas-icon3d { --i3d-hi:#5c6a63; --i3d-mid:#46524c; --i3d-low:#323b37; --i3d-depth:transparent; filter:none; }
  html body.admin-suite .tabbar :is(a,label):active { background:rgba(9,84,64,.08) !important; }
  html body.admin-suite main.main { padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; }
  /* التوستات والأزرار الثابتة فوق الشريط */
  .wanas-update-toast { bottom:calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- 6) الكروت ---------- */
html body.admin-suite main.main :is(.card,.kpi,.stat,.report,.chartcard) {
  border-radius:18px; border:1px solid var(--w-line); background:var(--w-surface); box-shadow:var(--w-sh);
}
html body.admin-suite main.main :is(.card,.kpi,.stat) { transition:transform .22s var(--w-soft), box-shadow .28s ease, border-color .22s ease; }
@media (hover:hover) and (pointer:fine) {
  html body.admin-suite main.main :is(a.card,a.stat,.kpi):hover { transform:translateY(-2px); box-shadow:var(--w-sh-lg); }
}
html body.admin-suite main.main :is(a.card,a.stat):active { transform:scale(.988); transition-duration:.1s; }
html body.admin-suite main.main h3.sub, html body.admin-suite main.main .card > h3 { font-weight:800; color:var(--w-ink); }
/* عنوان الصفحة */
html body.admin-suite main.main .pagehead h1, html body.admin-suite main.main .toolbar h1 { font-weight:800; letter-spacing:0; color:var(--w-ink); }

/* ---------- 7) الزراير ---------- */
html body.admin-suite main.main .btn { min-height:42px; border-radius:12px; font-weight:700; padding-inline:16px; }
html body.admin-suite main.main .btn.sm { min-height:36px; border-radius:10px; padding-inline:12px; }
html body.admin-suite main.main .btn:not(.ghost):not(.danger):not(.warn) { background:linear-gradient(150deg, var(--w-green-2), var(--w-green)); color:#fff; border-color:transparent; box-shadow:0 8px 18px -12px rgba(9,84,64,.8); }
html body.admin-suite main.main .btn.ghost { background:var(--w-surface); color:var(--w-green); border:1px solid var(--w-line); }
@media (hover:hover) and (pointer:fine) { html body.admin-suite main.main .btn.ghost:hover { border-color:#c7d8cc; background:#f7fbf8; } }
/* زرار الحالة «مفعّل/موقوف» في القوايم: مساحة ضغط كفاية على اللمس */
html body.admin-suite main.main .linkbtn { min-height:36px; display:inline-flex; align-items:center; }
html body.admin-suite main.main .chipl { min-height:38px; display:inline-flex; align-items:center; border-radius:999px; }
html body.admin-suite main.main .chipl.on { background:linear-gradient(150deg, var(--w-green-2), var(--w-green)); color:#fff; border-color:transparent; }
html body.admin-suite main.main .ch a.small { display:inline-flex; align-items:center; min-height:34px; padding-inline:6px; }

/* ---------- 8) الخانات ---------- */
html body.admin-suite main.main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea) {
  border-radius:12px; border:1px solid #ddd6c6; background:#fff; transition:border-color .15s, box-shadow .15s;
}
html body.admin-suite main.main :is(input,select,textarea):focus { outline:none; border-color:var(--w-gold); box-shadow:0 0 0 3px rgba(217,177,95,.22); }
/* موبايل وتابلت: الخط 16px عشان الآيفون مايعملش زوم لوحده لما تدوس على الخانة */
@media (max-width:1366px) and (pointer:coarse), (max-width:900px) {
  html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea) { font-size:16px !important; }
}

/* ---------- 9) الجداول ---------- */
html body.admin-suite main.main table.tbl thead th { background:var(--w-ivory); color:#5d6762; font-weight:700; border-bottom:1px solid var(--w-line); }
html body.admin-suite main.main table.tbl td { border-bottom:1px solid var(--w-line-2); }
@media (hover:hover) and (pointer:fine) { html body.admin-suite main.main table.tbl tbody tr:hover td { background:#fbf8ef; } }
/* التابات اللي بتتسحب بالعرض (التقارير): إحساس إن فيه أكتر */
html body.admin-suite main.main .tabs { scrollbar-width:none; -webkit-mask-image:linear-gradient(to left, #000 88%, transparent); mask-image:linear-gradient(to left, #000 88%, transparent); }
html body.admin-suite main.main .tabs::-webkit-scrollbar { display:none; }

/* ---------- 10) الأيقونات الزجاج في الرئيسية (من غير blur عشان الأداء) ---------- */
html body.admin-suite main.main :is(.dash-kpi-icon,.quick .qi) { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* ---------- 11) وضع الخفة: لمس أو شاشة لحد 1280 → مفيش تمويه (بيتقّل السكرول) ---------- */
@media (pointer:coarse), (max-width:1280px) {
  html body.admin-suite *, html body.admin-suite *::before, html body.admin-suite *::after { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ---------- 12) شكل حسب النظام ---------- */
/* آيفون / آيباد: الضغطة بتبهت بدل التصغير، حدود رفيعة، خانات مملوءة رمادي فاتح */
@supports (-webkit-touch-callout:none) {
  @media (pointer:coarse) {
    :root body :is(.btn,button,.chipl,a.card,a.stat,.linkbtn):active:not(:disabled) { transform:none; opacity:.6; transition:opacity .06s linear; }
    html body.admin-suite main.main :is(.card,.kpi,.stat) { border-width:.5px; border-radius:20px; }
    html body.admin-suite .tabbar { border-width:.5px !important; }
    html body.admin-suite main.main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea) { background:rgba(118,118,128,.1); border-color:transparent; border-radius:10px; }
    html body.admin-suite main.main :is(input,select,textarea):focus { background:#fff; }
  }
}
/* أندرويد (Material 3): شريط تحت بعرض الشاشة + «حبّة» ورا الأيقونة الحالية، الزراير كبسولة، الضغط طبقة لون */
@supports not (-webkit-touch-callout:none) {
  @media (pointer:coarse) and (hover:none) and (max-width:900px) {
    html body.admin-suite .tabbar { left:0 !important; right:0 !important; bottom:0 !important; border-radius:0 !important; padding:8px 6px calc(8px + env(safe-area-inset-bottom)) !important;
      background:#f1ece0 !important; border:0 !important; border-top:1px solid rgba(23,37,31,.1) !important; box-shadow:0 -8px 18px -14px rgba(0,0,0,.3) !important; }
    html body.admin-suite .tabbar :is(a,label) { height:62px; border-radius:16px !important; gap:4px !important; font-size:12px !important; font-weight:500 !important; background:none !important; }
    html body.admin-suite .tabbar .ic { box-sizing:content-box; width:22px !important; height:22px !important; padding:5px 21px; border-radius:16px; transition:background-color .2s ease; }
    html body.admin-suite .tabbar .on { background:none !important; color:#10231b !important; font-weight:700 !important; }
    html body.admin-suite .tabbar .on .ic { background:#cfe6da; }
    html body.admin-suite .tabbar :is(a,label):active .ic { background:rgba(9,84,64,.12); }
    html body.admin-suite main.main .btn { border-radius:999px; }
    :root body :is(.btn,button,.chipl):active:not(:disabled) { transform:none; filter:brightness(.93); }
  }
}
/* ويندوز / ماك: سكرول بار رفيع بلون البراند */
html.os-windows *, html.os-linux * { scrollbar-width:thin; }
html:is(.os-windows,.os-linux) ::-webkit-scrollbar { width:10px; height:10px; }
html:is(.os-windows,.os-linux) ::-webkit-scrollbar-thumb { background:rgba(9,84,64,.28); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }
html:is(.os-windows,.os-linux) ::-webkit-scrollbar-track { background:transparent; }
/* التطبيق المتثبت: الزراير والقوايم ماتتحددش بالضغط الطويل */
html.is-app :is(.topbar,.tabbar,.side,.btn,.chipl,.quick a,.kpi) { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* ---------- 13) تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce) {
  :root body * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
  :root body :is(.btn,button,.card,.kpi,.stat):is(:hover,:active) { transform:none !important; }
}
@media print {
  html body.admin-suite .topbar, html body.admin-suite .tabbar, #wpProg { display:none !important; }
  html body.admin-suite main.main :is(.card,.kpi,.stat) { box-shadow:none !important; }
}

/* =====================================================================
   14) التطبيق المتثبت = تطبيق أصلي على كل جهاز (Claude 2026-11-15)
   ===================================================================== */
/* آيفون/آيباد/أندرويد متثبت: الهيدر الأخضر لازق في أعلى الشاشة تحت الساعة والبطارية
   (زي شريط التنقل في تطبيقات الموبايل) بدل ما يبقى عايم وتحته فراغ */
html.is-app:is(.os-ios,.os-android) {
  --top:calc(var(--w-head-h) + env(safe-area-inset-top));
}
html.is-app:is(.os-ios,.os-android) body.admin-suite .topbar {
  top:0; margin:0 !important; height:calc(var(--w-head-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top); padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right));
  border-radius:0 0 22px 22px; border-top:0;
}
html.is-app:is(.os-ios,.os-android) body.admin-suite .side { top:calc(var(--top) + 8px); }
@media (min-width:901px) {
  html.is-app:is(.os-ios,.os-android) body.admin-suite .side { height:calc(var(--app-h, 100dvh) - var(--top) - 8px) !important; max-height:calc(var(--app-h, 100dvh) - var(--top) - 8px) !important; }
}
/* أي حتة من الصفحة تحت شريط الحالة تفضل خضرا (الساعة بيضا عليها) */
html.is-app.os-ios::before { content:""; position:fixed; z-index:100001; top:0; left:0; right:0; height:env(safe-area-inset-top); background:#0b5f48; pointer-events:none; }
/* السكرول المطاطي في الآيفون مايكشفش لون غريب فوق */
html.is-app.os-ios, html.is-app.os-ios body { background-color:var(--w-bg); }

/* ويندوز / ماك متثبت: شريط عنوان أخضر مدمج — الهيدر نفسه هو شريط النافذة،
   بنسحب منه النافذة، وزراير التصغير/التكبير/القفل جنبه */
@media (display-mode: window-controls-overlay) {
  :root { --top:var(--w-head-h); }
  html body.admin-suite .topbar {
    top:0; margin:0 !important; border-radius:0 0 18px 18px; border-top:0;
    height:max(var(--w-head-h), env(titlebar-area-height, 0px));
    /* مكان زراير النظام: ماك على الشمال، ويندوز على اليمين */
    padding-left:calc(env(titlebar-area-x, 0px) + 10px);
    padding-right:calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 10px);
    -webkit-app-region:drag; app-region:drag;
  }
  html body.admin-suite .topbar :is(a,button,input,label,form,select,.gsearch,.who,.brand,.wn-alert-button,.wanas-update-btn) { -webkit-app-region:no-drag; app-region:no-drag; }
  html body.admin-suite .side { padding-top:12px !important; }
}
/* أي كمبيوتر متثبت (حتى من غير الشريط المدمج): الهيدر لازق فوق زي برامج الكمبيوتر */
@media (display-mode: standalone) and (pointer:fine) {
  :root { --top:var(--w-head-h); }
  html body.admin-suite .topbar { top:0; margin:0 !important; border-radius:0 0 18px 18px; border-top:0; }
}

/* ---------- 15) الأبعاد على الشاشات الكبيرة: المحتوى مايتمطش لحد ما يبقى صعب يتقري ---------- */
@media (min-width:1800px) {
  html body.admin-suite main.main { max-width:1560px; margin-inline:auto; width:100%; }
  html body.admin-suite .topbar { max-width:none; }
}

/* =====================================================================
   16) «تحديث البرنامج» — شكل Software Update في الآيفون، بألوان ونس (Claude 2026-11-15)
   ===================================================================== */
dialog.wu { width:min(560px, calc(100vw - 24px)); max-height:min(86dvh, 760px); padding:0; border:0; border-radius:22px; background:#f2f1ec; color:var(--w-ink);
  box-shadow:0 30px 80px -20px rgba(6,30,22,.55); overflow:hidden; font-family:inherit; text-align:right; }
dialog.wu[open] { display:flex; flex-direction:column; animation:wu-in .28s var(--w-ease) both; }
dialog.wu::backdrop { background:rgba(8,26,19,.42); }
@keyframes wu-in { from { opacity:0; transform:translateY(14px) scale(.98); } }
.wu-bar { position:relative; display:flex; align-items:center; justify-content:center; min-height:54px; padding:0 52px; background:#f8f7f3; border-bottom:.5px solid rgba(23,37,31,.12); flex:none; }
.wu-bar h2 { margin:0; font-size:1.02rem; font-weight:800; }
.wu-x { position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%; background:rgba(118,118,128,.14); color:#3a3f3c; font-size:.95rem; cursor:pointer; }
.wu-body { overflow:auto; padding:14px 14px calc(18px + env(safe-area-inset-bottom)); overscroll-behavior:contain; }
.wu-card { margin:0 0 6px; padding:0; list-style:none; background:#fff; border-radius:14px; overflow:hidden; }
.wu-h { margin:16px 6px 7px; font-size:.78rem; font-weight:700; color:#7b827e; }
.wu-status { display:grid; justify-items:center; gap:8px; padding:20px 16px; text-align:center; }
.wu-status > b { font-size:1rem; }
.wu-status small, .wu-dim { color:#7b827e; font-size:.8rem; }
.wu-app { width:64px; height:64px; border-radius:15px; box-shadow:0 8px 18px -10px rgba(6,58,44,.7); }
.wu-meta { display:grid; justify-items:center; gap:3px; }
.wu-meta b { font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.wu-badge { display:inline-block; padding:2px 10px; border-radius:999px; background:#e3f1ea; color:var(--w-green); font-size:.74rem; font-weight:800; }
.wu-done { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:linear-gradient(150deg, var(--w-green-hi), var(--w-green)); box-shadow:0 10px 20px -12px rgba(9,84,64,.8); }
.wu-done svg { width:30px; height:30px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.wu-spin { width:30px; height:30px; border-radius:50%; border:3px solid #dfe9e3; border-top-color:var(--w-green); animation:wu-sp .8s linear infinite; }
@keyframes wu-sp { to { transform:rotate(360deg); } }
.wu-btn { min-height:46px; min-width:220px; margin-top:6px; padding:0 22px; border:0; border-radius:13px; font:inherit; font-weight:800; cursor:pointer;
  background:linear-gradient(150deg, var(--w-green-2), var(--w-green)); color:#fff; box-shadow:0 10px 20px -12px rgba(9,84,64,.85); }
.wu-btn.ghost { background:rgba(9,84,64,.08); color:var(--w-green); box-shadow:none; }
.wu-btn:disabled { opacity:.6; }
.wu-notes { margin:0; padding:12px 16px 12px 14px; padding-inline-start:30px; display:grid; gap:7px; font-size:.86rem; line-height:1.7; color:#2f3a35; }
.wu-notes li::marker { color:var(--w-gold-2); }
.wu-old { border-bottom:.5px solid rgba(23,37,31,.1); }
.wu-old:last-child { border-bottom:0; }
.wu-old summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:0 16px; cursor:pointer; list-style:none; font-size:.88rem; }
.wu-old summary::-webkit-details-marker { display:none; }
.wu-old summary span { color:#8a908c; font-size:.76rem; white-space:nowrap; }
.wu-rows li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border-bottom:.5px solid rgba(23,37,31,.1); }
.wu-rows li:last-child { border-bottom:0; }
.wu-rows li b { display:block; font-size:.9rem; }
.wu-rows li small { display:block; color:#7b827e; font-size:.76rem; line-height:1.55; margin-top:2px; }
.wu-ic { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; }
.wu-ic svg { width:19px; height:19px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.wu-ic.g { background:linear-gradient(150deg, var(--w-green-hi), var(--w-green)); }
.wu-ic.o { background:linear-gradient(150deg, #e7b964, var(--w-gold-2)); }
.wu-ok { color:var(--w-green); font-weight:800; font-size:.82rem; white-space:nowrap; }
.wu-mini { display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border:0; border-radius:999px; background:rgba(9,84,64,.1); color:var(--w-green); font:inherit; font-size:.8rem; font-weight:800; text-decoration:none; white-space:nowrap; cursor:pointer; }
/* موبايل: شيت من تحت */
@media (max-width:640px) {
  dialog.wu { width:100%; max-width:none; margin:auto 0 0; max-height:calc(var(--app-h, 100dvh) - 40px); border-radius:22px 22px 0 0; }
  dialog.wu[open] { animation:wu-up .32s var(--w-ease) both; }
  @keyframes wu-up { from { transform:translateY(100%); } }
  .wu-btn { width:100%; min-width:0; }
}
/* إشعار «يتوفر تحديث» / «تم تحديث ونس» */
.wu-toast { position:fixed; z-index:10030; inset-inline:12px; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:420px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 12px 14px; border-radius:16px;
  background:linear-gradient(135deg, #0d6a50, var(--w-green)); color:#fff; box-shadow:0 18px 40px -16px rgba(6,40,30,.7); animation:wu-in .3s var(--w-ease) both; }
.wu-toast span { display:grid; gap:2px; font-size:.82rem; color:rgba(255,255,255,.85); min-width:0; }
.wu-toast b { color:#fff; font-size:.92rem; }
.wu-toast button { flex:none; min-height:38px; padding:0 16px; border:0; border-radius:11px; background:var(--w-cream); color:var(--w-green); font:inherit; font-weight:800; cursor:pointer; }
@media (max-width:900px) { .wu-toast { bottom:calc(88px + env(safe-area-inset-bottom)); } }
/* النقطة على الزرار لما فيه تحديث */
html body.admin-suite .topbar .wanas-update-btn { position:relative; }
html body.admin-suite .topbar .wanas-update-btn.has-update::after { content:""; position:absolute; top:5px; inset-inline-end:5px; width:9px; height:9px; border-radius:50%; background:#f2b84b; box-shadow:0 0 0 2px var(--w-green); }
@media (prefers-reduced-motion:reduce) { dialog.wu[open], .wu-toast { animation:none; } .wu-spin { animation-duration:2s; } }