[data-layout="horizontal"] {
    @media (min-width: 1024.1px) {

        .layout-width,
        .container-fluid {
            max-width: 100% !important;
        }
    }
}

@media (max-width: 575px) {
    .tass-page-title-box {
        padding-top: 0 !important;
        padding-bottom: 0.1rem !important;;
    }
}

/* Prevent balance text from wrapping */
#tassist-user-info .btn {
    white-space: nowrap;
}

/* Chatwoot unread notification - Subtle Elevated */
body .woot-widget-holder.has-unread-view:not(.woot--hide) {
    background: var(--vz-card-bg, #fff) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.07),
        0 2px 4px -1px rgba(0, 0, 0, 0.04),
        0 20px 25px -5px rgba(0, 0, 0, 0.05) !important;
    border-left: 3px solid var(--vz-primary, #405189) !important;
    padding: 1rem !important;
    animation: chatwootSlide 0.25s ease-out !important;
}

@keyframes chatwootSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduce navbar button spacing on mobile */
@media (max-width: 767.98px) {
    .navbar-header {
        padding-left: 0.25rem !important;
    }

    .navbar-header .header-item.ms-1,
    .navbar-header .header-item.ms-2 {
        margin-left: 0.1rem !important;
    }

    .navbar-header .topbar-user {
        margin-left: 0.1rem !important;
    }

    .navbar-header .topbar-user .btn {
        padding-left: 0.25rem !important;
        padding-right: 0 !important;
    }

    /* Server load button - vertical layout on mobile */
    #global-client-load-button {
        position: relative;
        padding: 0 6px !important;
    }

    #global-client-load-button .tass-load-button-text {
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0 !important;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    #global-client-load-button .tass-load-button-icon {
        font-size: 1.4rem;
    }
}

#back-to-top {
    z-index: 1021;
    bottom: 45px;
}

.datatable-info-bottom {
    background-color: var(--vz-modal-bg, var(--vz-card-bg));
    z-index: 2;
}

/*https://datatables.net/forums/discussion/78820/custom-css-and-bs5-conflict-after-upgrading-to-dt-v2-0*/
table.dataTable thead > tr > th:hover {
    outline: none !important;
}

table.dataTable thead th {
    border-bottom: 0 !important;
}

table.dataTable tbody {
    border-top: 0 !important;
}

div.dt-scroll-body {
    border-bottom: 1px solid var(--vz-border-color) !important;
}

div.dt-scroll-foot {
    margin-top: 6px !important;
}

/* fixes sorting arrows size after migration to v2*/
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    font-size: .65em;
}

/*
 * Override used by DataTables --bs* to --vz* variables
 */
table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked {
    background-color: var(--vz-header-bg) !important; /* --vz-header-bg is #fff (white) */
}

/*
 * Override used by DataTables --bs* to --vz* variables
 */
table.dataTable.fixedHeader-floating th,
table.dataTable.fixedHeader-locked th {
    background-color: var(--vz-header-bg) !important;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec) !important;
}

/* Fix directions for date types introduced in v2*/
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left
}

table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-footer, table.dataTable td.dt-type-numeric div.dt-column-header, table.dataTable td.dt-type-numeric div.dt-column-footer, table.dataTable td.dt-type-date div.dt-column-header, table.dataTable td.dt-type-date div.dt-column-footer {
    flex-direction: row
}

/*Remove top margin for table introduced in v2*/
.dt-layout-table {
    margin-top: 0 !important;
}

.tass-table-top-controls {
    background-color: var(--vz-card-bg);
}

/*workaround for fixed topbar - z-index must be higher than DataTables fixedHeader (z-index: 3)*/
.tass-sticky-top {
    z-index: 4;
}

@media (max-width: 991.98px) {
    .tass-sticky-top {
        top: 70px;
    }
}

.tass-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tass-truncate-110 {
    width: 110px;
}

.tass-truncate-150 {
    width: 150px;
}

.tass-truncate-180 {
    width: 180px;
}

.tass-truncate-300 {
    width: 300px;
}

.swiper-pagination-bullet {
    background-color: black;
}

.tass-topbar-bring-attention {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    left: auto;
    bottom: 28px;
}

#loading-popup {
    display: none; /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(80, 85, 97, 0.7); /* Semi-transparent dark box */
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 9999; /* Ensure it shows above everything else */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Neat shadow effect */
}

.select2-selection.is-invalid {
    border-color: #f06548;
    border-width: 1px;
}

.select2-container .select2-selection__clear {
    margin-right: 35px !important;
    margin-left: 5px !important;
    height: 34px !important;
    vertical-align: middle !important;
    color: var(--vz-vertical-menu-title-color) !important;
}

.select2-results__options {
    max-height: 130px !important;
    /* Automatically cause a scrolling mechanism when select options exceed max-height */
    overflow-y: auto;
}

