/* -----------------------------------------
   Responsive Wrapper
----------------------------------------- */
.responsive-wrap {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .responsive-wrap {
        width: 70% !important;
    }
}

/* -----------------------------------------
   Toast Styles
----------------------------------------- */
.toast.toast-white {
    background-color: #fff !important;
    color: #212529 !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: .5rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
    overflow: hidden;
    animation: toastFadeInUp .2s ease-out both;
}

    .toast.toast-white.hide,
    .toast.toast-white:not(.show) {
        animation: toastFadeOut .18s ease-in both;
    }

.toast-header .toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .5rem;
}

    .toast-header .toast-icon i {
        font-size: 1rem;
        line-height: 1;
    }

    .toast-header .toast-icon svg {
        width: 1rem;
        height: 1rem;
    }

/* Toast Icon Colors */
.icon-success {
    color: #198754;
}

.icon-danger {
    color: #dc3545;
}

.icon-warning {
    color: #ffc107;
}

.icon-info {
    color: #0dcaf0;
}

/* Toast Progress */
.toast-progress {
    position: relative;
    height: 3px;
    width: 100%;
    background: rgba(0,0,0,.06);
}

    .toast-progress .bar {
        position: absolute;
        inset: 0 auto 0 0;
        width: 100%;
        transition: width linear;
    }

.bar-success {
    background: #198754;
}

.bar-danger {
    background: #dc3545;
}

.bar-warning {
    background: #ffc107;
}

.bar-info {
    background: #0dcaf0;
}

/* Toast Animations */
@keyframes toastFadeInUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast.toast-white {
        animation: none !important;
    }
}

/* -------------------------------------------------------
   Soft Background + Border for Toast Types
   (Compatible with your existing .toast.toast-white)
-------------------------------------------------------- */

/* SUCCESS: soft green */
.toast-success {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
}

/* INFO: soft blue */
.toast-info {
    background-color: #EEF6FF !important;
    border-color: #BFDBFE !important;
}

/* WARNING: soft yellow */
.toast-warning {
    background-color: #FFF8DB !important;
    border-color: #FFE69C !important;
}

/* ERROR / DANGER: soft red */
.toast-error,
.toast-danger {
    background-color: #FEE2E2 !important;
    border-color: #FCA5A5 !important;
}

/* SUCCESS – dark green text on soft green bg */
.toast-success .toast-body,
.toast-success .toast-header strong {
    color: #065F46 !important; /* deep emerald 700 */
}

/* INFO – dark blue text on soft blue bg */
.toast-info .toast-body,
.toast-info .toast-header strong {
    color: #1E3A8A !important; /* deep blue 800 */
}

/* WARNING – dark amber/brown text on soft yellow bg */
.toast-warning .toast-body,
.toast-warning .toast-header strong {
    color: #92400E !important; /* amber 800 */
}

/* ERROR / DANGER – deep red text on soft red bg */
.toast-error .toast-body,
.toast-danger .toast-body,
.toast-error .toast-header strong,
.toast-danger .toast-header strong {
    color: #991B1B !important; /* red 800 */
}

/* SUCCESS – Header title */
.toast-success .toast-header strong {
    color: #065F46 !important; /* deep emerald 700 */
}

/* INFO – Header title */
.toast-info .toast-header strong {
    color: #1E3A8A !important; /* deep blue 800 */
}

/* WARNING – Header title */
.toast-warning .toast-header strong {
    color: #92400E !important; /* amber 800 */
}

/* ERROR / DANGER – Header title */
.toast-error .toast-header strong,
.toast-danger .toast-header strong {
    color: #991B1B !important; /* red 800 */
}

/* SUCCESS – soft green header */
.toast-success .toast-header {
    background-color: #D1FAE5 !important; /* soft green tint */
    border-bottom: 1px solid #A7F3D0 !important;
}

/* INFO – soft blue header */
.toast-info .toast-header {
    background-color: #DBEAFE !important; /* soft blue tint */
    border-bottom: 1px solid #BFDBFE !important;
}

/* WARNING – soft yellow header */
.toast-warning .toast-header {
    background-color: #FEF3C7 !important; /* soft amber tint */
    border-bottom: 1px solid #FDE68A !important;
}

/* ERROR / DANGER – soft red header */
.toast-error .toast-header,
.toast-danger .toast-header {
    background-color: #FECACA !important; /* soft red tint */
    border-bottom: 1px solid #FCA5A5 !important;
}

