@reference "tailwindcss";
@reference "../../../../../vendor/filament/filament/resources/css/index.css";

.capell-layout-builder-assets-table {
    .fi-modal-content {
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .fi-modal-footer {
        container-type: scroll-state;
        transition: box-shadow 0.3s ease;
    }

    @container scroll-state(stuck: bottom) {
        .fi-modal-footer {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }
    }
}

/* Layout builder canvas */
.layout-sort-ghost {
    opacity: 0.35;
}

.layout-sort-chosen {
    outline: 1px solid rgba(var(--primary-500), 0.7);
    outline-offset: 2px;
}

.layout-builder-breakpoint-control {
    gap: 0.25rem;
    padding: 0.25rem;
}

.layout-builder-workboard-toolbar {
    min-width: 0;
}

.layout-builder-workboard-toolbar > div {
    min-width: 0;
}

.layout-builder-primary-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.layout-builder-primary-actions .fi-btn {
    min-width: 0;
    max-width: 100%;
}

.layout-builder-primary-actions .fi-btn-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-builder-edit-mode-toggle {
    display: inline-flex;
    min-width: 0;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background-color: rgb(255, 255, 255);
    color: rgb(55, 65, 81);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(15, 23, 42, 0.1);
    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.layout-builder-edit-mode-toggle:hover,
.layout-builder-edit-mode-toggle:focus-visible {
    color: rgb(17, 24, 39);
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.layout-builder-edit-mode-toggle-active {
    background-color: var(--primary-600);
    color: rgb(255, 255, 255);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-700) 36%, transparent);
}

.layout-builder-edit-mode-toggle:active {
    transform: translateY(1px);
}

.dark .layout-builder-edit-mode-toggle {
    background-color: rgb(17, 24, 39);
    color: rgb(209, 213, 219);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .layout-builder-edit-mode-toggle:hover,
.dark .layout-builder-edit-mode-toggle:focus-visible {
    color: rgb(255, 255, 255);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.dark .layout-builder-edit-mode-toggle-active {
    background-color: var(--primary-500);
    color: rgb(255, 255, 255);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-300) 36%, transparent);
}

.layout-builder-breakpoint-button {
    display: inline-flex;
    min-width: 5.75rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    padding: 0 0.75rem;
    color: rgb(75, 85, 99);
    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.layout-builder-breakpoint-button:hover,
.layout-builder-breakpoint-button:focus-visible {
    background-color: rgb(249, 250, 251);
    color: rgb(17, 24, 39);
}

.layout-builder-breakpoint-button[aria-pressed='true'] {
    background-color: color-mix(in srgb, var(--primary-500) 12%, transparent);
    color: var(--primary-600);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.1),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 28%, transparent);
}

.dark .layout-builder-breakpoint-button {
    color: rgb(209, 213, 219);
}

.dark .layout-builder-breakpoint-button:hover,
.dark .layout-builder-breakpoint-button:focus-visible {
    background-color: rgb(31, 41, 55);
    color: rgb(255, 255, 255);
}

.dark .layout-builder-breakpoint-button[aria-pressed='true'] {
    background-color: color-mix(in srgb, var(--primary-400) 16%, transparent);
    color: rgb(255, 255, 255);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px color-mix(in srgb, var(--primary-400) 34%, transparent);
}

