/*
    Professional cleaned stylesheet
    - Duplicate top-level selectors were merged.
    - Last conflicting property values were preserved.
    - Original file: style(1).css
*/


:root {
    scroll-behavior: smooth;
}

body {
    font-family: "Ysabbah_Font","Open Sans", sans-serif;
    background: #f6f9ff;
    color: #444444;
    direction: rtl;
}

a {
    color: #4154f1;
    text-decoration: none;
}

    a:hover {
        color: #717ff5;
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Ysabbah_Font", sans-serif;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    margin-top: 60px;
    padding: 12px 12px;
    transition: all 0.3s;
}

@media (max-width: 1199px) {
    #main {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
    margin-bottom: 5px;
}

    .pagetitle h1 {
        font-size: 24px;
        margin-bottom: 0;
        font-weight: 600;
        color: #058cd0;
    }

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    left: 15px;
    bottom: 15px;
    z-index: 99999;
    background: #4154f1;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

    .back-to-top i {
        font-size: 24px;
        color: #fff;
        line-height: 0;
    }

    .back-to-top:hover {
        background: #6776f4;
        color: #fff;
    }

    .back-to-top.active {
        visibility: visible;
        opacity: 1;
    }

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    animation-name: dropdown-animate;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

    .dropdown-menu .dropdown-header,
    .dropdown-menu .dropdown-footer {
        text-align: center;
        font-size: 15px;
        padding: 10px 25px;
    }

        .dropdown-menu .dropdown-footer a {
            color: #444444;
            text-decoration: underline;
        }

            .dropdown-menu .dropdown-footer a:hover {
                text-decoration: none;
            }

    .dropdown-menu .dropdown-divider {
        color: #a5c5fe;
        margin: 0;
    }

    .dropdown-menu .dropdown-item {
        font-size: 14px;
        padding: 10px 15px;
        transition: 0.3s;
    }

        .dropdown-menu .dropdown-item i {
            margin-right: 10px;
            font-size: 18px;
            line-height: 0;
        }

        .dropdown-menu .dropdown-item:hover {
            background-color: #f6f9ff;
        }

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        left: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

/* Light Backgrounds */
.bg-primary-light {
    background-color: #cfe2ff;
    border-color: #cfe2ff;
}

.bg-secondary-light {
    background-color: #e2e3e5;
    border-color: #e2e3e5;
}

.bg-success-light {
    background-color: #d1e7dd;
    border-color: #d1e7dd;
}

.bg-danger-light {
    background-color: #f8d7da;
    border-color: #f8d7da;
}

.bg-warning-light {
    background-color: #fff3cd;
    border-color: #fff3cd;
}

.bg-info-light {
    background-color: #cff4fc;
    border-color: #cff4fc;
}

.bg-dark-light {
    background-color: #d3d3d4;
    border-color: #d3d3d4;
}

/* Card */
.card {
    /*margin-bottom: 15px;*/
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
    direction: rtl;
}

.card-header, .card-footer {
    /*border-color: #ebeef4;*/
    background-color: #e5e4e2;
    color: #c16208;
    padding: 10px;
}

.card-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #012970;
    font-family: "Ysabbah_Font", sans-serif;
}

    .card-title span {
        color: #899bbd;
        font-size: 14px;
        font-weight: 400;
    }

.card-body {
    padding: 10px 20px 20px 20px;
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
    font-weight: 500;
    font-family: "Ysabbah_Font", sans-serif;
    font-size: 20px;
}

/* Close Button */
.btn-close {
    background-size: 25%;
}

    .btn-close:focus {
        outline: 0;
        box-shadow: none;
    }

/* Accordion */
.accordion-item {
    border: 1px solid #ebeef4;
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #012970;
    background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
    padding: 15px 0;
    background: none;
    border: 0;
}

    .accordion-flush .accordion-button:not(.collapsed) {
        box-shadow: none;
        color: #4154f1;
    }

.accordion-flush .accordion-body {
    padding: 0 0 15px 0;
    color: #3e4f6f;
    font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: 14px;
    font-family: "Ysabbah_Font", sans-serif;
    color: #899bbd;
    font-weight: 600;
    padding-top: 6px;
}

    .breadcrumb a {
        color: #899bbd;
        transition: 0.3s;
    }

        .breadcrumb a:hover {
            color: #51678f;
        }

    .breadcrumb .breadcrumb-item::before {
        color: #899bbd;
    }

    .breadcrumb .active {
        color: #51678f;
        font-weight: 600;
    }

/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4;
}

    .nav-tabs-bordered .nav-link {
        margin-bottom: -2px;
        border: none;
        color: #2c384e;
    }

        .nav-tabs-bordered .nav-link:hover,
        .nav-tabs-bordered .nav-link:focus {
            color: #4154f1;
        }

        .nav-tabs-bordered .nav-link.active {
            background-color: #8a1538;
            color: #ffffff;
            border-bottom: 2px solid #4154f1;
        }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
    line-height: 1;
}

@media (min-width: 1200px) {
    .logo {
        width: 295px;
    }
}

.logo img {
    max-height: 60px;
    margin-right: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo2 img {
    max-height: 164px;
    margin-right: 6px;
}

.logo span {
    font-size: 20px;
    font-weight: 700;
    color: #012970;
    font-family: "Ysabbah_Font", sans-serif;
    padding-right: 10px;
}

.header {
    transition: all 0.5s;
    z-index: 997;
    height: 60px;
    box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
    padding-left: 20px;
    /* Toggle Sidebar Button */
    /* Search Bar */
}

    .header .toggle-sidebar-btn {
        font-size: 32px;
        padding-left: 10px;
        cursor: pointer;
        color: #012970;
    }

    .header .search-bar {
        min-width: 360px;
        padding: 0 20px;
    }

@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
        background: white;
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

    .header .search-form input {
        border: 0;
        font-size: 14px;
        color: #012970;
        border: 1px solid rgba(1, 41, 112, 0.2);
        padding: 7px 38px 7px 8px;
        border-radius: 3px;
        transition: 0.3s;
        width: 100%;
    }

        .header .search-form input:focus,
        .header .search-form input:hover {
            outline: none;
            box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
            border: 1px solid rgba(1, 41, 112, 0.3);
        }

    .header .search-form button {
        border: 0;
        padding: 0;
        margin-right: -30px;
        background: none;
    }

        .header .search-form button i {
            color: #012970;
        }

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
}

.header-nav > ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #012970;
    margin-left: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: #012970;
}

    .header-nav .nav-profile img {
        max-height: 36px;
    }

    .header-nav .nav-profile span {
        font-size: 14px;
        font-weight: 600;
    }

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
}

.header-nav .notifications {
    inset: 8px auto auto !important;
}

    .header-nav .notifications .notification-item {
        display: flex;
        align-items: center;
        padding: 15px 10px;
        transition: 0.3s;
    }

        .header-nav .notifications .notification-item i {
            margin: 0 20px 0 10px;
            font-size: 24px;
        }

        .header-nav .notifications .notification-item h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .header-nav .notifications .notification-item p {
            font-size: 13px;
            margin-bottom: 3px;
            color: #919191;
        }

        .header-nav .notifications .notification-item:hover {
            background-color: #f6f9ff;
        }

.header-nav .messages {
    inset: 8px -15px auto auto !important;
}

    .header-nav .messages .message-item {
        padding: 15px 10px;
        transition: 0.3s;
    }

        .header-nav .messages .message-item a {
            display: flex;
        }

        .header-nav .messages .message-item img {
            margin: 0 20px 0 10px;
            max-height: 40px;
        }

        .header-nav .messages .message-item h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #444444;
        }

        .header-nav .messages .message-item p {
            font-size: 13px;
            margin-bottom: 3px;
            color: #919191;
        }

        .header-nav .messages .message-item:hover {
            background-color: #f6f9ff;
        }

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

    .header-nav .profile .dropdown-header h6 {
        font-size: 18px;
        margin-bottom: 0;
        font-weight: 600;
        color: #444444;
    }

    .header-nav .profile .dropdown-header span {
        font-size: 14px;
    }

    .header-nav .profile .dropdown-item {
        font-size: 14px;
        padding: 10px 15px;
        transition: 0.3s;
    }

        .header-nav .profile .dropdown-item i {
            margin-right: 10px;
            font-size: 18px;
            line-height: 0;
        }

        .header-nav .profile .dropdown-item:hover {
            background-color: #f6f9ff;
        }

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 300px;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #058cd0;
    direction: rtl;
}

