/* Global project customizations. */
:root {
    --app-button-radius: var(--bs-border-radius, .25rem);
    --app-field-radius: var(--bs-border-radius, .25rem);
    --app-panel-radius: 10px;
}

html[lang="en"],
html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea {
    font-family: "Roboto", "Noto Sans Khmer", sans-serif;
}

html[lang="kh"],
html[lang="kh"] body,
html[lang="kh"] button,
html[lang="kh"] input,
html[lang="kh"] select,
html[lang="kh"] textarea {
    font-family: "Noto Sans Khmer", sans-serif;
}

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

.form-control,
.form-select {
    border-color: #cbd5e1;
    border-radius: var(--app-field-radius);
}

.card {
    border-color: var(--bs-border-color);
    border-radius: var(--app-panel-radius);
}

.btn {
    border-radius: var(--app-button-radius);
}

.card-header {
    border-bottom-color: var(--bs-border-color);
}

.form-control:focus,
.form-select:focus {
    border-color: #5b718c;
    box-shadow: 0 0 0 .2rem rgba(1, 30, 65, .10);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 .2rem rgba(148, 163, 184, .16);
}

/* Breadcrumb hierarchy using the system navy palette. */
.page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item a {
    color: #011e41;
    font-weight: 500;
    text-decoration: none;
}

.page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item a:hover {
    color: #062c5c;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item.active {
    color: #64748b;
}

.page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #94a3b8;
}

[data-bs-theme="dark"] .page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item a {
    color: #bfdbfe;
}

[data-bs-theme="dark"] .page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item a:hover {
    color: #dbeafe;
}

[data-bs-theme="dark"] .page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item.active {
    color: #94a3b8;
}

[data-bs-theme="dark"] .page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #64748b;
}

.btn-primary {
    --bs-btn-bg: #011e41;
    --bs-btn-border-color: #011e41;
    --bs-btn-hover-bg: #062c5c;
    --bs-btn-hover-border-color: #062c5c;
    --bs-btn-active-bg: #00152e;
    --bs-btn-active-border-color: #00152e;
    --bs-btn-disabled-bg: #011e41;
    --bs-btn-disabled-border-color: #011e41;
}

/* Use the system action color for every checked switch. */
.form-switch .form-check-input:checked,
.form-switch-primary .form-check-input:checked {
    background-color: #011e41 !important;
    border-color: #011e41 !important;
}

.menu-search {
    --menu-search-accent: #011e41;
    --menu-search-accent-fill: #011e41;
    --menu-search-accent-soft: rgba(1, 30, 65, .08);
    --menu-search-accent-muted: rgba(1, 30, 65, .12);
    position: relative;
}

.menu-search-backdrop,
.menu-search-tabs,
.menu-search-results,
.menu-search-footer,
.menu-search-close {
    display: none;
}

.menu-search-dialog .menu-search-form {
    position: relative;
}

.menu-search-leading-icon {
    color: var(--bs-topbar-nav-icon-color);
    display: block;
    font-size: 22px;
    left: 16px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.menu-search-open {
    overflow: hidden;
}

.menu-search.is-open .menu-search-backdrop {
    backdrop-filter: blur(3px);
    background: rgba(15, 23, 42, .48);
    display: block;
    inset: 0;
    position: fixed;
    z-index: 1090;
}

.menu-search.is-open .menu-search-dialog {
    background: #fff;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    left: 50%;
    max-height: min(82vh, 760px);
    overflow: hidden;
    position: fixed;
    top: 10vh;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px));
    z-index: 1091;
}

.menu-search.is-open .menu-search-form {
    align-items: center;
    border-bottom: 1px solid #e7eaf0;
    display: flex;
    min-height: 58px;
    padding: 0 14px 0 18px;
}

.topbar .menu-search.is-open .menu-search-leading-icon {
    color: #8b93a1;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 21px;
    left: auto;
    position: static;
    top: auto;
    transform: none;
}

.topbar .menu-search.is-open .menu-search-form .top-search,
.topbar .menu-search.is-open .menu-search-form .top-search:focus {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    height: 58px;
    padding: 0 12px;
    width: 100%;
}

.menu-search.is-open .top-search::-webkit-search-cancel-button {
    display: none;
}

