@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    padding: 0;
    margin: 0;
    height: auto;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1140px;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.wrapper {
    overflow-x: hidden;
}



/* login-page-css-start */


.login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 15px;
    position: relative;
    overflow: hidden;
    /* background:linear-gradient(135deg,#013068 0%,#0056b3 55%,#00b4ff 100%); */
}

.login-section {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .12), transparent 35%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, .08), transparent 30%),
        linear-gradient(135deg, #013068, #0056b3, #00b4ff);
}

/*=================================
BACKGROUND CIRCLES
=================================*/
.login-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    top: -140px;
    left: -140px;
    filter: blur(2px);
}

.login-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    bottom: -100px;
    right: -80px;
}

/*=================================
SMALL DOTS
=================================*/
.login-section .container {
    position: relative;
    z-index: 2;
}

.login-section .container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .35;
}

/*=================================
LOGIN CARD
=================================*/
.login-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 45px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);
    position: relative;
    overflow: hidden;
    transition: .35s;
}

.login-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 35px 70px rgba(0, 0, 0, .18);
}

/*=================================
TOP BORDER
=================================*/
.login-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #013068, #0056b3, #00b4ff);
}

/*=================================
LOGO
=================================*/
.login-logo {
    text-align: center;
    margin-bottom: 10px;
    border-radius: 8px;
    /* border: 2px solid #0073cb; */
}

.login-logo img {
    width: 140px;
    margin: auto;
    border: 2px solid #013266;
    box-shadow: 0px 0px 15px #0132663d;
}

/*=================================
HEADING
=================================*/
.login-heading {
    text-align: center;
    margin-bottom: 15px;
}

.login-heading h2 {
    font-size: 30px;
    font-weight: 700;
    color: #013068;
    margin-bottom: 2px;
}

.login-heading p {
    font-size: 14px;
    color: #000;
    line-height: 16px;
}

/*=================================
FORM GROUP
=================================*/
.form-group {
    margin-bottom: 5px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #013068;
    margin-bottom: 8px;
}

/*=================================
INPUT BOX
=================================*/
.input-group-custom {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef5ff;
    color: #0056b3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.input-group-custom .form-control {
    height: 58px;
    border: 1px solid #d8e2ef;
    border-radius: 14px;
    padding-left: 70px;
    padding-right: 55px;
    font-size: 15px;
    color: #333;
    transition: .30s;
    box-shadow: none;
}

.input-group-custom .form-control::placeholder {
    color: #999;
}

.input-group-custom .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .12);
}

/*=================================
PASSWORD TOGGLE
=================================*/
.password-toggle {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    outline: none;
    background: transparent;
    color: #7b8794;
    cursor: pointer;
    border-radius: 10px;
    transition: .3s;
}

.password-toggle:hover {
    background: #eef5ff;
    color: #0056b3;
}

/*=================================
LOGIN OPTIONS
=================================*/
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 28px;
    gap: 15px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remember-me input {
    width: 17px;
    height: 17px;
    accent-color: #0056b3;
    cursor: pointer;
}

.remember-me label {
    margin: 0;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.login-options a {
    color: #0056b3;
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
    text-decoration: none;
}

.login-options a:hover {
    color: #013068;
}

/*=================================
LOGIN BUTTON
=================================*/
.login-btn {
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #013068, #0056b3);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .35s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(1, 48, 104, .25);
}

.login-btn:active {
    transform: scale(.98);
}

/*=================================
DIVIDER
=================================*/
.divider {
    position: relative;
    text-align: center;
    margin: 35px 0;
}

.divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e5e8ef;
}

.divider span {
    position: relative;
    background: #fff;
    padding: 0 18px;
    color: #7b8794;
    font-size: 13px;
    font-weight: 500;
}

/*=================================
FOOTER
=================================*/
.login-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    text-align: center;
}

.footer-item {
    flex: 1;
}

.footer-item i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef5ff;
    color: #0056b3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 18px;
}

.footer-item span {
    display: block;
    color: #555;
    font-size: 13px;
    font-weight: 500;
}

/*=================================
TABLET
=================================*/
@media (max-width:991px) {
    .login-section {
        padding: 40px 20px;
    }

    .login-card {
        padding: 40px 30px;
    }

    .login-logo img {
        width: 170px;
    }

    .login-heading h2 {
        font-size: 30px;
    }
}

/*=================================
MOBILE
=================================*/
@media (max-width:767px) {
    .login-card {
        padding: 30px 22px;
        border-radius: 18px;
    }

    .login-logo {
        margin-bottom: 5px;
    }

    .login-logo img {
        width: 150px;
    }

    .login-heading {
        margin-bottom: 15px;
    }

    .login-heading h2 {
        font-size: 26px;
    }

    .login-heading p {
        font-size: 14px;
        line-height: 24px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .input-icon {
        width: 34px;
        height: 34px;
        left: 14px;
    }

    .input-group-custom .form-control {
        height: 52px;
        padding-left: 60px;
        padding-right: 20px;
        font-size: 13px;
    }

    .password-toggle {
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .login-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: 10px 0 15px;
    }

    .login-btn {
        height: 52px;
        font-size: 15px;
    }

    .divider {
        margin: 28px 0;
    }

    .login-footer {
        flex-direction: column;
        gap: 18px;
    }

    .footer-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        text-align: left;
    }

    .footer-item i {
        margin: 0;
        flex-shrink: 0;
    }
}

/*=================================
SMALL MOBILE
=================================*/
@media (max-width:480px) {
    .login-section {
        padding: 20px 15px;
    }

    .login-card {
        padding: 25px 18px;
    }

    .login-heading h2 {
        font-size: 24px;
    }

    .login-heading p {
        font-size: 12px;
    }
}

/*=====================================
INPUT FOCUS
=====================================*/
.input-group-custom.focused .input-icon {
    background: #0056b3;
    color: #fff;
    transition: .3s;
}

.input-group-custom.focused .form-control {
    border-color: #0056b3;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, .10);
}

/*=====================================
BUTTON DISABLED
=====================================*/
.login-btn:disabled {
    opacity: .75;
    cursor: not-allowed;
}

/*=====================================
SMOOTH INPUT
=====================================*/
.form-control {
    transition: .3s;
}

/* login-page-css-end */




/* dashboard-section-css-start */

.dashboard-wrapper {
    width: 100%;
    min-height: 100vh;
}

/* Desktop Sidebar-start */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: linear-gradient(180deg, #2098ee 0%, #195c9b 50%, #104e88 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 999;
    box-shadow: 8px 0 35px rgba(0, 0, 0, .18);
}

/* Desktop Sidebar-end */


/* Sidebar Logo-start */

.sidebar-logo {
    height: 90px;
    display: flex;
    align-items: start;
    justify-content: start;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-logo img {
	width: 120px;
	border: 2px solid #2563eb;
	box-shadow: 0px 0px 15px #0c2c7047;
}

/* Sidebar Logo-end */


/* Sidebar Menu-start */

.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 5px 12px 15px 12px;
}

.sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 30px;
}

/* Sidebar Menu-end */


/* Menu-start */
.menu-item, .menu-item-dash {
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 14px;
    color: #fff;
    padding: 14px 16px;
    margin-bottom: 15px;
    transition: .35s;
}

.menu-item-dash {
    gap: 12px;
}

.menu-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-item i,
.menu-item-dash i {
    font-size: 16px;
    color: #fff;
}

.menu-item span,
.menu-item-dash span {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.menu-item:hover,
.menu-item-dash:hover {
    background: rgba(255, 255, 255, .12);
}

/* Menu-end */


/* Active Menu-start */

.menu-item.active,
.menu-item-dash.active {
    background: #fff;
}

.menu-item.active i,
.menu-item.active span,
.menu-item-dash.active i,
.menu-item-dash.active span {
    color: #013068;
    font-weight: 600;
}

/* Active Menu-end */


/* Sub Menu-start */

.submenu-list {
    margin: 4px 0 15px 48px;
    padding-left: 18px;
    border-left: 2px solid rgba(255, 255, 255, .18);
}

.submenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    padding: 10px 0;
    font-size: 13px;
    transition: .35s;
}

.submenu-dot {
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    transition: .35s;
}

.submenu-item:hover {
    color: #fff;
    padding-left: 8px;
}

.submenu-item:hover .submenu-dot {
    background: #ffd54f;
    transform: scale(1.3);
}

.submenu-item.active {
    color: #fff;
    font-weight: 600;
}

.submenu-item.active .submenu-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, .7);
}

/* Sub Menu-end */


/* Bottom Menu-start */

.sidebar-bottom {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
}

.sidebar-bottom a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    transition: .35s;
    font-size: 20px;
}

.sidebar-bottom a:hover,
.sidebar-bottom a.active {
    background: #fff;
    color: #013068;
}

/* Bottom Menu-end */


/* Main Content-start */

.main-content {
    margin-left: 280px;
    min-height: 100vh;
}

/* Main Content-end */


/* Mobile Header-start */

.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    z-index: 1001;
}

.mobile-menu-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #209bef;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.mobile-office-name {
    flex: 1;
    margin: 0 15px;
    font-size: 17px;
    font-weight: 600;
    color: #013068;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-logo img {
    width: 120px;
    height: 50px;
    object-fit: cover;
    border: 2px solid #209bef;
    box-shadow: 0 0 15px #2295e42b;
}

/* Mobile Header-end */


/* Mobile Sidebar-start */

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -290px;
    width: 280px;
    height: 100vh;
    background: linear-gradient(180deg, #269dee, #207dbc, #0f5496);
    z-index: 9999;
    transition: .35s;
}

.mobile-sidebar.active {
    left: 0;
}

.mobile-sidebar-top {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mobile-sidebar-top img {
	width: 105px;
	border: 2px solid #2d72bc;
	box-shadow: 0px 0px 15px #0e467580;
}

.mobile-sidebar-top button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #013068;
    font-size: 20px;
    cursor: pointer;
}

.mobile-sidebar-menu {
    height: calc(100vh - 72px);
    overflow-y: auto;
    padding: 15px 12px;
}

/* Mobile Sidebar-end */


/* Overlay-start */

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 9998;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Overlay-end */


/* Responsive Sidebar-start */

@media(max-width:991px) {

    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding-top: 65px;
    }

    .mobile-header {
        display: flex;
    }

}

@media(min-width:992px) {

    .mobile-header,
    .mobile-sidebar,
    .sidebar-overlay {
        display: none;
    }

}

@media(max-width:576px) {

    .menu-item, .menu-item-dash {
        border-radius: 8px;
        padding: 11px 16px;
        margin-bottom: 15px;
    }

}

/* Responsive Sidebar-end */


/* Mobile Sidebar Bottom Fixed-start */

@media(max-width:991px) {

    .mobile-sidebar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-sidebar-menu {
        flex: 1;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        padding: 15px 12px 90px;
    }

    .mobile-sidebar .sidebar-bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 75px;
        z-index: 10;
        flex-shrink: 0;
    }

}

/* Mobile Sidebar Bottom Fixed-end */


/* Top Header-start */

.top-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    z-index: 100;
}

.top-header h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-right>i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f7fb;
    color: #013068;
    font-size: 18px;
    cursor: pointer;
    transition: .35s;
}

.header-right>i:hover {
    background: #013068;
    color: #fff;
}

.admin-profile {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-direction: column;
}

.admin-profile img {
    width: 46px;
    height: 46px;
    border: 2px solid #e8eef8;
    border-radius: 50%;
    object-fit: cover;
}

.admin-profile span {
    font-size: 14px;
    font-weight: 600;
    color: #013068;
}

/* Top Header-end */


/* Content Area-start */

.content {
    padding: 20px;
    background: #f4f7fc;
    min-height: calc(100vh - 0px);
}

@media(max-width:991px) {

    .top-header {
        display: none;
    }

    .content {
        padding: 15px;
        min-height: calc(100vh - 0px);
    }

}

@media(max-width:576px) {

    .content {
        padding: 12px;
    }

}

/* Content Area-end */


/* Business Dashboard-start */

.business-dashboard {
    width: 100%;
}

.dashboard-title {
    margin-bottom: 20px;
}

.dashboard-title h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #013068;
}

/* Business Dashboard-end */


/* Overview Cards-start */

.overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.overview-card {
    display: flex;
    align-items: start;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    color: #fff;
    border: none;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
    transition: .3s ease;
    position: relative;
    overflow: hidden;
    flex-direction: column;
}

.overview-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -30px;
    top: -30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.overview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.overview-card .icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.overview-card h6 {
    color: rgba(255, 255, 255, .85);
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.overview-card h3 {
    color: #fff;
    margin: 6px 0;
    font-size: 24px;
    font-weight: 700;
}

.overview-card p {
    color: rgba(255, 255, 255, .85);
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.overview-card:nth-child(1) {
    background: #2563eb;
}

.overview-card:nth-child(2) {
    background: #10b981;
}

.overview-card:nth-child(3) {
    background: #8b5cf6;
}

.overview-card:nth-child(4) {
    background: #f59e0b;
}

.overview-card:nth-child(1) .icon,
.overview-card:nth-child(2) .icon,
.overview-card:nth-child(3) .icon,
.overview-card:nth-child(4) .icon {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .2);
}

@media(max-width:991px) {

    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

}

@media(max-width:576px) {

    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .overview-card {
        padding: 15px 18px;
        gap: 10px;
        height: 150px;
        width: 100%;
    }

    .overview-card .icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .overview-card h3 {
        font-size: 15px;
    }

    .overview-card h6 {
        font-size: 11px;
    }

    .overview-card p {
        font-size: 11px;
    }

}

/* Overview Cards-end */


/* Today Dashboard-start */

.today-dashboard-section {
    width: 100%;
    margin-bottom: 25px;
}

.today-dashboard-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #afe1ff;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(139, 92, 246, 0.07);
}

.today-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.today-date-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.today-date-box span {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.today-date-box strong {
    font-size: 20px;
    color: #013068;
    font-weight: 700;
}

.today-showing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 25px;
    border-left: 1px solid #e5e7eb;
}

.today-showing span {
    font-size: 13px;
    color: #64748b;
}

.today-showing strong {
    font-size: 14px;
    color: #013068;
    font-weight: 700;
}

.today-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.today-view-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.today-view-select {
    min-width: 140px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #013068;
    font-size: 13px;
    font-weight: 600;
}

.today-view-select i {
    color: #64748b;
    font-size: 12px;
}

.today-summary-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    gap: 20px;
}

.today-dashboard-card {
    background: #fff;
    border: 1px solid #a6e5f9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(16, 185, 129, 0.07);
}

.today-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf2f7;
}

.today-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.today-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.bills-icon {
    background: #e8f1ff;
    color: #2563eb;
}

.followup-icon {
    background: #fff5df;
    color: #d97706;
}

.tasks-icon {
    background: #e8fff3;
    color: #059669;
}

.today-card-title h5 {
    margin: 0 0 3px;
    color: #013068;
    font-size: 16px;
    font-weight: 700;
}

.today-card-title span {
    color: #64748b;
    font-size: 11px;
}

.today-card-badge {
    padding: 6px 10px;
    border-radius: 20px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 600;
}

.today-card-body {
    padding: 0 20px;
}

.today-bill-item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid #edf2f7;
}

.today-bill-item:last-child {
    border-bottom: none;
}

.today-bill-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.today-bill-date span {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.today-bill-date strong {
    font-size: 13px;
    color: #013068;
    font-weight: 700;
}

.today-bill-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.today-business-name,
.today-billing-amount {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.today-business-name span,
.today-billing-amount span {
    font-size: 11px;
    color: #64748b;
}

.today-business-name strong {
    color: #013068;
    font-size: 13px;
    font-weight: 700;
}

.today-billing-amount {
    text-align: right;
}

.today-billing-amount strong {
    color: #059669;
    font-size: 15px;
    font-weight: 700;
}

.today-empty-state {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 30px 15px;
}

.today-empty-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #f3f6fa;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.today-empty-state h6 {
    margin: 0 0 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.today-empty-state strong {
    color: #013068;
    font-size: 16px;
    font-weight: 700;
}

.today-empty-state p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 12px;
}

@media(max-width:1100px) {

    .today-summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }

    .bills-card {
        grid-column: 1 / -1;
    }

}

@media(max-width:991px) {

    .today-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .today-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .today-view-select {
        flex: 1;
    }

    .today-summary-grid {
        grid-template-columns: 1fr;
    }

    .bills-card {
        grid-column: auto;
    }

}

@media(max-width:576px) {

    .today-dashboard-header {
        padding: 14px;
        gap: 15px;
        border-radius: 12px;
    }

    .today-header-left {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .today-date-box strong {
        font-size: 17px;
    }

    .today-showing {
        width: 100%;
        padding-left: 0;
        padding-top: 12px;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .today-showing strong {
        font-size: 12px;
    }

    .today-header-right {
        width: 100%;
    }

    .today-view-label {
        font-size: 12px;
    }

    .today-view-select {
        min-width: 0;
        height: 38px;
        font-size: 12px;
    }

    .today-summary-grid {
        gap: 12px;
    }

    .today-card-header {
        padding: 14px;
    }

    .today-card-title h5 {
        font-size: 14px;
    }

    .today-card-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .today-card-body {
        padding: 0 14px;
    }

    .today-bill-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    .today-bill-info {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .today-billing-amount {
        text-align: left;
    }

    .today-empty-state {
        min-height: 200px;
    }

}

/* Today Dashboard-end */


/* Dashboard Grid-start */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-box {
    background: #fdf4e9;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
}

.dashboard-box h5 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ec630c;
    font-size: 18px;
    font-weight: 600;
    color: #013068;
}

.dashboard-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-box li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ec630c;
    font-size: 14px;
}

.dashboard-box li:last-child {
    border-bottom: none;
}

.dashboard-box span {
    color: #333;
}

.dashboard-box small {
    color: #888;
    font-size: 12px;
}

.dashboard-box b {
    color: #013068;
    font-size: 15px;
}

@media(max-width:991px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}

/* Dashboard Grid-end */


/* Pie Chart Box-start */

.chart-box {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    border: 1px solid #edf2f7;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.chart-header h5 {
    margin: 0;
    padding: 0;
    border: none;
    color: #013068;
    font-size: 18px;
    font-weight: 700;
}

.chart-wrapper {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    margin: auto;
    position: relative;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-legend {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 18px;
    font-size: 13px;
    align-items: center;
    justify-content: center;
}

.chart-legend div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-legend span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.blue {
    background: #1E40AF;
}

.cyan {
    background: #0891B2;
}

.green {
    background: #16A34A;
}

.orange {
    background: #F59E0B;
}

.red {
    background: #EF4444;
}

@media(max-width:991px) {

    .chart-box canvas {
        height: 230px !important;
    }

}

@media(max-width:576px) {

    .chart-box {
        padding: 14px;
    }

    .chart-header h5 {
        font-size: 15px;
    }

    .chart-box canvas {
        height: 200px !important;
    }

    .chart-wrapper {
        width: 100%;
        max-width: 190px;
        aspect-ratio: 1 / 1;
        margin: 0;
        position: relative;
    }

    .chart-legend {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-top: 10px;
        font-size: 13px;
        align-items: center;
        justify-content: center;
    }

}

/* Pie Chart Box-end */


/* Common Buttons-start */

.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 10px;
    background: #014bab;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: .35s;
}

.btn-primary-custom:hover {
    background: #013068;
    color: #fff;
}

.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 2px solid #014bab;
    border-radius: 10px;
    background: transparent;
    color: #014bab;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: .35s;
}

.btn-outline-custom:hover {
    background: #014bab;
    color: #fff;
}

/* Common Buttons-end */


/* Common Card-start */

.common-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
}

.common-card-title {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f7;
    font-size: 18px;
    font-weight: 600;
    color: #013068;
}

/* Common Card-end */


/* Table-start */

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table-responsive table {
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
}

.table-responsive th {
    padding: 14px;
    background: #014bab;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.table-responsive td {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    font-size: 12px;
    color: #000;
}

.table-responsive tr:hover {
    background: #f8fbff;
}

/* Table-end */


/* Form-start */

.form-control {
    width: 100%;
    height: 38px;
    padding: 0 15px;
    border: 1px solid #dfe5ef;
    border-radius: 10px;
    outline: none;
    transition: .3s;
    font-size: 14px !important;
}

.form-control:focus {
    border-color: #014bab;
    box-shadow: 0 0 0 3px rgba(1, 75, 171, .08);
}

textarea.form-control {
    height: 120px;
    padding: 15px;
    resize: none;
}

/* Form-end */


/* Badges-start */

.badge-success {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 30px;
    background: #e8fff0;
    color: #149647;
    font-size: 12px;
    font-weight: 600;
}

.badge-danger {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 30px;
    background: #ffecec;
    color: #e53935;
    font-size: 12px;
    font-weight: 600;
}

.badge-warning {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 30px;
    background: #fff7e5;
    color: #ff9800;
    font-size: 12px;
    font-weight: 600;
}

/* Badges-end */


/* Scrollbar-start */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #eef2f8;
}

::-webkit-scrollbar-thumb {
    background: #014bab;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #013068;
}

/* Scrollbar-end */


/* Animation-start */

.fade-up {
    animation: fadeUp .5s ease;
}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

}

/* Animation-end */


/* Common Responsive-start */

@media(max-width:991px) {

    .btn-primary-custom,
    .btn-outline-custom {
        width: 100%;
    }

    .common-card {
        padding: 16px;
    }

}

@media(max-width:576px) {

    .common-card {
        padding: 14px;
    }

    .common-card-title {
        font-size: 16px;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 10px;
        font-size: 12px;
    }

    .form-control {
        height: 37px;
        font-size: 13px;
    }

}

/* Common Responsive-end */


/* Bar Chart-start */

.bar-chart-wrapper {
    width: 100%;
    height: 320px;
    position: relative;
}

.bar-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-badge {
    background: #eef4ff;
    color: #2563eb;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #dbeafe;
}

@media(max-width:991px) {

    .bar-chart-wrapper {
        height: 280px;
    }

}

@media(max-width:576px) {

    .bar-chart-wrapper {
        height: 220px;
    }

    .chart-badge {
        font-size: 10px;
        padding: 5px 10px;
    }

}

/* Bar Chart-end */

/* dashboard-section-css-end */




/* lead-management-sction-css-start */

.lead-management-section {
    width: 100%;
}

.lead-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.lead-header-left h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.lead-header-left p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #000;
}

.lead-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/*=================================
BUTTONS
=================================*/

.lead-btn {
    height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: .35s;
    font-size: 13px;
    font-weight: 600;
}

.lead-btn i {
    font-size: 15px;
}

.quotation-btn {
    background: #014bab;
    color: #fff;
}

.quotation-btn:hover {
    background: #013068;
}

.add-btn {
    background: #10b981;
    color: #fff;
}

.add-btn:hover {
    background: #059669;
}

.filter-btn {
    background: #fff5df;
    color: #d97706;
}

.filter-btn:hover {
    background: #d97706;
    color: #fff;
}

.import-btn {
    background: #f3e8ff;
    color: #7c3aed;
}

.import-btn:hover {
    background: #7c3aed;
    color: #fff;
}

/*=================================
DROPDOWN
=================================*/

.dropdown-menu {
    min-width: 220px;
    border: none;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
}

.dropdown-item:hover {
    background: #edf5ff;
    color: #014bab;
}

/*=================================
COMMON CARD
=================================*/

.lead-management-section .common-card {
    padding: 10px;
    border-radius: 10px;
}

/*=================================
TABLE
=================================*/

.lead-management-section .table {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
}

/* .lead-record-table-responsive .table {
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
} */