@media (max-width: 767.98px) {
    .layout-builder-primary-actions {
        align-items: stretch;
    }

    .layout-builder-primary-actions .fi-btn {
        flex: 1 1 10rem;
        justify-content: center;
    }

    .layout-builder-edit-mode-toggle {
        flex: 0 0 2rem;
    }

    .layout-builder-breakpoint-button {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 0 0.5rem;
    }

    .layout-builder-breakpoint-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.layout-builder-history-actions {
    min-width: 0;
}

.layout-builder-canvas-scroll {
    margin-inline: -0.25rem;
    overflow-x: auto;
    overflow-y: visible;
    padding-inline: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.layout-builder-canvas-frame {
    width: 100%;
}

.layout-builder-add-container-button.fi-btn.fi-btn-outlined {
    background-color: rgb(255, 255, 255);
    border-radius: 0.5rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.layout-builder-add-container-button.fi-btn.fi-btn-outlined:hover,
.layout-builder-add-container-button.fi-btn.fi-btn-outlined:focus-visible {
    background-color: rgb(255, 255, 255);
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.layout-builder-add-container-button.fi-btn.fi-btn-outlined:active {
    transform: translateY(1px);
}

.dark .layout-builder-add-container-button.fi-btn.fi-btn-outlined {
    background-color: rgb(17, 24, 39);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .layout-builder-add-container-button.fi-btn.fi-btn-outlined:hover,
.dark
    .layout-builder-add-container-button.fi-btn.fi-btn-outlined:focus-visible {
    background-color: rgb(17, 24, 39);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.layout-container-primary {
    min-width: min(9rem, 100%);
}

.layout-container-title-group {
    max-width: 100%;
    gap: 0.25rem;
    padding-right: 0.25rem;
}

.layout-container-title-button {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.layout-container-title {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-container-title-tool-slot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.layout-container:hover .layout-container-title-tool-slot,
.layout-container:focus-within .layout-container-title-tool-slot,
.layout-container-reordering .layout-container-title-tool-slot {
    opacity: 1;
    pointer-events: auto;
}

.layout-builder-widget-preview {
    height: 100%;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    transition:
        box-shadow 160ms ease,
        transform 160ms ease;
}

.layout-widget-frame {
    overflow: visible;
    border-radius: 0.5rem;
    background-color: rgb(255, 255, 255);
    isolation: isolate;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 8px 18px rgba(15, 23, 42, 0.08);
    transition:
        box-shadow 160ms ease,
        transform 160ms ease;
}

.layout-widget-preview-shell {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent;
}

.layout-widget-preview-shell > .layout-builder-widget-preview {
    width: 100%;
    min-height: 100%;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.layout-widget-preview-shell
    > .layout-builder-widget-preview
    > .absolute.inset-0,
.layout-widget-preview-shell > .layout-builder-widget-preview > .h-28 {
    border-radius: 0 !important;
}

.layout-widget-preview-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.layout-container-widget:hover .layout-widget-frame,
.layout-container-widget:focus-within .layout-widget-frame {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.1),
        0 12px 26px rgba(15, 23, 42, 0.12);
}

.layout-widget-preview-shell:focus-visible {
    outline: none;
}

.layout-widget-frame:has(.layout-widget-preview-shell:focus-visible) {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary-500) 55%, transparent),
        0 12px 26px rgba(15, 23, 42, 0.12);
}

.dark .layout-widget-frame {
    background-color: rgb(17, 24, 39);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 8px 18px rgba(0, 0, 0, 0.26);
}

.dark .layout-container-widget:hover .layout-widget-frame,
.dark .layout-container-widget:focus-within .layout-widget-frame {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

.dark .layout-widget-frame:has(.layout-widget-preview-shell:focus-visible) {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary-400) 44%, transparent),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

@media (max-width: 767px) {
    .layout-builder-density-actions {
        display: none;
    }
}

.layout-container-widget-selected .layout-widget-frame {
    box-shadow:
        0 0 0 2px rgba(var(--primary-500), 0.35),
        0 10px 24px rgba(15, 23, 42, 0.12);
}

.layout-container-widget-reordering .layout-widget-frame {
    cursor: grab;
}

.layout-builder-widget-actions-suppressed .layout-container-widget {
    pointer-events: none;
}

.layout-container {
    align-self: start;
    container-type: inline-size;
}

.layout-container-resizing {
    transition-duration: 0ms;
}

.layout-containers {
    container-type: inline-size;
}

.layout-container-meta {
    align-self: center;
    max-width: 100%;
}

.layout-container-mobile-width-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.78);
    padding: 0.375rem;
    margin-bottom: 0.75rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.layout-container-width-stepper-button {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: rgb(55, 65, 81);
    transition:
        background-color 160ms ease,
        color 160ms ease,
        opacity 160ms ease;
}

.layout-container-width-stepper-button:hover,
.layout-container-width-stepper-button:focus-visible {
    background-color: rgb(243, 244, 246);
    color: rgb(17, 24, 39);
}

.layout-container-width-stepper-button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.layout-container-width-stepper-value {
    min-width: 8.5rem;
    text-align: center;
    color: rgb(55, 65, 81);
    font-size: 0.75rem;
    font-weight: 600;
}

.dark .layout-container-mobile-width-control {
    background: rgba(17, 24, 39, 0.78);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dark .layout-container-width-stepper-button {
    color: rgb(209, 213, 219);
}

.dark .layout-container-width-stepper-button:hover,
.dark .layout-container-width-stepper-button:focus-visible {
    background-color: rgb(31, 41, 55);
    color: rgb(255, 255, 255);
}

.dark .layout-container-width-stepper-value {
    color: rgb(229, 231, 235);
}

@media (min-width: 768px) {
    .layout-container-mobile-width-control {
        display: none;
    }
}

.layout-container-resize-handle {
    height: 3rem;
    width: 2.25rem;
    border: 0;
    border-radius: 9999px;
    background: rgb(243, 244, 246);
    color: rgb(75, 85, 99);
    opacity: 0;
    outline: none;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    transition:
        background-color 160ms ease,
        color 160ms ease,
        opacity 160ms ease,
        box-shadow 160ms ease;
}

.layout-container-resize-value {
    top: -0.4rem;
    right: 1.625rem;
    min-width: 1.375rem;
    border-radius: 9999px;
    background: rgb(15, 23, 42);
    color: rgb(255, 255, 255);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.25rem 0.375rem;
    text-align: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.layout-container-resize-handle:hover,
.layout-container-resize-handle:focus-visible,
.layout-container-resize-handle:active,
.layout-container-resizing .layout-container-resize-handle {
    background: rgb(243, 244, 246);
    color: rgb(55, 65, 81);
    opacity: 1;
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.5),
        0 10px 22px rgba(15, 23, 42, 0.18);
}

.dark .layout-container-resize-handle {
    background: rgb(31, 41, 55);
    color: rgb(209, 213, 219);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.dark .layout-container-resize-value {
    background: rgb(249, 250, 251);
    color: rgb(17, 24, 39);
}

.dark .layout-container-resize-handle:hover,
.dark .layout-container-resize-handle:focus-visible,
.dark .layout-container-resize-handle:active,
.dark .layout-container-resizing .layout-container-resize-handle {
    background: rgb(31, 41, 55);
    color: rgb(255, 255, 255);
    box-shadow:
        0 0 0 2px rgba(96, 165, 250, 0.58),
        0 10px 22px rgba(0, 0, 0, 0.3);
}

.layout-container-handle-reveal {
    display: none;
    width: 0;
    max-width: 2.125rem;
    opacity: 0;
    overflow: hidden;
    transition:
        width 160ms ease,
        opacity 160ms ease;
}

.layout-container:hover .layout-container-handle-reveal,
.layout-container:focus-within .layout-container-handle-reveal,
.layout-container-reordering .layout-container-handle-reveal {
    width: 2.125rem;
    opacity: 1;
}

.layout-container-title-handle {
    align-items: stretch;
    padding: 0.125rem 0.25rem 0.125rem 0;
}

.layout-container-title-tools {
    min-height: 1.75rem !important;
    min-width: 1.75rem !important;
    padding: 0.3125rem !important;
    align-self: center;
    background-color: rgb(243, 244, 246) !important;
    color: rgb(75, 85, 99) !important;
}

.layout-container-title-tools:hover,
.layout-container-title-tools:focus-visible {
    background-color: rgb(229, 231, 235) !important;
    color: rgb(17, 24, 39) !important;
}

.layout-container-title-tools svg {
    height: 1rem;
    width: 1rem;
}

.layout-widget-assets-toggle.layout-widget-assets-toggle-open {
    background-color: color-mix(
        in srgb,
        var(--primary-500) 12%,
        transparent
    ) !important;
    color: var(--primary-600) !important;
}

.dark .layout-widget-assets-toggle.layout-widget-assets-toggle-open {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 16%,
        transparent
    ) !important;
    color: rgb(255, 255, 255) !important;
}

.layout-container-title-drag-handle {
    display: inline-flex;
    min-height: 1.75rem;
    width: 1.875rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    color: rgb(113, 113, 122);
    opacity: 1;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.layout-container-title-drag-handle:hover,
.layout-container-title-drag-handle:focus-visible {
    border-color: rgb(212, 212, 216);
    color: rgb(63, 63, 70);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.layout-container-title-drag-handle:active {
    border-color: rgb(161, 161, 170);
    color: rgb(39, 39, 42);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
}

.dark .layout-container-title-drag-handle {
    background: transparent;
    color: rgb(156, 163, 175);
}

.dark .layout-container-title-tools {
    background-color: rgb(31, 41, 55) !important;
    color: rgb(209, 213, 219) !important;
}

.dark .layout-container-title-tools:hover,
.dark .layout-container-title-tools:focus-visible {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(255, 255, 255) !important;
}

.dark .layout-container-title-drag-handle:hover,
.dark .layout-container-title-drag-handle:focus-visible {
    border-color: rgb(82, 82, 91);
    background: transparent;
    color: rgb(209, 213, 219);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

.dark .layout-container-title-drag-handle:active {
    border-color: rgb(113, 113, 122);
    color: rgb(244, 244, 245);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

@container (max-width: 32rem) {
    .layout-container-primary {
        flex: 1 1 10rem;
        flex-wrap: wrap;
        max-width: 100%;
        order: 1;
    }

    .layout-container-meta {
        margin-left: auto;
        order: 2;
    }

    .layout-container-controls {
        flex: 0 0 auto;
        margin-left: auto;
        order: 3;
    }
}

.layout-widget-drag-handle {
    position: relative;
    display: none;
    align-self: stretch;
    flex: 0 0 0;
    width: 0;
    max-width: 2.25rem;
    min-height: 100%;
    opacity: 0;
    overflow: hidden;
    border-radius: 0;
    background-color: transparent;
    color: rgb(113, 113, 122);
    isolation: isolate;
    box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.06);
    transition:
        background-color 160ms ease,
        flex-basis 160ms ease,
        width 160ms ease,
        opacity 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.layout-container:hover
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.layout-container:focus-within
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.layout-container-selected
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.layout-container-reordering
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active) {
    flex-basis: 2.25rem;
    width: 2.25rem;
    opacity: 1;
    color: rgb(113, 113, 122);
}

.layout-container:hover .layout-widget-drag-handle,
.layout-container:focus-within .layout-widget-drag-handle,
.layout-container-selected .layout-widget-drag-handle,
.layout-container-reordering .layout-widget-drag-handle {
    flex-basis: 2.25rem;
    width: 2.25rem;
    opacity: 1;
}

.layout-container .layout-widget-drag-handle:hover,
.layout-container .layout-widget-drag-handle:focus-visible {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 45%,
        white
    ) !important;
    color: var(--primary-700) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 24%, transparent),
        0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.layout-widget-drag-handle svg {
    transition: opacity 120ms ease;
}

.layout-widget-drag-handle:hover svg,
.layout-widget-drag-handle:focus-visible svg {
    opacity: 0.9;
}

.layout-container .layout-widget-drag-handle:active {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 68%,
        white
    ) !important;
    color: var(--primary-700) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 34%, transparent),
        inset 0 1px 2px rgba(15, 23, 42, 0.1) !important;
}

.dark .layout-widget-drag-handle {
    background-color: transparent;
    color: rgb(209, 213, 219);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.dark
    .layout-container:hover
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.dark
    .layout-container:focus-within
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.dark
    .layout-container-selected
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active),
.dark
    .layout-container-reordering
    .layout-widget-drag-handle:not(:hover):not(:focus-visible):not(:active) {
    color: rgb(156, 163, 175);
}

.dark .layout-container .layout-widget-drag-handle:hover,
.dark .layout-container .layout-widget-drag-handle:focus-visible {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 34%,
        rgb(17, 24, 39)
    ) !important;
    color: rgb(255, 255, 255) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-400) 30%, transparent),
        0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.dark .layout-container .layout-widget-drag-handle:active {
    background-color: color-mix(
        in srgb,
        var(--primary-400) 48%,
        rgb(17, 24, 39)
    ) !important;
    color: rgb(255, 255, 255) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-400) 38%, transparent),
        inset 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

.layout-containers:has(.layout-sort-chosen) .layout-container-handle-reveal,
.layout-containers:has(.layout-sort-chosen) .layout-widget-drag-handle,
.layout-containers:has(.layout-sort-drag) .layout-container-handle-reveal,
.layout-containers:has(.layout-sort-drag) .layout-widget-drag-handle,
.layout-containers:has(.layout-sort-fallback) .layout-container-handle-reveal,
.layout-containers:has(.layout-sort-fallback) .layout-widget-drag-handle {
    flex-basis: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

.layout-widget-header-actions .fi-btn {
    min-height: 2rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .layout-container-handle-reveal,
    .layout-widget-drag-handle {
        display: flex;
    }

    .layout-container:hover > section > .layout-container-resize-handle,
    .layout-container-resizing > section > .layout-container-resize-handle,
    .layout-container-selected > section > .layout-container-resize-handle,
    .layout-container-reordering > section > .layout-container-resize-handle,
    .layout-container:focus-within > section > .layout-container-resize-handle {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    .layout-widget-header-actions {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-1px);
        transition:
            opacity 140ms ease,
            transform 140ms ease;
    }

    .layout-container-widget:hover .layout-widget-header-actions,
    .layout-container-reordering .layout-widget-header-actions,
    .layout-container-widget:focus-within .layout-widget-header-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .layout-container-controls {
        opacity: 0;
    }

    .layout-container:hover .layout-container-controls,
    .layout-container-reordering .layout-container-controls,
    .layout-container:focus-within .layout-container-controls {
        opacity: 1;
    }

    .layout-container:has(.layout-container-widget:hover)
        .layout-container-controls,
    .layout-container:has(.layout-container-widget:focus-within)
        .layout-container-controls {
        opacity: 0;
    }

    .layout-container-reordering:has(.layout-container-widget:hover)
        .layout-container-controls,
    .layout-container-reordering:has(.layout-container-widget:focus-within)
        .layout-container-controls {
        opacity: 1;
    }
}

.layout-sort-drag,
.layout-sort-fallback {
    transform: rotate(0.25deg);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .capell-layout-builder *,
    .capell-layout-builder *::before,
    .capell-layout-builder *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .layout-sort-drag,
    .layout-sort-fallback {
        transform: none;
    }
}

@container (max-width: 32rem) {
    .layout-containers {
        gap: 0.5rem;
    }
}

.layout-builder-visual-editor {
    position: relative;
    min-width: 0;
    container-type: inline-size;
}

.layout-builder-visual-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgb(229, 231, 235);
    background: rgba(255, 255, 255, 0.92);
    padding: 0.625rem 0.75rem;
    backdrop-filter: blur(12px);
}

.dark .layout-builder-visual-toolbar {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(3, 7, 18, 0.88);
}

.layout-builder-visual-toolbar-start,
.layout-builder-visual-actions,
.layout-builder-breakpoint-controls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.layout-builder-breakpoint-controls {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 20;
    justify-self: end;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.86);
    padding: 0.125rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(10px);
}

.layout-builder-visual-actions {
    justify-content: flex-end;
}

.layout-builder-panel-toggle,
.layout-builder-breakpoint-button {
    display: inline-flex;
    min-width: 0;
    height: 2.125rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209, 213, 219);
    background: rgb(255, 255, 255);
    padding: 0 0.625rem;
    color: rgb(55, 65, 81);
    font-size: 0.8125rem;
    font-weight: 600;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.layout-builder-breakpoint-button {
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2rem;
    border-color: transparent;
    background: transparent;
    padding: 0;
}

.layout-builder-panel-toggle:hover,
.layout-builder-panel-toggle:focus-visible,
.layout-builder-breakpoint-button:hover,
.layout-builder-breakpoint-button:focus-visible,
.layout-builder-breakpoint-button[aria-pressed='true'] {
    border-color: rgb(156, 163, 175);
    background: rgb(249, 250, 251);
    color: rgb(17, 24, 39);
}

.dark .layout-builder-panel-toggle,
.dark .layout-builder-breakpoint-button {
    border-color: rgb(75, 85, 99);
    background: rgb(17, 24, 39);
    color: rgb(209, 213, 219);
}

.dark .layout-builder-breakpoint-controls {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(17, 24, 39, 0.82);
}

.layout-builder-action-inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-500) 12%, transparent);
    padding: 0.3125rem 0.625rem;
    color: var(--primary-700);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.dark .layout-builder-action-inline-loading {
    color: rgb(255, 255, 255);
}

