/* ================= 📱 Responsive & Mobile (RTL) =================
   يُحمَّل بعد style.css — يتعامل مع: تخطيط الهيكل، السايدبار، الجداول،
   النوافذ، وأحجام اللمس على كل المقاسات.
   ملاحظة: RTL — السايدبار على اليمين، فيُخفى خارج الشاشة يميناً (translateX +100%).
*/

/* ---------- قاعدة عامة لمنع الانزلاق الأفقي ---------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* النوافذ المنبثقة لا تتجاوز عرض الشاشة أبداً (حماية من أي سيناريو/كاش قديم) */
.modal-box { max-width: 94vw !important; }

/* زر الهامبرغر العائم (يُحقن عبر js/responsive.js) — يظهر موبايل فقط */
#btn-mobile-open { display: none; }

/* شريط علوي ثابت على الموبايل */
#mobile-topbar { display: none; }

/* شريط الأدوات داخل السايد بار (موبايل فقط) — بديل الهيدر */
.mobile-sidebar-tools { display: none; }
.mobile-sidebar-tools #mb-notif-panel.show { display: block !important; }

/* خلفية معتمة خلف السايدبار عند فتحه موبايل */
@media (max-width: 991.98px) {
    #app-screen { flex-direction: column; }
}

/* ================= 🖥️ ≤ 991px (Tablet & Mobile): الهيدر يُخفى والأدوات داخل السايدبار ================= */
@media (max-width: 991.98px) {

    /* الهيدر يُشال كلياً من الموبايل والمحتوى يتمدد */
    #main-header { display: none !important; }

    /* الشريط العلوي الثابت */
    #mobile-topbar { display: flex !important; }

    /* زر الهامبرغر العائم */
    #btn-mobile-open { display: none !important; }

    /* شريط الأدوات (جرس + داركمود + لغة) داخل السايد بار */
    .mobile-sidebar-tools { display: flex !important; }

    /* السايدبار = درج جانبي */
    #main-sidebar {
        transform: translateX(100%);          /* في وضع الإخفاء (يمين الشاشة خارجها) */
        transition: transform 0.28s ease;
        box-shadow: -8px 0 24px rgba(15, 23, 42, 0.16);
        right: 0;
        left: auto;
        width: 84vw;
        max-width: 310px;
        padding: 14px 10px;
    }
    body.mobile-sidebar-open #main-sidebar { transform: translateX(0); }

    /* خلفية معتمة تغطي المحتوى عند الفتح */
    body.mobile-sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(2px);
        z-index: 990;
    }

    /* المحتوى يمتد بالكامل */
    .main-content {
        margin-right: 0 !important;
        width: 100% !important;
        padding: 14px 14px 40px !important;
        min-height: 92vh;
    }

    /* كروت عدة جنب بعض تترص تلقائياً */
    #app-screen .row, #app-screen .d-flex.flex-nowrap { flex-wrap: wrap; }

    /* لوحة البيع بدون الهيدر تأخذ كامل الارتفاع */
    #pos-tab .row { height: calc(100vh - 70px) !important; }

    /* لوحات التحكم (السوبر ادمين) */
    .container-fluid.px-4.px-lg-5 { padding-right: 12px !important; padding-left: 12px !important; }
    .container-fluid .card-header { flex-wrap: wrap; gap: 8px; }
    .container-fluid .card-header button, .container-fluid .card-header .btn { min-height: 40px; }

    /* أحجام أزرار مريحة للمس */
    .btn { min-height: 40px; }
    .dropdown-menu { max-width: 94vw; }

    /* 🔧 إصلاح تجاوز العرض الأفقي: منع عناصر flex من التمدد خارج الشاشة */
    #app-screen { overflow-x: clip; }
    .main-content {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: clip;
    }
    #main-header { flex-wrap: wrap; row-gap: 8px; }
    .user-info-btn { white-space: normal; }

    /* لوحة البيع: كبح تمدد عناصر flex خارج الشاشة (المصدر: min-content للجدول/المدخلات) */
    #pos-tab .row > [class*="col-"] { min-width: 0 !important; }
    #pos-tab .cart-container {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .cart-container .input-group { flex-wrap: nowrap !important; min-width: 0 !important; }
    .cart-container .input-group .form-control { min-width: 0 !important; width: auto !important; flex: 1 1 auto; }
    .cart-container .input-group .btn { flex-shrink: 0; }
    .cart-container .table-wrapper { max-width: 100% !important; min-width: 0 !important; }
    #pos-tab .cart-container table { min-width: 0 !important; white-space: normal !important; }
}