.toast-close-btn {
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.7;
}

    .toast-close-btn:hover {
        opacity: 1;
    }

    .toast-close-btn i,
    .toast-close-btn svg {
        width: 16px;
        height: 16px;
        stroke-width: 2.2;
        color: #475569; /* Slate 600 */
    }

/* -----------------------------------------
   Hover Label
----------------------------------------- */
.hover-label span {
    transition: color 0.2s ease-in-out;
}

.hover-label:hover span {
    color: #007bff;
}

/* Visibility Helpers */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* -----------------------------------------
   List Group Styling
----------------------------------------- */
.list-group-item {
    border: 1px solid #e0e6ed;
    padding: 10px 12px;
    background-color: transparent;
    color: #3b3f5c;
    margin-bottom: 0;
}

    .list-group-item .form-check-input:not(:checked) {
        background-color: #e0e6ed;
        border-color: #e0e6ed;
    }

    .list-group-item.active {
        color: #fff;
        background-color: #805dca;
        border-color: transparent;
        box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.15);
    }

        .list-group-item.active:hover,
        .list-group-item.active:focus {
            color: #e0e6ed;
            background-color: #805dca;
            box-shadow: 0 0 12px 1px rgba(113, 106, 202, 0.08);
        }

    .list-group-item.disabled,
    .list-group-item:disabled {
        background: rgba(80, 102, 144, 0.16);
        color: #888ea8;
    }

.new-control-indicator {
    background-color: #f1f2f3;
}

a.list-group-item.list-group-item-action.active i {
    color: #010156;
}

code {
    color: #e7515a;
}

.list-group-item-action:hover {
    color: #060818;
    background-color: #f1f2f3;
}

.list-group-item-action:focus {
    background-color: transparent;
    color: #060818;
}

/* Icon Meta List Group */
.list-group.list-group-icons-meta .list-group-item.active .media svg {
    font-size: 27px;
    color: #fff;
}

.list-group.list-group-icons-meta .list-group-item.active .media .media-body h6,
.list-group.list-group-icons-meta .list-group-item.active .media .media-body p {
    color: #fff;
    font-weight: 500;
}

.list-group.list-group-icons-meta .list-group-item .media svg {
    width: 20px;
    height: 20px;
    color: #4361ee;
}

.list-group.list-group-icons-meta .list-group-item .media .media-body h6 {
    color: #3b3f5c;
    font-weight: 700;
    margin-bottom: 0;
    font-size: 15px;
    letter-spacing: 1px;
}

.list-group.list-group-icons-meta .list-group-item .media .media-body p {
    color: #888ea8;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 600;
}

/* List Group Media */
.list-group.list-group-media .list-group-item .media img {
    width: 42px;
    height: 42px;
    color: #4361ee;
}

.list-group.list-group-media .list-group-item .media .media-body {
    align-self: center;
}

    .list-group.list-group-media .list-group-item .media .media-body h6 {
        color: #3b3f5c;
        font-weight: 700;
        margin-bottom: 0;
        font-size: 16px;
        letter-spacing: 1px;
    }

    .list-group.list-group-media .list-group-item .media .media-body p {
        color: #888ea8;
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 600;
    }

.list-group.task-list-group .list-group-item-action.active {
    background-color: #191e3a;
    color: #fff;
}

    .list-group.task-list-group .list-group-item-action.active .new-control.new-checkbox {
        color: #fff;
        font-size: 14px;
    }

/* -----------------------------------------
   Widget, Stepper, Navigation
----------------------------------------- */
.widget-content-area {
    border: 1px solid #e0e6ed;
    box-shadow: 0 0 40px 0 rgba(94,92,154,.06);
    padding: 0;
    background-color: #fff;
}

.bs-stepper .step-trigger {
    border-radius: unset !important;
}

.bs-stepper-header {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    display: inline-flex !important;
    margin-left: 13%;
    margin-bottom: 2%;
}

.bs-stepper .step-trigger:not(:disabled):not(.disabled) {
    color: #222;
    border-bottom: 3px solid #FFE100 !important;
    background-color: rgba(255, 249, 196, 0.35) !important;
    transition: all .3s ease !important;
}

.active .bs-stepper-circle {
    background-color: #FFE100 !important;
    color: #222;
}

.customers-nav-tabs .nav-item .nav-link.active {
    color: #222;
    border-bottom: 3px solid #FFE100 !important;
    background-color: rgba(255, 249, 196, 0.35) !important;
    transition: all .3s ease !important;
}



