/* Form Designer canvas — D&D-friendly nesting of tabs/rows/columns. */

.edbs-form-layout-canvas {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
}

/* ─────────── Tab strip (horizontal, native-tab look) ─────────── */
.edbs-tab-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--rz-border);
    margin-bottom: 0.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    background: var(--rz-base-50);
}

.edbs-tab-button {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem 0.45rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: transparent;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    position: relative;
    margin-bottom: -1px;          /* overlap the strip's bottom border for active state */
    border-bottom: 2px solid transparent;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

.edbs-tab-button:hover {
    background: var(--rz-base-100);
    color: var(--rz-text-color);
}

.edbs-tab-button.edbs-tab-active {
    background: var(--rz-base-background-color);
    color: var(--rz-primary);
    border-color: var(--rz-border);
    border-bottom-color: var(--rz-base-background-color);
    font-weight: 600;
}

.edbs-tab-button.edbs-tab-selected {
    box-shadow: inset 0 -2px 0 var(--rz-primary);
}

.edbs-tab-button.edbs-tab-dragover {
    background: rgba(33, 150, 243, 0.15);
    outline: 2px dashed var(--rz-primary);
    outline-offset: -2px;
}

.edbs-tab-button .edbs-tab-title {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edbs-tab-button .edbs-tab-del {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
    border-radius: 2px;
    opacity: 0.5;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.edbs-tab-button .edbs-tab-del:hover {
    opacity: 1;
    background: var(--rz-danger-light);
    color: var(--rz-danger);
}

.edbs-tab-add {
    border: 1px dashed var(--rz-border);
    background: transparent;
    cursor: pointer;
    padding: 0.35rem 0.65rem;
    margin: 0 0 -1px 0.35rem;
    border-radius: 3px 3px 0 0;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    align-self: stretch;
    flex-shrink: 0;
}
.edbs-tab-add:hover {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
    background: rgba(33, 150, 243, 0.05);
}

.edbs-tab-pane {
    border: 1px solid var(--rz-border);
    border-top: none;
    background: var(--rz-base-background-color);
    padding: 0.4rem;
    border-radius: 0 0 3px 3px;
}

.edbs-tab-pane-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.edbs-empty-state {
    text-align: center;
    padding: 1.5rem;
    color: var(--rz-text-secondary-color);
    font-style: italic;
    font-size: 0.85rem;
    border: 1px dashed var(--rz-border);
    border-radius: 3px;
    background: var(--rz-base-50);
}

.edbs-row-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.1rem;
    margin-bottom: 0.2rem;
    cursor: pointer;
    border-radius: 2px;
    font-size: 0.78rem;
}
.edbs-row-header:hover { background: var(--rz-base-100); }

.edbs-column-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.edbs-rows-zone {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 1.75rem;
    padding: 0.2rem;
    background: var(--rz-base-100);
    border-radius: 3px;
}

.edbs-row {
    border: 1px solid var(--rz-border);
    border-radius: 3px;
    background: var(--rz-base-50);
    padding: 0.25rem 0.35rem 0.35rem;
}

.edbs-columns-zone {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.2rem;
    background: var(--rz-base-100);
    border-radius: 3px;
}

.edbs-column {
    box-sizing: border-box;
    border: 1px solid var(--rz-border);
    border-radius: 3px;
    background: var(--rz-base-background-color);
    padding: 0.25rem 0.4rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    cursor: pointer;
    /* grid-column: span N is set inline via style="" — N = col.Size, 12 = full row. */
}

/* When the column itself is selected, primary outline. When the input/button INSIDE is
   selected, a subtler "content-selected" affordance so the user sees what's targeted. */
.edbs-column.edbs-content-selected:not(.edbs-selected) {
    box-shadow: inset 0 0 0 1px var(--rz-primary);
}

.edbs-column-body {
    cursor: pointer;
    flex: 1;
    padding: 0.1rem 0.2rem;
    border-radius: 2px;
    transition: background 0.12s;
}
.edbs-column-body:hover { background: var(--rz-base-100); }

/* Single-line input/button card — keeps the column tight (≈28px tall). */
.edbs-input-card,
.edbs-button-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.2;
}

.edbs-input-card strong,
.edbs-button-card strong {
    font-weight: 600;
}

.edbs-input-type {
    font-size: 0.65rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    font-family: ui-monospace, Consolas, monospace;
    letter-spacing: 0.04em;
}

.edbs-input-meta {
    font-size: 0.65rem;
    color: var(--rz-text-secondary-color);
    font-family: ui-monospace, Consolas, monospace;
}

.edbs-input-empty {
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
    font-style: italic;
}

/* Live preview of the real ItForm widget inside a column.
   pointer-events:none is load-bearing: the canvas is an edit surface, so the live
   (otherwise interactive) widget must let clicks/drag/select fall through to the column.
   max-height clips tall widgets (e.g. the 300px Rich-Text editor) to a sane preview size. */
.edbs-widget-preview-live {
    pointer-events: none;
    width: 100%;
    max-height: 150px;
    overflow: hidden;
}
/* Shrink the real Radzen controls so they fit the tight canvas column. */
.edbs-widget-preview-live .rz-form-field,
.edbs-widget-preview-live .rz-textbox,
.edbs-widget-preview-live .rz-dropdown,
.edbs-widget-preview-live .rz-numeric,
.edbs-widget-preview-live .rz-datepicker,
.edbs-widget-preview-live .rz-colorpicker {
    width: 100%;
    font-size: 0.78rem;
}
.edbs-widget-preview-live .rz-textbox,
.edbs-widget-preview-live .rz-numeric {
    min-height: 1.7rem;
}
/* Cap the Rich-Text editor body so it doesn't blow up the row height. */
.edbs-widget-preview-live .rz-html-editor {
    height: 110px !important;
}

.edbs-drag-handle {
    cursor: grab;
    user-select: none;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 0.15rem;
    flex-shrink: 0;
}
.edbs-drag-handle:active { cursor: grabbing; }
.edbs-drag-handle:hover { color: var(--rz-primary); }

.edbs-zone-dragover {
    outline: 2px dashed var(--rz-primary);
    outline-offset: -2px;
    background: rgba(33, 150, 243, 0.05);
}

.edbs-selected {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
}

.edbs-cond {
    font-size: 0.65rem;
    color: var(--rz-primary);
    background: rgba(33, 150, 243, 0.1);
    padding: 0.05rem 0.3rem;
    border-radius: 2px;
    font-family: ui-monospace, Consolas, monospace;
}

.edbs-col-size {
    font-size: 0.65rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    font-family: ui-monospace, Consolas, monospace;
}

/* Buttons inside the canvas headers should be tight. */
.edbs-tab-header .rz-button,
.edbs-row-header .rz-button,
.edbs-column-header .rz-button {
    min-height: 0;
    padding: 0.15rem 0.4rem;
}

/* Grid layout — simple table */
.edbs-grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.edbs-grid-table thead th {
    text-align: left;
    padding: 0.35rem 0.5rem;
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-border);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.edbs-grid-table tbody tr {
    border-bottom: 1px solid var(--rz-border);
}

.edbs-grid-table tbody tr:hover {
    background: var(--rz-base-50);
}

.edbs-grid-table tbody tr.edbs-selected {
    background: rgba(33, 150, 243, 0.1);
    outline: none;
}

.edbs-grid-table td {
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
}

/* Drag handle column on the grid table — narrow, low-contrast until hovered. */
.edbs-grid-handle-cell {
    text-align: center;
    cursor: grab;
    padding: 0.3rem 0.3rem !important;
}
.edbs-grid-handle-cell:active { cursor: grabbing; }

/* Drop-target highlights — top edge for "insert above", bottom edge for "insert at end". */
.edbs-grid-table tbody tr.edbs-grid-row-dragover-top {
    box-shadow: inset 0 2px 0 0 var(--rz-primary);
}
.edbs-grid-table tbody tr.edbs-grid-row-dragover-bottom {
    box-shadow: inset 0 -2px 0 0 var(--rz-primary);
}

.edbs-grid-end-zone td { padding: 0; }
.edbs-grid-end-zone-over td {
    background: rgba(33, 150, 243, 0.15);
    box-shadow: inset 0 2px 0 0 var(--rz-primary);
}

/* Widget palette */
.edbs-palette-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.25rem;
    background: var(--rz-base-100);
    border-radius: 3px;
    min-height: 2rem;
}