/* ================= 📱 ≤ 767px (الهواتف) ================= */
@media (max-width: 767.98px) {

    .main-content { padding: 10px 9px 46px !important; }

    /* جداول البيانات تتصفح يميناً/يساراً داخل عرض الشاشة */
    #app-screen table:not(.receipt-table):not(.print-table),
    .modal-box table:not(.receipt-table):not(.print-table),
    .main-content table:not(.receipt-table):not(.print-table) {
        display: block;
        max-width: 100%;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    #app-screen .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* الفلاتر وأشرطة الأدوات تلفّ بدل ما تفيض */
    #app-screen .d-flex:not(.payment-row):not(.justify-content-between) { flex-wrap: wrap; }
    #app-screen .btn-group { flex-wrap: wrap; }
    #app-screen input.form-control, #app-screen select.form-select,
    #app-screen textarea.form-control { font-size: 16px; } /* منع تكبير iOS */

    .card { margin-bottom: 12px; }
    h1, h2, h3 { font-size: 1.08rem !important; }

    .modal-box {
        max-width: 96%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 16px;
    }
    .modal-box .modal-header, .modal-box .modal-body { padding: 12px; }

    .login-card { padding: 1.6rem; }

    /* جدول السلة: الأعمدة الستة كلها ظاهرة داخل شاشة الجوال (بدون قصّ) */
    #pos-tab .cart-container table { table-layout: fixed; width: 100% !important; font-size: 0.78rem; }
    #pos-tab .cart-container table th,
    #pos-tab .cart-container table td { padding: 6px 3px !important; overflow-wrap: break-word; word-break: break-word; }
    #pos-tab .cart-container table thead th { font-size: 0.68rem; }
    #pos-tab .cart-container table input,
    #pos-tab .cart-container table select {
        min-width: 0 !important;
        width: 100% !important;
        font-size: inherit;
        padding: 2px 4px;
        height: auto;
    }
    #pos-tab .cart-container .btn-sm { min-height: 30px; padding: 2px 6px; font-size: 0.72rem; }
}

/* ================= 📱 ≤ 575px (شاشات صغيرة) ================= */
@media (max-width: 575.98px) {

    .main-content { padding: 8px 6px 52px !important; }
    .btn { min-height: 44px; font-size: 0.95rem; }
    .btn-sm { min-height: 36px; }

    .modal-box { max-width: 100%; margin: 0 6px; max-height: 94vh; border-radius: 10px; }
    #app-screen table th, #app-screen table td { padding: 8px 10px; font-size: 0.82rem; }

    /* شاشة الدخول */
    #login-screen { padding: 10px; }
    .login-card { padding: 1.3rem; box-shadow: none; }

    /* السوبر ادمين: الكروت تتكوم والأزرار تتوسع */
    .container-fluid.px-4.px-lg-5 .col-md-3, .container-fluid.px-4.px-lg-5 .col-md-4, .container-fluid.px-4.px-lg-5 .col-md-5 {
        padding-right: 0 !important; padding-left: 0 !important; border-inline-end: 0 !important;
    }
    .container-fluid .table-responsive { max-width: 100%; }
    #tenantsTable th, #tenantsTable td, .table-clean th, .table-clean td { padding: 8px !important; }

    /* صفحة الموبايل (mobile.html) */
    .top-nav { padding: 8px 10px !important; }
    #variants-panel { bottom: 64px; left: 8px; right: 8px; padding: 10px !important; }
    #reader, #reader-search { min-height: 220px; }
}

/* ================= 🖨️ الطباعة (إبقاء الفواتير سليمة ولو بالموبايل) ================= */
@media print {
    #btn-mobile-open, #mobile-topbar, body.mobile-sidebar-open::before { display: none !important; }
    #main-header { display: none !important; }
    #app-screen table, table.receipt-table, table.print-table {
        display: table !important;
        width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
    }
}

