/* =============================
   تنسيق عصري وجميل لقسم الاستيراد فقط
   ============================= */
.import-box {
    background: #ffffff;
    border: 1px solid rgba(80, 60, 160, 0.08);
    border-radius: 16px;
    padding: 22px 26px;
    margin-top: 18px;
    box-shadow: 0 6px 22px rgba(35, 31, 95, 0.05);
    transition: all 0.3s ease;
}

    .import-box:hover {
        box-shadow: 0 8px 28px rgba(35, 31, 95, 0.08);
    }

    /* العنوان */
    .import-box h4 {
        font-family: "Cairo", "Segoe UI", sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #4b2b8d;
        margin-bottom: 16px;
        border-bottom: 1px solid rgba(75, 43, 141, 0.12);
        padding-bottom: 6px;
    }

    /* ملف Excel */
    .import-box input[type="file"] {
        font-size: 14px;
        background: #faf7ff;
        border: 1px dashed rgba(75, 43, 141, 0.2);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .import-box input[type="file"]:hover {
            background: #f3ecff;
            border-color: #6b4fe0;
        }

    /* الأزرار داخل import-box فقط */
    .import-box .btn,
    .import-box input[type="submit"],
    .import-box input[type="button"] {
        display: inline-block;
        font-family: "Cairo", "Segoe UI", sans-serif;
        font-size: 14px;
        font-weight: 600;
        margin: 6px 6px 6px 0;
        padding: 8px 16px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    /* بنفسجي رئيسي */
    .import-box input[id*="btnParse"],
    .import-box input[id*="btnShow"],
    .import-box input[id*="btnDownload"],
    .import-box input[id*="btnExportErrors"] {
        background: linear-gradient(180deg, #6b4fe0, #3e2aa0);
        color: #fff;
    }

        .import-box input[id*="btnParse"]:hover,
        .import-box input[id*="btnShow"]:hover,
        .import-box input[id*="btnDownload"]:hover,
        .import-box input[id*="btnExportErrors"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(62, 42, 160, 0.2);
        }

    /* أخضر (حفظ الطلبية / تأكيد الحفظ) */
    .import-box input[id*="btnCommit"],
    .import-box input[id*="btnConfirm"],
    .import-box input[id*="btnSuccess"] {
        background: linear-gradient(180deg, #3fb16a, #1f7f47);
        color: #fff;
    }

        .import-box input[id*="btnCommit"]:hover,
        .import-box input[id*="btnConfirm"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(31, 127, 71, 0.2);
        }

    /* أصفر (دمج المكرر) */
    .import-box input[id*="btnRemoveDuplicates"] {
        background: linear-gradient(180deg, #f5c542, #f2b400);
        color: #2d2d2d;
    }

        .import-box input[id*="btnRemoveDuplicates"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(242, 180, 4, 0.25);
        }

    /* أحمر (حذف الأخطاء) */
    .import-box input[id*="btnRemoveErrors"],
    .import-box input[id*="btnZeroNegativeQty"] {
        background: linear-gradient(180deg, #ef5360, #d32f3a);
        color: #fff;
    }

        .import-box input[id*="btnRemoveErrors"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(217, 60, 60, 0.25);
        }

    /* رمادي (تصدير الجاهز فقط أو تحميل القالب) */
    .import-box input[id*="btnExportReadyOnly"],
    .import-box input[id*="btnTemplate"] {
        background: linear-gradient(180deg, #5e6267, #3c4043);
        color: #fff;
    }

        .import-box input[id*="btnExportReadyOnly"]:hover,
        .import-box input[id*="btnTemplate"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
        }

    /* =========================
   تحديث عصري لجدول gvStaging (يحترم ألوان الصف القادمة من RowDataBound)
   ========================= */

    /* صندوق الجدول ومظهره العام */
    .import-box table[id$="gvStaging"] {
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0;
        font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
        border-radius: 12px;
        overflow: hidden;
        background: transparent; /* الصفوف ملونة من السيرفر، نسيب الخلفية شفافة */
        box-shadow: 0 8px 30px rgba(35,31,95,0.04);
        border: 1px solid rgba(75,43,141,0.06);
    }

        /* رأس الجدول */
        .import-box table[id$="gvStaging"] thead th,
        .import-box table[id$="gvStaging"] th {
            padding: 12px 14px;
            font-weight: 800;
            font-size: 13px;
            color: #4b2b8d;
            text-align: center;
            background: linear-gradient(180deg, rgba(92,62,171,0.06), rgba(120,92,194,0.02));
            border-bottom: 1px solid rgba(75,43,141,0.06);
        }

        /* خلايا */
        .import-box table[id$="gvStaging"] td {
            padding: 10px 12px;
            vertical-align: middle;
            font-size: 13px;
            color: #333;
            border-right: 1px solid rgba(75,43,141,0.02);
            /* لا نغيّر الخلفية - نترك RowDataBound يضعها */
        }

            /* أرقام الصف (عمود #) مركزة وخفيفة */
            .import-box table[id$="gvStaging"] td:nth-child(1) {
                text-align: center;
                color: #666;
                font-weight: 700;
                width: 48px;
            }

            /* حقول الإدخال داخل الجدول */
            .import-box table[id$="gvStaging"] td .tb,
            .import-box table[id$="gvStaging"] td input[type="text"],
            .import-box table[id$="gvStaging"] td input[type="number"],
            .import-box table[id$="gvStaging"] td .form-control {
                width: 100%;
                padding: 8px 10px;
                border-radius: 8px;
                border: 1px solid rgba(60,50,120,0.07);
                box-sizing: border-box;
                background: #fff;
                transition: box-shadow .12s ease, transform .06s ease;
            }

                /* تركيز على الحقول */
                .import-box table[id$="gvStaging"] td input:focus,
                .import-box table[id$="gvStaging"] td .tb:focus {
                    outline: none;
                    border-color: rgba(94,71,201,0.45);
                    box-shadow: 0 10px 26px rgba(94,71,201,0.06);
                }

            /* فصل بصري بين الأعمدة (نقاط خفيفة) */
            .import-box table[id$="gvStaging"] td + td {
                /* لا حاجة لصارم؛ الحفاظ على وضوح */
            }

        /* الصفوف Zebra خفيفة كخيار احتياطي (لا تطغى على ألوان السيرفر) */
        .import-box table[id$="gvStaging"] tbody tr:nth-child(odd) td {
            background-image: none; /* أي صور خلفية تتداخل تزال */
        }

        /* =========================
   أزرار "تحديث | حذف" داخل الجدول — فقط داخل gvStaging
   - نحافظ على النص (LinkButton) لكن نمنحه مظهر زر حديث
   ========================= */

        /* استهداف الروابط داخل عمود الأوامر (آخر عمود عادة) */
        .import-box table[id$="gvStaging"] td a,
        .import-box table[id$="gvStaging"] td input[type="button"],
        .import-box table[id$="gvStaging"] td input[type="submit"],
        .import-box table[id$="gvStaging"] td button {
            display: inline-block;
            padding: 7px 12px;
            min-width: 78px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 13px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            margin: 2px 6px 2px 0;
            transition: transform .12s ease, box-shadow .14s ease, opacity .12s ease;
            box-shadow: 0 6px 18px rgba(45,36,120,0.10);
            border: none;
            cursor: pointer;
        }

            /* لو السيرفر أعطى CssClass أو id لزرار التحديث/حذف فهنستهدفها أولاً */
            .import-box table[id$="gvStaging"] td a#btnUpdateRow,
            .import-box table[id$="gvStaging"] td input[id*="Update"],
            .import-box table[id$="gvStaging"] td a.update {
                background: linear-gradient(180deg, #6b4fe0, #3e2aa0);
            }

            /* حذف (أحمر) */
            .import-box table[id$="gvStaging"] td a#btnDeleteRow,
            .import-box table[id$="gvStaging"] td input[id*="Delete"],
            .import-box table[id$="gvStaging"] td a.delete {
                background: linear-gradient(180deg, #ef5360, #d32f3a);
            }

            /* عام: إذا لا توجد id/CssClass - نعتمد على ترتيب الروابط في الخلية:
   الأول => تحديث, الثاني => حذف (آمن إذا ترتيب ثابت كما في الـ ItemTemplate) */
            .import-box table[id$="gvStaging"] td a:nth-of-type(1) {
                background: linear-gradient(180deg, #6b4fe0, #3e2aa0);
            }

            .import-box table[id$="gvStaging"] td a:nth-of-type(2) {
                background: linear-gradient(180deg, #ef5360, #d32f3a);
            }

            /* hover & active */
            .import-box table[id$="gvStaging"] td a:hover,
            .import-box table[id$="gvStaging"] td input:hover,
            .import-box table[id$="gvStaging"] td button:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 30px rgba(45,36,120,0.15);
                opacity: 0.98;
            }

            .import-box table[id$="gvStaging"] td a:active {
                transform: translateY(-1px) scale(.997);
            }

            /* استثناءات: لو في رابط في عمود الأوامر لا تريد تطبيق الستايل عليه ضع class="no-style" */
            .import-box table[id$="gvStaging"] td a.no-style,
            .import-box table[id$="gvStaging"] td a.no-style:hover {
                background: none !important;
                color: inherit !important;
                box-shadow: none !important;
                transform: none !important;
            }

/* تحسين responsive: اجعل الأعمدة قابلة لللف على الشاشات الصغيرة */
@media (max-width: 900px) {
    .import-box table[id$="gvStaging"] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

        .import-box table[id$="gvStaging"] td .tb,
        .import-box table[id$="gvStaging"] td input[type="text"] {
            min-width: 120px;
        }
}


/* الملخص (label) */
.import-box label[id*="lblImportSummary"] {
    font-size: 14px;
    color: #4b2b8d;
    margin-right: 12px;
    display: inline-block;
}
/* ==========================
   Import filter (scoped, non-destructive)
   فقط يؤثر على .import-filter ولا يغيّر شيء آخر
   ========================== */

.import-filter {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap; /* يكسر السطر على الشاشات الصغيرة */
    margin-bottom: 10px;
    font-family: "Cairo", "Segoe UI", sans-serif;
}

    /* النصوص الثابتة (الـ Labels) */
    .import-filter .lbl,
    .import-filter label,
    .import-filter span {
        color: #555;
        font-weight: 600;
        font-size: 14px;
        margin: 0;
    }

    /* DropDownList */
    .import-filter select,
    .import-filter .form-control,
    .import-filter input[type="text"] {
        padding: 8px 12px;
        border-radius: 10px;
        border: 1px solid rgba(75,43,141,0.08);
        background: #fff;
        box-shadow: 0 3px 12px rgba(62,42,160,0.03);
        font-size: 14px;
        color: #333;
        transition: box-shadow .12s ease, border-color .12s ease, transform .08s ease;
    }

    /* specific width for ddl and textbox (keeps responsiveness) */
    .import-filter select {
        min-width: 150px;
        max-width: 260px;
    }

    .import-filter input[type="text"] {
        width: 160px; /* كما في الكود لديك */
        min-width: 120px;
    }

        /* focus states */
        .import-filter select:focus,
        .import-filter input[type="text"]:focus {
            outline: none;
            border-color: rgba(94,71,201,0.35);
            box-shadow: 0 10px 30px rgba(94,71,201,0.06);
        }

    /* Buttons inside filter (reuse same modern look but scoped to .import-filter) */
    .import-filter .btn,
    .import-filter input[type="submit"],
    .import-filter input[type="button"] {
        padding: 8px 14px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 14px;
        border: none;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(62,42,160,0.10);
        transition: transform .12s ease, box-shadow .14s ease, opacity .12s ease;
    }

        /* Primary small button (بحث) */
        .import-filter input[id*="btnSearch"],
        .import-filter .btn[id*="btnSearch"] {
            background: linear-gradient(180deg,#6b4fe0,#3e2aa0);
            color: #fff;
        }

            .import-filter input[id*="btnSearch"]:hover {
                transform: translateY(-2px);
            }

        /* Clear (مسح) - neutral outline */
        .import-filter input[id*="btnClearFilter"],
        .import-filter .btn[id*="btnClearFilter"] {
            background: #fff;
            color: #4b2b8d;
            border: 1px solid rgba(75,43,141,0.08);
            box-shadow: 0 4px 12px rgba(75,43,141,0.04);
        }

            .import-filter input[id*="btnClearFilter"]:hover {
                transform: translateY(-2px);
            }

    /* quick stats span inside filter (spImportStats) */
    .import-filter #spImportStats,
    .import-filter span[id*="spImportStats"] {
        color: #666;
        font-size: 13px;
        margin-left: 10px;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(98,70,200,0.04);
        border: 1px solid rgba(98,70,200,0.03);
    }

.import-panel {
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(245,243,250,0.55));
    box-shadow: 0 10px 30px rgba(18,20,48,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(120,103,195,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
    position: relative;
    overflow: hidden;
}

    /* optional subtle top glow */
    .import-panel::before {
        content: "";
        position: absolute;
        left: -30%;
        top: -40%;
        width: 160%;
        height: 120%;
        transform: rotate(15deg);
        background: radial-gradient(closest-side, rgba(122,95,220,0.06), transparent 40%);
        pointer-events: none;
    }

    /* collapsed state */
    .import-panel.collapsed {
        opacity: 0;
        transform: translateY(-6px) scale(0.995);
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
        transition: all 0.28s ease;
        margin-bottom: 0;
    }

    /* make the inner boxes keep layout (GridView etc stays same) */
    .import-panel .import-box,
    .import-panel .import-filter {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

/* ---------- زر تبديل عصري يتماشى مع بقية الأزرار ---------- */
.btn.modern-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(74,47,138,0.08);
    background: linear-gradient(180deg, #ffffff, #f3f0ff);
    box-shadow: 0 6px 18px rgba(74,47,138,0.06);
    color: #2b2160;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

    /* hover */
    .btn.modern-toggle:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(74,47,138,0.10);
    }

    /* small icon on the left using pseudo-element (no fontawesome needed) */
    .btn.modern-toggle::before {
        content: "⮟"; /* arrow symbol */
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border-radius: 5px;
        background: rgba(122,95,220,0.10);
        color: rgba(74,47,138,0.95);
        font-size: 12px;
    }

/* when panel is collapsed change icon and slight color */
.import-panel.collapsed ~ .modern-toggle::before,
.modern-toggle.collapsed::before {
    content: "⮝";
}

/* responsive tweak to keep things tidy on small screens */
@media (max-width: 720px) {
    .import-panel {
        padding: 10px;
        border-radius: 10px;
    }

    .btn.modern-toggle {
        padding: 7px 10px;
        font-size: 14px;
    }
}

/* responsive: make controls wrap neatly on small screens */
@media (max-width: 700px) {
    .import-filter {
        gap: 8px;
    }

        .import-filter select,
        .import-filter input[type="text"] {
            width: 100%;
            min-width: 140px;
        }

        .import-filter #spImportStats {
            width: 100%;
            display: inline-block;
            margin-top: 6px;
        }
}