/* NOTE: Form Builder — fullscreen layout (sidebar + canvas) */

.mw-fb-fullscreen {
    display: flex;
    height: calc(100dvh - 48px);
    overflow: hidden;
}

/* NOTE: Left sidebar */
.mw-fb-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.mw-fb-sb-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.mw-fb-sb-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* NOTE: Main editor area */
.mw-fb-page-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--mud-palette-background-grey);
    padding: 24px;
    position: relative;
}

/* NOTE: Canvas container — applies MaxWidth and centers */
.mw-fb-canvas-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    transition: max-width 200ms ease;
}

/* NOTE: Side-by-side editor + preview — for narrow forms (Small/ExtraSmall) the canvas and the live
   preview fit next to each other instead of stacking, so the author edits and sees the result at once.
   Each column grows to an equal share, capped by its MudContainer MaxWidth; min-width:0 lets them
   shrink to fit the page area rather than overflow. */
.mw-fb-page-area.split {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}

.mw-fb-page-area.split .mw-fb-canvas-container {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

/* NOTE: WYSIWYG Canvas */

.mw-fb-canvas {
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 16px;
    min-height: 300px;
    position: relative;
}

/* NOTE: 12-column grid overlay (visible during drag) */
.mw-fb-canvas.dragging .mw-fb-grid-overlay {
    opacity: 1;
}

.mw-fb-grid-overlay {
    position: absolute;
    inset: 16px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 150ms;
}

.mw-fb-grid-col {
    border-left: 1px dashed rgba(128, 128, 128, 0.15);
}

.mw-fb-grid-col:last-child {
    border-right: 1px dashed rgba(128, 128, 128, 0.15);
}

/* NOTE: Form element wrapper */
.mw-fb-el {
    position: relative;
    border-radius: 4px;
    border: 1.5px solid transparent;
    transition: border-color 150ms, box-shadow 150ms;
    cursor: default;
    min-height: 32px;
}

/* NOTE: Group membership indicator — only for members rendered as singles (a logical None-style
   group, or a styled member astray from its run). Members inside a styled group's container get no
   per-field accent: the container itself is their indicator. The colored left accent is driven by
   --mw-grp (set inline from FormGroupColors). */
.mw-fb-el-grouped {
    border-left: 3px solid var(--mw-grp, transparent);
    padding-top: 14px;
}

/* NOTE: WYSIWYG group container — wraps a styled group's real Frame/Paper around its contiguous run,
   with a colored left accent (--mw-grp) so the framed group is identifiable on the canvas. */
.mw-fb-grp-box {
    border-left: 3px solid var(--mw-grp, transparent);
    border-radius: 4px;
    padding-left: 4px;
}

/* NOTE: Inline group settings in the sidebar (replaces the old floating window). */
.mw-fb-grp-inline.expanded {
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.mw-fb-grp-inline-body {
    padding: 4px 8px 8px;
}

/* NOTE: Group validation popover — the rule rows need more width than the sidebar gives, so they
   open in a popover anchored to the "Group validation" button. */
.mw-fb-grp-rules-anchor {
    position: relative;
}

.mw-fb-grp-rules-popover {
    width: 480px;
    max-width: 90vw;
}

/* NOTE: Group color dot — used in the group picker (MwGroupSelect) so each group is identifiable by
   its deterministic color, matching the canvas containers and badges. */
.mw-grp-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mw-fb-grp-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: calc(100% - 2px);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 1px 7px 2px 5px;
    color: var(--mw-grp);
    background: var(--mw-grp-tint);
    border-top-left-radius: 3px;
    border-bottom-right-radius: 6px;
    pointer-events: none;
    z-index: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-fb-grp-badge .mud-icon-root {
    font-size: 13px;
}

/* NOTE: Astray — a styled group's member separated from its contiguous run. It won't be framed at
   runtime (it renders loose); the dashed accent + warning icon prompt the author to clump it. */
.mw-fb-el-astray {
    border-left-style: dashed;
}

.mw-fb-grp-badge .mw-fb-grp-warn {
    color: var(--mud-palette-warning);
}

/* NOTE: Preview children (disabled MudTextField, MudCheckBox, etc.) must not capture
   clicks — they'd swallow the event before it reaches .mw-fb-el's onclick handler.
   pointer-events: none lets clicks fall through to .mw-fb-el-content (the DnD handle),
   which bubbles to .mw-fb-el. */
.mw-fb-el-content > * {
    pointer-events: none;
}

/* NOTE: Toggle preview (checkbox/switch) is shorter than a text/select field, so in a row shared
   with a taller field it would sit at the top of the stretched tile. Fill the cell and center the
   preview vertically so the control lines up mid-row against its neighbour — matching how the
   rendered form (MwDynamicForm) centers the toggle. Scoped to toggles; other previews keep their
   top alignment. */
.mw-fb-el-vcenter {
    height: 100%;
}

.mw-fb-el-vcenter .mw-fb-el-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* NOTE: Hover — show overlay */
.mw-fb-el:hover {
    border-color: var(--mud-palette-lines-default);
}

.mw-fb-el:hover .mw-fb-overlay {
    opacity: 1;
}

/* NOTE: Selected */
.mw-fb-el.selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* NOTE: Dragging source */
.mw-fb-el.drag-source {
    opacity: 0.3;
    border: 1.5px dashed var(--mud-palette-primary);
}

/* NOTE: Overlay with handle + actions */
.mw-fb-overlay {
    position: absolute;
    top: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 4px 0 4px;
    opacity: 0;
    transition: opacity 100ms;
    z-index: 5;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.mw-fb-overlay button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.mw-fb-overlay button:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.mw-fb-overlay .drag-grip {
    cursor: grab;
}

.mw-fb-overlay .drag-grip:active {
    cursor: grabbing;
}

.mw-fb-overlay .el-type {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0 4px;
    opacity: 0.6;
    user-select: none;
}

/* NOTE: Resize handles */
.mw-fb-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 5;
    opacity: 0;
    transition: opacity 100ms;
}

.mw-fb-el:hover .mw-fb-resize,
.mw-fb-el.selected .mw-fb-resize {
    opacity: 1;
}

.mw-fb-resize::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    opacity: 0.5;
}

.mw-fb-resize:hover::after {
    height: 40px;
    opacity: 1;
}

.mw-fb-resize.left {
    left: -4px;
}

.mw-fb-resize.left::after {
    left: 0;
}

.mw-fb-resize.right {
    right: -4px;
}

.mw-fb-resize.right::after {
    right: 0;
}

/* NOTE: Drop insertion indicator */
.mw-fb-drop-indicator {
    grid-column: span 12;
    height: 3px;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    position: relative;
    pointer-events: none;
}

.mw-fb-drop-indicator::before,
.mw-fb-drop-indicator::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 9px;
    height: 9px;
    background: var(--mud-palette-primary);
    border-radius: 50%;
}

