/*
 * أنماط الجوال القديمة (المنصة على الويب) — مفصولة عن lammah-styles.css.
 * تُعطَّل داخل تطبيق الآيفون (index.tsx ← html.is-native) لأنها تفرض حشوة
 * على كل زر، وتلفّ كل صف، وتحوّل كل شبكة لعمود واحد — مصدر التشوّه البصري
 * في التطبيق. الموقع على الجوال يبقى كما هو.
 */
@media (max-width: 1024px) {
    .dashboard-layout-container {
        flex-direction: column;
        padding: 0.5rem;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    body {
        background-attachment: scroll;
    }
    
    .dashboard-layout-container {
        flex-direction: column;
        padding: 0.25rem;
        gap: 0.5rem;
    }
    
    .dashboard-main-area {
        padding: 0.5rem !important;
        margin: 0 !important;
    }
    
    .futuristic-card, 
    .glass-card,
    [class*="card"] {
        border-radius: 12px !important;
        padding: 1rem !important;
        margin: 0.25rem !important;
    }
    
    .cinematic-profile-page {
        padding: 0 !important;
    }
    
    .profile-header {
        padding: 8px 12px !important;
    }
    
    .profile-content {
        padding: 12px !important;
    }
    
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    input, textarea, select, button {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    
    .modal-content, 
    [class*="modal"] > div {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    
    .flex { flex-wrap: wrap !important; }
    .flex.flex-nowrap { flex-wrap: nowrap !important; }
    /* صف مُعلَن للتمرير الأفقي (overflow-x-auto/scroll) لا يُكدَّس أبداً — قاعدة المنصة:
       "تمرير أفقي لا تكدّس". التكديس كان يحوّل الشرائط والكاروسيل (مثل بطاقات لوحة
       المؤسس) إلى عمود مقصوص. باقي الصفوف تبقى كما هي. */
    .flex.overflow-x-auto, .flex.overflow-x-scroll { flex-wrap: nowrap !important; }
    /* عناصر الشريط تحتفظ بحجمها ويتمرر الشريط، بدل أن تنضغط حتى تتلاصق الكلمات. */
    .flex.overflow-x-auto > *, .flex.overflow-x-scroll > * { flex-shrink: 0 !important; }
    /* العمود (flex-col) لا يُلفّ: مع ارتفاع محدد كان التفاف العمود يولّد أعمدة جانبية
       تخرج عن حافة البطاقة فيُقصّ المحتوى. من يريد الالتفاف يكتب flex-wrap صراحة. */
    .flex.flex-col:not(.flex-wrap), .flex.flex-col-reverse:not(.flex-wrap) { flex-wrap: nowrap !important; }
    .desktop-only, .hide-mobile { display: none !important; }
    .mobile-only { display: block !important; }
}

/* Studio toolbar: on tablet/mobile, wrap into one compact block instead of
   requiring horizontal scroll — users weren't discovering the hidden buttons. */
@media (max-width: 1024px) {
    .studio-toolbar-bar.flex.flex-nowrap {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        row-gap: 4px !important;
    }
}

@media (max-width: 480px) {
    html { font-size: 13px; }
    
    .dashboard-main-area { padding: 0.25rem !important; }
    .futuristic-card, .glass-card { padding: 0.75rem !important; }
    button { padding: 10px 16px !important; }
    
    [class*="col-span-"] { grid-column: span 1 !important; }
    .lg\:col-span-2, .lg\:col-span-3 { grid-column: span 1 !important; }
}