.flex-spacer {
    flex: auto;
}

small {
    font-size: var(--d-font-size-small);
}

.lucide {
    width: var(--d-icon-size);
    height: var(--d-icon-size);
}

button {
    all: unset;
}

button {
    padding: var(--d-padding-small-y) calc(var(--d-padding-medium-x) * 4);
    border: 1px solid var(--p-neutral-vivid-border);
    color: var(--p-neutral-vivid-text);
    background-color: var(--p-neutral-vivid-bg);
    border-radius: var(--d-border-radius-small);
}
button.small {
    padding: var(--d-padding-small-y) calc(var(--d-padding-small-x) * 4);
}
button.large {
    padding: var(--d-padding-large-y) calc(var(--d-padding-large-x) * 4);
}
button:hover {
    color: var(--p-neutral-vivid-hover-text);
    border-color: var(--p-neutral-vivid-hover-border);
    background-color: var(--p-neutral-vivid-hover-bg);
}
button:active {
    color: var(--p-neutral-vivid-active-text);
    border-color: var(--p-neutral-vivid-active-border);
    background-color: var(--p-neutral-vivid-active-bg);
}
button:disabled {
    color: var(--p-neutral-text-disabled) !important;
    border-color: var(--p-neutral-border-disabled) !important;
    background-color: var(--p-neutral-bg-disabled) !important;
}
button.info {
    color: var(--p-info-vivid-text);
    border-color: var(--p-info-vivid-border);
    background-color: var(--p-info-vivid-bg);
}
button.info:hover {
    color: var(--p-info-vivid-hover-text);
    border-color: var(--p-info-vivid-hover-border);
    background-color: var(--p-info-vivid-hover-bg);
}
button.info:active {
    color: var(--p-info-vivid-active-text);
    border-color: var(--p-info-vivid-active-border);
    background-color: var(--p-info-vivid-active-bg);
}
button.success {
    color: var(--p-success-vivid-text);
    border-color: var(--p-success-vivid-border);
    background-color: var(--p-success-vivid-bg);
}
button.success:hover {
    color: var(--p-success-vivid-hover-text);
    border-color: var(--p-success-vivid-hover-border);
    background-color: var(--p-success-vivid-hover-bg);
}
button.success:active {
    color: var(--p-success-vivid-active-text);
    border-color: var(--p-success-vivid-active-border);
    background-color: var(--p-success-vivid-active-bg);
}
button.inflight {
    color: var(--p-inflight-vivid-text);
    border-color: var(--p-inflight-vivid-border);
    background-color: var(--p-inflight-vivid-bg);
}
button.inflight:hover {
    color: var(--p-inflight-vivid-hover-text);
    border-color: var(--p-inflight-vivid-hover-border);
    background-color: var(--p-inflight-vivid-hover-bg);
}
button.inflight:active {
    color: var(--p-inflight-vivid-active-text);
    border-color: var(--p-inflight-vivid-active-border);
    background-color: var(--p-inflight-vivid-active-bg);
}
button.alert {
    color: var(--p-alert-vivid-text);
    border-color: var(--p-alert-vivid-border);
    background-color: var(--p-alert-vivid-bg);
}
button.alert:hover {
    color: var(--p-alert-vivid-hover-text);
    border-color: var(--p-alert-vivid-hover-border);
    background-color: var(--p-alert-vivid-hover-bg);
}
button.alert:active {
    color: var(--p-alert-vivid-active-text);
    border-color: var(--p-alert-vivid-active-border);
    background-color: var(--p-alert-vivid-active-bg);
}
button.attention {
    color: var(--p-attention-vivid-text);
    border-color: var(--p-attention-vivid-border);
    background-color: var(--p-attention-vivid-bg);
}
button.attention:hover {
    color: var(--p-attention-vivid-hover-text);
    border-color: var(--p-attention-vivid-hover-border);
    background-color: var(--p-attention-vivid-hover-bg);
}
button.attention:active {
    color: var(--p-attention-vivid-active-text);
    border-color: var(--p-attention-vivid-active-border);
    background-color: var(--p-attention-vivid-active-bg);
}
button.accent {
    color: var(--p-accent-vivid-text);
    border-color: var(--p-accent-vivid-border);
    background-color: var(--p-accent-vivid-bg);
}
button.accent:hover {
    color: var(--p-accent-vivid-hover-text);
    border-color: var(--p-accent-vivid-hover-border);
    background-color: var(--p-accent-vivid-hover-bg);
}
button.accent:active {
    color: var(--p-accent-vivid-active-text);
    border-color: var(--p-accent-vivid-active-border);
    background-color: var(--p-accent-vivid-active-bg);
}
button label {
    font-size: 1em;
}
button:focus-visible {
    box-shadow: 0 0 0 2px var(--p-neutral-focus);
}