@media (max-width: 1199px) {
    .sidebar {
        right: -300px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

@media (min-width: 1200px) {

    #main,
    #footer {
        margin-right: 300px;
    }
}

@media (max-width: 1199px) {
    .toggle-sidebar .sidebar {
        right: 0;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-right: 0;
    }

    .toggle-sidebar .sidebar {
        right: -300px;
    }
}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .sidebar-nav li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .sidebar-nav .nav-item {
        margin-bottom: 5px;
    }

    .sidebar-nav .nav-heading {
        font-size: 11px;
        text-transform: uppercase;
        color: #899bbd;
        font-weight: 600;
        margin: 10px 0 5px 15px;
    }

    .sidebar-nav .nav-link {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        color: #058cd0;
        transition: 0.3;
        background: #f6f9ff;
        padding: 10px 15px;
        border-radius: 4px;
        justify-content: space-around
    }

        .sidebar-nav .nav-link i {
            font-size: 20px;
            margin-left: 15px;
            color: #058cd0;
        }

        .sidebar-nav .nav-link.collapsed {
            color: #058cd0;
            background: #fff;
        }

            .sidebar-nav .nav-link.collapsed i {
                color: #d49a22;
            }

        .sidebar-nav .nav-link:hover {
            color: #058cd0;
            background: #fcde7e;
        }

            .sidebar-nav .nav-link:hover i {
                color: #c16208;
            }

        .sidebar-nav .nav-link .bi-chevron-down {
            margin-left: 0;
            transition: transform 0.2s ease-in-out;
        }

        .sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
            transform: rotate(180deg);
        }

    .sidebar-nav .nav-content {
        padding: 5px 0 0 0;
        margin: 0;
        list-style: none;
    }

        .sidebar-nav .nav-content a {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            transition: 0.3;
            padding: 10px 8px 10px 40px;
            transition: 0.3s;
        }

            .sidebar-nav .nav-content a i {
                font-size: 20px;
                margin-left: 5px;
                line-height: 0;
                border-radius: 50%;
            }

            .sidebar-nav .nav-content a:hover,
            .sidebar-nav .nav-content a.active {
                color: #b88326;
            }

                .sidebar-nav .nav-content a.active i {
                    background-color: #4154f1;
                }

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
    position: absolute;
    left: 0px;
    top: 15px;
}

    .dashboard .filter .icon {
        color: #aab7cf;
        padding-right: 20px;
        padding-bottom: 5px;
        transition: 0.3s;
        font-size: 16px;
    }

        .dashboard .filter .icon:hover,
        .dashboard .filter .icon:focus {
            color: #4154f1;
        }

    .dashboard .filter .dropdown-header {
        padding: 8px 15px;
    }

        .dashboard .filter .dropdown-header h6 {
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            color: #aab7cf;
            margin-bottom: 0;
            padding: 0;
        }

    .dashboard .filter .dropdown-item {
        padding: 8px 15px;
    }

/* Info Cards */
.dashboard .info-card {
    padding-bottom: 10px;
}

    .dashboard .info-card h6 {
        font-size: 28px;
        color: #012970;
        font-weight: 700;
        margin: 0;
        padding: 0;
    }

.dashboard .card-icon {
    font-size: 32px;
    line-height: 0;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    flex-grow: 0;
}

.dashboard .sales-card .card-icon {
    color: #4154f1;
    background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
    color: #2eca6a;
    background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
    color: rgb(255, 2, 2, 1.50);
    background: rgba(1, 41, 112, 0.1);
}

/* Activity */
.dashboard .activity {
    font-size: 14px;
}

    .dashboard .activity .activity-item .activite-label {
        color: #888;
        position: relative;
        flex-shrink: 0;
        flex-grow: 0;
        min-width: 64px;
    }

        .dashboard .activity .activity-item .activite-label::before {
            content: "";
            position: absolute;
            right: -11px;
            width: 4px;
            top: 0;
            bottom: 0;
            background-color: #eceefe;
        }

    .dashboard .activity .activity-item .activity-badge {
        margin-top: 3px;
        z-index: 1;
        font-size: 11px;
        line-height: 0;
        border-radius: 50%;
        flex-shrink: 0;
        border: 3px solid #fff;
        flex-grow: 0;
    }

    .dashboard .activity .activity-item .activity-content {
        padding-right: 10px;
        padding-bottom: 20px;
    }

    .dashboard .activity .activity-item:first-child .activite-label::before {
        top: 5px;
    }

    .dashboard .activity .activity-item:last-child .activity-content {
        padding-bottom: 0;
    }

/* News & Updates */
.dashboard .news .post-item + .post-item {
    margin-top: 15px;
}

.dashboard .news img {
    width: 80px;
    float: right;
    border-radius: 5px;
}

.dashboard .news h4 {
    font-size: 15px;
    margin-right: 95px;
    font-weight: bold;
    margin-bottom: 5px;
}

    .dashboard .news h4 a {
        color: #012970;
        transition: 0.3s;
    }

        .dashboard .news h4 a:hover {
            color: #4154f1;
        }

.dashboard .news p {
    font-size: 14px;
    color: #777777;
    margin-right: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
    font-size: 14px;
}

    .dashboard .recent-sales .table thead {
        background: #f6f6fe;
    }

        .dashboard .recent-sales .table thead th {
            border: 0;
        }

    .dashboard .recent-sales .dataTable-top {
        padding: 0 0 10px 0;
    }

    .dashboard .recent-sales .dataTable-bottom {
        padding: 10px 0 0 0;
    }

/* Top Selling */
.dashboard .top-selling {
    font-size: 14px;
}

    .dashboard .top-selling .table thead {
        background: #f6f6fe;
    }

        .dashboard .top-selling .table thead th {
            border: 0;
        }

    .dashboard .top-selling .table tbody td {
        vertical-align: middle;
    }

    .dashboard .top-selling img {
        border-radius: 5px;
        max-width: 60px;
    }

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
    display: grid;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding-top: 15px;
}

    .iconslist .icon {
        background-color: #fff;
        border-radius: 0.25rem;
        text-align: center;
        color: #012970;
        padding: 15px 0;
    }

    .iconslist i {
        margin: 0.25rem;
        font-size: 2.5rem;
    }

    .iconslist .label {
        font-family: var(--bs-font-monospace);
        display: inline-block;
        width: 100%;
        overflow: hidden;
        padding: 0.25rem;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666;
    }

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
    max-width: 120px;
}

.profile .profile-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2c384e;
    margin: 10px 0 0 0;
}

.profile .profile-card h3 {
    font-size: 18px;
}

.profile .profile-card .social-links a {
    font-size: 20px;
    display: inline-block;
    color: rgba(1, 41, 112, 0.5);
    line-height: 0;
    margin-left: 10px;
    transition: 0.3s;
}

    .profile .profile-card .social-links a:hover {
        color: #012970;
    }

.profile .profile-overview .row {
    margin-bottom: 20px;
    font-size: 15px;
}

.profile .profile-overview .card-title {
    color: #012970;
}

.profile .profile-overview .label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
    max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
    font-size: 18px;
    font-weight: 600;
    color: #4154f1;
}

.faq .basic p {
    color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    padding: 28px 30px;
}

    .contact .info-box i {
        font-size: 38px;
        line-height: 0;
        color: #4154f1;
    }

    .contact .info-box h3 {
        font-size: 20px;
        color: #012970;
        font-weight: 700;
        margin: 20px 0 10px 0;
    }

    .contact .info-box p {
        padding: 0;
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 0;
    }

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

    .contact .php-email-form .loading:before {
        content: "";
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0 10px -6px 0;
        border: 3px solid #18d26e;
        border-top-color: #eee;
        animation: animate-loading 1s linear infinite;
    }

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    border-radius: 0;
}

    .contact .php-email-form input:focus,
    .contact .php-email-form textarea:focus {
        border-color: #4154f1;
    }

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
    background: #4154f1;
    border: 0;
    padding: 10px 30px;
    color: #fff;
    transition: 0.4s;
    border-radius: 4px;
}

    .contact .php-email-form button[type=submit]:hover {
        background: #5969f3;
    }

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
    padding: 30px;
}

    .error-404 h1 {
        font-size: 180px;
        font-weight: 700;
        color: #4154f1;
        margin-bottom: 0;
        line-height: 150px;
    }

    .error-404 h2 {
        font-size: 24px;
        font-weight: 700;
        color: #012970;
        margin-bottom: 30px;
    }

    .error-404 .btn {
        background: #51678f;
        color: #fff;
        padding: 8px 30px;
    }

        .error-404 .btn:hover {
            background: #3e4f6f;
        }

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    padding: 20px 0;
    font-size: 14px;
    transition: all 0.3s;
    border-top: 1px solid #cddfff;
}

    .footer .copyright {
        text-align: center;
        color: #012970;
    }

    .footer .credits {
        padding-top: 5px;
        text-align: center;
        font-size: 13px;
        color: #012970;
    }

/*.table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}

*/