.topbar .menu-search.is-open .menu-search-form .menu-search-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #8b93a1;
    display: inline-flex;
    flex: 0 0 32px;
    font-size: 20px;
    height: 32px;
    justify-content: center;
    left: auto;
    padding: 0;
    position: static;
    top: auto;
    transform: none;
}

.menu-search.is-open .menu-search-close:hover {
    background: #f3f4f6;
    color: #202631;
}

.menu-search.is-open .menu-search-tabs {
    align-items: center;
    border-bottom: 1px solid #e7eaf0;
    display: flex;
    gap: 4px;
    min-height: 47px;
    padding: 8px 10px;
}

.menu-search-tab {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #5f6672;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 11px;
}

.menu-search-tab span {
    background: #f0f1f3;
    border-radius: 999px;
    color: #9096a0;
    font-size: 11px;
    margin-left: 5px;
    padding: 2px 7px;
}

.menu-search-tab.active {
    background: var(--menu-search-accent-soft);
    color: var(--menu-search-accent);
}

.menu-search-tab.active span {
    background: var(--menu-search-accent-muted);
    color: var(--menu-search-accent);
}

.menu-search.is-open .menu-search-results {
    display: block;
    min-height: 160px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    scrollbar-color: #d4d7dc transparent;
    scrollbar-width: thin;
}

.menu-search-group {
    color: #9298a2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 11px 10px 6px;
    text-transform: uppercase;
}

.menu-search-result-item {
    align-items: center;
    border-radius: 9px;
    color: #1f242d;
    display: grid;
    gap: 12px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 50px;
    padding: 6px 10px;
    text-decoration: none;
}

.menu-search-result-item:hover,
.menu-search-result-item:focus,
.menu-search-result-item.active {
    background: var(--menu-search-accent-soft);
    color: var(--menu-search-accent);
    outline: 0;
}

