/*
 * واجهة اللوحتين الجديدة: شاشة الأيقونات، و"المستندات".
 * ملف CSS عادي (بدون بناء)، يُحمَّل في اللوحتين بعد brand.css.
 */

/* ---------------- المستندات ---------------- */
.bn-drive { display: flex; flex-direction: column; gap: 1.5rem; transition: opacity .15s; }
.bn-drive-busy { opacity: .55; }

.bn-drive-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.bn-drive-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; font-size: .9rem; }
.bn-drive-crumbs button { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: .65rem; color: var(--gray-600); font-weight: 500; }
.bn-drive-crumbs button:hover { background: var(--gray-100); color: var(--gray-900); }
.bn-drive-crumbs button.is-current { color: var(--gray-950); font-weight: 600; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .07); }
.bn-drive-crumbs svg { width: 1.1rem; height: 1.1rem; }
.bn-drive-sep { color: var(--gray-400); }

.bn-drive-search { display: flex; align-items: center; gap: .5rem; flex: 0 1 22rem; min-width: min(100%, 16rem); height: 2.6rem; padding: 0 .85rem; border-radius: .85rem; background: #fff; color: var(--gray-500); box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); }
.bn-drive-search:focus-within { box-shadow: 0 0 0 2px var(--primary-500); }
.bn-drive-search svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.bn-drive-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: .9rem; color: var(--gray-950); appearance: none; }
.bn-drive-search input:focus { box-shadow: none; }

.bn-drive-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; font-size: .95rem; font-weight: 600; color: var(--gray-700); }
.bn-drive-title span { padding: .05rem .55rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); font-size: .75rem; }