.lead-record-table thead th {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.lead-management-section .table thead th {
    white-space: nowrap;
    font-size: 13px;
    padding: 8px;
    vertical-align: middle;
}

.lead-management-section .table tbody td {
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
    padding: 12px;
}

.lead-management-section .table tbody tr:hover {
    background: #f8fbff;
}

.lead-management-section .table .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.lead-management-section .table .btn i {
    font-size: 13px;
}

/*=================================
BADGES
=================================*/

.lead-management-section .badge-success,
.lead-management-section .badge-warning,
.lead-management-section .badge-danger {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 30px;
}

/*=================================
MODAL
=================================*/

.modal {
    padding: 15px;
}

.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 30px);
    margin: auto;
}

.modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.lead-modal .modal-header {
    background: #014bab;
    color: #fff;
    padding: 16px 20px;
}

.lead-modal .modal-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}

.lead-modal .btn-close {
    filter: brightness(0) invert(1);
}

.lead-modal .modal-body {
    padding: 20px;
}

.lead-modal .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #edf2f7;
}

/*=================================
FORM
=================================*/

.lead-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #013068;
}

.form-group label span {
    color: #e53935;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    height: 42px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13px;
    transition: .3s;
}

.form-group textarea {
    height: 110px;
    padding: 12px;
    resize: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #014bab;
    box-shadow: 0 0 0 3px rgba(1, 75, 171, .08);
}

/*=================================
IMPORT
=================================*/

.import-box {
    border: 2px dashed #bfd5ff;
    border-radius: 16px;
    background: #f8fbff;
    padding: 35px 25px;
    text-align: center;
}

.import-icon {
    width: 75px;
    height: 75px;
    margin: auto auto 15px;
    border-radius: 50%;
    background: #014bab;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.import-box h5 {
    margin-bottom: 8px;
    font-size: 18px;
    color: #013068;
}

.import-box p {
    margin-bottom: 18px;
    font-size: 13px;
    color: #000;
}

/*=================================
RESPONSIVE
=================================*/

@media(max-width:991px) {

    .lead-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .lead-header-right {
        width: 100%;
        justify-content: flex-start;
    }

    .lead-form-grid {
        grid-template-columns: 1fr;
    }

    .modal-dialog {
        min-height: 100vh;
        padding: 0px;
    }

}

@media(max-width:576px) {

    .lead-header-left h3 {
        font-size: 20px;
    }

    .lead-header-left p {
        font-size: 12px;
    }

    .lead-header-right {
        /* flex-direction: column; */
        /* width: 100%; */
        /* flex-wrap: wrap; */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .lead-btn {
        width: 100%;
        justify-content: center;
        height: 40px;
        font-size: 12px;
    }

    .dropdown,
    .dropdown .lead-btn {
        width: 100%;
    }

    .lead-modal .modal-header {
        padding: 14px 16px;
    }

    .lead-modal .modal-header h4 {
        font-size: 16px;
    }

    .lead-modal .modal-body {
        padding: 16px;
    }

    .lead-modal .modal-footer {
        flex-direction: column;
        gap: 10px;
    }

    .lead-modal .modal-footer .btn {
        width: 100%;
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .lead-management-section .table thead th, .lead-management-section .table tbody td {
        font-size: 14px;
        padding: 10px;
    }

    .form-group label {
        font-size: 12px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 12px;
    }

    .import-box {
        padding: 25px 16px;
    }

    .import-icon {
        width: 65px;
        height: 65px;
        font-size: 26px;
    }

    .import-box h5 {
        font-size: 16px;
    }

    .import-box p {
        font-size: 12px;
    }

    .lead-management-section .common-card {
        display: none;
    }

}


/*==================================================
ADD ITEM BUTTON
==================================================*/

.add-item-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: #014bab;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: .3s;
}

.add-item-btn:hover {
    background: #013068;
}


/*==================================================
AMOUNT SUMMARY
==================================================*/

.amount-summary {
    width: 420px;
    margin-left: auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}

.amount-summary table {
    width: 100%;
    margin: 0;
}

.amount-summary td {
    padding: 14px 18px;
    font-size: 14px;
    border-bottom: 1px solid #edf2f7;
}

.amount-summary td:first-child {
    color: #64748b;
    font-weight: 600;
}

.amount-summary td:last-child {
    text-align: right;
    font-weight: 700;
    color: #013068;
}

.amount-summary tr:last-child td {
    background: linear-gradient(135deg, #014bab, #013068);
    color: #fff;
    font-size: 18px;
    border-bottom: none;
}

.lead-action-btns {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px) {

    .quotation-items {
        min-width: 900px;
    }

    .amount-summary {
        width: 100%;
        margin-top: 20px;
    }

}



/*=========================================
VIEW LEAD MODAL
=========================================*/

#viewLeadModal .modal-dialog {
    max-width: 1100px;
}

#viewLeadModal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
}

/*=========================================
HEADER
=========================================*/

#viewLeadModal .modal-header {
    background: linear-gradient(135deg, #014bab, #013068);
    color: #fff;
    border: none;
    padding: 18px 24px;
}

#viewLeadModal .modal-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
}

#viewLeadModal .modal-header h4 i {
    font-size: 22px;
}

#viewLeadModal .btn-close {
    filter: brightness(0) invert(1);
}

/*=========================================
BODY
=========================================*/

#viewLeadModal .modal-body {
    padding: 25px;
    background: #f6f8fc;
}

/*=========================================
COMMON CARD
=========================================*/

#viewLeadModal .common-card {
    background: #fff;
    border: 1px solid #e7edf6;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .04);
}

#viewLeadModal .common-card:last-child {
    margin-bottom: 0;
}

#viewLeadModal .common-card h5 {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
    color: #013068;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

#viewLeadModal .common-card h5 i {
    color: #014bab;
    font-size: 18px;
}

/*=========================================
DETAIL GRID
=========================================*/

.lead-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.lead-view-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: #fbfcfe;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    transition: .3s;
}

.lead-view-item:hover {
    border-color: #014bab;
    background: #f5f9ff;
}

.lead-view-item label {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.lead-view-item span {
    color: #013068;
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}

/*=========================================
ADDRESS & NOTES
=========================================*/

#viewLeadModal .common-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #374151;
}

/*=========================================
STATUS BADGE
=========================================*/

#viewLeadModal .badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 7px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

/*=========================================
FOOTER
=========================================*/

#viewLeadModal .modal-footer {
    background: #fff;
    border-top: 1px solid #edf2f7;
    padding: 18px 24px;
}

#viewLeadModal .modal-footer .btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

#viewLeadModal .btn-success {
    background: #10b981;
    border-color: #10b981;
}

#viewLeadModal .btn-success:hover {
    background: #059669;
}

#viewLeadModal .btn-primary {
    background: #014bab;
    border-color: #014bab;
}

#viewLeadModal .btn-primary:hover {
    background: #013068;
}

#viewLeadModal .btn-secondary {
    background: #6b7280;
    border-color: #6b7280;
}

#viewLeadModal .btn-secondary:hover {
    background: #4b5563;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .lead-view-grid {
        grid-template-columns: 1fr;
    }

    #viewLeadModal .modal-dialog {
        max-width: 98%;
    }

    #viewLeadModal .modal-body {
        padding: 8px;
    }

}

@media(max-width:576px) {

    #viewLeadModal .modal-header {
        padding: 15px 18px;
    }

    #viewLeadModal .modal-header h4 {
        font-size: 16px;
    }

    #viewLeadModal .common-card {
        padding: 10px;
    }

    #viewLeadModal .common-card h5 {
        font-size: 14px;
    }

    .lead-view-item {
        padding: 12px;
    }

    .lead-view-item label {
        font-size: 11px;
    }

    .lead-view-item span {
        font-size: 14px;
    }

    #viewLeadModal .modal-footer {
        flex-direction: column;
        gap: 12px;
    }

    #viewLeadModal .modal-footer>div {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    #viewLeadModal .modal-footer .btn {
        flex: 1;
        justify-content: center;
    }

}


/*=====================================
IMPORT / EXPORT
=====================================*/

.lead-transfer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.lead-transfer-card {
    background: #fff;
    border: 1px solid #e7edf6;
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    transition: .35s;
}

.lead-transfer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.transfer-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 34px;
    color: #fff;
}

.transfer-icon.import {
    background: #014bab;
}

.transfer-icon.export {
    background: #10b981;
}

.lead-transfer-card h5 {
    font-size: 20px;
    color: #013068;
    margin-bottom: 10px;
    font-weight: 700;
}

.lead-transfer-card p {
    font-size: 13px;
    color: #000;
    margin-bottom: 22px;
    line-height: 1.7;
}

.lead-transfer-card .form-group {
    text-align: left;
}

.lead-transfer-card .btn {
    height: 46px;
    border-radius: 10px;
    font-weight: 600;
}

.sample-download {
    width: 100%;
}

@media(max-width:768px) {

    .lead-transfer-grid {
        grid-template-columns: 1fr;
    }

    .lead-transfer-card {
        padding: 20px;
    }

    .lead-transfer-card .btn {
        height: 38px;
        font-size: 13px;
        text-align: center;
    }

    .lead-transfer-card h5 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .lead-transfer-card p {
        font-size: 12px;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .transfer-icon {
        width: 60px;
        height: 60px;
        margin: 0px auto 8px;
        font-size: 30px;
    }

}



/*=========================================
LEAD FILTER ROW
=========================================*/

.lead-filter-row {

    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;

}

.lead-filter-row label {

    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    margin-bottom: 8px;

}

.lead-filter-row .form-control,
.lead-filter-row .form-select {

    height: 45px;
    border-radius: 10px;
    font-size: 14px;

}

.lead-filter-btn {
    height: 42px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:767px) {

    .lead-filter-row {
        padding: 15px;
    }

    .lead-filter-row .form-control, .lead-filter-row .form-select {
        height: 35px;
        font-size: 14px;
    }

}

/*==================================
MOBILE LEAD CARD
==================================*/

.lead-mobile-list {
    display: none;
}

@media(max-width:767px) {

    /* Hide Desktop Table */
    .lead-management-section .table-responsive {
        display: none;
    }

    /* Show Mobile Cards */
    .lead-mobile-list {
        display: block;
    }

    .lead-mobile-card {
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 15px;
        border: 1px solid transparent;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    }

    /*==============================
    CARD COLORS
    ==============================*/

    .lead-new {
        background: #dff5ff;
        border-color: #7fd6ff;
    }

    .lead-follow {
        background: #fff8dc;
        border-color: #ffd54f;
    }

    .lead-close {
        background: #dff8e8;
        border-color: #67d68f;
    }

    .lead-lost {
        background: #ffe3e3;
        border-color: #ff8d8d;
    }

    .lead-notreceived {
        background: #ffe7ec;
        border-color: #ff9ab0;
    }

    .lead-notinterested {
        background: #eeeeee;
        border-color: #bdbdbd;
    }

    .lead-callback {
        background: #e4f4ff;
        border-color: #6dbdff;
    }

    .lead-completed {
        background: #e8fff1;
        border-color: #6ed69b;
    }

    /*==============================
    HEADER
    ==============================*/

    .lead-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .lead-card-top h5 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #013068;
    }

    .lead-card-top p {
        margin: 4px 0 0;
        font-size: 12px;
        color: #555;
    }

    .lead-card-top .badge {
        font-size: 11px;
        padding: 6px 10px;
        border-radius: 20px;
    }

    /*==============================
    BODY
    ==============================*/

    .lead-card-body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .lead-item {
        background: rgba(255, 255, 255, .65);
        border-radius: 10px;
        padding: 8px;
    }

    .lead-item span {
        display: block;
        font-size: 10px;
        color: #6b7280;
        margin-bottom: 3px;
        text-transform: uppercase;
    }

    .lead-item strong {
        display: block;
        font-size: 12px;
        color: #013068;
        font-weight: 600;
        word-break: break-word;
    }

    /*==============================
    ACTION BUTTONS
    ==============================*/

    .lead-card-actions {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin-top: 0px;
    }

    .lead-card-actions .btn {
        height: 38px;
        border-radius: 10px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lead-card-actions .btn i {
        font-size: 15px;
    }
}

.lead-mobile-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
}

.lead-card-content {
    flex: 1;
}

.lead-card-actions {
    width: 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.lead-card-actions .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.lead-card-actions .btn i {
    font-size: 15px;
}


/*=========================================
DESKTOP / MOBILE
=========================================*/

.lead-record-table-wrapper {
    display: block;
}

.lead-record-mobile-list {
    display: none;
}

/*=========================================
TABLE WRAPPER
=========================================*/

.lead-record-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lead-record-table-responsive::-webkit-scrollbar {
    height: 6px;
}

.lead-record-table-responsive::-webkit-scrollbar-thumb {
    background: #cfd8e3;
    border-radius: 30px;
}

.lead-record-table-responsive::-webkit-scrollbar-track {
    background: #f3f6fa;
}

/*=========================================
TABLE
=========================================*/

.lead-record-table {
    margin: 0;
    min-width: 1400px;
}

.lead-record-table thead th {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    color: #013068;
    vertical-align: middle;
}

.lead-record-table tbody td {
    white-space: nowrap;
    font-size: 13px;
    padding: 12px;
    vertical-align: middle;
}

.lead-record-table tbody tr:hover {
    background: #f8fbff;
}

/*=========================================
ACTION BUTTONS
=========================================*/

.lead-record-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.lead-record-action .btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.lead-record-action .btn i {
    font-size: 13px;
}

.lead-record-view-btn {
    background: #0d6efd;
    border-color: #0d6efd;
}

.lead-record-edit-btn {
    background: #198754;
    border-color: #198754;
}

.lead-record-whatsapp-btn {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.lead-record-whatsapp-btn:hover {
    background: #1ebe5d;
    border-color: #1ebe5d;
    color: #fff;
}

.lead-record-call-btn {
    background: #0dcaf0;
    border-color: #0dcaf0;
    color: #fff;
}

.lead-record-delete-btn {
    background: #dc3545;
    border-color: #dc3545;
}

/*=========================================
BADGES
=========================================*/

.lead-record-table .badge {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 30px;
    font-weight: 600;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px) {

    /* .lead-record-table-wrapper {
        display: none;
    } */

    .lead-record-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

}

/*=========================================
LEAD RECORD TABLE
=========================================*/

.lead-record-table-box {
    overflow-x: auto;
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    background: #fff;
}

.lead-record-table {
    min-width: 1350px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* Header */

.lead-record-table thead {
    background: linear-gradient(135deg, #0d4ea6, #2563eb);
}

.lead-record-table thead th {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.lead-record-table thead th:first-child {
    border-top-left-radius: 16px;
}

.lead-record-table thead th:last-child {
    border-top-right-radius: 16px;
    text-align: center;
}

/* Body */

.lead-record-table tbody td {
    padding: 16px 18px;
    font-size: 14px;
    color: #1e293b;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
    white-space: nowrap;
}

.lead-record-table tbody tr {
    transition: .25s;
}

.lead-record-table tbody tr:hover {
    background: #f4f8ff;
}

.lead-record-table tbody tr:last-child td {
    border-bottom: none;
}

/* Status */

.lead-record-table .badge {
    border-radius: 30px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 600;
}

/* Actions */

.lead-record-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.lead-record-action .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: .3s;
}

.lead-record-action .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}



/* lead-management-section-css-end */






/* Billing-Management-section-css-start */

.billing-management-section {
    width: 100%;
    /* padding: 25px; */
    background: #f5f8fc;
}


/* Billing-Header-start */

.billing-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.billing-header-left {
    flex: 1;
}

.billing-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 50px;
    background: #e9f2ff;
    color: #1769d1;
    font-size: 12px;
    font-weight: 700;
}

.billing-header-left h2 {
    margin: 0;
    color: #172033;
    font-size: 28px;
    font-weight: 800;
}

.billing-header-left p {
    margin: 7px 0 0;
    color: #7b8497;
    font-size: 14px;
}

.billing-header-right {
    flex-shrink: 0;
}

.billing-add-invoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #1769d1, #087f8c);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(23, 105, 209, 0.18);
    transition: 0.3s ease;
}

.billing-add-invoice-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(23, 105, 209, 0.25);
}


/* Billing-Summary-Cards-start */

.billing-summary-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}

.billing-stat-card {
    position: relative;
    min-height: 145px;
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 23px;
    border-radius: 16px;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(30, 50, 80, 0.10);
    flex-direction: column;
}

.billing-stat-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -35px;
    bottom: -45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.billing-vat-card {
    background: linear-gradient(135deg, #1769d1, #3897ff);
}

.billing-non-vat-card {
    background: linear-gradient(135deg, #087f8c, #0db5a5);
}

.billing-month-card {
    background: linear-gradient(135deg, #e28b12, #f5b53f);
}

.billing-year-card {
    background: linear-gradient(135deg, #7548c7, #a56bea);
}

.billing-stat-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 22px;
    position: relative;
    z-index: 1;
}

.billing-stat-content {
    position: relative;
    z-index: 1;
}

.billing-stat-content h6 {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
}

.billing-stat-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.billing-stat-content p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}


/* All-Invoice-section-start */

.all-invoice-section {
    width: 100%;
    padding: 25px;
    border: 1px solid #e8edf4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(25, 45, 75, 0.05);
}

.invoice-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.invoice-section-badge {
    display: inline-block;
    margin-bottom: 7px;
    color: #087f8c;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-list-header h3 {
    margin: 0;
    color: #172033;
    font-size: 21px;
    font-weight: 800;
}

.invoice-list-header p {
    margin: 5px 0 0;
    color: #8790a0;
    font-size: 13px;
}

.invoice-search {
    width: 280px;
}

.invoice-search-box {
    position: relative;
}

.invoice-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa4b5;
    z-index: 2;
}

.invoice-search-box input {
    height: 43px;
    padding-left: 15px;
    border: 1px solid #e1e7ef;
    border-radius: 9px;
    box-shadow: none;
}

.invoice-search-box input:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}


/* Invoice-Table-start */

.invoice-table-wrapper {
    width: 100%;
}

.invoice-table {
    min-width: 1100px;
    margin: 0;
    vertical-align: middle;
}

.invoice-table thead th {
    padding: 14px 12px;
    border-bottom: 1px solid #e5eaf1;
    background: #f7f9fc;
    color: #657083;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.invoice-table tbody td {
    padding: 17px 12px;
    border-bottom: 1px solid #edf0f5;
    color: #4f596b;
    font-size: 13px;
    white-space: nowrap;
}

.invoice-table tbody tr:last-child td {
    border-bottom: 0;
}

.invoice-table tbody td strong {
    color: #172033;
    font-weight: 800;
}


/* Invoice-Type-status-start */

.invoice-type, .invoice-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
}

.invoice-non-vat {
    background: #fff2df;
    color: #c97900;
}

.invoice-vat {
    background: #e8f1ff;
    color: #1769d1;
}

.invoice-paid {
    background: #e8f8ef;
    color: #159452;
}


/* Invoice-Action-buttons-start */

.invoice-action-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

.invoice-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    transition: 0.25s ease;
}

.invoice-action-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.invoice-view-btn {
    background: #1769d1;
}

.invoice-edit-btn {
    background: #7548c7;
}

.invoice-print-btn {
    background: #159452;
}

.invoice-delete-btn {
    background: #dc4654;
}


/* Invoice-Mobile-start */

.invoice-mobile-wrapper {
    display: none;
}

.invoice-mobile-card {
    padding: 18px;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #ffffff;
}

.invoice-mobile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf0f5;
}

.invoice-mobile-top span:first-child {
    color: #8b95a7;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.invoice-mobile-top h5 {
    margin: 3px 0;
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.invoice-mobile-top p {
    margin: 0;
    color: #687386;
    font-size: 12px;
}

.invoice-mobile-body {
    padding: 13px 0;
}

.invoice-mobile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
}

.invoice-mobile-item span:first-child {
    color: #8b95a7;
    font-size: 12px;
}

.invoice-mobile-item strong {
    color: #344054;
    font-size: 12px;
    text-align: right;
}

.invoice-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #edf0f5;
}

.invoice-mobile-actions .invoice-action-btn {
    flex: 1;
    width: auto;
}


/* Billing-Modal-start */

.billing-modal-dialog {
    max-width: 1180px;
}

.billing-modal {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f5f8fc;
    box-shadow: 0 25px 80px rgba(20, 35, 60, 0.2);
}

.billing-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 27px;
    background: linear-gradient(135deg, #071b3b, #087f8c);
    color: #ffffff;
}

.billing-modal-header span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.billing-modal-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
}

.billing-modal-header p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.billing-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.billing-modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    padding: 20px;
}


/* Billing-Card-start */

.billing-card {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #ffffff;
}

.billing-card:last-child {
    margin-bottom: 0;
}

.billing-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.billing-card-heading-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf3ff;
    color: #1769d1;
}

.billing-card-heading h4 {
    margin: 0;
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.billing-card-heading p {
    margin: 3px 0 0;
    color: #8992a2;
    font-size: 11px;
}

.billing-card label {
    display: block;
    margin-bottom: 7px;
    color: #424c5e;
    font-size: 12px;
    font-weight: 700;
}

.billing-card small {
    display: block;
    margin-top: 5px;
    color: #8b95a7;
    font-size: 10px;
}

.billing-card .form-control,
.billing-card .form-select {
    min-height: 43px;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    color: #344054;
    font-size: 13px;
    box-shadow: none;
}

.billing-card textarea.form-control {
    min-height: auto;
}

.billing-card .form-control:focus,
.billing-card .form-select:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}


/* Billing-Item-table-start */

.billing-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.billing-card-title-row .billing-card-heading {
    margin-bottom: 0;
}

.billing-add-item-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #1769d1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.billing-add-item-btn:hover {
    color: #ffffff;
    background: #0f58b4;
}

.billing-item-table-wrapper {
    width: 100%;
}

.billing-item-table {
    min-width: 1200px;
    margin: 0;
    vertical-align: middle;
}

.billing-item-table thead th {
    padding: 12px 35px;
    background: #f7f9fc;
    border-bottom: 1px solid #e5eaf1;
    color: #657083;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.billing-item-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid #edf0f5;
    color: #4d586b;
    font-size: 12px;
}

.billing-item-table .form-control {
    padding: 10px;
    min-height: 38px;
    font-size: 11px;
}

.billing-taxable,
.billing-vat-amount,
.billing-total {
    min-width: 100px;
    color: #172033 !important;
    font-weight: 700;
    white-space: nowrap;
}

.billing-remove-item {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: #ffe9ec;
    color: #dc4654;
}

.billing-remove-item:hover {
    background: #dc4654;
    color: #ffffff;
}


/* Billing-Summary-table-start */

.billing-summary-table {
    max-width: 600px;
    margin: 22px 0 0 auto;
}

.billing-summary-table .table {
    margin: 0;
}

.billing-summary-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #edf0f5;
    color: #687386;
    font-size: 13px;
}

.billing-summary-table td:last-child {
    color: #172033;
    font-weight: 700;
}

.billing-summary-table .billing-grand-total td {
    border-bottom: 0;
    color: #1769d1;
    font-size: 17px;
    font-weight: 800;
}

.billing-amount-words {
    margin-top: 16px;
    padding: 12px 15px;
    border-radius: 8px;
    background: #f4f8fc;
    color: #687386;
    font-size: 12px;
}

.billing-amount-words strong {
    color: #172033;
}


/* Billing-Modal-footer-start */

.billing-modal-footer,
.invoice-popup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e4e9f0;
    background: #ffffff;
}

.billing-close-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    background: #08586c !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
}

.billing-save-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #159452 !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
}

.billing-save-btn:hover {
    color: #ffffff !important;
    background: #117b44 !important;
}


/* Invoice-Popup-start */

.invoice-popup-modal {
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #f5f8fc;
}

.invoice-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 21px 24px;
    border: 0;
    background: linear-gradient(135deg, #071b3b, #087f8c);
    color: #ffffff;
}

