/* 🎨 SMS Portal Custom Theme (Light + Dark) */

/* ================================
   1. تعریف متغیرها
================================ */
:root {
    --color-primary: #FF6D00; /* نارنجی */
    --color-secondary: #37474F; /* طوسی تیره / Sidebar */
    --color-accent: #FFAB40; /* نارنجی ملایم برای هاور و انتخاب */
    --color-bg: #FFFFFF; /* پس‌زمینه اصلی */
    --color-card: #F6F6F6; /* کارت‌ها و ویجت‌ها */
    --color-text-primary: #212121;
    --color-text-secondary: #757575;
    --color-border: #e2e2e2;
    /*--bs-primary-rgb: 63, 106, 216;*/
    --bs-primary: #685dd8;
    --bs-secondary: #9C27B0;
}


/* ================================ */
/* 🔹 Top Navbar / Header           */
/* ================================ */
.layout-navbar.navbar {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 6px;
    transition: all 0.3s;
    border-bottom: 1px solid #DADADA;
    /* سایه ظریف به سمت راست و پایین */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
}

/* لینک‌ها داخل Navbar */
.layout-navbar .navbar-nav .nav-link {
    color: var(--bs-primary) !important; /* متن تیره واضح */
    transition: color 0.3s ease;
}

    /* هاور روی لینک‌ها */
    .layout-navbar .navbar-nav .nav-link:hover {
        color: #ffffff !important; /* سفید لوگو */
    }

/* دکمه‌ها */
.layout-navbar .btn {
    background-color: transparent;
    color: #333333;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

    /* هاور روی دکمه‌ها */
    .layout-navbar .btn:hover {
        background-color: var(--bs-primary); /* نارنجی لوگو */
        color: #ffffff;
        /*border-color: #e89e38;*/
    }

/* Dropdown ها */
.layout-navbar .dropdown-menu {
    background-color: #ffffff; /* روشن و هماهنگ */
    color: #585757 !important;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    /* هاور روی آیتم‌های Dropdown */
    .layout-navbar .dropdown-menu .dropdown-item:hover,
    .layout-navbar .dropdown-menu .dropdown-item:hover a {
        background-color: var(--bs-primary) !important; /* نارنجی لوگو */
        color: #ffffff !important; /* متن سفید */
    }


.dropdown-item:not(.disabled).active,
.dropdown-item:not(.disabled):active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.btn-text-secondary:active, .btn-text-secondary.active, .btn-text-secondary.show.dropdown-toggle, .show > .btn-text-secondary.dropdown-toggle {
    color: #6d6b77 !important;
    background: rgb(56, 55, 55, 0.08) !important;
    border-color: rgba(0,0,0,0) !important
}

/* حذف کامل حاشیه آبی دکمه‌های ناوبار کنار پروفایل هنگام کلیلک */
.layout-navbar .btn:focus,
.layout-navbar .btn:active,
.layout-navbar .btn.show,
.layout-navbar .btn.dropdown-toggle:focus,
.layout-navbar .btn.dropdown-toggle:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}



.layout-navbar .navbar-dropdown.dropdown-shortcuts .dropdown-shortcuts-item:hover {
   background-color: #d9e1ecbf !important; /* خاکستری خیلی روشن */
    color: var(--bs-secondary) !important;
}

.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
    background-color: var(--bs-secondary) !important;
}

.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item.marked-as-read .dropdown-notifications-read span {
    background-color: #808390
}
.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item .dropdown-notifications-archive i, .layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item .dropdown-notifications-archive span {
    color: #444050
}

.bg-label-primary {
    background-color: #e9e7fd !important;
    color: var(--bs-secondary) !important;
}


/*background-color: rgb(241 236 230) !important;
*/


/* ================================ */
/* 🔹 پس‌زمینه و گرادیانت اصلی Content Area / پنل اصلی */
/* ================================ */