input[type='text'], input[type='number'] {
    color: var(--p-neutral-subtle-text);
    border: 1px solid var(--p-neutral-subtle-border);
    background-color: var(--p-neutral-subtle-bg);
}
input[type='text']:focus-visible, input[type='number']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--p-neutral-focus);
}
input[type='text']:disabled, input[type='number']:disabled {
    color: var(--p-neutral-text-disabled);
    background-color: var(--p-neutral-bg-disabled);
    border-color: var(--p-neutral-border-disabled);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.radio-group button {
    all: unset;
}
.radio-group-item-container {
    display: flex;
    align-items: center;
}
button.radio-group-item {
    width: 1.1em;
    height: 1.1em;
    border-radius: 100%;
    background-color: var(--p-neutral-vivid-bg);
    border: 1px solid var(--p-neutral-vivid-border);
}
.radio-group-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
}
.radio-group-indicator::after {
    display: block;
    content: " ";
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: var(--p-info-vivid-bg);
}
.radio-group-item-label {
    line-height: 1;
    padding-left: 1em;
}

.checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.checkbox-indicator {
    all: unset;
}
.checkbox-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    border-radius: 0.25em;
    border: 1px solid var(--p-neutral-vivid-border);
    background-color: var(--p-neutral-vivid-bg);
}
.checkbox-indicator:hover {
    border-color: var(--p-neutral-vivid-hover-border);
    background-color: var(--p-neutral-vivid-hover-bg);
}
.checkbox-indicator:focus {
    box-shadow: 0 0 0 2px var(--p-neutral-focus);
}
.checkbox-indicator-icon {
    display: flex;
    align-items: center;
    align-self: center;
    color: var(--p-neutral-vivid-icon);
}
.checkbox-label {
    color: var(--p-neutral-vivid-text);
    padding-left: 0.75em;
    line-height: 1;
}

.table {
    border-collapse: collapse;
}
.table.full-width {
    width: 100%;
}
.table.fixed-header thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.table th {
    text-align: left;
    text-transform: uppercase;
    font-size: var(--d-font-size-small);
    font-weight: normal;
    color: var(--p-neutral-header-text);
    background-color: var(--p-neutral-header-bg);
}
.table td {
    background-color: var(--p-neutral-bg);
}
.table td, .table th {
    padding: 0.35em var(--d-padding-medium-x);
    color: var(--p-neutral-text);
    white-space: nowrap;
    cursor: default;
}
.table td {
    font-size: var(--d-font-size);
    text-align: left;
    color: var(--p-neutral-text);
    background-color: var(--p-neutral-bg);
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-section {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--p-neutral-divider);
}
.form-section:last-child {
    border-bottom: 0;
}
.form-section > label {
    display: block;
    font-size: var(--d-font-size-large);
}
.form-field {
    margin-top: 0.5em;
}
.form-field > label {
    display: block;
    font-weight: bold;
    padding: 0.5em 0;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(1px);
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 85vh;
    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--p-neutral-text);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.modal-dialog-content:focus {
    outline: none;
}
.dialog-content .dialog-content {
    display: flex;
    flex-direction: column;
}
.dialog-content .dialog-title {
    flex: none;
    font-size: var(--d-font-size-large);
    font-weight: var(--d-font-weight-large);
    margin: 0;
    padding: var(--d-padding-large-y) var(--d-padding-large-x);
    border-bottom: 1px solid var(--p-neutral-divider);
    border-top-left-radius: var(--d-border-radius-large);
    border-top-right-radius: var(--d-border-radius-large);
    background-color: var(--p-neutral-header-bg);
}
.dialog-content .dialog-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--d-padding-large-y) var(--d-padding-large-x);
    background-color: var(--p-neutral-bg);
}
.dialog-content .dialog-actions {
    display: flex;
    flex: none;
    flex-direction: row;
    padding: var(--d-padding-medium-y) var(--d-padding-medium-x);
    border-top: 1px solid var(--p-neutral-divider);
    border-bottom-left-radius: var(--d-border-radius-large);
    border-bottom-right-radius: var(--d-border-radius-large);
    background-color: var(--p-neutral-bg);
}
.dialog-content .dialog-actions button {
    margin-left: 0.75em;
    padding: var(--d-padding-medium-y) calc(var(--d-padding-medium-x) * 4);
}
.dialog-body {
    flex: auto;
}

.popover-content {
    min-width: 10em;
    color: var(--p-neutral-text);
    background-color: var(--p-neutral-vivid-bg);
    padding: var(--d-padding-small-y) var(--d-padding-small-x);
    border: 1px solid var(--p-neutral-vivid-border);
    border-radius: var(--d-border-radius-small);
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
}
.popover-content.no-frame {
    border: none;
}
.popover-content:focus {
    outline: none;
}