.invoice-popup-header span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.invoice-popup-header h4 {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.invoice-popup-header p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

.invoice-popup-header .btn-close {
    filter: brightness(0) invert(1);
}

.invoice-popup-body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 20px;
}

.invoice-detail-box {
    margin-bottom: 15px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
}

.invoice-detail-box:last-child {
    margin-bottom: 0;
}

.invoice-detail-box h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 17px;
    color: #172033;
    font-size: 14px;
    font-weight: 800;
}

.invoice-detail-box h5 i {
    color: #1769d1;
}

.invoice-detail-box label {
    display: block;
    margin-bottom: 5px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.invoice-detail-box p {
    margin: 0;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.invoice-detail-box .form-control,
.invoice-detail-box .form-select {
    min-height: 42px;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: none;
}

.invoice-payment-table {
    margin: 0;
}

.invoice-payment-table td {
    padding: 11px 10px;
    border-bottom: 1px solid #edf0f5;
    color: #697386;
    font-size: 13px;
}

.invoice-payment-table tr:last-child td {
    border-bottom: 0;
}

.invoice-payment-table td:last-child {
    color: #172033;
    text-align: right;
    font-weight: 700;
}

.invoice-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.invoice-edit-large-btn,
.invoice-print-large-btn,
.invoice-delete-large-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.invoice-edit-large-btn {
    background: #7548c7 !important;
    color: #fff !important;
}

.invoice-print-large-btn {
    background: #159452 !important;
    color: #fff !important;
}

.invoice-delete-large-btn {
    background: #dc4654 !important;
    color: #fff !important;
}

.invoice-edit-large-btn:hover,
.invoice-print-large-btn:hover,
.invoice-delete-large-btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
}


/* Billing-Management-responsive-start */

@media (max-width: 1199px) {

    .billing-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 991px) {

    .billing-management-section {
        padding: 20px;
    }

    .billing-header-left h2 {
        font-size: 24px;
    }

    .all-invoice-section {
        padding: 20px;
    }

}


@media (max-width: 767px) {

    .billing-management-section {
        padding: 15px;
    }


    .billing-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .billing-header-right {
        width: 100%;
    }

    .billing-add-invoice-btn {
        width: 100%;
    }


    .billing-summary-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .billing-stat-card {
        /* min-height: 96px;
        padding: 12px; */
        flex-direction: column;
        align-items: start;
    }

    .billing-stat-content h3 {
        font-size: 16px;
    }

    .billing-stat-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 18px;
    }

    .all-invoice-section {
        padding: 15px;
    }


    .invoice-list-header {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .invoice-search {
        width: 100%;
    }


    /* .invoice-table-wrapper {
        display: none;
    } */

    .invoice-mobile-wrapper {
        display: block;
    }


    .billing-modal-body,
    .invoice-popup-body {
        padding: 12px;
    }

    .billing-card,
    .invoice-detail-box {
        padding: 15px;
    }


    .billing-card-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .billing-add-item-btn {
        width: 100%;
        justify-content: center;
    }


    .billing-summary-table {
        max-width: 100%;
    }


    .billing-modal-header,
    .invoice-popup-header {
        padding: 18px;
    }

    .billing-modal-header h3 {
        font-size: 20px;
    }


    .billing-modal-footer,
    .invoice-popup-footer {
        padding: 12px 15px;
    }

    .billing-close-btn,
    .billing-save-btn {
        flex: 1;
    }


    .invoice-popup-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        justify-content: left;
    }

    .invoice-edit-large-btn,
    .invoice-print-large-btn,
    .invoice-delete-large-btn {
        justify-content: center;
    }

}


@media (max-width: 480px) {

    .billing-header-left h2 {
        font-size: 21px;
    }

    .billing-header-left p {
        font-size: 12px;
    }


    .billing-stat-card {
        min-height: 115px;
        padding: 16px;
    }

    .billing-stat-icon {
        width: 47px;
        height: 47px;
        min-width: 47px;
        font-size: 19px;
    }

    .billing-stat-content h3 {
        font-size: 19px;
    }


    .invoice-mobile-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .invoice-mobile-top .invoice-status {
        align-self: flex-start;
    }


    .billing-modal-footer {
        flex-direction: column-reverse;
    }

    .billing-close-btn,
    .billing-save-btn {
        width: 100%;
    }

}


/* Billing-Management-section-css-end */












/* Stock-Product-Management-section-css-start */

.stock-product-management-section {
    width: 100%;
    /* padding: 25px; */
    background: #f5f8fc;
}


/* Stock-Product-header-start */

.stock-product-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.stock-product-header-left {
    flex: 1;
}

.stock-product-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 50px;
    background: #e9f2ff;
    color: #1769d1;
    font-size: 12px;
    font-weight: 700;
}

.stock-product-header-left h2 {
    margin: 0;
    color: #172033;
    font-size: 28px;
    font-weight: 800;
}

.stock-product-header-left p {
    margin: 7px 0 0;
    color: #7b8497;
    font-size: 14px;
}

.stock-product-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.stock-add-category-btn,
.stock-add-product-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s ease;
}

.stock-add-category-btn {
    background: #7548c7 !important;
    box-shadow: 0 8px 20px rgba(117, 72, 199, 0.18);
}

.stock-add-product-btn {
    background: linear-gradient(135deg, #1769d1, #087f8c);
    box-shadow: 0 8px 20px rgba(23, 105, 209, 0.18);
}

.stock-add-category-btn:hover,
.stock-add-product-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* Stock-Product-summary-cards-start */

.stock-product-summary-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}

.stock-product-stat-card {
    position: relative;
    min-height: 145px;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 23px;
    border-radius: 16px;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(30, 50, 80, 0.10);
}

.stock-product-stat-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -35px;
    bottom: -45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.stock-category-card {
    background: linear-gradient(135deg, #1769d1, #3897ff);
}

.stock-latest-category-card {
    background: linear-gradient(135deg, #7548c7, #a56bea);
}

.stock-product-card {
    background: linear-gradient(135deg, #087f8c, #0db5a5);
}

.stock-last-month-card {
    background: linear-gradient(135deg, #e28b12, #f5b53f);
}

.stock-product-stat-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 22px;
    position: relative;
    z-index: 1;
}

.stock-product-stat-content {
    position: relative;
    z-index: 1;
}

.stock-product-stat-content h6 {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
}

.stock-product-stat-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.stock-product-stat-content p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}


/* Stock-Category-section-start */

.stock-category-section,
.stock-product-section {
    width: 100%;
    margin-bottom: 25px;
    padding: 25px;
    border: 1px solid #e8edf4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(25, 45, 75, 0.05);
}

.stock-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.stock-section-badge {
    display: inline-block;
    margin-bottom: 7px;
    color: #087f8c;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stock-section-header h3 {
    margin: 0;
    color: #172033;
    font-size: 21px;
    font-weight: 800;
}

.stock-section-header p {
    margin: 5px 0 0;
    color: #8790a0;
    font-size: 13px;
}

.stock-search-box {
    width: 280px;
}

.stock-search-box .form-control {
    height: 43px;
    border: 1px solid #e1e7ef;
    border-radius: 9px;
    box-shadow: none;
    font-size: 13px;
}

.stock-search-box .form-control:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}


/* Stock-Category-table-start */

.stock-category-table-wrapper,
.stock-product-table-wrapper {
    width: 100%;
}

.stock-category-table {
    min-width: 850px;
    margin: 0;
    vertical-align: middle;
}

.stock-category-table thead th,
.stock-product-table thead th {
    padding: 14px 12px;
    border-bottom: 1px solid #e5eaf1;
    background: #f7f9fc;
    color: #657083;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.stock-category-table tbody td,
.stock-product-table tbody td {
    padding: 15px 12px;
    border-bottom: 1px solid #edf0f5;
    color: #4f596b;
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}

.stock-category-table tbody tr:last-child td,
.stock-product-table tbody tr:last-child td {
    border-bottom: 0;
}

.stock-category-table tbody td strong,
.stock-product-table tbody td strong {
    color: #172033;
    font-weight: 800;
}

.stock-category-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf3ff;
    color: #1769d1;
    font-size: 17px;
}


/* Stock-Table-actions-start */

.stock-table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    transition: 0.25s ease;
    font-size: 12px;
    font-weight: 700;
}

.stock-action-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.stock-view-btn {
    background: #1769d1;
}

.stock-edit-btn {
    background: #7548c7;
}


/* Stock-Category-mobile-start */

.stock-category-mobile-list,
.stock-product-mobile-list {
    display: none;
}

.stock-mobile-card {
    padding: 17px;
    margin-bottom: 12px;
    border: 1px solid #e8edf4;
    border-radius: 13px;
    background: #ffffff;
}

.stock-mobile-card:last-child {
    margin-bottom: 0;
}

.stock-mobile-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f5;
}

.stock-mobile-card-top span {
    display: block;
    color: #8b95a7;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.stock-mobile-card-top h5 {
    margin: 3px 0 0;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
}

.stock-mobile-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
}

.stock-mobile-info span {
    color: #8b95a7;
    font-size: 11px;
}

.stock-mobile-info strong {
    max-width: 65%;
    color: #344054;
    font-size: 12px;
    text-align: right;
}

.stock-mobile-actions {
    display: flex;
    gap: 8px;
    padding-top: 13px;
    border-top: 1px solid #edf0f5;
}

.stock-mobile-actions .stock-action-btn {
    flex: 1;
    width: auto;
}


/* Stock-Product-table-start */

.stock-product-table {
    min-width: 1050px;
    margin: 0;
    vertical-align: middle;
}

.stock-product-name {
    display: flex;
    align-items: center;
    gap: 11px;
}

.stock-product-image {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf3ff;
    color: #1769d1;
    font-size: 17px;
}

.stock-product-name strong {
    display: block;
}

.stock-product-name span {
    display: block;
    margin-top: 3px;
    color: #8b95a7;
    font-size: 10px;
}

.stock-product-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.stock-status-active {
    background: #e8f8ef;
    color: #159452;
}

.stock-status-low {
    background: #fff2df;
    color: #c97900;
}


/* Stock-Product-mobile-start */

.stock-product-mobile-card {
    padding: 17px;
    margin-bottom: 12px;
    border: 1px solid #e8edf4;
    border-radius: 13px;
    background: #ffffff;
}

.stock-product-mobile-card:last-child {
    margin-bottom: 0;
}

.stock-product-mobile-top {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f5;
}

.stock-product-mobile-top>div:nth-child(2) {
    flex: 1;
}

.stock-product-mobile-top span:first-child {
    display: block;
    color: #8b95a7;
    font-size: 9px;
    font-weight: 700;
}

.stock-product-mobile-top h5 {
    margin: 3px 0 0;
    color: #172033;
    font-size: 14px;
    font-weight: 800;
}

.stock-product-mobile-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px 0;
}

.stock-product-mobile-info div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stock-product-mobile-info span {
    color: #8b95a7;
    font-size: 10px;
}

.stock-product-mobile-info strong {
    color: #344054;
    font-size: 12px;
}


/* Stock-Modal-start */

.stock-modal-dialog {
    max-width: 950px;
}

.stock-modal {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f5f8fc;
    box-shadow: 0 25px 80px rgba(20, 35, 60, 0.2);
}

.stock-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 27px;
    background: linear-gradient(135deg, #071b3b, #087f8c);
    color: #ffffff;
}

.stock-modal-header span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stock-modal-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
}

.stock-modal-header p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.stock-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.stock-modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    padding: 20px;
}


/* Stock-Form-card-start */

.stock-form-card {
    padding: 20px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #ffffff;
}

.stock-form-card label {
    display: block;
    margin-bottom: 7px;
    color: #424c5e;
    font-size: 12px;
    font-weight: 700;
}

.stock-form-card small {
    display: block;
    margin-top: 5px;
    color: #8b95a7;
    font-size: 10px;
}

.stock-form-card .form-control,
.stock-form-card .form-select {
    min-height: 43px;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    color: #344054;
    font-size: 13px;
    box-shadow: none;
}

.stock-form-card textarea.form-control {
    min-height: auto;
}

.stock-form-card .form-control:focus,
.stock-form-card .form-select:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}


/* Stock-Detail-card-start */

.stock-detail-card {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
}

.stock-detail-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3ff;
    color: #1769d1;
    font-size: 22px;
}

.stock-detail-content span {
    display: block;
    margin-bottom: 4px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.stock-detail-content h4 {
    margin: 0;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.stock-detail-box {
    height: 100%;
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 11px;
    background: #ffffff;
}

.stock-detail-box label {
    display: block;
    margin-bottom: 6px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.stock-detail-box p {
    margin: 0;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
}


/* Stock-Product-detail-start */

.stock-product-detail-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 17px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
}

.stock-product-detail-image {
    width: 58px;
    height: 58px;
    min-width: 58px;
    font-size: 22px;
}

.stock-product-detail-top>div:nth-child(2) {
    flex: 1;
}

.stock-product-detail-top>div:nth-child(2)>span:first-child {
    display: block;
    margin-bottom: 3px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
}

.stock-product-detail-top h4 {
    margin: 0 0 7px;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}


/* Stock-Modal-footer-start */

.stock-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e4e9f0;
    background: #ffffff;
}

.stock-cancel-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #dfe5ed;
    border-radius: 8px;
    background: #08586c !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
}

.stock-save-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #159452 !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
}

.stock-save-btn:hover {
    color: #ffffff !important;
    background: #117b44 !important;
}


/* Stock-Product-responsive-start */

@media (max-width: 1199px) {

    .stock-product-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 991px) {

    .stock-product-management-section {
        padding: 20px;
    }

    .stock-product-header-left h2 {
        font-size: 24px;
    }

    .stock-category-section,
    .stock-product-section {
        padding: 20px;
    }

}


@media (max-width: 767px) {

    .stock-product-management-section {
        padding: 15px;
    }


    .stock-product-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .stock-product-header-right {
        width: 100%;
    }

    .stock-add-category-btn,
    .stock-add-product-btn {
        flex: 1;
        width: 100%;
    }


    .stock-product-summary-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stock-product-stat-card {
        min-height: 105px;
        padding: 14px;
        gap: 11px;
        flex-direction: column;
        align-items: start;
    }

    .stock-product-stat-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 17px;
    }

    .stock-product-stat-content h6 {
        font-size: 11px;
    }

    .stock-product-stat-content h3 {
        font-size: 18px;
    }

    .stock-product-stat-content p {
        font-size: 10px;
    }


    .stock-category-section,
    .stock-product-section {
        padding: 15px;
    }


    .stock-section-header {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .stock-search-box {
        width: 100%;
    }


    /* .stock-category-table-wrapper,
    .stock-product-table-wrapper {
        display: none;
    } */

    .stock-category-mobile-list,
    .stock-product-mobile-list {
        display: block;
    }


    .stock-modal-body {
        padding: 12px;
    }

    .stock-form-card,
    .stock-detail-card,
    .stock-detail-box,
    .stock-product-detail-top {
        padding: 15px;
    }


    .stock-modal-header {
        padding: 18px;
    }

    .stock-modal-header h3 {
        font-size: 20px;
    }


    .stock-modal-footer {
        padding: 12px 15px;
    }

    .stock-cancel-btn,
    .stock-save-btn {
        flex: 1;
    }

}


@media (max-width: 480px) {

    .stock-product-header-left h2 {
        font-size: 21px;
    }

    .stock-product-header-left p {
        font-size: 12px;
    }


    /* .stock-product-header-right {
        flex-direction: column;
    } */

    .stock-add-category-btn,
    .stock-add-product-btn {
        flex: unset;
    }


    .stock-product-stat-card {
        min-height: 112px;
        padding: 13px;
    }

    .stock-product-stat-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 16px;
    }

    .stock-product-stat-content h3 {
        font-size: 17px;
    }


    .stock-mobile-card-top {
        align-items: flex-start;
    }

    .stock-product-mobile-top {
        align-items: flex-start;
    }

    .stock-product-mobile-top .stock-product-status {
        margin-left: auto;
    }


    .stock-product-mobile-info {
        gap: 10px;
    }


    .stock-modal-footer {
        flex-direction: column-reverse;
    }

    .stock-cancel-btn,
    .stock-save-btn {
        width: 100%;
    }


    .stock-product-detail-top {
        align-items: flex-start;
    }

}

/* Stock-Delete-button-start */

.stock-delete-btn {
    background: #e2262a !important;
}

.stock-delete-btn:hover {
    background: #c91d21 !important;
}

/* Stock-Delete-button-end */

/* Stock-Product-Management-section-css-end */











/* Services-Management-section-css-start */

.services-management-section {
    width: 100%;
    padding: 0;
    background: #f5f8fc;
}


/* Services-header-start */

.services-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.services-header-left {
    flex: 1;
}

.services-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 50px;
    background: #e9f2ff;
    color: #1769d1;
    font-size: 12px;
    font-weight: 700;
}

.services-header-left h2 {
    margin: 0;
    color: #172033;
    font-size: 28px;
    font-weight: 800;
}

.services-header-left p {
    margin: 7px 0 0;
    color: #7b8497;
    font-size: 14px;
}

.services-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.services-header-btn {
    min-height: 46px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 0;
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.services-header-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.services-add-btn {
    background: linear-gradient(135deg, #1769d1, #087f8c) !important;
    box-shadow: 0 8px 20px rgba(23, 105, 209, 0.18);
}

.services-category-btn {
    background: #7548c7 !important;
    box-shadow: 0 8px 20px rgba(117, 72, 199, 0.18);
}

.services-amc-btn {
    background: linear-gradient(135deg, #e28b12, #f5b53f);
    box-shadow: 0 8px 20px rgba(226, 139, 18, 0.18);
}


/* Services-header-end */


/* Services-summary-cards-start */

.services-summary-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}

.services-stat-card {
    position: relative;
    min-height: 145px;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 23px;
    overflow: hidden;
    border-radius: 16px;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(30, 50, 80, 0.10);
}

.services-stat-card::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    right: -40px;
    bottom: -48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.services-all-service-card {
    background: linear-gradient(135deg, #1769d1, #3897ff);
}

.services-all-category-card {
    background: linear-gradient(135deg, #7548c7, #a56bea);
}

.services-last-service-card {
    background: linear-gradient(135deg, #087f8c, #0db5a5);
}

.services-last-category-card {
    background: linear-gradient(135deg, #e28b12, #f5b53f);
}

.services-stat-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 22px;
}

.services-stat-content {
    position: relative;
    z-index: 1;
}

.services-stat-content h6 {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
}

.services-stat-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
}

.services-stat-content p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
}


/* Services-summary-cards-end */


/* Services-list-section-start */

.services-list-section {
    width: 100%;
    margin-bottom: 25px;
    padding: 25px;
    border: 1px solid #e8edf4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(25, 45, 75, 0.05);
}

.services-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.services-section-badge {
    display: inline-block;
    margin-bottom: 7px;
    color: #087f8c;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.services-section-header h3 {
    margin: 0;
    color: #172033;
    font-size: 21px;
    font-weight: 800;
}

.services-section-header p {
    margin: 5px 0 0;
    color: #8790a0;
    font-size: 13px;
}


/* Services-search-start */

.services-search-box {
    width: 280px;
    position: relative;
}

.services-search-box i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #8b95a7;
    font-size: 12px;
    transform: translateY(-50%);
}

.services-search-box .form-control {
    height: 43px;
    padding-left: 15px;
    border: 1px solid #e1e7ef;
    border-radius: 9px;
    box-shadow: none;
    color: #344054;
    font-size: 13px;
}

.services-search-box .form-control:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}


/* Services-search-end */


/* Services-table-start */

.services-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.services-table {
    min-width: 1050px;
    margin: 0;
    vertical-align: middle;
}

.services-table thead th {
    padding: 14px 12px;
    border-bottom: 1px solid #e5eaf1;
    background: #f7f9fc;
    color: #657083;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.services-table tbody td {
    padding: 15px 12px;
    border-bottom: 1px solid #edf0f5;
    color: #4f596b;
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}

.services-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Services-name-start */

.services-name-wrapper {
    display: flex;
    align-items: center;
    gap: 11px;
}

.services-name-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eaf3ff;
    color: #1769d1;
    font-size: 17px;
}

.services-name-wrapper strong {
    display: block;
    color: #172033;
    font-weight: 800;
}

.services-name-wrapper span {
    display: block;
    max-width: 230px;
    margin-top: 3px;
    overflow: hidden;
    color: #8b95a7;
    font-size: 10px;
    text-overflow: ellipsis;
}


/* Services-name-end */


/* Services-table-badges-start */

.services-sac-code {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f1f5fa;
    color: #526075;
    font-size: 11px;
    font-weight: 700;
}

.services-category-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 50px;
    background: #f0eaff;
    color: #7548c7;
    font-size: 10px;
    font-weight: 800;
}

.services-price {
    color: #172033;
    font-weight: 800;
}

.services-gst-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 50px;
    background: #fff2df;
    color: #c97900;
    font-size: 10px;
    font-weight: 800;
}

.services-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.services-status-active {
    background: #e8f8ef;
    color: #159452;
}

.services-status i {
    font-size: 9px;
}


/* Services-action-buttons-start */

.services-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.services-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 12px;
    transition: 0.25s ease;
}

.services-action-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.services-view-btn {
    background: #1769d1;
}

.services-edit-btn {
    background: #7548c7;
}

.services-delete-btn {
    background: #e2262a;
}

.services-delete-btn:hover {
    background: #c91d21;
}


/* Services-action-buttons-end */


/* Services-list-section-end */


/* Services-modal-start */

.services-modal .modal-dialog {
    max-width: 850px;
}

.services-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f5f8fc;
    box-shadow: 0 25px 80px rgba(20, 35, 60, 0.20);
}


/* Services-modal-header-start */

.services-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 27px;
    background: linear-gradient(135deg, #071b3b, #087f8c);
}

.services-modal-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.services-modal-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 18px;
}

.services-modal-heading span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.services-modal-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.services-modal-heading p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.services-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}


/* Services-modal-header-end */


/* Services-modal-body-start */

.services-modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    padding: 20px;
}

.services-form-card {
    padding: 20px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #ffffff;
}

.services-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.services-form-group {
    width: 100%;
}

.services-full-width {
    grid-column: 1 / -1;
}

.services-form-label {
    display: block;
    margin-bottom: 7px;
    color: #424c5e;
    font-size: 12px;
    font-weight: 700;
}

.services-form-label span {
    color: #e2262a;
}

.services-input-wrapper,
.services-textarea-wrapper {
    position: relative;
    width: 100%;
}

.services-input-wrapper>i,
.services-textarea-wrapper>i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #1769d1;
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
}

.services-textarea-wrapper>i {
    top: 17px;
    transform: none;
}

.services-form-control {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 15px;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-size: 13px;
    box-shadow: none;
    transition: 0.25s ease;
}

.services-form-control:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}

.services-form-control::placeholder {
    color: #a0a8b6;
}

.services-form-control[type="number"] {
    appearance: textfield;
}

.services-form-control[type="number"]::-webkit-inner-spin-button,
.services-form-control[type="number"]::-webkit-outer-spin-button {
    margin: 0;
}

select.services-form-control {
    cursor: pointer;
}

.services-textarea {
    min-height: 125px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}

.services-textarea-wrapper .services-textarea {
    padding-left: 15px;
}


/* Services-view-start */

.services-view-profile {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 17px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 13px;
    background: #ffffff;
}

.services-view-profile>div:nth-child(2) {
    flex: 1;
}

.services-view-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3ff;
    color: #1769d1;
    font-size: 21px;
}

