/* HTMX */

.collapsible-block-icon-open,
.collapsible-block-icon-closed {
    display: none;
}

.collapsed > .collapsible-block-icon-closed {
    display: inline-block;
}

:not(.collapsed) > .collapsible-block-icon-open {
    display: inline-block;
}

.form-control.is-saving,
.form-select.is-saving {
    padding-right: calc(1.5em + .75rem);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.field-control:has(.form-control.is-saving)::after,
.field-control:has(.form-select.is-saving)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: autosave-spinner .75s linear infinite;
    opacity: .65;
    pointer-events: none;
}

.field-control:has(textarea.form-control.is-saving)::after {
    top: .75rem;
    margin-top: 0;
}

.ts-wrapper.form-select.is-saving {
    padding-right: calc(1.5em + .75rem);
}

.field-control:has(.ts-wrapper.is-saving)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: autosave-spinner .75s linear infinite;
    opacity: .65;
    pointer-events: none;
    z-index: 2;
}

@keyframes autosave-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Layout */

.ta-left-nav-layout {
    --bs-gutter-x: 2rem;
    flex-wrap: nowrap;
}

.ta-left-nav-layout__nav {
    flex: 0 0 auto;
}

.ta-left-nav-layout__content {
    min-width: 0;
    overflow-x: auto;
}

/* Tables */

.table-ordering-handle-header,
.table-ordering-handle-cell {
    width: 2.5rem;
    text-align: center;
    white-space: nowrap;
}

.table-ordering-handle {
    cursor: grab;
    line-height: 1;
}

.table-ordering-row-active .table-ordering-handle {
    cursor: grabbing;
}

.table-ordering-dragging,
.table-ordering-dragging * {
    cursor: grabbing !important;
}

.table-ordering-row-ghost {
    opacity: .45;
}

.table-ordering-row-fallback {
    background: var(--bs-body-bg);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
    display: table !important;
    table-layout: fixed;
}

.table-ordering-row-fallback > td {
    background: var(--bs-body-bg);
    display: table-cell;
    box-sizing: border-box;
}

/* Charts */

.chart-js {
    display: block;
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    contain: layout size paint;
}

.chart-js-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

/* Monitoring */

.monitoring-value {
    white-space: pre-wrap;
}

.monitoring-microchart-col {
    min-width: 0;
}

.monitoring-microchart {
    overflow: hidden;
}