/* Bridge legacy Metronic-style admin markup inside Velzon shell */

/* Add New buttons — icon + label on one line */
.btn-add-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.4rem;
    white-space: nowrap;
}
.btn-add-new__icon {
    font-size: 1.125rem;
    line-height: 1;
    flex-shrink: 0;
}
.btn-add-new__label {
    line-height: 1.25;
}
.page-content button.btn-primary .ki-duotone.ki-plus,
.card-toolbar button.btn-primary .ki-duotone.ki-plus {
    display: inline-flex !important;
    font-size: 1.125rem !important;
    line-height: 1;
    vertical-align: middle;
}
.page-content button.btn-primary:not(.btn-add-new),
.card-toolbar button.btn-primary:not(.btn-add-new) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-direction: row;
}

.dataTables_wrapper { width: 100%; }
table.dataTable { width: 100% !important; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--vz-primary);
}

/* ——— Font Awesome / sidebar icons ——— */
.page-content i[class*="fa-"],
.page-content i[class*="fas"],
.page-content i[class*="far"],
.page-content i[class*="fab"] {
    display: inline-block;
    line-height: 1;
    font-style: normal;
}
.app-menu .vz-metronic-bridge .menu-icon i {
    display: inline-block;
    line-height: 1;
    font-style: normal;
    speak: never;
}
.app-menu .vz-metronic-bridge .menu-icon i.fas,
.app-menu .vz-metronic-bridge .menu-icon i.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.app-menu .vz-metronic-bridge .menu-icon i.far,
.app-menu .vz-metronic-bridge .menu-icon i.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}
.app-menu .vz-metronic-bridge .menu-icon i.fab,
.app-menu .vz-metronic-bridge .menu-icon i.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
.app-menu .vz-metronic-bridge .menu-icon [class^="ri-"],
.app-menu .vz-metronic-bridge .menu-icon [class*=" ri-"] {
    font-family: remixicon !important;
    font-weight: 400 !important;
}
.app-menu .vz-metronic-bridge .menu-icon [class^="bi-"],
.app-menu .vz-metronic-bridge .menu-icon [class*=" bi-"] {
    font-family: bootstrap-icons !important;
    font-weight: 400 !important;
}

