/* ===== Layout Manager – Design Surface Styles ===== */

.layout-manager-design-on {
    position: relative;
    border-radius: 10px;
    transition: box-shadow .15s ease, background-color .15s ease;
}

.layout-manager-surface-active {
    box-shadow: 0 0 0 2px rgba(13,110,253,.18), 0 12px 30px rgba(15,23,42,.10);
    background: linear-gradient(180deg, rgba(13,110,253,.03), rgba(13,110,253,0));
}

.layout-manager-design-on .dx-form-group {
    position: relative;
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.24);
    transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

.layout-manager-design-on .dx-form-group:hover {
    box-shadow: inset 0 0 0 1px rgba(13,110,253,.28), 0 8px 22px rgba(15,23,42,.08);
}

.layout-manager-design-group {
    min-height: 96px;
}

.layout-manager-group-selected {
    box-shadow: inset 0 0 0 2px rgba(13,110,253,.35), 0 12px 26px rgba(13,110,253,.10) !important;
    background: linear-gradient(180deg, rgba(13,110,253,.07), rgba(255,255,255,.88));
}

.layout-manager-group-chrome {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .5rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid rgba(148,163,184,.22);
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.92));
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    user-select: none;
}

.layout-manager-group-handle {
    border: 1px solid rgba(148,163,184,.38);
    background: #fff;
    color: #0f172a;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    padding: .16rem .65rem;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
}

.layout-manager-group-handle:active {
    cursor: grabbing;
}

.layout-manager-group-badge,
.layout-manager-group-meta {
    font-size: .72rem;
    line-height: 1;
    padding: .22rem .45rem;
    border-radius: 999px;
    background: rgba(148,163,184,.14);
    color: #334155;
}

.layout-manager-group-badge {
    background: rgba(13,110,253,.11);
    color: #0b5ed7;
    font-weight: 700;
}

.layout-manager-direct-item {
    cursor: grab;
    border-radius: 8px;
    transition: box-shadow .12s ease, background-color .12s ease, transform .12s ease;
}

.layout-manager-direct-item:hover {
    box-shadow: inset 0 0 0 1px rgba(13,110,253,.3);
    background: rgba(13,110,253,.03);
}

.layout-manager-field-selected {
    box-shadow: inset 0 0 0 2px rgba(13,110,253,.38), 0 6px 18px rgba(13,110,253,.09);
    background: rgba(13,110,253,.06);
}

.layout-manager-floating-panel {
    position: fixed;
    right: 20px;
    top: 108px;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 140px);
    overflow: hidden;
    z-index: 2050;
    border: 1px solid rgba(148,163,184,.3);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(15,23,42,.18);
}

.layout-manager-floating-hidden {
    display: none;
}

.layout-manager-floating-collapsed .layout-manager-floating-body {
    display: none;
}

.layout-manager-floating-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem .9rem .7rem;
    cursor: move;
    background: linear-gradient(180deg, rgba(13,110,253,.09), rgba(13,110,253,.02));
    border-bottom: 1px solid rgba(148,163,184,.18);
}

.layout-manager-floating-title {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
}

.layout-manager-floating-subtitle {
    font-size: .73rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.layout-manager-floating-header-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.layout-manager-floating-icon {
    border: 1px solid rgba(148,163,184,.34);
    background: #fff;
    color: #334155;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-weight: 700;
    line-height: 1;
}

.layout-manager-floating-body {
    padding: .85rem .9rem .95rem;
    overflow: auto;
    max-height: calc(100vh - 200px);
}

.layout-manager-floating-hint {
    margin-bottom: .65rem;
    color: #475569;
    font-size: .77rem;
    line-height: 1.45;
}

.layout-manager-floating-search {
    width: 100%;
    border: 1px solid rgba(148,163,184,.35);
    border-radius: 10px;
    padding: .55rem .7rem;
    margin-bottom: .9rem;
    font-size: .83rem;
    outline: none;
}

.layout-manager-floating-search:focus {
    border-color: rgba(13,110,253,.45);
    box-shadow: 0 0 0 3px rgba(13,110,253,.12);
}

.layout-manager-toolbox-section + .layout-manager-toolbox-section {
    margin-top: .9rem;
}

.layout-manager-toolbox-label {
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin-bottom: .5rem;
}

.layout-manager-toolbox-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-height: 240px;
    overflow: auto;
    padding-right: .15rem;
}

.layout-manager-toolbox-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: space-between;
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.22);
    background: linear-gradient(180deg, #fff, #f8fafc);
    cursor: grab;
}

.layout-manager-toolbox-item:hover {
    border-color: rgba(13,110,253,.32);
    box-shadow: 0 8px 18px rgba(13,110,253,.08);
}