.content-wrapper,
.layout-content-navbar .layout-page,
.layout-page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    position: relative; /* برای اینکه ::after درست کار کنه */

    /* گرادیانت طوسی ملایم */
    /*  background: linear-gradient( 100deg, #f5f5f5 0%, #e0e0e0 50%,  #f5f5f5 100% );
    background-size: 400% 400%;*/ /* برای افکت حرکت نرم */


    /* گرادیانت روشن و آرامش‌بخش */
    background: linear-gradient( 120deg, #e9edfa 0%, #f0f8ff 50%, #e9edfa 100% );
    background-size: 400% 400%; 


  /* گرادیانت ملایم طوسی-آبی */
/*    background: linear-gradient(
        120deg,
        #f4f7fc 0%,   
        #eef1f7 50%,  
        #f4f7fc 100%
    );*/

    min-height: 100vh; /* پوشش کل ارتفاع */
    /*    padding: 1.5rem;*/
    transition: all 0.5s ease;
}

    /* سایه ملایم سمت چپ کنار Sidebar */
    .content-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 25px; /* عرض سایه */
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
        z-index: 1;
    }

    /* سایه ریز سمت راست کانتنت */
    .content-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 10px; /* عرض سایه */
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
        z-index: 1;
    }



    /* متن‌ها و هدرهای داخل Content */
    .content-wrapper,
    .content-wrapper p,
    .content-wrapper span,
    .content-wrapper h1,
    .content-wrapper h2,
    .content-wrapper h3,
    .content-wrapper h4,
    .content-wrapper h5,
    .content-wrapper h6 {
        /*color: #333333;*/ /* متن تیره و خوانا */
    }

        /* لینک‌ها داخل Content */
        /*.content-wrapper a {
            color: var(--bs-primary) !important;*/ /* نارنجی لوگو */
            /*transition: color 0.3s ease;
        }

            .content-wrapper a:hover {
                color: #7367f0;*/ /* بنفش ملایم برای هاور */
            /*}*/