.services-view-profile span:not(.services-status) {
    display: block;
    margin-bottom: 3px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.services-view-profile h4 {
    margin: 0;
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.services-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.services-view-detail,
.services-view-description-box {
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 11px;
    background: #ffffff;
}

.services-view-detail span,
.services-view-description-box span {
    display: block;
    margin-bottom: 6px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.services-view-detail strong {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.services-view-description-box {
    grid-column: 1 / -1;
}

.services-view-description-box p {
    margin: 0;
    color: #344054;
    font-size: 13px;
    line-height: 1.7;
}


/* Services-modal-footer-start */

.services-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e4e9f0;
    background: #ffffff;
    width: 100%;
}

.services-modal-cancel,
.services-modal-submit {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
}

.services-modal-cancel {
    border: 0;
    background: #08586c !important;
}

.services-modal-submit {
    border: 0;
    background: #159452 !important;
}

.services-modal-submit:hover {
    color: #ffffff !important;
    background: #117b44 !important;
}


/* Services-modal-footer-end */


/* Services-responsive-start */

@media (max-width: 1199px) {

    .services-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 991px) {

    .services-header-left h2 {
        font-size: 24px;
    }

    .services-header-right {
        flex-wrap: wrap;
    }

    .services-header-btn {
        padding: 0 13px;
    }

    .services-list-section {
        padding: 20px;
    }

}


@media (max-width: 767px) {

    .services-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .services-header-right {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .services-header-btn {
        width: 100%;
        min-height: 44px;
        padding: 0 8px;
        font-size: 10px;
    }

    .services-header-btn i {
        font-size: 11px;
    }

    .services-summary-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .services-stat-card {
        min-height: 110px;
        padding: 14px;
        gap: 11px;
        flex-direction: column;
        align-items: flex-start;
    }

    .services-stat-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        font-size: 17px;
    }

    .services-stat-content h6 {
        font-size: 10px;
    }

    .services-stat-content h3 {
        font-size: 18px;
    }

    .services-stat-content p {
        font-size: 9px;
    }

    .services-list-section {
        padding: 15px;
    }

    .services-section-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .services-search-box {
        width: 100%;
    }

    .services-modal-body {
        padding: 12px;
    }

    .services-form-card {
        padding: 15px;
    }

    .services-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .services-full-width {
        grid-column: auto;
    }

    .services-modal-header {
        padding: 18px;
    }

    .services-modal-heading h3 {
        font-size: 19px;
    }

    .services-modal-footer {
        padding: 12px 15px;
    }

}


@media (max-width: 575px) {

    .services-header-left h2 {
        font-size: 21px;
    }

    .services-header-left p {
        font-size: 12px;
    }

    .services-header-right {
        grid-template-columns: 1fr;
    }

    .services-header-btn {
        min-height: 43px;
        font-size: 11px;
    }

    .services-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-stat-card {
        min-height: 118px;
        padding: 13px;
    }

    .services-stat-icon {
        width: 41px;
        height: 41px;
        min-width: 41px;
    }

    .services-stat-content h6 {
        font-size: 12px;
        line-height: 1.3;
    }

    .services-stat-content h3 {
        font-size: 20px;
    }

    .services-stat-content p {
        font-size: 9px;
        line-height: 1.4;
    }

    .services-modal-heading {
        gap: 9px;
    }

    .services-modal-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 16px;
    }

    .services-modal-heading h3 {
        font-size: 17px;
    }

    .services-modal-heading p {
        font-size: 10px;
    }

    .services-view-profile {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .services-view-profile .services-status {
        margin-left: auto;
    }

    .services-view-grid {
        grid-template-columns: 1fr;
    }

    .services-view-description-box {
        grid-column: auto;
    }

    .services-modal-footer {
        flex-direction: column-reverse;
    }

    .services-modal-cancel,
    .services-modal-submit {
        width: 100%;
    }

}


/* Services-responsive-end */


/* Services-Management-section-css-end */













/* Services-category-management-section-css-start */

.services-category-management-section {
    width: 100%;
    padding: 0;
    background: #f5f8fc;
}


/* Services-category-header-start */

.services-category-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.services-category-header-left {
    flex: 1;
}

.services-category-header-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 50px;
    background: #e9f2ff;
    color: #1769d1;
    font-size: 12px;
    font-weight: 700;
}

.services-category-header-left h2 {
    margin: 0;
    color: #172033;
    font-size: 28px;
    font-weight: 800;
}

.services-category-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.services-category-header-btn {
    min-height: 46px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.services-category-header-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.services-category-add-btn {
    background: linear-gradient(135deg, #1769d1, #087f8c) !important;
    box-shadow: 0 8px 20px rgba(23, 105, 209, 0.18);
}

.services-category-back-btn {
    background: #7548c7 !important;
    box-shadow: 0 8px 20px rgba(117, 72, 199, 0.18);
}


/* Services-category-header-end */


/* Services-category-list-section-start */

.services-category-list-section {
    width: 100%;
    margin-bottom: 25px;
    padding: 25px;
    border: 1px solid #e8edf4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(25, 45, 75, 0.05);
}

.services-category-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.services-category-section-badge {
    display: inline-block;
    margin-bottom: 7px;
    color: #087f8c;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.services-category-section-header h3 {
    margin: 0;
    color: #172033;
    font-size: 21px;
    font-weight: 800;
}

.services-category-section-header p {
    margin: 5px 0 0;
    color: #8790a0;
    font-size: 13px;
}


/* Services-category-search-start */

.services-category-search-box {
    width: 280px;
    position: relative;
}

.services-category-search-box .form-control {
    height: 43px;
    padding: 0 15px;
    border: 1px solid #e1e7ef;
    border-radius: 9px;
    outline: none;
    box-shadow: none;
    color: #344054;
    font-size: 13px;
}

.services-category-search-box .form-control:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}


/* Services-category-search-end */


/* Services-category-table-start */

.services-category-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.services-category-table {
    min-width: 950px;
    margin: 0;
    vertical-align: middle;
}

.services-category-table thead th {
    padding: 14px 12px;
    border-bottom: 1px solid #e5eaf1;
    background: #f7f9fc;
    color: #657083;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.services-category-table tbody td {
    padding: 15px 12px;
    border-bottom: 1px solid #edf0f5;
    color: #4f596b;
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}

.services-category-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Services-category-number-start */

.services-category-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eef4fb;
    color: #526075;
    font-size: 11px;
    font-weight: 800;
}


/* Services-category-number-end */


/* Services-category-name-start */

.services-category-name {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}


/* Services-category-name-end */


/* Services-category-description-start */

.services-category-description {
    color: #8b95a7;
    font-size: 12px;
}


/* Services-category-description-end */


/* Services-category-count-start */

.services-category-service-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 5px 9px;
    border-radius: 7px;
    background: #eaf3ff;
    color: #1769d1;
    font-size: 11px;
    font-weight: 800;
}


/* Services-category-count-end */


/* Services-category-status-start */

.services-category-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.services-category-status-active {
    background: #e8f8ef;
    color: #159452;
}


/* Services-category-status-end */


/* Services-category-action-buttons-start */

.services-category-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.services-category-action-btn {
    min-width: 52px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 700;
    transition: 0.25s ease;
}

.services-category-action-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.services-category-view-btn {
    background: #1769d1;
}

.services-category-edit-btn {
    background: #7548c7;
}

.services-category-delete-btn {
    background: #e2262a;
}

.services-category-delete-btn:hover {
    background: #c91d21;
}



/* Services-category-modal-start */

.services-category-modal .modal-dialog {
    max-width: 750px;
}

.services-category-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f5f8fc;
    box-shadow: 0 25px 80px rgba(20, 35, 60, 0.20);
}


/* Services-category-modal-header-start */

.services-category-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 27px;
    background: linear-gradient(135deg, #071b3b, #087f8c);
}

.services-category-modal-heading span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.services-category-modal-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.services-category-modal-heading p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.services-category-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}



/* Services-category-modal-body-start */

.services-category-modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    padding: 20px;
}

.services-category-form-card {
    padding: 20px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #ffffff;
}

.services-category-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.services-category-form-group {
    width: 100%;
}

.services-category-full-width {
    grid-column: 1 / -1;
}

.services-category-form-label {
    display: block;
    margin-bottom: 7px;
    color: #424c5e;
    font-size: 12px;
    font-weight: 700;
}

.services-category-form-label span {
    color: #e2262a;
}

.services-category-form-control {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-size: 13px;
    box-shadow: none;
    transition: 0.25s ease;
}

.services-category-form-control:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}

.services-category-form-control::placeholder {
    color: #a0a8b6;
}

select.services-category-form-control {
    cursor: pointer;
}

.services-category-textarea {
    min-height: 125px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}


/* Services-category-view-start */

.services-category-view-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 13px;
    background: #ffffff;
}

.services-category-view-profile span:first-child {
    display: block;
    margin-bottom: 3px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.services-category-view-profile h4 {
    margin: 0;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.services-category-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.services-category-view-detail {
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 11px;
    background: #ffffff;
}

.services-category-view-detail span {
    display: block;
    margin-bottom: 6px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.services-category-view-detail strong {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.services-category-view-detail p {
    margin: 0;
    color: #344054;
    font-size: 13px;
    line-height: 1.7;
}

.services-category-description-detail {
    grid-column: 1 / -1;
}

.services-category-view-active {
    color: #159452 !important;
}


/* Services-category-modal-footer-start */

.services-category-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e4e9f0;
    background: #ffffff;
}

.services-category-modal-cancel,
.services-category-modal-submit {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
}

.services-category-modal-cancel {
    border: 0;
    background: #08586c !important;
}

.services-category-modal-submit {
    border: 0;
    background: #159452 !important;
}

.services-category-modal-submit:hover {
    color: #ffffff !important;
    background: #117b44 !important;
}


/* Services-category-modal-footer-end */


/* Services-category-modal-end */


/* Services-category-responsive-start */

@media (max-width: 991px) {

    .services-category-header-left h2 {
        font-size: 24px;
    }

    .services-category-header-right {
        flex-wrap: wrap;
    }

    .services-category-list-section {
        padding: 20px;
    }

}


@media (max-width: 767px) {

    .services-category-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .services-category-header-right {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .services-category-header-btn {
        width: 100%;
        min-height: 44px;
        padding: 0 8px;
        font-size: 10px;
    }

    .services-category-list-section {
        padding: 15px;
    }

    .services-category-section-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .services-category-search-box {
        width: 100%;
    }

    .services-category-modal-body {
        padding: 12px;
    }

    .services-category-form-card {
        padding: 15px;
    }

    .services-category-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .services-category-full-width {
        grid-column: auto;
    }

    .services-category-modal-header {
        padding: 18px;
    }

    .services-category-modal-heading h3 {
        font-size: 19px;
    }

}


@media (max-width: 575px) {

    .services-category-header-left h2 {
        font-size: 21px;
    }

    .services-category-header-right {
        grid-template-columns: 1fr;
    }

    .services-category-header-btn {
        min-height: 43px;
        font-size: 11px;
    }

    .services-category-modal-heading h3 {
        font-size: 17px;
    }

    .services-category-modal-heading p {
        font-size: 10px;
    }

    .services-category-view-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-category-view-grid {
        grid-template-columns: 1fr;
    }

    .services-category-description-detail {
        grid-column: auto;
    }

    .services-category-modal-footer {
        flex-direction: column-reverse;
    }

    .services-category-modal-cancel,
    .services-category-modal-submit {
        width: 100%;
    }

}


/* Services-category-responsive-end */


/* Services-category-management-section-css-end */










/* Services-amc-management-section-css-start */

.services-amc-management-section {
    width: 100%;
    padding: 0;
    background: #f5f8fc;
}


/* Services-amc-header-start */

.services-amc-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.services-amc-header-left {
    flex: 1;
}

.services-amc-header-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 50px;
    background: #e9f2ff;
    color: #1769d1;
    font-size: 12px;
    font-weight: 700;
}

.services-amc-header-left h2 {
    margin: 0;
    color: #172033;
    font-size: 28px;
    font-weight: 800;
}

.services-amc-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.services-amc-header-btn {
    min-height: 46px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.services-amc-header-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.services-amc-add-btn {
    background: linear-gradient(135deg, #1769d1, #087f8c) !important;
    box-shadow: 0 8px 20px rgba(23, 105, 209, 0.18);
}

.services-amc-back-btn {
    background: #7548c7 !important;
    box-shadow: 0 8px 20px rgba(117, 72, 199, 0.18);
}


/* Services-amc-header-end */


/* Services-amc-summary-section-start */

.services-amc-summary-section {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 25px;
}

.services-amc-summary-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 125px;
    padding: 22px;
    overflow: hidden;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e7ebf2;
    box-shadow: 0 8px 25px rgba(25, 45, 75, 0.05);
    transition: 0.3s ease;
}

.services-amc-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(25, 45, 75, 0.09);
}

.services-amc-summary-card::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -35px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.08;
}

.services-amc-total-card::after {
    background: #1769d1;
}

.services-amc-active-card::after {
    background: #159452;
}

.services-amc-expired-card::after {
    background: #e2262a;
}

.services-amc-expiring-card::after {
    background: #f39c12;
}

.services-amc-summary-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
}

.services-amc-summary-icon svg {
    width: 24px;
    height: 24px;
}

.services-amc-total-card .services-amc-summary-icon {
    background: #eaf3ff;
    color: #1769d1;
}

.services-amc-active-card .services-amc-summary-icon {
    background: #e8f8ef;
    color: #159452;
}

.services-amc-expired-card .services-amc-summary-icon {
    background: #fff0f0;
    color: #e2262a;
}

.services-amc-expiring-card .services-amc-summary-icon {
    background: #fff6e6;
    color: #e08a00;
}

.services-amc-summary-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.services-amc-summary-content span {
    color: #7c8798;
    font-size: 12px;
    font-weight: 700;
}

.services-amc-summary-content strong {
    color: #172033;
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
}


/* Services-amc-summary-section-end */


/* Services-amc-list-section-start */

.services-amc-list-section {
    width: 100%;
    margin-bottom: 25px;
    padding: 25px;
    border: 1px solid #e8edf4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(25, 45, 75, 0.05);
}

.services-amc-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.services-amc-list-badge {
    display: inline-block;
    margin-bottom: 7px;
    color: #087f8c;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.services-amc-list-header h3 {
    margin: 0;
    color: #172033;
    font-size: 21px;
    font-weight: 800;
}

.services-amc-list-header p {
    margin: 5px 0 0;
    color: #8790a0;
    font-size: 13px;
}


/* Services-amc-search-start */

.services-amc-search-box {
    width: 280px;
    position: relative;
}

.services-amc-search-box .form-control {
    height: 43px;
    padding: 0 15px;
    border: 1px solid #e1e7ef;
    border-radius: 9px;
    outline: none;
    box-shadow: none;
    color: #344054;
    font-size: 13px;
}

.services-amc-search-box .form-control:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}


/* Services-amc-search-end */


/* Services-amc-table-start */

.services-amc-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.services-amc-table {
    min-width: 1200px;
    margin: 0;
    vertical-align: middle;
}

.services-amc-table thead th {
    padding: 14px 12px;
    border-bottom: 1px solid #e5eaf1;
    background: #f7f9fc;
    color: #657083;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.services-amc-table tbody td {
    padding: 15px 12px;
    border-bottom: 1px solid #edf0f5;
    color: #4f596b;
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}

.services-amc-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Services-amc-number-start */

.services-amc-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eef4fb;
    color: #526075;
    font-size: 11px;
    font-weight: 800;
}


/* Services-amc-number-end */


/* Services-amc-number-id-start */

.services-amc-number-id {
    color: #1769d1;
    font-size: 12px;
    font-weight: 800;
}


/* Services-amc-number-id-end */


/* Services-amc-customer-start */

.services-amc-customer {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}

.services-amc-contract {
    color: #526075;
    font-size: 12px;
    font-weight: 600;
}

.services-amc-date {
    color: #667085;
    font-size: 12px;
}

.services-amc-amount {
    color: #172033;
    font-size: 12px;
    font-weight: 800;
}


/* Services-amc-customer-end */


/* Services-amc-status-start */

.services-amc-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.services-amc-status-active {
    background: #e8f8ef;
    color: #159452;
}

.services-amc-status-expired {
    background: #fff0f0;
    color: #e2262a;
}

.services-amc-status-inactive {
    background: #eef1f5;
    color: #687386;
}

.services-amc-status-cancelled {
    background: #fff2e7;
    color: #d96a00;
}


/* Services-amc-status-end */


/* Services-amc-action-buttons-start */

.services-amc-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.services-amc-action-btn {
    min-width: 52px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 700;
    transition: 0.25s ease;
}

.services-amc-action-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
}

.services-amc-view-btn {
    background: #1769d1;
}

.services-amc-edit-btn {
    background: #7548c7;
}

.services-amc-delete-btn {
    background: #e2262a;
}

.services-amc-delete-btn:hover {
    background: #c91d21;
}


/* Services-amc-action-buttons-end */


/* Services-amc-list-section-end */


/* Services-amc-modal-start */

.services-amc-modal .modal-dialog {
    max-width: 950px;
}

.services-amc-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f5f8fc;
    box-shadow: 0 25px 80px rgba(20, 35, 60, 0.20);
}


/* Services-amc-modal-header-start */

.services-amc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 27px;
    background: linear-gradient(135deg, #071b3b, #087f8c);
}

.services-amc-modal-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.services-amc-modal-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

.services-amc-modal-icon svg {
    width: 23px;
    height: 23px;
}

.services-amc-modal-heading span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.services-amc-modal-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.services-amc-modal-heading p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.services-amc-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}


/* Services-amc-modal-header-end */


/* Services-amc-modal-body-start */

.services-amc-modal-body {
    max-height: calc(100vh - 205px);
    overflow-y: auto;
    padding: 20px;
}


/* Services-amc-form-section-start */

.services-amc-form-section {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #ffffff;
}

.services-amc-form-section:last-child {
    margin-bottom: 0;
}

.services-amc-form-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.services-amc-form-section-heading::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(180deg, #1769d1, #087f8c);
}

.services-amc-form-section-heading span {
    color: #172033;
    font-size: 15px;
    font-weight: 800;
}

.services-amc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.services-amc-form-group {
    width: 100%;
}

.services-amc-full-width {
    grid-column: 1 / -1;
}

.services-amc-form-label {
    display: block;
    margin-bottom: 7px;
    color: #424c5e;
    font-size: 12px;
    font-weight: 700;
}

.services-amc-form-label span {
    color: #e2262a;
}

.services-amc-form-control {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-size: 13px;
    box-shadow: none;
    transition: 0.25s ease;
}

.services-amc-form-control:focus {
    border-color: #1769d1;
    box-shadow: 0 0 0 3px rgba(23, 105, 209, 0.08);
}

.services-amc-form-control::placeholder {
    color: #a0a8b6;
}

.services-amc-textarea {
    min-height: 110px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}


/* Services-amc-input-action-start */

.services-amc-input-action {
    position: relative;
}

.services-amc-input-action .services-amc-form-control {
    padding-right: 145px;
}

.services-amc-generate-mask {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: #eef4fb;
    color: #1769d1;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
}

.services-amc-generate-mask:hover {
    background: #1769d1;
    color: #ffffff;
}


/* Services-amc-input-action-end */


/* Services-amc-form-section-end */


/* Services-amc-view-profile-start */

.services-amc-view-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: #ffffff;
}

.services-amc-view-profile-info span {
    display: block;
    margin-bottom: 5px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.services-amc-view-profile-info h4 {
    margin: 0;
    color: #172033;
    font-size: 19px;
    font-weight: 800;
}

.services-amc-view-profile-info p {
    margin: 5px 0 0;
    color: #7c8798;
    font-size: 12px;
}

.services-amc-view-profile-right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
}

.services-amc-view-profile-right strong {
    color: #172033;
    font-size: 20px;
    font-weight: 800;
}


/* Services-amc-view-profile-end */


/* Services-amc-view-grid-start */

.services-amc-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.services-amc-view-detail {
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 11px;
    background: #ffffff;
}

.services-amc-view-detail span {
    display: block;
    margin-bottom: 6px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.services-amc-view-detail strong {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.services-amc-view-detail p {
    margin: 0;
    color: #344054;
    font-size: 13px;
    line-height: 1.7;
}

.services-amc-view-amount {
    color: #1769d1 !important;
}

.services-amc-view-active {
    color: #159452 !important;
}


/* Services-amc-view-grid-end */


/* Services-amc-modal-footer-start */

.services-amc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #e4e9f0;
    background: #ffffff;
}

.services-amc-modal-cancel,
.services-amc-modal-submit {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
}

.services-amc-modal-cancel {
    border: 0;
    background: #08586c !important;
}

.services-amc-modal-submit {
    border: 0;
    background: #159452 !important;
}

.services-amc-modal-submit:hover {
    color: #ffffff !important;
    background: #117b44 !important;
}


/* Services-amc-modal-footer-end */


/* Services-amc-modal-end */


/* Services-amc-responsive-start */

@media (max-width: 1199px) {

    .services-amc-summary-section {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 991px) {

    .services-amc-header-left h2 {
        font-size: 24px;
    }

    .services-amc-header-right {
        flex-wrap: wrap;
    }

    .services-amc-list-section {
        padding: 20px;
    }

}

@media (max-width: 767px) {

    .services-amc-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .services-amc-header-right {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .services-amc-header-btn {
        width: 100%;
        min-height: 44px;
        padding: 0 8px;
        font-size: 10px;
    }

    .services-amc-summary-section {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .services-amc-summary-card {
        min-height: 105px;
        padding: 15px;
        gap: 10px;
    }

    .services-amc-summary-icon {
        width: 43px;
        height: 43px;
    }

    .services-amc-summary-icon svg {
        width: 20px;
        height: 20px;
    }

    .services-amc-summary-content strong {
        font-size: 23px;
    }

    .services-amc-summary-content span {
        font-size: 10px;
    }

    .services-amc-list-section {
        padding: 15px;
    }

    .services-amc-list-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .services-amc-search-box {
        width: 100%;
    }

    .services-amc-modal-body {
        padding: 12px;
    }

    .services-amc-form-section {
        padding: 15px;
    }

    .services-amc-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .services-amc-full-width {
        grid-column: auto;
    }

    .services-amc-modal-header {
        padding: 18px;
    }

    .services-amc-modal-heading h3 {
        font-size: 19px;
    }

}

@media (max-width: 575px) {

    .services-amc-header-left h2 {
        font-size: 21px;
    }

    .services-amc-header-right {
        grid-template-columns: 1fr;
    }

    .services-amc-header-btn {
        min-height: 43px;
        font-size: 11px;
    }

    .services-amc-summary-section {
        grid-template-columns: 1fr;
    }

    .services-amc-summary-card {
        min-height: 95px;
    }

    .services-amc-modal-heading {
        align-items: flex-start;
    }

    .services-amc-modal-icon {
        width: 40px;
        height: 40px;
    }

    .services-amc-modal-heading h3 {
        font-size: 17px;
    }

    .services-amc-modal-heading p {
        font-size: 10px;
    }

    .services-amc-input-action .services-amc-form-control {
        padding-right: 14px;
    }

    .services-amc-generate-mask {
        position: static;
        transform: none;
        margin-top: 7px;
        height: 36px;
    }

    .services-amc-view-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-amc-view-profile-right {
        align-items: flex-start;
    }

    .services-amc-view-grid {
        grid-template-columns: 1fr;
    }

    .services-amc-full-width {
        grid-column: auto;
    }

    .services-amc-modal-footer {
        flex-direction: column-reverse;
    }

    .services-amc-modal-cancel,
    .services-amc-modal-submit {
        width: 100%;
    }

}


/* Services-amc-responsive-end */


/* Services-amc-management-section-css-end */







/* Settings-section-css-start */

.settings-section {
    width: 100%;
    background: #f5f8fc;
}

.settings-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Settings-header-start */

.settings-header {
    width: 100%;
    margin-bottom: 10px;
}

.settings-header-content {
    width: 100%;
}

.settings-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    margin-bottom: 10px;
    border-radius: 30px;
    background: rgba(8, 127, 140, 0.10);
    color: #087f8c;
    font-size: 13px;
    font-weight: 700;
}

.settings-header h2 {
    margin: 0 0 7px;
    color: #071b3b;
    font-size: 24px;
    font-weight: 800;
}

.settings-header p {
    margin: 0;
    color: #697586;
    font-size: 14px;
}

/* Settings-card-start */

.settings-card {
    width: 100%;
    margin-bottom: 25px;
    overflow: hidden;
    border: 1px solid #e5eaf0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(7, 27, 59, 0.05);
}

.settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 25px;
    border-bottom: 1px solid #edf0f4;
}

.settings-card-header>div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.settings-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, #071b3b, #087f8c);
    color: #ffffff;
    font-size: 18px;
}

.settings-card-header h3 {
    margin: 0 0 4px;
    color: #071b3b;
    font-size: 18px;
    font-weight: 800;
}

.settings-card-header p {
    margin: 0;
    color: #7a8494;
    font-size: 13px;
}

.settings-card-body {
    padding: 25px;
}

/* Settings-section-block-start */

.settings-section-block {
    width: 100%;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #edf0f4;
}

.settings-section-block:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.settings-section-title {
    margin-bottom: 18px;
}

.settings-section-title h4 {
    margin: 0 0 5px;
    color: #071b3b;
    font-size: 16px;
    font-weight: 800;
}

.settings-section-title p {
    margin: 0;
    color: #7b8493;
    font-size: 13px;
}

/* Settings-logo-start */

.settings-logo-upload {
    display: flex;
    align-items: center;
    gap: 20px;
}

.settings-logo-preview {
    width: 105px;
    height: 105px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e9ef;
    border-radius: 15px;
    background: #f8fafc;
}

.settings-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-logo-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.settings-file-input {
    display: none;
}

.settings-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 17px;
    border-radius: 9px;
    background: #071b3b;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}

.settings-upload-btn:hover {
    background: #087f8c;
    color: #ffffff;
    transform: translateY(-2px);
}

.settings-upload-info {
    color: #929baa;
    font-size: 11px;
}

/* Settings-form-start */

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.settings-form-group {
    width: 100%;
}

.settings-form-label {
    display: block;
    margin-bottom: 8px;
    color: #293548;
    font-size: 13px;
    font-weight: 700;
}

.settings-form-label span {
    color: #e2262a;
}

.settings-form-control {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #263246;
    font-size: 13px;
    transition: 0.3s ease;
}

.settings-form-control:focus {
    border-color: #087f8c;
    box-shadow: 0 0 0 3px rgba(8, 127, 140, 0.09);
}

.settings-textarea {
    height: auto;
    resize: vertical;
    padding-top: 13px;
}

/* Settings-currency-start */

.settings-currency-wrapper {
    position: relative;
}

.settings-currency-wrapper .settings-form-control {
    padding-right: 70px;
}

.settings-currency-symbol {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #087f8c;
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
}

.settings-dual-currency {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.settings-dual-currency span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 6px;
    background: #f1f7f8;
    color: #087f8c;
    font-size: 10px;
    font-weight: 700;
}

/* Settings-payment-start */

.settings-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.settings-qr-upload {
    display: flex;
    align-items: center;
    gap: 18px;
}

.settings-qr-preview {
    width: 105px;
    height: 105px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border: 1px solid #e4e9ef;
    border-radius: 12px;
    background: #ffffff;
}

.settings-qr-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.settings-qr-actions {
    display: flex;
    align-items: center;
}

/* Settings-bank-start */

.settings-title-with-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #e1e7ee;
    border-radius: 8px;
    background: #ffffff;
    color: #687588;
    cursor: pointer;
    transition: 0.3s ease;
}

