/* ===== خطاب رسمي تفاعلي (ofd) — مشترك: نموذج الاستئذان (leave_process.php) وتعهد الالتزام في بوابة ولي الأمر (parent.php) — 2026-10-03 ===== */
.ofd { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px 16px; box-shadow:0 6px 20px rgba(15,23,42,.05); animation: ofdReveal .4s ease both; }
.ofd-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ofd-ministry { font-size:11.5px; font-weight:700; color:#334155; line-height:1.7; text-align:center; }
.ofd-ministry b { font-size:13px; color:#0f172a; }
.ofd-logo img { width:46px; height:46px; object-fit:contain; }
.ofd-hr { height:2px; background:linear-gradient(90deg,#1d4ed8,#0891b2); border-radius:2px; margin:10px 0 12px; }
.ofd-title { text-align:center; font-size:17px; font-weight:800; color:#0f172a; margin-bottom:8px; }
.ofd-datebar { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:12px; color:#475569; margin-bottom:12px; }
.ofd-letter { font-size:13.5px; line-height:2.1; color:#1f2937; text-align:justify; background:#fafbfc; border:1px solid #eef1f6; border-radius:12px; padding:12px 14px; }
.ofd-letter b { color:#0f172a; }
.ofd-sec { font-size:12px; font-weight:800; color:#64748b; margin:16px 0 8px; display:flex; align-items:center; gap:8px; }
.ofd-sec::before { content:''; width:4px; height:15px; background:#1d4ed8; border-radius:2px; }
/* (2026-10-01 طلب المالك) بطاقات مستندات صغيرة لا تأخذ مساحة النموذج: مربع مميّز للإرفاق، ثم مصغّرة بعد الرفع (النقر يفتح المستند مع استبدال/حذف) */
.ofd-docs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } /* المستندات في وسط النموذج */
.ofd-doc { flex:0 0 auto; width:116px; border:2px dashed #60a5fa; border-radius:12px; background:#eff6ff; padding:8px 6px 7px; text-align:center; cursor:pointer; transition:.15s; position:relative; }
.ofd-doc:not(.filled) { animation: ofdDocPulse 1.8s ease-in-out infinite; }
@keyframes ofdDocPulse { 0%,100% { box-shadow:0 0 0 0 rgba(37,99,235,.25); } 50% { box-shadow:0 0 0 6px rgba(37,99,235,0); } }
.ofd-doc:active { transform:scale(.98); } .ofd-doc:hover { border-color:#93c5fd; }
.ofd-doc.filled { border-style:solid; border-color:#cbd5e1; background:#fbfcff; }
.ofd-doc-thumb { width:40px; height:40px; border-radius:11px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; background:#dbeafe; color:#2563eb; font-size:17px; overflow:hidden; }
.ofd-doc.filled .ofd-doc-thumb { background:#fff; border:1px solid #e2e8f0; }
.ofd-doc.filled .ofd-doc-thumb img { width:100%; height:100%; object-fit:cover; }
.ofd-doc-name { font-size:11px; font-weight:800; color:#334155; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ofd-doc-badge { font-size:10.5px; font-weight:800; color:#1d4ed8; }
.ofd-doc.filled .ofd-doc-badge.ok { color:#059669; }
.ofd-doc-acts { display:flex; gap:4px; margin-top:5px; } .ofd-doc-acts button { flex:1; border:1px solid #e2e8f0; background:#fff; border-radius:8px; font-size:10px; font-weight:800; padding:4px 3px; font-family:inherit; cursor:pointer; color:#334155; white-space:nowrap; } .ofd-doc-acts button.del { flex:0 0 28px; color:#b91c1c; border-color:#fecaca; }
.ofd-doc.filled .ofd-doc-thumb { cursor:zoom-in; width:52px; height:52px; } .ofd-doc.busy { pointer-events:none; opacity:.75; } .ofd-doc.busy .ofd-doc-thumb i { animation: spin 1s linear infinite; }
.ofd-lb { position:fixed; inset:0; z-index:3300; background:rgba(15,23,42,.92); display:flex; align-items:center; justify-content:center; padding:16px; } .ofd-lb img { max-width:100%; max-height:92vh; border-radius:12px; background:#fff; } .ofd-lb-x { position:absolute; top:calc(12px + env(safe-area-inset-top)); left:12px; width:40px; height:40px; border-radius:12px; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:18px; cursor:pointer; } .ofd-lb-act { position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); left:16px; right:16px; display:flex; gap:10px; } .ofd-lb-act button { flex:1; border:0; border-radius:14px; padding:13px; font-family:inherit; font-size:14px; font-weight:900; cursor:pointer; background:#fff; color:#0f172a; } .ofd-lb-act button.del { background:#dc2626; color:#fff; }
.ofd-doc-badge.ok { color:#64748b; }
.ofd-signs { display:flex; gap:10px; margin-top:8px; }
body.parent-view .ofd-signs { display:none; } /* (2026-10-01 قرار المالك) خانتا المختص والمدير لا تظهران لولي الأمر — توفيرًا للمساحة */
.ofd-req { margin-top:10px; margin-inline-start:auto; width:60%; text-align:center; } .ofd-req .ofd-sign.parent { padding:4px 0 0; } /* الكتلة في اليسار وعناصرها متوسّطة */
.ofd-sign { flex:1; padding:6px 2px; } /* (2026-09-30 طلب المالك) بلا حدود ولا خلفية */
.ofd-sign-t { font-size:12px; font-weight:800; color:#475569; text-align:center; margin-bottom:8px; }
.ofd-sign-line { height:44px; }
.ofd-sign-name { text-align:center; font-size:12px; color:#94a3b8; margin-top:6px; min-height:16px; }
.ofd-sign .sig-frame { border:2px dashed #cbd5e1; border-radius:10px; background:#fff; }
.ofd-sign .sig-frame canvas { height:120px; }
.sig-tap-area { border:2px dashed #cbd5e1; border-radius:10px; background:#fff; min-height:96px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; transition:.15s; }
.sig-tap-area:active { transform:scale(.99); }
.sig-tap-area.has-sig { border-style:solid; border-color:#cbd5e1; }
.sig-tap-area img { max-width:100%; max-height:96px; object-fit:contain; }
.sig-tap-empty { color:#94a3b8; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.ofd-sign.need .sig-tap-area { border-color:#93c5fd; }
.ofd-sign-hint { display:none; margin-top:8px; text-align:center; font-size:12px; font-weight:800; color:#1d4ed8; }
.ofd-sign.need { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.18); animation: ofdPulse 1.4s ease-in-out infinite; }
.ofd-sign.need .ofd-sign-hint { display:block; animation: ofdBounce 1s ease-in-out infinite; }
@keyframes ofdPulse { 0%,100%{ box-shadow:0 0 0 3px rgba(37,99,235,.18);} 50%{ box-shadow:0 0 0 6px rgba(37,99,235,.28);} }
@keyframes ofdBounce { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
/* نافذة الإرسال الصغيرة الصاعدة */
.ofd-submitbar { position:fixed; left:0; right:0; bottom:0; z-index:1500; transform:translateY(140%); transition:transform .35s cubic-bezier(.34,1.3,.64,1); pointer-events:none; }
.ofd-submitbar.show { transform:translateY(0); pointer-events:auto; }
.ofd-submitbar-in { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:8px; background:#fff; border-top:1px solid #e5e7eb; box-shadow:0 -10px 30px rgba(0,0,0,.16); padding:10px 14px calc(12px + env(safe-area-inset-bottom)); }
/* (2026-10-01 طلب المالك) الشريط لا يحجز إلا مساحة محتواه: مع عدّاد الخطوات فقط يكون نحيفًا، ويتّسع عند ظهور زر الإرسال */
body.modal-embed .ofd-submitbar-in { padding:8px 12px calc(8px + env(safe-area-inset-bottom)); gap:6px; box-shadow:0 -8px 24px rgba(15,23,42,.10); }
.ofd-submitbar-btns { display:flex; gap:10px; align-items:center; }
.ofd-ro .ofd-doc.filled::after { display:none; } .ofd-ro .ofd-doc { border-style:solid; border-color:#cbd5e1; background:#fbfcff; } .ofd-ro .ofd-doc-badge.ok { color:#64748b; }
.ofd-rv-note { display:flex; align-items:center; gap:8px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:10px; padding:6px 10px; font-size:11.5px; font-weight:800; margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ofd-rv-note > div { overflow:hidden; text-overflow:ellipsis; }
.ofd-rv-bar { position:sticky; bottom:0; display:flex; gap:8px; padding:10px 0 calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(255,255,255,0),#fff 30%); margin-top:10px; }
.ofd-rv-bar .ofd-send { flex:1 1 auto; font-size:14px; white-space:nowrap; padding:13px 10px; }
.ofd-rv-edit { flex:0 0 auto; border:1px solid #e2e8f0; background:#f1f5f9; color:#334155; border-radius:14px; padding:13px 12px; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.ofd-send.pulse { animation: ofdPulse 1s ease-in-out 3; }
/* (2026-10-01 قرار المالك) النموذج جاهز: الزر ينبض باستمرار وفوقه تنبيه «بقيت خطوة واحدة» بسهم ينزل نحوه */
.ofd-send.ready { animation: ofdPulse 1.4s ease-in-out infinite; }
.ofd-nudge { display:none; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,#ecfdf5,#d1fae5); border:1px solid #a7f3d0; color:#065f46; border-radius:14px; padding:9px 12px; font-size:13px; font-weight:900; text-align:center; animation: ofdNudgeIn .45s ease-out both; }
.ofd-nudge.show { display:flex; }
.ofd-nudge i { width:30px; height:30px; border-radius:50%; background:#059669; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto; animation: ofdArrow 1.1s ease-in-out infinite; }
.ofd-nudge small { display:block; font-size:11px; font-weight:700; color:#047857; margin-top:1px; }
@keyframes ofdArrow { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(4px); } }
@keyframes ofdNudgeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
/* لوحة المغادرة والنموذج جاهز غير مُرسل */
.ofd-exit { position:fixed; inset:0; z-index:3200; background:rgba(15,23,42,.55); display:flex; align-items:flex-end; justify-content:center; animation: ofdFadeIn .25s ease-out both; }
.ofd-exit-box { background:#fff; border-radius:26px 26px 0 0; padding:14px 18px calc(18px + env(safe-area-inset-bottom)); width:100%; max-width:560px; text-align:center; box-shadow:0 -30px 80px -20px rgba(15,23,42,.5); animation: ofdSlideUp .35s cubic-bezier(.34,1.3,.64,1) both; }
.ofd-exit-grip { width:44px; height:5px; border-radius:3px; background:#e2e8f0; margin:0 auto 14px; }
.ofd-exit-ic { width:64px; height:64px; border-radius:50%; background:#fffbeb; border:2px solid #fde68a; color:#d97706; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 12px; }
.ofd-exit-t { font-size:17px; font-weight:900; color:#0f172a; }
.ofd-exit-s { font-size:13px; color:#64748b; font-weight:700; line-height:1.8; margin:6px 0 16px; }
/* (2026-10-01 قرار المالك) زرّان في صف واحد: الإرسال أخضر يمينًا، والمغادرة تحذيري يسارًا — ولا زر «بقاء» (إغلاق اللوحة يبقيه في النموذج) */
.ofd-exit-btns { display:flex; gap:10px; }
.ofd-exit-btns button { flex:1; min-height:76px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-family:inherit; font-weight:900; cursor:pointer; padding:10px 8px; line-height:1.3; }
.ofd-exit-btns button i { font-size:20px; } .ofd-exit-btns button span { font-size:14px; }
.ofd-exit .ofd-send { background:linear-gradient(135deg,#10b981,#059669); color:#fff; border:0; box-shadow:0 12px 26px -14px rgba(5,150,105,.8); }
.ofd-exit-leave { background:#fff7ed; color:#9a3412; border:1.5px solid #fdba74; }
.ofd-exit-leave:active, .ofd-exit .ofd-send:active { transform:scale(.98); }
.ofd-exit-tip { font-size:11.5px; color:#94a3b8; font-weight:700; margin-top:12px; }
@keyframes ofdFadeIn { from { opacity:0; } to { opacity:1; } } @keyframes ofdSlideUp { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } } @keyframes ofdPulse { 0%,100% { box-shadow:0 10px 22px -8px rgba(16,185,129,.6); } 50% { box-shadow:0 0 0 10px rgba(16,185,129,0), 0 10px 22px -8px rgba(16,185,129,.6); } }
.ofd-cd { position:fixed; inset:0; z-index:3000; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.ofd-cd-box { background:#fff; border-radius:22px; padding:24px 20px 18px; width:100%; max-width:340px; text-align:center; box-shadow:0 30px 80px -20px rgba(15,23,42,.6); }
.ofd-cd-ring { width:84px; height:84px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:900; color:#059669; border:5px solid #a7f3d0; animation: ofdCdBeat 1s ease-in-out infinite; }
@keyframes ofdCdBeat { 0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.35); } 50% { box-shadow:0 0 0 12px rgba(16,185,129,0); } }
.ofd-cd-t { font-size:16px; font-weight:900; color:#0f172a; }
.ofd-cd-s { font-size:12.5px; color:#64748b; font-weight:700; margin:4px 0 14px; }
.ofd-cd-undo { width:100%; border:0; border-radius:14px; padding:14px; font-family:inherit; font-size:15px; font-weight:900; color:#fff; background:#dc2626; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.ofd-missing { font-size:12px; font-weight:800; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:7px 10px; text-align:center; }
.ofd-missing .n { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:10px; background:#d97706; color:#fff; font-size:11px; font-weight:900; margin-left:6px; padding:0 6px; }
.ofd-missing b { color:#b45309; }
.ofd-missing b { color:#b45309; }
body.modal-embed .ofd-submitbar .ofd-back { display:none !important; } /* داخل البوابة: الرجوع من رأس النافذة */
/* مساحة سفلية حتى لا يغطّي شريط الإرسال الثابت قسم التواقيع */
#leaveContent.has-submitbar { padding-bottom: 130px; } body.modal-embed #leaveContent.has-submitbar { padding-bottom: 96px; }
body.modal-embed .ofd-sign-line:empty { display:none; } body.modal-embed .ofd-signs { margin-top:4px; } body.modal-embed .ofd-sign-t { margin-bottom:4px; } body.modal-embed .ofd-sign-name { margin-top:2px; min-height:0; }
.ofd-send { flex:1; border:none; border-radius:14px; padding:14px; font-family:inherit; font-size:15px; font-weight:800; color:#fff; background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 10px 22px -8px rgba(16,185,129,.6); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.ofd-send:active { transform:scale(.99); }
@keyframes ofdReveal { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }