@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

:root {
    --font: "Rubik", sans-serif;

    /* Base Colors */
    --white-color: #fff;
    --black-color: #000;
    --black-50: rgba(0, 0, 0, 0.8);

    --primary-color: #F7CB45;
    --primary-light: #F7CB4540;
    --primary-bg: #F7CB454D;
    --primary-dark-color: #E9BA1B;
    --accent-color: #318616;
    --body-color: #F7CB4508;
    --assest-color: #fff;
    --text-secondary: #9096B2;
    --border-light: #e2e8f0;
    --primary-rgb: 26 26 46;
    --white-rgb: 0 0 0;
    --black-rgb: 255 255 255;

    --green-color: #318616;
    --red-color: #DC3545;
    --red-color-rgb: 220 53 69;
    --yellow-color: #F7CB45;
    --blue-color: #2563EB;
    --purple-color: #7C3AED;
    --dark-color: #1F2937;

}

[data-theme="dark"] {
    --black-50: rgba(255, 255, 255, 0.7);

    --primary-color: #F7CB45;
    --primary-light: #F7CB4540;
    --primary-bg: #F7CB454D;
    --primary-dark-color: #E9BA1B;
    --accent-color: #318616;

    --body-color: #111827;
    --assest-color: #1D2733;
    --text-secondary: #A7B0C3;
    --border-light: rgba(255, 255, 255, 0.20);

    --primary-rgb: 247 203 69;
    --white-rgb: 29 39 51;
    --black-rgb: 248 250 252;

    --green-color: #318616;
    --red-color: #DC3545;
    --red-color-rgb: 220 53 69;
    --yellow-color: #F7CB45;
    --blue-color: #60A5FA;
    --purple-color: #A78BFA;

}

html,
body {
    height: 100%;
    overflow: auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background-color: var(--body-color);
    font-size: 14px;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
}

.defaultfont {
    font-family: var(--font);
}

a {
    text-decoration: none !important;
}

.primary-color {
    color: var(--primary-color) !important;
}

.primary-bg {
    background-color: var(--primary-color) !important;
}

.text-gray {
    color: var(--partition-color);
    opacity: 0.6;
}

.text-black {
    color: var(--partition-color);
}

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

.btn-link {
    color: var(--primary-color) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--primary-color);
    display: inline-block;
    padding: 0 0 0px;
    border-radius: 0;
    font-size: 14px;
}

.btn-default {
    background: var(--primary-color);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 8px 20px;
}

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

.upload-btn {
    background: var(--primary-color) !important;
    color: var(--white-color) !important;
}

.upload-btn:hover {
    background: var(--white-color) !important;
    border: 2px dashed var(--primary-color) !important;
    color: var(--primary-color) !important;
}



.mw-120 {
    min-width: 120px;
}

.mw-150 {
    min-width: 150px;
}

.btn-icon {
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--primary-color);
}

.dropright .dot-icon {
    height: 18px;
}

.dropright .dropdown-menu {
    top: 100% !important;
    right: 0;
    -webkit-transform: none !important;
    transform: none !important;
    left: auto !important;
}

.dropdown-menu {
    -webkit-box-shadow: 0 15px 35px var(--assest-color);
    box-shadow: 0 15px 35px var(--assest-color);
    padding: 4px;
    border: 0;
    border-radius: 12px;
}

.dropdown-menu .dropdown-item {
    font-weight: 500;
    border-bottom: 2px dashed var(--assest-color);
    padding: 7px 11px;
    font-size: 14px;
}

.dropdown-menu .dropdown-item:last-child {
    border-bottom: 0;
}

.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: var(--assest-color);
    border-radius: .25rem
}

.breadcrumb a {
    color: var(--primary-color);
    font-weight: bold;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    padding-left: .5rem;
    content: "/"
}

.breadcrumb-item.active {
    color: var(--partition-color)
}

/* Unified sidebar toggle — shared by the sidebar header (desktop) and
   the page header (responsive/mobile). Both buttons use identical
   size, icon, hover, active, and transition behaviour. */
.side-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    gap: 4px;
    flex-shrink: 0;
    background: var(--primary-light);
    border: 1px solid var(--primary-bg);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.side-toggle:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
}

.side-toggle:active {
    transform: scale(0.93);
}

.side-toggle span {
    display: block;
    background: var(--black-50);
    width: 16px;
    height: 2px;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease;
    margin: 0;
}

.side-toggle span:nth-child(2) {
    width: 11px;
    align-self: flex-start;
    margin-left: 3px;
}

.custom-control .custom-control-label::before {
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 3px;
    font-size: xx-small;
}

.custom-control .custom-control-input:checked~.custom-control-label::after {
    border-radius: 3px;
    background: var(--primary-color);
}

.custom-control.custom-radio .custom-control-label::before,
.custom-control.custom-radio .custom-control-label:after {
    border-radius: 50% !important;
}


@media (min-width: 1680px) {
    .right-content {
        margin-left: 280px;
    }
}

.right-content.right-content-0 {
    margin-left: 80px;
}

/* The header toggle visibility is governed entirely by the media-query
   rules below — no blanket hide here so mobile behaviour is unaffected. */

.avatar-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.body-content {
    padding: 25px;
}

.avatar-control {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.avatar-control .avatar-img {
    height: 50px;
    width: 50px;
    border-radius: 20%;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-striped tbody tr:nth-of-type(even) {
    background: color-mix(in srgb, var(--primary-light) 30%, transparent) !important;
}

.table {
    border-color: var(--body-color);
    /* color: var(--body-color); */
    min-width: 650px;
}

.table thead th {
    font-size: 14px;
    font-weight: 600;
    border-top: 0;
    border-bottom: 1px solid var(--body-color);
    background-color: var(--body-color);
}

.table td {
    font-size: 14px;
    border-bottom: 1px solid var(--body-color);
    border-top: 0;
    vertical-align: middle;
}

.table .avatar-img {
    margin-right: 10px;
}

.table .clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.table .btn {
    padding: 2px;
    background: transparent;
    margin: 0 3px;
}

.table .btn img {
    width: 16px;
}

.table tfoot {
    background-color: var(--assest-color);
}

.dot {
    height: 8px;
    width: 8px;
    background: var(--red-color);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.custom-tabs {
    margin: 20px 0;
    background: var(--assest-color);
    border-radius: 100px;
}

.custom-tabs li.nav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
}

.custom-tabs .nav-link {
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--black-color);
    padding: 10px;
}

.custom-tabs .nav-link.active {
    background: var(--primary-color);
}

/* ─── Compact pill tabs (content-width only) ─────────────────────────────── */
.custom-tabs-compact {
    display: inline-flex;
    background: var(--assest-color);
    border-radius: 100px;
    margin: 20px 0;
    padding: 4px;
    border: 1px solid var(--border-light);
}

.custom-tabs-compact li.nav-item {
    flex: 0 0 auto;
    text-align: center;
}

.custom-tabs-compact .nav-link {
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--black-color);
    padding: 8px 28px;
    transition: background 0.18s ease;
    white-space: nowrap;
}

.custom-tabs-compact .nav-link:hover:not(.active) {
    background: var(--primary-light);
}

.custom-tabs-compact .nav-link.active {
    background: var(--primary-color);
    color: var(--black-color);
}

.summary-table-card .border-card {
    padding: 10px;
    border: 2px solid var(--assest-color);
    border-radius: 15px;
    margin-bottom: 15px;
    font-size: 14px;
}

.summary-table-card .border-card:hover {
    border: 2px solid var(--primary-color);
}

.summary-table-card .border-card>.row {
    margin: 0;
}

.summary-table-card .border-card>.row .col,
.summary-table-card .border-card>.row .col-1,
.summary-table-card .border-card>.row .col-2,
.summary-table-card .border-card>.row .col-12 {
    padding: 0;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.summary-table-card .avatar-control {
    min-width: 120px;
    font-weight: 600;
}

.summary-table-card .avatar-control img {
    margin-right: 8px;
}

.summary-table-card .price {
    color: var(--red-color);
    font-weight: 600;
}

.artist-row {
    margin: 0 -10px;
}

.artist-row .col-6 {
    padding: 0 10px;
}

.artist-grid-card {
    padding: 15px;
    border: 1px solid var(--body-color);
    border-radius: 5px;
    margin: 20px 0 0;
    text-align: center;
}

.artist-grid-card .name {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 5px;
}

.artist-grid-card .post {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 15px;
}

.artist-grid-card .detanils {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hashtag-card {
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: 5px solid var(--primary-color);
    border-radius: 0px;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--white-color);
}

.hashtag-card>.row {
    margin: 0;
}

.hashtag-card>.row .col,
.hashtag-card>.row .col-2 .hashtag-card>.row .col-10 {
    padding: 0;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: start;
}

.video-box {
    padding: 25px;
    background: var(--assest-color);
}

.video-box .f600 {
    font-weight: 600;
}

.video-box .box-border-0 {
    border: 0;
    padding-bottom: 0;
}

.page-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--body-color);
    border-radius: 8px;
    padding: 7px;
}

.page-search .input-group-text,
.page-search .form-control {
    border: 0;
    background: transparent;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    font-size: 14px;
}

.page-search .input-group-text img,
.page-search .form-control img {
    width: 20px;
}

.page-search .sorting {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 290px;
    background: var(--white-color);
    padding: 2px 12px;
    border-radius: 8px;
}

.page-search .sorting label {
    min-width: 60px;
    margin: 0;
    font-weight: 600;
}

.pagination {
    padding: 5px;
    border: 1px solid var(--body-color);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    border-radius: 10px;
    margin: 35px auto 0;
}

.pagination .page-link {
    border: 0;
    height: 30px;
    width: 30px;
    background: var(--body-color) !important;
    margin: 0 5px;
    border-radius: 50px !important;
    color: var(--primary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pagination .page-link .right-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.pagination .page-link .dots {
    font-weight: 600;
    margin-top: -4px;
}

.pagination .arrow-icon {
    height: 20px;
    width: 20px;
    background-image: url("../../assets/imgs/left-arrow.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px;
}

.pagination .arrow-icon .next-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.pagination .active .page-link {
    background: var(--primary-color) !important;
}

.modal-content {
    background-color: var(--assest-color);
}

.modal .close {
    font-size: 34px;
    color: var(--white-color);
    opacity: 1;
    position: absolute;
    right: 5px;
    top: 0px;
    font-weight: 200;
    z-index: 22;
    outline: none;
}

.inline-tabs {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    z-index: 2;
}

.inline-tabs li.nav-item {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.inline-tabs .nav-link {
    padding: 10px 35px;
}

.app-right-btn {
    text-align: right;
    margin-top: -60px;
    margin-bottom: 30px;
}

.custom-border-card {
    /* background: var(--assest-color); */
    -webkit-box-shadow: 0 15px 35px var(--assest-color);
    box-shadow: 0 15px 35px var(--body-color);
    border: 1px solid var(--assest-color);
    padding: 20px 25px;
    border-radius: 15px;
    margin-bottom: 25px;
}

.custom-border-card .card-header {
    font-size: 18px;
    background: transparent;
    padding: 0;
    font-weight: 700;
    border-bottom: 2px solid var(--body-color);
    padding-bottom: 15px;
    color: var(--partition-color);
}

.custom-border-card .card-body {
    padding: 18px 0 10px;
}

.form-group label {
    font-weight: 500;
    color: var(--partition-color);
    font-size: 14px;
    margin-bottom: 10px;
}

.form-control,
.custom-select {
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.55;
    height: auto !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--primary-color);
    -webkit-box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
    outline: none;
}

.file-control {
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 15px;
    cursor: pointer;
}

.file-control span {
    opacity: 0.6;
    display: inline-block;
    margin-top: 10px;
}

.thumbnail-img {
    position: relative;
    border: 1px solid var(--assest-color);
    display: inline-block;
    height: 100px;
    width: 130px;
    border-radius: 10px;
    padding: 4px;
}

.thumbnail-img img {
    border-radius: 8px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.thumbnail-img .close {
    position: absolute;
    top: 5px;
    right: 8px;
    color: var(--white-color);
    opacity: 1;
    font-weight: 300;
}

.radio-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
}

.radio-group .custom-control {
    padding-left: 0;
    margin-right: 15px;
}

.radio-group .custom-control-label {
    margin-bottom: 0;
    background: var(--assest-color);
    padding: 6px 23px 6px 33px;
    border-radius: 100px;
    font-size: 16px;
}

.radio-group .custom-control-label::before,
.radio-group .custom-control-label:after {
    border-radius: 50%;
    top: 10px;
    left: 10px;
}

.radio-group .custom-control-label:after {
    display: none;
}

.radio-group .custom-control-label::before {
    background: transparent;
    border: 3px solid var(--body-color);
}

.radio-group .custom-control-input:checked~.custom-control-label {
    background: var(--primary-color);
    color: var(--white-color);
}

.radio-group .custom-control-input:checked~.custom-control-label::before {
    background: var(--primary-color);
    border-color: var(--white-color);
}

.page-title-sm {
    display: none;
}

.border-bottom {
    border-color: var(--assest-color) !important;
}

table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:before {
    content: "↑";
}

table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc_disabled:after {
    content: "↓";
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--assest-color);
    border-radius: 8px;
    padding: 6px 18px;
    font-weight: 600;
}

div.dataTables_wrapper div.dataTables_length label .form-control,
div.dataTables_wrapper div.dataTables_filter label .form-control {
    padding: 6px 12px;
    text-align: center;
    margin: 0 13px;
}

div.dataTables_wrapper div.dataTables_length label input.form-control,
div.dataTables_wrapper div.dataTables_filter label input.form-control {
    margin-right: 0;
    text-align: left;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child,
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
    overflow: auto;
}


@media (min-width: 1600px) {
    .counter-row {
        margin-bottom: 20px;
    }

    /* .table thead th,
    .table td {
        font-size: 16px;
    } */

    .custom-tabs .nav-link,
    .summary-table-card .border-card {
        font-size: 16px;
    }

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

    .custom-border-card .card-header {
        font-size: 20px;
    }
}

@media (max-width: 1280px) {
    .header .input-group {
        width: 280px;
    }
}

@media (max-width: 991px) {
    /* .sidebar {
        left: -280px;
    }

    .sidebar.hide-sidebar {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        left: 0;
        z-index: 99;
        width: 280px;
    }

    .sidebar.hide-sidebar .side-toggle span:first-child {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .sidebar.hide-sidebar .side-toggle span:nth-child(2) {
        display: none;
    }

    .sidebar.hide-sidebar .side-toggle span:last-child {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        margin-top: -5px;
    } */

    .right-content {
        margin-left: 0 !important;
    }

    .right-content .page-title {
        display: none;
    }

    .counter-row .col-md {
        padding-right: 5px;
        padding-left: 5px;
    }

    .page-title-sm {
        font-size: 26px;
        font-weight: 600;
        margin: -10px 0 20px;
        display: block;
        border-bottom: 1px solid var(--assest-color);
        padding-bottom: 5px;
    }

    .app-logo img {
        margin: 20px 0 10px;
    }
}

@media (max-width: 767px) {
    .btn-default {
        font-size: 14px;
    }

    .box-title {
        padding-bottom: 8px;
    }

    .box-title .title {
        font-size: 18px;
    }

    .avatar-control .avatar-img {
        height: 30px;
        width: 30px;
    }

    .table th,
    .table td {
        padding: 8px 5px;
    }

    .summary-table-card .border-card {
        padding: 10px 2px;
    }

    .summary-table-card .border-card .row .col {
        text-align: left;
    }

    .summary-table-card .border-card .row .col-12 {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .summary-table-card .avatar-control {
        margin: 0 14px 10px;
    }

    .pagination {
        margin-top: 20px;
    }

    .inline-tabs {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow: auto;
        margin-top: 0;
    }

    .inline-tabs::-webkit-scrollbar {
        display: none;
    }

    .inline-tabs .nav-link {
        padding: 8px 14px;
    }

    .app-right-btn {
        margin: 0 0 15px;
    }

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

    .custom-border-card {
        padding: 16px 20px;
    }

    .custom-border-card .card-header {
        font-size: 18px;
        padding-bottom: 12px;
    }

    .file-control {
        padding: 16px;
    }
}

@media (max-width: 567px) {
    .page-search {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 15px;
    }

    .page-search .sorting {
        margin-top: 8px;
    }

    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child,
    div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
        padding: 0;
        overflow: auto;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin-top: 15px;
    }
}


/* Image Upload Preview */
.avatar-upload {
    position: relative;
    max-width: 205px;
}

.avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
}

.avatar-edit input {
    display: none;
}

.avatar-edit input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 125px;
    border-radius: 100%;
    background: var(--white-color);
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px var(--assest-color);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}

.avatar-edit input+label:hover {
    background: var(--assest-color);
    border-color: var(--body-color);
}

.avatar-edit input+label:after {
    content: "\f0ee";
    font-family: 'FontAwesome';
    color: var(--body-color);
    position: absolute;
    top: 130px;
    left: 0;
    right: 30px;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10%;
}

.avatar-upload .avatar-preview>img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 10px;
}

.avatar-upload .avatar-preview>img:hover {
    transform: scale(1.05);
}

.landscape-preview {
    width: 220px !important;
    height: 120px !important;
}


/* Loader */
/* Loader */
#dvloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white-color);
    z-index: 9999;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* --- Loader Image --- */
#dvloader img {
    width: 300px;
    height: 300px;
    max-width: 25vw;
    max-height: 25vw;
    animation: loaderSpin 1.2s linear infinite;
}

/* --- Spinner Animation --- */
@keyframes loaderSpin {
    0% {
        transform: rotate(0deg);
    }

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

/* --- Hide Loader (optional JS) --- */
#dvloader.hidden {
    opacity: 0;
    pointer-events: none;
}


/* btn Cancel */
.btn-cancel {
    background: var(--black-color);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 8px 20px;
}

.btn-cancel:hover {
    color: var(--black-color);
    background: transparent;
    border-color: var(--black-color);
}

.cart-bg {
    background-color: var(--assest-color);
}

/* Import File */
.import-file {
    color: var(--black-50);
}

.import-file::file-selector-button {
    border-radius: 4px;
    color: var(--partition-color);
    background-color: var(--primary-bg);
    border: 1px solid var(--assest-color);
    height: 30px;
    cursor: pointer;
}

/* Side Menu Partition */
.partition {
    width: 100%;
    border-bottom: 3px dashed var(--partition-color);
    line-height: 0.1em;
    margin: 20px 0px;
}

.partition span {
    background: var(--assest-color);
    margin: 10px 0;
    padding: 0px 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--partition-color);
}

/* Hide-Show Btn */
.show-btn,
.hide-btn {
    font-weight: bold;
    font-size: 14px !important;
    padding: 6px 18px;
    border-radius: 5px;
    cursor: pointer;
    border: 2px dashed transparent;
    outline: none;
    color: var(--white-color);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border 0.3s ease,
        box-shadow 0.3s ease;
}


.show-btn {
    background: var(--green-color);
}

.show-btn:hover {
    background: var(--white-color);
    border: 2px dashed var(--green-color);
    color: var(--green-color);
    box-shadow: 0 0 12px var(--green-color);
}

.hide-btn {
    background: var(--red-color);
}

.hide-btn:hover {
    background: var(--white-color);
    border: 2px dashed var(--red-color);
    color: var(--red-color);
    box-shadow: 0 0 12px var(--red-color);
}

.show-btn:focus,
.hide-btn:focus {
    outline: none;
    box-shadow: none;
}

/* Color Picker */
.colorpicker-component {
    display: flex;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    overflow: hidden;
}

.colorpicker {
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.hexcolor {
    border: none;
    padding: 10px;
    width: 100px;
    outline: none;
}

.bg-color-box {
    font-weight: bold;
    border: none;
    color: var(--white-color);
    padding: 5px 15px;
    outline: none;
    border-radius: 5px;
}

/* Seller Card Css */
.seller-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Align cards to the start (left) */
    max-width: 100%;
    /* padding: 20px; */
    margin: 0 auto;
}

.seller-card {
    /* max-height: 370px; */
    background: #f9faff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 1 1 calc(20% - 20px);
    /* Set width to 20% minus the gap between cards */
    max-width: calc(20% - 20px);
    transition: transform 0.3s ease;
}

.seller-card:hover {
    transform: translateY(-4px);
}

.seller-card.active {
    transform: none !important;

}

.seller-card-header {
    height: 30%;
    background-color: #767e96;
    display: flex;
    justify-content: center;
    align-items: center;
}

.seller-card img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    position: relative;
    top: 45px;
    border: 4px solid rgb(223, 213, 213);
}

.seller-card-body {
    padding: 60px 20px 5px;
}

.seller-card h3 {
    margin-bottom: 5px;
    font-size: 18px;
}

.seller-card p {
    color: #777;
    font-size: 14px;
    margin: 5px 0;
}

.seller-card .rating {
    color: #f4b400;
    font-weight: bold;
}

.seller-card button {
    background-color: #484875;
    color: white;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-weight: 600;
    outline: none;
}

.show-left {
    background: #058f00;
    color: #fff;
    font-weight: bold;
    border: none;
    float: left;
    /* Aligns the button to the left */
}

.seller-card .icon-list {
    display: none !important;
    /* position: absolute !important; */
    right: 0;
    bottom: 0;
    margin: 0;
}

.seller-card:hover .icon-list {
    display: flex !important;
}

.icon-list .btn {
    background: var(--white-color);
    padding: 2px 2px;
    margin-right: 6px;
    border-radius: 10px;
}

.icon-list .dot-icon {
    padding-top: 21px;
}

.icon-list .btn i {
    transition: box-shadow 0.3s ease-in-out !important;
}

.icon-list .btn i:hover {
    box-shadow: 0 15px 35px var(--assest-color) !important;
}

/* =====================================================
   Seller Profile Page
   ===================================================== */

/* --- Profile card --- */
.sp-profile-card {
    padding: 0;
    overflow: hidden;
}

/* --- Banner (gradient background with store info + review button) --- */
.sp-banner {
    padding: 22px 24px 58px;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--primary-color) 55%, var(--assest-color)),
            color-mix(in srgb, var(--primary-color) 20%, var(--assest-color)));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Banner info block (name, address, contact) --- */
.sp-banner-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sp-store-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
    line-height: 1.3;
}

.sp-store-address {
    font-size: 13px;
    color: var(--black-50);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* --- Review button (solid on gradient background) --- */
.sp-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 10px;
    background: var(--assest-color);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
    color: var(--black-50);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-review-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-color: var(--primary-color);
    color: var(--black-50);
    text-decoration: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.sp-review-btn i {
    color: var(--primary-color);
    font-size: 13px;
}

/* --- Contact row (inside banner — no border separator) --- */
.sp-contact-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.sp-contact-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--black-50);
}

.sp-contact-item i {
    font-size: 13px;
    color: var(--primary-color);
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

/* --- Profile body layout (avatar overlaps banner + stats) --- */
.sp-profile-body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 24px 28px;
}

/* --- Avatar (overlaps banner with negative margin) --- */
.sp-avatar-section {
    flex-shrink: 0;
    margin-top: -52px;
}

.sp-avatar-wrap {
    width: 104px;
    height: 104px;
    border-radius: 18px;
    border: 3px solid var(--assest-color);
    overflow: hidden;
    background: var(--assest-color);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--dark-color) 14%, transparent);
}

.sp-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Details section (stats row) --- */
.sp-details-section {
    flex: 1;
    min-width: 0;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Stats row --- */
.sp-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-stat-card {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border-light);
    background: var(--assest-color);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--dark-color) 5%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-stat-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--primary-color) 12%, transparent);
    transform: translateY(-2px);
}

/* --- Stat icon wrapper --- */
.sp-stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.sp-stat-icon--products {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    color: var(--blue-color);
    border: 1px solid color-mix(in srgb, var(--blue-color) 22%, transparent);
}

.sp-stat-icon--sales {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.sp-stat-icon--rating {
    background: color-mix(in srgb, var(--yellow-color) 14%, var(--assest-color));
    color: var(--yellow-color);
    border: 1px solid color-mix(in srgb, var(--yellow-color) 30%, transparent);
}

/* --- Stat data column --- */
.sp-stat-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-stat-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--black-50);
    line-height: 1.1;
}

.sp-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    font-size: 11px;
}

.sp-star--on {
    color: var(--yellow-color);
}

.sp-star--off {
    color: var(--border-light);
}

/* --- Products section header --- */
.sp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 15px 20px 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.sp-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 15px;
    flex-shrink: 0;
}

.sp-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
    line-height: 1.3;
}

/* --- Pagination --- */
.sp-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.sp-pg-info {
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .sp-banner {
        padding: 18px 16px 52px;
        flex-direction: column;
        gap: 12px;
    }

    .sp-store-address {
        justify-content: center;
    }

    .sp-profile-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 16px 20px;
    }

    .sp-stats-row {
        justify-content: center;
    }

    .sp-contact-row {
        flex-direction: column;
        gap: 10px;
    }

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

/* Toogel Buttom */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

/* Hide the default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

/* Slider before checked (inactive state) */
.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 4px;
    bottom: 3px;
    background-color: var(--white-color);
    transition: .4s;
    border-radius: 50%;
}

/* When checked */
input:checked+.slider {
    background-color: var(--primary-color);
    /* Active state color */
}

/* Move the slider when checked */
input:checked+.slider:before {
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 5px 5px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.order-badge,
.product {
    display: inline-block;
    padding: 0.45em 0.4em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.badge-success,
.bg-success {
    color: var(--white-color);
    background: var(--green-color) !important;
}

.badge-danger,
.bg-danger {
    color: var(--white-color);
    background: var(--red-color) !important;
}

.badge-warning,
.bg-warning {
    color: var(--white-color);
    background: var(--yellow-color) !important;
}

.badge-info,
.bg-info {
    color: var(--white-color);
    background: var(--blue-color) !important;
}

.badge-primary,
.bg-primary {
    color: var(--white-color);
    background: var(--primary-color) !important;
}

.badge-purple,
.bg-purple {
    color: var(--white-color);
    background: var(--purple-color) !important;
}

.badge-dark,
.bg-dark {
    color: var(--white-color);
    background: var(--dark-color) !important;
}

/* Earning-Card */
.card-earning {
    background-color: var(--assest-color);
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: center;
    width: 100%;
}

.card-align {
    display: flex;
    justify-content: space-between;
}

.earning-title {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: var(--partition-color);
}

.earning-amount {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    color: var(--primary-color);
}

.earning-divider {
    width: 2px;
    height: 60px;
    background-color: var(--body-color);
    margin: 0 15px;
}

/* Dashboard Category */
.category-box {
    padding: 25px;
    background: var(--assest-color);
}

.category-box .f600 {
    font-weight: 600;
}

.category-box .box-border-0 {
    border: 0;
    padding-bottom: 0;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    color: var(--white-color);
    padding-left: 25px;
}

.category-image {
    max-height: 105px;
    height: 105px;
    width: 100%;
    border-radius: 8px;
    filter: blur(1.2px);
    -webkit-filter: blur(1.2px);
}

.box-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--body-color);
    padding-bottom: 10px;
    margin-top: 20px;
}

.box-title .title {
    font-size: 20px;
    font-weight: 600;
    margin: 5px 0;
}

/* Custom-Card */
.custom-card {
    background-color: var(--assest-color);
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}

.custom-card .card-body h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
}

.custom-card .card-body span {
    font-size: 1.2rem;
    color: var(--partition-color);
    font-weight: bold;
}

.custom-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.card-icon-primary {
    padding: 15px;
    border-radius: 50%;
    color: var(--assest-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color) !important;
}

.card-color-primary:hover {
    border-color: var(--primary-color);
}

.card-color-primary .card-body {
    color: var(--primary-color);
}

/* Orders Details cs */

.order-details {

    border-radius: 8px;
    max-width: 100%;
}

.order-details .order-badge {
    color: var(--iq-white);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.order-number p {
    font-size: 24px;
    margin: 0;
}

.order-date-invoice {
    display: flex;
    gap: 15px;
    align-items: center;
}

.order-date-invoice span {
    font-size: 14px;
    color: #666;
}

.invoice-btn {
    background-color: #c32d46;
    color: white;
    padding: 5px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.invoice-btn:hover {
    background-color: #b0263d;
}

.info-section {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.info-card {
    background-color: #e9ecef;
    border: 2px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    width: 50%;
}

.info-card h4 {
    margin-bottom: 10px;
    font-size: 16px;
}

.info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-text {
    flex: 1;
    padding-right: 10px;
}

.info-text p {
    margin: 5px 0;
}

.info-card img {
    border-radius: 4px;
    width: 65px;
    height: 65px;
}

.order-summary {
    background-color: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    max-width: 300px;
    font-family: Arial, sans-serif;
    border: 1px solid #eaeaea;
    color: #333;
}

.order-summary h4 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
}

.summary-item.total {
    font-weight: bold;
    font-size: 16px;
}

.delivery-status p {
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    color: #5f5e5e;
}

.delivery-status strong {
    color: #000;
}

hr {
    border-top: 1px solid #eaeaea;
    margin: 10px 0;
}

/* Container holding the tracking steps */
.order-tracking {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin: 40px 20px;
    /* padding: 0 10px; */
}

/* Step */
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Icon */
.step .icon {
    background-color: #f0f0f0;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s ease;
}

.step .icon i {
    font-size: 35px;
}

/* Active Icon */
.step.active .icon {
    background-color: #00796b;
    color: white;
}

/* Label */
.step .label {
    text-align: center;
    margin-top: 10px;
}

.step .label p {
    font-weight: bold;
    margin: 0;
}

.step .label span {
    font-size: 12px;
    color: gray;
}

/* Line Between Steps */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px;
    /* center of icon */
    left: 100%;
    width: 200px;
    /* 👈 GAP INCREASED */
    height: 3px;
    background-color: #e0e0e0;
}

/* Active Line (Only Between Active Steps) */
.step.active:not(:last-child)::after {
    background-color: #00796b;
}

/* Increase Gap Between Steps */
.step+.step {
    margin-left: 180px;
    /* 👈 SAME AS LINE WIDTH */
}

/* Remove Old Broken Line */
.step .icon::before {
    display: none;
}


/* Product Details css */
.product-container {
    display: flex;
}

.image-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 20px;
}

.image-gallery img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
}

.product-info .product {
    color: var(--white-color);
}

.product-image {
    flex: 1;
}

.product-image img {
    max-width: 80%;
    border-radius: 10px;
}

.product-details {
    flex: 1;
}

.product-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--black-color);
    margin-bottom: 10px;
}

.product-price {
    font-size: 20px;
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 20px;
}

.product-description {
    font-size: 16px;
    color: var(--black-color);
    line-height: 1.5;
    margin-bottom: 20px;
}

.product-info {
    font-size: 16px;
    color: var(--black-color);
}

.product-info div {
    margin-bottom: 10px;
}

.product-info strong {
    color: var(--black-color);
    ;
}

.product-info span {
    margin-left: 10px;
    color: var(--black-color);
    font-size: 16px;
    font-weight: 500;
}

.faq-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.faq-item-section {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #ffffff;
    border: 2px solid #ddd;
    border-radius: 10px;
}

.faq-question h4 {
    font-size: 18px;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
}

.faq-answer p {
    font-size: 16px;
    color: #666;
    margin-left: 10px;
}

.review-card {
    background-color: #edf0f3;
    border-radius: 8px;
    padding-top: 15px;
    padding-left: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;

}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    /* Ensure content wraps if it overflows */
}

.reviewer-info {
    display: flex;
    align-items: center;
}


.reviewer-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
}

.reviewer-name {
    font-size: 16px;
    font-weight: bold;
}

.review-date {
    font-size: 14px;
    color: #888;
}

.review-rating {
    display: flex;
    align-items: center;
}

.stars {
    display: flex;
    margin-right: 10px;
}

.star {
    color: #FFD700;
    font-size: 25px;
    margin-right: 2px;
}

.star.inactive {
    color: #ccc;
}

.review-body {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.add-more-pading {
    padding-top: 35px;
}

.topseller-card {
    background-color: var(--assest-color);
    border-radius: 16px;
    transition: 0.3s ease;
    min-height: 120px;
    /* a little taller to fit total sold */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
    width: 100%;
}

.topseller-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.avatar-wrapper {
    flex-shrink: 0;
}

.avatar-wrapper img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.topseller-details {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
}

.topseller-name {
    font-size: 16px;
    font-weight: bold;
    word-break: break-word;
    color: var(--partition-color);
}

.topseller-fullname {
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
    color: var(--partition-color);
}

.topseller-total-sold {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    margin-top: 4px;
}

.delivery-instructor-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.delivery-instructor-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
}

.line {
    width: 4px;
    height: 40px;
    background-color: var(--primary-color);
    margin-right: 10px;
    border-radius: 2px;
}

.delivery-instructor-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.delivery-instructor-title {
    font-weight: 600;
}

/* Installation */
.list-group-item {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    background-color: transparent;
}

/* btn Install */
.btn-install {
    background: var(--primary-color);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 10px 40px;
}

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

/* btn Install Cancel */
.btn-install-cancel {
    background: var(--black-color);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--white-color);
    border: 1px solid transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 10px 40px;
}

.btn-install-cancel:hover {
    color: var(--black-color);
    background: transparent;
    border-color: var(--black-color);
}

.form-control {
    background-color: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--dark-color) 10%, var(--assest-color));
    color: var(--partition-color, var(--dark-color));
}

.install-bg-img {
    text-align: center;
}