.table > thead > tr > th {
    background-color: #058cd0;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    /* background-color: #3d9520; */
    /* background-image: -webkit-linear-gradient(top, #589D3D, #3d9520); */
    background-image: -moz-linear-gradient(top, #589D3D, #3d9520);
    background-image: -o-linear-gradient(top, #589D3D, #3d9520);
    background-image: -ms-linear-gradient(top, #589D3D, #3d9520);
    background-image: linear-gradient(top, #589D3D, #3d9520);
    /* text-shadow: 1px 1px 5px #000;*/
    text-transform: uppercase;
    border-bottom: 2px solid #004f70;
}

.thead {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.Details-Border {
    margin-top: 10px;
    border-width: 1px;
    border-style: solid;
    padding: 20px;
    border-radius: 5px;
    border-color: #dee2e6;
    margin-bottom: 20px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #c16208;
    background-color: #e5e4e2;
    border-color: var(--bs-nav-tabs-link-active-border-color);
    font-weight: bold;
}

.tab-border {
    /* margin-top: -1px;*/
    border-width: 1px;
    border-style: solid;
    /*padding: 20px;*/
    border-radius: 5px;
    border-color: #dee2e6;
    /* margin-bottom: 20px;*/
    /* margin-top: 5px;*/
    padding: 20px;
}

.card-title-login {
    padding: 10px 0 15px 0;
    font-size: 16px !important;
    font-weight: 500;
    color: #012970;
    font-family: "Ysabbah_Font", sans-serif;
}

#articleList div {
    text-align: left;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

    #articleList div h3 {
        margin-bottom: 5px;
    }

    #articleList div p {
        margin-bottom: 5px;
    }

.toast {
    width: 350px;
    max-width: 100%;
    font-size: 0.875rem;
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.85);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

    .toast.showing {
        opacity: 0;
    }

    .toast:not(.show) {
        display: none;
    }

.toast-container {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    pointer-events: none;
}

    .toast-container > :not(:last-child) {
        margin-bottom: 0.75rem;
    }

.toast-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: #6c757d;
    background-color: rgba(255, 255, 255, 0.85);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

    .toast-header .btn-close {
        margin-right: -0.375rem;
        margin-left: 0.75rem;
    }

.toast-body {
    padding: 0.75rem;
    word-wrap: break-word;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    /* margin: 0.5rem;*/
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #058cd0;
    --bs-btn-border-color: #f7f7f7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b17b1b;
    --bs-btn-hover-border-color: #fefefe;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9E9E9E;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

table.dataTable {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: 14px;
}

.highlight_area {
    background: #8a1538;
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    font-weight: bold;
    color: #fff;
    border-radius: 6px;
    font-size: 20px;
}

.highlight_Status {
    line-height: 2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    font-weight: 600;
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-left: 14px;
    padding-right: 14px;
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    font-size: 13px;
    text-align: center;
    width: 100%;
}

.highlight_Priority {
    line-height: 2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    /* border-radius: .25em;*/
    font-weight: 600;
    display: inline-block;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 11px;
    padding-right: 11px;
    color: #fff;
    font-weight: 600;
    border-radius: 25px;
    font-size: 13px;
    text-align: center;
    /* width: 100%;*/
}

.right-btn {
    float: right;
}

.inprogress_btn {
    background-color: #ffc107;
}

    .inprogress_btn:hover {
        background-color: #f0bd23;
        color: #fff;
    }

.notificationPopupTitle {
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    color: #8a1538 !important;
}

.SubnotificationPopupTitle {
    font-size: 13px;
    display: inline-block;
}

.Feedback-btn {
    text-align: end;
}

/*.flexbox {
    display: -webkit-inline-box;*/
/*height: 500px;
    width: 500px;*/
/*}

*/

.alertArea {
    background-color: #cfe2ff;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.alertPermission {
    background-color: #fce8ee;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    color: #4154f1;
}

.progress, .progress-stacked {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: var(--bs-secondary-bg);
    --bs-progress-border-radius: var(--bs-border-radius);
    --bs-progress-box-shadow: var(--bs-box-shadow-inset);
    --bs-progress-bar-color: #fff;
    /* --bs-progress-bar-bg: #0d6efd; */
    /* --bs-progress-bar-transition: width 0.6s ease; */
    display: flex;
    height: var(--bs-progress-height);
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: #b1b1b240;
    border-radius: var(--bs-progress-border-radius);
    /* padding-top: 5px; */
    margin-top: 10px;
}

.sidebar-nav .nav-content a:hover {
    border-radius: 3px;
    padding: 10px 5px 10px 40px;
    transition: 0.3s;
    background-color: #b88326;
    color: #fff;
}

.RoomSpecification {
    color: #fff;
    background: #058cd0;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
}

.bookingNo {
    background-color: rgb(255, 2, 2, 1.50);
    padding: 4px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

.CodeAtt {
    background-color: rgb(255, 2, 2, 1.50);
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 2px;
    padding-top: 2px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

    .CodeAtt a:hover {
        background-color: rgb(255, 2, 2, 1.50);
        padding: 4px;
        border-radius: 8px;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
    }

.TableHeader {
    width: 100% !important;
}

.table > tbody {
    vertical-align: middle;
}

.Mainheader {
    background-color: #fafbfc;
    /*background-image: url("/../images/Flag.PNG");*/
    /* height:65px;
    background-size:cover;
    color:#fff;*/
}

.card-title2 {
    padding: 30px 0 0 0;
    font-size: 30px;
    font-weight: 600;
    color: #c16208;
    font-family: "Ysabbah_Font", sans-serif;
}

.CardBorder {
    border-style: solid;
    border-color: #058cd0;
    border-width: 1px;
    box-shadow: revert;
}

.ReadonlyControl {
}

.Number-Boarder {
    padding: 8px;
    font-size: 32px;
    font-weight: bolder;
    color: #c16208;
    border-radius: 8px;
    border-style: solid;
    border-width: 2px;
    border-color: #058cd0;
    background-color: #e5e4e2;
}

.datatable-pagination a {
    border: 1px solid transparent;
    float: right;
    margin-left: 2px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.Highlighting_Area {
    background-color: rgba(1, 41, 112, 0.1) !important;
    color: #012970;
    font-size: 17px;
    font-weight: bolder;
}

.Aggreement_Ar p {
    line-height: 17px;
    direction: rtl;
    font-size: 10px;
    padding-bottom: 0;
    margin: 2px;
}

/*p {
    font-size : 30px;
    padding : 0;
    margin : 30px;
    line-height : 20px;
}

*/

.Aggreement_En p {
    line-height: 17px;
    direction: rtl;
    font-size: 11px;
    padding-bottom: 0;
    margin: 2px;
}

label {
    color: #3e4f6f;
    font-size: 15px;
    font-weight: bold;
    padding-bottom: 2px;
    padding-top: 2px;
}

.dataTables_length {
    padding-top: 10px;
}

.BookingSpecification {
    padding: 15px;
    background-color: #3d9520;
    color: #fff;
    font-size: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.SideMenuWith {
    width: 160px;
}

.HeaderMenu {
    direction: ltr;
    width: 100%;
}

.breadcrumb-item + .breadcrumb-item {
    padding-right: var(--bs-breadcrumb-item-padding-x);
}

    .breadcrumb-item + .breadcrumb-item::before {
        float: right;
        padding-left: var(--bs-breadcrumb-item-padding-x);
        color: var(--bs-breadcrumb-divider-color);
        content: var(--bs-breadcrumb-divider, "/");
    }

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    text-align: center;
}

.productvariantstxt {
    width: 95px;
}

.productvariantsddlist {
    width: 100%;
    max-width: 260px;
}

.productvariantsUpload {
    width: 250px;
}

.productvariantsTableHeader {
    background-color: #4154f1;
    color: #fff;
    font-stretch: wider;
}

.form-label {
    margin-bottom: .3rem;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(5 140 208) !important;
}

.custom-checkbox {
    width: 14px;
    height: 14px;
    transform: scale(1.5); /* أفضل وأسهل طريقة لتكبير الـ checkbox */
    margin: 4px;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hidden by default */
    z-index: 1000; /* Ensures loader is above other elements */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Add shadow */
}

#overlay {
    position: fixed; /* Stay in place */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
    z-index: 1000; /* Below the loader */
    display: none; /* Hidden by default */
}

.zoom-image {
    transition: transform 0.3s ease;
    display: inline-block;
    overflow: hidden;
}

    .zoom-image:hover {
        transform: scale(1.2);
        z-index: 10;
        position: relative;
    }

#page-loading {
    position: fixed;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-border {
    width: 4rem;
    height: 4rem;
    border-width: .4em;
}

#global-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #global-loader.fade-out {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-out;
    }

.highlight-row {
    background-color: #f0f8ff !important;
    transition: background-color 0.3s ease;
}

.variant-checkbox {
    transform: scale(1.3); /* حجم أكبر */
    margin-right: 5px;
    cursor: pointer;
}

#productSelectionTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 15px;
}

#popupImage {
    max-height: 80vh;
    max-width: 100%;
}

.table {
    width: 100% !important;
    font-size: 15px;
}

    .table select,
    .table input,
    .table textarea {
        font-size: inherit;
    }

.product-card {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
}

    .product-card .card-header {
        padding: 14px 18px;
    }

.variant-table th {
    white-space: nowrap;
    vertical-align: middle;
}

.variant-image-box {
    min-width: 240px;
    text-align: center;
}

.variant-preview-img:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.image-popup-lens {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(33,37,41,.88);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    pointer-events: none;
}

.price-type-select,
.unit-select,
.conversion-input,
.price-input {
    min-width: 120px;
}

.default-checkbox {
    cursor: pointer;
}

.variant-pricing-card {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.variant-pricing-table th {
    white-space: nowrap;
    vertical-align: middle;
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    text-align: center;
}

.variant-pricing-table td {
    vertical-align: middle;
    text-align: center;
}

.variant-main-row {
    background: #ffffff;
    border-top: 2px solid #e2e8f0;
}

    .variant-main-row:hover {
        background: #f8fafc;
    }

.variant-code-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-weight: 700;
    font-size: 12px;
}

.sub-unit-header td {
    background: #f1f5f9;
    border-top: 0;
    padding: 10px 14px;
}

.sub-unit-header-box {
    display: grid;
    grid-template-columns: 1.05fr .85fr 1.2fr 1fr 1.2fr .7fr .85fr;
    gap: 10px;
    color: #475569;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    align-items: center;
}

.sub-unit-row td {
    background: #fbfdff;
    padding: 10px 14px;
    border-top: 0;
}

.sub-unit-grid {
    display: grid;
    grid-template-columns: 1.05fr .85fr 1.2fr 1fr 1.2fr .7fr .85fr;
    gap: 10px;
    align-items: center;
}

.pricing-extra-panel {
    margin-top: 10px;
    border: 1px dashed #cbd5e1;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    display: none;
    text-align: start;
}

    .pricing-extra-panel.active {
        display: block;
    }

.pricing-extra-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}

.pricing-extra-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}

.action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    width: 100%;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

    .pricing-badge.fixed {
        background: #ecfdf5;
        color: #047857;
        border-color: #bbf7d0;
    }

    .pricing-badge.auto {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .pricing-badge.seasonal {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }

    .pricing-badge.formula {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

    .pricing-badge.warning {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

.price-input[readonly] {
    background-color: #f8fafc;
    cursor: not-allowed;
}

.pricing-validation-message {
    margin-top: 8px;
    display: none;
}

    .pricing-validation-message.active {
        display: block;
    }

@media (max-width: 992px) {
    .sub-unit-header-box,
    .sub-unit-grid,
    .pricing-extra-grid {
        grid-template-columns: 1fr;
    }
}

.product-wizard-card {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.product-section-title {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.soft-panel {
    background: #f8fafc;
    border: 1px solid #e9eef5;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
}

.lookup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 5px 10px;
    margin: 3px;
    font-size: .85rem;
}

.variant-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

.variant-table td {
    vertical-align: middle;
    min-width: 130px;
}

    .variant-table td.variant-image-box {
        min-width: 250px;
    }

.variant-preview-img {
    width: 90px;
    height: 70px;
    max-width: 82px !important;
    max-height: 82px !important;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    padding: 3px;
    display: block;
    margin: 8px auto 0;
    cursor: zoom-in;
    transition: box-shadow .2s ease, transform .2s ease;
    margin-top: 8px;
}

.variant-image-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.field-required::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

.sub-category-hint {
    border-inline-start: 5px solid #6c757d;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px 14px;
}

.can-drag {
    cursor: grab;
}

.is-dragging {
    cursor: grabbing;
}

.sub-lookup-table {
    margin-bottom: 0;
    border: 1px solid #eef2f7;
    overflow: hidden;
    border-radius: 12px;
}

    .sub-lookup-table td {
        vertical-align: middle;
    }

    .sub-lookup-table .form-control,
    .sub-lookup-table .form-select {
        min-width: 120px;
    }

.required-star {
    color: #dc3545;
    font-weight: 700;
}

.product-identity-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.product-identity-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}

    .product-identity-header h6 {
        font-weight: 800;
        color: #1f2937;
    }

    .product-identity-header small {
        color: #64748b;
    }

.identity-badge {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.identity-note {
    height: 100%;
    min-height: 44px;
    border-radius: 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #075985;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

.identity-fields-panel {
    height: 100%;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
}

.product-identity-layout {
    direction: rtl;
}

.section-heading {
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 12px;
}

.product-details-card .form-label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 7px;
}

.product-details-card .form-control,
.product-details-card .form-select {
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid #dbe3ef;
    color: #0f172a;
    box-shadow: none;
}

    .product-details-card .form-control:focus,
    .product-details-card .form-select:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .10);
    }

.product-image-side {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 16px;
    min-height: 100%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}

    .product-image-side .main-product-image-preview {
        height: 260px;
        border: 1px solid #dbe3ef;
        border-radius: 12px;
        background: #ffffff;
    }

.image-actions-row .btn.d-none {
    display: none !important;
}

@media (max-width: 991.98px) {
    .product-image-side .main-product-image-preview {
        height: 220px;
    }

    .image-actions-row {
        grid-template-columns: 1fr;
    }
}

.product-details-card {
    border: 1px solid #e6edf7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

.section-heading h5 {
    font-weight: 800;
    color: #17365d;
}

.heading-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0d6efd;
    box-shadow: 0 0 0 5px rgba(13, 110, 253, .12);
    margin-left: 8px;
    vertical-align: middle;
}

.soft-badge {
    background: #f1f6ff;
    color: #0d6efd;
    border: 1px solid #dce9ff;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-basic-layout {
    direction: ltr;
    align-items: stretch;
}

    .product-basic-layout > [class*="col-"] {
        direction: rtl;
    }

.product-fields-col {
    order: 1;
}

.product-image-col {
    order: 2;
}

.product-fields-col .form-label {
    color: #243b5a;
    font-weight: 700;
    margin-bottom: 7px;
}

.product-fields-col .form-control,
.product-fields-col .form-select {
    border-color: #dce5f1;
    border-radius: 10px;
    min-height: 43px;
    box-shadow: none;
}

    .product-fields-col .form-control:focus,
    .product-fields-col .form-select:focus {
        border-color: #7aa7ff;
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .10);
    }

.field-required::after,
.required-star {
    content: " *";
    color: #dc3545;
    font-weight: 800;
}

.product-remarks {
    min-height: 92px;
    resize: vertical;
}

.rating-input-box {
    position: relative;
}

    .rating-input-box .form-control {
        padding-left: 42px;
    }

.rating-stars {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #f4b400;
    font-size: 18px;
}

.main-product-image-box {
    height: 100%;
    border: 1px solid #e1e9f4;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    min-height: 410px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 30px rgba(31, 48, 82, .06);
}

.image-box-title {
    text-align: center;
    color: #17365d;
    font-weight: 800;
    margin-bottom: 14px;
}

.main-product-image-preview {
    height: 245px;
    border-radius: 14px;
    border: 1px solid #dce5f1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}

    .main-product-image-preview::after {
        content: "تكبير";
        position: absolute;
        bottom: 10px;
        left: 10px;
        background: rgba(13, 110, 253, .92);
        color: #fff;
        border-radius: 999px;
        padding: 5px 10px;
        font-size: 11px;
        font-weight: 700;
        opacity: 0;
        transform: translateY(5px);
        transition: .2s ease;
    }

    .main-product-image-preview:hover::after {
        opacity: 1;
        transform: translateY(0);
    }

    .main-product-image-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
        padding: 10px;
    }

.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #7890ad;
    font-weight: 700;
    text-align: center;
}

    .image-placeholder i {
        font-size: 42px;
        color: #b6c5d8;
    }

    .image-placeholder span {
        font-weight: 800;
        color: #4c6383;
    }

.image-actions-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.image-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 18, 38, .78);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    backdrop-filter: blur(7px);
}

    .image-popup-backdrop.d-none {
        display: none !important;
    }