.layout-builder-preview-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgb(240, 253, 244);
    padding: 0.25rem 0.625rem;
    color: rgb(22, 101, 52);
    font-size: 0.75rem;
    font-weight: 700;
}

.layout-builder-preview-status-row {
    display: flex;
    justify-content: flex-start;
    margin-inline: auto;
    margin-top: 0.625rem;
    width: 100%;
    max-width: 100%;
}

.layout-builder-preview-status-stale {
    background: rgb(255, 251, 235);
    color: rgb(146, 64, 14);
}

.layout-builder-preview-status-error {
    background: rgb(254, 242, 242);
    color: rgb(185, 28, 28);
}

.layout-builder-visual-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    min-height: min(72rem, calc(100vh - 14rem));
    background: rgb(243, 244, 246);
}

.layout-builder-visual-grid-empty {
    min-height: min(32rem, calc(100vh - 22rem));
}

.dark .layout-builder-visual-grid {
    background: rgb(3, 7, 18);
}

.layout-builder-visual-panel {
    min-width: 0;
    overflow: auto;
    border-color: rgb(229, 231, 235);
    background: rgb(255, 255, 255);
}

.layout-builder-visual-panel-tree {
    border-right-width: 1px;
}

.dark .layout-builder-visual-panel {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgb(17, 24, 39);
}