.install-bg-img img {
    max-width: 100%;
    height: auto;
}

.install-title {
    font-size: 50px;
    font-weight: bold;
}

.install_sub_title {
    font-size: 24px;
}

.install_text {
    font-size: 20px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.install-list li {
    font-size: 20px;
    margin-bottom: 10px;
}

.install-list li:hover {
    background-color: #fff;
    color: var(--primary-color);
}

.install-card {
    margin-left: 100px;
    margin-right: 100px;
}

@media (max-width: 1024px) {
    .install-bg-img {
        display: none !important;
    }
}

.install-footer {
    padding: 20px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: black;
    background-color: #4e45b8;
}

.install-footer a {
    color: #fff;
    margin: 0 15px;
    text-decoration: none;
    font-size: 18px;
}

.install-footer a:hover {
    color: #000;
}

.install-social-icons {
    margin-top: 10px;
}

.install-social-icons a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}

.install-social-icons a:hover {
    color: #000;
}

.install-footer .content {
    position: relative;
    z-index: 1;
}

/*Admin Login CSS */

/* === Login Page Theme Variables (Light defaults) === */
.login-page-wrapper {
    --lp-page-bg-from: color-mix(in srgb, var(--primary-color) 18%, var(--assest-color));
    --lp-page-bg-mid: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    --lp-page-bg-to: color-mix(in srgb, var(--accent-color) 14%, var(--assest-color));
    --lp-card-sh-1: color-mix(in srgb, var(--primary-color) 22%, transparent);
    --lp-card-sh-2: color-mix(in srgb, var(--dark-color) 12%, transparent);
    --lp-form-bg: var(--white-color);
    --lp-text-h: var(--dark-color);
    --lp-text-body: color-mix(in srgb, var(--dark-color) 52%, transparent);
    --lp-text-label: color-mix(in srgb, var(--dark-color) 65%, transparent);
    --lp-text-muted: color-mix(in srgb, var(--dark-color) 38%, transparent);
    --lp-border: color-mix(in srgb, var(--dark-color) 22%, transparent);
    --lp-input-bg: var(--white-color);
    --lp-input-text: var(--dark-color);
    --lp-input-ph: color-mix(in srgb, var(--dark-color) 48%, transparent);
    --lp-input-bdr-h: color-mix(in srgb, var(--dark-color) 42%, transparent);
    --lp-icon-clr: color-mix(in srgb, var(--dark-color) 58%, transparent);
    --lp-sep-clr: color-mix(in srgb, var(--dark-color) 26%, transparent);
    --lp-dot-clr: var(--dark-color);
    --lp-footer-clr: color-mix(in srgb, var(--dark-color) 38%, transparent);
    --lp-footer-brand: color-mix(in srgb, var(--dark-color) 60%, transparent);
    --lp-tag-bg: color-mix(in srgb, var(--primary-color) 22%, transparent);
    --lp-tag-bd: color-mix(in srgb, var(--primary-dark-color) 35%, transparent);
    --lp-tag-clr: color-mix(in srgb, var(--primary-dark-color) 80%, var(--dark-color));
    --lp-bold-clr: var(--primary-dark-color);
    --lp-input-sh: color-mix(in srgb, var(--dark-color) 7%, transparent);
    --lp-mode-dur: 0.35s;
}

/* === Login Page Theme Variables (Dark overrides) === */
html[data-theme="dark"] .login-page-wrapper {
    --lp-page-bg-from: color-mix(in srgb, var(--dark-color) 95%, var(--black-color));
    --lp-page-bg-mid: color-mix(in srgb, var(--dark-color) 90%, var(--black-color));
    --lp-page-bg-to: color-mix(in srgb, var(--dark-color) 87%, var(--primary-color));
    --lp-card-sh-1: color-mix(in srgb, var(--black-color) 55%, transparent);
    --lp-card-sh-2: color-mix(in srgb, var(--black-color) 38%, transparent);
    --lp-form-bg: color-mix(in srgb, var(--dark-color) 80%, var(--black-color));
    --lp-text-h: var(--white-color);
    --lp-text-body: color-mix(in srgb, var(--white-color) 62%, transparent);
    --lp-text-label: color-mix(in srgb, var(--white-color) 68%, transparent);
    --lp-text-muted: color-mix(in srgb, var(--white-color) 42%, transparent);
    --lp-border: color-mix(in srgb, var(--white-color) 22%, transparent);
    --lp-input-bg: color-mix(in srgb, var(--white-color) 10%, transparent);
    --lp-input-text: var(--white-color);
    --lp-input-ph: color-mix(in srgb, var(--white-color) 45%, transparent);
    --lp-input-bdr-h: color-mix(in srgb, var(--white-color) 38%, transparent);
    --lp-icon-clr: color-mix(in srgb, var(--white-color) 58%, transparent);
    --lp-sep-clr: color-mix(in srgb, var(--white-color) 22%, transparent);
    --lp-dot-clr: var(--dark-color);
    --lp-footer-clr: color-mix(in srgb, var(--white-color) 32%, transparent);
    --lp-footer-brand: color-mix(in srgb, var(--white-color) 50%, transparent);
    --lp-tag-bg: color-mix(in srgb, var(--primary-color) 14%, transparent);
    --lp-tag-bd: color-mix(in srgb, var(--primary-color) 22%, transparent);
    --lp-tag-clr: var(--primary-color);
    --lp-bold-clr: var(--primary-color);
    --lp-input-sh: color-mix(in srgb, var(--black-color) 18%, transparent);
}

@keyframes loginPageIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateY(48px) scale(0.95);
    }

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

@keyframes loginContentIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes loginShieldPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary-color) 40%, transparent));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 28px color-mix(in srgb, var(--primary-color) 65%, transparent));
        transform: scale(1.06);
    }
}

@keyframes loginShapeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-18px) rotate(5deg);
    }

    66% {
        transform: translateY(9px) rotate(-3deg);
    }
}

@keyframes sfFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes sfPanelIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes sfBtnShine {
    0% {
        background-position: left center;
    }

    50% {
        background-position: right center;
    }

    100% {
        background-position: left center;
    }
}

@keyframes sfDotBounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.55;
    }

    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

.login-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg,
            var(--lp-page-bg-from) 0%,
            var(--lp-page-bg-mid) 55%,
            var(--lp-page-bg-to) 100%);
    transition: background var(--lp-mode-dur);


    /* background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color) 6%, var(--assest-color)) 0%,
        var(--assest-color) 55%,
        color-mix(in srgb, var(--accent-color) 4%, var(--assest-color)) 100%
    ); */
    position: relative;
    overflow: hidden;
    padding: 24px;
    animation: loginPageIn 0.45s ease both;
}

.login-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.login-shape {
    position: absolute;
    border-radius: 50%;
}

.login-shape-1 {
    width: 420px;
    height: 420px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    top: -130px;
    right: -120px;
    animation: loginShapeFloat 10s ease-in-out infinite;
}

.login-shape-2 {
    width: 260px;
    height: 260px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    bottom: -90px;
    left: -80px;
    animation: loginShapeFloat 13s ease-in-out infinite 2.5s;
}

.login-shape-3 {
    width: 180px;
    height: 180px;
    background: color-mix(in srgb, var(--primary-dark-color) 16%, transparent);
    top: 42%;
    left: 6%;
    animation: loginShapeFloat 11s ease-in-out infinite 4.5s;
}

.login-shape-4 {
    width: 110px;
    height: 110px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    top: 18%;
    right: 16%;
    animation: loginShapeFloat 9s ease-in-out infinite 1.2s;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    height: 780px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 32px 80px var(--lp-card-sh-1),
        0 10px 32px var(--lp-card-sh-2);
    transition: box-shadow var(--lp-mode-dur);
    animation: loginCardIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.login-slides {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.login-slide {
    position: absolute;
    inset: 0;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.6s ease;
}

/* === Slide 1 — Welcome === */

.slide-welcome {
    z-index: 2;
    transform: translateX(0);
    opacity: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.slide-welcome::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../imgs/bg_1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

.slide-welcome.slide-exit {
    transform: translateX(100%) scale(0.97);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

.welcome-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            color-mix(in srgb, var(--dark-color) 72%, transparent) 0%,
            color-mix(in srgb, var(--dark-color) 55%, transparent) 38%,
            color-mix(in srgb, var(--dark-color) 18%, transparent) 60%,
            transparent 78%);
    z-index: 0;
}

.welcome-content {
    position: relative;
    z-index: 1;
    /* width: 42%; */
    display: flex;
    flex-direction: column;
    padding: 34px 40px;
    animation: loginContentIn 0.7s ease 0.4s both;
}

.welcome-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.welcome-logo-img {
    height: 45px;
    width: auto;
    border-radius: 8px;
    object-fit: contain;
}

.welcome-app-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 0.3px;
    font-family: var(--font);
}

.welcome-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 135px 0 0;
    position: relative;
}

.welcome-shield-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.welcome-shield-icon {
    font-size: 68px;
    color: var(--primary-color);
    animation: loginShieldPulse 3.2s ease-in-out infinite;
}

.welcome-lock-badge {
    position: absolute;
    bottom: 2px;
    right: -10px;
    font-size: 20px;
    color: var(--accent-color);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-color) 60%, transparent));
}

.welcome-title {
    font-size: 37px;
    font-weight: 800;
    color: var(--white-color);
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    font-family: var(--font);
}

.welcome-title-accent {
    color: var(--primary-color);
}

.welcome-subtitle {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: var(--font);
}

.welcome-desc {
    font-size: 13.5px;
    color: color-mix(in srgb, var(--white-color) 78%, transparent);
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 420px;
}

.welcome-feat-list {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.welcome-feat-item {
    display: flex;
    align-items: center;
    gap: 11px;
}

.welcome-feat-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--white-color) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--white-color) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* font-size: 12px; */
    color: var(--primary-color);
}

.welcome-feat-text {
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--white-color) 88%, transparent);
    font-family: var(--font);
    line-height: 1.3;
    letter-spacing: 0.1px;
}

.btn-go-to-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 36px;
    min-width: 160px;
    color: var(--accent-color);
    border: none;
    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--white-color) 38%, transparent);
    font-family: var(--font);
    letter-spacing: 0.3px;
}

.btn-go-to-login:hover {
    background: color-mix(in srgb, var(--white-color) 82%, var(--white-color));
    transform: translateY(-2px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--white-color) 50%, transparent);
}

.welcome-btn-arrow {
    transition: transform 0.25s ease;
    font-size: 11px;
}

.btn-go-to-login:hover .welcome-btn-arrow {
    transform: translateX(4px);
}

.btn-go-to-login:focus,
.btn-go-to-login:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--white-color) 35%, transparent),
        0 6px 18px color-mix(in srgb, var(--white-color) 38%, transparent);
}

.btn-go-to-login:active {
    outline: none;
    transform: translateY(1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--white-color) 35%, transparent);
}

.welcome-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    flex-shrink: 0;
}

.feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
    border-radius: 20px;
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
    backdrop-filter: blur(6px);
    font-family: var(--font);
}

.slide-form {
    z-index: 1;
    transform: translateX(100%);
    opacity: 0;
    display: none;
    pointer-events: none;
    background-image: url('../imgs/bg_2.png');
    background-position: center;
}

.slide-form.slide-active {
    transform: translateX(0);
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        opacity 0.75s ease 0.04s;
}

.slide-form.slide-active .slide-form-left {
    animation: sfPanelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.slide-form.slide-active .sf-content {
    animation: sfFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.slide-form-left {
    width: 50%;
    height: 100%;
    background: var(--lp-form-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: background var(--lp-mode-dur);
}

.slide-form-back {
    flex-shrink: 0;
    padding: 34px 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slide-form-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back-welcome {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-color);
    background: var(--primary-color);
    color: var(--dark-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-back-welcome:hover {
    background: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
    transform: scale(1.08);
}

.btn-back-welcome:focus,
.btn-back-welcome:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 36%, transparent);
}

.btn-back-welcome:active {
    outline: none;
    transform: scale(1);
    box-shadow: none;
}

.slide-form-center {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 24px 40px 32px;
}

.slide-form-right {
    width: 55%;
    height: 100%;
    position: relative;
    background: transparent;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.form-right-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            transparent 0%,
            color-mix(in srgb, var(--dark-color) 20%, transparent) 30%,
            color-mix(in srgb, var(--dark-color) 52%, transparent) 60%,
            color-mix(in srgb, var(--dark-color) 70%, transparent) 100%);

    z-index: 1;
}

.form-right-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 36px 34px;
}

.form-right-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.form-right-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary-color) 50%, transparent));
}

.form-right-logo span {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--font);
}

.form-right-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form-right-shield {
    font-size: 62px;
    color: var(--primary-color);
    margin-bottom: 20px;
    animation: loginShieldPulse 3.2s ease-in-out infinite 0.8s;
}

.form-right-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 12px;
    font-family: var(--font);
}

.form-right-desc {
    font-size: 13.5px;
    color: color-mix(in srgb, var(--white-color) 78%, transparent);
    line-height: 1.75;
    max-width: 240px;
    font-family: var(--font);
}

/* === Slide 2 — Form Panel === */

.sf-content {
    width: 100%;
}

.sf-tag {
    display: flex;
    width: fit-content;
    align-items: center;
    padding: 4px 14px;
    background: var(--lp-tag-bg);
    border: 1px solid var(--lp-tag-bd);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    color: var(--lp-tag-clr);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 auto 16px;
    font-family: var(--font);
    transition: background var(--lp-mode-dur), color var(--lp-mode-dur), border-color var(--lp-mode-dur);
}

.sf-welcome {
    font-size: 32px;
    font-weight: 800;
    color: var(--lp-text-h);
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    font-family: var(--font);
    text-align: center;
    transition: color var(--lp-mode-dur);
}

.sf-bold {
    font-weight: 700;
    color: var(--lp-bold-clr);
    transition: color var(--lp-mode-dur);
}

.sf-desc {
    font-size: 13px;
    color: var(--lp-text-body);
    margin: 0 0 28px;
    line-height: 1.6;
    font-family: var(--font);
    text-align: center;
    transition: color var(--lp-mode-dur);
}

.sf-field {
    margin-bottom: 16px;
}

.sf-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-text-label);
    margin-bottom: 7px;
    letter-spacing: 0.5px;
    font-family: var(--font);
    transition: color var(--lp-mode-dur);
}

.sf-input {
    width: 100%;
    padding: 12px 44px 12px 44px;
    border: 1.5px solid var(--lp-border);
    border-radius: 14px;
    font-size: 14px;
    color: var(--lp-input-text);
    background: var(--lp-input-bg);
    font-family: var(--font);
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease,
        background var(--lp-mode-dur), color var(--lp-mode-dur);
    box-shadow: 0 1px 3px var(--lp-input-sh);
    display: block;
}

.sf-input::placeholder {
    color: var(--lp-input-ph);
}

.sf-input:hover:not(:focus) {
    border-color: var(--lp-input-bdr-h);
}

.sf-input:focus {
    border-color: color-mix(in srgb, var(--primary-color) 85%, transparent);

    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--primary-color) 18%, transparent),
        0 2px 6px color-mix(in srgb, var(--dark-color) 10%, transparent);
}

.sf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.sf-input-wrap:focus-within {
    transform: translateY(-1px);
}

.sf-input-wrap::before {
    content: '';
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: var(--lp-sep-clr);
    z-index: 2;
    pointer-events: none;
    border-radius: 1px;
    transition: background 0.22s ease, background var(--lp-mode-dur);
}

.sf-input-wrap:focus-within::before {
    background: color-mix(in srgb, var(--primary-color) 50%, transparent);
}

.sf-input-icon {
    position: absolute;
    left: 14px;
    font-size: 13px;
    color: var(--lp-icon-clr);
    pointer-events: none;
    z-index: 1;
    transition: color 0.22s ease, color var(--lp-mode-dur);
}

.sf-input-wrap:focus-within .sf-input-icon {
    color: var(--primary-dark-color);
}

.sf-eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--lp-icon-clr);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 1;
}

.sf-eye-btn:hover {
    color: var(--lp-text-h);
}

.sf-eye-btn:focus {
    outline: none;
}

.sf-btn {
    width: 100%;
    padding: 13px 25px;
    margin-top: 30px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(110deg,
            var(--primary-color) 0%,
            color-mix(in srgb, var(--primary-color) 70%, var(--white-color)) 50%,
            var(--primary-color) 100%);
    background-size: 200% auto;
    background-position: left center;
    color: var(--dark-color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: var(--font);
    transition: box-shadow 0.25s ease, transform 0.22s ease, background-position 0.4s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.sf-btn:hover {
    animation: sfBtnShine 1.8s linear infinite;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--primary-color) 58%, transparent);
    transform: translateY(-1px);
}

.sf-btn:active {
    outline: none;
    transform: scale(0.97);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-color) 38%, transparent);
    animation: none;
}

.sf-btn:focus,
.sf-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 32%, transparent);
}

.sf-btn:disabled {
    cursor: not-allowed;
    opacity: 0.85;
    transform: none;
    animation: none;
}

.sf-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s ease;
}

.sf-btn-spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sf-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-dot-clr);
    display: inline-block;
    animation: sfDotBounce 1.2s ease-in-out infinite both;
}

.sf-dot:nth-child(1) {
    animation-delay: 0s;
}

.sf-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.sf-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.sf-btn:disabled .sf-btn-text {
    opacity: 0;
}

.sf-btn:disabled .sf-btn-spinner {
    opacity: 1;
}

.sf-divider {
    margin: 20px 0 14px;
    border-color: var(--lp-border);
    transition: border-color var(--lp-mode-dur);
}

.sf-footer {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--lp-footer-clr);
    text-align: center;
    padding: 0 40px 22px;
    font-family: var(--font);
    transition: color var(--lp-mode-dur);
}

.sf-footer-brand {
    font-weight: 700;
    color: var(--lp-footer-brand);
    transition: color var(--lp-mode-dur);
}

.form-right-shape {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.form-right-shape-1 {
    width: 300px;
    height: 300px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    top: -80px;
    right: -70px;
    animation: loginShapeFloat 11s ease-in-out infinite;
}

.form-right-shape-2 {
    width: 200px;
    height: 200px;
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    bottom: -60px;
    left: 10px;
    animation: loginShapeFloat 14s ease-in-out infinite 2s;
}

/* === Login Page Theme Toggle Button === */

.lp-theme-toggle {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 1000;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--white-color) 26%, transparent);
    background: color-mix(in srgb, var(--black-color) 28%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 14px;
    outline: none;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--black-color) 22%, transparent);
    transition: background 0.22s ease, border-color 0.22s ease,
        transform 0.22s ease, box-shadow 0.22s ease;
}

.lp-theme-toggle:hover {
    background: color-mix(in srgb, var(--black-color) 42%, transparent);
    border-color: color-mix(in srgb, var(--white-color) 38%, transparent);
    transform: scale(1.1);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--black-color) 32%, transparent);
}

.lp-theme-toggle:focus {
    outline: none;
}

.lp-theme-toggle:focus:not(:focus-visible) {
    box-shadow: 0 2px 10px color-mix(in srgb, var(--black-color) 22%, transparent);
}

.lp-theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 65%, transparent),
        0 2px 10px color-mix(in srgb, var(--black-color) 22%, transparent);
}

.lp-theme-toggle:active {
    outline: none;
    transform: scale(0.94);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--black-color) 22%, transparent);
}

.lp-toggle-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

/* Light mode: sun hidden, moon visible (click to go dark) */
.lp-icon-sun {
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
}

.lp-icon-moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Dark mode: sun visible, moon hidden (click to go light) */
html[data-theme="dark"] .login-page-wrapper.lp-icon-sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

html[data-theme="dark"] .login-page-wrapper.lp-icon-moon {
    opacity: 0;
    transform: scale(0.5) rotate(45deg);
}

/* === Demo Mode Banner === */
.lp-demo-banner {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 50px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--white-color));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--lp-mode-dur), border-color var(--lp-mode-dur);
    animation: loginCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.lp-demo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 14.5px;
    flex-shrink: 0;
    line-height: 1;
}

.lp-demo-text {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--dark-color) 72%, transparent);
    white-space: nowrap;
    transition: color var(--lp-mode-dur);
}

.lp-demo-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    margin-left: 2px;
    transition: color 0.2s;
}

.lp-demo-link:hover {
    color: var(--primary-dark-color);
    text-decoration: underline;
}

html[data-theme="dark"] .login-page-wrapper.lp-demo-banner {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}

html[data-theme="dark"] .login-page-wrapper.lp-demo-text {
    color: color-mix(in srgb, var(--white-color) 65%, transparent);
}

/* === Responsive === */

@media (max-width: 900px) {
    .login-card {
        height: 100dvh;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .login-page-wrapper {
        padding: 0;
        align-items: flex-start;
        gap: 0;
    }

    .lp-demo-banner {
        display: none;
    }

    .login-slide {
        overflow-y: auto;
    }

    .slide-form {
        flex-direction: column;
    }

    .slide-form-left {
        width: 100%;
        height: auto;
        order: 2;
    }

    .slide-form-center {
        padding: 16px 28px 28px;
    }

    .slide-form-right {
        width: 100%;
        height: 180px;
        flex-shrink: 0;
        order: 1;
    }

    .sf-welcome {
        font-size: 26px;
    }

    .slide-form-back {
        padding: 20px 28px 0;
    }

    .welcome-overlay {
        background: color-mix(in srgb, var(--dark-color) 65%, transparent);
    }

    .welcome-content {
        width: 100%;
        padding: 28px 28px;
        align-items: center;
    }

    .welcome-body {
        align-items: center;
        text-align: center;
    }

    .welcome-desc {
        max-width: 100%;
    }

    .welcome-title {
        font-size: 24px;
    }

    .welcome-feat-list {
        display: none;
    }
}

/* Admin Header Enhancement CSS */

.header {
    position: sticky;
    -webkit-position: -webkit-sticky;
    top: 0;
    background: var(--assest-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgb(var(--primary-rgb) / 0.07);
    box-shadow: 0 1px 24px rgb(var(--primary-rgb) / 0.07);
    z-index: 22;
    padding: 13px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.header .title-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
}

/* Header toggle: hidden on desktop — shown only on mobile via media query */
.header .title-control .side-toggle {
    display: none;
    margin-right: 16px;
    flex-shrink: 0;
}

/* Title block with stacked title + subtitle */
.hdr-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.header .page-title {
    font-size: 1.22rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    color: var(--partition-color, var(--dark-color));
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-subtitle {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.25px;
    color: var(--text-secondary);
    line-height: 1;
    display: block;
    white-space: nowrap;
}

/* Keep input-group styles intact (used on some views) */
.header .input-group {
    border: 1px solid var(--assest-color);
    border-radius: 100px;
    width: 550px;
    max-width: 100%;
}

.header .input-group .input-group-text,
.header .input-group .form-control {
    background: transparent;
    border: 0;
    box-shadow: 0 0 0;
}

.header .input-group .input-group-text img,
.header .input-group .form-control img {
    width: 20px;
    margin: 0 5px;
}

.header .input-group .form-control {
    font-size: 14px;
    padding: 12px 6px;
}

.header .side-logo {
    display: none;
}

/* Right side container */
.header .head-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* Glass pill that groups all icon actions */
.hdr-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 14px;
    padding: 4px;
}

/* Icon action buttons */
.header .head-control .head-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    padding: 0;
    border-radius: 10px;
    overflow: visible;
    margin-left: 0;
    background: var(--assest-color);
    border-color: rgb(var(--primary-rgb) / 0.12);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease,
        transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgb(var(--primary-rgb) / 0.10), 0 1px 3px rgb(var(--black-rgb) / 0.06);
}

.header .head-control .head-btn:hover {
    box-shadow: 0 4px 12px rgb(var(--primary-rgb) / 0.12);
}

.header .head-control .head-btn:active {
    transform: scale(0.95);
    box-shadow: none;
    transition: transform 0.10s ease;
}

.header .head-control .head-btn>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Icon color inside head-btn (works with or without primary-color class) */
.header .head-control .head-btn i {
    color: var(--partition-color, var(--dark-color));
    transition: color 0.2s ease;
}

/* ─── Demo Mode — status pill with animated dot ───────────────────────── */
.demo-mode-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--assest-color);
    border-radius: 10px;
    font-weight: 600;
    color: var(--partition-color, var(--dark-color));
    border: 1px solid rgb(var(--primary-rgb) / 0.10);
    transition: box-shadow 0.25s ease, transform 0.15s ease, border-color 0.25s ease;
    padding: 8px 14px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    cursor: default;
    flex-shrink: 0;
    box-shadow:
        0 4px 14px rgb(var(--primary-rgb) / 0.10),
        0 1px 3px rgb(var(--black-rgb) / 0.06);
}

.hdr-demo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green-color);
    display: inline-block;
    flex-shrink: 0;
}


/* ─── Language trigger — icon + locale code ───────────────────────────── */
.header .head-control .hdr-lang-trigger,
.header .head-control .hdr-profile-trigger {
    width: auto;
    padding: 0 10px;
    gap: 6px;
    min-width: 38px;
}

.hdr-lang-flag {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.hdr-lang-code {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--partition-color, var(--dark-color));
    line-height: 1;
}

/* ─── Thin vertical separator inside hdr-actions ─────────────────────── */
.hdr-sep {
    display: block;
    width: 1px;
    height: 20px;
    background: var(--primary-bg);
    border-radius: 1px;
    flex-shrink: 0;
    margin: 0 2px;
    align-self: center;
}

/* ─── Profile trigger — avatar ring + name + chevron ─────────────────── */
.hdr-avatar-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--primary-bg);
    border: 1.5px solid rgb(var(--primary-rgb) / 0.18);
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.header .head-control .hdr-profile-trigger:hover .hdr-avatar-ring {
    border-color: rgb(var(--primary-rgb) / 0.35);
    background: var(--primary-light);
}

.hdr-profile-name {
    font-size: 0.80rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--primary-color);
    line-height: 1;
}

.hdr-chevron {
    color: var(--text-secondary);
    transition: transform 0.22s ease, color 0.2s ease;
    flex-shrink: 0;
}

.header .head-control .hdr-profile-trigger:hover .hdr-chevron {
    color: var(--primary-color);
    transform: rotate(180deg);
}

/* ─── Premium header dropdown ─────────────────────────────────────────── */
.hdr-dropdown {
    min-width: 168px;
    border-radius: 12px !important;
    border: 1px solid rgb(var(--primary-rgb) / 0.08) !important;
    box-shadow: 0 8px 30px rgb(var(--primary-rgb) / 0.10), 0 2px 8px rgb(var(--primary-rgb) / 0.06) !important;
    padding: 4px !important;
    background: var(--assest-color) !important;
    overflow: hidden;
}

.hdr-lang-item,
.hdr-dd-item {
    display: flex !important;
    align-items: center;
    gap: 9px;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--partition-color, var(--dark-color)) !important;
    border-bottom: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.hdr-lang-item:hover,
.hdr-dd-item:hover {
    background: var(--primary-bg) !important;
    color: var(--partition-color, var(--dark-color)) !important;
}

/* Checkmark: hidden by default, visible on active locale */
.hdr-lang-check {
    font-size: 0.65rem;
    color: var(--partition-color, var(--dark-color));
    opacity: 0;
    flex-shrink: 0;
    width: 12px;
    transition: opacity 0.15s ease;
}

.hdr-item-active .hdr-lang-check {
    opacity: 1;
}

.hdr-item-active {
    background: var(--primary-bg) !important;
    font-weight: 600;
}

/* Logout — soft red tint on hover */
.hdr-dd-logout {
    color: var(--red-color) !important;
}

.hdr-dd-logout:hover {
    background: color-mix(in srgb, var(--red-color) 10%, transparent) !important;
    color: var(--red-color) !important;
}

/* Logout icon box button */
.header .head-control .hdr-logout-btn i {
    color: var(--red-color);
}

.header .head-control .hdr-logout-btn:hover {
    background: color-mix(in srgb, var(--red-color) 20%, transparent) !important;
    border-color: var(--red-color);
}

/* Admin Global Dark Mode CSS */

/* ─── Theme toggle icon switching ─────────────────────────────────────── */
/* Show the CURRENT mode icon: sun = light mode active, moon = dark mode active */
/* !important needed: Font Awesome (loaded after this file) sets .fa-solid { display: inline-block }
   which has equal specificity and would override display:none without it */
.hdr-icon-moon {
    display: none !important;
}

.hdr-icon-sun {
    display: inline-block !important;
}

html[data-theme="dark"] .hdr-icon-sun {
    display: none !important;
}

html[data-theme="dark"] .hdr-icon-moon {
    display: inline-block !important;
}

/* ─── Content area: page & body background ─────────────────────────────── */

html[data-theme="dark"] .right-content {
    --partition-color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
    --assest-color: var(--dark-color);
    --body-color: color-mix(in srgb, var(--dark-color) 48%, var(--white-color));
    background: color-mix(in srgb, var(--dark-color) 80%, var(--black-color));
}

html[data-theme="dark"] .right-content .body-content {
    background: color-mix(in srgb, var(--dark-color) 80%, var(--black-color));
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .card {
    background: var(--dark-color);
    border-color: color-mix(in srgb, var(--dark-color) 55%, var(--white-color));
}

html[data-theme="dark"] .right-content .card-header {
    background: color-mix(in srgb, var(--dark-color) 88%, var(--white-color));
    border-bottom-color: color-mix(in srgb, var(--dark-color) 46%, var(--black-color));
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

html[data-theme="dark"] .right-content .card-body,
html[data-theme="dark"] .right-content .card-footer {
    background: var(--dark-color);
}

html[data-theme="dark"] .right-content .custom-border-card {
    background: color-mix(in srgb, var(--dark-color) 100%, var(--black-color));
    border-color: color-mix(in srgb, var(--dark-color) 50%, var(--white-color)) !important;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--black-color) 22%, transparent);
}