.nav-item .nav-link.active {
    color: #222;
    border-bottom: 3px solid #FFE100 !important;
    background-color: #FFE100 !important;
    transition: all .3s ease !important;
}

/* Avatar */
.avatar-image,
.avatar-text {
    border: 1px solid #75787B;
    background-color: transparent;
    background-image: linear-gradient(#fff, #f5f5fa);
    box-shadow: rgba(37, 44, 97, .15) 0 4px 11px 0, rgba(93, 100, 148, .2) 0 1px 3px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: all .2s ease-out;
    transition-behavior: normal;
    white-space-collapse: collapse;
}

    .avatar-image:after, .avatar-image:before, .avatar-tex:after, .avatar-text:before {
        border: 0 solid #003dff;
        box-sizing: border-box;
    }
    .avatar-image:hover,
    .avatar-text:hover {
        background-color: rgba(0, 0, 0, 0.05) !important; /* solid red */
        border: 1px solid #2D8C9E !important;
        transition: background 0.2s ease;
        box-shadow: rgba(37, 44, 97, .15) 0 8px 22px 0, rgba(93, 100, 148, .2) 0 4px 6px 0;
    }


/* Datatable Pagination */
.table-responsive .dataTables_paginate .active > .page-link,
.table-responsive .dataTables_paginate .page-link.active {
    background: #FFD10033 !important; /* 20% opacity */
    color: #000 !important;
    border: 1px solid #FFD10080 !important; /* 50% opacity */
}

/* SweetAlert Z-index Fix */
.swal2-container {
    z-index: 5000 !important;
}

/* Modal Width Override */
@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 50% !important;
    }
}



/* Soft Yellow Background */
.bg-soft-yellow {
    background-color: rgba(255, 249, 196, 0.35) !important;
    color: #1D2939 !important;
    border: 1px solid rgba(255, 225, 100, 0.7);
}


.bg-soft-gray {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1D2939 !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* -----------------------------------------
   Buttons
----------------------------------------- */
.btn-primary {
    color: #000 !important;
    border-color: #FFE100 !important;
    background-color: #FFE100 !important;
    cursor: pointer !important;
    transition: background 0.3s ease;
    border-radius: 4px !important;
}

    .btn-primary:hover,
    .btn.bg-soft-primary:focus,
    .btn.bg-soft-primary:hover {
        color: #000 !important;
        border-color: #fad83c !important;
        background-color: #fad83c !important;
    }

    .btn-primary:disabled {
        background-color: #E8E8E8 !important;
        color: #999 !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
        border: none !important;
        pointer-events: none !important;
    }

.btn-light-brand {
    border-radius: 4px !important;
    border: 1px solid #75787B !important;
    background-color: #fff !important;
    color: #000;

}

    .btn-light-brand:hover {
        color: #000 !important;
        background-color: #F2F2F2 !important;
    }

    .btn-light-brand:disabled {
        color: #CCC !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
        border: 1px solid #CCC !important;
        pointer-events: none !important;
    }

/* -----------------------------------------
   Navigation (Dark)
----------------------------------------- */
/* -----------------------------------------
   Dark Navigation — Active / Hover / Focus
   - Make link text & icons yellow
   - Keep link background transparent
----------------------------------------- */
html.app-navigation-dark
.nxl-navigation
.navbar-content
.nxl-item.active > .nxl-link,
html.app-navigation-dark
.nxl-navigation
.navbar-content
.nxl-item:focus > .nxl-link,
html.app-navigation-dark
.nxl-navigation
.navbar-content
.nxl-item:hover > .nxl-link {
    background-color: transparent !important;
    color: #FFE100 !important;
    fill: #FFE100 !important; /* inline SVGs */

}

/* Icon wrapper (.nxl-micon) – keep background transparent, make it yellow */
html.app-navigation-dark
.nxl-navigation
.navbar-content
.nxl-item.active > .nxl-link .nxl-micon,
html.app-navigation-dark
.nxl-navigation
.navbar-content
.nxl-item:focus > .nxl-link .nxl-micon,
html.app-navigation-dark
.nxl-navigation
.navbar-content
.nxl-item:hover > .nxl-link .nxl-micon {
    background-color: transparent !important;
    color: #FFE100 !important;
    fill: #FFE100 !important; /* inline SVGs */
}

/* Inner <i> icons inside .nxl-micon become yellow */
html.app-navigation-dark .nxl-navigation .navbar-content
.nxl-item.active > .nxl-link .nxl-micon i,
html.app-navigation-dark .nxl-navigation .navbar-content
.nxl-item:focus > .nxl-link .nxl-micon i,
html.app-navigation-dark .nxl-navigation .navbar-content
.nxl-item:hover > .nxl-link .nxl-micon i {
    color: #FFE100 !important;
}

html:not(.minimenu) .nxl-navigation .nxl-submenu {
    background: #2C2C2C !important;
}

/* Submenu active row — black background (as you specified) */
html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-item:focus,
html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-item:hover,
html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-item.active {
    background: #000000 !important;
   /* margin: unset !important;
    margin-right: 10px !important;
    border-radius: unset !important;*/
   }
html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-item:focus .nxl-link,
html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-item:hover .nxl-link,
html:not(.minimenu) .nxl-navigation .nxl-submenu .nxl-item.active .nxl-link {
    /*margin-left: 15% !important;*/
}


html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item.active {
    background: #000000 !important;
}



/* -----------------------------------------
   Navbar Dark Background Overrides
----------------------------------------- */
.navbar-content {
    background-color: #2C2C2C !important;
}

.navbar-wrapper {
    background-color: #2C2C2C !important;
}

.m-header {
    background-color: #2C2C2C !important;
}

/* -----------------------------------------
   Glass Overlay
----------------------------------------- */
.glass-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: none; /*  No blur by default */
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
    z-index: 9999;
}

    .glass-overlay.active {
        backdrop-filter: blur(0.5px);
        background: rgba(255, 255, 255, 0.18);
        opacity: 1;
    }