.menu-search-result-icon {
    align-items: center;
    background: #f4f5f7;
    border: 1px solid #e7e9ed;
    border-radius: 8px;
    color: #6f7682;
    display: inline-flex;
    font-size: 18px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.menu-search-result-item.active .menu-search-result-icon,
.menu-search-result-item:hover .menu-search-result-icon {
    background: var(--menu-search-accent-fill);
    border-color: var(--menu-search-accent-fill);
    color: #fff;
}

.menu-search-result-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-search-result-content strong {
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-search-result-content small,
.menu-search-result-type {
    color: #9298a2;
    font-size: 11px;
}

.menu-search-result-type {
    align-items: center;
    display: flex;
    gap: 12px;
    text-transform: capitalize;
}

.menu-search-result-arrow {
    color: var(--menu-search-accent);
    display: none;
    font-size: 18px;
}

.menu-search-result-item.active .menu-search-result-arrow,
.menu-search-result-item:hover .menu-search-result-arrow {
    display: inline-block;
}

.menu-search-empty {
    align-items: center;
    color: #8b93a1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    padding: 30px;
    text-align: center;
}

.menu-search-empty i {
    font-size: 28px;
    margin-bottom: 8px;
}

.menu-search-empty strong {
    color: #444b57;
    font-size: 14px;
}

.menu-search-empty small {
    margin-top: 3px;
}

.menu-search.is-open .menu-search-footer {
    align-items: center;
    border-top: 1px solid #e7eaf0;
    color: #959ba5;
    display: flex;
    font-size: 11px;
    gap: 16px;
    min-height: 41px;
    padding: 7px 16px;
}

.menu-search-footer span {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.menu-search-footer kbd {
    background: #f7f7f8;
    border: 1px solid #dfe2e6;
    border-radius: 4px;
    box-shadow: none;
    color: #7b828d;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 17px;
    min-width: 20px;
    padding: 0 4px;
    text-align: center;
}

.menu-search-footer small {
    margin-left: auto;
}

[data-bs-theme="dark"] .menu-search.is-open .menu-search-dialog {
    background: #1d2330;
    border-color: #343c4b;
}

[data-bs-theme="dark"] .menu-search {
    --menu-search-accent: #bfdbfe;
    --menu-search-accent-fill: #2563eb;
    --menu-search-accent-soft: rgba(147, 197, 253, .14);
    --menu-search-accent-muted: rgba(147, 197, 253, .20);
}

[data-bs-theme="dark"] .menu-search.is-open .menu-search-form,
[data-bs-theme="dark"] .menu-search.is-open .menu-search-tabs,
[data-bs-theme="dark"] .menu-search.is-open .menu-search-footer {
    border-color: #343c4b;
}

[data-bs-theme="dark"] .menu-search-result-item,
[data-bs-theme="dark"] .menu-search-empty strong {
    color: #e6e9ee;
}

[data-bs-theme="dark"] .menu-search-result-icon,
[data-bs-theme="dark"] .menu-search-footer kbd {
    background: #252c39;
    border-color: #3b4453;
}

@media (max-width: 767.98px) {
    .menu-search.hide-phone {
        display: list-item !important;
    }

    .menu-search:not(.is-open) .menu-search-dialog {
        display: none;
    }

    .menu-search.is-open .menu-search-dialog {
        border-radius: 12px;
        max-height: calc(100dvh - 24px);
        top: 12px;
        width: calc(100vw - 24px);
    }

    .menu-search:not(.is-open) {
        display: none !important;
    }

    .menu-search-footer small {
        display: none;
    }
}

.image-dropzone {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 180px;
    padding: 18px;
}

.image-dropzone:hover {
    background: #f3f5f9;
}

.image-dropzone .dz-message {
    color: #64748b;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    text-align: center;
}

.image-dropzone .dz-message i {
    color: #0c1b37;
    font-size: 34px;
}

.image-dropzone .dz-message span {
    color: #0c1b37;
    font-weight: 500;
}

.image-dropzone .dz-preview {
    margin: 0;
}

.image-dropzone .dz-image {
    border-radius: 8px;
}

.user-photo-preview {
    display: inline-flex;
    outline: 0;
    position: relative;
}

.user-photo-preview::after {
    align-items: center;
    background: rgba(12, 27, 55, .55);
    border-radius: 50%;
    color: #ffffff;
    content: "\f06e";
    display: flex;
    font-family: "Line Awesome Free";
    font-size: 16px;
    font-weight: 900;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity .15s ease;
}

.user-photo-preview:hover::after,
.user-photo-preview:focus::after {
    opacity: 1;
}

.account-user-toggle {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    max-width: 190px;
}

.account-user-name {
    color: var(--bs-body-color);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-branch-selector {
    margin-inline: 8px 4px;
}

.current-branch-selector .current-branch-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--bs-body-color);
    display: inline-flex;
    gap: 6px;
    height: 36px;
    max-width: 220px;
    padding: 0 10px;
}

.current-branch-selector .current-branch-toggle:hover,
.current-branch-selector .current-branch-toggle:focus,
.current-branch-selector .current-branch-toggle.show {
    background: var(--bs-tertiary-bg);
    box-shadow: none;
    outline: 0;
}

.current-branch-selector .current-branch-icon {
    align-items: center;
    color: #011e41;
    display: inline-flex;
    font-size: 17px;
}

.current-branch-selector .current-branch-name {
    font-size: 13px;
    max-width: 160px;
    min-width: 96px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-branch-selector .current-branch-toggle::after {
    display: none;
}

.current-branch-selector .current-branch-chevron {
    font-size: 14px;
    margin-left: 6px;
    transition: transform .15s ease;
}

.current-branch-selector .current-branch-toggle.show .current-branch-chevron {
    transform: rotate(180deg);
}

.current-branch-selector .current-branch-menu {
    min-width: 220px;
    padding: 6px;
}

.current-branch-selector .current-branch-menu form {
    margin: 0;
}

.current-branch-selector .current-branch-option {
    align-items: center;
    border-radius: 4px;
    display: flex;
    font-size: 13px;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 10px;
}

.current-branch-selector .current-branch-option.active,
.current-branch-selector .current-branch-option:active {
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
}

.dataTable,
.dataTable th,
.dataTable td,
.dt-container {
    /* color: #000000; */
}

.dataTable tfoot.data-table-column-filters th {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    border-top: 1px solid var(--bs-border-color);
    padding: .55rem .65rem;
}

.dataTable .data-table-column-filter {
    min-width: 110px;
}

.dataTable tfoot th.action-column {
    text-align: center;
}

.data-table-filter-toggle,
.data-table-reload {
    align-items: center;
    display: inline-flex;
    height: 27px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.data-table-filter-toggle i,
.data-table-reload i {
    font-size: 17px;
    line-height: 1;
}

.data-table-filter-toggle.is-expanded {
    background: #0c1b37;
    border-color: #0c1b37;
    color: #ffffff;
}



#users-table thead th.action-column {
    text-align: center;
}

#users-table tbody tr {
    border-bottom: 1px dashed #e8eef8;
}

#users-table tbody tr:last-child {
    border-bottom: 0;
}

.table-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 128px;
}

