/* View designer (/view/{id}/edit): top bar, left panel (Add / Outline), page stage, inspector. */

.vd-root {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 7rem);
    margin: -0.5rem;
    background: var(--rz-base-100);
    border-radius: 8px;
    overflow: clip; /* not hidden: the sticky top bar needs a non-scrolling parent */
    border: 1px solid var(--rz-border-color);
}

/* ── Top bar ─────────────────────────────────────────────── */
.vd-top {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    padding: 0.6rem 0.9rem;
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-border-color);
}
.vd-top__name { display: flex; flex-direction: column; min-width: 0; }
.vd-top__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1rem; }
.vd-top__sub { font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.vd-top__group { display: flex; align-items: center; gap: 0.4rem; }
.vd-top__label { font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.vd-top__spacer { flex: 1 1 1rem; }
.vd-dirty {
    font-size: 0.7rem; font-weight: 500; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: var(--rz-warning-lighter); color: var(--rz-warning-darker);
}

/* ── Body: three panes, stacking on narrow screens ───────── */
.vd-body { display: flex; flex-wrap: wrap; flex: 1; min-height: 0; align-items: stretch; }
.vd-left {
    flex: 1 1 270px; max-width: 300px; min-width: 0;
    background: var(--rz-base-background-color); border-right: 1px solid var(--rz-border-color);
    display: flex; flex-direction: column;
}
.vd-center {
    flex: 999 1 520px; min-width: 0; padding: 1rem 22px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
    max-height: calc(100vh - 11rem); overflow: auto;
}
.vd-right {
    flex: 1 1 300px; max-width: 340px; min-width: 0;
    background: var(--rz-base-background-color); border-left: 1px solid var(--rz-border-color);
    display: flex; flex-direction: column;
}
.vd-left, .vd-right { max-height: calc(100vh - 11rem); }
@media (max-width: 1100px) {
    .vd-left, .vd-right, .vd-center { max-width: none; max-height: none; flex-basis: 100%; }
    .vd-left, .vd-right { border: none; border-bottom: 1px solid var(--rz-border-color); }
}

.vd-center__note { font-size: 0.75rem; color: var(--rz-text-secondary-color); align-self: center; }
.vd-viewport { width: 100%; min-width: 0; display: flex; justify-content: center; }
.vd-stage {
    flex: 0 0 auto;
    max-width: none;
    /* no padding: the page grid's container queries measure the content width, so Wide (992 px) stays Wide */
    padding: 0 !important;
    transition: width 0.15s ease;
}
.pg-page--design .vg-row--layer { min-height: 0; }

/* ── Panel (left) ────────────────────────────────────────── */
.vd-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.vd-panel__body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; min-height: 0; }
.vd-panel__body > *, .vd-insp__body > * { flex-shrink: 0; }
.vd-tabs { display: flex; border-bottom: 1px solid var(--rz-border-color); }
.vd-tab {
    flex: 1; height: 42px; border: none; background: transparent; cursor: pointer;
    font: inherit; font-size: 0.85rem; color: var(--rz-text-secondary-color);
    border-bottom: 2px solid transparent;
}
.vd-tab--on { color: var(--rz-primary); font-weight: 600; border-bottom-color: var(--rz-primary); }

.vd-search {
    display: flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 0.6rem;
    border: 1px solid var(--rz-input-border-color, var(--rz-border-color)); border-radius: 8px;
    background: var(--rz-input-background-color, var(--rz-base-background-color));
}
.vd-search input { border: none; outline: none; flex: 1; min-width: 0; font: inherit; font-size: 0.85rem; background: transparent; color: inherit; }
.vd-hint { font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.vd-group-title {
    margin-top: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--rz-text-secondary-color);
}
.vd-group-title--row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.vd-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.vd-subtitle { font-size: 0.72rem; color: var(--rz-text-tertiary-color); margin-top: 0.15rem; }

.vd-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.vd-block {
    display: flex; align-items: flex-start; gap: 0.4rem; text-align: left; min-height: 44px;
    padding: 0.45rem 0.5rem; border: 1px solid var(--rz-border-color); border-radius: 8px;
    background: var(--rz-base-50, var(--rz-base-background-color)); cursor: grab; font: inherit; color: inherit;
}
.vd-block:hover, .vd-field:hover, .vd-prefab:hover { border-color: var(--rz-primary); background: var(--rz-primary-lighter); }
.vd-block__text { display: flex; flex-direction: column; min-width: 0; }
.vd-block__name { font-size: 0.8rem; font-weight: 500; }
.vd-block__hint { font-size: 0.68rem; color: var(--rz-text-secondary-color); }

.vd-fgroup { border: 1px solid var(--rz-border-color); border-radius: 8px; overflow: hidden; }
.vd-fgroup__head {
    width: 100%; display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.55rem;
    border: none; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.vd-fgroup__name { flex: 1; font-size: 0.85rem; font-weight: 500; }
.vd-fgroup__count { font-size: 0.7rem; color: var(--rz-text-secondary-color); }
.vd-fgroup__body { display: flex; flex-direction: column; gap: 1px; padding: 0 0.35rem 0.4rem; }
.vd-field {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem; min-height: 34px;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    cursor: grab; font: inherit; color: inherit; text-align: left;
}
.vd-field--used .vd-field__name { color: var(--rz-text-secondary-color); }
.vd-field__name { flex: 1; font-size: 0.83rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-kind {
    flex: 0 0 auto; min-width: 2.3rem; text-align: center; font-size: 0.62rem; font-weight: 600;
    padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--rz-primary-lighter); color: var(--rz-primary-darker, var(--rz-primary));
}
.vd-prefab {
    display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.15rem 0 0.3rem;
    min-height: 34px; padding: 0.3rem 0.5rem; border: 1px dashed var(--rz-primary); border-radius: 6px;
    background: transparent; color: var(--rz-primary); font: inherit; font-size: 0.78rem; font-weight: 500; cursor: grab;
}

.vd-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: none; border-radius: 6px; background: transparent; cursor: pointer; color: var(--rz-text-secondary-color);
}
.vd-icon-btn:hover { background: var(--rz-base-200); color: var(--rz-text-color); }

/* Outline */
.vd-outline { gap: 2px; }
.vd-outline__part { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.3rem 0.2rem; }
.vd-outline__partname { font-weight: 600; font-size: 0.85rem; }
.vd-outline__meta { font-size: 0.7rem; color: var(--rz-text-secondary-color); margin-left: auto; white-space: nowrap; }
.vd-outline__part .vd-outline__meta { margin-left: 0; flex: 1; }
.vd-outline__empty { font-size: 0.75rem; color: var(--rz-text-tertiary-color); padding: 0.2rem 0 0.2rem 1.4rem; }
.vd-outline__row {
    display: flex; align-items: center; gap: 0.4rem; width: 100%; min-height: 32px;
    border: none; border-radius: 6px; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.vd-outline__row:hover { background: var(--rz-base-200); }
.vd-outline__row--section { padding: 0.3rem 0.4rem 0.3rem 1rem; font-weight: 500; font-size: 0.83rem; }
.vd-outline__row--widget { padding: 0.25rem 0.4rem 0.25rem 2.1rem; font-size: 0.8rem; }
.vd-outline__row--on { background: var(--rz-primary-lighter); color: var(--rz-primary-darker, var(--rz-primary)); font-weight: 600; }
.vd-outline__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-ptag, .vd-stag {
    font-size: 0.6rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em;
}
.vd-ptag { background: var(--rz-secondary-lighter); color: var(--rz-secondary-darker, var(--rz-secondary)); }
.vd-stag { background: var(--rz-base-200); color: var(--rz-text-secondary-color); }
.vd-gtag, .vd-ltag { font-size: 0.6rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.vd-gtag { background: #e8eaf6; color: #283593; }
.vd-ltag { background: #efe8f8; color: #5a3d8a; }

/* ── Stage ──────────────────────────────────────────────── */
.vd-part__add {
    min-height: 40px; border: 1px dashed var(--rz-base-400, var(--rz-border-color)); border-radius: 8px;
    background: transparent; color: var(--rz-text-secondary-color); cursor: pointer; font: inherit; font-size: 0.8rem;
}
.vd-part__add:hover { border-color: var(--rz-primary); color: var(--rz-primary); background: var(--rz-primary-lighter); }
.vd-tag { font-size: 0.65rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--rz-base-200); color: var(--rz-text-secondary-color); white-space: nowrap; }
.vd-tag--warn { background: var(--rz-warning-lighter); color: var(--rz-warning-darker); }
.vd-tag--info { background: var(--rz-info-lighter); color: var(--rz-info-darker); }

/* ── Inspector (right) ───────────────────────────────────── */
.vd-insp__head { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--rz-border-color); display: flex; align-items: flex-start; gap: 0.5rem; }
.vd-insp__crumb { font-size: 0.72rem; color: var(--rz-text-secondary-color); }
.vd-insp__title { font-size: 1rem; font-weight: 600; }
.vd-insp__body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.8rem; overflow-y: auto; min-height: 0; }
.vd-insp__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.vd-insp__scroll > * { flex-shrink: 0; }
.vd-insp__scroll > .vd-insp__body { overflow: visible; }
.vd-insp__scroll > div:last-child { height: auto !important; overflow: visible !important; }
.vd-box { border: 1px solid var(--rz-border-color); border-radius: 10px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; }
.vd-box__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.vd-cols__label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--rz-text-secondary-color); }
.vd-cols__label b { color: var(--rz-text-color); font-weight: 600; }
.vd-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.vd-cols__cell { height: 26px; border: none; border-radius: 3px; padding: 0; cursor: pointer; background: var(--rz-base-200); }
.vd-cols__cell:hover { outline: 2px solid var(--rz-primary); outline-offset: -2px; }
.vd-cols__cell--on { background: var(--rz-primary); }
.vd-cols__cell--off { background: var(--rz-primary-lighter); }
.vd-anchor { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; padding: 6px; border: 1px solid var(--rz-border-color); border-radius: 8px; background: var(--rz-base-50, var(--rz-base-100)); align-self: flex-start; }
.vd-anchor__cell { width: 34px; height: 34px; border: 1px solid var(--rz-border-color); border-radius: 6px; background: var(--rz-base-background-color); cursor: pointer; padding: 0; }
.vd-anchor__cell--on { background: #5a3d8a; border-color: #5a3d8a; }
.vd-layer-row { display: flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0.25rem 0.5rem; border: 1px solid var(--rz-border-color); border-radius: 6px; background: transparent; cursor: pointer; font: inherit; font-size: 0.83rem; color: inherit; }
.vd-layer-row:hover { border-color: #5a3d8a; }
.vd-prefab--layer { border-color: #5a3d8a; color: #5a3d8a; cursor: pointer; }
.vd-prefab--layer:hover { background: #efe8f8; border-color: #5a3d8a; }
.vd-insp__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.vd-insp__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.vd-stat { background: var(--rz-base-100); border-radius: 8px; padding: 0.5rem 0.6rem; }
.vd-stat__n { font-size: 1.1rem; font-weight: 600; }
.vd-stat__l { font-size: 0.72rem; color: var(--rz-text-secondary-color); }

/* ── Starter (empty view) ────────────────────────────────── */
.vd-starter {
    background: var(--rz-base-background-color); border: 1px solid var(--rz-border-color); border-radius: 12px;
    padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem;
}
.vd-starter__title { font-size: 1.15rem; font-weight: 600; margin: 0; }
.vd-starter__text { margin: 0; color: var(--rz-text-secondary-color); font-size: 0.85rem; }
.vd-starter__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.vd-starter__opt {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem; text-align: left; cursor: pointer;
    border: 2px solid var(--rz-border-color); border-radius: 10px; background: transparent; font: inherit; color: inherit;
}
.vd-starter__opt--on { border-color: var(--rz-primary); }
.vd-starter__pic { height: 90px; border-radius: 6px; background: var(--rz-base-100); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.vd-starter__hero { height: 26px; border-radius: 4px; background: var(--rz-base-300); }
.vd-starter__cols { flex: 1; display: flex; gap: 4px; }
.vd-starter__main { flex: 2; display: flex; flex-direction: column; gap: 4px; }
.vd-starter__line { height: 7px; border-radius: 3px; background: var(--rz-base-300); }
.vd-starter__line--dark { background: var(--rz-text-secondary-color); width: 60%; height: 9px; }
.vd-starter__side { flex: 1; border-radius: 4px; background: var(--rz-primary-lighter); }
.vd-starter__name { font-weight: 600; font-size: 0.9rem; }
.vd-starter__desc { font-size: 0.78rem; color: var(--rz-text-secondary-color); }
.vd-starter__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; }

/* ── Record view grid: runtime + designer (sections and blocks on .pg-row / .pg-cell) ── */
.vg-page { min-width: 0; }
.vg-sections { row-gap: 1rem; }
.vg-row { row-gap: 0.75rem; align-items: flex-start; }
.vg-cellbox { position: relative; }
.vg-group { display: flex; flex-direction: column; min-width: 0; }
.cg-layer.vg-layer { z-index: 5; box-sizing: border-box; }
.vg-layer .pg-row { margin: 0 -4px; row-gap: 4px; }
.vg-layer .pg-cell { padding: 0 4px; }
.cg-on-dark { color: #fff; --rz-text-color: #fff; --rz-text-secondary-color: rgba(255,255,255,0.85); --rz-text-tertiary-color: rgba(255,255,255,0.72); }
.cg-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

.pg-page--design .vg-design-section__head { display: flex; align-items: center; gap: 0.4rem; min-height: 24px; margin-bottom: 0.5rem; cursor: pointer; }
.vg-design-section__title { font-weight: 600; }
.vg-design-section__title--off { color: var(--rz-text-tertiary-color); font-style: italic; font-weight: 500; }
.vg-group--design { outline: 1px dashed #9fa8da; outline-offset: 6px; border-radius: 8px; min-height: 60px; }
.pg-page--design .vg-scell--group > .pg-cell__chrome .pg-cell__tag { background: #e8eaf6; color: #283593; }
.pg-page--design .vg-scell--group.pg-cell--sel > .pg-cell__chrome .pg-cell__tag { background: var(--rz-primary); color: #fff; }
.vg-layer--design { outline: 1px dashed #9b7fc8; outline-offset: 3px; border-radius: 6px; cursor: pointer; min-width: 48px; min-height: 26px; pointer-events: auto; }
.vg-layer--sel { outline: 2px solid #5a3d8a; }
.vg-layer--ghost { opacity: 0.45; }
.vg-layer__tag { position: absolute; bottom: 100%; right: 0; margin-bottom: 5px; white-space: nowrap; font-size: 11px; font-weight: 600; color: #fff; background: #5a3d8a; padding: 1px 7px; border-radius: 6px; z-index: 6; text-shadow: none; }
.vg-cell--hidden { opacity: 0.4; }
.pg-page--design .vg-cell--inlayer { padding-top: 0; }
.pg-page--design .vg-cell--inlayer::before { inset: 0; }
.vg-empty { font-size: 0.78rem; color: var(--rz-text-tertiary-color); padding: 0.6rem; border: 1px dashed var(--rz-border-color); border-radius: 6px; flex: 1 1 100%; text-align: center; }
.vg-row--layer > .vg-empty { padding: 0.25rem 0.5rem; font-size: 0.7rem; background: var(--rz-base-background-color); color: var(--rz-text-secondary-color); }