/*
 * تصميم التطبيق — الإصدار V2 «Bold Executive» (2026-09-20، من نموذج حمد Nahdha-App-V2).
 * يعمل فقط داخل التطبيق المثبّت (html.nh-app) أو المعاينة ?app=1؛ الموقع في المتصفح لا يتغيّر.
 * الهوية: #203526 · #51ba74 · خط IBM Plex Sans Arabic · صور الهوية من ورقة صور واحدة (4×2).
 */
html.nh-app {
    --p: #203526;
    --s: #51ba74;
    --off: #f9fafb;
    --ink: #111827;
    --sub: #374151;
    --line: #e5e7eb;
    --soft: #f3f5f3;
    --tint: #eaf1eb;
    --muted: #6b756f;
    --card: #ffffff;
    --asset: var(--nh-photo-sheet, none);
    --app-top: calc(68px + env(safe-area-inset-top, 0px));
    --app-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
html.nh-app.dark, html.nh-app[data-theme="dark"] {
    --off: #0c1410;
    --ink: #eef3ef;
    --sub: #cdd7d0;
    --line: rgba(255, 255, 255, .09);
    --soft: rgba(255, 255, 255, .07);
    --tint: rgba(81, 186, 116, .14);
    --muted: #93a39a;
    --card: #131d17;
}

/* ─── إخفاء هيكل الموقع داخل التطبيق ─── */
html.nh-app #nh-announce, html.nh-app #welcome-header, html.nh-app #megaMenuDropdown, html.nh-app #nh-footer,
html.nh-app .nh-header, html.nh-app .nh-article-marquee, html.nh-app #mainHeader, html.nh-app #sidebarOverlay,
html.nh-app #nh-pwa-banner, html.nh-app #sidebar { display: none !important; }

html.nh-app body {
    padding-top: var(--app-top) !important;
    padding-bottom: var(--app-bottom) !important;
    background: var(--off) !important;
    overscroll-behavior-y: contain;
}
html.nh-app.nh-app--hero body { padding-top: 0 !important; }
html.nh-app #mainContent { padding-top: 0 !important; }
html.nh-app #mainLayout, html.nh-app .nh-shell__main { margin: 0 !important; padding-inline: 0 !important; }

/* ─── الرأس: أبيض ثابت بزرّين دائريين ─── */
.nh-app-top {
    position: fixed; inset-inline: 0; top: 0; z-index: 9990;
    height: var(--app-top); padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    color: var(--ink); font-family: var(--font);
    transition: background .25s, color .25s, box-shadow .25s;
}
.nh-app-top.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nh-app-top__title { flex: 1; min-width: 0; text-align: center; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-app-icon-btn {
    width: 40px; height: 40px; flex: none; border: 0; border-radius: 14px;
    background: var(--soft); color: var(--ink); display: grid; place-items: center; cursor: pointer;
    transition: transform .12s ease, background .2s;
}
.nh-app-icon-btn svg { width: 20px; height: 20px; }
.nh-app-icon-btn:active { transform: scale(.9); }
.nh-app-icon-btn[hidden] { visibility: hidden; display: grid; }
/* فوق صورة البطل: الرأس شفاف بأزرار زجاجية حتى يُمرَّر */
html.nh-app--hero .nh-app-top:not(.is-scrolled) { background: transparent; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.nh-app--hero .nh-app-top:not(.is-scrolled) .nh-app-icon-btn { background: rgba(255, 255, 255, .16); color: #fff; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
html.nh-app--hero .nh-app-top:not(.is-scrolled) .nh-app-top__title { opacity: 0; }

/* ─── صورة البطل (صفحات الأقسام) ─── */
.nh-app-hero {
    position: relative; height: 330px; margin: 0 0 4px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    padding: calc(env(safe-area-inset-top, 0px) + 80px) 22px 26px;
    color: #fff; font-family: var(--font);
    background-color: var(--p);
    background-image: linear-gradient(180deg, #20352628 0%, #20352610 38%, #15271fd9 82%, #203526 100%), var(--asset);
    background-size: 100% 100%, 400% 200%;
}
.nh-app-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(130deg, transparent 45%, #20352699 45.2%, transparent 66%); }
.nh-app-hero > * { position: relative; z-index: 2; margin: 0; }
.nh-app-hero--home { height: 470px; }
.nh-app-hero__brand { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 20px); inset-inline-start: 22px; font-size: 26px; font-weight: 700; }
.nh-app-hero__brand i { color: var(--s); font-style: normal; }
.nh-app-hero h1 { font-size: 30px; line-height: 1.2; font-weight: 700; max-width: 310px; }
.nh-app-hero--home h1 { font-size: 40px; line-height: 1.12; }
.nh-app-hero p { font-size: 13px; color: #e0e7e2; border-inline-start: 2px solid var(--s); padding-inline-start: 11px; line-height: 1.8; }
.nh-app-search {
    margin-top: 12px; height: 52px; background: #fff; color: #8a938f; border-radius: 17px;
    display: flex; align-items: center; gap: 10px; padding: 0 6px 0 15px; font-size: 13px; text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
}
.nh-app-search b { margin-inline-start: auto; width: 40px; height: 40px; border-radius: 13px; background: var(--p); color: #fff; display: grid; place-items: center; }
.nh-app-search b svg { width: 20px; height: 20px; }

/* ─── شريط التنقل السفلي: أبيض زجاجي بأسماء، والنشط مربع أخضر ─── */
.nh-app-tabs {
    position: fixed; z-index: 9990; inset-inline: 14px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 68px; border-radius: 25px; display: flex; align-items: center; justify-content: space-around;
    background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid color-mix(in srgb, var(--card) 100%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 10px 30px rgba(23, 36, 30, .16); font-family: var(--font);
}
.nh-app-tab {
    position: relative; flex: 1; height: 100%; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; align-content: center; gap: 3px;
    color: #737e78; font-size: 10px; font-weight: 600; text-decoration: none;
    -webkit-user-select: none; user-select: none;
}
.nh-app-tab svg { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 13px; transition: background .2s, color .2s, transform .2s cubic-bezier(.2, .9, .3, 1.3); }
.nh-app-tab:active svg { transform: scale(.88); }
.nh-app-tab[aria-current="page"] { color: var(--p); }
html.nh-app.dark .nh-app-tab[aria-current="page"], html.nh-app[data-theme="dark"] .nh-app-tab[aria-current="page"] { color: var(--s); }
.nh-app-tab[aria-current="page"] svg { background: var(--p); color: #fff; }
.nh-app-tab svg + span { line-height: 1; }
.nh-app-badge {
    position: absolute; top: 6px; inset-inline-end: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: #e5484d; color: #fff; font: 700 10px/17px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--card);
}
/* الضغط الطويل على الأيقونة لا يفتح قائمة النظام */
.nh-app-tabs a, .nh-app-tabs button { -webkit-touch-callout: none; }

/* ─── الورقة السفلية + شبكة «الفئات» ─── */
.nh-app-sheet-backdrop { position: fixed; inset: 0; background: rgba(12, 20, 16, .45); z-index: 9994; opacity: 0; transition: opacity .22s; }
.nh-app-sheet-backdrop.is-open { opacity: 1; }
.nh-app-sheet {
    position: fixed; inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 9995;
    max-height: 78vh; overflow-y: auto; background: var(--card); color: var(--ink); font-family: var(--font);
    border-radius: 26px; padding: 8px 14px 16px; transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .85, .2, 1);
    box-shadow: 0 24px 60px rgba(12, 20, 16, .3);
}
.nh-app-sheet.is-open { transform: translateY(0); }
.nh-app-sheet__grip { width: 42px; height: 5px; border-radius: 99px; background: var(--line); margin: 6px auto 12px; }
.nh-app-sheet__title { font-size: 16px; font-weight: 700; margin: 4px 4px 12px; }
.nh-app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.nh-app-grid a {
    text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 4px;
    color: var(--ink); text-decoration: none; font-size: 10px; font-weight: 700;
}
.nh-app-grid a i { width: 40px; height: 40px; border-radius: 13px; background: var(--tint); color: var(--p); display: grid; place-items: center; margin: 0 auto 7px; font-style: normal; }
html.nh-app.dark .nh-app-grid a i { color: var(--s); }
.nh-app-grid a i svg { width: 19px; height: 19px; }
.nh-app-list a, .nh-app-sheet form button {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 14px; margin-top: 8px; box-sizing: border-box;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); text-decoration: none;
    font: 700 13px var(--font); text-align: start; cursor: pointer;
}
.nh-app-list a i { width: 40px; height: 40px; flex: none; border-radius: 13px; background: var(--tint); color: var(--p); display: grid; place-items: center; font-style: normal; }
.nh-app-list a i svg { width: 19px; height: 19px; }
.nh-app-list a::after { content: '‹'; margin-inline-start: auto; color: var(--muted); font-size: 18px; }
html[dir="ltr"] .nh-app-list a::after { content: '›'; }
.nh-app-sheet form button { color: #e5484d; background: rgba(229, 72, 77, .07); border-color: transparent; justify-content: center; }
.nh-app-grid a:active, .nh-app-list a:active, .nh-app-sheet form button:active { transform: scale(.97); }

/* ─── السحب للتحديث ─── */
.nh-app-ptr { position: fixed; top: calc(var(--app-top) + 6px); inset-inline: 0; margin-inline: auto; z-index: 9989; width: 40px; height: 40px; border-radius: 14px; background: var(--p); color: #fff; box-shadow: 0 8px 20px rgba(32, 53, 38, .3); display: grid; place-items: center; transform: translateY(-110px); transition: transform .15s; }
.nh-app-ptr svg { width: 20px; height: 20px; }
.nh-app-ptr.is-spinning svg { animation: nh-app-spin .8s linear infinite; }
@keyframes nh-app-spin { to { transform: rotate(360deg); } }

/* ─── بطاقة الإشعارات (البطاقة الداكنة في V2) ─── */
.nh-app-push {
    position: fixed; inset-inline: 14px; bottom: calc(var(--app-bottom) + 6px); z-index: 9991;
    background: var(--p); color: #fff; border-radius: 22px; padding: 16px; display: flex; gap: 10px; align-items: center;
    font: 13px/1.7 var(--font); box-shadow: 0 18px 40px rgba(32, 53, 38, .35);
}
.nh-app-push span { color: #cfdad2 !important; }
.nh-app-push button { border: 0; border-radius: 12px; padding: 10px 14px; font: 700 12px var(--font); cursor: pointer; }
.nh-app-push [data-yes] { background: var(--s) !important; color: #fff !important; }
.nh-app-push [data-no] { background: transparent !important; color: rgba(255, 255, 255, .72) !important; }

/* ─── تناسق المحتوى داخل التطبيق: أزرار وبطاقات وحقول بلغة V2 ─── */
html.nh-app main, html.nh-app #mainContent { font-family: var(--font); }
html.nh-app main button[type="submit"], html.nh-app #mainContent button[type="submit"],
html.nh-app main .btn-primary, html.nh-app #mainContent .btn-primary {
    min-height: 48px; border-radius: 15px !important; font-weight: 600;
}
html.nh-app main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.nh-app main select, html.nh-app main textarea,
html.nh-app #mainContent input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.nh-app #mainContent select, html.nh-app #mainContent textarea {
    border-radius: 14px !important; min-height: 46px; font-size: 16px; /* 16px يمنع آيفون من التكبير عند الكتابة */
}
html.nh-app main textarea, html.nh-app #mainContent textarea { min-height: 96px; }
html.nh-app main a, html.nh-app main button, html.nh-app #mainContent a, html.nh-app #mainContent button { touch-action: manipulation; }

html.nh-app .nh-app-top, html.nh-app .nh-app-tabs, html.nh-app .nh-app-sheet, html.nh-app .nh-app-hero { -webkit-user-select: none; user-select: none; }
.nh-app-icon-btn:focus-visible, .nh-app-tab:focus-visible, .nh-app-grid a:focus-visible, .nh-app-list a:focus-visible, .nh-app-search:focus-visible { outline: 3px solid var(--s); outline-offset: 2px; }

@media (display-mode: standalone) { @view-transition { navigation: auto; } }
@media (prefers-reduced-motion: reduce) {
    .nh-app-sheet, .nh-app-sheet-backdrop, .nh-app-tab svg, .nh-app-ptr, .nh-app-top { transition: none !important; }
}