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

/* ---- 1) أزرار "مشاركة النشرة / نسخ رابط النشرة" ----
   بالبنفسجي والذهبي كانت تطلع بكل الصفحات (الأخبار، الفروع، التوظيف،
   وحتى فوق صفحة تسجيل الدخول). هلأ بتطلع بس مع نشرة الأسعار. */
main:has(> #rates.hidden) > .taif-bulletin-actions {
  display: none !important;
}

/* ---- 2) صفحة الفروع: رسالة تحميل ----
   بعد الضغط على "الفروع" كانت القائمة تضل فاضية 2-3 ثواني بدون أي إشارة.
   (العدّاد بيكون فاضي بس وقت التحميل، فما بتطلع وقت البحث بدون نتائج) */
#branchesCount:empty ~ #branchesGrid:empty::before {
  content: "جارٍ تحميل الفروع…";
  display: block;
  padding: 28px 12px;
  text-align: center;
  color: #8a7f95;
  font-size: .95em;
}

/* ---- 3) صفحة الفروع عالموبايل: الصورة المؤقتة ----
   كل الفروع الـ40 إلها نفس الصورة "صورة الفرع ستتوفر قريباً"، فالصفحة كانت
   توصل لأكتر من 21000 بكسل طول. عالموبايل منخفي الصورة المؤقتة بس؛
   أي فرع إله صورة حقيقية بتضل صورته. عالكمبيوتر ما تغيّر شي. */
@media (max-width: 760px) {
  #branchesGrid img[src*="branch-placeholder"] {
    display: none !important;
  }
}

/* ---- 4) البنفسجي والذهبي: الشريط العلوي عالموبايل ----
   الروابط كانت بارتفاع 110px، وزر "قدم على طلب توظيف" دائرة ضخمة،
   و"اشترك بأسعار طيف" مقصوص برا الشاشة. هلأ بينزلوا على سطرين ومبيّنين كلهن. */
@media (max-width: 760px) {
  html[data-portal-theme="taif-gold"] nav.nav {
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
    gap: 6px !important;
    padding-block: 10px !important;
  }
  html[data-portal-theme="taif-gold"] nav.nav > a {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 14px !important;
    white-space: nowrap;
    flex: 0 0 auto;
    align-items: center;
    margin: 0 !important;
  }
  html[data-portal-theme="taif-gold"] nav.nav > a[data-view="home"] {
    border-radius: 999px !important;
    padding-inline: 18px !important;
  }
}

/* ---- 5) تمييز التركيز للوحة المفاتيح ---- */
main :is(a, button, input, select, summary):focus-visible {
  outline: 2px solid #6f4a83;
  outline-offset: 2px;
}

/* ---- 6) البنفسجي والذهبي عالموبايل: عنوان "أسعار الفرع" ----
   كان لازق بطرف الكرت والحرف الأول مقصوص. */
@media (max-width: 760px) {
  html[data-portal-theme="taif-gold"] #rates > label {
    display: block;
    padding-inline: 14px;
    box-sizing: border-box;
  }
}

/* ---- 7) الثيمة الأصلية عالكمبيوتر: أزرار السوشال فوق الكروت ----
   منوسّع الهامش اليساري للزوار بس، منشان الأزرار تقعد بالفراغ وما تغطي
   على الكروت. (صفحة الأسعار بتنصلّح من classic-shell.js) */
@media (min-width: 701px) {
  html[data-portal-theme="classic"][data-classic-shell-ready]
  body:not(:has(#adminDash:not(.hidden))):not(:has(#employeeDash:not(.hidden))) > main:not(:has(#rates:not(.hidden))) {
    padding-left: 92px !important;
  }
}

/* ---- 8) العنوان اللي بياخد التركيز برمجياً ما عاد يطلع حوله مربع أسود ----
   (التركيز بيضل موجود لقارئ الشاشة، وبيطلع الإطار بس مع الكيبورد) */
h1[tabindex="-1"]:focus:not(:focus-visible),
h2[tabindex="-1"]:focus:not(:focus-visible),
h3[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---- 9) مساحة ضغط أكبر عالموبايل ---- */
@media (max-width: 760px) {
  #branchesGrid a[href^="tel:"],
  #branchesGrid a[href^="https://wa.me"],
  #branchesGrid a[href*="maps"] {
    display: inline-flex; align-items: center; min-height: 40px; padding-block: 6px;
  }
  .tw-link, #taifWorkspaceSidebar .tw-link { min-height: 40px; }
}

/* ---- 10) خانات رفع الملفات بشكل متناسق مع النموذج ---- */
input[type="file"] { font: inherit; max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; margin-inline-end: 10px; padding: 8px 14px;
  border-radius: 10px; border: 1px solid #e5daee; background: #f0eaf6; color: #62457d; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #e6dcef; }

/* ---- 11) عنوان عمود "التغيّر %" بيطلع بالترتيب الصح ---- */
.rates-table th, #ratesTable th { unicode-bidi: plaintext; }