.mw-fb-drop-indicator::before {
    left: -4px;
}

.mw-fb-drop-indicator::after {
    right: -4px;
}

/* NOTE: Empty canvas placeholder */
.mw-fb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px;
    color: var(--mud-palette-text-disabled);
    font-size: 14px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    grid-column: span 12;
}

/* NOTE: Group container in editor */
.mw-fb-group {
    grid-column: span 12;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px 12px 12px;
    position: relative;
    min-height: 60px;
}

.mw-fb-group-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background: var(--mud-palette-surface);
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
}

/* NOTE: Width snap tooltip during resize */
.mw-fb-snap-tooltip {
    position: fixed;
    background: var(--mud-palette-primary);
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    margin-top: -8px;
}

/* NOTE: Multi-select floating action bar */
.mw-fb-multi-bar {
    position: sticky;
    bottom: 16px;
    margin: 16px auto 0;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 8px;
    z-index: 20;
}

/* NOTE: Multi-selected element */
.mw-fb-el.multi-selected {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.3);
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
}

/* NOTE: Palette items in sidebar (sequence editor pattern) */
.mw-fb-palette-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    cursor: grab;
    user-select: none;
    border-radius: 4px;
    transition: background 0.12s ease;
    font-size: 13px;
}

.mw-fb-palette-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.mw-fb-palette-item:active {
    cursor: grabbing;
}

.mw-fb-palette-item .mw-fb-palette-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* NOTE: Info + add buttons — hidden until hover */
.mw-fb-palette-item .mw-fb-palette-btn {
    opacity: 0;
    transition: opacity 0.12s;
    padding: 2px !important;
    min-width: 0 !important;
    width: 22px !important;
    height: 22px !important;
}

.mw-fb-palette-item:hover .mw-fb-palette-btn {
    opacity: 0.6;
}

.mw-fb-palette-item .mw-fb-palette-btn:hover {
    opacity: 1 !important;
}

/* NOTE: Ghost element during drag */
.mw-fb-ghost {
    position: fixed;
    padding: 6px 14px;
    background: var(--mud-palette-surface, #1e1e1e);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    pointer-events: none;
    z-index: 1400;
    white-space: nowrap;
}

/* NOTE: Drop indicator line (positioned by JS) */
.mw-fb-drop-line {
    position: fixed;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1300;
}

.mw-fb-drop-line::before,
.mw-fb-drop-line::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--mud-palette-primary);
    border-radius: 50%;
}

/* NOTE: Dot position depends on orientation — horizontal line: dots at left/right */
.mw-fb-drop-line[style*="width: 3px"] {
    /* Vertical line (beside mode) — dots at top/bottom */
}

.mw-fb-drop-line::before {
    left: -3px;
    top: -3px;
}

.mw-fb-drop-line::after {
    right: -3px;
    bottom: -3px;
}

/* NOTE: Inline settings panel (fallback when MwWindows can't overlay, e.g. inside dialogs) */
.mw-fb-inline-settings {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 8px -8px -8px;
    padding: 12px;
    background: var(--mud-palette-background);
    border-radius: 0 0 4px 4px;
    pointer-events: auto;
}

/* NOTE: Info popover */
.mw-fb-info-popover {
    padding: 12px 16px;
    max-width: 280px;
    font-size: 13px;
    line-height: 1.5;
}

/* NOTE: Preview faker (MwFormPreviewFaker) */

.mw-fpf-root {
    padding: 12px 16px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 12px;
}

.mw-fpf-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--mud-palette-text-secondary);
}

.mw-fpf-row {
    margin-bottom: 8px;
}

.mw-fpf-row:last-child {
    margin-bottom: 0;
}