/* ============================================================
   إصلاحات الموبايل الكاملة
   ============================================================ */

/* ─── متغيرات ─── */
:root {
    --sidebar-w: 260px;
    --topbar-h: 60px;
}

/* ─── إخفاء الشريط الجانبي افتراضياً على الموبايل ─── */
@media (max-width: 768px) {

    /* الشريط الجانبي مخفي خارج الشاشة */
    .sidebar {
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1050 !important;
        position: fixed !important;
    }

    /* عند فتحه */
    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* المحتوى يأخذ كل العرض */
    .main-content {
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* إظهار زر القائمة */
    .btn-toggle-sidebar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
        font-size: 20px;
    }

    /* خلفية شفافة عند فتح الشريط */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* ─── Topbar ─── */
    .topbar {
        padding: 0 12px !important;
    }

    .topbar-breadcrumb {
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }

    /* ─── محتوى الصفحة ─── */
    .page-content {
        padding: 12px !important;
    }

    /* ─── رأس الصفحة ─── */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .page-title {
        font-size: 18px !important;
    }

    /* ─── بطاقات الإحصائيات ─── */
    .stat-card {
        padding: 14px !important;
    }

    .stat-value {
        font-size: 22px !important;
    }

    .stat-icon {
        font-size: 24px !important;
    }

    /* ─── الجداول ─── */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: none !important;
    }

    .table {
        min-width: 500px;
        font-size: 13px !important;
    }

    .table th, .table td {
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    /* ─── البطاقات ─── */
    .card {
        margin-bottom: 12px !important;
    }

    .card-header {
        padding: 12px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    /* ─── النماذج ─── */
    .form-control, .form-select {
        font-size: 16px !important; /* يمنع zoom على iOS */
    }

    /* ─── الأزرار ─── */
    .btn {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    .btn-lg {
        font-size: 15px !important;
        padding: 10px 16px !important;
    }

    /* ─── صفحة تسجيل الدخول ─── */
    .login-wrapper {
        padding: 16px !important;
        align-items: flex-start !important;
        padding-top: 40px !important;
    }

    .login-card {
        max-width: 100% !important;
    }

    .login-body {
        padding: 20px 16px !important;
    }

    /* ─── Pagination ─── */
    .pagination {
        flex-wrap: wrap;
        gap: 2px;
    }

    .page-link {
        padding: 4px 10px !important;
        font-size: 13px !important;
    }

    /* ─── Modal ─── */
    .modal-dialog-custom {
        width: 95% !important;
        max-width: 95% !important;
    }

    .modal-lg-custom {
        max-width: 95% !important;
    }

    /* ─── لوحة التحكم ─── */
    .progress-circle {
        width: 110px !important;
        height: 110px !important;
    }

    .circle-label {
        font-size: 22px !important;
    }

    /* ─── معلومات القطعة ─── */
    .info-card {
        padding: 12px !important;
    }

    .info-value {
        font-size: 16px !important;
    }

    /* ─── صفحة البحث ─── */
    .search-welcome {
        padding: 30px 12px !important;
    }

    .search-hint {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* ─── تبويبات ─── */
    .nav-tabs .nav-link {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    /* ─── صفحة الصلاحيات ─── */
    .list-group-item {
        padding: 10px 12px !important;
    }
}

/* ─── شاشات صغيرة جداً ─── */
@media (max-width: 380px) {
    .stat-value { font-size: 18px !important; }
    .page-title { font-size: 16px !important; }
    .table { font-size: 12px !important; }
}