html[data-theme="dark"] .right-content .custom-border-card .card-header {
    background: transparent !important;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .table thead th {
    background: var(--primary-light) !important;
    /* background-color: color-mix(in srgb, var(--dark-color) 68%, var(--black-color)); */
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
    border-bottom-color: color-mix(in srgb, var(--dark-color) 44%, var(--black-color));
}

html[data-theme="dark"] .right-content .table td,
html[data-theme="dark"] .right-content .table tr {
    color: color-mix(in srgb, var(--white-color) 78%, var(--dark-color));
    border-bottom-color: color-mix(in srgb, var(--dark-color) 44%, var(--black-color));
}

html[data-theme="dark"] .right-content .table tfoot {
    background-color: color-mix(in srgb, var(--dark-color) 68%, var(--black-color));
}

/* ─── Forms ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .form-control::placeholder,
html[data-theme="dark"] .right-content textarea::placeholder {
    color: color-mix(in srgb, var(--partition-color) 45%, transparent);
}

html[data-theme="dark"] .right-content .input-group-text {
    background: color-mix(in srgb, var(--dark-color) 68%, var(--black-color));
    border-color: color-mix(in srgb, var(--dark-color) 46%, var(--white-color));
    color: color-mix(in srgb, var(--white-color) 78%, var(--dark-color));
}

/* ─── Headings & general text ────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .page-title-sm,
html[data-theme="dark"] .right-content h1:not(.page-title),
html[data-theme="dark"] .right-content h2,
html[data-theme="dark"] .right-content h3,
html[data-theme="dark"] .right-content h4,
html[data-theme="dark"] .right-content h5 {
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

html[data-theme="dark"] .right-content .text-muted {
    color: color-mix(in srgb, var(--white-color) 55%, var(--dark-color)) !important;
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .breadcrumb {
    background: transparent;
}

html[data-theme="dark"] .right-content .breadcrumb-item a {
    color: var(--primary-color);
}

html[data-theme="dark"] .right-content .breadcrumb-item.active,
html[data-theme="dark"] .right-content .breadcrumb-item+.breadcrumb-item::before {
    color: color-mix(in srgb, var(--white-color) 55%, var(--dark-color));
}

html[data-theme="dark"] .right-content .border-bottom {
    border-bottom-color: color-mix(in srgb, var(--dark-color) 44%, var(--black-color)) !important;
}

/* ─── Badges: restore dark badge color overridden by --dark-color variable ── */
html[data-theme="dark"] .right-content .badge-dark,
html[data-theme="dark"] .right-content .bg-dark {
    background: color-mix(in srgb, var(--primary-color) 2%, var(--black-color)) !important;
    color: color-mix(in srgb, var(--white-color) 88%, var(--black-color)) !important;
}

/* ─── Modals (appended to body, not inside .right-content) ───────────────── */
/* html[data-theme="dark"] .modal-content {
    background: color-mix(in srgb, var(--dark-color) 100%, var(--black-color));
    border-color: color-mix(in srgb, var(--dark-color) 46%, var(--white-color));
} */

html[data-theme="dark"] .modal-header {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-bottom-color: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
}

html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .modal-header h1,
html[data-theme="dark"] .modal-header h2,
html[data-theme="dark"] .modal-header h3,
html[data-theme="dark"] .modal-header h4,
html[data-theme="dark"] .modal-header h5 {
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

html[data-theme="dark"] .modal-body {
    background: color-mix(in srgb, var(--dark-color) 100%, var(--black-color));
    color: color-mix(in srgb, var(--white-color) 78%, var(--dark-color));
}

/* html[data-theme="dark"] .modal-footer {
    background: color-mix(in srgb, var(--dark-color) 88%, var(--white-color));
    border-top-color: color-mix(in srgb, var(--dark-color) 44%, var(--black-color));
} */

html[data-theme="dark"] .modal .form-control,
html[data-theme="dark"] .modal .custom-select,
html[data-theme="dark"] .modal select {
    background: var(--assest-color);
    /* border-color: color-mix(in srgb, var(--dark-color) 10%, var(--assest-color)); */
    color: var(--partition-color, color-mix(in srgb, var(--white-color) 88%, var(--dark-color)));
}

html[data-theme="dark"] .modal .form-control::placeholder,
html[data-theme="dark"] .modal textarea::placeholder {
    color: color-mix(in srgb, var(--partition-color, var(--white-color)) 45%, transparent);
}

html[data-theme="dark"] .modal .form-group label,
html[data-theme="dark"] .modal label {
    color: color-mix(in srgb, var(--white-color) 80%, var(--dark-color));
}

/* html[data-theme="dark"] .modal p,
html[data-theme="dark"] .modal span:not(.badge) {
    color: color-mix(in srgb, var(--white-color) 78%, var(--dark-color));
} */

/* ─── DataTables ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .right-content .dataTables_wrapper .dataTables_info {
    color: color-mix(in srgb, var(--white-color) 65%, var(--dark-color));
}

html[data-theme="dark"] .right-content .dataTables_wrapper select {
    background: color-mix(in srgb, var(--dark-color) 72%, var(--black-color));
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
    border-color: color-mix(in srgb, var(--dark-color) 46%, var(--white-color));
}

html[data-theme="dark"] .right-content .paginate_button {
    color: color-mix(in srgb, var(--white-color) 78%, var(--dark-color)) !important;
}

html[data-theme="dark"] .right-content .paginate_button.disabled {
    color: color-mix(in srgb, var(--white-color) 40%, var(--dark-color)) !important;
}

html[data-theme="dark"] .right-content .dataTables_processing {
    background: var(--assest-color);
    color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-radius: 8px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--black-color) 35%, transparent);
}

/* ─── Dropdown menus inside content ──────────────────────────────────────── */
html[data-theme="dark"] .right-content .dropdown-menu:not(.hdr-dropdown) {
    background: color-mix(in srgb, var(--dark-color) 90%, var(--white-color));
    border-color: color-mix(in srgb, var(--dark-color) 46%, var(--white-color));
}

html[data-theme="dark"] .right-content .dropdown-item {
    color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
}

html[data-theme="dark"] .right-content .dropdown-item:hover {
    background: color-mix(in srgb, var(--dark-color) 58%, var(--black-color));
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

/* ─── Custom tabs ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .custom-tabs {
    background: color-mix(in srgb, var(--dark-color) 88%, var(--white-color));
}

html[data-theme="dark"] .right-content .custom-tabs .nav-link {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .custom-tabs .nav-link.active {
    color: var(--dark-color);
}

html[data-theme="dark"] .right-content .custom-tabs-compact {
    background: color-mix(in srgb, var(--dark-color) 88%, var(--white-color));
    border-color: var(--border-light);
}

/* html[data-theme="dark"] .right-content .custom-tabs-compact .nav-link {
    color: color-mix(in srgb, var(--white-color) 78%, var(--dark-color));
} */

/* ─── Scrollbar styling for dark mode ────────────────────────────────────── */
html[data-theme="dark"] .right-content {
    scrollbar-color: color-mix(in srgb, var(--dark-color) 46%, var(--white-color)) transparent;
}

/* ─── Sidebar submenu active item text — dark mode only ──────────────────── */
html[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active>.dropdown-item,
html[data-theme="dark"] .sidebar .side-menu .side-submenu .active>a,
html[data-theme="dark"] .sidebar .side-menu .side-submenu .side_line.active>a {
    color: var(--black-50);
}

/* Admin Sidebar Redesign CSS */
.sidebar {
    background: var(--assest-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 280px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 22;
    box-shadow: 0 1px 24px rgb(var(--primary-rgb) / 0.07);
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar .side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--primary-bg);
    gap: 10px;
    min-height: 68px;
}

.sidebar .side-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    overflow: hidden;
    min-width: 0;
    flex: 1;
    width: 150px;
}

.sb-logo-img {
    width: 37px;
    height: 37px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.sb-brand-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-dark-color);
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* .sidebar .side-toggle inherits all styles from the unified .side-toggle base above */

/* Sidebar toggle icon: «  in expanded mode, » in collapsed mode (via 180° rotation) */
.sidebar .side-toggle .sb-sidebar-toggle-icon {
    font-size: 14px;
    color: var(--black-50);
    transition: transform 0.3s ease, color 0.18s ease;
    line-height: 1;
}

.sidebar .side-toggle:hover .sb-sidebar-toggle-icon {
    color: var(--black-50);
}

@media (min-width: 992px) {
    .sidebar.hide-sidebar .side-toggle .sb-sidebar-toggle-icon {
        transform: rotate(180deg);
    }
}

/* Header toggle icon — same fa-angles-left glyph, same size/color/transition as sidebar.
   Default rotation 180° shows » (= "open sidebar"). Sibling CSS unwinds to 0° when
   the sidebar is open on mobile, showing « (= "close sidebar"). */
.header .title-control .side-toggle .hdr-sidebar-toggle-icon {
    font-size: 12px;
    color: var(--black-50);
    line-height: 1;
    transition: transform 0.3s ease, color 0.18s ease;
    transform: rotate(180deg);
}

.header .title-control .side-toggle:hover .hdr-sidebar-toggle-icon {
    color: var(--black-50);
}

.sb-nav-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) transparent;
}

.sb-nav-wrap::-webkit-scrollbar {
    width: 4px;
}

.sb-nav-wrap::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 4px;
}

.sb-nav-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar .partition {
    border-bottom: none !important;
    line-height: 1;
    margin: 18px 0 5px;
    padding: 0 8px;
}

.sidebar .partition span {
    background: transparent;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.85px;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
}

.sidebar .side-menu {
    list-style: none;
    padding: 0;
    margin: 0 !important;
}

.sidebar .side-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--black-50);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    text-decoration: none !important;
    position: relative;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0.1px;
}

.sidebar .side-menu a:hover {
    background: var(--primary-bg);
    color: var(--black-50);
    font-weight: 500;
}

.sidebar .side-menu a .menu-icon {
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-size: 0.95rem !important;
    color: inherit;
    margin-right: 0;
    flex-shrink: 0;
    opacity: 0.92;
}

.sidebar .side-menu .side_line.active>a,
.sidebar .side-menu .active>a {
    background: var(--primary-color);
    color: var(--dark-color);
    font-weight: 600;
    border-radius: 10px;
    padding: 9px 11px;
    box-shadow: 0 3px 10px var(--primary-light), 0 1px 3px var(--primary-bg);
}

.sidebar .side-menu .side_line.active>a .menu-icon,
.sidebar .side-menu .active>a .menu-icon {
    color: var(--dark-color);
    opacity: 1;
    -webkit-filter: none;
    filter: none;
}

/* Active main menu: hover/focus must not override the active appearance */
.sidebar .side-menu .side_line.active>a:hover,
.sidebar .side-menu .active>a:hover,
.sidebar .side-menu .side_line.active>a:focus,
.sidebar .side-menu .active>a:focus {
    background: var(--primary-color);
    color: var(--dark-color);
    font-weight: 600;
}

.sidebar .side-menu .side_line.active>a:hover .menu-icon,
.sidebar .side-menu .active>a:hover .menu-icon,
.sidebar .side-menu .side_line.active>a:focus .menu-icon,
.sidebar .side-menu .active>a:focus .menu-icon {
    color: var(--dark-color);
    opacity: 1;
}

/* Active dropdown chevron: keep dark-color on hover/focus */
.sidebar .side-menu .active>a.dropdown-toggle:hover::after,
.sidebar .side-menu .active>a.dropdown-toggle:focus::after {
    border-top-color: var(--dark-color);
}

.sidebar .side-menu .side_line.active a:after,
.sidebar.hide-sidebar .side-menu .side_line.active a:after {
    display: none;
    content: none;
}

.sidebar .side-menu .dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
    border-top-color: var(--black-50);
    transition: transform 0.22s ease;
}

.sidebar .side-menu .dropdown-toggle:hover::after {
    border-top-color: var(--black-50);
}

.sidebar .side-menu .active>a.dropdown-toggle::after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
    border-top-color: var(--dark-color);
}

.sidebar .side-menu .dropdown-menu {
    position: relative !important;
    -webkit-transform: none !important;
    transform: none !important;
    float: none;
    background: var(--assest-color);
    margin: 3px 0 3px 14px;
    padding: 4px 0;
    border-radius: 8px;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--primary-light);
    min-width: unset;
}

.sidebar .side-menu .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--black-50);
    border-radius: 7px;
    margin: 1px 0;
    background: transparent !important;
    white-space: normal;
    transition: background 0.18s ease, color 0.18s ease;
}

.sidebar .side-menu .dropdown-menu .dropdown-item:hover {
    color: var(--black-50);
    background: var(--primary-bg) !important;
}

.sidebar .side-menu .dropdown-menu a .submenu-icon,
.sidebar .side-menu .side-submenu a .submenu-icon {
    width: 16px;
    min-width: 16px;
    font-size: 0.6rem !important;
    flex-shrink: 0;
    text-align: center;
    color: inherit;
    opacity: 0.78;
    margin-right: 0;
}

.sidebar .side-menu .dropdown-menu .active>.dropdown-item,
.sidebar .side-menu .side-submenu .active>a,
.sidebar .side-menu .side-submenu .side_line.active>a {
    background: var(--primary-bg) !important;
    color: var(--dark-color);
    font-weight: 600;
    border-radius: 7px;
    padding: 8px 11px;
    box-shadow: inset 3px 0 0 var(--primary-dark-color),
        0 1px 6px var(--primary-bg);
}

.sidebar .side-menu .dropdown-menu .active>.dropdown-item .submenu-icon,
.sidebar .side-menu .side-submenu .active>a .submenu-icon {
    color: var(--primary-dark-color);
    opacity: 1;
    -webkit-filter: none;
    filter: none;
}

.sidebar .side-menu .side-submenu {
    position: relative !important;
    -webkit-transform: none !important;
    transform: none !important;
    float: none;
    background: var(--assest-color);
    margin: 3px 0 3px 14px;
    padding: 4px 0;
    border-radius: 8px;
    box-shadow: none;
    border: none;
    /* border-left: 2px solid color-mix(in srgb, var(--primary-color) 28%, transparent); */
    min-width: unset;
}

.sidebar .side-menu .side-submenu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--black-50);
    border-radius: 7px;
    margin: 1px 0;
    white-space: nowrap;
}

.sidebar .side-menu .side-submenu a:hover {
    color: var(--black-50);
    background: var(--primary-bg);
}

.sidebar .side-menu .side-submenu .active,
.sidebar .side-menu .side-submenu .side_line.active {
    background: transparent;
    border-radius: 0;
    padding: 0;
    color: inherit;
}

.sidebar .side-menu .side-submenu .active>a,
.sidebar .side-menu .side-submenu .side_line.active>a {
    background: var(--primary-bg);
    color: var(--dark-color);
    font-weight: 600;
    border-radius: 7px;
    padding: 8px 11px;
    box-shadow: inset 3px 0 0 var(--primary-dark-color),
        0 1px 6px var(--primary-bg);
}

/* Active submenu: hover/focus must not override the active appearance */
.sidebar .side-menu .dropdown-menu .active>.dropdown-item:hover,
.sidebar .side-menu .dropdown-menu .active>.dropdown-item:focus,
.sidebar .side-menu .side-submenu .active>a:hover,
.sidebar .side-menu .side-submenu .active>a:focus,
.sidebar .side-menu .side-submenu .side_line.active>a:hover,
.sidebar .side-menu .side-submenu .side_line.active>a:focus {
    background: var(--primary-bg) !important;
    color: var(--dark-color);
}

.sidebar .side-menu .dropdown-menu .active>.dropdown-item:hover .submenu-icon,
.sidebar .side-menu .dropdown-menu .active>.dropdown-item:focus .submenu-icon,
.sidebar .side-menu .side-submenu .active>a:hover .submenu-icon,
.sidebar .side-menu .side-submenu .active>a:focus .submenu-icon,
.sidebar .side-menu .side-submenu .side_line.active>a:hover .submenu-icon,
.sidebar .side-menu .side-submenu .side_line.active>a:focus .submenu-icon {
    color: var(--primary-dark-color);
    opacity: 1;
}

.sidebar .side-menu .side-submenu .active>a .submenu-icon {
    color: var(--primary-dark-color);
    opacity: 1;
    -webkit-filter: none;
    filter: none;
}

/* ── Sticky sidebar footer — profile card ───────────────────── */
.sb-footer-wrap {
    flex-shrink: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--primary-bg);
}

/* Card background derives from --assest-color (sidebar bg) so it
   automatically adapts: light sidebar → warm light card,
   dark sidebar → warm dark card. No hardcoded gradient needed. */
.sb-profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1px solid var(--primary-light);
    box-shadow: 0 2px 12px var(--primary-bg), 0 1px 3px var(--primary-bg);
}

/* Profile link: avatar + text — takes all remaining space */
.sb-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none !important;
    overflow: hidden;
}

/* Rounded-square avatar — solid primary color, dark letter for contrast */
.sb-user-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--primary-color);
    border: 1.5px solid color-mix(in srgb, var(--primary-dark-color) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark letter on the yellow avatar reads in both modes */
.sb-avatar-letter {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1;
    user-select: none;
}

.sb-user-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-user-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--black-50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.sb-user-email {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

/* Circular logout button */
.sb-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex-shrink: 0;
    border-radius: 20%;
    border: none;
    background: var(--primary-bg);
    color: var(--black-50);
    cursor: pointer;
    font-size: 19px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.sb-logout-btn:hover {
    background: color-mix(in srgb, var(--red-color) 20%, transparent) !important;
    color: var(--red-color);
    transform: scale(1.08);
}

.sb-logout-btn,
.sb-logout-btn:hover,
.sb-logout-btn:focus,
.sb-logout-btn:focus-visible,
.sb-logout-btn:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Expanded sidebar accordion: submenus are controlled exclusively by parent
   .sb-open (JS accordion) or .active (server-side route match).
   This prevents Bootstrap's Popper / clearMenus() from interfering. */
.sidebar:not(.hide-sidebar) .side-menu .dropdown-menu,
.sidebar:not(.hide-sidebar) .side-menu .side-submenu {
    display: none !important;
}

.sidebar:not(.hide-sidebar) .side-menu .dropdown.sb-open>.dropdown-menu,
.sidebar:not(.hide-sidebar) .side-menu .dropdown.sb-open>.side-submenu,
.sidebar:not(.hide-sidebar) .side-menu .dropdown.active>.dropdown-menu,
.sidebar:not(.hide-sidebar) .side-menu .dropdown.active>.side-submenu {
    display: block !important;
}

/* Desktop: sidebar is always expanded by default — push content right of its 280px width */
@media (min-width: 992px) {
    .right-content {
        margin-left: 280px;
        transition: margin-left 0.3s ease;
    }
}

.sidebar.hide-sidebar {
    width: 68px;
    padding: 0;
}

/* ============================================================
   COLLAPSED SIDEBAR — ICON-ONLY LAYOUT (992px+)
   !important is intentional: dark mode selectors carry higher
   specificity (0,5,2) than collapsed selectors (0,5,1) and
   would silently win without it.
   ============================================================ */
@media (min-width: 992px) {

    /* Switch from flex to CSS Grid with an explicit minmax(0,1fr) middle row.
       "1fr" alone equals minmax(auto,1fr) — the nav row's minimum becomes its
       full content height, which overflows the fixed 100vh sidebar and pushes
       the footer (profile + logout) below the clipping boundary.
       minmax(0,1fr) forces the minimum to 0 so the row can shrink freely;
       overflow-y:auto on .sb-nav-wrap then handles scrolling within that space.
       The footer row (auto) always gets its exact natural height first. */
    .sidebar.hide-sidebar {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    /* Hide all text labels and section titles */
    .sidebar.hide-sidebar .sb-brand-name,
    .sidebar.hide-sidebar .side-menu a>span,
    .sidebar.hide-sidebar .side-menu .dropdown-toggle>span,
    .sidebar.hide-sidebar .partition,
    .sidebar.hide-sidebar .sb-user-details {
        display: none !important;
    }

    /* Hide logo entirely — only the toggle button remains */
    .sidebar.hide-sidebar .side-logo {
        display: none !important;
    }

    /* Header: single centered toggle button */
    .sidebar.hide-sidebar .side-head {
        justify-content: center !important;
        padding: 0px 0 !important;
        gap: 0 !important;
    }

    /* Nav wrap: min-height:0 lets the 1fr row shrink to zero when
       the sidebar is very short; overflow-y:auto keeps it scrollable */
    .sidebar.hide-sidebar .sb-nav-wrap {
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 6px 0 !important;
        scrollbar-gutter: stable;
    }

    /* Each <li> is a flex row that centers its icon button */
    .sidebar.hide-sidebar .side-menu li {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Icon button — fixed 44×44 square, all inherited padding stripped */
    .sidebar.hide-sidebar .side-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 1px 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    /* Icon glyph — locked size, no line-height artifacts from fa-2xl */
    .sidebar.hide-sidebar .side-menu a .menu-icon {
        width: 18px !important;
        min-width: 18px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }

    /* Hide dropdown chevron */
    .sidebar.hide-sidebar .side-menu .dropdown-toggle::after {
        display: none !important;
    }

    /* Hide all submenus */
    .sidebar.hide-sidebar .side-menu .dropdown-menu,
    .sidebar.hide-sidebar .side-menu .side-submenu {
        display: none !important;
    }

    /* Active icon button — identical 44×44 outer size as inactive.
       Overrides base padding, dark-mode padding, and any border. */
    .sidebar.hide-sidebar .side-menu .side_line.active>a,
    .sidebar.hide-sidebar .side-menu .active>a {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 12px color-mix(in srgb, var(--primary-color) 48%, transparent),
            0 1px 4px color-mix(in srgb, var(--primary-dark-color) 28%, transparent) !important;
    }

    /* Footer wrap: grid auto row sizes from this content — extra padding
       ensures both icons have breathing room and are never clipped. */
    .sidebar.hide-sidebar .sb-footer-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 0 18px !important;
        overflow: hidden !important;
        border-top: none !important;
    }

    /* Card: transparent full-width column wrapper — mirrors the <li> role.
       No background / border / shadow so nothing escapes the 68px sidebar. */
    .sidebar.hide-sidebar .sb-profile-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        gap: 10px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Profile link: exact match of .sidebar.hide-sidebar .side-menu a —
       44×44, centered, zero padding/margin/gap, border-box, overflow visible */
    .sidebar.hide-sidebar .sb-profile-link {
        display: flex !important;
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
    }

    /* Logout: hidden when collapsed — only visible in expanded sidebar */
    .sidebar.hide-sidebar .sb-logout-btn {
        display: none !important;
    }
}

.right-content.right-content-0 {
    margin-left: 68px;
}

@media (max-width: 991px) {
    .sidebar {
        left: -280px;
        z-index: 200;
        width: 280px;
    }

    .sidebar.hide-sidebar {
        left: 0;
        width: 280px;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }


    .sidebar.hide-sidebar .sb-brand-name,
    .sidebar.hide-sidebar .side-menu a>span,
    .sidebar.hide-sidebar .side-menu .dropdown-toggle>span,
    .sidebar.hide-sidebar .partition {
        display: block;
    }

    /* Restore full card layout when sidebar is open on mobile */
    .sidebar.hide-sidebar .sb-user-details,
    .sidebar.hide-sidebar .sb-logout-btn {
        display: flex !important;
    }

    .sidebar.hide-sidebar .side-logo {
        display: flex;
        justify-content: flex-start;
        flex: 1;
        width: 150px;
    }

    .sidebar.hide-sidebar .side-head {
        justify-content: space-between;
        padding: 18px 16px;
        gap: 10px;
    }

    .sidebar.hide-sidebar .side-menu a,
    .sidebar.hide-sidebar .side-menu .dropdown-toggle {
        padding: 9px 11px;
        justify-content: flex-start;
        gap: 11px;
        width: auto;
        margin: 2px 0;
    }

    .sidebar.hide-sidebar .side-menu .dropdown-toggle::after {
        display: block;
    }

    /* Accordion: all submenus collapsed by default when sidebar opens on mobile */
    .sidebar.hide-sidebar .side-menu .dropdown-menu,
    .sidebar.hide-sidebar .side-menu .side-submenu {
        display: none !important;
    }

    /* Show only the explicitly user-opened submenu */
    .sidebar.hide-sidebar .side-menu .dropdown.sb-open>.dropdown-menu,
    .sidebar.hide-sidebar .side-menu .dropdown.sb-open>.side-submenu {
        display: block !important;
    }

    .sidebar.hide-sidebar .sb-footer-wrap {
        padding: 10px 12px 12px !important;
        display: block !important;
    }

    .sidebar.hide-sidebar .sb-profile-card {
        width: auto !important;
        height: auto !important;
        padding: 10px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }

    .sidebar.hide-sidebar .sb-profile-link {
        flex: 1 !important;
        width: auto !important;
        height: auto !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        overflow: hidden !important;
    }

    .sidebar.hide-sidebar .side-menu .side_line.active>a,
    .sidebar.hide-sidebar .side-menu .active>a {
        width: auto;
        padding: 9px 11px;
        justify-content: flex-start;
    }

    /* --- Unified toggle: responsive rules --- */

    /* Sidebar toggle: hidden when sidebar is closed (off-canvas), visible as
       close button when sidebar is open. */
    .sidebar:not(.hide-sidebar) .side-head .side-toggle {
        display: none !important;
    }

    .sidebar.hide-sidebar .side-head .side-toggle {
        display: flex !important;
    }

    /* Header toggle: always visible on mobile as the primary open control */
    .header .title-control .side-toggle {
        display: flex;
    }

    /* Keep header toggle visible even when right-content-0 is toggled simultaneously */
    .right-content.right-content-0 .header .title-control .side-toggle {
        display: flex !important;
    }

    /* When sidebar opens, unwind the header icon from 180° (») to 0° («) = "close" */
    .sidebar.hide-sidebar~.right-content .header .title-control .side-toggle .hdr-sidebar-toggle-icon {
        transform: rotate(0deg);
    }
}

@media (min-width: 1680px) {
    .sidebar {
        width: 280px;
    }

    .sidebar.hide-sidebar {
        width: 72px;
    }

    .right-content.right-content-0 {
        margin-left: 72px;
    }

    .sidebar.hide-sidebar .side-menu a {
        width: 46px !important;
        height: 46px !important;
    }

    .sidebar.hide-sidebar .side-menu .side_line.active>a,
    .sidebar.hide-sidebar .side-menu .active>a {
        width: 46px !important;
        height: 46px !important;
    }

    .sidebar.hide-sidebar .sb-profile-card,
    .sidebar.hide-sidebar .sb-profile-link {
        /* width: 46px !important; */
        height: 46px !important;
    }
}

/* Collapsed Sidebar Flyout Panel */
#sb-flyout {
    position: fixed;
    z-index: 100;
    background: var(--assest-color);
    border-radius: 12px;
    padding: 6px;
    min-width: 200px;
    max-width: 240px;
    box-shadow: 0 8px 32px var(--black-50), 0 2px 8px var(--black-50);
    border: 1px solid var(--primary-bg);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#sb-flyout[hidden] {
    display: none !important;
}

#sb-flyout.sb-flyout-in {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.sb-flyout-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    padding: 4px 10px 6px;
    margin: 0 0 2px 0;
    border-bottom: 1px solid var(--primary-bg);
}

.sb-flyout-list {
    list-style: none;
    margin: 0;
    padding: 2px 0;
}

.sb-flyout-list li {
    display: block;
}

.sb-flyout-list a.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--black-50);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    background: transparent;
}

.sb-flyout-list a.dropdown-item:hover {
    background: var(--primary-bg);
    color: var(--black-50);
}

.sb-flyout-list .active>a.dropdown-item,
.sb-flyout-list .side_line.active>a.dropdown-item {
    background: var(--primary-bg);
    color: var(--dark-color);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary-dark-color);
    border-radius: 7px;
}

.sb-flyout-list a.dropdown-item .submenu-icon {
    color: var(--primary-dark-color);
    width: 14px;
    min-width: 14px;
    font-size: 11px;
    opacity: 0.75;
}

.sb-flyout-list .active>a.dropdown-item .submenu-icon {
    opacity: 1;
}

/* ============================================================
   ENTRANCE ANIMATIONS — Sidebar & Header
   GPU-composited only (opacity + transform). No layout props.
   ============================================================ */

@keyframes sbEntrSlideIn {
    from {
        opacity: 0;
        transform: translateX(-22px);
    }

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

@keyframes sbEntrFadeDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

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

@keyframes sbEntrItemIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

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

@keyframes sbEntrFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Sidebar shell */
.sidebar {
    animation: sbEntrSlideIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Sidebar header (logo + toggle) */
.sidebar .side-head {
    animation: sbEntrFadeDown 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}

/* Sidebar menu items & partition labels — delays set by JS stagger */
.sidebar .side-menu>li,
.sidebar .side-menu>p {
    animation: sbEntrItemIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Sidebar footer */
.sidebar .sb-footer-wrap {
    animation: sbEntrFadeIn 0.34s ease 0.44s both;
}

/* Header shell */
.header {
    animation: sbEntrFadeDown 0.40s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

/* Header left cluster (title + subtitle) */
.hdr-title-wrap {
    animation: sbEntrFadeIn 0.30s ease 0.24s both;
}

/* Header action items — staggered */
.hdr-actions>*:nth-child(1) {
    animation: sbEntrFadeIn 0.26s ease 0.20s both;
}

.hdr-actions>*:nth-child(2) {
    animation: sbEntrFadeIn 0.26s ease 0.25s both;
}

.hdr-actions>*:nth-child(3) {
    animation: sbEntrFadeIn 0.26s ease 0.30s both;
}

.hdr-actions>*:nth-child(4) {
    animation: sbEntrFadeIn 0.26s ease 0.35s both;
}

.hdr-actions>*:nth-child(5) {
    animation: sbEntrFadeIn 0.26s ease 0.40s both;
}

.hdr-actions>*:nth-child(6) {
    animation: sbEntrFadeIn 0.26s ease 0.45s both;
}

.hdr-actions>*:nth-child(7) {
    animation: sbEntrFadeIn 0.26s ease 0.50s both;
}

.hdr-actions>*:nth-child(8) {
    animation: sbEntrFadeIn 0.26s ease 0.55s both;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .sidebar .side-head,
    .sidebar .side-menu>li,
    .sidebar .side-menu>p,
    .sidebar .sb-footer-wrap,
    .header,
    .hdr-title-wrap,
    .hdr-actions>* {
        animation: none !important;
    }
}

/* Type Module CSS */

/* ── Page bar ─────────────────────────────────────────────────── */
.page-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--assest-color);
    border: 1px solid rgb(var(--primary-rgb) / 0.08);
    border-radius: 14px;
    padding: 12px 24px;
    box-shadow: 0 2px 12px rgb(var(--primary-rgb) / 0.06);
    margin-bottom: 4px;
}


.page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.page-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-dark-color);
    font-size: 16px;
}

.page-header-info {
    min-width: 0;
}

.page-heading {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0 0 3px;
    line-height: 1.2;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-dark-color);
    text-decoration: none !important;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.bc-link:hover {
    opacity: 1;
    color: var(--primary-color);
}

.bc-sep {
    font-size: 9px;
    color: var(--text-secondary);
    opacity: 0.6;
}

.bc-active {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.mod-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--primary-bg);
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    color: var(--primary-dark-color);
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
    line-height: 1;
}

.mod-sort-btn:hover {
    background: var(--primary-color);
    color: var(--dark-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}

.mod-sort-btn:focus,
.mod-sort-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.mod-sort-btn--text {
    font-size: 13px;
    padding: 7px 12px;
    gap: 5px;
}

/* ── Module card ──────────────────────────────────────────────── */
.mod-card {
    background: var(--assest-color);
    border: 1px solid rgb(var(--primary-rgb) / 0.07);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 2px 16px rgb(var(--primary-rgb) / 0.06);
    overflow: hidden;
    margin-bottom: 24px;
}

.mod-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    /* background: var(--primary-bg) !important; */
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.mod-card-head-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--dark-color);
    border-radius: 8px;
    font-size: 12px;
    flex-shrink: 0;
}

.mod-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.mod-card-body {
    /* padding: 16px 20px 4px; */
    padding: 20px 24px 24px;

}

.mod-card-body .form-row {
    align-items: flex-start;
}

.mod-card-footer {
    padding: 12px 24px 18px 0;
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.mod-card-footer .mod-save-btn,
.mod-card-footer .mod-update-btn,
.mod-card-footer .mod-cancel-btn {
    min-width: 120px;
    height: 40px;
    padding: 0 22px;
    justify-content: center;
}

/* ── Form section entrance animation (Add/Edit pages) ────────── */
@keyframes fsa-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.fsa {
    animation: fsa-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--fsa-delay, 0s);
}

/* ── Form fields ──────────────────────────────────────────────── */
.mod-field {
    margin-bottom: 18px;
}

.mod-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--partition-color, var(--dark-color));
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.06em;
}

.mod-label-icon {
    font-size: 12px;
    opacity: 0.65;
    margin-right: 5px;
    color: var(--primary-color);
}

.mod-required {
    color: var(--red-color);
    margin-left: 2px;
    font-size: 17px;
    line-height: 1;
    vertical-align: middle;
}

.mod-input {
    background: var(--assest-color) !important;
    /* border: 1px solid color-mix(in srgb, var(--dark-color) 10%, var(--assest-color)) !important; */
    color: var(--partition-color, var(--dark-color)) !important;
    border-radius: 9px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    height: auto !important;
}

.mod-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
    outline: none !important;
}

.mod-input::placeholder {
    color: color-mix(in srgb, var(--partition-color, var(--dark-color)) 45%, transparent) !important;
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
}

/* ── Color picker ─────────────────────────────────────────────── */
.mod-colorpicker-wrap {
    display: flex !important;
    align-items: center;
    border: 1px solid var(--border-light);
    border-radius: 9px !important;
    overflow: hidden;
    background: var(--assest-color);
    padding: 0 !important;
}

.mod-colorpicker-wrap .mod-color-hex {
    border: none !important;
    background: transparent !important;
    color: var(--partition-color, var(--dark-color)) !important;
    font-size: 13px !important;
    font-family: monospace;
    border-radius: 0 !important;
    padding: 9px 12px !important;
    flex: 1;
    min-width: 0;
    box-shadow: none !important;
    height: auto !important;
    text-transform: uppercase;
}

.mod-colorpicker-wrap .mod-color-hex:focus {
    box-shadow: none !important;
    outline: none !important;
}

.mod-colorpicker-wrap .colorpicker {
    width: 44px;
    height: 42px;
    border: none;
    padding: 3px 5px;
    background: transparent;
    cursor: pointer;
    border-left: 2px solid color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
    flex-shrink: 0;
    border-radius: 0 !important;
}

.mod-colorpicker-wrap:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
}

/* ── Save / Update / Cancel buttons ──────────────────────────── */
.mod-save-btn,
.mod-update-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    background: color-mix(in srgb, var(--primary-color) 90%, var(--assest-color));
    color: var(--dark-color);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-color) 30%, transparent);
    transition: background 0.2s ease, transform 150ms ease, box-shadow 200ms ease;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

.mod-save-btn::after,
.mod-update-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white-color) 38%, transparent), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.mod-save-btn:hover,
.mod-update-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 100%, var(--assest-color));
    box-shadow: 0 5px 18px color-mix(in srgb, var(--primary-color) 42%, transparent);
    transform: translateY(-1px);
}

.mod-save-btn:hover::after,
.mod-update-btn:hover::after {
    left: 130%;
}

.mod-save-btn:focus,
.mod-update-btn:focus,
.mod-save-btn:focus-visible,
.mod-update-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.mod-save-btn:disabled,
.mod-update-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.mod-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: color-mix(in srgb, var(--red-color) 10%, var(--assest-color));
    color: var(--red-color);
    border: 1.5px solid color-mix(in srgb, var(--red-color) 28%, transparent);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 150ms ease;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

.mod-cancel-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white-color) 30%, transparent), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.mod-cancel-btn:hover {
    background: color-mix(in srgb, var(--red-color) 18%, var(--assest-color));
    border-color: var(--red-color);
    box-shadow: 0 0 0 3px rgb(var(--red-color-rgb) / 0.12), 0 3px 10px rgb(var(--red-color-rgb) / 0.16);
    transform: translateY(-1px);
}

.mod-cancel-btn:hover::after {
    left: 130%;
}

.mod-cancel-btn:focus,
.mod-cancel-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--red-color-rgb) / 0.22);
}

/* ── Highlight/Info Note (e.g. Delivery Slot Capacity partner-shift reminder) ── */
.mod-highlight-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: color-mix(in srgb, #f59e0b 12%, var(--assest-color));
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 18px;
}

.mod-highlight-note-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: #d97706;
    margin-top: 1px;
}

.mod-highlight-note-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dark-color);
    font-weight: 500;
}

/* ── Renew / Generate Next 7 Days card (Delivery Slot Capacity) ── */
.bcp-renew-card .bcp-renew-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.bcp-renew-card .bcp-renew-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 320px;
}

.bcp-renew-card .bcp-renew-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bcp-renew-card .bcp-renew-text .mod-card-title {
    margin: 0;
}

.bcp-renew-card .bcp-card-subtitle {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.bcp-renew-card #renew_next_days_btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Add Bulk Capacity card (Delivery Slot Capacity) ──────────── */
.bulk-capacity-card .bcp-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bulk-capacity-card .bcp-card-subtitle {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.bulk-capacity-card .bcp-section {
    /* padding: 18px 0; */
    border-bottom: 1px dashed color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.bulk-capacity-card .bcp-section:first-child {
    padding-top: 4px;
}

.bulk-capacity-card .bcp-section:last-of-type {
    border-bottom: none;
}

.bulk-capacity-card .bcp-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bulk-capacity-card .bcp-step-badge {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--dark-color);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.bulk-capacity-card .bcp-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.bulk-capacity-card .bcp-section-subtitle {
    margin: 2px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Date range summary panel */
.bulk-capacity-card .bcp-range-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 9px;
    padding: 8px 14px;
    min-height: 42px;
    box-sizing: border-box;
}

.bulk-capacity-card .bcp-range-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 12px;
    flex-shrink: 0;
}

.bulk-capacity-card .bcp-range-summary-text {
    min-width: 0;
}

.bulk-capacity-card .bcp-range-summary-days {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.3;
}

.bulk-capacity-card .bcp-range-summary-dates {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.bulk-capacity-card .bcp-range-error {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--red-color);
    min-height: 14px;
}

/* Slot templates */
.bulk-capacity-card .bcp-all-slots-card {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 10px;
    padding: 14px;
    height: 100%;
    box-sizing: border-box;
}

.bulk-capacity-card .bcp-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    cursor: pointer;
    font-weight: 600;
}

.bulk-capacity-card .bcp-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.bulk-capacity-card .bcp-checkbox-label {
    font-size: 13px;
    color: var(--dark-color);
}

.bulk-capacity-card .bcp-helper-text {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.bulk-capacity-card .bcp-slot-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px 14px;
    max-height: 160px;
    overflow-y: auto;
}

.bulk-capacity-card .bcp-slot-checkbox {
    margin-bottom: 0;
    padding: 4px 0;
    font-weight: 500;
}

.bulk-capacity-card .bcp-info-panel {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-left: 3px solid var(--primary-color);
    border-radius: 7px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.bulk-capacity-card .bcp-info-panel i {
    color: var(--primary-dark-color);
    font-size: 13px;
    flex-shrink: 0;
}

/*
 * Steps 2 + 3 (Slot Templates + Capacity Settings) share one row now.
 * The wrapping `.form-row` provides Bootstrap's negative gutter, so both
 * `.bcp-section` children read as normal Step cards with the same dashed
 * separator - the trailing bottom-border on the left column is dropped
 * because vertically it visually sits at the same height as the settings
 * card and its own border would double up with the row's outer edge.
 */
.bulk-capacity-card .bcp-slot-cap-row {
    align-items: stretch;
    margin-bottom: 0;
}

.bulk-capacity-card .bcp-slot-cap-row>[class*="col-"] {
    display: flex;
}

.bulk-capacity-card .bcp-slot-cap-row .bcp-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-bottom: none;
}

.bulk-capacity-card .bcp-section--slots .bcp-slot-list {
    max-height: none;
    flex: 1 1 auto;
}

.bulk-capacity-card .bcp-section--slots .bcp-all-slots-card {
    height: auto;
    margin-bottom: 10px;
}

.bulk-capacity-card .bcp-section--settings .bcp-settings-table-wrap {
    flex: 1 1 auto;
}

@media (max-width: 767px) {
    .bulk-capacity-card .bcp-slot-cap-row>[class*="col-"] {
        display: block;
    }

    .bulk-capacity-card .bcp-slot-cap-row .bcp-section--slots {
        margin-bottom: 18px;
    }
}

/* Capacity settings table */
.bulk-capacity-card .bcp-settings-table-wrap {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
}

.bulk-capacity-card .bcp-settings-table {
    margin-bottom: 0;
    min-width: 0;
}

.bulk-capacity-card .bcp-settings-table td,
.bulk-capacity-card .bcp-settings-table th {
    vertical-align: middle;
    padding: 14px 16px;
}

.bulk-capacity-card .bcp-settings-table thead th {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark-color);
}

.bulk-capacity-card .bcp-settings-table thead th:first-child,
.bulk-capacity-card .bcp-settings-table td.bcp-settings-slot-cell {
    text-align: left;
}

.bulk-capacity-card .bcp-settings-table .bcp-settings-col-center {
    text-align: center;
}

.bulk-capacity-card .bcp-settings-table tbody td {
    border-top: 1px solid var(--border-light);
    border-bottom: none;
}

.bulk-capacity-card .bcp-settings-slot-label {
    font-weight: 700;
    color: var(--dark-color);
    font-size: 13px;
}

.bulk-capacity-card .bcp-settings-slot-time {
    margin-left: 6px;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 12px;
}

.bulk-capacity-card .bcp-settings-table .mod-input {
    max-width: 160px;
    margin: 0 auto;
    text-align: center;
}

/* Capacity preview grid — the shell splits the label column and the date
   columns into two side-by-side tables so ONLY the date area horizontally
   scrolls. The horizontal scrollbar belongs to `.bcp-preview-scroll` and is
   visually confined to the date columns; the fixed column table sits in a
   separate flex track outside that overflow container.
   The shell itself is the VERTICAL scroll container (max-height + overflow-y
   auto). Both inner tables' <thead> cells are `position: sticky; top: 0`,
   so the header row stays pinned to the top of the shell while the shared
   body content scrolls beneath it — the two tables' header rows never drift
   because they share a single scroll container.
   `--bcp-preview-head-h` fixes the first thead row height so the two-tier
   subhead row can sit exactly below it using `top: var(...)`. */
.bulk-capacity-card .bcp-preview-shell {
    --bcp-preview-head-h: 34px;
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
}

.bulk-capacity-card .bcp-preview-fixed {
    flex: 0 0 auto;
    /* Right border acts as the visual seam between the fixed label column
       and the scrolling date area (the shared shell already draws the outer
       border/radius). */
    border-right: 1px solid var(--border-light);
    background: var(--assest-color);
}

.bulk-capacity-card .bcp-preview-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
}

.bulk-capacity-card .bcp-preview-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: max-content;
}

.bulk-capacity-card .bcp-preview-fixed-table {
    /* Fixed column table takes only the intrinsic width of its label
       column so nothing on the fixed side scrolls. */
    width: auto;
    min-width: 180px;
}

.bulk-capacity-card .bcp-preview-table th,
.bulk-capacity-card .bcp-preview-table td {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    z-index: 1;
}

/* The fixed-column table's last visible border is drawn by the shell's
   `border-right` between the two tracks, so drop the intra-cell right
   border on the fixed side to avoid a double line. */
.bulk-capacity-card .bcp-preview-fixed-table th,
.bulk-capacity-card .bcp-preview-fixed-table td {
    border-right: none;
}

/* Sticky header rows — the header sits at top:0 while the body rows
   scroll inside `.bcp-preview-shell`. Applied to <th> cells in BOTH
   inner tables so the "Slot Template" corner, the date labels, and the
   G/M sub-labels all remain pinned. `--bcp-preview-head-h` on the shell
   fixes the first row height so the second row can lock exactly below it. */
.bulk-capacity-card .bcp-preview-table thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 5;
    height: var(--bcp-preview-head-h);
}

.bulk-capacity-card .bcp-preview-table thead tr:nth-child(2) th {
    position: sticky;
    top: var(--bcp-preview-head-h);
    z-index: 5;
}

.bulk-capacity-card .bcp-preview-table .bcp-preview-corner,
.bulk-capacity-card .bcp-preview-table .bcp-preview-row-label {
    background: var(--primary-light);
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dark-color);
    white-space: nowrap;
    min-width: 180px;
}

.bulk-capacity-card .bcp-preview-date-head {
    background: var(--primary-light);
    font-size: 11px;
    font-weight: 700;
    color: var(--dark-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bulk-capacity-card .bcp-preview-sub {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 56px;
}

.bulk-capacity-card .bcp-preview-cell {
    background: var(--assest-color);
}

.bulk-capacity-card .bcp-preview-cell .bcp-cell-input {
    width: 56px;
    padding: 6px 4px !important;
    text-align: center;
    font-size: 12px !important;
}

.bulk-capacity-card .bcp-cell--exists {
    background: color-mix(in srgb, var(--primary-color) 16%, var(--assest-color));
    box-shadow: inset 0 0 0 1.5px var(--primary-dark-color);
}

/* Summary bar */
.bulk-capacity-card .bcp-summary-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 10px;
}

.bulk-capacity-card .bcp-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 12px;
}

.bulk-capacity-card .bcp-summary-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark-color);
}

.bulk-capacity-card .bcp-summary-item {
    font-size: 12px;
    color: var(--text-secondary);
}

.bulk-capacity-card .bcp-summary-item strong {
    color: var(--dark-color);
    font-weight: 700;
}

/* Duplicate-prevention UI: existing/disabled preview cells */
.bulk-capacity-card .bcp-cell-input:disabled {
    background: transparent;
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

.bulk-capacity-card .bcp-slot-input:disabled {
    accent-color: var(--text-secondary);
    cursor: not-allowed;
}

.bulk-capacity-card .bcp-slot-checkbox:has(.bcp-slot-input:disabled) .bcp-checkbox-label {
    color: var(--text-secondary);
}

.bulk-capacity-card .bcp-slot-redundant-note {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 500;
    font-style: italic;
    color: var(--text-secondary);
}

/* ── Add Bulk Delivery Partner Shifts card ───────────────────── */
.bulk-shift-card .bsh-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bulk-shift-card .bsh-card-subtitle {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.bulk-shift-card .bsh-steps-row {
    align-items: stretch;
}

/* Steps 1-3 render as equal-height side-by-side cards; Step 4 (Shift
   Capacity) spans the full card width below them, so it's kept unboxed. */
.bulk-shift-card .bsh-section {
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
}

.bulk-shift-card .bsh-section--capacity {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
}

.bulk-shift-card .bsh-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bulk-shift-card .bsh-step-badge {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--dark-color);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.bulk-shift-card .bsh-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

/* Step 1: Shift Date range summary panel */
.bulk-shift-card .bsh-range-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 9px;
    padding: 8px 14px;
    min-height: 42px;
    box-sizing: border-box;
}

.bulk-shift-card .bsh-range-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 12px;
    flex-shrink: 0;
}

.bulk-shift-card .bsh-range-summary-text {
    min-width: 0;
}

.bulk-shift-card .bsh-range-summary-days {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.3;
}

.bulk-shift-card .bsh-range-summary-dates {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.bulk-shift-card .bsh-range-error {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--red-color);
    min-height: 14px;
}

/* From Date field gets a brief highlight when the admin picks a To Date
   before a From Date, pointing them back at the required field. */
.bulk-shift-card #bsh_from_date.bsh-field-error-highlight {
    border-color: var(--red-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-color) 18%, transparent) !important;
}

/* Steps 2 & 3: Delivery Boys / Slot Templates checkbox panels */
.bulk-shift-card .bsh-boy-search-box {
    width: 100%;
    margin-bottom: 10px;
}

.bulk-shift-card .bsh-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    cursor: pointer;
    font-weight: 600;
}

.bulk-shift-card .bsh-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.bulk-shift-card .bsh-checkbox-label {
    font-size: 13px;
    color: var(--dark-color);
}

.bulk-shift-card .bsh-select-all-row {
    padding-bottom: 8px;
    border-bottom: 1px dashed color-mix(in srgb, var(--primary-color) 25%, transparent);
    margin-bottom: 8px;
}

.bulk-shift-card .bsh-boy-list,
.bulk-shift-card .bsh-slot-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px 12px;
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.bulk-shift-card .bsh-boy-checkbox,
.bulk-shift-card .bsh-slot-checkbox {
    margin-bottom: 0;
    padding: 4px 0;
    font-weight: 500;
}

.bulk-shift-card .bsh-boy-checkbox.bsh-hidden {
    display: none;
}

.bulk-shift-card .bsh-selected-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--green-color);
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--green-color) 30%, transparent);
    border-radius: 20px;
    padding: 4px 12px;
}

/* Duplicate-prevention UI: redundant (fully-booked) boy/slot checkboxes */
.bulk-shift-card .bsh-boy-input:disabled,
.bulk-shift-card .bsh-slot-input:disabled {
    accent-color: var(--text-secondary);
    cursor: not-allowed;
}

.bulk-shift-card .bsh-boy-checkbox:has(.bsh-boy-input:disabled) .bsh-checkbox-label,
.bulk-shift-card .bsh-slot-checkbox:has(.bsh-slot-input:disabled) .bsh-checkbox-label {
    color: var(--text-secondary);
}

.bulk-shift-card .bsh-redundant-note {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 500;
    font-style: italic;
    color: var(--text-secondary);
}

/* Step 4: Shift Capacity combination table */
.bulk-shift-card .bsh-capacity-table-wrap {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.bulk-shift-card .bsh-capacity-table {
    margin-bottom: 0;
}

.bulk-shift-card .bsh-capacity-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark-color);
    padding: 12px 16px;
    vertical-align: middle;
}

.bulk-shift-card .bsh-capacity-table td {
    padding: 10px 16px;
    vertical-align: middle;
    border-top: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--dark-color);
}

.bulk-shift-card .bsh-capacity-col-center {
    text-align: center;
}

.bulk-shift-card .bsh-capacity-table .mod-input {
    max-width: 120px;
    margin: 0 auto;
    text-align: center;
}

.bulk-shift-card .bsh-capacity-empty-row td {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 12.5px;
}

.bulk-shift-card .bsh-row--exists {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
}

.bulk-shift-card .bsh-row--exists td {
    color: var(--text-secondary);
}

.bulk-shift-card .bsh-exists-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-dark-color);
    background: color-mix(in srgb, var(--primary-color) 20%, var(--assest-color));
    border-radius: 10px;
    padding: 2px 8px;
}

.bulk-shift-card .bsh-cell-input:disabled {
    background: transparent;
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Summary bar */
.bulk-shift-card .bsh-summary-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 10px;
}

.bulk-shift-card .bsh-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 12px;
}

.bulk-shift-card .bsh-summary-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark-color);
}

.bulk-shift-card .bsh-summary-item {
    font-size: 12px;
    color: var(--text-secondary);
}

.bulk-shift-card .bsh-summary-item strong {
    color: var(--dark-color);
    font-weight: 700;
}

@media (max-width: 991px) {
    .bulk-shift-card .bsh-section {
        margin-bottom: 16px;
        height: auto;
    }
}

@media (max-width: 767px) {
    .bulk-shift-card .bsh-capacity-table-wrap {
        max-height: 320px;
    }
}

/* ── Delivery Partner Shifts list: row-select checkboxes + bulk status bar ── */
.dps-select-col {
    width: 36px;
}

#datatable .dps-row-checkbox,
.dps-select-col input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.dps-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0 20px 14px;
}

.dps-bulk-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 20px;
    padding: 6px 14px;
}

.dps-bulk-status {
    min-width: 170px;
}

.dps-bulk-apply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/*
 * `Full` shift lock (rider at/over capacity) - the row's status column
 * becomes a read-only badge with no click handler, and its row checkbox
 * (plus Select All when every visible row is Full) is disabled. Colors
 * reuse the existing --text-secondary / --assest-color tokens so the
 * badge sits visually alongside the show-btn / hide-btn pill without a
 * new palette.
 */
.dps-status-full {
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 18px;
    border-radius: 5px;
    border: 2px dashed transparent;
    background: color-mix(in srgb, var(--text-secondary) 15%, var(--assest-color));
    color: var(--text-secondary);
    cursor: not-allowed;
}

#datatable .dps-row-checkbox:disabled,
.dps-select-col input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mod-search-with-filter #filter_slot_template_id.w-50,
.mod-search-with-filter #filter_delivery_boy_id.w-50 {
    width: auto !important;
    flex: 1 1 200px;
    min-width: 200px;
}

.mod-search-with-filter #filter_slot_template_id+.select2-container,
.mod-search-with-filter #filter_delivery_boy_id+.select2-container {
    flex: 0 1 300px;
    min-width: 200px;
    width: auto;
    max-width: none;
}

@media (max-width: 575px) {
    .dps-bulk-bar {
        padding: 0 14px 14px;
    }

    .mod-search-with-filter #filter_slot_template_id.w-50,
    .mod-search-with-filter #filter_delivery_boy_id.w-50,
    .mod-search-with-filter #filter_slot_template_id+.select2-container,
    .mod-search-with-filter #filter_delivery_boy_id+.select2-container {
        flex-basis: 100%;
        min-width: 0;
    }
}

/*
 * Flatpickr theming — shared by every DTBasket admin page that uses a
 * Flatpickr date input (currently: Delivery Slot Capacity and Delivery
 * Partner Shifts). Flatpickr portals its calendar popup to <body>, so
 * these rules can't be scoped under a module wrapper — they're keyed off
 * `.flatpickr-calendar` itself.
 *
 * All colors are pulled from the existing DTBasket theme tokens
 * (`--assest-color`, `--dark-color`, `--text-secondary`, `--primary-color`,
 * `--primary-dark-color`, `--primary-light`, `--border-light`) so the same
 * rules render correctly in both Light and Dark mode without a separate
 * `[data-theme="dark"]` block.
 *
 * Specificity note: `style.css` is loaded from the layout `<head>`, while
 * the Flatpickr CDN stylesheet is loaded LATER inside the page's content
 * section. That means Flatpickr's own rules WIN a plain source-order/equal
 * -specificity tie. To beat them, every selector below is intentionally
 * prefixed/chained with `.flatpickr-calendar` (or a matching parent) so
 * the specificity strictly exceeds Flatpickr's defaults. Do not simplify
 * these selectors without re-checking the cascade against Flatpickr 4.6.13.
 */
.flatpickr-calendar.flatpickr-calendar {
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    /* Flatpickr's default box-shadow is a 4-sided #e6e6e6 outline plus a
       soft drop shadow, which reads as a bright box in Dark mode. Replace
       with a theme-neutral shadow driven by the existing tokens. */
    box-shadow: 0 4px 14px rgb(var(--primary-rgb) / 0.10),
        0 1px 3px rgb(var(--black-rgb) / 0.10);
    color: var(--dark-color);
    /* Flatpickr portals the calendar to <body>, so it isn't clipped by any
       ancestor `overflow` (including the Shift Capacity / Capacity Preview
       scroll containers). This explicit z-index keeps it above sticky
       thead cells (z-index: 5) and any DataTables fixed header in case a
       later rule accidentally lowers Flatpickr's default 99999. */
    z-index: 99999;
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--border-light);
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--assest-color);
}

.flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--border-light);
}

.flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--assest-color);
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
    background: var(--assest-color);
    color: var(--white-color);
    fill: var(--dark-color);
}

/* Month name + year input: the "Month / Year" heading in the calendar
   header. Flatpickr fixes these to rgba(0,0,0,0.9) which renders as
   near-black text on the Dark-mode calendar background. */
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month span.cur-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    color: var(--dark-color);
    fill: var(--dark-color);
    font-weight: 600;
}

.flatpickr-calendar .flatpickr-current-month span.cur-month:hover {
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
    background: transparent;
    border: none;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year[disabled],
.flatpickr-calendar .flatpickr-current-month input.cur-year[disabled]:hover {
    color: var(--text-secondary);
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--dark-color);
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--dark-color);
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--primary-color);
    background: transparent;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--assest-color);
    color: var(--dark-color);
}

/* Prev/Next month navigation arrows. Flatpickr defaults these to
   rgba(0,0,0,0.9) which renders black on dark. */
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    color: var(--dark-color);
    fill: var(--dark-color);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    fill: var(--dark-color);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg path {
    fill: inherit;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
    color: var(--primary-dark-color);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--primary-dark-color);
}

.flatpickr-calendar span.flatpickr-weekday {
    background: var(--assest-color);
    color: var(--text-secondary);
    font-weight: 700;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day {
    color: var(--white-color);
    border-color: transparent;
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--primary-color);
    color: var(--dark-color);
}

.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus,
.flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-day.prevMonthDay:focus,
.flatpickr-calendar .flatpickr-day.nextMonthDay:hover,
.flatpickr-calendar .flatpickr-day.nextMonthDay:focus {
    background: color-mix(in srgb, var(--primary-color) 22%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
    color: var(--dark-color);
    outline: 0;
}

.flatpickr-calendar .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-day.today:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--dark-color);
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.endRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--dark-color);
    box-shadow: none;
}

.flatpickr-calendar .flatpickr-day.inRange {
    background: color-mix(in srgb, var(--primary-color) 30%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    color: var(--dark-color);
    box-shadow: -5px 0 0 color-mix(in srgb, var(--primary-color) 30%, var(--assest-color)),
        5px 0 0 color-mix(in srgb, var(--primary-color) 30%, var(--assest-color));
}

.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: color-mix(in srgb, var(--text-secondary) 85%, transparent);
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar .flatpickr-day.notAllowed,
.flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    opacity: 0.45;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Time picker text/inputs (only present when a picker enables enableTime;
   left themed so a future date+time picker in these modules stays legible
   in Dark mode). */
.flatpickr-calendar .flatpickr-time input,
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
    background: var(--assest-color);
    color: var(--dark-color);
}

.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--dark-color);
}

.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--dark-color);
}

/* ── Image upload component ───────────────────────────────────── */
@keyframes pu-dragover-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / 0.0);
    }

    50% {
        box-shadow: 0 0 0 5px rgb(var(--primary-rgb) / 0.14);
    }
}

.pu-upload-wrap {
    position: relative;
    display: block;
    width: fit-content;
}

.pu-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 160px;
    height: 130px;
    aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--assest-color));
    border: 2px dashed color-mix(in srgb, var(--primary-color) 35%, transparent);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition: background 0.28s ease, border-color 0.28s ease, border-width 0.28s ease, box-shadow 0.28s ease;
    margin: 0;
}

/* Portrait Upload */
.pu-upload-wrap.pu-portrait .pu-drop-zone {
    aspect-ratio: 3 / 4;
    height: auto;
}

/* Landscape */
.pu-upload-wrap.pu-landscape {
    width: 210px;
}

.pu-upload-wrap.pu-landscape .pu-drop-zone {
    width: 210px;
    height: 110px;
    max-width: none;
    aspect-ratio: unset;
}

.pu-drop-zone:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 80%, transparent);
    border-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.pu-drop-zone:hover .pu-zone-icon {
    transform: translateY(-4px);
    opacity: 1;
}

.pu-drop-zone:hover .pu-zone-text {
    color: var(--primary-color);
    opacity: 1;
}

.pu-drop-zone:hover .pu-zone-sub {
    opacity: 0.9;
}

.pu-drop-zone.dragover {
    background: color-mix(in srgb, var(--primary-color) 18%, var(--assest-color));
    border-color: var(--primary-color);
    border-width: 2.5px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent);
    animation: pu-dragover-pulse 0.9s ease-in-out infinite;
}

.pu-drop-zone.dragover .pu-zone-icon {
    transform: scale(1.15) translateY(-4px);
    opacity: 1;
}

.pu-zone-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 1;
    position: relative;
    transition: opacity 0.2s ease;
}

.pu-zone-icon {
    font-size: 24px;
    color: var(--primary-color);
    opacity: 0.72;
    transition: transform 0.30s ease, opacity 0.25s ease;
}

.pu-zone-text {
    font-size: 11px;
    color: color-mix(in srgb, var(--primary-color) 60%, var(--dark-color));
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.pu-zone-sub {
    font-size: 11px;
    color: color-mix(in srgb, var(--primary-color) 60%, var(--dark-color));
    /* opacity: 0.65; */
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: opacity 0.25s ease;
}

/* Portrait: icon images — show full icon without crop */
.pu-upload-wrap:not(.pu-landscape) .pu-zone-preview {
    object-fit: contain;
    padding: 6px;
}

/* Landscape: banner images — fill area */
.pu-upload-wrap.pu-landscape .pu-zone-preview {
    object-fit: cover;
}

.pu-zone-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
    display: block;
}

.pu-upload-wrap.pu-has-image .pu-zone-hint {
    opacity: 0;
}

.pu-upload-wrap.pu-has-image .pu-zone-preview {
    opacity: 1;
}

.pu-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    color: var(--red-color);
    border: 1.5px solid color-mix(in srgb, var(--red-color) 55%, transparent);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 10;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    line-height: 1;
    padding: 0;
}

.pu-remove-btn:hover {
    background: var(--red-color);
    color: var(--white-color);
    border-color: var(--red-color);
    transform: scale(1.18);
    box-shadow: 0 2px 8px rgb(var(--red-color-rgb) / 0.30);
}

.pu-remove-btn:disabled {
    opacity: 0.5;
    cursor: wait;
    transform: none;
}

.pu-remove-btn,
.pu-remove-btn:hover,
.pu-remove-btn:focus,
.pu-remove-btn:focus-visible,
.pu-remove-btn:active {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

/* ── Search box ───────────────────────────────────────────────── */
.mod-search-wrap {
    padding: 16px 20px 12px;
}

.mod-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1.5px solid var(--primary-bg);
    border-radius: 10px;
    padding: 0 14px;
    width: 100%;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.mod-search-box:focus-within {
    background-color: var(--assest-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.mod-search-icon {
    color: var(--text-secondary) !important;
    font-size: 13px;
    flex-shrink: 0;
}

.mod-search-input {
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    padding: 10px 0 !important;
    flex: 1;
    min-width: 0;
    box-shadow: none !important;
    height: auto !important;
}

.mod-search-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

.mod-search-input::placeholder {
    color: color-mix(in srgb, var(--partition-color, var(--dark-color)) 38%, transparent) !important;
}

/* ── Search bar with inline filter select ─────────────────────── */
.mod-search-with-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mod-search-with-filter .mod-search-box {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
}

.mod-filter-select {
    appearance: auto;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1.5px solid var(--primary-bg);
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: none;
    outline: none;
}

.mod-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
    background-color: var(--assest-color);
}

/* ── Table ────────────────────────────────────────────────────── */
.mod-table-wrap {
    padding: 0;
}

.mod-table-wrap .table {
    margin-bottom: 0;
}

.mod-table-wrap thead tr {
    background: var(--primary-light) !important;
}

.mod-table-wrap thead th {
    color: var(--partition-color, var(--dark-color)) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-top: none !important;
    border-bottom: none !important;
    padding: 14px 16px;
    vertical-align: middle;
}

.mod-table-wrap tbody tr {
    transition: background 0.14s, box-shadow 0.14s;
}

.mod-table-wrap tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.mod-table-wrap tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    color: var(--partition-color, var(--dark-color));
    font-size: 15.5px;
    border-color: color-mix(in srgb, var(--primary-color) 8%, transparent) !important;
}

.mod-tbl-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 8%, transparent);
    transition: transform 0.18s, box-shadow 0.18s;
    display: block;
    margin: 0 auto;
}

.mod-tbl-img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.mod-tbl-img-land {
    width: 90px;
    height: 44px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 8%, transparent);
    display: block;
    margin: 0 auto;
    transition: transform 0.18s;
}

.mod-tbl-img-land:hover {
    transform: scale(1.04);
}

.mod-color-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 6px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--partition-color, var(--dark-color));
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.mod-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--black-color) 15%, transparent);
}

/* ── Status pill animations ───────────────────────────────────── */
@keyframes mod-pill-appear {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }

    65% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mod-dot-pulse {
    0% {
        transform: scale(0.4);
        opacity: 0.3;
    }

    55% {
        transform: scale(1.35);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Status pills ─────────────────────────────────────────────── */
.show-btn,
.hide-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 10px;
    border-radius: 20px;
    font-size: 14px !important;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity 0.18s, transform 0.14s, box-shadow 0.18s;
    line-height: 1.5;
    animation: mod-pill-appear 0.32s ease both;
}

.show-btn::before,
.hide-btn::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    animation: mod-dot-pulse 0.42s ease 0.08s both;
}

.show-btn {
    background: color-mix(in srgb, var(--green-color) 13%, transparent);
    color: var(--green-color);
}

.show-btn::before {
    background: var(--green-color);
    box-shadow: 0 0 5px color-mix(in srgb, var(--green-color) 60%, transparent);
}

.show-btn:hover {
    opacity: 0.85;
    transform: scale(0.97);
    background: color-mix(in srgb, var(--green-color) 13%, transparent);
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--green-color) 22%, transparent);
    color: var(--green-color);
}

.hide-btn {
    background: color-mix(in srgb, var(--red-color) 11%, transparent);
    color: var(--red-color);
}

.hide-btn::before {
    background: var(--red-color);
    box-shadow: 0 0 5px color-mix(in srgb, var(--red-color) 60%, transparent);
}

.hide-btn:hover {
    opacity: 0.85;
    transform: scale(0.97);
    background: color-mix(in srgb, var(--red-color) 11%, transparent);
    border: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--red-color) 22%, transparent);
    color: var(--red-color);
}

.show-btn:focus,
.hide-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ── Edit / Delete action buttons ─────────────────────────────── */
.edit-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-dark-color);
    transition: background 0.18s, color 0.18s, transform 0.14s, box-shadow 0.18s;
}

.edit-delete-btn:hover {
    background: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

form .edit-delete-btn {
    background: color-mix(in srgb, var(--red-color) 11%, transparent);
    color: var(--red-color);
    outline: none;
}

form .edit-delete-btn:hover {
    background: var(--red-color);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--red-color) 28%, transparent);
    border: none;
}

.edit-delete-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ── Modal redesign ───────────────────────────────────────────── */
.mod-modal .modal-content,
.mod-sort-modal .modal-content {
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-radius: 16px;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--black-color) 18%, transparent);
    overflow: hidden;
}

.mod-modal .modal-header {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    padding: 15px 20px;
}

.mod-modal .modal-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark-color);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    flex: 1;
}

.mod-modal-title-icon {
    width: 28px;
    height: 28px;
    background: var(--primary-color);
    color: var(--dark-color);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.mod-modal-close {
    width: 30px;
    height: 30px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: color-mix(in srgb, var(--red-color) 10%, var(--assest-color)) !important;
    color: var(--red-color) !important;
    border: 1.5px solid color-mix(in srgb, var(--red-color) 28%, transparent) !important;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 150ms ease;
    padding: 0 !important;
    opacity: 1 !important;
    float: none !important;
    line-height: 1;
    margin-left: auto;
    text-shadow: none !important;
}

.mod-modal-close:hover {
    background: color-mix(in srgb, var(--red-color) 22%, var(--assest-color)) !important;
    border-color: var(--red-color) !important;
    color: var(--red-color) !important;
    box-shadow: 0 0 0 3px rgb(var(--red-color-rgb) / 0.12) !important;
    transform: translateY(-1px);
}

.mod-modal-close:focus,
.mod-modal-close:focus-visible,
.mod-modal-close:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.mod-modal .modal-body,
.mod-sort-modal .modal-body {
    padding: 20px;
    background: var(--assest-color);
}

.mod-modal .modal-footer {
    background: var(--assest-color);
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    padding: 14px 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.mod-sort-modal .modal-dialog {
    max-width: 460px;
}

.mod-sort-modal .modal-header {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    padding: 15px 20px;
    justify-content: center;
    position: relative;
}

.mod-sort-modal .modal-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark-color);
    text-align: center;
}

.mod-sort-modal .mod-modal-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

.mod-sort-modal .modal-body {
    max-height: 600px;
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--assest-color);
}

.mod-sort-modal .modal-footer {
    background: var(--assest-color);
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    padding: 14px 20px;
    justify-content: center;
}

/* Sortable list items */
.mod-sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: grab;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    user-select: none;
}

.mod-sort-item:last-child {
    margin-bottom: 0;
}

.mod-sort-item:hover {
    /* background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color)); */
    border-color: color-mix(in srgb, var(--text-secondary) 40%, transparent);
}

.mod-sort-item.ui-sortable-helper {
    background: color-mix(in srgb, var(--text-secondary) 18%, var(--assest-color));
    border-color: var(--text-secondary);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-secondary) 22%, transparent);
    cursor: grabbing;
}

.mod-sort-item.ui-sortable-placeholder {
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    border: 2px dashed color-mix(in srgb, var(--text-secondary) 55%, transparent);
    visibility: visible !important;
}

.mod-sort-handle {
    color: color-mix(in srgb, var(--partition-color, var(--dark-color)) 35%, transparent);
    font-size: 13px;
    flex-shrink: 0;
}

.mod-sort-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--partition-color, var(--dark-color));
    flex: 1;
    min-width: 0;
}

.mod-sort-index {
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    /* color: var(--primary-dark-color); */
    flex-shrink: 0;
}

/* ── Body content scrollbar (matches sidebar style) ──────────── */
body::-webkit-scrollbar {
    width: 5px;
}

body::-webkit-scrollbar-thumb {
    background: var(--primary-bg);
    border-radius: 4px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-bg) transparent;
}

/*
 * Delivery Slot Capacity + Delivery Partner Shifts double-scrollbar fix.
 * The base rules `html, body { height: 100%; overflow: auto }` let BOTH
 * html and body scroll vertically, which surfaces the browser's default
 * grey scrollbar next to the yellow `body::-webkit-scrollbar` on any page
 * whose content exceeds the viewport (these two module forms do). Scoping
 * via `:has()` limits the fix to just the two module pages - body remains
 * the sole scroll container so the intended yellow custom scrollbar (and
 * only that scrollbar) is what the admin sees. The Capacity Preview's
 * own horizontal scroll (`.bcp-preview-scroll`) is untouched because this
 * only removes the OUTER html's vertical scroll, not any inner one.
 */
html:has(.bulk-capacity-card),
html:has(.bulk-shift-card) {
    overflow-y: hidden;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .mod-page-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .mod-card-body {
        padding: 16px 14px 4px;
    }

    .mod-search-wrap {
        padding: 12px 14px 8px;
    }

    .pu-drop-zone {
        height: 90px;
    }

    .mod-modal .modal-footer {
        flex-wrap: wrap;
    }
}

@media (max-width: 575px) {
    .mod-card-head {
        padding: 12px 14px;
    }

    .mod-card-footer {
        padding: 12px 0 16px;
    }

    .mod-save-btn,
    .mod-update-btn,
    .mod-cancel-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Body Content — Entrance Animations & Hover Transitions
   Scoped entirely to .body-content; Login/Header/Sidebar untouched.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes bc-fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes bc-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bc-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

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

/* ── Page-level entrance ──────────────────────────────────────── */
.body-content {
    /* no animation here — animating the container creates a stacking context
       that traps position:fixed modals inside it */
}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.body-content .breadcrumb,
.body-content .breadcrumb-nav {
    animation: bc-fadeUp 0.30s ease both;
}

/* ── Panels / form cards ──────────────────────────────────────── */
.body-content .custom-border-card {
    animation: bc-fadeUp 0.38s ease both;
    transition: box-shadow 0.22s ease, transform 0.20s ease;
}

.body-content .custom-border-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 28px rgb(var(--primary-rgb) / 0.10),
        0 2px 8px rgb(var(--primary-rgb) / 0.06);
}

/* ── Stat / summary cards ─────────────────────────────────────── */
.body-content .custom-card {
    animation: bc-scaleIn 0.36s ease both;
}

/* Stagger when cards sit directly inside grid columns */
.body-content .row>[class*="col-"]:nth-child(1)>.custom-card {
    animation-delay: 0ms;
}

.body-content .row>[class*="col-"]:nth-child(2)>.custom-card {
    animation-delay: 65ms;
}

.body-content .row>[class*="col-"]:nth-child(3)>.custom-card {
    animation-delay: 130ms;
}

.body-content .row>[class*="col-"]:nth-child(4)>.custom-card {
    animation-delay: 195ms;
}

.body-content .row>[class*="col-"]:nth-child(5)>.custom-card {
    animation-delay: 250ms;
}

.body-content .row>[class*="col-"]:nth-child(6)>.custom-card {
    animation-delay: 295ms;
}

/* ── Earning / summary bar ────────────────────────────────────── */
.body-content .card-earning {
    animation: bc-fadeUp 0.36s ease both;
    transition: box-shadow 0.22s ease;
}

.body-content .card-earning:hover {
    box-shadow: 0 6px 20px rgb(var(--primary-rgb) / 0.09);
}

/* ── Category box ─────────────────────────────────────────────── */
.body-content .category-box {
    animation: bc-fadeUp 0.36s ease 0.04s both;
}

/* ── Table wrapper ────────────────────────────────────────────── */
.body-content .table-responsive {
    animation: bc-fadeUp 0.40s ease 0.05s both;
}

.body-content .table tbody tr {
    transition: background 0.15s ease;
}

/* ── Form group stagger ───────────────────────────────────────── */
.body-content .form-group {
    animation: bc-fadeUp 0.34s ease both;
}

.body-content .form-group:nth-child(1) {
    animation-delay: 0ms;
}

.body-content .form-group:nth-child(2) {
    animation-delay: 50ms;
}

.body-content .form-group:nth-child(3) {
    animation-delay: 95ms;
}

.body-content .form-group:nth-child(4) {
    animation-delay: 135ms;
}

.body-content .form-group:nth-child(5) {
    animation-delay: 170ms;
}

.body-content .form-group:nth-child(6) {
    animation-delay: 200ms;
}

.body-content .form-group:nth-child(7) {
    animation-delay: 225ms;
}

.body-content .form-group:nth-child(8) {
    animation-delay: 245ms;
}

/* ── Admin panel: unified form field base ─────────────────────── */
.right-content .form-control,
.right-content .custom-select,
.right-content select,
.right-content textarea {
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    color: var(--partition-color, var(--dark-color));
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.55;
    height: auto;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.right-content .form-control::placeholder,
.right-content textarea::placeholder {
    color: color-mix(in srgb, var(--partition-color, var(--dark-color)) 45%, transparent);
    font-weight: 400;
    letter-spacing: 0;
}

.right-content .form-control:focus,
.right-content .custom-select:focus,
.right-content select:focus,
.right-content textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
    outline: none;
}

/* ── Form control transitions ─────────────────────────────────── */
.body-content .form-control {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* ── Modal exclusion — prevent bc- animations from affecting modals ── */
.body-content .modal,
.body-content .modal-dialog,
.body-content .modal-content,
.body-content .modal-header,
.body-content .modal-body,
.body-content .modal-footer,
.body-content .modal-backdrop,
.body-content .modal *,
.body-content .modal-backdrop * {
    animation: none !important;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .body-content *:not(.modal):not(.modal-dialog):not(.modal-content):not(.modal-header):not(.modal-body):not(.modal-footer):not(.modal *) {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Delete Confirmation Modal CSS */
.cdm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: color-mix(in srgb, var(--black-color) 52%, transparent);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.cdm-backdrop.cdm-visible {
    display: flex;
    animation: cdm-bg-in 0.22s ease both;
}

.cdm-backdrop.cdm-closing {
    display: flex;
    animation: cdm-bg-out 0.2s ease both;
}

@keyframes cdm-bg-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cdm-bg-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.cdm-card {
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
    border-radius: 20px;
    box-shadow: 0 24px 64px color-mix(in srgb, var(--black-color) 22%, transparent),
        0 4px 16px color-mix(in srgb, var(--black-color) 10%, transparent);
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: cdm-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s both;
}

.cdm-backdrop.cdm-closing .cdm-card {
    animation: cdm-card-out 0.18s ease both;
}

@keyframes cdm-card-in {
    from {
        opacity: 0;
        transform: scale(0.86) translateY(-14px);
    }

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

@keyframes cdm-card-out {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.9) translateY(-8px);
    }
}

.cdm-icon-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdm-icon-wrap::before,
.cdm-icon-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
    animation: cdm-outer-expand 2.4s ease-out 0.5s infinite;
    pointer-events: none;
    z-index: 0;
}

.cdm-icon-wrap::after {
    border-color: color-mix(in srgb, var(--primary-color) 28%, transparent);
    animation-delay: 1.5s;
}

@keyframes cdm-outer-expand {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

.cdm-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    border: 2.5px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
    animation: cdm-ring-pulse 2s ease-in-out 0.5s infinite;
    z-index: 1;
}

@keyframes cdm-ring-pulse {

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

    50% {
        transform: scale(1.08);
        opacity: 0.7;
    }
}

.cdm-icon {
    font-size: 32px;
    color: var(--primary-dark-color);
    position: relative;
    z-index: 2;
    animation: cdm-icon-pop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes cdm-icon-pop {
    0% {
        opacity: 0;
        transform: scale(0.25);
    }

    60% {
        opacity: 1;
        transform: scale(1.2);
    }

    80% {
        transform: scale(0.92);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cdm-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-dark-color);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.cdm-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 28px;
    line-height: 1.65;
}

.cdm-message strong {
    color: var(--primary-dark-color);
    font-weight: 600;
}

.cdm-actions {
    display: flex;
    gap: 12px;
}

.cdm-cancel-btn {
    flex: 1;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.cdm-cancel-btn:hover {
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    border-color: var(--text-secondary);
    color: var(--primary-dark-color);
    transform: translateY(-1px);
}

.cdm-cancel-btn:focus,
.cdm-cancel-btn:focus-visible,
.cdm-cancel-btn:active {
    outline: none;
    box-shadow: none;
}

.cdm-confirm-btn {
    flex: 1;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: var(--red-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.cdm-confirm-btn:hover {
    background: color-mix(in srgb, var(--red-color) 85%, var(--black-color));
    box-shadow: 0 5px 18px rgb(var(--red-color-rgb) / 0.38);
    transform: translateY(-2px);
}

.cdm-confirm-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgb(var(--red-color-rgb) / 0.25);
}

.cdm-confirm-btn:focus,
.cdm-confirm-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {

    .cdm-backdrop.cdm-visible,
    .cdm-backdrop.cdm-closing,
    .cdm-card,
    .cdm-icon-wrap::before,
    .cdm-icon-wrap::after,
    .cdm-icon-ring,
    .cdm-icon {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 480px) {
    .cdm-card {
        padding: 32px 20px 24px;
        border-radius: 16px;
        max-width: 100%;
    }

    .cdm-actions {
        flex-direction: column;
    }
}

/* Select2 CSS */

/* Base box-model — no width here; width is scoped per context below.
   Applying width:100% globally would override Select2's JS-calculated pixel
   width on the body-appended overlay container, making it 100vw wide and
   breaking the entire page layout when a dropdown opens. */
.select2-container {
    display: block !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

/* Form-embedded containers (inside right-content or modal forms) — responsive.
   These are the trigger/selection elements inside columns; they must fill their
   parent column width regardless of any JS-set inline pixel width. */
.right-content .select2-container,
.modal-body .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Body-appended overlay container — Select2 positions this absolutely with
   JS-calculated left/width. Only cap at viewport width; never override width. */
body>.select2-container {
    max-width: calc(100vw - 8px) !important;
    box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single {
    background: var(--assest-color) !important;
    /* border: 1px solid var(--border-light); */
    border-radius: 9px !important;
    height: auto !important;
    padding: 0 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--partition-color, var(--dark-color)) !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: color-mix(in srgb, var(--partition-color, var(--dark-color)) 45%, transparent) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 10px !important;
    top: 0 !important;
    width: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: color-mix(in srgb, var(--partition-color, var(--dark-color)) 55%, transparent) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    left: 0 !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent color-mix(in srgb, var(--partition-color, var(--dark-color)) 55%, transparent) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
    outline: none !important;
}

.select2-dropdown {
    background: var(--assest-color) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--black-color) 12%, transparent) !important;
    overflow: hidden !important;
    margin-top: 3px !important;
    box-sizing: border-box !important;
}

.select2-search--dropdown {
    padding: 10px 12px 8px !important;
    background: var(--assest-color) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
}

.select2-search--dropdown .select2-search__field {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color)) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    border-radius: 7px !important;
    color: var(--black-50) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    outline: none !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    width: 100% !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
}

.select2-results__options {
    max-height: 230px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 40%, transparent) transparent !important;
}

.select2-results__options::-webkit-scrollbar {
    width: 4px !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color) 40%, transparent) !important;
    border-radius: 4px !important;
}

.select2-results__option {
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: var(--black-50) !important;
    transition: background 0.13s !important;
}

.select2-results__option--highlighted[aria-selected] {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent) !important;
    color: var(--primary-dark-color) !important;
}

.select2-results__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    color: var(--primary-dark-color) !important;
    font-weight: 500 !important;
}

.select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--primary-color) 30%, transparent) !important;
    color: var(--primary-dark-color) !important;
}

.select2-results__message,
.select2-results__option[aria-disabled="true"] {
    color: color-mix(in srgb, var(--black-50) 50%, transparent) !important;
    font-size: 13px !important;
    padding: 9px 14px !important;
}

html[data-theme="dark"] .select2-dropdown {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--black-color) 40%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent) !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color)) !important;
}

/* ── Select2 Multi-select ─────────────────────────────────────────────────── */
.select2-container--default .select2-selection--multiple {
    background: var(--assest-color) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 9px !important;
    min-height: 42px !important;
    padding: 4px 6px !important;
    cursor: text !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color)) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
    border-radius: 50px !important;
    padding: 3px 10px 3px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--primary-dark-color) !important;
    cursor: default !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
    color: var(--primary-dark-color) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    order: -1 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: var(--danger) !important;
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--primary-dark-color) !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--partition-color, var(--dark-color)) !important;
    font-size: 13px !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    min-width: 80px !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    border-color: color-mix(in srgb, var(--border-light) 55%, transparent) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--primary-color) 15%, var(--assest-color)) !important;
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent) !important;
}

/* ── Category Module: Count Chips ─────────────────────────────────── */
.cat-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 8px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s ease;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
}

.cat-count-chip .cat-chip-icon {
    font-size: 11px;
    opacity: 0.85;
}

.cat-chip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Sub Category chip — primary (yellow) palette */
.cat-count-chip--sub {
    background: var(--primary-light);
    color: var(--primary-dark-color);
    border: 1.5px solid var(--primary-color);
}

.cat-count-chip--sub .cat-chip-badge {
    background: var(--primary-color);
    color: var(--dark-color);
}

.cat-count-chip--sub:hover {
    background: var(--primary-color);
    color: var(--dark-color);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-color) 35%, transparent);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Attributes chip — purple palette */
.cat-count-chip--attr {
    background: color-mix(in srgb, var(--purple-color) 10%, transparent);
    color: var(--purple-color);
    border: 1.5px solid var(--purple-color);
}

.cat-count-chip--attr .cat-chip-badge {
    background: var(--purple-color);
    color: #fff;
}

.cat-count-chip--attr:hover {
    background: var(--purple-color);
    color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--purple-color) 30%, transparent);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ── Category Note Box ─────────────────────────────────────────────── */
.cat-note-box {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
}

.cat-note-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark-color);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cat-note-box ul {
    margin: 0;
    padding-left: 16px;
    list-style: disc;
}

.cat-note-box ul li {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── Category Hierarchy Path Section ──────────────────────────────── */
.cat-hierarchy-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 7px 16px;
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
    border-radius: 30px;
    width: fit-content;
}

.cat-hier-node {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.cat-hier-node.is-current {
    font-weight: 700;
    color: var(--primary-dark-color);
}

.cat-hier-node a {
    color: var(--text-secondary);
    text-decoration: none;
}

.cat-hier-node a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.cat-hier-sep {
    margin: 0 4px;
    color: var(--primary-color);
    font-size: 11.5px;
    opacity: 0.8;
}

/* ── Attributes table: Type column ───────────────────────────────── */
.attr-type-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ── Attributes table: Is Required column ────────────────────────── */
.attr-req-badge {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.attr-req-yes {
    color: var(--green-color);
}

.attr-req-no {
    color: var(--text-secondary);
}

/* ── Attributes table: Option Values column ──────────────────────── */
.attr-option-card {
    display: block;
    text-align: left;
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
    border-radius: 8px;
    padding: 6px 12px;
}

.attr-option-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
}

.attr-option-row+.attr-option-row {
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.attr-option-arrow {
    color: var(--primary-dark-color);
    font-size: 10px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE CARD LIST VIEW
   ═══════════════════════════════════════════════════════════════════════════ */
.article-list-table thead tr {
    display: none !important;
}

.article-list-table.dataTable tbody tr {
    background: transparent !important;
}

.article-list-table.dataTable tbody td {
    padding: 5px 0 !important;
    border: none !important;
    background: transparent !important;
}

.mod-table-wrap .article-list-table tbody tr:hover {
    background: transparent !important;
    box-shadow: none !important;
}

.article-card-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    gap: 20px;
    min-height: 96px;
    background: var(--assest-color);
    border: 1.5px solid var(--primary-bg);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgb(var(--primary-rgb) / 0.05);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

.article-card-row:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    box-shadow: 0 4px 18px rgb(var(--primary-rgb) / 0.12);
}

.article-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.article-card-img-link {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}

.article-card-img {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--primary-bg);
    display: block;
}

.article-card-img-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 24px;
    flex-shrink: 0;
}

.article-card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.article-card-title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--primary-color);
    background: var(--primary-bg);
    border-radius: 20px;
    padding: 3px 10px 3px 7px;
    line-height: 1;
    width: fit-content;
}

.article-card-cat i {
    font-size: 11px;
    color: var(--primary-color);
}

.article-card-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.article-card-actions .d-flex {
    gap: 8px;
    align-items: center;
}

@media (max-width: 575px) {
    .article-card-row {
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .article-card-right {
        width: 100%;
        justify-content: flex-end;
    }

    .article-card-title {
        font-size: 14px;
        white-space: normal;
    }

}

/* ── Article card stagger animation ──────────────────────────────────────── */
@keyframes articleCardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.article-card-animate {
    animation: articleCardIn 0.32s ease both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOMER MODULE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Export bar ──────────────────────────────────────────────────────────── */
.cust-export-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    background: var(--assest-color);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
    border-radius: 12px;
}

.cust-export-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, var(--dark-color));
    flex: 1;
    min-width: 0;
}

.cust-export-info i {
    font-size: 17px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.cust-export-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cust-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
    line-height: 1.4;
    background: none;
}

.cust-export-btn:focus {
    outline: none;
}

.cust-export-btn--excel {
    background: color-mix(in srgb, #1D6F42 10%, var(--assest-color));
    color: #1D6F42;
    border-color: color-mix(in srgb, #1D6F42 28%, transparent);
}

.cust-export-btn--excel:hover {
    background: #1D6F42;
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, #1D6F42 28%, transparent);
    transform: translateY(-1px);
}

.cust-export-btn--csv {
    background: color-mix(in srgb, #2563EB 10%, var(--assest-color));
    color: #2563EB;
    border-color: color-mix(in srgb, #2563EB 28%, transparent);
}

.cust-export-btn--csv:hover {
    background: #2563EB;
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, #2563EB 28%, transparent);
    transform: translateY(-1px);
}

.cust-export-btn--pdf {
    background: color-mix(in srgb, var(--red-color) 10%, var(--assest-color));
    color: var(--red-color);
    border-color: color-mix(in srgb, var(--red-color) 26%, transparent);
}

.cust-export-btn--pdf:hover {
    background: var(--red-color);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--red-color) 28%, transparent);
    transform: translateY(-1px);
}

/* ── Wallet amount badge ─────────────────────────────────────────────────── */
.cust-wallet-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    color: var(--green-color);
    border: 1px solid color-mix(in srgb, var(--green-color) 24%, transparent);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

/* ── Login type pill ─────────────────────────────────────────────────────── */
.cust-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cust-type-pill--otp {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    color: var(--primary-dark-color);
}

.cust-type-pill--google {
    background: color-mix(in srgb, #EA4335 11%, var(--assest-color));
    color: #C0392B;
}

.cust-type-pill--apple {
    background: color-mix(in srgb, #6B7280 10%, var(--assest-color));
}

.cust-type-pill--normal {
    background: color-mix(in srgb, var(--purple-color) 12%, var(--assest-color));
    color: var(--purple-color);
}

/* ── Location button — distinct colour from Edit ─────────────────────────── */
.edit-delete-btn:has(.fa-location-dot) {
    background: color-mix(in srgb, var(--purple-color) 14%, transparent);
    color: var(--purple-color);
}

.edit-delete-btn:has(.fa-location-dot):hover {
    background: var(--purple-color);
    color: var(--white-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--purple-color) 30%, transparent);
}

/* ── Address type badge (table view) ─────────────────────────────────────── */
.addr-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.addr-type-home {
    background: color-mix(in srgb, #3B82F6 11%, var(--assest-color));
    color: #2563EB;
    border: 1px solid color-mix(in srgb, #3B82F6 22%, transparent);
}

.addr-type-work {
    background: color-mix(in srgb, #F59E0B 11%, var(--assest-color));
    color: #B45309;
    border: 1px solid color-mix(in srgb, #F59E0B 22%, transparent);
}

.addr-type-other {
    background: color-mix(in srgb, var(--purple-color) 11%, var(--assest-color));
    color: var(--purple-color);
    border: 1px solid color-mix(in srgb, var(--purple-color) 22%, transparent);
}

/* ── Address type card/chip selector ─────────────────────────────────────── */
.addr-type-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 2px 0;
}

.addr-type-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: 10px;
    border: 1.5px solid rgba(107, 114, 128, 0.28);
    background: var(--assest-color);
    color: #6B7280;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    line-height: 1;
    outline: none;
    user-select: none;
}

.addr-type-opt:focus {
    outline: none;
}

.addr-type-opt:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.addr-type-opt--home.addr-type-opt--active:focus-visible {
    box-shadow: 0 2px 8px color-mix(in srgb, #3B82F6 20%, transparent),
        0 0 0 3px color-mix(in srgb, #3B82F6 32%, transparent);
}

.addr-type-opt--work.addr-type-opt--active:focus-visible {
    box-shadow: 0 2px 8px color-mix(in srgb, #F59E0B 20%, transparent),
        0 0 0 3px color-mix(in srgb, #F59E0B 32%, transparent);
}

.addr-type-opt--other.addr-type-opt--active:focus-visible {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--purple-color) 20%, transparent),
        0 0 0 3px color-mix(in srgb, var(--purple-color) 32%, transparent);
}

.addr-type-opt:hover:not(.addr-type-opt--active) {
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    color: var(--primary-color);
}

.addr-type-opt--home.addr-type-opt--active {
    background: color-mix(in srgb, #3B82F6 13%, var(--assest-color));
    border-color: #3B82F6;
    color: #2563EB;
    box-shadow: 0 2px 8px color-mix(in srgb, #3B82F6 20%, transparent);
}

.addr-type-opt--work.addr-type-opt--active {
    background: color-mix(in srgb, #F59E0B 13%, var(--assest-color));
    border-color: #D97706;
    color: #B45309;
    box-shadow: 0 2px 8px color-mix(in srgb, #F59E0B 20%, transparent);
}

.addr-type-opt--other.addr-type-opt--active {
    background: color-mix(in srgb, var(--purple-color) 13%, var(--assest-color));
    border-color: var(--purple-color);
    color: var(--purple-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--purple-color) 20%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELLER MODULE
   ═══════════════════════════════════════════════════════════════════════════ */

.slr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.slr-card {
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.slr-card:hover {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    transform: translateY(-3px);
}

.slr-card-avatar-wrap {
    background: linear-gradient(135deg, var(--primary-bg), color-mix(in srgb, var(--primary-color) 8%, var(--assest-color)));
    padding: 28px 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

.slr-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--assest-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    margin-bottom: -28px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.slr-card-body {
    padding: 36px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.slr-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    margin: 0 0 3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.slr-username {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.slr-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    width: 100%;
}

.slr-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--partition-color, var(--text-secondary));
}

.slr-meta-item i {
    font-size: 12px;
    color: var(--text-secondary);
}

.slr-stars {
    color: #F59E0B;
    font-size: 11px;
    letter-spacing: 1px;
}

.slr-meta-sep {
    width: 1px;
    height: 14px;
    background: var(--border-light);
}

.slr-divider {
    width: 100%;
    height: 1px;
    background: var(--border-light);
    margin-bottom: 12px;
}

.slr-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
}

.slr-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.slr-del-btn {
    background: color-mix(in srgb, var(--red-color) 11%, transparent) !important;
    color: var(--red-color) !important;
}

.slr-del-btn:hover {
    background: var(--red-color) !important;
    color: var(--white-color) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--red-color) 28%, transparent) !important;
}

.slr-card-footer {
    border-top: 1px solid var(--border-light);
    padding: 0;
    margin-top: auto;
}

.slr-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    background: color-mix(in srgb, var(--primary-color) 90%, var(--assest-color));
    color: var(--dark-color);
    border: none;
    border-radius: 0 0 16px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, box-shadow 0.18s, letter-spacing 0.18s;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.slr-view-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white-color) 40%, transparent), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.slr-view-btn:hover {
    background: var(--primary-color);
    color: var(--dark-color);
    text-decoration: none;
    letter-spacing: 0.04em;
    box-shadow: 0 -2px 12px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.slr-view-btn:hover::after {
    left: 130%;
}

.slr-view-btn:focus,
.slr-view-btn:focus-visible {
    outline: none;
}

.slr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-bottom: 20px;
}

.slr-pagination-info {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

@media (max-width: 767px) {
    .slr-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .slr-card-body {
        padding: 32px 12px 14px;
    }

    .slr-actions {
        justify-content: center;
    }

    .slr-pagination {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

/* ── Empty state ─────────────────────────────────────────────────────────── */
.slr-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background: var(--assest-color);
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 20px;
    margin-top: 20px;
    text-align: center;
}

.slr-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--primary-dark-color);
    margin-bottom: 20px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.slr-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    margin: 0 0 8px;
}

.slr-empty-msg {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    max-width: 280px;
}

/* ── Card entry animation ─────────────────────────────────────────────────── */
@keyframes slrCardIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.slr-card-animate {
    animation: slrCardIn 0.4s ease both;
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .slr-stars {
    color: #FBBF24;
}

html[data-theme="dark"] .right-content .slr-card-avatar-wrap {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--primary-color) 18%, transparent),
            color-mix(in srgb, var(--primary-color) 6%, transparent));
}

html[data-theme="dark"] .right-content .slr-empty-state {
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

/* Banner Module CSS */

/* ── Category Tabs ─────────────────────────────────────────────────────────── */
.bnr-tabs {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    border-bottom: 2px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
}

.bnr-tabs::-webkit-scrollbar {
    display: none;
}

.bnr-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    border-radius: 8px 8px 0 0;
    transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.bnr-tab:hover {
    color: var(--dark-color);
    background: color-mix(in srgb, var(--primary-color) 16%, var(--assest-color));
    border-bottom-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.bnr-tab--active {
    background: var(--primary-color);
    border-bottom-color: var(--primary-color);
    color: var(--dark-color);
    font-weight: 700;
}

/* ── Banner Type Chip Selector ────────────────────────────────────────────── */
.bnr-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bnr-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px 7px 11px;
    border-radius: 50px;
    border: 1.5px solid var(--border-light);
    background: var(--assest-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.bnr-chip::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.bnr-chip:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    color: var(--primary-dark-color);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--assest-color));
}

.bnr-chip:hover::before {
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
}

.bnr-chip--active {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    color: var(--primary-dark-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.bnr-chip--active::before {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

/* ── Banner Row Grid ──────────────────────────────────────────────────────── */
.bnr-row-grid {
    padding-bottom: 15px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.bnr-row-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--primary-color) 3%, var(--assest-color));
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    overflow: hidden;
    min-width: 0;
}

.bnr-row-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
    box-shadow: 0 3px 14px color-mix(in srgb, var(--primary-color) 12%, transparent);
    transform: translateY(-1px);
}

.bnr-row-thumb {
    width: 70px;
    height: 70px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}

.bnr-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.bnr-row-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--partition-color, var(--dark-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.bnr-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bnr-row-meta i {
    font-size: 9px;
    color: var(--primary-dark-color);
    flex-shrink: 0;
}

.bnr-row-del {
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    background: color-mix(in srgb, var(--red-color) 10%, transparent) !important;
    color: var(--red-color) !important;
    transition: background 0.18s ease, color 0.18s ease !important;
    transform: none !important;
    box-shadow: none !important;
}

.bnr-row-del:hover {
    background: var(--red-color) !important;
    color: var(--white-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Empty State ──────────────────────────────────────────────────────────── */
.bnr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
    border-radius: 12px;
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 25%, transparent);
    text-align: center;
}

.bnr-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-dark-color);
    margin-bottom: 12px;
}

.bnr-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Laptop L (1440px–1599px) and Laptop (1200px–1439px): 4 columns
   Default 5-column grid breaks the card layout because the 280px sidebar
   and 50px body padding leave only 870px–1109px for the grid at these widths. */
@media (min-width: 1200px) and (max-width: 1599px) {
    .bnr-row-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Laptop small (1024px–1199px): 3 columns
   Available grid width is only ~694px–869px; 4 columns compressed each card
   to ~166px leaving the title/info area too narrow to render properly. */
@media (max-width: 1199px) {
    .bnr-row-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .bnr-row-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .bnr-tab {
        padding: 8px 14px;
        font-size: 12px;
    }

    .bnr-chip {
        font-size: 12px;
        padding: 6px 12px 6px 9px;
    }

    .bnr-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bnr-row-grid {
        grid-template-columns: 1fr;
    }

    .bnr-row-thumb {
        width: 34px;
        height: 34px;
    }
}

/* ── Dark Mode ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .bnr-tabs {
    border-bottom-color: color-mix(in srgb, var(--border-light) 50%, transparent);
}

html[data-theme="dark"] .right-content .bnr-chip {
    border-color: color-mix(in srgb, var(--border-light) 50%, transparent);
}

html[data-theme="dark"] .right-content .bnr-row-card {
    border-color: color-mix(in srgb, var(--border-light) 40%, transparent);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--assest-color));
}

/* Section Module CSS */

/* ── Radio Pills ───────────────────────────────────────────────────────────── */
.sec-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.sec-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sec-radio-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 50px;
    border: 1.5px solid var(--border-light);
    background: var(--assest-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    margin: 0;
    line-height: 1.4;
}

.sec-radio-pill:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    color: var(--primary-dark-color);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
}

.sec-radio-input:checked+.sec-radio-pill {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    color: var(--primary-dark-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* ── Segmented Toggle ──────────────────────────────────────────────────────── */
.sec-seg-group {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    border: 1.5px solid var(--border-light);
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
    padding: 3px;
    gap: 2px;
}

.sec-seg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    letter-spacing: 0.05em;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
}

.sec-radio-input:checked+.sec-seg-pill {
    background: var(--primary-color);
    color: var(--dark-color);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

html[data-theme="dark"] .right-content .sec-seg-group {
    border-color: color-mix(in srgb, var(--border-light) 50%, transparent);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
}

/* ── Section Item Card ─────────────────────────────────────────────────────── */
@keyframes secItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.sec-item-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid var(--border-light);
    background: var(--assest-color);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    margin-bottom: 10px;
    animation: secItemIn 0.3s ease both;
}

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

.sec-item-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.sec-item-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.sec-item-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.sec-item-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 15%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark-color);
    letter-spacing: -0.01em;
    line-height: 1;
    user-select: none;
}

.sec-item-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sec-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sec-item-sub {
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Section Item Meta ─────────────────────────────────────────────────────── */
.sec-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    white-space: nowrap;
}

.sec-badge--type {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    color: var(--primary-dark-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.sec-badge--layout {
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--assest-color));
    color: var(--text-secondary);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 20%, transparent);
}

/* ── Section Item Controls ─────────────────────────────────────────────────── */
.sec-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Section Item Tags ─────────────────────────────────────────────────────── */
.sec-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.sec-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
    background: color-mix(in srgb, var(--text-secondary) 8%, var(--assest-color));
    color: var(--text-secondary);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 15%, transparent);
    white-space: nowrap;
}

/* ── Section Delete Button ─────────────────────────────────────────────────── */
.sec-del-btn {
    background: color-mix(in srgb, var(--danger) 8%, var(--assest-color)) !important;
    color: var(--danger) !important;
    border-color: color-mix(in srgb, var(--danger) 25%, transparent) !important;
}

.sec-del-btn:hover {
    background: var(--danger) !important;
    color: #fff !important;
    border-color: var(--danger) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 30%, transparent) !important;
}

/* ── Section Empty State ───────────────────────────────────────────────────── */
.sec-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
}

.sec-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-color);
}

.sec-empty-text {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
}

/* ── Dark Mode ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .right-content .sec-radio-pill {
    border-color: color-mix(in srgb, var(--border-light) 50%, transparent);
    background: color-mix(in srgb, var(--primary-color) 3%, var(--assest-color));
}

html[data-theme="dark"] .right-content .sec-radio-input:checked+.sec-radio-pill {
    background: color-mix(in srgb, var(--primary-color) 18%, var(--assest-color));
}

html[data-theme="dark"] .right-content .sec-item-card {
    border-color: color-mix(in srgb, var(--border-light) 40%, transparent);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--assest-color));
}

html[data-theme="dark"] .right-content .sec-item-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

html[data-theme="dark"] .right-content .sec-item-num {
    background: color-mix(in srgb, var(--primary-color) 20%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 38%, transparent);
}

html[data-theme="dark"] .right-content .sec-item-tags .sec-tag {
    background: color-mix(in srgb, var(--text-secondary) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--text-secondary) 20%, transparent);
}

html[data-theme="dark"] .right-content .sec-badge--type {
    background: color-mix(in srgb, var(--primary-color) 15%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

html[data-theme="dark"] .right-content .sec-empty-icon {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* ─── Hashtag Total Used Badge ──────────────────────────────────── */
.hashtag-usage-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 20px;
    background: var(--primary-bg);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    font-size: 13.5px;
    font-weight: 700;
    /* color: #1a1a2e; */
    min-width: 54px;
    justify-content: center;
    white-space: nowrap;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--primary-color) 18%, transparent);
    transition: box-shadow 0.18s ease, transform 0.15s ease;
}

.hashtag-usage-badge:hover {
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-color) 28%, transparent);
    transform: translateY(-1px);
}

.hashtag-badge-icon {
    font-size: 0.66rem;
    color: var(--primary-dark-color);
    line-height: 1;
    flex-shrink: 0;
}

.hashtag-badge-count {
    line-height: 1;
}

/* Zero usage — muted/inactive style */
.hashtag-usage-badge.hashtag-usage-zero {
    background: rgba(144, 150, 178, 0.08);
    border-color: rgba(144, 150, 178, 0.25);
    color: var(--text-secondary);
    box-shadow: none;
}

.hashtag-usage-badge.hashtag-usage-zero .hashtag-badge-icon {
    color: var(--text-secondary);
    opacity: 0.55;
}

