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

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

    --white-color: #fff;
    --black-color: #000;
    --black-50: rgba(0, 0, 0, 0.5);

    --primary-color: #0E1F1A;
    --primary-light: #0E1F1A40;
    --primary-bg: #0E1F1A21;
    --primary-dark-color: #1F3A33;
    --accent-color: #C8A96A;
    --body-bg-color: #F4F7F6;
    --login-bg-color: #d1dcdc;
    --assest-color: #fff;
    --black-rgb: 255 255 255;
    --green: #318616;
    --red: #DC3545;
    --yellow: #FFA500;
    --blue: #007bff;
    --purple: #6f42c1;
    --dark: #343a40;
}

[data-theme="dark"] {
    /* Base Colors */
    --white-color: #121A18;
    --black-color: #F5F7F6;
    --black-50: rgba(255, 255, 255, 0.5);

    /* Brand Colors (Same as Light Mode) */
    --primary-color: #0E1F1A;
    --primary-light: #0E1F1A40;
    --primary-bg: #0E1F1A21;
    --primary-dark-color: #1F3A33;
    --accent-color: #C8A96A;

    /* Layout */
    --body-bg-color: #0F1513;
    --login-bg-color: #0F1513;
    --assest-color: #182320;

    /* RGB */
    --primary-rgb: 14 31 26;
    --white-rgb: 18 26 24;
    --black-rgb: 245 247 246;

    /* Status Colors */
    --green: #318616;
    --red: #DC3545;
    --yellow: #F59E0B;
    --blue: #3B82F6;
    --purple: #8B5CF6;
    --dark: #D1D5DB;
}

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

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

.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(--accent-color) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--accent-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(--dark);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--black-color);
}

.side-toggle {
    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;
    background: transparent;
    padding: 0;
}

.side-toggle span {
    background: var(--primary-color);
    width: 22px;
    height: 3px;
    margin: 2px;
    border-radius: 50px;
}

.side-toggle span:nth-child(2) {
    width: 26px;
}

.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: 300px;
    }
}

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

.right-content.right-content-0 .header .title-control .side-toggle {
    display: none;
}

.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: var(--assest-color);
}

.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);
}

.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);
    border: 1px solid var(--assest-color);
    padding: 20px 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.custom-border-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-top: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
    border-top-left-radius: 14px;
    z-index: 1;
    mask-image: radial-gradient(circle at 0% 0%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 0% 0%, black 30%, transparent 100%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

[data-theme="dark"] .custom-border-card::before {
    border-top-color: var(--accent-color);
    border-left-color: var(--accent-color);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

.custom-border-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-bottom: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-bottom-right-radius: 14px;
    z-index: 1;
    mask-image: radial-gradient(circle at 100% 100%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 100% 100%, black 30%, transparent 100%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

[data-theme="dark"] .custom-border-card::after {
    border-bottom-color: var(--accent-color);
    border-right-color: var(--accent-color);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

.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:disabled,
.form-control[readonly] {
    background-color: var(--white-color);
}

.form-control,
.custom-select {
    /* border: 1px solid var(--assest-color); */
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    height: auto !important;
}

.form-control:focus,
.custom-select:focus {
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    border-color: var(--primary-color);
}

.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(--primary-bg);
    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(--primary-color);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.radio-group .custom-control:hover .custom-control-input:not(:checked)~.custom-control-label::before {
    border-color: var(--primary-dark-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.radio-group .custom-control-input:focus-visible~.custom-control-label::before {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.radio-group .custom-control-input:active~.custom-control-label::before {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.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: transparent;
    border-color: var(--white-color);
}

.radio-group .custom-control-input:checked:focus-visible~.custom-control-label::before {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--white-color) 45%, transparent);
}

.radio-group .custom-control-input:checked:active~.custom-control-label::before {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--white-color) 30%, transparent);
}

[data-theme="dark"] .radio-group .custom-control-label {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .radio-group .custom-control-label::before {
    border-color: var(--accent-color);
}

[data-theme="dark"] .radio-group .custom-control:hover .custom-control-input:not(:checked)~.custom-control-label::before {
    border-color: color-mix(in srgb, var(--accent-color) 78%, var(--white-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

[data-theme="dark"] .radio-group .custom-control-input:focus-visible~.custom-control-label::before {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 32%, transparent);
}

[data-theme="dark"] .radio-group .custom-control-input:active~.custom-control-label::before {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 26%, transparent);
}

[data-theme="dark"] .radio-group .custom-control-input:checked~.custom-control-label {
    background: var(--accent-color);
    color: var(--primary-color);
}

[data-theme="dark"] .radio-group .custom-control-input:checked~.custom-control-label::before {
    background: transparent;
    border-color: var(--primary-color);
}

[data-theme="dark"] .radio-group .custom-control-input:checked:focus-visible~.custom-control-label::before {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

[data-theme="dark"] .radio-group .custom-control-input:checked:active~.custom-control-label::before {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.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;
}

/* Container for left caption area with background image */
.left-caption {
    height: 100%;
    position: relative;
}

.left-caption .bg-img {
    height: 100%;
    width: 100%;
    -o-object-fit: fill;
    object-fit: fill;
}

.left-caption .caption {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--black-50);
    color: var(--white-color);
    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;
    padding: 160px;
}

.left-caption .caption .text {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
}

.login-bg {
    background: var(--assest-color);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: auto;
    padding-bottom: 20px;
}

@media (max-height: 600px) {
    .login-bg {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
    }
}

.app-logo img {
    width: 180px;
    margin: 15px 0 20px;
}

.app-login-box {
    max-width: 410px;
    margin: 0 auto;
    width: 90%;
    padding: 30px;
    background: var(--white-color);
    border-radius: 20px;
    border: 3px solid var(--primary-color);
}

.app-login-box .form-control {
    background: var(--assest-color);
}

.app-login-box .form-control:focus {
    background: var(--white-color);
}

@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;
    }

    .video-card .card-img-top {
        height: 250px;
    }

    .video-card .card-body .card-title {
        font-size: 18px;
    }

    .video-card .card-body .card-details p {
        font-size: 16px;
    }

    .video-card .play-btn-top img {
        width: 60px;
    }

    .suggested-video .poster-img {
        width: 160px;
        height: 100px;
        border-radius: 20px;
    }

    .suggested-video .video-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 10px;
    }

    .suggested-video .details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }

}

@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;
    }

    .header {
        padding: 15px;
    }

    .header .title-control .side-toggle {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .header .side-logo {
        display: block;
        width: 160px;
    }

    .header .mobile-close-search {
        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;
        color: var(--black-color);
    }

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

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

    .header .input-group {
        height: 45px;
        width: 45px;
        border-radius: 5px;
    }

    .header .input-group .input-group-text {
        padding: 7px;
    }

    .header .input-group .form-control {
        display: none;
    }

    .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;
    }
}

@media (max-width: 340px) {
    .header .side-logo {
        width: 120px;
    }
}


/* 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-remove {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background: var(--white-color);
    margin-top: -162px;
    margin-left: 135px;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    padding: 0;
    font-size: 14px;
    z-index: 10;
}

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

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

/* 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);
}

/* Edit-Delete btn */
.edit-delete-btn {
    border: none;
    cursor: pointer;
    outline: none;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 5px;
    border-radius: 5px;
    border: 2px dashed transparent;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

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

.edit-delete-btn:focus {
    outline: none;
    box-shadow: none;
}

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

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

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


/* 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;
}


/* 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);
}

.video-card {
    padding: 5px;
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    margin: 15px 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.video-card:hover {
    -webkit-box-shadow: 0 15px 35px var(--assest-color);
    box-shadow: 0 15px 35px var(--assest-color);
}

.video-card:hover .play-btn,
.video-card:hover .overlap-control,
.video-card:hover .play-btn-top {
    display: block;
}

.video-card .card-img-top {
    border-radius: 15px;
    -o-object-fit: cover;
    object-fit: cover;
}

.video-card .play-btn {
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: none;
}

.video-card .card-body {
    padding: 15px 10px;
    position: relative;
}

.video-card .card-body .dropdown {
    position: absolute;
    right: 10px;
    top: 10px;
}

.video-card .card-body .dropdown .dropdown-menu {
    top: auto !important;
    bottom: 100%;
}

.video-card .card-body .dropdown .head-btn {
    padding: 5px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.video-card .card-body .dropdown .dropdown-item {
    font-weight: 500;
}

.video-card .card-body .dropdown .dropdown-item img {
    height: 18px;
    width: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    margin-right: 10px;
}

.video-card .card-body .card-title {
    padding-right: 10px;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card .card-body .card-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.video-card .card-body .card-details p {
    margin: 0;
    font-weight: 500;
    color: var(--table-color);
}

.video-card .card-body .card-details p.tag {
    color: var(--body-color);
}

.video-card .play-btn-top {
    position: absolute;
    right: 00px;
    top: 00px;
    background: transparent;
    padding: 0;
    display: none;
}

.video-card .play-btn-top img {
    width: 45px;
}

.video-card .overlap-control {
    position: absolute;
    right: 10px;
    bottom: -5px;
    display: none;
}

.video-card .overlap-control .btn {
    background: var(--white-color);
    padding: 2px 6px;
    border-radius: 10px;
}

.video-card .overlap-control .btn .dot-icon {
    height: 16px;
    width: 16px;
    -o-object-fit: contain;
    object-fit: contain;
}

.add-video-btn {
    height: calc(100% - 30px);
    background: var(--assest-color);
    border: 1px solid 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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 15px 0;
    width: 100%;
    border-radius: 15px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    padding: 25px;
    color: var(--primary-color) !important;
}

.add-video-btn .icon {
    margin-bottom: 15px;
}

/* Video Ribbon */
.ribbon {
    width: 125px;
    height: 125px;
    overflow: hidden;
    position: absolute;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 200px;
    padding: 5px 0;
    background-color: var(--primary-color);
    box-shadow: 0 5px 10px var(--assest-color);
    color: var(--white-color);
    font: 700 18px/1 'Lato', sans-serif;
    text-transform: uppercase;
    text-align: center;
}

.ribbon-top-left {
    top: -10px;
    left: -10px;
}

.ribbon-top-left::before {
    top: 0;
    right: 0;
}

.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}

.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}

.badge {
    margin: 6px;
    display: inline-block;
    padding: 0.5em 1em;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: uppercase;
    border-radius: 0.375rem;
    transition:
        background-color 0.2s ease-in-out,
        color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}

.badge.green {
    background-color: color-mix(in srgb, var(--green-color) 20%, white);
    color: color-mix(in srgb, var(--green-color) 80%, black);
}

.badge.red {
    background-color: color-mix(in srgb, var(--red-color) 20%, white);
    color: color-mix(in srgb, var(--red-color) 80%, black);

}

.general-badge {
    font-weight: bold;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.general-green {
    background-color: var(--green-color);
    color: var(--white-color);
}

.general-red {
    background-color: var(--red-color);
    color: var(--white-color);
}

/* Modal container */
.decision-modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

/* Modal content */
.decision-modal-content {
    background-color: var(--white-color);
    border-radius: 10px;
    width: 450px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Close button */
.decision-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

/* Modal Body */
.decision-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Styling */
.decision-icon-img {
    width: 60px;
    height: 60px;
}

.decision-modal-body .modal-style {
    font: bold;
    font-size: 16px;
}

/* Error Text */
.decision-error-text {
    color: var(--red-color);
    font-size: 20px;
    font-weight: bold;
    margin: 20px 10px;
}

/* Success Text */
.decision-success-text {
    color: var(--green-color);
    font-size: 20px;
    font-weight: bold;
    margin: 15px 0;
}

#map {
    height: 355px;
    width: 700px;
    position: relative;
    overflow: hidden;
}

.schedule-group {
    overflow: hidden;
    margin-bottom: 16px;
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.schedule-group.cat-card:has(.cat-card-head)::before,
.schedule-group.cat-card:has(.cat-card-head)::after {
    pointer-events: none;
}

.schedule-group.is-collapsed {
    background: var(--white-color);
}

.schedule-header,
.schedule-header * {
    -webkit-tap-highlight-color: transparent;
}

.schedule-header {
    cursor: pointer;
    gap: 16px;
    background: var(--primary-bg);
    transition: background 0.22s ease;
}

.sched-head-left {
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    gap: 14px;
}

.sched-date-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.sched-date-field {
    flex: 1 1 200px;
    max-width: 240px;
    min-width: 0;
    margin-bottom: 0;
}

.sched-date-fields.is-single .sched-date-field {
    max-width: 260px;
}

.sched-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-card-body.schedule-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.cat-card-body.schedule-body.open {
    padding-top: 22px;
    padding-bottom: 22px;
    max-height: 6000px;
    opacity: 1;
}

.slots-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.slot-card {
    background: var(--white-color);
    padding: 14px 16px;
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 6px 18px var(--primary-bg);
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.slot-remove-col {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.remove-date-btn,
.remove-slot-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--red);
    background: transparent;
    color: var(--red);
    outline: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.remove-date-btn:hover,
.remove-slot-btn:hover {
    background: var(--red);
    color: var(--white-color);
    transform: translateY(-1px);
}

.remove-date-btn:active,
.remove-slot-btn:active {
    transform: translateY(0);
}

.remove-date-btn:focus,
.remove-date-btn:focus-visible,
.remove-slot-btn:focus,
.remove-slot-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent);
}

.remove-date-btn:disabled,
.remove-slot-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.remove-date-btn {
    padding: 8px 12px;
}

.sched-add-slot-wrap {
    margin-top: 14px;
    display: flex;
    justify-content: flex-start;
}

.add-slot-btn {
    border-radius: 999px;
}

.generated-slots {
    margin-top: 10px;
}

.gen-slot-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--black-color);
    font-size: 13px;
}

.gen-slot-head i {
    color: var(--primary-color);
}

.slot-times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sched-badge {
    display: inline-flex;
    align-items: center;
    background: var(--primary-color);
    color: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 60%, transparent);
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.sched-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

[data-theme="dark"] .sched-badge {
    background: color-mix(in srgb, var(--accent-color) 18%, var(--assest-color));
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
}

[data-theme="dark"] .sched-badge:hover {
    background: color-mix(in srgb, var(--accent-color) 28%, var(--assest-color));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.schedule-header input[type="date"],
.schedule-header input[type="date"]:focus {
    color: var(--black-color);
}

.slot-card input[type="time"]::-webkit-calendar-picker-indicator,
.schedule-header input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: none;
    opacity: 0.7;
}

[data-theme="dark"] .slot-card input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .schedule-header input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.9);
    opacity: 0.9;
}

.sched-date-input-wrap {
    position: relative;
    display: block;
}

.sched-date-input-wrap .cat-input {
    padding-right: 40px;
}

.sched-date-input-wrap .cat-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    pointer-events: none;
}

.sched-date-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
    opacity: 0.85;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.sched-date-input-wrap:hover .sched-date-icon,
.sched-date-input-wrap:focus-within .sched-date-icon {
    opacity: 1;
    color: var(--primary-dark-color);
}

[data-theme="dark"] .sched-date-icon {
    color: var(--accent-color);
}

[data-theme="dark"] .sched-date-input-wrap:hover .sched-date-icon,
[data-theme="dark"] .sched-date-input-wrap:focus-within .sched-date-icon {
    color: var(--accent-color);
    opacity: 1;
}

@media (max-width: 992px) {
    .sched-date-field {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .schedule-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sched-head-left {
        flex-direction: column;
        align-items: stretch;
    }

    .sched-date-fields {
        flex-direction: column;
    }

    .sched-date-field,
    .sched-date-fields.is-single .sched-date-field {
        max-width: none;
    }

    .sched-head-actions {
        justify-content: space-between;
    }

    .slot-remove-col {
        justify-content: flex-start;
    }
}

/* 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);
}


.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;
}

/* ==========================================
   Login Page (lp-*)
   ========================================== */

/* Page background wrapper */
.lp-wrap {
    min-height: 100vh;
    background-color: var(--login-bg-color);
    background-image:
        linear-gradient(color-mix(in srgb, var(--black-color) 1%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--black-color) 1%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    position: relative;
    overflow: hidden;
}

.lp-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--black-color) 7%, transparent) 1.5px, transparent 1.5px);
    background-size: 60px 60px;
    background-position: 15px 15px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.12;
    animation: lpParticleFloat 28s ease-in-out infinite;
}

/* ---- Floating Bubbles ---- */
.lp-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.lp-bubble {
    position: absolute;
    bottom: -14px;
    left: var(--x, 50%);
    width: var(--s, 6px);
    height: var(--s, 6px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
    animation: lpBubbleRise var(--t, 16s) var(--d, 0s) ease-in infinite;
    opacity: 0;
}

.lp-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 8% 78%, color-mix(in srgb, var(--accent-color) 9%, transparent), transparent 65%),
        radial-gradient(ellipse 50% 40% at 92% 18%, color-mix(in srgb, var(--accent-color) 7%, transparent), transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: lpGlowPulse 10s ease-in-out infinite;
}

/* Outer rounded container */
.lp-container {
    display: flex;
    width: 100%;
    max-width: 1170px;
    min-height: 720px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 2;
    background: var(--assest-color);
    animation: lpFadeIn 0.55s 0.05s both;
}

/* ---- Theme Toggle Pill ---- */
.lp-theme-btn {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 76px;
    height: 38px;
    padding: 5px 6px;
    background: var(--white-color);
    border: 1.5px solid var(--assest-color);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.lp-theme-btn:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

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

.lp-tgl-sun-icon,
.lp-tgl-moon-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 50%;
    pointer-events: none;
    position: relative;
    z-index: 2;
    transition: opacity 0.35s, color 0.35s;
    flex-shrink: 0;
}

.lp-tgl-sun-icon {
    color: var(--accent-color);
    opacity: 1;
}

.lp-tgl-moon-icon {
    color: var(--dark);
    opacity: 0.3;
}

.lp-tgl-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: left 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 1;
}

html.lp-dark-mode .lp-tgl-knob {
    left: 44px;
}

html.lp-dark-mode .lp-tgl-sun-icon {
    color: var(--dark);
    opacity: 0.3;
}

html.lp-dark-mode .lp-tgl-moon-icon {
    color: var(--accent-color);
    opacity: 1;
}

html.lp-dark-mode .lp-theme-btn {
    background: var(--primary-dark-color);
    border-color: var(--primary-color);
}

/* ---- Left Panel ---- */
.lp-left {
    flex: 0 0 55%;
    max-width: 55%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 60px 40px;
    background: transparent;
    animation: lpFadeUp 0.6s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- 3D Overlapping Wave Ribbon Shape (Top-Left) ---- */
@keyframes lpWaveFloat {

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

    50% {
        transform: translate(4px, 8px) rotate(1.5deg);
    }
}

.lp-deco-waves {
    position: absolute;
    top: -140px;
    left: -140px;
    width: 360px;
    height: 360px;
    pointer-events: none;
    z-index: 1;
    animation: lpWaveFloat 8s ease-in-out infinite;
}

.lp-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 100% 100% / 0 0 110% 110%;
    border-bottom: 4px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
    box-shadow: 2px 8px 24px rgba(0, 0, 0, 0.06);
    transform-origin: top left;
}

.lp-wave-1 {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    transform: rotate(-50deg);
    z-index: 1;
}

.lp-wave-2 {
    background: color-mix(in srgb, var(--primary-dark-color) 14%, transparent);
    transform: rotate(-41deg);
    z-index: 2;
}

.lp-wave-3 {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    transform: rotate(-32deg);
    z-index: 3;
}

.lp-wave-4 {
    background: color-mix(in srgb, var(--primary-dark-color) 14%, transparent);
    transform: rotate(-23deg);
    z-index: 4;
}

.lp-wave-5 {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    transform: rotate(-14deg);
    z-index: 5;
}

/* ---- Hollow Circles Decos ---- */
.lp-deco-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.lp-circle-1 {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--accent-color);
    opacity: 0.6;
    top: 200px;
    right: 80px;
    animation: lpCircleFloat1 6s ease-in-out infinite alternate;
}

.lp-circle-2 {
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--accent-color);
    opacity: 0.6;
    bottom: 60px;
    right: 140px;
    animation: lpCircleFloat2 8s ease-in-out infinite alternate;
}

.lp-circle-3 {
    width: 60px;
    height: 60px;
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    bottom: 240px;
    right: 60px;
    opacity: 0.3;
    animation: lpCircleFloat3 7s ease-in-out infinite alternate;
}

/* ---- Left Panel Content ---- */
.lp-left-content {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.lp-brand {
    position: absolute;
    top: 50px;
    left: 270px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 5;
    animation: lpFadeUp 0.45s 0.28s both;
}

.lp-brand-logo {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.lp-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-brand-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lp-brand-name {
    font-size: 27px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
}

.lp-brand-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--black-color);
    opacity: 0.6;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* Headings */
.lp-left-heading {
    margin-top: auto;
    margin-bottom: 32px;
    animation: lpFadeUp 0.45s 0.35s both;
}

.lp-heading-main {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.lp-heading-highlight {
    color: var(--accent-color);
}

.lp-heading-accent {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.lp-left-desc {
    font-size: 14px;
    color: var(--black-color);
    opacity: 0.7;
    line-height: 1.6;
    max-width: 440px;
    margin: 0;
}

/* Features */
.lp-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-features li {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.lp-feat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.lp-features li:hover .lp-feat-icon {
    background: var(--primary-color);
    color: var(--white-color);
    transform: scale(1.05);
}

.lp-features li:nth-child(1) {
    animation: lpFadeUp 0.35s 0.42s both;
}

.lp-features li:nth-child(2) {
    animation: lpFadeUp 0.35s 0.49s both;
}

.lp-features li:nth-child(3) {
    animation: lpFadeUp 0.35s 0.56s both;
}

.lp-features li:nth-child(4) {
    animation: lpFadeUp 0.35s 0.63s both;
}

.lp-features li:nth-child(5) {
    animation: lpFadeUp 0.35s 0.70s both;
}

/* ---- Center Curved Separator ---- */
.lp-curved-separator {
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: calc(20% + 25px);
    width: 32%;
    border-radius: 50%;
    border-right: 5px solid var(--accent-color);
    pointer-events: none;
    z-index: 10;
    animation: lpFadeIn 0.7s 0.22s both;
    filter: drop-shadow(15px 0 25px color-mix(in srgb, var(--primary-color) 20%, transparent)) drop-shadow(-15px 0 25px color-mix(in srgb, var(--primary-color) 20%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent-color) 30%, transparent));
}

.lp-curved-separator::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -2px;
    border-radius: 50%;
    border-right: 8px solid var(--accent-color);
    opacity: 0.35;
    filter: blur(4px);
    pointer-events: none;
    z-index: -1;
}

.lp-curved-separator::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    border-right: 1.5px solid color-mix(in srgb, var(--accent-color) 40%, rgb(var(--black-rgb)));
    pointer-events: none;
    z-index: 2;
}

/* ---- Right Panel ---- */
.lp-right {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: transparent;
    position: relative;
    z-index: 2;
}

/* Elevated glass/white card */
.lp-card-outer {
    width: 100%;
    max-width: 450px;
    /* background: var(--white-color); */
    border-radius: 28px;
    padding: 40px 35px;
    /* box-shadow: 0 12px 30px color-mix(in srgb, var(--primary-color) 6%, transparent),
                0 4px 12px color-mix(in srgb, var(--primary-color) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 5%, transparent); */
    animation: lpSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lp-card-head {
    margin-bottom: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-panel-label {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.lp-card-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.lp-card-sub {
    font-size: 14px;
    color: var(--black-color);
    opacity: 0.6;
    margin: 0;
    line-height: 1.4;
}

.lp-card-sub-link {
    color: var(--accent-color) !important;
    font-weight: 600;
    text-decoration: none;
}

.lp-card-sub-link:hover {
    text-decoration: underline;
}

.lp-card-outer hr {
    border-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
    margin-top: 16px;
    margin-bottom: 0;
}

.lp-card-outer h6 {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--primary-color);
    opacity: 0.65;
}

/* Fields */
.lp-field {
    margin-bottom: 20px;
}

.lp-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.lp-input-wrap {
    position: relative;
}

.lp-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    font-size: 15px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.25s ease;
}

.lp-input-wrap::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 1;
    transition: background 0.25s ease;
}

.lp-input-wrap:has(.lp-input:focus) .lp-input-icon {
    color: var(--accent-color);
}

.lp-input-wrap:has(.lp-input:focus)::after {
    background: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

.lp-input {
    height: 50px !important;
    background: transparent !important;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    border-radius: 12px !important;
    padding-left: 54px !important;
    font-size: 14px !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.lp-input::placeholder {
    color: var(--primary-color);
    opacity: 0.4;
}

.lp-input:hover {
    background: var(--assest-color) !important;
}

.lp-input:focus {
    background: var(--assest-color) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 15%, transparent) !important;
    outline: none !important;
}

.lp-input-pass {
    padding-right: 48px !important;
}

.lp-eye-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--primary-color);
    opacity: 0.5;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 6px;
    transition: opacity 0.2s;
    z-index: 2;
}

.lp-eye-btn:hover {
    opacity: 0.8;
}

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

/* Button */
.lp-submit-btn {
    width: 100%;
    height: 52px;
    margin-top: 24px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    border: none;
    border-radius: 50px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 24px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.lp-submit-btn:hover:not(:disabled) {
    opacity: 0.95;
    transform: translateY(-1px);
    color: var(--white-color);
}

.lp-submit-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.lp-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lp-submit-btn:focus {
    outline: none;
}

.lp-submit-btn:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-dark-color) 30%, transparent);
}

.lp-btn-text {
    flex: 1;
    text-align: center;
}

.lp-btn-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--white-color) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    color: var(--white-color);
    transition: all 0.2s ease;
}

/* Ripple */
.lp-ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--white-color);
    opacity: 0.3;
    width: 70px;
    height: 70px;
    pointer-events: none;
    transform: scale(0);
    animation: lpRipple 0.65s linear forwards;
}

/* Dots bounce */
.lp-btn-dots {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lp-btn-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--white-color);
    display: inline-block;
    animation: lpDotBounce 1.2s ease-in-out infinite;
}

.lp-btn-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.lp-btn-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Animations */
.lp-anim-1 {
    animation: lpFadeUp 0.4s 0.15s both;
}

.lp-anim-2 {
    animation: lpFadeUp 0.4s 0.25s both;
}

.lp-anim-4 {
    animation: lpFadeUp 0.4s 0.45s both;
}

/* ---- Demo Credentials ---- */
.lp-demo-creds {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.lp-demo-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.lp-demo-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 9px;
    flex-shrink: 0;
}

.lp-demo-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary-color);
    opacity: 0.50;
}

.lp-demo-admin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
}

.lp-demo-admin-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.lp-demo-admin-cred {
    /* display: flex; */
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.lp-demo-admin-cred i {
    font-size: 11.5px;
    color: var(--primary-color);
    opacity: 0.4;
}

.lp-demo-admin-dot {
    color: var(--primary-color);
    opacity: 0.25;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.lp-demo-fill-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.22s ease;
}

.lp-demo-fill-btn:hover {
    background: var(--accent-color);
    color: var(--white-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.lp-demo-fill-btn:focus {
    outline: none;
}

.lp-demo-fill-btn.lp-demo-filled {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.35);
    cursor: default;
}

.lp-demo-role-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-color);
    flex: 1;
}

/* ---- Dark Mode Overrides ---- */
html.lp-dark-mode .lp-deco-dots {
    background-image: radial-gradient(circle, var(--black-color) 1.5px, transparent 1.5px);
    opacity: 0.25;
}

html.lp-dark-mode .lp-deco-circle {
    opacity: 0.4;
}

html.lp-dark-mode .lp-wave {
    border-bottom-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
    box-shadow: 2px 8px 24px color-mix(in srgb, var(--accent-color) 8%, transparent);
}

html.lp-dark-mode .lp-wave-1,
html.lp-dark-mode .lp-wave-3,
html.lp-dark-mode .lp-wave-5 {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

html.lp-dark-mode .lp-wave-2,
html.lp-dark-mode .lp-wave-4 {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
}

html.lp-dark-mode .lp-brand-name {
    color: var(--black-color);
}

html.lp-dark-mode .lp-brand-tag {
    color: var(--black-color);
    opacity: 0.8;
}

html.lp-dark-mode .lp-heading-main {
    color: var(--black-color);
}

html.lp-dark-mode .lp-left-desc {
    color: var(--black-color);
    opacity: 0.8;
}

html.lp-dark-mode .lp-features li {
    color: var(--black-color);
}

html.lp-dark-mode .lp-feat-icon {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
    color: var(--black-color);
}

html.lp-dark-mode .lp-features li:hover .lp-feat-icon {
    background: var(--black-color);
    color: var(--white-color);
}

html.lp-dark-mode .lp-panel-label {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
    color: var(--black-color);
}

html.lp-dark-mode .lp-card-title {
    color: var(--black-color);
}

html.lp-dark-mode .lp-card-sub {
    color: var(--black-color);
    opacity: 0.7;
}

html.lp-dark-mode .lp-label {
    color: var(--black-color);
}

html.lp-dark-mode .lp-input-icon {
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
}

html.lp-dark-mode .lp-input-wrap::after {
    background: color-mix(in srgb, var(--black-color) 22%, transparent);
}

html.lp-dark-mode .lp-input-wrap:has(.lp-input:focus) .lp-input-icon {
    color: var(--accent-color);
}

html.lp-dark-mode .lp-input-wrap:has(.lp-input:focus)::after {
    background: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

html.lp-dark-mode .lp-input {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--black-color) 22%, transparent) !important;
    color: var(--black-color) !important;
}

html.lp-dark-mode .lp-input::placeholder {
    color: var(--black-color);
    opacity: 0.35;
}

html.lp-dark-mode .lp-input:hover {
    background: var(--assest-color) !important;
}

html.lp-dark-mode .lp-input:focus {
    background: var(--assest-color) !important;
    border-color: var(--accent-color) !important;
}

html.lp-dark-mode .lp-eye-btn {
    color: var(--black-color);
}

html.lp-dark-mode .lp-check-label {
    color: var(--black-color);
}

html.lp-dark-mode .lp-submit-btn,
[data-theme="dark"] .lp-submit-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--black-color);
}

html.lp-dark-mode .lp-submit-btn:hover:not(:disabled) {
    color: var(--black-color);
}

html.lp-dark-mode .lp-btn-arrow {
    background: color-mix(in srgb, var(--black-color) 20%, transparent);
    color: var(--black-color);
}

html.lp-dark-mode .lp-curved-separator {
    filter: drop-shadow(15px 0 30px color-mix(in srgb, var(--accent-color) 25%, transparent)) drop-shadow(-15px 0 30px color-mix(in srgb, var(--accent-color) 25%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

html.lp-dark-mode .lp-demo-creds {
    border-top-color: color-mix(in srgb, var(--black-color) 12%, transparent);
}

html.lp-dark-mode .lp-demo-title {
    color: var(--black-color);
    opacity: 0.6;
}

html.lp-dark-mode .lp-demo-admin-card {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

html.lp-dark-mode .lp-demo-admin-cred {
    color: var(--black-color);
}

html.lp-dark-mode .lp-demo-admin-cred i {
    color: var(--black-color);
    opacity: 0.4;
}

html.lp-dark-mode .lp-demo-admin-dot {
    color: var(--black-color);
    opacity: 0.3;
}

html.lp-dark-mode .lp-card-outer hr {
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

html.lp-dark-mode .lp-card-outer h6 {
    color: var(--black-color);
    opacity: 0.65;
}

html.lp-dark-mode .lp-demo-role-name {
    color: var(--black-color);
}

/* Keyframes */
@keyframes lpFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lpParticleFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(8px, -10px);
    }

    66% {
        transform: translate(-6px, 6px);
    }
}

@keyframes lpGlowPulse {

    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}

@keyframes lpBubbleRise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 0.65;
    }

    30% {
        transform: translateY(-28vh) translateX(7px);
    }

    65% {
        transform: translateY(-65vh) translateX(-5px);
        opacity: 0.22;
    }

    100% {
        transform: translateY(-108vh) translateX(3px);
        opacity: 0;
    }
}

@keyframes lpSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes lpFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes lpDotBounce {

    0%,
    80%,
    100% {
        transform: scale(0.7);
        opacity: 0.5;
    }

    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes lpRipple {
    to {
        transform: scale(4.5);
        opacity: 0;
    }
}

/* Shared ripple for common admin buttons (cat-btn-prim / sec / danger) */
@keyframes catBtnRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.35;
    }

    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

@keyframes lpCircleFloat1 {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.60;
    }

    100% {
        transform: translateY(-10px) scale(1.05);
        opacity: 0.44;
    }
}

@keyframes lpCircleFloat2 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.60;
    }

    100% {
        transform: translate(7px, -9px) scale(1.04);
        opacity: 0.42;
    }
}

@keyframes lpCircleFloat3 {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.30;
    }

    100% {
        transform: translateY(11px) scale(1.07);
        opacity: 0.16;
    }
}

/* ---- Responsive Breakpoints ---- */
@media (max-width: 1200px) {
    .lp-left {
        padding: 50px 40px 30px;
    }

    .lp-brand {
        top: 50px;
        left: 240px;
    }

    .lp-heading-main,
    .lp-heading-accent {
        font-size: 30px;
    }

    .lp-dots-top {
        left: 280px;
    }
}

@media (max-width: 1100px) {
    .lp-left {
        padding: 0px 40px 30px;
    }

    .lp-brand {
        top: 45px;
        left: 175px;
    }

    .lp-heading-main,
    .lp-heading-accent {
        font-size: 28px;
    }
}

/* Tablet: keep both panels, compact sizes */
@media (max-width: 991px) {
    .lp-wrap {
        padding: 20px 16px;
    }

    .lp-container {
        min-height: 640px;
        border-radius: 24px;
    }

    .lp-left {
        display: flex !important;
        flex-direction: column;
        padding: 28px 24px 24px;
    }

    .lp-brand {
        top: 28px;
        left: 130px;
    }

    .lp-brand-logo {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .lp-brand-name {
        font-size: 18px;
    }

    .lp-brand-tag {
        font-size: 10px;
    }

    .lp-heading-main,
    .lp-heading-accent {
        font-size: 20px;
    }

    .lp-left-desc {
        font-size: 12px;
        max-width: 280px;
    }

    .lp-features {
        gap: 10px;
    }

    .lp-features li {
        font-size: 12px;
        gap: 10px;
    }

    .lp-feat-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .lp-right {
        flex: 0 0 48%;
        max-width: 48%;
        padding: 28px 20px;
    }

    .lp-card-outer {
        padding: 32px 24px;
    }

    .lp-card-title {
        font-size: 24px;
    }
}

/* Mobile: hide left panel, show only login form */
@media (max-width: 768px) {
    .lp-wrap {
        padding: 24px 16px;
    }

    .lp-container {
        min-height: auto;
        border-radius: 20px;
    }

    .lp-left {
        display: none !important;
    }

    .lp-curved-separator {
        display: none;
    }

    .lp-right {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-height: calc(100vh - 48px);
        padding: 40px 24px;
    }

    .lp-card-outer {
        max-width: 520px;
        padding: 40px 32px;
    }
}

/* Small mobile: edge-to-edge */
@media (max-width: 575px) {
    .lp-wrap {
        padding: 0;
    }

    .lp-container {
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
    }

    .lp-right {
        padding: 24px 16px;
        min-height: 100vh;
    }

    .lp-card-outer {
        max-width: 100%;
        padding: 32px 20px;
        border-radius: 16px;
    }

    .lp-card-title {
        font-size: 28px;
    }
}

/* ==========================================================================
   Dashboard Header — Premium SaaS Redesign
========================================================================== */

/* ---- Container ---- */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 28px;
    height: 76px;
    background: var(--assest-color);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--primary-color) 4%, transparent),
        0 4px 20px color-mix(in srgb, var(--primary-color) 5%, transparent);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    margin: 0;
    border-radius: 0;
}

