/* ========================================
   Responsive Design - سكاي آيكون
   تكيّف تلقائي مع أي حجم شاشة
   ======================================== */

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

/* ========================================
   شاشات متوسطة/أجهزة لوحية (Tablet) 992px
   ======================================== */
@media (max-width: 1200px) {
    .sidebar {
        width: 230px;
    }
    .main-content {
        margin-right: 230px;
    }
    .content {
        padding: 20px;
    }
    .card {
        padding: 20px;
    }
}

/* ========================================
   شاشات صغيرة/أجهزة لوحية عمودية 768px
   ======================================== */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(100%);
        width: 260px;
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .main-content {
        margin-right: 0;
    }
    .menu-toggle {
        display: block;
    }
    .content {
        padding: 16px;
    }
    .card {
        padding: 16px;
    }
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .header-title h1 {
        font-size: 20px;
    }
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
    /* الشبكات المضمّنة 2 عمود -> عمود واحد */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: 1fr !important;
    }
    /* الحقول الثابتة العرض تملأ الشاشة */
    [style*="width: 180px"],
    [style*="width: 200px"],
    [style*="width: 160px"],
    [style*="width: 190px"],
    [style*="width:150px"],
    [style*="width:180px"],
    [style*="width:200px"] {
        width: 100% !important;
    }
    /* عناصر flex ذات min-width تتمدد */
    [style*="min-width: 260px"],
    [style*="min-width: 220px"],
    [style*="min-width: 240px"] {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    .modal-content {
        width: 96% !important;
        max-width: 96% !important;
        margin: 0 auto;
    }
    /* الجداول: تصغير الحشو والخط */
    .table th,
    .table td {
        padding: 10px;
        font-size: 13px;
    }
    .table-responsive {
        margin-top: 12px;
    }
    .btn-open-window {
        display: none;
    }
}

/* ========================================
   هواتف كبيرة (Landscape/Phablet) 576px
   ======================================== */
@media (max-width: 768px) {
    .content {
        padding: 12px;
    }
    .card {
        padding: 14px;
    }
    .header {
        padding: 12px 12px;
    }
    .header-actions {
        gap: 8px;
    }
    .btn-icon {
        width: 40px;
        height: 40px;
    }
    .header-title h1 {
        font-size: 17px;
    }
    .logo-container {
        padding: 20px 15px;
    }
    .logo-icon {
        width: 55px;
        height: 55px;
    }
    .logo-text {
        font-size: 20px;
    }
    .nav-item {
        padding: 13px 18px;
    }
    .nav-item span {
        font-size: 15px;
    }
    .card-title {
        font-size: 17px;
    }
    .modal-content {
        width: 98% !important;
        max-width: 98% !important;
        padding: 20px;
    }
    .modal-header {
        padding: 14px 16px;
    }
    .table th,
    .table td {
        padding: 8px 6px;
        font-size: 12px;
    }
    .form-row {
        grid-template-columns: 1fr !important;
    }
    .action-btns {
        flex-wrap: wrap;
    }
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* أزرار الحفظ/الإلغاء تملأ العرض في النوافذ */
    .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* ========================================
   هواتف صغيرة 400px
   ======================================== */
@media (max-width: 576px) {
    .content {
        padding: 10px;
    }
    .card {
        padding: 12px;
    }
    .header {
        padding: 10px 10px;
    }
    .header-title h1 {
        font-size: 15px;
    }
    .header-actions .btn-icon {
        width: 36px;
        height: 36px;
    }
    .logo-text {
        font-size: 18px;
    }
    .sidebar {
        width: 240px;
    }
    .table th,
    .table td {
        padding: 7px 5px;
        font-size: 11px;
    }
    .card-title {
        font-size: 15px;
    }
    .content h2,
    .content h3 {
        font-size: 17px;
    }
    /* العناصر المضمّنة بعرض ثابت صغير */
    [style*="width: 140px"],
    [style*="width: 120px"],
    [style*="width:100px"],
    [style*="width:120px"] {
        width: 100% !important;
    }
}

/* ========================================
   تجاوزات إضافية للأنماط المضمّنة الشائعة
   (flex bars / info-rows / جداول العملة)
   ======================================== */
@media (max-width: 992px) {
    /* أشرطة التصفية المتعددة الحقول تتمدد */
    [style*="display: flex; justify-content: space-between"],
    [style*="display:flex;justify-content:space-between"] {
        flex-wrap: wrap;
        gap: 10px;
    }
    /* صناديق المعلومات في الطباعة وكشوفات الحساب */
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .info-box {
        width: 100% !important;
    }
    /* جداول متعددة الأعمدة تلتف داخلياً */
    .table {
        min-width: 0 !important;
    }
}