/* ——— Sidebar menu ——— */
.app-menu .vz-metronic-bridge { padding: 0; }
.app-menu .vz-metronic-bridge .menu-item { list-style: none; }
.app-menu .vz-metronic-bridge .menu-section,
.app-menu .vz-metronic-bridge .menu-content .menu-section,
.app-menu .vz-metronic-bridge .menu-content .fs-8.menu-section {
    padding: 14px 1.5rem 8px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    line-height: 1.4;
}
.app-menu .vz-metronic-bridge .menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    min-height: 2.5rem;
    color: var(--vz-vertical-menu-item-color, #abb9e8);
    border-radius: 0;
    transition: all 0.15s ease;
    line-height: 1.45;
}
.app-menu .vz-metronic-bridge .menu-link:hover,
.app-menu .vz-metronic-bridge .menu-item.hover > .menu-link {
    color: var(--vz-vertical-menu-item-hover-color, #fff);
    background: rgba(255, 255, 255, 0.05);
}
.app-menu .vz-metronic-bridge .menu-link.active,
.app-menu .vz-metronic-bridge a.menu-link.active {
    color: #fff !important;
    background: rgba(var(--vz-primary-rgb), 0.28);
    box-shadow: inset 3px 0 0 var(--vz-primary, #405189);
    font-weight: 600;
}
/* Accordion parent: open/close only (arrow); not styled like active page */
.app-menu .vz-metronic-bridge .menu-item.menu-accordion > .menu-link {
    font-weight: 500;
}
.app-menu .vz-metronic-bridge .menu-item.menu-accordion.show > .menu-link {
    color: var(--vz-vertical-menu-item-color, #abb9e8);
    background: transparent;
    box-shadow: none;
    font-weight: 500;
}
.app-menu .vz-metronic-bridge .menu-item.menu-accordion.show > .menu-link:hover {
    color: var(--vz-vertical-menu-item-hover-color, #fff);
    background: rgba(255, 255, 255, 0.05);
}
.app-menu .vz-metronic-bridge .menu-item.here > .menu-link {
    color: var(--vz-vertical-menu-item-color, #abb9e8);
    background: transparent;
    box-shadow: none;
}
.app-menu .vz-metronic-bridge .menu-sub .menu-link.active {
    background: rgba(var(--vz-primary-rgb), 0.22);
    box-shadow: inset 3px 0 0 var(--vz-primary, #405189);
}
.app-menu .vz-metronic-bridge .menu-link.active .menu-title,
.app-menu .vz-metronic-bridge .menu-link.active .menu-icon i {
    color: #fff !important;
}
.app-menu .vz-metronic-bridge .menu-icon,
.app-menu .vz-metronic-bridge .menu-icon i,
.app-menu .vz-metronic-bridge .menu-icon .fs-2,
.app-menu .vz-metronic-bridge .menu-icon i.fs-2 {
    width: 1.75rem;
    min-width: 1.75rem;
    font-size: 1.125rem !important;
    opacity: 0.9;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    line-height: 1;
}
.app-menu .vz-metronic-bridge .menu-link,
.app-menu .vz-metronic-bridge .menu-link .menu-title {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.app-menu .vz-metronic-bridge .menu-title {
    line-height: 1.45;
}
.app-menu .vz-metronic-bridge .menu-link.active .menu-icon i {
    opacity: 1;
}
.app-menu .vz-metronic-bridge .menu-link.active .menu-icon i.fas,
.app-menu .vz-metronic-bridge .menu-link.active .menu-icon i.fa-solid {
    font-weight: 900 !important;
}
.app-menu .vz-metronic-bridge .menu-title { flex: 1 1 auto; min-width: 0; }
.app-menu .vz-metronic-bridge .menu-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    margin-left: auto;
    flex-shrink: 0;
}
.app-menu .vz-metronic-bridge .menu-arrow::after {
    content: "\ea6e";
    font-family: remixicon !important;
    font-size: 1.125rem;
    line-height: 1;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.65);
    transform: rotate(0deg);
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.app-menu .vz-metronic-bridge .menu-item.menu-accordion.show > .menu-link .menu-arrow::after {
    transform: rotate(90deg);
    opacity: 1;
    color: var(--vz-primary, #405189);
}
.app-menu .vz-metronic-bridge .menu-item.menu-accordion > .menu-link .menu-arrow {
    cursor: pointer;
}
.app-menu .vz-metronic-bridge .menu-sub.menu-sub-accordion {
    display: none;
    padding-left: 0.25rem;
    margin-left: 1.25rem;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.app-menu .vz-metronic-bridge .menu-item.menu-accordion.show > .menu-sub.menu-sub-accordion {
    display: block;
    border-left-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.55);
    padding-top: 0.15rem;
    padding-bottom: 0.2rem;
    margin-bottom: 0.15rem;
}
.app-menu .vz-metronic-bridge .menu-sub .menu-sub.menu-sub-accordion {
    margin-left: 0.85rem;
}
.app-menu .vz-metronic-bridge .menu-sub .menu-link {
    padding-left: 3rem;
    min-height: 2.35rem;
    font-size: 0.875rem;
}
.app-menu .vz-metronic-bridge .menu-sub .menu-link .menu-title {
    font-size: 0.875rem;
}
.app-menu .vz-metronic-bridge .menu-sub .menu-icon i {
    font-size: 1rem !important;
    min-width: 1.5rem;
    width: 1.5rem;
}
.app-menu .vz-metronic-bridge .menu-badge { margin-left: auto; flex-shrink: 0; }
.app-menu .vz-metronic-bridge .menu-badge .badge {
    font-size: 0.6875rem;
    font-weight: 700;
    vertical-align: middle;
    color: #fff !important;
    border: none;
    min-width: 1.35rem;
    padding: 0.2em 0.45em;
    line-height: 1.2;
}
.app-menu .vz-metronic-bridge .menu-badge .badge.bg-warning,
.app-menu .vz-metronic-bridge .menu-badge .badge.badge-light-warning {
    color: #fff !important;
    background-color: var(--vz-warning, #f7b84b) !important;
}
.app-menu .vz-metronic-bridge .menu-badge .badge.bg-danger {
    background-color: var(--vz-danger, #f06548) !important;
}
.app-menu .vz-metronic-bridge .menu-badge .badge.bg-info {
    background-color: var(--vz-info, #299cdb) !important;
}
.app-menu .vz-metronic-bridge .menu-icon [class^="ri-"],
.app-menu .vz-metronic-bridge .menu-icon [class*=" ri-"],
#lmsMyCoursesWrap .menu-icon [class^="ri-"],
#lmsMyCoursesWrap .menu-icon [class*=" ri-"] {
    font-family: remixicon !important;
    font-size: 1.125rem !important;
    line-height: 1;
    font-style: normal;
}
#lmsMyCoursesWrap .menu-link {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    min-height: 2.5rem;
    font-size: 0.9375rem;
}
#lmsMyCoursesWrap .menu-sub .menu-link {
    font-size: 0.875rem;
    min-height: 2.35rem;
}
#lmsMyCoursesWrap .menu-sub .menu-sub .menu-link {
    font-size: 0.8125rem;
    padding-left: 3.35rem;
}

/* ——— Metronic badges → visible (BS5 / Velzon) ——— */
.page-content .badge,
.modal .badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    vertical-align: baseline;
}
.badge.badge-primary,
.badge-primary.badge {
    color: #fff !important;
    background-color: var(--vz-primary) !important;
}
.badge.badge-secondary,
.badge-secondary.badge {
    color: #fff !important;
    background-color: var(--vz-secondary) !important;
}
.badge.badge-success, .badge.badge-light-success,
.badge-light-success {
    background-color: rgba(var(--vz-success-rgb), 0.15) !important;
    color: var(--vz-success) !important;
}
.badge.badge-danger, .badge.badge-light-danger,
.badge-light-danger {
    background-color: rgba(var(--vz-danger-rgb), 0.15) !important;
    color: var(--vz-danger) !important;
}
.badge.badge-warning, .badge.badge-light-warning,
.badge-light-warning {
    background-color: rgba(var(--vz-warning-rgb), 0.15) !important;
    color: var(--vz-warning) !important;
}
.badge.badge-info, .badge.badge-light-info,
.badge-light-info {
    background-color: rgba(var(--vz-info-rgb), 0.15) !important;
    color: var(--vz-info) !important;
}
.badge-light-primary {
    background-color: rgba(var(--vz-primary-rgb), 0.15) !important;
    color: var(--vz-primary) !important;
}
.badge-light, .badge.badge-light {
    background-color: var(--vz-light) !important;
    color: var(--vz-body-color) !important;
}
.badge.bg-warning { color: #000 !important; background-color: var(--vz-warning) !important; }
.badge.bg-danger { color: #fff !important; background-color: var(--vz-danger) !important; }
.badge.bg-info { color: #fff !important; background-color: var(--vz-info) !important; }
.badge.bg-success { color: #fff !important; background-color: var(--vz-success) !important; }
.badge.bg-primary { color: #fff !important; background-color: var(--vz-primary) !important; }
.badge.bg-secondary { color: #fff !important; background-color: var(--vz-secondary) !important; }

.badge-circle {
    border-radius: 50rem !important;
    min-width: 1.6rem;
    min-height: 1.6rem;
    padding: 0.25em 0.45em !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ——— Metronic soft buttons ——— */
.btn-light-primary { color: var(--vz-primary); background: rgba(var(--vz-primary-rgb), 0.1); border-color: transparent; }
.btn-light-success { color: var(--vz-success); background: rgba(var(--vz-success-rgb), 0.1); border-color: transparent; }
.btn-light-danger { color: var(--vz-danger); background: rgba(var(--vz-danger-rgb), 0.1); border-color: transparent; }
.btn-light-info { color: var(--vz-info); background: rgba(var(--vz-info-rgb), 0.1); border-color: transparent; }
.btn-light-warning { color: var(--vz-warning); background: rgba(var(--vz-warning-rgb), 0.1); border-color: transparent; }

/* ——— Modal close (Metronic ki-duotone / div → BS5 close) ——— */
.modal-header .btn[data-bs-dismiss="modal"],
.modal-header div[data-bs-dismiss="modal"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    padding: 0;
    cursor: pointer;
    opacity: 0.65;
    border-radius: 0.375rem;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}
.modal-header .btn[data-bs-dismiss="modal"]:hover,
.modal-header div[data-bs-dismiss="modal"]:hover {
    opacity: 1;
    background: var(--vz-light);
}
.modal-header [data-bs-dismiss="modal"] .ki-duotone,
.modal-header [data-bs-dismiss="modal"] .ki-outline,
.modal-header [data-bs-dismiss="modal"] .ki-solid {
    display: none !important;
}
.modal-header button[data-bs-dismiss="modal"]:not(.btn-close)::before,
.modal-header div[data-bs-dismiss="modal"]::before {
    content: "\00d7";
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 300;
    color: var(--vz-body-color);
}
.modal-header .btn-close {
    opacity: 0.65;
}

/* ——— Toastr: bottom-right, success / warning / danger colors, 3s default ——— */
#toast-container {
    z-index: 100000 !important;
    pointer-events: none;
}
#toast-container.toast-bottom-right {
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    left: auto !important;
    top: auto !important;
}
#toast-container > div {
    pointer-events: auto;
    position: relative;
    min-width: 280px;
    max-width: min(420px, calc(100vw - 2rem));
    padding: 0.85rem 2.5rem 0.85rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    opacity: 1 !important;
    color: #fff !important;
    background-image: none !important;
    border: none;
}
#toast-container > div.admin-toast {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
#toast-container .toast-title,
#toast-container .toast-message,
#toast-container .toast-message a {
    color: #fff !important;
}
#toast-container .toast-title:empty {
    display: none !important;
}
#toast-container .toast-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
}
#toast-container .toast-title:empty + .toast-message,
#toast-container > div:not(:has(.toast-title:not(:empty))) .toast-message {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
}
#toast-container .toast-message {
    font-size: 0.875rem;
}
#toast-container .toast-close-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #fff !important;
    opacity: 0.9;
    text-shadow: none;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1;
}
#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    opacity: 1;
    color: #fff !important;
}
#toast-container .toast-progress {
    background-color: rgba(255, 255, 255, 0.4) !important;
    opacity: 1;
    height: 3px;
}
#toast-container > .toast-success {
    background: linear-gradient(135deg, #22c997 0%, #0a9b7a 55%, #087f62 100%) !important;
    box-shadow: 0 0.5rem 1.15rem rgba(10, 155, 122, 0.35) !important;
}
#toast-container > .toast-success .toast-progress {
    background-color: rgba(255, 255, 255, 0.55) !important;
}
#toast-container > .toast-error,
#toast-container > .toast-danger {
    background-color: var(--vz-danger, #f06548) !important;
}
#toast-container > .toast-warning {
    background-color: var(--vz-warning, #f7b84b) !important;
    color: #212529 !important;
}
#toast-container > .toast-warning .toast-title,
#toast-container > .toast-warning .toast-message,
#toast-container > .toast-warning .toast-close-button {
    color: #212529 !important;
}
#toast-container > .toast-info {
    background-color: var(--vz-info, #299cdb) !important;
}
.toast-top-right,
.toast-top-left,
.toast-top-center {
    top: auto !important;
    bottom: 1.25rem !important;
}
.toast-top-right {
    right: 1.25rem !important;
    left: auto !important;
}
[data-bs-theme="dark"] #toast-container > div {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45);
}