/* ---- Left: Title + Greeting ---- */
.header .title-control {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.header .title-control .side-toggle {
    display: none;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-right: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.header .title-control .side-toggle:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    transform: translateY(-1px);
}

.header .side-logo {
    display: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--black-color);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.header .side-logo h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.header .side-logo:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.header-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.header .page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--black-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    line-height: 1;
}

.page-welcome {
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    white-space: nowrap;
}

.page-meta-sep {
    font-size: 11px;
    color: color-mix(in srgb, var(--black-color) 25%, transparent);
    flex-shrink: 0;
}

.page-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: color-mix(in srgb, var(--black-color) 40%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Right: Actions Row ---- */
.header .head-control {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ---- Demo Mode Pill ---- */
.demo-mode-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    color: var(--accent-color);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: default;
}

.demo-mode-box:hover {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    transform: translateY(-1px);
}

.demo-mode-box i {
    font-size: 12.5px;
}

/* ---- Base action button (icon-only) ---- */
.head-icon-btn {
    width: 37px;
    height: 37px;
    padding: 0;
    border-radius: 10px;
    background: var(--primary-bg);
    border: 1px solid color-mix(in srgb, var(--primary-bg) 8%, transparent);
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.head-icon-btn:hover {
    border-color: color-mix(in srgb, var(--primary-bg) 16%, transparent);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 9%, transparent);
    text-decoration: none;
}

.head-icon-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

/* Override .head-btn for all header buttons */
.header .head-btn {
    box-shadow: none !important;
    margin-left: 0 !important;
    overflow: visible;
}

.header .head-btn i.fa-2xl,
.header .head-btn .fa-2xl {
    font-size: 15px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.header .head-btn .primary-color {
    color: inherit !important;
}

/* ---- Language Button ---- */
.head-lang-btn {
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 0 14px !important;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: color-mix(in srgb, var(--black-color) 65%, transparent) !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.head-lang-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 11%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 9%, transparent);
    text-decoration: none;
}

.head-lang-icon {
    font-size: 17px;
    flex-shrink: 0;
}

.head-lang-text {
    font-size: 14px;
    font-weight: 600;
}

.head-caret {
    font-size: 9px !important;
    opacity: 0.55;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.dropdown.show .head-caret {
    transform: rotate(180deg);
}

/* ---- Profile Button ---- */
.head-profile-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 6px !important;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--black-color) !important;
    text-decoration: none;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.head-profile-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 16%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 9%, transparent);
    text-decoration: none;
    color: var(--black-color) !important;
}

/* ---- Avatar (small) ---- */
.head-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* ---- Avatar (large — inside profile card in dropdown) ---- */
.head-avatar-lg {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
}

/* ---- Profile name + role in button ---- */
.head-profile-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

.head-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    display: block;
    line-height: 1.2;
}

.head-profile-role {
    font-size: 10.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
    white-space: nowrap;
    display: block;
    line-height: 1;
    letter-spacing: 0.2px;
}

/* ---- Dropdown Menus ---- */
.head-dropdown-menu {
    min-width: 200px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent) !important;
    background: color-mix(in srgb, var(--white-color) 90%, transparent) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 4px 6px color-mix(in srgb, var(--primary-color) 18%, transparent),
        0 10px 30px color-mix(in srgb, var(--primary-color) 28%, transparent),
        0 1px 0 color-mix(in srgb, var(--primary-color) 18%, transparent) inset !important;
    margin-top: 8px !important;
    animation: headDropIn 0.18s ease;
}

@keyframes headDropIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

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

/* Profile card inside dropdown */
.head-profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
}

.head-profile-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.head-profile-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--black-color);
    display: block;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.head-profile-card-role {
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
    display: block;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Divider */
.head-divider {
    margin: 4px 0 !important;
    border-color: color-mix(in srgb, var(--primary-color) 7%, transparent) !important;
}

/* Dropdown items */
.head-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 9px 12px !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--black-color) !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.head-dropdown-item i {
    width: 15px;
    font-size: 13px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.18s ease;
}

.head-dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent) !important;
    color: var(--primary-color) !important;
}

.head-dropdown-item:hover i {
    opacity: 1;
}

/* Language active item */
.head-item-check {
    font-size: 10px;
    width: 14px;
    opacity: 0;
    flex-shrink: 0;
}

.head-item-active .head-item-check {
    opacity: 1;
    color: var(--primary-color);
}

/* Logout item — danger hover */
.head-logout-item:hover {
    background: color-mix(in srgb, var(--red) 8%, transparent) !important;
    color: var(--red) !important;
}

.head-logout-item:hover i {
    opacity: 1;
    color: var(--red);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] .head-icon-btn,
[data-theme="dark"] .head-lang-btn,
[data-theme="dark"] .head-profile-btn {
    background: color-mix(in srgb, var(--black-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 30%, transparent);
}

[data-theme="dark"] .head-icon-btn:hover,
[data-theme="dark"] .head-lang-btn:hover,
[data-theme="dark"] .head-profile-btn:hover {
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
    color: var(--accent-color) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* [data-theme="dark"] .head-dropdown-menu — handled via global vars in .head-dropdown-menu */

[data-theme="dark"] .head-dropdown-item {
    color: var(--black-color) !important;
}

[data-theme="dark"] .head-dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
    color: var(--accent-color) !important;
}

[data-theme="dark"] .head-logout-item:hover {
    background: color-mix(in srgb, var(--red) 12%, transparent) !important;
    color: var(--red) !important;
}

[data-theme="dark"] .head-divider {
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}

[data-theme="dark"] .demo-mode-box {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

/* ── ≤1366px: Tighten layout, collapse panel-switcher to icon-only ────────── */
@media (max-width: 1366px) {
    .header {
        padding: 0 20px;
        gap: 8px;
    }

    .header .head-control {
        gap: 4px;
    }

    .head-panel-text {
        display: none;
    }

    .head-panel-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center;
        gap: 0 !important;
    }

    .head-profile-name {
        max-width: 90px;
    }
}

/* ── ≤1200px: Start hiding secondary profile text ─────────────────────────── */
@media (max-width: 1200px) {
    .header {
        padding: 0 16px;
    }

    .head-profile-role {
        display: none;
    }

    .head-profile-name {
        max-width: 80px;
    }
}

/* ── ≤1100px: Collapse lang to icon-only, hide caret & demo badge ─────────── */
@media (max-width: 1100px) {
    .head-lang-text {
        display: none;
    }

    .head-lang-btn {
        width: 38px;
        padding: 0 !important;
        justify-content: center;
        gap: 0;
    }

    .head-lang-icon {
        font-size: 16px;
    }

    .head-caret {
        display: none;
    }

    .head-profile-name {
        max-width: 70px;
    }

    .demo-mode-box {
        display: none;
    }
}

/* ── ≤991px: Tablet — sidebar becomes overlay, full-width header ──────────── */
@media (max-width: 991px) {
    .header {
        height: 62px;
        padding: 0 16px;
        gap: 6px;
    }

    .header .title-control {
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .header .title-control .side-toggle {
        display: flex !important;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
    }

    /* Override old CSS that gave side-logo a fixed 160px width */
    .header .side-logo {
        display: block;
        width: auto;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-title-group {
        display: none;
    }

    .head-icon-btn,
    .head-lang-btn {
        width: 38px;
        height: 38px;
    }

    .head-profile-info {
        display: none;
    }

    .head-profile-btn {
        padding: 0 !important;
        width: 38px;
        height: 38px;
        justify-content: center;
    }

    .head-avatar {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        font-size: 12px;
    }

    .header .head-control {
        gap: 3px;
        flex-shrink: 0;
    }

    .demo-mode-box {
        display: none;
    }
}

/* ── ≤767px: Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .header {
        height: 58px;
        padding: 0 12px;
    }

    .header .title-control {
        gap: 8px;
    }

    .head-icon-btn,
    .head-lang-btn {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    .head-profile-btn {
        width: 36px;
        height: 36px;
    }

    .head-avatar {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 11px;
    }

    .head-icon-btn i,
    .head-icon-btn .fa-2xl {
        font-size: 14px !important;
    }

    .header .head-control {
        gap: 3px;
    }
}

/* ── ≤575px: Small Mobile ────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .header {
        padding: 0 10px;
        gap: 4px;
    }

    .header .title-control {
        gap: 6px;
        min-width: 0;
    }

    .header .side-logo {
        max-width: 90px;
    }

    .header .side-logo h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
    }

    .header .head-control {
        gap: 2px;
        flex-shrink: 0;
    }

    .head-icon-btn,
    .head-lang-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .head-profile-btn {
        width: 34px;
        height: 34px;
    }

    .head-sep {
        display: none;
    }
}

/* ── ≤380px: Extra Small Mobile ─────────────────────────────────────────── */
@media (max-width: 380px) {
    .header {
        padding: 0 8px;
        gap: 3px;
    }

    .header .title-control {
        gap: 4px;
    }

    .head-icon-btn,
    .head-lang-btn {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }

    .head-profile-btn {
        width: 32px;
        height: 32px;
    }

    .head-avatar {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}

/* ==========================================================================
   Dashboard Header — End
========================================================================== */

/* ===========================================================
   Header Language Selector
=========================================================== */

/* Language menu container */
.head-lang-menu {
    min-width: 180px !important;
    padding: 6px !important;
}

/* Language item row */
.head-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--black-color);
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.head-lang-item:last-child {
    margin-bottom: 0;
}

/* Hover */
.head-lang-item:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    transform: translateX(-2px);
    text-decoration: none;
}

/* Globe icon per item */
.head-lang-item-icon {
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.head-lang-item:hover .head-lang-item-icon {
    opacity: 1;
}

/* Language name */
.head-lang-item-text {
    flex: 1;
    min-width: 0;
}

/* Check icon — hidden by default, visible on active */
.head-lang-item-check {
    font-size: 10px;
    flex-shrink: 0;
    opacity: 0;
    color: var(--accent-color);
    transition: opacity 0.2s ease;
}

/* Active language item */
.head-lang-active {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-color);
    font-weight: 700;
    border-radius: 8px;
}

.head-lang-active .head-lang-item-icon {
    opacity: 1;
    color: var(--accent-color);
}

.head-lang-active .head-lang-item-check {
    opacity: 1;
    color: var(--accent-color);
}

/* ===========================================================
   Header Profile Section
=========================================================== */

/* Profile button: circular avatar + text + caret */
.head-profile-btn {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    padding: 5px 14px 5px 6px !important;
    height: 46px !important;
    border-radius: 12px !important;
}

/* Avatar: perfectly circular */
.head-avatar {
    border-radius: 50% !important;
}

.head-avatar-lg {
    border-radius: 14px !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 19px !important;
}

/* Profile card top */
.head-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
    margin-bottom: 6px;
}

.head-profile-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--black-color);
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: block;
}

.head-profile-card-role {
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: block;
}

/* Profile menu body */
.head-profile-menu-body {
    padding: 0 6px;
}

/* Profile menu footer (logout) */
.head-profile-menu-footer {
    padding: 6px 6px 4px;
    margin-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
}

/* Profile item rows */
.head-profile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--black-color);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    margin-bottom: 2px;
}

.head-profile-item:last-child {
    margin-bottom: 0;
}

/* Hover */
.head-profile-item:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    transform: translateX(-2px);
    text-decoration: none;
}

/* Icon container */
.head-pi-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    flex-shrink: 0;
    font-size: 12px;
    color: inherit;
    transition: background 0.2s ease;
}

.head-profile-item:hover .head-pi-icon {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.head-pi-text {
    flex: 1;
    min-width: 0;
}

/* Logout item — --red changes value between light/dark automatically */
.head-pi-logout {
    color: color-mix(in srgb, var(--red) 75%, transparent);
}

.head-pi-logout .head-pi-icon {
    background: color-mix(in srgb, var(--red) 8%, transparent);
    color: color-mix(in srgb, var(--red) 75%, transparent);
}

.head-pi-logout:hover {
    background: color-mix(in srgb, var(--red) 10%, transparent) !important;
    color: var(--red) !important;
    transform: translateX(-2px);
}

.head-pi-logout:hover .head-pi-icon {
    background: color-mix(in srgb, var(--red) 16%, transparent) !important;
    color: var(--red) !important;
}

/* Profile menu width */
.head-profile-menu {
    min-width: 220px !important;
}

/* All [data-theme="dark"] .head-profile-* — handled via global vars in component rules above. */

/* Responsive: hide lang text on tablet */
@media (max-width: 991px) {
    .head-lang-menu {
        min-width: 160px !important;
    }

    .head-profile-menu {
        min-width: 200px !important;
    }

    .head-profile-btn {
        padding: 5px !important;
        width: 42px !important;
        height: 42px !important;
        gap: 0 !important;
        justify-content: center;
        border-radius: 50% !important;
    }

    .head-profile-btn .head-profile-info,
    .head-profile-btn .head-caret {
        display: none;
    }
}

/* ===========================================================
   Header — Layout Alignment Fix
=========================================================== */

/* Header Layout — consistent gap */
.header .head-control {
    gap: 10px !important;
}

/* All Action Buttons — unified 44px height */
/* Language Selector — prevent text truncation */
.head-lang-btn {
    min-width: 152px !important;
    flex-shrink: 0 !important;
}

/* Profile Button — prevent compression */
.head-profile-btn {
    height: 44px !important;
    min-width: 200px !important;
    flex-shrink: 0 !important;
}

/* Profile Name — never clip */
.head-profile-name {
    max-width: none !important;
}

/* Override 1280px responsive clipping rule */
@media (max-width: 1280px) {
    .head-profile-name {
        max-width: none !important;
    }

    .head-profile-btn {
        min-width: 185px !important;
    }
}

/* Responsive: Tablet ≤991px — reset min-widths for icon-only layout */
@media (max-width: 991px) {
    .header .head-control {
        gap: 6px !important;
    }

    .head-icon-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .head-lang-btn {
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .head-profile-btn {
        min-width: 0 !important;
        width: 44px !important;
        height: 44px !important;
    }

    .head-profile-name {
        max-width: none !important;
    }
}

/* Responsive: Mobile ≤767px */
@media (max-width: 767px) {
    .head-icon-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .head-lang-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .head-profile-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Responsive: Small Mobile ≤575px */
@media (max-width: 575px) {
    .header .head-control {
        gap: 4px !important;
    }

    .head-icon-btn,
    .head-lang-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .head-profile-btn {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ===========================================================
   Header — Layout Alignment Fix — End
=========================================================== */

/* ===========================================================
   Header — Dropdown Position & Width Fix
=========================================================== */

/* Pure fade + scale — no translateY so the menu never flashes above the button.
   data-display="static" on both triggers disables Popper.js entirely so CSS
   position:absolute + margin-top:8px is the sole positioning mechanism. */
@keyframes headDropIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

/* Scale should originate from the top-right edge (menus are right-aligned) */
.head-dropdown-menu {
    transform-origin: top right;
}

/* Language — content-driven width, no forced minimum */
.head-lang-btn {
    width: auto !important;
    min-width: 0 !important;
}

/* Profile — content-driven width, no forced minimum */
.head-profile-btn {
    width: auto !important;
    min-width: 0 !important;
}

/* Profile name in button — cap at 150px so long names don't stretch the header */
.head-profile-name {
    max-width: 150px !important;
}

@media (max-width: 1280px) {
    .head-profile-name {
        max-width: 120px !important;
    }
}

/* ===========================================================
   Header — Dropdown Position & Width Fix — End
=========================================================== */

/* ===========================================================
   Header — Dropdown Fixed Positioning
   Fix: dropdown must open below the trigger, never overlap it.
   Bootstrap margin-top is unreliable with Popper; we use
   position:absolute + top:calc(100% + 8px) directly.
=========================================================== */

/* Trigger container must be the positioning anchor */
.header .dropdown {
    position: relative !important;
}

/* Dropdown menu — absolute, anchored below trigger, above all content */
.header .head-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    margin-top: 0 !important;
    z-index: 1055 !important;
    display: none;
}

.header .head-dropdown-menu.show {
    display: block !important;
}

/* Language dropdown — left-aligned to button left edge */
.header .head-lang-menu {
    left: 0 !important;
    right: auto !important;
    transform-origin: top left;
}

/* Profile dropdown — right-aligned to button right edge */
.header .head-profile-menu {
    right: 0 !important;
    left: auto !important;
    transform-origin: top right;
}

/* Animation — opacity + scale only, zero position change */
@keyframes headDropIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

/* ===========================================================
   Header — Dropdown Fixed Positioning — End
=========================================================== */

/* ===========================================================
   Header — Dropdown Flicker Fix
   Root cause: Bootstrap toggles display:none→block which causes
   a render frame at the wrong position before animation runs.
   Fix: always keep the menu in layout (display:block) so the
   browser pre-calculates position. Visibility is controlled via
   opacity + visibility only — zero layout shift on open.
=========================================================== */

/* Always in layout — position is pre-calculated, never jumps */
.header .head-dropdown-menu {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.96) !important;
    /* visibility delay matches duration so menu stays hidden until fade-out completes */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
    animation: none !important;
}

/* On open: snap visibility immediately, then fade + scale in */
.header .head-dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s !important;
}

/* ===========================================================
   Header — Dropdown Flicker Fix — End
=========================================================== */

/* ===========================================================
   Header Panel Switcher
=========================================================== */

/* Panel Switcher Button */
.head-panel-btn {
    display: flex !important;
    align-items: center;
    gap: 7px !important;
    padding: 5px 12px !important;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--black-color) !important;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.head-panel-btn:hover,
.head-panel-btn:focus {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--black-color) !important;
    text-decoration: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.head-panel-icon {
    font-size: 15px;
    flex-shrink: 0;
    opacity: 0.8;
}

.head-panel-text {
    font-size: 13px;
    font-weight: 500;
}

/* Panel Switcher Dropdown */
.head-panel-menu {
    min-width: 240px !important;
    padding: 6px !important;
}

/* Panel Item */
.head-panel-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.18s ease;
    margin-bottom: 2px;
}

.head-panel-item:last-child {
    margin-bottom: 0;
}

.head-panel-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    font-size: 15px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.head-panel-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.head-panel-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
    display: block;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.head-panel-ext-icon {
    font-size: 12px;
    color: color-mix(in srgb, var(--black-color) 35%, transparent);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

/* Hover Effects */
.head-panel-item:hover {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    transform: translateX(-2px);
    text-decoration: none;
}

.head-panel-item:hover .head-panel-item-icon {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.head-panel-item:hover .head-panel-item-title {
    color: var(--accent-color);
}

.head-panel-item:hover .head-panel-ext-icon {
    color: var(--accent-color);
}

/* Header Divider */
.head-sep {
    width: 1px;
    height: 26px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    flex-shrink: 0;
    border-radius: 1px;
    align-self: center;
}

/* Dark Mode */
[data-theme="dark"] .head-panel-btn {
    background: color-mix(in srgb, var(--black-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 30%, transparent);
}

[data-theme="dark"] .head-panel-btn:hover,
[data-theme="dark"] .head-panel-btn:focus {
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
    color: var(--accent-color) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

[data-theme="dark"] .head-sep {
    background: color-mix(in srgb, var(--black-color) 20%, transparent);
}

/* Responsive — sizes kept in sync with header responsive section */
@media (max-width: 1366px) {
    .head-panel-text {
        display: none;
    }

    .head-panel-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center;
        gap: 0 !important;
    }
}

@media (max-width: 991px) {
    .head-panel-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .head-sep {
        height: 22px;
    }
}

@media (max-width: 767px) {
    .head-panel-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9px;
    }

    .head-sep {
        height: 20px;
    }
}

@media (max-width: 575px) {
    .head-panel-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px;
    }

    .head-sep {
        display: none;
    }
}

@media (max-width: 380px) {
    .head-panel-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 7px;
    }
}

/* ===========================================================
   Header Panel Switcher — End
=========================================================== */

/* ===========================================================
   Header — Responsive Cascade Fix
   Resolves !important conflicts from "Layout Alignment Fix"
   and "Dropdown Position Fix" sections. These rules appear
   last in the file so they win the cascade at every breakpoint.
=========================================================== */

/* Ensure head-control never overflows; title section absorbs remaining space */
.header .head-control {
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow: visible;
}

.header .title-control {
    overflow: hidden;
}

/* ≤1366px: Laptop — override the base 10px !important gap from LAF */
@media (max-width: 1366px) {
    .header .head-control {
        gap: 4px !important;
    }

    .head-profile-name {
        max-width: 90px !important;
    }

    .head-profile-btn .head-caret {
        display: none;
    }
}

/* ≤1200px: Tighten profile name further */
@media (max-width: 1200px) {
    .head-profile-name {
        max-width: 80px !important;
    }
}

/* ≤1100px: Lang collapses to icon-only — enforce minimum clickable size */
@media (max-width: 1100px) {
    .head-lang-btn {
        width: 38px !important;
        min-width: 38px !important;
    }

    .head-profile-name {
        max-width: 70px !important;
    }
}

/* ≤991px: All icon-only — fixed button sizes, override content-driven widths */
@media (max-width: 991px) {
    .header .head-control {
        gap: 3px !important;
    }

    .head-lang-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    .head-profile-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ≤767px: Mobile */
@media (max-width: 767px) {
    .head-lang-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .head-profile-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ≤575px: Small mobile */
@media (max-width: 575px) {
    .header .head-control {
        gap: 2px !important;
    }

    .head-lang-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .head-profile-btn {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ≤380px: Extra small */
@media (max-width: 380px) {
    .head-lang-btn {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }

    .head-profile-btn {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Profile dropdown: never overflow viewport on small screens */
@media (max-width: 575px) {
    .header .head-profile-menu {
        right: 0 !important;
        left: auto !important;
        min-width: 180px !important;
    }
}

/* ===========================================================
   Header — Responsive Cascade Fix — End
=========================================================== */

/* ==========================================================================
   Sidebar — Premium Redesign
   Overrides all prior sidebar rules via cascade order.
========================================================================== */

/* ===========================================================
   Sidebar Layout
=========================================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--assest-color);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 260px;
    max-width: 100%;
    z-index: 100;
    overflow: hidden;
    padding: 0;
    border-right: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    box-shadow: 2px 0 20px color-mix(in srgb, var(--primary-color) 6%, transparent);
    transition:
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease;
}

.right-content {
    margin-left: 260px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ===========================================================
   Sidebar Header
=========================================================== */

.sidebar .side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 16px;
    height: 72px;
    min-height: 72px;
    flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    gap: 8px;
    background: var(--assest-color);
    position: relative;
    z-index: 1;
}

/* Logo link */
.sidebar .side-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    width: auto;
    transition: opacity 0.18s ease;
}

.sidebar .side-logo:hover {
    opacity: 0.82;
    text-decoration: none;
}

/* Logo icon square */
.sb-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.sidebar .side-logo:hover .sb-logo-mark {
    transform: scale(1.05);
}

/* App logo image (replaces icon mark) */
.sb-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: cover;
}

/* Logo text */
.sb-logo-name {
    font-size: 19.5px;
    font-weight: 700;
    color: var(--black-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.3px;
    flex: 1;
    min-width: 0;
    transition: opacity 0.2s ease;
}

/* Sidebar Toggle */
.side-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 6px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    gap: 4px;
    outline: none;
    box-shadow: none;
    transition: background 0.2s ease;
}

.side-toggle:focus {
    outline: none;
    box-shadow: none;
}

.side-toggle:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.side-toggle span {
    background: color-mix(in srgb, var(--black-color) 58%, transparent);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    display: block;
    margin: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.side-toggle:hover span {
    background: var(--black-color);
}

/* ===========================================================
   Navigation Scroll Area
=========================================================== */
body::-webkit-scrollbar {
    width: 5px;
}

body::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) transparent;
}
.side-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 8px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 16%, transparent) transparent;
}

.side-nav::-webkit-scrollbar {
    width: 3px;
}

.side-nav::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    border-radius: 3px;
}

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

/* ===========================================================
   Navigation Menu
=========================================================== */

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

/* Icon sizes inside icon boxes */
.sidebar .side-menu .menu-icon,
.sidebar .side-menu .submenu-icon {
    font-size: 13px !important;
    width: auto;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
    display: block;
}

/* ── Icon Box — rounded square container for every menu icon ── */
.sb-icon-box {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.22s ease;
}

/* ── Sub Icon Box — smaller container for submenu icons ── */
.sb-sub-box {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.22s ease;
}

/* ── Dark mode icon boxes ── */
[data-theme="dark"] .sb-icon-box {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

[data-theme="dark"] .sb-sub-box {
    background: transparent;
}

/* Menu item link */
.sidebar .side-menu a,
.sidebar .side-menu .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 10px;
    border-radius: 10px;
    color: color-mix(in srgb, var(--black-color) 62%, transparent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

/* Hover */
.sidebar .side-menu a:hover,
.sidebar .side-menu .dropdown-toggle:hover {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    color: var(--black-color);
    text-decoration: none;
}

.sidebar .side-menu a:hover .sb-icon-box,
.sidebar .side-menu .dropdown-toggle:hover .sb-icon-box {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.sidebar .side-menu a:hover .sb-sub-box,
.sidebar .side-menu .dropdown-toggle:hover .sb-sub-box {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

[data-theme="dark"] .sidebar .side-menu a:hover .sb-icon-box,
[data-theme="dark"] .sidebar .side-menu .dropdown-toggle:hover .sb-icon-box {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .sidebar .side-menu a:hover .sb-sub-box,
[data-theme="dark"] .sidebar .side-menu .dropdown-toggle:hover .sb-sub-box {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/* No left accent bar — gradient active replaces it */
.sidebar .side-menu li>a::before,
.sidebar .side-menu li>.dropdown-toggle::before {
    display: none;
}

/* Active item — gradient background */
.sidebar .side-menu .active>a,
.sidebar .side-menu .active>.dropdown-toggle {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 32%, transparent);
}

.sidebar .side-menu .active>a:hover,
.sidebar .side-menu .active>.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--primary-dark-color) 0%, var(--primary-color) 100%);
    color: var(--accent-color);
    transform: none;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary-color) 40%, transparent);
    text-decoration: none;
}

/* Active icon box — blends into gradient */
.sidebar .side-menu .active>a .sb-icon-box,
.sidebar .side-menu .active>.dropdown-toggle .sb-icon-box {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.sidebar .side-menu .active>a .menu-icon,
.sidebar .side-menu .active>.dropdown-toggle .menu-icon {
    color: var(--accent-color);
}

/* Dark mode active — accent + black depth gradient */
[data-theme="dark"] .sidebar .side-menu .active>a,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

[data-theme="dark"] .sidebar .side-menu .active>a:hover,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color);
    transform: none;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .sidebar .side-menu .active>a .sb-icon-box,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle .sb-icon-box {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

[data-theme="dark"] .sidebar .side-menu .active>a .menu-icon,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle .menu-icon {
    color: var(--primary-color);
}

/* Dropdown caret */
.sidebar .side-menu .dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -0.12em;
    transition: transform 0.25s ease;
}

.sidebar .side-menu .active>.dropdown-toggle::after {
    transform: rotate(180deg);
}

/* ===========================================================
   Submenu
=========================================================== */

.sidebar .side-menu .dropdown-menu,
.sidebar .side-menu .side-submenu {
    position: relative !important;
    transform: none !important;
    box-shadow: none !important;
    float: none;
    background: transparent;
    border: none;
    padding: 4px 0 6px 26px;
    margin: 0;
    min-width: 0;
}

/* Submenu item */
.sidebar .side-menu .side-submenu a,
.sidebar .side-menu .dropdown-menu .dropdown-item {
    padding: 7px 10px;
    border-radius: 8px;
    margin: 1px 0;
    font-size: 13px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 56%, transparent) !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: normal;
    transition: background 0.22s ease, color 0.22s ease;
}

.sidebar .side-menu .side-submenu a:hover,
.sidebar .side-menu .dropdown-menu .dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent) !important;
    color: var(--black-color) !important;
    text-decoration: none;
}

/* Active submenu item */
.sidebar .side-menu .side-submenu .active,
.sidebar .side-menu .dropdown-menu .active {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.sidebar .side-menu .side-submenu .active a:hover,
.sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    color: var(--primary-color) !important;
    background: linear-gradient(135deg, var(--primary-bg) 0%, color-mix(in srgb, var(--primary-dark-color) 14%, transparent) 100%) !important;
    transform: none;
}

/* Submenu icon */
.sidebar .side-menu .dropdown-menu .submenu-icon {
    font-size: 11px !important;
    width: auto;
    opacity: 0.65;
    transition: opacity 0.18s ease;
}

.sidebar .side-menu .dropdown-menu a:hover .submenu-icon {
    opacity: 1;
}

.sidebar .side-menu .dropdown-menu a:hover .sb-sub-box {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* Hidden active indicator from old sidebar for collapsed — keep gone */
.sidebar.hide-sidebar .side-menu .side_line.active a:after,
.sidebar .side-menu .side_line.active a:after {
    display: none;
}

/* ===========================================================
   Group Titles
=========================================================== */

.partition {
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin: 18px 0 4px;
    border-bottom: none;
    line-height: 1;
}

.partition span {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: color-mix(in srgb, var(--black-color) 36%, transparent);
    background: transparent;
    padding: 0;
    white-space: nowrap;
}

/* ===========================================================
   Sticky Bottom Account Section
=========================================================== */

.sb-bottom {
    padding: 14px 10px;
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    flex-shrink: 0;
    background: var(--assest-color);
}

.sb-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--black-color) 7%, transparent),
        0 8px 24px color-mix(in srgb, var(--primary-color) 20%, transparent),
        0 0 0 1px color-mix(in srgb, var(--primary-color) 10%, transparent);
    transform: translateY(0);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-account:hover {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
    box-shadow:
        0 3px 8px color-mix(in srgb, var(--black-color) 9%, transparent),
        0 12px 32px color-mix(in srgb, var(--primary-color) 28%, transparent),
        0 0 0 1px color-mix(in srgb, var(--primary-color) 14%, transparent);
    transform: translateY(-2px);
}

[data-theme="dark"] .sb-account {
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--black-color) 32%, transparent),
        0 8px 28px color-mix(in srgb, var(--accent-color) 18%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .sb-account:hover {
    background: color-mix(in srgb, var(--black-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
    box-shadow:
        0 3px 8px color-mix(in srgb, var(--black-color) 40%, transparent),
        0 12px 36px color-mix(in srgb, var(--accent-color) 26%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent-color) 16%, transparent);
    transform: translateY(-2px);
}

.sb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-color);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
    line-height: 1;
}

.sb-account-info {
    flex: 1;
    min-width: 0;
}

.sb-account-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.sb-account-role {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: color-mix(in srgb, var(--black-color) 42%, transparent);
    display: block;
    line-height: 1.2;
    margin-top: 2px;
}

.sb-logout-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--red) 8%, transparent);
    color: color-mix(in srgb, var(--red) 75%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 18%, transparent);
    box-shadow: 0 0 0 0 transparent;
    flex-shrink: 0;
    font-size: 15.5px;
    text-decoration: none;
    transition:
        background 0.28s ease,
        color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.32s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.sb-logout-btn:hover {
    background: color-mix(in srgb, var(--red) 22%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 48%, transparent);
    box-shadow:
        0 6px 14px color-mix(in srgb, var(--red) 28%, transparent),
        0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent);
    transform: translateY(-1px) scale(1.06);
    text-decoration: none;
}

[data-theme="dark"] .sb-logout-btn {
    background: color-mix(in srgb, var(--red) 16%, transparent);
    color: color-mix(in srgb, var(--red) 92%, transparent);
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

[data-theme="dark"] .sb-logout-btn:hover {
    background: color-mix(in srgb, var(--red) 32%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 60%, transparent);
    box-shadow:
        0 6px 16px color-mix(in srgb, var(--red) 40%, transparent),
        0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
    transform: translateY(-1px) scale(1.06);
}

/* ===========================================================
   Collapsed Sidebar — Desktop ≥1024px
=========================================================== */

@media (min-width: 1024px) {
    .sidebar.hide-sidebar {
        width: 72px;
        padding: 0;
    }

    /* Header: center the logo mark, hide name */
    .sidebar.hide-sidebar .side-head {
        padding: 0;
        justify-content: center;
    }

    .sidebar.hide-sidebar .side-logo {
        flex: 0;
        width: 34px;
        gap: 0;
    }

    .sidebar.hide-sidebar .sb-logo-name {
        display: none;
    }

    /* Scale logo image down to fit the 34px icon slot */
    .sidebar.hide-sidebar .sb-logo-img {
        height: 34px;
        width: 34px;
        max-width: 34px;
        object-fit: contain;
    }

    /* Hide toggle in collapsed — sidebar's own icon area acts as anchor */
    .sidebar.hide-sidebar .side-head .side-toggle {
        display: none;
    }

    /* Nav padding */
    .sidebar.hide-sidebar .side-nav {
        padding: 10px 4px 8px;
    }

    /* Hide text and group titles — keep icon boxes visible */
    .sidebar.hide-sidebar .partition,
    .sidebar.hide-sidebar .side-menu a>span:not(.sb-icon-box),
    .sidebar.hide-sidebar .side-menu .dropdown-toggle>span:not(.sb-icon-box) {
        display: none !important;
    }

    /* Icon-only: scale up icon box to fill the link area */
    .sidebar.hide-sidebar .side-menu a>.sb-icon-box,
    .sidebar.hide-sidebar .side-menu .dropdown-toggle>.sb-icon-box {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    /* Collapsed submenu: strip indent, padding, and decorations so it
       sits compactly below the icon within the 72px sidebar column */
    .sidebar.hide-sidebar .side-menu .dropdown-menu,
    .sidebar.hide-sidebar .side-menu .side-submenu {
        padding: 2px 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
        transform: none !important;
        float: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Submenu items: icon centered */
    .sidebar.hide-sidebar .side-menu .dropdown-menu .dropdown-item,
    .sidebar.hide-sidebar .side-menu .side-submenu a {
        justify-content: center !important;
        padding: 5px !important;
        width: 44px !important;
        height: 44px !important;
        margin: 2px auto !important;
        gap: 0 !important;
        border-radius: 9px !important;
    }

    /* Show sub icon boxes in collapsed mode */
    .sidebar.hide-sidebar .side-menu .dropdown-item>.sb-sub-box,
    .sidebar.hide-sidebar .side-menu .side-submenu a>.sb-sub-box {
        display: flex !important;
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    /* Hide submenu text spans in collapsed mode */
    .sidebar.hide-sidebar .side-menu .dropdown-item>span:not(.sb-sub-box),
    .sidebar.hide-sidebar .side-menu .side-submenu a>span:not(.sb-sub-box) {
        display: none !important;
    }

    /* Icon-only menu items */
    .sidebar.hide-sidebar .side-menu a,
    .sidebar.hide-sidebar .side-menu .dropdown-toggle {
        justify-content: center;
        padding: 10px;
        width: 44px;
        height: 44px;
        margin: 2px auto;
        gap: 0;
        overflow: visible;
    }

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

    /* Hide active left bar (no room in icon-only) */
    .sidebar.hide-sidebar .side-menu .active>a::before,
    .sidebar.hide-sidebar .side-menu .active>.dropdown-toggle::before {
        display: none;
    }

    /* Bottom: icon-only */
    .sidebar.hide-sidebar .sb-bottom {
        padding: 10px 4px;
    }

    .sidebar.hide-sidebar .sb-account {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        padding: 10px 6px;
        background: transparent;
        border-color: transparent;
    }

    .sidebar.hide-sidebar .sb-account-info {
        display: none;
    }

    .sidebar.hide-sidebar .sb-logout-btn {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }
}

/* ===========================================================
   Wide Screen ≥1680px
=========================================================== */

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

    .right-content {
        margin-left: 280px;
    }

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

/* ===========================================================
   Mobile/Tablet ≤991px — overlay sidebar
=========================================================== */

@media (max-width: 991px) {
    .sidebar {
        left: -280px;
        width: 260px;
        z-index: 200;
        box-shadow: none;
        border-right: none;
    }

    .sidebar.hide-sidebar {
        left: 0;
        width: 260px;
        box-shadow: 4px 0 30px color-mix(in srgb, var(--primary-color) 14%, transparent);
        border-right: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    }

    /* X-close animation */
    .sidebar.hide-sidebar .side-toggle span:first-child {
        transform: rotate(45deg) translate(4px, 4px);
    }

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

    .sidebar.hide-sidebar .side-toggle span:last-child {
        transform: rotate(-45deg) translate(4px, -4px);
    }

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

    /* Restore toggle visibility on mobile */
    .sidebar.hide-sidebar .side-head .side-toggle {
        display: flex !important;
    }
}

@media (max-width: 575px) {
    .sidebar {
        left: -100vw;
        width: 100%;
    }

    .sidebar.hide-sidebar {
        width: 100%;
    }

    .side-nav::-webkit-scrollbar {
        width: 0;
    }
}

/* ==========================================================================
   Sidebar — Premium Redesign — End
========================================================================== */

/* ===========================================================
   Sidebar Navigation Refinements
=========================================================== */

/* Active hover — preserve gradient, no layout shift */
.sidebar .side-menu .active>a:hover,
.sidebar .side-menu .active>.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--primary-dark-color) 0%, var(--primary-color) 100%);
    color: var(--accent-color);
    transform: none;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary-color) 40%, transparent);
    text-decoration: none;
}