.layout-manager-toolbox-item-title {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-manager-toolbox-item-add {
    border: 1px solid rgba(13,110,253,.22);
    background: rgba(13,110,253,.08);
    color: #0b5ed7;
    border-radius: 8px;
    padding: .25rem .5rem;
    font-size: .74rem;
    font-weight: 700;
}

.layout-manager-selection-card {
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.95));
    padding: .7rem .75rem;
    margin-bottom: .7rem;
}

.layout-manager-selection-title {
    font-size: .86rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .2rem;
}

.layout-manager-selection-meta {
    font-size: .76rem;
    color: #64748b;
}

.layout-manager-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.layout-manager-action-btn {
    border: 1px solid rgba(148,163,184,.24);
    background: #fff;
    color: #0f172a;
    border-radius: 10px;
    padding: .5rem .65rem;
    font-size: .78rem;
    font-weight: 600;
    text-align: left;
}

.layout-manager-action-btn:hover:not(:disabled) {
    border-color: rgba(13,110,253,.35);
    background: rgba(13,110,253,.04);
}

.layout-manager-action-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.layout-manager-empty-state {
    padding: .8rem;
    border: 1px dashed rgba(148,163,184,.35);
    border-radius: 10px;
    color: #64748b;
    font-size: .77rem;
    line-height: 1.45;
    background: rgba(248,250,252,.7);
}

.layout-manager-snap-overlay {
    position: fixed;
    display: none;
    z-index: 2040;
    pointer-events: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px rgba(13,110,253,.35);
    background: rgba(13,110,253,.06);
}

.layout-manager-snap-overlay.is-visible {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 30% 40% 30%;
}

.layout-manager-snap-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    font-size: .73rem;
    font-weight: 700;
    color: rgba(15,23,42,.66);
    border: 1px dashed rgba(13,110,253,.18);
    background: rgba(255,255,255,.26);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.layout-manager-snap-zone.is-active {
    background: rgba(13,110,253,.18);
    color: #0b5ed7;
}

.layout-manager-snap-zone.snap-before {
    grid-column: 1 / span 3;
    grid-row: 1;
}

.layout-manager-snap-zone.snap-left {
    grid-column: 1;
    grid-row: 2;
}

.layout-manager-snap-zone.snap-fill {
    grid-column: 2;
    grid-row: 2;
}

.layout-manager-snap-zone.snap-right {
    grid-column: 3;
    grid-row: 2;
}

.layout-manager-snap-zone.snap-after {
    grid-column: 1 / span 3;
    grid-row: 3;
}

.layout-manager-drag-ghost {
    position: fixed;
    z-index: 2060;
    pointer-events: none;
    opacity: .9;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 24px 48px rgba(15,23,42,.2);
    transform: rotate(-1.2deg);
}

.layout-manager-dragging {
    cursor: grabbing !important;
    user-select: none;
}

.accordion-item.layout-section-hidden {
    display: none !important;
}

.layout-section-design .accordion-item {
    position: relative;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.24);
    transition: box-shadow .15s ease, transform .15s ease;
}

.layout-section-design .accordion-item:hover {
    box-shadow: inset 0 0 0 1px rgba(13,110,253,.3), 0 10px 24px rgba(15,23,42,.08);
}

.layout-section-design .accordion-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-left: .45rem;
}

.layout-section-toolbar {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .35rem .25rem .5rem;
    padding: .35rem .55rem;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: 10px;
    background: rgba(248,250,252,.92);
    color: #475569;
    font-size: .75rem;
    font-weight: 700;
}

.layout-section-handle,
.layout-section-remove,
.layout-section-restore {
    flex: 0 0 auto;
    border: 1px solid rgba(148,163,184,.34);
    background: linear-gradient(180deg, #fff, #f8fafc);
    color: #334155;
    border-radius: 10px;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 700;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(15,23,42,.08);
}

.layout-section-remove {
    color: #b42318;
    cursor: pointer;
}

.layout-section-restore {
    cursor: pointer;
}

.layout-section-restore:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.layout-section-handle:active {
    cursor: grabbing;
}

.accordion:not(.layout-section-design) .layout-section-handle,
.accordion:not(.layout-section-design) .layout-section-remove,
.accordion:not(.layout-section-design) .layout-section-toolbar {
    display: none !important;
}

.layout-section-design .accordion-button {
    border-radius: 10px !important;
}

/* Scoped toggle lock: suppress transitions/animations only inside active layout surfaces. */
.layout-toggle-lock-scope,
.layout-toggle-lock-scope * {
    backface-visibility: hidden;
}

.layout-toggle-lock-scope * ,
.layout-toggle-lock-scope *::before,
.layout-toggle-lock-scope *::after {
    transition: none !important;
    animation: none !important;
}

.layout-toggle-lock-scope .layout-manager-surface-active,
.layout-toggle-lock-scope .layout-manager-group-selected,
.layout-toggle-lock-scope.layout-manager-design-on .dx-form-group,
.layout-toggle-lock-scope.layout-section-design .accordion-item {
    box-shadow: none !important;
}

.layout-toggle-fade {
    opacity: .985;
    filter: saturate(.985);
}