/* SweetAlert2 — solid dialog (not transparent), above modals & toastr */
.swal2-container {
    z-index: 100050 !important;
}
.swal2-container.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.55) !important;
}
.swal2-container .swal2-popup {
    background-color: var(--bs-body-bg, #fff) !important;
    background-image: none !important;
    opacity: 1 !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.18) !important;
    color: var(--bs-body-color, #212529) !important;
}
[data-bs-theme="dark"] .swal2-container .swal2-popup {
    background-color: var(--vz-secondary-bg, #2a3042) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.55) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
.swal2-container .swal2-popup .swal2-title {
    color: var(--bs-heading-color, var(--vz-heading-color, inherit)) !important;
}
.swal2-container .swal2-popup .swal2-html-container {
    color: var(--bs-secondary-color, var(--vz-body-color, inherit)) !important;
}
.swal2-container .swal2-popup .swal2-close {
    color: var(--bs-body-color, inherit) !important;
    opacity: 0.7;
}
.swal2-container .swal2-popup .swal2-close:hover {
    opacity: 1;
    color: var(--bs-danger, #f06548) !important;
}
.swal2-velzon {
    border-radius: 0.5rem;
    padding: 0.5rem 0.25rem 1rem;
}
.swal2-velzon .swal2-actions {
    margin-top: 1.25rem;
}

/* Cards / tables */
.card { border-radius: var(--vz-border-radius, 0.3rem); }
.card .card-header { border-bottom: 1px solid var(--vz-border-color); }

/* ——— Card & grid spacing (tighter than Metronic g-5/g-6 defaults) ——— */
.page-content,
.page-content .cms-page-container {
    --admin-row-gap: 1rem;
    --admin-row-gap-sm: 0.75rem;
    --admin-section-gap: 1.25rem;
}
.page-content .row.g-6,
.page-content .row.g-md-6,
.page-content .row.g-xl-6,
.cms-page-container .row.g-6,
#post-container.row,
#category-container.row,
#news-container.row,
#configuration-container.row,
#rolesGrid.row,
#homepageSliderGrid.row {
    --bs-gutter-x: var(--admin-row-gap);
    --bs-gutter-y: var(--admin-row-gap);
}
.page-content .row.g-5,
.page-content .row.g-md-5,
.page-content .row.g-xl-5,
.page-content .row.g-xl-8,
.page-content .row.g-6.g-xl-8 {
    --bs-gutter-x: var(--admin-row-gap);
    --bs-gutter-y: var(--admin-row-gap);
}
.page-content .row.g-4,
.page-content .row.g-md-4,
.page-content .row.g-xl-4 {
    --bs-gutter-x: var(--admin-row-gap-sm);
    --bs-gutter-y: var(--admin-row-gap-sm);
}
.page-content .row.g-3,
.page-content .row.g-md-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}
.page-content .card {
    margin-bottom: var(--admin-row-gap);
}
.page-content .card:last-child,
.page-content .card.mb-0 {
    margin-bottom: 0;
}
.page-content .card + .card {
    margin-top: 0;
}
.page-content .mb-8 { margin-bottom: var(--admin-section-gap) !important; }
.page-content .mb-7 { margin-bottom: var(--admin-row-gap) !important; }
.page-content .mb-6 { margin-bottom: var(--admin-row-gap-sm) !important; }
.page-content .mb-xl-8,
.page-content .mb-lg-8 { margin-bottom: var(--admin-section-gap) !important; }
.page-content .mb-xl-6,
.page-content .mb-lg-6 { margin-bottom: var(--admin-row-gap) !important; }
.page-content .card-header.pt-6 {
    padding-top: 1rem !important;
}
.page-content .card-body.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.page-content .card > .card-body > .row.g-4,
.page-content .card > .card-body > .row.g-5 {
    --bs-gutter-x: var(--admin-row-gap-sm);
    --bs-gutter-y: var(--admin-row-gap-sm);
}

/* Dashboard & admin cards — dark mode */
[data-bs-theme="dark"] .page-content .card:not(.lms-dash-hero):not(.lms-teacher-partner),
[data-bs-theme="dark"] .lms-dash-page .card.card-flush,
[data-bs-theme="dark"] .ga-analytics-page .card {
    background-color: var(--vz-card-bg, #2a3042) !important;
    color: var(--vz-body-color);
    border-color: var(--vz-border-color) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}
[data-bs-theme="dark"] .lms-dash-page .lms-company-strip {
    background: var(--vz-card-bg) !important;
    border-color: var(--vz-border-color) !important;
}
[data-bs-theme="dark"] .lms-teacher-partner__steps {
    background: var(--vz-card-bg) !important;
    color: var(--vz-body-color);
}
[data-bs-theme="dark"] .page-content .text-gray-900,
[data-bs-theme="dark"] .page-content .text-gray-800,
[data-bs-theme="dark"] .lms-dash-page .text-gray-900,
[data-bs-theme="dark"] .lms-dash-page .text-gray-800,
[data-bs-theme="dark"] .ga-analytics-page .text-gray-900,
[data-bs-theme="dark"] .ga-analytics-page .text-gray-800 {
    color: var(--vz-body-color) !important;
}
[data-bs-theme="dark"] .page-content .text-gray-600,
[data-bs-theme="dark"] .page-content .text-gray-700,
[data-bs-theme="dark"] .page-content .text-muted,
[data-bs-theme="dark"] .ga-analytics-page .text-muted {
    color: var(--vz-secondary-color) !important;
}
[data-bs-theme="dark"] #lmsDashboardAnalytics .card {
    background-color: var(--vz-card-bg) !important;
}
[data-bs-theme="dark"] .table thead.bg-light,
[data-bs-theme="dark"] .symbol-label.bg-light-primary,
[data-bs-theme="dark"] .symbol-label.bg-light-info,
[data-bs-theme="dark"] .symbol-label.bg-light-success,
[data-bs-theme="dark"] .symbol-label.bg-light-warning {
    background-color: rgba(var(--vz-primary-rgb), 0.12) !important;
}

/* Velzon / WebSockets image upload */
.profile-user .profile-photo-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
}
.profile-user .profile-img-file-input {
    display: none;
}
.profile-user .profile-photo-edit .avatar-title {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
[data-bs-theme="light"] .velzon-image-upload-field .user-profile-image {
    background-color: var(--bs-body-bg, #fff);
}
[data-bs-theme="dark"] .velzon-image-upload-field .user-profile-image {
    background-color: var(--vz-input-bg, #262b3c);
}
.velzon-image-upload-field .form-text {
    color: var(--bs-secondary-color);
}
[data-bs-theme="light"] .velzon-image-upload-field:not(.velzon-image-upload--profile) .user-profile-image {
    border-color: var(--bs-border-color, #dee2e6);
}
[data-bs-theme="dark"] .velzon-image-upload-field:not(.velzon-image-upload--profile) .user-profile-image {
    border-color: rgba(255, 255, 255, 0.12);
}
.velzon-upload-camera-badge:not(.velzon-upload-camera-badge--profile) {
    background-color: var(--bs-body-bg, #fff) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .velzon-upload-camera-badge:not(.velzon-upload-camera-badge--profile) {
    background-color: var(--vz-input-bg, #2a3042) !important;
    color: var(--vz-body-color, #ced4da) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.velzon-upload-camera-badge--profile {
    background-color: var(--vz-primary, var(--bs-primary)) !important;
    color: #fff !important;
    border: none !important;
}
.velzon-image-upload--profile .user-profile-image.rounded-circle {
    border: 4px solid var(--vz-primary, var(--bs-primary)) !important;
    box-shadow: 0 0.125rem 0.35rem rgba(var(--vz-primary-rgb, 13, 110, 253), 0.25);
}
.velzon-image-upload--profile .profile-photo-edit .avatar-title {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.velzon-image-upload--profile .profile-photo-edit {
    bottom: 2px;
    right: 2px;
}
.velzon-image-upload-field:not(.velzon-image-upload--profile) .user-profile-image {
    border: 1px dashed var(--bs-border-color, #dee2e6);
}

/* Submit buttons: loading indicator scoped to the button only (Metronic-style) */
.page-content button.btn > .indicator-progress,
.page-content .btn[type="submit"] > .indicator-progress,
.page-content .btn[type="button"] > .indicator-progress,
.modal button.btn > .indicator-progress,
.modal .btn[type="submit"] > .indicator-progress,
.modal .btn[type="button"] > .indicator-progress {
    display: none !important;
}
.page-content button.btn[data-kt-indicator="on"] > .indicator-progress,
.page-content .btn[type="submit"][data-kt-indicator="on"] > .indicator-progress,
.page-content .btn[type="button"][data-kt-indicator="on"] > .indicator-progress,
.modal button.btn[data-kt-indicator="on"] > .indicator-progress,
.modal .btn[type="submit"][data-kt-indicator="on"] > .indicator-progress,
.modal .btn[type="button"][data-kt-indicator="on"] > .indicator-progress {
    display: inline-block !important;
}
.page-content button.btn[data-kt-indicator="on"] > .indicator-label,
.page-content .btn[type="submit"][data-kt-indicator="on"] > .indicator-label,
.page-content .btn[type="button"][data-kt-indicator="on"] > .indicator-label,
.modal button.btn[data-kt-indicator="on"] > .indicator-label,
.modal .btn[type="submit"][data-kt-indicator="on"] > .indicator-label,
.modal .btn[type="button"][data-kt-indicator="on"] > .indicator-label {
    display: none !important;
}
.page-content button.btn:not([data-kt-indicator="on"]) > .indicator-label,
.page-content .btn[type="submit"]:not([data-kt-indicator="on"]) > .indicator-label,
.page-content .btn[type="button"]:not([data-kt-indicator="on"]) > .indicator-label,
.modal button.btn:not([data-kt-indicator="on"]) > .indicator-label,
.modal .btn[type="submit"]:not([data-kt-indicator="on"]) > .indicator-label,
.modal .btn[type="button"]:not([data-kt-indicator="on"]) > .indicator-label {
    display: inline-block !important;
}
.page-content button .indicator-progress[wire\:loading],
.modal button .indicator-progress[wire\:loading] {
    display: inline-block !important;
}
.page-content button .indicator-label[wire\:loading\.remove],
.modal button .indicator-label[wire\:loading\.remove] {
    display: none !important;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin-bottom: .75rem;
    }
}

/* ——— Admin search inputs (icon + placeholder text alignment) ——— */
.admin-search-field {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}
.admin-search-field .admin-search-field__input,
.admin-search-field .form-control {
    width: 100%;
    padding-left: 2.35rem !important;
}
.admin-search-field__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 4;
    color: var(--vz-secondary-color, #878a99);
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-search-field__icon i {
    font-size: 0.9375rem;
    line-height: 1;
    font-style: normal;
}
.admin-search-field__icon .ki-duotone {
    font-size: 1.125rem !important;
    line-height: 1;
}
/* Legacy wrappers: absolute icon + ps-* inputs (CMS, config, LMS) */
.page-content .position-relative:not(.admin-search-field) > .position-absolute.top-50.start-0,
.page-content .position-relative:not(.admin-search-field) > span.position-absolute.top-50.start-0 {
    left: 0 !important;
    margin-left: 0.75rem !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    z-index: 4;
}
.page-content .position-relative:not(.admin-search-field) > i.position-absolute.top-50.translate-middle-y:not(.end-0) {
    left: 0 !important;
    margin-left: 0.75rem !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    z-index: 4;
}
.page-content .position-relative:not(.admin-search-field) > .position-absolute.top-50.start-0 + .form-control,
.page-content .position-relative:not(.admin-search-field) > span.position-absolute.top-50.start-0 + .form-control,
.page-content .position-relative:not(.admin-search-field) > i.position-absolute.top-50 + .form-control {
    padding-left: 2.35rem !important;
}