.sidebar .side-menu .active>a:hover .menu-icon,
.sidebar .side-menu .active>.dropdown-toggle:hover .menu-icon {
    color: var(--accent-color);
}

.sidebar .side-menu .active>a:hover .sb-icon-box,
.sidebar .side-menu .active>.dropdown-toggle:hover .sb-icon-box {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .sidebar .side-menu .active>a:hover,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color);
    transform: none;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .sidebar .side-menu .active>a:hover .menu-icon,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover .menu-icon {
    color: var(--primary-color);
}

/* Active Submenu — primary-bg background + left primary indicator */
.sidebar .side-menu .side-submenu .active,
.sidebar .side-menu .dropdown-menu .active {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.sidebar .side-menu .side-submenu .active a,
.sidebar .side-menu .dropdown-menu .side_line.active .dropdown-item,
.sidebar .side-menu .dropdown-menu .active .dropdown-item {
    color: var(--primary-color) !important;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-bg) 0%, color-mix(in srgb, var(--primary-dark-color) 14%, transparent) 100%) !important;
    border-radius: 8px;
    font-size: 13.5px;
}

.sidebar .side-menu .side-submenu .active a .submenu-icon,
.sidebar .side-menu .dropdown-menu .active .dropdown-item .submenu-icon {
    color: var(--primary-color) !important;
    opacity: 1;
}

.sidebar .side-menu .side-submenu .active a .sb-sub-box,
.sidebar .side-menu .dropdown-menu .active .dropdown-item .sb-sub-box {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

/* Active submenu hover — freeze to active appearance */
.sidebar .side-menu .side-submenu .active a:hover,
.sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    color: var(--primary-color) !important;
    background: linear-gradient(135deg, var(--primary-bg) 0%, color-mix(in srgb, var(--primary-dark-color) 14%, transparent) 100%) !important;
    transform: none;
}

/* Dark mode active submenu — swap to accent so dark-on-dark is avoided */
[data-theme="dark"] .sidebar .side-menu .side-submenu .active a,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .side_line.active .dropdown-item,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item {
    color: var(--accent-color) !important;
    border-left-color: var(--accent-color);
    background: var(--primary-bg) !important;
}

[data-theme="dark"] .sidebar .side-menu .side-submenu .active a .submenu-icon,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item .submenu-icon {
    color: var(--accent-color) !important;
    opacity: 1;
}

[data-theme="dark"] .sidebar .side-menu .side-submenu .active a .sb-sub-box,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item .sb-sub-box {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .sidebar .side-menu .side-submenu .active a:hover,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    color: var(--accent-color) !important;
    background: var(--primary-bg) !important;
    transform: none;
}

/* Submenu font size — proportional increase */
.sidebar .side-menu .side-submenu a,
.sidebar .side-menu .dropdown-menu .dropdown-item {
    font-size: 13.5px;
}

/* Sidebar Scrollbar (shared with Body Content scroll area) */
/* .side-nav,
html,
.body-content {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 35%, transparent) color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.side-nav::-webkit-scrollbar,
html::-webkit-scrollbar,
.body-content::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.side-nav::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
.body-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color) 35%, transparent);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.side-nav::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
.body-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.side-nav::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
.body-content::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border-radius: 4px;
} */

/* Responsive — restore correct sizing in icon-only collapsed mode */
@media (min-width: 1024px) {

    .sidebar.hide-sidebar .side-menu a,
    .sidebar.hide-sidebar .side-menu .dropdown-toggle {
        padding: 10px;
        font-size: 14px;
    }
}

/* ===========================================================
   Sidebar Navigation Refinements — End
=========================================================== */

/* ===========================================================
   Sidebar — Dark Mode Active Fix
=========================================================== */
[data-theme="dark"] .sidebar .side-menu .active>a:hover,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color);
    transform: none;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .sidebar .side-menu .side-submenu .active a,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .side_line.active .dropdown-item,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item {
    color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
    border-left-color: var(--primary-color);
}


[data-theme="dark"] .sidebar .side-menu .side-submenu .active a:hover,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    color: var(--primary-color) !important;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
    transform: none;
}

/* ===========================================================
   Sidebar — Dark Mode Active Fix — End
=========================================================== */

/* ===========================================================
   Sidebar — Active Items: Complete Hover Freeze
   Overrides all previous hover rules for active menu/submenu
   so appearance is identical at rest and on hover.
=========================================================== */

/* ---- Light Mode: Active Main Menu ---- */
/* Text was changing from --accent-color (rest) to --white-color (hover).
   Lock both to --accent-color so nothing moves. */
.sidebar .side-menu .active>a:hover,
.sidebar .side-menu .active>.dropdown-toggle:hover {
    background: var(--primary-color) !important;
    color: var(--accent-color) !important;
    transform: none !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary-color) 26%, transparent) !important;
    text-decoration: none !important;
}

.sidebar .side-menu .active>a:hover .menu-icon,
.sidebar .side-menu .active>.dropdown-toggle:hover .menu-icon {
    color: var(--accent-color) !important;
    transform: none !important;
}

/* ---- Dark Mode: Active Main Menu ---- */
[data-theme="dark"] .sidebar .side-menu .active>a:hover,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-color) 40%, transparent) !important;
    transform: none !important;
    text-decoration: none !important;
}

[data-theme="dark"] .sidebar .side-menu .active>a:hover .menu-icon,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover .menu-icon {
    color: var(--primary-color) !important;
    transform: none !important;
}

/* ---- Light Mode: Active Submenu ---- */
.sidebar .side-menu .side-submenu .active a:hover,
.sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    color: var(--primary-color) !important;
    background: linear-gradient(135deg, var(--primary-bg) 0%, color-mix(in srgb, var(--primary-dark-color) 14%, transparent) 100%) !important;
    transform: none !important;
}

.sidebar .side-menu .side-submenu .active a:hover .submenu-icon,
.sidebar .side-menu .dropdown-menu .active .dropdown-item:hover .submenu-icon {
    color: var(--primary-color) !important;
    transform: none !important;
    opacity: 1 !important;
}

/* ---- Dark Mode: Active Submenu ---- */
[data-theme="dark"] .sidebar .side-menu .side-submenu .active a,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item {
    /* color: var(--primary-color) !important; */
    background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
    border-left-color: var(--primary-color) !important;
}

[data-theme="dark"] .sidebar .side-menu .side-submenu .active a:hover,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    color: var(--primary-color) !important;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
    transform: none !important;
}

[data-theme="dark"] .sidebar .side-menu .side-submenu .active a:hover .submenu-icon,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item:hover .submenu-icon {
    color: var(--primary-color) !important;
    transform: none !important;
    opacity: 1 !important;
}

/* ===========================================================
   Sidebar — Active Items: Complete Hover Freeze — End
=========================================================== */

/* ===========================================================
   Sidebar Toggle — Unified Design
=========================================================== */

/* Toggle Button — match header toggle exactly */
.sidebar .side-head .side-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar .side-head .side-toggle:focus {
    outline: none;
    box-shadow: none;
}

/* Toggle Hover */
.sidebar .side-head .side-toggle:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* Hamburger lines */
.sidebar .side-head .side-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--black-color) 60%, transparent);
    margin: 2px 0;
    transition: transform 0.28s ease, opacity 0.28s ease, background 0.2s ease;
}

.sidebar .side-head .side-toggle:hover span {
    background: var(--black-color);
}

/* Mobile: X-close animation (sidebar open = hide-sidebar) */
@media (max-width: 991px) {
    .sidebar.hide-sidebar .side-head .side-toggle span:first-child {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .sidebar.hide-sidebar .side-head .side-toggle span:nth-child(2) {
        opacity: 0;
    }

    .sidebar.hide-sidebar .side-head .side-toggle span:last-child {
        transform: rotate(-45deg) translate(4px, -4px);
    }
}

/* ===========================================================
   Collapsed Sidebar — Floating Submenu Panel
=========================================================== */

/* Floating Panel */
#sb-float-panel {
    position: fixed;
    left: 80px;
    /* 72px collapsed sidebar + 8px gap */
    z-index: 9999;
    min-width: 210px;
    max-width: 270px;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
    border-radius: 12px;
    padding: 6px;
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--primary-color) 8%, transparent),
        0 16px 40px color-mix(in srgb, var(--primary-color) 18%, transparent);
    opacity: 0;
    transform: scale(0.95) translateX(-6px);
    transform-origin: left top;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

/* Dropdown Animation — visible state */
#sb-float-panel.sb-float-show {
    opacity: 1;
    transform: scale(1) translateX(0);
    pointer-events: all;
}

/* Panel list reset */
#sb-float-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sb-float-panel li {
    margin: 0;
    padding: 0;
}

/* Panel items */
#sb-float-panel a,
#sb-float-panel .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 8px;
    color: color-mix(in srgb, var(--black-color) 65%, transparent) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease;
}

#sb-float-panel a:hover,
#sb-float-panel .dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent) !important;
    color: var(--black-color) !important;
    text-decoration: none !important;
}

/* Active item in floating panel */
#sb-float-panel li.active a,
#sb-float-panel .side_line.active .dropdown-item {
    background: var(--primary-bg) !important;
    color: var(--primary-color) !important;
    font-weight: 600;
    border-left: 2px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
}

#sb-float-panel li.active a:hover,
#sb-float-panel .side_line.active .dropdown-item:hover {
    background: var(--primary-bg) !important;
    color: var(--primary-color) !important;
}

/* Submenu icons in floating panel */
#sb-float-panel .submenu-icon {
    font-size: 11px;
    width: 13px;
    flex-shrink: 0;
    opacity: 0.65;
}

#sb-float-panel li.active .submenu-icon,
#sb-float-panel .side_line.active .submenu-icon {
    opacity: 1;
    color: var(--primary-color);
}

/* Dark mode floating panel */
[data-theme="dark"] #sb-float-panel {
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--primary-color) 12%, transparent),
        0 16px 40px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

[data-theme="dark"] #sb-float-panel li.active a,
[data-theme="dark"] #sb-float-panel .side_line.active .dropdown-item {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
    color: var(--primary-color) !important;
    border-left-color: var(--primary-color);
}

[data-theme="dark"] #sb-float-panel li.active a:hover,
[data-theme="dark"] #sb-float-panel .side_line.active .dropdown-item:hover {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
    color: var(--primary-color) !important;
}

/* Dark Mode: --primary-color (#0E1F1A) and sidebar bg (--assest-color: #182320)
   are both near-black, so a 5% primary tint is invisible. Switch to
   --black-color (#F5F7F6 in dark) for a clearly visible light surface. */
[data-theme="dark"] .sidebar .side-head .side-toggle {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .sidebar .side-head .side-toggle:hover {
    background: color-mix(in srgb, var(--black-color) 18%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 8%, transparent);
}

/* ===========================================================
   Sidebar Toggle & Floating Submenu — End
=========================================================== */

/* ===========================================================
   Sidebar Collapse Fixes
=========================================================== */

/* Fix 1: Toggle was hidden in collapsed state (display:none at ≥1024px).
   Keep it always visible and centered. Logo is hidden to give full width. */
@media (min-width: 1024px) {
    .sidebar.hide-sidebar .side-head .side-toggle {
        display: flex !important;
    }

    /* Hide logo-link when collapsed so toggle centers cleanly */
    .sidebar.hide-sidebar .side-logo {
        display: none !important;
    }
}

/* ===========================================================
   Sidebar Collapse Fixes — End
=========================================================== */

/* ===========================================================
   Sidebar — Active Item Hover Freeze (definitive, last-wins)

   Appended last so it overrides every previous rule.
   Every active element must look identical at rest and on hover:
   same background, same text color, same icon color, no transform.
=========================================================== */

/* Light mode — active main menu */
.sidebar .side-menu .active>a:hover,
.sidebar .side-menu .active>.dropdown-toggle:hover {
    background: var(--primary-color) !important;
    color: var(--accent-color) !important;
    transform: none !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary-color) 26%, transparent) !important;
    text-decoration: none !important;
}

.sidebar .side-menu .active>a:hover .menu-icon,
.sidebar .side-menu .active>.dropdown-toggle:hover .menu-icon {
    color: var(--accent-color) !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Dark mode — active main menu */
[data-theme="dark"] .sidebar .side-menu .active>a:hover,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%) !important;
    color: var(--primary-color) !important;
    transform: none !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-color) 40%, transparent) !important;
    text-decoration: none !important;
}

[data-theme="dark"] .sidebar .side-menu .active>a:hover .menu-icon,
[data-theme="dark"] .sidebar .side-menu .active>.dropdown-toggle:hover .menu-icon {
    color: var(--primary-color) !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Light mode — active submenu item */
.sidebar .side-menu .side-submenu .active a:hover,
.sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    background: linear-gradient(135deg, var(--primary-bg) 0%, color-mix(in srgb, var(--primary-dark-color) 14%, transparent) 100%) !important;
    color: var(--primary-color) !important;
    transform: none !important;
    text-decoration: none !important;
}

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

/* Dark mode — active submenu item */
[data-theme="dark"] .sidebar .side-menu .side-submenu .active a:hover,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item:hover {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent) !important;
    color: var(--accent-color) !important;
    transform: none !important;
    text-decoration: none !important;
}

[data-theme="dark"] .sidebar .side-menu .side-submenu .active a:hover .submenu-icon,
[data-theme="dark"] .sidebar .side-menu .dropdown-menu .active .dropdown-item:hover .submenu-icon {
    color: var(--accent-color) !important;
    opacity: 1 !important;
}

/* ===========================================================
   Sidebar — Active Item Hover Freeze — End
=========================================================== */

/* ===========================================================
   Sidebar Scrollbar — Dark Mode
   Light mode scrollbar is unchanged (primary-color based).
   Dark mode thumb uses --accent-color for visibility.
=========================================================== */

[data-theme="dark"] .side-nav,
html[data-theme="dark"],
[data-theme="dark"] .body-content {
    scrollbar-color: color-mix(in srgb, var(--accent-color) 45%, transparent) color-mix(in srgb, var(--accent-color) 6%, transparent);
}

[data-theme="dark"] .side-nav::-webkit-scrollbar-thumb,
html[data-theme="dark"]::-webkit-scrollbar-thumb,
[data-theme="dark"] .body-content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-color) 45%, transparent);
    transition: background 0.2s ease;
}

[data-theme="dark"] .side-nav::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .body-content::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-color) 75%, transparent);
}

[data-theme="dark"] .side-nav::-webkit-scrollbar-track,
html[data-theme="dark"]::-webkit-scrollbar-track,
[data-theme="dark"] .body-content::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

/* ===========================================================
   Sidebar Scrollbar — Dark Mode — End
=========================================================== */

/* ===========================================================
   Category Module
=========================================================== */

/* ----- Page Header ----- */
.cat-ph {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.cat-ph-left {
    min-width: 0;
}

.cat-ph-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--black-color);
    line-height: 1.25;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}

[data-theme="dark"] .cat-ph-title {
    color: var(--black-color);
}

.cat-ph-desc {
    font-size: 13px;
    color: color-mix(in srgb, var(--black-color) 48%, transparent);
    margin: 0;
    line-height: 1.5;
}

.cat-ph-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ----- Breadcrumb ----- */
.cat-bc {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex-wrap: wrap;
}

.cat-bc-item {
    display: flex;
    align-items: center;
}

.cat-bc-item+.cat-bc-item::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--black-color) 28%, transparent);
    margin: 0 8px;
    flex-shrink: 0;
}

.cat-bc-item a {
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s ease;
    display: flex;
    align-items: center;
}

.cat-bc-item a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.cat-bc-item.active {
    color: var(--black-color);
    font-weight: 500;
}

.cat-bc-home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--accent-color);
    font-size: 13px;
    transition: background 0.18s ease;
}

[data-theme="dark"] .cat-bc-home-icon {
    color: var(--accent-color);
}

[data-theme="dark"] .cat-bc-item a {
    color: var(--accent-color);
    transition: color 0.22s ease;
}

[data-theme="dark"] .cat-bc-item a:hover {
    color: var(--black-color);
}

[data-theme="dark"] .cat-bc-item.active {
    color: var(--accent-color);
}

/* ----- Cards ----- */
.cat-card {
    background: var(--assest-color);
    border-radius: 14px;
    border: 1px solid rgb(var(--primary-rgb) / 0.08);
    box-shadow: 0 2px 12px rgb(var(--primary-rgb) / 0.06);
    overflow: hidden;
    margin-bottom: 20px;
    animation: catFadeUp 0.32s ease both;
}

.cat-card-head {
    padding: 18px 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cat-card:has(.cat-card-head) {
    position: relative;
}

.cat-card:has(.cat-card-head)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-top: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
    border-top-left-radius: 13px;
    z-index: 1;
    mask-image: radial-gradient(circle at 0% 0%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 0% 0%, black 30%, transparent 100%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

.modal .cat-card:has(.cat-card-head)::before {
    display: none;
}

[data-theme="dark"] .cat-card:has(.cat-card-head)::before {
    border-top-color: var(--accent-color);
    border-left-color: var(--accent-color);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

.cat-card:has(.cat-card-head)::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-bottom: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-bottom-right-radius: 13px;
    z-index: 1;
    mask-image: radial-gradient(circle at 100% 100%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 100% 100%, black 30%, transparent 100%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

.modal .cat-card:has(.cat-card-head)::after {
    display: none;
}

[data-theme="dark"] .cat-card:has(.cat-card-head)::after {
    border-bottom-color: var(--accent-color);
    border-right-color: var(--accent-color);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

.cat-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--black-color);
    margin: 0;
    line-height: 1.35;
}

.cat-card-subtitle {
    font-size: 12px;
    color: color-mix(in srgb, var(--black-color) 46%, transparent);
    margin: 2px 0 0;
}

.cat-card-body {
    padding: 22px;
}

.cat-card-footer {
    padding: 16px 22px;
    border-top: 1px solid color-mix(in srgb, var(--black-color) 7%, transparent);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cat-card-head-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Dark mode: restore visible borders that are invisible against the dark card surface */
[data-theme="dark"] .cat-card {
    border-color: color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .cat-card-head {
    border-bottom-color: color-mix(in srgb, var(--black-color) 9%, transparent);
}

[data-theme="dark"] .cat-card-footer {
    border-top-color: color-mix(in srgb, var(--black-color) 9%, transparent);
}

/* ----- Form Fields ----- */
.cat-field {
    margin-bottom: 18px;
}

.cat-field:last-child {
    margin-bottom: 0;
}

.cat-label {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--black-color);
    margin-bottom: 7px;
    line-height: 1.4;
}

.cat-label .cat-req {
    color: var(--red);
    margin-left: 2px;
    font-size: 18px;
}

.cat-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 16px;
    margin-right: 7px;
    color: var(--primary-color);
    font-size: 12.5px;
    line-height: 1;
    vertical-align: -1px;
    transition: color 0.22s ease;
}

[data-theme="dark"] .cat-label-icon {
    color: var(--accent-color);
}

.cat-input,
.cat-select {
    display: block;
    width: 100%;
    height: 43px;
    padding: 0 13px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--black-color);
    background: var(--white-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.cat-input::placeholder {
    color: color-mix(in srgb, var(--black-color) 32%, transparent);
}

.cat-input:focus,
.cat-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

[data-theme="dark"] .cat-input:focus,
[data-theme="dark"] .cat-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .cat-input,
[data-theme="dark"] .cat-select {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
    color: var(--black-color);
}

.cat-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0.5 2.5h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    cursor: pointer;
}

/* ----- Compact Upload (category image, 90px square) ----- */
.cat-upload-sq {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cat-upload-sq-inner {
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px dashed color-mix(in srgb, var(--primary-color) 35%, transparent);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
    background: var(--primary-bg);
}

.cat-upload-sq-inner:hover {
    border-color: var(--primary-color);
    transform: scale(1.03);
}

.cat-upload-sq-inner:hover .cat-upload-ol {
    opacity: 1;
}

.cat-upload-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-upload-ol {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--black-color) 52%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cat-upload-ol i {
    color: white;
    font-size: 16px;
}

.cat-upload-ol span {
    color: white;
    font-size: 10px;
    font-weight: 500;
}

.cat-upload-hint {
    font-size: 11px;
    color: color-mix(in srgb, var(--black-color) 42%, transparent);
    text-align: center;
    max-width: 110px;
    line-height: 1.4;
    margin: 0;
}

.cat-upload-input {
    display: none !important;
}

[data-theme="dark"] .cat-upload-sq-inner {
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
}

[data-theme="dark"] .cat-upload-sq-inner:hover {
    border-color: var(--accent-color);
}

/* ----- Large Upload Zone (amenity icon, 150px tall) ----- */
.cat-upload-lg-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px dashed color-mix(in srgb, var(--primary-color) 30%, transparent);
    cursor: pointer;
    background: var(--primary-bg);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cat-upload-lg-inner:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.cat-upload-lg-inner:hover .cat-upload-ol {
    opacity: 1;
}

.cat-upload-lg .cat-upload-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-theme="dark"] .cat-upload-lg-inner {
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

[data-theme="dark"] .cat-upload-lg-inner:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/* ----- Search Bar ----- */
.cat-search-wrap {
    position: relative;
    max-width: 320px;
    width: 100%;
}

.cat-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--black-color) 36%, transparent);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.cat-search-input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
    background: color-mix(in srgb, var(--primary-light) 30%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--black-color) 11%, transparent);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cat-search-input::placeholder {
    color: color-mix(in srgb, var(--black-color) 33%, transparent);
}

.cat-search-input:focus {
    background: var(--white-color) !important;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

[data-theme="dark"] .cat-search-input {
    background: var(--assest-color) !important;
    border-color: color-mix(in srgb, var(--black-color) 16%, transparent);
    color: var(--black-color);
}

[data-theme="dark"] .cat-search-input:focus {
    background: var(--white-color) !important;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

/* ----- Table Card ----- */
.cat-table-card {
    background: var(--white-color);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--black-color) 9%, transparent);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--black-color) 5%, transparent),
        0 4px 16px color-mix(in srgb, var(--black-color) 3%, transparent);
    overflow: hidden;
    margin-bottom: 20px;
    animation: catFadeUp 0.36s ease 0.06s both;
}

.cat-table-topbar {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid color-mix(in srgb, var(--black-color) 7%, transparent);
}

.cat-table-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--black-color);
    margin: 0;
}

.cat-table-body {
    padding: 0 !important;
}

.cat-table-card .table-responsive {
    margin: 0;
    border: none;
}

.cat-table-card .table {
    margin: 0;
    border: none;
}

/* ----- Table Header ----- */
.cat-table-card .table thead tr {
    border-bottom: 2px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.cat-table-card .table thead th {
    background: var(--primary-light) !important;
    border-color: color-mix(in srgb, var(--black-color) 7%, transparent) !important;
    border-bottom: none !important;
    font-size: 11px;
    font-weight: 700;
    color: var(--black-color);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 13px 14px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Dark mode: table card outer border and internal topbar divider */
[data-theme="dark"] .cat-table-card {
    border-color: color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .cat-table-topbar {
    border-bottom-color: color-mix(in srgb, var(--black-color) 9%, transparent);
}

[data-theme="dark"] .cat-table-card .table thead tr {
    border-bottom-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

/* ----- Table Body Rows ----- */
.cat-table-card .table tbody tr {
    transition: background 0.15s ease;
}

/* Zebra striping */

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

/* ----- Table Cells ----- */
.cat-table-card .table tbody td {
    padding: 14px 14px;
    border-color: color-mix(in srgb, var(--black-color) 6%, transparent) !important;
    vertical-align: middle;
    color: var(--black-color);
    transition: background 0.15s ease;
}

/* Left accent indicator (transparent by default, colored on hover) */
.cat-table-card .table tbody td:first-child {
    border-left: 3px solid transparent !important;
    padding-left: 13px !important;
    transition: border-left-color 0.2s ease, background 0.15s ease;
}

/* ----- Row Hover ----- */
.cat-table-card .table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary-color) 5%, transparent) !important;
}

.cat-table-card .table tbody tr:hover td:first-child {
    border-left-color: var(--primary-color) !important;
}

[data-theme="dark"] .cat-table-card .table tbody tr:hover td {
    background: color-mix(in srgb, var(--accent-color) 7%, transparent) !important;
}

[data-theme="dark"] .cat-table-card .table tbody tr:hover td:first-child {
    border-left-color: var(--accent-color) !important;
}

/* ----- Dark Mode Table Overrides ----- */
[data-theme="dark"] .cat-table-card .table thead th {
    background: var(--assest-color) !important;
    color: var(--black-color);
    border-color: color-mix(in srgb, var(--black-color) 10%, transparent) !important;
}

[data-theme="dark"] .cat-table-card .table tbody td {
    border-color: color-mix(in srgb, var(--black-color) 10%, transparent) !important;
    color: var(--black-color);
}

[data-theme="dark"] .cat-table-card .table tbody tr:nth-of-type(even) td {
    background: color-mix(in srgb, var(--black-color) 4%, transparent) !important;
}

[data-theme="dark"] .cat-table-card td.dataTables_empty {
    color: color-mix(in srgb, var(--black-color) 38%, transparent) !important;
}

/* ── DataTable Pagination · Dark Mode ── */
[data-theme="dark"] .pagination {
    border-color: color-mix(in srgb, var(--black-color) 10%, transparent);
    background: transparent;
}

[data-theme="dark"] .pagination .page-link {
    background: var(--assest-color) !important;
    color: var(--black-color);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

[data-theme="dark"] .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background: color-mix(in srgb, var(--accent-color) 16%, var(--assest-color)) !important;
    color: var(--accent-color);
}

[data-theme="dark"] .pagination .page-link:focus {
    background: color-mix(in srgb, var(--accent-color) 16%, var(--assest-color)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
    outline: none;
}

[data-theme="dark"] .pagination .active .page-link {
    background: var(--accent-color) !important;
    color: var(--white-color);
}

[data-theme="dark"] .pagination .disabled .page-link {
    background: color-mix(in srgb, var(--assest-color) 60%, transparent) !important;
    color: color-mix(in srgb, var(--black-color) 28%, transparent);
    cursor: not-allowed;
}

[data-theme="dark"] .pagination .arrow-icon {
    filter: brightness(0) invert(1) opacity(0.7);
}

/* ── DataTable Footer · Dark Mode ── */

/* "Showing X to Y of Z entries" info text */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_info {
    color: color-mix(in srgb, var(--black-color) 70%, transparent);
}

/* "Show entries" label pill — text color (background already inherits --assest-color) */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length label,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label {
    color: var(--black-color);
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
}

/* Entries-count select dropdown */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length label .form-control,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label .form-control {
    background-color: color-mix(in srgb, var(--black-color) 6%, var(--assest-color));
    color: var(--black-color);
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

/* Dropdown <option> elements */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length label .form-control option,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label .form-control option {
    background-color: var(--assest-color);
    color: var(--black-color);
}

/* Select focus ring */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length label .form-control:focus,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label .form-control:focus {
    border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
    outline: none;
}

/* Processing overlay */
[data-theme="dark"] div.dataTables_wrapper div.dataTables_processing {
    background: color-mix(in srgb, var(--assest-color) 90%, transparent);
    color: var(--black-color);
    border-color: color-mix(in srgb, var(--black-color) 8%, transparent);
}

/* ----- Table Thumbnail ----- */
.cat-thumb {
    width: 50px;
    height: 50px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--black-color) 9%, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: block;
    margin: 0 auto;
}

/* ----- Table Action Group ----- */
.cat-tbl-action-grp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ----- Type Badge ----- */
.cat-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 500;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    white-space: nowrap;
    border: 1px solid var(--primary-light);
}

[data-theme="dark"] .cat-type-badge {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

/* ----- Action Buttons (controller-rendered pills matching .cat-type-badge reference) ----- */
.cat-table-card td a.edit-delete-btn,
.cat-table-card td button.edit-delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    font-family: var(--font) !important;
    line-height: 1.5 !important;
    border: 1px solid !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
    cursor: pointer !important;
    outline: none !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    margin: 2px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Normalize icon size — controller uses fa-xl, override to match text */
.cat-table-card td a.edit-delete-btn i,
.cat-table-card td button.edit-delete-btn i {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Edit pill — primary color */
.cat-table-card td a.edit-delete-btn {
    color: var(--primary-dark-color) !important;
    border-color: var(--primary-light) !important;
    background: var(--primary-bg) !important;
}

.cat-table-card td a.edit-delete-btn:hover {
    background: var(--primary-light) !important;
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--primary-color) 14%, transparent) !important;
    color: var(--primary-dark-color) !important;
    text-decoration: none !important;
}

.cat-table-card td a.edit-delete-btn:active {
    transform: scale(0.96) !important;
    box-shadow: none !important;
    transition: transform 0.1s ease !important;
}

.cat-table-card td a.edit-delete-btn:focus {
    outline: none !important;
}

/* Delete pill — red/danger color */
.cat-table-card td button.edit-delete-btn {
    color: var(--red) !important;
    border-color: color-mix(in srgb, var(--red) 30%, transparent) !important;
    background: color-mix(in srgb, var(--red) 7%, transparent) !important;
}

.cat-table-card td button.edit-delete-btn:hover {
    background: color-mix(in srgb, var(--red) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--red) 55%, transparent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--red) 14%, transparent) !important;
    color: var(--red) !important;
}

.cat-table-card td button.edit-delete-btn:active {
    transform: scale(0.96) !important;
    box-shadow: none !important;
    transition: transform 0.1s ease !important;
}

.cat-table-card td button.edit-delete-btn:focus {
    outline: none !important;
}

/* Dark mode — edit */
[data-theme="dark"] .cat-table-card td a.edit-delete-btn {
    color: var(--accent-color) !important;
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent) !important;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
}

[data-theme="dark"] .cat-table-card td a.edit-delete-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-color) 50%, transparent) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-color) 14%, transparent) !important;
}

/* Dark mode — delete (red is the same in both themes) */
[data-theme="dark"] .cat-table-card td button.edit-delete-btn {
    color: var(--red) !important;
    border-color: color-mix(in srgb, var(--red) 30%, transparent) !important;
    background: color-mix(in srgb, var(--red) 8%, transparent) !important;
}

[data-theme="dark"] .cat-table-card td button.edit-delete-btn:hover {
    background: color-mix(in srgb, var(--red) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--red) 55%, transparent) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--red) 16%, transparent) !important;
    color: var(--red) !important;
}

.cat-table-card a.btn.text-white {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 12px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: var(--primary-bg) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-light) !important;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.cat-table-card a.btn.text-white:hover {
    background: var(--primary-light) !important;
    transform: translateY(-1px);
    text-decoration: none;
}

[data-theme="dark"] .cat-table-card a.btn.text-white {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
    color: var(--accent-color) !important;
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent) !important;
}

[data-theme="dark"] .cat-table-card a.btn.text-white:hover {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
}

/* ----- Primary Button ----- */
.cat-btn-prim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font);
    line-height: 1.4;
    letter-spacing: .1px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    color: var(--white-color) !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    border: none;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    outline: none;
    box-shadow: 0 3px 10px var(--primary-light);
    transition:
        background 0.25s ease,
        transform 150ms ease,
        box-shadow 0.25s ease;
}

/* Shine Effect */
.cat-btn-prim::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 .5s ease;
    pointer-events: none;
}

/* Hover */
.cat-btn-prim:hover {
    background: linear-gradient(135deg, var(--primary-dark-color) 0%, var(--primary-color) 100%);
    color: var(--white-color) !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px var(--primary-light);
}

.cat-btn-prim:hover::after {
    left: 130%;
}

/* Click */
.cat-btn-prim:active {
    transform: scale(.97);
    box-shadow: none;
    transition: transform .1s ease;
}

/* Focus */
.cat-btn-prim:focus,
.cat-btn-prim:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-dark-color) 30%, transparent);
}

/* Dark Theme */
[data-theme="dark"] .cat-btn-prim {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

[data-theme="dark"] .cat-btn-prim:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 0%, var(--accent-color) 100%);
    color: var(--primary-color) !important;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

[data-theme="dark"] .cat-btn-prim:focus,
[data-theme="dark"] .cat-btn-prim:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* ----- Secondary Button (Cancel / Close — Danger Style) ----- */
.cat-btn-sec {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--white-color) !important;
    background: var(--red);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    text-decoration: none;
    white-space: nowrap;
    outline: none;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

.cat-btn-sec::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--white-color) 22%, transparent);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.cat-btn-sec:active::before {
    width: 200px;
    height: 200px;
    animation: catBtnRipple 0.45s ease-out forwards;
}

.cat-btn-sec:hover {
    background: color-mix(in srgb, var(--red) 86%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--red) 34%, transparent);
    color: var(--white-color) !important;
    text-decoration: none;
}

.cat-btn-sec:active {
    transform: scale(0.97);
    box-shadow: none;
    transition: transform 0.1s ease;
}

.cat-btn-sec:focus {
    outline: none;
}

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

[data-theme="dark"] .cat-btn-sec {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .cat-btn-sec:hover {
    color: var(--primary-color) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--red) 28%, transparent);
}

/* ----- Category Checkboxes ----- */
.cat-cat-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 2px;
}

.cat-cat-grid::-webkit-scrollbar {
    width: 4px;
}

.cat-cat-grid::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

.cat-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--black-color) 9%, transparent);
    background: var(--white-color);
    cursor: pointer;
    transition: all 0.16s ease;
}

