/* =========================================================
   إصلاحات التجاوب (Responsive) — تُحمَّل بعد بقية الأنماط لتعلوها

   تعالج المشاكل المتكررة على شاشات الجوال في كل الشاشات،
   وتعمل مع الاتجاهين: العربية (rtl) والإنجليزية (ltr).
   ========================================================= */

/* --- 1) منع الخروج الأفقي عن الشاشة ---
   السبب الأكثر شيوعاً لظهور شريط تمرير أفقي وتكسّر التنسيق */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* الصور لا تتجاوز حاويتها أبداً */
img {
    max-width: 100%;
    height: auto;
}

/* --- 2) الجداول ---
   الجداول العريضة أكبر سبب لتكسّر الشاشات على الجوال.
   نمنحها تمريراً أفقياً داخل حاويتها بدل دفع الصفحة كلها. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    /* أي جدول ليس داخل .table-responsive يُعطى تمريراً أفقياً */
    table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* الجداول التي نتحكم بها في شاشاتنا الجديدة تبقى طبيعية
       لأن لها معالجة خاصة أدناه */
    table.inv-tbl,
    table.inv-pays,
    table.inv-sum,
    table.pay-items {
        display: table;
        white-space: normal;
    }
}

/* --- 3) الحقول والأزرار على الجوال --- */
@media (max-width: 767px) {
    /* حجم خط 16px فأكثر يمنع iOS من تكبير الصفحة تلقائياً عند التركيز */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="date"],
    input[type="search"],
    select,
    textarea,
    .form-control {
        font-size: 16px;
    }

    /* الأزرار المتلاصقة يصعب لمسها؛ نمنحها عرضاً كاملاً ومسافة */
    .form-actions .btn,
    .bs-example .btn,
    .pay-actions .btn,
    .inv-actions .btn {
        display: block;
        width: 100%;
        margin-bottom: 8px;
    }

    /* أزرار الجداول تبقى بجانب بعضها لكن أصغر */
    td .btn,
    td .btn-outline {
        display: inline-block;
        width: auto;
        margin: 2px 1px;
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* --- 4) النماذج الأفقية ---
   form-horizontal في بوتستراب 3 يستخدم col-md فقط في كثير من شاشاتنا،
   فتظل الحقول ضيقة جداً على الجوال. */
@media (max-width: 991px) {
    .form-horizontal .control-label {
        text-align: right;
        margin-bottom: 4px;
    }

    .form-horizontal [class*="col-md-"],
    .form-horizontal [class*="col-lg-"] {
        width: 100%;
    }

    /* إلغاء الإزاحات التي تدفع الأزرار خارج الشاشة */
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3 {
        margin-right: 0;
        margin-left: 0;
    }
}

/* --- 5) لوحات وبطاقات الشاشات الجديدة --- */
@media (max-width: 767px) {
    .pay-wrap,
    .invoice-sheet {
        padding: 10px !important;
        margin: 0 !important;
    }

    /* الأعمدة المتجاورة تتحول لأعمدة متراكمة */
    .inv-bottom,
    .inv-summary,
    .pay-facts,
    .pay-money,
    .inv-box-body,
    .inv-bar {
        flex-direction: column;
        align-items: stretch;
    }

    /* جدول الإجماليات كان بعرض ثابت فيخرج عن الشاشة */
    .inv-sum,
    .inv-totals {
        width: 100% !important;
        margin-top: 14px;
    }

    .inv-bar-item.stat {
        margin-right: 0;
        margin-top: 6px;
    }

    /* التواقيع الثلاثة متلاصقة جداً على الجوال */
    .inv-sign {
        flex-direction: column;
        gap: 26px;
        margin-top: 26px;
    }

    .inv-sign i {
        margin-top: 26px;
    }

    /* الترويسة: الشعار فوق النص بدل بجانبه */
    .inv-head,
    .inv-brand,
    .top-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .inv-meta,
    .top-left {
        text-align: right;
        min-width: 0;
        width: 100%;
    }

    .school-title {
        margin-right: 0;
    }

    .school-title h2 {
        font-size: 16px;
    }
}