.settings-icon-btn:hover {
    background: #071b3b;
    border-color: #071b3b;
    color: #ffffff;
}

/* Settings-policy-start */

.settings-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.settings-policy-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e5eaf0;
    border-radius: 13px;
    transition: 0.3s ease;
}

.settings-policy-item:hover {
    border-color: #087f8c;
    box-shadow: 0 6px 20px rgba(8, 127, 140, 0.08);
}

.settings-policy-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgb(209, 225, 240);
    color: #1f8fe2;
}

.settings-policy-content {
    flex: 1;
    min-width: 0;
}

.settings-policy-content h5 {
    margin: 0 0 4px;
    color: #071b3b;
    font-size: 13px;
    font-weight: 800;
}

.settings-policy-content p {
    margin: 0;
    color: #858e9d;
    font-size: 11px;
    line-height: 1.5;
}

.settings-policy-btn {
    border: 0;
    background: transparent;
    color: #1f8ee1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

/* Settings-save-start */

.settings-save-area {
    display: flex;
    justify-content: flex-end;
    padding-top: 5px;
}

.settings-save-btn, .settings-add-user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #165a9c, #087f8c);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
}

.settings-save-btn:hover,
.settings-add-user-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(8, 127, 140, 0.20);
}

/* Settings-users-start */

.settings-count {
    color: #087f8c;
}

.settings-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.settings-users-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.settings-users-table th {
    padding: 14px 20px;
    background: #f7f9fb;
    color: #657184;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.settings-users-table td {
    padding: 15px 20px;
    border-top: 1px solid #edf0f4;
    color: #536073;
    font-size: 12px;
    vertical-align: middle;
}

.settings-user-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-user-name strong {
    color: #071b3b;
    font-size: 13px;
}

.settings-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f4f5;
    color: #087f8c;
    font-size: 11px;
    font-weight: 800;
}

.settings-role-badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    background: #edf7f2;
    color: #198754;
    font-size: 10px;
    font-weight: 700;
}

.settings-table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e8ef;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    transition: 0.3s ease;
}

.settings-view-btn {
    color: #087f8c;
}

.settings-edit-btn {
    color: #e09a00;
}

.settings-delete-btn {
    color: #e2262a;
}

.settings-action-btn:hover {
    transform: translateY(-2px);
}

/* Settings-subscription-start */

.settings-subscription-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 25px;
}

.settings-subscription-grid .settings-card {
    margin-bottom: 0;
}

.settings-subscription-body {
    padding: 25px;
}

.settings-plan-name {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.settings-plan-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff4d4;
    color: #d99a00;
    font-size: 20px;
}

.settings-plan-name div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.settings-plan-name span {
    color: #7f8998;
    font-size: 11px;
}

.settings-plan-name strong {
    color: #071b3b;
    font-size: 17px;
}

.settings-plan-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.settings-plan-detail {
    padding: 15px;
    border: 1px solid #e7ebf0;
    border-radius: 10px;
}

.settings-plan-detail span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #808a99;
    font-size: 11px;
}

.settings-plan-detail strong {
    color: #071b3b;
    font-size: 12px;
    line-height: 1.5;
}

.settings-time-remaining {
    color: #087f8c !important;
}

.settings-expiry-warning {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #fff7e2;
    color: #9b7200;
    font-size: 11px;
    font-weight: 600;
}

.settings-help-body {
    padding: 20px 25px 25px;
}

.settings-help-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f4;
    text-decoration: none;
}

.settings-help-item:last-child {
    border-bottom: 0;
}

.settings-help-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf7f8;
    color: #087f8c;
}

.settings-help-item>span:nth-child(2) {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.settings-help-item small {
    color: #8a93a1;
    font-size: 10px;
}

.settings-help-item strong {
    color: #071b3b;
    font-size: 12px;
    word-break: break-word;
}

.settings-help-item>i:last-child {
    color: #9aa3b0;
    font-size: 11px;
}

/* Settings-modal-common-start */

.settings-user-modal {
    z-index: 9999;
}

.settings-user-modal .modal-dialog {
    max-width: 900px;
}

.settings-user-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 25px 70px rgba(7, 27, 59, 0.20);
}

.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid #edf0f4;
    background: #ffffff;
}

.settings-modal-title-area {
    display: flex;
    align-items: center;
    gap: 13px;
}

.settings-modal-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #071b3b, #087f8c);
    color: #ffffff;
}

.settings-modal-title-area h5 {
    margin: 0 0 4px;
    color: #071b3b;
    font-size: 18px;
    font-weight: 800;
}

.settings-modal-title-area p {
    margin: 0;
    color: #7c8695;
    font-size: 12px;
}

.settings-modal-close {
    box-shadow: none !important;
}

.settings-modal-body {
    padding: 25px;
    background: #f8fafc;
}

.settings-modal-section {
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e7ebf0;
    border-radius: 14px;
    background: #ffffff;
}

.settings-modal-section:last-of-type {
    margin-bottom: 0;
}

.settings-modal-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.settings-modal-section-header>span {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #edf7f8;
    color: #087f8c;
}

.settings-modal-section-header h4 {
    margin: 0 0 3px;
    color: #071b3b;
    font-size: 15px;
    font-weight: 800;
}

.settings-modal-section-header p {
    margin: 0;
    color: #8a93a1;
    font-size: 11px;
}

/* Settings-password-start */

.settings-password-wrapper {
    position: relative;
}

.settings-password-wrapper .settings-form-control {
    padding-right: 45px;
}

.settings-password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 34px;
    height: 34px;
    border: 0;
    transform: translateY(-50%);
    background: transparent;
    color: #8b94a2;
    cursor: pointer;
}

/* Settings-mask-start */

.settings-generate-mask-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.settings-generate-mask-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dfe6ed;
    border-radius: 8px;
    background: #ffffff;
    color: #087f8c;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.settings-generate-mask-area>span {
    color: #929aa7;
    font-size: 10px;
}

/* Settings-role-start */

.settings-role-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.settings-role-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.settings-role-option input {
    position: absolute;
    opacity: 0;
}

.settings-role-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e1e7ee;
    border-radius: 10px;
    transition: 0.3s ease;
}

.settings-role-option:hover .settings-role-option-content {
    border-color: #087f8c;
}

.settings-role-option input:checked+.settings-role-option-content {
    border-color: #087f8c;
    background: rgba(8, 127, 140, 0.05);
    box-shadow: 0 0 0 2px rgba(8, 127, 140, 0.08);
}

.settings-role-option-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1f4f7;
    color: #087f8c;
}

.settings-role-option strong {
    display: block;
    margin-bottom: 3px;
    color: #071b3b;
    font-size: 12px;
}

.settings-role-option small {
    color: #8a93a1;
    font-size: 10px;
}

/* Settings-permissions-start */

.settings-permissions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.settings-permission-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
}

.settings-permission-item input {
    position: absolute;
    opacity: 0;
}

.settings-permission-item:hover {
    border-color: #087f8c;
}

.settings-permission-item:has(input:checked) {
    border-color: #087f8c;
    background: rgba(8, 127, 140, 0.04);
}

.settings-permission-check {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6dde5;
    border-radius: 5px;
    color: transparent;
    font-size: 10px;
    transition: 0.3s ease;
}

.settings-permission-item input:checked~.settings-permission-check {
    border-color: #087f8c;
    background: #087f8c;
    color: #ffffff;
}

.settings-permission-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f2f5f8;
    color: #087f8c;
}

.settings-permission-content {
    min-width: 0;
}

.settings-permission-content strong {
    display: block;
    margin-bottom: 3px;
    color: #071b3b;
    font-size: 11px;
}

.settings-permission-content small {
    display: block;
    color: #8b94a2;
    font-size: 9px;
}

/* Settings-modal-footer-start */

.settings-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 5px;
}

.settings-modal-cancel-btn,
.settings-modal-save-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.settings-modal-cancel-btn {
    border: 1px solid #dfe5ec;
    background: #ffffff;
    color: #667386;
}

.settings-modal-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: linear-gradient(135deg, #071b3b, #087f8c);
    color: #ffffff;
}

/* Settings-view-user-start */

.settings-view-user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    background: #ffffff;
}

.settings-view-user-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #071b3b, #087f8c);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.settings-view-user-profile h3 {
    margin: 0 0 5px;
    color: #071b3b;
    font-size: 18px;
    font-weight: 800;
}

.settings-view-user-profile span {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    background: #edf7f2;
    color: #198754;
    font-size: 10px;
    font-weight: 700;
}

.settings-view-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.settings-view-user-detail {
    padding: 15px;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    background: #ffffff;
}

.settings-view-user-detail span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #858e9d;
    font-size: 10px;
    font-weight: 600;
}

.settings-view-user-detail strong {
    display: block;
    color: #071b3b;
    font-size: 12px;
    word-break: break-word;
}

.settings-user-active {
    color: #198754 !important;
}

.settings-view-permissions {
    margin-top: 18px;
}

.settings-view-permissions-title {
    margin: 0 0 10px;
    color: #071b3b;
    font-size: 13px;
    font-weight: 800;
}

.settings-view-permission-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-view-permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #edf7f8;
    color: #087f8c;
    font-size: 10px;
    font-weight: 700;
}

/* Settings-edit-user-start */

.settings-edit-user-modal .modal-dialog {
    max-width: 950px;
}

.settings-edit-user-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #198754;
}

/* Settings-UAE-colours-start */

.settings-card-icon,
.settings-modal-icon,
.settings-view-user-avatar {
    background: linear-gradient(135deg, #071b3b, #087f8c);
}

.settings-card-icon, .settings-modal-icon, .settings-view-user-avatar {
    background: linear-gradient(135deg, #094177, #2290e0);
}

.settings-badge {
    background: rgba(163, 194, 242, 0.32);
    color: #1f8ee0;
}

.settings-upload-btn {
    background: #071b3b;
}

.settings-upload-btn:hover {
    background: #087f8c;
}

.settings-form-control:focus {
    border-color: #087f8c;
    box-shadow: 0 0 0 3px rgba(8, 127, 140, 0.09);
}

.settings-time-remaining {
    color: #087f8c !important;
}

/* Settings-responsive-start */

@media (max-width: 1199px) {
    .settings-policy-grid {
        grid-template-columns: 1fr 1fr;
    }

    .settings-subscription-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .settings-payment-grid {
        grid-template-columns: 1fr;
    }

    .settings-plan-details {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .settings-section {
        padding: 5px 0 40px;
    }

    .settings-container {
        padding: 0 0px;
    }

    .settings-badge {
        gap: 5px;
        padding: 3px 8px;
        margin-bottom: 5px;
        font-size: 12px;
    }

    .settings-header h2 {
        font-size: 20px;
        margin-bottom: 0px;
    }

    .settings-card-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .settings-card-body {
        padding: 18px;
    }

    .settings-form-grid {
        grid-template-columns: 1fr;
    }

    .settings-policy-grid {
        grid-template-columns: 1fr;
    }

    .settings-save-area {
        justify-content: stretch;
    }

    .settings-save-btn {
        width: 100%;
    }

    .settings-add-user-btn {
        width: 100%;
    }

    .settings-plan-details {
        grid-template-columns: 1fr;
    }

    .settings-modal-body {
        padding: 15px;
    }

    .settings-modal-section {
        padding: 15px;
    }

    .settings-role-selection {
        grid-template-columns: 1fr;
    }

    .settings-permissions-grid {
        grid-template-columns: 1fr;
    }

    .settings-modal-footer {
        flex-direction: column-reverse;
    }

    .settings-modal-cancel-btn,
    .settings-modal-save-btn {
        width: 100%;
    }

    .settings-view-user-grid {
        grid-template-columns: 1fr;
    }

    .settings-view-user-profile {
        padding: 15px;
    }

    .settings-view-user-avatar {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }
}

@media (max-width: 575px) {
    .settings-logo-upload {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-logo-preview {
        width: 90px;
        height: 90px;
    }

    .settings-qr-upload {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-qr-preview {
        width: 100px;
        height: 100px;
    }

    .settings-policy-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .settings-policy-btn {
        width: 100%;
        padding-left: 53px;
        text-align: left;
    }

    .settings-generate-mask-area {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-help-item strong {
        font-size: 11px;
    }

    .settings-view-user-profile {
        align-items: flex-start;
    }

    .settings-view-user-profile h3 {
        font-size: 15px;
    }

    .settings-view-user-detail {
        padding: 13px;
    }
}

/* Settings-section-css-end */







/* Hr-Management-section-css-start */

.hr-management-section {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    margin-bottom: 25px;
}

.hr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.hr-header-left h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.hr-header-left p {
    margin: 6px 0 0;
    font-size: 14px;
    color: #000;
}

.hr-header-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hr-header-right .btn {
    height: 45px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/*=========================================
HR MODAL
=========================================*/

.hr-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.hr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #0d6efd;
    color: #fff;
}

.hr-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.hr-modal-header span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    opacity: .9;
}

.hr-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.hr-modal-body {
    padding: 20px;
    background: #f8fafc;
}

.hr-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.hr-modal-footer .btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/*=========================================
HR CARD
=========================================*/

.hr-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.hr-card:last-child {
    margin-bottom: 0;
}

.hr-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #1d2939;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

/*=========================================
FORM
=========================================*/

.hr-card label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
}

.hr-card label span {
    color: #dc2626;
}

.hr-card .row>[class*="col-"] {
    margin-bottom: 18px;
}

.hr-card .form-control,
.hr-card .form-select {
    height: 46px;
    border-radius: 8px;
    border: 1px solid #d0d5dd;
    font-size: 14px;
    box-shadow: none;
}

.hr-card .form-control:focus,
.hr-card .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .12);
}

.hr-card textarea.form-control {
    height: auto;
    resize: none;
    padding-top: 12px;
}

.hr-card .input-group-text {
    border-radius: 8px 0 0 8px;
}

/*=========================================
SALARY TABLE
=========================================*/

.hr-card table {
    margin: 0;
}

.hr-card table td,
.hr-card table th {
    padding: 12px 15px;
    font-size: 14px;
    vertical-align: middle;
}

.hr-card table td:last-child,
.hr-card table th:last-child {
    font-weight: 700;
    color: #0d6efd;
    text-align: right;
}

.hr-card table .table-primary th {
    color: #fff;
}


.hr-card .table-responsive table {
    width: 100%;
    border-collapse: collapse;
    min-width: 630px;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .hr-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hr-header-right {
        width: 100%;
        justify-content: left;
        align-items: center;
        gap: 10px;
    }

    .hr-header-right .btn {
        flex: 1;
        justify-content: center;
        height: 50px;
        padding: 0 5px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }


}

@media(max-width:767px) {

    .hr-management-section {
        padding: 18px;
    }

    .hr-header-left h3 {
        font-size: 22px;
    }

    .hr-header-left p {
        font-size: 14px;
    }

    .hr-modal-header {
        padding: 16px;
    }

    .hr-modal-header h3 {
        font-size: 16px;
    }

    .hr-modal-header span {
        font-size: 11px;
    }

    .hr-modal-body {
        padding: 15px;
    }

    .hr-modal-footer {
        padding: 15px;
    }

    .hr-card {
        padding: 15px;
        margin-bottom: 15px;
    }

    .hr-card-title {
        font-size: 14px;
        margin-bottom: 5px;
    }

}

@media(max-width:575px) {

    /* .hr-header-right {
        flex-direction: column;
    } */

    .hr-header-right .btn {
        width: 100%;
    }

    .hr-modal-footer {
        flex-direction: column;
    }

    .hr-modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .hr-card .row>[class*="col-"] {
        margin-bottom: 15px;
    }

    .hr-card label {
        font-size: 12px;
    }

    .hr-card .form-control,
    .hr-card .form-select {
        height: 42px;
        font-size: 13px;
    }

    .hr-card table td,
    .hr-card table th {
        padding: 10px;
        font-size: 13px;
    }

}


/*=========================================
HR SUMMARY CARDS
=========================================*/

.hr-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 25px 0;
}

.hr-summary-card {
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    overflow: hidden;
    position: relative;
}

.hr-summary-card::before {
    content: "";
    position: absolute;
    top: -25px;
    right: -25px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.hr-summary-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.total-card {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.active-card {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.department-card {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.salary-card {
    background: linear-gradient(135deg, #9333ea, #7e22ce);
}

.hr-summary-content {
    flex: 1;
}

.hr-summary-content h6 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
    line-height: 1.3;
}

.hr-summary-content h3 {
    margin: 4px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.hr-summary-content p {
    margin: 0;
    font-size: 11px;
    opacity: .9;
    line-height: 1.4;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .hr-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:575px) {

    .hr-summary-cards {
        gap: 12px;
    }

    .hr-summary-card {
        padding: 8px 5px;
        gap: 7px;
    }

    .hr-summary-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .hr-summary-content h6 {
        font-size: 10px;
    }

    .hr-summary-content h3 {
        font-size: 13px;
    }

    .hr-summary-content p {
        font-size: 9px;
    }

}


/* HR HEADER */
.hr-management-section {
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    margin-bottom: 25px;
}

.hr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.hr-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #014bab;
}

.hr-header p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #000;
}

.hr-header-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hr-header-btns .btn {
    height: 44px;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SUMMARY CARDS */
.hr-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 25px 0;
}

/* .hr-card {
    padding: 18px;
    border-radius: 14px;
    color: #fff;
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 95px;
} */

.hr-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .2);
}

.hr-card h6 {
    margin: 0;
    font-size: 12px;
}

.hr-card h3 {
    margin: 3px 0;
    font-size: 20px;
}

.hr-card p {
    margin: 0;
    font-size: 11px;
    opacity: .9;
}

.employee-card {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.active-card {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.department-card {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.salary-card {
    background: linear-gradient(135deg, #9333ea, #7e22ce);
}

/* RESPONSIVE */
@media(max-width:991px) {
    .hr-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:575px) {
    .hr-management-section {
        padding: 15px;
    }

    .hr-card {
        padding: 12px;
        min-height: 80px;
    }

    .hr-card h3 {
        font-size: 16px;
    }

    .hr-card p, .hr-card h6 {
        font-size: 11px;
    }

    .hr-header h3 {
        margin: 0;
        font-size: 18px;

    }
}


.employee-list-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.employee-list-title p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.common-card .form-label {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

/*=========================================
HR MODAL DESIGN
=========================================*/

.hr-modal {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

.hr-modal .modal-header {
    background: #0d6efd;
    color: #fff;
    padding: 18px 24px;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hr-modal .modal-header .modal-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.hr-modal .modal-header p {
    margin: 5px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

.hr-modal .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.hr-modal .modal-body {
    background: #f8fafc;
    padding: 22px;
}

.hr-modal .modal-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 18px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.hr-modal .modal-footer .btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/*=========================================
COMMON CARD
=========================================*/

.hr-modal .common-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.hr-modal .common-card:last-child {
    margin-bottom: 0;
}

.hr-modal .common-card-header {
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.hr-modal .common-card-header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1d2939;
}

/*=========================================
FORM
=========================================*/

.hr-modal label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.hr-modal .row>[class*="col-"] {
    margin-bottom: 18px;
}

.hr-modal .form-control,
.hr-modal .form-select {
    height: 46px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
}

.hr-modal textarea.form-control {
    height: auto;
    min-height: 90px;
    resize: none;
}

.hr-modal .form-control:focus,
.hr-modal .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .15);
}

.hr-modal .input-group-text {
    border-radius: 8px 0 0 8px;
    font-weight: 600;
}

/*=========================================
TABLE
=========================================*/

.hr-modal table {
    margin: 0;
}

.hr-modal table td,
.hr-modal table th {
    padding: 12px 15px;
    font-size: 14px;
    vertical-align: middle;
}

.hr-modal table td:last-child {
    text-align: right;
    font-weight: 700;
    color: #0d6efd;
}

.hr-modal .table-success td {
    font-size: 15px;
    font-weight: 700;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:767px) {

    .hr-modal .modal-header {
        padding: 16px;
    }

    .hr-modal .modal-header .modal-title {
        font-size: 16px;
    }

    .hr-modal .modal-header p {
        font-size: 12px;
    }

    .hr-modal .modal-body {
        padding: 8px;
    }

    .hr-modal .modal-footer {
        padding: 16px;
        flex-direction: column;
        gap: 2px;
    }

    .hr-modal .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .hr-modal .common-card {
        padding: 16px;
    }

    .hr-modal .common-card-header h5 {
        font-size: 13px;
        /* color: #0c44ec; */
    }

    .hr-modal .row>[class*="col-"] {
        margin-bottom: 5px;
    }

    .hr-modal label {
        font-size: 12px;
        color: #0150c5;
    }

    .hr-modal .form-control,
    .hr-modal .form-select {
        height: 42px;
        font-size: 13px;
    }

    .hr-modal table td,
    .hr-modal table th {
        padding: 10px;
        font-size: 13px;
    }

    .employee-list-title h3 {
        margin-bottom: 5px;
        font-size: 16px;
    }

    .employee-list-title p {
        margin: 0;
        font-size: 12px;
    }
}


/*====================================
HR EMPLOYEE TABLE
====================================*/

.hr-employee-table-wrapper {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 40, 90, .08);
}

.hr-employee-table {
    margin: 0;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
}

.hr-employee-table thead th {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.hr-employee-table thead th:first-child {
    border-top-left-radius: 16px;
}

.hr-employee-table thead th:last-child {
    border-top-right-radius: 16px;
}

.hr-employee-table tbody td {
    padding: 16px 18px;
    vertical-align: middle;
    border-bottom: 1px solid #edf2f7;
    font-size: 14px;
}

.hr-employee-table tbody tr {
    transition: .25s;
}

.hr-employee-table tbody tr:hover {
    background: #f7fbff;
}

.hr-employee-table tbody tr:last-child td {
    border-bottom: none;
}

/* Salary */

.hr-salary {
    display: flex;
    flex-direction: column;
}

.hr-salary strong {
    color: #2563eb;
    font-size: 15px;
}

.hr-salary small {
    color: #667085;
}

/* Status */

.hr-status {
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.hr-status.active {
    background: #dcfce7;
    color: #15803d;
}

/* Action */

.hr-table-actions {
    display: flex;
    gap: 8px;
}

.hr-table-actions .btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
}

.hr-table-actions .btn-primary {
    background: #dbeafe;
    color: #2563eb;
}

.hr-table-actions .btn-warning {
    background: #fef3c7;
    color: #b45309;
}

.hr-table-actions .btn-danger {
    background: #fee2e2;
    color: #dc2626;
}

.hr-table-actions .btn:hover {
    transform: translateY(-2px);
}

.employee-action-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}


/*====================================
EMPLOYEE MOBILE CARD
====================================*/

.employee-mobile-list {
    display: none;
}

.employee-mobile-card {
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    border: 1px solid #dbe7f5;
    border-left: 5px solid #2563eb;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 12px 28px rgba(30, 64, 175, .08);
    transition: .3s;
}

.employee-mobile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .12);
}

.employee-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.employee-mobile-top h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #12355b;
}

.employee-id {
    display: inline-block;
    margin-top: 6px;
    background: #dbeafe;
    color: #2563eb;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
}

.employee-mobile-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.employee-mobile-item {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 10px;
}

.employee-mobile-item span {
    display: block;
    font-size: 11px;
    color: #667085;
    margin-bottom: 4px;
}

.employee-mobile-item strong {
    font-size: 14px;
    color: #1e293b;
    font-weight: 700;
}

.salary-text {
    color: #2563eb !important;
}

.employee-mobile-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.employee-mobile-actions .btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: .25s;
}

.employee-mobile-actions .btn-primary {
    background: #dbeafe;
    color: #2563eb;
}

.employee-mobile-actions .btn-warning {
    background: #fef3c7;
    color: #b45309;
}

.employee-mobile-actions .btn-danger {
    background: #fee2e2;
    color: #dc2626;
}

.employee-mobile-actions .btn:hover {
    transform: translateY(-2px);
}

/*===========================
Responsive
===========================*/

@media(max-width:991px) {

    /* .hr-employee-table-wrapper {
        display: none;
    } */

    .employee-mobile-list {
        display: block;
    }

}

@media(max-width:575px) {

    .employee-mobile-card {
        padding: 15px;
    }

    .employee-mobile-top h5 {
        font-size: 16px;
    }

    .employee-mobile-body {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .employee-mobile-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 11px 14px;
    }

    .employee-mobile-item span {
        margin: 0;
    }

    .employee-mobile-item strong {
        text-align: right;
        font-size: 13px;
    }

    .employee-mobile-actions .btn {
        height: 42px;
        font-size: 14px;
    }

}

/* Hr-Management-section-css-end */








/* task-management-section-start */

.task-management-section {
    width: 100%;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 5px 25px rgba(15, 23, 42, 0.07);
}


/* task-management-header-start */

.task-management-header {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.task-management-header-left h3 {
    margin: 0 0 7px;
    color: #172033;
    font-size: 24px;
    font-weight: 700;
}

.task-management-header-left p {
    margin: 0;
    color: #7b8494;
    font-size: 14px;
    line-height: 1.6;
}

.task-management-header-right {
    flex-shrink: 0;
}

.task-add-btn {
    min-height: 45px;
    padding: 10px 19px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0868df, #0879e8, #00ae83);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(8, 104, 223, 0.20);
    transition: all 0.3s ease;
}

.task-add-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(8, 104, 223, 0.28);
}


/* task-summary-grid-start */

.task-summary-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 17px;
    margin-bottom: 25px;
}

.task-summary-card {
    position: relative;
    min-height: 175px;
    overflow: hidden;
    padding: 20px;
    border: 0;
    border-radius: 16px;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12);
    transition: all 0.3s ease;
}

.task-summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 32px rgba(15, 23, 42, 0.18);
}