.layout-builder-visual-canvas {
    position: relative;
    min-width: 0;
    overflow: auto;
    padding: 0.75rem 1rem 1rem;
}

.fi-tabs.fi-contained {
    gap: 0;
    border-bottom: 1px solid rgb(229, 231, 235);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.fi-tabs.fi-contained .fi-tabs-item {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
}

.fi-tabs.fi-contained .fi-tabs-item.fi-active {
    border-bottom-color: var(--primary-600);
    background: transparent;
    color: var(--primary-700);
    box-shadow: none;
}

.dark .fi-tabs.fi-contained {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .fi-tabs.fi-contained .fi-tabs-item.fi-active {
    border-bottom-color: var(--primary-400);
    color: rgb(255, 255, 255);
}

.layout-builder-shadow-preview {
    min-height: 42rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: rgb(248, 250, 252);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 12px 35px rgba(15, 23, 42, 0.08);
    margin-inline: auto;
}

.layout-builder-shadow-preview-empty {
    min-height: 14rem;
}

.layout-builder-tree {
    display: flex;
    position: relative;
    min-height: 100%;
    flex-direction: column;
}

.layout-builder-tree-header {
    border-bottom: 1px solid rgb(229, 231, 235);
    padding: 1rem;
}

.dark .layout-builder-tree-header {
    border-color: rgba(255, 255, 255, 0.1);
}

.layout-builder-tree-header h2 {
    margin: 0;
    color: rgb(17, 24, 39);
    font-size: 0.9375rem;
    font-weight: 700;
}

.dark .layout-builder-tree-header h2 {
    color: rgb(255, 255, 255);
}

.layout-builder-tree-header p {
    margin-top: 0.25rem;
    color: rgb(107, 114, 128);
    font-size: 0.8125rem;
}

.layout-builder-tree-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgb(229, 231, 235);
    padding: 0.75rem 1rem;
    color: rgb(107, 114, 128);
}

.layout-builder-tree-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: rgb(17, 24, 39);
    font-size: 0.875rem;
    outline: none;
}