/* ─── Dark Mode ──────────────────────────────────────────────────── */
html[data-theme="dark"] .hashtag-usage-badge {
    background: var(--primary-bg);
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
    box-shadow: 0 1px 6px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

html[data-theme="dark"] .hashtag-usage-badge:hover {
    box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

html[data-theme="dark"] .hashtag-usage-badge.hashtag-usage-zero {
    background: rgba(167, 176, 195, 0.08);
    border-color: rgba(167, 176, 195, 0.18);
    color: var(--text-secondary);
    box-shadow: none;
}

html[data-theme="dark"] .hashtag-usage-badge.hashtag-usage-zero .hashtag-badge-icon {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* ─── Tax Module ─────────────────────────────────────────────────────────── */
.tax-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: box-shadow 0.18s ease, transform 0.15s ease;
}

.tax-type-badge:hover {
    transform: translateY(-1px);
}

.tax-badge-icon {
    font-size: 0.65rem;
    line-height: 1;
    flex-shrink: 0;
}

.tax-type-pct {
    background: color-mix(in srgb, var(--green-color) 10%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--green-color) 38%, transparent);
    color: var(--green-color);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--green-color) 14%, transparent);
}

.tax-type-pct:hover {
    box-shadow: 0 3px 10px color-mix(in srgb, var(--green-color) 24%, transparent);
}

.tax-type-pct .tax-badge-icon {
    color: var(--green-color);
}

.tax-type-fixed {
    background: color-mix(in srgb, var(--blue-color) 10%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--blue-color) 38%, transparent);
    color: var(--blue-color);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--blue-color) 14%, transparent);
}

.tax-type-fixed:hover {
    box-shadow: 0 3px 10px color-mix(in srgb, var(--blue-color) 24%, transparent);
}

.tax-type-fixed .tax-badge-icon {
    color: var(--blue-color);
}

.tax-amount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px 4px 8px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: box-shadow 0.18s ease;
}

.tax-amount-pct {
    background: var(--primary-bg);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    color: var(--dark-color);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.tax-amount-fixed {
    background: color-mix(in srgb, var(--blue-color) 8%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--blue-color) 30%, transparent);
    color: var(--blue-color);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--blue-color) 10%, transparent);
}

.tax-amount-unit {
    font-size: 0.70rem;
    opacity: 0.72;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

html[data-theme="dark"] .right-content .tax-type-pct {
    background: color-mix(in srgb, var(--green-color) 14%, var(--assest-color));
    border-color: color-mix(in srgb, var(--green-color) 30%, transparent);
}

html[data-theme="dark"] .right-content .tax-type-fixed {
    background: color-mix(in srgb, var(--blue-color) 14%, var(--assest-color));
    border-color: color-mix(in srgb, var(--blue-color) 30%, transparent);
}

html[data-theme="dark"] .right-content .tax-amount-pct {
    background: var(--primary-bg);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

html[data-theme="dark"] .right-content .tax-amount-fixed {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--blue-color) 26%, transparent);
}

/* ─── Attributes Module – Add / Edit Forms ──────────────────────────────── */

/* "Add More Option" button — green scheme */
.attr-add-opt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--green-color) 10%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--green-color) 40%, transparent);
    color: var(--green-color);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    text-decoration: none;
}

.attr-add-opt-btn:hover {
    background: color-mix(in srgb, var(--green-color) 18%, var(--assest-color));
    border-color: color-mix(in srgb, var(--green-color) 60%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--green-color) 16%, transparent);
    color: var(--green-color);
    text-decoration: none;
}

/* Static remove button on edit page option rows */
.attr-remove-opt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    background: color-mix(in srgb, var(--red-color) 10%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--red-color) 35%, transparent);
    color: var(--red-color);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    text-decoration: none;
    flex-shrink: 0;
}

.attr-remove-opt-btn:hover {
    background: color-mix(in srgb, var(--red-color) 18%, var(--assest-color));
    border-color: color-mix(in srgb, var(--red-color) 55%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--red-color) 14%, transparent);
    color: var(--red-color);
    text-decoration: none;
}

/* Override for JS-generated dynamic remove buttons (.remove_link) */
a.remove_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: color-mix(in srgb, var(--red-color) 10%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--red-color) 35%, transparent);
    color: var(--red-color) !important;
    transition: background 0.18s, border-color 0.18s;
    text-decoration: none !important;
    flex-shrink: 0;
    /* override Bootstrap btn btn-danger */
    padding: 0 !important;
    line-height: 1;
}

a.remove_link:hover {
    background: color-mix(in srgb, var(--red-color) 18%, var(--assest-color)) !important;
    border-color: color-mix(in srgb, var(--red-color) 55%, transparent) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--red-color) 14%, transparent);
    color: var(--red-color) !important;
}

/* ─── Category Tree Selector (Attribute Add/Edit Pages) ─────────────────── */
.category .category-header {
    max-height: 360px;
    overflow-y: auto;
    padding: 2px 4px 2px 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 35%, transparent) transparent;
}

.category .category-header::-webkit-scrollbar {
    width: 5px;
}

.category .category-header::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color) 35%, transparent);
    border-radius: 4px;
}

/* Each category item row */
.category .category-header .form-group {
    position: relative !important;
    margin-bottom: 1px !important;
}

/* Interactive label row */
.category .category-header .form-group>label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 5px 32px 5px 8px;
    border-radius: 6px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dark-color);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s;
}

.category .category-header .form-group>label:hover {
    color: var(--primary-color);
}

.category .category-header .form-group>label:has(.click_checkbox:checked) {
    color: var(--black-50);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary-color);
}

/* Checkbox */
.category .category-header .click_checkbox {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
    margin: 0;
}

/* Toggle expand/collapse icon */
.category .category-header .toggle-button {
    position: absolute;
    right: 6px;
    top: 17px;
    transform: translateY(-50%);
    font-size: 9px !important;
    color: var(--text-secondary);
    opacity: 0.55;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    margin-left: 0 !important;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
    line-height: 1;
}

.category .category-header .toggle-button:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    opacity: 1;
}

/* Subcategory container */
.category .category-header .subcategories {
    padding-left: 8px !important;
    margin-left: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-left: 2px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
}

/* Dark mode overrides */
html[data-theme="dark"] .right-content .attr-add-opt-btn {
    background: color-mix(in srgb, var(--green-color) 14%, var(--assest-color));
    border-color: color-mix(in srgb, var(--green-color) 32%, transparent);
}

html[data-theme="dark"] .right-content .attr-add-opt-btn:hover {
    background: color-mix(in srgb, var(--green-color) 22%, var(--assest-color));
    border-color: color-mix(in srgb, var(--green-color) 50%, transparent);
}

html[data-theme="dark"] .right-content .attr-remove-opt-btn {
    background: color-mix(in srgb, var(--red-color) 14%, var(--assest-color));
    border-color: color-mix(in srgb, var(--red-color) 28%, transparent);
}

html[data-theme="dark"] .right-content .attr-remove-opt-btn:hover {
    background: color-mix(in srgb, var(--red-color) 22%, var(--assest-color));
    border-color: color-mix(in srgb, var(--red-color) 46%, transparent);
}

html[data-theme="dark"] .right-content a.remove_link {
    background: color-mix(in srgb, var(--red-color) 14%, var(--assest-color)) !important;
    border-color: color-mix(in srgb, var(--red-color) 28%, transparent) !important;
}

html[data-theme="dark"] .right-content a.remove_link:hover {
    background: color-mix(in srgb, var(--red-color) 22%, var(--assest-color)) !important;
    border-color: color-mix(in srgb, var(--red-color) 46%, transparent) !important;
}

html[data-theme="dark"] .right-content .category .category-header .form-group>label {
    color: color-mix(in srgb, var(--white-color) 80%, var(--dark-color));
}

html[data-theme="dark"] .right-content .category .category-header .form-group>label:hover {
    color: var(--primary-color);
}

html[data-theme="dark"] .right-content .category .category-header .form-group>label:has(.click_checkbox:checked) {
    background: transparent;
    color: var(--primary-color);
    box-shadow: inset 3px 0 0 var(--primary-color);
}

html[data-theme="dark"] .right-content .category .category-header .subcategories {
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

html[data-theme="dark"] .right-content .category .category-header .toggle-button {
    color: color-mix(in srgb, var(--white-color) 45%, var(--dark-color));
}

/* ─── Offers Module ──────────────────────────────────────────────────────── */
.offer-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.offer-type-pct {
    background: color-mix(in srgb, var(--green-color) 10%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--green-color) 38%, transparent);
    color: var(--green-color);
}

.offer-type-fixed {
    background: color-mix(in srgb, var(--blue-color) 10%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--blue-color) 38%, transparent);
    color: var(--blue-color);
}

.offer-badge-icon {
    font-size: 0.65rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.offer-amount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px 4px 8px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.offer-amount-pct {
    background: var(--primary-bg);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
    color: var(--dark-color);
}

.offer-amount-fixed {
    background: color-mix(in srgb, var(--blue-color) 8%, var(--assest-color));
    border: 1.5px solid color-mix(in srgb, var(--blue-color) 38%, transparent);
    color: var(--blue-color);
}

.offer-amount-unit {
    font-size: 0.70rem;
    opacity: 0.72;
    font-weight: 600;
}

.offer-product-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.pu-wrap-landscape .pu-drop-zone {
    aspect-ratio: 16 / 5;
    min-height: 80px;
}

.pu-wrap-landscape .pu-zone-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

html[data-theme="dark"] .right-content .offer-type-pct {
    background: color-mix(in srgb, var(--green-color) 14%, var(--dark-color));
    border-color: color-mix(in srgb, var(--green-color) 42%, transparent);
}

html[data-theme="dark"] .right-content .offer-type-fixed {
    background: color-mix(in srgb, var(--blue-color) 14%, var(--dark-color));
    border-color: color-mix(in srgb, var(--blue-color) 42%, transparent);
}

html[data-theme="dark"] .right-content .offer-amount-pct {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--dark-color));
    border-color: color-mix(in srgb, var(--primary-color) 42%, transparent);
    color: color-mix(in srgb, var(--white-color) 85%, var(--dark-color));
}

html[data-theme="dark"] .right-content .offer-amount-fixed {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--dark-color));
    border-color: color-mix(in srgb, var(--blue-color) 42%, transparent);
}

/* ─── Offers Status Badges ───────────────────────────────────────── */
.offer-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border-radius: 20px;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.offer-status-active {
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--green-color) 38%, transparent);
    color: var(--green-color);
}

.offer-status-inactive {
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--red-color) 38%, transparent);
    color: var(--red-color);
}

.offer-status-expired {
    background: color-mix(in srgb, var(--purple-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--purple-color) 38%, transparent);
    color: var(--purple-color);
}

html[data-theme="dark"] .right-content .offer-status-active {
    background: color-mix(in srgb, var(--green-color) 16%, var(--dark-color));
    border-color: color-mix(in srgb, var(--green-color) 42%, transparent);
}

html[data-theme="dark"] .right-content .offer-status-inactive {
    background: color-mix(in srgb, var(--red-color) 16%, var(--dark-color));
    border-color: color-mix(in srgb, var(--red-color) 42%, transparent);
}

html[data-theme="dark"] .right-content .offer-status-expired {
    background: color-mix(in srgb, var(--purple-color) 16%, var(--dark-color));
    border-color: color-mix(in srgb, var(--purple-color) 42%, transparent);
}

/* ─── Select2 product filter inside search bar (Offers) ─────────── */
.mod-search-with-filter .select2-container {
    width: 100%;
}

.mod-search-with-filter .select2-container--default .select2-selection--single {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1.5px solid var(--primary-bg);
    border-radius: 10px !important;
    height: 42px;
    display: flex;
    align-items: center;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.mod-search-with-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding-left: 14px;
    padding-right: 28px;
    line-height: normal;
}

.mod-search-with-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

.mod-search-with-filter .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: color-mix(in srgb, var(--dark-color) 55%, transparent) transparent transparent transparent;
}

.mod-search-with-filter .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

html[data-theme="dark"] .right-content .mod-search-with-filter .select2-container--default .select2-selection--single {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--dark-color));
    border-color: color-mix(in srgb, var(--white-color) 12%, var(--dark-color));
}

html[data-theme="dark"] .right-content .mod-search-with-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: color-mix(in srgb, var(--white-color) 72%, var(--dark-color));
}

html[data-theme="dark"] .right-content .mod-search-with-filter .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: color-mix(in srgb, var(--white-color) 50%, var(--dark-color)) transparent transparent transparent;
}

html[data-theme="dark"] .right-content .mod-filter-select {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--dark-color));
    border-color: color-mix(in srgb, var(--white-color) 12%, var(--dark-color));
    color: color-mix(in srgb, var(--white-color) 72%, var(--dark-color));
    color-scheme: dark;
}

/* ─── Offers filter wrapper (flex item for product Select2) ────── */
.offer-filter-wrap {
    flex: 0 1 480px;
    min-width: 320px;
}

@media (max-width: 767px) {
    .mod-search-with-filter .mod-search-box {
        flex: 0 0 100%;
    }

    .offer-filter-wrap {
        flex: 0 0 100%;
    }
}

/* ─── Offers Validity Range ──────────────────────────────────────── */
.offer-validity-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.3;
}

.offer-validity-date {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--dark-color);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.offer-validity-to {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    line-height: 1;
}

html[data-theme="dark"] .right-content .offer-validity-date {
    color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
}

/* ─── Promocode Module ───────────────────────────────────────────────── */
.promo-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 45%, transparent);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.promo-code-icon {
    font-size: 0.78rem;
    opacity: 0.8;
}

.promo-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.promo-type-pct {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
    color: var(--primary-color);
}

.promo-type-fixed {
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--green-color) 35%, transparent);
    color: var(--green-color);
}

.promo-usage-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.promo-usage-all {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--blue-color) 30%, transparent);
    color: var(--blue-color);
}

.promo-usage-limit {
    background: color-mix(in srgb, var(--orange-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--orange-color) 30%, transparent);
    color: var(--orange-color);
}

.promo-usage-members {
    background: color-mix(in srgb, var(--purple-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--purple-color) 30%, transparent);
    color: var(--purple-color);
    gap: 5px;
}

.promo-usage-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.promo-usage-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--dark-color);
}

html[data-theme="dark"] .right-content .promo-usage-count {
    color: color-mix(in srgb, var(--white-color) 75%, var(--dark-color));
}

/* ─── Reason Module ──────────────────────────────────────────────────── */
/* Type badges — Return Order / Cancel Order */
.reason-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.reason-type-return {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--blue-color) 35%, transparent);
    color: var(--blue-color);
}

.reason-type-cancel {
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--red-color) 35%, transparent);
    color: var(--red-color);
}

/* Return period note shown below reason text */
.reason-period-note {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-top: 4px;
    opacity: 0.75;
}

html[data-theme="dark"] .right-content .reason-period-note {
    color: color-mix(in srgb, var(--white-color) 72%, var(--dark-color));
}

/* Input-group addon — styled to match mod-input */
.mod-input-addon {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
    color: var(--dark-color);
    font-size: 0.82rem;
    font-weight: 600;
}

html[data-theme="dark"] .right-content .mod-input-addon {
    color: color-mix(in srgb, var(--white-color) 80%, var(--dark-color));
}

/* ─── Delivery Boy status badges ─────────────────────────────────── */
.offer-status-busy {
    background: color-mix(in srgb, var(--yellow-color) 14%, var(--assest-color));
    border-color: color-mix(in srgb, var(--yellow-color) 42%, transparent);
    color: color-mix(in srgb, var(--yellow-color) 80%, #7a5c00);
}

.offer-status-on-delivery {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--blue-color) 38%, transparent);
    color: var(--blue-color);
}

html[data-theme="dark"] .right-content .offer-status-busy {
    background: color-mix(in srgb, var(--yellow-color) 16%, var(--dark-color));
    border-color: color-mix(in srgb, var(--yellow-color) 42%, transparent);
    color: var(--yellow-color);
}

html[data-theme="dark"] .right-content .offer-status-on-delivery {
    background: color-mix(in srgb, var(--blue-color) 16%, var(--dark-color));
    border-color: color-mix(in srgb, var(--blue-color) 42%, transparent);
}

/* ─── Delivery Boy table cell helpers ───────────────────────────── */
.dboy-name-cell,
.dboy-contact-cell {
    text-align: center;
    line-height: 1.5;
}

.dboy-username,
.dboy-email {
    font-size: 0.88rem;
    font-weight: 600;
}

/* ─── Review module ──────────────────────────────────────────────── */
.review-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.review-type-item {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--blue-color) 35%, transparent);
    color: var(--blue-color);
}

.review-type-seller {
    background: color-mix(in srgb, var(--purple-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--purple-color) 35%, transparent);
    color: var(--purple-color);
}

.review-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.90rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.review-rating--high {
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--green-color) 35%, transparent);
    color: var(--green-color);
}

.review-rating--mid {
    background: color-mix(in srgb, var(--yellow-color) 14%, var(--assest-color));
    border-color: color-mix(in srgb, var(--yellow-color) 42%, transparent);
    color: color-mix(in srgb, var(--yellow-color) 80%, #7a5c00);
}

.review-rating--low {
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--red-color) 35%, transparent);
    color: var(--red-color);
}

html[data-theme="dark"] .right-content .review-rating--mid {
    color: var(--yellow-color);
}

.review-user-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.review-user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark-color);
}

.review-user-uname {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}

html[data-theme="dark"] .right-content .review-user-name {
    color: color-mix(in srgb, var(--white-color) 90%, var(--dark-color));
}

html[data-theme="dark"] .right-content .review-user-uname {
    color: color-mix(in srgb, var(--white-color) 65%, var(--dark-color));
}

/* ─── Review filter dropdown row ────────────────────────────────── */
.review-filter-row {
    display: flex;
    gap: 12px;
    padding-top: 10px;
    flex-wrap: wrap;
}

.review-filter-col {
    flex: 1 1 160px;
    min-width: 0;
}

.review-filter-col .select2-container {
    width: 100% !important;
}

.mod-search-with-filter .review-filter-col {
    flex: 0 0 350px;
    max-width: 350px;
}

/* ─── Settlement table cells ──────────────────────────────────────────────── */
.stl-code {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-dark-color);
    background: var(--primary-light);
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.stl-type-dboy {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--blue-color) 35%, transparent);
    color: var(--blue-color);
}

.stl-amount {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dark-color);
    white-space: nowrap;
}

html[data-theme="dark"] .right-content .stl-code {
    color: var(--primary-color);
}

html[data-theme="dark"] .right-content .stl-amount {
    color: color-mix(in srgb, var(--white-color) 90%, var(--dark-color));
}

/* ─── Settlement module — Dark mode text visibility ───────────────
 *
 * Covers both `settlement/index.blade.php` (Settlement list) and
 * `settlement/dashboard.blade.php` (Settlement Dashboard). The stl-code
 * / stl-amount / review-user-name / review-user-uname / .table td / h1-h5
 * / text-muted dark overrides above already cover most of the Settlement
 * text — this block fills the remaining gaps that render as dark-on-dark
 * because they inherit their color instead of setting one:
 *
 *  1. <h6> comparison-card labels ("Seller", "Delivery Boy") inside
 *     `#comparison-cards` .db-card-body — Bootstrap/browser default color
 *     is near-black, and the global h1-h5 dark override doesn't include h6.
 *  2. .sr-payment-row (Comparison + Status Overview legend rows) — the
 *     row's labels/strong values inherit color and end up unreadable.
 *  3. Generic `strong` inside .db-card-body (comparison card figures,
 *     status-legend counts) — same inheritance issue.
 *  4. .db-card-body itself gets a fallback color so any future text
 *     added inside a dashboard card stays readable in Dark mode.
 *
 * Colors are sourced from the existing DTBasket theme tokens
 * (--white-color, --dark-color, --primary-color) — no hardcoded values,
 * no changes to Light mode (rules are scoped under
 * html[data-theme="dark"]).
 */
html[data-theme="dark"] .right-content .db-card-body,
html[data-theme="dark"] .right-content .db-card-body .sr-payment-row {
    color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
}

html[data-theme="dark"] .right-content .db-card-body h6 {
    color: color-mix(in srgb, var(--white-color) 90%, var(--dark-color));
}

html[data-theme="dark"] .right-content .db-card-body strong,
html[data-theme="dark"] .right-content .db-card-body .sr-payment-row strong {
    color: color-mix(in srgb, var(--white-color) 92%, var(--dark-color));
}

/* Separator between .sr-payment-row items reads as a solid line on the
   dark card surface. Soften it to match other dark-mode borders. */
html[data-theme="dark"] .right-content .db-card-body .sr-payment-row {
    border-bottom-color: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

/* Trend / Custom-range filter chips (`.db-filter-btn`) — the base color
   is --text-secondary which is theme-adaptive, but the ACTIVE / hover
   state sets color to --primary-dark-color on a --primary-bg surface
   which reads faintly on the dark card. Push both to the brighter
   --primary-color so the active preset is unambiguous in Dark mode. */
html[data-theme="dark"] .right-content .db-filter-btn:hover,
html[data-theme="dark"] .right-content .db-filter-btn.active {
    color: var(--primary-color);
}

/* .db-card-link ("View All Settlements") — --primary-dark-color reads
   dim in Dark mode; brighten it to --primary-color for parity with
   other dark-mode primary links. */
html[data-theme="dark"] .right-content .db-card-link {
    color: var(--primary-color);
}

.pgw-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}

.pgw-status-active {
    background: rgba(16, 185, 129, .12);
    color: var(--green-color);
}

.pgw-status-inactive {
    background: rgba(220, 53, 69, .12);
    color: var(--red-color);
}

.pgw-status-warning {
    background: rgba(253, 126, 20, .12);
    color: #fd7e14;
}

.notif-master-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.notif-master-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--black-50);
}

.switch.switch-disabled {
    opacity: 0.4;
    pointer-events: none;
}

#datatable td {
    vertical-align: middle;
}

/* ── Highlight Notes ─────────────────────────────── */
.sys-notes-wrap {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    border: 1px solid var(--primary-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sys-notes-icon-col {
    flex-shrink: 0;
    color: var(--primary-dark-color);
    font-size: 18px;
}

.sys-notes-text {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── Card entry animation ─────────────────────────── */
@keyframes sys-card-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.col-md-4:nth-child(1) .sys-action-card {
    animation: sys-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.col-md-4:nth-child(2) .sys-action-card {
    animation: sys-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

.col-md-4:nth-child(3) .sys-action-card {
    animation: sys-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.23s both;
}

/* ── Action Cards ─────────────────────────────────── */
.sys-action-card {
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-top: 3px solid transparent;
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.06);
    transition: box-shadow 0.30s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}

.sys-action-card:hover {
    box-shadow: 0 12px 36px rgb(0 0 0 / 0.13);
    transform: translateY(-6px);
}

/* Top border colors matching button accent */
.sys-card--primary {
    border-top-color: var(--green-color);
}

.sys-card--info {
    border-top-color: var(--blue-color);
}

.sys-card--danger {
    border-top-color: var(--red-color);
}

/* Badge pinned to top-right */
.sys-ac-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    line-height: 1;
}

.sys-badge--safe {
    background: color-mix(in srgb, var(--green-color) 14%, transparent);
    color: var(--green-color);
}

.sys-badge--info {
    background: color-mix(in srgb, var(--blue-color) 14%, transparent);
    color: var(--blue-color);
}

.sys-badge--danger {
    background: rgb(var(--red-color-rgb) / 0.10);
    color: var(--red-color);
}

/* Card content area — carries the padding */
.sys-ac-body {
    padding: 20px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sys-ac-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.sys-ac-safe {
    background: color-mix(in srgb, var(--green-color) 14%, transparent);
    color: var(--green-color);
}

.sys-ac-info {
    background: color-mix(in srgb, var(--blue-color) 14%, transparent);
    color: var(--blue-color);
}

.sys-ac-danger {
    background: rgb(var(--red-color-rgb) / 0.12);
    color: var(--red-color);
}

.sys-ac-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0 0 8px;
}

.sys-ac-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

/* Fixed bottom action area — Seller module pattern */
.sys-ac-footer {
    border-top: 1px solid var(--border-light);
    padding: 0;
    margin-top: auto;
}

/* ── Action Buttons (full width, flush-bottom) ────── */
.sys-ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 20px;
    border-radius: 0 0 13px 13px;
    border: none;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    background: color-mix(in srgb, var(--green-color) 14%, transparent);
    color: var(--green-color);
}

.sys-ac-btn:hover,
.sys-ac-btn:active {
    background: var(--green-color);
    color: var(--white-color);
    transform: translateY(-1px);
}

.sys-ac-btn:focus,
.sys-ac-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.sys-ac-btn--info {
    background: color-mix(in srgb, var(--blue-color) 14%, transparent);
    color: var(--blue-color);
}

.sys-ac-btn--info:hover,
.sys-ac-btn--info:active {
    background: var(--blue-color);
    color: var(--white-color);
    transform: translateY(-1px);
}

.sys-ac-btn--info:focus,
.sys-ac-btn--info:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-color) 22%, transparent);
}

.sys-ac-btn--danger {
    background: rgb(var(--red-color-rgb) / 0.10);
    color: var(--red-color);
}

.sys-ac-btn--danger:hover,
.sys-ac-btn--danger:active {
    background: var(--red-color);
    color: var(--white-color);
    transform: translateY(-1px);
}

.sys-ac-btn--danger:focus,
.sys-ac-btn--danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--red-color-rgb) / 0.20);
}

/* ══════════════════════════════════════════════════════════════
   App Setting — Vertical Tab Layout
   ══════════════════════════════════════════════════════════════ */

.aps-layout {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-top: 20px;
}

/* --- Sidebar Navigation --- */
.aps-sidebar {
    width: 230px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
}

.aps-nav-card {
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgb(var(--primary-rgb) / 0.05);
}

.aps-nav-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 13px 16px 9px;
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.aps-nav-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 6px;
}

.aps-nav-item {
    margin-bottom: 0;
}

.aps-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px 11px 18px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    text-decoration: none;
    position: relative;
}

.aps-nav-link:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    color: var(--black-50);
    text-decoration: none;
}

.aps-nav-link:hover .aps-nav-icon {
    color: var(--primary-color);
}

.aps-nav-link.active {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    color: var(--black-50);
    font-weight: 600;
}

html[data-theme="dark"] .aps-nav-link.active {
    color: var(--primary-color);

}

.aps-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--primary-color);
    border-radius: 0 3px 3px 0;
}

.aps-nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    color: inherit;
    transition: color 0.2s;
}

.aps-nav-link.active .aps-nav-icon {
    color: var(--primary-color);
}

.aps-nav-link:focus,
.aps-nav-link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.aps-nav-link:focus:not(:focus-visible) {
    box-shadow: none;
}

/* --- Tab Content --- */
.aps-content {
    flex: 1;
    min-width: 0;
}

.aps-tab-pane {
    display: none;
}

@keyframes aps-pane-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.aps-tab-pane.active {
    display: block;
    animation: aps-pane-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .aps-tab-pane.active {
        animation: none;
    }
}

/* --- Field Hint --- */
.aps-field-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* --- API Configuration Rows --- */
.aps-api-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- API Card --- */
.aps-api-card {
    background: color-mix(in srgb, var(--primary-color) 3%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aps-api-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
    box-shadow: 0 2px 12px rgb(var(--primary-rgb) / 0.06);
}

.aps-api-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aps-api-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.aps-api-badge-customer {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
}

.aps-api-badge-seller {
    background: color-mix(in srgb, #f97316 14%, transparent);
    color: #d9620a;
}

.aps-api-badge-delivery {
    background: color-mix(in srgb, #22c55e 14%, transparent);
    color: #15803d;
}

.aps-api-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-50);
}

.aps-api-card-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aps-api-input-wrap {
    flex: 1;
    min-width: 0;
}

.aps-api-input {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
    border-radius: 9px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    color: var(--text-secondary) !important;
    height: auto !important;
    user-select: none !important;
    cursor: not-allowed !important;
}

.aps-api-copy-btn {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 50%, transparent);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    color: var(--primary-color);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
    font-size: 12.5px;
    font-weight: 600;
}

.aps-api-copy-btn i {
    font-size: 13px;
}

.aps-api-copy-btn:hover {
    border-color: color-mix(in srgb, var(--primary-color) 72%, transparent);
    background: color-mix(in srgb, var(--primary-color) 13%, var(--assest-color));
    color: var(--primary-color);
}

.aps-api-copy-btn:active {
    border-style: solid;
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--dark-color);
    transform: scale(0.97);
}

.aps-api-copy-btn.aps-btn-copied {
    border-style: solid;
    border-color: var(--green-color);
    background: color-mix(in srgb, var(--green-color) 10%, var(--assest-color));
    color: var(--green-color);
}

.aps-api-copy-btn:focus,
.aps-api-copy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-color) 22%, transparent);
}

/* --- Copy Tooltip Badge (appears above button on success) --- */
.aps-copy-tip-badge {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #22c55e;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    font-family: var(--font);
}

.aps-copy-tip-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #22c55e;
}

.aps-api-copy-btn.aps-btn-copied .aps-copy-tip-badge {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- Responsive: horizontal tabs on laptop/tablet --- */
@media (max-width: 1199px) {
    .aps-layout {
        flex-direction: column;
    }

    .aps-sidebar {
        width: 100%;
        position: static;
    }

    .aps-nav-title {
        display: none;
    }

    .aps-nav-card {
        border-radius: 10px;
    }

    .aps-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }

    .aps-nav-item {
        margin-bottom: 0;
    }

    .aps-nav-link {
        border-radius: 8px;
        padding: 7px 12px;
        font-size: 12px;
    }

    .aps-nav-link.active::before {
        display: none;
    }

    .aps-nav-link.active {
        background: color-mix(in srgb, var(--primary-color) 14%, var(--assest-color));
    }
}

@media (max-width: 575px) {
    .aps-api-card-body {
        flex-wrap: wrap;
    }

    .aps-api-copy-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Financial / Delivery inner sub-section --- */
.aps-fin-section {
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 10px;
    padding: 14px 16px;
    height: 100%;
}

.aps-fin-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--black-50);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.aps-fin-section-head i {
    color: var(--primary-color);
    font-size: 13px;
}

/* --- Toggle row (settings-style: label left, toggle right) --- */
.aps-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.aps-toggle-row-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--black-50);
}

.aps-toggle-row-label .mod-label-icon {
    opacity: 1;
    font-size: 14px;
}

/* ============================================================
   Social Link Cards
   ============================================================ */
.sl-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}

.sl-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: color-mix(in srgb, var(--primary-color) 3%, var(--assest-color));
    border: 2px dashed color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sl-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary-color) 8%, transparent);
}

/* --- Card badge (New / sequence number) --- */
.sl-card-badge {
    position: absolute;
    top: -11px;
    left: 12px;
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    background: color-mix(in srgb, var(--primary-color) 15%, var(--assest-color));
    color: var(--black-50);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    z-index: 2;
    user-select: none;
    pointer-events: none;
}

.sl-card-badge--new {
    background: color-mix(in srgb, var(--primary-color) 18%, var(--assest-color));
}

.sl-card:has(.sl-card-badge) {
    padding-top: 22px;
}

.sl-card-img {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sl-card-img .mod-label {
    margin-bottom: 0;
    font-size: 12px;
}

.sl-card-img .pu-upload-wrap {
    width: 130px;
}

.sl-card-img .pu-drop-zone {
    width: 130px;
    height: 110px;
    aspect-ratio: unset;
}

.sl-card-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: center;
}

.sl-card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: flex-start;
}

/* --- Remove button --- */
.sl-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid color-mix(in srgb, var(--red-color) 40%, transparent);
    background: color-mix(in srgb, var(--red-color) 6%, var(--assest-color));
    color: var(--red-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sl-remove-btn:hover {
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    border-color: var(--red-color);
}

.sl-remove-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-color) 20%, transparent);
    border-color: var(--red-color);
}

.sl-remove-btn:active {
    outline: none;
    box-shadow: none;
    background: var(--red-color);
    color: #fff;
    transform: scale(0.95);
}

/* --- Add Social Setting button --- */
.sl-add-more-wrap {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.sl-add-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 10px 24px;
    border: 2px dashed color-mix(in srgb, var(--primary-color) 40%, transparent);
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
    color: color-mix(in srgb, var(--primary-color) 80%, var(--dark-color));
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.sl-add-more-btn:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    color: var(--primary-color);
}

.sl-add-more-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-color: var(--primary-color);
}

.sl-add-more-btn:active {
    outline: none;
    box-shadow: none;
    border-style: solid;
    background: var(--primary-color);
    color: var(--dark-color);
    transform: scale(0.99);
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .sl-card {
        flex-direction: column;
        align-items: stretch;
    }

    .sl-card-img {
        display: flex;
        justify-content: center;
    }

    .sl-card-img .pu-upload-wrap,
    .sl-card-img .pu-drop-zone {
        width: 160px;
        height: 130px;
    }

    .sl-card-actions {
        justify-content: flex-end;
    }
}

/* ============================================================
   Dashboard Module
   ============================================================ */

/* --- Entrance animations --- */
@keyframes db-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.db-anim {
    animation: db-fade-up 0.38s ease both;
    animation-delay: var(--db-delay, 0s);
}

@keyframes db-stat-enter {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.95);
    }

    55% {
        opacity: 1;
    }

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