.task-summary-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -35px;
    bottom: -45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.task-summary-card::before {
    content: "";
    position: absolute;
    width: 65px;
    height: 65px;
    right: 25px;
    top: -30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

/* .task-summary-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
} */

.task-summary-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: start;
    /* justify-content: space-between; */
    gap: 10px;
    flex-direction: column;
}

.task-summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    font-size: 18px;
}

.task-summary-label {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.task-summary-card h3 {
    position: relative;
    z-index: 2;
    margin: 6px 0 5px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
}

.task-summary-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.5;
}


/* summary-card-colors */

.task-card-blue {
    background: linear-gradient(135deg, #0756c9, #1684f8);
}

.task-card-orange {
    background: linear-gradient(135deg, #e87500, #ffb000);
}

.task-card-purple {
    background: linear-gradient(135deg, #6336bd, #9664ed);
}

.task-card-green {
    background: linear-gradient(135deg, #008c65, #19bd91);
}

.task-card-red {
    background: linear-gradient(135deg, #c92842, #f05b69);
}

.task-card-teal {
    background: linear-gradient(135deg, #008b89, #13bdb2);
}

.task-card-cyan {
    background: linear-gradient(135deg, #0075ad, #08afd1);
}

.task-card-pink {
    background: linear-gradient(135deg, #9c356d, #d75c9d);
}

.task-card-indigo {
    background: linear-gradient(135deg, #3c438e, #6d74c9);
}


/* task-board-section-start */

.task-board-section {
    width: 100%;
    padding: 20px;
    border: 1px solid #e9edf3;
    border-radius: 17px;
    background: #f7f9fc;
}

.task-board-header {
    margin-bottom: 20px;
}

.task-board-header h4 {
    margin: 0 0 5px;
    color: #1b2434;
    font-size: 19px;
    font-weight: 700;
}

.task-board-header p {
    margin: 0;
    color: #8791a1;
    font-size: 13px;
}


/* task-board-grid-start */

.task-board-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(210px, 1fr));
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.task-board-column {
    min-width: 220px;
    min-height: 350px;
    overflow: hidden;
    border: 1px solid #e7ebf1;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

.task-board-column-header {
    min-height: 80px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.task-board-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-board-heading-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    font-size: 14px;
}

.task-board-column-header h5 {
    margin: 0 0 0px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.task-board-column-header span:not(.task-board-count) {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.task-board-count {
    min-width: 35px;
    height: 35px;
    padding: 0 8px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18);
    font-size: 14px !important;
    font-weight: 700;
}


/* board-header-colors */

.task-board-todo .task-board-column-header {
    background: linear-gradient(135deg, #0756c9, #1684f8);
}

.task-board-progress .task-board-column-header {
    background: linear-gradient(135deg, #e87500, #ffb000);
}

.task-board-approval .task-board-column-header {
    background: linear-gradient(135deg, #6336bd, #9664ed);
}

.task-board-delivered .task-board-column-header {
    background: linear-gradient(135deg, #008c65, #19bd91);
}

.task-board-hold .task-board-column-header {
    background: linear-gradient(135deg, #c92842, #f05b69);
}

.task-board-completed .task-board-column-header {
    background: linear-gradient(135deg, #008b89, #13bdb2);
}

.task-board-content {
    min-height: 270px;
    padding: 12px;
    background: #fbfcfe;
}


/* task-item-card-start */

.task-item-card {
    width: 100%;
    padding: 15px;
    border: 1px solid #e5eaf0;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06);
    transition: all 0.3s ease;
}

.task-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10);
}

.task-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.task-item-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-item-title h6 {
    margin: 0;
    color: #202a3a;
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

.task-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
}

.task-status-dot.todo {
    background: #0d6efd;
}

.task-status-dot.progress {
    background: #f59f00;
}

.task-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.task-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f5f8;
    font-size: 10px;
    transition: all 0.2s ease;
}

.task-view-btn {
    color: #0d6efd;
}

.task-edit-btn {
    color: #f59f00;
}

.task-delete-btn {
    color: #dc3545;
}

.task-action-btn:hover {
    transform: translateY(-1px);
}

.task-view-btn:hover {
    background: #e8f1ff;
}

.task-edit-btn:hover {
    background: #fff4dd;
}

.task-delete-btn:hover {
    background: #ffeded;
}

.task-item-details {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}

.task-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.task-detail-row:last-child {
    margin-bottom: 0;
}

.task-detail-row span {
    color: #4f535b;
    font-size: 13px;
}

.task-detail-row span i {
    margin-right: 4px;
}

.task-detail-row strong {
    color: #394456;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.task-item-footer {
    margin-top: 13px;
}

.task-status-badge {
    min-height: 26px;
    padding: 5px 10px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.task-status-badge.todo {
    color: #0756c9;
    background: #eaf3ff;
}

.task-status-badge.progress {
    color: #b66b00;
    background: #fff1d5;
}


/* task-empty-state-start */

.task-empty-state {
    min-height: 245px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.task-empty-state i {
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5c1;
    background: #f1f4f8;
    font-size: 19px;
}

.task-empty-state p {
    margin: 0;
    color: #a0a8b5;
    font-size: 12px;
}


/* task-modal-start */

.task-modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.20);
}

.task-modal-header {
    padding: 22px 25px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.task-modal-header h4 {
    margin: 0 0 5px;
    color: #182235;
    font-size: 20px;
    font-weight: 750;
}

.task-modal-header p {
    margin: 0;
    color: #8a94a3;
    font-size: 13px;
}

.task-modal-header .btn-close {
    margin-top: 2px;
    box-shadow: none;
}

.task-modal-body {
    padding: 25px;
    max-height: 68vh;
    overflow-y: auto;
}

.task-form-label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 13px;
    font-weight: 650;
}

.task-form-control {
    min-height: 45px;
    border: 1px solid #dfe4eb;
    border-radius: 9px;
    color: #313b4b;
    font-size: 13px;
    box-shadow: none !important;
}

.task-form-control:focus {
    border-color: #6ca8ff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.08) !important;
}

.task-description-control {
    min-height: 130px;
    resize: vertical;
}

.task-modal-footer {
    padding: 17px 25px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #edf0f4;
    background: #fafbfc;
}

.task-modal-footer .btn {
    min-height: 42px;
    padding: 9px 17px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
}

.task-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}


/* task-view-box-start */

.task-view-box {
    padding: 20px;
    border: 1px solid #e7ebf1;
    border-radius: 14px;
    background: #f8fafc;
}

.task-view-header {
    padding-bottom: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #e7ebf0;
}

.task-view-small-label {
    display: block;
    margin-bottom: 6px;
    color: #929aaa;
    font-size: 11px;
    font-weight: 600;
}

.task-view-header h3 {
    margin: 0;
    color: #202a3a;
    font-size: 21px;
    font-weight: 750;
}

.task-view-detail {
    min-height: 75px;
    padding: 15px;
    border: 1px solid #e7ebef;
    border-radius: 11px;
    background: #ffffff;
}

.task-view-detail span {
    display: block;
    margin-bottom: 7px;
    color: #929aaa;
    font-size: 11px;
}

.task-view-detail span i {
    margin-right: 5px;
}

.task-view-detail strong {
    display: block;
    color: #354052;
    font-size: 13px;
    font-weight: 700;
}

.task-view-description {
    padding: 16px;
    border: 1px solid #e7ebef;
    border-radius: 11px;
    background: #ffffff;
}

.task-view-description span {
    display: block;
    margin-bottom: 8px;
    color: #7e8797;
    font-size: 11px;
    font-weight: 650;
}

.task-view-description p {
    margin: 0;
    color: #4c5667;
    font-size: 13px;
    line-height: 1.7;
}


/* responsive-1199 */

@media (max-width: 1199px) {

    .task-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .task-board-grid {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        overflow-x: visible;
    }

}


/* responsive-991 */

@media (max-width: 991px) {

    .task-management-section {
        padding: 20px;
    }

    .task-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .task-board-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

}


/* responsive-767 */

@media (max-width: 767px) {

    .task-management-section {
        padding: 16px;
        border-radius: 14px;
    }

    .task-management-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .task-management-header-left h3 {
        font-size: 21px;
    }

    .task-management-header-left p {
        font-size: 13px;
    }

    .task-management-header-right {
        width: 100%;
    }

    .task-add-btn {
        width: 100%;
    }

    .task-summary-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .task-summary-card {
        min-height: 145px;
        padding: 17px;
    }

    .task-summary-card h3 {
        margin-top: 15px;
        font-size: 28px;
    }

    .task-board-section {
        padding: 14px;
    }

    .task-board-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .task-board-column {
        min-width: 0;
        min-height: auto;
    }

    .task-board-content {
        min-height: 180px;
    }

    .task-empty-state {
        min-height: 150px;
    }

    .task-modal-header {
        padding: 18px;
    }

    .task-modal-header h4 {
        font-size: 18px;
    }

    .task-modal-body {
        padding: 18px;
        max-height: 70vh;
    }

    .task-modal-footer {
        padding: 14px 18px;
        flex-wrap: wrap;
    }

    .task-modal-footer .btn {
        flex: 1;
    }

    .task-action-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

}


/* responsive-480 */

@media (max-width: 480px) {

    .task-management-section {
        padding: 13px;
    }

    .task-summary-card {
        min-height: 135px;
        padding: 15px;
    }

    .task-summary-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 14px;
    }

    .task-summary-label {
        font-size: 11px;
    }

    .task-summary-card h3 {
        font-size: 18px;
        margin-top: 5px;
    }

    .task-summary-card p {
        font-size: 12px;
    }

    .task-board-section {
        padding: 10px;
    }

    .task-board-column-header {
        padding: 13px;
    }

    .task-board-content {
        padding: 10px;
    }

    .task-item-card {
        padding: 13px;
    }

    .task-item-actions {
        gap: 7px;
    }

    /* .task-action-btn {
        width: 27px;
        height: 27px;
    } */

    .task-view-header {
        flex-direction: column;
    }

    .task-modal-footer {
        flex-direction: column;
    }

    .task-modal-footer .btn {
        width: 100%;
        flex: none;
    }

}

/* task-management-section-end */

















/* expenses-management-css-start */


.expense-management-section {
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    margin-bottom: 25px;
}

.expense-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.expense-header-left h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.expense-header-left p {
    margin: 6px 0 0;
    font-size: 14px;
    color: #000;
}

.expense-add-btn {
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/*=========================================
MODAL
=========================================*/

.expense-modal {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
}

.expense-modal-header {
    background: #0d6efd;
    color: #fff;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expense-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.expense-modal-header span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.expense-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.expense-modal-body {
    background: #f8fafc;
    padding: 22px;
}

.expense-modal-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 18px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.expense-modal-footer .btn {
    height: 44px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
}

/*=========================================
CARD
=========================================*/

.expense-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

.expense-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
    color: #1d2939;
}

/*=========================================
FORM
=========================================*/

.expense-card label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.expense-card label span {
    color: #dc2626;
}

.expense-card .row>[class*=col] {
    margin-bottom: 18px;
}

.expense-card .form-control,
.expense-card .form-select {
    height: 46px;
    border-radius: 8px;
    box-shadow: none;
}

.expense-card textarea.form-control {
    height: auto;
    resize: none;
    padding-top: 12px;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .expense-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .expense-header-right {
        width: 100%;
    }

    .expense-add-btn {
        width: 100%;
        justify-content: center;
    }

}

@media(max-width:767px) {

    .expense-management-section {
        padding: 18px;
    }

    .expense-header-left h3 {
        font-size: 16px;
    }

    .expense-header-left p {
        font-size: 12px;
    }

    .expense-modal-body {
        padding: 8px;
    }

    .expense-card {
        padding: 10px;
    }

    .expense-card-title {
        font-size: 14px;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .expense-modal-header h3 {
        font-size: 14px;
    }

    .expense-modal-header span {
        font-size: 11px;
    }

}

@media(max-width:576px) {

    .expense-modal-footer {
        flex-direction: column;
    }

    .expense-modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .expense-card label {
        font-size: 12px;
    }

    .expense-card .form-control,
    .expense-card .form-select {
        height: 42px;
        font-size: 13px;
    }

}


/*=========================================
EXPENSE SUMMARY CARDS
=========================================*/

.expense-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 25px 0;
}

.expense-summary-card {
    min-height: 120px;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
    transition: .35s;
}

.expense-summary-card:hover {
    transform: translateY(-6px);
}

.expense-summary-card::before {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.expense-summary-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 22px;
}

.expense-summary-content {
    flex: 1;
}

.expense-summary-content h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.expense-summary-content h3 {
    margin: 5px 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.expense-summary-content p {
    margin: 0;
    font-size: 12px;
    opacity: .9;
}

/*=========================================
GRADIENT COLORS
=========================================*/

.balance-card {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.today-card {
    background: linear-gradient(135deg, #15803d, #16a34a);
}

.week-card {
    background: linear-gradient(135deg, #b45309, #f59e0b);
}

.month-card {
    background: linear-gradient(135deg, #7e22ce, #a855f7);
}

.salary-card {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.office-card {
    background: linear-gradient(135deg, #be123c, #f43f5e);
}

.travel-card {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.utility-card {
    background: linear-gradient(135deg, #374151, #6b7280);
}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px) {

    .expense-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:576px) {

    .expense-summary-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 10px 0px;
    }

    .expense-summary-card {
        min-height: 88px;
        padding: 10px;
        gap: 5px;
    }

    .expense-summary-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .expense-summary-content h6 {
        font-size: 10px;
    }

    .expense-summary-content h3 {
        font-size: 14px;
        margin: 3px 0;
    }

    .expense-summary-content p {
        font-size: 9px;
    }

}

/*=========================================
EXPENSE LIST
=========================================*/

.expense-list-section {
    margin-top: 25px;
}

.expense-list-header {
    margin-bottom: 20px;
}

.expense-list-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.expense-list-title p {
    margin-top: 5px;
    font-size: 14px;
    color: #667085;
}

/*=========================================
TABLE
=========================================*/

.expense-table-card {
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
}

.expense-table-wrapper {
    overflow-x: auto;
    scrollbar-width: thin;
}

.expense-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.expense-table-wrapper::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 20px;
}

.expense-table {
    min-width: 1450px;
    margin: 0;
}

.expense-table thead th {
    background: #013068;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.expense-table tbody td {
    padding: 15px;
    vertical-align: middle;
    font-size: 14px;
    white-space: nowrap;
}

.expense-table tbody tr:hover {
    background: #f8fbff;
}

.expense-table strong {
    color: #013068;
}

.expense-action-btns {
    display: flex;
    gap: 8px;
}

.expense-action-btns .btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
}

.expense-table .badge {
    padding: 7px 10px;
    font-size: 12px;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .expense-table {
        min-width: 1350px;
    }

}

@media(max-width:576px) {

    .expense-list-title h3 {
        font-size: 16px;
    }

    .expense-list-title p {
        font-size: 12px;
    }

    .expense-table thead th,
    .expense-table tbody td {
        font-size: 13px;
        padding: 12px;
    }

    .expense-action-btns .btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

}

/*=========================================
EXPENSE TABLE SECTION
=========================================*/

.expense-table-section {
    margin-top: 25px;
}

.expense-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 15px;
    flex-wrap: wrap;
}

.expense-table-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.expense-table-title p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #6b7280;
}

/*=========================================
SEARCH AREA
=========================================*/

.expense-search-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid #edf2f7;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .05);
}

.expense-search-card label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 7px;
}

.expense-search-card .form-control,
.expense-search-card .form-select {
    height: 46px;
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid #d9e2ec;
}

.expense-search-card .form-control:focus,
.expense-search-card .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .15);
}

.expense-search-card .btn {
    height: 46px;
    border-radius: 10px;
    font-weight: 600;
}

/*=========================================
TABLE CARD
=========================================*/

.expense-table-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #edf2f7;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}

/*=========================================
TABLE
=========================================*/

.expense-table {
    margin: 0;
    min-width: 1500px;
}

.expense-table thead th {
    background: #013068;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    padding: 14px;
    border: none;
    text-align: center;
}

.expense-table tbody td {
    padding: 14px;
    vertical-align: middle;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
    border-color: #eef2f7;
}

.expense-table tbody tr:hover {
    background: #f8fbff;
}

.expense-table tbody td:nth-child(9) {
    white-space: normal;
    min-width: 220px;
    text-align: left;
}

/*=========================================
STATUS
=========================================*/

.expense-table .badge {
    font-size: 11px;
    padding: 7px 12px;
    border-radius: 30px;
    font-weight: 600;
}

/*=========================================
ACTION BUTTONS
=========================================*/

.expense-action-btns {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.expense-action-btns .btn {
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.expense-action-btns .btn i {
    font-size: 13px;
}

/*=========================================
MODAL
=========================================*/

.expense-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.expense-modal .modal-header {
    background: #013068;
    color: #fff;
    border: none;
    padding: 20px 24px;
}

.expense-modal .modal-title {
    font-size: 22px;
    font-weight: 700;
}

.expense-modal .modal-header p {
    font-size: 13px;
    margin-top: 5px;
    color: rgba(255, 255, 255, .85);
}

.expense-modal .btn-close {
    filter: brightness(0) invert(1);
}

.expense-modal .modal-body {
    background: #f8fafc;
    padding: 24px;
}

.expense-modal .modal-footer {
    border: none;
    background: #fff;
    padding: 18px 24px;
    gap: 10px;
}

.expense-modal label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 7px;
}

.expense-modal .form-control,
.expense-modal .form-select {
    height: 46px;
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid #d9e2ec;
}

.expense-modal textarea.form-control {
    height: auto;
    resize: none;
}

.expense-modal .form-control:focus,
.expense-modal .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .15);
}

.expense-modal .input-group-text {
    border-radius: 10px 0 0 10px;
}

/*=========================================
SCROLLBAR
=========================================*/

.table-responsive {
    overflow: auto;
}

.table-responsive::-webkit-scrollbar {
    height: 9px;
    width: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #edf2f7;
    border-radius: 20px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #013068;
    border-radius: 20px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #0b4b97;
}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px) {

    .expense-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .expense-table-title h3 {
        font-size: 20px;
    }

    .expense-search-card {
        padding: 16px;
    }

    .expense-table-card {
        padding: 15px;
    }

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:576px) {

    .expense-table-title h3 {
        font-size: 16px;
    }

    .expense-table-title p {
        font-size: 12px;
    }

    .expense-search-card {
        padding: 14px;
    }

    .expense-search-card label {
        font-size: 12px;
    }

    .expense-search-card .form-control,
    .expense-search-card .form-select {
        height: 42px;
        font-size: 12px;
    }

    .expense-search-card .btn {
        height: 42px;
        font-size: 12px;
    }

    .expense-table-card {
        padding: 12px;
    }

    .expense-table thead th {
        font-size: 11px;
        padding: 10px;
    }

    .expense-table tbody td {
        font-size: 11px;
        padding: 10px;
    }

    .expense-action-btns {
        gap: 5px;
    }

    .expense-action-btns .btn {
        width: 30px;
        height: 30px;
    }

    .expense-action-btns .btn i {
        font-size: 11px;
    }

    .expense-modal .modal-header {
        padding: 16px;
    }

    .expense-modal .modal-title {
        font-size: 17px;
    }

    .expense-modal .modal-header p {
        font-size: 11px;
    }

    .expense-modal .modal-body {
        padding: 16px;
    }

    .expense-modal .modal-footer {
        flex-direction: column;
        padding: 16px;
    }

    .expense-modal .modal-footer .btn {
        width: 100%;
    }

    .expense-modal label {
        font-size: 12px;
    }

    .expense-modal .form-control,
    .expense-modal .form-select {
        height: 42px;
        font-size: 12px;
    }

}




/*=========================================
EXPENSE RECORD TABLE
=========================================*/

.expense-record-table-wrapper {
    border-radius: 12px;
    overflow-x: auto;
}

.expense-record-table {
    margin: 0;
    white-space: nowrap;
}

.expense-record-table thead th {
    background: #013068;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.expense-record-table tbody td {
    padding: 15px;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid #edf2f7;
}

.expense-record-table tbody tr {
    transition: .3s;
}

.expense-record-table tbody tr:hover {
    background: #f8fbff;
}

.expense-record-table strong {
    color: #013068;
    font-weight: 700;
}

.expense-record-table .badge {
    padding: 7px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

/*=========================================
ACTION BUTTONS
=========================================*/

.expense-record-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expense-record-action .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: .3s;
}

.expense-record-action .btn:hover {
    transform: translateY(-2px);
}

.expense-record-view-btn {
    background: #0d6efd;
    border-color: #0d6efd;
}

.expense-record-edit-btn {
    background: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.expense-record-delete-btn {
    background: #dc3545;
    border-color: #dc3545;
}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px) {

    .expense-record-table thead th {
        padding: 12px;
    }

    .expense-record-table tbody td {
        padding: 12px;
        font-size: 13px;
    }

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:576px) {

    .expense-record-table thead th {
        font-size: 12px;
        padding: 10px;
    }

    .expense-record-table tbody td {
        font-size: 12px;
        padding: 10px;
    }

    .expense-record-action {
        gap: 6px;
    }

    .expense-record-action .btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .expense-record-table .badge {
        font-size: 10px;
        padding: 5px 9px;
    }

}





/*=========================================
DESKTOP / MOBILE
=========================================*/

.expense-record-table-wrapper {
    display: block;
}

.expense-record-mobile-list {
    display: none;
}

/*=========================================
MOBILE VIEW
=========================================*/

@media(max-width:991px) {

    /* .expense-record-table-wrapper {
        display: none;
    } */

    .expense-record-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .expense-record-mobile-card {
        position: relative;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e8edf5;
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        transition: .35s;
    }

    .expense-record-mobile-card:hover {
        transform: translateY(-3px);
    }

    .expense-record-mobile-card::before {
        content: "";
        position: absolute;
        top: -55px;
        right: -55px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(37, 99, 235, .08);
    }

    .expense-record-mobile-card::after {
        content: "";
        position: absolute;
        bottom: -60px;
        left: -60px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(22, 163, 74, .06);
    }

    .expense-record-mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
    }

    .expense-record-mobile-top h5 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: #013068;
    }

    .expense-record-mobile-top span {
        font-size: 12px;
        color: #667085;
    }

    .expense-record-mobile-top .badge {
        padding: 7px 14px;
        border-radius: 30px;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
    }

    .expense-record-mobile-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        z-index: 2;
    }

    .expense-record-mobile-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding-bottom: 5px;
        border-bottom: 1px dashed #e5e7eb;
    }

    .expense-record-mobile-item:last-child {
        border: none;
        padding-bottom: 0;
    }

    .expense-record-mobile-item span {
        font-size: 12px;
        font-weight: 500;
        color: #667085;
    }

    .expense-record-mobile-item strong {
        font-size: 13px;
        font-weight: 700;
        color: #013068;
        text-align: right;
    }

    .expense-record-mobile-footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 18px;
        position: relative;
        z-index: 2;
    }

    .expense-record-mobile-footer .btn {
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        transition: .3s;
    }

    .expense-record-mobile-footer .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
    }

    .expense-record-mobile-footer .btn-primary {
        background: #2563eb;
        border-color: #2563eb;
    }

    .expense-record-mobile-footer .btn-warning {
        background: #f59e0b;
        border-color: #f59e0b;
        color: #fff;
    }

    .expense-record-mobile-footer .btn-danger {
        background: #ef4444;
        border-color: #ef4444;
    }

}

@media(max-width:576px) {

    .expense-record-mobile-card {
        padding: 15px;
        border-radius: 16px;
    }

    .expense-record-mobile-top h5 {
        font-size: 15px;
    }

    .expense-record-mobile-top span {
        font-size: 11px;
    }

    .expense-record-mobile-item span {
        font-size: 11px;
    }

    .expense-record-mobile-item strong {
        font-size: 12px;
    }

    .expense-record-mobile-footer {
        gap: 8px;
    }

    .expense-record-mobile-footer .btn {
        height: 38px;
        font-size: 13px;
    }

}


/* expenses-management-css-end */















/* Reports-Analytics-section-css-start */

.reports-analytics-section {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    margin-bottom: 25px;
}

/* Reports-header-start */

.reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.reports-header-left h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.reports-header-left p {
    margin: 6px 0 0;
    font-size: 14px;
    color: #667085;
}

.reports-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reports-header-right .btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

.reports-filter-btn {
    border: 1px solid #d9e2ec;
    color: #013068;
    background: #fff;
}

/* Reports-header-end */


/* Reports-filter-start */

.reports-filter-card {
    background: #f8fafc;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 22px;
}

.reports-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 16px;
}

.reports-filter-item .form-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.reports-filter-item .form-select {
    height: 44px;
    border-radius: 9px;
    border: 1px solid #d9e2ec;
    box-shadow: none;
}

.reports-filter-item .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .12);
}

