/* ═══════════════════════════════════════════════════════════════════
   polish.css — طبقة الصقل البصريّ (آخر ورقة في الـcascade)
   ───────────────────────────────────────────────────────────────────
   الغرض: لمسات إحساسٍ ونعومة فوق تصميمٍ ناضج أصلاً — لا إعادة تصميم.
   كلّ قاعدة هنا إمّا تسدّ فراغاً حقيقياً (تحديد النصّ، حلقة تركيز لوحة
   المفاتيح، شريط تمرير مُنسَّق للوحة الموظفين) أو تُنعّم انتقالاً كان يقفز.

   قواعد الالتزام:
   • تستعمل رموز الحركة/اللون من variables.css — لا أرقام محليّة.
   • لا تلمس السايدبار (#kbsb) ولا صفحة «من نحن» العامّة — سلاكتوراتهما
     الأخصّ (وبعضها !important) تفوز تلقائياً وتبقى كما هي.
   • كلّ حركة هنا يغطّيها أمان prefers-reduced-motion العامّ في base.css
     (يستهدف `*`)، ويوقفها html.is-scrolling أثناء التمرير — بلا تكرار.
   • للرجوع: احذف هذا الملف وسطرَه من tools/build-html.js. صفر أثر على المنطق.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ١) تحديد النصّ — كان أزرق المتصفّح الافتراضيّ على موقع رعب ────── */
::selection {
    background: rgba(200, 26, 26, .34);
    color: var(--bone);
    text-shadow: none;
}
::-moz-selection {
    background: rgba(200, 26, 26, .34);
    color: var(--bone);
    text-shadow: none;
}

/* ── ٢) حلقة تركيز لوحة المفاتيح — كانت مخطّط المتصفّح الأزرق على الأزرار
   والروابط عند التنقّل بـTab (حلقة الحقول مضبوطة أصلاً في layout.css).
   تظهر فقط مع التنقّل بالكيبورد (:focus-visible)، فمستخدم الفأرة لا يراها. */
:focus-visible {
    outline: 2px solid var(--blood-ink);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ── ٣) أشرطة التمرير — لوحة الموظفين كانت تعرض شريط النظام الرماديّ
   الفاتح على أرضيةٍ شبه سوداء. الأشرطة المخصّصة الموجودة (#au-main،
   .kbsb-body، .tw-hide-scrollbar، شرائط «من نحن») أخصّ من هذه فتفوز
   ولا تتأثّر — هذه تملأ الفراغ في محتوى اللوحة والنوافذ والقوائم فقط. */
html {
    scrollbar-width: thin;
    scrollbar-color: #4a0d0d transparent;
}
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .32);
}
::-webkit-scrollbar-thumb {
    background: #3d0c0c;
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    transition: background-color var(--kb-dur-base) var(--kb-ease-move);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--blood);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background: var(--blood-bright);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── ٤) تغطية الانتقالات — رقائق/أزرار تبدّل الحدّ واللون عند التحويم
   فجأةً (base.css يمنح كلّ <button> انتقالَ transform+filter فقط، فلونُ
   الحافة يقفز). نرفع الأخصّيّة بـ#admin-interface لنتجاوز base.css،
   ونُبقي transform/filter في القائمة كي لا نُلغي إحساس الضغطة. */
#admin-interface :is(
    .adm-per-btn, .adm-today-btn, .role-switch-btn, .status-btn,
    .cctv-btn, .tracker-btn, .hist-act-btn, .hist-more-btn,
    .maze-btn, .rescue-btn, .exp-btn, .kb-exp-del-btn
) {
    transition:
        background-color var(--kb-dur-fast) var(--kb-ease-move),
        border-color var(--kb-dur-fast) var(--kb-ease-move),
        color var(--kb-dur-fast) var(--kb-ease-move),
        box-shadow var(--kb-dur-base) var(--kb-ease-out),
        text-shadow var(--kb-dur-base) var(--kb-ease-out),
        transform var(--kb-dur-fast) var(--kb-ease-move),
        filter var(--kb-dur-fast) var(--kb-ease-move);
}

