/* ==========================================================
   staff-polish.css — تنسيق واجهة الموظفين والإدارة
   - إضافي فقط: بيتحمّل آخر شي، وما بيغيّر ألوان ولا خطوط الثيم.
   - كل القواعد محصورة بحالة "موظف/مدير مسجّل دخول"، فواجهة الزوار ما بتتأثر.
   - مجرّب على الثيمات التلاتة: الأصلية الأولى (classic)، طيف — القوائم العصرية (ocean)،
     طيف البنفسجي والذهبي (taif-gold).
   التركيب: حط الملف بمجلد الملفات الثابتة جنب classic-theme.css، وضيف بآخر
   portal.html قبل </body> مباشرة (بعد سطر work-login.js):
     <link rel="stylesheet" href="/staff-polish.css?v=20261024-2">
   ========================================================== */

/* ---- 1) زر الإشعارات العائم مكرر مع جرس الهيدر ----
   الهيدر (الشكل الكلاسيكي) فيه جرس خاص، فالزر العائم كان يغطي على
   أيقونتي الجرس والوضع الليلي. منخفيه بس لما الهيدر الكلاسيكي شغّال.
   (جرس الهيدر بيضل يشتغل لأنه بيفحص hidden مو display) */
html[data-classic-shell-ready] #adminNotificationBell,
html[data-classic-shell-ready] #myDecisionBell {
  display: none !important;
}

/* ---- 2) أزرار السوشال (إنستغرام/فيسبوك/واتساب) للزوار فقط ----
   كانت تطلع فوق الكروت بلوحة الموظف والإدارة. */
body:has(#adminDash:not(.hidden)) .taif-mobile-socials,
body:has(#employeeDash:not(.hidden)) .taif-mobile-socials {
  display: none !important;
}

/* ---- 3) الأزرار العائمة: المحادثات + متابعة الطلبات ----
   ترتيبهم فوق بعض بمسافة ثابتة، بدل ما يتراكبوا. السبب: قاعدة بالثيم
   الكلاسيكي بتعطي الزرين نفس bottom:84px، فعالموبايل "متابعة الطلبات"
   كان مختفي ورا "المحادثات". المحددات أقوى عمداً لأن الأنماط بتنحقن بالـJS. */
html body #taifChatButton,
html[data-portal-theme][data-classic-shell-ready] body #taifChatButton {
  right: 20px !important; left: auto !important;
  bottom: 20px !important;
}
html body #requestWorkflowButton,
html[data-portal-theme][data-classic-shell-ready] body #requestWorkflowButton {
  right: 20px !important; left: auto !important;
  bottom: 86px !important;             /* 20 + ارتفاع زر المحادثات 54 + 12 */
  min-height: 40px;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(40, 32, 50, .10) !important;
}
@media (max-width: 760px) {
  /* فوق شريط التنقل السفلي (حوالي 72px) */
  html[data-portal-theme][data-classic-shell-ready] body #taifChatButton { bottom: 88px !important; padding-inline: 16px !important; }
  html[data-portal-theme][data-classic-shell-ready] body #requestWorkflowButton { bottom: 154px !important; }
  /* مساحة بآخر الصفحة منشان آخر كرت ما ينغطى بالأزرار */
  body:has(#adminDash:not(.hidden)) main,
  body:has(#employeeDash:not(.hidden)) main { padding-bottom: 140px; }
}

/* ---- 4) كرت جوّا كرت بلوحة الإدارة ----
   #adminDash كرت أبيض بإطار، وجواه مساحة الإدارة وكروت الإعدادات
   بإطارات كمان، فكان يطلع إطار مزدوج. منخلي الغلاف شفاف، والكروت
   الداخلية بتضل متل ما هي (نفس شكل كروت صفحة الأسعار). */
#adminDash.card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#adminDash.card > section,
#adminDash.card > .card,
#adminDash.card > details {
  margin-bottom: 20px;
}

/* ---- 5) مهام الموظف: كل الأزرار بنفس الارتفاع ومع أيقونة ----
   "راتبي ودوامي" و"المحادثات" ما إلهم أيقونة، فكان الصف غير متناسق. */
#employeeActionsMenu .portal-action {
  min-height: 46px;
  justify-content: flex-start;
}
@media (min-width: 761px) {  /* عالموبايل الثيم بيخفي كل الأيقونات أصلاً */
#employeeActionsMenu .portal-action:not(:has(.action-icon))::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-inline-end: 8px;
  border-radius: 8px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  -webkit-mask: none;
  background-image: var(--taif-action-fallback-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}
#employeeActionsMenu .portal-action[onclick*="openEmployeeHr"] {
  --taif-action-fallback-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f4a83' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");
}
#employeeActionsMenu .portal-action:not([onclick]) {
  --taif-action-fallback-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f4a83' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
}
}