/* ================= 💬 المحادثة شاشة كاملة (المستشار الذكي) ================= */
#ai-chat-panel.ai-chat-fullscreen {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    z-index: 1300 !important;
}
.ai-chat-actions { display: flex; align-items: center; gap: 8px; }

/* 🎙️ زر الإدخال الصوتي في شريط الكتابة */
#ai-chat-mic { width: 40px; height: 42px; border: none; background: transparent; color: #9aa0a8; font-size: 15px; cursor: pointer; flex-shrink: 0; border-radius: 10px; position: relative; display: inline-flex; align-items: center; justify-content: center; }
#ai-chat-mic:hover { background: #f1f2f4; color: #6f42c1; }
#ai-chat-mic.ai-mic-on { background: #6f42c1; color: #fff; }
.ai-mic-pulse { position: absolute; inset: -2px; border-radius: 10px; border: 2px solid rgba(111,66,193,.6); animation: aiMicPulse 1.1s infinite; pointer-events: none; }
@keyframes aiMicPulse { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.35);opacity:0} }

/* ================= 🤖 كروت إجراءات الذكاء الاصطناعي (مقترحات التنفيذ) ================= */
.ai-action-card {
    border: 1px solid #d9cdea;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    margin: 6px 0;
    box-shadow: 0 2px 8px rgba(111,66,193,.08);
}
.ai-action-card .ai-action-title { font-weight: 700; color: #6f42c1; font-size: .82rem; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ai-action-card .ai-action-rows { font-size: .82rem; color: #334155; }
.ai-action-card .ai-action-rows div { padding: 3px 0; border-bottom: 1px dashed #eee; }
.ai-action-btns { display: flex; gap: 8px; margin-top: 10px; }
.ai-action-btns .btn { font-size: .78rem; padding: 5px 14px; }

/* ================= 📱 الاستخدام الموبايل فقط ================= */
@media (max-width: 480px) {
    .sidebar-user-zone { padding: 10px 6px !important; }
    #main-sidebar a { padding: 11px 12px; font-size: 0.92rem; }
}

/* زيادة حشوة أعلى المحتوى على الموبايل بدل الزر العائم */
@media (max-width: 991.98px) {
    .main-content { padding-top: 8px; }
}

/* ================= 🖥️ صفحة الإدارة العليا (super_admin) للموبايل ================= */
@media (max-width: 767.98px) {
    .header-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        padding: 12px 16px !important;
        margin-bottom: 16px !important;
    }
    .header-bar .d-flex.gap-2 {
        flex-wrap: wrap;
    }
    .header-bar .d-flex.gap-2 .btn {
        flex: 1 1 100%;
    }

    .search-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .container-fluid.px-4.px-lg-5 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    .table-clean th,
    .table-clean td {
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }
    .table-clean {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-clean thead th {
        font-size: 0.75rem !important;
    }

    .d-flex.justify-content-between.mb-3 {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* منع أي عنصر من تمديد الصفحة أفقياً على شاشات الإنترنت الضيقة */
@media (max-width: 575.98px) {
    body,
    #main-container,
    .header-bar {
        max-width: 100%;
        overflow-x: hidden;
    }
    #main-container .row,
    #main-container [class*='col-'] {
        min-width: 0;
    }
}

/* ================= 🕘 سجل الدردشة — صف قابل للنقر + حذف خفيف ================= */
.ai-history-row:hover { background-color: #f7f7fb; }
.ai-history-row:active { background-color: #efeafc; }
.ai-history-del {
    background: none;
    border: none;
    color: #c0c4cc;
    font-size: .95rem;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    opacity: .6;
    transition: .15s;
}
.ai-history-del:hover { color: #e35d6a; background: #fdeef0; opacity: 1; }

/* ================= 🧭 السايد بار: سجل الدردشة تحت المستشار الذكي ================= */
#nav-ai-copilot .ai-nav-arrow {
    float: left;
    margin-top: 4px;
    font-size: .72rem;
    opacity: .8;
    transition: transform .2s;
}
#nav-ai-sub a {
    padding-right: 16px;
    font-size: .88rem;
}