/* =====================================================
   CorSSome — Mobile-First Responsive Core (mobile.css)
   يُضاف هذا الملف لكل صفحات الموقع
   ===================================================== */

/* ---- 1. Global Reset للهاتف ---- */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%; /* منع iOS من تكبير النص */
    scroll-behavior: smooth;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ---- 2. الصور والوسائط دائماً متجاوبة ---- */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---- 3. منع تأخير اللمس 300ms على الأجهزة المحمولة ---- */
button, a, input, select, textarea, label, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
}

/* ---- 4. حجم Touch Target الأدنى (Apple HIG: 44x44px) ---- */
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* ---- 5. منع iOS من تكبير حقول الإدخال ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
    font-size: 16px !important; /* القيمة الحرجة لمنع zoom على iOS */
    -webkit-appearance: none;
    border-radius: 12px;
}

/* ---- 6. Container متجاوب ---- */
.container {
    max-width: min(95vw, 1200px) !important;
    padding: clamp(12px, 4vw, 24px) !important;
}

/* ---- 7. Typography متجاوبة بـ clamp() ---- */
h1 { font-size: clamp(1.6rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 4vw, 2rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
p  { font-size: clamp(0.9rem, 2.5vw, 1.1rem); }

/* ---- 8. Grid Utilities متجاوبة ---- */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

/* ---- 9. Safe Area لأجهزة iPhone X+ (الشق) ---- */
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-top {
    padding-top: env(safe-area-inset-top, 0px);
}

/* ---- 10. Scrollable Tables ---- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

/* =====================================================
   MOBILE BREAKPOINTS — الجوال (< 640px)
   ===================================================== */
@media (max-width: 640px) {

    /* --- Navigation & Header --- */
    .nav-header,
    .site-header {
        padding: 0.8rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* --- Cards: padding أصغر على الموبايل --- */
    .card {
        padding: clamp(1rem, 4vw, 1.8rem) !important;
        border-radius: 20px !important;
    }

    /* --- Buttons: Full width على الموبايل --- */
    .btn-full-mobile {
        width: 100%;
    }

    /* --- الشريط الجانبي — إخفاء وتحويله لدرج --- */
    .sidebar {
        position: fixed !important;
        right: -100% !important;
        top: 0;
        height: 100vh;
        width: min(85vw, 320px) !important;
        z-index: 9000;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 10px 0 40px rgba(0,0,0,0.5);
    }

    .sidebar.mobile-open {
        right: 0 !important;
    }

    /* --- Backdrop لإغلاق الـ Sidebar --- */
    .mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 8999;
        cursor: pointer;
    }

    .mobile-backdrop.visible {
        display: block;
        animation: fadeBackdrop 0.25s ease;
    }

    @keyframes fadeBackdrop {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* --- الإحصائيات: عمودان بدل ثلاثة --- */
    .stats-row {
        grid-template-columns: 1fr 1fr !important;
    }

    /* --- Grids: عمود واحد --- */
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* --- مشغل الفيديو: Layout عمودي --- */
    .player-layout {
        flex-direction: column !important;
    }

    .video-section {
        width: 100% !important;
    }

    .playlist-sidebar {
        width: 100% !important;
        max-height: 45vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Progress bar: أكبر لمنطقة اللمس --- */
    .progress-bar-track {
        height: 6px;
        padding: 14px 0;
        cursor: pointer;
    }

    /* --- Dashboard sidebar --- */
    .dashboard-sidebar {
        position: fixed !important;
        right: -280px !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 9000;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }

    .dashboard-sidebar.open {
        right: 0 !important;
    }

    .dashboard-main {
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* --- Dashboard stats grid --- */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }

    /* --- Auth card --- */
    .auth-card,
    .glass-card {
        width: min(92vw, 460px) !important;
        padding: 1.8rem 1.4rem !important;
        margin: 1rem auto !important;
    }

    /* --- Logo size --- */
    .logo-v2 {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }

    /* --- Profile grid --- */
    .profile-grid {
        grid-template-columns: 1fr !important;
    }

    .profile-stats-bar {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.6rem !important;
    }

    .stat-val {
        font-size: 1rem !important;
    }

    .stat-lbl {
        font-size: 0.72rem !important;
    }

    /* --- Hamburger Button (مخفي افتراضياً، يظهر على الهاتف) --- */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: rgba(99, 102, 241, 0.15);
        border: 1px solid rgba(99, 102, 241, 0.3);
        border-radius: 12px;
        cursor: pointer;
        color: var(--text-main);
        font-size: 1.2rem;
        transition: all 0.3s;
        flex-shrink: 0;
    }

    .mobile-menu-btn:hover {
        background: rgba(99, 102, 241, 0.3);
        transform: scale(1.05);
    }

    /* --- إخفاء عناصر Desktop على الهاتف --- */
    .desktop-only { display: none !important; }
    .mobile-only  { display: flex !important; }
}

/* =====================================================
   TABLET BREAKPOINTS — التابلت (640px - 1024px)
   ===================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

    .grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
    }

    .grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
    }

    .sidebar {
        width: min(75vw, 300px) !important;
    }

    .dashboard-sidebar {
        width: 230px !important;
    }

    .dashboard-main {
        margin-right: 230px !important;
    }

    /* --- player layout في التابلت --- */
    .player-layout {
        flex-direction: column !important;
    }

    .video-section {
        width: 100% !important;
    }

    .playlist-sidebar {
        width: 100% !important;
        max-height: 50vh !important;
    }
}

/* =====================================================
   DESKTOP — الكمبيوتر (> 1024px)
   ===================================================== */
@media (min-width: 1025px) {
    /* إخفاء زر Hamburger على الكمبيوتر */
    .mobile-menu-btn { display: none !important; }
    .mobile-only     { display: none !important; }
    .desktop-only    { display: flex !important; }

    /* مشغل الفيديو: Layout أفقي على الكمبيوتر */
    .player-layout {
        flex-direction: row !important;
    }
}

/* =====================================================
   LANDSCAPE — الهاتف أفقي
   ===================================================== */
@media (max-width: 896px) and (orientation: landscape) {
    .player-video-container {
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }

    /* إخفاء العناصر الزائدة في Landscape لتوسيع الفيديو */
    .player-layout {
        flex-direction: row !important;
    }

    .video-section {
        flex: 1 !important;
        width: auto !important;
    }

    .playlist-sidebar {
        width: min(40vw, 280px) !important;
        max-height: 100vh !important;
        overflow-y: auto;
    }
}

/* =====================================================
   iOS Notch / Dynamic Island Safe Areas
   ===================================================== */
@supports (padding: max(0px)) {
    .fixed-bottom {
        padding-bottom: max(env(safe-area-inset-bottom), 1rem);
    }
    .fixed-top {
        padding-top: max(env(safe-area-inset-top), 0px);
    }
}

/* =====================================================
   Scrollbar تجميل (Webkit)
   ===================================================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}

/* =====================================================
   Print — إخفاء العناصر الديكورية عند الطباعة
   ===================================================== */
@media print {
    .mesh-bg, .glowing-blob, .background-wrapper,
    .orb, .mobile-backdrop { display: none !important; }
}