/* =====================================================================
   mobile-app.css
   يحوّل مظهر جميع الصفحات إلى تطبيق موبايل على الشاشات الصغيرة
   - شريط تنقّل سفلي بأيقونات (Bottom Tab Bar)
   - أحجام مضغوطة للأزرار والأيقونات والخطوط
   - تحويل الجداول إلى بطاقات (Cards)
   - نوافذ منبثقة بشكل Bottom Sheet
   يحافظ على ألوان كل قسم كما هي (يعتمد المتغيّرات أدناه كقيم احتياطية)
   ===================================================================== */

:root {
    --mobile-accent: #2c6b96;
    --mobile-accent-2: #78a6c8;
    --mobile-bar-bg: rgba(255, 255, 255, 0.98);
    --mobile-bar-border: rgba(0, 0, 0, 0.08);
    --mobile-card-radius: 14px;
    --mobile-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* الشريط السفلي مخفي افتراضياً على الشاشات الكبيرة */
.mobile-tabbar { display: none; }

/* ===================================================================== */
/*  وضع تطبيق الموبايل: يُفعّل على الشاشات <= 768px                        */
/* ===================================================================== */
@media (max-width: 768px) {

    html { -webkit-text-size-adjust: 100%; }

    body {
        font-size: 14px !important;
        /* ترك مساحة للشريط السفلي حتى لا يغطي المحتوى */
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        /* إلغاء توسيط بعض الصفحات (style.css) الذي يكسر تخطيط الموبايل */
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* حاوية أعرض بحواف أصغر */
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    /* ---------------- العناوين والخطوط ---------------- */
    h1, .h1 { font-size: 1.25rem !important; }
    h2, .h2 { font-size: 1.1rem !important; }
    h3, .h3 { font-size: 1rem !important; }
    h4, h5, h6 { font-size: 0.95rem !important; }
    h1.main-title, .main-title { font-size: 1.2rem !important; margin-bottom: 1rem !important; }

    /* ---------------- البطاقات ---------------- */
    .card {
        border-radius: var(--mobile-card-radius) !important;
        box-shadow: var(--mobile-shadow) !important;
        margin-bottom: 12px !important;
    }
    .card-body { padding: 12px !important; }
    .card-title { font-size: 1rem !important; margin-bottom: 0.5rem !important; }
    .card-text { font-size: 0.85rem !important; }

    /* بطاقات اختيار القسم في الصفحة الرئيسية */
    .section-card .card-body { padding: 16px !important; }
    .section-icon { font-size: 2rem !important; margin-bottom: 0.6rem !important; }

    /* ---------------- الأزرار والأيقونات ---------------- */
    .btn {
        font-size: 0.82rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 10px !important;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }
    .btn-sm { font-size: 0.75rem !important; padding: 0.35rem 0.5rem !important; min-height: 34px; }
    .btn-lg { font-size: 0.9rem !important; padding: 0.6rem 1rem !important; }
    .btn i, .fas, .far, .fa { font-size: 0.95em; }

    /* أزرار الأدوات داخل الصفوف تصبح دائرية صغيرة أنيقة */
    td .btn.btn-sm,
    .btn-group-sm > .btn { border-radius: 8px !important; }

    /* ---------------- الحقول والنماذج ---------------- */
    .form-control, .form-select {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.7rem !important;
        border-radius: 10px !important;
    }
    .form-label { font-size: 0.8rem !important; margin-bottom: 0.25rem !important; }
    .input-group-text { font-size: 0.8rem !important; padding: 0.4rem 0.6rem !important; }

    /* ---------------- التنبيهات ---------------- */
    .alert { font-size: 0.8rem !important; padding: 0.6rem 0.8rem !important; border-radius: 10px !important; }
    .badge { font-size: 0.7rem !important; }

    /* ===================================================================== */
    /*  تحويل الجداول إلى بطاقات                                              */
    /* ===================================================================== */
    .table-responsive { overflow: visible !important; }

    table.mc-cards { width: 100% !important; border: none !important; background: transparent !important; }
    table.mc-cards thead { display: none !important; }
    table.mc-cards tbody,
    table.mc-cards tr,
    table.mc-cards td { display: block !important; width: 100% !important; }

    table.mc-cards tr {
        background: #fff !important;
        border: 1px solid var(--mobile-bar-border) !important;
        border-radius: var(--mobile-card-radius) !important;
        box-shadow: var(--mobile-shadow) !important;
        padding: 8px 12px !important;
        margin-bottom: 10px !important;
    }

    table.mc-cards td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px;
        text-align: left !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px dashed #eef1f4 !important;
        font-size: 0.82rem !important;
        white-space: normal !important;
        word-break: break-word;
    }
    table.mc-cards td:last-child { border-bottom: none !important; }

    /* عنوان الحقل يظهر على يمين الخلية (RTL) بالاعتماد على data-label */
    table.mc-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--mobile-accent);
        margin-inline-end: 8px;
        flex: 0 0 auto;
        font-size: 0.78rem;
    }
    /* إخفاء العنوان إذا كان فارغاً (خلايا الأزرار مثلاً) */
    table.mc-cards td[data-label=""]::before,
    table.mc-cards td:not([data-label])::before { content: ""; margin: 0; }

    /* خلايا الأزرار تُعرض ممتدة بالكامل */
    table.mc-cards td.mc-actions {
        justify-content: center !important;
        gap: 8px;
        padding-top: 8px !important;
    }

    /* صفوف المجاميع/الإجماليات تبقى بارزة كبطاقة ملوّنة */
    table.mc-cards tr.table-dark,
    table.mc-cards tr.table-primary,
    table.mc-cards tr.table-info,
    table.mc-cards tr.table-warning,
    table.mc-cards tr.fw-bold { font-weight: 700 !important; }

    /* ===================================================================== */
    /*  النوافذ المنبثقة كـ Bottom Sheet                                     */
    /* ===================================================================== */
    .modal-dialog {
        max-width: 100% !important;
        margin: 0 !important;
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: flex-end;
        min-height: auto;
    }
    .modal-content {
        border-radius: 18px 18px 0 0 !important;
        padding: 0.5rem !important;
        max-height: 88vh;
        overflow-y: auto;
        width: 100%;
    }
    .modal-header { padding: 0.9rem !important; }
    .modal-title { font-size: 1.05rem !important; }
    .modal-body { padding: 0.9rem !important; }
    .modal-footer { padding: 0.7rem 0.9rem !important; }
    .modal.fade .modal-dialog { transform: translateY(30px); transition: transform 0.25s ease-out; }
    .modal.show .modal-dialog { transform: translateY(0); }

    /* ===================================================================== */
    /*  الشريط السفلي (Bottom Tab Bar)                                       */
    /* ===================================================================== */
    .mobile-tabbar {
        display: flex !important;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1050;
        background: var(--mobile-bar-bg);
        border-top: 1px solid var(--mobile-bar-border);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(10px);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: stretch;
    }
    .mobile-tabbar button {
        flex: 1 1 0;
        background: none;
        border: none;
        color: #6b7a88;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 0.66rem;
        font-family: inherit;
        padding: 4px 2px;
        border-radius: 10px;
        transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
        cursor: pointer;
    }
    .mobile-tabbar button i { font-size: 1.15rem; }
    .mobile-tabbar button:active { transform: scale(0.92); background: var(--mobile-accent); color: #fff; }
    .mobile-tabbar button.mobile-tab-home { color: var(--mobile-accent); }

    /* إخفاء الشريط السفلي عند فتح نافذة منبثقة حتى لا يتداخل معها */
    body.modal-open .mobile-tabbar { display: none !important; }
}

/* شاشات صغيرة جداً */
@media (max-width: 380px) {
    body { font-size: 13px !important; }
    .btn { font-size: 0.78rem !important; }
    .mobile-tabbar button { font-size: 0.6rem; }
    .mobile-tabbar button i { font-size: 1.05rem; }
}