.image-popup-card {
    position: relative;
    width: min(1180px, 96vw);
    height: min(760px, 92vh);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.image-popup-header {
    height: 54px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5edf7;
    background: #f8f9fa;
    font-weight: 800;
    gap: 12px;
    min-height: 62px;
    color: #17365d;
}

.image-popup-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.image-popup-zoom-value {
    min-width: 58px;
    text-align: center;
    font-weight: 800;
    color: #0d6efd;
    background: #f2f7ff;
    border: 1px solid #dce9ff;
    border-radius: 8px;
    padding: 5px 8px;
}

.image-popup-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    padding: 0;
}

.image-popup-body {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(45deg, #f8fbff 25%, transparent 25%), linear-gradient(-45deg, #f8fbff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f8fbff 75%), linear-gradient(-45deg, transparent 75%, #f8fbff 75%);
    cursor: grab;
    touch-action: none;
    background-size: 26px 26px;
    background-position: 0 0, 0 13px, 13px -13px, -13px 0px;
    user-select: none;
}

    .image-popup-body.can-drag {
        cursor: grab;
    }

    .image-popup-body.is-dragging {
        cursor: grabbing;
    }

.image-popup-img {
    max-width: 94%;
    max-height: 88%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .08s linear;
    user-select: none;
    pointer-events: none;
    will-change: transform;
}

.image-popup-help {
    position: absolute;
    left: 18px;
    bottom: 14px;
    background: rgba(23, 54, 93, .9);
    color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
    pointer-events: none;
    right: 14px;
}

.lookup-card {
    border: 1px solid #e3ebf6;
    border-radius: 15px;
    padding: 14px;
    background: #fff;
    min-height: 105px;
    box-shadow: 0 10px 24px rgba(31, 48, 82, .05);
}

.lookup-card-title {
    font-size: .9rem;
    color: #17365d;
    margin-bottom: 12px;
    font-weight: 800;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.empty-lookup {
    color: #7890ad;
    font-size: .9rem;
    padding: 14px;
    border: 1px dashed #c9d8ea;
    border-radius: 12px;
    background: #f8fbff;
    text-align: center;
}

.sub-lookup-table thead th {
    background: #f5f8fd;
    color: #243b5a;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 800;
}

@media (max-width: 991.98px) {
    .product-basic-layout {
        direction: rtl;
    }

    .product-image-col,
    .product-fields-col {
        order: initial;
    }

    .main-product-image-box {
        min-height: auto;
    }
}

.suppliers-card .supplier-table-wrap {
    max-height: 340px;
    overflow: auto;
    border-radius: 10px;
}

.supplier-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0d8ec7;
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
}

.supplier-table input,
.supplier-table select {
    min-height: 32px;
    font-size: 15px;
}

.supplier-notes {
    font-size: 12px;
    color: #64748b;
    background: #f8fafc;
    border-radius: 8px;
    padding: 7px 10px;
}

.supplier-row-disabled {
    opacity: .65;
}

/* Professional supplier selector: same clean radio style used in default price column */
.supplier-table-wrap {
    border: 1px solid #dbe7f3;
    border-radius: 12px;
    background: #fff;
}

.supplier-table {
    margin-bottom: 0;
}

    .supplier-table tbody td {
        vertical-align: middle;
        padding: 8px 10px;
    }

    .supplier-table .supplier-name-cell {
        text-align: start;
        font-weight: 700;
        color: #0f172a;
    }

.supplier-action-cell {
    width: 96px;
    text-align: center;
}

.supplier-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 72px;
    padding: 4px 8px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #f8fbff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

    .supplier-check-box input {
        margin: 0;
        min-height: auto !important;
    }

    .supplier-check-box.is-active {
        background: #e8f3ff;
        border-color: #0d6efd;
        color: #0d6efd;
    }

.supplier-radio-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
}

    .supplier-radio-box input[type="radio"] {
        width: 16px;
        height: 16px;
        margin: 0;
        min-height: auto !important;
        cursor: pointer;
    }

        .supplier-radio-box input[type="radio"]:disabled {
            cursor: not-allowed;
            opacity: .35;
        }