/* روابط النصّ — لونٌ ينتقل بنعومة + توهّجٌ خفيف عند التحويم */
a {
    transition:
        color var(--kb-dur-fast) var(--kb-ease-move),
        text-shadow var(--kb-dur-base) var(--kb-ease-out);
}
a:hover {
    text-shadow: 0 0 10px rgba(200, 26, 26, .35);
}

/* ── ٥) حالة الحقل المُعطَّل — إحساسٌ موحّد (بعضها كان يبقى كأنّه فعّال).
   حلقة تركيز الحقول نفسها مضبوطة في layout.css بـ!important، فلا نكرّرها. */
:where(#admin-interface) input:disabled,
:where(#admin-interface) select:disabled,
:where(#admin-interface) textarea:disabled,
:where(#admin-interface) button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ── ٦) خطّ عنوان القسم — كان ثابتاً؛ الآن يُكشَف بمسحةٍ من جهة البداية.
   يُعاد تشغيله عند كلّ تبديل تبويب (display يتغيّر) فيقرأ «دخولاً» لا وميضاً. */
.section-title::after {
    transform-origin: right center;   /* RTL: يبدأ من اليمين */
    animation: kbTitleWipe var(--kb-dur-slow) var(--kb-ease-out) both;
}
@keyframes kbTitleWipe {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* ── ٧) أيقونة «لا يوجد…» — كانت جامدة. تنفّسٌ بطيء جداً يمنحها حياةً
   دون أن تلفت. الموظّف يرى حالات الفراغ كثيراً، فالسكون التامّ يقرأ «معطّل». */
.empty-state-msg::before {
    animation: kbEmptyBreathe 5.5s var(--kb-ease-move) infinite;
    transform-origin: 50% 60%;
}
@keyframes kbEmptyBreathe {
    0%, 100% { opacity: .30; transform: translateY(0)    scale(1);    }
    50%      { opacity: .42; transform: translateY(-2px) scale(1.04); }
}

/* ── ٨) أزرار الإجراء الأساسيّة — حلقة توهّجٍ دمويّة تكبر عند التحويم.
   لا عنصر زائف (::after) حتى لا نصطدم بأزرارٍ تستعمله أصلاً — الظلّ فقط. */
.btn-confirm:hover,
.btn-send-booking:hover,
.btn-save-user:hover,
.status-btn:hover,
.adv-btn:hover,
.staff-btn:hover {
    box-shadow:
        0 6px 22px -8px rgba(0, 0, 0, .7),
        0 0 20px -4px var(--blood-glow);
}
.btn-win:hover {
    box-shadow: 0 0 22px -4px rgba(74, 154, 92, .55);
}
.btn-lose:hover {
    box-shadow: 0 0 22px -4px rgba(255, 42, 42, .5);
}

/* ── ٩) بطاقات الملخّص (نظرة عامة/إدارة) — التحويم الحاليّ رفعٌ فقط.
   نُضيف تدفئة الحدّ ووهجاً داخلياً خفيفاً، بانتقالٍ ناعم. */
.adm-card {
    transition:
        transform var(--kb-dur-base) var(--kb-ease-out),
        border-color var(--kb-dur-base) var(--kb-ease-move),
        box-shadow var(--kb-dur-base) var(--kb-ease-out);
}
.adm-card:hover {
    border-color: rgba(200, 26, 26, .5);
    box-shadow:
        0 14px 34px -14px rgba(0, 0, 0, .8),
        inset 0 0 30px -18px rgba(200, 26, 26, .5);
}

/* ── ١٠) تمرير ناعم داخل حاويات المحتوى الرئيسيّة (يغطّيه أمان
   reduced-motion في base.css الذي يضبط scroll-behavior:auto). */
#admin-interface,
.tab-content,
.modal-body {
    scroll-behavior: smooth;
}