.db-stat-entering {
    animation: db-stat-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Section spacing --- */
.db-section {
    margin-bottom: 20px;
}

/* --- Welcome Section --- */
.db-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--assest-color);
    border: 1px solid rgb(var(--primary-rgb) / 0.07);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgb(var(--primary-rgb) / 0.06);
    padding: 16px 24px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.db-welcome::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    pointer-events: none;
}

.db-welcome-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.db-welcome-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.db-welcome-text {
    min-width: 0;
}

.db-welcome-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    margin: 0 0 3px;
    line-height: 1.2;
}

.db-welcome-sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.db-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 30px;
    background: var(--primary-bg);
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    color: var(--primary-dark-color);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Stat Cards Grid --- */
.db-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.db-stat-card {
    background: var(--assest-color);
    border: 1px solid rgb(var(--primary-rgb) / 0.07);
    border-top: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgb(var(--primary-rgb) / 0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    cursor: default;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

.db-stat-card.db-sc-pending {
    opacity: 0;
    transform: translateY(22px) scale(0.95);
    pointer-events: none;
}

.db-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgb(var(--primary-rgb) / 0.12);
    border-top-color: var(--db-icon-color, var(--primary-color));
}

.db-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--db-icon-bg, var(--primary-bg));
    color: var(--db-icon-color, var(--primary-dark-color));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--db-icon-color, var(--primary-color)) 28%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.db-stat-card:hover .db-stat-icon {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--db-icon-color, var(--primary-color)) 38%, transparent);
}

.db-stat-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.db-stat-val {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--partition-color, var(--dark-color));
}

.db-stat-lbl {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Stat card right-side corner pattern --- */
.db-stat-pattern {
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--db-icon-color, var(--primary-color)) 9%, transparent);
    pointer-events: none;
    transition: transform 0.35s ease, width 0.35s ease, height 0.35s ease, opacity 0.35s ease;
}

.db-stat-pattern::after {
    content: '';
    position: absolute;
    right: -14px;
    top: -14px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--db-icon-color, var(--primary-color)) 6%, transparent);
    transition: transform 0.35s ease;
}

.db-stat-card:hover .db-stat-pattern {
    width: 100px;
    height: 100px;
    transform: translateY(-50%) scale(1.14) rotate(12deg);
    opacity: 0.85;
}

.db-stat-card:hover .db-stat-pattern::after {
    transform: scale(1.2) rotate(-8deg);
}

/* Stat card accent variants */
.db-stat-card--primary {
    --db-icon-bg: var(--primary-bg);
    --db-icon-color: var(--primary-dark-color);
}

.db-stat-card--blue {
    --db-icon-bg: color-mix(in srgb, var(--blue-color) 14%, var(--assest-color));
    --db-icon-color: var(--blue-color);
}

.db-stat-card--purple {
    --db-icon-bg: color-mix(in srgb, var(--purple-color) 14%, var(--assest-color));
    --db-icon-color: var(--purple-color);
}

.db-stat-card--green {
    --db-icon-bg: color-mix(in srgb, var(--green-color) 14%, var(--assest-color));
    --db-icon-color: var(--green-color);
}

.db-stat-card--red {
    --db-icon-bg: color-mix(in srgb, var(--red-color) 14%, var(--assest-color));
    --db-icon-color: var(--red-color);
}

/* --- Compact stat grid modifier: used when db-stat-grid sits inside a
     narrower Bootstrap column (e.g. col-md-8) so the 4 KPI cards keep
     enough breathing room before the global 1199px breakpoint kicks in --- */
.db-stat-grid--compact {
    grid-template-columns: repeat(2, 1fr);
}

/* --- Compact empty state (used inside narrow db-card-body areas,
     e.g. Memberships Expiring Soon / Upcoming Scheduled Deliveries) --- */
.db-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    text-align: center;
}

.db-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.db-empty-msg {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

/* --- Dashboard Card (chart containers, section wrappers) --- */
.db-card {
    background: var(--assest-color);
    border: 1px solid rgb(var(--primary-rgb) / 0.07);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgb(var(--primary-rgb) / 0.06);
    overflow: hidden;
    margin-bottom: 20px;
}

.db-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    flex-wrap: wrap;
}

.db-card-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.db-card-head-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--dark-color);
    border-radius: 8px;
    font-size: 12px;
    flex-shrink: 0;
}

.db-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-card-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-dark-color);
    text-decoration: none !important;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.db-card-link:hover {
    opacity: 1;
    color: var(--primary-color);
}

.db-card-body {
    padding: 16px 20px;
}

/* --- Filter Buttons (chart period toggles) --- */
.db-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.db-filter-btn {
    padding: 5px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border-light);
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.db-filter-btn:hover,
.db-filter-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-bg);
    color: var(--primary-dark-color);
}

.db-filter-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-color: var(--primary-color);
}

/* --- Two-column split layout --- */
.db-row-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

/* --- Top Brands Grid --- */
.db-brands-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px 16px 16px;
}

.db-brand-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    cursor: default;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.db-brand-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            color-mix(in srgb, var(--dark-color) 55%, transparent) 0%,
            transparent 58%);
    pointer-events: none;
    border-radius: inherit;
}

.db-brand-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgb(var(--primary-rgb) / 0.1);
}

.db-brand-logo {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.db-brand-name {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 1;
    font-size: 12px;
    font-weight: 700;
    color: var(--white-color);
    text-shadow: 0 1px 5px color-mix(in srgb, var(--dark-color) 65%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 20px);
}

/* --- Tab Navigation (Top Selling / Top Rated) --- */
.db-tab-nav {
    display: flex;
    gap: 2px;
    padding: 12px 16px 0;
    border-bottom: 2px solid var(--border-light);
}

.db-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    border: 1.5px solid transparent;
    border-bottom: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    bottom: -2px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.db-tab-btn.active {
    color: var(--primary-dark-color);
    border-color: var(--border-light);
    border-bottom-color: var(--assest-color);
    background: var(--assest-color);
}

.db-tab-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.db-tab-pane {
    display: none;
    padding: 14px 16px;
}

.db-tab-pane.active {
    display: block;
}

/* --- Tab Seller List --- */
.db-tab-seller-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-tab-seller-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.db-tab-seller-item:hover {
    border-color: var(--border-light);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--assest-color));
}

.db-tab-seller-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    transition: border-color 0.2s ease;
}

.db-tab-seller-item:hover .db-tab-seller-avatar {
    border-color: var(--primary-color);
}

.db-tab-seller-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.db-tab-seller-uname {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-tab-seller-fname {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-tab-seller-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--primary-dark-color);
    background: var(--primary-bg);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Top Selling Product List --- */
.db-product-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    /* background: var(--body-color); */
    border: 1px solid var(--border-light);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.db-product-row:hover {
    border-color: var(--primary-color);
    transform: translateX(3px);
}

.db-product-rank {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-product-img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.db-product-name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--partition-color, var(--dark-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.db-product-sold {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-dark-color);
    background: var(--primary-bg);
    padding: 4px 11px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* --- Top Rated Items Grid --- */
.db-rated-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.db-rated-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 12px;
    /* background: var(--body-color); */
    border: 1px solid var(--border-light);
    cursor: default;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.db-rated-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgb(var(--primary-rgb) / 0.1);
}

.db-rated-img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 10px;
}

.db-rated-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--partition-color, var(--dark-color));
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.db-rated-stars {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark-color);
}

.db-rated-star-icon {
    color: var(--primary-color);
    font-size: 13px;
}

/* --- Hashtag List --- */
.db-hashtag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db-hashtag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    /* background: var(--body-color); */
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--primary-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.db-hashtag-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgb(var(--primary-rgb) / 0.08);
}

.db-hashtag-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-dark-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-hashtag-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    background: var(--primary-bg);
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
    margin-left: 8px;
}

.db-hashtag-count--full {
    color: var(--white-color);
    background: var(--red-color);
}

/* --- Today's Delivery Slots: capacity/utilization bar (Scheduled Delivery Overview) --- */
.db-hashtag-item--slot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

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

.db-slot-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-slot-progress-track {
    width: 100%;
    height: 6px;
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    border-radius: 99px;
    overflow: hidden;
}

.db-slot-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    border-radius: 99px;
    transition: width 0.3s ease;
}

.db-slot-progress-fill--full {
    background: var(--red-color);
}

.db-slot-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* --- Top Sellers Grid --- */
.db-seller-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 16px 20px 20px;
}

.db-seller-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px 18px;
    border-radius: 14px;
    background: var(--body-color);
    border: 1px solid var(--border-light);
    cursor: default;
    text-align: center;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.db-seller-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgb(var(--primary-rgb) / 0.12);
}

.db-seller-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.db-seller-card:hover .db-seller-avatar {
    border-color: var(--primary-color);
    transform: scale(1.06);
}

.db-seller-username {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--partition-color, var(--dark-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.db-seller-fullname {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.db-seller-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark-color);
    background: var(--primary-bg);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    margin-top: 2px;
}

/* --- Responsive --- */
@media (max-width: 1399px) {
    .db-seller-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1199px) {
    .db-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .db-row-split {
        grid-template-columns: 1fr;
    }

    .db-brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .db-seller-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .db-hashtag-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .db-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-stat-val {
        font-size: 20px;
    }

    .db-seller-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-rated-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 479px) {
    .db-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-stat-card {
        padding: 14px 14px;
        gap: 12px;
    }

    .db-stat-icon {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .db-seller-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-hashtag-list {
        display: flex;
        flex-direction: column;
    }
}

/* ============================================================
   Product / Item Module
   ============================================================ */

/* --- Filter Bar --- */
.it-filter-wrap {
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgb(var(--primary-rgb) / 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.it-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.it-search-input-box {
    flex: 1;
}

.it-filter-selects-row {
    flex-wrap: wrap;
}

.it-filter-select-wrap {
    flex: 1;
    min-width: 160px;
}

.it-select {
    border-radius: 10px !important;
    height: 40px;
    width: 100%;
    font-size: 13px;
}

.it-filter-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    background: var(--primary-color);
    color: var(--dark-color);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s;
}

.it-filter-submit-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 32%, transparent);
}

.it-filter-submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* --- Product Grid --- */
.it-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

/* --- Product Card --- */
@keyframes it-card-appear {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.97);
    }

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

.it-card {
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgb(var(--primary-rgb) / 0.05);
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
    animation: it-card-appear 0.48s cubic-bezier(0.22, 1, 0.36, 1) var(--it-delay, 0s) both;
    display: flex;
    flex-direction: column;
}

.it-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgb(var(--primary-rgb) / 0.13);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* --- Card Image --- */
.it-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 170px;
    background: var(--body-color);
}

.it-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.it-card:hover .it-card-img {
    transform: scale(1.06);
}

.it-card-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    opacity: 0;
    transition: opacity 0.26s ease;
    pointer-events: none;
}

.it-card:hover .it-card-overlay {
    opacity: 1;
}

/* --- Card Body --- */
.it-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.it-card-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

.it-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
}

.it-meta-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.it-meta-chip i {
    font-size: 10px;
    color: var(--primary-dark-color);
    flex-shrink: 0;
    width: 13px;
    text-align: center;
}

.it-seller-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 10px;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid var(--border-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.it-seller-row i {
    font-size: 10px;
    color: var(--primary-dark-color);
    flex-shrink: 0;
    width: 13px;
    text-align: center;
}

/* --- Card Footer --- */
.it-card-footer {
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
    margin-top: auto;
    display: flex;
}

.it-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex: 1;
}

.it-card-price {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--primary-dark-color);
    white-space: nowrap;
}

.it-status-btn {
    font-size: 12.5px !important;
    padding: 4px 10px 4px 8px !important;
}

.it-footer-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 3;
    pointer-events: none;
}

.it-footer-actions>*,
.it-footer-actions .it-action-form {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.it-footer-actions>*:nth-child(1) {
    transition-delay: 0s;
}

.it-footer-actions>*:nth-child(2) {
    transition-delay: 0.06s;
}

.it-footer-actions>*:nth-child(3) {
    transition-delay: 0.12s;
}

.it-card:hover .it-footer-actions {
    pointer-events: auto;
}

.it-card:hover .it-footer-actions>*,
.it-card:hover .it-footer-actions .it-action-form {
    opacity: 1;
    transform: translateX(0);
}

/* --- Card Action Buttons --- */
.it-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--dark-color);
    background: var(--primary-color);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, transform 0.14s, box-shadow 0.18s, border-color 0.18s;
}

.it-action-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-dark-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
    text-decoration: none;
}

.it-action-btn--danger {
    color: var(--white-color);
    background: var(--red-color);
}

.it-action-btn--danger:hover {
    background: color-mix(in srgb, var(--red-color) 11%, transparent);
    color: var(--red-color);
    border-color: var(--red-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--red-color) 28%, transparent);
}

.it-action-btn--blue {
    color: var(--white-color);
    background: var(--blue-color);
}

.it-action-btn--blue:hover {
    background: color-mix(in srgb, var(--blue-color) 11%, transparent);
    color: var(--blue-color);
    border-color: var(--blue-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--blue-color) 28%, transparent);
}

.it-action-btn:focus {
    outline: none;
}

.it-action-form {
    display: block;
}

.it-action-form .it-action-btn {
    width: 32px;
}

.it-footer-actions .it-action-form .edit-delete-btn {
    background: var(--red-color);
    color: var(--white-color);
    border: 1px solid transparent;
}

.it-footer-actions .it-action-form .edit-delete-btn:hover {
    background: color-mix(in srgb, var(--red-color) 12%, transparent);
    color: var(--red-color);
    border-color: var(--red-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--red-color) 28%, transparent);
}

/* --- Empty State --- */
.it-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 72px 24px;
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    text-align: center;
    margin-bottom: 24px;
}

.it-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary-dark-color);
}

.it-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.it-empty-sub {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 0;
}

/* --- Pagination --- */
.it-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 32px;
    flex-wrap: wrap;
}

.it-pg-info {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Responsive --- */
@media (max-width: 1399px) {
    .it-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1199px) {
    .it-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .it-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-filter-selects-row {
        flex-direction: column;
    }

    .it-filter-select-wrap {
        min-width: unset;
        width: 100%;
    }

    .it-pagination-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 479px) {
    .it-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .it-card-name {
        font-size: 12px;
    }

    .it-card-price {
        font-size: 13px;
    }

    .it-filter-search-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =============================================
   Add / Edit Product Module
   ============================================= */

/* --- Portrait/landscape upload wrappers fill column --- */
/* .pu-upload-wrap.pu-portrait,
.pu-upload-wrap.pu-landscape {
    width: 100%;
} */

.pu-upload-wrap.pu-portrait .pu-drop-zone,
.pu-upload-wrap.pu-landscape .pu-drop-zone {
    width: 100%;
    max-width: none;
}

/* --- Toggle row (switch + help label) --- */
.prd-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
}

.prd-toggle-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* --- Quantity/Delivery vertical toggle stack --- */
.prd-toggle-stack {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.prd-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--assest-color);
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}

.prd-toggle-item:last-child {
    border-bottom: none;
}

.prd-toggle-item-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dark-color);
    line-height: 1.4;
}

/* --- Tab navigation footer --- */
.prd-nav-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 0 8px;
}

/* --- mod-card title note --- */
.mod-card-title-note {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* --- FAQ Section --- */
.prd-faq-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
}

.prd-faq-q,
.prd-faq-a {
    flex: 1;
    min-width: 0;
}

.prd-faq-btn-wrap {
    flex-shrink: 0;
    padding-bottom: 2px;
}

.prd-faq-add-btn,
.prd-faq-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.18s ease, transform 0.15s ease;
}

.prd-faq-add-btn {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

.prd-faq-add-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
    transform: scale(1.1);
}

.prd-faq-remove-btn {
    background: color-mix(in srgb, var(--red-color) 10%, transparent);
    color: var(--red-color);
}

.prd-faq-remove-btn:hover {
    background: color-mix(in srgb, var(--red-color) 20%, transparent);
    transform: scale(1.1);
}

/* --- Other Images Grid --- */
.prd-oi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.prd-oi-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 12px 8px;
    gap: 6px;
    position: relative;
    cursor: pointer;
}

.prd-oi-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.prd-oi-hint i {
    font-size: 20px;
    color: var(--primary-color);
    opacity: 0.7;
}

.prd-oi-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.prd-oi-slot.has-img .prd-oi-hint {
    opacity: 0;
}

.prd-oi-slot.has-img .prd-oi-preview {
    opacity: 1;
}

.prd-oi-remove-btn {
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: color-mix(in srgb, var(--red-color) 8%, transparent);
    color: var(--red-color);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.prd-oi-remove-btn:hover {
    background: color-mix(in srgb, var(--red-color) 16%, transparent);
}

.prd-oi-add-btn {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px dashed var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.18s ease;
}

.prd-oi-add-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .prd-faq-row {
        flex-wrap: wrap;
    }

    .prd-faq-q,
    .prd-faq-a {
        flex-basis: calc(50% - 6px);
    }

    .prd-nav-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 479px) {

    .prd-faq-q,
    .prd-faq-a {
        flex-basis: 100%;
    }
}

/* --- FAQ alignment fix (mod-field margin causes button to drop) --- */
.prd-faq-row .mod-field {
    margin-bottom: 0;
}

/* --- Button focus: theme ring, no browser black outline --- */
.prd-faq-add-btn:focus,
.prd-faq-add-btn:focus-visible,
.prd-oi-add-btn:focus,
.prd-oi-add-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.prd-faq-remove-btn:focus,
.prd-faq-remove-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-color) 25%, transparent);
}

/* --- Other images: Category-module-style overrides --- */
.prd-other-img .pu-upload-wrap {
    width: 100%;
}

.prd-other-img .pu-drop-zone {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100px;
    aspect-ratio: unset;
}

/* --- Individual image slot remove --- */
.prd-oi-slot-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prd-oi-slot-remove {
    width: 100%;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: color-mix(in srgb, var(--red-color) 8%, transparent);
    color: var(--red-color);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.15s ease;
}

.prd-oi-slot-remove:hover {
    background: color-mix(in srgb, var(--red-color) 16%, transparent);
}

.prd-oi-slot-remove:focus,
.prd-oi-slot-remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-color) 25%, transparent);
}

/* --- Other Images: drag handle for slot reordering --- */
.prd-oi-drag-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 10;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 26%, transparent);
    border-radius: 5px;
    color: var(--primary-color);
    font-size: 9px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.15s ease;
    user-select: none;
}

.prd-other-img .col-6:hover .prd-oi-drag-handle {
    opacity: 1;
}

.prd-oi-drag-handle:hover {
    background: color-mix(in srgb, var(--primary-color) 22%, var(--assest-color));
    opacity: 1;
}

.prd-oi-drag-handle:active {
    cursor: grabbing;
}

/* Slot being dragged — ghost appearance */
.prd-oi-slot.oi-dragging {
    opacity: 0.28;
    border-color: var(--primary-color);
}

/* Slot receiving the drop during reorder */
.prd-oi-slot.oi-drop-target {
    outline: 2px solid var(--primary-color);
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 9%, var(--assest-color));
}

/* --- Portrait/Landscape stacked images in col-md-3 --- */
.prd-img-stack .pu-upload-wrap {
    width: 100%;
}

.prd-img-stack .pu-drop-zone {
    width: 100%;
    max-width: none;
    height: 120px;
    aspect-ratio: unset;
}

/* =============================================
   Product Add/Edit - Tab Step Indicators
   ============================================= */

.prd-tab-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.prd-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: color-mix(in srgb, var(--black-50) 18%, transparent);
    color: inherit;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-link.active .prd-tab-num {
    background: var(--dark-color);
    color: var(--primary-color);
}

.custom-tabs .nav-link {
    color: var(--black-50);
}

.custom-tabs .nav-link.active {
    color: var(--dark-color);
}

.prd-tab-text {
    color: inherit;
    font-size: 13px;
    font-weight: 500;
}

/* =============================================
   Product Add/Edit - Video Upload Card (compact row)
   ============================================= */

/* =============================================
   Product Add/Edit - Video Upload Row
   ============================================= */

.prd-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.prd-upload-input-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--assest-color);
    overflow: hidden;
    flex: 1;
    min-width: 0;
    transition: border-color 0.2s ease;
}

.prd-upload-input-wrap:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 60%, transparent);
}

.prd-choose-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    border-right: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 500;
    color: var(--black-50);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    transition: background 0.15s ease;
}

.prd-choose-btn:hover {
    background: color-mix(in srgb, var(--black-color) 14%, transparent);
}

/* Inline file info: filename + progress bar */
.prd-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 12px;
    gap: 0;
}

.prd-file-name {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 36px;
}

.prd-file-name--selected {
    color: var(--black-50);
    font-weight: 500;
}

.prd-file-progress {
    display: none;
    align-items: center;
    gap: 8px;
}

.prd-file-progress-track {
    flex: 1;
    min-width: 40px;
    height: 5px;
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    border-radius: 99px;
    overflow: hidden;
}

.prd-file-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    border-radius: 99px;
    transition: width 0.3s ease;
}

.prd-file-progress-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 30px;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}

.prd-upload-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--primary-color);
    color: var(--dark-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    outline: none;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: background 0.18s ease;
}

.prd-upload-action-btn:hover {
    background: var(--primary-dark-color);
    color: var(--dark-color);
    text-decoration: none;
}

.prd-upload-action-btn:focus,
.prd-upload-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* #filelist is kept in DOM for plupload but hidden from view */
.prd-upload-filelist {
    display: none;
}

/* =============================================
   Product Edit - Uploaded Video File Card
   ============================================= */

.prd-vfc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--assest-color);
    margin-bottom: 10px;
}

.prd-vfc-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prd-vfc-thumb i {
    font-size: 18px;
    color: var(--primary-color);
}

.prd-vfc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prd-vfc-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.prd-vfc-type {
    font-size: 11px;
    color: var(--text-secondary);
}

.prd-vfc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.prd-vfc-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 13px;
    text-decoration: none;
    transition: background 0.18s ease;
    flex-shrink: 0;
}

.prd-vfc-open-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
    color: var(--primary-color);
    text-decoration: none;
}

.prd-vfc-open-btn:focus,
.prd-vfc-open-btn:focus-visible {
    outline: none;
}

.prd-vfc-replace-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease;
}

.prd-vfc-replace-btn:hover {
    background: var(--primary-dark-color);
    color: var(--dark-color);
}

.prd-vfc-replace-btn:focus,
.prd-vfc-replace-btn:focus-visible {
    outline: none;
}

/* =============================================
   Product Add/Edit - Responsive
   ============================================= */

@media (max-width: 767px) {
    .prd-tab-text {
        display: none;
    }

    .prd-tab-num {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .prd-upload-row {
        gap: 8px;
    }

    .prd-upload-input-wrap {
        flex-basis: 100%;
    }

    .prd-upload-action-btn {
        width: 100%;
        justify-content: center;
    }

    .prd-vfc {
        gap: 10px;
        padding: 10px 12px;
    }

    .prd-vfc-name {
        font-size: 12px;
    }

    .prd-vfc-type {
        display: none;
    }
}

/* =============================================
   Product Detail View (pdv-) — full redesign
   ============================================= */

/* --- Utility --- */
.hidden {
    display: none;
}

/* --- Hero layout --- */
.pdv-hero {
    display: flex;
    gap: 28px;
    padding: 24px;
    align-items: flex-start;
}

.pdv-media {
    width: 440px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.pdv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Main image --- */
.pdv-main-img-wrap {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    background: var(--assest-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.pdv-main-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Thumbnails --- */
.pdv-thumb-col {
    width: 68px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
}

.pdv-thumb-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}


.pdv-thumb-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdv-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1.5px solid var(--border-light);
    object-fit: cover;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.15s ease;
    background: var(--assest-color);
}

.pdv-thumb:hover {
    border-color: var(--primary-color);
    transform: scale(1.06);
}

.pdv-thumb-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdv-load-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 8px;
    border: 1.5px solid var(--border-light);
    background: var(--assest-color);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.pdv-load-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
}

.pdv-load-btn.hidden {
    display: none;
}

/* --- Info header --- */
.pdv-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pdv-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--black-50);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.pdv-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.pdv-short-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* --- Meta list --- */
.pdv-meta-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}

.pdv-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--assest-color);
}

.pdv-meta-row:last-child {
    border-bottom: none;
}

.pdv-meta-key {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 155px;
}

.pdv-meta-key::after {
    content: ':';
    margin-left: 2px;
}

.pdv-meta-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--black-50);
}

/* --- Badges --- */
.pdv-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.pdv-badge--green {
    background: color-mix(in srgb, var(--green-color) 12%, transparent);
    color: var(--green-color);
}

.pdv-badge--gray {
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    color: var(--text-secondary);
}

.pdv-badge--blue {
    background: color-mix(in srgb, var(--blue-color) 12%, transparent);
    color: var(--blue-color);
}

.pdv-badge--primary {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--dark-color);
}

/* --- Quantity grid --- */
.pdv-qty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pdv-qty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 10px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    text-align: center;
}

.pdv-qty-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--black-50);
    line-height: 1.2;
}

.pdv-qty-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: center;
}

/* --- Flags row --- */
.pdv-flags-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pdv-flag-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--assest-color);
}

.pdv-flag-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* --- Tab content wrapper --- */
.pdv-tab-content {
    padding: 20px 24px;
}

/* --- Description tab --- */
.pdv-description-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--dark-color);
}

.pdv-description-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* --- Attributes table --- */
.pdv-attr-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.pdv-attr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.pdv-attr-table th {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    color: var(--dark-color);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.pdv-attr-table td {
    padding: 12px 16px;
    color: var(--dark-color);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    background: var(--assest-color);
    transition: background 0.15s ease;
}

.pdv-attr-table tbody tr:last-child td {
    border-bottom: none;
}

.pdv-attr-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--assest-color));
}

.pdv-attr-icon {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

/* --- FAQ list --- */
.pdv-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdv-faq-item {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}

.pdv-faq-q {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    user-select: none;
}

.pdv-faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.pdv-faq-question {
    font-size: 14px;
    font-weight: 600;
    color: var(--black-50);
    line-height: 1.4;
}

.pdv-faq-a {
    display: none;
    padding: 14px 16px 14px 54px;
    background: var(--assest-color);
}

.pdv-faq-a p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* --- Review list --- */
.pdv-review-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdv-review-card {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    background: var(--assest-color);
}

.pdv-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--assest-color));
}

.pdv-reviewer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pdv-reviewer-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
}

.pdv-reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pdv-reviewer-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--black-50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdv-review-date {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.pdv-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: 16px;
}

.pdv-star--on {
    color: var(--primary-color);
}

.pdv-star--off {
    color: var(--border-light);
}

.pdv-review-body {
    padding: 14px 16px;
}

.pdv-review-body p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* --- Empty state --- */
.pdv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px;
    text-align: center;
}

.pdv-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-color);
}

.pdv-empty-text {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Laptop breakpoint --- */
@media (min-width: 901px) and (max-width: 1280px) {
    .pdv-hero {
        gap: 20px;
        padding: 18px;
    }

    .pdv-media {
        width: 320px;
    }

    .pdv-thumb-col {
        width: 58px;
        max-height: 320px;
    }

    .pdv-thumb {
        width: 52px;
        height: 52px;
    }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .pdv-hero {
        flex-direction: column;
        gap: 20px;
    }

    .pdv-media {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .pdv-thumb-col {
        order: 2;
        width: 100%;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .pdv-thumb-section {
        flex: none;
        overflow: visible;
        flex-direction: row;
    }

    .pdv-thumb-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pdv-thumb-actions {
        flex-direction: row;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .pdv-main-img-wrap {
        order: 1;
        max-width: 360px;
        margin: 0 auto;
    }

    .pdv-qty-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .pdv-hero {
        padding: 16px;
    }

    .pdv-tab-content {
        padding: 16px;
    }

    .pdv-qty-grid {
        grid-template-columns: 1fr;
    }

    .pdv-flags-row {
        flex-direction: column;
    }

    .pdv-info-header {
        flex-direction: column;
        gap: 4px;
    }

    .pdv-price {
        font-size: 18px;
    }
}

/* --- FAQ accordion open/close --- */
.pdv-faq-item.pdv-faq--open .pdv-faq-a {
    display: block;
}

.pdv-faq-item.pdv-faq--open .pdv-faq-q {
    border-bottom-color: var(--border-light);
}

.pdv-faq-chevron {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.25s ease, color 0.18s ease;
}

.pdv-faq-item.pdv-faq--open .pdv-faq-chevron {
    transform: rotate(180deg);
    color: var(--primary-dark-color);
}

/* --- Active thumbnail --- */
.pdv-thumb--active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

/* --- Product Detail Tabs (underline style) --- */
.pdv-tabs-card>.nav.custom-tabs.inline-tabs {
    display: flex;
    flex-wrap: wrap;
    background: none;
    border-radius: 0;
    margin: 0;
    border-bottom: 2px solid var(--border-light);
    padding: 0 20px;
    gap: 0;
}

.pdv-tabs-card>.nav.custom-tabs.inline-tabs li.nav-item {
    flex: none;
}

.pdv-tabs-card>.nav.custom-tabs.inline-tabs .nav-link {
    border-radius: 0;
    padding: 14px 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.pdv-tabs-card>.nav.custom-tabs.inline-tabs .nav-link:hover:not(.active) {
    color: var(--black-50);
    border-bottom-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    background: none;
}

.pdv-tabs-card>.nav.custom-tabs.inline-tabs .nav-link.active {
    color: var(--black-50);
    font-weight: 700;
    background: none;
    border-bottom-color: var(--primary-color);
}

.pdv-tabs-card>.nav.custom-tabs.inline-tabs .nav-link:focus,
.pdv-tabs-card>.nav.custom-tabs.inline-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

/* --- Description tab rich typography --- */
.pdv-description-body h1,
.pdv-description-body h2,
.pdv-description-body h3,
.pdv-description-body h4,
.pdv-description-body h5,
.pdv-description-body h6 {
    color: var(--black-50);
    font-weight: 700;
    line-height: 1.35;
    margin: 1.2em 0 0.5em;
}

.pdv-description-body h1 {
    font-size: 22px;
}

.pdv-description-body h2 {
    font-size: 19px;
}

.pdv-description-body h3 {
    font-size: 17px;
}

.pdv-description-body h4 {
    font-size: 15px;
}

.pdv-description-body p {
    margin: 0 0 1em;
    color: var(--black-50);
}

.pdv-description-body ul,
.pdv-description-body ol {
    padding-left: 22px;
    margin: 0 0 1em;
    color: var(--black-50);
}

.pdv-description-body li {
    margin-bottom: 4px;
    line-height: 1.65;
}

.pdv-description-body blockquote {
    border-left: 4px solid var(--primary-color);
    margin: 1em 0;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--primary-color) 7%, var(--assest-color));
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.pdv-description-body code,
.pdv-description-body pre {
    background: color-mix(in srgb, var(--dark-color) 6%, var(--assest-color));
    border-radius: 6px;
    font-size: 13px;
    color: var(--dark-color);
}

.pdv-description-body code {
    padding: 2px 6px;
}

.pdv-description-body pre {
    padding: 12px 16px;
    overflow-x: auto;
}

.pdv-description-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 13.5px;
}

.pdv-description-body table th,
.pdv-description-body table td {
    padding: 9px 12px;
    border: 1px solid var(--border-light);
    text-align: left;
    color: var(--dark-color);
}

.pdv-description-body table th {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    font-weight: 600;
}

@media (max-width: 600px) {
    .pdv-tabs-card>.nav.custom-tabs.inline-tabs {
        padding: 0 8px;
    }

    .pdv-tabs-card>.nav.custom-tabs.inline-tabs .nav-link {
        padding: 12px 12px;
        font-size: 12.5px;
        gap: 5px;
    }
}

/* --- Attributes grid card layout --- */
.pdv-attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}

.pdv-attr-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--assest-color);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pdv-attr-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-color) 14%, transparent);
    transform: translateY(-2px);
}

.pdv-attr-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pdv-attr-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdv-attr-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdv-attr-card-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdv-attr-card-val-wrap {
    min-width: 0;
}

.pdv-attr-card-val {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--black-50);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-light));
    border-radius: 7px;
    padding: 4px 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdv-attr-card-val-img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    display: block;
}

/* ─── Orders Module ──────────────────────────────────────────────────────── */

/* Counter grid */
.ord-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ord-counter-card {
    background: var(--assest-color);
    border: 1px solid rgb(var(--primary-rgb) / 0.07);
    border-top: 3px solid transparent;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgb(var(--primary-rgb) / 0.06);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: default;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

.ord-counter-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgb(var(--primary-rgb) / 0.10);
    border-top-color: var(--ord-icon-color, var(--primary-color));
}

.ord-counter-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--ord-icon-color, var(--primary-color)) 12%, var(--assest-color));
    color: var(--ord-icon-color, var(--primary-color));
    border: 1px solid color-mix(in srgb, var(--ord-icon-color, var(--primary-color)) 22%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ord-counter-card:hover .ord-counter-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ord-icon-color, var(--primary-color)) 28%, transparent);
}

.ord-counter-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.ord-counter-val {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dark-color);
}

.ord-counter-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ord-counter-pattern {
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ord-icon-color, var(--primary-color)) 8%, transparent);
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.ord-counter-card:hover .ord-counter-pattern {
    transform: translateY(-50%) scale(1.2);
    opacity: 0.7;
}

/* Counter color variants */
.ord-counter-card--pending {
    --ord-icon-color: var(--yellow-color);
}

.ord-counter-card--confirmed {
    --ord-icon-color: var(--blue-color);
}

.ord-counter-card--picking {
    --ord-icon-color: var(--purple-color);
}

