/* mobile.css - تظبيطات الموبايل والتابلت المشتركة لكل الصفحات (بتتحمّل من pwa_head.php)
   مابتأثرش على شاشة الكمبيوتر خالص - كل القواعد جوه max-width.
   !important لازم في كام مكان لأن ملف CSS الخاص بكل صفحة بيتحمّل بعد الملف ده. */

/* ===== الآيفون: الصفحة بتكمّل ورا شريط الساعة (viewport-fit=cover في pwa_head.php) =====
   env(safe-area-inset-*) بيساوي صفر في أي شاشة مفيهاش نوتش، فالقواعد دي مابتغيّرش حاجة في الكمبيوتر أو أندرويد.
   لون البني ورا الصفحة عشان أي مساحة فاضية (فوق أو تحت لما الصفحة تتشد) ماتبقاش بيضا. */
html { background: #4a3525; }
/* html قبل الكلاس عشان تكسب cart-floating.css (اللي بيتحمّل بعد الملف ده) من غير !important،
   وتسيب صفحة طلبات التوريد تعلّي زرار Checkout فوق شريط الإرسال بتاعها */
html .notif-bell { top: calc(20px + env(safe-area-inset-top)); }
html .floating-cart-widget { bottom: calc(25px + env(safe-area-inset-bottom)); }
.sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }

/* ===== أي مقاس (لابتوب وشاشات كبيرة كمان) =====
   main-content عنصر flex - من غير min-width: 0 بيكبر على قد أعرض حاجة جواه (جدول أو صف مابيلفّش)
   ويطلّع الصفحة برا الشاشة في اللابتوب الصغير. كده بيلتزم بالمساحة اللي جنب القايمة الجانبية. */
.main-content { min-width: 0; }
/* الجداول اللي js/responsive.js لقاها أعرض من الصندوق بتاعها بس - الباقي بيفضل زي ما هو */
.main-content table.is-wide-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== موبايل + موبايل بالعرض + تابلت (لحد 1024px) ===== */
@media (max-width: 1024px) {
    html, body { max-width: 100%; overflow-x: hidden; }

    /* القايمة الجانبية بتتقفل وتتفتح من زرار ☰ (نفس سلوك sidebar.css تحت 768px)
       عشان الـ 240px بتاعتها ماتاكلش نص الشاشة في التابلت والموبايل بالعرض */
    .sidebar-toggle { display: flex !important; top: calc(14px + env(safe-area-inset-top)) !important; }
    .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1200 !important; }
    .sidebar.mobile-open { transform: translateX(0); }
    html[dir="rtl"] .sidebar { transform: translateX(100%); }
    html[dir="rtl"] .sidebar.mobile-open { transform: translateX(0); }

    /* 72px فوق عشان زرار ☰ و96px تحت عشان زرار Checkout العايم مايغطيش آخر زرار في الصفحة */
    .main-content {
        margin-left: 0 !important; margin-right: 0 !important; min-width: 0; max-width: 100%; box-sizing: border-box;
        padding: calc(72px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
    }
    .main-content > *, .container, .glass-panel { max-width: 100% !important; min-width: 0; box-sizing: border-box; }
    .main-content img, .main-content video { max-width: 100%; height: auto; }

    /* الجداول العريضة بتتسكرول جوه نفسها بدل ما توسّع الصفحة كلها */
    .main-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .main-content th, .main-content td { white-space: nowrap; }

    /* الحقول على قد عرض الشاشة، وخط 16px عشان الآيفون مايعملش zoom لما تدوس على أي حقل */
    .main-content input, .main-content select, .main-content textarea { max-width: 100%; min-width: 0 !important; box-sizing: border-box; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }

    /* صفوف التابات والفلاتر والأزرار بتنزل سطر جديد بدل ما تطلع برا الشاشة */
    .inv-tabs, .filter-bar, .add-form, .period-head, .page-heading, .page-head, .rr-tabs, .info-strip { flex-wrap: wrap; }
    .zone-pill { white-space: normal !important; display: inline-block; max-width: 100%; }
    .notif-item { flex-wrap: wrap; min-width: 0; }
    .main-content [class*="summary"], .main-content [class*="card"] { min-width: 0; }

    h1, h2, h3 { overflow-wrap: anywhere; }
}

/* ===== موبايل بالطول (لحد 768px) ===== */
@media (max-width: 768px) {
    /* الفورمز والصناديق اللي فيها عمودين بتبقى عمود واحد */
    /* minmax(0, 1fr) مش 1fr بس: 1fr لوحدها مابتصغرش عن أعرض عنصر جواها */
    .form-grid, .best-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .best-points li { max-width: 100%; overflow-wrap: anywhere; }
    /* الاسم والإيميل ياخدوا 150px على الأقل، ولو مفيش مكان السكور ينزل سطر لوحده بدل ما يغطي عليهم */
    .best-who { flex-wrap: wrap; }
    .best-id { flex: 1 1 150px !important; overflow-wrap: anywhere; }
    .inv-tab-btn { flex: 1 1 45%; }

    /* صفحة طلبات التوريد: شريط الإرسال تحت بيطول بمساحة شريط الهوم في الآيفون، فزرار Checkout يطلع معاه */
    html:has(.rr-sendbar) .floating-cart-widget { bottom: calc(92px + env(safe-area-inset-bottom)); }

    /* الصناديق متصممة بحواف 22-35px للكمبيوتر - على الموبايل بتاكل خُمس الشاشة، فبتبقى 16px من الجنبين */
    .main-content .container, .main-content .glass-panel, .menu-container, .table-container,
    .payment-container, .section-card, .main-content .panel {
        padding-left: 16px !important; padding-right: 16px !important;
    }
    .product-card { padding-left: 14px !important; padding-right: 14px !important; }

    /* زراير + و − للكميات أكبر عشان تتداس بالصباع بسهولة (40px بدل 32px) */
    .qty-btn { min-width: 40px; min-height: 40px; font-size: 1.1rem; }

    /* اختيار الفروع في صفحة الصلاحيات: أسماء الفروع الطويلة بتنزل سطر بدل ما تطلع برا */
    .add-form .branch-checkboxes label { flex: 1 1 auto !important; max-width: 100%; }
}

/* ===== موبايلات صغيرة جدًا والموبايلات اللي بتتطبق (لحد 400px) =====
   أي صف (flex) بينزل سطر جديد لو مفيش مكان، بدل ما يطلع برا الشاشة - لو فيه مكان مابيتغيرش حاجة */
@media (max-width: 400px) {
    .main-content :is(div, form, section, header, nav, ul) { flex-wrap: wrap; }
    .main-content .input-group { min-width: 0 !important; }
    .month-nav { max-width: 100%; }
}