/* زر الخروج: نفس ارتفاع أزرار المهام */
#employeeDash .employee-shortcuts > .btn { min-height: 46px; }

/* ---- 6) تبويبات أقسام الإدارة عالموبايل ----
   كانت تنقص بدون أي إشارة إنه فيه أكتر؛ منضيف سحب ناعم وتلاشي بالطرف. */
@media (max-width: 760px) {
  #awSections {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
            mask-image: linear-gradient(to left, #000 85%, transparent);
    padding-inline-end: 24px;
  }
  #awSections::-webkit-scrollbar { display: none; }
  #awSections > * { scroll-snap-align: start; flex: 0 0 auto; }
}

/* ---- 7) الحقول عالموبايل: النص التوضيحي كان ينقص ---- */
@media (max-width: 760px) {
  #adminDash input::placeholder,
  #employeeDash input::placeholder { font-size: .88em; }
}

/* ---- 8) تمييز التركيز للوحة المفاتيح (إمكانية الوصول) ---- */
#adminDash :is(button, a, input, select, textarea, summary):focus-visible,
#employeeDash :is(button, a, input, select, textarea, summary):focus-visible,
#taifChatButton:focus-visible,
#requestWorkflowButton:focus-visible {
  outline: 2px solid #6f4a83;
  outline-offset: 2px;
}

/* ---- 9) ثيمة "طيف — القوائم العصرية" (ocean) والبنفسجي والذهبي ---- */
/* زر الإشعارات كان لازق بزر القائمة (☰) عالكمبيوتر */
@media (min-width: 761px) {
  html[data-portal-theme="ocean"] body #adminNotificationBell,
  html[data-portal-theme="ocean"] body #myDecisionBell {
    left: 106px !important;
  }
}
/* لما تنفتح القائمة الجانبية، الأزرار العائمة كانت تطلع فوقها */
body.tw-menu-open #taifChatButton,
body.tw-menu-open #requestWorkflowButton,
body.tw-menu-open .taif-mobile-socials {
  visibility: hidden !important;
}

/* ---- 10) شبكة مهام الإدارة: 4 أعمدة عالكمبيوتر ----
   بعد إزالة الإطار المزدوج صار في عرض زيادة، فكانت تطلع 5 أعمدة مع سطر ناقص. */