.supplier-row-disabled .supplier-name-cell,
.supplier-row-disabled .supplier-radio-box {
    opacity: .55;
}

.product-variant-card {
    transition: all .2s ease-in-out;
}

    .product-variant-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
    }

.variant-img-box {
    width: 125px;
    height: 125px;
    border: 1px solid #edf0f3;
    border-radius: 20px;
    padding: 8px;
    background: #fff;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    flex: 0 0 125px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.variant-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease-in-out;
}

.variant-img-box:hover .variant-img {
    transform: scale(1.08);
}

.variant-img-overlay {
    position: absolute;
    inset-inline: 8px;
    bottom: 8px;
    border-radius: 12px;
    background: rgba(13, 110, 253, .92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transform: translateY(8px);
    transition: all .2s ease-in-out;
}

.variant-img-box:hover .variant-img-overlay {
    opacity: 1;
    transform: translateY(0);
}

.details-panel {
    border: 1px solid #edf0f3;
    border-radius: 18px;
    background: #fff;
    padding: 14px;
    height: 100%;
}

.details-title {
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.unit-list,
.supplier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unit-item,
.supplier-item {
    border: 1px solid #edf0f3;
    background: #fafafa;
    border-radius: 14px;
    padding: 10px 12px;
}

.unit-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.supplier-name {
    color: #1f2937;
}

.supplier-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #6c757d;
    font-size: 12px;
}

.attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.attribute-item {
    border: 1px solid #edf0f3;
    background: #fafafa;
    border-radius: 14px;
    padding: 10px 12px;
}

    .attribute-item span {
        display: block;
        color: #6c757d;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .attribute-item b {
        font-size: 14px;
    }

.empty-mini {
    border: 1px dashed #dee2e6;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    color: #8a8f98;
    background: #fafafa;
}

.image-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #edf0f3;
}

.image-preview-stage {
    min-height: 70vh;
    max-height: 75vh;
    background: #111827;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
}

    .image-preview-stage.dragging {
        cursor: grabbing;
    }

.product-preview-img {
    max-width: 90%;
    max-height: 68vh;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .12s ease-out;
    will-change: transform;
}

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.pagination-info {
    font-size: 13px;
    color: #6c757d;
}

.pagination-modern {
    gap: 6px;
    flex-wrap: wrap;
}

    .pagination-modern .page-link {
        min-width: 38px;
        height: 38px;
        border-radius: 12px !important;
        border: 1px solid #e7eaee;
        color: #495057;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        transition: all .2s ease-in-out;
    }

        .pagination-modern .page-link:hover {
            background: #f5f7fb;
            color: #0d6efd;
            border-color: #cfe2ff;
        }

    .pagination-modern .page-item.active .page-link {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
        box-shadow: 0 6px 14px rgba(13,110,253,.25);
    }

    .pagination-modern .page-item.disabled .page-link {
        background: #f8f9fa;
        color: #adb5bd;
        pointer-events: none;
    }

@media (max-width: 576px) {
    .variant-img-box {
        width: 100px;
        height: 100px;
        flex-basis: 100px;
    }

    .image-preview-stage {
        min-height: 55vh;
    }
}

.pv-list {
    --pv-primary: #0d6efd;
    --pv-soft-bg: #f7f9fc;
    --pv-border: #e8edf5;
    --pv-text: #172033;
    --pv-muted: #6c7586;
}

.pv-empty-state {
    border: 1px dashed var(--pv-border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
    border-radius: 22px;
    padding: 56px 20px;
}

.product-variant-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pv-border) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .product-variant-card::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, #0d6efd, #20c997);
    }

    .product-variant-card:hover {
        transform: translateY(-2px);
        border-color: #d8e3f4 !important;
        box-shadow: 0 18px 42px rgba(17, 38, 74, .09) !important;
    }

.pv-card-body {
    padding: 20px 22px;
}

.pv-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--pv-border);
}

.pv-main-info {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-width: 0;
}

.variant-img-box {
    position: relative;
    width: 116px;
    height: 116px;
    flex: 0 0 116px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--pv-border);
    background: var(--pv-soft-bg);
    cursor: zoom-in;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.variant-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.variant-img-box:hover .variant-img {
    transform: scale(1.06);
}

.variant-img-overlay {
    position: absolute;
    inset-inline: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background: rgba(15, 23, 42, .74);
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(6px);
    transition: .18s ease;
}

.variant-img-box:hover .variant-img-overlay,
.variant-img-box:focus .variant-img-overlay {
    opacity: 1;
    transform: translateY(0);
}

.pv-title-area {
    min-width: 0;
}

.pv-product-title {
    color: var(--pv-text);
    font-size: 1.08rem;
    line-height: 1.5;
}

.pv-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}

.pv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--pv-border);
    border-radius: 999px;
    background: #fbfcfe;
    color: var(--pv-muted);
    font-size: 12px;
}

    .pv-meta-item b {
        color: var(--pv-text);
        font-weight: 800;
    }

.pv-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pv-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .pv-action-group .btn {
       /* border-radius: 12px;*/
        font-weight: 700;
        padding-inline: 13px;
    }

.pv-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.pv-summary-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--pv-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    padding: 12px;
}

.pv-summary-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef5ff;
    color: var(--pv-primary);
    font-size: 18px;
}

.pv-summary-label {
    display: block;
    color: var(--pv-muted);
    font-size: 12px;
}

.pv-summary-value {
    display: block;
    color: var(--pv-text);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}

.details-panel {
    height: 100%;
    min-height: 185px;
    border: 1px solid var(--pv-border);
    border-radius: 18px;
    background: #fff;
    padding: 15px;
    box-shadow: 0 8px 18px rgba(17, 38, 74, .035);
}

.details-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--pv-text);
    font-weight: 900;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pv-border);
}

    .details-title span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.empty-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    border-radius: 14px;
    border: 1px dashed #d8e0ec;
    background: #fbfcff;
    color: var(--pv-muted);
    font-size: 13px;
}

.unit-list,
.supplier-list {
    display: grid;
    gap: 9px;
    max-height: 215px;
    overflow: auto;
    padding-inline-end: 3px;
}

.unit-item,
.supplier-item {
    border: 1px solid #edf1f7;
    border-radius: 14px;
    background: var(--pv-soft-bg);
    padding: 10px 12px;
}