.cat-cat-item:hover {
    border-color: var(--primary-light);
    background: var(--primary-bg);
}

.cat-cat-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

[data-theme="dark"] .cat-cat-item input[type="checkbox"] {
    accent-color: var(--accent-color);
}

.cat-cat-item label {
    font-size: 13px;
    color: var(--black-color);
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.4;
    flex: 1;
}

/* ----- Required Radio Group ----- */
.cat-req-group {
    display: flex;
    gap: 8px;
}

.cat-req-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--black-color) 11%, transparent);
    background: var(--white-color);
    cursor: pointer;
    transition: all 0.16s ease;
    flex: 1;
    justify-content: center;
}

.cat-req-opt:hover {
    border-color: var(--primary-light);
    background: var(--primary-bg);
}

.cat-req-opt input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary-color);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

[data-theme="dark"] .cat-req-opt input[type="radio"] {
    accent-color: var(--accent-color);
}

.cat-req-opt label {
    font-size: 13px;
    color: var(--black-color);
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

/* ----- Modal ----- */
.cat-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px color-mix(in srgb, var(--black-color) 22%, transparent);
    background: var(--white-color);
    position: relative;
}

.cat-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-top: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
    border-top-left-radius: 16px;
    z-index: 1;
    mask-image: radial-gradient(circle at 0% 0%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 0% 0%, black 30%, transparent 100%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

.cat-modal .modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-bottom: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-bottom-right-radius: 16px;
    z-index: 1;
    mask-image: radial-gradient(circle at 100% 100%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 100% 100%, black 30%, transparent 100%);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary-color) 40%, transparent));
}

.cat-modal .modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cat-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-color);
    margin: 0;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.cat-modal .modal-body {
    padding: 22px 24px;
    background: var(--white-color);
}

.cat-modal .modal-footer {
    padding: 14px 24px;
    border-top: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    background: var(--white-color);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.cat-modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--black-color) 52%, transparent);
    cursor: pointer;
    transition: all 0.18s ease;
    font-size: 15px;
    padding: 0;
    flex-shrink: 0;
}

.cat-modal-close-btn:hover {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    color: var(--black-color);
}

/* ----- Animations ----- */
@keyframes catFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.cat-animate {
    animation: catFadeUp 0.32s ease both;
}

.cat-animate-d1 {
    animation-delay: 0.07s;
}

.cat-animate-d2 {
    animation-delay: 0.14s;
}

.cat-animate-d3 {
    animation-delay: 0.21s;
}

/* ----- Select2 override inside cat-card ----- */
.cat-card .select2-container .select2-selection--single,
.cat-card .select2-container .select2-selection--multiple {
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent) !important;
    border-radius: 9px !important;
}

.cat-card .select2-container--default.select2-container--focus .select2-selection--single,
.cat-card .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-bg) !important;
}

[data-theme="dark"] .cat-card .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme="dark"] .cat-card .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
    .cat-ph {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cat-card-body {
        padding: 16px;
    }

    .cat-card-footer {
        padding: 14px 16px;
    }

    .cat-card-head {
        padding: 14px 16px;
    }

    .cat-table-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cat-search-wrap {
        max-width: 100%;
    }

    .cat-modal .modal-dialog {
        margin: 10px;
    }

    .cat-req-group {
        gap: 6px;
    }

    .cat-req-opt {
        padding: 7px 10px;
    }
}

/* ----- Icon Box (Breadcrumb Card & Form Headers) ----- */
.cat-icon-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 20px;
}

[data-theme="dark"] .cat-icon-box {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}

.cat-icon-box-sm {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 13px;
}

[data-theme="dark"] .cat-icon-box-sm {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}

/* ----- Breadcrumb Card Layout ----- */
.cat-bc-card-body {
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cat-bc-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.cat-bc-meta {
    min-width: 0;
}

.cat-bc-meta .cat-ph-title {
    font-size: 19px;
    margin-bottom: 0;
    line-height: 1.3;
}

.cat-bc-meta .cat-bc {
    margin: 4px 0 0;
}

/* ----- Card Head with Icon Box ----- */
.cat-card-icon-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-card-icon-head .cat-card-title {
    margin: 0;
}

/* ----- Search Standalone Card ----- */
.cat-search-card>.cat-card-body {
    padding: 14px 20px !important;
}

.cat-search-card .cat-search-wrap {
    max-width: 100%;
    width: 100%;
}

/* ----- Table Empty State (DataTables) ----- */
.cat-table-card td.dataTables_empty {
    padding: 44px 20px !important;
    color: color-mix(in srgb, var(--black-color) 40%, transparent) !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
}

/* Breadcrumb card responsive */
@media (max-width: 767px) {
    .cat-bc-card-body {
        padding: 14px 16px;
        gap: 10px;
    }

    .cat-bc-meta .cat-ph-title {
        font-size: 17px;
    }

    .cat-bc-card-left {
        gap: 10px;
    }

    .cat-icon-box {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
}

/* ----- Danger Button ----- */
.cat-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 20px;
    min-width: 120px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--white-color) !important;
    background: var(--red);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
    white-space: nowrap;
    outline: none;
    vertical-align: middle;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.cat-btn-danger::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--white-color) 28%, transparent);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.cat-btn-danger:active::before {
    width: 200px;
    height: 200px;
    animation: catBtnRipple 0.45s ease-out forwards;
}

.cat-btn-danger:hover {
    background: color-mix(in srgb, var(--red) 86%, black);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--red) 34%, transparent);
    color: var(--white-color) !important;
    text-decoration: none;
}

.cat-btn-danger:active {
    transform: scale(0.97);
    box-shadow: none;
    transition: transform 0.1s ease;
}

.cat-btn-danger:focus {
    outline: none;
}

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

.cat-btn-danger:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .cat-btn-danger {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .cat-btn-danger:hover {
    color: var(--primary-color) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--red) 28%, transparent);
}

/* ----- Delete Confirmation Modal ----- */

/* Dialog width override */
.cat-delete-modal .modal-dialog {
    max-width: 400px;
}

/* Open animation: scale + translateY + opacity */
.cat-delete-modal.fade .modal-dialog {
    transform: scale(0.9) translateY(-12px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.28, 0.64, 1), opacity 0.22s ease;
}

.cat-delete-modal.show .modal-dialog {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

.cat-delete-modal .modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 24px 64px color-mix(in srgb, var(--black-color) 24%, transparent),
        0 4px 16px color-mix(in srgb, var(--black-color) 10%, transparent);
    background: color-mix(in srgb, var(--white-color) 100%, transparent);
    text-align: center;
}

/* Icon zone — padding reserves space for the concentric ring shadows */
.cat-del-icon-zone {
    padding: 52px 32px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon core circle with multi-ring box-shadow */
.cat-del-icon-core {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-bg);
    border: 2px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--primary-color) 7%, transparent),
        0 0 0 24px color-mix(in srgb, var(--primary-color) 4%, transparent),
        0 0 0 36px color-mix(in srgb, var(--primary-color) 2%, transparent),
        0 6px 22px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

[data-theme="dark"] .cat-del-icon-core {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--accent-color) 7%, transparent),
        0 0 0 24px color-mix(in srgb, var(--accent-color) 4%, transparent),
        0 0 0 36px color-mix(in srgb, var(--accent-color) 2%, transparent),
        0 6px 22px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

/* Circle + rings emerge: scale up with bounce overshoot */
@keyframes catDelCircleIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    55% {
        transform: scale(1.08);
        opacity: 1;
    }

    78% {
        transform: scale(0.97);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Rings: slow continuous breathing via parent scale */
@keyframes catDelRingBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

/* Question mark: pop in with bounce */
@keyframes catDelQmarkIn {
    0% {
        transform: scale(0.25);
        opacity: 0;
    }

    60% {
        transform: scale(1.18);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Question mark: gentle continuous float */
@keyframes catDelQmarkFloat {

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

    50% {
        transform: translateY(-2px);
        opacity: 0.82;
    }
}

.cat-del-qmark {
    font-size: 22px;
    color: var(--primary-color);
    line-height: 1;
}

[data-theme="dark"] .cat-del-qmark {
    color: var(--accent-color);
}

/* Circle + rings: entrance burst then slow breathing */
.cat-del-animate .cat-del-icon-core {
    animation:
        catDelCircleIn 0.35s cubic-bezier(0.34, 1.15, 0.64, 1) 0.05s both,
        catDelRingBreath 3s ease-in-out 0.5s infinite;
}

/* Question mark: delayed pop-in then continuous float */
.cat-del-animate .cat-del-qmark {
    animation:
        catDelQmarkIn 0.25s cubic-bezier(0.34, 1.28, 0.64, 1) 0.55s both,
        catDelQmarkFloat 2.8s ease-in-out 0.85s infinite;
}

/* Highlighted keyword inside delete description */
.cat-del-highlight {
    color: var(--primary-color);
    font-weight: 600;
}

[data-theme="dark"] .cat-del-highlight {
    color: var(--accent-color);
}

/* Content */
.cat-del-body {
    padding: 6px 36px 4px;
}

.cat-del-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 10px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

[data-theme="dark"] .cat-del-title {
    color: var(--accent-color);
}

.cat-del-desc {
    font-size: 13.5px;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    margin: 0;
    line-height: 1.65;
}

/* Footer */
.cat-del-footer {
    padding: 22px 36px 36px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.cat-del-footer .cat-btn-sec {
    background: var(--white-color);
    color: var(--black-color) !important;
    border: 1px solid color-mix(in srgb, var(--black-color) 16%, transparent);
    box-shadow: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.cat-del-footer .cat-btn-sec::before {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
}

.cat-del-footer .cat-btn-sec:hover {
    background: color-mix(in srgb, var(--black-color) 4%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 24%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--black-color) 8%, transparent);
    color: var(--black-color) !important;
}

.cat-del-footer .cat-btn-sec:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .cat-del-footer .cat-btn-sec {
    color: var(--black-color) !important;
}

[data-theme="dark"] .cat-del-footer .cat-btn-sec:hover {
    color: var(--black-color) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--black-color) 8%, transparent);
}

/* Button inner states (loading swap) */
.cat-del-btn-default {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cat-del-btn-loading {
    display: none;
    align-items: center;
    gap: 6px;
}

/* Responsive */
@media (max-width: 480px) {
    .cat-delete-modal .modal-dialog {
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    .cat-del-icon-zone {
        padding: 44px 24px 14px;
    }

    .cat-del-body {
        padding: 4px 24px 4px;
    }

    .cat-del-footer {
        padding: 18px 24px 28px;
        flex-direction: column;
    }

    .cat-del-footer .cat-btn-sec,
    .cat-del-footer .cat-btn-danger {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================================
   Premium Status Pill Badges
   =========================================================== */
.cat-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    height: 32px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font);
    letter-spacing: 0.01em;
    border: 1.5px solid transparent;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
        background 0.18s ease, border-color 0.18s ease;
}

.cat-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: box-shadow 0.18s ease;
}

.cat-status-show {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
    color: var(--green);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--green) 12%, transparent);
}

.cat-status-show .cat-status-dot {
    background: var(--green);
    box-shadow: 0 0 5px color-mix(in srgb, var(--green) 55%, transparent);
}

.cat-status-show:hover {
    background: color-mix(in srgb, var(--green) 16%, transparent);
    border-color: color-mix(in srgb, var(--green) 45%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 20%, transparent);
}

.cat-status-hide {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--red);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--red) 12%, transparent);
}

.cat-status-hide .cat-status-dot {
    background: var(--red);
    box-shadow: 0 0 5px color-mix(in srgb, var(--red) 55%, transparent);
}

.cat-status-hide:hover {
    background: color-mix(in srgb, var(--red) 16%, transparent);
    border-color: color-mix(in srgb, var(--red) 45%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--red) 20%, transparent);
}

.cat-status-badge:active {
    transform: scale(0.97);
    box-shadow: none;
    transition: transform 0.1s ease;
}

.cat-status-badge:focus {
    outline: none;
}

.cat-status-badge:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

[data-theme="dark"] .cat-status-show {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
}

[data-theme="dark"] .cat-status-hide {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    border-color: color-mix(in srgb, var(--red) 25%, transparent);
}

/* ── 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;
}

/* Attributes chip — purple palette */
.cat-count-chip--attr {
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple);
    border: 1.5px solid var(--purple);
}

.cat-count-chip--attr .cat-chip-badge {
    background: var(--purple);
    color: #fff;
}

.cat-count-chip--attr:hover {
    background: var(--purple);
    color: #fff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--purple) 30%, transparent);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ===========================================================
   Category Module — End
=========================================================== */

/* ===========================================================
   Premium Image Upload Zone  (global reusable component)
   =========================================================== */

.upl-zone {
    width: 100%;
}

.upl-input {
    display: none !important;
}

/* ── Drop / Empty State ── */
.upl-drop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 180px;
    height: 160px;
    border: 2px dashed color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 14px;
    background: var(--primary-bg);
    cursor: pointer;
    padding: 28px 20px;
    text-align: center;
    margin: 0;
    text-decoration: none;
    transition: border-color 0.22s ease, background 0.22s ease,
        transform 0.22s ease, box-shadow 0.22s ease;
}

.upl-drop-area:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    transform: scale(1.01);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.upl-zone.upl-dragging .upl-drop-area {
    border-style: solid;
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    transform: scale(1.01);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.upl-icon-wrap {
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease;
    margin-bottom: 2px;
}

.upl-drop-area:hover .upl-icon-wrap,
.upl-zone.upl-dragging .upl-icon-wrap {
    transform: translateY(-3px) scale(1.08);
}

.upl-icon {
    font-size: 22px;
    color: var(--primary-color);
}

.upl-drag-text {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--black-color);
    margin: 0;
    line-height: 1.4;
}

.upl-divider {
    font-size: 12px;
    color: color-mix(in srgb, var(--black-color) 40%, transparent);
    font-weight: 400;
    line-height: 1;
}

.upl-choose-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    transition: background 0.18s ease, box-shadow 0.18s ease;
    line-height: 1.4;
    pointer-events: none;
}

.upl-drop-area:hover .upl-choose-btn {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.upl-formats {
    font-size: 11px;
    color: color-mix(in srgb, var(--black-color) 38%, transparent);
    margin: 2px 0 0;
    letter-spacing: 0.3px;
}

/* ── Preview State ── */
/* .upl-preview-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
} */

.upl-img-box {
    position: relative;
    display: block;
    cursor: pointer;
    width: 180px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    background: var(--primary-bg);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.upl-img-box:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.upl-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.28s ease;
}

.upl-img-box:hover .upl-img {
    transform: scale(1.04);
}

/* Hover overlay — visible only when pointer is over the image */
.upl-change-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: color-mix(in srgb, var(--black-color) 50%, transparent);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.upl-img-box:hover .upl-change-overlay,
.upl-img-box:focus-visible .upl-change-overlay {
    opacity: 1;
}

.upl-change-overlay i {
    font-size: 22px;
    color: var(--white-color);
}

.upl-change-overlay span {
    font-size: 12px;
    font-weight: 500;
    color: var(--white-color);
    letter-spacing: 0.3px;
}

.upl-img-box:focus {
    outline: none;
}

.upl-img-box:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* ── Dark Mode ── */
[data-theme="dark"] .upl-drop-area {
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

[data-theme="dark"] .upl-drop-area:hover,
[data-theme="dark"] .upl-zone.upl-dragging .upl-drop-area {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

[data-theme="dark"] .upl-icon-wrap {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .upl-icon {
    color: var(--accent-color);
}

[data-theme="dark"] .upl-choose-btn {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

[data-theme="dark"] .upl-drop-area:hover .upl-choose-btn {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

[data-theme="dark"] .upl-img-box {
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .upl-img-box:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

[data-theme="dark"] .upl-change-overlay {
    background: color-mix(in srgb, var(--white-color) 60%, transparent);
}

[data-theme="dark"] .upl-change-overlay i,
[data-theme="dark"] .upl-change-overlay span {
    color: var(--black-color);
}

[data-theme="dark"] .upl-img-box:focus-visible {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

/* ===========================================================
   Upload Zone — End
   =========================================================== */

/* ===========================================================
   Attribute Tag Chip Input
   =========================================================== */

.attr-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--black-color) 11%, transparent);
    border-radius: 9px;
    background: var(--assest-color);
    cursor: text;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.attr-tags-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.attr-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    white-space: nowrap;
    animation: catFadeUp 0.15s ease both;
    line-height: 1.4;
}

.attr-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    border-radius: 4px;
    font-size: 10px;
    flex-shrink: 0;
    line-height: 1;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.attr-tag-remove:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.attr-tag-input {
    flex: 1;
    min-width: 100px;
    padding: 2px 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
}

.attr-tag-input::placeholder {
    color: color-mix(in srgb, var(--black-color) 33%, transparent);
}

/* Dark mode */
[data-theme="dark"] .attr-tags-wrap {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 16%, transparent);
}

[data-theme="dark"] .attr-tags-wrap:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .attr-tag {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .attr-tag-remove:hover {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    opacity: 1;
}

/* ===========================================================
   Attribute Tag Chip Input — End
   =========================================================== */

/* ===========================================================
   Attribute Form — Premium Radio Button — Required Field
   =========================================================== */

.attr-radio-group {
    display: flex;
    gap: 10px;
}

.attr-radio-opt {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-radius: 9px;
    border: 1.5px solid color-mix(in srgb, var(--black-color) 14%, transparent);
    background: var(--white-color);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    margin: 0;
    min-width: 0;
}

.attr-radio-opt:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    background: var(--primary-bg);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Hidden native radio — stays in DOM for form submission & a11y */
.attr-radio-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}

/* Custom radio circle */
.attr-radio-control {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--black-color) 26%, transparent);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Inner filled dot */
.attr-radio-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
    transform: scale(0);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Radio label text */
.attr-radio-label {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    transition: color 0.2s ease, font-weight 0.2s ease;
    white-space: nowrap;
}

/* ── Checked: control ring ── */
.attr-radio-opt input[type="radio"]:checked~.attr-radio-control {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* ── Checked: inner dot springs in ── */
.attr-radio-opt input[type="radio"]:checked~.attr-radio-control .attr-radio-dot {
    transform: scale(1);
}

/* ── Checked: label strengthens ── */
.attr-radio-opt input[type="radio"]:checked~.attr-radio-label {
    color: var(--black-color);
    font-weight: 600;
}

/* ── Checked: card gets accent border + tint ── */
.attr-radio-opt:has(input[type="radio"]:checked) {
    border-color: var(--primary-color);
    background: var(--primary-bg);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* ── Keyboard focus ring ── */
.attr-radio-opt input[type="radio"]:focus-visible~.attr-radio-control {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ── Responsive: stack vertically on very small screens ── */
@media (max-width: 359px) {
    .attr-radio-group {
        flex-direction: column;
    }
}

/* ── Dark Mode ── */
[data-theme="dark"] .attr-radio-opt {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .attr-radio-opt:hover {
    border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .attr-radio-dot {
    background: var(--accent-color);
}

[data-theme="dark"] .attr-radio-opt input[type="radio"]:checked~.attr-radio-control {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .attr-radio-opt:has(input[type="radio"]:checked) {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .attr-radio-opt input[type="radio"]:focus-visible~.attr-radio-control {
    outline-color: var(--accent-color);
}

/* ===========================================================
   Attribute Form — Premium Radio Button — Required Field — End
   =========================================================== */

/* ===========================================================
   Segmented Toggle — Premium Pill-Style Radio Switch
   =========================================================== */

.seg-toggle {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    height: 42px;
    padding: 4px;
    border-radius: 13px;
    border: 1.5px solid color-mix(in srgb, var(--black-color) 13%, transparent);
    background: var(--white-color);
    box-sizing: border-box;
}

/* Sliding active pill indicator */
.seg-toggle-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 10px;
    background: var(--accent-color);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(250, 204, 21, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

/* Move pill to second position */
.seg-toggle[data-seg-active="1"] .seg-toggle-pill {
    transform: translateX(100%);
}

/* Each option label */
.seg-toggle-opt {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    margin: 0;
    border-radius: 9px;
    -webkit-tap-highlight-color: transparent;
}

.seg-toggle-opt:hover:not(:has(input:checked)) {
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
}

/* Hide native radio — stays in DOM for form submission & a11y */
.seg-toggle-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}

/* Label text */
.seg-toggle-label {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: color-mix(in srgb, var(--black-color) 48%, transparent);
    transition: color 0.26s ease, font-weight 0.18s ease;
    user-select: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Active state — dark text on the warm yellow pill */
.seg-toggle-opt:has(input[type="radio"]:checked) .seg-toggle-label {
    color: #18180A;
    font-weight: 600;
}

/* Keyboard focus ring */
.seg-toggle-opt:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 9px;
}

/* ── Dark Mode ── */
[data-theme="dark"] .seg-toggle {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent);
}

[data-theme="dark"] .seg-toggle-pill {
    background: var(--accent-color);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.35),
        0 3px 12px rgba(250, 204, 21, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .seg-toggle-opt:hover:not(:has(input:checked)) {
    background: color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .seg-toggle-label {
    color: color-mix(in srgb, var(--black-color) 52%, transparent);
}

[data-theme="dark"] .seg-toggle-opt:has(input[type="radio"]:checked) .seg-toggle-label {
    color: #0F0F0A;
    font-weight: 600;
}

[data-theme="dark"] .seg-toggle-opt:has(input[type="radio"]:focus-visible) {
    outline-color: var(--accent-color);
}

.seg-toggle--yn .seg-toggle-pill {
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.26s ease,
        box-shadow 0.26s ease;
}

.cat-yn-yes {
    color: var(--green);
    font-weight: 600;
    font-size: 15.5px;
}

.cat-yn-no {
    color: var(--red);
    font-weight: 600;
    font-size: 15.5px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .seg-toggle-pill {
        transition: none !important;
    }

    .seg-toggle-label {
        transition: none !important;
    }
}

/* ===========================================================
   Segmented Toggle — End
   =========================================================== */

/* ===========================================================
   Entrance Animations — Sidebar & Header
   =========================================================== */

/* ── Keyframes ── */

@keyframes sb-slide-in {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

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

@keyframes sb-item-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

@keyframes sb-bottom-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

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

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

@keyframes hdr-item-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

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

/* ── Sidebar ── */

.sidebar {
    animation: sb-slide-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sidebar .side-head {
    animation: sb-item-in 0.30s ease-out 40ms both;
}

/* Base rule — delay overridden per-item by nth-child below */
.sidebar .side-menu>li,
.sidebar .side-menu>p.partition {
    animation: sb-item-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 50ms;
}

/* Stagger: 50ms base, 20ms step — items cascade in alongside the sidebar slide */
.sidebar .side-menu> :nth-child(1) {
    animation-delay: 50ms;
}

.sidebar .side-menu> :nth-child(2) {
    animation-delay: 70ms;
}

.sidebar .side-menu> :nth-child(3) {
    animation-delay: 90ms;
}

.sidebar .side-menu> :nth-child(4) {
    animation-delay: 110ms;
}

.sidebar .side-menu> :nth-child(5) {
    animation-delay: 130ms;
}

.sidebar .side-menu> :nth-child(6) {
    animation-delay: 150ms;
}

.sidebar .side-menu> :nth-child(7) {
    animation-delay: 170ms;
}

.sidebar .side-menu> :nth-child(8) {
    animation-delay: 190ms;
}

.sidebar .side-menu> :nth-child(9) {
    animation-delay: 210ms;
}

.sidebar .side-menu> :nth-child(10) {
    animation-delay: 230ms;
}

.sidebar .side-menu> :nth-child(11) {
    animation-delay: 250ms;
}

.sidebar .side-menu> :nth-child(12) {
    animation-delay: 270ms;
}

.sidebar .side-menu> :nth-child(13) {
    animation-delay: 290ms;
}

.sidebar .side-menu> :nth-child(14) {
    animation-delay: 310ms;
}

.sidebar .side-menu> :nth-child(15) {
    animation-delay: 330ms;
}

.sidebar .side-menu> :nth-child(16) {
    animation-delay: 350ms;
}

.sidebar .side-menu> :nth-child(17) {
    animation-delay: 370ms;
}

.sidebar .side-menu> :nth-child(18) {
    animation-delay: 390ms;
}

.sidebar .side-menu> :nth-child(19) {
    animation-delay: 410ms;
}

.sidebar .side-menu> :nth-child(20) {
    animation-delay: 430ms;
}

.sidebar .side-menu> :nth-child(21) {
    animation-delay: 450ms;
}

.sidebar .side-menu> :nth-child(22) {
    animation-delay: 470ms;
}

.sidebar .side-menu> :nth-child(23) {
    animation-delay: 490ms;
}

.sidebar .side-menu> :nth-child(24) {
    animation-delay: 510ms;
}

.sidebar .side-menu> :nth-child(25) {
    animation-delay: 530ms;
}

.sidebar .side-menu> :nth-child(26) {
    animation-delay: 550ms;
}

.sidebar .side-menu> :nth-child(27) {
    animation-delay: 570ms;
}

.sidebar .side-menu> :nth-child(28) {
    animation-delay: 590ms;
}

.sidebar .side-menu> :nth-child(29) {
    animation-delay: 610ms;
}

.sidebar .side-menu> :nth-child(30) {
    animation-delay: 630ms;
}

.sb-bottom {
    animation: sb-bottom-in 0.34s ease-out 680ms both;
}

/* ── Submenu: animate on each expand ── */

.sidebar .side-submenu.show,
.sidebar .dropdown-menu.show {
    animation: sb-item-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Header ── */

.header {
    animation: hdr-slide-down 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.header-title-group {
    animation: hdr-item-in 0.38s ease-out 80ms both;
}

/* Base rule — delay overridden per-item by nth-child below */
.header .head-control>* {
    animation: hdr-item-in 0.30s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 120ms;
}

/* Stagger: 120ms base, 50ms step */
.header .head-control> :nth-child(1) {
    animation-delay: 120ms;
}

.header .head-control> :nth-child(2) {
    animation-delay: 170ms;
}

.header .head-control> :nth-child(3) {
    animation-delay: 220ms;
}

.header .head-control> :nth-child(4) {
    animation-delay: 270ms;
}

.header .head-control> :nth-child(5) {
    animation-delay: 320ms;
}

.header .head-control> :nth-child(6) {
    animation-delay: 370ms;
}

.header .head-control> :nth-child(7) {
    animation-delay: 420ms;
}

.header .head-control> :nth-child(8) {
    animation-delay: 470ms;
}

.header .head-control> :nth-child(9) {
    animation-delay: 520ms;
}

.header .head-control> :nth-child(10) {
    animation-delay: 570ms;
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .sidebar .side-head,
    .sidebar .side-menu>li,
    .sidebar .side-menu>p.partition,
    .sb-bottom,
    .sidebar .side-submenu.show,
    .sidebar .dropdown-menu.show,
    .header,
    .header-title-group,
    .header .head-control>* {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===========================================================
   Entrance Animations — End
   =========================================================== */

/* ===========================================================
   Category Selector (csel) — Premium Redesign
   =========================================================== */

/* ── Count badge in card head ── */
.csel-count-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    letter-spacing: 0.04em;
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.18s ease;
    pointer-events: none;
    align-self: center;
}

.csel-count-badge.is-zero {
    opacity: 0;
    transform: scale(0.5);
}

/* ── Search bar ── */
.csel-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.csel-search-ico {
    position: absolute;
    left: 11px;
    font-size: 11px;
    color: color-mix(in srgb, var(--black-color) 38%, transparent);
    pointer-events: none;
    z-index: 1;
    transition: color 0.18s ease;
}

.csel-search-inp {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 32px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--black-color) 11%, transparent);
    background: color-mix(in srgb, var(--black-color) 3%, transparent);
    color: var(--black-color);
    font-size: 13px;
    font-family: var(--font);
    font-weight: 400;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.csel-search-inp::placeholder {
    color: color-mix(in srgb, var(--black-color) 32%, transparent);
}

.csel-search:focus-within .csel-search-ico {
    color: var(--primary-color);
}

.csel-search-inp:focus {
    border-color: var(--primary-color);
    background: var(--white-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.csel-search-clr {
    position: absolute;
    right: 9px;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
    border-radius: 50%;
    cursor: pointer;
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
    font-size: 9px;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.csel-search-clr.show {
    display: flex;
}

.csel-search-clr:hover {
    background: color-mix(in srgb, var(--black-color) 16%, transparent);
    color: var(--black-color);
    transform: scale(1.12);
}

/* ── Quick-action bar (Select All | Clear All) ── */
.csel-quick-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--black-color) 9%, transparent);
    background: color-mix(in srgb, var(--black-color) 2%, transparent);
    overflow: hidden;
}

.csel-quick-btn {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    color: color-mix(in srgb, var(--black-color) 52%, transparent);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    padding: 7px 10px;
    transition: color 0.15s ease, background 0.15s ease;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.01em;
}

.csel-quick-btn:focus {
    outline: none;
}

.csel-quick-btn:focus-visible {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
}

.csel-quick-btn:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
}

.csel-quick-btn:active {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.csel-quick-sep {
    width: 1px;
    height: 18px;
    background: color-mix(in srgb, var(--black-color) 11%, transparent);
    flex-shrink: 0;
}

/* ── Scrollable category list ── */
.csel-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 276px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--black-color) 13%, transparent) transparent;
}

.csel-list::-webkit-scrollbar {
    width: 3px;
}

.csel-list::-webkit-scrollbar-track {
    background: transparent;
}

.csel-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--black-color) 13%, transparent);
    border-radius: 4px;
}

/* ── Each category row ── */
.csel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1.5px solid transparent;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin: 0;
}

.csel-row:hover {
    background: color-mix(in srgb, var(--black-color) 4%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 9%, transparent);
}

.csel-row:has(.csel-cb:checked) {
    background: transparent;
}

.csel-row:has(.csel-cb:checked):hover {
    background: transparent;
    border-color: color-mix(in srgb, var(--primary-color) 68%, transparent);
}

/* Hide native checkbox */
.csel-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}

/* Custom checkbox visual */
.csel-box {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid color-mix(in srgb, var(--black-color) 22%, transparent);
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, border-color 0.18s ease,
        transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease;
}

.csel-row:has(.csel-cb:checked) .csel-box {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primary-color) 30%, transparent);
    transform: scale(1.08);
}

.csel-chk-ico {
    font-size: 8px;
    color: var(--white-color);
    opacity: 0;
    transform: scale(0.4) rotate(-15deg);
    transition: opacity 0.14s ease,
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.csel-row:has(.csel-cb:checked) .csel-chk-ico {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Category name label */
.csel-row-txt {
    flex: 1;
    font-size: 13px;
    font-weight: 400;
    color: color-mix(in srgb, var(--black-color) 76%, transparent);
    font-family: var(--font);
    line-height: 1.4;
    word-break: break-word;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.csel-row:has(.csel-cb:checked) .csel-row-txt {
    color: var(--primary-color);
    font-weight: 600;
}

/* Search highlight */
mark.csel-hl {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
    border-radius: 3px;
    padding: 0 1px;
    font-weight: 600;
    font-style: normal;
}

/* No-results empty state */
.csel-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    text-align: center;
}

.csel-empty.show {
    display: flex;
}

.csel-empty-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: color-mix(in srgb, var(--black-color) 28%, transparent);
}

.csel-empty-lbl {
    font-size: 13px;
    color: color-mix(in srgb, var(--black-color) 40%, transparent);
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.5;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .csel-search-inp {
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 16%, transparent);
}

[data-theme="dark"] .csel-search-inp:focus {
    background: var(--assest-color);
}

[data-theme="dark"] .csel-box {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 28%, transparent);
}

[data-theme="dark"] .csel-row:has(.csel-cb:checked) .csel-box {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

[data-theme="dark"] .csel-quick-bar {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 16%, transparent);
}

[data-theme="dark"] .csel-quick-sep {
    background: color-mix(in srgb, var(--black-color) 18%, transparent);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .csel-list {
        max-height: 200px;
    }
}

/* ===========================================================
   Category Selector — End
   =========================================================== */

/* ===========================================================
   Edit Attribute — Layout & Component Refinements
   =========================================================== */

/* ── Extra animation delay (d4) ── */
.cat-animate-d4 {
    animation-delay: 0.28s;
}

/* ── Category panel: full-height stretch alongside the form card ── */
.attr-edit-row {
    align-items: stretch;
}

.csel-sticky-col {
    display: flex;
    flex-direction: column;
}

.csel-full-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

.csel-full-card>.cat-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.csel-full-card .csel-list {
    flex: 1;
    max-height: none;
    min-height: 60px;
}

/* ── Category row: border-accent active state, no background tint ── */
.csel-row:has(.csel-cb:checked) {
    background: transparent;
}

.csel-row:has(.csel-cb:checked):hover {
    background: transparent;
    border-color: color-mix(in srgb, var(--primary-color) 68%, transparent);
}

/* ── Dark mode: comprehensive csel improvements ── */
[data-theme="dark"] .csel-row {
    border-color: transparent;
}

[data-theme="dark"] .csel-row:hover {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 13%, transparent);
}

[data-theme="dark"] .csel-row:has(.csel-cb:checked) {
    background: transparent;
}

[data-theme="dark"] .csel-row:has(.csel-cb:checked):hover {
    background: transparent;
    border-color: color-mix(in srgb, var(--accent-color) 56%, transparent);
}

[data-theme="dark"] .csel-row-txt {
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
}

[data-theme="dark"] .csel-row:has(.csel-cb:checked) .csel-row-txt {
    color: var(--accent-color);
}

[data-theme="dark"] .csel-search-inp {
    background: color-mix(in srgb, var(--black-color) 7%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 16%, transparent);
    color: var(--black-color);
}

[data-theme="dark"] .csel-search-inp::placeholder {
    color: color-mix(in srgb, var(--black-color) 35%, transparent);
}

[data-theme="dark"] .csel-search-inp:focus {
    background: var(--assest-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .csel-search-clr {
    background: color-mix(in srgb, var(--black-color) 12%, transparent);
    color: color-mix(in srgb, var(--black-color) 52%, transparent);
}

[data-theme="dark"] .csel-search-clr:hover {
    background: color-mix(in srgb, var(--black-color) 20%, transparent);
    color: var(--black-color);
}

[data-theme="dark"] .csel-quick-bar {
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .csel-quick-btn {
    color: color-mix(in srgb, var(--black-color) 54%, transparent);
}

[data-theme="dark"] .csel-quick-btn:hover {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
}

[data-theme="dark"] .csel-quick-btn:focus-visible {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    outline: none;
}

[data-theme="dark"] .csel-quick-sep {
    background: color-mix(in srgb, var(--black-color) 16%, transparent);
}

[data-theme="dark"] .csel-empty-ico {
    background: color-mix(in srgb, var(--black-color) 7%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 13%, transparent);
    color: color-mix(in srgb, var(--black-color) 32%, transparent);
}

[data-theme="dark"] .csel-empty-lbl {
    color: color-mix(in srgb, var(--black-color) 42%, transparent);
}

[data-theme="dark"] mark.csel-hl {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .csel-count-badge {
    background: var(--accent-color);
    color: var(--assest-color);
}

/* ── Modal: subtitle styling ── */
.cat-modal .modal-subtitle {
    font-size: 12px;
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
    margin: 4px 0 0;
    line-height: 1.5;
    font-family: var(--font);
    font-weight: 400;
}

/* ── Modal: dark mode overrides ── */
[data-theme="dark"] .cat-modal .modal-content {
    background: var(--white-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    box-shadow: 0 8px 40px color-mix(in srgb, var(--assest-color) 85%, transparent),
        0 2px 12px color-mix(in srgb, var(--assest-color) 60%, transparent);
}

[data-theme="dark"] .cat-modal .modal-content::before {
    border-top-color: var(--accent-color);
    border-left-color: var(--accent-color);
    border-top-left-radius: 15px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

[data-theme="dark"] .cat-modal .modal-content::after {
    border-bottom-color: var(--accent-color);
    border-right-color: var(--accent-color);
    border-bottom-right-radius: 15px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

[data-theme="dark"] .cat-modal .modal-header {
    background: var(--white-color);
    border-bottom-color: color-mix(in srgb, var(--black-color) 10%, transparent);
}

[data-theme="dark"] .cat-modal .modal-body {
    background: var(--white-color);
}

[data-theme="dark"] .cat-modal .modal-footer {
    background: var(--white-color);
    border-top-color: color-mix(in srgb, var(--black-color) 10%, transparent);
}

[data-theme="dark"] .cat-modal .modal-title {
    color: var(--black-color);
}

[data-theme="dark"] .cat-modal .modal-subtitle {
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
}

[data-theme="dark"] .cat-modal-close-btn {
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
    color: color-mix(in srgb, var(--black-color) 52%, transparent);
}

[data-theme="dark"] .cat-modal-close-btn:hover {
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    color: var(--black-color);
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent);
}

/* ── Responsive: disable full-height on mobile ── */
@media (max-width: 767px) {
    .csel-sticky-col {
        display: block;
    }

    .csel-full-card {
        min-height: auto;
    }

    .csel-full-card>.cat-card-body {
        overflow: visible;
    }

    .csel-full-card .csel-list {
        flex: none;
        max-height: 220px;
    }
}

/* ===========================================================
   Edit Attribute Refinements — End
   =========================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   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;
}

.cat-table-card .article-list-table tbody tr:hover td {
    background: transparent !important;
}

.cat-table-card .article-list-table tbody tr:hover td:first-child {
    border-left-color: transparent !important;
}

[data-theme="dark"] .cat-table-card .article-list-table tbody tr:hover td {
    background: transparent !important;
}

[data-theme="dark"] .cat-table-card .article-list-table tbody tr:hover td:first-child {
    border-left-color: transparent !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 color-mix(in srgb, var(--primary-color) 5%, transparent);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.article-card-row:hover {
    background: var(--primary-bg);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-color) 12%, transparent);
    transform: translateY(-1px);
}

[data-theme="dark"] .article-card-row:hover {
    background: color-mix(in srgb, var(--accent-color) 6%, var(--assest-color));
}

.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;
}

.art-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.art-search-row .cat-search-wrap {
    flex: 1;
    min-width: 200px;
    width: auto;
}

.art-filter-box {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--black-color) 11%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-light) 30%, transparent);
    flex-shrink: 0;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.art-filter-box:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
    outline: none;
}

.art-filter-lbl {
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    white-space: nowrap;
    padding: 0 10px 0 13px;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
}

.art-filter-box .select2-container {
    min-width: 148px;
}

.art-filter-box .select2-container--default .select2-selection--single {
    height: 38px;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
}

.art-filter-box .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1;
    padding: 0 30px 0 10px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
}

.art-filter-box .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    width: 28px;
}

[data-theme="dark"] .art-filter-box {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .art-filter-box:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .art-filter-lbl {
    border-right-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

@media (max-width: 575px) {
    .art-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .art-filter-box {
        width: 100%;
    }

    .art-filter-box .select2-container {
        flex: 1;
        min-width: 0;
    }
}

/* ===========================================================
   User Module
=========================================================== */

/* ----- Form Textarea & Multiselect ----- */
.cat-textarea {
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    resize: vertical;
    min-height: 60px;
}

.cat-multiselect {
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 43px;
}

/* ----- Export Bar ----- */
.usr-export-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.usr-export-note {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.usr-note-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    font-size: 14px;
    flex-shrink: 0;
}

.usr-note-txt {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 58%, transparent);
    line-height: 1.45;
}

.usr-export-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.usr-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1.5px solid;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    outline: none;
    white-space: nowrap;
    background: transparent;
}

.usr-export-btn i {
    font-size: 16px;
}

.usr-export-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.usr-export-btn:active {
    transform: scale(0.97);
    box-shadow: none;
    transition: transform 0.1s ease;
}

.usr-exp-excel {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
    background: color-mix(in srgb, var(--green) 7%, transparent);
}

.usr-exp-excel:hover {
    background: color-mix(in srgb, var(--green) 13%, transparent);
    border-color: color-mix(in srgb, var(--green) 55%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--green) 16%, transparent);
    color: var(--green);
}

.usr-exp-csv {
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
}

.usr-exp-csv:hover {
    background: color-mix(in srgb, var(--accent-color) 13%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

.usr-exp-pdf {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
    background: color-mix(in srgb, var(--red) 7%, transparent);
}

.usr-exp-pdf:hover {
    background: color-mix(in srgb, var(--red) 13%, transparent);
    border-color: color-mix(in srgb, var(--red) 55%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--red) 16%, transparent);
    color: var(--red);
}

[data-theme="dark"] .usr-note-icon-sm {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
}

[data-theme="dark"] .usr-exp-excel {
    background: color-mix(in srgb, var(--green) 9%, transparent);
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
}

[data-theme="dark"] .usr-exp-excel:hover {
    background: color-mix(in srgb, var(--green) 16%, transparent);
    border-color: color-mix(in srgb, var(--green) 45%, transparent);
}

[data-theme="dark"] .usr-exp-csv {
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

[data-theme="dark"] .usr-exp-csv:hover {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
}

[data-theme="dark"] .usr-exp-pdf {
    background: color-mix(in srgb, var(--red) 9%, transparent);
    border-color: color-mix(in srgb, var(--red) 25%, transparent);
}

[data-theme="dark"] .usr-exp-pdf:hover {
    background: color-mix(in srgb, var(--red) 16%, transparent);
    border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

/* ----- Filter Bar ----- */
.usr-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px !important;
}

.usr-search-wrap {
    position: relative;
    flex: 3;
    min-width: 200px;
    /* max-width: 580px; */
}

.usr-search-wrap .cat-search-icon {
    left: 12px;
}

.usr-search-wrap .cat-search-input {
    width: 100%;
}

.usr-filter-group {
    display: flex;
    align-items: center;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--black-color) 13%, transparent);
    border-radius: 10px;
    background: var(--assest-color);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.usr-filter-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.usr-filter-group .usr-sort-label {
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-dark-color);
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.usr-filter-div {
    width: 1px;
    height: 22px;
    background: color-mix(in srgb, var(--black-color) 11%, transparent);
    flex-shrink: 0;
}

.usr-filter-sel {
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    height: 100%;
    padding: 0 32px 0 13px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
    cursor: pointer;
    min-width: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0.5 2.5h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease;
}

.usr-filter-sel:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

[data-theme="dark"] .usr-filter-group {
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent);
    background: var(--assest-color);
}

[data-theme="dark"] .usr-filter-group:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .usr-filter-group .usr-sort-label {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-right-color: color-mix(in srgb, var(--black-color) 18%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .usr-filter-div {
    background: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .usr-filter-sel {
    color: var(--black-color);
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23aaa' d='M5 7L0.5 2.5h9z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .usr-filter-sel:focus {
    background-color: color-mix(in srgb, var(--accent-color) 7%, transparent);
}

/* ----- User Avatar (table) ----- */
.usr-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    display: block;
    margin: 0 auto;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.usr-avatar:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

[data-theme="dark"] .usr-avatar {
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

/* ----- Role Badge ----- */
.usr-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font);
    white-space: nowrap;
    border: 1px solid transparent;
    letter-spacing: 0.2px;
}

.usr-role-owner {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
}

.usr-role-broker {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.usr-role-builder {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.usr-role-agency {
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple);
    border-color: color-mix(in srgb, var(--purple) 28%, transparent);
}

/* ----- Login Type Badge ----- */
.usr-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: default;
    letter-spacing: 0.2px;
}

.usr-login-badge i {
    font-size: 13px;
    flex-shrink: 0;
}

.usr-login-badge:hover {
    transform: translateY(-1px);
}

.usr-login-otp {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-dark-color);
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.usr-login-google {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.usr-login-apple {
    background: color-mix(in srgb, var(--dark) 10%, transparent);
    color: var(--dark);
    border-color: color-mix(in srgb, var(--dark) 25%, transparent);
}

.usr-login-normal {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

[data-theme="dark"] .usr-login-otp {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

[data-theme="dark"] .usr-login-apple {
    background: color-mix(in srgb, var(--black-color) 12%, transparent);
    color: var(--black-color);
    border-color: color-mix(in srgb, var(--black-color) 22%, transparent);
}

/* ----- Remaining Posts Badge ----- */
.usr-post-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid;
    font-family: var(--font);
    letter-spacing: 0.2px;
}

.usr-post-active {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
}

.usr-post-zero {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 16%, transparent);
}

/* ----- Name / Contact Cell ----- */
.usr-name-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.usr-cell-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--black-color);
    line-height: 1.3;
}

.usr-cell-sub {
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
    line-height: 1.3;
}

[data-theme="dark"] .usr-cell-sub {
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
}

/* ----- Package Section Card ----- */
.usr-pkg-card {
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
    border-radius: 10px;
    padding: 18px 18px 4px;
    margin-bottom: 16px;
}

[data-theme="dark"] .usr-pkg-card {
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

/* ----- Info / Note Card ----- */
.usr-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: color-mix(in srgb, var(--blue) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 8px;
}

.usr-info-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--blue) 14%, transparent);
    color: var(--blue);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.usr-info-card-body strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--black-color);
}

.usr-info-card-body span {
    font-size: 13px;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    line-height: 1.5;
}

[data-theme="dark"] .usr-info-card {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    border-color: color-mix(in srgb, var(--blue) 22%, transparent);
}

[data-theme="dark"] .usr-info-card-icon {
    background: color-mix(in srgb, var(--blue) 16%, transparent);
}

/* ----- Form Grid Spacing ----- */
.usr-form-grid .cat-field {
    margin-bottom: 18px !important;
}

/* ----- Sort Label (standalone fallback, overridden by group context) ----- */
.usr-sort-label {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ----- Select2 Multi (City Coverage chips) ----- */
.usr-select2-multi .select2-selection--multiple {
    min-height: 43px !important;
    padding: 5px 8px !important;
    display: flex !important;
    align-items: flex-start !important;
    cursor: text !important;
}

.usr-select2-multi .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 !important;
    width: 100% !important;
}

.usr-select2-multi .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 6px 3px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: var(--primary-bg) !important;
    color: var(--primary-dark-color) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    margin: 0 !important;
    float: none !important;
    animation: catFadeUp 0.15s ease both;
}

.usr-select2-multi .select2-selection__choice__remove {
    color: inherit !important;
    opacity: 0.55 !important;
    margin-right: 0 !important;
    margin-left: 2px !important;
    font-size: 11px !important;
    transition: opacity 0.15s ease !important;
}

.usr-select2-multi .select2-selection__choice__remove:hover {
    opacity: 1 !important;
    background: transparent !important;
    color: inherit !important;
}

.usr-select2-multi .select2-search--inline {
    float: none !important;
}

.usr-select2-multi .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 2px 0 !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    color: var(--black-color) !important;
    min-height: 24px !important;
    height: auto !important;
}

[data-theme="dark"] .usr-select2-multi .select2-selection__choice {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
    color: var(--accent-color) !important;
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent) !important;
}

/* ----- Select2 Single (Package) ----- */
.usr-select2-single .select2-selection--single {
    height: 43px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 36px 0 12px !important;
    background: var(--assest-color) !important;
}

.usr-select2-single .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
    font-size: 14px !important;
    font-family: var(--font) !important;
    color: var(--black-color) !important;
}

.usr-select2-single .select2-selection__placeholder {
    color: color-mix(in srgb, var(--black-color) 35%, transparent) !important;
}

.usr-select2-single .select2-selection__arrow {
    height: 43px !important;
    width: 30px !important;
    right: 8px !important;
    top: 0 !important;
}

.usr-select2-single .select2-selection__arrow b {
    border-color: color-mix(in srgb, var(--black-color) 40%, transparent) transparent transparent !important;
}

.usr-select2-single.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent var(--primary-color) !important;
}

.usr-select2-single .select2-selection__clear {
    color: color-mix(in srgb, var(--black-color) 40%, transparent);
    font-size: 16px;
    line-height: 1;
    transition: color 0.15s ease;
}

.usr-select2-single .select2-selection__clear:hover {
    color: var(--red);
}

[data-theme="dark"] .usr-select2-single .select2-selection--single {
    background: var(--assest-color) !important;
    color: var(--black-color) !important;
}

[data-theme="dark"] .usr-select2-single .select2-selection__rendered {
    color: var(--black-color) !important;
}

[data-theme="dark"] .usr-select2-single.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent var(--accent-color) !important;
}