.dark .layout-builder-tree-search {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .layout-builder-tree-search input {
    color: rgb(255, 255, 255);
}

.layout-builder-tree-list {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 0.875rem 0.875rem;
}

.layout-builder-tree-container {
    position: relative;
    min-width: 0;
    padding-left: 0.25rem;
}

.layout-builder-tree-row {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5625rem 0.625rem;
    text-align: left;
    color: rgb(55, 65, 81);
    transition:
        background-color 150ms ease,
        color 150ms ease;
}

.layout-builder-tree-row:hover,
.layout-builder-tree-row:focus-visible,
.layout-builder-tree-row-selected {
    background: color-mix(in srgb, var(--primary-500) 10%, transparent);
    color: var(--primary-700);
}

.layout-builder-tree-row-container {
    margin-widget: 0.125rem;
}

.layout-builder-tree-row-widget {
    margin-left: 1.875rem;
    padding-left: 0.875rem;
}

.layout-builder-tree-row-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgb(107, 114, 128);
}

.layout-builder-tree-widgets {
    position: relative;
    display: grid;
    gap: 0.125rem;
    padding: 0.125rem 0 0.375rem;
}

.layout-builder-tree-widgets::before {
    position: absolute;
    top: 0;
    bottom: 0.875rem;
    left: 1.125rem;
    width: 1px;
    background: rgb(209, 213, 219);
    content: '';
}

