/* ============================================================
   main.css — EyeHRM Core Styles
   محسّن: iOS background-attachment، transition cleanup،
   font-smoothing، print، dark-mode، أداء أفضل
   ============================================================ */

:root {
    --font: 'Tajawal', system-ui, -apple-system, sans-serif;
    --bg-deep: #02010a;
    --msn-blue: rgba(0, 100, 215, 0.12);
    --msn-glow: rgba(0, 180, 255, 0.05);
    --scroll-thumb: rgba(155, 155, 155, 0.25);
    --scroll-thumb-hover: rgba(155, 155, 155, 0.5);

    /* Easing */
    --transition-default: cubic-bezier(0.05, 0.7, 0.1, 1);
    --spring: cubic-bezier(0.3, 1.5, 0.5, 1);

    /* Colors */
    --neon-purple: rgba(120, 60, 240, 0.18);
    --neon-deep: rgba(70, 0, 180, 0.12);
    --warm-glow: rgba(255, 140, 0, 0.05);
    --neon-pink: rgba(220, 50, 130, 0.08);
    --neon-cyan: rgba(0, 210, 255, 0.05);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;

    /* ✅ إزالة !important من transition-timing-function
       كانت تُلغي أي transition مخصص في ملفات أخرى */
    transition-timing-function: var(--transition-default);

    /* إخفاء scrollbar بشكل موحّد */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ── User Select ────────────────────────────────────────────── */
html,
body {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

/* ✅ كل العناصر التفاعلية والنصية قابلة للتحديد */
input,
textarea,
select,
[contenteditable="true"],
.selectable,
p,
h1, h2, h3, h4, h5, h6,
span.selectable-text {
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text;
}

/* ── HTML Base ──────────────────────────────────────────────── */
html {
    direction: rtl;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 20px;
    scroll-padding-bottom: 20px;
    /* ✅ font-size أساسي للـ rem units */
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
    background-repeat: no-repeat;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    color: #ffffff;
    /* ✅ حذف background-attachment: fixed من body — غير ضروري هنا */
}

/* ── Buttons & Clickables ───────────────────────────────────── */
button,
.eye-btn-active,
.clickable {
    transition: transform 0.15s var(--transition-default);
    touch-action: manipulation;
}

button:active,
.eye-btn-active:active {
    transform: scale(0.974) translateY(2px);
}

/* ── Fonts — Tajawal ────────────────────────────────────────── */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Tajawal'),
         url('fonts/Iura6YBj_oCad4k1nzSBC45I.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
        U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F,
        U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB,
        U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03,
        U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32,
        U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
        U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57,
        U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64,
        U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C,
        U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3,
        U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Tajawal'),
         url('fonts/Iura6YBj_oCad4k1nzGBCw.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Tajawal'),
         url('fonts/Iurf6YBj_oCad4k1l8KiHrRpiYlJ.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
        U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F,
        U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Tajawal'),
         url('fonts/Iurf6YBj_oCad4k1l8KiHrFpiQ.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Tajawal'),
         url('fonts/Iurf6YBj_oCad4k1l4qkHrRpiYlJ.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
        U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F,
        U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Tajawal'),
         url('fonts/Iurf6YBj_oCad4k1l4qkHrFpiQ.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Glass Effect ───────────────────────────────────────────── */
.glass-effect {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    background: rgba(255, 255, 255, 0.038);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Scroll Containers ──────────────────────────────────────── */
.scroll-container,
.modal-content,
.dropdown-menu,
.sidebar,
.chat-messages {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.no-overscroll {
    overscroll-behavior: none;
}

/* ── Background Layer ───────────────────────────────────────── */
.background-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: #000;
    background-image: url('../../../../images/vr-bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;

    /* ✅ الإصلاح الرئيسي: fixed يعمل على desktop فقط
       على iOS Safari، fixed مكسور — نستخدم scroll بديلاً */
    background-attachment: fixed;
}

/* ✅ iOS Fix — background-attachment: fixed مكسور على Safari/iOS */
@supports (-webkit-touch-callout: none) {
    .background-layer {
        background-attachment: scroll;
        /* نعوّض بـ pseudo-element ثابت بديلاً */
        background-image: none;
    }

    .background-layer::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: url('../../../../images/vr-bg.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

/* ── Links & Buttons Reset ──────────────────────────────────── */
a,
button {
    text-decoration: none;
    outline: none;
    border: none;
    background: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    color: inherit;
}

/* ── Focus Visible (Accessibility) ─────────────────────────── */
:focus-visible {
    outline: 2px solid rgba(91, 53, 232, 0.7);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Progress Loader ────────────────────────────────────────── */
#eyehrm-progress-loader.eyehrm-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5px !important;
    background: rgba(0, 0, 0, 0.15);
    z-index: 9999;
    pointer-events: none;
    display: none;
    overflow: hidden;
}

#eyehrm-progress-loader .eyehrm-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        #6b0f8c 0%,
        #9b3dff 20%,
        #00b4ff 45%,
        #00e5aa 65%,
        #ff6b00 85%,
        #6b0f8c 100%
    ) !important;
    background-size: 200% 100% !important;
    box-shadow: 0 0 12px rgba(155, 61, 255, 0.6),
                0 0 4px rgba(0, 229, 170, 0.4);
    transition: width 0.4s cubic-bezier(0.1, 0.7, 1, 0.1);
    float: left;
}

#eyehrm-progress-loader.active {
    display: block !important;
}

#eyehrm-progress-loader.eyehrm-animated .eyehrm-progress-bar {
    animation: progressFlow 1.4s linear infinite !important;
}

@keyframes progressFlow {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* ── Frame & Inner ──────────────────────────────────────────── */
.frame {
    position: relative;
    inset: 0;
    background: #f4f4f5;
    margin-top: -10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.inner {
    flex: 1;
    border-radius: 12px;
    background: #000;
    background-image: url('../../../../images/vr-bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* ✅ إصلاح iOS لـ .inner أيضاً */
    background-attachment: fixed;
}

/* ✅ iOS Fix لـ .inner */
@supports (-webkit-touch-callout: none) {
    .inner {
        background-attachment: scroll;
        background-image: none;
        position: relative;
    }

    .inner::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: url('../../../../images/vr-bg.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: inherit;
    }
}

/* ── Print Styles ───────────────────────────────────────────── */
/* ✅ إضافة — لم تكن موجودة أصلاً */
@media print {
    .background-layer,
    .inner::before,
    #eyehrm-progress-loader,
    .vr-header {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .frame {
        background: #fff !important;
        padding: 0 !important;
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}