/* ----- Select2 Dropdown Panel ----- */
.usr-select2-dropdown {
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent) !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 22px color-mix(in srgb, var(--black-color) 10%, transparent) !important;
    background: var(--white-color) !important;
    overflow: hidden !important;
}

.usr-select2-dropdown .select2-search--dropdown {
    padding: 8px 10px !important;
}

.usr-select2-dropdown .select2-search--dropdown .select2-search__field {
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent) !important;
    border-radius: 7px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    color: var(--black-color) !important;
    background: var(--assest-color) !important;
    outline: none !important;
}

.usr-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-bg) !important;
}

.usr-select2-dropdown .select2-results {
    padding: 4px 6px !important;
}

.usr-select2-dropdown .select2-results__option {
    border-radius: 6px !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    color: var(--black-color) !important;
    padding: 8px 12px !important;
    transition: background 0.12s ease !important;
}

.usr-select2-dropdown .select2-results__option--highlighted {
    background: var(--primary-bg) !important;
    color: var(--primary-dark-color) !important;
}

.usr-select2-dropdown .select2-results__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    color: var(--primary-dark-color) !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .usr-select2-dropdown {
    background: var(--white-color) !important;
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent) !important;
    box-shadow: 0 6px 22px color-mix(in srgb, var(--black-color) 25%, transparent) !important;
}

[data-theme="dark"] .usr-select2-dropdown .select2-search--dropdown .select2-search__field {
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent) !important;
    color: var(--black-color) !important;
    background: var(--assest-color) !important;
}

[data-theme="dark"] .usr-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
}

[data-theme="dark"] .usr-select2-dropdown .select2-results__option {
    color: var(--black-color) !important;
}

[data-theme="dark"] .usr-select2-dropdown .select2-results__option--highlighted {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
    color: var(--accent-color) !important;
}

[data-theme="dark"] .usr-select2-dropdown .select2-results__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
    color: var(--accent-color) !important;
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
    .usr-export-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .usr-export-btns {
        width: 100%;
        justify-content: flex-start;
    }

    .usr-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .usr-search-wrap {
        max-width: 100%;
        flex: none;
    }

    .usr-filter-group {
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        border-radius: 10px;
    }

    .usr-filter-group .usr-sort-label {
        height: 38px;
        border-right: none;
        border-bottom: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
        border-radius: 0;
        justify-content: flex-start;
        padding: 0 14px;
    }

    [data-theme="dark"] .usr-filter-group .usr-sort-label {
        border-bottom-color: color-mix(in srgb, var(--black-color) 18%, transparent);
    }

    .usr-filter-div {
        width: 100%;
        height: 1px;
    }

    .usr-filter-sel {
        width: 100%;
        height: 40px;
        padding-left: 14px;
    }
}

/* ----- Package Custom Select ----- */
.pkg-select {
    position: relative;
    width: 100%;
}

.pkg-select-ctrl {
    display: flex;
    align-items: center;
    min-height: 43px;
    padding: 5px 38px 5px 10px;
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent);
    border-radius: 9px;
    background: var(--assest-color);
    cursor: pointer;
    flex-wrap: wrap;
    gap: 5px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    position: relative;
    outline: none;
}

.pkg-select-ctrl:hover {
    border-color: color-mix(in srgb, var(--primary-color) 60%, transparent);
}

.pkg-select.open .pkg-select-ctrl {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.pkg-select-placeholder {
    font-size: 14px;
    color: color-mix(in srgb, var(--black-color) 32%, transparent);
    padding: 1px 2px;
    line-height: 1.3;
}

.pkg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    animation: catFadeUp 0.15s ease both;
    max-width: 100%;
}

.pkg-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.pkg-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    border-radius: 4px;
    font-size: 10px;
    flex-shrink: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.pkg-chip-remove:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.pkg-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--black-color) 38%, transparent);
    font-size: 11px;
    pointer-events: none;
    transition: transform 0.2s ease, color 0.15s ease;
    line-height: 1;
}

.pkg-select.open .pkg-select-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary-color);
}

.pkg-select-drop {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--white-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    border-radius: 10px;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--black-color) 10%, transparent);
    overflow: hidden;
    animation: catFadeUp 0.18s ease both;
}

.pkg-select.open .pkg-select-drop {
    display: block;
}

.pkg-select-search-wrap {
    position: relative;
    padding: 10px 10px 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--black-color) 7%, transparent);
}

.pkg-select-search-icon {
    position: absolute;
    left: 21px;
    top: 50%;
    transform: translateY(-65%);
    color: color-mix(in srgb, var(--black-color) 35%, transparent);
    font-size: 12px;
    pointer-events: none;
}

.pkg-select-search {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    border-radius: 7px;
    padding: 7px 10px 7px 30px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
    background: var(--assest-color);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pkg-select-search::placeholder {
    color: color-mix(in srgb, var(--black-color) 32%, transparent);
}

.pkg-select-search:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-bg);
}

.pkg-select-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 210px;
    overflow-y: auto;
}

.pkg-select-list::-webkit-scrollbar {
    width: 5px;
}

.pkg-select-list::-webkit-scrollbar-track {
    background: transparent;
}

.pkg-select-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--black-color) 13%, transparent);
    border-radius: 4px;
}

.pkg-select-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
    transition: background 0.12s ease;
}

.pkg-select-opt:hover,
.pkg-select-opt.pkg-focused {
    background: var(--primary-bg);
    color: var(--primary-dark-color);
}

.pkg-select-opt.selected {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    color: var(--primary-dark-color);
    font-weight: 500;
}

.pkg-select-opt.hidden-opt,
.pkg-select-opt.search-hidden {
    display: none;
}

.pkg-select-opt-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid color-mix(in srgb, var(--black-color) 20%, transparent);
    font-size: 9px;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.15s ease;
    background: transparent;
}

.pkg-select-opt.selected .pkg-select-opt-check {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.pkg-select-opt-txt {
    flex: 1;
    line-height: 1.35;
}

.pkg-select-empty {
    display: none;
    padding: 16px;
    font-size: 13px;
    color: color-mix(in srgb, var(--black-color) 42%, transparent);
    text-align: center;
    font-family: var(--font);
}

[data-theme="dark"] .pkg-select-ctrl {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .pkg-select-ctrl:hover {
    border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
}

[data-theme="dark"] .pkg-select.open .pkg-select-ctrl {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .pkg-chip {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .pkg-chip-remove:hover {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    opacity: 1;
}

[data-theme="dark"] .pkg-select.open .pkg-select-arrow {
    color: var(--accent-color);
}

[data-theme="dark"] .pkg-select-drop {
    background: var(--white-color);
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--black-color) 26%, transparent);
}

[data-theme="dark"] .pkg-select-search-wrap {
    border-bottom-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .pkg-select-search {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
    color: var(--black-color);
}

[data-theme="dark"] .pkg-select-search:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .pkg-select-opt {
    color: var(--black-color);
}

[data-theme="dark"] .pkg-select-opt:hover,
[data-theme="dark"] .pkg-select-opt.pkg-focused {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .pkg-select-opt.selected {
    background: color-mix(in srgb, var(--accent-color) 11%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .pkg-select-opt.selected .pkg-select-opt-check {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

[data-theme="dark"] .pkg-select-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--black-color) 20%, transparent);
}

/* ===========================================================
   User Module — End
=========================================================== */
/* ── Select2 premium redesign (CSS variables only) ───────────────────────── */

/* Dropdown panel */
.select2-dropdown {
    border: 1.5px solid var(--primary-bg) !important;
    border-radius: 10px !important;
    background: var(--assest-color) !important;
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.10) !important;
    overflow: hidden;
}

.select2-container--default .select2-dropdown--below {
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -2px;
}

.select2-container--default .select2-dropdown--above {
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    margin-bottom: -2px;
}

/* Search input inside dropdown */
.select2-container--default .select2-search--dropdown {
    padding: 8px 10px 6px;
    background: var(--assest-color);
    border-bottom: 1px solid var(--primary-bg);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--primary-bg);
    border-radius: 6px;
    background: var(--assest-color);
    font-size: 13px;
    font-family: var(--font);
    color: inherit;
    outline: none;
    width: 100%;
    transition: border-color 0.2s ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-color);
}

/* ----- Option Items ----- */
.select2-results__option {
    padding: 9px 12px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
    transition: background 0.18s ease, color 0.18s ease;
    border-radius: 6px;
}

/* ----- Hover / Keyboard-Focus ----- */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-bg) !important;
    color: var(--primary-dark-color) !important;
    font-weight: 500;
}

/* ----- Active / Selected ----- */
.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--primary-color) !important;
    color: var(--white-color) !important;
    font-weight: 600;
}

/* ----- Hover on Selected ----- */
.select2-container--default .select2-results__option[aria-selected=true]:hover,
.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background: var(--primary-dark-color) !important;
    color: var(--white-color) !important;
}

/* ----- Disabled ----- */
.select2-container--default .select2-results__option--disabled {
    color: color-mix(in srgb, var(--black-color) 38%, transparent);
    font-style: italic;
}

/* ----- Dark Mode: Option List ----- */
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-dark-color) !important;
    color: var(--black-color) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--primary-color) !important;
    color: var(--black-color) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true]:hover,
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background: var(--primary-dark-color) !important;
    color: var(--black-color) !important;
}

.select2-container--default .select2-selection--single {
    background-color: transparent !important;
    background-image: none !important;
}

/* ----- Dark Mode: Closed-State Contrast Fix ----- */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--assest-color) !important;
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--black-color) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: color-mix(in srgb, var(--black-color) 48%, transparent) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: color-mix(in srgb, var(--black-color) 50%, transparent) transparent transparent transparent !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--assest-color) !important;
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: var(--black-color) !important;
}

[data-theme="dark"] .note-editor.note-frame {
    border-color: color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .note-toolbar {
    background: var(--assest-color);
    border-bottom-color: color-mix(in srgb, var(--black-color) 8%, transparent);
}

[data-theme="dark"] .note-btn {
    background: transparent;
    border-color: color-mix(in srgb, var(--black-color) 15%, transparent);
    color: var(--black-color);
}

[data-theme="dark"] .note-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--black-color);
}

[data-theme="dark"] .note-editable {
    background: var(--white-color);
    color: var(--black-color);
}

[data-theme="dark"] .note-statusbar {
    background: var(--assest-color);
    border-top-color: color-mix(in srgb, var(--black-color) 8%, transparent);
}

[data-theme="dark"] .note-placeholder {
    color: color-mix(in srgb, var(--black-color) 40%, transparent);
}

[data-theme="dark"] .note-dropdown-menu {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .note-dropdown-menu .note-dropdown-item {
    color: var(--black-color);
}

[data-theme="dark"] .note-dropdown-menu .note-dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* ── Section Module ─────────────────────────────────────────────────── */

/* Staggered entry: Fade + Slide Up. Runs once via CSS animation-delay
   driven by the inline --sec-i custom property set at render time.
   No JS timers involved — the compositor handles timing for 60 FPS. */
@keyframes secFadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.sec-list-card {
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px;
    opacity: 0;
    transform: translateY(14px);
    animation: secFadeSlideUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--sec-i, 0) * 70ms);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.sec-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .sec-list-card {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .sec-list-card:hover {
        transform: none;
    }
}

.sec-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1.5px solid color-mix(in srgb, var(--black-color) 7%, transparent);
    gap: 12px;
    flex-wrap: wrap;
    transition: border-color 0.22s ease;
}

.sec-list-card:hover .sec-card-top {
    border-bottom-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.sec-list-card:hover .sec-card-badges {
    border-bottom-color: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.sec-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.sec-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 18px;
    transition: transform 0.22s ease;
}

[data-theme="dark"] .sec-card-icon {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}

.sec-list-card:hover .sec-card-icon {
    transform: scale(1.09);
}

.sec-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--black-color);
    margin: 0 0 2px;
    font-family: var(--font);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sec-card-subtitle {
    font-size: 12px;
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
    font-family: var(--font);
}

.sec-card-actions-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sec-card-actions-top .cat-btn-prim,
.sec-card-actions-top .cat-btn-sec {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sec-card-actions-top .cat-btn-prim:hover,
.sec-card-actions-top .cat-btn-sec:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--black-color) 12%, transparent);
}

.sec-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 22px;
    border-bottom: 1.5px solid color-mix(in srgb, var(--black-color) 6%, transparent);
    transition: border-color 0.22s ease;
}

.sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    line-height: 1.4;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.sec-badge i {
    font-size: 11px;
    opacity: 0.8;
}

/* 2. Content type badge — solid contrast in both light & dark mode */
.sec-badge-type {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--white-color));
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

[data-theme="dark"] .sec-badge-type {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--primary-color) 48%, transparent);
}

.sec-badge-layout {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--white-color));
    color: color-mix(in srgb, var(--accent-color) 90%, #5a3e00);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

[data-theme="dark"] .sec-badge-layout {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--assest-color));
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.sec-badge-info {
    background: color-mix(in srgb, var(--black-color) 5%, var(--white-color));
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 11%, transparent);
}

[data-theme="dark"] .sec-badge-info {
    background: color-mix(in srgb, var(--black-color) 8%, var(--assest-color));
    color: color-mix(in srgb, var(--white-color) 68%, var(--black-color));
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

.sec-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 22px;
    flex-wrap: wrap;
}

/* ── Sortable Items ───────────────────────────────────────────────── */
.sec-sort-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--black-color) 4%, var(--white-color));
    border: 1.5px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    margin-bottom: 8px;
    cursor: grab;
    transition: background 0.18s, box-shadow 0.18s, border-color 0.18s;
    user-select: none;
}

[data-theme="dark"] .sec-sort-item {
    background: color-mix(in srgb, var(--black-color) 6%, var(--assest-color));
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

.sec-sort-item:hover {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--white-color));
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

[data-theme="dark"] .sec-sort-item:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--assest-color));
}

.sec-sort-item.ui-sortable-helper {
    box-shadow: 0 8px 32px color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--white-color));
    cursor: grabbing;
}

[data-theme="dark"] .sec-sort-item.ui-sortable-helper {
    background: color-mix(in srgb, var(--primary-color) 15%, var(--assest-color));
}

.sec-sort-handle {
    color: color-mix(in srgb, var(--black-color) 32%, transparent);
    font-size: 14px;
    flex-shrink: 0;
}

.sec-sort-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--black-color);
    font-family: var(--font);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 3. Sortable sequence numbers — solid primary pill, white text, visible in both modes */
.sec-sort-num {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font);
    opacity: 0.9;
}

[data-theme="dark"] .sec-sort-num {
    background: var(--primary-color);
    color: #ffffff;
    opacity: 1;
}

/* ── Modal Premium Overrides ─────────────────────────────────────── */
.cat-modal .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    background: var(--white-color);
    overflow: hidden;
}

[data-theme="dark"] .cat-modal .modal-content {
    background: var(--assest-color);
}

.cat-modal .modal-header {
    border-bottom: 1.5px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    padding: 20px 24px 18px;
    background: transparent;
    align-items: center;
}

.cat-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-color);
    font-family: var(--font);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-modal .modal-body {
    padding: 22px 24px;
}

.cat-modal .modal-footer {
    border-top: 1.5px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    padding: 16px 24px;
    background: transparent;
    gap: 8px;
    justify-content: flex-end;
}

/* Edit modal — scroll long field list */
/* #exampleModal .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 210px);
} */

/* Sortable modal — fixed header/footer, only body scrolls */
#sortableModal .modal-content {
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sortableModal .modal-header,
#sortableModal .modal-footer {
    flex-shrink: 0;
}

#sortableModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

#sortableScrollArea {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding: 16px 20px;
}

#sortableScrollArea::-webkit-scrollbar {
    width: 4px;
}

#sortableScrollArea::-webkit-scrollbar-track {
    background: transparent;
}

#sortableScrollArea::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--black-color) 18%, transparent);
    border-radius: 4px;
}

/* ===========================================================
   Global Custom Scrollbar
   Applies the Sidebar scrollbar design to Select2 dropdowns,
   modals, and table-responsive areas.
   Note: main page scroll (html) and .body-content reuse the
   Sidebar scrollbar rules directly — see "Sidebar Scrollbar".
   Width: 6px (medium — sidebar uses 4px).
=========================================================== */

.select2-results__options,
.modal-body,
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color) 35%, transparent) color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.select2-results__options::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.select2-results__options::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color) 35%, transparent);
    border-radius: 6px;
    transition: background 0.2s ease;
}

.select2-results__options::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary-color) 65%, transparent);
}

.select2-results__options::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border-radius: 6px;
}

[data-theme="dark"] .select2-results__options,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .table-responsive {
    scrollbar-color: color-mix(in srgb, var(--accent-color) 45%, transparent) color-mix(in srgb, var(--accent-color) 6%, transparent);
}

[data-theme="dark"] .select2-results__options::-webkit-scrollbar-thumb,
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-color) 45%, transparent);
}

[data-theme="dark"] .select2-results__options::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-color) 75%, transparent);
}

[data-theme="dark"] .select2-results__options::-webkit-scrollbar-track,
[data-theme="dark"] .modal-body::-webkit-scrollbar-track,
[data-theme="dark"] .table-responsive::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

/* ===========================================================
   Global Custom Scrollbar — End
=========================================================== */
#datatable th:nth-child(2),
#datatable td:nth-child(2) {
    text-align: left !important;
}

#datatable td:has(> a > .cat-thumb),
#datatable td:has(> .cat-thumb),
.cat-table-card .table tbody td:has(> a > .cat-thumb),
.cat-table-card .table tbody td:has(> .cat-thumb) {
    vertical-align: middle !important;
}

.cat-table-card .table tbody td > a:has(> .cat-thumb) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.cat-table-card td a.proj-upload-btn {
    color: color-mix(in srgb, var(--purple) 85%, var(--black-color)) !important;
    border-color: color-mix(in srgb, var(--purple) 30%, transparent) !important;
    background: color-mix(in srgb, var(--purple) 10%, transparent) !important;
}

.cat-table-card td a.proj-upload-btn:hover {
    background: color-mix(in srgb, var(--purple) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--purple) 48%, transparent) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--purple) 14%, transparent) !important;
    color: color-mix(in srgb, var(--purple) 85%, var(--black-color)) !important;
}

[data-theme="dark"] .cat-table-card td a.proj-upload-btn {
    color: var(--purple) !important;
    border-color: color-mix(in srgb, var(--purple) 42%, transparent) !important;
    background: color-mix(in srgb, var(--purple) 15%, transparent) !important;
}

[data-theme="dark"] .cat-table-card td a.proj-upload-btn:hover {
    background: color-mix(in srgb, var(--purple) 25%, transparent) !important;
    border-color: color-mix(in srgb, var(--purple) 60%, transparent) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--purple) 18%, transparent) !important;
}

.cat-search-card .usr-filter-group {
    /* width: 50%; */
    flex-shrink: 0;
}

.proj-img-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.proj-thumb {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    flex-shrink: 0;
    display: block;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* .proj-thumb:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 16%, transparent);
} */

.proj-title-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.proj-title-main {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--black-color);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.proj-title-sub {
    font-size: 11.5px;
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

[data-theme="dark"] .proj-title-sub {
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
}

.proj-price-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: color-mix(in srgb, var(--accent-color) 90%, var(--black-color));
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    white-space: nowrap;
    font-family: var(--font);
}

[data-theme="dark"] .proj-price-badge {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.proj-view-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid var(--primary-light);
    font-family: var(--font);
}

[data-theme="dark"] .proj-view-badge {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--black-color);
    border-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

#map {
    height: 380px;
    width: 100% !important;
    border-radius: 12px;
    overflow: hidden;
}

.proj-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.proj-nearby-item {
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--white-color);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.proj-nearby-item.is-checked {
    border-color: var(--primary-light);
    background: var(--primary-bg);
}

.proj-nearby-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.proj-nearby-check-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.proj-nearby-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--black-color);
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}

.proj-nearby-fields {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.proj-unit-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: color-mix(in srgb, var(--primary-color) 3%, var(--white-color));
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

.proj-floor-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: color-mix(in srgb, var(--primary-color) 3%, var(--white-color));
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

.proj-unit-row .cat-field,
.proj-floor-row .cat-field {
    flex: 1;
    margin-bottom: 0 !important;
    min-width: 0;
}

.proj-row-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 22px;
}

.proj-floor-row .proj-row-remove {
    padding-top: 0;
}

.proj-dyn-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
    margin-top: 8px;
}

.proj-dyn-add-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    color: var(--primary-color);
    text-decoration: none;
    transform: translateY(-1px);
}

.proj-dyn-add-btn:active {
    transform: translateY(0);
}

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

.cat-card-head .proj-dyn-add-btn {
    margin-top: 0;
}

[data-theme="dark"] .proj-dyn-add-btn:focus,
[data-theme="dark"] .proj-dyn-add-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.proj-dyn-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
    color: var(--red);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
    font-size: 13px;
}

.proj-dyn-remove-btn:hover {
    background: color-mix(in srgb, var(--red) 20%, transparent);
    border-color: color-mix(in srgb, var(--red) 45%, transparent);
    color: var(--red);
    text-decoration: none;
    transform: scale(1.08);
}

.proj-dyn-remove-btn:active {
    transform: scale(1);
}

.proj-dyn-remove-btn:focus,
.proj-dyn-remove-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}

/* ── Premium file input ── */
.proj-file-input {
    width: 100%;
    height: 42px;
    padding: 4px 12px 4px 6px;
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    border-radius: 8px;
    background: var(--white-color);
    color: var(--black-color);
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.proj-file-input::file-selector-button {
    height: 34px;
    padding: 0 14px;
    margin-right: 10px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.proj-file-input:hover::file-selector-button {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 48%, transparent);
}

.proj-file-input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* ── Brochure upload container ── */
.proj-brochure-wrap {
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    border-radius: 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--primary-color) 2%, var(--white-color));
}

.proj-brochure-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.proj-brochure-row .proj-file-input {
    flex: 1;
    min-width: 0;
}

