@import url("./css/base.css");
@import url("./css/animations.css");
@import url("./css/mud-overrides.css");
@import url("./css/utilities.css");
@import url("./css/transition-output-editor.css");
@import url("./css/loading.css");

/* Styles to be deduplicated against split files in ./css/ */
html,
body {
    height: 100%;
}

h1:focus {
    outline: none;
}

.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* Override MudBlazor's hardcoded icon size in compact menus */
.editor-compact-menu .mud-menu-item .mud-menu-item-icon.mud-icon-size-medium {
    font-size: 0.875rem !important;
}

.mud-list-item.mud-selected,
.mud-list-item.active-menu-item,
.mud-menu-item.active-menu-item {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

.mud-list-item.mud-selected:hover,
.mud-list-item.active-menu-item:hover,
.mud-menu-item.active-menu-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) !important;
}

.mud-button-root {
    text-transform: none !important;
}

.mud-button-filled.mud-button-filled-default {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-background) 8%) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-button-filled.mud-button-filled-default:hover {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 85%, var(--mud-palette-background) 15%) !important;
}

.mud-button-filled.mud-button-filled-primary {
    color: var(--mud-palette-surface) !important;
}

.secondary-btn {
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
    background-color: transparent !important;
}

.secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.danger-btn {
    border-color: #EF233C !important;
    color: #EF233C !important;
    background-color: rgba(239, 35, 60, 0.08) !important;
}

.danger-btn:hover {
    background-color: rgba(239, 35, 60, 0.18) !important;
}

.mud-input-control>.mud-input-control-input-container>.mud-input.mud-input-outlined {
    background-color: var(--mud-palette-background) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

.mud-input-control>.mud-input-control-input-container>.mud-input.mud-input-outlined:focus-within {
    background-color: var(--mud-palette-background) !important;
}

.mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

.mud-input-control>.mud-input-control-input-container>.mud-input.mud-input-outlined {
    background-color: var(--mud-palette-background) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

.mud-input-control>.mud-input-control-input-container>.mud-input.mud-input-outlined:focus-within {
    background-color: var(--mud-palette-background) !important;
}

.mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

.mud-split-panel .divider.horizontal {
    height: 5px;
    flex-shrink: 0;
    background-color: transparent;
    transition: background-color 0.2s;
    cursor: row-resize;
}

.mud-split-panel .divider.horizontal:hover {
    background-color: var(--mud-palette-primary);
}

.bottom-splitter-collapsed.mud-split-panel>.divider {
    display: none !important;
}

.bottom-splitter-collapsed.mud-split-panel>.child-panel:last-child {
    display: none !important;
}

.bottom-splitter-collapsed.mud-split-panel>.child-panel:first-child {
    flex: 1 1 auto !important;
    max-height: unset !important;
}

.properties-expansion-panels .mud-expand-panel.mud-panel-expanded {
    margin: 0 !important;
}

.properties-expansion-panels .mud-expand-panel-header {
    background-color: var(--mud-palette-dark) !important;
    padding: 8px 16px !important;
    min-height: unset !important;
}

.properties-expansion-panels .mud-expand-panel-content {
    padding: 0 !important;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapter-clickable-wrapper {
    cursor: pointer;
}

.chapter-item-paper {
    border: 1px solid var(--mud-palette-divider);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 50%, var(--mud-palette-background)) !important;
    border-left: 3px solid var(--mud-palette-divider) !important;
    transition: border-color 0.15s ease;
    min-height: 72px;
}

.chapter-clickable-wrapper:hover .chapter-item-paper {
    border-left-color: var(--mud-palette-primary) !important;
}

.chapter-clickable-wrapper--active .chapter-item-paper {
    border-left-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.chapter-item-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chapter-clickable-wrapper:hover .chapter-item-actions {
    opacity: 1;
}

.chapter-clickable-wrapper--active .chapter-item-actions {
    opacity: 1;
}

.chapter-item-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 1.25em;
}

.chapter-item-desc-placeholder {
    min-height: 1.25em;
}

.chapter-active-chip {
    height: 18px !important;
    font-size: 0.65rem !important;
    padding: 0 6px !important;
    margin: 0 !important;
}

.epos-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
}

.epos-toggle-row .epos-toggle-label {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.epos-toggle-row .mud-switch {
    margin: 0;
    flex-shrink: 0;
    transform: scale(0.85);
    transform-origin: right center;
}

.mud-picker-inline-paper {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: var(--mud-elevation-2) !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-picker-inline-paper .mud-picker-content {
    padding: 8px !important;
}

.row-icon {
    font-size: 13px;
}