.unit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.supplier-name {
    color: var(--pv-text);
}

.attributes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    max-height: 215px;
    overflow: auto;
    padding-inline-end: 3px;
}

.attribute-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    background: var(--pv-soft-bg);
    min-width: 0;
}

    .attribute-item span {
        color: var(--pv-muted);
        font-size: 13px;
    }

    .attribute-item b {
        color: var(--pv-text);
        font-size: 13px;
        text-align: end;
        overflow-wrap: anywhere;
    }

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--pv-border);
    background: #fff;
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 8px 22px rgba(17, 38, 74, .04);
}

.pagination-info {
    color: var(--pv-muted);
    font-size: 13px;
}

.pagination-modern {
    gap: 6px;
    flex-wrap: wrap;
}

    .pagination-modern .page-link {
        min-width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px !important;
        border: 1px solid var(--pv-border);
        color: var(--pv-text);
        font-weight: 800;
    }

    .pagination-modern .page-item.active .page-link {
        color: #fff;
        background: var(--pv-primary);
        border-color: var(--pv-primary);
        box-shadow: 0 8px 18px rgba(13, 110, 253, .22);
    }

    .pagination-modern .page-item.disabled .page-link {
        background: #f6f8fb;
        color: #a2abb9;
    }

.product-image-modal .modal-content {
    box-shadow: 0 24px 70px rgba(2, 8, 23, .22);
}

.image-toolbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border-bottom: 1px solid var(--pv-border);
}

    .image-toolbar .btn {
        border-radius: 12px;
        font-weight: 700;
    }

.image-preview-stage {
    height: min(72vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(13,110,253,.08), transparent 32%), #0f172a;
    cursor: grab;
    user-select: none;
}

    .image-preview-stage.dragging {
        cursor: grabbing;
    }

.product-preview-img {
    max-width: 94%;
    max-height: 94%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .08s ease;
    border-radius: 10px;
    background: #fff;
}

@media (max-width: 992px) {
    .pv-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 576px) {
    .pv-card-body {
        padding: 16px;
    }

    .pv-main-info {
        width: 100%;
        flex-direction: column;
    }

    .variant-img-box {
        width: 100%;
        height: 210px;
        flex-basis: auto;
    }

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

    .pv-action-group {
        width: 100%;
    }

        .pv-action-group .btn {
            flex: 1;
        }
}

.product-groups-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e5edf7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(15, 35, 70, .05);
}

.groups-picker-box {
    min-height: 64px;
    max-height: 330px;
    overflow-y: auto;
    border: 1px dashed #d6e1ef;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.product-group-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    border: 1px solid #e1e9f4;
    border-radius: 14px;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
    transition: .2s ease-in-out;
}

    .product-group-option:hover,
    .product-group-option.is-selected {
        border-color: #0d6efd;
        background: #f3f8ff;
        box-shadow: 0 8px 20px rgba(13, 110, 253, .08);
    }

    .product-group-option .group-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eef5ff;
        color: #0d6efd;
        flex: 0 0 34px;
    }

    .product-group-option .group-text {
        font-weight: 700;
        color: #19345d;
        line-height: 1.4;
    }

    /*------------ 4.7.2026 --------------*/


.variant-edit-shell {
    display: grid;
    grid-template-columns: 230px minmax(0,1fr);
    gap: 1rem;
    align-items: start
}

.variant-edit-nav {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 18px;
    padding: .75rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.04)
}

    .variant-edit-nav .nav-link {
        display: flex;
        gap: .55rem;
        align-items: center;
        color: #495057;
        border-radius: 12px;
        padding: .65rem .75rem;
        margin-bottom: .25rem;
        text-decoration: none
    }

        .variant-edit-nav .nav-link:hover, .variant-edit-nav .nav-link.active {
            background: #f3f6ff;
            color: #0d6efd
        }

.variant-edit-content {
    min-width: 0
}

.edit-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 18px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.035);
    scroll-margin-top: 90px
}

.edit-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    border-bottom: 1px dashed #dee2e6;
    padding-bottom: 1rem;
    margin-bottom: 1rem
}

    .edit-card-header h5 {
        font-weight: 800;
        margin-bottom: .25rem
    }

    .edit-card-header p {
        color: #6c757d;
        margin-bottom: 0
    }

.relation-badge {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .78rem;
    white-space: nowrap
}

.relation-note {
    background: #fff8e1;
    border: 1px solid #ffe8a3;
    border-radius: 12px;
    padding: .75rem;
    color: #664d03
}

.section-subtitle {
    font-weight: 800
}

.professional-table {
    border: 1px solid #edf0f2;
    border-radius: 12px;
    overflow: hidden
}

    .professional-table thead th {
        background: #f8f9fa;
        color: #495057;
        font-weight: 800
    }

.lookup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap: .75rem
}

.lookup-card {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: .8rem;
    background: #fff
}

    .lookup-card.is-selected {
        border-color: #0d6efd;
        background: #f8fbff
    }

.lookup-card-title {
    font-weight: 800
}

.save-bar {
    position: sticky;
    bottom: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border: 1px solid #e9ecef;
    border-radius: 18px;
    padding: 1rem;
    display: flex;
    justify-content: end;
    gap: .5rem;
    box-shadow: 0 -8px 28px rgba(0,0,0,.04)
}

@media(max-width:992px) {
    .variant-edit-shell {
        grid-template-columns: 1fr
    }

    .variant-edit-nav {
        position: relative;
        top: auto;
        display: flex;
        overflow: auto
    }

        .variant-edit-nav .nav-link {
            white-space: nowrap
        }
}

.variant-workspace-nav {
    position: sticky;
    top: 72px;
    z-index: 30;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .75rem;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    background: rgba(255,255,255,.96);
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .06);
    backdrop-filter: blur(8px);
}

.workspace-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem;
    border-radius: .75rem;
    color: #495057;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    border: 1px solid transparent;
    transition: all .2s ease-in-out;
}

    .workspace-nav-link:hover,
    .workspace-nav-link.active {
        color: #0d6efd;
        background: #f0f6ff;
        border-color: #d8e8ff;
    }

.product-edit-workspace .workspace-section {
    border-radius: 1.1rem;
    overflow: hidden;
    scroll-margin-top: 155px;
}

.workspace-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
    border-bottom: 1px solid #edf0f3;
}

    .workspace-section-header.compact {
        min-height: 104px;
    }

    .workspace-section-header h5 {
        margin: 0 0 .35rem 0;
        font-weight: 800;
        color: #212529;
    }

    .workspace-section-header p {
        margin: 0;
        color: #6c757d;
        font-size: .9rem;
    }

.workspace-section-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.workspace-section-body {
    padding: 1.25rem;
}

.workspace-toggle i {
    transition: transform .2s ease;
}

.workspace-toggle.is-collapsed i {
    transform: rotate(180deg);
}

.product-id-section input[readonly] {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
    font-weight: 600;
    cursor: default;
    opacity: 1;
}


.professional-attributes-table th {
    white-space: nowrap;
    background: #f8fafc;
}

.professional-attributes-table td {
    vertical-align: middle;
}

.attribute-value-cell .form-select,
.attribute-value-cell .form-control {
    min-width: 180px;
}

.show-product-variant-page .form-control,
.show-product-variant-page .form-select {
    background-color: #f8f9fa !important;
    pointer-events: none;
}

.show-product-variant-page textarea.form-control {
    resize: none;
}

.show-product-variant-page .image-actions-row label,
.show-product-variant-page #clearMainProductImageBtn,
.show-product-variant-page .remove-price-row,
.show-product-variant-page #addPriceRowBtn {
    display: none !important;
}

.show-product-variant-page .workspace-section {
    scroll-margin-top: 90px;
}

.show-product-variant-page .readonly-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: #eef6ff;
    color: #0d6efd;
    font-weight: 700;
    font-size: .85rem;
}

/* Inventory professional shared styles */
.inventory-card {
    border-radius: 18px;
    overflow: hidden
}

.inventory-page-title h1 {
    font-weight: 700
}

.inventory-card .form-label {
    font-weight: 600;
    color: #344054
}

.inventory-table th {
    white-space: nowrap
}

.inventory-switch {
    padding: 12px 48px 12px 12px;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    width: 100%;
    background: #fff
}

.select2-container--default .select2-selection--single {
    height: 32px;
    border: 1px solid #ced4da;
    border-radius: .375rem
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 38px
    }


#detailsBody .detail-row {
    transition: background-color .28s ease, box-shadow .28s ease, opacity .24s ease, transform .24s ease;
}

    #detailsBody .detail-row.row-entering {
        opacity: 0;
        transform: translateY(-12px) scale(.992);
    }

    #detailsBody .detail-row.row-entered {
        animation: stockRowHighlight 1.15s ease both;
    }

    #detailsBody .detail-row.row-removing {
        opacity: 0;
        transform: translateX(-18px) scale(.985);
        pointer-events: none;
    }

    #detailsBody .detail-row.row-selected {
        box-shadow: inset 4px 0 0 var(--bs-primary);
    }

    #detailsBody .detail-row:focus-within {
        position: relative;
        z-index: 2;
        box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .10);
    }