.layout-builder-tree-row-widget::before {
    position: absolute;
    top: 50%;
    left: -0.75rem;
    width: 0.75rem;
    height: 1px;
    background: rgb(209, 213, 219);
    content: '';
}

.dark .layout-builder-tree-widgets::before,
.dark .layout-builder-tree-row-widget::before {
    background: rgb(55, 65, 81);
}

.layout-builder-tree-row-main {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0.0625rem;
}

.layout-builder-tree-row-main span,
.layout-builder-tree-row-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-builder-tree-row-main span {
    font-size: 0.875rem;
    font-weight: 650;
}

.layout-builder-tree-row-main small {
    color: rgb(107, 114, 128);
    font-size: 0.75rem;
}

.layout-builder-tree-badge {
    border-radius: 999px;
    background: rgb(243, 244, 246);
    padding: 0.125rem 0.375rem;
    color: rgb(75, 85, 99);
    font-size: 0.6875rem;
    font-weight: 700;
}

.layout-builder-tree-empty {
    padding: 1rem;
    color: rgb(107, 114, 128);
    font-size: 0.875rem;
}

.layout-builder-tree-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
}

.layout-builder-tree-footer {
    margin-top: auto;
    border-top: 1px solid rgb(229, 231, 235);
}

.dark .layout-builder-tree-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