/* --- 6) القائمة الجانبية على الجوال ---
   تظهر فوق المحتوى لا بجانبه، وتُغلق بالنقر خارجها */
@media (max-width: 767px) {
    .navbar-static-side,
    .sidebar {
        position: relative;
        width: 100%;
    }

    #page-wrapper {
        margin: 0 !important;
        padding: 10px !important;
    }
}

/* --- 7) شاشة الدخول --- */
@media (max-width: 767px) {
    .login-panel,
    .login-box,
    .login-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 15px !important;
    }
}

/* --- 8) دعم الاتجاهين ---
   الأنماط أعلاه تستخدم خصائص محايدة قدر الإمكان.
   هنا نضبط الحالات التي تختلف بين العربية والإنجليزية. */
html[dir="ltr"] .inv-sum .w-num,
html[dir="ltr"] .inv-totals .c-num {
    text-align: right;
}

html[dir="ltr"] .inv-note {
    border-right: none;
    border-left: 3px solid #e0b83c;
}

html[dir="ltr"] .inv-bar {
    border-right: none;
    border-left: 4px solid #1d6f6f;
}

html[dir="ltr"] .form-horizontal .control-label {
    text-align: left;
}

/* --- 9) الشاشات المتوسطة (اللوحي) --- */
@media (min-width: 768px) and (max-width: 991px) {
    .inv-sum,
    .inv-totals {
        width: 260px;
    }

    .pay-wrap {
        padding: 0 10px;
    }
}

/* --- 10) الطباعة ---
   قواعد عامة تنطبق على كل الشاشات القابلة للطباعة */
@media print {
    html, body {
        overflow: visible !important;
        background: #fff !important;
    }

    /* استرجاع اتجاه الأعمدة عند الطباعة حتى لو كانت الشاشة صغيرة */
    .inv-bottom,
    .inv-summary,
    .inv-head,
    .inv-brand,
    .inv-sign,
    .top-content {
        flex-direction: row !important;
    }

    .inv-sum,
    .inv-totals {
        width: 78mm !important;
    }

    table.table {
        display: table !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* --- 11) جداول الفاتورة على الجوال ---
   خمسة أعمدة لا تتّسع على شاشة 360px، فنقلّص الحشو والخط
   ونخفي عمود الكمية (قيمته دائماً 1 في هذا النظام)
   ونمنح الجدول تمريراً أفقياً عند الحاجة. */
@media (max-width: 767px) {
    .inv-tbl,
    .pay-items,
    .inv-pays {
        font-size: 11.5px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .inv-tbl thead th,
    .pay-items thead th,
    .inv-pays thead th,
    .inv-tbl tbody td,
    .pay-items tbody td,
    .inv-pays tbody td {
        padding: 6px 6px;
    }

    /* عمود الكمية والترقيم يُخفيان لتوفير المساحة */
    .inv-tbl .w-qty,
    .inv-tbl .w-idx {
        display: none;
    }

    .inv-tbl .w-num,
    .pay-items .c-num {
        width: auto;
        min-width: 70px;
    }

    /* اسم البند قد يكون طويلاً */
    .inv-tbl tbody td:nth-child(2),
    .pay-items tbody td:first-child {
        white-space: normal;
        min-width: 130px;
    }
}

/* --- 12) شريط أزرار الفاتورة العلوي --- */
@media (max-width: 767px) {
    #noprint {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 8px !important;
    }

    #noprint > a,
    #noprint > button {
        flex: 1 1 45%;
        text-align: center;
        font-size: 13px !important;
        padding: 8px 6px !important;
    }
}

/* --- 13) شاشة تسجيل الطالب ---
   ملخّص الرسوم وحقول الخيارات */
@media (max-width: 767px) {
    #formcreate .row > [class*="col-"] {
        margin-bottom: 6px;
    }

    .quick .btn {
        width: auto !important;
        display: inline-block !important;
    }
}