.edbs-palette-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border);
    border-radius: 3px;
    font-size: 0.82rem;
    cursor: grab;
    line-height: 1.2;
}

.edbs-palette-item:hover {
    background: var(--rz-base-50);
}

.edbs-palette-item:active {
    cursor: grabbing;
}

/* Collapsible palette sections (Widgets / Fields). Two side-by-side <details>
   elements share the sidebar; the user can fold either independently and the
   choice is remembered via localStorage (see WidgetPalette.razor). */
.edbs-palette-section {
    margin-bottom: 0.75rem;
}
.edbs-palette-section > summary.edbs-palette-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--rz-border);
    margin-bottom: 0.45rem;
}
.edbs-palette-section > summary.edbs-palette-summary::-webkit-details-marker { display: none; }
.edbs-palette-section > summary.edbs-palette-summary::before {
    content: "▸";
    display: inline-block;
    width: 0.9em;
    font-size: 0.8em;
    color: var(--rz-text-secondary-color);
    transition: transform 0.12s ease;
}
.edbs-palette-section[open] > summary.edbs-palette-summary::before {
    transform: rotate(90deg);
}
.edbs-palette-summary-title {
    font-weight: 600;
    font-size: 0.95rem;
}
.edbs-palette-summary-hint {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    margin-left: auto;
}