.proj-file-display {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    background: var(--white-color);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.proj-file-display:hover {
    border-color: var(--primary-light);
    background: var(--primary-bg);
}

.proj-file-display.has-file {
    border-color: color-mix(in srgb, var(--primary-color) 28%, transparent);
    background: var(--primary-bg);
}

.proj-file-display-icon {
    font-size: 14px;
    color: color-mix(in srgb, var(--black-color) 30%, transparent);
    flex-shrink: 0;
    transition: color 0.18s ease;
}

.proj-file-display.has-file .proj-file-display-icon {
    color: var(--primary-color);
}

.proj-file-display-name {
    font-size: 13px;
    color: color-mix(in srgb, var(--black-color) 38%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    line-height: 1;
    transition: color 0.18s ease;
}

.proj-file-display.has-file .proj-file-display-name {
    color: var(--primary-dark-color);
    font-weight: 500;
}

[data-theme="dark"] .proj-file-display {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

[data-theme="dark"] .proj-file-display:hover {
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    background: color-mix(in srgb, var(--accent-color) 6%, var(--assest-color));
}

[data-theme="dark"] .proj-file-display.has-file {
    border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--assest-color));
}

[data-theme="dark"] .proj-file-display-icon {
    color: color-mix(in srgb, var(--black-color) 40%, transparent);
}

[data-theme="dark"] .proj-file-display.has-file .proj-file-display-icon {
    color: var(--accent-color);
}

[data-theme="dark"] .proj-file-display.has-file .proj-file-display-name {
    color: var(--black-color);
}

.proj-bro-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    border-radius: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all 0.18s ease;
    border: none;
}

.proj-bro-upload-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 85%, var(--black-color));
    color: var(--white-color);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.proj-bro-upload-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.proj-filelist {
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    padding: 8px 2px 0;
    line-height: 1.6;
}

.proj-filelist:empty {
    display: none;
}

/* ── Floor plan image preview ── */
.proj-floor-preview {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--white-color));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--black-color) 8%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.proj-floor-preview:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 15%, transparent);
}

/* ── Dark mode ── */
[data-theme="dark"] .proj-nearby-item {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .proj-nearby-item.is-checked {
    border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--assest-color));
}

[data-theme="dark"] .proj-nearby-check-row input[type="checkbox"] {
    accent-color: var(--accent-color);
}

[data-theme="dark"] .proj-nearby-label {
    color: var(--black-color);
}

[data-theme="dark"] .proj-unit-row,
[data-theme="dark"] .proj-floor-row {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    border-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .proj-brochure-wrap {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

[data-theme="dark"] .proj-filelist {
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
}

[data-theme="dark"] .proj-floor-preview {
    border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--assest-color));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--black-color) 25%, transparent);
}

[data-theme="dark"] .proj-floor-preview:hover {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 38%, transparent);
}

[data-theme="dark"] .proj-dyn-add-btn {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .proj-dyn-add-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .proj-file-input {
    background: var(--assest-color);
    color: var(--black-color);
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color-scheme: dark;
}

[data-theme="dark"] .proj-file-input::file-selector-button {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .proj-file-input:hover::file-selector-button {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
}

[data-theme="dark"] .proj-file-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .proj-bro-upload-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color);
}

[data-theme="dark"] .proj-bro-upload-btn:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--black-color) 15%, var(--accent-color)) 0%, var(--accent-color) 100%);
    color: var(--primary-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

@media (max-width: 767px) {
    .proj-brochure-row {
        flex-direction: column;
        align-items: stretch;
    }

    .proj-bro-upload-btn {
        justify-content: center;
    }

    .proj-floor-row {
        flex-wrap: wrap;
    }

    .proj-floor-row .cat-field {
        flex: 1 1 calc(50% - 7px);
    }

    .proj-floor-preview {
        width: 56px;
        height: 56px;
    }

    .proj-unit-row {
        flex-wrap: wrap;
    }

    .proj-unit-row .cat-field {
        flex: 1 1 calc(33% - 8px);
    }
}

/* ── Multi-Select Chips – cat-card scope ── Start */
.cat-card .select2-container--default .select2-selection--multiple {
    min-height: 43px !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: flex-start !important;
    cursor: text !important;
    background: var(--assest-color) !important;
}

.cat-card .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 0 !important;
    width: 100% !important;
    line-height: normal !important;
}

.cat-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px 3px 6px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    background: var(--primary-bg) !important;
    color: var(--primary-dark-color) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
    margin: 0 !important;
    float: none !important;
    max-width: 220px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.cat-card .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--white-color)) !important;
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent) !important;
}

.cat-card .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;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--primary-dark-color) !important;
    opacity: 0.45 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    transition: opacity 0.15s ease, background 0.15s ease !important;
}

.cat-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent) !important;
    color: var(--primary-dark-color) !important;
}

.cat-card .select2-container--default .select2-selection--multiple .select2-search--inline {
    float: none !important;
}

.cat-card .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 2px 0 !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    color: var(--black-color) !important;
    min-height: 24px !important;
    height: auto !important;
    background: transparent !important;
}

[data-theme="dark"] .cat-card .select2-container--default .select2-selection--multiple {
    background: var(--assest-color) !important;
}

[data-theme="dark"] .cat-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
    color: var(--accent-color) !important;
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent) !important;
}

[data-theme="dark"] .cat-card .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent) !important;
}

[data-theme="dark"] .cat-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--accent-color) !important;
}

[data-theme="dark"] .cat-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
}
/* ── Multi-Select Chips – cat-card scope ── End */

/* ── Multi-Select Dropdown Selected State ── Start */
.select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected=true] {
    background: var(--primary-bg) !important;
    color: var(--primary-dark-color) !important;
    font-weight: 500 !important;
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected=true]:hover,
.select2-results__options[aria-multiselectable="true"] .select2-results__option--highlighted[aria-selected=true] {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--white-color)) !important;
    color: var(--primary-dark-color) !important;
    box-shadow: inset 3px 0 0 var(--primary-color);
}

[data-theme="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected=true] {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--assest-color)) !important;
    color: var(--black-color) !important;
    box-shadow: inset 3px 0 0 var(--accent-color);
}

[data-theme="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected=true]:hover,
[data-theme="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option--highlighted[aria-selected=true] {
    background: color-mix(in srgb, var(--accent-color) 20%, var(--assest-color)) !important;
    color: var(--black-color) !important;
    box-shadow: inset 3px 0 0 var(--accent-color);
}
/* ── Multi-Select Dropdown Selected State ── End */

.mimg-slot-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    margin-right: 16px;
}

.mimg-name-input {
    flex: 1;
    min-width: 0;
    max-width: 320px;
    margin-bottom: 0;
}

.mimg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 4px 0;
}

.mimg-item {
    position: relative;
    flex: 0 0 auto;
}

.mimg-item .upl-drop-area {
    width: 140px;
    height: 130px;
    padding: 14px 10px;
    border-radius: 10px;
    gap: 5px;
}

.mimg-item .upl-img-box {
    width: 140px;
    height: 130px;
    border-radius: 10px;
}

.mimg-item .upl-drag-text {
    font-size: 11px;
}

.mimg-item .upl-divider {
    font-size: 10px;
}

.mimg-item .upl-icon {
    font-size: 18px;
}

.mimg-item .upl-choose-btn {
    font-size: 11px;
    padding: 5px 10px;
    gap: 4px;
}

.mimg-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--white-color);
    background: var(--red);
    color: var(--white-color);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}

.mimg-remove-btn:hover {
    transform: scale(1.18);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--red) 40%, transparent);
}

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

@media (max-width: 576px) {
    .mimg-grid {
        gap: 12px;
    }

    .mimg-item .upl-drop-area,
    .mimg-item .upl-img-box {
        width: 120px;
        height: 110px;
    }

    .mimg-item .upl-drop-area {
        padding: 10px 8px;
    }

    .mimg-name-input {
        max-width: 100%;
    }
}

.mimg-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mimg-collapse-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
}

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

.mimg-collapse-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.26s ease;
}

.mimg-collapse-btn.mimg-collapsed .mimg-collapse-icon {
    transform: rotate(-90deg);
}

.mimg-slot-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--red) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 20%, transparent);
    color: var(--red);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.mimg-slot-remove-btn:hover {
    background: color-mix(in srgb, var(--red) 16%, transparent);
    border-color: color-mix(in srgb, var(--red) 36%, transparent);
    transform: scale(1.06);
}

.mimg-slot-remove-btn:focus,
.mimg-slot-remove-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}

[data-theme="dark"] .mimg-collapse-btn {
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
}

[data-theme="dark"] .mimg-collapse-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .mimg-collapse-btn:focus,
[data-theme="dark"] .mimg-collapse-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .mimg-slot-remove-btn {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border-color: color-mix(in srgb, var(--red) 24%, transparent);
}

[data-theme="dark"] .mimg-slot-remove-btn:hover {
    background: color-mix(in srgb, var(--red) 20%, transparent);
    border-color: color-mix(in srgb, var(--red) 42%, transparent);
}

[data-theme="dark"] .mimg-slot-remove-btn:focus,
[data-theme="dark"] .mimg-slot-remove-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 28%, transparent);
}

#dynamic-slots .cat-card-head {
    cursor: pointer;
    user-select: none;
}

#dynamic-slots .cat-card-head input {
    cursor: text;
    user-select: text;
}

.prop-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    white-space: nowrap;
    border: 1px solid transparent;
}

.prop-type-1 {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
}

.prop-type-2 {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.prop-type-3 {
    background: color-mix(in srgb, var(--yellow) 12%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
    border-color: color-mix(in srgb, var(--yellow) 32%, transparent);
}

.prop-type-4 {
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple);
    border-color: color-mix(in srgb, var(--purple) 28%, transparent);
}

[data-theme="dark"] .prop-type-3 {
    color: var(--yellow);
}

.prop-boost-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    white-space: nowrap;
    border: 1px solid transparent;
}

.prop-boost-yes {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
}

.prop-boost-no {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .prop-boost-no {
    background: color-mix(in srgb, var(--assest-color) 8%, transparent);
    color: color-mix(in srgb, var(--assest-color) 55%, transparent);
    border-color: color-mix(in srgb, var(--assest-color) 18%, transparent);
}

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

.prop-action-wrap form {
    display: inline-flex;
}

.cat-table-card td a.prop-calendar-btn {
    color: color-mix(in srgb, var(--blue) 80%, var(--black-color)) !important;
    border-color: color-mix(in srgb, var(--blue) 30%, transparent) !important;
    background: color-mix(in srgb, var(--blue) 10%, transparent) !important;
}

.cat-table-card td a.prop-calendar-btn:hover {
    background: color-mix(in srgb, var(--blue) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--blue) 48%, transparent) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--blue) 14%, transparent) !important;
    color: color-mix(in srgb, var(--blue) 80%, var(--black-color)) !important;
}

[data-theme="dark"] .cat-table-card td a.prop-calendar-btn {
    color: var(--blue) !important;
    border-color: color-mix(in srgb, var(--blue) 40%, transparent) !important;
    background: color-mix(in srgb, var(--blue) 12%, transparent) !important;
}

[data-theme="dark"] .cat-table-card td a.prop-calendar-btn:hover {
    background: color-mix(in srgb, var(--blue) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--blue) 55%, transparent) !important;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--blue) 16%, transparent) !important;
    color: var(--blue) !important;
}

.prop-status-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: var(--white-color);
    padding: 5px 30px 5px 11px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--black-color) 15%, transparent);
    color: var(--black-color);
    font-size: 12.5px;
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    min-width: 110px;
}

.prop-status-select:hover {
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.prop-status-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

[data-theme="dark"] .prop-status-select {
    background-color: color-mix(in srgb, var(--black-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--assest-color) 18%, transparent);
    color: var(--assest-color);
}

[data-theme="dark"] .prop-status-select:hover {
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .prop-status-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
}

.prop-sold-out-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
    white-space: nowrap;
}

.prop-filter-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 20px !important;
}

.prop-filter-bar .usr-search-wrap {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.prop-filter-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.prop-filter-row .usr-filter-group {
    flex: 1;
}

.prop-status-s2.select2-container .select2-selection--single {
    height: 35px !important;
    padding: 0 30px 0 10px !important;
}

.prop-status-s2 .select2-selection__rendered {
    line-height: normal !important;
    font-size: 12.5px !important;
}

.prop-status-s2 .select2-selection__arrow {
    height: 35px !important;
    width: 26px !important;
    right: 4px !important;
}

@media (max-width: 768px) {
    .prop-filter-bar {
        padding: 12px 14px !important;
    }
    .prop-filter-row {
        flex-wrap: wrap;
    }
    .prop-filter-row .usr-filter-group {
        flex: none;
        width: 100%;
    }
}

/* ===========================================================
   Property Module — Premium Status Selector
   =========================================================== */

.pss-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 8px 11px;
    border-radius: 100px;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    outline: none !important;
    box-shadow: none;
    background: transparent;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pss-trigger:focus,
.pss-trigger:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.pss-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 10%, transparent);
}

.pss-trigger:active {
    outline: none !important;
    transform: scale(0.97);
    box-shadow: none;
}

.pss-trigger.pss-active {
    outline: none !important;
    transform: scale(0.98);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.pss-trigger.pss-s1 {
    background: color-mix(in srgb, var(--yellow) 13%, transparent);
    border-color: color-mix(in srgb, var(--yellow) 34%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
}

.pss-trigger.pss-s1:focus,
.pss-trigger.pss-s1:focus-visible,
.pss-trigger.pss-s1.pss-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 22%, transparent);
}

.pss-trigger.pss-s2 {
    background: color-mix(in srgb, var(--green) 11%, transparent);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
    color: var(--green);
}

.pss-trigger.pss-s2:focus,
.pss-trigger.pss-s2:focus-visible,
.pss-trigger.pss-s2.pss-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

.pss-trigger.pss-s3 {
    background: color-mix(in srgb, var(--red) 11%, transparent);
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
    color: var(--red);
}

.pss-trigger.pss-s3:focus,
.pss-trigger.pss-s3:focus-visible,
.pss-trigger.pss-s3.pss-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}

.pss-icon {
    font-size: 12px;
    flex-shrink: 0;
    line-height: 1;
}

.pss-lbl {
    flex: 1;
    text-align: left;
    letter-spacing: 0.01em;
}

.pss-caret {
    font-size: 10px;
    opacity: 0.5;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.pss-trigger.pss-active .pss-caret {
    transform: rotate(180deg);
    opacity: 0.75;
}

.pss-panel {
    position: fixed;
    z-index: 9999;
    background: var(--assest-color);
    border: 1.5px solid color-mix(in srgb, var(--black-color) 9%, transparent);
    border-radius: 12px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--black-color) 12%, transparent),
                0 2px 6px color-mix(in srgb, var(--black-color) 6%, transparent);
    padding: 4px;
    min-width: 162px;
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
    transform-origin: top center;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.pss-panel.pss-in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
}

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

.pss-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.13s ease;
}

.pss-item:focus,
.pss-item:focus-visible {
    outline: none !important;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.pss-item:hover {
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
}

.pss-item:active {
    outline: none !important;
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
}

.pss-item.pss-sel {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.pss-item-ico {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    flex-shrink: 0;
    line-height: 1;
}

.pss-item-txt {
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--font);
    letter-spacing: 0.01em;
}

.pss-item.pss-sel .pss-item-txt {
    font-weight: 600;
}

.pss-item.pss-s1 .pss-item-ico {
    background: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
}

.pss-item.pss-s1 .pss-item-txt {
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
}

.pss-item.pss-s2 .pss-item-ico {
    background: color-mix(in srgb, var(--green) 13%, transparent);
    color: var(--green);
}

.pss-item.pss-s2 .pss-item-txt {
    color: var(--green);
}

.pss-item.pss-s3 .pss-item-ico {
    background: color-mix(in srgb, var(--red) 13%, transparent);
    color: var(--red);
}

.pss-item.pss-s3 .pss-item-txt {
    color: var(--red);
}

.pss-div {
    height: 1px;
    background: color-mix(in srgb, var(--black-color) 7%, transparent);
    margin: 2px 8px;
    list-style: none;
}

[data-theme="dark"] .pss-trigger.pss-s1 {
    background: color-mix(in srgb, var(--yellow) 15%, transparent);
    border-color: color-mix(in srgb, var(--yellow) 32%, transparent);
    color: var(--yellow);
}

[data-theme="dark"] .pss-trigger.pss-s1:focus,
[data-theme="dark"] .pss-trigger.pss-s1:focus-visible,
[data-theme="dark"] .pss-trigger.pss-s1.pss-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 26%, transparent);
}

[data-theme="dark"] .pss-trigger.pss-s2 {
    background: color-mix(in srgb, var(--green) 14%, transparent);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
    color: var(--green);
}

[data-theme="dark"] .pss-trigger.pss-s2:focus,
[data-theme="dark"] .pss-trigger.pss-s2:focus-visible,
[data-theme="dark"] .pss-trigger.pss-s2.pss-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 26%, transparent);
}

[data-theme="dark"] .pss-trigger.pss-s3 {
    background: color-mix(in srgb, var(--red) 14%, transparent);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--red);
}

[data-theme="dark"] .pss-trigger.pss-s3:focus,
[data-theme="dark"] .pss-trigger.pss-s3:focus-visible,
[data-theme="dark"] .pss-trigger.pss-s3.pss-active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 26%, transparent);
}

[data-theme="dark"] .pss-panel {
    border-color: color-mix(in srgb, var(--assest-color) 22%, transparent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--black-color) 55%, transparent),
                0 2px 8px color-mix(in srgb, var(--black-color) 30%, transparent);
}

[data-theme="dark"] .pss-item:hover {
    background: color-mix(in srgb, var(--assest-color) 10%, transparent);
}

[data-theme="dark"] .pss-item:active {
    background: color-mix(in srgb, var(--assest-color) 16%, transparent);
}

[data-theme="dark"] .pss-item.pss-sel {
    background: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

[data-theme="dark"] .pss-item.pss-s1 .pss-item-ico {
    color: var(--yellow);
}

[data-theme="dark"] .pss-item.pss-s1 .pss-item-txt {
    color: var(--yellow);
}

[data-theme="dark"] .pss-div {
    background: color-mix(in srgb, var(--assest-color) 16%, transparent);
}
.prop-attr-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: color-mix(in srgb, var(--primary-color) 3%, var(--white-color));
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

.prop-attr-title {
    flex: 3;
    min-width: 0;
    margin-bottom: 0 !important;
}

.prop-attr-type {
    flex: 2;
    min-width: 0;
    margin-bottom: 0 !important;
}

.prop-attr-value {
    flex: 3;
    min-width: 0;
    margin-bottom: 0 !important;
}

.prop-attr-file {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
}

.prop-attr-file .cat-label {
    margin-bottom: 0;
}

.prop-attr-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prop-attr-file-row .proj-file-input {
    flex: 1;
    min-width: 0;
}

.prop-attr-file-row .proj-floor-preview {
    width: 68px;
    height: 68px;
}

.prop-attr-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.prop-attr-action .proj-dyn-add-btn {
    margin-top: 0;
    white-space: nowrap;
}

.prop-attr-action .proj-dyn-remove-btn {
    margin-top: 0;
}

[data-theme="dark"] .prop-attr-row {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    border-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

@media (max-width: 991px) {
    .prop-attr-row {
        flex-wrap: wrap;
    }
    .prop-attr-title,
    .prop-attr-type,
    .prop-attr-value,
    .prop-attr-file {
        flex: 1 1 calc(50% - 6px);
    }
    .prop-attr-action {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 575px) {
    .prop-attr-title,
    .prop-attr-type,
    .prop-attr-value,
    .prop-attr-file {
        flex: 1 1 100%;
    }
}

/* ===========================================================
   Property Visiting Module — Statistics Counter Cards
   =========================================================== */
.vst-stats-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.vst-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 14px;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--black-color) 4%, transparent);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.vst-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: currentColor;
    opacity: 0.65;
}

.vst-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--black-color) 8%, transparent);
    border-color: color-mix(in srgb, currentColor 32%, transparent);
}

.vst-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: currentColor;
    flex-shrink: 0;
}

.vst-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.vst-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vst-stat-count {
    font-size: 22px;
    font-weight: 700;
    color: var(--black-color);
    letter-spacing: -0.4px;
    line-height: 1.15;
    margin-top: 2px;
}

.vst-stat-total {
    color: var(--primary-dark-color);
}

.vst-stat-pending {
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
}

.vst-stat-confirmed {
    color: var(--green);
}

.vst-stat-rejected {
    color: var(--red);
}

.vst-stat-completed {
    color: var(--blue);
}

.vst-stat-cancelled {
    color: color-mix(in srgb, var(--dark) 65%, var(--black-color));
}

[data-theme="dark"] .vst-stat-card {
    border-color: color-mix(in srgb, var(--black-color) 12%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .vst-stat-total {
    color: var(--accent-color);
}

[data-theme="dark"] .vst-stat-pending {
    color: var(--yellow);
}

[data-theme="dark"] .vst-stat-cancelled {
    color: color-mix(in srgb, var(--black-color) 70%, transparent);
}

@media (max-width: 1199px) {
    .vst-stats-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .vst-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .vst-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .vst-stat-count {
        font-size: 18px;
    }
}

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

/* ===========================================================
   Property Visiting Module — Filter Date Input
   =========================================================== */
.vst-date-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
}

.vst-date-input {
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    height: 100%;
    width: 100%;
    padding: 0 34px 0 13px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--black-color);
    cursor: pointer;
    color-scheme: light;
    transition: background-color 0.15s ease;
}

.vst-date-input:focus {
    outline: none;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.vst-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    background: transparent;
    color: transparent;
}

.vst-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--primary-color) 55%, var(--black-color));
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

[data-theme="dark"] .vst-date-input {
    color: var(--black-color);
    color-scheme: dark;
}

[data-theme="dark"] .vst-date-input:focus {
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
}

[data-theme="dark"] .vst-date-icon {
    color: var(--accent-color);
}

/* ===========================================================
   Property Visiting Module — Premium Segmented Status Tabs
   =========================================================== */
.vst-tabs-wrap {
    padding: 0 20px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--black-color) 7%, transparent);
}

.vst-tabs {
    list-style: none;
    padding: 6px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 14px;
    flex-wrap: wrap;
}

.vst-tab-item {
    flex: 1;
    min-width: 0;
}

.vst-tab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

.vst-tab-link:hover {
    color: var(--black-color);
    background: color-mix(in srgb, var(--white-color) 55%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}

.vst-tab-link.active {
    background: var(--white-color);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.vst-tab-link.active .vst-tab-ico {
    color: var(--primary-color);
}

.vst-tab-link.active .vst-tab-badge {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: transparent;
}

.vst-tab-ico {
    font-size: 12px;
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.vst-tab-lbl {
    letter-spacing: 0.02em;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vst-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 100px;
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    color: color-mix(in srgb, var(--black-color) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vst-tab-pending.active {
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
    border-color: color-mix(in srgb, var(--yellow) 34%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--yellow) 18%, transparent);
}

.vst-tab-pending.active .vst-tab-ico,
.vst-tab-pending:hover .vst-tab-ico {
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
}

.vst-tab-pending.active .vst-tab-badge {
    background: color-mix(in srgb, var(--yellow) 85%, var(--black-color));
    color: var(--white-color);
}

.vst-tab-confirmed.active {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--green) 15%, transparent);
}

.vst-tab-confirmed.active .vst-tab-ico,
.vst-tab-confirmed:hover .vst-tab-ico {
    color: var(--green);
}

.vst-tab-confirmed.active .vst-tab-badge {
    background: var(--green);
    color: var(--white-color);
}

.vst-tab-rejected.active {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--red) 15%, transparent);
}

.vst-tab-rejected.active .vst-tab-ico,
.vst-tab-rejected:hover .vst-tab-ico {
    color: var(--red);
}

.vst-tab-rejected.active .vst-tab-badge {
    background: var(--red);
    color: var(--white-color);
}

.vst-tab-completed.active {
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 30%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--blue) 15%, transparent);
}

.vst-tab-completed.active .vst-tab-ico,
.vst-tab-completed:hover .vst-tab-ico {
    color: var(--blue);
}

.vst-tab-completed.active .vst-tab-badge {
    background: var(--blue);
    color: var(--white-color);
}

.vst-tab-cancelled.active {
    color: color-mix(in srgb, var(--dark) 70%, var(--black-color));
    border-color: color-mix(in srgb, var(--dark) 25%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--dark) 15%, transparent);
}

.vst-tab-cancelled.active .vst-tab-ico,
.vst-tab-cancelled:hover .vst-tab-ico {
    color: color-mix(in srgb, var(--dark) 70%, var(--black-color));
}

.vst-tab-cancelled.active .vst-tab-badge {
    background: color-mix(in srgb, var(--dark) 65%, var(--black-color));
    color: var(--white-color);
}

[data-theme="dark"] .vst-tabs-wrap {
    border-bottom-color: color-mix(in srgb, var(--black-color) 10%, transparent);
}

[data-theme="dark"] .vst-tabs {
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .vst-tab-link {
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
}

[data-theme="dark"] .vst-tab-link:hover {
    background: color-mix(in srgb, var(--assest-color) 60%, transparent);
    color: var(--black-color);
}

[data-theme="dark"] .vst-tab-link.active {
    background: var(--assest-color);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-color) 16%, transparent);
}

[data-theme="dark"] .vst-tab-link.active .vst-tab-ico {
    color: var(--accent-color);
}

[data-theme="dark"] .vst-tab-link.active .vst-tab-badge {
    background: var(--accent-color);
    color: var(--primary-color);
}

[data-theme="dark"] .vst-tab-badge {
    background: color-mix(in srgb, var(--black-color) 12%, transparent);
    color: color-mix(in srgb, var(--black-color) 65%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 15%, transparent);
}

[data-theme="dark"] .vst-tab-pending.active {
    color: var(--yellow);
}

[data-theme="dark"] .vst-tab-pending.active .vst-tab-ico {
    color: var(--yellow);
}

[data-theme="dark"] .vst-tab-cancelled.active {
    color: color-mix(in srgb, var(--black-color) 75%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent);
}

@media (max-width: 991px) {
    .vst-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .vst-tab-item {
        flex: 0 0 auto;
    }

    .vst-tab-link {
        padding: 8px 12px;
    }
}

/* ===========================================================
   Property Visiting Module — User Cell
   =========================================================== */
.vst-usr-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.vst-usr-avatar-link {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.vst-usr-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    display: block;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.vst-usr-avatar:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.vst-usr-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.vst-usr-info .usr-cell-name {
    text-align: left;
}

[data-theme="dark"] .vst-usr-avatar {
    border-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
}

/* ===========================================================
   Property Visiting Module — Schedule Card
   =========================================================== */
.vst-sched-card {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
    border-radius: 12px;
    min-width: 220px;
    text-align: left;
}

.vst-sched-date {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.vst-sched-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 13px;
    flex-shrink: 0;
}

.vst-sched-date-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.vst-sched-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    letter-spacing: 0.35px;
    text-transform: uppercase;
    line-height: 1.1;
}

.vst-sched-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
    line-height: 1.2;
}

.vst-sched-times {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vst-sched-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    border-radius: 100px;
    font-size: 12px;
}

.vst-sched-time-ico {
    color: var(--primary-color);
    font-size: 11px;
    flex-shrink: 0;
}

.vst-sched-time .vst-sched-lbl {
    font-size: 10px;
    letter-spacing: 0.2px;
}

.vst-sched-time .vst-sched-val {
    font-size: 12px;
    font-weight: 600;
}

.vst-sched-sep {
    width: 6px;
    height: 1px;
    background: color-mix(in srgb, var(--black-color) 22%, transparent);
    flex-shrink: 0;
}

[data-theme="dark"] .vst-sched-card {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .vst-sched-date {
    border-bottom-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .vst-sched-icon {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .vst-sched-time {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .vst-sched-time-ico {
    color: var(--accent-color);
}

[data-theme="dark"] .vst-sched-sep {
    background: color-mix(in srgb, var(--black-color) 22%, transparent);
}

/* ===========================================================
   Property Visiting Module — Status Column Actions & Badges
   =========================================================== */
.vst-act-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vst-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid transparent;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.1;
    letter-spacing: 0.1px;
    transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.vst-act-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.vst-act-btn:active {
    transform: scale(0.97);
}

.vst-act-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.vst-act-lbl {
    line-height: 1;
}

.vst-act-approve {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green) !important;
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
}

.vst-act-approve:hover {
    background: color-mix(in srgb, var(--green) 16%, transparent);
    border-color: color-mix(in srgb, var(--green) 44%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 22%, transparent);
    color: var(--green) !important;
}

.vst-act-reject {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red) !important;
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.vst-act-reject:hover {
    background: color-mix(in srgb, var(--red) 16%, transparent);
    border-color: color-mix(in srgb, var(--red) 44%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 22%, transparent);
    color: var(--red) !important;
}

.vst-act-complete {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue) !important;
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.vst-act-complete:hover {
    background: color-mix(in srgb, var(--blue) 16%, transparent);
    border-color: color-mix(in srgb, var(--blue) 44%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 22%, transparent);
    color: var(--blue) !important;
}

.vst-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
}

.vst-status-badge i {
    font-size: 11px;
    line-height: 1;
}

.vst-status-rejected {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.vst-status-completed {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.vst-status-cancelled {
    background: color-mix(in srgb, var(--dark) 10%, transparent);
    color: color-mix(in srgb, var(--dark) 70%, var(--black-color));
    border-color: color-mix(in srgb, var(--dark) 24%, transparent);
}

[data-theme="dark"] .vst-status-cancelled {
    color: color-mix(in srgb, var(--black-color) 70%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 22%, transparent);
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
}

/* ===========================================================
   Property Visiting Module — Confirmation Modal
   =========================================================== */
.vst-conf-modal .modal-dialog {
    max-width: 440px;
}

.vst-conf-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 24px 64px color-mix(in srgb, var(--black-color) 24%, transparent),
        0 4px 16px color-mix(in srgb, var(--black-color) 10%, transparent);
    background: var(--white-color);
    text-align: center;
    position: relative;
}

.vst-conf-icon-core {
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.vst-conf-qmark {
    font-size: 22px;
    line-height: 1;
}

.vst-conf-icon-s1 {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--green) 7%, transparent),
        0 0 0 24px color-mix(in srgb, var(--green) 4%, transparent),
        0 0 0 36px color-mix(in srgb, var(--green) 2%, transparent),
        0 6px 22px color-mix(in srgb, var(--green) 20%, transparent);
}

.vst-conf-icon-s1 .vst-conf-qmark {
    color: var(--green);
}

.vst-conf-icon-s2 {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--red) 7%, transparent),
        0 0 0 24px color-mix(in srgb, var(--red) 4%, transparent),
        0 0 0 36px color-mix(in srgb, var(--red) 2%, transparent),
        0 6px 22px color-mix(in srgb, var(--red) 20%, transparent);
}

.vst-conf-icon-s2 .vst-conf-qmark {
    color: var(--red);
}

.vst-conf-icon-s3 {
    background: color-mix(in srgb, var(--blue) 12%, transparent);
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--blue) 7%, transparent),
        0 0 0 24px color-mix(in srgb, var(--blue) 4%, transparent),
        0 0 0 36px color-mix(in srgb, var(--blue) 2%, transparent),
        0 6px 22px color-mix(in srgb, var(--blue) 20%, transparent);
}

.vst-conf-icon-s3 .vst-conf-qmark {
    color: var(--blue);
}

.vst-conf-icon-s4 {
    background: color-mix(in srgb, var(--dark) 12%, transparent);
    border-color: color-mix(in srgb, var(--dark) 28%, transparent);
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--dark) 7%, transparent),
        0 0 0 24px color-mix(in srgb, var(--dark) 4%, transparent),
        0 0 0 36px color-mix(in srgb, var(--dark) 2%, transparent),
        0 6px 22px color-mix(in srgb, var(--dark) 20%, transparent);
}

.vst-conf-icon-s4 .vst-conf-qmark {
    color: color-mix(in srgb, var(--dark) 70%, var(--black-color));
}

.vst-conf-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--black-color);
    margin: 0 0 10px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.vst-conf-desc {
    font-size: 13.5px;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    margin: 0;
    line-height: 1.65;
}

.vst-conf-footer {
    padding: 22px 36px 36px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.vst-conf-cancel {
    background: var(--white-color);
    color: var(--black-color) !important;
    border: 1px solid color-mix(in srgb, var(--black-color) 16%, transparent);
    box-shadow: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.vst-conf-cancel::before {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
}

.vst-conf-cancel:hover {
    background: color-mix(in srgb, var(--black-color) 4%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 24%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--black-color) 8%, transparent);
    color: var(--black-color) !important;
}

.vst-conf-submit {
    min-width: 130px;
    justify-content: center;
}

.vst-conf-submit-s2 {
    background: linear-gradient(135deg, var(--red) 0%, color-mix(in srgb, var(--red) 82%, black) 100%) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--red) 32%, transparent) !important;
}

.vst-conf-submit-s2:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--red) 82%, black) 0%, var(--red) 100%) !important;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--red) 40%, transparent) !important;
}

.vst-conf-submit-s1 {
    background: linear-gradient(135deg, var(--green) 0%, color-mix(in srgb, var(--green) 82%, black) 100%) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--green) 32%, transparent) !important;
}

.vst-conf-submit-s1:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--green) 82%, black) 0%, var(--green) 100%) !important;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--green) 40%, transparent) !important;
}

.vst-conf-submit-s3 {
    background: linear-gradient(135deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 82%, black) 100%) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--blue) 32%, transparent) !important;
}

.vst-conf-submit-s3:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, black) 0%, var(--blue) 100%) !important;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--blue) 40%, transparent) !important;
}

.vst-conf-loading {
    pointer-events: none;
    opacity: 0.75;
}

.vst-conf-loading i {
    animation: vstConfSpin 0.75s linear infinite;
}

@keyframes vstConfSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

[data-theme="dark"] .vst-conf-content {
    background: var(--assest-color);
}

[data-theme="dark"] .vst-conf-title {
    color: var(--black-color);
}

[data-theme="dark"] .vst-conf-cancel {
    background: var(--assest-color);
    color: var(--black-color) !important;
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent);
}

[data-theme="dark"] .vst-conf-cancel:hover {
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    color: var(--black-color) !important;
}

@media (max-width: 480px) {
    .vst-conf-modal .modal-dialog {
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    .vst-conf-footer {
        padding: 18px 24px 28px;
        flex-direction: column;
    }

    .vst-conf-cancel,
    .vst-conf-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================================
   Property Visiting Module — Filter Row Adjustments
   =========================================================== */
.prop-filter-bar .vst-date-wrap {
    width: 100%;
}

.prop-filter-row .usr-filter-group .vst-date-wrap {
    padding: 0;
}

@media (max-width: 991px) {
    .vst-tabs-wrap {
        padding: 0 14px 12px;
    }
}

/* ===========================================================
   Reviews Module — Table Cells
   =========================================================== */
.rev-user-cell {
    align-items: flex-start !important;
    text-align: left;
}

.rev-user-cell .usr-cell-name {
    text-align: left;
}

.rev-user-cell .usr-cell-sub {
    text-align: left;
}

.rev-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--black-color);
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.rev-text-empty {
    font-style: italic;
    color: color-mix(in srgb, var(--black-color) 42%, transparent);
    font-size: 12.5px;
    display: inline-block;
    max-width: 100%;
}

[data-theme="dark"] .rev-text-empty {
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
}

.rev-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 13px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.rev-rating-badge:hover {
    transform: translateY(-1px);
}

.rev-rating-star {
    font-size: 11.5px;
    line-height: 1;
    flex-shrink: 0;
}

.rev-rating-val {
    line-height: 1;
}

.rev-rating-low {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.rev-rating-low:hover {
    background: color-mix(in srgb, var(--red) 18%, transparent);
    border-color: color-mix(in srgb, var(--red) 42%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 22%, transparent);
}

.rev-rating-medium {
    background: color-mix(in srgb, var(--yellow) 14%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
    border-color: color-mix(in srgb, var(--yellow) 34%, transparent);
}

.rev-rating-medium:hover {
    background: color-mix(in srgb, var(--yellow) 22%, transparent);
    border-color: color-mix(in srgb, var(--yellow) 48%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--yellow) 22%, transparent);
}

.rev-rating-high {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
}

.rev-rating-high:hover {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 22%, transparent);
}

.rev-rating-empty {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    color: color-mix(in srgb, var(--black-color) 42%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 12%, transparent);
    font-weight: 600;
}

[data-theme="dark"] .rev-rating-medium {
    color: var(--yellow);
}

[data-theme="dark"] .rev-rating-empty {
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    color: color-mix(in srgb, var(--black-color) 50%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 16%, transparent);
}

.rev-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid var(--primary-light);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font);
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.rev-date-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.rev-date-ico {
    font-size: 11px;
    color: var(--primary-color);
    line-height: 1;
    flex-shrink: 0;
}

