/*
 * منصة طاقة — واجهة الموبايل (2026-10-31)
 * كل شي هنا للهاتف فقط (أقل من 768px). اللابتوب والتابلت ما يتأثرون.
 * يشتغل ويا mobile.js: الشريط السفلي (.tq-mnav)، الجداول بطاقات (.tq-cards)، الفلترة المطوية (.tq-fold).
 */

/* زر الفلترة والشريط السفلي ما يظهرون إلا بالهاتف */
.tq-fold-btn, .tq-mnav { display: none; }

/* ═══ حجم الكلام والأيقونات حسب عرض الهاتف ═══
   تصغير موحّد للصفحة كلها (مثل تطبيق المشتركين): الهاتف الكبير ×0.94 لحد الصغير ×0.82،
   فكل شي (خط، أيقونات، بطاقات، أزرار) يصغر بنفس النسبة ويتناسب ويا حجم الهاتف.
   الأجزاء بطول الشاشة تستعمل --tq-vh حتى تبقى بطول الشاشة بالضبط ويا التصغير. */
@media (max-width: 767.98px) {
    :root { --tq-zoom: .94; --tq-vh: calc(1dvh / var(--tq-zoom)); }
    html { zoom: var(--tq-zoom); }
    /* شريط التمرير مخفي مثل الهاتف (بإطار /m على الكمبيوتر يطلع شريط كمبيوتر) */
    html, body { scrollbar-width: none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
    .wrapper, .main-content, .pf-main { min-height: calc(100 * var(--tq-vh)); }
    html body .sidebar, html body .gms-sidebar, html body .pf-sidebar { height: calc(100 * var(--tq-vh)) !important; min-height: 0 !important; }
}
@media (max-width: 429.98px) { :root { --tq-zoom: .9; } }
@media (max-width: 389.98px) { :root { --tq-zoom: .86; } }
@media (max-width: 359.98px) { :root { --tq-zoom: .82; } }

@media (max-width: 767.98px) {

    /* ═══ الأساس: خط واضح، لمس مريح ═══ */
    html, body { -webkit-text-size-adjust: 100%; }
    body { -webkit-tap-highlight-color: transparent; }

    /* حقول 16px: آيفون ما يكبّر الشاشة لما تكتب، وارتفاع يناسب الإصبع */
    .form-control, .form-select, .page-content input:not([type=checkbox]):not([type=radio]):not([type=range]),
    .page-content select, .page-content textarea, .pf-content input:not([type=checkbox]):not([type=radio]),
    .pf-content select, .pf-content textarea {
        font-size: 16px !important;
    }
    .form-control, .form-select { min-height: 46px; border-radius: 12px; }
    .page-content .btn, .pf-content .btn { min-height: 42px; }
    .form-check-input { width: 1.25em; height: 1.25em; }

    /* ═══ الشريط العلوي: أنحف وأبسط ═══ */
    .tq-top .tq-who-role, .tq-top .tq-clock, .tq-top [title="ملء الشاشة"], .tq-top #fullscreenBtn { display: none !important; }
    .tq-top .tq-who-name { font-size: .95rem; max-width: 46vw; }
    .pf-topbar { min-height: 60px; padding: 8px 14px; }
    .pf-topbar .pf-who-name { font-size: 1rem; }

    /* ═══ رأس الصفحة: العنوان فوق والأزرار تلتف تحته ═══ */
    .page-content .d-flex.justify-content-between,
    .pf-content .d-flex.justify-content-between { flex-wrap: wrap; gap: 10px; }
    .page-content h1, .page-content .h1 { font-size: 1.45rem; }
    .page-content h2, .page-content .h2, .page-content .page-title, .tq-title { font-size: 1.3rem !important; line-height: 1.35; }
    .pf-content h1, .pf-content h2 { font-size: 1.3rem; }

    /* مجموعة أزرار (رأس الصفحة وغيره): شبكة عمودين، كل زر بعرض خانته */
    .tq-btnrow { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; width: 100%; }
    .tq-btnrow > * { width: 100%; margin: 0 !important; justify-content: center; text-align: center; white-space: normal; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
    .tq-btnrow > :only-child, .tq-btnrow > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tq-tile { width: 48px !important; height: 48px !important; font-size: 1.15rem !important; border-radius: 14px !important; }
    .tq-phead { gap: 12px; }
    .tq-desc { font-size: .88rem; }

    /* زر البحث الصوتي داخل حقل البحث (mobile.js) */
    .tq-micwrap { position: relative; display: block; width: 100%; }
    .tq-micwrap > input { padding-inline-end: 44px !important; width: 100% !important; }
    .tq-mic { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px; background: #eef0ff; color: #4f46e5; display: grid; place-items: center; z-index: 2; }
    .tq-mic.on { background: #ef4444; color: #fff; animation: tqMicPulse 1s infinite; }
    @keyframes tqMicPulse { 50% { box-shadow: 0 0 0 6px rgba(239,68,68,.25); } }

    /* بطاقات الأرقام القصيرة: اثنين بالصف (mobile.js يحدد الصف .tq-row2) */
    .tq-row2 { margin-inline: -5px !important; margin-bottom: 6px !important; }
    .tq-row2 > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding-inline: 5px !important; margin-bottom: 10px !important; }
    /* البطاقة المضغوطة: عنوان سطر-سطرين صغير، الرقم بسطر واحد، الوحدة صغيرة، الأيقونة صغيرة بالزاوية */
    .tq-stat { padding: 12px !important; min-height: 0 !important; height: 100%; gap: 6px; border-radius: 16px !important; margin: 0 !important; }
    .tq-stat :is(h1, h2, h3, h4, h5, [class*="value"], [class*="number"]) { font-size: 1.25rem !important; line-height: 1.25 !important; margin: 2px 0 0 !important; white-space: nowrap; }
    .tq-stat :is(h1, h2, h3, h4, h5, [class*="value"]) :is(small, span, .fs-6) { font-size: .68rem !important; font-weight: 700; white-space: nowrap; }
    .tq-stat :is(h6, p, [class*="title"], [class*="label"], [class*="lbl"]) { font-size: .74rem !important; line-height: 1.35 !important; margin-bottom: 2px !important; }
    .tq-stat :is([class*="icon"], .fa-2x, .fa-3x, .fs-1, .fs-2) { font-size: 1.35rem !important; width: auto; height: auto; flex-shrink: 0; }
    .tq-stat :is([class*="icon"]) i { font-size: inherit !important; }
    .tq-stat::after, .tq-stat::before { transform: scale(.6); transform-origin: top right; }

    /* شبكة/صف بعرض ثابت ما يكفي الهاتف (mobile.js): عمود واحد / يلتف */
    .tq-grid1 { grid-template-columns: minmax(0, 1fr) !important; }
    .tq-grid1 > * { grid-column: auto !important; min-width: 0; }
    .tq-wrap { flex-wrap: wrap !important; }
    .tq-wrap > * { min-width: 0; }
    .page-content .card-body { padding: 14px; }
    .page-content .card, .pf-content .pf-card { border-radius: 16px; }

    /* ═══ الجداول ← بطاقات ═══ */
    .page-content .table-responsive:has(> table.tq-cards),
    .pf-content .table-responsive:has(> table.tq-cards),
    .modal .table-responsive:has(> table.tq-cards) { overflow: visible; max-height: none; }

    table.tq-cards, table.tq-cards > tbody, table.tq-cards > tfoot {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    table.tq-cards > thead { display: none; }

    table.tq-cards > tbody > tr, table.tq-cards > tfoot > tr {
        display: block;
        background: #fff;
        border: 1px solid #e4e1f8;
        border-radius: 16px;
        padding: 6px 14px;
        margin-bottom: 12px;
        box-shadow: 0 2px 10px rgba(30,27,75,.05);
    }
    table.tq-cards > tfoot > tr { background: #f5f4ff; }

    table.tq-cards > tbody > tr > td, table.tq-cards > tfoot > tr > td,
    table.tq-cards > tbody > tr > th, table.tq-cards > tfoot > tr > th {
        display: flow-root;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border: 0 !important;
        border-bottom: 1px dashed #ecebf7 !important;
        padding: 9px 0 !important;
        text-align: end !important;
        white-space: normal !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .95rem;
    }
    table.tq-cards > tbody > tr > td:last-child, table.tq-cards > tfoot > tr > td:last-child { border-bottom: 0 !important; }

    /* اسم العمود يمين، القيمة يسار */
    table.tq-cards td[data-label]::before {
        content: attr(data-label);
        float: inline-start;
        margin-inline-end: 12px;
        max-width: 48%;
        color: #6b7280;
        font-weight: 700;
        font-size: .82rem;
        text-align: start;
        line-height: 1.6;
    }
    table.tq-cards td[data-label=""]::before, table.tq-cards td[data-label="#"]::before { display: none; }
    /* رقم التسلسل وخانة الاختيار (mobile.js: .tq-mini): صغار بسطر واحد أول البطاقة */
    table.tq-cards td.tq-mini {
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        border-bottom: 0 !important;
        padding: 6px 0 2px !important;
        margin-inline-end: 12px;
        color: #6b7280;
        font-size: .8rem;
        font-weight: 800;
    }
    table.tq-cards td.tq-mini::before { display: none; }

    /* أزرار الصف (عرض/تعديل/حذف): سطر بآخر البطاقة */
    table.tq-cards td.tq-actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding-top: 12px !important;
    }
    table.tq-cards td.tq-actions::before { display: none; }
    table.tq-cards td.tq-actions > * { flex: 0 0 auto; }
    table.tq-cards td.tq-actions .btn, table.tq-cards td.tq-actions a, table.tq-cards td.tq-actions button { min-width: 42px; min-height: 40px; }
    table.tq-cards td.tq-actions .d-flex, table.tq-cards td.tq-actions .btn-group { flex-wrap: wrap; justify-content: center; gap: 8px; }

    /* صفوف مدمجة (صاحب المولدة وتحته مولداته): الصف المكمّل يلتصق ببطاقة اللي قبله */
    table.tq-cards > tbody > tr.tq-has-cont { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; box-shadow: none; }
    table.tq-cards > tbody > tr.tq-cont { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; background: #fbfaff; }
    table.tq-cards > tbody > tr.tq-cont.tq-has-cont { border-radius: 0; }

    /* صف "ما توجد بيانات" (خلية وحدة بعرض الجدول) */
    table.tq-cards td.tq-span { display: block; text-align: center !important; }

    /* DataTables: البحث والعدد تحت بعض */
    .dataTables_wrapper .row > div { flex: 0 0 100%; max-width: 100%; text-align: center !important; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 6px 0 0 !important; }

    /* الجداول اللي تبقى جداول (مدمجة): تنسحب بالإصبع بسلاسة */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* ═══ البحث والفلترة مطوية ═══ */
    .tq-fold-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border: 1px solid #dcd9fb;
        background: #fff;
        color: #3730a3;
        border-radius: 14px;
        padding: 12px 16px;
        margin-bottom: 12px;
        font-family: inherit;
        font-weight: 800;
        font-size: 1rem;
    }
    .tq-fold-btn .tq-fold-arrow { margin-inline-start: auto; transition: transform .2s; }
    .tq-fold-btn.open .tq-fold-arrow { transform: rotate(180deg); }
    .tq-fold.tq-fold-closed { display: none !important; }

    /* ═══ النوافذ المنبثقة: تملي الشاشة ═══ */
    .modal-dialog:not(.modal-sm) {
        margin: 0;
        max-width: none;
        width: 100%;
        min-height: 100%;
        align-items: stretch;
    }
    .modal-dialog:not(.modal-sm) > .modal-content {
        border-radius: 0;
        border: 0;
        min-height: calc(100 * var(--tq-vh, 1dvh));
    }
    .modal-dialog-scrollable:not(.modal-sm) { height: 100%; }
    .modal-dialog-scrollable:not(.modal-sm) > .modal-content { max-height: calc(100 * var(--tq-vh, 1dvh)); }
    .modal-header { position: sticky; top: 0; z-index: 2; background: inherit; }
    .modal-footer { position: sticky; bottom: 0; z-index: 2; background: #fff; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
    .modal-footer .btn { flex: 1 1 auto; min-height: 46px; }

    /* SweetAlert ما تطلع برا الشاشة */
    .swal2-popup { width: calc(100vw - 24px) !important; max-width: 420px; }

    /* ═══ الشريط السفلي (مثل تطبيق المشتركين) ═══ */
    .tq-mnav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1045;
        display: grid;
        grid-template-columns: repeat(var(--tq-mnav-cols, 5), 1fr);
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -4px 20px rgba(30,27,75,.10);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .tq-mnav a, .tq-mnav button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 54px;
        padding: 4px 2px;
        border: 0;
        background: none;
        color: #6b7280;
        font-family: inherit;
        font-size: .72rem;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
    }
    .tq-mnav a i, .tq-mnav button i { font-size: 1.25rem; color: inherit !important; }
    .tq-mnav a span, .tq-mnav button span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tq-mnav a.on { color: #4f46e5; }
    .tq-mnav a.on::before { content: ''; position: absolute; top: -6px; width: 28px; height: 4px; border-radius: 0 0 4px 4px; background: #4f46e5; }
    .tq-mnav em { position: absolute; top: 2px; inset-inline-start: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f43f5e; color: #fff; font-style: normal; font-size: .65rem; display: flex; align-items: center; justify-content: center; }

    body.has-tq-mnav { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
    body.has-tq-mnav .main-content { padding-bottom: 0 !important; }
    /* شريط الموبايل القديم بـ _TaqaLayout: الجديد بداله */
    body.has-tq-mnav .mobile-bottom-nav { display: none !important; }

    /* القائمة الجانبية فوق الشريط السفلي ومريحة للإصبع */
    .gms-sidebar, .pf-sidebar { width: min(320px, 86vw) !important; z-index: 1060 !important; }
    /* القائمة داخل غلاف #sidebar (site.css: z-index 1035) فالغلاف لازم يصير فوق الطبقة الرمادية والشريط السفلي، وإلا تطلع القائمة باهتة ومغطاة */
    body > .wrapper > .sidebar, #sidebar.sidebar { z-index: 1060 !important; }
    .sidebar-overlay.show, .pf-overlay.show { z-index: 1055 !important; }
    .gms-sidebar .sidebar-link, .pf-sidebar .pf-link { min-height: 46px; }

    /* التذييل: سطر صغير */
    .site-footer { font-size: .75rem; padding: 10px 14px !important; }
}

/* أصغر الهواتف (320–360) */
@media (max-width: 360px) {
    .tq-mnav a, .tq-mnav button { font-size: .64rem; }
    .tq-mnav a i, .tq-mnav button i { font-size: 1.1rem; }
    .tq-stat :is(h1, h2, h3, h4, h5, [class*="value"], [class*="number"]) { font-size: 1.1rem !important; }
}