.reports-filter-action .btn {
    height: 44px;
    padding: 0 20px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

/* Reports-filter-end */


/* Reports-summary-start */

.reports-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.reports-summary-card {
    min-height: 125px;
    padding: 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .10);
    transition: .35s;
}

.reports-summary-card:hover {
    transform: translateY(-5px);
}

.reports-summary-card::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -35px;
    top: -35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.reports-summary-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.reports-summary-content {
    position: relative;
    z-index: 2;
}

.reports-summary-content h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.reports-summary-content h3 {
    margin: 5px 0;
    font-size: 21px;
    font-weight: 700;
}

.reports-summary-content p {
    margin: 0;
    font-size: 11px;
    opacity: .9;
}

.reports-summary-content p i {
    margin-right: 3px;
}

.sales-summary-card {
    background: linear-gradient(135deg, #013068, #1769d1);
}

.leads-summary-card {
    background: linear-gradient(135deg, #087f8c, #0e9f9a);
}

.expenses-summary-card {
    background: linear-gradient(135deg, #b45309, #f59e0b);
}

.profit-summary-card {
    background: linear-gradient(135deg, #15803d, #16a34a);
}

/* Reports-summary-end */


/* Reports-chart-grid-start */

.reports-chart-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.reports-chart-card {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
    min-width: 0;
}

.reports-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.reports-chart-header h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #013068;
}

.reports-chart-header p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #667085;
}

.reports-chart-badge {
    padding: 6px 11px;
    background: #eef5ff;
    color: #1769d1;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.reports-chart-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef5ff;
    color: #1769d1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reports-chart-body {
    position: relative;
    width: 100%;
    height: 300px;
}

.reports-doughnut-body {
    height: 245px;
}

.reports-expense-chart-body,
.reports-stock-chart-body {
    height: 285px;
}

/* Reports-chart-grid-end */


/* Reports-chart-legend-start */

.reports-chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 8px;
}

.reports-chart-legend div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #667085;
}

.reports-chart-legend strong {
    color: #013068;
    margin-left: 2px;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.converted {
    background: #16a34a;
}

.legend-dot.pending {
    background: #f59e0b;
}

.legend-dot.lost {
    background: #dc3545;
}

/* Reports-chart-legend-end */


/* Employee-performance-start */

.employee-performance-section {
    margin-top: 25px;
}

.employee-performance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.employee-performance-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #013068;
}

.employee-performance-header p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #667085;
}

.employee-export-btn {
    height: 42px;
    padding: 0 16px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

/* Employee-performance-end */


/* Employee-table-start */

.employee-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e8edf4;
    border-radius: 14px;
}

.employee-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.employee-table-wrapper::-webkit-scrollbar-track {
    background: #edf2f7;
}

.employee-table-wrapper::-webkit-scrollbar-thumb {
    background: #013068;
    border-radius: 20px;
}

.employee-performance-table {
    min-width: 1050px;
    margin: 0;
}

.employee-performance-table thead th {
    background: #013068;
    color: #fff;
    border: none;
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.employee-performance-table tbody td {
    padding: 14px;
    font-size: 13px;
    border-bottom: 1px solid #edf2f7;
    white-space: nowrap;
}

.employee-performance-table tbody tr:last-child td {
    border-bottom: none;
}

.employee-performance-table tbody tr:hover {
    background: #f8fbff;
}

.employee-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-info strong {
    display: block;
    color: #013068;
    font-size: 13px;
}

.employee-info span {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 11px;
}

.employee-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1769d1, #087f8c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.achievement-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 135px;
}

.achievement-progress {
    width: 90px;
    height: 7px;
    border-radius: 20px;
    background: #e8edf4;
    overflow: hidden;
}

.achievement-progress span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #1769d1, #087f8c);
}

.achievement-wrapper strong {
    font-size: 11px;
    color: #013068;
}

.performance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 600;
}

.performance-badge.excellent {
    background: #dcfce7;
    color: #15803d;
}

.performance-badge.good {
    background: #dbeafe;
    color: #1d4ed8;
}

.performance-badge.average {
    background: #fef3c7;
    color: #b45309;
}

.performance-badge.needs-improvement {
    background: #fee2e2;
    color: #dc2626;
}

.employee-view-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
}

/* Employee-table-end */


/* Employee-mobile-start */

.employee-mobile-list {
    display: none;
}

.employee-mobile-card {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}

.employee-mobile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.employee-mobile-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.employee-mobile-details div {
    padding: 10px;
    background: #f8fafc;
    border-radius: 9px;
}

.employee-mobile-details span {
    display: block;
    font-size: 10px;
    color: #667085;
    margin-bottom: 4px;
}

.employee-mobile-details strong {
    display: block;
    font-size: 12px;
    color: #013068;
}

.mobile-progress {
    width: 100%;
    height: 7px;
    margin-bottom: 15px;
}

.employee-mobile-view-btn {
    height: 40px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
}

/* Employee-mobile-end */


/* Employee-performance-start */

.employee-performance-card {
    width: 100%;
}

.employee-performance-table-wrapper {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.employee-performance-table {
    min-width: 1100px;
    margin: 0;
}

.employee-performance-table thead th {
    background: #013068;
    color: #fff;
    border: none;
    padding: 14px 15px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.employee-performance-table tbody td {
    padding: 14px 15px;
    font-size: 13px;
    color: #344054;
    white-space: nowrap;
    border-bottom: 1px solid #edf2f7;
}

.employee-performance-table tbody tr {
    transition: .3s;
}

.employee-performance-table tbody tr:hover {
    background: #f8fbff;
}

/* Employee-info-start */

.employee-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-info img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
}

.employee-info div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employee-info strong {
    color: #013068;
    font-size: 13px;
}

.employee-info span {
    color: #667085;
    font-size: 11px;
}

/* Employee-info-end */


/* Achievement-start */

.achievement-wrapper {
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.achievement-progress {
    width: 85px;
    height: 7px;
    background: #e9eef5;
    border-radius: 20px;
    overflow: hidden;
}

.achievement-progress span {
    display: block;
    height: 100%;
    background: #0d6efd;
    border-radius: 20px;
}

.achievement-wrapper strong {
    font-size: 12px;
    color: #013068;
}

/* Achievement-end */


/* Employee-action-btns-start */

.employee-action-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

.employee-action-btns .btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.employee-action-btns .btn i {
    font-size: 12px;
}

.employee-action-btns .employee-edit-btn {
    color: #212529;
}

/* Employee-action-btns-end */


/* Employee-modal-start */

.report-employee-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.report-employee-modal .modal-header {
    background: #013068;
    color: #fff;
    border: none;
    padding: 20px 24px;
}

.report-employee-modal .modal-title {
    font-size: 21px;
    font-weight: 700;
}

.report-employee-modal .modal-header p {
    margin-top: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
}

.report-employee-modal .btn-close {
    filter: brightness(0) invert(1);
}

.report-employee-modal .modal-body {
    background: #f8fafc;
    padding: 24px;
}

.report-employee-modal .modal-footer {
    background: #fff;
    border-top: 1px solid #edf2f7;
    padding: 16px 24px;
}

.report-employee-modal .form-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 7px;
}

.report-employee-modal .form-control {
    height: 45px;
    border-radius: 9px;
    border: 1px solid #d9e2ec;
    box-shadow: none;
}

.report-employee-modal .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .12);
}

/* Employee-modal-profile-start */

.employee-modal-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.employee-modal-profile img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
}

.employee-modal-profile h4 {
    margin: 0 0 4px;
    color: #013068;
    font-size: 18px;
    font-weight: 700;
}

.employee-modal-profile span {
    color: #667085;
    font-size: 12px;
}

/* Employee-modal-profile-end */

/* Employee-modal-end */


/* Employee-performance-responsive-start */

@media(max-width:991px) {

    .employee-performance-table {
        min-width: 1050px;
    }

}

@media(max-width:576px) {

    .employee-performance-table thead th {
        padding: 10px;
        font-size: 11px;
    }

    .employee-performance-table tbody td {
        padding: 10px;
        font-size: 13px;
    }

    .employee-info img {
        width: 36px;
        height: 36px;
    }

    .employee-info strong {
        font-size: 11px;
    }

    .employee-info span {
        font-size: 10px;
    }

    .employee-action-btns {
        gap: 5px;
    }

    .employee-action-btns .btn {
        width: 30px;
        height: 30px;
    }

    .employee-action-btns .btn i {
        font-size: 10px;
    }

    .report-employee-modal .modal-header {
        padding: 16px;
    }

    .report-employee-modal .modal-title {
        font-size: 16px;
    }

    .report-employee-modal .modal-header p {
        font-size: 11px;
    }

    .report-employee-modal .modal-body {
        padding: 16px;
    }

    .report-employee-modal .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
    }

    .report-employee-modal .modal-footer .btn {
        width: 100%;
    }

}

/* Employee-performance-responsive-end */


/* Tablet-start */

@media(max-width:1199px) {

    .reports-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .reports-chart-grid {
        grid-template-columns: 1fr 1fr;
    }

}

/* Tablet-end */


/* Tablet-small-start */

@media(max-width:991px) {

    .reports-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .reports-header-right {
        width: 100%;
    }

    .reports-header-right .btn {
        flex: 1;
    }

    .reports-filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .reports-filter-action {
        grid-column: 1 / -1;
    }

    .reports-filter-action .btn {
        width: 100%;
    }

    .reports-chart-grid {
        grid-template-columns: 1fr;
    }

    .reports-large-chart {
        grid-column: auto;
    }

    .employee-table-wrapper {
        display: none;
    }

    .employee-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

}

/* Tablet-small-end */


/* Mobile-start */

@media(max-width:767px) {

    .reports-analytics-section {
        padding: 18px;
    }

    .reports-header-left h3 {
        font-size: 18px;
    }

    .reports-header-left p {
        font-size: 12px;
    }

    .reports-header-right {
        flex-direction: column;
    }

    .reports-header-right .btn {
        width: 100%;
    }

    .reports-filter-card {
        padding: 14px;
    }

    .reports-filter-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .reports-filter-action {
        grid-column: auto;
    }

    .reports-summary-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .reports-summary-card {
        min-height: 95px;
        padding: 12px;
        gap: 8px;
    }

    .reports-summary-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 14px;
    }

    .reports-summary-content h6 {
        font-size: 10px;
    }

    .reports-summary-content h3 {
        font-size: 15px;
        margin: 3px 0;
    }

    .reports-summary-content p {
        font-size: 8px;
    }

    .reports-chart-card {
        padding: 14px;
        border-radius: 14px;
    }

    .reports-chart-header h4 {
        font-size: 14px;
    }

    .reports-chart-header p {
        font-size: 10px;
    }

    .reports-chart-badge {
        font-size: 9px;
        padding: 5px 8px;
    }

    .reports-chart-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .reports-chart-body {
        height: 240px;
    }

    .reports-doughnut-body {
        height: 220px;
    }

    .reports-expense-chart-body,
    .reports-stock-chart-body {
        height: 240px;
    }

    .employee-performance-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-performance-header h3 {
        font-size: 17px;
    }

    .employee-performance-header p {
        font-size: 11px;
    }

    .employee-export-btn {
        width: 100%;
        justify-content: center;
    }

}

/* Mobile-end */


/* Small-mobile-start */

@media(max-width:576px) {

    .reports-analytics-section {
        padding: 14px;
        border-radius: 10px;
    }

    .reports-summary-cards {
        gap: 9px;
    }

    .reports-summary-card {
        min-height: 88px;
        padding: 9px;
        gap: 6px;
        border-radius: 12px;
    }

    .reports-summary-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 12px;
    }

    .reports-summary-content h6 {
        font-size: 9px;
    }

    .reports-summary-content h3 {
        font-size: 13px;
    }

    .reports-summary-content p {
        font-size: 7px;
    }

    .reports-chart-body {
        height: 210px;
    }

    .reports-doughnut-body {
        height: 200px;
    }

    .reports-expense-chart-body,
    .reports-stock-chart-body {
        height: 215px;
    }

    .employee-mobile-card {
        padding: 13px;
    }

    .employee-mobile-header {
        flex-direction: column;
    }

    .employee-mobile-header .performance-badge {
        align-self: flex-start;
    }

    .employee-mobile-details {
        gap: 7px;
    }

}

/* Small-mobile-end */


/* Reports-Analytics-section-css-end */













/* Purchase-management-section-start */

.purchase-management-section {
    width: 100%;
    padding: 0;
    background: #f5f8fc;
}

.purchase-management-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 25px;
}


/* Purchase-header-start */

.purchase-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.purchase-header-content h2 {
    margin: 0 0 6px;
    color: #071b3b;
    font-size: 26px;
    font-weight: 700;
}

.purchase-header-content p {
    margin: 0;
    color: #718096;
    font-size: 14px;
}

.purchase-header-action {
    flex-shrink: 0;
}

.purchase-create-btn {
    border: 0;
    outline: none;
    padding: 12px 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1769d1, #087f8c);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

.purchase-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(8, 127, 140, 0.18);
}


/* Purchase-summary-start */

.purchase-summary-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.purchase-summary-card {
    min-width: 0;
    border: 0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 3px 12px rgba(7, 27, 59, 0.06);
}


/* Purchase-orders-summary-card */

.orders-summary-card {
    background: #eaf2ff;
}

.orders-summary-card .purchase-summary-icon {
    background: #1769d1;
    color: #fff;
}

.orders-summary-card .purchase-summary-content h6,
.orders-summary-card .purchase-summary-content h3 {
    color: #1769d1;
}

.orders-summary-card .purchase-summary-content p {
    color: #1255aa;
}


/* Supplier-bills-summary-card */

.bills-summary-card {
    background: #eaf9f6;
}

.bills-summary-card .purchase-summary-icon {
    background: #087f8c;
    color: #fff;
}

.bills-summary-card .purchase-summary-content h6,
.bills-summary-card .purchase-summary-content h3 {
    color: #087f8c;
}

.bills-summary-card .purchase-summary-content p {
    color: #056773;
}


/* Purchase-return-summary-card */

.return-summary-card {
    background: #fff5e6;
}

.return-summary-card .purchase-summary-icon {
    background: #d88900;
    color: #fff;
}

.return-summary-card .purchase-summary-content h6,
.return-summary-card .purchase-summary-content h3 {
    color: #b86f00;
}

.return-summary-card .purchase-summary-content p {
    color: #a96400;
}


/* Purchase-summary-deep-background-start */

.purchase-summary-card {
    border: 0;
    color: #fff;
}


/* Purchase-orders-summary-card */

.orders-summary-card {
    background: #1769d1;
}

.orders-summary-card .purchase-summary-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.orders-summary-card .purchase-summary-content h6,
.orders-summary-card .purchase-summary-content h3,
.orders-summary-card .purchase-summary-content p {
    color: #fff;
}


/* Supplier-bills-summary-card */

.bills-summary-card {
    background: #087f8c;
}

.bills-summary-card .purchase-summary-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.bills-summary-card .purchase-summary-content h6,
.bills-summary-card .purchase-summary-content h3,
.bills-summary-card .purchase-summary-content p {
    color: #fff;
}


/* Purchase-return-summary-card */

.return-summary-card {
    background: #c77a00;
}

.return-summary-card .purchase-summary-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.return-summary-card .purchase-summary-content h6,
.return-summary-card .purchase-summary-content h3,
.return-summary-card .purchase-summary-content p {
    color: #fff;
}


/* Total-purchase-summary-card */

.total-purchase-summary-card {
    background: #7548c7;
}

.total-purchase-summary-card .purchase-summary-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.total-purchase-summary-card .purchase-summary-content h6,
.total-purchase-summary-card .purchase-summary-content h3,
.total-purchase-summary-card .purchase-summary-content p {
    color: #fff;
}


/* Purchase-summary-deep-background-end */
/* Purchase-summary-common */

.purchase-summary-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.purchase-summary-content {
    min-width: 0;
}

.purchase-summary-content h6 {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 600;
}

.purchase-summary-content h3 {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 700;
}

.purchase-summary-content p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.purchase-summary-content p i {
    margin-right: 4px;
}


/* Purchase-summary-end */


/* Purchase-orders-card-start */

.purchase-orders-card {
    width: 100%;
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(7, 27, 59, 0.04);
    overflow: hidden;
}


/* Purchase-orders-header-start */

.purchase-orders-header {
    width: 100%;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #edf1f6;
}

.purchase-orders-title h3 {
    margin: 0 0 5px;
    color: #071b3b;
    font-size: 18px;
    font-weight: 700;
}

.purchase-orders-title p {
    margin: 0;
    color: #718096;
    font-size: 13px;
}

.purchase-orders-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.purchase-search-box {
    width: 280px;
    height: 42px;
    border: 1px solid #dce3ec;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
}

.purchase-search-box i {
    color: #8a97a8;
    font-size: 14px;
}

.purchase-search-box input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    color: #071b3b;
    font-size: 13px;
    background: transparent;
}

.purchase-search-box input::placeholder {
    color: #9aa6b5;
}

