/* ---------------------------------
 * Tabler & Bootstrap
 * --------------------------------- */

@media screen and (min-width: 992px) {
    :host,
    :root {
        margin-inline-start: 0 !important;
    }
}

* {
    scrollbar-color: unset !important;
}

:root {
    --tblr-btn-disabled-border-color: var(--tblr-border-color);
}

.modal {
    --tblr-modal-border-color: var(--tblr-border-color);
    --tblr-modal-footer-gap: var(--tblr-spacer-1);
}

.modal-backdrop {
    background-color: color-mix(in srgb, var(--tblr-backdrop-bg) 24%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    opacity: 1;
}

:root:not(.theme-dark):not([data-bs-theme='dark']) [data-bs-theme='dark'] .hide-theme-light {
    display: block !important;
}

:root:not(.theme-dark):not([data-bs-theme='dark']) [data-bs-theme='dark'] .hide-theme-dark {
    display: none !important;
}

[data-bs-theme='dark'] [data-bs-theme='light'] .hide-theme-light {
    display: none !important;
}

[data-bs-theme='dark'] [data-bs-theme='light'] .hide-theme-dark {
    display: block !important;
}

ul.pagination {
    gap: 5px;
    flex-wrap: wrap;
}

ul.pagination .page-item.active .page-link:hover {
    background-color: var(--tblr-pagination-active-bg);
}

[data-bs-theme='dark'] .form-control:focus,
[data-bs-theme='dark'] .form-check-input:focus,
.input-group-flat:focus-within .form-control,
.input-group-flat:focus-within .input-group-text {
    border-color: var(--tblr-border-color) !important;
}

.input-group > .form-control:first-child:not(:last-child),
.input-group > .input-group-text:first-child:not(:last-child) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

.input-group *:focus-visible {
    outline: none !important;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input-group.has-invalid-feedback .input-group-text:last-of-type {
    border-start-end-radius: var(--tblr-border-radius) !important;
    border-end-end-radius: var(--tblr-border-radius) !important;
}

.input-group-flat.has-invalid-feedback,
.input-group.has-invalid-feedback {
    box-shadow: none !important;
}

.input-group-flat.has-invalid-feedback:focus-within {
    box-shadow: none !important;
}

.input-group-flat.has-invalid-feedback > * {
    border-color: var(--tblr-form-invalid-border-color);
}

.input-group-flat.has-invalid-feedback .form-control:not(:last-child) {
    border-inline-end: 1px solid var(--tblr-form-invalid-border-color);
}

.input-group-flat.has-invalid-feedback:focus-within .form-control {
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-size: 1rem;
    background-position: right 0.375rem center;
}

.form-select:focus {
    border-color: var(--tblr-border-color) !important;
}

.form-control::file-selector-button {
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-surface-secondary);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--tblr-border-color);
}

[dir='rtl'] .form-control.is-invalid,
.was-validated .form-control:invalid {
    background-position: left 0.375rem center;
}

.form-floating .form-label {
    font-weight: normal;
}

.has-invalid-feedback .invalid-feedback {
    display: block;
}

.card:not(:has(.card-footer)) .card-table tr:last-child td {
    border-bottom: none !important;
}

.card-footer {
    padding: calc(var(--tblr-card-cap-padding-y) / 1.5) calc(var(--tblr-card-cap-padding-x) / 1.5) !important;
}

.input-group-flat .input-group-text:first-child {
    padding-inline-end: 0.75rem;
}

.input-group-flat .input-group-text:last-child {
    padding-inline-start: 0.75rem;
}

nav.navbar.position-sticky {
    z-index: 1000;
}

.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    color: var(--tblr-navbar-active-color) !important;
    background-color: rgba(var(--tblr-secondary-rgb), 0.08) !important;
}

.nav.text-on-active .nav-link:not(.active) .nav-link-title {
    display: none;
}

.nav.text-on-active .nav-link.active .nav-link-title {
    display: block;
}

.nav-segmented {
    box-shadow: none !important;
    border: 1px solid var(--tblr-border-color) !important;
}

[dir='rtl'] [type='email']::placeholder,
[dir='rtl'] [type='number']::placeholder,
[dir='rtl'] [type='tel']::placeholder,
[dir='rtl'] [type='url']::placeholder {
    text-align: right;
}