#btnAddRow.is-adding,
#btnAddFooterRow.is-adding {
    pointer-events: none;
    transform: scale(.97);
    transition: transform .16s ease;
}

@keyframes stockRowHighlight {
    0% {
        background-color: rgba(var(--bs-success-rgb), .16);
    }

    55% {
        background-color: rgba(var(--bs-success-rgb), .07);
    }

    100% {
        background-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    #detailsBody .detail-row, #btnAddRow, #btnAddFooterRow {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

.color-box {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.reservation-details-page {
    --surface-border: #e8ebf0;
    --muted-bg: #f8fafc;
}

.page-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid var(--surface-border);
    border-radius: 18px;
    padding: 1.35rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.reservation-number {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .85rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: .86rem;
    white-space: nowrap;
}

.metric-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--surface-border);
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .035);
}

.metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.metric-label {
    color: #6c757d;
    font-size: .78rem;
    margin-bottom: .15rem;
}

.metric-value {
    font-size: 1.15rem;
    font-weight: 800;
}

.section-card {
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

    .section-card > .card-header {
        background: #fff;
        padding: 1rem 1.2rem;
        border-bottom: 1px solid var(--surface-border);
    }

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.info-item {
    background: var(--muted-bg);
    border: 1px solid #edf0f4;
    border-radius: 12px;
    padding: .85rem;
    min-height: 78px;
}

    .info-item.wide {
        grid-column: span 2;
    }

.info-label {
    color: #6c757d;
    font-size: .76rem;
    margin-bottom: .32rem;
}

.info-value {
    color: #1f2937;
    font-weight: 700;
    word-break: break-word;
}

.detail-product {
    min-width: 235px;
}

.product-code {
    font-size: .76rem;
    color: #6c757d;
    margin-top: .15rem;
}

.storage-cell {
    min-width: 190px;
}

.storage-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #e5e9ef;
    background: #f8fafc;
    border-radius: 8px;
    padding: .28rem .5rem;
    margin: .12rem .08rem;
    font-size: .76rem;
}

.quantity-main {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.quantity-sub {
    font-size: .73rem;
    color: #6c757d;
}

.row-progress {
    min-width: 145px;
}

    .row-progress .progress {
        height: 6px;
        border-radius: 999px;
        background: #edf1f5;
    }

    .row-progress .progress-bar {
        border-radius: 999px;
    }

.professional-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
    border-bottom-width: 1px;
}

.professional-table td {
    vertical-align: middle;
    border-color: #edf0f4;
}

.professional-table tbody tr:hover {
    background: #fbfcfe;
}

.empty-state {
    padding: 3.5rem 1rem;
    text-align: center;
    color: #6c757d;
}

.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    padding: .85rem;
    box-shadow: 0 -5px 20px rgba(15, 23, 42, .05);
}

@media (max-width: 991.98px) {
    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .info-item.wide {
        grid-column: span 1;
    }
}

.reserved-list-page {
    --card-border: #e7ebf0;
    --soft-bg: #f8fafc;
}

.page-heading-card {
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff 0%, #f7f9fc 100%);
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.summary-card {
    height: 100%;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .035);
}

.summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.summary-label {
    color: #6c757d;
    font-size: .78rem;
}

.summary-value {
    font-weight: 800;
    font-size: 1.12rem;
    font-variant-numeric: tabular-nums;
}

.filter-card,
.list-card {
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

    .filter-card .card-header,
    .list-card .card-header {
        background: #fff;
        border-bottom: 1px solid var(--card-border);
        padding: 1rem 1.2rem;
    }

.reservation-no {
    font-weight: 800;
    color: #1f2937;
    text-decoration: none;
}

    .reservation-no:hover {
        color: #0d6efd;
    }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    border-radius: 999px;
    padding: .38rem .7rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.priority-badge {
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .73rem;
    font-weight: 700;
}

.details-count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e8ebef;
    padding: .3rem .5rem;
    font-size: .75rem;
}

.qty-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.professional-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
    border-bottom-width: 1px;
}

.professional-table td {
    vertical-align: middle;
    border-color: #edf0f4;
}

.professional-table tbody tr:hover {
    background: #fbfcfe;
}

.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: #6c757d;
}

.action-buttons .btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}


/* Shared Stock Reservation UI */
.page-heading-card, .page-hero, .filter-card, .list-card, .section-card {
    border: 1px solid #e7ebf0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.04)
}

.summary-card, .metric-card {
    border: 1px solid #e7ebf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15,23,42,.035)
}

.professional-table thead th {
    background: #f8fafc;
    font-weight: 700;
    color: #475569
}

.professional-table tbody tr:hover {
    background: #fbfcfe
}

.status-badge, .status-pill {
    border-radius: 999px;
    padding: .35rem .75rem;
    color: #fff;
    font-weight: 700
}

.storage-chip, .details-count {
    background: #f8fafc;
    border: 1px solid #e7ebf0;
    border-radius: 8px;
    padding: .25rem .5rem
}

.reservation-page {
    --sr-primary: #0d6efd;
    --sr-primary-dark: #0a58ca;
    --sr-border: #e7ebf0;
    --sr-muted: #6c757d;
    --sr-soft: #f8fafc;
    --sr-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    padding-top: 1rem;
    padding-bottom: 2rem;
}

    .reservation-page .reservation-hero {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--sr-border);
        border-radius: 18px;
        background: radial-gradient(circle at top left, rgba(13, 110, 253, .12), transparent 34%), linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
        box-shadow: var(--sr-shadow);
        padding: 1.35rem 1.5rem;
        margin-bottom: 1.25rem;
    }

        .reservation-page .reservation-hero::after {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(13, 110, 253, .05);
            inset-inline-end: -75px;
            top: -85px;
            pointer-events: none;
        }

    .reservation-page .hero-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        background: rgba(13, 110, 253, .12);
        color: var(--sr-primary);
        font-size: 1.35rem;
    }

    .reservation-page .hero-title {
        font-size: 1.45rem;
        font-weight: 800;
        color: #1f2937;
        margin-bottom: .2rem;
    }

    .reservation-page .hero-subtitle {
        color: var(--sr-muted);
        font-size: .92rem;
        margin: 0;
    }

    .reservation-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--sr-border);
        padding: .45rem .8rem;
        color: #495057;
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
    }

    .reservation-page .reservation-card,
    .reservation-page .card {
        border: 1px solid var(--sr-border);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
        overflow: hidden;
    }

    .reservation-page .card-header {
        background: #fff;
        border-bottom: 1px solid var(--sr-border);
        padding: 1rem 1.2rem;
    }

    .reservation-page .card-body {
        padding: 1.2rem;
    }

    .reservation-page .form-label {
        color: #374151;
        font-weight: 700;
        font-size: .84rem;
        margin-bottom: .45rem;
    }

    .reservation-page .form-control,
    .reservation-page .form-select,
    .reservation-page .select2-container .select2-selection--single {
        border-color: #dfe4ea;
        border-radius: 10px;
        min-height: 42px;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

        .reservation-page .form-control:focus,
        .reservation-page .form-select:focus {
            border-color: rgba(13, 110, 253, .55);
            box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .10);
        }

        .reservation-page .form-control[readonly] {
            background: #f8fafc;
        }

    .reservation-page .required::after {
        content: " *";
        color: #dc3545;
    }

    .reservation-page .alert {
        border-radius: 12px;
    }

    .reservation-page .page-actions {
        position: sticky;
        bottom: 12px;
        z-index: 30;
        margin-top: 1.25rem;
        padding: .9rem 1rem;
        border: 1px solid var(--sr-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
        box-shadow: 0 -4px 22px rgba(15, 23, 42, .07);
    }

    .reservation-page .action-note {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: var(--sr-muted);
        font-size: .82rem;
    }

    .reservation-page .btn {
        border-radius: 10px;
        font-weight: 700;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
    }

    .reservation-page .btn-primary {
        background: linear-gradient(135deg, var(--sr-primary), var(--sr-primary-dark));
        border-color: var(--sr-primary);
        box-shadow: 0 6px 16px rgba(13, 110, 253, .22);
    }

        .reservation-page .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(13, 110, 253, .28);
        }

    .reservation-page .btn-light {
        background: #fff;
        border: 1px solid var(--sr-border);
        color: #495057;
    }

        .reservation-page .btn-light:hover {
            background: var(--sr-soft);
            border-color: #d7dde5;
        }

    .reservation-page .text-danger.small {
        display: block;
        margin-top: .3rem;
    }

    .reservation-page .select2-container {
        width: 100% !important;
    }

    .reservation-page .select2-container--default .select2-selection--single {
        display: flex;
        align-items: center;
    }

        .reservation-page .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
            padding-inline: .8rem 2.2rem;
            line-height: 1.35;
            white-space: normal;
        }