.ord-counter-card--packed {
    --ord-icon-color: var(--primary-color);
}

.ord-counter-card--outdelivery {
    --ord-icon-color: var(--black-50);
}

.ord-counter-card--delivered {
    --ord-icon-color: var(--green-color);
}

.ord-counter-card--cancelled {
    --ord-icon-color: var(--red-color);
}

.ord-counter-card--rejected {
    --ord-icon-color: var(--red-color);
}

/* Status tabs */
.ord-tabs-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    padding: 20px 24px 0;
    border-bottom: 2px solid var(--border-light);
}

.ord-tabs-wrap::-webkit-scrollbar {
    display: none;
}

.ord-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
}

.ord-tabs .nav-item {
    flex: 0 0 auto;
}

.ord-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 10px 10px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
    position: relative;
    bottom: -2px;
}

.ord-tabs .nav-link:hover:not(.active) {
    color: var(--black-50);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
}

.ord-tabs .nav-link.active {
    color: var(--dark-color);
    background: var(--primary-color);
    border-color: transparent;
    font-weight: 700;
}

.ord-tabs .nav-link:focus,
.ord-tabs .nav-link:focus-visible,
.ord-tabs .nav-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Order status action button colors (data-status attribute) */
.order-status-btn[data-status="2"] {
    background: color-mix(in srgb, var(--green-color) 14%, transparent);
    color: var(--green-color);
}

.order-status-btn[data-status="2"]:hover {
    background: var(--green-color);
    color: var(--white-color);
}

.order-status-btn[data-status="8"] {
    background: color-mix(in srgb, var(--red-color) 14%, transparent);
    color: var(--red-color);
}

.order-status-btn[data-status="8"]:hover {
    background: var(--red-color);
    color: var(--white-color);
}

.order-status-btn[data-status="3"] {
    background: color-mix(in srgb, var(--blue-color) 14%, transparent);
    color: var(--blue-color);
}

.order-status-btn[data-status="3"]:hover {
    background: var(--blue-color);
    color: var(--white-color);
}

.order-status-btn[data-status="4"] {
    background: color-mix(in srgb, var(--purple-color) 14%, transparent);
    color: var(--purple-color);
}

.order-status-btn[data-status="4"]:hover {
    background: var(--purple-color);
    color: var(--white-color);
}

/* Order ID badge */
.ord-id-badge {
    display: inline-block;
    padding: 4px 10px;
    color: var(--primary-dark-color);
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* User cell (customer/seller) */
.ord-user-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ord-user-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark-color);
}

.ord-user-uname {
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* Amount */
.ord-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-color);
}

/* Earning column */
.ord-earning-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    text-align: left;
}

.ord-earning-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ord-earning-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 62px;
}

.ord-earning-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-color);
}

/* Payment info column */
.ord-payment-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.ord-pay-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ord-pay-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    min-width: 66px;
}

.ord-pay-badge,
.ord-pay-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ord-pay-badge--cod {
    background: color-mix(in srgb, var(--yellow-color) 14%, var(--assest-color));
    color: var(--yellow-color);
    border: 1px solid color-mix(in srgb, var(--yellow-color) 28%, transparent);
}

.ord-pay-badge--online {
    background: color-mix(in srgb, var(--blue-color) 14%, var(--assest-color));
    color: var(--blue-color);
    border: 1px solid color-mix(in srgb, var(--blue-color) 28%, transparent);
}

.ord-pay-status--pending {
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    color: var(--red-color);
    border: 1px solid color-mix(in srgb, var(--red-color) 24%, transparent);
}

.ord-pay-status--paid {
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    color: var(--green-color);
    border: 1px solid color-mix(in srgb, var(--green-color) 24%, transparent);
}

/* Order status badges - modern pill design */
.ord-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.3px;
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
}

.ord-status--pending {
    background: color-mix(in srgb, var(--yellow-color) 14%, var(--assest-color));
    color: var(--yellow-color);
    border-color: color-mix(in srgb, var(--yellow-color) 30%, transparent);
}

.ord-status--confirmed {
    background: color-mix(in srgb, var(--blue-color) 14%, var(--assest-color));
    color: var(--blue-color);
    border-color: color-mix(in srgb, var(--blue-color) 30%, transparent);
}

.ord-status--picking {
    background: color-mix(in srgb, var(--purple-color) 14%, var(--assest-color));
    color: var(--purple-color);
    border-color: color-mix(in srgb, var(--purple-color) 30%, transparent);
}

.ord-status--packed {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--assest-color));
    color: var(--primary-dark-color);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.ord-status--outdelivery {
    background: color-mix(in srgb, var(--dark-color) 10%, var(--assest-color));
    color: var(--dark-color);
    border-color: color-mix(in srgb, var(--dark-color) 22%, transparent);
}

.ord-status--delivered {
    background: color-mix(in srgb, var(--green-color) 14%, var(--assest-color));
    color: var(--green-color);
    border-color: color-mix(in srgb, var(--green-color) 30%, transparent);
}

.ord-status--cancelled {
    background: color-mix(in srgb, var(--red-color) 14%, var(--assest-color));
    color: var(--red-color);
    border-color: color-mix(in srgb, var(--red-color) 30%, transparent);
}

.ord-status--rejected {
    background: color-mix(in srgb, var(--red-color) 14%, var(--assest-color));
    color: var(--red-color);
    border-color: color-mix(in srgb, var(--red-color) 30%, transparent);
}

/* Action column layout */
.ord-action-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Custom status change dropdown */
.ord-dd {
    position: relative;
}

.ord-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border-light);
    background: var(--assest-color);
    color: var(--black-50);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    font-family: var(--font);
    outline: none;
}

.ord-dd-trigger:hover,
.ord-dd-trigger.is-open {
    border-color: var(--primary-color);
    background: var(--primary-bg);
    color: var(--primary-dark-color);
}

.ord-dd-trigger:focus,
.ord-dd-trigger:active,
.ord-dd-trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent;
}

.ord-dd-caret {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.ord-dd-trigger.is-open .ord-dd-caret {
    transform: rotate(180deg);
}

.ord-dd-menu {
    display: none;
    min-width: 155px;
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgb(var(--primary-rgb) / 0.12);
    overflow: hidden;
}

/* Body-portal: rendered outside table to escape overflow/transform clipping */
#ord-dd-portal {
    position: fixed;
    z-index: 9999;
    transform-origin: top center;
}

#ord-dd-portal.is-open {
    display: block;
    animation: ord-dd-in 0.16s ease both;
}

@keyframes ord-dd-in {
    from {
        opacity: 0;
        transform: scaleY(0.94);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.ord-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    text-decoration: none;
    color: var(--black-50);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease;
    cursor: pointer;
    border: none;
    width: 100%;
    background: transparent;
    outline: none;
}

.ord-dd-item:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    text-decoration: none;
    color: var(--black-50);
}

.ord-dd-item:focus,
.ord-dd-item:active {
    outline: none;
    box-shadow: none;
}

.ord-dd-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
}

.ord-dd-item+.ord-dd-item {
    border-top: 1px solid var(--border-light);
}

.ord-dd-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.ord-dd-item-label {
    flex: 1;
    text-align: left;
}

.ord-dd-item-icon--success {
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    color: var(--green-color);
}

.ord-dd-item-icon--danger {
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    color: var(--red-color);
}

.ord-dd-item-icon--info {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    color: var(--blue-color);
}

.ord-dd-item-icon--primary {
    background: color-mix(in srgb, var(--purple-color) 12%, var(--assest-color));
    color: var(--purple-color);
}

/* Status confirm modal — primary-color confirm btn (non-destructive action) */
.scm-confirm-btn {
    background: var(--primary-color) !important;
    color: var(--dark-color) !important;
}

.scm-confirm-btn:hover {
    background: var(--primary-dark-color) !important;
    box-shadow: 0 5px 18px var(--primary-bg) !important;
}

.scm-confirm-btn:active {
    background: var(--primary-dark-color) !important;
    box-shadow: 0 2px 8px var(--primary-bg) !important;
    transform: translateY(0) !important;
}

/* Delivery assign modal inner cards */
.ord-modal-info-card {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ord-modal-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ord-modal-info-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 120px;
}

.ord-modal-info-val {
    font-size: 13px;
    /* color: var(--dark-color); */
}

.ord-modal-items-card {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
}

.ord-modal-items-header {
    background: var(--primary-light);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark-color);
    border-bottom: 1px solid var(--border-light);
}

.ord-modal-total-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 6px;
}

.ord-modal-total-val {
    font-size: 15px;
    font-weight: 800;
    color: var(--green-color);
}

/* Order status confirmation modal */
.ord-confirm-dialog {
    max-width: 380px;
}

.ord-confirm-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgb(var(--primary-rgb) / 0.14);
    position: relative;
    background: var(--assest-color);
}

.ord-confirm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--text-secondary) 12%, var(--assest-color));
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    z-index: 1;
    padding: 0;
}

.ord-confirm-close:hover {
    background: var(--red-color);
    color: var(--white-color);
}

.ord-confirm-body {
    padding: 36px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.ord-confirm-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.ord-confirm-icon-wrap--success {
    background: color-mix(in srgb, var(--green-color) 14%, var(--assest-color));
    color: var(--green-color);
    border-color: color-mix(in srgb, var(--green-color) 24%, transparent);
}

.ord-confirm-icon-wrap--danger {
    background: color-mix(in srgb, var(--red-color) 14%, var(--assest-color));
    color: var(--red-color);
    border-color: color-mix(in srgb, var(--red-color) 24%, transparent);
}

.ord-confirm-icon-wrap--info {
    background: color-mix(in srgb, var(--blue-color) 14%, var(--assest-color));
    color: var(--blue-color);
    border-color: color-mix(in srgb, var(--blue-color) 24%, transparent);
}

.ord-confirm-icon-wrap--primary {
    background: color-mix(in srgb, var(--purple-color) 14%, var(--assest-color));
    color: var(--purple-color);
    border-color: color-mix(in srgb, var(--purple-color) 24%, transparent);
}

.ord-confirm-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.ord-confirm-message {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.ord-confirm-status-success {
    color: var(--green-color);
}

.ord-confirm-status-danger {
    color: var(--red-color);
}

.ord-confirm-status-info {
    color: var(--blue-color);
}

.ord-confirm-status-primary {
    color: var(--purple-color);
}

.ord-confirm-footer {
    display: flex;
    gap: 10px;
    padding: 0 28px 28px;
}

.ord-confirm-cancel-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
}

.ord-confirm-cancel-btn:hover {
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--assest-color));
    color: var(--dark-color);
    border-color: var(--text-secondary);
}

.ord-confirm-ok-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
}

.ord-confirm-ok-btn:hover {
    background: var(--primary-dark-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-bg);
}

/* Responsive */
@media (max-width: 1200px) {
    .ord-counter-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .ord-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ord-counter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ord-counter-card {
        padding: 12px 14px;
    }

    .ord-counter-val {
        font-size: 18px;
    }

    .ord-tabs-wrap {
        padding: 12px 12px 0;
    }

    .ord-tabs .nav-link {
        padding: 8px 12px;
        font-size: 12px;
    }
}

html[data-theme="dark"] .right-content .ord-counter-val {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .ord-user-name {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .ord-amount {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .ord-earning-val {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .ord-confirm-title {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .ord-status--outdelivery {
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--text-secondary) 30%, transparent);
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--assest-color));
}

/* ====================================================
   Order Detail Page (od-*)
   ==================================================== */

/* Page header right-side action buttons */
.page-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.od-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--border-light);
    background: var(--assest-color);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    font-family: var(--font);
    line-height: 1;
}

.od-back-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-dark-color);
    background: var(--primary-bg);
}

.od-invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: var(--primary-color);
    color: var(--dark-color);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    font-family: var(--font);
    line-height: 1;
}

.od-invoice-btn:hover {
    background: var(--primary-dark-color);
    color: var(--dark-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--primary-bg);
}

/* Order summary card layout */
.od-summary-card {
    padding: 20px 24px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.od-summary-left {
    flex: 1;
    min-width: 0;
}

.od-summary-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex-shrink: 0;
    min-width: 180px;
    padding-left: 28px;
    border-left: 1px solid var(--border-light);
}

/* Order ID block */
.od-order-id-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.od-order-id-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.od-order-id-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1;
}

.od-order-id-val {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--dark-color);
    line-height: 1;
}

/* Summary meta fields */
.od-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 36px;
}

.od-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.od-meta-item--notes {
    flex-basis: 100%;
}

.od-meta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    line-height: 1;
}

.od-meta-val {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dark-color);
}

.od-date-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dark-color);
}

.od-otp-val {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--primary-dark-color);
    font-family: monospace;
}

/* Info cards grid (Shipping / Seller / Delivery) */
.od-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.od-info-card {
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.od-info-card:hover {
    box-shadow: 0 6px 22px rgb(var(--primary-rgb) / 0.08);
    transform: translateY(-1px);
}

.od-info-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
}

.od-info-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.od-info-icon--shipping {
    background: color-mix(in srgb, var(--blue-color) 12%, var(--assest-color));
    color: var(--blue-color);
}

.od-info-icon--seller {
    background: color-mix(in srgb, var(--green-color) 12%, var(--assest-color));
    color: var(--green-color);
}

.od-info-icon--delivery {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--assest-color));
    color: var(--primary-dark-color);
}

.od-info-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dark-color);
}

.od-info-body {
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.od-info-avatar-wrap {
    flex-shrink: 0;
}

.od-info-avatar {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid var(--border-light);
    background: var(--primary-bg);
    display: block;
}

.od-info-rows {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.od-info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.od-info-row-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    line-height: 1;
}

.od-info-row-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-color);
    line-height: 1.4;
    word-break: break-word;
}

/* Products table + amount summary grid */
.od-content-grid {
    display: grid;
    grid-template-columns: 1fr 270px;
    gap: 16px;
    align-items: start;
}

/* Section heading shared by cards on this page */
.od-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.od-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.od-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-color);
}

/* Product cell inside items table */
.od-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.od-product-img-link {
    flex-shrink: 0;
    display: block;
}

.od-product-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid var(--border-light);
    display: block;
}

.od-product-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-color);
    white-space: nowrap;
}

.od-variation-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.od-variation-item {
    font-size: 12px;
    color: var(--dark-color);
    line-height: 1.4;
}

.od-unit {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.od-qty {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border-radius: 6px;
    padding: 2px 10px;
}

.od-dash {
    color: var(--text-secondary);
}

/* Order amount summary card */
.od-amount-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.od-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.od-amount-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.od-amount-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-color);
}

.od-amount-discount {
    color: var(--green-color);
}

.od-amount-divider {
    height: 1px;
    background: var(--border-light);
    margin: 2px 0;
}

.od-amount-total-row .od-amount-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-color);
}

.od-amount-total-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary-dark-color);
}

/* Delivered date banner */
.od-delivered-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 20px 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--green-color) 8%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--green-color) 22%, transparent);
}

.od-delivered-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--green-color) 14%, var(--assest-color));
    color: var(--green-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.od-delivered-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.od-delivered-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dark-color);
}

.od-delivered-text span {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Order tracking timeline */
.od-tracking-wrap {
    display: flex;
    align-items: flex-start;
    padding: 24px 20px 20px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

.od-track-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 90px;
}

.od-track-icon-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.od-track-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-secondary) 10%, var(--assest-color));
    border: 2px solid var(--border-light);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.od-track-step--active .od-track-icon {
    background: var(--primary-color);
    border-color: var(--primary-dark-color);
    color: var(--dark-color);
    box-shadow: 0 4px 16px var(--primary-bg);
}

.od-track-step--rejected .od-track-icon {
    background: color-mix(in srgb, var(--red-color) 12%, var(--assest-color));
    border-color: color-mix(in srgb, var(--red-color) 30%, transparent);
    color: var(--red-color);
    box-shadow: none;
}

.od-track-connector {
    flex: 1;
    height: 3px;
    background: var(--border-light);
    min-width: 20px;
    align-self: center;
}

.od-track-connector--active {
    background: var(--primary-color);
}

.od-track-label-wrap {
    margin-top: 10px;
    width: 90px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.od-track-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.3;
}

.od-track-step--active .od-track-label {
    color: var(--primary-dark-color);
}

.od-track-step--rejected .od-track-label {
    color: var(--red-color);
}

.od-track-date {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Delivery instructions list */
.od-di-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px 16px;
}

.od-di-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
    transition: box-shadow 0.2s ease;
}

.od-di-item:hover {
    box-shadow: 0 2px 10px rgb(var(--primary-rgb) / 0.08);
}

.od-di-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.od-di-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-color);
}

/* Order detail responsive */
@media (max-width: 1100px) {
    .od-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .od-content-grid {
        grid-template-columns: 1fr 250px;
    }
}

/* Laptop: products table uses full width, amount card stacks below */
@media (min-width: 901px) and (max-width: 1366px) {
    .od-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .od-summary-card {
        flex-direction: column;
        gap: 20px;
    }

    .od-summary-right {
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding-left: 0;
        padding-top: 16px;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 32px;
    }

    .od-content-grid {
        grid-template-columns: 1fr;
    }

    .od-amount-card {
        order: -1;
    }
}

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

    .od-track-icon {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .od-track-label-wrap {
        width: 70px;
    }
}

@media (max-width: 480px) {
    .page-header-right {
        gap: 6px;
    }

    .od-back-btn,
    .od-invoice-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .od-summary-card {
        padding: 16px;
    }
}

/* Order detail dark mode */
html[data-theme="dark"] .right-content .od-order-id-val,
html[data-theme="dark"] .right-content .od-meta-val,
html[data-theme="dark"] .right-content .od-date-val,
html[data-theme="dark"] .right-content .od-info-card-title,
html[data-theme="dark"] .right-content .od-info-row-val,
html[data-theme="dark"] .right-content .od-section-title,
html[data-theme="dark"] .right-content .od-product-name,
html[data-theme="dark"] .right-content .od-variation-item,
html[data-theme="dark"] .right-content .od-amount-val,
html[data-theme="dark"] .right-content .od-track-label,
html[data-theme="dark"] .right-content .od-di-title,
html[data-theme="dark"] .right-content .od-delivered-text strong {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .od-qty {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .od-amount-total-row .od-amount-label {
    color: var(--black-50);
}

html[data-theme="dark"] .right-content .od-amount-total-val {
    color: var(--primary-color);
}

html[data-theme="dark"] .right-content .od-track-step--active .od-track-label {
    color: var(--primary-color);
}

/* ================================================
   Delivery Assignments Module
   ================================================ */

/* Counter grid — 3 per row (2 rows of 3 for 6 cards) */
.da-counter-grid {
    grid-template-columns: repeat(6, 1fr);
}

/* Counter card color variants */
.da-counter-card--assign {
    --ord-icon-color: var(--blue-color);
}

.da-counter-card--pickup {
    --ord-icon-color: var(--yellow-color);
}

.da-counter-card--ontheway {
    --ord-icon-color: var(--purple-color);
}

.da-counter-card--delivered {
    --ord-icon-color: var(--green-color);
}

.da-counter-card--cancelled {
    --ord-icon-color: var(--black-50);
}

.da-counter-card--rejected {
    --ord-icon-color: var(--red-color);
}

/* Status badge variants — reuse ord-status-badge base, add only color rules */
.da-status--assign {
    background: color-mix(in srgb, var(--blue-color) 14%, var(--assest-color));
    color: var(--blue-color);
    border-color: color-mix(in srgb, var(--blue-color) 30%, transparent);
}

.da-status--pickup {
    background: color-mix(in srgb, var(--yellow-color) 14%, var(--assest-color));
    color: var(--yellow-color);
    border-color: color-mix(in srgb, var(--yellow-color) 30%, transparent);
}

.da-status--ontheway {
    background: color-mix(in srgb, var(--purple-color) 14%, var(--assest-color));
    color: var(--purple-color);
    border-color: color-mix(in srgb, var(--purple-color) 30%, transparent);
}

/* Filter row — search + selects on one line */
.da-filter-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.da-filter-search {
    flex: 2;
    min-width: 200px;
}

/* Pickup details cell */
.da-pickup-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.da-pickup-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

.da-pickup-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.da-pickup-val {
    font-size: 13.5px;
    color: var(--dark-color);
    font-weight: 500;
}

.da-pickup-empty {
    color: var(--text-secondary);
}

/* Portal for DA action dropdown */
#da-dd-portal {
    display: none;
    position: fixed;
    z-index: 9999;
    min-width: 170px;
    background: var(--assest-color);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgb(var(--primary-rgb) / 0.12);
    overflow: hidden;
}

#da-dd-portal.is-open {
    display: block;
    animation: ord-dd-in 0.16s ease both;
}

/* Delivery assignments responsive */
@media (max-width: 1199px) {
    .da-counter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .da-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .da-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .da-filter-search,
    .da-filter-row .it-filter-select-wrap {
        width: 100%;
        min-width: unset;
        flex: unset;
    }
}

@media (max-width: 479px) {
    .da-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dark mode */
html[data-theme="dark"] .right-content .da-pickup-val {
    color: var(--black-50);
}

/* ================================================
   Admin Profile Module
   ================================================ */

/* Profile avatar row */
.prf-avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.prf-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: -1px;
    text-transform: uppercase;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-color) 35%, transparent);
    user-select: none;
}

.prf-avatar-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.prf-avatar-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prf-avatar-email {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Password field with show/hide toggle */
.prf-pwd-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.prf-pwd-input {
    padding-right: 44px !important;
}

.prf-pwd-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: color 0.18s ease;
    z-index: 2;
}

.prf-pwd-toggle:hover {
    color: var(--primary-dark-color);
}

.prf-pwd-toggle:focus,
.prf-pwd-toggle:focus-visible {
    outline: none;
}

/* Profile responsive */
@media (max-width: 576px) {
    .prf-avatar-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Profile dark mode */
html[data-theme="dark"] .right-content .prf-avatar-name {
    color: var(--black-50);
}

/* ============================================================
   Admin Profile — Info Label-Value Grid
   ============================================================ */
.prf-avatar-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.prf-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prf-info-label {
    min-width: 72px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.prf-info-val {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-color);
    word-break: break-all;
}

@media (max-width: 480px) {
    .prf-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .prf-info-label {
        min-width: unset;
    }
}

[data-theme="dark"] .prf-info-val {
    color: var(--black-50);
}

/* ============================================================
   Admin Profile — Body Layout (Info Panel | Divider | Fields)
   ============================================================ */
.prf-body-layout {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.prf-info-panel {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: 28px;
}

.prf-info-panel .prf-avatar-row {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.prf-panel-divider {
    width: 1px;
    flex-shrink: 0;
    align-self: stretch;
    background-color: var(--border-light);
    margin: 0 28px;
}

.prf-fields-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.prf-fields-panel .mod-field {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .prf-body-layout {
        flex-direction: column;
        gap: 0;
    }

    .prf-info-panel {
        padding-right: 0;
        padding-bottom: 20px;
    }

    .prf-panel-divider {
        width: auto;
        height: 1px;
        align-self: auto;
        margin: 0 0 20px 0;
    }
}

[data-theme="dark"] .prf-panel-divider {
    background-color: var(--border-light);
}

/* Seller filter in header */
.sr-seller-filter {
    min-width: 400px;
}

.sr-seller-filter .select2-container {
    width: 100% !important;
}

/* Seller Summary Strip */
.sr-summary-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--primary-bg);
    border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
    border-left: 3px solid var(--primary-color);
    border-radius: 10px;
    padding: 9px 16px;
    margin-bottom: 18px;
    font-size: 13px;
}

.sr-summary-icon {
    color: var(--primary-dark-color);
    font-size: 14px;
}

.sr-summary-label {
    color: var(--primary-dark-color);
    font-size: 13px;
}

.sr-summary-sep {
    color: var(--text-secondary);
    opacity: .5;
}

.sr-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--black-50);
    font-size: 13px;
}

.sr-summary-item i {
    color: var(--primary-dark-color);
    font-size: 12px;
}

/* Payment breakdown rows */
.sr-payment-rows {
    margin-top: 4px;
}

.sr-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 7%, transparent);
    font-size: 13px;
}

.sr-payment-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sr-payment-pct {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 6px;
}

.ord-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ord-type-badge--asap {
    background: color-mix(in srgb, var(--blue-color) 14%, var(--assest-color));
    color: var(--blue-color);
    border: 1px solid color-mix(in srgb, var(--blue-color) 28%, transparent);
}

.ord-type-badge--scheduled {
    background: color-mix(in srgb, var(--primary-color) 26%, var(--assest-color));
    color: color-mix(in srgb, var(--primary-color) 70%, #000);
    border: 1px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.mplan-benefits-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mplan-benefit-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.3;
}

.mplan-benefit-icon {
    font-size: 11px;
    color: var(--accent-color);
    flex-shrink: 0;
}

html[data-theme="dark"] .mplan-benefit-item {
    color: var(--text-secondary);
}

/* ─── Delivery Slot Capacity — dual-pool cell ────────────────────────── */
.slot-cap-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.slot-cap-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    line-height: 1.3;
}

.slot-cap-label {
    font-weight: 700;
    color: var(--dark-color);
    white-space: nowrap;
}

.slot-cap-value {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 15px;
}

.slot-booked-frac {
    font-weight: 700;
    font-size: 13px;
    color: var(--dark-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

html[data-theme="dark"] .slot-cap-label {
    color: var(--text-secondary);
}

html[data-theme="dark"] .slot-booked-frac {
    color: var(--text-secondary);
}

/*
 * ─── Dark mode text fixes: Delivery Slot Capacity + Delivery Partner Shifts ──
 *
 * `--dark-color` is intentionally NOT redefined for dark mode (the theme
 * relies on it staying its light-mode value for badge/pill fills), so any
 * module rule that used `color: var(--dark-color)` on a dark surface was
 * rendering as black text on a near-black background. The fix is scoped
 * to the two module cards only - each rule mirrors the same "88% white
 * mix" pattern already used by `.right-content .page-title-sm` and the
 * dark-mode modal titles, so the palette matches the rest of the app
 * without introducing new tokens. Rules that pair a yellow/primary
 * background with `color: var(--dark-color)` (step badges, summary icons,
 * range-summary icons) are DELIBERATELY left alone - dark text on the
 * yellow badge is what those need in both modes.
 */

/* Delivery Slot Capacity — Bulk Capacity form */
html[data-theme="dark"] .bulk-capacity-card .bcp-section-title,
html[data-theme="dark"] .bulk-capacity-card .bcp-range-summary-days,
html[data-theme="dark"] .bulk-capacity-card .bcp-checkbox-label,
html[data-theme="dark"] .bulk-capacity-card .bcp-settings-table thead th,
html[data-theme="dark"] .bulk-capacity-card .bcp-settings-slot-label,
html[data-theme="dark"] .bulk-capacity-card .bcp-preview-table .bcp-preview-corner,
html[data-theme="dark"] .bulk-capacity-card .bcp-preview-table .bcp-preview-row-label,
html[data-theme="dark"] .bulk-capacity-card .bcp-preview-date-head,
html[data-theme="dark"] .bulk-capacity-card .bcp-summary-label,
html[data-theme="dark"] .bulk-capacity-card .bcp-summary-item,
html[data-theme="dark"] .bulk-capacity-card .bcp-summary-item strong {
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

/* Sub-headings / helper text (already muted in light mode - kept muted
 * against dark surface too). */
html[data-theme="dark"] .bulk-capacity-card .bcp-section-subtitle,
html[data-theme="dark"] .bulk-capacity-card .bcp-card-subtitle,
html[data-theme="dark"] .bulk-capacity-card .bcp-helper-text,
html[data-theme="dark"] .bulk-capacity-card .bcp-range-summary-dates,
html[data-theme="dark"] .bulk-capacity-card .bcp-settings-slot-time {
    color: color-mix(in srgb, var(--white-color) 55%, var(--dark-color));
}

/* Inputs inside the two module forms - dark surface + light text so typed
 * values are readable. The `.right-content .form-control::placeholder`
 * dark-mode rule already handles placeholders. */
html[data-theme="dark"] .bulk-capacity-card .mod-input,
html[data-theme="dark"] .bulk-capacity-card .bcp-cell-input,
html[data-theme="dark"] .bulk-shift-card .mod-input,
html[data-theme="dark"] .bulk-shift-card .bsh-cell-input {
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
    background-color: color-mix(in srgb, var(--dark-color) 100%, var(--black-color));
    border-color: color-mix(in srgb, var(--dark-color) 46%, var(--white-color));
}

/* Delivery Partner Shifts — Bulk Shift form */
html[data-theme="dark"] .bulk-shift-card .bsh-section-title,
html[data-theme="dark"] .bulk-shift-card .bsh-range-summary-days,
html[data-theme="dark"] .bulk-shift-card .bsh-checkbox-label,
html[data-theme="dark"] .bulk-shift-card .bsh-capacity-table thead th,
html[data-theme="dark"] .bulk-shift-card .bsh-capacity-table td,
html[data-theme="dark"] .bulk-shift-card .bsh-summary-label,
html[data-theme="dark"] .bulk-shift-card .bsh-summary-item,
html[data-theme="dark"] .bulk-shift-card .bsh-summary-item strong {
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

html[data-theme="dark"] .bulk-shift-card .bsh-card-subtitle,
html[data-theme="dark"] .bulk-shift-card .bsh-range-summary-dates {
    color: color-mix(in srgb, var(--white-color) 55%, var(--dark-color));
}

/* Delivery Partner Shifts list — `Full` read-only status badge sits on
 * an `--assest-color` mix, which is dark in dark mode; boost its text to
 * a lighter shade so the "Full" label stays readable. */
html[data-theme="dark"] .dps-status-full {
    color: color-mix(in srgb, var(--white-color) 78%, var(--dark-color));
    background: color-mix(in srgb, var(--white-color) 12%, var(--dark-color));
}

/* Bulk-selection count pill on the shifts list. */
html[data-theme="dark"] .dps-bulk-count {
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
    background: color-mix(in srgb, var(--primary-color) 14%, var(--dark-color));
}

/* Filter-row Select2 single dropdowns (the two `.w-50` filter selects
 * on the shift list and the slot filter on the capacity list) inherit
 * the generic `.mod-search-with-filter .select2-selection--single` rule
 * which is already dark-mode aware - no extra work needed there. This
 * block only ensures the native `.mod-filter-select` (date + fallback)
 * reads as light-on-dark, matching the surrounding filter row. */
html[data-theme="dark"] .right-content .mod-filter-select {
    color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
}

/* Capacity list "Booked" / "Capacity" stacked value column - the
 * generic .slot-cap-label / .slot-booked-frac dark rules above already
 * handle those, this block covers the container just for consistency. */
html[data-theme="dark"] .slot-cap-list .slot-cap-value {
    color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
}

/* ── Highlight/Info Note — Dark Mode text contrast fix ──────────────────────
 * In dark mode the note background is a dark amber-tinted surface
 * (color-mix of #f59e0b + --assest-color which resolves to --dark-color).
 * The base rule uses --dark-color for text which is correct in light mode but
 * disappears against the dark surface. Override both text and icon here to
 * keep them clearly readable in dark mode. */
html[data-theme="dark"] .mod-highlight-note-text {
    color: color-mix(in srgb, var(--white-color) 88%, var(--dark-color));
}

html[data-theme="dark"] .mod-highlight-note-icon {
    color: #f59e0b;
}

/* ─── Delivery Partner Shift — Notes accordion card ─────────────────────────
 * Replaces the old orange mod-highlight-note banner with a compact,
 * collapsible card that matches the mod-card design system.
 * Light mode uses --assest-color (white) as the base; dark mode inherits
 * the same card background via --assest-color resolving to --dark-color
 * inside .right-content. Text colors use the same color-mix pattern used
 * by the bulk-shift-card dark mode overrides directly below. */

.dps-notes-card {
    margin-bottom: 0;
    overflow: hidden;
}

.dps-notes-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    outline: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
    gap: 12px;
}

.dps-notes-toggle:hover,
.dps-notes-toggle:focus {
    background: color-mix(in srgb, var(--primary-color) 16%, var(--assest-color));
    outline: none;
    box-shadow: none;
}

/* Remove the border when the body is collapsed (card is fully closed) */
.dps-notes-toggle[aria-expanded="false"] {
    border-bottom-color: transparent;
}

.dps-notes-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Reuse mod-card-head-icon sizing; override only font-size to match info icon */
.dps-notes-icon {
    font-size: 12px !important;
}

.dps-notes-chevron {
    font-size: 11px;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.dps-notes-toggle[aria-expanded="true"] .dps-notes-chevron {
    transform: rotate(180deg);
}

.dps-notes-body {
    padding: 14px 20px 16px;
}

.dps-notes-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dps-notes-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--dark-color);
}

.dps-notes-list li:last-child {
    margin-bottom: 0;
}

.dps-notes-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-dark-color);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
}

/* ── Dark mode — Notes card ─────────────────────────────────────────────────
 * The card toggle header uses --assest-color which resolves to --dark-color
 * (#1F2937) in dark mode, so the h5 title is already covered by the global
 * `.right-content h5` dark-mode rule (line ~4442). Only the list item text
 * needs an explicit override since <li> is not in that selector list. */
html[data-theme="dark"] .dps-notes-list li {
    color: color-mix(in srgb, var(--white-color) 82%, var(--dark-color));
}

html[data-theme="dark"] .dps-notes-chevron {
    color: color-mix(in srgb, var(--white-color) 48%, var(--dark-color));
}