.custom-file.active,
.custom-file.focus,
.custom-file:active,
.custom-file:focus,
.custom-select.active,
.custom-select.focus,
.custom-select:active,
.custom-select:focus,
.form-control.active,
.form-control.focus,
.form-control:active,
.form-control:focus,
.form-select.active,
.form-select.focus,
.form-select:active,
.form-select:focus,
input.active,
input.focus,
input:active,
input:focus {
    border-color: #2D8C9E !important;
}

/* Top row spacing */
.inv-list-top-section .row {
    margin-bottom: 10px;
}

/* Search input sizing */
.dataTables_wrapper .dataTables_filter .dt-search {
    max-width: 280px;
}

/* Filters dropdown sizing/scroll */
.dt-filters .dropdown-menu {
    max-height: 70vh;
    overflow: auto;
}

/* Footer bar look */
.dataTables_wrapper .dt-footer {
    padding-top: 8px;
    border-top: 1px solid #e6e6e6;
}


/* Compact selects */
.dtf-page-len, .dtf-page-select {
    min-width: 64px;
}


.dataTables_wrapper .dataTables_length {
    display: none !important;
}
/* Allow content to wrap; avoid huge single-line cells */
table.dataTable td, table.dataTable th {
    white-space: normal;
    word-break: break-word;
}

/* Keep Actions compact and on one line */
td.dt-actions, th.dt-actions {
    white-space: nowrap;
}


.breadcrumb {
    color: #2D8C9E !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
   
    color: #2D8C9E !important;
    content: var(--bs-breadcrumb-divider, "<") !important;
}



.table-responsive {
    overflow: visible !important;
}

.dataTables_wrapper .table-responsive {
    overflow: visible !important;
}

.card {
    border-radius: 5px !important;
}

/*table css form grid command list*/

 .searchable-items.list .items {
    width: 100%;
}

     .searchable-items.list .items.items-header-section h4 {
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0;
        margin-left: 39px;
        color: #bfc9d4;
    }

     .searchable-items.list .items.items-header-section .n-chk {
        display: inline-block;
    }

     .searchable-items.list .items .item-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        place-items: flex-start;
        flex-direction: row;
        align-items: center;
        padding: 13px 18px;
        background: #0e1726;
        margin-bottom: 8px;
        border-radius: 8px;
        width: 100%;
        min-width: 767px;
        transition: all 0.35s ease;
        box-shadow: 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.2);
        border: 1px solid #1b2e4b;
    }

         .searchable-items.list .items .item-content:hover {
            background: #060818;
        }

     .searchable-items.list .items .user-profile img {
        width: 43px;
        height: 43px;
        border-radius: 8px;
        margin-right: 11px;
        margin-left: 18px;
    }

     .searchable-items.list .items .user-meta-info .user-name {
        margin-bottom: 0;
        color: #bfc9d4;
        font-weight: 600;
        font-size: 15px;
    }

     .searchable-items.list .items .user-work {
        margin-bottom: 0;
        color: #888ea8;
        font-weight: 500;
        font-size: 13px;
    }

 .searchable-items.grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

 .searchable-container .searchable-items.grid .items {
    margin-bottom: 30px;
    border-radius: 6px;
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 15px;
    padding-left: 15px;
}

     .searchable-container .searchable-items.grid .items .item-content {
        background-color: #0e1726;
        padding: 13px 18px;
        border-radius: 6px;
        border: 1px solid #0e1726;
        transition: all 0.35s ease;
    }

         .searchable-container .searchable-items.grid .items .item-content:hover {
            background: #060818;
        }

     .searchable-container .searchable-items.grid .items .user-profile {
        text-align: center;
        margin-top: 20px;
    }

         .searchable-container .searchable-items.grid .items .user-profile img {
            border-radius: 12px;
        }

     .searchable-container .searchable-items.grid .items .user-meta-info {
        margin-top: 10px;
    }

         .searchable-container .searchable-items.grid .items .user-meta-info .user-name {
            font-size: 21px;
            font-weight: 600;
            margin-bottom: 0;
            color: #009688;
        }