.table-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a9b7d8;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

.table-action-link:hover,
.table-action-link:focus {
    color: #6f6af8;
    transform: translateY(-1px);
}

.table-action-link:focus-visible {
    outline: 2px solid rgba(111, 106, 248, .25);
    outline-offset: 3px;
    border-radius: 50%;
}

.user-detail-avatar {
    align-items: center;
    background: #f3f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: #0c1b37;
    display: flex;
    font-size: 36px;
    font-weight: 700;
    height: 96px;
    justify-content: center;
    width: 96px;
}

.user-detail-row {
    align-items: center;
    border-bottom: 1px dashed #e8eef8;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .85rem 0;
}

.user-detail-row:first-child {
    padding-top: 0;
}

.user-detail-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.user-detail-row span {
    color: #64748b;
}

.user-detail-row strong {
    /* color: #000000; */
    font-weight: 500;
    text-align: right;
}
/* Keep the sidebar and top bar junction clean and visually continuous. */
.startbar {
    border-inline-end: 1px solid var(--bs-border-color);
}

.startbar .brand {
    background-color: var(--bs-topbar-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.topbar {
    border-bottom-color: var(--bs-border-color);
}

.startbar .brand .logo-lg {
    height: 43px;
}

.startbar .brand .logo {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Sidebar active state: match the system navy action color. */
.startbar {
    --bs-menu-icon-color: #475569;
    --bs-menu-link-color: #334155;
    --bs-menu-link-hover-color: #0f172a;
    --bs-nav-link-disc-color: #94a3b8;
    --sidebar-active-accent: #011e41;
    --sidebar-active-bg: rgba(1, 30, 65, .08);
    --sidebar-active-text: #011e41;
}

.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active,
.startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active i,
.startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active i,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-expanded="true"],
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] i,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] span,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    color: var(--sidebar-active-text);
}

.startbar .startbar-menu .navbar-nav > .nav-item > .nav-link.active,
.startbar .startbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] {
    background-color: var(--sidebar-active-bg);
}

.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active::before,
.startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active::before,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::before {
    background-color: var(--sidebar-active-accent) !important;
    border-color: var(--sidebar-active-accent) !important;
}

[data-bs-theme="dark"] .startbar {
    --bs-menu-icon-color: #94a3b8;
    --bs-menu-link-color: #cbd5e1;
    --bs-menu-link-hover-color: #f8fafc;
    --bs-nav-link-disc-color: #64748b;
    --sidebar-active-accent: #93c5fd;
    --sidebar-active-bg: rgba(147, 197, 253, .14);
    --sidebar-active-text: #bfdbfe;
}

