:root {
    /* -------- Card 1 (Light) -------- */
    --card1-bg: #c8f7d1;
    --card1-h3: #10632a;
    --card1-p: #1e7b3a;
    --card1-icon: #0b4f21;
    /* -------- Card 2 (Light) -------- */
    --card2-bg: #fff1b8;
    --card2-h3: #a37b00;
    --card2-p: #d19c2c;
    --card2-icon: #8a6200;
    /* -------- Card 3 (Light) -------- */
    --card3-bg: #ff99b3;
    --card3-h3: #8b004b;
    --card3-p: #b33063;
    --card3-icon: #7a003f;
    /* -------- Card 4 (Light) -------- */
    --card4-bg: #66f0f7;
    --card4-h3: #004d52;
    --card4-p: #009aa4;
    --card4-icon: #003d41;
    /*StatCard*/
    --statcard-bg: #a6f7f5; /* Default: Light */
    --statcard-h3: #1d4b59;
    --statcard-p: #15545a;
    --statcard-icon: #1d4b59;
}

.dark {
    /* -------- Card 1 (Dark) -------- */
    --card1-bg: #1a5d39;
    --card1-h3: #c5ffd5;
    --card1-p: #9df1b8;
    --card1-icon: #81e6a0;
    /* -------- Card 2 (Dark) -------- */
    --card2-bg: #5c5000;
    --card2-h3: #fff7a5;
    --card2-p: #f7e589;
    --card2-icon: #ffe870;
    /* -------- Card 3 (Dark) -------- */
    --card3-bg: #5a2140;
    --card3-h3: #ffc4dc;
    --card3-p: #f799bf;
    --card3-icon: #ff8fc0;
    /* -------- Card 4 (Dark) -------- */
    --card4-bg: #11555d;
    --card4-h3: #aefbff;
    --card4-p: #64e6ef;
    --card4-icon: #32cfd6;
    /*StatCard*/
    --statcard-bg: #1d4b59;
    --statcard-h3: #ffffff;
    --statcard-p: #b3e0f2;
    --statcard-icon: #c0e6f5;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ============================================
    PAGE SECTION STYLING (General)
=============================================== */

.page-section {
    width: 95%;
    max-width: 1200px;
    margin: auto;
    font-family: Arial, sans-serif;
}

    /* ===== Header ===== */
    .page-section .bp-header {
        text-align: center;
        margin-bottom: 35px;
    }

        .page-section .bp-header h1 {
            font-size: 30px;
            font-weight: 700;
            background: linear-gradient(90deg, var(--color-accent), #00D4FF, var(--color-accent));
            background-size: 300% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: moveGradient 10s linear infinite;
        }

        .page-section .bp-header p {
            color: var(--color-text-muted);
            margin-top: 5px;
            font-size: 14px;
        }

    .page-section .bp-back-btn {
        display: inline-flex;
        align-items: center;
        margin-top: 15px;
        padding: 8px 15px;
        background: var(--color-bg-content);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        color: var(--color-accent);
        font-weight: 600;
        gap: 7px;
        transition: .3s;
        text-decoration: none;
    }

        .page-section .bp-back-btn:hover {
            background: var(--color-hover-accent);
            transform: scale(1.03);
        }

    /* ===== Layout Grid ===== */
    .page-section .bp-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 20px;
    }



    /* ===== Base Stat Card Style ===== */
    .page-section .bp-stat-card {
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        cursor: pointer;
    }

        /* Hover animation */
        .page-section .bp-stat-card:hover {
            transform: scale(1.05) translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
            animation: bounceHover 0.5s ease forwards;
        }

        /* Icons */
        .page-section .bp-stat-card i {
            font-size: 40px;
            opacity: 0.95;
            transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
        }

        .page-section .bp-stat-card:hover i {
            transform: scale(1.1);
            opacity: 1;
        }

/* Bounce animation */
@keyframes bounceHover {
    0% {
        transform: scale(1.05) translateY(-5px);
    }

    50% {
        transform: scale(1.06) translateY(-7px);
    }

    100% {
        transform: scale(1.05) translateY(-5px);
    }
}


.bp-stats-row .bp-stat-card:nth-child(1) {
    background: var(--card1-bg);
}

    .bp-stats-row .bp-stat-card:nth-child(1) h3 {
        color: var(--card1-h3);
    }

    .bp-stats-row .bp-stat-card:nth-child(1) p {
        color: var(--card1-p);
    }

    .bp-stats-row .bp-stat-card:nth-child(1) i {
        color: var(--card1-icon);
    }

/* Card 2 */
.bp-stats-row .bp-stat-card:nth-child(2) {
    background: var(--card2-bg);
}

    .bp-stats-row .bp-stat-card:nth-child(2) h3 {
        color: var(--card2-h3);
    }

    .bp-stats-row .bp-stat-card:nth-child(2) p {
        color: var(--card2-p);
    }

    .bp-stats-row .bp-stat-card:nth-child(2) i {
        color: var(--card2-icon);
    }

/* Card 3 */
.bp-stats-row .bp-stat-card:nth-child(3) {
    background: var(--card3-bg);
}

    .bp-stats-row .bp-stat-card:nth-child(3) h3 {
        color: var(--card3-h3);
    }

    .bp-stats-row .bp-stat-card:nth-child(3) p {
        color: var(--card3-p);
    }

    .bp-stats-row .bp-stat-card:nth-child(3) i {
        color: var(--card3-icon);
    }

/* Card 4 */
.bp-stats-row .bp-stat-card:nth-child(4) {
    background: var(--card4-bg);
}

    .bp-stats-row .bp-stat-card:nth-child(4) h3 {
        color: var(--card4-h3);
    }

    .bp-stats-row .bp-stat-card:nth-child(4) p {
        color: var(--card4-p);
    }

    .bp-stats-row .bp-stat-card:nth-child(4) i {
        color: var(--card4-icon);
    }

.bp-stats-row .bp-stat-card:nth-child(1):hover {
    background: #b0f8d8;
}

.bp-stats-row .bp-stat-card:nth-child(2):hover {
    background: #fff6a0;
}

.bp-stats-row .bp-stat-card:nth-child(3):hover {
    background: #ff8cb0;
}

.bp-stats-row .bp-stat-card:nth-child(4):hover {
    background: #5ce0f5;
}

.bp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.bp-stat-card small {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: var(--statcard-p);
}

.bp-stat-card span.badge {
    font-size: 12px;
    margin-right: 4px;
}



@media (max-width: 992px) {
    .bp-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .bp-stats-row {
        grid-template-columns: 1fr;
    }
}





/* ===== Stat Card ===== */ .page-section .bp-stat-card {
    background: var(--statcard-bg);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
}

    .page-section .bp-stat-card:hover {
        transform: scale(1.05) translateY(-5px); /* Slight lift + scale */
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        background: var(--statcard-bg); /* subtle highlight */
    }
    /* Icon slightly scales and changes color */

    .page-section .bp-stat-card i {
        font-size: 40px;
        color: var(--statcard-icon);
        opacity: 0.95;
        transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    }

    .page-section .bp-stat-card:hover i {
        transform: scale(1.1); /* Slight scale */
        color: #1fa9a6; /* Harmonized color */
        opacity: 1;
    }
/* Gentle bounce animation for the card itself */

@keyframes bounceHover {
    0% {
        transform: scale(1.05) translateY(-5px);
    }

    50% {
        transform: scale(1.06) translateY(-7px);
    }

    100% {
        transform: scale(1.05) translateY(-5px);
    }
}

.page-section .bp-stat-card:hover {
    animation: bounceHover 0.5s ease forwards;
}






/* ===== Search Card ===== */
.page-section .bp-search-card {
    width: 100%;
    margin-bottom: 20px;
    background: var(--color-bg-body);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.page-section .bp-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-section .bp-search-group {
    flex: 1 1 250px; /* ياخد كل المساحة لو صغير */
    display: flex;
    align-items: center;
    background: var(--color-bg-container);
    padding: 10px 12px;
    border-radius: 12px;
    gap: 8px;
}

    .page-section .bp-search-group i {
        color: var(--color-text-muted);
    }

    .page-section .bp-search-group input {
        border: none;
        outline: none;
        background: transparent;
        flex: 1;
        font-size: 14px;
        color: var(--color-text-main);
    }

        .page-section .bp-search-group input::placeholder {
            color: var(--color-text-muted);
        }

.page-section button {
    padding: 10px 20px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: .3s;
}

    .page-section button:hover {
        background: #5349e8;
    }
/* Fix placeholder in dark */
.dark .bp-search-group input::placeholder {
    color: var(--color-text-muted);
}

/* ===== Stats Grid ===== */
.bp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Responsive */
@media (max-width: 992px) {
    .bp-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .bp-stats-row {
        grid-template-columns: 1fr;
    }
}




/* ==============================
   Filters Styling
============================== */
.filters-container {
    width: 100%;
    margin: 20px 0;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 أعمدة */
    gap: 20px;
}

/* Responsive */
@media (max-width: 992px) {
    .filter-row {
        grid-template-columns: repeat(2, 1fr); /* 2 في الصف */
    }
}

@media (max-width: 576px) {
    .filter-row {
        grid-template-columns: 1fr; /* عمود واحد */
    }
}

/* Individual filter item */
.filter-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

    /* Label styling */
    .filter-item label {
        margin-bottom: 6px;
        font-weight: 500;
        color: var(--color-text-main);
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
    }

    /* Select styling */
    .filter-item select.form-select {
        width: 100%;
        border-radius: 15px;
        padding: 12px 16px;
        border: 1px solid #ddd;
        background: var(--color-bg-body);
        color: var(--color-text-main);
        font-size: 15px;
        transition: all 0.3s ease;
        appearance: none;
    }

    /* Arrow for select */
    .filter-item select.form-select {
        background-image: url("data:image/svg+xml;utf8,<svg fill='%23aaa' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
    }

        /* Focus state */
        .filter-item select.form-select:focus {
            border-color: var(--color-accent);
            box-shadow: 0 0 8px var(--color-hover-accent);
            outline: none;
            background: var(--color-bg-body);
            color: var(--color-text-main);
        }

    /* Options */
    .filter-item select option {
        background: var(--color-bg-body);
        color: var(--color-text-main);
    }

        .filter-item select option:hover,
        .filter-item select option:focus {
            background: var(--color-accent);
            color: var(--color-active-accent);
        }

.quick-action-btn,
button.quick-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    gap: 0.5rem;
    min-width: 180px;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    background-color: var(--bg); /* ياخد لون الخلفية العام */
    cursor: pointer;
    font: inherit; /* يطابق الخط */
    border-style: solid; /* نضمن انه solid */
}

button.quick-action-btn {
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* الباقي */
    border: 2px solid currentColor !important; /* اللون نفس النص */
    background-color: var(--bg) !important;
    color: inherit !important;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 180px;
    font: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* تبقي باقي الكلاسات زي ما هي */


/* أيقونات جوه الزرار */
.quick-action-btn i {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

/* Hover effect */
.quick-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    background-color: var(--hover-bg); /* لون الخلفية عند hover */
}
/* الألوان والحدود حسب card */
.card1 {
    color: var(--card1-h3);
    border: 2px solid var(--card1-bg); /* البوردر يعتمد على الخلفية */
}

    .card1 span,
    .card1 i {
        color: var(--card1-h3);
    }

.card2 {
    color: var(--card2-h3);
    border: 2px solid var(--card2-bg);
}

    .card2 span,
    .card2 i {
        color: var(--card2-h3);
    }

.card3 {
    color: var(--card3-h3);
    border: 2px solid var(--card3-bg);
}

    .card3 span,
    .card3 i {
        color: var(--card3-h3);
    }

.card4 {
    color: var(--card4-h3);
    border: 2px solid var(--card4-bg);
}

    .card4 span,
    .card4 i {
        color: var(--card4-h3);
    }



/* ===== Filter Select Fix ===== */
.bp-filter-select {
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    background: var(--color-bg-container);
    color: var(--color-text-main);
    font-size: 14px;
    transition: .3s;
}

    .bp-filter-select:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 8px var(--color-hover-accent);
    }

/* ===== Apply Button Fix ===== */
.bp-btn-filter {
    background: var(--color-accent);
    border-radius: 12px;
    padding: 10px 12px;
    border: none;
    transition: .3s;
}

    .bp-btn-filter:hover {
        background: #5349e8;
    }