@media (min-width: 1100px) {
  #awTasks { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---- 11) ثيمة البنفسجي والذهبي: الشريط العلوي عالموبايل ----
   زر "قدم على طلب توظيف" و"اشترك بأسعار طيف" للزوار، وكانوا يطلعوا للموظف
   والمدير ويدفشوا باقي الروابط برا الشاشة ("لوحة الإدارة" كانت تنكسر لسطرين). */
body:has(#adminDash:not(.hidden)) nav.nav > a[data-view="home"],
body:has(#employeeDash:not(.hidden)) nav.nav > a[data-view="home"],
body:has(#adminDash:not(.hidden)) nav.nav > a[href="/subscribe.html"],
body:has(#employeeDash:not(.hidden)) nav.nav > a[href="/subscribe.html"] {
  display: none !important;
}
body:has(#adminDash:not(.hidden)) nav.nav > a,
body:has(#employeeDash:not(.hidden)) nav.nav > a {
  white-space: nowrap;
}

/* ---- 12) القوائم العصرية (ocean): مهام الموظف ترجع تبين بالصفحة ----
   الثيمة كانت تخفي #employeeActionsMenu وتنقل كل المهام للقائمة الجانبية،
   فكانت لوحة الموظف شبه فاضية. هلأ المهام بتبين بالصفحة كمان (متل الثيمة
   الأصلية)، وزر "خروج" و"أسعار العملات" بيضلوا بالقائمة الجانبية بس. */
html[data-portal-theme="ocean"] #employeeDash:not(.hidden) > .reqhead > .actions.employee-shortcuts {
  display: flex !important;
  flex-basis: 100%;
}
html[data-portal-theme="ocean"] #employeeDash:not(.hidden) #employeeActionsMenu {
  display: block !important;
  width: 100%;
}
html[data-portal-theme="ocean"] #employeeDash .employee-shortcuts > .btn {
  display: none !important;
}

/* ---- 13) الأزرار العائمة عالموبايل: صارت دواير صغيرة ----
   "المحادثات" و"متابعة الطلبات" كانوا ياخدوا زاوية كبيرة ويغطّوا حقول وأزرار.
   النص بيضل موجود لقارئ الشاشة، بس بيختفي عن العين. */
@media (max-width: 760px) {
  html body #taifChatButton,
  html body #requestWorkflowButton {
    width: 52px !important; height: 52px !important; min-height: 52px !important;
    padding: 0 !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    right: 14px !important; left: auto !important;
  }
  html body #taifChatButton[hidden], html body #requestWorkflowButton[hidden] { display: none !important; }
  html body #taifChatButton > span {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  html body #taifChatButton #taifChatBadge { position: absolute; top: -4px; left: -4px; }
  html body #requestWorkflowButton { font-size: 0 !important; color: transparent; }
  html body #requestWorkflowButton::before {
    content: ""; width: 22px; height: 22px; display: block;
    background: currentColor;
    background: #62457d;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4H5v17h14V4h-3'/%3E%3Cpath d='M9 3h6v4H9zM8 12h8M8 16h5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4H5v17h14V4h-3'/%3E%3Cpath d='M9 3h6v4H9zM8 12h8M8 16h5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html[data-portal-theme] body #requestWorkflowButton,
  html[data-portal-theme][data-classic-shell-ready] body #requestWorkflowButton { bottom: calc(var(--taif-fab-base, 20px) + 62px) !important; }
  html[data-portal-theme] body #taifChatButton { bottom: var(--taif-fab-base, 20px) !important; }
  html[data-classic-shell-ready] { --taif-fab-base: 84px; }  /* فوق شريط التنقل السفلي */
  html[data-classic-shell-ready] body #taifChatButton { bottom: 84px !important; }
  html[data-classic-shell-ready] body #requestWorkflowButton { bottom: 146px !important; }
  body:has(#adminDash:not(.hidden)) main,
  body:has(#employeeDash:not(.hidden)) main { padding-bottom: 150px; }
}

/* ---- 14) الثيمة الأصلية عالكمبيوتر: الأزرار العائمة برّا القائمة الجانبية ----
   كانوا واقفين فوق أسفل القائمة (عرضها 248px) ويغطّوا "حسابي وأدواتي". */
@media (min-width: 761px) {
  html[data-classic-shell-ready] body #taifChatButton,
  html[data-portal-theme][data-classic-shell-ready] body #taifChatButton,
  html[data-classic-shell-ready] body #requestWorkflowButton,
  html[data-portal-theme][data-classic-shell-ready] body #requestWorkflowButton {
    right: 272px !important;
  }
}

/* ---- 15) الوضع الليلي بالثيمة الأصلية: الأزرار الثانوية كانت بيضا فاقعة ---- */
html[data-classic-night] body .btn.secondary,
html[data-classic-night] body #requestWorkflowButton {
  background: #382743 !important; color: #e2ceed !important; border-color: #4a3a57 !important;
}
html[data-classic-night] body .btn.secondary:hover { background: #443152 !important; }
@media (max-width: 760px) {
  html[data-classic-night] body #requestWorkflowButton::before { background: #e2ceed; }
}

/* ---- 16) روابط إدارة الأسعار عالموبايل: مساحة ضغط أكبر ---- */
@media (max-width: 760px) {
  #rates details > summary, .rates-manage-link { min-height: 40px; display: flex; align-items: center; }
}

/* ---- 17) مساحة بآخر الصفحة عالكمبيوتر كمان، منشان آخر كرت يطلع فوق الأزرار العائمة ---- */
@media (min-width: 761px) {
  body:has(#adminDash:not(.hidden)) main,
  body:has(#employeeDash:not(.hidden)) main { padding-bottom: 150px; }
}