.purchase-filter-btn {
    height: 42px;
    padding: 0 17px;
    border: 1px solid #dce3ec;
    border-radius: 8px;
    background: #fff;
    color: #071b3b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.purchase-filter-btn:hover,
.purchase-filter-btn.active {
    background: #071b3b;
    border-color: #071b3b;
    color: #fff;
}


/* Purchase-filter-panel-start */

.purchase-filter-panel {
    width: 100%;
    padding: 18px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #edf1f6;
    display: none;
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: end;
    gap: 15px;
}

.purchase-filter-panel.active {
    display: grid;
}

.purchase-filter-group {
    width: 100%;
}

.purchase-filter-group label {
    display: block;
    margin-bottom: 7px;
    color: #071b3b;
    font-size: 12px;
    font-weight: 600;
}

.purchase-filter-group select {
    width: 100%;
    height: 40px;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    outline: none;
    padding: 0 12px;
    background: #fff;
    color: #39475a;
    font-size: 13px;
}

.purchase-reset-filter-btn {
    height: 40px;
    padding: 0 17px;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    background: #fff;
    color: #e2262a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}


/* Purchase-table-wrapper-start */

.purchase-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.purchase-record-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.purchase-record-table th {
    padding: 15px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf4;
    color: #617086;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.purchase-record-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f6;
    color: #4b586a;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}

.purchase-record-table tbody tr:last-child td {
    border-bottom: 0;
}

.purchase-record-table tbody tr:hover {
    background: #fbfcfe;
}

.purchase-order-number {
    color: #1769d1;
    font-weight: 700;
}

.purchase-supplier-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.purchase-supplier-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: #edf5ff;
    color: #1769d1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.purchase-supplier-info span {
    color: #071b3b;
    font-weight: 600;
}

.purchase-record-table td strong {
    color: #071b3b;
    font-weight: 700;
}

.purchase-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.pending-status {
    background: #fff5df;
    color: #c77a00;
}

.received-status {
    background: #e7f8f1;
    color: #07815f;
}

.purchase-action-btns {
    display: flex;
    align-items: center;
    gap: 7px;
}

.purchase-action-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #e1e7ef;
    border-radius: 7px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.25s ease;
}

.view-purchase-btn {
    color: #1769d1;
}

.edit-purchase-btn {
    color: #087f8c;
}

.delete-purchase-btn {
    color: #e2262a;
}

.purchase-action-btn:hover {
    transform: translateY(-1px);
}

.view-purchase-btn:hover {
    background: #edf5ff;
    border-color: #1769d1;
}

.edit-purchase-btn:hover {
    background: #eaf9f6;
    border-color: #087f8c;
}

.delete-purchase-btn:hover {
    background: #fff0f1;
    border-color: #e2262a;
}


/* Purchase-management-modal-start */

.purchase-management-modal .modal-dialog {
    max-width: 1000px;
}

.purchase-management-modal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

.purchase-management-modal .modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #edf1f6;
}

.purchase-management-modal .modal-title {
    margin: 0 0 4px;
    color: #071b3b;
    font-size: 19px;
    font-weight: 700;
}

.purchase-management-modal .modal-header p {
    margin: 0;
    color: #718096;
    font-size: 12px;
}

.purchase-management-modal .modal-body {
    padding: 25px;
}

.purchase-management-modal .modal-footer {
    padding: 16px 25px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd;
}


/* Purchase-form-start */

.purchase-form-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.purchase-form-group {
    width: 100%;
}

.purchase-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #071b3b;
    font-size: 13px;
    font-weight: 600;
}

.purchase-form-group input,
.purchase-form-group select,
.purchase-form-group textarea {
    width: 100%;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    outline: none;
    padding: 11px 13px;
    background: #fff;
    color: #39475a;
    font-size: 13px;
    transition: 0.25s ease;
}

.purchase-form-group input,
.purchase-form-group select {
    height: 43px;
}

.purchase-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.purchase-form-group input:focus,
.purchase-form-group select:focus,
.purchase-form-group textarea:focus {
    border-color: #087f8c;
    box-shadow: 0 0 0 3px rgba(8, 127, 140, 0.08);
}


/* Purchase-items-start */

.purchase-items-section {
    width: 100%;
    margin-top: 25px;
}

.purchase-items-header {
    width: 100%;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.purchase-items-header h6 {
    margin: 0;
    color: #071b3b;
    font-size: 15px;
    font-weight: 700;
}

.purchase-add-item-btn {
    border: 0;
    border-radius: 7px;
    padding: 9px 14px;
    background: #eaf9f6;
    color: #087f8c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.purchase-items-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e8edf4;
    border-radius: 8px;
}

.purchase-items-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

.purchase-items-table th {
    padding: 11px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf4;
    color: #617086;
    font-size: 11px;
    text-align: left;
}

.purchase-items-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f6;
}

.purchase-items-table tr:last-child td {
    border-bottom: 0;
}

.purchase-items-table input {
    width: 100%;
    height: 38px;
    border: 1px solid #dce3ec;
    border-radius: 6px;
    outline: none;
    padding: 0 10px;
    font-size: 12px;
}

.purchase-remove-item-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: #fff0f1;
    color: #e2262a;
    cursor: pointer;
}

.purchase-total-box {
    width: 100%;
    max-width: 350px;
    margin: 20px 0 0 auto;
    padding: 15px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #f8fafc;
}

.purchase-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    color: #617086;
    font-size: 13px;
}

.purchase-total-row strong {
    color: #071b3b;
}

.purchase-grand-total {
    margin-top: 5px;
    padding-top: 13px;
    border-top: 1px solid #dce3ec;
    color: #071b3b;
    font-size: 15px;
    font-weight: 700;
}

.purchase-grand-total strong {
    color: #087f8c;
    font-size: 17px;
}


/* Purchase-modal-buttons-start */

.purchase-modal-cancel-btn {
    border: 1px solid #dce3ec;
    border-radius: 7px;
    padding: 10px 17px;
    background: #fff;
    color: #617086;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.purchase-modal-save-btn {
    border: 0;
    border-radius: 7px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #1769d1, #087f8c);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}


/* Purchase-view-start */

.purchase-view-header {
    width: 100%;
    padding: 17px;
    border-radius: 9px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.purchase-view-header span:first-child {
    display: block;
    margin-bottom: 4px;
    color: #718096;
    font-size: 11px;
}

.purchase-view-header h3 {
    margin: 0;
    color: #071b3b;
    font-size: 20px;
}

.purchase-view-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.purchase-view-item {
    padding: 15px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
}

.purchase-view-item span {
    display: block;
    margin-bottom: 5px;
    color: #718096;
    font-size: 11px;
}

.purchase-view-item strong {
    color: #071b3b;
    font-size: 13px;
}

.purchase-view-items {
    margin-top: 25px;
}

.purchase-view-items h6 {
    margin: 0 0 12px;
    color: #071b3b;
    font-size: 15px;
}

.purchase-view-item-row {
    padding: 13px 0;
    border-bottom: 1px solid #edf1f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.purchase-view-item-row div strong {
    display: block;
    margin-bottom: 4px;
    color: #071b3b;
    font-size: 13px;
}

.purchase-view-item-row div span {
    color: #718096;
    font-size: 11px;
}

.purchase-view-item-row>strong {
    color: #071b3b;
    font-size: 13px;
    white-space: nowrap;
}

.purchase-view-total {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    background: #071b3b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
}

.purchase-view-total span {
    font-size: 13px;
}

.purchase-view-total strong {
    color: #fff;
    font-size: 17px;
}


/* Purchase-edit-start */

.purchase-edit-notes {
    width: 100%;
    margin-top: 20px;
}


/* Purchase-management-responsive-start */

@media (max-width: 1100px) {

    .purchase-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .purchase-view-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 768px) {

    .purchase-management-container {
        padding: 0 15px;
    }

    .purchase-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .purchase-header-content h2 {
        font-size: 22px;
    }

    .purchase-header-action,
    .purchase-create-btn {
        width: 100%;
    }

    .purchase-summary-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .purchase-summary-card {
        padding: 16px;
    }

    .purchase-orders-header {
        padding: 18px 15px;
        align-items: stretch;
        flex-direction: column;
    }

    .purchase-orders-tools {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .purchase-search-box {
        width: 100%;
    }

    .purchase-filter-btn {
        width: 100%;
    }

    .purchase-filter-panel {
        padding: 15px;
        grid-template-columns: 1fr;
    }

    .purchase-reset-filter-btn {
        width: 100%;
    }

    .purchase-table-wrapper {
        overflow-x: auto;
    }

    .purchase-management-modal .modal-body {
        padding: 18px;
    }

    .purchase-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .purchase-view-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .purchase-management-container {
        padding: 0 12px;
    }

    .purchase-summary-card {
        padding: 14px;
    }

    .purchase-summary-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .purchase-summary-content h3 {
        font-size: 19px;
    }

    .purchase-orders-title h3 {
        font-size: 16px;
    }

    .purchase-management-modal .modal-header,
    .purchase-management-modal .modal-footer {
        padding: 15px;
    }

    .purchase-view-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .purchase-view-total {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* Purchase-management-section-end */








/* Call-disposal-history-section-start */

.call-disposal-history-section {
    width: 100%;
    padding: 0;
    background: #f5f8fc;
}

.call-disposal-history-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 25px;
}


/* Call-disposal-history-header-start */

.call-disposal-history-header {
    width: 100%;
    margin-bottom: 10px;
}

.call-disposal-history-header-content h2 {
    margin: 0 0 6px;
    color: #071b3b;
    font-size: 26px;
    font-weight: 700;
}

.call-disposal-history-header-content p {
    margin: 0;
    color: #3a3d43;
    font-size: 14px;
}


/* Call-disposal-history-card-start */

.call-disposal-history-card {
    width: 100%;
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(7, 27, 59, 0.04);
    overflow: hidden;
}


/* Filter */

.call-disposal-history-filter-header {
    width: 100%;
    padding: 20px 25px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr auto;
    align-items: end;
    gap: 15px;
    background: #fff;
    border-bottom: 1px solid #edf1f6;
}

.call-disposal-history-search-box {
    width: 100%;
    height: 42px;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
}

.call-disposal-history-search-box i {
    color: #8a97a8;
    font-size: 13px;
}

.call-disposal-history-search-box input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #071b3b;
    font-size: 13px;
}

.call-disposal-history-search-box input::placeholder {
    color: #9aa6b5;
}

.call-disposal-history-filter-group {
    width: 100%;
}

.call-disposal-history-filter-group label {
    display: block;
    margin-bottom: 7px;
    color: #071b3b;
    font-size: 14px;
    font-weight: 600;
}

.call-disposal-history-filter-group select,
.call-disposal-history-filter-group input {
    width: 100%;
    height: 42px;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    outline: none;
    padding: 0 11px;
    background: #fff;
    color: #39475a;
    font-size: 13px;
}

.call-disposal-history-filter-group select:focus,
.call-disposal-history-filter-group input:focus {
    border-color: #087f8c;
    box-shadow: 0 0 0 3px rgba(8, 127, 140, 0.08);
}

.call-disposal-history-reset-btn {
    height: 42px;
    padding: 0 16px;
    border: 1px solid #e1e7ef;
    border-radius: 7px;
    background: #fff;
    color: #e2262a;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: 0.25s ease;
}

.call-disposal-history-reset-btn:hover {
    background: #fff0f1;
    border-color: #e2262a;
}


/* Result */

.call-disposal-history-result-header {
    width: 100%;
    padding: 16px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #edf1f6;
}

.call-disposal-history-result-header p {
    margin: 0;
    color: #718096;
    font-size: 13px;
}

.call-disposal-history-result-header strong {
    color: #071b3b;
}


/* Table */

.call-disposal-history-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.call-disposal-history-table {
    width: 100%;
    min-width: 1250px;
    border-collapse: collapse;
}

.call-disposal-history-table th {
    padding: 14px 16px;
    background: #1576d6;
    border-bottom: 1px solid #e8edf4;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.call-disposal-history-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf1f6;
    color: #4b586a;
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
}

.call-disposal-history-table tbody tr:hover {
    background: #fbfcfe;
}

.call-disposal-history-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Business */

.call-disposal-business {
    display: flex;
    align-items: center;
    gap: 9px;
}

.call-disposal-business-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 7px;
    background: #edf5ff;
    color: #1769d1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-disposal-business strong {
    color: #071b3b;
    font-size: 12px;
}

.call-disposal-contact-name {
    color: #071b3b;
    font-weight: 600;
}

.call-disposal-date {
    color: #4b586a;
}

.call-disposal-phone {
    color: #1769d1;
    font-weight: 600;
    text-decoration: none;
}

.call-disposal-phone:hover {
    text-decoration: underline;
}


/* Call */

.call-disposal-call-btn {
    padding: 6px 10px;
    border-radius: 6px;
    background: #eaf9f6;
    color: #087f8c;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
}

.call-disposal-call-btn:hover {
    background: #087f8c;
    color: #fff;
}


/* Disposal */

.call-disposal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.call-disposal-connected {
    background: #e7f8f1;
    color: #07815f;
}

.call-disposal-followup {
    color: #718096;
}

.call-disposal-assigned {
    color: #071b3b;
    font-weight: 600;
}

.call-disposal-remarks {
    color: #718096;
    font-size: 11px;
}

/* Call-disposal-action-buttons-start */

.call-disposal-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.call-disposal-action-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e1e7ef;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: 0.25s ease;
    flex: 0 0 32px;
}

.call-disposal-action-btn:hover {
    transform: translateY(-1px);
}


/* Phone */

.call-disposal-phone-action {
    color: #087f8c;
}

.call-disposal-phone-action:hover {
    background: #eaf9f6;
    border-color: #087f8c;
    color: #087f8c;
}


/* WhatsApp */

.call-disposal-whatsapp-action {
    color: #25d366;
}

.call-disposal-whatsapp-action:hover {
    background: #e9fff1;
    border-color: #25d366;
    color: #25d366;
}


/* View */

.call-disposal-view-btn {
    color: #1769d1;
}

.call-disposal-view-btn:hover {
    background: #edf5ff;
    border-color: #1769d1;
}


/* Edit */

.call-disposal-edit-btn {
    color: #7548c7;
}

.call-disposal-edit-btn:hover {
    background: #f1eaff;
    border-color: #7548c7;
}


/* Delete */

.call-disposal-delete-btn {
    color: #e2262a;
}

.call-disposal-delete-btn:hover {
    background: #fff0f1;
    border-color: #e2262a;
}


/* Mobile */

@media (max-width: 768px) {

    .call-disposal-action-buttons {
        gap: 5px;
    }

    .call-disposal-action-btn {
        width: 31px;
        height: 31px;
        flex: 0 0 31px;
    }

}

/* Call-disposal-action-buttons-end */

/* Modal */

.call-disposal-history-modal .modal-dialog {
    max-width: 850px;
}

.call-disposal-history-modal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

.call-disposal-history-modal .modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #edf1f6;
}

.call-disposal-history-modal .modal-title {
    margin: 0 0 4px;
    color: #071b3b;
    font-size: 19px;
    font-weight: 700;
}

.call-disposal-history-modal .modal-header p {
    margin: 0;
    color: #718096;
    font-size: 12px;
}

.call-disposal-history-modal .modal-body {
    padding: 25px;
}

.call-disposal-history-modal .modal-footer {
    padding: 16px 25px;
    background: #fafbfd;
    border-top: 1px solid #edf1f6;
}


/* View */

.call-disposal-view-customer {
    width: 100%;
    padding: 18px;
    border-radius: 9px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 13px;
}

.call-disposal-view-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #edf5ff;
    color: #1769d1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.call-disposal-view-customer h3 {
    margin: 0 0 4px;
    color: #071b3b;
    font-size: 17px;
}

.call-disposal-view-customer span {
    color: #718096;
    font-size: 12px;
}

.call-disposal-view-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.call-disposal-view-item {
    padding: 15px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
}

.call-disposal-view-item span {
    display: block;
    margin-bottom: 5px;
    color: #718096;
    font-size: 11px;
}

.call-disposal-view-item strong {
    color: #071b3b;
    font-size: 13px;
}

.call-disposal-view-remarks {
    margin-top: 20px;
    padding: 16px;
    border-radius: 8px;
    background: #f8fafc;
}

.call-disposal-view-remarks h6 {
    margin: 0 0 8px;
    color: #071b3b;
    font-size: 14px;
}

.call-disposal-view-remarks p {
    margin: 0;
    color: #617086;
    font-size: 13px;
    line-height: 1.6;
}

.call-disposal-view-call-btn {
    margin-top: 18px;
    padding: 11px 18px;
    border-radius: 7px;
    background: #087f8c;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}


/* Edit form */

.call-disposal-form-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.call-disposal-form-group {
    width: 100%;
}

.call-disposal-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #071b3b;
    font-size: 13px;
    font-weight: 600;
}

.call-disposal-form-group input,
.call-disposal-form-group select,
.call-disposal-form-group textarea {
    width: 100%;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    outline: none;
    padding: 11px 13px;
    background: #fff;
    color: #39475a;
    font-size: 13px;
}

.call-disposal-form-group input,
.call-disposal-form-group select {
    height: 43px;
}

.call-disposal-form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.call-disposal-form-group input:focus,
.call-disposal-form-group select:focus,
.call-disposal-form-group textarea:focus {
    border-color: #087f8c;
    box-shadow: 0 0 0 3px rgba(8, 127, 140, 0.08);
}

.call-disposal-remarks-group {
    margin-top: 20px;
}


/* Modal buttons */

.call-disposal-modal-close-btn {
    border: 1px solid #dce3ec;
    border-radius: 7px;
    padding: 10px 17px;
    background: #fff;
    color: #617086;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.call-disposal-modal-save-btn {
    border: 0;
    border-radius: 7px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #1769d1, #087f8c);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}


/* Responsive */

@media (max-width: 1200px) {

    .call-disposal-history-filter-header {
        grid-template-columns: repeat(3, 1fr);
    }

    .call-disposal-history-search-box {
        grid-column: span 3;
    }

}


@media (max-width: 768px) {

    .call-disposal-history-container {
        padding: 0 15px;
    }

    .call-disposal-history-header-content h2 {
        font-size: 22px;
    }

    .call-disposal-history-filter-header {
        grid-template-columns: repeat(2, 1fr);
        padding: 18px 15px;
    }

    .call-disposal-history-search-box {
        grid-column: auto;
    }

    .call-disposal-history-reset-btn {
        width: 100%;
    }

    .call-disposal-history-result-header {
        padding: 14px 15px;
    }

    .call-disposal-history-table {
        min-width: 1250px;
    }

    .call-disposal-history-modal .modal-body {
        padding: 18px;
    }

    .call-disposal-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .call-disposal-view-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .call-disposal-history-container {
        padding: 0 0px;
    }

    .call-disposal-history-header-content h2 {
        font-size: 20px;
    }

    .call-disposal-history-modal .modal-header,
    .call-disposal-history-modal .modal-footer {
        padding: 15px;
    }

    .call-disposal-view-customer {
        align-items: flex-start;
    }

    .call-disposal-view-call-btn {
        width: 100%;
    }

}


/* Call-disposal-history-section-end */















/* settings-management-section-css-start */


.setting-management-section {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    margin-bottom: 25px;
}


.setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.setting-header-left h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #013068;
}

.setting-header-left p {
    margin: 6px 0 0;
    font-size: 14px;
    color: #667085;
}

.setting-header-right {
    display: flex;
    gap: 10px;
}

.setting-header-right .btn {
    height: 45px;
    border-radius: 10px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .setting-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .setting-header-right {
        width: 100%;
    }

    .setting-header-right .btn {
        flex: 1;
        justify-content: center;
    }

}

@media(max-width:767px) {

    .setting-management-section {
        padding: 18px;
    }

    .setting-header-left h3 {
        font-size: 20px;
    }

    .setting-header-left p {
        font-size: 13px;
    }



}

@media(max-width:575px) {

    .setting-header-right {
        flex-direction: column;
    }

    .setting-header-right .btn {
        width: 100%;
    }


}




/*==================================
USER TABLE
==================================*/

.setting-user-list {
    margin-top: 30px;
}

.setting-user-table {
    min-width: 1100px;
    margin-bottom: 0;
}

.setting-user-table thead th {
    background: #013068;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    padding: 14px;
}

.setting-user-table tbody td {
    vertical-align: middle;
    padding: 14px;
    white-space: nowrap;
    border-color: #eef2f7;
    font-size: 14px;
}

.setting-user-table tbody tr:hover {
    background: #f8fbff;
}

.user-table-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #edf2f7;
}

/* Role */

.role-badge {
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

.role-badge.admin {
    background: #e8f1ff;
    color: #0057d8;
}

.role-badge.employee {
    background: #f3f4f6;
    color: #555;
}

/* Status */

.status-badge {
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: #d1fae5;
    color: #0f8b4c;
}

.status-badge.inactive {
    background: #fde2e2;
    color: #d62828;
}

/* Actions */

.table-action {
    display: flex;
    gap: 8px;
}

.table-action .btn {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

/*=============================
DESKTOP
==============================*/

.user-card-list {
    display: none;
}

/*=============================
MOBILE CARD
==============================*/

.user-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
}

.user-card-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.user-card-top img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #edf2f7;
}

.user-card-top h5 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #013068;
}

.user-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.user-info label {
    display: block;
    font-size: 12px;
    color: #8b95a5;
    margin-bottom: 3px;
}

.user-info p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.user-card-action {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.user-card-action .btn {
    flex: 1;
    height: 42px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/*=============================
RESPONSIVE
==============================*/

@media (max-width:991px) {
    .setting-user-list {
        display: none;
    }

    .user-card-list {
        display: block;
    }
}

@media (max-width:575px) {
    .user-info {
        grid-template-columns: 1fr;
    }
}

/*====================================
LOGIN HISTORY TABLE
====================================*/

.login-history-table {
    margin-top: 25px;
}

.login-history-table table {
    min-width: 850px;
}

.login-history-table thead th {
    background: #013068;
    color: #fff;
    border: none;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.login-history-table tbody td {
    padding: 14px;
    vertical-align: middle;
    white-space: nowrap;
    border-color: #eef2f7;
}

.login-history-table tbody tr:hover {
    background: #f8fbff;
}

.log-test {
    font-size: 24px;
    color: #002d8c;
    font-weight: 600;
    margin-bottom: 10px;
}


.login-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-user img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.login-user span {
    font-weight: 600;
    color: #013068;
}

.login-time {
    color: #198754;
    font-weight: 600;
}

.logout-time {
    color: #dc3545;
    font-weight: 600;
}

/*==========================
Responsive
==========================*/

@media(max-width:991px) {

    .login-history-table table {
        min-width: 700px;
    }

}

/*==================================
LOGIN HISTORY MOBILE CARD
===================================*/

.login-history-card-list {
    display: none;
}

.login-history-card {
    background: #0d6efd1c;
    border: 1px solid #c9bbbb;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .06);
}

.login-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #c7bfbf;
}

.log-test-mobile {
    font-size: 16px;
    color: #002d8c;
    font-weight: 600;
    margin-bottom: 10px;
}

.login-card-header img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
}

.login-card-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #013068;
}

.login-card-header span {
    font-size: 13px;
    color: #6c757d;
}

.login-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-card-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.login-card-row label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.login-card-row span {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.login-card-row .login-time {
    color: #198754;
}

.login-card-row .logout-time {
    color: #dc3545;
}

/*==========================
Responsive
==========================*/

@media(max-width:991px) {

    .login-history-table {
        display: none;
    }

    .login-history-card-list {
        display: block;
    }

}

@media(max-width:575px) {

    .login-card-row {
        flex-direction: column;
        gap: 5px;
    }

    .login-card-row span {
        text-align: left;
    }

}

/* settings-management-section-css-end */

/* sync-btn-css-start */


.sidebar-bottom a.syncing i {
    animation: syncRotate .8s linear infinite;
}

@keyframes syncRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* sync-btn-css-end */