a.list-group-item.active {
    text-decoration: none;
}

.toast-container {
    z-index: 2147483647;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.toast-container::-webkit-scrollbar {
    display: none;
}

.toast-container .toast {
    flex-shrink: 0;
}

.toast {
    --tblr-toast-spacing: 5px;
}

.ti {
    --tblr-icon-size: 1.25rem;

    width: var(--tblr-icon-size);
    height: var(--tblr-icon-size);
    font-size: var(--tblr-icon-size);
    vertical-align: bottom;
}

/* ---------------------------------
 * OverlayScrollbars
 * --------------------------------- */

[dir='rtl'] body > .os-scrollbar-vertical {
    right: auto;
    left: 0;
}

body[data-overlayscrollbars-initialize] {
    overflow: visible !important;
}

/*
 * Long Bootstrap modals are their own overflow container, so they show native
 * scrollbars even though OverlayScrollbars is already running on the body.
 * Take them out of that role and let the existing body instance scroll them.
 * Height must be specified (not auto) so `.modal-dialog-centered` can resolve.
 */
html[data-overlayscrollbars] body.modal-open .modal {
    position: absolute;
    overflow: visible;
    height: 100%;
    min-height: min-content;
}

html[data-overlayscrollbars] body.modal-open > .page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ---------------------------------
 * TinyMCE
 * --------------------------------- */

.tox-tinymce {
    border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
    border-radius: var(--tblr-border-radius) !important;
}

.tox .tox-edit-area {
    background-color: var(--tblr-bg-forms) !important;
}

.tox .tox-edit-area__iframe {
    background-color: var(--tblr-bg-forms) !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header,
.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on .tox-editor-header,
.tox.tox-tinymce-inline .tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary,
.tox .tox-menubar,
.tox .tox-promotion,
.tox .tox-sidebar {
    background-color: var(--tblr-bg-surface) !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom .tox-editor-header {
    border-top: 1px solid var(--tblr-border-color) !important;
    border-bottom: none !important;
}

.tox .tox-statusbar {
    background-color: var(--tblr-bg-surface) !important;
    border-top: 1px solid var(--tblr-border-color) !important;
    color: var(--tblr-secondary) !important;
}

.tox .tox-statusbar a,
.tox .tox-statusbar__path-item,
.tox .tox-statusbar__wordcount {
    color: var(--tblr-secondary) !important;
}

.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled='true']),
.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled='true']),
.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled='true']),
.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled='true']),
.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled='true']),
.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled='true']) {
    color: var(--tblr-body-color) !important;
}

.tox .tox-tbtn,
.tox .tox-tbtn__select-label,
.tox .tox-split-button,
.tox .tox-mbtn,
.tox .tox-mbtn__select-label {
    color: var(--tblr-body-color) !important;
}

.tox .tox-tbtn svg,
.tox .tox-tbtn__select-chevron svg,
.tox .tox-split-button svg,
.tox .tox-mbtn svg,
.tox .tox-statusbar__resize-handle svg {
    fill: var(--tblr-body-color) !important;
}

.tox .tox-tbtn:hover,
.tox .tox-tbtn:focus,
.tox .tox-split-button:hover,
.tox .tox-mbtn:hover:not(:disabled):not([aria-disabled='true']),
.tox .tox-mbtn:focus:not(:disabled):not([aria-disabled='true']) {
    background: rgba(var(--tblr-secondary-rgb), 0.08) !important;
    color: var(--tblr-body-color) !important;
}