.dropdown-menu-content {
    position: fixed;
    min-width: 10em;
    max-height: var(--radix-dropdown-menu-content-available-height);
    overflow-y: auto;
    color: var(--p-neutral-text);
    background-color: var(--p-neutral-vivid-bg);
    padding: var(--d-padding-small-y) var(--d-padding-small-x);
    border: 1px solid var(--p-neutral-vivid-border);
    border-radius: var(--d-border-radius-small);
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
}
.dropdown-menu-content[data-side="bottom"][data-align="end"] {
    transform: translateX(-100%);
}
.dropdown-menu-label {
    font-size: var(--d-font-size-small);
    color: var(--p-info-text);
    text-transform: uppercase;
    padding-bottom: var(--d-padding-small-y);
}
.dropdown-menu-item, .select-item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--d-font-size);
    border: 1px solid transparent;
    border-radius: var(--d-border-radius-small);
    height: 1.75em;
    padding: 0 1em 0 1.75em;
    line-height: 1;
    color: var(--p-neutral-vivid-text);
    user-select: none;
    outline: none;
    white-space: nowrap;
}
.dropdown-menu-item.dropdown-menu-item-icon-and-label {
    padding-left: 0.25em;
}
.dropdown-menu-item.dropdown-menu-item-icon-and-label .dropdown-menu-item-icon {
    width: 1em;
    padding-right: 0.5em;
}
.dropdown-menu-item.dropdown-menu-item-icon-and-label .dropdown-menu-item-label {

}
.dropdown-menu-item[data-highlighted], .select-item[data-highlighted], .dropdown-menu-item:hover {
    color: var(--p-info-vivid-text);
    border-color: var(--p-info-vivid-hover-border);
    background-color: var(--p-info-vivid-hover-bg);
}
.dropdown-menu-separator {
    height: 1px;
    background-color: var(--p-neutral-vivid-divider);
    margin: 0.25em;
}

.tooltip-content {
    font-size: var(--d-font-size);
    padding: var(--d-padding-medium-y) var(--d-padding-medium-x);
    border-radius: var(--d-border-radius-small);
    line-height: 1;
    color: var(--p-neutral-text);
    background-color: var(--p-neutral-bg);
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
    user-select: none;
}
.tooltip-content.inflight {
    color: var(--p-inflight-text);
    background-color: var(--p-inflight-bg);
    border: 1px solid var(--p-inflight-border);
}
.tooltip-content.alert {
    color: var(--p-alert-text);
    background-color: var(--p-alert-bg);
    border: 1px solid var(--p-alert-border);
}
.tooltip-arrow {
    fill: var(--p-neutral-border);
    width: 1.2em;
    height: 0.7em;
}
.tooltip-content.inflight .tooltip-arrow {
    stroke: var(--p-inflight-border);
    fill: var(--p-inflight-bg);
}
.tooltip-content.alert .tooltip-arrow {
    stroke: var(--p-alert-border);
    fill: var(--p-alert-bg);
}

.select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1em;
    font-size: var(--d-font-size);
    line-height: 1;
    height: 2em;
    gap: 0.5em;
    color: var(--p-neutral-vivid-text);
    background-color: var(--p-neutral-vivid-bg);
    border: 1px solid var(--p-neutral-vivid-border);
    border-radius: var(--d-border-radius-small);
}
.select-trigger:hover {
    color: var(--p-neutral-vivid-hover-text);
    border-color: var(--p-neutral-vivid-hover-border);
    background-color: var(--p-neutral-vivid-hover-bg);
}
.select-trigger:focus {
    box-shadow: 0 0 0 2px var(--p-neutral-focus);
}
.select-trigger[data-placeholder] {
    color: var(--p-neutral-text-muted);
}
.select-icon {
    color: var(--p-neutral-icon);
}
.select-content {
    overflow: hidden;
    border-radius: var(--d-border-radius-medium);
    border: 1px solid var(--p-neutral-vivid-border);
    background-color: var(--p-neutral-vivid-bg);
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
}
.select-viewport {
    padding: 0.5em;
}

[data-target-highlight='true']:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    box-sizing: border-box;
    background-color: var(--p-attention-vivid-bg);
    opacity: 0.4;
    z-index: 10000;
}
[data-target-highlight='true']:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    box-sizing: border-box;
    border: 2px solid var(--p-attention-vivid-bg);
    z-index: 10001;
}

body {
    font-family: AppFont, sans-serif;
    scrollbar-color: var(--p-neutral-vivid-bg) var(--p-bg);
    background-color: var(--p-bg);
    color: var(--p-text);
}

@keyframes fadeShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes contentShow {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes flash-success {
    0% {
        background-color: var(--p-success-vivid-bg);
    }
    70% {
        background-color: var(--p-success-vivid-bg);
    }
    100% {
        background-color: unset;
    }
}

@keyframes flash-attention {
    0% {
        color: var(--p-attention-vivid-text);
        background-color: var(--p-attention-vivid-bg);
    }
    70% {
        color: var(--p-attention-vivid-text);
        background-color: var(--p-attention-vivid-bg);
    }
    100% {
        color: unset;
        background-color: unset;
    }
}