.layout-builder-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(15, 23, 42, 0.45);
}

.layout-builder-responsive-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 90;
    width: min(28rem, calc(100vw - 2rem));
    overflow: auto;
    background: rgb(255, 255, 255);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
}

.layout-builder-responsive-drawer-left {
    left: 0;
}

.layout-builder-responsive-drawer-right {
    right: 0;
}

.dark .layout-builder-responsive-drawer {
    background: rgb(17, 24, 39);
}

@media (min-width: 1024px) {
    .layout-builder-panel-toggle {
        display: none;
    }
}

@media (max-width: 1280px) {
    .layout-builder-visual-toolbar {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    }

    .layout-builder-visual-actions {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 1023.98px) {
    .layout-builder-visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-builder-visual-panel {
        display: none;
    }

    .layout-builder-visual-canvas {
        padding: 0.75rem;
    }

    .layout-builder-visual-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-builder-visual-actions {
        grid-column: auto;
        grid-row: auto;
        justify-self: stretch;
    }

    .layout-builder-visual-actions {
        justify-content: flex-start;
    }
}

@container (max-width: 48rem) {
    .layout-builder-panel-toggle {
        display: inline-flex;
    }

    .layout-builder-visual-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .layout-builder-visual-panel {
        display: none;
    }

    .layout-builder-visual-canvas {
        padding: 0.75rem;
    }

    .layout-builder-visual-toolbar {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    }

    .layout-builder-visual-toolbar-start {
        grid-column: 1;
        grid-row: 1;
    }

    .layout-builder-visual-actions {
        grid-column: 2;
        grid-row: 1;
        flex-wrap: wrap;
        justify-self: end;
    }
}