@media (max-width: 1199px) {
     .searchable-container .searchable-items.grid .items {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (max-width: 767px) {
     .searchable-container .searchable-items.list {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

         .searchable-container .searchable-items.list .items {
            min-width: 767px;
        }

     .searchable-container .searchable-items.grid .items {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
     .searchable-container .searchable-items.grid .items {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Base */
.table-switch {
    width: 100%;
    color: #bfc9d4;
    border-collapse: collapse;
}

    .table-switch thead th,
    .table-switch tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid #1b2e4b;
    }

    .table-switch thead th {
        text-align: left;
        font-weight: 600;
        color: #bfc9d4;
        background: #0e1726;
    }

    .table-switch tbody tr {
        background: #0e1726;
        transition: background 0.35s ease, box-shadow 0.2s ease;
    }

        .table-switch tbody tr:hover {
            background: #060818;
        }

    .table-switch .avatar {
        width: 43px;
        height: 43px;
        border-radius: 8px;
    }

    .table-switch .user-name {
        font-weight: 600;
        color: #bfc9d4;
    }

    .table-switch .user-work {
        font-weight: 500;
        color: #888ea8;
        font-size: 13px;
    }

    .table-switch .action {
        cursor: pointer;
        background: transparent;
        border: 0;
        color: #bfc9d4;
        font-size: 16px;
        margin-inline: 4px;
    }

        .table-switch .action.edit:hover {
            color: #00ab55;
        }

        .table-switch .action.delete:hover {
            color: #ff4d4f; /* was $danger */
        }

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

/* ---------------------------
   LIST VIEW (default table)
----------------------------*/
.table-switch.list {
    display: table;
}

    .table-switch.list thead {
        display: table-header-group;
    }

    .table-switch.list tbody {
        display: table-row-group;
    }

    .table-switch.list tr {
        display: table-row;
    }

    .table-switch.list th,
    .table-switch.list td {
        display: table-cell;
    }

    .table-switch.list tbody tr {
        box-shadow: none;
        border-radius: 0;
    }

/* ---------------------------
   GRID VIEW (table as cards)
----------------------------*/
.table-switch.grid {
    width: 100%;
    border-collapse: separate; /* We'll card the rows */
    border-spacing: 0;
}

    /* Hide header in grid mode; we’ll show labels per cell */
    .table-switch.grid thead {
        display: none;
    }

    /* Make tbody a responsive grid */
    .table-switch.grid tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
        padding: 6px;
    }

        /* Each TR becomes a card */
        .table-switch.grid tbody tr {
            display: block;
            background: #0e1726;
            border: 1px solid #1b2e4b;
            border-radius: 8px;
            padding: 12px 14px;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2);
        }

        /* Each TD stacks as its own row inside the card */
        .table-switch.grid tbody td {
            display: block;
            border: 0;
            padding: 8px 0;
        }

            /* Label before the value using data-label */
            .table-switch.grid tbody td::before {
                content: attr(data-label);
                display: block;
                font-size: 12px;
                font-weight: 600;
                color: #888ea8;
                margin-bottom: 2px;
            }

            /* Adjust some fields in card */
            .table-switch.grid tbody td[data-label="Avatar"] {
                display: flex;
                align-items: center;
                gap: 12px;
                padding-top: 0;
            }

            .table-switch.grid tbody td[data-label="Actions"] {
                padding-bottom: 0;
                margin-top: 6px;
            }

        /* Hover effect for the card */
        .table-switch.grid tbody tr:hover {
            background: #060818;
        }

/* ---------------------------
   Responsive tweaks
----------------------------*/
@media (max-width: 1199px) {
    .table-switch.grid tbody {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 767px) {
    /* Optional: keep list view horizontally scrollable like a classic table */
    .table-switch.list {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

        .table-switch.list thead,
        .table-switch.list tbody,
        .table-switch.list tr,
        .table-switch.list td,
        .table-switch.list th {
            white-space: nowrap;
        }
}


/* Base */
.table-switch {
    width: 100%;
    color: #bfc9d4;
    border-collapse: collapse;
}

    .table-switch thead th,
    .table-switch tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid #1b2e4b;
    }

    .table-switch thead th {
        text-align: left;
        font-weight: 600;
        color: #bfc9d4;
        background: #0e1726;
    }

    .table-switch tbody tr {
        background: #0e1726;
        transition: background 0.35s ease, box-shadow 0.2s ease;
    }

        .table-switch tbody tr:hover {
            background: #060818;
        }

    .table-switch .avatar {
        width: 43px;
        height: 43px;
        border-radius: 8px;
    }

    .table-switch .user-name {
        font-weight: 600;
        color: #bfc9d4;
    }

    .table-switch .user-work {
        font-weight: 500;
        color: #888ea8;
        font-size: 13px;
    }

    .table-switch .action {
        cursor: pointer;
        background: transparent;
        border: 0;
        color: #bfc9d4;
        font-size: 16px;
        margin-inline: 4px;
    }

        .table-switch .action.edit:hover {
            color: #00ab55;
        }

        .table-switch .action.delete:hover {
            color: #ff4d4f; /* was $danger */
        }

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

/* ---------------------------
   LIST VIEW (default table)
----------------------------*/
.table-switch.list {
    display: table;
}

    .table-switch.list thead {
        display: table-header-group;
    }

    .table-switch.list tbody {
        display: table-row-group;
    }

    .table-switch.list tr {
        display: table-row;
    }

    .table-switch.list th,
    .table-switch.list td {
        display: table-cell;
    }

    .table-switch.list tbody tr {
        box-shadow: none;
        border-radius: 0;
    }

/* ---------------------------
   GRID VIEW (table as cards)
----------------------------*/
.table-switch.grid {
    width: 100%;
    border-collapse: separate; /* We'll card the rows */
    border-spacing: 0;
}

    /* Hide header in grid mode; we’ll show labels per cell */
    .table-switch.grid thead {
        display: none;
    }

    /* Make tbody a responsive grid */
    .table-switch.grid tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
        padding: 6px;
    }

        /* Each TR becomes a card */
        .table-switch.grid tbody tr {
            display: block;
            background: #0e1726;
            border: 1px solid #1b2e4b;
            border-radius: 8px;
            padding: 12px 14px;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2);
        }

        /* Each TD stacks as its own row inside the card */
        .table-switch.grid tbody td {
            display: block;
            border: 0;
            padding: 8px 0;
        }

            /* Label before the value using data-label */
            .table-switch.grid tbody td::before {
                content: attr(data-label);
                display: block;
                font-size: 12px;
                font-weight: 600;
                color: #888ea8;
                margin-bottom: 2px;
            }

            /* Adjust some fields in card */
            .table-switch.grid tbody td[data-label="Avatar"] {
                display: flex;
                align-items: center;
                gap: 12px;
                padding-top: 0;
            }

            .table-switch.grid tbody td[data-label="Actions"] {
                padding-bottom: 0;
                margin-top: 6px;
            }

        /* Hover effect for the card */
        .table-switch.grid tbody tr:hover {
            background: #060818;
        }

/* ---------------------------
   Responsive tweaks
----------------------------*/
@media (max-width: 1199px) {
    .table-switch.grid tbody {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 767px) {
    /* Optional: keep list view horizontally scrollable like a classic table */
    .table-switch.list {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

        .table-switch.list thead,
        .table-switch.list tbody,
        .table-switch.list tr,
        .table-switch.list td,
        .table-switch.list th {
            white-space: nowrap;
        }
}
/* Add these to wwwroot/assets/css/site.css
   Replaces inline style attributes that were violating CSP */

.logo-large {
    height: 40px;
    width: 95px;
    filter: none !important;
}

.logo-small {
    height: 30px;
    width: 65px;
    filter: none !important;
}

/* Tooltip-bound elements should not show focus outline by default */
[data-bs-tooltip="tooltip"]:focus {
    outline: none;
}