/* شكل بنيان: شريط ملون، مربعات أقسام ملونة، خط Cairo واضح، مع ثيمات ووضع مظلم. يتحمّل بعد style.css ويغطي عليه. */

/* ألوان الثيم (لون الشريط والأزرار) */
html:root{--b700:#0369a1;--b600:#0284c7;--b500:#0ea5e9;--b200:#bae6fd;--b100:#e0f2fe}
html:root[data-theme=emerald]{--b700:#047857;--b600:#059669;--b500:#10b981;--b200:#a7f3d0;--b100:#d1fae5}
html:root[data-theme=violet]{--b700:#6d28d9;--b600:#7c3aed;--b500:#8b5cf6;--b200:#ddd6fe;--b100:#ede9fe}
html:root[data-theme=rose]{--b700:#be123c;--b600:#e11d48;--b500:#f43f5e;--b200:#fecdd3;--b100:#ffe4e6}
html:root[data-theme=amber]{--b700:#b45309;--b600:#d97706;--b500:#f59e0b;--b200:#fde68a;--b100:#fef3c7}
html:root[data-theme=ocean]{--b700:#0f766e;--b600:#0d9488;--b500:#14b8a6;--b200:#99f6e4;--b100:#ccfbf1}

/* الألوان المحايدة: فاتح ومظلم */
html:root{--bg:#f1f5f9;--card:#fff;--ink:#0f172a;--ink2:#334155;--soft:#64748b;--edge:#e2e8f0;--field:#fff;--field-edge:#cbd5e1;--tint:8%;--rim:28%;--head:var(--b700);--shadow:#0f172a14;
 --canvas:var(--bg);--surface:var(--card);--surface-soft:#f1f5f9;--surface-raised:#f8fafc;--muted:var(--soft);--line:var(--edge);--accent:var(--b600);--accent-soft:var(--b100);--accent-ink:var(--b700);--green:var(--b600);--dark:var(--b700);color:var(--ink);background:var(--bg);font-size:16px}
html:root[data-mode=dark]{--bg:#0b1120;--card:#141d30;--ink:#f1f5f9;--ink2:#cbd5e1;--soft:#94a3b8;--edge:#26344d;--field:#0f172a;--field-edge:#334155;--tint:16%;--rim:40%;--head:color-mix(in srgb,var(--b700) 70%,#0b1120);--shadow:#00000040;
 --surface-soft:#1a2539;--surface-raised:#182236;--accent-soft:color-mix(in srgb,var(--b500) 20%,var(--card));--accent-ink:var(--b500);color-scheme:dark}
*{font-family:Cairo,Tajawal,Tahoma,'Segoe UI',sans-serif!important}
body{background:var(--bg);color:var(--ink)}

/* ألوان الأقسام. --tc لون البطاقة الخفيف، --tr إطارها، --tv لون الرقم */
/* كل قسم إله لون واحد ما يتكرر: الرئيسية فيروزي، مهامي بنفسجي، مهام الفريق وردي، المراجعة أصفر، الموظفين أزرق، التمديد برتقالي، المتكررة نيلي، تم التنفيذ أخضر، التنبيهات أحمر، الإعدادات رمادي */
.c-teal{--c500:#0d9488}.c-purple{--c500:#9333ea}.c-pink{--c500:#db2777}.c-yellow{--c500:#ca8a04}.c-blue{--c500:#2563eb}
.c-orange{--c500:#ea580c}.c-indigo{--c500:#4f46e5}.c-green{--c500:#16a34a}.c-red{--c500:#dc2626}.c-slate{--c500:#64748b}.c-brand{--c500:var(--b500)}
[class*=c-],.stat,.panel.attention,.panel.completion,.person-card,.notice{--tc:color-mix(in srgb,var(--c500) var(--tint),var(--card));--tr:color-mix(in srgb,var(--c500) var(--rim),var(--card));--tv:color-mix(in srgb,var(--c500) 75%,var(--ink))}

/* الشريط والمربعات */
.bn-shell{min-height:100vh}
.bn-top{background:var(--head);padding:max(10px,env(safe-area-inset-top)) 12px 14px;box-shadow:0 2px 10px var(--shadow)}
.bn-bar{max-width:1150px;margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.bn-brand{display:flex;align-items:center;gap:8px;color:#fff;font-size:23px;font-weight:800;text-decoration:none}
.bn-logo{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:11px;background:#fff;color:var(--b700)}
.bn-logo .icon{width:21px;height:21px}
.bn-user{display:flex;align-items:center;gap:8px;color:#ffffffdd;font-weight:700;font-size:15px}
.bn-user .icon-button{width:38px;height:38px;border-radius:11px;background:#ffffff26!important;border:0!important;color:#fff!important;box-shadow:none}
.bn-logout{background:#ffffff26;color:#fff;border:0;border-radius:10px;padding:7px 16px;font-size:14px;font-weight:700;box-shadow:none;cursor:pointer}
.bn-nav{max-width:1150px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bn-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:86px;padding:10px 4px;background:var(--card);color:var(--ink2);border:0;border-radius:16px;font-size:14px;font-weight:700;line-height:1.35;text-align:center;box-shadow:0 1px 3px var(--shadow);cursor:pointer;transition:transform .15s}
.bn-tile:active{transform:scale(.97)}
.bn-ic{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:color-mix(in srgb,var(--c500) 16%,var(--card));color:color-mix(in srgb,var(--c500) 80%,var(--ink))}
.bn-ic .icon{width:23px;height:23px;stroke-width:2}
.bn-tile.selected{background:var(--c500);color:#fff;box-shadow:0 0 0 2px #ffffffcc,0 3px 10px var(--shadow)}
.bn-tile.selected .bn-ic{background:#ffffff33;color:#fff}
.bn-tile .nav-count{position:absolute;top:6px;left:6px;min-width:21px;height:21px;padding:0 5px;border-radius:11px;background:#e11d48;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
@media(min-width:1000px){.bn-nav{display:flex;flex-wrap:wrap}.bn-tile{flex-direction:row;min-height:0;padding:8px 14px;font-size:15px}.bn-ic{width:32px;height:32px}}

/* رأس الصفحة */
.bn-shell main{max-width:1150px;margin:auto;padding:20px 14px 40px}
.bn-ph,.bn-ph.page-header:has(+ #pageContent .welcome){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.bn-ph-title{display:flex;align-items:center;gap:12px}
.bn-ph-icon{display:flex;flex-shrink:0;width:52px;height:52px;align-items:center;justify-content:center;border-radius:16px;background:var(--c500);color:#fff;box-shadow:0 2px 6px var(--shadow)}
.bn-ph-icon .icon{width:28px;height:28px;stroke-width:2}
.bn-ph h1{margin:0;font-size:26px;font-weight:800;color:var(--ink);line-height:1.3}
.bn-ph p{margin:2px 0 0;font-size:15px;font-weight:600;color:var(--soft)}
.bn-add{display:inline-flex;align-items:center;gap:6px;background:var(--b600)!important;color:#fff!important;border:0;border-radius:12px;padding:10px 18px;font-size:16px;font-weight:700;box-shadow:0 2px 6px var(--shadow)}
.welcome,.page-footer,.mobile-nav,.mobile-add{display:none!important}

/* بطاقات الأرقام */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:800px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{--c500:#9333ea;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:right;background:linear-gradient(135deg,var(--tc),var(--card))!important;border:1px solid var(--tr)!important;border-radius:18px;padding:14px;box-shadow:0 1px 3px var(--shadow);color:var(--ink2)}
.stat:has(.stat-icon.green){--c500:#db2777}.stat:has(.stat-icon.amber){--c500:#ca8a04}.stat:has(.stat-icon.red){--c500:#dc2626}
.stat .stat-label{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;font-size:16px;font-weight:700;color:var(--ink2)}
.stat .stat-icon{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:13px;background:var(--c500)!important;color:#fff!important}
.stat .stat-icon .icon{width:24px;height:24px;stroke-width:2}
.stat strong{font-size:30px;font-weight:800;color:var(--tv);line-height:1.2}
.stat .stat-note{font-size:15px;font-weight:700;color:var(--tv)}

/* اللوحات الملونة */
.panel,.person-card,.task-card,.comment,.notice,.empty,.board-column{border-radius:18px!important;border:1px solid var(--edge)!important;background:var(--card)!important;box-shadow:0 1px 3px var(--shadow)}
.panel.attention{--c500:#dc2626}.panel.completion{--c500:#16a34a}.person-card{--c500:#2563eb}.notice{--c500:#dc2626}
.panel.attention,.panel.completion,.person-card{background:linear-gradient(160deg,var(--tc),var(--card) 70%)!important;border-color:var(--tr)!important;border-top:5px solid var(--c500)!important}
.panel.attention .eyebrow,.panel.completion .eyebrow{color:var(--tv)!important;font-weight:700}
.circle-icon{background:var(--c500)!important;color:#fff!important}
.attention-row{border-color:var(--tr)!important}
.attention-row b{color:var(--ink)}
.calm-state{color:var(--ink)}.calm-state>.icon,.calm-state svg{color:#10b981!important}
.completion-ring{--ring:var(--c500)}
.completion-ring strong{color:var(--tv)!important}
.person-stats strong{color:var(--tv)!important}
.notice{border-right:5px solid var(--c500)!important;color:var(--ink)!important}
.notice.seen{border-right-color:var(--edge)!important;opacity:.8}
.empty{--c500:var(--b500)}
.empty-icon{background:color-mix(in srgb,var(--b500) 18%,var(--card))!important;color:var(--b600)!important}
.eyebrow{color:var(--b600)!important;font-weight:700}
h1,h2,h3{color:var(--ink);font-weight:800}
h2{font-size:21px}
.muted,small{color:var(--soft)}
.count-label{background:color-mix(in srgb,var(--b500) 16%,var(--card))!important;color:var(--b600)!important;font-weight:700}
.view-switch{background:var(--card)!important;border-color:var(--edge)!important}
.view-switch button{color:var(--soft)!important}
.view-switch button[aria-pressed=true],.view-switch button.selected,.section-tabs button.selected,.section-tabs button[aria-pressed=true]{background:var(--b600)!important;color:#fff!important}
.search-field{background:var(--field)!important;border-color:var(--field-edge)!important}
.progress{background:color-mix(in srgb,var(--b500) 15%,var(--card))!important}
.progress span,.progress i,.progress>div{background:var(--b500)!important}
.avatar{background:color-mix(in srgb,var(--b500) 18%,var(--card))!important;color:var(--b600)!important;font-weight:700}

/* الأزرار والحقول */
button.secondary{background:var(--card)!important;color:var(--ink2)!important;border:1px solid var(--field-edge)!important}
input,select,textarea{border-radius:12px!important;border:1px solid var(--field-edge)!important;background:var(--field)!important;color:var(--ink)!important;font-size:16px!important}
input::placeholder,textarea::placeholder{color:var(--soft)}
input:focus,select:focus,textarea:focus{border-color:var(--b500)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--b500) 30%,transparent)!important;outline:0}
input[type=checkbox],input[type=radio]{accent-color:var(--b600)}

/* بطاقات المهام: خط ملون بالطرف وحالة بإطار ملون مثل طلبات بنيان */
.task-card{border-left:6px solid #94a3b8!important}
.task-card:has(.badge.pending){border-left-color:#0ea5e9!important}
.task-card:has(.badge.active){border-left-color:#f97316!important}
.task-card:has(.badge.review){border-left-color:#8b5cf6!important}
.task-card:has(.badge.done){border-left-color:#10b981!important}
.task-card:has(.badge.blocked){border-left-color:#e11d48!important}
.task-card h3{font-size:20px;font-weight:800;color:var(--ink)}
.task-card p{color:var(--ink2)}
.badge{background:transparent!important;border:2px solid currentColor;border-radius:10px;padding:3px 10px;font-size:14px;font-weight:700}
.badge i{display:none}
.badge.pending{color:#0ea5e9!important}.badge.active{color:#f97316!important}.badge.review{color:#8b5cf6!important}.badge.done{color:#10b981!important}.badge.blocked{color:#f43f5e!important}
.priority.high{color:#f43f5e!important;font-weight:700}.priority.medium{color:#f59e0b!important;font-weight:700}.priority.low{color:var(--soft)!important;font-weight:700}

/* النوافذ */
.modal>div,.modal .dialog,.dialog{background:var(--card)!important;color:var(--ink)}
.detail-header-icon{background:var(--b600)!important;color:#fff!important}

/* شاشة الدخول: خلفية ملونة وبطاقة بالنص مثل بنيان */
.auth-shell{min-height:100vh;display:flex!important;align-items:center;justify-content:center;padding:20px 16px;background:linear-gradient(160deg,var(--b600),var(--b700) 55%,#312e81)!important}
.auth-story{display:none!important}
.auth-shell .auth-form-side{position:relative;width:100%;max-width:440px;background:transparent!important;padding:0!important;min-height:0!important}
.auth-shell .auth{background:var(--card)!important;border-radius:28px;padding:30px 24px!important;box-shadow:0 20px 50px #0f172a40;text-align:center;max-width:none!important;margin:0!important}
.auth-shell .auth .brand{display:flex!important;align-items:center;gap:10px;margin-bottom:6px;justify-content:center;flex-direction:column;font-size:28px;font-weight:800;color:var(--ink)}
.auth-shell .auth .brand-mark{width:70px;height:70px;border-radius:20px;background:linear-gradient(135deg,var(--b500),var(--b600))!important;color:#fff!important;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px var(--shadow)}
.auth-shell .auth .brand-mark .icon{width:38px;height:38px}
.auth-shell .auth .eyebrow{display:none}
.auth-shell .auth h2{font-size:23px}
.auth-shell .auth form{text-align:right}
.auth-shell .auth form>button{width:100%;justify-content:center;background:var(--b600)!important;color:#fff!important;border-radius:12px;font-size:17px}
.auth-appearance{position:absolute;top:14px;left:14px;z-index:2}
.auth-appearance .icon-button{background:color-mix(in srgb,var(--b500) 15%,var(--card))!important;color:var(--b600)!important;border:0!important}

/* محتوى كل صفحة بلون قسمها (main ياخذ c-لون القسم) */
main[class*=c-] .page-panel,main[class*=c-] .people-grid~.panel{border-top:5px solid var(--c500)!important;background:linear-gradient(160deg,var(--tc),var(--card) 60%)!important}
main[class*=c-] .page-panel .eyebrow,main[class*=c-] .section-heading .eyebrow{color:var(--tv)!important}
main[class*=c-] .page-panel h2,main[class*=c-] .page-panel h3{color:var(--tv)}
main[class*=c-] .page-panel form>button:not(.secondary),main[class*=c-] .page-panel .actions>button:not(.secondary){background:var(--c500)!important;color:#fff!important;border-color:var(--c500)!important}
main[class*=c-] .page-panel input[type=checkbox]{accent-color:var(--c500)}
main[class*=c-] .bn-add{background:var(--c500)!important}
.refresh-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--edge)}.refresh-box h3{margin:0 0 4px}.refresh-box button{width:100%;margin-top:8px}