.tox .tox-tbtn:hover svg,
.tox .tox-tbtn:focus svg,
.tox .tox-split-button:hover svg {
    fill: var(--tblr-body-color) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover,
.tox .tox-mbtn--active {
    background: rgba(var(--tblr-primary-rgb), 0.15) !important;
    color: var(--tblr-body-color) !important;
}

.tox .tox-tbtn--enabled svg,
.tox .tox-tbtn--enabled:hover svg {
    fill: var(--tblr-primary) !important;
}

.tox .tox-tbtn:active,
.tox .tox-split-button:expand {
    background: rgba(var(--tblr-primary-rgb), 0.2) !important;
}

.tox .tox-menu,
.tox .tox-collection--list .tox-collection__group,
.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__footer,
.tox .tox-pop__dialog {
    background-color: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

.tox .tox-collection__item,
.tox .tox-collection__item-label,
.tox .tox-dialog__title,
.tox .tox-label,
.tox .tox-listbox__select-label {
    color: var(--tblr-body-color) !important;
}

.tox .tox-collection__item-icon svg,
.tox .tox-collection__item-checkmark svg,
.tox .tox-listbox__select-chevron svg {
    fill: var(--tblr-body-color) !important;
}

.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection--list .tox-collection__item--enabled {
    background-color: rgba(var(--tblr-secondary-rgb), 0.08) !important;
}

.tox .tox-textfield,
.tox .tox-toolbar-textfield,
.tox .tox-listboxfield .tox-listbox--select,
.tox .tox-selectfield select,
.tox .tox-textarea {
    background-color: var(--tblr-bg-forms) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

.tox .tox-textfield:focus,
.tox .tox-listboxfield .tox-listbox--select:focus,
.tox .tox-selectfield select:focus,
.tox .tox-textarea:focus {
    border-color: var(--tblr-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25) !important;
}

.tox .tox-button:not(.tox-button--secondary):not(.tox-button--naked) {
    background-color: var(--tblr-primary) !important;
    border-color: var(--tblr-primary) !important;
    color: var(--tblr-primary-fg, #fff) !important;
}

.tox .tox-button--secondary {
    background-color: var(--tblr-bg-surface-secondary) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

.tox .tox-dialog__body-content a {
    color: var(--tblr-primary) !important;
}

textarea.is-invalid ~ .tox.tox-tinymce {
    border-color: var(--tblr-form-invalid-border-color) !important;
}

/* ---------------------------------
 * Tom Select
 * --------------------------------- */

[data-ts-item] + input::placeholder {
    opacity: 0;
}

.ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
}

.ts-wrapper.single .ts-control .item {
    white-space: nowrap;
}

.ts-wrapper.single.plugin-remove_button .item {
    padding-inline-start: 20px;
}

.ts-wrapper.single.plugin-remove_button .remove {
    position: absolute;
    inset-inline-start: 0;
    background: transparent;
    border: none !important;
    font-size: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ts-wrapper.single.plugin-remove_button .remove::after {
    content: '\eb55';
    font-family: 'tabler-icons';
    font-size: 12px;
}

.ts-wrapper.single.plugin-remove_button .remove:hover {
    background: transparent;
}

select.is-invalid ~ .ts-wrapper {
    border-color: var(--tblr-form-invalid-border-color) !important;
}

.ts-control:not(.rtl) {
    padding-right: 0.75rem !important;
}

.ts-control {
    border-radius: var(--tblr-border-radius) !important;
}

.ts-dropdown-content [data-selectable]:hover {
    background-color: rgba(var(--tblr-body-color-rgb), 0.04) !important;
}

.ts-wrapper.plugin-remove_button .item .remove {
    border-color: var(--tblr-border-color) !important;
}

.modal-open .ts-dropdown {
    z-index: 1060;
}

/* ---------------------------------
 * Coloris
 * --------------------------------- */

.clr-field {
    width: 100%;
}

.clr-field button {
    left: unset !important;
    right: 5px !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 3px;
}

.clr-field input {
    padding-left: 0.5625rem !important;
}

.clr-field.clr-rtl button {
    left: 8px !important;
    right: unset !important;
}

.clr-picker.clr-polaroid:before {
    border-bottom-color: var(--tblr-bg-surface) !important;
}

.clr-segmented {
    border-color: var(--tblr-border-color) !important;
}

.clr-segmented input:checked + label {
    background-color: var(--tblr-primary) !important;
    color: var(--tblr-body-bg) !important;
}

/* ---------------------------------
 * Tempus Dominus
 * --------------------------------- */

:root {
    --td-widget-background: var(--tblr-bg-surface);
    --td-font-color: var(--tblr-body-color);
    --td-active-bg: var(--tblr-primary);
    --td-range-bg: var(--tblr-primary-bg-subtle);
    --td-active-color: var(--tblr-primary-fg);
    --td-active-border-color: var(--tblr-primary-fg);
    --td-border-radius: var(--tblr-border-radius-pill);
    --td-btn-hover-bg: var(--tblr-bg-surface-secondary);
    --td-disabled-color: var(--tblr-muted);
    --td-alternate-color: var(--tblr-secondary-color);
    --td-secondary-border-color: var(--tblr-border-color);
    --td-secondary-border-color-rgba: rgba(var(--tblr-body-color-rgb), 0.2);
    --td-primary-border-color: var(--tblr-bg-surface);
    --td-text-shadow: none;
    --td-dow-color: var(--tblr-secondary);

    --td-dark-widget-background: var(--tblr-bg-surface);
    --td-dark-font-color: var(--tblr-body-color);
    --td-dark-active-bg: var(--tblr-primary);
    --td-dark-range-bg: var(--tblr-primary-bg-subtle);
    --td-dark-active-color: var(--tblr-primary-fg);
    --td-dark-active-border-color: var(--tblr-primary-fg);
    --td-dark-btn-hover-bg: var(--tblr-bg-surface-secondary);
    --td-dark-disabled-color: var(--tblr-muted);
    --td-dark-alternate-color: var(--tblr-secondary-color);
    --td-dark-secondary-border-color: var(--tblr-border-color);
    --td-dark-secondary-border-color-rgba: rgba(var(--tblr-body-color-rgb), 0.2);
    --td-dark-primary-border-color: var(--tblr-bg-surface);
    --td-dark-text-shadow: none;
    --td-dark-dow-color: var(--tblr-secondary);
}

.tempus-dominus-widget {
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow);
}

.tempus-dominus-widget .calendar-header {
    justify-content: space-between;
}

.tempus-dominus-widget .toolbar i {
    color: var(--tblr-muted);
}

.tempus-dominus-widget .calendar-header .next {
    left: unset;
    padding-inline-end: 10px;
}

.tempus-dominus-widget .calendar-header .previous {
    left: unset;
    padding-inline-start: 10px;
}

/* ---------------------------------
 * jQuery QueryBuilder
 * --------------------------------- */

.query-builder .rules-group-container {
    border-color: var(--tblr-border-color) !important;
    background-color: var(--tblr-bg-surface-secondary) !important;
    border-radius: var(--tblr-border-radius-lg) !important;
}

.query-builder .rules-group-container:first-child {
    margin: 0 !important;
}

.query-builder .rules-group-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tblr-spacer-1);
}

.query-builder .rules-group-header .group-actions {
    flex: 0 0 auto;
    order: 1;
    margin-inline-end: auto;
}

.query-builder .rules-group-header .group-conditions {
    order: 2;
    margin-inline-start: auto;
}

.query-builder .rule-container,
.query-builder .rule-placeholder {
    border-color: var(--tblr-border-color) !important;
    background-color: var(--tblr-bg-surface) !important;
}

.query-builder .rule-container {
    display: flex;
    align-items: center;
    gap: var(--tblr-spacer-1);
    border-radius: var(--tblr-border-radius) !important;
}

.query-builder .rule-container > div {
    margin: 0 !important;
}

.query-builder .rules-list > *::before,
.query-builder .rules-list > *::after {
    border-color: var(--tblr-border-color) !important;
}

.query-builder .rule-filter-container,
.query-builder .rule-operator-container {
    flex-grow: 1;
    width: 9.375rem;
    min-width: 9.375rem;
    max-width: 9.375rem;
}

.query-builder .rule-value-container:not([style='display: none;']) {
    display: flex;
    align-items: center;
    flex-grow: 10;
    gap: var(--tblr-spacer-1);
    padding: 0 !important;
    border: 0 !important;
}

.query-builder .rule-value-container > div {
    width: 100%;
}

.query-builder .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: calc(1.25rem + 0.75rem + (var(--tblr-border-width) * 2));
    padding: 0.375rem 0.75rem;
    gap: 0;
    z-index: 5;
}

.query-builder .btn > i {
    margin-inline-end: var(--tblr-spacer-1);
}

.query-builder .btn-default {
    --tblr-btn-color: var(--tblr-body-color);
    --tblr-btn-bg: var(--tblr-bg-surface);
    --tblr-btn-border-color: var(--tblr-border-color);
    --tblr-btn-hover-color: var(--tblr-body-color);
    --tblr-btn-hover-bg: var(--tblr-bg-surface-secondary);
    --tblr-btn-hover-border-color: var(--tblr-border-color);
    --tblr-btn-active-color: var(--tblr-primary-fg);
    --tblr-btn-active-bg: var(--tblr-primary);
    --tblr-btn-active-border-color: var(--tblr-primary);
}

.query-builder .has-error {
    border-color: var(--tblr-danger-border-subtle) !important;
    background-color: var(--tblr-danger-bg-subtle) !important;
}

.query-builder .error-container {
    color: var(--tblr-danger) !important;
}

.query-builder p.filter-description {
    color: var(--tblr-info-text-emphasis);
    border-color: var(--tblr-info-border-subtle);
    background: var(--tblr-info-bg-subtle);
}

.query-builder .rules-list:empty {
    margin-top: calc(var(--tblr-spacer-1) * -1) !important;
}

@media screen and (max-width: 768px) {
    .query-builder .rules-group-header {
        align-items: stretch;
    }

    .query-builder .rules-group-header .group-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        margin-inline-end: 0;
        margin-bottom: var(--tblr-spacer-1) !important;
    }

    .query-builder .rules-group-header .group-conditions {
        flex: 1 1 100%;
        justify-content: flex-end;
        margin-inline-start: 0;
    }

    .query-builder .rule-container {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .query-builder .rule-header,
    .query-builder .rule-actions,
    .query-builder .rule-actions .btn,
    .query-builder .rule-filter-container,
    .query-builder .rule-operator-container {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

/* ---------------------------------
 * Redot Datatable
 * --------------------------------- */

.datatable .tags-list {
    flex-wrap: nowrap;
}

/* ---------------------------------
 * Fancybox
 * --------------------------------- */

.fancybox-type-image .fancybox-button {
    background: transparent !important;
}

.fancybox-toolbar {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Only display the close button for non-image content types */
.fancybox-type-iframe .fancybox-button:not(.fancybox-button--close),
.fancybox-type-video .fancybox-button:not(.fancybox-button--close),
.fancybox-type-html .fancybox-button:not(.fancybox-button--close) {
    display: none !important;
}

/* Set padding for iframe, video, and HTML content slides */
.fancybox-slide--iframe,
.fancybox-slide--video,
.fancybox-slide--html {
    padding: 30px !important;
}

/* Style the close button for iframe, video, and HTML content types */
.fancybox-type-iframe .fancybox-button--close,
.fancybox-type-video .fancybox-button--close,
.fancybox-type-html .fancybox-button--close {
    border-radius: 50% !important;
    margin: 5px 5px 0 0 !important;
}

/* Add rounded corners to iframe content */
.fancybox-slide--iframe .fancybox-content {
    border-radius: 5px !important;
    background-color: var(--tblr-body-bg) !important;
}

/* Adjust padding for smaller screens */
@media screen and (max-width: 768px) {
    .fancybox-slide--iframe,
    .fancybox-slide--video {
        padding: 15px !important;
    }
}

/* Position and style thumbnails */
.fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
}

.fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
}

/* Highlight active thumbnail */
.fancybox-thumbs__list a:before {
    border: 4px solid var(--color-primary) !important;
}

/* Style the progress bar */
.fancybox-progress {
    background: var(--color-primary) !important;
}

/* Adjustments for mobile and tablet screens */
@media screen and (max-width: 992px) {
    .fancybox-slide--iframe,
    .fancybox-slide--video {
        padding: 15px !important;
    }

    .fancybox-slide--video .fancybox-content {
        position: fixed;
        top: 15px;
        left: 15px;
        transform: rotate(90deg) translateY(-100%);
        transform-origin: top left;
        width: calc(100vh - 30px) !important;
        height: calc(100vw - 30px) !important;
        max-width: initial !important;
        max-height: initial !important;
    }
}

/* Override default scrolling behavior on non-iOS platforms */
@supports not (-webkit-overflow-scrolling: touch) {
    .fancybox-slide--iframe .fancybox-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
}