/* Product details */
.product-show-page { --product-border: #e6ebf2; --product-muted: #64748b; }
.product-show-page .card { border-color: var(--product-border); box-shadow: 0 4px 18px rgba(15, 23, 42, .04); }
.product-hero { background: linear-gradient(135deg, rgba(111, 106, 248, .09), rgba(255, 255, 255, 0) 55%); }
.product-hero-image { align-items: center; background: #fff; border: 1px solid var(--product-border); border-radius: 14px; color: #6f6af8; display: flex; font-size: 2rem; font-weight: 700; height: 84px; justify-content: center; overflow: hidden; width: 84px; }
.product-hero-image img { height: 100%; object-fit: cover; width: 100%; }
.product-status-badge { font-size: .72rem; padding: .4rem .65rem; }
.product-meta-chip { align-items: center; background: rgba(255, 255, 255, .85); border: 1px solid var(--product-border); border-radius: 999px; color: #475569; display: inline-flex; font-size: .78rem; gap: .35rem; padding: .35rem .65rem; }
.product-meta-chip i { color: #6f6af8; font-size: 1rem; }
.product-stat-card { align-items: center; background: var(--bs-card-bg, #fff); border: 1px solid var(--product-border); border-radius: var(--bs-border-radius, .375rem); display: flex; gap: .85rem; height: 100%; padding: 1rem; }
.product-stat-icon, .product-section-icon, .product-related-icon { align-items: center; border-radius: 10px; display: inline-flex; flex-shrink: 0; justify-content: center; }
.product-stat-icon { font-size: 1.35rem; height: 42px; width: 42px; }
.product-stat-card small, .product-stat-card strong { display: block; }
.product-stat-card small, .product-section-header small, .product-related-item small { color: var(--product-muted); }
.product-stat-card strong { color: var(--bs-heading-color, #1e293b); font-size: 1.15rem; margin-top: .1rem; }
.product-section-header { align-items: center; background: transparent; display: flex; gap: .75rem; padding-bottom: .85rem; padding-top: .85rem; }
.product-section-icon { background: rgba(111, 106, 248, .1); color: #6f6af8; font-size: 1.15rem; height: 36px; width: 36px; }
.product-detail-grid { display: grid; gap: 0 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-detail-item { border-bottom: 1px solid var(--product-border); display: flex; gap: 1rem; justify-content: space-between; min-width: 0; padding: .78rem 0; }
.product-detail-item span { color: var(--product-muted); flex-shrink: 0; }
.product-detail-item strong { color: var(--bs-heading-color, #1e293b); font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.product-related-item { align-items: center; border-bottom: 1px solid var(--product-border); display: flex; gap: .75rem; padding: .75rem 0; }
.product-related-item:first-child { padding-top: 0; }
.product-related-item:last-child { border-bottom: 0; padding-bottom: 0; }
.product-related-icon { background: var(--bs-light, #f1f5f9); color: #6f6af8; font-size: 1.15rem; height: 38px; width: 38px; }
.product-description { color: #475569; line-height: 1.75; white-space: pre-line; }
.product-related-table thead th { background: var(--bs-light, #f8fafc); border-bottom-width: 1px; color: var(--product-muted); font-size: .72rem; font-weight: 600; letter-spacing: .025em; padding: .75rem 1rem; text-transform: uppercase; white-space: nowrap; }
.product-related-table td { padding: .85rem 1rem; }
.product-code { background: var(--bs-light, #f1f5f9); border-radius: 5px; color: #475569; display: inline-block; font-family: var(--bs-font-monospace); font-size: .78rem; padding: .25rem .45rem; }
.product-empty-state { align-items: center; color: var(--product-muted); display: flex; flex-direction: column; gap: .5rem; justify-content: center; min-height: 110px; text-align: center; }
.product-empty-state i { font-size: 2rem; opacity: .55; }
.min-w-0 { min-width: 0; }

@media (max-width: 767.98px) {
    .product-detail-grid { grid-template-columns: 1fr; }
    .product-hero-image { height: 68px; width: 68px; }
    .product-detail-item { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .product-detail-item strong { text-align: left; }
}

[data-bs-theme="dark"] .product-hero { background: linear-gradient(135deg, rgba(111, 106, 248, .14), rgba(17, 24, 39, 0) 55%); }
[data-bs-theme="dark"] .product-meta-chip, [data-bs-theme="dark"] .product-hero-image { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .product-description, [data-bs-theme="dark"] .product-meta-chip { color: #cbd5e1; }

/* Reusable table status switch */
.status-switch-wrap {
    align-items: center;
    gap: .75rem;
    min-width: 9rem;
}

.status-switch-input {
    cursor: pointer;
    margin-left: 0;
}

.status-switch-input:checked {
    background-color: #011e41;
    border-color: #011e41;
}

.status-switch-input:disabled {
    cursor: not-allowed;
}

.status-switch-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 600;
    gap: .35rem;
    line-height: 1;
    padding: .36rem .6rem;
    white-space: nowrap;
}

.status-switch-pill::before {
    border-radius: 50%;
    content: "";
    height: .35rem;
    width: .35rem;
}

.status-switch-pill.is-current {
    background-color: #fff0e8;
    color: #f2762e;
}

.status-switch-pill.is-current::before {
    background-color: #f2762e;
}

.status-switch-pill.is-active {
    background-color: #e7f8f0;
    color: #20b974;
}

.status-switch-pill.is-active::before {
    background-color: #20b974;
}

.status-switch-pill.is-inactive {
    background-color: #f1f2f6;
    color: #8a8f9c;
}

.status-switch-pill.is-inactive::before {
    background-color: #9aa0aa;
}

/* .card {
    --bs-card-border-color: transpare;
} */