.select2-server-save-is-invalid {
    border-color: var(--vz-warning) !important;
    border-width: 1px;
}

table.dataTable {
    margin-top: 0 !important;
}

:root {
    --dt-row-selected: var(--vz-table-bg);
    --dt-row-selected-text: var(--vz-table-color);
}

/* Utility: Bootstrap doesn't provide min-h-0; needed for nested flex scrolls */
.min-h-0 { min-height: 0 !important; }

@media (max-width: 767px) {
    .tass-tab-icon {
        font-size: 20px !important;
    }
}

@media (min-width: 768px) {
    .tass-tab-icon {
        font-size: 16px !important;
    }
}

div.is-invalid {
    border-color: #f06548;
    border-width: 1px;
}

.ctext-content,
.tass-ctext-content {
    white-space: pre-wrap;
}

.ctext-content p,
.tass-ctext-content p {
    margin-bottom: 0;
}

.tass-service-disabled-badge {
    bottom: -8px;
}

.tass-service-disabled-badge .badge {
    font-size: 9px;
}

.tass-service-disabled-badge-modal {
    bottom: -8px;
}

.tass-avatar-badge {
    top: -4px;
    right: 0;
    transform: translateX(25%);
}

.tass-avatar-badge-profile {
    top: 8px;
    right: 12px;
    transform: translateX(25%);
}

.tass-service-disabled-greyout img {
    opacity: 0.4;
    filter: grayscale(50%);
}

.tass-readonly-as-disabled[readonly] {
    background-color: var(--vz-tertiary-bg);
    opacity: 1;
    pointer-events: none;
}

.tass-select2-readonly {
    pointer-events: none;
}

.tass-select2-readonly .select2-selection {
    background-color: var(--vz-tertiary-bg);
    opacity: 1;
}

.tass-select2-readonly .select2-selection__rendered {
    color: var(--vz-secondary-color) !important;
}

.tass-ruble {
    font-size: 1.1em;
    margin-left: 0.15em;
}

.tass-disabled-by-quota-badge-icon {
    top: -10px;
    left: -7px;
}

.tass-notification-dropdown {
    width: 400px;
}

.tass-notification-item {
    padding: 0.75rem 1rem;
    white-space: inherit;
    position: relative;
    cursor: pointer;
}

.tass-notification-item.tass-notification-unread {
    border-left: 4px solid var(--vz-primary);
}

.tass-notification-item.tass-notification-unread.tass-notification-success {
    border-left-color: var(--vz-success);
}

.tass-notification-item.tass-notification-unread.tass-notification-warning {
    border-left-color: var(--vz-warning);
}

.tass-notification-item.tass-notification-unread.tass-notification-info {
    border-left-color: var(--vz-primary);
}

.tass-notification-item.tass-notification-unread.tass-notification-error {
    border-left-color: var(--vz-danger);
}

.tass-scrollable-notification-menu {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-height: 600px) {
    .tass-scrollable-notification-menu {
        max-height: calc(100vh - 150px);
    }
}

@media (max-height: 400px) {
    .tass-scrollable-notification-menu {
        max-height: 250px;
    }
}

.topbar-badge.tass-double-digit {
    right: -17px !important;
}

.tass-notification-unread-item-badge {
    width: 7px;
    height: 7px;
    padding: 0;
}


/* React Chats Tab: Modal-specific layout adjustments.
   General chat styling is in Chat.css using .tass-chat-root class. */
#accountDetailsModal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#accountDetailsModal .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-left: 1rem;  /* match Bootstrap ps-3 */
    padding-right: 1rem; /* match Bootstrap pe-3 */
}

/* On small screens, remove horizontal padding from modal body
   only when the React chats tab pane is active, so chat layout
   can use full width without impacting other tabs. */
@media (max-width: 991.98px) {
    #accountDetailsModal .modal-body:has(#accountChatsReact.active.show) {
        padding-left: 0;
        padding-right: 0;
    }
}

/* On larger screens, use minimal horizontal padding when React chats tab is active */
@media (min-width: 992px) {
    #accountDetailsModal .modal-body:has(#accountChatsReact.active.show) {
        padding-left: 0.25rem;  /* px-1 */
        padding-right: 0.25rem; /* px-1 */
    }
}

#accountDetailsModal:has(#accountChatsReact.active.show) #account-details-modal-control-content {
    display: none;
}

/* Only hide overflow when React chats tab is active, allowing other tabs to scroll */
#accountDetailsModal:has(#accountChatsReact.active.show) .modal-body,
#accountDetailsModal:has(#accountChatsReact.active.show) #accounsDetailsModalTabContent {
    overflow: hidden;
}

#accountDetailsModal #accounsDetailsModalTabContent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Only apply fill-height layout to the React chats tab when active */
#accountDetailsModal #accountChatsReact.active.show {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden; /* contain scrolls inside chat panels */
}