.offline-banner{position:fixed;top:0;left:0;right:0;z-index:2500;background:#dc2626;color:#fff;text-align:center;padding:7px 12px;font-size:.82rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* مؤشّر تحميل احترافي (دائرة دوّارة + نص) بدل نقطة "…" الميتة — يظهر بكل شاشة أثناء أول تحميل حتى
يحس المستخدم إنو في شي عم يصير بالخلفية، مش إنو التطبيق علّق. */
.sm-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;padding:40px 20px;color:var(--muted,#6b7a72)}
.sm-spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--border,#e2ebe6);border-top-color:var(--primary,#3b82c4);animation:sm-spin .8s linear infinite}
.sm-loading p{margin:0;font-size:.9rem}
@keyframes sm-spin{to{transform:rotate(360deg)}}
/* ===== منصّة البراعم — أنماط مشتركة (ثيم مدفوع بـ --primary + فاتح/داكن) ===== */
.pf{
--bg:#eef2f4; --surface:#fff; --surface-2:#f3f7f5; --text:#1e2a24; --muted:#6b7a72; --border:#e2ebe6;
--shadow:0 10px 30px rgba(20,60,40,.12);
--neu-out:8px 8px 18px #d3ded7, -8px -8px 18px #ffffff;
/* الكيبورد بيغطي شريط الكتابة: 100dvh لحالها بتنقص تلقائيًا مع الكيبورد بس على WebView حديث نسبيًا؛
على نسخة أقدم (مثل أجهزة كتير حاليًا)، بترجع لـ100vh التقليدية يلي ما بتتغيّر مع الكيبورد إطلاقًا،
فالحاوية كلها تضل بحجمها الكامل وشريط الكتابة (آخر عنصر بعمود flex) بيضل بمكانه القديم تحت الكيبورد
— إضافة حشوة لشريط الكتابة لحاله ما بتنفع لأنو المشكلة بحجم الحاوية الأب مش بمكان الشريط بداخلها.
الحل الموثوق: نطرح ارتفاع الكيبورد (مقاس فعليًا بـJS عبر VisualViewport، مدعوم بأغلب الأجهزة) من
ارتفاع الحاوية نفسها مباشرة — يشتغل بغض النظر هل dvh مدعومة أو لأ. */
height:calc(100vh - var(--sm-kb-offset, 0px)); height:calc(100dvh - var(--sm-kb-offset, 0px));
background:var(--bg); color:var(--text);
font-family:'Segoe UI',Tahoma,Arial,sans-serif; display:flex; flex-direction:column;
/* بلا هاد، أي عنصر داخلي أعرض شوي من الشاشة (رزنامة، اسم مجموعة طويل...) بيخلّي الصفحة كلها
تنسكرول أفقيًا وتنقطع أعمدة/عناصر بدل ما تنقصّ لحجمها الطبيعي على شاشة تلفون ضيقة. */
width:100%; max-width:100vw; overflow-x:hidden;
/* دفاع إضافي بجانب overscroll-behavior:none على html/body (app.css بالموبايل) — يمنع أي سكرول
"يتسرّب" لهاد الحاوية نفسها ويسحب الهيدر (.pf-top) لفوق الشاشة، شوف تعليق app.css للتفصيل. */
overscroll-behavior:none;
}
.pf.dark{
--bg:#0f1a15; --surface:#16241d; --surface-2:#12201a; --text:#e7f0ea; --muted:#93a89c; --border:#26382e;
--shadow:0 10px 30px rgba(0,0,0,.5);
--neu-out:6px 6px 14px #0b130f, -6px -6px 14px #1d2f26;
}
.pf *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* header (green gradient from branding) */
.pf-top{position:relative;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;overflow:hidden}
.pf-bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.tbtn{background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:14px;padding:5px 11px;font-size:.78rem;font-weight:800;cursor:pointer}
.theme-sw{width:44px;height:26px;border-radius:20px;background:rgba(255,255,255,.25);position:relative;flex:none;cursor:pointer;border:none}
.theme-sw span{position:absolute;top:2px;width:21px;height:21px;background:#fff;border-radius:50%;display:grid;place-items:center;font-size:.7rem;transition:.15s}
.pf[dir=rtl] .theme-sw span{right:3px}.pf[dir=ltr] .theme-sw span{left:3px}
/* ===== login ===== */
.login-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px}
.login-top{padding:26px 18px 60px;border-bottom-left-radius:28px;border-bottom-right-radius:28px}
.login-toggles{display:flex;justify-content:flex-end;gap:8px;position:relative}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px;position:relative}
.logo{width:88px;height:88px;border-radius:24px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.18);font-size:2.6rem;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain}
.school-ar{font-size:1.15rem;font-weight:800}
.school-en{font-size:.8rem;opacity:.9;margin-top:-4px}
.login-card{background:var(--surface);margin:-40px 18px 0;border-radius:22px;padding:22px 18px 20px;box-shadow:var(--shadow);position:relative}
.login-card .title{text-align:center;font-size:1.25rem;font-weight:800;margin:2px 0}
.login-card .subtitle{text-align:center;color:var(--muted);font-size:.82rem;margin-bottom:16px}
.field{margin-bottom:13px}
.flabel{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.input-wrap{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:11px 13px}
.input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(46,158,79,.15)}
.input-wrap input{border:none;background:none;outline:none;flex:1;font-size:.95rem;color:var(--text);font-family:inherit}
.hint{font-size:.72rem;color:var(--muted);margin-top:6px;text-align:center}
.login-btn{width:100%;margin-top:16px;border:none;border-radius:16px;padding:13px;font-size:1rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 8px 18px rgba(31,122,58,.35);cursor:pointer}
.login-btn:active{transform:translateY(1px)}
.pf-footer{text-align:center;color:var(--muted);font-size:.72rem;margin-top:18px}
/* ===== launcher ===== */
.lnr-top{padding:14px 14px 16px}
.hrow{display:flex;align-items:center;gap:10px;position:relative}
.h-logo{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:1.3rem;flex:none;overflow:hidden}
.h-logo img{width:100%;height:100%;object-fit:contain}
.sname{line-height:1.2}.sname .ar{font-weight:800;font-size:1rem}.sname .en{font-size:.68rem;opacity:.9}
.spacer{flex:1}
.userchip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border-radius:22px;padding:4px 6px}
.userchip .u{line-height:1.15}.userchip .u .n{font-size:.8rem;font-weight:700}.userchip .u .r{font-size:.62rem;opacity:.9}
.userchip .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center;font-size:.95rem}
.grid{flex:1;min-height:0;overflow-y:auto;padding:20px 16px 90px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 12px;align-content:start}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg);border-radius:20px;padding:14px 6px;box-shadow:var(--neu-out);cursor:pointer;transition:transform .05s;border:none}
.tile:active{transform:scale(.96)}
.tile .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;color:#fff;box-shadow:0 6px 12px rgba(0,0,0,.14)}
.tile .lbl{font-size:.74rem;font-weight:700;color:var(--text);text-align:center;line-height:1.15}
.badge{position:relative}
.badge::after{content:attr(data-b);position:absolute;top:-4px;left:-4px;background:#ef4444;color:#fff;font-size:.6rem;font-weight:800;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 3px}
.g-agenda{background:linear-gradient(135deg,#f97316,#ea580c)}
.g-cal{background:linear-gradient(135deg,#38bdf8,#0284c7)}
.g-docs{background:linear-gradient(135deg,#34d399,#059669)}
.g-grades{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.g-chat{background:linear-gradient(135deg,#22d3ee,#0891b2)}
.g-notif{background:linear-gradient(135deg,#2dd4bf,#0d9488)}
.g-fees{background:linear-gradient(135deg,#fbbf24,#d97706)}
.g-attend{background:linear-gradient(135deg,#f472b6,#db2777)}
.g-live{background:linear-gradient(135deg,#fb923c,#f59e0b)}
.g-bus{background:linear-gradient(135deg,#4ade80,#16a34a)}
.g-planner{background:linear-gradient(135deg,#84cc16,#4d7c0f)}
.g-more{background:linear-gradient(135deg,#94a3b8,#64748b)}
.bottom{position:sticky;bottom:0;height:70px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px}
.home-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;color:#fff;font-size:1.4rem;box-shadow:0 8px 18px rgba(31,122,58,.4);border:5px solid var(--bg)}
.bnav{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:.66rem;font-weight:700}
/* ===== generic screen header/body ===== */
.screen-top{display:flex;align-items:center;gap:10px;padding:14px 12px;min-width:0}
.screen-title{font-weight:800;font-size:1.1rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.icon-btn{background:rgba(255,255,255,.2);border:none;color:#fff;width:34px;height:34px;border-radius:12px;font-size:1.1rem;cursor:pointer;flex:none}
.screen-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px}
.empty{color:var(--muted);text-align:center;padding:40px 0}
/* ===== chat list ===== */
.chat-list{display:flex;flex-direction:column;gap:2px}
.chat-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:11px 13px;cursor:pointer;text-align:start;width:100%;margin-bottom:8px;max-width:100%;box-sizing:border-box}
.chat-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;font-size:1.35rem;color:#fff;flex:none}
.chat-av.school{background:linear-gradient(135deg,#f59e0b,#d97706)}
.chat-av.small{width:36px;height:36px;font-size:1.05rem}
.chat-main{flex:1;min-width:0}
.chat-line1{display:flex;justify-content:space-between;gap:8px}
.chat-name{font-weight:700;font-size:.92rem;color:var(--text)}
.chat-time{font-size:.7rem;color:var(--muted);white-space:nowrap}
.chat-line2{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:3px}
.chat-last{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.chat-unread{background:var(--primary);color:#fff;font-size:.68rem;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;flex:none}
/* ===== chat room ===== */
.chat-head{line-height:1.2;color:#fff;min-width:0}
.chat-head-name{font-weight:800;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head-sub{font-size:.68rem;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.day-sep{text-align:center;margin:4px 0 8px}
.day-sep span{background:var(--surface-2);color:var(--muted);font-size:.68rem;font-weight:700;padding:3px 12px;border-radius:20px}
.msg{max-width:78%;align-self:flex-start}
.msg.mine{align-self:flex-end}
.msg-sender{font-size:.68rem;font-weight:800;color:var(--primary);margin:0 6px 2px}
.bubble{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px 12px 6px;position:relative}
.msg.mine .bubble{background:var(--primary);border-color:transparent;color:#fff}
.msg-text{font-size:.9rem;line-height:1.4}
.msg-time{display:block;text-align:end;font-size:.62rem;opacity:.7;margin-top:2px}
.msg-tick{margin-inline-start:3px;color:#4fc3f7}
.voice-sending{display:flex;align-items:center;gap:8px;min-width:150px;max-width:240px;padding:8px 12px;border-radius:20px;background:rgba(255,255,255,.15)}
.msg:not(.mine) .voice-sending{background:var(--surface-2)}
.voice-sending-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;animation:voice-sending-pulse 1s ease-in-out infinite}
@keyframes voice-sending-pulse{0%,100%{opacity:.3}50%{opacity:1}}
.chat-compose{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}
.compose-input{flex:1;border:1px solid var(--border);background:var(--surface-2);border-radius:22px;padding:10px 15px;font-size:.9rem;color:var(--text);outline:none;font-family:inherit;resize:none;line-height:1.3;max-height:calc(1.3em*4 + 20px);overflow-y:hidden}
.compose-input:focus{border-color:var(--primary)}
.send-btn{width:42px;height:42px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:1.1rem;cursor:pointer;flex:none}
.send-btn:disabled{opacity:.5}
.pf[dir=rtl] .send-btn{transform:scaleX(-1)}
.chat-readonly{padding:14px;text-align:center;color:var(--muted);font-size:.85rem;font-weight:700;background:var(--surface);border-top:1px solid var(--border)}
/* ===== members + create-user ===== */
.chat-head-tap{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1;min-width:0}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.form-title{margin:0 0 12px;font-size:1.05rem;color:var(--text)}
/* موجودة سابقًا بمواصفات app.css (ويب فقط) — هون بمكانها الصح (المشترك) حتى تنعرض ملوّنة بالموبايل كمان،
مش نص عادي بلا تنسيق زي ما كانت. */
.alert-error{background:rgba(220,38,38,.12);color:var(--danger);border:1px solid rgba(220,38,38,.35);padding:.55rem .75rem;border-radius:10px;font-size:.88rem;margin-bottom:.6rem;text-align:center}
.alert-info{background:rgba(var(--primary-rgb),.1);color:var(--primary);border:1px solid rgba(var(--primary-rgb),.3);padding:.55rem .75rem;border-radius:10px;font-size:.88rem;margin-bottom:.6rem;text-align:center}
.check-row{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted);margin:6px 2px 2px}
.form-actions{display:flex;align-items:center;gap:8px;margin-top:14px}
.btn-ghost{border:1px solid var(--border);background:var(--surface-2);color:var(--text);width:44px;height:44px;border-radius:14px;font-size:1rem;cursor:pointer;flex:none}
/* ===== user chip menu (logout) ===== */
.userchip{border:none;cursor:pointer;color:#fff}
.menu-backdrop{position:fixed;inset:0;z-index:40}
.user-menu{position:fixed;top:118px;inset-inline-start:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:200px;z-index:41;max-height:calc(100vh - 140px);overflow-y:auto}
.user-menu-name{font-weight:800;font-size:.82rem;padding:6px 10px;color:var(--text)}
.user-menu-item{display:block;width:100%;text-align:start;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:6px;font-size:.9rem;font-weight:800;color:var(--danger);cursor:pointer}
/* ===== group post-policy toggle ===== */
.policy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.policy-label{font-weight:700;font-size:.9rem;color:var(--text)}
.policy-toggle{border:none;border-radius:20px;padding:8px 14px;font-size:.82rem;font-weight:800;cursor:pointer;color:#fff}
.policy-toggle.on{background:var(--success)}
.policy-toggle.off{background:var(--danger)}
/* إدارة المجموعات: منتقي النطاق + خيارات الأيقونة + المجموعات الجاهزة */
.scope-picker{display:flex;flex-direction:column;gap:8px}
.scope-modes{display:flex;gap:6px;flex-wrap:wrap}
.scope-chip{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:20px;padding:7px 13px;font-size:.82rem;font-weight:700;cursor:pointer}
.scope-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.icon-choices{display:flex;gap:6px;flex-wrap:wrap}
.icon-choice{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;width:40px;height:40px;font-size:1.2rem;cursor:pointer;line-height:1}
.icon-choice.on{background:var(--primary);border-color:var(--primary)}
.std-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.std-title{font-weight:800;font-size:.95rem;color:var(--text)}
.std-hint{font-size:.78rem;color:var(--muted);margin-top:3px;line-height:1.35}
.add-btn{border:none;background:var(--primary);color:#fff;border-radius:14px;padding:9px 15px;font-size:.85rem;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0}
.add-btn:disabled{opacity:.55;cursor:default}
.member-actions{display:flex;gap:8px;margin-bottom:10px}
.mgr-badge{display:inline-block;background:var(--primary);color:#fff;border-radius:10px;padding:1px 8px;font-size:.68rem;font-weight:800;margin-inline-start:6px;vertical-align:middle}
.mgr-toggle{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:12px;width:40px;height:40px;font-size:1.1rem;cursor:pointer;flex:none}
.mgr-toggle.on{background:var(--primary);border-color:var(--primary);color:#fff}
.add-plus{font-size:1.4rem;font-weight:800;color:var(--primary);flex:none;width:28px;text-align:center}
.remove-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--danger);border-radius:12px;width:40px;height:40px;font-size:1rem;cursor:pointer;flex:none}
.remove-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.scope-sep{text-align:center;color:var(--muted);font-size:.78rem;margin:14px 0 10px}
.roster-code{color:var(--muted);font-size:.72rem;font-weight:600;margin-inline-start:6px}
.form-title{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:4px}
.form-hint{font-size:.82rem;color:var(--muted);margin-bottom:12px;line-height:1.4}
.year-list{display:flex;flex-direction:column;gap:9px}
.year-row{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.year-row.active{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, var(--surface))}
.year-main{flex:1}
.year-name{font-weight:800;font-size:.98rem;color:var(--text)}
.year-count{font-size:.78rem;color:var(--muted);margin-top:2px}
.pill-active{font-size:.75rem;font-weight:800;color:#fff;background:var(--primary);border-radius:20px;padding:5px 12px;white-space:nowrap}
/* ── جدول (تكليفات الموظّف) ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:.86rem;min-width:420px}
.tbl thead th{background:color-mix(in srgb, var(--primary) 12%, var(--surface));color:var(--text);
font-weight:800;font-size:.78rem;text-align:start;padding:10px 12px;white-space:nowrap;
border-bottom:1px solid var(--border)}
.tbl tbody td{padding:10px 12px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:nth-child(even){background:var(--surface-2)}
.tbl tbody tr:hover{background:color-mix(in srgb, var(--primary) 7%, var(--surface))}
.tbl .t-dim{color:var(--muted)}
.tbl .t-act{width:1%;white-space:nowrap;text-align:center}
.row-del{border:1px solid var(--border);background:var(--surface);color:#d9534f;border-radius:10px;
padding:5px 10px;font-size:.76rem;font-weight:800;cursor:pointer;white-space:nowrap}
.row-del:hover{background:color-mix(in srgb, #d9534f 12%, var(--surface));border-color:#d9534f}
.row-del:disabled{opacity:.5;cursor:default}
/* منتقي صف/شعبة موحّد (SectionPicker) + أي أزرار اختيار متعدد/فردي مشابهة (نوافذ العلامات، التكليفات) */
.scope-pill{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:999px;
padding:6px 13px;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap}
.scope-pill.on{border-color:transparent;background:var(--primary);color:#fff}
.scope-pill:disabled{opacity:.4;cursor:default}
.scope-pill.wild{border-style:dashed}
/* ترويسة الموظّف بصفحة التكليفات */
.staff-hero{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);
border:1px solid var(--border);border-radius:14px;margin-bottom:14px}
.staff-hero .av{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;
background:color-mix(in srgb, var(--primary) 14%, var(--surface));flex:none}
.staff-hero .nm{font-weight:800;font-size:1.02rem;color:var(--text)}
.staff-hero .rl{font-size:.8rem;color:var(--muted);margin-top:2px}
/* ── الأجندة ── */
.ag-list{display:flex;flex-direction:column;gap:10px}
.ag-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.ag-card.pending{border-inline-start:4px solid #e0a417;background:color-mix(in srgb,#e0a417 6%,var(--surface))}
.ag-card.rejected{border-inline-start:4px solid #d9534f;background:color-mix(in srgb,#d9534f 6%,var(--surface))}
.ag-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ag-type{font-size:.72rem;font-weight:800;color:#fff;border-radius:20px;padding:3px 10px;white-space:nowrap}
.ag-lesson{background:#3b82c4}.ag-homework{background:#2e9e6b}.ag-exam{background:#d9534f}.ag-quiz{background:#b5651d}.ag-note{background:#8a7bc4}
.ag-subj{font-size:.8rem;font-weight:700;color:var(--muted)}
.ag-date{font-size:.74rem;color:var(--muted);font-weight:700}
.ag-text{font-size:.92rem;color:var(--text);line-height:1.45;white-space:pre-wrap}
.ag-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.ag-by{font-size:.74rem;color:var(--muted)}
.ag-badge{font-size:.7rem;font-weight:800;border-radius:20px;padding:3px 9px}
.ag-badge.pending{background:color-mix(in srgb,#e0a417 18%,var(--surface));color:#a5790a}
.ag-badge.rejected{background:color-mix(in srgb,#d9534f 15%,var(--surface));color:#d9534f}
.ag-ok{border:none;background:#2e9e6b;color:#fff;border-radius:10px;padding:5px 12px;font-size:.76rem;font-weight:800;cursor:pointer}
.ag-ok:disabled{opacity:.5}
.ag-no{border:1px solid var(--border);background:var(--surface);color:#d9534f;border-radius:10px;padding:5px 12px;font-size:.76rem;font-weight:800;cursor:pointer}
/* ── تقويم الأجندة ── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 12px}
.cal-nav .m{font-weight:800;font-size:1rem;color:var(--text)}
.cal-nav button{border:none;background:var(--surface-2);color:var(--text);width:34px;height:34px;border-radius:10px;font-size:1rem;cursor:pointer}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;width:100%}
.cal-wd{text-align:center;font-size:.68rem;color:var(--muted);padding:4px 0;font-weight:700;min-width:0}
.cal-cell{aspect-ratio:1;min-width:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text);border-radius:10px;cursor:pointer;background:var(--surface-2);border:1px solid transparent}
.cal-cell.empty{visibility:hidden;cursor:default}
.cal-cell:hover{border-color:var(--border)}
.cal-cell.hot{color:#a32d2d;font-weight:800;background:color-mix(in srgb,#e24b4a 12%,var(--surface));box-shadow:inset 0 0 0 1px #f09595}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--primary);font-weight:800}
.cal-legend{display:flex;align-items:center;gap:8px;padding:12px 2px 2px}
.cal-dot{width:9px;height:9px;border-radius:50%;background:#e24b4a}
/* اختيار متعدد للصفوف */
.sec-pick{display:flex;gap:6px;flex-wrap:wrap}
.sec-chip{font-size:.8rem;padding:6px 11px;border-radius:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer}
.sec-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.type-pick{display:flex;gap:6px;flex-wrap:wrap}
.type-chip{font-size:.82rem;padding:6px 13px;border-radius:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer}
.type-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.att-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.att-chip{font-size:.75rem;padding:5px 9px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);display:inline-flex;align-items:center;gap:5px;color:var(--text)}
.att-chip a{color:var(--primary);text-decoration:none;font-weight:700}
/* معاينة بصرية فعلية لملف مرفق قبل الحفظ — صورة/فيديو حقيقي إذا كان صغير بما يكفي (PreviewMaxBytes)،
وإلا أيقونة كبيرة بنوعو. "الشكل لا الاسم" — شوف تعليق AgendaScreen.razor.Files. */
.att-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);flex:none;cursor:pointer}
.att-thumb img,.att-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.att-thumb-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.7rem}
.att-thumb-remove{position:absolute;top:2px;insetInlineEnd:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.62rem;text-decoration:none;line-height:1}
/* نافذة رفع مرفق منبثقة (Modal حقيقي) — تحجب الشاشة كلها فعليًا (backdrop بلا pointer-events:none)
طول ما ملف عم يترفع، فيستحيل بنيويًا الضغط على "حفظ" أو أي شي تاني بهالأثناء. شوف AgendaScreen.razor. */
.upload-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px}
.upload-modal-card{background:var(--surface);border-radius:16px;padding:22px 20px;max-width:280px;width:100%;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.3)}
/* ── صورة البروفايل ── */
.prof-avatar{width:110px;height:110px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--primary) 14%,var(--surface));display:grid;place-items:center;font-size:3rem;border:2px solid var(--border)}
.prof-avatar img{width:100%;height:100%;object-fit:cover}
.prof-cam{position:absolute;inset-inline-end:-2px;bottom:-2px;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;cursor:pointer;border:2px solid var(--surface);font-size:1rem}
/* ── عارض الوسائط ملء الشاشة ── */
.mv-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center}
.mv-bar{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;display:flex;justify-content:flex-end;gap:10px;padding:14px}
.mv-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;border:none;display:grid;place-items:center;font-size:1.2rem;cursor:pointer;text-decoration:none}
.mv-btn:active{transform:scale(.95)}
.mv-content{max-width:96vw;max-height:82vh;display:grid;place-items:center}
.mv-media{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:8px}
.mv-name{position:absolute;bottom:0;inset-inline:0;text-align:center;color:#fff;font-size:.85rem;padding:14px;opacity:.85}
/* ── تفاعلات الرسائل + منتقي الإيموجي + مصغّر الفيديو ── */
.msg-react{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.react-chip{font-size:.72rem;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:1px 7px;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.react-chip.mine{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface))}
.react-add{opacity:.55;cursor:pointer;font-size:.85rem;padding:0 4px;background:none;border:none}
.react-pop{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:4px 6px;box-shadow:var(--shadow);margin-top:3px}
.react-pop span{font-size:1.15rem;cursor:pointer;line-height:1;padding:8px;min-width:1.15rem;text-align:center;border-radius:50%}
.react-pop span:active{background:var(--surface-2)}
.vthumb{position:relative;display:inline-block;cursor:pointer}
.vplay{position:absolute;inset:0;display:grid;place-items:center;font-size:1.8rem;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* ── لائحة الإرفاق (واتساب-ستايل) ── */
.attach-sheet{display:flex;gap:10px;padding:12px;background:var(--surface);border-top:1px solid var(--border);flex-wrap:wrap}
.attach-opt{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;color:var(--text);cursor:pointer;width:72px;text-align:center}
.attach-opt .ao-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;color:#fff}
/* ── بحث داخل المحادثة ── */
.chat-search{display:flex;gap:8px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
.chat-search .field-input{flex:1}
/* .field-input كانت بلا أي تنسيق حقيقي (min-width:0 بس) — أي /