.reservation-card {
    border: 1px solid #e7e9ee;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    overflow: hidden;
}

    .reservation-card > .card-header {
        background: #fff;
        border-bottom: 1px solid #edf0f4;
        padding: 1rem 1.25rem;
    }

.reservation-line-card {
    position: relative;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
}

    .reservation-line-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }

    .reservation-line-card.is-loading {
        opacity: .65;
        pointer-events: none;
    }

.reservation-line-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: .85rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed #e4e8ee;
}

.line-number-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #0d6efd;
    font-weight: 700;
}

.balance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}

.balance-kpi {
    border-radius: 12px;
    padding: .75rem;
    border: 1px solid #e8ebef;
    background: #f8fafc;
}

.balance-kpi-label {
    display: block;
    color: #6c757d;
    font-size: .78rem;
    margin-bottom: .2rem;
}

.balance-kpi strong {
    font-size: 1rem;
}

.onhand-kpi strong {
    color: #0d6efd;
}

.reserved-kpi strong {
    color: #fd7e14;
}

.available-kpi strong {
    color: #198754;
}

.selected-balance-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.reservation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
}

.summary-item {
    text-align: center;
}

    .summary-item span {
        display: block;
        color: #6c757d;
        font-size: .82rem;
    }

    .summary-item strong {
        display: block;
        margin-top: .2rem;
        font-size: 1.05rem;
    }

.processed-line-note {
    background: #fff8e6;
    border: 1px solid #ffe2a8;
    color: #7a5300;
    border-radius: 10px;
    padding: .75rem 1rem;
}


.select2-container .select2-selection--single {
    min-height: 42px;
    display: flex;
    align-items: center;
    border-color: #dee2e6;
}



@media (max-width: 767.98px) {
    .reservation-page .reservation-hero {
        padding: 1rem;
    }

    .reservation-page .hero-title {
        font-size: 1.2rem;
    }

    .reservation-page .page-actions {
        position: static;
        flex-direction: column;
        align-items: stretch !important;
    }

        .reservation-page .page-actions > div:last-child {
            width: 100%;
        }

        .reservation-page .page-actions .btn {
            flex: 1 1 auto;
        }
}

.alloc-page {
    --b: #e7ebf0;
    --soft: #f8fafc;
    --primary: #0d6efd;
    padding: 1rem 0 2rem
}

.alloc-hero, .alloc-card {
    border: 1px solid var(--b);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.045)
}

.alloc-hero {
    padding: 1.25rem;
    background: linear-gradient(135deg,#fff,#f7f9fc)
}

.alloc-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: var(--primary);
    font-size: 1.25rem
}

.alloc-card {
    overflow: hidden
}

    .alloc-card .card-header {
        background: #fff;
        border-bottom: 1px solid var(--b);
        padding: 1rem 1.2rem
    }

    .alloc-card .card-body {
        padding: 1.2rem
    }

.metric {
    border: 1px solid var(--b);
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
    height: 100%
}

    .metric small {
        color: #6c757d
    }

    .metric strong {
        display: block;
        font-size: 1.15rem;
        margin-top: .15rem
    }

.form-label {
    font-weight: 700;
    color: #374151
}

.form-control, .form-select {
    border-radius: 10px;
    min-height: 42px;
    border-color: #dfe4ea
}

    .form-control:focus, .form-select:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.1)
    }

.prof-table thead th {
    background: var(--soft);
    font-size: .76rem;
    color: #475569;
    white-space: nowrap
}

.prof-table td {
    vertical-align: middle;
    border-color: #edf0f4
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .75rem;
    font-weight: 700
}

.action-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 9px
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .85rem
}

.info-item {
    background: var(--soft);
    border: 1px solid #edf0f4;
    border-radius: 12px;
    padding: .85rem
}

.info-label {
    font-size: .76rem;
    color: #6c757d;
    margin-bottom: .25rem
}

.info-value {
    font-weight: 700;
    word-break: break-word
}

.page-actions {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--b);
    border-radius: 14px;
    padding: .85rem;
    box-shadow: 0 -4px 20px rgba(15,23,42,.06)
}


@media(max-width:767.98px) {
    .info-grid {
        grid-template-columns: 1fr
    }

    .page-actions {
        position: static
    }
}

.alloc-page {
    --alloc-border: #e7ebf0;
    --alloc-soft: #f8fafc;
    --alloc-primary: #0d6efd;
    padding: 1rem 0 2rem;
}

.alloc-hero,
.alloc-card {
    border: 1px solid var(--alloc-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}

.alloc-hero {
    padding: 1.25rem;
    background: radial-gradient(circle at top left, rgba(13, 110, 253, .12), transparent 35%), linear-gradient(135deg, #fff, #f7f9fc);
}

.alloc-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: var(--alloc-primary);
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.alloc-card {
    overflow: visible;
}

    .alloc-card .card-header {
        background: #fff;
        border-bottom: 1px solid var(--alloc-border);
        padding: 1rem 1.2rem;
    }

    .alloc-card .card-body {
        padding: 1.25rem;
    }

.form-label {
    color: #374151;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .45rem;
}

.required::after {
    content: " *";
    color: #dc3545;
}

.form-control,
.form-select {
    min-height: 42px;
    border-radius: 10px;
    border-color: #dfe4ea;
}

    .form-control:focus,
    .form-select:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .1);
    }

.field-help {
    margin-top: .35rem;
    color: #6c757d;
    font-size: .76rem;
}

.allocation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.allocation-summary-item {
    background: var(--alloc-soft);
    border: 1px solid #edf0f4;
    border-radius: 12px;
    padding: .8rem;
}

    .allocation-summary-item small {
        display: block;
        color: #6c757d;
        margin-bottom: .2rem;
    }

    .allocation-summary-item strong {
        display: block;
        color: #1f2937;
    }

.page-actions {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    margin-top: 1.25rem;
    padding: .9rem 1rem;
    border: 1px solid var(--alloc-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .06);
}


.empty-lookup-warning {
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-top: .5rem;
}

@media (max-width: 767.98px) {
    .allocation-summary {
        grid-template-columns: 1fr;
    }

    .page-actions {
        position: static;
        flex-direction: column;
        align-items: stretch !important;
    }
}

.adjust-page {
    --b: #e7ebf0;
    --soft: #f8fafc;
    --primary: #0d6efd;
    padding: 1rem 0 2rem
}

.adjust-hero, .adjust-card {
    border: 1px solid var(--b);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.045)
}

.adjust-hero {
    padding: 1.25rem;
    background: radial-gradient(circle at top left,rgba(13,110,253,.12),transparent 35%),linear-gradient(135deg,#fff,#f7f9fc)
}

.adjust-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: var(--primary);
    font-size: 1.3rem
}

.adjust-card {
    overflow: visible
}

    .adjust-card .card-header {
        background: #fff;
        border-bottom: 1px solid var(--b);
        padding: 1rem 1.2rem
    }

    .adjust-card .card-body {
        padding: 1.2rem
    }

.form-label {
    font-weight: 700;
    color: #374151
}

.required::after {
    content: " *";
    color: #dc3545
}

.form-control, .form-select {
    border-radius: 10px;
    min-height: 42px;
    border-color: #dfe4ea
}

.detail-row {
    border: 1px solid var(--b);
    border-radius: 14px;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1rem
}

.detail-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #e5e7eb;
    padding-bottom: .8rem;
    margin-bottom: 1rem
}

.line-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #0d6efd;
    font-weight: 800
}

.balance-kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .6rem
}

.balance-kpi {
    background: var(--soft);
    border: 1px solid #edf0f4;
    border-radius: 11px;
    padding: .65rem
}

    .balance-kpi small {
        display: block;
        color: #6c757d
    }

    .balance-kpi strong {
        display: block;
        margin-top: .15rem
    }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .75rem
}

.summary-item {
    background: var(--soft);
    border: 1px solid #edf0f4;
    border-radius: 12px;
    padding: .8rem;
    text-align: center
}

    .summary-item small {
        display: block;
        color: #6c757d
    }

    .summary-item strong {
        display: block;
        margin-top: .2rem
    }

.diff-in {
    color: #198754
}

.diff-out {
    color: #dc3545
}

.diff-zero {
    color: #6c757d
}

.page-actions {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--b);
    border-radius: 14px;
    padding: .85rem;
    box-shadow: 0 -4px 20px rgba(15,23,42,.06)
}

.prof-table thead th {
    background: var(--soft);
    color: #475569;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap
}

.prof-table td {
    vertical-align: middle;
    border-color: #edf0f4
}

.status-chip {
    display: inline-flex;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .75rem;
    font-weight: 700
}


@media(max-width:767.98px) {
    .balance-kpis, .summary-grid {
        grid-template-columns: 1fr
    }

    .page-actions {
        position: static
    }
}

.input-group
{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    flex-direction: row-reverse;
}
/*---------------------------------Orders YMIS------------------------------------*/