/* ======================= */
/* 🔹 Sidebar (Vertical)   */
/* ======================= */
.bg-menu-theme {
    background-color: #ffffff !important; /* سفید ساده */
    color: #4c4d4c !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    /* لینک‌های عادی */
    .bg-menu-theme .menu-link {
        color: #626060 !important;
    }
        /* هاور روی آیتم‌ها */
        .bg-menu-theme .menu-link:hover {
            background-color: #d9e1ecbf !important; /* خاکستری خیلی روشن */
            /*background: rgb(51 30 187 / 6%);*/
            color: #4272d7 !important;
        }

    /* ======================= */
    /* 🔹 آیتم اصلی فعال       */
    /* ======================= */
[dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    /*background: linear-gradient(-270deg, #9e7fd2 0%, #4aa6d4 100%) !important;*/
    background: var(--bs-primary) !important; /* نارنجی برای آیتم فعال */
    color: #ffffff !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
}



    /* ======================= */
    /* 🔹 زیرمنو (Sub-menu)    */
    /* ======================= */

    /* وقتی زیرمنو باز شد */
    .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle {
        background-color: #685dd8 !important; /* نارنجی لوگو */
        color: #ffffff !important; /* رنگ متن نارنجی */
        font-weight: 500;
    }

    /* آیتم فعال داخل زیرمنو → گرادینت */
    .bg-menu-theme.menu-vertical .menu-sub .menu-item.active > .menu-link {
        background: linear-gradient(270deg, #0077b5 0%, #7367f0 100%);!important;
        color: #ffffff !important;
        border-radius: 0.375rem !important;
    }

.bg-menu-theme .menu-inner .menu-sub .menu-item:not(.active) > .menu-link::before {
    color: rgb(70 107 216) !important
}

    /* هاور روی آیتم‌های زیرمنو */
.bg-menu-theme.menu-vertical .menu-sub .menu-link:hover {
    background-color: #e9eaea !important;
    color: #111111 !important;
}

.menu-vertical .menu-item .menu-link {
    font-size: .8rem;
    min-height: 38px
}







    /* ======================= */
    /* 🔹 Sidebar Header       */
    /* ======================= */
.bg-menu-theme .app-brand.demo {
    /*         گرادیانت خطی نارنجی → بنفش مشابه زیرمنو */
    /*background: linear-gradient(160deg, #12c1d7 0%, #ab79d1 100%) !important;*/
    background: #4a3267 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    padding: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-radius: 0.375rem 0.375rem 0 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}
.app-brand.demo .app-brand-logo {
    /*width: 48px;*/ /* اندازه لوگو */
    /*height: 48px;*/
    border-radius: 50%; /* دایره‌ای شدن */
    /*object-fit: cover;*/ /* پر کردن فضا بدون کشیدگی */
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.15);*/ /* سایه ملایم برای مدرن بودن */
    /*margin-right: 0.5rem;*/ /* فاصله از متن */
}

        /* هاور روی هدر (اختیاری) */
        /*.bg-menu-theme .app-brand.demo:hover {*/
            /*background: linear-gradient(90deg, #f1b65c 0%, #8570f5 100%) !important;*/
            /*background: var(--bs-primary) !important;
        }*/


/**/





/* دقیقا فقط این دکمه رو هدف میگیره */
.layout-menu-toggle.menu-link {
    background: transparent !important; /* پس‌زمینه حذف شد */
    box-shadow: none !important; /* اگه سایه داشت، حذف شد */

}


    .layout-menu-toggle.menu-link:hover {
        background: transparent !important; /* تو هاور هم پس‌زمینه نداره */
    }



/* لوگو داخل هدر */
/*.bg-menu-theme .app-brand.demo img {
    max-height: 40px;
    margin-right: 0.5rem;
}*/


.app-brand-text.demo {
    font-size: 1.06rem;
}



/* آیکون Grid (layout) */
.layout-menu-toggle .ti-layout-grid {
    font-size: 1.6rem;
    color: #efe3ef !important;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}
    .layout-menu-toggle .ti-layout-grid:hover {
        color: #F7B9C4 !important;
        transform: scale(1.1); /* یه ذره بزرگ‌تر بشه برای جذابیت */
    }


/* آیکون منو (سه خطی) */
.layout-menu-toggle.navbar-nav .ti-menu-2 {
    color: var(--bs-primary); /* آبی */
    cursor: pointer;
    transition: color 0.3s ease;
}
    .layout-menu-toggle.navbar-nav .ti-menu-2:hover {
        color: #9318de; /* آبی تیره‌تر در هاور */
        transform: scale(1.1); /* یه ذره بزرگ‌تر بشه برای جذابیت */
    }


/*  بالا ساید بار آیکون بستن (ضربدر) */
.layout-menu-toggle.menu-link .ti-x {
    color: #efe3ef; /* قرمز */
    cursor: pointer;
    transition: color 0.3s ease;
}
    .layout-menu-toggle.menu-link .ti-x:hover {
        color: #F7B9C4; /* قرمز تیره‌تر در هاور */
        transform: scale(1.1); /* یه ذره بزرگ‌تر بشه برای جذابیت */
    }





/* ================================
   4. کارت‌ها
================================ */
.card, .widget {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 6px;
    transition: all 0.3s;
}

/* ================================
   5. دکمه‌ها
================================ */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transition: all 0.3s;
}

    .btn-primary:hover {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

    .btn-secondary:hover {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }



/* ================================
   7. فرم‌ها و ورودی‌ها
================================ */
input, textarea, select {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 4px;
    transition: all 0.3s;
}

    input::placeholder, textarea::placeholder {
        color: var(--color-text-secondary);
    }

/* ================================
   8. جدول‌ها
================================ */
.table {
    background-color: var(--color-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    transition: all 0.3s;
}

    .table th {
        background-color: var(--color-bg);
        color: var(--color-text-primary);
    }

    .table td {
        color: var(--color-text-primary);
    }

/* ================================
   9. نوتیفیکیشن‌ها و هشدارها
================================ */
.alert {
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.alert-success {
    background-color: var(--color-secondary);
    color: #fff;
}

.alert-error {
    background-color: #E53935;
    color: #fff;
}

.alert-warning {
    background-color: var(--color-accent);
    color: #fff;
}

.alert-info {
    background-color: var(--color-primary);
    color: #fff;
}

/* ================================
   10. عناصر اضافی و Hover
================================ */
.card:hover, .widget:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn:hover {
    cursor: pointer;
}


/* ================================
   6. لینک‌ها
================================ */
/*a, .nav-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s;
}

    a:hover, .nav-link:hover {
        color: var(--color-accent) !important;
    }*/





/* هاور روی تب‌های غیر فعال Nav-Pills */
.nav-pills .nav-item .nav-link:not(.active):hover {
    border-bottom: none;
    padding-bottom: 0.55rem;
    background-color: #E9E7FD; /* نارنجی بسیار کم‌رنگ و ملایم */
    color: var(--bs-secondary); /* متن نارنجی لوگو */
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
    background-color: var(--bs-primary) !important;
    color: #fff
}


.ti-menu-2:before {
    content: "\ec42";
    /*color: red;*/
}



.nav-tabs.widget-nav-tabs .nav-link.active {
    border-color: var(--bs-primary) !important;
    box-shadow: none !important
}

    .nav-tabs.widget-nav-tabs .nav-link.active .badge {
        background-color: rgba(115,103,240,.16) !important;
        color: var(--bs-primary) !important
    }


.bg-warning {
    --bs-bg-opacity: 1;
    /*background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;*/
    background-color: var(--bs-primary) !important
}


h5, .h5 {
    font-size: 1rem;
}

h6, .h6 {
    font-size: 0.9rem;
}

.app-sidebar-collapsed .app-brand {
    justify-content: center; /* وقتی سایدبار بسته شد هم مرکز باشه */
}



/*[dir=rtl] .me-3 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

[dir=rtl] .me-xl-2 {
    margin-left: .5rem !important;
    margin-right: 0 !important;
}*/


.tab-content:not(.doc-example-content) {
    padding: 0.3rem !important;
}




/*فاصله بین ایتم های منو بالا که پروفایل کاربر هست*/
.layout-navbar .navbar-dropdown .dropdown-menu .dropdown-item {
    padding-block: .37rem !important;
    min-height: 0rem !important;
}