[data-theme="dark"] .rev-date-badge {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

[data-theme="dark"] .rev-date-ico {
    color: var(--accent-color);
}

.pwd-wrap {
    position: relative;
    display: block;
}

.pwd-wrap .pwd-input {
    padding-right: 46px;
    letter-spacing: 0.4px;
}

.pwd-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--black-color) 48%, transparent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.pwd-toggle .pwd-toggle-icon {
    font-size: 13px;
    line-height: 1;
}

.pwd-toggle:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-dark-color);
}

.pwd-toggle:active {
    transform: translateY(-50%) scale(0.94);
}

.pwd-toggle:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
    color: var(--primary-dark-color);
}

[data-theme="dark"] .pwd-toggle {
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
}

[data-theme="dark"] .pwd-toggle:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .pwd-toggle:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.pcol-grid {
    row-gap: 18px;
}

.pcol-wrap {
    display: flex;
    align-items: stretch;
    height: 43px;
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent);
    border-radius: 9px;
    overflow: hidden;
    background: var(--white-color);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pcol-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.pcol-swatch {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 54px;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    border-right: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    transition: filter 0.18s ease;
}

.pcol-swatch:hover {
    filter: brightness(1.06);
}

.pcol-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
}

.pcol-swatch::-webkit-color-swatch {
    border: none;
    border-radius: 0;
}

.pcol-swatch::-moz-color-swatch {
    border: none;
    border-radius: 0;
}

.pcol-input {
    flex: 1;
    min-width: 0;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 14px !important;
    font-family: 'Courier New', ui-monospace, monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pcol-input:focus {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

[data-theme="dark"] .pcol-wrap {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .pcol-wrap:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .pcol-swatch {
    border-right-color: color-mix(in srgb, var(--black-color) 20%, transparent);
}

.pcol-preview {
    position: relative;
    height: 96px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    background: var(--pcol-bg, var(--white-color));
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--black-color) 6%, transparent);
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.pcol-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, color-mix(in srgb, var(--black-color) 4%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--black-color) 4%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--black-color) 4%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--black-color) 4%, transparent) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

.pcol-preview-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px 20px;
    background: var(--pcol-bg, transparent);
}

.pcol-preview-title {
    font-family: var(--font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pcol-title, var(--black-color));
    letter-spacing: -0.2px;
    transition: color 0.25s ease;
}

.pcol-preview-body {
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: color-mix(in srgb, var(--pcol-title, var(--black-color)) 72%, transparent);
    transition: color 0.25s ease;
}

[data-theme="dark"] .pcol-preview {
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

@media (max-width: 767px) {
    .pcol-preview {
        height: 88px;
    }
    .pcol-preview-inner {
        padding: 14px 16px;
    }
    .pcol-preview-title {
        font-size: 15.5px;
    }
}

.pg-summernote {
    display: none;
}

.note-editor.note-frame {
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent) !important;
    border-radius: 9px !important;
    overflow: hidden;
    background: var(--white-color);
}

.note-editor.note-frame:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.note-editor .note-toolbar {
    background: color-mix(in srgb, var(--primary-color) 4%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent) !important;
    padding: 8px 10px !important;
}

.note-editor .note-btn {
    background: var(--white-color) !important;
    border-color: color-mix(in srgb, var(--black-color) 12%, transparent) !important;
    color: var(--black-color) !important;
}

.note-editor .note-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--white-color)) !important;
    color: var(--primary-dark-color) !important;
}

[data-theme="dark"] .note-editor.note-frame {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent) !important;
}

[data-theme="dark"] .note-editor.note-frame:focus-within {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .note-editor .note-toolbar {
    background: color-mix(in srgb, var(--accent-color) 6%, var(--assest-color)) !important;
    border-bottom-color: color-mix(in srgb, var(--black-color) 20%, transparent) !important;
}

[data-theme="dark"] .note-editor .note-btn {
    background: color-mix(in srgb, var(--black-color) 6%, var(--assest-color)) !important;
    color: var(--black-color) !important;
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent) !important;
}

[data-theme="dark"] .note-editor .note-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--assest-color)) !important;
    color: var(--accent-color) !important;
}

[data-theme="dark"] .note-editor .note-editable {
    color: var(--black-color);
}

.ntf-msg-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--black-color);
    text-align: left;
    white-space: normal;
    word-break: break-word;
    margin: 0 auto;
}

.ntf-textarea {
    height: auto !important;
    min-height: 118px;
    padding: 11px 13px !important;
    line-height: 1.55;
    resize: vertical;
}

.ntf-btn-setting {
    background: var(--assest-color) !important;
    color: var(--primary-dark-color) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.ntf-btn-setting::before {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
}

.ntf-btn-setting:hover {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color)) !important;
    border-color: color-mix(in srgb, var(--primary-color) 36%, transparent) !important;
    color: var(--primary-dark-color) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.ntf-btn-setting:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
}

[data-theme="dark"] .ntf-btn-setting {
    color: var(--accent-color) !important;
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .ntf-btn-setting:hover {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--assest-color)) !important;
    border-color: color-mix(in srgb, var(--accent-color) 42%, transparent) !important;
    color: var(--accent-color) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.rev-date-filter {
    min-width: 180px;
}

.rev-date-filter .rev-date-wrap {
    flex: 1;
    width: 100%;
    min-width: 0;
}

@media (max-width: 991px) {
    .rev-date-filter {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 991px) {
    .rev-text {
        max-width: 260px;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 575px) {
    .rev-text {
        max-width: 100%;
    }
}

/* ===========================================================
   Package Module — Premium Table Cells
   =========================================================== */
.pkg-role-badge {
    gap: 6px;
    padding: 4px 12px 4px 10px;
    font-size: 12px;
    letter-spacing: 0.25px;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pkg-role-badge:hover {
    transform: translateY(-1px);
}

.pkg-role-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

.pkg-role-lbl {
    line-height: 1;
}

.usr-role-owner.pkg-role-badge:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 22%, transparent);
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
}

.usr-role-broker.pkg-role-badge:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 22%, transparent);
    border-color: color-mix(in srgb, var(--blue) 42%, transparent);
}

.usr-role-builder.pkg-role-badge:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 42%, transparent);
}

.usr-role-agency.pkg-role-badge:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--purple) 22%, transparent);
    border-color: color-mix(in srgb, var(--purple) 42%, transparent);
}

.pkg-name-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    max-width: 260px;
    min-width: 0;
}

.pkg-name-txt {
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--black-color);
    line-height: 1.4;
    word-break: break-word;
    text-align: left;
}

.pkg-price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    max-width: 100%;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pkg-price-cur {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.pkg-price-val {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.pkg-duration-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 13px;
    border-radius: 100px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid var(--primary-light);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pkg-duration-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.pkg-duration-ico {
    font-size: 11px;
    color: var(--primary-color);
    line-height: 1;
    flex-shrink: 0;
}

.pkg-duration-val {
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
}

.pkg-duration-unit {
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.2px;
    line-height: 1;
    opacity: 0.85;
}

[data-theme="dark"] .pkg-duration-badge {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

[data-theme="dark"] .pkg-duration-ico {
    color: var(--accent-color);
}

.pkg-post-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    min-width: 52px;
    padding: 0 13px;
    border-radius: 100px;
    background: transparent;
    color: color-mix(in srgb, var(--yellow) 80%, var(--black-color));
    border: 1px solid color-mix(in srgb, var(--yellow) 34%, transparent);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pkg-post-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--yellow) 48%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--yellow) 22%, transparent);
}

.pkg-post-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

.pkg-post-val {
    font-weight: 800;
    line-height: 1;
}

[data-theme="dark"] .pkg-post-chip {
    color: var(--yellow);
}

.pkg-popular-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 13px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pkg-popular-badge:hover {
    transform: translateY(-1px);
}

.pkg-popular-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

.pkg-popular-lbl {
    line-height: 1;
}

.pkg-popular-yes {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

.pkg-popular-yes:hover {
    background: color-mix(in srgb, var(--green) 20%, transparent);
    border-color: color-mix(in srgb, var(--green) 46%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 24%, transparent);
}

.pkg-popular-no {
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 15%, transparent);
}

.pkg-popular-no:hover {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 24%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 10%, transparent);
}

[data-theme="dark"] .pkg-popular-no {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 22%, transparent);
}

[data-theme="dark"] .pkg-popular-no:hover {
    background: color-mix(in srgb, var(--black-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 32%, transparent);
}

@media (max-width: 767px) {
    .pkg-name-cell {
        max-width: 200px;
    }

    .pkg-price-badge {
        padding: 4px 12px;
        font-size: 12.5px;
    }

    .pkg-price-cur {
        font-size: 11.5px;
    }

    .pkg-price-val {
        font-size: 12.5px;
    }

    .pkg-duration-badge,
    .pkg-post-chip,
    .pkg-popular-badge {
        height: 26px;
        padding: 0 11px;
        font-size: 12px;
    }
}

/* ===========================================================
   Transaction Module — Premium Table Cells
   =========================================================== */
.tx-filter-group {
    min-width: 35%;
}

.tx-user-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    min-width: 0;
    max-width: 260px;
}

.tx-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.tx-user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 2px;
}

.tx-user-meta .usr-cell-name {
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--black-color);
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

.tx-user-meta .usr-cell-sub {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

.tx-contact-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    min-width: 0;
    max-width: 240px;
}

.tx-contact-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tx-contact-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--primary-color);
    opacity: 0.85;
}

[data-theme="dark"] .tx-contact-ico {
    color: var(--accent-color);
}

.tx-contact-primary .tx-contact-txt {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
    display: inline-block;
    line-height: 1.3;
    vertical-align: middle;
}

.tx-contact-secondary .tx-contact-txt {
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
    display: inline-block;
    line-height: 1.3;
    vertical-align: middle;
}

.tx-pkg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 13px;
    border-radius: 100px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid var(--primary-light);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tx-pkg-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.tx-pkg-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--primary-color);
}

.tx-pkg-lbl {
    line-height: 1;
}

[data-theme="dark"] .tx-pkg-chip {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

[data-theme="dark"] .tx-pkg-ico {
    color: var(--accent-color);
}

.tx-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
    color: color-mix(in srgb, var(--black-color) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.4px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .tx-id-badge {
    background: color-mix(in srgb, var(--black-color) 10%, transparent);
    color: color-mix(in srgb, var(--black-color) 80%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 22%, transparent);
}

.tx-price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.tx-price-badge:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--green) 16%, transparent);
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 22%, transparent);
}

.tx-price-cur {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.tx-price-val {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.tx-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid var(--primary-light);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.tx-date-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.tx-date-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--primary-color);
}

[data-theme="dark"] .tx-date-badge {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

[data-theme="dark"] .tx-date-ico {
    color: var(--accent-color);
}

.tx-date-range {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tx-date-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
}

[data-theme="dark"] .tx-date-sep {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-color);
}

.tx-total-row td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.tx-total-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    margin: 14px 4px 6px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color) 8%, transparent) 0%,
        color-mix(in srgb, var(--primary-color) 3%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-color) 8%, transparent);
    font-family: var(--font);
}

.tx-total-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark-color);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

.tx-total-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 15px;
    line-height: 1;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.tx-total-ico > i {
    display: inline-block;
    line-height: 1;
    font-size: inherit;
    text-align: center;
    margin: 0;
    padding: 0;
}

.tx-total-text {
    line-height: 1;
}

.tx-total-value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    line-height: 1;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--green) 16%, transparent);
}

.tx-total-cur {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.tx-total-amt {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

[data-theme="dark"] .tx-total-card {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-color) 10%, transparent) 0%,
        color-mix(in srgb, var(--accent-color) 4%, transparent) 100%);
    border-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

[data-theme="dark"] .tx-total-label {
    color: var(--accent-color);
}

[data-theme="dark"] .tx-total-ico {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}

@media (max-width: 991px) {
    .tx-user-cell,
    .tx-contact-cell {
        max-width: 220px;
    }

    .tx-user-meta .usr-cell-name,
    .tx-user-meta .usr-cell-sub,
    .tx-contact-primary .tx-contact-txt,
    .tx-contact-secondary .tx-contact-txt {
        max-width: 170px;
    }
}

@media (max-width: 767px) {
    .tx-total-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
        text-align: center;
    }

    .tx-total-label {
        justify-content: center;
    }

    .tx-total-value {
        justify-content: center;
    }

    .tx-pkg-chip,
    .tx-date-badge {
        height: 26px;
        padding: 0 11px;
        font-size: 12px;
    }

    .tx-price-badge {
        padding: 4px 12px;
        font-size: 12.5px;
    }

    .tx-price-cur { font-size: 11.5px; }
    .tx-price-val { font-size: 12.5px; }
}

.tx-search-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tx-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.tx-search-input-ico {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 14px;
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
    pointer-events: none;
}

.tx-search-input {
    padding-left: 40px !important;
}

[data-theme="dark"] .tx-search-input-ico {
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
}

.tx-search-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.tx-userlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tx-userlist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    min-height: 84px;
    border-radius: 14px;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--black-color) 4%, transparent);
    transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tx-userlist-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-color) 12%, transparent);
    background: color-mix(in srgb, var(--primary-color) 3%, var(--assest-color));
}

[data-theme="dark"] .tx-userlist-row {
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--black-color) 20%, transparent);
}

[data-theme="dark"] .tx-userlist-row:hover {
    border-color: color-mix(in srgb, var(--accent-color) 34%, transparent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-color) 16%, transparent);
    background: color-mix(in srgb, var(--accent-color) 5%, var(--assest-color));
}

.tx-userlist-user {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 300px;
}

.tx-userlist-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border: 2px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

[data-theme="dark"] .tx-userlist-avatar {
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.tx-userlist-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.tx-userlist-name-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 6px;
}

.tx-userlist-name {
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--black-color);
    line-height: 1.25;
    letter-spacing: 0.1px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-userlist-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 58%, transparent);
    line-height: 1.2;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-userlist-sub-ico {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--primary-color);
    opacity: 0.75;
}

[data-theme="dark"] .tx-userlist-sub-ico {
    color: var(--accent-color);
}

.tx-userlist-role {
    flex-shrink: 0;
    align-self: center;
}

.tx-userlist-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 320px;
}

.tx-userlist-contact .tx-contact-line {
    max-width: 100%;
}

.tx-userlist-contact .tx-contact-txt {
    max-width: 260px;
}

.tx-userlist-select {
    height: 40px !important;
    padding: 0 20px !important;
    flex-shrink: 0;
    align-self: center;
    min-width: 110px;
    justify-content: center;
}

.tx-userlist-empty,
.tx-userlist-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--black-color) 18%, transparent);
    background: color-mix(in srgb, var(--black-color) 3%, transparent);
    text-align: center;
}

.tx-userlist-empty-ico,
.tx-userlist-hint-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 22px;
    line-height: 1;
    aspect-ratio: 1 / 1;
}

.tx-userlist-empty-txt,
.tx-userlist-hint-txt {
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 65%, transparent);
    letter-spacing: 0.2px;
    line-height: 1.35;
    max-width: 380px;
}

[data-theme="dark"] .tx-userlist-empty,
[data-theme="dark"] .tx-userlist-hint {
    border-color: color-mix(in srgb, var(--black-color) 24%, transparent);
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
}

[data-theme="dark"] .tx-userlist-empty-ico,
[data-theme="dark"] .tx-userlist-hint-ico {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}

@media (max-width: 991px) {
    .tx-userlist-row {
        flex-wrap: wrap;
        gap: 14px;
        padding: 14px 16px;
        min-height: 0;
    }

    .tx-userlist-user,
    .tx-userlist-contact {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .tx-userlist-contact {
        padding-left: 66px;
    }

    .tx-userlist-select {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .tx-search-row {
        gap: 10px;
    }

    .tx-search-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .tx-search-actions .cat-btn-prim,
    .tx-search-actions .cat-btn-sec {
        flex: 1;
        justify-content: center;
    }

    .tx-userlist-row {
        padding: 14px;
        gap: 12px;
    }

    .tx-userlist-avatar {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
    }

    .tx-userlist-contact {
        padding-left: 0;
    }

    .tx-userlist-name,
    .tx-userlist-sub,
    .tx-userlist-contact .tx-contact-txt {
        max-width: 100%;
    }
}

.ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.ads-add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 20px;
    min-height: 280px;
    border-radius: 18px;
    border: 2px dashed color-mix(in srgb, var(--primary-color) 35%, transparent);
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
    color: var(--primary-dark-color);
    text-align: center;
    font-family: var(--font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

.ads-add-card:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    border-color: var(--primary-color);
    color: var(--primary-dark-color);
    text-decoration: none;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.ads-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 26px;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    transition: transform 0.25s ease, background 0.2s ease;
}

.ads-add-card:hover .ads-add-icon {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

[data-theme="dark"] .ads-add-card {
    background: color-mix(in srgb, var(--accent-color) 4%, var(--assest-color));
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .ads-add-card:hover {
    background: color-mix(in srgb, var(--accent-color) 8%, var(--assest-color));
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .ads-add-icon {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.ads-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--black-color) 4%, transparent);
}

.ads-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

[data-theme="dark"] .ads-card {
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--black-color) 30%, transparent);
}

[data-theme="dark"] .ads-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.ads-media {
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.ads-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.ads-card:hover .ads-media-img {
    transform: scale(1.06);
}

.ads-status-ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--black-color) 20%, transparent);
    backdrop-filter: blur(6px);
}

.ads-status-ribbon.ads-status-active {
    background: color-mix(in srgb, var(--green) 22%, var(--assest-color));
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
}

.ads-status-ribbon.ads-status-inactive {
    background: color-mix(in srgb, var(--red) 22%, var(--assest-color));
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
}

.ads-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ads-type-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--primary-color) 88%, transparent);
    color: var(--white-color);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 26%, transparent);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .ads-type-badge {
    background: color-mix(in srgb, var(--accent-color) 88%, transparent);
    color: var(--black-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.ads-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--assest-color) 92%, transparent);
    color: var(--primary-color);
    font-size: 22px;
    border: 0;
    cursor: pointer;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--black-color) 30%, transparent);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 3;
}

.ads-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--primary-color);
    color: var(--white-color);
}

[data-theme="dark"] .ads-play-btn {
    background: color-mix(in srgb, var(--assest-color) 92%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .ads-play-btn:hover {
    background: var(--accent-color);
    color: var(--black-color);
}

.ads-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 20px;
}

.ads-title {
    font-family: var(--font);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--black-color);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}

.ads-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 100px;
    background: var(--primary-bg);
    color: var(--primary-dark-color);
    border: 1px solid var(--primary-light);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.ads-url:hover {
    transform: translateY(-1px);
    color: var(--primary-dark-color);
    text-decoration: none;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.ads-url-ico {
    color: var(--primary-color);
    font-size: 11px;
    flex-shrink: 0;
}

.ads-url-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .ads-url {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

[data-theme="dark"] .ads-url-ico {
    color: var(--accent-color);
}

.ads-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
}

.ads-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ads-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary-color);
    border: 1px solid var(--primary-light);
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    padding: 0;
}

.ads-icon-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--primary-color);
    color: var(--white-color);
    text-decoration: none;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 26%, transparent);
}

.ads-icon-btn.ads-icon-danger {
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 32%, transparent);
}

.ads-icon-btn.ads-icon-danger:hover:not(:disabled) {
    background: var(--red);
    color: var(--white-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--red) 30%, transparent);
}

[data-theme="dark"] .ads-icon-btn {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

[data-theme="dark"] .ads-icon-btn:hover:not(:disabled) {
    background: var(--accent-color);
    color: var(--black-color);
}

.ads-icon-btn form {
    margin: 0;
    padding: 0;
    display: inline;
}

.ads-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background: var(--assest-color);
    border-radius: 18px;
    border: 1px dashed color-mix(in srgb, var(--black-color) 14%, transparent);
    text-align: center;
    gap: 14px;
}

.ads-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 28px;
    border: 1px solid var(--primary-light);
}

.ads-empty-title {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    color: var(--black-color);
    margin: 0;
}

.ads-empty-sub {
    font-family: var(--font);
    font-size: 13.5px;
    color: color-mix(in srgb, var(--black-color) 68%, transparent);
    margin: 0;
    max-width: 380px;
}

[data-theme="dark"] .ads-empty {
    border-color: color-mix(in srgb, var(--black-color) 20%, transparent);
}

[data-theme="dark"] .ads-empty-ico {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.ads-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: var(--assest-color);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
    margin-top: 22px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--black-color);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary-color) 6%, transparent);
}

[data-theme="dark"] .ads-pagination-bar {
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
    color: var(--black-color);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.ads-pagination-bar .pagination {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ads-pagination-bar .pagination .page-item {
    list-style: none;
}

.ads-pagination-bar .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    color: var(--primary-dark-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 16%, transparent);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ads-pagination-bar .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    transform: translateY(-2px);
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 26%, transparent);
    text-decoration: none;
}

.ads-pagination-bar .pagination .page-item.active .page-link {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 30%, transparent);
    cursor: default;
}

.ads-pagination-bar .pagination .page-item.disabled .page-link {
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    color: color-mix(in srgb, var(--black-color) 45%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    cursor: not-allowed;
    opacity: 0.7;
}

[data-theme="dark"] .ads-pagination-bar .pagination .page-link {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
}

[data-theme="dark"] .ads-pagination-bar .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background: var(--accent-color);
    color: var(--black-color);
    border-color: var(--accent-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color) 32%, transparent);
}

[data-theme="dark"] .ads-pagination-bar .pagination .page-item.active .page-link {
    background: var(--accent-color);
    color: var(--black-color);
    border-color: var(--accent-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color) 34%, transparent);
}

[data-theme="dark"] .ads-pagination-bar .pagination .page-item.disabled .page-link {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.ads-video-modal .modal-content {
    background: color-mix(in srgb, var(--black-color) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 60%, transparent);
    border-radius: 18px;
    overflow: hidden;
}

.ads-video-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--assest-color) 90%, transparent);
    color: var(--primary-dark-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    z-index: 5;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.15s ease, background 0.2s ease;
}

.ads-video-close:hover {
    transform: rotate(90deg);
    background: var(--primary-color);
    color: var(--white-color);
}

.ads-stats-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 16px;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ads-stats-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

[data-theme="dark"] .ads-stats-card {
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .ads-stats-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 42%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.ads-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px dashed color-mix(in srgb, var(--primary-color) 20%, transparent);
}

[data-theme="dark"] .ads-stats-head {
    border-bottom-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
}

.ads-stats-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ads-stats-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary-color);
    border: 1px solid var(--primary-light);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

[data-theme="dark"] .ads-stats-ico {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.ads-stats-title {
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--black-color);
    margin: 0;
    line-height: 1.2;
}

.ads-stats-onoff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
}

.ads-stats-onoff.ads-stats-on {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
}

.ads-stats-onoff.ads-stats-off {
    background: color-mix(in srgb, var(--red) 18%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 42%, transparent);
}

.ads-stats-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ads-stats-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
}

[data-theme="dark"] .ads-stats-metric {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.ads-stats-metric-lbl {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--black-color) 62%, transparent);
    line-height: 1.2;
}

.ads-stats-metric-val {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary-dark-color);
}

[data-theme="dark"] .ads-stats-metric-val {
    color: var(--accent-color);
}

.ads-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 991.98px) {
    .ads-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .ads-stats-grid {
        grid-template-columns: 1fr;
    }
    .ads-grid {
        grid-template-columns: 1fr;
    }
    .ads-foot {
        flex-wrap: wrap;
    }
}

.ads-filter-bar .cat-btn-prim {
    height: 42px;
    padding: 0 18px;
}

.ads-cost-input {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 43px;
    background: var(--white-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 14%, transparent);
    border-radius: 9px;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ads-cost-input:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.ads-cost-input .ads-cost-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--primary-dark-color);
    background: var(--primary-bg);
    border-right: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    line-height: 1;
    white-space: nowrap;
}

.ads-cost-input .cat-input {
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 13px;
}

.ads-cost-input .cat-input:focus {
    border: 0;
    box-shadow: none;
}

[data-theme="dark"] .ads-cost-input {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .ads-cost-input:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

[data-theme="dark"] .ads-cost-input .ads-cost-prefix {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-right-color: color-mix(in srgb, var(--black-color) 20%, transparent);
}

.ads-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.ads-settings-grid .ads-settings-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

.ads-settings-grid .ads-settings-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    flex: 1 1 auto;
}

.ads-settings-grid .ads-settings-card .cat-card-body {
    flex: 1 1 auto;
}

@media (max-width: 1199.98px) {
    .ads-settings-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

.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);
}

.pgw-status-inactive {
    background: rgba(220, 53, 69, .12);
    color: var(--red);
}
.pgw-status-warning {
    background: rgba(253, 126, 20, .12);
    color: var(--yellow);
}

.ntc-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}

.ntc-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
}

.ntc-switch input:disabled {
    cursor: not-allowed;
}

.ntc-switch-track {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--black-color) 22%, transparent);
    border-radius: 100px;
    transition: background 0.22s ease, box-shadow 0.22s ease;
    z-index: 0;
}

.ntc-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--white-color);
    border-radius: 50%;
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--black-color) 20%, transparent);
    z-index: 1;
    pointer-events: none;
}

.ntc-switch input:checked ~ .ntc-switch-track {
    background: var(--primary-color);
}

.ntc-switch input:checked ~ .ntc-switch-thumb {
    transform: translateX(20px);
    background: var(--white-color);
}

.ntc-switch input:focus-visible ~ .ntc-switch-track {
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.ntc-switch input:disabled ~ .ntc-switch-track {
    opacity: 0.55;
}

.ntc-switch input:disabled ~ .ntc-switch-thumb {
    opacity: 0.75;
    box-shadow: none;
}

[data-theme="dark"] .ntc-switch-track {
    background: color-mix(in srgb, var(--black-color) 25%, transparent);
}

[data-theme="dark"] .ntc-switch input:checked ~ .ntc-switch-track {
    background: var(--accent-color);
}

[data-theme="dark"] .ntc-switch-thumb {
    background: var(--assest-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--white-color) 8%, transparent);
}

[data-theme="dark"] .ntc-switch input:checked ~ .ntc-switch-thumb {
    background: var(--white-color);
}

[data-theme="dark"] .ntc-switch input:focus-visible ~ .ntc-switch-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.ntc-global-card .cat-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 24px;
}

.ntc-global-info {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
}

.ntc-global-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
}

[data-theme="dark"] .ntc-global-icon {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.ntc-global-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ntc-global-lbl {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--black-color);
    line-height: 1.35;
    margin: 0;
}

.ntc-global-desc {
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    line-height: 1.45;
    margin: 0;
}

.ntc-global-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ntc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
}

.ntc-status-pill.is-on {
    background: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
}

.ntc-status-pill.is-off {
    background: color-mix(in srgb, var(--red) 15%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 42%, transparent);
}

.ntc-type-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--black-color);
    line-height: 1.3;
}

.ntc-type-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 13px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
}

[data-theme="dark"] .ntc-type-ico {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.ntc-save-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

@media (max-width: 767.98px) {
    .ntc-global-card .cat-card-body {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 18px;
    }

    .ntc-global-action {
        align-self: stretch;
        justify-content: space-between;
    }

    .ntc-save-row {
        justify-content: stretch;
    }

    .ntc-save-row .cat-btn-prim {
        width: 100%;
        justify-content: center;
    }
}

/* ═══ Premium Notes / Information Card ═══ */
.sys-notice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px 16px 22px;
    margin: 4px 0 18px;
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary-color) 10%, var(--assest-color)),
            color-mix(in srgb, var(--accent-color) 8%, var(--assest-color)));
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 10%, transparent);
    overflow: hidden;
}

.sys-notice-accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
    border-radius: 4px 0 0 4px;
}

.sys-notice-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--white-color);
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 32%, transparent);
    margin-top: 1px;
}

.sys-notice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sys-notice-title {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 4px;
    letter-spacing: 0.1px;
    line-height: 1.3;
}

.sys-notice-desc {
    font-family: var(--font);
    font-size: 13.5px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--black-color) 65%, transparent);
    margin: 0;
}

[data-theme="dark"] .sys-notice {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-color) 14%, var(--assest-color)),
            color-mix(in srgb, var(--primary-color) 10%, var(--assest-color)));
    border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 20%, transparent);
}

[data-theme="dark"] .sys-notice-title {
    color: var(--accent-color);
}

@media (max-width: 575.98px) {
    .sys-notice {
        padding: 14px 16px 14px 18px;
        gap: 12px;
    }

    .sys-notice-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 14px;
    }

    .sys-notice-title {
        font-size: 14px;
    }

    .sys-notice-desc {
        font-size: 13px;
    }
}

.sys-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 4px;
    align-items: stretch;
}

.sys-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 5%, transparent);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.sys-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    opacity: 0.85;
}

.sys-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--black-color) 10%, transparent);
}

[data-theme="dark"] .sys-card {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--black-color) 14%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .sys-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--black-color) 20%, transparent);
}

.sys-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    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);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--black-color) 6%, transparent);
    z-index: 2;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.sys-card:hover .sys-card-badge {
    transform: scale(1.08);
}

[data-theme="dark"] .sys-card-badge {
    background: color-mix(in srgb, var(--accent-color) 16%, var(--assest-color));
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.sys-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 68px 0 22px;
}

.sys-card-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--white-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark-color));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 30%, transparent);
    transition: transform 0.3s ease;
}

.sys-card:hover .sys-card-icon {
    transform: scale(1.05) rotate(-3deg);
}

.sys-card--primary .sys-card-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.sys-card--success .sys-card-icon {
    background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 70%, var(--primary-color)));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--green) 30%, transparent);
}

.sys-card--danger .sys-card-icon {
    background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 70%, var(--primary-dark-color)));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--red) 30%, transparent);
}

.sys-card--primary .sys-card-badge {
    background: color-mix(in srgb, var(--accent-color) 15%, var(--assest-color));
    color: var(--primary-dark-color);
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.sys-card--success .sys-card-badge {
    background: color-mix(in srgb, var(--green) 15%, var(--assest-color));
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

.sys-card--danger .sys-card-badge {
    background: color-mix(in srgb, var(--red) 15%, var(--assest-color));
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
}

[data-theme="dark"] .sys-card--primary .sys-card-badge {
    background: color-mix(in srgb, var(--accent-color) 22%, var(--assest-color));
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
}

[data-theme="dark"] .sys-card--success .sys-card-badge {
    background: color-mix(in srgb, var(--green) 24%, var(--assest-color));
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 50%, transparent);
}

[data-theme="dark"] .sys-card--danger .sys-card-badge {
    background: color-mix(in srgb, var(--red) 24%, var(--assest-color));
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 50%, transparent);
}

.sys-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sys-card-title {
    font-family: var(--font);
    font-size: 17px;
    font-weight: 700;
    color: var(--black-color);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.1px;
}

.sys-card-body {
    flex: 1 1 auto;
    padding: 14px 22px 20px;
    min-height: 60px;
}

.sys-card-desc {
    font-family: var(--font);
    font-size: 13.5px;
    line-height: 1.65;
    color: color-mix(in srgb, var(--black-color) 65%, transparent);
    margin: 0;
}

.sys-card-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 22px;
    margin-top: auto;
    transition: background 0.28s ease, border-color 0.28s ease;
}

.sys-card-action .cat-btn-prim {
    min-width: 160px;
    justify-content: center;
}

[data-theme="dark"] .sys-card-action {
    background: color-mix(in srgb, var(--accent-color) 8%, var(--assest-color));
    border-top-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .sys-card:hover .sys-card-action {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--assest-color));
    border-top-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.sys-card--primary .cat-btn-prim,
.sys-card--primary .cat-btn-prim:focus,
.sys-card--primary .cat-btn-prim:focus-visible {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color) 30%, transparent);
    color: var(--white-color) !important;
}

.sys-card--primary .cat-btn-prim:hover {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
    color: var(--white-color) !important;
}

.sys-card--success .cat-btn-prim,
.sys-card--success .cat-btn-prim:focus,
.sys-card--success .cat-btn-prim:focus-visible {
    background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 70%, var(--primary-color)));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--green) 30%, transparent);
    color: var(--white-color) !important;
}

.sys-card--success .cat-btn-prim:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--green) 70%, var(--primary-color)), var(--green));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 40%, transparent);
    color: var(--white-color) !important;
}

.sys-card--danger .cat-btn-prim,
.sys-card--danger .cat-btn-prim:focus,
.sys-card--danger .cat-btn-prim:focus-visible {
    background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 70%, var(--primary-dark-color)));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--red) 30%, transparent);
    color: var(--white-color) !important;
}

.sys-card--danger .cat-btn-prim:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--red) 70%, var(--primary-dark-color)), var(--red));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--red) 40%, transparent);
    color: var(--white-color) !important;
}

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

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

    .sys-card {
        padding: 0;
    }

    .sys-card-head {
        padding: 18px 60px 0 18px;
    }

    .sys-card-body {
        padding: 12px 18px 16px;
    }

    .sys-card-action {
        padding: 14px 18px;
    }

    .sys-card-action .cat-btn-prim {
        width: 100%;
    }
}

.aps-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
    margin-top: 6px;
    min-width: 0;
}

.aps-tabs {
    position: sticky;
    top: 88px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    border-radius: 16px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 5%, transparent);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.aps-tabs::-webkit-scrollbar {
    width: 6px;
}

.aps-tabs::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--black-color) 15%, transparent);
    border-radius: 3px;
}

[data-theme="dark"] .aps-tabs {
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 22%, transparent);
}

[data-theme="dark"] .aps-tabs::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--white-color) 15%, transparent);
}

.aps-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 10px;
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    text-align: left;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.aps-tab,
.aps-tab:focus,
.aps-tab:active,
.aps-tab:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.aps-tab::-moz-focus-inner {
    border: 0;
    padding: 0;
}

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

.aps-tab:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
    transform: translateX(2px);
}

.aps-tab.is-active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 32%, transparent);
    border-color: transparent;
    transform: translateX(0);
}

.aps-tab.is-active:hover {
    background: linear-gradient(135deg, var(--primary-dark-color) 0%, var(--primary-color) 100%);
    color: var(--accent-color);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateX(0);
}

.aps-tab.is-active:focus-visible {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 32%, transparent),
                0 0 0 3px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

/* [data-theme="dark"] .aps-tab {
    color: color-mix(in srgb, var(--white-color) 82%, transparent);
    background: color-mix(in srgb, var(--white-color) 4%, transparent);
    border-color: color-mix(in srgb, var(--white-color) 10%, transparent);
} */

[data-theme="dark"] .aps-tab:hover {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

[data-theme="dark"] .aps-tab.is-active {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-color: transparent;
}

[data-theme="dark"] .aps-tab.is-active:hover {
    background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--black-color) 25%, var(--accent-color)) 100%);
    color: var(--primary-color);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .aps-tab.is-active:focus-visible {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 35%, transparent),
                0 0 0 3px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.aps-tab-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.aps-tab:hover .aps-tab-icon {
    transform: scale(1.05);
}