.bn-drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .9rem; }
.bn-drive-card { position: relative; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 6px 16px -12px rgba(15, 23, 42, .25); transition: box-shadow .15s, transform .15s; }
.bn-drive-card:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(15, 23, 42, .1), 0 16px 30px -18px rgba(15, 23, 42, .4); }
.bn-drive-open { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; padding: 1rem 1rem .95rem; color: inherit; text-align: start; text-decoration: none; }
.bn-drive-open:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 1rem; }
.bn-drive-folder-icon svg { display: block; width: 3.1rem; height: 3.1rem; margin-bottom: .4rem; filter: drop-shadow(0 5px 7px rgba(242, 160, 7, .28)); }
.bn-drive-name { display: -webkit-box; overflow: hidden; font-size: .92rem; font-weight: 600; line-height: 1.55; color: var(--gray-950); word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bn-drive-meta { font-size: .76rem; line-height: 1.6; color: var(--gray-500); }

.bn-drive-tools { position: absolute; top: .55rem; inset-inline-end: .55rem; display: flex; gap: .1rem; padding: .15rem; border-radius: .75rem; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px rgba(15, 23, 42, .07), 0 6px 14px -8px rgba(15, 23, 42, .3); opacity: 0; transition: opacity .15s; }
.bn-drive-card:hover .bn-drive-tools,
.bn-drive-card:focus-within .bn-drive-tools { opacity: 1; }
@media (hover: none) { .bn-drive-tools { opacity: 1; } }
.bn-drive-tool { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; color: var(--gray-400); }
.bn-drive-tool:hover { background: var(--gray-100); color: var(--gray-600); }
.bn-drive-tool svg { width: 1.15rem; height: 1.15rem; }

.bn-drive-files .bn-drive-open { padding: .6rem .6rem .9rem; }
.bn-drive-files .bn-drive-name,
.bn-drive-files .bn-drive-meta { padding-inline: .4rem; }
.bn-drive-thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; width: 100%; aspect-ratio: 16 / 10; margin-bottom: .45rem; overflow: hidden; border-radius: .75rem; background: var(--k-bg); color: var(--k-fg); }
.bn-drive-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bn-drive-thumb svg { width: 2.4rem; height: 2.4rem; }
.bn-drive-thumb b { font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.bn-kind-pdf { --k-bg: #fdecec; --k-fg: #d93025; }
.bn-kind-word { --k-bg: #e8f0fe; --k-fg: #1d6fe8; }
.bn-kind-excel { --k-bg: #e6f5ec; --k-fg: #12925a; }
.bn-kind-powerpoint { --k-bg: #fff0e6; --k-fg: #e2530e; }
.bn-kind-image { --k-bg: #f3ecff; --k-fg: #8338ec; }
.bn-kind-file { --k-bg: var(--gray-100); --k-fg: var(--gray-500); }

.bn-drive-empty { display: flex; flex-direction: column; align-items: center; padding: 3.5rem 1rem; border-radius: 1.25rem; background: #fff; text-align: center; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06); }
.bn-drive-empty-icon svg { width: 4.75rem; height: 4.75rem; filter: drop-shadow(0 8px 12px rgba(242, 160, 7, .3)); }
.bn-drive-empty h3 { margin-top: .9rem; font-size: 1.1rem; font-weight: 700; color: var(--gray-950); }
.bn-drive-empty p { max-width: 30rem; margin-top: .35rem; font-size: .9rem; line-height: 1.85; color: var(--gray-500); }
.bn-drive-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.4rem; }

.dark .bn-drive-card,
.dark .bn-drive-empty,
.dark .bn-drive-search,
.dark .bn-drive-crumbs button.is-current { background: var(--gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-drive-name,
.dark .bn-drive-empty h3,
.dark .bn-drive-search input,
.dark .bn-drive-crumbs button.is-current { color: #fff; }
.dark .bn-drive-crumbs button { color: var(--gray-400); }
.dark .bn-drive-crumbs button:hover,
.dark .bn-drive-tool:hover { background: var(--gray-800); color: #fff; }
.dark .bn-drive-title { color: var(--gray-300); }
.dark .bn-drive-title span { background: var(--gray-800); color: var(--gray-300); }
.dark .bn-drive-tools { background: rgba(24, 24, 27, .94); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.dark .bn-kind-pdf { --k-bg: rgba(217, 48, 37, .16); --k-fg: #ff8a80; }
.dark .bn-kind-word { --k-bg: rgba(29, 111, 232, .18); --k-fg: #8ab4ff; }
.dark .bn-kind-excel { --k-bg: rgba(18, 146, 90, .18); --k-fg: #6fdca6; }
.dark .bn-kind-powerpoint { --k-bg: rgba(226, 83, 14, .18); --k-fg: #ffab7a; }
.dark .bn-kind-image { --k-bg: rgba(131, 56, 236, .2); --k-fg: #c7a4ff; }
.dark .bn-kind-file { --k-bg: var(--gray-800); --k-fg: var(--gray-400); }

/* ---------------- الشاشة الرئيسية (الأيقونات) ---------------- */
/* الخلفية من لونَي شعار الجمعية (--bn-c1 و --bn-c2 تأتي من الصفحة)، وبدونهما ألوان هادئة. */
body.fi-body.bn-home {
    --bn-c1: #8e7dff;
    --bn-c2: #3ed9c3;
    --bn-ink: #171a2b;
    --bn-muted: #6c7086;
    --bn-glass: rgba(255, 255, 255, .68);
    --bn-glass-line: rgba(30, 30, 70, .08);
    --bn-ring: #f6f3fa;
    --bn-alert: #e0452b;
    background:
        radial-gradient(40% 52% at 90% 4%, color-mix(in srgb, var(--bn-c1) 24%, transparent), transparent 70%),
        radial-gradient(42% 54% at 4% 16%, color-mix(in srgb, var(--bn-c2) 22%, transparent), transparent 70%),
        radial-gradient(50% 58% at 58% 110%, color-mix(in srgb, var(--bn-c1) 14%, transparent), transparent 70%),
        radial-gradient(32% 44% at 16% 95%, color-mix(in srgb, var(--bn-c2) 12%, transparent), transparent 70%),
        color-mix(in srgb, var(--bn-c1) 3.5%, #fff);
}
.dark body.fi-body.bn-home {
    --bn-ink: #f3f4fa;
    --bn-muted: rgba(235, 238, 255, .6);
    --bn-glass: rgba(255, 255, 255, .07);
    --bn-glass-line: rgba(255, 255, 255, .12);
    --bn-ring: #12162a;
    --bn-alert: #ff8a70;
    background:
        radial-gradient(40% 50% at 88% 6%, color-mix(in srgb, var(--bn-c1) 45%, transparent), transparent 70%),
        radial-gradient(42% 52% at 6% 18%, color-mix(in srgb, var(--bn-c2) 38%, transparent), transparent 70%),
        radial-gradient(50% 55% at 55% 108%, color-mix(in srgb, var(--bn-c1) 22%, transparent), transparent 70%),
        radial-gradient(30% 40% at 16% 94%, color-mix(in srgb, var(--bn-c2) 18%, transparent), transparent 70%),
        color-mix(in srgb, var(--bn-c1) 10%, #070a12);
}

/* الشريط العلوي شفاف فوق خلفية الرئيسية. */
.bn-home .fi-topbar { background: transparent; box-shadow: none; }
/* التغبيش في طبقة خلف الشريط وليس على الشريط نفسه: سفاري الآيفون يخفي القوائم المنسدلة (الملف الشخصي
   والتنبيهات) إذا كانت داخل عنصر عليه backdrop-filter، فتفتح وتختفي مباشرة. */
.bn-home .fi-topbar-ctn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.bn-home .fi-main { padding-top: 0; }

.bn-launch { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0 1rem; color: var(--bn-ink); }
.bn-launch-widget .fi-wi-widget,
.bn-launch-widget { background: transparent; box-shadow: none; }

.bn-launch-hero { text-align: center; }
.bn-launch-brand { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-bottom: 1.35rem; }
.bn-launch-logo { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; padding: .55rem; border-radius: 1.6rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 50, .06), 0 18px 34px -18px rgba(40, 30, 110, .5), 0 3px 8px -4px rgba(20, 20, 50, .18); }
.bn-launch-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bn-launch-logo.is-wide { width: auto; min-width: 8rem; height: 4.75rem; padding: .7rem 1.2rem; border-radius: 1.35rem; }
.bn-launch-logo.is-wide img { width: auto; max-width: 13rem; height: 3.35rem; }
.bn-launch-logo.is-initial { background: linear-gradient(150deg, var(--primary-400), var(--primary-700)); color: #fff; font-size: 2.2rem; font-weight: 700; }
.bn-launch-brand-text { display: flex; flex-direction: column; align-items: center; line-height: 1.45; }
.bn-launch-brand-text b { font-size: 1.02rem; font-weight: 600; }
.bn-launch-brand-text small { font-size: .8rem; color: var(--bn-muted); }
.bn-launch-hero h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.65rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.bn-launch-hero p { margin-top: .55rem; font-size: .95rem; color: var(--bn-muted); }

.bn-launch-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.bn-chip { display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .35rem 1.1rem .35rem .6rem; border-radius: 1rem; background: var(--bn-glass); box-shadow: 0 0 0 1px var(--bn-glass-line), 0 10px 30px -20px rgba(40, 30, 110, .45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: .86rem; color: inherit; text-decoration: none; transition: transform .15s; }
a.bn-chip[href]:hover { transform: translateY(-1px); }
.bn-chip b { font-weight: 600; }
.bn-chip b.is-alert { color: var(--bn-alert); }
.bn-chip-detail { color: var(--bn-muted); }
.bn-chip-go { width: 1.1rem; height: 1.1rem; color: var(--bn-muted); }
.bn-chip .bn-app-icon { --size: 2rem; }
.bn-chip .bn-app-icon svg { width: 1.3rem; height: 1.3rem; }

.bn-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, 8rem); justify-content: center; column-gap: 2.25rem; row-gap: 2.1rem; width: 100%; max-width: 70rem; margin-top: 3.25rem; }
/* صفوف متوازنة على الشاشات الكبيرة: 14 أيقونة = 7 + 7، و9 = 5 + 4. */
@media (min-width: 75rem) { .bn-launch-grid { grid-template-columns: repeat(var(--cols, 6), 8rem); } }
.bn-app { display: flex; flex-direction: column; align-items: center; text-align: center; color: inherit; text-decoration: none; }
.bn-app b { margin-top: .8rem; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.bn-app-short { display: none; }
.bn-app small { margin-top: .15rem; font-size: .78rem; line-height: 1.45; color: var(--bn-muted); }
.bn-app small.is-alert { font-weight: 500; color: var(--bn-alert); }
.bn-app:hover .bn-app-icon { transform: translateY(-3px) scale(1.03); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .1), 0 22px 34px -14px var(--b), 0 4px 8px -3px rgba(20, 20, 45, .18); }
.bn-app:focus-visible { outline: none; }
.bn-app:focus-visible .bn-app-icon { outline: 3px solid var(--primary-500); outline-offset: 3px; }

.bn-app-icon { --size: 5.75rem; position: relative; display: grid; place-items: center; flex-shrink: 0; width: var(--size); height: var(--size); border-radius: calc(var(--size) * .28); background: linear-gradient(150deg, var(--a), var(--b)); color: var(--c, var(--b)); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .1), 0 16px 28px -14px var(--b), 0 4px 8px -3px rgba(20, 20, 45, .18); transition: transform .18s, box-shadow .18s; }
.bn-app-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 75% at 28% -12%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%); pointer-events: none; }
.bn-app-icon svg { position: relative; width: 58%; height: 58%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); }
.bn-app-badge { position: absolute; top: -.45rem; inset-inline-end: -.45rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem; border-radius: 1rem; background: #ff3b30; color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.7rem; text-align: center; box-shadow: 0 0 0 3px var(--bn-ring), 0 4px 10px -2px rgba(255, 59, 48, .5); }

/* ألوان الأقسام: from, to, لون التفاصيل */
.bn-app--tasks { --a: #ffa24c; --b: #f25c12; --c: #e2530e; }
.bn-app--meetings { --a: #8e8dff; --b: #4f46e5; }
.bn-app--projects { --a: #3ed9c3; --b: #0d9488; }
.bn-app--documents { --a: #ff8a7a; --b: #d93a2b; }
.bn-app--drive { --a: #ffd84d; --b: #f5a300; --c: #d98f00; }
.bn-app--beneficiaries { --a: #f58ae0; --b: #b925c9; }
.bn-app--hr { --a: #5db2ff; --b: #1d6fe8; }
.bn-app--inventory { --a: #e7ae78; --b: #a8622a; }
.bn-app--governance { --a: #4fd88b; --b: #12925a; }
.bn-app--reports { --a: #c38bff; --b: #8338ec; }
.bn-app--finance { --a: #465a86; --b: #161f38; }
.bn-app--invoices { --a: #2dd4bf; --b: #0e7490; }
.bn-app--website { --a: #4fd5f2; --b: #0891b2; }
.bn-app--settings { --a: #a9b0be; --b: #586173; }
.bn-app--mywork { --a: #a6e35a; --b: #4fa21f; }
.bn-app--associations { --a: #3ed9c3; --b: #0d9488; }
.bn-app--messages { --a: #ff7ea8; --b: #e1306c; }
.bn-app--grants { --a: #34d399; --b: #0891b2; }
.bn-app--team { --a: #5db2ff; --b: #1d6fe8; }
.bn-app--roles { --a: #a9b0be; --b: #586173; }
.bn-app--api { --a: #b77aa6; --b: #714b67; }
.bn-app--audit { --a: #465a86; --b: #161f38; }

.bn-launch-agenda { width: 100%; max-width: 40rem; margin-top: 3rem; padding: 1rem 1.1rem .6rem; border-radius: 1.25rem; background: var(--bn-glass); box-shadow: 0 0 0 1px var(--bn-glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.bn-launch-agenda h2 { margin: 0 .2rem .4rem; font-size: .92rem; font-weight: 600; }
.bn-agenda-item { display: flex; align-items: center; gap: .8rem; padding: .55rem .2rem; border-top: 1px solid var(--bn-glass-line); color: inherit; text-decoration: none; }
.bn-launch-agenda h2 + .bn-agenda-item { border-top: 0; }
.bn-agenda-item .bn-app-icon { --size: 2.1rem; }
.bn-agenda-item .bn-app-icon svg { width: 1.35rem; height: 1.35rem; }
.bn-agenda-text { flex: 1; min-width: 0; }
.bn-agenda-text b { display: block; overflow: hidden; font-size: .88rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bn-agenda-text small { display: block; font-size: .76rem; color: var(--bn-muted); }
.bn-agenda-item em { flex-shrink: 0; font-size: .78rem; font-style: normal; font-weight: 500; color: var(--bn-muted); }
.bn-agenda-item em.is-today { color: var(--bn-alert); }
a.bn-agenda-item:hover b { text-decoration: underline; text-underline-offset: 3px; }
.bn-launch-anchor { display: block; height: 1px; scroll-margin-top: 5rem; }

@media (max-width: 40rem) {
    .bn-launch { padding-top: .5rem; }
    .bn-launch-hero { align-self: stretch; text-align: start; }
    .bn-launch-brand { flex-direction: row; gap: .8rem; margin-bottom: 1rem; }
    .bn-launch-logo { width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; padding: .35rem; }
    .bn-launch-logo.is-wide { min-width: 0; height: 3.4rem; padding: .45rem .8rem; }
    .bn-launch-logo.is-wide img { max-width: 8rem; height: 2.4rem; }
    .bn-launch-logo.is-initial { font-size: 1.5rem; }
    .bn-launch-brand-text { align-items: flex-start; }
    .bn-launch-chips { flex-wrap: nowrap; justify-content: flex-start; align-self: stretch; margin-inline: -1rem; padding: 0 1rem .4rem; overflow-x: auto; scrollbar-width: none; }
    .bn-chip { flex: none; }
    .bn-chip-detail { display: none; }
    .bn-launch-grid { grid-template-columns: repeat(4, 1fr); column-gap: .5rem; row-gap: 1.35rem; margin-top: 1.75rem; }
    .bn-app-icon { --size: 3.9rem; }
    .bn-app b { margin-top: .5rem; font-size: .74rem; font-weight: 500; }
    .bn-app small { display: none; }
    .bn-app-long { display: none; }
    .bn-app-short { display: inline; }
    .bn-app-badge { min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; font-size: .72rem; line-height: 1.35rem; top: -.35rem; inset-inline-end: -.35rem; }
    .bn-launch-agenda { margin-top: 1.75rem; }
}

/* ---------------- زي Odoo: بدون قائمة جانبية على الشاشات الكبيرة، وشريط القسم ---------------- */
@media (min-width: 64rem) {
    .fi-body .fi-main-sidebar,
    .fi-body .fi-sidebar-close-overlay,
    .fi-body .fi-topbar-collapse-sidebar-btn-ctn { display: none !important; }
}
.fi-main:focus,
.fi-main:focus-visible { outline: none; }

.bn-appbar { display: flex; align-items: center; gap: .35rem; min-height: 3.6rem; padding: .45rem 1rem; background: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(20, 20, 50, .07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; }
.bn-appbar::-webkit-scrollbar { display: none; }
.bn-appbar-home { display: grid; flex-shrink: 0; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--gray-100); color: var(--gray-600); transition: background .15s; }
.bn-appbar-home:hover { background: var(--gray-200); color: var(--gray-900); }
.bn-appbar-home svg { width: 1.15rem; height: 1.15rem; }
.bn-appbar-app { display: flex; flex-shrink: 0; align-items: center; gap: .6rem; margin-inline: .35rem .9rem; color: var(--gray-950); text-decoration: none; }
.bn-appbar-app b { font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.bn-appbar-app .bn-app-icon { --size: 2.1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 12px -8px var(--b); }
.bn-appbar-app .bn-app-icon svg { width: 1.35rem; height: 1.35rem; }
.bn-appbar-menu { display: flex; align-items: center; gap: .15rem; }
.bn-appbar-menu a { display: inline-flex; flex-shrink: 0; align-items: center; gap: .4rem; height: 2.4rem; padding: 0 .85rem; border-radius: .75rem; color: var(--gray-600); font-size: .9rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.bn-appbar-menu a:hover { background: var(--gray-100); color: var(--gray-900); }
.bn-appbar-menu a.is-active { background: color-mix(in srgb, var(--b, var(--primary-600)) 12%, #fff); color: color-mix(in srgb, var(--b, var(--primary-600)) 82%, #000); font-weight: 600; }
.bn-appbar-menu a i { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 1rem; background: #ff3b30; color: #fff; font-size: .7rem; font-style: normal; font-weight: 600; }
.bn-appbar-space { flex: 1; }
.bn-appbar-link { flex-shrink: 0; padding: .45rem .8rem; border-radius: .7rem; color: var(--gray-600); font-size: .85rem; font-weight: 500; white-space: nowrap; text-decoration: none; box-shadow: 0 0 0 1px rgba(20, 20, 50, .1); }
.bn-appbar-link:hover { color: var(--gray-900); background: var(--gray-50); }
.dark .bn-appbar { background: rgba(24, 24, 27, .88); border-bottom-color: rgba(255, 255, 255, .08); }
.dark .bn-appbar-home { background: var(--gray-800); color: var(--gray-300); }
.dark .bn-appbar-app { color: #fff; }
.dark .bn-appbar-menu a { color: var(--gray-400); }
.dark .bn-appbar-menu a:hover { background: var(--gray-800); color: #fff; }
.dark .bn-appbar-menu a.is-active { background: color-mix(in srgb, var(--b, var(--primary-500)) 24%, transparent); color: color-mix(in srgb, var(--b, var(--primary-400)) 55%, #fff); }
.dark .bn-appbar-link { color: var(--gray-300); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

/* زر الهلال */
.bn-theme-toggle { display: grid; flex-shrink: 0; place-items: center; width: 2.25rem; height: 2.25rem; margin-inline: .25rem; border-radius: .75rem; color: var(--gray-500); transition: background .15s, color .15s; }
.bn-theme-toggle:hover { background: var(--gray-100); color: var(--gray-900); }
.bn-theme-toggle svg { width: 1.3rem; height: 1.3rem; }
.dark .bn-theme-toggle { color: var(--gray-400); }
.dark .bn-theme-toggle:hover { background: var(--gray-800); color: #fbbf24; }

/* أيقونة لوحة الشركة جنب الملف الشخصي. */
.bn-company-link { display: grid; flex-shrink: 0; place-items: center; width: 2.25rem; height: 2.25rem; margin-inline-end: .25rem; border-radius: .75rem; color: var(--gray-500); transition: background .15s, color .15s; }
.bn-company-link:hover, .bn-company-link[aria-current] { background: color-mix(in srgb, var(--primary-500) 12%, transparent); color: var(--primary-600); }
.bn-company-link svg { width: 1.3rem; height: 1.3rem; }
.dark .bn-company-link { color: var(--gray-400); }
.dark .bn-company-link:hover, .dark .bn-company-link[aria-current] { background: var(--gray-800); color: var(--primary-400); }

/* ---------------- لوحة المهام (أعمدة) ---------------- */
.bn-board-wrap { display: flex; flex-direction: column; gap: 1rem; }
.bn-board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.bn-board-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.bn-board-filters button { height: 2.3rem; padding: 0 .95rem; border-radius: .75rem; background: #fff; color: var(--gray-600); font-size: .85rem; font-weight: 500; box-shadow: 0 0 0 1px rgba(20, 20, 50, .08); }
.bn-board-filters button:hover { color: var(--gray-900); }
.bn-board-filters button.is-on { background: var(--gray-950); color: #fff; box-shadow: none; }
.bn-board-filters button.is-alert.is-on { background: #e0452b; }
.bn-board { display: grid; grid-template-columns: repeat(4, minmax(14.5rem, 1fr)); gap: 1rem; align-items: start; transition: opacity .15s; }
.bn-board-busy { opacity: .6; }
.bn-col { display: flex; flex-direction: column; min-height: 12rem; padding: .85rem .75rem .75rem; border-radius: 1.25rem; background: color-mix(in srgb, var(--gray-200) 55%, transparent); transition: background .15s, box-shadow .15s; }
.bn-col.is-over { background: color-mix(in srgb, var(--primary-500) 12%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-500) 45%, transparent); }
.bn-col-head { display: flex; align-items: center; gap: .5rem; padding: .1rem .35rem .6rem; }
.bn-col-head h2 { font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.bn-col-count { padding: .05rem .55rem; border-radius: .55rem; background: #fff; color: var(--gray-600); font-size: .75rem; font-weight: 600; }
.bn-col-bar { display: flex; gap: 3px; height: 5px; margin: 0 .35rem .8rem; border-radius: 3px; overflow: hidden; background: rgba(20, 20, 50, .06); }
.bn-col-bar b { display: block; border-radius: 3px; }
.bn-col-bar .is-late { background: #e0452b; }
.bn-col-bar .is-soon { background: #f5a300; }
.bn-col-bar .is-ok { background: #22b573; }
.bn-col-cards { display: flex; flex-direction: column; gap: .6rem; }
.bn-col-empty { padding: 1.6rem .5rem; border: 1.5px dashed rgba(20, 20, 50, .14); border-radius: .95rem; color: var(--gray-500); font-size: .82rem; text-align: center; }
.bn-col-more { padding: .35rem; color: var(--gray-500); font-size: .8rem; text-align: center; text-decoration: none; }
.bn-col-more:hover { color: var(--gray-900); }

.bn-card { display: flex; flex-direction: column; gap: .55rem; padding: .8rem .85rem .75rem; border-radius: .95rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 60, .05), 0 8px 20px -16px rgba(20, 20, 60, .45); transition: box-shadow .15s, transform .15s, opacity .15s; }
.bn-card[draggable="true"] { cursor: grab; }
.bn-card:hover { box-shadow: 0 0 0 1px rgba(20, 20, 60, .09), 0 14px 26px -16px rgba(20, 20, 60, .5); }
.bn-card.is-dragging { opacity: .45; transform: rotate(-1.2deg); }
.bn-card.is-done { opacity: .72; }
.bn-card.is-done .bn-card-title { text-decoration: line-through; text-decoration-color: rgba(23, 26, 43, .35); }
.bn-card-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; max-width: 100%; padding: .15rem .55rem .15rem .2rem; border-radius: .6rem; background: color-mix(in srgb, var(--b) 9%, #fff); color: color-mix(in srgb, var(--b) 80%, #000); font-size: .72rem; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bn-card-tag .bn-app-icon { --size: 1.25rem; box-shadow: none; }
.bn-card-tag .bn-app-icon::before { display: none; }
.bn-card-tag .bn-app-icon svg { width: .85rem; height: .85rem; filter: none; }
.bn-card-title { color: var(--gray-950); font-size: .93rem; font-weight: 600; line-height: 1.55; text-decoration: none; }
.bn-card-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.bn-card-meta { display: flex; align-items: center; gap: .6rem; color: var(--gray-500); font-size: .76rem; }
.bn-card-due { display: inline-flex; align-items: center; gap: .3rem; }
.bn-card-due svg { width: .95rem; height: .95rem; }
.bn-card-due.is-late { padding: .15rem .5rem; border-radius: .5rem; background: #fdece8; color: #d0381e; font-weight: 600; }
.bn-card-due.is-today { padding: .15rem .5rem; border-radius: .5rem; background: #fff1e0; color: #c2410c; font-weight: 600; }
.bn-card-due.is-done { color: #16935a; }
.bn-card-priority { display: inline-flex; gap: 3px; }
.bn-card-priority i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-200); }
.bn-card-priority i.is-on { background: #f5a300; }
.bn-card-priority i.is-on.is-urgent { background: #e0452b; }
.bn-card-end { display: inline-flex; align-items: center; gap: .35rem; margin-inline-start: auto; }
.bn-card-move { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .55rem; color: var(--gray-400); transition: background .15s, color .15s; }
.bn-card-move:hover { background: var(--gray-100); color: var(--gray-900); }
.bn-card-move svg { width: 1rem; height: 1rem; }
.bn-card-avatar { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .6rem; color: #fff; font-size: .78rem; font-weight: 600; }
.bn-card-avatar.tone-0 { background: linear-gradient(150deg, #6ea8ff, #3563e9); }
.bn-card-avatar.tone-1 { background: linear-gradient(150deg, #3ed9c3, #0d9488); }
.bn-card-avatar.tone-2 { background: linear-gradient(150deg, #ff7ea8, #e1306c); }
.bn-card-avatar.tone-3 { background: linear-gradient(150deg, #ffc46b, #e58a00); }
.bn-card-avatar.tone-4 { background: linear-gradient(150deg, #c38bff, #8338ec); }
.bn-card-avatar.tone-5 { background: linear-gradient(150deg, #a6e35a, #4fa21f); }

.bn-card-flag { display: inline-flex; align-self: flex-start; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: .55rem; background: #fdece8; color: #c2341a; font-size: .72rem; font-weight: 600; }
.bn-card-flag svg { width: .85rem; height: .85rem; }
.bn-card-flag.is-backlog { background: #ecfdf5; color: #047857; }
.bn-card-progress { display: flex; align-items: center; gap: .45rem; }
.bn-card-progress i { flex: 1; height: 5px; border-radius: 3px; background: var(--gray-100); overflow: hidden; }
.bn-card-progress b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3ed9c3, #0d9488); }
.bn-card-progress span { color: var(--gray-500); font-size: .72rem; font-variant-numeric: tabular-nums; }
.bn-card-people { display: inline-flex; }
.bn-card-people .bn-card-avatar { width: 1.7rem; height: 1.7rem; font-size: .72rem; box-shadow: 0 0 0 2px #fff; }
.bn-card-people .bn-card-avatar + .bn-card-avatar { margin-inline-start: -.45rem; }
.bn-card-avatar.is-more { background: var(--gray-200); color: var(--gray-700); }
.bn-col--review .bn-col-head h2::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .4rem; border-radius: 50%; background: #f5a300; vertical-align: middle; }
.dark .bn-card-flag { background: rgba(224, 69, 43, .18); color: #ff8a70; }
.dark .bn-card-flag.is-backlog { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
.dark .bn-card-people .bn-card-avatar { box-shadow: 0 0 0 2px var(--gray-900); }
.dark .bn-card-progress i { background: rgba(255, 255, 255, .08); }

.dark .bn-board-filters button { background: var(--gray-900); color: var(--gray-300); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.dark .bn-board-filters button.is-on { background: #fff; color: var(--gray-950); }
.dark .bn-board-filters button.is-alert.is-on { background: #e0452b; color: #fff; }
.dark .bn-col { background: rgba(255, 255, 255, .04); }
.dark .bn-col-head h2 { color: #fff; }
.dark .bn-col-count { background: var(--gray-800); color: var(--gray-300); }
.dark .bn-card { background: var(--gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-card-title { color: #fff; }
.dark .bn-card-tag { background: color-mix(in srgb, var(--b) 22%, transparent); color: color-mix(in srgb, var(--b) 50%, #fff); }
.dark .bn-card-due.is-late { background: rgba(224, 69, 43, .18); color: #ff8a70; }
.dark .bn-card-due.is-today { background: rgba(245, 163, 0, .16); color: #fdba5c; }
.dark .bn-card-priority i { background: var(--gray-700); }
.dark .bn-card-move:hover { background: var(--gray-800); color: #fff; }
.dark .bn-col-empty { border-color: rgba(255, 255, 255, .12); }

@media (max-width: 64rem) {
    .bn-board { display: flex; gap: .8rem; margin-inline: -1rem; padding: 0 1rem .5rem; overflow-x: auto; scroll-snap-type: x mandatory; }
    .bn-col { flex: 0 0 min(84vw, 21rem); scroll-snap-align: start; }
}

/* ===== صفحة المهمة ===== */
.bn-task { display: flex; flex-direction: column; gap: 1rem; }
.bn-task-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.bn-task-steps li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .45rem; border-radius: 999px; background: #fff; color: var(--gray-500); font-size: .82rem; font-weight: 500; box-shadow: 0 0 0 1px rgba(20, 20, 50, .07); }
.bn-task-step-dot { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--gray-100); color: var(--gray-500); font-size: .72rem; font-weight: 700; }
.bn-task-step-dot svg { width: .85rem; height: .85rem; }
.bn-task-steps li.is-done { color: #16935a; }
.bn-task-steps li.is-done .bn-task-step-dot { background: #22b573; color: #fff; }
.bn-task-steps li.is-current { background: var(--gray-950); color: #fff; box-shadow: none; }
.bn-task-steps li.is-current .bn-task-step-dot { background: #fff; color: var(--gray-950); }

.bn-task-banner { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 1rem; }
.bn-task-banner b { display: block; font-size: .95rem; }
.bn-task-banner p { margin-top: .2rem; font-size: .88rem; line-height: 1.7; }
.bn-task-banner small { display: block; margin-top: .25rem; font-size: .76rem; opacity: .8; }
.bn-task-banner-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: .75rem; background: #fff; }
.bn-task-banner-icon svg { width: 1.15rem; height: 1.15rem; }
.bn-task-banner.is-returned { background: #fdece8; color: #8f2410; box-shadow: inset 0 0 0 1px #f6c9bf; }
.bn-task-banner.is-returned .bn-task-banner-icon { color: #d0381e; }
.bn-task-banner.is-review { background: #fff5e2; color: #7a4a00; box-shadow: inset 0 0 0 1px #f7dcaa; }
.bn-task-banner.is-review .bn-task-banner-icon { color: #d98f00; }
.bn-task-banner.is-backlog { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #a7f3d0; }
.bn-task-banner.is-backlog .bn-task-banner-icon { color: #059669; }

.bn-task-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.bn-task-main, .bn-task-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bn-task-card { padding: 1.05rem 1.15rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 60, .06), 0 10px 24px -20px rgba(20, 20, 60, .5); }
.bn-task-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.bn-task-card-head h2 { font-size: .98rem; font-weight: 700; color: var(--gray-950); }
.bn-task-count { padding: .05rem .55rem; border-radius: .55rem; background: var(--gray-100); color: var(--gray-600); font-size: .75rem; font-weight: 600; }
.bn-task-percent { font-size: 1.5rem; font-weight: 700; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.bn-task-progress { height: .65rem; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.bn-task-progress b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3ed9c3, #0d9488); transition: width .3s; }
.bn-task-progress b.is-full { background: linear-gradient(90deg, #4fd88b, #16935a); }
.bn-task-progress-note { margin-top: .45rem; color: var(--gray-500); font-size: .8rem; }
.bn-task-sub { margin: 1.1rem 0 .5rem; font-size: .85rem; font-weight: 600; color: var(--gray-700); }

.bn-task-items { display: flex; flex-direction: column; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.bn-task-items li { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: .8rem; background: var(--gray-50); }
.bn-task-check { display: grid; place-items: center; flex-shrink: 0; width: 1.45rem; height: 1.45rem; border-radius: .45rem; background: #fff; color: transparent; box-shadow: inset 0 0 0 1.5px var(--gray-300); transition: background .15s, color .15s, box-shadow .15s; }
.bn-task-check svg { width: .95rem; height: .95rem; }
.bn-task-check:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px #16935a; }
.bn-task-items li.is-done .bn-task-check { background: #22b573; color: #fff; box-shadow: none; }
.bn-task-item-title { flex: 1; min-width: 0; color: var(--gray-900); font-size: .9rem; line-height: 1.6; }
.bn-task-items li.is-done .bn-task-item-title { color: var(--gray-500); text-decoration: line-through; text-decoration-color: rgba(23, 26, 43, .3); }
.bn-task-item-by { color: var(--gray-400); font-size: .72rem; white-space: nowrap; }
.bn-task-item-del { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .5rem; color: var(--gray-400); opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.bn-task-items li:hover .bn-task-item-del, .bn-task-item-del:focus-visible { opacity: 1; }
.bn-task-item-del:hover { background: #fdece8; color: #d0381e; }
.bn-task-item-del svg { width: .95rem; height: .95rem; }
.bn-task-empty { padding: .9rem .6rem; border: 1.5px dashed rgba(20, 20, 50, .12); border-radius: .85rem; background: transparent !important; color: var(--gray-500); font-size: .82rem; text-align: center; list-style: none; }

.bn-task-add, .bn-task-comment { display: flex; gap: .5rem; margin-top: .6rem; }
.bn-task-add input, .bn-task-comment textarea { flex: 1; min-width: 0; padding: .55rem .8rem; border-radius: .8rem; border: 0; background: var(--gray-50); color: var(--gray-950); font-size: .88rem; box-shadow: inset 0 0 0 1px rgba(20, 20, 50, .08); resize: vertical; }
.bn-task-add input:focus, .bn-task-comment textarea:focus { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-500) 55%, transparent); background: #fff; }
.bn-task-add button, .bn-task-comment button { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; height: 2.4rem; padding: 0 .95rem; border-radius: .8rem; background: var(--gray-950); color: #fff; font-size: .84rem; font-weight: 600; }
.bn-task-add button svg, .bn-task-comment button svg { width: 1rem; height: 1rem; }
.bn-task-comment { margin: 0 0 .9rem; }

.bn-task-desc { color: var(--gray-700); font-size: .9rem; line-height: 1.85; }

.bn-task-timeline { position: relative; display: flex; flex-direction: column; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.bn-task-timeline > li:not(.bn-task-empty) { position: relative; display: flex; gap: .7rem; }
.bn-task-timeline > li:not(.bn-task-empty):not(:last-child)::before { content: ""; position: absolute; top: 2.2rem; bottom: -.9rem; inset-inline-start: .95rem; width: 2px; background: var(--gray-100); }
.bn-task-entry { flex: 1; min-width: 0; padding: .1rem 0 0; }
.bn-task-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; }
.bn-task-entry-head b { color: var(--gray-950); font-weight: 600; }
.bn-task-entry-head time { margin-inline-start: auto; color: var(--gray-400); font-size: .74rem; }
.bn-task-entry p { margin-top: .3rem; color: var(--gray-700); font-size: .88rem; line-height: 1.8; }
.bn-task-entry p em { font-style: normal; font-weight: 600; color: var(--gray-900); }
.bn-task-entry p.is-remaining em { color: #c2410c; }
.bn-task-entry-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.bn-task-file-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .25rem .6rem; border-radius: .6rem; background: var(--gray-50); color: var(--gray-800); font-size: .78rem; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(20, 20, 50, .07); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bn-task-file-chip:hover { background: var(--gray-100); }
.bn-task-file-chip svg { flex-shrink: 0; width: .95rem; height: .95rem; color: var(--gray-500); }
.bn-task-chip { padding: .08rem .5rem; border-radius: .5rem; font-size: .72rem; font-weight: 600; }
.bn-task-chip.is-info { background: #e6f0ff; color: #2456c7; }
.bn-task-chip.is-gray { background: var(--gray-100); color: var(--gray-600); }
.bn-task-chip.is-danger { background: #fdece8; color: #c2341a; }
.bn-task-chip.is-primary { background: color-mix(in srgb, var(--primary-500) 14%, #fff); color: color-mix(in srgb, var(--primary-700, var(--primary-600)) 90%, #000); }
.bn-task-chip.is-warning { background: #fff1d6; color: #9a5b00; }
.bn-task-chip.is-success { background: #e2f6ea; color: #137a4a; }

.bn-task-avatar { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: .7rem; color: #fff; font-size: .82rem; font-weight: 600; }
.bn-task-avatar.tone-0 { background: linear-gradient(150deg, #6ea8ff, #3563e9); }
.bn-task-avatar.tone-1 { background: linear-gradient(150deg, #3ed9c3, #0d9488); }
.bn-task-avatar.tone-2 { background: linear-gradient(150deg, #ff7ea8, #e1306c); }
.bn-task-avatar.tone-3 { background: linear-gradient(150deg, #ffc46b, #e58a00); }
.bn-task-avatar.tone-4 { background: linear-gradient(150deg, #c38bff, #8338ec); }
.bn-task-avatar.tone-5 { background: linear-gradient(150deg, #a6e35a, #4fa21f); }

.bn-task-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem .75rem; margin: 0; }
.bn-task-facts .is-wide { grid-column: 1 / -1; }
.bn-task-facts dt { color: var(--gray-500); font-size: .75rem; }
.bn-task-facts dd { margin: .2rem 0 0; color: var(--gray-950); font-size: .88rem; font-weight: 500; }
.bn-task-status { display: inline-flex; padding: .12rem .6rem; border-radius: .55rem; font-size: .8rem; font-weight: 600; }
.bn-task-status.is-new { background: var(--gray-100); color: var(--gray-700); }
.bn-task-status.is-in_progress { background: #e6f0ff; color: #2456c7; }
.bn-task-status.is-review { background: #fff1d6; color: #9a5b00; }
.bn-task-status.is-done { background: #e2f6ea; color: #137a4a; }
.bn-task-due { display: inline-flex; align-items: center; gap: .3rem; }
.bn-task-due svg { width: .95rem; height: .95rem; }
.bn-task-due.is-late { padding: .12rem .5rem; border-radius: .5rem; background: #fdece8; color: #d0381e; font-weight: 600; }
.bn-task-due.is-today { padding: .12rem .5rem; border-radius: .5rem; background: #fff1e0; color: #c2410c; font-weight: 600; }
.bn-task-muted { color: var(--gray-400); }
.bn-task-link { display: inline-flex; align-items: flex-start; gap: .35rem; color: var(--primary-600); line-height: 1.6; text-decoration: none; }
.bn-task-link:hover { text-decoration: underline; }
.bn-task-link svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .2rem; }

.bn-task-people { display: flex; flex-direction: column; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.bn-task-people li { display: flex; align-items: center; gap: .6rem; }
.bn-task-people b { display: block; color: var(--gray-950); font-size: .88rem; font-weight: 600; }
.bn-task-people small { display: block; color: var(--gray-500); font-size: .74rem; }
.bn-task-people li.is-reviewer { margin-top: .2rem; padding-top: .7rem; border-top: 1px dashed rgba(20, 20, 50, .12); }
.bn-task-hint { margin-top: .7rem; color: var(--gray-500); font-size: .78rem; }

.bn-task-files { display: flex; flex-direction: column; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.bn-task-files a { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: .75rem; color: var(--gray-800); font-size: .84rem; text-decoration: none; }
.bn-task-files a:hover { background: var(--gray-50); }
.bn-task-files a span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bn-task-ext { display: grid; place-items: center; flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: .65rem; background: linear-gradient(150deg, #ff8a7a, #d93a2b); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .02em; }

.dark .bn-task-steps li { background: var(--gray-900); color: var(--gray-400); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-task-step-dot { background: var(--gray-800); color: var(--gray-400); }
.dark .bn-task-steps li.is-current { background: #fff; color: var(--gray-950); }
.dark .bn-task-steps li.is-current .bn-task-step-dot { background: var(--gray-950); color: #fff; }
.dark .bn-task-card { background: var(--gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-task-card-head h2, .dark .bn-task-percent, .dark .bn-task-facts dd, .dark .bn-task-people b, .dark .bn-task-entry-head b { color: #fff; }
.dark .bn-task-progress, .dark .bn-task-items li, .dark .bn-task-add input, .dark .bn-task-comment textarea, .dark .bn-task-file-chip { background: rgba(255, 255, 255, .05); color: var(--gray-200); }
.dark .bn-task-item-title, .dark .bn-task-desc, .dark .bn-task-entry p, .dark .bn-task-files a { color: var(--gray-300); }
.dark .bn-task-check { background: var(--gray-800); box-shadow: inset 0 0 0 1.5px var(--gray-600); }
.dark .bn-task-add button, .dark .bn-task-comment button { background: #fff; color: var(--gray-950); }
.dark .bn-task-timeline > li:not(.bn-task-empty):not(:last-child)::before { background: rgba(255, 255, 255, .08); }
.dark .bn-task-banner.is-returned { background: rgba(224, 69, 43, .14); color: #ffb4a3; box-shadow: inset 0 0 0 1px rgba(224, 69, 43, .3); }
.dark .bn-task-banner.is-review { background: rgba(245, 163, 0, .12); color: #fdcf7a; box-shadow: inset 0 0 0 1px rgba(245, 163, 0, .28); }
.dark .bn-task-banner.is-backlog { background: rgba(16, 185, 129, .12); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .3); }
.dark .bn-task-banner-icon { background: rgba(255, 255, 255, .08); }
.dark .bn-task-empty { border-color: rgba(255, 255, 255, .12); }

@media (max-width: 64rem) {
    .bn-task-grid { grid-template-columns: minmax(0, 1fr); }
    .bn-task-side { order: -1; }
    .bn-task-item-del { opacity: 1; }
}
@media (max-width: 40rem) {
    .bn-task-items li { flex-wrap: wrap; row-gap: .15rem; }
    .bn-task-item-title { flex-basis: calc(100% - 4.8rem); }
    .bn-task-item-by { order: 3; flex-basis: 100%; padding-inline-start: 2.1rem; }
    .bn-task-card { padding: .95rem .9rem; }
}

/* الباك لوق: مهام المشروع مقسمة على المراحل ومرتبة حسب الأهمية */
.bn-bl { display: flex; flex-direction: column; gap: .9rem; }
.bn-bl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.bn-bl-bar-side { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bn-bl-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.bn-bl-filters button { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: #fff; color: var(--gray-600); font-size: .84rem; box-shadow: 0 0 0 1px rgba(20, 20, 50, .09); }
.bn-bl-filters button em { font-style: normal; font-size: .72rem; padding: 0 .45rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); }
.bn-bl-filters button.is-on { background: var(--gray-950); color: #fff; box-shadow: none; }
.bn-bl-filters button.is-on em { background: rgba(255, 255, 255, .18); color: #fff; }
.bn-bl-limit { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: .8rem; background: #fff; color: var(--gray-600); font-size: .82rem; box-shadow: 0 0 0 1px rgba(20, 20, 50, .08); }
.bn-bl-limit b { color: var(--gray-950); }
.bn-bl-dots { display: inline-flex; gap: .2rem; }
.bn-bl-dots i { width: .9rem; height: .35rem; border-radius: 999px; background: var(--gray-200); }
.bn-bl-dots i.is-on { background: #16a34a; }

.bn-bl-phase { padding: 0; overflow: hidden; }
.bn-bl-phase-head, .bn-ph-head { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; }
.bn-bl-phase-head::-webkit-details-marker, .bn-ph-head::-webkit-details-marker { display: none; }
.bn-bl-phase-head b, .bn-ph-head b { color: var(--gray-950); font-size: .98rem; }
.bn-bl-phase-head small, .bn-ph-head small { margin-inline-start: auto; color: var(--gray-500); font-size: .78rem; }
.bn-bl-chev { width: 1.1rem; height: 1.1rem; color: var(--gray-400); transition: transform .15s; }
details[open] > summary .bn-bl-chev { transform: rotate(180deg); }
.bn-bl-phase[open] > .bn-bl-phase-head { border-bottom: 1px solid rgba(20, 20, 50, .07); }
.bn-bl-num { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #3b82f6; color: #fff; font-size: .78rem; font-weight: 700; }
.bn-bl-num svg { width: .95rem; height: .95rem; }
.bn-bl-phase.is-closed .bn-bl-num { background: #22b573; }
.bn-bl-phase.is-pending .bn-bl-num { background: var(--gray-300); }
.bn-bl-group { display: flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem .35rem; color: var(--gray-600); font-size: .78rem; font-weight: 700; }
.bn-bl-group i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gray-400); }
.bn-bl-group.is-free i { background: #10b981; }
.bn-bl-group.is-taken i { background: #3b82f6; }
.bn-bl-rows { list-style: none; margin: 0; padding: 0; }
.bn-bl-row { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 7.5rem minmax(9rem, auto); align-items: center; gap: .8rem; padding: .7rem 1.1rem; border-top: 1px solid rgba(20, 20, 50, .05); }
.bn-bl-row.is-free { background: color-mix(in srgb, #10b981 3%, transparent); }
.bn-bl-row.is-muted { opacity: .6; }
.bn-bl-row.is-done .bn-bl-title a { color: var(--gray-500); text-decoration: line-through; text-decoration-color: rgba(23, 26, 43, .25); }
.bn-bl-title { min-width: 0; }
.bn-bl-title a { color: var(--gray-950); font-size: .92rem; font-weight: 600; text-decoration: none; }
.bn-bl-title a:hover { color: var(--primary-600); }
.bn-bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; margin-top: .3rem; color: var(--gray-500); font-size: .76rem; }
.bn-bl-meta .is-late { color: #d0381e; font-weight: 600; }
.bn-bl-pct { color: var(--gray-500); font-size: .76rem; font-variant-numeric: tabular-nums; }
.bn-bl-req { padding: .05rem .45rem; border-radius: .45rem; background: #f5f3ff; color: #6d28d9; font-size: .72rem; box-shadow: inset 0 0 0 1px #ddd6fe; }
.bn-bl-reserved { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: .45rem; background: #fffbeb; color: #92400e; font-size: .72rem; box-shadow: inset 0 0 0 1px #fde68a; }
.bn-bl-reserved svg { width: .8rem; height: .8rem; }
.bn-bl-who { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--gray-800); font-size: .84rem; }
.bn-bl-who .bn-task-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .74rem; }
.bn-bl-who small { display: block; color: var(--gray-500); font-size: .72rem; }
.bn-bl-nobody { color: var(--gray-400); font-size: .82rem; }
.bn-bl-due { color: var(--gray-600); font-size: .82rem; font-variant-numeric: tabular-nums; }
.bn-bl-due.is-late { color: #d0381e; font-weight: 600; }
.bn-bl-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.bn-bl-pull { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .8rem; border-radius: .6rem; background: #ecfdf5; color: #047857; font-size: .8rem; font-weight: 600; box-shadow: inset 0 0 0 1px #a7f3d0; transition: background .15s; }
.bn-bl-pull:hover { background: #d1fae5; }
.bn-bl-pull svg { width: 1rem; height: 1rem; }
.bn-bl-blocked { display: inline-flex; align-items: center; gap: .3rem; color: var(--gray-400); font-size: .78rem; }
.bn-bl-blocked svg { width: .85rem; height: .85rem; }
.bn-bl-you { color: var(--gray-500); font-size: .78rem; }
.bn-bl-empty { padding: .9rem 1.1rem; color: var(--gray-500); font-size: .84rem; }
.bn-bl-empty-all { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2rem 1rem; text-align: center; list-style: none; }
.bn-bl-empty-all svg { width: 2rem; height: 2rem; color: var(--gray-400); }
.bn-bl-empty-all b { color: var(--gray-950); }
.bn-bl-empty-all p { max-width: 32rem; color: var(--gray-500); font-size: .86rem; line-height: 1.8; }

/* المراحل ومتطلباتها */
.bn-ph { display: flex; flex-direction: column; gap: .9rem; }
.bn-ph-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.bn-ph-bar p { color: var(--gray-500); font-size: .84rem; line-height: 1.7; }
.bn-ph-list { display: flex; flex-direction: column; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.bn-ph-item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .7rem; }
.bn-ph-item:has(> .bn-ph-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.bn-ph-rail { display: flex; flex-direction: column; align-items: center; }
.bn-ph-rail::after { content: ""; flex: 1; width: 2px; margin-top: .4rem; border-radius: 2px; background: rgba(20, 20, 50, .08); }
.bn-ph-item:last-child .bn-ph-rail::after { display: none; }
.bn-ph-dot { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #3b82f6; color: #fff; font-weight: 700; font-size: .88rem; }
.bn-ph-dot svg { width: 1.1rem; height: 1.1rem; }
.bn-ph-item.is-closed .bn-ph-dot { background: #22b573; }
.bn-ph-item.is-pending .bn-ph-dot { background: var(--gray-300); }
.bn-ph-card { padding: 0; overflow: hidden; }
.bn-ph-card[open] > .bn-ph-head { border-bottom: 1px solid rgba(20, 20, 50, .07); }
.bn-ph-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: .85rem 1.1rem .2rem; }
.bn-ph-meter-label { display: flex; justify-content: space-between; margin-bottom: .35rem; color: var(--gray-500); font-size: .78rem; }
.bn-ph-meter-label b { color: var(--gray-900); font-weight: 600; }
.bn-task-progress.is-req b { background: linear-gradient(90deg, #a5b4fc, #6366f1); }
.bn-ph-desc { padding: .5rem 1.1rem 0; color: var(--gray-600); font-size: .86rem; line-height: 1.8; }
.bn-ph-reqs { display: flex; flex-direction: column; gap: .4rem; list-style: none; margin: 0; padding: .8rem 1.1rem .2rem; }
.bn-ph-req { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .75rem; border-radius: .85rem; background: var(--gray-50); }
.bn-ph-req > .bn-task-check { margin-top: .1rem; }
.bn-ph-req.is-done > .bn-task-check { background: #22b573; color: #fff; box-shadow: none; }
.bn-ph-req-body { flex: 1; min-width: 0; }
.bn-ph-req-body > b { color: var(--gray-950); font-size: .9rem; font-weight: 600; }
.bn-ph-req.is-done .bn-ph-req-body > b { color: var(--gray-500); }
.bn-ph-note { margin-top: .3rem; color: var(--gray-600); font-size: .8rem; line-height: 1.7; }
.bn-ph-req-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem; }
.bn-ph-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding: .7rem 1.1rem .85rem; border-top: 1px dashed rgba(20, 20, 50, .1); }
.bn-ph-foot-start, .bn-ph-foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }

.dark .bn-bl-filters button, .dark .bn-bl-limit { background: var(--gray-900); color: var(--gray-300); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.dark .bn-bl-filters button.is-on { background: #fff; color: var(--gray-950); }
.dark .bn-bl-filters button.is-on em { background: var(--gray-100); color: var(--gray-700); }
.dark .bn-bl-limit b, .dark .bn-bl-phase-head b, .dark .bn-ph-head b, .dark .bn-bl-title a, .dark .bn-ph-req-body > b, .dark .bn-bl-empty-all b, .dark .bn-ph-meter-label b { color: #fff; }
.dark .bn-bl-row { border-top-color: rgba(255, 255, 255, .06); }
.dark .bn-bl-phase[open] > .bn-bl-phase-head, .dark .bn-ph-card[open] > .bn-ph-head { border-bottom-color: rgba(255, 255, 255, .08); }
.dark .bn-bl-who, .dark .bn-bl-due { color: var(--gray-300); }
.dark .bn-ph-req { background: rgba(255, 255, 255, .05); }
.dark .bn-ph-rail::after { background: rgba(255, 255, 255, .1); }
.dark .bn-ph-foot { border-top-color: rgba(255, 255, 255, .1); }
.dark .bn-bl-pull { background: rgba(16, 185, 129, .15); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .35); }

@media (max-width: 64rem) {
    .bn-bl-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .45rem; }
    .bn-bl-who { grid-column: 1; }
    .bn-bl-due { grid-column: 2; grid-row: 2; text-align: end; }
    .bn-bl-act { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 40rem) {
    .bn-ph-item { grid-template-columns: minmax(0, 1fr); }
    .bn-ph-rail { display: none; }
    .bn-ph-meters { grid-template-columns: 1fr; gap: .6rem; }
    .bn-ph-req { flex-wrap: wrap; }
    .bn-ph-req-act { flex-basis: 100%; justify-content: flex-start; padding-inline-start: 2.15rem; }
    .bn-bl-phase-head small, .bn-ph-head small { flex-basis: 100%; margin-inline-start: 0; }
}

/* دعوة الاجتماع بالواتساب */
.bn-wa-summary { margin-bottom: .7rem; color: var(--gray-600); font-size: .86rem; }
.bn-wa-summary b { color: var(--gray-950); }
.bn-wa-summary .is-warn { color: #b45309; }
.bn-wa-list { display: flex; flex-direction: column; gap: .35rem; max-height: 60vh; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.bn-wa-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: .8rem; background: var(--gray-50); }
.bn-wa-who { flex: 1; min-width: 0; }
.bn-wa-who b { display: block; color: var(--gray-950); font-size: .88rem; font-weight: 600; }
.bn-wa-who small { display: block; color: var(--gray-500); font-size: .74rem; direction: rtl; }
.bn-wa-done { color: #15803d; font-size: .74rem; white-space: nowrap; }
.bn-wa-btn { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .8rem; border-radius: .65rem; background: #25d366; color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bn-wa-btn:hover { background: #1eb858; }
.bn-wa-btn svg { width: 1.05rem; height: 1.05rem; }
.bn-wa-nophone { color: var(--gray-400); font-size: .76rem; white-space: nowrap; }
.dark .bn-wa-list li { background: rgba(255, 255, 255, .05); }
.dark .bn-wa-who b, .dark .bn-wa-summary b { color: #fff; }

/* قائمة ملفات المشروع */
.bn-pf-chev { width: 1rem; height: 1rem; margin-inline-start: .15rem; opacity: .7; }
.bn-pf-menu { display: flex; flex-direction: column; gap: .25rem; padding: .4rem; }
.bn-pf-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .8rem; border-radius: .9rem; }
.bn-pf-item:not(.is-locked):hover { background: var(--gray-50); }
.bn-pf-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: #e6f7f3; color: #0d9488; }
.bn-pf-icon.is-kpis { background: #e6f0ff; color: #2456c7; }
.bn-pf-icon.is-closure { background: #fff1d6; color: #9a5b00; }
.bn-pf-item.is-locked .bn-pf-icon { background: var(--gray-100); color: var(--gray-400); }
.bn-pf-icon svg { width: 1.3rem; height: 1.3rem; }
.bn-pf-body { flex: 1; min-width: 0; }
.bn-pf-body > b { display: flex; align-items: center; gap: .4rem; color: var(--gray-950); font-size: .92rem; }
.bn-pf-body > p { margin-top: .2rem; color: var(--gray-500); font-size: .78rem; line-height: 1.7; }
.bn-pf-item.is-locked .bn-pf-body > b { color: var(--gray-500); }
.bn-pf-formats { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.bn-pf-format { padding: .2rem .7rem; border-radius: .55rem; background: #fff; color: var(--gray-800); font-size: .76rem; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(20, 20, 50, .14); }
.bn-pf-format:hover { background: var(--gray-950); color: #fff; box-shadow: none; }
.dark .bn-pf-item:not(.is-locked):hover { background: rgba(255, 255, 255, .05); }
.dark .bn-pf-body > b { color: #fff; }
.dark .bn-pf-format { background: rgba(255, 255, 255, .06); color: var(--gray-100); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }

/* مؤشرات الأداء */
.bn-kpi { display: flex; flex-direction: column; gap: .9rem; }
.bn-kpi-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.bn-kpi-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.bn-kpi-summary > div { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 60, .06); }
.bn-kpi-summary span { color: var(--gray-500); font-size: .76rem; }
.bn-kpi-summary b { color: var(--gray-950); font-size: 1.35rem; line-height: 1.3; }
.bn-kpi-summary small { color: var(--gray-500); font-size: .72rem; }
.bn-kpi-summary .is-good b { color: #137a4a; }
.bn-kpi-summary .is-bad b { color: #c2341a; }
.bn-kpi-table { padding: 0; overflow: hidden; }
.bn-kpi-row { display: grid; grid-template-columns: minmax(0, 2.4fr) .8fr .8fr 1.3fr 1fr 1.25fr auto; align-items: center; gap: .8rem; padding: .8rem 1.1rem; }
.bn-kpi-row.is-head { padding-block: .6rem; background: var(--gray-50); color: var(--gray-500); font-size: .76rem; font-weight: 600; }
.bn-kpi-item + .bn-kpi-item, .bn-kpi-row.is-head + .bn-kpi-item { border-top: 1px solid rgba(20, 20, 50, .07); }
.bn-kpi-item > summary { cursor: pointer; list-style: none; }
.bn-kpi-item > summary::-webkit-details-marker { display: none; }
.bn-kpi-item > summary:hover { background: color-mix(in srgb, var(--gray-50) 60%, transparent); }
.bn-kpi-item[open] .bn-bl-chev { transform: rotate(180deg); }
.bn-kpi-name { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.bn-kpi-name b { color: var(--gray-950); font-size: .9rem; font-weight: 600; }
.bn-kpi-name small { color: var(--gray-500); font-size: .74rem; }
.bn-kpi-num { color: var(--gray-700); font-size: .88rem; font-variant-numeric: tabular-nums; }
.bn-kpi-num b { color: var(--gray-950); }
.bn-kpi-bar { display: flex; align-items: center; gap: .5rem; }
.bn-kpi-bar .bn-task-progress { flex: 1; height: .5rem; }
.bn-kpi-bar em { min-width: 2.6rem; color: var(--gray-800); font-size: .8rem; font-style: normal; font-weight: 700; text-align: end; }
.bn-kpi-bar em.is-muted { color: var(--gray-400); font-weight: 400; }
.bn-task-progress.is-success b { background: linear-gradient(90deg, #4fd88b, #16935a); }
.bn-task-progress.is-info b { background: linear-gradient(90deg, #93c5fd, #2563eb); }
.bn-task-progress.is-warning b { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.bn-task-progress.is-danger b { background: linear-gradient(90deg, #fca5a5, #dc2626); }
.bn-task-progress.is-gray b { background: var(--gray-300); }
.bn-kpi-last { color: var(--gray-500); font-size: .78rem; }
.bn-kpi-act { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.bn-kpi-detail { padding: .2rem 1.1rem .9rem; }
.bn-kpi-meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem .9rem; padding: .7rem .9rem; border-radius: .85rem; background: var(--gray-50); }
.bn-kpi-meta .is-wide { grid-column: 1 / -1; }
.bn-kpi-meta dt { color: var(--gray-500); font-size: .72rem; }
.bn-kpi-meta dd { color: var(--gray-900); font-size: .84rem; }
.bn-kpi-history { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.bn-kpi-history > b { color: var(--gray-950); font-size: .86rem; }
.bn-kpi-measure { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .45rem .7rem; border-radius: .75rem; box-shadow: inset 0 0 0 1px rgba(20, 20, 50, .07); }
.bn-kpi-measure-date { color: var(--gray-500); font-size: .78rem; font-variant-numeric: tabular-nums; }
.bn-kpi-measure > b { color: var(--gray-950); font-size: .9rem; }
.bn-kpi-measure-body { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; color: var(--gray-600); font-size: .8rem; }
.bn-kpi-empty { color: var(--gray-400); font-size: .8rem; }
.bn-kpi-none { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2rem 1rem; text-align: center; }
.bn-kpi-none svg { width: 2.2rem; height: 2.2rem; color: var(--gray-300); }
.bn-kpi-none b { color: var(--gray-900); }
.bn-kpi-none p { max-width: 34rem; color: var(--gray-500); font-size: .84rem; line-height: 1.8; }
.bn-kpi-auto-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-top: .4rem; }
.bn-kpi-auto-head b { color: var(--gray-950); font-size: .98rem; }
.bn-kpi-auto-head small { color: var(--gray-500); font-size: .8rem; }
.bn-kpi-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .6rem; }
.bn-kpi-auto-card { display: flex; flex-direction: column; gap: .2rem; padding: .85rem .95rem; }
.bn-kpi-auto-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; color: var(--gray-600); font-size: .8rem; }
.bn-kpi-auto-card > b { color: var(--gray-950); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.bn-kpi-auto-card > small { color: var(--gray-500); font-size: .74rem; line-height: 1.6; }
.bn-kpi-foot { color: var(--gray-500); font-size: .76rem; line-height: 1.7; }
.dark .bn-kpi-summary > div { background: var(--gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-kpi-summary b, .dark .bn-kpi-name b, .dark .bn-kpi-num b, .dark .bn-kpi-history > b, .dark .bn-kpi-measure > b, .dark .bn-kpi-auto-head b, .dark .bn-kpi-auto-card > b, .dark .bn-kpi-meta dd, .dark .bn-kpi-none b { color: #fff; }
.dark .bn-kpi-row.is-head, .dark .bn-kpi-meta { background: rgba(255, 255, 255, .04); }
.dark .bn-kpi-item + .bn-kpi-item, .dark .bn-kpi-row.is-head + .bn-kpi-item { border-top-color: rgba(255, 255, 255, .08); }
.dark .bn-kpi-measure { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-kpi-num, .dark .bn-kpi-bar em { color: var(--gray-200); }

@media (max-width: 64rem) {
    .bn-kpi-row.is-head { display: none; }
    .bn-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .55rem; }
    .bn-kpi-name { grid-column: 1 / -1; }
    .bn-kpi-num::before, .bn-kpi-bar::before { content: attr(data-label); display: block; color: var(--gray-500); font-size: .7rem; }
    .bn-kpi-bar { flex-wrap: wrap; }
    .bn-kpi-bar::before { flex-basis: 100%; }
    .bn-kpi-last { grid-column: 1 / 3; }
    .bn-kpi-act { grid-column: 3; }
    .bn-kpi-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bn-kpi-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* إقفال المشروع */
.bn-cl-status { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.15rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 60, .06); }
.bn-cl-status-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: color-mix(in srgb, var(--primary-500) 14%, #fff); color: var(--primary-600); }
.bn-cl-status.is-submitted .bn-cl-status-icon { background: #fff1d6; color: #9a5b00; }
.bn-cl-status.is-approved .bn-cl-status-icon { background: #e2f6ea; color: #137a4a; }
.bn-cl-status-icon svg { width: 1.4rem; height: 1.4rem; }
.bn-cl-status-body { flex: 1; min-width: 0; }
.bn-cl-status-body > b { color: var(--gray-950); font-size: 1rem; }
.bn-cl-status-body > p { margin-top: .15rem; color: var(--gray-600); font-size: .86rem; line-height: 1.8; }
.bn-cl-return { margin-top: .6rem; padding: .55rem .75rem; border-radius: .75rem; background: #fff1d6; color: #7a4800; font-size: .84rem; }
.bn-cl-missing { margin-top: .6rem; padding: .55rem .75rem; border-radius: .75rem; background: var(--gray-50); color: var(--gray-600); font-size: .82rem; line-height: 1.8; }
.bn-cl-missing span { color: var(--gray-900); font-weight: 600; }
.bn-cl-auto > b, .bn-cl-kpis > b { display: block; color: var(--gray-950); font-size: .88rem; font-weight: 600; }
.bn-cl-auto ul, .bn-cl-kpis ul { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.bn-cl-auto li { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem .75rem; border-radius: .8rem; background: var(--gray-50); }
.bn-cl-auto li .bn-task-check { background: #fdece8; color: #c2341a; box-shadow: none; }
.bn-cl-auto li.is-done .bn-task-check { background: #22b573; color: #fff; }
.bn-cl-auto li .bn-task-check svg { width: .95rem; height: .95rem; }
.bn-cl-auto-body { display: flex; flex-direction: column; }
.bn-cl-auto-body > span { color: var(--gray-900); font-size: .88rem; }
.bn-cl-auto-body small { color: var(--gray-500); font-size: .76rem; }
.bn-cl-kpis > small { color: var(--gray-500); font-size: .78rem; }
.bn-cl-kpis li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .5rem .75rem; border-radius: .8rem; box-shadow: inset 0 0 0 1px rgba(20, 20, 50, .07); font-size: .86rem; }
.bn-cl-kpis li > span:first-child { flex: 1; min-width: 12rem; color: var(--gray-900); }
.bn-cl-kpis li em { color: var(--gray-600); font-style: normal; font-size: .8rem; }
.bn-cl-note { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem .8rem; border-radius: .8rem; background: var(--gray-50); color: var(--gray-600); font-size: .82rem; line-height: 1.8; }
.bn-cl-note svg { flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: .2rem; color: var(--gray-400); }
.dark .bn-cl-status { background: var(--gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-cl-status-body > b, .dark .bn-cl-auto > b, .dark .bn-cl-kpis > b, .dark .bn-cl-auto-body > span, .dark .bn-cl-kpis li > span:first-child, .dark .bn-cl-missing span { color: #fff; }
.dark .bn-cl-auto li, .dark .bn-cl-missing, .dark .bn-cl-note { background: rgba(255, 255, 255, .05); }
.dark .bn-cl-kpis li { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.bn-kpi-act .fi-btn, .bn-kpi-auto-top .bn-task-chip, .bn-kpi-row .bn-task-chip { white-space: nowrap; }

/* نشر شواهد الحوكمة في الموقع */
.bn-pub { display: flex; flex-direction: column; gap: .7rem; font-size: .88rem; }
.bn-pub-lead, .bn-pub-empty { color: var(--gray-600); line-height: 1.8; }
.bn-pub-list { display: flex; flex-direction: column; gap: .35rem; max-height: 50vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.bn-pub-list li { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; border-radius: .8rem; background: var(--gray-50); }
.bn-pub-list svg { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--primary-600); }
.bn-pub-list li.is-same svg { color: #16a34a; }
.bn-pub-list b { display: block; color: var(--gray-950); font-weight: 600; word-break: break-word; }
.bn-pub-list small { display: block; color: var(--gray-500); font-size: .76rem; }
.bn-pub-private summary { cursor: pointer; color: var(--gray-500); font-size: .8rem; }
.bn-pub-private ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; color: var(--gray-600); font-size: .8rem; }
.dark .bn-pub-list li { background: rgba(255, 255, 255, .05); }
.dark .bn-pub-list b { color: #fff; }

/* بطاقة الحوكمة في الشاشة الرئيسية */
.bn-launch { position: relative; }
.bn-gov { display: block; width: min(100%, 19.5rem); margin: 1.4rem auto 0; padding: 1.05rem 1.1rem .95rem; border-radius: 1.4rem; background: rgba(255, 255, 255, .78); color: var(--bn-ink, #1c1b2e); text-align: start; text-decoration: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(20, 20, 60, .06), 0 24px 48px -28px rgba(40, 30, 110, .45); transition: transform .15s, box-shadow .15s; }
.bn-gov:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(20, 20, 60, .08), 0 28px 52px -26px rgba(40, 30, 110, .5); }
.bn-gov > span { display: flex; }
.bn-gov-top { align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.bn-gov-title { display: flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 700; }
.bn-gov-icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .65rem; background: linear-gradient(150deg, #34d399, #059669); color: #fff; }
.bn-gov-icon svg { width: 1rem; height: 1rem; }
.bn-gov-chip { padding: .12rem .55rem; border-radius: .5rem; background: #e2f6ea; color: #137a4a; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.bn-gov-chip.is-draft { background: #fff1d6; color: #9a5b00; }
.bn-gov-main { align-items: center; gap: 1rem; }
.bn-gov-ring { position: relative; flex-shrink: 0; width: 6.5rem; height: 6.5rem; }
.bn-gov-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bn-gov-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.bn-gov-ring circle.bn-gov-track { stroke: #e7eaf3; }
.bn-gov-score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; text-align: center; }
.bn-gov-score b { font-size: 1.45rem; font-weight: 800; }
.bn-gov-score small { font-size: .68rem; font-weight: 600; color: var(--bn-muted, #6b6a80); }
.bn-gov-std { display: flex; flex: 1; flex-direction: column; gap: .5rem; min-width: 0; }
.bn-gov-row { display: block; font-size: .74rem; color: #4b4a60; }
.bn-gov-row-head { display: flex; justify-content: space-between; gap: .4rem; }
.bn-gov-row-head b { color: var(--bn-ink, #1c1b2e); font-variant-numeric: tabular-nums; }
.bn-gov-bar { display: block; height: .38rem; margin-top: .22rem; border-radius: 9px; background: #e7eaf3; overflow: hidden; }
.bn-gov-bar i { display: block; height: 100%; border-radius: 9px; }
.bn-gov-foot { align-items: center; justify-content: space-between; gap: .5rem; margin-top: .85rem; padding-top: .7rem; border-top: 1px dashed rgba(20, 20, 60, .12); font-size: .76rem; }
.bn-gov-diff { color: #137a4a; font-weight: 700; }
.bn-gov-diff.is-down { color: #c2341a; }
.bn-gov-muted { color: var(--bn-muted, #6b6a80); }
.bn-gov-link { color: var(--primary-600); font-weight: 700; white-space: nowrap; }
.bn-gov-empty { font-size: .82rem; line-height: 1.8; color: #4b4a60; }
.dark .bn-gov { background: rgba(24, 24, 36, .72); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-gov-row, .dark .bn-gov-empty { color: var(--gray-300); }
.dark .bn-gov-row-head b { color: #fff; }
.dark .bn-gov-bar, .dark .bn-gov-ring circle.bn-gov-track { background: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .12); }
.dark .bn-gov-foot { border-top-color: rgba(255, 255, 255, .12); }
/* على الشاشات الواسعة: يسار أعلى الصفحة بجانب الشعار والتحية. */
@media (min-width: 75rem) {
    .bn-gov { position: absolute; top: 1.2rem; inset-inline-end: 0; margin: 0; }
}

/* خطوات إضافة النظام للشاشة الرئيسية في الآيفون */
.bn-ios-steps { margin: 0; padding-inline-start: 1.25rem; list-style: decimal; display: grid; gap: .6rem; font-size: .9rem; line-height: 1.7; }
.bn-ios-note { margin-top: 1rem; font-size: .8rem; color: var(--gray-500); }

/* ---------------- الإدارة المالية: القيود ومسار السند ---------------- */
.bn-entry { width: 100%; border-collapse: collapse; font-size: .84rem; }
.bn-entry th { padding: .5rem .6rem; border-bottom: 1px solid var(--gray-200); color: var(--gray-500); font-size: .76rem; font-weight: 600; text-align: start; }
.bn-entry td { padding: .55rem .6rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-900); vertical-align: top; }
.bn-entry .bn-entry-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn-entry .bn-entry-cr { padding-inline-start: 1.6rem; color: var(--gray-700); }
.bn-entry tfoot td { border-bottom: 0; background: var(--gray-50); font-weight: 700; }
.bn-fund-chip { display: inline-block; margin-top: .25rem; margin-inline-start: .2rem; padding: .05rem .45rem; border-radius: .4rem; background: #efeafc; color: #5b3fb5; font-size: .72rem; font-weight: 600; }
.bn-entry-empty { font-size: .84rem; line-height: 1.8; color: var(--gray-500); }
.bn-entries { display: grid; gap: 1rem; min-width: 0; }
.bn-entries-item { min-width: 0; overflow-x: auto; }
.bn-entries-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bn-entries-head small { margin-inline-start: auto; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.bn-entries-kind { padding: .05rem .5rem; border-radius: .4rem; background: var(--gray-100); color: var(--gray-600); font-size: .74rem; font-weight: 600; }
.bn-entries-kind.is-reversal { background: #fde8e8; color: #b91c1c; }
.bn-entries-desc { margin: .25rem 0 .5rem; font-size: .8rem; color: var(--gray-600); }
.bn-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.bn-steps li { position: relative; display: flex; gap: .7rem; padding-bottom: .9rem; }
.bn-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: .72rem; top: 1.6rem; bottom: .15rem; width: 2px; background: var(--gray-200); }
.bn-steps i { display: grid; flex: none; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gray-100); color: var(--gray-500); font-size: .74rem; font-style: normal; font-weight: 700; }
.bn-steps li.is-done i { background: #16a34a; color: #fff; }
.bn-steps li.is-now i { background: #f59e0b; color: #fff; }
.bn-steps b { display: block; font-size: .86rem; color: var(--gray-900); }
.bn-steps small { font-size: .76rem; color: var(--gray-500); }
.bn-note { padding: .7rem .85rem; border-radius: .75rem; background: var(--gray-50); color: var(--gray-600); font-size: .78rem; line-height: 1.8; }
.bn-callout { margin-bottom: 1rem; padding: .75rem .9rem; border-radius: .8rem; font-size: .82rem; line-height: 1.8; }
.bn-callout p { margin-top: .15rem; }
.bn-callout.is-danger { background: #fdf0f0; color: #8f1d1d; box-shadow: inset 0 0 0 1px #f5c2c2; }
.dark .bn-entry td { border-bottom-color: rgba(255, 255, 255, .06); color: var(--gray-200); }
.dark .bn-entry th { border-bottom-color: rgba(255, 255, 255, .1); }
.dark .bn-entry tfoot td, .dark .bn-note { background: rgba(255, 255, 255, .04); color: var(--gray-300); }
.dark .bn-steps b { color: #fff; }
.dark .bn-steps i, .dark .bn-entries-kind { background: rgba(255, 255, 255, .08); color: var(--gray-300); }
.dark .bn-steps li:not(:last-child)::after { background: rgba(255, 255, 255, .1); }
.dark .bn-fund-chip { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
.dark .bn-callout.is-danger { background: rgba(220, 38, 38, .12); color: #fca5a5; box-shadow: none; }

/* ---------------- الإدارة المالية: حركة النقدية والبنك، والقيود اليومية ---------------- */
.bn-fin { display: flex; flex-direction: column; gap: 1rem; }
.bn-fin-card { overflow: hidden; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07), 0 1px 2px rgba(0, 0, 0, .04); }
.bn-fin-empty { padding: 2rem 1.2rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07); text-align: center; }
.bn-fin-empty b { display: block; margin-bottom: .3rem; font-size: 1rem; }
.bn-fin-empty p { font-size: .88rem; color: var(--gray-500); }
.bn-fin-accounts { display: flex; flex-wrap: wrap; gap: .6rem; }
.bn-fin-account { display: flex; flex-direction: column; gap: .1rem; min-width: 10rem; padding: .65rem 1rem; border-radius: .85rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .08); font-size: .8rem; color: var(--gray-600); text-align: start; transition: box-shadow .15s; }
.bn-fin-account b { font-size: 1.08rem; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.bn-fin-account:hover { box-shadow: 0 0 0 1px var(--primary-400); }
.bn-fin-account.is-on { background: color-mix(in srgb, var(--primary-500) 6%, #fff); box-shadow: 0 0 0 2px var(--primary-600); }
.bn-fin-account.is-on span { color: var(--primary-700); font-weight: 600; }
.bn-fin-account.is-off { opacity: .65; }
.bn-fin-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.bn-fin-filters.is-split { justify-content: space-between; }
.bn-fin-field { display: inline-flex; align-items: center; gap: .45rem; height: 2.4rem; padding: 0 .75rem; border-radius: .6rem; background: #fff; box-shadow: 0 0 0 1px var(--gray-300); font-size: .85rem; color: var(--gray-700); }
.bn-fin-field small { color: var(--gray-500); font-size: .78rem; white-space: nowrap; }
.bn-fin-field input, .bn-fin-field select { min-width: 0; border: 0; padding: 0; background: transparent; font: inherit; color: var(--gray-900); font-weight: 600; outline: none; box-shadow: none; }
.bn-fin-field select { max-width: 13rem; padding-inline-end: 1.5rem; background-position: left .1rem center; }
.bn-fin-field.is-search input { width: 12rem; font-weight: 500; }
.bn-fin-field:focus-within { box-shadow: 0 0 0 2px var(--primary-500); }
.bn-fin-clear { height: 2.4rem; padding: 0 .8rem; border-radius: .6rem; color: var(--gray-600); font-size: .82rem; font-weight: 600; }
.bn-fin-clear:hover { background: var(--gray-100); }
.bn-fin-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.bn-fin-pill { display: inline-flex; align-items: center; gap: .4rem; height: 2.3rem; padding: 0 .95rem; border-radius: .75rem; background: #fff; color: var(--gray-600); font-size: .85rem; font-weight: 500; box-shadow: 0 0 0 1px rgba(20, 20, 50, .08); }
.bn-fin-pill i { padding: 0 .4rem; border-radius: .4rem; background: var(--gray-100); color: var(--gray-600); font-size: .74rem; font-style: normal; }
.bn-fin-pill:hover { color: var(--gray-900); }
.bn-fin-pill.is-on { background: var(--gray-950); color: #fff; box-shadow: none; }
.bn-fin-pill.is-on i { background: rgba(255, 255, 255, .18); color: #fff; }
.bn-fin-summary { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07); }
.bn-fin-summary > div { padding: .9rem 1.15rem; border-inline-start: 1px solid var(--gray-100); }
.bn-fin-summary > div:first-child { border-inline-start: 0; }
.bn-fin-summary small { display: block; margin-bottom: .15rem; font-size: .8rem; color: var(--gray-500); }
.bn-fin-summary b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.bn-fin-summary i { margin-inline-start: .25rem; font-size: .75rem; font-style: normal; color: var(--gray-500); }
.bn-fin-summary .is-in, .bn-fin-table .is-in { color: #15803d; }
.bn-fin-summary .is-out, .bn-fin-table .is-out { color: #dc2626; }
.bn-fin-table-wrap { overflow-x: auto; }
.bn-fin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.bn-fin-table th { padding: .65rem .85rem; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-600); font-size: .8rem; font-weight: 600; text-align: start; white-space: nowrap; }
.bn-fin-table td { padding: .65rem .85rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.bn-fin-table .is-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn-fin-table .is-c { text-align: center; }
.bn-fin-table .is-muted { color: var(--gray-400); }
.bn-fin-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bn-fin-table tr.is-opening td { background: var(--gray-50); }
.bn-fin-table tfoot td { border-bottom: 0; border-top: 1px solid var(--gray-200); background: var(--gray-50); font-weight: 700; }
.bn-fin-table .is-reversal { color: #b91c1c; }
.bn-fin-none { padding: 1.6rem !important; color: var(--gray-500); text-align: center; }
.bn-fin-detail { display: block; margin-top: .15rem; font-size: .76rem; color: var(--gray-500); }
.bn-fin-ref { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; white-space: nowrap; color: var(--gray-800); }
.bn-fin-ref::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gray-300); }
.bn-fin-ref.is-receipt::before { background: #16a34a; }
.bn-fin-ref.is-payment::before { background: #dc2626; }
.bn-fin-ref.is-transfer::before { background: #2563eb; }
a.bn-fin-ref:hover, .bn-fin-entry:hover, .bn-entries-link:hover b { color: var(--primary-600); text-decoration: underline; }
.bn-fin-entry { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.bn-fin-foot { font-size: .8rem; color: var(--gray-500); }
.bn-fin-balance { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.1rem; border-radius: .9rem; background: #eefaf2; box-shadow: inset 0 0 0 1px #bfe6cc; color: #14532d; font-size: .88rem; }
.bn-fin-balance svg { flex: none; width: 1.3rem; height: 1.3rem; color: #16a34a; }
.bn-fin-balance.is-bad { background: #fdf0f0; box-shadow: inset 0 0 0 1px #f5c2c2; color: #8f1d1d; }
.bn-fin-balance.is-bad svg { color: #dc2626; }
.bn-fin-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bn-fin-entry-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .9rem 1.1rem .75rem; }
.bn-fin-entry-card header b { font-size: 1rem; }
.bn-fin-entry-card header p { margin-top: .15rem; font-size: .84rem; color: var(--gray-600); }
.bn-fin-entry-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; font-size: .78rem; color: var(--gray-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bn-fin-entry-note { margin: -.3rem 1.1rem .5rem; font-size: .8rem; color: #b91c1c; }
.bn-fin-entry-card .bn-entry th, .bn-fin-entry-card .bn-entry td { padding-inline: 1.1rem; }
.bn-fin-entry-card footer { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .55rem 1.1rem; border-top: 1px solid var(--gray-100); background: var(--gray-50); font-size: .76rem; color: var(--gray-500); }
.bn-entries-kind.is-receipt { background: #e7f6ec; color: #15803d; }
.bn-entries-kind.is-transfer { background: #e8f0fe; color: #1d4ed8; }
.bn-entries-kind.is-opening { background: color-mix(in srgb, var(--primary-500) 12%, #fff); color: var(--primary-700); }
.bn-entries-kind.is-reversal { background: #fde8e8; color: #b91c1c; }
@media (max-width: 768px) {
    .bn-fin-summary { grid-template-columns: repeat(2, 1fr); }
    .bn-fin-summary > div:nth-child(3) { border-inline-start: 0; }
    .bn-fin-summary > div:nth-child(n+3) { border-top: 1px solid var(--gray-100); }
    .bn-fin-entries { grid-template-columns: minmax(0, 1fr); }
    .bn-fin-account { flex: 1 1 calc(50% - .6rem); min-width: 0; }
    .bn-fin-hide-sm { display: none; }
    .bn-fin-field { flex: 1 1 auto; }
    .bn-fin-field.is-search input { width: 100%; }
    .bn-fin-table td, .bn-fin-table th { padding: .55rem .6rem; }
    .bn-fin-field.is-date { flex: 1 1 calc(50% - .3rem); }
}
/* الجوال: كل حركة بطاقة صغيرة (التاريخ والمرجع، البيان، المبلغ والرصيد بعده). */
@media (max-width: 640px) {
    .bn-fin-statement thead { display: none; }
    .bn-fin-statement, .bn-fin-statement tbody, .bn-fin-statement tfoot { display: block; }
    .bn-fin-statement tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref date" "label label" "account account" "amount bal"; gap: .25rem .8rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-100); }
    .bn-fin-statement td { padding: 0 !important; border: 0 !important; background: transparent !important; }
    .bn-fin-statement .is-empty { display: none; }
    .bn-fin-statement .c-date { grid-area: date; text-align: end; font-size: .78rem; color: var(--gray-500); }
    .bn-fin-statement .c-ref { grid-area: ref; }
    .bn-fin-statement .c-label { grid-area: label; font-weight: 500; }
    .bn-fin-statement .c-account { grid-area: account; font-size: .78rem; color: var(--gray-500); }
    .bn-fin-statement .c-in, .bn-fin-statement .c-out { grid-area: amount; text-align: start; font-weight: 700; }
    .bn-fin-statement .c-bal { grid-area: bal; font-size: .8rem; color: var(--gray-600); }
    .bn-fin-statement .c-bal::before { content: "الرصيد "; color: var(--gray-400); }
    .bn-fin-statement tr.is-opening { background: var(--gray-50); }
    .bn-fin-statement tr.is-opening .c-bal { font-size: .9rem; color: var(--gray-900); }
    .bn-fin-statement tfoot tr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "label label label" "in out bal"; background: var(--gray-50); }
    .bn-fin-statement tfoot .c-in { grid-area: in; }
    .bn-fin-statement tfoot .c-out { grid-area: out; }
    .bn-fin-statement tfoot .c-bal { grid-area: bal; color: var(--gray-900); font-weight: 700; }
    .bn-fin-statement tfoot .c-in::before, .bn-fin-statement tfoot .c-out::before, .bn-fin-statement tfoot .c-bal::before { display: block; font-size: .72rem; font-weight: 500; color: var(--gray-500); }
    .bn-fin-statement tfoot .c-in::before { content: "الوارد"; }
    .bn-fin-statement tfoot .c-out::before { content: "المنصرف"; }
    .bn-fin-statement tfoot .c-bal::before { content: "آخر المدة"; }
    .bn-fin-statement .bn-fin-none { grid-column: 1 / -1; }
}
.dark .bn-fin-card, .dark .bn-fin-empty, .dark .bn-fin-account, .dark .bn-fin-summary, .dark .bn-fin-field, .dark .bn-fin-pill { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); color: var(--gray-300); }
.dark .bn-fin-account b, .dark .bn-fin-field input, .dark .bn-fin-field select, .dark .bn-fin-ref { color: #fff; }
.dark .bn-fin-account.is-on { box-shadow: 0 0 0 2px var(--primary-500); }
.dark .bn-fin-pill.is-on { background: #fff; color: var(--gray-950); }
.dark .bn-fin-table th, .dark .bn-fin-table tr.is-opening td, .dark .bn-fin-table tfoot td, .dark .bn-fin-entry-card footer { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.dark .bn-fin-table td, .dark .bn-fin-summary > div { border-color: rgba(255, 255, 255, .06); color: var(--gray-200); }
.dark .bn-fin-balance { background: rgba(22, 163, 74, .12); box-shadow: none; color: #86efac; }
.dark .bn-fin-balance.is-bad { background: rgba(220, 38, 38, .12); color: #fca5a5; }

/* ---------------- الإدارة المالية: نظرة عامة ---------------- */
.bn-ov-alert { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-radius: .9rem; background: #fff7e6; box-shadow: inset 0 0 0 1px #f7d58a; color: #8a5a00; font-size: .9rem; }
.bn-ov-alert svg { flex: none; width: 1.4rem; height: 1.4rem; }
.bn-ov-alert b { color: #6b4500; }
.bn-ov-alert a { margin-inline-start: auto; color: #8a5a00; font-weight: 700; white-space: nowrap; }
.bn-ov-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.bn-ov-total { position: relative; overflow: hidden; grid-column: span 2; padding: 1.25rem 1.35rem; border-radius: 1.1rem; background: linear-gradient(135deg, oklch(.36 .06 195), oklch(.52 .1 185)); color: #fff; box-shadow: 0 18px 40px -24px rgba(9, 60, 60, .8); }
.bn-ov-total::after { content: ""; position: absolute; inset-inline-start: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.bn-ov-total small { display: block; font-size: .85rem; opacity: .85; }
.bn-ov-big { margin: .15rem 0 .8rem; font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bn-ov-big i, .bn-ov-amount i, .bn-ov-kpi i { margin-inline-start: .3rem; font-size: .8rem; font-style: normal; font-weight: 500; opacity: .75; }
.bn-ov-split { position: relative; z-index: 1; display: flex; gap: .6rem; }
.bn-ov-split span { flex: 1; padding: .5rem .7rem; border-radius: .7rem; background: rgba(255, 255, 255, .12); font-size: .8rem; }
.bn-ov-split b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bn-ov-account { display: flex; flex-direction: column; gap: .65rem; padding: 1.05rem 1.15rem; color: inherit; transition: box-shadow .15s; }
.bn-ov-account:hover { box-shadow: 0 0 0 1px var(--primary-400), 0 1px 2px rgba(0, 0, 0, .04); }
.bn-ov-account-top { display: flex; align-items: center; gap: .7rem; }
.bn-ov-account-top b { display: block; font-size: .95rem; color: var(--gray-950); }
.bn-ov-account-top small { font-size: .77rem; color: var(--gray-500); }
.bn-ov-ico { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: #e8f1fb; color: #1f5fa8; }
.bn-ov-ico.is-cash { background: #e7f6ec; color: #15803d; }
.bn-ov-ico svg { width: 1.3rem; height: 1.3rem; }
.bn-ov-amount { font-size: 1.5rem; font-weight: 700; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.bn-ov-mini { display: flex; justify-content: space-between; gap: .5rem; padding-top: .55rem; border-top: 1px dashed var(--gray-200); font-size: .8rem; color: var(--gray-600); }
.bn-ov-mini b, .bn-ov-kpi, .bn-ov-bar-l b, .bn-ov-fund-l span:last-child { font-variant-numeric: tabular-nums; }
.bn-ov .is-in { color: #15803d; }
.bn-ov .is-out { color: #dc2626; }
.bn-ov .is-transfer { color: #1d4ed8; }
.bn-ov-month { display: flex; justify-content: flex-start; }
.bn-ov-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bn-ov-box { padding: 1.15rem 1.25rem; }
.bn-ov-box h3, .bn-ov-table-head h3 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; font-size: 1rem; font-weight: 700; color: var(--gray-950); }
.bn-ov-box h3 small { font-size: .78rem; font-weight: 500; color: var(--gray-500); }
.bn-ov-kpi { margin: -.25rem 0 .85rem; font-size: 1.45rem; font-weight: 700; }
.bn-ov-kpi.is-fund { color: #5b3fb5; }
.bn-ov-bars { display: flex; flex-direction: column; gap: .7rem; }
.bn-ov-bar-l { display: flex; justify-content: space-between; margin-bottom: .3rem; font-size: .84rem; color: var(--gray-700); }
.bn-ov-bar { height: .55rem; overflow: hidden; border-radius: 1rem; background: var(--gray-100); }
.bn-ov-bar i { display: block; height: 100%; border-radius: 1rem; }
.bn-ov-foot { display: flex; justify-content: space-between; margin-top: .95rem; padding-top: .75rem; border-top: 1px solid var(--gray-100); font-size: .85rem; color: var(--gray-600); }
.bn-ov-fund { display: flex; flex-direction: column; gap: .25rem; padding: .6rem 0; border-bottom: 1px solid var(--gray-100); }
.bn-ov-fund:last-child { border-bottom: 0; padding-bottom: 0; }
.bn-ov-fund-l { display: flex; justify-content: space-between; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--gray-900); }
.bn-ov-fund small { font-size: .75rem; color: var(--gray-500); }
.bn-ov-none { font-size: .84rem; line-height: 1.8; color: var(--gray-500); }
.bn-ov-none.is-pad { padding: 1.2rem; }
.bn-ov-table-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.15rem .4rem; }
.bn-ov-table-head h3 { margin: 0; }
.bn-ov-link { color: var(--primary-600); font-size: .84rem; font-weight: 600; }
.bn-ov-link:hover { text-decoration: underline; }
.bn-ov-chip { display: inline-flex; padding: .1rem .55rem; border-radius: .45rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.bn-ov-chip.is-pending { background: #fff4dc; color: #a15c00; }
.bn-ov-chip.is-approved { background: #e7f6ec; color: #15803d; }
.bn-ov-chip.is-cancelled { background: #fde8e8; color: #b91c1c; }
.bn-ov-ops .c-bal::before { content: none !important; }
@media (max-width: 1024px) {
    .bn-ov-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .bn-ov-total { grid-column: auto; }
    .bn-ov-big { font-size: 1.9rem; }
    .bn-ov-alert { flex-wrap: wrap; font-size: .85rem; }
    .bn-ov-month .bn-fin-field { flex: 1 1 auto; }
}
.dark .bn-ov-account-top b, .dark .bn-ov-amount, .dark .bn-ov-box h3, .dark .bn-ov-table-head h3, .dark .bn-ov-fund-l { color: #fff; }
.dark .bn-ov-bar { background: rgba(255, 255, 255, .08); }
.dark .bn-ov-alert { background: rgba(245, 158, 11, .12); box-shadow: none; color: #fcd34d; }
.dark .bn-ov-alert b, .dark .bn-ov-alert a { color: #fde68a; }

/* ---------------- الفواتير: النموذج، وورقة الفاتورة، والسداد، والربط مع الزكاة ---------------- */
.bn-inv-totals { display: flex; flex-direction: column; gap: .4rem; width: min(100%, 21rem); margin-inline-start: auto; margin-top: .5rem; padding: .9rem 1rem; border-radius: .85rem; background: var(--gray-50); font-size: .88rem; }
.bn-inv-totals div { display: flex; justify-content: space-between; gap: 1rem; }
.bn-inv-totals b { font-variant-numeric: tabular-nums; }
.bn-inv-grand { padding-top: .5rem; border-top: 1px solid var(--gray-200); font-size: 1.08rem; font-weight: 700; }
.bn-inv-grand small { font-size: .72rem; font-weight: 500; color: var(--gray-500); }
.bn-inv-warn a { color: var(--primary-600); font-weight: 700; text-decoration: underline; }

.bn-inv-paper { --inv: #0f766e; position: relative; padding: 1.8rem 1.9rem 1.2rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .08), 0 12px 30px -18px rgba(0, 0, 0, .25); color: #1f2937; font-size: .82rem; }
.bn-inv-paper.is-draft { background-image: repeating-linear-gradient(135deg, rgba(220, 38, 38, .03) 0 14px, transparent 14px 28px); }
.bn-inv-draft { position: absolute; top: -.7rem; inset-inline-start: 50%; transform: translateX(50%); padding: .2rem .8rem; border-radius: 1rem; background: #fdecec; color: #b91c1c; font-size: .75rem; font-weight: 700; }
.bn-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 3px solid var(--inv); }
.bn-inv-org { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.bn-inv-org img { width: 3.4rem; height: 3.4rem; flex: none; border-radius: .8rem; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); }
.bn-inv-org b { display: block; font-size: 1rem; }
.bn-inv-org small { display: block; color: var(--gray-500); font-size: .72rem; line-height: 1.6; }
.bn-inv-title { text-align: end; }
.bn-inv-title b { display: block; font-size: 1.3rem; color: var(--inv); }
.bn-inv-title small { display: block; direction: ltr; font-size: .76rem; color: var(--gray-500); }
.bn-inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .8rem; align-items: start; padding: 1rem 0; }
.bn-inv-meta small { display: block; color: var(--gray-500); font-size: .7rem; }
.bn-inv-meta b { font-size: .86rem; font-variant-numeric: tabular-nums; }
.bn-inv-qr { justify-self: end; width: 6.6rem; height: 6.6rem; padding: .3rem; border-radius: .45rem; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); }
.bn-inv-qr svg { display: block; width: 100%; height: 100%; }
.bn-inv-qr.is-waiting { display: grid; place-items: center; padding: .6rem; background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200); color: var(--gray-500); font-size: .68rem; line-height: 1.6; text-align: center; }
.bn-inv-reason { margin-bottom: .9rem; padding: .6rem .8rem; border-radius: .6rem; background: #fff7ed; color: #9a3412; }
.bn-inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
.bn-inv-party { padding: .75rem .85rem; border-radius: .6rem; background: var(--gray-50); }
.bn-inv-party h4 { margin-bottom: .3rem; color: var(--inv); font-size: .72rem; font-weight: 700; }
.bn-inv-party b { display: block; margin-bottom: .2rem; font-size: .86rem; }
.bn-inv-party div { display: flex; justify-content: space-between; gap: .6rem; color: var(--gray-600); font-size: .74rem; line-height: 1.7; }
.bn-inv-party div span:last-child { text-align: end; }
.bn-inv-table-wrap { overflow-x: auto; }
.bn-inv-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.bn-inv-table th { padding: .5rem; background: var(--inv); color: #fff; font-weight: 600; text-align: start; white-space: nowrap; }
.bn-inv-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.bn-inv-table .is-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn-inv-vatnote { display: block; color: var(--gray-500); font-size: .7rem; }
.bn-inv-empty { padding: 1.2rem; color: var(--gray-500); text-align: center; }
.bn-inv-foot { display: grid; grid-template-columns: 1fr 17rem; gap: 1rem; margin-top: .9rem; }
.bn-inv-note { color: var(--gray-600); font-size: .76rem; line-height: 1.8; }
.bn-inv-sum div { display: flex; justify-content: space-between; gap: .8rem; padding: .32rem 0; border-bottom: 1px solid var(--gray-100); font-size: .8rem; font-variant-numeric: tabular-nums; }
.bn-inv-sum div.is-sub { color: var(--gray-500); font-size: .72rem; }
.bn-inv-sum .bn-inv-grand { margin-top: .25rem; padding: .5rem .65rem; border: 0; border-radius: .5rem; background: var(--inv); color: #fff; font-size: .92rem; }
.bn-inv-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: .7rem; border-top: 1px solid var(--gray-100); color: var(--gray-400); font-size: .66rem; }

.bn-inv-zatca-ok { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; padding: .8rem .9rem; border-radius: .8rem; background: #eefaf2; box-shadow: inset 0 0 0 1px #bfe6cc; }
.bn-inv-zatca-ok svg { width: 1.9rem; height: 1.9rem; flex: none; color: #16a34a; }
.bn-inv-zatca-ok b { display: block; color: #14532d; font-size: .92rem; }
.bn-inv-zatca-ok small { color: #3f7a55; font-size: .75rem; }
.bn-inv-kv { display: flex; flex-direction: column; gap: .5rem; font-size: .82rem; }
.bn-inv-kv div { display: flex; justify-content: space-between; gap: .8rem; }
.bn-inv-kv dt { color: var(--gray-500); }
.bn-inv-kv dd { font-weight: 600; text-align: end; }
.bn-inv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }

.bn-inv-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-bottom: .7rem; }
.bn-inv-pay div { padding: .55rem .65rem; border-radius: .7rem; background: var(--gray-50); }
.bn-inv-pay small { display: block; color: var(--gray-500); font-size: .72rem; }
.bn-inv-pay b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.bn-inv-pay b.is-in { color: #15803d; }
.bn-inv-pay b.is-due { color: #a15c00; }
.bn-inv-progress { height: .45rem; margin-bottom: .6rem; overflow: hidden; border-radius: 1rem; background: var(--gray-100); }
.bn-inv-progress i { display: block; height: 100%; border-radius: 1rem; background: #16a34a; }
.bn-inv-due { margin-bottom: .6rem; color: var(--gray-600); font-size: .8rem; }
.bn-inv-due.is-late { color: #b91c1c; font-weight: 600; }
.bn-inv-vouchers { display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.bn-inv-vouchers li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ref amount badge" "meta meta meta"; gap: .15rem .6rem; align-items: center; padding: .55rem .7rem; border-radius: .7rem; background: var(--gray-50); font-size: .8rem; }
.bn-inv-vouchers a { grid-area: ref; color: var(--primary-600); font-weight: 700; }
.bn-inv-vouchers span { grid-area: meta; color: var(--gray-500); font-size: .74rem; }
.bn-inv-vouchers b { grid-area: amount; font-variant-numeric: tabular-nums; text-align: end; }

.bn-zatca-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: .8rem; }
.bn-zatca-step { display: flex; align-items: center; gap: .6rem; padding: .75rem .85rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .08); color: var(--gray-500); font-size: .76rem; }
.bn-zatca-step i { display: grid; flex: none; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--gray-100); font-style: normal; font-weight: 700; }
.bn-zatca-step b { display: block; color: var(--gray-900); font-size: .88rem; }
.bn-zatca-step.is-done i { background: #16a34a; color: #fff; }
.bn-zatca-step.is-now { box-shadow: 0 0 0 2px var(--primary-600); }
.bn-zatca-step.is-now i { background: var(--primary-600); color: #fff; }
.bn-zatca-step.is-off { opacity: .55; }
.bn-zatca-step.is-bad { box-shadow: 0 0 0 2px #dc2626; }
.bn-zatca-step.is-bad i { background: #dc2626; color: #fff; }
.bn-steps li.is-bad i { background: #dc2626; color: #fff; }
.bn-note-warn { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #fde68a; }
.bn-note-warn a, .bn-note-bad a { margin-inline-start: .35rem; color: inherit; font-weight: 700; text-decoration: underline; }
.bn-note-bad { background: #fef2f2; color: #991b1b; box-shadow: inset 0 0 0 1px #fecaca; }
.bn-zatca-steps + .bn-note, .bn-zatca-linked + .bn-note, .bn-note + .bn-note { margin-top: .6rem; }

/* الربط مع الزكاة: شريط "مربوطة"، وخطوات الرمز، وفحص الامتثال */
.bn-zatca-linked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1rem 1.2rem; border-radius: 1rem; background: #0f7a45; color: #fff; }
.bn-zatca-linked.is-test { background: #1f4f8f; }
.bn-zatca-linked-head { display: flex; align-items: center; gap: .8rem; }
.bn-zatca-linked-head svg { width: 2.2rem; height: 2.2rem; flex: none; }
.bn-zatca-linked-head b { display: block; font-size: 1.05rem; }
.bn-zatca-linked-head small { opacity: .85; font-size: .78rem; }
.bn-zatca-linked dl { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0; }
.bn-zatca-linked dt { opacity: .8; font-size: .72rem; }
.bn-zatca-linked dd { margin: 0; font-weight: 700; font-size: .92rem; }
.bn-zatca-howto { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: howto; font-size: .86rem; line-height: 1.7; }
.bn-zatca-howto li { display: flex; gap: .6rem; counter-increment: howto; }
.bn-zatca-howto li::before { content: counter(howto); display: grid; flex: none; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--gray-100); color: var(--gray-600); font-size: .72rem; font-weight: 700; }
.bn-zatca-sent { margin-top: 1rem; padding: .8rem .9rem; border-radius: .8rem; background: var(--gray-50); font-size: .8rem; line-height: 1.8; }
.bn-zatca-sent b { display: block; margin-bottom: .2rem; font-size: .86rem; }
.bn-zatca-sent p { margin: 0; color: var(--gray-600); }
.bn-zatca-sent span { color: var(--primary-700); font-weight: 600; }
.bn-zatca-lock { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .7rem .85rem; border-radius: .75rem; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; color: #92400e; font-size: .8rem; line-height: 1.8; }
.bn-zatca-lock svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .25rem; }
.bn-otp-input { font-size: 1.35rem !important; font-weight: 700; letter-spacing: .55em; text-align: center; font-variant-numeric: tabular-nums; }
.bn-zatca-checks { margin-top: .8rem; padding: 1rem 1.1rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .08); }
.bn-zatca-checks > b { display: block; font-size: .95rem; }
.bn-zatca-checks > small { color: var(--gray-500); font-size: .78rem; }
.bn-zatca-checks ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.bn-zatca-checks li { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .55rem .7rem; border-radius: .7rem; background: var(--gray-50); font-size: .8rem; }
.bn-zatca-checks li i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: .7rem; font-style: normal; font-weight: 700; color: #fff; }
.bn-zatca-checks li.is-ok i { background: #16a34a; }
.bn-zatca-checks li.is-bad { background: #fef2f2; }
.bn-zatca-checks li.is-bad i { background: #dc2626; }
.bn-zatca-checks li small { flex-basis: 100%; color: #991b1b; font-size: .72rem; }

/* حالة الفاتورة عند الهيئة */
.bn-inv-zatca-state { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; padding: .8rem .9rem; border-radius: .8rem; }
.bn-inv-zatca-state svg { width: 1.9rem; height: 1.9rem; flex: none; }
.bn-inv-zatca-state b { display: block; font-size: .92rem; }
.bn-inv-zatca-state small { font-size: .75rem; line-height: 1.7; }
.bn-inv-zatca-state.is-success { background: #eefaf2; box-shadow: inset 0 0 0 1px #bfe6cc; color: #14532d; }
.bn-inv-zatca-state.is-success svg { color: #16a34a; }
.bn-inv-zatca-state.is-warning { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; color: #92400e; }
.bn-inv-zatca-state.is-danger { background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; color: #991b1b; }
.bn-inv-zatca-msgs { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 .85rem; padding: 0; list-style: none; font-size: .76rem; line-height: 1.6; }
.bn-inv-zatca-msgs li { padding: .45rem .6rem; border-radius: .6rem; background: var(--gray-50); color: var(--gray-700); }
.bn-inv-zatca-msgs li.is-error { background: #fef2f2; color: #991b1b; }
.bn-inv-zatca-msgs li.is-warning { background: #fffbeb; color: #92400e; }
.bn-inv-zatca-msgs code { margin-inline-end: .35rem; font-size: .7rem; font-weight: 700; }
.bn-inv-link { color: var(--primary-600); font-weight: 700; }
.bn-inv-zatca-test { margin: .7rem 0 0; color: #1f4f8f; font-size: .74rem; }

.dark .bn-inv-totals, .dark .bn-inv-pay div, .dark .bn-inv-vouchers li { background: rgba(255, 255, 255, .05); }
.dark .bn-zatca-step { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-zatca-step b { color: #fff; }
.dark .bn-zatca-checks { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-zatca-checks li, .dark .bn-zatca-sent, .dark .bn-inv-zatca-msgs li { background: rgba(255, 255, 255, .05); color: var(--gray-300); }
.dark .bn-zatca-sent p { color: var(--gray-300); }
.dark .bn-zatca-howto li::before { background: rgba(255, 255, 255, .08); color: var(--gray-300); }
.dark .bn-note-warn, .dark .bn-zatca-lock, .dark .bn-inv-zatca-state.is-warning, .dark .bn-inv-zatca-msgs li.is-warning { background: rgba(245, 158, 11, .12); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); color: #fcd34d; }
.dark .bn-note-bad, .dark .bn-inv-zatca-state.is-danger, .dark .bn-inv-zatca-msgs li.is-error, .dark .bn-zatca-checks li.is-bad { background: rgba(220, 38, 38, .12); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .3); color: #fca5a5; }
.dark .bn-inv-zatca-state.is-success { background: rgba(22, 163, 74, .12); box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .3); color: #86efac; }

@media (max-width: 640px) {
    .bn-inv-paper { padding: 1.1rem .9rem .9rem; }
    .bn-inv-head { flex-direction: column-reverse; }
    .bn-inv-title { text-align: start; }
    .bn-inv-parties, .bn-inv-foot { grid-template-columns: 1fr; }
    .bn-inv-qr { width: 8rem; height: 8rem; justify-self: center; grid-column: 1 / -1; order: -1; }
    .bn-zatca-steps { grid-template-columns: 1fr 1fr; }
    .bn-zatca-checks ul { grid-template-columns: 1fr; }
    .bn-zatca-linked dl { gap: .5rem 1.1rem; }
}

/* اشتراكنا: مدة الاشتراك وفواتير بنوفا للجمعية */
.bn-sub { display: flex; flex-direction: column; gap: 1rem; }
.bn-sub-due { display: flex; align-items: center; gap: .7rem; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: .9rem; padding: .75rem 1rem; line-height: 1.7; }
.bn-sub-due svg { width: 1.3rem; height: 1.3rem; flex: none; }
.bn-sub-due a { margin-inline-start: auto; font-weight: 700; color: inherit; text-decoration: underline; white-space: nowrap; }
.bn-sub-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; }
.bn-sub-plan { background: linear-gradient(135deg, #0f766e, #155e75); color: #fff; border-radius: 1.2rem; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.bn-sub-plan small { opacity: .85; }
.bn-sub-plan-t { font-size: 1.3rem; font-weight: 800; }
.bn-sub-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; opacity: .95; }
.bn-sub-bar { height: .55rem; background: rgba(255, 255, 255, .25); border-radius: 999px; overflow: hidden; }
.bn-sub-bar i { display: block; height: 100%; background: #5eead4; border-radius: 999px; }
.bn-sub-pay, .bn-sub-card { background: #fff; border-radius: 1.2rem; box-shadow: 0 0 0 1px rgba(20, 20, 60, .06), 0 10px 24px -20px rgba(20, 20, 60, .5); }
.bn-sub-pay { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.bn-sub-pay h3, .bn-sub-card h3 { font-weight: 800; font-size: 1.05rem; }
.bn-sub-pay p { line-height: 1.8; }
.bn-sub-pay small { color: #64748b; }
.bn-sub-card-h { padding: 1rem 1.3rem .4rem; }
.bn-sub-empty { padding: 0 1.3rem 1.2rem; color: #64748b; }
.bn-sub-table { width: 100%; border-collapse: collapse; }
.bn-sub-table th { text-align: start; font-size: .85rem; color: #475569; background: #f8fafc; padding: .65rem 1.3rem; }
.bn-sub-table td { padding: .8rem 1.3rem; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.bn-sub-table td small { display: block; color: #64748b; font-size: .8rem; }
.bn-sub-chip { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .12rem .6rem; }
.bn-sub-chip.is-ok { background: #dcfce7; color: #166534; }
.bn-sub-chip.is-wait { background: #fef3c7; color: #92400e; }
.bn-sub-chip.is-no { background: #fee2e2; color: #991b1b; }
.bn-sub-pdf { display: inline-flex; padding: .3rem .8rem; border-radius: .6rem; border: 1px solid #e2e8f0; font-weight: 700; font-size: .85rem; }
.dark .bn-sub-pay, .dark .bn-sub-card { background: #111827; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-sub-table th { background: #1f2937; color: #cbd5e1; }
.dark .bn-sub-table td { border-color: #1f2937; }
@media (max-width: 767px) {
    .bn-sub-top { grid-template-columns: 1fr; }
    .bn-sub-table th:nth-child(2), .bn-sub-table td:nth-child(2) { display: none; }
    .bn-sub-table th, .bn-sub-table td { padding: .7rem .8rem; }
    .bn-sub-due { flex-wrap: wrap; }
}

/* ضريبة القيمة المضافة: الفترة، والأرقام الثلاثة، ونموذج الإقرار */
.bn-vat { display: flex; flex-direction: column; gap: 1rem; }
.bn-vat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bn-vat-bar .bn-fin-field select { min-width: 17rem; border: 0; background-color: transparent; font: inherit; font-weight: 600; padding-block: 0; padding-inline-end: 2rem; }
.bn-vat-seg { display: inline-flex; padding: .2rem; border-radius: .7rem; background: var(--gray-100); }
.bn-vat-seg button { padding: .4rem .9rem; border-radius: .55rem; color: var(--gray-600); font-size: .85rem; font-weight: 600; }
.bn-vat-seg button.is-on { background: #fff; color: var(--gray-900); box-shadow: 0 1px 2px rgba(3, 7, 18, .12); }
.bn-vat-due { padding: .4rem .8rem; border-radius: .6rem; background: #fef3c7; color: #92400e; font-size: .8rem; font-weight: 700; }
.bn-vat-due.is-late { background: #fee2e2; color: #991b1b; }
.bn-vat-due.is-done { background: #dcfce7; color: #166534; }
.bn-vat-due.is-open { background: var(--gray-100); color: var(--gray-600); }
.bn-vat-cards { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: .9rem; }
.bn-vat-card { padding: 1.1rem 1.2rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .08); }
.bn-vat-card small { display: block; color: var(--gray-500); font-size: .8rem; }
.bn-vat-card b { display: block; margin: .35rem 0; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.bn-vat-card b span { color: var(--gray-500); font-size: .8rem; font-weight: 500; }
.bn-vat-card p { margin: 0; color: var(--gray-500); font-size: .78rem; }
.bn-vat-card.is-net { background: linear-gradient(135deg, #0f5f5a, #0e7a6d); color: #fff; box-shadow: 0 10px 24px -12px rgba(15, 95, 90, .6); }
.bn-vat-card.is-net.is-credit { background: linear-gradient(135deg, #1f4f8f, #2563eb); }
.bn-vat-card.is-net small, .bn-vat-card.is-net p, .bn-vat-card.is-net b span { color: rgba(255, 255, 255, .85); }
.bn-vat-form { overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .08); }
.bn-vat-form-head { display: flex; align-items: baseline; gap: .6rem; padding: .9rem 1.1rem; }
.bn-vat-form-head b { font-size: 1rem; }
.bn-vat-form-head small { color: var(--gray-500); font-size: .78rem; }
.bn-vat-table-wrap { overflow-x: auto; }
.bn-vat-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.bn-vat-table th { padding: .6rem .9rem; background: var(--gray-50); color: var(--gray-600); font-weight: 600; text-align: start; white-space: nowrap; }
.bn-vat-table td { padding: .7rem .9rem; border-top: 1px solid var(--gray-100); }
.bn-vat-table .is-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn-vat-table td.is-neg { color: #b91c1c; }
.bn-vat-table tr.is-group td { background: #f7fbfb; color: #0f5f5a; font-weight: 700; }
.bn-vat-table tr.is-total td { font-weight: 700; }
.bn-vat-table tr.is-net td { background: #ecfdf5; color: #065f46; font-size: .95rem; font-weight: 700; }
.bn-vat-box { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .3rem; border-radius: .45rem; background: var(--gray-100); color: var(--gray-600); font-size: .72rem; font-weight: 700; }
.bn-vat-link { margin-inline-start: .5rem; color: var(--primary-600); font-size: .76rem; font-weight: 600; }
.bn-vat-foot { margin: 0; color: var(--gray-500); font-size: .78rem; line-height: 1.8; }
.dark .bn-vat-card, .dark .bn-vat-form { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-vat-table th, .dark .bn-vat-box, .dark .bn-vat-seg { background: rgba(255, 255, 255, .06); color: var(--gray-300); }
.dark .bn-vat-seg button.is-on { background: rgba(255, 255, 255, .12); color: #fff; }
.dark .bn-vat-table td { border-color: rgba(255, 255, 255, .06); }
.dark .bn-vat-table tr.is-group td { background: rgba(15, 95, 90, .18); color: #5eead4; }
.dark .bn-vat-table tr.is-net td { background: rgba(16, 185, 129, .12); color: #6ee7b7; }

/* فواتير المشتريات */
.bn-pur-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1rem 0 0; }
.bn-pur-facts dt { color: var(--gray-500); font-size: .75rem; }
.bn-pur-facts dd { margin: .2rem 0 0; }
.bn-pur-facts dd b { display: block; font-size: .9rem; }
.bn-pur-facts dd small { color: var(--gray-500); font-size: .74rem; }
.bn-pur-table th { background: var(--gray-50); color: var(--gray-600); }
.bn-pur-table tfoot td { padding: .55rem .5rem; background: var(--gray-50); font-weight: 700; }
.bn-pur-files { display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.bn-pur-files li { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: .7rem; border: 1.5px dashed var(--gray-300); font-size: .85rem; }
.bn-pur-files svg { width: 1.2rem; height: 1.2rem; color: #dc2626; }
.bn-pur-files span { flex: 1; font-weight: 600; }
.bn-pur-files a { color: var(--primary-600); font-weight: 700; }
.dark .bn-pur-table th, .dark .bn-pur-table tfoot td { background: rgba(255, 255, 255, .05); color: var(--gray-300); }

@media (max-width: 900px) {
    .bn-vat-cards { grid-template-columns: 1fr; }
    .bn-vat-table { min-width: 36rem; }
    .bn-pur-facts { grid-template-columns: 1fr; }
}

/* ---------------- الأساس المحاسبي: شجرة الحسابات ---------------- */
.bn-coa-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.bn-coa-type { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07); text-align: start; transition: box-shadow .15s; }
.bn-coa-type:hover { box-shadow: 0 0 0 1px var(--primary-400); }
.bn-coa-type small { color: var(--gray-500); font-size: .78rem; }
.bn-coa-type b { font-size: 1.25rem; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.bn-coa-type b span { font-size: .78rem; font-weight: 500; color: var(--gray-500); }
.bn-coa-type i { font-size: .72rem; font-style: normal; color: var(--gray-400); }
.bn-coa-type.is-on { box-shadow: 0 0 0 2px var(--primary-600); }
.bn-coa-card { overflow-x: auto; }
.bn-coa-tree { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bn-coa-tree th { padding: .65rem .9rem; background: var(--gray-50); color: var(--gray-600); font-size: .8rem; font-weight: 600; text-align: start; white-space: nowrap; }
.bn-coa-tree td { padding: .55rem .9rem; border-top: 1px solid var(--gray-100); vertical-align: middle; }
.bn-coa-tree .bn-coa-code { width: 7rem; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--gray-500); letter-spacing: .3px; white-space: nowrap; }
.bn-coa-tree .bn-coa-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn-coa-tree .bn-coa-num.is-neg { color: #b91c1c; }
.bn-coa-tree .bn-coa-actions { width: 1%; }
.bn-coa-name { display: flex; align-items: center; gap: .35rem; padding-inline-start: calc(var(--lvl, 0) * 1.2rem); }
.bn-coa-tree tr:not(.is-group) .bn-coa-name { padding-inline-start: calc(var(--lvl, 0) * 1.2rem + 1.35rem); }
.bn-coa-toggle { display: grid; place-items: center; flex: none; width: 1.2rem; height: 1.2rem; border-radius: .3rem; color: var(--gray-400); }
.bn-coa-toggle:hover { background: var(--gray-100); color: var(--gray-700); }
.bn-coa-toggle svg { width: .95rem; height: .95rem; transition: transform .15s; }
.bn-coa-toggle svg.is-closed { transform: rotate(90deg); }
.bn-coa-tree tr.is-l1 td { background: color-mix(in srgb, var(--primary-500) 4%, #fff); font-size: .95rem; font-weight: 700; }
.bn-coa-tree tr.is-l1 .bn-coa-code { color: var(--primary-700); font-weight: 700; }
.bn-coa-tree tr.is-l2 td { font-weight: 700; }
.bn-coa-tree tr.is-l3 td { font-weight: 600; }
.bn-coa-tree tr.is-off .bn-coa-name > span { color: var(--gray-400); }
.bn-coa-off { padding: .05rem .4rem; border-radius: .35rem; background: var(--gray-100); color: var(--gray-500); font-size: .7rem; font-style: normal; font-weight: 600; }
.bn-coa-chip { display: inline-flex; padding: .15rem .5rem; border-radius: .45rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.bn-coa-chip.is-cash { background: #e7f6ec; color: #15803d; }
.bn-coa-chip.is-item { background: #e8f1fb; color: #1f5fa8; }
.bn-coa-chip.is-invoices { background: #f3e8ff; color: #6b21a8; }
.bn-coa-chip.is-opening { background: color-mix(in srgb, var(--primary-500) 12%, #fff); color: var(--primary-700); }
.bn-coa-chip.is-manual { background: var(--gray-100); color: var(--gray-600); }
.bn-coa-act { display: flex; justify-content: flex-end; gap: .35rem; }
.bn-coa-act a, .bn-coa-act button { padding: .2rem .55rem; border-radius: .45rem; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-600); font-size: .74rem; font-weight: 500; white-space: nowrap; }
.bn-coa-act a:hover, .bn-coa-act button:hover { border-color: var(--primary-400); color: var(--primary-700); }
.bn-coa-note { padding: 0 .2rem; font-size: .8rem; line-height: 1.9; color: var(--gray-500); }
.bn-coa-note b { color: var(--gray-700); }

/* القيد اليدوي */
.bn-me-balance { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem; margin-inline-start: auto; width: fit-content; padding: .6rem 1rem; border-radius: .8rem; background: var(--gray-50); color: var(--gray-600); font-size: .88rem; }
.bn-me-balance b { font-variant-numeric: tabular-nums; color: var(--gray-900); }
.bn-me-balance.is-ok { background: #ecfdf5; color: #047857; }
.bn-me-balance.is-ok b, .bn-me-balance.is-ok strong { color: #065f46; }
.bn-me-balance.is-bad { background: #fdf0f0; color: #8f1d1d; }
.bn-me-balance.is-bad strong { color: #b91c1c; }
.bn-me-examples { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; font-size: .84rem; color: var(--gray-600); }
.bn-me-examples b { color: var(--gray-900); }
.bn-me-hint { margin-top: .8rem; font-size: .76rem; line-height: 1.8; color: var(--gray-500); }
.bn-me-code { margin-inline-end: .3rem; font-family: ui-monospace, Menlo, monospace; font-size: .76rem; color: var(--gray-500); }
.bn-me-sub { display: block; font-size: .74rem; color: var(--gray-500); }
.bn-me-problems { margin: .7rem 0 0; padding-inline-start: 1.1rem; list-style: disc; font-size: .78rem; line-height: 1.8; color: #a15c00; }

/* السنة المالية وقفل الأشهر */
.bn-fy-bar { justify-content: flex-end; }
.bn-fy-bar .bn-fin-field select { max-width: none; min-width: 12rem; }
.bn-fy-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bn-fy-summary > div { display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1.15rem; border-inline-start: 1px solid var(--gray-100); }
.bn-fy-summary > div:first-child { border-inline-start: 0; }
.bn-fy-summary small { font-size: .8rem; color: var(--gray-500); }
.bn-fy-summary b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.bn-fy-summary b span { font-size: .8rem; font-weight: 500; color: var(--gray-500); }
.bn-fy-summary i { font-size: .74rem; font-style: normal; color: var(--gray-500); }
.bn-fy-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.bn-fy-month { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.05rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07); }
.bn-fy-month header { display: flex; align-items: center; justify-content: space-between; }
.bn-fy-month header b { font-size: 1rem; }
.bn-fy-month dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; margin: 0; font-size: .8rem; }
.bn-fy-month dt { color: var(--gray-500); }
.bn-fy-month dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.bn-fy-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .55rem; border-top: 1px dashed var(--gray-200); font-size: .75rem; color: var(--gray-500); }
.bn-fy-warn { color: #a15c00; font-weight: 600; }
.bn-fy-hint { color: var(--gray-400); }
.bn-fy-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: .55rem; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.bn-fy-btn svg { width: .95rem; height: .95rem; }
.bn-fy-btn:hover { border-color: var(--primary-400); color: var(--primary-700); }
.bn-fy-btn.is-primary { border-color: transparent; background: var(--primary-600); color: #fff; }
.bn-fy-btn.is-primary:hover { background: var(--primary-500); color: #fff; }
.bn-fy-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 1rem; font-size: .72rem; font-weight: 700; }
.bn-fy-chip svg { width: .85rem; height: .85rem; }
.bn-fy-chip.is-locked { background: #e2e8f0; color: #334155; }
.bn-fy-chip.is-open { background: #dcfce7; color: #166534; }
.bn-fy-month.is-locked { background: #f8fafc; }
.bn-fy-month.is-current { box-shadow: 0 0 0 2px var(--primary-600); }
.bn-fy-month.is-future { opacity: .55; }

@media (max-width: 1024px) {
    .bn-coa-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bn-fy-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .bn-coa-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bn-coa-tree .bn-coa-src { display: none; }
    .bn-coa-tree td, .bn-coa-tree th { padding: .5rem .6rem; }
    .bn-coa-tree .bn-coa-code { width: auto; font-size: .72rem; }
    .bn-fy-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bn-fy-summary > div:nth-child(3) { border-inline-start: 0; }
    .bn-fy-summary > div:nth-child(n+3) { border-top: 1px solid var(--gray-100); }
    .bn-fy-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .bn-fy-bar .bn-fin-field { flex: 1 1 auto; }
    .bn-fy-bar .bn-fin-field select { min-width: 0; width: 100%; }
    .bn-me-balance { width: 100%; justify-content: space-between; }
}
/* الجوال: كل حساب سطر (الرمز والاسم والرصيد)، وأزراره تحته. */
@media (max-width: 640px) {
    .bn-coa-card { overflow: visible; }
    .bn-coa-tree thead { display: none; }
    .bn-coa-tree, .bn-coa-tree tbody { display: block; }
    .bn-coa-tree tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "code name num" "act act act"; align-items: center; gap: .15rem .55rem; padding: .55rem .75rem; border-top: 1px solid var(--gray-100); }
    .bn-coa-tree tr.is-l1 { background: color-mix(in srgb, var(--primary-500) 4%, #fff); }
    .bn-coa-tree td { padding: 0 !important; border: 0 !important; background: transparent !important; }
    .bn-coa-tree .bn-coa-code { grid-area: code; width: auto; }
    .bn-coa-tree .bn-coa-acc { grid-area: name; }
    .bn-coa-tree .bn-coa-num { grid-area: num; }
    .bn-coa-tree .bn-coa-actions { grid-area: act; width: auto; }
    .bn-coa-act { flex-direction: row; justify-content: flex-start; padding-inline-start: 3.2rem; }
    .bn-coa-act:empty { display: none; }
    .bn-coa-name { padding-inline-start: calc(var(--lvl, 0) * .55rem); }
    .bn-coa-tree tr:not(.is-group) .bn-coa-name { padding-inline-start: calc(var(--lvl, 0) * .55rem + 1.35rem); }
    .dark .bn-coa-tree tr { border-color: rgba(255, 255, 255, .07); }
    .dark .bn-coa-tree tr.is-l1 { background: rgba(255, 255, 255, .05); }
}
@media (max-width: 420px) {
    .bn-fy-months { grid-template-columns: minmax(0, 1fr); }
}
.dark .bn-coa-type, .dark .bn-fy-month { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-coa-type b, .dark .bn-fy-month header b, .dark .bn-me-examples b, .dark .bn-me-balance b { color: #fff; }
.dark .bn-coa-type.is-on, .dark .bn-fy-month.is-current { box-shadow: 0 0 0 2px var(--primary-500); }
.dark .bn-coa-tree th, .dark .bn-coa-tree tr.is-l1 td, .dark .bn-fy-month.is-locked, .dark .bn-me-balance { background: rgba(255, 255, 255, .05); color: var(--gray-200); }
.dark .bn-coa-tree td, .dark .bn-fy-summary > div, .dark .bn-fy-foot { border-color: rgba(255, 255, 255, .07); }
.dark .bn-coa-act a, .dark .bn-coa-act button, .dark .bn-fy-btn:not(.is-primary) { border-color: rgba(255, 255, 255, .14); background: transparent; color: var(--gray-300); }
.dark .bn-coa-chip.is-manual, .dark .bn-coa-off, .dark .bn-fy-chip.is-locked { background: rgba(255, 255, 255, .08); color: var(--gray-300); }
.dark .bn-coa-chip.is-cash, .dark .bn-fy-chip.is-open { background: rgba(22, 163, 74, .16); color: #86efac; }
.dark .bn-coa-chip.is-item { background: rgba(37, 99, 235, .18); color: #93c5fd; }
.dark .bn-coa-chip.is-invoices { background: rgba(147, 51, 234, .18); color: #d8b4fe; }
.dark .bn-me-balance.is-ok { background: rgba(22, 163, 74, .12); color: #86efac; }
.dark .bn-me-balance.is-bad { background: rgba(220, 38, 38, .12); color: #fca5a5; }

/* ---------------- الإدارة المالية: القوائم المالية والإقفال السنوي ---------------- */
.bn-fs-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.bn-fs-chip { display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1rem; border-radius: .7rem; background: #fff; box-shadow: 0 0 0 1px rgba(20, 20, 50, .09); color: var(--gray-700); font-size: .86rem; font-weight: 600; }
.bn-fs-chip:hover { color: var(--gray-950); }
.bn-fs-chip.is-on { background: var(--gray-950); color: #fff; box-shadow: none; }
.bn-fs-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--gray-700); }
.bn-fs-check input { width: 1rem; height: 1rem; border-radius: .3rem; accent-color: var(--primary-600); }
.bn-fs-account select { max-width: 22rem; }
.bn-fs-note { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: .8rem; font-size: .86rem; }
.bn-fs-note svg { flex: none; width: 1.15rem; height: 1.15rem; }
.bn-fs-note.is-info { background: #eff6ff; color: #1e3a8a; }
.bn-fs-note.is-warn { background: #fef3c7; color: #78350f; }
.bn-fs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.bn-fs-card { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.15rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07), 0 1px 2px rgba(0, 0, 0, .04); text-align: start; transition: box-shadow .15s; }
.bn-fs-card:hover { box-shadow: 0 0 0 1px var(--primary-400); }
.bn-fs-card header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.bn-fs-card header b { font-size: 1.02rem; }
.bn-fs-card p { font-size: .8rem; color: var(--gray-500); min-height: 2.3em; }
.bn-fs-card strong { margin-top: .5rem; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.bn-fs-card strong em { font-size: .8rem; font-style: normal; font-weight: 500; color: var(--gray-500); }
.bn-fs-card small { font-size: .76rem; color: var(--gray-400); }
.bn-fs-card i { margin-top: .4rem; font-size: .82rem; font-style: normal; font-weight: 600; color: #1d4ed8; }
.bn-fs-badge { display: inline-flex; padding: .1rem .55rem; border-radius: .45rem; background: var(--gray-100); color: var(--gray-700); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.bn-fs-badge.is-ok, .bn-fs-badge.is-success { background: #dcfce7; color: #15803d; }
.bn-fs-badge.is-bad, .bn-fs-badge.is-danger { background: #fee2e2; color: #b91c1c; }
.bn-fs-badge.is-warning { background: #fef3c7; color: #b45309; }
.bn-fs-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .85rem 1.15rem; border-bottom: 1px solid var(--gray-100); }
.bn-fs-head b { font-size: 1rem; }
.bn-fs-head span { font-size: .8rem; color: var(--gray-500); }
.bn-fs-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.bn-fs-table th { padding: .6rem .85rem; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-600); font-size: .78rem; font-weight: 600; text-align: start; white-space: nowrap; }
.bn-fs-table td { padding: .6rem .85rem; border-bottom: 1px solid var(--gray-100); }
.bn-fs-table .is-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bn-fs-table .is-c { text-align: center; }
.bn-fs-table .is-neg, .bn-fs-stats .is-neg, .bn-fs-card .is-neg { color: #b91c1c; }
.bn-fs-table tfoot td { border-top: 2px solid var(--gray-700); border-bottom: 0; background: var(--gray-100); font-weight: 700; }
.bn-fs-table tr.is-group td { background: var(--gray-50); font-weight: 700; }
.bn-fs-table tr.is-sub td { font-weight: 600; }
.bn-fs-table tr.is-heading td { font-weight: 700; background: #fcfcfd; }
.bn-fs-table tr.is-subtotal td { font-weight: 700; border-top: 1px solid var(--gray-200); }
.bn-fs-table tr.is-total td { font-weight: 700; background: var(--gray-100); border-top: 2px solid var(--gray-700); }
.bn-fs-table tr.is-grand td { font-weight: 700; background: color-mix(in srgb, var(--primary-500) 10%, #fff); color: var(--primary-800); border-top: 2px solid var(--primary-600); }
.bn-fs-code { width: 4.5rem; color: var(--gray-500); font-family: ui-monospace, monospace; font-size: .8rem; }
.bn-fs-link, .bn-fs-entry { color: #1d4ed8; font-weight: 600; font-size: .82rem; }
.bn-fs-link:hover, .bn-fs-entry:hover { text-decoration: underline; }
.bn-fs-muted { color: var(--gray-500); font-size: .8rem; }
.bn-fs-src { display: inline-flex; padding: .1rem .5rem; border-radius: .4rem; background: var(--gray-100); color: var(--gray-700); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.bn-fs-src.is-receipt, .bn-fs-src.is-invoice { background: #dbeafe; color: #1d4ed8; }
.bn-fs-src.is-payment, .bn-fs-src.is-purchase { background: #ede9fe; color: #6d28d9; }
.bn-fs-src.is-closing { background: color-mix(in srgb, var(--primary-500) 12%, #fff); color: var(--primary-700); }
.bn-fs-src.is-reversal, .bn-fs-src.is-closing_reversal { background: #fee2e2; color: #b91c1c; }
.bn-fs-fund { display: inline-flex; padding: .1rem .5rem; border-radius: .4rem; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.bn-fs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.bn-fs-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bn-fs-stats > div { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1.05rem; border-radius: .85rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07); }
.bn-fs-stats small { font-size: .78rem; color: var(--gray-500); }
.bn-fs-stats b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.bn-fs-stats b span { font-size: .78rem; font-weight: 500; color: var(--gray-500); }
.bn-fs-stats i { font-size: .74rem; font-style: normal; color: var(--gray-400); }
.bn-fs-hint { font-size: .8rem; color: var(--gray-500); line-height: 1.7; }
.bn-fs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.bn-fs-steps li { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: .85rem; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); font-size: .86rem; }
.bn-fs-steps li i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gray-400); color: #fff; font-style: normal; font-weight: 700; font-size: .82rem; }
.bn-fs-steps li span { color: var(--gray-500); font-size: .78rem; }
.bn-fs-steps li.is-done { background: #f0fdf4; box-shadow: 0 0 0 1px #bbf7d0; }
.bn-fs-steps li.is-done i { background: #15803d; }
.bn-fs-steps li.is-now { box-shadow: 0 0 0 2px var(--primary-600); }
.bn-fs-steps li.is-now i { background: var(--primary-600); }
.bn-fs-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bn-fs-side { display: flex; flex-direction: column; gap: 1rem; }
.bn-fs-checks li { display: flex; align-items: center; gap: .65rem; padding: .7rem 1.15rem; border-bottom: 1px solid var(--gray-100); font-size: .86rem; }
.bn-fs-checks li:last-child { border-bottom: 0; }
.bn-fs-checks li i { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: .4rem; font-style: normal; font-weight: 700; font-size: .78rem; }
.bn-fs-checks li.is-ok i { background: #dcfce7; color: #15803d; }
.bn-fs-checks li.is-bad i { background: #fee2e2; color: #b91c1c; }
.bn-fs-checks li.is-bad span { color: #991b1b; }
.bn-fs-checks li.is-warn i { background: #fef3c7; color: #b45309; }
.bn-fs-after { padding: .9rem 1.15rem; font-size: .84rem; }
.bn-fs-after ul { margin-top: .4rem; padding-inline-start: 1.1rem; list-style: disc; color: var(--gray-700); line-height: 1.9; }
.bn-fs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bn-fy-link { margin-top: .2rem; font-size: .8rem; font-weight: 600; color: #1d4ed8; }
@media (max-width: 1024px) {
    .bn-fs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bn-fs-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .bn-fs-cards, .bn-fs-steps { grid-template-columns: minmax(0, 1fr); }
    .bn-fs-stats, .bn-fs-stats.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bn-fs-table td, .bn-fs-table th { padding: .5rem .55rem; }
    .bn-fs-chip { height: 2.2rem; padding: 0 .8rem; font-size: .82rem; }
}
.dark .bn-fs-chip, .dark .bn-fs-card, .dark .bn-fs-stats > div, .dark .bn-fs-steps li { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); color: var(--gray-200); }
.dark .bn-fs-chip.is-on { background: #fff; color: var(--gray-950); }
.dark .bn-fs-table th, .dark .bn-fs-table tr.is-group td, .dark .bn-fs-table tr.is-heading td, .dark .bn-fs-table tfoot td, .dark .bn-fs-table tr.is-total td { background: rgba(255, 255, 255, .05); color: var(--gray-200); }
.dark .bn-fs-table td, .dark .bn-fs-head, .dark .bn-fs-checks li { border-color: rgba(255, 255, 255, .07); }
.dark .bn-fs-table tr.is-grand td { background: color-mix(in srgb, var(--primary-500) 18%, transparent); color: var(--primary-200); }
.dark .bn-fs-note.is-info { background: rgba(37, 99, 235, .14); color: #bfdbfe; }
.dark .bn-fs-note.is-warn { background: rgba(217, 119, 6, .16); color: #fde68a; }
.dark .bn-fs-steps li.is-done { background: rgba(22, 163, 74, .12); }
.dark .bn-fs-after ul { color: var(--gray-300); }

/* ---------------- القوائم المالية: الانتقال للتفاصيل والرجوع خطوة خطوة ---------------- */
.bn-fs-drill { color: inherit; font: inherit; text-align: start; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary-500) 35%, transparent); text-underline-offset: .2em; cursor: pointer; }
.bn-fs-drill:hover { color: var(--primary-700); text-decoration-color: currentColor; }
.bn-fs-table tr.is-click { cursor: pointer; }
.bn-fs-table tr.is-click:hover td { background: color-mix(in srgb, var(--primary-500) 6%, #fff); }
.bn-fs-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: .8rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .07); font-size: .84rem; }
.bn-fs-trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.bn-fs-trail li { display: inline-flex; align-items: center; gap: .35rem; color: var(--gray-500); }
.bn-fs-trail li + li::before { content: "‹"; color: var(--gray-400); }
.bn-fs-trail li button { color: #1d4ed8; font-weight: 600; }
.bn-fs-trail li button:hover { text-decoration: underline; }
.bn-fs-trail li b { color: var(--gray-900); }
.bn-fs-back { display: inline-flex; align-items: center; gap: .3rem; height: 2rem; padding: 0 .75rem; border-radius: .55rem; background: var(--gray-950); color: #fff; font-weight: 600; font-size: .82rem; }
.bn-fs-back svg, .bn-return-bar svg { width: 1rem; height: 1rem; }
.bn-return-bar { margin-bottom: 1rem; }
.bn-return-bar a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: .7rem; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; color: #1e3a8a; font-size: .85rem; }
.bn-return-bar a:hover { background: #dbeafe; }
.bn-fs-entry-modal { display: flex; flex-direction: column; gap: .8rem; }
.bn-fs-entry-head p { margin-top: .35rem; font-size: .88rem; color: var(--gray-700); }
.bn-fs-entry-reason { color: #b91c1c !important; }
.bn-fs-entry-foot { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; color: var(--gray-500); }
.bn-entry tr.is-hl td { background: #fef9c3; font-weight: 600; }
.dark .bn-fs-trail { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dark .bn-fs-trail li b { color: #fff; }
.dark .bn-fs-trail li button, .dark .bn-return-bar a { color: #93c5fd; }
.dark .bn-fs-back { background: #fff; color: var(--gray-950); }
.dark .bn-return-bar a { background: rgba(37, 99, 235, .14); box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .25); }
.dark .bn-fs-table tr.is-click:hover td { background: rgba(255, 255, 255, .05); }
.dark .bn-entry tr.is-hl td { background: rgba(234, 179, 8, .15); }