/* Field-palette items: drag tile + name + small ClrType chip. */
.edbs-field-item {
    /* inherits .edbs-palette-item base; only the extras */
    justify-content: flex-start;
}
.edbs-field-item .edbs-field-name {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edbs-field-item .edbs-field-type {
    margin-left: auto;
    font-family: ui-monospace, "Consolas", monospace;
    font-size: 0.7rem;
    padding: 0.05rem 0.3rem;
    background: var(--rz-base-100);
    border-radius: 2px;
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9rem;
}
.edbs-field-item.is-used {
    opacity: 0.45;
    cursor: not-allowed;
}
.edbs-field-item.is-used:hover {
    background: var(--rz-base-background-color);
}
/* Nested (dotted `parent.field`) sub-fields of a NestedDto — indented + a hairline rail
   so they read as children of the relation above them. */
.edbs-field-item.is-nested {
    padding-left: 1.4rem;
    border-left: 2px solid var(--rz-base-300);
    margin-left: 0.3rem;
}

/* Typed field-picker rows. */
.edbs-field-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.2;
    width: 100%;
}

.edbs-field-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 600;
    color: white;
    line-height: 1;
}

.edbs-field-chip-scalar       { background: #607d8b; }   /* slate-blue */
.edbs-field-chip-fkid         { background: #2e7d32; }   /* green */
.edbs-field-chip-fkdisplay    { background: #66bb6a; }   /* lighter green */
.edbs-field-chip-nesteddto    { background: #6a1b9a; }   /* purple */
.edbs-field-chip-collection   { background: #ef6c00; }   /* orange */
.edbs-field-chip-dynamicproperties { background: #455a64; } /* dark slate */

.edbs-field-name {
    flex-shrink: 0;
    font-weight: 500;
}

.edbs-field-type {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    text-align: right;
}

.edbs-field-inherited {
    flex-shrink: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-info);
    background: var(--rz-info-light);
    padding: 0.05rem 0.3rem;
    border-radius: 2px;
    font-weight: 600;
}

/* Live-validation hint for visibleWhen / readonly expression editors. */
.edbs-expression-editor {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
}

.edbs-expression-error {
    font-size: 0.7rem;
    color: var(--rz-danger);
    background: var(--rz-danger-light);
    border-left: 2px solid var(--rz-danger);
    padding: 0.15rem 0.35rem;
    border-radius: 2px;
    line-height: 1.25;
    font-family: ui-monospace, Consolas, monospace;
}

/* Right-pane (Properties + XML Preview) — compact density. */
.edbs-pane-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
    padding: 0.25rem 0.1rem 0.4rem;
    border-bottom: 1px solid var(--rz-border);
    margin-bottom: 0.5rem;
}

.edbs-property-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.edbs-property-row .rz-textbox,
.edbs-property-row .rz-dropdown,
.edbs-property-row .rz-numeric {
    min-height: 0;
}

/* Tighter input chrome inside the right pane to free up vertical space. */
.edbs-pane-content .rz-textbox {
    min-height: 1.85rem;
    font-size: 0.8rem;
}

.edbs-pane-content .rz-textbox input {
    height: 1.85rem;
    font-size: 0.8rem;
}

/* Dropdowns need a bit more headroom than plain textboxes — the field-picker
   renders a chip + name + type pill on a single line, so 1.85rem clips the chip. */
.edbs-pane-content .rz-dropdown {
    min-height: 2.05rem;
    font-size: 0.8rem;
}

.edbs-pane-content .rz-dropdown .rz-dropdown-trigger {
    min-height: 2.05rem;
}

.edbs-xml-preview {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0.5rem;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-border);
    overflow: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.35;
}

/* XSD validation status (mirrors ValidateXmlQuery → bool valid + errors). */
.edbs-xsd-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 3px;
}

.edbs-xsd-ok {
    color: var(--rz-success);
    background: var(--rz-success-light);
    border: 1px solid var(--rz-success);
}

.edbs-xsd-err {
    color: var(--rz-danger);
    background: var(--rz-danger-light);
    border: 1px solid var(--rz-danger);
}

.edbs-xsd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: currentColor;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.edbs-xsd-ok .edbs-xsd-badge { color: var(--rz-on-success); background: var(--rz-success); }
.edbs-xsd-err .edbs-xsd-badge { color: var(--rz-on-danger); background: var(--rz-danger); }

.edbs-xsd-errors {
    margin: 0.3rem 0 0 0;
    padding: 0.3rem 0.5rem 0.3rem 1.2rem;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--rz-danger);
    background: var(--rz-danger-light);
    border-left: 2px solid var(--rz-danger);
    max-height: 8rem;
    overflow: auto;
    list-style: disc;
    font-family: ui-monospace, Consolas, monospace;
}

.edbs-xsd-errors li {
    margin-bottom: 0.1rem;
}