.aps-tab.is-active .aps-tab-icon {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .aps-tab-icon {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .aps-tab.is-active .aps-tab-icon {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
}

.aps-tab-text {
    flex: 1 1 auto;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aps-panels {
    display: block;
    min-width: 0;
}

.aps-panel {
    display: none;
    flex-direction: column;
    gap: 18px;
    animation: apsFadeUp 0.35s ease both;
}

.aps-panel.is-active {
    display: flex;
}

.aps-section {
    animation: apsFadeUp 0.35s ease both;
}

@keyframes apsFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aps-help-text {
    margin: 8px 0 0;
    font-family: var(--font);
    font-size: 12.5px;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    line-height: 1.5;
}

.aps-help-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}

.aps-help-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

[data-theme="dark"] .aps-help-link {
    color: var(--accent-color);
}

[data-theme="dark"] .aps-help-link:hover {
    color: var(--primary-color);
}

.aps-copy-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.aps-copy-input {
    padding-right: 118px !important;
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color)) !important;
    cursor: text;
    text-overflow: ellipsis;
}

[data-theme="dark"] .aps-copy-input {
    background: color-mix(in srgb, var(--accent-color) 8%, var(--assest-color)) !important;
}

.aps-copy-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    height: 40px;
    padding: 0 16px;
    gap: 8px;
    border-radius: 10px;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    color: var(--white-color);
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-color) 28%, transparent);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.aps-copy-btn-icon {
    font-size: 14px;
    line-height: 1;
}

.aps-copy-btn-text {
    line-height: 1;
}

.aps-copy-btn:hover {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color) 38%, transparent);
}

.aps-copy-btn:active {
    transform: translateY(-50%) scale(0.97);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-color) 25%, transparent);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.aps-copy-btn:focus,
.aps-copy-btn:focus-visible {
    outline: none;
    box-shadow:
        0 4px 10px color-mix(in srgb, var(--accent-color) 28%, transparent),
        0 0 0 3px color-mix(in srgb, var(--primary-dark-color) 30%, transparent);
}

.aps-copy-btn:focus:not(:focus-visible) {
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.aps-copy-btn.is-copied {
    background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 70%, var(--primary-color)));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--green) 30%, transparent);
}

.aps-copy-btn.is-copied:focus,
.aps-copy-btn.is-copied:focus-visible {
    box-shadow:
        0 4px 10px color-mix(in srgb, var(--green) 30%, transparent),
        0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent);
}

.aps-copy-btn.is-copied:focus:not(:focus-visible) {
    box-shadow: 0 4px 10px color-mix(in srgb, var(--green) 30%, transparent);
}

[data-theme="dark"] .aps-copy-btn:focus,
[data-theme="dark"] .aps-copy-btn:focus-visible {
    box-shadow:
        0 4px 10px color-mix(in srgb, var(--accent-color) 35%, transparent),
        0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

[data-theme="dark"] .aps-copy-btn:focus:not(:focus-visible) {
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.aps-split-row {
    align-items: stretch;
}

.aps-split-col {
    display: flex;
}

.aps-split-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.aps-split-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.aps-split-card > .cat-card-body {
    flex: 1 1 auto;
}

.aps-add-btn {
    padding: 8px 14px;
    font-size: 13px;
}

.aps-dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aps-dynamic-row {
    position: relative;
    padding: 18px 46px 6px 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.aps-dynamic-row:hover {
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

[data-theme="dark"] .aps-dynamic-row {
    background: color-mix(in srgb, var(--accent-color) 6%, var(--assest-color));
    border-color: color-mix(in srgb, var(--black-color) 18%, transparent);
}

[data-theme="dark"] .aps-dynamic-row:hover {
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--black-color) 22%, transparent);
}

.aps-row-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    background: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.aps-row-remove:hover {
    background: var(--red);
    color: var(--white-color);
    transform: scale(1.05);
    border-color: var(--red);
}

.aps-dynamic-row .upl-zone {
    min-height: 120px;
}

.after-add-more,
.after-add-more-on-boarding {
    /* display: flex; */
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.after-add-more:empty,
.after-add-more-on-boarding:empty {
    margin-top: 0;
}

.cat-native-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px !important;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .aps-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

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

    .aps-tab {
        flex: 0 0 auto;
        padding: 9px 14px;
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .aps-shell {
        gap: 12px;
    }

    .aps-tab-text {
        font-size: 12.5px;
    }

    .aps-dynamic-row {
        padding: 16px 44px 4px 14px;
    }

    .aps-copy-btn {
        height: 36px;
        padding: 0 12px;
        font-size: 12.5px;
        gap: 6px;
    }

    .aps-copy-input {
        padding-right: 104px !important;
    }
}

.aps-social-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aps-social-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 18px 60px 18px 20px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color) 4%, var(--assest-color));
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 22%, transparent);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary-color) 4%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease, opacity 0.25s ease;
    animation: apsSocialCardIn 0.4s ease both;
}

.aps-social-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 7%, transparent);
    transform: translateY(-1px);
}

.aps-social-card.is-default {
    padding-right: 20px;
    background: color-mix(in srgb, var(--primary-color) 6%, var(--assest-color));
    border-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
}

.aps-social-card.is-default:hover {
    border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
}

[data-theme="dark"] .aps-social-card {
    background: color-mix(in srgb, var(--accent-color) 6%, var(--assest-color));
    border-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .aps-social-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--black-color) 20%, transparent);
}

[data-theme="dark"] .aps-social-card.is-default {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--assest-color));
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .aps-social-card.is-default:hover {
    border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

.aps-social-media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
}

.aps-social-media .upl-zone {
    width: 108px;
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease;
}

.aps-social-media .upl-zone .upl-drop-area {
    width: 108px;
    height: 108px;
    padding: 10px;
    border-radius: 12px;
    gap: 4px;
}

.aps-social-media .upl-zone .upl-img-box {
    width: 108px;
    height: 108px;
    border-radius: 12px;
}

.aps-social-media .upl-zone .upl-icon-wrap {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
}

.aps-social-media .upl-zone .upl-icon-wrap i,
.aps-social-media .upl-zone .upl-icon {
    font-size: 15px;
}

.aps-social-media .upl-zone .upl-drag-text,
.aps-social-media .upl-zone .upl-divider,
.aps-social-media .upl-zone .upl-formats,
.aps-social-media .upl-zone .upl-hint {
    display: none;
}

.aps-social-media .upl-zone .upl-choose-btn {
    padding: 4px 10px;
    font-size: 11.5px;
    gap: 4px;
}

.aps-social-media .upl-zone .upl-choose-btn i {
    font-size: 11px;
}

.aps-social-media .upl-zone .upl-change-overlay {
    gap: 4px;
    font-size: 11px;
}

.aps-social-media .upl-zone:hover {
    transform: scale(1.02);
}

.aps-social-badge {
    position: absolute;
    top: -10px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    font-family: var(--font);
    color: var(--white-color);
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 70%, var(--accent-color)));
    border: 2px solid var(--assest-color);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--primary-color) 22%, transparent);
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.aps-social-badge-num {
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

.aps-social-badge-new {
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, var(--primary-color)));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-color) 28%, transparent);
    text-transform: uppercase;
}

[data-theme="dark"] .aps-social-badge {
    border-color: color-mix(in srgb, var(--accent-color) 8%, var(--assest-color));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--black-color) 32%, transparent);
}

[data-theme="dark"] .aps-social-badge-new {
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-color) 32%, transparent);
}

.aps-social-addmore {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 18px 22px;
    margin-top: 4px;
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 32%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color) 3%, var(--assest-color));
    color: var(--primary-color);
    font-family: var(--font);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}

.aps-social-addmore:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--assest-color));
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.aps-social-addmore:hover .aps-social-addmore-title {
    color: var(--primary-color);
}

.aps-social-addmore:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.aps-social-addmore:focus,
.aps-social-addmore:active,
.aps-social-addmore::-moz-focus-inner {
    outline: none;
    border-style: dashed;
}

.aps-social-addmore::-moz-focus-inner {
    border: 0;
}

.aps-social-addmore:focus:not(:hover):not(:focus-visible) {
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary-color) 4%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
}

.aps-social-addmore:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.aps-social-addmore-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 15px;
    transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

.aps-social-addmore:hover .aps-social-addmore-icon {
    background: var(--primary-color);
    color: var(--white-color);
    transform: rotate(90deg);
}

.aps-social-addmore-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.3;
}

.aps-social-addmore-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--primary-color);
}

[data-theme="dark"] .aps-social-addmore {
    background: color-mix(in srgb, var(--accent-color) 5%, var(--assest-color));
    border-color: color-mix(in srgb, var(--accent-color) 36%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .aps-social-addmore:hover {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--assest-color));
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--black-color) 28%, transparent);
}

[data-theme="dark"] .aps-social-addmore:hover .aps-social-addmore-title {
    color: var(--accent-color);
}

[data-theme="dark"] .aps-social-addmore:focus,
[data-theme="dark"] .aps-social-addmore:active {
    outline: none;
    border-style: dashed;
}

[data-theme="dark"] .aps-social-addmore:focus:not(:hover):not(:focus-visible) {
    border-color: color-mix(in srgb, var(--accent-color) 36%, transparent);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--black-color) 14%, transparent);
}

[data-theme="dark"] .aps-social-addmore:focus-visible {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
}

[data-theme="dark"] .aps-social-addmore-icon {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-color);
}

[data-theme="dark"] .aps-social-addmore:hover .aps-social-addmore-icon {
    background: var(--accent-color);
    color: var(--assest-color);
}

[data-theme="dark"] .aps-social-addmore-title {
    color: var(--accent-color);
}

[data-theme="dark"] .aps-social-addmore-sub {
    color: color-mix(in srgb, var(--white-color) 55%, transparent);
}

.aps-social-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.aps-social-field {
    margin: 0;
}

.aps-social-remove {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    background: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.aps-social-remove:hover {
    background: var(--red);
    color: var(--white-color);
    transform: translateY(-1px) scale(1.06);
    border-color: var(--red);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--red) 35%, transparent);
}

.aps-social-remove:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--red) 25%, transparent);
}

.aps-social-remove:focus,
.aps-social-remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 30%, transparent);
}

.aps-social-remove:focus:not(:focus-visible) {
    box-shadow: none;
}

[data-theme="dark"] .aps-social-remove {
    background: color-mix(in srgb, var(--red) 18%, transparent);
    border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

[data-theme="dark"] .aps-social-remove:hover {
    background: var(--red);
    color: var(--white-color);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--red) 45%, transparent);
}

.aps-social-card.is-leaving {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
}

.aps-social-card.is-entering {
    animation: apsSocialCardIn 0.4s ease both;
}

@keyframes apsSocialCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .aps-social-card {
        flex-direction: column;
        padding: 22px 18px 60px 18px;
        gap: 16px;
    }

    .aps-social-media {
        width: 100%;
    }

    .aps-social-media .upl-zone {
        justify-content: center;
    }

    .aps-social-remove {
        top: auto;
        bottom: 14px;
        right: 14px;
    }

    .aps-social-badge {
        left: 12px;
    }

    .aps-social-addmore {
        flex-direction: column;
        gap: 8px;
        min-height: 108px;
        padding: 18px 16px;
        text-align: center;
    }

    .aps-social-addmore-text {
        align-items: center;
    }
}

/* ── Admin Dashboard 2026 (Enterprise SaaS) ───────────────────────────── */
.dash-welcome {
    position: relative;
    margin: 0 0 22px 0;
    padding: 22px 26px;
    border-radius: 18px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary-color) 92%, transparent) 0%,
            color-mix(in srgb, var(--primary-dark-color) 88%, transparent) 55%,
            color-mix(in srgb, var(--primary-color) 96%, transparent) 100%);
    color: var(--assest-color);
    overflow: hidden;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--primary-color) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .dash-welcome {
    --assest-color: var(--black-color);
    background:
    linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color) 92%, transparent) 0%,
        color-mix(in srgb, var(--primary-dark-color) 88%, transparent) 55%,
        color-mix(in srgb, var(--primary-color) 96%, transparent) 100%);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--primary-color) 45%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
    color: var(--assest-color);
}

[data-theme="dark"] .dash-welcome-cta:hover {
    background: color-mix(in srgb, var(--accent-color) 88%, var(--black-color));
}

.dash-welcome-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 45%, transparent) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(4px);
}

.dash-welcome-glow::after {
    content: '';
    position: absolute;
    bottom: -140px;
    left: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 30%, transparent) 0%, transparent 70%);
}

.dash-welcome-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.dash-welcome-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 320px;
    min-width: 0;
}

.dash-welcome-avatar {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, var(--primary-color)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.dash-welcome-avatar-text {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    letter-spacing: 0.5px;
}

.dash-welcome-avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--accent-color) 55%, transparent);
    animation: dashRingSpin 24s linear infinite;
}

@keyframes dashRingSpin {
    to { transform: rotate(360deg); }
}

.dash-welcome-info {
    min-width: 0;
}

.dash-welcome-greet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: color-mix(in srgb, var(--assest-color) 82%, transparent);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dash-welcome-greet i {
    color: var(--accent-color);
    font-size: 14px;
}

.dash-welcome-name {
    margin: 4px 0 6px 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--assest-color);
    line-height: 1.15;
    letter-spacing: -0.2px;
}

.dash-welcome-wave {
    display: inline-block;
    animation: dashWave 2.4s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes dashWave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(12deg); }
    40% { transform: rotate(-8deg); }
    50% { transform: rotate(10deg); }
}

.dash-welcome-sub {
    margin: 0;
    font-size: 13.5px;
    color: color-mix(in srgb, var(--assest-color) 78%, transparent);
    max-width: 480px;
}

.dash-welcome-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--assest-color) 12%, transparent);
    color: color-mix(in srgb, var(--assest-color) 90%, transparent);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--assest-color) 18%, transparent);
}

.dash-welcome-email i {
    color: var(--accent-color);
    font-size: 11px;
}

.dash-welcome-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

.dash-welcome-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--assest-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--assest-color) 18%, transparent);
    min-width: 190px;
}

.dash-welcome-meta-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--assest-color) 72%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dash-welcome-meta-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--assest-color);
    letter-spacing: 0.2px;
    margin-top: 2px;
}

.dash-welcome-meta-time {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent-color);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.dash-welcome-overview {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dash-welcome-overview-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
    color: var(--assest-color);
    min-width: 150px;
}

.dash-welcome-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 60%, transparent);
    color: var(--primary-color);
    font-size: 14px;
}

.dash-welcome-overview-body {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.dash-welcome-overview-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--assest-color);
}

.dash-welcome-overview-label {
    font-size: 11.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--assest-color) 78%, transparent);
    margin-top: 2px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dash-welcome-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--accent-color);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.dash-welcome-cta:hover {
    transform: translateY(-2px);
    color: var(--primary-color);
    text-decoration: none;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent-color) 45%, transparent);
    background: color-mix(in srgb, var(--accent-color) 88%, var(--white-color));
}

.dash-welcome-cta:focus-visible {
    outline: 2px dashed var(--accent-color);
    outline-offset: 3px;
}

.dash-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 14px 0;
    flex-wrap: wrap;
}

.dash-section-head-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--black-color);
    letter-spacing: -0.1px;
}

.dash-section-title i {
    color: var(--primary-color);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

[data-theme="dark"] .dash-section-title i {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.dash-section-sub {
    margin: 4px 0 0 44px;
    font-size: 13px;
    color: color-mix(in srgb, var(--black-color) 65%, transparent);
}

.dash-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--green) 18%, transparent);
    color: var(--green);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
}

.dash-section-pill i {
    font-size: 8px;
    animation: dashPulse 1.6s ease-in-out infinite;
}

.dash-section-pill-accent {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
}

[data-theme="dark"] .dash-section-pill-accent {
    color: var(--accent-color);
}

@keyframes dashPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.25); }
}

.dash-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dash-counter-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-counter-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    min-height: 108px;
    border-radius: 16px;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--dash-tone-1, var(--primary-color)) 65%, transparent);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 4%, transparent);
}

[data-theme="dark"] .dash-counter-card {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--dash-tone-1, var(--accent-color)) 18%, transparent);
    border-left-color: color-mix(in srgb, var(--dash-tone-1, var(--accent-color)) 75%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, #000 30%, transparent);
}

.dash-counter-card::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--dash-tone-1, var(--primary-color)) 22%, transparent) 0%, transparent 70%);
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

[data-theme="dark"] .dash-counter-card::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--dash-tone-1, var(--accent-color)) 32%, transparent) 0%, transparent 70%);
}

.dash-counter-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 18px 30px color-mix(in srgb, var(--dash-tone-1, var(--primary-color)) 22%, transparent);
    border-color: color-mix(in srgb, var(--dash-tone-1, var(--primary-color)) 35%, transparent);
    border-left-color: var(--dash-tone-1, var(--primary-color));
}

[data-theme="dark"] .dash-counter-card:hover {
    box-shadow: 0 18px 34px color-mix(in srgb, #000 55%, transparent);
    border-color: color-mix(in srgb, var(--dash-tone-1, var(--accent-color)) 45%, transparent);
}

.dash-counter-card:hover::before {
    transform: scale(1.4);
    opacity: 1;
}

.dash-counter-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        var(--dash-tone-1, var(--primary-color)),
        var(--dash-tone-2, var(--primary-dark-color)));
    color: var(--white-color);
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--dash-tone-1, var(--primary-color)) 32%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .dash-counter-icon {
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--dash-tone-1, var(--accent-color)) 38%, transparent),
                inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}

.dash-counter-card:hover .dash-counter-icon {
    transform: rotate(-6deg) scale(1.06);
    box-shadow: 0 12px 22px color-mix(in srgb, var(--dash-tone-1, var(--primary-color)) 45%, transparent);
}

.dash-counter-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.dash-counter-value {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--black-color);
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

.dash-counter-label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 62%, transparent);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

[data-theme="dark"] .dash-counter-label {
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
}

.dash-counter-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--dash-tone-1, var(--primary-color)),
        var(--dash-tone-2, var(--primary-dark-color)));
    opacity: 0.85;
    transition: height 0.3s ease;
}

.dash-counter-card:hover .dash-counter-line {
    height: 4px;
}

.dash-analytics-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.dash-listing-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.dash-panel {
    position: relative;
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 4%, transparent);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.dash-panel:hover {
    box-shadow: 0 10px 26px color-mix(in srgb, var(--black-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.dash-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px dashed color-mix(in srgb, var(--black-color) 15%, transparent);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dash-panel-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.dash-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        var(--primary-color),
        var(--primary-dark-color));
    color: var(--assest-color);
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

[data-theme="dark"] .dash-panel-icon {
    color: var(--white-color);
}

.dash-panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--black-color);
    letter-spacing: -0.1px;
    line-height: 1.2;
}

.dash-panel-sub {
    margin: 3px 0 0 0;
    font-size: 12.5px;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
}

.dash-panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--primary-color);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.22s ease;
}

[data-theme="dark"] .dash-panel-link {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
}

.dash-panel-link:hover {
    background: var(--primary-color);
    color: var(--assest-color);
    text-decoration: none;
    border-color: transparent;
    transform: translateX(2px);
}

[data-theme="dark"] .dash-panel-link:hover {
    background: var(--accent-color);
    color: var(--primary-color);
}

.dash-panel-link i {
    font-size: 10px;
    transition: transform 0.22s ease;
}

.dash-panel-link:hover i {
    transform: translateX(3px);
}

.dash-range-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
}

.dash-range-btn {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
    cursor: pointer;
    transition: all 0.22s ease;
}

.dash-range-btn:focus,
.dash-range-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.dash-range-btn:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

[data-theme="dark"] .dash-range-btn:hover {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.dash-range-btn.is-active {
    background: var(--primary-color);
    color: var(--assest-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

[data-theme="dark"] .dash-range-btn.is-active {
    background: var(--accent-color);
    color: var(--primary-color);
}

.dash-chart-wrap {
    position: relative;
    min-height: 340px;
    padding-top: 6px;
}

.dash-chart-wrap-lg {
    min-height: 400px;
}

.dash-chart-wrap canvas {
    max-height: 100%;
}

.dash-chart-wrap .apexcharts-canvas {
    margin: 0 auto;
}

.dash-chart-wrap .apexcharts-tooltip {
    box-shadow: 0 10px 26px color-mix(in srgb, var(--black-color) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent) !important;
    border-radius: 10px !important;
}

[data-theme="dark"] .dash-chart-wrap .apexcharts-tooltip {
    background: color-mix(in srgb, var(--assest-color) 92%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent) !important;
    color: var(--black-color);
}

.dash-chart-wrap .apexcharts-xaxistooltip {
    border-radius: 8px !important;
}

.dash-chart-wrap .apexcharts-xaxis-title text,
.dash-chart-wrap .apexcharts-yaxis-title text,
.dash-chart-wrap .apexcharts-xaxis-texts-g text,
.dash-chart-wrap .apexcharts-yaxis-texts-g text {
    fill: var(--black-color);
}

.dash-chart-wrap .apexcharts-gridline {
    stroke: color-mix(in srgb, var(--black-color) 12%, transparent);
}

[data-theme="dark"] .dash-chart-wrap .apexcharts-gridline {
    stroke: color-mix(in srgb, var(--black-color) 18%, transparent);
}

.dash-cat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 0;
}

.dash-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    border: 1px solid transparent;
    transition: all 0.22s ease;
    cursor: pointer;
}

[data-theme="dark"] .dash-cat-item {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

.dash-cat-item:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    transform: translateX(3px);
}

[data-theme="dark"] .dash-cat-item:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.dash-cat-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, var(--primary-color)));
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.3px;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.dash-cat-thumb {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
}

.dash-cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dash-cat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.dash-cat-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--black-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-cat-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11.5px;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    font-weight: 500;
}

.dash-cat-meta i {
    color: var(--accent-color);
    font-size: 10px;
}

.dash-cat-arrow {
    color: color-mix(in srgb, var(--black-color) 40%, transparent);
    font-size: 12px;
    transition: transform 0.22s ease, color 0.22s ease;
}

.dash-cat-item:hover .dash-cat-arrow {
    color: var(--primary-color);
    transform: translateX(3px);
}

[data-theme="dark"] .dash-cat-item:hover .dash-cat-arrow {
    color: var(--accent-color);
}

.dash-listing-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-listing-item {
    display: grid;
    grid-template-columns: 32px 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    border: 1px solid transparent;
    transition: all 0.22s ease;
}

[data-theme="dark"] .dash-listing-item {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

.dash-listing-item:hover {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

[data-theme="dark"] .dash-listing-item:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.dash-listing-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
}

[data-theme="dark"] .dash-listing-index {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-color);
}

.dash-listing-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--black-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
}

.dash-listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dash-listing-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.dash-listing-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--black-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
}

.dash-listing-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: color-mix(in srgb, var(--black-color) 62%, transparent);
    font-weight: 500;
}

.dash-listing-type i {
    color: var(--primary-color);
    font-size: 10px;
}

[data-theme="dark"] .dash-listing-type i {
    color: var(--accent-color);
}

.dash-listing-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding-left: 8px;
    border-left: 1px dashed color-mix(in srgb, var(--black-color) 15%, transparent);
}

.dash-listing-price-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dash-listing-price-label i {
    color: var(--accent-color);
    font-size: 11px;
}

.dash-listing-price-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .dash-listing-price-value {
    color: var(--accent-color);
}

.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px 20px;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    font-size: 13px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--black-color) 4%, transparent);
    border: 1px dashed color-mix(in srgb, var(--black-color) 15%, transparent);
}

.dash-empty i {
    font-size: 28px;
    color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

[data-theme="dark"] .dash-empty i {
    color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

@media (max-width: 1199px) {
    .dash-counter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dash-analytics-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .dash-listing-row {
        grid-template-columns: 1fr;
    }
    .dash-counter-grid,
    .dash-counter-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-welcome-right {
        align-items: stretch;
        width: 100%;
    }
    .dash-welcome-meta,
    .dash-welcome-overview-item {
        min-width: 0;
    }
    .dash-welcome-overview {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .dash-welcome {
        padding: 18px;
    }
    .dash-welcome-name {
        font-size: 22px;
    }
    .dash-welcome-avatar {
        width: 60px;
        height: 60px;
    }
    .dash-welcome-avatar-text {
        font-size: 24px;
    }
    .dash-panel {
        padding: 16px;
    }
    .dash-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .dash-panel-actions {
        width: 100%;
        justify-content: space-between;
    }
    .dash-listing-item {
        grid-template-columns: 26px 44px 1fr;
        grid-template-rows: auto auto;
        gap: 8px 10px;
    }
    .dash-listing-price {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px dashed color-mix(in srgb, var(--black-color) 15%, transparent);
        padding: 6px 0 0 0;
        margin-top: 4px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        width: 100%;
    }
    .dash-listing-price-value {
        margin-top: 0;
    }
    .dash-chart-wrap {
        min-height: 280px;
    }
    .dash-chart-wrap-lg {
        min-height: 320px;
    }
}

@media (max-width: 480px) {
    .dash-counter-grid,
    .dash-counter-grid-3 {
        grid-template-columns: 1fr;
    }
    .dash-welcome-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .dash-welcome-left {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .dash-welcome-right {
        align-items: stretch;
    }
    .dash-section-sub {
        margin-left: 0;
    }
}

/* ===========================================================
   Dashboard — Latest Visit Booking
   Reuses .dash-panel wrapper. Adds a compact table layout that
   matches the existing dashboard typography, spacing, and hover
   behavior. Works in both light and dark modes via root vars.
=========================================================== */

.dash-visit-row {
    display: block;
    margin-bottom: 20px;
}

.dash-visit-row .dash-panel {
    padding: 20px 22px;
}

.dash-visit-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.dash-visit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    min-width: 940px;
    table-layout: auto;
}

.dash-visit-table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    padding: 0 14px 8px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px dashed color-mix(in srgb, var(--black-color) 15%, transparent);
}

.dash-visit-table tbody tr {
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    transition: all 0.22s ease;
}

[data-theme="dark"] .dash-visit-table tbody tr {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

.dash-visit-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 10%, transparent);
    transform: translateY(-2px);
}

[data-theme="dark"] .dash-visit-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.dash-visit-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--black-color);
    vertical-align: middle;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.dash-visit-table tbody td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-left: 1px solid transparent;
}

.dash-visit-table tbody td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-right: 1px solid transparent;
}

.dash-visit-table tbody tr:hover td {
    border-top-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-bottom-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.dash-visit-table tbody tr:hover td:first-child {
    border-left-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.dash-visit-table tbody tr:hover td:last-child {
    border-right-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

[data-theme="dark"] .dash-visit-table tbody tr:hover td {
    border-top-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    border-bottom-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .dash-visit-table tbody tr:hover td:first-child {
    border-left-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

[data-theme="dark"] .dash-visit-table tbody tr:hover td:last-child {
    border-right-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.dash-visit-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .dash-visit-id {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--accent-color);
}

.dash-visit-customer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-align: left;
}

.dash-visit-avatar-link {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.dash-visit-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    display: block;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dash-visit-avatar-img:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

[data-theme="dark"] .dash-visit-avatar-img {
    border-color: color-mix(in srgb, var(--accent-color) 26%, transparent);
}

.dash-visit-customer-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.dash-visit-customer-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    letter-spacing: -0.1px;
}

.dash-visit-customer-sub {
    font-size: 11.5px;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.dash-visit-property-cell {
    width: 32%;
    min-width: 300px;
}

.dash-visit-property {
    align-items: center;
    max-width: 100%;
}

.dash-visit-property .proj-title-stack {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-visit-property-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: normal;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--black-color);
    max-width: 100%;
}

.dash-visit-schedule {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dash-visit-schedule-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--black-color);
}

.dash-visit-schedule-date i {
    color: var(--primary-color);
    font-size: 11px;
}

[data-theme="dark"] .dash-visit-schedule-date i {
    color: var(--accent-color);
}

.dash-visit-schedule-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: color-mix(in srgb, var(--black-color) 60%, transparent);
    font-variant-numeric: tabular-nums;
}

.dash-visit-schedule-time i {
    font-size: 10.5px;
    color: var(--accent-color);
}

.dash-visit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dash-visit-badge i {
    font-size: 10.5px;
    line-height: 1;
}

.dash-visit-badge-pending {
    background: color-mix(in srgb, var(--yellow) 14%, transparent);
    color: color-mix(in srgb, var(--yellow) 90%, var(--black-color));
    border-color: color-mix(in srgb, var(--yellow) 32%, transparent);
}

.dash-visit-badge-confirmed {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 32%, transparent);
}

.dash-visit-badge-rejected {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.dash-visit-badge-completed {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.dash-visit-badge-cancelled {
    background: color-mix(in srgb, var(--dark) 10%, transparent);
    color: color-mix(in srgb, var(--dark) 70%, var(--black-color));
    border-color: color-mix(in srgb, var(--dark) 24%, transparent);
}

[data-theme="dark"] .dash-visit-badge-cancelled {
    color: color-mix(in srgb, var(--black-color) 70%, transparent);
    border-color: color-mix(in srgb, var(--black-color) 22%, transparent);
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
}

.dash-visit-created {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.dash-visit-created-date {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--black-color);
}

.dash-visit-created-rel {
    font-size: 11px;
    color: color-mix(in srgb, var(--black-color) 55%, transparent);
    font-weight: 500;
}

@media (max-width: 767px) {
    .dash-visit-row .dash-panel {
        padding: 16px;
    }
    .dash-visit-table {
        min-width: 880px;
    }
    .dash-visit-property-cell {
        min-width: 260px;
    }
}

/* ===========================================================
   Dashboard — Latest Visit Booking — End
=========================================================== */

/* Dashboard 2026 — Reveal & Stagger Animations */
.dash-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.dash-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

.dash-counter-grid.dash-reveal .dash-stagger {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--dash-i, 0) * 60ms);
}

.dash-counter-grid.dash-reveal.is-in .dash-stagger {
    opacity: 1;
    transform: translateY(0);
}

@keyframes dashPageFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dash-reveal,
    .dash-counter-grid.dash-reveal .dash-stagger,
    .body-content {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .dash-welcome-avatar-ring,
    .dash-welcome-wave,
    .dash-section-pill i {
        animation: none !important;
    }
}

/* Dashboard 2026 — Dark Mode Refinements */

[data-theme="dark"] .dash-panel {
    background: var(--assest-color);
    border-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 6%, transparent);
}

[data-theme="dark"] .dash-panel:hover {
    border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--black-color) 10%, transparent);
}

[data-theme="dark"] .dash-panel-head {
    border-bottom-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

[data-theme="dark"] .dash-panel-icon {
    color: var(--black-color);
}

[data-theme="dark"] .dash-section-pill {
    background: color-mix(in srgb, var(--green) 22%, transparent);
    color: color-mix(in srgb, var(--green) 92%, var(--black-color));
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

[data-theme="dark"] .dash-range-toggle {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

[data-theme="dark"] .dash-range-btn {
    color: color-mix(in srgb, var(--black-color) 78%, transparent);
}

[data-theme="dark"] .dash-cat-thumb,
[data-theme="dark"] .dash-listing-thumb {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
}

[data-theme="dark"] .dash-listing-price {
    border-left-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

[data-theme="dark"] .dash-empty {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
}

[data-theme="dark"] .dash-listing-item {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

[data-theme="dark"] .dash-cat-item {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

[data-theme="dark"] .dash-listing-price-label i {
    color: var(--accent-color);
}

[data-theme="dark"] .dash-welcome-cta {
    background: var(--accent-color);
    color: var(--primary-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.dash-filter-bar {
    background: var(--assest-color);
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
    border-radius: 16px;
    padding: 14px 18px;
    margin: 0 0 22px 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 4%, transparent);
}

[data-theme="dark"] .dash-filter-bar {
    border-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--black-color) 6%, transparent);
}

.dash-filter-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-filter-pills {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--black-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
    flex-wrap: wrap;
}

[data-theme="dark"] .dash-filter-pills {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.dash-filter-pills .dash-range-btn {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
    cursor: pointer;
    transition: all 0.22s ease;
}

.dash-filter-pills .dash-range-btn:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

[data-theme="dark"] .dash-filter-pills .dash-range-btn:hover {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.dash-filter-pills .dash-range-btn.is-active {
    background: var(--primary-color);
    color: var(--assest-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

[data-theme="dark"] .dash-filter-pills .dash-range-btn.is-active {
    background: var(--accent-color);
    color: var(--primary-color);
}

.dash-filter-range {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-filter-label {
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin: 0;
}

.dash-filter-input {
    background: color-mix(in srgb, var(--black-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--black-color) 12%, transparent);
    color: var(--black-color);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: border-color 0.22s ease, background 0.22s ease;
    font-family: inherit;
}

[data-theme="dark"] .dash-filter-input {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.dash-filter-input:focus {
    border-color: var(--primary-color);
    background: var(--assest-color);
}

[data-theme="dark"] .dash-filter-input:focus {
    border-color: var(--accent-color);
}

.dash-filter-apply {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--assest-color);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 22%, transparent);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.dash-filter-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

[data-theme="dark"] .dash-filter-apply {
    background: var(--accent-color);
    color: var(--primary-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

[data-theme="dark"] .dash-filter-apply:hover {
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.dash-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: transparent;
    color: color-mix(in srgb, var(--black-color) 72%, transparent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--black-color) 15%, transparent);
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.dash-filter-reset:hover {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    text-decoration: none;
}

[data-theme="dark"] .dash-filter-reset:hover {
    color: var(--accent-color);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.dash-txn-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--black-color) 8%, transparent);
}

[data-theme="dark"] .dash-txn-table-wrap {
    border-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.dash-txn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--black-color);
    min-width: 720px;
}

.dash-txn-table thead th {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    color: color-mix(in srgb, var(--black-color) 80%, transparent);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--black-color) 10%, transparent);
}

[data-theme="dark"] .dash-txn-table thead th {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border-bottom-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: color-mix(in srgb, var(--black-color) 82%, transparent);
}

.dash-txn-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px dashed color-mix(in srgb, var(--black-color) 10%, transparent);
    vertical-align: middle;
}

[data-theme="dark"] .dash-txn-table tbody td {
    border-bottom-color: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

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

.dash-txn-table tbody tr {
    transition: background 0.2s ease;
}

.dash-txn-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
}

[data-theme="dark"] .dash-txn-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}

.dash-txn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.dash-txn-badge i {
    font-size: 10px;
}

.dash-txn-badge-sub {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
}

[data-theme="dark"] .dash-txn-badge-sub {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
}

.dash-txn-badge-boost {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    color: var(--blue);
    border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
}

[data-theme="dark"] .dash-txn-badge-boost {
    background: color-mix(in srgb, var(--blue) 22%, transparent);
    border-color: color-mix(in srgb, var(--blue) 40%, transparent);
}

.dash-txn-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: color-mix(in srgb, var(--black-color) 78%, transparent);
}

.dash-txn-amount {
    font-weight: 700;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .dash-txn-amount {
    color: var(--accent-color);
}

.dash-panel-listing .dash-listing-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

[data-theme="dark"] .dash-panel-listing .dash-listing-thumb {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

@media (max-width: 767px) {
    .dash-filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .dash-filter-range {
        justify-content: space-between;
    }
    .dash-filter-input {
        flex: 1 1 auto;
        min-width: 0;
    }
}